/* ==========================================================================
   contact.php（Figma「contact」フレーム #87:470 準拠、SP版のみ）
   このページはヒーロー写真が無く、.l-page直下に見出しから始まる。
   生データのx/y座標は「要素間の差分」に変換し、通常のフローに落とし込んでいる
   （絶対座標そのままの再現ではなく、他ページと同じ実装方針を踏襲）。
   入力フォームの markup は lib/contact-form.php、確認画面は lib/contact-confirm.php。
   確認画面は入力フォームと同じ体裁なので、スタイルもこのファイルに続けて書く。
   ========================================================================== */

.contact-heading {
  /* margin-top: heading.y(96) - header.height(56) = 40px */
  margin: 2.5rem 1rem 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.75rem;
  letter-spacing: 0.16em;
  color: var(--color-navy);
}

.contact-dummy-text {
  /* margin-top: text.y(148) - heading.bottom(96+28=124) = 24px。
     生データはx=16・幅311pxで、右側だけ48px余る非対称配置
     （.body-textの標準パターン=32px両端センタリングとは違う） */
  margin: 1.5rem auto 0 1rem;
  width: 19.4375rem;
  max-width: calc(100% - 2rem);
}

.contact-form {
  display: block;
}

.contact-form__label {
  margin: 0 1rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.125rem;
  letter-spacing: 0.16em;
  color: var(--color-text);
}

.contact-form__required {
  color: var(--color-required);
}

/* 「ご相談について」ラベル: dummy-text.bottom(148+65=213) から 249 = 36px。
   以前は `.contact-form > .contact-form__label:first-child` で指定していたが、
   迷惑投稿対策のハニーポットを<form>の先頭に足した時点で:first-childが外れ、
   この余白が黙って消えていた(092929eで発生)。並び順に依存しない修飾クラスにする */
.contact-form__label--first {
  margin-top: 2.25rem;
}

/* ==========================================================================
   ラジオボタン（お問い合わせ / 相談会予約）
   ========================================================================== */

.contact-form__radio-group {
  /* margin-top: radio1.y(256) - label.bottom(227+18=245) = 11px → 8pxグリッドに寄せて12px */
  margin: 0.75rem 1rem 0;
  display: flex;
  flex-direction: column;
  /* 行間8px。生データ(#87:718/#146:704/#146:707)は
     radio1: 256..274(h18) / セレクト行: 282..322(h40) / radio3: 330..348(h18)
     で、いずれも隣接行との間隔が8pxで揃う */
  gap: 0.5rem;
}

.contact-form__radio {
  display: flex;
  align-items: center;
  /* ellipse(x32,w16)の右端48 から text(x56) = 8px。
     以前は「ellipseの左端x32からtextのx56まで24px」と読み違えて1.5remにしており、
     flexのgapは要素の「間」に入るためtextが実測x72（Figmaより16px右）にずれていた
     (2026-08-29に実測して発覚) */
  gap: 0.5rem;
  margin-left: 1rem;
  cursor: pointer;
}

/* 「ご結納・お顔合わせ会食プランについて知りたい」だけラベルが2行(#182:1450 h36)。
   丸(#182:1451)は2行の中央ではなく1行目に揃うので、中央揃えをやめて上端に寄せる。
   margin-top: radio3.bottom(348) から radio4.y(372) = 24px。他の行は8px間隔で
   group側のgapが8pxあるため、差分の16pxをここで足す */
.contact-form__radio--yuino {
  align-items: flex-start;
  margin-top: 1rem;
}

/* 「相談会予約」の行だけ、右隣に相談会の種類を選ぶセレクトが並ぶ(生データ #146:704)。
   セレクト(h40)がラジオ文字(h18)より高いため、行の高さはセレクト基準にして中央揃え */
.contact-form__radio-row {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.5rem;
}

.contact-form__radio input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.contact-form__radio-mark {
  display: block;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--color-white);
  border: 0.0625rem solid var(--color-form-radio-border);
  /* figma-verified: 2026-08-29 生データ effect_b39a28ce = inset 0px 4px 4px rgba(0,0,0,0.1)。
     以前のコメントは「y4 blur2」と書いていたが生データは blur も 4px で、記述自体が誤りだった */
  box-shadow: inset 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1);
}

/* align-items:flex-start の行用。1行の高さ18pxに対して丸は16pxなので、
   1行目の中央に来るよう1px下げる(生データも ellipse.y373 = text.y372 + 1) */
.contact-form__radio-mark--top {
  margin-top: 0.0625rem;
}

.contact-form__radio input:checked + .contact-form__radio-mark {
  border-color: var(--color-navy);
  box-shadow: inset 0 0 0 0.25rem var(--color-navy);
}

.contact-form__radio-text {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.125rem;
  letter-spacing: 0.16em;
  color: var(--color-text);
}

/* 「ご希望の相談日時」ブロック: radio-group末尾(279+34+18=331)から354 = 23px。
   8pxグリッドに寄せて24pxとする。相談会予約が選択された時だけ表示する
   （お問い合わせの場合は不要な項目のため非表示にし、必須扱いにもしない） */
.js-datetime-group {
  display: none;
}

.contact-form__radio-group:has(input[value="reservation"]:checked) ~ .js-datetime-group {
  display: block;
  margin-top: 1.5rem;
}

/* ==========================================================================
   日付・時間
   ========================================================================== */

.contact-form__datetime-row {
  /* margin-top: row.y(362) - label.bottom(332+18=350) = 12px
     margin-left: 生データ Rectangle 2 の x=32（他の入力欄 .contact-form__input と同じ）。
     以前は1remになっており、日付・時間ボックスが16px左にずれていた
     (2026-08-29にFigmaの実描画をピクセル測定して発覚。枠線の実測 x=32..192 / 200..343) */
  margin: 0.75rem 2rem 0;
  display: flex;
  /* gap: 時間box.x(200) - 日付box右端(32+160=192) = 8px */
  gap: 0.5rem;
}

/* 第二・第三希望のラベル: 前のrow末尾(442/536)から次のlabel.y(466/560) = 24px
   生データ Rectangle 2(402..442) → #182:1415(466) / Rectangle 16(496..536) → #182:1422(560) */
