/*
================================================================================================================
トップ
================================================================================================================
*/
#contents{
  background:#fff; border-radius:20px; border:4px solid #c3a37b;
  h3,h4{display:block; font-size:clamp(1.125rem, 0.822rem + 1.52vw, 1.75rem); font-weight:700; text-align:center;}
  h3{color:#fff; background:#c3a37b; border-radius:14px 14px 0 0; padding:15px 10px;}
  h4{color:#c3a37b; margin:40px auto 20px;}
  .inner{
    padding:40px;
    ul li + li{margin-top:20px;}
  }
  #title{
    display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
    > a{width:calc((100% / 3) - 10px); pointer-events:none; margin:10px 5px;}
  }
}

@media screen and (max-width:980px){#contents .inner{padding:20px;}}
@media screen and (max-width:800px){
#contents .inner{padding:10px;}
#contents .inner ul li + li{margin-top:10px;}}
@media screen and (max-width:480px){
#contents h3{padding:10px;}
#contents h4{margin:30px auto 0;}
#contents #title > a{width:calc((100% / 2) - 10px);}}

.bnr{display:block; max-width:901px; filter:drop-shadow(0 5px 0 #f8c080); margin:0 auto;}
div.bnr{filter:drop-shadow(0 5px 0 #86e3fc); pointer-events:none;}

/*CDキャンペーン*/
#contents.benefit{margin:0 auto 40px;}
#contents.benefit h3 br{display:none;}
#contents.benefit .inner{display:flex; align-items:center; padding:20px 40px;}
#contents.benefit .inner > p{width:40%; padding-right:20px;}
#contents.benefit .inner > ul{width:60%; color:#fff; background:#007ac4; font-size:clamp(1rem, 0.909rem + 0.45vw, 1.25rem); border-radius:20px; padding:20px;}
#contents.benefit .inner > ul::before{display:block; content:"収録曲"; color:#007ac4; background:#58daff; border-radius:20px; padding:5px 20px; margin:0 auto 10px;}
#contents.benefit .inner > ul li + li{margin-top:5px !important;}
@media screen and (max-width:640px){
#contents.benefit .inner{flex-wrap:wrap; justify-content:center; padding:0 20px 20px;}
#contents.benefit .inner > p{width:70%; padding:0;}
#contents.benefit .inner > ul{width:100%;}
#contents.benefit .inner > ul::before{text-align:center;}} 
@media screen and (max-width:490px){
#contents.benefit h3{line-height:1.5rem; padding:0 0 5px;}
#contents.benefit h3 br{display:block;}}
@media screen and (max-width:420px){
#contents.benefit .inner{padding:0 10px 10px;}
#contents.benefit .inner > ul{padding:10px 20px;}}

#top{position:relative;}
#top > #cd{position:absolute; width:20%; left:14%; bottom:-2%; z-index:3;}
#top > #cd img{max-width:234px;}
@media screen and (max-width:800px){#top > #cd{width:23%; left:5px; bottom:-5%;}}

#news{font-size:clamp(0.813rem, 0.722rem + 0.45vw, 1.063rem); line-height:1.5rem; text-align:left; margin:0 auto 40px;}
#news p{color:#ff9320;}

/*
================================================================================================================
連動イベント 楽曲
================================================================================================================
*/
#about{
  .frame{
    background:#fff; border-radius:20px; border:4px solid;
    h3{
      display:block; color:#fff; text-align:center; font-size:clamp(1rem, 0.818rem + 0.91vw, 1.375rem); font-weight:700; border-radius:14px 14px 0 0; padding:10px;
      p{display:flex; justify-content:center; align-items:center;}
      p img{width:35%; max-width:200px;}
      p::after{display:block; content:"でアンロックできる楽曲"}
    }
    .inner{
      display:flex; width:100%; text-align:center; padding:0 10px 20px; margin:0 auto;
      ul{width:calc(100% / 3); padding:0 10px 10px;}
      li{position:relative;}
      li + li{margin-top:10px;}
      li:nth-child(1){margin:0 auto;}
      li:nth-child(1) img{max-width:180px;}
      li:nth-child(2) img{border:1px solid;}
      li:nth-child(3),li:nth-child(4){
        font-size:16px; font-weight:700; border-radius:10px; padding:10px;
        span{display:block; font-size:12px; font-weight:500;}
      }
    }
    & + .frame{margin-top:20px;}
    &:not(.new) ul{
      li:nth-child(1) p{display:flex; aspect-ratio:125 / 56; justify-content:center; align-items:center; flex-wrap:wrap; margin:0 auto;}
    }
  }
  .iidx{
    border-color:#3ebd24;
    h3{background:#3ebd24;}
    ul{color:#1f5e12;}
    li:nth-child(3){background:rgba(62,189,36,.5);}
  }
  .ddr{
    border-color:#00b78f;
    h3{
      background:#00b78f;
      p::after{margin-left:-5%;}
    }
    ul{color:#005b47;}
    li:nth-child(3){background:rgba(0,183,143,.5);}
  }
  .gd{
    border-color:#7d60ff;
    h3{
      background:#7d60ff;
      p::after{margin-left:-3%;}
    }
    ul{color:#3e307f;}
    li:nth-child(3){background:rgba(125,96,255,.5);}
  }
  .jb{
    border-color:#00c5b7;
    h3{
      background:#00c5b7;
      p::after{margin-left:-5%;}
    }
    ul{color:#00625b;}
    li:nth-child(3){background:rgba(0,197,183,.5);}
  }
  .pp{
    border-color:#ff9c00;
    h3{
      background:#ff9c00;
      p::after{margin-left:-3%;}
    }
    ul{color:#7f4e00;}
    li:nth-child(3){background:rgba(255,156,0,.5);}
  }
  .sdvx{
    border-color:#ff76d6;
    h3{background:#ff76d6;}
    ul{color:#7f3b6b;}
    li:nth-child(3){background:rgba(255,118,214,.5);}
  }
  .pc{
    border-color:#cd7fff;
    h3{background:#cd7fff;}
    ul{color:#663f7f;}
    li:nth-child(3){background:rgba(205,127,255,.5);}
  }
  .new{
    border-color:#c3a37b;
    h3{background:#c3a37b; padding:20px 0;}
    ul{color:#604f53;}
    li:nth-child(3),li:nth-child(4){background:#c3a37b;}
    .btn-link{width:calc(100% - 40px); margin:0 auto 40px;}
  }
}

@media screen and (min-width:981px){
  #about{
    .frame{
      &:not(.new) ul{
        li:nth-child(1){margin-bottom:35px !important;}
        li:nth-child(1)::before{display:block; content:"から移植"; position:absolute; left:0; bottom:0; width:100%; font-size:15px;}
      }
      ul li:nth-child(1)::after{display:block; position:absolute; left:0; bottom:-30px; width:100%; color:#fff; font-size:16px; border-radius:5px; padding:3px;}
      &.new ul{
        li:nth-child(1){margin-bottom:35px !important;}
        ul li:nth-child(1)::after{bottom:-30px;}
      }
    }
    .iidx{
      ul li::after{background:#1f5e12;}
      ul:nth-child(1) li:nth-child(1)::after{content:"30000KFP 獲得でアンロック可能";}
      ul:nth-child(2) li:nth-child(1)::after{content:"30000MFP 獲得でアンロック可能";}
      ul:nth-child(3) li:nth-child(1)::after{content:"10000TFP 獲得でアンロック可能";}
    }
    .ddr{
      ul li::after{background:#005b47;}
      ul:nth-child(1) li:nth-child(1)::after{content:"30000KFP 獲得でアンロック可能";}
      ul:nth-child(2) li:nth-child(1)::after{content:"30000MFP 獲得でアンロック可能";}
      ul:nth-child(3) li:nth-child(1)::after{content:"10000TFP 獲得でアンロック可能";}
    }
    .gd{
      ul li::after{background:#3e307f;}
      ul:nth-child(1) li:nth-child(1)::after{content:"10000MFP 獲得でアンロック可能";}
      ul:nth-child(2) li:nth-child(1)::after{content:"30000TFP 獲得でアンロック可能";}
      ul:nth-child(3) li:nth-child(1)::after{content:"10000KFP 獲得でアンロック可能";}
    }
    .jb{
      ul li::after{background:#00625b;}
      ul:nth-child(1) li:nth-child(1)::after{content:"10000MFP 獲得でアンロック可能";}
      ul:nth-child(2) li:nth-child(1)::after{content:"30000TFP 獲得でアンロック可能";}
      ul:nth-child(3) li:nth-child(1)::after{content:"10000KFP 獲得でアンロック可能";}
    }
    .pp{
      ul li::after{background:#7f4e00;}
      ul:nth-child(1) li:nth-child(1)::after{content:"10000MFP 獲得でアンロック可能";}
      ul:nth-child(2) li:nth-child(1)::after{content:"30000TFP 獲得でアンロック可能";}
      ul:nth-child(3) li:nth-child(1)::after{content:"10000KFP 獲得でアンロック可能";}
    }
    .sdvx{
      ul li::after{background:#7f3b6b;}
      ul:nth-child(1) li:nth-child(1)::after{content:"30000KFP 獲得でアンロック可能";}
      ul:nth-child(2) li:nth-child(1)::after{content:"30000MFP 獲得でアンロック可能";}
      ul:nth-child(3) li:nth-child(1)::after{content:"10000TFP 獲得でアンロック可能";}
    }
    .pc{
      ul li::after{background:#663f7f;}
      ul:nth-child(1) li:nth-child(1)::after{content:"10000MFP 獲得でアンロック可能";}
      ul:nth-child(2) li:nth-child(1)::after{content:"30000TFP 獲得でアンロック可能";}
      ul:nth-child(3) li:nth-child(1)::after{content:"10000KFP 獲得でアンロック可能";}
    }
    .new{
      ul li::after{background:#604f53;}
      ul:nth-child(1) li:nth-child(1)::after{content:"50000KFP 獲得でアンロック可能";}
      ul:nth-child(2) li:nth-child(1)::after{content:"50000MFP 獲得でアンロック可能";}
      ul:nth-child(3) li:nth-child(1)::after{content:"50000TFP 獲得でアンロック可能";}
    }
  }
}
@media screen and (max-width:980px){
  #about{
    .frame{
      .inner{
        flex-wrap:wrap;
        ul{
          display:flex; width:100%; flex-wrap:wrap; align-items:center; padding:0 5px 10px; margin-top:20px;
          &::before{display:block; width:100%; color:#fff; font-size:14px; border-radius:5px; padding:3px; margin:10px auto;}
          li{width:100px !important; margin:0 !important;}
          /*li + li{margin-top:10px !important;}*/
          li:nth-child(2){margin:0 10px !important;}
          li:nth-child(3),li:nth-child(4){width:calc(100% - 220px) !important;}
          li:nth-child(4){margin-top:10px !important;}
        }
      }
      &:not(.new) ul{
        li:nth-child(1)::after{display:block; content:"から移植"; width:100%; font-size:13px;}
      }
    }
    .iidx{
      ul{background:rgba(62,189,36,.2);}
      ul::before{background:#1f5e12;}
      ul:nth-child(1)::before{content:"30000KFP 獲得でアンロック可能";}
      ul:nth-child(2)::before{content:"30000MFP 獲得でアンロック可能";}
      ul:nth-child(3)::before{content:"10000TFP 獲得でアンロック可能";}
    }
    .ddr{
      ul{background:rgba(0,183,143,.2);}
      ul::before{background:#005b47;}
      ul:nth-child(1)::before{content:"30000KFP 獲得でアンロック可能";}
      ul:nth-child(2)::before{content:"30000MFP 獲得でアンロック可能";}
      ul:nth-child(3)::before{content:"10000TFP 獲得でアンロック可能";}
    }
    .gd{
      ul{background:rgba(125,96,255,.2);}
      ul::before{background:#3e307f;}
      ul:nth-child(1)::before{content:"10000MFP 獲得でアンロック可能";}
      ul:nth-child(2)::before{content:"30000TFP 獲得でアンロック可能";}
      ul:nth-child(3)::before{content:"10000KFP 獲得でアンロック可能";}
    }
    .jb{
      ul{background:rgba(0,197,183,.2);}
      ul::before{background:#00625b;}
      ul:nth-child(1)::before{content:"10000MFP 獲得でアンロック可能";}
      ul:nth-child(2)::before{content:"30000TFP 獲得でアンロック可能";}
      ul:nth-child(3)::before{content:"10000KFP 獲得でアンロック可能";}
    }
    .pp{
      ul{background:rgba(255,156,0,.2);}
      ul::before{background:#7f4e00;}
      ul:nth-child(1)::before{content:"10000MFP 獲得でアンロック可能";}
      ul:nth-child(2)::before{content:"30000TFP 獲得でアンロック可能";}
      ul:nth-child(3)::before{content:"10000KFP 獲得でアンロック可能";}
    }
    .sdvx{
      ul{background:rgba(255,118,214,.2);}
      ul::before{background:#7f3b6b;}
      ul:nth-child(1)::before{content:"30000KFP 獲得でアンロック可能";}
      ul:nth-child(2)::before{content:"30000MFP 獲得でアンロック可能";}
      ul:nth-child(3)::before{content:"10000TFP 獲得でアンロック可能";}
    }
    .pc{
      ul{background:rgba(205,127,255,.2);}
      ul::before{background:#663f7f;}
      ul:nth-child(1)::before{content:"10000MFP 獲得でアンロック可能";}
      ul:nth-child(2)::before{content:"30000TFP 獲得でアンロック可能";}
      ul:nth-child(3)::before{content:"10000KFP 獲得でアンロック可能";}
    }
    .new{
      ul{background:rgba(195,163,123,.5); justify-content:flex-end;}
      ul::before{background:#604f53;}
      ul:nth-child(1)::before{content:"50000KFP 獲得でアンロック可能";}
      ul:nth-child(2)::before{content:"50000MFP 獲得でアンロック可能";}
      ul:nth-child(3)::before{content:"50000TFP 獲得でアンロック可能";}
    }
  }
}
@media screen and (max-width:640px){
  #about .frame .inner{
    ul{
      li{width:80px !important;}
      li:nth-child(3),li:nth-child(4){
        width:calc(100% - 180px) !important;
        font-size:16px;
        padding:5px;
        span{font-size:13px;}
      }
    }
  }
}
@media screen and (max-width:500px){
  #about .frame .inner{
    ul{
      justify-content:center;
      li{width:120px !important;}
      li:nth-child(2){margin:0 0 10px 10px !important;}
      li:nth-child(3),li:nth-child(4){width:100% !important; padding:10px;}
      & + ul{margin-top:10px;}
    }
  }
}

/*
================================================================================================================
連動イベント 遊び方
================================================================================================================
*/
#howto{
  margin:0 auto 40px;
  /*タブ切り替え*/
  > ul{
    display:flex;
    li{
      width:50%;
      color:#fff;
      background:#0cabd6;
      font-size:clamp(0.938rem, 0.5rem + 2.19vw, 1.375rem);
      text-align:center;
      border-top:4px solid #007ac4;
      padding:15px 0;
      cursor:pointer;
      filter:brightness(60%);
      opacity:.9;
      transition:all .2s ease-in-out;
    }
    li + li{border-left:4px solid #007ac4;}
    li:nth-child(1){border-radius:20px 0 0 0; border-left:4px solid #007ac4;}
    li:nth-child(2){border-radius:0 20px 0 0; border-right:4px solid #007ac4;}
    li:hover,li.active{opacity:1; filter:brightness(100%);}
    li.active{background:#ff9320;}
  }
  /*ポイント一覧入れ子*/
  > .inner{
    background:#c3ffff; border:4px solid #007ac4; border-radius:0 0 20px 20px; padding:20px;
    .text:not(.boost){
      font-size:clamp(0.875rem, 0.625rem + 1.25vw, 1.125rem); line-height:1.5rem; border-radius:10px; padding:20px;
      ul.list.ast{
        max-width:530px; margin:10px auto 0;
        li span::before{content:"各FP（KFP・MFP・TFP）";}
      }
      span::before{content:"各FP";}
    }
    /*トグルボタン*/
    > p{
      position:relative;
      color:#007ac4;
      background:#58daff;
      font-size:20px;
      text-align:center;
      border:3px solid;
      border-radius:40px;
      padding:10px 0;
      margin:20px auto 0;
      transition:all .2s ease-in-out;
      cursor:pointer;
      &:hover{color:#f86429; background:#ffea9a;}
      &::after{display:block; content:"＋"; position:absolute; top:8px; right:20px; font-size:30px; transition:all .2s ease-in-out;}
      &.open::after{transform:rotate(-45deg);}
    }
  }
}
@media screen and (max-width:640px){
  #howto > .inner{
    padding:10px;
    .text:not(.boost){text-align:left; padding:10px;}
    > p{
      font-size:18px; border-radius:10px;
      &::after{top:10px; right:10px; font-size:24px;}
    }
  }
}

#howto.campaign > .inner .text:not(.boost) span::before{content:"CFP" !important;}

/*
=========================
各アーティスト応援機種
=========================
*/
#howto #support{
  display:flex; background:#fff; border-radius:10px; border:2px solid #3c427e; justify-content:center; flex-wrap:wrap; margin:20px auto 0;
  &::before{
    display:block;
    content:"3人をそれぞれ応援する機種はこちら！";
    width:100%;
    color:#fff;
    background:#3c427e;
    font-size:clamp(0.875rem, 0.5rem + 1.88vw, 1.25rem);
    text-align:center;
    padding:10px;
    border-radius:6px 6px 0 0;
  }
  .title{width:calc((100% / 3) - 20px); background-size:50% auto; border-radius:20px; margin:15px 0;}
  .title + .title{margin-left:15px;}
  .title:nth-child(1){
    background-image:url(../img/status/support/bg02.jpg);
    ul{background:rgba(255,90,0,.7);}
  }
  .title:nth-child(2){
    background-image:url(../img/status/support/bg03.jpg);
    ul{background:rgba(0,132,255,.7);}
  }
  .title:nth-child(3){
    background-image:url(../img/status/support/bg01.jpg);
    ul{background:rgba(255,0,60,.7);}
  }
  ul{border-radius:0 0 20px 20px;
    li{display:flex; width:100%; aspect-ratio:125 / 56; justify-content:center; align-items:center;}
    img{width:80%;}
  }
}

@media screen and (max-width:520px){
#howto #support .title{width:calc((100% / 3) - 5px); margin:5px 0 !important;}
#howto #support .title:nth-child(2){margin:5px !important;}}
@media screen and (max-width:480px){
  #howto #support .title{
    width:calc(100% - 10px); border-radius:10px; margin:5px !important;
    p{max-width:150px; margin:0 auto;}
    ul{
      display:flex; border-radius:0 0 10px 10px; padding:5px;
      img{width:100% !important;}
    }
  }
}

/*
=========================
ブースト量テーブル
=========================
*/
ul.boost.text{
  padding:0; border-radius:10px; border:2px solid #3c427e; margin:20px auto 0;
  &::before{
    display:block;
    content:"獲得量に応じたブースト量はこちら！";
    width:100%;
    color:#fff;
    background:#3c427e;
    font-size:clamp(0.875rem, 0.5rem + 1.88vw, 1.25rem);
    line-height:1rem;
    text-align:center;
    padding:10px;
    border-radius:6px 6px 0 0;
  }
  li{
    display:flex;
    &:nth-child(1){background:#b4b9ed;}
    &:not(:nth-child(1)){font-size:24px;}
    p{width:50%; text-align:center; padding:10px 5px;}
    p + p{border-left:1px solid;}
    p span::before,p span::after{font-size:14px;}
    p span::before{content:"+";}
    p span::after{content:"%";}
  }
  li + li{border-top:1px solid;}
}

/*
=========================
獲得量リスト
=========================
*/
.point{display:none; color:#000; font-family:'Noto Sans JP', sans-serif; font-weight:500;}
.point .cat{display:flex; width:100%; padding:40px 0 20px; align-items:center;}
.point .cat:last-child{padding:40px 0 0;}
.point .cat > p{width:300px; text-align:center; padding:0 20px;}
.point .cat > p img{width:100%; max-width:300px;}
.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 #7fe5ff;}
.point .cat > ul li > *{position:relative; padding:10px;}
.point .cat > ul li > *:first-child{text-align:left;}
.point .cat > ul li > *:not(:first-child){text-align:center;}
.point .cat + .cat{border-top:2px solid #007ac4;}

/*プレミアムフリー*/
.point .cat > ul li.pfree{position:relative; width:100%; border-bottom:none;}
.point .cat > ul li.pfree .btn{
position:relative;
width:100% !important;
color:#fff;
background:#58dbff;
text-align:center;
font-weight:bold;
border-radius:5px;
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:10px; font-size:20px; transition:all .2s ease-in-out;}
.point .cat > ul li.pfree .btn.open::after{transform:rotate(-45deg);}
.point .cat > ul li.pfree .inner{display:none; width:100% !important; padding:0 !important; margin-top:10px;}

/*見出し*/
.point .cat > ul > li:first-child p::before{
display:block;
position:absolute;
top:-20px;
right:0;
width:calc(100% - 5px);
height:20px;
color:#fff;
background:#0cabd6;
font-size:12px;
text-align:center;
border-radius:5px;}
.point .cat > ul > li:first-child p:nth-child(1)::before{content:"詳細"; left:0; right:unset;}

@media screen and (max-width:800px){
.point{margin:20px auto;}
.point .cat{padding:10px 0 !important; flex-wrap:wrap;}
.point .cat > p,
.point .cat > ul{width:100%;}
.point .cat > p img{width:60% !important; margin-bottom:40px;}
.point .cat > ul li > *{padding:5px 2.5px;}}
@media screen and (max-width:500px){
.point{margin:10px auto;}
.point .cat > ul{font-size:12px;}}

/*解禁用*/
.point.unlock .cat > ul li > *:first-child{width:calc(100% - 240px);}
.point.unlock .cat > ul li > *:not(:first-child){width:80px;}
.point.unlock .cat > ul > li:first-child p:nth-child(2)::before{content:"KFP獲得量";}
.point.unlock .cat > ul > li:first-child p:nth-child(3)::before{content:"MFP獲得量";}
.point.unlock .cat > ul > li:first-child p:nth-child(4)::before{content:"TFP獲得量";}
@media screen and (max-width:500px){
.point.unlock .cat > ul li > *:first-child{width:calc(100% - 120px);}
.point.unlock .cat > ul li > *:not(:first-child){width:40px;}
.point.unlock .cat > ul > li:first-child p:nth-child(2)::before{content:"KFP";}
.point.unlock .cat > ul > li:first-child p:nth-child(3)::before{content:"MFP";}
.point.unlock .cat > ul > li:first-child p:nth-child(4)::before{content:"TFP";}}

/*ブースト用*/
.point.boost .cat > ul li > *{width:80px;}
.point.boost .cat > ul li > *:first-child{width:calc(100% - 80px);}
.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:"DBP獲得量";}
.point.boost .cat:nth-child(3) > ul > li:first-child p:nth-child(2)::before{content:"GBP獲得量";}
.point.boost .cat:nth-child(4) > ul > li:first-child p:nth-child(2)::before{content:"JBP獲得量";}
.point.boost .cat:nth-child(5) > ul > li:first-child p:nth-child(2)::before{content:"PBP獲得量";}
.point.boost .cat:nth-child(6) > ul > li:first-child p:nth-child(2)::before{content:"SBP獲得量";}
.point.boost .cat:nth-child(7) > ul > li:first-child p:nth-child(2)::before{content:"CBP獲得量";}
.point.boost.cd .cat > ul > li:first-child p:nth-child(2)::before{content:"CFP獲得量";}
@media screen and (max-width:500px){
.point.boost .cat > ul li > *{width:50px;}
.point.boost .cat > ul li > *:first-child{width:calc(100% - 50px);}
.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:"DBP";}
.point.boost .cat:nth-child(3) > ul > li:first-child p:nth-child(2)::before{content:"GBP";}
.point.boost .cat:nth-child(4) > ul > li:first-child p:nth-child(2)::before{content:"JBP";}
.point.boost .cat:nth-child(5) > ul > li:first-child p:nth-child(2)::before{content:"PBP";}
.point.boost .cat:nth-child(6) > ul > li:first-child p:nth-child(2)::before{content:"SBP";}
.point.boost .cat:nth-child(7) > ul > li:first-child p:nth-child(2)::before{content:"CBP";}
.point.boost.cd .cat > ul > li:first-child p:nth-child(2)::before{content:"CFP";}}

/*
================================================================================================================
プレー状況 汎用
================================================================================================================
*/
.text.error{font-family:'Noto Sans JP', sans-serif; font-size:18px; color:#d5315e; background:#ffcce1; border:4px solid;}
.text.error > a{color:#ff005f; text-decoration:underline; transition:color .2s ease-in-out;}
.text.error > a:hover{color:#3c427e; text-decoration:none;}
@media screen and (max-width:800px){.text.error{font-size:16px;}}
@media screen and (max-width:640px){.text.error{font-size:14px;}}

/*カードナンバー*/
.text#epass{display:flex; color:#fff; background:#322d72; font-size:14px; justify-content:center; padding:10px;}
.text#epass p:nth-child(1){font-weight:900; margin-right:10px;}

.box{padding:10px;}
.box.blue{background:#c3ffff; border-radius:20px; border:4px solid #007ac4;}
.box.notice{
background:#fff;
font-family:'Noto Sans JP', sans-serif;
font-size:clamp(0.813rem, 0.767rem + 0.23vw, 0.938rem);
font-weight:500;
border-radius:20px;
border:4px solid #f88447;
padding:30px;}
.box.notice strong{
display:block;
color:#000;
background:rgba(255,147,32,.5);
font-size:clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
border-radius:5px;
padding:10px;
margin:0 auto 10px;}
.box.notice ul + strong{margin-top:30px;}
.box.notice ul li > ul{margin:5px auto;}
@media screen and (max-width:640px){.box.notice{padding:20px;}}

/*アンロック トグルボタン*/
.btn-toggle{
position:relative;
font-size:clamp(1.125rem, 1.034rem + 0.45vw, 1.375rem);
text-align:center;
border-radius:10px;
padding:10px;
margin:10px auto 0;
cursor:pointer;
transition:all .2s ease-in-out;}
.btn-toggle:hover{color:#fff;}
.btn-toggle::after{display:block; content:"▼"; position:absolute; top:11px; right:20px; font-size:20px; transition:all .2s ease-in-out;}
.btn-toggle.open::after{top:11px; transform:rotate(180deg);}
@media screen and (max-width:640px){.btn-toggle{margin:30px auto 0;}}

/*
================================================================================================================
ブースト状況
================================================================================================================
*/
#boost{
  > p{
    color:#007ac4;
    background:#58daff;
    font-size:36px;
    text-align:center;
    border:3px solid;
    border-radius:10px;
    padding:10px 0 15px;
    margin:20px auto;
    span::before{display:block; content:"現在のブースト"; font-size:clamp(0.938rem, 0.733rem + 1.02vw, 1.5rem); margin:0 auto 10px;}
    span::after{display:inline-block; content:"%"; font-size:20px; margin:0 0 0 5px;}
  }
  table{
    border-spacing:0; background:#c3ffff;
    th, td{width:calc(100% / 8); text-align:center;}
    thead{
      th{
        padding:0 0 5px;
        &:nth-child(2) li:nth-child(2)::after{content:"BBP";}/*IIDX*/
        &:nth-child(3) li:nth-child(2)::after{content:"DBP";}/*DDR*/
        &:nth-child(4) li:nth-child(2)::after{content:"GBP";}/*GITADORA*/
        &:nth-child(5) li:nth-child(2)::after{content:"JBP";}/*jubeat*/
        &:nth-child(6) li:nth-child(2)::after{content:"PBP";}/*pop'n*/
        &:nth-child(7) li:nth-child(2)::after{content:"SBP";}/*SDVX*/
        &:nth-child(8) li:nth-child(2)::after{content:"CBP";}/*ポラリスコード*/
        li:nth-child(1){display:flex; aspect-ratio:125 / 56; justify-content:center; align-items:center;}
        li:nth-child(2)::after{font-size:12px;}
        li:nth-child(3){
          display:none;
          &::before{content:"+";}
          &::after{content:"%";}
        }
      }
    }
    tbody{
      td{padding:5px;}
      th{font-weight:700;}
      tr:nth-child(odd){background:#b3f1f1}
      /*キャラアイコン*/
      td p{position:relative; width:90%; max-width:80px; aspect-ratio:1 / 1; background-size:100% auto; margin:0 auto;}
      td p:not(.on){filter:grayscale(100%); opacity:.6;}
      td:nth-child(2) p{background-image:url(../img/status/icn/2dx.png);}
      td:nth-child(3) p{background-image:url(../img/status/icn/ddr.png);}
      td:nth-child(4) p{background-image:url(../img/status/icn/gd.png);}
      td:nth-child(5) p{background-image:url(../img/status/icn/jb.png);}
      td:nth-child(6) p{background-image:url(../img/status/icn/pp.png);}
      td:nth-child(7) p{background-image:url(../img/status/icn/sdvx.png);}
      td:nth-child(8) p{background-image:url(../img/status/icn/pc.png);}
      /*レベルアイコン*/
      td p::after{display:block; content:""; position:absolute; bottom:-6%; left:0; width:100%; height:100%; background-size:90% auto; background-position:bottom center; background-repeat:no-repeat;}
      tr:nth-child(1) td p::after{background-image:url(../img/status/icn/plus10.png);}
      tr:nth-child(2) td p::after{background-image:url(../img/status/icn/plus10.png);}
      tr:nth-child(3) td p::after{background-image:url(../img/status/icn/plus10.png);}
      tr:nth-child(4) td p::after{background-image:url(../img/status/icn/plus20.png);}
      tr:nth-child(5) td p::after{background-image:url(../img/status/icn/plus30.png);}
      tr:nth-child(6) td p::after{background-image:url(../img/status/icn/plus40.png);}
      /*レベルアイコン 色変更*/
      td:nth-child(2) p::after{filter:hue-rotate(310deg);}
      td:nth-child(3) p::after{filter:hue-rotate(360deg);}
      td:nth-child(4) p::after{filter:hue-rotate(90deg);}
      td:nth-child(6) p::after{filter:hue-rotate(200deg);}
      td:nth-child(7) p::after{filter:hue-rotate(170deg);}
      td:nth-child(8) p::after{filter:hue-rotate(110deg);}
    }
  }
}

/*獲得量見出し*/
#boost thead tr th:nth-child(1){font-size:14px; vertical-align:bottom;}
@media screen and (max-width:640px){#boost thead tr th:nth-child(1){font-size:12px;}}

@media screen and (max-width:620px){
  #boost{
    .scroll{
      max-width:540px;
      overflow:scroll hidden;
      padding:0 0 10px;
      &::-webkit-scrollbar{height:10px;}
      &::-webkit-scrollbar-thumb{background:#007ac4;}
      &::-webkit-scrollbar-track{background:#888;}
    }
    table{
      th{background:#c3ffff; min-width:80px;}
      :is(th, td):nth-child(1){
        position:sticky;
        min-width:70px;
        left:0;
        z-index:10;
      }
      tbody{
        tr:nth-child(odd) th{background:#9de9e9;}
        tr:nth-child(even) th{background:#b0ffff;}
      }
    }
  }
}

/*
================================================================================================================
アンロック状況
================================================================================================================
*/
#unlock{
  .artist{
    color:#000; padding:10px;
    /*横グラフ関連*/
    .inner{
      display:flex; text-align:center; align-items:center; padding:0 20px;
      > p{width:120px; font-size:20px;}
      > p::after{font-size:14px;}
      .bar{
        position:relative; width:calc(100% - 240px); height:60px; background:rgba(0,0,0,.6); border:1px solid #000;
        div{position:absolute; top:5px; left:5px; width:calc(100% - 10px); height:calc(100% - 10px);}
        span{display:block; height:100%;}
        ul{
          display:block !important; position:absolute; top:-10px; left:0; width:100%; height:calc(100% + 20px);
          li::before{display:block; content:""; position:absolute; top:0; width:1px; height:100%; background:#000;}
          li:nth-child(1)::before{left:0;}
          li:nth-child(2)::before{left:50%;}
          li:nth-child(3)::before{right:0;}
          li::after{position:absolute; display:block; bottom:-20px; font-size:10px;}
          li:nth-child(1)::after{left:-10px;}
          li:nth-child(2)::after{left:calc(50% - 20px);}
          li:nth-child(3)::after{right:-20px;}

        }
      }
    }
  }
  .artist + .artist{border-top:1px solid #007ac4;}
  .artist:nth-child(1){
    .inner > p:nth-child(2)::after{content:"KFP";}
    .bar div{
      span{background:#ff5a00;}
      li:nth-child(1)::after{content:"0KFP";}
      li:nth-child(2)::after{content:"25000KFP";}
      li:nth-child(3)::after{content:"50000KFP";}
    }
    .box.music{/*background:rgba(255,90,0,.5);*/ background-image:url(../img/status/unlock/bg02.jpg);}
    .btn-toggle,
    .title::after,
    .title > p{background:#ff5a00;}
    .title > p::after{content:"KFP 獲得";}
  }
  .artist:nth-child(2){
    .inner > p:nth-child(2)::after{content:"MFP";}
    .bar div{
      span{background:#0084ff;}
      li:nth-child(1)::after{content:"0MFP";}
      li:nth-child(2)::after{content:"25000MFP";}
      li:nth-child(3)::after{content:"50000MFP";}
    }
    .box.music{/*background:rgba(0,132,255,.5);*/ background-image:url(../img/status/unlock/bg03.jpg);}
    .btn-toggle,
    .title::after,
    .title > p{background:#0084ff;}
    .title > p::after{content:"MFP 獲得";}
  }
  .artist:nth-child(3){
    .inner > p:nth-child(2)::after{content:"TFP";}
    .bar div{
      span{background:#ff003c;}
      li:nth-child(1)::after{content:"0TFP";}
      li:nth-child(2)::after{content:"25000TFP";}
      li:nth-child(3)::after{content:"50000TFP";}
    }
    .box.music{/*background:rgba(255,0,60,.5);*/ background-image:url(../img/status/unlock/bg01.jpg);}
    .btn-toggle,
    .title::after,
    .title > p{background:#ff003c;}
    .title > p::after{content:"TFP 獲得";}
  }
  .artist.cd{
    .inner ul{display:none;}
    .inner > p:nth-child(2)::after{content:"CFP";}
    .bar div{
      span{background:#58daff;}
      li:nth-child(1)::after{content:"0CFP";}
      li:nth-child(2)::after{content:"25000CFP";}
      li:nth-child(3)::after{content:"50000CFP";}
    }
  }
  /*アンロック楽曲関連*/
  .box.music{
    display:none; width:100%; background-size:30% auto; border-radius:10px; padding:20px; margin:10px auto 0;
    .title{
      ul{display:flex; max-width:640px; justify-content:center; align-items:flex-end; margin:0 auto;}
      ul li{width:calc(25% - 10px); margin:5px;}
      ul li > * + p{margin-top:10px;}
    }
    .title + .title{margin-top:20px;}
    .title::after{display:block; content:"アンロック可能状態"; width:100%; max-width:300px; color:#000; text-align:center; border-radius:30px; border:1px solid; padding:10px; margin:20px auto 0;}
    .title > p{color:#fff; font-size:22px; letter-spacing:1px; text-align:center; border-radius:10px; padding:10px; margin:0 auto 20px;}
    .title > p::after{font-size:14px; font-weight:700;}
    .title:nth-child(1) > p::before{content:"10000";}
    .title:nth-child(2) > p::before{content:"30000";}
    .title:nth-child(3) > p::before{content:"50000";}
    .title:not(.unlock){
      ul li > *:last-child{filter:grayscale(90%); opacity:.9;}
    }
    .title:not(.unlock)::after{content:"ロック中"; filter:grayscale(100%); opacity:.9;}
  }
}

@media screen and (max-width:640px){
  #unlock{
    .artist{
      padding:10px 0;
      .inner{
        flex-wrap:wrap;
        > p:nth-child(1){
          width:100%; margin-bottom:5px;
          img{max-width:120px;}
        }
        > p:nth-child(2){width:100px;}
        .bar{width:calc(100% - 100px); height:40px;}
      }
    }
    .artist.cd{padding-bottom:30px;}
    .box.music{
      padding:10px;
      .title{
        &::after{max-width:340px; font-size:16px; padding:5px; margin:10px auto 0;}
        & > p{padding:5px; margin:0 auto 5px;}
        ul{max-width:340px; flex-wrap:wrap;}
        ul li{width:calc(50% - 10px);}
      }
    }
  }
}

@media screen and (max-width:480px){
#unlock .artist .inner > *{width:100% !important;}
#unlock .artist .inner > p:nth-child(2){margin-bottom:5px;}}

/*
================================================================================================================
CDキャンペーン
================================================================================================================
*/
#done p:nth-child(1){max-width:300px; border:1px solid; margin:0 auto;}
#done p:nth-child(2){color:#f82946; text-align:center; margin:20px auto 0;}

@media screen and (max-width:540px){br.br-pc{display:none;}}

/*
================================================================================================================
新曲紹介
================================================================================================================
*/

/*
=========================
タブ切り替え
=========================
*/
#tab{display:flex; width:calc(100% - 40px); margin:0 auto;}
#tab > div{
position:relative;
width:calc((100% / 3) + 20px);
background:#fff;
padding:10px 20px 10px 10px;
clip-path:polygon(0 0, 80% 0%, 100% 100%, 0% 100%);
cursor:pointer;
border-top:4px solid #ff9320;
border-left:4px solid #ff9320;
transition:.2s ease-in;
/*overflow:hidden;*/}
#tab > div:not(:nth-child(1)){margin-left:-30px;}
#tab > div:nth-child(1){z-index:3;}
#tab > div:nth-child(2){z-index:2;}
#tab > div:nth-child(3){z-index:1;}
#tab > div img{opacity:.4; transition:.2s ease-in;}
@media screen and (max-width:480px){
#tab{width:100%;}
#tab > div{width:calc((100% / 3) + 10px); padding:3px 10px 3px 3px;}
#tab > div:not(:nth-child(1)){margin-left:-15px;}}

/*アクティブ時*/
#tab > div.active img{opacity:1;}
#tab > div.active{z-index:4;}

/*タブ用斜線*/
#tab > div::before{
display:block;
content:"";
position:absolute;
bottom:0;
right:-3px;
width:7px;
height:110%;
background:#ff9320;
transform:rotate(-18.7deg);
transform-origin:bottom;}

/*すきま調整*/
#tab > div.active::after{
display:block;
content:"";
position:absolute;
width:calc(100% - 8px);
height:3px;
left:0;
bottom:0;
background:#fff;
z-index:4;}

/*
=========================
コメント
=========================
*/
.section{
position:relative;
background:#fff;
font-family:'Noto Sans JP', sans-serif;
font-size:clamp(0.813rem, 0.767rem + 0.23vw, 0.938rem);
line-height:1.5rem;
letter-spacing:1px;
font-weight:500;
border-radius:20px;
border:4px solid #ff9320;
padding:20px;
margin-top:-4px;
z-index:3;}
.section .comment{position:relative; color:#3c427e; background:#bbe3ee; border-radius:10px; padding:20px; margin:20px auto 0;}
.section .comment:first-of-type{background:#ffd83e;}
.section .comment strong{
display:block;
font-size:clamp(1.125rem, 1.034rem + 0.45vw, 1.375rem);
font-weight:700;
margin:0 auto 20px;}
.section .comment strong::after{display:inline-block; content:"応援コメント"; font-size:clamp(0.875rem, 0.83rem + 0.23vw, 1rem); margin-left:10px;}
.section .comment:first-of-type strong::after{content:"コメント";}
@media screen and (max-width:800px){.section .comment:first-of-type{padding-bottom:40px;}}
@media screen and (max-width:640px){
.section{padding:10px;}
.section .comment{padding:10px;}}
@media screen and (max-width:480px){
.section:nth-child(3){border-radius:0 10px 10px 10px;}
.section:nth-child(4){border-radius:10px;}
.section:nth-child(5){border-radius:10px 0 10px 10px;}
.section .comment{border-radius:5px;}}

/*続きを読む*/
.section .toggle-comment{
display:flex;
position:absolute;
bottom:0;
left:0;
width:100%;
min-height:150px;
color:#f35c52;
background:linear-gradient(to bottom, rgba(255,216,62,0) 10%,rgba(255,216,62,1) 100%);
font-weight:700;
border-radius:0 0 10px 10px;
padding:10px;
transition:.2s ease-ine;
justify-content:flex-end;
align-items:flex-end;}
.section .toggle-comment::before{display:block; content:"続きを読む ▼"; cursor:pointer;}
.section .toggle-comment.open::before{display:block;content:"コメントを閉じる ▲";}
.section .toggle-comment.open{background:linear-gradient(to bottom, rgba(255,216,62,0) 0%,rgba(255,216,62,0) 100%);}
.section .toggle{display:none;}

/*サウンド試聴*/
.section > ul{display:flex; color:#604f53; background:#c3a37b; border-radius:10px; align-items:center; padding:20px;}
.section > ul li:nth-child(1){width:40%;}
.section > ul li:nth-child(1) img{border:1px solid;}
.section > ul li:nth-child(2){width:60%; padding-left:20px;}
.section > ul li:nth-child(2) > * + *{margin-top:10px;}
.section > ul li:nth-child(2) p{font-size:26px; font-weight:900;}
.section > ul li:nth-child(2) span{display:block; font-size:20px; font-weight:700;}
.section > ul .audiojs{background:#604f53 !important;}
@media screen and (max-width:480px){
.section > ul{flex-wrap:wrap;}
.section > ul li{text-align:center;}
.section > ul li:nth-child(1){width:100%;}
.section > ul li:nth-child(1) img{max-width:200px;}
.section > ul li:nth-child(2){width:100%; padding:10px 0 0 0;}
.section > ul li:nth-child(2) p{font-size:20px;}
.section > ul li:nth-child(2) span{font-size:16px;}
.section > ul li:nth-child(2) > * + *{margin-top:5px;}}

/*コメント テキスト装飾*/
.style01{font-size:clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem); font-weight:900;}
.style02{display:inline-block; font-size:clamp(1rem, 0.909rem + 0.45vw, 1.25rem); font-family:"Zen Maru Gothic", sans-serif; font-weight:900; font-style:italic;}

/*
================================================================================================================
同意確認チェックボックス
================================================================================================================
*/
input[type="checkbox"]{display:none !important; border:0 !important; margin:0 !important;}

.input-checkbox{
position:relative;
width:260px;
color:#000;
font-size:18px;
font-weight:700;
font-family:'Noto Sans JP', sans-serif;
line-height:30px;
letter-spacing:2px;
padding:0 0 0 40px;
margin:20px auto;
z-index:5;}

.input-checkbox label{display:inline-block; cursor:pointer;}

.input-checkbox label:before,
.input-checkbox label:after{content:""; position:absolute; display:inline-block; transition:transform .2s ease;}

.input-checkbox label:before{
top:0;
left:0;
width:30px;
height:30px;
background:#fffbf3;
border:2px solid;
border-radius:5px;
opacity:.5;}

.input-checkbox label:after{
top:-4px;
left:10px;
width:10px;
height:30px;
border-right:4px solid transparent;
border-bottom:4px solid transparent;
transform:rotate(45deg);
transition:border-bottom-color,border-right-color .2s ease;}

.input-checkbox input[type="checkbox"]:checked + label:before{opacity:1;}
.input-checkbox input[type="checkbox"]:checked + label:after{border-color:#de0011;}

@media screen and (max-width:480px){
.input-checkbox{width:210px; font-size:14px; line-height:24px; padding:0 0 0 30px;}
.input-checkbox label:before{width:24px; height:24px;}
.input-checkbox label:after{top:-8px;}}