@charset "UTF-8";
/*
 * Snow Monkey Forms を今婚デザインに合わせるスタイル
 * 対応表: .contact-form-card → .smf-form / .contact-form-row → .smf-item など
 *
 * 注意: プラグイン本体CSS(app.css)より後に読み込むこと。
 *       functions.php で handle 'snow-monkey-forms' を依存に指定している。
 */

/* =========================================================
   0. SMF既定値のリセット
   プラグインが付ける影・枠・独自ラジオ描画を一旦無効化し、
   以降で今婚デザインを載せる
   ========================================================= */
.snow-monkey-form .smf-text-control__control,
.snow-monkey-form .smf-tel-control__control,
.snow-monkey-form .smf-email-control__control,
.snow-monkey-form .smf-textarea-control__control,
.snow-monkey-form .smf-select-control__control,
.snow-monkey-form .smf-checkbox-control__control {
  box-shadow: none;
}

/* 内容カラムの幅制限 calc(100% - 224px) を解除（ラジオが折り返してしまうため） */
.smf-form .smf-item__col {
  max-width: none;
}

/* ---- カード全体（.contact-form-card 相当） ----
   ボタン(.smf-action)は .smf-form の外・<form>直下にあるため、
   カード枠は <form>=.snow-monkey-form に付ける */
.snow-monkey-form {
  width: min(100%, 940px);
  margin-inline: auto;
  padding: 28px 48px 32px;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  background: var(--color-white);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}

/* ---- 1行（.contact-form-row 相当） ---- */
.smf-form .smf-item {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 0;
  padding: 20px 0;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  background: none;
}

/* 現行は最終行にも区切り線が入るため、last-of-type の除外はしない */

.smf-form .smf-item__col {
  padding: 0;
  border: 0;
  background: none;
}

/* ---- ラベル（.contact-form-row__label 相当） ---- */
.smf-form .smf-item__label {
  padding-top: 3px;
}

.smf-form .smf-item__label label {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--color-base);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

/* 必須バッジ（.contact-badge--required 相当） */
.smf-form .smf-item__label__require {
  display: inline-grid;
  place-items: center;
  min-height: 16px;
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--color-white);
  background: var(--accent-color);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ラベル列に積むバッジ（.contact-form-row__label--stack + .contact-badge--note 相当） */
.smf-form .smf-item__label--stack {
  display: grid;
  align-content: start;
  gap: 6px;
}

