@charset "utf-8";
*{font-feature-settings: "palt";}
html{scroll-behavior: smooth;}
.clearfix {
    display: block;
}

.sp {
    display: none;
}

#wrapper {
    width: 750px;
    margin: 0 auto;
    overflow: hidden;
}

.rel{position: relative;}

.min{font-size: 0.8em;}

i{font-style: normal;}

.pa25{padding-bottom: 2.5%!important;}

.video video{
    width: 100%;
    height: auto;
}

header{
    padding: 10px;
}

#fv p{
    position: absolute;
    bottom: 2%;
    right: 4%;
    width: 48%;
}

.cta a{
    display: block;
    width: 91.46%;
    position: absolute;
    left: 50%;
    bottom: 5%;
    transform-origin: 50% 50%;
    transform: translate(-50%,0);
}

#box07 p{
    position: absolute;
    bottom: 26%;
    left: 4%;
    width: 52.2%;
}

#box07 .box07_txt{
    position: absolute;
    width: 87%;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
}

#box09 figure{
    width: 41%;
    position: absolute;
    right: 0;
    top: 32%;
}

#box10 figure{
    width: 19%;
    position: absolute;
    right: 0;
    top: 0.5%;
}

.box11_ttl{
    width: 44.4%;
    margin: 10.6% auto 0;
    z-index: 1;
}

.box11_ttl figure{
    width: 60%;
    position: absolute;
    bottom: 0;
    left: -35%;
    z-index: -1;
}

#box11 .video{
    width: 86.6%;
    margin: 0 auto 5%;
}

#box13 figure{
    width: 51.8%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateY(-50%);
}

#qa{
    background-color: #1daab7;
    padding: 4%;
}

.box_qa{
    background-color: #fff;
    padding: 4.4%;
}

.box_qa h2{
    margin-bottom: 10px;
}

.js_acc{
    font-size: 30px;
    min-height: 76px;
    font-weight: bold;
    border-bottom: 2px solid #d2eef1;
    padding: 3.5% 6% 3.5% 16%;
    line-height: 1.2;
    position: relative;
}

.js_acc::before,.js_acc::after{
    content: "";
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
}

.js_acc::before{
    background: url(../images/boxqa_q.webp) no-repeat center/contain;
    width: 12.8%;
    padding-top: 12.8%;
    left: 0;
}

.js_acc::after{
    background: url(../images/boxqa_arrow.webp) no-repeat center/contain;
    width: 5.25%;
    padding-top: 3%;
    right: 0;
    transform: rotate(180deg);
}
.js_acc.open::after{
    transform: rotate(0);
}

.js_acc p{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 77%;
}

.js_acc_inner{
    display: none;
    font-size: 24px;
    font-weight: bold;
    margin: 3% 0 5%;
}

.js_acc_inner.stay{
    display: block;
}

#box15 p{
    position: absolute;
    bottom: 6%;
    right: 0;
    width: 51.8%;
}

.form_flex{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.form_flex label{
    width: 90%;
}

form#mail_form dl dd .form_flex li{
    display: flex;
    align-items: center;
}

form#mail_form dl dd .form_flex li[type="radio"]{
    flex: 0 0 15px;
}

form#mail_form dl dd .form_flex .radio{
    margin-top: 0;
    flex: 1;
}

form#mail_form dl dd .form_flex .radio{
    margin-right: 30px;
}

.form_privecy{
    font-size: 24px;
    font-weight: 500;
    text-align: center;
}

.form_privecy a{
    text-decoration: none;
    color: #1daab7;
}

.form_privecy a:hover{
    text-decoration: underline;
}

footer{
    background-color: #1daab7;
    color: #fff;
    font-size: 24px;
    text-align: center;
    margin-top: 5%;
    padding: 7% 10px 9.5%;
}

#thanks{
    font-size: 20px;
    padding: 5% 5% 0;
}

#thanks h1{
    font-size: 24px;
    text-align: center;
    margin-bottom: 2.5%;
    color: #1daab7;
}

#thanks .form_privecy{
    margin-top: 10%;
}

.poyo {
    animation: poyopoyo 2s ease-out infinite;
}

@keyframes poyopoyo {
    0%,
    40%,
    60%,
    80% {
        transform: translate(-50%,0) scale(1.0);
    }

    50%,
    70% {
        transform: translate(-50%,0) scale(0.95);
    }
}

.piko{
    animation: pikopiko 1s steps(2, start) infinite;
}
@keyframes pikopiko {
    0% {
        transform: rotate(10deg);
    }
    to {
        transform: rotate(-10deg);
    }
}

.fluffy {
    animation: fluffy 3s ease infinite;
}

@keyframes fluffy {
    0%,5%,10%,25%,50%,100% {
        transform: translateY(0);
    }

    20%,30% {
        transform: translateY(-10px);
    }
}

.hide{animation: hide 3s ease infinite;}

@keyframes hide{
    0%,100%{
        transform: translateX(0)
    }
    80%{
        transform: translateX(-20px);
    }
}

.boyo{animation: boyo 1.5s ease infinite;}

@keyframes boyo{
    0%,100%{
        transform: translate(-50%,0)
    }
    50%{
        transform: translate(-50%,15px);
    }
}

.anim_scale{
    opacity: 0;
}
.eventStart .anim_scale{
    animation: scale 0.8s ease-out 0.5s forwards;
}
    @keyframes scale {
    0%{
        opacity: 0;
        transform: scale(0);
    }
    60%{
        opacity: 1;
        transform: scale(1.2);
    }
    100%{
        opacity: 1;
        transform: scale(1.0);
    }
}

    /*スマホ
------------------------------*/
@media screen and (max-width: 750px) {
    .pc {
        display: none;
    }
    .sp {
        display: block;
    }
    #wrapper {
        width: 100%;
        margin: 0 auto;
    }

    .js_acc{font-size: 4vw;}
    .js_acc_inner,.form_privecy,footer,#thanks h1{font-size: 3.2vw;}
    #thanks{font-size: 3vw;}
}