/* =========================================================
   SITE 115 — CONCAFE MENU & GOODS / pages.css
   トップ順序: HERO → FEATURED MENU → MENU CATEGORIES → GOODS →
   TODAY → CAST → SYSTEM → EVENT → ACCESS
   下層: concept / cast / cast-detail / schedule / menu / system /
   event / event-detail / news / gallery / access / recruit / contact / privacy

   グリッドで height:100% を使うカード（メニュー/グッズ/CAST/イベント/
   ニュース）は aspect-ratio: auto; min-width: 0; を明示し、列揃え時の
   カード同士の重なりを防ぐ（MASTER §CSS Gridの重なりに注意）。
   ========================================================= */

/* ---------- HERO ---------- */
.hero { padding: var(--sp-8) 0 var(--sp-7); background: linear-gradient(180deg, var(--c-ivory-100), var(--c-ivory) 60%); }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-7); align-items: center; }
.hero__eyebrow { display: block; font-family: var(--f-display); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-coral-strong); font-size: var(--fs-eyebrow); margin-bottom: var(--sp-3); }
.hero__title { font-size: var(--fs-hero); margin-bottom: var(--sp-4); }
.hero__catch { font-size: var(--fs-body-lg); color: var(--c-ink-muted); margin-bottom: var(--sp-5); max-width: 46ch; }
.hero__status { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.hero__hours, .hero__price { font-weight: 600; }
.hero__cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.hero__media .ph { box-shadow: var(--sh-2); }

/* ---------- カテゴリ概要カード ---------- */
.cat-card { display: block; aspect-ratio: auto; min-width: 0; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); padding: var(--sp-5); box-shadow: var(--sh-1); }
.cat-card:hover { border-color: var(--c-coral-strong); }
.cat-card__name { display: block; font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; margin-bottom: 4px; }
.cat-card__count { display: inline-block; font-size: var(--fs-note); color: var(--c-blue-strong); font-weight: 700; margin-bottom: 8px; }
.cat-card__note { display: block; }
.cats-grid { grid-template-columns: repeat(4, 1fr); }

/* ---------- メニューカード ---------- */
.menu-grid { grid-template-columns: repeat(3, 1fr); }
.menu-card { aspect-ratio: auto; min-width: 0; display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-1); }
.menu-card .ph { border-radius: 0; }
.menu-card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.menu-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.menu-card__name { font-size: 1.05rem; }
.menu-card__price { font-weight: 700; color: var(--c-coral-strong); white-space: nowrap; }
.menu-card__desc { color: var(--c-ink-muted); font-size: var(--fs-note); }
.menu-card__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.menu-card__allergen { font-size: var(--fs-note); color: var(--c-ink-muted); margin-top: auto; padding-top: 6px; border-top: 1px dashed var(--c-line); }
.menu-card__allergen.is-none { color: var(--c-ink-muted); opacity: 0.8; }
.menu-card__allergen-label { font-weight: 700; color: var(--c-ink); }

/* ---------- メニューツールバー（カテゴリタブ／トグル） ---------- */
.menu-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.menu-toolbar__toggles { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.toggle-switch { display: flex; align-items: center; gap: 8px; min-height: var(--tap); font-weight: 600; font-size: var(--fs-label); }
.toggle-switch input { width: 20px; height: 20px; min-height: 0; }
.menu-sheet-trigger { display: none; }
.menu-count { color: var(--c-ink-muted); font-size: var(--fs-note); margin-bottom: var(--sp-4); }
.menu-catnote { background: var(--c-coral-tint); border-radius: var(--r); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-note); margin-bottom: var(--sp-5); }

