:root {
  --red: #e60012;
  --red-dark: #c4000f;
  --white: #ffffff;
  --gray-bg: #f0f0f0;
  --gray-border: #cccccc;
  --green: #1a8f3a;
  --green-dark: #157a31;
  --text: #222222;
  --muted: #888888;
  --yellow-active: #ffd400;
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.12);

  /**
   * 横型バー：ヘッダー／コピーライトは共通。下部タブは2行ラベル用にやや高め。
   */
  --app-bar-height: clamp(52px, 14vmin, 74px);
  --hdr-height: var(--app-bar-height);
  --ftr-height: clamp(76px, 18.5vmin, 104px);
  --copyright-bar-h: var(--app-bar-height);

  --hdr-fs: clamp(15px, 3.85vmin, 20px);
  --hdr-padx: clamp(8px, 2.3vmin, 14px);

  /* 下部タブ：2行ラベル・大きめ太字 */
  --ftr-fs: clamp(18px, 5vmin, 27px);
  --ftr-pady: clamp(4px, 1.05vmin, 7px);
  --ftr-padx: clamp(3px, 1vmin, 7px);
  --ftr-gap: clamp(3px, 0.85vmin, 6px);
  --ftr-btn-rad: clamp(6px, 1.6vmin, 10px);
  --ftr-outline: clamp(2px, 0.55vmin, 4px);

  --ftr-badge-fs: clamp(18px, 4.5vmin, 24px);
  --ftr-badge-size: clamp(33px, 8.25vmin, 46px);
  --ftr-badge-off-y: clamp(-8px, -1.5vmin, -11px);
  --ftr-badge-off-x: clamp(-3px, -0.85vmin, -7px);

  --main-pad: clamp(8px, 2.4vmin, 14px);
  --main-bottom: calc(var(--ftr-height) + clamp(10px, 2.5vmin, 16px));
  --main-bottom-landing: calc(var(--app-bar-height) + clamp(12px, 3vmin, 20px));

  --fs-xs: clamp(10px, 2.35vmin, 12px);
  --fs-sm: clamp(11px, 2.5vmin, 13px);
  --fs-md: clamp(13px, 2.75vmin, 15px);
  --fs-ml: clamp(14px, 2.9vmin, 16px);
  --fs-lg: clamp(15px, 3.05vmin, 18px);
  --fs-xl: clamp(16px, 3.2vmin, 20px);
  --fs-2xl: clamp(17px, 3.45vmin, 22px);
  --fs-3xl: clamp(18px, 3.65vmin, 24px);

  /* 数量選択：商品名・料金の共通サイズ */
  --detail-item-fs: clamp(26px, 5.6vmin, 38px);
  /* 数量選択：下部ボタン文字（ボタン内いっぱいに近づける） */
  --detail-actions-fs: clamp(17px, 5.2vmin, 28px);

  --logo-mark: clamp(36px, 9.5vmin, 56px);
  --logo-text: clamp(24px, 6.2vmin, 38px);
  --logo-spacing-mark: clamp(-1px, -0.35vmin, -2px);
  --logo-spacing-text: clamp(1px, 0.4vmin, 2px);

  --card-pad: clamp(10px, 2.6vmin, 14px);
  --card-rad: clamp(10px, 2.4vmin, 14px);
  --card-border: clamp(1.5px, 0.4vmin, 2px);

  --space-1: clamp(6px, 1.6vmin, 10px);
  --space-2: clamp(8px, 2vmin, 14px);
  --space-3: clamp(10px, 2.4vmin, 16px);
  --space-4: clamp(12px, 2.8vmin, 20px);
  --space-5: clamp(14px, 3.2vmin, 24px);

  --entry-code-fs: clamp(22px, 6.8vmin, 34px);
  --entry-code-pad-y: clamp(12px, 3.2vmin, 18px);
  --entry-code-pad-x: clamp(14px, 3.8vmin, 22px);
  --entry-code-border: clamp(3px, 0.85vmin, 5px);
  --entry-code-ls: clamp(2px, 0.9vmin, 5px);
  /* 入力欄の外寸（未入力・入力後で同じ高さ）— border-box 用 */
  --entry-code-box-h: calc(
    var(--entry-code-pad-y) * 2 + var(--entry-code-border) * 2 +
      var(--entry-code-fs) * 1.22
  );

  --keypad-gap: clamp(8px, 2.2vmin, 12px);
  --keypad-fs: clamp(36px, 11vmin, 58px);
  --keypad-pad-y: clamp(4px, 1.1vmin, 10px);
  --keypad-del-fs: clamp(23px, 6.2vmin, 36px);
  --keypad-rad: clamp(8px, 2vmin, 12px);
  --keypad-key-rad: clamp(6px, 1.6vmin, 11px);

  --qty-size: clamp(48px, 12vmin, 62px);
  --qty-fs: clamp(22px, 5.6vmin, 34px);
  --qty-gap: clamp(8px, 2.2vmin, 14px);
  --qty-val-minw: clamp(56px, 14vmin, 72px);
  --qty-val-pad: clamp(6px, 1.8vmin, 10px);

  --modal-pad: clamp(16px, 4vmin, 24px);
  --modal-rad: clamp(12px, 3vmin, 18px);
  --modal-border: clamp(2px, 0.55vmin, 4px);

  /* 注文かご・注文履歴の合計行（〇点／合計〇円） */
  --order-summary-fs: clamp(23px, 5.9vmin, 36px);

  /* 注文履歴テーブル専用 */
  --table-fs: clamp(15px, 3.65vmin, 20px);
  --table-cell-pad: clamp(10px, 2.55vmin, 15px);
  --table-th-pad: clamp(11px, 2.8vmin, 16px);

  --copyright-fs: clamp(10px, 2.5vmin, 13px);

  /* TOP「注文をはじめる」— 画面サイズに合わせて文字サイズが変わる */
  --start-btn-fs: clamp(14px, calc(4.8vmin + 0.45rem), 26px);
  --start-btn-pad-y: clamp(8px, calc(2.2vmin + 0.2rem), 14px);
  --start-btn-pad-x: clamp(16px, calc(5vmin + 0.5rem), 44px);
  --start-btn-minh: clamp(42px, calc(10vmin + 1.1rem), 64px);
  --start-btn-maxw: min(300px, 86vw);
  --start-cta-mt: clamp(18px, 4.5vmin, 32px);
  --start-cta-px: clamp(12px, 4.2vw, 36px);

  --notice-pad: clamp(12px, 3.2vmin, 18px);
  --notice-rad: clamp(10px, 2.6vmin, 14px);
  --notice-margin-y: clamp(12px, 3vmin, 20px);

  --party-gap: clamp(8px, 2.4vmin, 14px);
  --party-pad-y: clamp(12px, 3vmin, 18px);
  --party-btn-rad: clamp(12px, 3vmin, 18px);

  --placeholder-pad-y: clamp(28px, 8vmin, 44px);
  --placeholder-pad-x: clamp(12px, 3vmin, 18px);

  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
    Meiryo, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow: hidden;
  background: var(--white);
}

