/* 生成物: muse-top-C51.html から build_theme_top.py で分解。直接編集しない。
   自己完結(トークン/.hd/.ft/ローダー込み)。muse-base.css と同時に読まないこと。
   --ldlogo のbase64はローダーの一部として意図的に埋めたまま(外部化すると
   ローダー表示時点で画像が未着の可能性が生まれる)。 */

/* ═══════════════════════════════════════════════════
   MUSE TOP r3 — フル画面Bento × 現行扉エンジン × Blue Current収束
   原則:
   - 扉: scrollY起点prog / 継ぎ目に沿った平行裂開 / 3状態リセット(現行エンジン準拠)
   - WebGL: 収束(Multiple signals → One focus)の視覚化。DOM演出はWebGL非依存で成立
   - 柵: html{overflow-x:clip} + .stage{overflow:clip} の二重
   - コントラスト: 全ペア4.5:1以上を事前検証済み
   ═══════════════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#EEF2FA;
  --ink:#0B1526;
  --sub:#3A4763;
  --muted:#55648A;
  --bl:#1847CC;
  --bl2:#2E63E8;
  --bl3:#59B6FF;
  --navy:#0D1B33;
  --line:rgba(11,21,38,.09);
  --slit:3px;
  --fd:'Sora',sans-serif;
  --fj:'Noto Sans JP',sans-serif;
  --fjs:'Noto Serif JP',serif;
  --fi:'Instrument Serif',serif;   /* Vision補助コピー専用。他所で使わない */
  --fm:'Space Mono',monospace;
  --smooth:cubic-bezier(.16,1,.3,1);
  --header:64px;
}

html{overflow-x:clip}  /* 柵①: 扉translateX(±110%)のはみ出しをviewportで遮断 */
body{
  font-family:var(--fj);background:var(--bg);color:var(--sub);
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--bl);color:#fff}

/* ══ Header ══ */
.hd{
  position:fixed;inset:0 0 auto;z-index:100;height:var(--header);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(16px,3vw,36px);
  background:rgba(238,242,250,0);
  -webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);
  border-bottom:1px solid rgba(11,21,38,0);
  transition:background .45s var(--smooth),backdrop-filter .45s var(--smooth),
             border-color .45s var(--smooth),box-shadow .45s var(--smooth);
}
.hd.--solid{
  background:rgba(238,242,250,.72);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  border-bottom-color:rgba(11,21,38,.07);
  box-shadow:0 6px 26px -20px rgba(11,21,38,.4);
}
.hd__logo{
  text-decoration:none;display:flex;align-items:center;gap:clamp(9px,1vw,14px);
}
.hd__mark{height:clamp(22px,2.2vw,30px);width:auto;display:block}
.hd__name{
  font-family:var(--fj);font-weight:700;
  font-size:clamp(14px,1.15vw,16px);letter-spacing:.04em;color:var(--ink);
  white-space:nowrap;
}
.hd__logo em{
  font-style:normal;font-size:11px;letter-spacing:.16em;color:var(--muted);
  padding-left:clamp(9px,1vw,14px);border-left:1px solid rgba(11,21,38,.14);
}
@media(max-width:760px){.hd__logo em{display:none}}
@media(max-width:380px){.hd__name{font-size:13px}}
.hd__right{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.hd__nav{display:flex;gap:clamp(14px,2vw,26px)}
.hd__nav a{font-size:12.5px;letter-spacing:.05em;color:var(--sub);text-decoration:none;padding:10px 0}
.hd__nav a:hover{color:var(--ink)}
.hd__cta{
  font-size:12.5px;font-weight:500;letter-spacing:.05em;color:#fff;text-decoration:none;
  padding:10px 18px;border-radius:99px;
  background:linear-gradient(135deg,var(--bl2),var(--bl));
  box-shadow:0 4px 16px rgba(24,71,204,.28);
}
@media(max-width:640px){.hd__nav{display:none}}

/* ══ Mobile menu ══ 白のメニュー面。navy転換はJoinの特権なので使わない。
   ボタンはJS宣言(data-ld)配下でのみ存在 */
.hd__burger{display:none}
.mnav{display:none}
@media(max-width:900px){
  html[data-ld] .hd__burger{
    display:flex;flex-direction:column;justify-content:center;gap:6px;
    width:40px;height:40px;padding:0 6px;margin-left:2px;
    background:none;border:0;cursor:pointer;
  }
  .hd__burger i{display:block;height:2px;background:var(--ink);
    transition:transform .34s var(--smooth),opacity .2s}
  .hd__burger i:nth-child(1){width:22px}
  .hd__burger i:nth-child(2){width:15px;margin-left:7px;transition-delay:.03s}
  html.menu-open .hd__burger i:nth-child(1){transform:translateY(4px) rotate(45deg);width:22px}
  html.menu-open .hd__burger i:nth-child(2){transform:translateY(-4px) rotate(-45deg);width:22px;margin-left:0}
  .mnav{
    position:fixed;inset:0;z-index:90;display:block;
    background:#fff;
    padding:calc(var(--header) + 24px) clamp(24px,7vw,40px) 40px;
    opacity:0;pointer-events:none;visibility:hidden;
    transition:opacity .38s var(--smooth),visibility 0s .38s;
  }
  html.menu-open .mnav{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .38s var(--smooth)}
  html.menu-open{overflow:hidden}
  .mnav ul{list-style:none;margin:8vh 0 0;padding:0;display:flex;flex-direction:column}
  .mnav li{border-bottom:1px solid var(--line)}
  .mnav a{
    display:flex;align-items:baseline;gap:16px;
    padding:22px 2px;text-decoration:none;
    opacity:0;transform:translateY(14px);
    transition:opacity .45s var(--smooth),transform .45s var(--smooth);
  }
  html.menu-open .mnav a{opacity:1;transform:none}
  html.menu-open .mnav li:nth-child(1) a{transition-delay:.10s}
  html.menu-open .mnav li:nth-child(2) a{transition-delay:.17s}
  html.menu-open .mnav li:nth-child(3) a{transition-delay:.24s}
  html.menu-open .mnav li:nth-child(4) a{transition-delay:.31s}
  .mnav i{font-family:var(--fm);font-style:normal;font-size:11px;color:var(--bl)}
  .mnav b{font-family:var(--fd);font-weight:600;font-size:clamp(26px,7.4vw,34px);
    letter-spacing:-.02em;color:var(--ink)}
  .mnav small{font-size:11.5px;letter-spacing:.08em;color:var(--muted)}
  .mnav__ft{margin-top:9vh;font-family:var(--fm);font-size:10px;letter-spacing:.22em;color:var(--muted)}
  @media(prefers-reduced-motion:reduce){
    .mnav,.mnav a,.hd__burger i{transition:none}
  }
}

/* ══ Loader ══ */
/* ローダーはJSが宣言(data-ld)した時だけ存在する。JS不発では最初から無い */
.loader{
  position:fixed;inset:0;z-index:200;background:var(--bg);
  display:none;align-items:center;justify-content:center;
  transition:transform .74s cubic-bezier(.76,0,.24,1);
}
html[data-ld] .loader{display:flex}

.loader.--out{transform:translateY(-101%);pointer-events:none}
/* ── 明け方3案(?exit=a|b|c)。確定後は採用案以外を削除する ── */
.loader__pl{position:absolute;inset:-2% -1%;z-index:0;background:var(--bg);
  transition:transform .82s cubic-bezier(.76,0,.24,1)}
.loader__pl.--t{clip-path:polygon(0 0,100% 0,100% 44%,0 56%)}
.loader__pl.--b{clip-path:polygon(0 56%,100% 44%,100% 100%,0 100%)}
.loader__seam{position:absolute;left:-2%;right:-2%;top:50%;height:2px;z-index:1;
  transform:rotate(-2.9deg) scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--bl),var(--bl3));
  transition:transform .5s var(--smooth)}
