/* =====================================================================
   案 D — 参考: worldquantfoundry.com（2026-08-01 再実測 / 1440×900）
   実測ソース: docs/trace/plan-d-ref.json ／ refprobe（テキスト特定による採寸）

   前版の誤読を訂正した v2。参照の実体は「全画面パネルの連続」ではなく:
     ・角丸 20px の**シート**が -20px ずつ重なって積層する（hero → 明色 → 巨大ダーク → footer）
     ・見出しの基準は **30/30 w500 uppercase**（40px は声明のみ・78px はフォーカスリストのみ）
     ・ラベルと本文は **12/15.008 の Azeret Mono**
     ・ボタンは枠線ではなく**角括弧コーナーの mono リンク**
     ・カードは **425×648 角丸20** の色面（ink / brand / brand-2 / brand-tint の**明度4段**）
     ・節の型は 2 つだけ: [左668の見出し ｜ 右384の mono]  と  [中央見出し + 部品]
   ===================================================================== */
:root {
  /* 色 — 参照の**明度 L* を保ったまま色相だけ VACAN Violet へ回した**（docs/color-system.md）。
     明度が動いていないので、レイアウトの印象もコントラストの構造も参照のまま変わらない。
     ニュートラルにも紫を 1〜2% 混ぜてある（純グレーは「選ばれていない色」に見える）。 */
  --d-core-black: #0E0B12;      /* L* 2.5 → 3.4 */
  --d-rich-carbon: #171320;     /* L* 5.1 → 6.8 */
  --d-urban-smoke: #221C2E;     /* L* 9.8 → 11.7 */
  --d-pulse-ash: #6F6783;       /* ブランドの text-3 と完全一致 */
  --d-off-white: #EDE9F4;       /* L* 91.6 → 92.9 */
  --d-neural-fog: #DFD8EA;      /* L* 87.1 → 87.4 */
  --d-white-flash: #F3EFFB;     /* ブランドの brand-tint と完全一致 */

  /* ブランド（docs/requirements.md §6.1）。参照の寒色・暖色アクセント2色をこれで置き換える */
  --d-brand: #512376;           /* VACAN Violet */
  --d-brand-2: #7C4DBD;
  --d-brand-3: #A98BC4;         /* 暗面用の明るい紫（brand-2 だけでは暗面で段が足りない） */
  --d-brand-ink: #3C1A5C;
  --d-accent: #00A896;          /* 成果・データのみ。**白地では 2.98:1 で AA 不合格**なので暗面限定 */

  /* 面ごとの前景・背景（3層で管理。known-traps C） */
  --d-bg: var(--d-neural-fog);
  --d-fg: var(--d-rich-carbon);
  --d-fg2: #5C5470;
  --d-line: rgba(23, 19, 32, .18);

  /* 余白（実測 gap 8 / 24 / 32 / 40 / 100 / 120 / 200） */
  --d-g1: 8px; --d-g2: 24px; --d-g3: 32px; --d-g4: 40px;
  --d-g5: 100px; --d-g6: 120px; --d-g7: 200px;
  --d-side: 40px;
  --d-w: 1360px;
  --d-colL: 668px;                      /* ethos 行の左カラム（実測） */
  --d-colR: 384px;                      /* 同 右カラム（実測: 右端 flush で x1016 から） */
  --d-card-w: 425px;                    /* カラーカード（実測） */
  --d-card-h: 648px;

  /* 角丸: シートとカードは 20px、細部は 1px（実測の 2 系統） */
  --d-r: 1px;
  --d-r-lg: 20px;

  /* モーション（実測: 全部 cubic-bezier(.62,.16,.13,1.01)） */
  --d-ease: cubic-bezier(.62, .16, .13, 1.01);
  --d-out: cubic-bezier(.2, .8, .2, 1);      /* 収束系。hover/press の戻りに使う */
  --d-d1: .3s; --d-d2: .4s; --d-d3: .5s;
  /* ---- 登場（節の reveal）専用。docs/motion-sections.md の譜面 ----
     登場は減速カーブだけを使う。--d-ease は cubic-bezier(.62,.16,.13,1.01) で
     終端がわずかに跳ねるので、登場に使うと全節が跳ねて品がない。 */
  --d-enter: cubic-bezier(.16, .84, .28, 1);
  --d-step: 60ms;                            /* stagger の1刻み（案件の入場値） */
  --d-e1: .40s;  /* 小さい要素（ラベル文字・リード） */
  --d-e2: .56s;  /* 見出し（主役なので少し長い） */
  --d-e3: .64s;  /* 部品（カード・大きい塊） */
  --d-e4: .72s;  /* 罫線（横幅いっぱいを引くので最も長い） */

  /* eyebrow に和文が入るので、和文フォントをフォールバックに足す。
     入れないと OS 既定の等幅（ヒラギノ角ゴ等ではない）に落ちて字面が本文と揃わない。 */
  --d-mono: "Azeret Mono", ui-monospace, SFMono-Regular, "Noto Sans JP", "Hiragino Sans", monospace;
  /* 参照の見出しは Roc Grotesk（商用）。**資産は複製せず**同じ骨格の Archivo で代替する（--subst） */
  --d-sans: "Archivo", "Inter", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.d-body {
  margin: 0; background: var(--d-core-black); color: var(--d-fg);
  font-family: var(--d-sans); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* リセットは **:where() で特異性0** にする。
   `.d-body p { margin:0 }`（0,1,1）はクラス1つの規則（0,1,0）に常に勝ってしまい、
   margin-inline:auto のセンタリングと margin-top のリズムを全部殺す（known-traps A-5）。 */
:where(.d-body) :where(h1, h2, h3) { margin: 0; font-weight: 500; }
:where(.d-body) :where(p, ul, ol, dl) { margin: 0; }
:where(.d-body) :where(ul, ol) { list-style: none; padding: 0; }
.num { font-variant-numeric: tabular-nums; }
.d-skip { position: absolute; left: -9999px; top: 0; z-index: 9999; background: var(--d-off-white); color: var(--d-core-black); padding: 12px 20px; }
.d-skip:focus { left: 12px; top: 12px; }
/* リセットの特異性が auto センタリングとリズムを殺さないよう、以降は (0,2,0) で書く（known-traps A-5） */

/* ---- 面の色 ---- */
/* 副文字（--d-fg2）は面ごとに AA 4.5:1 以上を実測（括弧内が実測比） */
.is-ink      { --d-bg: var(--d-core-black);  --d-fg: var(--d-off-white);   --d-fg2: #9B93AD; --d-line: rgba(237,233,244,.18); }  /* 6.67 */
.is-violet   { --d-bg: var(--d-brand);       --d-fg: #FFFFFF;              --d-fg2: #C9B5DE; --d-line: rgba(255,255,255,.26); }  /* 6.02 */
.is-violet-2 { --d-bg: var(--d-brand-2);     --d-fg: #FFFFFF;              --d-fg2: #F0E9F8; --d-line: rgba(255,255,255,.3); }   /* 4.85 */
.is-violet-3 { --d-bg: var(--d-brand-3);     --d-fg: #241C30;              --d-fg2: #2E2639; --d-line: rgba(36,28,48,.26); }     /* 4.94 */
.is-fog      { --d-bg: var(--d-neural-fog);  --d-fg: var(--d-rich-carbon); --d-fg2: #5C5470; --d-line: rgba(23,19,32,.2); }      /* 5.12 */
.is-flash    { --d-bg: var(--d-white-flash); --d-fg: var(--d-brand-ink);   --d-fg2: #5C5470; --d-line: rgba(23,19,32,.2); }      /* 6.27 */
.is-dark     { --d-bg: var(--d-rich-carbon); --d-fg: var(--d-off-white);   --d-fg2: #9B93AD; --d-line: rgba(237,233,244,.16); }  /* 6.23 */
.is-smoke    { --d-bg: var(--d-urban-smoke); --d-fg: var(--d-off-white);   --d-fg2: #9B93AD; --d-line: rgba(237,233,244,.18); }  /* 5.63 */

/* =====================================================================
   入場（実測 @keyframes loader / loader-logo。CSS だけで完結）
   ===================================================================== */
@keyframes d-loader { 0%, 60% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes d-loader-logo { 0% { opacity: 0; transform: translateY(12px); } 40%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.d-loader {
  position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center;
  background: var(--d-core-black); color: var(--d-off-white);
  animation: d-loader 2s var(--d-ease) .2s both; pointer-events: none;
}
.d-loader__l { animation: d-loader-logo 1s var(--d-ease) both; }

/* =====================================================================
   ヘッダー: 最上部は透明バー → スクロールで中央のダークピルに変形（実測）
   ===================================================================== */
.d-hd {
  position: fixed; inset: 0 0 auto; z-index: 800; height: 78px;
  display: flex; align-items: center; gap: var(--d-g4);
  padding: 0 var(--d-side); color: var(--d-off-white);
  background: transparent; border-radius: 0;
  transition: transform var(--d-d3) var(--d-ease), background var(--d-d3) var(--d-ease),
              height var(--d-d3) var(--d-ease), border-radius var(--d-d3) var(--d-ease),
              padding var(--d-d3) var(--d-ease), box-shadow var(--d-d3) var(--d-ease);
}
.d-hd.is-pill {
  left: 50%; right: auto; top: 14px; transform: translateX(-50%);
  height: 52px; padding: 0 10px 0 18px; gap: var(--d-g3);
  background: rgba(14, 11, 18, .92); backdrop-filter: blur(10px);
  border-radius: 999px; box-shadow: 0 10px 34px rgba(0, 0, 0, .34);
}
.d-hd__logo { display: flex; flex: none; }
/* ロゴは最上部だけ2倍（16px → 32px）。ピルに変形したら元の 16px に戻す。
   svg の height="16" は装飾属性なので、この宣言が優先される。
   ピルの変形と同じ duration / easing で縮めて、動きを1つに揃える。 */
.d-hd__logo svg { height: 32px; transition: height var(--d-d3) var(--d-ease); }
.d-hd.is-pill .d-hd__logo svg { height: 16px; }
.d-hd__nav { display: flex; align-items: center; gap: var(--d-g3); margin-left: auto; }
.d-hd__nav a {
  font-family: var(--d-mono); font-size: 12px; line-height: 15.008px; font-weight: 400;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  transition: opacity var(--d-d1) var(--d-ease);
}
.d-hd__nav a:hover { opacity: .62; }
.d-hd__cta {
  position: relative; isolation: isolate; overflow: hidden;   /* 輪は固定ヘッダの中に収める */
  padding: 9px 16px; border-radius: 999px;
  background: var(--d-off-white); color: var(--d-core-black);
  transition: background var(--d-d1) var(--d-ease), color var(--d-d1) var(--d-ease),
              transform var(--d-d3) var(--d-out);
}
.d-hd__cta:hover { background: var(--d-brand); color: #FFFFFF; opacity: 1; }
@media (max-width: 1023px) { .d-hd__nav > a:not(.d-hd__cta) { display: none; } }
/* SP の最上部: ロゴ2倍（幅244px）のままだとハンバーガー＋CTAで合計幅が画面を超え、
   「応募する」が右に見切れていた（2026-08-04 指摘）。ロゴを 20px に抑え、間隔も詰める。
   360px幅でも 合計 ≈ 358px で収まる実測値 */
@media (max-width: 1023px) {
  .d-hd { gap: var(--d-g2); }
  .d-hd__logo svg { height: 20px; }
}
/* SP はタップ寸法の関係で CTA の上下余白が 4px になる（実測）。右も同じ 4px に揃える
   （右 10px のままだと上下の 2.5 倍で、白ピルが左に寄って見えていた） */
@media (max-width: 1023px) { .d-hd.is-pill { padding-right: 4px; } }
/* SP のメニュー。リンクを消しっぱなしにせず、ハンバーガー＋パネルで PC と同じ3項目を出す */
.d-hd__burger { display: none; }
@media (max-width: 1023px) {
  .d-hd__burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px;
    background: transparent; color: currentColor; cursor: pointer;   /* タップ域44px（QA） */
  }
  .d-hd__burger svg { width: 20px; height: 20px; }
}
.d-hd__panel {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 224px;
  display: none; flex-direction: column; padding: 10px;
  background: rgba(14, 11, 18, .96); backdrop-filter: blur(10px);
  border-radius: 20px; box-shadow: 0 18px 44px rgba(0, 0, 0, .4);
}
.d-hd.is-menu .d-hd__panel { display: flex; }
.d-hd__panel a {
  padding: 13px 16px; border-radius: 12px; color: var(--d-off-white);
  font-family: var(--d-mono); font-size: 13px; line-height: 18px; letter-spacing: .08em;
}
.d-hd__panel a:hover { background: rgba(237, 233, 244, .08); }

/* =====================================================================
   V1 HERO — 100dvh・渦の点群が全面・H1 は中央 626px 柱で左右に振り分け
   ===================================================================== */
.d-hero {
  position: relative; height: 100dvh; min-height: 720px;
  /* 白ベース（案A・2026-09-04 しのさん指示）: White Flash（brand-tint）に墨字。
     直後の明色シート（#DFD8EA）との段差で角丸シートの積層は保たれる。
     職種ページのヒーロー（d-jobtop）は暗いまま＝この規則は TOP 専用の .d-hero にだけ効く */
  background: var(--d-white-flash); color: var(--d-rich-carbon); overflow: hidden;
}
.d-hero__bg { position: absolute; inset: 0; z-index: 0; }
.d-hero .d-obj {
  position: absolute; inset: 0; width: 100%; height: 100%;
  max-width: none; aspect-ratio: auto; margin: 0; opacity: 1;
}
/* 見出しは**左揃えの3行**。行の起点が1本に揃うので、どの幅でもガタつかない。
   旧版の左右振り分けは PC で軸が3本（594/356/297px）でき、SP では8行に破断していた
   （docs/hero-text.md）。入場は「整列」— 粒の位置から文節ごとに定位置へ寄る。 */
/* eyebrow と見出しをまとめた器。節（.d-ethos）とまったく同じ幅・同じ左端に載せる。
   以前は見出しだけを画面左端基準にしていて、1440px を超える幅で
   節ラベル「00 Recruit」と最大 560px ずれていた。 */
.d-hero__t {
  position: absolute; z-index: 1; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  max-width: calc(var(--d-w) + var(--d-side) * 2); margin-inline: auto;
  padding-inline: var(--d-side);
}
/* 和文なので uppercase を掛けない（掛けると FORWARD DEPLOYED ENGINEER になる）。
   字送りも和文向けに .18em → .04em まで詰める。SP では2行に折り返す（許容）。 */
.d-hero__eb {
  font-family: var(--d-mono); font-size: 12px; line-height: 19px; font-weight: 400;
  letter-spacing: .04em; text-transform: none; color: var(--d-brand-3);
  margin: var(--d-g3) 0 0;     /* 見出しの下に置くので余白は上側 */
}
.d-hero__h {
  display: grid; justify-items: start; gap: 0;
  margin: 0; font-weight: 500; letter-spacing: -.01em;
}
/* 文言が 3行14字 → 2行12字に短くなったぶん、字寸を 60 → 70px に上げて
   器の占有（最長行 / 器 = 61%）を現行と揃える。実測で逆算した値。 */
.d-hero__ln {
  display: block; white-space: nowrap;
  font-size: clamp(24px, 4.84vw, 70px); line-height: 1.22;
}
.d-hero__g { display: inline-block; will-change: transform, opacity, filter; }
/* 入場: eyebrow は見出しの**下**にあるので、整列が終わってから出す。
   整列し切るのは実測 2,885ms。その直後に置いて読み順と動きの順を一致させる。 */
.d-hero__eb { opacity: 0; animation: d-eb-in .7s var(--d-out) 2.94s forwards; }
.no-js .d-hero__eb { opacity: 1; animation: none; }
@keyframes d-eb-in { from { opacity: 0; transform: translateY(6px); }
                     to   { opacity: 1; transform: none; } }
.d-hero .ac { color: var(--d-brand); }        /* 白地では brand-3 が淡すぎる。深紫に */
/* 白地のヒーロー用の周辺調整（案A）:
   - 粒はブランド暗紫（実描画の濃度は js 側 grain の明面チューニングとセット）
   - 最上部の透明バーは白地に乗るので墨字。ピル変形後は従来どおりダークピル
   - 白地に白ピルが沈むので、最上部だけ応募ボタンを墨塗りに反転
   - ローダーも白版に。いずれも職種ページ（d-body--job）には効かせない */
.d-hero .d-obj { color: var(--d-brand-ink); }
.d-hero__eb { color: var(--d-fg2); }
.d-body:not(.d-body--job) .d-hd:not(.is-pill) { color: var(--d-rich-carbon); }
.d-body:not(.d-body--job) .d-hd:not(.is-pill) .d-hd__cta {
  background: var(--d-rich-carbon); color: var(--d-off-white);
}
.d-body:not(.d-body--job) .d-loader { background: var(--d-white-flash); color: var(--d-rich-carbon); }
@media (max-width: 1023px) {
  /* SP は折り返す。指定が無いと「なる。」だけが3行目に落ちて孤立するので、
     文節で割って行を均す（CJK は auto-phrase、対応外は balance が受ける）。 */
  .d-hero__ln {
    /* 7.2vw（390pxで28px）は画面に対して小さく「ダサい」と指摘（2026-08-04）。
       約1.5倍の 10.8vw に。最長行7字 × 42px(390px時) = 294px で折り返しも起きない */
    white-space: normal; font-size: clamp(34px, 10.8vw, 52px); line-height: 1.3;
    word-break: auto-phrase; text-wrap: balance;
  }
  /* eyebrow は SP で2行に折り返す（実測 364px > 器 350px）。行送りを詰めて締める */
  .d-hero__eb { line-height: 17px; margin-top: var(--d-g2); margin-bottom: 0; }
}

/* =====================================================================
   シート — 角丸 20px。前のシートに -20px 重なる（実測 -mt-[20px] / -mt-px）
   ===================================================================== */
.d-sheet { position: relative; z-index: 1; border-radius: var(--d-r-lg); margin-top: -20px; overflow: hidden; }
.d-sheet--light { background: var(--d-neural-fog); color: var(--d-rich-carbon); }
.d-sheet--dark {
  background: var(--d-rich-carbon); color: var(--d-off-white);
  --d-bg: var(--d-rich-carbon); --d-fg: var(--d-off-white); --d-fg2: #9B93AD; --d-line: rgba(231,231,231,.16);
}

/* ---- 節の外枠（実測 py-[120px] md:py-[200px]） ---- */
.d-ethos, .d-cent, .d-focuswrap {
  padding: var(--d-g6) var(--d-side); max-width: calc(var(--d-w) + var(--d-side) * 2);
  margin-inline: auto;
}
.d-body .d-cent--close { padding-bottom: var(--d-g7); }
/* 14 Join Us の背景 — 人と空間（Two Planes・案B）。器いっぱいに敷いて本文の下に置く。
   線と光点が主役の絵なので、本文の可読性は点群側の淡さ（α .34/.52）で担保する */
.d-cent--close { position: relative; overflow: hidden; }
.d-cent--close > * { position: relative; z-index: 1; }
.d-cent--close .d-close__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* 基底 .d-obj の正方形指定を解除して節いっぱいに（正方形のままだと絵が下へはみ出て、
   2枚の面が「層」として読めない） */
.d-close__bg .d-obj { position: absolute; inset: 0; width: 100%; height: 100%;
  max-width: none; aspect-ratio: auto; margin: 0; }
/* 背景としては一歩引かせる（2026-08-04 指示: opacity 70%） */
.d-close__bg .d-obj.is-live { opacity: .7; }
.d-close__bg .d-obj__c { width: 100%; height: 100%; display: block; }

/* ---- 章ラベル（12 mono uppercase・全幅の罫線帯） ---- */
.d-chap {
  display: flex; align-items: baseline; gap: var(--d-g2);
  font-family: var(--d-mono); font-size: 12px; line-height: 15.008px; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase; color: var(--d-fg2);
  padding-bottom: var(--d-g1); border-bottom: 1px solid var(--d-line);
}
.d-chap b { font-weight: 400; color: var(--d-fg); letter-spacing: .18em; }
.d-chap em { font-style: normal; letter-spacing: .04em; }
.d-chap__n { margin-left: auto; }

/* =====================================================================
   V2 ethos 行 — [見出し 30/30 左 668px ｜ mono 右 384px（右端 flush）]
   ===================================================================== */
.d-ethos__row {
  display: grid; grid-template-columns: var(--d-colL) minmax(0, var(--d-colR));
  justify-content: space-between; gap: var(--d-g4);
  margin-top: var(--d-g4);
  align-items: start;          /* 既定の stretch だと 1行の h2 が右段の高さまで伸びる */
}
.d-h2 {
  font-size: 30px; line-height: 1.4; font-weight: 500;
  letter-spacing: -.005em;
  /* uppercase は当てない。和文の見出しに入る欧字の固有名詞が壊れる
     （実測: Claude Code → CLAUDE CODE / VACAN Technologies → VACAN TECHNOLOGIES /
      Forward Deployed Engineer → 全大文字。4見出しが該当していた）。
     章ラベル .d-chap の uppercase は英語のラベルなので残す。 */
}
.d-h2--c { text-align: center; max-width: 900px; margin-inline: auto; }
/* 左カラムに見出し＋部品を積む枠（08 の道具一覧） */
.d-ethos__l { display: grid; gap: var(--d-g3); align-content: start; }
.d-ethos__l .d-code { margin: 0; }
.d-ethos__r { font-family: var(--d-mono); font-size: 12px; line-height: 20px; letter-spacing: .01em; }
/* 本文の段落だけ和文用の書体に戻す（mono は CJK を持たず、1行に2書体が混ざる）。
   12px は本文として小さすぎたので 15px / 26px に上げる。 */
.d-ethos__r p:not(.d-say):not(.d-allpos) {
  font-family: var(--d-sans); font-size: 15px; line-height: 26px; letter-spacing: 0;
}
.d-body .d-ethos__r > * + * { margin-top: var(--d-g2); }
.d-ethos__r b { font-weight: 700; }
.d-ethos__note { color: var(--d-fg2); }
/* 節の下に置く全幅の部品 */
.d-body .d-ethos > *:nth-child(n+3) { margin-top: var(--d-g5); }
.d-body .d-cent > *:nth-child(n+3) { margin-top: var(--d-g5); }

/* ---- 共通のテキスト型 ---- */
.d-lead {
  max-width: 668px; margin-inline: auto; margin-top: var(--d-g4);
  font-family: var(--d-mono); font-size: 12px; line-height: 20px; text-align: center;
}
.d-state {
  font-size: 40px; line-height: 1.35; font-weight: 500; text-transform: uppercase;
  text-align: center; max-width: 900px; margin-inline: auto;
}
.d-state--h { text-transform: none; }
.d-say { font-size: 22px; line-height: 26px; font-weight: 500; font-family: var(--d-sans); }
.d-prose {
  max-width: 668px; margin-inline: auto;
  font-family: var(--d-mono); font-size: 12px; line-height: 22px;
}
.d-body .d-prose > * + * { margin-top: var(--d-g2); }
.d-prose--c { text-align: center; }
.d-h3 { font-size: 30px; line-height: 1.4; font-weight: 500; text-transform: uppercase; }
.d-h3 em { font-style: normal; font-size: 12px; letter-spacing: .18em; color: var(--d-fg2); margin-left: 10px; }
.d-note { font-family: var(--d-mono); font-size: 11px; line-height: 18px; color: var(--d-fg2); }
.d-allpos, .d-jl__k {
  font-family: var(--d-mono); font-size: 12px; line-height: 15.008px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--d-fg2);
}
.d-jl__k em { font-style: normal; letter-spacing: .02em; text-transform: none; margin-left: 10px; }
.d-chip {
  display: inline-block; border: 1px solid currentColor; border-radius: var(--d-r);
  padding: 3px 10px; font-family: var(--d-mono); font-size: 11px; line-height: 15px;
  text-transform: none; letter-spacing: 0; vertical-align: middle;
}

/* =====================================================================
   角括弧コーナーの mono リンク（参照の JOIN US / MEET THE TEAM 型）
   ===================================================================== */
/* Magnetic Grain（案C）。ヒーローの点群がマウスに反応して整列する関係を、ボタンにも持ち込む。
   ・カーソルに連動させるのは**傾き（最大3px）と光の位置だけ**。
     角括弧のような「位置が意味を持つ」部品は連動させない（known-traps A-8）。
     hover / 非hover の2状態だけにして必ず収束させる。
   ・押した点から 1px の輪が2重に広がる。輪は寸法で広げる（transform:scale だと線幅も太る）。
   ・沈み込みは `scale` プロパティ。transform だと追従の translate を上書きしてしまう。 */
.d-brk {
  position: relative; display: inline-block; padding: 11px 20px; isolation: isolate;
  font-family: var(--d-mono); font-size: 12px; line-height: 15.008px;
  letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; text-align: center;
  transition: color var(--d-d1) var(--d-ease), background var(--d-d1) var(--d-ease),
              transform var(--d-d3) var(--d-out);
}
.d-brk::before, .d-brk::after {
  content: ""; position: absolute; width: 9px; height: 9px;
  border: 1px solid currentColor;
  transition: inset var(--d-d1) var(--d-out), opacity .26s var(--d-out);
}
.d-brk::before { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.d-brk::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.d-brk:hover::before, .d-brk:focus-visible::before { left: -3px; top: -3px; }
.d-brk:hover::after, .d-brk:focus-visible::after { right: -3px; bottom: -3px; }

/* 輪郭の内側を走る 1px の光。奥行きはここで担う（角括弧を動かす代わり） */
.d-brk__e {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(169, 139, 196, 0);
  transition: box-shadow var(--d-d1) var(--d-out);
}
.d-brk:hover .d-brk__e, .d-brk:focus-visible .d-brk__e,
.d-btn:hover .d-brk__e, .d-btn:focus-visible .d-brk__e {
  box-shadow: inset 0 0 0 1px rgba(169, 139, 196, .34);
}
/* カーソルを追う光。位置がズレても壊れて見えないので、これだけ連動させてよい */
.d-brk__g { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  border-radius: inherit; }
.d-brk__g::before {
  content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%;
  left: var(--bx, 50%); top: var(--by, 50%);
  transform: translate(-50%, -50%) scale(.4); opacity: 0;
  background: radial-gradient(circle, rgba(124, 77, 189, .85), rgba(124, 77, 189, 0) 68%);
  transition: transform .45s var(--d-out), opacity .45s var(--d-out);
}
.d-brk:hover .d-brk__g::before, .d-brk:focus-visible .d-brk__g::before,
.d-btn:hover .d-brk__g::before, .d-btn:focus-visible .d-brk__g::before,
.d-hd__cta:hover .d-brk__g::before, .d-hd__cta:focus-visible .d-brk__g::before {
  transform: translate(-50%, -50%) scale(1); opacity: 1;
}
/* 押した点から広がる輪。**寸法で広げる**ので線幅は 1px のまま（サイトの罫線と同じ細さ） */
.d-brk__r {
  position: absolute; z-index: 1; width: 0; height: 0; box-sizing: border-box;
  border: 1px solid var(--d-brand-3); border-radius: 50%; pointer-events: none;
  left: var(--cx, 50%); top: var(--cy, 50%); transform: translate(-50%, -50%); opacity: 0;
}
.d-brk.is-hit .d-brk__r, .d-btn.is-hit .d-brk__r, .d-hd__cta.is-hit .d-brk__r {
  animation: d-rip 1.05s var(--d-out) both;
}
.is-hit .d-brk__r--2 { animation-delay: .17s; }
@keyframes d-rip {          /* 1.05s / 0→176px。ボタン幅ぶんに収め、本文を横切らせない */
  0%   { width: 0;     height: 0;     opacity: 0; }
  8%   { opacity: .8; }
  70%  { opacity: .42; }
  100% { width: 176px; height: 176px; opacity: 0; }
}
.d-brk.is-hit, .d-btn.is-hit, .d-hd__cta.is-hit { animation: d-press .34s var(--d-out); }
@keyframes d-press { 0% { scale: 1; } 34% { scale: .955; } 100% { scale: 1; } }

.d-brk--strong { background: var(--d-fg); color: var(--d-bg); }
.d-brk--strong:hover { background: transparent; color: var(--d-fg); }
/* 塗りのときは角括弧を出さない（塗りが形を示している。端で切れてヒゲに見えるだけ） */
.d-brk--strong::before, .d-brk--strong::after { opacity: 0; }
.d-brk--strong:hover::before, .d-brk--strong:hover::after,
.d-brk--strong:focus-visible::before, .d-brk--strong:focus-visible::after { opacity: 1; }
.d-brk--big { padding: 16px 28px; font-size: 14px; line-height: 16.8px; }
@media (hover: none), (pointer: coarse) {
  .d-brk, .d-btn, .d-hd__cta { transform: none !important; }
}
.d-ctas { display: flex; flex-wrap: wrap; gap: var(--d-g2); }
.d-ctas--c { justify-content: center; margin-top: var(--d-g4); }

/* =====================================================================
   V4 focus — h-dvh 中央の大文字リスト 78/78（明度で焦点をつくる）
   ===================================================================== */
.d-focuswrap { display: grid; align-content: center; min-height: 100dvh; }
.d-focus { display: grid; gap: 0; text-align: center; margin-top: var(--d-g4); }
.d-focus li {
  font-size: 78px; line-height: 78px; font-weight: 500;
  text-transform: uppercase; letter-spacing: -.01em;
}
/* hover のスロット — 同じ文言が文字領域の下から迫り上がって入れ替わる。
   ・クリップは行の箱（.d-roll）。B は inset:0 なので A と必ず同じ高さになり、
     送り量 100% が 1行ぶんとピタリ一致する（実測 78px / SP の2行折れでも 68px で一致）
   ・**語ごとの stagger は採らない**。語を inline-block に割るとカーニングが切れて
     y で終わる語の直後で行幅が +3.73px 太る（実測）。行ごと一体で送れば字面は 0.00px 保たれる
   ・duration は --d-d2（.4s）。送り量が 78px と大きいので、ヘッダーの hover（.3s）より一段長い
   ・入りは --d-ease（サイト共通の実測カーブ）、戻りは --d-out（トークン定義どおり「hover の戻り」用）
   ・**色は時間で変えない。迫り上がる B を最初から VACAN Violet で持つ。**
     色を transition で動かすと「何秒でやるか」の設定を入場 reveal（`[data-r] [data-b]`）と
     取り合うことになり、奪われるとハードカットになる。B の色を固定しておけば、
     色の変化は**送りそのもの**なので必ず送りと同じ 0.4秒で終わる（設定の取り合いが起きない）
   ・色は地の #171320 → VACAN Violet #512376。明色シート #DFD8EA に対して **8.18:1 = AAA**
     （--d-brand-2 #7C4DBD だと 4.15:1 で AAA を欠くので使わない） */
.d-focus a { display: block; }
.d-roll { position: relative; display: block; overflow: hidden; }
.d-roll__l { display: block; transition: transform var(--d-d2) var(--d-out); }
.d-roll__l--b { position: absolute; inset: 0; transform: translateY(100%); color: var(--d-brand); }
.d-focus a:hover .d-roll__l,
.d-focus a:focus-visible .d-roll__l {
  transform: translateY(-100%); transition-timing-function: var(--d-ease);
}
.d-focus a:hover .d-roll__l--b,
.d-focus a:focus-visible .d-roll__l--b {
  transform: translateY(0); transition-timing-function: var(--d-ease);
}
/* 上下の4段の「薄さ」は **透明度ではなく色そのもの**で作る。
   透明度でやると hover のとき薄さを解く動きが要り、その速度指定を入場 reveal
   （`[data-r] [data-b]`）と取り合って **0.64s に奪われ、文字と色の 0.4s から遅れて追いつく**。
   色で作れば hover 側で触るものが無くなり、動くのは「送り」だけになる（＝必ず 0.4s で完結）。

   単色の地の上なので、透明度と色は**計算で完全に一致する**（α·#171320 + (1−α)·#DFD8EA）:
     .30 → #A39DAD ／ .46 → #837D8D ／ .64 → #5F5A69 ／ .82 → #3B3644
   color-mix で書くとトークン（--d-fg / --d-bg）から自動で出るので、地の色を変えても追従する。
   非対応ブラウザ用に同じ値の16進を先に置く（落ちても「薄くならない」だけで読める）。 */
.d-focus li:nth-child(1), .d-focus li:nth-last-child(1) {
  color: #A39DAD; color: color-mix(in srgb, var(--d-fg) 30%, var(--d-bg));
}
.d-focus li:nth-child(2), .d-focus li:nth-last-child(2) {
  color: #837D8D; color: color-mix(in srgb, var(--d-fg) 46%, var(--d-bg));
}
.d-focus li:nth-child(3), .d-focus li:nth-last-child(3) {
  color: #5F5A69; color: color-mix(in srgb, var(--d-fg) 64%, var(--d-bg));
}
.d-focus li:nth-child(4), .d-focus li:nth-last-child(4) {
  color: #3B3644; color: color-mix(in srgb, var(--d-fg) 82%, var(--d-bg));
}
/* 迫り上がる B は**薄さを継がない**。上の色は li に載るので、B に色を直接書いて上書きする
   （B の指定は .d-roll__l--b にあり、この4段より詳細度が低いのでここで効かせ直す）。 */
.d-focus li .d-roll__l--b { color: var(--d-brand); }
/* SP では「Why VACAN Technologies」だけ2行に折れる（390px で実測）。
   行ごと一体で送る方式なら、B の高さ（inset:0）が A の2行ぶんに追従するので分岐は要らない。 */
@media (max-width: 1023px) { .d-focus li { font-size: 28px; line-height: 34px; } }

/* =====================================================================
   V3 capture — 425×648・角丸20 のカラーカード。横スクロール（swiper の意図）
   ===================================================================== */
.d-ccards {
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--d-card-w);
  gap: var(--d-g2);
  /* 縦スクロールの掴み込み対策（docs/scroll.md）:
     - overflow-y: clip … 縦のスクロールポートを作らない
     - proximity        … mandatory は落ち着くまで入力を離さない
     - inline: contain  … 横の連鎖（ブラウザバック）だけ止める */
  overflow-x: auto; overflow-y: clip;
  scroll-snap-type: x proximity; overscroll-behavior-inline: contain;
  margin-inline: calc(var(--d-side) * -1); padding-inline: var(--d-side);
  scrollbar-width: thin;
}
.d-ccard {
  scroll-snap-align: start; position: relative; overflow: hidden;
  min-height: var(--d-card-h); border-radius: var(--d-r-lg);
  background: var(--d-bg); color: var(--d-fg);
  padding: var(--d-g3); display: grid; align-content: start; gap: var(--d-g2);
  transition: transform var(--d-d2) var(--d-ease);
}
/* 参照のカードは 425 幅に対して内容 260px（左右 82.5 の余白）。この余白が「静けさ」の正体 */
.d-ccard--cap { grid-template-rows: auto 1fr auto auto; text-align: center; padding: var(--d-g4) 82.5px; }
.d-ccard--cap .d-h3 { text-align: center; }
.d-ccard .d-obj {
  position: relative; inset: auto; width: 100%; height: 100%;
  min-height: 240px; max-width: none; aspect-ratio: auto; opacity: 0; margin: 0;
}
.d-ccard .d-obj.is-live, .d-ccard .d-obj.is-fallback { opacity: 1; }
.d-ccard__no {
  font-family: var(--d-mono); font-size: 12px; line-height: 15.008px;
  letter-spacing: .18em; color: var(--d-fg2); text-align: center;
}
.d-ccard__body, .d-ccard__cap, .d-ccard__f {
  font-family: var(--d-mono); font-size: 12px; line-height: 20px; letter-spacing: .01em;
}
.d-ccard__body, .d-ccard__cap, .d-ccard__f { color: var(--d-fg2); }
.d-ccard__big { font-size: 60px; line-height: 57px; font-weight: 500; letter-spacing: -.03em; }
.d-ccard__big i { font-style: normal; font-size: .38em; margin-left: 4px; }
.d-ccard__rows { display: grid; gap: var(--d-g1); }
.d-ccard__rows li {
  display: flex; align-items: baseline; gap: var(--d-g2); min-height: 44px;
  padding-top: var(--d-g1); border-top: 1px solid var(--d-line);
}
.d-ccard__rows .num { font-size: 24px; line-height: 26px; font-weight: 500; flex: none; }
.d-ccard__rows .num i { font-style: normal; font-size: .5em; }
.d-ccard__rows li > span:last-child { font-family: var(--d-mono); font-size: 11px; line-height: 16px; color: var(--d-fg2); }
.d-ccard__i svg { width: 22px; height: 22px; }
.d-ccard--p { min-height: 320px; }
.d-ccards--3 { grid-auto-columns: minmax(var(--d-card-w), 1fr); }
.d-ccards--3 .d-ccard { min-height: 0; }
@media (min-width: 1200px) {
  .d-ccards--3 { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; }
}

/* ---- 3連のミニカード（models / loop） ---- */
.d-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--d-g3); }
.d-mini { border-top: 1px solid var(--d-line); padding-top: var(--d-g2); }
.d-mini__k {
  font-family: var(--d-mono); font-size: 12px; line-height: 15.008px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--d-fg2);
}
.d-mini .d-h3 { margin-top: var(--d-g1); font-size: 22px; line-height: 24px; }
.d-mini p { margin-top: var(--d-g1); font-family: var(--d-mono); font-size: 12px; line-height: 20px; color: var(--d-fg2); }
@media (max-width: 1023px) { .d-minis { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================
   部品: 対照表 / 役割の帯グラフ
   ===================================================================== */
/* 02 の対照表 —「変換の背骨」。
   対の文言を**中央の背骨（ページ中心 x=720）に向かって収束**させ、→ で変換を言う。
   旧版（2列テーブル）はセル 680px に文字 120px で対が 600px 離れ、比較として読めなかった（実測）。
   ・本文は 15px の sans（旧 12px mono は和文に小さく、CJK を持たない → ja-web-typography）
   ・空白は外側に逃がす（文字が背骨に寄るので、余白は「余り」ではなく構図になる）
   ・色の強調は「私たち」の eyebrow と矢印のブランド紫だけ。左は沈め、右を立てる */
.d-cmp { display: grid; gap: 0; }
.d-cmp__hd, .d-cmp__rows li {
  display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
  align-items: baseline;
}
.d-cmp__hd { padding-bottom: 14px; border-bottom: 1px solid var(--d-line); }
.d-cmp__them, .d-cmp__us { margin: 0; }
.d-cmp__them { grid-column: 1; text-align: end; }
.d-cmp__us   { grid-column: 3; text-align: start; }
.d-cmp__them i, .d-cmp__us i {
  display: block; font-style: normal; font-family: var(--d-mono);
  font-size: 11px; line-height: 15px; letter-spacing: .08em; color: var(--d-fg2);
  margin-bottom: 6px;
}
.d-cmp__us i { color: var(--d-brand); }
.d-cmp__them b, .d-cmp__us b { font-size: 16px; line-height: 24px; font-weight: 500; }
.d-cmp__them b { color: var(--d-fg2); font-weight: 400; }
.d-cmp__rows { list-style: none; margin: 0; padding: 0; }
.d-cmp__rows li { padding: 17px 0; border-bottom: 1px solid var(--d-line); }
.d-cmp__rows i {
  grid-column: 2; grid-row: 1; place-self: baseline center; font-style: normal;
  font-family: var(--d-mono); font-size: 13px; color: var(--d-brand);
}
.d-cmp__rows span { grid-column: 1; grid-row: 1; text-align: end;
  font-size: 15px; line-height: 26px; color: var(--d-fg2); }
.d-cmp__rows b { grid-column: 3; grid-row: 1; font-size: 15px; line-height: 26px; font-weight: 500; }
@media (max-width: 760px) {
  /* SP は対を縦に積む。dim → strong の順（読み順どおり）。矢印は strong の行頭へ */
  .d-cmp__hd, .d-cmp__rows li { grid-template-columns: minmax(0, 1fr); }
  .d-cmp__them, .d-cmp__us, .d-cmp__rows span, .d-cmp__rows b { grid-column: 1; text-align: start; }
  .d-cmp__us { grid-row: 2; margin-top: 12px; }
  .d-cmp__rows span { grid-row: 1; font-size: 13px; line-height: 22px; }
  .d-cmp__rows b { grid-row: 2; }
  .d-cmp__rows li { padding: 14px 0; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; }
  .d-cmp__rows span { grid-column: 1 / -1; }
  .d-cmp__rows i { grid-column: 1; grid-row: 2; place-self: baseline start; }
  .d-cmp__rows b { grid-column: 2; grid-row: 2; }
}
/* 軸ラベルは**行と同じ内部グリッド**に載せる（別グリッドだと目盛りがずれる） */
.d-span__ax { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: var(--d-g2); padding-bottom: var(--d-g1); }
.d-span__ax .d-span__t span { font-family: var(--d-mono); font-size: 11px; line-height: 15px; color: var(--d-fg2); }
.d-span__row {
  display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: var(--d-g2);
  align-items: center; padding: 12px 0; border-top: 1px solid var(--d-line);
}
.d-span__k { font-size: 15px; line-height: 22px; font-weight: 500; }
.d-span__k small { display: block; font-family: var(--d-mono); font-size: 11px; line-height: 15px; color: var(--d-fg2); }
.d-span__t { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
.d-span__c { height: 16px; border: 1px solid currentColor; border-radius: var(--d-r); }
.d-span__c.on { background: currentColor; }
/* 自社の行だけブランド色で塗る（どこが我々かが色で分かる） */
.d-span__row.is-us .d-span__c.on { background: var(--d-brand); }
.is-dark .d-span__row.is-us .d-span__c.on, .d-sheet--dark .d-span__row.is-us .d-span__c.on { background: var(--d-brand-3); }
@media (max-width: 1023px) { .d-span__ax { display: none; } .d-span__row { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================
   V6 theater — 動画（写真＋再生アイコン。押すとインライン再生）
   ===================================================================== */
/* Our Story: 動画がこの節の主役。丸い顔写真はやめ、
   下に一行のキャプション（氏名・肩書 ／ 再生の案内）を罫線で区切って添える。
   幅 668（--d-colL）× 比 1.34 なら素材（800×800）を拡大せずに収まる。 */
.d-vid { max-width: var(--d-colL); margin-inline: auto; display: grid; gap: var(--d-g2); }
/* 散文と動画を同じ 668 の柱に載せる（声明だけが 900 の広い段） */
.d-vid__cap {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px var(--d-g3); padding-top: var(--d-g2); border-top: 1px solid var(--d-line);
  text-align: start;
}
.d-vid__who { display: flex; align-items: baseline; gap: 12px; }
.d-vid__who b { font-size: 16px; line-height: 24px; font-weight: 600; }
.d-vid__who span {
  font-family: var(--d-mono); font-size: 11px; line-height: 16px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--d-fg2);
}
.d-video { display: block; }
.d-video__btn {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  background: none; border-radius: var(--d-r-lg); overflow: hidden;
}
/* YouTube と同じ 16:9。素材は 800×800 なので 800×450 を切り出して等倍以下で収める */
.d-video__btn img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 22%; transition: transform var(--d-d3) var(--d-ease); }
.d-video__btn:hover img { transform: scale(1.03); }
.d-video__btn::after {                      /* 既定は薄く。ホバー時だけ案内文が読める濃さにする */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,11,18,.05) 0%, rgba(14,11,18,.26) 100%);
  transition: background var(--d-d3) var(--d-ease);
}
.d-video__btn:hover::after, .d-video__btn:focus-visible::after {
  background: linear-gradient(180deg, rgba(14,11,18,.10) 0%, rgba(14,11,18,.68) 100%);
}
/* 再生ボタンは**写真を隠さない**。塗りつぶさず、細い輪郭と薄い veil だけで置く */
.d-video__p {
  position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; z-index: 1;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(14, 11, 18, .30); border: 1px solid rgba(243, 239, 251, .88);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  color: #F3EFFB;
  transition: transform var(--d-d2) var(--d-ease), background var(--d-d2) var(--d-ease),
              border-color var(--d-d2) var(--d-ease);
}
.d-video__btn:hover .d-video__p, .d-video__btn:focus-visible .d-video__p {
  transform: scale(1.07); background: var(--d-brand); border-color: var(--d-brand); color: #FFFFFF;
}
.d-video__p svg { width: 15px; height: 15px; margin-left: 2px; }

/* ホバー／フォーカスで出る案内。常時は出さない（キャプション行を情報の羅列にしないため） */
.d-video__cta {
  position: absolute; left: 22px; right: 22px; bottom: 18px; z-index: 1;
  display: grid; gap: 3px; text-align: start;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--d-d2) var(--d-ease), transform var(--d-d2) var(--d-ease);
}
.d-video__btn:hover .d-video__cta, .d-video__btn:focus-visible .d-video__cta {
  opacity: 1; transform: none;
}
.d-video__c {
  display: block; margin-top: var(--d-g1);
  font-family: var(--d-mono); font-size: 11px; line-height: 16px; color: var(--d-fg2);
}
.d-video.is-playing .d-video__btn { display: none; }
.d-video__frame { width: 100%; aspect-ratio: 1.78; border: 0; border-radius: var(--d-r-lg); display: block; }

/* =====================================================================
   V5 carousel — 横スクロールのプロダクトカード
   ===================================================================== */
.d-carousel {
  display: grid; grid-auto-flow: column; grid-auto-columns: 560px; gap: var(--d-g2);
  overflow-x: auto; overflow-y: clip;
  scroll-snap-type: x proximity; overscroll-behavior-inline: contain;
  margin-inline: calc(var(--d-side) * -1); padding: 8px var(--d-side) var(--d-g2);
  margin-top: -8px;                      /* ホバーの浮き上がりが切れない余白（縦clipのため） */
}
.d-pcard {
  scroll-snap-align: center; border-radius: var(--d-r-lg);
  background: var(--d-urban-smoke); color: var(--d-off-white);
  padding: var(--d-g2); display: grid; align-content: start; gap: var(--d-g1);
  transition: transform var(--d-d2) var(--d-ease);
}
.d-sheet--light .d-pcard { background: var(--d-white-flash); color: var(--d-rich-carbon); }
.d-pcard:hover { transform: translateY(-4px); }
.d-pcard__n { font-family: var(--d-mono); font-size: 11px; line-height: 15px; color: var(--d-fg2); }
/* 素材は 1200×750（16:10）の PC スクリーンショット。参照サイトのカードは 0.867（縦長）だが、
   それは人物写真向けの比率で、横長の画面写真に当てると幅の6割が切り落とされて読めなくなる。
   **素材の比率そのまま**にして切らない。器（カード幅）も 425→560 に広げて判読できる大きさにする。 */
.d-pcard img { width: 100%; aspect-ratio: 1.6; object-fit: cover; border-radius: var(--d-r); }
.d-pcard .d-h3 { font-size: 22px; line-height: 24px; text-transform: none; }
.d-pcard__t { display: flex; flex-wrap: wrap; gap: 6px; }
.d-pcard__t span { font-family: var(--d-mono); font-size: 11px; line-height: 15px; border: 1px solid var(--d-line); border-radius: var(--d-r); padding: 2px 8px; }
.d-pcard__t .is-live { background: var(--d-off-white); color: var(--d-core-black); }
.d-sheet--light .d-pcard__t .is-live { background: var(--d-rich-carbon); color: var(--d-white-flash); }
.d-pcard p { font-family: var(--d-mono); font-size: 11px; line-height: 18px; color: var(--d-fg2); }
.d-pcard__m {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px var(--d-g2);
  margin-top: var(--d-g1); padding-top: var(--d-g1); border-top: 1px solid var(--d-line);
  font-family: var(--d-mono); font-size: 11px; line-height: 15px;
}
.d-pcard__m b { font-family: var(--d-sans); font-size: 15px; line-height: 22px; font-weight: 500; }
.d-pcard__m i { font-style: normal; color: var(--d-fg2); margin-left: 4px; }
.d-pcard__s, .d-pcard__a { color: var(--d-fg2); }

/* =====================================================================
   部品: コード / スクショ / メディア / FAQ / 会社概要
   ===================================================================== */
.d-code {
  margin: 0 auto; padding: var(--d-g3); border: 1px solid var(--d-line); border-radius: var(--d-r-lg);
  font-family: var(--d-mono); font-size: 12px; line-height: 22px; overflow-x: auto;
  white-space: pre; text-align: start; max-width: 900px;
}
.d-code .cm, .d-code .k { color: var(--d-fg2); }
.d-code .hi { font-weight: 700; border-bottom: 1px solid currentColor; }
/* ---- 08 の写真の帯 -----------------------------------------------------
   1枚＋注釈をやめて、15枚を切れ目なく流す。
   ・**スクロール容器ではない**（overflow:hidden ＋ transform）のでホイールを奪わない
   ・列を2本ぶん出して -50% 動かす。2本目は1本目と同じ並びなので継ぎ目が見えない
   ・器は固定寸（440×275）＋ object-fit: cover。元の縦横比の違いは器が吸収する
   ・**節の器を突き抜けて全幅**にする（帯は端で切れずに流れていてほしい）
   ・hover は「フィルムが現像される」向きに振る。触れた1枚だけ彩度と明度が戻り、
     周りは沈む。帯自体は止めずに**遅くする**（止めると機械が壊れたように見える） */
.d-reel {
  position: relative; overflow: hidden;
  width: 100vw; margin-inline: calc(50% - 50vw);
  /* 拡大した写真の角が overflow:hidden に切られて「中途半端な角丸」になっていたので、
     上下に伸びしろを作る（scale 1.16 での伸び = 275 x .16 / 2 = 22px < 34px）。 */
  padding-block: 34px;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.d-reel__t { display: flex; width: max-content; animation: d-reel 64s linear infinite; }
.d-reel__r { display: flex; gap: 16px; padding-right: 16px; }
@keyframes d-reel { to { transform: translateX(-50%); } }

.d-reel img {
  width: 440px; height: 275px; flex: 0 0 auto; object-fit: cover;
  border-radius: 12px; background: var(--d-urban-smoke);
  filter: saturate(.94) brightness(.97);
  transition: transform .5s var(--d-out), filter .5s var(--d-out), opacity .5s var(--d-out);
}
/* 減速は **JS の playbackRate** で行う（js/plan-d.js）。
   animation-duration を触ると「進捗 = 経過 ÷ 尺」が変わって位置が飛ぶ。
   実測: 64s → 190s に変えた瞬間、1フレームで 455px 飛んでいた（通常 1.8px/フレーム）。 */
/* 触れた1枚だけ「現像」され、周りは沈む */
.d-reel:hover img { filter: saturate(.72) brightness(.72); opacity: .68; }
.d-reel img { position: relative; }
.d-reel img:hover {
  z-index: 1;
  filter: saturate(1.06) brightness(1.04) !important; opacity: 1 !important;
  /* 1.045 だと隣との 16px の隙間に角丸が残って、両方の角が中途半端に見えていた。
     隙間 16px ＋ 隣の角丸 12px = 28px 伸ばせば隣の角を覆える（440 x .16 / 2 = 35px）。 */
  transform: scale(1.16);
  box-shadow: 0 22px 52px rgba(14, 11, 18, .58);
}
@media (max-width: 1023px) {
  .d-reel img { width: 300px; height: 188px; }
  .d-reel__t { animation-duration: 48s; }
}
@media (prefers-reduced-motion: reduce) {
  /* 自動で流さない。代わりに横に手で送れる帯にする（縦優位の入力は 5.4 がページへ転送する） */
  .d-reel { overflow-x: auto; mask-image: none; scroll-snap-type: x proximity;
            overscroll-behavior-inline: contain; }
  .d-reel__t { animation: none; width: auto; }
  .d-reel__r:last-child { display: none; }   /* 継ぎ目用の複製は要らない */
  .d-reel img { scroll-snap-align: center; }
}
/* 3段組: サムネ 300 ／ 本文 560（和文で約46字＝読みやすい上限）／ 記事一覧 1fr。
   旧版は本文が 1,020px（約85字/行）まで伸びて、横に流れて読めなかった。 */
.d-media {
  display: grid; grid-template-columns: 300px minmax(0, 560px) minmax(0, 1fr);
  gap: var(--d-g4); align-items: start;
}
/* メディアが2つ（FDE総研 / AX総研）になったので、行間に罫線つきの間を置いて反復を読ませる */
.d-media + .d-media { margin-top: var(--d-g4); padding-top: var(--d-g4);
  border-top: 1px solid rgba(237, 233, 244, .14); }
.d-media__body { display: grid; align-content: start; justify-items: start; }
.d-media__body > p, .d-media__body > h3, .d-media__body > .d-media__meta { justify-self: stretch; }
.d-media__side { display: grid; align-content: start; }
.d-media__meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px var(--d-g2);
  margin-top: var(--d-g2); padding-top: var(--d-g2); border-top: 1px solid var(--d-line);
  font-family: var(--d-mono); font-size: 11px; line-height: 16px;
}
.d-media__meta b { font-family: var(--d-sans); font-size: 15px; line-height: 22px; font-weight: 500; }
.d-media__meta i { font-style: normal; color: var(--d-fg2); margin-left: 4px; }
.d-media__s { color: var(--d-fg2); }
/* 素材は 900×1320（縦長の記事キャプチャ）。0.867 に切ると上下 21% を失うので素材比のまま */
.d-media__thumb { aspect-ratio: .682; object-fit: cover; border-radius: var(--d-r-lg); }
.d-media__k, .d-media__lk {
  font-family: var(--d-mono); font-size: 11px; line-height: 15px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--d-fg2);
}
.d-media__lk { letter-spacing: .04em; }
.d-media__k em, .d-media__lk em { font-style: normal; text-transform: none; letter-spacing: 0; }
.d-media .d-h3 { margin-top: var(--d-g1); font-size: 22px; line-height: 28px; text-transform: none; }
.d-media h3 a { border-bottom: 1px solid currentColor; }
.d-media p { margin-top: var(--d-g1); font-family: var(--d-mono); font-size: 12px; line-height: 20px; }
.d-media__l { margin-top: var(--d-g1); }
.d-media__l li {
  padding: 12px 0; display: flex; align-items: center; border-bottom: 1px solid var(--d-line);
  font-family: var(--d-mono); font-size: 12px; line-height: 19px;
}
.d-media__l li:first-child { border-top: 1px solid var(--d-line); }
/* 各行は記事へのリンク。行いっぱいが当たり判定になるよう block にし、hover で前景色まで上げる */
.d-media__l a { display: block; width: 100%; transition: opacity var(--d-d1) var(--d-ease); }
.d-media__l a:hover { opacity: .62; }
.d-media .d-brk { margin-top: var(--d-g2); }
@media (max-width: 1023px) { .d-media { grid-template-columns: minmax(0, 1fr); } .d-media__thumb { max-width: 300px; } }
.d-faq { max-width: 900px; margin-inline: auto; border-top: 1px solid var(--d-line); text-align: start; }
.d-faq__i { padding: var(--d-g2) 0; border-bottom: 1px solid var(--d-line); }
.d-faq__i summary { font-size: 16px; line-height: 24px; font-weight: 500; cursor: pointer; list-style: none; }
.d-faq__i summary::-webkit-details-marker { display: none; }
.d-faq__i p { margin-top: var(--d-g1); font-family: var(--d-mono); font-size: 12px; line-height: 20px; color: var(--d-fg2); }
.d-co { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--d-g4); }

/* ---- 地図 -----------------------------------------------------------
   白黒反転はやめた（読みにくいだけで意味がない）。代わりに**彩度だけ落とす**。
   地図の上で色が付いているのは VACAN のピンだけになるので、
   「どこなのか」が一目で決まる。明るいままなので地名と道路は読める。       */
.d-co__map { position: relative; margin: 0; border-radius: var(--d-r-lg); overflow: hidden;
  background: #F1EEF6; }
.d-co__map iframe {
  width: 100%; aspect-ratio: 1.85; border: 0; display: block;
  /* Google 埋め込みの既定はフルカラーで、この面のモノトーンから浮く。
     クロスオリジン iframe でも filter は合成段で効く（2026-09-11 実測）。
     彩度を落としてから、ごくわずかにブランド側（紫）へ振る。 */
  filter: grayscale(1) brightness(1.04) contrast(.95) sepia(.18) hue-rotate(218deg) saturate(.4);
  /* 静止時は操作を受けない。中心＝オフィスの前提で自社ピンを重ねているので、
     パンできると中心がずれてピンが嘘になる。操作は下の .d-co__act で明示的に開始する。 */
  pointer-events: none;
}
/* 操作を開始した状態: iframe へ操作を渡し、重ねたピンと開始ボタンは引っ込める。
   このとき iframe は q=住所 版に差し替わっていて、Google 自身のマーカーが
   **地図の中の要素として**住所に立つので、動かしてもピンは嘘にならない。 */
.d-co__frame.is-on iframe { pointer-events: auto; }
.d-co__frame.is-on .d-co__here,
.d-co__frame.is-on .d-co__act { display: none; }

/* 操作開始ボタン。地図全面を覆う透明な面。ラベルは hover / フォーカスのときだけ
   浮かせる（静止状態の見た目を邪魔しない）。 */
.d-co__act {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 0 44px; border: 0; background: transparent; cursor: pointer;
  font-family: var(--d-mono); font-size: 11px; line-height: 30px; letter-spacing: .08em;
  color: var(--d-off-white);
}
/* ラベルの下敷き。文字だけだと淡い地図の上で読めない */
.d-co__act::after {
  content: ""; position: absolute; left: 50%; bottom: 44px; z-index: -1;
  width: 10em; height: 30px; margin-left: -5em; border-radius: 999px;
  background: rgba(23, 19, 32, .82);
}
.d-co__act, .d-co__act::after { opacity: 0; transition: opacity var(--d-d2) var(--d-ease); }
.d-co__act:hover, .d-co__act:focus-visible,
.d-co__act:hover::after, .d-co__act:focus-visible::after { opacity: 1; }
.d-co__act:focus-visible { outline: 2px solid var(--d-brand-2); outline-offset: -2px; }
/* タッチ環境では hover が無いので常時うっすら見せる（押せると分かる必要がある） */
@media (hover: none) {
  .d-co__act, .d-co__act::after { opacity: .92; }
}
.d-co__map.is-live > .d-co__frame { display: none; }  /* キー有りの Google API に置き換わった時 */

/* 地図の器。ピンの位置基準はここ。figure を基準にすると figcaption の高さぶん
   ピンが下へずれる（実測 45px）。 */
.d-co__frame { position: relative; display: block; }

/* 中心（＝オフィス）に重ねる自社ピン。接地点に平たい影を敷いて地図から浮かせる。 */
.d-co__here { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 1;
  pointer-events: none; }
.d-co__ring { position: absolute; left: 0; top: 0; width: 20px; height: 7px;
  margin: -4px 0 0 -10px; border-radius: 50%; background: rgba(60, 26, 92, .3); filter: blur(1px); }
.d-co__here .d-pin { position: absolute; left: 0; top: 0; width: 44px; height: 53px;
  max-width: none; transform: translate(-50%, -100%);
  filter: drop-shadow(0 6px 14px rgba(14, 11, 18, .45)); }

/* キーがある時だけ JS が作る器（Google Maps JavaScript API の描画先）。
   キー無しの既定はマークアップの埋め込み iframe なので、この器は使われない。 */
.d-map {
  position: relative; width: 100%; aspect-ratio: 1.85; overflow: hidden;
  background: #F1EEF6;
  border-radius: var(--d-r-lg) var(--d-r-lg) 0 0;
}
.d-map:focus-visible { outline: 2px solid var(--d-brand-3); outline-offset: -2px; }

/* 地図の説明（駅）は地図カードの中に置く。右カラムに離すと何の説明か分からない。 */
.d-co__cap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--d-g1) var(--d-g2); padding: var(--d-g2);
  font-family: var(--d-mono); font-size: 12px; line-height: 20px; color: var(--d-fg2);
  background: rgba(255, 255, 255, .05); border-top: 1px solid var(--d-line);
}
.d-co__access { line-height: 22px; }

.d-co dl { display: grid; grid-template-columns: minmax(0, 130px) minmax(0, 1fr); align-content: start; }
.d-co dt, .d-co dd { margin: 0; padding: 15px 0; border-top: 1px solid var(--d-line); font-family: var(--d-mono); font-size: 12px; line-height: 20px; }
.d-co dt { color: var(--d-fg2); }
/* 概要表の中のリンク（会社名・本社・親会社）。「押せる」ことは下線ではなく
   Material Symbols の open_in_new で示す（2026-08-04 しのさん指示）。
   行の見た目を変えずに当たり判定を広げる: padding を足して同量の負マージンで相殺（20+24=44px） */
.d-co dd a {
  color: inherit; text-decoration: none;
  padding-block: 12px; margin-block: -12px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color var(--d-d1) var(--d-ease);
}
.d-co dd a svg {
  width: 14px; height: 14px; flex: none; color: var(--d-fg2);
  transition: color var(--d-d1) var(--d-ease);
}
/* 13 は暗い面。--d-brand（濃紫 #512376）は地に沈む（実測で目視NG）ので暗面用の brand-3 を使う */
.d-co dd a:hover, .d-co dd a:focus-visible { color: var(--d-brand-3); }
.d-co dd a:hover svg, .d-co dd a:focus-visible svg { color: var(--d-brand-3); }
@media (max-width: 1023px) {
  .d-co { grid-template-columns: minmax(0, 1fr); }
  .d-map { aspect-ratio: 1.5; }
}

/* =====================================================================
   フッター
   ===================================================================== */
.d-ft { position: relative; z-index: 1; background: var(--d-core-black); color: var(--d-off-white); padding: var(--d-g5) var(--d-side) 72px; }
.d-ft__in { max-width: var(--d-w); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--d-g4); }
.d-ft__brand p { margin-top: var(--d-g1); font-family: var(--d-mono); font-size: 11px; line-height: 18px; color: var(--d-fg2); }
.d-ft h3 { font-family: var(--d-mono); font-size: 11px; line-height: 15px; letter-spacing: .18em; text-transform: uppercase; color: var(--d-fg2); font-weight: 400; }
.d-ft ul { margin-top: var(--d-g1); }
.d-ft li a { min-height: 44px; display: flex; align-items: center; font-family: var(--d-mono); font-size: 12px; line-height: 20px; transition: opacity var(--d-d1) var(--d-ease); }
.d-ft li a:hover { opacity: .62; }
.d-ft__legal { max-width: var(--d-w); margin: var(--d-g3) auto 0; display: flex; flex-wrap: wrap; gap: var(--d-g2); padding-top: var(--d-g2); border-top: 1px solid rgba(237,233,244,.14); font-family: var(--d-mono); font-size: 11px; line-height: 16px; color: var(--d-fg2); }
.d-ft__legal a { border-bottom: 1px solid currentColor; }
@media (max-width: 1023px) { .d-ft__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* =====================================================================
   3D ドットオブジェクト（three.js。WebGL 不可なら CSS ドットに縮退）
   ===================================================================== */
.d-obj {
  position: relative; width: 100%; aspect-ratio: 1; overflow: hidden;
  background-image: radial-gradient(currentColor .8px, transparent .8px);
  background-size: 10px 10px; background-position: center; opacity: 0;
}
.d-obj.is-fallback { opacity: .38; }
.d-obj.is-live { opacity: 1; background-image: none; }
.d-obj__c { display: block; width: 100%; height: 100%; }

/* =====================================================================
   reveal（参照は GSAP ScrollTrigger。CSS transition に読み替え）
   ===================================================================== */
/* 節を1枚の板として動かすのはやめた（16px の平行移動は視認閾値以下で、
   しかも中身が塊のまま動くので「組版されていく」感触が出ない）。
   ビートごとに分け、罫線の描画を主役にする。譜面は docs/motion-sections.md。

   ビート1 罫線   delay 0      scaleX 0→1（左起点）        .72s
   ビート2 ラベル  delay 60ms   Y 6px + opacity             .40s
   ビート3 見出し  delay 120ms  Y 18px + opacity            .56s
   ビート4 リード  delay 180ms  Y 14px + opacity            .40s
   ビート5 部品   delay 260ms + i×60ms  Y 22px + scale .988 .64s

   罫線(720ms) と見出し(680ms) がほぼ同時に着地する＝位相ロック。 */
.d-ethos, .d-cent, .d-focuswrap { opacity: 1; transform: none; }

/* ---- ビート1: 章ラベルの罫線を左から引く ---- */
[data-r] .d-chap {
  border-bottom-color: transparent;              /* 本体は透明にして */
}
[data-r] .d-chap::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--d-line); transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-e4) var(--d-enter);
}
[data-r].is-in .d-chap::before { transform: scaleX(1); }

/* ---- ビート2〜5: 中身 ---- */
[data-r] [data-b] {
  opacity: 0;
  transition: opacity var(--d-e1) var(--d-enter), transform var(--d-e1) var(--d-enter);
}
[data-r] [data-b="label"] { transform: translateY(6px);  transition-delay: 60ms; }
[data-r] [data-b="h2"]    { transform: translateY(18px);
  transition-duration: var(--d-e2); transition-delay: 120ms; }
[data-r] [data-b="lead"]  { transform: translateY(14px); transition-delay: 180ms; }
[data-r] [data-b="part"]  { transform: translateY(22px) scale(.988);
  transition-duration: var(--d-e3);
  transition-delay: calc(260ms + var(--i, 0) * var(--d-step)); }
/* 自前の動きを持つもの（写真の帯・地図・carousel・点群）は opacity だけ。
   transform を重ねると周期の違う動きが二重になって「うなる」（ui-animation §3）。 */
[data-r] [data-b="quiet"] { transform: none;
  transition-duration: var(--d-e3);
  transition-delay: calc(260ms + var(--i, 0) * var(--d-step)); }
[data-r].is-in [data-b] { opacity: 1; transform: none; }

/* JS 無しでも読める（現状は .no-js が <html> に無くて 16/16 節が消えていた） */
.no-js [data-r] .d-chap { border-bottom-color: var(--d-line); }
.no-js [data-r] .d-chap::before { transform: scaleX(1); }
.no-js [data-r] [data-b] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-r] .d-chap { border-bottom-color: var(--d-line); }
  [data-r] .d-chap::before { transform: scaleX(1); transition: none; }
  [data-r] [data-b] { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   職種詳細ページ（inner.py の共通ビルダー）
   ===================================================================== */
.d-jobtop { padding: 158px var(--d-side) var(--d-g5); background: var(--d-core-black); color: var(--d-off-white); text-align: center; }
.d-jobtop > * { max-width: var(--d-w); margin-inline: auto; }
.d-jobtop .d-obj { max-width: 420px; margin: var(--d-g4) auto 0; }
/* 面によって明暗が変わる要素は固定色にしない（固定の灰は明色シート上で AA 不合格になる） */
.d-crumb { display: flex; flex-wrap: wrap; gap: var(--d-g1); justify-content: center; align-items: center; font-family: var(--d-mono); font-size: 11px; line-height: 16px; color: var(--d-fg2); }
/* パンくずのリンクはタップ域44pxを縦paddingで確保し、負マージンで見た目の行高は変えない（QA） */
.d-crumb a { padding-block: 14px; margin-block: -14px; }
.d-eyebrow { font-family: var(--d-mono); font-size: 12px; line-height: 15.008px; letter-spacing: .22em; text-transform: uppercase; color: var(--d-fg2); }
.d-jobtop, .d-closing, .d-ft, .d-applybar { --d-fg2: #9B93AD; }
.d-eyebrow i { color: var(--d-fg2); }
.d-eyebrow i { font-style: normal; margin-right: 8px; }
.d-h1 { margin-top: var(--d-g2); font-size: 60px; line-height: 1.3; font-weight: 500; letter-spacing: -.02em; }
.d-catch { margin-top: var(--d-g2); font-family: var(--d-mono); font-size: 14px; line-height: 24px; }
.d-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: var(--d-g2); }
.d-jobhead__r { margin-top: var(--d-g2); max-width: 420px; margin-inline: auto; }
.d-ratio { display: flex; height: 4px; }
.d-ratio__c { width: var(--w); background: currentColor; opacity: .4; }
.d-ratio__e { width: var(--w); background: currentColor; }
.d-ratio__lg { display: flex; gap: var(--d-g2); justify-content: center; margin-top: 6px; font-family: var(--d-mono); font-size: 11px; line-height: 16px; }
.d-ratio__lg i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; background: currentColor; }
.d-ratio__lg .k--c i { opacity: .4; }
.d-jobwrap {
  position: relative; z-index: 1; margin-top: -20px;
  background: var(--d-neural-fog); color: var(--d-rich-carbon); border-radius: var(--d-r-lg);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: var(--d-g4);
  padding: var(--d-g5) var(--d-side); text-align: start;
  --d-fg: var(--d-rich-carbon); --d-fg2: #5C5470; --d-line: rgba(23,19,32,.2);
}
.d-sec { padding-bottom: var(--d-g5); }
.d-body .d-sec > * + * { margin-top: var(--d-g2); }
.d-sec .d-h2 { text-transform: none; }
.d-answer { font-family: var(--d-sans); font-size: 18px; line-height: 28px; font-weight: 500; }
.d-sec p { font-family: var(--d-mono); font-size: 12px; line-height: 22px; }
.d-sec h3 { font-family: var(--d-mono); font-size: 12px; line-height: 15.008px; letter-spacing: .18em; text-transform: uppercase; color: var(--d-fg2); font-weight: 400; }
.d-ul li { min-height: 52px; display: flex; align-items: center; gap: var(--d-g1); border-bottom: 1px solid var(--d-line); font-family: var(--d-mono); font-size: 12px; line-height: 20px; }
.d-kv { width: 100%; border-collapse: collapse; font-family: var(--d-mono); font-size: 12px; }
.d-kv th, .d-kv td { text-align: start; padding: 12px var(--d-g2) 12px 0; border-bottom: 1px solid var(--d-line); vertical-align: top; line-height: 20px; }
.d-kv th { font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--d-fg2); }
.d-layers { border-top: 1px solid var(--d-line); }
.d-layer { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--d-g2); padding: 12px 0; border-bottom: 1px solid var(--d-line); font-family: var(--d-mono); font-size: 12px; line-height: 20px; }
.d-layer__k { letter-spacing: .18em; color: var(--d-fg2); }
.d-step { border-top: 1px solid var(--d-line); padding-top: var(--d-g1); }
.d-step__n { font-family: var(--d-mono); font-size: 12px; line-height: 15.008px; color: var(--d-fg2); }
.d-step p { margin-top: 6px; font-size: 12px; line-height: 20px; color: var(--d-fg2); }
.d-proc__i { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: var(--d-g2); padding: var(--d-g2) 0; border-bottom: 1px solid var(--d-line); }
.d-proc__n { font-size: 24px; line-height: 24px; font-weight: 500; }
.d-rels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--d-g2); }
.d-rel { border: 1px solid var(--d-line); border-radius: var(--d-r-lg); padding: var(--d-g2); transition: background var(--d-d1) var(--d-ease), color var(--d-d1) var(--d-ease); }
.d-rel:hover { background: var(--d-rich-carbon); color: var(--d-off-white); }
.d-rel h3 { margin-top: 6px; font-size: 16px; line-height: 24px; font-weight: 500; }
.d-rel__s, .d-rel__go { font-family: var(--d-mono); font-size: 11px; line-height: 16px; }
/* カードの余白に**その職種の点群**を置く。旧版は 11px の器に矢印 SVG を入れていて、
   サイズ指定が無いためカードいっぱい（約 350px）まで伸びていた。 */
