/* p-contact — お問い合わせフォーム（Figma 3191:24514 実測値・全てトークン参照）
   フォーム本体は Contact Form 7 の出力。CF7が挟む wrapper（.wpcf7-form-control-wrap 等）を
   透過させ、行レイアウトは投稿本文側のフォームテンプレート（.p-contact__row）で組む。 */

.p-contact {
  padding-block: var(--space-120);
  background: var(--color-bg-beige); /* #FFF + #A89990 10%（Figma変数） */
  color: var(--color-text);
}

.p-contact__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-40);
}

.p-contact__lead {
  margin: 0;
  width: 44.75rem; /* 716px（Figma実測） */
  max-width: 100%;
  font-size: var(--font-size-h3); /* 18.286px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
  text-align: center;
}

.p-contact__body {
  width: 60rem; /* 960px（Figma実測） */
  max-width: 100%;
}

/* --- メッセージページ（完了 page-thanks.php）専用 -------------------------
   フォームの代わりに見出し＋リード＋戻るボタンだけを載せる帯。
   セクションに .p-contact--message を付けて使う。 */
.p-contact__message-title {
  margin: 0;
  font-size: var(--font-size-h2); /* 32px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  text-align: center;
}

.p-contact__message-action {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* メッセージページはコンテンツが少なく、縦長の画面ではフッターの下に body の
   白地が見えてしまう。ベージュ帯を伸縮させてフッターを常に画面下端に届かせる */
body:has(.p-contact--message) {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

body:has(.p-contact--message) .l-main {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

.p-contact--message {
  display: flex;
  flex: 1 0 auto;
  align-items: center; /* 伸びた帯の中でメッセージを上下中央に */
}

/* CF7 が自動で入れる余白・見た目をリセット（レイアウトはテーマ側で持つ） */
.p-contact__body .wpcf7-form p {
  margin: 0;
}

.p-contact__body .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* --- 行 --- */
.p-contact__row {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  width: 100%;
}

.p-contact__row + .p-contact__row {
  margin-top: var(--space-24);
}

.p-contact__row--textarea {
  align-items: flex-start;
}

/* --- 見出し列 --- */
.p-contact__label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-16);
  flex-shrink: 0;
  width: 17.5rem; /* 280px（Figma実測） */
  font-size: var(--font-size-h3); /* 18.286px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
  text-align: right;
}

/* CF7の出力は <p>ラベル<span class="p-contact__badge">必須</span></p> で、
   必須バッジ・任意ラベルとも <p> 内のインライン要素。親のgapは効かないため
   自前で間隔を持つ。両者で見え方がずれないよう、間隔と文字サイズは共通にする。 */
.p-contact__badge,
.p-contact__optional {
  margin-left: var(--space-12);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
}

.p-contact__badge {
  padding: var(--space-2) var(--space-16);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-white);
}

/* --- 入力列 --- */
.p-contact__field {
  flex: 1;
  min-width: 0;
}

.p-contact__field input[type="text"],
.p-contact__field input[type="email"],
.p-contact__field input[type="tel"],
.p-contact__field select,
.p-contact__field textarea {
  display: block;
  width: 100%;
  padding: var(--space-16);
  border: 0;
  border-radius: var(--radius-input);
  background: var(--color-white);
  box-shadow: var(--shadow-input);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

.p-contact__field ::placeholder {
  color: var(--color-placeholder);
}

.p-contact__field select {
  padding-block: var(--space-16);
  padding-inline: var(--space-8) var(--space-32);
  appearance: none;
  /* 右端の下向き矢印（Figma: 12x6px）。画像を足さず conic/linear で描かずSVGマスクも使わないため
     border による三角形で表現する（非スケール要素のため px 保持） */
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text) 50%),
                    linear-gradient(135deg, var(--color-text) 50%, transparent 50%);
  background-position: right 1.25rem top 55%, right 0.875rem top 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.p-contact__field textarea {
  height: 16.6875rem; /* 267px（Figma実測） */
  resize: vertical;
}

/* --- ラジオ（お問い合わせ内容） --- */
.p-contact__field--radio {
  padding-block: var(--space-16);
  padding-left: var(--space-12);
}

.p-contact__field--radio .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-24);
}

