/* 白の地（2026-09-15・依頼「背景を真っ白に、全体的に」）───────────
   site.css / redesign.css のページを、真っ白（#fff）の地にそろえる上書き。
   ファイル名は夜（黒地）だった頃のまま ── 58 ページがこの名前で読んでいるので変えない。

   経緯
     2026-09-03〜04 はここで --wall と --ink を入れ替え、黒地にしていた。
     site.css / redesign.css はもともと白地（#f7f6f2）で作られているので、
     入れ替えをやめれば字・罫・差し色は元の「白地で読める値」に戻る。
     ここでは地の 2 色（--wall / --paper）だけを #fff にする。
   なぜ body を透かすか
     背景（◇ と粒）は body の**後ろ**に敷く。body が地色を持つと覆って見えなくなる。
     地色は html 側に持たせる。 */

:root{
  --wall:#ffffff;
  --paper:#ffffff;
}

html{background:#fff}
/* 地は html が持つ。body は透かして、後ろの ◇ と粒を見せる。 */
body{background:transparent}
body.top{background:transparent}
#cosmos{background:transparent}

/* 背景の層。画面に貼り付き、本文の後ろ（z-index:-1）に居る。
   pointer-events:none ── 見えるだけで、押せる物ではない。 */
/* #scene 自身には z-index を置かない ── 置くと重なりの入れ物ができてしまい、
   中の canvas をいくら上げても本文より前へ出られない。
   前後は canvas ごとに持たせ、粒が字に組み上がったときだけ JS が上げる。 */
#scene{position:fixed;inset:0;pointer-events:none;overflow:hidden}
#scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-1}
@media(max-width:900px){ #scene #shapes{display:none} }

/* 固定ヘッダ。site.css は header、redesign.css は .topbar。 */
header.scrolled,
.topbar.scrolled{
  background:rgba(255,255,255,.92)!important;
  backdrop-filter:blur(14px);
  border-bottom-color:var(--line)!important}
header:not(.scrolled),
.topbar:not(.scrolled){background:transparent}
/* 引き出し（スマホの目次）。 */
#drawer{background:rgba(255,255,255,.97)!important}

/* ◇ は**地**として置く。頁ごとに本文の位置が違うので、
   濃いまま置くと必ずどこかの字と喧嘩する。薄くして退かせる。 */
#scene #shapes{opacity:.68}
#scene #flow{opacity:.85}

/* ◇ 4 つの色（2026-09-03・指定）。赤・青・黄・緑。ここが正本 ── shapes.js は読むだけ。 */
:root{ --sh1:#FF6B5E; --sh2:#5B9CFF; --sh3:#F2C94C; --sh4:#56D08A }

/* ── 字を大きくする（2026-09-04・依頼）─────────────────────
   3 系統で寸法の持ち方が違うので、それぞれに合う形で上げる。
     site.css     …… :root の --t-* を引いている → 変数を差し替える
     redesign.css …… 変数を持たず body に直接書いている → body を上書きする
     v3.css       …… 同上（トップページ側は v3.css で直接直した） */
:root{
  --t-micro:15px;
  --t-fine:clamp(16.5px,1.5vw,17.9px);
  --t-small:clamp(17.9px,1.65vw,19.3px);
  --t-body:clamp(20px,1.71vw,21.5px);
  --t-lead:clamp(20.7px,1.93vw,22.8px);
  --t-h3:clamp(22.8px,2.72vw,27.2px);
  --t-h2:clamp(35.7px,5vw,52.9px);
  --t-h1:clamp(50px,9.15vw,94.4px);
  --t-oneline:clamp(28.6px,4.43vw,42.9px);
}
/* redesign.css の本文（変数を経由していないので名指しで） */
body{font-size:clamp(20px,1.5vw,22.3px)}

/* ── 「章まるごと暗転させる」ブロックも白にする ─────────────────
   地に --ink（濃い字色）、字に --wall（白）を置いて黒い帯にするブロック。
   依頼は「全体的に真っ白」なので、帯も白地・濃い字にそろえる。
   HTML の inline style に color:var(--ink) が入っている所があり、
   これを反転のまま残すと黒地に黒字になる（2026-09-04 に置換済みの 25 か所）。 */
.ink-sec,section.ink,.excerpt,.final,.lcard,.color.white-tile,.pl.human{
  background:var(--paper)!important;color:var(--ink)!important}
.ink-sec .sec-head h2,.proof,.color.white-tile .k{color:var(--ink)!important}
/* 帯の中の細かい色は「黒地の上の明るい灰」で書いてある。白地では沈むので濃い側へ。 */
section.ink .chap .ghost{color:rgba(20,20,22,.06)!important}
section.ink .small,section.ink .note,.ink-sec .small,.ink-sec .note,
.ink-sec .lead,.ink-sec .sub{color:var(--ink-soft)!important}
section.ink .tbl tbody th,section.ink .tbl tbody td,
section.ink .tbl tr{border-bottom-color:var(--line)!important}
.final .btn:not(.is-soon){border:1px solid var(--line)}

/* HTML に直書きされた「黒地用の明るい色」（2026-09-15 に grep で数えた値）。
   inline style は !important にしか負けないので、値で名指しする。 */
[style*="color:#b6bac4"],[style*="color:#8790a0"],[style*="color:#6f788c"]{color:var(--ink-soft)!important}
[style*="color:#e3e0d8"]{color:var(--ink)!important}
[style*="color:#e3c15a"]{color:#7d6000!important}
[style*="border-color:#e3c15a"]{border-color:var(--gold)!important}
[style*="color:#7f9ec9"]{color:var(--ai)!important}
[style*="color:#e08b82"]{color:var(--aka)!important}
[style*="#45566f"],[style*="border-color:#2b3140"]{border-color:var(--line)!important}

/* ── 帯の中の「黒地用の明るい色」を白地用へ（2026-09-15・全ページ実測で拾った）──
   上で帯の地を白にしたので、帯の中に直書きされた明るい灰・白・淡い青が
   白の上に残る（実測: 見出し 比 1.00、本文 #a9a8a2 比 2.38、#b6bac4 比 1.94）。
   帯の外で使っている変数（--ink / --ink-soft / --ink-faint / --ai）へ寄せる。 */
/* 薄い灰（#8c8b93）は白の上で 比 3.37。全ページの注・番号・パンくずがこれを使う。 */
:root{--ink-faint:#66656d}

/* site.css ── section.ink / .final / .pl.human / .color.white-tile / .spine / .stat */
section.ink h2,.final h2,.pl.human b,section.ink .spine b,section.ink .note strong,
section.ink .tbl tbody th,section.ink .tbl tbody td strong,section.ink .tbl tbody th strong,
.stat b,.stat .lab{color:var(--ink)!important}
section.ink .lead,section.ink p,section.ink .tbl tbody td,section.ink .spine p,
.final p,.pl.human span,.color.white-tile p{color:var(--ink-soft)!important}
section.ink .eyebrow,.final .eyebrow,.pl.human .st,
section.ink .tbl a,section.ink .note a{color:var(--ai)!important}
section.ink .eyebrow i,.final .eyebrow i,section.ink .tbl caption,section.ink .spine .st,
section.ink .tbl thead th,.stat b small,.stat em,.btn.is-soon{color:var(--ink-faint)!important}
section.ink .eyebrow i::after,.final .eyebrow i::after{background:var(--line)!important}
section.ink .tbl thead th{border-bottom-color:var(--line)!important}
section.ink .spine::before{background:var(--ink)!important}
section.ink .spine li::before{background:var(--wall)!important;border-color:var(--ink)!important}
section.ink .spine li.human b{color:var(--shu)!important}
.color.white-tile::before{background:var(--ink)}
.pl.human{box-shadow:inset 0 0 0 1px var(--ink)}
.btn.is-soon{border-color:var(--line)!important}
.stat{background:var(--paper);border:1px solid var(--line)}

/* 表紙に重なるヘッダは明るい字で書かれている。地が白なので濃い字へ。 */
header.over-hero:not(.scrolled) .logo,
header.over-hero:not(.scrolled) .navtoggle{color:var(--ink)}
header.over-hero:not(.scrolled) .logo small{color:var(--ai)}
header.over-hero:not(.scrolled) .nav a{color:var(--ink-soft)}
header.over-hero:not(.scrolled) .nav a:hover,
header.over-hero:not(.scrolled) .nav a:focus-visible{color:var(--ink)}
header.over-hero:not(.scrolled) .nav .nav-cta,
header.over-hero:not(.scrolled) .nav .nav-cta:hover{background:var(--ai);color:#fff}

/* redesign.css ── .ink-sec / .lcard / .proof / .num / .excerpt / .human-line / .dark-btn */
.ink-sec .eyebrow,.proof .eyebrow,.excerpt b{color:#7d6000!important}
.ink-sec .eyebrow::before,.proof .eyebrow::before{background:var(--gold)!important}
.ink-sec .sec-head .no{color:var(--ink-faint)!important;border-color:var(--line)!important}
.card-grid{background:var(--line);border-color:var(--line)}
.lcard:hover{background:#f5f6f8!important}
.lcard .step,.num b i,.num .e{color:var(--ink-faint)!important}
.lcard p,.proof .lead,.num .l,.human-line p,.excerpt li{color:var(--ink-soft)!important}
/* .feature は藍のグラデーションに白字だった。地を白にしたので、字を濃くし上端の藍で区別する。 */
.lcard.feature{box-shadow:inset 0 3px 0 var(--ai)}
.lcard.feature h3{color:var(--ink)!important}
.lcard.feature .step,.lcard.feature p{color:var(--ai)!important}
.proof{background:var(--paper)!important}
.proof .grid-bg{opacity:.06}
.proof .os,.excerpt li::before{color:var(--ai)!important}
.nums{background:var(--line);border-color:var(--line)}
.num{background:var(--paper)!important}
.num b{color:var(--ink)}
.human-line{border-top-color:var(--line)}
.human-line .flag{color:var(--aka);border-color:var(--aka)}
.dark-btn,.dark-btn *{color:var(--ink)!important}
.dark-btn{border-color:var(--ink)}
.dark-btn:hover,.dark-btn:hover *{color:#fff!important}
.dark-btn:hover{background:var(--ink)}
.embed3d{background:var(--paper)}
/* 帯（信頼モード）。白字は藍・緑の上では読めるが、黄（--ki）と橙（--daidai）の上で 比 2.44 / 3.44。 */
.tbar .seg[style*="--ki"],.tbar .seg[style*="--ki"] *,
.tbar .seg[style*="--daidai"],.tbar .seg[style*="--daidai"] *{color:#1a1a1e!important}
/* 今いるページの「相談する」は .nav a[aria-current] の字色（--ink）が勝ち、墨の地に墨の字になっていた。 */
.nav a.cta[aria-current="page"],.nav a.nav-cta[aria-current="page"]{color:var(--wall)}
/* 色見本の札（黄）。見本の色そのままの字は白の上で 比 2.44。 */
.hue[style*="--ki"] .k{color:#7d6000}
/* ブログ 40 ページのフッター「YOHAKUの事業」。inline の opacity .85 × .6 が --ink-faint に掛かり 比 2.15。 */
.ft-biz{opacity:1!important}
.ft-biz>span[style*="opacity"]{opacity:1!important;color:var(--ink-faint)}
section.ink .lead strong,section.ink p strong{color:var(--ink)!important}
/* カードの札は見本の色（--c）で書く。金・橙は白の上で 比 2.42 / 3.44 なので、黒を混ぜて同じ色相のまま濃くする。 */
.gcard .tag{color:color-mix(in srgb,var(--c,var(--ai)) 62%,#000)}

/* ── フッターの字を濃くする（2026-09-21・依頼「背景に負けている」）──────────
   フッターは #scene（◇ と粒）の上に乗る。白地だけで測ると通るが、◇ の上では割る。
   実測（WCAG 2.1・AA は 4.5）:
     地               --ink-soft #5a5a62   --ink-faint #66656d
     白 #fff                 6.83                5.76
     ◇赤 #ff9a92             3.35                2.82   ← 割れている
     ◇青 #8fbcff             3.52                2.96   ← 割れている
     ◇緑 #8cdfaf             4.32                3.64   ← 割れている
     ◇黄 #f6da85             4.97                4.19   ← faint が割れている
   ◇ は position:fixed で全頁に居るので、これは company.html だけの話ではない。
   濃くした後（同じ測り方）: #33333a は ◇ の上で最悪 6.14 / #3a3a42 は 5.52。
   本文級と札・細字で 2 段は残す（全部同じ濃さにすると見出しと本文が並ぶ）。
   ＊--ink（#141416）で書いてある .mk と .bn は元から 9.01 以上なので触らない。 */
.foot .mk-sub,
.foot .col nav,
.foot .biz .bd,
.foot-legal nav{color:#33333a}
.foot h4,
.foot .fine{color:#3a3a42}
/* 罫も同じだけ背景に負ける（--line #e6e3da は白の上で 比 1.18）。 */
footer,.foot .fine,.foot-legal{border-top-color:#d6d2c6}

/* ── 字を背景から浮かせる（2026-09-22・依頼「HP全体が文章が背景で見ずらい」）──────
   ◇ が本文の真後ろに来て、字と図形の色がぶつかっていた（料金 01 の注記・TOP の本文で実測）。
   直し方は 2 つ重ねる（YOHAKU「両方で調整して」）:
     1. ◇ を薄くする ── 色・形・動きはそのまま、濃さだけ .68 → .24（.32 では料金 01 の赤の上がまだ濁った）。
     2. 字の下に白を敷く ── 字の周りだけ白い縁を付け、◇ の上でも地が白く見えるようにする。
   地は全ページ白（上の「白の地」）なので、白い縁が汚れに見える場所は無い。
   ボタン（a / button）は自前の地を持つので対象に入れない。 */
#scene #shapes{opacity:.24}
:where(p,li,h1,h2,h3,h4,h5,dt,dd,th,td,caption,figcaption,blockquote,label,small,.sub,.lead,.note,.no,.eyebrow){
  text-shadow:0 0 3px #fff,0 0 8px rgba(255,255,255,.95),0 0 16px rgba(255,255,255,.8)}