/* ============================================================
   lphp.jp トップ改装・ヒーロー案B（v2：スマホ基準）
   文字は「ラベル・見出し2行・ボタン1つ」だけ。品質は端末と動きで見せる
   配色は既存トークン（--accent #1B4FE8 / --ink / --bg-soft）をそのまま使う
   ============================================================ */
.heroB{padding:0;position:relative;overflow:clip}
/* sticky メニュー（65px）の下にちょうど収まる高さ */
.heroB .hb-pin{position:relative;height:calc(100vh - 65px);height:calc(100svh - 65px);min-height:560px;display:flex;flex-direction:column;overflow:hidden}
.hb-bg{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(70vw 60vw at 62% 42%,rgba(27,79,232,.17),rgba(27,79,232,0) 70%),
    radial-gradient(40vw 34vw at 12% 90%,rgba(27,79,232,.07),rgba(27,79,232,0) 70%),
    linear-gradient(180deg,#fff 0%,#F4F6FB 100%)}
.hb-bg::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(10,10,10,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(10,10,10,.045) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(70% 60% at 60% 42%,#000 0%,transparent 75%);mask-image:radial-gradient(70% 60% at 60% 42%,#000 0%,transparent 75%)}

/* ---- 端末ステージ（スマホでは上の大部分） ---- */
.hb-stage{position:relative;flex:1 1 auto;min-height:0;container-type:size;touch-action:pan-y;z-index:2}
.hb-tilt{position:absolute;inset:0;will-change:transform}
/* .dev＝GSAPが動かす箱（左上の点＝見た目の中心）／.dev-c＝中央寄せ専用（GSAPは触らない） */
.dev{position:absolute;left:var(--x);top:var(--y);transform-origin:0 0;will-change:transform;pointer-events:none}
.dev-c{position:relative;transform:translate(-50%,-50%);animation:hbRise 1.2s cubic-bezier(.16,1,.3,1) both}
@keyframes hbRise{from{opacity:0;transform:translate(-50%,-50%) translateY(56px) scale(.93)}to{opacity:1;transform:translate(-50%,-50%)}}
.dev-par{will-change:transform}
.dev-desk{--x:44%;--y:37%;width:min(80vw,74cqh);z-index:2}
.dev-desk .dev-c{animation-delay:.1s}
.dev-phone{--x:76%;--y:57%;width:min(38vw,26cqh);z-index:4}
.dev-phone .dev-c{animation-delay:.32s}
.dev-lap,.dev-phone2,.hb-caption,.hb-scroll,.dev-tag{display:none}
.hb-float{position:relative;animation:hbFloat 7s ease-in-out infinite alternate}
.dev-phone .hb-float{animation-duration:5.6s;animation-delay:-2s}
.dev-lap .hb-float{animation-duration:6.4s;animation-delay:-1s}
.dev-phone2 .hb-float{animation-duration:5.2s;animation-delay:-3s}
@keyframes hbFloat{from{transform:translateY(-6px)}to{transform:translateY(6px)}}

/* 画面（中の実例は縦長の画像を1画面ずつ送る） */
.scr{position:relative;overflow:hidden;background:#0b0b0c}
.scr .strip{position:absolute;left:0;top:0;width:100%;height:auto;display:block;opacity:0;
  transition:transform 1.15s cubic-bezier(.65,0,.35,1),opacity .7s ease}
.scr .strip.on{opacity:1}
.scr .strip.back{transition:transform 1.5s cubic-bezier(.65,0,.35,1),opacity .7s ease}
.glare{position:absolute;inset:0;pointer-events:none;z-index:5;
  background:linear-gradient(118deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.04) 16%,rgba(255,255,255,0) 36%)}
/* 電源が入るように点灯する */
.scr .power{position:absolute;inset:0;z-index:4;pointer-events:none;background:#0b0b0c;animation:hbPower 1.1s ease both}
.dev-desk .power{animation-delay:.95s}
.dev-phone .power{animation-delay:1.2s}
@keyframes hbPower{0%{opacity:1;background:#0b0b0c}38%{opacity:1;background:#dfe7ff}100%{opacity:0;background:#fff}}

/* モニター（ロゴなし） */
.mon__body{border-radius:14px;padding:2px;background:linear-gradient(150deg,#fbfcfd 0%,#cfd3d8 38%,#aeb3ba 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 40px 70px -30px rgba(10,22,64,.45),0 14px 26px -20px rgba(10,22,64,.4)}
.mon__panel{border-radius:12px;background:#161618;padding:7px 7px 0}
.mon__screen{aspect-ratio:16/10;border-radius:4px}
.mon__chin{height:0;padding:2.4% 0;background:#161618;border-radius:0 0 12px 12px}
.mon__neck{width:24%;margin:0 auto;height:0;padding-bottom:5.6%;background:linear-gradient(180deg,#e6e8ea,#c2c6cc 60%,#a9aeb5);
  box-shadow:inset 6px 0 8px -6px rgba(0,0,0,.25),inset -6px 0 8px -6px rgba(0,0,0,.25)}
.mon__foot{width:40%;margin:0 auto;height:0;padding-bottom:3.2%;background:linear-gradient(180deg,#d2d6da,#aab0b7);border-radius:6px 6px 13px 13px;
  box-shadow:0 22px 30px -18px rgba(10,22,64,.5)}
/* スマホ */
.ph{border-radius:15%/7.2%;padding:4.5%;background:linear-gradient(160deg,#3a3a3d,#1a1a1c 55%,#28282b);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 40px 60px -24px rgba(10,22,64,.6),0 12px 20px -14px rgba(10,22,64,.5)}
.ph__screen{aspect-ratio:390/844;border-radius:12%/5.6%;container-type:inline-size}
.ph__island{position:absolute;z-index:6;top:2.2%;left:50%;transform:translateX(-50%);width:32%;height:3.6%;background:#000;border-radius:999px}
/* ノートPC */
.lap__lid{border-radius:14px 14px 4px 4px;padding:2.2% 2.2% 3%;background:#18181b;box-shadow:0 0 0 1.5px #bfc3c9 inset}
.lap__screen{aspect-ratio:16/10;border-radius:3px}
.lap__base{position:relative;height:0;padding-bottom:3.4%;margin:0 -7%;border-radius:0 0 16px 16px;background:linear-gradient(180deg,#e2e5e8,#b8bdc3);
  box-shadow:0 26px 34px -20px rgba(10,22,64,.5)}
.lap__base::before{content:"";position:absolute;left:42%;right:42%;top:0;height:34%;border-radius:0 0 8px 8px;background:#a9aeb5}

/* ================= 文字以外の要素（部品） ================= */
/* 部品カードの共通：すりガラス。位置はGSAPが動かす .chip、出現と浮遊は .chip-in */
.hb-deco{position:absolute;inset:0;z-index:5;pointer-events:none}
.chip{position:absolute;left:var(--x);top:var(--y)}
.chip-in{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 18px 40px -18px rgba(10,22,64,.35),0 2px 6px -2px rgba(10,22,64,.12);
  animation:hbPop .7s cubic-bezier(.34,1.56,.64,1) both,hbFloat 6s ease-in-out infinite alternate}
@keyframes hbPop{from{opacity:0;transform:translateY(14px) scale(.6)}to{opacity:1;transform:none}}
.chip-pal{--x:3%;--y:4%}
.chip-pal .chip-in{animation-delay:1.7s,-1s}
.chip-speed{--x:5%;--y:66%}
.chip-speed .chip-in{animation-delay:1.9s,-3s;padding:7px 12px 7px 7px}
.chip-resp{--x:auto;--y:3%;right:3%;left:auto}
.chip-resp .chip-in{animation-delay:2.1s,-2s;gap:7px;padding:9px 11px}
/* カラーパレット（いまの実例の配色に変わる） */
.chip-pal .sw{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:background-color .8s ease}
.chip-pal .sw:nth-child(1){background:var(--c1,#0b1224)}
.chip-pal .sw:nth-child(2){background:var(--c2,#2f6bff);margin-left:-9px}
.chip-pal .sw:nth-child(3){background:var(--c3,#eef2fb);margin-left:-9px}
.chip-pal .aa{font-family:"Inter",sans-serif;font-weight:800;font-size:13px;letter-spacing:-.02em;color:var(--ink);margin-left:4px}
/* 表示速度のゲージ */
.chip-speed svg{width:30px;height:30px;transform:rotate(-90deg)}
.chip-speed circle{fill:none;stroke-width:4}
.chip-speed .bg{stroke:rgba(10,10,10,.08)}
.chip-speed .fg{stroke:#12B76A;stroke-linecap:round;stroke-dasharray:100.5;stroke-dashoffset:100.5;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1)}
.chip-speed.go .fg{stroke-dashoffset:2}
.chip-speed .num{font-family:"Inter",sans-serif;font-weight:800;font-size:17px;letter-spacing:-.03em;color:#0a7d3b;min-width:22px}
/* スマホ対応のアイコン（順番に光る） */
.chip-resp i{display:block;border:1.8px solid #A9B1C2;border-radius:2px;animation:hbResp 3.6s steps(1) infinite}
.chip-resp .d1{width:17px;height:12px}
.chip-resp .d2{width:10px;height:13px;animation-delay:1.2s}
.chip-resp .d3{width:7px;height:12px;border-radius:2px;animation-delay:2.4s}
@keyframes hbResp{0%{border-color:var(--accent);background:rgba(27,79,232,.15)}33.33%,100%{border-color:#A9B1C2;background:transparent}}

/* デザインツールの選択枠（スマホの周り） */
.sel{position:absolute;inset:-7px;border:1.5px solid var(--accent);border-radius:6px;pointer-events:none;z-index:7;
  clip-path:inset(50% 50% 50% 50%);animation:hbDraw .8s cubic-bezier(.65,0,.35,1) 2.3s both}
@keyframes hbDraw{to{clip-path:inset(-20px -20px -40px -20px)}}
.sel i{position:absolute;width:7px;height:7px;background:#fff;border:1.5px solid var(--accent);border-radius:1px}
.sel i:nth-child(1){left:-4px;top:-4px}.sel i:nth-child(2){right:-4px;top:-4px}
.sel i:nth-child(3){left:-4px;bottom:-4px}.sel i:nth-child(4){right:-4px;bottom:-4px}
.sel-size{position:absolute;left:50%;top:calc(100% + 8px);translate:-50% 0;white-space:nowrap;font-family:"Inter",sans-serif;font-size:10px;font-weight:700;
  color:#fff;background:var(--accent);padding:3px 7px;border-radius:5px;letter-spacing:.02em}

/* 端末エリアが低い画面（iPhone SEなど）ではサイズ表示を出さない */
@container (max-height:430px){.sel-size{display:none}}

/* モニター上を動くカーソル */
.cursor{position:absolute;left:56%;top:44%;width:0;height:0;z-index:8;pointer-events:none}
.cursor svg{position:absolute;left:-3px;top:-2px;width:22px;height:22px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.35));opacity:0;animation:hbFadeIn .5s ease 2.6s both}
@keyframes hbFadeIn{to{opacity:1}}
.cursor .ripple{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;border:2px solid rgba(27,79,232,.9);opacity:0;transform:scale(.3)}
.cursor.click .ripple{animation:hbRipple .6s ease-out}
@keyframes hbRipple{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(1.5)}}

/* スマホ画面に降りてくる通知 */
.toast{position:absolute;left:5%;right:5%;top:6%;z-index:6;display:flex;align-items:center;gap:6%;padding:5% 6%;border-radius:12px;
  background:rgba(245,247,252,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 20px -8px rgba(0,0,0,.4);
  transform:translateY(-140%);opacity:0;transition:transform .6s cubic-bezier(.34,1.3,.64,1),opacity .4s ease}
.toast.show{transform:none;opacity:1}
.t-ic{flex:0 0 auto;width:13%;aspect-ratio:1;border-radius:24%;background:var(--accent);color:#fff;display:grid;place-items:center}
.t-ic svg{width:62%;height:62%}
.t-tx{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.t-tx b{font-size:6.8cqw;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-tx small{font-size:5.4cqw;color:var(--muted)}

/* 背景でゆっくり動く光 */
.hb-bg::before{content:"";position:absolute;width:60vw;height:60vw;max-width:700px;max-height:700px;left:58%;top:10%;border-radius:50%;
  background:radial-gradient(circle,rgba(27,79,232,.16),rgba(27,79,232,0) 65%);filter:blur(10px);animation:hbOrb 14s ease-in-out infinite alternate}
@keyframes hbOrb{from{transform:translate(-50%,0) scale(1)}to{transform:translate(-62%,12%) scale(1.15)}}

/* ---- ストーリーズ風の進行バー＋いまの実例 ---- */
.hb-works{position:absolute;left:50%;bottom:6px;translate:-50% 0;z-index:6;width:min(80vw,380px);display:flex;flex-direction:column;align-items:center;gap:6px}
/* 表示アニメは子要素に（親の opacity はスクロール演出が動かすため、CSSアニメで上書きしない） */
.hb-works > *{opacity:0;animation:hbFade .8s ease 1.4s both}
@keyframes hbFade{to{opacity:1}}
.hb-bars{display:flex;gap:5px;width:100%}
.hb-bars button{flex:1;position:relative;height:18px;padding:0;border:0;background:none;cursor:pointer}
.hb-bars button::before{content:"";position:absolute;left:0;right:0;top:8px;height:2.5px;border-radius:3px;background:rgba(10,10,10,.13)}
.hb-bars i{position:absolute;left:0;top:8px;height:2.5px;width:0;border-radius:3px;background:var(--accent)}
.hb-wlink{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--ink);letter-spacing:.02em}
.hb-wlink .go{font-weight:600;color:var(--muted)}
.hb-wlink .wn{transition:opacity .3s ease}
.hb-wlink.is-swap .wn{opacity:0}

/* 端末の下の名札（PCのギャラリー時に出る） */
.dev-tag{position:absolute;left:50%;top:calc(100% + 14px);translate:-50% 0;white-space:nowrap;
  font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--ink-2);background:#fff;border:1px solid var(--line-2);
  padding:6px 12px;border-radius:999px;box-shadow:0 10px 24px -14px rgba(10,22,64,.35);opacity:0;pointer-events:auto}

/* ---- コピー（スマホでは下に最小限） ---- */
.hb-inner{position:relative;z-index:3;flex:0 0 auto}
.heroB .hb-inner.container-wide{padding:0 22px}
.hb-copy{padding:10px 0 20px}
.heroB .hb-copy h1{font-family:"Noto Sans JP","Inter",sans-serif;font-weight:800;font-size:clamp(30px,9.2vw,46px);line-height:1.16;
  letter-spacing:-.01em;font-feature-settings:"palt" 1;color:var(--ink);max-width:none}
.heroB .hb-copy h1 .line-wrap{padding-bottom:.08em}
.heroB .hb-copy h1 .line-wrap:nth-child(3) .line-inner{transition-delay:.18s}
.heroB .hb-copy h1 .en{font-family:"Inter",sans-serif;letter-spacing:-.035em;margin-right:.04em}
.heroB .hb-copy h1 .mk{position:relative;display:inline-block;z-index:0}
.heroB .hb-copy h1 .mk::after{content:"";position:absolute;left:-.04em;right:-.04em;bottom:.1em;height:.28em;z-index:-1;border-radius:2px;
  background:rgba(27,79,232,.22);transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.65,0,.35,1) 1.2s}
.heroB .hb-copy h1.in .mk::after{transform:scaleX(1)}
.heroB .hb-copy h1 .h1-lead{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;padding:6px 13px 6px 11px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.06em;line-height:1.3;color:var(--accent);
  background:rgba(27,79,232,.06);border:1px solid rgba(27,79,232,.18)}
.heroB .hb-copy h1 .h1-lead .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(27,79,232,.14)}
.hb-ctas{display:flex;align-items:center;gap:26px;margin-top:16px}
.hb-cta-main{width:100%;justify-content:center;padding:17px 26px;font-size:15px;box-shadow:0 18px 36px -18px rgba(27,79,232,.75)}
.hb-cta-main:active{transform:scale(.98)}
.hb-cta-sub{display:none;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--ink);padding:6px 0;position:relative}
.hb-cta-sub::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--ink);transform-origin:right;transition:transform .35s ease}
.hb-cta-sub:hover::after{transform:scaleX(0)}
.hb-cta-sub:hover .btn-arrow{transform:translateX(3px)}

.heroB .stat-row{margin-top:0}

/* 試作バッジ */
.proto-badge{position:fixed;left:50%;translate:-50% 0;top:72px;z-index:999;display:flex;gap:8px;align-items:center;font-size:11px;font-weight:600;
  background:var(--ink);color:#fff;border-radius:999px;padding:6px 6px 6px 12px;box-shadow:0 12px 30px -14px rgba(0,0,0,.5)}
.proto-badge a{background:#fff;color:var(--ink);border-radius:999px;padding:4px 9px;white-space:nowrap}

/* ギャラリーの見出し（PC） */
.hb-caption{position:absolute;left:0;right:0;top:7%;margin:0 auto;text-align:center;opacity:0;z-index:6;width:min(92vw,900px)}
.hb-caption .eyebrow{justify-content:center;display:inline-flex;align-items:center}
.hb-cap-title{margin-top:14px;font-family:"Inter","Noto Sans JP",sans-serif;font-weight:800;font-size:clamp(28px,3.2vw,50px);line-height:1.12;letter-spacing:-.035em;color:var(--ink)}
.hb-cap-title em{font-style:normal;color:var(--accent)}
/* スクロールの合図（PC） */
.hb-scroll{position:absolute;left:32px;bottom:26px;z-index:6;color:var(--muted);font-family:"Inter",sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.28em}
.hb-scroll span{vertical-align:middle}
.hb-scroll i{display:inline-block;vertical-align:middle;margin-left:12px;width:54px;height:1px;background:var(--line);position:relative;overflow:hidden}
.hb-scroll i::after{content:"";position:absolute;inset:0;background:var(--ink);transform:translateX(-100%);animation:hbLine 1.8s ease-in-out infinite}
@keyframes hbLine{to{transform:translateX(100%)}}

/* ============ PC（901px〜）：左に見出し、右に端末。スクロールで4台のギャラリーへ ============ */
@media (min-width:901px){
  .heroB .hb-pin{display:block;min-height:600px}
  .hb-stage{position:absolute;inset:0}
  .dev-desk{--x:66%;--y:50%;width:min(46vw,740px)}
  .dev-phone{--x:88%;--y:61%;width:min(11vw,178px)}
  .dev-lap{display:block;--x:20%;--y:135%;width:min(33vw,520px);opacity:0}
  .dev-phone2{display:block;--x:112%;--y:66%;width:min(9.6vw,152px);opacity:0}
  .hb-caption,.hb-scroll,.dev-tag{display:block}
  .mon__body{border-radius:20px;padding:3px}.mon__panel{border-radius:17px;padding:12px 12px 0}.mon__chin{border-radius:0 0 17px 17px}
  .hb-works{left:66%;bottom:24px;width:min(30vw,420px)}
  .hb-inner{position:absolute;inset:0;display:flex;align-items:center;pointer-events:none}
  .heroB .hb-inner.container-wide{padding:0 32px}
  .hb-copy{width:min(41%,620px);padding:0;pointer-events:auto}
  .heroB .hb-copy h1{font-size:clamp(40px,4.2vw,76px)}
  .heroB .hb-copy h1 .line-inner{white-space:nowrap}
  .heroB .hb-copy h1 .h1-lead{font-size:13px;margin-bottom:24px}
  .hb-ctas{margin-top:34px}
  .hb-cta-main{width:auto;padding:17px 30px}
  .hb-cta-sub{display:inline-flex}
  .proto-badge{top:76px;left:auto;right:14px;translate:none;font-size:12px}
  .chip-pal{--x:44%;--y:17%}
  .chip-speed{--x:45%;--y:72%}
  .chip-resp{--y:22%;right:5%}
  .chip-in{padding:10px 13px;border-radius:16px}
  .chip-pal .sw{width:22px;height:22px}
  .chip-pal .aa{font-size:15px}
  .chip-speed svg{width:36px;height:36px}
  .chip-speed .num{font-size:20px}
  .sel{inset:-9px}
  .sel-size{font-size:11px}
  .cursor svg{width:26px;height:26px}

}

@media (prefers-reduced-motion:reduce){
  .hb-float,.hb-scroll i::after,.dev-c,.scr .power,.hb-works > *,.chip-in,.chip-resp i,.hb-bg::before{animation:none}
  .sel{animation:none;clip-path:none}
  .cursor,.toast{display:none}
  .scr .power{display:none}
  .hb-works > *{opacity:1}
  .scr .strip{transition:none}
}