#bg > #bg02{background-image:none;}
#main{padding-top:80px !important; padding-left:0 !important; padding-right:0 !important;}
#main-inner{padding:0 !important;}
@media screen and (max-width:900px){#main{padding-top:30px !important;}}

#event{position:relative; width:100%; z-index:3;}
#event .section{color:#fff; background:rgba(0,0,0,.8);}
#event .event-inner{max-width:1200px; margin:0 auto;}
#event .event-inner:not(.section){padding:0 20px;}
#event .event-inner.section{width:calc(100% - 40px);  padding:20px !important; text-align:left !important;}
@media screen and (max-width:480px){
#event .event-inner:not(.section){padding:0 10px !important;}
#event .event-inner.section{width:calc(100% - 20px); padding:10px !important;}}

#event h2{
display:block;
color:#fff;
background:#0090ff;
font-family:'M PLUS 1', sans-serif;
font-weight:800;
font-size:30px;
text-align:center;
padding:20px 0;
margin:100px auto 30px;}
#event h2#shop{margin:50px auto 30px;}
#event h2#music{margin:100px auto 70px;}

@media screen and (max-width:1200px){#event h2{font-size:26px;}}
@media screen and (max-width:980px){#event h2{font-size:22px;}}
@media screen and (max-width:640px){
#event h2{font-size:20px; padding:10px 0; margin:50px auto 20px;}
#event h2#shop{margin:30px auto 20px;}
#event h2#music{margin:50px auto 60px;}}
@media screen and (max-width:480px){#event h2{font-size:18px;}}

#event .text{color:#fff; font-size:24px; font-family:'M PLUS 1', sans-serif; font-weight:800; line-height:150%;}
@media screen and (max-width:1200px){#event .text{font-size:20px;}}
@media screen and (max-width:980px){#event .text{font-size:18px;}}
@media screen and (max-width:640px){#event .text{font-size:16px;}}
@media screen and (max-width:480px){#event .text{font-size:14px;}}
@media screen and (max-width:370px){#event .text{font-size:13px;}}

#event .text sup{display:inline-block; font-size:12px; vertical-align:top !important; margin-left:5px; margin-top:-5px;}

#event .text.error{font-size:18px; font-weight:500; margin:20px auto;}
#event .text.error > a{color:#ff3e00; text-decoration:underline; transition:color .2s ease;}
#event .text.error > a:hover{color:#0090ff;}
@media screen and (max-width:640px){#event .text.error{font-size:14px;}}
@media screen and (max-width:480px){#event .text.error{font-size:13px;}}
@media screen and (max-width:370px){#event .text.error{font-size:12px;}}

.alert{font-size:14px; color:#fc0; font-weight:bold; margin:10px auto 0;}

/*
================================================================================================================
TOP
================================================================================================================
*/
#event #logo{text-align:center; margin:0 auto 20px;}
#event #logo img{width:100%;}
@media screen and (max-width:480px){#event #logo img{display:block; width:120%; margin-left:-10%;}}

#top .inner{background:rgba(0,0,0,.8); text-shadow:1px 1px 0 rgba(0,0,0,.8), 2px 2px 1px rgba(0,0,0,.8), 0 0 3px rgba(0,0,0,.8); padding:30px;}
@media screen and (max-width:640px){#top .inner{padding:20px;}}

#ver{width:100%; max-width:340px; color:#fff; font-family:'Noto Sans JP', sans-serif; font-size:11px; margin:0 0 0 auto;}
#ver dl{display:flex; width:100%; max-width:250px; flex-wrap:wrap; text-align:right; margin:0 0 0 auto;}
#ver dl dt{width:calc(100% - 110px);}
#ver dl dd{width:110px;}

.ast{font-family:'Noto Sans JP', sans-serif;}

/*日付*/
#event #date{
background:#0090ff;
font-family:'M PLUS 1', sans-serif;
font-size:20px;
font-weight:800;
line-height:30px;
letter-spacing:1px;
text-shadow:none;
border-radius:10px;
padding:20px 0;
margin:20px auto;}
#event #date > p{width:70%; max-width:240px; background:#000; border-radius:30px; padding:5px 0; margin:0 auto 10px;}
#event #date > b{font-size:30px;}
#event #date br{display:none;}
@media screen and (max-width:800px){
#event #date{font-size:16px; padding:10px 0;}
#event #date > p{margin:0 auto 5px;}
#event #date > b{font-size:22px;}}
@media screen and (max-width:640px){#event #date br{display:block;}}
@media screen and (max-width:370px){#event #date{font-size:14px; line-height:20px;}}

/*
================================================================================================================
設置店舗
================================================================================================================
*/
#search{display:flex; justify-content:space-between;}
#search a{
position:relative;
width:calc((100% / 3) - 10px);
margin:0 !important;
transition:all .2s ease;}
#search a .inner{padding:20px 0 !important;}
#search a img{width:60%;}

#search a.frame::before,
#search a.frame .inner::before{transition:all .2s ease;}

#search a.frame:hover::before{opacity:.5;}
#search a.frame:hover .inner::before{filter:blur(5px) saturate(200%);}

@media screen and (max-width:840px){
#search a{width:calc((100% / 3) - 5px);}
#search a img{width:90%;}}
@media screen and (max-width:640px){
#search{flex-wrap:wrap;}
#search a{width:100%;}
#search a + a{margin-top:15px !important;}
#search a img{width:40%;}}
@media screen and (max-width:480px){#search a img{width:50%;}}

/*
===============================
機種別
===============================
*/
#search a:nth-child(1):hover{background:#ff9000;}
#search a:nth-child(2):hover{background:#96f400;}
#search a:nth-child(3):hover{background:#00de91;}

/*
================================================================================================================
イベント楽曲リスト
================================================================================================================
*/
.frame{position:relative; border:3px solid;}
.frame + .frame{margin:60px auto 0;}
.frame::before{
display:block;
content:"";
position:absolute;
bottom:0;
right:0;
width:100%;
height:50%;
background:linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
z-index:5;}

.frame{border-radius:10px; border-color:#c685ff;}
.frame::before,
.frame .inner{border-radius:7px;}

.frame h3{
display:block;
position:absolute;
top:-55px;
left:-3px;
width:100%;
max-width:420px;
color:#fff;
font-size:17px;
font-weight:900;
font-family:'M PLUS 1', sans-serif;
font-weight:800;
background-size:100% 110%;
background-position:center left;
background-repeat:no-repeat;
padding:35px 10px 50px 10px;
text-shadow:1px 1px 0 rgba(0,0,0,.7), 2px 2px 0 rgba(0,0,0,.7), 0 0 4px rgba(0,0,0,.4);
z-index:6;}

.frame .inner{display:flex; position:relative; background:rgba(0,0,0,.3); padding:30px 20px; justify-content:center; flex-wrap:wrap; overflow:hidden;}
.frame .inner::before,.frame .inner::after{display:block; content:""; position:absolute; z-index:4;}
.frame .inner::before{
top:-10px;
left:-10px;
width:calc(100% + 20px);
height:calc(100% + 20px);
background-size:120% auto;
background-position:center right -100px;
background-repeat:no-repeat;
filter:blur(5px);}
.frame .inner::after{top:0; right:0; width:100%; height:100%; background-image:url(/game/bpl/season2/img/common/frame/bg01.png);}

.frame .inner > *{position:relative; z-index:6;}
.frame .inner > .music{text-align:center;}
.frame .inner > .music img{width:100%;}

/*機種ロゴ･獲得ロゴ*/
.frame .inner > .music .model{position:relative;}
.frame .inner > .music .model img{max-width:200px; filter:drop-shadow(0 0 2px #fff)  drop-shadow(0 0 3px #fff) drop-shadow(0 0 20px #fff);}
.frame .inner > .music .model > p{position:relative; font-family:'M PLUS 1', sans-serif; font-weight:800; font-size:26px; letter-spacing:1px; z-index:6;}
.frame .inner > .music .model > p::after{font-size:13px; font-weight:500;}
.frame .inner > .music .model > span{display:block; font-size:14px; color:#fff; line-height:160%; margin:5px auto 0;}
.frame .inner > .music .jk{margin:10px auto;}
.frame .inner > .music .jk img{width:60%; max-width:220px; border:1px solid;}
.frame .inner > .music .info{font-family:'Noto Sans JP', sans-serif; font-size:22px; font-weight:900;}
.frame .inner > .music .info span{display:block; font-size:14px; font-weight:700; margin:10px auto 0;}
.frame .inner > .music .sound{margin-top:10px;}

/*テキストシャドウ*/
.frame .inner > .music .model > p,
.frame .inner > .music .model > span,
.frame .inner > .music .info{filter:drop-shadow(0 0 2px #000) drop-shadow(0 0 3px #000) drop-shadow(0 0 20px #000);}

@media screen and (max-width:840px){
.frame h3{font-size:14px;}}
@media screen and (max-width:480px){
.frame .inner{padding:20px 10px;}
.frame .inner > .music .model > p{font-size:22px;}
.frame .inner > .music .model > p::after{font-size:12px;}
.frame .inner > .music .model > span{font-size:10px;}
.frame .inner > .music .info{font-size:16px;}
.frame .inner > .music .info span{font-size:12px;}}
@media screen and (max-width:370px){.frame .inner > .music .model > span{font-size:9px;}}
@media screen and (max-width:370px){.frame h3{font-size:13px;}}

/*
===============================
機種別
===============================
*/
.frame.iidx{color:#ff9000; border-color:#ff9000;}
.frame.sdvx{color:#96f400; border-color:#96f400;}
.frame.ddr{color:#00de91; border-color:#00de91;}
.frame.tt{color:#ed4197; border-color:#ed4197;}

.frame.iidx h3{background-image:url(../img/title/2dx01.png);}
.frame.sdvx h3{background-image:url(../img/title/sdvx01.png);}
.frame.ddr h3{background-image:url(../img/title/ddr01.png);}
.frame.tt h3{background-image:url(../img/title/tt01.png);}

.frame.iidx .inner::before{background-image:url(../img/logo/2dx_cabinet.png);}
.frame.sdvx .inner::before{background-image:url(../img/logo/sdvx_cabinet.png);}
.frame.ddr .inner::before{background-image:url(/game/bpl/season4/img/common/cabinet/ddr_bg.png);}
.frame.tt .inner::before{background-image:url(../img/jk/tt01.jpg); background-position:center; background-size:cover !important;}

.frame.tt .inner > .music .jk img{width:80%; max-width:350px;}

.frame .inner > .music .model p::after{content:"TTP獲得";}

/*
===============================
イベント楽曲エリア用
===============================
*/
#music-list .frame .inner{padding:50px 20px 20px;}
#music-list .frame .inner > .music{width:50%;}
#music-list .frame .inner > .music .model{max-width:250px; margin:0 auto;}
#music-list .frame:not(.tt) .inner .model::after{
display:block;
position:absolute;
bottom:5px;
right:10px;
content:"から";
color:#fff;
font-family:'M PLUS 1', sans-serif;
font-weight:700;
font-size:13px;
letter-spacing:2px;
filter:drop-shadow(0 0 2px #000)  drop-shadow(0 0 3px #000) drop-shadow(0 0 20px #000);}

@media screen and (max-width:840px){
#music-list .frame .inner > .music{width:100%;}
#music-list .frame .inner::before{background-position:center !important; background-size:auto 120% !important;}}
@media screen and (max-width:480px){#music-list .frame .inner{padding:50px 10px 20px;}}

/*調整*/
#music-list .frame .inner > .music:nth-child(3),
#music-list .frame .inner > .music:nth-child(4){margin-top:10px;}
@media screen and (max-width:840px){
#music-list .frame .inner > .music:nth-child(1){order:1;}
#music-list .frame .inner > .music:nth-child(2){order:3; border-top:2px solid; padding-top:30px; margin-top:30px;}
#music-list .frame .inner > .music:nth-child(3){order:2;}
#music-list .frame .inner > .music:nth-child(4){order:4;}}

/*
===============================
楽曲のアンロック方法/プレー状況 共通
===============================
*/
.point-unlock > *{margin:0 !important;}
.point-unlock .frame + .frame{margin-top:20px !important;}
.point-unlock .frame .inner{padding:10px 20px 30px;}
.point-unlock .frame .inner::before{background-position:center; background-size:auto 120%;}

.point-unlock .frame:not(.tt) .inner > .music{width:calc(100% / 3);}
.point-unlock .frame.tt{width:100%;}
.point-unlock .frame.tt{margin-top:20px !important;}

/*TTP見出し*/
.point-unlock .frame .inner > strong{
display:block;
width:100%;
color:#c685ff;
font-size:36px;
font-weight:800;
letter-spacing:1px;
text-align:center;
text-shadow:1px 1px 0 rgba(0,0,0,.8), 2px 2px 1px rgba(0,0,0,.8), 0 0 3px rgba(0,0,0,.8);
padding:20px 0 10px;}
.point-unlock .frame .inner > strong::after{display:inline-block; content:"TTP獲得"; font-size:14px; font-weight:700; margin-left:5px;}
.point-unlock .frame.tt .inner > strong{color:#ed4197; padding:20px 0 0;}

.point-unlock .frame.tt .model > p{color:#fff; font-size:14px; letter-spacing:2px; font-family:"メイリオ", "Meiryo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
.point-unlock .frame.tt .model > p > strong{font-family:'M PLUS 1', sans-serif; font-weight:800; font-size:26px; letter-spacing:1px;}
.point-unlock .frame.tt .model > p > strong:nth-child(1){color:#ff9000;}
.point-unlock .frame.tt .model > p > strong:nth-child(3){color:#96f400;}
.point-unlock .frame.tt .model > p > strong:nth-child(5){color:#00de91;}
.point-unlock .frame.tt .model > p > strong::after{content:"TTP獲得"; font-size:13px; font-weight:500;}
.point-unlock .frame.tt .model > span br{display:none;}

@media screen and (max-width:750px){
.point-unlock .frame + .frame{margin-top:10px!important;}
.point-unlock .frame .inner{display:flex;}
.point-unlock .frame .inner ul + ul{margin-top:0;}
.point-unlock .frame:not(.tt) .inner ul{width:50% !important;}}
@media screen and (max-width:600px){
.point-unlock .frame.tt .model > p > strong{display:block;}
.point-unlock .frame.tt .model > p > span{display:none;}
.point-unlock .frame:not(.tt) .inner ul{width:100% !important;}}
@media screen and (max-width:480px){
.point-unlock .frame.tt .model > p > strong{font-size:22px;}
.point-unlock .frame.tt .model > p > strong::after{font-size:12px;}}

/*
===============================
楽曲のアンロック方法エリア用
===============================
*/
.point-unlock .frame .inner .logo{text-align:center; margin:0 auto 10px;}
.point-unlock .frame .inner .logo img{width:80%; filter:drop-shadow(0 0 2px #fff)  drop-shadow(0 0 3px #fff) drop-shadow(0 0 20px #fff);}
@media screen and (max-width:750px){.point-unlock .frame .inner .logo img{width:50%;}}
@media screen and (max-width:480px){.point-unlock .frame .inner .logo img{width:60%;}}

/*
===============================
プレー状況エリア用
===============================
*/
.gage .point-unlock .music .model > span{
color:#000;
width:90%;
max-width:220px;
border-radius:20px;
font-family:'Noto Sans JP', sans-serif;
font-size:14px;
font-weight:bold;
border:1px solid #000;
padding:1px 0;
margin:5px auto 0;
filter:drop-shadow(0 0 2px rgba(0,0,0,.0)) !important;}

.gage .point-unlock .music.lock01 .model > span::after{content:"アンロック可能状態";}

.gage .point-unlock .music.lock00 .model > span{color:#fff; background:#333;}
.gage .point-unlock .music.lock00 .model > span::after{content:"ロック中";}
.gage .point-unlock .music.lock00 .jk img{filter:grayscale(100%) brightness(60%);}

.gage .frame .music.iidx:not(.lock00) .model > span{background:#ff9000;}
.gage .frame .music.sdvx:not(.lock00) .model > span{background:#96f400;}
.gage .frame .music.ddr:not(.lock00) .model > span{background:#00de91;}
.gage .frame.tt .model > span{color:#fff; max-width:350px; background:#ed4197;}
@media screen and (max-width:420px){.gage .point-unlock .music .model > span{font-size:12px;}}

.gage .frame:not(.tt) .music .model::before{display:block; content:""; width:100%; height:90px; background-size:200px auto; background-position:center; background-repeat:no-repeat;}
.gage .frame .music.iidx .model::before{background-image:url(/game/bpl/season5/event/triple_tribe/img/logo/2dx.png);}
.gage .frame .music.sdvx .model::before{background-image:url(/game/bpl/season5/event/triple_tribe/img/logo/sdvx.png);}
.gage .frame .music.ddr .model::before{background-image:url(/game/bpl/season5/event/triple_tribe/img/logo/ddr.png);}

.point-unlock .frame:not(.tt) .inner::before{
background-image:url(../img/logo/2dx_cabinet.png) , url(../img/logo/sdvx_cabinet.png) , url(/game/bpl/season4/img/common/cabinet/ddr_bg.png);
background-size:auto 100% , auto 100% , auto 100%;
background-position:left -7% bottom , center bottom , right -7% bottom;
background-repeat:no-repeat , no-repeat , no-repeat;
opacity:.5;}
@media screen and (max-width:750px){
.point-unlock .frame:not(.tt) .inner::before{
background-size:130% auto, 130% auto , 130% auto;
background-position:top -10% center, center , bottom -10% center;}}

/*
================================================================================================================
獲得量リスト
================================================================================================================
*/
.point .cat > ul li.long p{padding:10px 10px 0 10px;}
@media screen and (max-width:800px){.point .cat > ul li.long p{padding:5px 2.5px 0 2.5px;}}

.point{margin:30px auto;}
.point .cat{display:flex; width:100%; padding:40px 0 20px; align-items:center;}
.point .cat > p{width:300px; text-align:center; padding:0 20px;}
.point .cat > p img{width:100%;}
.point .cat > ul{width:calc(100% - 300px); font-size:13px;}
.point .cat > ul li{display:flex; position:relative; flex-wrap:wrap; align-items:center;}
.point .cat > ul li + li{border-top:1px solid #f8dcdd;}
.point .cat > ul li p{position:relative; padding:10px;}
.point .cat > ul li p:first-child{width:calc(100% - 80px); text-align:left;}
.point .cat > ul li p{width:80px; text-align:center;}
.point .cat + .cat{border-top:2px solid #0090ff;}

.point .cat > ul li.pfree{position:relative; border-bottom:none;}
.point .cat > ul li.pfree .btn{
position:relative;
width:100%;
color:#fff;
background:#ff9000;
border-radius:20px;
text-align:center;
font-weight:bold;
padding:5px;
margin:20px auto 0;
cursor:pointer;
transition:opacity .2s ease;}
.point .cat > ul li.pfree .btn:hover{opacity:.7;}
.point .cat > ul li.pfree .btn::after{display:block; content:"＋"; position:absolute; top:5px; right:20px;}
.point .cat > ul li.pfree .btn.open::after{content:"×";}
.point .cat > ul li.pfree .inner{display:none; width:100%;}

.point .cat > ul > li:first-child p::before{
display:block;
position:absolute;
top:-20px;
width:calc(100% - 5px);
height:20px;
color:#fffbf3;
background:#4f4841;
font-family:'Noto Sans JP', sans-serif;
font-size:12px;
text-align:center;}
.point .cat > ul > li:first-child p:nth-child(1)::before{content:"詳細"; left:0;}
.point .cat > ul > li:first-child p:nth-child(2)::before{content:"TTP獲得量"; right:0;}

.point.boost .cat:nth-child(1) > ul > li:first-child p:nth-child(2)::before{content:"BBP獲得量";}
.point.boost .cat:nth-child(2) > ul > li:first-child p:nth-child(2)::before{content:"SBP獲得量";}
.point.boost .cat:nth-child(3) > ul > li:first-child p:nth-child(2)::before{content:"DBP獲得量";}

@media screen and (max-width:980px){
.point .cat > p{width:300px;}
.point .cat > ul{width:calc(100% - 300px);}}

@media screen and (max-width:800px){
.point{margin:20px auto;}
.point .cat{padding:20px 0 20px; flex-wrap:wrap;}
.point .cat > p,
.point .cat > ul{width:100%;}
.point .cat > p img{width:60%; margin-bottom:30px;}
.point .cat > ul li p{padding:5px 2.5px;}}

@media screen and (max-width:420px){
.point{margin:10px auto;}
.point .cat > ul{font-size:12px;}
.point .cat > ul > li:first-child p:nth-child(2)::before{content:"TTP";}
.point.boost .cat:nth-child(1) > ul > li:first-child p:nth-child(2)::before{content:"BBP";}
.point.boost .cat:nth-child(2) > ul > li:first-child p:nth-child(2)::before{content:"SBP";}
.point.boost .cat:nth-child(3) > ul > li:first-child p:nth-child(2)::before{content:"DBP";}}

/*
================================================================================================================
プレー状況確認エリア
================================================================================================================
*/
#playdata > .event-inner.section:nth-child(1){margin:100px auto 0;}
@media screen and (max-width:640px){#playdata > .event-inner.section:nth-child(1){margin:50px auto 0;}}

#epass{font-family:'M PLUS 1', sans-serif; font-weight:800; text-align:center; margin:20px auto;}
#epass p:first-child{font-size:13px; font-weight:500; margin-bottom:5px;}

/*
================================================================================================================
進捗確認ゲージ
================================================================================================================
*/
.get-point{display:flex;}
.get-point ul{text-align:center;}
.get-point ul li:first-child{margin-bottom:10px;}
.get-point ul li img{width:90%; max-width:200px;}
.get-point ul li span{font-size:11px;}
.get-point ul li strong{display:block; color:#ed4197; font-size:26px; font-family:'M PLUS 1', sans-serif; font-weight:800; letter-spacing:1px;}

.gage-bar{position:relative; margin:20px auto;}
.gage-bar .inner{display:flex;}
.gage-bar .inner .graph .bar{
position:relative;
width:60px;
height:280px;
background-color:#333;
border:1px solid #fff;
margin:0 auto;}
.gage-bar .inner .graph .bar p{
position:absolute;
bottom:4px;
left:4px;
width:50px;
height:270px;}
.gage-bar .inner .graph .bar p span{position:absolute; bottom:0; left:0; display:block; width:100%; height:100%; background:#ed4197;}

@media screen and (max-width:800px){
.get-point,
.gage-bar .inner{width:calc(100% - 90px); margin:0 auto;}}
@media screen and (max-width:640px){
.get-point ul li:first-child{display:none;}
.get-point ul li span{font-size:9px;}
.get-point ul li strong{font-size:22px;}
.get-point ul li strong::after{display:block; font-size:12px;}
.gage-bar .inner .graph .bar{width:40px;}
.gage-bar .inner .graph .bar p{width:30px;}}
@media screen and (max-width:370px){
.get-point ul li strong{font-size:16px;}
.get-point ul li span{display:none;}}

/*ブースト状況*/
.gage:not(#status) .get-point ul{width:calc(100% / 3); text-align:center;}
.gage:not(#status) .get-point ul:nth-child(1) li strong{color:#ff9000;}
.gage:not(#status) .get-point ul:nth-child(2) li strong{color:#96f400;}
.gage:not(#status) .get-point ul:nth-child(3) li strong{color:#00de91;}
.gage:not(#status) .get-point ul li strong::after{font-size:13px; font-weight:500;}
.gage:not(#status) .get-point ul:nth-child(1) li strong::after{content:"BBP";}
.gage:not(#status) .get-point ul:nth-child(2) li strong::after{content:"SBP";}
.gage:not(#status) .get-point ul:nth-child(3) li strong::after{content:"DBP";}
.gage:not(#status) .gage-bar .inner .graph{width:calc(100% / 3);}

/*プレー状況*/
#status .get-point{justify-content:center;}
#status .gage-bar .inner{justify-content:center;}


/*
===============================
機種別
===============================
*/
.gage:not(#status) .gage-bar .inner .graph:nth-child(1) .bar p span{background:#ff9000;}
.gage:not(#status) .gage-bar .inner .graph:nth-child(2) .bar p span{background:#96f400;}
.gage:not(#status) .gage-bar .inner .graph:nth-child(3) .bar p span{background:#00de91;}

/*
===============================
目盛り
===============================
*/
.point-bar{position:absolute; top:5px; left:0; width:100%; height:calc(100% - 10px);}
.point-bar p{display:flex; position:absolute; width:100%; font-size:11px;}
.point-bar p span{display:block; width:50%;}
.point-bar p span:first-child{text-align:left}
.point-bar p span:nth-child(2){text-align:right}
.point-bar p::before{
content:"";
display:block;
position:absolute;
top:10px;
left:50px;
width:calc(100% - 100px);
height:1px;
background:#fff;}
@media screen and (max-width:640px){.point-bar p::before{width:calc(100% - 80px); left:40px;}}
@media screen and (max-width:480px){.point-bar p{font-size:10px;}}

/*ブースト状況*/
.gage:not(#status) .point-bar p:first-child{top:-10px;}
.gage:not(#status) .point-bar p:nth-child(2){top:125px;}
.gage:not(#status) .point-bar p:nth-child(3){top:214.3px;}

/*プレー状況*/
#status .point-bar p:first-child{top:-10px;}
#status .point-bar p:nth-child(2){top:115px;}
#status .point-bar p:nth-child(3){top:177px;}
#status .point-bar p:nth-child(4){top:219px;}
#status .point-bar p:nth-child(5){top:250px;}

/*
高さ計算
26000  1      270
14000  0.538  100x0.53
12000  0.461  100x0.461  =124.47 270-124.47
8000   0.307  100x0.307  =82.89
4000   0.153  100x0.153  =41.31
1000   0.038  100x0.038  =10.26

26÷14=1.86 100÷1.86=53.76
26÷12=2.17 100÷2.17=46.08
26÷8=3.25  100÷3.25=30.76
26÷4=6.5   100÷6.5=15.38
26÷1=26    100÷26=3.8
*/

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

/*
================================================================================================================
各機種リンク
================================================================================================================
*/
#title-link{display:flex; width:calc(100% - 20px); max-width:640px; justify-content:center; flex-wrap:wrap; margin:100px auto 0;}
#title-link a{display:block; width:calc((100% /3) - 10px); background:#fff; border:1px solid #000; margin:10px 5px;}
#title-link a img{width:100%;}
#title-link a:hover img{opacity:.7;}
@media screen and (max-width:640px){
#title-link{max-width:240px;}
#title-link a{width:100%; margin:10px aut0;}}

/*
================================================================================================================
ブースト進捗
================================================================================================================
*/
#boost-status{max-width:980px; background:#c685ff; border-radius:10px; padding:20px; margin:0 auto 20px;}

#boost-status > strong{
display:flex;
max-width:300px;
background:#000;
text-align:center;
border-radius:30px;
padding:10px 0;
margin:0 auto 20px;
align-items:center;
justify-content:center;}
#boost-status > strong span{display:inline-block; color:#c685ff; font-size:30px; font-weight:800; letter-spacing:1px; margin-left:5px;}
#boost-status > strong span::after{display:inline-block; content:"%"; font-size:18px; font-weight:normal;}
@media screen and (max-width:480px){
#boost-status > strong{margin:0 auto 10px;}
#boost-status > strong span{font-size:20px;}
#boost-status > strong span::after{font-size:15px;}}

#boost-status ul{display:flex; align-items:center;}
#boost-status ul + ul{margin-top:10px;}
#boost-status ul li:nth-child(1){width:calc(100% - 400px);}
#boost-status ul li:nth-child(2){width:280px;}
#boost-status ul li:nth-child(3){width:100px; text-align:center;}
#boost-status ul li + li{margin-left:10px;}

#boost-status ul.head{text-align:center; font-family:'Noto Sans JP', sans-serif; font-size:12px; font-weight:500;}
#boost-status ul.head li{background:#4f4841; padding:3px 0;}

#boost-status ul:not(.head){background:rgba(122,47,187,.6); border-radius:5px;}
#boost-status ul:not(.head) li{padding:10px;}

#boost-status ul li.achievement{display:flex; justify-content:center;}
#boost-status ul li.achievement > p{width:calc((100% / 3) - 10px); aspect-ratio:1 / 1; background-size:100% auto;}
#boost-status ul li.achievement > p + p{margin-left:10px;}
#boost-status ul li.achievement > p:nth-child(1){background-image:url(/game/bpl/season5/event/triple_tribe/img/boost/2dx_off.png);}
#boost-status ul li.achievement > p:nth-child(2){background-image:url(/game/bpl/season5/event/triple_tribe/img/boost/sdvx_off.png);}
#boost-status ul li.achievement > p:nth-child(3){background-image:url(/game/bpl/season5/event/triple_tribe/img/boost/ddr_off.png);}
#boost-status ul li.achievement > p.done:nth-child(1){background-image:url(/game/bpl/season5/event/triple_tribe/img/boost/2dx.png);}
#boost-status ul li.achievement > p.done:nth-child(2){background-image:url(/game/bpl/season5/event/triple_tribe/img/boost/sdvx.png);}
#boost-status ul li.achievement > p.done:nth-child(3){background-image:url(/game/bpl/season5/event/triple_tribe/img/boost/ddr.png);}

@media screen and (max-width:800px){
#boost-status{padding:10px;}
#boost-status ul + ul{margin-top:5px;}
#boost-status ul{font-size:14px;}
#boost-status ul li:nth-child(1){width:calc(100% - 310px);}
#boost-status ul li:nth-child(2){width:220px;}
#boost-status ul li:nth-child(3){width:80px; text-align:center;}
#boost-status ul li + li{margin-left:5px;}
#boost-status ul li.achievement > p{width:calc((100% / 3) - 5px);}
#boost-status ul li.achievement > p + p{margin-left:5px;}}

@media screen and (max-width:580px){
#boost-status ul.head{display:none;}
#boost-status ul{flex-wrap:wrap; justify-content:center; padding:10px;}
#boost-status ul li{width:100% !important; text-align:center; padding:0 !important;}
#boost-status ul li + li{margin-left:0;}
#boost-status ul li:nth-child(2){max-width:300px; margin:10px 0;}
#boost-status ul li:nth-child(3)::before{
display:inline-block;
content:"ブースト量";
background:#222;
font-family:'Noto Sans JP', sans-serif;
font-size:11px;
font-weight:500;
border-radius:5px;
padding:0 10px;
margin-right:5px;}}