@charset "UTF-8";

/* =========================================================
   contact.css - お問い合わせ／送信完了（thanks.php と共用）

   ※ 仮のスタイル。レイアウトと余白は後で詰める。
   ※ thanks.php は contact.php を読み込んで作る（$is_thanks）ので、同じCSSを読む。
========================================================= */

/* ---------------------------------------------------------
   導線（電話／FAX／LINE）
--------------------------------------------------------- */

/* ※ 外側（セクション本体）が余白、内側（__inner）が max-width と中央寄せ。 */
/* ※ 地は薄いグレー。下のメールフォーム（黒面）との対比で、
     「すぐに連絡したい人」と「フォームから送る人」の面を分けている。
   ※ 上下の余白はヘッダーの高さ（--header-height）と同じ値。
     事例一覧・事業一覧・会社情報と同じ考え方。
     画面幅で自動で段階が付くので、分岐を書かなくてよい。
     ※ ※重要※ 値の定義は common.css の :root。
   ※ 地はモルタルのテクスチャ（mortar-f4f3f1.webp）。以前はベタ塗りの --color-bg-light（#F4F3F1）。
     事業内容ページの事業一覧・会社概要の会社情報と同じ画像・同じ敷き方（512px で繰り返す）。
   ※ background-color は画像が読み込まれるまでの地。
   ※ ※重要※ 下のメールフォームの面（.contact-form）はこの地と同じ --color-bg-light のベタ塗り。
     色はそろっているが、質感はこちらだけになる。 */
.sec-contact-lead {
    padding-block: var(--header-height);
    padding-inline: var(--section-px);
    background-color: var(--color-bg-light);
    background-image: url('../images/mortar-f4f3f1.webp');
    background-size: 512px auto;
    background-position: left top;
    background-repeat: repeat;
}

.sec-contact-lead__inner {
    width: 100%;
    max-width: var(--w-lg);
    margin-inline: auto;
}

/* ※ 768px未満（縦積み）は 576px（--w-sm）で止める。
     タブレット縦向き（576〜767px）で広がりすぎないようにするため。
   ※ 576px未満では画面幅の方が狭いので、この指定は効かない。 */
@media (max-width: 767px) {
    .sec-contact-lead__inner {
        max-width: var(--w-sm);
    }
}

/* ※ 768px以上は 880px（--w-content）で止める（以前は --w-lg＝1200px）。
   ※ ※重要※ --section-width-narrow は名前に反して --w-md（768px）なので使わない。
     （一度 --section-width-narrow で指定してしまい、768px になっていた）
   ※ 下のメールフォーム（.contact-form）も同じ --w-content。 */
@media (min-width: 768px) {
    .sec-contact-lead__inner {
        max-width: var(--w-content);
    }
}

/* ※ 見出しはフォーム側（.sec-form__head）と同じ型。
     英字が主役（大・上）、日本語がサブ（小・下）で中央寄せ。 */
.sec-contact-lead__head {
    margin-bottom: var(--spacing-md);
    text-align: center;
}

/* ---- 見出しの型（このページ共通）----
   ※ 英字を主役（大）、日本語をサブ（小）にする。
     事業内容の流れ（.service-flow）・会社概要のアクセス（.company-access）と同じ値。
   ※ ※重要※ このブロックは .sec-en の共通指定（common.css）より強い。
     セクションを含めて詳細度を上げている。
   ※ ※重要※ メールフォームは黒地なので、英字は白に上書きする（下）。 */
.sec-contact-lead .sec-en,
.sec-form .sec-en {
    display: block;
    margin-bottom: 0;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.12em;
    color: var(--color-title);
}

.sec-form .sec-en {
    color: #FFFFFF;
}

@media (min-width: 768px) {
    .sec-contact-lead .sec-en,
    .sec-form .sec-en { font-size: 2.75rem; }
}

/* ※ 日本語タイトルの両側に金の横棒を置く。
   ※ 中央寄せなので左右両方に置く。片側だけだと中心がずれて見える。
   ※ 棒の長さと色は .service-flow__ja と揃えている。 */
