猫さんが左に寄っちゃったんだけど、 文字は真ん中、猫は左と右になるようになってる確認して～

/* =========================================
   1) レイアウト（PC横並び／SP縦並び）
========================================= */
.faq-layout {
    display: grid;
    grid-template-columns: minmax(620px, 1fr) clamp(320px, 34vw, 520px);
    gap: clamp(16px, 3vw, 28px);
    align-items: start;

    /* 調整用カスタムプロパティ */
    --cat-scale: .82;
    --right-col-min: 320px;
    --right-col-max: 480px;
}

/* 右カラム：スクロール追従 */
.faq-aside {
    position: relative;
    z-index: 0;
}

/* 余白の中央に来やすい sticky オフセット */
.faq-illust {
    position: sticky;
    top: clamp(60px, calc(50vh - 220px), 140px);
    margin: 0;
    display: grid;
    width: 100%;
    aspect-ratio: 1/1;
    place-items: center;
    margin-left: -2vw;
    /* 左に少し寄せる */
}

/* 画像共通 */
.faq-illust img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Z順：猫が上、三角が下 */
.faq-cat {
    position: relative;
    z-index: 2;
    transform: scale(var(--cat-scale));
    transform-origin: center bottom;
}

.faq-tris {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .98;
    animation: tris-float 10s ease-in-out infinite;
    will-change: transform;
}

/* ゆるふわ */
@keyframes tris-float {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
    }

    50% {
        transform: translateY(-6px) rotate(2deg) scale(1.01);
    }

    100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
}

/* タブレット調整 */
@media (max-width:1199px) {
    .faq-layout {
        grid-template-columns: minmax(520px, 1fr) clamp(280px, 40vw, 420px);
        --cat-scale: .76;
        --right-col-max: 440px;
    }

    .faq-illust {
        top: clamp(40px, 12vh, 100px);
    }
}

/* モバイル：縦並び（下に配置／sticky無効化） */
@media (max-width:900px) {
    .faq-layout {
        grid-template-columns: 1fr;
        --cat-scale: .88;
    }

    .faq-aside {
        order: 2;
    }

    .faq-illust {
        position: static;
        margin: 16px auto 0;
        width: min(50vw, 480px);
        aspect-ratio: 1/1;
    }
}

/* 動きを苦手な人へ */
@media (prefers-reduced-motion:reduce) {
    .faq-tris {
        animation: none;
    }
}

/* =========================================
   2) FAQ：横バー付きカード（縦線なし）
   ※ここからが見た目の本体
========================================= */
.faq--panel {
    --card-radius: 14px;
    /* カード角丸 */
    --card-shadow: 0 8px 24px rgba(0, 0, 0, .06);
    /* 影の強さ */
    --card-border: 1px solid rgba(140, 199, 255, .35);
    /* うっすら枠（不要なら none） */
    --cap-h: 12px;
    /* 上バーの高さ */
    --cap-color: #93c5fd;
    /* 上バーの色（緑系） */
}

/* 旧縦ライン系の名残を無効化 */
.faq--panel summary,
.faq--panel .a {
    border-left: none !important;
    padding-left: 0 !important;
}

/* 各Q&Aをカード化（中身はこの上に載る） */
.faq--panel .faq-item {
    position: relative;
    margin: 18px 0;
    padding: 18px 16px 14px;
    /* 上はバーにかぶらないよう少し広め */
}

/* 背景カード本体（影・枠・角丸） */
.faq--panel .faq-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    border: var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    z-index: 0;
    pointer-events: none;
}

/* 上部の横バー（内側の線なし） */
.faq--panel .faq-item::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: var(--cap-h);
    background: var(--cap-color);
    border-top-left-radius: var(--card-radius);
    border-top-right-radius: var(--card-radius);
    z-index: 1;
    pointer-events: none;
}

/* 中身はカードの上に */
.faq--panel summary,
.faq--panel .a {
    position: relative;
    z-index: 2;
    background: transparent;
    background-clip: padding-box;
    /* にじみ防止 */
}

