/*
================================================================================================================
フォント
================================================================================================================
*/
.ranking > .cat-title{font-family:'M PLUS 1', sans-serif; letter-spacing:2px; font-weight:800;}

.ranking > .team-rank .inner:not(.head) ul:first-child,
.ranking > .member-status .inner ul.cat li:first-child,
.personal-prize ul li:first-child{font-family:'Orbitron','M PLUS 1', sans-serif; letter-spacing:2px; font-weight:900;}

/*
================================================================================================================
順位表
================================================================================================================
*/
.ranking{
position:relative;
width:100%;
max-width:1200px;
font-weight:700;
font-family:'Noto Sans JP', sans-serif;
margin:0 auto;
z-index:3;}
.ranking a{color:#fff; transition:opacity .2s ease-in-out;}
.ranking a:hover{opacity:.5;}

/*1位*/
.ranking > .team-rank .inner .cat.first li:first-child,.rank.first{font-size:28px !important;}

/*
========================
見出し
========================
*/
.ranking > .cat-title{
display:block;
width:100%;
color:#fff;
background:#133479;
font-size:18px;
text-align:center;
margin:40px auto 10px;}
.ranking > .cat-title span{display:block; padding:15px 0;}
.ranking .stage-num + .cat-title{margin:20px auto 10px;}
.ranking.cat-title br{display:none;}
@media screen and (max-width:480px){
.ranking > .cat-title{font-size:15px;}
.ranking > .cat-title span{padding:8px 0;}
.ranking .stage-num + .cat-title{margin:10px auto;}}
@media screen and (max-width:370px){.ranking > .cat-title{font-size:13px;}.cat-title br{display:block;}}

/*
========================
試合終了
========================
*/
.ranking > .stage-num{
display:block;
font-size:13px;
text-align:center;
color:#fff;
font-weight:400;
background-color:rgba(0,0,0,.8);
padding:5px 0;
margin:0 auto 10px;}
@media screen and (max-width:640px){.ranking > .stage-num{font-size:11px;}}

/*
================================================================================================================
タイトル別 タブ切替
================================================================================================================
*/
#game-menu{
display:flex;
position:relative;
width:100%;
max-width:1200px;
margin:30px auto;
justify-content:space-between;
z-index:3;}
#game-menu li{position:relative; width:calc((100% / 3) - 5px); transition:.1s ease-in-out;}
#game-menu li a{
display:block;
width:100%;
height:100%;
color:#fff;
background:#000;
font-size:22px;
font-weight:800;
letter-spacing:.5px;
text-align:center;
border-radius:40px;
padding:20px 0 25px;
transition:.35s ease-in-out;
opacity:.5;}
#game-menu li a:hover,
#game-menu li.active a{cursor:pointer; background:#333; opacity:1;}
#game-menu li.active,
#game-menu li.active a{cursor:default !important; pointer-events:none;}
#game-menu li a p{position:relative;}

