/* VELVET LINE — responsive.css : ブレークポイント（1280 / 1024 / 768 / 430 以下）
   モバイルは縦積み・情報順序を再設計・文字は縮小しない・固定CTA分の余白を確保。 */

/* ---- 〜1280px：ギャラリー密度を少し下げる ---- */
@media (max-width: 1280px) {
  .cast-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- 〜1024px：ナビをドロワーへ、2カラムを緩める ---- */
@media (max-width: 1024px) {
  .nav, .topbar__cta { display: none; }
  .topbar__toggle { display: flex; }
  .cast-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__top { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .footer__brand { grid-column: 1 / -1; }
}

/* ---- 〜768px：スプリットとパネルを縦積み。固定CTA表示。 ---- */
@media (max-width: 768px) {
  .split, .recruit__grid, .access__grid, .modal__grid { grid-template-columns: minmax(0, 1fr); }
  .split--reverse .split__media { order: 0; }
  .split__media .ribbon-num, .split--reverse .split__media .ribbon-num { left: -.2rem; right: auto; }
  .system-rows { grid-template-columns: minmax(0, 1fr); }
  .sys-row:nth-child(odd) { border-right: 0; }
  .modal__sub { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .recruit__points { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }

  /* ギャラリーを 2 列モバイルレイアウトへ（大小の変換） */
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(130px, 34vw, 200px); }
  .gal-item.g-wide { grid-column: span 2; grid-row: span 1; }
  .gal-item.g-tall { grid-column: span 1; grid-row: span 2; }
  .gal-item.g-md, .gal-item.g-sm { grid-column: span 1; grid-row: span 1; }

  .cta-bar { display: block; }
  /* 固定CTA分の余白（フッター末行が隠れない） */
  .footer__pad { height: calc(var(--cta-h) + env(safe-area-inset-bottom)); }
  .page-top { bottom: calc(var(--cta-h) + 1rem + env(safe-area-inset-bottom)); }

  .hero { min-height: clamp(520px, 84vh, 760px); }
  .hero__dots { display: none; }
  .today-strip a { margin-left: 0; }
}

/* ---- 〜560px：CAST 2列・タイムライン余白調整 ---- */
@media (max-width: 560px) {
  .cast-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lightbox__btn--prev { left: 2px; }
  .lightbox__btn--next { right: 2px; }
  .modal__dl { grid-template-columns: minmax(0,1fr); gap: .2rem .2rem; }
  .modal__dl dt { margin-top: .6rem; }
}

/* ---- 〜430px：最小幅での詰め ---- */
@media (max-width: 430px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .brand__sub { display: none; }
  .pickup__thumbs button { width: 54px; }
}

/* ---- タイムラインの反転（デスクトップは片側交互配置にしない＝縦一本の可読性を優先） ---- */
@media (min-width: 900px) {
  .timeline { padding-left: 2.6rem; }
}

/* ---- 下層ページ（V5-3）のレスポンシブ ---- */
@media (max-width: 900px) {
  .detail { grid-template-columns: minmax(0, 1fr); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .rec-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .detail__nav { grid-template-columns: minmax(0,1fr); gap: .6rem; text-align: center; }
  .detail__nav-link, .detail__nav-link.next { text-align: center; }
  .fee-row, .req-row { grid-template-columns: minmax(0,1fr); gap: .2rem; }
  .fee-row dd, .req-row dd { text-align: left; }
  .sched-row__time { margin-left: 0; }
  .news-card__title { font-size: 1.2rem; }
}