@charset "UTF-8";
/* =========================================================================
   OFFICE ABLE — トップページ「無彩色ミニマル」上書き
   2026-08-17 追加。参照したのは https://trionn.com/ のデザイン言語
   （完全無彩色／巨大グロテスク見出し／等幅の小ラベル／フラットな面）であって
   レイアウトや文言ではない。既存の構成・原稿はそのまま使う。

   ⚠️ このファイルは front-page でだけ読み込む（functions.php の is_front_page 分岐）。
      さらに全セレクタを body.home で囲ってあるので、
      ・読み込み条件を外しても他ページには一切効かない
      ・戻したいときは enqueue を1行消すだけで完全に元へ戻る
      という二重の安全弁になっている。既存CSSは1バイトも書き換えていない。

   ⚠️ 読み込み順は mono.css より後（依存に oa-mono を指定）。先に読むと負けて何も効かない。

   ---- 設計の要点（ここを読まずに触ると必ず事故る）----
   このサイトの色は modern.css の :root で light-dark() のトークンに一本化されている。
   個別セレクタを1つずつ潰しにいくと、:root[data-theme="dark"] .xxx（詳細度 0-3-0〜0-4-0）に
   body.home .xxx（0-2-1）が負けて「効いたり効かなかったり」する。
   なので【第1段でトークンごと無彩色に差し替え】、【第2段で直値のダーク用ルールだけ潰す】。
   第2段のセレクタが :root[data-theme="dark"] body.home… と長いのは詳細度を勝たせるため。
   ========================================================================= */

/* ============ 等幅ラベル用の書体 ============
   TRIONNは Martian Mono を小ラベル（"DISCUSS YOUR PROJECT" 等）に使っている。
   同書体は SIL OFL なので自社サイトで使える。latinサブセットのみ23KB。
   ⚠️ font-display:swap。本文書体ではないので、入れ替わっても読みは崩れない。 */
