/* ============================================================
   lab-video.css —「1分でわかる hakuto AI のこと」
   配色は hakuto AI ページ準拠：ネイビー #0a0e1a / シアン #06b6d4・#22d3ee
   ＋オレンジ #e85d3a（副色・CTA）。PC=16:9 / モバイル=9:16 ショート。
   音声(VOICEVOX)があれば同期、無ければ無音タイマー自走。
   ============================================================ */
#lab-1min{
  --cy:#06b6d4; --cy-l:#22d3ee; --cy-d:#0891b2;
  --or:#e85d3a; --or2:#f5a623;
  --navy:#0a0e1a; --navy2:#141828;
  --paper:#e8eef7; --sub:#cbd5e1; --muted:#94a3b8;
  --line:rgba(148,163,184,.14);
  max-width:1080px; margin:56px auto; padding:0 24px;
  font-family:"Inter","Noto Sans JP",sans-serif;
}
.lvid{
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  border-radius:20px; background:radial-gradient(120% 120% at 78% 8%, #1b2740, #0a0e1a 62%);
  box-shadow:0 30px 70px -30px rgba(6,182,212,.4), 0 30px 70px -34px rgba(0,0,0,.6);
  color:var(--paper); -webkit-font-smoothing:antialiased; isolation:isolate;
}
/* === モバイル：9:16 ショート === */
@media (max-width:680px){
  .lvid{ aspect-ratio:9/16; border-radius:16px; }
  #lab-1min{ padding:0 14px; margin:36px auto; }
}

/* 動く背景（設計図グリッド＋グロー） */
.lvid__glow{ position:absolute; inset:-20%; pointer-events:none;
  background:radial-gradient(40% 40% at 24% 28%, rgba(6,182,212,.30), transparent 70%),
             radial-gradient(45% 45% at 80% 78%, rgba(232,93,58,.16), transparent 70%);
  animation:lvGlow 13s ease-in-out infinite alternate; }
@keyframes lvGlow{ from{transform:translate(-3%,-2%) scale(1.05);} to{transform:translate(4%,3%) scale(1.16);} }
.lvid__grid{ position:absolute; inset:0; pointer-events:none; opacity:.6;
  background-image:linear-gradient(rgba(148,163,184,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.10) 1px,transparent 1px);
  background-size:46px 46px; -webkit-mask:radial-gradient(72% 72% at 50% 50%,#000,transparent); mask:radial-gradient(72% 72% at 50% 50%,#000,transparent); }
/* 奥行き：動く設計図シェイプ層 */
.lvid__fx{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.lvid__fx svg{ position:absolute; inset:0; width:100%; height:100%; }
.lvid__fx .fx-d{ transform-box:fill-box; transform-origin:center; animation:lvDrift 24s ease-in-out infinite; }
.lvid__fx .fx-d:nth-child(2n){ animation-duration:30s; animation-delay:-5s; }
.lvid__fx .fx-d:nth-child(3n){ animation-duration:34s; animation-delay:-11s; }
@keyframes lvDrift{ 0%,100%{transform:translate(0,0) rotate(0);} 25%{transform:translate(-14px,-22px) rotate(4deg);} 50%{transform:translate(18px,-10px) rotate(-3deg);} 75%{transform:translate(-8px,14px) rotate(2deg);} }
/* ビジュアルの常時ふわ浮き（生命感） */
.lvid__viz.in svg, .lvid__viz.in img{ animation:lvBob 7s ease-in-out infinite; }
@keyframes lvBob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }

/* SVG ビジュアルレイヤー（写真不使用） */
.lvid__viz-layer{ position:absolute; inset:0; pointer-events:none; z-index:2; }
/* PC：ビジュアルは右 38% に収め、テキストは左へ（文字と重ねない） */
.lvid__viz{ position:absolute; right:4%; top:50%; width:38%; max-height:80%; display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.45));
  opacity:0; transform:translate(20px,-50%) scale(.96);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.lvid__viz.in{ opacity:1; transform:translate(0,-50%) scale(1); }
.lvid__viz svg, .lvid__viz img{ width:100%; height:auto; max-height:100%; overflow:visible; display:block; }
/* OKURUN 事例：公式マスコット（郵便ヤギ）＋シアングロー */
.lvid__viz--okurun .ok-glow{ position:absolute; inset:6%; border-radius:50%; z-index:0;
  background:radial-gradient(circle, rgba(6,182,212,.30), transparent 70%); filter:blur(6px); }
.lvid__viz--okurun img.ok-goat{ position:relative; z-index:1; }
@media (max-width:680px){
  /* ショート：ビジュアルは上、テキストは下 */
  .lvid__viz{ top:7%; bottom:auto; right:50%; width:auto; height:34%; max-height:none;
    transform:translate(50%,-18px) scale(.96); opacity:0; }
  .lvid__viz.in{ transform:translate(50%,0) scale(1); opacity:1; }
  .lvid__viz svg, .lvid__viz img{ width:auto; height:100%; max-width:64vw; max-height:none; }
  .lvid__viz--window,.lvid__viz--agents{ height:36%; }
}

/* SVG 内モーション */
.lv-spark{ transform-box:fill-box; transform-origin:center; animation:lvSpark 2.4s ease-in-out infinite; }
@keyframes lvSpark{ 0%,100%{opacity:.35; transform:scale(.7);} 50%{opacity:1; transform:scale(1.15);} }
.lv-pulse{ transform-box:fill-box; transform-origin:center; animation:lvNode 2.6s ease-in-out infinite; }
@keyframes lvNode{ 0%,100%{opacity:.7;} 50%{opacity:1;} }
.lv-blink{ animation:lvBlink 1.3s steps(1) infinite; }
@keyframes lvBlink{ 0%,55%{opacity:1;} 56%,100%{opacity:.25;} }
.lv-dash{ stroke-dasharray:6 8; animation:lvDash 1.1s linear infinite; }
@keyframes lvDash{ to{ stroke-dashoffset:-28; } }
.lv-float{ transform-box:fill-box; transform-origin:center; animation:lvFloat 3.4s ease-in-out infinite; }
@keyframes lvFloat{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);} }
.lv-orbit{ transform-box:fill-box; transform-origin:center; animation:lvOrbit 16s linear infinite; }
@keyframes lvOrbit{ to{ transform:rotate(360deg); } }
.lv-typ{ transform-box:fill-box; transform-origin:center; animation:lvTyp 1.4s ease-in-out infinite; }
.lv-typ--2{ animation-delay:.18s; } .lv-typ--3{ animation-delay:.36s; }
@keyframes lvTyp{ 0%,100%{opacity:.3; transform:translateY(0);} 40%{opacity:1; transform:translateY(-3px);} }
.lv-travel{ transform-box:fill-box; transform-origin:center; animation:lvTravel 2.8s ease-in-out infinite; }
@keyframes lvTravel{ 0%{transform:translateY(-94px); opacity:0;} 12%{opacity:1;} 88%{opacity:1;} 100%{transform:translateY(94px); opacity:0;} }
.lv-draw{ stroke-dasharray:120; stroke-dashoffset:120; animation:lvDraw 3s ease-in-out infinite; }
@keyframes lvDraw{ 0%{stroke-dashoffset:120;} 35%,100%{stroke-dashoffset:0;} }

