@charset "UTF-8";
/* ============================================================
   reserve.css ― 初診カウンセリングのご予約（予約フォーム）
   色は tokens.css の変数のみ。背景を書いたら必ず同じ規則で文字色も書く。
   ⚠ 送信処理は未実装（handoff/RESERVE_SPEC.md）。ここは画面だけ。
   ============================================================ */

/* 読み物ページの縦余白（引き渡しの clamp。3ページ共通なので
   将来 base.css の .l-section--read に集約したい ― 報告済み） */
.p-reserve-body {
  padding-block: var(--sp-page-top) var(--sp-page-btm);
}

.p-reserve-lead {
  margin-bottom: 56px;
  font-size: 14.5px;
  line-height: 2.3;
  letter-spacing: 0.06em;
  color: var(--c-ink-mid);
}

/* ------------------------------------------------------------
   フォーム本体
   ------------------------------------------------------------ */
.p-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ハニーポット（RESERVE_SPEC 5-1）
   ⚠ display:none にしない。画面外へ出して1pxに切り取る。
     親 .p-form に .u-anchor（position:relative）が付いていないと
     包含ブロックがビューポートになり横あふれの原因になる。 */
.p-form__hp {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.p-form__field { min-width: 0; }

/* --- ラベル ------------------------------------------------- */
.p-form__label {
  display: block;
  margin-bottom: 8px;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  color: var(--c-ink-strong);
}

/* 「必須」は文字として置く。色や記号だけに頼らない */
.p-form__req {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  border: 1px solid var(--c-brand);
  border-radius: var(--radius);
  background: transparent;
  color: var(--c-brand);          /* base上 7.70:1 */
  font-size: 12.5px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* --- 入力欄 ------------------------------------------------- */
.p-form__input {
  display: block;
  width: 100%;
  padding: 13px 14px;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--c-card);
  color: var(--c-ink);            /* card上 12.25:1 */
  font-family: var(--f-gothic);
  font-size: 16px;                /* 16px未満にしない（iOSの自動ズーム対策も兼ねる） */
  line-height: 1.6;
  min-height: 44px;               /* タップ領域 */
}
.p-form__input::placeholder { color: var(--c-ink-weak); }
/* フォーカスは base.css の :focus-visible（2px outline）が出る。
   ⚠ outline:none を書かない。枠線の色だけを足す。 */
.p-form__input:focus-visible { border-color: var(--c-brand); }

.p-form__select { padding-block: 12px; }
.p-form__date   { padding-block: 12px; }
.p-form__textarea {
  line-height: 1.9;
  resize: vertical;
  min-height: 140px;
}

/* --- 補足文 ------------------------------------------------- */
.p-form__note {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--c-ink-weak);       /* base上 4.53:1 */
}
/* 希望日3つの共通の補足。休診日を選ぶと site.js が文言を差し替える */
.p-form__note--date { margin-top: -20px; }

/* --- ラジオ・チェックボックスのまとまり --------------------- */
.p-form__fieldset {
  margin: 0;
  padding: 18px 22px 20px;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--c-card);
  color: var(--c-ink);
}
.p-form__legend {
  padding: 0 8px;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  color: var(--c-ink-strong);     /* card上 14.70:1 */
}
.p-form__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}
.p-form__choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;               /* タップ領域 */
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--c-ink);            /* card上 12.25:1 */
  cursor: pointer;
}
.p-form__choice input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--c-brand);
}
.p-form__choice--agree { align-items: center; }

/* --- 送信ボタン --------------------------------------------- */
.p-form__submit {
  width: 100%;
  max-width: 360px;
  margin: 12px auto 0;
  padding: 18px 24px;
  border: none;
  font-weight: 700;
  letter-spacing: var(--ls-mincho-wide);
  /* 背景と文字色は .c-btn--cta（--grad-cta ＋ --c-on-dark）で対になっている */
}

/* ------------------------------------------------------------
   電話でのご予約（フォームの下）
   ------------------------------------------------------------ */
.p-reserve-tel {
  margin-top: 56px;
  padding: 32px 24px;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--c-card);
  color: var(--c-ink);
  text-align: center;
}
.p-reserve-tel__head {
  margin-bottom: 12px;
  font-size: 13.5px;
  letter-spacing: 0.08em;
  color: var(--c-ink-mid);        /* card上 8.29:1 */
}
.p-reserve-tel__num {
  display: inline-block;
  font-family: var(--f-latin);
  font-size: 26px;
  letter-spacing: 0.06em;
  color: var(--c-brand);          /* card上 8.16:1 */
  text-decoration: none;
}
.p-reserve-tel__num:hover { color: var(--c-brand-hover); }
.p-reserve-tel__note {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.08em;
}