@charset "UTF-8";

/* =========================================================
   faq.css - よくある質問ページ専用スタイル
   カテゴリタブ（料金・お支払い / 工事・修理 / その他）で
   メイン質問（カード）とサブ質問（アコーディオン）を切り替え表示。

   【配色ロジック】
   セクションの data-active-category に応じて --faq-accent を切り替え、
   見出し・タブ・NOTICE など「選択中カテゴリに連動する部分」の色を制御。
   カード/アコーディオン個別の色は各要素の data-category で直接指定。
   ========================================================= */

.faq-section {
    --faq-price: #E28A24;
    /* 料金・お支払い（濃めオレンジ） */
    --faq-work: var(--color-accent);
    /* 工事・修理（標準オレンジ） */
    --faq-other: #F2AE3C;
    /* その他（明るめオレンジ） */
    --faq-accent: var(--faq-price);
    /* 初期：料金・お支払い */
}

.faq-section[data-active-category="price"] {
    --faq-accent: var(--faq-price);
}

.faq-section[data-active-category="work"] {
    --faq-accent: var(--faq-work);
}

.faq-section[data-active-category="other"] {
    --faq-accent: var(--faq-other);
}

/* セクション見出し画像（faq-head.png）は中央配置 */
.faq-section .section-title__heading-img {
    margin-inline: auto;
}

/* FAQセクション全体の最大幅をブレークポイントで段階的に広げる。
     ベース（〜575px）：制限なし（画面幅なり）
     576px以上：576px（--section-width-sm）
     768px以上：640px（--section-width-sm-plus）
     1024px以上：1024px（--section-width-lg）
   ※ 共通の .l-container（全ページ共用）1200px には影響させないよう
     .faq-section 内に限定する。 */
@media (min-width: 576px) {
    .faq-section .l-container {
        max-width: var(--section-width-sm);
    }
}

@media (min-width: 768px) {
    .faq-section .l-container {
        max-width: var(--section-width-sm-plus);
    }
}

@media (min-width: 1024px) {
    .faq-section .l-container {
        max-width: var(--section-width-lg);
    }
}

/* =========================================================
   カテゴリ選択タブ
   ========================================================= */
/* タブを囲む緑背景wrapper（青緑地＋ゴールド枠線）。
   ※ 幅制限・中央寄せ・下余白は wrapper 側に持たせる。
   ※ 装飾パターン（bg-deco.png）は ::before に分離して地の上に敷く
     （共通お問い合わせの .contact-cta__*-block と同じ手法）。
     position:relative は ::before の基準。 */
.faq-tabs__wrap {
    position: relative;
    margin: 0 auto var(--spacing-lg);
    padding: 1.25rem;
    background-color: var(--color-cream-white);
    border: 3px solid var(--color-gold-deep);
    border-radius: var(--radius-lg);
}

@media (min-width: 576px) {
    .faq-tabs__wrap {
        max-width: var(--section-width-sm);
        padding: 1.5rem 2rem;
    }
}

@media (min-width: 768px) {
    .faq-tabs__wrap {
        max-width: var(--section-width-sm-plus);
    }
}

/* 装飾パターン（bg-deco.png）。青緑地の上、中身の下に敷く。
   ※ タイルの大きさは --cta-deco-size、濃さは --cta-deco-opacity（共通CTAと同値）。
   ※ 親の角丸（--radius-lg）を継承させる（inherit）。
   ※ クリックを吸わない（pointer-events:none）。 */
.faq-tabs__wrap::before {
    content: "";
    --cta-deco-size: 72px;
    --cta-deco-opacity: 0.125;

    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('../images/bg-deco.png');
    background-repeat: repeat;
    background-size: var(--cta-deco-size);
    opacity: var(--cta-deco-opacity);
    border-radius: inherit;
    pointer-events: none;
}

.faq-tabs {
    container-type: inline-size;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
}

.faq-tabs__label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-light);
    letter-spacing: 0.04em;
}

@media (min-width: 768px) {
    .faq-tabs__label {
        font-size: 1.05rem;
    }
}

.faq-tabs__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

@media (min-width: 576px) {
    .faq-tabs__list {
        gap: 0.75rem;
    }
}

