/* ============================================================
   sns/video.css —「1分でわかる hakuto LIVE のこと」
   切り抜き画像を主役にしたモーション動画。もち子さんナレーション同期。
   ============================================================ */
#hl-1min{
  --red:#fe2c55; --orange:#ff7a4d; --peach:#ffe2cc; --dark:#14161b; --dark2:#1a1d24;
  --paper:#ffffff; --muted:#b9bdc7;
  max-width:1080px; margin:48px auto; padding:0 24px;
}
.hlv{
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  border-radius:20px; background:radial-gradient(120% 120% at 80% 10%, #2a2030, #14161b 60%);
  box-shadow:0 30px 70px -30px rgba(254,44,85,.4), 0 30px 70px -34px rgba(0,0,0,.6);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif; color:var(--paper);
  -webkit-font-smoothing:antialiased; isolation:isolate;
}
@media (max-width:640px){ .hlv{ aspect-ratio:4/5; border-radius:15px; } #hl-1min{ padding:0 14px; margin:30px auto; } }

/* 動く背景 */
.hlv__glow{ position:absolute; inset:-20%; pointer-events:none;
  background:radial-gradient(40% 40% at 25% 30%, rgba(254,44,85,.35), transparent 70%),
             radial-gradient(45% 45% at 80% 75%, rgba(255,122,77,.28), transparent 70%);
  animation:hlGlow 12s ease-in-out infinite alternate; }
@keyframes hlGlow{ from{transform:translate(-3%,-2%) scale(1.05);} to{transform:translate(4%,3%) scale(1.18);} }
.hlv__grid{ position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:44px 44px; -webkit-mask:radial-gradient(70% 70% at 50% 50%,#000,transparent); mask:radial-gradient(70% 70% at 50% 50%,#000,transparent); }

/* SVG ビジュアルレイヤー（主役・切り抜き写真は不使用） */
.hlv__people{ position:absolute; inset:0; pointer-events:none; z-index:2; }
/* PC：ビジュアルは右 38% に収め、テキストは左へ（文字と重ねない） */
.hlv__viz{ position:absolute; right:4%; top:50%; width:38%; max-height:82%; 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); }
.hlv__viz.in{ opacity:1; transform:translate(0,-50%) scale(1); }
.hlv__viz svg, .hlv__viz img{ width:100%; height:auto; max-height:100%; overflow:visible; display:block; }
.hlv__viz--phone{ width:24%; }                 /* 縦長スマホは細く */
.hlv__viz--hearts,.hlv__viz--cta{ width:40%; }
@media (max-width:640px){
  /* ショート：ビジュアルは上、テキストは下 */
  .hlv__viz{ right:50%; top:6%; bottom:auto; width:auto; height:36%; max-height:none;
    transform:translate(50%,-16px) scale(.96); opacity:0; }
  .hlv__viz.in{ transform:translate(50%,0) scale(1); opacity:1; }
  .hlv__viz svg, .hlv__viz img{ width:auto; height:100%; max-width:62vw; max-height:none; }
  .hlv__viz--phone{ height:46%; }
}

/* SVG 内モーション：ハート上昇・LIVE 点滅・きらめき・ノード明滅 */
.hlv-heart{ transform-box:fill-box; transform-origin:center; animation:hlHeartUp 3.2s ease-in-out infinite; }
.hlv-heart--2{ animation-duration:3.8s; animation-delay:.7s; }
.hlv-heart--3{ animation-duration:2.8s; animation-delay:1.3s; }
@keyframes hlHeartUp{ 0%{transform:translateY(6px) scale(.9); opacity:0;} 18%{opacity:.95;} 100%{transform:translateY(-30px) scale(1.05); opacity:0;} }
.hlv-blink{ animation:hlBlink 1.3s steps(1) infinite; }
@keyframes hlBlink{ 0%,55%{opacity:1;} 56%,100%{opacity:.25;} }
.hlv-spark{ transform-box:fill-box; transform-origin:center; animation:hlSpark 2.4s ease-in-out infinite; }
@keyframes hlSpark{ 0%,100%{opacity:.35; transform:scale(.7);} 50%{opacity:1; transform:scale(1.15);} }
.hlv-pulse{ transform-box:fill-box; transform-origin:center; animation:hlNode 2.6s ease-in-out infinite; }
@keyframes hlNode{ 0%,100%{opacity:.72;} 50%{opacity:1;} }

/* シーン（テキスト） */
.hlv__scene{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(20px,6%,52px); padding-right:45%; opacity:0; visibility:hidden; transition:opacity .55s ease; overflow:hidden; }
.hlv__scene.on{ opacity:1; visibility:visible; }
@media (max-width:640px){
  .hlv__scene{ justify-content:flex-end; padding:0 8% 15%; text-align:center; }
  .hlv__scene .hlv__eyebrow{ align-self:center; }
  .hlv__scene .hlv__big{ max-width:none; }
  .hlv__nums,.hlv__flow,.hlv__list{ justify-content:center; align-items:center; }
  .hlv__cta-btn{ align-self:center; }
  .hlv__disc{ bottom:56px; text-align:center; }
}
.hlv__eyebrow{ display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
  font-size:clamp(11px,1.5vw,14px); font-weight:700; letter-spacing:.18em;
  color:#0d0f14; background:linear-gradient(90deg,var(--red),var(--orange)); padding:5px 13px; border-radius:999px;
  margin-bottom:.8em; opacity:0; transform:translateY(10px); }
.hlv__scene.on .hlv__eyebrow{ animation:hlUp .6s .05s ease forwards; }
.hlv__big{ font-weight:800; line-height:1.16; letter-spacing:.005em; font-size:clamp(24px,5vw,56px);
  text-shadow:0 3px 24px rgba(0,0,0,.5); max-width:13em; opacity:0; transform:translateY(16px); word-break:auto-phrase; }
.hlv__scene.on .hlv__big{ animation:hlUp .8s .2s ease forwards; }
.hlv__big .hot{ color:transparent; background:linear-gradient(90deg,var(--red),var(--orange)); -webkit-background-clip:text; background-clip:text; }
.hlv__sub{ margin-top:.7em; font-size:clamp(13px,1.9vw,20px); color:var(--peach); line-height:1.7; max-width:24em;
  opacity:0; transform:translateY(14px); }
.hlv__scene.on .hlv__sub{ animation:hlUp .8s .42s ease forwards; }
@keyframes hlUp{ to{opacity:1;transform:none;} }

/* 数字バッジ列（壁・条件） */
.hlv__nums{ display:flex; gap:clamp(12px,3vw,30px); margin-top:1em; flex-wrap:wrap; }
.hlv__num{ opacity:0; transform:translateY(16px); }
.hlv__scene.on .hlv__num{ animation:hlUp .6s ease forwards; }
.hlv__scene.on .hlv__num:nth-child(2){ animation-delay:.5s; }
.hlv__num b{ display:block; font-size:clamp(28px,6vw,64px); font-weight:800; line-height:1; color:var(--paper); }
.hlv__num b .hot{ color:var(--orange); }
.hlv__num span{ font-size:clamp(11px,1.5vw,15px); color:var(--muted); letter-spacing:.04em; }

/* 特徴・ステップのリスト */
.hlv__list{ display:flex; flex-direction:column; gap:clamp(7px,1.5vw,13px); margin-top:.5em; }
.hlv__li{ display:flex; align-items:center; gap:13px; font-size:clamp(14px,2.1vw,23px); font-weight:700;
  opacity:0; transform:translateX(-16px); }
.hlv__li i{ flex:0 0 auto; width:1.7em; height:1.7em; border-radius:50%; display:grid; place-items:center;
  font-style:normal; font-size:.62em; font-weight:800; color:#0d0f14; background:linear-gradient(135deg,var(--red),var(--orange)); }
.hlv__scene.on .hlv__li{ animation:hlIn .55s ease forwards; }
.hlv__scene.on .hlv__li:nth-child(1){animation-delay:.3s;}
.hlv__scene.on .hlv__li:nth-child(2){animation-delay:.6s;}
.hlv__scene.on .hlv__li:nth-child(3){animation-delay:.9s;}
.hlv__scene.on .hlv__li:nth-child(4){animation-delay:1.2s;}
@keyframes hlIn{ to{opacity:1;transform:none;} }

/* フロー（3ステップ） */
.hlv__flow{ display:flex; align-items:center; gap:clamp(8px,2vw,18px); margin-top:.8em; flex-wrap:wrap; }
.hlv__step{ display:flex; flex-direction:column; gap:3px; opacity:0; transform:translateY(14px); }
.hlv__scene.on .hlv__step{ animation:hlUp .55s ease forwards; }
.hlv__scene.on .hlv__step:nth-child(3){animation-delay:.4s;} .hlv__scene.on .hlv__step:nth-child(5){animation-delay:.8s;}
.hlv__step b{ font-size:clamp(15px,2.4vw,26px); font-weight:800; }
.hlv__step span{ font-size:clamp(10px,1.3vw,13px); color:var(--orange); font-weight:700; letter-spacing:.1em; }
.hlv__arrow{ color:var(--red); font-size:clamp(18px,3vw,30px); opacity:.7; }

/* CTA シーン */
.hlv__cta-btn{ margin-top:1em; align-self:flex-start; display:inline-flex; align-items:center; gap:10px;
  font-size:clamp(15px,2.2vw,22px); font-weight:800; color:#fff; text-decoration:none;
  background:linear-gradient(90deg,var(--red),var(--orange)); padding:13px 26px; border-radius:999px;
  box-shadow:0 14px 30px -8px rgba(254,44,85,.6); opacity:0; transform:translateY(14px); }
.hlv__scene.on .hlv__cta-btn{ animation:hlUp .7s .5s ease forwards, hlPulse 2s 1.3s ease-in-out infinite; }
@keyframes hlPulse{ 0%,100%{box-shadow:0 14px 30px -8px rgba(254,44,85,.6);} 50%{box-shadow:0 14px 44px -6px rgba(254,44,85,.95);} }
.hlv__disc{ position:absolute; left:0; right:0; bottom:42px; padding:0 clamp(20px,6%,52px); z-index:3;
  font-size:10px; color:rgba(255,255,255,.5); letter-spacing:.02em; line-height:1.5; }

/* ポスター（再生前） */
.hlv__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(20px,6%,52px); gap:6px;
  background:radial-gradient(120% 120% at 80% 10%, rgba(42,32,48,.5), rgba(20,22,27,.84)); transition:opacity .5s ease; }
.hlv__poster.hide{ opacity:0; pointer-events:none; }
.hlv__poster .pe{ font-size:clamp(11px,1.6vw,14px); font-weight:700; letter-spacing:.28em; color:var(--orange); }
.hlv__poster .pt{ font-size:clamp(26px,5.4vw,56px); font-weight:800; line-height:1.12; }
.hlv__poster .pt .hot{ color:transparent; background:linear-gradient(90deg,var(--red),var(--orange)); -webkit-background-clip:text; background-clip:text; }
.hlv__play{ margin-top:16px; width:74px; height:74px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--red),var(--orange)); box-shadow:0 16px 40px -10px rgba(254,44,85,.7);
  transition:transform .3s ease; }
.hlv__poster:hover .hlv__play{ transform:scale(1.08); }
.hlv__play svg{ margin-left:5px; fill:#fff; }

/* コントロール */
.hlv__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(20,22,27,.86),transparent);
  opacity:0; transition:opacity .4s ease; }