.smf-form .smf-item__label__note {
  display: inline-grid;
  place-items: center;
  max-width: 64px;
  min-height: 16px;
  padding: 1px 6px;
  border-radius: 3px;
  color: #575757;
  background: #faf5f0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* 日付行は現行の .contact-date-body（grid / gap 12px）に合わせる。
   注釈は .smf-item__controls の外にあるので、外側もgridにして同じ間隔にする */
.smf-form .is-date .smf-item__col--controls,
.smf-form .is-date .smf-item__controls {
  display: grid;
  gap: 12px;
}

.smf-form .is-date .smf-date-group {
  display: grid;
  gap: 12px;
}

.smf-form .is-date .smf-date-heading,
.smf-form .is-date .smf-item__description {
  margin: 0;
}

/* 補足文（.contact-note 相当） */
.smf-form .smf-item__description {
  margin: 8px 0 0;
  padding: 0;
  color: rgba(87, 87, 87, 0.6);
  font-size: 14px;
  line-height: 1.2;
}

/* ---- ラジオ（.contact-radio-list / .contact-radio 相当） ---- */
.smf-form .smf-radio-buttons-control__control {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 横並びにする行 */
.smf-form .is-inline .smf-radio-buttons-control__control {
  flex-flow: row wrap;
  column-gap: 20px;
  row-gap: 12px;
}

/* .smf-label は div、その中の <label> が inline のため
   インライン行ボックス分（約1.8px）背が高くなる。flex にして解消する */
.smf-form .smf-label {
  display: flex;
  margin: 0;
}

.smf-form .smf-label > label {
  display: flex;
  width: 100%;
}

.smf-form .smf-radio-button-control {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 19px;
  color: var(--color-base);
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: 0.04em;
}

/* ラジオの丸はテーマ本体CSS（assets/css/style.css の
   `[type=radio] + span::before/::after`）が描画する。SMFのマークアップも
   <input type="radio"> + <span> なので同じ規則が効き、現行と同じ見た目になる。
   丸そのものは上書きしないこと。

   ただしテーマは [type=radio]{position:absolute} で input を流し込みから
   外す前提なのに対し、SMFは position:relative を当てる。そのままだと
   非表示のinputが16px分の幅を占めて選択肢が右にずれ、折り返し位置まで
   変わってしまうため、テーマ側に合わせる */
.smf-form .smf-radio-button-control__control,
.smf-form .smf-checkbox-control__control {
  position: absolute;
  top: 0;
  left: 0;
}

/* absolute化した input のアンカー。これが無いと input がページ左上(0,0)に
   外れ、ラベルクリック時のフォーカス移動で毎回ページ最上部へスクロールする */
.smf-form .smf-radio-button-control,
.smf-form .smf-checkbox-control {
  position: relative;
}

.smf-form .smf-radio-button-control__label::before,
.smf-form .smf-radio-button-control__label::after {
  top: 0.675em;
}

/* ラジオの丸はPC/SP共通でFigma(1731-237)準拠:
   円18px・リング2px #d9d4cf、選択時はリング #b8956a + 中央ドット8px。
   円とテキストの間隔は8px（円18px + 8px = padding-left 26px） */
.smf-form .smf-radio-button-control__label {
  padding-left: 26px;
}

.smf-form .smf-radio-button-control__label::before {
  width: 18px;
  height: 18px;
  border: 2px solid #d9d4cf;
}

.smf-form .smf-radio-button-control__label::after {
  left: 5px;
  width: 8px;
  height: 8px;
  border: 0;
  background: #b8956a;
}

.smf-form [type=radio]:checked + .smf-radio-button-control__label::before {
  border-color: #b8956a;
}

/* 2行になる選択肢で丸が中央にずれるため1行目に揃える（0.675em = 1.35の半分）。
   pre-line は選択肢内の改行を現行の nl2br と同じ見た目で表示するため */
.smf-form .smf-radio-button-control__label {
  line-height: 1.35;
  white-space: pre-line;
}

/* ---- テキスト系（.contact-input 相当） ---- */
.smf-form .smf-text-control__control,
.smf-form .smf-tel-control__control,
.smf-form .smf-email-control__control,
.smf-form .smf-textarea-control__control {
  width: min(100%, 320px);
  height: 44px;
  padding: 0 14px;
  border: 1.5px solid #d9d4cf;
  border-radius: 8px;
  background: var(--color-white);
  color: var(--color-base);
  font-size: 14px;
  line-height: 1.2;
  box-shadow: none;
}

.smf-form .smf-text-control__control::placeholder,
.smf-form .smf-tel-control__control::placeholder,
.smf-form .smf-email-control__control::placeholder {
  color: #ccc;
}

/* ---- 年/月/日 の3分割（.contact-date-row 相当） ---- */
.smf-form .smf-date-heading {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.04em;
}

.smf-form .smf-date-row + .smf-date-heading {
  margin-top: 16px;
}

.smf-form .smf-date-row,
.smf-form .smf-inline-field {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-base);
  font-size: 16px;
  line-height: 1.2;
}

.smf-form .smf-date-row .smf-text-control__control {
  width: 80px;
}

.smf-form .smf-inline-field .smf-text-control__control {
  width: 80px;
}

/* ---- ボタン（.contact-button 相当） ---- */
.snow-monkey-form .smf-action {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 32px 0 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: start;
}

/* ボタン間隔は上の gap で管理する。プラグイン既定の
   `.smf-button-control + .smf-button-control { margin-left: ... }` が残ると、
   SP確認画面の縦積みで2つ目（送信）だけ左に寄って幅が狭くなる */
.snow-monkey-form .smf-action .smf-button-control + .smf-button-control {
  margin-left: 0;
}

/* リセットボタンは廃止（旧版 smf.js が注入していた。
   旧JSが残っていても表示されないようCSSでも塞ぐ）。
   下の全幅化ルール（display: flex）に負けないよう .smf-action を挟んで
   詳細度を1段上げておくこと */
.snow-monkey-form .smf-action .smf-reset-button {
  display: none;
}

/* 入力画面の「確 認」ボタンは幅を伸ばして中央に置く
   （invalid はバリデーションエラー時の入力画面再表示）。
   ラッパーを width:100% にして、その中でボタンを max-width まで広げる */
.snow-monkey-form:where([data-screen="input"], [data-screen="invalid"]) .smf-button-control {
  display: flex;
  width: 100%;
}

.snow-monkey-form:where([data-screen="input"], [data-screen="invalid"]) .smf-button-control__control {
  width: 100%;
  max-width: 270px;
  margin: 0 auto;
}

/* 送信処理中(disabled)の表現。プラグインは文字色をグレーにするが
   （`.smf-action .smf-button-control__control[disabled]`）、金色ボタンでは
   文字が読みづらいため、文字色は変えずボタン全体を薄くする */
.snow-monkey-form .smf-action .smf-button-control__control:disabled {
  color: var(--color-white);
  opacity: 0.6;
}

/* 白ボタン（修正する）は disabled でも茶文字のまま */
.snow-monkey-form .smf-action .smf-button-control__control[data-action="back"]:disabled {
  color: var(--color-base);
}

/* :focus / :active / :disabled（送信処理中）でも寸法・余白を変えない。
   状態は :where() で詳細度を上げずに束ねること。素の :disabled 等を連結すると
   この基本ルールがSP用の上書き（min-width 0 / padding 30px 等）より強くなり、
   SPで押下中だけPC寸法に化けてボタンが大きくなる */
.snow-monkey-form .smf-button-control__control,
.snow-monkey-form .smf-button-control__control:where(:hover, :focus, :active, :disabled) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 131px;
  min-height: 52px;
  padding: 0 48px;
  border: 1.5px solid var(--color-brown03);
  border-radius: 30px;
  background: var(--color-brown03);
  color: var(--color-white);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(184, 149, 106, 0.25);
}


