/* ==========================================================================
   Form — 共通フォームコンポーネント
   ==========================================================================
   対象: お問い合わせフォーム（css/sections/contact.css）から、
   「ラベル・入力欄・フィールド構造」という役割で再利用可能と判断した
   部分のみを移動した。

   [移動した理由]
   .contact__field 一式は、Contactという特定セクションの意匠
   （色・余白・文言）にほぼ依存しておらず、「ラベルを上・入力欄を下に積む
   フィールド」「入力欄の基本的な見た目」「フォーカス時の表現」
   「送信結果メッセージの表示/非表示・色分け」という、他のフォーム
   （資料請求・来場予約など）でもそのまま使える汎用的な役割だった。

   [クラスについて]
   既存の .contact__field / .contact__form-message 等のBEMクラスは
   HTML側から削除・改名していない（構造や将来のJSフック用に残置）。
   その上で、フォームの役割を表す共通クラスを追加する方式にした:
     .c-form-field   : ラベル+入力欄を縦に積むフィールドのラッパー
     .c-form-label   : ラベルの基本タイポグラフィ
     .c-form-control : input/textareaの基本スタイル（フォーカス状態含む）
     .c-form-message : 送信結果メッセージの基本UI

   [Contact側に残したもの]
   .contact__form の width:822px 等の配置・幅、.contact__submit
   （送信CTA、c-cta-btnで別途共通化済み）は、このLPのContactセクション
   固有の配置・デザインであり「フォームという役割」そのものではないため
   css/sections/contact.css 側に残している。
   ========================================================================== */
.c-form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.c-form-label {
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
}

/* 必須ラベル。.c-form-label自体は既存のまま(display/font-size等を変更せず)、
   ラベルテキストの右横に置く小さなバッジとして追加する。
   inline-blockのため通常のテキストと同じ行に収まり、項目名・入力欄の
   縦間隔には影響しない。対象は「お名前」「メールアドレス」のみで、
   「お問い合わせ内容」には付与していない(HTML側で個別に追加)。 */
.c-form-required {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 1px 6px;
  background-color: var(--color-accent);
  color: var(--color-base);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  border-radius: 4px;
}

.c-form-control {
  width: 100%;
  padding: 4px 12px;
  background-color: var(--color-base);
  border: 1px solid var(--color-blue-text);
  border-radius: 6px;
  font-size: 1.4rem;
}

/* お名前・メールアドレス欄のみ、縦幅を現状の約1.5倍にする。
   textarea（お問い合わせ内容）はmin-heightで別途制御しているため、
   input要素だけに限定したセレクタ(input.c-form-control)で指定し、
   .c-form-control本体・textarea側には一切影響しないようにしている。
   実測値: SP 30px→45px(約1.5倍) / PC 41px→62px(約1.5倍) */
input.c-form-control {
  height: 45px;
}

textarea.c-form-control {
  min-height: 120px;
  resize: vertical;
}

.c-form-control:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.c-form-message {
  /* 送信結果メッセージは通常空文字のため、min-height:1.5emが
     送信ボタン下に余分な空白を常時発生させてしまう。:emptyの間は
     display:noneにしてフォームのgapからも除外し、未送信時は
     送信ボタン+セクション本来の余白だけの自然な見た目にする
     (メッセージが入った時点で通常表示に戻る。PC版は現状維持のため
     media query内でリセットしている)。 */
  text-align: center;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--color-text);
}

.c-form-message:empty {
  display: none;
}

.c-form-message.is-success {
  color: #2e7d32;
}

.c-form-message.is-error {
  color: #c62828;
}

@media (min-width: 768px) {
  .c-form-field {
    gap: 10px;
  }

  .c-form-label {
    font-size: 1.6rem;
  }

  .c-form-required {
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 1.2rem;
  }

  .c-form-control {
    padding: 8px 16px;
    font-size: 1.6rem;
  }

  input.c-form-control {
    height: 62px;
  }

  textarea.c-form-control {
    min-height: 192px;
  }

  .c-form-message {
    /* PC版は現状維持のためmin-heightを再指定 */
    min-height: 1.5em;
    font-size: 1.6rem;
  }

  .c-form-message:empty {
    /* PC版はSP用のdisplay:noneを打ち消し、従来通り空でも領域を確保する */
    display: block;
  }
}

/* ==========================================================================
   Contact Form 7 統合用の追加ルール
   ==========================================================================
   このブロックは静的HTML版には存在しない、WordPressテーマ側だけの追加。
   Contact Form 7 が自動生成する要素(.wpcf7 / .wpcf7-form-control-wrap /
   .wpcf7-not-valid-tip / .wpcf7-response-output)が、既存の
   .c-form-field(flex column)前提のレイアウトに影響しないよう
   最小限の上書きを行う。上のルール(.c-form-field 等)は一切変更していない。
   ========================================================================== */

/* CF7がショートコード全体を包む外側divを、レイアウト上「存在しない」
   ものとして扱う。display:contentsで div自身のボックスを消し、
   直下の<form class="contact__form fade-up">がこれまで通り
   .l-inner の直接の子であるかのように振る舞う。 */
.wpcf7 {
  display: contents;
}

/* CF7バージョンによっては.wpcf7-form-control-wrapに
   display:inline-block(自身の内容にフィットする幅)が付与されることがあり、
   その場合.c-form-control(width:100%)の基準となる幅が入力欄本来の
   デフォルト幅まで縮んでしまう。.c-form-fieldの直下でのみ
   block化して幅100%に強制する(他箇所への影響を避けるためスコープを限定)。 */
.c-form-field .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* バリデーションエラー時に挿入される吹き出しテキスト。
   入力欄のすぐ下に自然に収まるようにし、位置ズレやオーバーラップを防ぐ。 */
.wpcf7-not-valid-tip {
  display: block;
  margin-top: 4px;
  font-size: 1.2rem;
  color: #c62828;
}

/* 送信結果メッセージはCF7標準のUIではなく既存の.c-form-message
   (js/modules/contact-form7.js が wpcf7mailsent 等のイベントを拾って
   反映する)を使うため、CF7標準の出力欄は表示しない。 */
.wpcf7-response-output {
  display: none;
}

/* 送信ボタンがフォーム左端に寄る問題の実際の原因:
   CF7の「フォーム」タブはwpautop相当の処理を行い、divで囲んでいない
   <button>...</button>を自動的に<p>...</p>で囲んでしまう
   (実機のDOMで確認: <form class="contact__form">直下に
   <p>(無名・ボタンを内包)</p>が挿入されている)。
   結果として.contact__submitは.contact__form(display:flex)の
   直接の子ではなくなり、align-self:centerが効かなくなっていた。
   .contact__submitはdisplay:inline-flexのためmargin:autoによる
   中央揃えも効かない(auto marginはブロックレベル要素にのみ中央揃えとして
   作用する)。ボタン自身のサイズ・色・影・矢印には触れず、CF7が生成する
   <p>側にtext-align:centerを指定することで、その中のinline-flexな
   ボタンを水平中央に配置する。
   .contact__form-message(.c-form-message)も直接の子のpだが、
   元々text-align:center済みのため影響なし。 */
.contact__form > p {
  text-align: center;
}