/* 行を 1fr にすると点群が高さで制約されて小さくなる（実測 267x167／器は 392px）。
   すべて auto にして、点群は**幅いっぱい＋16:10** で置く。カードは中身で伸びる。 */
.d-rel { display: grid; grid-template-rows: auto auto auto auto auto; }
.d-rel__o { display: block; margin-top: var(--d-g2); }
/* three.js は**縦の視野**で収めるので、16:10 の器にすると横に余白が出て点群が小さく見える
   （実測 267x167 の器に対し雲の実寸は約 230px）。正方形にして器いっぱいに使わせる。 */
.d-rel__o .d-obj { width: 100%; max-width: 220px; aspect-ratio: 1; margin-inline: auto; }
.d-rel__o .d-obj__c { width: 100%; height: 100%; display: block; }
/* 面が反転する hover でも点群が沈まないよう、明度を少し上げる */
.d-rel:hover .d-rel__o { filter: brightness(1.9) saturate(.5); }
.d-jobside { align-self: start; position: sticky; top: 100px; display: grid; gap: var(--d-g2); }
.d-applycard { border: 1px solid var(--d-line); border-radius: var(--d-r-lg); padding: var(--d-g2); }
.d-applycard dl { display: grid; grid-template-columns: minmax(0, 90px) minmax(0, 1fr); }
.d-applycard dt, .d-applycard dd { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--d-line); font-family: var(--d-mono); font-size: 11px; line-height: 18px; }
.d-applycard dt { color: var(--d-fg2); }
.d-applycard .d-btn { width: 100%; margin-top: var(--d-g2); }
.d-applycard__n { margin-top: var(--d-g1); font-family: var(--d-mono); font-size: 11px; line-height: 16px; color: var(--d-fg2); }
.d-toc p { font-family: var(--d-mono); font-size: 11px; line-height: 15px; letter-spacing: .18em; text-transform: uppercase; color: var(--d-fg2); }
.d-toc ol { margin-top: var(--d-g1); counter-reset: d; }
.d-toc li { counter-increment: d; font-family: var(--d-mono); font-size: 11px; line-height: 22px; }
.d-toc li::before { content: counter(d, decimal-leading-zero) " "; color: var(--d-fg2); }
.d-closing { position: relative; z-index: 1; margin-top: -20px; border-radius: var(--d-r-lg); padding: var(--d-g5) var(--d-side); background: var(--d-rich-carbon); color: var(--d-off-white); text-align: center; }
.d-closing > * { max-width: var(--d-w); margin-inline: auto; }
/* 40px固定・行送り1.0（欧文値）だと SP で1行8.5字となり、文節が入りきらず
   「シニアコンサルタ／ント」「積み重ねません／か。」の強制語中折りが出ていた（実測）。
   SP は縮めて文節が収まる字数を確保し、行送りは和文見出しの下限 1.25 に */
