@charset "UTF-8";
/* ========================================
   Lien café STAYGOLD - contact.css
   お問い合わせ／送信完了ページ
======================================== */

/* ヒーロー写真（page-hero-contact.webp）のフォーカス位置。common.cssの.page-hero__bgは全ページ共通で
center固定なので、ここでのみ上書きする。 */
.page-contact .page-hero__bg {
    background-position: center 25%;
}

/* ========================================
   電話セクション（見出し＋電話カード＋補足文）+右側の画像
   ※ ベース（768px未満）は縦積み。768px以上で左右真っ二つ（50%ずつ）に分け、
     右側に写真（.tel-section__media）を置く。 */
.tel-section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* 上パディングはなくす、下パディングは4rem（.section--pad本来の値と同じ）にする（768px未満のみ。768px以上は下の@mediaで引き続き0に戻す）。
   ※ .tel-section__imgが直後に続くので、以前は下も。0にしていた。 */
.tel-section-outer.section--pad {
    padding-top: 0;
    padding-bottom: 4rem;
}

/* セクション側の上下パディングをなくした分、テキスト側（telボックス）はこちらで上下の余白を持つ。
   ※ 768px未満は上のみ（下は0、直後の画像に寄せる）。768px以上は上下とも持たせる（左右分割レイアウトで中央揃えするため）。 */
.tel-section__body {
    padding-top: var(--spacing-xl);
    padding-bottom: 0;
}

@media (min-width: 768px) {
    .tel-section__body {
        padding-bottom: var(--spacing-xl);
    }
}

/* .tel-section__imgは写真のみ（キャプションなし）。商品名はtel-supplementのテキストですでに説明しているので、
   画像側に重ねて載せると情報が二重になるため写真単体にしている。
   ※ 影（box-shadow）は付けない（768px未満・以上ともに）。 */
.tel-section__img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-lg);
    /* 写真がフェードインしてくる間も枠の形が見えるよう、地色を持たせる
       （トップの.cat-band__link・.pick-showcase__imgと同じ考え方）。 */
    background-color: var(--color-bg-light);
    box-shadow: none;
}

.tel-section__img picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* 画像のオーバーレイ。全面一様に濃茶 opacity 0.1 のべた掛け。
   ※ z-index 1：画像（picture/img）より上、値段（.tel-section__price、z-index 2）より下。 */
.tel-section__img::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(53, 48, 43, 0.1);
    pointer-events: none;
}

.tel-section__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    /* 初期状態（未表示）。トップページのメニュー帯（.cat-band__img）と同じ
       フォーカスイン演出（少し拡大＋透明→定位置・不透明に収束）。
       ※ transformの遅延はopacityと共用しない（理由はindex.cssの.cat-band__imgのコメント参照）。 */
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 1s ease var(--reveal-delay, 0s),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.tel-section__media.is-revealed .tel-section__img img {
    opacity: 1;
    transform: scale(1);
}

/* 画像右下の値段バッジ。画像（picture/img）より前面に出すためz-indexを付ける。
   ※ 価格は視認性重視でゴシック体。白のアウトライン（枚線）＋白文字、背景なし。 */
.tel-section__price {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 2;
    display: inline-flex;
    align-items: baseline;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-text-white);
    font-family: var(--font-family);
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    color: var(--color-text-white);
}

/* 1280以上は参照画像（picture）を横長に切り替えるのに合わせて、フォーカス位置を上端（center 0）にする。 */
@media (min-width: 1280px) {
    .tel-section__img img {
        object-position: center 0;
    }
}

