#ranking ul,
#ranking ul li{position:relative;}
#ranking ul.rank + ul{display:none;}

#ranking p.score_update_date{
text-align:right;
font-size:11px;
margin:0 auto 5px;}

/*後夜祭用*/
h3#ranking-title{background:#2d00ff; border:1px solid #090033; margin:10px auto 30px;}
@media screen and (max-width:480px){h3#ranking-title{font-size:13px;}}

#ap{width:80%; max-width:500px; margin:0 auto 30px;}
#ap img{width:100%;}

#ranking-toggle{
position:relative;
width:100%;
text-align:center;
font-family:'Noto Sans JP', sans-serif;
font-weight:700;
margin:0 auto;}
#ranking-toggle > p{position:relative; color:#fff; background:#090033; font-size:20px; border-radius:20px; padding:10px; cursor:pointer; transition:all .2s ease;}
#ranking-toggle > p::before{
display:block;
content:"";
position:absolute;
top:calc(50% - 12px);
right:20px;
width:16px;
height:16px;
border-top:4px solid;
border-right:4px solid;
transform:rotate(135deg);
transition:all .2s ease;}
#ranking-toggle > p.open::before{top:calc(50% - 4px); transform:rotate(-45deg);}
#ranking-toggle > .inner{
display:none;
position:absolute;
width:100%;
top:42px;
left:0;
color:#090033;
background:#fff;
margin:10px auto 0;
border:2px solid rgba(9,0,51,.3);
border-radius:20px;
overflow:hidden;
z-index:4;}
#ranking-toggle > .inner a{display:block; color:#090033; padding:5px; transition:all .2s ease;}
#ranking-toggle > .inner a:hover{background:rgba(9,0,51,.3);}
#ranking-toggle > .inner a + a{border-top:1px solid rgba(9,0,51,.3);}

@media screen and (max-width:640px){
#ranking-toggle > p{font-size:15px; border-radius:10px;}
#ranking-toggle > p::before{top:calc(50% - 8px); width:12px; height:12px; border-top:3px solid; border-right:3px solid;}
#ranking-toggle > p.open::before{top:calc(50% - 4px);}
#ranking-toggle > .inner{border-radius:10px;}}

/*
================================================================================================================
プルダウンメニュー
================================================================================================================
*/
#score-select{display:flex; justify-content:space-between; flex-wrap:wrap;}
#score-select > ul{
display:flex;
width:calc((100% / 2) - 10px);
background:#0088d5;
border-radius:10px;
border:1px solid;
align-items:center;
overflow:hidden;}
#score-select > ul li:first-child{width:80px; font-family:'Noto Sans JP', sans-serif; font-weight:700; text-align:center;color:#FFF;}
#score-select > ul li:last-child{width:calc(100% - 80px);}

#score-select > ul select{width:100%; padding:8px 5px; border-left:1px solid; cursor:pointer;}
#score-select > ul select:focus{outline:none;}

