/* =========================================================
   PortX 採用サイト
   配色・書体・角丸は製品サイト（goformula.ai）の設定値に合わせている
   ========================================================= */

:root {
  /* 色 */
  --ink: #0b0b0c;
  --ink-2: #16161a;
  --ink-3: #2a2a2e;
  --text: #3c3f45;
  --muted: #6d7178;
  --faint: #9a9ea6;
  --line: #e5e5e8;
  --line-strong: #cfd0d5;
  --paper: #fafafa;
  --paper-2: #f1f1f4;
  --white: #ffffff;
  --accent: #0040d5;
  /* 色の使い分け（明暗共通）
     線は3段だけ：--ink＝節の始まりと表の頭の1本／--line-strong＝項目の区切り（最後の項目の下には引かない）／--line＝補助線
     （例外は1つだけ：カルチャー3つの番号の下の短い線は --ink。見出しが黒く満ちる進み具合を、同じ黒で示すため）
     文字のグレー：--text＝読ませたい本文／--muted＝ラベル・注記・補足／--faint＝図の補助線と冒頭の明滅する文字だけ */
  /* 「白地・黒文字」を前提に、明暗で入れ替える色 */
  --header-bg: rgba(255, 255, 255, .94);
  --node-bg: #0b0b0c;          /* 事業の図の中央（Formula AI のロゴの箱） */
  --logo-filter: none;         /* 黒いロゴを、ダークモードでは白に反転 */
  --k-fade-1: #c9cacf;         /* 冒頭の動く見出し：押し出された言葉の色 */
  --k-fade-2: #e8e8eb;
  color-scheme: light;

  /* 書体 */
  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* 文字の大きさ：5段だけを使う（見出し・ラベルの大きさは、必ずこの変数で指定する）
     display＝冒頭の動く見出し／h1＝主張のある見出し（節の山場）／h2＝目次の役割をする見出し／h3＝項目の見出し／meta＝ラベル・注記
     h1 の下限は、スマホ（幅435px未満）では画面幅に合わせて少し下げ、「カジュアル面談から。」などの文節が1行に収まるようにする */
  /* display の上限は画面の高さからも決める：画面の高さから見出し以外（ヘッダー・余白・線・説明文）の約20remを引き、
     3行分の高さ（行の間を含めて文字約3.6個分）で割る。1366×768 で約124px、1440×900 で約148px（幅で決まる）、1920×1080 で192px（上限） */
  --fs-display: clamp(3.1rem, min(.6rem + 9.6vw, (100svh - 20rem) / 3.6), 12rem);
  --fs-h1: clamp(min(2.5rem, 9.2vw), 1rem + 4.5vw, 5.5rem);
  /* h1 の例外は1つだけ：カルチャー3つの見出し（トップで2つ目の見せ場）。スマホでは h1 より大きく、画面幅の9.6%（上限2.9rem）まで上げる。
     幅680px前後から上は --fs-h1 と同じになるので、幅を変えても大きさが跳ねない */
  --fs-h1-feature: max(var(--fs-h1), min(9.6vw, 2.9rem));
  --fs-h2: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --fs-meta: 13px;

  /* レイアウト */
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  /* 12列のグリッド：2列の節は、見出しを1〜5列目、本文を6列目の頭から置く（書き出しの軸は「左端」と「6列目の頭」の2本だけ）。
     左右に並べる2列は6列ずつ、3列は4列ずつ。間隔はどの節も同じ */
  --grid: repeat(12, minmax(0, 1fr));
  --col-gap: 24px;
  --header-h: 64px;
  --radius-panel: 18px;
  --radius-card: 12px;
  --radius-btn: 0;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- ダークモード（標準） ----------
   最初はダークで表示する（石田さん決定 2026-10-01）。ヘッダー右端のボタンでライトに切り替えると、そのブラウザに保存する（main.js）。
   head の小さなスクリプトが、保存したライトの選択を表示前に html[data-theme="light"] として反映する。JSが動かない環境ではダークのまま */
:root:not([data-theme="light"]) {
  --ink: #f4f4f5;
  --ink-2: #e4e4e7;
  --ink-3: #d4d4d8;
  --text: #c4c6cc;
  --muted: #8e929a;
  --faint: #5d6169;
  --line: #232427;
  --line-strong: #3a3b40;
  --paper: #111113;
  --paper-2: #1b1c1f;
  --white: #0b0b0c;
  --accent: #7d9be8;
  --header-bg: rgba(11, 11, 12, .9);
  --node-bg: #1b1c1f;
  --logo-filter: invert(1);
  --k-fade-1: #4b4d53;
  --k-fade-2: #26272b;
  color-scheme: dark;
}
/* 切り替えた瞬間だけ、色をなめらかに変える */
@media (prefers-reduced-motion: no-preference) {
  .theme-switching,
  .theme-switching *,
  .theme-switching *::before,
  .theme-switching *::after {
    transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), text-decoration-color .4s var(--ease) !important;
  }
}

/* ---------- 基本 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* 和文と英字・数字の間に、少しだけ空きを入れる（「Formulaは、」の詰まりを防ぐ。対応していないブラウザでは無視される） */
  text-autospace: normal;
}

body.nav-open { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
strong { font-weight: 700; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 16px; height: 16px; flex: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -64px; z-index: 100;
  padding: 10px 16px;
  background: var(--white); color: var(--ink);
  border-radius: var(--radius-btn);
  font-weight: 500; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 日本語見出しの改行制御：文節（.phrase）の途中では折り返さない */
.phrase { display: inline-block; }
/* 文節の境目で和文と英数字が接するところ（例：「この2つの力を｜AIで支え、」）の空き。
   文節は箱（inline-block）なので、body の text-autospace の空きが境目をまたいで入らない。
   そこで境目に半角スペースを1つ置き（HTML の .as-sp）、その幅を text-autospace と同じ 1/8字にする。
   行末に来たスペースは消えるので、改行の位置と行頭の揃いは変わらない。コピーした文には含めない。
   text-autospace に対応していないブラウザでは幅0（文節の中にも空きが入らないので、それにそろえる） */
@property --as-gap { syntax: "<length>"; inherits: true; initial-value: 0px; }
.as-sp { font-size: 0; letter-spacing: 0; -webkit-user-select: none; user-select: none; }
@supports (text-autospace: normal) {
  /* 1/8字は親の文字の大きさで決める（文字の大きさ0の .as-sp の中では em が使えないため、親で長さに直して渡す） */
  :has(> .as-sp) { --as-gap: .125em; }
  .as-sp { word-spacing: var(--as-gap); }
}
/* 対応ブラウザ（Chrome等）では、文節単位の改行と末尾1文字だけの行の回避も効かせる */
h1, h2, h3, .hero-lead, .section-lead, .need-what, .statement, .env-main, .stat-value, .cta-inner p,
.fit-grid li, .fit-note, .viz p, .viz li, .viz dd, .viz figcaption,
.split-body p, .feature p, .rows dd, .footer-brand p,
.roles-panel-text, .job-summary, .job-more-body dd, .step-text, .env-item p, .company-table dd { word-break: auto-phrase; }
p, dd { text-wrap: pretty; }
/* 見出しと大きな説明文は、各行の長さをそろえる（最後の行に数文字だけ残らないように）。
   職種ページの図（.viz）の中は、<wbr> や文節の指定で改行を決めているので対象にしない */
:is(h2, h3):not(.viz *), .lead-lg, .statement, .cta-title { text-wrap: balance; }
@media (max-width: 767px) {
  .br-wide { display: none; }
}

/* ---------- ボタン：角ばった形（Palantirの採用ページに倣う） ---------- */
/* タップしたときに出る灰色の四角（iOS）を出さない。押した手応えは、下の :active で返す */
html { -webkit-tap-highlight-color: transparent; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px;
  border: 1px solid transparent; border-radius: var(--radius-btn);
  font: inherit; font-size: 15px; font-weight: 400; line-height: 1.3; letter-spacing: 0.02em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s var(--ease), color .35s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn--lg { min-height: 52px; padding: 14px 28px; font-size: 16px; }
.btn--primary { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn--outline { background: var(--white); color: var(--ink); border-color: var(--ink); }
/* 押している間（どの端末でも）：わずかに縮み、マウスを乗せたときと同じ色に反転する（黒いボタンは枠線だけに、枠線のボタンは黒く塗る）。
   タッチ端末ではホバーの動きを出さないので、これが押した手応えになる */
.btn:active { transform: scale(.98); transition-duration: 90ms; }
.btn--primary:active { background: var(--white); color: var(--ink); }
.btn--outline:active { background: var(--ink); color: var(--white); }

/* 文字のリンク：細い下線付き。下線は2本の線で描く：いつも見える灰色の線と、その上に重ねる黒い線（マウスを乗せると左から引かれる）。
   線の高さは、リンクの上下の中央から測る（上下の余白を広げても、文字との間が変わらない。もとの下線と同じ位置） */
.text-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink); font-size: 15px; font-weight: 400;
  text-decoration: none;
}
.text-link::before,
.text-link::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(50% + 11.5px); height: 1px;
  background: var(--line-strong); pointer-events: none;
}
/* 下線は文字の下だけに引き、末尾の矢印（16px＋間6px）の下には引かない */
.text-link:has(> .icon)::before,
.text-link:has(> .icon)::after { right: 22px; }
.text-link::after { background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.text-link .icon { transition: transform .2s var(--ease); }
.text-link:active::after { transform: none; transform-origin: left; transition-duration: .2s; }

/* マウスで操作する端末だけの動き（タッチ端末では、指を離したあとも :hover が残って色が戻らないため、ホバーの指定はすべてこの条件の中に置く）
   ・枠線のボタン：黒い塗りが左から満ちて、文字が反転する。離れると、塗りは右へ抜ける
   ・黒いボタン：塗りが右へ抜けて、枠線だけになる。離れると、左から満ち直す
   ・ボタンの矢印：進む向きへ抜けて、反対側から戻る（→ は右、↓ は下、↗ は右上）
   ・文字のリンク：黒い下線が左から引かれ、矢印が少し進む */
@media (hover: hover) and (pointer: fine) {
  .btn, .theme-toggle, .motion-toggle--bar { position: relative; isolation: isolate; overflow: hidden; }
  .btn::before, .theme-toggle::before, .motion-toggle--bar::before {
    content: ""; position: absolute; inset: -1px; z-index: -1;
    background: var(--ink);
    transform: scaleX(0); transform-origin: right;
    transition: transform .5s var(--ease);
  }
  .btn--outline:hover, .theme-toggle:hover, .motion-toggle--bar:hover { color: var(--white); }
  .btn--outline:hover::before, .theme-toggle:hover::before, .motion-toggle--bar:hover::before { transform: none; transform-origin: left; }
  /* 黒いボタンの黒は、ふだんから塗り（::before）で描いておく（抜けていく動きにするため） */
  .btn--primary { background: transparent; }
  .btn--primary::before { transform: none; transform-origin: left; }
  .btn--primary:hover { color: var(--ink); }
  .btn--primary:hover::before { transform: scaleX(0); transform-origin: right; }

  .btn .icon { --ix: 1; --iy: 0; }
  .btn .icon:has(use[href="#i-down"]) { --ix: 0; --iy: 1; }
  .btn .icon:has(use[href="#i-ext"]) { --ix: 1; --iy: -1; }
  .btn:hover .icon { animation: icon-pass .45s both; }

  .text-link:hover::after { transform: none; transform-origin: left; }
  .text-link:hover .icon { transform: translateX(3px); }
}
@keyframes icon-pass {
  0% { translate: 0 0; opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
  40% { translate: calc(var(--ix, 1) * 9px) calc(var(--iy, 0) * 9px); opacity: 0; }
  40.1% { translate: calc(var(--ix, 1) * -9px) calc(var(--iy, 0) * -9px); opacity: 0; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  100% { translate: 0 0; opacity: 1; }
}

/* ---------- ヘッダー：白地・グレーの文字・「Formula AI / 採用情報」・角ばった枠線のボタン（Palantirの採用ページに倣う） ---------- */
/* 画面の切り欠き（iPhone を横にしたとき）：index.html の viewport-fit=cover で画面の端まで描くため、
   左右の余白（:root の --gutter）を、切り欠きの幅より狭くしない。縦向きや切り欠きのない画面では、もとの余白のまま */
:root { --gutter: max(clamp(20px, 4vw, 40px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); }

.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .35s var(--ease);
}
/* ページ冒頭（ヒーロー）の上にいる間は、下線を出さない */
.site-header.is-over-hero { border-bottom-color: transparent; }
/* メニューを開いている間は、ヘッダーも不透明にして、下の全画面メニューと1枚の面にする（境目には細い線を引く） */
.nav-open .site-header { background: var(--white); border-bottom-color: var(--line); }
/* スマホで下へ読み進めている間は、ヘッダーを画面の上へ隠す（767px以下。main.js が is-hidden を付け、上へ戻すと外す）。
   下端の1px（下の読み進み線）だけは画面の上端に残し、隠れている間も、どこまで読んだかが分かるようにする。
   キーボードでヘッダーの中へ移ったときは、隠さずに出す（指で押したボタンにフォーカスが残っているだけのときは、隠してよい） */
.site-header.is-hidden { transform: translateY(calc(1px - 100%)); }
.site-header.is-hidden:has(:focus-visible) { transform: none; }
/* ページ間の移動で新しいページを出す間（.vt-keep。head のスクリプトが付け外しする）は、ヘッダーの移り変わりを止める
   （隠れていたヘッダーを、移り変わりなしで元の位置に戻してから写すため。ヘッダーは移動の間、動かさずに残す） */
.site-header.vt-keep { transition: none; }
/* ヘッダーの中のリンク・ボタンへキーボードで移ったときに、ページが大きくスクロールしないようにする。
   ページ全体の「上の余白」（html の scroll-padding-top。見出しへ飛んだときに、ヘッダーの下に隠れないための余白）が、
   画面の上に張り付いているヘッダー自身にも効いてしまい、ブラウザがボタンを画面の中ほどへ出そうとするため、その分を打ち消す */
.site-header :is(a, button) { scroll-margin-top: calc(-1 * (var(--header-h) + 24px)); }
/* 隠れている間は、ボタンが画面の上の外にあるので、隠れた分（ヘッダーの高さ）も打ち消す（移ったらすぐ、main.js が一度に出す） */
.site-header.is-hidden :is(a, button) { scroll-margin-top: calc(-2 * var(--header-h) - 24px); }

/* 読み進み線：ヘッダーの下端の1pxの線が、ページを読み進めた分だけ左から伸びる（長いページでも、いまどのあたりかが分かる）。
   スクロール連動のアニメーションに対応したブラウザだけで、CSSだけで動く（JSが動かない環境でも出る）。
   動きを減らす設定と、「動きを止める」で止めている間は出さない。メニューを開いている間も消す */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-header::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
      background: var(--ink); pointer-events: none;
      transform: scaleX(0); transform-origin: left;
      animation: read-progress linear both;
      animation-timeline: scroll(root block);
      transition: opacity .3s var(--ease);
    }
    .nav-open .site-header::after,
    :root[data-motion="off"] .site-header::after { opacity: 0; }
  }
}
@keyframes read-progress { to { transform: scaleX(1); } }

.header-inner { height: 100%; display: flex; align-items: center; gap: 24px; }
.brand { margin-right: auto; }

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-logo { height: 22px; width: auto; filter: var(--logo-filter); }
.brand-sub {
  font-size: 15px; font-weight: 400; line-height: 1.2; letter-spacing: 0.02em; white-space: nowrap;
  color: var(--muted);
}
.brand-sub::before { content: "/"; margin-right: 12px; color: var(--line-strong); }
/* スマホ：ロゴ・明暗の切替・メニューボタンが1行に収まるよう、少し小さくする */
@media (max-width: 479px) {
  .brand-logo { height: 18px; }
  .brand { gap: 10px; }
  .brand-sub { font-size: 13px; }
  .brand-sub::before { margin-right: 8px; }
}
@media (max-width: 339px) {
  .brand-sub { display: none; }
}

.global-nav { display: flex; align-items: center; gap: 32px; }
.global-nav ul { display: flex; gap: 28px; }
.global-nav ul a { font-size: 14px; font-weight: 400; text-decoration: none; }
/* メニューの最下段の囲み：1180px以上は囲みをなくし、中のボタンをメニューの横にそのまま並べる（1179px以下は下の「全画面のメニュー」） */
.nav-foot { display: contents; }
.header-cta { min-width: 180px; }
@media (max-width: 1279px) {
  .global-nav { gap: 24px; }
  .global-nav ul { gap: 22px; }
  .header-cta { min-width: 150px; }
}
/* 職種ページのヘッダーの主ボタン「この職種に応募する」：1180〜1279pxでは横幅が足りず、メニューの項目が1文字ずつ折り返してしまうので、
   「この職種に」を見た目から外して「応募する」だけにする（読み上げでは「この職種に応募する」のまま。.visually-hidden と同じ指定） */
@media (min-width: 1180px) and (max-width: 1279px) {
  .header-cta-pre {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* 明暗の切替ボタンと「動きを止める」ボタン（ヘッダー右端。Palantirの四角いアイコンボタンに倣う）。JSが動く環境でだけ出す */
.theme-toggle,
.motion-toggle--bar {
  display: none; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--ink); cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.js .theme-toggle { display: inline-grid; }
/* マウスを乗せたときの塗りは、上の「ボタン」のホバーの指定（マウスで操作する端末だけ）。
   押している間は、どの端末でも黒く塗る（タッチ端末で、指を離したあとに黒く塗られたまま残らないよう、:hover は使わない） */
.theme-toggle:active,
.motion-toggle--bar:active { background: var(--ink); color: var(--white); transition-duration: 90ms; }
.theme-toggle .icon,
.motion-toggle--bar .icon { width: 18px; height: 18px; }
.theme-icon-sun,
:root:not([data-theme="light"]) .theme-icon-moon { display: none; }
:root:not([data-theme="light"]) .theme-icon-sun { display: block; }

/* 明暗の切替の動き（View Transitions に対応したブラウザ。main.js）：新しい色が、右上のボタンの側から左へ横に走って入れ替わる。
   古い画面は動かさずに下に残し、その上で新しい画面を右端から左へ広げていく。
   重ね方は通常にする（標準の「足し合わせ」のままだと、重なったところの色が白く飛ぶため）。
   切り替えの間だけ（.theme-wiping）、ほかの色の移り変わりを止めて、新しい色を一度で出す（走る線の内側で色が溶けないように）。
   対応しないブラウザは、上の .theme-switching で色を溶かす。動きを減らす設定と「動きを止める」で止めているときは、その場で切り替える（main.js） */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: theme-wipe .7s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes theme-wipe { from { clip-path: inset(0 0 0 100%); } }
.theme-wiping,
.theme-wiping *,
.theme-wiping *::before,
.theme-wiping *::after { transition: none !important; }

/* ページ間の移動（View Transitions に対応したブラウザ。名前を付けるのは head の小さなスクリプト）：
   ・押した職種名（job-title）が、次のページの大きな職種名（h1）の位置と大きさへ、0.7秒で移る（曲線は冒頭の入れ替えと同じ）。
     文字の絵は、古い方を0.3秒で消し、新しい方を0.5秒で出す（大きさの違う2つの文字が、長く重なって見えないように）
   ・ヘッダー（site-header）は動かさずに残す（職種ページでは右上のボタンの文言が違い、メニューの位置が少しずれるので、
     新旧の重ね合わせは0.25秒で済ませ、文字が二重に見える時間を短くする）
   ・ページの中身は、古いページが0.25秒で上へ消え、新しいページが0.6秒で下から出る。戻るとき（back）は逆向き。
     古いページは前半で大きく消え、新しいページは0.12秒遅れて出始める（2つのページの文字が重なって見える時間を短くし、
     その間は、移っていく職種名とヘッダーだけが見える）。間に見える下地は、ページの地の色（明暗のどちらでも、白や黒が一瞬光らない）
   動きを減らす設定では、移動の演出そのものを使わない（今までどおりの切り替え）。「動きを止める」で止めているときは head のスクリプトが取りやめる。
   明暗の切替（上の theme-wipe）と混ざらないよう、指定はすべて「ページの移動のときだけ」（page）に限る */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; types: page; }
}
:root:active-view-transition-type(page)::view-transition { background: var(--white); }
:root:active-view-transition-type(page)::view-transition-old(root) { animation: vt-page-out .25s cubic-bezier(0.3, 0, 0.2, 1) both; }
:root:active-view-transition-type(page)::view-transition-new(root) { animation: vt-page-in .6s var(--ease) .12s both; }
:root:active-view-transition-type(back)::view-transition-old(root) { animation-name: vt-page-out-back; }
:root:active-view-transition-type(back)::view-transition-new(root) { animation-name: vt-page-in-back; }
@keyframes vt-page-out { to { opacity: 0; transform: translateY(-32px); } }
@keyframes vt-page-in { from { opacity: 0; transform: translateY(48px); } }
@keyframes vt-page-out-back { to { opacity: 0; transform: translateY(32px); } }
@keyframes vt-page-in-back { from { opacity: 0; transform: translateY(-48px); } }
:root:active-view-transition-type(page)::view-transition-group(job-title) {
  animation-duration: .7s; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
:root:active-view-transition-type(page)::view-transition-old(job-title) { animation-duration: .3s; }
:root:active-view-transition-type(page)::view-transition-new(job-title) { animation-duration: .5s; }
:root:active-view-transition-type(page)::view-transition-group(site-header) { animation-duration: .25s; }
/* 移る職種名から、矢印の印を外す（離れるページの職種名だけ。文字だけが h1 へ移る） */
.vt-src .icon { visibility: hidden; }

/* 「動きを止める」：自動で動き続けるもの（冒頭の動く見出し、図の点の流れ）をまとめて止める・再開する（main.js）。
   動いている間は一時停止の印、止めている間（html[data-motion="off"]）は再生の印を出す。
   768px以上はヘッダーの明暗ボタンの左に、同じ44pxの四角で置く（明暗ボタンとの間は8px）。
   767px以下はヘッダーが窮屈なので、メニューの最下段に文字付きで置く */
.motion-toggle--menu { display: none; }
.motion-icon-play,
:root[data-motion="off"] .motion-icon-pause { display: none; }
:root[data-motion="off"] .motion-icon-play { display: block; }
@media (min-width: 768px) {
  .js .motion-toggle--bar { display: inline-grid; margin-right: -2px; }
}
@media (min-width: 1180px) {
  .js .motion-toggle--bar { margin-right: -16px; }
}
@media (max-width: 767px) {
  .js .motion-toggle--menu {
    display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
    min-height: 44px; margin-top: -4px; padding: 0;
    background: none; border: 0; color: var(--muted); cursor: pointer;
    font: inherit; font-size: 15px; line-height: 1.4; letter-spacing: 0.02em;
    transition: color .2s var(--ease);
  }
  .motion-toggle--menu:active { color: var(--ink); }
  @media (hover: hover) and (pointer: fine) {
    .motion-toggle--menu:hover { color: var(--ink); }
  }
}
/* 動きを減らす設定の環境では、止める動きがないので出さない */
@media (prefers-reduced-motion: reduce) {
  .js .motion-toggle { display: none; }
}
@media (min-width: 1180px) {
  .global-nav > ul > li > a,
  .global-nav .nav-drop-toggle { color: var(--muted); transition: color .2s var(--ease); }
  .global-nav .nav-drop.is-open .nav-drop-toggle { color: var(--ink); }
  @media (hover: hover) and (pointer: fine) {
    .global-nav > ul > li > a:hover,
    .global-nav .nav-drop-toggle:hover,
    .global-nav .nav-drop:hover .nav-drop-toggle { color: var(--ink); }
  }
}

/* ヘッダーの「実際の働き方」：マウスを乗せる（またはクリック）と、3つの職種ページへのリンクが開く */
.nav-drop { position: relative; }
.nav-drop-toggle {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 0; background: none; border: 0; color: inherit; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 400; letter-spacing: 0.02em;
}
.nav-caret { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.nav-drop-menu {
  position: absolute; top: 100%; left: 50%; z-index: 70;
  padding-top: 20px; /* マウスをメニューへ動かす間に閉じないための余白 */
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
}
.global-nav .nav-drop-panel {
  display: grid; gap: 2px; min-width: 360px; padding: 8px;   /* 360px：一番長い「Lead Forward Deployed Engineer（表示中）」も1行に収まる幅（どの職種ページでも印が名前と同じ行に並ぶ） */
  background: var(--white); color: var(--ink);
  border: 1px solid var(--ink);
}
.global-nav .nav-drop-panel a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px; text-decoration: none;
  transition: background-color .15s var(--ease);
}
.global-nav .nav-drop-panel a:focus-visible { background: var(--paper-2); }
@media (hover: hover) and (pointer: fine) {
  .global-nav .nav-drop-panel a:hover { background: var(--paper-2); }
}
.nav-drop-role { font-size: 12px; letter-spacing: 0.04em; color: var(--muted); }
.nav-drop-title { font-size: 15px; line-height: 1.5; }
.global-nav .nav-drop-panel a[aria-current="page"] .nav-drop-title::after { content: "（表示中）"; margin-left: 4px; font-size: 12px; opacity: .6; }
/* 開くのは、クリック・タップ・キーボード（is-open。main.js）と、マウスを乗せたとき（マウスで操作する端末だけ。
   タッチ端末で :hover でも開くと、タップで閉じても :hover が残って開いたままになるため） */
@media (min-width: 1180px) {
  .nav-drop.is-open .nav-caret { transform: rotate(180deg); }
  .nav-drop.is-open .nav-drop-menu {
    opacity: 1; visibility: visible; transform: translate(-50%, 0);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s;
  }
  @media (hover: hover) and (pointer: fine) {
    .nav-drop:hover .nav-caret { transform: rotate(180deg); }
    .nav-drop:hover .nav-drop-menu {
      opacity: 1; visibility: visible; transform: translate(-50%, 0);
      transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s;
    }
  }
  /* JSが動かない環境：押しても開かないので、キーボードで「実際の働き方」に移ったときにも開く（中のリンクへ Tab で進める）。
     開閉の移り変わりも付けない（開いたり閉じたりの途中の半透明の一覧が、本文に重なって残らないように） */
  html:not(.js) .nav-drop:focus-within .nav-caret { transform: rotate(180deg); }
  html:not(.js) .nav-drop:focus-within .nav-drop-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
  html:not(.js) .nav-drop-menu,
  html:not(.js) .nav-drop:is(:hover, :focus-within) .nav-drop-menu { transition: none; }
}

/* メニューボタン（1179px以下）：明暗の切替ボタンと同じ、1pxの枠の正方形（明暗ボタンとの間は、明暗ボタンと「動きを止める」の間と同じ8px）。
   2本の線は、開くと中央に寄りながら回って × になる */
.nav-toggle {
  display: none; flex: none;
  position: relative; width: 44px; height: 44px; margin-left: -2px; padding: 0;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--ink); cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.nav-toggle-bar {
  position: absolute; left: calc(50% - 9px); width: 18px; top: calc(50% - .75px); height: 1.5px;
  background: currentColor;
  transition: transform .35s var(--ease);
}
.nav-toggle-bar:nth-child(1) { transform: translateY(-4px); }
.nav-toggle-bar:nth-child(2) { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { transform: rotate(-45deg); }
/* 押している間は、明暗の切替ボタンと同じく黒く塗る。マウスを乗せると、黒い塗りが左から満ちる（マウスで操作する端末だけ） */
.nav-toggle:active { background: var(--ink); color: var(--white); transition-duration: 90ms; }
@media (hover: hover) and (pointer: fine) {
  .nav-toggle { isolation: isolate; overflow: hidden; }
  .nav-toggle::before {
    content: ""; position: absolute; inset: -1px; z-index: -1;
    background: var(--ink);
    transform: scaleX(0); transform-origin: right;
    transition: transform .5s var(--ease);
  }
  .nav-toggle:hover { color: var(--white); }
  .nav-toggle:hover::before { transform: none; transform-origin: left; }
}
@media (max-width: 1179px) {
  .header-inner { gap: 10px; }
  .js .nav-toggle { display: block; }

  /* JSが動かない環境：メニューは開閉せず、ヘッダーの中にそのまま縦に並べる */
  html:not(.js) .site-header { height: auto; position: relative; }
  html:not(.js) .header-inner { flex-wrap: wrap; padding-block: 12px; }
  .global-nav { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 20px; }
  .global-nav ul { flex-direction: column; gap: 0; }
  .global-nav ul a {
    display: block; padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
  }
  .nav-foot { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
  .header-cta { min-height: 52px; }
  /* 「実際の働き方」は押しても何も起きないので、押せる見た目にしない（JSが動く環境では、main.js が見出しの文字に入れ替える） */
  .nav-drop-toggle { display: block; width: 100%; padding: 14px 0 6px; text-align: left; cursor: default; pointer-events: none; font-size: 16px; }
  .nav-caret { display: none; }
  .nav-drop-menu { position: static; padding: 0; opacity: 1; visibility: inherit; transform: none; transition: none; }
  .global-nav .nav-drop-panel {
    min-width: 0; gap: 0; padding: 0 0 8px 16px;
    border: 0; border-bottom: 1px solid var(--line);
  }
  .global-nav .nav-drop-panel a { flex-direction: row; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 0; }

  /* 全画面のメニュー（JSが動く環境）：ヘッダーの下から画面の下端までを覆い、大きな文字で縦に並べる。
     ・開くと、幕が上から下りるように現れ（clip-path）、項目が上から順に少し下からせり上がって出る（--i は main.js が付ける順番。40msずつ遅らせる）
     ・閉じると、幕が上へ戻る。閉じている間は visibility: hidden で、Tabキーでも移れない
     ・開いている間、背後のページ本文とフッターは main.js が inert にする（Tabキーでも移れず、読み上げもしない）
     ヘッダーは backdrop-filter を使っていて、中の position: fixed の基準がヘッダーになってしまうため、
     fixed ではなく、ヘッダーの下端からの absolute で置き、高さを画面の高さから決める */
  .js .global-nav {
    position: absolute; top: calc(100% + 1px); left: 0; right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    padding: 8px var(--gutter) calc(24px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--white);
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .5s var(--ease), visibility 0s linear .5s;
  }
  .js .global-nav.is-open {
    visibility: visible; clip-path: inset(0);
    transition: clip-path .5s var(--ease), visibility 0s;
  }
  /* 項目と最下段：開くと上から順に、14px下からせり上がって出る。閉じるときは順番を待たずに消える */
  .js .global-nav > ul > li,
  .js .nav-foot {
    opacity: 0; translate: 0 14px;
    transition: opacity .2s var(--ease), translate .5s var(--ease);
  }
  .js .global-nav.is-open > ul > li,
  .js .global-nav.is-open .nav-foot {
    opacity: 1; translate: none;
    transition: opacity .5s var(--ease) calc(var(--i, 0) * 40ms + .1s), translate .7s var(--ease) calc(var(--i, 0) * 40ms + .1s);
  }
  /* 動きを減らす設定と「動きを止める」で止めている間は、移り変わりを一切入れず、開いたらその場で完成形を出す（閉じたらすぐ、Tabキーで移れないようにする）。
     下の全体指定（0.01ms の移り変わり）のままだと、visibility も 0.01ms かけて切り替わるため、開いた瞬間はまだ隠れていて、
     main.js が最初の項目へフォーカスを移せない。項目と最下段も、1こま遅れて出ないように同じくその場で出す */
  @media (prefers-reduced-motion: reduce) {
    .js .global-nav,
    .js .global-nav > ul > li,
    .js .nav-foot { transition: none !important; }
  }
  :root.js[data-motion="off"] .global-nav,
  :root.js[data-motion="off"] .global-nav > ul > li,
  :root.js[data-motion="off"] .nav-foot { transition: none !important; }

  /* 項目：目次の役割をする見出しと同じ大きさ（h2）の文字で、細い線で区切る。
     押している間は灰色に。マウスを乗せると、項目の下の線が左から黒く引かれる（マウスで操作する端末だけ） */
  .js .global-nav > ul > li > a,
  .js .nav-drop-heading {
    position: relative;
    display: block; margin: 0; padding: 12px 0;
    font-size: var(--fs-h2); font-weight: 400; line-height: 1.3; letter-spacing: -0.01em;
    font-feature-settings: "palt";
    color: var(--ink);
  }
  .js .global-nav > ul > li > a { border-bottom: 1px solid var(--line); transition: color .2s var(--ease); }
  .js .global-nav > ul > li > a:active { color: var(--muted); transition-duration: 90ms; }
  @media (hover: hover) and (pointer: fine) {
    .js .global-nav > ul > li > a::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
      background: var(--ink); pointer-events: none;
      transform: scaleX(0); transform-origin: right;
      transition: transform .5s var(--ease);
    }
    .js .global-nav > ul > li > a:hover::after { transform: none; transform-origin: left; }
  }

  /* 「実際の働き方」：押せる見出しにはせず（main.js が、ボタンを見出しの文字に入れ替える）、3つの職種をいつも並べる。
     職種名は17px、その下に役割名を灰色で添える。1つずつ、指で押しやすい高さ（48px以上）にする */
  .js .nav-drop-heading { padding-bottom: 4px; }
  .js .global-nav .nav-drop-panel { padding: 0 0 12px; border-bottom: 1px solid var(--line); }
  .js .global-nav .nav-drop-panel a {
    flex-direction: column; justify-content: center; align-items: flex-start; gap: 0;
    min-height: 48px; padding: 6px 0;
  }
  .js .global-nav .nav-drop-panel a:is(:hover, :focus-visible) { background: none; }
  .js .nav-drop-title { font-size: 17px; line-height: 1.4; color: var(--ink); transition: color .2s var(--ease); }
  .js .nav-drop-role { order: 1; font-size: var(--fs-meta); line-height: 1.5; color: var(--muted); }
  .js .global-nav .nav-drop-panel a:active .nav-drop-title { color: var(--muted); transition-duration: 90ms; }
  @media (hover: hover) and (pointer: fine) {
    .js .global-nav .nav-drop-panel a:hover .nav-drop-title { color: var(--muted); }
  }

  /* 最下段（「募集職種を見る」と、スマホでは「動きを止める」）：項目の下に余白をとって、画面の下端に寄せる */
  .js .nav-foot { margin-top: auto; padding-top: 32px; }

  /* 画面の高さが低いとき（ブラウザのバーが出ているスマホ、横長のタブレットなど）：項目の上下の余白を詰めて、なるべくスクロールせずに全部が見えるようにする */
  @media (max-height: 800px) {
    .js .global-nav > ul > li > a,
    .js .nav-drop-heading { padding-block: 8px; }
    .js .nav-drop-heading { padding-bottom: 2px; }
    .js .global-nav .nav-drop-panel { padding-bottom: 8px; }
    .js .global-nav .nav-drop-panel a { min-height: 44px; padding-block: 4px; }
    .js .nav-foot { padding-top: 24px; }
  }
}
/* さらに、高さの低いスマホでは、項目の文字を26pxに抑える */
@media (max-width: 767px) and (max-height: 760px) {
  .js .global-nav > ul > li > a,
  .js .nav-drop-heading { font-size: min(var(--fs-h2), 26px); }
  .js .nav-foot { padding-top: 16px; }
}
/* タブレット（768〜1179px）：最下段のボタンは、画面の幅いっぱいには伸ばさず左に寄せる */
@media (min-width: 768px) and (max-width: 1179px) {
  .js .nav-foot { align-items: flex-start; }
  .js .header-cta { min-width: 280px; }
}

/* ---------- ヒーロー（全ページ共通）：白地に巨大な見出し → 左から引かれる黒い細線 → 説明文とボタン（Palantirの採用ページに倣う） ---------- */
.hero {
  display: flex; flex-direction: column;
  padding-top: clamp(40px, 6vw, 96px);
  background: var(--white); color: var(--ink);
}
.hero-inner {
  flex: 1;
  display: grid; align-content: center;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "head head" "rule rule" "lead actions";
  column-gap: 64px;
  padding-bottom: clamp(56px, 7vw, 96px);
}
.hero-inner::after {
  content: ""; grid-area: rule;
  height: 1px; margin-top: clamp(36px, 4.5vw, 64px);
  background: var(--ink); transform-origin: left;
}
.hero-title { grid-area: head; color: var(--ink); font-feature-settings: "palt"; }
.hero-lead {
  grid-area: lead; margin-top: 28px; max-width: 38em;
  font-size: 16px; line-height: 2.05; color: var(--text);
}
.hero-actions {
  grid-area: actions; margin-top: 32px; align-self: start;
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
}
.hero-actions .btn { min-width: 280px; min-height: 48px; }
@media (max-width: 767px) {
  .hero-inner { grid-template-columns: 1fr; grid-template-areas: "head" "rule" "lead" "actions"; }
  .hero-actions .btn { min-width: 0; }
}
/* 登場の動き：線が左から引かれ、説明文とボタンが少しだけせり上がる（JSが動く環境のみ。動きを減らす設定では出さない）
   説明文とボタンは透明・ぼかしで隠さず、最初から読める状態で動かす（隠して遅らせると、スマホで表示が遅く感じられ、表示速度の計測でも遅れる）。
   職種ページも同じ間合い */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-inner::after { transform: scaleX(0); animation: rule-draw 1.2s var(--ease) .3s forwards; }
  .js .hero-lead,
  .js .hero-actions {
    transform: translateY(12px);
    animation: hero-in 1s var(--ease) forwards;
  }
  .js .hero-lead { animation-delay: .15s; }
  .js .hero-actions { animation-delay: .3s; }
}
@keyframes hero-in { to { transform: none; } }
@keyframes rule-draw { to { transform: scaleX(1); } }

/* ---------- トップページ：巨大な文字そのものが動く（Palantirの採用ページの冒頭に倣う） ----------
   動く中身は assets/js/main.js が作る。JSが動かない・動きを減らす設定のときは、見出し（h1）をそのまま大きく表示する */
.hero--kinetic {
  /* 動く見出しの文字の大きさ（--k-size）と行の送り（--k-pitch）。読み込み中の見出し（下の k-wait）も同じ寸法にして、表示がずれないようにする */
  --k-size: var(--fs-display);
  --k-pitch: 1.18em;
  min-height: calc(100svh - var(--header-h));
  /* 押し出された灰色の言葉は、画面の右端で裁ち落とす（横スクロールは出さない。clip に対応しないブラウザは hidden） */
  overflow-x: hidden;
  overflow-x: clip;
}
.hero--kinetic .hero-title {
  font-size: clamp(2.5rem, .6rem + 5.6vw, 6rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em;
}
.kinetic { display: none; }
.hero--kinetic.is-kinetic .hero-title {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* 読み込み中（html.k-wait。head のスクリプトが付け、main.js が動き始めたら外す）：静止した見出しは透明にして、
   動く見出しと同じ高さを取っておく（入れ替わっても説明文やボタンの位置が動かない）。visibility は読み上げから消えるので使わない */
.k-wait .hero--kinetic .hero-title {
  opacity: 0;
  font-size: var(--k-size); height: calc(var(--k-pitch) * 3); overflow: hidden;
}
.hero--kinetic.is-kinetic .kinetic {
  display: block; grid-area: head;
  font-size: var(--k-size);
  font-weight: 700; line-height: 1; letter-spacing: -0.03em;
  font-feature-settings: "palt";
  /* 右側だけ画面の端まで広げる（灰色の言葉が、本文の幅ではなく画面の端で切れるように） */
  margin-right: calc(50% - 50vw);
}
.k-line { position: relative; height: var(--k-pitch); overflow: hidden; }
/* 文字（高さ1em、字面はその上下に少し余白）を、行の送りの中で上下の真ん中に置く */
.k-word { position: absolute; left: 0; top: calc((var(--k-pitch) - 1.06em) / 2); white-space: nowrap; will-change: transform; }
.k-b { transform: translateY(110%); }
.k-noise { color: var(--faint); }
/* 線：トップでは固定の遅れで引かず、動く見出しが打ち終わってから引く（main.js が is-typed を付ける）。
   動く見出しが使えないときは、読み込み中が終わった時点で引く */
@media (prefers-reduced-motion: no-preference) {
  .js .hero--kinetic .hero-inner::after { animation: none; transform: none; transition: transform 1.2s var(--ease); }
  .k-wait .hero--kinetic .hero-inner::after,
  .hero--kinetic.is-kinetic:not(.is-typed) .hero-inner::after { transform: scaleX(0); }
}
/* PC・タブレット：画面の高さに合わせて余白を詰め、「3行の見出し＋説明文の全体＋ボタン2つ」が最初の画面に収まるようにする
   （1366×768・1440×900・1920×1080 で確認。見出しの大きさも --fs-display で画面の高さに合わせている） */
@media (min-width: 768px) {
  .hero--kinetic { padding-top: clamp(24px, 5svh, 72px); }
  .hero--kinetic .hero-inner { padding-bottom: clamp(32px, 6svh, 96px); }
  .hero--kinetic .hero-inner::after { margin-top: clamp(28px, 4.5svh, 64px); }
  .hero--kinetic .hero-lead { margin-top: clamp(20px, 3svh, 28px); }
  .hero--kinetic .hero-actions { margin-top: clamp(24px, 3.5svh, 32px); }
}
@media (max-width: 767px) {
  .hero--kinetic {
    min-height: 0; padding-top: 48px;
    /* 一番長い行「封じられた、」（文字約5個分）が本文の幅にちょうど収まる大きさ。390px幅で約67px */
    --k-size: min((100vw - 2 * var(--gutter)) / 5.2, 5.5rem);
    --k-pitch: 1.1em;
  }
  /* 動く見出しのときは、最初の画面いっぱいを使う：上に見出し、下に線・説明文・ボタン。
     背の高い画面で余る高さは、見出しの上に1、下に2の割合で分ける（見出しの下にだけ大きな空きが出ないように）。
     読み込みが遅く静止の見出しに切り替えたとき（k-static）も同じ配置のままにして、説明文とボタンを動かさない */
  .k-wait .hero--kinetic,
  .k-static .hero--kinetic,
  .hero--kinetic.is-kinetic { min-height: calc(100svh - var(--header-h)); padding-top: 24px; }
  .k-wait .hero--kinetic .hero-inner,
  .k-static .hero--kinetic .hero-inner,
  .hero--kinetic.is-kinetic .hero-inner {
    grid-template-areas: "." "head" "." "rule" "lead" "actions";
    grid-template-rows: 1fr auto 2fr auto auto auto;
    align-content: stretch;
  }
  .hero--kinetic.is-kinetic .kinetic { letter-spacing: -0.04em; }
  .hero--kinetic .hero-lead { font-size: 15px; line-height: 1.85; }
}

/* ---------- 冒頭を離れるとき：灰色の「封じられた」言葉が右の画面の外へ抜け、見出しの下の線が画面の端まで伸びる ----------
   閲覧者のスクロールそのものを「解き放つ」動きにする。進み具合は、冒頭がヘッダーの下から画面の上へ抜けていく割合（0→1）。
   ・灰色の言葉（.k-a）：入れ替えの間（main.js が is-swapped を付ける）だけ、右へ最大 60vw 動きながら消える。
     上の行ほど先に画面の上へ出ていくので、上の行ほど早く抜け切る（進み具合 0.3／0.45／0.6 で抜け切る）
   ・3行：下の行ほど少し速く上へ動き、奥行きを出す（0／0.2／0.4文字分。行どうしが重ならない量にとどめる）
   ・線：左右の余白の分だけ伸びて、画面の端から端までになる（伸ばす量は main.js が測って --k-rule-x・--k-rule-k に入れる）。
     伸び具合 --k-rule-p（0→1）は、対応ブラウザでは .hero-inner のスクロール連動アニメーションが、対応しないブラウザでは main.js が入れる
     （Safari は ::after に直接スクロール連動のアニメーションを付けても動かないため、本体の要素で数値を動かし、::after はそれを読む）
   動く見出しの動き（main.js の transform）や線を引く動き（transform）とぶつからないよう、個別の translate・scale を使う。
   スクロール連動のアニメーションに対応したブラウザは CSS だけで動かし（下の @supports）、対応しないブラウザは main.js が同じ値を計算して入れる。
   動きを減らす設定・「動きを止める」で止めている間・JSなし（is-kinetic が付かない）では、何もしない */
@property --k-rule-p { syntax: "<number>"; inherits: true; initial-value: 0; }
.hero--kinetic .k-line:nth-child(2) { --k-rise: -.2em; }
.hero--kinetic .k-line:nth-child(3) { --k-rise: -.4em; }
@keyframes k-depth { to { translate: 0 var(--k-rise, 0); } }
@keyframes k-free { to { translate: 60vw 0; opacity: 0; } }
@keyframes k-rule-out { to { --k-rule-p: 1; } }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="off"]) .hero--kinetic.is-kinetic .hero-inner::after {
    translate: calc(var(--k-rule-x, 0px) * var(--k-rule-p, 0)) 0;
    scale: calc(1 + (var(--k-rule-k, 1) - 1) * var(--k-rule-p, 0)) 1;
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* 冒頭が画面の上へ抜けていく進み具合（ヘッダーの下を基準にする） */
    .hero--kinetic { view-timeline: --k-exit block; view-timeline-inset: var(--header-h) 0px; }
    :root:not([data-motion="off"]) .hero--kinetic.is-kinetic .k-line:not(:first-child) {
      animation: k-depth linear both;
      animation-timeline: --k-exit; animation-range: exit 0% exit 100%;
    }
    /* 抜け始めはゆっくり、離れるほど速く（押し出された言葉が、勢いをつけて出ていく） */
    :root:not([data-motion="off"]) .hero--kinetic.is-swapped .k-a {
      animation: k-free cubic-bezier(.11, 0, .5, 0) both;
      animation-timeline: --k-exit; animation-range: exit 0% exit 30%;
    }
    :root:not([data-motion="off"]) .hero--kinetic.is-swapped .k-line:nth-child(2) .k-a { animation-range: exit 0% exit 45%; }
    :root:not([data-motion="off"]) .hero--kinetic.is-swapped .k-line:nth-child(3) .k-a { animation-range: exit 0% exit 60%; }
    /* 線の伸び具合：離れ始めてすぐ大きく伸び、端に近づくほどゆっくり伸び切る */
    :root:not([data-motion="off"]) .hero--kinetic.is-kinetic .hero-inner {
      animation: k-rule-out cubic-bezier(.5, 1, .89, 1) both;
      animation-timeline: --k-exit; animation-range: exit 0% exit 45%;
    }
  }
}

/* ---------- セクション共通 ---------- */
/* 節の上下の余白は変数で持ち、節ごとに変えてスクロールのテンポに緩急をつける */
.section {
  --pad-top: clamp(64px, 7vw, 104px);
  --pad-bottom: clamp(96px, 11vw, 152px);
  position: relative; padding-block: var(--pad-top) var(--pad-bottom);
}
/* トップの後半（働く環境・制度／選考の流れ／会社概要）は、資料の章として上下を詰め、速いテンポで読み進めてもらう。
   見出しは標準の h2 の大きさのまま（主張のある見出しのように大きくしない） */
#environment, #process, #company { --pad-top: clamp(56px, 6vw, 88px); --pad-bottom: clamp(56px, 6vw, 88px); }
/* 課題の節の下の余白は、節の末尾のまとめの一文（.statement-block）の余白が兼ねる */
#about { --pad-bottom: 0px; }
/* スマホは、余白だけで画面を使い切らないよう、どの節も上下を詰める（後半の3節の上下と、課題の節の下は、上の指定のまま） */
@media (max-width: 767px) {
  .section { --pad-top: 56px; --pad-bottom: 72px; }
}
/* セクションの上端に、本文の幅いっぱいの黒い細線。画面に入ると左から引かれる（main.js が .is-ruled を付ける） */
.section::before,
.cta-band::before,
.site-footer::before {
  content: ""; position: absolute; top: 0; height: 1px;
  left: max(var(--gutter), calc((100% - var(--container)) / 2));
  right: max(var(--gutter), calc((100% - var(--container)) / 2));
  background: var(--ink); transform-origin: left;
}
.js :is(.section, .cta-band, .site-footer)::before { transform: scaleX(0); transition: transform 1.4s var(--ease); }
.js :is(.section, .cta-band, .site-footer).is-ruled::before { transform: none; }


/* 節の見出しは、標準では「目次の役割」の大きさ（h2） */
.section-title {
  font-size: var(--fs-h2);
  font-weight: 400; line-height: 1.35; letter-spacing: -0.01em;
  color: var(--ink);
  font-feature-settings: "palt";
}
/* 主張のある見出し（課題・事業の見出しと、課題の節のまとめの一文）だけを、大きく・少し太くする */
#about-title, #business-title, .statement {
  font-size: var(--fs-h1);
  font-weight: 500; line-height: 1.15; letter-spacing: -0.025em;
}
.section-lead { margin-top: 24px; max-width: 42em; font-size: 1.0625rem; line-height: 2; }
.section-head { display: grid; gap: 0; }

.note { margin-top: 28px; font-size: var(--fs-meta); line-height: 1.9; color: var(--muted); }

/* 2カラム（見出し｜本文）：900px以上は12列の上で、見出しを1〜5列目、本文を6列目の頭から置く */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.split-body p { font-size: 1.0625rem; line-height: 2.05; }
.split-body p + p { margin-top: 1.2em; }
@media (min-width: 900px) {
  .split { grid-template-columns: var(--grid); column-gap: var(--col-gap); align-items: end; }
  .split > :first-child { grid-column: 1 / span 5; }
  .split > :last-child { grid-column: 6 / -1; }
}
/* 主張のある見出し（h1）は左の列に収まらないので、節の幅いっぱいの1行目に置き、本文はその下の6列目の頭から始める */
#about .split, #business .head-split { row-gap: clamp(32px, 4vw, 56px); }
#about .split > :first-child, #business .head-split > :first-child { grid-column: 1 / -1; }

/* ---------- 共通：左に見出し、右に大きめの説明文（Palantir風の構成）。軸は .split と同じ ---------- */
.head-split { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 24px; align-items: start; }
@media (min-width: 900px) {
  .head-split { grid-template-columns: var(--grid); column-gap: var(--col-gap); }
  .head-split > :first-child { grid-column: 1 / span 5; }
  .head-split > :last-child { grid-column: 6 / -1; }
}
/* 大きめの説明文：見出し（h1・h2）と競わないよう、項目の見出しと同じ段（h3）に抑える。
   文字を詰める指定（palt）は使わない（「（FDE）。」の括弧と句点がぶつかるため。約物の並びはブラウザの標準の詰めに任せる）。
   行頭に来た「や（は半分の幅にして、左端の揃いを崩さない（対応していないブラウザでは無視される） */
.lead-lg {
  font-size: var(--fs-h3); font-weight: 400; line-height: 1.75; letter-spacing: 0.02em;
  color: var(--ink); word-break: auto-phrase; text-spacing-trim: trim-start;
}

/* ---------- 01 課題 ---------- */
/* 2つの力：768px以上は12列の上で、1つ目を1〜5列目、2つ目を6列目の頭から置く。
   すぐ上の本文（6列目の頭）と書き出しをそろえるため、半分ずつ（1〜6｜7〜12）ではなく見出し｜本文と同じ割り方にする。
   上の線は項目の区切り（line-strong） */
.need-grid {
  margin-top: clamp(56px, 7vw, 88px);
  display: grid; grid-template-columns: minmax(0, 1fr);
  column-gap: var(--col-gap); row-gap: 40px;
}
@media (min-width: 768px) {
  .need-grid { grid-template-columns: var(--grid); }
  .need-card { grid-column: 1 / span 5; }
  .need-card + .need-card { grid-column: 6 / -1; }
}
.need-card { padding-top: 24px; border-top: 1px solid var(--line-strong); }
.need-who { font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0.06em; color: var(--muted); }
.need-what {
  margin-top: 12px;
  font-size: var(--fs-h3); font-weight: 400; line-height: 1.6;
  color: var(--ink); font-feature-settings: "palt";
}
/* まとめの一文：2つの力の下から外した、節の末尾の独立したブロック。前後に大きな余白をとり、ここで一度スクロールの流れを止める。
   下の余白は、節の下の余白を兼ねる（#about の --pad-bottom は 0） */
.statement-block { padding-block: clamp(120px, 14vw, 220px); }
/* 太さ・行間は、主張のある見出し（h1）の指定（.section-title の下）にまとめている。
   大きさは h1 の段のまま、上限だけ「1行目が本文の幅に収まる大きさ」に抑える。
   768px以上の1行目「当社は、この2つの力をAIで支え、」は文字約14.06個分（和文と英字の間の空きを含む）。
   本文の幅÷14.2 は、幅1200pxで約84px、幅768pxで約50px（抑えないと、幅1560px以上と768〜783pxで「AIで支え、」だけが次の行に落ちる） */
.statement {
  font-size: min(var(--fs-h1), min(100vw - 2 * var(--gutter), var(--container)) / 14.2);
  color: var(--ink); font-feature-settings: "palt";
}
/* スマホは「当社は、この2つの力を／AIで支え、システムを／理解し、変える力を／顧客自身に戻します。」の4行に組む。
   1行目「当社は、この2つの力を」（文字約9.7個分）が本文の幅に収まる大きさまでにする（幅360pxで約33px。抑えないと5行になる） */
@media (max-width: 767px) {
  .statement { font-size: min(var(--fs-h1), (100vw - 2 * var(--gutter)) / 9.8); }
}
/* 太くするのは「顧客自身」だけ（この一文の答えにあたる語） */
.statement em { font-style: normal; font-weight: 700; }

/* ---------- 02 事業：5つの資料 → Formula AI → 5つの成果物 ----------
   PCは横に「資料 → 中央 → 成果物」。スマホ（767px以下）は縦に、縦書きの言葉を各線の真上・真下に置く。
   画面に入ると、main.js が次の印を順に付けて「読み解く → 生成する」の順に組み立てる：
   sf-armed＝組み立て前（言葉・点・線・見出し・説明文を隠す）／sf-in＝始まり（左の見出しと説明文が現れ、左の言葉を打ち出す。打ち終えた言葉の点に is-on）／
   sf-lines-in＝左の線を引く／sf-recv＝中央の枠が一瞬太くなる（受け取った合図）／sf-lines-out＝右の線を引く／
   sf-out＝右の点と見出しが現れ、右の言葉を打ち出す／sf-done＝組み上がり（sf-armed などを外し、1行ずつ点を走らせる）。
   JSなし・動きを減らす設定・「動きを止める」の間は sf-armed が付かないので、最初から完成形（点は走らせない） */
.spec-flow {
  margin-top: clamp(64px, 8vw, 104px);
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(280px, 2.6fr) minmax(150px, 1fr);
  grid-template-areas:
    "label-in . label-out"
    "list-in core list-out"
    "caption caption caption";
}
.spec-label { display: flex; padding-bottom: 14px; font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0.06em; color: var(--muted); }
.spec-label--in { grid-area: label-in; justify-content: flex-end; }
.spec-label--out { grid-area: label-out; }

.spec-list { display: grid; grid-template-rows: repeat(5, 60px); }
.spec-list li {
  position: relative; display: flex; align-items: center;
  font-size: 15.5px; font-weight: 500; color: var(--ink); white-space: nowrap;
  /* 英単語（.sf-latin）と和文の間の自動のすき間は、span の境目で効かないブラウザがあるので止めて、下の .sf-latin で同じ幅（1/8字）を空ける */
  text-autospace: no-autospace;
}
.spec-list .sf-latin { margin-inline-end: .125em; }
/* 言葉の点（線の端）。線（後ろに並ぶ .spec-core の中）より手前に重ねる（左・上の言葉の点に、線が乗って見えないように） */
.spec-list li::after {
  content: ""; position: absolute; z-index: 1; top: 50%;
  width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--ink);
}
.spec-list--in { grid-area: list-in; }
.spec-list--in li { justify-content: flex-end; padding-right: 22px; }
.spec-list--in li::after { right: -3.5px; }
.spec-list--out { grid-area: list-out; }
.spec-list--out li { padding-left: 22px; }
.spec-list--out li::after { left: -3.5px; }

.spec-core { grid-area: core; position: relative; height: 300px; }
.spec-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.spec-lines-v { display: none; }
.spec-lines path { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.spec-lines-base path { stroke: var(--line-strong); }
/* 走る点：長さのほぼない線の両端を丸めて、直径4pxの点にする（言葉の点7pxより小さく、1pxの線より目に入る大きさ）。組み上がるまでは出さない（JSなしでも出さない）。
   線の長さを1とする目盛り（pathLength="1"）で、点を線の始まりの手前（.01）から終わりの先（-1.01）へ動かす */
.spec-lines-flow { display: none; }
.spec-lines-flow path {
  stroke: var(--ink); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: .001 2; stroke-dashoffset: .01;
}

/* 幅はロゴの大きさで決める（中央に置くための left: 50% で使える幅が半分になり、スマホでロゴが縮むのを防ぐ） */
.spec-node {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max-content; padding: 22px 28px;
  background: var(--node-bg);
  box-shadow: 0 0 0 8px var(--white), 0 0 0 9px var(--line-strong);
}
.spec-node img { display: block; height: 20px; width: auto; }

.spec-flow figcaption {
  grid-area: caption; margin: 44px auto 0; max-width: 46em;
  font-size: 14px; line-height: 1.95; color: var(--muted); text-align: center;
  text-wrap: balance; word-break: auto-phrase;
}
.spec-flow figcaption .text-link { display: flex; width: fit-content; margin: 12px auto 0; font-size: 14px; }

/* 打ち出し中の言葉（main.js が作る）：打ち終えたときの大きさを透明な文字（.sf-full）で先に取っておき、
   その上に打ち出し中の文字（.sf-now）を重ねる（打っている間に、言葉や点の位置が動かない）。確定の手前の文字（.sf-noise）は薄いグレー */
.sf-t { position: relative; display: inline-block; }
.sf-full { visibility: hidden; }
.sf-now { position: absolute; inset: 0; }
.sf-noise { color: var(--faint); }

/* 組み立て前と、組み立ての途中 */
.sf-armed :is(.spec-label, figcaption) { opacity: 0; transition: opacity .6s ease; }
.sf-armed.sf-in .spec-label--in,
.sf-armed.sf-out .spec-label--out { opacity: 1; }
.sf-armed.sf-in figcaption { opacity: 1; transition-delay: .3s; }
.sf-armed:focus-within figcaption { opacity: 1; }
/* 言葉の点：左は打ち終えた言葉から、右は線が届いた時点でそろって現れる */
.sf-armed .spec-list li::after { scale: 0; transition: scale .45s var(--ease); }
.sf-armed .spec-list--in li.is-on::after,
.sf-armed.sf-out .spec-list--out li::after { scale: 1; }
/* 線を引く：線の長さを1とする目盛りで、全体を隠した位置（1）から描き終えた位置（0）へ。左は言葉から中央へ、右は中央から言葉へ伸びる。
   組み立ての間は、線を濃いめの灰色（--muted）で引き（ライトでも引く動きが見えるように）、組み上がったら、いつもの線の色（--line-strong）へ .6秒で戻す。
   すき間（2）は線より長くとる（1 にすると、次の線の頭が線の終わりちょうどに来て、隠している間も端に小さな点が残る） */
.sf-armed .spec-lines-base path {
  stroke: var(--muted);
  stroke-dasharray: 1 2; stroke-dashoffset: 1;
  transition: stroke-dashoffset .6s cubic-bezier(.65, 0, .35, 1);
}
.sf-armed.sf-lines-in .spec-lines-base .sf-in path,
.sf-armed.sf-lines-out .spec-lines-base .sf-out path { stroke-dashoffset: 0; }
:root:not([data-motion="off"]) .spec-flow.sf-done .spec-lines-base path { transition: stroke .6s ease; }
/* main.js が隠す準備をしている一瞬：隠れた状態へは、移り変わりなしで切り替える */
.sf-setup,
.sf-setup *,
.sf-setup *::after { transition: none !important; }

@media (prefers-reduced-motion: no-preference) {
  /* 受け取った合図：中央の枠の線が、200msだけ黒く太くなる */
  .spec-flow.sf-recv .spec-node { animation: sf-recv .5s ease both; }
  /* 組み上がったら、1行ずつ順番に、2.4秒ごとに1つの点を走らせる（5行で12秒の繰り返し）。
     資料から中央へは加速しながら（.9秒）、中央の枠の下をくぐって、中央から成果物へは減速しながら（.9秒）走る */
  .spec-flow.sf-done .spec-lines-flow { display: inline; }
  .spec-flow.sf-done .spec-lines-flow .sf-in path { animation: sf-run-in 12s linear calc(var(--k) * 2.4s + .6s) infinite; }
  .spec-flow.sf-done .spec-lines-flow .sf-out path { animation: sf-run-out 12s linear calc(var(--k) * 2.4s + 1.5s) infinite; }
}
@keyframes sf-recv {
  0%, 100% { box-shadow: 0 0 0 8px var(--white), 0 0 0 9px var(--line-strong); }
  12%, 52% { box-shadow: 0 0 0 8px var(--white), 0 0 0 10px var(--ink); }
}
/* 12秒のうち .9秒（7.5%）で線の始まりから終わりまで走り、残りは線の終わりの先（見えない位置）で待つ */
@keyframes sf-run-in {
  0% { stroke-dashoffset: .01; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  7.5%, 100% { stroke-dashoffset: -1.01; }
}
@keyframes sf-run-out {
  0% { stroke-dashoffset: .01; animation-timing-function: cubic-bezier(0, .55, .45, 1); }
  7.5%, 100% { stroke-dashoffset: -1.01; }
}

/* スマホ：縦の図。上から「読み解くもの」→ 縦書きの5つの資料 → 線が中央の1点に集まる → 5つの成果物へ広がる → 「生成・更新するもの」。
   5つの言葉を5列に置き、各列の中央が線の端（幅の10・30・50・70・90%）に来る */
@media (max-width: 767px) {
  .spec-flow {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "label-in" "list-in" "core" "list-out" "label-out" "caption";
  }
  .spec-label, .spec-label--in { justify-content: center; }
  .spec-label--in { padding-bottom: 20px; }
  .spec-label--out { padding: 20px 0 0; }
  .spec-list { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: none; }
  .spec-list li,
  .spec-list--in li,
  .spec-list--out li {
    display: block; justify-self: center;
    writing-mode: vertical-rl;
    /* 縦書きの中の略語（API）は横倒しにせず、1文字ずつ立てて並べる */
    text-orientation: upright;
    font-size: 15px; line-height: 1.5; letter-spacing: .12em;
  }
  /* 単語の英字（Excel）は横に倒して、欧文の字並びのまま読ませる（日本語の縦組みの作法。「台帳」は縦のまま）。字間は欧文の詰め具合にする */
  .spec-list .sf-latin { text-orientation: mixed; letter-spacing: .04em; }
  /* 上の言葉は下端を、下の言葉は上端をそろえ、線の端の点との間を18pxあける */
  .spec-list--in li { align-self: end; padding: 0 0 18px; }
  .spec-list--out li { align-self: start; padding: 18px 0 0; }
  .spec-list li::after { left: 50%; right: auto; margin: 0 0 0 -3.5px; }
  .spec-list--in li::after { top: auto; bottom: -3.5px; }
  .spec-list--out li::after { top: -3.5px; }
  .spec-lines-h { display: none; }
  .spec-lines-v { display: block; }
  .spec-core { height: 320px; }
  .spec-flow figcaption { margin-top: 40px; text-align: left; text-wrap: pretty; }
  .spec-flow figcaption .text-link { margin-left: 0; }
}

/* ---------- 私たちが大切にしていること（カルチャー3つ）：トップで2つ目の見せ場 ----------
   確定した3つの言葉を、主張のある見出しの大きさ（--fs-h1。スマホでは少し大きい --fs-h1-feature）・太字で、文節ごとに改行して置く。説明はその下。
   900px以上は12列の上で、番号を1列目・見出しを2列目から右端まで・説明を見出しの下の6列目の頭から置く（ほかの節の本文と同じ軸）。
   項目の区切りは上の線（line-strong）だけ。最後の項目の下には線を引かない（次の節の黒い線と二重にしないため） */
.feature-grid { margin-top: clamp(48px, 6vw, 80px); }
.feature {
  /* 各価値の上下の余白。PCは大きく取り、1つずつ読ませる */
  --pad: 40px;
  display: grid; grid-template-columns: minmax(0, 1fr);
  column-gap: var(--col-gap); row-gap: 20px; align-items: start;
  padding: var(--pad) 0;
  border-top: 1px solid var(--line-strong);
}
.feature:last-child { padding-bottom: 0; }
@media (min-width: 900px) {
  .feature { --pad: clamp(72px, 8vw, 128px); grid-template-columns: var(--grid); row-gap: clamp(28px, 2.6vw, 40px); }
  .feature .feature-num { grid-column: 1; grid-row: 1; }
  .feature h3 { grid-column: 2 / -1; grid-row: 1; }
  .feature p { grid-column: 6 / -1; grid-row: 2; }
}
/* 番号も <p> なので、説明（.feature p）の指定に負けないよう .feature を重ねて指定する。
   PCでは、見出しの1行目の字面の上端に番号の上端をそろえる */
.feature .feature-num {
  max-width: none; font-family: var(--font-mono); font-size: var(--fs-meta); line-height: 1;
  letter-spacing: 0.1em; color: var(--muted);
}
@media (min-width: 900px) {
  .feature .feature-num { margin-top: calc(var(--fs-h1-feature) * .16); }
}
/* 番号の下の細線：見出しが満ちる進み具合（--ink-p。0→1）に合わせて左から伸びる。満ちる色と同じ --ink にする（線の色の決まりの、ただ1つの例外）。
   動かないとき（JSなし・動きを減らす設定・止めている間・満ち終わったあと）は、最初から伸び切った形 */
@property --ink-p { syntax: "<number>"; inherits: true; initial-value: 1; }
.feature .feature-num::after {
  content: ""; display: block; width: min(100%, 48px); height: 1px; margin-top: 14px;
  background: var(--ink); transform-origin: left; scale: var(--ink-p, 1) 1;
}
@media (min-width: 900px) {
  .feature .feature-num::after { width: 100%; }
}
.feature h3 {
  font-size: var(--fs-h1-feature); font-weight: 700; line-height: 1.18; letter-spacing: -0.03em;
  color: var(--ink); font-feature-settings: "palt";
}
/* 文節（.phrase）ごとに改行する。幅は文字の分だけにする（満ちる動きの幅を、文字の幅に合わせるため）。
   2行目は --ln で1つ遅らせる（1行目が満ちてから2行目が満ちる） */
.feature h3 .phrase { display: block; width: fit-content; max-width: 100%; }
.feature h3 .phrase:nth-child(2) { --ln: 1; }
/* 説明は読ませたい本文なので、本文の色（--text）。1行が長くなりすぎないよう40字前後で折り返す */
.feature p { max-width: 40em; font-size: 15.5px; line-height: 2; color: var(--text); }

/* 見出しが灰色から黒く満ちる：冒頭の「黒い言葉が灰色に押し出される」の逆向き。読み進めるほど、言葉が確かな色になる。
   行ごとに、黒と灰色を半分ずつ塗った2倍幅の背景を文字の形に切り抜き、背景の位置を灰色の側（100%）から黒の側（0）へ動かす。
   黒と灰色の境目は、文字1つ分（1em）でぼかす（境目が硬いと、満ちる途中の1文字が縦に割れて見えるため。インクが文字の上を流れていくように見せる）。
   背景の幅をぼかしの分（1em）だけ広げ、始めは境目ごと左の外、終わりは境目ごと右の外に出す（始めは灰色一色、終わりは黒一色になる）。
   main.js が文節を包んだ見出しは内側の .ph-in が、包んでいない見出しは .phrase が1行（文節を包むと .phrase は別の層になり、
   見出し全体で切り抜くと文字が消えるため、行ごとに切り抜く）。
   ・スクロール連動のアニメーションに対応したブラウザ：見出しが画面の下から入ってから、中央に来るまでの間に、スクロールに合わせて満ちる。
     中央まで来たら main.js が .feature に is-filled を付けて黒のまま固定する（上へ戻っても灰色に戻さない。読んだ言葉を薄くしないため）
   ・対応しないブラウザ：main.js が .ink-ready を付けて灰色で待たせ、見出しが画面の下から3割の高さに来たら is-filled を付けて1.2秒で満たす
   動きを減らす設定・「動きを止める」で止めている間・JSなし・強制カラー（ハイコントラスト）では、最初から黒一色 */
@keyframes ink-fill { to { background-position: 0 0; } }
@keyframes ink-p { from { --ink-p: 0; } to { --ink-p: 1; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
    /* 見出しが画面を通る進み具合を、同じ価値の番号の細線からも読めるようにする */
    .feature { timeline-scope: --ink; }
    .feature h3 { view-timeline: --ink block; }
    :root.js:not([data-motion="off"]) .feature:not(.is-filled) h3:not(.ph-rise) .phrase,
    :root.js:not([data-motion="off"]) .feature:not(.is-filled) h3.ph-rise .ph-in {
      background: linear-gradient(90deg, var(--ink) calc(50% - .5em), var(--k-fade-1) calc(50% + .5em)) 100% 0 / calc(200% + 1em) 100% no-repeat;
      -webkit-background-clip: text; background-clip: text;
      color: transparent;
      animation: ink-fill linear both;
      animation-timeline: --ink;
      /* 1行目：見出しの上の端が画面に入ってすぐ（1割）満ち始める（灰色のまま読まれる時間を短くするため）。
         2行目：1行目が満ち切る少し前から、見出しの中央が画面の中央に来るまで */
      animation-range: entry 10% cover 30%;
    }
    :root.js:not([data-motion="off"]) .feature:not(.is-filled) h3:not(.ph-rise) .phrase:nth-child(2),
    :root.js:not([data-motion="off"]) .feature:not(.is-filled) h3.ph-rise .phrase:nth-child(2) .ph-in { animation-range: cover 27% cover 50%; }
    :root.js:not([data-motion="off"]) .feature:not(.is-filled) .feature-num {
      animation: ink-p linear both;
      animation-timeline: --ink; animation-range: entry 10% cover 50%;
    }
  }
}
@supports not (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
    :root:not([data-motion="off"]) .feature.ink-ready h3:not(.ph-rise) .phrase,
    :root:not([data-motion="off"]) .feature.ink-ready h3.ph-rise .ph-in {
      background: linear-gradient(90deg, var(--ink) calc(50% - .5em), var(--k-fade-1) calc(50% + .5em)) 100% 0 / calc(200% + 1em) 100% no-repeat;
      -webkit-background-clip: text; background-clip: text;
      color: transparent;
      transition: background-position 1.2s cubic-bezier(.65, 0, .35, 1) calc(var(--ln, 0) * 450ms);
    }
    /* 文節を包んだ見出しは、せり上がる動き（style.css の末尾「スクロールで現れる」）の指定も残す */
    :root:not([data-motion="off"]) .feature.ink-ready h3.ph-rise .ph-in {
      transition: translate .9s var(--ease) calc(var(--rd, 0ms) + var(--i, 0) * 70ms),
        background-position 1.2s cubic-bezier(.65, 0, .35, 1) calc(var(--ln, 0) * 450ms);
    }
    :root:not([data-motion="off"]) .feature.ink-ready.is-filled h3 :is(.phrase, .ph-in) { background-position: 0 0; }
    :root:not([data-motion="off"]) .feature.ink-ready .feature-num::after { transition: scale 1.65s cubic-bezier(.65, 0, .35, 1); }
    :root:not([data-motion="off"]) .feature.ink-ready:not(.is-filled) .feature-num::after { scale: 0 1; }
  }
}
/* 満ちる途中の言葉を選んだときも、文字が読めるようにする（切り抜いた文字は、選んだ色の下に隠れるため） */
.feature h3 ::selection { color: var(--white); background-color: var(--ink); }

/* ---------- 04 3つの役割（Palantirの採用ページの構成を参考） ---------- */
/* 12列の上で、1段目に見出し（1〜5列目）と導入文（6列目の頭から）、2段目に循環の図（導入文の真下、6列目の頭から）、
   3段目に大きな3語の一覧（1〜5列目）と詳細（6列目の頭から）を置く（ほかの節と同じ軸。図も「6列目の頭」の軸に乗せる） */
.roles-grid {
  display: grid; grid-template-columns: var(--grid);
  column-gap: var(--col-gap); row-gap: clamp(56px, 8vw, 112px);
}
.roles-head { grid-column: 1 / span 5; grid-row: 1; }
.roles-intro { grid-column: 6 / -1; grid-row: 1; }
.roles-cycle { grid-column: 6 / -1; grid-row: 2; }
.roles-tabs { display: none; grid-column: 1 / span 5; grid-row: 3; align-self: start; }
.roles-panels { grid-column: 6 / -1; grid-row: 3; }

/* JSが動かない環境では、3つの役割を縦に並べて全部見せる */
.roles-panel + .roles-panel { margin-top: 56px; }

/* JSが動く環境では、左の一覧で切り替える（パネルを重ねて高さを揃え、切替時にページが跳ねないようにする）。
   切り替えるときに2つの文章を重ねない：出る側は .16s で消えるだけ。入る側は消えきるのを待ってから、
   見出しを文節ごとにせり上げ（スクロールで現れる見出しと同じ動き。main.js が .ph-in で包む）、ラベルは見出しと同時、本文と求人リンクは 120ms 遅れて opacity だけで出す */
.roles.is-enhanced .roles-tabs { display: flex; flex-direction: column; }
.roles.is-enhanced .roles-panels { display: grid; }
.roles.is-enhanced .roles-panel {
  grid-area: 1 / 1; margin-top: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .16s linear, visibility 0s linear .16s;
}
.roles.is-enhanced .roles-panel.is-active {
  opacity: 1; visibility: visible;
  transition: opacity 0s linear .16s, visibility 0s linear .16s;
}
.roles.is-enhanced .roles-panel > * { transition: opacity .6s ease .28s; }
.roles.is-enhanced .roles-panel > .roles-panel-label { transition-delay: .16s; }
.roles.is-enhanced .roles-panel > .roles-panel-title { transition: none; }
.roles.is-enhanced .roles-panel-title .ph-in { transition: translate .9s var(--ease) calc(.16s + var(--i, 0) * 70ms); }
/* 出る側：消えきったところで、次に入るときの最初の形（文字は下に隠れ、本文は透明）へ一瞬で戻しておく */
.roles.is-enhanced .roles-panel:not(.is-active) > :not(.roles-panel-title) { opacity: 0; transition: opacity 0s linear .16s; }
.roles.is-enhanced .roles-panel:not(.is-active) .roles-panel-title .ph-in { translate: 0 110%; transition: translate 0s linear .16s; }
/* 動きを減らす設定では、待ち時間も置かずにすぐ入れ替える（「動きを止める」の間は、style.css の末尾がまとめて待ち時間を消す） */
@media (prefers-reduced-motion: reduce) {
  .roles.is-enhanced .roles-panel,
  .roles.is-enhanced .roles-panel * { transition-delay: 0s !important; }
}

/* 大きな3語：主張のある見出し（h1）の大きさ・太字。左の5列に「Platform」が収まる。役割を選ぶ部品はこの3語だけ（上の図は選んだ役割を映すだけ）。
   選んだ語は黒く残って少し右へ寄り、下の線が左から引かれる。ほかの2語は灰色（--muted）に退く。
   選んでいない語も押せる部品なので、明暗どちらでも地の色との明るさの比が3:1を超える --muted にする（ダーク約6.3:1、ライト約4.9:1）。
   マウスを乗せると、灰色が一段濃く（--text）なる（マウスで操作する端末だけ） */
.roles-tab {
  position: relative;
  display: flex; align-items: center;
  width: 100%; padding: .2em 0 .18em;
  background: none; border: 0; border-bottom: 1px solid var(--line-strong);
  font: inherit; font-size: var(--fs-h1); font-weight: 700; line-height: 1; letter-spacing: -0.035em;
  color: var(--muted); text-align: left; cursor: pointer;
  transition: color .45s var(--ease);
}
.roles-tab > span { display: inline-flex; align-items: flex-start; transition: translate .6s var(--ease); }
/* 番号は等幅13pxで、語の右肩（大文字の上端の高さ）に置く */
.roles-tab sup {
  margin: calc(var(--fs-h1) * .19) 0 0 .5em;
  font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 400; line-height: 1; letter-spacing: 0;
}
/* 選んだ語の下の黒い線：左から引かれ、選択が移ると右へ抜ける */
.roles-tab::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: right;
  transition: transform .6s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .roles-tab:not([aria-selected="true"]):hover { color: var(--text); }
}
.roles-tab[aria-selected="true"] { color: var(--ink); }
.roles-tab[aria-selected="true"] > span { translate: .12em 0; }
.roles-tab[aria-selected="true"]::before { transform: none; transform-origin: left; }

.roles-panel-label { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.08em; color: var(--muted); }
/* 詳細の見出し（「Growthは、合意をつくる。」）は役割を言い切る一文なので、ラベルに見えないよう目次の段（h2）まで上げ、
   左の大きな3語との大きさの差を詰める（節の見出しと同じ大きさ・行間） */
.roles-panel-title {
  margin-top: 16px;
  font-size: var(--fs-h2); font-weight: 400; line-height: 1.35; letter-spacing: -0.01em;
  color: var(--ink); font-feature-settings: "palt";
}
/* 役割の説明は読ませたい本文なので、本文の色（--text） */
.roles-panel-text { margin-top: 20px; max-width: 40em; font-size: 15.5px; line-height: 2; color: var(--text); }
.roles-panel-jobs-label { margin-top: 32px; font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0.06em; color: var(--muted); }
.roles-panel-jobs { margin-top: 10px; max-width: 40em; border-top: 1px solid var(--line); }
.roles-panel-jobs a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
  font-size: 15px; font-weight: 400; line-height: 1.6; color: var(--ink); text-decoration: none;
  transition: color .2s var(--ease);
}
/* 一覧の最後の行の下には線を引かない（次の節の黒い線と二重にしないため） */
.roles-panel-jobs li:last-child a { border-bottom: 0; }
.roles-panel-jobs small { margin-left: 10px; font-size: var(--fs-meta); font-weight: 400; color: var(--muted); }
.roles-panel-jobs .icon { color: var(--muted); transition: transform .2s var(--ease), color .2s var(--ease); }
/* マウスを乗せたとき（行の下に線が引かれ、職種名が右へ寄る）は、05 募集職種の .job と同じ指定（「職種の行の手応え」） */

/* 899px以下：1列に積む。大きな3語も縦に積む */
@media (max-width: 899px) {
  .roles-grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .roles-head, .roles-intro, .roles-cycle, .roles-tabs, .roles-panels { grid-column: 1; grid-row: auto; }
  .roles-cycle { margin-block: 28px 16px; }
  .roles-tab { padding: .3em 0 .26em; }
  .roles-panels { margin-top: 20px; }
  .roles-panel-jobs small { display: block; margin-left: 0; }
}

/* ---------- 3つの役割のつながり（循環の図）：Growth → Delta → Platform →（破線）次の案件へ → Growth ----------
   職種ページ（Platform Product Engineer）の「仕事の流れ」の輪と同じ描き方：線1px・点7px・戻りは破線（4px・5px）・向きの印（くの字）7px。
   円の上の3つの点が役割。選んでいる役割（main.js が is-sel を付ける）の点と、そこから次へ向かう弧を --ink で残し、ほかを --faint に退かせる
   （Platform を選ぶと、次の案件へ戻る破線と「次の案件へ」が黒くなる）。JSが動かない環境では、全部を --ink で表示する。
   768px以上：円の中に一言、右上に Growth・下に Delta・左上に Platform。
   左上の Platform の名前の左端を図の左端（900px以上は6列目の頭。真上の導入文、真下の詳細のラベルと同じ軸）にそろえ、そこから円の位置を決める。
   767px以下：一言を円の上に出し、円は中央。Growth と Platform の名前を点の上に置く */
.roles-cycle {
  --rc-s: clamp(300px, 34vw, 520px);           /* 円の図の一辺（円の直径はこの約0.73倍。1440px幅で約360px、1920px幅で約380px）。上限は index.html の円の座標の一辺550より小さくする */
  --rc-r: calc(var(--rc-s) * .3636);           /* 円の半径（図の一辺550に対して200。下の割合は、どれもこの座標での位置） */
  --rc-fs: var(--fs-h3);                       /* 役割の名前の文字（項目の見出しの段。スマホだけ、職種ページの図と同じ18px） */
  --rc-lh: calc(var(--rc-fs) * 1.4);           /* 役割の名前1行の高さ（点と名前の高さ合わせに使う） */
  --rc-top: calc(32px - var(--rc-s) * .1364);  /* 「次の案件へ」の上端が図の上端にそろうよう、円の上の空きを詰める */
  /* 円の中心の、図の左端からの位置＝ Platform の名前の幅（番号「03」と間の10pxを含む。Noto Sans JP で測った値）
     ＋名前と点のあいだ22px（Growth の側と同じ）＋点から円の中心まで */
  --rc-pw: calc(var(--rc-fs) * 4.21 + 27px);
  --rc-cx: calc(var(--rc-pw) + 22px + var(--rc-s) * .3149);
  position: relative; margin: 0;
}
/* 768〜899px（1列に積む幅）：図が本文の幅いっぱいを使えるので、円を少し大きくする（820px幅で約360px） */
@media (max-width: 899px) {
  .roles-cycle { --rc-s: clamp(300px, 44vw, 400px); }
}
.rc-stage {
  position: relative;
  height: calc(var(--rc-s) * .8636 + 90px);    /* 下の Delta の名前までの高さ */
  margin-top: var(--rc-top);
}

/* 中央の一言 */
.rc-core {
  position: absolute; z-index: 1; left: var(--rc-cx); top: calc(var(--rc-top) + var(--rc-s) / 2);
  width: calc(var(--rc-s) * .56); margin-left: calc(var(--rc-s) * -.28);
  transform: translateY(-50%);
  font-size: clamp(16px, calc(var(--rc-s) * .048), 19px); font-weight: 400; line-height: 1.65; letter-spacing: .02em;
  color: var(--ink); text-align: center; font-feature-settings: "palt"; text-wrap: balance;
}
.rc-ph { display: inline-block; max-width: 100%; }  /* 文節のまとまり（途中で折り返さない） */

/* 円（SVG）：Growth→Delta、Delta→Platform の2本の弧と、Platform→Growth の戻りの破線。
   .rc-cover は破線を「引く」ための、地の色の覆い（画面に入ると、破線の始まりの側から覆いが外れていく） */
.rc-ring {
  position: absolute; top: 0; left: var(--rc-cx);
  width: var(--rc-s); height: var(--rc-s); max-width: none; margin-left: calc(var(--rc-s) / -2);
  overflow: visible;
}
.rc-ring path { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.rc-arc { stroke: var(--ink); stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.rc-back { stroke: var(--ink); stroke-dasharray: 4 5; }
.rc-ring .rc-cover { stroke: var(--white); stroke-width: 5; stroke-dasharray: 1 1; stroke-dashoffset: -1; }

/* 向きの印（くの字）：2本の弧のまん中と、戻りの破線の頂点。円の大きさによらず 7px・1px */
.rc-marks { position: absolute; left: var(--rc-cx); top: calc(var(--rc-s) / 2); width: 0; height: 0; }
.rc-marks > span {
  position: absolute; left: -3.5px; top: -3.5px; width: 7px; height: 7px;
  border-top: 1px solid; border-right: 1px solid; color: var(--ink);
  transform: rotate(var(--a)) translateY(calc(var(--rc-r) * -1)) translateX(-2.5px) rotate(45deg);
}
.rc-marks > span:nth-child(1) { --a: 120deg; }
.rc-marks > span:nth-child(2) { --a: 240deg; }
.rc-marks > span:nth-child(3) { --a: 0deg; }

/* 円の上を回る 7px の点（Growth から時計回りに1周12秒）。動く環境でだけ出す */
.rc-orbit {
  display: none;
  position: absolute; left: var(--rc-cx); top: calc(var(--rc-s) / 2);
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: var(--ink);
  transform: rotate(60deg) translateY(calc(var(--rc-r) * -1));
}
@keyframes rc-orbit {
  from { transform: rotate(60deg) translateY(calc(var(--rc-r) * -1)); }
  to { transform: rotate(420deg) translateY(calc(var(--rc-r) * -1)); }
}

/* 3つの役割（点＋名前＋言葉）。点の位置は円の図の中の割合。
   リンクの押せる範囲が点を含むよう、リンクの端を点の12px外側に置き、点は ::before、選んだ印の輪は ::after で描く */
.rc-nodes { margin: 0; padding: 0; list-style: none; }
.rc-nodes li:nth-child(1) .rc-node { --x: .8149; --y: .3182; --d: 0s; }
.rc-nodes li:nth-child(2) .rc-node { --x: .5;    --y: .8636; --d: .62s; }
.rc-nodes li:nth-child(3) .rc-node { --x: .1851; --y: .3182; --d: 1.17s; }
.rc-node {
  --rc-dot: var(--ink);
  position: absolute; z-index: 1; display: block;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  transition: color .45s var(--ease);
}
.rc-node::before,
.rc-node::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.rc-node::before { width: 7px; height: 7px; background: var(--rc-dot); transition: background-color .45s var(--ease); }
.rc-node::after {
  width: 23px; height: 23px; border: 1px solid var(--ink);
  opacity: 0; scale: .4; clip-path: circle(75% at 50% 50%);
  transition: opacity .45s var(--ease), scale .6s var(--ease);
}
/* 右上（Growth）：点の右に名前 */
.rc-nodes li:nth-child(1) .rc-node {
  left: calc(var(--rc-cx) + (var(--x) - .5) * var(--rc-s) - 12px);
  top: calc(var(--y) * var(--rc-s) - var(--rc-lh) / 2 - 8px);
  padding: 8px 8px 8px 34px;
}
/* 左上（Platform）：点の左に名前。名前の左端を図の左端にそろえる（押せる範囲は、左の余白へ 8px 出す）。
   番号はほかの2つと同じく名前の前（「03 Platform」）。名前の右端から点までは、Growth の側と同じ 22px */
.rc-nodes li:nth-child(3) .rc-node {
  left: -8px; right: calc(100% - var(--rc-cx) - (var(--x) - .5) * var(--rc-s) - 12px);
  top: calc(var(--y) * var(--rc-s) - var(--rc-lh) / 2 - 8px);
  padding: 8px 34px 8px 8px;
}
.rc-nodes li:is(:nth-child(1), :nth-child(3)) .rc-node::before { top: calc(8px + var(--rc-lh) / 2 - 3.5px); }
.rc-nodes li:is(:nth-child(1), :nth-child(3)) .rc-node::after { top: calc(8px + var(--rc-lh) / 2 - 11.5px); }
.rc-nodes li:nth-child(1) .rc-node::before { left: 8.5px; }
.rc-nodes li:nth-child(1) .rc-node::after { left: .5px; }
.rc-nodes li:nth-child(3) .rc-node::before { right: 8.5px; }
.rc-nodes li:nth-child(3) .rc-node::after { right: .5px; }
/* 下（Delta）：点の下に名前（中央そろえ） */
.rc-nodes li:nth-child(2) .rc-node {
  left: calc(var(--rc-cx) + (var(--x) - .5) * var(--rc-s));
  top: calc(var(--y) * var(--rc-s) - 12px);
  transform: translateX(-50%);
  padding: 34px 8px 8px; text-align: center;
}
.rc-nodes li:nth-child(2) .rc-name { justify-content: center; }
.rc-nodes li:nth-child(2) .rc-node::before { left: 50%; top: 8.5px; margin-left: -3.5px; }
.rc-nodes li:nth-child(2) .rc-node::after { left: 50%; top: .5px; margin-left: -11.5px; }

.rc-name {
  display: flex; align-items: baseline; gap: 10px;
  font-size: var(--rc-fs); font-weight: 400; line-height: 1.4; letter-spacing: .01em;
}
.rc-num { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: .1em; color: var(--muted); }
.rc-verb {
  display: block; margin-top: 2px;
  font-size: 14px; line-height: 1.6; letter-spacing: .04em; color: var(--text);
  transition: color .45s var(--ease);
}

/* 戻りの破線の上に「次の案件へ」 */
.rc-back-label {
  position: absolute; left: var(--rc-cx); top: calc(var(--rc-s) * .1364 - 12px);
  transform: translate(-50%, -100%);
  font-size: var(--fs-meta); line-height: 1.5; letter-spacing: .04em; color: var(--muted); white-space: nowrap;
  transition: color .45s var(--ease);
}

/* 選んでいる役割（main.js が図に has-sel、選んだ役割の点・弧・印に is-sel を付ける）：選んだものを黒く残し、ほかを退かせる。
   JSが動く環境では、図の名前は押せない（役割を選ぶのは下の大きな3語だけ。main.js がリンクを外す）ので、マウスを乗せたときの変化も付けない */
.rc-ring path { transition: stroke .45s var(--ease); }
.rc-marks > span { transition: color .45s var(--ease); }
.roles-cycle.has-sel :is(.rc-arc, .rc-back):not(.is-sel) { stroke: var(--faint); }
.roles-cycle.has-sel .rc-marks > span:not(.is-sel) { color: var(--faint); }
.roles-cycle.has-sel .rc-node:not(.is-sel) { --rc-dot: var(--faint); color: var(--muted); }
.roles-cycle.has-sel .rc-node:not(.is-sel) .rc-verb { color: var(--muted); }
.roles-cycle.has-sel .rc-node.is-sel::after { opacity: 1; scale: 1; }
.roles-cycle.has-sel .rc-back-label.is-sel { color: var(--ink); }

/* 767px以下：一言を円の上に出し、円は中央に置く。Growth と Platform の名前は点の上に置く（点の横に置くと、円がとても小さくなるため）。
   番号は PC と同じく名前の前に、等幅の小さな文字で、名前の上の行に置く（名前と横に並べると、その分だけ円が小さくなるため）。
   円の大きさは、いちばん長い言葉（合意をつくる）が本文の幅に収まる大きさ（390px幅で約310px、360px幅で約260px）。
   すぐ下の大きな3語と、同じ一覧が続けて出ているように見えないよう、図の下を広くあける */
@media (max-width: 767px) {
  .roles-cycle {
    --rc-s: min(320px, calc((100vw - 2 * var(--gutter) - 160px) / .63)); --rc-fs: 18px; --rc-top: 40px; --rc-cx: 50%;
    margin-bottom: 48px;
  }
  .rc-stage { height: calc(var(--rc-s) * .8636 + 108px); }  /* 下の Delta の番号・名前・言葉までの高さ */
  .rc-name { flex-direction: column; align-items: flex-start; gap: 0; }
  .rc-nodes li:nth-child(2) .rc-name { align-items: center; }
  .rc-nodes li:nth-child(3) .rc-name { align-items: flex-end; }
  .rc-verb { font-size: 13px; }
  .rc-core {
    position: static; width: auto; margin: 0; transform: none;
    font-size: 20px; line-height: 1.6;
  }
  .rc-nodes li:is(:nth-child(1), :nth-child(3)) .rc-node {
    top: calc(var(--y) * var(--rc-s) + 12px); transform: translateY(-100%);
  }
  .rc-nodes li:nth-child(1) .rc-node { padding: 8px 8px 34px 8.5px; }
  .rc-nodes li:nth-child(3) .rc-node { left: auto; padding: 8px 8.5px 34px 8px; text-align: right; }
  .rc-nodes li:is(:nth-child(1), :nth-child(3)) .rc-node::before { top: auto; bottom: 8.5px; }
  .rc-nodes li:is(:nth-child(1), :nth-child(3)) .rc-node::after { top: auto; bottom: .5px; }
}

/* 登場の動き（サイトのJSが図に .is-in を付ける）：Growth の点から時計回りに円が引かれ、線が届いた順に点と名前が現れる。
   最後に戻りの破線が引かれ、「次の案件へ」と中央の一言が出て、点が円を回り始める（画面の外では .viz の is-paused で止まる）。
   動きを減らす設定・「動きを止める」の間・JSなしでは、最初から完成形（回る点は出さない） */
@media (prefers-reduced-motion: no-preference) {
  .js .roles-cycle .rc-arc { transition: stroke-dashoffset .55s linear .1s, stroke .45s var(--ease) 0s; }
  .js .roles-cycle .rc-arc[data-i="1"] { transition-delay: .65s, 0s; }
  .js .roles-cycle .rc-ring .rc-cover { transition: stroke-dashoffset .55s linear 1.2s; }
  .js .roles-cycle .rc-node::before { transition: scale .5s var(--ease) var(--d), background-color .45s var(--ease) 0s; }
  .js .roles-cycle .rc-node::after { transition: opacity .45s var(--ease), scale .6s var(--ease), clip-path .6s var(--ease) var(--d); }
  .js .roles-cycle .rc-node > span { transition: opacity .6s ease calc(var(--d) + .1s); }
  .js .roles-cycle .rc-node > .rc-verb { transition: opacity .6s ease calc(var(--d) + .1s), color .45s var(--ease) 0s; }
  .js .roles-cycle .rc-marks > span { transition: opacity .4s ease, color .45s var(--ease) 0s; }
  .js .roles-cycle .rc-marks > span:nth-child(1) { transition-delay: .38s, 0s; }
  .js .roles-cycle .rc-marks > span:nth-child(2) { transition-delay: .93s, 0s; }
  .js .roles-cycle .rc-marks > span:nth-child(3) { transition-delay: 1.48s, 0s; }
  .js .roles-cycle .rc-back-label { transition: opacity .6s ease 1.5s, color .45s var(--ease) 0s; }
  .js .roles-cycle .rc-core { transition: opacity 1s ease 1.6s; }

  .js .roles-cycle:not(.is-in):not(:focus-within) .rc-arc { stroke-dashoffset: 1; }
  .js .roles-cycle:not(.is-in):not(:focus-within) .rc-ring .rc-cover { stroke-dashoffset: 0; }
  .js .roles-cycle:not(.is-in):not(:focus-within) .rc-node::before { scale: 0; }
  .js .roles-cycle:not(.is-in):not(:focus-within) .rc-node::after { clip-path: circle(0 at 50% 50%); }
  .js .roles-cycle:not(.is-in):not(:focus-within) :is(.rc-node > span, .rc-marks > span, .rc-back-label, .rc-core) { opacity: 0; }

  :root.js:not([data-motion="off"]) .rc-orbit {
    display: block;
    animation: rc-orbit 12s linear 2s infinite;
    transition: opacity .6s linear 1.8s;
  }
  .js .roles-cycle:not(.is-in) .rc-orbit { opacity: 0; animation-play-state: paused; }
}

/* ---------- 05 募集職種：職種を比べやすい、1職種1行の表 ----------
   1行＝「役割｜職種名（職種ページへ）｜想定年収｜働き方｜応募」。仕事内容・必須の経験・給与の内訳は、行の下の開閉にしまう。
   1180px以上は12列の上で横一列：役割を1〜2列目、職種名を3〜5列目、想定年収を6〜8列目（6列目の頭はほかの節の本文と同じ軸）、
   働き方を9〜10列目、応募を11〜12列目に置く。項目名は表の頭（.jobs-head）に1回だけ出し、各行の項目名（dt）は読み上げ用に残して見た目から隠す。
   1179px以下は縦に積み、項目名を各行に出す（1180px未満では、職種名が3行・金額が途中で折り返して、横一列では読みにくいため）。
   線：表の頭（最初の行の上）だけ ink、行の区切りは各行の上の線（line-strong）。最後の行の下には線を引かない（すぐ下の注記と二重にしないため） */
.jobs { margin-top: clamp(48px, 6vw, 80px); }
.jobs-head { display: none; }
.job-group { border-top: 1px solid var(--line-strong); }
.job-group:first-of-type { border-top-color: var(--ink); }

/* 1職種の行（599px以下）：役割 → 職種名 → 想定年収・働き方 → 応募 → 開閉 の順に縦に積む。
   HTMLでは職種名を先に書いている（読み上げは職種名から）ので、役割だけ順番を前に出す。
   #job-ae などで移ったときの止まる位置は、ページ全体の指定（html の scroll-padding-top）に任せる（行にも足すと、ヘッダーの下が二重に空くため） */
.job {
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 16px;
  padding: 24px 0 20px;
}
.job + .job { border-top: 1px solid var(--line-strong); }  /* 1つの役割に職種が2つ以上になったとき */
.job-row-role { order: -1; margin-bottom: -8px; font-size: var(--fs-meta); font-weight: 400; line-height: 1.6; letter-spacing: 0.06em; color: var(--muted); }  /* 職種名の見出しに添える札として、すぐ上に寄せる */
.job-row-role sup { margin-left: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; vertical-align: super; }

/* 職種名：職種ページへのリンク。矢印は、名前の最後の語と離さない（HTMLの .nowrap） */
.job-title {
  font-size: var(--fs-h3); font-weight: 400; line-height: 1.4; letter-spacing: 0.01em;
  color: var(--ink);
}
/* 幅は中身に合わせる（キーボード操作の枠を職種名の大きさにする。inline-block にすると、行のベースラインが添え書きの行になってしまうため block のまま） */
.job-title a { display: block; width: fit-content; max-width: 100%; color: inherit; text-decoration: none; }
.job-title small { display: block; margin-top: 4px; font-size: var(--fs-meta); font-weight: 400; letter-spacing: 0.04em; color: var(--muted); }
.job-title .icon { display: inline-block; margin-left: 10px; vertical-align: -1px; color: var(--muted); transition: transform .2s var(--ease), color .2s var(--ease); }
/* 職種名の文字は1つの箱にまとめる（見た目は変わらない。ページ間の移動で、2行に折り返したときも1つの絵として職種ページの h1 へ移せるように） */
.job-name { display: block; }
.job:target .job-name { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* 職種の行の手応え（募集職種の各行・3つの役割の「募集中の職種」・職種ページの「ほかの職種」）：
   マウスを乗せると、行の下端に1pxの黒い線が左から引かれ（600ms）、職種名が右へ6px寄る（400ms）。離れると、線は右へ抜ける。
   行の上端は、表の頭の黒い線と重なって変化が見えないため、下端に引く（次の行の上の線があれば、その上に重ねる。
   次の行の線は画面に入ると引き直す線なので、それより手前に出す）。
   タッチ端末では、押している間だけ職種名が寄る */
.job-title, .other-job-title, .roles-panel-jobs a > span { transition: translate .4s var(--ease); }
.job-title:active,
.roles-panel-jobs a:active > span,
.other-job:active .other-job-title { translate: 6px 0; transition-duration: 90ms; }
@media (hover: hover) and (pointer: fine) {
  .job, .other-job, .roles-panel-jobs a { position: relative; }
  .job::after, .other-job::after, .roles-panel-jobs a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: var(--ink); pointer-events: none;
    transform: scaleX(0); transform-origin: right;
    transition: transform .6s var(--ease);
  }
  .job::after { z-index: 1; }
  .job:hover::after, .other-job:hover::after, .roles-panel-jobs a:hover::after { transform: none; transform-origin: left; }
  .job:hover .job-title, .other-job:hover .other-job-title, .roles-panel-jobs a:hover > span { translate: 6px 0; }
  .job:hover .job-title .icon, .roles-panel-jobs a:hover .icon { color: var(--ink); transform: translateX(3px); }
  .other-job:hover .other-job-title .icon { transform: translateX(3px); }
}

/* 条件（想定年収・働き方）：599px以下は「項目名｜値」を横に並べ、2項目を縦に積む */
.job-facts { display: grid; gap: 10px; }
.job-facts > div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 12px; align-items: baseline; }
.job-facts dt { font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0.06em; color: var(--muted); white-space: nowrap; }
.job-facts dd { font-size: 15px; line-height: 1.75; color: var(--ink); word-break: auto-phrase; }  /* 金額はHTMLの .nowrap で途中で折り返さない */
.job-facts dd small { display: block; font-size: var(--fs-meta); font-weight: 400; color: var(--muted); }

/* 応募：599px以下はボタンを横に伸ばし、右に「求人の詳細」 */
.job-actions { display: flex; align-items: center; gap: 20px; }
.job-actions .btn { flex: 1 1 auto; min-width: min(150px, 100%); }  /* 応募の列（2列分）が150pxより狭い幅でも、はみ出さない */
.job-actions .text-link { font-size: 14px; }

/* 開閉：仕事内容・必須の経験・給与の内訳（主な技術） */
.job-more summary {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--text);
  cursor: pointer; list-style: none;
}
.job-more summary::-webkit-details-marker { display: none; }
.job-more summary::before {
  content: ""; width: 7px; height: 7px; margin: 0 2px 3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform .2s var(--ease);
}
.job-more[open] summary::before { transform: rotate(45deg); margin-bottom: 5px; }
@media (hover: hover) and (pointer: fine) {
  .job-more summary:hover { color: var(--ink); }
}
/* 開いた中身：上に補助線（line）。599px以下は項目名の下に内容を置く */
.job-more-body {
  margin-top: 16px; padding-top: 20px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 20px;
}
.job-more-body > div { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--col-gap); row-gap: 6px; align-items: baseline; }
.job-more-body > div > dt { font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0.06em; color: var(--muted); }
.job-more-body > div > dd { max-width: 40em; font-size: 14px; line-height: 1.9; color: var(--text); }
/* 仕事内容は読ませたい本文なので、ほかの項目より一回り大きく */
.job-summary { font-size: 15px; line-height: 1.95; color: var(--text); }
.job-more-body p + p,
.job-more-body .pay-table + p { margin-top: 6px; }
.pay-table > div { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 12px; padding: 2px 0; }
.pay-table dt { color: var(--muted); }
.pay-table dd { color: var(--ink); }

.tech-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tech-list li {
  padding: 1px 8px; border: 1px solid var(--line-strong);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.8; color: var(--text);
}

@media (max-width: 599px) {
  .pay-table > div { grid-template-columns: 1fr; gap: 0; padding: 4px 0; }
}

/* 600〜1179px：12列の上で、役割 ／ 職種名（1〜8列目）と応募（9〜12列目）／ 想定年収（1〜5列目）と働き方（6列目の頭から）／ 開閉 の4段。
   条件は項目名を値の上に置く。開いた中身は、項目名を1〜5列目、内容を6列目の頭から置く */
@media (min-width: 600px) {
  .job { grid-template-columns: var(--grid); column-gap: var(--col-gap); row-gap: 20px; padding: 28px 0 24px; }
  .job-row-role { grid-row: 1; grid-column: 1 / -1; }
  .job-title { grid-row: 2; grid-column: 1 / span 8; }
  .job-actions { grid-row: 2; grid-column: 9 / -1; flex-direction: column; align-items: flex-end; gap: 14px; }
  .job-actions .btn { flex: none; }
  /* 表の中の条件だけに効かせる（職種ページの冒頭の条件 .hero-facts は、見た目だけ .job-facts を流用し、並べ方は別に決める） */
  .job > .job-facts { grid-row: 3; grid-column: 1 / -1; grid-template-columns: var(--grid); column-gap: var(--col-gap); }
  .job > .job-facts > div { grid-column: 1 / span 5; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 4px; }
  .job > .job-facts > div + div { grid-column: 6 / -1; }
  .job-more { grid-row: 4; grid-column: 1 / -1; }
  .job-more-body > div { grid-template-columns: var(--grid); }
  .job-more-body > div > dt { grid-column: 1 / span 5; }
  .job-more-body > div > dd { grid-column: 6 / -1; }
}

/* 1180px以上：横一列の表。行の中の文字は、最初の行の文字の並び（ベースライン）をそろえる。
   応募は2段分の高さを使い、開閉を職種名のすぐ下に寄せる。開閉は職種名の下（3〜10列目。応募の列とは重ねない）に置き、
   開いた中身は項目名を3〜5列目、内容を6列目の頭から置く（上の条件と同じ軸） */
@media (min-width: 1180px) {
  .jobs-head {
    display: grid; grid-template-columns: var(--grid); column-gap: var(--col-gap);
    padding-bottom: 14px;
    font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0.06em; color: var(--muted);
  }
  .jobs-head > span:nth-child(1) { grid-column: 1 / span 2; }
  .jobs-head > span:nth-child(2) { grid-column: 3 / span 3; }
  .jobs-head > span:nth-child(3) { grid-column: 6 / span 3; }
  .jobs-head > span:nth-child(4) { grid-column: 9 / span 2; }

  .job { row-gap: 16px; align-items: baseline; padding: 32px 0 26px; }
  .job-row-role { grid-row: 1; grid-column: 1 / span 2; margin-bottom: 0; font-size: 15px; letter-spacing: 0.02em; color: var(--ink); }
  .job-row-role sup { color: var(--muted); }
  .job-title { grid-row: 1; grid-column: 3 / span 3; }
  .job > .job-facts { grid-row: 1; grid-column: 6 / span 5; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .job > .job-facts > div { grid-column: 1 / span 3; }
  .job > .job-facts > div + div { grid-column: 4 / span 2; }
  /* 項目名は表の頭に出しているので、行の中では読み上げ用に残して見た目から隠す（.visually-hidden と同じ指定） */
  .job > .job-facts dt {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .job-actions { grid-row: 1 / span 2; grid-column: 11 / span 2; align-self: start; }
  .job-more { grid-row: 2; grid-column: 3 / span 8; }
  .job-more-body > div { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .job-more-body > div > dt { grid-column: 1 / span 3; }
  .job-more-body > div > dd { grid-column: 4 / -1; }
}

/* ---------- 06 働く環境・制度 ----------
   12列の上で、900px以上は4列ずつの3列、600〜899pxは6列ずつの2列。上の線は項目の区切り（line-strong）。
   後半の資料の章なので、見出しとの間・行の間も、前半の節より詰める */
.env-grid {
  margin-top: clamp(40px, 4.5vw, 56px);
  display: grid; grid-template-columns: minmax(0, 1fr);
  column-gap: var(--col-gap); row-gap: clamp(36px, 4vw, 52px);
}
@media (min-width: 600px) {
  .env-grid { grid-template-columns: var(--grid); }
  .env-item { grid-column: span 6; }
}
@media (min-width: 900px) {
  .env-item { grid-column: span 4; }
}
.env-item { padding-top: 22px; border-top: 1px solid var(--line-strong); }
.env-item h3 { font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0.06em; color: var(--muted); }
.env-main {
  margin-top: 10px;
  font-size: var(--fs-h3); font-weight: 400; line-height: 1.45;
  color: var(--ink); font-feature-settings: "palt";
}
.env-item p:not(.env-main) { margin-top: 12px; font-size: 14.5px; line-height: 1.95; color: var(--muted); text-spacing-trim: trim-start; }  /* 行頭に来た「（」は半分の幅にして、左端の揃いを崩さない（対応していないブラウザでは無視される） */
/* スマホ（599px以下）：6項目を縦に積むと画面2つ分近くになるので、左に項目名・右に要点と説明を置いた表の形に詰める。
   要点（フレックスタイム制・年間休日123日など）が右の同じ列に縦に並び、上から目で追って比べられる。
   表の頭の1本だけ黒い線（ink）、項目の区切りは line-strong（会社概要の表と同じ線の使い方） */
@media (max-width: 599px) {
  .env-grid { row-gap: 0; }
  /* 項目名の列は、いちばん長い「休日・休暇」（13px で5文字）がちょうど収まる幅。
     右の列を広く残し、360px幅でも「新宿のオフィス＋リモート」「インフルエンザ予防接種費用負担、」が語の途中で折り返さないようにする */
  .env-item {
    display: grid; grid-template-columns: calc(var(--fs-meta) * 5.5) minmax(0, 1fr); column-gap: 16px;
    padding: 20px 0; border-top-color: var(--line-strong);
  }
  .env-item:first-child { border-top-color: var(--ink); }
  /* 項目名（13px）の文字の下端を、右の要点（h3の段）の1行目の文字の下端にそろえる */
  .env-item h3 { padding-top: .45em; }
  .env-main { margin-top: 0; }
  .env-item p:not(.env-main) { grid-column: 2; margin-top: 6px; font-size: 14px; line-height: 1.85; }
  /* スクロールで現れるとき（style.css の末尾）は、上の線を引き直す線に置き換えるので、表の頭の線もその色を黒にする */
  .env-item:first-child.reveal::before { background: var(--ink); }
}

/* ---------- 07 選考の流れ：左に見出し、右に縦の時系列 ----------
   900px以上は12列の上で、見出しを1〜5列目、時系列を6列目の頭から置く。
   各ステップの文字の書き出しを6列目の頭（ほかの節の本文と同じ軸）にそろえ、丸と線はその左の余白にはみ出させる */
.process-layout {
  --step-indent: 40px;   /* 丸の左端から、ステップの文字の書き出しまで */
  display: grid; grid-template-columns: minmax(0, 1fr);
  column-gap: var(--col-gap); row-gap: 40px;
}
@media (min-width: 900px) {
  .process-layout { --step-indent: 36px; grid-template-columns: var(--grid); }
  .process-head { grid-column: 1 / span 5; padding-right: var(--step-indent); }  /* 見出し側は、はみ出した丸の分だけ右を空ける */
  .steps { grid-column: 6 / -1; margin-left: calc(var(--step-indent) * -1); }
}
.process-head { position: sticky; top: calc(var(--header-h) + 40px); align-self: start; }
.process-head .note { margin-top: 20px; }
.process-head .text-link { margin-top: 20px; }

.steps { position: relative; }
.step { position: relative; padding: 0 0 clamp(44px, 5vw, 64px) var(--step-indent, 40px); }
.step:last-child { padding-bottom: 0; }

/* 丸（JSが動かない環境では、すべて通過済みの黒で表示） */
.step-dot {
  position: absolute; left: 0; top: 6px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--ink); border: 1.5px solid var(--ink);
  transition: background-color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.step.is-active .step-dot { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ink) 8%, transparent); }
/* 丸が黒くなった瞬間に、波紋が一度広がる */
.step-dot::after {
  content: ""; position: absolute; inset: -1.5px; border-radius: 50%;
  border: 1px solid var(--ink); opacity: 0;
}
.steps.is-enhanced .step.is-active .step-dot::after { animation: dot-ripple 1s var(--ease); }
@keyframes dot-ripple { from { transform: scale(1); opacity: .6; } to { transform: scale(3); opacity: 0; } }

/* 丸と丸をつなぐ線：灰色の下地の上に、黒い線がスクロールに合わせて伸びる */
.step:not(:last-child)::before,
.step:not(:last-child)::after {
  content: ""; position: absolute; left: 6px; top: 23px; bottom: -2px; width: 1px;
}
.step:not(:last-child)::before { background: var(--line-strong); }
.step:not(:last-child)::after { left: 5.5px; width: 2px; background: var(--ink); transform-origin: top; transform: scaleY(var(--fill, 1)); }

.step-num { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.1em; color: var(--muted); }
.step h3 {
  margin-top: 6px;
  font-size: var(--fs-h3); font-weight: 400; line-height: 1.45;
  color: var(--ink); font-feature-settings: "palt";
}
/* 説明は読ませたい本文なので、本文の色（--text） */
.step-text { margin-top: 10px; max-width: 32em; font-size: 15.5px; line-height: 1.95; color: var(--text); }

/* JSが動く環境：まだ線が届いていないステップは、丸を白抜きにし、見出しだけを本文と同じ色（--text）に一段控える。
   文字そのものは薄くしない（どの段階でも本文として読めるように。見出しが説明より暗くならないよう --muted までは下げない）。
   線が届いた見出しは --ink に変わり、一度点いたら戻らない（main.js） */
.steps.is-enhanced .step:not(.is-active) .step-dot { background: var(--white); border-color: var(--line-strong); }
.steps.is-enhanced .step h3 { transition: color .5s var(--ease); }
.steps.is-enhanced .step:not(.is-active) h3 { color: var(--text); }

@media (max-width: 899px) {
  .process-head { position: static; }
}

/* ---------- 08 会社概要 ---------- */
/* 900px以上は12列の上で、見出しを1〜5列目、表を6列目の頭から置く（ほかの節と同じ軸）。
   線は、表の頭に黒い線（ink）、行の区切りに line-strong。最後の行の下には線を引かない（締めの黒い線と二重にしないため） */
.company-layout {
  display: grid; grid-template-columns: minmax(0, 1fr);
  column-gap: var(--col-gap); row-gap: clamp(32px, 6vw, 96px);
}
@media (min-width: 900px) {
  .company-layout { grid-template-columns: var(--grid); }
  .company-layout > :first-child { grid-column: 1 / span 5; }
  .company-table { grid-column: 6 / -1; }
}
.company-table > div {
  display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 24px;
  padding: 20px 0; border-bottom: 1px solid var(--line-strong);
}
.company-table > div:first-child { border-top: 1px solid var(--ink); }
.company-table > div:last-child { border-bottom: 0; padding-bottom: 0; }
.company-table dt { font-size: 14px; font-weight: 500; color: var(--muted); }
.company-table dd { font-size: 15px; line-height: 1.85; color: var(--ink); }
/* 900px以上：項目名を6列目に、内容を7列目の頭から置く（表は7列分なので、1列＝(幅−間隔6つ)÷7） */
@media (min-width: 900px) {
  .company-table > div { grid-template-columns: calc((100% - 6 * var(--col-gap)) / 7) minmax(0, 1fr); column-gap: var(--col-gap); }
  .company-table dt { white-space: nowrap; }
}
@media (max-width: 767px) {
  .company-table > div { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
}

/* ---------- 応募への案内（締め）：大きな見出しと、その場で応募できる3行（Palantirの「Open Roles」に倣う） ----------
   冒頭と同じ文法でページを閉じる：見出しは左揃え・太字（700）で、1文節＝1行（.cta-line）。
   行の高さは冒頭の動く見出しの行の送りと同じ 1.18em で、縦方向だけはみ出しを切る（せり上がる文字を、行の枠の下端で隠すため）。
   画面に入ったときの動きは、この下の「締めの登場」と main.js。JSなし・動きを減らす設定・「動きを止める」で止めている間は、最初から完成形 */
.cta-band { position: relative; padding-block: clamp(88px, 10vw, 144px) clamp(96px, 10vw, 144px); background: var(--white); }
.cta-title {
  font-size: var(--fs-h1);
  font-weight: 700; line-height: 1.18; letter-spacing: -0.03em;
  color: var(--ink); font-feature-settings: "palt";
}
.cta-title .cta-line { display: block; overflow: hidden; }
/* 対応ブラウザでは、横のはみ出し（詰めた文字の端）は切らずに、縦だけ切る */
@supports (overflow: clip) {
  .cta-title .cta-line { overflow: visible clip; }
}
.cta-lead { margin-top: clamp(24px, 2.5vw, 36px); max-width: 34em; color: var(--text); }

/* 職種ページの締め：応募のボタン2つを、見出しと同じ左端から並べる（スマホは縦に積んで横いっぱい） */
.cta-actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px; }
.cta-actions .btn { min-width: 300px; }
@media (max-width: 767px) {
  .cta-actions .btn { flex: 1 1 100%; min-width: 0; }
}

/* その場で応募できる3行（トップ）：1職種＝1行。箱にせず、線で区切る
   （一覧の頭の1本は ink、行の区切りは line-strong、最後の行の下には引かない。05 募集職種の表と同じ約束）。
   899px以下：役割 → 職種名 → 想定年収 → 応募する・仕事を見る を縦に積む（リンクは押しやすい高さ48px）。
   900〜1179px：役割・職種名の下に、想定年収（1〜7列目）と2つのリンク（8〜12列目、右寄せ）を並べる。
   1180px以上：12列の上で横一列。役割と職種名を1〜5列目、想定年収を6列目の頭から（ほかの節の本文と同じ軸）、リンクを10列目の頭から置く */
.open-roles { margin-top: clamp(48px, 5vw, 72px); }
.open-role {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr);
  padding: 22px 0 4px;
  border-top: 1px solid var(--line-strong);
}
.open-role:first-child { border-top-color: var(--ink); }
.open-role-role { order: -1; font-size: var(--fs-meta); line-height: 1.6; letter-spacing: 0.06em; color: var(--muted); }  /* HTMLでは職種名の後ろ。見た目だけ前に出す */
.open-role-role sup { margin-left: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; vertical-align: super; }
.open-role-title {
  margin-top: 4px;
  font-size: var(--fs-h3); font-weight: 400; line-height: 1.4; letter-spacing: 0.01em; color: var(--ink);
  transition: translate .4s var(--ease);
}
.open-role-pay {
  margin-top: 12px;
  display: flex; align-items: baseline; gap: 14px;
  font-size: 15px; line-height: 1.75; color: var(--ink);
}
.open-role-label { flex: none; font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0.06em; color: var(--muted); }
.open-role-actions { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 32px; }
.open-role-actions .text-link,
.open-roles-all .text-link { min-height: 48px; }
.open-role-apply { font-weight: 500; }
.open-role-more { color: var(--text); }
.open-roles-all { margin-top: 16px; }
@media (min-width: 900px) {
  .open-role { grid-template-columns: var(--grid); column-gap: var(--col-gap); align-items: baseline; padding: 26px 0 8px; }
  .open-role-role { grid-row: 1; grid-column: 1 / -1; }
  .open-role-title { grid-row: 2; grid-column: 1 / -1; }
  .open-role-pay { grid-row: 3; grid-column: 1 / span 7; margin-top: 8px; }
  .open-role-actions { grid-row: 3; grid-column: 8 / -1; justify-content: flex-end; margin-top: 8px; }
}
@media (min-width: 1180px) {
  .open-role { padding: 24px 0 14px; }
  .open-role-role { grid-column: 1 / span 5; }
  .open-role-title { grid-column: 1 / span 5; }
  .open-role-pay { grid-row: 2; grid-column: 6 / span 4; margin-top: 0; }
  .open-role-actions { grid-row: 2; grid-column: 10 / -1; justify-content: flex-start; margin-top: 0; }
}
/* 行の手応え（05 募集職種の行・ほかの職種と同じ）：マウスを乗せると、行の下端に1pxの黒い線が左から引かれ（600ms）、職種名が右へ6px寄る（400ms）。
   離れると、線は右へ抜ける。次の行の上の線より手前に出す */
@media (hover: hover) and (pointer: fine) {
  .open-role::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; height: 1px;
    background: var(--ink); pointer-events: none;
    transform: scaleX(0); transform-origin: right;
    transition: transform .6s var(--ease);
  }
  .open-role:hover::after { transform: none; transform-origin: left; }
  .open-role:hover .open-role-title { translate: 6px 0; }
}

/* 締めの登場（main.js が、最初は画面の外にある締めに .reveal を付け、見出しの2行目が画面に入りきったら .is-in を付ける）：
   ・見出し：1行ずつ、行の枠の下からせり上がる（1000ms、行ごとに170ms遅らせる。曲線は冒頭の入れ替えと同じ --ease）。
     文字を包む .ph-in と、隠れた位置（下へ110%）は、末尾の「スクロールで現れる」と共通
   ・説明文：2行目が上がりきるころ（520ms後）に、opacity だけで出る
   ・一覧：各行の上の線が左から引かれ（600ms後から。ほかの項目の線と同じ1.4s）、追って行の中身が opacity だけで出る（行ごとに90ms遅らせる）
   ・求人一覧へのリンク・職種ページのボタン：最後に opacity だけで出る
   キーボードで中のリンクへ移ったときは、待たずに出す（:focus-within） */
.cta-title .ph-in { transition: translate 1s var(--ease) calc(var(--i, 0) * 170ms); }
.cta-inner .cta-lead.rv-fade { transition-duration: .8s; transition-delay: 520ms; }
.cta-inner :is(.cta-actions, .open-roles-all).rv-fade { transition-delay: 900ms; }
.open-role:nth-child(2) { --row: 1; }
.open-role:nth-child(3) { --row: 2; }
.cta-inner.reveal .open-role { border-top-color: transparent; }
.cta-inner.reveal .open-role::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--line-strong); pointer-events: none; transform-origin: left;
  transition: transform 1.4s var(--ease) calc(600ms + var(--row, 0) * 90ms);
}
.cta-inner.reveal .open-role:first-child::before { background: var(--ink); }
.cta-inner.reveal .open-role > * { transition: opacity .6s ease calc(720ms + var(--row, 0) * 90ms), translate .4s var(--ease); }
.cta-inner.reveal:not(.is-in):not(:focus-within) .open-role::before { transform: scaleX(0); }
.cta-inner.reveal:not(.is-in):not(:focus-within) .open-role > * { opacity: 0; }
/* キーボードで、まだ出ていない締めの中のリンクへ移ったときは、遅れを置かずにすぐ出す（フォーカスの枠が透明のまま待たないように） */
.cta-inner.reveal:not(.is-in):focus-within :is(.ph-in, .rv-fade, .open-role > *),
.cta-inner.reveal:not(.is-in):focus-within .open-role::before { transition-delay: 0s; }
/* main.js が隠す準備をしている一瞬（html.rv-setup）：隠れた状態へは、移り変わりなしで切り替える */
.rv-setup .cta-inner .open-role::before,
.rv-setup .cta-inner .open-role > * { transition: none !important; }

/* ---------- フッター ----------
   768px以上は12列の上で、左（1〜5列目）に製品名と会社の説明、右（6列目の頭から）にメニューの2列
   （職種ページ＝4列分、トップの各節＝3列分）。最下段は補助線（line）の下に、左に著作権表示、右（6列目の頭から）に外部サイトへのリンク。
   767px以下は1列に積む。リンクは線で囲まず、文字だけで並べる（押しやすい高さは「指で押す部品の高さ」） */
.site-footer { position: relative; padding-block: 56px 36px; background: var(--white); }
.footer-inner { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
.footer-brand img { height: 20px; width: auto; filter: var(--logo-filter); }
.footer-brand p { margin-top: 16px; max-width: 30em; font-size: var(--fs-meta); line-height: 1.85; color: var(--muted); }
/* 会社と製品の関係の1行：上の一文に続けて読ませるので、間を詰める */
.footer-brand .footer-company { margin-top: 6px; }
.footer-nav { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
.footer-col-title { font-size: var(--fs-meta); font-weight: 500; line-height: 1.6; letter-spacing: 0.06em; color: var(--muted); }
.footer-links { display: flex; flex-direction: column; font-size: 13.5px; line-height: 1.6; }
.footer-col .footer-links { margin-top: 6px; }
.footer-links a { display: inline-flex; align-items: center; gap: 6px; padding-block: 5px; text-decoration: none; }
.footer-links .icon { width: 12px; height: 12px; color: var(--muted); }
/* 表示中の職種ページへのリンク（職種ページのフッター）は、灰色に退かせる */
.footer-links a[aria-current="page"] { color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .footer-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
}
.footer-bottom { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 16px; padding-top: 20px; border-top: 1px solid var(--line); }
.copyright { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.04em; color: var(--muted); }
/* 767px以下：トップの各節（短い4語）は2列に並べて、縦に長くなりすぎないようにする */
@media (max-width: 767px) {
  .footer-col + .footer-col .footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
}
@media (min-width: 768px) {
  .footer-inner { grid-template-columns: var(--grid); column-gap: var(--col-gap); row-gap: 56px; }
  .footer-brand { grid-column: 1 / span 5; }
  /* 右の7列分を、同じ幅の7列に分ける（12列の6〜12列目と同じ位置） */
  .footer-nav { grid-column: 6 / -1; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .footer-col:first-child { grid-column: 1 / span 4; }
  .footer-col + .footer-col { grid-column: 5 / -1; }
  /* 著作権表示と外部リンクは、1行目の文字の並び（ベースライン）でそろえる（リンクが2行に折り返す幅でも、上の行にそろう） */
  .footer-bottom { grid-column: 1 / -1; grid-template-columns: var(--grid); column-gap: var(--col-gap); align-items: baseline; }
  .footer-links--ext { grid-row: 1; grid-column: 6 / -1; flex-direction: row; flex-wrap: wrap; column-gap: 28px; }
  .copyright { grid-row: 1; grid-column: 1 / span 5; }
}

/* ---------- 指で押す部品の高さ ----------
   767px以下と、指で操作する端末（タブレットなど）では、小さな文字のリンク・開閉・パンくず・フッターのリンクの押せる範囲を、高さ44px以上にする。
   文字のリンク・開閉・パンくずは、上下に広げた分を負の余白で打ち消し、文字の位置と前後の間隔は今のまま保つ
   （文字のリンクの下線は、リンクの上下の中央から測っているので、文字との間も変わらない） */
.brand { min-height: 44px; }  /* ヘッダーのロゴ（ヘッダーの高さ64pxの中なので、見た目は変わらない） */
@media (max-width: 767px), (pointer: coarse) {
  /* 打ち消す量は「(1行の高さ − 44px) ÷ 2」（1lh＝その部品の1行の高さ。1lh に対応していないブラウザは、1行目の近い値で代える） */
  .text-link, .job-more summary, .crumbs a { min-height: 44px; margin-block: -9px; margin-block: calc((1lh - 44px) / 2); }
  .crumbs a { display: inline-flex; align-items: center; }
  /* もとから余白を指定している文字のリンクは、その余白から同じだけ差し引く */
  .process-head .text-link { margin-top: 11px; margin-top: calc(20px + (1lh - 44px) / 2); }
  .spec-flow figcaption .text-link { margin-top: 3px; margin-top: calc(12px + (1lh - 44px) / 2); margin-bottom: -9px; margin-bottom: calc((1lh - 44px) / 2); }
  /* 締めの一覧のリンクは、もとから48pxの高さで並べているので、余白を戻す */
  .open-role-actions .text-link, .open-roles-all .text-link { margin-block: 0; }
  /* フッターのリンク：1行ずつ44pxの高さで積む（行の間の余白は持たせない） */
  .footer-links a { display: flex; min-height: 44px; padding-block: 0; }
}

/* ---------- 職種ページ（jobs/*.html）：どんな感じで働くのか ---------- */
/* 冒頭：パンくず・役割名・巨大な職種名（1文字ずつ打ち出される。main.js）→ 黒い細線 → 説明文とボタン */
.hero--job .hero-head { grid-area: head; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: var(--fs-meta); color: var(--muted); }
.crumbs a { color: var(--text); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
}
/* 767px以下：パンくずの最後（今いる職種の名前）と、その前の「／」は、すぐ下の大きな職種名と同じなので見た目から外し、
   「採用情報／募集職種」の1行に決める（読み上げには残す。.visually-hidden と同じ指定）。
   職種名まで並べると、書体（Noto Sans JP）が届く前後でパンくずが2行と1行の間で変わり、下の冒頭全体が30pxずれていたため
   （Platform Product Engineer のページのスマホで、レイアウトのずれ 0.15） */
@media (max-width: 767px) {
  .crumbs > [aria-current="page"],
  .crumbs > [aria-hidden="true"]:nth-last-child(2) {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
.job-role { margin-top: clamp(40px, 5vw, 72px); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 15px; color: var(--ink); }
/* 役割名（Delta など）は黒、続く一言（形にする など）は灰色 */
.job-role-tag { position: relative; color: var(--muted); }
/* 職種名は、主張のある見出し（h1）の段。添え書き（Lead FDE など）は項目の見出し（h3）の段 */
.hero--job .hero-title {
  margin-top: 14px;
  /* 背の低い横長の画面（1440×700 など）では、画面の高さでも上限を決めて、説明文とボタンが最初の画面に収まるようにする */
  font-size: min(var(--fs-h1), max(10.5svh, 2.5rem)); font-weight: 700; line-height: 1.06; letter-spacing: -0.025em;
}
.hero--job .hero-title small {
  display: block; margin-top: 18px;
  font-size: var(--fs-h3); font-weight: 400; letter-spacing: 0.01em; color: var(--muted);
}
/* 職種名の出し方（サイト共通の文法：見出しは枠の下からせり上がり、ラベルは opacity だけ、一言は冒頭と同じ打ち出し）：
   ・役割名（.job-role-name）を先に出す（0.6秒で opacity だけ）
   ・大きな職種名は、単語ごとの枠（.jw。make_jobs.py が作るときに包む）の下から、800msでせり上がる（120ms後から、単語ごとに60msずつ遅らせる）。
     文字は最初から流れの中にあり、動かすのは transform だけなので、行の数も、下の説明文の位置も動かない（レイアウトのずれが出ない）
   ・添え書き（Lead FDE など）は、職種名のあとに opacity だけで出る
   ・続く一言（.job-role-tag）は main.js が冒頭と同じ業務用語のノイズで1文字58msで打つ。打ち始めるまでは透明にしておき、
     main.js が届かないときに備えて、1.6秒たったら CSS だけで出す（保険）。main.js が引き受けたら .jr-live で保険を外す
   前のページから職種名が移ってきたとき（html.vt-arrive。head のスクリプトが付ける）は、これらを飛ばし、役割名だけを
   灰色から黒へ、200ms遅れて点す（上の「ページ間の移動」と同じ間合い）。
   JSなし・動きを減らす設定では動かさず、「動きを止める」で止めているときは一瞬で終わる（どれも最初から完成形） */
.hero-job-name { display: block; }
.hero-job-name .jw {
  display: inline-block;
  /* せり上がる文字を、単語の枠の下端で隠す。字面の上と、詰めた文字の左右、英字の下へのはみ出し（g・y など）の分だけ、隠す範囲を枠の外へ広げる */
  clip-path: inset(-.25em -.2em -.14em -.2em);
}
.hero-job-name .jw-in { display: inline-block; }
.job-role-now { position: absolute; top: 0; left: 0; white-space: nowrap; color: var(--muted); }
.job-role-tag.is-typing { color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero-job-name .jw-in { animation: jw-rise .8s var(--ease) calc(120ms + var(--i, 0) * 60ms) both; }
  .js .hero--job .hero-title small { animation: jt-fade .6s ease .55s both; }
  .js .job-role-name { animation: jt-fade .6s ease both; }
  .js .job-role-tag { animation: jr-wait 0s linear 1.6s both; }
  .js .job-role-tag.jr-live { animation: none; }
  .vt-arrive .hero-job-name .jw-in,
  .vt-arrive .hero--job .hero-title small,
  .vt-arrive .job-role-tag { animation: none; }
  .vt-arrive .job-role-name { animation: vt-role-light .5s var(--ease) .2s both; }
}
@keyframes jw-rise { from { transform: translateY(105%); } }
@keyframes jt-fade { from { opacity: 0; } }
@keyframes jr-wait { from { opacity: 0; } to { opacity: 1; } }
@keyframes vt-role-light { from { color: var(--muted); } }
/* 説明文とボタンの登場は、トップと同じ間合い（.15s／.3s。上の「ヒーロー（全ページ共通）」の指定をそのまま使う） */

/* 冒頭の条件（想定年収｜働き方｜必須の経験。値はトップの募集職種の行から写す：tools/make_jobs.py）。
   文字の見た目はトップの表の .job-facts を流用する（項目名＝meta の灰色、値＝15pxの黒、働き方の補足＝灰色の小さな字）。
   置き場所：768px以上は説明文とボタンの段の下に、ページの幅いっぱいで1段。767px以下は説明文の下、ボタンの上。
   線は「項目の区切り」（line-strong）だけ。見出しの下の黒い線（ink）とは重ねない */
.hero--job .hero-inner { grid-template-areas: "head head" "rule rule" "lead actions" "terms terms"; }
.hero-terms { grid-area: terms; margin-top: clamp(32px, 4vw, 56px); }
/* 767px以下：上に1本の線を引き、「項目名｜値」を横に並べて3項目を縦に積む（項目名の列は「必須の経験」の5文字が収まる幅） */
.hero-facts { gap: 12px; padding-top: 20px; border-top: 1px solid var(--line-strong); }
.hero-facts > div { grid-template-columns: 5.5em minmax(0, 1fr); }
.hero-facts dd { max-width: 40em; }
.hero-facts-note { margin-top: 16px; font-size: var(--fs-meta); line-height: 1.8; color: var(--muted); }
@media (max-width: 767px) {
  .hero--job .hero-inner { grid-template-areas: "head" "rule" "lead" "terms" "actions"; }
}
/* 768px以上：12列の上で、項目ごとに上の線（line-strong）を引き、項目名を値の上に置く。
   1180px以上は1行：想定年収を1〜3列目、働き方を4〜5列目、必須の経験を6列目の頭から（すぐ下のミッションの本文と同じ軸）。
   768〜1179pxは、想定年収（1〜5列目）と働き方（6列目の頭から）の下に、必須の経験を幅いっぱいで置く（1行では金額が途中で折り返すため。
   トップの募集職種の表が横一列になるのと同じ境目） */
@media (min-width: 768px) {
  .hero-facts { grid-template-columns: var(--grid); column-gap: var(--col-gap); row-gap: 28px; padding-top: 0; border-top: 0; }
  .hero-facts > div { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; padding-top: 18px; border-top: 1px solid var(--line-strong); }
  .hero-facts > div:nth-child(1) { grid-column: 1 / span 5; }
  .hero-facts > div:nth-child(2) { grid-column: 6 / -1; }
  .hero-facts > div:nth-child(3) { grid-column: 1 / -1; }
}
@media (min-width: 1180px) {
  .hero-facts > div:nth-child(1) { grid-column: 1 / span 3; }
  .hero-facts > div:nth-child(2) { grid-column: 4 / span 2; }
  .hero-facts > div:nth-child(3) { grid-column: 6 / -1; }
}
/* 登場：ボタンと同じ間合い（.3s）で、説明文と同じく少しだけせり上がる（隠さず、最初から読める状態で動かす） */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-terms { transform: translateY(12px); animation: hero-in 1s var(--ease) .3s forwards; }
}

/* 応募バー（職種ページ。1179px以下）：読んでいる途中でも、すぐ応募できるように画面の下端に置く。
   1180px以上はヘッダーの「この職種に応募する」がいつも見えているので出さない。
   main.js が、冒頭の応募ボタンが画面の上へ抜けたら is-shown を付けて下から出し、締め（.cta-band）が画面に入ったら外して下へ隠す。
   隠れている間は visibility: hidden で、Tabキーでも移れず、読み上げもしない（中にフォーカスがある間は出したまま）。
   ヘッダー（z-index 50）とその全画面メニューより下に重ねる（メニューを開くと、メニューの面がバーを覆う）。
   JSが動かない環境では hidden のまま出さない。動きを減らす設定・「動きを止める」で止めている間は、移り変わりなしで出し入れする */
.apply-bar { display: none; }
@media (max-width: 1179px) {
  .apply-bar:not([hidden]) {
    position: fixed; inset: auto 0 0; z-index: 45;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--header-bg);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--line);
    transform: translateY(100%); visibility: hidden;
    transition: transform .35s var(--ease), visibility 0s linear .35s;
  }
  .apply-bar.is-shown:not([hidden]),
  .apply-bar:not([hidden]):focus-within {
    transform: none; visibility: visible;
    transition: transform .35s var(--ease), visibility 0s;
  }
  /* キーボードで移った先や、見出しへ飛んだ先が、バーの下に隠れないようにする（バーの高さ分だけ、下にも余白を見込む） */
  :root:has(.apply-bar:not([hidden])) { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}
/* 左：役割名（灰色の小さな字）と職種名。職種名が長い・画面が狭いときは2行に折り返す */
.apply-bar-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.apply-bar-role { font-size: var(--fs-meta); letter-spacing: 0.04em; color: var(--muted); }
.apply-bar-title { font-size: 14px; letter-spacing: 0.01em; color: var(--ink); text-wrap: balance; }
.apply-bar .btn { flex: none; padding-inline: 18px; }

/* 左に項目名、右に説明を並べる行（一緒に働く人・道具と環境・魅力）
   768px以上は12列の上で、項目名を1〜5列目、説明を6列目の頭から置く（トップの各節と同じ軸）。
   行の区切りは上の線（line-strong）だけ。最後の行の下には線を引かない（次の節の黒い線と二重にしないため） */
.rows { margin-top: clamp(40px, 5vw, 64px); }
.rows > div {
  display: grid; grid-template-columns: minmax(0, 1fr);
  column-gap: var(--col-gap); row-gap: 8px; align-items: baseline;
  padding: clamp(24px, 3vw, 36px) 0; border-top: 1px solid var(--line-strong);
}
.rows > div:last-child { padding-bottom: 0; }
@media (min-width: 768px) {
  .rows > div { grid-template-columns: var(--grid); }
  .rows dt { grid-column: 1 / span 5; }
  .rows dd { grid-column: 6 / -1; }
}
.rows dt { font-size: var(--fs-h3); font-weight: 400; line-height: 1.5; color: var(--ink); font-feature-settings: "palt"; }
/* 説明は読ませたい本文なので、本文の色（--text）。1行が長くなりすぎないよう40字前後で折り返す */
.rows dd { max-width: 40em; font-size: 15.5px; line-height: 2; color: var(--text); }

/* ある1週間：曜日｜その日の仕事（曜日は短いので、12列ではなく専用の2列にする） */
.rows--week > div { grid-template-columns: 7em minmax(0, 1fr); }
.rows--week :is(dt, dd) { grid-column: auto; }
@media (max-width: 767px) {
  .rows--week > div { grid-template-columns: 3.5em minmax(0, 1fr); column-gap: 16px; }
}

/* 向いている人：上に線（項目の区切り＝line-strong）を引いた2列。768px以上は12列の上で6列ずつ */
.fit-grid {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: minmax(0, 1fr);
  column-gap: var(--col-gap); row-gap: 28px;
}
@media (min-width: 768px) {
  .fit-grid { grid-template-columns: var(--grid); row-gap: 36px; }
  .fit-grid li { grid-column: span 6; }
}
.fit-grid li {
  padding-top: 20px; border-top: 1px solid var(--line-strong);
  font-size: var(--fs-h3); font-weight: 400; line-height: 1.7;
  color: var(--ink); font-feature-settings: "palt";
  text-wrap: pretty;   /* 末尾の「人」1文字だけが次の行に落ちないように（対応ブラウザだけ。p・dd と同じ扱い） */
}
.fit-note { margin-top: clamp(40px, 5vw, 56px); max-width: 44em; font-size: 15.5px; line-height: 2; color: var(--muted); }

/* ほかの職種へのリンク：600px以上は12列の上で6列ずつ（1〜6列目｜7〜12列目）。表の頭に黒い線（ink）。
   下には線を引かない（締めの黒い線と二重にしないため）。2つの間の縦の補助線（line）は列の間隔の中央に引き、文字は7列目の頭から書き出す */
.other-jobs {
  margin-top: clamp(32px, 4vw, 48px);
  display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--col-gap);
  border-top: 1px solid var(--ink);
}
.other-job {
  display: flex; flex-direction: column; gap: 6px;
  padding: 28px 0;
  text-decoration: none;
}
@media (min-width: 600px) {
  .other-jobs { grid-template-columns: var(--grid); }
  .other-job { grid-column: span 6; }
  .other-job + .other-job {
    margin-left: calc(var(--col-gap) / -2); padding-left: calc(var(--col-gap) / 2 - 1px);
    border-left: 1px solid var(--line);
  }
}
.other-job-role { font-size: var(--fs-meta); color: var(--muted); }
.other-job-title {
  display: block;
  font-size: var(--fs-h3); font-weight: 400; line-height: 1.35; color: var(--ink);
}
.other-job-title .icon { display: inline-block; margin-left: 10px; vertical-align: -1px; transition: transform .2s var(--ease); }
.nowrap { white-space: nowrap; }
/* マウスを乗せたとき（行の下に線が引かれ、職種名が右へ寄る）は、05 募集職種の .job と同じ指定（「職種の行の手応え」） */
/* 縦に積むスマホ：2つの間の区切りは line-strong。最後の下には線を引かない */
@media (max-width: 599px) {
  .other-job + .other-job { border-top: 1px solid var(--line-strong); }
  .other-job:last-child { padding-bottom: 0; }
}

/* ---------- 職種ページの図（Platform Product Engineer）----------
   部品のHTMLは tools/job_parts/platform-product-engineer/*.html。main.js が図（.viz）に、画面に入ったとき is-in を付ける。
   色は変数だけを使い、ダーク／ライトの両方で反転する。動きを減らす設定では、最初から完成形を表示する */
/* --- 仕事の流れ（.vz-flow） --- */
/* ---------- 図：仕事の流れ（6段階が円を描いて循環する。06のあとは次の案件の01へ） ----------
   1024px以上：中央に円（6つの丸＋中心の一言）、右に01〜03・左に04〜06の見出し（時計回り）。円の上を点がひとつ回り続ける
   1023px以下：縦に並べ、06の下から左の破線を通って01へ戻る（768〜1023pxは、左に中心の一言・右に縦の流れ） */
.vz-flow {
  --vz-s: clamp(340px, 31vw, 440px);                /* 円の図の一辺 */
  --vz-r: calc(var(--vz-s) * .3636);                /* 円の半径（図の一辺440に対して160） */
  --vz-n: 64px;                                      /* 段階の丸の直径 */
  --vz-fs: clamp(1.125rem, 1rem + .35vw, 1.25rem);   /* 段階の見出しの文字（18→20px） */
  --vz-lh: calc(var(--vz-fs) * 1.5);                /* 見出し1行の高さ（左右の点の位置合わせに使う） */
  margin-top: clamp(40px, 5vw, 64px);
}
/* 上は「次の案件へ」の上端が図の上端にそろうよう、空きの分だけ詰める。
   高さは、いちばん下にくる04の文字を流れの中に置いて決める（画面幅で行数が2〜3行に変わるため。下の 1024px以上 を参照） */
.vz-flow-stage {
  position: relative;
  min-height: calc(var(--vz-s) * .8149 + var(--vz-n) / 2);
  margin-top: calc(9.75px - var(--vz-s) * .075);
}

/* 中心の一言 */
.vz-flow-core {
  position: absolute; left: 50%; top: calc(var(--vz-s) / 2); z-index: 1;
  width: calc(var(--vz-s) * .56); margin-left: calc(var(--vz-s) * -.28);
  transform: translateY(-50%);
  font-size: clamp(17px, calc(var(--vz-s) * .054), 24px); font-weight: 400; line-height: 1.6; letter-spacing: .02em;
  color: var(--ink); text-align: center; font-feature-settings: "palt";
}
.vz-flow-ph { display: inline-block; max-width: 100%; }  /* 文節のまとまり（途中で折り返さない） */

/* 円（主軸）・戻りの破線・引き出し線（SVG） */
.vz-flow-ring {
  position: absolute; top: 0; left: 50%;
  width: var(--vz-s); height: var(--vz-s); max-width: none; margin-left: calc(var(--vz-s) / -2);
  overflow: visible;
}
.vz-flow-ring path { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.vz-flow-track { stroke: var(--faint); stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.vz-flow-back { stroke: var(--muted); stroke-dasharray: 4 5; }
.vz-flow-leads path { stroke: var(--line-strong); stroke-dasharray: 1 1; stroke-dashoffset: 0; }

/* 向きの印（くの字）：円の上、段階と段階のあいだに5つ＋戻りの破線の頂点に1つ。円の大きさによらず 7px・1px */
.vz-flow-marks { position: absolute; left: 50%; top: calc(var(--vz-s) / 2); width: 0; height: 0; }
.vz-flow-marks > span {
  position: absolute; left: -3.5px; top: -3.5px; width: 7px; height: 7px;
  border-top: 1px solid var(--muted); border-right: 1px solid var(--muted);
  transform: rotate(var(--vz-a)) translateY(calc(var(--vz-r) * -1)) translateX(-2.5px) rotate(45deg);
}
.vz-flow-marks > span:nth-child(1) { --vz-a: 60deg; }
.vz-flow-marks > span:nth-child(2) { --vz-a: 120deg; }
.vz-flow-marks > span:nth-child(3) { --vz-a: 180deg; }
.vz-flow-marks > span:nth-child(4) { --vz-a: 240deg; }
.vz-flow-marks > span:nth-child(5) { --vz-a: 300deg; }
.vz-flow-marks > span:nth-child(6) { --vz-a: 0deg; }

/* 円の上を、7px の点がひとつ、18秒で回り続ける（段階の丸の下をくぐる） */
.vz-flow-orbit {
  position: absolute; left: 50%; top: calc(var(--vz-s) / 2);
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: var(--ink);
  transform: rotate(30deg) translateY(calc(var(--vz-r) * -1));
  animation: vz-flow-orbit 18s linear infinite;
}
@keyframes vz-flow-orbit {
  from { transform: rotate(30deg) translateY(calc(var(--vz-r) * -1)); }
  to { transform: rotate(390deg) translateY(calc(var(--vz-r) * -1)); }
}

/* 6つの段階：丸の位置（円の図の中の割合）と、現れる順番 */
.vz-flow-steps { margin: 0; padding: 0; list-style: none; }
.vz-flow-step:nth-child(1) { --vz-x: .6818; --vz-y: .1851; --vz-i: 0; }
.vz-flow-step:nth-child(2) { --vz-x: .8636; --vz-y: .5;    --vz-i: 1; }
.vz-flow-step:nth-child(3) { --vz-x: .6818; --vz-y: .8149; --vz-i: 2; }
.vz-flow-step:nth-child(4) { --vz-x: .3182; --vz-y: .8149; --vz-i: 3; }
.vz-flow-step:nth-child(5) { --vz-x: .1364; --vz-y: .5;    --vz-i: 4; }
.vz-flow-step:nth-child(6) { --vz-x: .3182; --vz-y: .1851; --vz-i: 5; }

.vz-flow-node {
  position: absolute; z-index: 1;
  left: calc(50% + (var(--vz-x) - .5) * var(--vz-s));
  top: calc(var(--vz-y) * var(--vz-s));
  width: var(--vz-n); height: var(--vz-n);
  margin: calc(var(--vz-n) / -2) 0 0 calc(var(--vz-n) / -2);
  display: grid; place-items: center;
  border: 1px solid var(--ink); border-radius: 50%;
  background: var(--white); color: var(--ink);
}
/* 丸の中の線画：全図で 20px・線 1.25px（HTML の stroke-width="1.5" より、この指定が優先される） */
.vz-flow-node svg { width: 20px; height: 20px; overflow: visible; stroke-width: 1.25; }
.vz-flow-node svg * { vector-effect: non-scaling-stroke; }

/* 見出しと説明：右に01〜03、左に04〜06。円側の端に小さな黒い点（事業の図と同じ語り口） */
.vz-flow-text { position: absolute; top: calc(var(--vz-y) * var(--vz-s) - var(--vz-lh) / 2); }
.vz-flow-step:nth-child(-n+3) .vz-flow-text { left: calc(50% + var(--vz-s) / 2); right: 0; padding-left: 24px; }
.vz-flow-step:nth-child(n+4) .vz-flow-text { left: 0; right: calc(50% + var(--vz-s) / 2); padding-right: 24px; text-align: right; }
.vz-flow-text::before {
  content: ""; position: absolute; top: calc(var(--vz-lh) / 2 - 3.5px);
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink);
}
.vz-flow-step:nth-child(-n+3) .vz-flow-text::before { left: -3.5px; }
.vz-flow-step:nth-child(n+4) .vz-flow-text::before { right: -3.5px; }

.vz-flow-h {
  display: flex; align-items: baseline; gap: 12px;
  font-size: var(--vz-fs); font-weight: 400; line-height: 1.5;
  color: var(--ink); font-feature-settings: "palt"; word-break: auto-phrase;
}
.vz-flow-step:nth-child(n+4) .vz-flow-h { flex-direction: row-reverse; }
.vz-flow-num { flex: none; font-family: var(--font-mono); font-size: 12.5px; font-weight: 400; letter-spacing: .1em; color: var(--muted); }
/* 各段階の説明は読ませたい本文なので、本文の色（--text） */
.vz-flow-d {
  margin-top: 8px; font-size: 14.5px; line-height: 1.75; color: var(--text);
  word-break: auto-phrase; text-wrap: pretty;
}

/* 06 → 01 の破線の上に「次の案件へ」 */
.vz-flow-back-label {
  position: absolute; left: 50%; top: calc(var(--vz-s) * .075);
  transform: translate(-50%, -50%);
  font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: .04em; color: var(--muted); white-space: nowrap;
}

.vz-flow-note { margin-top: 28px; font-size: 13px; line-height: 1.9; color: var(--muted); text-align: center; }

/* 1024px以上：04（左下）の文字だけは位置指定をやめて流れに置き、図の高さがその下端までになるようにする
   （04の説明は、いちばん長く、いちばん下にくる。03は2行より増えない） */
@media (min-width: 1024px) {
  .vz-flow-step:nth-child(4) { padding-top: calc(var(--vz-y) * var(--vz-s) - var(--vz-lh) / 2); }
  .vz-flow-step:nth-child(4) .vz-flow-text { position: relative; top: auto; margin-right: calc(50% + var(--vz-s) / 2); }
}

/* ---- 1023px以下：縦に並べる。各段階を細い線でつなぎ、06の下から左の破線を通って01へ戻る ----
   背骨（段階をつなぐ線）は左端から40px、文字の書き出しは80px（左の40pxが戻りの輪の分） */
@media (max-width: 1023px) {
  .vz-flow { --vz-n: 48px; }
  .vz-flow-stage { min-height: 0; margin-top: 0; }
  .vz-flow-ring, .vz-flow-marks, .vz-flow-orbit { display: none; }
  .vz-flow-core {
    position: static; width: auto; margin: 0; transform: none;
    font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); line-height: 1.6; text-align: left;
  }
  .vz-flow-cycle { position: relative; }
  .vz-flow-step { position: relative; display: grid; grid-template-columns: 80px minmax(0, 1fr); padding-bottom: 32px; }
  .vz-flow-node { position: relative; left: auto; top: auto; margin: 0 0 0 16px; }
  .vz-flow-step .vz-flow-text,
  .vz-flow-step:nth-child(n) .vz-flow-text {
    position: static; padding: calc((var(--vz-n) - var(--vz-lh)) / 2) 0 0; text-align: left;
  }
  .vz-flow-text::before { display: none; }
  .vz-flow-step:nth-child(n+4) .vz-flow-h { flex-direction: row; }
  /* 段階と段階をつなぐ線（主軸。06からは、下の戻り線までのばす） */
  .vz-flow-step::after {
    content: ""; position: absolute; left: 40px; top: var(--vz-n); bottom: 0; width: 1px;
    background: var(--faint); clip-path: inset(0 0 0 0);
  }
  /* 戻り線：06の下 → 左端を上へ → 01へ。4px の線と 5px のすき間の破線を、横・縦・横の3本の背景で描く */
  .vz-flow-steps::before {
    content: ""; position: absolute; left: 0; top: calc(var(--vz-n) / 2); bottom: 0; width: 40px;
    background:
      repeating-linear-gradient(90deg, var(--muted) 0 4px, transparent 4px 9px) left top / 100% 1px no-repeat,
      repeating-linear-gradient(0deg, var(--muted) 0 4px, transparent 4px 9px) left bottom / 1px 100% no-repeat,
      repeating-linear-gradient(90deg, var(--muted) 0 4px, transparent 4px 9px) left bottom / 100% 1px no-repeat;
  }
  /* 01 の丸へ向かう矢じり（7px のくの字） */
  .vz-flow-steps::after {
    content: ""; position: absolute; left: 6.5px; top: calc(var(--vz-n) / 2 - 3px);
    width: 7px; height: 7px;
    border-top: 1px solid var(--muted); border-right: 1px solid var(--muted);
    transform: rotate(45deg);
  }
  .vz-flow-back-label { left: 52px; top: auto; bottom: 0; transform: translateY(50%); }
  .vz-flow-note { margin-top: 38px; text-align: left; }  /* 「次の案件へ」の下端から28px */
}
/* 768〜1023px：左に中心の一言、右に縦の流れ */
@media (min-width: 768px) and (max-width: 1023px) {
  .vz-flow-stage {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    column-gap: clamp(32px, 5vw, 64px); align-items: start;
  }
  .vz-flow-core { padding-top: 6px; }
  .vz-flow-note { padding-left: calc(4 / 11 * (100% - clamp(32px, 5vw, 64px)) + clamp(32px, 5vw, 64px)); }
}
/* 767px以下：中心の一言を上に置く */
@media (max-width: 767px) {
  .vz-flow-core { margin-bottom: 36px; font-size: 20px; }
}

/* 登場の動き：円が時計回りに引かれ、丸と見出しが .25s ずつ順に現れ、最後に中心の一言と戻り線が出る（サイトのJSが .is-in を付ける）
   円の線（1.4s）が各段階の丸に届く時刻と、丸が現れる時刻をそろえている。最後の戻り線も is-in から 2.3s で出し終える */
@media (prefers-reduced-motion: no-preference) {
  .js .vz-flow .vz-flow-track { transition: stroke-dashoffset 1.4s linear; }
  .js .vz-flow .vz-flow-node { transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--vz-i) * .25s + .1s); }
  .js .vz-flow .vz-flow-h { transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--vz-i) * .25s + .3s); }
  .js .vz-flow .vz-flow-d { transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--vz-i) * .25s + .4s); }
  .js .vz-flow .vz-flow-text::before { transition: transform .5s var(--ease); transition-delay: calc(var(--vz-i) * .25s + .4s); }
  .js .vz-flow .vz-flow-leads path { transition: stroke-dashoffset .9s var(--ease); }
  .js .vz-flow .vz-flow-leads path:nth-child(1) { transition-delay: .2s; }
  .js .vz-flow .vz-flow-leads path:nth-child(2) { transition-delay: .45s; }
  .js .vz-flow .vz-flow-leads path:nth-child(3) { transition-delay: .7s; }
  .js .vz-flow .vz-flow-leads path:nth-child(4) { transition-delay: .95s; }
  .js .vz-flow .vz-flow-leads path:nth-child(5) { transition-delay: 1.2s; }
  .js .vz-flow .vz-flow-leads path:nth-child(6) { transition-delay: 1.45s; }
  .js .vz-flow .vz-flow-marks > span { transition: opacity .5s var(--ease); }
  .js .vz-flow .vz-flow-marks > span:nth-child(1) { transition-delay: .15s; }
  .js .vz-flow .vz-flow-marks > span:nth-child(2) { transition-delay: .4s; }
  .js .vz-flow .vz-flow-marks > span:nth-child(3) { transition-delay: .65s; }
  .js .vz-flow .vz-flow-marks > span:nth-child(4) { transition-delay: .9s; }
  .js .vz-flow .vz-flow-marks > span:nth-child(5) { transition-delay: 1.15s; }
  .js .vz-flow .vz-flow-marks > span:nth-child(6) { transition-delay: 1.6s; }
  .js .vz-flow .vz-flow-back { transition: opacity .7s var(--ease) 1.6s; }
  .js .vz-flow .vz-flow-back-label { transition: opacity .7s var(--ease) 1.6s, translate .7s var(--ease) 1.6s; }
  .js .vz-flow .vz-flow-core { transition: opacity 1s var(--ease) 1.3s, filter 1s var(--ease) 1.3s; }
  .js .vz-flow .vz-flow-orbit { transition: opacity .4s linear 1s; animation-delay: 2.4s; }

  .js .vz-flow:not(.is-in) :is(.vz-flow-track, .vz-flow-leads path) { stroke-dashoffset: 1; }
  .js .vz-flow:not(.is-in) .vz-flow-node { opacity: 0; transform: scale(.9); }
  .js .vz-flow:not(.is-in) :is(.vz-flow-h, .vz-flow-d) { opacity: 0; transform: translateY(10px); }
  .js .vz-flow:not(.is-in) .vz-flow-text::before { transform: scale(0); }
  .js .vz-flow:not(.is-in) :is(.vz-flow-marks > span, .vz-flow-back) { opacity: 0; }
  .js .vz-flow:not(.is-in) .vz-flow-back-label { opacity: 0; translate: 0 10px; }
  .js .vz-flow:not(.is-in) .vz-flow-core { opacity: 0; filter: blur(6px); }
  .js .vz-flow:not(.is-in) .vz-flow-orbit { opacity: 0; animation-play-state: paused; }
}
/* 縦に並べたとき：一言が先に現れ、段階をつなぐ線が上から順に引かれ（clip-path）、最後に戻り線が出る */
@media (prefers-reduced-motion: no-preference) and (max-width: 1023px) {
  .js .vz-flow .vz-flow-core { transition-delay: 0s; }
  .js .vz-flow .vz-flow-step::after { transition: clip-path .9s var(--ease); transition-delay: calc(var(--vz-i) * .25s + .2s); }
  .js .vz-flow .vz-flow-steps::before,
  .js .vz-flow .vz-flow-steps::after { transition: opacity .7s var(--ease) 1.6s; }
  .js .vz-flow:not(.is-in) .vz-flow-step::after { clip-path: inset(0 0 100% 0); }
  .js .vz-flow:not(.is-in) .vz-flow-steps::before,
  .js .vz-flow:not(.is-in) .vz-flow-steps::after { opacity: 0; }
}

/* --- ある1週間（.vz-week） --- */
/* ---------- ある1週間：月〜金の盤面。仕事の種類ごとに、横に走る線（実線・破線・点線）と点の形で描き分ける ---------- */
.vz-week { margin-top: clamp(40px, 5vw, 64px); }

.vz-week-board {
  --vz-week-y: 22px;   /* 各段の上端から、線までの高さ */
  --vz-week-pad: 16px; /* 曜日の列の内側の余白 */
  display: grid;
  grid-template-columns: 10.5em repeat(5, minmax(0, 1fr));
  grid-template-rows: auto repeat(3, auto);
  border-top: 1px solid var(--ink);          /* 表の頭の線（ink は節の始まりと表の頭だけに使う） */
  border-bottom: 1px solid var(--line-strong);
}

/* 見出しの行：左上に「仕事の種類」、右に曜日 */
.vz-week-legend-title,
.vz-week-dayname { grid-row: 1; align-self: start; padding-top: 18px; }
.vz-week-legend-title {
  grid-column: 1;
  padding-top: 26px; padding-right: 16px; /* 曜日の文字と、ベースラインをそろえる */
  font-size: 13px; font-weight: 500; line-height: 1.5; letter-spacing: .06em; color: var(--muted);
  white-space: nowrap;
}
.vz-week-dayname {
  padding-inline: var(--vz-week-pad);
  font-size: clamp(1.125rem, 1rem + .35vw, 1.25rem); font-weight: 400; line-height: 1.5;
  color: var(--ink); font-feature-settings: "palt";
}

/* 凡例：左の列に、段ごとの名前 */
.vz-week-legend { grid-column: 1; grid-row: 2 / 5; display: grid; grid-template-rows: subgrid; }
.vz-week-key {
  display: flex; align-items: center; gap: 10px;
  height: 24px; margin-top: calc(var(--vz-week-y) - 12px);
  font-size: 15.5px; font-weight: 500; line-height: 1.5; color: var(--ink); white-space: nowrap;
}
.vz-week-key .vz-week-mark { display: none; }
.vz-week-icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round;   /* 全図の線画と同じ 20px・1.25px */
}
.vz-week-icon path { vector-effect: non-scaling-stroke; }

/* 段を横に走る線（月曜の左端から、金曜の右端の矢じりまで）。時間の軸の実線は faint、破線・点線は muted */
.vz-week-rail {
  grid-column: 2 / -1; align-self: start;
  position: relative; z-index: 1;
  height: 1px; margin-top: var(--vz-week-y);
  pointer-events: none;
}
.vz-week-rail--base { grid-row: 2; background: var(--faint); }
.vz-week-rail--proj { grid-row: 3; background: repeating-linear-gradient(to right, var(--muted) 0 4px, transparent 4px 9px); }
.vz-week-rail--rev  { grid-row: 4; background: repeating-linear-gradient(to right, var(--muted) 0 2px, transparent 2px 5px); }
.vz-week-rail::after {
  content: ""; position: absolute; right: 1.5px; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid var(--muted); border-right: 1px solid var(--muted);
  transform: rotate(45deg);
}

/* 曜日の列（見出しの行から最後の段まで、左に細い目安線） */
.vz-week-days {
  grid-column: 2 / -1; grid-row: 1 / 5;
  position: relative;
  display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid;
}
.vz-week-day {
  --vz-week-d: 0;
  grid-row: 1 / -1; min-width: 0;
  display: grid; grid-template-rows: subgrid;
  border-left: 1px solid var(--line);
}
.vz-week-day:nth-child(2) { --vz-week-d: 1; }
.vz-week-day:nth-child(3) { --vz-week-d: 2; }
.vz-week-day:nth-child(4) { --vz-week-d: 3; }
.vz-week-day:nth-child(5) { --vz-week-d: 4; }
.vz-week-tasks { grid-row: 2 / -1; display: grid; grid-template-rows: subgrid; }

/* 1つの仕事：段の線の上に印、その下に文 */
.vz-week-task {
  position: relative;
  padding: calc(var(--vz-week-y) + 18px) var(--vz-week-pad) clamp(28px, 3vw, 40px);
}
.vz-week-task--base { grid-row: 1; }
.vz-week-task--proj { grid-row: 2; }
.vz-week-task--rev  { grid-row: 3; }

/* 種類を形で見分ける印（9px）：共通基盤＝黒い四角／案件＝白抜きの丸／レビュー・調整＝白抜きのひし形 */
.vz-week-mark {
  position: absolute; z-index: 2;
  left: var(--vz-week-pad); top: calc(var(--vz-week-y) - 4px);
  width: 9px; height: 9px;
}
.vz-week-task--base .vz-week-mark,
.vz-week-key--base .vz-week-mark { background: var(--ink); }
.vz-week-task--proj .vz-week-mark,
.vz-week-key--proj .vz-week-mark { border: 1px solid var(--ink); border-radius: 50%; background: var(--white); }
.vz-week-task--rev .vz-week-mark,
.vz-week-key--rev .vz-week-mark {
  width: 7px; height: 7px; margin: 1px; /* 45°回すと外形が約10px。四角・丸の 9px と見た目の大きさをそろえる */
  border: 1px solid var(--ink); background: var(--white);
  transform: rotate(45deg);
}

.vz-week-text {
  display: block;
  font-size: 14.5px; line-height: 1.75; color: var(--text);
  word-break: auto-phrase; overflow-wrap: anywhere; text-wrap: pretty;
}

/* 長いカタカナ語：入る幅ではまとめて1行に、入らない幅（1024px付近）でだけ語の切れ目で折り返す */
.vz-week-word { display: inline-block; }

/* 仕事の種類の文字：印の形・線の位置・凡例で分かるので、どの幅でも読み上げ用にだけ残す */
.vz-week-type,
.vz-week-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.vz-week-note {
  margin-top: 28px; max-width: 46em;
  font-size: 13px; line-height: 1.9; color: var(--muted);
  text-wrap: pretty;
}
@media (min-width: 768px) {
  .vz-week-note { word-break: auto-phrase; }
}

/* ---------- 1023px以下：線を縦に走らせ、曜日を上から下へ積む ---------- */
@media (max-width: 1023px) {
  .vz-week-board {
    --vz-week-indent: 64px;                               /* 文の書き出し位置 */
    --vz-week-head: calc(18px + 13px * 1.5 + 16px);       /* 上の余白＋「仕事の種類」＋図までの余白 */
    display: block; position: relative;
    border-bottom: 0;
  }
  .vz-week-legend-title { margin-bottom: 16px; padding: 18px 0 0; }

  /* 凡例：印の位置が、そのまま下へ伸びる線の位置になる */
  .vz-week-legend { display: block; }
  .vz-week-key {
    position: relative;
    height: 32px; margin: 0; padding-left: var(--vz-week-indent);
  }
  .vz-week-key .vz-week-mark { display: block; top: 12px; }

  /* 3本の線：中央（案件）を左端から 24px に置き、左右に 16px ずつ */
  .vz-week-task--base, .vz-week-key--base { --vz-week-x: 8px; }
  .vz-week-task--proj, .vz-week-key--proj { --vz-week-x: 24px; }
  .vz-week-task--rev,  .vz-week-key--rev  { --vz-week-x: 40px; }
  .vz-week-mark { left: calc(var(--vz-week-x) - 4px); }

  .vz-week-rail {
    position: absolute; bottom: 0; align-self: auto;
    width: 1px; height: auto; margin: 0;
  }
  .vz-week-rail--base { left: 8px;  top: calc(var(--vz-week-head) + 16px); }
  .vz-week-rail--proj { left: 24px; top: calc(var(--vz-week-head) + 48px); background: repeating-linear-gradient(to bottom, var(--muted) 0 4px, transparent 4px 9px); }
  .vz-week-rail--rev  { left: 40px; top: calc(var(--vz-week-head) + 80px); background: repeating-linear-gradient(to bottom, var(--muted) 0 2px, transparent 2px 5px); }
  .vz-week-rail::after { right: auto; left: -3px; top: auto; bottom: 1.5px; transform: rotate(135deg); }

  .vz-week-days { display: block; margin-top: 20px; }
  .vz-week-day {
    display: block;
    padding-block: clamp(28px, 3vw, 40px);
    border-left: 0; border-top: 1px solid var(--line-strong);
  }
  .vz-week-dayname { padding: 0 0 0 var(--vz-week-indent); }
  .vz-week-tasks { display: block; }
  .vz-week-task { padding: 8px 0 8px var(--vz-week-indent); }
  .vz-week-task:last-child { padding-bottom: 0; }
  .vz-week-task .vz-week-mark { top: 16px; }

  /* 印から文へ、細い枝線 */
  .vz-week-task::before,
  .vz-week-key::before {
    content: ""; position: absolute; top: 20px; height: 1px;
    left: calc(var(--vz-week-x) + 9px); width: calc(var(--vz-week-indent) - var(--vz-week-x) - 19px);
    background: var(--line-strong);
  }
  .vz-week-key::before { top: 16px; }
}

/* ---------- 動き：盤面が画面に入ったら、3本の線が伸び、縦の細線が月曜から金曜へ通り過ぎる。
   各曜日（.vz-week-day にも viz を付けている）は、画面に入ったときに印と文が現れる ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .vz-week .vz-week-rail { clip-path: inset(-8px -8px -8px 0); transition: clip-path 1.6s linear; }
  .js .vz-week :is(.vz-week-legend-title, .vz-week-key) {
    transition: opacity .7s var(--ease) var(--vz-week-k, 0s), transform .7s var(--ease) var(--vz-week-k, 0s);
  }
  .js .vz-week .vz-week-key--base { --vz-week-k: .1s; }
  .js .vz-week .vz-week-key--proj { --vz-week-k: .2s; }
  .js .vz-week .vz-week-key--rev  { --vz-week-k: .3s; }

  /* 同じ曜日の2つの仕事は、上の段を先に、下の段を .1s 遅れて */
  .js .vz-week-day .vz-week-task { --vz-week-t: 0s; }
  .js .vz-week-day :is(.vz-week-task--proj, .vz-week-task--rev) { --vz-week-t: .1s; }
  .js .vz-week-day .vz-week-task--rev ~ .vz-week-task--proj { --vz-week-t: 0s; }

  /* PC：縦の細線が通る時刻（1日 = .32s）に合わせて、曜日・印・文が左から現れる */
  .js .vz-week-day .vz-week-dayname {
    transition: opacity .7s var(--ease) calc(.04s + var(--vz-week-d) * .32s),
                transform .7s var(--ease) calc(.04s + var(--vz-week-d) * .32s);
  }
  .js .vz-week-day .vz-week-mark {
    transition: transform .5s var(--ease) calc(.08s + var(--vz-week-d) * .32s + var(--vz-week-t));
  }
  .js .vz-week-day .vz-week-text {
    transition: opacity .7s var(--ease) calc(.14s + var(--vz-week-d) * .32s + var(--vz-week-t)),
                transform .7s var(--ease) calc(.14s + var(--vz-week-d) * .32s + var(--vz-week-t));
  }

  .js .vz-week:not(.is-in) .vz-week-rail { clip-path: inset(-8px 100% -8px 0); }
  .js .vz-week:not(.is-in) :is(.vz-week-legend-title, .vz-week-key) { opacity: 0; transform: translateY(10px); }
  .js .vz-week-day:not(.is-in) .vz-week-dayname { opacity: 0; transform: translateX(-8px); }
  .js .vz-week-day:not(.is-in) .vz-week-mark { transform: scale(0); }
  .js .vz-week-day:not(.is-in) .vz-week-task--rev .vz-week-mark { transform: rotate(45deg) scale(0); }
  .js .vz-week-day:not(.is-in) .vz-week-text { opacity: 0; transform: translateX(-8px); }

  /* PC：時間の進みを表す縦の細線が、一度だけ左から右へ通り過ぎ、金曜の右端の外へ抜けて見えなくなる
     （animation ではなく transition にして、画面幅の変化などで線が作り直されても、もう一度は流れないようにする） */
  @media (min-width: 1024px) {
    .js .vz-week .vz-week-days { overflow: clip; }
    .js .vz-week .vz-week-days::after {
      content: ""; position: absolute; top: 0; bottom: 0; left: 0;
      width: 1px; background: var(--faint); pointer-events: none;
      transition: left 1.6s linear, opacity .2s linear;
    }
    .js .vz-week.is-in .vz-week-days::after { left: 100%; }
    .js .vz-week:not(.is-in) .vz-week-days::after { opacity: 0; }
  }

  /* 1023px以下：線は上から下へ（印より先に届くよう .9s var(--ease)）。各曜日は画面に入ったときに、曜日→1つ目→2つ目と .1s ずつ現れる */
  @media (max-width: 1023px) {
    .js .vz-week .vz-week-rail { clip-path: inset(0 -8px -8px -8px); transition: clip-path .9s var(--ease); }
    .js .vz-week:not(.is-in) .vz-week-rail { clip-path: inset(0 -8px 100% -8px); }

    .js .vz-week-day .vz-week-task { --vz-week-t: .1s; }
    .js .vz-week-day .vz-week-task:last-child { --vz-week-t: .2s; }
    .js .vz-week-day .vz-week-dayname { transition-delay: 0s; }
    .js .vz-week-day .vz-week-mark { transition-delay: var(--vz-week-t); }
    .js .vz-week-day .vz-week-text { transition-delay: var(--vz-week-t); }
    .js .vz-week-day .vz-week-task::before { transition: opacity .5s var(--ease) var(--vz-week-t); }

    .js .vz-week-day:not(.is-in) :is(.vz-week-dayname, .vz-week-text) { transform: translateY(10px); }
    .js .vz-week-day:not(.is-in) .vz-week-task::before { opacity: 0; }
  }
}

/* --- 一緒に働く人（.vz-people） --- */
/* ---------- 一緒に働く人：中央に Platform Product Engineer、左右に2者ずつ（1024px以上）／中央を上に、4者を縦に（1023px以下） ----------
   事業の図と同じ語り口：中央は白抜きの四角（1px の枠。幅は文字に合わせ、職種名は1行）。曲線は各相手の名前の行の点に届き、
   点から下へ細い縦線を垂らして、その相手とのやりとりをまとめる。丸と線画のアイコンは使わない。
   上の2者と下の2者の名前の行のちょうど中間に、中央の四角を置く（曲線が上下で同じ形になる） */
.vz-people {
  --vz-people-pad: clamp(28px, 3vw, 40px);                    /* 項目の上下の余白 */
  --vz-people-reach: clamp(56px, 12vw - 64px, 112px);        /* 中央の四角から、相手の点までの横幅（線の長さ）。1024px では短くして、両脇の文字の幅を取る */
  --vz-people-gap: 24px;                                      /* 点（縦線）から文字まで */
  --vz-people-nfs: clamp(1.125rem, 1rem + .35vw, 1.25rem);    /* 相手の名前の文字（18→20px） */
  --vz-people-nl: calc(var(--vz-people-nfs) * .75);           /* 名前の1行目の中心（相手のかたまりの上端から） */
  --vz-people-ny: calc(var(--vz-people-pad) + var(--vz-people-nl));   /* 名前の行の中心（段の上端から） */
  position: relative;
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
}

/* 中央：上下2段の高さいっぱい。四角は、上の名前の行（--vz-people-ny）と下の名前の行（50% ＋ --vz-people-ny）の中間に置く */
.vz-people-hub {
  grid-column: 2; grid-row: 1 / 3; position: relative;
  display: grid; grid-template-rows: calc(25% + var(--vz-people-ny)) auto 1fr;
  padding-inline: var(--vz-people-reach);
}

/* 中央の四角：白抜き＋1px の --ink の枠（黒い四角＋外側の細線は、トップの Formula AI だけに使う）。職種名は1行で */
.vz-people-core {
  grid-row: 2; translate: 0 -50%;
  position: relative; z-index: 1;
  padding: 16px 24px;
  border: 1px solid var(--ink); background: var(--white); color: var(--ink);
  text-align: center;
}
.vz-people-core p { font-size: 17px; font-weight: 500; line-height: 1.4; letter-spacing: .04em; white-space: nowrap; }

/* 線：上の名前の行から下の名前の行までの箱に描く（端は 0%・100%、四角の辺は 50%） */
.vz-people-wire { position: absolute; top: var(--vz-people-ny); height: 50%; width: var(--vz-people-reach); }
.vz-people-wire--l { left: 0; }
.vz-people-wire--r { right: 0; }
.vz-people-wire svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vz-people-wire path { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.vz-people-base path { stroke: var(--line-strong); }
.vz-people-flow { display: none; }

/* 4者：段の上から余白を置いて並べる（名前の行が --vz-people-ny にくる） */
.vz-people-p {
  --vz-people-i: 0;          /* 現れる順（動きのずらしに使う） */
  position: relative; align-self: start;
  margin-block: var(--vz-people-pad);
}
.vz-people-p--tl { grid-column: 1; grid-row: 1; }
.vz-people-p--tr { grid-column: 3; grid-row: 1; --vz-people-i: 1; }
.vz-people-p--bl { grid-column: 1; grid-row: 2; --vz-people-i: 2; }
.vz-people-p--br { grid-column: 3; grid-row: 2; --vz-people-i: 3; }
/* 左側は文字を右揃えにし、点と縦線を右端に。右側は左端に */
.vz-people-p--tl, .vz-people-p--bl { justify-self: end; padding-right: var(--vz-people-gap); text-align: right; }
.vz-people-p--tr, .vz-people-p--br { justify-self: start; padding-left: var(--vz-people-gap); }
/* 縦線：名前の行の点から、やりとりの最後の行まで（--line-strong の 1px） */
.vz-people-p::before {
  content: ""; position: absolute; top: var(--vz-people-nl); bottom: 0; width: 1px;
  background: var(--line-strong);
}
/* 線が届く点：7px。名前の行の中心に */
.vz-people-p::after {
  content: ""; position: absolute; top: var(--vz-people-nl);
  width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--ink);
}
.vz-people-p--tl::before, .vz-people-p--bl::before { right: 0; }
.vz-people-p--tl::after, .vz-people-p--bl::after { right: -3px; }
.vz-people-p--tr::before, .vz-people-p--br::before { left: 0; }
.vz-people-p--tr::after, .vz-people-p--br::after { left: -3px; }

.vz-people-body { min-width: 0; max-width: 22em; }
.vz-people-name {
  font-size: var(--vz-people-nfs); font-weight: 400; line-height: 1.5;
  color: var(--ink); font-feature-settings: "palt";
}
.vz-people-sub {
  display: block; margin-top: 2px;
  font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: .04em;
  color: var(--muted); white-space: nowrap;
}
.vz-people-tasks { margin-top: 8px; display: grid; gap: 4px; }
.vz-people-tasks li { font-size: 14.5px; line-height: 1.75; color: var(--text); }  /* やりとりの中身は本文の色。（経営へ）などの添え書きだけ --muted */
.vz-people-aside { color: var(--muted); }
.vz-people-ph { display: inline-block; }

/* 1024px以上：上下の余白の分だけ、図を詰める */
@media (min-width: 1024px) {
  .vz-people { margin-top: calc(clamp(40px, 5vw, 64px) - var(--vz-people-pad)); margin-bottom: calc(var(--vz-people-pad) * -1); }
}

/* 1023px以下：中央の四角を上に置き、左の縦線（背骨。左端から24px）で4者を順につなぐ。点は各相手の名前の行に */
@media (max-width: 1023px) {
  .vz-people { display: block; }
  .vz-people-hub { display: block; padding: 0; }
  .vz-people-wire { display: none; }
  .vz-people-core { width: fit-content; max-width: 100%; padding: 14px 20px; translate: none; text-align: left; }
  .vz-people-p,
  .vz-people-p--tl, .vz-people-p--bl,
  .vz-people-p--tr, .vz-people-p--br {
    justify-self: auto; margin: 0; padding: var(--vz-people-pad) 0 0 48px; text-align: left;
  }
  /* 背骨：各相手の上端から下端まで（最初の相手の上端が、中央の四角の下辺に接する）。最後の相手は名前の行の点で止める */
  .vz-people-p::before,
  .vz-people-p--tl::before, .vz-people-p--bl::before,
  .vz-people-p--tr::before, .vz-people-p--br::before { top: 0; left: 23.5px; right: auto; }
  .vz-people-p--br::before { bottom: auto; height: var(--vz-people-ny); }
  .vz-people-p::after,
  .vz-people-p--tl::after, .vz-people-p--bl::after,
  .vz-people-p--tr::after, .vz-people-p--br::after { top: var(--vz-people-ny); left: 20.5px; right: auto; }
}
/* とても狭い画面：職種名が1行に収まるよう、四角の余白と文字を少し詰める */
@media (max-width: 359px) {
  .vz-people-core { padding-inline: 14px; }
  .vz-people-core p { font-size: 15.5px; letter-spacing: .02em; }
}

/* ---------- 動き（動きを減らす設定・JSなしでは、最初から完成形を表示） ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* 線の上を、中央と各相手のあいだで点が行き来する（.spec-flow と同じ 10px/秒。2方向を合わせて16px間隔） */
  .vz-people-flow { display: inline; }
  .vz-people-flow path { stroke: var(--ink); stroke-opacity: .55; stroke-dasharray: 2 30; }
  .vz-people-flow--in path { animation: vz-people-flow-in 3.2s linear infinite; }
  .vz-people-flow--out path { stroke-dashoffset: 16; animation: vz-people-flow-out 3.2s linear infinite; }

  /* 中央の四角：図（.vz-people）が画面に入ったら現れる */
  .js .vz-people-core { transition: opacity .7s var(--ease), scale .7s var(--ease); }
  .js .vz-people:not(.is-in) .vz-people-core { opacity: 0; scale: .94; }

  /* 1024px以上：線が中央から外へ引かれ、届いた先に点 → 縦線（上から下へ）→ 文字の順で現れる（4者は .1s 刻み） */
  @media (min-width: 1024px) {
    .js .vz-people-wire { clip-path: inset(-4px); transition: clip-path .9s var(--ease) .25s; }
    .js .vz-people-p::after {
      transition: transform .5s var(--ease);
      transition-delay: calc(.95s + var(--vz-people-i) * .1s);
    }
    .js .vz-people-p::before {
      clip-path: inset(0);
      transition: clip-path .9s var(--ease);
      transition-delay: calc(1.05s + var(--vz-people-i) * .1s);
    }
    .js .vz-people-body {
      transition: opacity .7s var(--ease), transform .7s var(--ease);
      transition-delay: calc(1.05s + var(--vz-people-i) * .1s);
    }
    .js .vz-people:not(.is-in) .vz-people-wire--l { clip-path: inset(-4px -4px -4px 100%); }
    .js .vz-people:not(.is-in) .vz-people-wire--r { clip-path: inset(-4px 100% -4px -4px); }
    .js .vz-people:not(.is-in) .vz-people-p::after { transform: scale(0); }
    .js .vz-people:not(.is-in) .vz-people-p::before { clip-path: inset(0 0 100% 0); }
    .js .vz-people:not(.is-in) .vz-people-body { opacity: 0; }
    .js .vz-people:not(.is-in) :is(.vz-people-p--tl, .vz-people-p--bl) .vz-people-body { transform: translateX(8px); }
    .js .vz-people:not(.is-in) :is(.vz-people-p--tr, .vz-people-p--br) .vz-people-body { transform: translateX(-8px); }
  }

  /* 1023px以下：各相手（class="viz"）が画面に入ったら、背骨が上から引かれ、点・文字の順に現れる */
  @media (max-width: 1023px) {
    /* 背骨の上を、点が静かに流れる（.spec-core::after と同じ）。文字のかたまりの ::before を、背骨に重ねて置く */
    .vz-people-body::before {
      content: ""; position: absolute; top: 0; bottom: 0; left: 23.5px; width: 1px;
      background: repeating-linear-gradient(to bottom, var(--ink) 0 2px, transparent 2px 16px);
      opacity: .55; animation: vz-people-flow-v 1.6s linear infinite;
    }
    .vz-people-p--br .vz-people-body::before { bottom: auto; height: var(--vz-people-ny); }

    .js .vz-people-p::before,
    .js .vz-people-body::before {
      clip-path: inset(0);
      transition: clip-path .9s var(--ease);
      transition-delay: calc(.2s + var(--vz-people-i) * .1s);
    }
    .js .vz-people-p::after {
      transition: transform .5s var(--ease);
      transition-delay: calc(.45s + var(--vz-people-i) * .1s);
    }
    .js .vz-people-body > * {
      transition: opacity .7s var(--ease), transform .7s var(--ease);
      transition-delay: calc(.5s + var(--vz-people-i) * .1s);
    }
    .js .vz-people-p:not(.is-in)::before,
    .js .vz-people-p:not(.is-in) .vz-people-body::before { clip-path: inset(0 0 100% 0); }
    .js .vz-people-p:not(.is-in)::after { transform: scale(0); }
    .js .vz-people-p:not(.is-in) .vz-people-body > * { opacity: 0; transform: translateY(10px); }
  }
}
@keyframes vz-people-flow-in { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -32; } }
@keyframes vz-people-flow-out { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 48; } }
@keyframes vz-people-flow-v { from { background-position: 0 0; } to { background-position: 0 16px; } }

/* --- 技術と環境（.vz-env） --- */
/* ---------- 技術と環境：技術の層を積み上げた図＋短い説明3つ ---------- */
.vz-env {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

/* 左：技術の層（列の頭は ink の上線＋18px） */
.vz-env-stack { padding-top: 18px; border-top: 1px solid var(--ink); }
.vz-env-label {
  font-size: 13px; font-weight: 500; line-height: 1.5; letter-spacing: 0.06em;
  color: var(--muted); white-space: nowrap;
}
.vz-env-stack-body { position: relative; margin-top: 16px; min-height: 510px; }

.vz-env-plates { position: absolute; left: 0; top: 0; max-width: none; flex: none; overflow: visible; }
.vz-env-plates--narrow { display: none; }
.vz-env-plates path { stroke-width: 1; vector-effect: non-scaling-stroke; }
.vz-env-plate-top { fill: var(--white); stroke: var(--ink); }
.vz-env-plate-side { fill: var(--paper-2); stroke: var(--ink); }
.vz-env-plate-inner { fill: none; stroke: var(--line-strong); }

/* 板の右端の点から、層の名前と技術へ線を引く。線の上に層の名前、下に技術 */
.vz-env-layers { position: relative; margin-left: 234px; padding-top: 22px; }
.vz-env-layers > div {
  position: relative; height: 76px;
  display: grid; grid-template-rows: 1fr 1fr;
  padding-left: 44px;
}
.vz-env-layers > div::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: var(--line-strong);
  clip-path: inset(0);
}
.vz-env-layers > div::after {
  content: ""; position: absolute; left: -3.5px; top: 50%;
  width: 7px; height: 7px; margin-top: -3px; border-radius: 50%;
  background: var(--ink);
}
.vz-env-layers dt {
  align-self: end; padding-bottom: 6px;
  font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0.04em;
  color: var(--muted); white-space: nowrap;
}
.vz-env-layers dd {
  align-self: start; padding-top: 6px; white-space: nowrap;
  font-size: clamp(1.125rem, 1rem + .35vw, 1.25rem); font-weight: 400; line-height: 1.5;
  color: var(--ink); font-feature-settings: "palt";
}
.vz-env-caption { margin-top: 28px; font-size: 13px; line-height: 1.9; color: var(--muted); }

/* 右：短い説明3つ（列の頭は ink の上線、説明同士は line-strong で区切る） */
.vz-env-notes { border-top: 1px solid var(--ink); }
.vz-env-note { padding-block: clamp(28px, 3vw, 40px); }
.vz-env-note:first-child { padding-top: 18px; }
.vz-env-note:last-child { padding-bottom: 0; }
.vz-env-note + .vz-env-note { border-top: 1px solid var(--line-strong); }
.vz-env-note-title {
  display: flex; align-items: center; gap: 12px;
  font-size: clamp(1.125rem, 1rem + .35vw, 1.25rem); font-weight: 400; line-height: 1.5;
  color: var(--ink); font-feature-settings: "palt";
}
.vz-env-icon { width: 20px; height: 20px; flex: none; color: var(--ink); stroke-width: 1.25; }   /* 全図の線画と同じ 20px・1.25px（HTML の 1.5 より優先） */
.vz-env-icon * { vector-effect: non-scaling-stroke; }

/* 短い説明の文字（見出しや点に添える1〜3行） */
.vz-env-seg, .vz-env-example, .vz-env-lead, .vz-env-chain li, .vz-env-places li {
  font-size: 14.5px; line-height: 1.75; color: var(--muted);
}
/* 折り返しは HTML の <wbr>（文節の切れ目）だけで行う。auto-phrase では「方｜法」のように語の途中で切れる幅があったため */
.vz-env :is(.vz-env-caption, .vz-env-seg, .vz-env-example, .vz-env-lead, .vz-env-chain li) {
  word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty;
}
/* 点に添える短い文は、行の長さをそろえる */
.vz-env :is(.vz-env-seg, .vz-env-chain li) { text-wrap: balance; }

/* AIを前提にした進め方：実線（使っている）→ 破線（考えている）→ 白抜きの点（これから） */
.vz-env-range {
  --vz-env-i: 2;
  position: relative; margin-top: 16px;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}
.vz-env-seg { position: relative; padding: 20px 20px 0 0; }
.vz-env-seg--now { --vz-env-i: 0; }
.vz-env-seg--next { --vz-env-i: 1; padding-right: 0; }
.vz-env-seg::before {
  content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 1px;
  background: var(--faint); clip-path: inset(0);
}
.vz-env-seg--next::before { background: repeating-linear-gradient(to right, var(--muted) 0 4px, transparent 4px 9px); }
.vz-env-seg::after {
  content: ""; position: absolute; left: 0; top: 0;
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink);
}
.vz-env-range::after {
  content: ""; position: absolute; right: 0; top: 0;
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--muted); background: var(--white);
}
.vz-env-example { margin-top: 12px; }

/* 重視すること：3つの経験を点と線でつなぐ */
.vz-env-lead { margin-top: 8px; }
.vz-env-chain { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); }
.vz-env-chain li { position: relative; padding: 20px 16px 0 0; }
.vz-env-chain li:nth-child(1) { --vz-env-i: 0; }
.vz-env-chain li:nth-child(2) { --vz-env-i: 1; }
.vz-env-chain li:nth-child(3) { --vz-env-i: 2; }
.vz-env-chain li::before {
  content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 1px;
  background: var(--faint); clip-path: inset(0);
}
.vz-env-chain li:last-child { padding-right: 0; }
.vz-env-chain li:last-child::before { display: none; }
.vz-env-chain li::after {
  content: ""; position: absolute; left: 0; top: 0;
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink);
}

/* 働き方：場所と、1日の中のコアタイム */
.vz-env-places { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 28px; }
.vz-env-places li { display: flex; align-items: center; gap: 12px; }
.vz-env-day { margin-top: 24px; }
.vz-env-day-name {
  font-size: 13px; font-weight: 500; line-height: 1.5; letter-spacing: 0.06em;
  color: var(--muted); white-space: nowrap;
}
/* 横線＝1日（時間の軸。目盛りは1時間ごと）。10:00〜15:00 をコアタイムとして示す */
.vz-env-day-axis { position: relative; height: 1px; margin: 44px 0 28px; background: var(--faint); }
.vz-env-day-axis::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 5px;
  background: repeating-linear-gradient(to right, var(--line-strong) 0 1px, transparent 1px calc(100% / 24));
}
.vz-env-core {
  position: absolute; top: 0; height: 1px;
  left: calc(100% * 10 / 24); width: calc(100% * 5 / 24);
}
/* 強調する範囲（ink）：横線と両端の短い縦線を1枚で描き、左から引く */
.vz-env-core::before {
  content: ""; position: absolute; left: 0; right: 0; top: -5px; height: 11px;
  background:
    linear-gradient(var(--ink), var(--ink)) 0 5px / 100% 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 0 / 1px 100% no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 0 / 1px 100% no-repeat;
  clip-path: inset(0);
}
.vz-env-core-name {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0.04em;
  white-space: nowrap; color: var(--muted);
}
.vz-env-core-time { position: absolute; left: 0; right: 0; top: 8px; display: flex; justify-content: space-between; }
.vz-env-core-time > span:first-child { transform: translateX(-50%); }
.vz-env-core-time > span:last-child { transform: translateX(50%); }
.vz-env-core-time > span {
  font-family: var(--font-mono); font-size: 13px; line-height: 1.5; letter-spacing: 0.04em;
  white-space: nowrap; color: var(--muted);
}
.vz-env-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 現れる順番：板は下の層から（SVGの中では下の層が先に並ぶ）、文字はそれに合わせる。同じ列の並びなので .1s 刻み */
.vz-env-plates > g:nth-child(1) { --vz-env-d: 0; }
.vz-env-plates > g:nth-child(2) { --vz-env-d: 1; }
.vz-env-plates > g:nth-child(3) { --vz-env-d: 2; }
.vz-env-plates > g:nth-child(4) { --vz-env-d: 3; }
.vz-env-plates > g:nth-child(5) { --vz-env-d: 4; }
.vz-env-plates > g:nth-child(6) { --vz-env-d: 5; }
.vz-env-layers > div:nth-child(1) { --vz-env-d: 5; }
.vz-env-layers > div:nth-child(2) { --vz-env-d: 4; }
.vz-env-layers > div:nth-child(3) { --vz-env-d: 3; }
.vz-env-layers > div:nth-child(4) { --vz-env-d: 2; }
.vz-env-layers > div:nth-child(5) { --vz-env-d: 1; }
.vz-env-layers > div:nth-child(6) { --vz-env-d: 0; }
.vz-env-note:nth-child(1) { --vz-env-n: 0; }
.vz-env-note:nth-child(2) { --vz-env-n: 1; }
.vz-env-note:nth-child(3) { --vz-env-n: 2; }

/* ---------- 画面に入ったら：板が上から降りて下から順に積み上がり、点が現れ、線が引かれ、文字が現れる ---------- */
@media (prefers-reduced-motion: no-preference) {
  .vz-env-plate { transition: transform 1s var(--ease), opacity .7s var(--ease); transition-delay: calc(var(--vz-env-d) * .1s); }
  .vz-env-layers > div::after { transition: transform .5s var(--ease); transition-delay: calc(var(--vz-env-d) * .1s + .2s); }
  .vz-env-layers > div::before { transition: clip-path .9s var(--ease); transition-delay: calc(var(--vz-env-d) * .1s + .3s); }
  .vz-env-layers :is(dt, dd) { transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--vz-env-d) * .1s + .45s); }
  .vz-env-caption { transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: 1.2s; }
  .vz-env-note { transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--vz-env-n) * .1s + .3s); }
  /* 説明の中の小さな図：順番のある並びなので .25s 刻みで、点 → 線 */
  .vz-env-note :is(.vz-env-seg, .vz-env-chain li)::after,
  .vz-env-range::after { transition: transform .5s var(--ease); transition-delay: calc(var(--vz-env-n) * .1s + .55s + var(--vz-env-i) * .25s); }
  .vz-env-note :is(.vz-env-seg, .vz-env-chain li)::before { transition: clip-path .9s var(--ease); transition-delay: calc(var(--vz-env-n) * .1s + .6s + var(--vz-env-i) * .25s); }
  .vz-env-core::before { transition: clip-path .9s var(--ease); transition-delay: calc(var(--vz-env-n) * .1s + .6s); }

  .js .vz-env:not(.is-in) .vz-env-plate { opacity: 0; transform: translateY(-28px); }
  .js .vz-env:not(.is-in) .vz-env-layers > div::before { clip-path: inset(0 100% 0 0); }
  .js .vz-env:not(.is-in) .vz-env-layers > div::after { transform: scale(0); }
  .js .vz-env:not(.is-in) .vz-env-layers :is(dt, dd) { opacity: 0; transform: translateX(-8px); }
  .js .vz-env:not(.is-in) .vz-env-caption { opacity: 0; transform: translateY(10px); }
  /* 説明3つは、それぞれが画面に入ったときに動く（各 .vz-env-note に viz を付けている） */
  .js .vz-env-note:not(.is-in) { opacity: 0; transform: translateY(10px); }
  .js .vz-env-note:not(.is-in) :is(.vz-env-seg, .vz-env-chain li)::after,
  .js .vz-env-note:not(.is-in) .vz-env-range::after { transform: scale(0); }
  .js .vz-env-note:not(.is-in) :is(.vz-env-seg, .vz-env-chain li)::before,
  .js .vz-env-note:not(.is-in) .vz-env-core::before { clip-path: inset(0 100% 0 0); }
}

/* ---------- 1099px以下：図の下に説明を並べる（2列では技術名と説明が窮屈になるため、1100pxで切り替える） ---------- */
@media (max-width: 1099px) {
  .vz-env { grid-template-columns: minmax(0, 1fr); row-gap: clamp(48px, 6vw, 72px); }
}
/* 768〜1099px：説明は「題｜中身」の2列 */
@media (min-width: 768px) and (max-width: 1099px) {
  .vz-env-note {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    column-gap: clamp(24px, 4vw, 56px); align-content: start;
  }
  .vz-env-note-title { grid-column: 1; grid-row: 1 / span 4; align-self: start; }
  .vz-env-note > :not(.vz-env-note-title) { grid-column: 2; }
  /* 中身の1行目を、題の1行目にそろえる */
  .vz-env-note > .vz-env-range { margin-top: 11px; }
  .vz-env-note > :is(.vz-env-lead, .vz-env-places) { margin-top: 2px; }
}

/* ---------- スマホ（767px以下）：小さな板に切り替え、説明は縦に積む ---------- */
@media (max-width: 767px) {
  .vz-env-plates--wide { display: none; }
  .vz-env-plates--narrow { display: block; }
  .vz-env-stack-body { min-height: 346px; }
  .vz-env-layers { margin-left: 110px; padding-top: 1px; }
  .vz-env-layers > div { height: 56px; padding-left: 24px; }
  .vz-env-layers dt { padding-bottom: 4px; }
  /* 技術名を1行に収めるため、ここだけ 15px（B の例外） */
  .vz-env-layers dd { padding-top: 4px; font-size: 15px; }

  /* 点と線の小さな図は縦に並べる。点は題のアイコンの中心（10px）、文字は題の文字（32px）にそろえる */
  .vz-env-range, .vz-env-chain { display: block; }
  .vz-env-seg, .vz-env-chain li { padding: 0 0 16px 32px; }
  .vz-env-seg--next { padding-bottom: 24px; }
  .vz-env-chain li:last-child { padding-bottom: 0; }
  .vz-env-seg::after, .vz-env-chain li::after { left: 7px; top: 9px; }
  .vz-env-seg::before, .vz-env-chain li::before {
    left: 10px; right: auto; width: 1px; height: auto; top: 12.5px; bottom: -12.5px;
  }
  .vz-env-seg--next::before { bottom: 3.5px; background: repeating-linear-gradient(to bottom, var(--muted) 0 4px, transparent 4px 9px); }
  .vz-env-range::after { right: auto; left: 7px; top: auto; bottom: 0; }
}
/* 360〜374px：技術名（15px）がちょうど収まらないため、線から文字までを 4px 詰める */
@media (max-width: 374px) {
  .vz-env-layers > div { padding-left: 20px; }
}
/* とても狭い画面（359px以下）：板を横に少し縮めて、技術名が1行に収まる幅を確保する */
@media (max-width: 359px) {
  .vz-env-plates--narrow { width: 89.6px; }
  .vz-env-layers { margin-left: 88px; }
  .vz-env-layers > div { padding-left: 18px; }
  .vz-env-layers dd { font-size: 13.5px; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  .js .vz-env-note:not(.is-in) :is(.vz-env-seg, .vz-env-chain li)::before { clip-path: inset(0 0 100% 0); }
}

/* --- 仕事の例①（.vz-common） --- */
/* ---------- 仕事の例①：案件ごとの要望を、共通機能に育てる ----------
   番号・見出し → 図 → 本文 の順。図は、取引先のメール → 共通にする部分（白抜きの四角）→ 破線の境目 → 各案件で実装する部分。
   線と点は既存の事業の図（.spec-flow）と同じ語り口。外側・図・本文のそれぞれに main.js が .is-in を付け、画面に入ったものから順に現れる */
.vz-common {
  display: grid; grid-template-columns: var(--grid);   /* 12列の上で、本文を6列目の頭から置く（ほかの節と同じ軸） */
  column-gap: var(--col-gap);
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--line-strong);
}
.vz-common-head,
.vz-common-fig { grid-column: 1 / -1; }

/* 番号・小見出し */
.vz-common-num { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; letter-spacing: 0.1em; color: var(--muted); }
.vz-common-title {
  margin-top: 8px;
  font-size: var(--fs-h3); font-weight: 400; line-height: 1.5;
  color: var(--ink); font-feature-settings: "palt"; word-break: auto-phrase;
}

/* 本文（社員の文）：図の下、6列目の頭から。読ませたい本文なので本文の色（--text）。図との主従は大きさと余白でつける */
.vz-common-body {
  grid-column: 6 / -1; margin-top: 32px; max-width: 36em;
  font-size: 15.5px; line-height: 2; color: var(--text);
}

/* 図：3つの区画（取引先から｜共通にする部分｜各案件で実装する部分）。見出しの行と図の行を、区画をまたいで揃える */
.vz-common-fig {
  --vz-common-h: 208px;            /* 図の行の高さ（案件4行 × 52px）。扇形の線の終点は 26/78/130/182 */
  margin-top: clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(0, 2.3fr) minmax(0, 1.7fr);
  grid-template-rows: auto var(--vz-common-h);
}
.vz-common-zone {
  position: relative; min-width: 0;
  display: grid; grid-row: span 2; grid-template-rows: subgrid;
  border-top: 1px solid var(--line-strong);
}
.vz-common-zone--core { border-top-color: var(--ink); }
.vz-common-zone-head { padding: 18px 0 16px; }
/* 区画の頭のラベル（取引先から） */
.vz-common-label {
  font-size: 13px; font-weight: 500; line-height: 1.5; letter-spacing: 0.06em;
  color: var(--muted); white-space: nowrap;
}
/* 区画の名前（共通にする部分／各案件で実装する部分） */
.vz-common-label--key { font-size: 15.5px; letter-spacing: 0.02em; color: var(--ink); }
.vz-common-sub { margin-top: 8px; font-size: 14.5px; line-height: 1.75; color: var(--muted); }

/* 線画の共通の指定：全図の線画と同じ 1.25px・角と線端は丸・拡大縮小しても太さは変えない */
.vz-common-art path,
.vz-common-node-list path,
.vz-common-mini path {
  fill: none; stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* 取引先から：封筒から書類がのぞく線画（元の大きさのまま） */
.vz-common-src { display: flex; align-items: center; justify-content: flex-end; padding-right: 24px; }
.vz-common-src-item { position: relative; }
.vz-common-art { display: block; width: 96px; height: 80px; color: var(--ink); overflow: visible; }
.vz-common-art path { stroke: currentColor; }
.vz-common-art .vz-common-mask { fill: var(--white); }
.vz-common-art .vz-common-art-lines { stroke: var(--muted); }
.vz-common-src-name {
  position: absolute; top: 100%; left: 50%; translate: -50% 0; margin-top: 14px;
  font-size: 15.5px; font-weight: 500; line-height: 1.5; color: var(--ink); white-space: nowrap;
}

/* 共通にする部分：線 → 黒い四角（共通機能）→ 扇形の線 */
.vz-common-core { display: flex; align-items: center; min-width: 0; }
.vz-common-lead { position: relative; flex: 1 1 0; min-width: 32px; height: 1px; background: var(--line-strong); }
.vz-common-lead::before {
  content: ""; position: absolute; left: -3.5px; top: -3px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink);
}
.vz-common-lead::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(to right, var(--ink) 0 2px, transparent 2px 16px);
  opacity: .55;
}
/* 共通機能：白抜きの四角＋1px の --ink の枠（黒い四角＋外側の細線は、トップの Formula AI だけに使う） */
.vz-common-node { flex: none; border: 1px solid var(--ink); background: var(--white); }
.vz-common-node-inner { padding: 18px 24px 20px; color: var(--ink); }
.vz-common-node-title { font-size: 13px; letter-spacing: 0.06em; line-height: 1.5; color: var(--muted); }
.vz-common-node-list { margin-top: 10px; display: grid; gap: 8px; }
.vz-common-node-list li {
  display: flex; align-items: center; gap: 10px;
  font-size: 15.5px; font-weight: 500; line-height: 1.5; white-space: nowrap;
}
.vz-common-node-list svg { width: 20px; height: 20px; flex: none; }
.vz-common-node-list path { stroke: currentColor; }

.vz-common-fan { flex: 1.5 1 0; min-width: 56px; align-self: stretch; }
.vz-common-fan svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vz-common-fan path { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.vz-common-fan-base path { stroke: var(--line-strong); }
.vz-common-fan-base .vz-common-fan-more { stroke-dasharray: 4 5; }
.vz-common-fan-flow path { stroke: var(--ink); stroke-opacity: .55; stroke-dasharray: 2 14; }

/* 各案件で実装する部分：左端の破線が、共通との境目 */
.vz-common-zone--cases { padding-left: 28px; }
.vz-common-zone--cases::before {
  content: ""; position: absolute; left: -0.5px; top: 0; bottom: 0; width: 1px;
  background: repeating-linear-gradient(to bottom, var(--muted) 0 4px, transparent 4px 9px);
}
.vz-common-port { display: none; }
.vz-common-cases { display: grid; grid-template-rows: repeat(4, 1fr); }
.vz-common-case { position: relative; display: flex; align-items: center; gap: 20px; min-width: 0; }
/* 境目の上の点（共通機能との接続口）と、そこから案件名までの短い線 */
.vz-common-case::before {
  content: ""; position: absolute; z-index: 1; left: -31.5px; top: 50%; margin-top: -3.5px;
  box-sizing: border-box; width: 7px; height: 7px; border-radius: 50%; background: var(--ink);
}
.vz-common-case::after {
  content: ""; position: absolute; left: -24px; top: 50%; width: 14px; height: 1px; background: var(--line-strong);
}
.vz-common-case-name { flex: none; min-width: 3.4em; font-size: 15.5px; font-weight: 500; line-height: 1.5; color: var(--ink); }
/* ほかの案件（これから）：白抜きの点と破線 */
.vz-common-case--more::before { border: 1px solid var(--muted); background: var(--white); }
.vz-common-case--more::after { background: repeating-linear-gradient(to right, var(--line-strong) 0 4px, transparent 4px 9px); }
.vz-common-case--more .vz-common-case-name { color: var(--muted); }

/* 案件ごとの小さな線画：書類のどこを読み取り（黒い線）、どの業務へつなぐか（点の入った四角）が案件で違う */
.vz-common-mini { flex: none; width: 150px; height: 50px; overflow: visible; }
.vz-common-mini-doc { stroke: var(--muted); }
.vz-common-mini-line { stroke: var(--faint); }
.vz-common-mini-hit { stroke: var(--ink); }
.vz-common-mini .vz-common-mini-arrow { stroke: var(--line-strong); stroke-width: 1; }
.vz-common-mini .vz-common-mini-head { stroke: var(--muted); stroke-width: 1; stroke-linejoin: miter; stroke-linecap: butt; }
.vz-common-mini-box { stroke: var(--faint); }
.vz-common-mini-boxhit { stroke: var(--ink); }
.vz-common-mini-dot { fill: var(--ink); }

/* ---------- 動き：画面に入ったら、封筒 → 線 → 共通機能 → 境目 → 各案件の順に現れる（図は is-in から 2.3 秒で出し終える） ----------
   線は切り抜き（clip-path）で伸ばす。拡大縮小で伸ばすと、破線や流れる点の間隔が途中で潰れて見えるため */
@media (prefers-reduced-motion: no-preference) {
  .vz-common-head > *,
  .vz-common-body,
  .vz-common-zone-head,
  .vz-common-src-name,
  .vz-common-node,
  .vz-common-case { transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .vz-common-lead::before,
  .vz-common-port,
  .vz-common-case::before { transition: transform .5s var(--ease); }
  .vz-common-draw { transition: stroke-dashoffset .9s var(--ease) .2s; }
  .vz-common-lead { clip-path: inset(-4px); transition: clip-path .9s var(--ease) .8s; }
  .vz-common-fan { clip-path: inset(-4px 0); transition: clip-path .9s var(--ease) 1.1s; }
  .vz-common-zone--cases::before { clip-path: inset(0); transition: clip-path .9s var(--ease) 1s; }
  .vz-common-zone--cases::after { clip-path: inset(0); transition: clip-path .9s var(--ease) 1.1s; }
  .vz-common-lead::after,
  .vz-common-fan::after,
  .vz-common-fan-flow { transition: opacity .7s var(--ease) 1.6s; }

  .vz-common-head > :nth-child(2) { transition-delay: .1s; }
  .vz-common-zone--src .vz-common-zone-head { transition-delay: .15s; }
  .vz-common-zone--core .vz-common-zone-head { transition-delay: .25s; }
  .vz-common-zone--cases .vz-common-zone-head { transition-delay: .35s; }
  .vz-common-src-name { transition-delay: .6s; }
  .vz-common-lead::before { transition-delay: .8s; }
  .vz-common-port { transition-delay: 1s; }
  .vz-common-node { transition-delay: 1.05s; }
  .vz-common-case:nth-child(1) { --vz-common-d: 1.3s; }
  .vz-common-case:nth-child(2) { --vz-common-d: 1.4s; }
  .vz-common-case:nth-child(3) { --vz-common-d: 1.5s; }
  .vz-common-case:nth-child(4) { --vz-common-d: 1.6s; }
  .vz-common-case,
  .vz-common-case::before { transition-delay: var(--vz-common-d, 0s); }

  /* 線の上を、取引先から各案件へ向かって点が流れる（.spec-lines-flow と同じ速さ・濃さ） */
  .vz-common-lead::after { animation: vz-common-flow-x 1.6s linear infinite; }
  .vz-common-fan-flow path { animation: vz-common-flow 1.6s linear infinite; }

  /* 画面に入る前の状態（JSが動く環境だけ）。見出しは外側、図と本文はそれぞれの .is-in で現れる */
  .js .vz-common:not(.is-in) .vz-common-head > *,
  .js .vz-common-body:not(.is-in) { opacity: 0; transform: translateY(10px); }

  .js .vz-common-fig .vz-common-draw { stroke-dasharray: 1; }
  .js .vz-common-fig:not(.is-in) .vz-common-draw { stroke-dashoffset: 1; }
  .js .vz-common-fig:not(.is-in) .vz-common-zone-head,
  .js .vz-common-fig:not(.is-in) .vz-common-src-name { opacity: 0; transform: translateY(10px); }
  .js .vz-common-fig:not(.is-in) .vz-common-lead { clip-path: inset(-4px calc(100% + 4px) -4px -4px); }
  .js .vz-common-fig:not(.is-in) .vz-common-lead::before,
  .js .vz-common-fig:not(.is-in) .vz-common-port,
  .js .vz-common-fig:not(.is-in) .vz-common-case::before { transform: scale(0); }
  .js .vz-common-fig:not(.is-in) .vz-common-node { opacity: 0; transform: scale(.9); }
  .js .vz-common-fig:not(.is-in) .vz-common-fan { clip-path: inset(-4px 100% -4px 0); }
  .js .vz-common-fig:not(.is-in) .vz-common-zone--cases::before,
  .js .vz-common-fig:not(.is-in) .vz-common-zone--cases::after { clip-path: inset(0 0 100% 0); }
  .js .vz-common-fig:not(.is-in) .vz-common-case { opacity: 0; transform: translateX(-8px); }
  .js .vz-common-fig:not(.is-in) .vz-common-lead::after,
  .js .vz-common-fig:not(.is-in) .vz-common-fan::after,
  .js .vz-common-fig:not(.is-in) .vz-common-fan-flow { opacity: 0; }
}
@keyframes vz-common-flow { to { stroke-dashoffset: -16; } }
@keyframes vz-common-flow-x { from { background-position: 0 0; } to { background-position: 16px 0; } }
@keyframes vz-common-flow-y { from { background-position: 0 0; } to { background-position: 0 16px; } }

/* ---------- 中くらいの幅：案件の線画を少し詰める ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .vz-common-fig { grid-template-columns: minmax(140px, 1fr) minmax(0, 2.2fr) minmax(0, 1.6fr); }
  .vz-common-src { padding-right: 16px; }
  .vz-common-zone--cases { padding-left: 24px; }
  .vz-common-case { gap: 12px; }
  .vz-common-case::before { left: -27.5px; }
  .vz-common-case::after { left: -20px; width: 12px; }
  .vz-common-mini { width: 120px; height: 40px; }
  .vz-common-node-inner { padding: 16px 18px 18px; }
}

/* ---------- スマホ：縦に積む。左の縦線（左端から 24px）が、取引先 → 共通機能 → 境目 → 各案件をつなぐ。文字は 64px から ---------- */
@media (max-width: 767px) {
  .vz-common { display: block; }
  .vz-common-body { margin-top: 32px; }

  .vz-common-fig { display: block; margin-top: 32px; }
  .vz-common-zone {
    display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: none;
    border-top: 0;
  }
  .vz-common-zone-head { padding: 0; }

  /* 取引先から：封筒（元の大きさ）の右に名前。縦線は封筒の下辺から出る */
  .vz-common-zone--src { border-top: 1px solid var(--line-strong); }
  .vz-common-zone--src .vz-common-zone-head { grid-column: 1 / -1; padding: 18px 0 16px; }
  .vz-common-src { grid-column: 1 / -1; display: block; padding: 0; }
  .vz-common-src-item { display: flex; align-items: center; gap: 16px; }
  .vz-common-art { flex: none; }
  .vz-common-src-name { position: static; margin: 0; translate: none; }

  /* 共通にする部分：縦線の右に見出し、その下に白抜きの四角 */
  .vz-common-core { display: contents; }
  .vz-common-zone--core .vz-common-zone-head { grid-column: 2; grid-row: 1; align-self: center; padding: 28px 0 16px; }
  .vz-common-lead { grid-column: 1; grid-row: 1; justify-self: start; margin-left: 23.5px; width: 1px; height: auto; min-width: 0; }
  .vz-common-lead::before { display: none; }
  .vz-common-lead::after { background: repeating-linear-gradient(to bottom, var(--ink) 0 2px, transparent 2px 16px); }
  .vz-common-node { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .vz-common-fan {
    grid-column: 1; grid-row: 3; justify-self: start; margin-left: 23.5px;
    position: relative; width: 1px; min-width: 0; height: 36px; background: var(--line-strong);
  }
  .vz-common-fan svg { display: none; }
  .vz-common-fan::after {
    content: ""; position: absolute; inset: 0; opacity: .55;
    background: repeating-linear-gradient(to bottom, var(--ink) 0 2px, transparent 2px 16px);
  }

  /* 各案件で実装する部分：上の破線が境目。縦線が案件へ枝分かれする */
  .vz-common-zone--cases { padding-left: 0; }
  .vz-common-zone--cases::before {
    left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px;
    background: repeating-linear-gradient(to right, var(--muted) 0 4px, transparent 4px 9px);
  }
  .vz-common-zone--cases::after {
    content: ""; position: absolute; left: 23.5px; top: 0; bottom: 22px; width: 1px; background: var(--line-strong);
  }
  .vz-common-port {
    display: block; position: absolute; z-index: 1; left: 20.5px; top: -3.5px;
    width: 7px; height: 7px; border-radius: 50%; background: var(--ink);
  }
  .vz-common-zone--cases .vz-common-zone-head { grid-column: 2; padding: 18px 0 10px; }
  .vz-common-cases { grid-column: 1 / -1; grid-template-rows: none; }
  .vz-common-case { min-height: 60px; padding-left: 64px; gap: 16px; }
  .vz-common-case::before { left: 48px; }
  .vz-common-case::after { left: 24px; width: 24px; }
  .vz-common-case--more { min-height: 44px; }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  /* 縦向きの線：上から下へ伸ばす。境目の破線だけは左から右へ */
  .vz-common-lead::after,
  .vz-common-fan::after { animation: vz-common-flow-y 1.6s linear infinite; }
  .js .vz-common-fig:not(.is-in) .vz-common-lead { clip-path: inset(0 -4px 100% -4px); }
  .js .vz-common-fig:not(.is-in) .vz-common-fan { clip-path: inset(0 -4px 100% -4px); }
  .js .vz-common-fig:not(.is-in) .vz-common-zone--cases::before { clip-path: inset(0 100% 0 0); }
}

/* --- 仕事の例②（.vz-gate） --- */
/* ---------- 仕事の例②：案件を止めない品質ゲート（図：AI Agent → 品質ゲート → 反映／くり返しの輪） ----------
   並び：番号・見出し → 図 → 本文（本文はPCで6列目の頭から）。
   図の位置は .vz-gate-diagram の変数（--ax 等）で決める。PCは横長の輪、スマホは縦に積んだ輪。
   A＝AI Agent、G＝品質ゲート、O＝反映、C1・C2＝くり返しの輪の角。
   事業の図と同じ描き方：AI Agent と 反映 は文字と 7px の点、品質ゲートは白抜きの四角（1px の枠）。絵のアイコンは使わない */
.vz-gate {
  margin-top: clamp(64px, 8vw, 104px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--line-strong);
  display: grid; grid-template-columns: var(--grid);   /* 12列の上で、本文を6列目の頭から置く（ほかの節と同じ軸） */
  column-gap: var(--col-gap);
}
.vz-gate-head { grid-column: 1 / -1; }
.vz-gate-num { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; letter-spacing: 0.1em; color: var(--muted); }
.vz-gate-title {
  margin-top: 8px;
  font-size: var(--fs-h3); font-weight: 400; line-height: 1.5;
  color: var(--ink); font-feature-settings: "palt"; word-break: auto-phrase;
}
/* 本文（社員の文）：読ませたい本文なので本文の色（--text） */
.vz-gate-body {
  grid-column: 6 / -1; margin-top: 32px; max-width: 36em;
  font-size: 15.5px; line-height: 2; color: var(--text);
}

/* 図の座標（PC：横長の輪）。名前（点の上）の上端が図の上端に来るよう、線の高さ（--ay）を名前の分だけ下げる */
.vz-gate-fig { grid-column: 1 / -1; margin-top: clamp(32px, 4vw, 56px); }
.vz-gate-diagram {
  --ax: 6%;   --ay: 48px;
  --gx: 55%;  --gy: 48px;
  --ox: 94%;  --oy: 48px;
  --c1x: var(--gx); --c1y: 228px;
  --c2x: var(--ax); --c2y: 228px;
  --dot: 7px;            /* AI Agent と 反映 の点 */
  --cw: 232px;           /* 品質ゲートの白抜きの四角 */
  --ch: 84px;
  position: relative; height: 280px;
}

/* 線：往路（主軸）は faint の実線、くり返しの輪は muted の破線（4px／5px） */
.vz-gate-line { position: absolute; display: block; background: var(--faint); }
.vz-gate-line--1 { left: var(--ax); top: var(--ay); width: calc(var(--gx) - var(--ax)); height: 1px; --vz-gate-clip: inset(0 100% 0 0); }
.vz-gate-line--2 { left: var(--gx); top: var(--gy); width: calc(var(--ox) - var(--gx)); height: 1px; --vz-gate-clip: inset(0 100% 0 0); }
.vz-gate-line--back { background: repeating-linear-gradient(var(--vz-gate-dir, to right), var(--muted) 0 4px, transparent 4px 9px); }
.vz-gate-line--3 { left: var(--gx); top: var(--gy); width: 1px; height: calc(var(--c1y) - var(--gy)); --vz-gate-dir: to bottom; --vz-gate-clip: inset(0 0 100% 0); }
.vz-gate-line--4 { left: var(--c2x); top: var(--c1y); width: calc(var(--c1x) - var(--c2x) + 1px); height: 1px; --vz-gate-dir: to left; --vz-gate-clip: inset(0 0 0 100%); }
.vz-gate-line--5 { left: var(--ax); top: var(--ay); width: 1px; height: calc(var(--c2y) - var(--ay)); --vz-gate-dir: to top; --vz-gate-clip: inset(100% 0 0 0); }

/* 矢じり：腕 5px の開いたくの字（右向きの形を回して使う）。left/top は先端の位置。四角や点の手前 8px で止める */
.vz-gate-arrow {
  position: absolute; z-index: 1; display: block; width: 8px; height: 8px; overflow: visible;
  margin: -3.5px 0 0 -5px; transform-origin: 5.5px 4px;
  fill: none; stroke: var(--muted); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;
}
.vz-gate-arrow path { vector-effect: non-scaling-stroke; }
.vz-gate-arrow--1 { left: calc(var(--gx) - var(--cw) / 2 - 8px); top: var(--gy); }
.vz-gate-arrow--2 { left: calc(var(--ox) - var(--dot) / 2 - 8px); top: var(--oy); }
.vz-gate-arrow--4 { left: calc((var(--c1x) + var(--c2x)) / 2); top: var(--c1y); rotate: 180deg; }
.vz-gate-arrow--5 { left: var(--ax); top: calc(var(--ay) + var(--dot) / 2 + 8px); rotate: -90deg; }

/* AI Agent と 反映：線の端の位置（大きさ0の目印）に、7px の点と名前を置く。点の中心は 1px の線の中心にそろえる */
.vz-gate-end { position: absolute; z-index: 2; left: var(--ax); top: var(--ay); width: 0; height: 0; }
.vz-gate-end--out { left: var(--ox); top: var(--oy); }
.vz-gate-end::before {
  content: ""; position: absolute; left: -3px; top: -3px;
  width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--ink);
}
/* 名前は点の上に */
.vz-gate-end-name {
  position: absolute; left: .5px; bottom: 16px; transform: translateX(-50%);
  font-size: 15.5px; font-weight: 500; line-height: 1.5; white-space: nowrap; color: var(--ink);
}

/* 線に添える小さなラベル */
.vz-gate-label { font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0.04em; white-space: nowrap; color: var(--muted); }

/* 設計書・コード：線の上を運ばれる物。AI Agent と品質ゲートの間の、線の上に（名前と下端をそろえる） */
.vz-gate-artifact {
  position: absolute; z-index: 1;
  left: calc((var(--ax) + var(--gx) - var(--cw) / 2) / 2); top: calc(var(--ay) - 16px);
  transform: translate(-50%, -100%);
  font-size: 15.5px; font-weight: 500; line-height: 1.5; white-space: nowrap; color: var(--ink);
}

.vz-gate-back {
  position: absolute; z-index: 1;
  left: calc((var(--c1x) + var(--c2x)) / 2); top: calc(var(--c1y) + 14px);
  transform: translateX(-50%);
}

/* 品質ゲート：白抜きの四角＋1px の --ink の枠（黒い四角＋外側の細線は、トップの Formula AI だけに使う） */
.vz-gate-core {
  position: absolute; z-index: 2; left: var(--gx); top: var(--gy);
  width: var(--cw); height: var(--ch);
  margin: calc(var(--ch) / -2 + .5px) 0 0 calc(var(--cw) / -2 + .5px);
  display: grid; place-content: center; gap: 4px; text-align: center;
  border: 1px solid var(--ink); background: var(--white); color: var(--ink);
}
.vz-gate-core-name { font-size: 17px; font-weight: 500; line-height: 1.4; letter-spacing: 0.04em; }
.vz-gate-core-sub { font-size: 13px; line-height: 1.6; letter-spacing: 0.02em; white-space: nowrap; color: var(--muted); }
.vz-gate-core-sep { margin-inline: .35em; }

/* 一回の実装で、何回も実行される（輪の内側） */
.vz-gate-count {
  position: absolute; z-index: 1;
  left: calc((var(--ax) + var(--gx)) / 2); top: calc((var(--gy) + var(--ch) / 2 + var(--c1y)) / 2);
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
}
.vz-gate-count-text { font-size: 15.5px; font-weight: 500; line-height: 1.5; color: var(--ink); }
.vz-gate-ticks { display: flex; gap: 10px; }
.vz-gate-ticks i { display: block; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--ink); background: var(--ink); }

/* 輪を回る点：初期は出さない（動きを許す環境で、図が画面に入ってから出す） */
.vz-gate-runner {
  position: absolute; z-index: 1; display: none; left: var(--ax); top: var(--ay);
  width: 7px; height: 7px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--ink);
}

/* ---------- スマホ：縦に積み、くり返しの輪は左側を回る ---------- */
@media (max-width: 767px) {
  .vz-gate { grid-template-columns: minmax(0, 1fr); }
  .vz-gate-body { grid-column: 1; }
  .vz-gate-diagram {
    /* 縦の線（A・G・O の中心）。右に名前（点から 20px）、左に輪と「一回の実装で、何回も実行される」が収まる位置 */
    --ax: max(176px, min(50% + 24px, 100% - 152px));  --ay: 20px;
    --gx: var(--ax);         --gy: 236px;
    --ox: var(--ax);         --oy: 392px;
    --c1x: 10px; --c1y: var(--gy);
    --c2x: 10px; --c2y: var(--ay);
    --cw: 172px;
    --ch: 100px;
    height: 412px;
  }
  .vz-gate-line--1 { width: 1px; height: calc(var(--gy) - var(--ay)); --vz-gate-clip: inset(0 0 100% 0); }
  .vz-gate-line--2 { width: 1px; height: calc(var(--oy) - var(--gy)); --vz-gate-clip: inset(0 0 100% 0); }
  .vz-gate-line--3 { left: var(--c1x); top: var(--gy); width: calc(var(--gx) - var(--c1x)); height: 1px; --vz-gate-dir: to left; --vz-gate-clip: inset(0 0 0 100%); }
  .vz-gate-line--4 { left: var(--c1x); top: var(--c2y); width: 1px; height: calc(var(--c1y) - var(--c2y) + 1px); --vz-gate-dir: to top; --vz-gate-clip: inset(100% 0 0 0); }
  .vz-gate-line--5 { left: var(--c2x); top: var(--ay); width: calc(var(--ax) - var(--c2x)); height: 1px; --vz-gate-dir: to right; --vz-gate-clip: inset(0 100% 0 0); }

  .vz-gate-arrow--1 { left: var(--gx); top: calc(var(--gy) - var(--ch) / 2 - 8px); rotate: 90deg; }
  .vz-gate-arrow--2 { left: var(--ox); top: calc(var(--oy) - var(--dot) / 2 - 8px); rotate: 90deg; }
  .vz-gate-arrow--4 { left: var(--c1x); top: calc((var(--c1y) + var(--c2y)) / 2); rotate: -90deg; }
  .vz-gate-arrow--5 { left: calc(var(--ax) - var(--dot) / 2 - 8px); top: var(--ay); rotate: 0deg; }

  /* 名前は点の右に */
  .vz-gate-end-name { left: 20px; bottom: auto; top: .5px; transform: translateY(-50%); }
  .vz-gate-artifact {
    left: calc(var(--gx) + 20px); top: calc((var(--ay) + var(--gy) - var(--ch) / 2) / 2);
    width: calc(100% - var(--gx) - 20px);
    transform: translateY(-50%); white-space: normal;
  }
  /* 左の縦線に沿って、縦書きで */
  .vz-gate-back {
    left: calc(var(--c1x) + 12px); top: calc((var(--c1y) + var(--c2y)) / 2);
    transform: translateY(-50%); writing-mode: vertical-rl; letter-spacing: 0.12em;
  }
  .vz-gate-core-sub span { display: block; }
  .vz-gate-core-sub .vz-gate-core-sep { display: none; }
  /* 縦書きの「くり返し実行」と、中央の縦線の間に置く */
  .vz-gate-count {
    left: calc((var(--c1x) + 40px + var(--gx) - 12px) / 2); top: calc((var(--ay) + var(--gy) - var(--ch) / 2) / 2);
    gap: 10px;
  }
  .vz-gate-count-text { width: 7.5em; }
}

/* ---------- 動き：画面に入ったら、点と四角が現れ、線が引かれ、点が輪を回り始める ----------
   見出し・図・本文は、それぞれが画面に入ったときに is-in が付く（図と本文にも class "viz"） */
@media (prefers-reduced-motion: no-preference) {
  /* 見出し：番号 → 題（.1s ずらし） */
  .js .vz-gate .vz-gate-head > * { transition: opacity .7s var(--ease), translate .7s var(--ease); }
  .js .vz-gate .vz-gate-title { transition-delay: .1s; }
  .js .vz-gate:not(.is-in) .vz-gate-head > * { opacity: 0; translate: 0 10px; }

  /* 図：点と四角 → 線（.9s）→ ラベル・矢じり。2.4秒以内に出し終える */
  /* 線は clip-path で引く（none とは補間されないので、引き終わりも inset(0) で書く） */
  .js .vz-gate-fig .vz-gate-line { clip-path: inset(0); transition: clip-path .9s var(--ease) var(--vz-gate-d, 0s); }
  .js .vz-gate-fig .vz-gate-node { transition: opacity .7s var(--ease) var(--vz-gate-d, 0s), scale .7s var(--ease) var(--vz-gate-d, 0s); }
  .js .vz-gate-fig .vz-gate-end::before { transition: scale .5s var(--ease) var(--vz-gate-d, 0s); }
  .js .vz-gate-fig .vz-gate-end-name { transition: opacity .7s var(--ease) calc(var(--vz-gate-d, 0s) + .15s), translate .7s var(--ease) calc(var(--vz-gate-d, 0s) + .15s); }
  .js .vz-gate-fig .vz-gate-text { transition: opacity .7s var(--ease) var(--vz-gate-d, 0s), translate .7s var(--ease) var(--vz-gate-d, 0s); }
  .js .vz-gate-fig .vz-gate-arrow { transition: opacity .5s var(--ease) var(--vz-gate-d, 0s), scale .5s var(--ease) var(--vz-gate-d, 0s); }
  .js .vz-gate-fig .vz-gate-end--agent { --vz-gate-d: 0s; }
  .js .vz-gate-fig .vz-gate-core { --vz-gate-d: .1s; }
  .js .vz-gate-fig .vz-gate-end--out { --vz-gate-d: .2s; }
  .js .vz-gate-fig .vz-gate-line--1 { --vz-gate-d: .25s; }
  .js .vz-gate-fig .vz-gate-artifact { --vz-gate-d: .5s; }
  .js .vz-gate-fig .vz-gate-arrow--1 { --vz-gate-d: .6s; }
  .js .vz-gate-fig .vz-gate-line--2 { --vz-gate-d: .75s; }
  .js .vz-gate-fig .vz-gate-line--3 { --vz-gate-d: 1s; }
  .js .vz-gate-fig .vz-gate-arrow--2 { --vz-gate-d: 1.05s; }
  .js .vz-gate-fig .vz-gate-line--4 { --vz-gate-d: 1.25s; }
  .js .vz-gate-fig .vz-gate-back,
  .js .vz-gate-fig .vz-gate-arrow--4 { --vz-gate-d: 1.35s; }
  .js .vz-gate-fig .vz-gate-line--5 { --vz-gate-d: 1.5s; }
  .js .vz-gate-fig .vz-gate-count { --vz-gate-d: 1.6s; }
  .js .vz-gate-fig .vz-gate-arrow--5 { --vz-gate-d: 1.85s; }

  .js .vz-gate-fig:not(.is-in) .vz-gate-line { clip-path: var(--vz-gate-clip); }
  .js .vz-gate-fig:not(.is-in) .vz-gate-node { opacity: 0; scale: .9; }
  .js .vz-gate-fig:not(.is-in) .vz-gate-end::before { scale: 0; }  /* 点は 0 から */
  .js .vz-gate-fig:not(.is-in) .vz-gate-end-name { opacity: 0; translate: 0 10px; }
  .js .vz-gate-fig:not(.is-in) .vz-gate-text { opacity: 0; translate: 0 10px; }
  .js .vz-gate-fig:not(.is-in) .vz-gate-artifact { translate: -8px 0; }   /* 横の線に沿って来る */
  .js .vz-gate-fig:not(.is-in) .vz-gate-arrow { opacity: 0; scale: 0; }

  /* 本文 */
  .js .vz-gate-body { transition: opacity .7s var(--ease), translate .7s var(--ease); }
  .js .vz-gate-body:not(.is-in) { opacity: 0; translate: 0 10px; }

  /* 続く動き（1つだけ）：点が輪を回る。2回くり返して、3回目で反映。12秒でひと回り。
     回数の点は、点が品質ゲートに入るたびに一つずつ埋まる（同じ話の一部） */
  .js .vz-gate-fig.is-in .vz-gate-runner { display: block; animation: vz-gate-run 12s linear 2.4s infinite both; }
  .js .vz-gate-fig.is-in .vz-gate-ticks i { animation: 12s linear 2.4s infinite both; }
  .js .vz-gate-fig.is-in .vz-gate-ticks i:nth-child(1) { animation-name: vz-gate-tick-1; }
  .js .vz-gate-fig.is-in .vz-gate-ticks i:nth-child(2) { animation-name: vz-gate-tick-2; }
  .js .vz-gate-fig.is-in .vz-gate-ticks i:nth-child(3) { animation-name: vz-gate-tick-3; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  /* スマホでは「設計書・コード」は縦の線の横にあるので、下から現れる */
  .js .vz-gate-fig:not(.is-in) .vz-gate-artifact { translate: 0 10px; }
}
@keyframes vz-gate-run {
  0%        { left: var(--ax);  top: var(--ay); opacity: 0; }
  2%        { opacity: 1; }
  12%, 14%  { left: var(--gx);  top: var(--gy); }
  18%       { left: var(--c1x); top: var(--c1y); }
  30%       { left: var(--c2x); top: var(--c2y); }
  34%, 36%  { left: var(--ax);  top: var(--ay); }
  48%, 50%  { left: var(--gx);  top: var(--gy); }
  54%       { left: var(--c1x); top: var(--c1y); }
  66%       { left: var(--c2x); top: var(--c2y); }
  70%, 72%  { left: var(--ax);  top: var(--ay); }
  84%, 86%  { left: var(--gx);  top: var(--gy); }
  94%       { left: var(--ox);  top: var(--oy); opacity: 1; }
  100%      { left: var(--ox);  top: var(--oy); opacity: 0; }
}
/* 回数の点：まだ＝白抜き（muted の枠）、品質ゲートを通ったら ink で埋まる */
@keyframes vz-gate-tick-1 {
  0%, 11.5%, 100% { background-color: var(--white); border-color: var(--muted); }
  12.5%, 98%      { background-color: var(--ink);   border-color: var(--ink); }
}
@keyframes vz-gate-tick-2 {
  0%, 47.5%, 100% { background-color: var(--white); border-color: var(--muted); }
  48.5%, 98%      { background-color: var(--ink);   border-color: var(--ink); }
}
@keyframes vz-gate-tick-3 {
  0%, 83.5%, 100% { background-color: var(--white); border-color: var(--muted); }
  84.5%, 98%      { background-color: var(--ink);   border-color: var(--ink); }
}

/* --- 面白さと大変さ（.vz-extra） --- */
/* ---------- 面白さと大変さ（vz-extra）：左に面白さ2つ、右に大変さ3つ。各項目は 番号・見出し → 絵 → 本文 ----------
   絵は事業の図と同じ描き方だけで描く：点7px・線1px・破線（4px／5px）・矢じり（腕5px）・流れる点。四角・アイコン・太い線は使わない */
.vz-extra {
  --vz-extra-gap: clamp(40px, 6vw, 96px);
  margin-top: clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--vz-extra-gap); align-items: start;
}
/* 列の頭：上に1pxの黒い線（env の2列と同じ形） */
.vz-extra-col { position: relative; min-width: 0; padding-top: 18px; border-top: 1px solid var(--ink); }
/* 左右を分ける縦の細線（画面に入ると上から引かれる） */
.vz-extra-col--hard::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(var(--vz-extra-gap) / -2); width: 1px;
  background: var(--line); clip-path: inset(0);
}

/* 小見出し（A）：例①②の題と同じ段。.rows dt と同じ値 */
.vz-extra-head {
  font-size: var(--fs-h3); font-weight: 400; line-height: 1.5;
  color: var(--ink); font-feature-settings: "palt";
}

/* 1項目：番号と見出し → 絵 → 本文 */
.vz-extra-item {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "art" "text";
  padding-block: clamp(28px, 3vw, 40px);
}
.vz-extra-item + .vz-extra-item { border-top: 1px solid var(--line-strong); }
.vz-extra-item:last-child { padding-bottom: 0; }

/* 図の中の見出し（B） */
.vz-extra-title {
  grid-area: title; margin-top: 0;
  display: flex; align-items: baseline; gap: 14px;
  font-size: clamp(1.125rem, 1rem + .35vw, 1.25rem); font-weight: 400; line-height: 1.5;
  color: var(--ink); font-feature-settings: "palt"; word-break: auto-phrase;
}
.vz-extra-num {
  flex: none; font-family: var(--font-mono); font-size: 12.5px; font-weight: 400; letter-spacing: 0.1em;
  color: var(--muted); transform: translateY(-2px);
}
/* 本文（E）：社員の表現そのまま。読ませたい本文なので本文の色（--text）。絵との主従は大きさと余白でつける */
.vz-extra-text {
  grid-area: text; margin-top: 0; max-width: 36em;
  font-size: 15.5px; line-height: 2; color: var(--text);
}

/* 絵：viewBox の幅 440 に対して、最大で原寸（440px）。線は画面上で常に 1px、点は常に 7px。ラベルはHTMLの文字 */
.vz-extra-art {
  grid-area: art; position: relative;
  width: 100%; max-width: 440px; aspect-ratio: 440 / 132; margin: 24px 0 44px;
}
.vz-extra-art--a2 { aspect-ratio: 440 / 112; }
.vz-extra-art--b1 { aspect-ratio: 440 / 104; }
.vz-extra-art--b2 { aspect-ratio: 440 / 120; }
.vz-extra-art--b3 { aspect-ratio: 440 / 116; }
.vz-extra-art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* 線の共通の指定（:where で詳細度を 0 にして、点などの太さを上書きしやすくする） */
:where(.vz-extra-art) path { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }

.vz-extra-ln { stroke: var(--line-strong); }                                  /* 主の線 */
.vz-extra-key { stroke: var(--ink); }                                         /* 強調の線（読む深さ） */
.vz-extra-dash { stroke: var(--muted); stroke-dasharray: 4 5; }               /* 破線：これから・響く先 */
.vz-extra-gate { stroke: var(--ink); stroke-dasharray: 4 5; }                 /* 品質ゲート：型がまだないので破線 */
.vz-extra-arrow { stroke: var(--muted); stroke-linecap: round; stroke-linejoin: round; }  /* 矢じり */
.vz-extra-flow { stroke: var(--ink); stroke-opacity: .55; stroke-dasharray: 2 14; }       /* 流れる点（.spec-lines-flow と同じ） */
.vz-extra-code path { stroke: var(--line); }                                  /* コードの行 */
.vz-extra-code .vz-extra-read { stroke: var(--muted); }                       /* 読んだ行 */
/* 点：長さ0の線を、丸い線端で 7px の点として描く（絵が縮んでも直径は変わらない） */
.vz-extra-dot { stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }
.vz-extra-dot--muted { stroke: var(--muted); }
/* 白抜きの点（欠陥・これからの案件）：灰色の 7px の点の上に、地の色の 5px の点を重ねて 1px の輪にする */
.vz-extra-hole { stroke: var(--muted); stroke-width: 7; stroke-linecap: round; }
.vz-extra-hole-in { stroke: var(--white); stroke-width: 5; stroke-linecap: round; }

/* ラベル（F）：線や点に添える灰色の小さな字。標準は絵の真下で、--x を中心にする */
.vz-extra-lbl {
  position: absolute; top: calc(100% + 6px); left: var(--x, 50%); translate: var(--tx, -50%) var(--ty, 0);
  font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap;
}
.vz-extra-lbl--start { left: 0; --tx: 0; }                     /* 絵の左端にそろえる */
.vz-extra-lbl--end { left: auto; right: 0; --tx: 0; }          /* 絵の右端にそろえる */
/* 線の上に置くラベル：--y の位置（絵の高さに対する割合）の 8px 上 */
.vz-extra-lbl--over { top: calc(var(--y) - 8px); --ty: -100%; }

/* 動く点の止まった位置（動きを減らす設定・JSなしでも、この形で完成している） */
.vz-extra-mover { transform: translateX(var(--x)); }
.vz-extra-slip { transform: translateX(304px); }

/* 登場の動き（初期の隠し方は下の @media の中だけ） */
.vz-extra-wipe,
.vz-extra-drop,
.vz-extra-lift { clip-path: inset(-8px); transition: clip-path .9s var(--ease) var(--d, 0s); }
.vz-extra-fade { transition: opacity .7s var(--ease) var(--d, 0s); }
.vz-extra-rise { transition: opacity .7s var(--ease) var(--d, 0s), transform .7s var(--ease) var(--d, 0s); }
.vz-extra-text.vz-extra-rise { --d: .1s; }
.vz-extra-pt { transition: stroke-width .5s var(--ease) var(--d, 0s); }
.vz-extra-code .vz-extra-read { transition: stroke .7s var(--ease) var(--d, 0s); }
.vz-extra-slip { transition: transform 1.2s var(--ease) var(--d, 0s), opacity .4s linear var(--d, 0s); }
.vz-extra-head { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.vz-extra-col--hard .vz-extra-head { transition-delay: .1s; }
.vz-extra-col--hard::before { transition: clip-path .9s var(--ease) .2s; }

@media (prefers-reduced-motion: no-preference) {
  /* 部品全体（.vz-extra）が画面に入ったとき：列の見出しと縦線 */
  .js .vz-extra:not(.is-in) .vz-extra-head { opacity: 0; transform: translateY(10px); }
  .js .vz-extra:not(.is-in) .vz-extra-col--hard::before { clip-path: inset(0 0 100% 0); }
  /* 各項目（li.viz）が画面に入ったとき：その項目の見出し・絵・本文 */
  .js .vz-extra-item:not(.is-in) .vz-extra-rise { opacity: 0; transform: translateY(10px); }
  .js .vz-extra-item:not(.is-in) .vz-extra-wipe { clip-path: inset(-8px calc(100% + 8px) -8px -8px); }  /* 左から */
  .js .vz-extra-item:not(.is-in) .vz-extra-drop { clip-path: inset(-8px -8px calc(100% + 8px) -8px); }  /* 上から */
  .js .vz-extra-item:not(.is-in) .vz-extra-lift { clip-path: inset(calc(100% + 8px) -8px -8px -8px); }  /* 下から */
  .js .vz-extra-item:not(.is-in) .vz-extra-fade { opacity: 0; }
  .js .vz-extra-item:not(.is-in) .vz-extra-pt { stroke-width: 0; }
  .js .vz-extra-item:not(.is-in) .vz-extra-code .vz-extra-read { stroke: var(--line); }
  .js .vz-extra-item:not(.is-in) .vz-extra-slip { transform: translateX(150px); opacity: 0; }

  /* 続く動き（1つの絵に1つまで）：線の上を点が流れる（.spec-lines-flow と同じ値）／成果物が品質ゲートを通る */
  .vz-extra-flow { animation: vz-extra-flow 1.6s linear infinite; }
  .vz-extra-mover { animation: vz-extra-move 7.2s linear var(--md, 0s) infinite; }
}
@keyframes vz-extra-flow { to { stroke-dashoffset: -16; } }
@keyframes vz-extra-move {
  0% { transform: translateX(16px); opacity: 0; }
  6% { opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translateX(420px); opacity: 0; }
}

/* スマホ：面白さ → 大変さ の順に上下へ積む */
@media (max-width: 767px) {
  .vz-extra { grid-template-columns: minmax(0, 1fr); row-gap: 64px; }
  .vz-extra-col--hard::before { display: none; }
  .vz-extra-title { gap: 12px; }
}

/* ---------- 職種ページの図（Account Executive）----------
   部品のHTMLは tools/job_parts/account-executive/*.html（仕事の流れ・最近の仕事・一緒に働く人・道具と環境・仕事の例・面白さと大変さ・社員の言葉）。
   クラス名はすべて vz-ae- で始まり、PEページの図（vz-flow・vz-people など）とは重ならない。描き方（点7px・線1px・破線4px／5px・矢じり7px）はPEページと同じ。
   main.js が図（.viz）に、画面に入ったとき is-in を、画面の外では is-paused を付ける。色は変数だけを使い、ダーク／ライトの両方で反転する。
   動きを減らす設定・JSなし・「動きを止める」では、最初から完成形を表示する */

/* =========================================================
   Account Executive ページの図（担当 g1：仕事の流れ .vz-ae-flow／最近の仕事 .vz-ae-week）
   部品のHTMLは tools/job_parts/account-executive/flow.html・week.html（サイトの変数だけを使う）。
   描き方は PEページの図（parts-r1/B17 の決まり）にそろえる：
   ・点は 7px、線は 1px（主の線＝時間や順路の軸は --faint、つなぐ線は --line-strong）、破線は 4px／5px（--muted）
   ・矢じりは 7px の開いたくの字（--muted）、白抜きの丸は 1px の --ink の枠＋背景 --white、丸の中の線画は 20px・線 1.25px
   ・文字はすべてHTML。見出し 18→20px／名前 15.5px・500／説明 14.5px／ラベル 13px（--muted）／番号は等幅 12.5px
   ・登場の動きは .viz に is-in が付いたら始まり、2.4秒以内に出し終える。続く動きは「仕事の流れ」の輪を回る点1つだけ
     （画面の外では .viz の is-paused で止まる。「動きを止める」・動きを減らす設定・JSなしでは出さない）
   ========================================================= */


/* ---------- 仕事の流れ（.vz-ae-flow）：7段階が輪を描いて循環する ----------
   1200px以上：中央に輪（7つの丸＋中心の一言）。右に01〜04、左に05〜07の見出し（時計回り）。
     右に4つ並べるため、丸の高さは輪の上で等間隔（輪の半径の 0.5 倍ずつ）。左の3つは 0.75 倍ずつで、上下の端は右とそろう。
     06と07の間に「受注」の点（線はそこで止めずに07へ続く）。03〜04と、受注〜07の外側に、もう1本の細い線（FDEと組む区間）。
     07→01 は破線で戻る（受注・失注の学びを、次の提案へ）。
     ※ PEページの輪は1024px以上だが、ここは7段で右に4つ並ぶため、輪と左右の文字が収まる 1200px 以上だけで輪にする。
   1199px以下：縦に並べ、07の下から左の破線を通って01へ戻る（768〜1199px は、左に中心の一言・右に縦の流れ） */
.vz-ae-flow {
  --vz-s: 576px;                                      /* 輪の図の一辺（1200px以上は本文の幅がほぼ一定なので固定） */
  --vz-r: calc(var(--vz-s) * .402778);                /* 輪の半径（一辺576に対して232） */
  --vz-n: 64px;                                       /* 段階の丸の直径 */
  --vz-fs: clamp(1.125rem, 1rem + .35vw, 1.25rem);    /* 段階の見出しの文字（18→20px） */
  --vz-lh: calc(var(--vz-fs) * 1.5);                 /* 見出し1行の高さ（左右の点の位置合わせに使う） */
  margin-top: clamp(40px, 5vw, 64px);
}
/* 上は「受注・失注の学びを、次の提案へ」の上端が図の上端にそろうよう、空きの分だけ詰める */
.vz-ae-flow-stage {
  position: relative;
  min-height: calc(var(--vz-s) * .91);
  margin-top: calc(9.75px - var(--vz-s) * .0486);
}

/* 中心の一言 */
.vz-ae-flow-core {
  position: absolute; left: 50%; top: calc(var(--vz-s) / 2); z-index: 1;
  width: calc(var(--vz-s) * .5); margin-left: calc(var(--vz-s) * -.25);
  transform: translateY(-50%);
  font-size: 28px; font-weight: 400; line-height: 1.55; letter-spacing: .02em;
  color: var(--ink); text-align: center; font-feature-settings: "palt";
}
.vz-ae-flow-ph { display: inline-block; max-width: 100%; }  /* 文節のまとまり（途中で折り返さない） */

/* 輪（主軸）・戻りの破線・FDEと組む区間の線・引き出し線（SVG） */
.vz-ae-flow-ring {
  position: absolute; top: 0; left: 50%;
  width: var(--vz-s); height: var(--vz-s); max-width: none; margin-left: calc(var(--vz-s) / -2);
  overflow: visible;
}
.vz-ae-flow-ring path { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.vz-ae-flow-track { stroke: var(--faint); stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.vz-ae-flow-back { stroke: var(--muted); stroke-dasharray: 4 5; }
/* FDEと組む区間：輪のすぐ外側（12px）に、輪と同じ色の線をもう1本。2本が並んで走ることで「一緒に進む」を見せる */
.vz-ae-flow-fde { stroke: var(--faint); stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.vz-ae-flow-leads path { stroke: var(--line-strong); stroke-dasharray: 1 1; stroke-dashoffset: 0; }

/* 向きの印（7px のくの字）：段階と段階のあいだに5つ（06〜07の間は「受注」の点が受け持つ）＋戻りの破線の頂点に1つ */
.vz-ae-flow-marks { position: absolute; left: 50%; top: calc(var(--vz-s) / 2); width: 0; height: 0; }
.vz-ae-flow-marks > span {
  position: absolute; left: -3.5px; top: -3.5px; width: 7px; height: 7px;
  border-top: 1px solid var(--muted); border-right: 1px solid var(--muted);
  transform: rotate(var(--vz-a)) translateY(calc(var(--vz-r) * -1)) translateX(-2.5px) rotate(45deg);
}
.vz-ae-flow-marks > span:nth-child(1) { --vz-a: 58.47deg; }
.vz-ae-flow-marks > span:nth-child(2) { --vz-a: 90deg; }
.vz-ae-flow-marks > span:nth-child(3) { --vz-a: 121.53deg; }
.vz-ae-flow-marks > span:nth-child(4) { --vz-a: 180deg; }
.vz-ae-flow-marks > span:nth-child(5) { --vz-a: 245.7deg; }
.vz-ae-flow-marks > span:nth-child(6) { --vz-a: 0deg; }

/* 輪を回る点（続く動き）：初めは出さない。動きを許す環境で、図が画面に入ってから出す（下の「登場の動き」） */
.vz-ae-flow-orbit {
  position: absolute; left: 50%; top: calc(var(--vz-s) / 2);
  display: none;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: var(--ink);
  transform: rotate(41.41deg) translateY(calc(var(--vz-r) * -1));
}
@keyframes vz-ae-flow-orbit {
  from { transform: rotate(41.41deg) translateY(calc(var(--vz-r) * -1)); }
  to { transform: rotate(401.41deg) translateY(calc(var(--vz-r) * -1)); }
}

/* 7つの段階：丸の位置（輪の図の中の割合）と、輪の線が届く時刻（--vz-t。登場の動きで使う） */
.vz-ae-flow-steps {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.vz-ae-flow-step { grid-row: 1; grid-column: 2; }
.vz-ae-flow-step:nth-child(n+5) { grid-column: 1; }
.vz-ae-flow-step:nth-child(1) { --vz-x: .7664; --vz-y: .1979; --vz-t: 0s; }
.vz-ae-flow-step:nth-child(2) { --vz-x: .89;   --vz-y: .3993; --vz-t: .17s; }
.vz-ae-flow-step:nth-child(3) { --vz-x: .89;   --vz-y: .6007; --vz-t: .32s; }
.vz-ae-flow-step:nth-child(4) { --vz-x: .7664; --vz-y: .8021; --vz-t: .49s; }
.vz-ae-flow-step:nth-child(5) { --vz-x: .2336; --vz-y: .8021; --vz-t: .91s; }
.vz-ae-flow-step:nth-child(6) { --vz-x: .0972; --vz-y: .5;    --vz-t: 1.16s; }
.vz-ae-flow-step:nth-child(7) { --vz-x: .2336; --vz-y: .1979; --vz-t: 1.4s; }

.vz-ae-flow-node {
  position: absolute; z-index: 1;
  left: calc(50% + (var(--vz-x) - .5) * var(--vz-s));
  top: calc(var(--vz-y) * var(--vz-s));
  width: var(--vz-n); height: var(--vz-n);
  margin: calc(var(--vz-n) / -2) 0 0 calc(var(--vz-n) / -2);
  display: grid; place-items: center;
  border: 1px solid var(--ink); border-radius: 50%;
  background: var(--white); color: var(--ink);
}
/* 丸の中の線画：全図で 20px・線 1.25px（HTML の stroke-width="1.5" より、この指定が優先される） */
.vz-ae-flow-node svg { width: 20px; height: 20px; overflow: visible; stroke-width: 1.25; }
.vz-ae-flow-node svg * { vector-effect: non-scaling-stroke; }

/* 見出しと説明：右に01〜04、左に05〜07。輪の側の端に 7px の点 */
.vz-ae-flow-text { position: absolute; top: calc(var(--vz-y) * var(--vz-s) - var(--vz-lh) / 2); }
.vz-ae-flow-step:nth-child(-n+4) .vz-ae-flow-text { left: calc(50% + var(--vz-s) / 2); right: 0; padding-left: 24px; }
.vz-ae-flow-step:nth-child(n+5) .vz-ae-flow-text { left: 0; right: calc(50% + var(--vz-s) / 2); padding-right: 24px; text-align: right; }
.vz-ae-flow-text::before {
  content: ""; position: absolute; top: calc(var(--vz-lh) / 2 - 3.5px);
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink);
}
.vz-ae-flow-step:nth-child(-n+4) .vz-ae-flow-text::before { left: -3.5px; }
.vz-ae-flow-step:nth-child(n+5) .vz-ae-flow-text::before { right: -3.5px; }

/* いちばん下の04（右）と05（左）だけは、文字を流れに置いて、図の高さがその下端までになるようにする（行数が変わっても重ならない） */
.vz-ae-flow-step:is(:nth-child(4), :nth-child(5)) { padding-top: calc(var(--vz-y) * var(--vz-s) - var(--vz-lh) / 2); }
.vz-ae-flow-step:is(:nth-child(4), :nth-child(5)) .vz-ae-flow-text { position: relative; top: auto; left: auto; right: auto; }
.vz-ae-flow-step:nth-child(4) .vz-ae-flow-text { margin-left: calc(var(--vz-s) / 2); }
.vz-ae-flow-step:nth-child(5) .vz-ae-flow-text { margin-right: calc(var(--vz-s) / 2); }

.vz-ae-flow-h {
  display: flex; align-items: baseline; gap: 12px;
  font-size: var(--vz-fs); font-weight: 400; line-height: 1.5;
  color: var(--ink); font-feature-settings: "palt"; word-break: auto-phrase;
}
.vz-ae-flow-step:nth-child(n+5) .vz-ae-flow-h { flex-direction: row-reverse; }
.vz-ae-flow-num { flex: none; font-family: var(--font-mono); font-size: 12.5px; font-weight: 400; letter-spacing: .1em; color: var(--muted); }
/* 各段階の説明は読ませたい本文なので、本文の色（--text） */
.vz-ae-flow-d {
  margin-top: 8px; font-size: 14.5px; line-height: 1.75; color: var(--text);
  word-break: auto-phrase; text-wrap: pretty;
}

/* 受注：06と07の間、輪の上の 7px の点（塗り）と、輪の内側に「受注」 */
.vz-ae-flow-won {
  position: absolute; z-index: 1;
  left: calc(50% - var(--vz-s) * .3671); top: calc(var(--vz-s) * .3343);
  display: flex; align-items: center; gap: 12px;
  transform: translate(-3.5px, -50%);
  font-size: 15.5px; font-weight: 500; line-height: 1.5; color: var(--ink); white-space: nowrap;
}
.vz-ae-flow-won::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink);
}

/* 「FDEと」：外側の線に添える小さなラベル */
.vz-ae-flow-with {
  position: absolute;
  font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: .04em; color: var(--muted); white-space: nowrap;
  transform: translateY(-50%);
}
.vz-ae-flow-with--a { left: calc(50% + var(--vz-s) * .3819); top: calc(var(--vz-s) * .734); }
.vz-ae-flow-with--b { right: calc(50% + var(--vz-s) * .3955); top: calc(var(--vz-s) * .2897); }

/* 07 → 01 の破線の上に「受注・失注の学びを、次の提案へ」 */
.vz-ae-flow-back-label {
  position: absolute; left: 50%; top: calc(var(--vz-s) * .0486);
  transform: translate(-50%, -50%);
  font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: .04em; color: var(--muted); white-space: nowrap;
}

.vz-ae-flow-note { margin-top: 28px; font-size: 13px; line-height: 1.9; color: var(--muted); text-align: center; }

/* ---- 1199px以下：縦に並べる。各段階を細い線（背骨。左端から40px）でつなぎ、07の下から左の破線を通って01へ戻る ----
   文字の書き出しは80px（左の40pxが戻りの輪の分）。06の下に「受注」の点、03〜04と受注〜07の背骨の右に「FDEと」の細い線 */
@media (max-width: 1199px) {
  .vz-ae-flow { --vz-n: 48px; }
  .vz-ae-flow-stage { min-height: 0; margin-top: 0; }
  .vz-ae-flow-ring, .vz-ae-flow-marks, .vz-ae-flow-orbit { display: none !important; }
  .vz-ae-flow-core {
    position: static; width: auto; margin: 0; transform: none;
    font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); line-height: 1.6; text-align: left;
  }
  .vz-ae-flow-cycle { position: relative; }
  .vz-ae-flow-steps { display: block; }
  .vz-ae-flow-step,
  .vz-ae-flow-step:is(:nth-child(4), :nth-child(5)) {
    position: relative; display: grid; grid-template-columns: 80px minmax(0, 1fr); padding: 0 0 32px;
  }
  .vz-ae-flow-node { position: relative; left: auto; top: auto; margin: 0 0 0 16px; }
  .vz-ae-flow-step .vz-ae-flow-text,
  .vz-ae-flow-step:nth-child(n) .vz-ae-flow-text {
    position: static; margin: 0; padding: calc((var(--vz-n) - var(--vz-lh)) / 2) 0 0; text-align: left;
  }
  .vz-ae-flow-text::before { display: none; }
  .vz-ae-flow-step:nth-child(n+5) .vz-ae-flow-h { flex-direction: row; }
  /* 段階と段階をつなぐ線（主軸。07からは、下の戻り線までのばす） */
  .vz-ae-flow-step::after {
    content: ""; position: absolute; left: 40px; top: var(--vz-n); bottom: 0; width: 1px;
    background: var(--faint); clip-path: inset(0 0 0 0);
  }
  /* 06の下は、受注の点を置く分だけ空ける */
  .vz-ae-flow-step--won,
  .vz-ae-flow-step--won:nth-child(n) { padding-bottom: 96px; }
  .vz-ae-flow-won {
    left: 36.5px; top: auto; bottom: 48px; gap: 36.5px;   /* 点の中心を背骨（40px）に、文字を80pxから */
    transform: translateY(50%);
  }
  /* FDEと組む区間：背骨の右 12px に、背骨と同じ色の線（丸の下をくぐる）。03の丸の中心から04の丸の中心まで／受注の点から07の文字の下まで */
  .vz-ae-flow-step--fde::before,
  .vz-ae-flow-step--after::before {
    content: ""; position: absolute; left: 52px; width: 1px; background: var(--faint); clip-path: inset(0 0 0 0);
  }
  .vz-ae-flow-step--fde::before { top: calc(var(--vz-n) / 2); bottom: calc(var(--vz-n) / -2); }
  /* 07は、縦書きの「FDEと」と戻り線の文字が近づかないよう、下を少し広げる */
  .vz-ae-flow-step--after,
  .vz-ae-flow-step--after:nth-child(n) { padding-bottom: 44px; }
  .vz-ae-flow-step--after::before { top: -48px; bottom: 16px; }
  /* 「FDEと」は、その線と文字のあいだに縦書きで（英字も立てて並べる）。丸と丸のあいだの見えている線の、上下の中央に置く。
     縦書きの4文字（約52px）が収まるよう、03と07の段は高さの下限を決める（説明が1行になる広い画面で、次の丸や戻り線の文字に重ならない） */
  .vz-ae-flow-with,
  .vz-ae-flow-with--a,
  .vz-ae-flow-with--b {
    left: 57px; right: auto; top: calc(var(--vz-n) + 8px); bottom: 8px; transform: none;
    writing-mode: vertical-rl; text-orientation: upright; text-align: center; letter-spacing: 0; line-height: 1;
  }
  .vz-ae-flow-with--b { bottom: 24px; }
  .vz-ae-flow-step--fde { min-height: calc(var(--vz-n) + 68px); }
  .vz-ae-flow-step--after { min-height: calc(var(--vz-n) + 84px); }
  /* 戻り線：07の下 → 左端を上へ → 01へ。4px の線と 5px のすき間の破線を、横・縦・横の3本の背景で描く */
  .vz-ae-flow-steps::before {
    content: ""; position: absolute; left: 0; top: calc(var(--vz-n) / 2); bottom: 0; width: 40px;
    background:
      repeating-linear-gradient(90deg, var(--muted) 0 4px, transparent 4px 9px) left top / 100% 1px no-repeat,
      repeating-linear-gradient(0deg, var(--muted) 0 4px, transparent 4px 9px) left bottom / 1px 100% no-repeat,
      repeating-linear-gradient(90deg, var(--muted) 0 4px, transparent 4px 9px) left bottom / 100% 1px no-repeat;
  }
  /* 01 の丸へ向かう矢じり（7px のくの字） */
  .vz-ae-flow-steps::after {
    content: ""; position: absolute; left: 6.5px; top: calc(var(--vz-n) / 2 - 3px);
    width: 7px; height: 7px;
    border-top: 1px solid var(--muted); border-right: 1px solid var(--muted);
    transform: rotate(45deg);
  }
  .vz-ae-flow-steps { position: relative; }
  .vz-ae-flow-back-label { left: 52px; top: auto; bottom: 0; transform: translateY(50%); white-space: normal; }
  .vz-ae-flow-note { margin-top: 38px; text-align: left; }  /* 戻り線の文字の下端から28px */
}
/* 768〜1199px：左に中心の一言、右に縦の流れ */
@media (min-width: 768px) and (max-width: 1199px) {
  .vz-ae-flow-stage {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    column-gap: clamp(32px, 5vw, 64px); align-items: start;
  }
  .vz-ae-flow-core { padding-top: 6px; }
  .vz-ae-flow-note { padding-left: calc(4 / 11 * (100% - clamp(32px, 5vw, 64px)) + clamp(32px, 5vw, 64px)); }
}
/* 767px以下：中心の一言を上に置く */
@media (max-width: 767px) {
  .vz-ae-flow-core { margin-bottom: 36px; font-size: 20px; }
}

/* 登場の動き（1200px以上）：輪が01から時計回りに引かれ、線が届いた時刻に丸・見出し・説明が順に現れる。
   受注の点は線が届いたときに、FDEと組む区間の線はその区間を輪が通り過ぎたあとに引かれる。
   最後に戻りの破線・その文字・中心の一言が出て、点が輪を回り始める（is-in から 2.4 秒） */
@media (prefers-reduced-motion: no-preference) and (min-width: 1200px) {
  .js .vz-ae-flow .vz-ae-flow-track { transition: stroke-dashoffset 1.4s linear; }
  .js .vz-ae-flow .vz-ae-flow-node { transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--vz-t) + .05s); }
  .js .vz-ae-flow .vz-ae-flow-h { transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--vz-t) + .2s); }
  .js .vz-ae-flow .vz-ae-flow-d { transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--vz-t) + .3s); }
  .js .vz-ae-flow .vz-ae-flow-text::before { transition: transform .5s var(--ease); transition-delay: calc(var(--vz-t) + .3s); }
  .js .vz-ae-flow .vz-ae-flow-leads path { transition: stroke-dashoffset .9s var(--ease); }
  .js .vz-ae-flow .vz-ae-flow-leads path:nth-child(1) { transition-delay: .1s; }
  .js .vz-ae-flow .vz-ae-flow-leads path:nth-child(2) { transition-delay: .27s; }
  .js .vz-ae-flow .vz-ae-flow-leads path:nth-child(3) { transition-delay: .42s; }
  .js .vz-ae-flow .vz-ae-flow-leads path:nth-child(4) { transition-delay: .59s; }
  .js .vz-ae-flow .vz-ae-flow-leads path:nth-child(5) { transition-delay: 1.01s; }
  .js .vz-ae-flow .vz-ae-flow-leads path:nth-child(6) { transition-delay: 1.26s; }
  .js .vz-ae-flow .vz-ae-flow-leads path:nth-child(7) { transition-delay: 1.5s; }
  .js .vz-ae-flow .vz-ae-flow-marks > span { transition: opacity .5s var(--ease); }
  .js .vz-ae-flow .vz-ae-flow-marks > span:nth-child(1) { transition-delay: .09s; }
  .js .vz-ae-flow .vz-ae-flow-marks > span:nth-child(2) { transition-delay: .25s; }
  .js .vz-ae-flow .vz-ae-flow-marks > span:nth-child(3) { transition-delay: .41s; }
  .js .vz-ae-flow .vz-ae-flow-marks > span:nth-child(4) { transition-delay: .7s; }
  .js .vz-ae-flow .vz-ae-flow-marks > span:nth-child(5) { transition-delay: 1.03s; }
  .js .vz-ae-flow .vz-ae-flow-marks > span:nth-child(6) { transition-delay: 1.6s; }
  .js .vz-ae-flow .vz-ae-flow-won::before { transition: scale .5s var(--ease) 1.28s; }
  .js .vz-ae-flow .vz-ae-flow-won { transition: color .7s var(--ease) 1.35s; }
  .js .vz-ae-flow .vz-ae-flow-fde--a { transition: stroke-dashoffset .6s var(--ease) .35s; }
  .js .vz-ae-flow .vz-ae-flow-fde--b { transition: stroke-dashoffset .5s var(--ease) 1.3s; }
  .js .vz-ae-flow .vz-ae-flow-with { transition: opacity .7s var(--ease), translate .7s var(--ease); }
  .js .vz-ae-flow .vz-ae-flow-with--a { transition-delay: .75s; }
  .js .vz-ae-flow .vz-ae-flow-with--b { transition-delay: 1.55s; }
  .js .vz-ae-flow .vz-ae-flow-back { transition: opacity .7s var(--ease) 1.6s; }
  .js .vz-ae-flow .vz-ae-flow-back-label { transition: opacity .7s var(--ease) 1.6s, translate .7s var(--ease) 1.6s; }
  .js .vz-ae-flow .vz-ae-flow-core { transition: opacity 1s var(--ease) 1.3s, filter 1s var(--ease) 1.3s; }

  .js .vz-ae-flow:not(.is-in) :is(.vz-ae-flow-track, .vz-ae-flow-fde, .vz-ae-flow-leads path) { stroke-dashoffset: 1; }
  .js .vz-ae-flow:not(.is-in) .vz-ae-flow-node { opacity: 0; transform: scale(.9); }
  .js .vz-ae-flow:not(.is-in) :is(.vz-ae-flow-h, .vz-ae-flow-d) { opacity: 0; transform: translateY(10px); }
  .js .vz-ae-flow:not(.is-in) .vz-ae-flow-text::before { transform: scale(0); }
  .js .vz-ae-flow:not(.is-in) .vz-ae-flow-won::before { scale: 0; }
  .js .vz-ae-flow:not(.is-in) .vz-ae-flow-won { color: transparent; }
  .js .vz-ae-flow:not(.is-in) :is(.vz-ae-flow-marks > span, .vz-ae-flow-back) { opacity: 0; }
  .js .vz-ae-flow:not(.is-in) :is(.vz-ae-flow-back-label, .vz-ae-flow-with) { opacity: 0; translate: 0 10px; }
  .js .vz-ae-flow:not(.is-in) .vz-ae-flow-core { opacity: 0; filter: blur(6px); }

  /* 続く動き（1つだけ）：7px の点が18秒で輪をひと回りする（段階の丸の下をくぐる）。「動きを止める」の間は出さない */
  :root.js:not([data-motion="off"]) .vz-ae-flow.is-in .vz-ae-flow-orbit {
    display: block; animation: vz-ae-flow-orbit 18s linear 2.4s infinite both;
  }
}
/* 縦に並べたとき：一言が先に現れる。各段（class "viz"）が画面に入ったら、背骨が上から引かれ、丸・見出し・説明の順に現れる。
   受注の点とFDEと組む区間の線は、その段の動きに続いて現れ、最後の07が入ったら戻り線が出る */
@media (prefers-reduced-motion: no-preference) and (max-width: 1199px) {
  .js .vz-ae-flow .vz-ae-flow-core { transition: opacity 1s var(--ease), filter 1s var(--ease); }
  .js .vz-ae-flow .vz-ae-flow-step::after,
  .js .vz-ae-flow .vz-ae-flow-step::before { transition: clip-path .9s var(--ease) .2s; }
  .js .vz-ae-flow .vz-ae-flow-node { transition: opacity .7s var(--ease) .05s, transform .7s var(--ease) .05s; }
  .js .vz-ae-flow .vz-ae-flow-h { transition: opacity .7s var(--ease) .15s, transform .7s var(--ease) .15s; }
  .js .vz-ae-flow .vz-ae-flow-d { transition: opacity .7s var(--ease) .25s, transform .7s var(--ease) .25s; }
  .js .vz-ae-flow .vz-ae-flow-won::before { transition: scale .5s var(--ease) .7s; }
  .js .vz-ae-flow .vz-ae-flow-won { transition: color .7s var(--ease) .75s; }
  .js .vz-ae-flow .vz-ae-flow-with { transition: opacity .7s var(--ease) .6s; }
  .js .vz-ae-flow .vz-ae-flow-steps::before,
  .js .vz-ae-flow .vz-ae-flow-steps::after,
  .js .vz-ae-flow .vz-ae-flow-back-label { transition: opacity .7s var(--ease) 1s; }

  .js .vz-ae-flow:not(.is-in) .vz-ae-flow-core { opacity: 0; filter: blur(6px); }
  .js .vz-ae-flow-step:not(.is-in)::after { clip-path: inset(0 0 100% 0); }
  .js .vz-ae-flow-step:not(.is-in)::before { clip-path: inset(0 0 100% 0); }
  .js .vz-ae-flow-step:not(.is-in) .vz-ae-flow-node { opacity: 0; transform: scale(.9); }
  .js .vz-ae-flow-step:not(.is-in) :is(.vz-ae-flow-h, .vz-ae-flow-d) { opacity: 0; transform: translateY(10px); }
  .js .vz-ae-flow-step:not(.is-in) .vz-ae-flow-won::before { scale: 0; }
  .js .vz-ae-flow-step:not(.is-in) .vz-ae-flow-won { color: transparent; }
  .js .vz-ae-flow-step:not(.is-in) .vz-ae-flow-with { opacity: 0; }
  /* :has に対応しないブラウザでは、この指定ごと無視されて最初から見える（隠れたままにはならない） */
  .js .vz-ae-flow-steps:has(> .vz-ae-flow-step:last-child:not(.is-in))::before,
  .js .vz-ae-flow-steps:has(> .vz-ae-flow-step:last-child:not(.is-in))::after,
  .js .vz-ae-flow-cycle:has(.vz-ae-flow-step:last-child:not(.is-in)) .vz-ae-flow-back-label { opacity: 0; }
}


/* ---------- 最近の仕事（.vz-ae-week）：曜日の格子は使わず、横線を上下2本 ----------
   上の線＝ひとつの案件：商談の前 → 商談の場 → 受注（塗りの点）。受注の先は破線になり、右端の矢じりに「次の段階へ」。
   下の線＝別の案件：受注の点より右（12列の9列目）から始まる短い線。上の線とは縦に大きく離し、線の始まりに小さく「別の案件」。
   場面は白抜きの丸＋線画、その下に場面名と一文。お客様の言葉は吹き出しだけに置く（吹き出しは「物」として描く線画。角は丸めない）。
   1024px以上は横、1023px以下は縦（背骨は左端から24px、文字は64pxから） */
.vz-ae-week {
  --vz-n: 64px;                                        /* 場面の丸の直径 */
  --vz-say: 60px;                                      /* 上の線の上に、吹き出しを置く高さ */
  --vz-u: calc(var(--vz-say) + var(--vz-n) / 2);      /* 上の線の高さ（案件の上端から） */
  --vz-b: 136px;                                       /* 下の案件の上端（上の線から十分に離す） */
  --vz-pair: 76px;                                     /* 下の案件の、重なる吹き出しを置く高さ */
  --vz-l: calc(var(--vz-pair) + var(--vz-n) / 2);     /* 下の線の高さ（下の案件の吹き出しの上端から） */
  --vz-say-line: var(--faint);                         /* 吹き出しの線：図の補助線と同じ --faint（言葉の文字を主役にする） */
  margin-top: clamp(40px, 5vw, 64px);
}
.vz-ae-week-board { display: grid; grid-template-columns: var(--grid); column-gap: var(--col-gap); }
.vz-ae-week-deal { position: relative; grid-row: 1; }
/* 上の案件：12列いっぱい。受注の点は8列目の中央 */
.vz-ae-week-deal--a {
  grid-column: 1 / -1; padding-top: var(--vz-say);
  --vz-xw: calc(7 * (100% + var(--col-gap)) / 12 + (100% - 11 * var(--col-gap)) / 24);
}
/* 下の案件：9〜12列。上の線（--vz-u）の下に、はっきり間を空けて置く */
.vz-ae-week-deal--b { grid-column: 9 / -1; padding-top: calc(var(--vz-b) + var(--vz-pair)); }

.vz-ae-week-scenes { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: var(--grid); column-gap: var(--col-gap); }
.vz-ae-week-scene { position: relative; }
.vz-ae-week-scenes > .vz-ae-week-scene:nth-child(1) { grid-column: 1 / 5; }
.vz-ae-week-scenes > .vz-ae-week-scene:nth-child(2) { grid-column: 5 / 8; }
.vz-ae-week-scene--build { margin-left: calc((100% + var(--col-gap)) / 4); }   /* 下の案件の2列目（全体の10列目）から */

/* 場面の丸：白抜き＋1px の --ink の枠。中の線画は 20px・線 1.25px */
.vz-ae-week-node {
  position: relative; z-index: 1;
  width: var(--vz-n); height: var(--vz-n);
  display: grid; place-items: center;
  border: 1px solid var(--ink); border-radius: 50%;
  background: var(--white); color: var(--ink);
}
.vz-ae-week-node svg { width: 20px; height: 20px; overflow: visible; stroke-width: 1.25; }
.vz-ae-week-node svg * { vector-effect: non-scaling-stroke; }

.vz-ae-week-h {
  margin-top: 20px;
  font-size: clamp(1.125rem, 1rem + .35vw, 1.25rem); font-weight: 400; line-height: 1.5;
  color: var(--ink); font-feature-settings: "palt";
}
.vz-ae-week-d {
  margin-top: 8px; max-width: 24em;
  font-size: 14.5px; line-height: 1.75; color: var(--text);
  word-break: auto-phrase; text-wrap: pretty;
}
.vz-ae-week-ph { display: inline-block; max-width: 100%; }  /* 文節のまとまり（途中で折り返さない） */

/* 線：上の案件の実線（時間の軸）は --faint、受注の先の破線は --muted（4px／5px）。下の案件の線も --faint */
.vz-ae-week-rail,
.vz-ae-week-tail { position: absolute; display: block; height: 1px; pointer-events: none; }
.vz-ae-week-deal--a .vz-ae-week-rail { top: var(--vz-u); left: calc(var(--vz-n) / 2); width: calc(var(--vz-xw) - var(--vz-n) / 2); background: var(--faint); }
.vz-ae-week-tail {
  top: var(--vz-u); left: var(--vz-xw); right: 0;
  background: repeating-linear-gradient(to right, var(--muted) 0 4px, transparent 4px 9px);
}
/* 右端の矢じり（7px のくの字） */
.vz-ae-week-tail::after {
  content: ""; position: absolute; right: 1.5px; top: -3px; width: 7px; height: 7px;
  border-top: 1px solid var(--muted); border-right: 1px solid var(--muted); transform: rotate(45deg);
}
.vz-ae-week-deal--b .vz-ae-week-rail { top: calc(var(--vz-b) + var(--vz-l)); left: 0; right: 0; background: var(--faint); }

/* 受注：線の上の 7px の点（塗り）と、その下に「受注」 */
.vz-ae-week-won {
  position: absolute; left: var(--vz-xw); top: var(--vz-u); z-index: 1;
  padding-top: 14px; transform: translateX(-50%);
  font-size: 15.5px; font-weight: 500; line-height: 1.5; color: var(--ink); white-space: nowrap;
}
.vz-ae-week-won::before {
  content: ""; position: absolute; left: 50%; top: -3px; margin-left: -3.5px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink);
}
/* 線に添える小さなラベル（次の段階へ／別の案件） */
.vz-ae-week-next,
.vz-ae-week-other {
  position: absolute;
  font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: .04em; color: var(--muted); white-space: nowrap;
}
.vz-ae-week-next { right: 0; top: calc(var(--vz-u) - 30px); }
/* 「別の案件」は線の始まりの下に置く（上は重なる吹き出しの尾があり、その言葉の主に見えないように） */
.vz-ae-week-other { left: 0; top: calc(var(--vz-b) + var(--vz-l) + 10px); }

/* 吹き出し：1px の線の四角（角は丸めない）と、下向きの小さな尾（腕 6px のくの字の形）。中の文字はお客様の言葉（名前と同じ 15.5px・500） */
.vz-ae-week-say,
.vz-ae-week-pair-text {
  font-size: 15.5px; font-weight: 500; line-height: 1.5; color: var(--ink); white-space: nowrap;
}
.vz-ae-week-say,
.vz-ae-week-pair-l,
.vz-ae-week-pair-r { border: 1px solid var(--vz-say-line); }
.vz-ae-week-say { position: relative; width: max-content; padding: 5px 12px 6px; }
/* 尾：線の四角の下辺に、背景色の小さな四角（45度）を重ねて切り欠き、右と下の辺だけを描く */
.vz-ae-week-say::after,
.vz-ae-week-pair-l::after,
.vz-ae-week-pair-r::after {
  content: ""; position: absolute; bottom: -5px; width: 9px; height: 9px;
  border-right: 1px solid var(--vz-say-line); border-bottom: 1px solid var(--vz-say-line);
  background: var(--white); transform: rotate(45deg);
}
/* 商談の場：丸の上に、小さな吹き出し（丸の中心の上に置き、尾は丸へ向く） */
.vz-ae-week-scene--meet > .vz-ae-week-say { position: absolute; left: calc(var(--vz-n) / 2); top: -14px; transform: translate(-50%, -100%); }
.vz-ae-week-scene--meet > .vz-ae-week-say::after { left: calc(50% - 5px); }
/* 導入が決まった案件で：左右にずれた2つの吹き出しが重なり、重なった部分に言葉を1回だけ置く（丸の中心の上）。
   左の吹き出しの尾は左端、右の吹き出しの尾は右端（＝お客様側と当社側の両方から出ている） */
.vz-ae-week-pair {
  --vz-pair-dx: 24px; --vz-pair-dy: 8px;       /* 2つの吹き出しのずれ */
  position: absolute; left: calc(var(--vz-n) / 2); top: -14px; transform: translate(-50%, -100%);
  width: max-content;
  padding: calc(var(--vz-pair-dy) + 5px) calc(var(--vz-pair-dx) + 12px) calc(var(--vz-pair-dy) + 6px);
}
.vz-ae-week-pair-l,
.vz-ae-week-pair-r { position: absolute; }
.vz-ae-week-pair-l { left: 0; right: var(--vz-pair-dx); top: 0; bottom: var(--vz-pair-dy); }
.vz-ae-week-pair-r { left: var(--vz-pair-dx); right: 0; top: var(--vz-pair-dy); bottom: 0; }
.vz-ae-week-pair-l::after { left: 6px; }
.vz-ae-week-pair-r::after { right: 6px; }
.vz-ae-week-pair-text { position: relative; }

.vz-ae-week-note { margin-top: 28px; font-size: 13px; line-height: 1.9; color: var(--muted); }

/* ---- 1023px以下：縦に並べる。上の案件（商談の前 → 商談の場 → 受注 → 破線で次の段階へ）、間を空けて、別の案件 ----
   背骨は左端から24px（48px の丸の中心）、文字は64pxから。吹き出しは見出しの上に置く */
@media (max-width: 1023px) {
  .vz-ae-week { --vz-n: 48px; }
  .vz-ae-week-board { display: block; }
  .vz-ae-week-deal--a { padding-top: 0; }
  .vz-ae-week-deal--b { padding-top: 0; margin-top: 56px; }
  .vz-ae-week-scenes { display: block; position: relative; }
  .vz-ae-week-scene,
  .vz-ae-week-scene--build {
    display: grid; grid-template-columns: var(--vz-n) minmax(0, 1fr); column-gap: 16px;
    grid-template-areas: ". say" "node head" ". desc";
    margin-left: 0; padding-bottom: 32px;
  }
  .vz-ae-week-scene--build { padding-bottom: 0; }
  .vz-ae-week-node { grid-area: node; align-self: center; }
  .vz-ae-week-h { grid-area: head; align-self: center; margin-top: 0; }
  .vz-ae-week-d { grid-area: desc; }
  .vz-ae-week-scene--meet > .vz-ae-week-say,
  .vz-ae-week-pair { grid-area: say; position: relative; left: auto; top: auto; transform: none; margin-bottom: 16px; justify-self: start; }
  .vz-ae-week-scene--meet > .vz-ae-week-say::after { left: 16px; }
  /* 上の案件の背骨：最初の丸の中心から、受注の点まで（実線）→ 受注の先は破線で「次の段階へ」 */
  .vz-ae-week-rail, .vz-ae-week-tail { display: none; }
  .vz-ae-week-scenes::before {
    content: ""; position: absolute; left: calc(var(--vz-n) / 2); top: calc(var(--vz-n) / 2); bottom: 0; width: 1px;
    background: var(--faint); clip-path: inset(0);
  }
  .vz-ae-week-won {
    position: relative; left: auto; top: auto; transform: none;
    display: flex; align-items: center; min-height: 48px; padding: 0 0 0 calc(var(--vz-n) + 16px);
  }
  .vz-ae-week-won::before { left: calc(var(--vz-n) / 2 - 3px); top: calc(50% - 3.5px); margin: 0; z-index: 1; }
  .vz-ae-week-won::after {
    content: ""; position: absolute; left: calc(var(--vz-n) / 2); top: 0; height: 50%; width: 1px; background: var(--faint);
  }
  .vz-ae-week-next {
    position: relative; right: auto; top: auto;
    padding: 30px 0 0 calc(var(--vz-n) + 16px);
  }
  .vz-ae-week-next::before {
    content: ""; position: absolute; left: calc(var(--vz-n) / 2); top: -24px; height: 64px; width: 1px;
    background: repeating-linear-gradient(to bottom, var(--muted) 0 4px, transparent 4px 9px);
    clip-path: inset(0);
  }
  .vz-ae-week-next::after {
    content: ""; position: absolute; left: calc(var(--vz-n) / 2 - 3px); top: 33px; width: 7px; height: 7px;
    border-right: 1px solid var(--muted); border-bottom: 1px solid var(--muted); transform: rotate(45deg);
  }
  /* 下の案件：「別の案件」の高さから背骨が始まり、場面の文の下まで */
  .vz-ae-week-other { position: relative; left: auto; top: auto; padding-left: calc(var(--vz-n) + 16px); margin-bottom: 20px; }
  .vz-ae-week-deal--b .vz-ae-week-rail {
    display: block; left: calc(var(--vz-n) / 2); right: auto; top: 10px; bottom: 0; width: 1px; height: auto;
    clip-path: inset(0);
  }
}
/* とても狭い画面：重なる吹き出しが収まらないときは、文字の大きさで折り返す */
@media (max-width: 359px) {
  .vz-ae-week-pair { max-width: 100%; }
  .vz-ae-week-pair-text { white-space: normal; }
}

/* ---------- 登場の動き（続く動きは入れない）。動きを減らす設定・JSなしでは、最初から完成形 ----------
   1024px以上：図（figure）が画面に入ったら、上の線が左から引かれ、届いた順に丸・場面名・文、吹き出し、受注の点、
   破線と「次の段階へ」→ 別の案件（ラベル・線・丸・文・重なる吹き出し）の順に現れる（is-in から 2.4 秒以内） */
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  .js .vz-ae-week :is(.vz-ae-week-rail, .vz-ae-week-tail) { clip-path: inset(0); transition: clip-path .9s var(--ease) var(--vz-d, 0s); }
  .js .vz-ae-week .vz-ae-week-tail { transition-duration: .7s; }
  .js .vz-ae-week .vz-ae-week-node { transition: opacity .7s var(--ease) var(--vz-d, 0s), transform .7s var(--ease) var(--vz-d, 0s); }
  .js .vz-ae-week :is(.vz-ae-week-h, .vz-ae-week-d, .vz-ae-week-say, .vz-ae-week-pair-l, .vz-ae-week-pair-r, .vz-ae-week-pair-text, .vz-ae-week-next, .vz-ae-week-other) {
    transition: opacity .7s var(--ease) var(--vz-d, 0s), translate .7s var(--ease) var(--vz-d, 0s);
  }
  .js .vz-ae-week .vz-ae-week-won { transition: color .7s var(--ease) 1s; }
  .js .vz-ae-week .vz-ae-week-won::before { transition: scale .5s var(--ease) .95s; }
  .js .vz-ae-week .vz-ae-week-deal--a .vz-ae-week-rail { --vz-d: 0s; }
  .js .vz-ae-week .vz-ae-week-scene:nth-child(1) .vz-ae-week-node { --vz-d: .05s; }
  .js .vz-ae-week .vz-ae-week-scene:nth-child(1) .vz-ae-week-h { --vz-d: .15s; }
  .js .vz-ae-week .vz-ae-week-scene:nth-child(1) .vz-ae-week-d { --vz-d: .25s; }
  .js .vz-ae-week .vz-ae-week-scene--meet .vz-ae-week-node { --vz-d: .4s; }
  .js .vz-ae-week .vz-ae-week-scene--meet .vz-ae-week-h { --vz-d: .5s; }
  .js .vz-ae-week .vz-ae-week-scene--meet .vz-ae-week-d { --vz-d: .6s; }
  .js .vz-ae-week .vz-ae-week-scene--meet .vz-ae-week-say { --vz-d: .8s; }
  .js .vz-ae-week .vz-ae-week-tail { --vz-d: 1.05s; }
  .js .vz-ae-week .vz-ae-week-next { --vz-d: 1.55s; }
  .js .vz-ae-week .vz-ae-week-other { --vz-d: 1.2s; }
  .js .vz-ae-week .vz-ae-week-deal--b .vz-ae-week-rail { --vz-d: 1.25s; }
  .js .vz-ae-week .vz-ae-week-scene--build .vz-ae-week-node { --vz-d: 1.4s; }
  .js .vz-ae-week .vz-ae-week-scene--build .vz-ae-week-h { --vz-d: 1.5s; }
  .js .vz-ae-week .vz-ae-week-scene--build .vz-ae-week-d { --vz-d: 1.6s; }
  .js .vz-ae-week .vz-ae-week-pair-l { --vz-d: 1.55s; }
  .js .vz-ae-week .vz-ae-week-pair-r { --vz-d: 1.65s; }
  .js .vz-ae-week .vz-ae-week-pair-text { --vz-d: 1.75s; }

  .js .vz-ae-week:not(.is-in) :is(.vz-ae-week-rail, .vz-ae-week-tail) { clip-path: inset(0 100% 0 0); }
  .js .vz-ae-week:not(.is-in) .vz-ae-week-node { opacity: 0; transform: scale(.9); }
  .js .vz-ae-week:not(.is-in) :is(.vz-ae-week-h, .vz-ae-week-d, .vz-ae-week-say, .vz-ae-week-pair-l, .vz-ae-week-pair-r, .vz-ae-week-pair-text, .vz-ae-week-next, .vz-ae-week-other) { opacity: 0; translate: 0 10px; }
  .js .vz-ae-week:not(.is-in) .vz-ae-week-won { color: transparent; }
  .js .vz-ae-week:not(.is-in) .vz-ae-week-won::before { scale: 0; }
}
/* 1023px以下：2つの案件（class "viz"）が、それぞれ画面に入ったら現れる。背骨は上から引かれる */
@media (prefers-reduced-motion: no-preference) and (max-width: 1023px) {
  .js .vz-ae-week :is(.vz-ae-week-scenes::before, .vz-ae-week-next::before, .vz-ae-week-deal--b .vz-ae-week-rail) {
    transition: clip-path .9s var(--ease) var(--vz-d, 0s);
  }
  .js .vz-ae-week .vz-ae-week-scenes::before { transition: clip-path .9s var(--ease) .1s; }
  .js .vz-ae-week .vz-ae-week-next::before { transition: clip-path .7s var(--ease) .95s; }
  .js .vz-ae-week .vz-ae-week-deal--b .vz-ae-week-rail { transition: clip-path .9s var(--ease) .1s; }
  .js .vz-ae-week .vz-ae-week-node { transition: opacity .7s var(--ease) var(--vz-d, 0s), transform .7s var(--ease) var(--vz-d, 0s); }
  .js .vz-ae-week :is(.vz-ae-week-h, .vz-ae-week-d, .vz-ae-week-say, .vz-ae-week-pair-l, .vz-ae-week-pair-r, .vz-ae-week-pair-text, .vz-ae-week-next, .vz-ae-week-other) {
    transition: opacity .7s var(--ease) var(--vz-d, 0s), translate .7s var(--ease) var(--vz-d, 0s);
  }
  .js .vz-ae-week .vz-ae-week-won { transition: color .7s var(--ease) .85s; }
  .js .vz-ae-week .vz-ae-week-won::before { transition: scale .5s var(--ease) .8s; }
  .js .vz-ae-week .vz-ae-week-next::after { transition: opacity .5s var(--ease) 1.4s; }
  .js .vz-ae-week .vz-ae-week-scene:nth-child(1) .vz-ae-week-node { --vz-d: .05s; }
  .js .vz-ae-week .vz-ae-week-scene:nth-child(1) .vz-ae-week-h { --vz-d: .15s; }
  .js .vz-ae-week .vz-ae-week-scene:nth-child(1) .vz-ae-week-d { --vz-d: .25s; }
  .js .vz-ae-week .vz-ae-week-scene--meet .vz-ae-week-say { --vz-d: .3s; }
  .js .vz-ae-week .vz-ae-week-scene--meet .vz-ae-week-node { --vz-d: .4s; }
  .js .vz-ae-week .vz-ae-week-scene--meet .vz-ae-week-h { --vz-d: .5s; }
  .js .vz-ae-week .vz-ae-week-scene--meet .vz-ae-week-d { --vz-d: .6s; }
  .js .vz-ae-week .vz-ae-week-next { --vz-d: 1.2s; }
  .js .vz-ae-week .vz-ae-week-other { --vz-d: 0s; }
  .js .vz-ae-week .vz-ae-week-pair-l { --vz-d: .25s; }
  .js .vz-ae-week .vz-ae-week-pair-r { --vz-d: .35s; }
  .js .vz-ae-week .vz-ae-week-pair-text { --vz-d: .45s; }
  .js .vz-ae-week .vz-ae-week-scene--build .vz-ae-week-node { --vz-d: .45s; }
  .js .vz-ae-week .vz-ae-week-scene--build .vz-ae-week-h { --vz-d: .55s; }
  .js .vz-ae-week .vz-ae-week-scene--build .vz-ae-week-d { --vz-d: .65s; }

  .js .vz-ae-week-deal:not(.is-in) :is(.vz-ae-week-scenes, .vz-ae-week-next)::before,
  .js .vz-ae-week-deal--b:not(.is-in) .vz-ae-week-rail { clip-path: inset(0 0 100% 0); }
  .js .vz-ae-week-deal:not(.is-in) .vz-ae-week-node { opacity: 0; transform: scale(.9); }
  .js .vz-ae-week-deal:not(.is-in) :is(.vz-ae-week-h, .vz-ae-week-d, .vz-ae-week-say, .vz-ae-week-pair-l, .vz-ae-week-pair-r, .vz-ae-week-pair-text, .vz-ae-week-next, .vz-ae-week-other) { opacity: 0; translate: 0 10px; }
  .js .vz-ae-week-deal:not(.is-in) .vz-ae-week-won { color: transparent; }
  .js .vz-ae-week-deal:not(.is-in) .vz-ae-week-won::before { scale: 0; }
  .js .vz-ae-week-deal:not(.is-in) .vz-ae-week-next::after { opacity: 0; }
}

/* =========================================================
   Account Executive ページの図（部品 g2）：一緒に働く人（.vz-ae-people）・仕事の道具と環境（.vz-ae-env）・社員の言葉（.vz-ae-quote）
   部品のHTMLは tools/job_parts/account-executive/people.html・env.html・quote.html。
   クラス名はすべて vz-ae- で始まり、PEページの図（vz-people・vz-env など）とは重ならない。

   描き方の決まり（PEページの描き直し版と同じ）
   ・点は 7px（--ink）、線は 1px（主の線は --line-strong、時間の軸は --faint）、流れる点は --ink の 55%（2px／14px）
   ・中央の職種名は、白抜き＋1px の --ink の枠の四角。塗りの四角は Formula AI だけ（このページでは「仕事の道具と環境」の②の1か所）
   ・文字はすべてHTML。段は 名前（18→20px）／中身（14.5px・--text）／ラベル（13px・--muted）／線の先の言葉（15.5px・太さ500・--ink）／本文（15.5px・--text）
   ・色は変数だけ。明暗の両方で反転する

   動きの約束
   ・隠す指定は @media (prefers-reduced-motion: no-preference) の中の .js … :not(.is-in) だけ（JSなし・動きを減らす設定では最初から完成形）
   ・登場は is-in から 2.4 秒以内に出し終える。続く動きは1つの図に1つだけ（画面の外では .viz の is-paused で止まる）
   ・「動きを止める」（html[data-motion="off"]）の間は、流れる点を出さない（動きを減らす設定と同じ完成形）
   ========================================================= */


/* ---------- 一緒に働く人（.vz-ae-people）：左にお客様の4者、右に当社の2者（1024px以上）／お客様 → 中央 → 当社 の順に縦へ（1023px以下） ----------
   PEページの「一緒に働く人」と同じ語り口：中央は白抜きの四角（1px の枠）。曲線は各人の名前の行の点に届き、点から下へ細い縦線を垂らして札をまとめる。
   線はすべて同じ 1px（太さで意味を付けない。主役の考えは「社員の言葉」に任せる）。丸と線画のアイコンは使わない。
   1024px以上は、左を同じ高さの4段にし、右の2者を2段目と3段目に置く。中央の四角は、上から1段目と4段目の名前の行のちょうど中間
   （＝右の2者の名前の行の中間）にくるので、左右の曲線が上下で同じ形になる */
.vz-ae-people {
  --vz-ae-people-pad: clamp(24px, 2.4vw, 32px);                 /* 各人の上下の余白 */
  --vz-ae-people-reach: clamp(56px, 12vw - 64px, 112px);       /* 中央の四角から、各人の点までの横幅（曲線の長さ） */
  --vz-ae-people-gap: 24px;                                     /* 点（縦線）から文字まで */
  --vz-ae-people-nfs: clamp(1.125rem, 1rem + .35vw, 1.25rem);   /* 名前の文字（18→20px） */
  --vz-ae-people-nl: calc(var(--vz-ae-people-nfs) * .75);       /* 名前の1行目の中心（各人のかたまりの上端から） */
  --vz-ae-people-ny: calc(var(--vz-ae-people-pad) + var(--vz-ae-people-nl));   /* 名前の行の中心（段の上端から） */
  position: relative;
  margin-top: clamp(32px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: repeat(4, 1fr) auto;   /* 4段は同じ高さ（左の4者のうち、いちばん高い人に合わせる）。5段目は人数のラベル */
}

/* 置き場所：左の列にお客様の4者と人数、右の列の2段目・3段目に当社の2者。区画の名前は、各列の最初の人と同じ段の上端に */
.vz-ae-people-side--cust { grid-column: 1; grid-row: 1; }
.vz-ae-people-p--c1 { grid-column: 1; grid-row: 1; }
.vz-ae-people-p--c2 { grid-column: 1; grid-row: 2; --vz-ae-people-i: 1; }
.vz-ae-people-p--c3 { grid-column: 1; grid-row: 3; --vz-ae-people-i: 2; }
.vz-ae-people-p--c4 { grid-column: 1; grid-row: 4; --vz-ae-people-i: 3; }
.vz-ae-people-count { grid-column: 1; grid-row: 5; }
.vz-ae-people-hub { grid-column: 2; grid-row: 1 / 5; }
.vz-ae-people-side--ours { grid-column: 3; grid-row: 2; }
.vz-ae-people-p--o1 { grid-column: 3; grid-row: 2; --vz-ae-people-i: 1; }
.vz-ae-people-p--o2 { grid-column: 3; grid-row: 3; --vz-ae-people-i: 2; }

/* 区画の名前（お客様／当社）：最初の人の名前の 10px 上に、文字の側の端をそろえて置く */
.vz-ae-people-side {
  align-self: start; margin-top: calc(var(--vz-ae-people-pad) - 30px);
  font-size: 13px; font-weight: 500; line-height: 1.5; letter-spacing: .06em;
  color: var(--muted); white-space: nowrap;
}
.vz-ae-people-side--cust { justify-self: end; padding-right: var(--vz-ae-people-gap); }
.vz-ae-people-side--ours { justify-self: start; padding-left: var(--vz-ae-people-gap); }

/* 人数のラベル：お客様の列の下に、文字の側の端をそろえて */
.vz-ae-people-count {
  justify-self: end; padding-right: var(--vz-ae-people-gap); text-align: right;
  font-size: 13px; line-height: 1.7; letter-spacing: .04em; color: var(--muted);
}

/* 中央：4段の高さいっぱい。四角は、1段目の名前の行から 37.5%（＝4段のうち1.5段分）下に、上下の中心を合わせて置く */
.vz-ae-people-hub {
  position: relative;
  display: grid; grid-template-rows: calc(37.5% + var(--vz-ae-people-ny)) auto 1fr;
  padding-inline: var(--vz-ae-people-reach);
}
/* 中央の四角：白抜き＋1px の --ink の枠（PEページの中央と同じ大きさ。大きくしない）。職種名は1行で、下に小さく役目を添える */
.vz-ae-people-core {
  grid-row: 2; translate: 0 -50%;
  position: relative; z-index: 1;
  padding: 14px 22px;
  border: 1px solid var(--ink); background: var(--white);
  text-align: center;
}
.vz-ae-people-core-name { font-size: 17px; font-weight: 500; line-height: 1.4; letter-spacing: .04em; color: var(--ink); white-space: nowrap; }
.vz-ae-people-core-sub { margin-top: 2px; font-size: 13px; line-height: 1.5; letter-spacing: .04em; color: var(--muted); white-space: nowrap; }

/* 曲線：左は1段目〜4段目の名前の行（4本）、右は2段目と3段目の名前の行（2本）。どちらも箱の上下の真ん中（50）が中央の四角の辺 */
.vz-ae-people-wire { position: absolute; width: var(--vz-ae-people-reach); }
.vz-ae-people-wire--l { left: 0; top: var(--vz-ae-people-ny); height: 75%; }
.vz-ae-people-wire--r { right: 0; top: calc(25% + var(--vz-ae-people-ny)); height: 25%; }
.vz-ae-people-wire svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vz-ae-people-wire path { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.vz-ae-people-base path { stroke: var(--line-strong); }
.vz-ae-people-flow { display: none; }

/* 各人：段の上から余白を置いて並べる（名前の行が --vz-ae-people-ny にくる） */
.vz-ae-people-p {
  --vz-ae-people-i: 0;      /* 現れる順（動きのずらしに使う） */
  position: relative; align-self: start;
  margin-block: var(--vz-ae-people-pad);
}
/* 左（お客様）は文字を右揃えにし、点と縦線を右端に。右（当社）は左端に */
.vz-ae-people-p:is(.vz-ae-people-p--c1, .vz-ae-people-p--c2, .vz-ae-people-p--c3, .vz-ae-people-p--c4) {
  justify-self: end; padding-right: var(--vz-ae-people-gap); text-align: right;
}
.vz-ae-people-p:is(.vz-ae-people-p--o1, .vz-ae-people-p--o2) { justify-self: start; padding-left: var(--vz-ae-people-gap); }
/* 右の2者は下の余白を付けない（段の高さは左の4者だけで決め、FDE の説明の1行の分だけ段が高くならないようにする） */
.vz-ae-people-p:is(.vz-ae-people-p--o1, .vz-ae-people-p--o2) { margin-bottom: 0; }
/* 縦線：名前の行の点から、最後の札まで（--line-strong の 1px） */
.vz-ae-people-p::before {
  content: ""; position: absolute; top: var(--vz-ae-people-nl); bottom: 0; width: 1px;
  background: var(--line-strong);
}
/* 線が届く点：7px。名前の行の中心に */
.vz-ae-people-p::after {
  content: ""; position: absolute; top: var(--vz-ae-people-nl);
  width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--ink);
}
.vz-ae-people-p:is(.vz-ae-people-p--c1, .vz-ae-people-p--c2, .vz-ae-people-p--c3, .vz-ae-people-p--c4)::before { right: 0; }
.vz-ae-people-p:is(.vz-ae-people-p--c1, .vz-ae-people-p--c2, .vz-ae-people-p--c3, .vz-ae-people-p--c4)::after { right: -3px; }
.vz-ae-people-p:is(.vz-ae-people-p--o1, .vz-ae-people-p--o2)::before { left: 0; }
.vz-ae-people-p:is(.vz-ae-people-p--o1, .vz-ae-people-p--o2)::after { left: -3px; }

.vz-ae-people-body { min-width: 0; max-width: 22em; }
.vz-ae-people-name {
  font-size: var(--vz-ae-people-nfs); font-weight: 400; line-height: 1.5;
  color: var(--ink); font-feature-settings: "palt";
}
.vz-ae-people-sub {
  display: block; margin-top: 2px;
  font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: .04em;
  color: var(--muted); white-space: nowrap;
}
/* 札：やりとりの中身なので本文の色（--text） */
.vz-ae-people-tags { margin-top: 8px; display: grid; gap: 4px; }
.vz-ae-people-tags li { font-size: 14.5px; line-height: 1.75; color: var(--text); }
/* 文節：入る幅では1行、狭い幅でだけ文節の切れ目で折り返す */
.vz-ae-people-ph { display: inline-block; }

/* 1023px以下：お客様の4者 → 人数 → 中央の四角 → 当社の2者 の順に縦へ。左の縦線（背骨。左端から24px）で順につなぎ、点は各人の名前の行に。
   背骨は、最初の人（最初の窓口の方）の点から始まり、中央の四角の後ろを通って、最後の人（当社の経営・エンジニア）の点で止まる */
@media (max-width: 1023px) {
  .vz-ae-people { display: block; }
  .vz-ae-people-side,
  .vz-ae-people-count,
  .vz-ae-people-p,
  .vz-ae-people-p:is(.vz-ae-people-p--c1, .vz-ae-people-p--c2, .vz-ae-people-p--c3, .vz-ae-people-p--c4, .vz-ae-people-p--o1, .vz-ae-people-p--o2) {
    position: relative; justify-self: auto; margin: 0; padding: var(--vz-ae-people-pad) 0 0 48px; text-align: left;
  }
  /* 区画の名前のすぐ下の人は、名前の 10px 上に区画の名前がくるよう、上の余白を詰める */
  .vz-ae-people-side { padding-top: 0; }
  .vz-ae-people-side--ours { padding-top: var(--vz-ae-people-pad); }
  .vz-ae-people-p:is(.vz-ae-people-p--c1, .vz-ae-people-p--o1) { padding-top: 10px; }
  .vz-ae-people-count { padding-top: 16px; }

  /* 背骨：各かたまりの上端から下端まで */
  .vz-ae-people-p::before,
  .vz-ae-people-p:is(.vz-ae-people-p--c1, .vz-ae-people-p--c2, .vz-ae-people-p--c3, .vz-ae-people-p--c4, .vz-ae-people-p--o1, .vz-ae-people-p--o2)::before,
  .vz-ae-people-count::before,
  .vz-ae-people-hub::before,
  .vz-ae-people-side--ours::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 23.5px; right: auto; width: 1px;
    background: var(--line-strong);
  }
  /* 最初の人は点から下へ、最後の人は上から点まで */
  .vz-ae-people-p.vz-ae-people-p--c1::before { top: calc(10px + var(--vz-ae-people-nl)); }
  .vz-ae-people-p.vz-ae-people-p--o2::before { bottom: auto; height: var(--vz-ae-people-ny); }
  /* 点：名前の行の中心 */
  .vz-ae-people-p::after,
  .vz-ae-people-p:is(.vz-ae-people-p--c1, .vz-ae-people-p--c2, .vz-ae-people-p--c3, .vz-ae-people-p--c4, .vz-ae-people-p--o1, .vz-ae-people-p--o2)::after {
    top: var(--vz-ae-people-ny); left: 20.5px; right: auto;
  }
  .vz-ae-people-p:is(.vz-ae-people-p--c1, .vz-ae-people-p--o1)::after { top: calc(10px + var(--vz-ae-people-nl)); }

  /* 中央：背骨の上に四角を置く（背骨は四角の後ろを通る） */
  .vz-ae-people-hub { position: relative; display: block; padding: var(--vz-ae-people-pad) 0 0; }
  .vz-ae-people-wire { display: none; }
  .vz-ae-people-core { width: fit-content; max-width: 100%; padding: 12px 20px; translate: none; text-align: left; }
}
/* とても狭い画面：職種名が1行に収まるよう、四角の余白と文字を少し詰める */
@media (max-width: 359px) {
  .vz-ae-people-core { padding-inline: 14px; }
  .vz-ae-people-core-name { font-size: 15.5px; letter-spacing: .02em; }
}

/* ---------- 一緒に働く人：動き（動きを減らす設定・JSなしでは、最初から完成形を表示） ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* 続く動き（1つだけ）：線の上を、中央と各人のあいだで点が行き来する（PEページと同じ 10px/秒。2方向を合わせて16px間隔） */
  .vz-ae-people-flow { display: inline; }
  .vz-ae-people-flow path { stroke: var(--ink); stroke-opacity: .55; stroke-dasharray: 2 30; }
  .vz-ae-people-flow--in path { animation: vz-ae-people-flow-in 3.2s linear infinite; }
  .vz-ae-people-flow--out path { stroke-dashoffset: 16; animation: vz-ae-people-flow-out 3.2s linear infinite; }

  /* 1024px以上：中央の四角 → 線が中央から外へ引かれ → 届いた先に点 → 縦線（上から下へ）→ 文字の順（各人は .1s 刻み）。2.4秒以内に出し終える */
  @media (min-width: 1024px) {
    .js .vz-ae-people-core { transition: opacity .7s var(--ease), scale .7s var(--ease); }
    .js .vz-ae-people-wire { clip-path: inset(-4px); transition: clip-path .9s var(--ease) .25s; }
    .js .vz-ae-people-p::after {
      transition: transform .5s var(--ease);
      transition-delay: calc(.95s + var(--vz-ae-people-i) * .1s);
    }
    .js .vz-ae-people-p::before {
      clip-path: inset(0);
      transition: clip-path .9s var(--ease);
      transition-delay: calc(1.05s + var(--vz-ae-people-i) * .1s);
    }
    .js .vz-ae-people-body {
      transition: opacity .7s var(--ease), transform .7s var(--ease);
      transition-delay: calc(1.05s + var(--vz-ae-people-i) * .1s);
    }
    .js .vz-ae-people-side { transition: opacity .7s var(--ease) .95s; }
    .js .vz-ae-people-count { transition: opacity .7s var(--ease) 1.5s; }

    .js .vz-ae-people:not(.is-in) .vz-ae-people-core { opacity: 0; scale: .94; }
    .js .vz-ae-people:not(.is-in) .vz-ae-people-wire--l { clip-path: inset(-4px -4px -4px 100%); }
    .js .vz-ae-people:not(.is-in) .vz-ae-people-wire--r { clip-path: inset(-4px 100% -4px -4px); }
    .js .vz-ae-people:not(.is-in) .vz-ae-people-p::after { transform: scale(0); }
    .js .vz-ae-people:not(.is-in) .vz-ae-people-p::before { clip-path: inset(0 0 100% 0); }
    .js .vz-ae-people:not(.is-in) .vz-ae-people-body { opacity: 0; }
    .js .vz-ae-people:not(.is-in) :is(.vz-ae-people-p--c1, .vz-ae-people-p--c2, .vz-ae-people-p--c3, .vz-ae-people-p--c4) .vz-ae-people-body { transform: translateX(8px); }
    .js .vz-ae-people:not(.is-in) :is(.vz-ae-people-p--o1, .vz-ae-people-p--o2) .vz-ae-people-body { transform: translateX(-8px); }
    .js .vz-ae-people:not(.is-in) :is(.vz-ae-people-side, .vz-ae-people-count) { opacity: 0; }
  }

  /* 1023px以下：各かたまり（class="viz"）が画面に入ったら、背骨が上から引かれ、点・文字の順に現れる */
  @media (max-width: 1023px) {
    /* 続く動き：背骨の上を、点が静かに流れる（PEページと同じ）。各かたまりの背骨に重ねて置く */
    .vz-ae-people-body::before,
    .vz-ae-people-count::after,
    .vz-ae-people-hub::after,
    .vz-ae-people-side--ours::after {
      content: ""; position: absolute; top: 0; bottom: 0; left: 23.5px; width: 1px;
      background: repeating-linear-gradient(to bottom, var(--ink) 0 2px, transparent 2px 16px);
      opacity: .55; animation: vz-ae-people-flow-v 1.6s linear infinite;
    }
    .vz-ae-people-p--c1 .vz-ae-people-body::before { top: calc(10px + var(--vz-ae-people-nl)); }
    .vz-ae-people-p--o2 .vz-ae-people-body::before { bottom: auto; height: var(--vz-ae-people-ny); }

    .js .vz-ae-people-p::before,
    .js .vz-ae-people-body::before,
    .js :is(.vz-ae-people-count, .vz-ae-people-hub, .vz-ae-people-side--ours)::before,
    .js :is(.vz-ae-people-count, .vz-ae-people-hub, .vz-ae-people-side--ours)::after {
      clip-path: inset(0);
      transition: clip-path .9s var(--ease) .2s;
    }
    .js .vz-ae-people-p::after { transition: transform .5s var(--ease) .45s; }
    .js :is(.vz-ae-people-body > *, .vz-ae-people-side, .vz-ae-people-count) { transition: opacity .7s var(--ease) .5s, transform .7s var(--ease) .5s; }
    .js .vz-ae-people-core { transition: opacity .7s var(--ease) .3s, scale .7s var(--ease) .3s; }

    .js .vz-ae-people-p:not(.is-in)::before,
    .js .vz-ae-people-p:not(.is-in) .vz-ae-people-body::before,
    .js :is(.vz-ae-people-count, .vz-ae-people-hub, .vz-ae-people-side--ours):not(.is-in)::before,
    .js :is(.vz-ae-people-count, .vz-ae-people-hub, .vz-ae-people-side--ours):not(.is-in)::after { clip-path: inset(0 0 100% 0); }
    .js .vz-ae-people-p:not(.is-in)::after { transform: scale(0); }
    .js .vz-ae-people-p:not(.is-in) .vz-ae-people-body > *,
    .js :is(.vz-ae-people-side, .vz-ae-people-count):not(.is-in) { opacity: 0; transform: translateY(10px); }
    .js .vz-ae-people-hub:not(.is-in) .vz-ae-people-core { opacity: 0; scale: .94; }
  }
}
@keyframes vz-ae-people-flow-in { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -32; } }
@keyframes vz-ae-people-flow-out { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 48; } }
@keyframes vz-ae-people-flow-v { from { background-position: 0 0; } to { background-position: 0 16px; } }
/* 「動きを止める」の間は、流れる点を出さない（動きを減らす設定と同じ完成形） */
:root[data-motion="off"] .vz-ae-people-flow,
:root[data-motion="off"] :is(.vz-ae-people-body, .vz-ae-people-count, .vz-ae-people-hub, .vz-ae-people-side--ours)::after { display: none; }
:root[data-motion="off"] .vz-ae-people-body::before { display: none; }


/* ---------- 仕事の道具と環境（.vz-ae-env）：3つの区画を横に（1100px以上）／図｜題と説明 の2列を縦に（768〜1099px）／縦に積む（767px以下） ----------
   各区画は 上に1pxの黒い線 → 小さな図 → 題 → 説明。図の高さは3つで同じにし、題の位置を横にそろえる。
   ①と②は同じ3本の高さ（--vz-ae-env-y1・ym・y2）で描く：①は2本が AI の丸に集まって1本になり、②は1本が分かれ目で2本に分かれる */
.vz-ae-env {
  --vz-ae-env-y1: 34px;    /* 上の線の高さ（図の上端から） */
  --vz-ae-env-ym: 72px;    /* 中央の線の高さ */
  --vz-ae-env-y2: 110px;   /* 下の線の高さ */
  --vz-ae-env-h: 148px;    /* 図の高さ（3つで同じ） */
  margin-top: clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(40px, 4vw, 56px); align-items: start;
}
/* 区画：見た目は 図 → 題 → 説明（HTML は 題 → 図 → 説明 の順。読み上げでは題を先に聞かせる） */
.vz-ae-env-item {
  --vz-ae-env-n: 0;        /* 横の並びの順（動きのずらしに使う） */
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "fig" "title" "text";
  padding-top: 28px; border-top: 1px solid var(--ink);
}
.vz-ae-env-item--fork { --vz-ae-env-n: 1; }
.vz-ae-env-item--work { --vz-ae-env-n: 2; }
.vz-ae-env-fig { grid-area: fig; position: relative; height: var(--vz-ae-env-h); }
.vz-ae-env-title {
  grid-area: title; margin-top: 32px;
  font-size: clamp(1.125rem, 1rem + .35vw, 1.25rem); font-weight: 400; line-height: 1.5;
  color: var(--ink); font-feature-settings: "palt";
}
/* 説明：読ませたい本文なので本文の色（--text） */
.vz-ae-env-text { grid-area: text; margin-top: 10px; max-width: 36em; font-size: 15.5px; line-height: 1.95; color: var(--text); }
/* 折り返しは HTML の <wbr>（文節の切れ目）だけで行う（「10:00〜｜15:00」のように、語の途中で切れないように） */
.vz-ae-env .vz-ae-env-text { word-break: keep-all; overflow-wrap: anywhere; text-spacing-trim: trim-start; }   /* 行頭に来た「（」は半分の幅に */
.vz-ae-env-nw { white-space: nowrap; }

/* 図の中の共通の部品 */
.vz-ae-env-fig p { margin: 0; }
.vz-ae-env-lbl { font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
.vz-ae-env-fig svg { position: absolute; display: block; max-width: none; overflow: visible; }
.vz-ae-env-ln path { fill: none; stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vz-ae-env-flow { display: none; }
.vz-ae-env-ph { display: inline-block; }

/* ① AIに任せられることは、AIに ---------------------------------------------
   左の2つ（記録・情報の整理）の点 → 曲線で AI の丸へ → 1本の線 → 点と「人と向き合う時間」 */
.vz-ae-env-ai {
  --vz-ae-env-inw: 80px;                                /* 左の2つの言葉の欄の幅（右揃え） */
  --vz-ae-env-dx: calc(var(--vz-ae-env-inw) + 14px);    /* 始まりの点の中心（＝曲線の始まり） */
}
.vz-ae-env-ai-in li {
  position: absolute; left: 0; width: var(--vz-ae-env-inw); translate: 0 -50%;
  text-align: right; font-size: 14.5px; line-height: 1.5; color: var(--text); white-space: nowrap;
}
.vz-ae-env-ai-in1 { top: var(--vz-ae-env-y1); }
.vz-ae-env-ai-in2 { top: var(--vz-ae-env-y2); }
.vz-ae-env-ai-in li::after {
  content: ""; position: absolute; top: 50%; left: calc(var(--vz-ae-env-dx) - 3.5px);
  width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--ink);
}
.vz-ae-env-ai-merge {
  left: var(--vz-ae-env-dx); top: var(--vz-ae-env-y1);
  width: 40px; height: calc(var(--vz-ae-env-y2) - var(--vz-ae-env-y1));
}
/* AI：白抜きの丸（1px の --ink の枠）。中に「AI」 */
.vz-ae-env-ai-node {
  position: absolute; z-index: 1;
  left: calc(var(--vz-ae-env-dx) + 40px); top: var(--vz-ae-env-ym);
  width: 44px; height: 44px; margin-top: -22px;
  display: grid; place-items: center;
  border: 1px solid var(--ink); border-radius: 50%; background: var(--white);
  font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: .04em; color: var(--ink);
}
/* AI から右へ出る1本の線と、端の点 */
.vz-ae-env-ai-out {
  position: absolute; left: calc(var(--vz-ae-env-dx) + 84px); right: 3.5px;
  top: calc(var(--vz-ae-env-ym) - .5px); height: 1px; background: var(--line-strong);
}
.vz-ae-env-ai-out::after {
  content: ""; position: absolute; right: -3.5px; top: 50%;
  width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--ink);
}
.vz-ae-env-ai-out-flow { position: absolute; inset: 0; display: none; }
/* 人と向き合う時間：線の端の上に、右端をそろえて */
.vz-ae-env-ai-res {
  position: absolute; right: 0; top: calc(var(--vz-ae-env-ym) - 10px); translate: 0 -100%;
  font-size: 15.5px; font-weight: 500; line-height: 1.5; color: var(--ink); white-space: nowrap;
}

/* ② 動くデモと診断 ---------------------------------------------------------
   塗りの四角「Formula AI」→ 線（上に「FDEと」）→ 分かれ目の点（下に「案件ごとに選ぶ」）→ 曲線で上下へ → 点と 部門／中身 */
.vz-ae-env-fork {
  --vz-ae-env-srcw: 96px;    /* Formula AI の四角の幅 */
  --vz-ae-env-fx: 160px;     /* 分かれ目の点の中心 */
}
/* Formula AI：塗りの四角（--ink の地に、地の色の文字。このページで塗りの四角はここだけ） */
.vz-ae-env-fork-src {
  position: absolute; z-index: 1; left: 0; top: var(--vz-ae-env-ym); width: var(--vz-ae-env-srcw);
  translate: 0 -50%; padding: 6px 0; text-align: center;
  background: var(--ink); color: var(--white);
  font-size: 13px; font-weight: 500; line-height: 1.5; letter-spacing: .04em; white-space: nowrap;
}
.vz-ae-env-fork-main {
  position: absolute; left: var(--vz-ae-env-srcw); width: calc(var(--vz-ae-env-fx) - var(--vz-ae-env-srcw));
  top: calc(var(--vz-ae-env-ym) - .5px); height: 1px; background: var(--line-strong);
}
/* 分かれ目の点 */
.vz-ae-env-fork-main::after {
  content: ""; position: absolute; right: -3.5px; top: 50%;
  width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--ink);
}
/* 「FDEと」は線の上（四角の右から 12px）、「案件ごとに選ぶ」は分かれ目の点の下（右端を点にそろえ、四角の下端より下に） */
.vz-ae-env-fork-with { position: absolute; left: calc(var(--vz-ae-env-srcw) + 12px); top: calc(var(--vz-ae-env-ym) - 8px); translate: 0 -100%; }
.vz-ae-env-fork-choose { position: absolute; left: calc(var(--vz-ae-env-fx) + 3.5px); top: calc(var(--vz-ae-env-ym) + 24px); translate: -100% 0; }
.vz-ae-env-fork-split {
  left: var(--vz-ae-env-fx); top: var(--vz-ae-env-y1);
  width: 32px; height: calc(var(--vz-ae-env-y2) - var(--vz-ae-env-y1));
}
/* 線の先：点と、上に部門（ラベル）、下に中身（点の高さ）。中身は、入らない幅では文節の切れ目で2行に */
.vz-ae-env-fork-ends { position: absolute; left: calc(var(--vz-ae-env-fx) + 32px); right: 0; top: 0; }
.vz-ae-env-fork-end {
  position: absolute; left: 0; right: 0; padding-left: 14px;
  top: calc(var(--vz-ae-env-y1) - 19.5px - 11.625px);   /* 部門の1行（13px×1.5）と、中身の1行の半分（15.5px×1.5÷2）だけ上から */
}
.vz-ae-env-fork-end--2 { top: calc(var(--vz-ae-env-y2) - 19.5px - 11.625px); }
.vz-ae-env-fork-end::before {
  content: ""; position: absolute; left: -3.5px; top: calc(19.5px + 11.625px - 3.5px);
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink);
}
.vz-ae-env-fork-end dt { font-size: 13px; line-height: 1.5; letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
.vz-ae-env-fork-end dd { margin: 0; font-size: 15.5px; font-weight: 500; line-height: 1.5; color: var(--ink); }

/* ③ 働き方 ----------------------------------------------------------------
   上：場所（ラベル）と、5つの四角のうち4つに点（曜日名は付けない）＋「週4日出社」。
   下：フレックスタイム制（ラベル）と、1日の帯（1時間ごとの目盛り）。コアタイム 10:00〜15:00 を --ink で濃くする（PEページと同じ形） */
.vz-ae-env-work-place { position: absolute; left: 0; top: 0; }
.vz-ae-env-work-week { position: absolute; left: 0; top: 26px; display: flex; align-items: center; gap: 14px; }
.vz-ae-env-days { display: flex; gap: 6px; }
.vz-ae-env-days i { position: relative; display: block; width: 15px; height: 15px; border: 1px solid var(--muted); }   /* 枠は白抜きの点と同じ --muted（印のない四角も、暗い画面で見えるように） */
.vz-ae-env-days i.is-on::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--ink);
}
.vz-ae-env-days i:nth-child(1) { --vz-ae-env-k: 0; }
.vz-ae-env-days i:nth-child(2) { --vz-ae-env-k: 1; }
.vz-ae-env-days i:nth-child(3) { --vz-ae-env-k: 2; }
.vz-ae-env-days i:nth-child(4) { --vz-ae-env-k: 3; }
.vz-ae-env-days i:nth-child(5) { --vz-ae-env-k: 4; }
.vz-ae-env-work-days { font-size: 15.5px; font-weight: 500; line-height: 1.5; color: var(--ink); white-space: nowrap; }
.vz-ae-env-work-flex { position: absolute; left: 0; top: 62px; }
/* 横線＝1日（時間の軸）。目盛りは1時間ごと */
.vz-ae-env-day { position: absolute; left: 0; right: 0; top: 116px; height: 1px; background: var(--faint); }
.vz-ae-env-day::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 5px;
  background: repeating-linear-gradient(to right, var(--line-strong) 0 1px, transparent 1px calc(100% / 24));
}
.vz-ae-env-core { position: absolute; top: 0; height: 1px; left: calc(100% * 10 / 24); width: calc(100% * 5 / 24); margin: 0; }
/* 濃くする範囲（--ink）：横線と両端の短い縦線を1枚で描く */
.vz-ae-env-core::before {
  content: ""; position: absolute; left: 0; right: 0; top: -5px; height: 11px;
  background:
    linear-gradient(var(--ink), var(--ink)) 0 5px / 100% 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 0 / 1px 100% no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 0 / 1px 100% no-repeat;
  clip-path: inset(0);
}
.vz-ae-env-core-name {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: .04em; white-space: nowrap; color: var(--muted);
}
.vz-ae-env-core-time { position: absolute; left: 0; right: 0; top: 8px; display: flex; justify-content: space-between; }
.vz-ae-env-core-time > span:first-child { transform: translateX(-50%); }
.vz-ae-env-core-time > span:last-child { transform: translateX(50%); }
.vz-ae-env-core-time > span {
  font-family: var(--font-mono); font-size: 13px; line-height: 1.5; letter-spacing: .04em; white-space: nowrap; color: var(--muted);
}
.vz-ae-env-core-time > .vz-ae-env-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; transform: none;
}

/* とても狭い画面（359px以下）：②の四角と線を少し詰めて、「現行理解・」が図の幅に収まるようにする */
@media (max-width: 359px) {
  .vz-ae-env-fork { --vz-ae-env-srcw: 88px; --vz-ae-env-fx: 146px; }
}
/* 1099px以下：区画を縦に積む */
@media (max-width: 1099px) {
  .vz-ae-env { grid-template-columns: minmax(0, 1fr); row-gap: clamp(48px, 6vw, 64px); }
  .vz-ae-env-fig { max-width: 420px; }
}
/* 768〜1099px：各区画を「図｜題と説明」の2列に（題の1行目を、図の上端にそろえる） */
@media (min-width: 768px) and (max-width: 1099px) {
  .vz-ae-env-item {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 56px);
    grid-template-areas: "fig title" "fig text"; grid-template-rows: auto 1fr;
  }
  .vz-ae-env-title { margin-top: -6px; }
}

/* ---------- 仕事の道具と環境：動き（各区画に class "viz"。画面に入った区画から、図 → 題 → 説明の順に現れる。2.4秒以内） ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* 続く動き（①だけ）：AI へ入る線と、AI から出る線の上を、点が流れる（.spec-lines-flow と同じ 2px／14px・1.6秒） */
  .vz-ae-env-flow { display: inline; }
  .vz-ae-env-flow path { fill: none; stroke: var(--ink); stroke-opacity: .55; stroke-width: 1; stroke-dasharray: 2 14; vector-effect: non-scaling-stroke; animation: vz-ae-env-flow 1.6s linear infinite; }
  .vz-ae-env-ai-out-flow {
    display: block; opacity: .55;
    background: repeating-linear-gradient(to right, var(--ink) 0 2px, transparent 2px 16px);
    animation: vz-ae-env-flow-h 1.6s linear infinite;
  }

  .js .vz-ae-env-item { --vz-ae-env-d: calc(var(--vz-ae-env-n) * .1s); }
  /* 線は clip-path で左から引く（none とは補間されないので、引き終わりも inset で書く） */
  .js :is(.vz-ae-env-ai-merge, .vz-ae-env-ai-out, .vz-ae-env-fork-main, .vz-ae-env-fork-split, .vz-ae-env-day) { clip-path: inset(-4px); transition: clip-path .9s var(--ease) calc(var(--vz-ae-env-d) + var(--t, 0s)); }
  /* 1日の帯は、上の「コアタイム」と下の時刻まで切り抜かないよう、上下左右に 48px 広く取る */
  .js .vz-ae-env-day { clip-path: inset(-48px); }
  .js :is(.vz-ae-env-ai-in li, .vz-ae-env-ai-res, .vz-ae-env-fork-with, .vz-ae-env-fork-choose, .vz-ae-env-fork-end, .vz-ae-env-work-place, .vz-ae-env-work-days, .vz-ae-env-work-flex, .vz-ae-env-core-name, .vz-ae-env-core-time) {
    transition: opacity .7s var(--ease) calc(var(--vz-ae-env-d) + var(--t, 0s));
  }
  .js :is(.vz-ae-env-ai-node, .vz-ae-env-fork-src) { transition: opacity .7s var(--ease) calc(var(--vz-ae-env-d) + var(--t, 0s)), scale .7s var(--ease) calc(var(--vz-ae-env-d) + var(--t, 0s)); }
  .js :is(.vz-ae-env-ai-in li, .vz-ae-env-ai-out, .vz-ae-env-fork-main, .vz-ae-env-fork-end, .vz-ae-env-days i)::after,
  .js .vz-ae-env-fork-end::before { transition: transform .5s var(--ease) calc(var(--vz-ae-env-d) + var(--tp, 0s)); }
  .js .vz-ae-env-days i { transition: opacity .5s var(--ease) calc(var(--vz-ae-env-d) + .1s + var(--vz-ae-env-k) * .06s); }
  .js .vz-ae-env-days i.is-on::after { --tp: calc(.45s + var(--vz-ae-env-k) * .08s); }
  .js .vz-ae-env-core::before { transition: clip-path .9s var(--ease) calc(var(--vz-ae-env-d) + 1.15s); }
  .js :is(.vz-ae-env-title, .vz-ae-env-text) { transition: opacity .7s var(--ease) calc(var(--vz-ae-env-d) + var(--t, 0s)), transform .7s var(--ease) calc(var(--vz-ae-env-d) + var(--t, 0s)); }

  /* 順番（is-in からの秒数）：①…言葉 → 点 → 曲線 → AI → 出る線 → 端の点 → 人と向き合う時間 */
  .js .vz-ae-env-ai-in li { --tp: .1s; }
  .js .vz-ae-env-ai-merge { --t: .2s; }
  .js .vz-ae-env-ai-node { --t: .55s; }
  .js .vz-ae-env-ai-out { --t: .75s; --tp: 1.3s; }
  .js .vz-ae-env-ai-res { --t: 1.35s; }
  /* ②…Formula AI → 線 → FDEと → 分かれ目 → 案件ごとに選ぶ → 曲線 → 線の先 */
  .js .vz-ae-env-fork-main { --t: .2s; --tp: .75s; }
  .js .vz-ae-env-fork-with { --t: .4s; }
  .js .vz-ae-env-fork-choose { --t: .8s; }
  .js .vz-ae-env-fork-split { --t: .85s; }
  .js .vz-ae-env-fork-end { --t: 1.35s; --tp: 1.3s; }
  /* ③…場所 → 四角（左から）→ 点 → 週4日出社 → フレックスタイム制 → 1日の帯 → コアタイム */
  .js .vz-ae-env-work-days { --t: .75s; }
  .js .vz-ae-env-work-flex { --t: .8s; }
  .js .vz-ae-env-day { --t: .85s; }
  .js :is(.vz-ae-env-core-name, .vz-ae-env-core-time) { --t: 1.45s; }
  /* 題と説明は、図が出始めてから */
  .js .vz-ae-env-title { --t: .3s; }
  .js .vz-ae-env-text { --t: .4s; }

  .js .vz-ae-env-item:not(.is-in) :is(.vz-ae-env-ai-merge, .vz-ae-env-ai-out, .vz-ae-env-fork-main, .vz-ae-env-fork-split) { clip-path: inset(-4px calc(100% + 4px) -4px -4px); }
  .js .vz-ae-env-item:not(.is-in) .vz-ae-env-day { clip-path: inset(-48px calc(100% + 48px) -48px -48px); }
  .js .vz-ae-env-item:not(.is-in) :is(.vz-ae-env-ai-in li, .vz-ae-env-ai-res, .vz-ae-env-fork-with, .vz-ae-env-fork-choose, .vz-ae-env-fork-end, .vz-ae-env-work-place, .vz-ae-env-work-days, .vz-ae-env-work-flex, .vz-ae-env-core-name, .vz-ae-env-core-time, .vz-ae-env-days i) { opacity: 0; }
  .js .vz-ae-env-item:not(.is-in) :is(.vz-ae-env-ai-node, .vz-ae-env-fork-src) { opacity: 0; scale: .9; }
  .js .vz-ae-env-item:not(.is-in) :is(.vz-ae-env-ai-in li, .vz-ae-env-ai-out, .vz-ae-env-fork-main, .vz-ae-env-fork-end, .vz-ae-env-days i)::after,
  .js .vz-ae-env-item:not(.is-in) .vz-ae-env-fork-end::before { transform: scale(0); }
  .js .vz-ae-env-item:not(.is-in) .vz-ae-env-core::before { clip-path: inset(0 100% 0 0); }
  .js .vz-ae-env-item:not(.is-in) :is(.vz-ae-env-title, .vz-ae-env-text) { opacity: 0; transform: translateY(10px); }
}
@keyframes vz-ae-env-flow { to { stroke-dashoffset: -16; } }
@keyframes vz-ae-env-flow-h { from { background-position: 0 0; } to { background-position: 16px 0; } }
/* 「動きを止める」の間は、流れる点を出さない */
:root[data-motion="off"] :is(.vz-ae-env-flow, .vz-ae-env-ai-out-flow) { display: none; }


/* ---------- 社員の言葉（.vz-ae-quote）：大きな文字だけで見せる。1文節を1行に組み、スクロールに合わせて灰色から濃く満ちる ----------
   トップの「私たちが大切にしていること」（.feature h3）と同じ満ち方：行ごとに、黒と灰色を半分ずつ塗った2倍幅の背景を文字の形に切り抜き、
   背景の位置を灰色の側から黒の側へ動かす（境目は文字1つ分でぼかす）。5行は上から順に、少しずつ重ねて満ちる。
   ・スクロール連動のアニメーションに対応したブラウザ：言葉の上端が画面の下から入ってすぐ満ち始め、言葉の中央が画面の中央に来るまでに満ち切る
   ・main.js が .vz-ae-quote に is-filled を付けたら、黒のまま固定する（上へ戻っても灰色に戻さない。カルチャー3つと同じ。main.js 側の対応が要る）
   ・対応しないブラウザ：main.js が ink-ready を付けたときだけ灰色で待たせ、is-filled で満たす。付かなければ最初から黒
   動きを減らす設定・「動きを止める」で止めている間・JSなし・強制カラー（ハイコントラスト）では、最初から黒一色 */
.vz-ae-quote-text { margin: 0; }
.vz-ae-quote-text p {
  /* 最も長い行（17字）が、1024px以上では1行に収まる大きさ（1440px で約68px、上限68px）。スマホは約30px */
  font-size: clamp(1.75rem, 1rem + 3.6vw, 4.25rem); font-weight: 500; line-height: 1.32; letter-spacing: -0.02em;
  color: var(--ink); font-feature-settings: "palt";
  word-break: keep-all; overflow-wrap: anywhere;
}
/* 1行＝1文節のまとまり。幅は文字の分だけにする（満ちる動きの幅を、文字の幅に合わせるため） */
.vz-ae-quote-line { display: block; width: fit-content; max-width: 100%; }
.vz-ae-quote-line:nth-child(1) { --vz-ae-quote-ln: 0; }
.vz-ae-quote-line:nth-child(2) { --vz-ae-quote-ln: 1; }
.vz-ae-quote-line:nth-child(3) { --vz-ae-quote-ln: 2; }
.vz-ae-quote-line:nth-child(4) { --vz-ae-quote-ln: 3; }
.vz-ae-quote-line:nth-child(5) { --vz-ae-quote-ln: 4; }
/* 1行に収まらない幅では、内側の文節の切れ目でだけ折り返す */
.vz-ae-quote-ph { display: inline-block; }
/* 出典：言葉の下に小さく。短い線を添える（枠や引用符は使わない） */
.vz-ae-quote-cite {
  margin-top: clamp(28px, 3vw, 40px);
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; line-height: 1.5; letter-spacing: .04em; color: var(--muted);
}
.vz-ae-quote-cite::before { content: ""; flex: none; width: 32px; height: 1px; background: var(--line-strong); }

@keyframes vz-ae-quote-fill { to { background-position: 0 0; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
    .vz-ae-quote-text { view-timeline: --vz-ae-quote block; }
    :root.js:not([data-motion="off"]) .vz-ae-quote:not(.is-filled) .vz-ae-quote-line {
      background: linear-gradient(90deg, var(--ink) calc(50% - .5em), var(--k-fade-1) calc(50% + .5em)) 100% 0 / calc(200% + 1em) 100% no-repeat;
      -webkit-background-clip: text; background-clip: text;
      color: transparent;
      animation: vz-ae-quote-fill linear both;
      animation-timeline: --vz-ae-quote;
      /* 1行目は言葉の上端が画面に入ってすぐ（10%）から、5行目は言葉の中央が画面の中央に来るまで（50%）。1行ずつ7%遅らせ、少し重ねる */
      animation-range: cover calc(10% + var(--vz-ae-quote-ln) * 7%) cover calc(22% + var(--vz-ae-quote-ln) * 7%);
    }
    /* スクロールに合わせて動くだけで、自分では動き続けないので、画面外の一時停止（.viz.is-paused）の対象から外す */
    :root.js .vz-ae-quote.viz.is-paused .vz-ae-quote-line { animation-play-state: running !important; }
  }
}
@supports not (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
    :root:not([data-motion="off"]) .vz-ae-quote.ink-ready .vz-ae-quote-line {
      background: linear-gradient(90deg, var(--ink) calc(50% - .5em), var(--k-fade-1) calc(50% + .5em)) 100% 0 / calc(200% + 1em) 100% no-repeat;
      -webkit-background-clip: text; background-clip: text;
      color: transparent;
      transition: background-position 1.2s cubic-bezier(.65, 0, .35, 1) calc(var(--vz-ae-quote-ln) * 300ms);
    }
    :root:not([data-motion="off"]) .vz-ae-quote.ink-ready.is-filled .vz-ae-quote-line { background-position: 0 0; }
  }
}
/* 満ちる途中の言葉を選んだときも、文字が読めるようにする */
.vz-ae-quote ::selection { color: var(--white); background-color: var(--ink); }

/* =========================================================
   Account Executive ページの図：仕事の例①②③（.vz-ae-common）と、面白さと大変さ（.vz-ae-extra）
   部品のHTMLは tools/job_parts/account-executive/common.html・extra.html。
   描き方はPEの図（束B17）と同じ：点7px・線1px（主の線は --line-strong、強調は --ink）・破線4px／5px（--muted）・
   矢じりは高さ7pxの開いたくの字（--muted）・流れる点は --ink の55%（2px／14px）・文字はすべてHTML。色は変数だけ（明暗の両方に対応）。
   動き：画面に入ったときに一度だけ現れる（初期の隠し方は、JSが動き、動きを減らす設定でないときだけ）。
   続く動きは各図に1つまで。画面外ではサイトの .viz.is-paused、「動きを止める」ではサイトの末尾の指定が止める
   ========================================================= */


/* --- 仕事の例①②③（.vz-ae-common） --- */
/* ---------- 3つの例：番号・見出し → 図 → 本文。本文は12列の6列目の頭から（PEの仕事の例と同じ軸） ---------- */
.vz-ae-common { margin-top: clamp(40px, 5vw, 64px); }
.vz-ae-common-ex {
  display: grid; grid-template-columns: var(--grid); column-gap: var(--col-gap);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--line-strong);
}
.vz-ae-common-ex + .vz-ae-common-ex { margin-top: clamp(72px, 9vw, 128px); }
.vz-ae-common-head,
.vz-ae-common-fig { grid-column: 1 / -1; min-width: 0; }

/* 番号・小見出し（PEの仕事の例と同じ値） */
.vz-ae-common-num { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; letter-spacing: 0.1em; color: var(--muted); }
.vz-ae-common-title {
  margin-top: 8px;
  font-size: var(--fs-h3); font-weight: 400; line-height: 1.5;
  color: var(--ink); font-feature-settings: "palt"; word-break: auto-phrase;
}

/* 本文（確定文言）：読ませたい本文なので本文の色（--text）。図との主従は大きさと余白でつける */
.vz-ae-common-body {
  grid-column: 6 / -1; margin-top: 40px; max-width: 36em;
  font-size: 15.5px; line-height: 2; color: var(--text);
}

/* 図：横長（1024px以上）と縦長（1023px以下）を描き分ける。線は画面上で常に 1px、点は常に 7px、人の丸は常に 23px */
.vz-ae-common-fig { margin-top: clamp(40px, 5vw, 72px); }
.vz-ae-common-art { position: relative; width: 100%; }
.vz-ae-common-art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vz-ae-common-art--narrow { display: none; }
.vz-ae-common-art--reach { aspect-ratio: 1200 / 260; margin-bottom: 48px; }   /* 下の余白：図の下に並ぶ名前の分 */
.vz-ae-common-art--demo { aspect-ratio: 1200 / 170; margin-bottom: 96px; }    /* 下の余白：線の下の名前と、伺う中身（2行）の分 */
.vz-ae-common-art--reach-n { aspect-ratio: 360 / 552; margin-bottom: 56px; }
.vz-ae-common-art--demo-n { aspect-ratio: 360 / 506; margin-bottom: 8px; }

/* 線の共通の指定（:where で詳細度を 0 にして、点などの太さを上書きしやすくする） */
:where(.vz-ae-common-art, .vz-ae-common-map) path { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }

.vz-ae-common-ln { stroke: var(--line-strong); }                                     /* 主の線（実際に通った道・時間の線） */
.vz-ae-common-skip { stroke: var(--line-strong); stroke-dasharray: 4 5; }            /* 通らない近道：薄い破線 */
.vz-ae-common-team { stroke: var(--ink); }                                           /* ひとつのチームの輪：強調の線 */
.vz-ae-common-bracket { stroke: var(--muted); }                                      /* 括弧線（デモの前に） */
.vz-ae-common-arrow { stroke: var(--muted); stroke-linecap: round; stroke-linejoin: round; }  /* 矢じり */
.vz-ae-common-flow { stroke: var(--ink); stroke-opacity: .55; stroke-dasharray: 2 14; }       /* 流れる点（.spec-lines-flow と同じ） */
.vz-ae-common-tie { stroke: var(--line-strong); stroke-linejoin: round; }            /* 関係の地図：人と人を結ぶ線 */
.vz-ae-common-tie--soft { stroke: var(--line); }                                     /* 関係の地図：対角の補助線 */
/* デモの画面：線画。縦長では線の上に重なるので、地の色で塗って下の線を隠す */
.vz-ae-common-screen { stroke: var(--ink); stroke-linejoin: round; }
:where(.vz-ae-common-art) .vz-ae-common-screen--fill { fill: var(--white); }
.vz-ae-common-screen-key { stroke: var(--ink); stroke-linecap: round; }
.vz-ae-common-screen-row { stroke: var(--muted); stroke-linecap: round; }

/* 点：長さ0の線を、丸い線端で描く（図が縮んでも直径は変わらない） */
.vz-ae-common-dot { stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }          /* 7px の塗りの点（受注・準備の段階・合意） */
/* 人：--ink の 23px の丸に、地の色の 21px の丸を重ねて 1px の輪にする。当社の人は、中に 7px の点 */
.vz-ae-common-who { stroke: var(--ink); stroke-width: 23; stroke-linecap: round; }
.vz-ae-common-who-in { stroke: var(--white); stroke-width: 21; stroke-linecap: round; }
.vz-ae-common-us { stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }

/* ラベル：--x・--y（図の幅・高さに対する割合）を基準に置く。標準は中央そろえ */
.vz-ae-common-lbl {
  position: absolute; left: var(--x, 50%); top: var(--y, 0%);
  translate: var(--tx, -50%) var(--ty, 0);
  margin: var(--my, 0) 0 0 var(--mx, 0);
  white-space: nowrap; font-feature-settings: "palt";
}
.vz-ae-common-lbl--name,
.vz-ae-common-lbl--key { font-size: 15.5px; font-weight: 500; line-height: 1.5; color: var(--ink); }   /* 段階・人の名前 */
.vz-ae-common-lbl--note { font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0.04em; color: var(--muted); }  /* 印や線に添える字 */
.vz-ae-common-lbl--over { --ty: -100%; --my: calc(-1 * var(--off, 10px)); }   /* 点の上 */
.vz-ae-common-lbl--under { --my: var(--off, 14px); }                         /* 点の下 */
.vz-ae-common-lbl--far { --off: 18px; }                                       /* 人の丸（半径11.5px）の上下 */
.vz-ae-common-lbl--foot { top: calc(100% + 16px); --my: 0px; }               /* 図の下にそろえて並べる名前 */
.vz-ae-common-lbl--start { --tx: 0; }                                         /* 左端を --x に */
.vz-ae-common-lbl--end { --tx: -100%; }                                       /* 右端を --x に */
.vz-ae-common-lbl--at { --tx: -3.5px; }                                       /* 書き出しを点の左端にそろえる */
.vz-ae-common-lbl--side { --tx: 0; --ty: -50%; }                              /* 点の右に、高さの中心をそろえて */
.vz-ae-common-lbl--row { --tx: 0; --my: -11.5px; }                            /* 点の右に、名前の1行目の中心をそろえて（下に中身が続く） */
.vz-ae-common-lbl--vert { --ty: -50%; writing-mode: vertical-rl; letter-spacing: 0.12em; }  /* 縦書き（縦長の図の近道） */
.vz-ae-common-lbl-line { display: block; }
/* 名前の下の中身（伺う：業務・課題・関係者・実現できなかった理由） */
.vz-ae-common-lbl-sub {
  display: block; margin-top: 4px;
  font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0.04em; color: var(--muted);
}

/* お客様の吹き出し：1px の線と、下向きの小さな角（角丸・影・塗りの色は使わない。地の色で下の線を隠す） */
.vz-ae-common-say {
  position: absolute; left: var(--x); top: var(--y);
  translate: -50% -100%; margin-top: -16px;
  padding: 8px 16px;
  border: 1px solid var(--muted); background: var(--white);
  font-size: 15.5px; font-weight: 500; line-height: 1.5; color: var(--ink); white-space: nowrap;
}
.vz-ae-common-say::after {
  content: ""; position: absolute; left: 50%; bottom: -5px;
  width: 9px; height: 9px; margin-left: -4.5px;
  border-right: 1px solid var(--muted); border-bottom: 1px solid var(--muted);
  background: var(--white); transform: rotate(45deg);
}
/* 縦長の図：画面の右上に置き、角は左（画面の方）へ向ける */
.vz-ae-common-say--side { translate: 0 -100%; margin-top: -4px; }
.vz-ae-common-say--side::after {
  left: -5px; bottom: 10px; margin-left: 0;
  border-right: 0; border-left: 1px solid var(--muted);
  transform: rotate(45deg);
}

/* ---------- 例③：左に3つの問い（大きな文字）、右に関係の地図 ---------- */
.vz-ae-common-fig--allies {
  display: grid; grid-template-columns: var(--grid); column-gap: var(--col-gap);
  align-items: center;
}
.vz-ae-common-qs { grid-column: 1 / 8; display: grid; gap: clamp(16px, 1.6vw, 24px); }
.vz-ae-common-q {
  font-size: var(--fs-h2); font-weight: 400; line-height: 1.4; letter-spacing: -0.01em;
  color: var(--ink); font-feature-settings: "palt";
  /* せり上がる文字を、問いの枠の下端で隠す（字面の上下と詰めた文字の左右の分だけ、隠す範囲を広げる） */
  clip-path: inset(-.25em -.2em -.14em -.2em);
}
.vz-ae-common-q-in { display: block; }
.vz-ae-common-map { grid-column: 8 / -1; position: relative; width: 100%; aspect-ratio: 460 / 330; margin-block: 32px; }
.vz-ae-common-map svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* ---------- 1023px以下：縦長の図に切り替える ---------- */
@media (max-width: 1023px) {
  .vz-ae-common-art--wide { display: none; }
  .vz-ae-common-art--narrow { display: block; max-width: 400px; }
  .vz-ae-common-qs { grid-column: 1 / -1; }
  .vz-ae-common-map { grid-column: 1 / -1; max-width: 520px; margin: 56px 0 24px; }
}
/* スマホ：本文は図の下に、画面の幅いっぱいで */
@media (max-width: 767px) {
  .vz-ae-common-ex { display: block; }
  .vz-ae-common-fig--allies { display: block; }
  .vz-ae-common-body { margin-top: 32px; }
}

/* ---------- 動き ---------- */
.vz-ae-common-wipe,
.vz-ae-common-drop { clip-path: inset(-12px); transition: clip-path .9s var(--ease) var(--d, 0s); }
.vz-ae-common-fade { transition: opacity .7s var(--ease) var(--d, 0s); }
.vz-ae-common-rise { transition: opacity .7s var(--ease) var(--d, 0s), transform .7s var(--ease) var(--d, 0s); }
/* 点と人の丸：線の太さ（＝直径）を 0 から広げて現れる（線の太さは拡大縮小では変わらないため） */
.vz-ae-common-pt,
.vz-ae-common-pt > path { transition: stroke-width .5s var(--ease) var(--d, 0s); }
.vz-ae-common-pop,
.vz-ae-common-lift { transition: opacity .7s var(--ease) var(--d, 0s), transform .7s var(--ease) var(--d, 0s); transform-box: fill-box; transform-origin: center bottom; }
.vz-ae-common-draw { transition: stroke-dashoffset 1.1s var(--ease) var(--d, 0s); }
.vz-ae-common-head > *,
.vz-ae-common-body { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.vz-ae-common-head > :nth-child(2) { transition-delay: .1s; }
/* 問い：1つずつ、枠の下からせり上がる（締めの見出しと同じ 1s・170ms ずらし） */
.vz-ae-common-q-in { transition: translate 1s var(--ease) calc(.1s + var(--i, 0) * 170ms); }
.vz-ae-common-q:nth-child(2) { --i: 1; }
.vz-ae-common-q:nth-child(3) { --i: 2; }

@media (prefers-reduced-motion: no-preference) {
  /* 見出し：例（article.viz）が画面に入ったとき。本文：本文（p.viz）が画面に入ったとき */
  .js .vz-ae-common-ex:not(.is-in) .vz-ae-common-head > *,
  .js .vz-ae-common-body:not(.is-in) { opacity: 0; transform: translateY(10px); }
  /* 図（figure.viz）が画面に入ったとき */
  .js .vz-ae-common-fig:not(.is-in) .vz-ae-common-wipe { clip-path: inset(-12px calc(100% + 12px) -12px -12px); }  /* 左から */
  .js .vz-ae-common-fig:not(.is-in) .vz-ae-common-drop { clip-path: inset(-12px -12px calc(100% + 12px) -12px); }  /* 上から */
  .js .vz-ae-common-fig:not(.is-in) .vz-ae-common-fade { opacity: 0; }
  .js .vz-ae-common-fig:not(.is-in) .vz-ae-common-rise { opacity: 0; transform: translateY(8px); }
  .js .vz-ae-common-fig:not(.is-in) :is(.vz-ae-common-pt, .vz-ae-common-pt > path) { stroke-width: 0; }
  .js .vz-ae-common-fig:not(.is-in) .vz-ae-common-pop { opacity: 0; transform: scale(.92); }
  .js .vz-ae-common-fig:not(.is-in) .vz-ae-common-lift { opacity: 0; transform: translateY(10px); }
  .js .vz-ae-common-fig .vz-ae-common-draw { stroke-dasharray: 1 1; }
  .js .vz-ae-common-fig:not(.is-in) .vz-ae-common-draw { stroke-dashoffset: 1; }
  .js .vz-ae-common-fig:not(.is-in) .vz-ae-common-q-in { translate: 0 110%; }

  /* 続く動き（例②だけ）：線の上を、準備からデモ、その先へ点が流れる */
  .vz-ae-common-flow { animation: vz-ae-common-flow 1.6s linear infinite; }
}
@keyframes vz-ae-common-flow { to { stroke-dashoffset: -16; } }


/* --- 面白さと大変さ（.vz-ae-extra） --- */
/* ---------- 左に面白さ3つ、右に大変さ2つ。各項目は 番号・見出し → 絵 → 本文（PEの面白さと大変さと同じ形） ---------- */
.vz-ae-extra {
  --vz-ae-extra-gap: clamp(40px, 6vw, 96px);
  margin-top: clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--vz-ae-extra-gap); align-items: start;
}
/* 列の頭：上に1pxの黒い線 */
.vz-ae-extra-col { position: relative; min-width: 0; padding-top: 18px; border-top: 1px solid var(--ink); }
/* 左右を分ける縦の細線（画面に入ると上から引かれる） */
.vz-ae-extra-col--hard::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(var(--vz-ae-extra-gap) / -2); width: 1px;
  background: var(--line); clip-path: inset(0);
}
/* 列の見出し（面白さ／大変さ） */
.vz-ae-extra-head {
  font-size: var(--fs-h3); font-weight: 400; line-height: 1.5;
  color: var(--ink); font-feature-settings: "palt";
}
/* 1項目：番号と見出し → 絵 → 本文 */
.vz-ae-extra-item {
  display: grid; grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(28px, 3vw, 40px);
}
.vz-ae-extra-item + .vz-ae-extra-item { border-top: 1px solid var(--line-strong); }
.vz-ae-extra-item:last-child { padding-bottom: 0; }
.vz-ae-extra-title {
  margin-top: 0;
  display: flex; align-items: baseline; gap: 14px;
  font-size: clamp(1.125rem, 1rem + .35vw, 1.25rem); font-weight: 400; line-height: 1.5;
  color: var(--ink); font-feature-settings: "palt"; word-break: auto-phrase;
}
.vz-ae-extra-num {
  flex: none; font-family: var(--font-mono); font-size: 12.5px; font-weight: 400; letter-spacing: 0.1em;
  color: var(--muted); transform: translateY(-2px);
}
/* 本文：確定文言。読ませたい本文なので本文の色（--text） */
.vz-ae-extra-text { margin-top: 0; max-width: 36em; font-size: 15.5px; line-height: 2; color: var(--text); }

/* 絵：viewBox の幅 440 に対して、最大で原寸（440px）。線は画面上で常に 1px、点は常に 7px。ラベルはHTMLの文字 */
.vz-ae-extra-art { position: relative; width: 100%; max-width: 440px; aspect-ratio: 440 / 120; margin: 24px 0 44px; }
.vz-ae-extra-art--a1 { aspect-ratio: 440 / 112; }
.vz-ae-extra-art--a3 { aspect-ratio: 440 / 104; margin-bottom: 28px; }   /* 下にラベルがないので詰める */
.vz-ae-extra-art--b1 { margin-bottom: 28px; }
.vz-ae-extra-art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
:where(.vz-ae-extra-art) path { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }

.vz-ae-extra-ln { stroke: var(--line-strong); }                                   /* 主の線 */
.vz-ae-extra-key { stroke: var(--ink); }                                          /* 強調の線（画面・引かれていく線・普通の高さ） */
.vz-ae-extra-row { stroke: var(--muted); stroke-linecap: round; }                 /* 画面の中の行 */
.vz-ae-extra-ghost { stroke: var(--line-strong); stroke-linecap: round; }         /* 吹き出しの中の、まだ形になっていない行 */
.vz-ae-extra-dash { stroke: var(--muted); stroke-dasharray: 4 5; }                /* 破線：思い描くだけの理想・つなぎ */
.vz-ae-extra-sheet { stroke: var(--line-strong); }                                /* 白紙 */
.vz-ae-extra-ground { stroke: var(--line-strong); }                               /* 地面（3人の下だけの短い線） */
.vz-ae-extra-person { stroke: var(--ink); stroke-linecap: round; }                /* 人：頭の丸と肩の線 */
.vz-ae-extra-bubble { stroke: var(--line-strong); }                               /* 形の違う吹き出し */
.vz-ae-extra-arrow { stroke: var(--muted); stroke-linecap: round; }               /* 矢じり */
.vz-ae-extra-flow { stroke: var(--ink); stroke-opacity: .55; stroke-dasharray: 2 14; }   /* 流れる点（.spec-lines-flow と同じ） */
/* 点：長さ0の線を、丸い線端で 7px の点として描く（絵が縮んでも直径は変わらない） */
.vz-ae-extra-dot { stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }

/* ラベル：線や点に添える灰色の小さな字。標準は絵の真下で、--x を中心にする */
.vz-ae-extra-lbl {
  position: absolute; top: calc(100% + 6px); left: var(--x, 50%); translate: var(--tx, -50%) var(--ty, 0);
  font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap;
}
.vz-ae-extra-lbl--start { left: 0; --tx: 0; }                          /* 絵の左端にそろえる */
/* 右端を --x に。左端のラベル（最長で約140px）と重なりそうな幅では、文節で2行に */
.vz-ae-extra-lbl--end { left: auto; right: calc(100% - var(--x, 100%)); --tx: 0; max-width: calc(100% - 152px); white-space: normal; text-align: right; }
.vz-ae-extra-lbl--over { top: calc(var(--y) - 8px); --ty: -100%; }   /* 線の上：--y の位置の 8px 上 */
.vz-ae-extra-lbl--in { top: var(--y); --ty: -50%; }                  /* 吹き出しの中：中心を --x・--y に */

/* 登場の動き（初期の隠し方は下の @media の中だけ） */
.vz-ae-extra-wipe,
.vz-ae-extra-drop { clip-path: inset(-8px); transition: clip-path .9s var(--ease) var(--d, 0s); }
.vz-ae-extra-fade { transition: opacity .7s var(--ease) var(--d, 0s); }
.vz-ae-extra-rise { transition: opacity .7s var(--ease) var(--d, 0s), transform .7s var(--ease) var(--d, 0s); }
.vz-ae-extra-text.vz-ae-extra-rise { --d: .1s; }
.vz-ae-extra-pt { transition: stroke-width .5s var(--ease) var(--d, 0s); }
.vz-ae-extra-draw { transition: stroke-dashoffset 1.1s var(--ease) var(--d, 0s); }
.vz-ae-extra-raise { transition: transform 1s var(--ease) var(--d, 0s), opacity .5s var(--ease) var(--d, 0s); }
.vz-ae-extra-head { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.vz-ae-extra-col--hard .vz-ae-extra-head { transition-delay: .1s; }
.vz-ae-extra-col--hard::before { transition: clip-path .9s var(--ease) .2s; }

@media (prefers-reduced-motion: no-preference) {
  /* 部品全体（.vz-ae-extra）が画面に入ったとき：列の見出しと縦線 */
  .js .vz-ae-extra:not(.is-in) .vz-ae-extra-head { opacity: 0; transform: translateY(10px); }
  .js .vz-ae-extra:not(.is-in) .vz-ae-extra-col--hard::before { clip-path: inset(0 0 100% 0); }
  /* 各項目（li.viz）が画面に入ったとき：その項目の見出し・絵・本文 */
  .js .vz-ae-extra-item:not(.is-in) .vz-ae-extra-rise { opacity: 0; transform: translateY(10px); }
  .js .vz-ae-extra-item:not(.is-in) .vz-ae-extra-wipe { clip-path: inset(-8px calc(100% + 8px) -8px -8px); }  /* 左から */
  .js .vz-ae-extra-item:not(.is-in) .vz-ae-extra-drop { clip-path: inset(-8px -8px calc(100% + 8px) -8px); }  /* 上から */
  .js .vz-ae-extra-item:not(.is-in) .vz-ae-extra-fade { opacity: 0; }
  .js .vz-ae-extra-item:not(.is-in) .vz-ae-extra-pt { stroke-width: 0; }
  .js .vz-ae-extra-item .vz-ae-extra-draw { stroke-dasharray: 1 1; }
  .js .vz-ae-extra-item:not(.is-in) .vz-ae-extra-draw { stroke-dashoffset: 1; }
  /* 普通の線と3人：地面の高さ（絵の座標で 56 下）から、せり上がる */
  .js .vz-ae-extra-item:not(.is-in) .vz-ae-extra-raise { transform: translateY(56px); opacity: 0; }

  /* 続く動き（1つの絵に1つまで）：線の上を点が流れる（.spec-lines-flow と同じ値） */
  .vz-ae-extra-flow { animation: vz-ae-extra-flow 1.6s linear infinite; }
}
@keyframes vz-ae-extra-flow { to { stroke-dashoffset: -16; } }

/* スマホ：面白さ → 大変さ の順に上下へ積む */
@media (max-width: 767px) {
  .vz-ae-extra { grid-template-columns: minmax(0, 1fr); row-gap: 64px; }
  .vz-ae-extra-col--hard::before { display: none; }
  .vz-ae-extra-title { gap: 12px; }
}

/* ---------- 職種ページの図（Lead Forward Deployed Engineer）----------
   部品のHTMLは tools/job_parts/forward-deployed-engineer/*.html（仕事の流れ・ある1週間・一緒に働く人・仕事の道具と環境・仕事の例・面白さと大変さ・社員の言葉）。
   クラス名はすべて vz-fde- で始まり、PE・AEページの図とは重ならない。描き方（点7px・線1px・破線4px／5px・矢じり7px）はPE・AEページと同じ。
   main.js が図（.viz）に、画面に入ったとき is-in を、画面の外では is-paused を付ける。色は変数だけを使い、ダーク／ライトの両方で反転する。
   動きを減らす設定・JSなし・「動きを止める」では、最初から完成形を表示する。
   ※ 仕事の流れは、案件の進み具合（進行中・予定）を見せない。お客様が見ることもあるため、線はすべて実線にする */

/* =========================================================
   Lead FDE ページの図（担当 g1：仕事の流れ .vz-fde-flow-fig／ある1週間 .vz-fde-week-fig）
   部品のHTMLは tools/job_parts/forward-deployed-engineer/flow.html・week.html。クラス名は vz-fde-flow-・vz-fde-week- で始まる
   （旧部品の .vz-fde-flow（PEの .vz-flow に添える印）とは名前が重ならない）。
   描き方は PE・AE の図にそろえる：
   ・点は 7px（白抜き＝1px の --ink の枠＋背景 --white／塗り＝--ink）。線は 1px。主の線（時間の軸）は --faint、添える細い線は --line-strong
   ・破線は 4px／5px（主の線は --muted、細い線は --faint）。矢じりは 7px の開いたくの字（--muted）。丸と線画のアイコンは使わない
   ・文字はすべてHTML。見出し 18→20px／区切りの点の名前 13px・500（--ink）／説明 14.5px／札・注記 13px（--muted）／番号は等幅 12.5px
   ・破線は「まだ起きていない・まだ決まっていない」こと（仕事の流れの予定、1週間の案件B）
   ・登場の動きは .viz に is-in が付いたら始まり、2.4秒以内に出し終える。続く動きは「仕事の流れ」の本線を流れる点1つだけ
     （画面の外では .viz の is-paused で止まる。「動きを止める」・動きを減らす設定・JSなしでは出さない）
   色は変数だけを使い、ダーク／ライトの両方で反転する。動きを減らす設定・JSなしでは、最初から完成形を表示する
   ========================================================= */


/* ---------- 仕事の流れ（.vz-fde-flow-fig）：ある案件の進み方を、横一本の時間の線で ---------- */
.vz-fde-flow-fig { margin-top: clamp(40px, 5vw, 64px); }

/* 文字（どの幅でも共通） */
.vz-fde-flow-h {
  display: flex; align-items: baseline; gap: 12px;
  font-size: clamp(1.125rem, 1rem + .35vw, 1.25rem); font-weight: 400; line-height: 1.5;
  color: var(--ink); font-feature-settings: "palt";
}
.vz-fde-flow-num { flex: none; font-family: var(--font-mono); font-size: 12.5px; font-weight: 400; letter-spacing: .1em; color: var(--muted); }
/* 期間の札：長さだけ（境目の名前は区切りの点に任せる） */
.vz-fde-flow-period { font-size: 13px; line-height: 1.5; letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
/* 区切りの点の名前（受注だけ塗りの点。ほかは白抜き） */
.vz-fde-flow-gate {
  position: relative; z-index: 1;
  font-size: 13px; font-weight: 500; line-height: 1.5; letter-spacing: .04em; color: var(--ink); white-space: nowrap;
}
.vz-fde-flow-gate::before {
  content: ""; position: absolute; left: -3.5px;
  width: 7px; height: 7px; box-sizing: border-box; border-radius: 50%;
  border: 1px solid var(--ink); background: var(--white);
}
.vz-fde-flow-gate--won::before { background: var(--ink); }
/* 括弧線の札：03〜04の上（キックオフから本番稼働まで 約2か月（予定）） */
.vz-fde-flow-span { font-size: 13px; line-height: 1.6; letter-spacing: .04em; color: var(--muted); }
.vz-fde-flow-span-len { color: var(--ink); }
/* 下の細い線の札 */
.vz-fde-flow-base-label { font-size: 13px; line-height: 1.5; letter-spacing: .04em; color: var(--muted); }
/* 各段の説明は読ませたい本文なので、本文の色（--text） */
.vz-fde-flow-d { font-size: 14.5px; line-height: 1.75; color: var(--text); text-wrap: pretty; }
/* 文節のまとまり（途中で折り返さない） */
.vz-fde-flow-ph { display: inline-block; }
.vz-fde-flow-dnum { display: block; margin-bottom: 6px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; letter-spacing: .1em; color: var(--muted); }
.vz-fde-flow-note { font-size: 13px; line-height: 1.9; color: var(--muted); }

/* ---- 1024px以上：横一本の時間の線 ----
   位置は板の幅に対する割合（%）。01〜04は期間の比 1:3:1:1（1単位＝12%）。05は 13%、間を 2.5% 空けて 06 は 87.5% から右端まで。
   行（上から）：括弧線／01・03・05の札／上側の点の名前／線（本線と細い線）／下側の点の名前と細い線の札／02・04・06の札／注記／説明文
   どの札も、その段の始まり（区切りの点の位置）から書き出す。見出しが次の同じ側の札に届きそうな幅では、文節で折り返す */
@media (min-width: 1024px) {
  .vz-fde-flow-board {
    --vz-x1: 12;     /* 提案 */
    --vz-x2: 48;     /* 受注 */
    --vz-x3: 60;     /* 仕様確定 */
    --vz-x4: 72;     /* 本番稼働 */
    --vz-xn: 85;     /* 本線の実線の終わり（＝05の終わり。進み具合は見せない） */
    --vz-x5: 85;     /* 05の終わり：本線をいったん切る */
    --vz-x6: 87.5;   /* 06の短い線の始まり */
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    /* name-b は 48px：細い線の札（下端 27.5px）と、02・04・06の期間の札のあいだを 20px あける（札が02の説明に見えないように） */
    grid-template-rows: [bracket] auto [above] auto [name-a] 40px [line] 14px [name-b] 48px [below] auto [note] auto [desc] auto [desc2] auto;
    column-gap: var(--col-gap);
  }
  .vz-fde-flow-steps,
  .vz-fde-flow-step {
    grid-column: 1 / -1; grid-row: 1 / -1;
    display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid;
  }
  /* 段ごとの書き出し位置（--vz-x）と、札の幅の上限（--vz-w：次の同じ側の札の手前まで） */
  .vz-fde-flow-step:nth-child(1) { --vz-x: 0;    --vz-w: 48;   --vz-t: .05s; }
  .vz-fde-flow-step:nth-child(2) { --vz-x: 12;   --vz-w: 48;   --vz-t: .19s; --vz-nx: 3.5px; }
  .vz-fde-flow-step:nth-child(3) { --vz-x: 48;   --vz-w: 24;   --vz-t: .77s; --vz-nx: 3.5px; }
  .vz-fde-flow-step:nth-child(4) { --vz-x: 60;   --vz-w: 27.5; --vz-t: .96s; --vz-nx: 3.5px; }
  .vz-fde-flow-step:nth-child(5) { --vz-x: 72;   --vz-w: 28;   --vz-t: 1.15s; --vz-gx: 0px; --vz-nx: 3.5px; }
  .vz-fde-flow-step:nth-child(6) { --vz-x: 87.5; --vz-w: 12.5; --vz-t: 1.4s;  --vz-gx: 0px; }

  /* 線（本線・06の短い線・下の細い線・流れる点） */
  .vz-fde-flow-track { grid-row: line; grid-column: 1 / -1; position: relative; display: block; }
  .vz-fde-flow-track > span { position: absolute; height: 1px; }
  .vz-fde-flow-main { top: 3px; left: 0; width: calc(var(--vz-xn) * 1%); background: var(--faint); }
  .vz-fde-flow-main--plan {
    left: calc(var(--vz-xn) * 1%); width: calc((var(--vz-x5) - var(--vz-xn)) * 1%);
    background: repeating-linear-gradient(to right, var(--muted) 0 4px, transparent 4px 9px);
  }
  .vz-fde-flow-next {
    top: 3px; left: calc(var(--vz-x6) * 1%); right: 0;
    background: var(--faint);
  }
  .vz-fde-flow-next::after {
    content: ""; position: absolute; right: 1.5px; top: -3px;
    width: 7px; height: 7px;
    border-top: 1px solid var(--muted); border-right: 1px solid var(--muted);
    transform: rotate(45deg);
  }
  /* 下の細い線：本線の 10px 下を、01の始まりから本番稼働まで（受注の点の真下でも切らない）。本線と同じ位置から破線 */
  .vz-fde-flow-base { top: 13px; left: 0; width: calc(var(--vz-x4) * 1%); background: var(--line-strong); }
  .vz-fde-flow-base--plan {
    left: calc(var(--vz-xn) * 1%); width: calc((var(--vz-x4) - var(--vz-xn)) * 1%);
    background: repeating-linear-gradient(to right, var(--faint) 0 4px, transparent 4px 9px);
  }
  /* 流れる点：本線の上を、01の始まりから05の終わりまで（初めは出さない。下の「登場の動き」で出す） */
  .vz-fde-flow-track > .vz-fde-flow-run {
    top: 0; left: 0; width: calc(var(--vz-x5) * 1%); height: 7px;
    display: none; container-type: inline-size; pointer-events: none;
  }
  .vz-fde-flow-run > span {
    position: absolute; left: -3.5px; top: 0;
    width: 7px; height: 7px; border-radius: 50%; background: var(--ink);
  }

  /* 期間の札＋番号・見出し：01・03・05は上（見出しが外、札が線の側）、02・04・06は下（札が線の側、見出しが外） */
  .vz-fde-flow-label {
    grid-column: 1 / -1; justify-self: start;
    margin-left: calc(var(--vz-x) * 1% - var(--vz-nx, 0px));
    max-width: calc(var(--vz-w) * 1% + var(--vz-nx, 0px) - var(--vz-gx, 32px));
    display: flex; flex-direction: column; gap: 2px;
  }
  .vz-fde-flow-step:nth-child(odd) .vz-fde-flow-label { grid-row: above; align-self: end; }
  .vz-fde-flow-step:nth-child(even) .vz-fde-flow-label { grid-row: below; align-self: start; flex-direction: column-reverse; }

  /* 区切りの点：その点から始まる段の札と反対の側に名前を置く（提案・仕様確定は上、受注・本番稼働は下）。点は本線の上 */
  /* 名前と札は、点の左端から書き出す（点の真下・真上に文字の頭がそろう） */
  .vz-fde-flow-gate { grid-column: 1 / -1; justify-self: start; margin-left: calc(var(--vz-x) * 1% - var(--vz-nx, 0px)); }
  .vz-fde-flow-gate::before { left: 0; }
  .vz-fde-flow-step:nth-child(even) .vz-fde-flow-gate { grid-row: name-a; align-self: end; padding-bottom: 15px; }
  .vz-fde-flow-step:nth-child(even) .vz-fde-flow-gate::before { bottom: -7px; }
  .vz-fde-flow-step:nth-child(odd) .vz-fde-flow-gate { grid-row: name-b; align-self: start; padding-top: 8px; }
  .vz-fde-flow-step:nth-child(odd) .vz-fde-flow-gate::before { top: -14px; }

  /* 下の細い線の札：細い線の始まりの真下（下の02の期間の札とは、name-b の高さで 20px あける） */
  .vz-fde-flow-base-label { grid-row: name-b; grid-column: 1 / -1; justify-self: start; align-self: start; padding-top: 8px; }

  /* 括弧線（03〜04の上）：受注から本番稼働までの幅に、下向きの短い爪 */
  .vz-fde-flow-span {
    grid-row: bracket; grid-column: 1 / -1; justify-self: start;
    position: relative;
    width: calc((var(--vz-x4) - var(--vz-x2)) * 1%); margin: 0 0 22px calc(var(--vz-x2) * 1%);
    padding-bottom: 14px; text-align: center;
  }
  .vz-fde-flow-span::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px;
    border: 1px solid var(--muted); border-bottom: 0;
  }
  .vz-fde-flow-span-len { display: block; font-size: 15.5px; font-weight: 500; letter-spacing: .02em; }

  /* 注記：線の図の直下（説明文の列より上） */
  .vz-fde-flow-note { grid-row: note; grid-column: 1 / -1; margin-top: 40px; max-width: 52em; }

  /* 説明文：図から切り離し、6等分の列に番号順で（各列の上に項目の区切りの線） */
  .vz-fde-flow-d {
    grid-row: desc; margin-top: 44px;
    padding-top: 18px; border-top: 1px solid var(--line-strong);
  }
  .vz-fde-flow-step:nth-child(1) .vz-fde-flow-d { grid-column: 1; }
  .vz-fde-flow-step:nth-child(2) .vz-fde-flow-d { grid-column: 2; }
  .vz-fde-flow-step:nth-child(3) .vz-fde-flow-d { grid-column: 3; }
  .vz-fde-flow-step:nth-child(4) .vz-fde-flow-d { grid-column: 4; }
  .vz-fde-flow-step:nth-child(5) .vz-fde-flow-d { grid-column: 5; }
  .vz-fde-flow-step:nth-child(6) .vz-fde-flow-d { grid-column: 6; }
}
/* 1024〜1199px：説明文は3列×2段（6列では1行が9字前後になり、読みにくいため）。
   06の札が1行に収まるよう、05の終わりと06の始まりを少し左へ寄せる（05・06の長さは期間を表さない）。
   見出しは 18px（文字の大きさの下限）にそろえ、03「見て、直して、また見る」を折り返さずに1行で置く
   （折り返すと03だけが01・05より1行上に飛び出し、括弧線に詰まる。1024pxで05の札まで約25px あく） */
@media (min-width: 1024px) and (max-width: 1199px) {
  .vz-fde-flow-board { --vz-x5: 83; --vz-x6: 85.5; }
  .vz-fde-flow-h { font-size: 1.125rem; }
  .vz-fde-flow-step:nth-child(3) { --vz-gx: 22px; }
  .vz-fde-flow-step:nth-child(3) .vz-fde-flow-h { white-space: nowrap; }
  .vz-fde-flow-step:nth-child(4) { --vz-w: 25.5; }
  .vz-fde-flow-step:nth-child(6) { --vz-x: 85.5; --vz-w: 14.5; }
  .vz-fde-flow-step:nth-child(1) .vz-fde-flow-d { grid-column: 1 / span 2; }
  .vz-fde-flow-step:nth-child(2) .vz-fde-flow-d { grid-column: 3 / span 2; }
  .vz-fde-flow-step:nth-child(3) .vz-fde-flow-d { grid-column: 5 / span 2; }
  .vz-fde-flow-step:nth-child(4) .vz-fde-flow-d { grid-column: 1 / span 2; grid-row: desc2; margin-top: 32px; }
  .vz-fde-flow-step:nth-child(5) .vz-fde-flow-d { grid-column: 3 / span 2; grid-row: desc2; margin-top: 32px; }
  .vz-fde-flow-step:nth-child(6) .vz-fde-flow-d { grid-column: 5 / span 2; grid-row: desc2; margin-top: 32px; }
}

/* ---- 1023px以下：縦の背骨線（左端から 3.5px）に6段。細い線は背骨の右 10px、括弧線は 24px、文字は 40px から ----
   背骨と細い線は各段の ::before（2本を1つの背景で描く）。03の段の中ほどから破線、細い線は本番稼働（05の頭）で終わる。
   05の下で背骨を切り、間を空けて06の破線と下向きの矢じり。括弧線は 03・04 の段の ::after（受注の点から本番稼働の点まで）。
   細い線の札は図のいちばん上に置き、細い線の上端から折れ線でつなぐ */
@media (max-width: 1023px) {
  .vz-fde-flow-board { display: flex; flex-direction: column; }
  .vz-fde-flow-track { display: none; }
  .vz-fde-flow-dnum { display: none; }

  .vz-fde-flow-base-label { order: -1; position: relative; padding: 0 0 20px 40px; }
  .vz-fde-flow-base-label::before {
    content: ""; position: absolute; left: 13px; top: 9.75px; bottom: 0; width: 20px;
    border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong);
  }

  /* 段の中は、区切りの点 → 括弧線の札（03だけ）→ 期間の札・見出し → 説明 の順 */
  .vz-fde-flow-step { position: relative; display: flex; flex-direction: column; padding: 0 0 36px 40px; }
  .vz-fde-flow-span { order: 1; }
  .vz-fde-flow-label { order: 2; }
  .vz-fde-flow-d { order: 3; }
  .vz-fde-flow-step::before {
    content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 11px;
    background:
      linear-gradient(var(--faint), var(--faint)) left top / 1px 100% no-repeat,
      linear-gradient(var(--line-strong), var(--line-strong)) right top / 1px 100% no-repeat;
  }
  /* 05・06：背骨だけ（細い線は本番稼働で終わる）。進み具合は見せないので、03・04も含めてすべて実線 */
  .vz-fde-flow-step--live::before,
  .vz-fde-flow-step--role::before {
    background: linear-gradient(var(--faint), var(--faint)) left top / 1px 100% no-repeat;
  }
  /* 06：05との間を空け、下向きの矢じりで終える */
  .vz-fde-flow-step--role { margin-top: 20px; padding-bottom: 28px; }
  .vz-fde-flow-step--role::after {
    content: ""; position: absolute; left: 0; bottom: 1.5px;
    width: 7px; height: 7px;
    border-top: 1px solid var(--muted); border-right: 1px solid var(--muted);
    transform: rotate(135deg);
  }
  /* 括弧線：受注の点の高さから本番稼働の点の高さまで（03〜04の文字の左に添える） */
  .vz-fde-flow-step--now::after,
  .vz-fde-flow-step--plan::after {
    content: ""; position: absolute; left: 24px; width: 6px;
    border-left: 1px solid var(--muted);
  }
  .vz-fde-flow-step--now::after { top: 9.75px; bottom: 0; border-top: 1px solid var(--muted); }
  .vz-fde-flow-step--plan::after { top: 0; bottom: -9.75px; border-bottom: 1px solid var(--muted); }

  .vz-fde-flow-gate { margin-bottom: 14px; }
  .vz-fde-flow-gate::before { left: -40px; top: 6.25px; }
  .vz-fde-flow-span { margin: -4px 0 16px; }
  .vz-fde-flow-label { display: flex; flex-direction: column-reverse; gap: 2px; }
  .vz-fde-flow-d { margin-top: 10px; max-width: 40em; }
  .vz-fde-flow-note { margin-top: 12px; }
}

/* ---- 登場の動き（1024px以上）：本線が左から引かれ（全幅 1.6 秒）、線が届いた時刻に区切りの点と札が現れる。
   細い線は本線に少し遅れて、括弧線は03〜04が引かれたあとに。最後に注記と説明文。is-in から 2.4 秒で点が流れ始める ---- */
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  .js .vz-fde-flow-fig .vz-fde-flow-track > span:not(.vz-fde-flow-run) {
    clip-path: inset(-8px -8px -8px 0);
    transition: clip-path var(--vz-d, .8s) linear var(--vz-t0, 0s);
  }
  .js .vz-fde-flow-fig .vz-fde-flow-main { --vz-t0: 0s; --vz-d: .864s; }
  .js .vz-fde-flow-fig .vz-fde-flow-main--plan { --vz-t0: .864s; --vz-d: .496s; }
  .js .vz-fde-flow-fig .vz-fde-flow-next { --vz-t0: 1.4s; --vz-d: .3s; }
  .js .vz-fde-flow-fig .vz-fde-flow-base { --vz-t0: .12s; --vz-d: .864s; }
  .js .vz-fde-flow-fig .vz-fde-flow-base--plan { --vz-t0: .984s; --vz-d: .288s; }

  .js .vz-fde-flow-fig .vz-fde-flow-gate::before { transition: scale .45s var(--ease) var(--vz-t); }
  .js .vz-fde-flow-fig .vz-fde-flow-gate { transition: color .6s var(--ease) calc(var(--vz-t) + .05s); }
  .js .vz-fde-flow-fig .vz-fde-flow-label { transition: opacity .7s var(--ease) calc(var(--vz-t) + .08s), translate .7s var(--ease) calc(var(--vz-t) + .08s); }
  .js .vz-fde-flow-fig .vz-fde-flow-span { transition: opacity .7s var(--ease) 1.25s; }
  .js .vz-fde-flow-fig .vz-fde-flow-span::after { transition: clip-path .5s var(--ease) 1.2s; clip-path: inset(-1px -1px -1px -1px); }
  .js .vz-fde-flow-fig .vz-fde-flow-base-label { transition: opacity .7s var(--ease) .3s; }
  .js .vz-fde-flow-fig .vz-fde-flow-note { transition: opacity .7s var(--ease) 1.55s; }
  .js .vz-fde-flow-fig .vz-fde-flow-d { transition: opacity .7s var(--ease) calc(1.6s + var(--vz-t) * .1); }

  .js .vz-fde-flow-fig:not(.is-in) .vz-fde-flow-track > span:not(.vz-fde-flow-run) { clip-path: inset(-8px 100% -8px 0); }
  .js .vz-fde-flow-fig:not(.is-in) .vz-fde-flow-gate::before { scale: 0; }
  .js .vz-fde-flow-fig:not(.is-in) .vz-fde-flow-gate { color: transparent; }
  .js .vz-fde-flow-fig:not(.is-in) .vz-fde-flow-step:nth-child(odd) .vz-fde-flow-label { opacity: 0; translate: 0 8px; }
  .js .vz-fde-flow-fig:not(.is-in) .vz-fde-flow-step:nth-child(even) .vz-fde-flow-label { opacity: 0; translate: 0 -8px; }
  .js .vz-fde-flow-fig:not(.is-in) :is(.vz-fde-flow-span, .vz-fde-flow-base-label, .vz-fde-flow-note, .vz-fde-flow-d) { opacity: 0; }
  .js .vz-fde-flow-fig:not(.is-in) .vz-fde-flow-span::after { clip-path: inset(-1px 50% -1px 50%); }

  /* 続く動き（1つだけ）：7px の点が 9 秒で本線を01の始まりから05の終わりまで流れる（区切りの点の下をくぐる）。「動きを止める」の間は出さない */
  :root.js:not([data-motion="off"]) .vz-fde-flow-fig.is-in .vz-fde-flow-track > .vz-fde-flow-run { display: block; }
  :root.js:not([data-motion="off"]) .vz-fde-flow-fig.is-in .vz-fde-flow-run > span { animation: vz-fde-flow-run 9s linear 2.4s infinite both; }
}
@keyframes vz-fde-flow-run {
  0% { transform: translateX(0); opacity: 0; }
  4% { opacity: 1; }
  94% { opacity: 1; }
  100% { transform: translateX(100cqw); opacity: 0; }
}
/* 縦に並べたとき：細い線の札が先に現れる。各段（class "viz"）が画面に入ったら、背骨が上から引かれ、点・札・説明の順に現れる */
@media (prefers-reduced-motion: no-preference) and (max-width: 1023px) {
  .js .vz-fde-flow-fig .vz-fde-flow-base-label { transition: opacity .7s var(--ease); }
  .js .vz-fde-flow-fig .vz-fde-flow-base-label::before { transition: clip-path .6s var(--ease) .2s; clip-path: inset(-1px -1px -1px -1px); }
  .js .vz-fde-flow-step::before,
  .js .vz-fde-flow-step::after { transition: clip-path .9s var(--ease) .15s; clip-path: inset(-2px -8px -12px -8px); }
  .js .vz-fde-flow-step .vz-fde-flow-gate::before { transition: scale .45s var(--ease) .05s; }
  .js .vz-fde-flow-step .vz-fde-flow-gate { transition: color .6s var(--ease) .1s; }
  .js .vz-fde-flow-step :is(.vz-fde-flow-label, .vz-fde-flow-span) { transition: opacity .7s var(--ease) .15s, translate .7s var(--ease) .15s; }
  .js .vz-fde-flow-step .vz-fde-flow-d { transition: opacity .7s var(--ease) .25s, translate .7s var(--ease) .25s; }
  .js .vz-fde-flow-fig .vz-fde-flow-note { transition: opacity .7s var(--ease) .2s; }

  .js .vz-fde-flow-fig:not(.is-in) .vz-fde-flow-base-label { opacity: 0; }
  .js .vz-fde-flow-fig:not(.is-in) .vz-fde-flow-base-label::before { clip-path: inset(-1px -1px 100% -1px); }
  .js .vz-fde-flow-step:not(.is-in)::before,
  .js .vz-fde-flow-step:not(.is-in)::after { clip-path: inset(-2px -8px 100% -8px); }
  .js .vz-fde-flow-step:not(.is-in) .vz-fde-flow-gate::before { scale: 0; }
  .js .vz-fde-flow-step:not(.is-in) .vz-fde-flow-gate { color: transparent; }
  .js .vz-fde-flow-step:not(.is-in) :is(.vz-fde-flow-label, .vz-fde-flow-span, .vz-fde-flow-d) { opacity: 0; translate: 0 10px; }
  /* :has に対応しないブラウザでは、この指定ごと無視されて最初から見える */
  .js .vz-fde-flow-board:has(.vz-fde-flow-step:last-child:not(.is-in)) .vz-fde-flow-note { opacity: 0; }
}


/* ---------- ある1週間（.vz-fde-week-fig）：PEの「ある1週間」と同じ板。案件A（実線・月〜木）と案件B（破線・水〜金） ---------- */
.vz-fde-week-fig { margin-top: clamp(40px, 5vw, 64px); }

.vz-fde-week-board {
  --vz-y: 22px;     /* 各段の上端から、線までの高さ */
  --vz-pad: 16px;   /* 曜日の列の内側の余白 */
  display: grid;
  grid-template-columns: 10em repeat(5, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  border-top: 1px solid var(--ink);          /* 表の頭の線 */
  border-bottom: 1px solid var(--line-strong);
}

/* 凡例：左の列に、段ごとの案件名と段階、線の見本。「お客様と会う」の塗りの点は案件Bの下に */
.vz-fde-week-legend { grid-column: 1; grid-row: 2 / 4; display: grid; grid-template-rows: subgrid; }
.vz-fde-week-key { grid-column: 1; position: relative; padding: calc(var(--vz-y) - 12px) 16px 0 34px; }
.vz-fde-week-key--a { grid-row: 1; }
.vz-fde-week-key--b { grid-row: 2; }
.vz-fde-week-key--meet { grid-row: 2; align-self: start; margin-top: calc(var(--vz-y) + 64px); padding-top: 0; }
.vz-fde-week-sample { position: absolute; left: 0; top: var(--vz-y); width: 24px; height: 1px; }
.vz-fde-week-key--a .vz-fde-week-sample { background: var(--faint); }
.vz-fde-week-key--b .vz-fde-week-sample { width: 22px; background: repeating-linear-gradient(to right, var(--muted) 0 4px, transparent 4px 9px); }
.vz-fde-week-keyname { display: block; height: 24px; font-size: 15.5px; font-weight: 500; line-height: 24px; color: var(--ink); white-space: nowrap; }
.vz-fde-week-keystate { display: block; margin-top: 2px; font-size: 13px; line-height: 1.5; letter-spacing: .04em; color: var(--muted); }
.vz-fde-week-key--meet .vz-fde-week-keystate { margin-top: 0; }
.vz-fde-week-key--meet .vz-fde-week-dot { left: 8.5px; top: 6.25px; }

/* 段を横に走る線：案件Aは月曜の左端から木曜の右端まで、案件Bは水曜の左端から金曜の右端まで */
.vz-fde-week-rail {
  align-self: start; position: relative; z-index: 1;
  height: 1px; margin-top: var(--vz-y);
  pointer-events: none;
}
.vz-fde-week-rail--a { grid-row: 2; grid-column: 2 / 6; background: var(--faint); }
.vz-fde-week-rail--b { grid-row: 3; grid-column: 4 / 7; background: repeating-linear-gradient(to right, var(--muted) 0 4px, transparent 4px 9px); }

/* 曜日の列（見出しの行から最後の段まで、左に細い目安線） */
.vz-fde-week-days {
  grid-column: 2 / -1; grid-row: 1 / 4;
  display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid;
}
.vz-fde-week-day {
  --vz-d: 0;
  grid-row: 1 / -1; min-width: 0;
  display: grid; grid-template-rows: subgrid;
  border-left: 1px solid var(--line);
}
.vz-fde-week-day:nth-child(2) { --vz-d: 1; }
.vz-fde-week-day:nth-child(3) { --vz-d: 2; }
.vz-fde-week-day:nth-child(4) { --vz-d: 3; }
.vz-fde-week-day:nth-child(5) { --vz-d: 4; }
.vz-fde-week-dayname {
  grid-row: 1; padding: 18px var(--vz-pad) 0;
  font-size: clamp(1.125rem, 1rem + .35vw, 1.25rem); font-weight: 400; line-height: 1.5;
  color: var(--ink); font-feature-settings: "palt";
}
.vz-fde-week-tasks { grid-row: 2 / -1; display: grid; grid-template-rows: subgrid; }

/* 1つの仕事：段の線の上に行の頭の点（白抜き。お客様と向き合う行は塗り）、その下に文 */
.vz-fde-week-task { position: relative; padding: calc(var(--vz-y) + 18px) var(--vz-pad) clamp(28px, 3vw, 40px); }
.vz-fde-week-task--a { grid-row: 1; }
.vz-fde-week-task--b { grid-row: 2; }
.vz-fde-week-dot {
  position: absolute; z-index: 2;
  left: var(--vz-pad); top: calc(var(--vz-y) - 3px);
  width: 7px; height: 7px; box-sizing: border-box; border-radius: 50%;
  border: 1px solid var(--ink); background: var(--white);
}
.vz-fde-week-task--meet .vz-fde-week-dot,
.vz-fde-week-key--meet .vz-fde-week-dot { background: var(--ink); }
/* 文節のまとまり（途中で折り返さない） */
.vz-fde-week-ph { display: inline-block; }
.vz-fde-week-text {
  display: block;
  font-size: 14.5px; line-height: 1.75; color: var(--text);
  word-break: auto-phrase; overflow-wrap: anywhere; text-wrap: pretty;
}
/* 案件名：1024px以上は行の位置と凡例で分かるので、読み上げ用にだけ残す */
.vz-fde-week-type {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.vz-fde-week-note {
  margin-top: 28px; max-width: 46em;
  font-size: 13px; line-height: 1.9; color: var(--muted);
  text-wrap: pretty;
}

/* ---- 1023px以下：曜日ごとの縦並び。各曜日の中に案件A・Bの行（行の頭に点・実線か破線の短い線・案件名、その右に文） ---- */
@media (max-width: 1023px) {
  .vz-fde-week-board { display: block; border-bottom: 0; }
  .vz-fde-week-rail { display: none; }

  .vz-fde-week-legend { display: grid; gap: 8px; padding: 20px 0 24px; }
  .vz-fde-week-key,
  .vz-fde-week-key--meet { grid-row: auto; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; margin: 0; padding: 0 0 0 40px; }
  .vz-fde-week-key .vz-fde-week-sample { left: 7px; top: 12px; }
  .vz-fde-week-key--meet .vz-fde-week-dot { left: 0; top: 7px; }
  .vz-fde-week-keyname { height: auto; font-size: 14px; line-height: 1.75; }
  .vz-fde-week-keystate { margin: 0; line-height: 1.75; }
  .vz-fde-week-key--meet .vz-fde-week-keystate { color: var(--text); }

  .vz-fde-week-days { display: block; }
  .vz-fde-week-day { display: block; padding-block: 28px; border-left: 0; border-top: 1px solid var(--line-strong); }
  .vz-fde-week-day:last-child { padding-bottom: 0; }
  .vz-fde-week-dayname { padding: 0; }
  .vz-fde-week-tasks { display: block; margin-top: 10px; }
  .vz-fde-week-task { display: grid; grid-template-columns: 84px minmax(0, 1fr); padding: 6px 0; }
  .vz-fde-week-head { position: relative; display: block; height: 25.375px; }
  /* 行の頭：点（0〜7px）、短い線（7〜31px）、案件名（40pxから） */
  .vz-fde-week-head::before {
    content: ""; position: absolute; left: 7px; top: 12.5px; width: 24px; height: 1px;
    background: var(--faint);
  }
  .vz-fde-week-task--b .vz-fde-week-head::before { width: 22px; background: repeating-linear-gradient(to right, var(--muted) 0 4px, transparent 4px 9px); }
  .vz-fde-week-task .vz-fde-week-dot { left: 0; top: 9.5px; }
  .vz-fde-week-type {
    position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: nowrap;
    display: block; padding-left: 40px;
    font-size: 13px; line-height: 25.375px; letter-spacing: .04em; color: var(--muted);
  }
  .vz-fde-week-note { margin-top: 32px; }
}

/* ---- 登場の動き（続く動きは入れない）：板が画面に入ったら、2本の線が曜日の順に左から引かれ（1日＝.32秒）、
   各曜日（.vz-fde-week-day にも viz）は、画面に入ったときに曜日 → 点 → 文の順に現れる ---- */
@media (prefers-reduced-motion: no-preference) {
  .js .vz-fde-week-fig .vz-fde-week-rail { clip-path: inset(-8px -8px -8px 0); transition: clip-path var(--vz-rd) linear var(--vz-rt); }
  .js .vz-fde-week-fig .vz-fde-week-rail--a { --vz-rt: 0s; --vz-rd: 1.28s; }
  .js .vz-fde-week-fig .vz-fde-week-rail--b { --vz-rt: .64s; --vz-rd: .96s; }
  .js .vz-fde-week-fig .vz-fde-week-key { transition: opacity .7s var(--ease) var(--vz-k, 0s), translate .7s var(--ease) var(--vz-k, 0s); }
  .js .vz-fde-week-fig .vz-fde-week-key--b { --vz-k: .1s; }
  .js .vz-fde-week-fig .vz-fde-week-key--meet { --vz-k: .2s; }

  .js .vz-fde-week-day .vz-fde-week-task { --vz-tt: 0s; }
  .js .vz-fde-week-day .vz-fde-week-task--b { --vz-tt: .1s; }
  .js .vz-fde-week-day .vz-fde-week-dayname { transition: opacity .7s var(--ease) calc(.04s + var(--vz-d) * .32s), translate .7s var(--ease) calc(.04s + var(--vz-d) * .32s); }
  .js .vz-fde-week-day .vz-fde-week-dot { transition: scale .5s var(--ease) calc(.08s + var(--vz-d) * .32s + var(--vz-tt)); }
  .js .vz-fde-week-day :is(.vz-fde-week-text, .vz-fde-week-type) { transition: opacity .7s var(--ease) calc(.14s + var(--vz-d) * .32s + var(--vz-tt)), translate .7s var(--ease) calc(.14s + var(--vz-d) * .32s + var(--vz-tt)); }

  .js .vz-fde-week-fig:not(.is-in) .vz-fde-week-rail { clip-path: inset(-8px 100% -8px 0); }
  .js .vz-fde-week-fig:not(.is-in) .vz-fde-week-key { opacity: 0; translate: 0 10px; }
  .js .vz-fde-week-day:not(.is-in) .vz-fde-week-dayname { opacity: 0; translate: -8px 0; }
  .js .vz-fde-week-day:not(.is-in) .vz-fde-week-dot { scale: 0; }
  .js .vz-fde-week-day:not(.is-in) :is(.vz-fde-week-text, .vz-fde-week-type) { opacity: 0; translate: -8px 0; }

  /* 1023px以下：各曜日は画面に入ったときに、曜日 → 1つ目 → 2つ目と .1s ずつ現れる（曜日の順の遅れは使わない） */
  @media (max-width: 1023px) {
    .js .vz-fde-week-day { --vz-d: 0; }
    .js .vz-fde-week-day .vz-fde-week-task { --vz-tt: .1s; }
    .js .vz-fde-week-day .vz-fde-week-task:last-child:not(:first-child) { --vz-tt: .2s; }
    .js .vz-fde-week-day .vz-fde-week-head::before { transition: clip-path .5s var(--ease) calc(.1s + var(--vz-tt)); clip-path: inset(-2px -2px -2px 0); }
    .js .vz-fde-week-day:not(.is-in) .vz-fde-week-head::before { clip-path: inset(-2px 100% -2px 0); }
    .js .vz-fde-week-day:not(.is-in) :is(.vz-fde-week-dayname, .vz-fde-week-text, .vz-fde-week-type) { translate: 0 10px; }
  }
}


/* =========================================================
   Lead FDE ページの図（部品 g2）：一緒に働く人（.vz-fde-people）・仕事の道具と環境（.vz-fde-env-board）・社員の言葉（.vz-fde-quote）
   部品のHTMLは tools/job_parts/forward-deployed-engineer/people.html・env.html・quote.html。
   クラス名はすべて vz-fde-people- ／ vz-fde-env- ／ vz-fde-quote- で始まる（旧部品の .vz-fde-env・.vz-fde-spec などとは重ならない）。

   描き方の決まり（AE・PEページの描き直し版と同じ）
   ・点は 7px（--ink）、線は 1px（主の線は --line-strong、時間の軸は --faint）、流れる点は --ink の 55%（2px／14px）
   ・中央の職種名は、白抜き＋1px の --ink の枠の四角。塗りの四角は Formula AI だけ（このページでは「仕事の道具と環境」の③の1か所）
   ・文字はすべてHTML。段は 名前（18→20px）／中身（14.5px・--text）／ラベル（13px・--muted）／線の先の言葉（15.5px・太さ500・--ink）／本文（15.5px・--text）
   ・色は変数だけ。明暗の両方で反転する

   動きの約束
   ・隠す指定は @media (prefers-reduced-motion: no-preference) の中の .js … :not(.is-in) だけ（JSなし・動きを減らす設定では最初から完成形）
   ・登場は is-in から 2.4 秒以内に出し終える。続く動きは1つの図に1つだけ（画面の外では .viz の is-paused で止まる）
   ・「動きを止める」（html[data-motion="off"]）の間は、流れる点・回る点を出さない（動きを減らす設定と同じ完成形）
   ========================================================= */


/* ---------- 一緒に働く人（.vz-fde-people）：左にお客様の2者、右に当社の3者（1024px以上）／お客様 → 中央 → 当社 の順に縦へ（1023px以下） ----------
   AEページの「一緒に働く人」と同じ語り口：中央は白抜きの四角（1px の枠）。曲線は各人の名前の行の点に届き、点から下へ細い縦線を垂らして札をまとめる。
   1024px以上は、6つの同じ高さの段に、右の3者を 1・3・5段目から、左の2者を 2・4段目から（どちらも2段ずつ）置く。
   中央の四角は、右の真ん中の人の名前の行（3段目）の高さ＝左の2者の名前の行のちょうど中間にくるので、左右の曲線が上下で同じ形になる */
.vz-fde-people {
  --vz-fde-people-pad: clamp(24px, 2.4vw, 32px);                 /* 各人の上下の余白 */
  --vz-fde-people-reach: clamp(56px, 12vw - 64px, 112px);       /* 中央の四角から、各人の点までの横幅（曲線の長さ） */
  --vz-fde-people-gap: 24px;                                     /* 点（縦線）から文字まで */
  --vz-fde-people-nfs: clamp(1.125rem, 1rem + .35vw, 1.25rem);   /* 名前の文字（18→20px） */
  --vz-fde-people-nl: calc(var(--vz-fde-people-nfs) * .75);      /* 名前の1行目の中心（各人のかたまりの上端から） */
  --vz-fde-people-ny: calc(var(--vz-fde-people-pad) + var(--vz-fde-people-nl));   /* 名前の行の中心（段の上端から） */
  position: relative;
  margin-top: clamp(32px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: repeat(6, 1fr);   /* 6段は同じ高さ（各人は2段ずつ使う。いちばん高い人に合わせる） */
}

/* 置き場所：左の列の2・4段目からお客様の2者、6段目に人数。右の列の1・3・5段目から当社の3者。区画の名前は、各列の最初の人と同じ段の上端に */
.vz-fde-people-side--cust { grid-column: 1; grid-row: 2; }
.vz-fde-people-p--c1 { grid-column: 1; grid-row: 2 / span 2; --vz-fde-people-i: 1; }
.vz-fde-people-p--c2 { grid-column: 1; grid-row: 4 / span 2; --vz-fde-people-i: 3; }
.vz-fde-people-count { grid-column: 1; grid-row: 6; }
.vz-fde-people-hub { grid-column: 2; grid-row: 1 / 7; }
.vz-fde-people-side--ours { grid-column: 3; grid-row: 1; }
.vz-fde-people-p--o1 { grid-column: 3; grid-row: 1 / span 2; --vz-fde-people-i: 0; }
.vz-fde-people-p--o2 { grid-column: 3; grid-row: 3 / span 2; --vz-fde-people-i: 2; }
.vz-fde-people-p--o3 { grid-column: 3; grid-row: 5 / span 2; --vz-fde-people-i: 4; }

/* 区画の名前（お客様／当社）：最初の人の名前の 10px 上に、文字の側の端をそろえて置く */
.vz-fde-people-side {
  align-self: start; margin-top: calc(var(--vz-fde-people-pad) - 30px);
  font-size: 13px; font-weight: 500; line-height: 1.5; letter-spacing: .06em;
  color: var(--muted); white-space: nowrap;
}
.vz-fde-people-side--cust { justify-self: end; padding-right: var(--vz-fde-people-gap); }
.vz-fde-people-side--ours { justify-self: start; padding-left: var(--vz-fde-people-gap); }

/* 人数のラベル：お客様の列の下に、文字の側の端をそろえて */
.vz-fde-people-count {
  align-self: start; justify-self: end; padding-right: var(--vz-fde-people-gap); text-align: right;
  font-size: 13px; line-height: 1.7; letter-spacing: .04em; color: var(--muted);
}

/* 中央：6段の高さいっぱい。四角は、1段目の名前の行から 33.333%（＝6段のうち2段分）下に、上下の中心を合わせて置く */
.vz-fde-people-hub {
  position: relative;
  display: grid; grid-template-rows: calc(33.333% + var(--vz-fde-people-ny)) auto 1fr;
  padding-inline: var(--vz-fde-people-reach);
}
/* 中央の四角：白抜き＋1px の --ink の枠（PE・AEページの中央と同じ大きさ。大きくしない） */
.vz-fde-people-core {
  grid-row: 2; translate: 0 -50%;
  position: relative; z-index: 1;
  padding: 14px 22px;
  border: 1px solid var(--ink); background: var(--white);
  text-align: center;
}
.vz-fde-people-core-name { font-size: 17px; font-weight: 500; line-height: 1.4; letter-spacing: .04em; color: var(--ink); white-space: nowrap; }

/* 曲線：左は2段目と4段目の名前の行（2本）、右は1・3・5段目の名前の行（3本。真ん中はまっすぐ）。どちらも箱の上下の真ん中（50）が中央の四角の辺 */
.vz-fde-people-wire { position: absolute; width: var(--vz-fde-people-reach); }
.vz-fde-people-wire--l { left: 0; top: calc(16.667% + var(--vz-fde-people-ny)); height: 33.333%; }
.vz-fde-people-wire--r { right: 0; top: var(--vz-fde-people-ny); height: 66.667%; }
.vz-fde-people-wire svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vz-fde-people-wire path { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.vz-fde-people-base path { stroke: var(--line-strong); }
.vz-fde-people-flow { display: none; }

/* 各人：段の上から余白を置いて並べる（名前の行が --vz-fde-people-ny にくる） */
.vz-fde-people-p {
  --vz-fde-people-i: 0;      /* 現れる順（動きのずらしに使う） */
  position: relative; align-self: start;
  margin-block: var(--vz-fde-people-pad);
}
/* 左（お客様）は文字を右揃えにし、点と縦線を右端に。右（当社）は左端に */
.vz-fde-people-p:is(.vz-fde-people-p--c1, .vz-fde-people-p--c2) {
  justify-self: end; padding-right: var(--vz-fde-people-gap); text-align: right;
}
.vz-fde-people-p:is(.vz-fde-people-p--o1, .vz-fde-people-p--o2, .vz-fde-people-p--o3) { justify-self: start; padding-left: var(--vz-fde-people-gap); }
/* 縦線：名前の行の点から、最後の札まで（--line-strong の 1px） */
.vz-fde-people-p::before {
  content: ""; position: absolute; top: var(--vz-fde-people-nl); bottom: 0; width: 1px;
  background: var(--line-strong);
}
/* 線が届く点：7px。名前の行の中心に */
.vz-fde-people-p::after {
  content: ""; position: absolute; top: var(--vz-fde-people-nl);
  width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--ink);
}
.vz-fde-people-p:is(.vz-fde-people-p--c1, .vz-fde-people-p--c2)::before { right: 0; }
.vz-fde-people-p:is(.vz-fde-people-p--c1, .vz-fde-people-p--c2)::after { right: -3px; }
.vz-fde-people-p:is(.vz-fde-people-p--o1, .vz-fde-people-p--o2, .vz-fde-people-p--o3)::before { left: 0; }
.vz-fde-people-p:is(.vz-fde-people-p--o1, .vz-fde-people-p--o2, .vz-fde-people-p--o3)::after { left: -3px; }

.vz-fde-people-body { min-width: 0; max-width: 22em; }
.vz-fde-people-name {
  font-size: var(--vz-fde-people-nfs); font-weight: 400; line-height: 1.5;
  color: var(--ink); font-feature-settings: "palt";
}
/* 札：やりとりの中身なので本文の色（--text） */
.vz-fde-people-tags { margin-top: 8px; display: grid; gap: 4px; }
.vz-fde-people-tags li { font-size: 14.5px; line-height: 1.75; color: var(--text); }
/* 文節：入る幅では1行、狭い幅でだけ文節の切れ目で折り返す */
.vz-fde-people-ph { display: inline-block; }

/* 1023px以下：お客様の2者 → 人数 → 中央の四角 → 当社の3者 の順に縦へ。左の縦線（背骨。左端から24px）で順につなぎ、点は各人の名前の行に。
   背骨は、最初の人（業務部門のご担当者）の点から始まり、中央の四角の後ろを通って、最後の人（Platformチーム）の点で止まる */
@media (max-width: 1023px) {
  .vz-fde-people { display: block; }
  .vz-fde-people-side,
  .vz-fde-people-count,
  .vz-fde-people-p,
  .vz-fde-people-p:is(.vz-fde-people-p--c1, .vz-fde-people-p--c2, .vz-fde-people-p--o1, .vz-fde-people-p--o2, .vz-fde-people-p--o3) {
    position: relative; justify-self: auto; margin: 0; padding: var(--vz-fde-people-pad) 0 0 48px; text-align: left;
  }
  /* 区画の名前のすぐ下の人は、名前の 10px 上に区画の名前がくるよう、上の余白を詰める */
  .vz-fde-people-side { padding-top: 0; }
  .vz-fde-people-side--ours { padding-top: var(--vz-fde-people-pad); }
  .vz-fde-people-p:is(.vz-fde-people-p--c1, .vz-fde-people-p--o1) { padding-top: 10px; }
  .vz-fde-people-count { padding-top: 16px; }

  /* 背骨：各かたまりの上端から下端まで */
  .vz-fde-people-p::before,
  .vz-fde-people-p:is(.vz-fde-people-p--c1, .vz-fde-people-p--c2, .vz-fde-people-p--o1, .vz-fde-people-p--o2, .vz-fde-people-p--o3)::before,
  .vz-fde-people-count::before,
  .vz-fde-people-hub::before,
  .vz-fde-people-side--ours::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 23.5px; right: auto; width: 1px;
    background: var(--line-strong);
  }
  /* 最初の人は点から下へ、最後の人は上から点まで */
  .vz-fde-people-p.vz-fde-people-p--c1::before { top: calc(10px + var(--vz-fde-people-nl)); }
  .vz-fde-people-p.vz-fde-people-p--o3::before { bottom: auto; height: var(--vz-fde-people-ny); }
  /* 点：名前の行の中心 */
  .vz-fde-people-p::after,
  .vz-fde-people-p:is(.vz-fde-people-p--c1, .vz-fde-people-p--c2, .vz-fde-people-p--o1, .vz-fde-people-p--o2, .vz-fde-people-p--o3)::after {
    top: var(--vz-fde-people-ny); left: 20.5px; right: auto;
  }
  .vz-fde-people-p:is(.vz-fde-people-p--c1, .vz-fde-people-p--o1)::after { top: calc(10px + var(--vz-fde-people-nl)); }

  /* 中央：背骨の上に四角を置く（背骨は四角の後ろを通る） */
  .vz-fde-people-hub { position: relative; display: block; padding: var(--vz-fde-people-pad) 0 0; }
  .vz-fde-people-wire { display: none; }
  .vz-fde-people-core { width: fit-content; max-width: 100%; padding: 12px 20px; translate: none; text-align: left; }
}

/* ---------- 一緒に働く人：動き（動きを減らす設定・JSなしでは、最初から完成形を表示） ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* 続く動き（1つだけ）：線の上を、中央と各人のあいだで点が行き来する（AE・PEページと同じ 10px/秒。2方向を合わせて16px間隔） */
  .vz-fde-people-flow { display: inline; }
  .vz-fde-people-flow path { stroke: var(--ink); stroke-opacity: .55; stroke-dasharray: 2 30; }
  .vz-fde-people-flow--in path { animation: vz-fde-people-flow-in 3.2s linear infinite; }
  .vz-fde-people-flow--out path { stroke-dashoffset: 16; animation: vz-fde-people-flow-out 3.2s linear infinite; }

  /* 1024px以上：中央の四角 → 線が中央から外へ引かれ → 届いた先に点 → 縦線（上から下へ）→ 文字の順（各人は上から .1s 刻み）。2.4秒以内に出し終える */
  @media (min-width: 1024px) {
    .js .vz-fde-people-core { transition: opacity .7s var(--ease), scale .7s var(--ease); }
    .js .vz-fde-people-wire { clip-path: inset(-4px); transition: clip-path .9s var(--ease) .25s; }
    .js .vz-fde-people-p::after {
      transition: transform .5s var(--ease);
      transition-delay: calc(.95s + var(--vz-fde-people-i) * .1s);
    }
    .js .vz-fde-people-p::before {
      clip-path: inset(0);
      transition: clip-path .9s var(--ease);
      transition-delay: calc(1.05s + var(--vz-fde-people-i) * .1s);
    }
    .js .vz-fde-people-body {
      transition: opacity .7s var(--ease), transform .7s var(--ease);
      transition-delay: calc(1.05s + var(--vz-fde-people-i) * .1s);
    }
    .js .vz-fde-people-side { transition: opacity .7s var(--ease) .95s; }
    .js .vz-fde-people-count { transition: opacity .7s var(--ease) 1.6s; }

    .js .vz-fde-people:not(.is-in) .vz-fde-people-core { opacity: 0; scale: .94; }
    .js .vz-fde-people:not(.is-in) .vz-fde-people-wire--l { clip-path: inset(-4px -4px -4px 100%); }
    .js .vz-fde-people:not(.is-in) .vz-fde-people-wire--r { clip-path: inset(-4px 100% -4px -4px); }
    .js .vz-fde-people:not(.is-in) .vz-fde-people-p::after { transform: scale(0); }
    .js .vz-fde-people:not(.is-in) .vz-fde-people-p::before { clip-path: inset(0 0 100% 0); }
    .js .vz-fde-people:not(.is-in) .vz-fde-people-body { opacity: 0; }
    .js .vz-fde-people:not(.is-in) :is(.vz-fde-people-p--c1, .vz-fde-people-p--c2) .vz-fde-people-body { transform: translateX(8px); }
    .js .vz-fde-people:not(.is-in) :is(.vz-fde-people-p--o1, .vz-fde-people-p--o2, .vz-fde-people-p--o3) .vz-fde-people-body { transform: translateX(-8px); }
    .js .vz-fde-people:not(.is-in) :is(.vz-fde-people-side, .vz-fde-people-count) { opacity: 0; }
  }

  /* 1023px以下：各かたまり（class="viz"）が画面に入ったら、背骨が上から引かれ、点・文字の順に現れる */
  @media (max-width: 1023px) {
    /* 続く動き：背骨の上を、点が静かに流れる（AE・PEページと同じ）。各かたまりの背骨に重ねて置く */
    .vz-fde-people-body::before,
    .vz-fde-people-count::after,
    .vz-fde-people-hub::after,
    .vz-fde-people-side--ours::after {
      content: ""; position: absolute; top: 0; bottom: 0; left: 23.5px; width: 1px;
      background: repeating-linear-gradient(to bottom, var(--ink) 0 2px, transparent 2px 16px);
      opacity: .55; animation: vz-fde-people-flow-v 1.6s linear infinite;
    }
    .vz-fde-people-p--c1 .vz-fde-people-body::before { top: calc(10px + var(--vz-fde-people-nl)); }
    .vz-fde-people-p--o3 .vz-fde-people-body::before { bottom: auto; height: var(--vz-fde-people-ny); }

    .js .vz-fde-people-p::before,
    .js .vz-fde-people-body::before,
    .js :is(.vz-fde-people-count, .vz-fde-people-hub, .vz-fde-people-side--ours)::before,
    .js :is(.vz-fde-people-count, .vz-fde-people-hub, .vz-fde-people-side--ours)::after {
      clip-path: inset(0);
      transition: clip-path .9s var(--ease) .2s;
    }
    .js .vz-fde-people-p::after { transition: transform .5s var(--ease) .45s; }
    .js :is(.vz-fde-people-body > *, .vz-fde-people-side, .vz-fde-people-count) { transition: opacity .7s var(--ease) .5s, transform .7s var(--ease) .5s; }
    .js .vz-fde-people-core { transition: opacity .7s var(--ease) .3s, scale .7s var(--ease) .3s; }

    .js .vz-fde-people-p:not(.is-in)::before,
    .js .vz-fde-people-p:not(.is-in) .vz-fde-people-body::before,
    .js :is(.vz-fde-people-count, .vz-fde-people-hub, .vz-fde-people-side--ours):not(.is-in)::before,
    .js :is(.vz-fde-people-count, .vz-fde-people-hub, .vz-fde-people-side--ours):not(.is-in)::after { clip-path: inset(0 0 100% 0); }
    .js .vz-fde-people-p:not(.is-in)::after { transform: scale(0); }
    .js .vz-fde-people-p:not(.is-in) .vz-fde-people-body > *,
    .js :is(.vz-fde-people-side, .vz-fde-people-count):not(.is-in) { opacity: 0; transform: translateY(10px); }
    .js .vz-fde-people-hub:not(.is-in) .vz-fde-people-core { opacity: 0; scale: .94; }
  }
}
@keyframes vz-fde-people-flow-in { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -32; } }
@keyframes vz-fde-people-flow-out { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 48; } }
@keyframes vz-fde-people-flow-v { from { background-position: 0 0; } to { background-position: 0 16px; } }
/* 「動きを止める」の間は、流れる点を出さない（動きを減らす設定と同じ完成形） */
:root[data-motion="off"] .vz-fde-people-flow,
:root[data-motion="off"] :is(.vz-fde-people-body, .vz-fde-people-count, .vz-fde-people-hub, .vz-fde-people-side--ours)::after { display: none; }
:root[data-motion="off"] .vz-fde-people-body::before { display: none; }

/* ---------- 仕事の道具と環境（.vz-fde-env-board）：2段×2列（768px以上）／縦に積む（767px以下） ----------
   各区画は 上に1pxの黒い線 → 小さな図 → 題 → 説明（AEと同じ並び）。③④の図の高さは同じにして、題の位置を横にそろえる。
   ①②は1本の線を共有する：線は2列の幅いっぱいに引き、2列のすき間の幅だけを「AIが作る」の区間にする。
   作る前＝①の列の幅、作った後＝②の列の幅なので、時間をかけるのはどこかが、区間の長さの差で見える（目盛りは付けない。区間の境目に短い縦線だけ） */
.vz-fde-env-board {
  --vz-fde-env-gap: 120px;   /* 2列のすき間（①②の線では、ここが「AIが作る」の区間。「AIエージェント」（約95px）に左右12pxずつの余白。
                                「AIが作る」と右隣の「作った後」の間も約30px あく。768〜1199pxでもこの幅を保つ） */
  --vz-fde-env-h: 164px;                        /* ③④の図の高さ */
  margin-top: clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--vz-fde-env-gap); row-gap: clamp(56px, 6vw, 80px); align-items: start;
}
.vz-fde-env-pair {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--vz-fde-env-gap); align-items: start;
}
/* 区画：見た目は 図 → 題 → 説明（HTML は 題 → 図 → 説明 の順。読み上げでは題を先に聞かせる） */
.vz-fde-env-item {
  --vz-fde-env-n: 0;        /* 横の並びの順（動きのずらしに使う） */
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "fig" "title" "text";
  padding-top: 28px; border-top: 1px solid var(--ink);
}
.vz-fde-env-item--after, .vz-fde-env-item--work { --vz-fde-env-n: 1; }
/* ①②の題と説明：共有する線の下（上の黒い線は、線の図の側で引く） */
.vz-fde-env-pair .vz-fde-env-item { grid-row: 2; padding-top: 0; border-top: 0; grid-template-areas: "title" "text"; }
.vz-fde-env-item--before { grid-column: 1; }
.vz-fde-env-item--after { grid-column: 2; }
.vz-fde-env-fig { grid-area: fig; position: relative; height: var(--vz-fde-env-h); }
.vz-fde-env-title {
  grid-area: title; margin-top: 32px;
  font-size: clamp(1.125rem, 1rem + .35vw, 1.25rem); font-weight: 400; line-height: 1.5;
  color: var(--ink); font-feature-settings: "palt";
  word-break: keep-all; overflow-wrap: anywhere;
}
/* 説明：読ませたい本文なので本文の色（--text）。折り返しは HTML の <wbr>（文節の切れ目）だけで行う */
.vz-fde-env-text { grid-area: text; margin-top: 10px; max-width: 36em; font-size: 15.5px; line-height: 1.95; color: var(--text); }
/* サイト全体の .viz p（文節単位の改行）より強く指定する */
.vz-fde-env-board .vz-fde-env-text { word-break: keep-all; overflow-wrap: anywhere; text-spacing-trim: trim-start; }   /* 行頭に来た「（」は半分の幅に */
.vz-fde-env-nw { white-space: nowrap; }

/* 図の中の共通の部品 */
.vz-fde-env-board p { margin: 0; }
.vz-fde-env-lbl { font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
.vz-fde-env-fig svg { position: absolute; display: block; max-width: none; overflow: visible; }
.vz-fde-env-ln path { fill: none; stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* ①② 共有する線 ------------------------------------------------------------
   区間の線（--line-strong）と、境目の短い縦線（--ink、11px）。真ん中の区間に「AIエージェント」の点を3つ（7px）。
   区間の名前は線の上、「AIエージェント」は点の下、「できました」はその下の段の、真ん中の区間の終わり（作った後の始まり）に置く */
.vz-fde-env-span {
  --vz-fde-env-m: var(--vz-fde-env-gap);   /* 真ん中の区間（AIが作る）の幅 */
  --vz-fde-env-ly: 40px;                   /* 線の高さ（図の上端から） */
  --vz-fde-env-pt: 28px;                   /* 上の黒い線から図まで */
  grid-column: 1 / -1; grid-row: 1;
  position: relative; padding-top: var(--vz-fde-env-pt);
}
/* 上の1pxの黒い線：区画ごとに1本ずつ（2列のすき間はあける。線の図だけが、すき間をまたぐ） */
.vz-fde-env-span::before,
.vz-fde-env-span::after {
  content: ""; position: absolute; top: 0; height: 1px; width: calc((100% - var(--vz-fde-env-gap)) / 2);
  background: var(--ink);
}
.vz-fde-env-span::before { left: 0; }
.vz-fde-env-span::after { right: 0; }
.vz-fde-env-segs { position: relative; height: 104px; }
.vz-fde-env-seg { position: absolute; top: 0; bottom: 0; }
.vz-fde-env-seg--before { left: 0; width: calc(50% - var(--vz-fde-env-m) / 2); }
.vz-fde-env-seg--ai { left: calc(50% - var(--vz-fde-env-m) / 2); width: var(--vz-fde-env-m); }
.vz-fde-env-seg--after { left: calc(50% + var(--vz-fde-env-m) / 2); right: 0; }
/* 区間の線 */
.vz-fde-env-seg::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(var(--vz-fde-env-ly) - .5px); height: 1px;
  background: var(--line-strong);
}
/* 区間の始まりの縦線（3つ）と、最後の区間の終わりの縦線 */
.vz-fde-env-seg::after,
.vz-fde-env-segs::after {
  content: ""; position: absolute; top: calc(var(--vz-fde-env-ly) - 5.5px); width: 1px; height: 11px;
  background: var(--ink);
}
.vz-fde-env-seg::after { left: 0; }
.vz-fde-env-segs::after { right: 0; }
/* 区間の名前：線の上 12px に。作る前・作った後は区間の始まりに、AIが作るは区間の真ん中に */
.vz-fde-env-seg-name {
  position: absolute; left: 0; bottom: calc(100% - var(--vz-fde-env-ly) + 12px);
  font-size: 14.5px; line-height: 1.5; letter-spacing: .02em; color: var(--text); white-space: nowrap;
}
.vz-fde-env-seg--ai .vz-fde-env-seg-name { left: 50%; translate: -50% 0; }
/* AIエージェント：真ん中の区間に、点を3つ（区間の 1/4・1/2・3/4） */
.vz-fde-env-agents { position: absolute; left: 0; right: 0; top: var(--vz-fde-env-ly); height: 0; }
.vz-fde-env-agents i {
  position: absolute; top: -3.5px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%;
  background: var(--ink);
}
.vz-fde-env-agents i:nth-child(1) { left: 25%; --vz-fde-env-k: 0; }
.vz-fde-env-agents i:nth-child(2) { left: 50%; --vz-fde-env-k: 1; }
.vz-fde-env-agents i:nth-child(3) { left: 75%; --vz-fde-env-k: 2; }
.vz-fde-env-agents-name {
  position: absolute; left: 50%; top: calc(var(--vz-fde-env-ly) + 12px); translate: -50% 0;
  font-size: 13px; line-height: 1.5; letter-spacing: .04em; color: var(--muted); white-space: nowrap;
}
/* 「できました」：「AIエージェント」の下の段の、真ん中の区間の終わり（作った後の始まり）から右へ。枠なしの文字で（線の先の言葉の段） */
.vz-fde-env-done {
  position: absolute; left: calc(100% + 4px); top: calc(var(--vz-fde-env-ly) + 36px);
  font-size: 15.5px; font-weight: 500; line-height: 1.5; color: var(--ink); white-space: nowrap;
  font-feature-settings: "palt";
}
/* 線の上を流れる点（続く動き）。初期は出さない */
.vz-fde-env-runner {
  position: absolute; left: 0; top: calc(var(--vz-fde-env-pt) + var(--vz-fde-env-ly));
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%;
  background: var(--ink); display: none;
}

/* ③ Formula AIで、繰り返し回す -----------------------------------------------
   左の3つ（帳票の様式・マクロ・業務フロー図）の点 → 曲線で「Formula AI」（塗りの四角）へ → 右へ2本（画面・API）。
   四角の真ん中から下へ線を降ろし、その先の小さな輪（横長の楕円。角丸の箱に見えないよう、まっすぐな辺を持たせない）の下側に
   設計書の生成 → 検証 → ビルド を左から並べる（輪は左回り＝下側を左から右へ進む） */
.vz-fde-env-loop {
  --vz-fde-env-inw: 88px;                                                  /* 左の3つの言葉の欄の幅（右揃え） */
  --vz-fde-env-og: 14px;                                                   /* 言葉と点のあいだ */
  --vz-fde-env-dx: calc(var(--vz-fde-env-inw) + var(--vz-fde-env-og));     /* 入る線の始まりの点の中心 */
  --vz-fde-env-cin: 52px;                                                  /* 入る曲線の横幅 */
  --vz-fde-env-sqw: 104px;                                                 /* Formula AI の四角の幅 */
  --vz-fde-env-sqx: calc(var(--vz-fde-env-dx) + var(--vz-fde-env-cin));    /* 四角の左端 */
  --vz-fde-env-cx: calc(var(--vz-fde-env-sqx) + var(--vz-fde-env-sqw) / 2);/* 四角の中心（＝輪の中心） */
  --vz-fde-env-cout: 36px;                                                 /* 出る曲線の横幅 */
  --vz-fde-env-ox: calc(var(--vz-fde-env-sqx) + var(--vz-fde-env-sqw) + var(--vz-fde-env-cout));   /* 出る線の先の点の中心 */
  --vz-fde-env-y1: 14px;  --vz-fde-env-ym: 42px;  --vz-fde-env-y2: 70px;  /* 入る3本の高さ（真ん中が四角の高さ） */
  --vz-fde-env-ry: 96px;                                                   /* 輪の上端 */
}
.vz-fde-env-loop-in li {
  position: absolute; left: 0; width: var(--vz-fde-env-inw); translate: 0 -50%;
  text-align: right; font-size: 14.5px; line-height: 1.5; color: var(--text); white-space: nowrap;
}
.vz-fde-env-loop-in1 { top: var(--vz-fde-env-y1); }
.vz-fde-env-loop-in2 { top: var(--vz-fde-env-ym); --vz-fde-env-k: 1; }
.vz-fde-env-loop-in3 { top: var(--vz-fde-env-y2); --vz-fde-env-k: 2; }
.vz-fde-env-loop-in li::after {
  content: ""; position: absolute; top: 50%; left: calc(var(--vz-fde-env-dx) - 3.5px);
  width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--ink);
}
.vz-fde-env-loop-merge {
  left: var(--vz-fde-env-dx); top: var(--vz-fde-env-y1);
  width: var(--vz-fde-env-cin); height: calc(var(--vz-fde-env-y2) - var(--vz-fde-env-y1));
}
/* Formula AI：塗りの四角（--ink の地に、地の色の文字。このページで塗りの四角はここだけ） */
.vz-fde-env-loop-core {
  position: absolute; z-index: 1; left: var(--vz-fde-env-sqx); top: var(--vz-fde-env-ym); width: var(--vz-fde-env-sqw);
  translate: 0 -50%; padding: 6px 0; text-align: center;
  background: var(--ink); color: var(--white);
  font-size: 13px; font-weight: 500; line-height: 1.5; letter-spacing: .04em; white-space: nowrap;
}
/* 四角から輪へ降りる線 */
.vz-fde-env-loop-stem {
  position: absolute; left: calc(var(--vz-fde-env-cx) - .5px); top: var(--vz-fde-env-ym);
  width: 1px; height: calc(var(--vz-fde-env-ry) - var(--vz-fde-env-ym)); background: var(--line-strong);
}
/* 小さな輪（横192px・縦36pxの楕円。伸び縮みさせない） */
.vz-fde-env-fig .vz-fde-env-loop-ring { left: calc(var(--vz-fde-env-cx) - 96px); top: var(--vz-fde-env-ry); width: 192px; height: 36px; }
.vz-fde-env-loop-track { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.vz-fde-env-loop-run { display: none; fill: none; stroke: var(--ink); stroke-opacity: .55; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 0 100; }
/* 輪の下側の3つ：点（楕円の上。真ん中から左右へ 72px）と、その下に名前（左から 設計書の生成 → 検証 → ビルド）。
   左右の点は楕円の下端より 6px 高い（18 × (1 − √(1 − (72/96)²)) ≒ 6.1）ので、名前の上端は3つでそろえる */
.vz-fde-env-loop-steps li {
  position: absolute; top: calc(var(--vz-fde-env-ry) + 29.9px); translate: -50% 0; padding-top: 18.1px;
  font-size: 13px; line-height: 1.5; letter-spacing: .04em; color: var(--muted); white-space: nowrap;
}
.vz-fde-env-loop-s1 { left: calc(var(--vz-fde-env-cx) - 72px); }
.vz-fde-env-loop-s2 { left: var(--vz-fde-env-cx); --vz-fde-env-k: 1; top: calc(var(--vz-fde-env-ry) + 36px); padding-top: 12px; }
.vz-fde-env-loop-s3 { left: calc(var(--vz-fde-env-cx) + 72px); --vz-fde-env-k: 2; }
.vz-fde-env-loop-steps li::before {
  content: ""; position: absolute; left: 50%; top: -3.5px;
  width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--ink);
}
.vz-fde-env-loop-split {
  left: calc(var(--vz-fde-env-sqx) + var(--vz-fde-env-sqw)); top: calc(var(--vz-fde-env-ym) - 16px);
  width: var(--vz-fde-env-cout); height: 32px;
}
/* 出る線の先：点と、画面／API（線の先の言葉の段） */
.vz-fde-env-loop-out li {
  position: absolute; left: var(--vz-fde-env-ox); padding-left: var(--vz-fde-env-og); translate: 0 -50%;
  font-size: 15.5px; font-weight: 500; line-height: 1.5; color: var(--ink); white-space: nowrap;
}
.vz-fde-env-loop-out1 { top: calc(var(--vz-fde-env-ym) - 16px); }
.vz-fde-env-loop-out2 { top: calc(var(--vz-fde-env-ym) + 16px); }
.vz-fde-env-loop-out li::before {
  content: ""; position: absolute; left: -3.5px; top: 50%;
  width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--ink);
}

/* ④ 働き方 ----------------------------------------------------------------
   上：場所（ラベル）と、5つの四角（曜日名は付けない）。2つに実線の印（点）、3つ目は枠を破線にして点を置く＝週2〜3日程度。その横に「週2〜3日程度出社」、下に「リモートワーク併用」。
   下：フレックスタイム制（ラベル）と、1日の帯（1時間ごとの目盛り）。コアタイム 10:00〜15:00 を --ink で濃くする（PE・AEページと同じ形） */
.vz-fde-env-work-place { position: absolute; left: 0; top: 0; }
.vz-fde-env-work-week { position: absolute; left: 0; top: 26px; display: flex; align-items: center; gap: 14px; }
.vz-fde-env-days { display: flex; gap: 6px; }
.vz-fde-env-days i { position: relative; display: block; width: 15px; height: 15px; border: 1px solid var(--muted); }
.vz-fde-env-days i:is(.is-on, .is-maybe)::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--ink);
}
/* 3つ目（出社するかは週による）：枠を破線に。破線は 4px／5px に近い間隔（四角の1辺 15px に、線2つと間2つ） */
.vz-fde-env-days i.is-maybe {
  border: 0;
  background:
    repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 6px) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 6px) 0 100% / 100% 1px no-repeat,
    repeating-linear-gradient(180deg, var(--ink) 0 3px, transparent 3px 6px) 0 0 / 1px 100% no-repeat,
    repeating-linear-gradient(180deg, var(--ink) 0 3px, transparent 3px 6px) 100% 0 / 1px 100% no-repeat;
}
.vz-fde-env-days i:nth-child(1) { --vz-fde-env-k: 0; }
.vz-fde-env-days i:nth-child(2) { --vz-fde-env-k: 1; }
.vz-fde-env-days i:nth-child(3) { --vz-fde-env-k: 2; }
.vz-fde-env-days i:nth-child(4) { --vz-fde-env-k: 3; }
.vz-fde-env-days i:nth-child(5) { --vz-fde-env-k: 4; }
.vz-fde-env-work-days { font-size: 15.5px; font-weight: 500; line-height: 1.5; color: var(--ink); white-space: nowrap; }
.vz-fde-env-work-remote { position: absolute; left: 0; top: 58px; }
.vz-fde-env-work-flex { position: absolute; left: 0; top: 86px; }
/* 横線＝1日（時間の軸）。目盛りは1時間ごと */
.vz-fde-env-day { position: absolute; left: 0; right: 0; top: 136px; height: 1px; background: var(--faint); }
.vz-fde-env-day::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 5px;
  background: repeating-linear-gradient(to right, var(--line-strong) 0 1px, transparent 1px calc(100% / 24));
}
.vz-fde-env-core { position: absolute; top: 0; height: 1px; left: calc(100% * 10 / 24); width: calc(100% * 5 / 24); margin: 0; }
/* 濃くする範囲（--ink）：横線と両端の短い縦線を1枚で描く */
.vz-fde-env-core::before {
  content: ""; position: absolute; left: 0; right: 0; top: -5px; height: 11px;
  background:
    linear-gradient(var(--ink), var(--ink)) 0 5px / 100% 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 0 / 1px 100% no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 0 / 1px 100% no-repeat;
  clip-path: inset(0);
}
.vz-fde-env-core-name {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: .04em; white-space: nowrap; color: var(--muted);
}
.vz-fde-env-core-time { position: absolute; left: 0; right: 0; top: 8px; display: flex; justify-content: space-between; }
.vz-fde-env-core-time > span:first-child { transform: translateX(-50%); }
.vz-fde-env-core-time > span:last-child { transform: translateX(50%); }
.vz-fde-env-core-time > span {
  font-family: var(--font-mono); font-size: 13px; line-height: 1.5; letter-spacing: .04em; white-space: nowrap; color: var(--muted);
}
.vz-fde-env-core-time > .vz-fde-env-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; transform: none;
}

/* 767px以下：区画を縦に積む。①②の線は幅いっぱいのまま、題と説明を下に縦に並べる。真ん中の区間は 120px（「AIエージェント」に左右の余白をとった幅。2列のときと同じ） */
@media (max-width: 767px) {
  .vz-fde-env-board { grid-template-columns: minmax(0, 1fr); }
  .vz-fde-env-item--loop .vz-fde-env-fig,
  .vz-fde-env-item--work .vz-fde-env-fig { max-width: 420px; }
  .vz-fde-env-pair { grid-template-columns: minmax(0, 1fr); }
  .vz-fde-env-span { --vz-fde-env-m: 120px; }
  /* 区間の名前は、どれも区間の真ん中に（真ん中の区間が狭いので、隣の名前と離す） */
  .vz-fde-env-seg-name { left: 50%; translate: -50% 0; }
  .vz-fde-env-span::before { width: 100%; }
  .vz-fde-env-span::after { display: none; }
  .vz-fde-env-segs { height: 104px; }
  .vz-fde-env-pair .vz-fde-env-item--after { grid-column: 1; grid-row: 3; margin-top: 40px; }
  .vz-fde-env-pair .vz-fde-env-item--after .vz-fde-env-title { margin-top: 0; }
}
/* 列が狭い幅：③の線と四角を詰めて、図の幅に収める（959px以下で 303px、768〜879pxの2列では 283px、359px以下で 275px）。
   2列のすき間が 120px なので、880〜959pxでも詰めておく（詰めないと 880px で列の右端まで 5px しか残らない） */
@media (max-width: 959px) {
  .vz-fde-env-loop { --vz-fde-env-cin: 36px; --vz-fde-env-sqw: 96px; --vz-fde-env-cout: 24px; }
}
/* 768〜879px：2列のすき間を 120px にしたので、列は 293px まで狭くなる。③をもう一段詰める（左の言葉の欄 88px はそのまま） */
@media (min-width: 768px) and (max-width: 879px) {
  .vz-fde-env-loop { --vz-fde-env-og: 12px; --vz-fde-env-cin: 28px; --vz-fde-env-sqw: 92px; --vz-fde-env-cout: 20px; }
}
@media (max-width: 359px) {
  .vz-fde-env-loop { --vz-fde-env-inw: 80px; --vz-fde-env-og: 12px; --vz-fde-env-cin: 28px; --vz-fde-env-sqw: 92px; --vz-fde-env-cout: 20px; }
  .vz-fde-env-loop-in li { font-size: 13px; }
}

/* ---------- 仕事の道具と環境：動き（各区画に class "viz"。画面に入った区画から、図 → 題 → 説明の順に現れる。2.4秒以内） ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* 続く動き（①②）：線の上を、点が左から右へ一定の速さで流れる（区間が長いほど長く留まる）。登場が終わってから。1周16秒（スマホは8秒） */
  .js .vz-fde-env-span.is-in .vz-fde-env-runner { display: block; animation: vz-fde-env-run 16s linear 2.4s infinite forwards; }
  /* 続く動き（③）：点が輪を左回りに回る（1周8秒） */
  .js .vz-fde-env-item--loop.is-in .vz-fde-env-loop-run { display: inline; animation: vz-fde-env-orbit 8s linear 2.4s infinite forwards; }
  .vz-fde-env-runner, .vz-fde-env-loop-run { opacity: 0; }

  .js .vz-fde-env-item { --vz-fde-env-d: calc(var(--vz-fde-env-n) * .1s); }
  .js .vz-fde-env-span { --vz-fde-env-d: 0s; }

  /* ①② 線：区間ごとに左から引く（作る前 → AIが作る → 作った後）。境目の縦線・点・名前は、線が届いたところで出る */
  .js .vz-fde-env-seg::before { clip-path: inset(-1px 0); transition: clip-path var(--vz-fde-env-du, .7s) linear var(--t, 0s); }
  .js .vz-fde-env-seg--before { --t: .1s; --vz-fde-env-du: .6s; }
  .js .vz-fde-env-seg--ai { --t: .7s; --vz-fde-env-du: .15s; }
  .js .vz-fde-env-seg--after { --t: .85s; --vz-fde-env-du: .6s; }
  .js :is(.vz-fde-env-seg, .vz-fde-env-segs)::after { transition: transform .4s var(--ease) var(--tp, 0s); }
  .js .vz-fde-env-seg--before::after { --tp: .05s; }
  .js .vz-fde-env-seg--ai::after { --tp: .65s; }
  .js .vz-fde-env-seg--after::after { --tp: .8s; }
  .js .vz-fde-env-segs::after { --tp: 1.4s; }
  .js .vz-fde-env-seg-name { transition: opacity .7s var(--ease) calc(var(--t, 0s) + .1s); }
  .js .vz-fde-env-agents i { transition: transform .4s var(--ease) calc(.72s + var(--vz-fde-env-k) * .05s); }
  .js .vz-fde-env-agents-name { transition: opacity .7s var(--ease) .95s; }
  .js .vz-fde-env-done { transition: opacity .7s var(--ease) 1.15s; }

  .js .vz-fde-env-span:not(.is-in) .vz-fde-env-seg::before { clip-path: inset(-1px 100% -1px 0); }
  .js .vz-fde-env-span:not(.is-in) :is(.vz-fde-env-seg, .vz-fde-env-segs)::after { transform: scaleY(0); }
  .js .vz-fde-env-span:not(.is-in) :is(.vz-fde-env-seg-name, .vz-fde-env-agents-name, .vz-fde-env-done) { opacity: 0; }
  .js .vz-fde-env-span:not(.is-in) .vz-fde-env-agents i { transform: scale(0); }

  /* ③ 線は clip-path で左から引く（none とは補間されないので、引き終わりも inset で書く） */
  .js :is(.vz-fde-env-loop-merge, .vz-fde-env-loop-split, .vz-fde-env-day) { clip-path: inset(-4px); transition: clip-path .9s var(--ease) calc(var(--vz-fde-env-d) + var(--t, 0s)); }
  .js .vz-fde-env-loop-stem { clip-path: inset(0); transition: clip-path .4s var(--ease) calc(var(--vz-fde-env-d) + .75s); }
  .js .vz-fde-env-loop-track { stroke-dasharray: 100 100; transition: stroke-dashoffset 1s var(--ease) calc(var(--vz-fde-env-d) + 1s); }
  /* 1日の帯は、上の「コアタイム」と下の時刻まで切り抜かないよう、上下左右に 48px 広く取る */
  .js .vz-fde-env-day { clip-path: inset(-48px); }
  .js :is(.vz-fde-env-loop-in li, .vz-fde-env-loop-out li, .vz-fde-env-loop-steps li, .vz-fde-env-work-place, .vz-fde-env-work-days, .vz-fde-env-work-remote, .vz-fde-env-work-flex, .vz-fde-env-core-name, .vz-fde-env-core-time) {
    transition: opacity .7s var(--ease) calc(var(--vz-fde-env-d) + var(--t, 0s));
  }
  .js .vz-fde-env-loop-core { transition: opacity .7s var(--ease) calc(var(--vz-fde-env-d) + .55s), scale .7s var(--ease) calc(var(--vz-fde-env-d) + .55s); }
  .js :is(.vz-fde-env-loop-in li, .vz-fde-env-loop-out li, .vz-fde-env-days i)::after,
  .js :is(.vz-fde-env-loop-out li, .vz-fde-env-loop-steps li)::before { transition: transform .5s var(--ease) calc(var(--vz-fde-env-d) + var(--tp, 0s)); }
  .js .vz-fde-env-days i { transition: opacity .5s var(--ease) calc(var(--vz-fde-env-d) + .1s + var(--vz-fde-env-k) * .06s); }
  .js .vz-fde-env-days i:is(.is-on, .is-maybe)::after { --tp: calc(.45s + var(--vz-fde-env-k) * .08s); }
  .js .vz-fde-env-core::before { transition: clip-path .9s var(--ease) calc(var(--vz-fde-env-d) + 1.15s); }
  .js :is(.vz-fde-env-title, .vz-fde-env-text) { transition: opacity .7s var(--ease) calc(var(--vz-fde-env-d) + var(--t, 0s)), transform .7s var(--ease) calc(var(--vz-fde-env-d) + var(--t, 0s)); }

  /* 順番（is-in からの秒数）：③…言葉 → 点 → 曲線 → Formula AI → 降りる線 → 輪 → 3つ → 出る線 → 画面・API */
  .js .vz-fde-env-loop-in li { --t: calc(var(--vz-fde-env-k, 0) * .05s); --tp: calc(.1s + var(--vz-fde-env-k, 0) * .05s); }
  .js .vz-fde-env-loop-merge { --t: .2s; }
  .js .vz-fde-env-loop-steps li { --t: calc(1.3s + var(--vz-fde-env-k, 0) * .15s); --tp: calc(1.2s + var(--vz-fde-env-k, 0) * .15s); }
  .js .vz-fde-env-loop-split { --t: .75s; }
  .js .vz-fde-env-loop-out li { --t: 1.3s; --tp: 1.25s; }
  /* ④…場所 → 四角（左から）→ 点 → 週2〜3日程度出社 → リモートワーク併用 → フレックスタイム制 → 1日の帯 → コアタイム */
  .js .vz-fde-env-work-days { --t: .75s; }
  .js .vz-fde-env-work-remote { --t: .8s; }
  .js .vz-fde-env-work-flex { --t: .85s; }
  .js .vz-fde-env-day { --t: .9s; }
  .js :is(.vz-fde-env-core-name, .vz-fde-env-core-time) { --t: 1.5s; }
  /* 題と説明は、図が出始めてから */
  .js .vz-fde-env-title { --t: .3s; }
  .js .vz-fde-env-text { --t: .4s; }
  .js .vz-fde-env-pair .vz-fde-env-title { --t: .5s; }
  .js .vz-fde-env-pair .vz-fde-env-text { --t: .6s; }

  .js .vz-fde-env-item:not(.is-in) :is(.vz-fde-env-loop-merge, .vz-fde-env-loop-split) { clip-path: inset(-4px calc(100% + 4px) -4px -4px); }
  .js .vz-fde-env-item:not(.is-in) .vz-fde-env-loop-stem { clip-path: inset(0 0 100% 0); }
  .js .vz-fde-env-item:not(.is-in) .vz-fde-env-loop-track { stroke-dashoffset: 100; }
  .js .vz-fde-env-item:not(.is-in) .vz-fde-env-day { clip-path: inset(-48px calc(100% + 48px) -48px -48px); }
  .js .vz-fde-env-item:not(.is-in) :is(.vz-fde-env-loop-in li, .vz-fde-env-loop-out li, .vz-fde-env-loop-steps li, .vz-fde-env-work-place, .vz-fde-env-work-days, .vz-fde-env-work-remote, .vz-fde-env-work-flex, .vz-fde-env-core-name, .vz-fde-env-core-time, .vz-fde-env-days i) { opacity: 0; }
  .js .vz-fde-env-item:not(.is-in) .vz-fde-env-loop-core { opacity: 0; scale: .9; }
  .js .vz-fde-env-item:not(.is-in) :is(.vz-fde-env-loop-in li, .vz-fde-env-loop-out li, .vz-fde-env-days i)::after,
  .js .vz-fde-env-item:not(.is-in) :is(.vz-fde-env-loop-out li, .vz-fde-env-loop-steps li)::before { transform: scale(0); }
  .js .vz-fde-env-item:not(.is-in) .vz-fde-env-core::before { clip-path: inset(0 100% 0 0); }
  .js .vz-fde-env-item:not(.is-in) :is(.vz-fde-env-title, .vz-fde-env-text) { opacity: 0; transform: translateY(10px); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  .js .vz-fde-env-span.is-in .vz-fde-env-runner { animation-duration: 8s; }
}
/* 線の上を流れる点：左端で現れ、一定の速さで右端まで進んで消える */
@keyframes vz-fde-env-run {
  0%       { left: 0%; opacity: 0; }
  3%, 93%  { opacity: .55; }
  96%      { left: 100%; opacity: 0; }
  100%     { left: 100%; opacity: 0; }
}
/* 輪を回る点：降りる線との継ぎ目から左回りに1周 */
@keyframes vz-fde-env-orbit {
  0%   { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -100; opacity: 1; }
}
/* 「動きを止める」の間は、流れる点・回る点を出さない */
:root[data-motion="off"] :is(.vz-fde-env-runner, .vz-fde-env-loop-run) { display: none !important; }


/* ---------- 社員の言葉（.vz-fde-quote）：大きな文字だけで見せる。1文節を1行に組み（6行）、スクロールに合わせて灰色から濃く満ちる ----------
   AEページの社員の言葉（.vz-ae-quote）・トップの「私たちが大切にしていること」（.feature h3）と同じ満ち方：行ごとに、黒と灰色を半分ずつ塗った2倍幅の背景を
   文字の形に切り抜き、背景の位置を灰色の側から黒の側へ動かす（境目は文字1つ分でぼかす）。6行は上から順に、少しずつ重ねて満ちる。
   ・スクロール連動のアニメーションに対応したブラウザ：言葉の上端が画面の下から入ってすぐ満ち始め、言葉の中央が画面の中央に来るころに満ち切る
   ・main.js が .vz-fde-quote に is-filled を付けたら、黒のまま固定する（main.js の「カルチャー3つの見出し」の inks の対象）
   ・対応しないブラウザ：main.js が ink-ready を付けたときだけ灰色で待たせ、is-filled で満たす。付かなければ最初から黒
   動きを減らす設定・「動きを止める」で止めている間・JSなし・強制カラー（ハイコントラスト）では、最初から黒一色 */
.vz-fde-quote-text { margin: 0; }
.vz-fde-quote-text p {
  /* 最も長い行（16字）が、1024px以上では1行に収まる大きさ（AEと同じ。1440px で約68px、上限68px）。スマホは約30px */
  font-size: clamp(1.75rem, 1rem + 3.6vw, 4.25rem); font-weight: 500; line-height: 1.32; letter-spacing: -0.02em;
  color: var(--ink); font-feature-settings: "palt";
  word-break: keep-all; overflow-wrap: anywhere;
}
/* 1行＝1文節のまとまり。幅は文字の分だけにする（満ちる動きの幅を、文字の幅に合わせるため） */
.vz-fde-quote-line { display: block; width: fit-content; max-width: 100%; }
.vz-fde-quote-line:nth-child(1) { --vz-fde-quote-ln: 0; }
.vz-fde-quote-line:nth-child(2) { --vz-fde-quote-ln: 1; }
.vz-fde-quote-line:nth-child(3) { --vz-fde-quote-ln: 2; }
.vz-fde-quote-line:nth-child(4) { --vz-fde-quote-ln: 3; }
.vz-fde-quote-line:nth-child(5) { --vz-fde-quote-ln: 4; }
.vz-fde-quote-line:nth-child(6) { --vz-fde-quote-ln: 5; }
/* 1行に収まらない幅では、内側の文節の切れ目でだけ折り返す */
.vz-fde-quote-ph { display: inline-block; }
/* 出典：言葉の下に小さく。短い線を添える（枠や引用符は使わない） */
.vz-fde-quote-cite {
  margin-top: clamp(28px, 3vw, 40px);
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; line-height: 1.5; letter-spacing: .04em; color: var(--muted);
}
.vz-fde-quote-cite::before { content: ""; flex: none; width: 32px; height: 1px; background: var(--line-strong); }

@keyframes vz-fde-quote-fill { to { background-position: 0 0; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
    .vz-fde-quote-text { view-timeline: --vz-fde-quote block; }
    :root.js:not([data-motion="off"]) .vz-fde-quote:not(.is-filled) .vz-fde-quote-line {
      background: linear-gradient(90deg, var(--ink) calc(50% - .5em), var(--k-fade-1) calc(50% + .5em)) 100% 0 / calc(200% + 1em) 100% no-repeat;
      -webkit-background-clip: text; background-clip: text;
      color: transparent;
      animation: vz-fde-quote-fill linear both;
      animation-timeline: --vz-fde-quote;
      /* 1行目は言葉の上端が画面に入ってすぐ（10%）から、6行目は言葉の中央が画面の中央に来るころ（52%）まで。1行ずつ6%遅らせ、少し重ねる（AEは5行で7%ずつ） */
      animation-range: cover calc(10% + var(--vz-fde-quote-ln) * 6%) cover calc(22% + var(--vz-fde-quote-ln) * 6%);
    }
    /* スクロールに合わせて動くだけで、自分では動き続けないので、画面外の一時停止（.viz.is-paused）の対象から外す */
    :root.js .vz-fde-quote.viz.is-paused .vz-fde-quote-line { animation-play-state: running !important; }
  }
}
@supports not (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
    :root:not([data-motion="off"]) .vz-fde-quote.ink-ready .vz-fde-quote-line {
      background: linear-gradient(90deg, var(--ink) calc(50% - .5em), var(--k-fade-1) calc(50% + .5em)) 100% 0 / calc(200% + 1em) 100% no-repeat;
      -webkit-background-clip: text; background-clip: text;
      color: transparent;
      transition: background-position 1.2s cubic-bezier(.65, 0, .35, 1) calc(var(--vz-fde-quote-ln) * 250ms);
    }
    :root:not([data-motion="off"]) .vz-fde-quote.ink-ready.is-filled .vz-fde-quote-line { background-position: 0 0; }
  }
}
/* 満ちる途中の言葉を選んだときも、文字が読めるようにする */
.vz-fde-quote ::selection { color: var(--white); background-color: var(--ink); }


/* =========================================================
   Lead FDE ページの図：仕事の例①②③（.vz-fde-common）と、面白さと大変さ（.vz-fde-extra）
   部品のHTMLは tools/job_parts/forward-deployed-engineer/common.html・extra.html。
   描き方はPE・AEの図と同じ：点7px・線1px（主の線は --line-strong、強調は --ink）・破線4px／5px（--muted）・
   矢じりは高さ7pxの開いたくの字（--muted）・流れる点は --ink の55%（2px／14px）・文字はすべてHTML。色は変数だけ（明暗の両方に対応）。
   このページの線の意味：実線＝起きたこと・決まったこと／破線＝まだ決まっていないこと／薄い破線＝通らない道（例①だけ）。
   塗りの点は受注（例①）と、絵の中の点だけ。段階の点は白抜き（7px の輪）。丸と線画のアイコン・塗りの面・影・角丸は使わない。
   動き：画面に入ったときに一度だけ現れる（初期の隠し方は、JSが動き、動きを減らす設定でないときだけ）。
   続く動きは各図に1つまで。画面外ではサイトの .viz.is-paused、「動きを止める」ではサイトの末尾の指定が止める
   ========================================================= */


/* --- 仕事の例①②③（.vz-fde-common） --- */
/* ---------- 3つの例：番号・見出し → 図 → 本文。本文は12列の6列目の頭から（PE・AEの仕事の例と同じ軸） ---------- */
.vz-fde-common { margin-top: clamp(40px, 5vw, 64px); }
.vz-fde-common-ex {
  display: grid; grid-template-columns: var(--grid); column-gap: var(--col-gap);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--line-strong);
}
.vz-fde-common-ex + .vz-fde-common-ex { margin-top: clamp(72px, 9vw, 128px); }
.vz-fde-common-head,
.vz-fde-common-fig { grid-column: 1 / -1; min-width: 0; }

/* 番号・小見出し（PE・AEの仕事の例と同じ値） */
.vz-fde-common-num { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; letter-spacing: 0.1em; color: var(--muted); }
.vz-fde-common-title {
  margin-top: 8px;
  font-size: var(--fs-h3); font-weight: 400; line-height: 1.5;
  color: var(--ink); font-feature-settings: "palt"; word-break: auto-phrase;
}

/* 本文（確定文言）：読ませたい本文なので本文の色（--text）。図との主従は大きさと余白でつける */
.vz-fde-common-body {
  grid-column: 6 / -1; margin-top: 40px; max-width: 36em;
  font-size: 15.5px; line-height: 2; color: var(--text);
}

/* 図：横長（1024px以上）と縦長（1023px以下）を描き分ける。線は画面上で常に 1px、点は常に 7px */
.vz-fde-common-fig { margin-top: clamp(40px, 5vw, 72px); }
.vz-fde-common-art { position: relative; width: 100%; }
.vz-fde-common-art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vz-fde-common-art--narrow { display: none; }
/* 例①：上に「ありたい姿」の札、下に段階の名前が出るので、その分を図の外に空ける */
.vz-fde-common-fig--ideal { margin-top: clamp(64px, 7vw, 96px); }
.vz-fde-common-art--ideal { aspect-ratio: 1200 / 300; }
.vz-fde-common-stage--ideal { position: relative; margin-bottom: 44px; container-type: inline-size; }
.vz-fde-common-art--proto { aspect-ratio: 1200 / 300; }
.vz-fde-common-art--check { aspect-ratio: 1200 / 200; margin-bottom: 40px; }
.vz-fde-common-art--ideal-n { aspect-ratio: 360 / 610; }
.vz-fde-common-art--proto-n { aspect-ratio: 360 / 384; }
.vz-fde-common-art--check-n { aspect-ratio: 360 / 210; margin-bottom: 16px; }

/* 線の共通の指定（:where で詳細度を 0 にして、点などの太さを上書きしやすくする） */
:where(.vz-fde-common-art) path { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }

.vz-fde-common-ln { stroke: var(--line-strong); }                                     /* 主の線（実際の道・見比べる線・裏側のデータ） */
.vz-fde-common-ln--screen { stroke: var(--muted); }                                  /* 画面：誰にでも見えている線（裏側のデータの線は、主の線のまま薄く） */
.vz-fde-common-key { stroke: var(--ink); }                                            /* 強調の線（検証の仕組み・気づく輪） */
.vz-fde-common-skip { stroke: var(--line-strong); stroke-dasharray: 4 5; }            /* 通らない道：薄い破線（このページでは例①だけ） */
.vz-fde-common-proto { stroke: var(--muted); stroke-dasharray: 4 5; }                 /* 試作の四角：破線（まだ決まっていない） */
.vz-fde-common-chosen { stroke: var(--ink); }                                         /* 採用した版：実線に変わる（破線の上に重ねる） */
.vz-fde-common-mesh { stroke: var(--line-strong); }                                   /* 試作の中の点を結ぶ線 */
.vz-fde-common-ray { stroke: var(--muted); stroke-linecap: round; }                   /* お客様から外へ出る短い線 */
.vz-fde-common-arrow { stroke: var(--muted); stroke-linecap: round; }                 /* 矢じり */

/* 点：長さ0の線を、丸い線端で描く（図が縮んでも直径は変わらない） */
.vz-fde-common-dot { stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }        /* 7px の塗りの点（受注・流れる点） */
.vz-fde-common-dot--soft { stroke: var(--muted); }                                          /* 試作の中の点（文字のない点。四角の中の配置だけを見せるので、灰色に控える） */
/* 白抜きの点：--ink の 7px の点に、地の色の 5px の点を重ねて 1px の輪にする */
.vz-fde-common-hole { stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }
.vz-fde-common-hole-in { stroke: var(--white); stroke-width: 5; stroke-linecap: round; }

/* ラベル：--x・--y（図の幅・高さに対する割合）を基準に置く。標準は中央そろえ */
.vz-fde-common-lbl {
  position: absolute; left: var(--x, 50%); top: var(--y, 0%);
  translate: var(--tx, -50%) var(--ty, 0);
  margin: var(--my, 0) 0 0 var(--mx, 0);
  white-space: nowrap; font-feature-settings: "palt";
}
.vz-fde-common-lbl--name { font-size: 15.5px; font-weight: 500; line-height: 1.5; color: var(--ink); }   /* 段階の名前 */
.vz-fde-common-lbl--note { font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0.04em; color: var(--muted); }  /* 印や線に添える字 */
.vz-fde-common-lbl--num { --tx: 0; font-family: var(--font-mono); font-size: 12.5px; line-height: 1; letter-spacing: 0.1em; color: var(--muted); }  /* 試作の番号（四角の左上） */
.vz-fde-common-lbl--quiet { color: var(--muted); }                                     /* 画面からは見えない側の名前 */
.vz-fde-common-lbl--over { --ty: -100%; --my: calc(-1 * var(--off, 10px)); }   /* 点の上 */
.vz-fde-common-lbl--under { --my: var(--off, 12px); }                        /* 点の下 */
.vz-fde-common-lbl--start { --tx: 0; }                                         /* 左端を --x に */
.vz-fde-common-lbl--end { --tx: -100%; }                                       /* 右端を --x に */
.vz-fde-common-lbl--at { --tx: -3.5px; }                                       /* 書き出しを点の左端にそろえる */
.vz-fde-common-lbl--side { --tx: 0; --ty: -50%; }                              /* 点の右に、高さの中心をそろえて */
.vz-fde-common-lbl--left { --tx: -100%; }                                      /* 点の左に（--side と合わせて使う） */
.vz-fde-common-lbl--vert { --ty: -50%; writing-mode: vertical-rl; letter-spacing: 0.12em; }  /* 縦書き（縦長の図の、通らない道） */

/* ---------- 例①の問い：実際の線と破線の間に置く、この図の主役の文字（本文には書かないので、HTMLの文字で読み上げにも届ける） ----------
   置き場所は図の座標で決める（横長：276〜796、高さの中心は 160）。文字の大きさは h2 を上限に、図の幅に合わせて縮める
   （図の中の文字を図の大きさで決めるのは、PEの仕事の流れの中心の一言と同じ。幅1024px前後でも、線に重ならず3行に収まる） */
.vz-fde-common-ask {
  position: absolute; left: 23%; width: 43.34%; top: 53.33%;
  translate: 0 -50%;
  font-size: var(--fs-h2); font-size: min(var(--fs-h2), 3.34cqi);
  font-weight: 400; line-height: 1.4; letter-spacing: -0.01em;
  color: var(--ink); font-feature-settings: "palt";
}
/* 文節：途中では折り返さない（入りきらない幅のときだけ、中の小さな文節の切れ目で折り返す）。せり上がる文字を、文節の枠の下端で隠す */
.vz-fde-common-ask-ph {
  display: inline-block; max-width: 100%;
  clip-path: inset(-.25em -.2em -.14em -.2em);
}
.vz-fde-common-ask-in,
.vz-fde-common-ask-w { display: inline-block; max-width: 100%; }

/* ---------- 1023px以下：縦長の図に切り替える ---------- */
@media (max-width: 1023px) {
  .vz-fde-common-art--wide { display: none; }
  .vz-fde-common-art--narrow { display: block; }
  .vz-fde-common-fig--proto,
  .vz-fde-common-fig--check,
  .vz-fde-common-stage--ideal { max-width: 400px; }
  .vz-fde-common-fig--ideal { margin-top: clamp(40px, 5vw, 72px); }
  .vz-fde-common-stage--ideal { margin-bottom: 8px; }
  /* 問い：左の破線と右へ回る実線の間（縦長の図の座標で 56〜320、高さの中心は 252）。1行目の文節が1行に収まる大きさまで */
  .vz-fde-common-ask { left: 15.56%; width: 73.33%; top: 41.31%; font-size: min(var(--fs-h2), 7.2cqi); }
}
/* スマホ：本文は図の下に、画面の幅いっぱいで */
@media (max-width: 767px) {
  .vz-fde-common-ex { display: block; }
  .vz-fde-common-body { margin-top: 32px; }
}

/* ---------- 動き ---------- */
.vz-fde-common-wipe,
.vz-fde-common-drop { clip-path: inset(-12px); transition: clip-path .9s var(--ease) var(--d, 0s); }
.vz-fde-common-fade { transition: opacity .7s var(--ease) var(--d, 0s); }
.vz-fde-common-rise { transition: opacity .7s var(--ease) var(--d, 0s), transform .7s var(--ease) var(--d, 0s); }
/* 点：線の太さ（＝直径）を 0 から広げて現れる（線の太さは拡大縮小では変わらないため） */
.vz-fde-common-pt,
.vz-fde-common-pt > path { transition: stroke-width .5s var(--ease) var(--d, 0s); }
/* 試作の四角・お客様から出る短い線：その場で少し大きくなりながら現れる */
.vz-fde-common-pop,
.vz-fde-common-burst { transition: opacity .6s var(--ease) var(--d, 0s), transform .7s var(--ease) var(--d, 0s); transform-box: fill-box; transform-origin: center; }
.vz-fde-common-burst { transform-origin: center bottom; }
.vz-fde-common-burst--side { transform-origin: left center; }
.vz-fde-common-head > *,
.vz-fde-common-body { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.vz-fde-common-head > :nth-child(2) { transition-delay: .1s; }
/* 問い：文節ごとに、枠の下からせり上がる（AEの問い・締めの見出しと同じ 1s・170ms ずらし） */
.vz-fde-common-ask-in { transition: translate 1s var(--ease) calc(var(--d, 0s) + var(--i, 0) * 170ms); }

@media (prefers-reduced-motion: no-preference) {
  /* 見出し：例（article.viz）が画面に入ったとき。本文：本文（p.viz）が画面に入ったとき */
  .js .vz-fde-common-ex:not(.is-in) .vz-fde-common-head > *,
  .js .vz-fde-common-body:not(.is-in) { opacity: 0; transform: translateY(10px); }
  /* 図（figure.viz）が画面に入ったとき */
  .js .vz-fde-common-fig:not(.is-in) .vz-fde-common-wipe { clip-path: inset(-12px calc(100% + 12px) -12px -12px); }  /* 左から */
  .js .vz-fde-common-fig:not(.is-in) .vz-fde-common-drop { clip-path: inset(-12px -12px calc(100% + 12px) -12px); }  /* 上から */
  .js .vz-fde-common-fig:not(.is-in) .vz-fde-common-fade { opacity: 0; }
  .js .vz-fde-common-fig:not(.is-in) .vz-fde-common-rise { opacity: 0; transform: translateY(8px); }
  .js .vz-fde-common-fig:not(.is-in) :is(.vz-fde-common-pt, .vz-fde-common-pt > path) { stroke-width: 0; }
  .js .vz-fde-common-fig:not(.is-in) .vz-fde-common-pop { opacity: 0; transform: scale(.92); }
  .js .vz-fde-common-fig:not(.is-in) .vz-fde-common-burst { opacity: 0; transform: scale(.4); }
  /* 線を描く（--t は描き終えるまでの時間。例①の実際の道は一定の速さで）。
     破線の模様（pathLength）は描いている間だけ使い、描き終えたら外す：線の太さを画面上で 1px に保つ指定（non-scaling-stroke）と
     pathLength を合わせると、図が原寸より大きいとき（縦長の図の幅400px）に、模様が線の終わりまで届かないため */
  .js .vz-fde-common-fig:not(.is-in) .vz-fde-common-draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  .js .vz-fde-common-fig.is-in .vz-fde-common-draw { animation: vz-fde-common-draw var(--t, 1.1s) var(--ease) var(--d, 0s) backwards; }
  .js .vz-fde-common-fig--ideal.is-in .vz-fde-common-draw { animation-timing-function: linear; }
  .js .vz-fde-common-fig:not(.is-in) .vz-fde-common-ask-in { translate: 0 110%; }

  /* 続く動き（例③だけ）：画面の線の上を、点が1つ左から右へ流れる。止まった形（動きを減らす設定・「動きを止める」）では出さない */
  .vz-fde-common-mover { animation: vz-fde-common-move 6s linear infinite; }
}
.vz-fde-common-mover { opacity: 0; }
@keyframes vz-fde-common-draw {
  from { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  to { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
}
@keyframes vz-fde-common-move {
  0% { transform: translateX(0); opacity: 0; }
  6%, 92% { opacity: 1; }
  100% { transform: translateX(var(--run)); opacity: 0; }
}


/* --- 面白さと大変さ（.vz-fde-extra） --- */
/* ---------- 左に面白さ3つ、右に大変さ2つ。各項目は 番号・見出し → 絵 → 本文（PE・AEの面白さと大変さと同じ形） ---------- */
.vz-fde-extra {
  --vz-fde-extra-gap: clamp(40px, 6vw, 96px);
  margin-top: clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--vz-fde-extra-gap); align-items: start;
}
/* 列の頭：上に1pxの黒い線 */
.vz-fde-extra-col { position: relative; min-width: 0; padding-top: 18px; border-top: 1px solid var(--ink); }
/* 左右を分ける縦の細線（画面に入ると上から引かれる） */
.vz-fde-extra-col--hard::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(var(--vz-fde-extra-gap) / -2); width: 1px;
  background: var(--line); clip-path: inset(0);
}
/* 列の見出し（面白さ／大変さ） */
.vz-fde-extra-head {
  font-size: var(--fs-h3); font-weight: 400; line-height: 1.5;
  color: var(--ink); font-feature-settings: "palt";
}
/* 1項目：番号と見出し → 絵 → 本文 */
.vz-fde-extra-item {
  display: grid; grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(28px, 3vw, 40px);
}
.vz-fde-extra-item + .vz-fde-extra-item { border-top: 1px solid var(--line-strong); }
.vz-fde-extra-item:last-child { padding-bottom: 0; }
.vz-fde-extra-title {
  display: flex; align-items: baseline; gap: 14px;
  font-size: clamp(1.125rem, 1rem + .35vw, 1.25rem); font-weight: 400; line-height: 1.5;
  color: var(--ink); font-feature-settings: "palt"; word-break: auto-phrase;
}
.vz-fde-extra-num {
  flex: none; font-family: var(--font-mono); font-size: 12.5px; font-weight: 400; letter-spacing: 0.1em;
  color: var(--muted); transform: translateY(-2px);
}
/* 本文：確定文言。読ませたい本文なので本文の色（--text） */
.vz-fde-extra-text { max-width: 36em; font-size: 15.5px; line-height: 2; color: var(--text); }

/* 絵：viewBox の幅 440 に対して、最大で原寸（440px）。線は画面上で常に 1px、点は常に 7px。ラベルはHTMLの文字 */
.vz-fde-extra-art { position: relative; width: 100%; max-width: 440px; aspect-ratio: 440 / 120; margin: 24px 0 44px; }
.vz-fde-extra-art--a1 { aspect-ratio: 440 / 88; }
.vz-fde-extra-art--a2 { aspect-ratio: 440 / 40; margin-bottom: 28px; }   /* ラベルなし：一本の線だけ */
.vz-fde-extra-art--a3 { aspect-ratio: 440 / 136; margin-top: 36px; margin-bottom: 56px; }  /* 上に「FDE」の札。下の2つの札は弧より下に出るので、下を広めに */
.vz-fde-extra-art--b1 { aspect-ratio: 440 / 128; margin-bottom: 40px; }
.vz-fde-extra-art--b2 { aspect-ratio: 440 / 112; }
/* もっともらしいもの（大変さ01）：この絵の主役の四角と、そこへ向かう扇の線。ライトでは --line-strong が白地に溶けて見えないので、
   四角は --muted（白地に対して約5:1）、扇の線は --faint に1段濃くする（ダークは --line-strong のままで見えている） */
:root[data-theme="light"] .vz-fde-extra-art--b1 { --vz-fde-extra-box: var(--muted); --vz-fde-extra-ln: var(--faint); }
.vz-fde-extra-art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
:where(.vz-fde-extra-art) path { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }

.vz-fde-extra-ln { stroke: var(--vz-fde-extra-ln, var(--line-strong)); }            /* 主の線 */
.vz-fde-extra-key { stroke: var(--ink); }                                          /* 強調の線（引き直した線・一気に引く線・届く1本・くだる線） */
.vz-fde-extra-dash { stroke: var(--muted); stroke-dasharray: 4 5; }                /* 破線：まだ決まっていない下書き・次の一手 */
.vz-fde-extra-box { stroke: var(--vz-fde-extra-box, var(--line-strong)); }         /* もっともらしいもの：薄い実線の四角 */
.vz-fde-extra-layer { stroke: var(--line-strong); }                                /* 地層の細い横線 */
.vz-fde-extra-layer--soft { stroke: var(--line); }
.vz-fde-extra-arrow { stroke: var(--muted); stroke-linecap: round; }               /* 矢じり */
.vz-fde-extra-flow { stroke: var(--ink); stroke-opacity: .55; stroke-dasharray: 2 14; }   /* 流れる点（.spec-lines-flow と同じ） */
/* 点：長さ0の線を、丸い線端で 7px の点として描く（絵が縮んでも直径は変わらない） */
.vz-fde-extra-dot { stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }
/* 白抜きの点：--ink の 7px の点に、地の色の 5px の点を重ねて 1px の輪にする */
.vz-fde-extra-hole { stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }
.vz-fde-extra-hole-in { stroke: var(--white); stroke-width: 5; stroke-linecap: round; }

/* ラベル：線や点に添える灰色の小さな字。標準は絵の真下で、--x を中心にする。--y があれば、その点の上下・右に置く */
.vz-fde-extra-lbl {
  position: absolute; top: calc(100% + 6px); left: var(--x, 50%);
  translate: var(--tx, -50%) var(--ty, 0); margin: var(--my, 0) 0 0 var(--mx, 0);
  font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap;
}
.vz-fde-extra-lbl--start { left: 0; --tx: 0; }                         /* 絵の左端にそろえる */
.vz-fde-extra-lbl--end { --tx: -100%; }                                /* 右端を --x に */
.vz-fde-extra-lbl--over { top: var(--y); --ty: -100%; --my: -10px; }   /* 点の上 */
.vz-fde-extra-lbl--under { top: var(--y); --my: 10px; }                /* 点の下 */

/* 登場の動き（初期の隠し方は下の @media の中だけ） */
.vz-fde-extra-wipe,
.vz-fde-extra-drop { clip-path: inset(-8px); transition: clip-path .9s var(--ease) var(--d, 0s); }
.vz-fde-extra-wipe--fast { transition: clip-path .32s cubic-bezier(.5, 0, .2, 1) var(--d, 0s); }   /* 速さが、桁違い：一気に引く */
.vz-fde-extra-fade { transition: opacity .7s var(--ease) var(--d, 0s); }
.vz-fde-extra-rise { transition: opacity .7s var(--ease) var(--d, 0s), transform .7s var(--ease) var(--d, 0s); }
.vz-fde-extra-text.vz-fde-extra-rise { --d: .1s; }
.vz-fde-extra-pt,
.vz-fde-extra-pt > path { transition: stroke-width .5s var(--ease) var(--d, 0s); }
.vz-fde-extra-head { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.vz-fde-extra-col--hard .vz-fde-extra-head { transition-delay: .1s; }
.vz-fde-extra-col--hard::before { transition: clip-path .9s var(--ease) .2s; }

@media (prefers-reduced-motion: no-preference) {
  /* 部品全体（.vz-fde-extra）が画面に入ったとき：列の見出しと縦線 */
  .js .vz-fde-extra:not(.is-in) .vz-fde-extra-head { opacity: 0; transform: translateY(10px); }
  .js .vz-fde-extra:not(.is-in) .vz-fde-extra-col--hard::before { clip-path: inset(0 0 100% 0); }
  /* 各項目（li.viz）が画面に入ったとき：その項目の見出し・絵・本文 */
  .js .vz-fde-extra-item:not(.is-in) .vz-fde-extra-rise { opacity: 0; transform: translateY(10px); }
  .js .vz-fde-extra-item:not(.is-in) .vz-fde-extra-wipe { clip-path: inset(-8px calc(100% + 8px) -8px -8px); }  /* 左から */
  .js .vz-fde-extra-item:not(.is-in) .vz-fde-extra-drop { clip-path: inset(-8px -8px calc(100% + 8px) -8px); }  /* 上から */
  .js .vz-fde-extra-item:not(.is-in) .vz-fde-extra-fade { opacity: 0; }
  .js .vz-fde-extra-item:not(.is-in) :is(.vz-fde-extra-pt, .vz-fde-extra-pt > path) { stroke-width: 0; }
  /* 線を描く：描いている間だけ破線の模様を使う（仕事の例の「線を描く」と同じ理由） */
  .js .vz-fde-extra-item:not(.is-in) .vz-fde-extra-draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  .js .vz-fde-extra-item.is-in .vz-fde-extra-draw { animation: vz-fde-common-draw var(--t, 1.1s) var(--ease) var(--d, 0s) backwards; }

  /* 続く動き（1つの絵に1つまで）：線の上を点が流れる（.spec-lines-flow と同じ値）。地層をくだる線だけ、ゆっくり */
  .vz-fde-extra-flow { animation: vz-fde-extra-flow 1.6s linear infinite; }
  .vz-fde-extra-flow--slow { animation-duration: 4.8s; }
}
@keyframes vz-fde-extra-flow { to { stroke-dashoffset: -16; } }

/* スマホ：面白さ → 大変さ の順に上下へ積む */
@media (max-width: 767px) {
  .vz-fde-extra { grid-template-columns: minmax(0, 1fr); row-gap: 64px; }
  .vz-fde-extra-col--hard::before { display: none; }
  .vz-fde-extra-title { gap: 12px; }
}

.viz.is-paused,
.viz.is-paused *,
.viz.is-paused *::before,
.viz.is-paused *::after { animation-play-state: paused !important; }

/* ---------- スクロールで現れる（main.js が、最初は画面の外にあるまとまりにだけ .reveal を付け、画面に入ったら .is-in を付ける） ----------
   冒頭の見出しの「せり上がる」文法を、ページの下まで続ける。動きは次の3つだけ：
   ・見出し（main.js が文節ごとに .ph-in で包む）：文節ごとに、文節の枠の下から順にせり上がる（.9s。文節ごとに 70ms ずつ遅らせる）
   ・本文・図・ラベル（.rv-fade）：上下には動かさず、opacity だけで静かに現れる（.6s）。見出しのあとに来るものは、見出しの 200ms 後。
     見出しの前に来るラベル（.rv-before）は、見出しと同時
   ・項目の上の線：節の上の黒い線と同じく、左から引かれる（1.4s）
   --rd は、同時に画面に入った仲間（横に並ぶ項目など）の中での順番による遅れ（main.js が 90ms ずつ入れる）。
   キーボードで中のリンクへ移ったときは、待たずに出す（:focus-within）。
   JSなし・動きを減らす設定・「動きを止める」で止めている間は、.reveal も .ph-in も付かないので、最初から完成形のまま */
.ph-rise .phrase {
  /* せり上がる文字を、文節の枠の下端で隠す（枠の大きさ・配置は変えない）。
     字面の上と、詰めた文字の左右、英字の下へのはみ出し（g・y など）の分だけ、隠す範囲を枠の外へ広げる */
  clip-path: inset(-.25em -.2em -.14em -.2em);
}
.phrase--whole { max-width: 100%; }
.ph-in {
  display: inline-block; max-width: 100%;
  transition: translate .9s var(--ease) calc(var(--rd, 0ms) + var(--i, 0) * 70ms);
}
.reveal:not(.is-in):not(:focus-within) .ph-in { translate: 0 110%; }

.rv-fade { transition: opacity .6s ease calc(var(--rd, 0ms) + 200ms); }
.rv-fade.rv-before { transition-delay: var(--rd, 0ms); }
.reveal.rv-fade:not(.is-in):not(:focus-within),
.reveal:not(.is-in):not(:focus-within) .rv-fade { opacity: 0; }

/* 項目の上の線（課題の2つの力・カルチャー・働く環境・募集職種の各行・職種ページの行と「向いている人」）：もとの線を透明にし、同じ位置に左から引く線を重ねる */
:is(.need-card, .feature, .env-item, .job-group, .rows > div, .fit-grid > li).reveal { position: relative; border-top-color: transparent; }
:is(.need-card, .feature, .env-item, .job-group, .rows > div, .fit-grid > li).reveal::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--line-strong);
}
/* 表の頭の黒い線（会社概要・ほかの職種・募集職種の最初の行の上） */
.company-table.reveal,
.other-jobs.reveal { position: relative; }
.company-table.reveal > div:first-child,
.other-jobs.reveal { border-top-color: transparent; }
.company-table.reveal::before,
.other-jobs.reveal::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--ink);
}
.other-jobs.reveal::before { top: -1px; }
.job-group.reveal:first-of-type::before { background: var(--ink); }
:is(.need-card, .feature, .env-item, .job-group, .rows > div, .fit-grid > li, .company-table, .other-jobs).reveal::before {
  pointer-events: none; transform-origin: left;
  transition: transform 1.4s var(--ease) var(--rd, 0ms);
}
:is(.need-card, .feature, .env-item, .job-group, .rows > div, .fit-grid > li, .company-table, .other-jobs).reveal:not(.is-in):not(:focus-within)::before { transform: scaleX(0); }
/* main.js が隠す準備をしている一瞬（html.rv-setup）：隠れた状態へは、移り変わりなしで切り替える */
.rv-setup :is(.rv-fade, .ph-in),
.rv-setup .reveal::before { transition: none !important; }

/* ---------- 動きを減らす設定の利用者向け ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}

/* ---------- 「動きを止める」ボタンで止めている間（html[data-motion="off"]。head のスクリプトと main.js が付ける） ----------
   見え方は、動きを減らす設定と同じ完成形にする。ただし動きを「消す」（animation: none）のではなく「一瞬で終わらせる」：
   消すと、登場の動き（線を引く・説明文がせり上がる）が始まる前の隠れた形に戻ってしまい、再開したときに登場をやり直してしまうため。
   点が流れるなどの続く動きは、一度だけ一瞬で終わって元の形（動きを減らす設定と同じ止まった形）に戻る。再開すると、元の速さで続きから動く。
   画面外の図の一時停止（.viz.is-paused）も、止めている間は効かせない（動きの最初の形のまま止まると、点が透明のまま残る図があるため） */
:root[data-motion="off"] { scroll-behavior: auto; }
:root[data-motion="off"] *,
:root[data-motion="off"] *::before,
:root[data-motion="off"] *::after {
  animation-duration: .01ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  animation-play-state: running !important;
  transition-duration: .01ms !important;
  transition-delay: 0s !important;
}
/* 図の続く動きは、最後のこま（fill）を残さず元の形に戻す（品質ゲートの図で、回数の点が白抜きのまま残らないように）。
   輪を回る点は、動きを減らす設定と同じく出さない */
:root[data-motion="off"] .viz *,
:root[data-motion="off"] .viz *::before,
:root[data-motion="off"] .viz *::after { animation-fill-mode: none !important; }
:root[data-motion="off"] .vz-gate-runner { display: none !important; }