@charset "utf-8";

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

	Ranikng for Smart Devices

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

@media (max-width: 767px) {

#btnDetail {
	right: 3.125%;
	top: 0;
	width: 34.375%;
	padding-top: 6.25%;
}

article .selectWrap {
	margin: 0 auto 4.6875%;
}

.tabRanking.areaOn li {
	padding-top: 13.33%;
}

.tabRanking.areaOn .j { width: 22.5%; }
.tabRanking.areaOn .jl { width: 25%; }
.tabRanking.areaOn .c { width: 28.33%; }
.tabRanking.areaOn .area { width: 19.16%; }

.tabRanking.areaOn .j a {
	background-size: auto 25%;
}

.tabRanking.areaOn .jl a {
	background-image: url(../img/ranking/tab_jl_sp.png);
	background-size: auto 60%;
}

.tabRanking.areaOn .c a {
	background-image: url(../img/ranking/tab_c_sp.png);
	background-size: auto 63.75%;
}
	
.tabRanking .area a {
	background-image: url(../img/ranking/tab_area_sp.png);
	background-size: auto 27.5%;
}

#tabSub ul {
	border-radius: 5px;
}
#tabSub li {
	width: 50%;
}
#tabSub li a {
	border-radius: 5px;
}

.tabNav .annual a {
	background-size: auto 41.67%;
}

#tabSub .constructor li,
#tabSub .season li {
	width: 33.33%;
}
#tabSub .constructor li:before,
#tabSub .season li:before {
	width: 1px;
}

.tabNav.season .award a { background-image: url(../img/sp/ranking/tab_award.png); }
.tabNav .blue a { background-image: url(../img/sp/ranking/tab_blue.png); }
.tabNav .red a { background-image: url(../img/sp/ranking/tab_red.png); }

article>#archive {
	padding: 6.25% 0 0;
	text-align: left;
}
#archive p,
#archive .selectWrap {
	width: 50%;
	margin: 0;
	border: 0;
}
#archive p {
	width: 46.875%;
	text-align: center;
}

article section+section {
	margin-top: 6.67%;
}

#awardText {
	margin-bottom: 6.67%;
	text-align: center;
	font-size: 9px;
}

article h3 {
	position: relative;
	margin-bottom: 3.33%;
	padding-top: 7.33%;
}
article h3 img {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
}



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

	Area Ranking

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

#rankingArea .accordion {
	padding: 6.25% 3.125%;
}

#rankingArea section section+section {
	margin-top: 6.66%;
}
#rankingArea h4 {
	font-size: 18px;
	line-height: 40px;
}
#rankingArea section section>ul {
	display: block;
	padding: 0 3.57% 3.57%;
}
#rankingArea section section>ul>li {
	width: auto;
}
#rankingArea section section>ul>li+li {
	margin-top: 3.57%;
}
#rankingArea h5 {
	margin-bottom: 3.84%;
	padding-top: 23px;
	background-size: auto 10px;
}

#rankingArea .rank {
	width: 11.53%;
}

#rankingArea .gold .rank>div>div:before {
	width: auto;
	height: 13px;
	background-size: contain;
}

#rankingArea .rank .num {
	width: 8px;
	height: 16px;
}

#rankingArea .photo,
#rankingArea .rank+.text {
	margin-left: 11.53%;
}
#rankingArea .photo {
	width: 21.15%;
}

#rankingArea .text {
	width: 88.46%;
}

#rankingArea .photo+.text {
	width: 67.3%;
}

#rankingArea .rankingList .text .name {
	padding-right: 60px;
}

#rankingArea .text .point_pc {
	display: none;
}

#rankingArea .point_sp {
	display: block;
}

/*Break Point*/
}