/* ============================================================
   WHITTY Reservation Portal UI v2
   Mobile-first reservation flow design
============================================================ */
:root {
  --res-blue-900: #103e72;
  --res-blue-800: #15518f;
  --res-blue-700: #1466a8;
  --res-blue-500: #29abe2;
  --res-blue-100: #eaf5fb;
  --res-blue-050: #f6fbfe;
  --res-ink: #16304d;
  --res-muted: #61758a;
  --res-line: #d7e9f5;
  --res-yellow: #ffe800;
  --res-yellow-soft: #fff9d8;
  --res-red: #e63e2e;
  --res-green: #06c755;
  --res-shadow: 0 16px 38px rgba(20, 81, 143, .12);
  --res-shadow-sm: 0 8px 20px rgba(20, 81, 143, .10);
}

html { -webkit-text-size-adjust: 100%; }
body.reservation-page {
  min-width: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 0 0, rgba(41, 171, 226, .10), transparent 28rem),
    linear-gradient(180deg, #f8fcff 0, #fff 32rem);
  color: var(--res-ink);
  line-height: 1.75;
}
body.reservation-page * { min-width: 0; }
body.reservation-page a { -webkit-tap-highlight-color: transparent; }
body.reservation-page input,
body.reservation-page select,
body.reservation-page textarea,
body.reservation-page button { font: inherit; }

/* Header ----------------------------------------------------- */
.reservation-page .site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid rgba(21, 81, 143, .12);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 5px 18px rgba(18, 62, 114, .06);
  backdrop-filter: blur(14px);
}
.reservation-page .site-header .container.header-inner,
.reservation-page .header-inner {
  width: min(1120px, calc(100% - 40px));
  min-height: 70px;
  margin: 0 auto;
  padding: 12px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.reservation-page .logo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--res-blue-900);
  font-family: var(--font-en, sans-serif);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: .03em;
  line-height: 1;
  white-space: nowrap;
}
.reservation-page .logo-mark {
  display: inline-grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(145deg, var(--res-blue-500), var(--res-blue-800));
  font-size: 19px;
  box-shadow: 0 5px 10px rgba(20, 102, 168, .22);
}
.reservation-page .header-nav,
.reservation-page .header-nav-member {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  font-weight: 800;
}
.reservation-page .header-nav > a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid var(--res-line);
  border-radius: 999px;
  color: var(--res-blue-800);
  background: #fff;
  font-size: 13px;
}
.reservation-page .header-nav > a:hover { opacity: 1; background: var(--res-blue-050); }
.reservation-page .welcome-text {
  max-width: 260px;
  overflow: hidden;
  color: var(--res-blue-800);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reservation-page .btn-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--res-line);
  border-radius: 999px;
  color: var(--res-blue-800);
  background: #fff;
  font-size: 13px;
  text-decoration: none;
}

/* Hero ------------------------------------------------------- */
.reservation-page .hero {
  position: relative;
  overflow: hidden;
  border-bottom: 0;
  background:
    radial-gradient(circle at 8% 20%, rgba(255,255,255,.16) 0 7px, transparent 8px),
    radial-gradient(circle at 92% 28%, rgba(255,255,255,.12) 0 26px, transparent 27px),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,.09) 0 44px, transparent 45px),
    linear-gradient(122deg, #0d4c8d, #1668a9 55%, #1b98d4);
  color: #fff;
  padding: 56px 0 52px;
  text-align: center;
}
.reservation-page .hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 5px;
  background: linear-gradient(90deg, var(--res-yellow), #fff58d, var(--res-yellow));
}
.reservation-page .hero .container { position: relative; z-index: 1; }
.reservation-page .hero-eyebrow {
  margin: 0 0 10px;
  color: #d5f4ff;
  font-family: var(--font-en, sans-serif);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .20em;
}
.reservation-page .hero-title {
  margin: 0;
  color: #fff;
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.25;
  text-shadow: 0 3px 0 rgba(10, 55, 100, .22);
}
.reservation-page .hero-lead {
  max-width: 700px;
  margin: 13px auto 0;
  color: #f8fdff;
  font-size: 15px;
  font-weight: 700;
}

