/*
.section#music + .section{
background-image:url(/game/bemani/cheersxcheers/1/img/common/frame/02.png) , url(/game/bemani/cheersxcheers/1/img/common/frame/03.png) , url(/game/bemani/cheersxcheers/1/img/common/frame/04.png) , url(/game/bemani/cheersxcheers/1/img/bg/xr.png) !important;
background-position:top right , bottom right , bottom left , bottom center !important;
background-repeat:no-repeat , no-repeat , no-repeat , no-repeat !important;
background-size:auto , auto , auto , 100% auto !important;}
*/
/*
#bnr-xr{width:calc(90% - 40px); max-width:480px; margin:0 auto;}
#bnr-xr a{display:block; background-color:#fff;}
#bnr-xr a img{width:100%; tarnsiton:opacity .2s ease;}
#bnr-xr a:hover img{opacity:.7;}

@media screen and (max-width:640px){#bnr-xr{width:calc(90% - 20px);}}
*/
/*
================================================================================================================
第一弾用
================================================================================================================
*/
#vol1,
#vol1-lock{
background-color:rgba(255,255,255,.4);
background-image:url(/game/bemani/cheersxcheers/1/img/common/frame/01.png) , url(/game/bemani/cheersxcheers/1/img/common/frame/02.png) , url(/game/bemani/cheersxcheers/1/img/common/frame/03.png) , url(/game/bemani/cheersxcheers/1/img/common/frame/04.png);
background-position:top left , top right , bottom right , bottom left;
background-repeat:no-repeat , no-repeat , no-repeat , no-repeat;}

.lock00 img{filter:grayscale(100%);}

/*
================================================================================================================
第一弾楽曲
================================================================================================================
*/
#vol1{
width:calc(100% - 20px) !important;
padding:20px !important;
margin:40px auto !important;}
#vol1 *::before,
#vol1 *::after{display:none !important}
#vol1 p:nth-child(2){margin:10px auto 10px !important}

@media screen and (max-width:400px){#vol1{width:calc(100% - 10px) !important; padding:10px !important;}}
@media screen and (max-width:340px){#vol1{width:calc(100% - 5px) !important; padding:5px !important;}}

/*
================================================================================================================
解禁状況
================================================================================================================
*/
#vol1-lock{display:flex; width:100%; max-width:800px; padding:20px; margin:40px auto 0; flex-wrap:wrap;}
#vol1-lock .lock{padding:10px;}
#vol1-lock #vol1-music02{display:flex; width:60%; align-items:center;}
#vol1-lock #vol1-music02 > .lock{width:50%;}
#vol1-lock #vol1-music01{width:40%;}

#vol1-lock > b,#vol1-lock > span{display:block; width:100%;}
#vol1-lock > b{text-shadow: 0 0 30px rgb(132 0 255), 0 0 10px rgb(132 0 255), 0 0 5px rgb(132 0 255); margin:0 auto 20px;}
#vol1-lock > span{font-size:12px; margin:20px auto 0;}

/*解禁文字装飾*/
p.unlock br{display:none;}
p.unlock strong,p.unlock span{display:inline-block;}
p.unlock,p.unlock strong{font-size:13px;}
p.unlock span{font-size:20px;}
p.unlock.cp strong,p.unlock.pv strong:first-child{color:#b9e6f9; text-shadow:0 0 30px rgb(0 126 255), 0 0 10px rgb(0 126 255), 0 0 5px rgb(0 126 255);}
p.unlock.cv strong,p.unlock.pv strong:nth-child(2){color:#f8e5ff; text-shadow:0 0 30px rgb(132 0 255), 0 0 10px rgb(132 0 255), 0 0 5px rgb(132 0 255);}

@media screen and (max-width:800px){
#vol1-lock #vol1-music01,
#vol1-lock #vol1-music02{width:100%;}
#vol1-lock #vol1-music02{justify-content:center;}
#vol1-lock #vol1-music02 .lock{width:45%;}
#vol1-lock #vol1-music01 .lock{width:70%; max-width:400px; margin:0 auto;}}

@media screen and (max-width:640px){#vol1-lock{padding:10px;} #vol1-lock > span{text-align:left;}}
@media screen and (max-width:480px){#vol1-lock #vol1-music02 .lock{width:50%;}}
@media screen and (max-width:430px){p.unlock br{display:block;}}

/*max時の色変*/
#point-graph .bar p.lock01{background-color:#ff6a7a !important; box-shadow:0 0 10px #ff6a7a;}

/*
=================
ロックアイコン
=================
*/
#vol1-lock .lock p:nth-child(3){position:relative; width:calc(100% - 16px); height:30px; margin:0 auto;}
#vol1-lock .lock p:nth-child(3)::before,
#vol1-lock .lock p:nth-child(3)::after{
content:'';
position:absolute;
top:0;
width:0;
height:0;
border:15px solid transparent;
border-right:8px solid transparent;
border-left:8px solid transparent;}
#vol1-lock .lock p:nth-child(3)::before{right:-16px;}
#vol1-lock .lock p:nth-child(3)::after{left:-16px;}

#vol1-lock .lock p.lock00 span,
#vol1-lock .lock p.lock01 span{
display:block;
position:relative;
color:#fff;
font-size:11px;
font-weight:bold;
padding:5px 0 5px 20px;
margin:10px auto 0;}
#vol1-lock .lock p.lock00 span::before{content:"ロック中";}
#vol1-lock .lock p.lock01 span::before{content:"アンロック可能";}

/*ロック*/
#vol1-lock .lock p.lock00 span{
background-color:#333;
background-image:url(/game/bemani/cheersxcheers/1/img/common/lock/00.png);
background-position:left center;
background-repeat:no-repeat;
background-size:25px auto;}
#vol1-lock .lock p.lock00:nth-child(3)::before{border-left-color:#333;}
#vol1-lock .lock p.lock00:nth-child(3)::after{border-right-color:#333;}

/*アンロック可能*/
#vol1-lock .lock p.lock01 span{
background-image:url(/game/bemani/cheersxcheers/1/img/common/lock/01.png);
background-position:left center;
background-repeat:no-repeat;
background-size:25px auto;}

#vol1-lock  #vol1-music01 .lock .lock01 span{background-color:#ff8a00;}
#vol1-lock  #vol1-music01 .lock .lock01:nth-child(3)::before{border-left-color:#ff8a00;}
#vol1-lock  #vol1-music01 .lock .lock01:nth-child(3)::after{border-right-color:#ff8a00;}

#vol1-lock  #vol1-music02 .lock:first-child .lock01 span{background-color:#00baff;}
#vol1-lock  #vol1-music02 .lock:first-child .lock01::before{border-left-color:#00baff;}
#vol1-lock  #vol1-music02 .lock:first-child .lock01::after{border-right-color:#00baff;}

#vol1-lock  #vol1-music02 .lock:nth-child(2) .lock01 span{background-color:#d35efe;}
#vol1-lock  #vol1-music02 .lock:nth-child(2) .lock01::before{border-left-color:#d35efe;}
#vol1-lock  #vol1-music02 .lock:nth-child(2) .lock01::after{border-right-color:#d35efe;}