@charset "utf-8";

/* ++++++++++++++++++++++++++++++++++++++++

	for Smart Devices

++++++++++++++++++++++++++++++++++++++++ */

@media (max-width: 767px) {

body {
	background: #fff;
	font-size: 13px;
}

#container {
	overflow: hidden;
	min-width: 320px;
	padding-top: 25%;
}

small {
	font-size: 9px;
}


.pcBreak {
	display: inline;
}

.spBreak {
	display: block;
}

.pcOnly {
	display: none;
}

.spOnly {
	display: inline-block;
}


/* ----------------------------------------
	header
---------------------------------------- */

header {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	padding-top: 1.5625%;
	white-space: nowrap;
}

h1,
#headerSponsor {
	display: inline-block;
	position: relative;
	top: 0;
	vertical-align: middle;
}
h1 {
	left: 0;
	width: 32.96875%;
	height: 0;
	margin: 0 22.5% 0 3.125%;
	padding-top: 9.375%;
}
h1 a {
	background: url(../img/sp/common/logo_japan.png) no-repeat;
	background-size: contain;
}
#headerSponsor {
	right: 0;
	width: 100%;
	margin: 0;
}
#headerSponsor li {
	display: block;
	float: none;
	width: 37.8125%;
	margin: 0;
	vertical-align: middle;
	line-height: 0;
}
#headerSponsor li+li {
	margin-top: 1.5625%;
}

#headerSponsor .nikkan {
	width: 25.625%;
}

#headerSponsor li img {
	height: auto;
}

#sns {
	position: static;
	margin: 1.5625% 0 0;
	padding: 3.125% 0;
	background: #1e1e1e;
}
#sns li {
	width: 6.25%;
	height: 0;
	margin: 0 0 0 3.125%;
	padding-top: 6.25%;
	background-size: contain;
}

#sns .fb { background-image: url(../img/common/icon_fb.png); }
#sns .tw { background-image: url(../img/common/icon_x_w.png); }
#sns .ig { background-image: url(../img/common/icon_insta.png); background-size: cover; }
#sns .tk { background-image: url(../img/common/icon_tiktok.png); background-size: cover; }

/* nav
---------------------------------------- */

nav {
	display: none;
	overflow-x: hidden;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	border: 0;
	background: rgba(30,30,30,.95);
}
nav ul {
	display: -webkit-flex;
	-webkit-flex-wrap: wrap;
	-webkit-justify-content: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: auto;
	padding: 6.25% 0 3.125%;
}
nav li {
	width: 22.96875%;
	height: 0;
	margin: 0 0 3.75%;
	padding-top: 29.0625%;
	background: 50% 0 no-repeat;
	background-size: contain;
}
nav li:after {
	display: none;
}

nav .home,
nav .license {
	display: none;
}

nav .outline { background-image: url(../img/sp/common/nav_outline.png); }
nav .schedule { background-image: url(../img/sp/common/nav_schedule.png); }
nav .gallery { background-image: url(../img/sp/common/nav_gallery.png); }
nav .result { background-image: url(../img/sp/common/nav_result.png); }
nav .ranking { background-image: url(../img/sp/common/nav_ranking.png); }
nav .directory { background-image: url(../img/sp/common/nav_directory.png); }
nav .info { background-image: url(../img/sp/common/nav_info.png); }
nav .live { background-image: url(../img/sp/common/nav_live.png); }

nav li a {
	opacity: 1;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	padding: 0;
}
nav li img {
	display: none;
}

nav .sub {
	padding: 0;
}
nav .sub li {
	display: block;
	float: none;
	width: 100% !important;
	margin: 0 !important;
	padding-top: 12.1875%;
	border-top: solid 1px #787878;
	background: none;
}
nav .sub li a {
	text-indent: -20000px;
}
nav .sub li a:after {
	content: '';
	position: absolute;
	left: 6.25%;
	top: 0;
	width: 100%;
	height: 100%;
	background: 0 50% no-repeat;
	background-size: auto 38.46%;
}

nav .sub .loginPlayer,
nav .sub .license {
	position: relative;
	right: 0;
	top: 0;
	height: 0;
	background-image: none;
}

nav .sub .loginPlayer a:after { background-image: url(../img/sp/common/nav_login_player.png); }
nav .sub .loginSponsor a:after { background-image: url(../img/sp/common/nav_login_sponsor.png); }
nav .sub .license a:after { background-image: url(../img/sp/common/nav_license.png); }
nav .sub .inquiry a:after { background-image: url(../img/sp/common/nav_inquiry.png); }
nav .sub .sitemap a:after { background-image: url(../img/sp/common/nav_sitemap.png); }
nav .sub .privacy a:after { background-image: url(../img/sp/common/nav_privacy.png); }

#navBtn {
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	width: 35.9375%;
	padding-top: 12.5%;
	background: url(../img/sp/common/nav_btn.png) no-repeat;
	background-size: contain;
}
#navBtn.open {
	background-image: url(../img/sp/common/nav_close.png);
}