.sec-contact-lead__ja,
.sec-form__ja {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.75rem;
    font-size: 1rem;
    letter-spacing: 0.1em;
    color: var(--color-text-light);
}

.sec-contact-lead__ja::before,
.sec-contact-lead__ja::after,
.sec-form__ja::before,
.sec-form__ja::after {
    content: '';
    flex: 0 0 auto;
    width: 2.5rem;
    height: 1px;
    background-color: var(--color-accent-light);
}

/* ※ メールフォームは黒地なので、日本語タイトルも白寄りに上げる。 */
.sec-form__ja {
    color: rgba(255, 255, 255, 0.75);
}

.sec-contact-lead__text {
    font-size: 0.9375rem;
    line-height: 2;
    /* ※ 575px以下は左揃え、576px以上は中央揃え（下の分岐）。
         狭い画面では文章が折り返すので、中央揃えだと行頭がそろわず読みにくい。
       ※ 見出しは幅に関係なく中央のまま。 */
    text-align: left;
}

@media (min-width: 576px) {
    .sec-contact-lead__text {
        text-align: center;
    }
}

/* ※ カードは間隔を取って独立させる。
     ※ 以前は gap: 1px ＋ 地色で罫線を共有し、1つの表のように見せていた。
       セクションの地が薄いグレーになったので、カード（白）を離して
       一枚ずつ浮かせたほうが地との対比が出る。
   ※ ※重要※ 離したので、枠線は各カード（.contact-method）が持つ。
     ここに border を戻すと、隣り合う辺で線が2本に見える。 */
.contact-methods {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: var(--spacing-lg);
}

@media (min-width: 768px) {
    .contact-methods {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }
}

.contact-method {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 1.75rem 1.25rem;
    border: 1px solid var(--color-border);
    /* ※ 地は塗らない（セクションの薄いグレーがそのまま見える）。輪郭は枠線だけで示す。
         以前は白（--color-bg）で塗って、薄いグレーの地から浮かせていた。
         戻すときは background-color: var(--color-bg) にする。 */
    background-color: transparent;
    text-align: center;
}

.contact-method__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    color: var(--color-text-light);
}

.contact-method__label i {
    color: var(--color-accent-dark);
}

.contact-method__value {
    font-family: var(--font-en);
    font-size: 1.75rem;
    letter-spacing: 0.04em;
    color: var(--color-title);
}

/* LINEなど文字が入るものは小さめに */
.contact-method__value--sm {
    font-family: var(--font-family);
    font-size: 1.0625rem;
    letter-spacing: 0.06em;
}

.contact-method__value a {
    transition: color var(--transition);
}

.contact-method__value a:hover {
    color: var(--color-accent-dark);
}

.contact-method__note {
    font-size: 0.75rem;
    color: var(--color-text-light);
}

/* ---------------------------------------------------------
   フォーム
--------------------------------------------------------- */

/* ※ 地は黒いモルタルのテクスチャ（mortar-bg.webp）。
     会社概要のアクセス・ページヒーローの左面と同じ素材。
     上の導線セクション（薄いグレー）と対比させる。
   ※ background-color は画像が読み込まれるまでの地。白文字が飛ばないよう残す。
   ※ 画像は 512px の大きさで繰り返して敷く（以前は cover で引き伸ばしていた）。
     他ページの木目・モルタルの背景と同じ敷き方。
     フォームが縦に長いので、cover だと模様が大きく引き伸ばされていた。
   ※ ※重要※ 黒地になるので、中の文字色を下で上書きする。
     このブロックに一括で color を付けないこと。
     入力欄・選択肢・個人情報保護方針は白地のままなので、
     白文字になると読めなくなる。 */
.sec-form {
    padding-block: var(--header-height);
    padding-inline: var(--section-px);
    background-color: var(--color-bg-dark);
    background-image: url('../images/mortar-bg.webp');
    background-size: 512px auto;
    background-position: left top;
    background-repeat: repeat;
}

.sec-form__inner {
    width: 100%;
    max-width: var(--w-lg);
    margin-inline: auto;
}

/* ※ 768px未満は 576px（--w-sm）で止める（上の導線セクションと同じ考え方）。 */
@media (max-width: 767px) {
    .sec-form__inner {
        max-width: var(--w-sm);
    }
}