.contact-form__datetime-row + .contact-form__label {
  margin-top: 1.5rem;
}

.contact-form__date-field {
  position: relative;
  width: 10rem;
  height: 2.5rem;
}

/* flatpickr導入により<input type="date">をやめたため、ブラウザ間のネイティブUI差異
   （Chrome/Firefoxでカレンダーアイコンが二重に見える問題）は発生しなくなった。
   独自アイコンは常時表示でよい */
.contact-form__date-icon {
  position: absolute;
  /* icon: x40,y396。box起点(x32,y384)からの差分 = left8px, top12px */
  left: 0.5rem;
  top: 0.75rem;
  pointer-events: none;
  z-index: 1;
}

.contact-form__date-input {
  width: 100%;
  height: 100%;
  padding: 0 0.5rem 0 1.9375rem;
  border: 0.0625rem solid var(--color-form-border);
  border-radius: 0.5rem;
  background: var(--color-white);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--color-text);
  cursor: pointer;
}

/* flatpickrはデフォルトで開閉時にCSSアニメーション(fpFadeInDown)でopacityを0→1にフェードインするが、
   アニメーションが最後まで進まない環境（省電力設定・非アクティブタブでのフレーム間引き等）だと
   opacityが0のまま止まり、カレンダー自体は開いている(.openクラス付与済み)のに画面上は
   何も見えない状態になりうる。アニメーションに依存せず即座に表示することで確実性を優先する。
   優先指定を使わずに確実に上書きするため、flatpickr本体の`.flatpickr-calendar.animate.open`
   (クラス3つ)と同じ詳細度のセレクタにする（contact.cssはflatpickr.min.cssより後に読み込まれる） */
.flatpickr-calendar.animate.open {
  animation: none;
  opacity: 1;
  transform: none;
}

/* flatpickrのカレンダーポップアップの選択色をサイト共通の紺色に合わせる */
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--color-navy);
  border-color: var(--color-navy);
}

.contact-form__select-field {
  position: relative;
  height: 2.5rem;
}

.contact-form__select-field--time {
  /* time box: x200,w143。date box終端(32+160=192)からのgap = 8px = date-fieldのgapで表現済み */
  width: 8.9375rem;
}

/* 相談会の種類(生データ #146:704: x144 y282 w168 h40)。
   「相談会予約」の文字幅はブラウザのフォント描画でFigmaと数px変わるため、
   flexのgapで位置を決めると生データのx=144からずれる。行(左端x16)基準の
   絶対配置にして、文字幅に依存せずx=144に固定する */
.contact-form__select-field--fair {
  position: absolute;
  /* 144 - 行の左端16 = 128px */
  left: 8rem;
  width: 10.5rem;
}

.contact-form__select {
  width: 100%;
  height: 100%;
  padding: 0 1.375rem 0 1rem;
  border: 0.0625rem solid var(--color-form-border);
  border-radius: 0.5rem;
  background: var(--color-white);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--color-text);
  appearance: none;
}

.contact-form__select-arrow {
  /* figma-verified: 2026-08-18 vector/regular-polygon・strokeなし・底辺10px/尖り8px */
  position: absolute;
  /* Vector1(#87:732): 生データはSVG内部8w×10h(fill三角、底辺10px・尖り8px)を
     キャンバス上でwidth10×height8として90°回転配置している。border三角トリックで
     再現する場合、底辺(border-top+bottom)=10px・尖り(border-left)=8pxが正しい対応。
     以前は尖り側をborder-left:0.25rem(4px)と半分の値で実装しており誤りだった
     (2026-08-18・contact-select-arrow.svgの未参照チェックで発覚)。
     位置: get_metadataは x=327 を返すが、このノードは回転が適用されているため
     その値は実描画と一致しない。Figmaの書き出しPNGをピクセル測定すると
     実描画は x=317..326（時間box・都道府県boxとも同じ）で、いずれも
     box右端(343)から16px内側。metadataを信じて9pxにしていたため8pxずれていた
     (2026-08-29に実測して発覚) */
  right: 1rem;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  width: 0;
  height: 0;
  border-top: 0.3125rem solid transparent;
  border-bottom: 0.3125rem solid transparent;
  /* figma-verified: 2026-08-29 生データ fill_34dc0314 = #000000。
     相談会の種類(#146:705)・時間(#87:732)・都道府県(#87:773)の3つとも同じ黒で、
     本文色(--color-text: #2A2A2A)ではない */
  border-left: 0.5rem solid #000000;
  pointer-events: none;
}

/* ==========================================================================
   お名前・ご連絡先（単純な1行入力）
   ========================================================================== */

/* ==========================================================================
   ご希望の挙式時期・ご招待予定の人数（相談会予約選択時のみ表示。
   ご希望の相談日時と同じ理由・同じ仕組みで出し分ける）
   ========================================================================== */

.js-wedding-date-group,
.js-guest-count-group {
  display: none;
}

.contact-form__radio-group:has(input[value="reservation"]:checked) ~ .js-wedding-date-group {
  display: block;
  /* margin-top: label.y(426) - datetime-row末尾(362+40=402) = 24px */
  margin-top: 1.5rem;
}

.contact-form__radio-group:has(input[value="reservation"]:checked) ~ .js-guest-count-group {
  display: block;
  /* margin-top: label.y(520) - wedding-date-row末尾(456+40=496) = 24px */
  margin-top: 1.5rem;
}

.contact-form__wedding-date-row,
.contact-form__guest-count-row {
  display: flex;
  align-items: center;
  /* gap: suffix.x(201) - box末尾(32+160=192) = 9px */
  gap: 0.5625rem;
}

/* wedding-date-row: row.y(456) - label.bottom(426+18=444) = 12px
   margin-left は生データ Rectangle 12 の x=32（実描画のピクセル測定でも枠線 x=32..192） */
.contact-form__wedding-date-row {
  margin: 0.75rem 2rem 0;
}

/* guest-count-row: row.y(550) - label.bottom(520+18=538) = 12px
   margin-left は生データ Rectangle 13 の x=32（実描画のピクセル測定でも枠線 x=32..192） */