/* シーン（テキスト） */
.lvid__scene{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(22px,6%,54px); padding-right:44%; opacity:0; visibility:hidden; transition:opacity .55s ease; overflow:hidden; }
.lvid__scene.on{ opacity:1; visibility:visible; }
.lvid__eyebrow{ display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
  font-family:"JetBrains Mono",monospace; font-size:clamp(10px,1.4vw,13px); font-weight:700; letter-spacing:.2em;
  color:#04212a; background:linear-gradient(90deg,var(--cy),var(--cy-l)); padding:5px 13px; border-radius:6px;
  margin-bottom:.85em; opacity:0; transform:translateY(10px); text-transform:uppercase; }
.lvid__scene.on .lvid__eyebrow{ animation:lvUp .6s .05s ease forwards; }
.lvid__big{ font-weight:800; line-height:1.18; letter-spacing:.005em; font-size:clamp(24px,4.6vw,52px);
  text-shadow:0 3px 24px rgba(0,0,0,.5); max-width:13em; opacity:0; transform:translateY(16px); word-break:auto-phrase; }
.lvid__scene.on .lvid__big{ animation:lvUp .8s .2s ease forwards; }
.lvid__big .hot{ color:transparent; background:linear-gradient(90deg,var(--cy),var(--cy-l)); -webkit-background-clip:text; background-clip:text; }
.lvid__sub{ margin-top:.7em; font-size:clamp(13px,1.8vw,19px); color:var(--sub); line-height:1.7; max-width:24em;
  opacity:0; transform:translateY(14px); }
.lvid__scene.on .lvid__sub{ animation:lvUp .8s .42s ease forwards; }
@keyframes lvUp{ to{opacity:1;transform:none;} }

/* 数字バッジ列 */
.lvid__nums{ display:flex; gap:clamp(12px,3vw,28px); margin-top:1em; flex-wrap:wrap; }
.lvid__num{ opacity:0; transform:translateY(16px); }
.lvid__scene.on .lvid__num{ animation:lvUp .6s ease forwards; }
.lvid__scene.on .lvid__num:nth-child(2){ animation-delay:.4s; }
.lvid__scene.on .lvid__num:nth-child(3){ animation-delay:.8s; }
.lvid__num b{ display:block; font-size:clamp(24px,5vw,52px); font-weight:800; line-height:1; color:var(--paper); }
.lvid__num b .hot{ color:var(--cy-l); }
.lvid__num span{ font-size:clamp(11px,1.4vw,14px); color:var(--muted); letter-spacing:.04em; }

