@charset "Shift-JIS";

a.btn-link.cv{
display:flex;
justify-content:center;
background-color:#8fc5ff;
border:5px solid #6bb2ff;
box-shadow:0px 5px 0px 0px rgba(255, 255, 255, 1.0);
}
a.btn-link.cv:hover{
background-color:#6bb2ff;
border:5px solid #8fc5ff;
color:#fff;
box-shadow:none;
transform:translateY(5px);
}

a.btn-link.cv > p{display:flex; align-items:center;}

/*
================================================================================================================
メイン
================================================================================================================
*/
#main{
position:relative;
color:#0c2d57;
background-color:#fff;
background-image:url(/game/bemani/cheersxcheers/1/img/bg/main.jpg);
background-attachment:fixed;
background-position:top center;
background-repeat:no-repeat;
background-size:100% auto;
font-size:15px;
font-family:"M PLUS Rounded 1c";
transform:rotate(0.05deg);
font-weight:500;
text-align:center;
padding:22px 0 0 0;}

#main > #bg{
background-image:url(/game/bemani/cheersxcheers/1/img/bg/bg.jpg);
padding:0;}

@media screen and (max-width:800px){
#main > #bg{
background-attachment:scroll;
background-repeat:repeat;
background-position:top center;
background-size:auto;}}

@media screen and (max-width:480px){
#main{font-size:12px; background-size:150% auto;}
#main > #bg{background-size:150px auto;}}

/*
================================================================================================================
01-トップ
================================================================================================================
*/
#main > #bg > #top-title{
position:relative;
width:100%;
background-color:rgba(0,0,0,0.6);
padding:20px 0;
}
#main > #bg > #top-title > .inner{width:96%; max-width:800px; margin:0 auto;}
#main > #bg > #top-title > .inner img{width:100%;}

