body{background:#0f2a4a;color:#fff;overflow-x:hidden}
.sky{position:absolute;inset:-10% 0 0 0;will-change:transform,opacity}
.sky .g{position:absolute;inset:0}
.sky .fw{position:absolute;left:-10%;right:-10%;bottom:-2%;height:30%;border-radius:50% 50% 0 0/40% 40% 0 0;filter:blur(2px)}
.sky .fw2{position:absolute;left:-20%;right:30%;bottom:14%;height:14%;border-radius:50%;filter:blur(6px);opacity:.85}
.sky .cl{position:absolute;border-radius:50%;background:#fff;filter:blur(28px);opacity:.75}

.sky{position:absolute;inset:-8% 0;background-size:cover;background-position:center;will-change:transform,opacity}
.ter{position:absolute;left:-4%;right:-4%;bottom:-9vh;height:42vh;background-size:100% 100%;background-repeat:no-repeat;will-change:transform,opacity;filter:saturate(1.05)}
.cloud{position:absolute;will-change:transform,opacity}
.cloud img{width:100%;display:block;animation:drift var(--dur,40s) ease-in-out infinite alternate}
@keyframes drift{from{transform:translateX(-3vw)}to{transform:translateX(3vw)}}
.grain{position:absolute;inset:0;background:url(/lp/bg/grain.png);mix-blend-mode:overlay;opacity:.5;pointer-events:none;z-index:30}
.shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,35,.28),transparent 30%,transparent 62%,rgba(10,20,35,.38));pointer-events:none}
.story{position:relative;height:520vh;height:520svh}
.stage{position:sticky;top:0;height:100vh;overflow:hidden}
.glow{position:absolute;inset:0;transition:background 1.2s cubic-bezier(.16,1,.3,1)}
.big{position:absolute;left:0;right:0;top:50%;transform:translateY(-54%);text-align:center;font-family:var(--en);font-weight:800;
  font-size:clamp(84px,17vw,300px);line-height:.86;letter-spacing:-.05em;pointer-events:none}
