/* ============================================================
   株式会社next — Design System『Blueprint』
   ほぼモノクロの薄青 / 設計図メタファー / accent は5%以下
   ============================================================ */

:root{
  --bg:      #FAFBFC;
  --ink:     #1A2333;
  --ink-60:  rgba(26,35,51,.62);
  --ink-40:  rgba(26,35,51,.42);
  --line:    #C5D4E8;
  --line-soft: rgba(197,212,232,.45);
  --panel:   #E8EEF6;
  --accent:  #2563EB;
  --accent-soft: rgba(37,99,235,.08);
  --dark:    #0B0F1A;
  --dark-ink:#E7EDF7;
  --dark-line: rgba(197,212,232,.16);
  --font-en: "Space Grotesk", "Noto Sans JP", sans-serif;
  --font-jp: "Noto Sans JP", sans-serif;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --header-h: 72px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:auto; }
html.reduced{ scroll-behavior:smooth; }

body{
  background-color:var(--bg);
  /* 極薄の方眼グリッド（設計図） */
  background-image:
    linear-gradient(to right,  rgba(197,212,232,.55) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(197,212,232,.55) 1px, transparent 1px),
    linear-gradient(to right,  rgba(197,212,232,.28) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(197,212,232,.28) 1px, transparent 1px);
  background-size: 240px 240px, 240px 240px, 48px 48px, 48px 48px;
  color:var(--ink);
  font-family:var(--font-jp);
  font-weight:500;
  font-size:16px;
  line-height:1.9;
  letter-spacing:.02em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--accent); color:#fff; }

a{ color:inherit; text-decoration:none; }
img,canvas,svg{ max-width:100%; display:block; }
b,strong{ font-weight:700; }

.js body{ cursor:none; }
@media (pointer:coarse){ .js body{ cursor:auto; } }

/* ============ レイヤー構造 ============ */
#gl{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}
.spine{
  position:absolute; top:0; left:0; width:100%;
  z-index:1; pointer-events:none; overflow:visible;
}
#spine-path{
  fill:none; stroke:var(--accent); stroke-width:1.5;
  opacity:.5;
}
#spine-tip{ fill:var(--accent); opacity:0; filter:drop-shadow(0 0 6px rgba(37,99,235,.8)); }
main{ position:relative; z-index:2; }
.site-footer{ position:relative; z-index:2; }

/* ============ タイポグラフィ共通 ============ */
.micro{
  font-family:var(--font-en);
  font-size:11px; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-60);
  display:inline-flex; align-items:center; gap:.9em;
}
.micro::before{
  content:""; width:26px; height:1px; background:var(--accent); flex:none;
}
.micro-light{ color:rgba(231,237,247,.7); }

/* フェーズチップ：点滅ドット + 枠 + 微グラデ */
.micro.chip{
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(232,238,246,.6));
  padding:8px 18px 8px 14px;
  gap:.75em;
  box-shadow:0 6px 16px -10px rgba(26,35,51,.22), inset 0 1px 0 #fff;
  border-radius:2px;
}
.micro.chip::before{
  width:7px; height:7px; border-radius:50%;
  background:var(--accent);
  animation:chipblink 2.2s ease-in-out infinite;
}
@keyframes chipblink{
  0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(37,99,235,.45); }
  50%{ opacity:.35; box-shadow:0 0 0 5px rgba(37,99,235,0); }
}
.dark .micro.chip{
  border-color:var(--dark-line);
  background:linear-gradient(180deg, rgba(231,237,247,.08), rgba(231,237,247,.02));
  box-shadow:inset 0 1px 0 rgba(231,237,247,.08);
}

.sec-title{
  font-family:var(--font-jp);
  font-weight:900;
  font-size:clamp(2rem, 4.6vw, 3.7rem);
  line-height:1.35;
  letter-spacing:.015em;
  margin:.6em 0 .5em;
}
.sec-sub{
  font-size:clamp(.95rem, 1.3vw, 1.1rem);
  font-weight:600;
  color:var(--ink-60);
  max-width:38em;
}
.dark .sec-sub{ color:rgba(231,237,247,.72); }

.ghost-num{
  display:block;
  font-family:var(--font-en); font-weight:700;
  font-size:clamp(5rem, 12vw, 11rem);
  line-height:.9;
  color:transparent;
  -webkit-text-stroke:2.6px rgba(26,35,51,.22);
  background:linear-gradient(180deg, rgba(26,35,51,.09), rgba(26,35,51,.02));
  -webkit-background-clip:text;
  background-clip:text;
  user-select:none;
  margin-top:.15em;
  opacity:1;
}
.ghost-light{
  -webkit-text-stroke:2.6px rgba(231,237,247,.34);
  background:linear-gradient(180deg, rgba(231,237,247,.12), rgba(231,237,247,.02));
  -webkit-background-clip:text;
  background-clip:text;
}

/* ============ ボタン ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-jp); font-weight:700;
  letter-spacing:.06em;
  border:1px solid transparent;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out),
             background-color .35s, color .35s, border-color .35s;
  will-change:transform;
  position:relative;
  overflow:hidden;
}
.btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}
.btn-primary{
  background:linear-gradient(160deg, #3B82F6 0%, var(--accent) 46%, #1E40AF 100%);
  color:#fff;
  box-shadow:0 12px 30px -12px rgba(37,99,235,.6),
             inset 0 1px 0 rgba(255,255,255,.34),
             inset 0 -1px 0 rgba(11,15,26,.28);
}
.btn-primary::before{
  content:""; position:absolute; top:0; bottom:0; left:-80%; width:46%;
  background:linear-gradient(105deg, rgba(255,255,255,0), rgba(255,255,255,.42), rgba(255,255,255,0));
  transform:skewX(-18deg);
  transition:left .75s var(--ease-out);
  pointer-events:none;
}
.btn-primary:hover{
  box-shadow:0 18px 44px -12px rgba(37,99,235,.72),
             inset 0 1px 0 rgba(255,255,255,.4),
             inset 0 -1px 0 rgba(11,15,26,.28);
  transform:translateY(-2px);
}
.btn-primary:hover::before{ left:135%; }
.btn-ghost{
  border-color:var(--ink); color:var(--ink);
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(238,243,250,.6));
  box-shadow:inset 0 1px 0 #fff, 0 8px 20px -14px rgba(26,35,51,.4);
}
.btn-ghost:hover{
  background:var(--ink); color:var(--bg);
  border-color:var(--ink);
  transform:translateY(-2px);
}
.btn-sm{ height:40px; padding:0 22px; font-size:13px; }
.btn-lg{ height:64px; padding:0 44px; font-size:16px; }
.btn-xl{ height:76px; padding:0 62px; font-size:17.5px; }
.btn-lg::after,.btn-xl::after{
  content:"→";
  font-family:var(--font-en);
  margin-left:.75em;
  transition:transform .45s var(--ease-out);
}
.btn-lg:hover::after,.btn-xl:hover::after{ transform:translateX(5px); }

/* ============ ローダー ============ */
.loader{ display:none; }
.js .loader{
  display:flex; align-items:center; justify-content:center;
  position:fixed; inset:0; z-index:100;
  background:var(--bg);
}
.js.reduced .loader{ display:none; }
.loader-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(197,212,232,.5) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(197,212,232,.5) 1px, transparent 1px);
  background-size:48px 48px;
  opacity:0;
  transform:scale(1.12);
}
.loader-inner{ position:relative; width:min(320px, 72vw); text-align:center; }
#loader-logo{ width:100%; height:auto; overflow:visible; }
#loader-logo .ll{
  stroke:var(--ink); stroke-width:2.6; stroke-linecap:round; fill:none;
}
#loader-logo .ll-dash{ stroke:var(--accent); }
.loader-meta{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:26px;
}
.loader-label{
  font-family:var(--font-en); font-size:10px; font-weight:500;
  letter-spacing:.3em; color:var(--ink-40);
}
.loader-pct{
  font-family:var(--font-en); font-size:13px; font-weight:700; color:var(--ink);
  letter-spacing:.1em;
}
.loader-bar{
  margin-top:10px; height:2px; background:var(--panel); overflow:hidden;
}
#loader-bar-fill{
  display:block; height:100%; width:100%;
  background:var(--accent);
  transform:scaleX(0); transform-origin:left center;
}

