/* ==========================================================================
   お問い合わせ（入力・確認・完了）

   可変値の書き方は他ページと同じ。
     clamp(SP値, calc(SP値 + 差 * (100vw - 768px) / 672), PC値)

   Figma実測（PC 1440 / SP 375）
     PC: 見出し下の線 y=335。案内文 y=415（線から80）
         2段組は y=559 から。左 x=80 幅480 ／ 右（フォーム）x=560 幅800
     SP: 線 y=148。案内文 y=188（線から40）。1段組 x=24 幅327
   ========================================================================== */

.p-page--contact {
  /* 見出しの下の線から案内文まで SP40 / PC80。
     線は見出しの箱の下端に対して SP+0 / PC+1px の位置にあるため（page-title共通）、
     箱からの距離は SP40 → PC81 になる */
  padding-top: clamp(40px, calc(40px + 41 * (100vw - 768px) / 672), 81px);
  /* 中身の幅。1440pxのとき 80〜1360（＝1280）になる */
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   入力・確認画面
   -------------------------------------------------------------------------- */

/* 「建物と不動産のこと、まずはお聞かせください。」 */
.p-contact__catch {
  font-family: var(--ff-serif);
  font-size: clamp(16px, calc(16px + 8 * (100vw - 768px) / 672), 24px);
  font-weight: var(--fw-semibold);
  /* SPは行送り1.5（24px）、PCは1.0（24px） */
  line-height: clamp(24px, calc(24px + 0 * (100vw - 768px) / 672), 24px);
}

.p-contact__cols {
  /* 案内文までの間隔 SP40 → PC64（SP 188+48=236 → 276／PC 415+24=439 → 559 は120） */
  margin-top: clamp(40px, calc(40px + 80 * (100vw - 768px) / 672), 120px);
}

/* 確認画面を直接開いた場合の中央寄せ案内文。
   完了画面（見出し直下、余白なし）と、この上に乗っていた元の間隔
   （案内文の下＝SP40〜PC120）のちょうど中間くらいを狙う。 */
.p-contact__cols--notice {
  text-align: center;
  margin-top: clamp(24px, calc(24px + 24 * (100vw - 768px) / 672), 48px);
}

/* 上の余白は .p-contact__cols--notice 側でまとめて持つので、
   .p-form の余白（SPの電話番号との間隔用）は打ち消す */
.p-contact__cols--notice .p-form--confirm {
  margin-top: 0;
}

/* 確認画面は左の案内を出さないので、案内のための余白をすべて打ち消す。
   .p-contact__cols の余白 … 元はキャッチコピーとの間隔
   .p-form の余白          … 元はSPで電話番号との間隔
   どちらも相手が居なくなるため、ページ自身の余白（上下40px）だけを残す。 */
.p-contact__cols--noaside,
.p-contact__cols--noaside .p-form {
  margin-top: 0;
}

.p-contact__lead {
  font-size: var(--fs-body); /* SP14 → PC16 */
  /* 行送り 14×1.75=24.5→25 → 16×1.75=28 */
  line-height: clamp(25px, calc(25px + 3 * (100vw - 768px) / 672), 28px);
}

.p-contact__tel {
  /* 案内文からの間隔 SP16 → PC16 */
  margin-top: 16px;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold); /* Figma実測: 電話の段落だけ太い（PC・SPとも） */
  line-height: clamp(25px, calc(25px + 3 * (100vw - 768px) / 672), 28px);
}

