@charset "UTF-8";
/* ==========================================================================
   YouRairo v5「CHAPTER CITY」モーション（新規）
   js/v5-scroll-engine.js が初期化に成功したときだけ html に .v5-motion-ready が付く。
   付いているとき：
     ・.v5-backdrop（全画面・ヘッダーの裏まで）の単色2枚 A/B を、章ごとに不透明度で切り替える（テイクオーバー）
     ・.v5-world（全画面の窓）の中の街を、外側のカメラ .v5-world__cam だけ translate3d／scale で動かす
     ・各章の背景は透明にして、上の2つを見せる
   付いていないとき（JSなし・初期化失敗・動きを減らす設定）：
     ・各章が自分の色（--v5-k）の平らな背景で、章の終わりの位置で止まった街（.v5-still）を背景に表示
   変形の書き込み先は分ける：カメラ＝.v5-world__cam、作品のトラック＝.v5-car__track、情報のDOMには書かない。
   ========================================================================== */

/* --- 固定の背景と街（初期状態は非表示＝JSなし・静止時の見た目） ----------------------------- */
.v5-backdrop, .v5-world { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: none; }
.v5-backdrop span { position: absolute; inset: 0; background: var(--v5-cream); }
.v5-backdrop__b { opacity: 0; }
.v5-world { overflow: hidden; contain: strict; }
.v5-world__cam { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.v5-world__cam > svg.v5-ground, .v5-world__cam > .v5-world__map { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; }
.v5-ground--b { opacity: 0; }
.v5-sp { position: absolute; overflow: visible; }

/* --- 静止した街の一場面（JSなし・動きを減らす設定・初期化失敗）-------------------------------- */
.v5-still { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.v5-still__cam {
  --s: .48;
  position: absolute; left: 50%; top: 50%;
  transform-origin: 0 0;
  transform: translate(calc(var(--cx) * var(--s) * -1px), calc(var(--cy) * var(--s) * -1px)) scale(var(--s));
}
.v5-still__cam > * { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; }
@media (min-width: 768px) { .v5-still__cam { --s: .62; } }
.v5-still--hero .v5-still__cam { top: 62%; }

/* --- 動きがあるとき ---------------------------------------------------------------- */
html.v5-motion-ready .v5-backdrop, html.v5-motion-ready .v5-world { display: block; }
html.v5-motion-ready .v5-still { display: none; }
html.v5-motion-ready .v5-ch { background: transparent; }
html.v5-motion-ready .v5-line path { stroke-dasharray: 100 100; }
html.v5-motion-ready .v5-alines path { stroke-dasharray: 100 100; }
/* 特徴：PCは中央で次のカードに交代（短い sticky。SPは順に縦スクロール） */
@media (min-width: 768px) {
  html.v5-motion-ready .v5-card--feature { position: sticky; top: calc(var(--v5-hh) + 24px); }
}

/* --- 動きを減らす設定：すべて完成した状態で静止 ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .v5-bubble::before, .v5-bubble::after { opacity: 1 !important; }
  .v5-wm, .v5-drift { transform: translateX(-50%) !important; }
  .v5-drift { transform: none !important; }
  .v5-line path, .v5-alines path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .v5-tool { opacity: 1 !important; transform: none !important; }
  .hero__photo { transform: rotate(2.5deg) !important; }
  .v5-scene--hero { transform: none !important; }
}

/* 計測の瞬間だけ sticky を外して本来の位置を測る（エンジンが同じ処理の中で付けて外す。描画されない） */
html.v5-measuring .v5-card--feature, html.v5-measuring .v5-card--hero { position: relative !important; top: auto !important; }