@media (min-width: 768px) {
    /* page-heroの中でも「実際に見せたい部分」（ゴールドの線・濃茶の境界線・写真本体）だけを画像より前面に出す。
       .page-hero-wrap自体（地色、つまりチップ部分）はz-indexを触らずに置いておくことで、
       チップ部分（楽円の外側・の地色部分）だけは画像の方が上に見えて浸食が見えるようにする。
       （前回は.page-hero-wrapを丸ごと前面に固定してしまい、チップ部分も画像より上になって浸食が見えなくなっていた）。
       ※ thanks.phpはbody_classに'page-contact'も含むので、このセレクタだけで両方に利く。
       ※※ .page-hero-wrap::before/::afterは元々position: absolute; inset: 0;で楽円clip-pathを作っているので、
         ここでpositionを上書きしない（z-indexだけを追加する）。position: relativeで上書きするとレイアウトが崩れ、
         ゴールドの線自体が見えなくなってしまう（実際に発生した不具合）。
       ※※※ 元々の重なり順（濃茶の境界線 < ゴールドの線 < 写真本体）を保つため、
         3つを全て同一z-indexにしない（同一値にするとDOM順のタイブレークで::after（ゴールドの塗りつぶし層）が
         写真本体より上に来てしまい、page-hero全体が金色で埋まる不具合が実際に発生した）。 */
    .page-contact .page-hero-wrap::before {
        z-index: 3;
    }
    .page-contact .page-hero-wrap::after {
        z-index: 4;
    }
    .page-contact .page-hero {
        position: relative;
        z-index: 5;
    }
    .tel-section-outer {
        position: relative;
        z-index: 2;
    }

    /* 768px以上は左右分割レイアウトになり、画像がセクションの上下端までフルブリードで塗り切る必要があるので、
       下パディングも768px未満だけの値（4rem）を打ち消して0に戻す。
       このセクションだけ.section--padの左右パディングと.inner--narrowの幅制限を外す（上パディングは.section--pad本来の値のまま）。 */
    .tel-section-outer.section--pad {
        padding-inline: 0;
        padding-bottom: 0;
    }
    .tel-section-outer .inner.inner--narrow {
        max-width: none;
        padding-inline: 0;
    }
    .tel-section {
        flex-direction: row;
        align-items: stretch;
        gap: 0;
    }
    .tel-section__body {
        flex: 1 1 50%;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* セクションの左右パディングを外した分、テキスト側の左右余白はこちらで持つ。
           右パディングがそのまま画像との間隔になる。 */
        padding-inline: var(--gutter);
    }
    /* カードの幅制限は768px以上だけ戻す（768px未満は全幅）。 */
    .tel-section__card {
        max-width: 30rem;
    }
    .tel-section__media {
        flex: 1 1 50%;
        display: flex;
    }
    /* 右側の画像を上に押し上げてpage-hero部分に重なる（浸食）させる。
       ※ 浸食量はpage-hero側のクリップ帯の高さ（--page-hero-arc-height、common.css参照）に合わせる。
         この変数は.page-heroのスコープ内でしか参照できない（.tel-section__imgは.page-heroの子孫ではないためvar()を直接使えない）ので、
         768px以上での値（6rem）をここで同じだけ定数として持たせている。
       ※ ゴールドの線・濃茶の境界線・写真本体（.page-hero-wrap::before/::after、.page-hero）はz-indexで常に画像より前面に固定してあるので、
         この量でもゴールドラインを画像が覆う心配はない（重なる部分は常にヒーロー側が上に見える）。
       ※ .tel-section__media自体はflexアイテムとして通常通り align-items: stretch で行の高さに合わせる（レイアウトに影響を与えない）。
         子の.tel-section__img（実際の写真ボックス）だけをmargin-topで上にはみ出させ、分の高さをheightで足すことで
         下端は行の下端に揃えたまま、上端だけ上にはみ出す。
       ※ 画像部分はフルブリード（画面端まで塗り切る）なので角丸・枚線は付けない（影は基本値でもすでにnone）。 */
    .tel-section__img {
        flex: 1;
        height: auto;
        margin-top: -6rem;
        aspect-ratio: auto;
        border-radius: 0;
    }
}

