/* ==========================================================================
   お問い合わせ（page-contact.php）
   出典: docs/design-spec/06_contact.md（Zeplin 実測 px）
         docs/02_CONTACT_FORM.md（Contact Form 7 のマークアップ定義）
         docs/design-spec/99_buttons.md（B3 送信ボタン）

   使用アセット（コピー元）
     images/contact/wave-cream-pc.svg / -sp.svg ← design/assets/layer__6877.svg（PC）と
                                   layer__6674.svg（SP）の波形を抽出して生成
     images/icon-allow-w.webp（共通・配置済み）

   このページの地色は #FBF7E9（お知らせの #FFFFFF とは違う）。フッター帯のみ白。
   フォーム本体は CF7 が出力するため、`.c-form__*` / `.wpcf7-*` を
   `.p-contact` 配下に閉じた形で整える（共通CSSには書かない）。
   ========================================================================== */

/* --------------------------------------------------------------------
   本体（ページヘッダーの緑帯にクリーム色の波形で食い込む領域）
   PC: 波形の頂点 409（帯下端 500 から 91px 上）/ 波の深さ 84px
       リード文 629 まで 220px。送信ボタン下端 2024 → フッター 2144 で 120px。
   -------------------------------------------------------------------- */
.p-contact__main {
  margin-top: -91px;
  padding-block: 220px 120px;
  /* 波形は components.css の [data-wave]（画像なし・マスク）。地色は波の下から敷く。 */
  --wave-fill: var(--c-cream);
  background-image: linear-gradient(var(--c-cream), var(--c-cream));
  background-repeat: no-repeat;
  background-position: center var(--wave-h);
  background-size: 100% calc(100% - var(--wave-h));
}

/* --------------------------------------------------------------------
   §4 リード文（Bold 20px / lh 40 / 中央）
   -------------------------------------------------------------------- */
.p-contact__lead {
  font-size: 20px;
  font-weight: var(--fw-bold);
  line-height: 40px;
  text-align: center;
  color: var(--c-text);
}

/* --------------------------------------------------------------------
   §5 電話案内
   ⚠ デザインの `TEL.0422-32-4362` は他案件の残りのため使わない。
      uruma_ls_get('tel')（098-979-6557）を出す。→ REQUESTS_news.md
   -------------------------------------------------------------------- */
.p-contact__tel { margin-top: 50px; text-align: center; }

.p-contact__tel-label {
  font-size: 20px;
  font-weight: var(--fw-bold);
  line-height: 1.5;
  color: var(--c-text);
}
.p-contact__tel-number {
  margin-top: 12px;
  font-size: 50px;
  font-weight: var(--fw-black);
  line-height: 1;
  color: var(--c-text);
}
.p-contact__tel-number a { color: inherit; }
.p-contact__tel-prefix { font-size: 30px; }
.p-contact__tel-note {
  margin-top: 14px;
  font-size: 20px;
  font-weight: var(--fw-bold);
  line-height: 1.5;
  color: var(--c-text);
}

/* --------------------------------------------------------------------
   §6 フォーム見出し
   -------------------------------------------------------------------- */
.p-contact__form-title {
  margin-top: 80px;                  /* 受付時間下端 942 → 1031 */
  font-size: 40px;
  font-weight: var(--fw-bold);
  line-height: 1;
  text-align: center;
  color: var(--c-text);
}

.p-contact__form { margin-top: 55px; }   /* 見出し下端 1069 → ラジオ行 1128 */

/* 管理者向けの注意文（フォーム未設定時） */
.p-contact__notice {
  max-width: 800px;
  margin-inline: auto;
  padding: 24px 28px;
  border: 2px dashed var(--c-orange);
  border-radius: var(--radius);
  background: var(--c-white);
  font-size: 16px;
  font-weight: var(--fw-medium);
  line-height: 1.8;
}

/* --------------------------------------------------------------------
   §7 入力フォーム（PC = ラベル200px + 入力960px の2カラム / 行ピッチ70px）
   -------------------------------------------------------------------- */
.p-contact .c-form__row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: center;
}
.p-contact .c-form__row + .c-form__row { margin-top: 30px; }   /* 40 + 30 = 70px */
.p-contact .c-form__row--textarea { align-items: start; }

.p-contact .c-form__label {
  font-size: 18px;
  font-weight: var(--fw-regular);
  line-height: 1.5;
  /* デザインは入力ラベルのみ #000000、区分だけ #403632。
     06_contact.md「要確認 8」の提案どおり #403632 に統一した。 */
  color: var(--c-text);
}
.p-contact .c-form__req { font-weight: inherit; }   /* 必須はラベル末尾の半角 * */

.p-contact .wpcf7-form-control-wrap { display: block; }

