/* 湯怪万来 in 信州 本番LP — スライス画像貼り付け方式（北関東編 kitakanto2026 の構成を踏襲）
   index.html は scripts/build_html.py が生成する。直接編集しない。 */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* 通常のドキュメントスクロール（iOS で最下部ツールバーをくっきり透過させるため。北関東編で実機確認済み）。
   固定ヘッダー分の着地オフセット（scroll-padding-top）は帯の高さから算出して index.html の <style> に出す */
html { background: #fff; scroll-behavior: smooth; }
body { width: 100%; background: #fff; -webkit-text-size-adjust: 100%; }
picture { display: block; line-height: 0; }

/* PC のガター装飾 = 親サイト（信州湯ノ道）の上下の帯。中央は .lp（白）が覆う */
@media (min-width: 751px) {
  body::before, body::after {
    content: ""; position: fixed; left: 0; width: 100%; height: 10%;
    z-index: 0; pointer-events: none;
  }
  body::before { top: 0; background: url("../../img/bg_top.png") top center / 100% auto no-repeat; }
  body::after { bottom: 0; background: url("../../img/bg_bottom.png") bottom center / 100% auto no-repeat; }
}

/* 本体: 750px 中央1カラム。スライスを隙間なく縦積み */
.lp { position: relative; z-index: 1; width: 100%; max-width: 750px; margin: 0 auto; background: #fff; overflow: hidden; }
.sl { position: relative; }
.sl .s { display: block; width: 100%; height: auto; }
.hero { line-height: 0; font-size: inherit; }

/* 透明ホットスポット（位置は各スライスに対する % を inline で指定） */
.hot { position: absolute; z-index: 5; display: block; border-radius: 12px; }
.hot:focus-visible, .m-hot:focus-visible, .hd_ig:focus-visible, .menu_btn:focus-visible, .fixed_line:focus-visible {
  outline: 4px solid #ffdf00; outline-offset: 2px;
}
/* 地図: スクショの枠に Google マイマップを重ねる */
.sl .map { position: absolute; z-index: 4; border: 0; background: transparent; }

/* ===== 固定ヘッダー（帯=透過画像。操作要素だけ pointer-events を戻す） ===== */
.site_header { position: fixed; top: 0; left: 0; right: 0; z-index: 300; pointer-events: none; }
.hd_inner { position: relative; width: 100%; max-width: 750px; margin: 0 auto; }
.hd_bar { display: block; width: 100%; height: auto; }
.hd_ig { position: absolute; display: block; pointer-events: auto; }
.menu_btn {
  position: absolute; padding: 0; border: 0; background: none; cursor: pointer;
  line-height: 0; pointer-events: auto;
}
.menu_btn img { display: block; width: 100%; height: auto; }
.menu_btn .mb_open { display: none; }
body.menu-open .menu_btn .mb_closed { display: none; }
body.menu-open .menu_btn .mb_open { display: block; }

/* ===== メニュー（全画面）。固定ヘッダー(z:300)がこの上に重なる ===== */
body.menu-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
.nav_modal {
  position: fixed; inset: 0; z-index: 200; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; background: rgba(30, 20, 20, .35);
}
.nav_modal[hidden] { display: none; }
.nav_modal_inner { position: relative; display: block; width: 100%; max-width: 750px; margin: 0 auto; min-height: 100%; background: #fffff6; }
.menu_wrap { position: relative; }
.menu_img { display: block; width: 100%; height: auto; }
.m-hot { position: absolute; z-index: 5; display: block; }

/* ===== 固定 LINE ボタン（MV の「ここをタップ」バッジ）。最下部では隠す ===== */
.fixed_line {
  position: fixed; z-index: 90; line-height: 0;
  right: max(8px, calc(50% - 375px + 8px));
  bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  width: min(100px, 26.7vw);
  transition: opacity .25s ease, visibility .25s ease;
}
.fixed_line img { display: block; width: 100%; height: auto; }
.fixed_line.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.lp-end { display: block; width: 100%; height: 1px; }

/* PC はコンテンツ列が 750px＝デザインの2倍で表示される。ボタンだけ等倍だと小さく見える（okada 指摘）ので拡大 */
@media (min-width: 751px) {
  .fixed_line { width: 150px; }
}
@media (min-width: 960px) {
  .fixed_line { right: 20px; bottom: 40px; width: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fixed_line { transition: none; }
}