/*e-amusementサイトテンプレート*/
header,footer,header#id_nav_menu_1{position:relative !important;}
header#id_nav_menu_1{background-color:#fff;}
#wrapper{position:relative !important;}

header#id_nav_menu_1 {z-index:9999 !important;}
footer               {z-index:2 !important;}

/*
================================================================================================================
COMMON
================================================================================================================
*/
*{padding:0; margin:0; border:0;}
*, *:before, *:after{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;}

html{width:100%; height:100%; overflow-wrap:break-word}
body{
min-width:320px !important;
background:#000 !important;
margin:0 auto;
font-family:"メイリオ", "Meiryo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
overflow-x:hidden;}
h1,h2,h3,h4,h5,h6{display:none;}
a{outline:none;}
a:link,a:visited,a:hover,a:active{text-decoration:none;}
a img{transition:opacity .3s ease-in-out;}
img{padding:0; margin:0; border:0; vertical-align:bottom;}
ul{margin:0; padding:0; border:0;}
li{list-style:none;}
strong,em,b{font-weight:600; font-style:normal;}
table{width:100%; color:#000; border-collapse:collapse; border-spacing:0; margin:0 auto;}

.no-show{display:none !important;}/*タブ切替*/

/*
=========================
リスト
=========================
*/
#main .small{font-size:clamp(0.625rem, 0.58rem + 0.23vw, 0.75rem);/*12-10*/}

/*リスト関連*/
ul.list{width:100%; text-align:left; margin:0 auto;}
ul.list > li{display:block; position:relative; padding-left:18px; line-height:150%;}
ul.list > li + li{margin-top:5px;}
ul.list > li::before{display:block; position:absolute; top:0; left:0;}

ul.list.dot > li::before{content:""; top:10px; left:4px; width:5px; height:5px; background:#fff; border-radius:50%;}
ul.list.ast > li::before{content:"※";}
ul.list.sq > li::before{content:"■";}

ul.list.num > li:first-child::before{content:"1.";}
ul.list.num > li:nth-child(2)::before{content:"2.";}
ul.list.num > li:nth-child(3)::before{content:"3.";}
ul.list.num > li:nth-child(4)::before{content:"4.";}
ul.list.num > li:nth-child(5)::before{content:"5.";}
ul.list.num > li:nth-child(6)::before{content:"6.";}

ul.list.ast.small > li{padding-left:14px; font-weight:500;}

/*
================================================================================================================
MAIN
================================================================================================================
*/
#main-wrapper{
  position:relative;
  &::after{
    display:block;
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-image:url(../img/bg/wrapper.png);
    z-index:1;
  }
  &.fixed::after{position:fixed;}
}

#main{
  position:relative;
  width:100%;
  max-width:1000px;
  font-family:'Noto Sans JP', sans-serif;
  box-shadow:12px 0 0 #006cff , -12px 0 0 #006cff , 26px 0 0 #fcff00 , -26px 0 0 #fcff00;
  padding:10px 0 40px;
  margin:0 auto;
  overflow:hidden;
  z-index:2;
  img{display:block; width:100%; margin:0 auto;}
  #bg{
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    max-width:1000px;
    background-image:url(../img/bg/main.png);
    background-size:100% auto;
    background-position:top center;
    background-repeat:no-repeat;
    &::before,&::after{
      display:block;
      content:"";
      position:absolute;
      top:0;
      width:71px;
      height:100%;
      background-size:100% auto;
      background-position:top;
      background-repeat:repeat-y;
      animation:wave 15s linear infinite;
      pointer-events:none;
    }
    &::before{left:0; background-image:url(../img/bg/main_side_left.png);}
    &::after{right:0; background-image:url(../img/bg/main_side_right.png);}
    &.fixed{position:fixed;}
  }
}
@media screen and (max-width:480px){#main{padding:10px 0 20px;}}

/*背景*/
@media screen and (min-width:1001px){#main #bg.fixed{max-width:1000px; left:calc(50% - 500px);}}
@media screen and (max-width:980px){#main #bg::before,#main #bg::after{width:30px;}}
@media screen and (max-width:640px){#main #bg::before,#main #bg::after{width:20px; animation:wave 12s linear infinite;}}
@media screen and (max-width:400px){#main #bg::before,#main #bg::after{display:none;}}

/*背景アニメーション*/
@keyframes wave{
  0%{background-position:0 0;}
  100%{background-position:0 -204px;}
}
@media screen and (max-width:980px){
  @keyframes wave{
    0%{background-position:0 0;}
    100%{background-position:0 -86px;}
  }
}
@media screen and (max-width:640px){
  @keyframes wave{
    0%{background-position:0 0;}
    100%{background-position:0 -57px;}
  }
}

#main-inner{position:relative; width:100%; max-width:800px; margin:0 auto;}
#main-inner > * + *{margin-top:50px !important;}
@media screen and (max-width:480px){#main-inner > * + *{margin-top:30px !important;}}

/*
=========================
メインエリア
=========================
*/
#pic > img{position:relative; max-width:790px; z-index:3}
#pic + #main-inner #box{margin-top:-10px;}
@media screen and (max-width:640px){#pic + #main-inner #box{margin-top:-5px;}}

#box{
  position:relative;
  width:calc(100% - 40px);
  max-width:700px;
  background-image:url(../img/bg/pat_side.png);
  border-radius:30px;
  border:10px solid #fff;
  margin:0 auto;
  #top{
    position:relative;
    width:100%;
    background-color:#9cff00;
    background-image:url(../img/bg/top.png);
    background-size:100% auto;
    background-position:center;
    background-repeat:no-repeat;
    border-radius:18px 18px 0 0;
    padding-bottom:40px;
    > img{width:calc(100% + 110px); margin:0 auto 0 -55px;}
  }
  #date{
    position:relative;
    width:147%;
    margin:-5% auto 0 -23.5%;
    z-index:8;
  }
  #box-inner{
    position:relative;
    width:80%;
    background-image:url(../img/bg/pat_main.png);
    padding:40px 20px 100px;
    margin:-3% auto 0;
  }
  #status-text{
    color:#1e9200;
    background:#fff;
    font-family:ruika, sans-serif;
    font-size:clamp(1.125rem, 0.852rem + 1.36vw, 1.875rem);/*30-18*/
    line-height:1.5rem;
    text-align:center;
    border-radius:0 0 18px 18px;
    padding:30px 5px 20px;
    &.small{font-size:clamp(0.813rem, 0.608rem + 1.02vw, 1.375rem);/*22-13*/ line-height:1.8rem; padding:20px 10px 10px;}
    &.blue{color:#004eff;}
    > span{
      display:inline-block; margin-right:5px;
      em{display:inline-block; font-size:clamp(1.875rem, 1.648rem + 1.14vw, 2.5rem);/*40-30*/ font-weight:normal; letter-spacing:-4px; margin-right:5px;}
    }
  }
}
@media screen and (max-width:810px){
  #box{
    width:calc(100% - 80px);
    #top > img{width:calc(100% + 100px); margin-left:-50px;}
  }
}
@media screen and (max-width:640px){
  #box{
    width:calc(100% - 60px); border:5px solid #fff;
    #top{
      border-radius:23px 23px 0 0;
      > img{width:calc(100% + 70px); margin-left:-35px;}
    }
    #date{width:150%; margin:-10% auto 0 -25%;}
    #box-inner{width:100%; padding:40px 10px 100px;}
    #status-text{
      border-radius:0 0 23px 23px; padding:30px 5px 25px;
      &.small{line-height:1.2rem; padding:20px 10px 15px;}
    }
  }
}
@media screen and (max-width:480px){
  #box{
    #date{width:160%; margin:-9% auto 0 -30%;}
    #box-inner{padding:20px 10px 50px;}
  }
}
@media screen and (max-width:400px){
  #box{
    width:calc(100% - 20px);
    #top > img{width:calc(100% + 30px); margin-left:-15px;}
    #date{width:148%; margin:-15% auto 0 -24%;}
  }
}