/* 特徴リスト */
.lvid__list{ display:flex; flex-direction:column; gap:clamp(7px,1.4vw,12px); margin-top:.5em; }
.lvid__li{ display:flex; align-items:center; gap:13px; font-size:clamp(14px,2vw,22px); font-weight:700;
  opacity:0; transform:translateX(-16px); }
.lvid__li i{ flex:0 0 auto; width:1.5em; height:1.5em; border-radius:7px; display:grid; place-items:center;
  font-style:normal; font-size:.66em; font-weight:800; color:#04212a; background:linear-gradient(135deg,var(--cy),var(--cy-l)); }
.lvid__scene.on .lvid__li{ animation:lvIn .55s ease forwards; }
.lvid__scene.on .lvid__li:nth-child(1){animation-delay:.3s;}
.lvid__scene.on .lvid__li:nth-child(2){animation-delay:.55s;}
.lvid__scene.on .lvid__li:nth-child(3){animation-delay:.8s;}
.lvid__scene.on .lvid__li:nth-child(4){animation-delay:1.05s;}
@keyframes lvIn{ to{opacity:1;transform:none;} }

/* フロー（5ステップ） */
.lvid__flow{ display:flex; align-items:center; gap:clamp(6px,1.4vw,14px); margin-top:.8em; flex-wrap:wrap; }
.lvid__step{ display:flex; flex-direction:column; gap:3px; opacity:0; transform:translateY(14px); }
.lvid__scene.on .lvid__step{ animation:lvUp .55s ease forwards; }
.lvid__scene.on .lvid__step:nth-child(3){animation-delay:.3s;} .lvid__scene.on .lvid__step:nth-child(5){animation-delay:.6s;}
.lvid__scene.on .lvid__step:nth-child(7){animation-delay:.9s;} .lvid__scene.on .lvid__step:nth-child(9){animation-delay:1.2s;}
.lvid__step b{ font-size:clamp(13px,2vw,22px); font-weight:800; }
.lvid__step span{ font-size:clamp(9px,1.2vw,12px); color:var(--cy-l); font-weight:700; letter-spacing:.08em; font-family:"JetBrains Mono",monospace; }
.lvid__arrow{ color:var(--cy); font-size:clamp(16px,2.6vw,26px); opacity:.7; }

/* CTA ボタン（ページの相談ボタン同様オレンジで温かみのアクセント） */
.lvid__cta-btn{ margin-top:1em; align-self:flex-start; display:inline-flex; align-items:center; gap:10px;
  font-size:clamp(15px,2.1vw,21px); font-weight:800; color:#fff; text-decoration:none;
  background:linear-gradient(90deg,var(--or),var(--or2)); padding:13px 26px; border-radius:999px;
  box-shadow:0 14px 30px -8px rgba(232,93,58,.6); opacity:0; transform:translateY(14px); }
.lvid__scene.on .lvid__cta-btn{ animation:lvUp .7s .5s ease forwards, lvPulse 2s 1.3s ease-in-out infinite; }
@keyframes lvPulse{ 0%,100%{box-shadow:0 14px 30px -8px rgba(232,93,58,.6);} 50%{box-shadow:0 14px 44px -6px rgba(232,93,58,.95);} }
.lvid__disc{ position:absolute; left:0; right:0; bottom:42px; padding:0 clamp(22px,6%,54px); z-index:3;
  font-size:10px; color:rgba(255,255,255,.5); letter-spacing:.02em; line-height:1.5; }
@media (max-width:680px){
  .lvid__scene{ justify-content:flex-end; padding:0 8% 18%; text-align:center; }
  .lvid__eyebrow,.lvid__cta-btn{ align-self:center; }
  .lvid__big{ max-width:none; font-size:clamp(25px,6.6vw,40px); }
  .lvid__nums,.lvid__flow,.lvid__list{ justify-content:center; align-items:center; }
  .lvid__list{ align-self:center; }
  .lvid__disc{ bottom:58px; text-align:center; }
}

/* ポスター（再生前） */
.lvid__poster{ position:absolute; inset:0; z-index:10; cursor:pointer; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:clamp(22px,6%,54px); gap:6px;
  background:radial-gradient(120% 120% at 78% 8%, rgba(27,39,64,.55), rgba(10,14,26,.88)); transition:opacity .5s ease; }
.lvid__poster.hide{ opacity:0; pointer-events:none; }
.lvid__poster .pe{ font-family:"JetBrains Mono",monospace; font-size:clamp(11px,1.6vw,14px); font-weight:700; letter-spacing:.26em; color:var(--cy-l); text-transform:uppercase; }
.lvid__poster .pt{ font-size:clamp(26px,5.2vw,54px); font-weight:800; line-height:1.12; }
.lvid__poster .pt .hot{ color:transparent; background:linear-gradient(90deg,var(--cy),var(--cy-l)); -webkit-background-clip:text; background-clip:text; }
.lvid__play{ margin-top:16px; width:74px; height:74px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--cy),var(--cy-l)); box-shadow:0 16px 40px -10px rgba(6,182,212,.7);
  transition:transform .3s ease; }
