/* ============================================================
   site.css — neu-inc.co.jp 2026-08 リニューアル
   実装の正: fullpage プロトタイプ v2.9（2026-08-05 / corpsite-creative-coder）
   仕様の正: AD lightface-spec-v2 / director-redesign-spec、
             IXD scroll-motion-spec / core-skills-motion（ContentStudio 側）

   ─ 紙面の憲法（失伝させないこと・批評 v2.8 N-2 / N-3 / C-12） ─
   ・ゴースト座標数字（02〜09）= ヒーローの網のノード番号。
     タイポの散らしではなく、フォリオ/座標番号と同じ座標体系の一部
   ・director の paper バンド = deep の地層に露頭した核。
     「唯一の明るい面 = 唯一の核」の一対一対応。面デバイスはページに 1 枚まで
   ・明面の暖色は 1 面につき 1 点まで（#philosophy の fold-node 琥珀のみ）
   ・ループする動きはページに 1 つまで（ヒーローの SCROLL キューの呼吸のみ）
   ・easing はサイト唯一の --mv-ease。モーション語彙の追加は IXD 仕様の改訂を経ること
   ・カスケード（data-mv-group="cascade"）は名前付き例外。適用 3 条件は
     core-skills-motion §2。.dir-core 以外への転用禁止
   ============================================================ */

