/* スマホ用：全画面ブロックのページャー。すべて html.pager-on（pager.js が付ける）の下だけで効く */
.pgr-block, .pgr-group, .pgr-hview, .pgr-htrack, .pgr-hpage { min-width: 0; }

html.pager-on { --pgr-gap: 8px; --pgr-safe: env(safe-area-inset-bottom, 0px); --pgr-panel: rgba(255, 250, 243, .97); scroll-behavior: auto; }
html.pager-on, html.pager-on body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.pager-on body { position: fixed; inset: 0; width: 100%; margin: 0; }
html.pager-on .sh { position: fixed; top: 0; left: 0; right: 0; background: rgb(255, 250, 243); backdrop-filter: none; -webkit-backdrop-filter: none; }
html.pager-on .sh__in { padding-top: max(8px, env(safe-area-inset-top, 0px)); }
html[data-rank="lux"].pager-on .sh { background: rgb(14, 12, 10); }
html[data-rank="petit"].pager-on .sh { background: rgb(251, 248, 243); }

html.pgr-still .bgfx, html.pgr-still .bgfx *, html.pgr-still .hero::after { animation-play-state: paused !important; }

/* 表示枠と動くトラック。アドレスバーの伸縮で高さが変わらないよう 100svh を使う */
html.pager-on .pgr-viewport { position: absolute; top: var(--hdr); left: 0; right: 0; height: calc(100vh - var(--hdr)); height: calc(100svh - var(--hdr)); overflow: hidden; overflow: clip; z-index: 1; touch-action: pinch-zoom; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
html.pgr-zoomed .pgr-viewport { touch-action: auto; }
html.pager-on .pgr-track { will-change: transform; }
html.pager-on .pgr-block { position: relative; display: block; width: 100%; height: var(--pgr-h, calc(100svh - var(--hdr))); overflow: hidden; overflow: clip; contain: layout paint; }
html.pager-on .pgr-panel { background: var(--pgr-panel); }
html[data-rank="lux"].pager-on { --pgr-panel: rgba(250, 246, 237, .98); }

/* 元のパネル・余白を外す */
html.pager-on body main, html.pager-on body.has-bgfx main { margin: 0; padding: 0; max-width: none; overflow: visible; background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
html.pager-on body .sec, html.pager-on body.has-bgfx .sec, html[data-rank="lux"].pager-on body.has-bgfx .sec { max-width: none; min-height: 0; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* 横ページ（項目を画面に収まる分ずつ分ける） */
html.pager-on .pgr-paged { display: flex; flex-direction: column; }
html.pager-on .pgr-hview { flex: 1 1 0; min-height: 0; overflow: hidden; overflow: clip; }
html.pager-on .pgr-htrack { display: flex; height: 100%; }
html.pager-on .pgr-hpage { flex: 0 0 100%; display: flex; flex-direction: column; gap: var(--pgr-gap); padding: 0 16px calc(8px + var(--pgr-safe)); box-sizing: border-box; overflow: hidden; overflow: clip; }
html.pager-on .pgr-dots { flex: 0 0 24px; display: flex; align-items: center; justify-content: center; gap: 6px; padding-bottom: var(--pgr-safe); box-sizing: content-box; font-size: .72rem; font-weight: 800; color: var(--ink-2); }
html.pager-on .pgr-dots[hidden] { display: none; }
html.pager-on .pgr-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
html.pager-on .pgr-dots i.is-on { background: var(--brand); }
html.pager-on .pgr-dots b { margin-left: 4px; font-weight: 800; }
html.pager-on .pgr-group { display: flex; flex-direction: column; gap: var(--pgr-gap); }

/* 縦の現在位置 */
.pgr-rail { position: fixed; top: calc(var(--hdr) + (100svh - var(--hdr)) / 2 - 48px); right: 3px; width: 3px; height: 96px; border-radius: 3px; background: rgba(0, 0, 0, .22); z-index: 40; pointer-events: none; }
.pgr-rail__thumb { width: 3px; border-radius: 3px; background: var(--brand); transition: transform .38s cubic-bezier(.22, 1, .36, 1); box-shadow: 0 0 0 1px rgba(255, 255, 255, .55); }
@media (prefers-reduced-motion: reduce) { .pgr-rail__thumb { transition: none; } }

/* 1. ヒーロー */
html.pager-on .pgr-hero .hero, html.pager-on body.has-bgfx .pgr-hero .hero { height: 100%; min-height: 0; max-width: none; margin: 0; padding: 14px 14px calc(14px + var(--pgr-safe)); box-sizing: border-box; display: flex; align-items: flex-end; }
html.pager-on body.has-bgfx .pgr-hero .hero__txt { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 250, 243, .96); padding-bottom: 44px; }
html.pager-on body.has-bgfx .pgr-hero .hero::after { content: "⬆️ 上へスワイプ"; right: 28px; bottom: calc(24px + var(--pgr-safe)); z-index: 5; color: var(--ink-2); text-shadow: none; font-size: .82rem; }

/* 2. 予算フィルター */
html.pager-on .pgr-budget #budget { height: 100%; display: flex; flex-direction: column; }
html.pager-on .pgr-budget #h-budget { flex: none; margin: 0; padding: 10px 16px 8px; font-size: 1.25rem; }
html.pager-on .pgr-budget .topsel button { white-space: nowrap; padding-left: 10px; padding-right: 10px; }
html.pager-on .pgr-budget .budgets { margin: 0; }
html.pager-on .pgr-budget .note { margin: 0; }

/* 3. 行き先・プランのカード（1画面ぴったり） */
html.pager-on .pgr-cards .plan-row { display: flex; gap: 0; width: 100%; height: 100%; margin: 0; overflow: visible; touch-action: inherit; scroll-snap-type: none; }
html.pager-on .pgr-cards .plan-row > .dest, html.pager-on .pgr-cards .plan-row > .pcard { flex: 0 0 100%; height: 100%; margin: 0 !important; border-radius: 0; border: 0; box-shadow: none; }
html.pager-on .pgr-cards .dest__body, html.pager-on .pgr-cards .pcard__mini { padding-bottom: calc(58px + var(--pgr-safe)); }
html.pager-on .dests, html.pager-on .plist { display: block; margin: 0; padding: 0; }
html.pager-on .pgr-next { position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; padding: 6px 16px calc(8px + var(--pgr-safe)); color: #fff; font-family: var(--round); font-weight: 900; font-size: .95rem; line-height: 1.4; text-shadow: 0 1px 4px #000; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.pager-on .pgr-cardshead { position: absolute; top: 0; left: 0; right: 0; z-index: 8; padding: 8px 16px 14px; background: linear-gradient(rgba(0, 0, 0, .72), rgba(0, 0, 0, .38) 70%, transparent); color: #fff; pointer-events: none; text-shadow: 0 1px 4px #000; }
html.pager-on .pgr-cardshead h2 { margin: 0; color: #fff; font-size: 1.1rem; line-height: 1.4; }
html.pager-on .pgr-cardshead .sub { margin: 0; color: #fff; font-size: .82rem; line-height: 1.5; }
html.pager-on .pgr-cardshead .sub small { color: #fff; }
html.pager-on .pgr-has-head .dest .htp-scene__badge { top: 66px; }
html.pager-on .pgr-has-head .swipe-guide { top: 66px; }

/* 4. シーン＋プレゼント */
html.pager-on .pgr-scene { display: flex; flex-direction: column; justify-content: space-evenly; gap: 10px; padding: 10px 16px calc(10px + var(--pgr-safe)); box-sizing: border-box; }
html.pager-on .pgr-scene h2 { margin: 0 0 8px; font-size: 1.25rem; }
html.pager-on .pgr-scene .scenes { gap: 6px; }
html.pager-on .pgr-scene .scene-btn { min-height: 46px; padding: 4px 12px; }
html.pager-on .pgr-scene .giftbanner { padding: 10px 14px; }
html.pager-on .pgr-scene .giftbanner__e { font-size: 1.8rem; }
html.pager-on .pgr-scene .giftbanner b { font-size: 1rem; line-height: 1.4; }
html.pager-on .pgr-scene .giftbanner small { display: block; font-size: .8rem; line-height: 1.45; }

/* 5. ガイド：カテゴリごと */
html.pager-on .pgr-guide > .kicker { margin: 10px 16px 0; }
html.pager-on .pgr-guide > .h1 { margin: 0 16px; font-size: 1.35rem; line-height: 1.35; }
html.pager-on .pgr-guide > #h-guides { flex: none; margin: 0; padding: 10px 16px 0; font-size: 1.25rem; }
html.pager-on .pgr-guide > .gsec { flex: none; padding: 10px 16px 8px; margin: 0 !important; font-size: 1.1rem; }
html.pager-on .pgr-guide > .gcards { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 0; }
html.pager-on .pgr-rest { display: flex; flex-direction: column; justify-content: center; padding: 16px; box-sizing: border-box; }

/* プラン一覧の先頭・フィルター */
html.pager-on .sec--plans, html.pager-on #plans { display: block; }
html.pager-on #plans > .plans__loading { position: absolute; left: -9999px; }
html.pager-on .pgr-intro .pgr-hpage { padding-top: 10px; }
html.pager-on .pgr-intro .picks { margin: 0; }
html.pager-on .pgr-intro .kicker, html.pager-on .pgr-intro .h1, html.pager-on .pgr-intro .lead { margin: 0; }
html.pager-on .pgr-filter { display: flex; flex-direction: column; }
html.pager-on #plans .pgr-filter .pf { flex: 1 1 0; min-height: 0; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; display: flex; flex-direction: column; justify-content: flex-start; }
html.pager-on #plans .pgr-filter .pgr-hpage { padding-top: 6px; padding-bottom: 4px; gap: 2px; overflow: visible; }
html.pager-on #plans .pgr-filter .plans__count { flex: none; display: block; margin: 0; height: auto; min-height: 0; padding: 6px 16px calc(6px + var(--pgr-safe)); box-sizing: border-box; white-space: normal; overflow: visible; line-height: 1.4; }
/* 絞り込みの選択肢は横にはみ出さず折り返す（入らない分は横ページへ） */
html.pager-on #plans .pgr-filter .chips { flex-wrap: wrap; overflow: visible; }
html.pager-on .picks__list { touch-action: pan-x pinch-zoom; }

/* カードの文字は最初から表示（止まってからふわっと出すと、吸着後に画面が変わって見えるため） */
html.pager-on .dest__body > *, html.pager-on .pcard__mini > *, html.pager-on .dest__overlayfacts > * { opacity: 1 !important; animation: none !important; }
html.pager-on .swipe-guide { opacity: 1 !important; transition: none !important; }

/* 6. フッター */
html.pager-on .pgr-footer .sf, html.pager-on body.has-bgfx .pgr-footer .sf { height: 100%; margin: 0; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; background: var(--pgr-panel); color: var(--ink); }
html.pager-on .pgr-footer .sf__logo { color: var(--brand); }
html.pager-on .pgr-footer .sf__nav a { color: var(--ink); background: rgba(0, 0, 0, .06); }
html.pager-on .pgr-footer .sf__note, html.pager-on .pgr-footer .sf__copy { opacity: 1; color: var(--ink-2); }
html.pager-on .pgr-footer .sf__in { padding-bottom: calc(16px + var(--pgr-safe)); width: 100%; box-sizing: border-box; }

/* 上へ戻るボタン：カードの文字に重ならない小さめに */
html.pager-on .totop { width: 44px; height: 44px; min-height: 0; bottom: calc(10px + var(--pgr-safe)); }