.faq-tab {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    padding: 0.6rem 1.1rem;
    font-family: inherit;
    font-size: 0.925rem;
    font-weight: 700;
    color: var(--color-text-light);
    background-color: var(--color-white);
    border: 3px solid var(--color-border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: color var(--transition), background-color var(--transition), border-color var(--transition);
}

@media (min-width: 475px) {
    .faq-tab {
        font-size: 0.95rem;
    }
}

@media (min-width: 576px) {
    .faq-tab {
        flex: 0 1 auto;
        min-width: 140px;
        padding: 0.7rem 1.75rem;
        font-size: 1rem;
    }
}

/* 3つが1行に収まらない幅では、1番目（工事・修理）を単独で全幅にし、
   残り2つ（料金・お支払い／その他）をその下に横並びで置く。
   ※ ビューポート幅ではなくタブ帯の実幅（コンテナクエリ）で判定するため、
     ラッパーの max-width が変わっても折り返し時は必ずこの見た目になる。
   ※ 閾値はラッパーが 576px の区間（576〜767px）で折り返しレイアウトになる値。
     （576px ラッパー − padding 2rem×2 − border 3px×2 ≒ 506px、
       640px ラッパー ≒ 570px なのでその間に取る） */
@container (max-width: 540px) {

    /* 2段目の2つ（料金・お支払い／その他）も横幅を分け合って全幅にする。
       ※ 576px以上で効いている min-width:140px / flex:0 1 auto を打ち消す。 */
    .faq-tabs__list .faq-tab {
        flex: 1 1 0;
        min-width: 0;
    }

    /* 1番目（工事・修理）は単独で全幅。
       ※ 上の flex 指定を上書きするためこちらを後に置く。 */
    .faq-tabs__list .faq-tab:first-child {
        flex-basis: 100%;
    }
}

@media (min-width: 768px) {
    .faq-tab {
        font-size: 1.05rem;
    }
}

/* タブの色（カテゴリ別）：hover は枠線だけ、active は塗りつぶし */
.faq-tab[data-category="price"]:hover {
    border-color: var(--faq-price);
    color: var(--faq-price);
}

.faq-tab[data-category="work"]:hover {
    border-color: var(--faq-work);
    color: var(--faq-work);
}

.faq-tab[data-category="other"]:hover {
    border-color: var(--faq-other);
    color: var(--faq-other);
}

.faq-tab[data-category="price"].is-active {
    background-color: var(--faq-price);
    border-color: var(--faq-price);
    color: var(--color-white);
}

.faq-tab[data-category="work"].is-active {
    background-color: var(--faq-work);
    border-color: var(--faq-work);
    color: var(--color-white);
}

.faq-tab[data-category="other"].is-active {
    background-color: var(--faq-other);
    border-color: var(--faq-other);
    color: var(--color-white);
}

/* =========================================================
   コンテンツ共通
   ========================================================= */
.faq-content {
    max-width: var(--section-width-lg);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

/* セクション内見出し（よく寄せられるご質問 / その他のご質問） */
.faq-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: var(--spacing-sm);
}

/* 見出し左の蚌口アイコン（選択中カテゴリの色に連動） */
.faq-heading__icon-wrap {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    background-color: var(--color-cream-white);
    border: 2px solid var(--faq-accent);
    border-radius: 50%;
    transition: border-color var(--transition);
}

.faq-heading__icon {
    display: block;
    width: 1.5rem;
    height: auto;
    color: var(--faq-accent);
    transition: color var(--transition);
}

@media (min-width: 768px) {
    .faq-heading__icon-wrap {
        width: 3rem;
        height: 3rem;
    }
}

.faq-heading__text {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: #3a3a3a;
    letter-spacing: 0.04em;
}

@media (min-width: 768px) {
    .faq-heading__text {
        font-size: 1.35rem;
    }
}

/* =========================================================
   メイン質問（カード）
   トップページの FAQ カード（Q/A バッジ方式）を踏襲。
   ・Qバッジ：選択中カテゴリ色（各カードの --card-accent）
   ・Aバッジ：青（primary）固定でコントラストを保つ
   ========================================================= */
.faq-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* 開いているカードがある間は高さ揃えを解除（各カードは中身なりの高さ）。
   非展開時は未指定（グリッド既定の stretch）のままなので、
   隣り合うカードが高い方に揃う。 */
.faq-cards.has-open {
    align-items: start;
}

/* 768～1023px：1列のままカードが横に間延びしないよう、
   トップの質問カードと同じ幅（--section-width-sm-plus＝640px）で中央寄せ。 */
@media (min-width: 768px) {
    .faq-cards {
        max-width: var(--section-width-sm-plus);
        margin-inline: auto;
    }
}

@media (min-width: 1024px) {
    .faq-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
        max-width: none;
    }
}

