/* BUZZ GO member front — 金＋黒のブランドテーマ + レイアウト */

:root {
  /* 販促素材（金のコインと黒い帽子のバズゴー君）に合わせた金・黒基調。
     値はアプリ側 (buzz-go-mobile の src/theme/index.ts) と 1:1 で揃える。

     いちばん大事な原則: 金は面の塗りに使わない。
     金地に白文字はコントラストが足りず読めないので、塗りは黒、その上の文字を金にする。
     ロゴ (public/img/logo/wordmark.png) のオレンジ #f08513 はワードマークの中だけに残す。 */

  /* 金。線とアイコンに使う（面の塗りには使わない） */
  --front-brand: #c8942c;
  /* 塗りの黒。ボタン・ボトムナビ・写真に重ねるバッジ */
  --front-brand-strong: #141414;
  /* 押した/ホバー時に一段やわらげた黒 */
  --front-brand-soft: #3a352e;
  /* 白地に置く金の文字。小さい字でも読める濃さ */
  --front-brand-ink: #8a6113;
  /* 黒地に置く金の文字 */
  --front-brand-on-ink: #e8c87a;
  /* 特典の囲みなどの淡い面 */
  --front-brand-tint: #faf3e3;
  --front-brand-line: #e8d5a8;

  --front-fg: #171512;
  --front-fg-muted: #7a736a;
  --front-fg-subtle: #a49c92;

  /* 画面の地。真っ白より、わずかに暖かい方が金が締まって見える */
  --front-bg: #fbfaf8;
  --front-bg-subtle: #f4f2ee;
  /* 見せ場の面（回数まわりなど） */
  --front-bg-hero: #f2f0ec;
  --front-line: #e8e4dd;
  --front-line-strong: #d5cfc5;
  --front-danger: #c0392b;

  --front-radius-sm: 10px;
  --front-radius: 16px;
  --front-radius-lg: 22px;
  --front-radius-pill: 999px;
  --front-shadow: 0 1px 2px rgba(58, 42, 8, 0.05), 0 4px 12px rgba(58, 42, 8, 0.08);
  --front-shadow-sticky: 0 1px 0 var(--front-line);

  /* 画面共通の左右余白。ページ側で個別に 20px を書かずこれを使う */
  --front-gutter: 16px;
  --front-header-h: 56px;
  /* アプリ本体の幅（ヘッダー・ボトムナビ・シートもこれに揃える） */
  --front-shell-w: 900px;
  /* 固定ボトムナビ + セーフエリアぶんの逃げ */
  --front-nav-h: calc(64px + env(safe-area-inset-bottom, 0px));
}

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

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  color: var(--front-fg);
  font-weight: 700;
  background: var(--front-bg-subtle);
  -webkit-font-smoothing: antialiased;
}

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

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
  vertical-align: middle;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

/* ヘッダーとボトムナビは画面の外枠。中身だけ #app がスクロールする */
body.front-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100dvh;
  overflow: hidden;
}

#app {
  max-width: var(--front-shell-w);
  width: 100%;
  margin: 0 auto;
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  background: var(--front-bg);
}

/* --- header --- */
header.front-header {
  max-width: var(--front-shell-w);
  height: var(--front-header-h);
  padding: 0 var(--front-gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background-color: var(--front-bg);
  border-bottom: 1px solid var(--front-line);
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: 100%;
  flex-shrink: 0;
  z-index: 50;
}

header.front-header .front-header__logo-link {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: fit-content;
  height: fit-content;
  text-decoration: none;
  flex-shrink: 0;
}

header.front-header .front-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  z-index: 1;
}

header.front-header .front-header__hamburger {
  width: 20px;
  height: 14px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

header.front-header .front-header__hamburger li {
  height: 2px;
  border-radius: 30px;
  background-color: var(--front-fg);
  width: 100%;
  transition: 0.2s;
  transform-origin: left top;
}

header.front-header .front-header__hamburger.-active li:nth-child(1) {
  transform: rotate(27deg);
  width: 116%;
}

header.front-header .front-header__hamburger.-active li:nth-child(2) {
  display: none;
}

header.front-header .front-header__hamburger.-active li:nth-child(3) {
  transform: rotate(-27deg);
  width: 113%;
}

.remainingNumber-wrap {
  position: relative;
  flex-shrink: 0;
}

.remainingNumber-wrap .remainingNumber {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--front-radius-pill);
  background-color: var(--front-brand-tint);
  color: var(--front-brand-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}

.remainingNumber .remainingNumber__count {
  font-size: 15px;
  line-height: 1;
}

header.front-header .front-header__login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 14px;
  border-radius: var(--front-radius-pill);
  background: var(--front-brand-strong);
  color: var(--front-brand-on-ink);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

main.front-main {
  flex: 1 0 auto;
  background: var(--front-bg);
}

/* ===== 画面共通のページ見出し ===== */
.front-page-head {
  padding: 20px var(--front-gutter) 4px;
}

.front-page-head__title {
  margin: 0;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.front-page-head__sub {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--front-fg-muted);
  line-height: 1.6;
}

/* --- hamburger --- */
.hamburger_menu {
  max-width: 720px;
  position: fixed;
  top: 0;
  z-index: 100;
  left: -100%;
  width: 80vw;
  height: 100vh;
  transition: 0.2s;
}

.hamburger_menu.hamburger-active {
  left: calc((100% - 900px) / 2);
}

@media screen and (max-width: 900px) {
  .hamburger_menu.hamburger-active {
    left: 0;
  }
}

.hamburger_menu .container {
  height: 100%;
  width: 100%;
  position: relative;
  background-color: var(--front-bg);
  box-shadow: 8px 0 24px rgba(32, 18, 8, 0.12);
}

.hamburger_menu .head_wrap {
  display: flex;
  padding: 0 var(--front-gutter);
  align-items: center;
  height: var(--front-header-h);
  border-bottom: 1px solid var(--front-line);
}

.hamburger_menu .head_wrap .left {
  width: 30px;
  height: 18px;
}

.hamburger_menu .head_wrap .left ul {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.hamburger_menu .head_wrap .left ul li {
  height: 2px;
  border-radius: 30px;
  background-color: var(--front-fg);
  width: 100%;
  transition: 0.2s;
}

/* 開いているときは 2 本を中央で交差させて × にする */
.hamburger_menu .head_wrap .left .-active li:nth-child(1),
.hamburger_menu .head_wrap .left .-active li:nth-child(3) {
  position: absolute;
  top: 50%;
  left: 0;
}

.hamburger_menu .head_wrap .left .-active li:nth-child(1) {
  transform: translateY(-50%) rotate(45deg);
}

.hamburger_menu .head_wrap .left .-active li:nth-child(2) {
  opacity: 0;
}

.hamburger_menu .head_wrap .left .-active li:nth-child(3) {
  transform: translateY(-50%) rotate(-45deg);
}

/* 閉じるボタンぶんを差し引いてロゴをヘッダー中央に置く */
.hamburger_menu .head_wrap .buzz-go-logo--hamburger-head {
  margin: 0 auto;
  padding-right: 30px;
}

.hamburger_menu .wrap {
  transition: 0.2s;
  background-color: #fff;
  height: calc(100% - var(--front-header-h));
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
}

.hamburger_menu .wrap > .top > .buzz-go-logo--hamburger-top {
  margin: 0 auto;
}

.hamburger_menu .wrap .top ul {
  margin-top: 20px;
}

.hamburger_menu .wrap li {
  position: relative;
  transition: 0.2s;
}

.hamburger_menu .wrap .top li {
  padding: 14px 24px 14px 2px;
  border-bottom: 1px solid var(--front-line);
  font-size: 15px;
  cursor: pointer;
}

.hamburger_menu .wrap .top li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--front-line-strong);
  border-right: 2px solid var(--front-line-strong);
  transform: translateY(-50%) rotate(45deg);
}

.hamburger_menu .wrap .top li:hover {
  color: var(--front-brand-ink);
}

.hamburger_menu .wrap .top li:hover::after {
  border-color: var(--front-brand-ink);
}

.hamburger_menu .wrap .bottom li:not(:last-child) {
  margin-bottom: 20px;
}

.hamburger_menu .wrap li a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hamburger_menu .wrap .bottom {
  font-size: 14px;
  font-weight: 500;
  color: var(--front-fg-muted);
  border-top: 1px solid var(--front-line);
  padding-top: 20px;
  padding-bottom: 20px;
}

.hamburger_menu .wrap .bottom li {
  text-align: center;
}

/* --- bottom menu --- */
/* 画面下の外枠。position:fixed だと親の overflow で一緒にスクロールしてしまう */
.bottom_menu {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
  z-index: 40;
  width: 100%;
  max-width: var(--front-shell-w);
  flex-shrink: 0;
  margin: 0 auto;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  /* 画面の底を黒で締めて、選択中だけを金で立たせる */
  background: var(--front-brand-strong);
  border-top: 1px solid var(--front-brand-ink);
}

body.is-front-overlay .bottom_menu {
  pointer-events: none;
}

.bottom_menu ul {
  width: 100%;
  display: flex;
}

.bottom_menu ul li {
  flex: 1 1 0;
}

.bottom_menu .menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  padding: 6px 0 4px;
  color: var(--front-fg-subtle);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  transition: color 0.15s;
}

.bottom_menu .menu-item svg {
  width: 24px;
  height: 24px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bottom_menu .menu-label {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

.bottom_menu .menu-item.is-current {
  color: var(--front-brand-on-ink);
}

/* 黒地なので、塗りは金をごく薄く敷くだけにする（濃く塗ると線が潰れる） */
.bottom_menu .menu-item.is-current svg {
  fill: rgba(232, 200, 122, 0.2);
}

/* --- BUZZ GO logo --- */
.buzz-go-logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

.buzz-go-logo--header {
  max-height: 28px;
}

.buzz-go-logo--footer {
  max-height: 36px;
}

.buzz-go-logo--auth {
  max-height: 44px;
}

.buzz-go-logo--page {
  max-height: 52px;
}

.buzz-go-logo--hamburger-head {
  max-height: 26px;
}

.buzz-go-logo--hamburger-top {
  max-height: 40px;
  margin: 0 auto;
}

.login_container > .buzz-go-logo,
.password_container > .buzz-go-logo,
.register_container > .buzz-go-logo {
  margin: 0 auto 12px;
}

.password_container > .buzz-go-logo {
  margin-bottom: 12px;
}

.login_container > .buzz-go-logo {
  margin-bottom: 12px;
}

.installation-checklist-page__header > .buzz-go-logo,
.partner-application-page__header > .buzz-go-logo {
  margin-bottom: 12px;
}

footer.front-footer .buzz-go-logo {
  margin: 0 auto 20px;
}

.front-auth-character {
  display: flex;
  justify-content: center;
  margin: 0 auto 20px;
}

.front-auth-character .buzzgo-character {
  max-height: 120px;
  width: auto;
}

.buzzgo-character {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

.front-preparation-card__character {
  margin-bottom: 8px;
}

.front-preparation-card__character .buzzgo-character {
  max-height: 180px;
  margin: 0 auto;
}

.partner-application-success__character {
  margin-bottom: 12px;
}

.partner-application-success__character .buzzgo-character {
  max-height: 180px;
  margin: 0 auto;
}

/* --- footer --- */
footer.front-footer {
  flex: 0 0 auto;
  background: var(--front-bg-subtle);
  border-top: 1px solid var(--front-line);
  padding: 28px var(--front-gutter);
  margin-top: 40px;
}

footer.front-footer img {
  width: 132px;
  margin: 0 auto 18px;
  display: block;
}

footer.front-footer ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 10px;
}

footer.front-footer ul li a {
  color: var(--front-fg-muted);
  font-size: 12px;
  font-weight: 500;
}

.common_border {
  border: 1px solid var(--front-line);
  border-radius: var(--front-radius);
  background: var(--front-bg);
  box-shadow: var(--front-shadow);
}

.common_label {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 3px;
  display: block;
  color: #333;
}

/* --- blur / modal --- */
.blur {
  width: 100%;
  height: 100%;
  z-index: 90;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #000;
  opacity: 0.6;
  transition: 0.2s;
}

.home .locationSettingBtnBox.is-hidden,
.blur.is-hidden,
.front-modal.is-hidden {
  display: none !important;
}

/* モーダルは画面下から出るシート形式（親指で届く位置に操作を置く） */
.front-modal {
  width: 100%;
  max-width: var(--front-shell-w);
  position: fixed;
  z-index: 110;
  max-height: 86vh;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  padding: 0 var(--front-gutter) calc(12px + env(safe-area-inset-bottom, 0px));
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
}

.front-modal .scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 閉じるボタンはシート上部に固定表示する */
.front-modal .close_bottun {
  order: -1;
  position: sticky;
  top: 0;
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 8px -4px 0 0;
  font-size: 24px;
  color: var(--front-fg-muted);
  cursor: pointer;
  line-height: 1;
}

.main_modal .ttl {
  font-size: 18px;
  margin-bottom: 16px;
}

.main_modal .right {
  position: sticky;
  bottom: 0;
  margin-top: 20px;
  padding-bottom: 4px;
  display: flex;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 26%);
}

/* --- form controls --- */
.input_wrap,
.select_wrap {
  width: 100%;
  margin-bottom: 16px;
  position: relative;
}

.input_wrap input,
.select_wrap select {
  width: 100%;
  border: 1px solid var(--front-line-strong);
  height: 46px;
  border-radius: var(--front-radius-sm);
  padding: 0 12px;
  font-weight: 500;
  font-size: 15px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.input_wrap input:focus,
.select_wrap select:focus {
  outline: none;
  border-color: var(--front-brand);
  box-shadow: 0 0 0 3px rgba(200, 148, 44, 0.2);
}

.select_wrap::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 12px;
  content: "▾";
  font-size: 16px;
  color: var(--front-fg-muted);
  pointer-events: none;
}

.select_wrap select {
  appearance: none;
  padding-right: 28px;
}

/* 主ボタン。塗りは黒、文字は金。金地にすると文字が読めなくなるので逆にしない */
.front-next-btn {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  color: var(--front-brand-on-ink);
  background-color: var(--front-brand-strong);
  border-radius: var(--front-radius-sm);
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.04em;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(20, 20, 20, 0.18);
  transition: background-color 0.15s, transform 0.08s, box-shadow 0.08s;
}

.front-next-btn:hover {
  background-color: var(--front-brand-soft);
}

/* 押したら少し沈ませる（指の下で反応しているのが分かるように） */
.front-next-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(20, 20, 20, 0.2);
}