.d-closing__h { margin-top: var(--d-g2); font-size: clamp(24px, 6.2vw, 40px);
  line-height: 1.25; font-weight: 500; }
.d-closing p { margin-top: var(--d-g2); font-family: var(--d-mono); font-size: 12px; line-height: 22px; color: var(--d-fg2); }
.d-closing .d-ctas { justify-content: center; margin-top: var(--d-g3); }
.d-btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--d-g1);
  padding: 14px 26px; border: 1px solid currentColor; border-radius: var(--d-r);
  font-family: var(--d-mono); font-size: 12px; line-height: 20px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  transition: background var(--d-d1) var(--d-ease), color var(--d-d1) var(--d-ease),
              transform var(--d-d3) var(--d-out);
}
.d-btn:hover { background: var(--d-fg); color: var(--d-bg); }
/* アイコンの寸法を明示する。無指定の svg は flex の中で 100% まで育ち、
   62px の「+」がテキストを3行に押し潰していた（1440px でも再現・実測） */
.d-btn svg { width: 14px; height: 14px; flex: none; }
.d-btn { white-space: nowrap; }
.d-applybar {
  position: fixed; inset: auto 0 0; z-index: 810; display: flex; align-items: center;
  overflow: hidden;               /* 押した輪は帯の中に収める（明面へ半分だけ出ると濁る） */
  justify-content: space-between; gap: var(--d-g2); padding: 10px var(--d-side);
  background: var(--d-core-black); color: var(--d-off-white); border-top: 1px solid rgba(237,233,244,.14);
}
.d-applybar b { font-size: 15px; line-height: 22px; font-weight: 500; }
.d-applybar span span { margin-left: 10px; font-family: var(--d-mono); font-size: 11px; line-height: 16px; color: var(--d-fg2); }
.d-body--job { padding-bottom: 72px; }
@media (max-width: 1023px) {
  .d-jobwrap { grid-template-columns: minmax(0, 1fr); }
  .d-jobside { position: static; }
  .d-h1 { font-size: 34px; line-height: 1.3; }
  .d-rels { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   レスポンシブ / アクセシビリティ
   ===================================================================== */
@media (max-width: 1023px) {
  :root { --d-side: 20px; --d-colL: 100%; --d-colR: 100%; }
  .d-ethos, .d-cent, .d-focuswrap { padding: var(--d-g5) var(--d-side); }
  .d-ethos__row { grid-template-columns: minmax(0, 1fr); }
  .d-h2 { font-size: 24px; line-height: 1.4; }
  .d-state { font-size: 26px; line-height: 1.35; }
  /* カード幅は画面より一回り狭く保ち、**次のカードの見切れ**で横スクロールできることを示す */
  .d-ccards { grid-auto-columns: min(86vw, var(--d-card-w)); }
  .d-ccards--3 { grid-auto-flow: column; grid-auto-columns: 86vw; }
  .d-carousel { grid-auto-columns: 86vw; }
}
/* 参照は reduced-motion を持っていない。こちらはローダー・3D・transition を全部止める */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .d-loader { display: none; }
  .d-obj { opacity: .38; }
  .d-ethos, .d-cent, .d-focuswrap { opacity: 1 !important; transform: none !important; }
  .d-hero__g { opacity: 1 !important; transform: none !important; filter: none !important; }
  .d-hero__eb { opacity: 1 !important; transform: none !important; }
  /* ボタン: 磁力の追従と輪を切る（角括弧と光の明滅だけ残す） */
  .d-brk { transform: none !important; }
  .d-brk__r { display: none; }
  /* Index のスロット: 複製を消し、実体は自然位置・不透明のまま置く（動きだけ無くす） */
  .d-roll__l--b { display: none; }
  .d-roll__l { transform: none !important; }
}

/* 会社概要: 右カラム（所在地・アクセス・地図リンク） */
.d-body #company .d-ethos__r .d-brk { margin-top: var(--d-g1); }
.d-co { align-items: start; }

/* 数字カードのラベルは和文の長文（例「自分たちでつくって、自分たちで使っているもの」）。
   参照の 30/30 は短い英語前提なので、この器だけ 22/26 に落とす（器の反復は保つ）。 */
.d-ccards--3 .d-ccard .d-h3 { font-size: 22px; line-height: 26px; }

/* =====================================================================
   ページ内リンクの到着表現（js/plan-d.js §5）
   「どこに来たか」が分からないと、移動そのものが安っぽく感じる。
   節のラベル罫線をブランド色で一度だけ左から引き、そのまま消す。
   ===================================================================== */
.d-chap { position: relative; }
.d-chap::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--d-brand-3); transform: scaleX(0); transform-origin: left; opacity: 0;
  pointer-events: none;
}
@keyframes d-arrive {
  0%   { transform: scaleX(0); opacity: 1; }
  52%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
[data-arrived] .d-chap::after { animation: d-arrive 1.15s var(--d-ease) both; }
/* 到着した節にフォーカスが移るが、クリック由来の輪郭は出さない（キーボード時のみ出す） */
.d-ethos:focus, .d-cent:focus, .d-focuswrap:focus, #main:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { [data-arrived] .d-chap::after { animation: none; } }

/* 飛行中は節の reveal 遷移を切る（16節ぶんの opacity/transform が同時に走ると
   スクロールのフレームが落ちる）。通過した節は遷移なしでそのまま確定させる。 */
[data-flying] .d-ethos, [data-flying] .d-cent,
[data-flying] .d-focuswrap { transition: none !important; }

/* =====================================================================
   ラベル罫線の直後の間隔を**全節型で揃える**（実測でばらついていた）
     .d-ethos / .d-focuswrap  40px  ← 正しい
     .d-cent                   0px  ← 崩れ（罫線と見出しがくっつく）
     .d-invest（後に撤去）      24px  ← 中途半端だった
   原因: `.d-cent > *:nth-child(n+3)` は3番目以降しか見ておらず、
   2番目に来る見出しに間隔が付いていなかった。
   ===================================================================== */
.d-body .d-cent > .d-chap + * { margin-top: var(--d-g4); }

/* =====================================================================
   07 Open Positions — 2×2 のカード
   旧版は sticky 左カラム＋縦1列で、左が空洞・右がガタついていた。さらに
   年収 40px > 職種名 30px と階層が逆転していたのが「がたつき」の主因。
   職種名を最大にし、年収は 22px、それ以外のメタは 11px の**一列**に落として揃える。
   ===================================================================== */
.d-jobs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--d-g2); margin-top: var(--d-g5);
}
.d-jobs__k { grid-column: 1 / -1; }
.d-jobs__k:not(:first-child) { margin-top: var(--d-g3); }
/* 色分けはやめ、面はひとつ（sheet より一段だけ持ち上げる）。
   代わりに**職種ごとの 3D シンボル**を左に置く。詳細ページで大きく動く形の縮小版。 */
