@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;
}

/***************

	add css

***************/
#tabSub {
    padding: 0px 0 16px;
}

#tab-ranking-point-blue,
#tab-ranking-point-red,
#tab-ranking-award,
#tab-ranking-constructor {
    padding: 8px 8px;
}

.rankingList {
    font-size: 12px;
}

.rankingList li {
    margin-top: 1px;
}

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

.rankingList .rank .num {
    width: 6px;
    height: 12px;
}

.rankingList .point .num {
    width: 6px;
    height: 12px;
}

.rankingList .point {
	right: 12px;
	margin-top: -6px;
    padding: 0 18px 4px 0;
}

.rankingList .point:after {
    width: 16px;
    height: 12px;
    background-size: 16px;
}

.rankingList .name {
    padding-right: 50px;
}

.rankingList .name small {
    display: block;
    margin: 5px 0 0;
    font-size: 9px;
}

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

.rankingList .text {
    box-sizing: border-box;
    width: 81.67%;
    padding: 4px 6px;
}

article .rankingList .text {
    margin-left: 18.33%;
}

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

.rankingList.constructor .point {
	right: 6px;
    margin-top: -6px;
    padding: 0 18px 4px 0;
}

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

article .selectWrap {
    margin: 0 auto 4.6875%;
}
/*Break Point*/
}