.sec-form__head {
    text-align: center;
}

.sec-form__note {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    color: var(--color-text-light);
}

/* ※ ※重要※ フォーム本体は白地の面にする。
     セクションは黒いモルタルなので、入力欄が並ぶ面だけを白で抜く。
     こうすると項目名や罫線は元の色（暗い文字）のまま使える。
   ※ 幅は 880px（--w-content。以前は --section-width-narrow＝768px）。下の個人情報保護方針・上の物件カードと揃えている。
     上の導線セクション（.sec-contact-lead__inner）も 768px以上は同じ --w-content。
     767px以下は外側（.sec-form__inner）が 576px で止まるので、この値は 768px以上でだけ効く。
   ※ ※重要※ --section-width-narrow は 768px なので使わない。
     幅を変えるときは 3か所（.contact-form / .form-privacy / .contact-property）をセットで。 */
.contact-form {
    max-width: var(--w-content);
    margin-inline: auto;
    margin-top: var(--spacing-lg);
    /* ※ 左右は 475px未満 1rem、475〜575px 1.25rem、576px〜 2rem、768px〜 3rem。
         475px はこのフォームの分岐。サイト共通のブレークポイントではない。
       ※ 項目同士の間隔は各項目（.form-row）の上下の余白と区切り線が持つ（logic と同じ形）。
         一時期は線を消して、この箱の gap で間隔を取っていた。 */
    padding: var(--spacing-md) 1rem;
    /* ※ 地は上の導線セクション（.sec-contact-lead）と同じ --color-bg-light（以前は白）。
         入力欄と選択肢は白地のままなので、書き込む場所が浮いて見える。 */
    background-color: var(--color-bg-light);
}

@media (min-width: 475px) {
    .contact-form {
        padding-inline: 1.25rem;
    }
}

@media (min-width: 576px) {
    .contact-form {
        padding: 2.5rem 2rem;
    }
}

@media (min-width: 768px) {
    .contact-form {
        padding: var(--spacing-lg);
    }
}

/* ── 項目と区切り線 ──
   ※ 各項目の下にだけ線を引く。最初の項目（お問い合わせ種別）の上には引かない。
     logic は最初の項目の上にも引いているが、こちらは白い面の上端があるので外した。
   ※ 上下の余白は 767px以下 1.5rem（--spacing-sm）／768px以上 2rem（--spacing-md）。logic と同じ値。
   ※ 変遷：下線のみ → 線なし（フォームの gap で間隔）→ 上下の線（logic と同じ）→ この形。
   ※ 最初の項目の上にも戻すときは、
       .form-row:not(.form-row + .form-row) { border-top: 1px solid var(--color-border); }
     を足す（先頭は honeypot なので :first-child は使えない）。 */
.form-row {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding-block: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
}

@media (min-width: 768px) {
    .form-row {
        flex-direction: row;
        align-items: flex-start;
        gap: 2rem;
        padding-block: var(--spacing-md);
    }
}

/* ※ 最初の項目（お問い合わせ種別）は上の余白を持たない。
     白い面の上端の余白（.contact-form の padding）だけにする。
   ※ ※重要※ :first-child は使えない。フォームの先頭は honeypot（div）なので、
     「直前が .form-row でない .form-row」で最初の項目を拾っている。
   ※ 詳細度が .form-row より高いので、768px以上の padding-block にも勝つ。 */
.form-row:not(.form-row + .form-row) {
    padding-top: 0;
}

.form-row__label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
    color: var(--color-title);
}

@media (min-width: 768px) {
    /* ※ 項目名の列は 14.5rem（以前は 12rem）。
         一番長い「任意＋会社名（法人のお客様）」を一行に収めるため。
         文字 15px × 11文字（字間込み 約172px）＋ バッジ（約39px）＋ 間（10px）＝ 約221px。
         12rem（192px）では入らず、項目名が2行目に回っていた。
       ※ 項目名やバッジの文字を大きくしたときは、この幅も見直すこと。 */
    .form-row__label {
        flex: 0 0 14.5rem;
        padding-top: 0.75rem;
    }
}

