/* =========================================================
   SITE 121 — CONCAFE MOBILE FIRST / レスポンシブ
   このテンプレートは 390px を正の基準に置き、PC幅では中央カラム
   （最大720px）を広げるだけで、情報の並び順・密度は変えない。
   一般的な67〜126系列のような「デスクトップ3〜4カラム化」は行わない
   （SITE121 の差別化: モバイル実用性を主役にする）。
   調整順: 余白 → フォントスケール → 折畳み → 表カード化（本文16px/注記14pxは維持）
   ========================================================= */

/* ---------- 900px 以上: 固定CTAバーを退避し、末尾の余白を戻す ---------- */
@media (min-width: 900px) {
  .hero { padding-block: var(--sp-8) var(--sp-9); }
}

/* ---------- 720px 以上: コンパクトヘッダーの2段化・PC主要ナビ表示 ---------- */
@media (min-width: 720px) {
  :root { --gutter: 24px; }
  .cast-card__name { font-size: var(--fs-body-lg); }
}

/* ---------- 1024px 以上: 余白をさらに拡張（カラム数は変えない） ---------- */
@media (min-width: 1024px) {
  .section { padding-block: var(--sp-8); }
  .drawer__panel { width: min(40vw, 380px); }
}

/* ---------- 1440px 以上: 中央カラムの左右に余白を確保するだけ ---------- */
@media (min-width: 1440px) {
  :root { --gutter: 24px; }
}

/* ---------- 767px 以下: 表をカード化 ---------- */
@media (max-width: 767px) {
  .table-wrap { overflow: visible; border: 0; border-radius: 0; }
  .table { min-width: 0; display: block; }
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .table tbody { display: block; }
  .table tr { display: block; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r); margin-bottom: var(--sp-3); }
  .table tr:last-child { margin-bottom: 0; }
  .table td { display: grid; grid-template-columns: 7rem minmax(0,1fr); gap: var(--sp-3); border-bottom: 1px dashed var(--c-line); }
  .table tr td:last-child { border-bottom: 0; }
  .table td::before { content: attr(data-label); font-weight: 700; color: var(--c-ink-muted); }
  .table td.num { text-align: left; }
}

/* ---------- 599px 以下: 出来事カード・イベント関連を1カラムへ ---------- */
@media (max-width: 599px) {
  .event-related { flex-wrap: wrap; }
}

/* ---------- 479px 以下: 390px を正とする最終調整 ---------- */
@media (max-width: 479px) {
  :root { --gutter: 14px; }
  .hdr__brand-sub { display: none; }
  .hero__facts { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .qm__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .form__summary div { grid-template-columns: minmax(0,1fr); gap: 2px; }
  .deflist__row { grid-template-columns: minmax(0,1fr); gap: 2px; }
  .modal__panel { padding: var(--sp-4); }
  .lightbox__panel { max-width: 96vw; }
}

/* ---------- 359px 以下の保険（横スクロールを出さない） ---------- */
@media (max-width: 359px) {
  .cast-grid, .gallery-grid { grid-template-columns: minmax(0, 1fr); }
  .event-card, .menu-item, .news-item { grid-template-columns: 72px minmax(0,1fr); }
  .sched-people__item { grid-template-columns: 40px minmax(0,1fr) auto; }
}