/*
 * アイパネル — よくある質問(D / /help/faq)専用スタイル
 * handoff 073: モック https://ipanel-top-renewal.digden134.workers.dev/help/faq に一致させる。
 *
 * 値はすべて **モックのビルド済み CSS(/assets/index-DFNCUc5Q.css)と computed style から実測**した。
 * 他ページ(A/B/C/E/G)へ波及させないため、**すべて `.ipanel-rtsub--faq` 配下に限定**する。
 * クラスも共有の `.rtsub-*` ではなく D 専用の `.rtfaq-*` で新設している
 * (旧実装は `.rtsub-hero` / `.rtsub-sec` / `.rtsub-final` を他ページと共有していたため、
 *  そのまま直すと A/B/C/E が壊れる)。
 *
 * モック側の色変数: --orange #f58213 / --muted #6e6a64 / --line #e6dfd4
 * ブレークポイント: モックと同じ順序(<=640px → <=760px)。同じプロパティは 760 側が勝つ。
 */

.ipanel-rtsub--faq {
    --rtfaq-muted: #6e6a64;
    --rtfaq-line: #e6dfd4;
}

/* ---- D-01 ヒーロー(モック .faq-hero)----
 * 松浦さん指摘: 背景クリーム #FAF7F1 → 白 / 左寄せ → 中央寄せ / 見出しをゆったり大きく */
.ipanel-rtsub--faq .rtfaq-hero {
    text-align: center;
    background: #fff;                        /* 実装はクリーム rgb(250,247,241) だった */
    padding: 130px 7vw 105px;
}
.ipanel-rtsub--faq .rtfaq-hero h1 {
    letter-spacing: .04em;
    margin: 15px 0 25px;
    font-family: var(--rts-sans);
    font-size: clamp(54px, 6vw, 88px);       /* @1280 = 76.8px */
    font-weight: 600;
    /* モックの h1 は line-height 1.5(実測 115.2px)。実装側は UA 既定の 1.2 が効いて
       92.16px になりヒーロー全体が 23px 低くなっていたので明示する。 */
    line-height: 1.5;
}
.ipanel-rtsub--faq .rtfaq-hero p {
    color: var(--rtfaq-muted);
    letter-spacing: .04em;
    margin: 0;
    font-family: var(--rts-sans);
    font-size: clamp(17px, 1.6vw, 23px);
    line-height: 1.9;
}

/* ---- D-02 FAQ リスト(モック .faq-list)----
 * 松浦さん指摘: 縦間隔をゆったり / コンテナ幅を絞って中央寄せ / 先頭 1 項目のみ初期展開 */
.ipanel-rtsub--faq .rtfaq-list {
    width: min(1000px, 86vw);
    margin: 0 auto;
    padding: 0 0 135px;
}
.ipanel-rtsub--faq .rtfaq-item {
    border-top: 1px solid var(--rtfaq-line);
    background: #fff;
}
.ipanel-rtsub--faq .rtfaq-item:last-child { border-bottom: 1px solid var(--rtfaq-line); }

.ipanel-rtsub--faq .rtfaq-item summary {
    cursor: pointer;
    display: grid;
    grid-template-columns: 54px 1fr 34px;
    align-items: center;
    gap: 24px;
    min-height: 112px;                       /* 実装は密度が濃かった。モック実測 112px */
    padding: 24px 18px;
    list-style: none;
}
/* ネイティブの三角マーカーを消す(モックと同じ) */
.ipanel-rtsub--faq .rtfaq-item summary::-webkit-details-marker { display: none; }
.ipanel-rtsub--faq .rtfaq-item summary::marker { content: ""; }

.ipanel-rtsub--faq .rtfaq-item summary img,
.ipanel-rtsub--faq .rtfaq-answer > img {
    object-fit: contain; width: 50px; height: 50px;
}
.ipanel-rtsub--faq .rtfaq-item summary > span {
    font-family: var(--rts-sans);
    font-size: clamp(18px, 2vw, 25px);
    font-weight: 600;
    line-height: 1.55;
}

/* モックのトグルは「＋」の文字ではなくオレンジの十字(2 本の線を疑似要素で描く)。
 * 開いているときは縦線を回転させて「−」にする。 */
.ipanel-rtsub--faq .rtfaq-item summary > i { width: 28px; height: 28px; position: relative; }
.ipanel-rtsub--faq .rtfaq-item summary > i::before,
.ipanel-rtsub--faq .rtfaq-item summary > i::after {
    content: "";
    background: var(--rts-orange);
    width: 20px; height: 1px;
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    transition: transform .25s;
}
.ipanel-rtsub--faq .rtfaq-item summary > i::after { transform: translate(-50%, -50%) rotate(90deg); }
.ipanel-rtsub--faq .rtfaq-item[open] summary > i::after { transform: translate(-50%, -50%) rotate(0); }
.ipanel-rtsub--faq .rtfaq-item[open] summary { color: var(--rts-orange); }