/* ================= ヒーロー（夜・rev10 確定） ================= */
  :root{
    --bg:#070B12; --ink:#D7E1EF; --sub:#9DACC2;
    --sub-strong:#B9C6D9;   /* rev9: サブ2色制の明側（名乗り行、AD トークン新設） */
    --dim:#71829C;          /* rev9: #5A6B84 → #71829C（3.6:1 → 5.0:1、AA 合格） */
    --cold:#9FC2E8; --warm:#FFC276;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{background:var(--bg)}
  body{
    color:var(--ink);
    /* AD §1-1 スタック（Inter 先頭・Zen Kaku Gothic New は Google Fonts 配信。
       読込前・失敗時は代打スタックで描画 = display=swap 前提） */
    font-family:'Inter','Zen Kaku Gothic New',"Hiragino Sans","Noto Sans JP","Yu Gothic UI",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  .hero{
    position:relative; overflow:hidden;
    /* 幅連動の高さ（シーン比 1100:520 ≒ 47.3vw）。100vh は上限としてのみ使う。
       Artifact の iframe は内容高さに追従して伸縮するため、vh 基準の cover は
       拡大暴走 → ホットスポット画面外の事故になる。幅基準なら crop ≈ 0 */
    height:clamp(460px, 47.3vw, 100vh);
    /* JS 無効でも夜の紺 + コピーは成立する */
    background:linear-gradient(#0C1226, #0A0F19 55%, #080D16);
  }
  @media (min-width:768px) and (max-width:1279px){
    .hero{height:clamp(460px, 47.3vw, 92vh)}   /* rev9: AD §3-1 M 域 */
  }
  .hero canvas{
    position:absolute; inset:0; width:100%; height:100%;
    pointer-events:none;
  }
  #fx{z-index:2}
  #stage{z-index:1}

  /* rev9: 家具① 透過ヘッダー（AD §2-2。面なし線なし・absolute 72px。
     リンクはプロトのためダミー href="#"） */
  .site-head{
    position:absolute; z-index:5; left:0; right:0; top:0; height:72px;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 28px;
  }
  .site-head .logo{
    font-family:'Inter','Helvetica Neue',Arial,sans-serif;
    font-size:15px; font-weight:600; letter-spacing:.02em;
    color:var(--ink); text-decoration:none;
  }
  .site-head nav{display:flex; gap:28px}
  .site-head nav a{
    font-size:13px; font-weight:500; letter-spacing:.06em;
    color:var(--sub); text-decoration:none;
  }
  .site-head nav a:hover, .site-head nav a:focus-visible{color:var(--ink)}
  .site-head a:focus-visible{outline:2px solid var(--cold); outline-offset:4px}

  .copy{
    position:absolute; z-index:4;
    /* rev9: 3行h1+4行サブで増高 → 44%→48%（CEO 目安 46〜50%）。
       1280×720 実寸でヘッダー下端 72px とのクリアランス ~28px を確認 */
    right:clamp(24px, 7vw, 130px); top:48%;
    transform:translateY(-50%);
    max-width:34em;
  }
  .copy h1{
    /* rev9: AD 仕様②。36→60px / lh1.36 / palt+0.03em / 3行階段 */
    font-size:clamp(2.25rem, 1.55rem + 2.9vw, 3.75rem);
    font-weight:700; line-height:1.36;
    letter-spacing:.03em;
    font-feature-settings:'palt';
    text-spacing-trim:space-first;   /* Chrome123+。非対応は palt にフォールバック */
    text-shadow:0 2px 24px rgba(7,11,18,.9);
  }
  .copy h1{white-space:nowrap}   /* v2.2: h1 は3行固定・行内折返し禁止（CEO 指摘・本実装必須要件） */
  .copy h1 .i1{padding-left:1em}   /* 「推進力、」 */
  .copy h1 .i2{padding-left:2em}   /* 「問題を解く。」 */
  .copy .intro{
    /* 名乗り行（サブ2色制の明側・半歩立てる） */
    margin-top:2.2em;
    font-size:clamp(0.8125rem, 0.55rem + 0.55vw, 0.9375rem);
    font-weight:500; line-height:1.9; letter-spacing:.04em;
    color:var(--sub-strong);
    text-shadow:0 1px 16px rgba(7,11,18,.9);
  }
  .copy .lead{
    margin-top:.75em;   /* 名乗りの後のアキ（AD §2-2） */
    font-size:clamp(0.875rem, 0.6rem + 0.6vw, 1rem);
    font-weight:400; line-height:1.95; letter-spacing:.02em;
    color:var(--sub);
    text-wrap:pretty;   /* 折返し時の1〜2字ぶら下がり抑制（対応ブラウザのみ） */
    text-shadow:0 1px 16px rgba(7,11,18,.9);
  }
  .copy .nb{display:inline-block}   /* 句節単位の折返し（1行に収まる幅では見た目不変） */

  /* rev9: 家具③ スクロールキュー（1px×32px 縦ヘアライン + SCROLL。静止・アニメなし） */
  .cue{
    position:absolute; z-index:4; right:28px; bottom:22px;
    display:flex; flex-direction:column; align-items:center; gap:10px;
  }
  a.cue{text-decoration:none}
  a.cue:focus-visible{outline:2px solid var(--cold); outline-offset:4px}
  /* v2.3: キューの呼吸（ヘアラインが伸縮。IXD 規律内: transform のみ・ゆっくり・reduced-motion 停止） */
  @media (prefers-reduced-motion: no-preference){
    .cue i{animation: cue-breathe 3.2s cubic-bezier(0.45,0,0.55,1) infinite; transform-origin:50% 0}
    @keyframes cue-breathe{ 0%,100%{transform:scaleY(0.55)} 50%{transform:scaleY(1)} }
  }
  .cue span{
    font-family:'Inter','Helvetica Neue',Arial,sans-serif;
    font-size:10px; font-weight:500; letter-spacing:.25em;
    text-transform:uppercase; color:var(--dim);
    text-indent:.25em;   /* 末尾トラッキング分の光学センター補正 */
  }
  .cue i{width:1px; height:32px; background:var(--dim)}

  .hotspot{
    position:absolute; z-index:3;
    border:none; border-radius:50%;
    background:transparent; cursor:default;   /* v2.3: 手カーソル廃止（CEO 指示） */
    -webkit-tap-highlight-color:transparent;
  }
  .hotspot:focus{outline:none}
  .hotspot:focus-visible{
    outline:2px solid var(--cold);
    outline-offset:4px;
  }
  .hotspot[hidden]{display:none}

  /* rev9: モバイル M1「上に声、下に群像」（AD §3-2 推奨案）。
     横向きスマホ（高さ<480px）は AD §3-1 例外で横構図のまま */
  @media (max-width:767px) and (min-height:480px){
    .hero{height:100vh; height:100svh}
    .hero canvas{top:44%; height:56%}   /* 群像は下 56%。上 44% はコピーの夜空 */
    .copy{
      left:24px; right:24px; top:88px;   /* ヘッダー72px + 16px。実寸で下端と群像の分離を確認 */
      transform:none; max-width:none;
    }
    .copy .intro{margin-top:1.6em}       /* 縦は詰める（上 44% に収めるため） */
    .site-head{padding:0 16px}
    .site-head nav{gap:12px}
    .site-head nav a{font-size:11px; letter-spacing:.04em}
    .cue{right:auto; left:50%; bottom:16px; transform:translateX(-50%)}
  }
  @media (prefers-reduced-motion: reduce){
    /* CSS アニメは元々不使用。JS 側でも電流アニメを止める */
  }

/* ============================================================
   明面（読む場所）+ 夜面（contact/footer）+ スクロールモーション
   ============================================================ */
/* ============================================================
   全ページ v1: 明面（案B「読む場所」= 暖色寄りの白）+ 夜面（contact/footer）
   明面タイポ = design-spec §2-2 / 暗面トークン = AD spec §4
   注意: ヒーロー由来の全称リセット（*{margin:0}）が効いているため、
   セクション内の余白はすべて明示指定する
   ============================================================ */
:root{
  /* v2 モノトーンパレット（AD lightface-spec-v2 §1-1）。色相 218〜225° に統一、
     インク = 夜の紺そのもの #0C1226（ヒーローグラデ上端と同値 = 物質の連続）。
     コントラスト（WCAG 相対輝度・AD 算出値）:
     paper #F4F6FA × ink 17.17 / body 11.23 / 2nd 6.91 / cap 5.84
     deep  #E8EDF5 × ink 15.81 / body 10.34 / 2nd 6.36 / cap 5.37 — AA 以上 */
  --paper:#F4F6FA; --paper-deep:#E8EDF5;
  --p-ink:#0C1226; --p-body:#2B3550; --p-2nd:#49556E; --p-cap:#556077;
  --p-line:#D6DCE7; --p-line-strong:#B7C0D1;
  --foot-txt:#94A3B8;  /* footer（night 上・7.7:1）暗面トークンのため不変 */
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}
main{overflow-x:clip}  /* VOICE 巨大引用の断ち落とし分を確実に切る */

/* ---- セクション骨格（py-24 md:py-32 / max-w-6xl / 読み物 40rem ≒ 40字） ---- */
.sec{padding:96px 0}
@media (min-width:768px){ .sec{padding:128px 0} }
/* v2: ゴースト数字の座標系と断ち落とし（AD §3-1）。hidden 不可（sticky 副作用） */
.sec{position:relative; overflow-x:clip}
.sec .wrap{position:relative; z-index:1}   /* コンテンツはゴーストより前面 */
.face-light{background:var(--paper); color:var(--p-body)}
.face-light.deep{background:var(--paper-deep)}
.wrap{max-width:72rem; margin:0 auto; padding:0 24px}
.prose{max-width:40rem}

/* ---- 見出し定型（ノードドット + eyebrow + h2・左揃え） ---- */
.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:12px; font-weight:500; letter-spacing:.25em; text-transform:uppercase;
  color:var(--p-ink);
}
@media (min-width:768px){ .eyebrow{font-size:14px} }
.eyebrow::before{
  content:''; flex:none; width:7px; height:7px;
  border:1.5px solid currentColor; border-radius:50%;
}
.sec-h{
  margin-top:18px;
  font-size:clamp(1.875rem, 1.6rem + 0.9vw, 2.25rem);  /* 30→36px */
  font-weight:700; line-height:1.4; letter-spacing:.02em;
  font-feature-settings:'palt';
  color:var(--p-ink);
}
.sec-lead{
  margin-top:40px;
  max-width:50rem;   /* リードは 20px 時 40字 = AD 行長規格の上限。32字幅（40rem）では
                        「です。」等の1〜2字泣き別れが voice/contact リードで出た（目視1周目） */
  font-size:clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);  /* 18→20px */
  line-height:1.9; color:var(--p-body);
  text-wrap:pretty;
}
/* 読点単位の折返し制御（hero の .copy .nb と同技法。文言不変）。
   モバイルは行長 19字前後で句節（最長22字）が幅を超え、句節内折返し + 短行の
   連続になって逆効果のため 768px 以上のみ適用（目視3周目で決定） */
@media (min-width:768px){ .sec-lead .nb, .txt .nb{display:inline-block} }

/* ---- 明面の本文・リンク ---- */
.txt{margin-top:16px; font-size:1rem; line-height:1.9; color:var(--p-body); text-wrap:pretty}
.txt2{color:var(--p-2nd)}
.cap{font-size:.875rem; line-height:1.8; color:var(--p-cap)}
.face-light a{
  color:inherit; text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:4px;
  text-decoration-color:var(--p-line-strong);
}
.face-light a:hover{text-decoration-color:currentColor}
.face-light a:focus-visible{outline:2px solid var(--p-ink); outline-offset:3px}
.cta{margin-top:22px}
.cta a{font-weight:500; color:var(--p-ink)}
.num{font-variant-numeric:tabular-nums}  /* 数字は Inter（スタック先頭）+ 等幅数字 */

/* ---- v2 境界設計（AD §2）: 侵食SVG撤去 → ハードカット + 下げ振り線 + 入灯ノード ---- */
/* 夜→明: カット直下から eyebrow ドットの真上まで降りる 1px 垂直ヘアライン。
   境界 → ドット → creed 罫が同じ左基準軸（wrap 内容左端 + ドット中心 3.5px）に整列 */
#philosophy{position:relative}
#philosophy::before{
  content:''; position:absolute; width:1px;
  top:0; height:calc(96px - 14px);              /* sec 上パディングの手前 14px で止める */
  left:calc(max(24px, (100% - 72rem)/2 + 24px) + 3px);  /* eyebrow ドット中心 x に一致 */
  background:var(--p-line-strong);
}
@media (min-width:768px){ #philosophy::before{height:calc(128px - 14px)} }
/* 入灯ノード（琥珀・明面唯一の暖色）: カットライン上、上半分が夜・下半分が紙。
   contact の終灯ノードと対。静止 = 点灯が既定（reduced-motion / JS 無効の完成形） */
#philosophy .fold-node{
  position:absolute; top:-3px; width:6px; height:6px; border-radius:50%;
  left:calc(max(24px, (100% - 72rem)/2 + 24px) + 0.5px);
  background:#FFC276;
  box-shadow:0 0 14px 2px rgba(255,194,118,.35);
  pointer-events:none;
}
/* 明→夜: 対称の下げ振り線のみ（琥珀は置かない = 1つの面に暖色は1点まで） */
#contact{position:relative}
#contact::before{
  content:''; position:absolute; width:1px;
  top:0; height:calc(96px - 14px);
  left:calc(max(24px, (100% - 72rem)/2 + 24px) + 3px);
  background:rgba(215,225,239,.22);   /* 夜面上の月白ヘアライン */
}
@media (min-width:768px){ #contact::before{height:calc(128px - 14px)} }

/* ---- v2 前衛デバイス D1: ゴースト座標数字（AD §3-1） ---- */
.sec-ghost{
  position:absolute; top:-0.06em; z-index:0;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-weight:700; line-height:.8;
  font-size:clamp(12rem, 30vw, 34rem); letter-spacing:-0.04em;
  font-variant-numeric:tabular-nums;
  color:var(--p-ink);
  opacity:.06;                        /* paper 面 */
  pointer-events:none; user-select:none;
}
.face-light.deep .sec-ghost{opacity:.05}   /* deep 面 */
/* 断ち側（左右交互）。AD §3-1 例示 -0.08em では検証項目「20〜35% 画面外」（§5）に
   届かないため、検収基準側に合わせ -0.30em（V2 NOTES 1・実測は目視反復記録） */
.sec-ghost.gr{right:-0.30em}
.sec-ghost.gl{left:-0.30em}

/* ---- v2 前衛デバイス D2: フォリオ罫 + 座標行（AD §3-2） ---- */
.sec.folio{border-top:1px solid var(--p-line-strong); padding-top:40px}  /* 罫の近くに柱を寄せる */
.folio-row{display:flex; align-items:center; justify-content:space-between}
.folio-no{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:12px; font-weight:500; letter-spacing:.1em;
  font-variant-numeric:tabular-nums; color:var(--p-cap);
}
/* 縦リズム改訂: h2 は folio-row から大胆に落とす。空隙にゴースト数字の上端が覗く */
.folio-row + .sec-h{margin-top:clamp(48px, 8vw, 96px)}

/* ---- v2 前衛デバイス D3: 段差グリッド（AD §3-3。1024px 未満は行長最優先で段差なし） ---- */
@media (min-width:1024px){
  .shift-1{margin-left:calc(100% / 12 * 2)}   /* リード級: 2カラム右 */
  .shift-2{margin-left:calc(100% / 12 * 3)}   /* 本文級: 3カラム右 */
}

/* v2 D4（values 対角スタッガー）は .vals の基本定義の後段（カスケード順）に記述 */
.init{font-style:normal; font-weight:500; color:var(--p-ink)}  /* 「要求定義」初出: 半歩立てる（装飾なし） */
.creed{margin-top:64px}
.creed-item{border-top:1px solid var(--p-line); padding:28px 0}
.creed-item:last-child{border-bottom:1px solid var(--p-line)}
.creed-label{
  margin:0; font-size:.8125rem; font-weight:500; letter-spacing:.12em;
  color:var(--p-cap);
}
.creed-txt{
  margin-top:12px; font-size:clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight:700; line-height:1.7; letter-spacing:.02em;
  font-feature-settings:'palt'; color:var(--p-ink);
}

/* ---- services: 罫線区切りの5項目 ---- */
.svc-list{margin-top:64px}
.svc{
  display:grid; grid-template-columns:4.5rem 1fr;
  border-top:1px solid var(--p-line); padding:44px 0;
}
.svc-no{
  margin:0; padding-top:6px;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:.875rem; font-weight:500; letter-spacing:.1em;
  font-variant-numeric:tabular-nums; color:var(--p-cap);
}
.svc h3{
  margin:0; font-size:clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);  /* 20→24px */
  font-weight:700; line-height:1.6; letter-spacing:.02em;
  font-feature-settings:'palt'; color:var(--p-ink);
}
.svc .txt{max-width:40rem}
.menu{margin:18px 0 0; padding:0; list-style:none; max-width:40rem}
.menu li{
  position:relative; padding-left:1.2em; margin-top:6px;
  font-size:.9375rem; line-height:1.9; color:var(--p-2nd);
}
.menu li::before{content:'—'; position:absolute; left:0; color:var(--p-line-strong)}
.svc-more{margin:28px 0 0 4.5rem}
.svc-more a{font-weight:500; color:var(--p-ink)}
/* v2.5 ②→#director 所在表示: 文中リンク1本の脚注（矢印 CTA は過剰・spec §6）。
   リンク下線は .face-light a の既存規則を継承。専用装飾なし */