/* 必須バッジ
   ※ バッジは項目名の左に置く（以前は右）。
     HTMLの並び（項目名 → バッジ）は変えず、order で見た目だけ先頭に出す。
     読み上げは「お名前 必須」の順のままになる。
     .form-row__label が flex なので効く（項目名の文字は order: 0 のまま）。
   ※ 任意バッジ（.form-row__optional）も同じ扱い。 */
.form-row__label em {
    order: -1;
    padding: 0.125rem 0.5rem;
    /* ※ 黒地に白文字（以前は濃い金 --color-gold-deep の地）。 */
    background-color: var(--color-primary);
    color: #FFFFFF;
    font-size: 0.6875rem;
    font-style: normal;
    letter-spacing: 0.06em;
}

/* 任意バッジ
   ※ 大きさ・余白は必須バッジ（上の em）と同じ。色だけ控えめにする。
     必須＝黒の地に白文字／任意＝薄いグレーの地に濃いグレーの文字。
     必須の方が目に入るようにしている。
   ※ 文字は --color-secondary。--color-text-light だと薄いグレーの地との差が足りない。
   ※ 768px以上は項目名の列を 14.5rem にして、「任意＋会社名（法人のお客様）」が
     一行に収まるようにしている（上の .form-row__label の分岐）。 */
.form-row__optional {
    order: -1;
    padding: 0.125rem 0.5rem;
    background-color: var(--color-bg-mute);
    color: var(--color-secondary);
    font-size: 0.6875rem;
    font-style: normal;
    letter-spacing: 0.06em;
}

.form-row__sub {
    font-size: 0.75rem;
    color: var(--color-text-light);
}

.form-row__body {
    flex: 1;
    min-width: 0;
}

/* ---- 入力欄 ---- */

.form-row input[type="text"],
.form-row input[type="tel"],
.form-row input[type="email"],
.form-row textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    /* ※ フォームの面と同じ --color-bg-light（以前は白）。書き込む場所は枠線で示す。 */
    background-color: var(--color-bg-light);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text);
    transition: border-color var(--transition);
}

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

/* ※ フォーカスは黒（--color-primary）。以前は金。
     ラジオボタンの選択中・ホバーも黒で揃えている。 */
.form-row input:focus,
.form-row textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* ※ 大きさの変更を許さない（右下の斜線＝リサイズのつまみを出さない）。
     以前は resize: vertical（縦だけ伸ばせる）だった。
   ※ 高さは contact.php の rows="8" で決まる。入り切らない文章は中でスクロールする。 */
.form-row textarea {
    resize: none;
}

/* ---- ラジオボタン ----
   ※ logic のフォームと同じ型。選択肢ごとに枠線を回し、
     ネイティブの丸は使わず正方形で描く（サイト全体が直角の方針のため）。
   ※ 並び（選択肢は5つ）
       474px以下 ：すべて縦1列。
       475px以上 ：上の3つ（物件／空き家の再生／リフォーム）は1行ずつ幅いっぱい。
                    最後の行だけ「エアコンサブスク｜その他」の2カラム。
     以前は 576px以上で折り返しの横並び（flex-wrap）だったが、
     幅によって折り返す位置が変わり、最後の2つが同じ行に並ばなかった。
   ※ 474px以下を2カラムにしないのは、幅が足りず「エアコンサブスク」が途中で折り返すため。
     （375px の画面で入れ物が約295px、「エアコンサブスク」の枠だけで約190px）
     475px はこのフォームの分岐。サイト共通のブレークポイントではない。
   ※ 2カラムの列幅は minmax(max-content, 1fr)。
     広いときは左右同じ幅、狭いとき（768px 付近）は文字が割れないよう左の列が広がる。
   ※ ※重要※ 選択肢を増減したら :nth-child(n + 4) の数も見直すこと。 */