/*
=========================
遊び方
=========================
*/
#howto{
  position:relative; font-family:"M PLUS 1p", sans-serif; margin:0 auto 45px; transform:rotate(0.03deg);
  .about{color:#fff; background:#1cc500; font-size:clamp(0.813rem, 0.699rem + 0.57vw, 1.125rem); font-weight:900; text-align:center; padding:20px; img{margin:0 auto 20px;}}
  .point{
    color:#1cc500; border:4px solid; border-top:none; padding:20px;
    .head{
      display:flex; margin:0 auto 10px;
      > p{
        color:#fff; background:#87c861; font-size:14px; text-align:center; border-radius:5px; padding:5px;
        &:nth-child(1){width:calc(100% - 120px); margin-right:10px;}
        &:nth-child(2){width:110px;}
      }
    }
    ul{
      display:flex; color:#1e9200; font-weight:900; padding:10px 5px; align-items:center;
      li:nth-child(1){
        width:calc(100% - 110px); font-size:clamp(0.75rem, 0.659rem + 0.45vw, 1rem);/*16-12*/
        .small{font-family:'Noto Sans JP', sans-serif;}
      }
      li:nth-child(2){
        width:110px; text-align:center;
        p::before,p::after{display:inline-block; font-size:13px;}
        p::before{content:"＋";}
        p::after{content:"%";}
      }
      & + ul{border-top:2px solid;}
      &:nth-child(2){border-top:2px solid;}
      &:last-child{border-bottom:2px solid;}
    }
  }
  &::before,&:after{
    display:block;
    content:"";
    position:absolute;
    left:calc(50% - 25px);
    width:0;
    height:0;
    border-style:solid;
    border-left:25px solid transparent;
    border-right:25px solid transparent;
    border-bottom:0;
  }
  &:before{bottom:-20px; border-top:20px solid #1cc500;}   
  &:after{bottom:-14px; border-top:20px solid #f0ffc2;}
}
@media screen and (max-width:520px){
  #howto{
    .about{padding:10px; img{margin:0 auto 10px;}}
    .point{
      padding:20px 10px;
      .head p:nth-child(1){display:none;}
      .head p:nth-child(2){width:100%}
      ul{display:block; padding:5px 0;}
      ul li{width:100% !important;}
      ul li:nth-child(2){text-align:right;}
    }
  }
}

/*
=========================
進捗エリア
=========================
*/
#status{
  position:relative;
  #gage{
    position:relative; width:160px; height:160px; background:#5d9eff; border-radius:10px; border:3px solid #c6ddff; padding:10px; margin:0 auto 30px;
    &::before,&::after{display:block; content:""; position:absolute; left:calc(50% - 15px); bottom:-30px; width:30px; height:30px;}
    &::before{background:#5d9eff; border-left:3px solid #c6ddff; border-right:3px solid #c6ddff;}
    &::after{background:linear-gradient(to bottom, rgba(240,255,194,0) 0%,rgba(240,255,194,0.01) 0%,rgba(240,255,194,1) 90%);}
    #gage-pick{
      position:relative;
      &::after{
        display:block;
        content:"";
        position:absolute;
        top:0;
        left:-50%;
        width:200%;
        height:100%;
        background-image:url(/game/jubeat/18th/img/gage/effect.png);
        background-position:left center;
        background-repeat:no-repeat;
        pointer-events:none;
      }
      #gage-bar{position:absolute; top:0; right:0; height:100%; background-image:url(/game/jubeat/18th/img/gage/bg.png);}
    }
  }
  ul#progress{
    display:flex;
    width:100%;
    max-width:300px;
    color:#0e58e9;
    background:#c6ff00;
    font-family:ruika, sans-serif;
    font-size:18px;
    text-align:center;
    justify-content:space-between;
    align-items:center;
    border:4px solid #1cc500;
    border-radius:10px;
    padding:10px;
    margin:0 auto;
    > li{width:50%; padding:5px;}
    li:nth-child(1){
      background:#fff;
      border-radius:5px;
      background-image:url(/game/jubeat/18th/img/gage/pick.png);
      background-size:12px auto;
      background-position:left 10px center;
      background-repeat:no-repeat;
      padding-left:25px;
      p::after{content:"本目";}
    }
    li:nth-child(2){
      p::before,p::after{display:inline-block; margin:0 3px 0 0;}
      p::before{content:"完成度";}
      p::after{content:"%"; font-size:14px;}
    }
  }
  .message{
    display:flex;
    position:absolute;
    top:calc(50% - 40px);
    left:-17.5%;
    width:135%;
    height:80px;
    color:#c6ff00;
    background:#001c95;
    font-family:ruika, sans-serif;
    font-size:clamp(1rem, 0.818rem + 0.91vw, 1.5rem);/*24-16*/
    line-height:1.8rem;
    text-align:center;
    align-items:center;
    justify-content:center;
  }
}
@media screen and (max-width:640px){#status .message{left:-50%; width:200%;}}

#cake{
  position:relative; margin-top:-10%; z-index:5;
  &::after{
    display:block;
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:90%;
    background-image:url(../img/bg/btm.png);
  }
  > p{position:relative; z-index:3;}
}