.p-contact__tel a {
  color: inherit;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   フォーム本体
   -------------------------------------------------------------------------- */

.p-form {
  /* SPは電話番号の下40pxに横線が入り、その40px下から項目が始まる（Figma実測）。
     線は1行目の border-top で引くので、外側の余白は40。PCでは右の段になるので0 */
  margin-top: 40px;
}

/* 迷惑メールよけの欄。人には見せない（display:none は一部の
   自動送信プログラムに見抜かれるので、位置をずらして隠す） */
.p-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.p-form__alert {
  margin-bottom: 24px;
  padding: 12px 16px;
  background: rgba(179, 29, 68, 0.08);
  color: var(--c-error);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
}

.p-form__row + .p-form__row {
  /* 入力欄から次のラベルまで SP40 → PC56 */
  margin-top: clamp(40px, calc(40px + 16 * (100vw - 768px) / 672), 56px);
}

.p-form__label {
  display: block;
  font-size: 16px; /* Figma実測: SPも16px */
  font-weight: var(--fw-semibold); /* Figma実測: PC・SPとも SemiBold */
  line-height: 16px;
}

/* 必須の印。ラベルから SP8 → PC16 空ける（Figma実測） */
.p-form__req {
  margin-left: clamp(8px, calc(8px + 8 * (100vw - 768px) / 672), 16px);
  color: var(--c-error);
}

/* 「入力必須です」。印からさらに16px空ける */
.p-form__err {
  margin-left: 16px;
  color: var(--c-error);
}

.p-form__input {
  display: block;
  /* ラベルから入力欄まで SP16 → PC24 */
  margin-top: clamp(16px, calc(16px + 8 * (100vw - 768px) / 672), 24px);
  width: 100%;
  height: 60px;
  /* 文字の開始位置 SP16 → PC24 */
  padding-inline: clamp(16px, calc(16px + 8 * (100vw - 768px) / 672), 24px);
  border: 0;
  border-radius: 0;
  /* 一括指定にすると背景画像（プルダウンの矢印）まで消えるため、色だけを指定する */
  background-color: var(--c-bg);
  /* 枠線は box-shadow で描く。border だと外形が2px太る */
  box-shadow: inset 0 0 0 1px var(--c-line);
  color: var(--c-text);
  font-family: inherit;
  font-size: 16px; /* 16px未満にするとiPhoneで拡大されるため下げない */
  line-height: 28px; /* 16×1.75 */
  appearance: none;
}

.p-form__input::placeholder {
  color: var(--c-placeholder);
  opacity: 1;
}

/*
 * 枠線は他の入力欄と同じ（灰色1px）。選択したときだけ藍色2pxに変わる。
 *
 * Figmaではプルダウンだけ常時 藍色2px で描かれていたが、
 * 2026-08-16にクライアントより「他の欄と同じ灰色にし、選択時に青くする」と指示があり変更。
 * 灰色1pxは .p-form__input、選択時の藍色2pxは :focus の指定がそのまま効く。
 */
.p-form__input--select {
  /* プルダウンだけ左の余白はSPも24（他の欄はSP16。Figma実測） */
  padding-left: 24px;
  /* 右端の矢印ぶんだけ余白を足す */
  padding-right: clamp(40px, calc(40px + 8 * (100vw - 768px) / 672), 48px);
  /* 矢印はデザイン実測どおり「塗りなし・線2px・12×12」の山形。
     枠の右端から21pxの位置（Figma実測 x=1327／枠の右端1360）。
     select には疑似要素が使えないので、画像として背景に置いている。
     色は通常が灰色 #999999（プレースホルダー文字と同じ。枠線の #DDD だと
     文字より淡くなり、押せないように見えるため）。選択時だけ藍色に変わる（下の :focus）。 */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23999999' stroke-width='2'%3E%3Cpath d='M1 4l5 5 5-5'/%3E%3C/svg%3E");
  background-position: right 21px center;
  background-size: 12px 12px;
  background-repeat: no-repeat;
}

/* 選択中は枠線と同じく藍色にする */
.p-form__input--select:focus {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%232D6D9C' stroke-width='2'%3E%3Cpath d='M1 4l5 5 5-5'/%3E%3C/svg%3E");
}

/*
 * 未選択のあいだは、他の欄の例文と同じ薄い灰色にする。
 *
 * Figmaでは「選択してください」だけ本文と同じ #242424 で描かれていたが、
 * 薄い灰色は「まだ入力されていない」ことを示す共通の合図であり、
 * ここだけ濃いと選択済みのように見えてしまう。
 * 2026-08-16に実装側の判断で他の欄にそろえた（8/18の確認時にデザイナーへ報告）。
 *
 * 判定は「値が空の選択肢が選ばれているか」で行う。
 * required を付けて :invalid を使う手もあるが、ブラウザ標準の検証が働いて
 * サーバー側で出しているエラー画面まで到達しなくなるため使わない。
 */
.p-form__input--select:has(option[value='']:checked) {
  color: var(--c-placeholder);
}

/* 開いたときの選択肢一覧は、上の指定に引きずられないよう本文色に戻す */
.p-form__input--select option {
  color: var(--c-text);
}

.p-form__input--area {
  /* ご相談内容だけ高さが違う SP240 → PC200 */
  height: clamp(200px, calc(240px - 40 * (100vw - 768px) / 672), 240px);
  padding-block: 16px;
  resize: vertical;
}

/* エラーのときは枠を消して薄い赤で塗る（Figma実測 #B31D44 20%） */
.p-form__row.is-error .p-form__input {
  background-color: rgba(179, 29, 68, 0.2);
  box-shadow: none;
}

/*
 * 選択中の見せ方。
 * ブラウザ標準の青い枠は、要素の少し外側に別枠として出てしまうので消し、
 * 枠線そのものを藍色に変える。エラー中に選択した場合もここが最後に効く。
 */
.p-form__input:focus,
.p-form__row.is-error .p-form__input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--c-primary);
}

