:root { --width: 1px; }
@media (max-width: 780px) { :root { --width: 1 / 780 * 100vw; } }
.pc{display: block;} .sp{display: none;}
@media (max-width: 780px) {.pc{display: none;} .sp{display: block;}}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Noto Sans JP', sans-serif;
}
header,
main,
footer {
    max-width: 780px;
    margin: 0 auto;
}
img {
    width: 100%;
    height: auto;
    display: block;
}
section {
    position: relative;
    z-index: 2;
}
.cta01-btn {
    position: absolute;
    bottom: calc(83 * var(--width));
    left: 50%;
    transform: translateX(-50%);
    width: calc(670 * var(--width));
}
.cta02-btn {
    position: absolute;
    top: calc(38 * var(--width));
    left: 50%;
    transform: translateX(-50%);
    width: calc(670 * var(--width));
}
.cta01-btn img ,
.cta02-btn img {
    animation: btn 1.6s ease-in infinite;
}
.about {
    /* margin-top: calc(-105 * var(--width)); */
    z-index: 1;
}
.about-top {
    position: relative;
    z-index: 2;
}
.about-img {
    position: relative;
    z-index: 1;
    margin-top: calc(-160 * var(--width));
}
.about iframe {
    position: absolute;
    bottom: calc(112 * var(--width));
    left: 50%;
    transform: translateX(-50%);
    width: calc(590 * var(--width));
    height: calc(335 * var(--width));
    z-index: 3;
}
.flow-btn {
    position: absolute;
    top: calc(712 * var(--width));
    left: calc(215 * var(--width));
    width: calc(450 * var(--width));
    height: calc(68 * var(--width));
}
.faq {
    padding-top: calc(192 * var(--width));
    padding-bottom: calc(20 * var(--width));
}
.faq-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    object-fit: cover;
    object-position: top;
}
.faq-btn {
    position: relative;
    z-index: 2;
    margin: 0 auto calc(32 * var(--width));
    width: calc(720 * var(--width));
    height: calc(70 * var(--width));
    cursor: pointer;
    overflow: hidden;
    transition: height 0.3s ease-in-out;
    object-fit: cover;
    object-position: top;
}
.faq-btn.faq04,
.faq-btn.faq08,
.faq-btn.faq09 {
    height: calc(106 * var(--width));
}
.faq-btn.faq01.open { height: calc(262 * var(--width)); }
.faq-btn.faq02.open { height: calc(171 * var(--width)); }
.faq-btn.faq03.open { height: calc(237 * var(--width)); }
.faq-btn.faq04.open { height: calc(403 * var(--width)); }
.faq-btn.faq05.open { height: calc(171 * var(--width)); }
.faq-btn.faq06.open { height: calc(239 * var(--width)); }
.faq-btn.faq07.open { height: calc(273 * var(--width)); }
.faq-btn.faq08.open { height: calc(237 * var(--width)); }
.faq-btn.faq09.open { height: calc(372 * var(--width)); }
.cta-btn {
    position: fixed;
    bottom: calc(10 * var(--width));
    left: 50%;
    transform: translateX(-50%);
    width: calc(670 * var(--width));
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.cta-btn.active {
    opacity: 1;
    visibility: visible;
}
.cta-btn img {
    animation: btn 1.6s ease-in infinite;
}
footer {
    margin-bottom: calc(200 * var(--width));
}

@keyframes btn {
    0% {
        transform: scale(1);
    }
    10% {
        transform: scale(1);
    }
    30% {
        transform: scale(0.92);
    }
    40% {
        transform: scale(0.92);
    }
    50% {
        transform: scale(0.91, 0.95);
    }
    60% {
        transform: scale(1);
    }
    70% {
        transform: scale(0.93);
    }
    100% {
        transform: scale(1);
    }
}