/* 押せないときは金をやめる。黒地に薄い金だと「押せそう」に見えてしまう */
.front-next-btn:disabled {
  background-color: var(--front-bg-subtle);
  border-color: var(--front-line-strong);
  color: var(--front-fg-muted);
  box-shadow: none;
  cursor: not-allowed;
}

.front-next-btn:disabled:active {
  transform: none;
}

.front-next-btn.-quiet {
  background-color: var(--front-bg);
  color: var(--front-fg-muted);
  border: 1px solid var(--front-line-strong);
  box-shadow: none;
}

.front-next-btn.-quiet:hover {
  background-color: var(--front-bg-subtle);
}

/* --- home --- */
.home {
  padding: 16px 0 8px;
  margin-top: 0;
}

/* === 今日の状況（ログイン中のトップ主役） ===
   残り回数と「お店をさがす」だけに絞る。節約額はマイページにあるのでここでは持たない。 */
.today-card {
  margin: 0 var(--front-gutter);
  padding: 14px 16px;
  border-radius: var(--front-radius-lg);
  background: linear-gradient(135deg, var(--front-brand-soft) 0%, var(--front-brand-strong) 100%);
  border: 1px solid var(--front-brand-ink);
  color: #fff;
  box-shadow: 0 10px 22px rgba(20, 20, 20, 0.22);
}

.today-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.today-card__lead {
  min-width: 0;
}

.today-card.is-empty {
  background: linear-gradient(135deg, #5b564f 0%, #3a352e 100%);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}

/* 残り 0 回のときは金で誇示しない */
.today-card.is-empty .today-card__count strong {
  color: #fff;
}

.today-card__label {
  font-size: 14px;
  font-weight: 700;
  opacity: 0.92;
}

.today-card__count {
  margin-top: 2px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  line-height: 1;
}

.today-card__count strong {
  color: var(--front-brand-on-ink);
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.today-card__unit {
  font-size: 15px;
  font-weight: 700;
  opacity: 0.9;
}

.today-card__count-prefix {
  font-size: 15px;
  font-weight: 700;
  opacity: 0.9;
}

.today-card__character {
  flex: 0 0 auto;
  height: 104px;
  margin: -14px -8px -14px 0;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.18));
}

.today-card .go-coins {
  margin-top: 6px;
  gap: 8px;
}

.today-card__reset {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.9;
}

.today-card__reset .material-symbols-outlined {
  font-size: 16px;
}

.today-card__reset-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.today-card__actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.today-card__cta {
  flex: 1 1 auto;
  height: 46px;
  border-radius: var(--front-radius-pill);
  background: #fff;
  color: var(--front-brand-ink);
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.today-card__cta .material-symbols-outlined {
  font-size: 20px;
}

.today-card__link {
  flex: 0 0 auto;
  font-size: 13px;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* === 未ログインの価値訴求 === */
.invite-card {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin: 0 var(--front-gutter);
  padding: 20px;
  border-radius: var(--front-radius-lg);
  background: linear-gradient(135deg, var(--front-brand-soft) 0%, var(--front-brand-strong) 100%);
  border: 1px solid var(--front-brand-ink);
  color: #fff;
  box-shadow: 0 10px 22px rgba(20, 20, 20, 0.22);
  overflow: hidden;
}

.invite-card__body {
  min-width: 0;
}

.invite-card__character {
  flex: 0 0 auto;
  height: 132px;
  margin: -20px -10px -20px 0;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.2));
}

.invite-card__title {
  font-size: 19px;
  line-height: 1.45;
}

.invite-card__title strong {
  font-size: 30px;
  letter-spacing: -0.01em;
}

.invite-card__price {
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  line-height: 1;
}

.invite-card__price-label {
  font-size: 13px;
  opacity: 0.9;
}

.invite-card__price strong {
  color: var(--front-brand-on-ink);
  font-size: 34px;
  letter-spacing: -0.02em;
}

.invite-card__price-unit {
  font-size: 14px;
}

.invite-card__note {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 500;
  opacity: 0.92;
  line-height: 1.6;
}

/* === 幅があるとき（PC・タブレット）===
   スマホ向けの縦積みをそのまま伸ばすとカードの真ん中に大きな空白ができる。
   横幅は「文字と絵を大きくする」「操作を横に並べる」ことに使う。
   3カラムに割るので、詰まって折り返さない幅（760px 以上）から適用する。 */
@media (min-width: 760px) {
  .today-card {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 18px 24px;
  }

  /* 数字とバズゴー君は内容ぶんだけにして、余った幅はボタンに使わせる。
     ここを flex:1 にすると数字と絵の間に大きな空きができる。 */
  .today-card__row {
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: 20px;
  }

  /* 幅が足りないときに文字が折り返して崩れるのを防ぐ */
  .today-card__label,
  .today-card__count,
  .today-card__reset {
    white-space: nowrap;
  }

  .today-card__label {
    font-size: 15px;
  }

  .today-card__count strong {
    font-size: 46px;
  }

  .today-card__character {
    height: 128px;
    margin: -18px 0;
  }

  /* ボタンを右カラムに移して、空いていた右半分を操作で埋める */
  .today-card__actions {
    flex: 1 1 auto;
    margin-top: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .today-card__cta {
    height: 52px;
    font-size: 16px;
  }

  .today-card__link {
    text-align: center;
  }

  /* 左右に振り分けると真ん中が空くので、中央にまとめてバナーとして見せる */
  .invite-card {
    justify-content: center;
    gap: 56px;
    padding: 28px 32px;
  }

  .invite-card__title {
    font-size: 24px;
  }

  .invite-card__title strong {
    font-size: 42px;
  }

  .invite-card__price strong {
    font-size: 44px;
  }

  .invite-card__note {
    font-size: 14px;
  }

  .invite-card__character {
    height: 196px;
    margin: -28px 0;
  }
}

.invite-stats {
  margin: 12px var(--front-gutter) 0;
  padding: 12px 0;
  display: flex;
  border: 1px solid var(--front-line);
  border-radius: var(--front-radius);
  background: var(--front-bg);
}

.invite-stat {
  flex: 1 1 0;
  text-align: center;
  border-right: 1px solid var(--front-line);
}

.invite-stat:last-child {
  border-right: none;
}

.invite-stat__value {
  font-size: 20px;
  line-height: 1.2;
  color: var(--front-brand-ink);
}

.invite-stat__label {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  color: var(--front-fg-muted);
}

.invite-actions {
  margin: 16px var(--front-gutter) 0;
}

.invite-actions__primary {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: var(--front-radius-pill);
  background: var(--front-brand-strong);
  color: var(--front-brand-on-ink);
  font-size: 15px;
  box-shadow: 0 4px 12px rgba(20, 20, 20, 0.18);
  transition: transform 0.08s, box-shadow 0.08s;
}

.invite-actions__primary:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(20, 20, 20, 0.2);
}

.invite-actions__sub {
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--front-fg-muted);
}

.invite-actions__sub a {
  color: var(--front-brand-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* === ジャンル（横スクロール） === */
.home-genres__list {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 0 var(--front-gutter) 4px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.home-genres__list::-webkit-scrollbar {
  display: none;
}

.home-genres__list > li {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.home-genre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 60px;
}

.home-genre__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--front-brand-tint);
  color: var(--front-brand-ink);
  border: 1px solid var(--front-brand-line);
  transition: transform 0.12s ease;
}

.home-genre:active .home-genre__icon {
  transform: scale(0.94);
}

.home-genre__icon .material-symbols-outlined {
  font-size: 26px;
}

.home-genre__label {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: var(--front-fg-muted);
}

/* === 写真で見るお店（カルーセル） === */
.home-featured .front-carousel {
  margin: 0 var(--front-gutter);
  border-radius: var(--front-radius-lg);
  overflow: hidden;
  position: relative;
  background: var(--front-bg-subtle);
}

.home-featured__slide {
  display: block;
  position: relative;
}

/* 汎用の .front-carousel__slide img（動画向けに contain + 黒背景）より後に
   同じ詳細度で書くと打ち消せないので、カルーセル配下として明示的に指定する */
.home-featured .front-carousel__slide img {
  aspect-ratio: 5 / 3;
  object-fit: cover;
  width: 100%;
  max-height: 240px;
  background: var(--front-bg-subtle);
}

.home-featured__caption {
  position: absolute;
  inset: auto 0 0;
  padding: 16px;
  color: #fff;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.05) 100%);
}

.home-featured__name {
  font-size: 16px;
  line-height: 1.4;
}

.home-featured__meta {
  margin-top: 2px;
  font-size: 12px;
  opacity: 0.92;
}

.home-featured .front-carousel__dots {
  position: absolute;
  right: 0;
  bottom: 8px;
  left: 0;
  padding: 0;
  z-index: 2;
}

.home-featured .front-carousel__dot {
  background: rgba(255, 255, 255, 0.55);
}

.home-featured .front-carousel__dot.is-selected {
  background: #fff;
}

/* === 位置情報が使えないときの一行 ===
   近い順が既定なので、そうなっていない理由だけを小さく置く */
/* 現在地なしで掲載順に並んでいることの説明と、その場で許可できるボタン */
.home-geo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 var(--front-gutter) 12px;
  padding: 12px 14px;
  border-radius: var(--front-radius);
  background: var(--front-brand-tint);
  border: 1px solid var(--front-brand-line);
}

.home-geo__copy {
  min-width: 0;
  flex: 1 1 auto;
}

.home-geo__title {
  font-size: 13px;
  font-weight: 700;
}

.home-geo__note {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--front-fg-muted);
}

.home-geo__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--front-radius-pill);
  background: var(--front-brand-strong);
  color: var(--front-brand-on-ink);
  font-size: 13px;
  font-weight: 700;
  transition: transform 0.08s;
}

.home-geo__btn:active {
  transform: translateY(1px);
}

.home-geo__btn .material-symbols-outlined {
  font-size: 18px;
}

.home-geo__denied {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 var(--front-gutter) 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--front-fg-muted);
}

.home-geo__denied .material-symbols-outlined {
  font-size: 16px;
}

.home-geo__denied a {
  color: var(--front-brand-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.front-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 24px 0 12px;
}

/* 見出しの左に金の縦線を立てて、節の切れ目を一目で分からせる */
.front-section-head__title {
  position: relative;
  padding-left: 11px;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.front-section-head__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.12em;
  bottom: 0.12em;
  width: 3px;
  border-radius: var(--front-radius-pill);
  background: var(--front-brand);
}

.front-section-head__sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--front-fg-muted);
  line-height: 1.6;
}

.home .front-section-head {
  padding: 0 var(--front-gutter);
}

.home .front-section-head__more {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--front-brand-ink);
  white-space: nowrap;
}

.home .front-section-head__more .material-symbols-outlined {
  font-size: 18px;
  font-weight: 300;
}

#home-nearby {
  scroll-margin-top: calc(var(--front-header-h) + 12px);
}

/* 本日の利用状況（利用履歴ページ）。回数は見せ場なので地より一段沈めた面に置く */
.today-status {
  border: 1px solid var(--front-line);
  border-radius: var(--front-radius);
  background: var(--front-bg-hero);
  padding: 16px;
}

.today-status__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.today-status__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--front-fg-muted);
}

.today-status__count {
  color: var(--front-brand-ink);
  font-size: 13px;
  line-height: 1;
}

.today-status__count strong {
  font-size: 26px;
  line-height: 1;
  margin-right: 1px;
}

.today-status__pips {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

.today-status__pip {
  flex: 1 1 0;
  height: 6px;
  border-radius: var(--front-radius-pill);
  background: var(--front-line);
}

.today-status__pip.is-left {
  background: var(--front-brand);
}

.today-status__note {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--front-fg-subtle);
  line-height: 1.6;
}

.shop_list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 var(--front-gutter);
}

.shop_list > li {
  margin-bottom: 0;
  width: 100%;
}

/* === 空状態 ===
   「無い」で終わらせず、キャラと次の一手を添える */
.empty-state {
  padding: 28px var(--front-gutter) 8px;
  text-align: center;
}

.empty-state__character {
  width: 108px;
  height: auto;
  margin: 0 auto 12px;
  opacity: 0.95;
}

.empty-state__title {
  font-size: 15px;
  line-height: 1.6;
}

.empty-state__note {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--front-fg-muted);
  line-height: 1.7;
}

.empty-state__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin-top: 16px;
  padding: 0 20px;
  border-radius: var(--front-radius-pill);
  background: var(--front-brand-strong);
  color: var(--front-brand-on-ink);
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(20, 20, 20, 0.18);
  transition: transform 0.08s, box-shadow 0.08s;
}

.empty-state__action:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(20, 20, 20, 0.2);
}

/* === 営業状況チップ（一覧・詳細で共通） === */
.state-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.state-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.state-chip.is-open {
  color: #1f8a4c;
}

.state-chip.is-closed {
  color: var(--front-fg-subtle);
}