.contact-form__guest-count-row {
  margin: 0.75rem 2rem 0;
}

/* 相談日時3組の下の注意書き(#182:1433)。中央揃えの2行。
   margin-top: note.y(654) - 第一希望row.bottom(402+40=442)... ではなく、
   生データ上は3組の直後(第三希望row.bottom=590+40=630)から654 = 24px */
.contact-form__note {
  margin: 1.5rem 1rem 0;
  /* 中央寄せの文字は末尾の字送りぶん左に寄るので、同じ量を左に足す（SP・PC とも .16em） */
  padding-left: 0.16em;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.125rem;
  letter-spacing: 0.16em;
  color: var(--color-text);
}

.contact-form__date-suffix,
.contact-form__count-suffix {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--color-text);
}

/* 「お名前」ラベル: guest-count-row末尾(550+40=590)から624 = 34px。
   相談会予約が選択されていない場合は3つのグループ全てdisplay:noneになるが、
   隣接セレクタはDOM構造で判定されるため非表示時も同じ値が適用される
   （実データ無しの状態のため、旧来の1.5rem運用と同じ考え方を踏襲） */
.js-guest-count-group + .contact-form__label {
  margin-top: 2.125rem;
}

.contact-form__input {
  display: block;
  width: calc(100% - 4rem);
  height: 2.5rem;
  margin: 0.75rem 2rem 0;
  padding: 0 1rem;
  border: 0.0625rem solid var(--color-form-border);
  border-radius: 0.5rem;
  background: var(--color-white);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--color-text);
}

.contact-form__input::placeholder {
  color: var(--color-form-placeholder-text);
}

.contact-form__input--count {
  /* .contact-form__inputの標準margin/widthを打ち消し、行内での配置をrow側に委ねる。
     .contact-form__inputより後ろに書かないと、同じ詳細度(単一クラス)では
     ソース順で後勝ちになりこちらのwidth/marginが上書きされてしまう
     （実際に発生・幅がcalc(100% - 4rem)まで伸びていた） */
  display: inline-block;
  width: 10rem;
  margin: 0;
}

/* 「フリガナ」ラベル: お名前入力欄末尾(654+40=694)から718 = 24px */
input[name="name"] + .contact-form__label {
  margin-top: 1.5rem;
}

/* 「ご連絡先電話番号」ラベル: フリガナ入力欄末尾(748+40=788)から812 = 24px */
input[name="furigana"] + .contact-form__label {
  margin-top: 1.5rem;
}

/* ==========================================================================
   ご住所（郵便番号 + 都道府県 + 市区町村 + 建物名）
   ========================================================================== */

/* 「ご住所」ラベル: ご連絡先入力欄末尾(572+40=612)から636 = 24px */
input[name="tel"] + .contact-form__label {
  margin-top: 1.5rem;
}

.contact-form__zip-field {
  position: relative;
  /* margin-top: zip.y(666) - label.bottom(636+18=654) = 12px */
  margin: 0.75rem 2rem 0;
}

.contact-form__zip-mark {
  position: absolute;
  /* 〒: x48,y677。box起点(x32,y666)からの差分 = left16,top11 */
  left: 1rem;
  top: 0.6875rem;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.16em;
  color: var(--color-text);
  pointer-events: none;
}

.contact-form__input--zip {
  margin: 0;
  padding-left: 2.25rem;
}

/* 都道府県セレクト: zip入力欄末尾(666+40=706)から722 = 16px */
.contact-form__zip-field + .contact-form__select-field {
  margin: 1rem 2rem 0;
  width: calc(100% - 4rem);
  height: 2.4375rem;
}

.contact-form__select-field--pref .contact-form__select {
  color: var(--color-text);
}

/* 市区町村以降: 都道府県セレクト末尾(722+39=761)から777 = 16px */
.contact-form__select-field--pref + input[name="city"] {
  margin-top: 1rem;
  height: 2.4375rem;
}

/* 建物名他: 市区町村入力欄末尾(777+39=816)から832 = 16px */
input[name="city"] + input[name="building"] {
  margin-top: 1rem;
  height: 2.4375rem;
}

/* ==========================================================================
   備考欄・送信ボタン
   ========================================================================== */

/* 「メールアドレス」ラベル: 建物名入力欄末尾(1102+39=1141)から1165 = 24px */
input[name="building"] + .contact-form__label {
  margin-top: 1.5rem;
}

/* お問い合わせ内容ラベル: メールアドレス入力欄末尾(1195+40=1235)から1259 = 24px */
input[name="email"] + .contact-form__label {
  margin-top: 1.5rem;
}

/* ラベル文言をご相談についての選択で出し分ける（お問い合わせ→お問い合わせ内容 / 相談会予約→備考欄） */
.js-label-reservation {
  display: none;
}

.contact-form:has(input[value="reservation"]:checked) .js-label-inquiry {
  display: none;
}

.contact-form:has(input[value="reservation"]:checked) .js-label-reservation {
  display: inline;
}

.contact-form__textarea {
  display: block;
  width: calc(100% - 4rem);
  height: 7.5rem;
  /* margin-top: textarea.y(917) - label.bottom(887+18=905) = 12px */
  margin: 0.75rem 2rem 0;
  padding: 0.75rem 1rem;
  border: 0.0625rem solid var(--color-form-border);
  border-radius: 0.5rem;
  background: var(--color-white);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--color-text);
  resize: vertical;
}

/* プライバシーポリシー同意(#182:1432 チェックボックス / #182:1429 テキスト)。
   margin-top: checkbox.y(1739) - textarea.bottom(1577+120=1697) = 42px。
   gap: text.x(89) - checkbox右端(65+16=81) = 8px。
   行全体(65〜310)の中心は187.5でフレーム中央と一致するため中央揃えにする */
.contact-form__privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2.625rem;
  cursor: pointer;
}

/* 実際のcheckboxは隠し、見た目は .contact-form__privacy-mark で作る
   (ラジオボタンと同じ手法) */
.contact-form__privacy-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

