@charset "UTF-8";

/* よくあるご質問専用（page-faq.php のときだけ読み込む。Figma「下層 / よくあるご質問」PC 2041:1351 / SP 2041:2936）。ページタイトルは page.css */

/*
 * 本文（Figma「02 FAQ」）
 * リード・カテゴリーのボタン・カテゴリーを同じ間隔（SP 56px / PC 72px）で縦に並べる。中身の幅は PC で 960px（ボタンの列だけ 980px）
 */
.faq {
    display: flex;
    flex-direction: column;
    gap: 56px;
    padding: 24px 20px 96px;
    color: #333;
    background-color: var(--color-pale);
}

.faq > * {
    width: min(100%, 960px);
    margin-inline: auto;
}

/* SP は左寄せ（2026-11-10 Chatwork「SP の文章は基本的に左寄せ」。Figma Page 1 の SP 788:197 は中央）、PC は中央（下の @media） */
.faq__lead {
    font-size: 0.9375rem; /* 15px */
    font-weight: 500;
    line-height: 30px;
}

/*
 * カテゴリーのボタン（Figma「FAQ / Category nav」）。各カテゴリーの見出しへのページ内リンク。
 * 形・太さは components.css のページ内リンクの共通部品（.page-nav）。PC の大きさは共通部品のまま
 */

/*
 * 下向きの矢印（Figma「Icon / chevron-down」10px の枠に幅 6.7px・線 1.67px）
 * 矢印の四角は 5.5px なので、左右の余白で Figma の 10px の枠に広げる（ボタンの幅を Figma にそろえる）。
 * 回した四角の見える 2 辺は中心より下に出るので、上に寄せて枠の中央に置く
 */
.faq__nav-link::after {
    --chevron-size: 5.5px;
    margin: -3px 2.25px 0;
}

/*
 * SP・タブレット（〜1023px）は、車種のページの SP のページ内リンク（model-intro.css の .model-nav）と同じ形にする
 * （2026-11-10 Chatwork「SUZY の SP と同じような形でグリッドですべて表示（横スクロールではなく）」）。
 * 3 列のグリッドで全部を見せ、どのボタンも同じ高さ 56px。枠付きの白いボタンの中央に項目名、そのすぐ下に下向きの矢印。
 * 項目名は 11〜12px（画面の幅に合わせる。320px でも「遠方からの検討」が 1 行に入る）
 */
@media (max-width: 1023px) {
    .faq__nav-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: 56px;
        gap: 8px;
    }

    /* ボタンを段の高さいっぱいに伸ばす */
    .faq__nav-list > li {
        display: flex;
    }

    .faq__nav-link {
        flex: 1;
        flex-direction: column;
        justify-content: center;
        gap: 0;
        min-width: 0;
        padding: 0 2px;
        border-color: rgb(47 107 86 / 0.35);
        font-size: clamp(0.6875rem, 3.2vw, 0.75rem); /* 11〜12px */
        line-height: 16px;
        text-align: center;
    }

    /* 矢印は車種のページの SP と同じ（幅 6.5px・線 2px、文字のすぐ下） */
    .faq__nav-link::after {
        --chevron-size: 6.5px;
        margin: 0;
        border-top-width: 2px;
        border-right-width: 2px;
    }
}

/*
 * PC は、カテゴリーのボタンをスクロールしてもヘッダーの下に固定して出す（2026-11-09 Chatwork の指示「スクロール後も常に表示」。Figma は固定なし）。
 * - 後ろの内容が透けないよう地色を敷き、上下に余白を足す（固定していないときの間隔は Figma のままになるよう、余白の分を負の margin で戻す）
 * - カテゴリーへ飛んだときに見出しがボタンの下に隠れないよう、隠れる高さ（--faq-nav-height）を見出しの scroll-margin-top にする
 *   （ヘッダーの分は base.css の scroll-padding-top）
 * - SP・タブレットは 3 列 × 2 段のボタン（約 130px）が画面の 1/4 近くを覆うので固定せず、通り過ぎたらヘッダーの下に高さ 56px の帯を出す
 *   （車種のページの SP と同じ。components.css の .scroll-toc。2026-11-10 Chatwork）。カテゴリーへ飛んだときは帯の下に見出しが来る
 */