/* 入力中は薄い赤の塗りを消して、内容を読みやすくする */
.p-form__row.is-error .p-form__input:focus {
  background-color: var(--c-bg);
}

/* --------------------------------------------------------------------------
   個人情報の取り扱い
   -------------------------------------------------------------------------- */

.p-form__check {
  display: flex;
  align-items: flex-start;
  /* ラベルからチェックまで SP44 → PC32 */
  margin-top: clamp(32px, calc(44px - 12 * (100vw - 768px) / 672), 44px);
  /* SPだけ8px内側に入る（Figma実測） */
  padding-left: clamp(0px, calc(8px - 8 * (100vw - 768px) / 672), 8px);
  cursor: pointer;
}

.p-form__check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* 四角い枠。線は#999999の1px（Figma実測） */
.p-form__checkbox {
  flex: none;
  /* 文字（行送り28px）の1行目の中央に合わせる */
  margin-top: 2px;
  width: 24px;
  height: 24px;
  box-shadow: inset 0 0 0 1px var(--c-placeholder);
  background: var(--c-bg);
}

/* チェックが入ったら藍色の枠とチェック印 */
.p-form__check input:checked + .p-form__checkbox {
  position: relative;
  box-shadow: inset 0 0 0 1px var(--c-primary);
}

.p-form__check input:checked + .p-form__checkbox::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 8px;
  width: 7px;
  height: 13px;
  border-right: 2px solid var(--c-primary);
  border-bottom: 2px solid var(--c-primary);
  rotate: 45deg;
}

.p-form__check input:focus-visible + .p-form__checkbox {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

.p-form__checktext {
  /* チェックから文字まで16px */
  margin-left: 16px;
  font-size: 16px;
  line-height: 28px; /* 16×1.75 */
}

.p-form__checktext a {
  color: inherit;
}

/* --------------------------------------------------------------------------
   確認画面で値を文字表示するとき
   -------------------------------------------------------------------------- */

.p-form__value {
  margin-top: clamp(16px, calc(16px + 8 * (100vw - 768px) / 672), 24px);
  font-size: 16px;
  line-height: 28px;
}

/* --------------------------------------------------------------------------
   ボタン
   -------------------------------------------------------------------------- */

.p-form__actions {
  /* 同意文からボタンまで SP40 → PC82 */
  margin-top: clamp(40px, calc(40px + 42 * (100vw - 768px) / 672), 82px);
  display: grid;
  justify-items: center;
  gap: 16px;
}

.c-btn--confirm,
.c-btn--send {
  display: grid;
  place-items: center;
  /* SP327（全幅）→ PC560 */
  width: min(100%, clamp(327px, calc(327px + 233 * (100vw - 768px) / 672), 560px));
  /* 高さ SP56 → PC88 */
  height: clamp(56px, calc(56px + 32 * (100vw - 768px) / 672), 88px);
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--c-bg);
  font-family: inherit;
  /* 文字サイズ SP16 → PC24（Figma実測） */
  font-size: clamp(16px, calc(16px + 8 * (100vw - 768px) / 672), 24px);
  font-weight: var(--fw-semibold);
  line-height: 1;
  cursor: pointer;
}

/* 入力画面の「確認する」は薄い藍色、確認画面の「送信する」は藍色（Figma実測） */
.c-btn--confirm {
  background: var(--c-primary-soft);
  /* 色が変わるときに切り替わりが唐突にならないよう、わずかに時間をかける。
     ここは他の指定と違い ease を直接書く（--ease だと環境によっては
     解決されず、色が変わらなくなることがあったため） */
  transition: background-color 0.3s ease;
}

