#rank{
position:relative;
width:96%;
max-width:980px;
margin:0 auto;
z-index:4;}

p.text{
color:#fff;
background-color:#f00;
text-align:center;
padding:5px;
margin:30px auto;}

.error_box .btn-link{margin-top:20px;}

/*
================================================================================================================
スコアランキング
================================================================================================================
*/
#music_box{margin:10px auto;}

#music_box > .inner{
color:#000;
background-color:#e5e5e5;
border:2px solid #19292b;
padding:10px;
margin:0 auto;}

#music_box > .inner > .cat{display:flex; align-items:center; padding:10px 0;}
#music_box > .inner > .cat + .cat{border-top:1px solid #19292b;}

#music_box > .inner > .cat > .inner{display:flex; align-items:center;}
#music_box > .inner > .cat > .inner:first-child{width:calc(100% - 450px);}
#music_box > .inner > .cat > .inner:first-child > p:first-child{width:221px;}
#music_box > .inner > .cat > .inner:first-child > p:nth-child(2){width:calc(100% - 221px); font-size:13px; font-weight:bold; padding:10px;}

#music_box > .inner > .cat > .inner:nth-child(2){width:450px;}
#music_box > .inner > .cat > .inner:nth-child(2) > p{width:calc(100% / 5); text-align:center; padding:0 3px;}
#music_box > .inner > .cat > .inner:nth-child(2) > p img{width:100%; max-width:85px;}
#music_box > .inner > .cat > .inner:nth-child(2) > p a{transition:opacity 0.3s ease;}
#music_box > .inner > .cat > .inner:nth-child(2) > p a:hover{opacity:0.5;}

#music_box  #info{color:#ff5a01; font-size:14px;}
#music_box  #info span{display:block;}
#music_box  #info span:nth-child(1){color:#707070; font-size:12px;}
#music_box  #info span:last-child{color:#000 !important; font-size:13px;}

@media screen and (max-width:980px){
#music_box > .inner > .cat{align-items:flex-start;}
#music_box > .inner > .cat > .inner:first-child{width:40%; flex-wrap:wrap;}
#music_box > .inner > .cat > .inner:first-child > p{width:100% !important;}
#music_box > .inner > .cat > .inner:first-child > p:nth-child(2){padding:10px 0 0;}
#music_box > .inner > .cat > .inner:nth-child(2){width:60%;}}

@media screen and (max-width:800px){
#music_box > .inner > .cat{flex-wrap:wrap;}
#music_box > .inner > .cat > .inner:first-child{width:100%; text-align:center;}
#music_box > .inner > .cat > .inner:first-child > p:nth-child(2){padding:10px 0;}
#music_box > .inner > .cat > .inner:nth-child(2){width:100%; max-width:450px; margin:0 auto; justify-content:center;}}

/*
================================================================================================================
スコアランキング-難易度別詳細
================================================================================================================
*/
#artist_area{
display:flex;
width:96%;
font-size:18px;
margin:10px auto;}
#artist_area .cat:first-child{width:187px;}
#artist_area .cat:nth-child(2){width:calc(100% - 187px); padding:10px;}

#musicname{font-weight:bold; color:#ff5a01;}

.diff-tab{display:flex; flex-wrap:wrap; margin:10px auto 0;}
.diff-tab > *{
display:block;
width:calc(20% - 10px) !important;
margin:5px !important;
filter:grayscale(20%) brightness(40%);
opacity:.9;
transition:all .2s ease;}
.diff-tab > *:hover{filter:unset; opacity:1;}
.diff-tab > *.active{filter:unset; opacity:1; pointer-events:none;}
@media screen and (max-width:1100px){.diff-tab > *{width:calc(25% - 10px) !important;}}
@media screen and (max-width:900px){.diff-tab > *{width:calc((100% / 3) - 5px) !important; margin:2.5px !important;}}
@media screen and (max-width:420px){.diff-tab > *{width:calc(50% - 5px) !important;}}

.diff_plate{
position:relative;
width:130px;
height:30px;
color:#fff;
text-align:right;
font-weight:bold;
line-height:30px;
border-radius:6px;
padding:0 10px;
margin-top:10px;}
.diff_plate::before{position:absolute; top:0; left:10px;}

@media screen and (max-width:760px){
#artist_area{flex-wrap:wrap;}
#artist_area .cat:first-child,
#artist_area .cat:nth-child(2){width:100%; font-size:14px; text-align:center; padding:0;}
.diff_plate{margin:10px auto 0;}}

/*
=========================
ボタン
=========================
*/
#rank #ranking_cont .btn-link{
max-width:150px !important;
border-radius:0px 10px 0px 10px !important;
padding:7px !important;}
#rank .rank-tab{display:flex; width:96%; justify-content:flex-start; margin:0 auto;}
#rank .rank-tab > *{margin:0 !important;}
#rank .rank-tab > * + *{margin-left:10px !important;}
#rank .rank-tab > div{
color:#1c2d2a;
font-weight:700;
background-image:url(../images/common/bg/btn_on.png);
text-shadow:none;
pointer-events:none;}
@media screen and (max-width:760px){
#rank .rank-tab{justify-content:center;}
#rank #ranking_cont .btn-link{width:calc(50% - 5px); max-width:unset!important;}}

/*
================================================================================================================
イベントランキング
================================================================================================================
*/
#update_str{
font-size:82.25%;
text-align:right;
margin:20px auto 0;
clear:both;}