/* ============ カスタムカーソル ============ */
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0; z-index:120;
  pointer-events:none; border-radius:50%;
  opacity:0;
}
.cursor-dot{
  width:6px; height:6px; margin:-3px 0 0 -3px;
  background:var(--accent);
}
.cursor-ring{
  width:36px; height:36px; margin:-18px 0 0 -18px;
  border:1px solid rgba(37,99,235,.55);
  transition:width .45s var(--ease-out), height .45s var(--ease-out),
             margin .45s var(--ease-out), border-color .3s, background-color .3s;
}
.cursor-ring.is-hover{
  width:64px; height:64px; margin:-32px 0 0 -32px;
  border-color:rgba(37,99,235,.9);
  background:rgba(37,99,235,.06);
}
@media (pointer:coarse){ .cursor-dot,.cursor-ring{ display:none; } }

/* ============ ヘッダー ============ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:60;
  height:var(--header-h);
  display:flex; align-items:center; gap:40px;
  padding:0 clamp(20px, 4vw, 56px);
  transition:background-color .5s, backdrop-filter .5s, box-shadow .5s;
}
.site-header.scrolled{
  background:rgba(250,251,252,.82);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--line-soft);
}
.brand{
  font-family:var(--font-en); font-weight:700; font-size:22px;
  letter-spacing:.02em; color:var(--ink);
}
.brand-dash{ color:var(--accent); }
.gnav{ display:flex; gap:34px; margin-left:auto; }
.gnav a{
  font-family:var(--font-en); font-size:12px; font-weight:500;
  letter-spacing:.2em; color:var(--ink-60);
  position:relative; padding:6px 0;
}
.gnav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:right center;
  transition:transform .5s var(--ease-out);
}
.gnav a:hover{ color:var(--ink); }
.gnav a:hover::after{ transform:scaleX(1); transform-origin:left center; }
@media (max-width:820px){
  .gnav{ display:none; }
  .site-header{ gap:0; justify-content:space-between; }
}

/* ============ フェーズレール ============ */
.phase-rail{
  position:fixed; right:clamp(14px, 2.4vw, 34px); top:50%;
  transform:translateY(-50%);
  z-index:55;
  display:flex; flex-direction:column; gap:14px;
  padding-left:14px;
}
.rail-line{
  position:absolute; left:0; top:6px; bottom:6px; width:1px;
  background:var(--line);
}
.phase-rail a{
  display:flex; align-items:center; gap:10px;
  position:relative;
  height:16px;
}
.phase-rail a::before{
  content:""; position:absolute; left:-17px; top:50%; margin-top:-2.5px;
  width:5px; height:5px; border-radius:50%;
  background:var(--line);
  transition:background-color .3s, box-shadow .3s, transform .3s;
}
.phase-rail i{
  font-style:normal; font-family:var(--font-en); font-size:10px; font-weight:500;
  letter-spacing:.14em; color:var(--ink-40);
  transition:color .3s;
}
.phase-rail em{
  font-style:normal; font-family:var(--font-en); font-size:9px; font-weight:500;
  letter-spacing:.22em; color:var(--ink-40);
  opacity:0; transform:translateX(-6px);
  transition:opacity .35s, transform .35s var(--ease-out);
  white-space:nowrap;
}
.phase-rail a:hover em{ opacity:.7; transform:none; }
.phase-rail a.active::before{
  background:var(--accent);
  box-shadow:0 0 8px rgba(37,99,235,.8);
  transform:scale(1.4);
}
.phase-rail a.active i{ color:var(--accent); }
.phase-rail a.active em{ opacity:1; transform:none; color:var(--ink-60); }
.dark-mode .phase-rail i{ color:rgba(231,237,247,.4); }
.dark-mode .phase-rail .rail-line{ background:var(--dark-line); }
@media (max-width:1023px){ .phase-rail{ display:none; } }

/* ============ セクション共通 ============ */
.sec{ position:relative; }
.wrap{
  width:min(1240px, calc(100% - clamp(40px, 8vw, 128px)));
  margin:0 auto;
}
.wrap-narrow{ width:min(860px, calc(100% - clamp(40px, 8vw, 128px))); }
.sp{ display:none; }
@media (max-width:820px){ .sp{ display:inline; } }

