@charset "Shift-JIS";

a.btn-link.gf{
display:flex;
justify-content:center;
background-color:#ff4f4f;
box-shadow:0px 5px 0px 0px rgba(255, 255, 255, 1.0);
background-image:url("../img/top/shop_gf_text.png"), url("../img/top/shop_bg_red.jpg");
background-size: 85% auto, 100% auto;
background-repeat: no-repeat, no-repeat;
background-position: center, center;
aspect-ratio: 500 / 180;
}
a.btn-link.gf:hover{
background-color:#6bb2ff;
color:#fff;
box-shadow:none;
transform:translateY(5px);
}
a.btn-link.gf > p{display:flex; align-items:center;}

a.btn-link.dm{
display:flex;
justify-content:center;
background-color:#0ccc6b;
box-shadow:0px 5px 0px 0px rgba(255, 255, 255, 1.0);
background-image:url("../img/top/shop_dm_text.png"), url("../img/top/shop_bg_green.jpg");
background-size: 85% auto, 100% auto;
background-repeat: no-repeat, no-repeat;
background-position: center, center;
aspect-ratio: 500 / 180;
}

/*
================================================================================================================
メイン
================================================================================================================
*/
#main{
position:relative;
color:#0c2d57;
background-color:#fff;
background-attachment:fixed;
background-position:top center;
background-repeat:no-repeat;
background-size:100% auto;
font-size:15px;
font-family:"M PLUS 1p";
transform:rotate(0.05deg);
font-weight:500;
text-align:center;
}

#main > #bg{
background-image:url(../img/bg/fire.png);
background-size:50%;
background-position:bottom;
background-repeat:repeat-x;
background-color:#f8ff76;
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;}}

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

@media screen and (max-width:980px){
#main > #bg > #inner{background: linear-gradient(to right, #f8ff76 0%, calc(50% - 40%), #ffffff calc(50% - 40%), #ffffff calc(50% + 40%), #f8ff76 calc(50% + 40%), #f8ff76 100%);}
}

/*top画像*/
#main > #bg > #inner > #top > .img{margin:0 auto;}
#main > #bg > #inner > #top > .img img{width:100%; max-width:980px;}
#main > #bg > #inner > #top .text{font-size:20px; font-weight:800; margin:30px;}

@media screen and (max-width:670px){
#main > #bg > #inner > #top .text{font-size:18px; text-align:left;}
}
@media screen and (max-width:375px){
#main > #bg > #inner > #top .text{font-size:16px;}
}

#main > #bg > #inner > .section{
position:relative;
width:100%;
}
#main > #bg > #inner > .section#how,
#main > #bg > #inner > .section#date,
#main > #bg > #inner > .section#shop,
#main > #bg > #inner > .section#music,
#main > #bg > #inner > .section#unlock,
#main > #bg > #inner > .section#point,
#main > #bg > #inner > .section#play{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: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{
position:relative; 
width:100%; 
display:flex; 
justify-content:space-around;
flex-wrap:wrap; 
margin:0 auto;}
#main > #bg > #inner > .section > .inner img{width:100%;}

/*イベントについて*/
#main > #bg > #inner > .section#how p{
color:#90a96a;
font-size:20px;
font-weight:800;
margin-bottom:20px;
}
#main > #bg > #inner > .section#how br.sp640{display:block;}
@media screen and (max-width:640px){
#main > #bg > #inner > .section#how br.sp640{display:none;}
}
/*日付*/
.section#date div{font-size:18px; font-weight:bold; color:#000; text-shadow:2px 2px 0px #f8ff76; line-height:30px; letter-spacing:1px;}
.section#date div > b{font-size:30px;}
.section#date br.sp640{display:none;}

@media screen and (max-width:640px){
.section#date br.sp640{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;}
}

/*設置店舗検索*/
#main > #bg > #inner > .section#shop .shop-link{
max-width:700px;
display:flex; 
justify-content:space-around;
flex-wrap:wrap;
margin:0 auto;
}
@media screen and (max-width:640px){
#main > #bg > #inner > .section#shop .shop-link{max-width:500px;}
#main > #bg > #inner > .section#shop .shop-link a{width:220px;}
}
@media screen and (max-width:620px){
#main > #bg > #inner > .section#shop .shop-link a{margin-bottom:10px;}
}
/*
================================================================================================================
03-楽曲のアンロック方法
================================================================================================================
*/
.section#point > .inner{padding:30px 0;}

