/* container */
.container{width: 90%; margin: 0 auto;}

/* fix bg */
.fix_bg{position: fixed; background-image: url(../images/bg/bg.svg);background-position: bottom;background-repeat: repeat;background-size: cover;width: 100%;height: calc(100% - 30px);top: 30px;left: 0;opacity: 1;z-index: -1;pointer-events: none;
    .deco{position: absolute;
        &.b_01{width: min(500px,32vw);top: 0;right: 0;}
        &.b_02{width: min(270px, 18vw);top: 0;left: 0;}
        &.b_03{width: min(575px, 40vw);bottom: 0; left: 0;}
        &.b_04{width: min(1340px, 94%);bottom: 12px; left: 0; animation: train-run 12s linear infinite;
            img{width: 100%; height: auto;/*animation: train-shake 0.4s ease-in-out infinite;*/}
        }
    }
}
@keyframes train-run {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(calc(100vw + 100%)); }
}
@keyframes train-shake {
  0%   { transform: translateY(0px)    rotate(0deg); }
  10%  { transform: translateY(-1.5px) rotate(-0.15deg); }
  20%  { transform: translateY(1px)    rotate(0.1deg); }
  30%  { transform: translateY(-2px)   rotate(0.2deg); }
  40%  { transform: translateY(0.5px)  rotate(-0.1deg); }
  50%  { transform: translateY(-1px)   rotate(0.15deg); }
  60%  { transform: translateY(2px)    rotate(-0.2deg); }
  70%  { transform: translateY(-0.5px) rotate(0.1deg); }
  80%  { transform: translateY(1.5px)  rotate(0.15deg); }
  90%  { transform: translateY(-1px)   rotate(-0.1deg); }
  100% { transform: translateY(0px)    rotate(0deg); }
}


/* sec tit */
.sec_tit{font-family: var(--f_01);font-family: var(--f_01);display: flex;flex-direction: column; margin-bottom: min(40px);
    .top{font-size: min(80px,5vw);line-height: 1em;}
    .bottom{font-size: min(18px,1.5vw);font-weight: 700;line-height: 1.5em;}
}
@media only screen and (max-width: 835px){
    .sec_tit{
        .top{font-size: 12vw;line-height: 1.2em;}
        .bottom{font-size: 3.3vw;font-weight: 500;}
    }
}