.p-contact .c-form__field input[type="text"],
.p-contact .c-form__field input[type="tel"],
.p-contact .c-form__field input[type="email"],
.p-contact .c-form__field textarea {
  width: 100%;
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-s);
  background: var(--c-white);
  font-family: var(--font-base);
  font-size: 18px;
  font-weight: var(--fw-regular);
  color: var(--c-text);
}
.p-contact .c-form__field input[type="text"],
.p-contact .c-form__field input[type="tel"],
.p-contact .c-form__field input[type="email"] {
  height: 40px;
  padding-inline: 12px;
}
.p-contact .c-form__field textarea {
  display: block;
  height: 300px;
  padding: 8px 12px;
  line-height: 1.8;
  resize: vertical;
}
.p-contact .c-form__field input:focus-visible,
.p-contact .c-form__field textarea:focus-visible {
  outline: 2px solid var(--c-green);
  outline-offset: 1px;
}
/* プレースホルダはデザインに無い（空のまま実装） */

/* ラジオ（20×20 / 選択時は中央に緑のドット = 提案値） */
.p-contact .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  column-gap: 38px;
  row-gap: 22px;
}
.p-contact .wpcf7-list-item { margin: 0; }
.p-contact .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}
.p-contact .wpcf7-list-item-label {
  font-size: 18px;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--c-text);
}
.p-contact input[type="radio"] {
  appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid var(--c-rule);
  border-radius: 10px;
  background: var(--c-white);
}
.p-contact input[type="radio"]:checked {
  box-shadow: inset 0 0 0 5px var(--c-white), inset 0 0 0 10px var(--c-green);
}
.p-contact input[type="radio"]:focus-visible {
  outline: 2px solid var(--c-green);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------
   §8 同意チェック + プライバシーポリシーリンク
   PC は左端 x=798（= 画面中央寄せのブロックとして扱う）、SP は x=23。
   -------------------------------------------------------------------- */
.p-contact .c-form__agree {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;                   /* textarea 下端 1757 → 1807 */
}
.p-contact .wpcf7-acceptance .wpcf7-list-item label {
  align-items: flex-start;
  gap: 13px;                          /* チェックボックス 818 → テキスト 831 */
}
.p-contact .wpcf7-acceptance .wpcf7-list-item-label {
  font-weight: var(--fw-regular);
  line-height: 20px;
  color: #3E3A39;                     /* トークンに無い注記色（06_contact.md §0） */
}
.p-contact input[type="checkbox"] {
  appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid var(--c-rule);
  border-radius: 2px;
  background: transparent;            /* 地色が透ける（塗り不透明度0） */
}
.p-contact input[type="checkbox"]:checked {
  border-color: var(--c-green);
  /* チェックマークはデザイン未定義（緑での表現を提案） */
  background:
    linear-gradient(45deg, transparent 44%, var(--c-green) 44% 56%, transparent 56%) no-repeat 2px 2px / 12px 12px,
    linear-gradient(-45deg, transparent 44%, var(--c-green) 44% 56%, transparent 56%) no-repeat 2px 2px / 12px 12px;
}
.p-contact input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--c-green);
  outline-offset: 2px;
}

.p-contact .c-form__policy { margin-top: 23px; }   /* 同意テキスト 1807 → 1848 */
.p-contact .c-form__policy a {
  border-bottom: 1px solid #969696;   /* トークンに無い下線色（06_contact.md §8） */
  font-size: 18px;
  font-weight: var(--fw-regular);
  line-height: 1.2;
  color: #3E3A39;
}

/* --------------------------------------------------------------------
   Cloudflare Turnstile（スパム対策 / inc/turnstile.php）
   同意チェックの下・送信ボタンの上に中央寄せで置く。
   デザインには無い要素なので、前後の余白はボタンまわりに合わせた。
   -------------------------------------------------------------------- */