.faq-card {
    /* Qバッジ＝オレンジ系（--card-accent）、Aバッジ＝青系（--card-accent-a）を
       それぞれカテゴリごとの濃淡で連動させる。 */
    --card-accent: var(--color-accent);
    --card-accent-a: var(--color-primary);

    /* 飾り枠（.faq-card__frame）の対角・描画サイズ（トップの FAQ カードと揃える）。 */
    --frame-inset: 10px;
    --frame-corner: 35px;
    --frame-line: 1.05px;
    --frame-line-color: #8f9e9d;
    --frame-band: 6px;
    --frame-line-pos: -2px;

    position: relative;
    padding: 2rem;
    background-color: var(--color-cream-white);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
}

/* 飾り枠8パーツ（四隅4＋四苺4）の入れ物。JS（faq.js）が span×8 を生成する。
   ※ トップ（index.css の .faq-card__frame）と同手法。iOS Safari 対策で
     border-image を使わず background-image の切り出しで組む。 */
.faq-card__frame {
    position: absolute;
    inset: var(--frame-inset);
    z-index: 1;
    pointer-events: none;
}

.faq-card__frame span {
    position: absolute;
    background-repeat: no-repeat;
}

/* 四隅（固定サイズ）― frame.svg を切り出し。 */
.faq-card__frame span.c {
    width: var(--frame-corner);
    height: var(--frame-corner);
    background-image: url("../images/frame.svg");
    background-size:
        calc(180px * (var(--frame-corner) / 35)) calc(126px * (var(--frame-corner) / 34));
}

.faq-card__frame span.tl {
    top: 0;
    left: 0;
    background-position: left top;
}

.faq-card__frame span.tr {
    top: 0;
    right: 0;
    background-position: right top;
}

.faq-card__frame span.bl {
    bottom: 0;
    left: 0;
    background-position: left bottom;
}

.faq-card__frame span.br {
    bottom: 0;
    right: 0;
    background-position: right bottom;
}

/* 四苺（伸縮）― linear-gradient で線を描く。 */
.faq-card__frame span.et,
.faq-card__frame span.eb {
    left: var(--frame-corner);
    width: calc(100% - var(--frame-corner) * 2);
    height: var(--frame-band);
    background-image: linear-gradient(to bottom,
            transparent calc(50% - var(--frame-line) / 2),
            var(--frame-line-color) calc(50% - var(--frame-line) / 2),
            var(--frame-line-color) calc(50% + var(--frame-line) / 2),
            transparent calc(50% + var(--frame-line) / 2));
}

.faq-card__frame span.et {
    top: calc(var(--frame-line-pos) + 0.59px);
}

.faq-card__frame span.eb {
    bottom: calc(var(--frame-line-pos) + 0.59px);
}

.faq-card__frame span.el,
.faq-card__frame span.er {
    top: var(--frame-corner);
    height: calc(100% - var(--frame-corner) * 2);
    width: var(--frame-band);
    background-image: linear-gradient(to right,
            transparent calc(50% - var(--frame-line) / 2),
            var(--frame-line-color) calc(50% - var(--frame-line) / 2),
            var(--frame-line-color) calc(50% + var(--frame-line) / 2),
            transparent calc(50% + var(--frame-line) / 2));
}

.faq-card__frame span.el {
    left: var(--frame-line-pos);
}

.faq-card__frame span.er {
    right: var(--frame-line-pos);
}

.faq-card[data-category="price"] {
    --card-accent: #E28A24;
    --card-accent-a: var(--color-primary-dark);
}

.faq-card[data-category="work"] {
    --card-accent: var(--color-accent);
    --card-accent-a: var(--color-primary);
}

.faq-card[data-category="other"] {
    --card-accent: #F2AE3C;
    --card-accent-a: var(--color-primary-light);
}

/* カード上部（Qバッジ＋質問・常に表示） */
.faq-card__top {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 0;
    cursor: pointer;
}

/* Qバッジ（カテゴリ色の丸） */
.faq-card__q-badge {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    font-family: var(--font-en);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-white);
    background-color: var(--card-accent);
    border-radius: 50%;
}

.faq-card__question {
    flex: 1;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.5;
    color: #4a4a4a;
}

@media (min-width: 768px) {
    .faq-card__question {
        font-size: 1.25rem;
    }
}

/* カード下部（ボタンと回答）
   ※ gap には transition を掛けない（iOS Safari で開閉中に飾り枠の
     再描画が落ちるのを防ぐため。トップの .faq-card__bottom と同じ）。 */
.faq-card__bottom {
    padding: 0.25rem 0 1rem;
    background-color: var(--color-cream-white);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq-card.is-open .faq-card__bottom {
    gap: 1rem;
}

/* 回答エリア（開閉） */
.faq-card__answer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height var(--transition), opacity var(--transition);
}

