/* SITE 120 — responsive.css
   カラム減少→縦積み→余白調整→写真比率→折畳み→表カード化→見出しサイズ調整の順で対応する。
   ドロワー切替の境界は1079px（globalnav/store-switch領域の詳細表示と合わせる）。 */

/* ---------------- 1919px以下（最大幅は container が担保） ---------------- */
@media (max-width: 1439px) {
  .plan-grid, .menu-grid, .event-grid { grid-template-columns: repeat(3, 1fr); }
  .person-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------- 1279px以下: ナビ密度を整理 ---------------- */
@media (max-width: 1279px) {
  .global-nav__link { padding-inline: 9px; font-size: 13.5px; }
  .store-switch__label { display: none; }
}

/* ---------------- 1079px以下: ヘッダーをドロワーへ切替 ---------------- */
@media (max-width: 1079px) {
  .global-nav { display: none; }
  .drawer-toggle { display: flex; }
  .header-actions .btn--reserve .btn__label { display: none; }
  .header-actions .btn--reserve { padding-inline: 12px; }

  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
  .shop-detail-hero { grid-template-columns: 1fr; }
  .shop-detail-hero__media { order: -1; }
  .split { grid-template-columns: 1fr; }
  .lead-block { grid-template-columns: 1fr; }
  .lead-block .media { max-width: 240px; }
}

/* ---------------- 1023px以下: 2カラム化 ---------------- */
@media (max-width: 1023px) {
  .store-grid { grid-template-columns: repeat(2, 1fr); }
  .plan-grid, .menu-grid, .event-grid, .person-grid { grid-template-columns: repeat(2, 1fr); }
  .price-compare { grid-template-columns: 1fr; }
  .group-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .store-others-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :last-child { grid-column: 1 / -1; }
  .shop-row { grid-template-columns: 1fr; }
  .update-item { grid-template-columns: 1fr; }
}

/* ---------------- 767px以下: 完全1カラム・表をカード化 ---------------- */
@media (max-width: 767px) {
  .container { padding-inline: 18px; }
  .section { padding-block: 40px; }
  .section-head { flex-direction: column; align-items: flex-start; }

  .store-grid { grid-template-columns: 1fr; }
  .plan-grid, .menu-grid, .event-grid { grid-template-columns: 1fr; }
  .person-grid { grid-template-columns: repeat(2, 1fr); }
  .group-grid-3 { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > :last-child { grid-column: auto; }

  /* 比較表はカード化し、横スクロール表は隠す */
  #compare-wrap { display: none; }
  #compare-cards { display: grid; }

  .def-list__row { grid-template-columns: 1fr; gap: 4px; }
  .week-strip { grid-template-columns: repeat(4, 1fr); }

  /* SPは固定CTAぶんの余白を末尾に確保する */
  body { padding-bottom: calc(var(--h-cta) + env(safe-area-inset-bottom, 0px) + 12px); }
  .mobile-cta { display: block; }

  .store-head { flex-direction: column; align-items: flex-start; }
}

/* ---------------- 479px以下: 390pxを正 ---------------- */
@media (max-width: 479px) {
  .container { padding-inline: 16px; }
  .site-header__inner { gap: 8px; }
  .brand__sub { display: none; }
  /* ブランド名は短縮表記に切替え、店舗切替はエリア名だけを表示して省スペース化する */
  .brand__name { display: none; }
  .brand__short { display: block; font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: 0.02em; }
  .store-switch { padding: 6px 10px; gap: 6px; }
  .store-switch__name { display: none; }
  .store-switch__area { display: block; max-width: 74px; overflow: hidden; text-overflow: ellipsis; }
  /* 電話ボタンはドロワー・モバイルCTAから到達できるため、ヘッダーでは非表示にして幅を確保する */
  .header-actions { gap: 6px; }
  .header-actions .btn--tel { display: none; }

  .hero__stats { gap: 18px; }
  .hero__actions .btn { width: 100%; }
  .hero__actions { flex-direction: column; }

  .person-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .week-strip { grid-template-columns: repeat(4, 1fr); }
  .today-head { flex-direction: column; align-items: flex-start; }
  .today-head__link { margin-left: 0; }

  .schedule-day__badges { margin-left: 0; width: 100%; }

  .cast-toolbar { flex-direction: column; align-items: stretch; }
  .cast-toolbar__search input { width: 100%; }

  .menu-toolbar, .event-toolbar { flex-direction: column; align-items: stretch; }
}