.svc-ref{margin:18px 0 0; font-size:.875rem; line-height:1.9; color:var(--p-2nd); max-width:40rem}
@media (max-width:767px){
  .svc{grid-template-columns:1fr; padding:36px 0}
  .svc-no{padding-top:0; margin-bottom:10px}
  .svc-more{margin-left:0}
}

/* ---- v2.6 director: 露頭する核（罫リスト全廃・AD director-redesign-spec） ----
   区切り = 形（04-1 文 / 04-2 語 / 04-3・04-4 項）+ 面（deep 中の paper バンド）
   + 余白 + 垂直軸1本。水平罫 0 本（v2.5 の 11 本を全廃）。
   コアスキルは weight 500 のまま級（22→32px）と面で立てる（太字化撤回）。
   折りたたみ禁止・静的展開は不変 */
.sec-h .en{font-family:'Inter','Helvetica Neue',Arial,sans-serif; letter-spacing:0}

.dir-groups{
  margin-top:64px;                      /* svc-list・creed と同じ入り */
  position:relative; padding-left:24px; /* 軸線のガター（全ブレークポイント共通） */
}
/* 軸線 = 物差し。x はテキスト左端の 21px 左（= eyebrow ドット中心軸と同じ +3px 系。
   philosophy 下げ振り線と同族の垂直ヘアライン）。z-index:2 でバンド（子の背景面）より前 */
