#bg.flash::before{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image:url(/game/kimetsu/bslash/campaign/1/img/bg_light.jpg);
background-position:top center;
background-size:100% auto;
background-repeat:no-repeat;
mix-blend-mode:screen;
opacity:.9;
z-index:1;}
@media screen and (max-width:1600px){#bg.flash::before{background-position:top 2% center; background-size:110% auto;}}
@media screen and (max-width:980px){#bg.flash::before{background-position:top 3% center; background-size:150% auto;}}
@media screen and (max-width:800px){#bg.flash::before{background-position:top 2% center;}}
@media screen and (max-width:480px){#bg.flash::before{background-position:top 3% center;}}

/*応募ページ*/
#bg.flash.apply::before{background-position:top center !important; top:-8% !important;}
@media screen and (max-width:1600px){#bg.flash.apply::before{top:-4% !important;}}
@media screen and (max-width:1300px){#bg.flash.apply::before{top:8% !important;}}
@media screen and (max-width:800px){#bg.flash.apply::before{top:11% !important;}}
@media screen and (max-width:430px){#bg.flash.apply::before{top:14% !important;}}
@media screen and (max-width:380px){#bg.flash.apply::before{top:19% !important;}}

/*その他調整*/
@media screen and (min-width:1301px){#main-inner{padding-top:20px !important;}}
@media screen and (min-width:981px){#main-inner{padding-top:20px !important;}}
#main h2,.frame{max-width:1200px;}

/*メニュー調整*/
#menu-inner #menu,
#btn-toggle{display:none !important;}

.frame + .btn-link{margin-top:40px;}

/*
================================================================================================================
メイン
================================================================================================================
*/
/*
=========================
カード画像
=========================
*/
.card{width:35%; max-width:370px; margin:20px auto;}
@media screen and (max-width:640px){.card{width:40%; margin:10px auto;}}

.card > img{border-radius:20px;}
@media screen and (max-width:980px){.card > img{border-radius:10px;}}
@media screen and (max-width:480px){.card > img{border-radius:5px;}}

#top .card{filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px #fff); transform:rotate(-5deg);}
@media screen and (max-width:640px){#top .card{filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #fff);}}

/*
=========================
キャンペーンタイトル
=========================
*/
@media screen and (max-width:640px){#top .title{width:120%; margin-left:-10%;}}
@media screen and (max-width:480px){#top .title{width:140%; margin-left:-20%;}}

/*
=========================
日付
=========================
*/
.date{
  position:relative;
  width:calc(100% - 180px);
  max-width:700px !important;
  height:80px;
  color:#ffd1b8;
  background-image:url(/game/kimetsu/bslash/img/event/challenge/common/title_pat.png);
  background-size:auto 100%;
  background-repeat:repeat-x;
  font-family:"Yuji Syuku", serif;
  font-size:clamp(1rem, 0.773rem + 1.14vw, 1.625rem);/*26-16*/
  letter-spacing:-3px;
  margin:0 auto;
  &::before,&::after{display:block; content:""; position:absolute; top:0; width:80px; height:80px; background-size:100% 100%; z-index:2;}
  &::before{background-image:url(/game/kimetsu/bslash/img/event/challenge/common/title_left.png); left:-80px;}
  &::after{background-image:url(/game/kimetsu/bslash/img/event/challenge/common/title_right.png); right:-80px;}
  > p{
    display:flex;
    position:absolute;
    top:0;
    left:calc(50% - 50vw);
    width:100vw;
    height:100%;
    justify-content:center;
    align-items:center;
    z-index:3;
    span{letter-spacing:-1px;}
  }
}
@media screen and (max-width:540px){
.date > p{flex-direction:column; flex-wrap:wrap; text-align:center;}
.date > p span{display:block; width:100%;}
}
@media screen and (max-width:420px){
  .date{
    width:calc(100% - 120px); height:60px;
    &::before,&::after{width:60px; height:60px;}
    &::before{left:-60px;}
    &::after{right:-60px;}
  }
}

/*
================================================================================================================
応募方法
================================================================================================================
*/
#top + h2{margin-top:30px !important;}
@media screen and (max-width:480px){#top + h2{margin-top:10px !important;}}

/*番号*/
.step ul.num{display:flex; font-family:"Yuji Syuku", serif; align-items:center;}
.step ul.num > li:nth-child(1){width:10%;}
.step ul.num > li:nth-child(2){width:90%; color:#eaae23; font-size:clamp(1rem, 0.455rem + 2.73vw, 2.5rem); line-height:2.5rem; letter-spacing:-3px; padding-left:10px;}
.step .pic{margin-top:20px;}
.step ul.num > li > span.sml{font-size:20px;}

@media screen and (max-width:800px){
.step ul.num{align-items:flex-start;}
.step ul.num > li:nth-child(2){line-height:2rem; letter-spacing:-3px;}
.step ul.num > li > span.sml{font-size:18px;}}
@media screen and (max-width:640px){
.step ul.num > li:nth-child(1){width:15%;}
.step ul.num > li:nth-child(2){width:85%; line-height:1.5rem;}
.step ul.num > li > span.sml{font-size:14px;}}
@media screen and (max-width:480px){.step ul.num > li:nth-child(2){line-height:1.2rem; letter-spacing:-1px; padding-left:5px;}}

/*矢印*/
.step::after{
display:block;
content:"";
width:100%;
height:150px;
background-image:url(/game/kimetsu/bslash/lp/01/img/arrow.png);
background-position:center;
background-size:auto 80%;
background-repeat:no-repeat;
filter:drop-shadow(0 0 10px #000) drop-shadow(0 0 5px #000);
transform:translateZ(0);}
.step:nth-child(4)::after{display:none;}
@media screen and (max-width:800px){.step::after{background-size:20% auto;}}
@media screen and (max-width:480px){.step::after{height:100px; background-size:15% auto;}}
@media screen and (max-width:370px){.step::after{height:60px;}}

/*カード一覧*/
#ur{display:flex; flex-wrap:wrap; justify-content:center; margin:20px auto 0;}
#ur li{width:calc((100% / 6) - 10px); margin:5px;}
@media screen and (max-width:640px){#ur li{width:calc((100% / 4) - 10px);}}
@media screen and (max-width:480px){
#ur{margin:10px auto 0;}
#ur li{width:calc((100% / 3) - 5px); margin:5px 2.5px;}}

/*テキスト*/
.text{text-align:center;}
.text > strong{font-size:clamp(0.938rem, 0.778rem + 0.8vw, 1.375rem) !important; margin:5px auto 10px !important;}
.text > strong br{display:none;}
@media screen and (max-width:530px){
.text > strong br{display:block;}
.text > strong span{display:none;}}

/*注意事項*/
#notice{background:rgba(0,0,0,.7); padding:20px; margin:40px auto;}
#notice .list + .list{margin-top:30px;}
@media screen and (max-width:480px){#notice{padding:10px; margin:20px auto;}}
#notice > p{margin:20px 0px 0px;font-weight:bold;}
#notice > p.title{padding:5px;margin-bottom:20px;background:#fff;color:#ff683c;outline:4px solid #4c484b;}
#notice > a{color:#eaae23; text-decoration:underline;}
#notice > a:hover{text-decoration:none;}


/*ボタン*/
.btn-long{max-width:300px;}
@media screen and (max-width:480px){.btn-long{width:80% !important;}}

/*
================================================================================================================
ユーザー情報
================================================================================================================
*/
#user{
display:flex;
position:relative;
width:100%;
max-width:588px;
aspect-ratio:588/90;
color:#110e06;
background-image:url(/game/kimetsu/bslash/img/mypage/bg_user.png);
background-size:100% auto;
background-position:center;
background-repeat:no-repeat;
letter-spacing:-2px;
font-family:"Yuji Syuku", serif;
font-size:22px;
justify-content:center;
align-items:center;
margin:0 0 40px auto;}
#user ul li:nth-child(1)::before{content:"KONAMI ID：";}
#user ul li:nth-child(2)::before{content:"メモリーカード：";}
#user ul li + li{margin-top:5px;}
#user ul li.usercode.nodata span{font-size:clamp(0.75rem, 0.614rem + 0.68vw, 1.125rem);}
@media screen and (max-width:800px){#user{font-size:16px; margin:0 auto 20px;}}
@media screen and (max-width:640px){#user{background-size:150% auto; padding:10px 0;}}
@media screen and (max-width:480px){#user{font-size:14px;}}

/*
================================================================================================================
獲得CP
================================================================================================================
*/
#cp{
display:flex;
width:90%;
max-width:585px;
aspect-ratio:585/164;
color:#fff;
background-image:url(/game/kimetsu/bslash/campaign/1/img/bg_cp.png);
background-size:100% auto;
background-position:center;
background-repeat:no-repeat;
font-family:"Yuji Syuku", serif;
letter-spacing:-10px;
justify-content:center;
align-items:center;
padding:0 0 10px 0;
margin:0 auto;}
#cp p{color:#fff; font-size:clamp(2.5rem, 1.591rem + 4.55vw, 5rem);/*80-40*/ line-height:100%;}
#cp p.apply{color:#ffba1c;}
#cp p::before,
#cp p::after{display:inline-block; color:#fff; font-size:clamp(1.25rem, 0.568rem + 3.41vw, 3.125rem);/*50-20*/ letter-spacing:0; margin:5px;}
#cp p::before{content:"現在";}
#cp p::after{content:"CP";}
@media screen and (max-width:480px){#cp{letter-spacing:-5px; padding:0;}}

.done{pointer-events:none}

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

.input-checkbox{
position:relative;
width:260px;
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;}}

ul.list.number > li:first-child::before{content:"①";}
ul.list.number > li:nth-child(2)::before{content:"②";}
ul.list.number > li:nth-child(3)::before{content:"③";}

#notenough{color:#ffba1c; font-size:clamp(1rem, 0.818rem + 0.91vw, 1.5rem);/*24-16*/ line-height:2rem; text-align:center; margin:0 auto 20px;}
#notenough span{font-size:clamp(2.5rem, 1.591rem + 4.55vw, 3rem);/*80-40*/ line-height:100%;}
#notenough p{color:#ddd;}

#must-have{
width:80%;
max-width:200px;
color:#000;
background:#e1b23d;
font-family:"Yuji Syuku", serif;
font-size:clamp(1.5rem, 1.364rem + 0.68vw, 1.875rem);/*30-24*/
font-weight:bold;
letter-spacing:-2px;
text-align:center;
border-radius:30px;
border:2px solid;
padding:5px 0 10px;
margin:0 auto;}