@font-face{
  font-family:'Martian Mono';
  src:url('../fonts/martian-mono-latin-300500.woff2') format('woff2');
  font-weight:300 500;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* =========================================================================
   第1段：トークンの差し替え
   TRIONN実測（DevTools）:
     body背景 #040508 ／ 面 #0C0C0C ／ 本文 #D8D8D8 ／ 罫線 rgba(255,255,255,.13)
   ⚠️ light-dark() は使わず :root[data-theme] で分岐する（既存の流儀に合わせる）。
      light-dark() で書くと、トグルを押した瞬間に color-scheme の再解決が1フレーム
      遅れて色が飛ぶ。
   ⚠️ --white は「白」ではなく "カード等の面の色"（modern.css の命名）。
      ここを黒に倒すのが無彩色化の本体。名前に釣られて #fff を入れないこと。
   ========================================================================= */
body.home{
  /* ブランド青 → 無彩色。ks-mono が既にグレーに寄せているが、トップはさらに落とす */
  --blue:#C9C9C9; --blue-d:#9C9C9C; --blue-l:#E4E4E4; --blue-p:#151515;
  --ink:#EDEDED;
  --gray:#8E8E8E; --gray-l:#6F6F6F;
  --line:rgba(255,255,255,.13);
  --bg:#040508; --panel:#0C0C0C; --white:#0C0C0C;
  --body:#9A9A9A;
  --surface-2:#0A0A0A;
  --shadow:rgba(0,0,0,.55); --shadow-s:rgba(0,0,0,.45);
  /* TRIONNは角丸を持たない。--r 系を0にすると、カード・フッター・下層ヒーローの
     角丸がまとめて落ちる（個別に消して回る必要がない） */
  --r:0px; --r-card:0px; --r-img:0px;
  /* 見出しは Poppins（幾何学サンセリフ）をやめて Inter に。
     TRIONNの Neue Haas Grotesk はグロテスクなので、丸みのある Poppins だと別物になる。
     Inter を weight 400・字間マイナスで詰めるのが、入手できる書体では最も近い */
  --ff-dp:'Inter',sans-serif;
  --ff-mono:'Martian Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* 独自トークン（ライト帯用） */
  --tri-lite:linear-gradient(0deg,#FFFFFF 0%,#D2D2D2 100%);
  --tri-lite-ink:#141414;
  --tri-lite-dim:#5A5A5A;
  --tri-line-s:rgba(255,255,255,.28);
}
/* 明るい配色を明示的に選んでいる人向け。無彩色という条件は同じで、明暗だけ反転させる */
:root[data-theme="light"] body.home{
  --blue:#3A3A3A; --blue-d:#1E1E1E; --blue-l:#6E6E6E; --blue-p:#F0F0F0;
  --ink:#141414;
  --gray:#5A5A5A; --gray-l:#7A7A7A;
  --line:rgba(0,0,0,.14);
  --bg:#FFFFFF; --panel:#F4F4F4; --white:#FFFFFF;
  --body:#4A4A4A;
  --surface-2:#F6F6F6;
  --shadow:rgba(0,0,0,.08); --shadow-s:rgba(0,0,0,.06);
  --tri-lite:linear-gradient(0deg,#F4F4F4 0%,#DCDCDC 100%);
  --tri-line-s:rgba(0,0,0,.32);
}

/* =========================================================================
   第2段：直値で塗られているダーク用ルールの打ち消し
   （modern.css / us.css が青寄りの黒を直に書いている箇所。トークンでは消せない）
   ========================================================================= */
:root[data-theme="dark"] body.home,
:root[data-theme="dark"] body.home.stage-bg,
:root[data-theme="dark"] body.home.estrela{background:#040508;}
:root[data-theme="dark"] body.home.stage-bg .about,
:root[data-theme="dark"] body.home.stage-bg #service,
:root[data-theme="dark"] body.home.stage-bg .sec.white,
:root[data-theme="dark"] body.home.stage-bg .sec.gray,
:root[data-theme="dark"] body.home .about,
:root[data-theme="dark"] body.home .sec.gray,
:root[data-theme="dark"] body.home .sec.white{background:#040508;}
:root[data-theme="dark"] body.home .card .ph,
:root[data-theme="dark"] body.home .wcard .ph,
:root[data-theme="dark"] body.home .ncard .ph{background:#0C0C0C;}
:root[data-theme="dark"] body.home .marquee{background:transparent;}
:root[data-theme="dark"] body.home .foot{background:#040508;}
:root[data-theme="dark"] body.home .foot-box{background:#0C0C0C;}
:root[data-theme="dark"] body.home.stage-bg .foot-box{background:#0C0C0C;}
:root[data-theme="dark"] body.home .fv-news .tagn{color:#8E8E8E;}
/* 本文を読ませるための「地色ベール」。青寄りの黒だったので無彩色に敷き直す */
:root[data-theme="dark"] body.home .sec>.ribbon::after{
  background:linear-gradient(100deg,rgba(4,5,8,.94) 0%,rgba(4,5,8,.72) 30%,
    rgba(4,5,8,.22) 52%,transparent 68%);}
:root[data-theme="dark"] body.home .fv .ribbon::after{
  background:linear-gradient(102deg,rgba(4,5,8,.90) 0%,rgba(4,5,8,.62) 26%,
    rgba(4,5,8,.16) 46%,transparent 60%);}
/* ライト側も同様に、青寄りの面を無彩色へ */
:root[data-theme="light"] body.home.stage-bg .about,
:root[data-theme="light"] body.home.stage-bg #service,
:root[data-theme="light"] body.home.stage-bg .sec.white{background:#FFFFFF;}

/* ⚠️⚠️ ヒーローだけは絶対に塗らないこと。
   3DCG（.stage）は z-index:0 の固定レイヤーで、その上に .fv が z-index:2 で重なる。
   ここに不透明な地色を置いた瞬間、マークが完全に隠れる。
   実際これをやって「3Dが消えた」状態を作り、原因の特定に手間取った。
   地色は body 側が持っているので、ヒーローは透明のままでよい。
   ⚠️ ベール（.fv .ribbon::after）も同じ理由で、左半分だけを薄く曇らせる程度に留める。 */
body.home .fv,
:root[data-theme="dark"] body.home .fv,
:root[data-theme="light"] body.home .fv{background:transparent;}

/* =========================================================================
   第3段：タイポグラフィと UI 言語
   ========================================================================= */

/* ============ ヘッダー ============
   ⚠️ mix-blend-mode:exclusion は殺さない。数字バンドを白帯にするので、
      地の明暗に追従してくれる既存の仕組みがそのまま必要。
      TRIONN化は「ナビを等幅の小ラベルに」「操作ボタンを枠線の丸に」の2点だけ。
   ⚠️ nav の gap は消さないこと（消すと項目が全部くっついて一語に見える）。
      EN/JPを重ねてホバーで入れ替える作りなので .jp も display:none にしない。 */
/* ロゴの文字組は us.css の header .logo に一本化（2026-08-20 「サイン」案採用）。
   ここにあったホーム専用の上書き（17px/600）は撤去した——全ページで同じ声にするため */
body.home header nav{gap:clamp(18px,2.5vw,38px);}
body.home header nav a .en{
  font-family:var(--ff-mono);font-weight:400;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;}
body.home header nav a .jp{font-size:10.5px;letter-spacing:.1em;}
/* 操作ボタンは TRIONN の "MENU ≡" と同じ枠線のピル。
   currentColor で描くので exclusion 下でも地に応じて反転する */
body.home header .theme-tg,
body.home header .burger{
  width:38px;height:38px;border:1px solid currentColor;border-radius:999px;
  display:grid;place-items:center;opacity:.85;padding:0;
  transition:opacity var(--dur) var(--ease);}
body.home header .theme-tg:hover,
body.home header .burger:hover{opacity:.5;}
body.home header .theme-tg svg{width:15px;height:15px;}
body.home header .burger{gap:5px;align-content:center;justify-items:center;}
body.home header .burger span{width:13px;}

/* ============ ヒーロー ============
   TRIONN実測: 見出しは font-weight 400 / line-height .92 / letter-spacing -.035em。
   ⚠️ 現行は Poppins 500 / 1.06 で字面が丸く広い。ここを詰めるのが
      「TRIONNに見えるか」の8割を決める。 */
body.home .fv{padding:clamp(124px,16vh,180px) var(--pad) 132px;}
body.home .fv h1{
  font-family:var(--ff-dp);font-weight:400;
  line-height:.92;letter-spacing:-.035em;
  font-size:min(clamp(44px,8.7vw,146px),19vh);
  color:var(--ink);}
/* 和文リードは等幅にできない（和文に等幅欧文は当たらない）ので、
   ウェイトを落として字間を開け、TRIONNの「静かな補足」の質感に寄せる */
:root[data-theme="dark"] body.home.ks-mono .fv .jp,
body.home .fv .jp{
  font-weight:400;font-size:clamp(12.5px,1.15vw,16px);letter-spacing:.16em;
  color:var(--gray);margin-top:clamp(26px,3vw,40px);line-height:2.1;text-shadow:none;}
:root[data-theme="dark"] body.home.ks-mono .fv .jp em,
body.home .fv .jp em{color:var(--ink);font-weight:500;}
/* 左下のNEWS行を TRIONN の下線付き等幅リンクに寄せる */
body.home .fv-news{gap:16px;align-items:baseline;}
body.home .fv-news .tagn{
  background:transparent;border:1px solid var(--tri-line-s);
  border-radius:0;font-family:var(--ff-mono);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;padding:5px 10px;}
body.home .fv-news time{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.1em;
  color:var(--gray);}
body.home .fv-news a{border-bottom-color:var(--tri-line-s);font-size:13px;
  letter-spacing:.04em;padding-bottom:4px;}
body.home .fv-news a:hover{border-bottom-color:var(--ink);}
body.home .ks-scroll span{font-family:var(--ff-mono);font-size:9px;letter-spacing:.3em;
  color:var(--gray);}

/* ============ セクションの小ラベル ============
   TRIONNは巨大見出しの上に必ず等幅の小ラベルを置く。
   ⚠️ .sec-label 自身の ::before では作らないこと。us.js が .sec-label の中身を
      .rl（inline-block + overflow:hidden）で包んで文字を1字ずつ立ち上げるため、
      ::before がそのマスクに巻き込まれて消える。ラッパー側に生やすのが安全。 */
body.home .about-in::before,
body.home .oa-process .oa-head::before,
body.home #service>div:first-child::before,
body.home #works .head-row::before,
body.home #news .head-row::before,
body.home .ks-statband .stats-in::before{
  display:block;width:100%;
  font-family:var(--ff-mono);font-weight:400;font-size:9.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gray);
  margin-bottom:clamp(20px,2.4vw,34px);}
body.home .about-in::before{content:"01 — ABOUT";}
/* v2.30.0：ABOUT の次に Our Process（parts/next-process.php）が入ったので番号を1つずつ送った */
body.home .oa-process .oa-head::before{content:"02 — PROCESS";}
body.home #service>div:first-child::before{content:"03 — SERVICE";}
body.home #works .head-row::before{content:"04 — WORKS";}
body.home #news .head-row::before{content:"05 — NEWS";}
body.home .ks-statband .stats-in::before{content:"KEY FACTS";
  color:var(--tri-lite-dim);text-align:center;margin-bottom:clamp(26px,3vw,44px);}
/* .head-row は flex。::before に幅を持たせないと見出しと横並びになる */
body.home #works .head-row,
body.home #news .head-row{flex-wrap:wrap;}

/* ============ 見出し・本文 ============ */
body.home .sec-label{
  font-family:var(--ff-dp);font-weight:400;
  font-size:clamp(38px,5.4vw,86px);line-height:.94;letter-spacing:-.035em;
  color:var(--ink);}
/* 和文リード。TRIONNの英文ほど行間を詰められない（和文は潰れる）ので、
   ウェイトと字間を整えつつサイズを一段上げて見出しとしての強さを持たせる */
body.home .lead{
  font-weight:500;font-size:clamp(17px,2.05vw,30px);line-height:1.85;letter-spacing:.02em;
  color:var(--ink);}
body.home .lead em{color:var(--ink);font-weight:700;}
body.home .lead-en{font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;
  line-height:2.3;color:var(--gray);text-transform:uppercase;}
body.home .lead-body{color:var(--body);font-size:clamp(13px,1.1vw,15px);line-height:2.2;}
body.home .lead-body em{color:var(--ink);}
body.home .sub-jp{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.24em;
  color:var(--gray);text-transform:uppercase;}

/* ============ ボタン → 下線＋矢印の等幅リンク ============
   TRIONNは本文中のCTAをピルにしない。細い下線と右向き矢印だけ。
   ⚠️ 矢印SVGは「↗（右上）」の1種類しか無いので45度回して「→」にする。
      i の寸法を0にしないこと（gapが崩れて文字に矢印がめり込む） */
body.home .about .pill,
body.home .head-row .pill.ghost,
body.home .oa-entry .pill,
:root[data-theme="dark"] body.home .about .pill,
:root[data-theme="dark"] body.home .head-row .pill.ghost,
:root[data-theme="dark"] body.home .oa-entry .pill{
  background:transparent;color:var(--ink);box-shadow:none;
  border-radius:0;border-bottom:1px solid var(--tri-line-s);
  padding:0 2px 12px;gap:clamp(30px,5vw,64px);
  font-family:var(--ff-mono);font-weight:400;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);}
:root[data-theme="dark"] body.home .about .pill:hover,
:root[data-theme="dark"] body.home .head-row .pill.ghost:hover,
:root[data-theme="dark"] body.home .oa-entry .pill:hover,
body.home .about .pill:hover,
body.home .head-row .pill.ghost:hover,
body.home .oa-entry .pill:hover{
  background:transparent;border-bottom-color:var(--ink);color:var(--ink);}
:root[data-theme="dark"] body.home .about .pill i,
:root[data-theme="dark"] body.home .head-row .pill.ghost i,
:root[data-theme="dark"] body.home .oa-entry .pill i,
body.home .about .pill i,
body.home .head-row .pill.ghost i,
body.home .oa-entry .pill i{
  background:transparent;width:15px;height:15px;transform:rotate(45deg);}
:root[data-theme="dark"] body.home .about .pill i svg,
:root[data-theme="dark"] body.home .head-row .pill.ghost i svg,
:root[data-theme="dark"] body.home .oa-entry .pill i svg,
body.home .about .pill i svg,
body.home .head-row .pill.ghost i svg,
body.home .oa-entry .pill i svg{stroke:currentColor;width:15px;height:15px;}
body.home .about .pill:hover i,
body.home .head-row .pill.ghost:hover i,
body.home .oa-entry .pill:hover i{transform:rotate(45deg) translate(2px,-2px);}

/* ============ 事業カード ============
   TRIONNは面を持たない。カードの地と影をやめ、細い罫線で区切るだけにする */
body.home .cards{gap:clamp(20px,2.6vw,44px);}
/* ⚠️ modern.css の :root[data-theme="dark"] .card（詳細度 0-3-0）が
   box-shadow と border:1px（全周）を持っている。body.home .card（0-2-1）では
   負けるので :root[data-theme="dark"] を頭に足して 0-4-1 にする。
   また border-top だけ書いても残り三辺が生き残って「囲み枠」になるので、
   一度 border:0 に落としてから上辺だけ引き直すこと。 */
:root[data-theme="dark"] body.home .card,
body.home .card{
  background:transparent;box-shadow:none;
  border:0;border-top:1px solid var(--line);}
body.home .card:hover{transform:none;box-shadow:none;}
body.home .card .hd{padding:26px 0 0;}
body.home .card .no{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.2em;
  color:var(--gray);padding-top:8px;}
body.home .card .ttl{font-family:var(--ff-dp);font-weight:400;letter-spacing:-.025em;
  font-size:clamp(21px,2.1vw,32px);color:var(--ink);}
body.home .card .ttl small{font-family:var(--ff-mono);font-weight:400;font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gray);margin-top:12px;}
body.home .card .arw svg{stroke:var(--gray);stroke-width:1.2;}
body.home .card:hover .arw svg{stroke:var(--ink);}
body.home .card .ph{margin:26px 0 16px;}
body.home .card .dsc{padding:6px 0 30px;color:var(--body);font-size:13px;line-height:2.05;}

/* ============ WORKS / NEWS ============ */
body.home .wcard .ph,
body.home .ncard .ph{box-shadow:none;}
body.home .wcard .cat{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gray);}
body.home .wcard h3{font-weight:500;letter-spacing:0;color:var(--ink);}
body.home .wcard .meta{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.12em;
  color:var(--gray);}
:root[data-theme="dark"] body.home .ncard,
body.home .ncard{background:transparent;box-shadow:none;padding:22px 0 0;
  border:0;border-top:1px solid var(--line);}
body.home .ncard:hover{transform:none;}
body.home .ncard time{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.14em;
  color:var(--gray);}
body.home .ncard p{color:var(--ink);font-weight:500;}
body.home .track-bar{background:var(--line);}
body.home .track-bar span{background:var(--tri-line-s);}

/* ============ マーキー ============
   TRIONNの "INSPIRE INNOVATE IMPACT" 帯と同じく、上下を細線で挟んで
   有彩色の区切り記号を落とす */
body.home .marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
body.home .marquee .row>span{font-family:var(--ff-dp);font-weight:400;letter-spacing:-.02em;
  color:var(--ink);}
body.home .marquee .row>span i{color:var(--gray);}
body.home .marquee .row>span:nth-child(even){color:transparent;
  -webkit-text-stroke:1px var(--tri-line-s);}

/* ============ 数字バンド → ライト帯（TRIONNの "Key facts"） ============
   ⚠️ ここだけ明るい面にするのが、TRIONNの「明暗が交互に来る」リズムの再現。
      ヘッダーは exclusion なので、この帯を通過する間だけ自動で黒文字に転ぶ。
      （既存の nav-on-dark 判定は .sec.dark / .cta / .foot-box しか見ていないので、
        この帯には介入してこない＝素の exclusion がそのまま正しく働く） */
body.home .ks-statband{
  background:var(--tri-lite);color:var(--tri-lite-ink);
  padding-top:clamp(64px,7vw,104px);padding-bottom:clamp(64px,7vw,104px);}
body.home .ks-statband .stat{border-bottom:0;}
body.home .ks-statband .stat .v{
  font-family:var(--ff-dp);font-weight:400;letter-spacing:-.045em;
  font-size:clamp(44px,5.8vw,92px);color:var(--tri-lite-ink);}
body.home .ks-statband .stat .v small{font-family:var(--ff-mono);font-size:.24em;
  letter-spacing:.14em;color:var(--tri-lite-dim);margin-left:6px;}
body.home .ks-statband .stat .l{font-family:var(--ff-mono);font-size:9px;letter-spacing:.22em;
  color:var(--tri-lite-dim);margin-top:14px;}
body.home .ks-statband .stat .j{font-weight:500;font-size:12px;letter-spacing:.08em;
  color:var(--tri-lite-ink);}

/* ============ CTA ============ */
/* ⚠️ 地は配色に関係なく黒。文字色をテーマの --ink / --gray に任せていたため、ライト表示では
      黒地に黒文字で「Let's create the exciting future.」がほぼ読めなかった（v2.30.0で実測・修正）。
      文字はダーク時の値（--ink #EDEDED／--gray #8E8E8E）に固定する */
body.home .ks-cta{background:#0C0C0C;color:#EDEDED;}
body.home .ks-cta h2{font-family:var(--ff-dp);font-weight:400;color:#EDEDED;
  font-size:clamp(30px,4.2vw,62px);line-height:1;letter-spacing:-.035em;}
body.home .ks-cta .jp{color:#9A9A9A;font-size:12.5px;letter-spacing:.06em;}
/* CTAのボタンだけはピルのまま残す（押せる場所だと分からせる必要がある）。
   TRIONNの "LET'S TALK" と同じ白地・黒文字・角丸999px に寄せる */
:root[data-theme="dark"] body.home .ks-cta .pill.ghost,
body.home .ks-cta .pill.ghost{
  background:#FFFFFF;color:#0A0A0A;box-shadow:none;border-radius:999px;
  font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;}
:root[data-theme="dark"] body.home .ks-cta .pill.ghost i,
body.home .ks-cta .pill.ghost i{background:#0A0A0A;}
:root[data-theme="dark"] body.home .ks-cta .pill.ghost i svg,
body.home .ks-cta .pill.ghost i svg{stroke:#FFFFFF;}
:root[data-theme="dark"] body.home .ks-cta .pill.ghost:hover,
body.home .ks-cta .pill.ghost:hover{background:#C9C9C9;color:#0A0A0A;}
/* ⚠️ LINEの緑（.pill.line）は残す。あれはLINEヤフー社のブランド色で、無彩色にすると
      「LINEのボタンだ」と認識されない＝導線として機能しなくなる。
      画面内で唯一の有彩色になるが、これは意図的な例外。 */
body.home .ks-cta .pill.line{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;border-radius:999px;}

/* ============ フッター ============ */
body.home .foot-addr b{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.22em;}
body.home .foot-bot{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.14em;}

/* =========================================================================
   第4段：3DCG・オーブの無彩色化
   ⚠️ estrela.js / mark3d.js のシェーダやマテリアルは触らない。あれは色相を時間で
      回す cos パレットが本体で、書き換えると開幕のタイミング設計まで巻き添えになる。
      合成段で彩度を落とすほうが安全で、戻すのもこのブロックを消すだけで済む。
   ⚠️ contrast を少し上げているのは、grayscale だけだと虹の各色が近い輝度に潰れて
      3Dロゴの面の区別が消えるため。
   ========================================================================= */
/* ⚠️ .stage（OAマーク本体）には filter を掛けないこと。
   マークは estrela.js の uMono=1 側で、シェーダの段階から無彩色の黒い樹脂として
   描いている。その上に grayscale/brightness を重ねると、せっかく残した
   エッジのハイライトまで潰れて「黒い板」になる。
   色が残るのは背面のエフェクト層（.fxfg＝fx-gl.js）だけなので、そちらだけ落とす。 */
body.home .fxfg canvas,
body.home .ribbon canvas{filter:grayscale(1) contrast(1.06);}
/* 鼓動オーブの虹リング → 無彩色の回転グラデ。始点と終点を同色にして継ぎ目を消す */
body.home .oa-orb .ring{
  background:conic-gradient(from 0deg,
    #FFFFFF,#909090,#3A3A3A,#909090,#FFFFFF,#909090,#3A3A3A,#909090,#FFFFFF);
  filter:drop-shadow(0 0 5px rgba(255,255,255,.28));}
body.home .oa-orb .echo{border-color:rgba(255,255,255,.5);}
body.home .oa-orb .echo.e2{border-color:rgba(255,255,255,.28);}
:root[data-theme="dark"] body.home .oa-orb .core{
  background:#0C0C0C;border:1px solid var(--tri-line-s);
  box-shadow:0 14px 34px rgba(0,0,0,.6),0 0 22px rgba(255,255,255,.12);}
:root[data-theme="dark"] body.home .oa-orb:hover .core{
  box-shadow:0 14px 34px rgba(0,0,0,.6),0 0 34px rgba(255,255,255,.22);}
:root[data-theme="dark"] body.home .oa-orb .tip{background:#0C0C0C;border-color:var(--tri-line-s);}
:root[data-theme="dark"] body.home .oa-orb:hover .core,
body.home .oa-orb:hover .core{box-shadow:0 10px 30px rgba(255,255,255,.18);}

/* =========================================================================
   第5段：実機で見て潰した残り（2026-08-17 の目視で見つけたもの）
   ここは「見て直した」記録でもあるので、消すときは同じ症状が戻ると思ってよい。
   ========================================================================= */

/* ---- CTAの虹彩装飾 ----
   ⚠️ .ks-cta の虹は background ではなく ::before（上端1.5pxのヘアライン）と
      ::after（地に流す虹彩）で描かれている。地色だけ黒く塗っても虹は残る。
      --cta-wash 等の変数は opacity にしか効かないので、擬似要素ごと差し替える。
      上端の線は「セクションの切れ目」として機能しているので、消さずに無彩色化する。 */
body.home .ks-cta::before{background:var(--tri-line-s);opacity:1;height:1px;}
body.home .ks-cta::after{content:none;}

/* ---- リクルートの追従バナー ----
   :root[data-theme="dark"] .oa-rbnr（詳細度 0-3-0）が青寄りの紺を直に持っている */
:root[data-theme="dark"] body.home .oa-rbnr{
  background:#0C0C0C;border-color:var(--tri-line-s);}
body.home .oa-rbnr{border-radius:0;box-shadow:0 18px 44px rgba(0,0,0,.5);}
body.home .oa-rbnr .ttl{font-weight:500;letter-spacing:.02em;}
body.home .oa-rbnr .sub{color:var(--gray);}
:root[data-theme="dark"] body.home .oa-rbnr .cta{background:#FFFFFF;color:#0A0A0A;
  font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;}
:root[data-theme="dark"] body.home .oa-rbnr .cta:hover{background:#C9C9C9;color:#0A0A0A;}
:root[data-theme="dark"] body.home .oa-rbnr.mini .tab:hover{color:#FFFFFF;}
/* 進捗バー（スクロール量を示す上端2px）も虹だった */
body.home .oa-progress span{background:var(--tri-line-s);}

/* ---- 数字バンドの小ラベル ----
   ⚠️ .stats-in は grid(4列)。::before に grid-column:1/-1 を与えないと
      1セル目を占有して、数字が3+1に折り返す（実際そうなった）。 */
body.home .ks-statband .stats-in::before{grid-column:1/-1;}

/* ---- リード文の強調 ----
   ⚠️ modern.css が .lead em を「青」で持っている（暗い側は #8fb6ff）。
      無彩色にすると本文と同じ明度になって強調が消えるので、白へ振り切る。
      em の設計意図（太さで立てて色は引く）に沿って、色ではなく明度差で立てる。 */
:root body.home .lead em,
:root[data-theme="dark"] body.home .lead em,
:root[data-theme="dark"] body.home.ks-mono .lead em{color:#FFFFFF;font-weight:700;}
/* v2.30.0：上の1行目（テーマ指定なし）がライトにも効いて、白地に白で強調語が消えていた
   （「一気通貫」「可視化」「瞬間」等。本番で実測）。ライトは墨に戻す。詳細度 0-4-2 で上を上書き */
:root[data-theme="light"] body.home .lead em{color:var(--ink);}
/* 同じ理由で、数字と実績カテゴリも青のままだったので揃える */
:root body.home .stat .v,
:root body.home .wcard .cat{color:inherit;}
:root body.home .ks-statband .stat .v{color:var(--tri-lite-ink);}
:root body.home .wcard .cat{color:var(--gray);}

/* ---- 「View All」の位置 ----
   TRIONNは一覧への導線を見出しの右端ではなく「見出しの下」に置く。
   ⚠️ 実務上の理由もある：右端に置くと、右下に固定表示している採用バナー
      （.oa-rbnr）と重なって文字が読めない。実機で確認済み。
      .head-row は flex なので margin-left:auto を解除し、order で最後に送る。 */
body.home .head-row .pill.ghost{margin-left:0;order:9;}

/* ---- フッター ----
   ⚠️ トップのフッターは .foot / .foot-box ではなく .ks-foot（mono.css の別実装）。
      地色は既に #000 なので無彩色化は不要。直すのは書体と、下端の巨大タイポだけ。
   ⚠️ .ks-giant div は -webkit-text-fill-color:transparent で虹を「文字で抜いて」いる。
      color を当てても効かないので、fill-color も currentColor に戻すこと
      （mono.css 側にも同じ罠のコメントがある）。 */
body.home .ks-giant div{
  background:none;-webkit-text-fill-color:currentColor;color:rgba(255,255,255,.10);
  opacity:1;}
body.home .kf-nav a{font-family:var(--ff-dp);font-weight:400;letter-spacing:-.01em;font-size:14px;}
body.home .kf-round b{font-family:var(--ff-dp);font-weight:400;}
body.home .kf-round small{font-family:var(--ff-mono);font-size:9px;letter-spacing:.18em;}
body.home .kf-addr{color:#8E8E8E;}
body.home .kf-bot{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.14em;}
body.home .kf-bot .fu{letter-spacing:.18em;}
/* ⚠️ .kf-bot .line-ic の緑（#06C755）は残す。CTAのLINEボタンと同じ理由。 */

/* =========================================================================
   第6段：ヒーローのライン演出（js/trionn-lines.js が敷くキャンバス）
   ⚠️ z-index は 1。.fv-copy が 2 なので、線はコピーの後ろを通る。
      本家も線は文字の背面にある。前に出すと見出しの可読性が落ちる。
   ⚠️ pointer-events:none は必須。線の当たり判定は window のポインタ座標で
      取っているので、キャンバスがクリックを吸うとヒーロー内のリンクが死ぬ。
   ========================================================================= */
body.home .fv{position:relative;}
body.home .tri-lines{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:0;transition:opacity 1.8s var(--ease) .25s;}
body.home.tri-lines-on .tri-lines{opacity:1;}
/* 操作のヒント。本家と同じくヒーロー下端に等幅で小さく置く */
body.home .tri-hint{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  font-family:var(--ff-mono);font-size:8.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gray);white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity 1.2s var(--ease) 1.2s;}
body.home.tri-lines-on .tri-hint{opacity:.7;}
@media(max-width:900px){
  /* スマホは指で触れないうえ、SCROLL表示と重なるので出さない */
  body.home .tri-hint{display:none;}
}

/* ============ モバイル ============ */
@media(max-width:900px){
  body.home .fv h1{font-size:min(clamp(38px,11.4vw,80px),16vh);}
  body.home .sec-label{font-size:clamp(32px,8.4vw,54px);}
  body.home .about-in::before,
  body.home .oa-process .oa-head::before,
  body.home #service>div:first-child::before,
  body.home #works .head-row::before,
  body.home #news .head-row::before{font-size:9px;letter-spacing:.24em;margin-bottom:16px;}
}