/* ==================================================================
   BEM Design Preview — "AI Constellation Helix" v4
   ------------------------------------------------------------------
   ・全場面をひとつの固定ビューポートに重ねて置く。スクロールは奪わない。
     前の場面の溶暗と次の場面の溶明が重なるので、画面が空になる時間を作らない。
   ・コンテンツは縦に動かさない。不透明度・わずかな拡大・ぼけのみ。
   ・基本色は深いミッドナイトネイビー。奥行きにだけブルーブラックを使う。
     光＝青白・シアン・わずかな紫／識別色＝ゴールド／収束点＝コーラル。
   ・幅768px以下と prefers-reduced-motion では重ね置きをやめ通常の文書に落とす。
   ・名前空間は .ach-。本番 style.css の .sm- とは衝突しない。
   ------------------------------------------------------------------
   ［本番構造移植（helix-port）での変更点／移植計画 §2・§6・§9］
   ・トップ2ページ専用。style.css を併載した上で「後読み」し、トップ本文（.ach-）の
     体裁と z-index だけを top 限定で足す（構造CSS・フォントの正本は style.css）。
   ・★ヘッダー/フッターの配色は上書きしない（2026-07-25 CEO決定）。
     .nav- 系 / .footer- 系の色は全ページ共通＝style.css が唯一の正本。
   ・非 .ach- セレクタ（:root, html, body, 全称セレクタ, img, a, ul, strong, .st）は
     すべて html.helix-home 配下へスコープする。→ トップ以外14ページ・共有資産へ影響しない。
   ・ただし元CSSでの「弱い土台」＝リセット系（全称セレクタ・body・img・a・ul・strong）と
     .st は、:where(html.helix-home) で包んで特異度を元のまま（0,0,0）/（0,0,1）に保つ。
     単純に html.helix-home を前置すると特異度が上がり、.ach- のクラス指定（padding・
     margin・color 等）を打ち消してしまうため。スコープだけを足し、カスケードは変えない。
   ・ハードコードのヘッダー/フッター（.ach-nav / .ach-footer）と PREVIEW バッジは
     移植しないため、対応するCSSも持ち込まない。ヘッダー/フッターは components 注入＋
     style.css のまま使う。
   ================================================================== */

html.helix-home {
  /* 面 */
  --navy:       #0B3158;   /* 基本背景：ブルーネイビー */
  --navy-mid:   #10406E;   /* 明部 */
  --navy-abyss: #071C33;   /* 奥行き */
  --shell:      #061527;   /* 最暗部の面色。※ヘッダー/フッターには使わない（style.css が正本） */
  --tint:       11 49 88;  /* 場面ごとの色温度（scenes.js が差し替える） */
  /* 光 */
  --cyan:       #4CC9F0;
  --ice:        #B8E7FF;
  --violet:     #8FA3E8;   /* わずかな紫 */
  /* 識別色・収束点 */
  --gold: #C9953C; --gold-light: #EDD9A3; --gold-dark: #A07830;
  --coral: #E06A4A;

  /* 文字インク：暗い面では白系、明るい面(ach-act--light)では暗色へ反転する。
     文字色はカット自身が持つので、背景遷移中でも「白背景×白文字」にならない。 */
  --on:       rgba(232,242,255,0.92);
  --on-dim:   rgba(206,224,246,0.68);
  --on-faint: rgba(190,212,240,0.44);
  --ink-accent: var(--gold-light);   /* ラベル等の識別色（面で切替） */
  --panel: 7 20 39;                  /* カットのパネル色（暗面）。明カットで上書き */
  --panel-a: .90;                    /* パネル不透明度 */
  --hair: rgba(159,214,245,0.16);
  /* 明るい面（クリーム/ホワイト）用のインクとパネル */
  --ink:       rgba(24,32,46,0.92);
  --ink-dim:   rgba(46,58,78,0.74);
  --ink-faint: rgba(70,84,108,0.55);

  --font-jp: 'Noto Sans JP', sans-serif;
  --font-en: 'Raleway', sans-serif;
  --font-mincho: 'Shippori Mincho', serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --wrap: 1080px;
  --nav-h: 68px;
}