/*
=========================
ランキング見出し
=========================
*/
#table_col{
display:flex;
color:#fff;
background-color:#000;
font-weight:bold;
text-align:center;
margin:10px auto;}
#table_col > div{padding:5px 0;}
#table_col > div + div{border-left:solid 1px #fff;}

#table_col.cell4 > div:first-child{width:170px;}
#table_col.cell4 > div:not(:first-child){width:calc((100% - 173px) / 3);}

#table_col.cell3 > div:first-child{width:100px;}
#table_col.cell3 > div:not(:first-child){width:calc((100% - 103px) / 2);}

@media screen and (max-width:799px){
#table_col{display:none;}}

/*
=========================
ランキング表
=========================
*/
#rank_waku{
color:#000;
background-color:#e5e5e5;
border:2px solid #19292b;
padding:10px 0;
margin:10px auto;}
#rank_waku ul li{
display:flex;
font-size:14px;
font-weight:bold;
text-align:center;
align-items:center;
padding:10px 0;}
#rank_waku ul li + li{border-top:1px solid #19292b;}

#rank_waku ul li .cat{padding:0 10px;}
#rank_waku ul li .cat strong{display:none;}
#rank_waku ul li a{color:#ff5a01 !important; font-weight:bold;}
#rank_waku ul li a:hover{text-decoration:underline;}

#rank_waku ul.cell4 li .cat:first-child{font-size:12px; font-weight:normal;}
#rank_waku ul.cell4 li .cat:first-child,
#rank_waku ul.cell4 li .cat:nth-child(2){text-align:left;}
#rank_waku ul.cell4 li > .cat:first-child{width:170px; text-align:left;}
#rank_waku ul.cell4 li > .cat:not(:first-child){width:calc((100% - 173px) / 3);}

#rank_waku ul.cell3 li > .cat:first-child{width:100px;}
#rank_waku ul.cell3 li > .cat:not(:first-child){width:calc((100% - 103px) / 2);}

@media screen and (max-width:799px){
#rank_waku ul.cell4 li{flex-wrap:wrap; text-align:left;}
#rank_waku ul.cell4 li .cat{display:flex; width:100% !important; align-items:center; margin:5px auto;}
#rank_waku ul.cell4 li .cat strong{display:block; width:100px; font-size:13px;}
#rank_waku ul.cell4 li .cat > div{width:calc(100% - 100px) !important;}}

@media screen and (max-width:480px){
#rank_waku ul li .cat{font-size:12px !important;}}

#rank_waku #rank_tbl {
  .rank_1st, .rank_2nd, .rank_3rd {
    content: "";
    display: inline-block;
    background-repeat: no-repeat;
    background-position-y: center;
    background-size: contain;
    height: 30px;

    &.rank_1st {background-image: url("../images/rank/rank01.png");}
    &.rank_2nd {background-image: url("../images/rank/rank02.png");}
    &.rank_3rd {background-image: url("../images/rank/rank03.png");}
  }
}

/*
=========================
イベントステータス
=========================
*/
#rank_waku ul .date .open{
width:61px;
height:27px;
background-image:url("/game/sdvx/v/p/images/p/ranking/er_kaisai_logo.png");
background-repeat:no-repeat;
background-size:100% auto;}
#rank_waku ul .date .close,
#rank_waku ul .date .wait{
width:80px;
height:27px;
background-repeat:no-repeat;
background-size:100% auto;}
#rank_waku ul .date .close{background-image:url("/game/sdvx/v/p/images/p/ranking/er_kaisai_logo_02.png");}
#rank_waku ul .date .wait{background-image:url("/game/sdvx/v/p/images/p/ranking/er_kaisai_logo_03.png");}