html,
body {
  margin: 0;
  -webkit-text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  /* モバイルでアドレスバー分はみ出して縦にスライドしないよう、可視高さに合わせる */
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100svh;
  max-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--white);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 700;
}

button,
input,
select,
textarea,
optgroup {
  font-weight: 700;
}

a {
  color: inherit;
  text-decoration: none;
}

.app {
  flex: 1 1 auto;
  min-height: 0;
  max-width: min(430px, 100%);
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow-x: visible;
  overflow-y: hidden;
  background: var(--white);
}

.app__header {
  box-sizing: border-box;
  width: 100%;
  flex-shrink: 0;
  height: var(--hdr-height);
  min-height: var(--hdr-height);
  max-height: var(--hdr-height);
  padding: 0 var(--hdr-padx);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: var(--white);
  text-align: center;
  font-size: var(--hdr-fs);
  font-weight: 700;
  line-height: 1.22;
  overflow: hidden;
}

/* ランディングの TOP — 高さは共通のまま、字だけ強調 */
.app__header--landing {
  font-weight: 800;
  letter-spacing: 0.08em;
}

.app__main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--main-pad) var(--main-pad) var(--main-bottom);
  background: var(--white);
}

.app__main--white {
  background: var(--white);
}

/* 注文かご・注文履歴：一覧の枠（かごパネル／履歴テーブル）内だけ縦スクロール */
.app__main.app__main--list-scroll {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* かご：外側の赤枠は固定、中身だけスクロール（.cart-panel__scroll） */
.app__main.app__main--list-scroll > #cart-root {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app__main.app__main--list-scroll > .staff-scroll-area {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.app__main.app__main--list-scroll > .staff-actions {
  flex-shrink: 0;
}

.app__main.app__main--list-scroll > .history-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.app__main.app__main--list-scroll > .summary-bar,
.app__main.app__main--list-scroll > .actions-2,
.app__main.app__main--list-scroll > .history-note,
.app__main.app__main--list-scroll > .history-total {
  flex-shrink: 0;
}

/* 番号入力・数量選択：メイン内コンテンツを縦方向のおおよそ中央へ（はみ出し時は上からスクロール） */
.app__main--v-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@supports (justify-content: safe center) {
  .app__main--v-center {
    justify-content: safe center;
  }
}

.app__footer {
  box-sizing: border-box;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: none;
  height: var(--ftr-height);
  min-height: var(--ftr-height);
  max-height: var(--ftr-height);
  background: var(--red);
  display: flex;
  gap: var(--ftr-gap);
  padding: var(--ftr-pady) var(--ftr-padx);
  justify-content: space-between;
  align-items: stretch;
  z-index: 50;
}