.faq-card.is-open .faq-card__answer {
    opacity: 1;
}

.faq-card__answer-text {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #4a4a4a;
    text-align: left;
    overflow-wrap: break-word;
}

/* Aバッジ（青の丸・カテゴリごとの青濃淡・Qバッジと同サイズ） */
.faq-card__a-badge {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    font-family: var(--font-en);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-white);
    background-color: var(--card-accent-a);
    border-radius: 50%;
}

/* 「回答を見る」ボタン（青緑の塗り・白文字・トップと同じ） */
.faq-card__toggle {
    width: 100%;
    background-color: var(--color-teal-deep);
    padding: 0.85rem 1.25rem;
    border: none;
    border-radius: var(--radius-pill);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: background-color var(--transition), transform var(--transition);
}

.faq-card__toggle:hover {
    background-color: var(--color-teal-deep-hover);
}

.faq-card__toggle:active {
    transform: scale(0.98);
}

.faq-card__toggle-icon {
    font-size: 0.85rem;
    transition: transform var(--transition);
}

.faq-card.is-open .faq-card__toggle-icon {
    transform: rotate(180deg);
}

/* =========================================================
   サブ質問（横並びアコーディオン）
   ========================================================= */
.faq-sub__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* 1024px以上：メイン質問カードと揃えて2カラムにする。
   ※ アコーディオンを開いたとき、同じ行の隣が不必要に伸びないよう
     align-items:start で各アイテムを中身なりの高さにする。 */
@media (min-width: 1024px) {
    .faq-sub__list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: start;
        gap: 1rem;
    }
}

.faq-sub__item {
    --sub-accent: var(--color-accent);
    --sub-accent-a: var(--color-primary);

    position: relative;
    background-color: var(--color-cream-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--transition);
}

.faq-sub__item[data-category="price"] {
    --sub-accent: #E28A24;
    --sub-accent-a: var(--color-primary-dark);
}

.faq-sub__item[data-category="work"] {
    --sub-accent: var(--color-accent);
    --sub-accent-a: var(--color-primary);
}

.faq-sub__item[data-category="other"] {
    --sub-accent: #F2AE3C;
    --sub-accent-a: var(--color-primary-light);
}

.faq-sub__item:hover {
    box-shadow: var(--shadow-md);
}

.faq-sub__header {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    padding: 1rem 1.25rem;
    font-family: inherit;
    text-align: left;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

@media (min-width: 768px) {
    .faq-sub__header {
        padding: 1.15rem 1.25rem;
    }
}

/* Qバッジ（カテゴリ色の丸） */
.faq-sub__q-badge {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    font-family: var(--font-en);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-white);
    background-color: var(--sub-accent);
    border-radius: 50%;
}

.faq-sub__q {
    flex: 1;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-title);
}

@media (min-width: 768px) {
    .faq-sub__q {
        font-size: 1.15rem;
    }
}

.faq-sub__toggle {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--color-bg-light);
}

.faq-sub__toggle-icon {
    font-size: 0.8rem;
    color: var(--color-primary-dark);
    transition: transform var(--transition);
}

.faq-sub__item.is-open .faq-sub__toggle-icon {
    transform: rotate(180deg);
}

.faq-sub__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
}

.faq-sub__answer-inner {
    padding: 0.25rem 1.25rem 1.25rem;
    opacity: 0;
    transition: opacity var(--transition);
}

@media (min-width: 768px) {
    .faq-sub__answer-inner {
        padding: 0.25rem 1.25rem 1.5rem;
    }
}

.faq-sub__item.is-open .faq-sub__answer-inner {
    opacity: 1;
}

.faq-sub__answer-text {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-text);
    text-align: left;
    overflow-wrap: break-word;
}

/* Aバッジ（青の丸・カテゴリごとの青濃淡・Qバッジと同サイズ） */
.faq-sub__a-badge {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    font-family: var(--font-en);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-white);
    background-color: var(--sub-accent-a);
    border-radius: 50%;
}

/* =========================================================
   注意書き（NOTICE）
   クリーム地の角丸ボックス。背景に bg-deco のパターンを敷く。

   【余白の管理】
   ・箱の内側余白＝.faq-notice の padding で一元管理。
   ・中身の間隔＝flex の gap で管理。

   ※ ::before は以前飾り枠（frame.svg）で使っていたが現在は削除。
     bg-deco のパターン（::after）の基準、および上端に重ねるスタッフイラストの基準として
     position:relative は残す。
   ※ 上端にイラスト（.faq-notice__staff）が上にはみ出すため、
     margin-top でイラスト分の余白を上に確保する。 */
