: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 iframe {
    position: absolute;
    bottom: calc(122 * var(--width));
    left: 50%;
    transform: translateX(-50%);
    width: calc(590 * var(--width));
    height: calc(330 * var(--width));
}
.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;
    width: calc(1506 / 2 * var(--width));
    height: calc(78 * var(--width));
    cursor: pointer;
    overflow: hidden;
    transition: height 0.3s ease-in-out;
    object-fit: cover;
    object-position: top;
}
.faq-btn.faq01.open { height: calc(672 / 2 * var(--width)); }
.faq-btn.faq02.open { height: calc(598 / 2 * var(--width)); }
.faq-btn.faq03.open { height: calc(540 / 2 * 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);
    }
}