/* ============ PHASE 00 / HERO（街頭広告仕様） ============ */
.sec-hero{
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  padding:calc(var(--header-h) + 18px) 0 90px;
  overflow:hidden;
}
.sec-hero .wrap.hero-wrap{
  position:relative;
  width:min(1400px, calc(100% - clamp(32px, 5vw, 96px)));
}
/* ビルボードの「版」：白グロー + プレート + 斜めのアクセントバンド */
.hero-billboard{ position:absolute; inset:-14% -6%; pointer-events:none; }
.hero-billboard i{ position:absolute; display:block; }
.hb-glow{
  left:-6%; top:-4%; width:92%; height:104%;
  background:radial-gradient(closest-side, rgba(255,255,255,.97) 0%, rgba(255,255,255,.8) 42%, rgba(250,251,252,0) 74%);
  filter:blur(12px);
}
.hb-plate{
  left:-4%; top:16%; width:82%; height:54%;
  transform:skew(-8deg, -1.5deg);
  background:linear-gradient(115deg, rgba(255,255,255,.78), rgba(232,238,246,.5));
  border-top:1px solid rgba(197,212,232,.9);
  border-bottom:1px solid rgba(197,212,232,.9);
  box-shadow:0 40px 90px -50px rgba(26,35,51,.3), inset 0 0 0 1px rgba(255,255,255,.55);
}
.hb-band{
  height:3px;
  background:linear-gradient(90deg, var(--accent), rgba(37,99,235,0));
  transform:rotate(-8deg);
}
.hb-band-a{ right:2%; top:13%; width:38%; }
.hb-band-b{ left:-2%; top:74%; width:30%; opacity:.65; }
.hero-micro{ margin-bottom:1.7em; }
.hero-title{
  position:relative;
  font-family:var(--font-jp); font-weight:900;
  font-size:clamp(2.7rem, 8.6vw, 8.6rem);
  line-height:1.06; letter-spacing:-.015em;
  margin:.16em 0 .36em;
}
.ht-line{
  display:block;
  transform:skewX(-8deg);
  text-shadow:
    0 1px 0 rgba(255,255,255,.65),
    2px 2px 0 rgba(26,35,51,.05),
    4px 4px 0 rgba(26,35,51,.045),
    6px 6px 0 rgba(26,35,51,.038),
    8px 8px 0 rgba(26,35,51,.03),
    10px 10px 0 rgba(26,35,51,.022),
    12px 12px 0 rgba(26,35,51,.015),
    14px 14px 0 rgba(26,35,51,.009);
}
.ht-l1{ margin-left:.5em; }
.ht-l2{ margin-top:.02em; }
.ht-key{ position:relative; display:inline-block; }
.ht-swash{
  position:absolute; left:-1%; bottom:-.05em;
  width:102%; height:.24em;
  overflow:visible;
  pointer-events:none;
}
.ht-swash path{
  stroke:var(--accent); stroke-width:9; stroke-linecap:round;
  opacity:0;
  filter:drop-shadow(0 2px 6px rgba(37,99,235,.35));
}
.hero-sub{
  font-size:clamp(1.02rem, 1.5vw, 1.28rem);
  font-weight:600;
  color:var(--ink-60); max-width:44em;
  margin:0 0 1.7em clamp(2px, 1.8vw, 26px);
}
.hero-tagline{
  display:inline-flex; align-items:center; gap:14px;
  font-weight:700; font-size:clamp(.88rem, 1.15vw, 1.05rem);
  letter-spacing:.12em;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(238,243,250,.65));
  box-shadow:inset 0 1px 0 #fff, 0 10px 24px -18px rgba(26,35,51,.4);
  padding:13px 28px 13px 18px;
  margin:0 0 2.1em clamp(2px, 1.8vw, 26px);
}
.tagline-tick{ width:8px; height:8px; background:var(--accent); flex:none; }
.hero-cta{
  display:flex; gap:18px; flex-wrap:wrap;
  margin-left:clamp(2px, 1.8vw, 26px);
}
@media (max-width:820px){
  .ht-l1{ margin-left:.12em; }
  .ht-key{ display:block; }
  .hero-title{ font-size:clamp(2.5rem, 12.5vw, 4rem); }
  .hb-plate{ width:104%; }
}
.hero-scroll{
  position:absolute; left:clamp(20px, 4vw, 56px); bottom:0;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.hs-label{
  font-family:var(--font-en); font-size:9px; font-weight:500;
  letter-spacing:.32em; color:var(--ink-40);
  writing-mode:vertical-rl;
}
.hs-line{ width:1px; height:72px; background:var(--line); position:relative; overflow:hidden; }
.hs-line::after{
  content:""; position:absolute; left:0; top:-40%; width:100%; height:40%;
  background:var(--accent);
  animation:hsline 2.2s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes hsline{ 0%{ top:-40%; } 100%{ top:110%; } }
.hero-coords{
  position:absolute; right:clamp(20px, 6vw, 88px); bottom:44px;
  font-family:var(--font-en); font-size:10px; font-weight:500;
  letter-spacing:.18em; color:var(--ink-40); text-align:right; line-height:1.9;
}
@media (max-width:820px){ .hero-coords{ display:none; } }
.reduced .hs-line::after{ animation:none; }

/* ============ PHASE 01 / 課題提起 ============ */
.sec-problem{ padding:16vh 0; }
.problem-wrap{ min-height:70vh; display:flex; flex-direction:column; justify-content:center; }
.problem-stage{
  display:flex; align-items:center; gap:clamp(24px, 5vw, 90px);
  flex-wrap:wrap;
  perspective:900px;
  margin-top:5vh;
}
.problem-num{
  font-family:var(--font-en); font-weight:700;
  font-size:clamp(7rem, 22vw, 21rem);
  line-height:.9; letter-spacing:-.03em;
  color:var(--ink);
  display:flex; align-items:baseline;
  transform-style:preserve-3d;
  font-variant-numeric:tabular-nums;
}
.problem-unit{
  font-size:.32em; color:transparent;
  -webkit-text-stroke:2px var(--line);
  margin-left:.06em;
}
.problem-title{
  font-weight:700; font-size:clamp(1.6rem, 3.4vw, 2.7rem); line-height:1.5;
}
.problem-title .pl{ display:block; overflow:hidden; }
.problem-sub{
  margin-top:1.6em; color:var(--ink-60); max-width:34em;
  font-size:clamp(.92rem, 1.2vw, 1.05rem);
}

/* ============ 横スクロール（PHASE 02） ============ */
.sec-blueprint{ background:linear-gradient(rgba(232,238,246,.0), rgba(232,238,246,.5) 18%, rgba(232,238,246,.5) 82%, rgba(232,238,246,0)); }
.hwrap{ height:100vh; overflow:hidden; display:flex; align-items:center; }
.htrack{
  display:flex; align-items:center; gap:clamp(40px, 6vw, 120px);
  padding:0 clamp(24px, 6vw, 96px);
  will-change:transform;
}
.hpanel{ flex:none; }
.hpanel-intro{ width:min(560px, 82vw); }
.hpanel-hint{
  margin-top:3.2em;
  font-family:var(--font-en); font-size:10px; font-weight:500;
  letter-spacing:.3em; color:var(--ink-40);
}
.hpanel-chart{
  width:min(1520px, 165vw);
  padding:clamp(18px, 2vw, 34px);
  border:1px solid var(--line-soft);
  background:
    linear-gradient(rgba(250,251,252,.55), rgba(250,251,252,.55)),
    linear-gradient(to right, rgba(197,212,232,.35) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(197,212,232,.35) 1px, transparent 1px);
  background-size:auto, 40px 40px, 40px 40px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), 0 30px 70px -50px rgba(26,35,51,.4);
  position:relative;
}
.hpanel-chart::before,.hpanel-chart::after{
  content:""; position:absolute; width:16px; height:16px;
  border:solid var(--accent); opacity:.6;
}
.hpanel-chart::before{ top:-1px; left:-1px; border-width:2px 0 0 2px; }
.hpanel-chart::after{ bottom:-1px; right:-1px; border-width:0 2px 2px 0; }
#flowchart{ width:100%; height:auto; overflow:visible; }
#flowchart .fcd{ stroke:#7E93B8; stroke-width:1.6; }
#flowchart path.fcd{ fill:none; }
#flowchart .fcd-final{ stroke:var(--accent); }
#flowchart .fcd-loop{ stroke-dasharray:6 6 !important; opacity:.75; }
#flowchart .fcd-dim{ stroke:var(--line); stroke-width:1; fill:none; }
#flowchart rect.fcd{ filter:drop-shadow(0 10px 16px rgba(26,35,51,.1)); }
#flowchart .fnode rect.fcd,
#flowchart .fnode polygon.fcd{
  transition:stroke .5s, filter .5s;
}
#flowchart .fnode.lit rect.fcd,
#flowchart .fnode.lit polygon.fcd{
  stroke:var(--accent); stroke-width:1.8;
  filter:drop-shadow(0 8px 20px rgba(37,99,235,.3));
}
/* コーナーブラケット + ミニアイコン：ノード点灯で出現 */
#flowchart .fcb{
  stroke:var(--accent); stroke-width:1.5; fill:none;
  opacity:0; transition:opacity .55s;
}
#flowchart .fic{ opacity:0; transition:opacity .55s .1s; }
#flowchart .fic *{ stroke:#51648A; stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
#flowchart .fic .ic-a{ stroke:var(--accent); }
#flowchart .fic .ic-fill{ fill:var(--accent); stroke:none; }
#flowchart .fnode.lit .fcb{ opacity:.85; }
#flowchart .fnode.lit .fic{ opacity:1; }
/* 背景装飾 */
#flowchart .fdeco{ opacity:0; transition:opacity 1.2s; }
#flowchart.live .fdeco{ opacity:1; }
#flowchart .frtl{ stroke:var(--line-soft); stroke-width:1; }
#flowchart .frt{ stroke:var(--line); stroke-width:9; stroke-dasharray:1.5 98.5; }
#flowchart .frm{
  font-family:var(--font-en); font-size:10px; font-weight:700;
  fill:var(--ink-40); letter-spacing:.24em;
}
/* 光のパルス：コネクタ上を流れ続ける */
#flowchart .fpl{
  stroke:#4D7DF0; stroke-width:2.6; stroke-linecap:round; fill:none;
  stroke-dasharray:18 262;
  opacity:0;
  transition:opacity .7s;
  animation:fpulse 2.6s linear infinite;
}
#flowchart .fpl.on{ opacity:.95; }
#flowchart .fpl-loop{ stroke-width:2.2; stroke-dasharray:24 256; }
@keyframes fpulse{ to{ stroke-dashoffset:-280; } }
/* ジャンクション発光ドット */
#flowchart .fjn{ fill:#fff; stroke:var(--accent); stroke-width:1.5; }
#flowchart .fjh{
  fill:rgba(37,99,235,.3);
  transform-box:fill-box; transform-origin:center;
  animation:jhalo 2.4s ease-out infinite;
}
@keyframes jhalo{
  0%{ transform:scale(.6); opacity:.8; }
  100%{ transform:scale(2.4); opacity:0; }
}
#flowchart .fjn-g{ opacity:0; transition:opacity .8s; }
#flowchart.deep .fjn-g{ opacity:1; }
#flowchart .fcl{ opacity:0; }
#flowchart .fct{
  font-family:var(--font-jp); font-size:17px; font-weight:700; fill:var(--ink);
  letter-spacing:.05em;
}
#flowchart .fct-final{ fill:var(--accent); font-weight:900; }
#flowchart .fcm{
  font-family:var(--font-en); font-size:10.5px; font-weight:700; fill:var(--ink-40);
  letter-spacing:.18em;
}
.hpanel-out{ width:min(520px, 80vw); padding-right:10vw; }
.hout-title{
  font-weight:700; font-size:clamp(1.5rem, 2.6vw, 2.2rem); line-height:1.6;
  margin:1em 0 1.4em;
}
.hout-list{ list-style:none; }
.hout-list li{
  display:flex; align-items:baseline; gap:18px;
  padding:16px 0; border-bottom:1px solid var(--line-soft);
  font-weight:500; font-size:15px;
}
.hout-list i{
  font-style:normal; font-family:var(--font-en); font-size:11px; font-weight:700;
  color:var(--accent); letter-spacing:.1em;
}
/* モバイル: 縦積みにせず、ピン留め横スクロールのままサイズだけ最適化
   （縦スクロール入力は横進行に100%変換され、完了後に縦へ戻る） */