.form-radios {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

@media (min-width: 475px) {
    .form-radios {
        display: grid;
        grid-template-columns: repeat(2, minmax(max-content, 1fr));
    }

    /* 上の3つは幅いっぱい、最後の2つ（4番目以降）は1列ずつ */
    .form-radio {
        grid-column: 1 / -1;
    }

    .form-radio:nth-child(n + 4) {
        grid-column: auto;
    }
}

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

.form-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1.125rem;
    border: 1px solid var(--color-border);
    /* ※ フォームの面と同じ --color-bg-light（以前は白）。 */
    background-color: var(--color-bg-light);
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: border-color var(--transition);
}

.form-radio:hover {
    border-color: var(--color-primary);
}

/* 選択中の行は枠線を黒にする（以前は金）
   ※ 地の色は変えない（フォームの面と同じ --color-bg-light のまま）。
     選択中は枠線と中の四角だけで示す。 */
.form-radio:has(.form-radio__input:checked) {
    border-color: var(--color-primary);
}

/* ※ 丸ではなく四角で描く。選択時の中身も正方形。 */
.form-radio__input {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex-shrink: 0;
    width: 1.0625rem;
    height: 1.0625rem;
    margin: 0;
    border: 1px solid var(--color-border);
    /* ※ iOS Safari 対策。appearance: none だけだと丸みが残ることがある。 */
    border-radius: 0;
    background-color: var(--color-bg-light);
    cursor: pointer;
    transition: border-color var(--transition);
}

.form-radio__input:checked {
    border-color: var(--color-primary);
}

/* 中身の正方形
   ※ ※重要※ top/left の % と transform で中央寄せしない。
     appearance: none を当てた input の中では、疑似要素の % の基準が
     padding ボックスなのか border ボックスなのかブラウザで揺れるため、
     transform と組み合わせると中心がずれる。
   ※ inset で四辺からの距離を直接指定する。
     寸法：枠 17px（線1px）→ 内側 15px。inset: 3px で中身は 9px。 */
.form-radio__input:checked::after {
    content: '';
    position: absolute;
    inset: 3px;
    background-color: var(--color-primary);
}

/* ---- エラー表示（contact.js が is-error を付与）---- */

.form-row__error {
    display: none;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: #C0392B;
}

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

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

/* ※ ラジオの行は input を隠していないが、未選択のまま送信したときに
     どこがエラーか分かるよう、選択肢の枠線も赤くする。 */
.form-row.is-error .form-radio {
    border-color: #C0392B;
}

/* honeypot（ボット対策・非表示） */
.form-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- 送信ボタン ---- */

.form-submit {
    /* ※ 最後の項目の下線から 3rem（logic と同じ --spacing-lg）。 */
    margin-top: var(--spacing-lg);
    text-align: center;
}

/* ※ 768px以上は右寄せ。767px以下は中央（上のベース）。
     768px以上は項目名と入力欄が左右に並ぶので、入力欄の右端にボタンの右端を揃える。
   ※ ボタンは inline-flex なので text-align で寄せられる。 */
@media (min-width: 768px) {
    .form-submit {
        text-align: right;
    }
}

/* ※ 共通のボタンの型。左＝アイコンの正方形／右＝文言。
     導線バー（.sec-link__more）・資料を見る（.service-block__file）と揃えている。
   ※ ※重要※ 上下のパディングは持たない。
     ボタンの高さは左の正方形（3.5rem）が決める。 */
.form-submit__button {
    display: inline-flex;
    align-items: stretch;
    /* ※ 幅の上限は 767px以下 256px、768px以上 280px（下の分岐）。それより狭い画面では幅いっぱい。
         以前は全幅 280px（その前は 320px、22rem = 352px）。 */
    width: min(100%, 256px);
    padding: 0;
    background-color: var(--color-primary);
    color: #FFFFFF;
    transition: color var(--transition);
}

/* ※ ※重要※ 上の .form-submit__button より後ろに置くこと。
     同じ詳細度なので、前に置くと 256px に打ち消される。 */
@media (min-width: 768px) {
    .form-submit__button {
        width: min(100%, 280px);
    }
}

/* アイコンの正方形
   ※ 右の1本線が仕切りになる。
     地が黒なので、線は白の薄いもの（共通のお問い合わせカードと同じ考え方）。 */
.form-submit__button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 3.5rem;
    height: 3.5rem;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
}