/*報酬受け取りボタン*/
.reward_get a,
.received{
display:block;
width:180px;
height:32.5px;
margin:5px auto 0;}
.reward_get a{background:url(/game/sdvx/v/p/images/p/ranking/er_botton_hoshu_02.png) no-repeat; background-size:100% auto;}
.reward_get a:hover{background-position:0 100%;}
.received{background:url(/game/sdvx/v/p/images/p/ranking/er_botton_hoshu_03.png) no-repeat; background-size:100% auto;}

@media screen and (max-width:799px){
.reward_get a,
.received{margin:5px auto 0 0;}}

/*
================================================================================================================
イベントランキング-詳細
================================================================================================================
*/
#event-detail,
#reward_waku{
color:#000;
background-color:#e5e5e5;
border:2px solid #19292b;
padding:10px;
margin:0 auto 30px;}

#event-detail strong,
#event-detail > ul.title li span,
#eventrank_mydata strong,
#reward_waku strong{
display:block;
color:#fff;
background:#19292b;
background:-moz-linear-gradient(left, #19292b 0%, #2f5f61 100%);
background:-webkit-linear-gradient(left, #19292b 0%,#2f5f61 100%);
background:linear-gradient(to right, #19292b 0%,#2f5f61 100%);
font-size:16px;
font-weight:bold;
text-align:center;
padding:5px;}

#event-detail > ul.title > li:first-child{display:flex; align-items:center; justify-content:center; padding:5px 0;}
#event-detail > ul.title > li:first-child span{width:100px;}
#event-detail > ul.title > li:first-child p{padding-left:10px;}
#event-detail > ul.title > li:last-child{font-size:20px; text-align:center; font-weight:bold; padding:15px 0 5px;}
#event-detail > ul.title li + li{border-top:1px dotted #333;}

#event-detail > ul.about{margin:10px auto;}
#event-detail > ul.about strong{margin:0 auto 10px;}
#event-detail > ul.about > li:first-child{margin-bottom:10px; text-align:center;}
#event-detail > ul.about ul.reward li{display:flex; padding:5px 0;}
#event-detail > ul.about ul.reward li + li{border-top:1px dotted #333;}
#event-detail > ul.about ul.reward li p:first-child{width:120px; color:#ff5a01; font-weight:bold; text-align:center;}
#event-detail > ul.about ul.reward li p:nth-child(2){width:calc(100% - 120px);}

#event-detail > ul.card{display:flex; flex-wrap:wrap;}
#event-detail > ul.card li{width:calc(100% / 8); padding:5px; text-align:center;}
#event-detail > ul.card li img{width:100%; max-width:100px;}

@media screen and (max-width:799px){
#event-detail{font-size:14px;}
#event-detail > ul.about > li:first-child{text-align:left;}
#event-detail > ul.about ul.reward li{flex-wrap:wrap;}
#event-detail > ul.about ul.reward li p:first-child{color:#fff; background-color:#ff5a01; padding:3px; margin-bottom:5px;}
#event-detail > ul.about ul.reward li p:nth-child(2){width:100%;}
#event-detail > ul.card li{width:calc(100% / 5);}}

@media screen and (max-width:480px){
#event-detail strong,
#event-detail > ul.title li span,
#eventrank_mydata strong{font-size:14px;}

#event-detail{font-size:12px;}
#event-detail > ul.about ul.reward li p:first-child{width:100%; border-radius:5px;}
#event-detail > ul.title > li:last-child{font-size:15px; text-align:left;}
#event-detail > ul.card li{width:calc(100% / 3);}}

@media screen and (max-width:370px){
#event-detail > ul.card li{width:calc(100% / 2);}}

/*
=========================
自分の成績-フレーム
=========================
*/
#eventrank_mydata{
position:relative;
width:calc(100% - 6px);
color:#000;
background-color:#e5e5e5;
background-image:url(../images/common/frame/bar.png) , url(../images/common/frame/bar.png) ,
                 url(../images/common/frame/top_blue.png) , url(../images/common/frame/btm_blue.png);
background-repeat:repeat-y , repeat-y , repeat-x , repeat-x;
background-position:top left -3px , top right -3px , top , bottom;
border-radius:14px;
padding:20px;
margin:0 auto 30px;}

#eventrank_mydata::before,
#eventrank_mydata::after{
display:block;
position:absolute;
left:-3px;
width:calc(100% + 6px);
height:62px;
content:"";
z-index:2;}
#eventrank_mydata::before{
top:0;
background-image:url(../images/common/frame/top_left.png) , url(../images/common/frame/top_right.png);
background-repeat:no-repeat , no-repeat;
background-position:top left , top right;
border-radius:14px 14px 0 0;}
#eventrank_mydata::after{
bottom:0;
background-image:url(../images/common/frame/btm_left.png) , url(../images/common/frame/btm_right.png);
background-repeat:no-repeat , no-repeat;
background-position:bottom left , bottom right;
border-radius:0 0 14px 14px;}

/*
=========================
自分の成績
=========================
*/
#eventrank_mydata p{font-size:18px; font-weight:bold; text-align:center; padding:10px;}

/*
================================================================================================================
イベントランキング-受取り
================================================================================================================
*/
#reward_waku .inner{display:flex; font-weight:bold; justify-content:center; flex-wrap:wrap; margin:10px auto;}
#reward_waku .inner > p{width:calc(100% / 3); text-align:center; margin-bottom:5px;}

#reward_waku ul li > p{text-align:center; margin:10px auto;}

ul#app_cardlist{display:flex; flex-wrap:wrap;}
ul#app_cardlist li{
width:calc((100% / 7) - 10px);
background-color:#fbb649;
font-size:12px;
font-weight:bold;
text-align:center;
border-radius:5px;
margin:5px;}
ul#app_cardlist li img{width:100%; max-width:100px; padding:5px;}
ul#app_cardlist li input:hover{cursor:pointer;}