/* 必須項目がすべて埋まったら、確認画面の「送信する」と同じ濃さにする
   （2026-08-23クライアント指示）。判定は main.js が行い is-ready を付ける。 */
.c-btn--confirm.is-ready {
  background: var(--c-primary);
}

.c-btn--send {
  background: var(--c-primary);
}

.c-btn--confirm:hover,
.c-btn--send:hover {
  background: var(--c-primary-dark);
}

/* 「修正する」はデザインに無いが、確認画面から戻る手段として置いている */
.c-btn--text {
  border: 0;
  background: none;
  color: var(--c-text);
  font-family: inherit;
  font-size: 16px;
  line-height: 28px;
  text-decoration: underline;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   完了画面
   -------------------------------------------------------------------------- */

.p-thanks {
  text-align: center;
}

/* 完了ページを直接開いた場合の案内文。
   確認画面を直接開いた場合（.p-contact__cols--notice）と同じ間隔にそろえる。
   値を変えるときは両方直すこと。 */
.p-thanks--notice {
  margin-top: clamp(24px, calc(24px + 24 * (100vw - 768px) / 672), 48px);
}

.p-thanks__text {
  font-family: var(--ff-serif);
  font-size: clamp(16px, calc(16px + 8 * (100vw - 768px) / 672), 24px);
  font-weight: var(--fw-semibold);
  /* 行送り 16×1.5=24 → 24×1.5=36 */
  line-height: clamp(24px, calc(24px + 12 * (100vw - 768px) / 672), 36px);
}

.p-thanks__text + .p-thanks__text {
  /* 段落の間に1行あく（Figma実測: 空行が1つ入っている） */
  margin-top: clamp(24px, calc(24px + 12 * (100vw - 768px) / 672), 36px);
}

.p-thanks__btn {
  /* 本文からボタンまで SP40 → PC80 */
  margin-top: clamp(40px, calc(40px + 40 * (100vw - 768px) / 672), 80px);
}

.c-btn--back {
  display: inline-grid;
  place-items: center;
  /* SP148×46 → PC208×48 */
  width: clamp(148px, calc(148px + 60 * (100vw - 768px) / 672), 208px);
  height: clamp(46px, calc(46px + 2 * (100vw - 768px) / 672), 48px);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--c-text);
  color: var(--c-text);
  font-family: var(--ff-serif);
  font-size: clamp(14px, calc(14px + 2 * (100vw - 768px) / 672), 16px);
  font-weight: var(--fw-semibold);
  line-height: 16px;
  text-decoration: none;
}

.c-btn--back:hover {
  background: var(--c-text);
  color: var(--c-bg);
}

/* --------------------------------------------------------------------------
   PC（768px以上）
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  /* 左（案内文・電話）と右（フォーム）の2段組。
     左 480 ／ 右 800 で 1280。左の案内文は幅305で自然にすき間ができる。 */
  .p-contact__cols {
    display: grid;
    grid-template-columns: calc(100% * 480 / 1280) 1fr;
    align-items: start;
  }

  /* 確認画面を直接開いた場合は左の案内自体を出さないため、2段組をやめる
     （JSが .p-contact__catch と .p-contact__aside を外し、このクラスを付ける） */
  .p-contact__cols--notice {
    display: block;
  }

  /* 確認画面は左の案内を出さないので、フォームだけの1段組にする。
     2段組のままだと左に空の列が残り、フォームが右に寄ってしまう。 */
  .p-contact__cols--noaside {
    grid-template-columns: 1fr;
  }

  .p-form {
    margin-top: 0;
  }

  /* 左の案内文はデザインで幅305（列480より狭い） */
  .p-contact__lead,
  .p-contact__tel {
    max-width: calc(100% * 305 / 480);
  }

  .p-form__actions {
    justify-items: center;
  }

  /* デザインではこの2つのラベルだけ行送りが1.75（28px）になっている。
     以降の位置が12pxずつずれるので、実測どおりに合わせる。 */
  .p-form__row--body .p-form__label,
  .p-form__row--agree .p-form__label {
    line-height: 28px;
  }
}