/* ========================================
   telbox（見出し＋電話カード＋補足文）をまとめたカード
   ※ includes/sec-links.phpの.link-panel（白い紙目テクスチャ背景＋ゴールドの内側線）と同じスタイルに揃えている。
   ※ 以前は.tel-card自体にこのスタイルを当てていたが、見出し・補足文も含めたセクション全体を
     1枚のカードとしてまとめるため、.tel-section__card（新規ラッパー）に移した。
======================================== */
.tel-section__card {
    position: relative;
    max-width: none;
    margin-inline: auto;
    padding: 2.5rem 2rem;
    background-color: var(--color-bg);
    background-image:
        url('../images/white-bg.webp'),
        var(--img-placeholder);
    background-size: 600px auto, auto;
    background-repeat: repeat, repeat;
    background-position: center, center;
    border-radius: var(--radius-xl);
    overflow: hidden;
}

/* ゴールドの内側線（.link-panel::beforeと同じ）。 */
.tel-section__card::before {
    content: '';
    position: absolute;
    inset: 0.75rem;
    z-index: 1;
    border: 1px solid rgba(191, 160, 106, 0.45);
    border-radius: calc(var(--radius-xl) - 0.75rem);
    pointer-events: none;
}

/* 直子（見出し・電話リンク・補足文）を内側線より前面に出す。 */
.tel-section__card > * {
    position: relative;
    z-index: 1;
}

/* 見出しのリボン（.ribbon-head、common.css参照）を中央配置にし、幅もテキストの実幅に合わせる。
   ※ .ribbon-headは共通クラスなのでここでは上書きせず、このカード内だけにスコープ。
   ※ 既定はdisplay: flex（幅指定なし）なので親幅いっぱいに伸びる。width: fit-contentで実幅に縮め、
     margin-inline: autoで中央に寄せる（displayはflexのままなのでアイコン＋タイトルの幅中寄せは引き続き正常に動く）。 */
.tel-section__card .ribbon-head {
    width: fit-content;
    margin-inline: auto;
}

/* 1024px未満はリボンタイトルを小さくする（common.cssの基本値は768px以上で1.125remに拡大するが、このページでは1024px未満まで押さえる）。
   ※ .ribbon-headは共通クラスなのでここでは上書きせず、このページ内の、2箇所（電話カード内・Mail Formセクション）だけにスコープ。 */
.tel-section__card .ribbon-head__title,
.contact-section .ribbon-head__title {
    font-size: 0.9375rem;
}

@media (min-width: 1024px) {
    .tel-section__card .ribbon-head__title,
    .contact-section .ribbon-head__title {
        font-size: 1.125rem;
    }
}

/* ========================================
   電話リンク
======================================== */
.tel-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    text-align: center;
}

.tel-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-primary-light);
    background-color: var(--color-white);
    color: var(--color-primary-dark);
    font-size: 1.25rem;
}

.tel-card__num {
    /* 電話番号は視認性重視でゴシック体 */
    font-family: var(--font-family);
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: var(--color-title);
    transition: color var(--transition);
}

/* ホバー時は電話番号だけゴールドにする（アイコンの持ち上がり・色変化はなし）。 */
.tel-card:hover .tel-card__num {
    color: var(--color-gold);
}

.tel-card__note {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--color-text-light);
}

.tel-supplement {
    margin-top: var(--spacing-sm);
    font-size: 0.8125rem;
    text-align: left;
    color: var(--color-text-light);
}

/* 強調（「詳しい価格についてはお問い合わせください。」など）。
   ※ 補足文は薄い色（--color-text-light）なので、太字に加えて文字色も濃くして目を止める。
     menu.php の .menu-block__note strong と同じ指定。 */
.tel-supplement strong {
    font-weight: 700;
    color: var(--color-primary-dark);
}

.tel-supplement a {
    color: var(--color-primary-dark);
    text-decoration: underline;
    text-underline-offset: 0.25em;
    transition: color var(--transition);
}

.tel-supplement a:hover {
    color: var(--color-gold);
}

@media (min-width: 768px) {
    .tel-card__num {
        font-size: 2.25rem;
    }
}

/* ========================================
   フォーム（Mail Formセクション全体）
======================================== */
.contact-section {
    background-color: var(--color-bg);
    background-image: url('../images/white-bg.webp');
    background-size: 600px auto;
    background-repeat: repeat;
    background-position: center;
}

