@charset "UTF-8";

/* ========================================
   1200px以下
======================================== */

@media (max-width: 1200px) {

    .faq-hero-inner {
        gap: 50px;
    }

    .faq-hero-visual {
        width: min(430px, 100%);
    }

}


/* ========================================
   992px以下
======================================== */

@media (max-width: 992px) {

    /* Hero */

    .faq-hero {
        min-height: auto;

        padding:
            calc(var(--header-height, 80px) + 70px)
            30px
            100px;
    }

    .faq-hero-inner {
        grid-template-columns: 1fr;
        gap: 60px;

        text-align: center;
    }

    .faq-hero-content {
        order: 2;
    }

    .faq-hero-visual {
        order: 1;

        width: min(380px, 100%);
        margin: 0 auto;
    }

    .faq-hero-label {
        justify-content: center;
    }

    .faq-hero-text {
        margin-inline: auto;
    }

    .faq-hero-button {
        margin-inline: auto;
    }


    /* FAQ */

    .faq-section {
        padding:
            110px
            30px;
    }

    .faq-inner {
        width: min(900px, 100%);
    }

    .faq-question {
        grid-template-columns: 50px 1fr 38px;
        gap: 16px;

        min-height: 88px;
        padding: 20px 24px;
    }

    .faq-answer-inner {
        grid-template-columns: 50px 1fr;
        gap: 16px;

        padding-inline: 24px;
    }

    .faq-item.is-open .faq-answer-inner {
        padding:
            0
            24px
            24px;
    }


    /* CTA */

    .faq-cta {
        min-height: auto;

        padding:
            100px
            30px;
    }

    .faq-cta-inner {
        padding:
            60px
            45px;
    }

}


/* ========================================
   768px以下
======================================== */