/* --- restaurant card（トップ/お気に入りの横並びカード） --- */
.shop_card {
  border: 1px solid var(--front-line);
  border-radius: var(--front-radius);
  overflow: hidden;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--front-bg);
  box-shadow: var(--front-shadow);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.shop_card:hover {
  border-color: var(--front-brand-line);
  box-shadow: 0 2px 4px rgba(58, 42, 8, 0.06), 0 8px 20px rgba(58, 42, 8, 0.12);
}

.shop_card .img_warp {
  position: relative;
  flex: 0 0 88px;
  width: 88px;
  border-radius: var(--front-radius-sm);
  overflow: hidden;
  background: var(--front-bg-subtle);
}

.shop_card img.thumb {
  object-fit: cover;
  width: 88px;
  height: 88px;
  min-height: 0;
  max-height: none;
  display: block;
}

.shop_card .wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-right: 4px;
}

.shop_card .name {
  line-height: 1.4;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop_card .read {
  line-height: 1.4;
  font-size: 12px;
  color: var(--front-fg-muted);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* カード全体をリンクにするための透明な当たり判定。
   中身が空の <a> なので、これがないと 0×0 に潰れて押せなくなる。
   カード種別ごとに書くと新しいカードで付け忘れるため、まとめて効かせる。 */
a.cover-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* 店名の下のメタ行（営業状況・距離・エリア）。狭いので1行に収めて溢れは隠す */
.shop_card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--front-fg-muted);
}

.shop_card__area {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop_card__distance {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 700;
  color: var(--front-brand-ink);
  white-space: nowrap;
}

.shop_card__distance .material-symbols-outlined {
  font-size: 14px;
}

/* 「何が無料になるか」。このサービスを使う理由なので枠で囲って独立させる */
.shop_card__benefit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 1px;
  padding: 5px 8px;
  border-radius: var(--front-radius-sm);
  background: var(--front-brand-tint);
  border: 1px solid var(--front-brand-line);
  min-width: 0;
}

.shop_card__benefit-name {
  font-size: 12px;
  color: var(--front-brand-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop_card__benefit-price {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.shop_card__benefit-before {
  font-size: 11px;
  font-weight: 500;
  color: var(--front-fg-subtle);
  text-decoration: line-through;
}

.shop_card__benefit-free {
  font-size: 13px;
  color: var(--front-brand-ink);
}

/* 無料品バッジ（一覧カード共通） */
.benefit-chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 1px 0 0;
  padding: 3px 9px;
  border-radius: var(--front-radius-pill);
  background: var(--front-brand-tint);
  color: var(--front-brand-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

/* --- restaurant card2 (検索結果) 1カラム大判 --- */
.shop_card2 {
  border: 1px solid var(--front-line);
  border-radius: var(--front-radius);
  overflow: hidden;
  width: 100%;
  position: relative;
  background: var(--front-bg);
  box-shadow: var(--front-shadow);
  display: block;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.shop_card2:hover {
  border-color: var(--front-brand-line);
  box-shadow: 0 2px 4px rgba(58, 42, 8, 0.06), 0 8px 20px rgba(58, 42, 8, 0.12);
}

.shop_card2 .img_warp {
  position: relative;
  background: var(--front-bg-subtle);
}

/* 写真の下側を暗く落として、重ねたバッジを写真の明暗に関わらず読めるようにする。
   写真が無い no_image.svg には掛けない（灰色の帯にしか見えないため .is-photo で限定する） */
.shop_card2 .img_warp.is-photo::after,
.shop_tile__media.is-photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 56%;
  background: linear-gradient(0deg, rgba(20, 20, 20, 0.5) 0%, rgba(20, 20, 20, 0) 100%);
  pointer-events: none;
}

.shop_card2 img.thumb {
  object-fit: cover;
  aspect-ratio: 16 / 9;
  max-height: 260px;
  width: 100%;
  display: block;
}

/* 無料品バッジは画像の上に重ねる（カード内の情報量を減らす） */
.shop_card2 .benefit-chip {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 1;
  background: var(--front-brand-strong);
  color: var(--front-brand-on-ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
}

/* 距離は画像右上。一覧をスクロールしながら遠近を判断できるようにする */
.shop_card2__distance {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 9px;
  border-radius: var(--front-radius-pill);
  background: var(--front-brand-strong);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
  color: var(--front-brand-on-ink);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.shop_card2__distance .material-symbols-outlined {
  font-size: 14px;
}

.shop_card2 .wrap {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.shop_card2 .name {
  font-size: 16px;
  line-height: 1.4;
}

/* 無料品は最大2品まで名前と価格を出す。何がもらえるか分かるほうが件数より役に立つ */
.shop_card2__benefits {
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: var(--front-radius-sm);
  background: var(--front-brand-tint);
  border: 1px solid var(--front-brand-line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shop_card2__benefit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.shop_card2__benefit-name {
  font-size: 13px;
  color: var(--front-brand-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop_card2__benefit-more {
  font-size: 11px;
  font-weight: 500;
  color: var(--front-brand-ink);
  opacity: 0.85;
}

.shop_card2 .read {
  line-height: 1.5;
  font-size: 12px;
  font-weight: 500;
  color: var(--front-fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop_card2 .tag_wrap {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.shop_card2 .tag_wrap p {
  padding: 3px 9px;
  background-color: var(--front-bg-subtle);
  border-radius: var(--front-radius-pill);
  font-size: 11px;
  font-weight: 500;
  color: var(--front-fg-muted);
}

/* === 検索シートのチップ選択 ===
   select の長いリストより、指で押せて全体が見えるチップのほうが早い。
   ジャンルは件数が多いので高さを制限して中でスクロールさせる。 */
.search-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 168px;
  overflow-y: auto;
  padding: 2px;
  margin-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.search-options.-inline {
  max-height: none;
  overflow: visible;
}

.search-option {
  position: relative;
  display: inline-flex;
}

.search-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.search-option span {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--front-radius-pill);
  border: 1px solid var(--front-line-strong);
  background: var(--front-bg);
  color: var(--front-fg-muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.search-option input:checked + span {
  background: var(--front-brand-strong);
  border-color: var(--front-brand-strong);
  color: var(--front-brand-on-ink);
  font-weight: 700;
}

.search-option input:focus-visible + span {
  outline: 2px solid var(--front-brand-ink);
  outline-offset: 2px;
}

.search-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.search-toggle input {
  width: 20px;
  height: 20px;
  accent-color: var(--front-brand-strong);
}

/* === 検索結果の件数バーと条件チップ ===
   何件あるか・どの条件で絞っているかを常に見せ、1タップで外せるようにする */
.search-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 var(--front-gutter) 12px;
}

.search-summary__count {
  font-size: 13px;
  font-weight: 500;
  color: var(--front-fg-muted);
}

.search-summary__count strong {
  font-size: 18px;
  color: var(--front-fg);
  margin-right: 1px;
}

.search-summary__order {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--front-radius-pill);
  background: var(--front-brand-tint);
  color: var(--front-brand-ink);
  font-size: 11px;
  font-weight: 700;
}

.search-summary__edit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--front-radius-pill);
  border: 1px solid var(--front-line-strong);
  background: var(--front-bg);
  color: var(--front-fg);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.search-summary__edit .material-symbols-outlined {
  font-size: 18px;
}

.search-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 var(--front-gutter) 14px;
}

.search-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--front-radius-pill);
  background: var(--front-brand-tint);
  border: 1px solid var(--front-brand-line);
  color: var(--front-brand-ink);
  font-size: 12px;
  font-weight: 700;
}

.search-chip .material-symbols-outlined {
  font-size: 15px;
}

.search-chip.is-reset {
  background: var(--front-bg);
  border-color: var(--front-line-strong);
  color: var(--front-fg-muted);
}

/* 検索結果のページャ（もっと見る / 終端） */
#search_pager {
  padding: 16px var(--front-gutter) 0;
  text-align: center;
}

#search_pager .load_more,
#home_pager .load_more {
  display: inline-block;
  width: 100%;
  height: 44px;
  line-height: 42px;
  background: var(--front-bg);
  color: var(--front-brand-ink);
  border: 1px solid var(--front-brand-line);
  border-radius: var(--front-radius-sm);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

#search_pager .load_more:hover,
#home_pager .load_more:hover {
  background: var(--front-brand-tint);
}

#home_pager {
  padding: 16px var(--front-gutter) 0;
  text-align: center;
}

#search_pager .load_more:disabled {
  opacity: 0.6;
}

#search_pager .infinite_end {
  color: #999;
  font-size: 13px;
  padding: 10px 0;
}

.front-empty {
  text-align: center;
  padding: 48px var(--front-gutter);
  color: var(--front-fg-muted);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.7;
}

/* --- login (Auth/Login.vue) --- */
.login_container {
  padding: 24px 20px;
  margin: 24px var(--front-gutter);
}

.login_container .input_wrap {
  margin-bottom: 20px;
}

.login_container .login_error {
  color: var(--front-danger);
  font-size: 13px;
  text-align: center;
  margin-bottom: 14px;
}

.login_container .right {
  display: flex;
  margin-top: 4px;
}

.login_container .right .front-next-btn {
  width: 100%;
}

.login_container ul {
  text-align: center;
  margin-top: 20px;
}

.login_container ul li a {
  color: var(--front-fg-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 2.2;
}

.login_container ul li a::after {
  font-family: "Material Symbols Outlined";
  content: "\e5cc";
  font-size: 18px;
  color: #707070;
  vertical-align: middle;
}

/* --- Material Symbols helper (layout がフォントを読込済み) --- */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

.none {
  display: none !important;
}

/* ===== restaurant detail (Restaurant/Detail.vue) ===== */
.top_container {
  width: 100%;
}

.front-carousel {
  position: relative;
  width: 100%;
}

.front-carousel__viewport {
  overflow: hidden;
  width: 100%;
}

.front-carousel__container {
  display: flex;
}

.front-carousel__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
}

.front-carousel__slide img {
  width: 100%;
  height: auto;
  max-height: 521px;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #111;
  display: block;
}

.front-carousel__video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.front-carousel__video iframe,
.front-carousel__video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.front-carousel__video video {
  object-fit: cover;
  background: #000;
}

.front-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.front-carousel__arrow.-prev {
  left: 8px;
}

.front-carousel__arrow.-next {
  right: 8px;
}

.front-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 12px 2px;
}

.front-carousel__dot {
  width: 10px;
  height: 10px;
  border: none;
  border-radius: 50%;
  background: #dcdcdc;
  cursor: pointer;
  padding: 0;
}

.front-carousel__dot.is-selected {
  background: var(--front-brand);
}

.shop_show_container .layout_wrap {
  padding: 0 var(--front-gutter);
}

/* 店名まわり */
.detail-head {
  padding: 18px 0 4px;
}

.detail-head__name {
  margin: 0;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.detail-head__meta {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--front-fg-muted);
}

.detail-section-title {
  margin: 32px 0 12px;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.detail-note {
  margin: 24px 0 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--front-fg-subtle);
}

.shop_show_container .btn_wrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}

.menber-link {
  display: block;
  width: 100%;
  margin-top: 16px;
}

/* === 店舗詳細の固定アクション ===
   メニューまで読み進めても操作に戻れるよう、ボトムナビの上に貼り付ける。
   押せない理由も同じ場所に出して、押してから断られるのを避ける。 */
.detail-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--front-nav-h);
  z-index: 30;
  max-width: var(--front-shell-w);
  margin: 0 auto;
  padding: 10px var(--front-gutter);
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--front-line);
  box-shadow: 0 -4px 16px rgba(32, 18, 8, 0.06);
}

.detail-sticky__info {
  flex: 0 0 auto;
  min-width: 0;
}

.detail-sticky__info.is-wide {
  flex: 1 1 auto;
}

.detail-sticky__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--front-fg-muted);
}

.detail-sticky__value {
  display: flex;
  align-items: baseline;
  gap: 2px;
  color: var(--front-brand-ink);
  line-height: 1;
}

.detail-sticky__value strong {
  font-size: 22px;
}

.detail-sticky__unit {
  font-size: 12px;
}

.detail-sticky__note {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  color: var(--front-fg-muted);
  line-height: 1.5;
}

.detail-sticky__btn {
  flex: 1 1 auto;
  height: 48px;
  border-radius: var(--front-radius-pill);
  background: var(--front-brand-strong);
  color: var(--front-brand-on-ink);
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(20, 20, 20, 0.22);
  transition: transform 0.08s, box-shadow 0.08s;
}

.detail-sticky__btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(20, 20, 20, 0.24);
}

.detail-sticky__btn .material-symbols-outlined {
  font-size: 21px;
}

.detail-sticky__btn.is-quiet {
  flex: 0 0 auto;
  padding: 0 18px;
  font-size: 13px;
  background: var(--front-bg);
  color: var(--front-brand-ink);
  border: 1px solid var(--front-brand-line);
  box-shadow: none;
}

/* 固定バーが最後の要素に重ならないよう逃げを作る */
.shop_show_container {
  padding-bottom: 88px;
}

/* 営業状況（店名の下） */
.detail-head__status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.detail-head__hours {
  font-size: 12px;
  font-weight: 500;
  color: var(--front-fg-muted);
}

/* お気に入り / シェア / 無料品数 を等幅3列で並べる */
.detail-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  margin-top: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--front-line);
  border-bottom: 1px solid var(--front-line);
}

.detail-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.detail-action + .detail-action {
  border-left: 1px solid var(--front-line);
}

.detail-action-count {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  height: 32px;
  color: var(--front-brand-ink);
}

.detail-action-count__value {
  font-size: 22px;
  line-height: 32px;
}

.detail-action-count__unit {
  font-size: 12px;
}

.detail-action-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--front-fg-muted);
  white-space: nowrap;
}

.detail-action-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  color: var(--front-fg);
}

.detail-action-icon {
  font-size: 24px;
  cursor: pointer;
}

