/* 展示場来場予約フォーム専用。モックV7の表示を共通フォームへ波及させずに適用する。 */
.reservation-page {
  --ink: #1a1a1a;
  --sub: #595959;
  --line: #767676;
  --soft: #ccc;
  --red: #d5000e;
  --blue: #0055ad;
  --done-bg: #e8f0fe;
  --error-bg: #fff0f0;
  --blue-bg: #eef4fb;
  --scroll-offset: 120px;
  max-width: 808px;
  margin: 0 auto;
  padding: 0 16px 32px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
}
.reservation-page *, .reservation-page *::before, .reservation-page *::after { box-sizing: border-box; }

/* 表示切替・スクロール先。固定ヘッダーの下に見出しが隠れないようにする。 */
.reservation-page [hidden], #reservation-itab-modal[hidden] { display: none !important; }
.reservation-page .reservation-field, .reservation-page .reservation-block,
.reservation-page #reservation-confirm h2 { scroll-margin-top: var(--scroll-offset); }
/* ページ見出し・特典 */
.reservation-page .reservation-title {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .35em;
  margin: 16px 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--soft);
  font-size: 20px;
  line-height: 1.4;
}
.reservation-page .reservation-title small {
  flex-basis: 100%;
  margin-top: 4px;
  color: var(--sub);
  font-size: 13px;
  font-weight: 400;
}
.reservation-page .reservation-notice { margin: 10px 0; color: var(--sub); font-size: 13px; }
.reservation-page .reservation-benefit {
  position: relative;
  margin: 0 0 12px;
  padding: 13px 16px 14px 17px;
  background: var(--blue-bg);
}
.reservation-page .reservation-benefit-inner { position: relative; display: flex; flex-direction: column; gap: 4px; max-width: 343px; margin: 0 auto; }
.reservation-page .reservation-benefit-title { margin: 0; text-align: center; line-height: 1.45; }
.reservation-page .reservation-benefit-lead { display: block; font-size: 14px; font-weight: 700; }
.reservation-page .reservation-benefit-main { display: flex; justify-content: center; align-items: flex-end; gap: 16px; margin-top: -3px; }
.reservation-page .reservation-benefit-main strong { position: relative; color: var(--blue); font-size: 23px; font-weight: 900; }
.reservation-page .reservation-benefit-main > span { padding-bottom: 3px; font-size: 14px; font-weight: 700; }
.reservation-page .reservation-benefit-sparkle { position: absolute; }
.reservation-page .reservation-benefit-sparkle-left { top: 0; left: -17px; width: 17px; height: 17px; }
.reservation-page .reservation-benefit-sparkle-right { top: 14px; left: 100%; width: 15px; height: 16px; }
.reservation-page .reservation-benefit-sub {
  margin: 0;
  padding-top: 2px;
  text-align: center;
  color: #c0392b;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}
.reservation-page .reservation-benefit-steps { margin: 0; padding: 2px 0 0; list-style: none; }
.reservation-page .reservation-benefit-steps li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 2px 0 2px 5px;
  border-top: 1px dashed #cfd8e3;
}
.reservation-page .reservation-benefit-steps strong { color: var(--blue); font-size: 13px; white-space: nowrap; }
.reservation-page .reservation-benefit-steps span { font-size: 12px; }
.reservation-page .reservation-itab-intro { position: relative; min-height: 60px; margin: 4px auto 0; padding: 5px 110px 5px 22px; border-radius: 5px; background: #fff; max-width: 343px; }
.reservation-page .reservation-itab-intro p { margin: 0; font-size: 12px; line-height: 1.4; }
.reservation-page .reservation-itab-intro p span, .reservation-page .reservation-itab-intro p strong { display: block; }
.reservation-page .reservation-itab-intro p strong { white-space: nowrap; }
.reservation-page .reservation-itab-intro button {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  line-height: 1;
}
.reservation-page .reservation-itab-intro button svg { flex: none; width: 12px; height: 12px; }
.reservation-page .reservation-itab-intro img { position: absolute; right: 22px; bottom: 0; width: 100px; height: auto; }
.reservation-page .reservation-pc-only { display: none; }
.reservation-page .reservation-pc-row { display: contents; }

/* ①②③の番号カード */
.reservation-page .reservation-block {
  overflow: visible;
  margin: 16px 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
}
.reservation-page .reservation-block-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 12px 14px;
  border-bottom: 1px solid #e5e5e5;
  border-left: 5px solid var(--red);
  background: #f5f5f5;
  border-radius: 10px;
}
.reservation-page .reservation-number {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.reservation-page .reservation-block-head h2 { flex: 1; margin: 0; font-size: 17px; }
.reservation-page .reservation-status { margin-left: auto; color: var(--sub); font-size: 12px; white-space: nowrap; }
.reservation-page .reservation-block-body { padding: 14px; }
.reservation-page .reservation-block.is-locked { background: #f5f5f5; box-shadow: none; }
.reservation-page .reservation-block.is-locked .reservation-block-head { border-left-color: #bdbdbd; background: #efefef; }
.reservation-page .reservation-block.is-locked .reservation-number { background: #bdbdbd; }
.reservation-page .reservation-block.is-locked h2 { color: #8a8a8a; }
.reservation-page .reservation-block.is-complete .reservation-block-head { border-left-color: var(--blue); }
.reservation-page .reservation-block.is-complete .reservation-number { background: var(--blue); }
.reservation-page .reservation-block.is-complete .reservation-status { color: var(--blue); font-weight: 700; }
.reservation-page .reservation-fix {
  flex: none;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* 入力欄・エラー */
.reservation-page .reservation-field { margin-bottom: 20px; }
.reservation-page .reservation-field#f_comment { margin-bottom: 0 }
.reservation-page .reservation-label { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 700; }
.reservation-page .reservation-label em {
  display: inline-block;
  margin-left: 8px;
  padding: 0 5px;
  border: 1px solid var(--red);
  border-radius: 3px;
  background: #fff;
  color: var(--red);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  vertical-align: middle;
  position: relative;
  top: -.125em;
}
.reservation-page .reservation-label small {
  display: inline-block;
  margin-left: 8px;
  padding: 0 6px;
  border: 1px solid var(--soft);
  border-radius: 3px;
  color: var(--sub);
  font-size: 12px;
  font-weight: 400;
  vertical-align: middle;
  position: relative;
  top: -.125em;
}
.reservation-page .reservation-label-note { display: inline-block; margin-left: 8px; color: var(--sub); font-size: 12px; font-weight: 400; vertical-align: middle; position: relative; top: -.2em; }
.reservation-page .reservation-field input:not([type="checkbox"]):not([type="radio"]),
.reservation-page .reservation-field select, .reservation-page .reservation-field textarea {
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
}
.reservation-page .reservation-field textarea { width: 100%; display: block;}
/* 選択欄はブラウザ標準の矢印を消し、モックの12pxの下向き矢印を右端10pxに置く。 */
.reservation-page .reservation-field select {
  -webkit-appearance: none;
  appearance: none;
  padding-left: 16px;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.25 6 8.25l4-4' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
}
.reservation-page .reservation-pair { display: flex; gap: 10px; }
.reservation-page .reservation-pair label { flex: 1; min-width: 0; color: var(--sub); font-size: 12px; }
.reservation-page .reservation-pair input { width: 100% !important; }
.reservation-page .reservation-note, .reservation-page .reservation-feedback {
  margin: 6px 0;
  color: var(--sub);
  font-size: 12px;
}
.reservation-page .reservation-feedback { color: var(--blue); }
.reservation-page .reservation-specific { color: var(--red); }
.reservation-page .reservation-error { margin: 6px 0 0; color: var(--red); font-size: 13px; }
.reservation-page .reservation-field.is-invalid input,
.reservation-page .reservation-field.is-invalid select,
.reservation-page .reservation-field.is-invalid textarea {
  border-color: var(--red) !important;
  border-width: 2px !important;
  background-color: var(--error-bg) !important;
}
.reservation-page .reservation-field.is-invalid input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.reservation-page .reservation-field.is-invalid select,
.reservation-page .reservation-field.is-invalid textarea {
  padding-top: 10px;
  padding-bottom: 10px;
}
/* 値の変更・消去時はJSでis-validを外し、空欄の青表示を残さない。 */
.reservation-page .reservation-field.is-valid input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.reservation-page .reservation-field.is-valid select {
  border-color: var(--blue);
  background-color: var(--done-bg);
}
/* 共通CSSの自動入力色を、このフォームの入力確定色にそろえる。 */
.reservation-page .reservation-field input:-webkit-autofill,
.reservation-page .reservation-field select:-webkit-autofill {
  box-shadow: 0 0 0 1000px var(--done-bg) inset !important;
  -webkit-box-shadow: 0 0 0 1000px var(--done-bg) inset !important;
}
.reservation-page .reservation-field input:autofill,
.reservation-page .reservation-field select:autofill {
  box-shadow: 0 0 0 1000px var(--done-bg) inset !important;
}
.reservation-page .reservation-field.is-invalid input:-webkit-autofill,
.reservation-page .reservation-field.is-invalid select:-webkit-autofill {
  box-shadow: 0 0 0 1000px var(--error-bg) inset !important;
  -webkit-box-shadow: 0 0 0 1000px var(--error-bg) inset !important;
}
.reservation-page .reservation-field.is-invalid input:autofill,
.reservation-page .reservation-field.is-invalid select:autofill {
  box-shadow: 0 0 0 1000px var(--error-bg) inset !important;
}
.reservation-page #f_date.is-invalid #calendar-months,
.reservation-page #f_time.is-invalid #time-slots { border: 2px solid var(--red); background: var(--error-bg); }

/* 選択ボタン */
.reservation-page .reservation-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.reservation-page .reservation-chips label { position: relative; cursor: pointer; }
.reservation-page .reservation-chips label input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.reservation-page .reservation-chip, .reservation-page .reservation-chips label span {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.reservation-page .reservation-chip[aria-pressed="true"],
.reservation-page .reservation-chips label input:checked + span {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}
.reservation-page .reservation-chip:disabled { opacity: .35; cursor: not-allowed; }
.reservation-page #time-slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 7px; }
.reservation-page #time-slots .reservation-chip { width: 100%; padding-right: 0; padding-left: 0; }
.reservation-page #f_tablet .reservation-chips label { flex: 1; }
.reservation-page #f_tablet .reservation-chips label span { min-height: 48px; border-radius: 4px; }
.reservation-page #f_tablet.is-invalid .reservation-chips label span { border: 2px solid var(--red); }

/* カレンダー */
.reservation-page #calendar-months {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 8px 6px 6px;
  border: 1px solid var(--soft);
  border-radius: 8px;
}
.reservation-page .reservation-calendar-month { min-width: 0; }
.reservation-page .reservation-calendar-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.reservation-page .reservation-calendar-heading button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 22px;
  padding: 0 0 5px;
  cursor: pointer;
}
.reservation-page .reservation-calendar-heading button:disabled { opacity: .3; cursor: default; }
.reservation-page .reservation-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  text-align: center;
}
.reservation-page .reservation-weekday { color: var(--sub); font-size: 12px; }
.reservation-page .reservation-weekday:first-child { color: #b0000b; }
.reservation-page .reservation-weekday:nth-child(7) { color: var(--blue); }
.reservation-page .reservation-day {
  width: 100%;
  scroll-margin-top: var(--scroll-offset);
  min-height: 46px;
  border: 1px solid var(--soft);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.reservation-page .reservation-day small { display: block; font-size: 10px; line-height: 1.1; }
.reservation-page .reservation-day.is-holiday { border-color: #f0b9bd; color: #b0000b; }
.reservation-page .reservation-day.is-saturday { border-color: #b9cfea; color: var(--blue); }
.reservation-page .reservation-day:disabled { border-color: #eee; background: #f7f7f7; color: #bdbdbd; cursor: default; }
.reservation-page .reservation-day[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.reservation-page .reservation-day.is-holiday[aria-pressed="true"] {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}
.reservation-page .reservation-day.is-saturday[aria-pressed="true"] { border-color: var(--blue); background: var(--blue); color: #fff; }

/* 日時確定サマリー */
.reservation-page #visit-summary {
  margin-bottom: 8px;
  padding: 12px 12px 13px;
  border: 1px solid var(--blue);
  border-radius: 8px;
  background: var(--done-bg);
  text-align: center;
}
.reservation-page .reservation-summary-label { display: block; color: var(--blue); font-size: 13px; font-weight: 700; }
.reservation-page .reservation-summary-label::before { content: "✓ "; }
.reservation-page #visit-summary-value { display: block; margin-top: 2px; font-size: 20px; line-height: 1.4; white-space: nowrap; }

/* ③ キャンペーン確認・個人情報 */
.reservation-page .reservation-campaign {
  margin-bottom: 24px;
  padding: 20px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--blue-bg);
}
.reservation-page .reservation-campaign h3 {
  margin: 0;
  font-size: 14px;
  text-align: center;
}
.reservation-page .reservation-campaign h3 span, .reservation-page .reservation-campaign h3 strong { display: block; }
.reservation-page .reservation-campaign h3 strong { font-size: 20px; }
.reservation-page .reservation-campaign-top {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--soft);
}
.reservation-page .reservation-campaign-amounts { display: flex; margin: 10px 0 0; padding: 5px; background: #fff; list-style: none; }
.reservation-page .reservation-campaign-amounts li { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; padding: 2px 5px; text-align: center; }
.reservation-page .reservation-campaign-amounts li + li { border-left: 1px dashed #cfd8e3; padding: 2px 0 2px 6px;}
.reservation-page .reservation-campaign-amounts strong { flex: none; color: var(--blue); font-size: 13px; white-space: nowrap; }
.reservation-page .reservation-campaign-amounts span { font-size: 12px; }
.reservation-page .reservation-campaign-top > p { margin: 5px 0 0; padding-top: 3px; font-size: 15px; font-weight: 700; letter-spacing: -.03em; }
.reservation-page .reservation-campaign #f_tablet { margin-bottom: 0; }
.reservation-page #f_tablet .reservation-tablet-question-nowrap { white-space: nowrap; }
.reservation-page .reservation-campaign-note { margin: 6px 0 0; color: var(--sub); font-size: 12px; line-height: 1.5; }
.reservation-page .reservation-campaign-top > .reservation-campaign-note { padding-top: 0; font-size: 12px; font-weight: 400; text-align: left; letter-spacing: 0; }
.reservation-page .reservation-campaign-delivery { margin-top: 20px; }
.reservation-page .reservation-campaign-delivery h4 { margin: 0 0 6px; font-size: 15px; line-height: 1.6; }
.reservation-page .reservation-campaign-delivery dl { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.reservation-page .reservation-campaign-delivery dl > div { display: flex; align-items: baseline; gap: 5px; padding: 2px 5px; }
.reservation-page .reservation-campaign-delivery dt { flex: none; padding: 1px 5px; background: var(--blue); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.6; letter-spacing: -.02em; white-space: nowrap; }
.reservation-page .reservation-campaign-delivery dd { margin: 0; font-size: 14px; line-height: 1.5; letter-spacing: -.02em; }
.reservation-page .reservation-campaign-delivery dd strong { color: var(--blue); }
.reservation-page .reservation-privacy { margin-top: 16px; color: var(--sub); font-size: 12px; }
.reservation-page .reservation-privacy { margin-bottom: 16px; }
.reservation-page .reservation-privacy h3,
.reservation-page .reservation-privacy h4 { color: var(--ink); }
.reservation-page .reservation-privacy p { margin: 0 0 8px; }
.reservation-page .reservation-privacy h3, .reservation-page .reservation-privacy h4 { font-size: 14px; }
.reservation-page .reservation-privacy h4 { margin: 10px 0 2px; }
.reservation-page .reservation-privacy .reservation-privacy-link { margin: 4px 0 0; text-align: right; font-weight: 700; }
.reservation-page .reservation-privacy a { color: var(--blue); }

/* V7の防災ギフト欄。掲載画像・商品名は正式素材への差し替えを前提とする。 */
.reservation-page .reservation-disaster { margin-bottom: 24px; padding: 20px 12px; border-radius: 8px; background: var(--blue-bg); }
.reservation-page .reservation-disaster-top { margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--soft); }
.reservation-page .reservation-disaster h3 { margin: 0; font-size: 20px; text-align: center; }
.reservation-page .reservation-disaster-top p { margin: 5px 0 0; font-size: 12px; line-height: 1.5; }
.reservation-page .reservation-disaster-top p:first-of-type { text-align: center; }
.reservation-page .reservation-disaster-lead-nowrap { white-space: nowrap; }
.reservation-page .reservation-disaster-top p:last-child { color: var(--sub); }
.reservation-page .reservation-disaster #f_gift { margin-bottom: 0; }
.reservation-page .reservation-gift-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.reservation-page .reservation-gift { position: relative; min-width: 0; cursor: pointer; }
.reservation-page .reservation-gift input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.reservation-page .reservation-gift-card { display: flex; height: 100%; flex-direction: column; gap: 8px; padding: 6px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.reservation-page .reservation-gift-image { display: block; height: 120px; overflow: hidden; border-radius: 2px; }
.reservation-page .reservation-gift-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.reservation-page .reservation-gift-caption { display: flex; align-items: flex-start; gap: 5px; min-width: 0; font-size: 13px; line-height: 1.6; }
.reservation-page .reservation-gift-caption > span:last-child { min-width: 0; }
.reservation-page .reservation-gift-caption strong { display: block; font-size: 13px; }
.reservation-page .reservation-gift-caption small { display: block; min-height: 57px; margin-top: 2px; color: var(--sub); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.reservation-page .reservation-gift-dot { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border: 2px solid var(--line); border-radius: 50%; }
.reservation-page .reservation-gift input:checked + .reservation-gift-card { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.reservation-page .reservation-gift input:checked + .reservation-gift-card .reservation-gift-dot { border-color: var(--ink); }
.reservation-page .reservation-gift input:checked + .reservation-gift-card .reservation-gift-dot::after { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); content: ''; }
.reservation-page .reservation-gift input:focus-visible + .reservation-gift-card { outline: 3px solid #99c2ff; outline-offset: 2px; }
.reservation-page #f_gift.is-invalid .reservation-gift-card { border: 2px solid var(--red); }
.reservation-page .reservation-disaster-notes { margin: 6px 0 0; color: var(--sub); font-size: 12px; line-height: 1.5; }
.reservation-page .reservation-pc-only-break { display: none; }

/* メール候補は入力欄内に閉じ込めず、キーボード・タッチの両方で選べる。 */
.reservation-page .reservation-mail-wrap { position: relative; }
.reservation-page .reservation-mail-suggestions { position: absolute; z-index: 30; top: calc(100% + 4px); right: 0; left: 0; margin: 0; padding: 4px 0; border: 1px solid var(--line); border-radius: 6px; background: #fff; box-shadow: 0 4px 12px rgb(0 0 0 / 12%); list-style: none; }
.reservation-page .reservation-mail-suggestions[hidden] { display: none; }
.reservation-page .reservation-mail-suggestions li { display: flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; cursor: pointer; }
.reservation-page .reservation-mail-suggestions li:hover, .reservation-page .reservation-mail-suggestions li[aria-selected="true"] { background: #f5f5f5; }
.reservation-page .reservation-mail-prefix { color: var(--sub); }
.reservation-page .reservation-mail-typo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 8px; padding: 8px 10px 8px 12px; border: 1px solid var(--blue); border-radius: 6px; background: var(--blue-bg); font-size: 14px; line-height: 1.5; }
.reservation-page .reservation-mail-typo:empty { display: none; }
.reservation-page .reservation-mail-typo-text { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.reservation-page .reservation-mail-typo button { flex: none; min-height: 44px; padding: 0 16px; border: 1px solid var(--blue); border-radius: 6px; background: #fff; color: var(--blue); font: inherit; font-weight: 700; cursor: pointer; }

/* 同一画面の確認欄・送信ボタン */
.reservation-page #error-summary {
  margin: 6px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--red);
  border-radius: 6px;
  background: var(--error-bg);
  color: var(--red);
  font-size: 14px;
}
.reservation-page .reservation-error-summary-jump {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.reservation-page .reservation-error-summary-jump:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.reservation-page .reservation-primary {
  display: block;
  width: 100%;
  max-width: 400px;
  min-height: 56px;
  margin: 20px auto 12px;
  padding: 12px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}
.reservation-page #go-confirm { min-height: 66px; padding: 14px 16px; }
.reservation-page #go-confirm > span {
  display: block;
  font-size: 16px;
  line-height: 1.2;
  word-break: keep-all;
}
.reservation-page .reservation-primary small { display: block; font-size: 14px; font-weight: 400; line-height: 1.2; }
.reservation-page #go-confirm small { margin-top: 2px; }
.reservation-page .reservation-primary:disabled { background: #8c8c8c; cursor: wait; }
.reservation-page .reservation-primary:disabled::before {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: -3px;
  border: 3px solid rgb(255 255 255 / 45%);
  border-top-color: #fff;
  border-radius: 50%;
  animation: reservation-spin .8s linear infinite;
  content: "";
}
@keyframes reservation-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .reservation-page .reservation-primary:disabled::before { animation: none; }
}
.reservation-page #reservation-confirm {
  margin: 20px 0;
  padding: 14px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: #fff;
}
.reservation-page #reservation-confirm h2 { margin: 0 0 10px; font-size: 17px; }
.reservation-page #reservation-confirm h2[tabindex="-1"]:focus,
.reservation-page .reservation-block h2[tabindex="-1"]:focus { outline: none; }
.reservation-page #confirmed-values { display: grid; grid-template-columns: 38% minmax(0, 1fr); margin: 20px 0; }
.reservation-page #confirmed-values dt, .reservation-page #confirmed-values dd {
  margin: 0;
  padding: 8px 4px;
  border-bottom: 1px solid var(--soft);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.reservation-page #confirmed-values dt { color: var(--sub); }
.reservation-page #back-to-input {
  display: block;
  width: 100%;
  max-width: 400px;
  min-height: 48px;
  margin: 10px auto 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.reservation-page input:focus-visible, .reservation-page select:focus-visible,
.reservation-page textarea:focus-visible, .reservation-page button:focus-visible,
.reservation-page .reservation-chips input:focus-visible + span {
  outline: 3px solid #99c2ff;
  outline-offset: 1px;
}

/* i-tab説明はこの予約フォーム専用のモーダルに限定する。 */
#reservation-itab-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgb(0 0 0 / 45%);
  color: #1a1a1a;
}
#reservation-itab-modal .reservation-itab-dialog {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 358px;
  max-width: 100%;
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 16px 16px 20px;
  border-radius: 14px;
  background: #fff;
}
#reservation-itab-modal .reservation-itab-content { display: contents; }
#reservation-itab-modal .reservation-itab-content > div { order: 1; }
#reservation-itab-modal .reservation-itab-lead { margin: 0; font-size: 14px; line-height: 1.3; }
#reservation-itab-modal h2 { margin: 5px 0 0; font-size: 18px; line-height: 1.3; }
#reservation-itab-modal .reservation-itab-description { margin: 10px 0 0; padding-bottom: 4px; color: #595959; font-size: 15px; line-height: 1.5; }
#reservation-itab-modal .reservation-itab-large { order: 2; display: block; width: 302px; max-width: 100%; height: auto; margin: 0 auto; }
#reservation-itab-modal #reservation-itab-close {
  order: 3;
  width: 100%;
  min-height: 44px;
  margin-top: 14px;
  padding: 10px;
  border: 1px solid #767676;
  border-radius: 8px;
  background: #fff;
  color: #1a1a1a;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
#reservation-itab-modal #reservation-itab-close:focus-visible,
.reservation-page #reservation-itab-open:focus-visible { outline: 3px solid #99c2ff; outline-offset: 2px; }

/* 完了画面 */
.reservation-thanks { display: flex; flex-direction: column; gap: 40px; padding-top: 16px; padding-bottom: 56px; }
.reservation-page .reservation-thanks-head { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; }
.reservation-page .reservation-thanks-title {
  margin: 0;
  padding-bottom: 10px;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
  font-feature-settings: "halt" 1;
}
.reservation-page .reservation-thanks-title > span { display: block; }
.reservation-page .reservation-thanks-info {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 15px 12px;
  border: 1px solid var(--blue);
  border-radius: 8px;
  background: var(--done-bg);
}
.reservation-page .reservation-thanks-info dl { display: flex; flex-direction: column; gap: 15px; margin: 0; }
.reservation-page .reservation-thanks-item { display: flex; flex-direction: column; gap: 2px; font-weight: 700; text-align: center; }
.reservation-page .reservation-thanks-item dt { color: var(--blue); font-size: 13px; line-height: 1.5; }
.reservation-page .reservation-thanks-item dd { margin: 0; font-size: 20px; line-height: 1.4; font-feature-settings: "halt" 1; }
.reservation-page .reservation-thanks-buttons { display: flex; flex-direction: column; gap: 10px; }
.reservation-page .reservation-thanks-buttons a {
  display: block;
  padding: 11px 16px;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.reservation-page .reservation-thanks-recommend { display: flex; flex-direction: column; align-items: center; gap: 15px; }
.reservation-page .reservation-thanks-recommend h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  font-feature-settings: "halt" 1;
}
.reservation-page .reservation-thanks-banners { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 343px; }
.reservation-page .reservation-thanks-banners a { display: block; overflow: hidden; border-radius: 5px; }
.reservation-page .reservation-thanks-banners img { display: block; width: 100%; height: auto; }

@media (min-width: 768px) {
  .reservation-page { padding: 0 24px 48px; }
  .reservation-page.reservation-thanks { gap: 30px; padding-top: 40px; padding-bottom: 56px; }
  .reservation-page .reservation-thanks-head { gap: 30px; }
  .reservation-page .reservation-thanks-title { font-size: 22px; }
  .reservation-page .reservation-thanks-title > span:nth-child(-n+2) { display: inline; }
  .reservation-page .reservation-thanks-info { padding: 20px 12px; }
  .reservation-page .reservation-thanks-buttons { flex-direction: row; padding: 0 100px; }
  .reservation-page .reservation-thanks-buttons a { flex: 1 1 0; }
  .reservation-page .reservation-thanks-recommend { padding-top: 10px; }
  .reservation-page .reservation-thanks-recommend h2 { font-size: 20px; }
  .reservation-page .reservation-thanks-banners { flex-direction: row; justify-content: center; max-width: none; }
  .reservation-page .reservation-thanks-banners a { flex: 0 1 370px; }
  .reservation-page .reservation-benefit { max-width: 680px; margin: 0 auto 12px; padding: 18px 15px 20px; border-radius: 12px;}
  .reservation-page .reservation-benefit-inner { max-width: none; }
  .reservation-page .reservation-benefit-lead { font-size: 16px; }
  .reservation-page .reservation-benefit-main { gap: 22px; margin-top: -2px; }
  .reservation-page .reservation-benefit-main strong { font-size: 27px; }
  .reservation-page .reservation-benefit-main > span { font-size: 16px; }
  .reservation-page .reservation-benefit-sparkle-left { top: -1px; left: -21px; width: 20px; height: 20px; }
  .reservation-page .reservation-benefit-sparkle-right { top: 18px; width: 18px; height: 18px; }
  .reservation-page .reservation-benefit-steps { max-width: 420px; padding-top: 8px; }
  .reservation-page .reservation-benefit-steps li { min-height: 36px; align-items: center; padding-left: 20px; }
  .reservation-page .reservation-benefit-steps strong { font-size: 16px; }
  .reservation-page .reservation-benefit-steps span { font-size: 15px; }
  .reservation-page .reservation-itab-intro { display: flex; align-items: flex-end; gap: 10px; min-height: 60px; max-width: none; margin: -4px 0 10px; padding: 10px 232px 10px 15px; }
  .reservation-page .reservation-itab-intro p span { font-size: 14px; }
  .reservation-page .reservation-itab-intro p strong { font-size: 16px; white-space: nowrap; }
  .reservation-page .reservation-itab-intro button { flex: none; margin-top: 0; line-height: 1.4; }
  .reservation-page .reservation-itab-intro img { right: 12px; bottom: 0; width: 220px; }
  .reservation-page .reservation-benefit-sub { padding-top: 0; font-size: 14px; }
  .reservation-page .reservation-sp-only { display: none; }
  .reservation-page .reservation-pc-only { display: inline; }
  .reservation-page .reservation-block { overflow: visible; border: 0; box-shadow: none; }
  .reservation-page #contact-block { margin-bottom: 16px; }
  .reservation-page #agreement-block { margin-top: 0; }
  .reservation-page .reservation-block-head { border-radius: 10px; }
  .reservation-page .reservation-block-body { padding: 25px 14px 14px; }
  .reservation-page #agreement-block .reservation-block-body { padding-bottom: 0; }
  .reservation-page #f_date { margin-bottom: 25px; }
  .reservation-page .reservation-pc-row { display: grid; column-gap: 15px; }
  .reservation-page .reservation-pc-row-address { grid-template-columns: 200px 200px minmax(0, 1fr); }
  .reservation-page .reservation-pc-row-mail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reservation-page .reservation-campaign { margin-bottom: 20px; padding: 20px; }
  .reservation-page .reservation-disaster { margin-bottom: 20px; padding: 20px; }
  .reservation-page .reservation-gift-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .reservation-page .reservation-pc-only-break { display: block; }
  .reservation-page .reservation-campaign h3 { font-size: 18px; }
  .reservation-page .reservation-campaign h3 { text-align: left; }
  .reservation-page .reservation-campaign h3 span, .reservation-page .reservation-campaign h3 strong { display: inline; font-size: 22px; }
  .reservation-page .reservation-disaster h3 { text-align: left; font-size: 22px; }
  .reservation-page .reservation-disaster-top p:first-of-type { text-align: left; font-size: 15px; }
  .reservation-page .reservation-campaign-amounts { display: flex; margin-top: 9px; }
  .reservation-page .reservation-campaign-amounts li { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 0; padding: 2px 0 2px 5px; text-align: left; }
  .reservation-page .reservation-campaign-amounts li:first-child { flex: none; }
  .reservation-page .reservation-campaign-amounts li + li { flex: 1 1 auto; border-left: 0; padding-left: 5px; }
  .reservation-page .reservation-campaign-amounts strong, .reservation-page .reservation-campaign-amounts span { font-size: 16px; letter-spacing: -.02em; }
  .reservation-page .reservation-campaign-amounts strong { line-height: 1.6; }
  .reservation-page .reservation-campaign-top > p { padding-left: 5px; font-size: 15px; text-align: left; letter-spacing: 0; }
  .reservation-page .reservation-campaign-delivery dt { font-size: 15px; }
  .reservation-page .reservation-campaign-delivery dd { font-size: 16px; }
  .reservation-page .reservation-privacy { margin-bottom: 20px; }
  .reservation-page .reservation-privacy h4 { margin-top: 38px; }
  .reservation-page .reservation-privacy .reservation-privacy-link + h4 { margin-top: 19px; }
  .reservation-page #calendar-months {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    padding: 10px 12px 8px;
  }
  .reservation-page #time-slots { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; }
  .reservation-page #postcode { max-width: 16em; }
  .reservation-page #usertel { max-width: 20em; }
  #reservation-itab-modal .reservation-itab-dialog { flex-direction: row; align-items: stretch; gap: 32px; width: 880px; padding: 32px; }
  #reservation-itab-modal .reservation-itab-large { order: 0; flex: 0 1 469px; width: auto; min-width: 0; margin: 0; }
  #reservation-itab-modal .reservation-itab-content { display: flex; flex: 1 0 260px; flex-direction: column; justify-content: space-between; }
}

@media (max-width: 767px) {
  .reservation-page .reservation-benefit { margin-right: -16px; margin-left: -16px; padding-left: 16px; }
  .reservation-page .reservation-itab-intro { width: 100%; }
  .reservation-page .reservation-campaign-amounts li:nth-child(2) span { letter-spacing: -.05em; }
}

@media (min-width: 981px) and (max-width: 1130px) {
  .reservation-page { --scroll-offset: 142px; }
}

@media (max-width: 359px) {
  .reservation-page #time-slots .reservation-chip { font-size: 14px; }
  .reservation-page .reservation-block.is-confirming .reservation-status { display: none; }
}

.cmn-cv {
  display: none;
}