@charset "utf-8";

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

	Ranking

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

#btnDetail {
	position: absolute;
	right: 0;
	top: 65px;
}

article .selectWrap {
	margin: 0 0 30px;
	padding: 0;
}

.tabRanking.areaOn .j,
.tabRanking .area { width: 140px; }
.tabRanking.areaOn .jl,
.tabRanking.areaOn .c { width: 195px; }

.tabRanking .area a {
	background-image: url(../img/ranking/tab_area_gray.png);
	background-size: auto 15px;
}
.tabRanking .area a:hover,
.tabRanking .area.on a {
	background-image: url(../img/ranking/tab_area.png);
}

#tabSub ul {
	border-radius: 10px;
	background: #d2d2d2;
}
#tabSub li {
	width: 345px;
	margin: 0;
}
#tabSub li a {
	border-radius: 10px;
	background-color: transparent;
}
#tabSub li a:hover,
#tabSub .on a {
	background-color: #1e1e1e;
}

.tabNav .annual a {
	background-size: auto 18px;
}
.tabNav .annual a { background-image: url(../img/ranking/tab_annual.png); }
.tabNav .award a { background-image: url(../img/ranking/tab_award.png); }

#tabSub .constructor li,
#tabSub .season li {
	width: 230px;
}
#tabSub .constructor li:before,
#tabSub .season li:before {
	content: '';
	position: absolute;
	left: -1px;
	top: 50%;
	width: 2px;
	height: 20px;
	margin-top: -10px;
	background: #fff;
}

#tabSub li:first-child:before,
#tabSub li:hover:before,
#tabSub li:hover+li:before,
#tabSub .on:before,
#tabSub .on+li:before {
	display: none !important;
}

.tabNav .barrel a { background-image: url(../img/ranking/tab_barrel.png); }
.tabNav .flight a { background-image: url(../img/ranking/tab_flight.png); }
.tabNav .apparel a { background-image: url(../img/ranking/tab_apparel.png); }

.tabNav .blue a {
	background-image: url(../img/ranking/tab_blue.png);
}
.tabNav .blue a:hover,
.tabNav .blue.on a {
	background-color: #005cac !important;
}
.tabNav .blue a:hover:after,
.tabNav .blue.on a:after {
	border-top-color: #005cac !important;
}

.tabNav .red a {
	background-image: url(../img/ranking/tab_red.png);
}
.tabNav .red a:hover,
.tabNav .red.on a {
	background-color: #e0201c !important;
}
.tabNav .red a:hover:after,
.tabNav .red.on a:after {
	border-top-color: #e0201c !important;
}

article>#archive {
	padding: 40px 20px 0;
	text-align: right;
}
#archive p,
#archive .selectWrap {
	display: inline-block;
	vertical-align: middle;
}
#archive .selectWrap {
	width: 240px;
	margin: 0 0 0 20px;
}

article section+section {
	margin-top: 40px;
}

#awardText {
	margin-bottom: 15px;
}

article h3 {
	margin-bottom: 12px;
}
article h3 img {
	height: 32px;
}



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

	Area Ranking

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

#rankingArea .accordion {
	padding: 20px;
}

#rankingArea h3 {
	margin: 0;
}
#rankingArea section section {
	background: #f0f0f0;
}
#rankingArea section section+section {
	margin-top: 20px;
}
#rankingArea h4 {
	margin: 0;
	padding: 0;
	background: none;
	text-align: center;
	letter-spacing: .1em;
	color: inherit;
	font-weight: bold;
	font-size: 20px;
	line-height: 60px;
}
#rankingArea section section>ul {
	display: -webkit-flex;
	-webkit-justify-content: space-between;
	display: flex;
	justify-content: space-between;
	padding: 0 20px 20px;
}
#rankingArea section section>ul>li {
	width: 295px;
}
#rankingArea h5 {
	overflow: hidden;
	height: 0;
	margin-bottom: 10px;
	padding-top: 40px;
	background: url(../img/common/tab_j.png) 50% 50% no-repeat #1e1e1e;
	background-size: auto 14px;
}

#rankingArea .jl h5 {
	background-image: url(../img/common/tab_jl.png);
	background-color: #d23b5a;
}

#rankingArea .rank {
	left: 0;
	width: 40px;
}

#rankingArea .rankingList>.silver:after,
#rankingArea .rankingList>.bronze:after {
	height: 60px;
}

#rankingArea .gold .rank>div>div:before {
	width: 30px;
	height: 19px;
	background-size: 100%;
}
#rankingArea .silver .rank>div>div:before,
#rankingArea .bronze .rank>div>div:before {
	display: none;
}

#rankingArea .rank .num {
	width: 12px;
	height: 24px;
}

#rankingArea .photo {
	margin-left: 40px;
	padding: 0;
}

#rankingArea .text {
	width: 235px;
}

#rankingArea .rank+.text {
	margin-left: 40px;
}
#rankingArea .photo+.text {
	width: 155px;
}

#rankingArea .name {
	padding-right: 80px;
}

#rankingArea .photo+.text .name {
	padding-right: 10px;
}

#rankingArea .name small {
	display: block;
	margin: 5px 0 0;
}

#rankingArea .point_pc {
	padding: 0;
	top: auto;
	bottom: 10px;
	margin: 0;
	font-weight: bold;
	font-size: 14px;
}

#rankingArea .gold .point_pc {
	position: static;
	display: block;
	margin-top: 5px;
}

#rankingArea .point_pc:after,
#rankingArea .point_sp {
	display: none;
}

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

	add css

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

.rankingList {
    font-size: 14px;
}

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

article .rankingList > li:after {
    height: 28px;
}

.rankingList .status {
	background-size: 16px;
	background-color: transparent;
}

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

.rankingList .photo {
    width: 60px;
    margin-left: 110px;
    padding: 4px 0 4px 4px;
}

#sideContents .rankingList .photo {
	width: 80px;
}

.rankingList .text {
    width: 572px;
    padding: 4px 8px;
}

article .rankingList .photo + .text {
    width: 513px;
    margin-left: 0;
}

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

.rankingList .name small {
    margin-left: 8px;
    font-size: 10px;
}

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

.rankingList.constructor .point {
    margin-top: -10px;
    padding: 0 24px 4px 0;
}

.rankingList .point .num {
    width: 8px;
    height: 16px;
}

.rankingList .point:after {
    width: 22px;
    height: 16px;
    background: url(../img/ranking/point.png) no-repeat;
    background-size: 22px;
}

.rankingList .gold .rank>div>div:before,
.rankingList .silver .rank>div>div:before,
.rankingList .bronze .rank>div>div:before {
    width: 32px;
    height: 20px;
    background-size: 32px;
}

article .rankingList > .gold:after,
article .rankingList > .silver:after,
article .rankingList > .bronze:after {
    height: 64px;
}

#tab-ranking-award .rankingList .point {
	padding: 0 4px 4px 0;
}

#tab-ranking-award .rankingList .point:after,
#tab-ranking-award .rankingList .gold .point:after,
#tab-ranking-award .rankingList .silver .point:after,
#tab-ranking-award .rankingList .bronze .point:after {
	width: 0;
	background: none;
}

#btnDetail {
    position: absolute;
    right: 0;
    top: 65px;
}

article .selectWrap {
    margin: 0 0 30px;
    padding: 0;
}