/*
=================
テキスト
=================
*/
.section .text > b{display:block; font-size:16px; margin-bottom:5px;}
.section#point .text{margin:20px 0;}
@media screen and (max-width:880px){.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,
.section#how .text > b{font-size:13px; text-align:left;}
}
/*
==================================
筐体ポイント説明-筐体ロゴ
==================================
*/
.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 .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:20px auto 40px;}
/*.section > .inner.point .cat.item05 span{margin-bottom:0;}*/
.section > .inner.point .cat.item01 span{margin-bottom:0;}


@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.gfdm{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;}

.section > .inner.point .cat > span{display:block; margin:20px auto 20px;}
.br-800{display:none;}
}

@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.gfdm{width:100% !important;}
.section > .inner.point .cat.gfdm > p:nth-child(2){width:100%;}
}

/*
================================================================================================================
04-プレー状況
================================================================================================================
*/
.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.logo > p{width:50%; padding:0 0 10px;}
/*
=================
獲得ポイント
=================
*/
#main > #bg > #inner > .section > .inner.getpoint{
position: relative;
width: 100%;
display: flex;
justify-content: space-between !important;
flex-wrap: wrap;
margin: 0 auto;
padding:0 !important;
}
.section#play > .inner.getpoint > p{
display: flex;
justify-content: space-around;
align-items: center;
width:250px; 
border-radius:10px; 
font-size:13px; 
color:#000; 
margin-bottom:20px;
padding:10px;
}
.section#play > .inner.getpoint > p.gf{background-color:#ff4f4f;}
.section#play > .inner.getpoint > p.dm{background-color:#0ccc6b;}
.section#play > .inner.getpoint > p > strong.total{font-size:26px; color:#000;}
.section#play > .inner.getpoint > p > strong.point{font-size:26px; color:#fff !important;}
.section#play > .inner.getpoint > p > strong.unit{font-size:13px;}


@media screen and (max-width:560px){
.section#play > .inner.getpoint > p{width:180px !important;}
.section#play > .inner.getpoint > p > strong{display:block; font-size:18px !important;}
.section#play > .inner.getpoint > p > strong.unit{font-size:12px;}
}
@media screen and (max-width:480px){
.section#play > .inner.getpoint{padding:20px 0;}
}
@media screen and (max-width:420px){
.section#play > .inner.getpoint > p{display:block; width:100%; max-width:120px;}
.section#play > .inner.getpoint > p > strong{font-size:14px !important;}
.section#play > .inner.getpoint > p > strong.point{font-size:20px !important;}
.section#play > .inner.getpoint > p > strong.unit{font-size:10px;}
}

/*
=================
棒グラフ
=================
*/
.section#play > .inner#point-graph{
background-image:url(../img/bg/graph_bg01.png), url(../img/bg/graph_bg.webp);
background-size:10%, cover;
background-repeat:repeat, no-repeat;
background-position:top, top;
border-radius:8px 8px 0 0;
}

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

@media screen and (max-width:480px){
.section#play > .inner#point-graph{background-size:25%, 100% 100%;}
}

.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;
margin-top:10px;
}

.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;}


@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:0;}
.section#play #point-bar p:nth-child(2){top:40%;}
.section#play #point-bar p:nth-child(3){top:70%;}

.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:2px;
background:linear-gradient(90deg, #ff4f4f 50%, #0ccc6b 50%);
}

