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

/* ============ 1440px 以上: 中央 1080px を維持 ============ */

/* ============ 1279px 以下 ============ */
@media (max-width: 1279px) {
  .hero__inner { gap: var(--sp-5); }
  .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============ 1099px 以下: ヘッダーをドロワーへ ============ */
@media (max-width: 1099px) {
  .hdr__nav { display: none; }
  .hdr__toggle { display: inline-flex; }
  .hdr__inner { gap: var(--sp-3); }
  .hdr__brand-sub { display: none; }

  .guide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============ 1023px 以下: 2カラム → 1カラム ============ */
@media (max-width: 1023px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); padding-block: var(--sp-6); }
  .hero__media { aspect-ratio: 16 / 9; order: -1; }
  .hero__text { max-width: none; }

  .mama { grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-5); }

  .access { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }

  .ftr__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); }
  .ftr__grid > *:first-child { grid-column: 1 / -1; }

  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============ 767px 以下: 完全1カラム＋固定CTA ============ */
@media (max-width: 767px) {
  :root { --w-pad: 16px; }

  body { padding-bottom: calc(var(--h-ctabar) + 12px + env(safe-area-inset-bottom)); }

  .cta-bar { display: flex; }

  .hdr__inner { min-height: var(--h-header-sp); gap: var(--sp-2); padding-inline: var(--w-pad); }
  .hdr__brand { min-width: 0; }
  .hdr__brand-name { font-size: 1.125rem; white-space: nowrap; }
  .hdr__tel-label { display: none; }
  .hdr__tel-num { font-size: 1.0625rem; white-space: nowrap; }
  .hdr__actions { gap: var(--sp-2); }
  /* メニューボタンはアイコンのみ。ラベルは読み上げ用に残す（実質の操作領域は44px以上） */
  .hdr__toggle { width: 44px; padding: 0; }
  .hdr__toggle-label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .section { padding-block: var(--sp-7); }
  .section--tight { padding-block: var(--sp-6); }
  .section__head { margin-bottom: var(--sp-4); }

  .hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .hero__fact { padding: var(--sp-3); }
  .hero__cta { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .hero__cta .btn { width: 100%; }

  .status__inner { gap: var(--sp-2) var(--sp-4); padding-block: var(--sp-3); }
  .status__tel { margin-left: 0; width: 100%; }

  /* ママ: 写真を上へ、横並びをやめる */
  .mama { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .mama__media { aspect-ratio: 4 / 3; max-width: 100%; }
  .mama__sign { text-align: left; }

  .guide { grid-template-columns: minmax(0, 1fr); }
  .price-hero { grid-template-columns: minmax(0, 1fr); }
  .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }

  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }

  /* 説明文が長いカードは2列にしない */
  [data-menu-pick] { grid-template-columns: minmax(0, 1fr); }

  /* ニュースは写真を上へ */
  .news-item { grid-template-columns: minmax(0, 1fr); }
  .news-item__body { padding: var(--sp-4); }

  /* 表 → カード（見出しを data-label から復元） */
  .table--cards,
  .table--cards thead,
  .table--cards tbody,
  .table--cards tr,
  .table--cards th,
  .table--cards td { display: block; width: auto; }
  .table--cards { border: 0; background: none; }
  .table--cards thead { display: none; }
  .table--cards tr {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-3);
  }
  .table--cards th,
  .table--cards td { border: 0; padding: 4px 0; white-space: normal; }
  .table--cards th { background: none; font-size: var(--fs-body); }
  .table--cards td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--fs-small);
    color: var(--c-ink-soft);
    font-weight: 700;
  }

  .flow__item { grid-template-columns: 44px minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-3); }
  .flow__num { width: 44px; height: 44px; font-size: 1.125rem; }

  .shift__row { grid-template-columns: 60px minmax(0, 1fr); gap: var(--sp-3); }
  .shift__thumb { width: 60px; }
  .shift__time { grid-column: 1 / -1; border-top: 1px dashed var(--c-line); padding-top: var(--sp-2); }

  .day__item { grid-template-columns: 72px minmax(0, 1fr); gap: var(--sp-3); }

  .cal { padding: var(--sp-3); }
  .cal__grid { gap: 2px; }
  .cal__cell { min-height: 44px; aspect-ratio: auto; padding: 4px 2px; }

  .form__confirm div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .form__actions .btn { width: 100%; }

  .ftr { padding-block: var(--sp-6) var(--sp-5); margin-bottom: 0; }
  .ftr__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .ftr__bottom { flex-direction: column; align-items: flex-start; }

  .modal__panel { padding: var(--sp-4); max-height: 82vh; }
  .lightbox { padding: var(--sp-3); }
}

/* ============ 479px 以下: 390px を正 ============ */
@media (max-width: 479px) {
  .grid--2,
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: minmax(0, 1fr); }

  .hero__facts { grid-template-columns: minmax(0, 1fr); }
  .hero__fact dd { font-size: 1.0625rem; }

  .gal { grid-template-columns: minmax(0, 1fr); }

  .tabs { gap: 6px; }
  .tab { padding: 8px 12px; }

  .cal__dow { font-size: var(--fs-small); }
  .cal__day { font-size: var(--fs-small); }
  .cal__mark { font-size: var(--fs-small); }

  .card__body { padding: var(--sp-3); }
  .person__name { font-size: 1.125rem; }

  .menu-item { grid-template-columns: minmax(0, 1fr); }
  .menu-item__price { justify-self: start; }

  .ftr__info dl,
  .drawer__info dl,
  .detail-dl,
  .nojs dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ftr__info dt,
  .drawer__info dt,
  .detail-dl dt,
  .nojs dt { margin-top: var(--sp-2); }
}

/* ============ 359px 以下の保険 ============ */
@media (max-width: 359px) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: minmax(0, 1fr); }
  /* ヘッダーの電話番号は文字を縮めず非表示にする。
     電話は固定CTAバー（常時表示）とドロワー内の大きなボタンで担保する。 */
  .hdr__tel { display: none; }
}

/* ============ 印刷 ============ */
@media print {
  .hdr, .drawer, .cta-bar, .crumbs, #kyabel-promo { display: none !important; }
  body { padding-bottom: 0; background: #fff; }
}