/* ============================================================
   contact.css — お問い合わせ(10-contact) / 送信完了(11-contact-finish)
   共通は common.css。固定青背景は使わない（subfv--solid）。
   Figma: 10-contact=2414:11464 (1440×2932) / 11-contact-finish=2441:5853 (1440×1966)
   ============================================================ */

/* ===== FV（両ページ共通）：Figma hero は h237・pt104・pb0（パンくず無しのコンパクト型）。
   common の .subfv--solid 既定（pt84/pb72）と異なるためページスコープで寸法のみ上書き
   （privacy.css と同型。3ページ同型のため共通側 .subfv--solid の変数化が本筋→レポート記載）。
   pb はタイトル/eyebrow の text-box-trim 後の実高との差分補正（総高237に合わせる）。 */
body[data-page="contact"] .subfv--solid,
body[data-page="contact-finish"] .subfv--solid{
  padding-top:104px;
  padding-bottom:19px;
  min-height:0;
}
@media (max-width:1023px){
  body[data-page="contact"] .subfv--solid,
  body[data-page="contact-finish"] .subfv--solid{ padding-top:72px; padding-bottom:24px; min-height:0 }
}
@media (max-width:767px){
  body[data-page="contact"] .subfv--solid,
  body[data-page="contact-finish"] .subfv--solid{ padding-top:56px; padding-bottom:24px; min-height:0 }
}

/* ===== 青グラデボタン（Figma Button Primary 2414:11517/2442:5995：rounded8・pad22/32・18px Bold・h77）
   common の .btn--grad は space-between（矢印付き横長）でテキスト中央にならないため、
   ページ側クラスで中央寄せグラデ版を定義（common.css は不可侵）。 ===== */
