/* =============================================================
   reservation.css — reservation / confirm / thanks 共通スタイル
   ============================================================= */

/* ----------------------------------------------------------------
   粒子の上に半透明の膜（panel::before と同じ考え方）
   position:fixed でページ全体を覆う
   ---------------------------------------------------------------- */
/* reservation / confirm ページのみ固定膜。
   thanks は panel::before に任せる（コンテンツがぼやけるため） */
body.reservation-page:not(.thanks-page)::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(38, 46, 56, 0.48);
  backdrop-filter: blur(1.5px);
  z-index: 1;
  pointer-events: none;
}

/* reservation/confirm ページ: body のwindowスクロールを封じて内部慣性スクロールを有効にする */
body.reservation-page.is-scrollable {
  overflow: hidden;
}

/* SP ネイティブ縦スクロール抑止 (concept / plate と同じ touch-action: none を出すための明示)。
   structure / membership と同じ理由: HTML 側の wrapper に panel / hero class
   が付いていない作りなので、 base.css の .panel { touch-action: none } が効いて
   いない。 これが無いと SP で content drag が contentMax 端に達した瞬間に
   ブラウザのネイティブ touch panning が動いて、 footer snap の判定タイミングが
   競合する。
   .reservationPage は reservation/index、 #confirmPage は reservation/confirm/index
   の viewport id。
   SP @media に閉じ込めて PC では一切付けない (PC のハンバーガークリック等への
   touch-action 影響を排除)。 SP 入力ページは下方の :not(.is-confirm) で touch-action: pan-y に
   上書きされる。 */
@media (max-width: 768px) {
  .reservationPage,
  #confirmPage {
    touch-action: none;
  }
}

/* reservation/confirm/thanks: siteMenu を is-copy-visible と同タイミングで表示
   （is-scrollable が遅れて付与されるページでも copyright/SNS と揃える） */
body.reservation-page.is-copy-visible .siteMenu,
body.thanks-page.is-copy-visible .siteMenu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ----------------------------------------------------------------
   siteMenu: ハンバーガーボタンのデフォルトスタイルリセット
   ---------------------------------------------------------------- */
body.reservation-page .siteMenu__button--hamburger {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  outline: none;
}

/* Reservation 非アクティブ（reservation / confirm）*/
.siteMenu__reservation.is-disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.38;
  user-select: none;
}

/* ----------------------------------------------------------------
   reservationPage: 内部慣性スクロール
   reservationPage が viewport（height:100vh / overflow:hidden）
   reservationPage__inner を transform で動かす
   z-index:2 で膜の上に出す
   ---------------------------------------------------------------- */