.footer__btn {
  flex: 1;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #ffffff 66.66%,
    #f3f3f3 78%,
    #d6d6d6 100%
  );
  color: var(--red);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--ftr-btn-rad);
  padding: clamp(2px, 0.5vmin, 6px) clamp(1px, 0.35vmin, 4px);
  text-align: center;
  font-size: var(--ftr-fs);
  font-weight: 800;
  line-height: 1.12;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(0, 0, 0, 0.09),
    0 clamp(1px, 0.35vmin, 2px) 0 rgba(0, 0, 0, 0.14);
}

.footer__btn.is-active {
  outline: var(--ftr-outline) solid var(--yellow-active);
  outline-offset: 0;
}

.footer__btn.is-muted {
  color: var(--muted);
}

/* かごが空：見た目は is-muted（会計する）と同じグレー文字、白ボタンのまま。操作のみ不可（<span>） */
.footer__btn--cart-empty,
.footer__btn[aria-disabled="true"] {
  pointer-events: none;
  cursor: not-allowed;
}

.footer__btn-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0px, 0.2vmin, 3px);
  text-align: center;
  max-width: 100%;
  line-height: 1.1;
}

.footer__btn-line {
  display: block;
  white-space: nowrap;
  font-size: inherit;
  font-weight: 800;
  line-height: 1.1;
}

@keyframes footer-badge-blink {
  0%,
  40% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  60%,
  100% {
    opacity: 1;
  }
}

.footer__badge {
  position: absolute;
  top: var(--ftr-badge-off-y);
  right: var(--ftr-badge-off-x);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 clamp(3px, 0.85vmin, 8px);
  background: var(--yellow-active);
  color: var(--text);
  font-size: var(--ftr-badge-fs);
  min-width: var(--ftr-badge-size);
  height: var(--ftr-badge-size);
  line-height: 1;
  border-radius: 999px;
  font-weight: 800;
  animation: footer-badge-blink 1.15s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .footer__badge {
    animation: none;
  }
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: var(--white);
  border: none;
  border-radius: 999px;
  padding: clamp(11px, 2.9vmin, 16px) clamp(18px, 5vmin, 30px);
  font-size: var(--fs-lg);
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.btn-primary:active {
  background: var(--red-dark);
}

.btn-pill {
  border-radius: 999px;
}

.btn-green {
  background: var(--green);
  color: var(--white);
}

.btn-green:active {
  background: var(--green-dark);
}

.btn-block {
  width: 100%;
}

.card {
  background: var(--white);
  border: var(--card-border) solid var(--red);
  border-radius: var(--card-rad);
  padding: var(--card-pad);
  box-shadow: var(--shadow);
}

.notice-box {
  border: 1px solid var(--muted);
  border-radius: var(--notice-rad);
  padding: var(--notice-pad);
  color: var(--muted);
  text-align: center;
  line-height: 1.8;
  font-size: var(--fs-ml);
  margin: var(--notice-margin-y) 0;
}

.landing-logo {
  text-align: center;
  padding: clamp(20px, 6vmin, 36px) 0 clamp(12px, 3.5vmin, 18px);
}

.landing-logo__img {
  display: block;
  margin: 0 auto;
  width: clamp(200px, 82vw, 420px);
  height: auto;
  object-fit: contain;
}

.landing-footer-note {
  text-align: center;
  color: var(--white);
  font-size: var(--fs-sm);
  padding: var(--space-2);
}

/* TOP「注文をはじめる」 */
.landing-cta {
  text-align: center;
  margin-top: var(--start-cta-mt);
  padding: 0 var(--start-cta-px);
}

a.btn-start-order,
a.btn-start-order:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: var(--start-btn-maxw);
  box-sizing: border-box;
  min-height: var(--start-btn-minh);
  padding: var(--start-btn-pad-y) var(--start-btn-pad-x);
  font-size: var(--start-btn-fs);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: 0.05em;
  color: var(--white) !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
  border: 1px solid rgba(120, 0, 0, 0.45);
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    #ff4d5c 0%,
    #e81022 28%,
    #d4000f 55%,
    #a8000c 100%
  );
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    inset 0 -12px 20px rgba(0, 0, 0, 0.1),
    0 clamp(3px, 0.9vmin, 5px) 0 #6b0005,
    0 clamp(6px, 1.8vmin, 12px) clamp(14px, 3.5vmin, 24px) rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.12s ease, box-shadow 0.1s ease;
}

a.btn-start-order:hover {
  filter: brightness(1.04);
}

a.btn-start-order:active {
  transform: translateY(clamp(2px, 0.7vmin, 5px));
  filter: brightness(0.97);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -6px 12px rgba(0, 0, 0, 0.14),
    0 1px 0 #4a0004,
    0 4px 12px rgba(0, 0, 0, 0.2);
}