.hlv.playing .hlv__ctrl, .hlv.ended .hlv__ctrl{ opacity:1; }
.hlv__ctrl button{ background:none; border:none; cursor:pointer; color:var(--muted); display:flex; padding:4px; transition:color .2s; }
.hlv__ctrl button:hover{ color:#fff; }
.hlv__bar{ flex:1; height:3px; border-radius:3px; background:rgba(255,255,255,.16); overflow:hidden; }
.hlv__bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--red),var(--orange)); }
.hlv__time{ font-variant-numeric:tabular-nums; font-size:12px; color:var(--muted); min-width:72px; text-align:right; }

.hlv__replay{ position:absolute; inset:0; z-index:9; display:none; flex-direction:column; align-items:center;
  justify-content:center; gap:12px; background:rgba(20,22,27,.62); cursor:pointer; }
.hlv.ended .hlv__replay{ display:flex; }
.hlv__replay span{ font-weight:700; letter-spacing:.14em; }

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

/* シェア完了トースト */
.hlv__toast{ position:absolute; left:50%; bottom:60px; transform:translateX(-50%) translateY(10px); z-index:13;
  background:rgba(20,22,27,.94); color:#fff; border:1px solid rgba(254,44,85,.5);
  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); }
.hlv__toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }

/* タップで携帯全画面（縦フル） */
.hlv{ cursor:zoom-in; }
.hlv.is-fs{ cursor:default; }
.hlv__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; }
.hlv.playing .hlv__fshint{ opacity:.92; }
.hlv.is-fs .hlv__fshint{ display:none; }
.hlv__fshint svg{ width:13px; height:13px; }
/* 擬似フルスクリーン：端末画面いっぱい（iOS Safari でも確実に動く） */
.hlv.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; cursor:default; }
html.hlv-fs-lock, body.hlv-fs-lock{ overflow:hidden !important; }
.hlv__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; }
.hlv.is-fs .hlv__fsclose{ display:flex; }
.hlv__fsclose svg{ width:20px; height:20px; }

@media (prefers-reduced-motion: reduce){
  .hlv__glow,.hlv__viz,.hlv-heart,.hlv-blink,.hlv-spark,.hlv-pulse{ animation:none!important; transition:opacity .3s!important; }
  .hlv__scene,.hlv__eyebrow,.hlv__big,.hlv__sub,.hlv__num,.hlv__li,.hlv__step,.hlv__cta-btn{
    animation:none!important; opacity:1!important; transform:none!important; }
}