/* 紙飛行機のアイコン
   ※ ※重要※ 画像（airplane-white.png）を「形」として使い、色は currentColor で塗る。
     ホバーで文言と一緒に金色にするため（<img> のままだと色を変えられない）。
     画像の透明部分が抜け、不透明部分だけが色で塗られる。
   ※ 大きさは 1.25rem（以前は 1.15rem。1.375rem も試したが戻した）。 */
.form-submit__button-icon-mark {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    background-color: currentColor;
    -webkit-mask: url('../images/airplane-white.png') center / contain no-repeat;
    mask: url('../images/airplane-white.png') center / contain no-repeat;
    transition: background-color var(--transition);
}

/* 文言。アイコンの右を埋めて中央に置く。 */
.form-submit__button-label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    font-size: 1rem;
    letter-spacing: 0.1em;
}

/* ※ ホバーで変えるのはアイコンと文言の色だけ。地（黒）と仕切り線はそのまま。
     以前は地を濃い金（--color-gold-deep）に塗り替えていた。
   ※ 黒地の上の文字なので --color-gold-bright（common.css のゴールドの例外）。
     --color-gold だと黒地の上で沈んで見える。
   ※ アイコンは currentColor で塗っているので、color を変えれば一緒に変わる。 */
.form-submit__button:hover {
    color: var(--color-gold-bright);
}

/* ---- 黒地向けの上書き ----
   ※ ※重要※ ここにまとめる。各ブロックに散らすと、
     地色を戻したいときに見落とす。
   ※ ※重要※ 上書きが必要なのは、黒地に直接乗っている見出しだけ。
     フォーム本体・物件カード・個人情報保護方針は白地の面なので、
     中の文字は元の色のままで読める。触らないこと。 */

/* 個人情報保護方針
   ※ ※重要※ 中身の箱に地を敷く。
     開いたとき、本文（濃いグレー）が黒地に直接乗って読めなくなるため。
   ※ 色はフォームの面・開閉ボタンと同じ --color-bg-light（以前は白）。 */
.sec-form .form-privacy__body {
    background-color: var(--color-bg-light);
}

/* ---------------------------------------------------------
   個人情報保護方針（アコーディオン）
   ※ 開閉の仕組みは animation.js の共通アコーディオン。
     ここは見た目だけを持つ。
   ※ 幅はフォーム（.contact-form）と揃える。
   ※ ※重要※ 上の余白は取らない。
     フォームの白い面の真下に接して縦に積む。
     余白を入れると間に黒いモルタルが覚き、面が二つに分かれて見える。
--------------------------------------------------------- */

.form-privacy {
    /* ※ フォーム（.contact-form）と同じ --w-content（880px）。変えるときはセットで。 */
    max-width: var(--w-content);
    margin-inline: auto;
}

.form-privacy__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-border);
    /* ※ フォームの面と同じ --color-bg-light（以前は白）。 */
    background-color: var(--color-bg-light);
    font-size: 0.9375rem;
    /* ※ 太さは通常（400。以前は 500）。
         すぐ上のフォームの項目名・物件情報の「物件概要を見る」とそろえている。 */
    font-weight: 400;
    letter-spacing: 0.08em;
    text-align: left;
    transition: background-color var(--transition);
}

/* ※ ホバーで変えるのは地色だけ。
     ※ 以前は枠線の色を変えていたが、展開時の枠（__body）と
       色が食い違って見えるためやめた。
   ※ 地が --color-bg-light になったので、ホバーは一段深い --color-bg-mute（以前は --color-bg-light）。 */
.form-privacy__toggle:hover {
    background-color: var(--color-bg-mute);
}

/* 開閉の記号（＋→−）
   ※ 2本の線を重ねて、開いているときは縦の線を横に戻す。
   ※ .is-open を付け外しするのは animation.js。 */
.form-privacy__toggle-icon {
    position: relative;
    flex: 0 0 auto;
    width: 0.875rem;
    height: 0.875rem;
}

.form-privacy__toggle-icon::before,
.form-privacy__toggle-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--color-primary);
    transition: transform 0.3s ease;
}

