/* ============================================================
   mobile.css — DESIGN-A スマホ連続クロスフェード版（<=640px のみ）
   Phase 0 (scroll(root) SDA) を全13シーンへ拡張。
   PCの見た目は一切変更しない。cinema.css / style.css の後に読み込む。
   v=9: 暗幕薄化・パネル撤去・Method03テイスト統一
   ============================================================ */

@media (max-width: 640px){

  /* --- 1. 暗幕を薄くして背景写真を明るく --- */
  .scene__shade{
    background: linear-gradient(180deg, rgba(10,8,5,.55) 0%, rgba(10,8,5,.40) 38%, rgba(10,8,5,.65) 100%);
  }
  .scene--dim .scene__shade{
    background: linear-gradient(180deg, rgba(8,6,4,.65) 0%, rgba(8,6,4,.55) 42%, rgba(8,6,4,.75) 100%);
  }

  /* --- 2. 余白圧縮（下は予約バー分を確保） --- */
  .scene__inner{ padding: 56px 18px 80px; }

  /* --- 3. 文字サイズ・行間（664px高に収める） --- */
  .scene__label{ margin-bottom: 9px; font-size: .68rem; }
  .scene__title{ font-size: clamp(1.55rem, 6.6vw, 2.0rem); line-height: 1.38; margin-bottom: 13px; }
  .scene--lead .scene__title{ font-size: clamp(1.75rem, 7.8vw, 2.3rem); white-space: normal; }
  .scene__sub{ font-size: 14px; line-height: 1.75; margin-bottom: 13px; }
  .scene__bullets{ font-size: 13.5px; }
  .scene__bullets li{ margin-bottom: 7px; }

  /* --- 章ラベルを上部に寄せる --- */
  .cinema__chapter{ top: 58px; font-size: .65rem; }

  /* ============================================================
     シネマ構造（PC版JSと同一 scroll-pinning を使用）
     ============================================================ */

  /* .cinema: 12シーン × 88vh + sticky窓100svh */
  .cinema{
    height: calc(12 * 88vh + 100svh);
  }

  /* .cinema__sticky: 100svhで高さ上書き */
  .cinema__sticky{
    height: 100svh;
  }

  /* 固定ナビUI: モバイルでは非表示 */
  .cinema__chapter,
  .cinema__progress,
  .cinema__hint{
    display: none;
  }

  /* ============================================================
     重いシーンを664pxに収めるコンパクト化
     ============================================================ */

  /* 04 CONCEPT（悩みリスト）— パネル撤去・Method bullets風 */
  .scene__list{ grid-template-columns: 1fr; gap: 0; margin: 3px 0 14px; }
  .scene__list li{
    font-size: 15px; line-height: 1.65; padding-left: 22px; margin-bottom: 10px;
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
  }
  /* リズム調整: 最初の項目に上余白（マーカーごと下げる）*/
  .scene__bullets li:first-child{ margin-top: 32px; }
  .scene__list li:first-child{ margin-top: 32px; }
  .scene__foot{
    font-size: 14px; line-height: 1.8;
    border-left: 2px solid var(--gold, #c5a572); padding-left: 14px; margin-top: 28px;
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
  }

  /* 05 REASON（4カード）— パネル撤去・シンプル縦並び */
  .scene__reasons{ grid-template-columns: 1fr; gap: 0; margin-top: 5px; }
  .scene__reasons .r-card{ padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.15); }
  .scene__reasons .r-card:last-child{ border-bottom: 0; }
  .r-card__num{ font-size: 1.0rem; }
  .r-card__title{
    font-size: .9rem; margin: 4px 0 5px; line-height: 1.5;
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
  }
  .r-card__text{ font-size: 12.5px; line-height: 1.7; text-shadow: 0 1px 3px rgba(0,0,0,.5); }

  /* 06 ABOUT — パネル撤去 */
  .scene__about-text p{ font-size: 13.5px; line-height: 1.8; margin-bottom: 10px; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
  .scene__about-text p:last-child{ margin-bottom: 0; }

  /* 07 STAFF（3名を横ストライプで1画面収め）— カード枠撤去・写真は維持 */
  .scene__staff{ grid-template-columns: 1fr; gap: 10px; margin-top: 5px; }
  .s-card{
    display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center;
    padding: 6px 0;
  }
  .s-card__photo{ width: 64px; aspect-ratio: 1/1; margin: 0; grid-row: span 4; border-radius: 3px; overflow: hidden; }
  .s-card__photo img{ object-position: center top; }
  .s-card__no{ display: none; }
  .s-card__role{ margin: 0; font-size: .58rem; }
  .s-card__name{ font-size: .95rem; margin: 2px 0; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
  .s-card__cred{ font-size: .72rem; margin: 0 0 3px; }
  .s-card__msg{ font-size: 12px; line-height: 1.5; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
  .scene__note{ margin-top: 6px; font-size: .7rem; }

  /* 08 MENU（料金表）— パネル撤去・m-row 1行整然 */
  .scene__menu{ grid-template-columns: 1fr; gap: 0; margin-top: 5px; }
  .m-block{ margin-top: 10px; }
  .m-block__title{ font-size: .9rem; padding-bottom: 7px; margin-bottom: 3px; }
  .m-row{ font-size: 13px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .m-row__price{ font-size: .92rem; }
  .m-row__name .tag{ font-size: .58rem; padding: 1px 5px; }

  /* 09 VOICE — パネル撤去・v-quote 直乗せ */
  .scene__rating{ margin-bottom: 10px; }
  .scene__rating-score{ font-size: 2.6rem; }
  .scene__quotes{ grid-template-columns: 1fr; gap: 0; }
  .scene__quotes .v-quote{ padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.15); }
  .scene__quotes .v-quote:last-child{ border-bottom: 0; }
  .v-quote__text{ font-size: 13px; line-height: 1.75; margin-bottom: 6px; text-shadow: 0 1px 4px rgba(0,0,0,.6); }

  /* 10 VOICE-HERO — パネル撤去 */
  .scene__quote-big{
    font-size: 13.5px; line-height: 1.85; margin-bottom: 10px;
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
  }

  /* 11 ACCESS — パネル撤去・dt/dd シンプル縦並び */
  .scene__access{ grid-template-columns: 1fr; gap: 0; align-items: stretch; }
  .scene__access dl{ gap: 10px; }
  .scene__access dt{ font-size: .62rem; margin-bottom: 1px; }
  .scene__access dd{ font-size: 13px; line-height: 1.6; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
  .scene__map{ aspect-ratio: 16/8; margin-top: 10px; border-color: rgba(255,255,255,.15); }

  /* 13 RESERVE finale（ボタン縦並び） */
  .scene__actions{ flex-direction: column; gap: 8px; margin-top: 5px; }
  .scene__actions .btn{ width: 100%; min-width: 0; }

}/* /@media 640px */

/* ============================================================
   モバイル固定予約バー（PCは非表示）
   ============================================================ */
.m-reserve-bar{ display: none; }
@media (max-width: 640px){
  .m-reserve-bar{
    display: grid;
    grid-template-columns: 1fr 1.7fr 1fr;
    gap: 1px;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 60;
    background: rgba(20,16,10,.55);
    box-shadow: 0 -4px 20px rgba(0,0,0,.30);
  }
  .m-reserve-bar__btn{
    display: flex; align-items: center; justify-content: center;
    height: 54px;
    font-family: var(--sans, 'Noto Sans JP', sans-serif);
    font-size: 14px; font-weight: 600; letter-spacing: .06em;
    text-decoration: none; color: #fff;
  }
  .m-reserve-bar__btn--tel{ background: #3a342b; }
  .m-reserve-bar__btn--web{ background: var(--gold, #c5a572); color: #14100a; font-weight: 700; }
  .m-reserve-bar__btn--line{ background: #06c755; }
}