/* ==========================================================================
   Contact Form 7 への対応（2026-08-17 自作フォームからCF7へ移行）
     マークアップは管理画面のフォームテンプレートで .p-form__〜 を再現しているが、
     CF7が自動で足す包み（.wpcf7-form-control-wrap 等）と
     承諾チェック・エラー文だけは構造が固定なので、ここで見た目を合わせる。
   ========================================================================== */

/* CF7の包みは線を引かない透明な箱として扱う */
.p-form .wpcf7-form-control-wrap {
  display: block;
}

/* --- 承諾チェック（[acceptance]）。自作時代の .p-form__check と同じ見た目 --- */

/* 中間の包みが行内要素のままだと、文字の下に数pxの余白（行の下駄）が
   生まれて以降が6.8pxずれる。全部ブロックにして余白を消す */
.wpcf7-acceptance,
.wpcf7-acceptance .wpcf7-list-item {
  display: block;
  margin: 0;
}

.wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  /* ラベルからチェックまで SP44 → PC32 */
  margin-top: clamp(32px, calc(44px - 12 * (100vw - 768px) / 672), 44px);
  /* SPだけ8px内側に入る（Figma実測） */
  padding-left: clamp(0px, calc(8px - 8 * (100vw - 768px) / 672), 8px);
  cursor: pointer;
}

/* 箱は input 自身に描く（inputには疑似要素が使えないため、印は背景画像） */
.wpcf7-acceptance input[type='checkbox'] {
  appearance: none;
  flex: none;
  margin: 2px 0 0; /* 文字（行送り28px）の1行目の中央に合わせる */
  width: 24px;
  height: 24px;
  box-shadow: inset 0 0 0 1px var(--c-placeholder);
  background: var(--c-bg) no-repeat center;
  cursor: pointer;
}

.wpcf7-acceptance input[type='checkbox']:checked {
  box-shadow: inset 0 0 0 1px var(--c-primary);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%232D6D9C' stroke-width='2'%3E%3Cpath d='M3 8l4 4 6-8'/%3E%3C/svg%3E");
}

.wpcf7-acceptance input[type='checkbox']:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

.wpcf7-acceptance .wpcf7-list-item-label {
  margin-left: 16px;
  font-size: 16px;
  /* 行送りはFigma実測でSPだけ36px（2行に折り返した際の行間が広い）。PCは28px */
  line-height: clamp(28px, calc(36px - 8 * (100vw - 768px) / 672), 36px);
}

/* 「プライバシーポリシー」だけ下線が付き、前後の文字との間が8pxずつ空く
   （Figma実測 PC: 株式会社壱六の〜707 / リンク715〜858 / に同意する866〜。SPも同じ8px） */
.wpcf7-acceptance .wpcf7-list-item-label a {
  margin-inline: 8px;
  color: inherit;
  text-decoration: underline;
  /* 下線と文字の間隔。Figmaの見た目に合わせて少し離す */
  text-underline-offset: 0.2em;
}

/* --- エラー表示。自作時代の .is-error / .p-form__err と同じ見た目 --- */

/* 「入力必須です」。JSでラベルの右に移す（main.js）。印からさらに16px空ける */
.wpcf7-not-valid-tip {
  display: inline;
  /* 印から SP8 → PC16 空ける（Figma実測）。文字はSP14 → PC16 */
  margin-left: clamp(8px, calc(8px + 8 * (100vw - 768px) / 672), 16px);
  color: var(--c-error);
  font-size: clamp(14px, calc(14px + 2 * (100vw - 768px) / 672), 16px);
}

/* 欄そのものは薄い赤で塗る */
.p-form__input.wpcf7-not-valid {
  background-color: rgba(179, 29, 68, 0.2);
  box-shadow: none;
}

.p-form__input.wpcf7-not-valid:focus {
  background-color: var(--c-bg);
  box-shadow: inset 0 0 0 2px var(--c-primary);
}

/* エラー中のプルダウンを選んだときも、矢印を藍色にそろえる
   （.wpcf7-not-valid の指定が後に来るため、ここで上書きし直す） */
.p-form__input--select.wpcf7-not-valid:focus {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%232D6D9C' stroke-width='2'%3E%3Cpath d='M1 4l5 5 5-5'/%3E%3C/svg%3E");
  background-position: right 21px center;
  background-size: 12px 12px;
  background-repeat: no-repeat;
}

