/* SITE 119 — CONCAFE RECRUIT FOCUS / responsive
   調整順は カラム減少 → 縦積み → 余白 → 写真比率 → 折畳み → 表カード化 → 最後に見出し
   本文・料金・時刻・住所・ラベルは 14px 未満へ縮めない */

/* ---------- 1440px 以上: --container(1160px) が上限。広げすぎない ---------- */

/* ---------- 1120〜1279px ---------- */
@media (max-width: 1279px) {
  .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .role-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 〜1099px: 2カラムの本文ブロックを1カラムへ ---------- */
@media (max-width: 1099px) {
  .header__actions .btn--outline { display: none; }
  .role-split { grid-template-columns: 1fr; }
  .steps--2col { grid-template-columns: 1fr; }
  .concept-grid { grid-template-columns: 1fr; }
}

/* ---------- 〜1023px: ヘッダーをドロワーへ ----------
   この閾値は components.js の「PC幅へ戻ったら閉じる」判定（>1023）と一致させる */
@media (max-width: 1023px) {
  :root { --header-h: 64px; --anchor-offset: 82px; }
  .header__nav { display: none; }
  .header__burger { display: inline-flex; }
  .header__inner { gap: var(--sp-3); }
  .header__actions { margin-inline-start: auto; }

  .hero__inner { grid-template-columns: 1fr; }
  .hero__actions .btn { min-width: 0; flex: 1 1 220px; }
  .recruit-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail { grid-template-columns: 1fr; gap: var(--sp-5); }
  .detail__media { max-width: 380px; }
  .access-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- 〜767px: 完全1カラム＋固定CTA ---------- */
@media (max-width: 767px) {
  body { padding-bottom: calc(var(--cta-h) + env(safe-area-inset-bottom, 0px) + 14px); }
  .cta-bar { display: block; }
  /* モードバーは SP では流す（固定CTAが同じ役割を担う）。sticky 分の余白も戻す */
  :root { --mode-bar-h: 0px; }

  .section__head { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }

  .mode-bar__inner { flex-wrap: nowrap; gap: var(--sp-3); padding-block: var(--sp-2); min-height: 0; }
  .mode-bar__label { flex: 1 1 auto; min-width: 0; }
  .mode-bar .aud-switch { flex: none; }
  .mode-bar__note { display: none; }

  .grid--4, .grid--3, .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .cast-card__body { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
  .cast-card__name { font-size: 1rem; }

  .hero__facts { grid-template-columns: 5.5em 1fr; }
  .hero-recruit { padding: var(--sp-4); gap: var(--sp-3); }
  .hero-recruit__actions { width: 100%; }
  .hero-recruit__actions .btn { flex: 1 1 auto; }

  .recruit-stats { grid-template-columns: 1fr; }
  .recruit-stat { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .role-cards { grid-template-columns: 1fr; }
  .recruit-actions .btn { min-width: 0; flex: 1 1 100%; }

  .price-cards { grid-template-columns: 1fr; }
  .menu-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-item--wide { grid-column: span 2; }

  .news-list__link { grid-template-columns: 1fr; gap: 4px; }
  .info-list__row { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; }
  .day-flow__item { grid-template-columns: 4.5em 1fr; gap: var(--sp-2); }

  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-5); }

  .detail__week { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .step { gap: var(--sp-3); }
  .step__num { width: 40px; height: 40px; }

  /* 表はカード化（PCで横並びの情報をSPで消さずに縦へ変換する） */
  .table-wrap--cardable .table { min-width: 0; }
  .table-wrap--cardable .table thead { display: none; }
  .table-wrap--cardable .table tr {
    display: grid;
    gap: 4px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-s);
    padding: var(--sp-3);
    background: var(--c-card);
  }
  .table-wrap--cardable .table tbody tr + tr { margin-top: var(--sp-3); }
  .table-wrap--cardable .table td {
    display: grid;
    grid-template-columns: 8em 1fr;
    gap: var(--sp-3);
    border: 0;
    padding: 3px 0;
    text-align: left;
  }
  .table-wrap--cardable .table td.num { text-align: left; }
  .table-wrap--cardable .table td::before {
    content: attr(data-th);
    font-size: var(--fs-note);
    font-weight: 700;
    color: var(--c-muted);
  }
}

/* ---------- 〜479px（390pxを正） ---------- */
@media (max-width: 479px) {
  :root { --gutter: 16px; }
  .header__brand-sub { display: none; }
  .header__brand-name { font-size: 1.0625rem; }
  .hero__actions .btn { flex: 1 1 100%; }
  .cta-bar__list { grid-template-columns: 1fr 1fr 1.25fr; }
  .cta-bar__list--recruit { grid-template-columns: 1fr 1fr 1.25fr; }
  .cta-bar a, .cta-bar button { padding-inline: 2px; }
  .modal__dialog { padding-inline: var(--sp-4); }
  .table-wrap--cardable .table td { grid-template-columns: 1fr; gap: 0; }
  .article__nav .btn { flex: 1 1 100%; }
  .aud-note__actions { width: 100%; }
  .aud-note__actions .btn { flex: 1 1 100%; }
  .recruit-stat { grid-template-columns: 1fr; text-align: left; }
}

/* ---------- 〜359px（320pxでもヘッダー・カードを破綻させない） ---------- */
@media (max-width: 359px) {
  :root { --gutter: 12px; }
  .header__mark { display: none; }
  .header__brand-name { font-size: 1rem; letter-spacing: 0.01em; }
  .header__actions .btn--primary { padding-inline: 12px; }
  .grid--4, .grid--3, .grid--2 { gap: var(--sp-2); }
  .cast-card__tags { display: none; }
  .hero__facts { grid-template-columns: 1fr; gap: 2px; }
  .hero__facts dd + dt { margin-top: 6px; }
  .day-flow__item { grid-template-columns: 1fr; gap: 2px; }
  .cta-bar .en { display: none; }
}

/* ---------- 印刷 ---------- */
@media print {
  .header, .cta-bar, .drawer, .drawer-backdrop, .modal, .lightbox,
  .mode-bar, #kyabel-promo { display: none !important; }
  body { background: #fff; color: #111; padding-bottom: 0; }
}