/* figma-verified: 2026-08-29 #182:1432 16×16・fill白・border黒1px・角丸なし */
.contact-form__privacy-mark {
  display: block;
  flex-shrink: 0;
  position: relative;
  width: 1rem;
  height: 1rem;
  background: var(--color-white);
  border: 0.0625rem solid var(--color-text);
}

/* チェック時の印。生データにチェック状態の指定が無いため、
   ボーダー色と同じ色で一般的なチェックマークを描く */
.contact-form__privacy-input:checked + .contact-form__privacy-mark::after {
  content: "";
  position: absolute;
  left: 0.3125rem;
  top: 0.0625rem;
  width: 0.25rem;
  height: 0.5625rem;
  border-right: 0.125rem solid var(--color-text);
  border-bottom: 0.125rem solid var(--color-text);
  transform: rotate(45deg);
}

.contact-form__privacy-input:focus-visible + .contact-form__privacy-mark {
  outline: 2px solid var(--color-navy);
  outline-offset: 2px;
}

.contact-form__privacy-text {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.125rem;
  letter-spacing: 0.16em;
  color: var(--color-text);
}

.contact-form__privacy-text a {
  color: inherit;
  text-decoration: underline;
}

.contact-form__submit {
  display: flex;
  align-items: center;
  /* 生データは矢印+テキストのグループを箱内で中央揃えしていない(左16px/右37pxの非対称)。
     矢印box.x(156) - button.x(140) = 16px を左paddingとして固定し、中央揃えではなく
     左基準で配置する */
  justify-content: flex-start;
  padding-left: 1rem;
  /* 矢印box右端(156.5+5.5=162)から文字(177)まで15px。以前は生データの矢印幅4pxで計算した17pxで、
     線幅込みの実寸5.5pxとの差ぶん文字が約2px右にずれていた（figma-verifier が検出） */
  gap: 0.9375rem;
  /* margin-top: button.y(1077) - textarea.bottom(917+120=1037) = 40px */
  margin: 2.5rem auto 0;
  width: 6rem;
  height: 2.5rem;
  border-radius: 12.5rem;
  background: var(--color-navy);
  border: 0.0625rem solid var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}

/* 生データ(合体7, #87:793)はIMAGE-SVGタイプ(線幅1.5pxの山形/シェブロン、塗りつぶし三角ではない)。
   以前はCSSのborder三角トリックで代用していたが、単純図形ではないIMAGE-SVGをCSSで
   代用してはいけないルールに反していた。実画像(mask-image)に差し替える */
.contact-form__submit-arrow {
  display: inline-block;
  width: 0.34375rem;
  height: 0.59375rem;
  background-color: var(--color-white);
  -webkit-mask-image: url('../../images/contact-submit-arrow.svg?v=b8865cdd0f');
  mask-image: url('../../images/contact-submit-arrow.svg?v=b8865cdd0f');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* footer.top(1157) - submitボタン.bottom(1077+40=1117) = 40px */
.contact-form {
  padding-bottom: 2.5rem;
}

/* ==========================================================================
   thanks.html（送信完了）
   Figmaにデザインが無いページ。contact.phpの見出し・本文の組みをそのまま使い、
   電話番号とボタンだけこのページ用に余白を足す
   ========================================================================== */

.thanks-tel {
  text-align: center;
  margin-top: 2rem;
}

.thanks-actions {
  text-align: center;
  margin: 2.5rem 0;
}


/* ==========================================================================
   確認画面（contact.php の mode=confirm）
   Figmaにデザインが無い画面。フォームと同じ余白・書体で、入力欄を文字表示に置き換える
   ========================================================================== */

/* 検証エラーの一覧。JS側でも同じ検証をしているため通常は出ないが、
   JSが無効な環境やbotが弾かれたときにここへ来る */
.contact-form__errors {
  margin: 1.5rem 1rem 0;
  padding: 1rem;
  border: 0.0625rem solid var(--color-required);
  background: var(--color-white);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.125rem;
  letter-spacing: 0.16em;
  color: var(--color-text);
}

.contact-form__errors-title {
  margin: 0 0 0.5rem;
  color: var(--color-required);
}

/* エラーのある入力欄を赤枠にする（2026-09-15・ユーザー指定。Figma にデザインは無く、
   色は必須マーク・上部のエラー枠と同じ --color-required）。
   - :user-invalid … ブラウザ側のチェック（required / pattern / type=email）で弾かれた欄。
     触る前は付かず、入力したあとか送信しようとしたときに付く
   - .is-error … サーバー側の検証で弾かれた欄（lib/contact-form.php が付ける）。
     :not(:user-valid) にして、利用者が直して正しい値になった時点で赤枠が消えるようにする */
.contact-form__input:user-invalid,
.contact-form__select:user-invalid,
.contact-form__textarea:user-invalid,
.contact-form__input.is-error:not(:user-valid),
.contact-form__select.is-error:not(:user-valid),
.contact-form__textarea.is-error:not(:user-valid) {
  border-color: var(--color-required);
}

.contact-confirm {
  margin-top: 1.5rem;
}

/* 1項目。ラベルは入力フォームの .contact-form__label と同じ体裁にする */
.contact-confirm__row {
  margin: 0 1rem 1.5rem;
}

.contact-confirm__label {
  margin: 0 0 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.125rem;
  letter-spacing: 0.16em;
  color: var(--color-text-sub);
}

.contact-confirm__value {
  margin: 0;
  padding-bottom: 0.5rem;
  border-bottom: 0.0625rem solid var(--color-line);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.375rem;
  letter-spacing: 0.16em;
  color: var(--color-text);
  /* 住所やメールなど、長い値が枠を越えないようにする */
  overflow-wrap: break-word;
}

.contact-confirm__empty {
  color: var(--color-form-placeholder-text);
}

/* 「修正する」を左端、「送信」を右端に振り分ける。
   左右のマージンは .contact-confirm__row と同じ16pxにして、
   項目の罫線の両端とボタンの両端が縦に揃うようにする */
.contact-confirm__actions {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin: 2.5rem 1rem;
}

/* 入力フォームの送信ボタンは margin:2.5rem auto 0 で中央に置いているが、
   flexの中では左右のautoマージンが余白を吸ってしまい右端まで寄らない。
   確認画面では余白を .contact-confirm__actions 側に持たせるので0に戻す */
.contact-form__submit--confirm {
  margin: 0;
}

/* 「修正する」。送信ボタンより弱く見せたいので、下線付きのテキストにする。
   左右のpaddingを0にして、下線の左端を罫線の左端に合わせる */
.contact-confirm__back {
  border: 0;
  background: none;
  padding: 0.5rem 0;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.125rem;
  letter-spacing: 0.16em;
  color: var(--color-text);
  text-decoration: underline;
  cursor: pointer;
}

/* ==========================================================================
   送信中の表示（確認画面）

   Figmaにデザインは無い。送信を押してから完了画面に切り替わるまでに
   外部への通信が3つ（通知メール・自動返信・スプレッドシート記録）走るため、
   待たされていることを伝える目的で新規に追加した。
   書体・文字色は既存トークンのみで組んでいる。黒のスクリムだけは
   既存値(0.5)では薄かったため 0.75 にしている（下の.contact-sending参照）。
   ========================================================================== */

.contact-sending {
  display: none;
}

.contact-sending.is-active {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  /* 画面全体を覆う必要があるので、メニューパネル(.menu, z-index:200)と
     同じ最前面に置く */
  z-index: 200;
  /* 黒のスクリム。0.5では下の文字が読めて「操作できそう」に見えてしまうため、
     処理中であることが伝わるよう濃くしている */
  background: rgba(0, 0, 0, 0.75);
}

.contact-sending__inner {
  text-align: center;
  padding: 0 2rem;
}

/* 黒地に載せるので文字は白。紺(--color-navy)や本文色(--color-text)は
   黒背景では沈んで読めない */
.contact-sending__title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 2rem;
  letter-spacing: 0.08em;
  color: var(--color-white);
  margin: 0;
}