.d-job {
  background: var(--d-urban-smoke); color: var(--d-fg);
  border: 1px solid var(--d-line); border-radius: var(--d-r-lg);
  padding: var(--d-g3);
  display: grid; grid-template-columns: 168px minmax(0, 1fr);
  align-items: start; gap: var(--d-g3);
  transition: transform var(--d-d2) var(--d-ease), border-color var(--d-d2) var(--d-ease);
}
.d-job:hover { transform: translateY(-4px); border-color: var(--d-brand-3); }
.d-job__sym { display: block; width: 168px; align-self: center; }
.d-job .d-obj { width: 168px; height: 168px; }
.d-job__body { display: grid; align-content: start; gap: var(--d-g1); }
.d-job__t { font-size: 26px; line-height: 32px; font-weight: 500; letter-spacing: -.01em; }
.d-job__c { font-family: var(--d-mono); font-size: 12px; line-height: 20px; color: var(--d-fg2); }
.d-job__pay {
  margin-top: var(--d-g1); font-size: 22px; line-height: 26px; font-weight: 500;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.d-job__pay i { font-style: normal; }
.d-job__meta { font-family: var(--d-mono); font-size: 11px; line-height: 18px; color: var(--d-fg2); }
.d-job__r { display: flex; height: 4px; margin-top: var(--d-g2); }
.d-job__r i { display: block; width: var(--w); background: currentColor; }
.d-job__r i:first-child { opacity: .42; }
.d-job__lg { font-family: var(--d-mono); font-size: 11px; line-height: 18px; color: var(--d-fg2); }
.d-job__go {
  grid-column: 1 / -1; align-self: end;
  padding-top: var(--d-g2); border-top: 1px solid var(--d-line);
  font-family: var(--d-mono); font-size: 11px; line-height: 16px;
  letter-spacing: .14em; text-transform: uppercase;
}

/* =====================================================================
   11 Selection Process — 4工程しかないので横一列
   ===================================================================== */
.d-steps2 {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--d-g3);
  margin-top: var(--d-g5); text-align: start; border-top: 1px solid var(--d-line);
}
.d-step2 { padding-top: var(--d-g2); display: grid; align-content: start; gap: var(--d-g1); position: relative; }
.d-step2::before {                       /* 上端の目盛り。0→3 の流れを見せる */
  content: ""; position: absolute; left: 0; top: -1px; width: 24px; height: 2px;
  background: var(--d-brand-3);
}
.d-step2.is-opt::before { background: var(--d-fg2); }
.d-step2__n {
  font-family: var(--d-mono); font-size: 24px; line-height: 26px; font-weight: 400;
  color: var(--d-fg2); font-variant-numeric: tabular-nums;
}
.d-step2__t { font-size: 17px; line-height: 25px; font-weight: 500; }
.d-step2__t .d-chip { margin-left: 8px; }
.d-step2__b { font-family: var(--d-mono); font-size: 11px; line-height: 19px; color: var(--d-fg2); }
.d-step2.is-opt .d-step2__n, .d-step2.is-opt .d-step2__t { opacity: .82; }