@media (max-width: 768px) {

    /* Hero */

    .faq-hero {
        padding:
            calc(var(--header-height, 75px) + 55px)
            20px
            80px;
    }

    .faq-hero-inner {
        gap: 45px;
    }

.faq-hero-title {
    font-size: clamp(2rem, 9.5vw, 3rem);
    line-height: 1.15;
}
    .faq-hero-catch {
        margin-top: 24px;

        font-size: 1.45rem;
    }

.faq-hero-content .faq-hero-text {
    margin-top: 18px;

    font-size: clamp(0.58rem, 2.7vw, 0.82rem);
    line-height: 1.9;
    white-space: nowrap;
}

.faq-hero-text .faq-text-sp-br {
    display: inline;
}
    .faq-hero-button {
        min-width: 210px;
        min-height: 54px;
        margin-top: 30px;
    }

    .faq-hero-visual {
        width: min(310px, 100%);
    }

    .faq-hero-icon {
        width: 135px;
        height: 135px;

        font-size: 4.6rem;
    }
.faq-catch-sp-br {
    display: inline;
}
    .faq-floating-word {
        font-size: 0.55rem;
    }


    /* FAQ */

    .faq-section {
        padding:
            90px
            20px;
    }

    .faq-list {
        gap: 14px;

        margin-top: 42px;
    }

    .faq-question {
        grid-template-columns: 44px 1fr 34px;
        gap: 14px;

        min-height: 82px;
        padding:
            18px
            20px;
    }

.faq-question-text {
    font-size: clamp(0.38rem, 1.85vw, 0.9rem);
    line-height: 1.5;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
    .faq-mark {
        width: 42px;
        height: 42px;

        font-size: 1.1rem;
    }

    .faq-toggle-icon {
        width: 32px;
        height: 32px;
    }

    .faq-answer-inner {
        grid-template-columns: 44px 1fr;
        gap: 14px;

        padding-inline: 20px;
    }

    .faq-item.is-open .faq-answer-inner {
        padding:
            0
            20px
            20px;
    }

    .faq-answer-text {
        padding:
            18px
            18px;

        font-size: 0.9rem;
        line-height: 1.9;
    }


    /* 利用開始までの流れ */

    .faq-step-list {
        grid-template-columns: repeat(2, 1fr);

        padding:
            18px
            18px;
    }


    /* CTA */

    .faq-cta {
        padding:
            85px
            20px;
    }

    .faq-cta-inner {
        padding:
            50px
            30px;
    }

    .faq-cta-title {
        font-size: clamp(2.1rem, 8vw, 3.4rem);
    }
.faq-cta .faq-cta-inner .faq-cta-text.faq-cta-one-line {
    display: block;
    width: 100%;
    max-width: none;
    margin: 18px auto 0;

    font-size: clamp(0.28rem, 1.55vw, 0.7rem) !important;
    line-height: 1.6;
    letter-spacing: 0 !important;
    text-align: center;
    white-space: nowrap !important;
}

.faq-cta .faq-cta-one-line span {
    display: inline-block;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}
    .faq-cta-button-list {
        flex-direction: column;
        align-items: stretch;
    }

    .faq-cta-button {
        width: 100%;
        min-width: 0;
    }

}


/* ========================================
   576px以下
======================================== */

@media (max-width: 576px) {

    /* Hero */

    .faq-hero {
        padding:
            calc(var(--header-height, 70px) + 45px)
            16px
            70px;
    }

    .faq-hero-label {
        gap: 9px;

        margin-bottom: 18px;

        font-size: 0.62rem;
        letter-spacing: 0.16em;
    }

    .faq-hero-label::before {
        width: 28px;
    }


    .faq-hero-catch {
        font-size: 1.25rem;
        line-height: 1.6;
    }

    .faq-hero-text {
        font-size: 0.88rem;
        line-height: 1.85;
    }

    .faq-hero-button {
        width: 100%;
        min-width: 0;
    }

    .faq-hero-visual {
        width: min(265px, 100%);
    }

    .faq-hero-icon {
        width: 112px;
        height: 112px;

        font-size: 3.8rem;
    }

    .faq-floating-word {
        padding:
            5px
            9px;

        font-size: 0.48rem;
        letter-spacing: 0.1em;
    }


    /* FAQ */

    .faq-section {
        padding:
            75px
            16px;
    }

    .faq-list {
        gap: 12px;
    }

    .faq-item {
        clip-path:
            polygon(
                12px 0,
                100% 0,
                100% calc(100% - 12px),
                calc(100% - 12px) 100%,
                0 100%,
                0 12px
            );
    }

    .faq-question {
        grid-template-columns: 38px 1fr 30px;
        gap: 11px;

        min-height: 76px;
        padding:
            16px
            14px
            16px
            17px;
    }


    .faq-mark {
        width: 36px;
        height: 36px;

        clip-path:
            polygon(
                7px 0,
                100% 0,
                100% calc(100% - 7px),
                calc(100% - 7px) 100%,
                0 100%,
                0 7px
            );

        font-size: 0.95rem;
    }

    .faq-toggle-icon {
        width: 28px;
        height: 28px;
    }

    .faq-toggle-icon::before,
    .faq-toggle-icon::after {
        width: 11px;
    }

    .faq-answer-inner {
        grid-template-columns: 38px 1fr;
        gap: 11px;

        padding-inline:
            14px;
    }

    .faq-item.is-open .faq-answer-inner {
        padding:
            0
            14px
            16px
            17px;
    }

    .faq-answer-text {
        padding:
            15px
            14px;

        font-size: 0.84rem;
        line-height: 1.85;
    }


    /* 利用開始までの流れ */

    .faq-step-list {
        grid-template-columns: 1fr;

        gap: 10px;

        padding:
            15px
            14px;
    }

    .faq-step-list li {
        min-height: 72px;
    }


    /* CTA */

    .faq-cta {
        padding:
            70px
            16px;
    }

    .faq-cta-inner {
        padding:
            42px
            20px;

        clip-path:
            polygon(
                18px 0,
                calc(100% - 18px) 0,
                100% 18px,
                100% calc(100% - 18px),
                calc(100% - 18px) 100%,
                18px 100%,
                0 calc(100% - 18px),
                0 18px
            );
    }

    .faq-cta-label {
        font-size: 0.62rem;
    }

.faq-cta-title {
    margin-top: 18px;

    font-size: clamp(1.45rem, 6.5vw, 2.2rem);
    line-height: 1.35;
    white-space: nowrap;
}

    .faq-cta-button-list {
        margin-top: 28px;
    }

    .faq-cta-button {
        min-height: 54px;

        font-size: 0.84rem;
    }

}


/* ========================================
   420px以下
======================================== */

@media (max-width: 420px) {

    .faq-hero {
        padding-inline: 14px;
    }

    .faq-section {
        padding-inline: 14px;
    }

    .faq-cta {
        padding-inline: 14px;
    }


    .faq-hero-catch {
        font-size: 1.12rem;
    }

    .faq-hero-visual {
        width: 230px;
    }

    .faq-hero-icon {
        width: 96px;
        height: 96px;

        font-size: 3.2rem;
    }

    .faq-floating-word {
        display: none;
    }

    .faq-question {
        grid-template-columns: 34px 1fr 27px;
        gap: 9px;

        padding:
            15px
            11px
            15px
            14px;
    }


    .faq-mark {
        width: 32px;
        height: 32px;

        font-size: 0.86rem;
    }

    .faq-toggle-icon {
        width: 26px;
        height: 26px;
    }

    .faq-answer-inner {
        grid-template-columns: 34px 1fr;
        gap: 9px;
    }

    .faq-item.is-open .faq-answer-inner {
        padding:
            0
            11px
            15px
            14px;
    }

    .faq-answer-text {
        padding:
            14px
            12px;

        font-size: 0.8rem;
    }

}


/* ========================================
   横向きスマホ
======================================== */

@media (
    max-width: 900px
)
and (
    orientation: landscape
)
and (
    max-height: 520px
) {

    .faq-hero {
        min-height: auto;

        padding-top:
            calc(var(--header-height, 70px) + 35px);
    }

    .faq-hero-inner {
        grid-template-columns: 1fr 0.8fr;
        gap: 30px;

        text-align: left;
    }

    .faq-hero-content {
        order: 1;
    }

    .faq-hero-visual {
        order: 2;

        width: 240px;
    }

    .faq-hero-label {
        justify-content: flex-start;
    }

    .faq-hero-title {
        font-size: 3rem;
    }

    .faq-hero-catch {
        margin-top: 16px;

        font-size: 1.15rem;
    }

    .faq-hero-text {
        margin-top: 12px;

        font-size: 0.82rem;
        line-height: 1.7;
    }

    .faq-hero-button {
        width: auto;
        margin-top: 20px;
    }

}


/* ========================================
   動きを減らす設定
======================================== */

@media (prefers-reduced-motion: reduce) {

    .faq-item,
    .faq-toggle-icon,
    .faq-toggle-icon::before,
    .faq-toggle-icon::after,
    .faq-answer,
    .faq-hero-button,
    .faq-cta-button {
        transition: none;
    }

}