/* SITE 71 — レスポンシブ
   調整順（MASTER §7）: カラム減少 → 縦積み → 余白 → 写真比率 → 折畳み → 表カード化 → 最後に見出し
   本文・料金・時刻・住所・フォームラベルは16px、注記は14pxを下回らせない。
   ドロワーへの切替と固定CTAの出現は同じ 1023px。境界帯に「ドロワーなのにCTAなし」を作らない。 */

/* ============ 1440px 以上 ============ */
@media (min-width: 1440px) {
  .container { padding-inline: var(--sp-7); }
}

/* ============ 1279px 以下: ヘッダーの電話は記号のみ ============ */
@media (max-width: 1279px) {
  :root { --grid-gap: 20px; }
  .header-actions .btn--tel .btn__label { display: none; }
  .header-actions .btn--tel { width: var(--tap); padding-inline: 0; }
  .global-nav__list { gap: 13px; }
  .global-nav__link { font-size: 14px; }
  .person-grid--standard { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan-row { grid-template-columns: minmax(0, 1fr) 180px minmax(0, 1fr); }
}

/* ============ 1023px 以下: ドロワー・固定CTA・12カラム解除 ============ */
@media (max-width: 1023px) {
  :root { --h-header: 62px; --sp-9: 80px; --sp-8: 64px; }

  /* 固定CTAの実高 = 項目の min-height（--h-cta）+ 上辺の 1px ボーダー */
  body { padding-bottom: calc(var(--h-cta) + 1px + env(safe-area-inset-bottom, 0px)); }

  .global-nav { display: none; }
  .drawer-toggle { display: flex; }
  .header-actions { margin-left: auto; }
  /* 電話はドロワー・固定CTA・フッターから到達できるため、ヘッダーからは外す */
  .header-actions .btn--tel { display: none; }
  .mobile-cta { display: block; }
  .brand__sub { display: none; }

  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9 { grid-column: span 12; }
  .hero__body, .hero__media,
  .price-panel, .price-side,
  .person-detail__media, .person-detail__body { grid-column: span 12; }

  .hero { padding-block: var(--sp-7) var(--sp-7); }
  .hero__media { order: -1; }
  .hero__lead { max-width: none; }

  .person-grid--roomy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .person-grid--standard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .example-grid, .role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .event-item { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .plan-row { grid-template-columns: minmax(0, 1fr) 180px; }
  .plan-row__extra { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer { margin-bottom: 0; }
}

/* ============ 767px 以下: 完全1カラム / 表のカード化 ============ */
@media (max-width: 767px) {
  .container { padding-inline: var(--sp-4); }
  :root { --grid-gap: 16px; --sp-9: 64px; --sp-8: 56px; --sp-7: 44px; }

  .hero__facts { grid-template-columns: minmax(0, 1fr); }
  .hero__actions .btn { flex: 1 1 100%; }

  /* 人物カードは2列を維持（写真3:4＋情報下置き / MASTER §7 情報量により2列可） */
  .person-grid--roomy, .person-grid--standard { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .person-card__body { padding: var(--sp-3); gap: 6px; }

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

  /* 料金の3カラム → 縦積み */
  .plan-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); padding-block: var(--sp-4); }

  /* 定義リストの表をカード化 */
  .def-list__row { grid-template-columns: minmax(0, 1fr); }
  .def-list__key { padding-bottom: 4px; }
  .def-list__val { padding-top: 0; padding-bottom: 14px; }
  .confirm-list__row { grid-template-columns: minmax(0, 1fr); }
  .confirm-list__key { padding-bottom: 2px; }
  .confirm-list__val { padding-top: 0; padding-bottom: 12px; }

  /* NEWS / EVENT / 出勤の行を縦積みへ */
  .news-item { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .news-item__meta { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
  .event-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .event-row__actions { justify-content: flex-start; }
  .rule-row { grid-template-columns: minmax(0, 1fr); }
  .rule-row__end { justify-self: start; }

  .shift-row {
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas: "thumb name" "thumb time";
    gap: 4px var(--sp-3);
  }
  .shift-row__thumb { grid-area: thumb; align-self: center; }
  .shift-row__name-wrap { grid-area: name; }
  .shift-row__time { grid-area: time; }
  .shift-row__tags { display: none; }

  .week-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); border-left: 0; }
  .week-strip__cell { border-left: 1px solid var(--c-line); }

  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .cta-band { padding: var(--sp-5); }
  .cta-band__actions { width: 100%; }
  .cta-band__actions .btn { flex: 1 1 100%; }
  .modal__foot { justify-content: stretch; }
  .modal__foot .btn { flex: 1 1 140px; }
  .list-controls { gap: var(--sp-3); }
  .list-controls__group { width: 100%; }
  .list-controls .select { flex: 1; min-width: 0; width: auto; }
  .segmented { width: 100%; }
  .segmented__btn { flex: 1; justify-content: center; padding-inline: 8px; }
}

/* ============ 479px 以下: 390px を正 ============ */
@media (max-width: 479px) {
  .container { padding-inline: 16px; }
  /* 390pxではタグを2件までに抑える（続きは詳細ページで全件表示） */
  .person-card__tags li:nth-child(n+3) { display: none; }
  .page-head { padding-block: var(--sp-7) var(--sp-6); }
  .role-card { padding: var(--sp-4); }
  .price-panel { padding: var(--sp-5); }
  .lightbox__bar { flex-wrap: wrap; }
  .week-strip__cell { padding: 12px 2px; }
  .step-rules > li { grid-template-columns: 40px minmax(0, 1fr); gap: var(--sp-3); }
}

/* ============ 360px 以下の保険 ============ */
@media (max-width: 360px) {
  .week-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .segmented__btn { padding-inline: 4px; font-size: 15px; }
  .mobile-cta__item { padding-inline: 2px; }
}

/* ============ 359px 以下: 店名＋予約＋メニューが1行に収まらない ============
   店名だけを縮められるようにし、あふれは省略記号で受ける（横スクロールを出さない）。
   360px では収まるため、この幅未満にだけ適用する。 */
@media (max-width: 359px) {
  .brand { flex: 0 1 auto; }
  .brand__name { overflow: hidden; text-overflow: ellipsis; }
}