.detail-action-icon.favorited {
  font-variation-settings: "FILL" 1;
  color: var(--front-brand);
}

/* お気に入りは button_to が form を挟むのでレイアウトを揃える */
#favorite-button form.button_to {
  display: flex;
  justify-content: center;
}

.pr-url-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.pr-url-link {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 4px 10px;
  border: 1px solid var(--front-brand-line);
  background: var(--front-brand-tint);
  border-radius: var(--front-radius-pill);
  color: var(--front-brand-ink);
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
  word-break: break-all;
}

/* 店舗情報のラベル/値リスト */
.detail-info {
  display: grid;
  grid-template-columns: 84px 1fr;
  margin: 0;
  border-top: 1px solid var(--front-line);
}

.detail-info dt {
  padding: 12px 0;
  border-bottom: 1px solid var(--front-line);
  font-size: 12px;
  font-weight: 700;
  color: var(--front-fg-muted);
}

.detail-info dd {
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--front-line);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
}

.detail-info dd a {
  color: var(--front-brand-ink);
  text-decoration: underline;
}

.detail-info__label {
  margin: 24px 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--front-fg-muted);
}

.shop_show_container .info_wrap .text {
  line-height: 1.9;
  color: var(--front-fg);
  font-size: 14px;
  font-weight: 500;
}

.explanation_more {
  height: 78px;
}

.more_link {
  color: var(--front-brand-ink);
  font-size: 13px;
  margin-top: 6px;
  cursor: pointer;
}

.shop_show_container .tag_wrap {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.shop_show_container .tag_wrap p {
  padding: 3px 9px;
  background-color: var(--front-bg-subtle);
  border-radius: var(--front-radius-pill);
  font-size: 11px;
  font-weight: 500;
  color: var(--front-fg-muted);
}

/* 無料品 (ディナー/ランチ タブ) */
.coupon_select {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  width: 100%;
  padding: 4px;
  margin-bottom: 16px;
  border-radius: var(--front-radius-pill);
  background: var(--front-bg-subtle);
}

.coupon_select_item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 40px;
  border-radius: var(--front-radius-pill);
  color: var(--front-fg-muted);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.coupon_select_item img {
  display: none;
}

.coupon_select_item.active {
  color: var(--front-brand-ink);
  background: var(--front-bg);
  box-shadow: var(--front-shadow);
}

.coupon_select_item__icon {
  font-size: 17px;
  color: inherit;
}

.coupon_select_item .coupon_select_item__count {
  font-size: 13px;
  font-weight: 500;
}

.courpon_container {
  margin-top: 8px;
}

/* 利用条件は補足情報なので、控えめな1行にする */
.use_condition {
  width: 100%;
  margin: 0 0 14px;
}

.use_condition span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--front-brand-ink);
  background-color: var(--front-brand-tint);
  border-radius: var(--front-radius-sm);
  padding: 10px 12px;
  line-height: 1.5;
}

.coupon-remark {
  margin: -6px 0 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--front-fg-muted);
  line-height: 1.6;
}

.courpon_container .scroll {
  width: 100%;
}

.courpon_container .scroll ul {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.courpon_container .scroll ul li {
  border: 1px solid var(--front-line);
  border-radius: var(--front-radius);
  background: var(--front-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.courpon_container .scroll ul li .img_warp {
  background: var(--front-bg-subtle);
}

.courpon_container .scroll ul li img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  max-height: none;
  object-fit: cover;
  display: block;
}

.coupon-badge {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 2px 8px;
  border-radius: var(--front-radius-pill);
  background: var(--front-brand-strong);
  color: var(--front-brand-on-ink);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.6;
}

.courpon_container .scroll ul li .courpon_text_wrap {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.courpon_container .scroll ul li .courpon_text_wrap .name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.coupon-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.coupon-price__before {
  font-size: 12px;
  font-weight: 500;
  color: var(--front-fg-subtle);
  text-decoration: line-through;
}

.coupon-free-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--front-brand-ink);
}

.courpon_container .scroll ul li .courpon_text_wrap .read {
  font-size: 12px;
  font-weight: 500;
  color: var(--front-fg-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.img_warp {
  position: relative;
}

/* menu */
.menu_container .head_container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: var(--front-radius-pill);
  background: var(--front-bg-subtle);
}

.menu_container .head_container li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: var(--front-radius-pill);
  color: var(--front-fg-muted);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.menu_container .head_container .currentmenus {
  color: var(--front-brand-ink);
  background-color: var(--front-bg);
  box-shadow: var(--front-shadow);
}

.menu_container .menu_wrap {
  margin-top: 12px;
  border: 1px solid var(--front-line);
  background: var(--front-bg);
  border-radius: var(--front-radius);
  padding: 4px 16px 16px;
}

.menu_container .menu_wrap ul .ttl {
  font-size: 13px;
  font-weight: 700;
  margin-top: 16px;
  margin-bottom: 8px;
  color: var(--front-fg-muted);
}

.menu_container .menu_wrap ul li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--front-fg);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 0;
  border-bottom: 1px solid var(--front-line);
}

.menu_container .menu_wrap ul li:last-child {
  border-bottom: none;
}

.menu_container .menu_wrap ul li .thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: var(--front-radius-sm);
  object-fit: cover;
  background: var(--front-bg-subtle);
}

.menu_container .menu_wrap ul li .name {
  flex: 1 1 auto;
  min-width: 0;
}

.menu_container .menu_wrap ul li .price {
  flex-shrink: 0;
  color: var(--front-fg-muted);
}

/* share modal */
.share_modal .ttl {
  font-size: 18px;
  margin-bottom: 8px;
}

.share_btns {
  width: 100%;
  margin-top: 4px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  text-align: center;
}

.share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  color: #fff;
  border-radius: var(--front-radius-sm);
  font-size: 14px;
  font-weight: 700;
}

/* full-screen coupon modal (modalFullScreen.vue) */
.fmodal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
}

.fmodal.active {
  display: block;
}

.fmodal__blur {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0.6;
  z-index: 60;
}

.js-modal__main {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: 100%;
  max-width: var(--front-shell-w);
  height: 96%;
  background: #fff;
  z-index: 65;
  padding: 20px;
  border-radius: 20px 20px 0 0;
  overflow-y: auto;
  transform: translateX(-50%);
  animation: fmodalSlideUp 0.25s ease-in-out;
}

@keyframes fmodalSlideUp {
  from {
    transform: translate(-50%, 100%);
  }
  to {
    transform: translate(-50%, 0);
  }
}

.coupon_modal .modal-wrap {
  position: relative;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}

.coupon_modal .modal-wrap .main .img-wrap {
  margin-bottom: 14px;
  position: relative;
  width: 100%;
}

.coupon_modal .modal-wrap .main .img-wrap::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}

.coupon_modal .modal-wrap .main .img-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.coupon_modal .modal-wrap .main p {
  margin-top: 12px;
  margin-bottom: 12px;
}

.coupon_modal .modal-wrap .main .name {
  font-size: 18px;
}

.coupon_modal .modal-wrap .main .read {
  font-size: 18px;
  font-weight: 500;
  color: var(--front-brand-ink);
  line-height: 22px;
}

.coupon_modal .modal-wrap .main .text {
  font-size: 16px;
  color: #707070;
}

.coupon_modal .modal-wrap .thanks p {
  width: 100%;
  text-align: center;
  font-size: 18px;
}

.coupon_modal .modal-wrap .thanks img {
  width: 100%;
}

/* common button (commonButton.vue) */
.common-btn {
  display: block;
  width: 100%;
  min-width: 120px;
  min-height: 48px;
  padding: 14px 20px;
  color: var(--front-brand-on-ink);
  background-color: var(--front-brand-strong);
  border-radius: var(--front-radius-sm);
  text-align: center;
  font-size: 15px;
  letter-spacing: 0.04em;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(20, 20, 20, 0.18);
  transition: background-color 0.15s, transform 0.08s, box-shadow 0.08s;
}

.common-btn:hover {
  background-color: var(--front-brand-soft);
}

.common-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(20, 20, 20, 0.2);
}

.common-btn.btn2 {
  background-color: var(--front-bg);
  color: var(--front-fg-muted);
  border: 1px solid var(--front-line-strong);
  box-shadow: none;
}

/* check / agree (Input/check.vue) */
.check_wrap {
  margin-bottom: 20px;
}

.check_wrap input[type="checkbox"] {
  display: none;
}

.check_wrap label {
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  padding: 5px 30px;
  position: relative;
  width: auto;
  font-size: 14px;
  font-weight: 300;
}

.check_wrap label::before {
  background: #fff;
  border: 1px solid #95c8da;
  content: "";
  display: block;
  height: 16px;
  left: 5px;
  margin-top: -8px;
  position: absolute;
  top: 54%;
  width: 16px;
  border-radius: 3px;
}

.check_wrap label::after {
  border-right: 3px solid #000;
  border-bottom: 3px solid #000;
  content: "";
  display: block;
  height: 9px;
  left: 10px;
  margin-top: -7px;
  opacity: 0;
  position: absolute;
  top: 54%;
  transform: rotate(45deg);
  width: 5px;
}

.check_wrap input[type="checkbox"]:checked + label::after {
  opacity: 1;
}

.agree label {
  font-size: 24px;
}

.agree label::before {
  border: 1px solid #555;
  left: -2px;
}

.agree label::after {
  left: 3px;
}

/* ===== my page (MyPage/TopPage.vue, Unsubscribe.vue) ===== */
.mypage {
  padding: 0 var(--front-gutter);
}

/* ページ見出しは全画面で同じ大きさ・同じ余白・同じ下線アクセントに揃える */
.mypage h2,
.shop_index_container h2,
.edit_profile h2 {
  position: relative;
  margin: 20px 0 16px;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  padding-bottom: 10px;
}

.mypage h2 span,
.shop_index_container h2 span,
.edit_profile h2 span {
  color: inherit;
}

.mypage h2::after,
.shop_index_container h2::after,
.edit_profile h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--front-brand);
}

.mypage h2::after {
  left: 0;
}

.shop_index_container h2::after,
.edit_profile h2::after {
  left: var(--front-gutter);
}

/* お得額サマリ（マイページ / 利用履歴 共通） */
.discount-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.discount-stat {
  padding: 14px;
  border-radius: var(--front-radius);
  background: var(--front-brand-tint);
}

.discount-stat__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--front-fg-muted);
  line-height: 1.4;
}

.discount-stat__value {
  margin-top: 6px;
  font-size: 26px;
  line-height: 1.1;
  color: var(--front-brand-ink);
}

.discount-stat__unit {
  font-size: 13px;
  margin-left: 2px;
}

/* === 会費の回収メーター ===
   金額だけでは多寡が分からないので、月会費を基準に達成度として見せる */
.fee-meter {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--front-line);
  border-radius: var(--front-radius);
  background: var(--front-bg);
}

.fee-meter.is-recovered {
  border-color: var(--front-brand-line);
  background: var(--front-brand-tint);
}

.fee-meter__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.fee-meter__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--front-fg-muted);
}

.fee-meter__rate {
  font-size: 18px;
  line-height: 1;
  color: var(--front-brand-ink);
}

.fee-meter__bar {
  margin-top: 10px;
  height: 8px;
  border-radius: var(--front-radius-pill);
  background: var(--front-line);
  overflow: hidden;
}

.fee-meter__fill {
  display: block;
  height: 100%;
  border-radius: var(--front-radius-pill);
  background: linear-gradient(90deg, var(--front-brand-on-ink) 0%, var(--front-brand) 100%);
  transition: width 0.6s ease;
}

.fee-meter__note {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--front-fg-muted);
  line-height: 1.7;
}

/* マイページ：お気に入り / 利用履歴への導線 */
.mypage-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.mypage-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 52px;
  border: 1px solid var(--front-line);
  border-radius: var(--front-radius);
  color: var(--front-fg);
  font-size: 14px;
  font-weight: 700;
}

.mypage-link__icon {
  font-size: 20px;
  color: var(--front-brand);
}

.mypage .profile_wrap {
  margin-top: 20px;
  padding: 16px;
}

.mypage .profile_wrap .list .ttl_wrap {
  margin-bottom: 12px;
}

.mypage .profile_wrap .list .ttl_wrap p {
  font-size: 15px;
  font-weight: 700;
}

.mypage .profile_wrap .list .ttl {
  margin-bottom: 2px;
  font-weight: 700;
  font-size: 11px;
  color: var(--front-fg-muted);
}

.mypage .profile_wrap .list .value {
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 500;
}

.mypage .profile_wrap > .front-next-btn {
  width: 100%;
  margin-top: 4px;
}

.mypage-secondary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}

.mypage-secondary .front-next-btn {
  width: 100%;
}

.mypage-unsubscribe {
  font-size: 12px;
  font-weight: 500;
  color: var(--front-fg-subtle);
  text-decoration: underline;
}

.mypage .profile_wrap .read {
  font-size: 12px;
  line-height: 1.8;
  margin-bottom: 24px;
}

.mypage .profile_wrap .right {
  display: flex;
  justify-content: flex-end;
}

.mypage .profile_wrap .right a,
.mypage .profile_wrap .right .front-next-btn {
  width: 125px;
}

.mypage .profile_wrap .right form.button_to {
  width: auto;
}

/* ===== favorite / history list wrapper (shop_index_container) ===== */
/* カード一覧は .shop_list に統一している。
   ここを `ul` の子孫指定にすると条件チップなど他の ul まで縦積みになるため使わない。 */

.shop_index_container h2 {
  padding: 0 var(--front-gutter) 10px;
}



/* history: 本日のご利用状況 */
.history-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 var(--front-gutter);
  margin-bottom: 20px;
}

/* ===== history card ===== */
.history {
  padding: 12px;
  border: 1px solid var(--front-line);
  border-radius: var(--front-radius);
  background: var(--front-bg);
}

