/* KYABEL SITE 61 HOTEL MINIMAL / responsive.css
   確認幅: 360/390/430/768/1024/1280/1440/1920。横スクロール禁止・本文16px維持。
   モバイルは縦積み→写真を大きく→表はスクロール。デスクトップで2カラム化。 */

/* ---- デフォルト（〜767px）を単カラム基調へ ---- */
.sys__cards, .etq-list, .recruit__points, .seat__cards { grid-template-columns: minmax(0, 1fr); }
.staff__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.galcell--16x9 { grid-column: span 2; }
.galcell--4x5 { grid-row: auto; }
.field-row { grid-template-columns: minmax(0, 1fr); }
.footer__grid { grid-template-columns: minmax(0, 1fr); }

/* ---- タブレット以上: 2カラムの骨格 ---- */
@media (min-width: 720px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .concept__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .reserve__inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); align-items: start; }
  .access__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .contact__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .seat__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sys__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .recruit__points { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .staff__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .galcell--16x9 { grid-column: span 2; }
  .galcell--4x5 { grid-row: span 2; }
  .footer__grid { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .staff__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sys-detail { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: start; }
}

/* ---- デスクトップナビ / モバイルドロワーの境界 ---- */
@media (max-width: 899px) {
  .nav, .header__cta { display: none; }
  .hamburger { display: flex; }
}
@media (min-width: 900px) {
  .hamburger { display: none; }
  #reserve-bar { display: block; }   /* 予約バーはデスクトップ */
}

/* ---- モバイル: 固定CTA表示・予約バー非表示・本文下に余白 ---- */
@media (max-width: 899px) {
  #reserve-bar { display: none; }
  .fabbar { display: grid; }
  body { padding-bottom: calc(var(--cta-h) + env(safe-area-inset-bottom)); }
  .backtop { bottom: calc(var(--cta-h) + 0.8rem); }
}
@media (min-width: 900px) {
  .fabbar { display: none; }
  /* 予約バー分の余白（デスクトップ）はフッターに確保 */
  .site-footer { padding-bottom: calc(2rem + var(--bar-h)); }
}

/* ---- モバイル微調整 ---- */
@media (max-width: 560px) {
  .staff__grid { grid-template-columns: minmax(0, 1fr); }
  .ropts { grid-template-columns: minmax(0, 1fr); }
  .hero__actions .btn { flex: 1 1 100%; }
  .rnav { flex-wrap: wrap; }
  .rnav [data-res-next], .rnav [data-res-submit] { flex: 1 1 100%; margin-left: 0; }
  .staff-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 430px) {
  .gallery__grid { grid-template-columns: minmax(0, 1fr); }
  .galcell--16x9 { grid-column: auto; }
  .access__dl div { grid-template-columns: 5.5rem minmax(0, 1fr); }
}

/* ---- 下層ページのレスポンシブ ---- */
@media (min-width: 820px) {
  .cd { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
}
@media (min-width: 720px) {
  .week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  .week-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sched-row a { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.2rem; }
  .sched-row__role { grid-column: 1; }
  .sched-row__time { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .cd__profile div { grid-template-columns: 6rem minmax(0, 1fr); }
  .cd__pager { flex-wrap: wrap; gap: 0.6rem; }
}