.reservationPage {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.reservationPage__inner {
  width: 100%;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* content 領域: padding/max-width はここ。 footer panel 地が見えないよう min-height 確保 */
.reservationPage__content {
  width: 100%;
  padding-left: 148px;
  padding-right: 28px;
  padding-top: 120px;
  padding-bottom: 12vh;
  box-sizing: border-box;
  max-width: 900px;
  min-height: 100vh;
}

/* ----------------------------------------------------------------
   reservationHeader
   ---------------------------------------------------------------- */
.reservationHeader {
  margin-bottom: 80px;
}

/* RESERVATION 遷移時の生テキストちら見え防止
   split / 初期化完了後に body.is-reservation-intro-ready を付与して解放 */
.reservationHeader {
  opacity: 0;
  visibility: hidden;
}

body.is-reservation-intro-ready .reservationHeader {
  opacity: 1;
  visibility: visible;
}

.reservationHeader__title {
  margin: 0;
  color: var(--title-color);
  font-size: clamp(44px, 5.8vw, 76px);
  line-height: 0.94;
  font-weight: 700;
  letter-spacing: -0.055em;
}

.reservationHeader__lead {
  margin: 18px 0 0;
  color: rgba(208, 216, 226, 0.78);
  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "Noto Serif JP",
    serif;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0.06em;
  opacity: 0;
}

.reservationHeader__note {
  margin: 28px 0 0;
  font-size: 14px;
  letter-spacing: 0.03em;
  color: rgba(208, 216, 226, 0.62);
  line-height: 1.8;
  font-weight: 400;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.reservationHeader__note.is-visible { opacity: 1; }

/* ----------------------------------------------------------------
   reservationBlock
   hidden 属性で DOM から除外 → showBlock で hidden=false + is-visible
   ---------------------------------------------------------------- */
.reservationBlock {
  margin-bottom: 80px;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* hidden 属性がある間は完全非表示 */
.reservationBlock[hidden] { display: none; }

/* is-visible が付いたらフェードイン完了状態 */
.reservationBlock.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reservationBlock__label {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(142, 152, 163, 0.38);
  margin: 0 0 24px;
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
/* 番号 (01 / 02 / 03) - concept の .conceptScene__label-num と同一スタイル */
.reservationBlock__labelNum {
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.14em;
  color: #b4c7dc;
  font-weight: 400;
}
/* 英ラベル (Date / Time / Details) - concept の .conceptScene__label-en と同一スタイル */
.reservationBlock__labelEn {
  font-size: 10px;
  letter-spacing: 0.20em;
  color: rgba(214, 224, 234, 0.28);
  font-weight: 300;
  text-transform: uppercase;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

/* ----------------------------------------------------------------
   Calendar
   ---------------------------------------------------------------- */
.calendar { user-select: none; }

.calendar__nav {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 28px;
}

.calendar__navBtn {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: rgba(142, 152, 163, 0.48);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.25s ease;
}

.calendar__navBtn:hover   { color: var(--text); }
.calendar__navBtn:disabled { opacity: 0.2; cursor: default; }

.calendar__month {
  font-size: 13px;
  letter-spacing: 0.14em;
  color: rgba(142, 152, 163, 0.66);
  font-weight: 600;
}

.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  max-width: 490px;
}

.calendar__weekday {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(142, 152, 163, 0.3);
  text-align: center;
  padding-bottom: 10px;
  text-transform: uppercase;
}

.calendar__day          { position: relative; aspect-ratio: 1; }
.calendar__dayInner     { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

.calendar__dayNum {
  position: relative;
  z-index: 2;
  font-size: 12px;
  color: rgba(142, 152, 163, 0.22);
  line-height: 1;
  pointer-events: none;
}

.calendar__day--empty .calendar__dayNum,
.calendar__day--past  .calendar__dayNum  { color: rgba(142, 152, 163, 0.12); }

.calendar__day--closed .calendar__dayNum { color: rgba(142, 152, 163, 0.32); }
.calendar__day--closed .calendar__dayInner::before {
  content: "";
  position: absolute;
  inset: 12%;
  background: repeating-linear-gradient(
    -45deg,
    rgba(142,152,163,0.16) 0px, rgba(142,152,163,0.16) 1px,
    transparent 1px, transparent 5px
  );
  border-radius: 2px;
}

/* Full: 選択不可 / Not available に近いトーン
   ただし斜線ではなく中央の小 dot で区別する */
.calendar__day--full {
  cursor: default;
}
.calendar__day--full .calendar__dayNum {
  color: rgba(142, 152, 163, 0.42);
  font-weight: 400;
}

/* FULL表示: 数字の代わりに表示するラベル */
.calendar__dayFull {
  position: relative;
  z-index: 2;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(142, 152, 163, 0.46);
  line-height: 1;
  pointer-events: none;
  text-indent: 0.08em;
  text-align: center;
}

/* FULLマスの薄いグレー背景（insetで周囲と同じサイズ感に） */
.calendar__day--full .calendar__dayInner::before {
  content: "";
  position: absolute;
  inset: 12%;
  background: rgba(208, 216, 226, 0.025);
  border-radius: 2px;
}

/* 時間軸で全枠 CLOSED の日（24h 切り / FULL と CLOSED の混在 など、
   スケジュール上は open だが当日予約不可）。
   クリックで時間帯を見せるのは FULL と同じだが、意味を分けるため別クラス。 */
.calendar__day--timeclosed {
  cursor: default;
}
.calendar__day--timeclosed .calendar__dayInner::before {
  content: "";
  position: absolute;
  inset: 12%;
  background: rgba(208, 216, 226, 0.018);
  border-radius: 2px;
}
.calendar__dayClosed {
  position: relative;
  z-index: 2;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(142, 152, 163, 0.38);
  line-height: 1;
  pointer-events: none;
  text-indent: 0.06em;
  text-align: center;
}

/* ----------------------------------------------------------------
   特別ラベル日 (TOKEN LIMITED / MEMBER ONLY / EVENT)
   日付数字の代わりに 1〜2 行のラベル文字を表示。 クリック不可。
   ---------------------------------------------------------------- */

.calendar__day--labeled {
  cursor: default;
}

/* 共通: ラベル日マスの薄い背景 (FULL と同じ trim 値で統一) */
.calendar__day--labeled .calendar__dayInner::before {
  content: "";
  position: absolute;
  inset: 12%;
  background: rgba(208, 216, 226, 0.025);
  border-radius: 2px;
}

/* ラベル文字 (1〜2 行 共通の base、 FULL と同じ trim 値) */
.calendar__dayLabel {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  pointer-events: none;
  text-indent: 0.08em;
  text-align: center;
  gap: 2px;
  color: rgba(142, 152, 163, 0.46);
}

.calendar__dayLabel--two-line {
  font-size: 7.5px;
  letter-spacing: 0.06em;
  gap: 2px;
}

.calendar__dayLabelLine {
  display: block;
}

/* 凡例: Full アイコン（dotからfullマスと同じ見た目に） */
.calendar__legendFull {
  display: block;
  width: 12px;
  height: 12px;
  position: relative;
  flex-shrink: 0;
}

.calendar__legendFull::before {
  content: "";
  position: absolute;
  inset: 12%;
  background: rgba(208, 216, 226, 0.12);
  border-radius: 1px;
}

.calendar__day--open { cursor: pointer; }
.calendar__day--open .calendar__dayNum { color: rgba(190, 200, 212, 0.88); font-weight: 600; }

.calendar__vortex {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
}

.calendar__day--open:hover .calendar__vortex { opacity: 0.85; }
.calendar__day--open:hover .calendar__dayNum  { color: rgba(208,216,226,0.9); }

.calendar__day--selected .calendar__dayNum { color: #b4c7dc; font-weight: 600; }
.calendar__day--selected .calendar__vortex { opacity: 1; }

.calendar__selectionRing {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}

.calendar__selectionRing circle {
  fill: none;
  stroke: #b4c7dc;
  stroke-width: 1;
  filter: drop-shadow(0 0 4px rgba(180, 199, 220, 0.32));
}

.calendar__legend {
  display: flex;
  gap: 20px;
  margin-top: 18px;
  align-items: center;
}

.calendar__legendItem {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(142, 152, 163, 0.34);
}

/* Available 凡例のミニ vortex canvas */
.calendar__legendVortex {
  display: block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* ----------------------------------------------------------------
   Time Slots
   ---------------------------------------------------------------- */
.timeSlots {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.timeSlot {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(142,152,163,0.24);
  color: rgba(142,152,163,0.66);
  font-size: 12px;
  letter-spacing: 0.1em;
  padding: 10px 18px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.timeSlot:hover:not(:disabled) { border-color: rgba(142,152,163,0.52); color: var(--text); }
.timeSlot:disabled {
  opacity: 1;
  cursor: default;
  border-color: rgba(142,152,163,0.16);
  color: rgba(142,152,163,0.28);
}

/* FULL枠：通常disabled より少しだけ存在感を出す */
.timeSlot--full {
  border-color: rgba(142,152,163,0.18);
  color: rgba(142,152,163,0.34);
  font-size: 11px;
  letter-spacing: 0.06em;
}

/* CLOSED枠：開始まで24時間を切った枠。
   受付停止。クリック不可。見た目は unavailable 系の disabled に準ずる。 */
.timeSlot--closed {
  border-color: rgba(142,152,163,0.14);
  color: rgba(142,152,163,0.26);
  font-size: 11px;
  letter-spacing: 0.06em;
}

/* 特別ラベル枠 (TOKEN LIMITED / MEMBER ONLY / EVENT)
   時間 + 小さなラベルを横並び表示。 クリック不可、 disabled 見た目。
   trim 値は FULL と統一 (border / color)。 */
.timeSlot--labeled {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-color: rgba(142, 152, 163, 0.18);
  color: rgba(142, 152, 163, 0.34);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.timeSlot__time {
  display: inline-block;
}

.timeSlot__label {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 2px 7px;
  border: 1px solid rgba(142, 152, 163, 0.22);
  border-radius: 1px;
  white-space: nowrap;
  color: rgba(142, 152, 163, 0.46);
}

.timeSlot.is-selected {
  border-color: rgba(208,216,226,0.58);
  color: rgba(208,216,226,0.94);
  background: rgba(208,216,226,0.04);
  box-shadow: 0 0 10px rgba(208,216,226,0.07);
}

/* ----------------------------------------------------------------
   Form
   ---------------------------------------------------------------- */
.reservationForm { max-width: 100%; }

/* 自動入力の黄色背景を上書き */
.reservationForm__input:-webkit-autofill,
.reservationForm__input:-webkit-autofill:hover,
.reservationForm__input:-webkit-autofill:focus,
.reservationForm__select:-webkit-autofill,
.reservationForm__textarea:-webkit-autofill {
  -webkit-text-fill-color: rgba(208, 216, 226, 0.84) !important;
  -webkit-box-shadow: 0 0 0px 1000px #262e38 inset !important;
  box-shadow: 0 0 0px 1000px #262e38 inset !important;
  transition: background-color 9999s ease-in-out 0s;
  border-bottom-color: rgba(142, 152, 163, 0.2) !important;
}

.reservationForm__group    { margin-bottom: 26px; }

.reservationForm__label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(142,152,163,0.72);
  margin-bottom: 10px;
  font-weight: 500;
}

.reservationForm__required { font-size: 10px; color: rgba(142,152,163,0.44); letter-spacing: 0.08em; }
.reservationForm__optional { font-size: 10px; color: rgba(142,152,163,0.30); letter-spacing: 0.08em; }

.reservationForm__input,
.reservationForm__select,
.reservationForm__textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(142,152,163,0.2);
  border-radius: 0;
  color: rgba(208,216,226,0.84);
  font-size: 15px;
  font-family: inherit;
  padding: 8px 0;
  outline: none;
  transition: border-color 0.25s ease;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.reservationForm__input::placeholder,
.reservationForm__textarea::placeholder { color: rgba(142,152,163,0.24); }

.reservationForm__input:focus,
.reservationForm__select:focus,
.reservationForm__textarea:focus { border-bottom-color: rgba(142,152,163,0.56); }

.reservationForm__select { cursor: pointer; }
/* 未選択（disabled placeholder）の文字色を placeholder と揃える */
.reservationForm__select:invalid,
.reservationForm__select option[disabled] { color: rgba(142,152,163,0.24); }
.reservationForm__select option { background: #262e38; color: rgba(208,216,226,0.84); }

.reservationForm__textarea { resize: none; height: 68px; line-height: 1.7; }

/* 任意項目の上に表示する案内文 */
.reservationForm__optionalNote {
  margin: 0 0 28px;
  padding-top: 56px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(142,152,163,0.30);
  line-height: 1;
}

.reservationForm__divider {
  margin: 32px 0;
  border: none;
  border-top: 1px solid rgba(142,152,163,0.08);
}

/* 参加者ブロック（attendeesContainer）が空のとき divider を非表示 */
#attendeesContainer:empty + .reservationForm__divider {
  display: none;
}

/* divider が表示されているとき（参加者あり）は optionalNote の padding を減らす */
.reservationForm__divider + .reservationForm__optionalNote {
  padding-top: 24px;
}

/* 参加者ブロック */
.reservationForm__attendee {
  margin-bottom: 28px;
  padding: 20px 20px 4px;
  border-left: 1px solid rgba(142,152,163,0.14);
}

.reservationForm__attendeeLabel {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(142,152,163,0.36);
  text-transform: uppercase;
  margin: 0 0 18px;
}

.reservationForm__error {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(208,152,152,0.88);
  margin: 0 0 24px;
  line-height: 1.8;
  white-space: pre-line;
}

.reservationForm__actions { margin-top: 40px; }

/* --- 確認画面へ進む ボタン（lineButton 共通仕様） --- */
.reservationForm__submit {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;            /* 線をボタン内部に閉じ込める */
  width: 100%;                  /* contact 合わせ: 横幅いっぱい */
  min-height: 56px;             /* contact 合わせ */
  padding: 0 24px;
  border: 0;
  background: var(--line-button-bg);
  color: var(--line-button-text);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.07em;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  text-transform: uppercase;
  transition: color 0.22s ease, background 0.24s ease;
  -webkit-font-smoothing: antialiased;
}

.reservationForm__submit:hover:not(:disabled) {
  color: var(--line-button-text-hover);
  background: transparent;
}

.reservationForm__submit:hover:not(:disabled) .lineButton__stroke {
  background: var(--line-button-stroke-hover);
}

.reservationForm__submit:disabled { opacity: 0.28; cursor: default; }

/* disabled 時: ui.css の `.lineButton:hover .lineButton__edge--*  .lineButton__mask`
   による線アニメーションを抑止する (contact と同じ抑止ルール) */
.reservationForm__submit:disabled:hover .lineButton__edge--top    .lineButton__mask,
.reservationForm__submit:disabled:hover .lineButton__edge--right  .lineButton__mask,
.reservationForm__submit:disabled:hover .lineButton__edge--bottom .lineButton__mask,
.reservationForm__submit:disabled:hover .lineButton__edge--left   .lineButton__mask {
  transform: translate(0, 0);
  transition: none;
}

/* ----------------------------------------------------------------
   Confirm
   ---------------------------------------------------------------- */
.reservationBlock--confirm {
  max-width: 540px;
  padding-bottom: 40px; /* ボタンが viewport 下端に張り付かないよう余白 */
}

.reservationConfirm__list {
  margin: 0 0 40px;
  padding: 0;
  display: grid;
  /* label 列幅: 12 文字 (= 「アレルギー・食事制限」 / 「予約時のメールアドレス」 等の
     最長想定 label) が確実に折り返さない幅。
     計算: 13px × 12 文字 + letter-spacing 0.06em × 11 間 + padding-right 16px ≈ 180.6px。
     pixel round 込みで 180px とする (値列 = 1fr に余白を譲る)。 */
  grid-template-columns: 180px 1fr;
}

.reservationConfirm__term,
.reservationConfirm__desc {
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px solid rgba(142,152,163,0.08);
  font-size: 13px;
  line-height: 1.7;
}

.reservationConfirm__list dt:first-of-type,
.reservationConfirm__list dd:first-of-type {
  border-top: 1px solid rgba(142,152,163,0.08);
}

.reservationConfirm__term {
  color: rgba(142,152,163,0.46);
  letter-spacing: 0.06em;
  padding-right: 16px;
}

.reservationConfirm__desc { color: rgba(208,216,226,0.78); }

.reservationConfirm__desc--highlight {
  color: rgba(208,216,226,0.94);
  font-weight: 600;
}

.reservationConfirm__actions {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.reservationConfirm__back {
  appearance: none;
  background: transparent;
  border: none;
  color: rgba(208, 216, 226, 0.55);
  font-size: 12px;
  letter-spacing: 0.10em;
  cursor: pointer;
  padding: 8px 16px;
  font-family: inherit;
  transition: color 0.3s ease;
}

.reservationConfirm__back:hover:not(:disabled) {
  color: rgba(208, 216, 226, 0.90);
}
.reservationConfirm__back:disabled { opacity: 0.2; cursor: default; }

/* --- 予約するボタン（lineButton 共通仕様） --- */
.reservationConfirm__submit {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;                  /* contact 合わせ: 横幅いっぱい */
  min-height: 56px;             /* contact 合わせ */
  padding: 0 24px;
  border: 0;
  background: var(--line-button-bg);
  color: var(--line-button-text);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.07em;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.22s ease, background 0.24s ease;
  -webkit-font-smoothing: antialiased;
}

.reservationConfirm__submit:hover:not(:disabled) {
  color: var(--line-button-text-hover);
  background: transparent;
}

.reservationConfirm__submit:hover:not(:disabled) .lineButton__stroke {
  background: var(--line-button-stroke-hover);
}

.reservationConfirm__submit:disabled { opacity: 0.28; cursor: default; }

/* disabled 時: ui.css の `.lineButton:hover .lineButton__edge--*  .lineButton__mask`
   による線アニメーションを抑止する (contact / 入力ページと一貫性) */
.reservationConfirm__submit:disabled:hover .lineButton__edge--top    .lineButton__mask,
.reservationConfirm__submit:disabled:hover .lineButton__edge--right  .lineButton__mask,
.reservationConfirm__submit:disabled:hover .lineButton__edge--bottom .lineButton__mask,
.reservationConfirm__submit:disabled:hover .lineButton__edge--left   .lineButton__mask {
  transform: translate(0, 0);
  transition: none;
}

/* ----------------------------------------------------------------
   Thanks メインエリア
   panel__inner を使ってトップ下層と同じ左基準線（148px）で揃える
   ---------------------------------------------------------------- */
.thanks__main {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

/* panel クラスの backdrop-filter:blur を thanks では無効化 */
.thanks__main::before {
  backdrop-filter: none !important;
  background: rgba(38, 46, 56, 0.36) !important;
}

/* ちら見え防止: thanks-page では #thanks-main の panel__inner を
   最初から完全に隠す。アニメーション開始直前（JS側）で解放する。 */
body.thanks-page #thanks-main .panel__inner {
  opacity: 0;
  visibility: hidden;
}

body.thanks-page.is-thanks-ready #thanks-main .panel__inner {
  visibility: visible;
  /* opacity は JS の animateGlyphs が個別制御するため触らない */
}

/* リード: Complete タイトルの左端に面合わせ
   glyph__space の inline 幅が先頭に出る問題を防ぐため
   textMotion 全体を block で押さえ、margin-left を 0 固定 */
.thanks__main .panel__lead {
  width: 100%;
  max-width: none;
  margin-left: 0;
  padding-left: 0;
  text-align: left;
}

.thanks__main .panel__lead .textMotion,
.thanks__main .panel__lead .textMotion--panel {
  display: block !important;
  width: 100% !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-align: left !important;
}

.thanks__main .panel__lead .textMotion__line {
  display: block !important;
  white-space: normal !important;
  text-align: left !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* glyph__word の先頭スペースを潰す */
.thanks__main .panel__lead .textMotion__line > .glyph__word:first-child,
.thanks__main .panel__lead .textMotion__line > .glyph__space:first-child {
  margin-left: 0;
  padding-left: 0;
}

.thanks__main .panel__lead .glyph__word {
  display: inline-block;
  white-space: nowrap;
}

.thanks__main .panel__lead .glyph,
.thanks__main .panel__lead .glyph__char {
  display: inline-block;
}

/* thanksBlock: 本文・戻るリンク */
.thanksBlock {
  max-width: 540px;
  margin-top: 48px;
  opacity: 0; /* JS (thanks.js) でフェードイン */
}

/* チェックアイコン非表示 */
.thanksBlock__icon {
  display: none;
}

.thanksBlock__body {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(208, 216, 226, 0.62);
  margin: 0 0 10px;
  letter-spacing: 0.03em;
  font-weight: 400;
}

/* --- Return to site ボタン（lineButton 共通仕様） --- */
.thanksBlock__back {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-width: 220px;
  min-height: 44px;
  padding: 0 24px;
  border: 0;
  background: var(--line-button-bg);
  color: var(--line-button-text);
  text-decoration: none;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.07em;
  font-weight: 600;
  white-space: nowrap;
  text-transform: uppercase;
  transition: color 0.22s ease, background 0.24s ease;
  -webkit-font-smoothing: antialiased;
  margin-top: 36px;
}

.thanksBlock__back:hover {
  color: var(--line-button-text-hover);
  background: transparent;
}

.thanksBlock__back:hover .lineButton__stroke {
  background: var(--line-button-stroke-hover);
}

/* ----------------------------------------------------------------
   Thanks フッター
   トップの panel--footer と完全同一構造を使用。
   panel--footer / panel__inner--footer / footerPanel の CSS は
   footer.css に定義済みのためここでは上書きのみ。
   ---------------------------------------------------------------- */

/* Thanks フッター: #thanks-footer 全体を初期非表示。
   is-footer-active が付いたときにフェードイン表示する。
   footerPanel__head / siteFooterBlock を個別に制御するより
   セクション全体を隠すほうが確実。 */
#thanks-footer .footerPanel {
  opacity: 0;
  transition: opacity 0.6s ease;
}

body.is-footer-active #thanks-footer .footerPanel {
  opacity: 1;
}

/* form 系 thanks: panel 遷移を canNavigate: false で停止しているため
   is-footer-active が永遠に付かず、 親 .footerPanel が opacity: 0 のまま。
   親の不透明度が子 (copy/sns) の opacity 1 に乗算で当たって結果 0 になり
   CSNS が表示できない事故を防ぐため、 thanks ページでは親を opacity: 1 にする。
   panel 中身の head/siteFooterBlock は `body.reservation-page .footerPanel__head/siteFooterBlock`
   側で `display: none !important` 済みなので、 親 opacity: 1 にしても見えるのは
   copy/sns だけ (子側の opacity 制御に従う)。 */
body.thanks-page #thanks-footer .footerPanel {
  opacity: 1;
}

/* thanks: top page HERO と同じく、 ページアクセス時から copy/sns を fade in 表示。
   form の途中ではないので scroll 連動などせず単純に出すだけ。
   - 既存の `#thanks-footer .footerPanel__copy { display: none }` を上書きして可視化。
   - opacity は thanks.js が 600ms で付ける `is-copy-visible` 連動で 0→1 に遷移。
   - PanelScroll は window.scrollTo ベースで transform 不使用 → #thanks-footer 内部の
     position: fixed が viewport 基準で正しく動き、 左下 / 右下 corner に出る。 */
body.thanks-page #thanks-footer .footerPanel__copy {
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
body.thanks-page #thanks-footer .footerPanel__sns {
  display: flex;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
body.thanks-page.is-copy-visible #thanks-footer .footerPanel__copy,
body.thanks-page.is-copy-visible #thanks-footer .footerPanel__sns {
  opacity: 1;
  pointer-events: auto;
}

/* panel--footer の backdrop-filter:blur を thanks では解除
   （blur が残るとフッター内テキストがぼやける） */
#thanks-footer::before {
  backdrop-filter: none !important;
}

/* ----------------------------------------------------------------
   reservation 入力 / 確認 ページの footer panel
   (contact と同等: 慣性 inner 内に並列配置)
   ---------------------------------------------------------------- */
.reservationPage__footer { margin-top: 0; }
.reservationPage__footer .siteFooterBlock { opacity: 0; }
.reservationPage__footer .footerPanel__copy,
.reservationPage__footer .footerPanel__sns {
  display: none !important;
}

/* 確認画面: 中身が短くて min-height: 100vh を取ると入力画面より余白が広くなるので、
   確認画面では min-height を打ち消して入力画面と同じ余白に揃える。
   さらに「修正する」ボタンと gap が下に空間を取るぶん padding-bottom を減らして、
   「上記の内容で予約する」ボタン下から画面下端までの距離を入力画面と同じにする */
body.is-confirm .reservationPage__content {
  min-height: 0 !important;
  padding-bottom: calc(22vh - 9px - 170px);
}

/* ----------------------------------------------------------------
   Logo（reservation ページ全体で縮小）
   ---------------------------------------------------------------- */
body.reservation-page .siteMark {
  transform: translate3d(-8px, -8px, 0) scale(0.7667);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.9s ease;
}

body.reservation-page:not(.is-logo-visible) .siteMark {
  opacity: 0;
  transform: translate3d(-8px, 8px, 0) scale(0.7667);
}

body.reservation-page.is-logo-visible .siteMark {
  opacity: 1;
  transform: translate3d(-8px, -8px, 0) scale(0.7667);
}

/* ----------------------------------------------------------------
   フォーム系ページ (reservation 入力 / 確認 / thanks) の footer 取り扱い。
   
   方針:
     - Info フッター本文 (.footerPanel__head と .siteFooterBlock) は表示しない。
     - .footerPanel 自体は残す (= body 直下の独立 mount された copy/sns 用に
       class scope を維持する目的)。
     - .reservationPage__footer ラッパーは高さ 0 まで潰して空フッター領域を作らない。
     - copy/sns はページ途中では非表示、 ページ最下部付近 (= IO で
       is-form-bottom が body に付いた時) のみフェードイン。
     - footer snap は JS 側で全停止 (reservation.js / confirm.js)。

   通常ページ (concept / structure / plate / membership / 外ページ全般) の
   footer 挙動には触らない (body.reservation-page スコープに限定)。 ---------------------------------------------------------------- */

/* Info 本文を非表示 (head + siteFooterBlock)。 .footerPanel 自体は残す。 */
body.reservation-page .footerPanel__head,
body.reservation-page .siteFooterBlock {
  display: none !important;
}

/* footer wrapper を潰す (空白領域を残さない)。
   .reservationPage__footer は input / confirm の wrapper で、
   実際は `panel panel--footer` class を兼ね、 さらに内部に
   `.panel__inner panel__inner--footer` が入っている (footer.css 参照)。
   wrapper 自体だけ collapse しても内部の panel__inner--footer SP padding (120px top)
   と panel--footer の独自背景 (#171f28、 var(--bg) より暗い) が dark band として
   visual に残るので、 三段階すべて潰す。
   #thanks-footer は別構造なので影響しない。 */
body.reservation-page .reservationPage__footer {
  min-height: 0 !important;
  padding: 0 !important;
}
body.reservation-page .reservationPage__footer .panel__inner,
body.reservation-page .reservationPage__footer .panel__inner--footer {
  min-height: 0 !important;
  padding: 0 !important;
}
body.reservation-page .reservationPage__footer .footerPanel {
  min-height: 0 !important;
  padding: 0 !important;
}
/* panel--footer の独自背景 (#171f28) を form 系では透明化。
   wrapper 自体に panel--footer class がある場合と、 wrapper 配下に panel--footer 要素
   がある場合の両方に対応。 */
body.reservation-page .reservationPage__footer.panel--footer,
body.reservation-page .reservationPage__footer .panel--footer {
  background: transparent !important;
  min-height: 0 !important;
}

/* Copyright / SNS のスクロール連動表示 (input / confirm の SP のみ。 thanks は除外)。
   PC では footer.css の `body.is-copy-visible .footerPanel__copy { opacity: 1 }`
   (@media >= 769px) に任せて、 ロード時 fade in したらそのまま常時表示。
   SP のみ form の途中で非表示 → 末端で is-form-bottom 付与時に visible。 */
@media (max-width: 768px) {
  body.reservation-page:not(.thanks-page):not(.is-form-bottom) .footerPanel__copy,
  body.reservation-page:not(.thanks-page):not(.is-form-bottom) .footerPanel__sns {
    opacity: 0;
    pointer-events: none;
  }
  body.reservation-page:not(.thanks-page).is-form-bottom .footerPanel__copy,
  body.reservation-page:not(.thanks-page).is-form-bottom .footerPanel__sns {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ----------------------------------------------------------------
   ラジオグループ（アレルギー分岐・お酒）
   ---------------------------------------------------------------- */
.reservationForm__radioGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 2px 0;
}

.reservationForm__radioLabel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: rgba(208, 216, 226, 0.62);
  cursor: pointer;
  padding: 6px 20px 6px 0;
  letter-spacing: 0.03em;
}

/* ラジオ：細線の円のみ、選択時に内側ドット */
.reservationForm__radio {
  appearance: none;
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(142, 152, 163, 0.3);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.2s ease;
  margin: 0;
}

.reservationForm__radio:checked {
  border-color: rgba(208, 216, 226, 0.54);
}

.reservationForm__radio:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  background: rgba(208, 216, 226, 0.72);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* ----------------------------------------------------------------
   コミュニティニーズ checkbox 群
   ---------------------------------------------------------------- */

/* 項目下の補足説明文 (label と checkbox 群の間) */
.reservationForm__helpText {
  margin: 4px 0 12px;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(208, 216, 226, 0.48);
  letter-spacing: 0.04em;
}

/* checkbox 群: 11 項目 + 長文ラベルなので縦並び。 各行は左寄せ。 */
.reservationForm__checkGroup {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 2px 0;
}

.reservationForm__checkLabel {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(208, 216, 226, 0.62);
  cursor: pointer;
  padding: 7px 0;
  letter-spacing: 0.03em;
}

/* チェックボックス: 細線の正方形、 選択時にチェックマーク */
.reservationForm__check {
  appearance: none;
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(142, 152, 163, 0.3);
  border-radius: 1px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.2s ease;
  margin: 4px 0 0;
}

.reservationForm__check:checked {
  border-color: rgba(208, 216, 226, 0.54);
}

.reservationForm__check:checked::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 3px;
  width: 4px;
  height: 7px;
  border-right: 1px solid rgba(208, 216, 226, 0.84);
  border-bottom: 1px solid rgba(208, 216, 226, 0.84);
  transform: rotate(45deg);
}

/* ----------------------------------------------------------------
   同意導線
   ---------------------------------------------------------------- */

/* 囲み部分（確認事項） */
.reservationForm__consentWrap {
  margin-top: 52px;
  padding: 24px 22px;
  border: 1px solid rgba(142, 152, 163, 0.14);
  background: rgba(20, 26, 33, 0.10);
}

.reservationForm__consentNote {
  margin: 0 0 16px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: rgba(208, 216, 226, 0.58);
}

.reservationForm__consentTitle {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(208, 216, 226, 0.78);
}

.reservationForm__consentNote {
  margin: 0 0 16px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: rgba(208, 216, 226, 0.58);
}

.reservationForm__consentList {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.reservationForm__consentList li {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(208, 216, 226, 0.44);
  padding-left: 14px;
  position: relative;
  letter-spacing: 0.02em;
}

.reservationForm__consentList li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: rgba(142, 152, 163, 0.2);
  font-size: 10px;
  top: 0.2em;
}

.reservationForm__consentLink {
  color: rgba(208, 216, 226, 0.38);
  text-decoration: underline;
  text-decoration-color: rgba(208, 216, 226, 0.14);
  text-underline-offset: 2px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.reservationForm__consentLink:hover {
  color: rgba(208, 216, 226, 0.58);
  text-decoration-color: rgba(208, 216, 226, 0.28);
}

/* チェックボックス行（囲みの外・直下） */
.reservationForm__consentCheck {
  margin-top: 26px;
}

.reservationForm__consentError {
  margin: 0;
  padding: 10px 0 0;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(208, 152, 152, 0.86);
  line-height: 1.6;
  min-height: 0;
}

.reservationForm__consentError:empty {
  display: none;
}

.reservationForm__consentLabel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(208, 216, 226, 0.56);
  cursor: pointer;
  letter-spacing: 0.04em;
  padding: 12px 0 0;
}

/* チェックボックス：細線の正方形、チェック時にL字（レ点） */
.reservationForm__consentInput {
  appearance: none;
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(142, 152, 163, 0.3);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.2s ease;
  margin: 0;
  border-radius: 0;
}

.reservationForm__consentInput:checked {
  border-color: rgba(208, 216, 226, 0.52);
}

/* レ点：左下を起点に右上へ斜め線 */
.reservationForm__consentInput:checked::after {
  content: "";
  position: absolute;
  left: 3px;
  bottom: 2px;
  width: 7px;
  height: 4px;
  border-left: 1px solid rgba(208, 216, 226, 0.7);
  border-bottom: 1px solid rgba(208, 216, 226, 0.7);
  transform: rotate(-45deg);
  transform-origin: left bottom;
}

/* ----------------------------------------------------------------
   SP
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  /* SP iOS Safari: input の font-size が 16px 未満だと focus 時に
     ページが自動ズームされて layout viewport が縮み、 ロゴが切れたり
     上方向のスクロール上限が詰まって見える現象になる。
     SP のみ 16px に上げて auto-zoom を抑止する (PC は 15px のまま)。 */
  .reservationForm__input,
  .reservationForm__select,
  .reservationForm__textarea {
    font-size: 16px;
  }

  /* ----------------------------------------------------------------
     reservation 入力ページ (= body.reservation-page かつ .is-confirm でない) の SP:
     transform 慣性スクロールから native 縦スクロールに切り替える。

     理由: iOS Safari は input フォーカス時に body { overflow: hidden } を無視して
     documentElement を勝手にスクロールし、 keyboard 解除後も完全に元位置に
     戻し切らない (実機で focusin: html.scrollTop = 307 → focusout: 40 残る を確認)。
     その結果「ロゴ被り位置までしか戻れない」症状が出る。
     JS 補正では root cause を解消できないため、 SP 入力ページは構造的に
     native 縦スクロール化する。

     確認ページ (body.is-confirm) と PC は元の慣性スクロールを維持する。
     JS 側 (reservation.js の IS_SP_INPUT) で touch / wheel / footer snap /
     inertia engine の transform 操作を SP のみ無効化済み。 ---------------------------------------------------------------- */
  body.reservation-page:not(.is-confirm) {
    overflow: visible !important;
    overflow-y: auto !important;
    height: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  body.reservation-page:not(.is-confirm) .reservationPage {
    height: auto;
    /* min-height: 100svh は撤去。 これがあると form が短い時に viewport まで強制で
       伸びて、 form 末尾と viewport 下端の間に dark empty band が見える。
       native scroll 化済みなので最小高さを強制する必要なし。 */
    min-height: 0;
    overflow: visible;
    /* 既存の touch-action: none を SP 入力ページだけ解除し、 native 縦パンを許可 */
    touch-action: pan-y;
  }
  body.reservation-page:not(.is-confirm) .reservationPage__inner {
    height: auto;
    min-height: 0;
  }
  body.reservation-page:not(.is-confirm) .reservationPage__content {
    /* 既存 .reservationPage__content { min-height: 100vh } を SP 入力ページでは
       打ち消す (空白領域防止)。 form の自然な高さで終わらせる。 */
    min-height: 0;
  }

  /* SP では footer (Info パネル) が viewport 全高を取るようにする。
     これが無いと .footerPanel { min-height: auto } の影響で footer 高さが
     viewport より小さくなり、 cTgt = cMax への snap 時に
     footer 上端が viewport top に揃わず、 上に余白が残る。

     .reservationPage は height: 100vh (= layout viewport、 iOS Safari では
     URL bar を含む大きい値) なので、 footer も同じ 100vh にする。
     ここで 100dvh (visible viewport、 URL bar を除いた小さい値) を
     使うと viewportEl.clientHeight (= 100vh) と footerH の単位が食い違い、
     その差分 (≈ URL bar 高さ) が snap 後に footer top の上余白として残る。

     ※ confirm ページ (慣性スクロール継続) のための値。
        入力ページ (native スクロール化) では下のオーバーライドで 100svh に切り替える。 */
  .reservationPage__footer {
    min-height: 100vh;
  }

  .reservationPage__content {
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 100px;
    padding-bottom: 9vh;
  }

  .reservationHeader { margin-bottom: 52px; }

  .reservationHeader__title { font-size: clamp(34px, 9vw, 56px); line-height: 0.96; }
  .reservationHeader__lead  {
    font-size: clamp(17px, 4.8vw, 20px);
    line-height: 1.65;
    letter-spacing: 0.04em;
  }

  .reservationBlock { margin-bottom: 56px; }

  .calendar__grid {
    max-width: 100%;
    width: 100%;
  }
  /* SP では calendar セルが viewport を超えて広がらないように min-width: 0 を保証
     (grid item デフォルトの min-content auto で計算される事故を避ける) */
  .calendar__day { min-width: 0; }
  .calendar__dayNum { font-size: 11px; }

  /* SP の reservation 入力ページで横方向のはみ出しを完全に防ぐ防御。
     PC→SP リサイズ時に inertia transform 残留や width 計算ズレで生じる
     横スクロール / カレンダーはみ出しを CSS 側で確実に止める。 */
  body.reservation-page:not(.is-confirm) {
    overflow-x: hidden !important;
  }
  body.reservation-page:not(.is-confirm) .reservationPage,
  body.reservation-page:not(.is-confirm) .reservationPage__inner {
    max-width: 100vw;
    overflow-x: hidden;
  }
  /* SP では .reservationPage__content の max-width: 900px を 100% に絞る
     (PC base の max-width が SP padding と組み合わさって余白計算がズレる事故を防ぐ) */
  body.reservation-page:not(.is-confirm) .reservationPage__content {
    max-width: 100%;
  }

  /* 特別ラベル日 SP: セルが小さいので文字とletter-spacingを少し詰める */
  .calendar__dayLabel {
    font-size: 7px;
    letter-spacing: 0.04em;
    gap: 1px;
  }
  .calendar__dayLabel--two-line {
    font-size: 6.5px;
    letter-spacing: 0.03em;
    gap: 1px;
  }

  .timeSlots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .timeSlot { font-size: 11px; padding: 9px 14px; text-align: center; }

  /* 特別ラベル枠 SP: grid 2 列内に時刻 + 小ラベルを縦に積む */
  .timeSlot--labeled {
    flex-direction: column;
    gap: 5px;
    padding: 8px 6px;
    font-size: 11px;
    letter-spacing: 0.04em;
  }
  .timeSlot__label {
    font-size: 8.5px;
    letter-spacing: 0.1em;
    padding: 1px 6px;
  }

  .reservationForm { max-width: 100%; }

  /* .reservationConfirm__list の grid は PC base (180px 1fr) を SP でも継続。
     旧: SP では 100px に絞っていたが、 「最近気になっていること」 (11 文字) /
     「アレルギー・食事制限」 (10 文字) などの長い label が折り返してしまうため、
     PC と同じ 180px に統一。 右の値領域は空きが多いので問題なし。 */

  .reservationConfirm__actions {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  /* thanks SP */
  .thanks__main .reservationHeader__title {
    font-size: clamp(34px, 9vw, 56px);
  }

  body.reservation-page .siteMark {
    transform: translate3d(-4px, -4px, 0) scale(0.5);
  }

  body.reservation-page:not(.is-logo-visible) .siteMark {
    transform: translate3d(-4px, 8px, 0) scale(0.5);
  }

  body.reservation-page.is-logo-visible .siteMark {
    transform: translate3d(-4px, -4px, 0) scale(0.5);
  }

  /* コミュニティニーズ checkbox 群 SP: 行間を少し詰めて縦長を抑える */
  .reservationForm__checkGroup {
    padding: 0;
  }
  .reservationForm__checkLabel {
    font-size: 13px;
    line-height: 1.55;
    padding: 6px 0;
  }
  .reservationForm__helpText {
    font-size: 11.5px;
    margin: 4px 0 10px;
    line-height: 1.65;
  }
}