.contact-sending__text {
  margin: 0.5rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.375rem;
  letter-spacing: 0.16em;
  color: var(--color-white);
}

/* ==========================================================================
   PC レイアウト（1600px 基準 / Figma フレーム `CONTACT_PC` #279:1651）

   ページの縦構成（生データの絶対 y）
     0..104      ヘッダー（common.css で実装済み）
     201..265    見出し「お問い合わせ・予約」#279:1866（x=320 / 列の左端）
     301..333    リード #279:1865（x=320）
     413..445    ご相談について #279:1881
     455..559    ラジオ4つ ＋ 相談会の種類セレクト
     607..778    相談日時 第一〜第三希望（横3列）
     819..883    注記 #280:1931（中央）
     938..1050   ご希望の挙式時期
     1090..1202  ご招待予定の人数
     1242..1354  お名前 / 1394..1506 フリガナ / 1546..1658 ご連絡先電話番号
     1698..1970  ご住所（郵便番号と都道府県が横並び → 市区町村 → 番地）
                 ※ 各要素の x は「列の左端320 + 24」= 344 が基準
     2010..2122  メールアドレス
     2162..2418  お問い合わせ内容（textarea 800x200）
     2482..2514  プライバシーポリシー同意（中央）
     2578..2658  確認ボタン（192x80）
     2778..3807  フッター Component 2 #279:1687

   **1600px を 20rem + 60rem + 20rem に割り、中身は中央の 60rem（960px / x=320..1280）
   に入る。** ヘッダーとフッターだけ全幅。列の中では 見出し・ラベルが左端(320)、
   入力欄がそこから24px内側(344) の2段階になっている。
   ヒーローも縦書きタブも無い。地は**白**（他ページはクリーム）。

   生データの枠線は stroke-width 1.325px（入力欄）/ 1.778px（チェックボックス）だが、
   これはコンポーネントを拡大したときの端数で、SP は 1px。こちらも 1px に寄せる。
   ========================================================================== */