.dir-groups::before{
  content:''; position:absolute; z-index:2;
  left:3px; top:8px; bottom:6px; width:1px;
  background:var(--p-line-strong);
}

.dir-g{position:relative}

/* 座標ラベル（creed-label 同族 + 座標番号）。目盛はラベル ::before
   —— 軸からテキストへ 10px 差す。ハード（04-4）は同じ層の右列なので目盛なし */
.dir-label{
  margin:0; position:relative;
  font-size:.8125rem; font-weight:500; letter-spacing:.12em;
  color:var(--p-cap);
}
.dir-label::before{
  content:''; position:absolute; left:-21px; top:calc(50% - .5px);
  width:10px; height:1px; background:var(--p-line-strong);
}
.dir-sub--hard .dir-label::before{content:none}
.dir-label .no{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:12px; font-weight:500; letter-spacing:.1em;
  font-variant-numeric:tabular-nums; margin-right:10px;
}

/* --- 04-1 文: 宣言の連。マーカーなし・インク・中級（在り方の声） --- */
.dir-creed{margin:18px 0 0; padding:0; list-style:none; max-width:40rem}
.dir-creed li{
  margin-top:10px;
  font-size:clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);  /* 17→19px */
  font-weight:500; line-height:1.9; letter-spacing:.02em;
  font-feature-settings:'palt'; color:var(--p-ink); text-wrap:pretty;
}