.history__main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.history__thumb {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: var(--front-radius-sm);
  overflow: hidden;
  background: var(--front-bg-subtle);
}

.history__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.history__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.history__shop {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history__benefit {
  font-size: 13px;
  font-weight: 500;
  color: var(--front-brand-ink);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history__date {
  font-size: 12px;
  font-weight: 500;
  color: var(--front-fg-subtle);
}

.history__amount {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--front-line);
  font-size: 12px;
  font-weight: 700;
  color: var(--front-fg-muted);
}

.history__amount-value {
  font-size: 20px;
  color: var(--front-brand-ink);
}

.history__amount-unit {
  font-size: 12px;
  margin-left: 1px;
}

/* ===== edit profile (EditProfile.vue) ===== */
.edit_profile h2 {
  padding: 0 var(--front-gutter) 10px;
}

.edit_profile .login_container {
  padding: 20px;
  margin: 0 var(--front-gutter);
}

.edit_profile .login_container .common_label span,
.password_container .common_label span {
  color: var(--front-danger);
  display: inline-block;
  margin-left: 10px;
}

.edit_profile .login_container .right {
  display: flex;
  justify-content: flex-end;
}

/* ===== password reset (Auth/ForgetPassword.vue, PasswordResetForm.vue) ===== */
.password_container {
  padding: 24px 20px;
  margin: 24px var(--front-gutter);
}

.password_container .right {
  display: flex;
  justify-content: flex-end;
}

.password_container p {
  font-size: 12px;
  line-height: 19px;
  margin-bottom: 20px;
}

.password_container .complete_wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.login_error {
  color: var(--front-danger);
  font-size: 13px;
  margin-bottom: 12px;
}

/* ===== registration / payment (Auth/Register*.vue, PaymentSubscription.vue) ===== */
.register_container {
  padding: 24px 20px;
  margin: 24px var(--front-gutter);
}

.register_container .reg_note {
  display: block;
  font-size: 12px;
  line-height: 1.6;
  color: #333;
  margin: 8px 0 14px;
}

.register_container .dev_code {
  font-size: 13px;
  font-weight: bold;
  color: var(--front-danger);
  text-align: center;
  margin-bottom: 12px;
}

.reg-promo {
  width: 100%;
  margin-top: 24px;
  padding: 18px;
  border: 1px solid var(--front-brand-line);
  background: var(--front-brand-tint);
  border-radius: var(--front-radius);
  text-align: center;
}

.reg-promo__lead {
  font-size: 13px;
  color: var(--front-fg-muted);
  margin: 0 0 6px;
}

.reg-promo__price {
  color: var(--front-brand-ink);
  line-height: 1;
}

.reg-promo__amount {
  font-size: 40px;
  letter-spacing: 0.01em;
}

.reg-promo__unit {
  font-size: 13px;
  margin-left: 4px;
}

.reg-promo__points {
  margin-top: 14px;
  text-align: left;
  display: grid;
  gap: 6px;
}

.reg-promo__points li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--front-fg);
  line-height: 1.5;
}

.reg-promo__points li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 5px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--front-brand-ink);
  border-bottom: 2px solid var(--front-brand-ink);
  transform: rotate(45deg);
}

.register_container p {
  font-size: 12px;
  line-height: 19px;
  margin-bottom: 20px;
}

/* 登録方法選択ボタン（電話 / メール） */
.register_container .reg_method_btn {
  width: 100%;
  min-height: 54px;
  border-radius: var(--front-radius);
  font-size: 15px;
  margin-top: 10px;
}

.register_container .reg_method_btn:first-of-type {
  margin-top: 0;
}

/* 送信/検証ボタン（メール/電話/決済ステップ） */
.register_container .right {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

.register_container .right .front-next-btn {
  width: 100%;
  font-size: 15px;
}

/* 本登録の「次へ」ボタン（右寄せ・::before で 48% 幅を確保） */
.register_container .btn {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.register_container .btn::before {
  content: "";
  width: 48%;
}

.register_container .btn .front-next-btn {
  width: 48%;
  font-size: 15px;
}

/* 決済ステップのナビ（戻る / 次へ） */
.register_container .nav_row {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.register_container .nav_row.end {
  justify-content: flex-end;
}

.register_container .nav_row .front-next-btn,
.register_container .nav_row .prev-btn {
  flex: 1;
  font-size: 15px;
}

.register_container .nav_row.end .front-next-btn {
  flex: 0 0 auto;
  min-width: 140px;
}

.register_container .prev-btn {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  color: var(--front-fg-muted);
  background-color: var(--front-bg);
  border: 1px solid var(--front-line-strong);
  border-radius: var(--front-radius-sm);
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.register_container .read {
  font-size: 14px;
  line-height: 1.8;
  text-align: center;
  margin: 30px 0 60px;
}

/* --- フロー（会員情報入力 → プラン → 決済…） --- */
.flow_wrap {
  margin-bottom: 30px;
}

.flow_wrap ul {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  text-align: center;
  align-items: flex-start;
}

.flow_wrap li {
  flex: 1;
  position: relative;
}

.flow_wrap .step {
  width: 24px;
  height: 24px;
  line-height: 24px;
  background-color: #707070;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 300;
  margin: 0 auto 10px;
  position: relative;
  z-index: 1;
}

.flow_wrap li:not(:last-child) .step::after {
  content: "";
  height: 1px;
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 60%;
  background: #707070;
  z-index: 0;
}

.flow_wrap .text {
  font-size: 11px;
  font-weight: 300;
  color: #9e9e9e;
}

.flow_wrap li.current .step {
  background-color: var(--front-brand-strong);
}

.flow_wrap li.current .text {
  color: #333;
}

/* --- キャンペーンバナー --- */
.campaign_banner {
  background: var(--front-brand-tint);
  border: 1px solid var(--front-brand-line);
  border-radius: var(--front-radius);
  padding: 16px;
  margin-bottom: 20px;
  text-align: center;
}

.campaign_banner .campaign_title {
  font-size: 12px;
  font-weight: bold;
  color: var(--front-brand-ink);
  margin-bottom: 4px;
}

.campaign_banner .campaign_name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.campaign_banner .campaign_detail {
  font-size: 14px;
  font-weight: bold;
  color: var(--front-danger);
  margin-bottom: 4px;
}

.campaign_banner .campaign_desc {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.campaign_banner .campaign_expiry {
  font-size: 11px;
  color: #999;
  margin-bottom: 0;
}

.campaign_info_box {
  background: #f9f9f9;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 16px;
}

.campaign_info_box .campaign_info_title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.campaign_info_box .campaign_info_detail {
  font-size: 13px;
  color: #333;
  line-height: 1.8;
  margin-bottom: 8px;
}

.campaign_info_box .campaign_info_detail strong {
  color: var(--front-danger);
}

.campaign_info_box .campaign_info_warn {
  font-size: 11px;
  color: var(--front-danger);
  line-height: 1.6;
  margin-bottom: 0;
}

/* --- ラジオ（プラン / 決済方法 / 性別） --- */
.radio_group {
  margin-bottom: 20px;
}

.radio_group .radio {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 14px;
  color: #000;
  cursor: pointer;
}

.radio_group .radio input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #000;
}

.radio_group .radio .plan_desc {
  color: var(--front-danger);
  font-size: 12px;
  font-weight: bold;
  margin-left: 8px;
}

/* --- プラン内容 / 注記 --- */
.register_container .plan_wrap {
  margin-bottom: 30px;
}

.register_container .plan_wrap .ttl {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 3px;
}

.register_container .plan_wrap .read {
  font-size: 14px;
  line-height: 38px;
  text-align: left;
  margin: 0;
}

.register_container .plan_note {
  margin-top: 20px;
  font-size: 12px;
  color: gray;
  line-height: 1.6;
}

/* --- 規約（役務・契約期間） --- */
.gude {
  color: #333;
  height: 200px;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 20px;
  overflow: auto;
  margin: 20px 0;
}

.gude .ttl {
  font-size: 12px;
  margin-top: 20px;
  line-height: 1.5;
  color: #333;
  font-weight: bold;
}

.gude .wrap > .ttl:first-child {
  margin-top: 0;
}

.gude ul {
  padding-left: 20px;
  margin-bottom: 8px;
}

.gude ul li {
  color: #333;
  font-size: 12px;
  line-height: 1.8;
  list-style-type: disc;
}

/* --- フラッシュ（トースト） --- */
.front-flash {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 5000;
  width: calc(100% - 40px);
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: opacity 0.3s;
}

.front-flash.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.front-flash-item {
  padding: 12px 16px;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.front-flash-item.is-notice {
  background-color: #333;
}

.front-flash-item.is-alert {
  background-color: var(--front-danger);
}

/* --- 法務ページ（プライバシーポリシー / 特定商取引法） 復元 .law_container --- */
.law_container {
  color: gray;
  padding: 0 20px 60px;
}

.law_container h2 {
  font-size: 16px;
  padding-top: 30px;
}

.law_container .text {
  font-size: 10px;
  line-height: 2;
  list-style-type: disc;
}

.law_container .ttl {
  font-size: 14px;
  margin-top: 20px;
  line-height: 1.5;
}

.law_container .subttl {
  font-size: 12px;
  line-height: 1.5;
}

.law_container ul {
  padding-left: 30px;
}

.law_container ul li {
  font-size: 10px;
  line-height: 2;
  list-style-type: disc;
}

.law_container a {
  word-break: break-all;
  color: #2f6fce;
}

/* --- 位置情報の設定方法 復元 .LocationSetting --- */
.LocationSetting {
  padding: 20px;
  padding-bottom: 60px;
}

.LocationSetting h2 {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 24px;
}

.LocationSetting .status_row {
  font-size: 14px;
  margin-bottom: 24px;
}

.LocationSetting .location-status {
  margin-left: 6px;
  font-weight: 700;
}

.LocationSetting .location-status.is-on {
  color: var(--front-brand-ink);
}

.LocationSetting .location-status.is-off {
  color: var(--front-danger);
}

.LocationSetting .location_howto .subttl {
  font-size: 14px;
  font-weight: 700;
  margin-top: 24px;
  margin-bottom: 8px;
}

.LocationSetting .location_howto ul {
  padding-left: 20px;
}

.LocationSetting .location_howto li {
  font-size: 13px;
  line-height: 1.9;
  list-style-type: disc;
}

.installation-checklist-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

.installation-checklist-page__header {
  text-align: center;
  margin-bottom: 20px;
}

.installation-checklist-page__title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
}

.installation-checklist-page__lead {
  margin: 0;
  font-size: 14px;
  color: #707070;
  line-height: 1.6;
}

.installation-checklist-card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 20px 16px;
}

.installation-checklist-card__store {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}

.installation-checklist-card__label {
  margin: 0 0 4px;
  font-size: 12px;
  color: #888;
}

.installation-checklist-card__name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.installation-checklist-card__address {
  margin: 6px 0 0;
  font-size: 13px;
  color: #666;
}

.installation-checklist-card__kit {
  margin-bottom: 16px;
}

.installation-checklist-card__section-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
}

.installation-checklist-card__kit-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.8;
}

.installation-checklist-alert {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 13px;
}

.installation-checklist-form__legend {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
}

.installation-checklist-form__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.installation-checklist-form__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
  line-height: 1.5;
}

.installation-checklist-form__check input {
  margin-top: 3px;
  flex-shrink: 0;
}

.installation-checklist-form__field {
  margin-top: 16px;
}

.installation-checklist-form__label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
}

.installation-checklist-form__input,
.installation-checklist-form__textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
}

.installation-checklist-form__submit {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 14px;
  border: none;
  border-radius: 999px;
  background: var(--front-brand-strong);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.installation-checklist-success {
  text-align: center;
}

.installation-checklist-success__icon {
  display: block;
  margin: 0 auto 8px;
  font-size: 48px;
  color: #16a34a;
}

.installation-checklist-success__title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
}

.installation-checklist-success__meta {
  margin: 0 0 16px;
  font-size: 13px;
  color: #666;
}

.installation-checklist-success__answers {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.installation-checklist-success__answers li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
}

.installation-checklist-success__answers li.is-checked {
  color: #166534;
}

.installation-checklist-success__answers .material-symbols-outlined {
  font-size: 18px;
  color: #16a34a;
}

.partner-application-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

.front-standalone-body {
  margin: 0;
  min-height: 100vh;
  background: #f7f7f7;
  font-family: "Noto Sans JP", sans-serif;
  color: #222;
}

.front-standalone-main {
  min-height: 100vh;
}

.partner-application-page__header {
  text-align: center;
  margin-bottom: 20px;
}

.partner-application-page__title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  color: #0b2a4a;
}

.partner-application-page__lead {
  margin: 0;
  font-size: 14px;
  color: #707070;
  line-height: 1.6;
}

.partner-application-card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 20px 16px;
}

.partner-application-alert {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 13px;
  list-style: disc;
  padding-left: 28px;
}

.partner-application-form__field {
  margin-top: 16px;
}

.partner-application-form__fieldset {
  margin: 16px 0 0;
  border: 0;
  padding: 0;
}

.partner-application-form__fieldset > legend {
  padding: 0;
}

.partner-application-form__label {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
}

.partner-application-form__required {
  margin-left: 6px;
  color: #dc2626;
  font-size: 12px;
  font-weight: 700;
}

.partner-application-form__hint {
  margin: 0 0 8px;
  font-size: 12px;
  color: #888;
  line-height: 1.5;
}

.partner-application-form__note {
  margin: 16px 0 0;
  padding: 12px;
  border-radius: 8px;
  background: #f8fafc;
  font-size: 12px;
  color: #555;
  line-height: 1.6;
}

.partner-application-form__input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
}

.partner-application-form__radios {
  display: grid;
  gap: 8px;
}

