@charset "utf-8";

/* common */
body { font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif; line-height: 1.5;}
img { width: 100%;}
ol li { list-style: none;}
#wrapper { overflow: hidden; width: 100%; margin: 0 auto; text-align: center; background: #fff;}
.modal-box { display: none;}
.modaal-container { background-color: transparent !important; box-shadow: none !important; top: -4vh;}
.modaal-content-container { position: relative; padding: 0 !important;}
.modal_close { display: block; position: absolute; right: 0; left: 0; width: 50.77%; margin: 0 auto; padding: 6.15% 0; cursor: pointer;}
.modal-note { overflow: scroll; overflow-x: hidden; position: relative; height: 70vh; padding: 6.15%; border-radius: 4vw; background-color: #fffcda; border: 4px solid #ffe537; color: #593627; word-break: break-all;}
.modal-note p, .modal-note ul { margin-top: 7.02%; font-size: 3.2vw;}
.modal-note strong { display: block; font-size: 4vw; text-align: center; border-bottom: 3px solid #ffe537; padding-bottom: 2%;}
.modal-note span { display: block; font-weight: bold; padding-bottom: 2%;}
.modal-note ul { padding-left: 5%;}
.modal-note ul li { list-style: disc;}
@media (orientation: landscape) { .modal-note { height: 77vh; padding: 4%;} .modal-note p, .modal-note ul { margin-top: 5%; font-size: 2.4vw;} .modal-note strong { font-size: 3.6vw;} .modal_close { width: 35%; padding: 4% 0;}}
.fade { transform: translateY(60px); opacity: 0.6; transition: transform 0.8s, opacity 1s;}
.fade.show { transform: translateY(0); opacity: 1;}
.toggledown a:nth-of-type(1) { display: block;}
.toggledown a:nth-of-type(2) { display: none;}
.toggledown.open a:nth-of-type(1) { display: none;}
.toggledown.open a:nth-of-type(2) { display: block;}

/* btn */
.btn_w { display: block; width: 86%; margin: 0 auto; position: relative; z-index: 30; animation: btnAnimation 3s infinite ease-in-out;}
@keyframes btnAnimation {
    0% { transform: scale(1);}
   10% { transform: scale(1);}
   15% { transform: scale(1.06);}
   20% { transform: scale(1);}
   25% { transform: scale(1.03);}
   30% { transform: scale(1);}
}
.delayAni { animation-delay: 1.5s;}
.btnAni_min { animation: btnAnimation 3s infinite ease-in-out; animation-delay: 0.7s;}

/* op */
.opFill { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #fffe62; z-index: 99;
animation: opFillAni 3.4s forwards ease-in-out;}
@keyframes opFillAni {
    0% { opacity: 1;}
   60% { opacity: 1; background-color: #ffffc1;}
  100% { opacity: 0; display: none; background-color: #fff;}
}
.opCard, .opLight { display: none;}
.opFill .opCard, .opFill .opLight { display: block;}
.opFill .opCard { position: absolute; top: calc(50% - 200px); left: 0; right: 0; margin: auto; z-index: 20; width: 88%;
animation: opCardAni 3s forwards ease-in-out;}
@keyframes opCardAni {
    0% { opacity: 0; transform: translateY(100%);}
   30% { opacity: 1; transform: translateY(0%);}
   50% { opacity: 1; transform: translateY(0%); filter: drop-shadow(0 0 20px #fff);}
   65% { opacity: 1; filter: drop-shadow(0 0 60px #fff);}
   85% { filter: drop-shadow(0 0 80px #fff);}
  100% { opacity: 0; display: none;}
}
.opFill .opCard .pic01 { display: block; perspective: 100rem; transform-origin: bottom; transform: rotateX(-80deg);
animation: opCardAni01 1s forwards ease-in;}
@keyframes opCardAni01 {
    0% { transform: rotateX(-80deg);}
  100% { transform: rotateX(0);}
}
.opFill .opCard .pic02 { display: block; perspective: 100rem; transform-origin: top; transform: rotateX(80deg);
animation: opCardAni02 1s forwards ease-out;}
@keyframes opCardAni02 {
    0% { filter: brightness(60%); transform: rotateX(80deg);}
   70% { filter: brightness(100%);}
  100% { filter: brightness(100%); transform: rotateX(0);}
}
.opFill .opLight { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%;
animation: opLightAni 3.5s forwards;}
@keyframes opLightAni {
    0% { opacity: 0;}
   30% { opacity: 0; width: 80%;}
   60% { opacity: 1; width: 220%;}
  100% { opacity: 0;}
}

/* header */
header { background: url(../img/header_bg.jpg) no-repeat top/contain; padding-bottom: 0.2%;}
header .inner { padding-top: 57.8%;}
.badge-btn { position: relative;}
.bb_badge { width: 28.2%; position: absolute; top: -12.5%; left: 2.5%; z-index: 90; animation: badgeAni 3s infinite ease-in-out;}
@keyframes badgeAni {
    0% { transform: translateY(0);}
   60% { transform: translateY(0);}
   65% { transform: translateY(-8%);}
   70% { transform: translateY(0);}
   75% { transform: translateY(-5%);}
   80% { transform: translateY(0);}
  100% { transform: translateY(0);}
}
header nav { margin-top: -6.5%;}
header nav ul { display: flex;}
header nav li { width: 25%; animation: btnWaves 8s infinite}
nav li:nth-of-type(1) { animation-delay: 3.5s;}
nav li:nth-of-type(2){ animation-delay: 3.7s;}
nav li:nth-of-type(3){ animation-delay: 3.9s;}
nav li:nth-of-type(4){ animation-delay: 4.1s;}
@keyframes btnWaves {
    0% { transform: translate(0, 0);}
    2% { transform: translate(0, -8px);}
    4% { transform: translate(0, 0);}
}
.header_lead { margin-top: -6%;}
.header_note { margin-top: -2.4%;}
/* ========== */ header.v2 { background-size: cover;} header.v2 nav { margin-top: -1%;} header.v2 .header_note { display: none;}

/* campaign */
#campaign { background: url(../img/bottom_bg.png) no-repeat bottom/contain, url(../img/cp_bg.png) #fffdc3 no-repeat top/contain; padding: 5.8% 0 4%;}
#campaign h1 { width: 78.8%; margin: 0 auto;}
.cp_img1 { width: 96.2%; margin: -0.5% auto 0;}
.cp_btn1 { margin-top: -8.5%; margin-bottom: 2%;}
.cp_img2 { width: 96.5%; margin: 0 auto 1%;}
.howto dt { width: 64%; margin: 0 auto;}
.howto dd { display: none;}
.howto dd img { width: 83.2%; margin: 2% auto 0;}
.cp_img3 .btn_w { margin-top: -13.5%;}

/* minigame */
#minigame { background: url(../img/game_bg.png) no-repeat top/cover;}
#minigame h1 { padding-top: 13.5%;}
#minigame .btn_w:nth-of-type(1) { margin-top: -2%;}
.game_cp { width: 93.6%; margin: -3% auto 4%;}
.modal_note_open { display: block; width: 48%; margin: 0.5% auto 0;}
#minigame.v2 { background: url(../img/new/game_bg_2.png) no-repeat top/cover;}
#minigame.v2 .game_cp { width: 93.6%; margin: 1.5% auto 4.5%;}

/* xcp */
#xcp { background: url(../img/xcp_bg.png) no-repeat top/cover; margin-top: -0.5%;}
#xcp h1 { width: 85.8%; margin: 0 auto; padding-top: 16%;}
.xcp_contents { width: 98.1%; margin: -1% auto 0; position: relative; z-index: 10;}
.xcp_how { width: 96.8%; margin: -1.5% auto 0; position: relative;}
.xcp_how a { position: absolute; width: 34.8%; top: 19.2%; right: 8.5%;}
#xcp .btn_w { margin-bottom: 2%;}

/* tsum */
#tsum { background: url(../img/tsum_bg.png) no-repeat top/cover; margin-top: -6%; position: relative; z-index: 10;}
#tsum ul { padding-top: 24.1%;}
.tsum_btn { background: url(../img/bottom_bg.png) no-repeat bottom/contain; padding: 2% 0 5%;}

/* event */
#event { background: url(../img/event_bg.png) no-repeat top/contain, url(../img/bg.gif) repeat-y top/cover;}
#event dl { position: relative; padding-top: 18%; z-index: 10;}
#event dt { position: absolute; top: -2.6%; z-index: 10;}

/* footer */
footer { position: relative; background: url(../img/footer_bg.png) no-repeat bottom/cover, url(../img/bg.gif) repeat-y top/cover;}
#message { padding-bottom: 2.5%;}
#message .btn_w { margin-top: -8%;}
.sns_info { padding: 0 0 4%;}
.sns_info p { width: 61.2%; margin: 0 auto 2.5%;}
.sns_info li { width: 12%;}
footer ul { font-size: 3.47vw; text-align: center;}
footer ul li { display: inline-block; padding: 0 2%;}
footer .link { padding: 2.5% 0 1.5%;}
footer .link a { color: #813802; font-weight: bold;}
.spec { width: 89.4%; margin: 0 auto;}
.pagetop { position: absolute; right: 2.5%; bottom: 9%; width: 13.2%;}
small { background: url(../img/copyrights.png) no-repeat top/cover; display: block; height: 0; padding-top: 11%; overflow: hidden;}