/* =========================================================================
   建機運輸さま アウトロ 案 ― 全案の「動き」（提案シートのカードと全画面プレビュー共通）

   ・寸法は cqw / cqh（枠に対する%）だけで書く。
     → 小さいカードでも 9:16 の全画面でも、まったく同じ絵になる。
   ・全シーンは 7秒ちょうどのループ。すべての要素に delay を付けず、
     出る時刻はキーフレームの%に書く（delay を使うと2周目からズレるため）。
       7秒中の秒 → %   0.5s=7% / 1s=14% / 1.5s=21% / 2s=29% / 2.5s=36%
                       3s=43% / 3.5s=50% / 4s=57% / 4.5s=64% / 5s=71%
   ・.scn に .playing が付いている間だけ動く（画面外のカードは止めて軽くする）。
   ========================================================================= */

.scn{ position:absolute; inset:0; overflow:hidden; }
.scn *{ box-sizing:border-box; }
.scn:not(.playing) *{ animation-play-state:paused !important; }

.scn .kenki{ display:block; width:100%; height:auto; }
.scn .bar{ display:flex; align-items:center; justify-content:center; overflow:hidden; }
.scn .bar span{ font-weight:800; line-height:1; }
.scn .lgset .bar{ margin-top:1cqw; height:8cqw; background:linear-gradient(180deg,var(--g),var(--gd)); }
.scn .lgset .bar span{ font-size:5cqw; letter-spacing:.46em; text-indent:.46em; }
.scn .veh svg{ width:100%; height:auto; display:block; overflow:visible; }
.scn .veh .tbody,.scn .veh .ti{ fill:none; stroke:#fff; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; }
.scn .veh .ri,.scn .veh .sp{ fill:none; stroke:#fff; stroke-width:1.9; }
.scn .veh .hu{ fill:var(--g); stroke:none; }
/* 提案シートの車は止まっている（図面・積み込み・積荷入替）ので、タイヤは回さない */
.scn .wheel{ animation:none !important; }
.scn .cap{ position:absolute; left:0; right:0; text-align:center; }
.scn .tail{ position:absolute; left:0; right:0; text-align:center; font-size:4.4cqw; letter-spacing:.1em; color:rgba(255,255,255,.55); }

/* 共通：出て、しばらく居て、最後に消える（7秒ループ） */
@keyframes ap10{ 0%,12%{opacity:0;transform:translateY(2.6cqw)} 18%,92%{opacity:1;transform:none} 98%,100%{opacity:0} }
@keyframes ap20{ 0%,27%{opacity:0;transform:translateY(2.6cqw)} 33%,92%{opacity:1;transform:none} 98%,100%{opacity:0} }
@keyframes ap25{ 0%,34%{opacity:0;transform:translateY(2.6cqw)} 40%,92%{opacity:1;transform:none} 98%,100%{opacity:0} }
@keyframes ap30{ 0%,41%{opacity:0;transform:translateY(2.6cqw)} 47%,92%{opacity:1;transform:none} 98%,100%{opacity:0} }
@keyframes ap35{ 0%,48%{opacity:0;transform:translateY(2.6cqw)} 54%,92%{opacity:1;transform:none} 98%,100%{opacity:0} }
@keyframes ap40{ 0%,55%{opacity:0;transform:translateY(2.6cqw)} 61%,92%{opacity:1;transform:none} 98%,100%{opacity:0} }
@keyframes ap45{ 0%,62%{opacity:0;transform:translateY(2.6cqw)} 68%,92%{opacity:1;transform:none} 98%,100%{opacity:0} }
@keyframes ap50{ 0%,69%{opacity:0;transform:translateY(2.6cqw)} 75%,92%{opacity:1;transform:none} 98%,100%{opacity:0} }
.scn .a10{ opacity:0; animation:ap10 7s ease-out infinite }
.scn .a20{ opacity:0; animation:ap20 7s ease-out infinite }
.scn .a25{ opacity:0; animation:ap25 7s ease-out infinite }
.scn .a30{ opacity:0; animation:ap30 7s ease-out infinite }
.scn .a35{ opacity:0; animation:ap35 7s ease-out infinite }
.scn .a40{ opacity:0; animation:ap40 7s ease-out infinite }
.scn .a45{ opacity:0; animation:ap45 7s ease-out infinite }
.scn .a50{ opacity:0; animation:ap50 7s ease-out infinite }

/* 線を描いていく（図面・ルート用） */
@keyframes draw{ 0%{stroke-dashoffset:var(--len)} 34%,92%{stroke-dashoffset:0} 99%,100%{stroke-dashoffset:var(--len);opacity:0} }


/* ================= ① 吊り下ろす ================= */
.k1{ background:radial-gradient(90% 60% at 50% 74%, rgba(85,168,95,.16), transparent 70%), linear-gradient(180deg,#0E1410 0%,#070A07 100%); }
.k1 .rig{ position:absolute; inset:0; animation:k1rig 7s cubic-bezier(.3,.62,.24,1) infinite; }
@keyframes k1rig{
  0%{ transform:translateY(-72cqh); opacity:0 }
  4%{ opacity:1 }
  33%{ transform:translateY(0) }
  94%{ transform:translateY(0); opacity:1 }
  99%,100%{ transform:translateY(0); opacity:0 }
}
.k1 .hoist{ position:absolute; inset:0; animation:k1hoist 7s cubic-bezier(.35,0,.3,1) infinite; }
@keyframes k1hoist{ 0%,46%{transform:translateY(0)} 58%,100%{transform:translateY(-8cqh)} }
.k1 .wire{ position:absolute; left:50%; top:-140cqh; width:1.4cqw; height:164cqh; margin-left:-.7cqw; background:rgba(240,246,242,.85); }
.k1 .hook{ position:absolute; left:50%; top:24cqh; width:11cqw; margin-left:-5.5cqw; }
.k1 .hook svg{ width:100%; height:auto; display:block }
.k1 .swing{ position:absolute; left:8cqw; right:8cqw; top:33cqh; transform-origin:50% 0%; animation:k1sway 7s ease-in-out infinite; }
@keyframes k1sway{
  0%{transform:rotate(-5deg)} 5%{transform:rotate(3.6deg)} 10%{transform:rotate(-2.6deg)}
  16%{transform:rotate(1.7deg)} 22%{transform:rotate(-1deg)} 28%{transform:rotate(.4deg)}
  33%,100%{transform:rotate(0)}
}
.k1 .sling{ width:100%; display:block; overflow:visible; animation:k1slack 7s ease-in infinite; }
.k1 .sling path{ fill:none; stroke:#E8EDE9; stroke-width:9; stroke-linecap:round }
@keyframes k1slack{ 0%,44%{opacity:1;transform:none} 52%,100%{opacity:0;transform:translateY(-3cqw)} }
.k1 .load .bar{ height:11cqw } .k1 .load .bar span{ font-size:7cqw }
.k1 .shadow{ position:absolute; left:22cqw; right:22cqw; top:50cqh; height:4cqw; border-radius:50%; background:#000; animation:k1shd 7s cubic-bezier(.3,.62,.24,1) infinite; }
@keyframes k1shd{
  0%{opacity:.06; filter:blur(3cqw); transform:scale(1.5,1.5)}
  33%{opacity:.5; filter:blur(1.2cqw); transform:scale(1,1)}
  94%{opacity:.5} 99%,100%{opacity:0}
}
.k1 .ground{ position:absolute; left:12cqw; right:12cqw; top:50cqh; height:1cqw; background:rgba(255,255,255,.16); }
.k1 .nm{ position:absolute; left:0; right:0; top:60cqh; text-align:center; font-size:6.4cqw; font-weight:800; letter-spacing:.05em }
.k1 .mt{ position:absolute; left:0; right:0; top:70cqh; text-align:center; font-size:5.4cqw; font-weight:800; color:var(--gl) }
.k1 .wave{ position:absolute; left:50%; top:47cqh; width:56cqw; height:6cqw; margin-left:-28cqw; border-radius:50%; border:.7cqw solid rgba(138,212,148,.8); opacity:0; animation:k1wave 7s cubic-bezier(.1,.7,.3,1) infinite; }
@keyframes k1wave{ 0%,32%{opacity:0;transform:scale(.25,.3)} 34%{opacity:.85;transform:scale(.4,.4)} 45%,100%{opacity:0;transform:scale(2.4,.6)} }
.k1 .tagwrap{ position:absolute; left:26cqw; right:26cqw; top:26cqh; opacity:0; animation:k1tag 7s cubic-bezier(.2,1.5,.45,1) infinite; }
@keyframes k1tag{ 0%,60%{opacity:0;transform:translateY(-5cqw)} 68%,92%{opacity:1;transform:none} 98%,100%{opacity:0} }
.k1 .tagwrap .str{ position:absolute; left:50%; margin-left:-.5cqw; top:0; width:1cqw; height:5cqw; background:#E8EDE9 }
.k1 .tagcard{ position:relative; margin-top:4cqw; padding:5cqw 0 3.4cqw; text-align:center; border:.7cqw solid rgba(232,237,233,.85); border-radius:2cqw; background:#0F1712; }
.k1 .tagcard .h{ font-size:7cqw; font-weight:800 } .k1 .tagcard .f{ margin-top:2cqw; font-size:3.4cqw; color:var(--gl) }

/* ================= ①求人 ================= */
.kj{ background:radial-gradient(90% 60% at 50% 72%, rgba(85,168,95,.14), transparent 70%), linear-gradient(180deg,#0E1410 0%,#070A07 100%); }
.kj .rig{ position:absolute; inset:0; animation:k1rig 7s cubic-bezier(.3,.62,.24,1) infinite; }
.kj .hoist{ position:absolute; inset:0; animation:kjhoist 7s cubic-bezier(.35,0,.3,1) infinite; }
@keyframes kjhoist{ 0%,46%{transform:translateY(0)} 58%,100%{transform:translateY(-5cqh)} }
.kj .wire{ position:absolute; left:50%; top:-140cqh; width:1.4cqw; height:162cqh; margin-left:-.7cqw; background:rgba(240,246,242,.85); }
.kj .hook{ position:absolute; left:50%; top:22cqh; width:11cqw; margin-left:-5.5cqw; }
.kj .hook svg{ width:100%; height:auto; display:block }
.kj .swing{ position:absolute; left:9cqw; right:9cqw; top:31cqh; transform-origin:50% 0%; animation:k1sway 7s ease-in-out infinite; }
.kj .sling{ width:100%; display:block; overflow:visible; animation:k1slack 7s ease-in infinite; }
.kj .sling path{ fill:none; stroke:#E8EDE9; stroke-width:9; stroke-linecap:round }
.kj .board{ position:relative; padding:5cqw 3cqw; border:2.2cqw solid #fff; border-radius:2cqw; text-align:center; background:linear-gradient(180deg,#1B4A26,#0E2C17); }
.kj .board .t{ font-size:12cqw; font-weight:800; letter-spacing:.12em; text-indent:.12em }
.kj .board .r{ width:36%; height:.9cqw; margin:2.6cqw auto 2.2cqw; background:var(--gl) }
.kj .board .j{ font-size:4.4cqw; color:rgba(255,255,255,.9) }
.kj .board .k{ width:52%; margin:3.4cqw auto 0 }
.kj .board .k .bar{ height:4.6cqw } .kj .board .k .bar span{ font-size:2.9cqw }
.kj .shadow{ position:absolute; left:16cqw; right:16cqw; top:60cqh; height:4cqw; border-radius:50%; background:#000; animation:k1shd 7s cubic-bezier(.3,.62,.24,1) infinite; }
.kj .tag{ position:absolute; left:26cqw; right:26cqw; top:62cqh; opacity:0; animation:k1tag 7s cubic-bezier(.2,1.5,.45,1) infinite; }
.kj .tag .str{ position:absolute; left:50%; margin-left:-.5cqw; top:0; width:1cqw; height:4cqw; background:#E8EDE9 }
.kj .tagcard{ position:relative; margin-top:3.4cqw; padding:4cqw 0 3cqw; text-align:center; border:.7cqw solid rgba(232,237,233,.8); border-radius:2cqw; background:#0F1712 }
.kj .tagcard .h{ font-size:5.6cqw; font-weight:800 } .kj .tagcard .f{ margin-top:1.6cqw; font-size:3cqw; color:var(--gl) }

/* ================= ② 図面 ================= */
.k2{ background:#080D0A; }
.k2::before{ content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(138,212,148,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(138,212,148,.10) 1px,transparent 1px);
  background-size:6cqw 6cqw; }
.k2 .veh{ position:absolute; left:3cqw; right:3cqw; top:34cqh; }
.k2 .veh .tbody,.k2 .veh .ti{ stroke:#BFEFC8; stroke-width:2.4 }
.k2 .veh .ri,.k2 .veh .sp{ stroke:#BFEFC8; stroke-width:1.4 }
.k2 .veh .hu{ fill:#55A85F }
/* 車体を線でプロットしていく */
.k2 .veh svg *{ stroke-dasharray:900; stroke-dashoffset:900; animation:k2plot 7s linear infinite }
@keyframes k2plot{ 0%{stroke-dashoffset:900} 30%,93%{stroke-dashoffset:0} 99%,100%{stroke-dashoffset:900;opacity:0} }
.k2 .dim{ position:absolute; height:1px; background:var(--gl); transform-origin:0 50%; animation:k2dim 7s ease-out infinite }
@keyframes k2dim{ 0%,32%{transform:scaleX(0);opacity:0} 36%{opacity:1} 44%,93%{transform:scaleX(1);opacity:1} 99%,100%{opacity:0} }
.k2 .dim::before,.k2 .dim::after{ content:""; position:absolute; top:-2.2cqw; width:1px; height:4.4cqw; background:var(--gl) }
.k2 .dim::before{ left:0 } .k2 .dim::after{ right:0 }
.k2 .dlbl{ position:absolute; font-size:3.4cqw; color:var(--gl); letter-spacing:.05em }
.k2 .tblock{ position:absolute; left:6cqw; right:6cqw; top:74cqh; border:1px solid rgba(191,239,200,.45); padding:3cqw }
.k2 .tblock .k .bar{ background:#0F1A11; border:1px solid rgba(191,239,200,.5); height:7cqw }
.k2 .tblock .k .bar span{ font-size:4.2cqw; letter-spacing:.42em; text-indent:.42em; color:#BFEFC8 }
.k2 .tblock .k{ width:66% }
.k2 .tblock .meta{ position:absolute; right:3cqw; top:3cqw; text-align:right; font-size:3cqw; line-height:1.9; color:rgba(191,239,200,.65) }

/* ================= ③ 全国へ伸びる ================= */
.k3{ background:linear-gradient(180deg,#0C120E 0%,#070A08 100%); }
.k3 svg.map{ position:absolute; left:0; right:0; top:16cqh; width:100%; height:58cqh; }
.k3 .rt{ stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:k3rt 7s ease-out infinite }
@keyframes k3rt{ 0%,10%{stroke-dashoffset:var(--len)} 46%,93%{stroke-dashoffset:0} 99%,100%{stroke-dashoffset:var(--len);opacity:0} }
.k3 .pin{ transform-box:fill-box; transform-origin:center; animation:k3pin 7s cubic-bezier(.2,1.6,.4,1) infinite }
@keyframes k3pin{ 0%,44%{transform:scale(0);opacity:0} 52%,93%{transform:scale(1);opacity:1} 99%,100%{opacity:0} }
.k3 .cap{ top:6cqh; font-size:4.6cqw; font-weight:800; letter-spacing:.08em }
.k3 .cap small{ display:block; margin-top:1.6cqw; font-size:3.1cqw; font-weight:400; letter-spacing:.16em; color:rgba(255,255,255,.5) }
.k3 .lg{ position:absolute; left:14cqw; right:14cqw; top:78cqh }

/* ================= ④ 積み込みの1カット ================= */
.k4{ background:linear-gradient(180deg,#101711 0%,#070A07 100%); }
.k4 .zoom{ position:absolute; inset:0; transform-origin:38% 62%; animation:k4zoom 7s ease-out infinite }
@keyframes k4zoom{ 0%{transform:scale(1.16)} 60%,100%{transform:scale(1)} }
.k4 .big{ position:absolute; left:-118cqw; top:42cqh; width:330cqw }
.k4 .big .tbody,.k4 .big .ti{ stroke-width:3.4 } .k4 .big .ri,.k4 .big .sp{ stroke-width:2 }
.k4 .ramp{ position:absolute; left:-4cqw; top:66cqh; width:52cqw; height:2cqw; background:rgba(255,255,255,.55); transform-origin:100% 50%; transform:rotate(21deg) }
.k4 .cap{ top:14cqh; font-size:5.6cqw; font-weight:800; letter-spacing:.14em }
.k4 .cap small{ display:block; margin-top:1.6cqw; font-size:3.1cqw; font-weight:400; letter-spacing:.18em; color:rgba(255,255,255,.5) }
.k4 .lg{ position:absolute; left:20cqw; right:20cqw; top:84cqh }

/* ================= ⑤ 数字で語る ================= */
.k5{ background:linear-gradient(180deg,#0F150F 0%,#060806 100%); }
.k5::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(78deg, rgba(255,255,255,.026) 0 .3cqw, transparent .3cqw 20cqw) }
.k5 .beat{ position:absolute; inset:0 }
.k5 .num{ position:absolute; left:0; right:0; top:28cqh; text-align:center; font-size:36cqw; font-weight:900; line-height:.9; letter-spacing:-.02em; opacity:0; }
.k5 .unit{ position:absolute; right:12cqw; top:56cqh; font-size:7cqw; font-weight:800; color:var(--gl); opacity:0 }
.k5 .lbl{ position:absolute; left:0; right:0; top:64cqh; text-align:center; opacity:0 }
.k5 .lbl b{ display:inline-flex; align-items:center; justify-content:center; padding:0 5cqw; height:9cqw;
  background:linear-gradient(180deg,var(--g),var(--gd)); font-size:4.6cqw; font-weight:800; letter-spacing:.3em; text-indent:.3em }
.k5 .num,.k5 .unit{ transform:skewX(-12deg) }
/* 4ビート＋最後のロゴ確定。1周7秒 */
.k5 .b1 .num,.k5 .b1 .unit,.k5 .b1 .lbl{ animation:k5b1 7s cubic-bezier(.15,.85,.2,1) infinite }
.k5 .b2 .num,.k5 .b2 .unit,.k5 .b2 .lbl{ animation:k5b2 7s cubic-bezier(.15,.85,.2,1) infinite }
.k5 .b3 .num,.k5 .b3 .unit,.k5 .b3 .lbl{ animation:k5b3 7s cubic-bezier(.15,.85,.2,1) infinite }
.k5 .b4 .num,.k5 .b4 .unit,.k5 .b4 .lbl{ animation:k5b4 7s cubic-bezier(.15,.85,.2,1) infinite }
@keyframes k5b1{ 0%{opacity:0;transform:translateX(22cqw) skewX(-12deg)} 3%{opacity:1} 6%{transform:translateX(-1.6cqw) skewX(-12deg)} 8%,12%{opacity:1;transform:translateX(0) skewX(-12deg)} 15%,100%{opacity:0;transform:translateX(-8cqw) skewX(-12deg)} }
@keyframes k5b2{ 0%,15%{opacity:0;transform:translateX(22cqw) skewX(-12deg)} 18%{opacity:1} 21%{transform:translateX(-1.6cqw) skewX(-12deg)} 23%,27%{opacity:1;transform:translateX(0) skewX(-12deg)} 30%,100%{opacity:0;transform:translateX(-8cqw) skewX(-12deg)} }
@keyframes k5b3{ 0%,30%{opacity:0;transform:translateX(22cqw) skewX(-12deg)} 33%{opacity:1} 36%{transform:translateX(-1.6cqw) skewX(-12deg)} 38%,42%{opacity:1;transform:translateX(0) skewX(-12deg)} 45%,100%{opacity:0;transform:translateX(-8cqw) skewX(-12deg)} }
@keyframes k5b4{ 0%,45%{opacity:0;transform:translateX(22cqw) skewX(-12deg)} 48%{opacity:1} 51%{transform:translateX(-1.6cqw) skewX(-12deg)} 53%,57%{opacity:1;transform:translateX(0) skewX(-12deg)} 60%,100%{opacity:0;transform:translateX(-8cqw) skewX(-12deg)} }
.k5 .lock .lg{ position:absolute; left:12cqw; right:12cqw; top:48cqh }
.k5 .lock .lg .kenki{ opacity:0; animation:k5logo 7s cubic-bezier(.14,.85,.25,1) infinite }
@keyframes k5logo{ 0%,63%{opacity:0;transform:translateX(14cqw)} 68%{opacity:1;transform:translateX(-.8cqw)} 70%,92%{opacity:1;transform:none} 98%,100%{opacity:0} }
.k5 .lock .lg .bar{ clip-path:inset(0 100% 0 0); animation:k5bar 7s cubic-bezier(.2,.8,.2,1) infinite }
@keyframes k5bar{ 0%,61%{clip-path:inset(0 100% 0 0)} 68%,92%{clip-path:inset(0 0 0 0)} 98%,100%{clip-path:inset(0 0 0 0);opacity:0} }
.k5 .plate{ position:absolute; left:16cqw; right:16cqw; top:70cqh; padding:3cqw 0 3.4cqw; text-align:center;
  border:1.4cqw solid #fff; border-radius:3cqw; background:linear-gradient(180deg,#2A6E36,#1A4922); }
.k5 .plate .pt{ font-size:3.4cqw; letter-spacing:.2em; text-indent:.2em; color:rgba(255,255,255,.86) }
.k5 .plate .pm{ margin-top:1.4cqw; font-size:7.4cqw; font-weight:800; line-height:1 }

/* ================= ⑥ 極端な寄り ================= */
.k6{ background:linear-gradient(180deg,#0A0F0B 0%,#050705 100%); }
.k6 .tire{ position:absolute; left:-34cqw; top:14cqh; width:96cqw; height:96cqw; border-radius:50%; border:15cqw solid #24382583; animation:k6roll 7s linear infinite }
.k6 .tire::after{ content:""; position:absolute; inset:9cqw; border-radius:50%; border:5cqw solid #35543770 }
@keyframes k6roll{ 0%{transform:translateX(-14cqw) rotate(0)} 100%{transform:translateX(10cqw) rotate(140deg)} }
.k6 .trk{ position:absolute; right:-16cqw; top:56cqh; width:90cqw; height:20cqw; border-radius:10cqw; background:#2A422C88; animation:k6slide 7s linear infinite }
@keyframes k6slide{ 0%{transform:translateX(18cqw)} 100%{transform:translateX(-14cqw)} }
.k6 .glow{ position:absolute; left:0; right:0; top:0; height:46cqh; background:radial-gradient(60% 100% at 74% 30%, rgba(85,168,95,.30), transparent 70%) }
.k6 .lg{ position:absolute; left:9cqw; right:9cqw; top:83cqh }

/* ================= ⑦ ヘッドライトで照らす ================= */
.k7{ background:linear-gradient(180deg,#080B09,#040604); }
.k7 .beam{ position:absolute; left:-40cqw; top:20cqh; width:190cqw; height:40cqh; filter:blur(3cqw); transform:rotate(-10deg);
  background:linear-gradient(96deg, rgba(226,244,230,.42), rgba(226,244,230,.10) 48%, transparent 74%);
  animation:k7beam 7s cubic-bezier(.4,0,.5,1) infinite }
@keyframes k7beam{ 0%{transform:translateX(-58cqw) rotate(-10deg)} 46%{transform:translateX(30cqw) rotate(-10deg)} 60%,100%{transform:translateX(46cqw) rotate(-10deg);opacity:0} }
.k7 .lamp{ position:absolute; left:-9cqw; top:31cqh; width:26cqw; height:26cqw; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.95), rgba(210,240,216,.30) 42%, transparent 70%);
  animation:k7lamp 7s cubic-bezier(.4,0,.5,1) infinite }
@keyframes k7lamp{ 0%{transform:translateX(-32cqw);opacity:0} 8%{opacity:1} 46%{transform:translateX(84cqw);opacity:1} 58%,100%{transform:translateX(112cqw);opacity:0} }
.k7 .dim{ position:absolute; left:9cqw; right:9cqw; top:42cqh; opacity:.16 }
.k7 .dim .bar{ opacity:.5 }
.k7 .lit{ position:absolute; left:9cqw; right:9cqw; top:42cqh; animation:k7lit 7s cubic-bezier(.4,0,.5,1) infinite }
@keyframes k7lit{
  0%{ clip-path:polygon(0 0,0 0,0 100%,0 100%) }
  30%{ clip-path:polygon(0 0,46% 0,28% 100%,0 100%) }
  48%{ clip-path:polygon(0 0,100% 0,100% 100%,0 100%) }
  92%{ clip-path:polygon(0 0,100% 0,100% 100%,0 100%); opacity:1 }
  98%,100%{ clip-path:polygon(0 0,100% 0,100% 100%,0 100%); opacity:0 }
}
.k7 .tail{ top:80cqh }

/* ================= ⑧ 積荷だけが入れ替わる ================= */
.k8{ background:linear-gradient(180deg,#0F150F,#060806); }
.k8 .cap{ top:16cqh; font-size:5.2cqw; font-weight:800; letter-spacing:.1em }
.k8 .cap small{ display:block; margin-top:1.6cqw; font-size:3.1cqw; font-weight:400; letter-spacing:.16em; color:rgba(255,255,255,.48) }
.k8 .stack{ position:absolute; left:2cqw; right:2cqw; top:42cqh }
.k8 .stack > div{ position:absolute; left:0; right:0; top:0; opacity:0 }
.k8 .stack .s1{ animation:k8s1 7s steps(1,end) infinite }
.k8 .stack .s2{ animation:k8s2 7s steps(1,end) infinite }
.k8 .stack .s3{ animation:k8s3 7s steps(1,end) infinite }
.k8 .stack .s4{ animation:k8s4 7s steps(1,end) infinite }
@keyframes k8s1{ 0%,11%{opacity:1} 12%,100%{opacity:0} }
@keyframes k8s2{ 0%,11%{opacity:0} 12%,23%{opacity:1} 24%,100%{opacity:0} }
@keyframes k8s3{ 0%,23%{opacity:0} 24%,35%{opacity:1} 36%,100%{opacity:0} }
@keyframes k8s4{ 0%,35%{opacity:0} 36%,47%{opacity:1} 48%,100%{opacity:0} }
.k8 .lgload{ position:absolute; left:30cqw; right:38cqw; top:46.5cqh; opacity:0; animation:k8lg 7s cubic-bezier(.2,1.4,.4,1) infinite }
.k8 .lgload .bar{ height:4cqw; margin-top:.6cqw } .k8 .lgload .bar span{ font-size:2.6cqw }
@keyframes k8lg{ 0%,48%{opacity:0;transform:translateY(-6cqw)} 55%,92%{opacity:1;transform:none} 98%,100%{opacity:0} }
.k8 .deck{ position:absolute; left:2cqw; right:2cqw; top:42cqh; opacity:.9 }
.k8 .lg{ position:absolute; left:16cqw; right:16cqw; top:79cqh }

/* ================= ⑨ 鉄から切り出す ================= */
.k9{ background:radial-gradient(70% 40% at 56% 46%, rgba(255,214,140,.12), transparent 70%), linear-gradient(180deg,#0B0F0B,#050705); }
.k9 .cut{ position:absolute; left:8cqw; right:8cqw; top:40cqh }
.k9 .ol path{ fill:none; stroke:rgba(138,212,148,.45); stroke-width:4 }
.k9 .fl{ position:absolute; left:0; right:0; top:0; animation:k9cut 7s linear infinite }
.k9 .fl path{ fill:#fff }
@keyframes k9cut{ 0%{clip-path:inset(0 100% 0 0)} 50%,92%{clip-path:inset(0 0 0 0)} 98%,100%{clip-path:inset(0 0 0 0);opacity:0} }
.k9 .spark{ position:absolute; top:48cqh; width:12cqw; height:12cqw; margin:-6cqw 0 0 -6cqw; border-radius:50%;
  background:radial-gradient(circle,#fff 12%,rgba(255,206,120,.85) 34%,transparent 70%); animation:k9sp 7s linear infinite }
@keyframes k9sp{ 0%{left:8cqw;opacity:0} 4%{opacity:1} 50%{left:92cqw;opacity:1} 56%,100%{left:92cqw;opacity:0} }
.k9 .tail{ top:78cqh }

/* ================= ⑩ シャッターが上がる ================= */
.k10{ background:linear-gradient(180deg,#0A0F0B,#050705); }
.k10 .shut{ position:absolute; left:0; right:0; top:0; height:88cqh;
  background:repeating-linear-gradient(180deg,#1E271F 0 2.6cqw,#131A14 2.6cqw 5.2cqw);
  border-bottom:1.4cqw solid rgba(232,237,233,.85);
  animation:k10up 7s cubic-bezier(.35,.02,.28,1) infinite }
@keyframes k10up{ 0%,6%{transform:translateY(0)} 40%,92%{transform:translateY(-58cqh)} 99%,100%{transform:translateY(0)} }
.k10 .gap{ position:absolute; left:0; right:0; top:0; height:30cqh; background:linear-gradient(180deg,rgba(210,240,216,.42),transparent 80%);
  animation:k10gap 7s cubic-bezier(.35,.02,.28,1) infinite }
@keyframes k10gap{ 0%,6%{transform:translateY(88cqh);opacity:0} 14%{opacity:1} 40%,92%{transform:translateY(30cqh);opacity:1} 99%,100%{opacity:0} }
.k10 .lg{ position:absolute; left:10cqw; right:10cqw; top:46cqh }
.k10 .floor{ position:absolute; left:0; right:0; top:78cqh; height:1.2cqw; background:rgba(255,255,255,.22) }
.k10 .tail{ top:84cqh }

/* ================= ⑪ 荷締めベルトで締める ================= */
.k11{ background:linear-gradient(180deg,#0E140F,#050705); }
.k11 .lg{ position:absolute; left:9cqw; right:9cqw; top:38cqh }
.k11 .kl{ animation:k11tight 7s cubic-bezier(.3,1.3,.4,1) infinite }
@keyframes k11tight{
  0%,12%{ transform:translateX(calc(var(--sp) * 1px)) }
  26%{ transform:translateX(calc(var(--sp) * -.14px)) }
  32%,92%{ transform:translateX(0) }
  99%,100%{ transform:translateX(calc(var(--sp) * 1px)) }
}
.k11 .strap{ position:absolute; left:-3cqw; right:-3cqw; height:4.6cqw; background:linear-gradient(180deg,#F2F6F3,#C6CFC8);
  transform-origin:0 50%; animation:k11strap 7s cubic-bezier(.2,.8,.2,1) infinite }
@keyframes k11strap{ 0%,4%{transform:scaleX(0)} 16%,92%{transform:scaleX(1)} 99%,100%{transform:scaleX(0)} }
.k11 .s1{ top:34cqh } .k11 .s2{ top:56cqh }
.k11 .buckle{ position:absolute; left:62cqw; top:52cqh; width:20cqw; height:13cqw; border:2.2cqw solid #fff; border-radius:2.4cqw; background:#141B16;
  transform-origin:50% 100%; animation:k11bk 7s ease-in-out infinite }
@keyframes k11bk{ 0%,16%{opacity:0;transform:rotate(0)} 20%{opacity:1;transform:rotate(-16deg)} 26%{transform:rotate(4deg)} 30%{transform:rotate(-9deg)} 34%,92%{transform:rotate(0);opacity:1} 99%,100%{opacity:0} }
.k11 .buckle::after{ content:""; position:absolute; left:50%; top:-6cqw; width:2cqw; height:8cqw; margin-left:-1cqw; background:#fff; border-radius:1cqw }
.k11 .tail{ top:76cqh }

/* ================= ⑫ 誘導の旗 ================= */
.k12{ background:linear-gradient(180deg,#0E140F,#050705); }
.k12 .lines i{ position:absolute; right:0; height:1.1cqw; border-radius:1cqw; background:linear-gradient(90deg,transparent,rgba(138,212,148,.7)); opacity:0; animation:k12ln 7s ease-out infinite }
.k12 .lines i:nth-child(1){ top:40cqh; width:60cqw } .k12 .lines i:nth-child(2){ top:44cqh; width:82cqw } .k12 .lines i:nth-child(3){ top:48cqh; width:70cqw }
@keyframes k12ln{ 0%,20%{opacity:0;transform:translateX(30cqw)} 26%{opacity:.9} 44%,100%{opacity:0;transform:translateX(-40cqw)} }
.k12 .lg{ position:absolute; left:16cqw; right:4cqw; top:52cqh; animation:k12in 7s cubic-bezier(.18,.9,.24,1) infinite }
@keyframes k12in{ 0%,18%{opacity:0;transform:translateX(80cqw)} 24%{opacity:1} 46%,92%{opacity:1;transform:translateX(0)} 98%,100%{opacity:0} }
.k12 .fig{ position:absolute; left:7cqw; top:68cqh; width:26cqw }
.k12 .fig svg{ width:100%; height:auto; display:block; overflow:visible }
.k12 .fig .st{ fill:none; stroke:#fff; stroke-width:5; stroke-linecap:round; stroke-linejoin:round }
.k12 .fig .fg{ fill:var(--g) }
.k12 .arm{ transform-box:fill-box; transform-origin:0% 100%; animation:k12arm 7s ease-in-out infinite }
@keyframes k12arm{ 0%,10%{transform:rotate(46deg)} 18%,44%{transform:rotate(0)} 52%,100%{transform:rotate(46deg)} }
.k12 .ground{ position:absolute; left:0; right:0; top:86cqh; height:1.2cqw; background:rgba(255,255,255,.22) }
.k12 .tail{ top:90cqh }