ul#app_cardlist.card-check{justify-content:center;}

#conferm.text br{display:none;}

@media screen and (max-width:799px){
ul#app_cardlist li{width:calc((100% / 5) - 10px);}}

@media screen and (max-width:480px){
#reward_waku ul li > p{font-size:12px; text-align:left;}
#reward_waku .inner > p{width:calc(100% / 2); font-size:13px;}
ul#app_cardlist li{width:calc((100% / 3) - 10px);}

#conferm.text{font-size:12px;}
#conferm.text br{display:block;}}

@media screen and (max-width:370px){
#reward_waku .inner > p{width:100%;}
ul#app_cardlist li{width:calc((100% / 2) - 10px);}}

/*
=========================
ボタン
=========================
*/
#reward_btn,
#decide_btn,
#cancel_btn{
position:relative;
width:309px;
margin:10px auto;
z-index:4;}
#reward_btn a,
#decide_btn a,
#cancel_btn a{ 
background-repeat:no-repeat;
display:block; 
width:100%;
height:0;
padding-top:20%;
overflow:hidden;
background-size:100% 200%;}
#reward_btn a:hover,
#decide_btn a:hover,
#cancel_btn a:hover{background-position:0 100%;}

#reward_btn a{background-image:url("../images/btn/reward_btn.png");}
#decide_btn a{background-image:url("../images/btn/decide_btn.png");}
#cancel_btn a{background-image:url("../images/btn/cancel_btn.png");}

@media screen and (max-width:480px){
#reward_btn,
#decide_btn,
#cancel_btn{width:200px;}}

/*
================================================================================================================
ウィークリーランキング
================================================================================================================
*/
.weekly .box{
display:flex;
width:100%;
max-width:700px;
color:#000;
background-color:#e6e6e6;
text-align:center;
font-size:14px;
font-weight:bold;
line-height:30px;
/*border:solid 1px #000;*/
flex-wrap:wrap;
margin:20px auto;}
.weekly .box > div{padding:10px;}
.weekly .box > .left{
width:200px;
color:#FFF;
font-size:14px;
font-weight:bold;
background-color:#000}
.weekly .box > .right{width:calc(50% - 200px);}
.weekly .box > .right input{padding:3px 10px; border:1px solid #000 !important;}

@media screen and (max-width:799px){
.weekly .box {width:95%;}
.weekly .box > .right{width:calc(100% - 200px);}}