@media screen and (max-width:640px){#main > #bg > #top-title{/*margin:50px auto 0;*/}}
@media screen and (max-width:480px){#main > #bg > #top-title{padding:0;}}

#main > #bg > #top,
#main > #bg > #top .img{position:relative; width:100%; max-width:1200px; margin:0 auto;}
#main > #bg > #top .img > p:first-child{position:relative;}
#main > #bg > #top .img > p:not(:first-child){position:absolute; top:0; left:0;}
#main > #bg > #top img{width:100%; max-width:980px;}

#main > #bg > #top{margin-top:-40px;}

#main > #bg > #top > em{
/*position:absolute;*/
display:block;
width:100%;
max-width:940px;
font-size:18px;
font-weight:600;
line-height:140%;
text-shadow:0 0 4px rgba(255,255,255,1.0);
background-color:rgba(255,255,255,0.8);
border-radius:10px;
bottom:0;
left:0;
right:0;
margin:0 auto;
padding:20px 0;
}

@media screen and (max-width:1200px){#main > #bg > #top,#main > #bg > #top{width:96%;}}
@media screen and (max-width:900px){
#main > #bg > #top{margin-top:-65px;}
#main > #bg > #top > em{font-size:16px; padding:20px;}
}
@media screen and (max-width:770px){#main > #bg > #top > em{text-align:left;}}
@media screen and (max-width:640px){#main > #bg > #top{margin-top:-50px;}}
@media screen and (max-width:480px){
#main > #bg > #top{margin-top:-30px;}
#main > #bg > #top > em{font-size:14px; padding:10px; bottom:-82px;}
}

/*
================================================================================================================
各セクション
================================================================================================================
*/
/*横幅980px用 inner*/
#main > #bg > #inner{position:relative; width:100%; max-width:980px; margin:0 auto;}

/*section 黒枠*/
#main > #bg > #inner > .section#date,
#main > #bg > #inner > .section#shop{
background-color:#0c2d57;
outline:none;
padding:0 20px 30px 20px;
}
/*白枠*/
#main > #bg > #inner > .section{
position:relative;
width:96%;
background-color:#ffffff;
border-radius:10px;
outline:solid 4px #8fc5ff;
outline-offset:-1px;
padding:50px 30px;
margin:50px auto;}

#main > #bg > #inner > .section#music,
#main > #bg > #inner > .section#unlock,
#main > #bg > #inner > .section#point{padding:50px 30px 25px 30px;}

#main > #bg > #inner > .section > span{position:relative; display:block; font-size:12px; text-align:left;}

@media screen and (max-width:900px){#main > #bg > #inner > .section{padding:50px 10px;}}
@media screen and (max-width:800px){}}
@media screen and (max-width:640px){#main > #bg > #inner > .section#point{padding:50px 10px 25px 10px;}}
@media screen and (max-width:480px){#main > #bg > #inner > .section{padding:30px 10px 20px;}}
@media screen and (max-width:400px){#main > #bg > #inner > .section > span{font-size:11px;}}

/*flex用 inner*/
#main > #bg > #inner > .section > .inner{display:flex; position:relative; width:100%; flex-wrap:wrap; margin:0 auto;}
#main > #bg > #inner > .section > .inner .cat{width:50%;}
#main > #bg > #inner > .section > .inner img{width:100%;}

/*再生バー周り装飾追加*/
#main > #bg > #inner > .section > .inner .cat .player_box{
background-image:url("/game/bemani/cheersxcheers/1/img/top/dot_white.png");
background-position:bottom 10px center;
background-repeat:repeat-x;
background-size:12px;
background-color:#ff6a7a;
border-radius:20px;
margin:0 10px;
padding:10px;
}
#main > #bg > #inner > .section > .inner .cat .player_box.po{background-color:#ffd552;}
#main > #bg > #inner > .section > .inner .cat .player_box.sdvx{background-color:#8fc5ff;}

#main > #bg > #inner > .section > .inner .cat .player_box .title{padding-bottom:20px;}
#main > #bg > #inner > .section > .inner .cat .player_box .title p:first-child{font-size:16px; font-weight:bold;}

/*日付*/
.section#date div{font-size:20px; font-weight:bold; color:#fff; text-shadow:2px 2px 0px rgba(71, 152, 255, 0.6); line-height:30px; letter-spacing:1px;}
.section#date div > b{font-size:30px;}
.section#date div br{display:none;}

@media screen and (max-width:705px){
.section#date div br{display:block;}
}
@media screen and (max-width:600px){
.section#date{font-size:16px;}
.section#date div > b{font-size:22px;}
}
@media screen and (max-width:480px){
.section#date{font-size:14px;}
.section#date div > b{font-size:18px;}
.section#date div{padding:10px 10px 10px !important;}
}
@media screen and (max-width:430px){
.section#date{font-size:12px;}
.section#date div > b{font-size:16px;}
}
@media screen and (max-width:375px){
.section#date{font-size:12px;}
.section#date div > b{font-size:14px;}
}

/*
================================================================================================================
03-楽曲のアンロック方法
================================================================================================================
*/
.section#point > .inner{padding:30px 0;}

/*
=================
テキスト
=================
*/
.section#point .text{margin:20px 0;}
.section#point .text br{display:none;}
.section#point .text > b{
display:block;
font-size:16px;
margin-bottom:5px;}
@media screen and (max-width:780px){.section#point .text{text-align:left;}}
@media screen and (max-width:700px){.section#point .text br{display:block;}}
@media screen and (max-width:430px){
.section#point .text{text-align:left;}
.section#point .text > b{font-size:13px;}
}

/*
=================
FLEX要素
=================
*/
.section#point > .inner .cat > div{display:flex; align-items:center;}
.section#point > .inner .cat > div span{display:block;}

/*
==================================
筐体ポイント説明-筐体ロゴ
==================================
*/
.section#point > .inner.case{margin-top:40px !important;}

.section#point > .inner.case .cat > .title{padding:0 20px; filter:drop-shadow(0 0 10px #000); text-shadow:0 0 30px #000 , 0 0 10px #000 , 0 0 5px #000 , 0 0 3px #000 , 0 0 2px #000 , 0 0 2px #000 , 0 0 5px #000 , 0 0 3px #000 , 0 0 2px #000 , 0 0 2px #000;}
.section#point > .inner.case .cat > .title p:first-child{width:calc(100% - 90px); text-align:right;}
.section#point > .inner.case .cat > .title p:nth-child(2){width:90px; font-weight:bold; font-size:16px; text-align:left;}

@media screen and (max-width:640px){.section#point > .inner.case .cat > .title{padding:0;}}

@media screen and (max-width:600px){
.section#point > .inner.case{margin-top:20px !important; padding:20px 0;}
.section#point > .inner.case .cat > .title{flex-wrap:wrap; padding:0 20px;}
.section#point > .inner.case .cat > .title p{width:100% !important; text-align:center !important; margin:0 auto 5px;}}

@media screen and (max-width:480px){
.section#point > .inner.case .cat{width:100%;}
.section#point > .inner.case .cat > .title{padding:0;}}

/*
==================================
筐体ポイント説明-筐体+獲得ポイント
==================================
*/
.section#point > .inner.case .cat > .point{font-size:30px; line-height:150%; font-weight:bold;}
.section#point > .inner.case .cat > .point p:first-child{width:60%;}
.section#point > .inner.case .cat > .point p:nth-child(2){width:40%;}
.section#point > .inner.case .cat > .point p:nth-child(2)::before,
.section#point > .inner.case .cat > .point p:nth-child(2)::after{display:block; font-size:13px; text-shadow:0 0 5px rgba(0,0,0,1) , 0 0 3px rgba(0,0,0,1) , 0 0 3px rgba(0,0,0,1);}
.section#point > .inner.case .cat > .point p:nth-child(2)::before{content:"1プレーにつき"}
.section#point > .inner.case .cat > .point p:nth-child(2)::after{content:"たまる！"}

@media screen and (max-width:600px){
.section#point > .inner.case .cat > .point p:first-child,
.section#point > .inner.case .cat > .point p:nth-child(2){width:50%;}
.section#point > .inner.case .cat > .point{font-size:22px;}}

@media screen and (min-width:421px){
.section#point > .inner.case .cat:nth-child(2) > .point{flex-flow:row-reverse;}}

@media screen and (max-width:420px){
.section#point > .inner.case .cat > .point{flex-wrap:wrap;}
.section#point > .inner.case .cat > .point p:first-child,
.section#point > .inner.case .cat > .point p:nth-child(2){width:100%;}}

/* 筐体別色*/
.section#point > .inner.case .cat > .point p:nth-child(2) span:first-child{color:#00f6ff; text-shadow:0 0 5px rgba(0,0,0,1) , 0 0 3px rgba(0,0,0,1) , 0 0 3px rgba(0,0,0,1) , 0 0 30px rgba(0,126,255,1) , 0 0 10px rgba(0,126,255,1) , 0 0 5px rgba(0,126,255,1);}
.section#point > .inner.case .cat > .point p:nth-child(2) span:nth-child(2){color:#fe06ff; text-shadow:0 0 5px rgba(0,0,0,1) , 0 0 3px rgba(0,0,0,1) , 0 0 3px rgba(0,0,0,1) , 0 0 30px rgba(254,6,255,1) , 0 0 10px rgba(254,6,255,1) , 0 0 5px rgba(254,6,255,1);}

/*
==================================
楽曲必要ポイント
==================================
*/
.section > .inner.point{max-width:780px; justify-content:center; flex-wrap:wrap;}
.section > .inner.point > .cat{margin-bottom:40px;}

/*ジャケット上ポイント見出*/
.section > .inner.point .cat > p.point-img{position:relative; width:90%; margin:0px auto;}
.section > .inner.point .cat > p.point-img::before,
.section > .inner.point .cat > p.point-img::after{
position:absolute; 
display: block;
content:"";
width:62px;
height:50px;
background-repeat:no-repeat;
z-index:1;
}
.section > .inner.point .cat > p.point-img::before{top:10px; left:0;}
.section > .inner.point .cat > p.point-img::after{top:10px; right:0;}
.section > .inner.point .cat.pv > p.point-img::before{top:10px; left:10px;}
.section > .inner.point .cat.pv > p.point-img::after{top:10px; right:10px;}

.section > .inner.point .cat.cp > p.point-img::before{background-image:url("/game/bemani/cheersxcheers/1/img/top/cp_left.png");}
.section > .inner.point .cat.cp > p.point-img::after{background-image:url("/game/bemani/cheersxcheers/1/img/top/cp_right.png");}
.section > .inner.point .cat.cv > p.point-img::before{background-image:url("/game/bemani/cheersxcheers/1/img/top/cv_left.png");}
.section > .inner.point .cat.cv > p.point-img::after{background-image:url("/game/bemani/cheersxcheers/1/img/top/cv_right.png");}
.section > .inner.point .cat.pv > p.point-img::before{background-image:url("/game/bemani/cheersxcheers/1/img/top/cp_left.png");}
.section > .inner.point .cat.pv > p.point-img::after{background-image:url("/game/bemani/cheersxcheers/1/img/top/cv_right.png");}

.section > .inner.point .cat > p.point-img > span{
position:relative;
display:inline-block;
font-size:20px; 
font-weight:600;
text-shadow:2px 2px 0px rgba(255, 255, 255, 0.9);
background-color:#ffd552;
border-radius:6px;
padding:10px 20px;
z-index:2;
}
.section > .inner.point .cat.cp > p.point-img > span{width:80%; background-color:#ffd552;}
.section > .inner.point .cat.cv > p.point-img > span{width:80%; background-color:#8fc5ff;}
.section > .inner.point .cat.pv > p.point-img > span{width:80%; background-image: linear-gradient(125deg, #ffd552 50%, #8fc5ff 50%);}

.section > .inner.point .cat > p.point-img > span > em{font-size:16px;}

@media screen and (max-width:800px){
.section > .inner.point .cat > p.point-img > span{margin-top:5px;}

.section > .inner.point .cat.pv > p.point-img::before{top:10px; left:22px;}
.section > .inner.point .cat.pv > p.point-img::after{top:10px; right:22px;}
}
@media screen and (max-width:660px){
.section > .inner.point .cat > p.point-img{width:100%;}
.section > .inner.point .cat.cp > p.point-img > span{width:80%;}
.section > .inner.point .cat.cv > p.point-img > span{width:80%;}
.section > .inner.point .cat.pv > p.point-img > span{width:80%;}
}
@media screen and (max-width:510px){
.section > .inner.point .cat > p.point-img{width:100%;}

.section > .inner.point .cat > p.point-img > span{font-size:16px;}
.section > .inner.point .cat > p.point-img > span > em{font-size:14px;}

.section > .inner.point .cat.pv > p.point-img::before{top:10px; left:0 !important;}
.section > .inner.point .cat.pv > p.point-img::after{top:10px; right:0 !important;}
}
@media screen and (max-width:420px){
.section > .inner.point .cat > p.point-img > span{font-size:14px;}
.section > .inner.point .cat > p.point-img > span > em{font-size:13px;}

.section > .inner.point .cat > p.point-img::before{top:10px; left:-10px !important;}
.section > .inner.point .cat > p.point-img::after{top:10px; right:-10px !important;}
}
@media screen and (max-width:375px){
.section > .inner.point .cat > p.point-img{width:100%;}

.section > .inner.point .cat > p.point-img > span{font-size:14px;}
.section > .inner.point .cat > p.point-img > span > em{font-size:10px;}

.section > .inner.point .cat > p.point-img::before{top:10px; left:-10px !important;}
.section > .inner.point .cat > p.point-img::after{top:10px; right:-10px !important;}
}
/**/

.section > .inner.point .cat > p:nth-of-type(2){margin:20px auto;}
.section > .inner.point .cat > p:nth-of-type(2) img{border:1px solid #333; max-width:300px;}
.section > .inner.point .cat > span{display:block; margin:10px auto 40px;}
.section > .inner.point .cat.item05 span{margin-bottom:0;}

/*機種別イラスト*/
/*
.section > .inner.point .cat.pv > p.only{position:relative;}
.section > .inner.point .cat.pv > p.only::before,
.section > .inner.point .cat.pv > p.only::after{position:absolute; content:""; display:block; top:0;}
.section > .inner.point .cat.pv > p.only::before{
width: 25%;
height: 100%;
background-image: url('/game/bemani/cheersxcheers/1/img/top/popn_ill.png');
background-size: 100% auto;
background-position:left 20%;
background-repeat:no-repeat;
top:0;
left:-28px;
}
.section > .inner.point .cat.pv > p.only::after{
width: 25%;
height: 100%;
background-image: url('/game/bemani/cheersxcheers/1/img/top/sdvx_ill.png');
background-size: 100% auto;
background-position:right 20%;
background-repeat:no-repeat;
top:0;
right:-28px;
}
@media screen and (max-width:800px){
.section > .inner.point .cat.pv > p.only::before{width:130px; left:0;}
.section > .inner.point .cat.pv > p.only::after{width:130px; right:0;}
}
@media screen and (max-width:640px){
.section > .inner.point .cat.pv > p.only::before{width:100px; left:-20px;}
.section > .inner.point .cat.pv > p.only::after{width:100px; right:-20px;}
}
@media screen and (max-width:550px){
.section > .inner.point .cat.pv > p.only::before{width:70px; left:-20px; top:-110px;}
.section > .inner.point .cat.pv > p.only::after{width:70px; right:-20px; top:-110px;}
}
@media screen and (max-width:420px){
.section > .inner.point .cat.pv > p.only::before{background:none;}
.section > .inner.point .cat.pv > p.only::after{background:none;}
}
*/
@media screen and (max-width:800px){
.section > .inner.point{font-size:13px;}
.section > .inner.point .cat{width:80% !important; margin:10px auto !important;}
.section > .inner.point .cat.pv{width:100% !important;}
/*並び順*/
.section > .inner.point{display:flex; margin:0 auto;}
.section > .inner.point .cat.item01{order:1;}
.section > .inner.point .cat.item02{order:2;}
.section > .inner.point .cat.item03{order:3;}
.section > .inner.point .cat.item04{order:4;}
.section > .inner.point .cat.item05{order:5;}
.section > .inner.point .cat.item06{order:6;}
}

@media screen and (max-width:480px){
.section > .inner.point{flex-wrap:wrap; font-size:12px;}
.section > .inner.point .cat{width:85% !important; margin:10px auto !important;}
.section > .inner.point .cat.pv{width:100% !important;}
.section > .inner.point .cat.pv > p:nth-child(2){width:100%;}
}

/*jk色分け*/
.section > .inner.point .cat.cp > p:nth-of-type(2) img{border:solid 4px #ffc100;}
.section > .inner.point .cat.cv > p:nth-of-type(2) img{border:solid 4px #8fc5ff;}
.section > .inner.point .cat.pv > p:nth-of-type(2) img{border:solid 4px #ff6a7a;}

/*
================================================================================================================
04-プレー状況
================================================================================================================
*/
.section#play{}
.section#play > .inner{width:100%; max-width:600px; justify-content:space-between;}

/*
=================
epassナンバー
=================
*/
.section#play #epass{
display:flex; 
justify-content:center; 
flex-wrap:wrap; 
margin:10px auto 40px; 
color:#fff;
background-color:#0c2d57; 
border-radius:20px; 
}
.section#play #epass p{padding:5px;}
.section#play #epass p:first-child{font-size:12px;}
.section#play #epass p:nth-child(2){font-weight:bold; font-size:14px;}

@media screen and (max-width:480px){
.section#play #epass{margin:35px auto 20px;}}

/*
=================
タイトルロゴ
=================
*/
.section#play > .inner:nth-child(3) > p{width:50%; max-width:220px; padding:0 0 10px;}
/*
=================
獲得ポイント
=================
*/
.section#play > .inner:nth-child(4){padding:20px 40px;}
.section#play > .inner:nth-child(4) > p{width:120px; border-radius:10px; font-size:13px; color:#0c2d57; text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.9);}
.section#play > .inner:nth-child(4) > p.po{background-color:#ffd552;}
.section#play > .inner:nth-child(4) > p.sdvx{background-color:#8fc5ff;}
.section#play > .inner:nth-child(4) > p > strong{display:block; font-size:26px; margin:5px auto 0;}
.section#play > .inner:nth-child(4) > p > strong span{display:inline-block;font-size:13px; padding-left:5px;}

@media screen and (max-width:480px){
.section#play > .inner:nth-child(4){padding:20px 0;}}

/*
=================
棒グラフ
=================
*/
.section#play > .inner#point-graph{flex-wrap:wrap;}

.section#play > .inner#point-graph .cat{display:flex; width:50%; padding:0 70px;}
.section#play > .inner#point-graph .cat:nth-child(2){flex-flow:row-reverse;}

.section#play > .inner#point-graph .cat .graph{
position:relative;
width:60px;
height:510px;
background-color:#808080;
border:1px solid #000;}

.section#play > .inner#point-graph .cat .graph .bar,
.section#play > .inner#point-graph .cat .graph .bar p{position:absolute; width:50px;}
.section#play > .inner#point-graph .cat .graph .bar{bottom:4px; left:4px; height:500px;}
.section#play > .inner#point-graph .cat .graph .bar p{bottom:0; left:0;}

/* 筐体別色*/
.section#play > .inner#point-graph .cat:first-child .graph .bar p{background-color:#ffd552;}
.section#play > .inner#point-graph .cat:nth-child(2) .graph .bar p{background-color:#8fc5ff;}

@media screen and (max-width:640px){
.section#play > .inner#point-graph .cat{padding:0 45px;}
.section#play > .inner#point-graph .cat .graph{width:30px;}
.section#play > .inner#point-graph .cat .graph .bar,
.section#play > .inner#point-graph .cat .graph .bar p{width:20px;}}

/*
=================
目盛り
=================
*/
.section#play #point-bar{
position:absolute;
top:5px;
left:0;
width:100%;
height:500px;}

.section#play #point-bar p{
display:flex;
position:absolute;
width:100%;
font-size:11px;}
.section#play #point-bar p:first-child{top:-10px;}
.section#play #point-bar p:nth-child(2){/*top:166px;*/top:47.4%;}
.section#play #point-bar p:nth-child(3){/*top:332px;*/top:73.7%;}

.section#play #point-bar p span{display:block; width:50%;}
.section#play #point-bar p span:first-child{text-align:left}
.section#play #point-bar p span:nth-child(2){text-align:right}

.section#play #point-bar p::before{
content:"";
display:block;
position:absolute;
top:10px;
left:50px;
width:calc(100% - 100px);
height:1px;
background:#000;}

@media screen and (max-width:640px){.section#play #point-bar p::before{width:calc(100% - 80px); left:40px;}}
@media screen and (max-width:480px){.section#play #point-bar p{font-size:10px;}}

/*矢印*/
.section#play #point-bar p span:first-child::after,
.section#play #point-bar p span:nth-child(2)::before{
display:block;
content:"";
position:absolute;
top:4px;
width:15px;
height:13px;
background-size:100% 100%;}
.section#play #point-bar p span:first-child::after{background-image:url(/game/bemani/cheersxcheers/1/img/common/lock/arrow01.png); left:45px;}
.section#play #point-bar p span:nth-child(2)::before{background-image:url(/game/bemani/cheersxcheers/1/img/common/lock/arrow02.png); right:45px;}
@media screen and (max-width:640px){
.section#play #point-bar p span:first-child::after,
.section#play #point-bar p span:nth-child(2)::before{display:none;}}

/*
=================
ロック
=================
*/
#point-lock{
position:absolute;
top:-25px;
left:0;
width:100%;
height:510px;}
.lock img{width:100%; border:1px solid #333;}

/*#point-lock #music01{width:150px; margin:0 auto;}上部1枚の時*/
#point-lock #music01{
display:flex;
width:260px;
margin:10px auto 0;
}
#point-lock #music01 .lock{width:120px; margin:0 auto;}
#point-lock #music02{
display:flex;
width:260px;
/*margin:120px auto 0;*/
margin:10px auto 0;}
#point-lock #music02 .lock{width:120px; margin:0 auto;}
#point-lock #music03{
display:flex;
width:260px;
/*margin:120px auto 0;*/
margin:10px auto 0;}
#point-lock #music03 .lock{width:120px; margin:0 auto;}


@media screen and (max-width:480px){
#point-lock{
display:flex;
position:relative;
top:0;
height:auto;
flex-wrap:wrap;
margin:30px auto 30px;}
/*#point-lock #music01{width:50%;}上部1枚の時*/
#point-lock #music01{width:90%; background-color:transparent; justify-content:space-between; margin:20px auto 0;}
#point-lock #music01 .lock{width:calc(50% - 30px);}
#point-lock #music02{width:90%; background-color:transparent; justify-content:space-between; margin:20px auto 0;}
#point-lock #music02 .lock{width:calc(50% - 30px);}
#point-lock #music03{width:90%; background-color:transparent; justify-content:space-between; margin:20px auto 0;}
#point-lock #music03 .lock{width:calc(50% - 30px);}
}
@media screen and (max-width:370px){
#point-lock #music01{width:100% !important;}
#point-lock #music01 .lock{width:calc(50% - 15px) !important;}
#point-lock #music02{width:100% !important;}
#point-lock #music02 .lock{width:calc(50% - 15px) !important;}
#point-lock #music03{width:100% !important;}
#point-lock #music03 .lock{width:calc(50% - 15px) !important;}
}

/*
=================
ロックアイコン
=================
*/
#point-lock .lock p:nth-child(2){position:relative; width:100%; height:30px; margin:0 auto;}
/*
#point-lock .lock p:nth-child(2)::before,
#point-lock .lock p:nth-child(2)::after{
content:'';
position:absolute;
top:0;
width:0;
height:0;
border:15px solid transparent;
border-right:8px solid transparent;
border-left:8px solid transparent;}
#point-lock .lock p:nth-child(2)::before{right:-16px;}
#point-lock .lock p:nth-child(2)::after{left:-16px;}
*/
#point-lock .lock p span{
display:block;
position:relative;
color:#fff;
font-size:11px;
font-weight:bold;
padding:5px 0 5px 20px;
margin:10px auto 0;}
#point-lock .lock p.lock00 span::before{content:"ロック中";}
#point-lock .lock p.lock01 span::before{content:"アンロック可能";}

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

/*アンロック可能*/
#point-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;
border-radius:20px;}
/*
#point-lock #music01 .lock .lock01 span{background-color:#ff0000;}
#point-lock #music01 .lock .lock01:nth-child(2)::before{border-left-color:#ff0000;}
#point-lock #music01 .lock .lock01:nth-child(2)::after{border-right-color:#ff0000;}
*/
#point-lock #music01 .lock:first-child .lock01 span{background-color:#ffd552;}
#point-lock #music01 .lock:first-child .lock01:nth-child(2)::before{border-left-color:#00baff;}
#point-lock #music01 .lock:first-child .lock01:nth-child(2)::after{border-right-color:#00baff;}

#point-lock #music01 .lock:nth-child(2) .lock01 span{background-color:#8fc5ff;}
#point-lock #music01 .lock:nth-child(2) .lock01::before{border-left-color:#fe06ff;}
#point-lock #music01 .lock:nth-child(2) .lock01::after{border-right-color:#fe06ff;}

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

#point-lock #music02 .lock:nth-child(2) .lock01 span{background-color:#8fc5ff;}
#point-lock #music02 .lock:nth-child(2) .lock01::before{border-left-color:#fe06ff;}
#point-lock #music02 .lock:nth-child(2) .lock01::after{border-right-color:#fe06ff;}

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

#point-lock #music03 .lock:nth-child(2) .lock01 span{background-color:#8fc5ff;}
#point-lock #music03 .lock:nth-child(2) .lock01::before{border-left-color:#fe06ff;}
#point-lock #music03 .lock:nth-child(2) .lock01::after{border-right-color:#fe06ff;}


/*
=================
SPサイズ用表示
=================
*/
#point-disp{display:none;}

@media screen and (max-width:480px){
#point-disp{
display:block;
position:absolute;
top:0;
left:0;
width:100%;}
#point-disp p{background-color:#000; margin:0 auto;}
#point-disp p:first-child{width:210px; margin-top:-20px;}
#point-disp p:first-child img{max-width:100px;}
#point-disp p:nth-child(2){width:210px; margin-top:75px;}
#point-disp p:nth-child(2) img{max-width:100px;}
#point-disp p:nth-child(3){width:210px; margin-top:5px;}
#point-disp p:nth-child(3) img{max-width:100px;}
}

@media screen and (max-width:420px){
#point-disp{top:-5px;}
#point-disp p:first-child{width:150px; margin-top:-10px;}
#point-disp p:first-child img{max-width:70px;}
#point-disp p:nth-child(2){width:150px; margin-top:115px;}
#point-disp p:nth-child(2) img{max-width:70px;}
#point-disp p:nth-child(3){width:150px; margin-top:35px;}
#point-disp p:nth-child(3) img{max-width:70px;}
}

@media screen and (max-width:370px){
#point-disp{top:-20px;}
#point-disp p:first-child{width:130px; margin-top:10px;}
#point-disp p:first-child img{max-width:60px;}
#point-disp p:nth-child(2){width:130px; margin-top:10px;}
#point-disp p:nth-child(2) img{max-width:60px;}
#point-disp p:nth-child(3){width:130px; margin-top:10px;}
#point-disp p:nth-child(3) img{max-width:60px;}
}

/*ロック*/
#point-disp .lock00 img{opacity:0.4; /*border:1px solid #333;*/}
#point-disp .lock01 img{opacity:1;}/*
#point-disp p:first-child .lock01 img{border:1px solid #ff8a00;}
#point-disp p:nth-child(2) span:first-child.lock01 img{border:1px solid #00baff;}
#point-disp p:nth-child(2) span:nth-child(2).lock01 img{border:1px solid #d35efe;}*/

/*SP用高さ*/
@media screen and (max-width:480px){
.section#play > .inner#point-graph .cat .graph{height:410px;}
.section#play > .inner#point-graph .cat .graph .bar{height:400px;}
.section#play #point-bar{height:400px;}}
/*
.section#play #point-bar p:nth-child(2){top:133px;}
.section#play #point-bar p:nth-child(3){top:266px;}}
*/
@media screen and (max-width:370px){
.section#play > .inner#point-graph .cat .graph{height:210px;}
.section#play > .inner#point-graph .cat .graph .bar{height:200px;}
.section#play #point-bar{height:200px;}}
/*
.section#play #point-bar p:nth-child(2){top:66px;}
.section#play #point-bar p:nth-child(3){top:132px;}}
*/

/*
================================================================================================================
見出し
================================================================================================================
*/
#main > #bg > #inner > .section h3{
position:absolute;
top:-10px;
font-size:18px;
font-weight:bold;
}
#main > #bg > #inner > .section h2{
position:relative;
top:-17px;
width:100%; 
max-width:100%; 
background-color:#ff6a7a; 
font-size:18px;
font-weight:bold;
border-radius:20px; 
text-shadow:2px 2px 0px rgba(255, 255, 255, 0.9);
padding:10px;
margin:0 auto;
}

@media screen and (max-width:640px){#main > #bg > #inner > .section h2 p::before,#main > #bg > #inner > .section h2 p::after{width:calc(150px - 20px);}}
@media screen and (max-width:480px){#main > #bg > #inner > .section h2 p::before,#main > #bg > #inner > .section h2 p::after{width:calc(100px - 20px);}}
@media screen and (max-width:370px){#main > #bg > #inner > .section h2 p::before,#main > #bg > #inner > .section h2 p::after{display:none;}}

#main > #bg > #inner > .section h3{
left:-42px;
top:-28px;
width:100%;
height:61px;
max-width:477px;
background-image:url("/game/bemani/cheersxcheers/1/img/top/h3_img.png");
background-size:100% auto;
background-repeat:no-repeat;
text-align:center;
text-shadow:2px 2px 0px rgba(255, 255, 255, 0.9);
}
#main > #bg > #inner > .section h3 p{
position:absolute;
top:15px;
left:35%;
}
@media screen and (max-width:980px){
#main > #bg > #inner > .section h3{left:0;}
}
@media screen and (max-width:480px){
#main > #bg > #inner > .section h2,
#main > #bg > #inner > .section h3{font-size:15px;}
}
@media screen and (max-width:375px){
#main > #bg > #inner > .section h3 p{
position:absolute;
top:10px;}
}
/*
================================================================================================================
見出し-楽曲必要ポイント
================================================================================================================
*/
/* 筐体別色*/
#main > #bg > #inner > .section > .inner.point .cat.pv{width:75%;}

@media screen and (max-width:770px){
.inner.point{display:flex; flex-wrap:wrap;}
}
/*
================================================================================================================
背景
================================================================================================================
*/
/*楽曲一覧*/
.section#music,
.section#unlock,
.section#point,
.section#play{
background-image:url("/game/bemani/cheersxcheers/1/img/top/dot_yellow.png") , url("/game/bemani/cheersxcheers/1/img/top/h3_line01.jpg") , url("/game/bemani/cheersxcheers/1/img/top/h3_line02.jpg") , url("/game/bemani/cheersxcheers/1/img/bg/frame_bg.jpg")!important;
background-repeat:repeat-x , repeat-x , repeat-x , repeat!important;
background-position:bottom 10px center , top , bottom , top;
background-size:16px , auto , auto , auto;
padding-bottom:25px;
}
.section#play{
background-image:url("/game/bemani/cheersxcheers/1/img/top/dot_yellow.png") , url("/game/bemani/cheersxcheers/1/img/top/h3_line01.jpg") , url("/game/bemani/cheersxcheers/1/img/top/h3_line03.jpg") , url("/game/bemani/cheersxcheers/1/img/bg/frame_bg.jpg")!important;
}
.section#date,
.section#shop{
background-image:url("/game/bemani/cheersxcheers/1/img/top/dot_yellow.png");
background-repeat:repeat-x;
background-size:16px;
background-position:bottom 10px center;
}
@media screen and (max-width:870px){
.section#music{
background-image:url("/game/bemani/cheersxcheers/1/img/top/dot_yellow.png") , url("/game/bemani/cheersxcheers/1/img/top/h3_line01.jpg") , url("/game/bemani/cheersxcheers/1/img/top/h3_line02.jpg") , url("/game/bemani/cheersxcheers/1/img/bg/frame_bg.jpg")!important;
background-repeat:repeat-x , repeat-x , repeat-x , repeat!important;
background-position:bottom 10px center , top , bottom , top;
background-size:16px , auto , 5px , auto;
padding-bottom:25px;
}
}
@media screen and (max-width:565px){
.section#music{
background-image:url("/game/bemani/cheersxcheers/1/img/top/dot_yellow.png") , url("/game/bemani/cheersxcheers/1/img/top/h3_line01.jpg") , url("/game/bemani/cheersxcheers/1/img/top/h3_line02.jpg") , url("/game/bemani/cheersxcheers/1/img/bg/frame_bg.jpg")!important;
background-repeat:repeat-x , repeat-x , repeat-x , repeat!important;
background-position:bottom 10px center , top , bottom , top;
background-size:16px , auto , 5px , auto;
padding-bottom:25px;
}
.section#point{
background-repeat:repeat-x , repeat-x , repeat-x , repeat!important;
background-position:bottom 10px center , top , bottom , top;
background-size:16px , auto , 5px , auto;
padding-bottom:25px;
}
}
@media screen and (max-width:370px){
.section#music{
background-image:url("/game/bemani/cheersxcheers/1/img/top/dot_yellow.png") , url("/game/bemani/cheersxcheers/1/img/top/h3_line01.jpg") , url("/game/bemani/cheersxcheers/1/img/top/h3_line02.jpg") , url("/game/bemani/cheersxcheers/1/img/bg/frame_bg.jpg")!important;
background-repeat:repeat-x , repeat-x , repeat-x , repeat!important;
background-position:bottom 10px center , top , bottom , top;
background-size:16px , auto , 5px , auto;
padding-bottom:25px;
}
.section#point{
background-repeat:repeat-x , repeat-x , repeat-x , repeat!important;
background-position:bottom 10px center , top , bottom , top;
background-size:16px , auto , 6px , auto;
padding-bottom:25px;
}
}
@media screen and (max-width:320px){
.section#music{
background-image:url("/game/bemani/cheersxcheers/1/img/top/dot_yellow.png") , url("/game/bemani/cheersxcheers/1/img/top/h3_line01.jpg") , url("/game/bemani/cheersxcheers/1/img/top/h3_line02.jpg") , url("/game/bemani/cheersxcheers/1/img/bg/frame_bg.jpg")!important;
background-repeat:repeat-x , repeat-x , repeat-x , repeat!important;
background-position:bottom 10px center , top , bottom , top;
background-size:16px , auto , 6px , auto;
padding-bottom:25px;
}
.section#point{
background-repeat:repeat-x , repeat-x , repeat-x , repeat!important;
background-position:bottom 10px center , top , bottom , top;
background-size:16px , auto , 6px , auto;
padding-bottom:25px;
}
}

/*アンロック方法 ポイント表*/
.section#point .point-info{display:flex; justify-content:center; flex-wrap:wrap;}
.section#point .point-info .cat{border-radius:10px; padding:10px; margin:5px 10px;}
.section#point .point-info .cat p{font-weight:bold;}
.section#point .point-info .cat p img{width:80%;}
.section#point .point-info .cat.po{background-color:#ffd552;}
.section#point .point-info .cat.sdvx{background-color:#8fc5ff;}
.section#point .point-info .cat ul{height:248px; background-color:#0c2d57; color:#fff; border-radius:10px;}
.section#point .point-info .cat ul li:first-child{
background-image:url("/game/bemani/cheersxcheers/1/img/top/dot_red.png");
background-size:10px;
background-position:bottom;
background-repeat:repeat-x;
padding:10px 0;
}
.section#point .point-info .cat ul li:nth-child(n+2){
display:flex; 
justify-content:space-between;
align-items:center;
border-bottom:solid 1px #485e79; 
margin:0 10px;
padding:10px;
}
.section#point .point-info .cat ul li:nth-child(n+2):last-child{border:none;}
.section#point .point-info .cat ul li:nth-child(n+2) p{text-align:left;}
.section#point .point-info .cat ul li:nth-child(n+2) p:first-child{width:50%;}
.section#point .point-info .cat ul li:nth-child(n+2) p:nth-child(n+2){width:25%;}
/*機種別カラー*/
.section#point .point-info .cat ul li p:nth-of-type(2){color:#ffd552;}
.section#point .point-info .cat ul li p:nth-of-type(3){color:#8fc5ff;}

@media screen and (max-width:874px){
.section#point .point-info .cat.po ul{height:126px;}
}
/*
================================================================================================================
02-イベント楽曲
================================================================================================================
*/
.section > .inner.music{max-width:700px; justify-content:center;}
.section > .inner.music .cat > p:nth-child(2){margin:20px auto;}
.section > .inner.music .cat > p:nth-child(2) img{border:1px solid #333; max-width:300px;}
.section > .inner.music .cat.item05 img:first-child{width:100%; max-width:368px;}
.section > .inner.music .cat.item05{margin-bottom:20px !important;}
.section > .inner.music img:first-child{max-width:300px;}

@media screen and (max-width:800px){
.section > .inner.music{font-size:13px;}
.section > .inner.music .cat{width:60% !important; margin:10px auto !important;}
/*並び順*/
.section > .inner.music{display:flex; flex-wrap:wrap;}
.section > .inner.music .cat.item01{order:1;}
.section > .inner.music .cat.item02{order:2;}
.section > .inner.music .cat.item03{order:3;}
.section > .inner.music .cat.item04{order:4;}
.section > .inner.music .cat.item05{order:5;}
}
@media screen and (max-width:480px){
.section > .inner.music{flex-wrap:wrap; font-size:12px;}
.section > .inner.music .cat.item05 img:first-child{width:100%; max-width:250px;}
.section > .inner.music .cat{width:85% !important; margin:10px auto !important;}
.section > .inner.music .cat.pv{width:100% !important;}
.section > .inner.music .cat.pv > p:nth-child(2){width:100%;}}

.section > .inner.music .cat.cp > p:nth-child(2) img{border:solid 4px #ffc100;}
.section > .inner.music .cat.cv > p:nth-child(2) img{border:solid 4px #8fc5ff;}
.section > .inner.music .cat.pv > p:nth-child(2) img{border:solid 4px #ff6a7a;}

/*
===============
機種別イラスト
===============
*/
.section > .inner.music .cat.pv > p.only{position:relative;}
.section > .inner.music .cat.pv > p.only::before,
.section > .inner.music .cat.pv > p.only::after{position:absolute; content:""; display:block; /*width:100%;*/ top:0;}
.section > .inner.music .cat.pv > p.only::before{
width:150px;
height:100%;
background-image: url('/game/bemani/cheersxcheers/1/img/top/popn_ill.png');
background-size: 100% auto;
background-position:left 20%;
background-repeat:no-repeat;
top:0;
left:-150px;
}
.section > .inner.music .cat.pv > p.only::after{
width:150px;
height:100%;
background-image: url('/game/bemani/cheersxcheers/1/img/top/sdvx_ill.png');
background-size: 100% auto;
background-position:right 20%;
background-repeat:no-repeat;
top:0;
right:-150px;
}
@media screen and (max-width:800px){
.section > .inner.music .cat.pv > p.only::before{width:130px; left:-130px;}
.section > .inner.music .cat.pv > p.only::after{width:130px; right:-130px;}
}
@media screen and (max-width:640px){
.section > .inner.music .cat.pv > p.only::before{width:100px; left:-110px;}
.section > .inner.music .cat.pv > p.only::after{width:100px; right:-110px;}
}

@media screen and (max-width:480px){
.section > .inner.music .cat.pv > p.only::before{width:70px; left:-20px; top:-110px;}
.section > .inner.music .cat.pv > p.only::after{width:70px; right:-20px; top:-110px;}
}
@media screen and (max-width:420px){
.section > .inner.music .cat.pv > p.only::before{background:none;}
.section > .inner.music .cat.pv > p.only::after{background:none;}
}

/*
================================================================================================================
獲得方法
================================================================================================================
*/
#point-other{}
#point-other ul{margin:20px auto 40px}
#point-other ul li.head{font-size:11px;}
#point-other ul li.head div{background:rgb(132,0,255)}

#point-other ul li.pc{display:flex;}
#point-other ul li.sp{display:none;}

#point-other ul li:nth-child(2) div{background:rgba(0,240,255,.3);}
#point-other ul li div{background:rgba(254,6,255,.3);}

#point-other ul li{display:flex; font-size:14px; justify-content:space-between;}
#point-other ul li div{position:relative;}
#point-other ul li div img{width:100%; max-width:200px;}
#point-other ul li div span{display:block; width:100%; font-size:12px; font-weight:normal;}

#point-other ul li div:first-child{width:200px;}
#point-other ul li div:nth-child(2){width:calc(100% - 400px);}
#point-other ul li div:nth-child(3),
#point-other ul li div:nth-child(4){width:90px;}

#point-other ul li:not(.head) div{display:flex; padding:0 5px; flex-wrap:wrap; align-items:center; justify-content:center; font-weight:bold;}
#point-other ul li:not(.head) div p{width:100%; padding:5px;}
#point-other ul li:not(.head) div p + p{border-top:1px dashed rgba(254,6,255,.8);}

@media screen and (max-width:800px){
#point-other ul li.head{display:none;}
#point-other ul li{flex-wrap:wrap;}
#point-other ul li:nth-child(2){margin-bottom:20px;}

#point-other ul li div:first-child{width:100%; padding-bottom:30px;}
#point-other ul li div:nth-child(2){width:calc(100% - 180px);}

#point-other ul li div:nth-child(2)::before,
#point-other ul li div:nth-child(3)::before,
#point-other ul li div:nth-child(4)::before{display:block; position:absolute; left:5px; top:-20px; width:calc(100% - 10px); font-size:11px; background:rgba(0,0,0,.5);}
#point-other ul li div:nth-child(2)::before{content:"詳細";}
#point-other ul li div:nth-child(3)::before{content:"CP獲得量";}
#point-other ul li div:nth-child(4)::before{content:"CV獲得量";}}

@media screen and (max-width:480px){
#point-other ul li.pc{display:none;}
#point-other ul li.sp{display:flex;}

#point-other ul li div:nth-child(2){padding-bottom:25px !important;}
#point-other ul li div:nth-child(2){width:100%;}
#point-other ul li div:nth-child(3),
#point-other ul li div:nth-child(4){width:50%;}

#point-other ul li:last-child div:first-child,
#point-other ul li:last-child div:nth-child(2)::before{display:none;}
#point-other ul li:last-child div:nth-child(2){border-top:1px dashed rgba(254,6,255,.8); padding-top:10px !important;}}

/*
=================
エラーメッセージ
=================
*/
.section#play .message{padding-top:10px;}
@media screen and (max-width:480px){
.section#play .message{padding-top:30px;}
}