/* 見出しのリボン（.ribbon-head、common.css参照）を中央配置にし、幅もテキストの実幅に合わせる。
   ※ tel-section__card内のリボンと同じ考え方。.ribbon-headは共通クラスなのでここでは上書きせず、このセクション内だけにスコープ。 */
.contact-section .ribbon-head {
    width: fit-content;
    margin-inline: auto;
}

.contact-note {
    margin-bottom: var(--spacing-xl);
}

.contact-note strong {
    font-weight: 700;
    color: var(--color-primary-dark);
}

.contact-note__tel {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    /* 電話番号は視認性重視でゴシック体 */
    font-family: var(--font-family);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-primary-dark);
    transition: color var(--transition);
}

.contact-note__tel i {
    font-size: 0.875rem;
    color: var(--color-gold);
}

.contact-note__tel:hover {
    color: var(--color-gold);
}

.contact-note__hours {
    margin-left: 0.375rem;
    font-size: 0.75rem;
}

/* 行 */
.form-row {
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.form-row__head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.625rem;
}

/* 項目名（お名前・メールアドレスなど）。
   ※ 見出し体（--font-heading＝Zen Old Mincho）ではなく、視認性重視で
     ゴシック（--font-family＝Zen Kaku Gothic New）にする。 */
.form-label {
    font-family: var(--font-family);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--color-title);
}

.form-badge {
    flex-shrink: 0;
    padding: 0.1875rem 0.625rem;
    border-radius: var(--radius-xs);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    line-height: 1.4;
    color: var(--color-text-white);
}

.form-badge--required {
    background-color: var(--color-gold);
}

.form-badge--optional {
    background-color: var(--color-text-light);
}

/* 入力欄 */
.form-input,
.form-textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-white);
    font-family: inherit;
    font-size: 1rem; /* iOSの自動ズーム防止のため16px相当 */
    line-height: 1.7;
    color: var(--color-text);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: #BDB5AA;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(122, 98, 80, 0.12);
}

/* ※ 右下のリサイズつまみ（斜線）を出さない。resize: vertical のままだと
     ブラウザがつまみを描くので、resize 自体を none にしている。
     高さは rows="8" と min-height で十分確保している。 */
.form-textarea {
    resize: none;
    min-height: 10rem;
}

/* ラジオ。項目は3つ（メニュー・店舗・その他）。
   ※ 2026/10：「採用について」を外して4つ→3つになった。
     1024px未満は入力欄の幅に3つ並べると「メニューについて」が折り返すので、2列（2＋1）のまま。
     1024px以上は幅に余裕があるので3列にして1行に収める（下の@media参照）。
     採用を戻して4つにするときは、1024px以上の3列指定を削除して全2列に戻す。 */
.form-radios {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem 1rem;
}

.form-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
}

.form-radio input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.form-radio__mark {
    position: relative;
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background-color: var(--color-white);
    transition: border-color var(--transition);
}

.form-radio__mark::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background-color: var(--color-primary);
    transform: translate(-50%, -50%) scale(0);
    transition: transform var(--transition);
}

.form-radio input:checked + .form-radio__mark {
    border-color: var(--color-primary);
}

.form-radio input:checked + .form-radio__mark::after {
    transform: translate(-50%, -50%) scale(1);
}

.form-radio input:focus-visible + .form-radio__mark {
    box-shadow: 0 0 0 3px rgba(122, 98, 80, 0.18);
}

.form-radio__text {
    font-size: 0.9375rem;
}

/* エラー表示 */
.form-row__error {
    display: none;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: #C4756B;
}

/* 文頭のアイコン（fa-circle-exclamation）は contact.js が差し込む。他案件と同じ作り。
   ※ flex ではなくインライン配置にしている。エラー文が2行に折り返したときも
     アイコンが1行目の先頭に残るようにするため（flex だとブロック全体の縦中央にずれる）。 */
.form-row__error i {
    margin-right: 0.375rem;
    font-size: 0.875rem;
}

.form-row.is-error .form-row__error {
    display: block;
}