.contact-form__btn,
.finish__card .btn{
  background:linear-gradient(180deg,#2b5eb4 0%,#0851a2 100%);
  border-radius:8px; padding:22px 32px; min-height:0;
  font-size:var(--fz-lead); line-height:var(--lh-lead); letter-spacing:1px;
}
.contact-form__btn:hover,
.finish__card .btn:hover{
  background:linear-gradient(180deg,#3a6fc8 0%,#0a5fbd 100%);
}

/* ===== 送信完了（FVから続く濃紺地に淡色カード）
   Figma 2441:5860: カード=#EEF0F6フラット（グラデfillは下層で不可視）・角丸なし・pad64/48。
   icon100 →(48)→ title32(cap詰め) →(56)→ 本文16/lh2.8 →(56)→ Button 600×77。総高668 ===== */
.finish{ background:var(--c-main); padding:88px 0 120px }
.finish__card{ max-width:1094px; margin-inline:auto; background:var(--c-grad-end); border-radius:0;
  padding:64px 48px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:56px }
.finish__icon{ display:block; margin-bottom:-8px } /* icon→title間はgap48（56−8） */
.finish__icon svg{ display:block; width:100px; height:100px }
.finish__title{ font-size:var(--fz-h3); line-height:var(--lh-h3); font-weight:700; letter-spacing:0.01em;
  text-box-trim:trim-both; text-box-edge:cap alphabetic }
.finish__text{ display:flex; flex-direction:column; gap:0; font-size:var(--fz-body); line-height:2.8; letter-spacing:1px }
.finish__card .btn{ width:600px; max-width:100% }
@media (max-width:767px){
  .finish{ padding:56px 0 72px }
  .finish__card{ padding:48px 20px; gap:36px } .finish__icon{ margin-bottom:0 }
  .finish__icon svg{ width:72px; height:72px }
  .finish__title{ font-size:24px } .finish__text{ line-height:2.2 }
  .finish__card .btn{ width:100% }
}

/* ===== お問い合わせフォーム（10-contact） =====
   カンプ準拠：濃紺地に#EEF0F6フラットのカード。ラベル上＋全幅入力の縦積み。
   Figma wrap: 上88 → intro(58) → 64 → カード(1103) → 80 → 送信ブロック(305) → 144 → footer */
.contact-section{ background:var(--c-main); padding:88px 0 144px }
/* イントロ文（カンプ：濃紺地・白文字・左寄せ。カードは max1094 で左端揃え） */
.contact-intro{ width:100%; max-width:1094px; margin-inline:auto;
  color:var(--c-white); font-size:var(--fz-body); line-height:var(--lh-body);
  letter-spacing:1px; text-align:left; margin-bottom:24px }
/* 注意書き：PC14px / SP10px（SPは下段の767ブロック）。「開設しております。」で改行（markupの<br>） */
.contact-note{ width:100%; max-width:1094px; margin-inline:auto;
  color:var(--c-white); font-size:14px; line-height:1.9;
  letter-spacing:1px; text-align:left; margin-bottom:64px }

.contact-form{ display:flex; flex-direction:column; align-items:center; gap:0 }

/* フォームカード：Figma 2414:11472 は #EEF0F6 フラット（グラデfillは下層で不可視）・角丸なし・pad64/48 */
.contact-card{ width:100%; max-width:1094px; box-sizing:border-box;
  padding:64px 48px; border-radius:0;
  background:var(--c-grad-end);
  display:flex; flex-direction:column; gap:56px }

.form-field{ display:flex; flex-direction:column; gap:16px; border:0; padding:0; margin:0; min-width:0 }
/* ラベル：Figma 18px Bold lh1.8 cap詰め（h13）・tracking 0.18px(=1%) */
.form-field__label{ font-size:var(--fz-lead); line-height:var(--lh-lead); font-weight:700;
  letter-spacing:0.01em; color:var(--c-main); padding:0;
  text-box-trim:trim-both; text-box-edge:cap alphabetic }
/* 「必須」バッジ（丸ピル・accent地・白字）。所属部署/役職は任意項目のため --required 修飾クラスのみに付与 */
.form-field__label--required::after{ content:"必須"; display:inline-block; margin-left:8px;
  border-radius:calc(infinity * 1px); background:var(--c-accent); color:var(--c-white);
  padding:2px 7px 4px; font-size:12px; line-height:1.2; letter-spacing:.04em;
  font-weight:400; vertical-align:.2em }

/* 入力欄：Figma h61（pad24＋cap詰めテキスト13）。inputはtext-box-trim不可のため高さ実寸で合わせる */
.form-field__input{ width:100%; box-sizing:border-box; font:inherit;
  font-size:var(--fz-lead); letter-spacing:0.01em;
  height:61px; padding:0 24px; border:1px solid transparent; border-radius:0;
  background:var(--c-white); color:var(--c-main) }
.form-field__input::placeholder{ color:#c2c2c2 }
.form-field__input:focus{ outline:none; border-color:var(--c-accent);
  box-shadow:0 0 0 3px rgba(43,94,180,.18) }
/* お問い合わせ内容（textarea）：指定値。両クラスで input の height/padding を上書き */
.form-field__input.form-field__textarea{ height:calc(275rem / 16);
  padding:calc(12rem / 16) min(24px, 1.59vw); font-size:calc(14rem / 16);
  line-height:1.8; resize:vertical }

/* お問い合わせ種別（ラジオ）：行h24（py2＋丸20）・行間gap24。
   legend は fieldset の flex レイアウト外に置かれ gap が効かないため先頭行に margin-top で補正 */
.form-field--type{ gap:24px }
.form-field--type .form-radio:first-of-type{ margin-top:24px }
.form-radio{ display:flex; align-items:center; gap:24px; padding:2px 0 }
.form-radio input[type="radio"]{ appearance:none; -webkit-appearance:none; margin:0;
  width:20px; height:20px; flex:0 0 20px; border-radius:50%;
  border:1px solid var(--c-line); background:#fff; cursor:pointer; position:relative }
.form-radio input[type="radio"]:checked{ border-color:var(--c-accent) }
.form-radio input[type="radio"]:checked::after{ content:""; position:absolute;
  inset:4px; border-radius:50%; background:var(--c-accent) }
.form-radio input[type="radio"]:focus-visible{ outline:2px solid var(--c-accent); outline-offset:2px }
.form-radio label{ font-size:var(--fz-lead); line-height:var(--lh-lead);
  letter-spacing:0.01em; color:var(--c-main); cursor:pointer;
  text-box-trim:trim-both; text-box-edge:cap alphabetic }

/* 送信ブロック（濃紺地・白文字）：Figma Section Container 580×305・gap48 */
.contact-submit{ width:100%; max-width:580px; margin-top:80px;
  display:flex; flex-direction:column; align-items:center; gap:48px }

.contact-consent{ display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center }
.form-checkbox{ display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-size:var(--fz-body); line-height:var(--lh-body); letter-spacing:1px; color:var(--c-white) }
.form-checkbox input[type="checkbox"]{ position:absolute; opacity:0; width:0; height:0 }
.form-checkbox__box{ flex:0 0 20px; width:20px; height:20px; background:#fff;
  border:1px solid #535353; position:relative }
.form-checkbox input:checked + .form-checkbox__box::after{ content:""; position:absolute;
  left:6px; top:1px; width:6px; height:12px; border:solid var(--c-accent);
  border-width:0 2px 2px 0; transform:rotate(45deg) }
.form-checkbox input:focus-visible + .form-checkbox__box{ outline:2px solid var(--c-accent); outline-offset:2px }
.contact-consent__note{ font-size:var(--fz-caption); line-height:1.8; letter-spacing:1px; color:var(--c-white) }
.contact-consent__note a{ color:var(--c-white); text-decoration:underline; text-underline-offset:2px }

/* 認証ウィジェット設置枠：Figma image 60（Turnstileモック 300×65）を画像で再現。本番で差し替え */
.contact-recaptcha{ display:block; width:300px; height:65px; max-width:100% }

/* 送信ボタン：Figma Button Primary（580×77・pad22/32・gap18・0deg #0851A2→#2B5EB4・radius8） */
.contact-form__btn{ display:flex; flex-direction:row; justify-content:center; align-items:center;
  gap:18px; width:580px; max-width:100%; height:77px; padding:22px 32px;
  background:linear-gradient(0deg,#0851A2 0%,#2B5EB4 100%); border-radius:8px;
  border:0; box-shadow:none; appearance:none; -webkit-appearance:none; cursor:pointer } /* input既定の枠/立体を消す＋ポインタ */

@media (max-width:1023px){
  .contact-card{ padding:48px 32px }
}
@media (max-width:767px){
  .contact-section{ padding:56px 0 96px }
  .contact-intro{ text-align:left; margin-bottom:16px }
  .contact-note{ font-size:10px; margin-bottom:36px }
  .contact-form__btn{ width:100% }
  .contact-card{ padding:32px 20px; gap:40px }
  .form-field{ gap:16px }
  .form-field--type .form-radio:first-of-type{ margin-top:16px }
  .form-field__input{ height:52px; padding:0 16px }
  .form-radio{ gap:16px }
  .contact-submit{ margin-top:56px; gap:36px }
}

/* =====================================================================
   Contact Form 7 出力を既存フォーム意匠へマッピング（WP化）
   ===================================================================== */
.contact-form .wpcf7-form-control-wrap{ display:block }
.form-field--type .wpcf7-radio{ display:flex; flex-direction:column; gap:16px } /* 縦並び（元の仕様に戻す） */
.form-field--type .wpcf7-list-item{ margin:0 }
.form-field--type .wpcf7-list-item label{ display:inline-flex; align-items:center; gap:8px; cursor:pointer }
.contact-consent .wpcf7-acceptance .wpcf7-list-item{ margin:0 }
.contact-consent .wpcf7-acceptance label{ display:inline-flex; align-items:flex-start; gap:10px; cursor:pointer; line-height:1.6 }
.wpcf7-not-valid-tip{ color:#c0392b; font-size:var(--fz-caption); margin-top:6px; display:block }
.wpcf7 .wpcf7-response-output{ margin:24px 0 0; padding:16px; border-radius:8px; font-size:var(--fz-body); line-height:1.7 }
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output{ border:1px solid #e0b4b4; background:#fdf0f0; color:#912d2b }
.wpcf7-form.sent .wpcf7-response-output{ border:1px solid #b7d8b7; background:#eef7ee; color:#2f6b2f }
.wpcf7-not-valid{ border-color:#c0392b !important }
.wpcf7-spinner{ margin:0 8px }
/* Turnstile：プラグインが挿入する余分な<br>と余白を除去（余白は .contact-submit の gap48 で管理） */
.cf7-cf-turnstile{ margin:0 !important; line-height:0 }
.cf-turnstile{ margin:0 }
.cf-turnstile-br,
.contact-submit > br{ display:none }   /* クラス付き＋素の<br/>（プラグイン挿入）を両方除去 */
.cf7-cf-turnstile > *{ margin-top:0; margin-bottom:0 }
.contact-submit .wpcf7-spinner{ position:absolute; margin:0 }   /* 送信ボタン下に余白を作らない */
/* 同意チェックのラベル文言：暗背景の contact-submit 上で白 */
.contact-consent .wpcf7-list-item-label{ color:var(--c-white); font-size:var(--fz-body); line-height:1.6 }
.contact-consent .wpcf7-acceptance input[type="checkbox"]{ width:20px; height:20px; flex:0 0 20px; margin-top:2px; accent-color:var(--c-accent) }
/* ラベル下の余白16px：CF7フォームでは label と入力を同一行に置き（create-cf7.php）autopの
   <br>を抑止した上で、label を block＋margin-bottom:16px にして label→input を16pxに固定 */
.form-field__label{ display:block; margin-bottom:16px }