/* ---------- グッズ（ブルーを基調にMENUと役割を分ける） ---------- */
.goods-section { scroll-margin-top: 96px; }
.goods-note { background: var(--c-blue-tint); border-radius: var(--r); padding: var(--sp-4); font-size: var(--fs-note); margin-bottom: var(--sp-5); }
.goods-grid { grid-template-columns: repeat(4, 1fr); }
.goods-card { aspect-ratio: auto; min-width: 0; display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-1); }
.goods-card__media { position: relative; }
.goods-card__media .ph { border-radius: 0; }
.goods-card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.goods-card__name { font-size: 1rem; }
.goods-card__price { font-weight: 700; color: var(--c-blue-strong); }
.goods-card__desc { color: var(--c-ink-muted); font-size: var(--fs-note); }
.goods-card__note { margin-top: auto; padding-top: 6px; border-top: 1px dashed var(--c-line); }

/* ---------- ステータスカード（TODAY） ---------- */
.status-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); padding: var(--sp-5); box-shadow: var(--sh-1); }
.status-card__badge { display: inline-block; padding: 4px 14px; border-radius: 999px; font-weight: 700; margin-bottom: var(--sp-3); }
.status-card.is-open .status-card__badge { background: var(--c-ok-bg); color: var(--c-ok-ink); }
.status-card.is-closed .status-card__badge { background: var(--c-warn-bg); color: var(--c-warn-ink); }
.status-card__text { margin-bottom: var(--sp-3); font-size: var(--fs-body-lg); }
.status-card__meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: var(--fs-note); color: var(--c-ink-muted); }
.today-cast { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }
.today-cast li { background: var(--c-bg-alt); border-radius: 999px; padding: 6px 14px; font-size: var(--fs-note); }
.today-cast a { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- CAST ---------- */
.cast-grid { grid-template-columns: repeat(4, 1fr); }
.person { aspect-ratio: auto; min-width: 0; }
.person__link { display: block; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-1); }
.person__link .ph { border-radius: 0; }
.person__body { padding: var(--sp-4); }
.person__name { font-weight: 700; font-size: 1.05rem; }
.person__role { color: var(--c-ink-muted); font-size: var(--fs-note); margin-bottom: 4px; }
.person__time { font-size: var(--fs-note); font-weight: 600; color: var(--c-coral-strong); margin-bottom: 8px; }
.person__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.person__tags li { background: var(--c-bg-alt); border-radius: 999px; padding: 2px 10px; font-size: 0.8125rem; color: var(--c-ink-muted); }

.detail-hero { display: grid; grid-template-columns: 320px 1fr; gap: var(--sp-6); align-items: start; margin-bottom: var(--sp-7); }
.detail-hero__name { font-size: var(--fs-h1); margin-bottom: 4px; }
.detail-hero__role { color: var(--c-ink-muted); margin-bottom: var(--sp-3); }
.detail-hero__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-4); }
.detail-hero__tags li { background: var(--c-bg-alt); border-radius: 999px; padding: 4px 12px; font-size: var(--fs-note); }
.week-list { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-2); }
.week-list li { text-align: center; padding: var(--sp-3) 6px; border-radius: var(--r-sm); background: var(--c-bg-alt); }
.week-list li.is-on { background: var(--c-coral-tint); }
.week-list li .week-cell__date { display: block; font-size: var(--fs-note); font-weight: 700; }
.week-list li .week-cell__time { display: block; font-size: 0.8125rem; color: var(--c-ink-muted); }

/* ---------- 出勤（schedule） ---------- */
.schedule-panel { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); padding: var(--sp-6); margin-top: var(--sp-5); }
.schedule-panel__date { font-weight: 700; font-size: 1.1rem; margin-bottom: var(--sp-3); }
.schedule-panel__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); margin-top: var(--sp-4); }
.schedule-panel__person { display: flex; align-items: center; gap: var(--sp-3); }
.schedule-panel__person .ph { width: 56px; flex: none; border-radius: 999px; }
.schedule-panel__name { display: block; font-weight: 700; }
.schedule-panel__events { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); }