a.btn-start-order.is-muted,
a.btn-start-order.is-muted:visited {
  cursor: not-allowed;
  pointer-events: none;
  color: #555 !important;
  border-color: rgba(0, 0, 0, 0.12);
  background: linear-gradient(180deg, #e8e8e8 0%, #c8c8c8 55%, #b0b0b0 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 0 rgba(0, 0, 0, 0.08);
}

a.btn-start-order.is-muted:hover,
a.btn-start-order.is-muted:active {
  transform: none;
  filter: none;
}

.party-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--party-gap);
  padding: var(--party-pad-y) 0 var(--space-2);
}

/* 人数ボタン：上は白多め、下だけグレーで立体感（赤文字はそのまま） */
.party-grid button {
  aspect-ratio: 1;
  border: 1px solid #2f2f2f;
  border-radius: var(--party-btn-rad);
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #ffffff 76%,
    #f2f2f2 86%,
    #c9c9c9 100%
  );
  color: var(--red);
  font-weight: 800;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: clamp(2px, 0.8vmin, 6px);
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(0, 0, 0, 0.07),
    0 clamp(1px, 0.35vmin, 2px) 0 rgba(0, 0, 0, 0.14);
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  -webkit-appearance: none;
}

.party-grid__pair {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: last baseline;
  justify-content: center;
  gap: clamp(2px, 0.4vmin, 6px);
  max-width: 100%;
}

@supports not (align-items: last baseline) {
  .party-grid__pair {
    align-items: baseline;
  }
}

.party-grid__num {
  font-size: clamp(42px, 18vmin, 76px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
  margin: 0;
  padding: 0;
}

.party-grid__suf {
  font-size: clamp(22px, 6.5vmin, 34px);
  font-weight: 800;
  line-height: 1;
  margin: 0;
  padding: 0;
  /* ゴシック体で「人」の見た目下辺を数字に合わせる */
  transform: translateY(0.06em);
}

/* 9人以上：上段は「9」「人」横並び、下段「以上」 */
.party-grid button.party-grid__btn--nine {
  flex-direction: column;
  justify-content: center;
  gap: clamp(1px, 0.35vmin, 4px);
}

.party-grid__btn--nine .party-grid__num {
  font-size: clamp(38px, 16vmin, 68px);
}

.party-grid__btn--nine .party-grid__suf {
  font-size: clamp(20px, 6vmin, 30px);
  padding: 0;
  transform: translateY(0.06em);
}

.party-grid__btn--nine .party-grid__row2 {
  font-size: clamp(20px, 8.5vmin, 34px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.party-grid button:active {
  transform: translateY(1px);
  filter: brightness(0.98);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05),
    0 0 0 rgba(0, 0, 0, 0.08);
}

.entry-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.entry-preview {
  width: 100%;
  box-sizing: border-box;
  background: #ffc9c9;
  border-radius: var(--keypad-rad);
  padding: var(--space-3);
  font-size: clamp(20px, 4.6vmin, 30px);
  font-weight: 900;
  line-height: 1.35;
  min-height: clamp(56px, 13.5vmin, 84px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}

.entry-next {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  width: 50%;
  max-width: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(
    180deg,
    #ff4d5c 0%,
    #e81022 32%,
    #d4000f 62%,
    #a8000c 100%
  );
  color: var(--white);
  border: 1px solid rgba(100, 0, 0, 0.48);
  border-radius: clamp(8px, 2vmin, 12px);
  /* 縦は TOP「注文をはじめる」と同じトークン */
  min-height: var(--start-btn-minh);
  padding: var(--start-btn-pad-y) clamp(4px, 1.5vmin, 10px);
  font-size: var(--start-btn-fs);
  font-weight: 800;
  line-height: 1.12;
  cursor: pointer;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -6px 10px rgba(0, 0, 0, 0.07),
    0 clamp(1px, 0.45vmin, 3px) 0 #6b0005,
    0 clamp(3px, 1vmin, 6px) clamp(8px, 2vmin, 12px) rgba(0, 0, 0, 0.2);
  -webkit-tap-highlight-color: transparent;
}

.entry-next.entry-next--inactive,
.entry-next:disabled {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.58;
  filter: grayscale(0.92);
  color: #555;
  background: linear-gradient(
    180deg,
    #f2f2f2 0%,
    #dedede 45%,
    #c8c8c8 100%
  );
  border: 1px solid rgba(0, 0, 0, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06),
    0 clamp(1px, 0.35vmin, 2px) 0 rgba(0, 0, 0, 0.08);
}

.entry-next.entry-next--inactive:active,
.entry-next:disabled:active {
  transform: none;
  filter: grayscale(0.92);
}

.entry-next:not(:disabled):not(.entry-next--inactive):active {
  transform: translateY(clamp(1px, 0.4vmin, 3px));
  filter: brightness(0.97);
}

.entry-input {
  box-sizing: border-box;
  height: var(--entry-code-box-h);
  min-height: var(--entry-code-box-h);
  max-height: var(--entry-code-box-h);
  border: var(--entry-code-border) solid var(--red);
  border-radius: 999px;
  padding: var(--entry-code-pad-y) var(--entry-code-pad-x);
  font-size: var(--entry-code-fs);
  font-weight: 800;
  text-align: center;
  letter-spacing: var(--entry-code-ls);
  margin-bottom: var(--space-3);
  background: var(--white);
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  flex-shrink: 0;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--keypad-gap);
}

.keypad button {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: var(--keypad-pad-y) 0;
  font-size: var(--keypad-fs);
  font-weight: 800;
  line-height: 1;
  color: #141414;
  border: 1px solid #2f2f2f;
  border-radius: var(--keypad-key-rad);
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #efefef 42%,
    #d6d6d6 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(0, 0, 0, 0.07),
    0 clamp(1px, 0.35vmin, 2px) 0 rgba(0, 0, 0, 0.14);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.keypad button:not(.keypad__del):active:not(:disabled) {
  transform: translateY(1px);
  filter: brightness(0.98);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05),
    0 0 0 rgba(0, 0, 0, 0.08);
}

.keypad .keypad__del {
  background: linear-gradient(
    180deg,
    #2ec95a 0%,
    #1a8f3a 48%,
    #126d2c 100%
  );
  color: var(--white);
  border: 1px solid #0d5a25;
  font-size: var(--keypad-del-fs);
  font-weight: 800;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 clamp(1px, 0.35vmin, 2px) 0 rgba(0, 45, 18, 0.38);
}

.keypad .keypad__del:active {
  transform: translateY(1px);
  filter: brightness(0.96);
}

.detail-title {
  font-size: clamp(32px, 7.2vmin, 48px);
  font-weight: 800;
  margin: var(--space-1) 0 var(--space-3);
  line-height: 1.4;
}

.detail-price {
  text-align: right;
  font-size: clamp(32px, 7.2vmin, 48px);
  font-weight: 800;
  margin-bottom: var(--space-2);
}

.qty-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--qty-gap);
  margin: 0 0 var(--space-5) 0;
}