/* Common layout --------------------------------------------- */
.reservation-page .container {
  width: min(1120px, calc(100% - 40px));
  max-width: none;
  margin-right: auto;
  margin-left: auto;
  padding: 0;
}
.reservation-page main.container,
.reservation-page .auth-container,
.reservation-page .complete-container {
  padding-top: 42px;
  padding-bottom: 90px;
}
.reservation-page .panel-title {
  margin: 0;
  padding: 0;
  color: var(--res-blue-900);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.45;
}
.reservation-page .panel-title::after { display: none; }
.reservation-page .panel-note {
  max-width: 640px;
  margin: 12px auto 0;
  color: var(--res-muted);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.reservation-notice {
  position: relative;
  max-width: 1000px;
  margin: 0 auto 22px;
  padding: 14px 18px 14px 48px;
  border: 1px solid var(--res-line);
  border-radius: 14px;
  box-shadow: var(--res-shadow-sm);
  font-size: 14px;
  font-weight: 800;
}
.reservation-notice::before {
  content: "i";
  position: absolute;
  top: 50%; left: 17px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: currentColor;
  color: #fff;
  font-family: Georgia, serif;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-50%);
}
.reservation-notice.is-info { background: #edf8ff; color: #176a9f; }
.reservation-notice.is-success { background: #effbf3; color: #167445; }
.reservation-notice.is-warning { background: #fffbe6; color: #8a6700; }
.reservation-notice.is-error { background: #fff4f5; color: #a62938; }

/* Reservation entry ----------------------------------------- */
.reservation-page .auth-card {
  max-width: 1050px;
  margin: 0 auto;
  padding: 44px;
  border: 1px solid var(--res-line);
  border-radius: 28px;
  background: rgba(255,255,255,.98);
  box-shadow: var(--res-shadow);
}
.reservation-page .auth-card-head { max-width: 680px; margin: 0 auto 34px; text-align: center; }
.reservation-page .auth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--res-blue-500);
  font-family: var(--font-en, sans-serif);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
}
.reservation-page .auth-eyebrow::before,
.reservation-page .auth-eyebrow::after {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}
.auth-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  max-width: 900px;
  margin: 0 auto;
}
.auth-choice-card {
  position: relative;
  display: flex;
  min-height: 382px;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px;
  overflow: hidden;
  border: 1px solid var(--res-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(20,81,143,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.auth-choice-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--res-blue-500), var(--res-blue-800));
}
.auth-choice-card:hover { transform: translateY(-5px); border-color: #a7d9f2; box-shadow: var(--res-shadow); }
.auth-choice-register { background: linear-gradient(145deg, #fffdf0, #fff 56%); }
.auth-choice-register::before { background: linear-gradient(90deg, #f6d400, var(--res-yellow), #f0be00); }
.auth-choice-top { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.auth-choice-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 17px;
  color: var(--res-blue-800);
  background: var(--res-blue-100);
}
.auth-choice-register .auth-choice-icon { color: #a67700; background: var(--res-yellow-soft); }
.auth-choice-icon svg { width: 28px; height: 28px; }
.auth-choice-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid var(--res-line);
  border-radius: 999px;
  color: var(--res-blue-700);
  background: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}
.auth-choice-register .auth-choice-badge { color: #8c6700; border-color: #f0d861; background: #fffdf2; }
.auth-choice-label { margin: 0 0 7px; color: var(--res-muted); font-size: 13px; font-weight: 800; }
.auth-choice-card h3 { margin: 0; color: var(--res-blue-900); font-size: clamp(21px, 2.4vw, 25px); font-weight: 900; line-height: 1.45; text-align: left; }
.auth-choice-card > p:not(.auth-choice-label):not(.auth-choice-note) { margin: 14px 0 18px; color: #405870; font-size: 14px; font-weight: 600; line-height: 1.9; }
.auth-feature-list { display: grid; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; color: #4d647a; font-size: 13px; font-weight: 700; }
.auth-feature-list li { position: relative; padding-left: 24px; }
.auth-feature-list li::before { content: "✓"; position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; color: #fff; background: var(--res-blue-500); font-size: 11px; }
.auth-choice-register .auth-feature-list li::before { color: var(--res-blue-900); background: var(--res-yellow); }
.auth-choice-button { width: 100%; margin-top: auto; }
.auth-choice-links { margin-top: 15px; }
.auth-choice-note { margin: 14px 0 0; color: var(--res-muted); font-size: 12px; font-weight: 600; line-height: 1.7; }

/* Forms ------------------------------------------------------ */
.auth-form-layout {
  display: grid;
  grid-template-columns: minmax(210px, .75fr) minmax(0, 1.25fr);
  gap: 28px;
  align-items: stretch;
}
.auth-form-aside {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(150deg, var(--res-blue-900), var(--res-blue-700));
}
.auth-form-aside h3 { margin: 0 0 10px; color: #fff; font-size: 21px; font-weight: 900; line-height: 1.45; }
.auth-form-aside p { margin: 0; color: rgba(255,255,255,.84); font-size: 13px; font-weight: 600; line-height: 1.85; }
.auth-aside-points { display: grid; gap: 12px; margin: auto 0 0; padding: 24px 0 0; list-style: none; }
.auth-aside-points li { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 800; }
.auth-aside-points svg { width: 18px; height: 18px; flex: none; }
.auth-box,
.auth-single-box {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.reservation-page .field { max-width: none; margin: 0 0 18px; }
.reservation-page .field label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--res-blue-900);
  font-size: 14px;
  font-weight: 800;
}
.reservation-page .field .req {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  color: #c72a28;
  background: #fff0ef;
  font-size: 10px;
  font-weight: 900;
}
.reservation-page .field input[type="text"],
.reservation-page .field input[type="tel"],
.reservation-page .field input[type="email"],
.reservation-page .field input[type="password"] {
  width: 100%;
  min-height: 54px;
  padding: 13px 15px;
  border: 1px solid #cbdfea;
  border-radius: 13px;
  background: #fff;
  color: var(--res-ink);
  font-size: 16px;
  font-weight: 600;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.reservation-page .field input::placeholder { color: #9aacba; font-weight: 500; }
.reservation-page .field input:focus { border-color: var(--res-blue-500); background: #fcfeff; box-shadow: 0 0 0 4px rgba(41,171,226,.15); outline: none; }
.auth-submit { width: 100%; min-height: 56px; margin-top: 10px; }
.auth-links { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; color: var(--res-muted); font-size: 13px; font-weight: 700; text-align: center; }
.auth-links a { color: var(--res-blue-700); text-decoration: underline; text-underline-offset: 3px; }
.auth-agree { margin: 4px 0 22px !important; }
.auth-security-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; color: var(--res-muted); font-size: 12px; font-weight: 600; line-height: 1.75; }
.auth-security-note svg { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--res-blue-500); }

/* Buttons ---------------------------------------------------- */
.reservation-page .btn,
.reservation-page .btn-primary,
.reservation-page .btn-ghost,
.reservation-page .btn-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 14px 22px;
  border: 0;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.reservation-page .btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #ef4b3a, #d92d22);
  box-shadow: 0 5px 0 #b8211a, 0 9px 18px rgba(220,48,38,.18);
}
.reservation-page .btn-primary:hover { opacity: 1; transform: translateY(2px); box-shadow: 0 3px 0 #b8211a, 0 6px 12px rgba(220,48,38,.16); }
.reservation-page .btn-ghost {
  color: var(--res-blue-800);
  border: 1px solid #aacce0;
  background: #fff;
  box-shadow: 0 4px 0 #d4e8f4;
}
.reservation-page .btn-ghost:hover { opacity: 1; background: var(--res-blue-050); transform: translateY(2px); box-shadow: 0 2px 0 #d4e8f4; }
.reservation-page .btn-primary:disabled,
.reservation-page .btn-login:disabled { cursor: not-allowed; opacity: .58; transform: none; box-shadow: none; }
.reservation-page .panel-actions { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 34px; }
.reservation-page .panel-actions .btn { min-width: 220px; }

/* Booking pages --------------------------------------------- */
.reservation-page .steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: 820px;
  margin: 0 auto 34px;
  padding: 0;
  border: 0;
  list-style: none;
}
.reservation-page .step {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid var(--res-line);
  border-radius: 12px;
  color: #8195a7;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}
.reservation-page .step-num { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; color: #8297a9; background: #edf4f8; font-family: var(--font-en, sans-serif); font-size: 12px; font-weight: 900; }
.reservation-page .step.is-active { border-color: #8fd0ed; color: var(--res-blue-800); background: #f1fbff; }
.reservation-page .step.is-active .step-num { color: #fff; background: var(--res-blue-500); }
.reservation-page .step.is-done { border-color: #a5ddbd; color: #197349; background: #f2fcf5; }
.reservation-page .step.is-done .step-num { color: #fff; background: #2eaa67; }
.reservation-page .panel { display: none; }
.reservation-page .panel.is-active { display: block; animation: reservationFadeIn .28s ease both; }
@keyframes reservationFadeIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
.reservation-page .menu-list { max-width: 830px; margin: 28px auto 0; }
.reservation-page .menu-card-wrap {
  overflow: hidden;
  margin-bottom: 13px;
  border: 1px solid var(--res-line);
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(20,81,143,.05);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.reservation-page .menu-card-wrap:has(.menu-card-main input:checked) { border-color: #6fc8ed; box-shadow: 0 8px 20px rgba(20,102,168,.10); }
.reservation-page .menu-card-main { padding: 22px 24px; }
.reservation-page .menu-card-wrap:has(.menu-card-main input:checked) .menu-card-main { background: linear-gradient(90deg, #f2fbff, #fff); }
.reservation-page .menu-card-head { align-items: center; gap: 16px; margin: 0; }
.reservation-page .menu-card-name { color: var(--res-blue-900); font-size: 18px; }
.reservation-page .menu-card-price { color: var(--res-red); font-size: 25px; }
.reservation-page .menu-card-desc { margin-top: 7px; color: var(--res-muted); font-size: 13px; }
.reservation-page .payment-options { background: #fbfdfe; }
.reservation-page .menu-card-wrap:has(.menu-card-main input:checked) .payment-options { max-height: 220px; padding: 18px 24px 22px; border-top: 1px dashed #b8ddec; }
.reservation-page .payment-title { color: var(--res-blue-800); text-align: left; }
.reservation-page .payment-pill { min-height: 82px; border-color: #d0e4ef; border-radius: 12px; }
.reservation-page .payment-pill:has(input:checked) { border-color: var(--res-blue-500); background: #effbff; box-shadow: 0 3px 0 #bee6f5; transform: translateY(-1px); }
.reservation-page .payment-pill:has(input:checked) .pay-name,
.reservation-page .payment-pill:has(input:checked) .pay-price { color: var(--res-blue-800); }
.reservation-page .datetime-grid { max-width: 920px; margin: 28px auto 0; gap: 20px; }
.reservation-page .calendar-wrap,
.reservation-page .slot-wrap { padding: 24px; border: 1px solid var(--res-line); border-radius: 20px; box-shadow: 0 8px 18px rgba(20,81,143,.05); }
.reservation-page .calendar-wrap { background: #fff; }
.reservation-page .slot-wrap { background: linear-gradient(180deg, #f8fcff, #fff); }
.reservation-page .cal-month { color: var(--res-blue-900); }
.reservation-page .cal-nav { width: 40px; height: 40px; border: 1px solid #abd7e9; color: var(--res-blue-800); background: #fff; }
.reservation-page .cal-dow { margin-bottom: 12px; color: var(--res-blue-800); }
.reservation-page .cal-day { width: 100%; height: 41px; border-radius: 12px; font-size: 14px; }
.reservation-page .cal-day.open:hover { background: #e9f8ff; }
.reservation-page .cal-day.is-selected { background: var(--res-blue-500) !important; box-shadow: 0 3px 0 var(--res-blue-900); }
.reservation-page .slot-heading { margin-bottom: 18px; border-left-color: var(--res-blue-500); font-size: 15px; }
.reservation-page .slot { border-color: #cde5f0; color: var(--res-blue-800); }
.reservation-page .slot.is-selected { background: var(--res-blue-500) !important; }
.reservation-page .summary { max-width: 760px; padding: 10px 24px; border: 1px solid #abdff3; border-radius: 18px; background: linear-gradient(180deg, #eef9ff, #fbfdff); }
.reservation-page .summary .row { min-height: 58px; align-items: center; border-bottom: 1px dashed #c7e2ee; }
.reservation-page .summary dt { color: var(--res-muted); font-size: 13px; }
.reservation-page .summary dd { color: var(--res-blue-900); font-size: 16px; text-align: right; }
.reservation-page .radio-row { gap: 10px; }
.reservation-page .radio-row .pill { min-height: 52px; padding: 12px; border-color: #cde5f0; border-radius: 12px; }
.reservation-page .agree { max-width: 760px; padding: 16px 18px; border: 1px solid #cde5f0; border-radius: 14px; background: #f9fcfe; font-size: 13px; }
.reservation-page .agree input[type="checkbox"] { width: 21px; height: 21px; }
.reservation-page .member-status-card { max-width: 920px; margin: 0 auto 30px; border: 1px solid #9bd7ee; border-radius: 18px; box-shadow: 0 8px 18px rgba(20,81,143,.06); }
.reservation-page .member-status-card .status-item { padding: 22px 14px; }

/* Complete page --------------------------------------------- */
.reservation-page .complete-card {
  max-width: 820px;
  padding: 46px;
  border-radius: 26px;
  box-shadow: var(--res-shadow);
}
.reservation-page .done-icon { width: 84px; height: 84px; margin-bottom: 22px; border: 0; color: #fff; background: linear-gradient(145deg, #48c47e, #1f9e59); box-shadow: 0 9px 20px rgba(35,156,88,.22); }
.reservation-page .done-panel .panel-note { margin-bottom: 24px; }
.reservation-page .line-reservation-guide { margin: 28px auto 0; border-radius: 18px !important; box-shadow: 0 8px 18px rgba(20,81,143,.05); }
.reservation-page .line-reservation-guide__cta { min-height: 48px; border-radius: 12px !important; }

/* Mobile ----------------------------------------------------- */
@media (max-width: 760px) {
  .reservation-page .site-header .container.header-inner,
  .reservation-page .header-inner,
  .reservation-page .container { width: min(100% - 28px, 1120px); }
  .reservation-page .site-header .container.header-inner,
  .reservation-page .header-inner { min-height: 62px; gap: 10px; }
  .reservation-page .logo { font-size: 21px; }
  .reservation-page .logo-mark { width: 28px; height: 28px; border-radius: 9px; font-size: 17px; }
  .reservation-page .header-nav > a { min-height: 36px; padding: 0 11px; font-size: 11px; }
  .reservation-page .header-nav-member { gap: 8px; }
  .reservation-page .welcome-text { max-width: 140px; font-size: 11px; }
  .reservation-page .btn-logout { min-height: 36px; padding: 0 10px; font-size: 11px; }
  .reservation-page .hero { padding: 40px 0 37px; }
  .reservation-page .hero-eyebrow { margin-bottom: 8px; font-size: 10px; letter-spacing: .16em; }
  .reservation-page .hero-lead { margin-top: 9px; font-size: 13px; line-height: 1.75; }
  .reservation-page main.container,
  .reservation-page .auth-container,
  .reservation-page .complete-container { padding-top: 26px; padding-bottom: 56px; }
  .reservation-page .auth-card { padding: 26px 18px; border-radius: 20px; }
  .reservation-page .auth-card-head { margin-bottom: 24px; }
  .reservation-page .panel-note { font-size: 13px; line-height: 1.8; }
  .auth-choice-grid { grid-template-columns: 1fr; gap: 15px; }
  .auth-choice-card { min-height: 0; padding: 24px 20px 21px; border-radius: 18px; }
  .auth-choice-card h3 { font-size: 20px; }
  .auth-choice-card > p:not(.auth-choice-label):not(.auth-choice-note) { margin: 10px 0 14px; font-size: 13px; line-height: 1.8; }
  .auth-feature-list { margin-bottom: 18px; font-size: 12px; }
  .auth-choice-button { min-height: 52px; }
  .auth-form-layout { grid-template-columns: 1fr; gap: 18px; }
  .auth-form-aside { padding: 22px; border-radius: 16px; }
  .auth-form-aside h3 { font-size: 18px; }
  .auth-aside-points { display: none; }
  .auth-links { gap: 8px; font-size: 12px; }
  .reservation-page .steps { grid-template-columns: repeat(4, minmax(64px, 1fr)); gap: 6px; margin-bottom: 23px; overflow-x: auto; }
  .reservation-page .step { min-height: 58px; flex-direction: column; gap: 3px; padding: 7px 5px; border-radius: 10px; font-size: 10px; white-space: nowrap; }
  .reservation-page .step-num { width: 20px; height: 20px; font-size: 10px; }
  .reservation-page .menu-list { margin-top: 20px; }
  .reservation-page .menu-card-main { padding: 18px; }
  .reservation-page .menu-card-head { align-items: flex-start; gap: 10px; }
  .reservation-page .menu-card-name { font-size: 16px; line-height: 1.55; }
  .reservation-page .menu-card-price { font-size: 22px; white-space: nowrap; }
  .reservation-page .menu-card-wrap:has(.menu-card-main input:checked) .payment-options { padding: 15px 18px 18px; }
  .reservation-page .payment-radios { gap: 9px; }
  .reservation-page .payment-pill { min-height: 74px; padding: 10px; }
  .reservation-page .pay-price { font-size: 16px; }
  .reservation-page .datetime-grid { gap: 14px; margin-top: 20px; }
  .reservation-page .calendar-wrap,
  .reservation-page .slot-wrap { padding: 17px; border-radius: 16px; }
  .reservation-page .cal-days { column-gap: 3px; row-gap: 5px; }
  .reservation-page .cal-day { height: 37px; border-radius: 10px; font-size: 13px; }
  .reservation-page .slot-list { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .reservation-page .slot { min-height: 46px; padding: 9px 0; font-size: 14px; }
  .reservation-page .summary { padding: 6px 16px; border-radius: 15px; }
  .reservation-page .summary .row { min-height: 0; padding: 14px 0; align-items: flex-start; }
  .reservation-page .summary dd { margin-top: 3px; font-size: 15px; text-align: left; }
  .reservation-page .field input[type="text"],
  .reservation-page .field input[type="tel"],
  .reservation-page .field input[type="email"],
  .reservation-page .field input[type="password"] { min-height: 52px; }
  .reservation-page .panel-actions { flex-direction: column-reverse; align-items: stretch; margin-top: 26px; }
  .reservation-page .panel-actions .btn { width: 100%; min-width: 0; }
  .reservation-page .complete-card { padding: 30px 18px; border-radius: 20px; }
  .reservation-page .done-icon { width: 72px; height: 72px; font-size: 38px; }
}

@media (max-width: 390px) {
  .reservation-page .header-nav > a { padding: 0 9px; font-size: 10px; }
  .reservation-page .welcome-text { display: none; }
  .reservation-page .slot-list { grid-template-columns: repeat(2, 1fr); }
}

/* 回数券残数と回数券予約 */
.reservation-page .pass-balance-card{max-width:920px;margin:0 auto 22px;padding:20px 22px;border:1px solid #9ad8b9;border-radius:18px;background:linear-gradient(135deg,#effcf4,#f8fffb);box-shadow:0 8px 20px rgba(25,115,73,.08)}
.reservation-page .pass-balance-card[hidden]{display:none!important}
.reservation-page .pass-balance-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:14px}
.reservation-page .pass-balance-card__eyebrow{margin:0 0 5px;color:#208355;font-family:"Montserrat","Noto Sans JP",sans-serif;font-size:11px;font-weight:900;letter-spacing:.13em}
.reservation-page .pass-balance-card h3{margin:0;color:#126340;font-size:19px;line-height:1.35}
.reservation-page .pass-balance-card__head > div > p:last-child{margin:5px 0 0;color:#4e7865;font-size:12px;line-height:1.7}
.reservation-page .pass-balance-card__total{flex:none;display:inline-flex;align-items:center;min-height:38px;padding:6px 13px;border-radius:999px;background:#fff;color:#147447;border:1px solid #a8e0be;font-size:13px;font-weight:900;white-space:nowrap}
.reservation-page .pass-choice-list{display:grid;gap:10px}
.reservation-page .pass-choice{position:relative;display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:11px;min-height:78px;padding:13px 15px;border:1px solid #bce8cd;border-radius:13px;background:#fff;cursor:pointer;transition:.18s ease}
.reservation-page .pass-choice:hover{border-color:#56bc84;box-shadow:0 6px 14px rgba(25,115,73,.1);transform:translateY(-1px)}
.reservation-page .pass-choice:has(input:checked){border-color:#22915c;background:#f5fff8;box-shadow:0 3px 0 #aee4c4}
.reservation-page .pass-choice input{position:absolute;opacity:0;pointer-events:none}
.reservation-page .pass-choice__icon{display:grid;place-items:center;width:22px;height:22px;border:1px solid #9bcfaf;border-radius:50%;background:#fff;color:transparent;font-size:13px;font-weight:900}
.reservation-page .pass-choice:has(input:checked) .pass-choice__icon{border-color:#23955e;background:#23955e;color:#fff}
.reservation-page .pass-choice__body{display:grid;gap:4px;min-width:0}
.reservation-page .pass-choice__body strong{color:#155d3d;font-size:15px;line-height:1.35}
.reservation-page .pass-choice__body span{color:#668275;font-size:11px;line-height:1.4}
.reservation-page .pass-choice__remaining{display:block;padding-left:12px;border-left:1px solid #d9efdf;color:#648270;font-size:10px;font-weight:800;line-height:1.25;text-align:center;white-space:nowrap}
.reservation-page .pass-choice__remaining b{display:block;margin-top:2px;color:#198955;font-size:18px;line-height:1.1}
@media (max-width:640px){.reservation-page .pass-balance-card{margin-bottom:16px;padding:16px}.reservation-page .pass-balance-card__head{gap:12px;align-items:flex-start}.reservation-page .pass-balance-card h3{font-size:17px}.reservation-page .pass-balance-card__head > div > p:last-child{font-size:11px}.reservation-page .pass-balance-card__total{min-height:32px;padding:5px 9px;font-size:11px}.reservation-page .pass-choice{grid-template-columns:20px 1fr auto;gap:8px;min-height:72px;padding:11px}.reservation-page .pass-choice__icon{width:19px;height:19px;font-size:11px}.reservation-page .pass-choice__body strong{font-size:13px}.reservation-page .pass-choice__body span{font-size:10px}.reservation-page .pass-choice__remaining{padding-left:8px}.reservation-page .pass-choice__remaining b{font-size:16px}}


/* Seat selection ------------------------------------------------ */
.reservation-page .seat-choice-panel {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid #cbe8f8;
  border-radius: 16px;
  background: linear-gradient(135deg, #f8fdff 0%, #fff 100%);
}
.reservation-page .seat-choice-panel[hidden] { display: none !important; }
.reservation-page .seat-choice-panel__head { margin-bottom: 12px; }
.reservation-page .seat-choice-panel__eyebrow {
  margin: 0 0 3px;
  color: var(--res-blue-500);
  font-family: var(--font-en, sans-serif);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
}
.reservation-page .seat-choice-panel h3 {
  margin: 0;
  color: var(--res-blue-900);
  font-size: 18px;
  font-weight: 900;
}
.reservation-page .seat-choice-panel p:not(.seat-choice-panel__eyebrow) {
  margin: 5px 0 0;
  color: var(--res-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.65;
}
.reservation-page .seat-choice-list { display: grid; gap: 10px; }
.reservation-page .seat-choice {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 11px;
  min-height: 70px;
  padding: 13px 14px;
  border: 1px solid var(--res-line);
  border-radius: 13px;
  background: #fff;
  cursor: pointer;
  transition: .16s ease;
}
.reservation-page .seat-choice:hover { border-color: var(--res-blue-500); background: #f8fdff; }
.reservation-page .seat-choice.is-selected { border: 2px solid var(--res-blue-500); background: #edf9ff; box-shadow: 0 6px 16px rgba(41,171,226,.14); }
.reservation-page .seat-choice.is-disabled { opacity: .48; cursor: not-allowed; background: #f7f9fb; }
.reservation-page .seat-choice__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  color: var(--res-blue-800);
  background: var(--res-blue-100);
  font-size: 20px;
}
.reservation-page .seat-choice__main { min-width: 0; }
.reservation-page .seat-choice__main strong { display: block; color: var(--res-blue-900); font-size: 15px; font-weight: 900; }
.reservation-page .seat-choice__main span { display: block; margin-top: 2px; color: var(--res-muted); font-size: 11px; font-weight: 600; }
.reservation-page .seat-choice__state { color: var(--res-green); font-size: 12px; font-weight: 900; white-space: nowrap; }
.reservation-page .seat-choice.is-disabled .seat-choice__state { color: var(--res-red); }
.reservation-page .slot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.reservation-page .slot small { color: inherit; opacity: .72; font-size: 10px; font-weight: 900; white-space: nowrap; }
@media (max-width: 640px) {
  .reservation-page .seat-choice-panel { padding: 14px; }
  .reservation-page .seat-choice { grid-template-columns: 34px 1fr; min-height: 66px; padding: 11px; }
  .reservation-page .seat-choice__state { grid-column: 2; justify-self: start; }
}

/* Reservation header: shared Whity image brand -------------------------------- */
.reservation-page .logo.logo-image {
  display:inline-flex; align-items:center; flex:0 0 auto; width:auto; max-width:220px; height:46px;
  padding:0; border:0; background:transparent; box-shadow:none;
}
.reservation-page .logo.logo-image img {
  display:block; width:auto; max-width:100%; height:46px; object-fit:contain; object-position:left center;
}
@media (max-width: 640px){
  .reservation-page .site-header .container.header-inner,
  .reservation-page .header-inner { width:min(100% - 24px,1120px); min-height:60px; padding:8px 0; gap:10px; }
  .reservation-page .logo.logo-image { height:36px; max-width:145px; }
  .reservation-page .logo.logo-image img { height:36px; }
  .reservation-page .header-nav > a { min-height:34px; padding:0 10px; font-size:10px; }
  .reservation-page .welcome-text { display:none; }
}


/* =========================================================
   FINAL RESPONSIVE / LINE LOGO RESTORE PATCH — 2026-07-08
   - LINE icon is shown in fixed CTA again.
   - Prevents common mobile horizontal overflow.
   - Keeps forms, reservation UI, cards and tables readable on small screens.
   ========================================================= */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
img, svg, video, canvas, iframe {
  max-width: 100%;
}
img {
  height: auto;
}
.container,
.page-container,
.reservation-page .container {
  box-sizing: border-box;
  max-width: min(1120px, calc(100% - 32px));
}
pre, code, table {
  max-width: 100%;
}

/* LINEアイコン復旧：以前のスマホ最適化で非表示にした指定を上書き */
.sticky-cta .sticky-cta-line-icon-wrap,
.sticky-cta-line-icon-wrap {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 32px !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 9px !important;
  overflow: hidden !important;
  background: #06c755 !important;
}
.sticky-cta .sticky-cta-line-icon,
.sticky-cta-line-icon {
  display: block !important;
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.sticky-cta-line {
  gap: 8px !important;
}

@media (max-width: 767px) {
  body {
    padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important;
  }

  .container,
  .page-container,
  .reservation-page .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .site-header,
  .header-inner {
    width: 100% !important;
    max-width: 100% !important;
  }
  .header-inner {
    gap: 8px !important;
  }
  .header-nav,
  .header-nav-member {
    min-width: 0 !important;
  }
  .site-header .logo img,
  .site-header .header-logo-img,
  .footer-logo-img {
    max-width: 150px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Bottom CTA: LINEロゴを残しつつ、2ボタンを押しやすく */
  .sticky-cta {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9000 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    background: rgba(255,255,255,.98) !important;
    border-radius: 0 !important;
    border-top: 1px solid #d4e4eb !important;
    box-shadow: 0 -2px 12px rgba(21,81,143,.08) !important;
    transform: none !important;
  }
  .sticky-cta > .sticky-cta-btn,
  .sticky-cta > a.sticky-cta-primary,
  .sticky-cta > a.sticky-cta-line {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }
  .sticky-cta .sticky-cta-reservation-icon-wrap,
  .sticky-cta .sticky-cta-reservation-arrow,
  .sticky-cta .sticky-cta-line-arrow,
  .sticky-cta .sticky-cta-reservation-sub,
  .sticky-cta .sticky-cta-line-sub {
    display: none !important;
  }
  .sticky-cta .sticky-cta-line-icon-wrap {
    display: grid !important;
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 8px !important;
  }
  .sticky-cta .sticky-cta-line-icon {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
  }
  .sticky-cta .sticky-cta-reservation-text,
  .sticky-cta .sticky-cta-line-text {
    display: block !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  .sticky-cta .sticky-cta-reservation-main,
  .sticky-cta .sticky-cta-line-main {
    display: block !important;
    color: inherit !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  /* Common grid/cards */
  .features-grid,
  .reason-grid,
  .flow-grid,
  .plan-grid,
  .pricing-grid,
  .voice-grid,
  .access-grid,
  .contact-grid,
  .datetime-grid,
  .dashboard-grid,
  .admin-grid,
  .cards-grid {
    grid-template-columns: 1fr !important;
  }
  .card,
  .panel,
  .menu-card-main,
  .payment-options,
  .summary-card,
  .calendar-wrap,
  .slot-wrap,
  .faq-item,
  .voice-card,
  .access-card,
  .contact-card {
    max-width: 100% !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  /* Reservation UI */
  .reservation-page #step-indicator.steps,
  .reservation-page .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .reservation-page #step-indicator .step,
  .reservation-page .step {
    min-width: 0 !important;
    padding: 9px 6px !important;
    font-size: 12px !important;
  }
  .payment-radios,
  .payment-options,
  .form-grid,
  .member-form-grid {
    grid-template-columns: 1fr !important;
  }
  input, select, textarea, button {
    max-width: 100% !important;
  }
  .slot-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Long text / tables */
  .table-wrap,
  .admin-table-wrap,
  .ledger-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Images in content */
  .flow-photo,
  .step img,
  .voice-ba img,
  .hero-img,
  .main-visual img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  /* BAR Tnb限定ページ */
  .bartnb-page main.container {
    padding-top: 16px !important;
  }
  .bartnb-page .panel {
    overflow: hidden !important;
  }
}

@media (max-width: 380px) {
  .sticky-cta .sticky-cta-reservation-main,
  .sticky-cta .sticky-cta-line-main {
    font-size: 12px !important;
  }
  .sticky-cta .sticky-cta-line-icon-wrap {
    flex-basis: 24px !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }
  .sticky-cta .sticky-cta-line-icon {
    width: 24px !important;
    height: 24px !important;
  }
}

/* ============================================================
   PC版：確認・支払い画面のコンテンツを中央揃え
   予約内容、キャンセル案内、同意欄を同じ中央カラムに統一
============================================================ */
@media (min-width: 761px) {
  body.reservation-page #panel-3 {
    width: min(100%, 960px);
    margin-right: auto !important;
    margin-left: auto !important;
  }

  body.reservation-page #panel-3 > .panel-title,
  body.reservation-page #panel-3 > .panel-note,
  body.reservation-page #panel-3 > .summary,
  body.reservation-page #panel-3 > .booking-policy-note,
  body.reservation-page #panel-3 > .agree {
    width: 100%;
    max-width: 760px;
    margin-right: auto !important;
    margin-left: auto !important;
    box-sizing: border-box;
  }

  body.reservation-page #panel-3 > .panel-title {
    text-align: left;
  }

  body.reservation-page #panel-3 > .panel-note {
    text-align: center;
  }
}

/* 2026-07-24: reservation portal mobile hero visibility fix */
@media (max-width: 760px) {
  /*
   * 共通style.cssのモバイル設定でヘッダーが2段になり、
   * stickyヘッダーがヒーロー見出しへ重なる問題を防ぎます。
   */
  .reservation-page .site-header {
    position: relative !important;
    top: auto !important;
  }

  .reservation-page .site-header .container.header-inner,
  .reservation-page .header-inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: calc(100% - 28px) !important;
    max-width: 1120px !important;
    min-height: 68px !important;
    margin: 0 auto !important;
    padding: 8px 0 !important;
    gap: 10px !important;
  }

  .reservation-page .logo.logo-image {
    flex: 0 1 145px !important;
    width: auto !important;
    max-width: 145px !important;
    height: 38px !important;
  }

  .reservation-page .logo.logo-image img {
    width: auto !important;
    max-width: 100% !important;
    height: 38px !important;
    object-fit: contain !important;
  }

  .reservation-page .header-nav {
    order: initial !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .reservation-page .header-nav > a {
    min-height: 36px !important;
    padding: 0 12px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  /*
   * WEB予約見出しを必ずヒーロー内へ収め、
   * スクロール位置の復元時にも見切れないようにします。
   */
  .reservation-page .hero {
    overflow: hidden !important;
    padding: 34px 0 32px !important;
  }

  .reservation-page .hero .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .reservation-page .hero-eyebrow,
  .reservation-page .hero-title,
  .reservation-page .hero-lead {
    position: static !important;
    transform: none !important;
  }

  .reservation-page .hero-eyebrow {
    margin: 0 0 7px !important;
  }

  .reservation-page .hero-title {
    margin: 0 !important;
    font-size: clamp(29px, 8.5vw, 38px) !important;
    line-height: 1.3 !important;
  }

  .reservation-page .hero-lead {
    margin: 10px auto 0 !important;
  }
}

@media (max-width: 390px) {
  .reservation-page .site-header .container.header-inner,
  .reservation-page .header-inner {
    width: calc(100% - 22px) !important;
    gap: 7px !important;
  }

  .reservation-page .logo.logo-image {
    flex-basis: 126px !important;
    max-width: 126px !important;
    height: 34px !important;
  }

  .reservation-page .logo.logo-image img {
    height: 34px !important;
  }

  .reservation-page .header-nav > a {
    padding: 0 9px !important;
    font-size: 9px !important;
  }
}

/* 2026-07-24: reservation mobile header single-row fix v2 */
@media (max-width: 760px) {
  /*
   * 共通style.cssではスマホ用ナビゲーションがヘッダー直下へ
   * absolute配置されます。予約ページでは戻るボタンを常に
   * ロゴと同じヘッダー内へ配置します。
   */
  body.reservation-page .site-header {
    position: relative !important;
    top: auto !important;
    min-height: 0 !important;
    background: #fff !important;
  }

  body.reservation-page .site-header .container.header-inner,
  body.reservation-page .header-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    justify-content: stretch !important;
    width: calc(100% - 28px) !important;
    max-width: 1120px !important;
    min-height: 72px !important;
    margin: 0 auto !important;
    padding: 8px 0 !important;
    gap: 10px !important;
  }

  body.reservation-page .logo.logo-image {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    flex: none !important;
    width: auto !important;
    max-width: 145px !important;
    height: 40px !important;
    margin: 0 !important;
  }

  body.reservation-page .logo.logo-image img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: 40px !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  body.reservation-page .site-header .header-nav,
  body.reservation-page .header-nav {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: auto !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    display: flex !important;
    flex: none !important;
    align-items: center !important;
    justify-content: flex-end !important;
    order: initial !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.reservation-page .site-header .header-nav > a,
  body.reservation-page .header-nav > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid var(--res-line) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--res-blue-800) !important;
    box-shadow: none !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  /* ヘッダー直下に余分な白い帯が残らないようにする */
  body.reservation-page .site-header + .hero {
    margin-top: 0 !important;
  }

  body.reservation-page .hero {
    clear: both !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 390px) {
  body.reservation-page .site-header .container.header-inner,
  body.reservation-page .header-inner {
    width: calc(100% - 22px) !important;
    min-height: 66px !important;
    gap: 7px !important;
  }

  body.reservation-page .logo.logo-image {
    max-width: 118px !important;
    height: 34px !important;
  }

  body.reservation-page .logo.logo-image img {
    height: 34px !important;
  }

  body.reservation-page .site-header .header-nav > a,
  body.reservation-page .header-nav > a {
    min-height: 36px !important;
    padding: 0 10px !important;
    font-size: 9px !important;
  }
}

/* 2026-07-24: login/register mobile header placement fix v3 */
@media (max-width: 760px) {
  body.reservation-page[data-page="reservation-login"] .site-header,
  body.reservation-page[data-page="reservation-register"] .site-header {
    position: relative !important;
    top: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  body.reservation-page[data-page="reservation-login"] .site-header::before,
  body.reservation-page[data-page="reservation-login"] .site-header::after,
  body.reservation-page[data-page="reservation-register"] .site-header::before,
  body.reservation-page[data-page="reservation-register"] .site-header::after {
    content: none !important;
    display: none !important;
  }

  body.reservation-page[data-page="reservation-login"] .site-header .container.header-inner,
  body.reservation-page[data-page="reservation-login"] .header-inner,
  body.reservation-page[data-page="reservation-register"] .site-header .container.header-inner,
  body.reservation-page[data-page="reservation-register"] .header-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    width: calc(100% - 28px) !important;
    max-width: 1120px !important;
    min-height: 72px !important;
    margin: 0 auto !important;
    padding: 8px 0 !important;
    gap: 10px !important;
  }

  body.reservation-page[data-page="reservation-login"] .logo.logo-image,
  body.reservation-page[data-page="reservation-register"] .logo.logo-image {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    width: auto !important;
    max-width: 145px !important;
    height: 40px !important;
    margin: 0 !important;
  }

  body.reservation-page[data-page="reservation-login"] .logo.logo-image img,
  body.reservation-page[data-page="reservation-register"] .logo.logo-image img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: 40px !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  body.reservation-page[data-page="reservation-login"] .site-header .header-nav,
  body.reservation-page[data-page="reservation-login"] .header-nav,
  body.reservation-page[data-page="reservation-register"] .site-header .header-nav,
  body.reservation-page[data-page="reservation-register"] .header-nav {
    position: static !important;
    inset: auto !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.reservation-page[data-page="reservation-login"] .header-nav::before,
  body.reservation-page[data-page="reservation-login"] .header-nav::after,
  body.reservation-page[data-page="reservation-register"] .header-nav::before,
  body.reservation-page[data-page="reservation-register"] .header-nav::after {
    content: none !important;
    display: none !important;
  }

  body.reservation-page[data-page="reservation-login"] .header-nav > a,
  body.reservation-page[data-page="reservation-register"] .header-nav > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid var(--res-line) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--res-blue-800) !important;
    box-shadow: none !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  body.reservation-page[data-page="reservation-login"] .site-header + .hero,
  body.reservation-page[data-page="reservation-register"] .site-header + .hero {
    margin-top: 0 !important;
  }

  body.reservation-page[data-page="reservation-login"] .hero,
  body.reservation-page[data-page="reservation-register"] .hero {
    clear: both !important;
    margin: 0 !important;
  }
}

@media (max-width: 390px) {
  body.reservation-page[data-page="reservation-login"] .site-header .container.header-inner,
  body.reservation-page[data-page="reservation-login"] .header-inner,
  body.reservation-page[data-page="reservation-register"] .site-header .container.header-inner,
  body.reservation-page[data-page="reservation-register"] .header-inner {
    width: calc(100% - 22px) !important;
    min-height: 66px !important;
    gap: 7px !important;
  }

  body.reservation-page[data-page="reservation-login"] .logo.logo-image,
  body.reservation-page[data-page="reservation-register"] .logo.logo-image {
    max-width: 118px !important;
    height: 34px !important;
  }

  body.reservation-page[data-page="reservation-login"] .logo.logo-image img,
  body.reservation-page[data-page="reservation-register"] .logo.logo-image img {
    height: 34px !important;
  }

  body.reservation-page[data-page="reservation-login"] .header-nav > a,
  body.reservation-page[data-page="reservation-register"] .header-nav > a {
    min-height: 36px !important;
    padding: 0 10px !important;
    font-size: 9px !important;
  }
}