/* 送信処理中に SMF がボタン内へ出すスピナー(.smf-sending)が
   ボタン幅を押し広げないよう、絶対配置に固定する（実機で幅がガタつく原因） */
.snow-monkey-form .smf-button-control__control {
  position: relative;
}

.snow-monkey-form .smf-button-control__control .smf-sending {
  position: absolute;
  top: 50%;
  right: 10px;
  translate: 0 -50%;
}

/* ---- エラー（.contact-error 相当） ---- */
.smf-form .smf-error-messages {
  margin: 8px 0 0;
  color: var(--accent-color);
  font-size: 13px;
  line-height: 1.4;
}

/* ---- 確認画面 ---- */
.smf-form--confirm .smf-item,
.smf-form.-confirm .smf-item {
  padding: 16px 0;
}

/* 「修正する」は白ボタン（.contact-button--secondary 相当）
   data-action はボタン要素自身に付く */
.snow-monkey-form .smf-button-control__control[data-action="back"],
.snow-monkey-form .smf-button-control__control[data-action="back"]:where(:hover, :focus, :active) {
  border-color: #d9d4cf;
  background: var(--color-white);
  color: var(--color-base);
  box-shadow: none;
}

/* =========================================================
   画面連動
   SMFは <form data-screen="input|confirm|complete"> を出力するので、
   :has() でステップ表示と見出しを画面に追従させる
   ========================================================= */
.smf-heading--confirm,
.smf-heading--complete {
  display: none;
}

/* 入力用見出しを既定にしておくと、loading / systemerror など
   想定外の data-screen でも見出しが消えない */
.smf-heading--input {
  display: grid;
}

.contact-form-section:has([data-screen="confirm"]) .smf-heading--input,
.contact-form-section:has([data-screen="complete"]) .smf-heading--input {
  display: none;
}

/* .contact-section-heading__title は display:grid + ::after で装飾線を出すので、
   表示時は block ではなく grid に戻すこと（block だと線が潰れて15px縮む） */
.contact-form-section:has([data-screen="confirm"]) .smf-heading--confirm,
.contact-form-section:has([data-screen="complete"]) .smf-heading--complete {
  display: grid;
}

/* 確認・完了画面ではフォーム上のキャンペーン・CTAバンドと
   ページ下部のアクセスセクションを出さない（Figma 2630-247 / 2638-247）。
   ページ全体の切り替えなので祖先の main.contact-page から :has() で拾う */
.contact-page:has(.snow-monkey-form[data-screen="confirm"]) .contact-campaign,
.contact-page:has(.snow-monkey-form[data-screen="confirm"]) .p-cta-reservation,
.contact-page:has(.snow-monkey-form[data-screen="confirm"]) .access-section,
.contact-page:has(.snow-monkey-form[data-screen="complete"]) .contact-campaign,
.contact-page:has(.snow-monkey-form[data-screen="complete"]) .p-cta-reservation,
.contact-page:has(.snow-monkey-form[data-screen="complete"]) .access-section {
  display: none;
}

/* 現行は入力画面にステップ表示を出さない（確認・完了のみ）。
   既定を非表示にしておけば想定外の data-screen でも崩れない */
.smf-steps {
  display: none;
}

.contact-form-section:has([data-screen="confirm"]) .smf-steps,
.contact-form-section:has([data-screen="complete"]) .smf-steps {
  display: flex;
}

/* .contact-steps の is-current / is-complete 相当 */
.contact-form-section:has([data-screen="confirm"]) .smf-steps li:nth-child(-n + 2),
.contact-form-section:has([data-screen="complete"]) .smf-steps li {
  color: var(--color-base);
}