.qty-btn {
  width: var(--qty-size);
  height: var(--qty-size);
  border: clamp(2.5px, 0.75vmin, 4px) solid var(--red);
  border-radius: clamp(6px, 1.6vmin, 10px);
  background: var(--white);
  color: var(--red);
  font-size: var(--qty-fs);
  font-weight: 700;
  cursor: pointer;
}

.qty-val {
  min-width: var(--qty-val-minw);
  text-align: center;
  font-size: var(--qty-fs);
  font-weight: 800;
  border: 1px solid #333;
  padding: var(--qty-val-pad) 0;
  border-radius: clamp(5px, 1.3vmin, 8px);
  background: var(--white);
}

.detail-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

/* 数量選択フッター：エントリー「次へ進む」／キーパッド「削除」系の立体ボタンに合わせる */
.detail-actions .btn-primary {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(52px, 13vmin, 74px);
  border-radius: clamp(10px, 2.4vmin, 16px);
  font-size: var(--detail-actions-fs);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  padding: clamp(5px, 1.35vmin, 9px) clamp(2px, 0.65vmin, 6px);
  cursor: pointer;
  border: 1px solid rgba(100, 0, 0, 0.48);
  color: var(--white);
  background: linear-gradient(
    180deg,
    #ff4d5c 0%,
    #e81022 32%,
    #d4000f 62%,
    #a8000c 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -6px 10px rgba(0, 0, 0, 0.07),
    0 clamp(1px, 0.45vmin, 3px) 0 #6b0005,
    0 clamp(3px, 1vmin, 6px) clamp(8px, 2vmin, 12px) rgba(0, 0, 0, 0.2);
  -webkit-tap-highlight-color: transparent;
}

.detail-actions .btn-primary.btn-green {
  flex: 0.45;
  border: 1px solid #0d5a25;
  background: linear-gradient(
    180deg,
    #2ec95a 0%,
    #1a8f3a 48%,
    #126d2c 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 clamp(1px, 0.35vmin, 2px) 0 rgba(0, 45, 18, 0.38);
}

.detail-actions .btn-primary:active {
  transform: translateY(1px);
  filter: brightness(0.97);
}

/* 注文かご：文言が長いときは横スクロール（文字サイズは他ページと同じ --hdr-fs） */
.app__header--cart {
  height: var(--hdr-height);
  min-height: var(--hdr-height);
  max-height: var(--hdr-height);
  font-size: var(--hdr-fs);
  line-height: 1.22;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.cart-panel {
  border: var(--card-border) solid var(--red);
  border-radius: var(--card-rad);
  background: var(--white);
  margin-bottom: var(--space-3);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.cart-panel__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--card-pad);
}

.cart-panel--empty .cart-panel__empty {
  margin: 0;
  font-weight: 700;
  font-size: var(--fs-ml);
  line-height: 1.5;
}

.cart-panel .cart-line {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3) 0;
}

.cart-panel .cart-line:first-child {
  padding-top: 0;
}

.cart-panel .cart-line + .cart-line {
  border-top: 1px solid var(--gray-border);
}

.cart-panel .cart-line__meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-2);
}