.ipanel-rtsub--faq .rtfaq-answer {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 24px;
    padding: 4px 70px 42px 18px;
}
/* モック .faq-answer > div: クリーム地 + オレンジの左罫 */
.ipanel-rtsub--faq .rtfaq-answer > div {
    border-left: 2px solid var(--rts-orange);
    color: #5d5751;
    background: #faf7f2;
    padding: 25px 30px;
    font-size: 13px;
    line-height: 2.05;
}

/* ---- D-03 CTA(モック .faq-contact)----
 * 松浦さん指摘: オレンジ帯セクションを廃止する。
 * ⚠ 073 起票は「白背景 + オレンジ枠白背景ボタン」だったが、**モック実測は違った**:
 *    セクション背景 = クリーム rgb(247,243,237) / ボタン = オレンジ塗り・白文字・border 0。
 *    実測(配信 CSS + computed style)に合わせている。outbox §2 に相違点を記載。 */
.ipanel-rtsub--faq .rtfaq-contact {
    text-align: center;
    background: #f7f3ed;
    padding: 120px 7vw;
}
.ipanel-rtsub--faq .rtfaq-contact h2 {
    margin: 14px 0 24px;
    font-family: var(--rts-sans);
    font-size: clamp(40px, 4.5vw, 64px);
    font-weight: 600;
    line-height: 1.45;
}
.ipanel-rtsub--faq .rtfaq-contact p {
    color: var(--rtfaq-muted);
    font-size: 13px;
    /* .ipanel-rtsub の line-height:1.9 を継承すると 24.7px になりモックとずれる。
       モック実測は 19.5px(= 13px × 1.5)。 */
    line-height: 1.5;
}
.ipanel-rtsub--faq .rtfaq-contact > a {
    background: var(--rts-orange);
    color: #fff;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 260px;
    margin: 35px auto 0;
    padding: 18px 22px;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    /* .ipanel-rtsub の line-height:1.9 を継承するとボタン高さが 70px になる。
       モック実測は 63px(= padding 36px + 内容 27px / line-height 1.5)。 */
    line-height: 1.5;
}
.ipanel-rtsub--faq .rtfaq-contact > a span { font-size: 18px; }
.ipanel-rtsub--faq .rtfaq-contact > a:hover { background: var(--rts-orange-dark); color: #fff; }

/* ---- モックのブレークポイント(<=640px / <=760px)に合わせる ---- */
@media (max-width: 640px) {
    .ipanel-rtsub--faq .rtfaq-hero { padding: 92px 22px 72px; }
    .ipanel-rtsub--faq .rtfaq-hero h1 { font-size: 46px; }
    .ipanel-rtsub--faq .rtfaq-list { width: auto; padding: 0 20px 95px; }
    .ipanel-rtsub--faq .rtfaq-item summary {
        grid-template-columns: 42px 1fr 24px; gap: 13px; min-height: 94px; padding: 19px 3px;
    }
    .ipanel-rtsub--faq .rtfaq-item summary img,
    .ipanel-rtsub--faq .rtfaq-answer > img { width: 40px; height: 40px; }
    .ipanel-rtsub--faq .rtfaq-item summary > span { font-size: 18px; }
    .ipanel-rtsub--faq .rtfaq-answer { grid-template-columns: 42px 1fr; gap: 13px; padding: 0 0 30px 3px; }
    .ipanel-rtsub--faq .rtfaq-answer > div { padding: 20px 17px; font-size: 12px; }
    .ipanel-rtsub--faq .rtfaq-contact { padding: 90px 22px 105px; }
    .ipanel-rtsub--faq .rtfaq-contact h2 { font-size: 36px; }
}
/* モックの <=760px 指定。<=640px より後に置く(モックの順序と同じ)ので同じプロパティはこちらが勝つ。 */
@media (max-width: 760px) {
    .ipanel-rtsub--faq .rtfaq-hero { padding: 78px 22px 65px; }
    .ipanel-rtsub--faq .rtfaq-list { width: calc(100% - 30px); padding-bottom: 90px; }
    .ipanel-rtsub--faq .rtfaq-item summary {
        grid-template-columns: 38px 1fr 24px; gap: 12px; min-height: 88px; padding: 18px 10px;
    }
    .ipanel-rtsub--faq .rtfaq-item summary img,
    .ipanel-rtsub--faq .rtfaq-answer > img { width: 36px; height: 36px; }
    .ipanel-rtsub--faq .rtfaq-item summary > span { font-size: 17px; }
    .ipanel-rtsub--faq .rtfaq-answer { grid-template-columns: 38px 1fr; gap: 12px; padding: 0 10px 30px; }
    .ipanel-rtsub--faq .rtfaq-answer > div { padding: 20px 16px; font-size: 12px; }
    .ipanel-rtsub--faq .rtfaq-contact { padding: 78px 22px; }
}

/* 旧実装(.rtsub-sec > * の max-width:1000px / margin-inline:auto)は D では使わないが、
 * .rtsub-hero に効いていた @media 767px の padding 打ち消しは不要。
 * .rtfaq-* は新規クラスなので共通 CSS の影響を受けない。 */