.contact-form-section:has([data-screen="confirm"]) .smf-steps li:nth-child(-n + 2) span,
.contact-form-section:has([data-screen="complete"]) .smf-steps li span {
  border-color: var(--color-brown03);
  background: var(--color-brown03);
  color: var(--color-white);
}

.contact-form-section:has([data-screen="confirm"]) .smf-steps li:nth-child(1)::after,
.contact-form-section:has([data-screen="complete"]) .smf-steps li:not(:last-child)::after {
  background: linear-gradient(90deg, #bfa660, #a08332);
}

/* ---- SP（現行 pages.css の @media (max-width:767px) に対応） ---- */
@media (max-width: 767px) {
  .snow-monkey-form {
    width: 335px;
    max-width: 100%;
    padding: 20px 20px 24px;
    border-radius: 16px;
  }

  .smf-form .smf-item {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px 0;
  }

  .smf-form .smf-item__label {
    padding-top: 0;
  }

  .smf-form .smf-item__label label {
    align-items: center;
    font-size: 16px;
    letter-spacing: 0;
  }

  .smf-form .smf-radio-button-control {
    font-size: 14px;
    letter-spacing: 0;
  }

  /* SPでは横並び指定の行（.is-inline = 開催エリア・希望スタイル）以外を縦積みにする。
     .is-inline はベースの flex-flow: row wrap（column-gap 20px / row-gap 12px）のまま */
  .smf-form .smf-radio-buttons-control__control {
    flex-direction: column;
    gap: 12px;
  }

  .smf-form .is-inline .smf-radio-buttons-control__control {
    flex-flow: row wrap;
    column-gap: 20px;
    row-gap: 12px;
  }

  /* ラジオの丸のデザイン（18px・ゴールド配色）はベース側でPC/SP共通。
     SPは文字サイズのみ 15px に落とす。
     ::first-line で行単位に装飾すると iOS Safari のバグ（ボックス幅が
     元のfont-sizeで計算され末尾文字が折り返る）を踏むため使わないこと。
     「※〜」注記行は smf.js が span.smf-option-note に包む */
  .smf-form .smf-radio-button-control__label {
    font-size: 15px;
  }

  .smf-form .smf-option-note {
    color: #555;
    font-size: 13px;
  }

  .smf-form .smf-radio-button-control__label::before {
    width: 18px;
    height: 18px;
    border: 2px solid #d9d4cf;
  }

  .smf-form .smf-radio-button-control__label::after {
    left: 5px;
    width: 8px;
    height: 8px;
    border: 0;
    background: #b8956a;
  }

  .smf-form [type=radio]:checked + .smf-radio-button-control__label::before {
    border-color: #b8956a;
  }

  /* 16px未満だとiOS Safariがフォーカス時に自動ズームするため16pxにする */
  .smf-form .smf-text-control__control,
  .smf-form .smf-tel-control__control,
  .smf-form .smf-email-control__control,
  .smf-form .smf-textarea-control__control {
    width: 100%;
    font-size: 16px;
  }

  .smf-form .smf-date-row .smf-text-control__control,
  .smf-form .smf-inline-field .smf-text-control__control {
    width: 80px;
  }

  /* 希望日の「年/月/日」はラジオ選択肢と同じ15px（確認画面も同セレクタで適用される） */
  .smf-form .smf-date-row {
    gap: 6px;
    font-size: 15px;
  }

  /* 各inputは .smf-placeholder に個別に包まれるため input への
     :last-of-type は全部に効いてしまう。ラッパー側で最後の1つを指す */
  .smf-form .smf-date-row .smf-placeholder:last-of-type .smf-text-control__control {
    width: 76px;
  }

  /* 「第一希望」「第二希望」もラジオ選択肢と同じ15px */
  .smf-form .smf-date-heading {
    font-size: 15px;
  }

  .smf-form .smf-item__description {
    font-size: 12px;
  }

  .snow-monkey-form .smf-action {
    gap: 12px;
    margin-top: 24px;
  }

  .snow-monkey-form .smf-button-control__control {
    min-width: 0;
    min-height: 44px;
    padding-inline: 30px;
  }
}

/* 確認画面だけに出す要素（リード文・個人情報の注記） */
.smf-lead--confirm,
.smf-privacy--confirm {
  display: none;
}

.contact-form-section:has([data-screen="confirm"]) .smf-lead--confirm {
  display: block;
}

.contact-form-section:has([data-screen="confirm"]) .smf-privacy--confirm {
  display: block;
  margin-inline: auto;
}

/* ---- 確認画面の表示調整（現行の確認画面に合わせる） ---- */

/* 確認画面では必須バッジを出さない（Figmaの is-keep-require 指定は誤りだった） */
.snow-monkey-form[data-screen="confirm"] .smf-item__label__require {
  display: none;
}

/* 補足文（※年始休暇 等）は確認画面には出さない */
.snow-monkey-form[data-screen="confirm"] .smf-item__description {
  display: none;
}

/* 「半角英数」バッジは確認画面ではラベルの隣に置く（列幅いっぱいに伸ばさない） */
.snow-monkey-form[data-screen="confirm"] .smf-item__label--stack {
  grid-auto-flow: column;
  justify-content: start;
  align-items: center;
  gap: 8px;
}

/* 確認画面では未入力の希望日（第二希望など）を出さない。
   SMFは未入力でも hidden input を value="" で残すのでそれを判定に使う */
/* 見出し（第二希望）は現行と同じく残し、空の 年/月/日 だけ隠す */
.snow-monkey-form[data-screen="confirm"] .smf-date-group:has(input[name$="_year"][value=""]):has(input[name$="_month"][value=""]):has(input[name$="_day"][value=""]) .smf-date-row {
  display: none;
}

/* 現行の確認・完了ページには英語見出し（Reservation）が無い */
.contact-form-section:has([data-screen="confirm"]) .contact-section-heading__en,
.contact-form-section:has([data-screen="complete"]) .contact-section-heading__en {
  display: none;
}

/* 確認画面のボタン余白（.contact-buttons--confirm 相当） */
.snow-monkey-form[data-screen="confirm"] .smf-action,
.snow-monkey-form[data-screen="complete"] .smf-action {
  margin-top: 28px;
}

@media (max-width: 767px) {
  /* SPの確認・完了画面はボタンを縦積み・横幅いっぱいで表示（Figma 2628-318）。
     各ボタンは高さ52px・15px・字間1.2px */
  .snow-monkey-form[data-screen="confirm"] .smf-action,
  .snow-monkey-form[data-screen="complete"] .smf-action {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  /* ラッパーspanが幅を潰さないように */
  .snow-monkey-form[data-screen="confirm"] .smf-button-control,
  .snow-monkey-form[data-screen="complete"] .smf-button-control {
    display: flex;
  }

  .snow-monkey-form[data-screen="confirm"] .smf-button-control__control,
  .snow-monkey-form[data-screen="complete"] .smf-button-control__control {
    width: 100%;
    min-height: 52px;
    font-size: 15px;
    letter-spacing: 1.2px;
  }

  /* 送信ボタン（data-action="complete"）はFigmaどおりゴールド #B08E5A */
  .snow-monkey-form[data-screen="confirm"] .smf-button-control__control[data-action="complete"] {
    border-color: var(--color-brown06);
    background: var(--color-brown06);
  }
}

/* 確認画面はカード枠を .smf-form 側に移す。
   現行が「カード → 個人情報の注記 → ボタン」の並びで、注記とボタンが
   カードの外に出るため（注記の移動は assets/js/smf.js が行う） */
.snow-monkey-form[data-screen="confirm"] {
  width: min(100%, 800px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* .contact-confirm-card 相当 */
.snow-monkey-form[data-screen="confirm"] .smf-form {
  padding: 28px 48px;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  background: var(--color-white);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}

/* .contact-confirm-row 相当（区切り線が入力画面より少し濃く、最終行は無し） */
.snow-monkey-form[data-screen="confirm"] .smf-item {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

.snow-monkey-form[data-screen="confirm"] .smf-item:last-of-type {
  border-bottom: 0;
}

.snow-monkey-form[data-screen="confirm"] .smf-privacy--confirm {
  margin-top: 32px;
}

@media (max-width: 767px) {
  .snow-monkey-form[data-screen="confirm"] {
    width: 335px;
    max-width: 100%;
  }

  .snow-monkey-form[data-screen="confirm"] .smf-form {
    padding: 20px 20px 24px;
    border-radius: 16px;
  }
}

/* 確認画面は入力欄が無く値のテキストだけになるので、年/月/日の間隔を詰める */
.snow-monkey-form[data-screen="confirm"] .smf-date-row {
  gap: 0;
}

.snow-monkey-form[data-screen="confirm"] .smf-date-row .smf-placeholder + span {
  margin-right: 6px;
}

/* ---- 完了画面 ---- */
/* 完了画面はカード枠を .contact-complete-card 側が持つので
   フォーム自体の枠は外す */
.snow-monkey-form[data-screen="complete"] {
  width: min(100%, 800px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.snow-monkey-form[data-screen="complete"] .smf-form {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}