/* ---------- 料金（system） ---------- */
.plan-mini { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); padding: var(--sp-4); aspect-ratio: auto; min-width: 0; }
.plan-mini__name { font-weight: 700; margin-bottom: 4px; }
.plan-card { aspect-ratio: auto; min-width: 0; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); padding: var(--sp-5); box-shadow: var(--sh-1); }
.plan-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.plan-card__price { font-weight: 700; color: var(--c-coral-strong); }
.plan-card__includes { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: 4px; }
.plan-card__includes li::before { content: "・"; }
.example-card { aspect-ratio: auto; min-width: 0; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); padding: var(--sp-5); box-shadow: var(--sh-1); }
.example-card__total td { font-weight: 700; border-top: 2px solid var(--c-line-strong); }

/* ---------- イベント ---------- */
.event-grid { grid-template-columns: repeat(2, 1fr); }
.event-card { aspect-ratio: auto; min-width: 0; }
.event-card__link { display: block; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-1); }
.event-card__link .ph { border-radius: 0; }
.event-card__body { padding: var(--sp-4); }
.event-card__date { display: flex; align-items: center; gap: 10px; font-size: var(--fs-note); margin-bottom: 8px; }
.event-card__title { font-size: 1.1rem; margin-bottom: 6px; }
.event-card__lead { color: var(--c-ink-muted); font-size: var(--fs-note); }

.detail-media { margin-bottom: var(--sp-6); }
.detail-media .ph { max-width: 720px; margin: 0 auto; }

/* ---------- ニュース ---------- */
.news-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.news-card { aspect-ratio: auto; display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-5); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-1); }
.news-card .ph { border-radius: 0; }
.news-card__body { padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; }
.news-card__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: var(--fs-note); }
.news-card__title { font-size: 1.05rem; margin-bottom: 4px; }
.news-card__body-text { color: var(--c-ink-muted); font-size: var(--fs-note); }

/* ---------- ギャラリー ---------- */
.gallery-grid { grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; }
.gallery-item { aspect-ratio: auto; min-width: 0; }
.gallery-item__btn { display: block; width: 100%; position: relative; border-radius: var(--r); overflow: hidden; }
.gallery-item__tag { position: absolute; left: 8px; bottom: 8px; }

/* ---------- アクセス ---------- */
.access-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: start; }
.route-list { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }
.route__step { display: inline-block; font-weight: 700; color: var(--c-coral-strong); margin-right: 8px; }

/* ---------- コンセプト ---------- */
.term-grid { grid-template-columns: repeat(3, 1fr); }
.term-card { aspect-ratio: auto; min-width: 0; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); padding: var(--sp-4); }
.term-card__term { font-weight: 700; font-size: 1.05rem; }
.term-card__meaning { color: var(--c-ink-muted); font-size: var(--fs-note); margin-top: 4px; }

/* ---------- 求人 ---------- */
.role-grid { grid-template-columns: repeat(3, 1fr); }
.role-card { aspect-ratio: auto; min-width: 0; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r); padding: var(--sp-5); box-shadow: var(--sh-1); display: flex; flex-direction: column; gap: 6px; }
.role-card__wage { font-size: 1.05rem; }
.role-card__shift { font-weight: 600; }
.role-card__items { margin-top: var(--sp-2); display: flex; flex-direction: column; gap: 4px; }
.role-card__items li::before { content: "・"; }
.flow-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.flow-step { display: flex; gap: var(--sp-4); align-items: flex-start; }
.flow-step__num { flex: none; width: 36px; height: 36px; border-radius: 999px; background: var(--c-coral-strong); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.flow-step__title { font-weight: 700; margin-bottom: 2px; }

/* ---------- お問い合わせ／求人フォーム ---------- */
.form-section { max-width: var(--w-narrow); margin: 0 auto; }

/* ---------- プライバシー ---------- */
.legal { display: flex; flex-direction: column; gap: var(--sp-5); }
.legal h2 { font-size: var(--fs-h3); margin-top: var(--sp-4); }
.legal p, .legal li { color: var(--c-ink-muted); }
.legal ol, .legal ul { padding-left: 1.4em; list-style: decimal; }
.legal ul { list-style: disc; }