.faq {
    --faq-nav-height: var(--scroll-toc-height); /* SP のスクロール中の帯（components.css） */
}

/* 中身の幅（.faq > *）を当てず、画面の端から端まで出す */
.faq > .scroll-toc {
    width: auto;
    margin: 0;
}

.faq-category {
    scroll-margin-top: calc(var(--faq-nav-height) + 16px);
}

@media (min-width: 1024px) {
    .faq > .faq__nav {
        position: sticky;
        top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-height));
        z-index: 10;
        width: min(100%, 980px);
        margin: -12px auto;
        padding-block: 12px;
        background-color: var(--color-pale);
    }

    /*
     * 貼り付いている間（main.js の is-stuck）は、帯を車種のページの PC のページ内リンクと同じ 48px に縮める（2026-11-12 Chatwork。Figma 781:66）:
     * 上下の余白 6px + ボタン 36px（上下 7.5px）。縮めた分は下の margin で足し、後ろの内容が動かないようにする（-12 + 48 + 13 = 固定前の 49px）。
     * カテゴリーへ飛ぶのは貼り付いたあとなので、見出しの scroll-margin は 48px の帯の下を基準にする
     */
    .faq {
        --faq-nav-height: 48px;
    }

    .faq > .faq__nav.is-stuck {
        margin-bottom: 13px;
        padding-block: 6px;
    }

    .faq > .faq__nav.is-stuck .faq__nav-link {
        padding-block: 7.5px;
    }
}

