/* SIGNATURE SIDEBAR (SITE 58) — responsive.css
   >=1120px: 3カラム固定レール（style.css の .shell grid が有効）。
   1120〜1279px 帯はレール幅が clamp で流動し崩れない（V4-1教訓の実測対象）。
   <=1119px: 中央100% ＋ 左=ドロワー ＋ 右=ボトムシート（内容は消さず変換）。 */

/* 中央グリッドの狭幅調整（デスクトップ内でも中央は最大760pxのため2列化点は早め） */
@media (max-width: 560px) {
  .cast-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==================== モバイル/タブレット（3カラム解除） ==================== */
@media (max-width: 1119.98px) {
  body { padding-top: var(--topbar-h); }

  .shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    max-width: 720px;
    padding: 0 var(--pad);
  }

  /* 固定レールをオフスクリーン化して mobile UI へ変換 */
  .rail-left, .rail-right { display: none; }

  .center { max-width: 100%; padding-top: 1rem; padding-bottom: 2.4rem; }

  /* ---- 上部バー ---- */
  .topbar {
    display: flex;
    position: fixed; inset: 0 0 auto 0; z-index: 70;
    height: var(--topbar-h);
    align-items: center; justify-content: space-between;
    gap: .6rem;
    padding: 0 clamp(.7rem, 3vw, 1.1rem);
    background: rgba(245,240,227,.94);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
  }
  .topbar__burger {
    width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream-hi);
  }
  .topbar__burger svg { width: 22px; height: 22px; }
  .topbar__logo { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; letter-spacing: .22em; }
  .topbar__sheet {
    min-height: 44px; padding: .4rem .9rem;
    font-size: var(--fs-small); font-weight: 600;
    border-radius: 40px; background: var(--ink); color: var(--cream-hi);
    display: inline-flex; align-items: center; gap: .4em;
  }

  /* ---- 左ドロワー ---- */
  .drawer {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 86;
    width: min(320px, 86vw);
    background: var(--cream);
    border-right: 1px solid var(--line);
    box-shadow: var(--shadow-panel);
    transform: translateX(-100%);
    transition: transform .32s var(--ease);
    display: flex; flex-direction: column;
    padding: 1.2rem 1rem 1.4rem;
    overflow-y: auto;
    visibility: hidden;
  }
  .drawer.is-open { transform: none; visibility: visible; }
  .drawer__scrim {
    position: fixed; inset: 0; z-index: 85; background: var(--sheet-scrim);
    opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s var(--ease);
  }
  .drawer__scrim.is-open { opacity: 1; visibility: visible; }
  .drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line-soft); }
  .drawer__close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
  .drawer__close svg { width: 22px; height: 22px; }
  .drawer .nav__item { min-height: 48px; }
  .drawer .nav__label .en { font-size: 1rem; }

  /* ---- 右＝ボトムシート ---- */
  .sheet {
    display: flex; flex-direction: column;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 86;
    max-height: 84svh;
    background: var(--cream);
    border-top: 1px solid var(--line);
    border-radius: 14px 14px 0 0;
    box-shadow: var(--shadow-panel);
    transform: translateY(100%);
    transition: transform .34s var(--ease);
    visibility: hidden;
  }
  .sheet.is-open { transform: none; visibility: visible; }
  .sheet__scrim {
    position: fixed; inset: 0; z-index: 85; background: var(--sheet-scrim);
    opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s var(--ease);
  }
  .sheet__scrim.is-open { opacity: 1; visibility: visible; }
  .sheet__grab { width: 44px; height: 4px; border-radius: 4px; background: var(--line); margin: .7rem auto .2rem; }
  .sheet__head { display: flex; align-items: center; justify-content: space-between; padding: .2rem 1.1rem .8rem; border-bottom: 1px solid var(--line-soft); }
  .sheet__head h2 { font-family: var(--font-display); font-size: 1.25rem; }
  .sheet__close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
  .sheet__close svg { width: 22px; height: 22px; }
  .sheet__body { overflow-y: auto; padding: 1rem 1.1rem calc(1.4rem + env(safe-area-inset-bottom)); display: grid; gap: .9rem; }

  /* ---- ヒーロー直後の重要情報 再掲（モバイルのみ） ---- */
  .mobile-recap { display: block; margin-top: 1.1rem; }

  /* ---- モバイル固定CTA（高級クラブ: CAST / SYSTEM / CONTACT / ACCESS） ---- */
  .mcta {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
    height: calc(var(--cta-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(28,26,22,.96);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border-top: 1px solid var(--gold-deep);
  }
  .mcta a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .18rem;
    min-height: 44px; color: var(--cream-hi);
    border-right: 1px solid rgba(245,240,227,.12);
  }
  .mcta a:last-child { border-right: 0; }
  .mcta a:active { background: rgba(245,240,227,.08); }
  .mcta__ic { width: 20px; height: 20px; }
  .mcta__lb { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: .01em; }

  /* フッター末行に固定CTA分の余白（本文/リンクを隠さない） */
  .foot { margin-bottom: calc(var(--cta-h) + env(safe-area-inset-bottom)); }
  .pagetop { bottom: calc(var(--cta-h) + env(safe-area-inset-bottom) + .8rem); }

  /* サイドパネルはモバイルで下から（ボトムシート的） */
  .sidepanel {
    top: auto; width: 100%; max-height: 88svh;
    border-left: 0; border-top: 1px solid var(--line);
    border-radius: 14px 14px 0 0;
    transform: translateY(100%);
  }
  .sidepanel.is-open { transform: none; }
}

/* デスクトップでは mobile-recap を出さない */
@media (min-width: 1120px) {
  .mobile-recap { display: none; }
  .topbar, .drawer, .drawer__scrim, .sheet, .sheet__scrim, .mcta { display: none; }
}

/* 中央本文の狭幅 */
@media (max-width: 720px) {
  .concept__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .access__grid { grid-template-columns: minmax(0, 1fr); }
  .foot__grid { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
}
@media (max-width: 480px) {
  .concept__facts { grid-template-columns: minmax(0, 1fr); }
  .sp-actions { grid-template-columns: 1fr; }
  .hero__frame { aspect-ratio: 4 / 5; }   /* モバイルは縦寄りで写真を大きく */
}

/* ---- 下層ページのレスポンシブ ---- */
@media (max-width: 860px) {
  .detail { grid-template-columns: minmax(0, 1fr); }
  .detail__main { max-width: 420px; }
}
@media (max-width: 720px) {
  .cast-grid--full { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .detail__nav { grid-template-columns: minmax(0, 1fr); }
  .big-table th, .big-table td { padding: .7rem .7rem; }
}
@media (max-width: 420px) {
  .cast-grid--full { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow__item { flex-direction: column; gap: .3rem; }
}