/*
================================================================================================================
共通メニュー
================================================================================================================
*/
#course_select_box{position:relative; width:100%; margin:0 auto 30px;}
#course_select_box form{
display:flex;
width:96%;
max-width:480px;
margin:0 auto;
align-items:center;
justify-content:center;}

#course_select_box form .btn{width:100px; margin:0 0 0 10px;}

#course_select_box select{
width:calc(100% - 110px);
color:#1e3207;
background:#daf3c1;
font-size:22px;
font-weight:bold;
border:2px solid #1e3207;
border-radius:30px;
padding:5px 10px;
cursor:pointer;}

@media screen and (max-width:640px){
#course_select_box{margin:20px 0 0;}
#course_select_box form{flex-wrap:wrap;}
#course_select_box select{width:100%; font-size:16px; margin:0 auto 10px;}}

/*
================================================================================================================
スキルアナライザーとは？
================================================================================================================
*/
#playdata .cat{width:100%;}
#playdata .cat img{width:100%;}

/*
================================================================================================================
見出し
================================================================================================================
*/
#skill_title{
position:relative;
width:100%;
color:#000;
font-size:24px;
text-align:center;
font-weight:bold;
margin:20px auto 10px;}
@media screen and (max-width:480px){#skill_title{font-size:20px;}}

/*
================================================================================================================
スキルアナライザー詳細
================================================================================================================
*/

/*
=========================
フレーム
=========================
*/
.skill_box{
position:relative;
width:100%;
color:#000;
background:#c7c7c7;
border:2px solid;
border-radius:10px;
padding:0 0 20px 0;
margin:10px auto 30px;}

/*
=========================
詳細
=========================
*/
.course_title{position:relative; margin:0 auto 20px;}

/*コース名*/
.course_name{width:100%; color:#000; font-size:22px; text-align:center; font-weight:bold; padding:20px 0;}
.course_name a{
display:inline-block;
position:relative;
color:#000;
background:#fff;
border-radius:5px;
padding:5px 40px 8px 20px;
transition:all .2s ease;}
.course_name a::after{
display:block;
position:absolute;
top:calc(50% - 8px);
right:10px;
content:"";
width:0;
height:0;
border-style:solid;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-left:16px solid #000;
border-right:0;
transition:all .2s ease;}
.course_name a:hover{color:#fff; background:#000;}
.course_name a:hover::after{border-left:16px solid #fff;}
@media screen and (max-width:640px){
.course_name a::after{top:calc(50% - 6px); border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:14px solid #000;}
.course_name a:hover::after{border-left:14px solid #fff;}}

/*スキル・達成率入れ子*/
.state_area{
display:flex;
width:100%;
background:linear-gradient(to right, #09210e 0%,#003f0a 50%,#000000 100%);
justify-content:center;
align-items:center;
border-top:2px solid #000;
border-bottom:2px solid #000;
padding:10px 0;}

/*スキル*/
.course_panel_bg{
position:relative;
width:150px;
height:42px;
/*width:160px;
height:53px;*/}
#course_panel{
position:absolute;
top:0;
left:0;
width:150px;
height:42px;
border-radius:8px;}
#course_skillname{
width:105px;
color:#bfbfbf;
font-size:24px;
font-weight:bold;
font-family:"ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
text-align:center;
margin-top:12px;
margin-left:35px;}

/*クリア*/
#course_clear{
width:52px;
height:40px;
text-align:center;
font-size:20pt;
font-weight:bold;
line-height:40px;
margin:0 10px;}

/*達成率*/
.course_rate_box{
display:flex;
height:40px;
width:230px;
color:#fff;
background:#09210e;
font-size:125.25%;
font-weight:bold;
border:1px solid #666;
padding:5px 10px;
justify-content:center;
align-items:center;}

/*
=========================
曲
=========================
*/
.music_box{
position:relative;
display:flex;
width:calc(100% - 20px);
color:#fff;
background:#09210e;
font-size:16px;
text-align:center;
border-radius:10px;
padding:10px;
margin:0 auto;
align-items:center;}
.music_box + .music_box{margin-top:5px;}

.music{
width:calc(100% - 130px);
font-weight:bold;
text-align:left;
padding-right:10px}

/*難易度*/
.diff{
position:relative;
display:flex;
width:130px;
height:30px;
color:#fff;
text-align:center;
font-weight:bold;
justify-content:center;
align-items:center;}

@media screen and (max-width:799px){.course_name{font-size:92.25%;}}
@media screen and (max-width:640px){
.state_area{flex-wrap:wrap;}
.course_rate_box{
height:40px;
width:90%;
font-size:102.25%;
margin:10px auto 0;}
#course_clear{margin:0 0 0 10px;}
.music_box{flex-wrap:wrap; font-size:14px;}
.music{width:100%;}
.music_box::before{top:10px;}
.diff{width:100%; max-width:100px; margin:10px 0 0 auto;}}
@media screen and (max-width:420px){.course_rate_box{max-width:220px;}}

/*
================================================================================================================
ランキング
================================================================================================================
*/
#update_str{
width:96%;
max-width:930px;
font-size:82.25%;
text-align:right;
margin:20px auto 0;}

/*
=========================
ランキング見出し
=========================
*/
#table_col{
display:flex;
width:96%;
max-width:930px;
color:#fff;
background-color:#000;
font-weight:bold;
text-align:center;
margin:10px auto;}
#table_col > div{padding:5px 0;}
#table_col .rank{width:100px;}
#table_col div:not(.rank){width:calc((100% - 100px) / 3);}
#table_col div + div{border-left:1px solid #fff;}

/*
=========================
ランキング表
=========================
*/
#rank_waku{
width:96%;
max-width:930px;
color:#000;
background:#fff;
border:1px solid #000;
margin:10px auto;}

ul#rank_tbl li{
display:flex;
font-size:92.25%;
text-align:center;
align-items:center;
margin:0 10px;
padding:10px 0;}
ul#rank_tbl li + li{border-top:1px solid #19292b;}
ul#rank_tbl .rank{width:100px;}
ul#rank_tbl .inner{display:flex; width:calc(100% - 100px); align-items:center;}
ul#rank_tbl .inner > div{width:calc(100% / 3);}
ul#rank_tbl .inner .con_name{display:none;}

.playername a{
display:block;
position:relative;
width:calc(100% - 20px);
color:#000;
background:#c7c7c7;
font-weight:bold;
border-radius:5px;
padding:5px 30px 8px 20px;
margin:0 auto;
transition:all .2s ease;}
.playername a::after{
display:block;
position:absolute;
top:calc(50% - 8px);
right:10px;
content:"";
width:0;
height:0;
border-style:solid;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-left:16px solid #000;
border-right:0;
transition:all .2s ease;}
.playername a:hover{color:#fff; background:#000;}
.playername a:hover::after{border-left:16px solid #fff;}
@media screen and (max-width:640px){
.playername a::after{top:calc(50% - 6px); border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:14px solid #000;}
.playername a:hover::after{border-left:14px solid #fff;}}

.weekly ul#rank_tbl .playername a{color:#000 !important;}
.weekly ul#rank_tbl .playername a:hover{color:#fff !important; text-decoration:none !important;}

@media screen and (max-width:799px){
#table_col{display:none;}
ul#rank_tbl li{text-align:left; padding:5px 0; margin:0 5px;}
ul#rank_tbl .rank{text-align:center;}
ul#rank_tbl .rank img{width:100%; height:auto; padding:10px;}
ul#rank_tbl .inner{flex-wrap:wrap;}
ul#rank_tbl .inner > div{width:100%;}
ul#rank_tbl .inner .con_name{display:inline-block; width:120px; color:#000; font-weight:bold; font-size:79.25%;}
ul#rank_tbl .playername{display:flex; align-items:center; justify-content:flex-start;}
ul#rank_tbl .playername a{width:calc(100% - 120px); max-width:200px; padding:2px 20px 2px 10px; margin:0;}
.weekly ul#rank_tbl .con_name{width:130px;}}

@media screen and (max-width:500px){
ul#rank_tbl .rank{width:60px;}
ul#rank_tbl .inner{width:calc(100% - 60px);}
ul#rank_tbl .inner .con_name{width:100px;}
ul#rank_tbl .playername a{width:calc(100% - 100px);}}

@media screen and (max-width:420px){
ul#rank_tbl li{display:block; text-align:center;}
ul#rank_tbl li > *{width:100% !important;}
ul#rank_tbl .rank img{max-width:80px;}
ul#rank_tbl .inner .con_name{display:block; width:100%; color:#fff; background:#09210e; margin:5px auto;}
ul#rank_tbl .playername{display:block;}
ul#rank_tbl .playername a{width:calc(100% - 20px); margin:0 auto;}
.weekly ul#rank_tbl .con_name{width:100%;}}

/*
================================================================================================================
難易度
================================================================================================================
*/
#diff_nov{background-color:#5d49ff; &::before{content:"NOV：";}}
#diff_adv{background-color:#ebb700; &::before{content:"ADV：";}}
#diff_exh{background-color:#fa2607; &::before{content:"EXH：";}}
#diff_mxm{background-color:#96999e; &::before{content:"MXM：";}}
#diff_inf{background-color:#ff00ff; &::before{content:"INF：";}}
#diff_grv{background-color:#e5720a; &::before{content:"GRV：";}}
#diff_hvn{background-color:#00b0f0; &::before{content:"HVN：";}}
#diff_vvd{background-color:#f82374; &::before{content:"VVD：";}}
#diff_xcd{background-color:#227eff; &::before{content:"XCD：";}}
#diff_nbl{background-color:#95dd03; &::before{content:"NBL：";}}
#diff_ult{background-color:#998534; &::before{content:"ULT："; color:#ffdd57;}}

.skill_01{background:url("../../images/playdata/skill/skill_01.gif") no-repeat;}
.skill_02{background:url("../../images/playdata/skill/skill_02.gif") no-repeat;}
.skill_03{background:url("../../images/playdata/skill/skill_03.gif") no-repeat;}
.skill_04{background:url("../../images/playdata/skill/skill_04.gif") no-repeat;}
.skill_05{background:url("../../images/playdata/skill/skill_05.gif") no-repeat;}
.skill_06{background:url("../../images/playdata/skill/skill_06.gif") no-repeat;}
.skill_07{background:url("../../images/playdata/skill/skill_07.gif") no-repeat;}
.skill_08{background:url("../../images/playdata/skill/skill_08.gif") no-repeat;}
.skill_09{background:url("../../images/playdata/skill/skill_09.gif") no-repeat;}
.skill_10{background:url("../../images/playdata/skill/skill_10.gif") no-repeat;}
.skill_11{background:url("../../images/playdata/skill/skill_11.gif") no-repeat;}
.skill_inf{background:url("../../images/playdata/skill/skill_inf.gif") no-repeat;}
.skill_nolv{background:url("../../images/playdata/skill/skill_nolv.gif") no-repeat;}

.play_crash{background:url("../../images/playdata/skill/mark_play.png") no-repeat;}
.play_comp{background:url("../../images/playdata/skill/mark_comp.png") no-repeat;}
.play_uc{background:url("../../images/playdata/skill/mark_uc.png") no-repeat;}
.play_puc{background:url("../../images/playdata/skill/mark_puc.png") no-repeat;}