/* =========================================================
   SITE 118 — ページ固有スタイル（トップ／下層）
   差別化の中心: fact4（ヒーロー4項目） / example（会計例） /
   flow（来店ステップ） / rule-card（ルール分類） / age-flag（年齢条件）
   トップ順序: HERO → PRICE EXAMPLE → VISIT FLOW → RULES → TODAY → CAST → MENU → FAQ → ACCESS
   ========================================================= */

/* ---------- ヒーロー4項目（チャージ・1ドリンク・平均滞在・予約可否） ---------- */
.fact4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.fact4__item {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  padding: var(--sp-3) var(--sp-3);
  text-align: left;
}
.fact4__label { font-size: var(--fs-note); color: var(--c-ink-muted); display: block; margin-bottom: 4px; }
.fact4__value { font-family: var(--f-round); font-size: var(--fs-h4); font-weight: 700; color: var(--c-navy); line-height: 1.3; }
.fact4__value .price { color: var(--c-accent-strong); }

/* ---------- 会計例 ---------- */
.example-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.example {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.example__title { font-size: var(--fs-h4); font-family: var(--f-round); font-weight: 700; }
.example__rows { display: grid; gap: 6px; margin-top: 4px; }
.example__row { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-body); }
.example__total {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--c-line-strong);
  font-family: var(--f-round);
  font-weight: 700;
  font-size: var(--fs-h4);
  color: var(--c-navy);
}
.example__note { font-size: var(--fs-note); color: var(--c-ink-muted); margin-top: var(--sp-1); }

/* ---------- 来店の流れ（VISIT FLOW） ---------- */
.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.flow__step {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  padding: var(--sp-4);
}
.flow__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-navy);
  color: #fff;
  font-family: var(--f-round);
  font-weight: 700;
  font-size: var(--fs-label);
  margin-bottom: var(--sp-3);
}
.flow__title { font-size: var(--fs-body-lg); font-family: var(--f-round); font-weight: 700; margin-bottom: 6px; }
.flow__text { font-size: var(--fs-body); color: var(--c-ink-muted); }