/*
 * フォーム下部にCF7が出すまとめエラー。
 *
 * 入力ミスのときは出さない。デザインのエラー時（contact_error / contact_sp 2枚目）
 * には項目ごとの「入力必須です」しか無く、まとめ枠は描かれていないため。
 * CF7側の指定（.wpcf7 form.invalid …）に勝つよう、クラス4つで書く。
 *
 * ただし送信そのものが失敗したとき（サーバー不調・スパム判定・通信断）は、
 * 項目ごとの表示が出ないので、ここが唯一の知らせになる。そちらは見せる。
 */
.p-form .wpcf7 .wpcf7-form .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 12px 16px;
  border: 0;
  background: rgba(179, 29, 68, 0.08);
  color: var(--c-error);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
}

/* 入力ミスのときだけ画面から消す。読み上げには残す——
   画面を見ない人には、どこが悪いかを最初に知らせる手がかりになる */
.p-form .wpcf7 .wpcf7-form.invalid .wpcf7-response-output {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 送信中の輪。行内に置くと高さが変わるので浮かせる */
.p-form__actions {
  position: relative;
}

.p-form .wpcf7-spinner {
  position: absolute;
  bottom: -32px;
  left: 50%;
  translate: -50% 0;
  margin: 0;
}

/* 完了画面の「トップページへ戻る」。
   大きさの補正（中身なり）は詳細ページ用の detail.css にあり、
   このページでは読み込まれないため、同じ値をここにも置く。
   Figma実測 PC 208×48 ／ SP 148×46 */
.p-thanks .c-btn--back {
  min-height: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 1;
}

/* SPの同意文は行送り36だが、最終行の下の空き（半端な4px）と
   行内要素の下駄で、次のボタンが8px下がる。Figmaの位置に合わせて詰める */
.wpcf7-acceptance .wpcf7-list-item-label {
  display: block;
  margin-bottom: clamp(-8px, calc(-8px + 8 * (100vw - 768px) / 672), 0px);
}

/* --------------------------------------------------------------------------
   確認画面（/contact-confirm/）
     Figma実測: ラベル→値24 ／ 値→区切り線16 ／ 線→次のラベル48 ／ 線→ボタン80
   -------------------------------------------------------------------------- */

/* 区切り線は本文と同じ濃さ（Figma実測 #242424）。
   見出し下の全幅線や入力欄の枠（#DDDDDD）とは別の色なので取り違えないこと。

   右端はデザインどおり段の幅より手前で止める（SP327＝幅いっぱい／PC798＝2px手前）。
   borderでは行の幅いっぱいになってしまうので、疑似要素で引く。
   padding-bottom が16ではなく17なのは、borderで引いていた1pxぶんを
   ここで引き受け、行の高さと以降の余白を変えないため。 */
.p-form--confirm .p-form__row {
  position: relative;
  padding-bottom: 17px;
}

.p-form--confirm .p-form__row::after {
  content: '';
  position: absolute;
  left: 0;
  right: clamp(0px, calc(0px + 2 * (100vw - 768px) / 672), 2px);
  bottom: 0;
  border-top: 1px solid var(--c-text);
}

/* 線の頭から次のラベルまで SP40 / PC48（Figma実測）。
   線はborderで描かれ1pxの厚みを持つので、余白は1px引いた値にする */
.p-form--confirm .p-form__row + .p-form__row {
  margin-top: clamp(39px, calc(39px + 8 * (100vw - 768px) / 672), 47px);
}

/* SPだけ1行目の上にも線がある（入力・確認とも。Figma実測 電話の下40→線→40でラベル） */
.p-form .p-form__row:first-of-type {
  border-top: 1px solid var(--c-line);
  padding-top: 39px;
}

@media (min-width: 768px) {
  /* PCには1行目の上の線はない */
  .p-form .p-form__row:first-of-type {
    border-top: 0;
    padding-top: 0;
  }
}

/* 確認画面ではチェック行も文字だけなので、行送りをそろえる */
.p-form--confirm .p-form__value {
  /* ラベルから値まで、確認画面はSPもPCも24（Figma実測） */
  margin-top: 24px;
  min-height: 28px; /* 空欄（会社名など）でも行の高さを保つ */
}

.p-form--confirm .p-form__actions {
  /* 線の頭からボタンまで SP40 / PC80。線の厚み1pxを引く */
  margin-top: clamp(39px, calc(39px + 40 * (100vw - 768px) / 672), 79px);
}