:where(html.helix-home) *,
:where(html.helix-home) *::before,
:where(html.helix-home) *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.helix-home { font-size: 16px; }
:where(html.helix-home) body {
  font-family: var(--font-jp);
  color: var(--on);
  line-height: 1.9;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  background: var(--navy);
  background-image:
    radial-gradient(58% 42% at 50% 40%, rgba(76,201,240,.16) 0%, transparent 72%),   /* 中央の青い光 */
    radial-gradient(70% 50% at 20% 14%, rgba(76,201,240,.09) 0%, transparent 74%),   /* 青い霧 */
    radial-gradient(62% 42% at 84% 80%, rgba(143,163,232,.08) 0%, transparent 74%),
    radial-gradient(120% 96% at 50% 42%, var(--navy-mid) 0%, var(--navy) 52%, var(--navy-abyss) 100%);
  background-attachment: fixed;
}
:where(html.helix-home) img { max-width: 100%; display: block; }
:where(html.helix-home) a { color: inherit; text-decoration: none; }
:where(html.helix-home) ul { list-style: none; }
:where(html.helix-home) strong { font-weight: 700; color: #fff; }

/* ==================================================================
   背景ステージ（同じ粒子が場面ごとに別の形へ変形する）
   ================================================================== */
.ach-stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.8s var(--ease); }
body.is-ready .ach-stage { opacity: 1; }
.ach-stage canvas { display: block; width: 100%; height: 100%; }
.ach-skyfield {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  transition: opacity 1.4s var(--ease);
  background-image:
    radial-gradient(1.2px 1.2px at 12% 22%, rgba(200,226,250,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 14%, rgba(159,214,245,.4) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 43% 71%, rgba(237,217,163,.36) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 62%, rgba(143,163,232,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 27% 88%, rgba(200,226,250,.28) 50%, transparent 51%);
}
body.is-ready .ach-skyfield { opacity: .75; }
/* 3Dステージ(z-index:0)より前面へ。
   ★#site-header はここに含めない（Codex blocking 2026-07-25）。
   移植元の .ach-nav は body直下の position:fixed 要素そのものだったが、本番では
   #site-header は「fixed な .nav を内包する静的ラッパー」である。ここに z-index:2 を
   与えると #site-header がスタッキングコンテキストを作り、style.css の .nav{z-index:1000}
   がその外へ出られず、同じ z-index:2 で後方の main が上に積まれる。結果、ヘッダーは
   見えていても実ポインタは前面の .ach-pin に当たり、ナビ・言語切替・CTAが押せなくなる。
   → #site-header は本番と同じく静的のままにし、.nav(fixed, z-index:1000) をルートの
     スタッキングコンテキストで 3Dステージ(0)・main(2) の上に置く。 */
html.helix-home main,
html.helix-home #site-footer { position: relative; z-index: 2; }

/* ==================================================================
   フィルム（全場面を重ねて置く固定ビューポート）
   ================================================================== */
.ach-film { position: relative; }               /* 高さは scenes.js が vh で与える */
/* JSなしでは通常文書。疑似要素の配置基準だけ持たせる */
.ach-viewport {
  position: relative;
}

/* 固定場面方式はJS有効かつflow-modeでない場合だけ */
html.js:not(.ach-flow-mode) .ach-viewport {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
/* 3Dの上に常時かかる薄いネイビーの膜。文字の足場を作る */
.ach-viewport::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%,
    rgb(var(--tint) / .20) 0%, rgb(var(--tint) / .54) 60%, rgb(6 22 41 / .80) 100%);
  transition: background 1.2s var(--ease);
}
/* 重ね置き（固定場面方式）は JS が動くときだけ。JS無効時は、これらの絶対配置も
   is-vis による非表示も一切効かず、全カットが通常の縦積み文書として素で表示される。 */
html.js .ach-scene { position: absolute; inset: 0; z-index: 1; }
/* 表示単位は「章」ではなく「カット(.ach-act)」。章に状態は付けない
   （付けると同じ章の未表示カットまで先にリビールされる） */
html.js .ach-pin { position: absolute; inset: 0; }
/* 章の中のカット。同時に出さず、同じ場所で溶明・溶暗して入れ替わる */
html.js .ach-act { position: absolute; inset: 0; display: grid; align-items: center; }
html.js .ach-act:not(.is-vis) { visibility: hidden; pointer-events: none; }
/* ★固定場面方式では、全カットの .ach-scene / .ach-pin が透明なまま画面全体に重なって
   残る。非表示カットを pointer-events:none にするだけでは、この「親の全面レイヤー」が
   前面に居座り、表示中カットのリンク（CTA・線引きを見る・判断シート等）を遮る。
   → 重なる親レイヤーはポインタ対象から外し、操作可能にするのは .is-interactive の1枚だけ。
   .is-vis は「見えているか」（クロスフェード中は複数が該当する）なので操作可否には使わない。
   opacity 最大の1枚に scenes.js の update() が .is-interactive を張り替える。
   flow-mode（≤768px・reduced-motion・scenes.js失敗時の退避）と JS完全無効では
   重ね置き自体が無いので、:not(.ach-flow-mode) と html.js で経路を限定する。 */
html.js:not(.ach-flow-mode) .ach-scene,
html.js:not(.ach-flow-mode) .ach-pin { pointer-events: none; }
html.js:not(.ach-flow-mode) .ach-act.is-interactive { pointer-events: auto; }
/* flow-mode（モバイル/縮退）と JS無効は、どちらも通常の縦積み文書に落とす */
.ach-act { display: grid; align-items: center; }
html.ach-flow-mode .ach-act { position: relative; inset: auto; }

/* 場面の中身。縦に動かさない */
.ach-frame {
  position: relative;
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  padding: calc(var(--nav-h) + 1.2rem) 2rem 1.6rem;
  opacity: var(--o, 1);
  transform: scale(calc(var(--s, 1) * var(--fit, 1)));
  filter: blur(var(--b, 0px));
  will-change: opacity, transform, filter;
}
/* 文字量の多い場面だけ、文字の後ろに柔らかい足場を敷く（枠の不透明度に追従する）。
   パネル色は各カットの --panel（暗面=ネイビー / 明カット=クリーム）で決まるので、
   背景3Dや遷移中のtintに関係なく、文字は常に自分のパネル上で読める。 */
.ach-scene--panel .ach-frame::before {
  content: ""; position: absolute; inset: -8vh -6vw; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgb(var(--panel) / var(--panel-a)) 0%, rgb(var(--panel) / calc(var(--panel-a) * .84)) 56%, rgb(var(--panel) / 0) 100%);
}
/* 3Dを見せる場面（--open）は面を敷かず、文字側のにじみで読ませる（暗面のみ） */
.ach-scene--open :is(h1, h2, h3, h4, p, span, li) { text-shadow: 0 1px 16px rgba(6,22,41,.92), 0 0 4px rgba(6,22,41,.75); }
.ach-scene--open .ach-card :is(h3, h4, p, span), .ach-scene--open .ach-btn { text-shadow: none; }