@media (max-width: 1023px) {
  .d-jobs { grid-template-columns: minmax(0, 1fr); }
  .d-job { grid-template-columns: 120px minmax(0, 1fr); gap: var(--d-g2); }
  .d-job__sym, .d-job .d-obj { width: 120px; }
  .d-job .d-obj { height: 120px; }
  /* 選考プロセスは縦1列（0→3）。2列だと ol の border-top が1行目にしか通らず、
     「罫線があったりなかったり」に見えていた（2026-08-04 指摘）。
     器の罫線をやめ、**各工程が自分の罫線を持つ**ことで何列でも破綻しない */
  .d-steps2 { grid-template-columns: minmax(0, 1fr); border-top: 0; row-gap: var(--d-g3); }
  .d-step2 { border-top: 1px solid var(--d-line); }
}

/* =====================================================================
   和文の折り返し（PC / SP 共通）
   「…構造化す／る」のように1文字だけ次行に落ちる、単語の途中で切れる、が起きていた。
   - word-break: auto-phrase … 文節で折る（Chrome 119+。非対応環境は従来動作に戻るだけ）
   - text-wrap: pretty       … 最終行が1文字だけになる孤立を避ける
   どちらも**改行位置を手で入れない**やり方なので、PC でも SP でも幅なりに最適化される。
   ===================================================================== */