/* ----------------------------------------
	article
---------------------------------------- */

#contents {
	width: auto;
}

article {
	float: none;
	width: auto;
	margin-bottom: 0;
	padding-top: 6.25%;
}
article h2 {
	position: relative;
	margin-bottom: 6.25%;
	padding-top: 9.375%;
}
article h2 img {
	position: absolute;
	left: 3.125%;
	top: 0;
	width: auto;
	height: 100%;
}
article>div {
	padding: 6.25% 3.125%;
	background: #d2d2d2;
}

#btnBack {
	width: 17.5%;
	height: 0;
	padding-top: 9.375%;
	margin: 0 0 6.25% 3.125%;
	background-image: url(../img/sp/common/btn_back.png);
	background-size: contain;
}

/* num
---------------------------------------- */

/* entryList */

#entryList .num0 { background-image: url(../img/num/white/0.svg); }
#entryList .num1 { background-image: url(../img/num/white/1.svg); }
#entryList .num2 { background-image: url(../img/num/white/2.svg); }
#entryList .num3 { background-image: url(../img/num/white/3.svg); }
#entryList .num4 { background-image: url(../img/num/white/4.svg); }
#entryList .num5 { background-image: url(../img/num/white/5.svg); }
#entryList .num6 { background-image: url(../img/num/white/6.svg); }
#entryList .num7 { background-image: url(../img/num/white/7.svg); }
#entryList .num8 { background-image: url(../img/num/white/8.svg); }
#entryList .num9 { background-image: url(../img/num/white/9.svg); }
#entryList .numS { background-image: url(../img/num/white/s.svg); }

/* tabNav
---------------------------------------- */

.tabNav {
	width: 93.75%;
	margin: 0 auto 4.6875%;
}
.tabNav li {
	width: 49.16%;
	height: 0;
	margin-right: 1.67%;
	padding-top: 10%;
}
.tabNav li a {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	border-radius: 5px;
	background-color: #d2d2d2;
	background-size: auto 33.33%;
}
.tabNav li a:after {
	margin-left: -5px;
	border-width: 5px;
	border-top-color: #d2d2d2;
}

.tabNav .j a { background-image: url(../img/common/tab_j.png); }
.tabNav .jl a { background-image: url(../img/common/tab_jl.png); }

/* tabRanking */

.tabRanking .j { width: 19.17%; }
.tabRanking .jl { width: 38.33%; }
.tabRanking .c { width: 39.16%; }

.tabRanking .c a {
	background-image: url(../img/common/tab_c.png);
	background-size: auto 41.67%;
}

/* tabSub */

#tabSub {
	padding: 0 0 6.25%;
}

/* input, select, textarea
---------------------------------------- */

.inputWrap,
.selectWrap,
.textareaWrap {
	width: 93.75%;
	margin-top: 4.6875%;
	border-radius: 5px;
}

#selectYear { width: 31.25% }
#selectYear+#selectStage { width: 59.375%; }

.selectWrap:before {
	background-image: url(../img/sp/common/select_btn.png);
	background-size: 10px;
}
.inputWrap input[type=text],
.selectWrap select,
.textareaWrap textarea {
	padding-left: 10px;
	font-size: 13px;
}
.textareaWrap textarea {
	height: -webkit-calc(7.5em + 20px);
	height: calc(7.5em + 20px);
	padding: 10px;
}

/* searchName */

#searchName #searchNameBtn {
	right: 0;
	top: 0;
	width: 36px;
	height: 40px;
	margin: 0;
}

/* radio */

input[type=radio] {
	width: 16px;
	height: 16px;
	margin-right: 5px;
}

/* searchResult
---------------------------------------- */

.srFrame {
	width: 3px;
	height: 3px;
}

/* directoryLink
---------------------------------------- */

.directoryLink>li {
	overflow: hidden;
	position: relative;
}

.directoryLinkOpener,
.directoryLinkBtn {
	display: block;
}
.directoryLinkOpener {
	position: absolute;
	right: 0;
	top: 50%;
	width: 15px;
	height: 20px;
	margin-top: -10px;
	background: url(../img/sp/common/directory_link_opener.png) no-repeat;
	background-size: 100%;
}
.directoryLinkBtn {
	position: absolute;
	left: 100%;
	top: 0;
	width: 70px;
	height: 100%;
	margin-left: 10px;
	background: url(../img/sp/common/directory_link_btn.png) 20px 50% no-repeat #5a5a5a;
	background-size: 40px;
	transition: .3s;
}

.ladies .directoryLinkBtn {
	background-color: #d23b5a;
}

.directoryLinkBtn.open {
	margin-left: -70px;
}


/* rankingList
---------------------------------------- */

.rankingList {
	font-size: 13px;
}
.rankingList li {
	margin-top: 3.33%;
}