/* ── 明るいカット（ホワイト/クリーム面）：文字を暗色へ反転、パネルもクリームに ── */
.ach-act--light {
  --on: var(--ink); --on-dim: var(--ink-dim); --on-faint: var(--ink-faint);
  --ink-accent: var(--gold-dark);
  --panel: 250 246 238; --panel-a: .92;   /* クリームのパネル */
  --hair: rgba(60,74,98,0.18);
}
/* 明カットは必ずパネルを敷く（--open由来の白テキスト影を消し、暗文字にする） */
.ach-act--light .ach-frame::before {
  content: ""; position: absolute; inset: -8vh -6vw; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgb(var(--panel) / var(--panel-a)) 0%, rgb(var(--panel) / calc(var(--panel-a) * .82)) 58%, rgb(var(--panel) / 0) 100%);
}
/* 明カット配下の白系 text-shadow を消す */
.ach-act--light :is(h1, h2, h3, h4, p, span, li, a) { text-shadow: none; }
/* 見出し（個別クラス含む）を暗色へ。元CSSの color:#fff ハードコードを上書き */
.ach-act--light :is(.ach-h2, .ach-why-title, .ach-about-title, .ach-practice-title, .ach-final-title, .ach-hero-title, h3, h4) { color: #17202f; }
/* 本文・リードを暗めのインクへ */
.ach-act--light :is(.ach-lead, .ach-bio, .ach-about-body, .ach-practice-lead, .ach-verdict, .ach-boundary, .ach-svc-note, .ach-g-desc, .ach-role) { color: var(--ink-dim); }
.ach-act--light :is(.ach-q p, .ach-bridge-item p, .ach-agree-row p, .ach-pt p, .ach-prj h4, .ach-card p) { color: var(--ink-dim); }
.ach-act--light .ach-qn, .ach-act--light .ach-card-idx { color: var(--gold-dark); }
.ach-act--light .ach-label { color: var(--gold-dark); }
/* タグ・数値・区切り線・アバターを明面用に調整（数字のゴールドは維持） */
.ach-act--light .ach-prj-tags span { background: rgba(23,32,47,.06); color: var(--ink-dim); }
.ach-act--light .ach-prj-meta { color: var(--ink-faint); }
.ach-act--light .ach-prj-client { color: var(--gold-dark); }
.ach-act--light .ach-g-num { color: var(--gold-dark); }
.ach-act--light :is(.ach-agree, .ach-agree-row, .ach-pt, .ach-prj) { border-color: rgba(23,32,47,.14); }
.ach-act--light .ach-avatar { border-color: rgba(160,120,48,.5); }
.ach-act--light .ach-btn--line { border-color: rgba(23,32,47,.3); color: var(--ink-dim); }
.ach-act--light .ach-btn--ghost { border-color: rgba(23,32,47,.35); color: var(--ink); }

/* 中身は順に現れる。ここでも移動はしない */
html.js:where(.helix-home) .st {
  opacity: 0; filter: blur(10px);
  transition: opacity .8s var(--ease) calc(var(--i, 0) * .07s),
              filter .8s var(--ease) calc(var(--i, 0) * .07s);
}
.ach-act.is-live .st { opacity: 1; filter: none; }

/* 重ねない経路（モバイル／動きを減らす設定） */
html.ach-flow-mode .ach-film { height: auto !important; }
html.ach-flow-mode .ach-viewport { position: static; height: auto; overflow: visible; }
html.ach-flow-mode .ach-viewport::before { display: none; }
/* 重ねない経路では viewport が clip しないので、場面側で clip する。
   これを外すと文字の足場（負の inset を持つ疑似要素）が横スクロールを生む */
html.ach-flow-mode .ach-scene { position: relative; inset: auto; overflow: hidden; }
html.ach-flow-mode .ach-pin { position: relative; }
html.ach-flow-mode .ach-frame { opacity: 1 !important; transform: none !important; filter: none !important; padding: 86px 1.4rem; }
/* flow-mode/縮退でも、パネルはグローバル--tintではなく各カット自身の--panelで敷く。
   これで reduced-motion / JS失敗（applyTheme未実行で--tintが初期の濃紺のまま）でも、
   明カット=クリーム×暗文字・暗カット=ネイビー×白文字が成立する（暗文字×濃紺を作らない）。 */
html.ach-flow-mode .ach-scene .ach-frame::before,
html.ach-flow-mode .ach-act--light .ach-frame::before {
  inset: -3vh -6vw; background: rgb(var(--panel) / .88);
}

@media (prefers-reduced-motion: reduce) {
  html.js:where(.helix-home) .st { opacity: 1 !important; filter: none !important; transition: none !important; }
}

/* ==================================================================
   ヘッダー（components.js / components-en.js 注入の .nav-*）
   ------------------------------------------------------------------
   ★2026-07-25（CEO決定）：トップだけヘリックス専用色にせず、全ページ共通の
   ヘッダーを維持する。配色の SSOT は style.css（クリーム系 rgba(255,252,248,.96)／
   スクロール後 .99／CTA・アクセントはゴールド系変数）。
   → scenes.css からヘッダーの色は一切上書きしない。ここには規則を置かない。
   ================================================================== */

/* ==================================================================
   共通パーツ
   ================================================================== */
.ach-label { display: inline-block; font-family: var(--font-mono); font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-light); margin-bottom: .9rem; }
.ach-h2 { font-family: var(--font-mincho); font-size: clamp(1.85rem, 3.9vw, 2.9rem); line-height: 1.45; font-weight: 700; color: #fff; }
.ach-lead { font-size: 1.05rem; line-height: 2; color: var(--on-dim); max-width: 60ch; margin-top: 1rem; }
.ach-btn { display: inline-flex; align-items: center; gap: .5rem; padding: 1rem 2rem; border-radius: 999px; font-size: .96rem; font-weight: 600; transition: transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease); }
.ach-btn:hover { transform: translateY(-2px); }
.ach-btn--gold { background: var(--gold); color: #fff; box-shadow: 0 10px 34px rgba(201,149,60,.3); }
.ach-btn--gold:hover { background: var(--gold-dark); }
.ach-btn--ghost { border: 1px solid rgba(159,214,245,.45); color: var(--on); }
.ach-btn--ghost:hover { border-color: var(--ice); color: var(--ice); }
.ach-btn--line { border: 1px solid rgba(159,214,245,.3); color: var(--on-dim); }
.ach-btn--line:hover { border-color: var(--gold); color: var(--gold-light); }
.ach-actions { margin-top: 1.8rem; display: flex; gap: 1rem; flex-wrap: wrap; }

/* ==================================================================
   場面ごとの体裁
   ================================================================== */
.ach-hero-tag { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-light); }
/* ブランド宣言をここに置く場合（2026-07-26 CEO決定）：大文字化を解除し、字間を少し詰める。
   要素は増やさず、font-size も既定(.72rem)のまま据え置く＝固定場面の収まりに対して幾何的に中立。
   （.78rem に上げた版は実測で全条件+1〜2px のはみ出し増を招いたため不採用） */
