/*
================================================================================================================
楽曲データ
================================================================================================================
*/
#explain_box{
display:flex;
width:96%;
background-color:#000;
background-image:url(/game/sdvx/vii/images/common/bg/grd_btm.png) , url(/game/sdvx/vii/images/common/bg/grd_top.png);
background-position:bottom , top;
background-repeat:repeat-x , repeat-x;
background-size:auto 50px , auto 50px;
border-top:2px solid #8ad004;
border-bottom:2px solid #8ad004;
text-align:center;
padding:20px 10px;
margin:20px auto;
justify-content:center;
align-items:center;
flex-wrap:wrap;}
@media screen and (max-width:800px){#explain_box{background-size:auto 70px , auto 70px;}}

#explain_box strong{display:block; color:#fff; font-weight:bold;}
#explain_box > strong{width:100% !important; margin-bottom:10px;}
#explain_box > strong br{display:none;}

#explain_box #music_search{display:flex; justify-content:center; align-items:center;}
#explain_box #music_search form{display:flex; justify-content:center; align-items:center;}
#explain_box #music_search form input{margin:0 10px;}

#explain_box {
  .free_search{
    display:flex;
    width:100%;
    max-width:600px;
    margin-top:16px;
    align-items:center;
    form{
      display:flex;
      input{
        margin:0 10px;
        max-width: 250px;
      }
    }
  }
}