article .rankingList li:after {
	height: 40px !important;
}

.rankingList .status {
	width: 8.33%;
	background-size: 100%;
}

.rankingList .rank {
	width: 10%;
	left: 8.33%;
}
.rankingList .rank .num {
	width: 8px;
	height: 16px;
}

.rankingList .gold .rank>div>div:before,
.rankingList .silver .rank>div>div:before,
.rankingList .bronze .rank>div>div:before {
	width: 100%;
	height: 13px;
	margin-bottom: 5px;
	background-size: contain;
}

.rankingList .photo {
	width: 18.33%;
	margin-left: 18.33%;
}

.rankingList .text {
	box-sizing: border-box;
	width: 81.67%;
}

article .rankingList .text {
	margin-left: 18.33%;
}
article .rankingList .photo+.text {
	width: 63.33%;
	margin-left: 0;
}

.rankingList .name {
	position: relative;
	padding-right: 60px;
}
.rankingList .name small {
	display: block;
	margin: 5px 0 0;
	font-size: 9px;
}

.rankingList .j16 {
	display: none;
}

.rankingList .point {
	right: 12px;
	margin-top: -10px;
	padding: 0 16px 2px 0;
}
.rankingList .point:after {
	width: 14px;
	height: 10px;
	background-size: 14px;
}
.rankingList .point .num {
	width: 10px;
	height: 20px;
}

.rankingList .constructorList {
	width: auto;
	margin: 0 0 0 -2.44%;
	font-size: 9px;
}
.rankingList .constructorList li {
	min-width: 0;
	margin: 2.44% 0 0 2.44%;
	padding: 2px 5px;
}

/* rankingList.constructor */

.rankingList.constructor .photo {
	width: 35%;
	height: auto;
	padding: 5px 10px;
}

.rankingList.constructor .point {
	right: 10px;
	margin-top: -10px;
	padding: 0 16px 2px 0;
}

/* accordion
---------------------------------------- */

.accordion section+section {
	margin-top: 3.33%;
}
.accordion h3,
.accordion h4 {
	padding-left: 3.33%;
	padding-right: -webkit-calc(25px + 3.33%);
	padding-right: calc(25px + 3.33%);
	font-size: 13px;
}
.accordion .btnOpen,
.accordion .btnOpen.open {
	position: absolute;
	right: 3.33%;
	width: 20px;
	background: url(../img/sp/common/btn_open.png) no-repeat;
	background-size: contain;
}
.accordion .btnOpen.open {
	-webkit-transform: rotateX(-180deg);
	transform: rotateX(-180deg);
}

.accordion>section>div {
	padding: 3.33%;
	padding-bottom: -webkit-calc(20px + 6.67%);
	padding-bottom: calc(20px + 6.67%);
}

.accordion .btnClose {
	display: block;
	opacity: 0;
	position: absolute;
	right: 3.33%;
	bottom: 10px;
	width: 20px;
	height: 20px;
	background: url(../img/sp/common/btn_close.png) no-repeat;
	background-size: contain;
	text-indent: -20000px;
}
.accordion .btnClose.open {
	opacity: 1;
}


/* ----------------------------------------
	sideContents
---------------------------------------- */

#sideContents {
	display: none;
}


/* ----------------------------------------
	footer
---------------------------------------- */

footer {
	padding: 4.6875% 0;
	text-align: center;
	font-size: 9px;
}

#btnPagetop,
footer ul {
	display: none !important;
}

footer>div {
	width: auto;
}
footer p {
	float: none;
}


/* ----------------------------------------
	liveParts
---------------------------------------- */

#liveTop {
	margin-bottom: 1.5625%;
	padding: 3.125% 0;
}
#liveTop img {
	width: 59.375%;
}
#liveTop a {
	left: auto;
	right: 3.125%;
	top: 31.25%;
	width: 2.8125%;
	height: 37.5%;
	margin: 0;
	background: url(../img/common/arrow_r_wht.png) no-repeat;
	background-size: contain;
}

.liveSide,
.liveSide div {
	background: none;
}
.liveSide {
	top: auto;
	bottom: 10px;
	z-index: 2;
	box-sizing: content-box;
	width: 18.75%;
	height: 0;
	padding: 18.75% 0 0;
}
.liveSide div,
.liveSide a {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	padding: 0;
}
.liveSide img,
.liveSide div div:before,
.liveSide div div:after {
	display: none;
}
.liveSide a {
	border-radius: 50%;
	background: url(../img/common/live_icon.png) 50% 50% no-repeat #96783c;
	background-size: 66.67%;
}

#liveSideL {
	display: none !important;
}

#liveSideR {
	left: auto;
	right: 3.125%;
	margin: 0;
}

/*
#container.liveOn {
	padding-top: 37.5%;
}


.liveOn #headerSponsor {
	top: 0;
}
*/
/* Break Point */
}