/* =========================================================
   MOTION
   ・意味のあるものだけ動かす（FV／3つのつながり／サンプルの実物感）
   ・FVは初回1回だけ。ループしない
   ・html.js のときだけ初期状態を隠す（JSが動かなくても完成形が見える）
   ・動きを減らす設定の端末では、すべて完成形で止める
   ========================================================= */

/* ---------- FV：図面 → VIDEO / LP / SALES DECK ---------- */
.fv-visual{position:relative;width:100%;aspect-ratio:640/560}
.fv-draw{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fv-panel{fill:rgba(15,24,40,.55);stroke:rgba(174,183,196,.22);stroke-width:1}
.fv-meta{font:500 10px/1 ui-monospace,'Consolas',monospace;fill:rgba(174,183,196,.55);letter-spacing:.06em}
.ln{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ln-a{stroke:#e8edf3;stroke-width:2.4}
.ln-b{stroke:rgba(232,237,243,.75);stroke-width:1.6}
.ln-c{stroke:rgba(239,129,63,.65);stroke-width:1.2;stroke-dasharray:22 6 4 6}
.dim{stroke:rgba(174,183,196,.7);stroke-width:1.4}
.flow{stroke:var(--orange-soft);stroke-width:1.8}
.tag circle{fill:var(--orange-soft)}
.tag text{font:600 15px/1 ui-monospace,'Consolas',monospace;fill:#ffd2b5;letter-spacing:.02em}
.tag text.sm{font-size:13px}
.fv-card{position:absolute;top:61.07%;width:29.7%;display:block;text-align:left;color:#fff}
.fv-card-1{left:2.7%}.fv-card-2{left:35.2%}.fv-card-3{left:67.6%}
.fv-thumb{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border-radius:3px;border:1px solid rgba(255,255,255,.22);box-shadow:0 14px 30px rgba(0,0,0,.35);background:#0f1828;transition:border-color .2s}
.fv-thumb img{width:100%;height:100%;object-fit:cover;object-position:top}
.fv-card-1 .fv-thumb img{object-position:center}
.fv-card:hover .fv-thumb{border-color:var(--orange-soft)}
.mini-play{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(204,89,37,.95)}
.mini-play::after{content:"";position:absolute;left:13px;top:10px;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.fv-label{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;margin-top:8px;font-family:var(--latin);font-size:13px;font-weight:600;letter-spacing:.12em;white-space:nowrap}
.fv-label small{font-family:var(--sans);font-size:11px;letter-spacing:.04em;color:var(--muted-light);font-weight:400}
.fv-role{display:block;margin-top:3px;font-size:12.5px;font-weight:600;color:var(--orange-soft);letter-spacing:.04em}
.fv-cap{position:absolute;left:0;right:0;bottom:-6px;font-size:11.5px;color:var(--muted-light);letter-spacing:.04em}

/* 初期状態（JSあり） */
.js .fv-visual .ln{stroke-dasharray:1;stroke-dashoffset:1}
.js .fv-visual .tag,.js .fv-visual .fv-meta{opacity:0}
.js .fv-visual .fv-role{opacity:0}
.js .fv-visual .fv-card{opacity:0;transform:translateY(16px) scale(.96)}
.js .fv-visual .fv-cap{opacity:0}
/* 再生（0.0〜3.8秒） */
.fv-visual.is-playing .ln{animation:draw .9s cubic-bezier(.6,0,.2,1) forwards}
.fv-visual.is-playing .ln-a{animation-delay:.05s}
.fv-visual.is-playing .ln-b{animation-delay:.35s;animation-duration:.6s}
.fv-visual.is-playing .ln-c{animation-delay:.45s;animation-duration:.7s}
.fv-visual.is-playing .dim-1{animation-delay:.7s;animation-duration:.5s}
.fv-visual.is-playing .dim-2{animation-delay:.8s;animation-duration:.5s}
.fv-visual.is-playing .dim-3{animation-delay:.9s;animation-duration:.4s}
.fv-visual.is-playing .fv-meta{animation:fade .5s .3s forwards}
.fv-visual.is-playing .tag{animation:tag .5s forwards}
.fv-visual.is-playing .tag-1{animation-delay:.95s}
.fv-visual.is-playing .tag-2{animation-delay:1.2s}
.fv-visual.is-playing .tag-3{animation-delay:1.4s}
.fv-visual.is-playing .flow{animation-duration:.9s}
.fv-visual.is-playing .flow-1{animation-delay:1.65s}
.fv-visual.is-playing .flow-2{animation-delay:1.75s;animation-duration:.6s}
.fv-visual.is-playing .flow-3{animation-delay:1.85s}
.fv-visual.is-playing .fv-card{animation:rise .6s cubic-bezier(.2,.7,.2,1) forwards}
.fv-visual.is-playing .fv-card-1{animation-delay:2.55s}
.fv-visual.is-playing .fv-card-2{animation-delay:2.8s}
.fv-visual.is-playing .fv-card-3{animation-delay:3.05s}
.fv-visual.is-playing .fv-cap{animation:fade .6s 3.5s forwards}
.fv-visual.is-playing .fv-role{animation:fade .5s forwards}
.fv-visual.is-playing .fv-card-1 .fv-role{animation-delay:3.2s}
.fv-visual.is-playing .fv-card-2 .fv-role{animation-delay:3.45s}
.fv-visual.is-playing .fv-card-3 .fv-role{animation-delay:3.7s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes tag{0%{opacity:0;transform:translateY(4px)}60%{opacity:1}100%{opacity:1;transform:none}}
.tag{transform-box:fill-box}
/* 再生が終わったら、中心線だけ本来の一点鎖線に戻す */
.fv-visual.done .ln-c{stroke-dasharray:22 6 4 6;stroke-dashoffset:0;animation:none}

/* ---------- WHY：光が 動画 → LP → 営業資料 を渡る ---------- */
.why-flow{position:relative}
.why-track{position:absolute;left:0;right:0;top:-1px;height:1px;z-index:1;pointer-events:none}
.why-runner{position:absolute;top:-1px;left:0;height:3px;width:100%;background:linear-gradient(90deg,rgba(239,129,63,0),var(--orange-soft));box-shadow:0 0 12px rgba(239,129,63,.55)}
.why-runner::after{content:"";position:absolute;right:-5px;top:-4px;width:11px;height:11px;border-radius:50%;background:#ffb27f;box-shadow:0 0 14px 3px rgba(239,129,63,.7);transition:opacity .8s}
.js .why-runner{width:0;opacity:0}
.why-flow.in .why-runner{opacity:1;animation:run 2.6s cubic-bezier(.45,0,.25,1) forwards}
@keyframes run{0%{width:0}100%{width:100%}}
.why-flow.done .why-runner::after{opacity:0}
.why-steps li .num{transition:color .5s}
.js .why-steps .num{color:rgba(239,129,63,.3)}
.why-flow.in .why-steps li .num{color:var(--orange-soft)}
.why-flow.in .why-steps li:nth-child(1) .num{transition-delay:.25s}
.why-flow.in .why-steps li:nth-child(2) .num{transition-delay:1.05s}
.why-flow.in .why-steps li:nth-child(3) .num{transition-delay:1.85s}
.why-flow.in .why-steps li:nth-child(1){animation:glow 1.2s .2s}
.why-flow.in .why-steps li:nth-child(2){animation:glow 1.2s 1s}
.why-flow.in .why-steps li:nth-child(3){animation:glow 1.2s 1.8s}
@keyframes glow{0%,100%{background:transparent}35%{background:rgba(239,129,63,.08)}}

/* ---------- サンプル：実物感 ---------- */
.deck-fan{position:relative;display:block;aspect-ratio:16/10}
.deck-fan button{position:absolute;left:14%;top:8%;width:72%;height:auto;aspect-ratio:16/9;box-shadow:0 16px 34px rgba(23,36,57,.18);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.deck-fan button:nth-child(1){z-index:3;transform:translate(0,14%)}
.deck-fan button:nth-child(2){z-index:2;transform:translate(-17%,-2%) rotate(-7deg)}
.deck-fan button:nth-child(3){z-index:1;transform:translate(17%,-2%) rotate(7deg)}
.js .deck-fan:not(.in) button{transform:translate(0,6%) rotate(0)}
.deck-fan.in button:nth-child(2){transition-delay:.1s}
.deck-fan.in button:nth-child(3){transition-delay:.2s}
.deck-fan button:hover{z-index:4}
.lp-shots .sp-shot{transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity .8s}
.js .lp-shots:not(.in) .sp-shot{transform:translateY(40px);opacity:0}
.lp-shots .pc-shot{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.js .lp-shots:not(.in) .pc-shot{transform:translateY(16px)}

/* ---------- なぜ AHA TOKYO：写真と3つの強みが順に出る ---------- */
.why-aha-photo,.why-aha-points>li{transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .why-aha-photo:not(.in){opacity:0;transform:translateY(18px)}
.js .why-aha-points:not(.in)>li{opacity:0;transform:translateY(14px)}
.why-aha-points>li:nth-child(2){transition-delay:.15s}
.who{transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .who:not(.in){opacity:0;transform:translateY(18px)}
.why-aha-points>li:nth-child(3){transition-delay:.3s}

/* ---------- 料金・進め方：軽い出現のみ ---------- */
.price-grid>*,.flow-steps>li{transition:opacity .6s,transform .6s cubic-bezier(.2,.7,.2,1)}
.js .price-grid:not(.in)>*,.js .flow-line:not(.in) .flow-steps>li{opacity:0;transform:translateY(14px)}
.price-grid>*:nth-child(2),.flow-steps>li:nth-child(2){transition-delay:.12s}
.price-grid>*:nth-child(3),.flow-steps>li:nth-child(3){transition-delay:.24s}
.flow-steps>li:nth-child(4){transition-delay:.36s}
.flow-steps>li:nth-child(5){transition-delay:.48s}
.price-card .badge{transition:opacity .5s .75s}
.js .price-grid:not(.in) .badge{opacity:0}

/* ---------- 進め方：ご相談 → 展示会 までの線が伸び、工程が順に灯る ---------- */
.flow-line{position:relative;padding-top:58px}
.flow-track{position:absolute;left:calc((100% - 56px) / 10);right:0;top:22px;height:2px;background:var(--line)}
.flow-fill{position:absolute;left:0;top:0;height:100%;width:100%;background:var(--orange)}
.js .flow-fill{width:0}
.flow-line.in .flow-fill{animation:fill 3s cubic-bezier(.45,0,.25,1) .2s forwards}
@keyframes fill{to{width:100%}}
.flow-from,.flow-to{position:absolute;top:-24px;font-size:11.5px;letter-spacing:.08em;color:var(--muted);white-space:nowrap;transform:translateX(-50%)}
.flow-from{left:0}
.flow-to{left:auto;right:-6px;transform:none;color:var(--orange);font-weight:700}
.flow-to::after{content:"";position:absolute;right:0;top:19px;width:12px;height:12px;background:var(--orange);transform:rotate(45deg)}
.flow-steps li{position:relative}
.flow-steps li::before{content:"";position:absolute;left:50%;top:-44px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--cream);border:2px solid var(--line);transition:background .35s,border-color .35s,box-shadow .35s}
.flow-steps li{border-top:2px solid var(--line)}
.flow-line.in .flow-steps li::before{background:var(--orange);border-color:var(--orange);box-shadow:0 0 0 6px rgba(204,89,37,.14)}
.flow-line.in .flow-steps li{border-top-color:var(--orange);transition:border-color .4s,opacity .6s,transform .6s cubic-bezier(.2,.7,.2,1)}
.flow-line.in .flow-steps li:nth-child(1)::before,.flow-line.in .flow-steps li:nth-child(1){transition-delay:.25s}
.flow-line.in .flow-steps li:nth-child(2)::before,.flow-line.in .flow-steps li:nth-child(2){transition-delay:.95s}
.flow-line.in .flow-steps li:nth-child(3)::before,.flow-line.in .flow-steps li:nth-child(3){transition-delay:1.65s}
.flow-line.in .flow-steps li:nth-child(4)::before,.flow-line.in .flow-steps li:nth-child(4){transition-delay:2.35s}
.flow-line.in .flow-steps li:nth-child(5)::before,.flow-line.in .flow-steps li:nth-child(5){transition-delay:3.05s}
.flow-line.done .flow-steps li::before{box-shadow:none}

@keyframes runv{0%{height:0}100%{height:100%}}
@keyframes fillv{to{height:100%}}
@media (max-width:860px){
  .fv-visual{max-width:520px;margin:0 auto;width:100%}
  .tag-2,.tag-3,.dim-2,.dim-3,.fv-meta-dwg,.ln-b,.fv-cap{display:none}
  .fv-meta{font-size:13px}
  .tag text{font-size:17px}
  .fv-role{font-size:11px;margin-top:1px}
  .fv-label{font-size:11px;letter-spacing:.1em}
  .fv-label small{display:none}
  .fv-cap{bottom:-14px;font-size:11px}
  .why-track{left:-1px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .why-runner{left:-1px;top:0;width:3px;height:100%;background:linear-gradient(180deg,rgba(239,129,63,0),var(--orange-soft))}
  .js .why-runner{width:3px;height:0}
  .why-runner::after{right:auto;left:-4px;top:auto;bottom:-5px}
  .why-flow.in .why-runner{animation-name:runv}
  .why-steps li,.why-steps li+li{padding-left:22px}
  .deck-fan{aspect-ratio:16/12}
  .flow-line{padding-top:0;padding-left:30px}
  .flow-track{left:6px;right:auto;top:8px;bottom:8px;width:2px;height:auto}
  .flow-fill{width:100%;height:100%}
  .js .flow-fill{width:100%;height:0}
  .flow-line.in .flow-fill{animation-name:fillv}
  .flow-from,.flow-to{display:none}
  .flow-steps li::before{left:-31px;top:22px;margin-left:0}
  .flow-steps li{border-top-width:1px}
}
@media (prefers-reduced-motion:reduce){
  .js .fv-visual .ln{stroke-dashoffset:0;animation:none!important}
  .js .fv-visual .ln-c{stroke-dasharray:22 6 4 6}
  .js .fv-visual .tag,.js .fv-visual .fv-meta,.js .fv-visual .fv-cap,.js .fv-visual .fv-role{opacity:1;animation:none!important}
  .js .fv-visual .fv-card{opacity:1;transform:none;animation:none!important}
  .js .why-runner{display:none}
  .js .why-steps .num{color:var(--orange-soft)}
  .why-steps li{animation:none!important}
  .js .deck-fan:not(.in) button:nth-child(1){transform:translate(0,14%)}
  .js .deck-fan:not(.in) button:nth-child(2){transform:translate(-17%,-2%) rotate(-7deg)}
  .js .deck-fan:not(.in) button:nth-child(3){transform:translate(17%,-2%) rotate(7deg)}
  .js .lp-shots:not(.in) .sp-shot,.js .lp-shots:not(.in) .pc-shot{transform:none;opacity:1}
  .js .price-grid:not(.in)>*,.js .flow-line:not(.in) .flow-steps>li,.js .price-grid:not(.in) .badge,.js .why-aha-photo:not(.in),.js .why-aha-points:not(.in)>li,.js .who:not(.in){opacity:1;transform:none}
  .js .flow-fill{width:100%!important;height:100%!important;animation:none!important}
  .js .flow-steps li::before{background:var(--orange);border-color:var(--orange)}
  *{transition:none!important}
}