.loader:not([data-exit=a]) .loader__pl,
.loader:not([data-exit=a]) .loader__seam{display:none}
.loader__mark,.loader__num,.loader__bar{position:relative;z-index:2}
/* A: 継ぎ目から裂ける — 扉と同角(-2.9deg)の面が上下へ剥がれる。scrub扉の前奏 */
.loader[data-exit=a]{background:none}
.loader[data-exit=a].--done .loader__seam{transform:rotate(-2.9deg) scaleX(1)}
.loader[data-exit=a].--out{transform:none}
.loader[data-exit=a].--out .loader__mark,
.loader[data-exit=a].--out .loader__num,
.loader[data-exit=a].--out .loader__bar{opacity:0;transition:opacity .22s var(--smooth)}
.loader[data-exit=a].--out .loader__pl.--t{transform:translate3d(-3vw,-106%,0)}
.loader[data-exit=a].--out .loader__pl.--b{transform:translate3d(3vw,106%,0)}
.loader[data-exit=a].--out .loader__seam{opacity:0;transition:opacity .28s var(--smooth) .12s}
/* B: 青の走査線ワイプ — 左から右へ、進行方向に拭き取られる。seam線の運動版 */
.loader[data-exit=b]{border-left:2px solid var(--bl);
  transition:clip-path .8s cubic-bezier(.76,0,.24,1)}
.loader[data-exit=b].--out{transform:none;clip-path:inset(0 0 0 100.5%)}
/* C: 焦点が外れて白紙に還る — Visionの「焦点が合う」の逆再生。最も静か */
.loader[data-exit=c] .loader__mark,
.loader[data-exit=c] .loader__num,
.loader[data-exit=c] .loader__bar{transition:filter .5s var(--smooth),opacity .5s var(--smooth)}
.loader[data-exit=c].--out{transform:none;opacity:0;transition:opacity .55s var(--smooth) .28s}
.loader[data-exit=c].--out .loader__mark,
.loader[data-exit=c].--out .loader__num,
.loader[data-exit=c].--out .loader__bar{filter:blur(14px);opacity:0}
/* ロゴマークの組み上がり: 2x2象限が四方から収束する(サイト構造「多→収束」の予告)。
   画像はbase64埋め込みでネットワーク非依存=ローダー自身は何も待たない */
.ldMark{position:relative;width:clamp(96px,13vw,144px);aspect-ratio:1;}
.ldq{position:absolute;width:50%;height:50%;
  background-image:var(--ldlogo);background-size:200% 200%;background-repeat:no-repeat;
  opacity:0;transition:opacity .5s var(--smooth),transform .6s var(--smooth);}
.ldq--tl{left:0;top:0;background-position:0 0;transform:translate(-120%,0)}
.ldq--tr{right:0;top:0;background-position:100% 0;transform:translate(0,-120%)}
.ldq--bl{left:0;bottom:0;background-position:0 100%;transform:translate(0,120%)}
.ldq--br{right:0;bottom:0;background-position:100% 100%;transform:translate(120%,0)}
/* 進捗と連動: M→U→S→Eの順で滑り込む */
.loader.--t1 .ldq--tl,.loader.--t2 .ldq--tr,
.loader.--t3 .ldq--bl,.loader.--t4 .ldq--br{opacity:1;transform:translate(0,0)}
/* 完成の一拍 */
.loader.--done .ldMark{animation:ldmp .5s var(--smooth)}
@keyframes ldmp{45%{transform:scale(1.05)}}
.loader__mark .--p{color:var(--bl)}
.loader__num{
  position:absolute;right:clamp(20px,4vw,48px);bottom:clamp(18px,4vh,40px);
  font-family:var(--fm);font-size:clamp(36px,6vw,72px);color:var(--muted);line-height:1;
}
.loader__bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:rgba(11,21,38,.07)}
.loader__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--bl),var(--bl3));transform:scaleX(0);transform-origin:left}