.d-body :where(h1, h2, h3, p, li, dd, dt, summary, figcaption, .d-focus a) {
  word-break: auto-phrase;
  text-wrap: pretty;
}
/* 折り返し禁止語（plans/common.py の NB_TERMS が包む）。auto-phrase が
   「生成／AI」「Claude／Code」のように固有名詞を語境界と誤認するのを止める */
.nb { white-space: nowrap; }
/* **見出しに balance は使わない。** 和文では行長を揃えることが優先され、
   `word-break: auto-phrase` の文節折りを押しのけて述語をぶつ切りにする。実測（09 の声明・40px）:
     balance → 「増やし続け、AX市場でシェアを取りに／いく。これが私たちの勝ち方です。」（取りにいく が分断）
     pretty  → 「この回転を止めずにプロダクトを増やし続け、／AX市場でシェアを取りにいく。これが／…」
   balance は短い英文見出し向けの機能なので、和文の文章見出しでは上書きせず
   サイト共通（auto-phrase + pretty）に任せる。 */

/* =====================================================================
   01 By the Numbers — カードの中身を整える
   副題を見出しの中に入れていたため、長い副題が見出しに折り返して形が崩れていた。
   見出し → 副題 → 大数字 → 説明 → 数値行、と縦の役割を1段ずつ分ける。
   ===================================================================== */
