/* =========================================================
   contact.css — Contact系 Display Production Runtime v1
   正本: pt09-contact.html / pt09-estimate.html / pt09-document-request.html /
         pt09-thanks.html / pt09-document-request-thanks.html（Yu Decision 2026-07-16）
   統合元: pt09-contact.css（contact / document-request 共有）＋ pt09-estimate.css ＋ pt09-thanks.css
           の最終スタイルを Production 用に1枚へ整理。
   スコープ: 全ルールを .contact 配下へ限定（.section / .card / .field / .tel 等の汎用 class が
            common.css・他 Runtime へ波及しないため）。ページ別差分は .contact.c-* で最小限。
   共通基盤（:root / body / .container / reset）は pt09-thanks.css が再宣言していたが、theme common.css
   に既存のため**取り込まない**（重複・global 再宣言を避ける）。radius は pt09 の丸み（common.css の
   --radius-sm/md/lg）をそのまま使用（squared 化しない＝正本どおり）。
   RULE-01/03/04: 面・DOM・項目・必須任意を増減しない忠実 Runtime 化。改善は Polish Program。
   ========================================================= */

.contact a { color: var(--blue-600); text-decoration: none; }
.contact .btn--primary { color: var(--white); }  /* 通常時も白文字。specificity 0,2,0 で広域 .contact a(0,1,1) に勝ち、青on青の同化（Thanks の .btn--primary ラベル不可視）を解消。背景(blue-600)/hover/focus は不変。recruit.css と同一パターン */
.contact .btn--block { width: 100%; }

/* page-hero — 正本の Hero DOM は .lhero（common.css で描画）。pt09 CSS の .page-hero 群は
   正本 DOM に非マッチ＝不活性だが、統合元を選択編集せず忠実に取り込むため保持する。 */