.lvid__poster:hover .lvid__play{ transform:scale(1.08); }
.lvid__play svg{ margin-left:5px; fill:#04212a; }

/* コントロール */
.lvid__ctrl{ position:absolute; left:0; right:0; bottom:0; z-index:7; display:flex; align-items:center; gap:12px;
  padding:11px clamp(14px,3.4%,26px) 13px; background:linear-gradient(0deg,rgba(10,14,26,.88),transparent);
  opacity:0; transition:opacity .4s ease; }
.lvid.playing .lvid__ctrl, .lvid.ended .lvid__ctrl{ opacity:1; }
.lvid__ctrl button{ background:none; border:none; cursor:pointer; color:var(--muted); display:flex; padding:4px; transition:color .2s; }
.lvid__ctrl button:hover{ color:#fff; }
.lvid__bar{ flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,.18); overflow:hidden; cursor:pointer; touch-action:none; }
.lvid__bar:hover{ height:7px; }
.lvid__bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--cy),var(--cy-l)); }
.lvid__time{ font-variant-numeric:tabular-nums; font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--muted); min-width:74px; text-align:right; }

.lvid__replay{ position:absolute; inset:0; z-index:9; display:none; flex-direction:column; align-items:center;
  justify-content:center; gap:12px; background:rgba(10,14,26,.66); cursor:pointer; }
.lvid.ended .lvid__replay{ display:flex; }
.lvid__replay span{ font-weight:700; letter-spacing:.14em; }

.lvid__credit{ margin:10px 2px 0; text-align:right; font-size:11px; color:#9aa0ad; opacity:.85; }

/* シェア完了トースト */
.lvid__toast{ position:absolute; left:50%; bottom:60px; transform:translateX(-50%) translateY(10px); z-index:13;
  background:rgba(10,14,26,.94); color:#e8eef7; border:1px solid rgba(34,211,238,.45);
  font-size:12px; font-weight:700; padding:9px 16px; border-radius:999px; white-space:nowrap;
  opacity:0; transition:opacity .35s ease, transform .35s ease; pointer-events:none; box-shadow:0 12px 30px -10px rgba(0,0,0,.6); }
.lvid__toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }

/* タップで携帯全画面（縦フル・iOS Safari でも動く擬似フルスクリーン） */
.lvid{ cursor:zoom-in; }
.lvid.is-fs{ cursor:default; }
.lvid__fshint{ position:absolute; top:12px; left:12px; z-index:8; display:inline-flex; align-items:center; gap:6px;
  background:rgba(0,0,0,.45); color:#fff; font-size:11px; font-weight:700; letter-spacing:.04em;
  padding:6px 11px; border-radius:999px; pointer-events:none; opacity:0; transition:opacity .4s ease; }
.lvid.playing .lvid__fshint{ opacity:.92; }
.lvid.is-fs .lvid__fshint{ display:none; }
.lvid__fshint svg{ width:13px; height:13px; }
.lvid.is-fs{ position:fixed !important; top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
  width:100vw !important; height:100vh !important; height:100dvh !important;
  max-width:none !important; border-radius:0 !important; aspect-ratio:auto !important; z-index:99999 !important; }
html.lvid-fs-lock, body.lvid-fs-lock{ overflow:hidden !important; }
.lvid__fsclose{ position:absolute; top:14px; right:14px; z-index:12; width:42px; height:42px; border-radius:50%;
  background:rgba(0,0,0,.5); color:#fff; border:none; cursor:pointer; align-items:center; justify-content:center; display:none; }
.lvid.is-fs .lvid__fsclose{ display:flex; }
.lvid__fsclose svg{ width:20px; height:20px; }

@media (prefers-reduced-motion: reduce){
  .lvid__glow,.lvid__viz,.lv-spark,.lv-pulse,.lv-blink,.lv-dash,.lv-float,.lv-orbit,.lv-typ,.lv-travel,.lvid__fx .fx-d,.lvid__viz.in svg,.lvid__viz.in img{ animation:none!important; transition:opacity .3s!important; }
  .lv-draw{ animation:none!important; stroke-dashoffset:0!important; }
  .lvid__scene,.lvid__eyebrow,.lvid__big,.lvid__sub,.lvid__num,.lvid__li,.lvid__step,.lvid__cta-btn{
    animation:none!important; opacity:1!important; transform:none!important; }
}