/* LANTERN & MILE V5.4 統合プレビュー（日本語トップ）。V5 の v5.css の後に読む。非公開・確認用。外部の読み込みなし */
/* --- しまなみ海道の拡大：V5.2 の CSS が使う色と書体を、この章の中だけ V5 の値にする --- */
.v54-zoom-place{--night:#0b100e;--mist:#c9c8bd;--gold:#d2b789;--serif:Georgia,'Yu Mincho','YuMincho','Hiragino Mincho ProN',serif;--sans:Arial,'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif}
/* ---------- A. 写真のスクロール拡大 ----------
   --e（0〜1）＝ スクロール量から JS が計算した拡大の進み具合（ゆっくり→速く→ゆっくり）。時間では動かさない
   枠の幅：PC 53% → 100%。高さは 64% までで、横長（幅：高さ 1.25 以上）を保つ → 100%。
   写真は枠より少し大きく（0.68 倍→1 倍）して、最初から景色の大部分が見えるようにする */
.zoom{--e:1;--ix:23.5vw;--iy:max(18vh, calc(50vh - 21.2vw));--s0:.68;position:relative;background:var(--night)}
.zoom-stage{position:relative;height:100vh;height:100svh;overflow:hidden}
.js .zoom-stage{position:sticky;top:0}
.zoom-frame{position:absolute;inset:0;clip-path:inset(calc(var(--iy) * (1 - var(--e))) calc(var(--ix) * (1 - var(--e))) round calc(6px * (1 - var(--e))));-webkit-clip-path:inset(calc(var(--iy) * (1 - var(--e))) calc(var(--ix) * (1 - var(--e))) round calc(6px * (1 - var(--e))));will-change:clip-path}
.zoom-frame img{width:100%;height:100%;object-fit:cover;object-position:60% 62%;transform:scale(calc(var(--s0) + (1 - var(--s0)) * var(--e)));will-change:transform}
.zoom-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0a0e0be6 0%,#0a0e0b55 34%,transparent 60%);opacity:var(--e)}
.zoom-note{position:absolute;z-index:2;margin:0;font:11px/1.5 var(--sans);letter-spacing:.24em;color:var(--mist);opacity:calc(1 - var(--e) * 1.7)}
.zoom-note.tl{left:6vw;top:7vh}.zoom-note.tr{right:6vw;top:7vh;text-align:right}.zoom-note.bl{left:6vw;bottom:7vh}.zoom-note.br{right:6vw;bottom:7vh;text-align:right}
.zoom-title{position:absolute;z-index:3;left:6vw;right:6vw;bottom:12vh;margin:0}
.js .zoom-title{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.js .zoom.is-full .zoom-title{opacity:1;transform:none}
.zoom-title strong{display:block;font:400 clamp(28px,4.4vw,60px)/1.35 var(--serif);letter-spacing:.08em;color:#fffaf0}
.zoom-title span{display:block;max-width:30em;margin-top:10px;color:#e6e0d1;font-size:15px}
.zoom .credit{position:absolute;z-index:4;left:6vw;bottom:3vh;margin:0;max-width:60vw}
.zoom-skip{position:absolute;z-index:4;right:6vw;bottom:2.4vh;font-size:13px;letter-spacing:.1em;color:var(--gold);text-decoration:none;padding:8px 0}
.zoom-skip:hover{text-decoration:underline}
.zoom.is-static .zoom-stage{position:relative}

@media (max-width:760px){
  .zoom{--ix:8vw;--iy:24vh;--s0:.86}
  .zoom-note.tr,.zoom-note.br{display:none}
  .zoom .credit{max-width:56vw}
}
@media (prefers-reduced-motion:reduce){
  .zoom-frame,.zoom-frame img{will-change:auto}
  .zoom-title{transition:none}
}
/* --- V5.4：V5 の中で舞台を確実に固定する（CSS の sticky に頼らず、JS が is-pinned・is-after を付ける） ---
   前：章の上端に置く（absolute）／固定：画面の上端に固定（fixed）／後：章の下端に置く（absolute）
   章の高さ＝画面の高さ＋拡大の距離＋全面のまま保つ区間（JS が設定）。JS が無いときと動きを減らす設定では固定しない */
.v5-home .v54-zoom-place{position:relative;width:100vw;margin:0 0 72px calc(50% - 50vw)}
.v54-zoom.is-js .zoom-stage{position:absolute;top:0;left:0;right:0;bottom:auto}
.v54-zoom.is-js.is-pinned .zoom-stage{position:fixed;top:0;left:0;right:0}
.v54-zoom.is-js.is-after .zoom-stage{position:absolute;top:auto;bottom:0}
.v5-home .v54-zoom-place .zoom-frame img{transition:none;object-position:60% 62%}
.v5-home .v54-zoom-place .zoom-title strong a{color:inherit;text-decoration:none}
/* V5 の p・h3 の全体指定（20px・32px・行間・字間・余白）が V5.2 の文字に効かないよう、V5.2 の値に戻す */
.v5-home .v54-zoom-place p.zoom-note{font-size:11px;line-height:1.5;margin:0}
html .v5-home .v54-zoom-place h3.zoom-title{margin:0;line-height:normal;letter-spacing:normal;font-size:inherit}
.v5-home .v54-zoom-place .zoom .credit summary{color:#c9c8bd}
.v5-home .v54-zoom-place .zoom .credit[open]{background:#0b100ee6;padding:8px 12px;max-width:min(60ch,80vw)}
@media (max-width:760px){
  .v5-home .v54-zoom-place{margin-bottom:48px}
}
/* --- 残り 4 枚：PC は 2 列 × 2 段（幅・写真の比率・余白をそろえる）、スマートフォンは V5 と同じ 1 列 --- */
@media (min-width:761px){
  .v5-home .v54-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:72px 40px}
  .v5-home .v54-grid .v5-place{grid-column:auto;padding-top:0}
  .v5-home .v54-grid .v5-place figure>a{aspect-ratio:1.42}
}
@media (max-width:760px){
  .v5-home .v54-grid .v5-place figure>a{aspect-ratio:1.2}
}
.v5-home .v54-grid .v5-place-kinosaki img{object-position:46% 58%}
.v5-home .v54-grid .v5-place-kiso img{object-position:50% 55%}
.v5-home .v54-grid .v5-place-kumano img{object-position:50% 50%}
/* --- トップの写真：城崎温泉の川と灯りが中央に来る位置（トリミングだけ変更） --- */
.v5-home .v5-hero>img{object-position:44% 58%}
/* --- 地図：47 都道府県・8 地方。通常は暗い青灰色、強調は琥珀色（0.3 秒）。地図の領域の大きさ・配置は V5 の指定のまま --- */
.v5-home #map .lm-pref{fill:#4a5763;stroke:#e9e6dc;stroke-width:.6px;vector-effect:non-scaling-stroke;stroke-linejoin:round;transition:fill .3s ease,stroke .3s ease}
.v5-home #map .lm-region{cursor:pointer}
.v5-home #map .lm-region.is-lit .lm-pref{fill:#c08a43}
.v5-home #map .lm-pref.is-pref-lit,.v5-home #map .lm-region.is-lit .lm-pref.is-pref-lit{fill:#e3a24c;stroke:#5b3c12}
.v5-home #map .lm-inset-frame{fill:none;stroke:#8b8f80;stroke-width:1px;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.v5-home #map .lm-inset-label{font:400 6px/1 Arial,sans-serif;fill:#3f513f;letter-spacing:.06em}
.v5-home #map .lm-region-label{cursor:pointer;outline:none}
.v5-home #map .lm-region-label text{font:700 9px/1 'Hiragino Kaku Gothic ProN','Yu Gothic',Arial,sans-serif;fill:#22331f;paint-order:stroke;stroke:#e9e6dc;stroke-width:2.6px;stroke-linejoin:round;letter-spacing:.08em;text-anchor:middle;transition:fill .3s ease}
.v5-home #map .lm-region-label.is-lit text{fill:#8a5714}
.v5-home #map .lm-region-label:focus-visible text{fill:#8a5714;text-decoration:underline}
.v5-home #map .lm-region-label[aria-pressed="true"] text{fill:#6b420c}
/* 旅先（写真付きマーカー・地域ガイド・点）：地方に触れたときも V5 の強調と同じ見え方にする */
.v5-home #map .atlas-place.lm-lit{background:#f7f1e6;box-shadow:0 0 0 2px #c08a43}
.v5-home #map .atlas-card.lm-lit{background:#d4dbc9;outline-color:#725b37}
.v5-home #map .atlas-leader.lm-lit path{stroke:#8a5714}
.v5-home #map .atlas-leader.lm-lit circle{fill:#e3a24c;stroke:#fff}
/* 最後に選んだ旅先：名前の下に琥珀色の線を残す */
.v5-home #map .atlas-place.lm-chosen .atlas-place-jp,.v5-home #map .atlas-card.lm-chosen strong{box-shadow:inset 0 -2px 0 #c08a43}
@media (max-width:760px){
  .v5-home #map .lm-region-label text{font-size:12px}
  .v5-home #map .lm-inset-label{font-size:9px}
}
@media (prefers-reduced-motion:reduce){
  .v5-home #map .lm-pref,.v5-home #map .lm-region-label text{transition:none}
}