.hwrap{ height:100svh; }
@media (max-width:820px){
  .hpanel-intro{ width:86vw; }
  .hpanel-chart{ width:300vw; padding:14px; }
  .hpanel-out{ width:86vw; padding-right:4vw; }
}

/* ============ PHASE 03 / コンベア ============ */
.sec-conveyor{ overflow:visible; }
.conveyor-pin{
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:14vh 0 8vh;
}
.conveyor-head{ margin-bottom:6vh; }
.belt{
  position:relative; height:340px;
  overflow:hidden;
}
.belt-line{
  position:absolute; left:0; right:0; bottom:54px; height:2px;
  background-image:linear-gradient(90deg, var(--line) 0 22px, transparent 22px 34px);
  background-size:34px 2px;
}
.belt-line::after{
  content:""; position:absolute; left:0; right:0; top:10px; height:1px;
  background:var(--line-soft);
}
.belt-gate{
  position:absolute; left:50%; top:0; bottom:34px; width:150px;
  transform:translateX(-50%);
  border-left:1px dashed var(--line);
  border-right:1px dashed var(--line);
  background:linear-gradient(rgba(37,99,235,.045), rgba(37,99,235,0));
  display:flex; justify-content:center;
}
.belt-gate span{
  font-family:var(--font-en); font-size:9px; font-weight:500;
  letter-spacing:.3em; color:var(--ink-40); margin-top:10px;
}
.belt-cards{ position:absolute; inset:0; }
.ccard{
  position:absolute; top:46px; left:50%;
  width:230px; margin-left:-115px;
  background:rgba(250,251,252,.94);
  border:1px solid var(--line);
  box-shadow:0 18px 40px -22px rgba(26,35,51,.28);
  padding:18px 20px 16px;
  transform-style:preserve-3d;
}
.ccard header{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:10px;
}
.ccard-id{
  font-family:var(--font-en); font-size:10px; font-weight:500;
  letter-spacing:.2em; color:var(--ink-40);
}
.ccard-dot{ width:7px; height:7px; border-radius:50%; background:var(--line); transition:background .3s; }
.ccard.done .ccard-dot{ background:var(--accent); box-shadow:0 0 6px rgba(37,99,235,.7); }
.ccard h3{ font-size:17px; font-weight:700; margin-bottom:12px; }
.ccard-lines i{
  display:block; height:6px; background:var(--panel); margin-bottom:7px; width:100%;
}
.ccard footer{
  margin-top:12px; font-size:11px; color:var(--ink-60); letter-spacing:.04em;
}
.stamp{
  position:absolute; right:10px; top:34px;
  font-family:var(--font-en); font-weight:700; font-size:17px;
  letter-spacing:.08em; color:var(--accent);
  border:2.5px solid var(--accent); border-radius:4px;
  padding:4px 10px;
  transform:rotate(-12deg) scale(3);
  opacity:0;
  background:rgba(250,251,252,.6);
}
.belt-counter{
  position:absolute; right:0; top:0;
  display:flex; align-items:baseline; gap:12px;
}
.belt-counter b{
  font-family:var(--font-en); font-size:34px; font-weight:700; color:var(--ink);
}
@media (max-width:820px){
  /* ピン留め維持（自動マーキー廃止）：高さはsvhでアドレスバー変動に耐性 */
  .conveyor-pin{ min-height:100svh; padding:12vh 0 6vh; }
  .belt{ height:300px; }
  .ccard{ width:200px; margin-left:-100px; }
  .belt-counter{ display:none; }
}

