/* ============================================================
   contact.html（お問い合わせ）専用スタイル
   ------------------------------------------------------------
   読み込み順：common.css → contact.css
   構成はFigmaワイヤーフレーム node 489-2583（SP-375）準拠。
   フォーム部品はcompany.htmlの「枠なし・区切り線」路線に揃え、
   ボックス／ドロップシャドウは使わない（common.cssの既存コンポーネントのみ踏襲）
   配下ページはTOPより控えめな「一般レベル」の文字サイズにする
   ============================================================ */

/* ---- 配下ページ共通の控えめ見出し（このページ内のみ上書き） ---- */
main .en-h2 {
  font-size: var(--fs-en-h3);
  letter-spacing: 3px;
}

.contact-hero { padding-block: clamp(48px, 6vw, 104px) 0; }
.contact-hero__lead {
  margin-top: clamp(20px, 2.5vw, 32px);
  /* 74ch（504px@1280）だと「幅広い領域で〜大歓迎です。」（41文字・約592px）が
     1行に収まらなかったので、収まる幅まで広げる。
     ⚠️ 文言を変えたら必要幅を実測して見直すこと */
  max-width: 92ch;
  font-size: var(--fs-body-sm);
  line-height: 1.85;
  letter-spacing: 1px;
  color: var(--neutral-800);
}
/* 「幅広い領域で〜大歓迎です。」を1行で出すための箱。
   この文は約592px必要でSPの本文幅(273〜383px)には収まらないので、
   768px以上でだけ1行に固定する。SPでは中の .nowrap 単位で折り返す */
@media (min-width: 768px) {
  .contact-hero__lead .keep-one-line { white-space: nowrap; }
}
.contact-hero__sub {
  margin-top: 12px;
  max-width: 74ch;
  font-size: var(--fs-body-sm);
  line-height: 1.85;
  letter-spacing: 1px;
  color: var(--neutral-800);
}

/* ============ フォーム（WF 562:1118〜562:1155） ============
   newsページの一覧カードとトンマナを合わせ、フォーム一式を
   白の角丸セクションに載せる（タイトル・リード文はベタ置きのまま） */
.contact-form-section { margin-block: clamp(40px, 5vw, 64px) clamp(56px, 8.33vw, 160px); }

.contact-form {
  background: #fff;
  border-radius: var(--radius);
  padding: clamp(32px, 4vw, 64px) clamp(24px, 5vw, 88px);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 40px);
}
/* 各フィールドは読み書きしやすい幅に頭打ちして白カード内で中央寄せ */
.contact-form > * {
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
}

/* ============ 送信ボタン ============ */
.contact-form__submit { align-self: center; width: fit-content; margin-top: 8px; }
/* 送信結果。成功＝ブランドのティール、失敗＝赤系。role="status" で読み上げにも通る */
.contact-form__submit:disabled { opacity: 0.55; cursor: default; }