/* 見出し（Q行） */
.faq--panel summary {
    list-style: none;
    display: grid;
    grid-template-columns: auto 1fr auto;
    /* 左：Qバッジ／中央：本文／右：▼ */
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

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

/* Qバッジ */
.faq--panel summary .q {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #2d6cdf;
    color: #fff;
    font-weight: 700;
    font-size: .92rem;
    line-height: 1;
}

/* 開閉アイコン */
.faq--panel summary::after {
    content: "▼";
    color: #7aa7da;
    font-size: .9rem;
    transform: rotate(-90deg);
    transition: transform .2s ease;
}

.faq--panel details[open]>summary::after {
    transform: rotate(0deg);
}

/* 回答（A）— 高さアニメのみ */
.faq--panel .a {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 0;
    margin-top: 0;
    transition: max-height .35s ease, opacity .25s ease, padding .25s ease, margin-top .25s ease;
}

.faq--panel details[open]>.a {
    max-height: 1200px;
    opacity: 1;
    padding: 10px 0 2px;
    /* 好みで余白調整 */
    margin-top: 6px;
}

/* Aバッジ（A.の丸） */
.faq--panel .a .a-label {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-right: .5em;
    border-radius: 50%;
    background: #d8ecff;
    color: #1565c0;
    font-weight: 700;
}

/* モバイル微調整 */
@media (max-width:600px) {
    .faq--panel summary .q {
        width: 26px;
        height: 26px;
    }
}

/* ちょいリッチ：ホバー/フォーカスでふわっと */
.faq--panel .faq-item:hover::after,
.faq--panel .faq-item:focus-within::after {
    box-shadow: 0 10px 28px rgba(0, 0, 0, .08);
}

/* ===== Q/A テキストの下に色バー（ハイライト） ===== */
.faq--panel {
    --q-underline: rgba(45, 108, 223, .16);
    /* Qの下線（バッジ青の薄め） */
    --a-underline: rgba(216, 236, 255, .70);
    /* Aの下線（Aバッジ背景の薄水色） */
    --underline-h: 2px;
    /* 線の太さ（px 推奨） */
    --q-left-offset: calc(28px + 10px);
    /* Qバッジ(28px)+gap(10px)ぶんずらす */
    --a-left-offset: calc(26px + .5em + 4px);
    /* Aバッジ(26px)+隙間ぶん */
}

/* Q行：summary の文字の下にふわっと敷く */
.faq--panel summary {
    position: relative;
    /* 擬似要素の基準にする */
}

.faq--panel summary::before {
    content: "";
    position: absolute;
    left: var(--q-left-offset);
    right: 0;
    height: var(--underline-h);
    bottom: .15em;
    /* 文字の少し下にくるよう調整 */
    background: var(--q-underline);
    border-radius: 6px;
    z-index: 1;
    pointer-events: none;
}

/* A行：各段落の下に敷く（最初の段落だけにしたい場合は .a p:first-child に変更） */
.faq--panel .a p {
    position: relative;
}

.faq--panel .a p::after {
    content: "";
    position: absolute;
    left: var(--a-left-offset);
    right: 0;
    height: var(--underline-h);
    bottom: .15em;
    background: var(--a-underline);
    border-radius: 6px;
    z-index: 0;
    /* テキストの背面に */
    pointer-events: none;
}

/* モバイルは少し細めに */
@media (max-width: 600px) {
    .faq--panel {
        --underline-h: 10px;
        --q-left-offset: calc(26px + 8px);
        /* バッジ小さめに合わせて微調整 */
    }
}


/* ===== Q/A の細い下線（点線 or 実線） ===== */
.faq--panel {
    /* 色はバッジ系に寄せて薄め */
    --q-underline-color: rgba(45, 108, 223, .45);
    /* Q：青 */
    --a-underline-color: rgba(21, 101, 192, .35);
    /* A：濃いめ水色 */
    --underline-w: 2px;
    /* 線の太さ */
    --dash: 4px;
    /* 破線の長さ（点線に近い細かめ） */

    --q-left-offset: calc(28px + 10px);
    /* Qバッジ(28)+gap(10) */
    --a-left-offset: calc(26px + .5em + 4px);
    /* Aバッジ(26)+隙間 */
}

/* Q 行：summary のテキストの下に “線” を引く */
.faq--panel summary {
    position: relative;
}

.faq--panel summary::before {
    content: "";
    position: absolute;
    left: var(--q-left-offset);
    right: 24px;
    /* 右の▼分だけ少し空ける */
    bottom: .15em;
    border-bottom: var(--underline-w) dashed var(--q-underline-color);
    /* ← dashed を dotted/solid に変更可 */
    /* dotted にしたい場合： dashed → dotted */
    /* 実線にしたい場合： dashed → solid */
}

/* A 行：段落ごとに線（最初だけにしたいなら p:first-child に） */
.faq--panel .a p {
    position: relative;
    margin-bottom: .4em;
}

.faq--panel .a p::after {
    content: "";
    position: absolute;
    left: var(--a-left-offset);
    right: 0;
    bottom: .15em;
    border-bottom: var(--underline-w) dashed var(--a-underline-color);
    /* dotted/solid もOK */
}

/* モバイルは少し細く＆間隔詰め */
@media (max-width:600px) {
    .faq--panel {
        --underline-w: 1.5px;
        --q-left-offset: calc(26px + 8px);
    }
}

/* ========================
   H1 の三角帯デコ（白文字）
======================== */
.faq-heading {
    position: relative;
    z-index: 0;
    /* 擬似要素を背面に敷く */
    color: #fff;
    /* 白文字 */
    font-weight: 800;
    line-height: 1.15;
    padding: clamp(10px, 1.6vw, 14px) clamp(14px, 2.4vw, 22px);
    margin: 0 0 10px;
    min-height: clamp(64px, 12vw, 140px);
    /* 画像が見える最低高さ */
    display: grid;
    align-items: center;
    isolation: isolate;
    /* 背面のぼかしと干渉しないように */
    text-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    /* 可読性アップ */
}

/* 背景の三角帯画像 */
.faq-heading::before {
    content: "";
    position: absolute;
    inset: 0;
    /* h1全体に敷く */
    background:
        linear-gradient(to right, rgba(0, 0, 0, .15), rgba(0, 0, 0, .15)),
        /* うっすら暗くして白文字のコントラスト確保 */
        url("../images/decoration/triangle_train.png") center / contain no-repeat;
    z-index: -1;
    /* 文字の背面 */
    pointer-events: none;
    border-radius: 12px;
    /* 角丸：好みに合わせて */
}

/* 画面幅が狭い時は少し控えめに（高さも浅く） */
@media (max-width: 720px) {
    .faq-heading {
        min-height: clamp(56px, 18vw, 100px);
        text-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    }

    .faq-heading::before {
        background:
            linear-gradient(to right, rgba(0, 0, 0, .18), rgba(0, 0, 0, .18)),
            url("../images/decoration/triangle_train.png") center / cover no-repeat;
        border-radius: 10px;
    }
}

/* Q&A のコンテンツ幅を制限して中央寄せ（左右に余白を作る） */
.faq--panel {
    max-width: 980px;
    /* 好みで 860〜1040px くらい */
    margin-left: auto;
    margin-right: auto;
}

/* ========================
   H1：三角帯フル幅バナー（中央寄せ・白文字）
======================== */
.faq-heading {
    position: relative;
    z-index: 0;
    width: 100%;
    color: #fff;
    text-align: center;
    /* ← 中央寄せ */
    font-weight: 800;
    line-height: 1.15;
    padding: clamp(16px, 4vw, 28px) clamp(16px, 4vw, 28px);
    margin: 0 0 clamp(16px, 3vw, 28px);
    min-height: clamp(84px, 18vw, 160px);
    /* 画像が見える最低高さ */
    display: grid;
    place-items: center;
    /* 行内中央配置 */
    border-radius: 16px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .28);
    /* 可読性UP */
    isolation: isolate;
}