#form1 .btn{width:90px !important;}
@media screen and (max-width:800px){#explain_box strong{font-size:84.25%}}
@media screen and (max-width:640px){
#form1 .btn{width:105px !important;}
#explain_box #sort{width:100%; margin:10px auto 0;}}
@media screen and (max-width:380px){
#explain_box > strong br{display:block;}
#explain_box #music_search{flex-wrap:wrap;}
#explain_box #music_search strong{width:100%; margin:0 auto 10px;}
#explain_box #music_search #form1{width:200px; margin:0 auto;}}

/*
=========================
ページャー
=========================
*/
.page{
display:flex;
width:100%;
max-width:800px;
color:#436015;
font-weight:bold;
font-size:18px;
line-height:30px;
justify-content:center;
align-items:center;
margin:20px auto;}

.page > p.num{display:flex; justify-content:center; flex-wrap:wrap; margin:0 10px;}
.page a{color:#436015;}
.page a:hover{color:#fbb650;}

/*
=========================
楽曲データ テーブル 共通
=========================
*/
th,td{border:1px solid #000000;}
td{padding:0 5px;}
tr{background-color:#fff !important;}

th.music{background-color:#000;}
th.nov{color:#fff; background-color:#5d49ff; &::before{content:"NOV";}}
th.adv{color:#fff; background-color:#ebb700; &::before{content:"ADV";}}
th.exh{color:#fff; background-color:#f10000; &::before{content:"EXH";}}
th.mxm{color:#fff; background-color:#96999e; &::before{content:"MXM";}}
th.inf{
  background-color:#000;
  .inf{color:#ff00ff; &::before{content:"INF";}}
  .grv{color:#fa9106; &::before{content:"GRV";}}
  .hvn{color:#00b0f0; &::before{content:"HVN";}}
  .vvd{color:#f82374; &::before{content:"VVD";}}
  .xcd{color:#149eff; &::before{content:"XCD";}}

  & > span{display:block;}
}
th.ult{color:#ffdd57; background-color:#998534; &::before{content:"ULT";}}

.title a{color:#ff5a01; font-weight:bold;}

/*
=========================
楽曲データ テーブル PC
=========================
*/
@media screen and (min-width:801px){
#pc-list{display:block;}
#sp-list{display:none;}

#pc-list > table{
width:100%;
max-width:800px;
font-size:12px;
margin:15px auto 0;}

#col_name th{font-weight:bold;}
#col_name th.music{color:#fff; text-align:center;}

.data_col{margin:10px auto 0;}
.music{padding:3px;}
.nov,
.adv,
.exh,
.mxm,
.inf,
.ult{width:75px; text-align:center;}

td.music{font-size:14px;}
.data_col .artist{color:#373737;}}

/*
=========================
楽曲データ テーブル SP
=========================
*/
@media screen and (max-width:800px){
#pc-list{display:none;}
#sp-list{display:block;}

#sp-list > table{
width:100%;
font-size:13px;
border:1px solid #000;
margin:15px auto;}

#sp-list > table th{
width:90px !important;
padding:5px;
text-align:center;
font-weight:bold;}
#sp-list > table th.name{background-color:#000; color:#fff;}
#sp-list > table td{padding:5px;}
#sp-list > table td img{width:30px;}
.title a{font-size:14px;}}

#sp-list tr:not(:has(img)):not(:has(th.name)){display: none;}

/*
================================================================================================================
楽曲詳細 ポップアップ
================================================================================================================
*/
#data_detail #waku{max-width:910px; font-size:13px;}

#data_detail #music_info{width:96%; margin:10px auto;}
#data_detail #music_info > p{
color:#fff;
background:linear-gradient(to bottom, #262626 0%,#000 100%);
font-weight:bold;
text-align:center;
line-height:18px;
padding:5px;}
#data_detail #music_info > p + p{border-top:3px solid #666;}

#data_detail #playdata_box{text-align:center; margin:0 auto;}

#data_detail .music_box{
display:flex;
position:relative;
width:96%;
background:linear-gradient(to bottom, #6f6d7f 0%,#2d2d2d 100%);
font-size:12px;
text-align:center;
line-height:18px;
padding:10px;
padding:5px;
margin:0 auto 15px;
align-items:center;}
#data_detail .music_box::before,
#data_detail .music_box::after{
display:block;
content:"";
position:absolute;
bottom:0;
left:0;
width:100%;
height:100%;
z-index:1;}
#data_detail .music_box::before{
background-image:url(/game/sdvx/vii/images/common/bg/map.png);
background-position:bottom center;
background-repeat:no-repeat;
background-size:cover;
opacity:.4;}
#data_detail .music_box::after{height:30%; background:linear-gradient(to bottom,  rgba(178,191,48,0) 0%,rgba(178,191,48,.3) 100%);}
#data_detail .music_box > *{position:relative; z-index:2;}

/*
=========================
PCサイズ 左エリア
=========================
*/
#data_detail .music_box .jacket_area{width:187px; margin:0 10px;}
#data_detail .music_box .jacket_area img{width:100%;}

#data_detail .music_box .jacket_area .diff{
position:relative;
width:100%;
color:#fff;
font-weight:bold;
padding:2px 10px;
margin:5px 0;}
#data_detail .music_box .jacket_area .diff:before{
position:absolute;
display:block;
top:2px;
left:10px;}

#data_detail .music_box .jacket_area .diff#diff_nov{background-color:#5d49ff; &::before{content:"NOV：";}}
#data_detail .music_box .jacket_area .diff#diff_adv{background-color:#ebb700; &::before{content:"ADV：";}}
#data_detail .music_box .jacket_area .diff#diff_exh{background-color:#fa2607; &::before{content:"EXH：";}}
#data_detail .music_box .jacket_area .diff#diff_mxm{background-color:#96999e; &::before{content:"MXM：";}}
#data_detail .music_box .jacket_area .diff#diff_inf{background-color:#ff3bac; &::before{content:"INF：";}}
#data_detail .music_box .jacket_area .diff#diff_gra{background-color:#e5720a; &::before{content:"GRV：";}}
#data_detail .music_box .jacket_area .diff#diff_hvn{background-color:#009aff; &::before{content:"HVN：";}}
#data_detail .music_box .jacket_area .diff#diff_vvd{background-color:#f82374; &::before{content:"VVD：";}}
#data_detail .music_box .jacket_area .diff#diff_xcd{background-color:#149eff; &::before{content:"XCD：";}}
#data_detail .music_box .jacket_area .diff#diff_ult{background-color:#998534; &::before{content:"ULT："; color:#ffdd57;}}

#data_detail .music_box .jacket_area .diff .level{padding-left:55px;}

/*
=========================
PCサイズ 右エリア
=========================
*/
#data_detail .music_box ul{
width:calc(100% - 207px);
float:left;}

#data_detail .music_box ul .effect,
#data_detail .music_box ul .illust{
width:100%;
margin-bottom:5px;
padding-left:10px;
text-align:left;
font-weight:bold;}

#data_detail .music_box li{
float:left;
/*display:flex;*/
width:calc(50% - 10px);
border-bottom:#fff solid 1px;
padding-top:5px;
margin:0 5px;}
#data_detail .music_box li .col{width:50%; float:left; text-align:left;}
#data_detail .music_box li .cnt{width:50%; float:right; text-align:right;}

@media screen and (max-width:800px){
#data_detail #music_info #music_title,
#data_detail #music_info #music_artist{font-size:82.25%; line-height:16px;}

#data_detail .music_box{display:none;}
#data_detail .music_box.active{display:block;}
#data_detail .music_box .jacket_area{float:none; margin:0 auto 15px;}
#data_detail .music_box ul{float:none; width:96%; margin:0 auto;}
#data_detail .music_box li{float:none; width:100%; margin:0;}}

/*
=========================
楽曲詳細 SP版用タブ切替え
=========================
*/
ul#playdata_menu{display:none;}

@media screen and (max-width:800px){
ul#playdata_menu{
display:block;
width:96%;
margin:0 auto 10px;
background-color:#FFF;
text-align:center;
letter-spacing:-.4em;}

ul#playdata_menu li{
width:25%;
height:36px;
font-weight:bold;
font-size:105.25%;
display:inline-block;
letter-spacing:normal;}
ul#playdata_menu li::before{ 
content:"\025b6";/*特殊文字は16進数で記載*/
float:left;
padding-left:10px;
line-height:36px;
color:#FFF;}
ul#playdata_menu li a{
display:block;
width:100%;
height:100%;
text-align:center;
line-height:36px;margin-left:-20px;
text-decoration:none;}

ul#playdata_menu li#nav_nov{background-color:rgba(182,102,250,0.5);}
ul#playdata_menu li#nav_nov a{color:#FFF; &::before{content:"NOV"}}
ul#playdata_menu li#nav_nov:hover,
ul#playdata_menu li#nav_nov.active{background-color:rgba(182,102,250,1.0);}

ul#playdata_menu li#nav_adv{background-color:rgba(0,0,0,0.5);}
ul#playdata_menu li#nav_adv a{color:#fffd25; &::before{content:"ADV"}}
ul#playdata_menu li#nav_adv:hover,
ul#playdata_menu li#nav_adv.active{background-color:rgba(0,0,0,1.0);}

ul#playdata_menu li#nav_exh{background-color:rgba(241,0,0,0.5);}
ul#playdata_menu li#nav_exh a{color:#FFF; &::before{content:"EXH"}}
ul#playdata_menu li#nav_exh:hover,
ul#playdata_menu li#nav_exh.active{background-color:rgba(241,0,0,1.0);}

ul#playdata_menu li#nav_mxm{background-color:rgba(150,153,158,0.5);}
ul#playdata_menu li#nav_mxm a{color:#FFF; &::before{content:"MXM"}}
ul#playdata_menu li#nav_mxm:hover,
ul#playdata_menu li#nav_mxm.active{background-color:rgba(150,153,158,1.0);}

ul#playdata_menu li#nav_inf{background-color:#ff3bad7f;}
ul#playdata_menu li#nav_inf a{color:#FFF; &::before{content:"INF"}}
ul#playdata_menu li#nav_inf:hover,
ul#playdata_menu li#nav_inf.active{background-color:#ff3bad;}

ul#playdata_menu li#nav_gra{background-color:#e5720a7f;}
ul#playdata_menu li#nav_gra a{color:#FFF; &::before{content:"GRV"}}
ul#playdata_menu li#nav_gra:hover,
ul#playdata_menu li#nav_gra.active{background-color:#e5720a;}

ul#playdata_menu li#nav_hvn{background-color:#009aff7f;}
ul#playdata_menu li#nav_hvn a{color:#FFF; &::before{content:"HVN"}}
ul#playdata_menu li#nav_hvn:hover,
ul#playdata_menu li#nav_hvn.active{background-color:#009aff;}

ul#playdata_menu li#nav_vvd{background-color:#f823747f;}
ul#playdata_menu li#nav_vvd a{color:#FFF; &::before{content:"VVD"}}
ul#playdata_menu li#nav_vvd:hover,
ul#playdata_menu li#nav_vvd.active{background-color:#f82374;}

ul#playdata_menu li#nav_xcd{background-color:#149eff7f;}
ul#playdata_menu li#nav_xcd a{color:#FFF; &::before{content:"XCD"}}
ul#playdata_menu li#nav_xcd:hover,
ul#playdata_menu li#nav_xcd.active{background-color:#149eff;}

ul#playdata_menu li#nav_ult{background-color:#9985347f;}
ul#playdata_menu li#nav_ult a{color:#ffdd57; &::before{content:"ULT"}}
ul#playdata_menu li#nav_ult:hover,
ul#playdata_menu li#nav_ult.active{background-color:#998534;}

@media screen and (max-width:480px){
ul#playdata_menu li{width:50%;}}