/* swiper */
.swiper_controller{
    .swiper-button-prev,
    .swiper-button-next{position: absolute; transform: translateY(-50%); margin: 0; width: 0; height: 0; background: none;
        &::after{display: none;}
    }
    .swiper-button-prev{left: calc(2vw - min(9px, 1.9vw)); border-top: min(16px, 2.5vw) solid transparent; border-bottom: min(16px, 2.5vw) solid transparent; border-right: min(18px, 3.8vw) solid #002A4C; transition: opacity 0.3s;}
    .swiper-button-next{right: calc(2vw - min(9px, 1.9vw)); border-top: min(16px, 2.5vw) solid transparent; border-bottom: min(16px, 2.5vw) solid transparent; border-left: min(18px, 3.8vw) solid #002A4C; transition: opacity 0.3s;}
    .swiper-button-disabled{opacity: 0; pointer-events: none;}
    .swiper-pagination{display: none;}
}
@media only screen and (max-width: 835px){
    .swiper_controller{
        .swiper-button-prev{left: 2.8vw;}
        .swiper-button-next{right: 2.8vw;}
    }
}


/* scroll in */
[data-scroll="reveal"] {opacity: 0; transform: translateY(40px); transition: 1s ease;
    &.scroll_in{opacity: 1; transform: translateY(0);}
}



/* 上部 */
.fix_top{position: fixed;width: 100%;background-color: #002A4C;display: flex;gap: 0 12px;z-index: 100; pointer-events: none;
    p{margin: 0; color: #fff; white-space: nowrap; animation: hor_move_l 60s linear infinite; line-height: 30px; font-family: var(--f_02);}
}
@media only screen and (max-width: 835px){
    .fix_top{
        p{line-height: 24px;}
    }
}


/* 左 */
@media only screen and (min-width: 835px){
    .left_main{position: fixed;width: 30%;height: 100%;top: 30px;left: 0;
        header{
            .menu_tit{position: absolute;margin: 0;font-family: var(--f_01);font-size: min(34px, 1.8vw,4vh);line-height: 1.5em;width: 80%;color: #F62E36;background-color: #E9E9E9;border: 2px solid var(--c_key01);border-radius: 50px;top: max(-22px, -1.4vw, -4vh);left: 50%;transform: translateX(-50%);}
            #global_nav{position: absolute;top: 46%;left: 50%;transform: translate(-50%, -50%);display: block;width: min(300px,70%);height: initial;background-color: #fff;padding: min(46px,4vw,5vh) min(20px,2vw); border: 2px solid var(--c_key01); border-radius: 8px;
                &:before{display: none;}
                .nav_links{flex-direction: column;justify-content: center;gap: min(16px,1vw,2.4vh) 0;
                    li{
                        .nav_link{text-align: center;font-family: var(--f_01);font-size: min(24px, 1.8vw, 3.5vh);font-weight: 400; padding: 0; letter-spacing:0; transition: 0.2s;
                            &.active,
                            &:hover{color: #31a5df;}
                            span{display: block; font-size: 0.5em;line-height: 1em; font-weight: 500;}
                        }
                    }
                }
                .deco{position: absolute; background-color: #002a4c; width: 20px; height: 50px; border-radius: 4px 0 0 4px; left: -20px; transform: translateY(-50%);
                    &:after{position: absolute; content: "";background-color: #002a4c; width: 400vw;height: 4px;right: 0;top: 50%;transform: translateY(-50%);}
                    &.d_01{top: 20%;}
                    &.d_02{top: 80%;}
                }
            }
        }
    }
}

/* 右 */
.right_main{position: fixed;width: 30%;height: 100%;top: 30px;right: 0;
    .tit_box{position: absolute; width: 80%; top: 46%; left: 50%; transform: translate(-50%,-50%);
        .pc_tit{margin-bottom: 2vw;
            img{width: 50vh;}
        }
        .bnr_list{}
    }
    .fix_bnr{position: absolute;width: min(250px,60%);top: 84%;left: 72%;transform: translate(-50%,-50%); transition: 0.2s;
        &:hover{filter: brightness(1.1);}
        img{width: 27vh;animation: hor_swing 2.8s linear infinite;animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);}
    }
}
@media only screen and (max-width: 835px){
    .right_main{width: 0; z-index: 100;
        .pc_tit{display: none;}
        .fix_bnr{position: fixed;width: 38vw;top: initial;left: initial;transform: initial;bottom: -3vw;right: -8vw;
            img{width: 100%;}
        }
    }
}


/* 真ん中 */
.center_main{position: relative;width: min(760px,40%);background-color: #fff;margin: 0 auto;padding-top: 30px;z-index: 10;overflow: clip;filter: brightness(1) drop-shadow(0px 4px 11px #00000085);
    &:before,
    &:after{position: fixed;content: "";background-position: center;background-repeat: no-repeat;background-size: 50%;background-attachment: fixed;width: 100%;height: 100%;top: 0;left: 0;opacity: 1;z-index: -2;pointer-events: none;}
    &:before{background-image: url(../images/bg/bg_center.webp); z-index: -1; opacity: 0.7;}
    &:after{background-image: url(../images/bg/bg_center_back.png); z-index: -2;}
}
@media only screen and (max-width: 835px){
    .center_main{width: 100%;padding-top: 24px;filter: inherit;
        &:before,
        &:after{background-attachment: inherit;background-size: cover;}
    }
}

.fv{width: 86%; margin: 0 auto; padding-top: 20px;padding-bottom: min(200px,12vw);
    .main_tit{width: 100%;margin: 0 auto 1.5vw;}
    .catch{margin-bottom: 2vw; -webkit-text-stroke: 3px #003D70E5;filter: drop-shadow(0px 3px 0px #003D70E5);font-weight: 900;color: #fff;font-size: min(44px,2.6vw);paint-order: stroke fill;line-height: 1.5em;
        .big{font-size: 1.2em;line-height: 1.5em;}
    }
    .sub_img{margin-bottom: 1vw;border-radius: 10px;overflow: hidden;}
    .txt{font-size: min(20px,1.3vw);font-weight: bold;line-height: 1.4em;margin-bottom: 2em;
        span{display: inline-block;}
    }
    .s_logo{width: 70%; margin: 0 auto;}
    img{width: 100%; height: auto;}
}
@media only screen and (max-width: 835px){
    .fv{width: 90%;padding-bottom: 26vw;
         .main_tit{margin: 0 auto 4.2vw;}
        .catch{margin-bottom: 4vw; font-size: 7vw;}
        .sub_img{margin-bottom: 3vw;}
        .txt{font-size: 3.4vw;}
    }
}

.story{position: relative; z-index: 10; padding-bottom: 60px;
    &:before,
    &:after{position: absolute; content: ""; background-position: top center; background-size: cover; background-repeat: no-repeat; width: 100%;height: 100%;z-index: -1;top: 0;left: 0;}
    &:before{background-image: url(../images/bg/story_01.webp);}
    &:after{background-image: url(../images/bg/story_02.webp); z-index: -2; top: -20%;}
    .story_area{text-align: left;
        .tit{display: inline-flex;flex-direction: column;align-items: flex-start;font-family: var(--f_01);letter-spacing: 0.1em;-webkit-text-stroke: 3px #003D70E5;filter: drop-shadow(0px 3px 0px #003D70E5);margin-bottom: min(40px);paint-order: stroke fill;
            .top{font-size: min(104px,8vw);font-weight: 900;color: #fff;line-height: 1.1em;}
            .bottom{font-size: min(24px,1.8vw);font-weight: 900;color: #fff;letter-spacing: 2px;}
        }
        p{font-size: min(20px,1.2vw); font-weight: 700;
            span{background-color: #fff; padding: .2vw .5vw; display: inline-block;margin-bottom: 0.5vw;line-height: 1.2em;}
            strong{font-size: 1.9em;line-height: 1em;}
        }
    }
}
@media only screen and (max-width: 835px){
    .story{
        .story_area{
            .tit{
                .top{font-size: 18vw;}
                .bottom{font-size: 4vw;}
            }
            p{font-size: 3.2vw;
                span{margin-bottom: 1.2vw;}
            }
        }
    }
}

.txt_anime{display: flex;gap: 0 2em;
    p{font-family: var(--f_01);margin: 0;white-space: nowrap;font-size: min(160px,12vw);line-height:0.9em;color: #0BCFDD4D;-webkit-text-stroke: 1px #002A4C;animation: hor_move_l 40s linear infinite;}
}
@media only screen and (max-width: 835px){
    .txt_anime{
        p{font-size: 20vw;}
    }
}

.how_to_play{position: relative; padding: min(60px,10vw) 0 min(200px,10vw);
    .center_box{position: relative; background-color: #fff;padding: min(60px,12vw) 0;border-top: 2px solid #002A4C;border-bottom: 2px solid #002A4C;
        &:before,
        &:after{position: absolute; content: ""; background-image: url(../images/howto/fream.svg); background-position: center; background-size: auto; background-repeat: repeat-x; width: 100%; height: 18px; left: 0; pointer-events: none;}
        &:before{top: 0;}
        &:after{bottom: 0;transform: scale(1, -1);}
        .swiper-container{position: relative;
            .swiper-wrapper{
                .swiper-slide{padding: 0 4vw;
                    .slide_inner{
                        .slide_img{position: relative; margin-bottom: min(20px, 2vw);
                            .slide_num{position: absolute; font-family: var(--f_02);font-size: min(30px, 2vw);font-weight: bold;background-color: #fff;border: 2px solid;padding: 0.1em 0.7em 0.2em;border-radius: 50px;top: 0.4em;left: 0.4em;line-height: 1em;z-index: 1;}
                            .slide_label{position: absolute;z-index: 1;display: block;bottom: max(-10px, -0.5vw);right: max(-24px, -1.8vw);width: min(160px, 12vw);}
                            img{width: 100%; height: auto;}
                        }
                        .slide_txt{font-size: min(20px, 2vw);margin: 0;font-weight: 700;line-height: 1.5em;}
                    }
                }
            }
        }
    }
    .bg_box{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;pointer-events: none;
        .bg{position: absolute;background-position: top;background-repeat: no-repeat;background-size: contain;
            &.left{background-image: url(../images/howto/01.svg);width: 20%;height: 18%;top: 13%; left: 0;}
            &.right{background-image: url(../images/howto/02.svg);width: 25%;height: 15%;top: 18%;right: 0;}
            &.bottom{background-image: url(../images/howto/03.svg);background-position: center;width: 100%;height: min(200px,10vw);bottom: 0;right: 0;}
        }
    }
}
@media only screen and (max-width: 835px){
    .how_to_play{padding: min(60px,10vw) 0 25vw;
        .center_box{
            &:before,
            &:after{background-size: 100%;height: 2.4vw;}
            .swiper-container{
                .swiper-wrapper{
                    .swiper-slide{padding: 0 10vw;
                        .slide_inner{
                            .slide_img{margin-bottom: 4vw;
                                .slide_num{font-size: 6.4vw;}
                                .slide_label{width: 26vw;right: -4vw;bottom: -1vw;}
                            }
                            .slide_txt{font-size: 3.6vw;}
                        }
                    }
                }
            }
        }
        .bg_box{
            .bg{
                &.bottom{height: 26vw;}
            }
        }
    }
}

.event{position: relative; background-color: #65CCFF; padding: 100px 0;border-radius: 40px 40px 0 0;margin-bottom: -40px;}
@media only screen and (max-width: 835px){
    .event{padding: 12vw 0;}
}

.block{margin-bottom: 40px; position: relative; z-index: 1;
    .stit{background-color: #fff; letter-spacing: 0.2em;font-size: min(20px,1.6vw);font-weight: 700;padding: 0.6em;border-radius: 8px;margin-bottom: 2em;}
    .date{font-size: min(34px,2vw);font-weight: 900;
        span{font-size: 1.6em;line-height: 1em;}
        &.strong{font-size: min(3.4em,3.6vw);margin-bottom: .5em;}
    }
    .date_note{margin-bottom: 2em;}
    strong{font-size: min(1.5em,2vw);line-height: 1.5em;
        .note{font-size: 0.8em;line-height: 1.5em;}
        &.price{font-size: 2em;font-weight: 700;
            .p_small{font-size: 0.6em;}
            .p_note{font-size: 0.4em;font-weight: 500;}
        }
    }
    .small{font-size: 0.9em;line-height: 1.5em;}
    figure{margin-bottom: 20px;
        img{height: min(140px, 10vw);}
    }
    .tag{border: 1px solid;border-radius: 4px;font-size: 0.8em;line-height: 1.5em;padding: 0.7em 2.4em;display: inline-block;transform: translateY(-6px);margin-right: 0.8em;}
    .accordion_box{display: flex;flex-direction: column;gap: 10px; margin-bottom: 40px;
        .accordion_item{border-radius: 8px;overflow: hidden;
            .accordion_trigger{width: 100%;display: flex;align-items: center;justify-content: center;padding: 0.9em 3em;position: relative;background: #DFF9FF;border: none;cursor: pointer;font-size: min(20px,2vw);font-weight: 700;letter-spacing: 0.05em;color: #002A4C;
                .accordion_name{text-align: center;}
                .accordion_chevron{position: absolute;right: 1.2em;top: 50%;transform: translateY(-50%);width: 1em;height: 1em;display: flex;align-items: center;justify-content: center;
                    &::before{content: '';display: block;width: 0.45em;height: 0.45em;border-right: 2px solid #002A4C;border-bottom: 2px solid #002A4C;transform: rotate(45deg) translateY(-25%);transition: transform 0.3s;}
                }
                &.accordion_active .accordion_chevron::before{transform: rotate(-135deg) translateY(25%);}
            }
            .accordion_content{display: none;overflow: hidden;
                .accordion_detail{padding: 1em 1.5em 1.5em;background: #DFF9FF; text-align: left;
                    .accordion_info{margin: 0 0 1em;
                        .accordion_info_row{display: flex;align-items: flex-start;margin-bottom: 0.6em;
                            dt{border: 1px solid #002A4C;border-radius: 3px;font-size: min(14px,1.3vw);padding: 0.8em 0;width: 8em;white-space: nowrap;margin-right: 1em;flex-shrink: 0;line-height: 1.8; text-align: center;}
                            dd{font-size: 1em;line-height: 1.5em;text-align: left; width: calc(100% - 8em);}
                        }
                    }
                    .accordion_sns{display: flex;gap: 0.6em;justify-content: center;
                        a{display: block;width: 2.2em;
                            img{width: 100%; height: auto;}
                        }
                    }
                }
            }
        }
    }
    .metoro_24{background-color: #38B8F8; padding: min(80px,6vw) min(40px,2vw) min(40px,2vw); border-radius: 16px; position: relative;
        &:before,
        &:after{position: absolute; content: ""; background-position: center; background-repeat: no-repeat; background-size: contain;}
        &:before{background-image: url(../images/store/01.webp);width: min(180px, 10vw);height: min(170px, 12vw);top: max(-40px, -3vw);right: max(-30px, -2vw);animation: hor_swing 2.4s linear infinite;animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);}
        &:after{background-image: url(../images/store/02.webp);width: min(80px, 5vw);height: min(80px, 5vw);bottom: max(-30px, -3vw);left: max(-28px, -2vw);animation: hor_swing 2.6s linear infinite;animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);}
        .tit{margin-bottom: 1em;color: #fff;font-size: min(40px,2.4vw);font-weight: 900;line-height: 1.3em; position: relative;
            span{letter-spacing: 0.1em;-webkit-text-stroke: 3px #003D70E5;filter: drop-shadow(0px 3px 0px #003D70E5);paint-order: stroke fill;}
            .small{font-size: 0.9em;line-height: 1.5em;display: inline-block;}
            &:before{position: absolute; content: ""; background-image: url(../images/store/05.webp); background-position: center; background-size: contain; background-repeat: no-repeat;width: 40px;height: 40px;top: -40px;left: 50%;transform: translateX(-50%);}
        }
        .metoro_info{margin-bottom: 1.2em;
            .metoro_info_row{display: flex;align-items: center;margin-bottom: 0.6em;
                dt{border-radius: 3px;font-size: min(14px,1.2vw);padding: 0.8em 0;width: 8em;text-align: center;white-space: nowrap;margin-right: 1em;flex-shrink: 0;line-height: 1;background-color: #fff;font-weight: 700;color: #002A4C;letter-spacing: 0.1em;}
                dd{font-size: 1.2em;font-weight: 700;line-height: 1.5em;color: #002A4C;}
            }
        }
        .metoro_note{font-size: 0.85em;line-height: 1.7em;color: #002A4C; text-align: left;}
    }
    .bg{position: absolute; background-position: center; background-repeat: no-repeat; background-size: contain;
        &.b_01{background-image: url(../images/event/01.webp);width: min(160px, 10vw);height: min(140px, 9vw);left: max(-40px, -2vw);top: max(-100px, -6vw);animation: hor_swing 2.2s linear infinite;animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);}
        &.b_02{background-image: url(../images/event/02.webp);width: min(160px, 10vw);height: min(140px, 9vw);right: max(-40px, -2vw);bottom: max(-30px, -2vw); z-index: -1;animation: hor_swing 2.6s linear infinite;animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);}
        &.b_03{background-image: url(../images/event/03.webp);width: min(120px, 8vw);height: min(180px, 12vw);left: max(-38px, -2vw);top: max(-30px, -2vw);animation: hor_swing 2.8s linear infinite;animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);}

        &.b_04{background-image: url(../images/store/03.webp);width: min(160px, 10vw);height: min(140px, 9vw);right: max(-60px, -3vw);top: max(-20px, -6vw);animation: hor_swing 2.4s linear infinite;animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);}
        &.b_05{background-image: url(../images/store/04.webp);width: min(120px, 6vw);height: min(90px, 7vw);left: max(-40px, -2vw);top: max(-60px, -4vw);animation: hor_swing 2.6s linear infinite;animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);}
    }
}
@media only screen and (max-width: 835px){
    .block{
        .stit{font-size: 4vw;}
        .date{font-size: 5vw;
            &.strong{font-size: 8.6vw;}
        }
        strong{font-size: 5vw;
            &.price{}
        }
        figure{
            img{height: 20vw;}
        }
        .accordion_box{margin-bottom: 12vw;gap: 1.2vw 0;
            .accordion_item {
                .accordion_trigger{font-size: 3.4vw;}
                .accordion_content{
                    .accordion_detail{
                        .accordion_info{
                            .accordion_info_row{flex-direction: column;align-items: baseline;gap: 1vw 0;
                                dt{font-size: 3vw;padding: 0.4em 0;width: 7em;}
                                dd{width: 100%;}
                            }
                        }
                    }
                }
            }
        }
        .metoro_24{padding: 16vw 6vw 6vw;
            &:before{width: 24vw;height: 24vw;top: -6vw;right: -2vw;}
            &:after{width: 12vw;height: 12vw;bottom: -5vw;left: -2vw;}
            .tit{font-size: 6vw;
                &:before{width: 30px;height: 30px;top: -34px;}
            }
            .metoro_info{
                .metoro_info_row{
                    dt{font-size: 3vw;}
                    dd{}
                }
            }
        }
        .bg{
            &.b_01{width: 20vw;height: 20vw;left: -6vw;top: -12vw;}
            &.b_02{width: 22vw;height: 20vw;right: -2vw;bottom: -2vw;}
            &.b_03{width: 16vw;height: 24vw;left: -5vw;top: -2vw;}
            &.b_04{width: 14vw;height: 20vw;right: -3vw;top: -6vw;}
            &.b_05{width: 12vw;height: 12vw;left: -2vw;top: -4vw;}
        }
    }
}

.store{position: relative; background-color: #8DDBFF; padding: 100px 0 20px;border-radius: 40px;}
@media only screen and (max-width: 835px){
    .store{padding: 12vw 0 2vw;}
}

.notice{padding: 120px 0 60px;margin-top: -40px;background-color: #FFFFFF80;border-radius: 0 0 40px 40px;position: relative;z-index: -1;
    .notice_block{margin-bottom: 2.5em; text-align: left;
        &:last-child{margin-bottom: 0;}
        .notice_heading{font-size: 1.05em;font-weight: 700;padding-bottom: 0.6em;border-bottom: 1px solid #002A4C;margin-bottom: 1em;
            &::before{content: '■';margin-right: 0.4em;}
        }
        .notice_list{list-style: none;padding: 0;margin: 0;
            li{font-size: 0.9em;line-height: 1.9em;padding-left: 1em;text-indent: -1em;
                &::before{content: '・';}
            }
        }
    }
    .bg{position: absolute; background-position: center; background-repeat: no-repeat; background-size: contain;
        &.b_01{background-image: url(../images/notice/03.svg);top: 40px;left: 0;width: 100%;height: min(215px,11.2vw);}
    }
}
@media only screen and (max-width: 835px){
    .notice{padding: calc(40px + 12vw) 0 12vw;
        .bg{
            &.b_01{height: 28vw;}
        }
    }
}

.sample_nazo{padding: min(120px,8vw) 0; position: relative;
    .bg{position: absolute; background-position: center; background-repeat: no-repeat; background-size: contain;
        &.b_01{background-image: url(../images/sample_nazo/d_01.svg);bottom: max(-70px, -1vw);left: 0;width: min(40px, 2.7vw);height: min(420px, 29vw);z-index: -1;}
        &.b_02{background-image: url(../images/sample_nazo/d_02.svg);top: min(357px, 23vw);right: 0;width: min(100px, 7vw);height: min(620px, 43vw);z-index: -1;}
    }
    .swiper-container{position: relative; padding-bottom: 30px;margin-bottom: 50px;
        .swiper-wrapper{
            .swiper-slide{padding: 0 4vw;
                .slide_inner{
                    .slide_img{border: 8px solid #fff;
                        img{width: 100%; height: auto; display: block;}
                    }
                }
            }
        }
        .swiper_controller{position: absolute; top: 0; left: 0; right: 0; bottom: -10px; pointer-events: none; z-index: 10;
            .swiper-button-prev,
            .swiper-button-next{pointer-events: all;}
            .swiper-pagination{display: flex; justify-content: center; align-items: center; gap: 8px; pointer-events: all; position: absolute; bottom: -10px; left: 0; right: 0; height: 40px;
                .swiper-pagination-bullet{width: 14px; height: 14px; background: transparent; border: 1px solid #002A4C; border-radius: 50%; opacity: 1;}
                .swiper-pagination-bullet-active{background: #002A4C;}
            }
        }
    }
    .nazo_form{padding: 0 4vw; margin-top: 20px; display: flex; flex-direction: column; gap: 12px;
        .nazo_input{width: 100%;padding: 1.2em;font-size: 18px;background-color: #fff;border: 1px solid #002A4C;outline: none;text-align: center;color: #002A4C;
            &::placeholder{color: #888;}
            &:disabled{background-color: #D9D9D9;}
        }
        .nazo_submit{width: 100%;padding: 1.4em;font-size: 1em;font-weight: 700;color: #002A4C;background-color: #fff;border: 1px solid #002A4C;border-radius: 50px;cursor: pointer;letter-spacing: 0.1em;filter: drop-shadow(0px 4px 0px #002A4C); transition: 0.2s;
            &:disabled{cursor: not-allowed; color: #ccc; pointer-events: none;}
            &:hover{transform: translateY(4px); background-color: #002A4C; color: #fff; filter: drop-shadow(0px 0px 0px #002A4C);}
        }
        .nazo_close_btn{width: 100%;padding: 1.4em;font-size: 1em;font-weight: 700;color: #002A4C;background-color: #fff;border: 1px solid #002A4C;border-radius: 50px;cursor: pointer;letter-spacing: 0.1em;filter: drop-shadow(0px 4px 0px #002A4C);}
    }
    .nazo_swiper_area{position: relative;}
}
.nazo_result_overlay{display: none;position: fixed;inset: 0;background-color: rgba(0,42,76,0.9);z-index: 10;flex-direction: column;align-items: center;justify-content: center;gap: 12px;padding: 20px;
    &.visible{display: flex;}
    .result_panel{display: none;flex-direction: column;align-items: center;gap: 0;width: 100%; position: relative;
        &.active{display: flex;}
    }
    .result_anim_img{width: min(100px,6vw);height: auto;position: absolute;left: 60%;top: -9%;transform: translateX(-50%);z-index: -1;
        &.seikai{top: max(-40px, -2.4vw);left: 50%;}
    }
    .result_heading{font-size: min(80px,6vw);font-weight: 900;color: #fff;letter-spacing: 0.05em;line-height: 1.2;margin-bottom: 0.5em;}
    .result_icon_img{width: min(140px,12vw);height: auto;}
    .result_action_btn{background-color: #F5C400;color: #002A4C;font-weight: 700;font-size: clamp(14px,3.5vw,17px);padding: 1em 2em;border: none;border-radius: 4px;cursor: pointer;letter-spacing: 0.05em;width: min(300px,80%);margin-bottom: min(60px, 6vw); transition: 0.2s;
        &:hover{filter: brightness(1.1);}
    }

    .result_share_btn_outer{margin-bottom: min(60px, 6vw); display: flex; gap: 5%; font-weight: 700;justify-content: center;
    .result_share_btn{background-color: #fff;position: relative;display: inline-block;margin: 0 auto;padding: .2em;height: auto;width: auto;min-width: min(340px, 100%);border: 1px solid #000;border-radius: 50px;line-height: 1.4em;color: #000;font-size: 14px;text-align: center; transition: 0.2s;
         span{position: relative; display: grid; place-items: center; width: calc(100% - 0px); height: calc(100% - 0px); padding: .5em 1.2em;}
        &::before{content: ''; background-image: url(../images/sample_nazo/paper_plane.svg); position: absolute; bottom:min(7px, 1vw); right: 0; aspect-ratio:138/ 150; background-repeat: no-repeat; width: min(40px, 10vw);}
        &:hover{background-color: #000; color: #fff;}
    }

    .btn_close{ background-color: #fff;position: relative;display: inline-block;margin: 0 auto;padding: .2em;height: auto;width: auto;min-width: min(340px, 100%);border: 1px solid #000;border-radius: 50px;line-height: 1.4em;color: #000;font-size: 14px;text-align: center;
        span{position: relative;display: grid;place-items: center;width: calc(100% - 0px);height: calc(100% - 0px);padding: .5em 1.2em;}
    }
    }
    .btn_close{background-color: #fff;width: min(340px, 80%);font-weight: 700;padding: 1em;border-radius: 50px; cursor: pointer; transition: 0.2s;
        &:hover{background-color: #000; color: #fff;}
    }
}
@media only screen and (max-width: 835px){
    .sample_nazo{padding: 12vw 0 20vw;
        .bg{
            &.b_01{width: 6vw;height: 67vw;bottom: -23vw;}
            &.b_02{width: 18vw;height: 111vw;top: 67vw;}
        }
        .swiper-container{padding-bottom: 8vw;margin-bottom: 8vw;
            .swiper-wrapper{
                .swiper-slide{padding: 0 10vw;}
            }
            .swiper_controller{
                .swiper-pagination{bottom: -4px;
                    .swiper-pagination-bullet{}
                }
            }
        }
        .nazo_form {
            .nazo_submit{font-size: 4vw;}
        }
    }
    .nazo_result_overlay{
        .result_heading{font-size: 15vw;}
        .result_icon_img{width: 25vw;}
        .result_anim_img{width: 10vw;top: -5%;left: 74%;transform: inherit;
            &.seikai{top: -5vw;left: 50%;transform: translateX(-50%);width: 15vw;}
        }
    }
}

.faq{position: relative; margin-bottom: min(120px,8vw);
    .faq_item{background: #fff; border-radius: 8px; margin-bottom: 12px; overflow: hidden;
        &:last-child{margin-bottom: 0;}
        .faq_trigger{width: 100%; display: flex; align-items: baseline; padding: min(20px,1.5vw); background: transparent; border: none; cursor: pointer; gap: 0.8em; text-align: left;
            .faq_badge{width: 2em; height: 2em; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-weight: 900; font-size: 1em; color: #fff; flex-shrink: 0; line-height: 1;}
            .q_badge{background-color: #0084FF;}
            .faq_question{flex: 1; font-size: min(18px,1.5vw); font-weight: 700; line-height: 1.5em; color: #002A4C;}
            .accordion_chevron{flex-shrink: 0; width: 1em; height: 1em; display: flex; align-items: center; justify-content: center;
                &::before{content: ''; display: block; width: 0.45em; height: 0.45em; border-right: 2px solid #002A4C; border-bottom: 2px solid #002A4C; transform: rotate(45deg) translateY(-25%); transition: transform 0.3s;}
            }
            &.accordion_active .accordion_chevron::before{transform: rotate(-135deg) translateY(25%);}
        }
        .faq_content{display: none; overflow: hidden;
            .faq_answer{display: flex; align-items: flex-start; gap: 0.8em; padding: 0 20px 20px;text-align: left;
                .faq_badge{width: 2em; height: 2em; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-weight: 900; font-size: 1em; color: #fff; flex-shrink: 0; line-height: 1; margin-top: 0.1em;}
                .a_badge{background-color: #EA0029;}
                .faq_answer_txt{flex: 1; font-size: 1em; line-height: 1.5em; color: #002A4C; margin: 0;}
            }
        }
    }
    .bg{position: absolute; background-position: center; background-repeat: no-repeat; background-size: contain;
        &.b_01{background-image: url(../images/faq/01.svg);bottom: max(-370px, -17.3vw);left: 0;width: min(100px, 6vw);height: min(480px, 29vw);z-index: -1;}
        &.b_02{background-image: url(../images/faq/02.svg);top: min(350px, 35vw);right: 0;width: min(100px, 6vw);height: min(410px, 25vw);z-index: -1;}
    }
}
@media only screen and (max-width: 835px){
    .faq{margin-bottom: 20vw;
        .faq_item{margin-bottom: 2vw;
            .faq_trigger{padding: 4vw;
                .faq_question{font-size: 3.4vw;}
            }
            .faq_content{
                .faq_answer{padding: 0 4vw 4vw;}
            }
        }
        .bg{
            &.b_01{width: 14vw;height: 69vw;bottom: -60vw;}
            &.b_02{width: 14vw;height: 58vw;top: 93vw;}
        }
    }
}

.contact{padding: 0 0 min(100px,8vw);
    .contact_item{background: #fff; border-radius: 16px; padding: min(40px,3vw); margin-bottom: 16px; text-align: center;
        &:last-child{margin-bottom: 0;}
        .contact_logos{display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 30px;
            img{height: min(40px,3vw); width: auto;}
        }
        .contact_desc{color: #002A4C; margin-bottom: 16px; line-height: 1.5em;font-weight: 700;}
        .contact_btn{display: block;width: min(400px,100%);margin: 0 auto;padding: 1.4em;font-size: 1em;font-weight: 700;color: #002A4C;background-color: #fff;border: 1px solid #002A4C;border-radius: 50px;text-decoration: none;letter-spacing: 0.05em;filter: drop-shadow(0px 4px 0px #002A4C); transition: 0.2s;
            &:hover{transform: translateY(4px); background-color: #002A4C; color: #fff; filter: drop-shadow(0px 0px 0px #002A4C);}
        }
    }
}
@media only screen and (max-width: 835px){
    .contact{padding: 0 0 20vw;
        .contact_item{padding: 6vw;
            .contact_logos{gap: 4%;margin-bottom: 8vw;
                img{height: 6vw;}
            }
        }
    }
}

.share_area{position: relative;margin-bottom: min(120px,8vw);
    &:after{position: absolute; content: ""; background-image: url(../images/footer/02.svg);background-position: bottom;background-repeat: no-repeat;background-size: contain;width: min(84px, 6.5vw);height: min(368px, 28vw);right: -1px;top: max(-60px, -3vw);}
    a{display: block;width: 60%;margin: 0 auto; transition: 0.2s;
        img{width: 100%; height: auto;filter: drop-shadow(0px 7px 0px #00689c); transition: 0.2s;}
        &:hover{transform: translateY(7px);filter: brightness(1.2);
            img{filter: drop-shadow(0px 0px 0px #00689c);}
        }
    }
}
@media only screen and (max-width: 835px){
    .share_area{margin-bottom: 20vw;
        &:after{width: 11vw;height: 51vw;top: -15vw;}
        a{width: min(360px,80%);}
    }
}

.footer{position: relative; padding-bottom: min(60px,12vw);
    &:after{position: absolute; content: ""; background-image: url(../images/footer/01.svg);background-position: bottom;background-repeat: no-repeat;background-size: contain;width: 100%;height: min(266px, 14vw);left: 0;bottom: 0;}
    .foot_bg{width: 80%; margin-right: auto; 
        img{width: 100%; height: auto;}
    }
}
@media only screen and (max-width: 835px){
    .footer{
        &:after{height: 36vw;}
    }
}