@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/4/img/common/lock/arrow01.png); left:45px;}
.section#play #point-bar p span:nth-child(2)::before{background-image:url(/game/bemani/cheersxcheers/4/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{
display:flex;
width:260px;
margin:10px auto 0;
}
#point-lock #music01 .lock{width:140px; margin:0 auto;}
#point-lock #music02{
display:flex;
width:260px;
margin:10px auto 0;}
#point-lock #music02 .lock{width:120px; margin:0 auto;}
#point-lock #music03{
display:flex;
width:260px;
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 #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;
background:#ff4f4f;
border-radius:5px;
padding:5px 0 5px 20px;
margin:10px auto 0;}
#point-lock #music01 .lock p span{background:linear-gradient(90deg, #ff4f4f 50%, #0ccc6b 50%);}/*GD・DF共通*/
#point-lock .lock:nth-child(even) p span{background:#0ccc6b;}/*DF*/
#point-lock .lock p.lock00 span{background:#888;}/*ロック中*/

#point-lock .lock p.lock00 span::before{content:"ロック中";}
#point-lock .lock p.lock01 span::before{content:"アンロック可能";}

/*鍵アイコン*/
#point-lock .lock p span::after{
display:block;
content:"";
position:absolute;
top:calc(50% - 10px);
left:5px;
width:25px;
height:20px;
background-image:url(/game/bemani/cheersxcheers/4/img/common/lock/00.png);/*ロック中*/
background-position:center;
background-repeat:no-repeat;
background-size:100% auto;}
#point-lock .lock p.lock01 span::after{background-image:url(/game/bemani/cheersxcheers/4/img/common/lock/01.png);}/*アンロック可能*/

/*
=================
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, #point-disp p:first-child img{max-width: 150px;}
#point-disp p:nth-child(2){width:210px; margin-top:10px;}
#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:120px;}
#point-disp p:first-child img{max-width:120px;}
#point-disp p:nth-child(2){width:150px; margin-top:60px;}
#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:80px; margin-top:10px;}
#point-disp p:first-child img{max-width:80px;}
#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;}
}

@media screen and (max-width:320px){
#point-disp p:nth-child(2){width:110px; margin-top:10px;}
#point-disp p:nth-child(2) img{max-width:52px;}
#point-disp p:nth-child(3){width:110px; margin-top:10px;}
#point-disp p:nth-child(3) img{max-width:52px;}
}

/*ロック*/
#point-disp .lock00 img{opacity:0.4;}
#point-disp .lock01 img{opacity:1;}

/*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;}
}

@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;}
}

/*
================================================================================================================
見出し
================================================================================================================
*/
#main > #bg > #inner > .section h3{
position:absolute;
top:-10px;
font-size:18px;
font-weight:bold;
}
#main > #bg > #inner > .section h2{
font-size:30px;
font-weight:bold;
color:#000;
-webkit-text-stroke: 4px #fff;
paint-order: stroke;
filter:drop-shadow(1px 1px 0.5px #000)
drop-shadow(-1px -1px 0.5px #000)
drop-shadow(1px -1px 0.5px #000)
drop-shadow(-1px 1px 0.5px #000); 
margin-bottom:20px;       
padding-bottom:20px;
}

@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/4/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:24px;}
}
@media screen and (max-width:375px){
#main > #bg > #inner > .section h3 p{
position:absolute;
top:10px;}
}
/*
================================================================================================================
見出し-楽曲必要ポイント
================================================================================================================
*/
/* 筐体別色*/
#main > #bg > #inner > .section > .inner.point .cat.pd{width:75%;}

@media screen and (max-width:770px){
.inner.point{display:flex; flex-wrap:wrap;}
}


/*アンロック方法 ポイント表*/
.section#point .point-info{display:flex; justify-content:center; flex-wrap:wrap;}
.section#point .point-info .cat{max-width:350px; background-color:#000; border-radius:10px; box-shadow: 2px 2px 4px gray; 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.gf{
background-color:#ff4f4f;
background-image:url(../img/top/point_bg_red.jpg);
background-size: 100% auto;
background-repeat: no-repeat;
background-position: top;
}
.section#point .point-info .cat.dm{
background-color:#0ccc6b;
background-image:url(../img/top/point_bg_green.jpg);
background-size: 100% auto;
background-repeat: no-repeat;
background-position: top;
}
.section#point .point-info .cat.gf > p{
display:flex;
align-items:center;
justify-content:center;
border-radius: 20px;
height: 210px;
}
.section#point .point-info .cat.dm > p{
display:flex;
align-items:center;
justify-content:center;
border-radius: 20px;
height: 210px;
}
.section#point .point-info .cat ul{/*height:315px;*/ background-color:#fff; color:#000; margin-bottom:40px; padding:10px 20px 0 20px;}
.section#point .point-info .cat ul li:first-child{font-weight:800; margin-bottom:20px;}
.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%; font-size:14px;}
.section#point .point-info .cat ul li:nth-child(n+2) p:nth-child(n+2){width:25%; text-align:center; margin:5px;}