/* ============ PHASE 04 / レーダー（ダーク） ============ */
.sec-radar{
  background:var(--dark);
  background-image:
    linear-gradient(to right, rgba(197,212,232,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(197,212,232,.05) 1px, transparent 1px);
  background-size:48px 48px;
  color:var(--dark-ink);
  padding:18vh 0;
}
.radar-wrap{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(40px, 6vw, 100px); align-items:center;
}
.radar-stats{ list-style:none; margin-top:3em; display:grid; gap:16px; }
.radar-stats li{
  display:flex; align-items:baseline; gap:18px;
  padding:14px 16px 16px 14px;
  border:1px solid var(--dark-line);
  background:linear-gradient(115deg, rgba(231,237,247,.06), rgba(231,237,247,.015));
  box-shadow:inset 0 1px 0 rgba(231,237,247,.07);
  border-bottom:1px solid;
  border-image:linear-gradient(90deg, rgba(91,141,239,.65), rgba(197,212,232,.16) 40%, rgba(197,212,232,.05)) 1;
  position:relative;
  transition:background .4s;
}
.radar-stats li:hover{ background:linear-gradient(115deg, rgba(91,141,239,.12), rgba(231,237,247,.02)); }
.radar-stats .rs-no{
  font-family:var(--font-en); font-size:9px; font-weight:700;
  letter-spacing:.24em; color:rgba(127,166,240,.85);
  border:1px solid rgba(91,141,239,.4);
  background:rgba(37,99,235,.12);
  padding:3px 7px;
  align-self:center; flex:none;
}
/* 統一階層：数値=大 / 単位=中 / 説明ラベル=小 */
.radar-stats b{
  font-family:var(--font-en); font-size:34px; font-weight:700; min-width:2.9em;
  font-variant-numeric:tabular-nums;
  display:inline-flex; align-items:baseline;
  background:linear-gradient(135deg, #F2F6FD 30%, #7FA6F0 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.radar-stats b i{ font-style:normal; }
.radar-stats b em{
  font-style:normal; font-size:.52em; font-weight:700;
  margin-left:.14em;
}
.radar-stats sup{ font-size:.5em; }
.radar-stats .rs-label{
  font-size:12.5px; font-weight:600;
  color:rgba(231,237,247,.68); letter-spacing:.06em;
}
.radar-stage{ position:relative; }
#radar-canvas{ width:100%; aspect-ratio:1/1; }
.radar-frame{
  position:absolute; inset:0; border:1px solid var(--dark-line);
  pointer-events:none;
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:12px 16px;
}
.radar-frame span{
  font-family:var(--font-en); font-size:9.5px; font-weight:500;
  letter-spacing:.3em; color:rgba(231,237,247,.4);
}
.radar-frame::before,.radar-frame::after{
  content:""; position:absolute; width:14px; height:14px;
  border-color:rgba(197,212,232,.5); border-style:solid;
}
.radar-frame::before{ left:-1px; top:-1px; border-width:1px 0 0 1px; }
.radar-frame::after{ right:-1px; bottom:-1px; border-width:0 1px 1px 0; }
@media (max-width:1023px){
  .radar-wrap{ grid-template-columns:1fr; }
  .radar-stage{ max-width:520px; }
}

/* ============ PHASE 05 / ターミナル ============ */
.sec-terminal{ padding:20vh 0; }
.term-wrap{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(40px, 5vw, 90px); align-items:center;
}
.term-kpi{ margin-top:3em; }
.term-kpi b{
  display:block;
  font-family:var(--font-en); font-size:clamp(2.6rem, 4.6vw, 4rem); font-weight:700;
  letter-spacing:.02em; margin-top:.15em;
  font-variant-numeric:tabular-nums;
}
.term-stage{ display:grid; gap:22px; position:relative; }
.term-window{
  background:var(--dark); color:#B9C9E4;
  border:1px solid rgba(26,35,51,.9);
  box-shadow:0 30px 70px -30px rgba(26,35,51,.5);
}
.term-titlebar{
  display:flex; align-items:center; gap:7px;
  padding:11px 14px; border-bottom:1px solid rgba(197,212,232,.1);
}
.term-titlebar i{ width:10px; height:10px; border-radius:50%; background:rgba(197,212,232,.22); }
.term-titlebar span{
  margin-left:10px; font-family:var(--font-en); font-size:10.5px;
  letter-spacing:.12em; color:rgba(197,212,232,.5);
}
.term-lines{
  font-family:"Space Grotesk", ui-monospace, monospace;
  font-size:12.5px; line-height:1.85; letter-spacing:.03em;
  padding:18px 20px; height:262px; overflow:hidden;
}
.term-lines .tl{ white-space:nowrap; overflow:hidden; text-overflow:clip; }
.term-lines .tl-cmd{ color:#E7EDF7; }
.term-lines .tl-ok{ color:#7FA6F0; }
.term-lines .tl-dim{ color:rgba(185,201,228,.55); }
.term-lines .tl-accent{ color:#5B8DEF; font-weight:700; }
.term-caret{
  display:inline-block; width:8px; height:14px; background:#5B8DEF;
  vertical-align:-2px; margin-left:2px;
  animation:caret 1s steps(2) infinite;
}
@keyframes caret{ 50%{ opacity:0; } }
.reduced .term-caret{ animation:none; }
.form-window{
  background:rgba(250,251,252,.95); border:1px solid var(--line);
  padding:20px 22px 22px;
  box-shadow:0 24px 50px -30px rgba(26,35,51,.3);
  width:min(400px, 92%);
  justify-self:end;
  margin-top:-46px; margin-right:-8px;
  position:relative; z-index:1;
}
.form-titlebar{
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; letter-spacing:.08em; color:var(--ink-60);
  border-bottom:1px solid var(--line-soft); padding-bottom:12px; margin-bottom:14px;
}
.form-live{ width:8px; height:8px; border-radius:50%; background:var(--accent);
  animation:pulse 1.6s ease-out infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(37,99,235,.5);} 100%{ box-shadow:0 0 0 10px rgba(37,99,235,0);} }
.reduced .form-live{ animation:none; }
.form-window label{
  display:block; font-size:10.5px; letter-spacing:.14em; color:var(--ink-40);
  margin-bottom:12px;
}
.form-window label b{
  display:block; font-weight:500; font-size:13.5px; color:var(--ink);
  border:1px solid var(--line); background:#fff;
  min-height:36px; padding:7px 10px; margin-top:5px;
  letter-spacing:.03em;
}
.form-send{
  width:100%; height:42px; margin-top:6px;
  background:var(--accent); color:#fff; border:none;
  font-family:var(--font-jp); font-weight:500; font-size:13.5px; letter-spacing:.1em;
  pointer-events:none;
  transition:background .25s, transform .25s;
}
.form-send.flash{ background:#16A34A; transform:scale(.985); }
@media (max-width:1023px){
  .term-wrap{ grid-template-columns:1fr; }
  .form-window{ justify-self:start; margin:-30px 0 0; }
}

/* ============ PHASE 06 / アイソメトリック・ジオラマ ============ */
.sec-iso{ padding:18vh 0 14vh; }
.iso-stage{
  width:min(1240px, calc(100% - 32px)); margin:6vh auto 4vh;
  border:1px solid var(--line-soft);
  background:
    radial-gradient(92% 74% at 50% 36%, rgba(255,255,255,.9), rgba(236,242,250,.35) 68%, rgba(236,242,250,0)),
    rgba(250,251,252,.55);
  position:relative;
}
#iso-canvas{ width:100%; aspect-ratio:1200/620; }
@media (max-width:820px){ #iso-canvas{ aspect-ratio:10/7; } }

/* コネクタ線（world→screen 射影でチップと接続） */
.iso-links{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:3; overflow:visible;
}
.iso-links path{
  fill:none; stroke:var(--line); stroke-width:1.2;
  transition:opacity .5s, stroke .35s;
}
.iso-links circle{
  fill:var(--bg); stroke:var(--line); stroke-width:1.2;
  transition:opacity .5s, stroke .35s;
}
.iso-links path.lit, .iso-links circle.lit{ stroke:var(--accent); }
.iso-links circle.lit{ fill:var(--accent); }

/* キャプションチップ（図形と重ならない下段固定グリッド） */
.iso-chips{
  position:relative; z-index:4;
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  padding:30px 16px 16px;
}
.iso-chip{
  border:1px solid var(--line); border-radius:2px;
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(232,238,246,.65));
  box-shadow:0 6px 16px -12px rgba(26,35,51,.28), inset 0 1px 0 #fff;
  padding:9px 12px 8px;
  opacity:0; transform:translateY(10px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out),
             border-color .35s, box-shadow .35s, background .35s;
}
.iso-chip.on{ opacity:1; transform:none; }
.iso-chip.lit{
  border-color:var(--accent);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(219,231,250,.75));
  box-shadow:0 14px 26px -16px rgba(37,99,235,.4), inset 0 1px 0 #fff;
}
.isoc-no{
  display:block;
  font-family:var(--font-en); font-size:9px; font-weight:700;
  letter-spacing:.22em; color:var(--accent);
}
.isoc-jp{
  display:inline-block; margin-top:3px;
  font-size:14px; font-weight:900; letter-spacing:.05em; line-height:1.3;
}
.isoc-en{
  display:block; margin-top:2px;
  font-family:var(--font-en); font-size:8.5px; font-weight:500;
  letter-spacing:.22em; color:var(--ink-40);
}
@media (max-width:820px){
  .iso-chips{ gap:6px; padding:22px 8px 10px; }
  .iso-chip{ padding:7px 8px 6px; }
  .isoc-no{ font-size:8px; letter-spacing:.14em; }
  .isoc-jp{ font-size:12px; }
  .isoc-en{ font-size:7px; letter-spacing:.1em; }
}
.iso-cards{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;
}
.icard{
  border:1px solid var(--line); background:rgba(250,251,252,.85);
  padding:24px 22px 20px;
  position:relative;
  transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-color .4s;
}
.icard:hover{
  transform:translateY(-6px);
  border-color:var(--accent);
  box-shadow:0 24px 44px -26px rgba(37,99,235,.35);
}
.icard-no{
  font-family:var(--font-en); font-size:10px; font-weight:500;
  letter-spacing:.22em; color:var(--accent);
}
.icard h3{ font-size:18px; font-weight:700; margin:12px 0 8px; }
.icard p{ font-size:12.5px; color:var(--ink-60); line-height:1.85; }
.icard-tag{
  display:inline-block; margin-top:16px;
  font-family:var(--font-en); font-size:9px; font-weight:500;
  letter-spacing:.26em; color:var(--ink-40);
  border-top:1px solid var(--line-soft); padding-top:10px; width:100%;
}
@media (max-width:1023px){ .iso-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .iso-cards{ grid-template-columns:1fr; } }

/* ============ PHASE 07 / サイテーション ============ */
.sec-citation{
  padding:20vh 0;
  background:linear-gradient(rgba(232,238,246,0), rgba(232,238,246,.5) 30%, rgba(232,238,246,.5) 70%, rgba(232,238,246,0));
}
.cite-wrap{
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(40px, 5vw, 90px); align-items:center;
}
.cite-stage{ position:relative; padding:60px 30px; }
.orbit-layer{ position:absolute; inset:0; pointer-events:none; }
.orbit-node{
  position:absolute; left:0; top:0;
  font-family:var(--font-en); font-size:10.5px; font-weight:500;
  letter-spacing:.16em; color:var(--ink-60);
  background:rgba(250,251,252,.9); border:1px solid var(--line);
  padding:5px 12px; border-radius:99px;
  white-space:nowrap;
  will-change:transform;
}
.ai-window{
  position:relative;
  background:rgba(250,251,252,.97); border:1px solid var(--line);
  box-shadow:0 34px 80px -40px rgba(26,35,51,.4);
  padding:22px 26px 24px;
}
.ai-titlebar{
  display:flex; align-items:center; gap:10px;
  border-bottom:1px solid var(--line-soft); padding-bottom:14px; margin-bottom:18px;
}
.ai-logo{
  width:16px; height:16px; border-radius:50%;
  border:1.5px solid var(--ink); position:relative;
}
.ai-logo::after{
  content:""; position:absolute; inset:4px; border-radius:50%; background:var(--accent);
}
.ai-titlebar span{
  font-family:var(--font-en); font-size:10.5px; font-weight:700; letter-spacing:.22em;
}
.ai-titlebar em{
  margin-left:auto; font-style:normal;
  font-family:var(--font-en); font-size:9px; font-weight:500;
  letter-spacing:.2em; color:var(--ink-40);
}
.ai-q{
  font-size:14px; font-weight:500;
  background:var(--panel); padding:12px 16px;
  margin-bottom:18px;
}
.ai-q span{
  font-family:var(--font-en); font-weight:700; color:var(--accent); margin-right:10px;
}
.ai-a{ min-height:150px; font-size:13.5px; line-height:2.05; color:var(--ink); }
.ai-a p{ display:inline; }
.ai-caret{
  display:inline-block; width:2px; height:15px; background:var(--accent);
  vertical-align:-2px; margin-left:3px;
  animation:caret 1s steps(2) infinite;
}
.cite-mark{ color:var(--accent); font-weight:700; font-family:var(--font-en); }
.ai-cite{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin-top:18px; padding:12px 16px;
  border:1px solid var(--line); background:#fff;
  font-size:12px;
  transition:border-color .5s, box-shadow .5s;
}
.ai-cite.lit{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent), 0 8px 30px -12px rgba(37,99,235,.5);
}
.ai-cite-no{ font-family:var(--font-en); font-weight:700; color:var(--accent); }
.ai-cite-url{ font-family:var(--font-en); font-weight:700; letter-spacing:.06em; }
.ai-cite.lit .ai-cite-url{ color:var(--accent); }
.ai-cite-title{ color:var(--ink-60); }
@media (max-width:1023px){
  .cite-wrap{ grid-template-columns:1fr; }
  .cite-stage{ padding:40px 10px; }
}

/* ============ PHASE 08 / ダッシュボード ============ */
.sec-dashboard{ padding:18vh 0 16vh; }
.dash-grid{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:20px; margin-top:7vh; align-items:stretch;
}
.dash-panel{
  border:1px solid var(--line); background:rgba(250,251,252,.92);
  box-shadow:0 24px 60px -36px rgba(26,35,51,.35);
}
.dash-panel-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 20px; border-bottom:1px solid var(--line-soft);
}
.dash-live{
  width:8px; height:8px; border-radius:50%; background:var(--accent);
  animation:pulse 1.6s ease-out infinite;
}
#dash-canvas{ width:100%; aspect-ratio:16/9.2; }
.dash-side{ display:grid; gap:20px; grid-template-rows:auto 1fr; }
.dash-kpis{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
}
.kpi{
  border:1px solid var(--line); background:rgba(250,251,252,.92);
  padding:16px 14px 14px;
}
.kpi b{
  display:block; font-family:var(--font-en); font-weight:700;
  font-size:clamp(1.4rem, 2vw, 1.9rem); margin:10px 0 4px;
  font-variant-numeric:tabular-nums;
}
.kpi-note{ font-size:10.5px; color:var(--ink-40); letter-spacing:.08em; }
.ab-stage{
  border:1px solid var(--line); background:rgba(250,251,252,.92);
  display:flex; flex-direction:column;
}
.ab-cards{ position:relative; flex:1; min-height:190px; margin:16px; perspective:900px; }
.ab-card{
  position:absolute; inset:0;
  border:1px solid var(--line); background:#fff;
  padding:18px 20px;
  display:flex; flex-direction:column;
  transition:transform .9s var(--ease-out), opacity .7s, border-color .5s;
  transform:translateY(14px) scale(.94); opacity:0;
}
.ab-card.is-front{ transform:none; opacity:1; z-index:1; }
.ab-tag{
  font-family:var(--font-en); font-size:9.5px; font-weight:500;
  letter-spacing:.26em; color:var(--ink-40);
}
.ab-card p{
  margin:auto 0; font-size:clamp(1.05rem, 1.5vw, 1.3rem); font-weight:700; line-height:1.6;
}
.ab-meta{
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--line-soft); padding-top:12px;
  font-size:11.5px; color:var(--ink-60);
}
.ab-meta b{ font-family:var(--font-en); color:var(--ink); }
.ab-win{
  font-style:normal; font-family:var(--font-en); font-size:9px; font-weight:700;
  letter-spacing:.22em; color:var(--accent);
  border:1px solid var(--accent); padding:3px 8px;
  opacity:0; transition:opacity .5s;
}
.ab-card.is-winner .ab-win{ opacity:1; }
@media (max-width:1023px){
  .dash-grid{ grid-template-columns:1fr; }
}

/* ============ 導入フロー ============ */
.sec-flow{ padding:18vh 0 14vh; }
.flow-stage{ margin-top:6vh; }
#flow-svg{ width:100%; height:auto; }
#flow-line{
  stroke:var(--accent); stroke-width:1.5; fill:none; opacity:.85;
}
.flow-node{
  fill:var(--bg); stroke:var(--line); stroke-width:1.5;
  transition:stroke .4s, fill .4s;
}
.flow-node.lit{ stroke:var(--accent); fill:var(--accent); }
.flow-steps{
  list-style:none;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px, 2vw, 30px);
  margin-top:-30px;
}
.flow-step h3{ font-size:clamp(1.15rem, 1.8vw, 1.5rem); font-weight:700; margin:14px 0 10px; }
.flow-step p{ font-size:12.5px; color:var(--ink-60); line-height:1.9; }
@media (max-width:820px){
  #flow-svg{ display:none; }
  .flow-steps{ grid-template-columns:1fr; gap:0; margin-top:4vh; }
  .flow-step{
    border-left:1px solid var(--line); padding:0 0 40px 28px; position:relative;
  }
  .flow-step::before{
    content:""; position:absolute; left:-5px; top:6px; width:9px; height:9px;
    border-radius:50%; background:var(--accent);
  }
}