/* ---------- ルールカテゴリ（RULES） ---------- */
.rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.rule-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-left: 6px solid var(--c-mint-strong);
  border-radius: var(--r);
  padding: var(--sp-4);
}
.rule-card--caution { border-left-color: var(--c-accent-strong); }
.rule-card__head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.rule-card__icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-mint-100);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rule-card--caution .rule-card__icon { background: var(--c-pink-100); }
.rule-card__icon svg { width: 18px; height: 18px; stroke: var(--c-navy); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rule-card__title { font-family: var(--f-round); font-size: var(--fs-body-lg); font-weight: 700; }
.rule-card__list { display: grid; gap: 8px; margin-top: var(--sp-2); }
.rule-card__list li { font-size: var(--fs-body); color: var(--c-ink-muted); padding-left: 1.3em; position: relative; }
.rule-card__list li::before { content: "・"; position: absolute; left: 0; color: var(--c-mint-strong); }
.rule-card--caution .rule-card__list li::before { color: var(--c-accent-strong); }

/* ---------- 年齢・利用条件バッジ（feature flag 切替対象） ---------- */
.age-flag {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  background: var(--c-warn-bg);
  border: 1px solid var(--c-warn-line);
  border-radius: var(--r);
  padding: var(--sp-3) var(--sp-4);
}
.age-flag__badge {
  flex: none;
  font-family: var(--f-round);
  font-weight: 700;
  font-size: var(--fs-label);
  background: #7a5416;
  color: #fff;
  border-radius: var(--r);
  padding: 4px 10px;
}
.age-flag__text { font-size: var(--fs-body); color: #5b3f10; }

/* ---------- ステータス帯 ---------- */
.statusbar { background: var(--c-navy); color: #fff; }
.statusbar__in {
  max-width: var(--w-container);
  margin-inline: auto;
  padding: var(--sp-3) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-6);
  font-size: var(--fs-body);
}
.statusbar__state { font-family: var(--f-round); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.statusbar__state::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #7fd9ab; flex: none; }
.statusbar__state--closed::before { background: #e79a9a; }
.statusbar__item { display: flex; align-items: center; gap: 8px; }
.statusbar__label { font-size: var(--fs-note); color: #c7cfdd; }
.statusbar__value { font-weight: 700; }
.statusbar a.statusbar__value { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- ヒーロー（説明型: HERO直下にPRICE EXAMPLEが続く） ---------- */
.hero { padding-block: var(--sp-8) 0; background: linear-gradient(180deg, var(--c-mint-050) 0%, var(--c-white) 70%); }
.hero__in {
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--sp-7);
  align-items: center;
  padding-bottom: var(--sp-7);
}
.hero__eyebrow { font-family: var(--f-round); font-size: var(--fs-deco); font-weight: 700; letter-spacing: 0.12em; color: var(--c-accent-strong); margin-bottom: var(--sp-2); }
.hero__title { font-size: var(--fs-hero); }
.hero__title small { display: block; margin-top: var(--sp-2); font-size: var(--fs-body-lg); font-family: var(--f-body); font-weight: 500; color: var(--c-ink-muted); }
.hero__lead { margin-top: var(--sp-4); font-size: var(--fs-body-lg); color: var(--c-ink-muted); max-width: 34rem; }
.hero__facts { margin-top: var(--sp-5); }
.hero__actions { margin-top: var(--sp-5); }
.hero__media { position: relative; }
.hero__media .ph { box-shadow: var(--sh-1); }
.hero__badge {
  margin-top: var(--sp-3);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  padding: 10px 14px;
  font-size: var(--fs-note);
  color: var(--c-ink-muted);
}

/* ---------- コンセプト要約・アクセス等の2カラム ---------- */
.concept-sum { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.concept-sum__body > * + * { margin-top: var(--sp-4); }
.concept-sum__terms { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.concept-sum__term { padding: var(--sp-3); background: #fff; border: 1px solid var(--c-line); border-radius: var(--r); }
.concept-sum__term dt { font-family: var(--f-round); font-weight: 700; }
.concept-sum__term dd { margin-top: 4px; color: var(--c-ink-muted); font-size: var(--fs-note); }
.concept-sum__media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.access-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }

/* ---------- CAST / MENU / イベント / お知らせ グリッド ---------- */
.today__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-4); }
.today__closed { grid-column: 1 / -1; }
.today__foot { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.cast-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-4); }
.cast-grid--page { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.menu-item { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.menu-item__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.menu-item__name { font-family: var(--f-round); font-weight: 700; font-size: var(--fs-body-lg); }
.menu-item__price { color: var(--c-accent-strong); font-weight: 700; }
.menu-item__desc { font-size: var(--fs-note); color: var(--c-ink-muted); }
.menu-item__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.plan { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.plan--feature { border-color: var(--c-accent); box-shadow: var(--sh-1); background: var(--c-pink-050); }
.plan__name { font-family: var(--f-round); font-weight: 700; font-size: var(--fs-body-lg); }
.plan__price { font-size: 2rem; font-family: var(--f-round); font-weight: 700; color: var(--c-navy); }
.plan__price span { font-size: var(--fs-note); font-family: var(--f-body); font-weight: 500; color: var(--c-ink-muted); margin-left: 4px; }
.plan__desc { font-size: var(--fs-body); color: var(--c-ink-muted); }
.plan__list { display: grid; gap: 6px; margin-top: 4px; }
.plan__list li { font-size: var(--fs-note); padding-left: 1.2em; position: relative; }
.plan__list li::before { content: "・"; position: absolute; left: 0; }

.role-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.role { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r); padding: var(--sp-4); display: flex; flex-direction: column; gap: 6px; }
.role__name { font-family: var(--f-round); font-weight: 700; font-size: var(--fs-body-lg); }
.role__wage { color: var(--c-accent-strong); font-weight: 700; margin-top: 4px; }
.role__wage-note { font-size: var(--fs-note); color: var(--c-ink-muted); }
.role__items { display: flex; flex-wrap: wrap; gap: 6px; }

.event-list { display: grid; gap: var(--sp-4); }
.event-item { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-4); background: #fff; border: 1px solid var(--c-line); border-radius: var(--r); overflow: hidden; }
.event-item--past { opacity: 0.75; }
.event-item__body { padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; display: flex; flex-direction: column; gap: 6px; }
.event-item__meta { display: flex; align-items: center; gap: var(--sp-2); }
.event-item__date { font-weight: 700; }
.event-item__title { font-size: var(--fs-h4); font-family: var(--f-round); }
.event-item__title a { text-decoration: none; }
.event-item__title a:hover { color: var(--c-accent-strong); text-decoration: underline; }
.event-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--sp-6); align-items: start; }
.event-detail__body > * + * { margin-top: var(--sp-3); }
.event-detail__body p { font-size: var(--fs-body-lg); }

.news-list { display: grid; gap: var(--sp-4); }
.news-item { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-4); background: #fff; border: 1px solid var(--c-line); border-radius: var(--r); overflow: hidden; padding: 0; }
.news-item > div { padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; }
.news-item__head { display: flex; align-items: center; gap: var(--sp-2); }
.news-item__date { font-weight: 700; }
.news-item__title { font-size: var(--fs-h4); font-family: var(--f-round); margin-top: 6px; }
.news-item__body { margin-top: 6px; color: var(--c-ink-muted); }
.news-compact { display: grid; gap: var(--sp-2); }
.news-compact__row { display: grid; grid-template-columns: 8rem auto 1fr; gap: var(--sp-3); align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--c-line); font-size: var(--fs-body); }
.news-compact__row a { text-decoration: underline; text-underline-offset: 3px; }

.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.gallery-item { display: block; width: 100%; text-align: left; padding: 0; }
.gallery-item__cap { display: block; margin-top: 6px; font-size: var(--fs-note); color: var(--c-ink-muted); }

.route { display: grid; gap: var(--sp-3); counter-reset: route; }
.route li { position: relative; padding-left: 2.5rem; font-size: var(--fs-body); min-height: var(--tap); display: flex; align-items: center; }
.route li { counter-increment: route; }
.route li::before {
  content: counter(route);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-navy);
  color: #fff;
  font-family: var(--f-round);
  font-weight: 700;
  font-size: var(--fs-note);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- CAST 詳細・週間出勤 ---------- */
.person-detail { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.person-detail__name { display: flex; flex-direction: column; gap: 4px; }
.person-detail__name small { font-family: var(--f-body); font-size: var(--fs-body); font-weight: 500; color: var(--c-ink-muted); }
.person-detail__msg { margin-top: var(--sp-4); background: var(--c-mint-050); border-radius: var(--r); padding: var(--sp-4); }
.person-detail__msg strong { display: block; font-family: var(--f-round); margin-bottom: 6px; }
.person-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-2); }
.person-week__day { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r); padding: var(--sp-3); text-align: center; }
.person-week__day--off { background: var(--c-mint-050); }
.person-week__label { font-size: var(--fs-note); color: var(--c-ink-muted); }
.person-week__date { font-weight: 700; margin-top: 2px; }
.person-week__time { margin-top: var(--sp-2); font-weight: 700; color: var(--c-navy); font-size: var(--fs-note); }
.person-week__time--off { color: var(--c-ink-muted); font-weight: 500; }
.sched-people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.sched-person { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r); overflow: hidden; }
.sched-person:hover { background: var(--c-mint-050); }
.sched-person__name { font-family: var(--f-round); font-weight: 700; padding: 8px 10px 0; }
.sched-person__time { font-size: var(--fs-note); font-weight: 700; color: var(--c-navy); padding: 2px 10px; }
.sched-person > .note { padding: 0 10px 10px; }
.sched-day__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); flex-wrap: wrap; gap: var(--sp-2); }
.sched-day__date { font-family: var(--f-round); font-size: var(--fs-h3); font-weight: 700; }
.sched-day__count { font-weight: 700; color: var(--c-accent-strong); }

/* ---------- 汎用リード文書ページ（privacy等） ---------- */
.doc { max-width: var(--w-narrow); }
.doc h2 { font-size: var(--fs-h3); margin-top: var(--sp-6); }
.doc h2:first-child { margin-top: 0; }
.doc p, .doc li { font-size: var(--fs-body); }
.doc p { margin-top: var(--sp-3); }
.doc ul { margin-top: var(--sp-3); display: grid; gap: 8px; }
.doc li { padding-left: 1.2em; position: relative; }
.doc li::before { content: "・"; position: absolute; left: 0; }

/* ---------- 下部 CTA ---------- */
.endcta { background: var(--c-navy); color: #fff; padding-block: var(--sp-7); }
.endcta__in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--sp-6); align-items: center; max-width: var(--w-container); margin-inline: auto; padding-inline: var(--gutter); }
.endcta__title { font-size: var(--fs-h2); }
.endcta__text { margin-top: var(--sp-3); color: #d3d9e5; }
.endcta__acts { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: flex-end; }

/* 固定CTAぶんの余白（SPのみ responsive.css で有効化） */
.page-bottom-space { height: 0; }