.partner-application-form__radio,
.partner-application-form__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
}

.partner-application-form__radio input,
.partner-application-form__check input {
  margin-top: 3px;
  flex-shrink: 0;
}

.partner-application-form__section {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #eee;
}

.partner-application-form__section-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
}

.partner-application-form__legal {
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 8px;
  background: #fafafa;
  border: 1px solid #eee;
  font-size: 12px;
  color: #444;
  line-height: 1.7;
  max-height: 180px;
  overflow-y: auto;
}

.partner-application-form__check.is-locked {
  opacity: 0.55;
  pointer-events: none;
}

.partner-application-form__file {
  width: 100%;
  padding: 10px;
  border: 1px dashed #ccc;
  border-radius: 8px;
  background: #fafafa;
  font-size: 13px;
}

.partner-application-files__list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.partner-application-files__item {
  padding: 6px 8px;
  border-radius: 6px;
  background: #f3f4f6;
  font-size: 12px;
  color: #444;
  word-break: break-all;
}

.partner-application-files__error {
  margin: 8px 0 0;
  font-size: 12px;
  color: #b91c1c;
}

.partner-application-form__submit {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 14px;
  border: none;
  border-radius: 999px;
  background: var(--front-brand-strong);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.partner-application-form__submit--secondary {
  background: #e5e7eb;
}

.partner-application-success {
  text-align: center;
  padding: 12px 0;
}

.partner-application-success__icon {
  display: block;
  margin: 0 auto 8px;
  font-size: 48px;
  color: #16a34a;
}

.partner-application-success__title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
}

.partner-application-success__body {
  margin: 0 0 16px;
  font-size: 14px;
  color: #555;
  line-height: 1.7;
}

.partner-application-progress {
  margin: 0 0 20px;
}

.partner-application-progress__label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #0b2a4a;
}

.partner-application-progress__track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.partner-application-progress__dot {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: #e5e7eb;
  color: #6b7280;
}

.partner-application-progress__dot.is-current,
.partner-application-progress__dot.is-done {
  background: #c4a35a;
  color: #fff;
}

.partner-application-progress__dot + .partner-application-progress__dot {
  margin-left: 48px;
  position: relative;
}

.partner-application-progress__dot + .partner-application-progress__dot::before {
  content: "";
  position: absolute;
  right: 28px;
  width: 48px;
  height: 3px;
  background: #e5e7eb;
}

.partner-application-progress__dot + .partner-application-progress__dot.is-current::before,
.partner-application-progress__dot + .partner-application-progress__dot.is-done::before {
  background: #c4a35a;
}

.partner-application-form__introducer {
  margin-bottom: 20px;
}

.partner-application-form__buzz-guide {
  margin: 0 0 16px;
}

.partner-application-form__buzz-guide-lead {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  color: #0b2a4a;
}

.partner-application-form__buzz-guide-box {
  padding: 12px 14px;
  border: 2px solid #c4a35a;
  border-radius: 10px;
  background: #fffaf0;
}

.partner-application-form__buzz-guide-box p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: #0b2a4a;
}

.partner-application-form__buzz-guide-box p + p {
  margin-top: 4px;
}

.partner-application-form__introducer .partner-application-form__section-title {
  margin-bottom: 12px;
}

.partner-application-form__badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #c4a35a;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

.partner-application-form__agree {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 8px;
  padding: 16px;
  border: 2px solid #c4a35a;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: #0b2a4a;
}

.partner-application-form__agree input {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  flex-shrink: 0;
}

.partner-application-form__agree-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: #b45309;
}

.partner-application-form__submit--navy {
  background: #0b2a4a;
  color: #fff;
}

.partner-application-form__submit--navy:disabled {
  opacity: 0.45;
}

.partner-application-form__back {
  display: block;
  margin-top: 16px;
  text-align: center;
  color: #0b2a4a;
  font-size: 14px;
  text-decoration: none;
}

.front-preparation-card {
  text-align: center;
}

.front-preparation-card__icon {
  margin-bottom: 12px;
}

.front-preparation-card__icon .material-symbols-outlined {
  font-size: 48px;
  color: var(--front-brand);
}

.front-preparation-card__body {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
}

.document-share-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 28px 16px 56px;
}

.document-share-page__header {
  margin-bottom: 20px;
}

.document-share-page__title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  color: #0b2a4a;
}

.document-share-page__lead {
  margin: 0;
  font-size: 14px;
  color: #707070;
  line-height: 1.6;
}

.document-share-page__viewer {
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
}

.document-share-page__pdf {
  display: block;
  width: 100%;
  height: min(80vh, 880px);
  border: 0;
  background: #f3f4f6;
}

.document-share-page__video,
.document-share-page__image {
  display: block;
  width: 100%;
  max-height: 80vh;
  background: #111;
}

.document-share-page__image {
  object-fit: contain;
  background: #fff;
}

.document-share-page__actions {
  margin-top: 16px;
}

.document-share-page__download-card,
.document-share-page__empty {
  padding: 28px 20px;
  text-align: center;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
}

.document-share-page__file-name {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: #0b2a4a;
  word-break: break-all;
}

.document-share-page__hint {
  margin: 0 0 16px;
  font-size: 14px;
  color: #707070;
}

.document-share-page__download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 8px;
  background: #0b2a4a;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.document-library-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 28px 16px 56px;
}

.document-library-page__header {
  margin-bottom: 24px;
}

.document-library-page__title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  color: #0b2a4a;
}

.document-library-page__lead {
  margin: 0;
  font-size: 14px;
  color: #707070;
  line-height: 1.6;
}

.document-library-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.document-library-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
}

.document-library-card__cover {
  aspect-ratio: 4 / 3;
  background: linear-gradient(145deg, #f8fafc, #e2e8f0);
  overflow: hidden;
}

.document-library-card__cover-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.document-library-card__cover-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.document-library-card__cover-label {
  font-size: 18px;
  font-weight: 700;
  color: #64748b;
}

.document-library-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.document-library-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0b2a4a;
}

.document-library-card__description,
.document-library-card__file {
  margin: 0;
  font-size: 13px;
  color: #707070;
  line-height: 1.5;
}

.document-library-card__download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 10px 14px;
  border-radius: 8px;
  background: #0b2a4a;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.document-library-empty {
  padding: 32px 16px;
  text-align: center;
  color: #707070;
}

@media (max-width: 640px) {
  .document-library-grid {
    grid-template-columns: 1fr;
  }
}

/* --- 無料品選択（店舗QR） --- */
.redeem-page {
  padding: 20px var(--front-gutter) 8px;
}

.redeem-page__store {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--front-fg-muted);
}

.redeem-page__title {
  margin: 0 0 6px;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.redeem-page__lead {
  margin: 12px 0 16px;
  font-size: 17px;
  line-height: 1.6;
  text-align: center;
}

.redeem-page__note {
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--front-fg-muted);
  line-height: 1.7;
}

.redeem-page__character {
  display: block;
  max-height: 160px;
  margin: 8px auto 20px;
}

.redeem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.redeem-card {
  position: relative;
  display: block;
  border: 2px solid var(--front-line);
  border-radius: var(--front-radius);
  overflow: hidden;
  background: var(--front-bg);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.redeem-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.redeem-card:has(input:checked) {
  border-color: var(--front-brand);
  box-shadow: 0 0 0 3px rgba(200, 148, 44, 0.2);
}

/* 選択中のカードに丸チェックを出す（何を選んだか一目で分かるように） */
.redeem-card::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(0, 0, 0, 0.16);
  box-shadow: 0 1px 4px rgba(32, 18, 8, 0.2);
}

.redeem-card:has(input:checked)::after {
  background: var(--front-brand-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.6 4.6 4.6L19 7.8'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
}

.redeem-card__img img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  background: var(--front-bg-subtle);
}

.redeem-card__name {
  margin: 0;
  padding: 10px 10px 12px;
  font-size: 14px;
  text-align: center;
  line-height: 1.4;
}

/* 選択したらすぐ送信できるよう、CTA は画面下に貼り付ける */
.redeem-bar {
  position: sticky;
  bottom: 0;
  padding: 12px 0 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 32%);
  z-index: 4;
}

/* 選択画面: 何円ぶんが無料になるかを添えて選びやすくする */
.redeem-page__remaining {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 18px;
  padding: 5px 12px;
  border-radius: var(--front-radius-pill);
  background: var(--front-brand-tint);
  border: 1px solid var(--front-brand-line);
  color: var(--front-brand-ink);
  font-size: 12px;
  font-weight: 700;
}

.redeem-page__remaining .material-symbols-outlined {
  font-size: 16px;
}

.redeem-card__price {
  margin: -4px 0 0;
  padding: 0 10px 12px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
}

.redeem-card__price-before {
  font-size: 11px;
  font-weight: 500;
  color: var(--front-fg-subtle);
  text-decoration: line-through;
}

.redeem-card__price-free {
  font-size: 14px;
  color: var(--front-brand-ink);
}

/* === 発行後（スタッフ提示） ===
   離れた位置からでも読めるように、品名と発行番号を最大級に置く。 */
.redeem-state--issued {
  text-align: center;
}

.redeem-state--issued.is-appearing .redeem-ticket {
  animation: redeem-pop 0.42s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}

@keyframes redeem-pop {
  0% {
    opacity: 0;
    transform: scale(0.88) translateY(10px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .redeem-state--issued.is-appearing .redeem-ticket {
    animation: none;
  }
}

.redeem-ticket {
  margin: 8px 0 16px;
  padding: 18px;
  border-radius: var(--front-radius-lg);
  background: var(--front-bg);
  border: 2px solid var(--front-brand);
  box-shadow: 0 8px 24px rgba(138, 97, 19, 0.18);
}

.redeem-ticket__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 14px;
  padding: 5px 14px;
  border-radius: var(--front-radius-pill);
  background: var(--front-brand-strong);
  color: var(--front-brand-on-ink);
  font-size: 13px;
}

.redeem-ticket__badge .material-symbols-outlined {
  font-size: 18px;
}

.redeem-ticket__img {
  margin: 0 auto 14px;
  max-width: 200px;
  border-radius: var(--front-radius);
  overflow: hidden;
  border: 1px solid var(--front-line);
}

.redeem-ticket__img img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

.redeem-ticket__name {
  margin: 0;
  font-size: 24px;
  line-height: 1.35;
}

.redeem-ticket__store {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--front-fg-muted);
}

/* 発行番号はスタッフが読み上げ・照合する値なので等幅・大きめ・字間広め */
.redeem-ticket__number {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--front-line-strong);
}

.redeem-ticket__number-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--front-fg-muted);
}

.redeem-ticket__number-value {
  display: block;
  margin-top: 2px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 26px;
  letter-spacing: 0.08em;
  color: var(--front-fg);
}

.redeem-ticket__time {
  margin: 6px 0 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--front-fg-subtle);
}

.redeem-issued__lead {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.6;
}

.redeem-issued__saving {
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--front-brand-ink);
}

.redeem-state--thanks {
  text-align: center;
}

/* ===================================================================
   GO コイン（残り回数）
   バズゴー君が持つスマホ画面の金貨に合わせる。使ったぶんは灰色で残す。
   =================================================================== */
.go-coins {
  display: flex;
  gap: 10px;
}

.go-coin__face {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #ffeaa0 0%, #f7c948 46%, #d9970f 100%);
  box-shadow: 0 3px 0 rgba(120, 74, 0, 0.35), inset 0 0 0 3px rgba(255, 255, 255, 0.45);
  /* 金の面なので、刻印は黒で入れる（茶色だと小さい字が潰れて読めない） */
  color: var(--front-brand-strong);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.go-coins--sm .go-coin__face {
  width: 32px;
  height: 32px;
  font-size: 11px;
  box-shadow: 0 2px 0 rgba(120, 74, 0, 0.35), inset 0 0 0 2px rgba(255, 255, 255, 0.45);
}

.go-coin.is-used .go-coin__face {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.55);
}

/* 白背景に置く場合（登録完了画面など） */
.reg-done .go-coin.is-used .go-coin__face {
  background: var(--front-bg-subtle);
  box-shadow: inset 0 0 0 2px var(--front-line);
  color: var(--front-fg-subtle);
}

/* ===================================================================
   フォームエラー（会員登録・決済・ログイン共通）
   赤い1行では何を直すか分からないので、見出し＋直す項目の箇条書きにする。
   =================================================================== */
.form-errors {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: var(--front-radius);
  background: #fdf2f0;
  border: 1px solid #f3c4bb;
}

.form-errors__head {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #b3341f;
}

.form-errors__head .material-symbols-outlined {
  font-size: 18px;
}

.form-errors__title {
  font-size: 13px;
  font-weight: 700;
}

.form-errors__list {
  margin: 6px 0 0;
  padding-left: 24px;
  list-style: disc;
}

.form-errors__list li {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.7;
  color: #7d2818;
}

/* ===================================================================
   会員登録・決済フロー
   =================================================================== */
.reg-page {
  padding: 16px var(--front-gutter) 32px;
}

.reg-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding: 20px 18px 18px;
  border-radius: var(--front-radius-lg);
  background: linear-gradient(135deg, var(--front-brand-soft) 0%, var(--front-brand-strong) 100%);
  border: 1px solid var(--front-brand-ink);
  color: #fff;
  box-shadow: 0 10px 22px rgba(20, 20, 20, 0.22);
  overflow: hidden;
}

.reg-hero--slim {
  padding: 16px 18px;
  align-items: center;
}

.reg-hero__body {
  min-width: 0;
}

.reg-hero__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.reg-hero__title {
  margin-top: 4px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
}

.reg-hero__title strong {
  font-size: 30px;
  font-weight: 900;
}