.cart-panel .cart-line__unit-price {
  flex: 1;
  min-width: 0;
  text-align: left;
  align-self: flex-end;
  font-size: clamp(14px, 3.4vmin, 18px);
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  padding-bottom: clamp(2px, 0.5vmin, 4px);
}

.cart-panel .cart-line__qty {
  --qty-size: clamp(38px, 9.5vmin, 50px);
  --qty-fs: clamp(18px, 4.5vmin, 26px);
  --qty-val-minw: clamp(44px, 11vmin, 58px);
  --qty-val-pad: clamp(4px, 1.2vmin, 8px);
  --qty-gap: clamp(6px, 1.6vmin, 10px);
  margin: 0;
  flex-shrink: 0;
  align-self: auto;
  justify-content: flex-end;
}

.cart-panel .cart-line__qty .qty-btn {
  border-width: clamp(2px, 0.55vmin, 3px);
}

.cart-panel .cart-line__name {
  font-size: var(--detail-item-fs);
  font-weight: 800;
  flex: none;
  width: 100%;
  line-height: 1.4;
}

.cart-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.cart-line__name {
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: 1.35;
  flex: 1;
}

.summary-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-5) 0 var(--space-5);
  padding: var(--space-2) 0;
  font-weight: 800;
  font-size: var(--order-summary-fs);
  line-height: 1.2;
}

.actions-2 {
  display: flex;
  gap: var(--space-2);
}

/* 注文かご：数量選択の「もどる／注文かごへ追加」と同系の立体ボタン */
.actions-2 .btn-primary {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(50px, 12.5vmin, 68px);
  border-radius: clamp(10px, 2.4vmin, 16px);
  font-size: var(--detail-actions-fs);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  padding: clamp(5px, 1.35vmin, 9px) clamp(2px, 0.65vmin, 6px);
  cursor: pointer;
  color: var(--white);
  border: 1px solid rgba(100, 0, 0, 0.48);
  background: linear-gradient(
    180deg,
    #ff4d5c 0%,
    #e81022 32%,
    #d4000f 62%,
    #a8000c 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -6px 10px rgba(0, 0, 0, 0.07),
    0 clamp(1px, 0.45vmin, 3px) 0 #6b0005,
    0 clamp(3px, 1vmin, 6px) clamp(8px, 2vmin, 12px) rgba(0, 0, 0, 0.2);
  -webkit-tap-highlight-color: transparent;
}

.actions-2 .btn-primary.btn-green {
  border: 1px solid #0d5a25;
  background: linear-gradient(
    180deg,
    #2ec95a 0%,
    #1a8f3a 48%,
    #126d2c 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 clamp(1px, 0.35vmin, 2px) 0 rgba(0, 45, 18, 0.38);
}

.actions-2 .btn-primary:active {
  transform: translateY(1px);
  filter: brightness(0.97);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--modal-pad);
}

.modal-backdrop.is-open {
  display: flex;
}

.modal-backdrop--success {
  z-index: 110;
}

.modal-actions--single #modal-order-success-ok {
  color: #2a2a2a;
  border: clamp(2px, 0.55vmin, 3px) solid var(--red);
  background: linear-gradient(180deg, #fafafa 0%, #e8e8e8 45%, #cfcfcf 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06),
    0 clamp(1px, 0.35vmin, 2px) 0 rgba(0, 0, 0, 0.12);
}

.modal {
  background: var(--white);
  border: var(--modal-border) solid var(--red);
  border-radius: var(--modal-rad);
  padding: clamp(22px, 5vmin, 34px) clamp(18px, 4.2vmin, 28px);
  max-width: min(400px, 94vw);
  width: 100%;
  text-align: center;
  box-shadow:
    0 clamp(4px, 1.2vmin, 10px) clamp(20px, 4vmin, 36px) rgba(0, 0, 0, 0.2);
}

.modal p {
  margin: 0 0 clamp(28px, 6.5vmin, 44px);
  font-weight: 800;
  font-size: clamp(20px, 5.2vmin, 30px);
  line-height: 1.35;
  color: var(--text);
}

.modal-actions {
  display: flex;
  gap: var(--space-3);
}

.modal-actions button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(50px, 12.5vmin, 68px);
  border-radius: clamp(10px, 2.4vmin, 16px);
  font-size: var(--detail-actions-fs);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  padding: clamp(6px, 1.5vmin, 10px) clamp(4px, 1vmin, 10px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
}

/* モーダル確認：両方グレー立体、文字は濃いグレー */
.modal-actions #modal-no,
.modal-actions #modal-yes {
  color: #2a2a2a;
  background: linear-gradient(
    180deg,
    #fafafa 0%,
    #e8e8e8 45%,
    #cfcfcf 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06),
    0 clamp(1px, 0.35vmin, 2px) 0 rgba(0, 0, 0, 0.12);
}

.modal-actions #modal-no {
  border: 1px solid #9a9a9a;
}

/* はいだけ太めの赤枠（中身はグレーのまま） */
.modal-actions #modal-yes {
  border: clamp(2px, 0.55vmin, 3px) solid var(--red);
}