.p-contact .c-form__turnstile {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
/* Turnstile があるときは送信ボタンの上余白を詰める */
.p-contact .c-form__turnstile + .c-form__submit { margin-top: 50px; }
.p-contact .c-form__turnstile .cf-turnstile { max-width: 100%; }
@media (max-width: 1079px) {
  .p-contact .c-form__turnstile { margin-top: 30px; }
}

/* --------------------------------------------------------------------
   §9 送信ボタン（99_buttons.md B3 = 「戻る」と同一スタイル）
   260×40 / radius 20 / テキスト中央 / 矢印は枠右端から 13px
   -------------------------------------------------------------------- */
.p-contact .c-form__submit {
  position: relative;
  /* Turnstile が入るときは、その下 50px に置く（デザインの 110px から詰める）。
     入っていないときは従来どおり 110px。 */
  margin-top: 110px;                  /* 確認リンク下線 1870 → ボタン 1984 */
  text-align: center;
}
.p-contact input[type="submit"] {
  width: 260px;
  height: 40px;
  padding: 0;                         /* ラベルは矢印と関係なく枠の中央（2026-09-16 市川様の方針） */
  border: 0;
  border-radius: var(--radius-l);
  background:
    url(../images/icon-allow-w.webp) no-repeat right 13px center / 16px 15px,
    var(--c-green);
  color: var(--c-white);
  font-family: var(--font-base);
  font-size: 18px;
  font-weight: var(--fw-medium);
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s var(--ease);
}
.p-contact input[type="submit"]:hover {
  background-color: var(--c-green-hover);   /* hover はデザイン未定義（B3 の提案） */
}
.p-contact input[type="submit"]:disabled {
  background-color: var(--c-rule);
  cursor: not-allowed;
}
/* 🚨 CF7 のスピナーは待機中も DOM にあり、`visibility: hidden` なだけで
   **inline-block のまま幅 24px + 左右マージン 36px を占める**。
   中央寄せの行にボタンと並ぶので、ボタンが 30px 左へずれていた
   （2026-09-16 市川様のご指摘）。絶対配置にしてレイアウトから外す。

   左位置は「ボタン中央 + ボタン幅の半分(130) + 12px」。
   ただし幅の狭い画面でコンテナからはみ出して横スクロールが出ないよう、
   min() で右端の内側に丸める。 */
.p-contact .wpcf7-spinner {
  position: absolute;
  top: 50%;
  left: min(calc(50% + 142px), calc(100% - 24px));
  margin: 0;
  transform: translateY(-50%);
}

/* --------------------------------------------------------------------
   バリデーション表示（指示書 p08「https://somaopt.co.jp/contact/ と同じ設定」）
   2026-09-16 に参考サイトの実装を確認して合わせた。

   参考サイト（MW WP Form）の `.mw_wp_form .error`:
     色 #009de6 べた塗り＋白文字 / border-radius 4px / padding 0 10px /
     margin-top 12px / width: fit-content / ::before で 10px の上向き三角を中央に
   = 入力欄の下に「吹き出し」を出す。**入力欄の枠線は変えない**（参考サイトも
     エラー時に枠の色は変わらない）。

   🚨 色は参考サイトのブランド色（青）ではなく、このサイトのトークン `--c-red`
      #D32D25 を使う（「アクセント。強調・注意」用に定義済み）。
      ブランド色の緑 #8DC21F / 橙 #F5AB37 は白文字とのコントラストが
      それぞれ 2.4:1 / 2.1:1 しかなく、注意書きの可読性が確保できない。
      #D32D25 なら 5.2:1 で WCAG AA を満たす。
   -------------------------------------------------------------------- */
.p-contact .wpcf7-not-valid-tip {
  position: relative;
  display: block;
  width: fit-content;
  margin-top: 16px;                  /* 三角 10px ＋ 参考サイトの余白 6px 相当 */
  padding: 2px 12px;
  border-radius: var(--radius-s);
  background: var(--c-red);
  font-size: 15px;
  font-weight: var(--fw-medium);
  line-height: 1.8;
  color: var(--c-white);
}
/* 吹き出しの上向き三角。参考サイトと同じく吹き出しの中央に置く。 */
.p-contact .wpcf7-not-valid-tip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-bottom-color: var(--c-red);
}

.p-contact .wpcf7-response-output {
  max-width: 960px;
  margin: 24px auto 0;
  padding: 12px 16px;
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-s);
  background: var(--c-white);
  font-size: 16px;
  font-weight: var(--fw-medium);
  line-height: 1.8;
  text-align: center;
}
/* 送信できなかったとき（未入力・不正値・サーバーエラー） */
.p-contact form.invalid .wpcf7-response-output,
.p-contact form.unaccepted .wpcf7-response-output,
.p-contact form.payment-required .wpcf7-response-output,
.p-contact form.failed .wpcf7-response-output,
.p-contact form.aborted .wpcf7-response-output,
.p-contact form.spam .wpcf7-response-output {
  border-color: var(--c-red);
  color: var(--c-red);
}
/* 送信できたとき（通常はサンクスページへ遷移するので出ない） */
.p-contact form.sent .wpcf7-response-output {
  border-color: var(--c-green);
  color: var(--c-text);
}

/* --------------------------------------------------------------------
   SP（375 アートボード基準）
   -------------------------------------------------------------------- */
@media (max-width: 1079px) {

  /* 波形の頂点 296（帯下端 440 から 144px 上）/ 波の深さ 30px。
     リード文 383 まで 87px。送信ボタン下端 1923 → フッター 1983。 */
  .p-contact__main {
    margin-top: -144px;
    padding-block: 87px 60px;
    /* 波の深さと地色の起点は --wave-h（components.css）。 */
  }

  .p-contact__lead { font-size: 16px; line-height: 30px; }

  .p-contact__tel { margin-top: 39px; }
  .p-contact__tel-number { font-size: 44px; }
  .p-contact__tel-prefix { font-size: 24px; }

  .p-contact__form-title { margin-top: 59px; font-size: 26px; }
  .p-contact__form { margin-top: 39px; }

  /* 縦積み1カラム（330px）/ 行ピッチ 102px */
  .p-contact .c-form__row { display: block; }
  .p-contact .c-form__row + .c-form__row { margin-top: 30px; }
  .p-contact .c-form__label { margin-bottom: 15px; line-height: 1; }
  .p-contact .c-form__field textarea { height: 240px; }

  .p-contact .c-form__agree { align-items: flex-start; margin-top: 40px; }
  .p-contact .c-form__policy { margin-top: 21px; }

  .p-contact .c-form__submit { margin-top: 60px; }
}