/*
=========================
コンプリート時
=========================
*/
#box-inner.comp::before{
  display:block;
  content:"";
  position:absolute;
  top:0;
  left:-25%;
  width:150%;
  height:100%;
  background-image:url(/game/jubeat/18th/img/bg/comp_left.png) , url(/game/jubeat/18th/img/bg/comp_right.png);
  background-position:left , right;
  background-repeat:repeat-y , repeat-y;
  pointer-events:none;
  z-index:4;
}
@media screen and (max-width:640px){#box-inner.comp::before{left:-20%; width:140%; background-size:110px auto , 110px auto;}}
@media screen and (max-width:480px){#box-inner.comp::before{display:none;}}

#comp{position:relative; width:160%; margin-left:-30%; z-index:5;}
@media screen and (max-width:810px){#comp{width:120%; margin-left:-10%;}}

#cake.comp{
  > p:nth-child(2){position:absolute; width:100%; top:0; left:0; z-index:7;}
  &::before{
    display:block;
    content:"";
    position:absolute;
    top:0;
    left:-15%;
    width:130%;
    height:100%;
    background-image:url(/game/jubeat/18th/img/gage/bg_comp_left.png) , url(/game/jubeat/18th/img/gage/bg_comp_right.png);
    background-size:auto 100% , auto 100%;
    background-position:left bottom , right bottom;
    background-repeat:no-repeat , no-repeat;
    pointer-events:none;
    z-index:6;
  }
}
@media screen and (max-width:900px){#cake.comp::before{width:110%; left:-5%;}}

/*
=========================
終了時
=========================
*/
#cake.end{
  padding-top:25%; margin-top:-20%;
  .remind{
    position:relative;
    width:calc(100% - 40px);
    color:#fff;
    background:#1cc500;

    font-size:clamp(0.813rem, 0.699rem + 0.57vw, 1.125rem);/*18-13*/
    line-height:1.5rem;
    border-radius:10px;
    padding:20px;
    margin:0 auto 30px;
    z-index:6;
    transform:rotate(0.03deg);
    p{
      font-family:"M PLUS 1p", sans-serif;
      > a{color:#fcff00; text-decoration:underline;}
      > a:hover{color:#fcff00; text-decoration:underline;}
    }
  }
}
@media screen and (max-width:480px){#cake.end .remind{padding:10px;}}

/*
=========================
注意事項
=========================
*/
#notice{
  font-size:clamp(0.75rem, 0.659rem + 0.45vw, 1rem);/*16-12*/ margin:0 auto;
  h2,h3{display:block; font-family:ruika, sans-serif; text-align:center; line-height:2rem;}
  > h2{
    color:#003cff;
    background:#fff;
    font-size:clamp(1.625rem, 1.307rem + 1.59vw, 2.5rem);/*40-26*/
    border-radius:30px 30px 0 0;
    padding:20px;
  }
  #notice-inner{
    color:#fff;
    background:rgba(0,28,149,1);
    font-family:"M PLUS 1p", sans-serif;
    line-height:1.8rem;
    letter-spacing:1px;
    border-radius:0 0 30px 30px;
    padding:30px;
    > h3{
      position:relative;
      font-size:clamp(1.125rem, 0.852rem + 1.36vw, 1.875rem);/*30-18*/
      margin:40px auto 20px;
      span{display:inline-block; position:relative; background:#001c95; padding:0 20px; z-index:3; br{display:none;}}
      &::before{display:block; content:""; position:absolute; top:50%; left:0; width:100%; height:1px; background:#fff;}
      &:nth-child(1){margin-top:0;}      
    }
    > ul, > div{transform:rotate(0.03deg);}
    > ul > li > ul{margin:10px auto;}
    > ul > li:last-child > ul{margin:10px auto 0;}
    a{color:#1cc500; text-decoration:underline; transition:all .2s ease-in-out;}
    a:hover{color:#c6ff00; text-decoration:none;}
    dl{
      border:1px solid; border-radius:10px;
      > *{padding:10px;}
      + dl{margin-top:20px;}
      dt{text-align:center; border-bottom:1px solid;}
    }
  }
}
@media screen and (max-width:920px){#notice{width:90%;}}
@media screen and (max-width:810px){#notice{width:calc(100% - 80px);}}
@media screen and (max-width:640px){#notice{width:calc(100% - 60px);}}
@media screen and (max-width:400px){#notice{width:calc(100% - 20px);}}

@media screen and (max-width:800px){
  #notice{
    #notice-inner{
      padding:30px 20px;
      > h3{margin:30px auto 20px; line-height:1.5rem; span{padding:0 10px;}}
    }
  }
}
@media screen and (max-width:640px){#notice h3 br{display:block !important;}}
@media screen and (max-width:480px){
  #notice{
  > h2{padding:10px;}
    #notice-inner{
      padding:20px;
      > h3{margin:20px auto 10px; span{padding:0 5px;}}
      dl > *{padding:5px 10px !important;}
    }
  }
}
@media screen and (max-width:400px){#notice #notice-inner{padding:20px 10px;}}

/*
================================================================================================================
ボタン
================================================================================================================
*/
.btn-login,.btn-none,.btn-apply,.btn-link{
display:block;
font-family:ruika, sans-serif;
font-size:clamp(1rem, 0.818rem + 0.91vw, 1.5rem);/*24-16*/
text-align:center;
border:3px solid;
border-radius:40px;
padding:10px 0;
margin:0 auto;
transition:all .2s ease-in;}
.btn-none,.btn-apply,.btn-link{width:80%; max-width:500px; font-size:clamp(1.25rem, 1.023rem + 1.14vw, 1.875rem);/*30-20*/}
.btn-apply,.btn-link{padding:20px 0;}
@media screen and (max-width:640px){.btn-apply,.btn-link{padding:10px 0;}}

.btn-login{width:90%; max-width:300px; color:#0e58e9; background:#c6ff00; border-color:#0e58e9; box-shadow:0 5px 0 #4ccd12;}
.btn-login:hover{color:#fff; background:#0e58e9;}

.btn-none{color:#75acff; background:#1067ec; font-size:clamp(0.813rem, 0.767rem + 0.23vw, 0.938rem);/*15-13*/ pointer-events:none;}

.btn-apply{color:#0e58e9; background:#c6ff00; border-color:#fff; box-shadow:0 5px 0 #2142d1;}
.btn-apply.big{font-size:clamp(1.875rem, 1.648rem + 1.14vw, 2.5rem);/*40-30*/}
.btn-apply.none{color:#75acff; background:#1067ec; border-color:#75acff; box-shadow:none; pointer-events:none;}
.btn-apply:hover{color:#fff; background:#0e58e9;}

.btn-link{color:#0e58e9; background:#fff; box-shadow:0 5px 0 #c6ff00;}
.btn-link:hover{background:#c6ff00;}
#main-inner > .btn-link + .btn-link{margin-top:20px !important;}

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

.input-checkbox{
position:relative;
width:330px;
color:#2142d1;
background:#c6ff00;
font-size:22px;
font-family:ruika, sans-serif;
letter-spacing:2px;
border-radius:5px;
padding:10px 10px 10px 50px;
margin:20px auto 0;
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:calc(50% - 15px);
left:10px;
width:30px;
height:30px;
border:3px solid;
opacity:1;}

.input-checkbox label:after{
top:5px;
left:23px;
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{background:#fff;}
.input-checkbox input[type="checkbox"]:checked + label:after{border-color:#de0011;}

@media screen and (max-width:480px){
.input-checkbox{width:250px; font-size:18px; letter-spacing:0; padding:10px 10px 10px 40px; margin:40px auto 20px;}
.input-checkbox label:before{top:calc(50% - 12px); width:24px; height:24px;}
.input-checkbox label:after{top:3px;}}