.modal-actions button:active {
  transform: translateY(1px);
  filter: brightness(0.97);
}

.history-table-wrap {
  background: var(--white);
  border: var(--card-border) solid var(--red);
  border-radius: var(--card-rad);
  overflow-x: hidden;
  overflow-y: auto;
  margin-bottom: clamp(4px, 1vmin, 8px);
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--table-fs);
}

.history-table th {
  background: #e0e0e0;
  padding: var(--table-th-pad) clamp(6px, 1.5vmin, 10px);
  font-weight: 700;
  text-align: left;
}

.app__main.app__main--list-scroll .history-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.history-table th:nth-child(2),
.history-table td:nth-child(2) {
  text-align: center;
  width: clamp(46px, 12vmin, 60px);
}

.history-table th:nth-child(3),
.history-table td:nth-child(3) {
  text-align: right;
  width: clamp(60px, 15vmin, 86px);
}

.history-table td {
  padding: var(--table-cell-pad) clamp(6px, 1.5vmin, 10px);
  border-top: 1px solid #ddd;
  vertical-align: middle;
}

.history-table td:last-child {
  width: clamp(76px, 19vmin, 98px);
  text-align: center;
}

.btn-reorder {
  background: var(--red);
  color: var(--white);
  border: none;
  border-radius: 999px;
  padding: clamp(8px, 2vmin, 12px) clamp(12px, 2.8vmin, 18px);
  font-size: clamp(13px, 3.15vmin, 17px);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.history-note {
  text-align: center;
  color: var(--red);
  font-size: clamp(14px, 3.35vmin, 18px);
  font-weight: 800;
  margin: clamp(4px, 1vmin, 8px) 0 var(--space-3);
}

.history-total {
  width: 100%;
  box-sizing: border-box;
  font-size: var(--order-summary-fs);
  font-weight: 800;
  line-height: 1.2;
  padding: var(--space-3) 0 var(--space-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}

.history-total #hist-points {
  text-align: left;
  flex: 0 1 auto;
}

.history-total #hist-sum {
  text-align: right;
  flex: 0 1 auto;
  min-width: 0;
}

.checkout-loading {
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-lg);
  padding: var(--space-4) 0;
}

.checkout-error {
  text-align: center;
  color: var(--red);
  font-size: var(--fs-md);
  font-weight: 700;
  padding: var(--space-4) var(--main-pad);
  line-height: 1.5;
}

.app__main--checkout {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: var(--main-pad) clamp(6px, 1.6vmin, 10px) var(--main-bottom);
}

.checkout-card {
  container-type: inline-size;
  container-name: checkout;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  flex: 0 1 auto;
  min-height: min(68vh, 520px);
  height: auto;
  padding: clamp(24px, 6vmin, 40px) clamp(20px, 5vmin, 32px);
  box-sizing: border-box;
  border: var(--card-border) solid var(--red);
  border-radius: var(--card-rad);
  background: var(--white);
  color: var(--text);
  text-align: center;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(4px, 1vmin, 8px);
  overflow: hidden;
}

.checkout-card__table {
  margin: 0 0 clamp(14px, 3.5vmin, 20px);
  font-size: clamp(34px, 8.5vmin, 48px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--red);
  overflow-wrap: break-word;
  word-break: normal;
}

.checkout-card__meta {
  margin: 0 0 clamp(16px, 4vmin, 22px);
  padding: 0;
  font-size: var(--fs-md);
  line-height: 1.45;
}

.checkout-card__meta dt {
  margin: 0 0 clamp(4px, 1vmin, 6px);
  font-weight: 700;
  color: var(--muted);
}

.checkout-card__meta dd {
  margin: 0;
  font-weight: 800;
  font-size: var(--fs-ml);
  white-space: nowrap;
}

.checkout-card__summary {
  width: 100%;
  box-sizing: border-box;
  font-size: clamp(18px, 5.8cqi, 30px);
  font-weight: 800;
  line-height: 1.25;
  padding: clamp(12px, 3vmin, 16px) clamp(4px, 1vmin, 8px);
  margin: 0 0 clamp(12px, 3vmin, 16px);
  border-top: 1px solid var(--gray-border);
  border-bottom: 1px solid var(--gray-border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: clamp(6px, 1.5vmin, 10px) var(--space-2);
}

.checkout-card__summary #checkout-total-qty,
.checkout-card__summary #checkout-total-price {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.checkout-card__summary #checkout-total-qty {
  text-align: left;
  flex: 0 1 auto;
}

.checkout-card__summary #checkout-total-price {
  text-align: right;
  flex: 1 1 12em;
  min-width: min(100%, 12em);
}

/* 横一列に収まらないときは合計が次行へ（赤枠は min-height を維持しつつ縦に伸びる） */
@container checkout (max-width: 340px) {
  .checkout-card__summary #checkout-total-price {
    flex: 1 1 100%;
    text-align: right;
  }
}