.form-row.is-error .form-input,
.form-row.is-error .form-textarea {
    border-color: #C4756B;
    background-color: #FDF8F7;
}

/* honeypot（画面外に隠す） */
.form-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* 送信ボタン */
.form-submit {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-xl);
}

.contact-submit {
    min-height: 3.75rem;
}

/* 送信ボタンをページャー（.news-pager__num、news.css参照）と同じ配色にする（.btn--outlineは他ページでも使う共通クラスなので、このページ内だけにスコープ）。 */
.contact-submit.btn--outline {
    color: var(--color-title-brown);
    border-color: var(--color-title-brown);
}

.contact-submit.btn--outline:hover {
    background-color: var(--color-title-brown);
    border-color: var(--color-title-brown);
    color: var(--color-text-white);
}

@media (min-width: 768px) {
    .form-row {
        display: flex;
        gap: var(--spacing-md);
        padding: var(--spacing-md) 0;
    }
    .form-row__head {
        flex: 0 0 12rem;
        align-items: center;
        margin-bottom: 0;
    }
    .form-row__body {
        flex: 1;
    }
    .form-radios {
        gap: 0.75rem 1.5rem;
    }
}

@media (min-width: 1024px) {
    .form-radios {
        grid-template-columns: repeat(3, auto);
        justify-content: start;
        column-gap: 2.5rem;
    }
}

/* ========================================
   個人情報アコーディオン
======================================== */
.privacy-accordion {
    margin-top: 2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--color-white);
}

@media (min-width: 768px) {
    .privacy-accordion {
        margin-top: 2.5rem;
    }
}

.privacy-accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1rem 1.25rem;
    text-align: left;
    transition: background-color var(--transition);
}

/* 閉じているときのホバー。地は親（.privacy-accordion）の白なので薄いベージュを敷く。 */
.privacy-accordion__header:hover {
    background-color: var(--color-bg-light);
}

/* 展開しているときだけ、送信ボタンと同じ茶色（--color-title-brown）で塗る。
   ※ 展開中はホバーしても茶色のままにしたいので、:hover 付きのセレクタも並べて上書きする。 */
.privacy-accordion__header[aria-expanded="true"],
.privacy-accordion__header[aria-expanded="true"]:hover {
    background-color: var(--color-title-brown);
}

.privacy-accordion__title {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--color-title-brown);
    transition: color var(--transition);
}

/* 展開中は茶色の地に載るので白文字にする。 */
.privacy-accordion__header[aria-expanded="true"] .privacy-accordion__title {
    color: var(--color-text-white);
}

/* ＋／−アイコン。縦棒（::before）と横棒（::after）の2本で＋を描き、
   開いたときは縦棒だけを縮めて消すことで−に変える
   （r-doboku の .privacy-policy-accordion__icon と同じ作り）。 */
.privacy-accordion__icon {
    position: relative;
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
}

.privacy-accordion__icon::before,
.privacy-accordion__icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: var(--color-title-brown);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                background-color var(--transition);
}

/* 縦棒 */
.privacy-accordion__icon::before {
    width: 2px;
    height: 0.875rem;
    transform: translate(-50%, -50%);
}

/* 横棒 */
.privacy-accordion__icon::after {
    width: 0.875rem;
    height: 2px;
    transform: translate(-50%, -50%);
}

/* 開いているときは縦棒を消して「−」にする。 */
.privacy-accordion__header[aria-expanded="true"] .privacy-accordion__icon::before {
    transform: translate(-50%, -50%) scaleY(0);
    opacity: 0;
}

/* 展開中は茶色の地に載るので白にする（実際に見えるのは横棒の::afterだけだが、念のため2本とも）。 */
.privacy-accordion__header[aria-expanded="true"] .privacy-accordion__icon::before,
.privacy-accordion__header[aria-expanded="true"] .privacy-accordion__icon::after {
    background-color: var(--color-text-white);
}

/* 開閉の動き。faq.phpのアコーディオン（.faq-sub__answer）と同じmax-height方式・
   同じイージングに揃えている。実際の高さはJS側で中身（.privacy-accordion__inner）の
   scrollHeightから計算して入れる（contact.js参照）。 */