.reg-hero__price {
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.reg-hero__price strong {
  color: var(--front-brand-on-ink);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

.reg-hero__price-label,
.reg-hero__price-unit {
  font-size: 12px;
  opacity: 0.9;
}

.reg-hero__character {
  flex: 0 0 auto;
  height: 104px;
  margin: -18px -8px -18px 0;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.18));
}

/* 進捗。今どこかを常に見せて、あと何ステップかを伝える */
.reg-steps {
  display: flex;
  align-items: flex-start;
  margin: 18px 0 16px;
}

.reg-steps__item {
  flex: 1 1 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.reg-steps__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 13px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--front-line);
}

.reg-steps__item.is-done:not(:last-child)::after {
  background: var(--front-brand);
}

.reg-steps__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--front-bg-subtle);
  color: var(--front-fg-subtle);
  font-size: 13px;
  font-weight: 700;
}

.reg-steps__num .material-symbols-outlined {
  font-size: 18px;
}

.reg-steps__item.is-current .reg-steps__num {
  background: var(--front-brand-strong);
  color: var(--front-brand-on-ink);
  box-shadow: 0 0 0 4px var(--front-brand-tint);
}

.reg-steps__item.is-done .reg-steps__num {
  background: var(--front-brand-tint);
  color: var(--front-brand-ink);
}

.reg-steps__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--front-fg-muted);
}

.reg-steps__item.is-current .reg-steps__label {
  color: var(--front-fg);
}

.reg-card {
  padding: 18px 16px;
  border-radius: var(--front-radius-lg);
  background: var(--front-bg);
  border: 1px solid var(--front-line);
  box-shadow: var(--front-shadow);
}

.reg-card__title {
  font-size: 16px;
  font-weight: 700;
}

.reg-card__note {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--front-fg-muted);
}

.reg-card .common_label {
  margin-top: 14px;
}

.reg-card__submit {
  margin-top: 20px;
  width: 100%;
}

.reg-card__terms {
  margin-top: 12px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.7;
  text-align: center;
  color: var(--front-fg-muted);
}

.reg-card__terms a {
  color: var(--front-brand-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 各項目の補足。「なぜ聞くのか」を添えて手を止めさせない */
.reg-field + .reg-field {
  margin-top: 16px;
}

.reg-field__note {
  margin-top: 6px;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--front-fg-muted);
}

.reg-field__note .material-symbols-outlined {
  font-size: 14px;
  margin-top: 1px;
}

.reg-points {
  margin-top: 20px;
  display: grid;
  gap: 10px;
}

.reg-point {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--front-radius);
  background: var(--front-brand-tint);
}

.reg-point > .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--front-brand-ink);
  font-size: 22px;
}

.reg-point__title {
  font-size: 13px;
  font-weight: 700;
}

.reg-point__note {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--front-fg-muted);
}

.reg-login {
  margin-top: 20px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--front-fg-muted);
}

.reg-login a {
  margin-left: 4px;
  color: var(--front-brand-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 確認メール送信後 */
.reg-sent {
  text-align: center;
  padding: 8px 0 0;
}

/* バズゴー君は display:block なので、親の text-align では中央に寄らない。
   淡い円の台を敷いて、そこに立たせる（画像だけ置くと余白に浮いて見える）。 */
.reg-sent__figure {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 136px;
  height: 136px;
  margin: 4px auto 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #fff 0%, var(--front-brand-tint) 100%);
}

.reg-sent__character {
  height: 152px;
  margin-bottom: -4px;
  filter: drop-shadow(0 10px 14px rgba(31, 25, 18, 0.14));
}

.reg-sent__title {
  margin-top: 16px;
  font-size: 20px;
  font-weight: 700;
}

.reg-sent__mail {
  margin-top: 8px;
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--front-radius-pill);
  background: var(--front-brand-tint);
  color: var(--front-brand-ink);
  font-size: 13px;
  font-weight: 700;
  word-break: break-all;
}

.reg-sent__note {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--front-fg-muted);
}

.reg-sent__tips {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: var(--front-radius);
  background: var(--front-bg-subtle);
  text-align: left;
}

.reg-sent__tips-title {
  font-size: 12px;
  font-weight: 700;
}

.reg-sent__tips ul {
  margin: 6px 0 0;
  padding-left: 20px;
  list-style: disc;
}

.reg-sent__tips li {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--front-fg-muted);
}

.reg-sent__retry {
  margin-top: 18px;
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--front-brand-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- プラン内容 --- */
.plan-card {
  padding: 18px;
  border-radius: var(--front-radius-lg);
  background: linear-gradient(135deg, #fffdf6 0%, var(--front-brand-tint) 100%);
  border: 2px solid var(--front-brand-line);
}

.plan-card__badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--front-radius-pill);
  background: var(--front-brand-strong);
  color: var(--front-brand-on-ink);
  font-size: 11px;
  font-weight: 700;
}

.plan-card__price {
  margin-top: 10px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--front-brand-ink);
}

.plan-card__price strong {
  font-size: 38px;
  font-weight: 900;
  line-height: 1;
}

.plan-card__price-label,
.plan-card__price-unit {
  font-size: 13px;
  font-weight: 700;
}

.plan-card__cycle {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--front-fg-muted);
}

.plan-card__points {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.plan-card__points li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
}

.plan-card__points .material-symbols-outlined {
  flex: 0 0 auto;
  font-size: 18px;
  color: var(--front-brand-ink);
}

.plan-card__note {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--front-fg-muted);
}

.plan-options,
.pay-options {
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

.plan-option,
.pay-option {
  display: block;
  position: relative;
  cursor: pointer;
}

.plan-option input,
.pay-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.plan-option__body,
.pay-option__body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: var(--front-radius);
  border: 2px solid var(--front-line);
  background: var(--front-bg);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.plan-option input:checked + .plan-option__body,
.pay-option input:checked + .pay-option__body {
  border-color: var(--front-brand);
  background: var(--front-brand-tint);
}

.plan-option__name,
.pay-option__name {
  display: block;
  font-size: 14px;
  font-weight: 700;
}

.plan-option__price,
.pay-option__note {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  color: var(--front-fg-muted);
}

.pay-option__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--front-radius-sm);
  background: var(--front-bg-subtle);
  color: var(--front-brand-ink);
}

.pay-option__text {
  min-width: 0;
}

/* 決済情報ステップの確認サマリ */
.pay-summary {
  padding: 14px 16px;
  border-radius: var(--front-radius);
  background: var(--front-brand-tint);
}

.pay-summary__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--front-brand-ink);
}

.pay-summary__plan {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
}

.pay-summary__campaign {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--front-brand-ink);
}

.pay-summary__campaign .material-symbols-outlined {
  font-size: 16px;
}

.pay-card-head {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--front-fg-muted);
}

.pay-card-head .material-symbols-outlined {
  font-size: 15px;
}

.pay-card-row {
  display: flex;
  gap: 12px;
}

.pay-card-col {
  flex: 1 1 0;
  min-width: 0;
}

.pay-terms {
  margin-top: 18px;
  border-radius: var(--front-radius);
  border: 1px solid var(--front-line);
  overflow: hidden;
}

.pay-terms > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  background: var(--front-bg-subtle);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.pay-terms > summary::-webkit-details-marker {
  display: none;
}

.pay-terms[open] > summary .material-symbols-outlined {
  transform: rotate(180deg);
}

.pay-terms__body {
  padding: 12px 14px;
}

.pay-terms__body .ttl {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
}

.pay-terms__body .ttl:first-child {
  margin-top: 0;
}

.pay-terms__body ul {
  margin-top: 4px;
  padding-left: 18px;
  list-style: disc;
}

.pay-terms__body li {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--front-fg-muted);
}

/* .register_container 前提だったナビ類を .reg-page でも使えるようにする */
.reg-page .nav_row {
  margin-top: 20px;
  display: flex;
  gap: 12px;
}

.reg-page .nav_row.end {
  justify-content: flex-end;
}

.reg-page .nav_row .front-next-btn,
.reg-page .nav_row .prev-btn {
  flex: 1 1 0;
}

.reg-page .prev-btn {
  height: 48px;
  border-radius: var(--front-radius-pill);
  background: var(--front-bg-subtle);
  border: 1px solid var(--front-line-strong);
  color: var(--front-fg-muted);
  font-size: 14px;
  font-weight: 700;
}

/* ===================================================================
   登録完了
   祝う → 今日できること → 次の一歩 の順に置く。
   =================================================================== */
.reg-done {
  padding: 8px var(--front-gutter) 32px;
  text-align: center;
}

.reg-done__celebrate {
  position: relative;
  display: grid;
  place-items: center;
  padding: 12px 0 0;
}

.reg-done__burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 260px;
  height: 260px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, var(--front-brand-tint) 0deg 12deg, transparent 12deg 24deg);
  opacity: 0.9;
  animation: reg-done-spin 24s linear infinite;
}

@keyframes reg-done-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

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

.reg-done__character {
  position: relative;
  height: 190px;
  animation: reg-done-pop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@keyframes reg-done-pop {
  from { transform: scale(0.7) translateY(12px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.reg-done__title {
  margin-top: 12px;
  font-size: 22px;
  font-weight: 900;
}

.reg-done__lead {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--front-fg-muted);
}

.reg-done__coins {
  margin-top: 20px;
  padding: 18px;
  border-radius: var(--front-radius-lg);
  background: var(--front-bg-hero);
  border: 1px solid var(--front-line);
}

.reg-done__coins-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--front-fg-muted);
}

.reg-done__coins .go-coins {
  margin-top: 12px;
  justify-content: center;
}

.reg-done__coins-value {
  margin-top: 10px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  color: var(--front-brand-ink);
}

.reg-done__coins-value strong {
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
}

.reg-done__coins-value span {
  font-size: 13px;
  font-weight: 700;
}

.reg-done__coins-note {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--front-fg-muted);
}

.reg-done__actions {
  margin-top: 20px;
}

.reg-done__actions .front-next-btn {
  width: 100%;
  gap: 6px;
}

.reg-done__sub {
  margin-top: 12px;
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--front-brand-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.reg-done__steps {
  margin-top: 28px;
  display: grid;
  gap: 12px;
  text-align: left;
}

.reg-done__steps li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.reg-done__step-num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--front-brand-strong);
  color: var(--front-brand-on-ink);
  font-size: 12px;
  font-weight: 700;
}

.reg-done__step-title {
  font-size: 13px;
  font-weight: 700;
}

.reg-done__step-note {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--front-fg-muted);
}

/* ===================================================================
   トップ: さがす導線
   =================================================================== */
.home-search {
  margin: 16px var(--front-gutter) 0;
}

.home-search__form {
  display: flex;
  gap: 8px;
}

.home-search__field {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: 46px;
  border-radius: var(--front-radius-pill);
  background: var(--front-bg-subtle);
  border: 1px solid var(--front-line);
}

.home-search__field .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--front-fg-subtle);
  font-size: 20px;
}

.home-search__field input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  font-size: 14px;
}

.home-search__field input:focus {
  outline: none;
}

.home-search__submit {
  flex: 0 0 auto;
  height: 46px;
  padding: 0 20px;
  border-radius: var(--front-radius-pill);
  background: var(--front-brand-strong);
  color: var(--front-brand-on-ink);
  font-size: 14px;
  font-weight: 700;
  transition: transform 0.08s;
}

.home-search__submit:active {
  transform: translateY(1px);
}

.home-shortcuts {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

.home-shortcuts > li {
  flex: 1 1 0;
}

.home-shortcut {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px;
  border-radius: var(--front-radius);
  background: var(--front-bg);
  border: 1px solid var(--front-line);
  box-shadow: var(--front-shadow);
}

.home-shortcut__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--front-brand-tint);
  color: var(--front-brand-ink);
}

.home-shortcut__label {
  font-size: 11px;
  font-weight: 700;
}

/* ===================================================================
   店舗タイル（2列グリッド。旧 RestaurantCard の 48% 2列を踏襲）
   写真を主役にして、その上に無料品数と距離を重ねる。
   =================================================================== */
/* 写真を主役にしたタイル。PC でも2列のまま（写真を大きく見せる） */
.shop_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 var(--front-gutter);
}

.shop_tile {
  position: relative;
  border-radius: var(--front-radius);
  overflow: hidden;
  background: var(--front-bg);
  border: 1px solid var(--front-line);
  box-shadow: var(--front-shadow);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.shop_tile:hover {
  border-color: var(--front-brand-line);
  box-shadow: 0 2px 4px rgba(58, 42, 8, 0.06), 0 8px 20px rgba(58, 42, 8, 0.12);
}

.shop_tile__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--front-bg-subtle);
}

.shop_tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.shop_tile__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: var(--front-radius-pill);
  background: var(--front-brand-strong);
  color: var(--front-brand-on-ink);
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
}

.shop_tile__badge .material-symbols-outlined {
  font-size: 13px;
}

.shop_tile__state {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  padding: 3px 8px;
  border-radius: var(--front-radius-pill);
  background: rgba(20, 20, 20, 0.78);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.shop_tile__distance {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 8px;
  border-radius: var(--front-radius-pill);
  background: var(--front-brand-strong);
  color: var(--front-brand-on-ink);
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
}

.shop_tile__distance .material-symbols-outlined {
  font-size: 13px;
  color: inherit;
}

.shop_tile__body {
  padding: 10px;
}

.shop_tile__name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop_tile__benefit {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: var(--front-radius-sm);
  background: var(--front-brand-tint);
}

.shop_tile__benefit-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--front-brand-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop_tile__benefit-free {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 900;
  color: var(--front-brand-ink);
}

.shop_tile__area {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--front-fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===================================================================
   地図から探す
   地図を広く出し、下部に横一列の店舗カードだけを浮かせる。
   =================================================================== */
.map-page {
  position: relative;
  height: calc(100dvh - var(--front-header-h) - var(--front-nav-h));
  min-height: 0;
  overflow: hidden;
  background: #f3f4f2;
}

.map-page__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #f3f4f2;
}

.map-page__canvas {
  width: 100%;
  height: 100%;
}

.map-page__bar {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 10px;
}

.map-page__back,
.map-page__tool {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: #fff;
  color: var(--front-fg);
  box-shadow: 0 6px 18px rgba(32, 18, 8, 0.12);
}

.map-page__heading {
  margin: 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 18px rgba(32, 18, 8, 0.1);
  font-size: 13px;
  font-weight: 700;
}

.map-page__stage .maplibregl-ctrl-bottom-left {
  top: 64px;
  bottom: auto;
  left: 12px;
}

.map-page__stage .maplibregl-ctrl-attrib {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.78);
  color: #8a8a86;
}