/* PC など広い表示でも列幅は一定のため、大きい金額用に字を抑える */
@media (min-width: 768px) {
  .app:has(.app__main--checkout) {
    max-width: min(480px, 100%);
  }

  .checkout-card {
    min-height: auto;
    padding: clamp(28px, 4vh, 44px) clamp(24px, 3vw, 36px);
  }

  .checkout-card__summary {
    font-size: clamp(17px, 4.2cqi, 26px);
    padding-left: clamp(8px, 1.5vw, 16px);
    padding-right: clamp(8px, 1.5vw, 16px);
  }
}

@media (max-width: 360px) {
  .checkout-card__summary {
    font-size: clamp(17px, 5.2vmin, 26px);
  }
}

.checkout-card__barcode {
  margin: 0;
  padding: clamp(10px, 2.5vmin, 14px) clamp(8px, 2vmin, 12px);
  background: var(--gray-bg);
  border-radius: clamp(6px, 1.5vmin, 10px);
}

.checkout-card__barcode svg {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0 auto;
}

.checkout-card__barcode-text {
  margin: clamp(8px, 2vmin, 12px) 0 0;
  font-size: clamp(15px, 3.8vmin, 20px);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--text);
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.placeholder-page {
  padding: var(--placeholder-pad-y) var(--placeholder-pad-x);
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-ml);
  line-height: 1.7;
}

.staff-panel {
  display: block;
}

.staff-panel--empty {
  padding: var(--placeholder-pad-y) var(--placeholder-pad-x);
}

.staff-panel__empty {
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-ml);
  line-height: 1.7;
}

.staff-line {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: clamp(8px, 2vmin, 12px);
  padding: clamp(8px, 2vmin, 11px) 0;
}

.staff-line:first-child {
  padding-top: 0;
}

.staff-line + .staff-line {
  border-top: 1px solid var(--gray-border);
}

.staff-line__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(14px, 3.5vmin, 18px);
  font-weight: 800;
  line-height: 1.25;
}

.staff-line__qty {
  --qty-size: clamp(40px, 10vmin, 52px);
  --qty-fs: clamp(19px, 4.8vmin, 26px);
  --qty-val-minw: clamp(38px, 9.5vmin, 48px);
  --qty-val-pad: clamp(4px, 0.9vmin, 6px);
  --qty-gap: clamp(6px, 1.4vmin, 10px);
  margin: 0;
  flex-shrink: 0;
}

.staff-line__qty .qty-btn {
  border-width: clamp(2px, 0.5vmin, 3px);
}

.staff-qty-val {
  min-width: var(--qty-val-minw);
  padding: var(--qty-val-pad);
  text-align: center;
  font-size: var(--qty-fs);
  font-weight: 800;
  line-height: 1;
}

.staff-actions {
  flex-shrink: 0;
  padding-top: var(--space-2);
}

.staff-actions .btn-primary {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(50px, 12.5vmin, 68px);
  border-radius: clamp(10px, 2.4vmin, 16px);
  font-size: var(--detail-actions-fs);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  padding: clamp(5px, 1.35vmin, 9px) clamp(2px, 0.65vmin, 6px);
  cursor: pointer;
  color: var(--white);
  border: 1px solid #0d5a25;
  background: linear-gradient(
    180deg,
    #2ec95a 0%,
    #1a8f3a 48%,
    #126d2c 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 clamp(1px, 0.35vmin, 2px) 0 rgba(0, 45, 18, 0.38);
  -webkit-tap-highlight-color: transparent;
}

.staff-actions .btn-primary:active {
  transform: translateY(1px);
  filter: brightness(0.97);
}

.top-copyright {
  box-sizing: border-box;
  height: var(--copyright-bar-h);
  min-height: var(--copyright-bar-h);
  max-height: var(--copyright-bar-h);
  padding: 0 var(--main-pad);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: var(--white);
  text-align: center;
  font-size: var(--copyright-fs);
}

.app--landing .top-copyright {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  z-index: 40;
}

.app--landing .app__main {
  background: var(--white);
  padding-bottom: var(--main-bottom-landing);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: clamp(4px, 1vmin, 10px);
  overflow-y: hidden;
}

@media (max-height: 700px) {
  .app--landing .landing-logo {
    padding-top: clamp(6px, 1.5vmin, 14px);
    padding-bottom: clamp(2px, 0.6vmin, 8px);
  }
  .app--landing .landing-logo__img {
    width: clamp(180px, 78vw, 380px);
  }
  .app--landing .notice-box {
    margin: clamp(4px, 1vmin, 10px) 0;
    padding: clamp(8px, 2vmin, 12px);
    line-height: 1.45;
  }
  .app--landing .landing-cta {
    margin-top: clamp(4px, 1vmin, 12px);
  }
}

/* 人数選択画面：フッタータブは表示のみ（操作不可） */
.footer-muted .footer__btn {
  color: var(--muted);
  pointer-events: none;
  cursor: not-allowed;
}