@media (min-width: 1024px) {
  /* --- ページの地 ------------------------------------------------------ */
  /* CONTACT_PC の地は白。他ページのクリームと違うので、このページだけ上書きする
     （contact.php の入力・確認画面と thanks.html が対象） */
  body:has(.contact-heading),
  .l-page:has(.contact-heading) {
    background: var(--color-white);
  }

  /* --- コンテンツの列（20rem + 60rem + 20rem の 60rem） ----------------- */
  /* 見出し・リード・フォームを同じ 60rem の箱に入れて中央に置く。
     以降の left/margin-left は、この列の左端（ページ x=320）からの値 */
  /* 入力エラーの赤枠 .contact-form__errors も同じ列に入れる。以前は漏れていて、
     SP の左右 1rem のまま画面いっぱいに広がっていた（2026-09-15）。
     PC のエラー表示のデザインは Figma に無いので、枠や文字の体裁は SP のまま */
  .contact-heading,
  .contact-dummy-text,
  .contact-form__errors,
  .contact-form {
    box-sizing: border-box;
    width: 60rem;
    margin-left: auto;
    margin-right: auto;
  }

  /* --- 見出し #279:1866（x=320 / y=201 / 40px Serif Medium / lh64 / ls6.4） --- */
  /* margin-top: 201 - ヘッダーの高さ(104) = 97px。他ページの大見出しと違って左寄せ */
  .contact-heading {
    margin-top: 6.0625rem;
    font-size: 2.5rem;
    line-height: 4rem;
    letter-spacing: 0.08em; /* 見出し用 */
  }

  /* --- リード #279:1865（x=300 / y=301 / 18px / lh32） ------------------ */
  /* margin-top: 301 - 見出し下端(265) = 36px */
  .contact-dummy-text {
    /* SPは幅311pxで折り返すが、生データ #279:1865 は Auto width（nowrap）の1行 */
    max-width: none;
    margin-top: 2.25rem;
    font-size: 1.125rem;
    line-height: 2rem;
  }

  /* --- ラベル共通（24px / lh32 / ls3.84 / 列の左端） -------------------- */
  .contact-form__label {
    margin-left: 0;
    font-size: 1.5rem;
    line-height: 2rem;
    letter-spacing: 0.04em; /* 部品用 */
  }

  /* margin-top: 413 - リード下端(333) = 80px */
  .contact-form__label--first {
    margin-top: 5rem;
  }

  /* --- ラジオ（2行2列） ------------------------------------------------ */
  /* 生データは4つとも絶対配置で、行の折り返し位置が文字幅に依存しない。
     flex の折り返しだと「お問い合わせ」の描画幅しだいで隣の位置が動くので、
     SP でセレクトにだけ使っている絶対配置を4つとも使う。
     原点はラジオ1の左上（ページ x=344 = 列の左端+24 / y=471）。
     margin-top: 471 - ラベル下端(445) = 26px
     height: 2行目の下端(535+24=559) - 471 = 88px */
  .contact-form__radio-group {
    position: relative;
    display: block;
    height: 5.5rem;
    margin: 1.625rem 0 0 1.5rem;
  }

  .contact-form__radio-group > * {
    position: absolute;
    margin: 0;
  }

  /* お問い合わせ（x=344 y=471）＝原点 */
  .contact-form__radio-group > .contact-form__radio:first-child {
    left: 0;
    top: 0;
  }

  /* 相談会予約（x=536）＋ 相談会の種類セレクト。536 - 344 = 192px */
  .contact-form__radio-row {
    left: 12rem;
    top: 0;
    min-height: 0;
  }

  /* 行の中のラジオは SP の margin-left(16px) を落とす。行そのものが x=516 を決める */
  .contact-form__radio-row .contact-form__radio {
    margin-left: 0;
  }

  /* ブライダルプランについて知りたい（x=344 y=535）。535 - 471 = 64px */
  .contact-form__radio-group > .contact-form__radio:nth-child(3) {
    left: 0;
    top: 4rem;
  }

  /* ご結納・お顔合わせ（x=738 y=535）。738 - 344 = 394px。PCは1行なので
     上寄せ(--yuino)をやめて中央揃えに戻し、SP用の<br>も出さない */
  .contact-form__radio--yuino {
    left: 24.625rem;
    top: 4rem;
    align-items: center;
  }

  .contact-form__radio--yuino .contact-form__radio-text br {
    display: none;
  }

  .contact-form__radio-mark--top {
    margin-top: 0;
  }

  /* 18px / lh24 / ls2.88。丸(16px)との間隔8pxはSPと同じ */
  .contact-form__radio-text {
    font-size: 1.125rem;
    line-height: 1.5rem;
    letter-spacing: 0.04em; /* 部品用 */
  }

  /* 相談会の種類 #281:2061（x=678 y=455 / 240x56）。
     行の左端(536)基準で left = 142px、ラジオ文字の上端(471)基準で top = -16px */
  .contact-form__select-field--fair {
    left: 8.875rem;
    top: -1rem;
    width: 15rem;
    height: 3.5rem;
  }

  /* --- 相談日時 第一〜第三希望（横3列） -------------------------------- */
  /* DOM は ラベル→行 ×3 →注記 の順なので、grid で列と行を明示的に置く。
     列の x は 344 / 656 / 966 で間隔が 312 と 310 と揃っていないため、
     等間隔の gap ではなく列幅を個別に指定する。3列目は auto（列の残り幅 314px）。
     224px にするとラベル「相談日時（第三希望）※」(227px) が折り返して
     1行目が64pxになり、以降が32px下にずれる（実際に発生）。
     margin-top: ラベル(607) - ラジオ群の下端(559) = 48px */
  .js-datetime-group {
    margin: 3rem 0 0 1.5rem;
  }

  /* SP側の同じセレクタが margin-top:1.5rem を持っているので、こちらでも同じ
     詳細度で上書きする（.js-datetime-group 単独では負ける） */
  .contact-form__radio-group:has(input[value="reservation"]:checked) ~ .js-datetime-group {
    display: grid;
    grid-template-columns: 19.5rem 19.375rem auto;
    /* 日付box(655) - ラベル下端(639) = 16px */
    row-gap: 1rem;
    margin-top: 3rem;
  }

  .js-datetime-group > .contact-form__label:nth-child(1) { grid-area: 1 / 1; }
  .js-datetime-group > .contact-form__datetime-row:nth-child(2) { grid-area: 2 / 1; }
  .js-datetime-group > .contact-form__label:nth-child(3) { grid-area: 1 / 2; }
  .js-datetime-group > .contact-form__datetime-row:nth-child(4) { grid-area: 2 / 2; }
  .js-datetime-group > .contact-form__label:nth-child(5) { grid-area: 1 / 3; }
  .js-datetime-group > .contact-form__datetime-row:nth-child(6) { grid-area: 2 / 3; }
  .js-datetime-group > .contact-form__note { grid-area: 3 / 1 / 4 / -1; }

  /* 「相談日時（第一〜第三希望）※」#280:1913 ほかは、他のラベル(24px)と違って本文用の 18/32・.16em
     （Figma は PC/本文/標準、幅227）。以前は他のラベルと同じ 24px で出していた
     （2026-09-18 figma-verifier が検出・ユーザー判断で Figma に合わせる）。行送りは同じ32なので位置は変わらない */
  .js-datetime-group > .contact-form__label {
    font-size: 1.125rem;
    letter-spacing: 0.16em;
  }

  /* grid が位置を決めるので、SP の margin は全部落とす */
  .js-datetime-group > .contact-form__label,
  .js-datetime-group > .contact-form__datetime-row,
  .contact-form__datetime-row + .contact-form__label {
    margin: 0;
  }

  /* 列の中は 日付(224x56) の下に 時刻(200x56) が左から22px下がって入る */
  .contact-form__datetime-row {
    display: block;
  }

  .contact-form__date-field {
    width: 14rem;
    height: 3.5rem;
  }

  /* time box は date box より x が +22px（366-344 / 678-656 / 988-966）、
     y が +11px（722 - 日付box下端711） */
  .contact-form__select-field--time {
    width: 12.5rem;
    height: 3.5rem;
    margin: 0.6875rem 0 0 1.375rem;
  }

  /* 注記 #280:1931（18px / lh32 / 2行 / 中央）。
     グリッドは入力欄に合わせて左に24px寄っているので、注記だけ列の全幅に戻して
     中央寄せする（そうしないとグリッドの中心で12pxずれる）。
     margin-top: 819 - 時刻box下端(778) = 41px。うち16pxは row-gap で出ている */
  .contact-form__note {
    width: 60rem;
    margin: 1.5625rem 0 0 -1.5rem;
    font-size: 1.125rem;
    line-height: 2rem;
  }

  /* SPは<br>4つで4行、PCは2行。生データの改行位置に合わせて2つだけ残す */
  .contact-form__note br:nth-of-type(1),
  .contact-form__note br:nth-of-type(3) {
    display: none;
  }

  /* --- ご希望の挙式時期 / ご招待予定の人数 ----------------------------- */
  /* margin-top: ラベル(938) - 注記下端(883) = 55px */
  .contact-form__radio-group:has(input[value="reservation"]:checked) ~ .js-wedding-date-group {
    margin-top: 3.4375rem;
  }

  /* margin-top: ラベル(1090) - 挙式時期の入力下端(1050) = 40px */
  .contact-form__radio-group:has(input[value="reservation"]:checked) ~ .js-guest-count-group {
    margin-top: 2.5rem;
  }

  /* 入力行: ラベル下端から24px、左は x=344。suffix（頃 / 名）は box 右端から16px */
  .contact-form__wedding-date-row,
  .contact-form__guest-count-row {
    margin: 1.5rem 0 0 1.5rem;
    gap: 1rem;
  }

  /* 頃 #281:2297 / 名 #280:1955: 16px / lh32 */
  .contact-form__date-suffix,
  .contact-form__count-suffix {
    font-size: 1rem;
    line-height: 2rem;
  }

  /* --- 1行入力（お名前 / フリガナ / 電話 / 市区町村 / 番地 / メール） --- */
  /* 生データの入力内テキストは x=365（box 344 から 21px）/ 16px */
  .contact-form__input {
    width: 41rem;
    height: 3.5rem;
    margin: 1.5rem 0 0 1.5rem;
    padding: 0 1.3125rem;
    font-size: 1rem;
    letter-spacing: 0.04em; /* 部品用 */
  }

  /* 人数の入力欄 #280:1952 は 224x56 で、位置は行(.contact-form__guest-count-row)側が持つ。
     基底の .contact-form__input より**後ろ**に書くこと。同じ詳細度なのでソース順で
     負けると width も margin-left も基底の値に戻る（実際に発生し、左が 324+324=648px に
     なっていた。CLAUDE.md / verify.sh 項目7 と同じ型） */
  .contact-form__input--count {
    width: 14rem;
    height: 3.5rem;
    margin: 0;
  }

  /* ラベルの上は 40px（入力欄の下端から次のラベルまで） */
  .js-guest-count-group + .contact-form__label,
  input[name="name"] + .contact-form__label,
  input[name="furigana"] + .contact-form__label,
  input[name="tel"] + .contact-form__label,
  input[name="building"] + .contact-form__label,
  input[name="email"] + .contact-form__label {
    margin-top: 2.5rem;
  }

  /* --- ご住所（郵便番号と都道府県が横並び） ---------------------------- */
  /* #281:2114 x=344 w=320 / #281:2124 x=680 w=320。間隔 16px。
     入力欄の間に改行がある（inline-block だと空白文字ぶんずれる）ので float で並べる */
  /* 下の24pxは float 側の margin-bottom で作る。clear した要素に margin-top を付けても
     クリアランスに吸収されて効かない（実際に市区町村が24px上に詰まった） */
  .contact-form__zip-field {
    float: left;
    width: 20rem;
    margin: 1.5rem 0 1.5rem 1.5rem;
  }

  .contact-form__zip-field + .contact-form__select-field {
    float: left;
    width: 20rem;
    height: 3.5rem;
    margin: 1.5rem 0 1.5rem 1rem;
  }

  /* 〒 #281:2118: 18px Bold / box 起点から left 21px。
     placeholder #281:2117 は x=391 なので box から 47px */
  .contact-form__zip-mark {
    left: 1.3125rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.125rem;
  }

  .contact-form__input--zip {
    width: 100%;
    margin: 0;
    padding-left: 2.9375rem;
  }

  /* 市区町村は float を解除して次の行から。#281:2127 y=1834（郵便番号行の下端1810 +24） */
  .contact-form__select-field--pref + input[name="city"] {
    clear: both;
    width: 50rem;
    height: 3.5rem;
    margin-top: 0;
  }

  /* #281:2129 y=1914 - 市区町村の下端(1890) = 24px。SPは16pxなので上書きする */
  input[name="city"] + input[name="building"] {
    margin-top: 1.5rem;
  }

  input[name="city"] + input[name="building"],
  input[name="email"] {
    width: 50rem;
    height: 3.5rem;
  }

  /* --- セレクト共通 ---------------------------------------------------- */
  .contact-form__select {
    padding: 0 3rem 0 1.3125rem;
    font-size: 1rem;
    letter-spacing: 0.04em; /* 部品用 */
  }

  /* 矢印は SP と同じ border 三角。生データ #281:1979 ほかは 15x12（回転前 12x15）で、
     SP（10x8）のちょうど1.5倍。box 右端から 22px 内側（546-524 / 898-876）。
     figma-verified: 2026-09-12 #281:1979/#281:2062/#281:2121 いずれも塗りの三角 */
  .contact-form__select-arrow {
    right: 1.375rem;
    border-top-width: 0.46875rem;
    border-bottom-width: 0.46875rem;
    border-left-width: 0.75rem;
  }

  /* --- 日付欄 ---------------------------------------------------------- */
  /* アイコン #281:1985: x=360 y=675 → box(344,655) から left16 / top20。
     入力テキスト #281:1983 は x=388.8 なので box から 44.8px */
  .contact-form__date-icon {
    left: 1rem;
    top: 1.25rem;
  }

  .contact-form__date-input {
    padding: 0 1.3125rem 0 2.8rem;
    font-size: 1rem;
    letter-spacing: 0.04em; /* 部品用 */
  }

  /* --- お問い合わせ内容 ------------------------------------------------ */
  /* #281:2145 x=344 y=2218 / 800x200 */
  .contact-form__textarea {
    width: 50rem;
    height: 12.5rem;
    margin: 1.5rem 0 0 1.5rem;
    padding: 1rem 1.3125rem;
    font-size: 1rem;
    letter-spacing: 0.04em; /* 部品用 */
  }

  /* --- プライバシーポリシー同意 ---------------------------------------- */
  /* `Frame 24` #281:2155（x=615..986 / 中心800.5）。中央寄せはそのまま使う。
     margin-top: テキスト上端(2482) - textarea 下端(2418) = 64px。
     チェック24x24、テキストとの間隔は 655-639 = 16px */
  .contact-form__privacy {
    gap: 1rem;
    margin-top: 4rem;
  }

  .contact-form__privacy-mark {
    width: 1.5rem;
    height: 1.5rem;
  }

  /* SP(16px)の印を24pxの箱に合わせて1.5倍にする */
  .contact-form__privacy-input:checked + .contact-form__privacy-mark::after {
    left: 0.46875rem;
    top: 0.09375rem;
    width: 0.375rem;
    height: 0.84375rem;
    border-right-width: 0.1875rem;
    border-bottom-width: 0.1875rem;
  }

  .contact-form__privacy-text {
    font-size: 1.125rem;
    line-height: 2rem;
  }

  /* --- 確認ボタン ------------------------------------------------------ */
  /* `グループ103` #281:2292: x=705 y=2578 / 192x80 / 角丸400 / #14274B。
     テキスト #281:2294 は 20px / lh32 白 下線でボタン中央（x=801）、
     矢印 #281:2295 は 8x16 でボタン左端から32px の固定位置。
     margin-top: 2578 - 同意テキスト下端(2514) = 64px */
  .contact-form__submit {
    position: relative;
    justify-content: center;
    /* CSS は最後の1文字の後ろにも字送り(.04em)が付くので、そのまま中央寄せすると文字が
       字送りの半分だけ左に寄る。同じ量を左に足して文字そのものを中央に置く（2026-09-18・ユーザー指摘） */
    padding-left: 0.04em;
    gap: 0;
    margin-top: 4rem;
    width: 12rem;
    height: 5rem;
    border-radius: 25rem;
    /* 20/32（Figma は PC/トグル）。行送りは未指定(normal)だったので Figma と同じ 32 を明示した
       （2026-09-18。箱の中で中央揃えなので位置は変わらない） */
    font-size: 1.25rem;
    line-height: 2rem;
    letter-spacing: 0.04em; /* 部品用 */
  }

  .contact-form__submit-arrow {
    position: absolute;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.5rem;
    height: 1rem;
  }

  /* padding-bottom: フッター(2778) - ボタン下端(2658) = 120px */
  .contact-form {
    padding-bottom: 7.5rem;
  }

  /* ==========================================================================
     確認画面 / thanks.html

     この2画面は Figma にフレームが無い。専用のデザインを起こす代わりに、
     CONTACT_PC の寸法をそのまま流用する:
       ラベル 24px を x=300 / 値は入力欄と同じ x=324・幅800 /
       ボタンは確認ボタンと同じ 192x80 / 画面下からフッターまで120px。
     見出しとリードは共通クラス（.contact-heading / .contact-dummy-text）なので
     すでに PC の値（40px・18px / x=300）が当たっている。
     ========================================================================== */

  /* 1項目めの上端を、入力フォームの最初のラベル（y=413）と同じ位置にそろえる。
     リード下端(333) から 80px */
  .contact-confirm {
    margin-top: 5rem;
  }

  .contact-confirm__row {
    margin: 0 0 2rem;
  }

  /* 入力フォームのラベルと同じ 24px / lh32 */
  .contact-confirm__label {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    line-height: 2rem;
  }

  /* 値は入力欄と同じ左端（ラベルから24px = x=344）・同じ幅（800px） */
  .contact-confirm__value {
    width: 50rem;
    margin-left: 1.5rem;
    padding-bottom: 1rem;
    font-size: 1.125rem;
    line-height: 2rem;
  }

  /* ボタン2つは値の箱（344..1144）の両端に寄せる。
     送信ボタンは .contact-form__submit の PC 値（192x80）がそのまま効く */
  .contact-confirm__actions {
    width: 50rem;
    margin: 4rem 0 0 1.5rem;
  }

  .contact-confirm__back {
    font-size: 1.125rem;
    line-height: 2rem;
  }

  /* --- thanks.html ----------------------------------------------------- */
  /* 見出し・本文は入力画面と同じく列の左端、電話とボタンは入力画面の
     確認ボタンと同じく中央（列の中心＝ページの中心800なので一致する）。
     本文の幅は列(60rem)に任せる。以前 padding-right:10rem で 800px に
     絞っていたが、生データに無い値をこちらで決めていただけなので外した
     （2026-09-12・ユーザー判断） */

  /* 電話: 本文下端から64px。.footer__cta-tel / --hours は共通の PC 値が当たる */
  .thanks-tel {
    margin-top: 4rem;
  }

  /* ボタン: 電話ブロックから64px。下はフッターまで120px。
     text-align:center のままだと inline-block のベースライン分だけ箱が
     ボタンより縦に大きくなり、フッターまでが120pxにならないので flex にする */
  .thanks-actions {
    display: flex;
    justify-content: center;
    margin: 4rem 0 0;
  }

  /* common.css の .btn が PC で上下 24px のマージンを持っているので、
     ここでは箱＝ボタンの高さにそろえるために消す */
  .thanks-actions .btn {
    margin: 0;
  }

  .l-page:has(.thanks-actions) {
    padding-bottom: 7.5rem;
  }

  /* thanks の電話番号は単独のブロックで中央寄せ。common.css は PC でこのクラスの padding-left を 0 に
     戻している（フッターの横並び用）ので、thanks の中だけ末尾の字送り(.08em)ぶんを左に足して中央に置く。
     共通クラスをこのページの文脈で上書きするため、ここも2クラスのセレクタ */
  .thanks-tel .footer__cta-tel {
    padding-left: 0.08em;
  }
}