.map-page__tools {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.map-page__tool:hover {
  color: var(--front-brand-ink);
}

.map-page__tool:first-child {
  color: #1a73e8;
}

.map-page__list {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  z-index: 30;
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 0 16px 4px;
  padding-right: 56px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 16px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  background: none;
  touch-action: pan-x;
  user-select: none;
  cursor: grab;
}

.map-page__list.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.map-page__list::-webkit-scrollbar {
  display: none;
}

.map-page__empty {
  pointer-events: none;
  margin: 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(32, 18, 8, 0.12);
  font-size: 13px;
  color: var(--front-fg-muted);
}

.map-result {
  flex: 0 0 min(240px, 72vw);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(32, 18, 8, 0.14);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  cursor: pointer;
}

.map-result:last-child {
  margin-right: 24px;
}

.map-result:hover,
.map-result.is-hover {
  transform: translateY(-1px);
}

.map-result.is-current {
  background: var(--front-brand-tint);
  border-color: var(--front-brand);
  box-shadow: 0 10px 24px rgba(138, 97, 19, 0.22);
}

.map-result__media {
  position: relative;
  flex: 0 0 auto;
}

.map-result__img {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: cover;
  background: var(--front-bg-subtle);
  -webkit-user-drag: none;
  pointer-events: none;
}

.map-result__rank {
  position: absolute;
  top: 6px;
  left: 6px;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--front-brand-strong);
  border: 2px solid #fff;
  color: var(--front-brand-on-ink);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.map-result.is-current .map-result__rank {
  border-color: var(--front-brand);
}

.map-result__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.map-result__name {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-result__meta {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  color: #9a9a96;
}

.map-result__benefit {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  color: var(--front-brand-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-pin {
  width: auto;
  min-width: 32px;
  height: 32px;
  cursor: pointer;
}

.map-pin__badge {
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--front-brand-strong);
  border: 3px solid #fff;
  box-shadow: 0 6px 14px rgba(20, 20, 20, 0.38);
  color: var(--front-brand-on-ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.map-pin.is-hover .map-pin__badge {
  transform: scale(1.15);
}

.map-pin.is-current {
  min-width: 42px;
  height: 42px;
}

.map-pin.is-current .map-pin__badge {
  min-width: 42px;
  height: 42px;
  font-size: 14px;
  border-width: 4px;
  border-color: var(--front-brand);
}

.map-here {
  position: relative;
  width: 22px;
  height: 22px;
}

.map-here__dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1a73e8;
  border: 3px solid #fff;
}

.map-here__pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(26, 115, 232, 0.22);
  animation: map-here-pulse 2s ease-out infinite;
}

@keyframes map-here-pulse {
  from { transform: scale(1); opacity: 0.7; }
  to { transform: scale(1.9); opacity: 0; }
}

.map-popup .maplibregl-popup-content {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.map-popup .maplibregl-popup-tip {
  display: none;
}

.map-popup__card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 210px;
  padding: 8px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(32, 18, 8, 0.16);
  text-decoration: none;
  color: inherit;
}

.map-popup__media {
  position: relative;
  display: block;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
}

.map-popup__media img {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
}

.map-popup__rank {
  position: absolute;
  top: 4px;
  left: 4px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--front-brand-strong);
  border: 2px solid #fff;
  color: var(--front-brand-on-ink);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  z-index: 1;
}

.map-popup__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.map-popup__name {
  font-size: 13px;
  font-weight: 800;
}

.map-popup__meta {
  font-size: 11px;
  color: #9a9a96;
}

.map-popup__benefit {
  font-size: 11px;
  font-weight: 800;
  color: var(--front-brand-ink);
}

.map-page .maplibregl-cooperative-gesture-screen {
  background: rgba(32, 18, 8, 0.45);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

/* ===== 加盟店ヒアリングシート（先方支給の紙シートに合わせる） ===== */
.hs-page {
  --hs-orange: #e8731c;
  --hs-orange-soft: #fdf1e5;
  --hs-line: #e8731c;
  max-width: 880px;
  margin: 0 auto;
  padding: 20px 16px 56px;
  color: #333;
}

.hs-page__brand {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4px;
}

.hs-page__title {
  margin: 0 0 12px;
  text-align: center;
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #222;
}

.hs-page__lead {
  margin: 0 auto 10px;
  max-width: 720px;
  text-align: center;
  font-size: 13px;
  line-height: 1.8;
  white-space: pre-line;
}

.hs-page__banner {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 10px;
  padding: 7px 20px;
  border: 1px solid #f0c08a;
  border-radius: 4px;
  background: var(--hs-orange-soft);
  color: var(--hs-orange);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

.hs-page__note {
  margin: 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.8;
  color: #555;
}

.hs-page__partner {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 18px 0 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #f6f7f9;
}

.hs-page__partner-label {
  font-size: 12px;
  color: #777;
}

.hs-page__partner-name {
  font-size: 15px;
  font-weight: 700;
  color: #0b2a4a;
}

.hs-page__print {
  margin-bottom: 16px;
}

.hs-page__print-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--hs-orange);
  border-radius: 999px;
  color: var(--hs-orange);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.hs-page__print-link .material-symbols-outlined {
  font-size: 18px;
}

.hs-page__print-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: #888;
}

.hs-page__app-note {
  margin: 22px 0 6px;
  font-size: 12px;
  color: #555;
}

.hs-alert {
  margin: 0 0 16px;
  padding: 10px 12px 10px 28px;
  border-radius: 8px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 13px;
  list-style: disc;
}

/* --- シート本体 --- */
.hs-sheet {
  margin-top: 14px;
  border: 1.5px solid var(--hs-line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.hs-sheet__head {
  margin: 0;
  padding: 9px 16px;
  border-bottom: 1.5px solid var(--hs-line);
  background: var(--hs-orange-soft);
  color: var(--hs-orange);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.hs-sheet__head:not(:first-child) {
  border-top: 1.5px solid var(--hs-line);
}

.hs-sheet__lead {
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1.5px solid var(--hs-line);
  font-size: 12px;
  line-height: 1.7;
  color: #666;
}

.hs-sheet__row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  padding: 12px 16px;
  border-bottom: 1.5px solid var(--hs-line);
}

.hs-sheet > .hs-sheet__row:last-child {
  border-bottom: 0;
}

/* --- 項目 --- */
.hs-field {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.hs-field__label {
  flex: 0 0 auto;
  width: 150px;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  color: #333;
  line-height: 1.5;
}

.hs-field__control {
  flex: 1 1 auto;
  min-width: 0;
}

.hs-field--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.hs-field--stack .hs-field__label {
  width: auto;
}

.hs-field--choices .hs-field__label {
  width: auto;
  max-width: 260px;
}

.hs-field__required {
  margin-left: 6px;
  color: #dc2626;
  font-size: 11px;
  font-weight: 700;
}

.hs-field__hint {
  margin: 4px 0 0;
  font-size: 11px;
  color: #999;
  line-height: 1.5;
}

.hs-field__error {
  margin: 4px 0 0;
  font-size: 12px;
  color: #dc2626;
}

.hs-field--invalid .hs-input {
  border-color: #dc2626;
}

.hs-input {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  background: #fff;
  font-size: 16px;
  font-family: inherit;
  color: #333;
}

.hs-input:focus {
  outline: 2px solid rgba(232, 115, 28, 0.35);
  outline-offset: 1px;
  border-color: var(--hs-orange);
}

.hs-input--narrow {
  width: 108px;
}

.hs-input--sign {
  width: 260px;
  max-width: 100%;
  padding: 6px 4px;
  border: 0;
  border-bottom: 1px solid var(--hs-orange);
  border-radius: 0;
}

textarea.hs-input {
  line-height: 1.6;
  resize: vertical;
}

@media (min-width: 720px) {
  .hs-field--half { flex: 1 1 calc(50% - 20px); }
  .hs-field--third { flex: 1 1 calc(33.333% - 20px); }
  .hs-field--two-thirds { flex: 1 1 calc(66.666% - 20px); }
  .hs-field--quarter { flex: 1 1 calc(25% - 20px); }
  .hs-field--half .hs-field__label,
  .hs-field--third .hs-field__label,
  .hs-field--quarter .hs-field__label { width: auto; max-width: 150px; }
}

@media (max-width: 719px) {
  .hs-field {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .hs-field__label {
    width: auto;
  }
}

/* --- チェック欄 --- */
.hs-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.hs-choice {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  cursor: pointer;
}

/* 紙のシートと同じ□のチェック欄にする */
.hs-choice input,
.hs-check input {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  margin: 0;
  border: 1.5px solid var(--hs-orange);
  border-radius: 2px;
  background: #fff;
  flex-shrink: 0;
  cursor: pointer;
}

.hs-choice input:checked,
.hs-check input:checked {
  background: var(--hs-orange);
  box-shadow: inset 0 0 0 2.5px #fff;
}

.hs-choice input:focus-visible,
.hs-check input:focus-visible {
  outline: 2px solid var(--hs-orange);
  outline-offset: 2px;
}

.hs-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.6;
  cursor: pointer;
}

.hs-check__note {
  display: block;
  font-size: 11px;
  color: #888;
}

/* --- 初期キット --- */
.hs-sheet__kit {
  padding: 14px 16px 6px;
  border-bottom: 1.5px solid var(--hs-line);
  text-align: center;
}

/* 6点を1行に並べ、画像は下端・説明文は上端で揃える。
   列幅は説明文の長さに合わせて自動で配分する（「（ポストカードサイズ）」のような長い説明の列を広くとる）。
   画像は元の大きさ（A4 で約 90x127px）のまま出し、拡大してぼやけさせない */
.hs-kit {
  display: grid;
  grid-template-columns: repeat(6, auto);
  justify-content: space-between;
  gap: 14px 8px;
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.hs-kit__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.hs-kit__visual {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 127px;
}

.hs-kit__image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

/* 品名と（サイズ）× 数量 のそれぞれの途中では折り返さず、収まらないときは2つの間で改行する */
.hs-kit__label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  color: #333;
  text-align: center;
}

.hs-kit__label span {
  display: inline-block;
  white-space: nowrap;
}

/* スマホ幅では「（ポストカードサイズ）× 4」が1行で入る2列にする */
@media (max-width: 719px) {
  .hs-kit {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }
}

.hs-sheet__pop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px 18px;
}

.hs-sheet__pop-lead {
  flex: 1 1 260px;
  font-size: 12px;
  line-height: 1.8;
  color: #444;
}

.hs-sheet__pop-lead p {
  margin: 0;
}

.hs-sheet__pop-options {
  display: flex;
  gap: 14px;
}

.hs-pop {
  position: relative;
  cursor: pointer;
}

.hs-pop input {
  position: absolute;
  opacity: 0;
  inset: 0;
}

.hs-pop__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border: 2px solid transparent;
  border-radius: 8px;
}

.hs-pop input:checked + .hs-pop__body {
  border-color: var(--hs-orange);
  background: var(--hs-orange-soft);
}

.hs-pop input:focus-visible + .hs-pop__body {
  outline: 2px solid var(--hs-orange);
  outline-offset: 2px;
}

/* 3種類とも同じ枠に収めて並びを揃える */
.hs-pop__image {
  display: block;
  width: 92px;
  height: 129px;
  object-fit: contain;
  border: 1px solid #eee;
}

.hs-pop__name {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
}

.hs-pop__name::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--hs-orange);
  border-radius: 2px;
  background: #fff;
}

.hs-pop input:checked + .hs-pop__body .hs-pop__name::before {
  background: var(--hs-orange);
  box-shadow: inset 0 0 0 2px #fff;
}

/* スマホ幅でも3種類を1行に並べる */
@media (max-width: 719px) {
  .hs-sheet__pop-options {
    gap: 6px;
  }

  .hs-pop__image {
    width: 84px;
    height: 118px;
  }
}

/* --- BUZZ GO メニューの利用条件 --- */
.hs-terms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.hs-terms__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  white-space: nowrap;
}

.hs-terms__item--wide {
  flex: 1 1 100%;
  min-width: 0;
}

.hs-terms__item--wide .hs-input {
  flex: 1 1 auto;
  min-width: 0;
}

.hs-sheet__row--menu-head {
  background: #fafafa;
}

/* --- 同意欄 --- */
.hs-sheet__terms {
  padding: 16px 20px 20px;
  text-align: center;
  font-size: 12px;
  line-height: 1.9;
  color: #444;
}

.hs-sheet__terms p {
  margin: 0 0 8px;
}

.hs-sheet__terms-title {
  font-size: 13px;
  font-weight: 700;
  color: #333;
}

.hs-sheet__agree {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 16px 32px;
  margin-top: 14px;
  text-align: left;
}

.hs-sign {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.hs-sign__label {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/* --- 送信 --- */
.hs-submit {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 28px auto 0;
  padding: 15px;
  border: none;
  border-radius: 999px;
  background: var(--hs-orange);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.hs-submit:hover {
  filter: brightness(1.05);
}

.hs-card {
  padding: 24px 16px;
  border: 1.5px solid var(--hs-line);
  border-radius: 12px;
  background: #fff;
}