.big .w{position:absolute;left:0;right:0;top:50%;will-change:transform,opacity}
.big .w span{display:block}
.big .o{color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.95)}
.big .w{text-shadow:0 10px 40px rgba(10,30,60,.25)}
.model{position:absolute;left:50%;bottom:4vh;height:111vh;aspect-ratio:9/16;will-change:transform,opacity,filter}
.model .fl{position:absolute;inset:0;animation:bob 6s ease-in-out infinite}
.model img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(10,30,60,.35))}
.model svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
@keyframes bob{0%,100%{transform:translate3d(0,0,0) rotate(-.6deg)}50%{transform:translate3d(0,-18px,0) rotate(.6deg)}}
.chip2{position:absolute;padding:14px 18px;border-radius:18px;background:rgba(255,255,255,.82);color:#0f2a4a;box-shadow:0 20px 40px -12px rgba(10,30,60,.35);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.18);font-family:var(--en);will-change:transform,opacity}
.chip2 .v{font-weight:800;font-size:34px;letter-spacing:-.03em;color:#0f2a4a;line-height:1}
.chip2 .k{font-family:var(--jp);font-size:12px;color:#4a5b70;margin-top:6px}
.chip2 .in{animation:bob 7s ease-in-out infinite}
.copy{position:absolute;left:clamp(20px,5vw,72px);bottom:clamp(32px,8vh,80px);max-width:360px;z-index:10}
.copy .c{position:absolute;left:0;bottom:0;width:360px;max-width:calc(100vw - 40px);will-change:transform,opacity}
.copy .n{font-family:var(--en);font-size:13px;letter-spacing:.2em;color:var(--cyan);margin-bottom:12px}
.copy h2{font-weight:900;font-size:clamp(26px,2.8vw,40px);line-height:1.3;letter-spacing:-.02em}
.copy p{margin-top:12px;font-size:15px;line-height:1.8;color:rgba(255,255,255,.72)}
.copy .btn{margin-top:20px}
.pager{position:absolute;right:clamp(20px,4vw,56px);top:50%;transform:translateY(-50%);z-index:10;font-family:var(--en);text-align:right}
.pager .cur{font-weight:800;font-size:44px;line-height:1}
.pager .tot{font-size:14px;color:rgba(255,255,255,.5)}
.pager .bar{width:2px;height:120px;background:rgba(255,255,255,.18);margin:14px 0 0 auto;position:relative}
.pager .bar i{position:absolute;left:0;top:0;width:2px;background:#fff}
.hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-family:var(--en);font-size:11px;letter-spacing:.3em;color:rgba(255,255,255,.5)}
.after{height:60vh;display:grid;place-items:center;color:rgba(255,255,255,.4);font-size:14px}
.ph{display:inline-block;white-space:nowrap}
@media (max-width:700px){
  .ter{height:34vh;left:0;right:0;bottom:-3vh;background-size:auto 100%!important;background-position:center bottom}.cloud{width:90vw!important}
  .model{height:79vh;bottom:17vh}
  .big{font-size:21vw;top:44%}
  .copy .c{width:calc(100vw - 40px)} .copy h2{font-size:22px} .copy p{font-size:12px;line-height:1.7;margin-top:8px}.copy{bottom:24px}
  .pager{top:auto;bottom:auto;top:84px;transform:none}.pager .bar{height:60px}.pager .cur{font-size:30px}
  .chip2{padding:10px 12px;display:none}.chip2 .v{font-size:24px}
}
@media (prefers-reduced-motion:reduce){.model .fl,.chip2 .in{animation:none}}
body.front .big{z-index:5}
body.front .big .w{text-shadow:0 8px 30px rgba(10,30,60,.35)}
#models{position:absolute;inset:0;z-index:2}
.big{z-index:1}
.logo-img{height:44px;width:auto;display:block;filter:drop-shadow(0 2px 8px rgba(10,30,60,.25))}
@media (max-width:700px){.logo-img{height:34px}}
.nav{position:fixed;z-index:40}
/* スマホのアプリ内ブラウザ（LINE など）で下が隠れないよう、見えている高さ（svh）で組む */
.stage{height:100vh;height:100svh}
@media (max-width:700px){
  .model{height:79vh;height:76svh;bottom:18svh}
  .ter{height:34svh}
  .copy{bottom:22px}
  .pager{top:74px}
  .hint{display:none}
}
/* 場面送り：∧ ∨ の四角いボタン2つと、間の細い線（参考：wearebrand） */
.scn{position:absolute;right:clamp(20px,5vw,72px);bottom:clamp(32px,8vh,80px);z-index:12;display:flex;align-items:center}
.scn button{width:48px;height:44px;display:grid;place-items:center;background:transparent;border:1px solid rgba(255,255,255,0);color:#fff;cursor:pointer;padding:0;
  transition:border-color .25s,background .25s,opacity .25s;filter:drop-shadow(0 1px 3px rgba(10,30,60,.35))}
.scn button svg{width:20px;height:20px}
@media (hover:hover){.scn button:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06)}}
.scn button:focus-visible{outline:1px solid rgba(255,255,255,.7);outline-offset:-1px}
.scn button:active{background:rgba(255,255,255,.14)}
.scn button.off{opacity:.3;pointer-events:none}
.scn i{width:1px;height:42px;background:rgba(255,255,255,.5)}
@media (max-width:700px){
  .scn{right:10px;bottom:auto;top:auto;transition:top .45s cubic-bezier(.16,1,.3,1)}
  .scn button{width:40px;height:38px}
  .scn button svg{width:18px;height:18px}
  .scn i{height:34px}
}

/* スマホの描画を軽く（2026-09-22）：画面全体の重ね合わせ（mix-blend）とすりガラス（backdrop-filter）は
   スクロール中に毎コマ描き直しになり、iPhone で引っかかりの原因になる */
@media (max-width:700px){
  .grain{mix-blend-mode:normal;opacity:.12}
}
/* 動かすのは見えている場面だけ。ストーリーが画面外なら全部止める（2026-09-22） */
.model .fl,.cloud img{animation-play-state:paused}
.model.act .fl,.cloud.act img{animation-play-state:running}
.story.off .model .fl,.story.off .cloud img{animation-play-state:paused}
@media (max-width:700px){
  /* 大きな画像のぼかし影・文字の大きなぼかし影は、描き直すたびに重い */
  .model img{filter:none}
  .big .w{text-shadow:0 6px 18px rgba(10,30,60,.22)}
}
/* 画面外では中身の描画を止める（大きさは変えない。display:none だと出し入れの瞬間に引っかかる） */
.story.off .stage{visibility:hidden;content-visibility:hidden}