.d-ccard__sub {
  font-family: var(--d-mono); font-size: 11px; line-height: 17px;
  letter-spacing: .04em; color: var(--d-fg2);
}
.d-ccards--3 .d-ccard { grid-template-rows: auto auto auto auto 1fr; }
.d-ccards--3 .d-ccard .d-h3 { font-size: 20px; line-height: 27px; }
.d-ccard__big { margin-top: var(--d-g2); }
.d-ccard__rows { margin-top: var(--d-g2); align-self: end; }
.d-ccard__rows li { gap: var(--d-g2); align-items: baseline; }
.d-ccard__rows .num { min-width: 88px; }        /* 数字の右端を揃える */
.d-ccard__rows li > span:last-child { flex: 1; }
.d-ccard__f { margin-top: var(--d-g2); }
.d-ccard__link { margin-top: var(--d-g1); }

/* =====================================================================
   01 By the Numbers の数え上げ（js/plan-d.js §6）
   .num は inline のままだと min-width も transform も効かない（列が揃わない・浮き上がらない）
   ===================================================================== */
#figures .num { display: inline-block; }
.d-ccards--3 .d-ccard__rows .num { min-width: 96px; }
#figures .num__d { font-weight: inherit; font-variant-numeric: tabular-nums; }
/* 数え上げの開始に合わせて、ひと粒ずつ静かに浮き上がる（0 の項目もこれで参加できる） */
#figures .num {
  opacity: 0; transform: translateY(7px);
  transition: opacity .5s var(--d-ease), transform .5s var(--d-ease);
}
#figures .num.is-run { opacity: 1; transform: none; }
.no-js #figures .num { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  #figures .num { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   SP のタップ域（QA 2026-08-03）
   実測で 390px のとき、**最重要CTA「応募する」が 33px**、SP の主要ナビである
   00 の目次リンクが 34px、角括弧ボタンが 37px、ロゴが 32px しかなかった。
   WCAG 2.2 AA（2.5.8 の 24px）は満たすが、Apple HIG の 44pt / Google の 48dp を下回る。
   **見た目は変えず、当たり判定だけを 44px 以上にする**（min-height ＋ 中央揃え、
   ロゴは padding で当たりを広げて SVG の寸法は触らない）。
   ===================================================================== */