.p-contact__field--radio .wpcf7-list-item {
  margin: 0;
}

.p-contact__field--radio label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--font-size-h3); /* 18.286px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
  cursor: pointer;
}

.p-contact__field--radio input[type="radio"] {
  appearance: none;
  flex-shrink: 0;
  width: 1.8125rem;  /* 29px（Figma実測） */
  height: 1.8125rem;
  margin: 0;
  border: var(--border-width-medium) solid var(--color-primary);
  border-radius: var(--radius-full);
  background: var(--color-white);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}

/* hover / focus（⚠ inferred）: 未選択の丸にだけ薄く色を敷いて押せることを示す。
   ⚠ :hover は :checked より詳細度が高く後勝ちしないため、必ず :not(:checked) を付ける。
   さらに iOS Safari はタップ後に :hover が residual（貼り付いたまま）になるので、
   ホバーできるポインタのときだけ適用する（＝SPで選択済みの黒丸が消える不具合の対策）。 */
@media (hover: hover) and (pointer: fine) {
  .p-contact__field--radio label:hover input[type="radio"]:not(:checked) {
    background: var(--color-bg-beige);
  }
}

.p-contact__field--radio input[type="radio"]:focus-visible:not(:checked) {
  background: var(--color-bg-beige);
}

.p-contact__field--radio input[type="radio"]:checked {
  background:
    radial-gradient(circle at center, var(--color-primary) 0 40%, transparent 41%);
}