/*機種別カラー*/
.section#point .point-info .cat ul li p:nth-of-type(2){background-color:rgba(255, 79, 79, 0.4); border-radius:4px; color:#000;}
.section#point .point-info .cat ul li p:nth-of-type(3){background-color:rgba(12, 204, 107, 0.4); border-radius:4px; color:#000;}

@media screen and (max-width:874px){
.section#point .point-info .cat.po ul{/*height:126px;*/height:248px;}
}
@media screen and (max-width:480px){
.section#point .point-info .cat ul li:first-child{font-size:14px;}
}
@media screen and (max-width:420px){
.section#point .point-info .cat ul li:nth-child(n+2) p:first-child{font-size:12px;}
}
@media screen and (max-width:375px){
.section#point .point-info .cat ul li:nth-child(n+2) p:first-child{font-size:12px;}
.section#point .point-info .cat.gf,
.section#point .point-info .cat.dm{background-size:120% auto; background-position:top;}
}
@media screen and (max-width:320px){
.section#point .point-info .cat.gf,
.section#point .point-info .cat.dm{background-size:140% auto; background-position:top;}
}
/*
================================================================================================================
02-イベント楽曲
================================================================================================================
*/
.section > .inner.music .cat{
width:100%; 
max-width:300px; 
background-color:#fff;
margin-bottom:20px; 
box-shadow:2px 2px 4px gray;
}
.section > .inner.music .cat .title{
/*height: 100px;*/
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin:10px;
}
.section > .inner.music .cat .title p:first-child{font-weight:800;}

/*ポイント部分のjk解禁仕様*/
.section > .inner.music .cat .title > .point-img{font-weight:800;width:100%; max-width:150px;}
.section > .inner.music .cat .title > .point-img span{display:block; font-size:16px;}
.section > .inner.music .cat .title > .point-img em{font-size:12px;}
.section > .inner.music .cat .title > .point-img > span{border-radius:4px; padding:0 5px;}
.section > .inner.music .cat.gf .title > .point-img > span{background-color:rgba(255, 79, 79, 0.4);}
.section > .inner.music .cat.dm .title > .point-img > span{background-color:rgba(12, 204, 107, 0.4);}
.section > .inner.music .cat.gfdm .title > .point-img > span:nth-of-type(1){background-color:rgba(255, 79, 79, 0.4);}
.section > .inner.music .cat.gfdm .title > .point-img > span:nth-of-type(2){background-color:rgba(12, 204, 107, 0.4);}
.section > .inner.music .cat.gfdm .title > .point-img{display:flex; justify-content: space-around;}

/*jk機種別色分け*/
.section > .inner.music .cat p.jk > span{display:block; width:100%; height:10px;}
.section > .inner.music .cat.gf p.jk > span{background-color:#ff4f4f;}
.section > .inner.music .cat.dm p.jk > span{background-color:#0ccc6b;}
.section > .inner.music .cat.gfdm p.jk > span{background:linear-gradient(90deg, #ff4f4f 50%, #0ccc6b 50%);}

.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;}


@media screen and (max-width:800px){
.section > .inner.music{font-size:13px;}
.section > .inner.music .cat{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%;}
.section > .inner.music .cat{margin:10px auto !important;}
.section > .inner.music .cat.gfdm{width:100% !important;}
.section > .inner.music .cat.gfdm > p:nth-child(2){width:100%;}
}

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


/*
================================================================================================================
獲得方法
================================================================================================================
*/
#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:"CG獲得量";}}

@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; margin-bottom:20px;}
@media screen and (max-width:480px){
.section#play .message{padding-top:30px;}
}