.faq-notice {
    position: relative;
    max-width: var(--section-width-sm-plus);
    margin: 8rem auto 0;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    background-color: var(--color-cream-white);
    border: 3px solid var(--color-gold-deep);
    border-radius: var(--radius-lg);
}

@media (min-width: 576px) {
    .faq-notice {
        padding: 2rem 1.25rem;
        gap: 1.5rem;
    }
}

/* 背景の装飾パターン（bg-deco.png）。クリーム地の上、中身の下に敷く。
   ※ faq-tabs__wrap / 共通お問い合わせのブロックと同じ手法・同値（size 72px / opacity 0.175）。
   ※ ::before は飾り枠（frame.svg）で使用中のため、パターンは ::after に敷く。
   ※ 親の角丸（--radius-lg）を継承させる（inherit）。
   ※ クリックを吸わない（pointer-events:none）。 */
.faq-notice::after {
    content: "";
    --cta-deco-size: 72px;
    --cta-deco-opacity: 0.125;

    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('../images/bg-deco.png');
    background-repeat: repeat;
    background-size: var(--cta-deco-size);
    opacity: var(--cta-deco-opacity);
    border-radius: inherit;
    pointer-events: none;
}

/* 中身（本文・ボタン）は背景パターン（::after）より前面に出す。 */
.faq-notice>* {
    position: relative;
    z-index: 1;
}

/* 見出し（呼びかけ）。スタッフイラストの直下・本文の上に置く。
   選択中カテゴリの色（--faq-accent）に連動させ、タブ・アイコンと調和させる。
   ※ テキストの両脇に水滴ドット（water-drop-d.png）を疑似要素で置き、
     サイト共通の水滴モチーフで挟む形にする。 */
.faq-notice__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--faq-accent);
    transition: color var(--transition);
}

/* 両脇の水滴アイコン（water-drop.svg をインラインで読み込み）。
   左右で向きを揃えるため右側は左右反転させる。
   ※ SVG は縦長（44.37×64）。幅を控えめにして文字と釣り合わせる。 */
.faq-notice__title-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 0.75rem;
}

.faq-notice__title-icon--right {
    transform: scaleX(-1);
}

/* SVG 本体。見出しと同じカテゴリ色に連動させる。
   ※ 元ファイルの path に fill="none" が直書きされているため、
     currentColor で塗りを上書きする。 */
.faq-notice__title-icon svg {
    display: block;
    width: 100%;
    height: auto;
    color: var(--faq-accent);
    transition: color var(--transition);
}

.faq-notice__title-icon svg path {
    fill: currentColor;
}

@media (min-width: 768px) {
    .faq-notice__title {
        gap: 0.75rem;
    }

    .faq-notice__title-icon {
        width: 0.85rem;
    }
}

/* 本文文頭のインフォメーションアイコン（選択中カテゴリの色に連動）。
   ※ 本文（.faq-notice__text）の先頭にインラインで置く。 */
.faq-notice__icon {
    margin-right: 0.5rem;
    color: var(--faq-accent);
    transition: color var(--transition);
}

/* 本文（左揃え）。余白は親に任せ、自身は margin/padding を持たない。
   ・幅いっぱいに広げて左揃えにする（align-items:center の中で本文だけ左揃え）。 */
.faq-notice__text {
    width: 100%;
    font-size: 1rem;
    line-height: 1.9;
    color: var(--color-text);
    text-align: left;
}

@media (min-width: 576px) {
    .faq-notice__text {
        font-size: 1.05rem;
    }
}

/* スタッフイラスト（staff-notice.png）。notice ボックスの上端中央に、
   上へはみ出す形で重ねる（ボックス外・上側に配置）。
   ※ 基準は .faq-notice（position:relative）。上辺（bottom:100%）から
     少し notice に食い込む位置に置く（translateY で下げる）。
   ※ 最背面（z-index:-1）に置き、notice の背景の後ろに回す。
     → notice に重なった下部は隠れ、上にはみ出した部分だけが背面から覚く。
   ※ はみ出し分の余白は .faq-notice の margin-top で確保済み。 */
.faq-notice__staff {
    position: absolute;
    left: 50%;
    bottom: 100%;
    z-index: -1;
    width: 104px;
    transform: translate(-50%, 15%);
    pointer-events: none;
}

@media (min-width: 768px) {
    .faq-notice__staff {
        width: 112px;
    }
}

/* =========================================================
   質問なし
   ========================================================= */
.faq-empty {
    text-align: center;
    color: var(--color-text-light);
    padding-block: var(--spacing-lg);
}