/* --- 04-2 語: 露頭バンド（deep の中の paper・全幅ブリード・罫影なし） ---
   --gx = wrap 内容左端の viewport x（sec-ghost/plumb と同じ座標式）。
   負マージンで左右とも画面端へ、padding で内容 x を上下グループと 1px 単位で一致させる
   （margin と padding が同じ --gx を参照するため誤差は相殺。100vw のスクロールバー
   はみ出しは .sec の overflow-x:clip が吸収） */
.dir-g--core{
  --gx: max(24px, (100vw - 72rem)/2 + 24px);
  margin-top:96px;
  margin-left:calc(-1 * var(--gx) - 24px);   /* -24px は .dir-groups の padding-left 分 */
  margin-right:calc(-1 * var(--gx));
  padding:80px var(--gx) 80px calc(var(--gx) + 24px);
  background:var(--paper);
}
/* バンド内の目盛はラベル基準のまま成立（padding 復元で x が上下グループと同一のため） */

/* 7語の星座: 〜1023px は自然な流し組み、1024px 以上は階段グリッド（左上→右下の対角
   = ヒーローの群像と同じ運動）。読み順 = DOM 順 = 行送り順 */
.dir-core{
  margin:18px 0 0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; column-gap:1.25em; row-gap:14px;
}
.dir-core li{
  font-size:clamp(1.375rem, 1.02rem + 1.55vw, 2rem);  /* 22→32px（1024px 以上は実質32px固定） */
  font-weight:500; line-height:1.5; letter-spacing:.04em;
  font-feature-settings:'palt'; color:var(--p-ink);
}
@media (min-width:1024px){
  .dir-core{
    display:grid; grid-template-columns:repeat(12, minmax(0,1fr));
    row-gap:clamp(28px, 3.2vw, 44px); column-gap:0;
  }
  .dir-core li{white-space:nowrap}
  /* 階段座標（行頭が 1→3→5→8 列と右へ沈む = 対角流）。全語 32px・重なりなし（§6 検証済） */
  .dir-core li:nth-child(1){grid-row:1; grid-column:1/5}    /* 問題解決力 */
  .dir-core li:nth-child(2){grid-row:1; grid-column:5/9}    /* 意思決定力 */
  .dir-core li:nth-child(3){grid-row:2; grid-column:3/6}    /* 推進力 */
  .dir-core li:nth-child(4){grid-row:2; grid-column:6/9}    /* 言語化力 */
  .dir-core li:nth-child(5){grid-row:2; grid-column:9/13}   /* メタ認知力 */
  .dir-core li:nth-child(6){grid-row:3; grid-column:5/11}   /* コミュニケーション力 */
  .dir-core li:nth-child(7){grid-row:4; grid-column:8/13}   /* ストレスレジリエンス */
}

/* --- 04-3/04-4 項: 支持層の2列。左軸に還る（lightface-spec §3-3 の錨）。
   .dir-list 本体の定義（15px/1.9/--p-2nd）は v2.5 から不変 --- */
.dir-list{margin:14px 0 0; padding:0; list-style:none; max-width:40rem}
.dir-list li{margin-top:6px; font-size:.9375rem; line-height:1.9; color:var(--p-2nd); text-wrap:pretty}
.dir-g--support{margin-top:96px}
.dir-sub--hard{margin-top:48px}
@media (min-width:768px){
  .dir-g--support{display:grid; grid-template-columns:7fr 5fr; column-gap:48px}
  .dir-sub--hard{margin-top:0}
}
@media (min-width:1024px){
  .dir-g--support{grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:0}
  .dir-sub--soft{grid-column:1/8}
  .dir-sub--hard{grid-column:9/13}
}
.dir-sub .dir-list{margin-top:14px}

/* --- モバイル圧縮 --- */
@media (max-width:767px){
  .dir-g--core{margin-top:64px; padding-top:56px; padding-bottom:56px}
  .dir-g--support{margin-top:64px}
}

/* ---- voice: 読ませる誌面 + 巨大引用（破調・aria-hidden） ----
   v2: 旧 #voice 上罫は .sec.folio の全幅罫に統合（AD §3-2・重複定義削除） */
.bigquote{
  margin:64px 0 0; width:100%;
  overflow:hidden; white-space:nowrap;
  /* v2.1: 6.4vw → 4.7vw（批評 v2 裁定・CEO 承認）。1280px で「ときには殴り合いとも
     思えるオー」で切れ、最大の和文が「殴り合い」になっていた。4.7vw は vw 比例域で
     常に約20.8字＝「…オープンな議論」まで視界に入る断ち位置（vw 比例のため
     1024〜1920px で一定）。〜907px は min 2.75rem が効き従来どおり（モバイルの
     断ちは巨大引用の性質上許容・直下に全文あり） */
  font-size:clamp(2.75rem, 4.7vw, 6.75rem);
  font-weight:700; line-height:1.15; letter-spacing:.02em;
  font-feature-settings:'palt'; text-indent:-0.12em;
  color:var(--p-ink);
}
.voices{margin-top:56px}
.voice-item{padding:44px 0 0}
.voice-item + .voice-item{margin-top:44px; border-top:1px solid var(--p-line)}
.v-txt{
  margin:0; font-size:1.0625rem; line-height:2; color:var(--p-body);
  text-wrap:pretty;
}
.v-who{margin-top:18px; font-size:.875rem; color:var(--p-cap)}
.clients{margin-top:72px; padding-top:24px; border-top:1px solid var(--p-line)}