@media (max-width: 1023px) {
  .d-hd__cta { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .d-hd__logo { min-height: 44px; align-items: center; padding-inline: 2px; }
  .d-brk, .d-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .d-focus a { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  /* 地図の ＋ − と、その他の小さなボタン */
  .d-co__map button, .d-map button { min-width: 44px; min-height: 44px; }
  /* 10 Media の記事リンク（19px）・媒体名（25px）・フッターの法務リンク（17px） */
  .d-media__l li a, .d-media__body h3 a, .d-ft__legal a {
    display: inline-flex; align-items: center; min-height: 44px; }
  /* 地図の出典（© OpenStreetMap / © CARTO）は慣習どおりの小ささを保つ。
     WCAG 2.5.8 の「文中のインラインリンク」例外に当たる。 */
}
/* 職種カードは 600px 未満で**縦積み**にする。
   1023px の指定（120px + 1fr）だと 390px で本文の器が約170pxしか無く、
   「シニア/エンジニ/ア（FDE）」のように**単語の途中で改行**していた（実測）。
   本文を先に、点群を後ろに置く（携帯では職種名が最初に読めるべき）。 */
@media (max-width: 600px) {
  .d-job { grid-template-columns: minmax(0, 1fr); gap: var(--d-g2); }
  /* 直下の子は sym / body / go の3つ。**3つ全部に order を振る**こと。
     go に振り忘れると既定の 0 が最前になり、「…の募集要項を見る」が
     職種名より上に出る（実測でそうなっていた）。 */
  .d-job__body { order: 1; }
  .d-job__sym { order: 2; width: 100%; max-width: 180px; margin-inline: auto; }
  .d-job__go { order: 3; }
  .d-job .d-obj { width: 100%; max-width: 180px; height: auto; aspect-ratio: 1; }
  /* 「シニアエンジニア（FDE）」が「シニアエンジ/ニア（FDE）」と語中で折れていた。
     文節で割れるようにする（ヒーローと同じ手当て）。 */
  .d-job__t { word-break: auto-phrase; text-wrap: pretty; }
}