.ach-hero-tag--claim { text-transform: none; letter-spacing: .12em; }
.ach-hero-title { font-family: var(--font-mincho); font-size: clamp(2rem, 4.5vw, 3.35rem); line-height: 1.46; font-weight: 700; color: #fff; margin-top: 1rem; max-width: 20ch; }
.ach-hero-title .ach-vm { color: var(--coral); display: inline-block; }
.ach-hero-lead { margin-top: 1.4rem; font-size: 1.05rem; line-height: 2; color: var(--on-dim); max-width: 46ch; }
.ach-hero-caption { margin-top: 2rem; padding-left: 1rem; border-left: 2px solid var(--gold); font-size: .88rem; line-height: 1.8; color: var(--on-faint); max-width: 34ch; }
.ach-hero-caption strong { color: var(--gold-light); font-weight: 600; }

/* ── ファーストビューのスクロール誘導（2026-07-26 CEO指摘：1枚画に見える）──
   ヒーローが支配カットである間だけ薄く出し、次カットへ主役が移ると静かに消える。
   .is-interactive は scenes.js が opacity 最大の1枚にだけ張るクラスなので、
   flow-mode（≤768px・reduced-motion）／JS無効／scenes.js失敗の各経路では
   そもそも付かない＝この装飾は自動的に出ない（経路ごとの分岐を足さずに済む）。
   ★必ず .ach-frame の「外」（.ach-act 直下）に置くこと。frame の中に入れると
     fitAll() が測る scrollHeight が伸び、--fit が縮んで本文レイアウトが変わる。
   ★.ach-act は display:grid だが position:absolute の子はグリッド項目にならないので、
     本文の中央寄せには影響しない。
   ★位置決め（.ach-cue）／上下動（.ach-cue-i の transform）／矢羽根の回転
     （::before の rotate）を別要素に分け、transform を同一要素で競合させない。 */
.ach-cue {
  position: absolute; left: 50%; bottom: 2rem; z-index: 1;
  width: 16px; height: 16px; margin-left: -8px;
  pointer-events: none;
  opacity: 0; transition: opacity .6s var(--ease);
}
html.js:not(.ach-flow-mode) .ach-act.is-interactive > .ach-cue { opacity: .5; }
.ach-cue-i { position: relative; display: block; width: 100%; height: 100%; animation: ach-cue-drift 2.2s var(--ease) infinite; }
.ach-cue-i::before {
  content: ""; position: absolute; left: 50%; top: 2px;
  width: 11px; height: 11px; margin-left: -5.5px;
  border-right: 1.5px solid var(--gold-light); border-bottom: 1.5px solid var(--gold-light);
  transform: rotate(45deg);
}
@keyframes ach-cue-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
/* 縦積み（モバイル・縮退）では出さない。動きを減らす設定では静止させる */
@media (max-width: 768px) { .ach-cue { display: none; } }
@media (prefers-reduced-motion: reduce) { .ach-cue-i { animation: none; } }

.ach-center { text-align: center; max-width: 44rem; margin: 0 auto; }
.ach-center .ach-lead { margin-left: auto; margin-right: auto; }
.ach-q-list { display: grid; gap: .65rem; max-width: 54rem; margin: 2rem auto 0; }
.ach-q { display: flex; gap: 1.1rem; align-items: flex-start; padding: .95rem 1.6rem; border-radius: 12px; background: rgba(159,214,245,.05); border: 1px solid var(--hair); }
.ach-qn { font-family: var(--font-mono); font-size: .86rem; font-weight: 600; color: var(--gold-light); flex-shrink: 0; padding-top: .15rem; }
.ach-q p { font-size: 1.02rem; line-height: 1.8; }

.ach-bridge { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-top: 1.4rem; }
.ach-bridge-item { position: relative; padding-top: 1.1rem; border-top: 1px solid var(--hair); }
.ach-bridge-item::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(201,149,60,.18); }
.ach-bridge-item h4 { font-size: 1rem; font-weight: 700; margin-bottom: .4rem; color: #fff; }
.ach-bridge-item p { font-size: .88rem; line-height: 1.8; color: var(--on-dim); }

.ach-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-top: 1.4rem; }
.ach-card { padding: 1.5rem 1.5rem; border-radius: 16px; background: rgba(12,24,44,.62); backdrop-filter: blur(14px); border: 1px solid var(--hair); transition: border-color .5s var(--ease), background .5s var(--ease); }
.ach-card:hover { border-color: rgba(201,149,60,.45); background: rgba(18,32,58,.74); }
.ach-card--featured { border-color: rgba(201,149,60,.4); }
.ach-card-idx { font-family: var(--font-mono); font-size: 1.8rem; color: var(--gold); opacity: .65; line-height: 1; }
.ach-card h3 { font-family: var(--font-mincho); font-size: 1.28rem; font-weight: 700; line-height: 1.45; color: #fff; margin-top: .6rem; }
.ach-card-sub { display: inline-block; margin-top: .35rem; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; color: var(--gold-light); }
.ach-card p { margin-top: .7rem; font-size: .9rem; line-height: 1.8; color: var(--on-dim); }
.ach-svc-note { margin-top: 1.2rem; font-size: .86rem; line-height: 1.85; color: var(--on-faint); }

.ach-sier { max-width: 100%; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--hair); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1.4rem; align-items: center; }
.ach-sier > span, .ach-sier > h2, .ach-sier > p { grid-column: 1; }
.ach-sier h2 { font-family: var(--font-mincho); font-size: clamp(1.3rem, 2.3vw, 1.75rem); font-weight: 700; color: #fff; }
.ach-sier p { margin: .6rem 0 0; font-size: .93rem; line-height: 1.85; color: var(--on-dim); }
.ach-sier .ach-actions { grid-column: 2; grid-row: 1 / span 3; margin: 0; }

.ach-gng h3 { font-family: var(--font-mincho); font-size: clamp(1.55rem, 3vw, 2.25rem); line-height: 1.5; color: #fff; }
.ach-axes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem .9rem; margin: 2rem 0 1.6rem; }
.ach-axis { font-family: var(--font-mono); font-size: .9rem; padding: .58rem 1.15rem; border-radius: 999px; border: 1px solid rgba(159,214,245,.16); color: var(--on-faint); opacity: .45; transition: opacity .8s var(--ease), color .8s var(--ease), border-color .8s var(--ease), box-shadow .8s var(--ease); }
.ach-axis.is-on { opacity: 1; color: var(--gold-light); border-color: rgba(237,217,163,.55); box-shadow: 0 0 26px rgba(201,149,60,.24), inset 0 0 12px rgba(201,149,60,.08); }
.ach-axsep { width: 14px; height: 1px; background: rgba(159,214,245,.2); }
.ach-verdict { font-size: 1rem; line-height: 1.95; color: var(--on-dim); }
.ach-boundary { margin-top: 1.1rem; font-size: .97rem; line-height: 1.9; color: var(--on-dim); }
.ach-boundary strong { color: var(--gold-light); }
.ach-boundary a { color: var(--cyan); border-bottom: 1px solid rgba(111,199,232,.45); }

.ach-why-title { font-family: var(--font-mincho); font-size: clamp(2.3rem, 6vw, 4.1rem); font-weight: 700; line-height: 1.3; color: #fff; }
.ach-agree { margin-top: 2rem; border-top: 1px solid var(--hair); }
.ach-agree-row { display: grid; grid-template-columns: 14rem 1fr; gap: 1.4rem; align-items: baseline; padding: .8rem 0; border-bottom: 1px solid var(--hair); }
.ach-agree-row h3 { font-size: 1.08rem; font-weight: 700; color: #fff; }
.ach-agree-row p { font-size: .98rem; line-height: 1.85; color: var(--on-dim); }

.ach-about-grid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1fr); gap: 2.4rem; align-items: start; }
.ach-about-title { font-family: var(--font-mincho); font-size: clamp(1.55rem, 2.9vw, 2.2rem); font-weight: 700; line-height: 1.5; color: #fff; }
.ach-about-name { display: flex; align-items: center; gap: 1rem; margin: 1.4rem 0 1rem; }
.ach-avatar { width: 84px; height: 84px; border-radius: 50%; border: 2px solid rgba(237,217,163,.6); object-fit: cover; }
.ach-about-name h3 { font-size: 1.08rem; font-weight: 700; color: #fff; }
.ach-role { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .12em; color: var(--gold-light); }
.ach-bio, .ach-about-body { font-size: .94rem; line-height: 1.9; color: var(--on-dim); margin-bottom: .8rem; }
.ach-pt { padding: .85rem 0; border-top: 1px solid var(--hair); }
.ach-pt h4 { font-size: .96rem; font-weight: 700; margin-bottom: .2rem; color: #fff; }
.ach-pt p { font-size: .88rem; line-height: 1.8; color: var(--on-dim); }

.ach-glance { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-top: 1rem; }
.ach-g-num { font-family: var(--font-mono); font-size: clamp(2.2rem, 4.6vw, 3.4rem); font-weight: 600; color: var(--gold-light); line-height: 1.1; }
.ach-g-num em { font-style: normal; font-size: .9rem; margin-left: .15rem; color: var(--on-dim); }
.ach-g-desc { font-size: .9rem; line-height: 1.6; color: var(--on-dim); margin-top: .5rem; }

.ach-prj-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; margin-top: .8rem; }
.ach-prj { padding: .85rem 0; border-top: 1px solid var(--hair); }
.ach-prj-meta { display: flex; gap: .7rem; align-items: center; font-family: var(--font-mono); font-size: .77rem; color: var(--on-faint); }
.ach-prj-client { color: var(--cyan); }
.ach-prj h4 { font-size: 1rem; font-weight: 700; line-height: 1.55; margin: .3rem 0 .4rem; color: #fff; }
.ach-prj-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.ach-prj-tags span { font-size: .75rem; padding: .15rem .6rem; border-radius: 999px; background: rgba(159,214,245,.08); color: var(--on-dim); }
.ach-prj--hot { border-top-color: rgba(201,149,60,.5); }

.ach-practice-title { font-family: var(--font-mincho); font-size: clamp(1.85rem, 4vw, 2.85rem); font-weight: 700; line-height: 1.45; color: #fff; }
.ach-practice-lead { margin: 1.2rem auto 0; max-width: 52ch; font-size: .96rem; line-height: 1.95; color: var(--on-dim); }
.ach-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: .7rem; margin: 1.8rem 0 1.6rem; }
.ach-strip img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--hair); opacity: .72; transition: opacity .5s var(--ease); }
.ach-strip li:hover img { opacity: 1; }
.ach-strip span { display: block; margin-top: .45rem; font-family: var(--font-mono); font-size: .7rem; color: var(--on-faint); }
/* 5枚のカード全体（画像＋ラベル）を各パターンページへの直リンクにする。
   レイアウト・画像サイズ・文言は不変。a を block にして li の箱をそのまま埋める。 */
.ach-strip a { display: block; color: inherit; border-radius: 8px; transition: color .3s var(--ease); }
.ach-strip a:hover span { color: var(--gold-light); }
.ach-strip a:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.ach-strip a:focus-visible img { opacity: 1; }

.ach-node { width: 46px; height: 46px; margin: 0 auto 1.2rem; display: grid; place-items: center; }
.ach-final-title { font-family: var(--font-mincho); font-size: clamp(2rem, 4.8vw, 3.3rem); font-weight: 700; line-height: 1.45; color: #fff; }


/* ==================================================================
   最終場面：コピーを上、粒子のBEMを中央〜下、形成後にCTAが現れる
   （文字と粒子を重ねない）
   ================================================================== */
.ach-scene--final .ach-pin { align-items: start; }
.ach-scene--final .ach-frame { padding-top: calc(var(--nav-h) + 5vh); }
.ach-bem-space { height: 34vh; }                 /* 粒子がBEMを形成する余白 */
.ach-final-cta { opacity: 0; transition: opacity 1s var(--ease); }
.ach-scene.is-formed .ach-final-cta { opacity: 1; }
html.ach-flow-mode .ach-final-cta { opacity: 1; }
html.ach-flow-mode .ach-bem-space { height: 22vh; }
@media (prefers-reduced-motion: reduce) { .ach-final-cta { opacity: 1 !important; } }

/* SIer は単独の場面になったので、区切り線と上余白を外す */
#sier .ach-sier { margin-top: 0; padding-top: 0; border-top: 0; }

/* 代表の場面は分割後に1カラムだけになるので、2カラム指定を解除する。
   残したままだと本文が狭い列に押し込まれ、縦に倍近く伸びる */
#about .ach-about-grid { grid-template-columns: 1fr; gap: 0; }
#about .ach-bio, #about .ach-about-body { max-width: 68ch; }
#about .ach-about-name { margin: 1.2rem 0 1rem; }


/* ==================================================================
   終盤の円環：情報が戻り、DNAを再形成し、BEMになる（フッター上部）
   ================================================================== */
.ach-coda { position: relative; height: 155vh; }   /* CTA→フッターが間延びしない長さ */
.ach-coda-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.ach-coda-pin::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgb(10 37 68 / .12) 0%, rgb(6 22 41 / .58) 72%, rgb(6 22 41 / .86) 100%);
}
html.ach-flow-mode .ach-coda { height: 100vh; }
/* JS完全無効では3D粒子が動かず coda は意味のない空白になるため隠す（本文到達性には無関係の見栄え調整） */
html:not(.js) .ach-coda { display: none; }

/* ==================================================================
   フッター（components.js / components-en.js 注入の .footer-*）
   ------------------------------------------------------------------
   ★2026-07-25（CEO決定）：ヘッダーと同様、全ページ共通のフッターを維持する。
   配色の SSOT は style.css（背景 var(--cognac)・見出しはゴールド系変数）。
   → scenes.css からフッターの色は一切上書きしない。ここには規則を置かない。
   （#site-footer の z-index:2 は 3Dステージより前面に置くための構造指定なので上部に残す）
   ================================================================== */

/* ==================================================================
   レスポンシブ
   ================================================================== */
@media (max-width: 900px) {
  .ach-cards { grid-template-columns: 1fr; gap: .8rem; }
}
@media (max-width: 1024px) {
  .ach-about-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .ach-bridge { grid-template-columns: repeat(2, 1fr); gap: 1.3rem; }
  .ach-agree-row { grid-template-columns: 11rem 1fr; }
  .ach-prj-list { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  /* ヘッダー(ハンバーガー/モバイルメニュー)とフッターの1列化は style.css が担当。
     ここは .ach- のコンテンツ側だけ。 */
  .ach-glance { grid-template-columns: repeat(2, 1fr); }
  .ach-agree-row { grid-template-columns: 1fr; gap: .3rem; }
  .ach-strip { grid-template-columns: repeat(2, 1fr); }
  .ach-actions .ach-btn { width: 100%; justify-content: center; }
  .ach-bridge { grid-template-columns: 1fr; }
  .ach-axsep { display: none; }
}

/* ==================================================================
   Delta: density-restore — 専用modifier（汎用 .ach-cards/.ach-bridge/.ach-sier/
   .ach-glance/.ach-about-grid/.ach-prj-list は全面変更せず、dense 配下で上書き）
   ================================================================== */
/* Section 2 Cut A：左=Questions / 右=橋渡し4項目 */
.ach-ask-dense { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 2.6rem; align-items: start; }
.ach-ask-q .ach-q-list { margin-top: 1.3rem; }
.ach-ask-bridge { padding-top: .2rem; }
.ach-ask-dense .ach-bridge { grid-template-columns: 1fr; gap: 1.15rem; margin-top: 0; }
/* Section 2 Cut B：サービス3商品（全幅3列カード）＋注記＋CTA（単独Cut） */
.ach-services-dense { display: grid; gap: .65rem; }
.ach-services-dense .ach-cards { grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: .3rem; }
.ach-services-dense .ach-lead { margin-top: .4rem; }
.ach-services-dense .ach-svc-note { margin-top: .5rem; }
/* Section 2 Cut C：SIer・コンサル向け 大きな協業訴求場面（bridge背景） */
.ach-sier-scene { max-width: 54rem; }
.ach-sier-scene h2 { font-family: var(--font-mincho); font-size: clamp(1.9rem, 4.2vw, 3rem); font-weight: 700; color: #fff; margin-top: .8rem; line-height: 1.32; }
.ach-sier-scene p { margin-top: 1.5rem; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 2; color: var(--on-dim); max-width: 46rem; }
.ach-sier-scene .ach-actions { margin-top: 2.2rem; }
@media (max-width: 768px) {
  .ach-ask-dense { grid-template-columns: 1fr; gap: 1.8rem; }
  .ach-services-dense .ach-cards { grid-template-columns: 1fr; }
}

/* Section 5 Cut A：代表（左=大見出し / 右=写真+氏名+役職+経歴+紹介。長文は段組みにしない） */
.ach-about-dense { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: 2.6rem; align-items: start; }
.ach-about-dense .ach-about-title { margin-top: .6rem; }
.ach-about-dense .ach-about-name { margin-top: 0; }
/* Section 5 Cut B：左=強み4 / 右=数値4（2×2） */
.ach-strength-glance { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 2.6rem; align-items: start; }
.ach-strength-glance .ach-glance { grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: .8rem; }
.ach-glance-col { padding-top: .2rem; }
/* Section 5 Cut C：実績6件 2列×3段・列優先（左1–3 / 右4–6）。汎用 .ach-prj-list は不変、modifierで上書き */
.ach-prj-list--chrono { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 2.2rem; row-gap: 0; margin-top: .6rem; }
/* Section 5 パネル強度（ach-act--light 維持・暗文字維持・暗背景化しない） */
.ach-act--light.ach-panel-strong { --panel-a: .96; }
.ach-act--light.ach-panel-soft { --panel-a: .78; }
@media (max-width: 768px) {
  .ach-about-dense { grid-template-columns: 1fr; gap: 1.6rem; }
  .ach-strength-glance { grid-template-columns: 1fr; gap: 1.6rem; }
  .ach-prj-list--chrono { grid-template-columns: 1fr; grid-auto-flow: row; }
}

/* ==================================================================
   EN-only density modifiers（英語版専用クラス。日本語には一切適用しない）
   ================================================================== */
/* EN Ask A：見出し・リード全幅 → Questions 2×2 → 橋渡し 4列(>1024)/2×2(≤1024)。769は非意味余白を詰める */
.ach-ask-en { display: grid; gap: 1.4rem; }
.ach-ask-en .ach-q-list--grid { grid-template-columns: 1fr 1fr; gap: .7rem 1.6rem; max-width: none; margin: 0; }
.ach-ask-en .ach-bridge--en { grid-template-columns: repeat(4, 1fr); margin-top: 0; }
@media (max-width: 1024px) {
  .ach-ask-en .ach-bridge--en { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .ach-ask-en { gap: .8rem; }
  .ach-ask-en .ach-q-list--grid { gap: .45rem 1.1rem; }
  .ach-ask-en .ach-q { padding: .5rem .8rem; }
  .ach-ask-en .ach-bridge--en { gap: .7rem 1.1rem; }
}
/* EN Ask B：Services 見出し・リード ＋ 01・02（2列） */
.ach-services-en-b { display: grid; gap: 1rem; }
.ach-services-en-b .ach-cards--en2 { grid-template-columns: 1fr 1fr; gap: .9rem; margin-top: .3rem; }
@media (max-width: 768px) {
  .ach-services-en-b .ach-cards--en2 { grid-template-columns: 1fr; }
}
/* EN Ask C：Service 03 を大きな単独カード ＋ その下に専門支援注記・CTA */
.ach-services-en-c { display: grid; gap: 1.4rem; max-width: 62rem; }
.ach-services-en-c .ach-card--solo { padding: 1.6rem 1.9rem; }
.ach-services-en-c .ach-card--solo h3 { font-size: clamp(1.35rem, 2.4vw, 1.95rem); }
.ach-services-en-c .ach-svc-cta { display: grid; gap: 1rem; }
/* EN Projects：769px の僅少超過を EN専用に軽く詰める */
.ach-prj-en { row-gap: 0; }
.ach-prj-en .ach-prj { padding-top: .15rem; padding-bottom: .15rem; }
.ach-prj-en .ach-prj-tags { margin-top: .3rem; }
/* EN flow-mode（≤768px）: Questions・橋渡しを1列へ。EN専用の2列指定が既存モバイル1列を後勝ち上書きしていたため明示的に戻す */
@media (max-width: 768px) {
  .ach-ask-en .ach-q-list--grid,
  .ach-ask-en .ach-bridge--en {
    grid-template-columns: 1fr;
  }
}