/* ---- values: 5カード（罫線区切り）+ 声の断片 ---- */
.vals{
  margin-top:64px;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:48px 40px;
}
.val{border-top:1px solid var(--p-line-strong); padding-top:22px}
.val h3{
  margin:0; font-size:1.25rem; font-weight:700; letter-spacing:.06em;
  color:var(--p-ink);
}
.val .txt{margin-top:12px}
.val-q{margin-top:16px}
.val-q .v-src{white-space:nowrap}
/* ---- v2 前衛デバイス D4: values 対角スタッガー（AD §3-4）。
   1行目（意思・中立・本質）0→56→112px の沈み込み = 対角、2行目は2カラム内側へ。
   カード内部の組みは不変。minmax(0,1fr) は .v-src nowrap の min-content 溢れ対策
   （12分割の等分を保証。行長は val 4カラム幅 ≒ 22〜24字で規格内） ---- */
@media (min-width:1024px){
  .vals{grid-template-columns:repeat(12, minmax(0, 1fr)); gap:64px 40px}
  .val:nth-child(1){grid-column:1 / 5}
  .val:nth-child(2){grid-column:5 / 9;  margin-top:56px}
  .val:nth-child(3){grid-column:9 / 13; margin-top:112px}
  .val:nth-child(4){grid-column:3 / 7;  margin-top:8px}
  .val:nth-child(5){grid-column:7 / 11; margin-top:64px}
}
/* 768〜1023px: 既存 auto-fill 2列 / 〜767px: 1列（現行フォールバック維持） */

/* ---- knowledge: テキストカード（画像・埋め込みなし） ---- */
.media-grid{
  margin-top:56px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:40px;
}
.media{border-top:1px solid var(--p-line); padding-top:20px}
.media-tag{
  margin:0; font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:.75rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--p-cap);
}
.media h3{
  margin-top:12px; font-size:1.125rem; font-weight:700; line-height:1.7;
  letter-spacing:.02em; font-feature-settings:'palt'; color:var(--p-ink);
}
.note-block{margin-top:64px; border-top:1px solid var(--p-line); padding-top:44px}
.note-block h3{
  margin:0; font-size:clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight:700; line-height:1.6; font-feature-settings:'palt'; color:var(--p-ink);
}

/* ---- company: 定義表 ---- */
.co-dl{margin-top:56px; border-top:1px solid var(--p-line)}
.co-row{
  display:grid; grid-template-columns:9em 1fr; gap:4px 32px;
  padding:20px 0; border-bottom:1px solid var(--p-line);
}
.co-row dt{font-weight:700; color:var(--p-ink); font-size:.9375rem; line-height:1.9}
.co-row dd{margin:0; color:var(--p-body); font-size:.9375rem; line-height:1.9; font-variant-numeric:tabular-nums}
@media (max-width:767px){ .co-row{grid-template-columns:1fr} }

/* ---- info: 記録のリスト ---- */
.info-list{margin-top:56px; padding:0; list-style:none}   /* v2: shorthand をやめ margin-left を .shift-1 に明け渡す（全称リセット済みのため等価） */
.info-list li{
  display:grid; grid-template-columns:7em 1fr; gap:8px 24px;
  padding:20px 0; border-bottom:1px solid var(--p-line);
}
.info-list li:first-child{border-top:1px solid var(--p-line)}
.info-list time{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:.875rem; font-weight:500; letter-spacing:.02em;
  font-variant-numeric:tabular-nums; color:var(--p-ink); line-height:2;
}
.info-list span{font-size:.9375rem; line-height:1.9; color:var(--p-body)}
@media (max-width:479px){
  .info-list li{grid-template-columns:1fr; gap:2px}
}

/* ============================================================
   contact（夜・再入）+ footer — 暗面トークン（AD spec §4）
   ============================================================ */