.form-privacy__toggle-icon::after {
    transform: rotate(90deg);
}

.form-privacy__toggle.is-open .form-privacy__toggle-icon::after {
    transform: rotate(0deg);
}

/* ※ ※重要※ この箱にパディングを持たせないこと。
     box-sizing: border-box では max-height: 0 にしても高さの下限が
     パディング＋ボーダーになるため、閉じているのに中身の先頭が覗く。
     パディングは内側（__inner）が持つ。
   ※ ※重要※ 枠線は「常にあるが、閉じている間は透明」にする。
     閉じているときに線ごと消すと高さが変わり、開閉の動きが跡ねる。
     色だけを切り替えれば、展開時にだけ枠が見える。
   ※ 上の線は引かない。開閉ボタンの下線と重なって2本に見えるため。 */
.form-privacy__body {
    max-height: 0;
    overflow: hidden;
    border: 1px solid transparent;
    border-top: 0;
    transition: max-height 0.45s ease, border-color 0.45s ease;
}

.form-privacy__body.is-open {
    border-color: var(--color-border);
    /* ※ ※重要※ 開いている間だけ縦にスクロールさせる。
         高さの上限（280px）は HTML の data-accordion-max で持ち、
         animation.js がその値で止める。
         上限を変えるときは contact.php の属性を直す。
       ※ 閉じている間は overflow: hidden のままにする。
         スクロールを常に許すと、閉じた状態でも中を動かせてしまう。 */
    overflow-y: auto;
    overscroll-behavior: contain;
}

.form-privacy__inner {
    padding: var(--spacing-sm) 1.25rem;
}

.form-privacy__text {
    font-size: 0.875rem;
    line-height: 1.9;
    color: var(--color-text-light);
}

/* ※ 連番はCSSカウンタで自動付番する。
     decimal-leading-zero なので 1 → 01、2 → 02 と 0 埋めになる。
     HTMLに番号を書かないので、項目を増減・入れ替えてもずれない。
   ※ dd の字下げは番号の幅に揃える。幅は --privacy-num-w の1行で決まる。 */
.form-privacy__list {
    --privacy-num-w: 2.25rem;

    counter-reset: privacy;
    margin-top: var(--spacing-sm);
}

.form-privacy__term {
    counter-increment: privacy;
    display: flex;
    align-items: baseline;
    gap: calc(var(--privacy-num-w) - 1.75rem);
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.6;
    color: var(--color-title);
}

/* 項目間の隔たり（先頭の dt には付けない） */
.form-privacy__term:not(:first-child) {
    margin-top: var(--spacing-sm);
}

.form-privacy__term::before {
    content: counter(privacy, decimal-leading-zero);
    flex-shrink: 0;
    width: 1.75rem;
    font-family: var(--font-num);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--color-gold-deep);
}

.form-privacy__desc {
    margin-top: 0.25rem;
    padding-left: var(--privacy-num-w);
    font-size: 0.875rem;
    line-height: 1.9;
    color: var(--color-text-light);
}

/* ※ 行頭記号はCSSで付ける（HTMLに書かない）。
     list-style を使わないのは、common.css のリセットで
     ul の list-style と padding を消してあるため。 */
.form-privacy__sublist {
    margin-top: 0.375rem;
}

.form-privacy__subitem {
    position: relative;
    padding-left: 1rem;
}

.form-privacy__subitem::before {
    content: '・';
    position: absolute;
    left: 0;
}

.form-privacy__address {
    display: block;
    margin-top: 0.75rem;
    padding-left: 0.875rem;
    border-left: 1px solid var(--color-border);
    font-size: 0.8125rem;
    line-height: 1.9;
}

/* ---------------------------------------------------------
   お問い合わせ物件（property.php からの遷移時のみ）
   ※ 写真と名前を並べて、どの物件の問い合わせか分かるようにする。
   ※ 物件一覧のカード（property.css）と同じ側で揃えている。
--------------------------------------------------------- */

.contact-property {
    /* ※ フォーム（.contact-form）と同じ --w-content（880px）。変えるときはセットで。 */
    max-width: var(--w-content);
    margin-inline: auto;
    margin-top: var(--spacing-lg);
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
}