/* ============ 会社概要 ============ */
.sec-company{ padding:16vh 0; }
.company-table{ margin-top:6vh; border-top:1px solid var(--line); }
.company-table > div{
  display:grid; grid-template-columns:200px 1fr;
  border-bottom:1px solid var(--line);
  padding:26px 8px;
}
.company-table dt{
  font-size:12px; font-weight:500; letter-spacing:.2em; color:var(--ink-40);
  padding-top:4px;
}
.company-table dd{ font-size:15px; font-weight:500; line-height:2; }
.company-table dd a{ border-bottom:1px solid var(--accent); padding-bottom:2px; }
.company-table dd a:hover{ color:var(--accent); }
@media (max-width:640px){
  .company-table > div{ grid-template-columns:1fr; gap:6px; padding:20px 4px; }
}

/* ============ CTA ============ */
.sec-cta{
  min-height:92vh;
  display:flex; align-items:center;
  padding:16vh 0 12vh;
}
.cta-wrap{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.cta-title{
  font-weight:700;
  font-size:clamp(1.9rem, 5.2vw, 4.4rem);
  line-height:1.45; letter-spacing:.01em;
  margin:1em 0 1.2em;
}
.cta-actions{ display:flex; flex-direction:column; align-items:center; gap:26px; }
.cta-sub{
  font-size:13px; font-weight:500; letter-spacing:.1em; color:var(--ink-60);
  border-bottom:1px solid var(--accent); padding-bottom:4px;
  transition:color .3s;
}
.cta-sub:hover{ color:var(--accent); }

/* ============ フッター ============ */
.site-footer{
  border-top:1px solid var(--line);
  background:rgba(250,251,252,.8);
  padding:34px 0;
}
.footer-inner{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.footer-brand{ font-family:var(--font-en); font-weight:700; font-size:18px; }
.footer-note{ margin-left:auto; }
.footer-note::before{ display:none; }
.footer-copy{ font-size:12px; color:var(--ink-60); letter-spacing:.06em; }
.footer-copy a{ border-bottom:1px solid var(--line); }
.footer-copy a:hover{ color:var(--accent); border-color:var(--accent); }
@media (max-width:640px){
  .footer-inner{ flex-direction:column; align-items:flex-start; gap:10px; }
  .footer-note{ margin-left:0; }
}

/* ============================================================
   DESIGN RETAKE — 肉付け層
   「裸の線・素フォントだけの箇所ゼロ」総点検
   ============================================================ */

/* ---- タイポ強化：300/900の極端コントラスト + ヘビー級化 ---- */
.problem-title,.hout-title,.cta-title,
.ccard h3,.icard h3,.flow-step h3,.ab-card p{ font-weight:900; }
.problem-sub,.icard p,.flow-step p,.ccard footer,
.ai-a,.company-table dd,.footer-copy{ font-weight:600; }
.gnav a,.hs-label,.loader-label,.phase-rail i,.phase-rail em,
.hero-coords,.ccard-id,.icard-no,.icard-tag,.ab-tag,.kpi-note,
.belt-gate span,.radar-frame span,.form-window label,
.company-table dt,.hpanel-hint,.term-titlebar span,.ai-titlebar em{ font-weight:700; }
.term-lines{ font-weight:500; }

/* ---- グラデテキスト（英数字のキーナンバー） ---- */
.term-kpi b,.kpi b,.belt-counter b{
  background:linear-gradient(135deg, var(--ink) 35%, var(--accent) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ---- 事業アイコンバッジ ---- */
.biz-badge{
  width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line);
  background:linear-gradient(180deg, #FEFEFF, #E7EEF8);
  box-shadow:inset 0 1px 0 #fff, 0 10px 22px -14px rgba(26,35,51,.35);
  position:relative;
  margin-top:14px;
}
.biz-badge::before,.biz-badge::after{
  content:""; position:absolute; width:9px; height:9px;
  border:solid var(--accent); opacity:.65;
}
.biz-badge::before{ top:-1px; left:-1px; border-width:1.5px 0 0 1.5px; }
.biz-badge::after{ bottom:-1px; right:-1px; border-width:0 1.5px 1.5px 0; }
.biz-badge svg{ width:26px; height:26px; overflow:visible; }
.biz-badge svg *{ stroke:var(--ink); stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.biz-badge svg .ic-a{ stroke:var(--accent); }
.biz-badge svg .ic-fill{ fill:var(--accent); stroke:none; }
.biz-badge-dark{
  border-color:var(--dark-line);
  background:linear-gradient(180deg, rgba(231,237,247,.1), rgba(231,237,247,.02));
  box-shadow:inset 0 1px 0 rgba(231,237,247,.1);
}
.biz-badge-dark svg *{ stroke:var(--dark-ink); }
.biz-badge-dark svg .ic-a{ stroke:#7FA6F0; }
.biz-badge-dark svg .ic-fill{ fill:#7FA6F0; }

/* ---- 仕切り線のグラデフェード化 ---- */
.hout-list li,.ab-meta,.form-titlebar,.dash-panel-head,.ai-titlebar{
  border-bottom:1px solid;
  border-image:linear-gradient(90deg, rgba(37,99,235,.55), var(--line) 34%, rgba(197,212,232,.06)) 1;
}
.hout-list i{
  border:1px solid rgba(37,99,235,.4);
  background:rgba(37,99,235,.06);
  padding:2px 8px;
}
.hout-list li{ font-weight:700; }

/* ---- コンベアカード ---- */
.ccard{
  background:linear-gradient(180deg, #FEFEFF, #EDF2FA);
  box-shadow:0 18px 40px -22px rgba(26,35,51,.3), inset 0 0 0 1px rgba(255,255,255,.65), inset 0 1px 0 #fff;
}
.ccard::before,.ccard::after{
  content:""; position:absolute; width:10px; height:10px;
  border:solid rgba(37,99,235,.5);
}
.ccard::before{ top:-1px; left:-1px; border-width:1.5px 0 0 1.5px; }
.ccard::after{ bottom:-1px; right:-1px; border-width:0 1.5px 1.5px 0; }
.ccard-id{
  border:1px solid var(--line-soft);
  background:rgba(232,238,246,.7);
  padding:2px 7px;
}
.ccard-lines i{
  background:linear-gradient(90deg, var(--panel), rgba(232,238,246,.4));
  border-radius:2px;
}

/* ---- 業界特化4枚カード ---- */
.icard{
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(236,242,250,.85));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6), inset 0 1px 0 #fff, 0 14px 30px -24px rgba(26,35,51,.4);
}
.icard::before,.icard::after{
  content:""; position:absolute; width:11px; height:11px;
  border:solid var(--accent); opacity:.4;
  transition:opacity .4s, width .4s, height .4s;
}
.icard::before{ top:-1px; left:-1px; border-width:1.5px 0 0 1.5px; }
.icard::after{ bottom:-1px; right:-1px; border-width:0 1.5px 1.5px 0; }
.icard:hover::before,.icard:hover::after{ opacity:1; width:16px; height:16px; }
.icard:hover{
  box-shadow:0 24px 44px -26px rgba(37,99,235,.4), inset 0 0 0 1px rgba(255,255,255,.8), 0 0 0 1px rgba(37,99,235,.25);
}
/* ジオラマ主役化との同期ハイライト */
.icard.is-live{
  transform:translateY(-6px);
  border-color:var(--accent);
  box-shadow:0 24px 44px -26px rgba(37,99,235,.4), inset 0 0 0 1px rgba(255,255,255,.8), 0 0 0 1px rgba(37,99,235,.25);
}
.icard.is-live::before,.icard.is-live::after{ opacity:1; width:16px; height:16px; }
.icard-no{
  display:inline-block;
  border:1px solid rgba(37,99,235,.35);
  background:rgba(37,99,235,.05);
  padding:2px 8px;
}
.icard-tag{
  border-top:1px solid;
  border-image:linear-gradient(90deg, rgba(37,99,235,.5), var(--line-soft) 40%, rgba(197,212,232,0)) 1;
}

/* ---- KPI / ダッシュボード / A/B ---- */
.dash-panel,.ab-stage{
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(238,243,250,.9));
  box-shadow:0 24px 60px -36px rgba(26,35,51,.35), inset 0 0 0 1px rgba(255,255,255,.6), inset 0 1px 0 #fff;
  position:relative;
}
.dash-panel::before,.dash-panel::after,
.ab-stage::before,.ab-stage::after{
  content:""; position:absolute; width:12px; height:12px;
  border:solid var(--accent); opacity:.45; pointer-events:none;
}
.dash-panel::before,.ab-stage::before{ top:-1px; left:-1px; border-width:1.5px 0 0 1.5px; }
.dash-panel::after,.ab-stage::after{ bottom:-1px; right:-1px; border-width:0 1.5px 1.5px 0; }
.kpi{
  background:linear-gradient(180deg, #FEFEFF, #EDF2FA);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6), inset 0 1px 0 #fff, 0 12px 26px -20px rgba(26,35,51,.4);
  position:relative; overflow:hidden;
  transition:transform .5s var(--ease-out), box-shadow .5s;
}
.kpi::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--accent), rgba(37,99,235,0));
}
.kpi:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 34px -20px rgba(37,99,235,.45), inset 0 0 0 1px rgba(255,255,255,.8);
}
.ab-card{
  background:linear-gradient(180deg, #fff, #F3F7FC);
  box-shadow:inset 0 1px 0 #fff, 0 14px 30px -22px rgba(26,35,51,.35);
}
.ab-card.is-front{ border-color:rgba(37,99,235,.35); }
.ab-tag{
  display:inline-block;
  border:1px solid var(--line-soft);
  background:rgba(232,238,246,.7);
  padding:2px 8px; align-self:flex-start;
}

/* ---- ターミナル / フォーム窓 ---- */
.term-window{
  box-shadow:0 30px 70px -30px rgba(26,35,51,.55), inset 0 1px 0 rgba(197,212,232,.14), 0 0 0 1px rgba(11,15,26,.9);
  position:relative;
}
.term-window::before,.term-window::after{
  content:""; position:absolute; width:12px; height:12px;
  border:solid rgba(91,141,239,.7); pointer-events:none;
}
.term-window::before{ top:-1px; left:-1px; border-width:1.5px 0 0 1.5px; }
.term-window::after{ bottom:-1px; right:-1px; border-width:0 1.5px 1.5px 0; }
.term-titlebar{ background:linear-gradient(180deg, rgba(197,212,232,.08), rgba(197,212,232,0)); }
.term-titlebar i:first-child{ background:rgba(91,141,239,.85); box-shadow:0 0 8px rgba(91,141,239,.7); }
.form-window{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(238,243,250,.94));
  box-shadow:0 24px 50px -30px rgba(26,35,51,.35), inset 0 0 0 1px rgba(255,255,255,.7), inset 0 1px 0 #fff;
}
.form-send{
  background:linear-gradient(160deg, #3B82F6 0%, var(--accent) 46%, #1E40AF 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(11,15,26,.28);
  font-weight:700;
}

/* ---- AI窓 / 軌道ノード ---- */
.ai-window{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,244,251,.95));
  box-shadow:0 34px 80px -40px rgba(26,35,51,.45), inset 0 0 0 1px rgba(255,255,255,.7), inset 0 1px 0 #fff;
}
.ai-window::before,.ai-window::after{
  content:""; position:absolute; width:12px; height:12px;
  border:solid var(--accent); opacity:.5; pointer-events:none;
}
.ai-window::before{ top:-1px; left:-1px; border-width:1.5px 0 0 1.5px; }
.ai-window::after{ bottom:-1px; right:-1px; border-width:0 1.5px 1.5px 0; }
.orbit-node{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:700;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(238,243,250,.9));
  box-shadow:inset 0 1px 0 #fff, 0 8px 18px -12px rgba(26,35,51,.4);
}
.orbit-node::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--accent); flex:none;
}