.privacy-accordion__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 中身。本文が長いので高さに上限を持たせ、超えた分はこの中でスクロールさせる
   （r-doboku の .privacy-policy-accordion__content と同じ考え方。フォームが縦に伸びすぎないようにする）。
   ※ 高さの上限は親（__content）ではなくこちらに持たせる。親のmax-heightは開閉アニメでJSが
     上書きするため、上限と兼用するとどちらかが効かなくなる。JS側はこの要素の実寸法
     （offsetHeight＝上限で切られた後の高さ）を見て親のmax-heightを決める（contact.js参照）。
   ※ overscroll-behavior: contain で、中身を端までスクロールしたときに
     ページ本体が続けて動く（スクロールチェーン）のを防ぐ。 */
.privacy-accordion__inner {
    max-height: 17.5rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* ヘッダー（展開時は茶色の帯）の真下に本文が寄りすぎないよう、上にも余白を取る。 */
    padding: 1.25rem;
    font-size: 0.8125rem;
    line-height: 1.9;
    color: var(--color-text-light);
}

.privacy-accordion__inner p + p {
    margin-top: 0.875rem;
}

/* 第三者への開示を除外するケースの箇条書き。
   ※ common.cssでulはlist-style: noneにリセットされているので、ここでdiscに戻す。 */
.privacy-accordion__inner ul {
    margin-top: 0.5rem;
    padding-left: 1.25rem;
    list-style: disc;
}

.privacy-accordion__inner li + li {
    margin-top: 0.25rem;
}

.privacy-accordion__inner ul + p {
    margin-top: 0.875rem;
}

.privacy-accordion__inner strong {
    color: var(--color-title);
}

/* ========================================
   送信完了ポップアップ（thanks.php用）
======================================== */
.form-success-popup {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gutter);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.form-success-popup.is-active {
    opacity: 1;
    visibility: visible;
}

.form-success-popup__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(53, 48, 43, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.form-success-popup__content {
    position: relative;
    width: 100%;
    max-width: 26rem;
    padding: var(--spacing-lg) var(--spacing-md);
    /* FV（.fv--cocoa）・ドロワー・フッターと同じ地の濃茶。
       ※ #302821 は :root の変数にしていないので、FV側と同じく直値で持たせている。 */
    background-color: #302821;
    /* 枠線の太さはFVのゴールドライン（index.css の .fv__top-band の border-bottom）と同じ 2px。 */
    border: 2px solid var(--color-gold);
    border-radius: var(--radius-lg);
    /* 落ち影はサイト全体で使わない方針。濃茶地・ゴールドの枠線と
       背後のオーバーレイ（ぼかし）で十分に浮いて見える。 */
    box-shadow: none;
    text-align: center;
    transform: translateY(1rem);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.form-success-popup.is-active .form-success-popup__content {
    transform: translateY(0);
}

.form-success-popup__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto var(--spacing-sm);
    border-radius: var(--radius-full);
    /* 濃茶地の上ではココア（--color-primary）だと沈むのでゴールドで塗り、
       チェックは地と同じ濃茶で抜く。 */
    background-color: var(--color-gold);
    color: #302821;
    font-size: 1.25rem;
}

.form-success-popup__title {
    font-family: var(--font-heading);
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--color-text-white);
}

.form-success-popup__message {
    margin: var(--spacing-sm) 0 var(--spacing-md);
    font-size: 0.875rem;
    color: var(--color-text-white);
}

/* 「トップへ戻る」ボタン。濃茶地に載るので、共通の .btn（ココア地・白文字）では
   地との差が出ない。ゴールドの枠線＋白文字にし、ホバーでゴールドを塗って
   文字を濃茶に反転させる。 */
.form-success-popup__content .btn {
    background-color: transparent;
    /* 枠線の太さはポップアップ本体（＝FVのゴールドライン）と同じ 2px。 */
    border: 2px solid var(--color-gold);
    color: var(--color-text-white);
}

.form-success-popup__content .btn:hover {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: #302821;
}