/* ══ Flow / Stage ══ */
.flow{height:220svh;min-height:1700px;position:relative;z-index:5}
.stage{
  position:sticky;top:0;height:100svh;min-height:600px;
  overflow:clip;               /* 柵②: 発生源で遮断(v3の知見) */
  isolation:isolate;
  display:flex;flex-direction:column;
  padding:calc(var(--header) + clamp(6px,1vh,12px)) clamp(10px,1.6vw,20px) clamp(6px,1vh,12px);
  background:
    radial-gradient(80vw 50vw at 82% 8%,rgba(89,182,255,.14),transparent 55%),
    linear-gradient(150deg,#F6F9FE 0%,#EEF2FA 60%,#E9EFFA 100%);
}
/* 設計グリッド(精密さの下地) */
.stage::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(24,71,204,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(24,71,204,.045) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(#000,rgba(0,0,0,.7) 70%,transparent);
}
#gl{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}

/* ══ 三幕の背景: 紙 → 夜 → 白紙 ══ */
.act-dark{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  background:
    radial-gradient(90vw 60vw at 78% 10%,rgba(37,99,235,.30),transparent 58%),
    radial-gradient(70vw 50vw at 15% 95%,rgba(24,71,204,.22),transparent 60%),
    linear-gradient(160deg,#0A1226 0%,#070C18 55%,#05080F 100%);
}
.act-white{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  /* 純白フラットにしない — 周辺をわずかに沈め、視野が中心へ狭まる感覚を作る */
  background:radial-gradient(120vw 100vh at 50% 48%,#FFFFFF 0%,#FFFFFF 46%,#F5F8FE 100%);
}

/* ══ Vision(扉の奥) ══ */
.vision{
  position:absolute;inset:0;z-index:4;
  display:grid;place-items:center;
  padding:clamp(24px,6vh,80px) clamp(20px,5vw,72px);
  opacity:0;pointer-events:none;
}
.vision__inner{width:min(1080px,100%);text-align:center}
/* 日本語主 — 明朝 */
.vision__t{
  font-family:var(--fjs);font-weight:600;
  font-size:clamp(32px,4.8vw,64px);line-height:1.68;letter-spacing:.055em;
  color:var(--ink);
}
.vision__l{display:block;opacity:0;will-change:transform,opacity,filter}
/* 宣言の核 — 青 */
.vision__l.--hot{color:var(--bl)}
/* 暗転の中の一行 — 主張しない。気づかれなくてよい囁き。
   中心を外して下へ置き、白を薄めて背景へ沈める(実測5.6:1で判読は担保) */
.dark-line{
  position:absolute;left:50%;top:68%;z-index:2;
  transform:translate(-50%,-50%);
  width:min(620px,84%);text-align:center;
  font-family:var(--fi);font-style:italic;font-weight:400;
  font-size:clamp(15px,1.5vw,23px);line-height:1.5;letter-spacing:.07em;
  color:rgba(255,255,255,.52);opacity:0;pointer-events:none;
  will-change:transform,opacity;
}

/* ══ Bento(フル画面・扉パネル) ══ */
.bento{
  position:relative;z-index:10;flex:1;min-height:0;
  width:106%;
  display:grid;gap:var(--slit);
  grid-template-columns:1.18fr .62fr 1.05fr;
  grid-template-rows:.92fr 1fr clamp(168px,23svh,214px);
  margin:-48px -3% -46px;            /* 四辺すべて出血 — 帯は画面下まで届く */
  transform:skewY(-2.5deg);          /* 右肩上がり — 成長曲線 / Giant Killing */
}
/* 額装のマット線 — 板が減ったぶん、枠で秩序を作る */
.z::before{
  content:'';position:absolute;z-index:2;pointer-events:none;
  inset:clamp(8px,1vw,14px);
  border:1px solid rgba(24,71,204,.085);
}
.z-a::before{display:none}       /* 宣言は板なし */
.z-d::before{border-color:rgba(255,255,255,.20)}
.z-f::before{border-color:rgba(255,255,255,.16)}
.z__in{
  position:relative;width:100%;height:100%;
  display:flex;flex-direction:column;
  transform:skewY(2.5deg);            /* 中身は水平に保つ */
  padding:clamp(20px,2.3vw,30px);
}
.z{
  position:relative;overflow:hidden;
  background:#fff;
  border:1px solid rgba(11,21,38,.11);
  box-shadow:0 10px 34px -18px rgba(11,21,38,.14);
  display:block;
  text-decoration:none;color:inherit;
  will-change:transform,opacity;
}
/* 入場(ローダー後に.--in付与)。隠すのはdata-ld配下のみ=JS不発では常時表示 */
html[data-ld] .z{opacity:0;transform:translateY(18px);transition:opacity .9s var(--smooth),transform .9s var(--smooth)}
/* zA内部は行単位の段差で立ち上がる(Visionの0/0.14と同語) */
html[data-ld] .z-a__eyebrow,
html[data-ld] .z-a__h1 .--lead,
html[data-ld] .z-a__coreRow,
html[data-ld] .z-a__bottom{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--smooth),transform .6s var(--smooth);
}
.z-a.--in .z-a__eyebrow{opacity:1;transform:none;transition-delay:.05s}
.z-a.--in .z-a__h1 .--lead{opacity:1;transform:none;transition-delay:.16s}
.z-a.--in .z-a__coreRow{opacity:1;transform:none;transition-delay:.27s}
.z-a.--in .z-a__bottom{opacity:1;transform:none;transition-delay:.48s}
/* 底バーは宣言の着地後に左から引かれる */
html[data-ld] .z-a__base{transform:scaleX(0);transform-origin:left;transition:transform .5s var(--smooth) .62s}
.z-a.--in .z-a__base{transform:scaleX(1)}
html[data-ld] .z.--in{opacity:1;transform:none}
.z:nth-child(1){transition-delay:.05s}.z:nth-child(2){transition-delay:.12s}
.z:nth-child(3){transition-delay:.19s}.z:nth-child(4){transition-delay:.26s}
.z:nth-child(5){transition-delay:.33s}.z:nth-child(6){transition-delay:.40s}

.lb{font-family:var(--fm);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

/* A: Built On Trust. */
.z-a{
  grid-column:1 / 3;grid-row:1;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  overflow:visible;
}
.z-a .z__in{justify-content:center;gap:clamp(10px,1.4vh,18px);padding:clamp(18px,2vw,28px) clamp(20px,2.2vw,30px);overflow:visible}
/* 板がないぶん、文字自身に微かな浮遊感を与える */
.z-a__h1 .--core{text-shadow:0 14px 40px rgba(11,21,38,.10)}


.z-a__mid{display:flex;flex-direction:column;gap:clamp(6px,1vh,12px)}
.z-a__eyebrow{
  display:flex;align-items:center;gap:12px;
  font-family:var(--fd);font-weight:600;font-size:clamp(12px,1.1vw,17px);
  letter-spacing:.18em;color:var(--bl);
}
.z-a__eyebrow::before{
  content:'';width:clamp(20px,2.4vw,38px);height:1px;
  background:linear-gradient(90deg,rgba(24,71,204,.15),var(--bl));
}
/* 導入は中サイズ、核だけを巨大に — 重量を一点に集中 */
/* 導入は中サイズ、核だけを巨大に — 重量を一点に集中 */
.z-a__h1 .--lead{
  font-weight:500;
  font-size:clamp(26px,5.0vw,84px);
  line-height:1;letter-spacing:-.032em;color:var(--bl);
  margin-left:.02em;                /* 大字との視覚的頭合わせ */
}
.z-a__h1 .--core{
  font-weight:800;
  font-size:clamp(56px,8.2vw,122px);
  letter-spacing:-.055em;color:var(--ink);
  margin-top:clamp(1px,.35vh,5px);
  display:inline-block;
}
.z-a__h1 .--core em{font-style:normal;color:var(--ink)}
.z-a__h1 .--p{color:var(--bl)}
/* 底を作って重心を下げる */
.z-a__base{
  width:clamp(120px,16vw,260px);height:4px;flex-shrink:0;
  background:linear-gradient(90deg,var(--bl),rgba(24,71,204,.12));
}
/* 訳文は宣言の直下に置く — 対応関係を切らない */
.z-a__bottom{
  display:flex;align-items:center;gap:clamp(12px,1.6vw,20px);flex-wrap:wrap;
  margin-top:clamp(8px,1.2vh,14px);
}
.z-a__h1{
  font-family:var(--fd);
  display:flex;flex-direction:column;
  line-height:1;color:var(--ink);
  margin-left:-.04em;               /* 光学的左揃え */
}
.z-a__coreRow{display:flex;align-items:flex-end}
.z-a__h1 .--p{color:var(--bl);text-shadow:0 0 14px rgba(24,71,204,.5),0 0 40px rgba(24,71,204,.22)}

/* D: 現場写真 */
.z-d{grid-column:3;grid-row:1 / 3}
.z-d .z__in{padding:0;justify-content:flex-end}
.z-d__ph{position:absolute;inset:0;background:linear-gradient(140deg,#C9D6EA,#8FA3C4)}
.z-d__ph img{width:100%;height:100%;object-fit:cover}
.z-d__grad{position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,21,38,.78),rgba(11,21,38,.05) 55%)}
.z-d__copy{position:relative;padding:clamp(16px,1.9vw,26px);color:#fff}
.z-d__q{font-family:var(--fjs);font-size:clamp(15px,1.42vw,20px);line-height:1.9;letter-spacing:.06em;display:block}
.z-d__rule{width:34px;height:1px;background:rgba(255,255,255,.5);margin:10px 0}
.z-d__a{font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.86)}

/* E: Solutions CTA */
.z-e{grid-column:1;grid-row:2}
.z-e .z__in{justify-content:space-between}
.z-e:hover{border-color:rgba(24,71,204,.35)}

/* F: Recruit */
.z-f{
  grid-column:1 / 4;grid-row:3;
  background:linear-gradient(100deg,#0B1B38 0%,#122E63 46%,#1847CC 100%);
  border-color:rgba(89,182,255,.34);
}
.z-f::after{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;z-index:2;
  background:linear-gradient(90deg,rgba(89,182,255,0),rgba(89,182,255,.95) 30%,rgba(147,197,253,1) 62%,rgba(89,182,255,0));
}
.z-f .z__in{
  flex-direction:row;align-items:center;gap:clamp(18px,3vw,48px);
  padding-inline:clamp(24px,3.4vw,54px);
  padding-bottom:clamp(46px,5.6vw,84px);   /* せん断で下がる左端の切れを回避 */
}
.z-f__badge{display:flex;align-items:center;gap:7px}
.z-f__dot{width:6px;height:6px;border-radius:50%;background:#16A34A;box-shadow:0 0 8px rgba(22,163,74,.7)}
@media(prefers-reduced-motion:no-preference){
  .z-f__dot{animation:pulse 1.6s ease-out infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.45)}100%{box-shadow:0 0 0 9px rgba(22,163,74,0)}}
}

/* G: かざみどり(白) */
.z-g{grid-column:2;grid-row:2;background:#fff}
.z-g .z__in{justify-content:space-between}
.z-g .lb{color:var(--muted)}  /* 白地5.87:1 (旧ダーク版#8FA6CCは2.47:1でNG) */


/* ── E: 事業内容 ── */
.z-e__head{display:flex;flex-direction:column;gap:8px}
.z-e__grid{
  list-style:none;flex:1;min-height:0;
  margin:clamp(12px,1.8vh,20px) 0;
  display:grid;grid-template-columns:1fr 1fr;
  align-content:center;
  gap:clamp(10px,2.2vh,24px) clamp(14px,1.8vw,28px);
}
.z-e__grid li{
  display:flex;align-items:baseline;gap:10px;
  font-size:clamp(14px,1.25vw,18px);font-weight:500;color:var(--ink);
  border-bottom:1px solid rgba(11,21,38,.08);padding-bottom:clamp(6px,1.2vh,12px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.z-e__grid i{font-family:var(--fm);font-style:normal;font-size:clamp(10px,.9vw,13px);color:var(--bl);flex-shrink:0}
.z-e__btn-en{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:500;font-size:clamp(13px,1.05vw,15px);
  letter-spacing:.05em;color:var(--ink);
}
.z-e__btn-en svg{width:22px;height:10px;stroke:var(--bl);fill:none;stroke-width:1.6;transition:transform .3s var(--smooth)}
.z-e:hover .z-e__btn-en svg{transform:translateX(4px)}

/* ── G: かざみどり ── */
.z-g__mid{display:flex;flex-direction:column;gap:10px;margin:auto 0;padding-block:clamp(6px,1.6vh,18px)}
.z-g__logo{height:clamp(24px,3vh,36px);width:auto;object-fit:contain;object-position:left;filter:none;opacity:1}
.z-g__tagline{font-size:11.5px;letter-spacing:.04em;color:var(--muted)}
.z-g__arr{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:500;font-size:13px;letter-spacing:.04em;color:var(--ink);
}
.z-g__arr svg{width:16px;height:8px;stroke:var(--bl);fill:none;stroke-width:1.6;transition:transform .3s var(--smooth)}
.z-g:hover .z-g__arr svg{transform:translateX(4px)}

/* ── F: RECRUIT(全幅・濃色) ── */
.z-f .lb{color:#9FC0F5}
.z-f__left{display:flex;flex-direction:column;gap:8px;flex-shrink:0}
.z-f__badge{display:flex;align-items:center;gap:8px}
.z-f__t{
  font-family:var(--fd);font-weight:800;
  font-size:clamp(28px,3.4vw,50px);line-height:.95;letter-spacing:-.035em;color:#fff;
}
.z-f__t .--p{color:var(--bl3);text-shadow:0 0 18px rgba(89,182,255,.7)}
.z-f__mid{
  display:flex;flex-direction:column;gap:7px;
  padding-left:clamp(18px,3vw,48px);
  border-left:1px solid rgba(255,255,255,.16);
}
.z-f__ja{font-family:var(--fjs);font-size:clamp(14px,1.3vw,20px);letter-spacing:.08em;color:#fff}
.z-f__roles{font-family:var(--fm);font-size:11px;letter-spacing:.1em;color:#9FC0F5}
.z-f__cta{
  margin-left:auto;flex-shrink:0;
  display:inline-flex;align-items:center;gap:12px;
  font-size:13px;font-weight:500;letter-spacing:.06em;color:#fff;
  padding:12px 22px;border:1px solid rgba(255,255,255,.34);border-radius:2px;
  transition:background .3s;
}
.z-f__cta svg{width:22px;height:10px;stroke:#fff;fill:none;stroke-width:1.6;transition:transform .3s var(--smooth)}
.z-f:hover .z-f__cta{background:rgba(255,255,255,.12)}
.z-f:hover .z-f__cta svg{transform:translateX(4px)}

@media(max-height:660px) and (min-width:768px){
  .z-e__grid{margin:8px 0 8px;gap:6px 18px}
  .z-e__grid li{font-size:13px;padding-bottom:4px}
  .z-a__h1 .--core{font-size:clamp(44px,6.0vw,86px)}
  .z-a__h1 .--lead{font-size:clamp(22px,3.7vw,58px)}
}

/* ══ Slit runners(継ぎ目の予告光) ══ */
.slit-runner{
  position:absolute;z-index:12;top:-120px;width:2px;height:96px;opacity:0;
  background:linear-gradient(transparent,rgba(89,182,255,.95) 30%,var(--bl) 60%,transparent);
  box-shadow:0 0 14px rgba(89,182,255,.8);
  pointer-events:none;
}
#runL{left:calc(1.18 / 2.85 * 100%)}
#runR{left:calc(1.80 / 2.85 * 100% + var(--slit))}

/* ══ Scroll hint ══ */
.hint{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:clamp(10px,1.6vh,18px);z-index:12;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  font-family:var(--fm);font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);
  padding:0;color:rgba(255,255,255,.72);
  transition:opacity .4s;
}
.hint__tick{width:1px;height:20px;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.04));overflow:hidden;position:relative;order:2}
@media(prefers-reduced-motion:no-preference){
  .hint__tick::after{content:'';position:absolute;left:0;top:-8px;width:1px;height:8px;background:#fff;animation:tick 1.4s var(--smooth) infinite}
  @keyframes tick{to{top:26px}}
}

/* ══ After(扉の先) ══ */
/* ═══════════════════════════════════════════════════
   後半セクション (設計書v3準拠)
   01 Solutions / 02 Performance / 03 Join Us / 04 Contact / Footer
   規則: 通常スクロール・scrub禁止 / transform+opacityのみ /
        青は到達点・進行方向・CTAのみ / 影を使わず面と1px罫で奥行き
   ═══════════════════════════════════════════════════ */
:root{
  --navy-deep:#070C18;
  --on-navy-sub:rgba(255,255,255,.72);
  --sec-y:clamp(110px,15vh,200px);
  --sec-x:clamp(20px,5vw,72px);
  --content-max:1300px;
  /* .chap左端から画面端までの距離。写真断片の出血量に使う */
  --bleed:calc(var(--sec-x) + max(0px, (100vw - 2*var(--sec-x) - var(--content-max))/2));
}
.sec{position:relative;z-index:6;background:#fff;padding:var(--sec-y) var(--sec-x);overflow:clip}
.wrap{max-width:var(--content-max);margin:0 auto}
/* 見出しは宣言文が主役。カテゴリ名は番号ラベルへ降格し、章の文法を上部と揃える */
.sec__open{font-family:var(--fj);font-weight:700;
  font-size:clamp(24px,3vw,44px);line-height:1.5;letter-spacing:.01em;
  color:var(--ink);margin-top:clamp(14px,2vh,22px);}
.sec__open .--p{color:var(--bl)}
/* ── 01 Solutions: 二領域の章 ──
   章の主役は宣言文。英文テーゼ84px = ヒーローlead 84pxと同スケール(lead:core比0.69の梯子に接続)。
   写真は場を作らず、シャープな断片2枚の非対称配置で文字に従属する。
   奥行きは面の重なりと白の切れ目で作る(blur場は白基調と両立しないため廃止)。 */
.chap{position:relative;max-width:var(--content-max);
  margin:clamp(64px,10vh,120px) auto 0;
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,2.2vw,28px);
  align-items:stretch;}
/* 章の高さはテキスト+余白で決まる。写真はその全高に張る=空白が構造的に生まれない */
.chap__tx{grid-column:1/8;grid-row:1;position:relative;z-index:1;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(70px,11vh,140px);}
.chap--rev .chap__tx{grid-column:6/13}
/* 写真は各章1枚、無加工、章の全高に張って余白へ出血。 */
.chap__ph{grid-column:8/13;grid-row:1;position:relative;z-index:0;align-self:stretch;
  display:flex;flex-direction:column;}
.chap--rev .chap__ph{grid-column:1/6}
.chap__fig{margin:0;flex:1;display:flex;flex-direction:column;min-height:0}
.chap__fig .ph{flex:1;min-height:clamp(420px,56vh,640px);margin-right:calc(-1*var(--bleed))}
.chap--rev .chap__fig .ph{margin-right:0;margin-left:calc(-1*var(--bleed))}
.ph{position:relative;overflow:hidden;
  background:linear-gradient(135deg,#EEF3FC 0%,#E3EBF9 48%,#F7FAFF 100%);}
/* 写真は無加工。プロの素材の色をそのまま出す(フィルタ・色被せは温かみを殺すため禁止)。
   scale(1.12)はパララックスの可動域。JS不発でもこの静止状態で完結する */
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.12);}
.ph--ring img{object-position:42% 46%}
.ph--talk img{object-position:50% 40%}
.ph--team img{object-position:50% 34%}
/* 図版としてのキャプション。青の底線はサイト共通の言語 */
.ph__cap{display:flex;align-items:center;gap:clamp(10px,1.2vw,14px);
  margin-top:clamp(12px,1.8vh,18px);
  font-family:var(--fm);font-size:10px;letter-spacing:.26em;color:var(--muted);}
.ph__cap::before{content:'';width:clamp(28px,3.4vw,52px);height:3px;flex-shrink:0;
  background:linear-gradient(90deg,var(--bl),rgba(24,71,204,.12));}
.chap--rev .ph__cap{justify-content:flex-end;flex-direction:row-reverse}
.chap--rev .ph__cap::before{background:linear-gradient(270deg,var(--bl),rgba(24,71,204,.12))}
.chap__tx .lb{display:block}
/* 章の主役: 英文テーゼ。字間はヒーローleadと同じ-.032em */
.chap__en{margin-top:clamp(16px,2.4vh,26px);
  font-family:var(--fd);font-weight:300;
  font-size:clamp(34px,5.8vw,84px);line-height:1.06;letter-spacing:-.032em;
  color:var(--bl);}
.chap__jp{margin-top:clamp(14px,2vh,22px);
  font-family:var(--fj);font-weight:700;
  font-size:clamp(16px,1.6vw,23px);line-height:1.7;letter-spacing:.01em;
  color:var(--ink);}
.chap__rule{width:clamp(48px,6vw,88px);height:3px;
  margin:clamp(22px,3.2vh,36px) 0 clamp(18px,2.6vh,26px);
  background:linear-gradient(90deg,var(--bl),rgba(24,71,204,.12));}
.biz{list-style:none}
.biz li+li{margin-top:0}
.biz a{
  display:flex;align-items:baseline;gap:clamp(10px,1.2vw,16px);
  padding-block:clamp(13px,1.9vh,21px);
  border-bottom:1px solid var(--line);
  color:var(--ink);text-decoration:none;
}
.biz i{font-family:var(--fm);font-style:normal;font-size:clamp(11px,.95vw,14px);color:var(--bl);flex-shrink:0}
.biz b{font-family:var(--fj);font-weight:600;font-size:clamp(15px,1.4vw,20px);letter-spacing:.02em}
.biz em{margin-left:auto;font-style:normal;color:var(--bl);transition:transform .2s ease}
.biz a:hover em{transform:translateX(4px)}
.biz a:hover b{color:var(--bl)}
.biz a:focus-visible{outline:2px solid var(--bl);outline-offset:3px}
/* かざみどり = 買取領域内の従属行 */
.kaza{
  margin-top:clamp(18px,2.6vh,28px);padding-top:clamp(16px,2.2vh,24px);
  border-top:1px solid var(--line);
}
.kaza a{display:flex;align-items:center;gap:12px;color:var(--sub);text-decoration:none;font-size:clamp(12px,1.05vw,14px)}
.kaza a:hover{color:var(--bl)}
.kaza__logo{height:clamp(26px,2.6vw,34px);width:auto;display:block;flex-shrink:0}
.kaza__s{color:var(--muted)}
.kaza em{margin-left:auto;font-style:normal;color:var(--bl);transition:transform .2s ease}
.kaza a:hover em{transform:translateX(4px)}

/* ── 買取領域の実績ブロック ──
   独立した数字セクションを作らない。事業に紐づけて「何の数字か」を明示する。
   左の1px罫が「上のPURCHASEブロックに属する」ことを示す従属マーカー。 */
.rec{
  max-width:var(--content-max);margin:clamp(40px,6vh,72px) auto 0;
  padding-left:clamp(18px,2.4vw,34px);
  border-left:1px solid var(--line);
}
.rec__t{
  font-family:var(--fj);font-weight:700;
  font-size:clamp(26px,3.4vw,52px);line-height:1.35;letter-spacing:-.01em;
  color:var(--ink);margin-top:clamp(12px,1.8vh,20px);
}
.rec__t .num,.rec__t b{color:var(--bl);font-family:var(--fd);font-weight:800;letter-spacing:-.03em}
.rec__g{
  margin-top:clamp(26px,4vh,44px);
  max-width:min(100%,800px);   /* 旧2カラム時のグラフ実効幅を維持(線の傾きの見え方を変えない) */
}
/* 図版キャプション: グラフに従属する位置へ */
.rec__cap{margin-top:clamp(8px,1.4vh,14px);font-size:12px;line-height:1.8;color:var(--muted);font-weight:500}

/* 成長曲線 */
.spark{width:100%;height:auto;display:block;overflow:visible}
.spark__base{stroke:var(--line);stroke-width:1}
.spark__l{fill:none;stroke:var(--bl);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.spark__pk{fill:var(--bl)}
/* 線を隠すのは、JSが実長を測って is-armed を付けた時だけ。
   getTotalLength を持たない環境では隠さず、素の線がそのまま見える。
   出すきっかけは親の .rec__chart(HTML要素)。SVG要素を IntersectionObserver で
   直接監視すると WebKit系(iOS)で発火せず、線が永久に描かれない。 */
html[data-rv] .spark__l.is-armed{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
html[data-rv] .rec__chart.is-in .spark__l.is-armed{stroke-dashoffset:0;transition:stroke-dashoffset .9s cubic-bezier(.16,1,.3,1)}
.spark__x{
  display:flex;justify-content:space-between;margin-top:12px;
  font-family:var(--fm);font-size:10px;letter-spacing:.16em;color:var(--muted);
}

/* ── 03 Join Us: 唯一の色転換 ── */
.seam{height:var(--slit);width:100%;background:linear-gradient(90deg,var(--bl),rgba(24,71,204,.10) 78%,transparent)}
html[data-rv] .seam{width:0}
html[data-rv] .seam.is-in{width:100%;transition:width .5s cubic-bezier(.16,1,.3,1)}
.join{position:relative;z-index:6;background:var(--navy);color:#fff;
  padding:0 var(--sec-x);min-height:100svh;display:flex;align-items:stretch;overflow:clip;}
.join__g{max-width:var(--content-max);margin:0 auto;width:100%;
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(24px,3vw,48px);align-items:stretch;}
/* テキストが余白を持ち、写真は天地+右の3辺を断ち切る二連画面 */
.join__tx{grid-column:1/8;display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;padding-block:var(--sec-y)}
.join__ph{grid-column:8/13;margin-right:calc(-1*var(--bleed))}
.join .lb{color:rgba(255,255,255,.62)}
/* 主役は宣言文。Join Us.は番号ラベルへ降格 */
.join__t{font-family:var(--fj);font-weight:700;
  font-size:clamp(30px,4.6vw,66px);letter-spacing:.01em;line-height:1.3;
  margin:16px 0 clamp(22px,3.4vh,36px);}
.join__t .--p{color:var(--bl3)}
.join__p{font-family:var(--fj);font-size:clamp(14px,1.25vw,17px);line-height:2.05;color:var(--on-navy-sub);max-width:34em}
.join__p b{color:#fff;font-weight:600}
.badge{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid rgba(255,255,255,.34);border-radius:999px;
  padding:7px 15px;font-family:var(--fm);font-size:10.5px;letter-spacing:.22em;color:#fff;
}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--bl3);animation:bdot 2s ease-in-out infinite}
@keyframes bdot{0%,100%{opacity:1}50%{opacity:.25}}
.cta{
  display:inline-flex;align-items:center;gap:12px;
  margin-top:clamp(26px,4vh,44px);min-height:52px;padding:0 clamp(22px,2.4vw,34px);
  background:var(--bl);color:#fff;text-decoration:none;
  font-family:var(--fj);font-weight:600;font-size:clamp(14px,1.2vw,16px);letter-spacing:.04em;
  transition:background .2s ease;
}
.cta em{font-style:normal;transition:transform .2s ease}
.cta:hover{background:var(--bl2)}
.cta:hover em{transform:translateX(4px)}
.cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
.join .ph{height:100%;min-height:clamp(420px,100svh,1100px);background:linear-gradient(150deg,#16233F 0%,#0E1A31 55%,#1B2C4E 100%)}

/* ── 04 Contact: 熱の後の静けさ ── */
.contact{padding:clamp(76px,11vh,130px) var(--sec-x)}
.contact__g{
  max-width:var(--content-max);margin:0 auto;
  display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(20px,4vw,60px);flex-wrap:wrap;
}
.contact__t{font-family:var(--fj);font-weight:700;font-size:clamp(20px,2.2vw,30px);letter-spacing:.02em;color:var(--ink);margin-top:12px}
.contact__p{margin-top:10px;font-size:clamp(13px,1.1vw,15px);line-height:1.95;color:var(--sub)}
.tcta{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;
  font-family:var(--fj);font-weight:600;font-size:clamp(14px,1.2vw,16px);
  color:var(--bl);text-decoration:none;border-bottom:1px solid var(--bl);
}
.tcta em{font-style:normal;transition:transform .2s ease}
.tcta:hover em{transform:translateX(4px)}

/* ── Footer: 終点 ── */
.ft{
  position:relative;z-index:6;color:#fff;
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);
  padding:clamp(70px,10vh,120px) var(--sec-x) clamp(28px,4vh,42px);
}
.ft__g{max-width:var(--content-max);margin:0 auto}
.ft__mark{font-family:var(--fd);font-weight:800;
  font-size:clamp(58px,10vw,160px);letter-spacing:-.055em;line-height:.9;}
.ft__mark .--p{color:var(--bl3);text-shadow:0 0 18px rgba(89,182,255,.45)}
.ft__cols{
  margin-top:clamp(40px,6vh,72px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,48px);
}
.ft__h{font-family:var(--fm);font-size:10px;letter-spacing:.28em;color:rgba(255,255,255,.5);display:block;margin-bottom:14px}
.ft__cols ul{list-style:none}
.ft__cols li+li{margin-top:11px}
.ft__cols a,.ft__cols span{font-size:13px;line-height:1.8;color:var(--on-navy-sub);text-decoration:none}
.ft__cols a:hover{color:#fff}
.ft__cols a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ft__btm{
  margin-top:clamp(44px,6vh,76px);padding-top:20px;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--fm);font-size:10.5px;letter-spacing:.1em;color:rgba(255,255,255,.5);
}

/* ── リビール(共通) ── */
/* 行単位マスクリビール: 行をoverflowで囲み下から押し上げる。
   文字単位アニメは指針書で禁止のため行単位に留める。 */
.mr{display:block;overflow:hidden}
.mr>i{display:block;font-style:normal}
html[data-rv] .mr>i{transform:translateY(110%)}
html[data-rv] .mr.is-in>i{transform:none;transition:transform .62s cubic-bezier(.16,1,.3,1)}

/* 段差スタガー: 同時発火の要素に0.06-0.2sの位相差(Visionの0/0.14と同語) */
html[data-rv] .chap__en .mr+.mr.is-in>i{transition-delay:.12s}
html[data-rv] .chap__jp.is-in>i{transition-delay:.2s}
html[data-rv] .biz li:nth-child(2).is-in{transition-delay:.06s}
html[data-rv] .biz li:nth-child(3).is-in{transition-delay:.12s}
html[data-rv] .rv{opacity:0;transform:translateY(16px)}
html[data-rv] .rv.is-in{opacity:1;transform:none;transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}

@media(max-width:900px){
  .chap,.join__g{grid-template-columns:1fr}
  .chap{min-height:0;margin-top:clamp(48px,8vh,80px)}
  .chap__tx,.chap--rev .chap__tx,.join__tx,.join__ph{grid-column:1/-1}
  .chap__tx{padding-block:clamp(20px,3vh,32px)}
  /* 写真は全幅バンド1枚。効果なし */
  .chap__tx,.chap__ph,.chap--rev .chap__ph{grid-row:auto}
  .chap__ph,.chap--rev .chap__ph{grid-column:1/-1;order:-1;align-self:auto;display:block}
  .chap__fig{display:block;flex:none}
  .chap__fig .ph,.chap--rev .chap__fig .ph{flex:none;aspect-ratio:4/3;min-height:0;
    margin-left:calc(-1*var(--sec-x));margin-right:calc(-1*var(--sec-x));}
  .chap__tx{padding-block:clamp(24px,4vh,40px)}
  .chap--rev .ph__cap{justify-content:flex-start;flex-direction:row}
  .chap--rev .ph__cap::before{background:linear-gradient(90deg,var(--bl),rgba(24,71,204,.12))}
  .join{padding-block:0}
  .join__tx{padding-block:clamp(56px,9vh,90px)}
  .join__ph{margin-top:0;margin-left:calc(-1*var(--sec-x));margin-right:calc(-1*var(--sec-x))}
  .join .ph{height:auto;min-height:0;aspect-ratio:4/3}
  .join .ph{aspect-ratio:4/3}
  .ft__cols{grid-template-columns:1fr 1fr}
}

a:focus-visible{outline:2px solid var(--bl);outline-offset:3px}

/* 暗転中も設計グリッドを残す */
.stage.--night::before{
  background-image:
    linear-gradient(to right,rgba(147,197,253,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(147,197,253,.055) 1px,transparent 1px);
}

/* ══ モバイル ≤767(斜断を保ったまま縦積み) ══ */
@media(max-width:767px){
  .bento{
    width:108%;margin:-26px 0 -12px -4%;   /* 下出血を30→12pxへ。zF内容の安全余白を確保 */
    grid-template-columns:46fr 54fr;
    /* row2(リスト)/row4(求人)はコンテンツ高で空洞を作らない。
       余りはrow1(zA)とrow3(写真)が1:0.9で分担 — 表題の余白と写真の量感は伸びても絵になる */
    grid-template-rows:minmax(0,1fr) auto minmax(clamp(150px,21svh,200px),.9fr) auto;
    transform:skewY(-2.5deg);
  }
  .z__in{padding:clamp(12px,3.4vw,17px) clamp(20px,5.6vw,26px)}
  .z-a{grid-column:1/3;grid-row:1}
  .z-a{clip-path:polygon(0 0, 100% 0, 92% 100%, 0 100%)}
    .z-a .z__in{padding:clamp(16px,4.2vw,22px)}
  .z-a__h1 .--core{font-size:clamp(38px,12.8vw,58px)}
  .z-a__h1 .--lead{font-size:clamp(22px,7.4vw,34px)}
  .z-a__base{width:clamp(90px,26vw,150px);height:3px;margin-top:8px}
  .z-e{grid-column:1/3;grid-row:2}
  .z-e__grid{flex:none;min-height:auto;grid-template-columns:1fr 1fr;gap:6px 12px;margin:6px 0 10px}
  .z-e .z__in{justify-content:flex-start}
  .z-e__btn-en{margin-top:6px;font-size:13px}
  .z-e__grid li{font-size:10.5px;padding-bottom:4px;color:var(--sub)}
  .z-e__grid{align-content:start}
  .z-d{grid-column:1;grid-row:3}
  .z-d .z__in{padding:0}
  .z-d__q{font-size:12.5px}
  .z-d__rule,.z-d__a{display:none}
  .z-g{grid-column:2;grid-row:3}
  .z-g__tagline{display:none}
  .z-f{grid-column:1/3;grid-row:4}
  .z-f .z__in{flex-direction:row;align-items:center;gap:10px;padding:16px 18px 44px}
  .z-f__left{gap:5px}
  .z-f__t{font-size:clamp(21px,6.4vw,30px);line-height:1}
  .z-f__mid{display:none}
  .z-f__cta{padding:9px 12px;font-size:11px;gap:7px}
  .z-f__cta svg{width:16px}
  #runL{left:46%}
  .hint{display:none}
  #runR{display:none}
}
@media(min-width:768px) and (max-width:1023px){
  .bento{grid-template-columns:1.25fr 1fr;grid-template-rows:1fr .95fr .8fr clamp(110px,16svh,140px)}
  .z-a{grid-column:1/3;grid-row:1}
  .z-e{grid-column:1;grid-row:2/4}
  .z-d{grid-column:2;grid-row:2}
  .z-g{grid-column:2;grid-row:3}
  .z-f{grid-column:1/3;grid-row:4}
  .z-f__mid{display:none}
  .z__in{padding:clamp(16px,2.4vw,24px)}
}

@media(max-width:767px){
  .vision{padding:clamp(20px,5vh,40px) clamp(20px,6vw,28px)}
  .vision__t{font-size:clamp(26px,7.2vw,40px);line-height:1.62;letter-spacing:.04em}
  .dark-line{top:70%;width:84%;font-size:clamp(14px,4vw,17px);line-height:1.55;letter-spacing:.05em}
}

/* ══ Reduced motion: 静的成立 ══ */
@media(prefers-reduced-motion:reduce){
  .loader,html[data-ld] .loader{display:none}
  html[data-ld] .z,
  html[data-ld] .z-a__eyebrow,html[data-ld] .z-a__h1 .--lead,
  html[data-ld] .z-a__coreRow,html[data-ld] .z-a__bottom{opacity:1;transform:none;transition:none}
  html[data-ld] .z-a__base{transform:scaleX(1);transition:none}
  #gl{display:none}
  .flow{height:auto;min-height:0}
  .stage{position:relative;height:auto;min-height:100svh}
  .z{opacity:1;transform:none;transition:none}
  .vision{position:relative;inset:auto;opacity:1;pointer-events:auto;padding:clamp(80px,14vh,120px) clamp(20px,5vw,72px)}
  .vision__l{opacity:1;filter:none!important}
  .dark-line{
    position:relative;left:auto;top:auto;transform:none;z-index:auto;
    width:min(1080px,100%);margin:clamp(20px,4vh,36px) auto 0;
    font-size:clamp(15px,1.5vw,20px);color:var(--muted);opacity:1;
  }
  .hint{display:none}
}