/* ---- 導入フロー：ステップをカード化 ---- */
.flow-step{
  position:relative;
  padding:26px 24px 24px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(238,243,250,.8));
  box-shadow:inset 0 1px 0 #fff, 0 18px 40px -30px rgba(26,35,51,.4);
  transition:transform .5s var(--ease-out), box-shadow .5s, border-color .4s;
}
.flow-step:hover{
  transform:translateY(-5px);
  border-color:rgba(37,99,235,.5);
  box-shadow:0 26px 50px -28px rgba(37,99,235,.4), inset 0 1px 0 #fff;
}
.flow-step::before,.flow-step::after{
  content:""; position:absolute; width:10px; height:10px;
  border:solid var(--accent); opacity:.5;
}
.flow-step::before{ top:-1px; left:-1px; border-width:1.5px 0 0 1.5px; }
.flow-step::after{ bottom:-1px; right:-1px; border-width:0 1.5px 1.5px 0; }
.flow-node.lit{ filter:drop-shadow(0 0 6px rgba(37,99,235,.8)); }
@media (max-width:820px){
  .flow-steps{ gap:14px !important; }
}

/* ---- 会社概要表 ---- */
.company-table{
  border-top:1px solid;
  border-image:linear-gradient(90deg, var(--accent), var(--line) 30%, rgba(197,212,232,.2)) 1;
}
.company-table > div{
  border-bottom:1px solid;
  border-image:linear-gradient(90deg, var(--line), rgba(197,212,232,.18)) 1;
  position:relative;
  transition:background .4s, padding-left .4s var(--ease-out);
}
.company-table > div:hover{
  background:linear-gradient(90deg, rgba(37,99,235,.05), rgba(37,99,235,0) 60%);
  padding-left:18px;
}
.company-table > div::before{
  content:""; position:absolute; left:2px; top:50%;
  width:6px; height:6px; margin-top:-3px;
  background:var(--accent);
  opacity:0; transition:opacity .3s;
}
.company-table > div:hover::before{ opacity:1; }