/* --- 注記 --- */
.p-contact__note {
  padding-block: var(--space-24);
  font-family: var(--font-family-sub); /* Figma: Noto Sans JP */
  font-size: var(--font-size-h5); /* 14.222px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  text-align: center;
}

.p-contact__note a {
  color: inherit;
  text-decoration: underline;
}

/* --- 送信ボタン --- */
.p-contact__submit {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
}

/* CF7 が自動で足す送信ボタンのラッパー・スピナーが幅からはみ出さないように */
.p-contact__body .wpcf7-form p,
.p-contact__body .wpcf7-spinner {
  max-width: 100%;
}

.p-contact__submit input[type="submit"] {
  width: 35rem; /* 560px（Figma実測 max-width） */
  max-width: 100%;
  height: 4rem; /* 64px */
  padding-inline: var(--space-24);
  border: 0;
  border-radius: var(--radius); /* 8px */
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-family-base);
  font-size: var(--font-size-h2-lead); /* 25.6px */
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

/* hover / focus（⚠ inferred）: PCは塗りボタンなので面を薄める（tokens.css の方針） */
.p-contact__submit input[type="submit"]:hover,
.p-contact__submit input[type="submit"]:focus-visible {
  background: var(--color-primary-hover);
}

/* CF7 のメッセージ（送信結果・バリデーション） */
.p-contact__body .wpcf7-response-output {
  margin: var(--space-24) 0 0;
  padding: var(--space-16);
  border-radius: var(--radius-input);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.p-contact__body .wpcf7-not-valid-tip {
  font-size: var(--font-size-h5);
  line-height: var(--line-height-body);
}

/* --- SP（767px以下・inferred: SPフレーム未提供のため縦積みのみ） --- */
@media (max-width: 767px) {
  .p-contact {
    padding-block: var(--space-40) var(--space-64); /* SP共通のセクション上下余白 */
  }

  .p-contact__inner {
    padding-inline: var(--space-24);
  }

  /* 完了ページの見出しは、SPでは h2 相当の一段下（Figma未定義・fvのタイトルと競合させない） */
  .p-contact__message-title {
    font-size: var(--font-size-h2-lead); /* 25.6px */
  }

  /* リードは中央寄せの短文ではなく、本文と同じ扱いで読ませる */
  .p-contact__lead {
    font-size: var(--font-size-body); /* 16px */
    text-align: left;
  }

  .p-contact__note {
    text-align: left;
  }

  /* 必須/任意は補助情報なので最小サイズに（両者そろえる） */
  .p-contact__badge,
  .p-contact__optional {
    font-size: var(--font-size-h6); /* 12.8px */
  }

  .p-contact__badge {
    padding: 0 var(--space-8);
  }

  /* iOS Safari はフォーム要素の実効フォントサイズが16px未満だと、
     フォーカス時に自動ズームする。SPはrem基準が14.222pxのため 1rem では下回るので、
     ここだけスケールさせない実寸16pxを直書きする（比率縮小の例外）。 */
  .p-contact__field input[type="text"],
  .p-contact__field input[type="email"],
  .p-contact__field input[type="tel"],
  .p-contact__field select,
  .p-contact__field textarea {
    font-size: 16px;
  }

  .p-contact__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
  }

  .p-contact__label {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }

  .p-contact__field--radio {
    padding-left: 0;
  }

  /* 送信ボタンは c-button--outline-dark / --wide と同じ見た目に揃える。
     CF7の <input type="submit"> には矢印用の子要素を入れられないため、
     矢印はラッパー（.p-contact__submit）の擬似要素で描く。 */
  /* ラッパー幅＝ボタン幅にしないと、矢印の基準（右端）がずれる。
     CF7は input を <p> で包むので、その <p> も幅100%にして中間層で幅が変わらないようにする。 */
  .p-contact__submit {
    position: relative;
    width: 23.5rem; /* 376px（c-button--wide 相当） */
    max-width: 100%;
    margin-inline: auto;
  }

  /* <p> をボタンと同じ箱にする（display:flex で行ボックスぶんの余りを消す）。
     矢印はこの <p> を基準に置くと、ボタンの右端・上下中央に確実に合う。 */
  .p-contact__submit > p {
    position: relative;
    display: flex;
    width: 100%;
  }

  /* CF7 は <p> 内に送信スピナーを挿し込む。flex行に並ぶとボタンがそのぶん縮み、
     矢印（<p>の右端基準）もボタンから離れてしまうため、フローから外して重ねる。 */
  .p-contact__submit .wpcf7-spinner {
    position: absolute;
    top: 50%;
    right: var(--space-16);
    margin: 0;
    transform: translateY(-50%);
  }

  .p-contact__submit input[type="submit"] {
    width: 100%;
    /* タップ領域として48px以上を確保（実寸。remだとSPで縮んで足りなくなる） */
    height: auto;
    min-height: 48px;
    padding: var(--space-10) var(--space-24);
    border: var(--border-width-bold) solid var(--color-primary);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    color: var(--color-primary);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
  }

  /* c-button__arrow と同じ位置・サイズ（Figma実測） */
  .p-contact__submit > p::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -0.875rem;   /* -14px はみ出し */
    transform: translateY(-50%);
    width: 2.651rem;    /* 42.41px */
    height: 0.451rem;   /* 7.21px */
    background-color: var(--color-primary);
    -webkit-mask: url("../../images/common/ico_arrow.svg") no-repeat center / contain;
    mask: url("../../images/common/ico_arrow.svg") no-repeat center / contain;
    pointer-events: none;
    transition: translate var(--duration-fast) var(--ease-out);
  }

  /* hover / focus（⚠ inferred）: SPは c-button と同じ枠線ボタンの見た目なので、
     色は変えず矢印が進むだけ。矢印はラッパーの擬似要素なので、input の状態を
     :has() で親に伝えて動かす。PC用の面を薄める指定もここで打ち消す。 */
  .p-contact__submit input[type="submit"]:hover,
  .p-contact__submit input[type="submit"]:focus-visible {
    background: var(--color-white);
  }

  .p-contact__submit:has(input[type="submit"]:hover) > p::after,
  .p-contact__submit:has(input[type="submit"]:focus-visible) > p::after {
    translate: var(--hover-shift) 0;
  }
}

/* モーション低減設定：位置の変化は手がかりとして残し、滑らかな移動だけやめる。 */
@media (prefers-reduced-motion: reduce) {
  .p-contact__submit input[type="submit"],
  .p-contact__submit > p::after {
    transition: none;
  }
}