@media screen and (max-width:980px){#game-menu li a{font-size:20px; padding:15px 0 20px;}}

@media screen and (max-width:800px){
#game-menu{flex-wrap:wrap;}
#game-menu li{width:100%;}
#game-menu li + li{margin-top:10px;}}

@media screen and (max-width:480px){
#game-menu{margin:0 auto 20px;}
#game-menu li a{font-size:18px; padding:10px 0 15px;}}

/*
================================================================================================================
順位表-表見出し
================================================================================================================
*/
.ranking .head{
display:flex;
color:#fff;
background-color:#333;
font-size:13px;
text-align:center;
text-shadow:none;
font-weight:400;
border-top:1px solid #000;}
.ranking .head li{padding:5px 0;}
.ranking .head li + li{border-left:1px solid #000;}
@media screen and (max-width:420px){.ranking .head{font-size:11px;}}

.ranking > .team-rank .inner.head ul{display:flex;}
.ranking > .team-rank .inner.head ul:first-child{width:40%;}
.ranking > .team-rank .inner.head ul:nth-child(2){width:60%;}
.ranking > .team-rank .inner.head ul:first-child li{border:none !important;}
.ranking > .team-rank .inner.head ul:first-child li:first-child{width:40px;}
.ranking > .team-rank .inner.head ul:first-child li:nth-child(2){width:calc(100% - 40px);}
.ranking > .team-rank .inner.head ul:nth-child(2) li{width:calc(100% / 6);}
.ranking > .team-rank .inner.head ul:nth-child(2) li:first-child{border-left:1px solid #000;}

.ranking > .member-status .head{border-left:1px solid #000; border-right:1px solid #000;}
.ranking > .member-status .head li:first-child{width:40%;}
.ranking > .member-status .head li:nth-child(2){width:60%;}

@media screen and (max-width:560px){.ranking > .team-rank .inner.head{display:none !important;}}
@media screen and (max-width:480px){
.ranking > .member-status .head li:first-child{width:calc(100% - 100px);}
.ranking > .member-status .head li:nth-child(2){width:100px;}}

/*
================================================================================================================
チーム順位表
================================================================================================================
*/
.ranking > .team-rank{width:100%; margin:0 auto;}
.ranking > .team-rank .inner{display:flex; align-items:center; border-right:1px solid #000; border-left:1px solid #000;}
.ranking > .team-rank .inner:last-child{border-bottom:1px solid #000;}
.ranking > .team-rank .inner + .inner{border-top:1px solid #000;}
.ranking > .team-rank .inner a{display:block; position:relative; width:100%; height:80px; color:#fff; text-align:left;}

.ranking > .team-rank .inner .cat{
position:relative;
display:flex;
width:100%;
font-size:16px;
text-align:center;
align-items:center;}
.ranking > .team-rank .inner .cat li{display:flex; height:80px; justify-content:center; align-items:center;}

.ranking > .team-rank .inner .cat:first-child{width:40%; text-shadow:1px 1px 0 rgba(0,0,0,.3) , 2px 2px 0 rgba(0,0,0,.3) , 0 0 5px rgba(0,0,0,.4);}
.ranking > .team-rank .inner .cat:nth-child(2){width:60%; background-color:rgba(255,255,255,.8); font-size:18px;}

.ranking > .team-rank .inner .cat:first-child li:first-child{position:relative; width:40px; color:#fff; z-index:2;}
.ranking > .team-rank .inner .cat:first-child li:nth-child(2){width:calc(100% - 40px);}
.ranking > .team-rank .inner .cat:first-child::before{/*チームロゴ*/
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-size:auto 50px;
background-repeat:no-repeat;
background-position:center;
transition:opacity .3s ease;}
.ranking > .team-rank .inner .cat:first-child:hover::before{opacity:.7;}

.ranking > .team-rank .inner .cat:nth-child(2) li{width:calc(100% / 6);}
.ranking > .team-rank .inner .cat:nth-child(2) li + li{border-left:1px solid #000;}

@media screen and (max-width:640px){.ranking > .team-rank .inner .cat:first-child::before{background-size:auto 40px;}}
@media screen and (min-width:561px){.ranking > .team-rank .inner .cat:nth-child(2) li:first-child{border-left:1px solid #000;}}
@media screen and (max-width:560px){
.ranking > .team-rank .inner{flex-wrap:wrap; border-bottom:1px solid #000; margin-bottom:5px;}
.ranking > .team-rank .inner .cat:first-child,
.ranking > .team-rank .inner .cat:nth-child(2){width:100%;}
.ranking > .team-rank .inner .cat li{height:65px;}

.ranking > .team-rank .inner .cat:first-child li:first-child{width:calc(100% / 6);}
.ranking > .team-rank .inner .cat:first-child li:nth-child(2){width:calc(100% - (100% / 6));}
.ranking > .team-rank .inner .cat:first-child::before{background-size:auto 50px;}

.ranking > .team-rank .inner .cat:nth-child(2) li{position:relative; padding-top:20px;}/*見出し*/
.ranking > .team-rank .inner .cat:nth-child(2) li::before{
display:block;
position:absolute;
top:0;
left:0;
width:100%;
content:attr(data-title);
color:#fff;
background-color:rgba(0,0,0,.4);
font-size:11px;
font-weight:400;
border-top:1px solid #000;
text-align:center;}}
@media screen and (max-width:480px){
.ranking > .team-rank .inner .cat li{height:50px;}
.ranking > .team-rank .inner .cat:first-child::before{background-size:auto 36px;}
.ranking > .team-rank .inner .cat:nth-child(2){font-size:15px;}
.ranking > .team-rank .inner .cat:nth-child(2) li{padding-top:17px;}
.ranking > .team-rank .inner .cat:nth-child(2) li::before{font-size:10px;}}

/*
================================================================================================================
選手ステータス
================================================================================================================
*/
.ranking > .member-status{width:100%; margin:0 auto;}
.ranking > .member-status .inner{width:100%; border-top:1px solid #000; border-left:1px solid #000; border-right:1px solid #000;}
.ranking > .member-status .inner:last-child{border-bottom:1px solid #000;}
.ranking > .member-status .inner ul.cat{display:flex; width:100%; align-items:center; background-color:rgba(255,255,255,.8);}
.ranking > .member-status .inner ul.cat + .cat{border-top:1px solid #000;}

.ranking > .member-status .inner ul.cat li{height:80px; text-align:center; font-size:20px;}
.ranking > .member-status .inner ul.cat li + li{border-left:1px solid #000;}

/*選手名前エリア*/
.ranking > .member-status .inner ul.cat li:first-child{width:40%; text-align:left;}
.ranking > .member-status .inner ul.cat li:first-child a{display:block; position:relative; width:100%; height:100%;}

/*選手ステータスエリア*/
.ranking > .member-status .inner ul.cat li:nth-child(2){width:60%; line-height:80px;}

@media screen and (max-width:520px){
.ranking > .member-status .inner ul.cat li{height:50px; font-size:15px;}
.ranking > .member-status .inner ul.cat li:nth-child(2){line-height:50px;}}
@media screen and (max-width:480px){
.ranking > .member-status .inner ul.cat li:first-child{width:calc(100% - 100px);}
.ranking > .member-status .inner ul.cat li:nth-child(2){width:100px;}}

/*
================================================================================================================
個人賞
================================================================================================================
*/
.personal-prize .tab-menu > p{width:calc(100% / 3)}

.personal-prize ul{display:flex; overflow:hidden; border-left:1px solid #000; border-right:1px solid #000;}
.personal-prize ul:first-child{border-top:1px solid #000;}
.personal-prize ul:last-child{border-bottom:1px solid #000;}
.personal-prize ul + ul{border-top:1px solid #000;}
.personal-prize ul li{display:flex; font-size:20px; align-items:center;}

/*
========================
セル調整
========================
*/
.personal-prize ul li:first-child{width:40%;}
.personal-prize ul li:first-child p.rank{width:40px; font-size:16px; text-align:center;}
.personal-prize ul li:first-child a{display:block; width:calc(100% - 40px); color:#fff;}

.personal-prize ul li:not(:first-child){background-color:rgba(255,255,255,.8); text-align:center; justify-content:center; border-left:1px solid #000;}
.personal-prize ul li:not(:first-child)::after{display:inline-block; font-size:12px; padding:3px 0 0 3px;}

.personal-prize .point ul li:not(:first-child),
.personal-prize .topscore ul li:not(:first-child){width:60%;}
.personal-prize .counter ul li:not(:first-child){width:30%;}
.personal-prize .counter ul li:nth-child(3){border-left:1px solid #000;}
.personal-prize .topscore ul li:not(:first-child) p:first-child{display:flex; align-items:center; justify-content:center; padding:0 10px; line-height:120% !important;}
.personal-prize .topscore ul li:not(:first-child) p:last-child{font-size:18px;}

.personal-prize .point ul li:not(:first-child)::after{content:"pt"}
.personal-prize .counter ul li:nth-child(2)::after{content:"回"}
.personal-prize .counter ul li:nth-child(3)::after{content:"pt"}
.personal-prize .topscore ul li:not(:first-child) p:last-child::after{content:"%"; font-size:12px;}

@media screen and (max-width:800px){
.personal-prize ul li{height:50px; font-size:18px;}
.personal-prize ul li:first-child{width:50%;}
.personal-prize ul li:first-child a{line-height:50px;}
.personal-prize .point ul li:not(:first-child),
.personal-prize .topscore ul li:not(:first-child){width:50%;}
.personal-prize .counter ul li:not(:first-child){width:25%;}}

@media screen and (max-width:480px){
.personal-prize ul li:first-child{width:calc(100% - 100px) !important;; background-size:100px auto; background-position:top -10px left -5px;}
.personal-prize ul li:first-child a{padding-left:40px;}
.personal-prize ul li:nth-child(2){width:100px !important;;}}

/*
========================
TOP SCORE スコア表記
========================
*/
@media screen and (min-width:801px){
.personal-prize .topscore ul li:not(:first-child) p{height:80px; line-height:80px;}
.personal-prize .topscore ul li:not(:first-child) p:first-child{width:calc(100% - 100px); font-size:14px;}
.personal-prize .topscore ul li:not(:first-child) p:last-child{width:100px; border-left:1px solid #000;}}

@media screen and (max-width:800px){
.personal-prize .topscore ul li:not(:first-child){flex-wrap:wrap;}
.personal-prize .topscore ul li:not(:first-child) p{width:100% !important;}
.personal-prize .topscore ul li:not(:first-child) p:first-child{font-size:12px;}}

@media screen and (max-width:480px){
.personal-prize .topscore ul{flex-wrap:wrap; border-bottom:1px solid #000; margin-bottom:5px;}
.personal-prize .topscore ul li{width:100% !important;}
.personal-prize .topscore ul li:first-child{overflow:hidden; border-bottom:1px solid #000;}
.personal-prize .topscore ul li:last-child{border-left:none; height:inherit;}
.personal-prize .topscore ul li:not(:first-child) p{height:inherit;}
.personal-prize .topscore ul li:not(:first-child) p:first-child{/*border-bottom:1px solid #000;*/ padding:5px;}
.personal-prize .topscore ul li:not(:first-child) p:last-child{padding:5px;}}

/*
========================
説明
========================
*/
.personal-prize .text{color:#fff; background-color:#333; font-size:14px; text-align:center; border:1px solid #000; padding:5px; margin:0 auto;}
.personal-prize .text > span{display:block; font-weight:400; font-size:12px;}
.personal-prize .text > span br{display:none;}
@media screen and (max-width:480px){
.personal-prize .text{font-size:13px;}
.personal-prize .text > span{font-size:11px;}
.personal-prize .text > span br{display:block;}}
@media screen and (max-width:380px){
.personal-prize .text{font-size:11px;}
.personal-prize .text > span{font-size:9px;}}


/*
========================
選手名
========================
*/
@media screen and (max-width:370px){
.member-status .inner ul.cat li:first-child a,
.personal-prize ul li:first-child a,
.personal-prize .topscore ul li:not(:first-child) p:last-child{font-size:12px !important;}
.member-status .inner ul.cat li:first-child a{padding-left:40px !important;}
.personal-prize ul li:first-child a{padding-left:30px !important;}}

/*
================================================================================================================
選手写真調整
================================================================================================================
*/
.ranking > .member-status .inner ul.cat li,
.personal-prize ul li{height:80px;}

.ranking > .member-status .inner ul.cat li:first-child,
.personal-prize ul li:first-child{
color:#fff;
background-size:385px auto;
background-repeat:no-repeat;
line-height:80px;
text-shadow:1px 1px 0 rgba(0,0,0,.3) , 2px 2px 0 rgba(0,0,0,.3) , 0 0 5px rgba(0,0,0,.4);}

.ranking > .member-status .inner ul.cat li:first-child{background-position:top -10px left -159px;}
.ranking > .member-status .inner ul.cat li:first-child a{padding-left:65px;}

.personal-prize ul li:first-child{background-position:top -10px left -135px;}
.personal-prize ul li:first-child a{padding-left:55px;}

@media screen and (max-width:640px){
.ranking > .member-status .inner ul.cat li:first-child a,
.personal-prize ul li:first-child a,
.personal-prize .topscore ul li:not(:first-child) p:last-child{font-size:15px;}}

@media screen and (max-width:520px){
.ranking > .member-status .inner ul.cat li,.personal-prize ul li{height:50px;}
.ranking > .member-status .inner ul.cat li:first-child,
.personal-prize ul li:first-child{background-size:260px auto; font-size:14px; line-height:50px; letter-spacing:1px !important;}
.ranking > .member-status .inner ul.cat li:first-child{background-position:top -10px left -110px;}
.ranking > .member-status .inner ul.cat li:first-child a{padding-left:45px;}
.personal-prize ul li:first-child{background-position:top -12px left -80px;}
.personal-prize ul li:first-child a{padding-left:35px;}}

/*
================================================================================================================
タブ切替
================================================================================================================
*/
.ranking .tab-menu{
display:flex;
width:100%;
position:relative;
color:#fff;
font-size:16px;
font-family:'Noto Sans JP', sans-serif;
font-weight:700;
text-align:center;
justify-content:space-between;
flex-wrap:wrap;
margin:0 auto 5px;}
.ranking .tab-menu > p{
position:relative;
background:#133479;
overflow:hidden;
padding:20px 0;
margin-bottom:5px;
transition:opacity .2s ease-in-out;}

.ranking .tab-menu > p:hover,
.ranking .tab-menu > p.tab-select{cursor:pointer; color:#133479; background:#fff;}

@media screen and (max-width:980px){.ranking .tab-menu{font-size:15px; line-height:130%;}}
@media screen and (max-width:520px){.ranking .tab-menu{font-size:13px;}}
@media screen and (max-width:370px){.ranking .tab-menu{font-size:12px;}}

/*
========================
オンマウス装飾
========================
*/
.ranking .tab-menu > p::after{
display:block;
content:"";
width:100%;
height:1px;
position:absolute;
left:0;
bottom:0;
background:#133479;
z-index:3;
transition:.2s ease;}
.ranking .tab-menu > p:hover::after,
.ranking .tab-menu > p.tab-select::after{height:3px; bottom:0;}

.ranking .tab-menu > p::before{
display:block;
content:"▲";
width:100%;
position:absolute;
text-align:center;
left:0;
bottom:-14px;
color:#133479;
font-size:11px;
transform:scaleX(1.5) scaleY(.5);
transition:.2s ease;}
.ranking .tab-menu > p:hover::before,
.ranking .tab-menu > p.tab-select::before{color:#133479; bottom:-2px;}

@media screen and (max-width:520px){
.ranking .tab-menu > p::before{transform:scaleX(1.5) scaleY(.5);}}

@media screen and (max-width:440px){
.ranking .tab-menu > p:hover::after,
.ranking .tab-menu > p.tab-select::after{height:2px;}}

/*
================================================================================================================
チーム別
================================================================================================================
*/
/*順位表*/
.ranking > .team-rank .inner.team-av ul::before{background-image:url(/game/bpl/common/img/team/av/big.png);}
.ranking > .team-rank .inner.team-gg ul::before{background-image:url(/game/bpl/common/img/team/gg/big.png);}
.ranking > .team-rank .inner.team-gp ul::before{background-image:url(/game/bpl/common/img/team/gp/big_text.png);}
.ranking > .team-rank .inner.team-sh ul::before{background-image:url(/game/bpl/common/img/team/sh/big_text.png);}
.ranking > .team-rank .inner.team-tt ul::before{background-image:url(/game/bpl/common/img/team/tt/big_text.png);}
.ranking > .team-rank .inner.team-r1 ul::before{background-image:url(/game/bpl/common/img/team/r1/big.png);}
.ranking > .team-rank .inner.team-ll ul::before{background-image:url(/game/bpl/common/img/team/ll/big.png);}

/*選手ステータス*/
.ranking > .member-status .inner.team-av ul.cat li:first-child{background-color:#0057b5;}
.ranking > .member-status .inner.team-gg ul.cat li:first-child{background-color:#006cdc;}
.ranking > .member-status .inner.team-gp ul.cat li:first-child{background-color:#ffcb21;}
.ranking > .member-status .inner.team-sh ul.cat li:first-child{background-color:#c8c8c8;}
.ranking > .member-status .inner.team-tt ul.cat li:first-child{background-color:#f00;}
.ranking > .member-status .inner.team-r1 ul.cat li:first-child{background-color:#d80c18;}
.ranking > .member-status .inner.team-ll ul.cat li:first-child{background-color:#ff1d84;}