/* カテゴリー（Figma「FAQ / 車種選び #choose」など） */
.faq-category {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 見出しの下線は薄い緑の線の左端に、緑の短い線を重ねる（Figma「H3 / Rule」） */
.faq-category__title {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 14px;
    background:
        linear-gradient(var(--color-green), var(--color-green)) left bottom / 48px 2px no-repeat,
        linear-gradient(#dde5df, #dde5df) left bottom / 100% 2px no-repeat;
    font-size: 1.375rem; /* 22px */
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 32px;
}

.faq-category__number {
    color: var(--color-accent);
    font-family: var(--font-en);
    font-size: 0.875rem; /* 14px */
    font-weight: 800;
    letter-spacing: 2px;
    /*
     * 見出しの 32px（PC 40px）の行の高さを受け継ぐと、小さい数字をベースラインでそろえたときに数字の行が下にはみ出し、
     * 見出しの下線が SP 2px / PC 4px 下がる。Figma の数字の高さ（SP 17px / PC 20px）にして、見出しの行の中に収める
     */
    line-height: 17px;
}

.faq-category__items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/*
 * ご質問（Figma「FAQ item（open）」）。details / summary で開閉する
 * 右端のアイコンは、開いているときは「−」、閉じているときは「＋」（縦の線を足す）
 */
.faq-item {
    background-color: var(--color-white);
    box-shadow: 0 3px 12px rgb(0 0 0 / 0.06);
}

.faq-item__question {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 16px;
    cursor: pointer;
    list-style: none;
}

.faq-item__question::-webkit-details-marker {
    display: none;
}

.faq-item__question::after {
    --icon-size: 16px;
    --icon-line: 11.2px;
    --icon-weight: 2px;
    flex-shrink: 0;
    width: var(--icon-size);
    height: var(--icon-size);
    margin-top: 8px;
    background:
        linear-gradient(var(--color-green), var(--color-green)) center / var(--icon-line) var(--icon-weight) no-repeat,
        linear-gradient(var(--color-green), var(--color-green)) center / var(--icon-weight) var(--icon-line) no-repeat;
    content: "";
    /* ＋ と − の切り替え（縦の線が縮む）もなめらかにする */
    transition: background-size 0.3s ease;
}

.faq-item[open] .faq-item__question::after {
    background-size: var(--icon-line) var(--icon-weight), 0 0;
}

.faq-item__question-text {
    flex: 1;
    min-width: 0;
    font-size: 0.9375rem; /* 15px */
    font-weight: 700;
    line-height: 26px;
}

/* 「Q」「A」の四角（Figma「Mark / Q」「Mark / A」） */
.faq-item__mark {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--color-white);
    background-color: var(--color-green);
    font-family: var(--font-en);
    font-size: 0.9375rem; /* 15px */
    font-weight: 800;
    line-height: 1;
}

.faq-item__mark--answer {
    background-color: var(--color-accent);
}

/* 回答。上の区切り線は左右の余白の内側に引く（Figma「Divider wrap」） */
.faq-item__answer {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-inline: 16px;
    padding: 18px 0 20px;
    border-top: 1px solid #dde5df;
}

.faq-item__body {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    line-height: 26px;
}

.faq-item__list li::before {
    content: "・";
}

/* 先方確認待ちの「確認中（基準日：…）」。公開時は通常の文字色にする（Figma の注記） */
.faq-item__pending {
    color: var(--color-accent);
    font-weight: 700;
}

/*
 * 回答の中のリンクは共通の矢印付きの文字リンク（components.css の .more-link）。回答の文との間隔と、
 * Figma（SP 788:336 / PC 781:369）の字間 0・矢印までの間（SP 6px / PC 8px）・PC の文字 15px だけここで変える（共通部品は字間 1px・間 14px）
 */
.faq-item__link {
    gap: 6px;
    margin-top: 10px;
    letter-spacing: 0;
}

/* フッターの山は、本文の下の余白（SP 96px / PC 140px）に重ねる（Figma: 本文の背景の上に山が乗る。TOP の top.css と同じ） */
.site-footer {
    margin-top: 0;
}

@media (min-width: 1024px) {
    .faq {
        gap: 72px;
        padding: 40px 40px 140px;
    }

    .faq__lead {
        font-size: 1.125rem; /* 18px */
        line-height: 40px;
        text-align: center;
    }

    /* PC は Figma どおり 2 行に分ける */
    .faq__lead span {
        display: block;
    }

    .faq__nav {
        width: min(100%, 980px);
    }

    .faq-category {
        gap: 28px;
    }

    /* カテゴリーとカテゴリーの間だけ 100px（2026-11-10 Chatwork。リード・ボタンの下は 72px のまま） */
    .faq-category + .faq-category {
        margin-top: 28px;
    }

    .faq-category__title {
        gap: 16px;
        padding-bottom: 18px;
        background-size: 60px 2px, 100% 2px;
        font-size: 1.75rem; /* 28px */
        line-height: 40px;
    }

    .faq-category__number {
        font-size: 1rem; /* 16px */
        letter-spacing: 3px;
        line-height: 20px;
    }

    .faq-category__items {
        gap: 16px;
    }

    .faq-item {
        box-shadow: 0 4px 16px rgb(0 0 0 / 0.06);
    }

    .faq-item__question {
        align-items: center;
        gap: 20px;
        padding: 24px 32px;
    }

    .faq-item__question::after {
        --icon-size: 20px;
        --icon-line: 14px;
        --icon-weight: 2.5px;
        margin-top: 0;
    }

    .faq-item__question-text {
        font-size: 1.125rem; /* 18px */
        letter-spacing: 1px;
        line-height: 30px;
    }

    .faq-item__mark {
        width: 44px;
        height: 44px;
        font-size: 1.25rem; /* 20px */
    }

    .faq-item__answer {
        gap: 20px;
        margin-inline: 32px;
        padding: 24px 0 28px;
    }

    .faq-item__body {
        padding-top: 6px;
        font-size: 1rem; /* 16px */
        line-height: 32px;
    }

    .faq-item__link {
        gap: 8px;
        font-size: 0.9375rem; /* 15px */
    }

    .faq-item__link {
        margin-top: 12px;
    }
}

/* PC のカテゴリーのボタン（6 個）を 1 行に収める決まり（1024〜1279px は文字と余白を詰める）は components.css のページ内リンクの共通部品 */