@media screen and (max-width:440px){
#score-select > ul{width:100%;}
#score-select > ul + ul{margin-top:10px;}}
@media screen and (max-width:390px){
#score-select > ul li:first-child{width:50px;}
#score-select > ul li:last-child{width:calc(100% - 50px);}}

/*
=========================
部門あり
=========================
*/
.ddr #score-select > ul,.drs #score-select > ul{width:calc((100% / 3) - 10px);}
@media screen and (max-width:700px){
.ddr #score-select > ul{width:100%;}
.ddr #score-select > ul + ul{margin-top:10px;}}
@media screen and (max-width:1200px){
.drs #score-select > ul{width:100%;}
.drs #score-select > ul + ul{margin-top:10px;}}
@media screen and (max-width:380px){
.drs #score-select > ul:first-child select{font-size:11px;}}

/*
================================================================================================================
ランキング表
================================================================================================================
*/
.score-rank > p{text-align:right; font-size:11px; margin:10px auto;}/*最終更新日*/

/*
=========================
ランキング-共通
=========================
*/
ul.rank{display:flex; width:100%; background:rgba(255,255,255,.7); border:1px solid #090033;}
ul.rank > li{text-align:center; padding:5px;}
ul.rank > li + li{border-left:1px solid #090033;}

ul.rank > li:nth-child(1){width:60px;}
ul.rank > li:nth-child(2),
ul.rank > li:nth-child(3){width:calc((100% - 190px) / 2);}
ul.rank > li:nth-child(4){width:130px;}

@media screen and (max-width:590px){
ul.rank > li:nth-child(1){width:60px;}
ul.rank > li:nth-child(2),
ul.rank > li:nth-child(3){width:calc((100% - 60px) / 2);}
ul.rank > li:nth-child(4){display:none;}}
@media screen and (max-width:390px){
ul.rank > li{display:flex; align-items:center; justify-content:center;}
ul.rank > li:nth-child(1){width:50px;}
ul.rank > li:nth-child(2),
ul.rank > li:nth-child(3){width:calc((100% - 50px) / 2);}
ul.rank > li:nth-child(2){text-align:left;}
ul.rank > li:nth-child(3){padding-right:20px;}}

/*
=========================
ランキング-スコア表
=========================
*/
ul.rank:not(.head){cursor:pointer; border-top:none; transition:background .2s ease;}
ul.rank:not(.head) li:nth-child(1){background:#ffc000;}
ul.rank:not(.head) li:nth-child(4){font-size:11px;}

/*オンマウス*/
@media screen and (min-width:641px){
ul.rank:not(.head):hover{background:rgba(255,192,0,.2);}}

/*
=========================
ランキング-見出し
=========================
*/
ul.head{color:#fff; background:#2d00ff;}
ul.head li{font-weight:bold; font-size:12px;}

/*
=========================
トグル表示 詳細スコア
=========================
*/
ul.rank + ul{background:rgba(9,0,51,.2); font-size:12px; border:1px solid; border-top:none; padding:10px;}
ul.rank + ul li{text-align:right; background:rgba(255,255,255,.7); border:1px solid rgba(9,0,51,.5); border-bottom:1px dotted rgba(9,0,51,.5); padding:5px 10px;}
ul.rank + ul li + li{border-top:none;}

ul.rank + ul li:not(:last-child){display:flex; align-items:center;}
ul.rank + ul li p:first-child{width:calc(100% - 80px); text-align:left;}
ul.rank + ul li p:last-child{width:80px;}

ul.rank + ul li:first-child{border-radius:5px 5px 0 0;}
ul.rank + ul li:nth-last-child(2){border-bottom:1px solid rgba(9,0,51,.5); border-radius:0 0 5px 5px;}

/*更新日時*/
ul.rank + ul li:last-child{background:transparent !important; font-size:11px; border:none; padding:5px 0 0 !important;}
ul.rank + ul li:last-child::before{display:inline-block; content:"更新日時"; margin-right:10px;}

@media screen and (min-width:591px){
ul.rank + ul li:last-child{display:none;}}
@media screen and (max-width:590px){
ul.rank + ul{padding:10px 10px 5px;}
ul.rank + ul li{font-size:11px;}
ul.rank + ul li:last-child{display:block;}
ul.rank + ul li p:first-child{width:calc(100% - 60px);}
ul.rank + ul li p:last-child{width:60px;}}

/*
=========================
詳細スコア用トグルボタン
=========================
*/
ul.rank:not(.head)::before,
ul.rank:not(.head)::after{display:block; position:absolute; transition:all .2s ease; z-index:2;}

ul.rank:not(.head)::before{
content:"詳細スコア";
top:calc(50% - 14px);
right:135px;
background:#fc0;
font-size:11px;
border-radius:5px;
padding:0 25px 0 10px;}

ul.rank:not(.head)::after{
content:"";
top:calc(50% - 7px);
right:145px;
width:8px;
height:8px;
border-top:1px solid;
border-right:1px solid;
transform:rotate(135deg);}
ul.rank.open::after{top:calc(50% - 3px); transform:rotate(-45deg);}

@media screen and (max-width:860px){
ul.rank:not(.head)::before{content:""; width:26px; height:26px; padding:0;}
ul.rank:not(.head)::after{right:144px;}}
@media screen and (max-width:640px){
ul.rank:not(.head)::before{width:22px; top:calc(50% - 11px); height:22px;}
ul.rank:not(.head)::after{top:calc(50% - 6px); right:142px;}
ul.rank.open::after{top:calc(50% - 1px);}}
@media screen and (max-width:590px){
ul.rank:not(.head)::before{right:5px;}
ul.rank:not(.head)::after{right:12px;}}

/*オンマウス*/
ul.rank.open::before,
ul.rank.open::after{color:#fff;}
ul.rank.open::before{background:#fd2b18;}
@media screen and (min-width:641px){
ul.rank:not(.head):hover::before,
ul.rank:not(.head):hover::after{color:#fff;}
ul.rank:not(.head):hover::before{background:#fd2b18;}}

/*
================================================================================================================
個人成績
================================================================================================================
*/
#score-user{position:relative; background:#f30062; border:2px solid; border-radius:10px; padding:10px; margin:0 auto 30px;}

#score-user > p,
#score-user ul.rank > li{font-family:'Noto Sans JP', sans-serif; font-weight:700;}

/*見出し*/
#score-user > p{position:relative; font-size:22px; padding-left:25px; margin:5px auto 10px;}
#score-user > p::before{
display:block;
content:"";
position:absolute;
top:12px;
left:-10px;
width:30px;
height:6px;
background:#ff9600;}

/*シェアボタン*/
#score-user .share{position:absolute; display:flex; top:10px; right:10px;}
#score-user .share a{
display:block;
width:40px;
height:40px;
background-color:#000;
background-size:100% auto;
background-repeat:no-repeat;
background-position:center;
border-radius:5px;
transition:opacity .2s ease;}
#score-user .share a:first-child{background-image:url(/game/bpl/common/img/sns/icn_ea.png);}
#score-user .share a:last-child{background-image:url(/game/bpl/common/img/sns/icn_x.png);}
#score-user .share a + a{margin-left:10px;}
#score-user .share a:hover{opacity:.6;}
@media screen and (max-width:480px){#score-user .share a{width:30px; height:30px;}}

/*スコア*/
#score-user ul.rank{background:#fff; border-radius:3px; border:1px solid !important; padding:5px;}
#score-user ul.rank:hover{background:#fde5ef;}
#score-user ul.rank:not(.head)::before{right:10px !important;}
#score-user ul.rank:not(.head)::after{right:18px !important;}

#score-user ul.rank > li{font-size:18px;}
#score-user ul.rank > li:nth-child(1){width:200px; background:transparent !important;}
#score-user ul.rank > li:nth-child(2){width:calc(100% - 200px); text-align:left;}
#score-user ul.rank > li:nth-child(2)::before{display:inline-block; content:"合計スコア"; font-size:12px; margin:0 10px;}

#score-user ul.rank + ul{background:transparent; border:none; padding:10px 0 0;}
#score-user ul.rank + ul li{background:#fff;}
#score-user ul.rank + ul li:last-child{
display:block !important;
background:#ff70b8 !important;
text-align:center;
font-size:12px;
border-radius:5px;
padding:0 !important;
margin:10px auto 0;}
#score-user ul.rank + ul li:last-child::before{display:inline-block; content:"参照中カードナンバー"; font-weight:bold;}

@media screen and (max-width:640px){
#score-user > p{font-size:18px;}
#score-user > p::before{top:9px;}
#score-user ul.rank:not(.head)::after{right:17px !important;}}
@media screen and (max-width:530px){
#score-user ul.rank{display:block;}
#score-user ul.rank > li{width:100% !important;}
#score-user ul.rank > li:nth-child(2){border-left:none; text-align:center;}
#score-user ul.rank > li:nth-child(2)::before{font-size:11px; margin:0 10px 0 0;}}
@media screen and (max-width:370px){#score-user ul.rank + ul li:last-child::before{display:block; margin:0;}}