/* 背面：うっすらグレー（“枠が見えるか見えないか”くらい） */
.faq-heading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .06);
    /* ← ほぼ見えない薄グレー */
    border-radius: inherit;
    z-index: -2;
    pointer-events: none;
}

/* 三角帯：横幅いっぱい。上下は見切れてOK → cover */
.faq-heading::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(0, 0, 0, .18), rgba(0, 0, 0, .18)),
        /* 白文字用に少し暗く */
        url("../images/decoration/triangle_train.png") center / cover no-repeat;
    border-radius: inherit;
    z-index: -1;
    pointer-events: none;
}

@media (max-width: 720px) {
    .faq-heading {
        min-height: clamp(72px, 22vw, 120px);
        text-shadow: 0 1px 4px rgba(0, 0, 0, .26);
    }

    .faq-heading::before {
        /* SPは少しだけ暗めにして読みやすさ確保 */
        background:
            linear-gradient(to right, rgba(0, 0, 0, .22), rgba(0, 0, 0, .22)),
            url("../images/decoration/triangle_train.png") center / cover no-repeat;
    }
}

.faq-layout {
    --cat1-scale: .68;
    /* 1匹目（question1） */
    --cat2-scale: .62;
    /* 2匹目（question6） */
}

/* 台座（sticky）はこれまで通り */
.faq-illust {
    position: sticky;
    top: clamp(60px, calc(50vh - 220px), 140px);
    margin: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-left: -4vw;
    position: sticky;
}

/* 三角は一番下のレイヤー */
.faq-tris {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .98;
    animation: tris-float 10s ease-in-out infinite;
}

/* 猫は2枚を絶対配置で右側に寄せて重ねる */
.faq-cat {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 1匹目：右下にドン。少しだけ右下へ寄せる */
.faq-cat--primary {
    right: 0;
    bottom: 0;
    z-index: 3;
    transform-origin: right bottom;
    transform: translate(6%, 6%) scale(var(--cat1-scale));
}

/* 2匹目：右上に配置。少しだけ内側へ */
.faq-cat--alt {
    right: 2%;
    top: 0;
    z-index: 2;
    transform-origin: right top;
    transform: translate(0, -4%) scale(var(--cat2-scale));
}

/* タブレットでさらに少し縮める */
@media (max-width:1199px) {
    .faq-layout {
        --cat1-scale: .62;
        --cat2-scale: .58;
    }
}

/* モバイルは縦並びになるので、両方少し大きめに戻して見やすく */
@media (max-width:900px) {
    .faq-layout {
        --cat1-scale: .78;
        --cat2-scale: .72;
    }

    .faq-illust {
        margin: 16px auto 0;
        width: min(60vw, 520px);
        position: static;
    }
}