.contact .page-hero { background: linear-gradient(180deg, var(--navy-900), var(--navy-700)); color: #fff; padding: 48px 0 40px; }
.contact .page-hero .en-label { font-family: var(--font-en); font-weight: 700; color: var(--blue-400); letter-spacing: .08em; font-size: 14px; }
.contact .page-hero h1 { font-size: 32px; font-weight: 700; line-height: 1.4; margin-top: 4px; }
.contact .page-hero p { color: #cfe0f2; margin-top: 8px; max-width: 760px; }

/* layout */
.contact .section { padding: 56px 0; }
.contact .wrap { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }
@media (max-width: 900px) { .contact .wrap { grid-template-columns: 1fr; } }

/* form card */
.contact .card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.contact .card:hover { transform: none; }  /* 非操作カード（フォーム/aside 情報）のリフト解除。transform のみ・box-shadow 据え置き。specificity 0,2,1 で共通 .card:hover(0,1,1) に勝つ・common.css 不変。estimate/document-request も .contact scope 共有 */
.contact .form { padding: 32px; }
.contact .content-main .lead { margin-bottom: 24px; color: var(--gray-700); }  /* 本文リード限定。lhero の .lead へ波及させない（Hero はパターン1 base を維持） */
.contact .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .contact .grid2 { grid-template-columns: 1fr; } }
.contact .field { margin-bottom: 20px; }
.contact .field label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.contact .req { color: #c0392b; font-size: 12px; margin-left: 6px; font-weight: 700; }
.contact .opt { color: var(--gray-500); font-size: 12px; margin-left: 6px; font-weight: 500; }
.contact .field input, .contact .field select, .contact .field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); font-family: var(--font-jp); font-size: 15px; color: var(--text); background: var(--gray-50); }
.contact .field input:focus, .contact .field select:focus, .contact .field textarea:focus { outline: none; border-color: var(--blue-500); background: #fff; box-shadow: 0 0 0 3px rgba(37,148,237,.12); }
.contact .field textarea { min-height: 140px; resize: vertical; }               /* contact / document-request（pt09-contact.css） */
.contact.c-estimate .field textarea { min-height: 120px; }                       /* estimate（pt09-estimate.css） */
.contact .privacy { display: flex; gap: 10px; align-items: flex-start; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-sm); padding: 14px; font-size: 14px; margin: 8px 0 24px; }
.contact .note { font-size: 13px; color: var(--text-muted); margin-top: 6px; }
.contact .switch-note { background: #eaf4fd; border: 1px solid var(--blue-400); border-radius: var(--radius-sm); padding: 14px 16px; font-size: 14px; margin-bottom: 24px; }

/* estimate STEP indicator */
.contact .step { display: flex; gap: 8px; margin-bottom: 24px; font-size: 13px; color: var(--text-muted); }
.contact .step b { color: var(--navy-800); font-family: var(--font-en); }

/* aside */
.contact .aside-card { padding: 24px; margin-bottom: 20px; }
.contact .aside-card h3 { font-size: 16px; margin-bottom: 10px; color: var(--navy-900); }
.contact .aside-card .tel { font-family: var(--font-jp); font-weight: 800; font-size: 26px; color: var(--navy-900); letter-spacing: .02em; }
.contact .muted { color: var(--text-muted); font-size: 13px; }
.contact .aside-links a { display: block; padding: 10px 0; border-bottom: 1px solid var(--gray-200); color: var(--text); font-weight: 500; }
.contact .aside-links a:hover { color: var(--blue-600); }
.contact .aside-links a::after { content: " ›"; color: var(--gray-500); }

/* =========================================================
   Thanks（pt09-thanks.css・contact/estimate 共通 ＋ document-request 完了で共用）
   :root / body / .container / *reset は common.css 既存のため取り込まない。
   ========================================================= */
.contact .thanks { padding: 72px 0; }
.contact .thanks__card { max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 48px 40px; text-align: center; }
.contact .check { width: 72px; height: 72px; border-radius: 50%; background: #eaf7ee; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.contact .check svg { width: 36px; height: 36px; stroke: #2e9e5b; stroke-width: 3; fill: none; }
.contact .thanks h1 { font-size: 28px; font-weight: 700; line-height: 1.4; }
.contact .thanks .en-label { font-family: var(--font-en); font-weight: 700; color: var(--blue-500); letter-spacing: .08em; font-size: 13px; }
.contact .thanks p { color: var(--gray-700); margin-top: 12px; }
.contact .info { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 20px 24px; margin: 28px 0; text-align: left; }
.contact .info .row { display: flex; gap: 12px; padding: 8px 0; }
.contact .info .row b { min-width: 96px; color: var(--navy-800); }
.contact .thanks .tel { font-family: var(--font-jp); font-weight: 800; font-size: 22px; color: var(--navy-900); }
.contact .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
@media (max-width: 560px) { .contact .actions .btn { width: 100%; } }

/* --- G-D CF7 Local Proof: 方式B DOM 吸収（.contact スコープ・非波及） ------------------ */
/* CF7 が挿入する wrapper / 状態 class を承認済みデザインへ吸収する（見た目を CF7 初期形へ変えない）。 */
.contact .cf7-mount, .contact .wpcf7 { display: block; }
.contact .wpcf7-form.form { padding: 32px; }                                   /* html_class="form" の保険 */
.contact .field .wpcf7-form-control-wrap { display: block; width: 100%; }        /* input を全幅化（inline span 吸収） */
.contact .field .wpcf7-form-control { width: 100%; }
.contact .field .wpcf7-date { width: 100%; }
/* 同意 checkbox（acceptance）を承認済み .privacy の見た目へ吸収（説明文は隣接 HTML 側で表示） */
.contact .privacy .wpcf7-form-control-wrap { display: inline-flex; width: auto; margin: 0; flex: 0 0 auto; }
.contact .privacy .wpcf7-acceptance,
.contact .privacy .wpcf7-list-item { display: inline-flex; margin: 0; }
.contact .privacy .wpcf7-list-item label { display: inline-flex; align-items: center; margin: 0; }
.contact .privacy .wpcf7-list-item-label { display: none; }
.contact .privacy input[type="checkbox"] { width: auto; margin: 0; }
/* バリデーション・送信状態表示 */
.contact .field .wpcf7-not-valid { border-color: #c0392b; }
.contact .wpcf7-not-valid-tip { color: #c0392b; font-size: 13px; margin-top: 6px; display: block; }
.contact .wpcf7-response-output { margin: 16px 0 0; padding: 12px 14px; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); font-size: 14px; }
.contact .wpcf7 form.invalid .wpcf7-response-output { border-color: #c0392b; color: #c0392b; }
.contact .wpcf7 form.sent .wpcf7-response-output { border-color: #2ecc71; }
.contact .wpcf7-spinner { margin: 0 8px; }