/* ---- フッター：ティッカー + グラデ罫 ---- */
.site-footer{
  border-top:1px solid;
  border-image:linear-gradient(90deg, rgba(37,99,235,.5), var(--line) 40%, rgba(197,212,232,.2)) 1;
}
.footer-ticker{
  overflow:hidden;
  border-bottom:1px solid var(--line-soft);
  padding:10px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ft-track{
  display:flex; white-space:nowrap; width:max-content;
  animation:ticker 42s linear infinite;
}
.ft-track span{
  font-family:var(--font-en); font-size:10px; font-weight:700;
  letter-spacing:.32em; color:var(--ink-40);
  text-transform:uppercase;
}
@keyframes ticker{ to{ transform:translateX(-50%); } }
.footer-brand{ font-weight:700; }
.footer-note{ font-weight:700; }

/* ---- ベルトゲート / 数値まわりの整合 ---- */
.belt-gate{
  background:linear-gradient(rgba(37,99,235,.07), rgba(37,99,235,0));
}
.kpi b em{
  font-style:normal; font-size:.58em; font-weight:700;
  margin-left:.05em;
}
.problem-unit{ -webkit-text-stroke:2.5px rgba(26,35,51,.3); }

/* ============ reduced-motion ============ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001s !important;
    animation-iteration-count:1 !important;
    transition-duration:.15s !important;
  }
}
.reduced [data-reveal],
.reduced .fcl{ opacity:1 !important; transform:none !important; }
.reduced .stamp{ opacity:1 !important; transform:rotate(-12deg) !important; }
.reduced .ai-cite{ border-color:var(--accent); }
html.js.reduced body{ cursor:auto; }
.reduced .cursor-dot,.reduced .cursor-ring{ display:none; }
/* reduced: コンベアは静的な横並びへ */
.reduced .belt{ height:auto; overflow:visible; padding:30px 0 20px; }
.reduced .belt-cards{ position:static; display:flex; gap:16px; overflow-x:auto; padding-bottom:16px; }
.reduced .ccard{ position:static; margin-left:0; flex:none; top:auto; }
.reduced .belt-gate{ display:none; }
.reduced .hwrap{ height:auto; overflow:visible; padding:16vh 0 8vh; }
.reduced .htrack{ flex-wrap:wrap; }
.reduced #hero-title,.reduced #cta-title{ opacity:1 !important; }
/* reduced: 新装飾の静的フォールバック */
.reduced .ht-swash path{ opacity:1 !important; }
.reduced #flowchart .fic,
.reduced #flowchart .fcb{ opacity:1 !important; }
.reduced #flowchart .fdeco,
.reduced #flowchart .fjn-g{ opacity:1 !important; }
.reduced #flowchart .fpl{ opacity:0 !important; animation:none !important; }
.reduced .micro.chip::before{ animation:none; }
.reduced .iso-chip,.reduced .iso-links path,.reduced .iso-links circle{ transition:none; }
.reduced .ft-track{ animation:none; }
.reduced #flowchart .fjh{ animation:none; opacity:.35; }