.night{
  background:linear-gradient(#080D16, #0C1226 55%, #0A0F19);
  color:var(--sub);
}
.night .eyebrow{color:var(--cold)}
.night .sec-h{color:var(--ink)}
.night .sec-lead{color:var(--sub); line-height:1.95}
.n-form{margin-top:56px}
.f-row{margin-top:24px}
.f-row label{
  display:block; margin-bottom:8px;
  font-size:.8125rem; font-weight:500; letter-spacing:.04em;
  color:var(--sub-strong);
}
.f-field{
  width:100%; padding:12px 14px;
  font:inherit; font-size:1rem; line-height:1.6; color:var(--ink);
  background:rgba(215,225,239,.05);
  border:1px solid rgba(157,172,194,.35); border-radius:6px;
}
.f-field:focus{outline:none; border-color:var(--cold); box-shadow:0 0 0 1px var(--cold)}
textarea.f-field{resize:vertical; min-height:8.5em}

.privacy{
  margin-top:36px;
  border-top:1px solid rgba(157,172,194,.25);
  border-bottom:1px solid rgba(157,172,194,.25);
}
.privacy summary{
  padding:16px 4px; cursor:pointer;
  font-size:.9375rem; font-weight:500; letter-spacing:.04em;
  color:var(--sub-strong);
}
.privacy summary:hover{color:var(--ink)}
.privacy summary:focus-visible{outline:2px solid var(--cold); outline-offset:3px}
.privacy-body{padding:8px 4px 28px; font-size:.84375rem; line-height:1.9; color:var(--sub)}
.privacy-body p{margin-top:12px}
.privacy-body h3{
  margin:26px 0 0; font-size:.875rem; font-weight:700; letter-spacing:.04em;
  color:var(--sub-strong);
}
.privacy-body ul{margin:10px 0 0; padding-left:1.4em}
.privacy-body li{margin-top:4px}

.send-row{margin-top:40px; display:flex; align-items:center; flex-wrap:wrap; gap:4px}
.btn-send{
  font:inherit; font-size:.9375rem; font-weight:500; letter-spacing:.1em;
  color:var(--ink); background:transparent; cursor:pointer;
  border:1px solid rgba(159,194,232,.55); border-radius:999px;
  padding:14px 52px;
}
.btn-send:hover{background:rgba(159,194,232,.08)}
.btn-send:focus-visible{outline:2px solid var(--cold); outline-offset:3px}
.lamp{flex:none; margin-left:-4px}   /* 送信ボタンの傍らの琥珀の灯（気配・静的） */
.form-note{margin-top:18px; font-size:.75rem; letter-spacing:.02em; color:var(--dim)}

/* ---- v2.8 送信完了UI「灯が満ちる」（CEO 承認・円環の閉じ）----
   成功: フォーム項目が静かに沈み、lamp の琥珀が満ち、完了メッセージが立つ。
   reduced-motion: 遷移なしで即座に完了状態（メッセージは同一）。
   実送信はプロトでは行わない（本実装は contact.php 経由・C-1 対処とセット） */
.n-form.is-done .f-row,
.n-form.is-done .privacy,
.n-form.is-done .send-row,
.n-form.is-done .form-note{ display:none }
.form-done:focus{ outline:none }   /* プログラムフォーカスの既定リングを抑止（aria-live が告知を担う） */
.form-done{
  display:none; margin-top:40px;
}
.n-form.is-done .form-done{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.form-done .lamp{ flex:none; margin-left:-4px }
.form-done-msg{ max-width:26em }
.form-done-msg .fd-h{
  margin:0; font-size:1.0625rem; font-weight:500; letter-spacing:.04em;
  color:var(--sub-strong); line-height:1.9;
}
.form-done-msg .fd-p{
  margin:6px 0 0; font-size:.9375rem; color:var(--sub); line-height:1.95;
}
@media (prefers-reduced-motion: no-preference){
  .js .n-form.is-done .form-done .lamp-warm{
    animation: lamp-fill 1200ms var(--mv-ease) both;
  }
  .js .n-form.is-done .form-done-msg{
    animation: fd-in 700ms var(--mv-ease) 500ms both;
  }
  @keyframes lamp-fill{ from{opacity:0} to{opacity:1} }
  @keyframes fd-in{ from{opacity:0} to{opacity:1} }
}
.form-status{margin-top:14px; font-size:.875rem; color:var(--sub-strong); min-height:1.5em}

.site-foot{
  background:#070B12;
  border-top:1px solid rgba(226,232,240,.12);
  padding:44px 0 52px;
  color:var(--foot-txt);
}
.foot-in{display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:16px 32px}
.foot-nav{display:flex; gap:28px}
.foot-nav a{
  font-size:.8125rem; letter-spacing:.04em; color:var(--foot-txt);
  text-decoration:none;
}
.foot-nav a:hover{color:#F8FAFC}
.foot-nav a:focus-visible{outline:2px solid var(--cold); outline-offset:3px}
.copyright{
  margin:0; font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:.8125rem; letter-spacing:.02em; font-variant-numeric:tabular-nums;
}

/* ============================================================
   scroll-motion v1「信号が届いて、開く」（IXD 2026-08-05 §5-2）
   reduce 環境と JS 無効環境にはこのブロックのセレクタが一切当たらない
   （隠す CSS は no-preference × html.js の内側のみ = 初期状態が常に完成形）
   ============================================================ */
@media (prefers-reduced-motion: no-preference){

  :root{
    --mv-ease: cubic-bezier(0.25, 0.6, 0.3, 1);  /* = 前仕様 --ease-out-soft・サイト唯一の easing */
  }

  /* --- 共通: 隠し状態と遷移（.js 配下のみ） --- */
  .js [data-mv]:not(.in),
  .js [data-mv-group]:not(.in) > *{ opacity:0 }
  .js [data-mv], .js [data-mv-group] > *{
    transition: opacity 550ms var(--mv-ease), transform 550ms var(--mv-ease);
  }

  /* --- eyebrow: ドット到達（scale 0.35 → 1・320ms） --- */
  .js .eyebrow[data-mv]{ transition-duration:300ms }
  .js .eyebrow[data-mv]::before{
    transition: transform 320ms var(--mv-ease);
  }
  .js .eyebrow[data-mv]:not(.in)::before{ transform: scale(.35) }

  /* --- 見出し / リード --- */
  .js .sec-h[data-mv]{ transition-duration:560ms; transition-delay:140ms }
  .js .sec-h[data-mv]:not(.in){ transform: translateY(12px) }
  .js .sec-lead[data-mv]{ transition-duration:500ms; transition-delay:280ms }
  /* .sec-lead は opacity のみ（transform を書かない） */

  /* --- 罫線: 左から引かれる（mv-rule はユニット要素に併記するクラス） --- */
  .js .mv-rule{ border-top-color: transparent !important; position: relative }
  .js .mv-rule::before{
    content:''; position:absolute; top:-1px; left:0; right:0; height:1px;
    background: var(--p-line);
    transform: scaleX(0); transform-origin: 0 50%;
    transition: transform 650ms var(--mv-ease);
  }
  .js .mv-rule--strong::before{ background: var(--p-line-strong) }
  .night .mv-rule::before{ background: rgba(157,172,194,.25) }
  .js .in.mv-rule::before,
  .js [data-mv].in .mv-rule::before,
  .js [data-mv-group].in > .mv-rule::before{ transform: scaleX(1) }

  /* --- カードユニット --- */
  .js .svc[data-mv]:not(.in) > div{ opacity:0; transform: translateY(10px) }
  .js .svc[data-mv] > div{ transition: opacity 550ms var(--mv-ease), transform 550ms var(--mv-ease) }
  .js .svc[data-mv] .svc-no{ transition: opacity 450ms var(--mv-ease) 160ms }
  .js .svc[data-mv]:not(.in) .svc-no{ opacity:0 }
  .js [data-mv-group]:not(.in) > .val,
  .js [data-mv-group]:not(.in) > .media,
  .js [data-mv-group]:not(.in) > .creed-item{ transform: translateY(10px) }
  /* v2.6: director は dir-label = data-mv 汎用フェード、3つの ul = data-mv-group
     （> li 8px ライズ + 70ms 段差の既存規則がそのまま効く）。バンド面・軸線・目盛は
     静止既定（面は地面。垂直版 mv-rule の語彙新設は IXD 裁量・redesign-spec §5） */
  .js [data-mv-group]:not(.in) > li{ transform: translateY(8px) }

  /* --- グループ stagger（70ms × 3段で頭打ち。IXD §2-3「罫線は所属ユニットの
         delay に従う」のため ::before 側にも同段の delay を追補 = V2 NOTES 3） --- */
  .js [data-mv-group] > :nth-child(2){ transition-delay: 70ms }
  .js [data-mv-group] > :nth-child(3){ transition-delay: 140ms }
  .js [data-mv-group] > :nth-child(n+4){ transition-delay: 210ms }
  .js [data-mv-group] > :nth-child(2).mv-rule::before{ transition-delay: 70ms }
  .js [data-mv-group] > :nth-child(3).mv-rule::before{ transition-delay: 140ms }
  .js [data-mv-group] > :nth-child(n+4).mv-rule::before{ transition-delay: 210ms }

  /* --- director 04-2: 階段カスケード data-mv-group="cascade"（IXD 追補 2026-08-05）
     「信号が階段を降りていく」— per-word stagger 80ms×7・対角着地 7px/7px。
     3段頭打ちと変位の限定例外（適用3条件は core-skills-motion.md §2）。
     汎用 stagger より後・.in リセットより前に置く（後置優先） --- */
  .js [data-mv-group="cascade"] > li{
    transition: opacity 480ms var(--mv-ease), transform 480ms var(--mv-ease);
  }
  .js [data-mv-group="cascade"]:not(.in) > li{
    opacity:0; transform: translate(-7px, -7px);
  }
  .js [data-mv-group="cascade"] > li:nth-child(1){ transition-delay: 0ms }
  .js [data-mv-group="cascade"] > li:nth-child(2){ transition-delay: 80ms }
  .js [data-mv-group="cascade"] > li:nth-child(3){ transition-delay: 160ms }
  .js [data-mv-group="cascade"] > li:nth-child(4){ transition-delay: 240ms }
  .js [data-mv-group="cascade"] > li:nth-child(5){ transition-delay: 320ms }
  .js [data-mv-group="cascade"] > li:nth-child(6){ transition-delay: 400ms }
  .js [data-mv-group="cascade"] > li:nth-child(7){ transition-delay: 480ms }

  /* --- voice: 証言は変位ゼロのフェードのみ / 巨大引用は 16px --- */
  .js .voice-item[data-mv]{ transition-duration:500ms }  /* transform を書かない */
  .js .bigquote[data-mv]{ transition-duration:700ms }
  .js .bigquote[data-mv]:not(.in){ transform: translateX(16px) }

  /* --- company: 表全体フェード（変位なし・罫線先行） --- */
  .js .co-dl[data-mv]{ transition-duration:500ms; transition-delay:100ms }

  /* --- contact: 灯の2段点灯（寒が先、暖が後。ページ唯一の緩発光・1回きり） --- */
  .js .lamp[data-mv] .lamp-cold{ transition: opacity 500ms var(--mv-ease) 200ms }
  .js .lamp[data-mv] .lamp-warm{ transition: opacity 900ms var(--mv-ease) 550ms }
  .js .lamp[data-mv]:not(.in) .lamp-cold,
  .js .lamp[data-mv]:not(.in) .lamp-warm{ opacity:0 }
  .js .lamp[data-mv]{ transition:none }  /* コンテナ自体は隠さない（子で制御） */
  .js .lamp[data-mv]:not(.in){ opacity:1 }

  .js [data-mv].in, .js [data-mv-group].in > *{ opacity:1; transform:none }

  /* --- ゴースト数字: IXD §7-③（svc-no 語彙の拡大適用 = opacity のみ・+160ms）。
         終端 opacity は AD §3-1 の静止値（.06 / deep .05）——汎用 .in{opacity:1} より
         後に置いて上書きする --- */
  .js .sec-ghost[data-mv]{ transition: opacity 450ms var(--mv-ease) 160ms }
  .js .sec-ghost[data-mv].in{ opacity:.06 }
  .js .face-light.deep .sec-ghost[data-mv].in{ opacity:.05 }
}

/* ============================================================
   本実装のみの追加: フォーム送信の機能状態 + honeypot
   （見た目の新語彙ではない。送信中の再操作防止と bot 対策）
   ============================================================ */
.btn-send:disabled{opacity:.55; cursor:default}
.btn-send:disabled:hover{background:transparent}
/* honeypot: 視覚・SR・タブ順のすべてから外す（人間は触れない欄） */
.hp-row{position:absolute !important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); border:0; white-space:nowrap}