.contact-property__label {
    padding: 0.625rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-bg-mute);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    color: var(--color-text-light);
}

.contact-property__body {
    display: flex;
    flex-direction: column;
}

.contact-property__thumb {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--color-bg-light);
}

.contact-property__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 写真未登録のときの代替（物件一覧と同じ見た目） */
.contact-property__thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg-dark);
    font-family: var(--font-en);
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.28);
}

.contact-property__info {
    padding: 1.25rem;
}

.contact-property__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.contact-property__badge {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--color-border);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--color-text-light);
}

.contact-property__title {
    margin-top: 0.75rem;
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.06em;
    color: var(--color-title);
}

.contact-property__address {
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: var(--color-text-light);
}

.contact-property__price {
    margin-top: 0.5rem;
    font-family: var(--font-num);
    font-size: 1.25rem;
    letter-spacing: 0.04em;
    /* ※ 明るい地の上の文字なので --color-gold-deep */
    color: var(--color-gold-deep);
}

.contact-property__back {
    display: inline-block;
    margin-top: 0.875rem;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--color-gold);
    font-size: 0.8125rem;
    transition: opacity var(--transition);
}

.contact-property__back:hover {
    opacity: 0.7;
}

@media (min-width: 576px) {
    .contact-property__body {
        flex-direction: row;
        align-items: stretch;
    }

    .contact-property__thumb {
        flex: 0 0 40%;
        aspect-ratio: 4 / 3;
    }

    .contact-property__info {
        flex: 1;
        min-width: 0;
        padding: 1.5rem;
    }
}

/* ---------------------------------------------------------
   送信完了ポップアップ（thanks.php で使用）
   ※ マークアップは contact.php の末尾（$is_thanks のときだけ出力）。
   ※ 開く・閉じるのは contact.js（.is-active の付け外し）。
   ※ 角は落とさない（サイト全体が直角の方針）。
--------------------------------------------------------- */

/* ※ 開いている間は後ろのページをスクロールさせない（contact.js が body に付ける）。 */
body.is-popup-open {
    overflow: hidden;
}

/* ※ 閉じたあとフォームの見出しにフォーカスを戻すので、そのときの枠は出さない。 */
.sec-form__head:focus {
    outline: none;
}

.form-success-popup {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
}

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

.form-success-popup__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
}

.form-success-popup__content {
    position: relative;
    z-index: 1;
    width: min(90%, 26rem);
    /* ※ 画面が低いとき（スマホの横向きなど）は中でスクロールさせる。 */
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    padding: 2.5rem 1.75rem;
    background-color: var(--color-bg);
    text-align: center;
}

.form-success-popup__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-inline: auto;
    border-radius: 50%;
    /* ※ 白いアイコンを載せる面なので --color-gold-deep */
    background-color: var(--color-gold-deep);
    color: #FFFFFF;
    font-size: 1.25rem;
}

/* 英字のラベル（Thank you）
   ※ 他の見出しと同じ英字の書体。明るい地の上なので金は --color-gold-deep。 */
.form-success-popup__en {
    margin-top: 1.25rem;
    font-family: var(--font-en);
    font-size: 0.875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-gold-deep);
}

.form-success-popup__title {
    margin-top: 0.25rem;
    font-family: var(--font-heading);
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--color-title);
}

.form-success-popup__message {
    margin-top: 0.875rem;
    font-size: 0.875rem;
    line-height: 1.9;
    color: var(--color-text-light);
}

/* 注記（受付完了メールの案内）
   ※ 本文より一段小さく、上の罫線で区切る。文章が長いので左揃え。 */
.form-success-popup__note {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.8125rem;
    line-height: 1.8;
    text-align: left;
    color: var(--color-text-light);
}

.form-success-popup__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14rem;
    margin-top: 1.75rem;
    padding: 0.875rem 2rem;
    border: 1px solid var(--color-primary);
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    transition: background-color var(--transition), color var(--transition);
}

.form-success-popup__button:hover {
    background-color: var(--color-primary);
    color: #FFFFFF;
}

.form-success-popup__button:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .form-success-popup {
        transition: none;
    }
}