@charset "utf-8";
/* =============================================================
   textpad.css — ★2026-08-01 試作：HOME の文字へ「文字保護の板」を当てる
   -------------------------------------------------------------
   「文字保護の板」＝ COMPANY / 特商法 の .info-table に付いている
     ① 板   … rgba(8,21,63,.66) ＋ backdrop-filter:blur(4px)
     ② 文字影 … text-shadow 2段
   のセット。

   ★ボス指示の変遷（＝この実装の仕様）
     08-01a「ホームの全文字に。行単位ではなく文字だけにかかる大きさ・形状で」
       → 初版は字形の輪郭を太らせる方式（glyph）＝**厳密すぎて外した**。
     08-01b スクショ提示（Downloads/u64.png）＝**文字より一回り大きい矩形の箱**。
       →「文字だけにかかる」は"字形に一致"ではなく"行の箱ではない"の意味だった。run を既定に。
     08-01c「従来のカーソル対策エフェクトは板が役割を果たすので切っていい」→ 停止（下記）。
     08-01d「二重になってない？」→ 上下の行の板が重なっていた（原因は下記【重なり】）。
     08-01e **「板で文字の配置がずれている。ただ文字の奥に置くだけが理想」**
             **「Hero は板を外して完全に元に戻す」**
       → ★**レイアウトに一切影響しない作り**へ全面的に組み替えた。ヒーローは対象から除外。

   ★【レイアウトへの副作用ゼロ】をどう担保しているか（08-01e）
     1. 横の飛び出し … padding-inline と **同量の負 margin-inline** で相殺する。
                        ＝板は左右へ広がるが、周りの文字は 1px も動かない。
     2. 縦の飛び出し … padding ではなく **背景の帯**（linear-gradient ＋ background-size）
                        で描く。インライン要素の縦 padding は行の高さを変えないが、
                        content area より **小さく** することはできない。帯なら高さも位置も
                        em で自由に決められる＝行間を触らずに済む。
     3. 行間           … **一切変更しない**（前版で .display 1.02→1.55 / .h-sec 1.35→1.62 に
                        していたのを全部撤回）。

   ★【重なり】なぜ前版は二重に見えたか（記録として残す）
     インライン要素の背景は **フォントの content area**（ascent+descent）に塗られ、
     line-height では縮まない。実測 Poppins ≒1.40em ／ Noto Sans JP ≒1.45em。
     一方 素の行間は .display＝1.02 ／ .h-sec＝1.35 なので上下の行の板が必ず食い込み、
     66% の板が2枚重なって約88%＋backdrop-filter も二重にかかっていた。
     → 現行の band 方式は板の高さを 1.20em に決め打ちできるので、この問題が構造的に起きない。

   モード
     ?tpad=run    （既定）… 矩形の板。?tpadfill=band（既定・高さ制御／角は四角）
                             ?tpadfill=box（content area 全部を塗る／角丸が効く／行間が狭いと重なる）
     ?tpad=glyph          … 字形の輪郭を板にする初版（比較用に残置・レイアウト影響ゼロ）
     ?tpad=off            … 全部無効（従来のカーソル連動シールドが復活する）

     ★08-01c **全11ページへ展開**（ボス指示「全ページの文字に適用。ホームは今の状態でOK」）。
       HOME の見え方は 08-01n のまま凍結（セレクタも .home 分岐で分けてある）。
       他10ページの対象の決め方と、そこで止めた従来の保護は、下の2ブロックのコメントを参照。

   ★正典への影響：bg.css / style.css は 1 バイトも触っていない。
     各ページの <link> と <script> の 2 行を外せば完全に元へ戻る。
============================================================= */

/* ---- 既定値（textpad.js が URL パラメータで上書きする） ---- */
body[data-tpad]{
  --tpad-ink:8,21,63;      /* 板の色＝navy #08153F（3色の内側） */
  --tpad-a:.66;            /* 板の濃さ。★全要素で同じ値（大きい文字だけ濃いということは無い） */
  --tpad-sh:.30;           /* 文字影の濃さ。0 で切れる。半径は em 基準＝文字サイズに比例 */
  --tpad-blur:2px;         /* 背景ぼかし。★強いほど背景の粒が潰れて「透けない」ので既定を半分に */
  --tpad-px:.24em;         /* 横の飛び出し（layout 影響ゼロ／負 margin で相殺） */
  --tpad-h:1.20em;         /* 板の高さ（band モード） */
  --tpad-top:.12em;        /* 板の上端＝content area 上端からの距離（band モード） */
  --tpad-r:.1em;           /* 角丸（box モードとロゴの板で有効。band モードでは効かない） */
  --tpad-logopx:.55rem;    /* ロゴの板の飛び出し（左右）。rem＝文字サイズに引きずられない */
  --tpad-logopy:.4rem;     /* ロゴの板の飛び出し（上下） */
  --tpad-w:.07em;          /* 以下 glyph モード専用 */
  --tpad-soft:.55;
  --tpad-halo:calc(var(--tpad-a) * var(--tpad-soft));
}

/* -------------------------------------------------------------
   明るいセクション（SERVICE ＝ .section--paper）の板
   -------------------------------------------------------------
   ここは板を「白側」へ反転させる（navy の文字を明るい板が守る）。
   ★2026-08-01m：地色が白 → グレー（#D5D7DE）に変わったので、**純白の板は浮く**。
     一度「紙色を白へ 50% 寄せた色」にしたが**これも外した**（＝明るい箱のままだった）。

   ★正しい考え方（08-01n で修正）
     ネイビー側の板は navy を .66 で敷いている＝**素のネイビー地に対してはほぼ同色で見えず、
     網が光ったところだけ effect を抑えて見える**。板は「箱」ではなく「静けさの領域」。
     明るいセクションも同じ理屈でなければならない。
       → **板の色 ＝ 紙色そのもの**（白へ寄せない）。
         アイドル時は地と同色で消え、カーソルが navy インクを刷った時だけ text を守る。
     textpad.js が紙色（CONFIG.paperBase → CSS の --paper）を読んで --tpad-ink-paper に入れる。
     ?paperBase= で紙色を振れば板も自動追従する。
     ?tpadpapermix= で白へ寄せられる（0＝紙色と同じ＝既定／1＝純白＝08-01m 以前の見え方）。
   ★濃さは別枠（?tpadapaper=）。インクをどれだけ抑えるかを決める値で、見た目の明るさではない。
------------------------------------------------------------- */
body[data-tpad]{
  --tpad-ink-paper:201,204,213;   /* 既定＝紙色 #C9CCD5 そのもの。JS が実際の紙色で上書きする。
                                     ★紙色を変えたらここも合わせる（--paper / CONFIG.paperBase と3点セット） */
  --tpad-a-paper:.80;
}
body[data-tpad] .section--paper .tpad-t{
  --tpad-ink:var(--tpad-ink-paper);
  --tpad-a:var(--tpad-a-paper);
}

/* =============================================================
   【従来シールドの停止】ボス指示 2026-08-01
   bg.css の .shielded（カーソル直下でだけ立つ字形の襟）は板が役割を引き継ぐので停止。
   ★bg.css は書き換えていない＝ここを消せば従来の挙動がそのまま戻る。
   ★JS 側（cero-bg-synapse.js の syncShields）も data-tpad があるときは走らない。
   このブロックは下のモード定義より **前** に置くこと（同詳細度なので後勝ち）。
============================================================= */
body.has-cero-bg.home[data-tpad] .shielded{
  -webkit-text-stroke:0;
  text-shadow:none;
}

/* =============================================================
   【従来の保護の停止・他10ページ版】★2026-08-01c
   -------------------------------------------------------------
   HOME 以外には bg.css の :not(.home) 側に2つの保護が入っている。板が役割を引き継ぐので
   既定で止める（?tpadlegacy=1 で両方戻る／textpad を外せば当然そのまま元通り）。

   ① 広い放射プール（.hero__inner / .cta-band .container）
      HOME では 07-17 に「ヒーローの 40% を覆うプールは"広すぎ"」で捨てた作り。
      板は文字の形に沿うので、プールを重ねると板の外側だけ暗い雲が残る。
   ② text-shadow:0 1px 2px rgba(4,9,28,.45), 0 3px 30px rgba(4,9,28,.55)
      ★**ぼかし半径が px 固定**＝文字が大きいほど濃く溜まる。08-01g にボスが HOME で
        見つけた「太字の板だけ濃い／背景エフェクトが透けてこない」の主因そのもの。
        板 .66 と重ねると約 .92＝ほぼ不透明。→ 板とセットの **em 基準の影1枚**へ置き換える。
      ※ .info-table / .legal の中の文字は板を当てていない（既に板の上）ので、
        bg.css の ② はそこだけ残る＝今までどおりの見え方になる。これは意図どおり。

   ★bg.css は 1 バイトも触っていない。ここは詳細度で上書きしているだけ
     （bg.css 側は (0,4,1)／ここは :not(.home) と [data-tpad] を重ねて (0,5,1)）。
============================================================= */
body.has-cero-bg:not(.home)[data-tpad]:not([data-tpadlegacy]) .hero__inner,
body.has-cero-bg:not(.home)[data-tpad]:not([data-tpadlegacy]) .cta-band .container{
  background:none;
}
body.has-cero-bg:not(.home)[data-tpad]:not([data-tpadlegacy]) .tpad-t{
  text-shadow:0 .02em .08em rgba(var(--tpad-ink), var(--tpad-sh));
}

/* NEWS のカテゴリ絞り込みボタンは、選択中だけ緑ベタになる（aria-pressed が切り替わる）。
   ベタの上に板を敷くと濃い矩形が出るので、そのときだけ板を消す。
   ★JS ではなく CSS で見ているのは、ボタンは押すたびに状態が変わるため（再計測が要らない）。 */
body.has-cero-bg[data-tpad="run"] .news-filter button[aria-pressed="true"] .tpad-run{
  background-image:none;
  background-color:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

/* =============================================================
   run モード（既定）＝ 文字より一回り大きい矩形の板
   -------------------------------------------------------------
   ★ここに書いてよいのは「レイアウトに影響しないプロパティ」だけ。
     padding-inline を足したら必ず同量の負 margin-inline で相殺すること。
     padding-block / height / line-height は **絶対に触らない**（文字が動く）。
============================================================= */
body.has-cero-bg[data-tpad="run"] .tpad-run{
  padding-inline:var(--tpad-px);
  margin-inline:calc(-1 * var(--tpad-px));   /* ★これで横方向の layout 影響が完全に消える */
  /* ★縦は padding で箱を広げる。インライン要素の縦 padding は行の高さを変えない＝layout 影響ゼロ。
     値は textpad.js が要素ごとに実測して入れる（--tpad-pad）。 */
  padding-block:var(--tpad-pad, 0px);
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  -webkit-backdrop-filter:blur(var(--tpad-blur));
  backdrop-filter:blur(var(--tpad-blur));
}

/* -------------------------------------------------------------
   band（既定）＝板の高さ＝**行送りそのもの**にして、上下の行の板を隙間なく接続する
   （ボス指示 2026-08-01f「複数行にまたがる文章のとき、行間も埋めていい。
     文字ブロック全体が板になるイメージ」）。
   ★高さは要素ごとに違う（.lede は line-height 1.9、.h-sec は 1.35 …）ので
     em の決め打ちでは合わない。textpad.js が1要素ずつ実測して
     --tpad-band（＝行送り）と --tpad-bandtop（＝行の上端に合わせる位置）を入れる。
   ★接するだけで重ならない＝半透明が二重にならない。
   ★横幅は各行の文字幅のまま＝最終行が短ければ右端はそこで終わる（＝文字に沿う）。
     完全な長方形が欲しいときは ?tpadfill=block。
------------------------------------------------------------- */
body.has-cero-bg[data-tpad="run"][data-tpadfill="band"] .tpad-run{
  background-image:linear-gradient(
    rgba(var(--tpad-ink), var(--tpad-a)),
    rgba(var(--tpad-ink), var(--tpad-a)));
  background-repeat:no-repeat;
  background-size:100% var(--tpad-band, var(--tpad-h));
  background-position:0 var(--tpad-bandtop, var(--tpad-top));
}

/* box ＝ content area を全部塗る版。角丸が効くが、行間が狭いと上下の行と重なる。 */
body.has-cero-bg[data-tpad="run"][data-tpadfill="box"] .tpad-run{
  background-color:rgba(var(--tpad-ink), var(--tpad-a));
  border-radius:var(--tpad-r);
}

/* -------------------------------------------------------------
   ロゴ（<img>）用の板 ★2026-08-01k ボス指示「フッターのロゴにも板をつけられる？」
   -------------------------------------------------------------
   ロゴは文字ではないので .tpad-run（テキストを包む箱）のルートに乗らない。
   ただしロゴPNGは**白の文字が透過背景に乗っているだけ**なので、
   img 自身に background を敷けば、そのまま「文字の奥の板」になる。
   ★置換要素（img）は padding が箱の寸法に効いてしまう＝そのままだとレイアウトが動く。
     テキストと同じく **同量の負 margin で相殺**して layout 影響ゼロにしている。
     フッターのロゴだけ元から margin-bottom:1.3rem（style.css）を持つので、その分を戻す。
   ★2026-08-01l ボス判断で**既定は付けない**。実装は残置＝?tpadlogo=1（フッター）／
     ?tpadlogo=all（ヘッダーも）で戻せる。JS がクラスを付けない限りこのブロックは効かない。
------------------------------------------------------------- */
body.has-cero-bg[data-tpad="run"] .tpad-img{
  background-color:rgba(var(--tpad-ink), var(--tpad-a));
  border-radius:var(--tpad-r);
  -webkit-backdrop-filter:blur(var(--tpad-blur));
  backdrop-filter:blur(var(--tpad-blur));
  padding:var(--tpad-logopy) var(--tpad-logopx);
  margin:calc(-1 * var(--tpad-logopy)) calc(-1 * var(--tpad-logopx));  /* ★相殺 */
}
/* style.css の .footer-brand__logo{margin-bottom:1.3rem} を保つ（下に本文が続くため） */
body.has-cero-bg[data-tpad="run"] .site-footer .tpad-img{
  margin-bottom:calc(1.3rem - var(--tpad-logopy));
}

/* block ＝ 文字ブロックの外形そのものを1枚の板にする（＝ info-table の板と同じ考え方）。
   最終行が短くても右端が揃った長方形になる。横は段組みの幅いっぱい。 */
body.has-cero-bg[data-tpad="run"][data-tpadfill="block"] .tpad-t{
  background-color:rgba(var(--tpad-ink), var(--tpad-a));
  border-radius:var(--tpad-r);
  -webkit-backdrop-filter:blur(var(--tpad-blur));
  backdrop-filter:blur(var(--tpad-blur));
}
body.has-cero-bg[data-tpad="run"][data-tpadfill="block"] .tpad-run{
  background:none; padding:0; margin:0;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}

/* -------------------------------------------------------------
   文字影（板とセットの②）
   ★2026-08-01g ボス指摘「太字の板が他より濃い／背景エフェクトが透けてこない」への対処。
     旧実装は info-table 用の値をそのまま持ってきていた：
        0 1px 2px rgba(ink,.45), 0 3px 30px rgba(ink,.55)
     **30px のぼかし半径が px 固定**なのが致命的だった。
     ・大きい文字＝グリフが大きいので、30px の影が板の内側に濃く溜まる
     ・小さい文字＝同じ 30px が広く薄く散る
     → **同じ板なのに、文字が大きいほど濃く見える**（＝ボスが見つけた現象）。
     さらに .45 と .55 の2枚が重なって約 .75、板の .66 と合わせて約 .92＝ほぼ不透明。
     これが「背景エフェクトが透けてこない」の主因。**板自体の濃さは全要素で同じ .66。**
   → 半径を **em 基準**（＝文字の大きさに比例）にして1枚だけに減らした。
     ?tpadsh=0 で完全に切れる。
------------------------------------------------------------- */
body.has-cero-bg[data-tpad="run"] .tpad-t{
  text-shadow:0 .02em .08em rgba(var(--tpad-ink), var(--tpad-sh));
}

/* =============================================================
   glyph モード＝ 字形の輪郭そのものを板にする（初版・比較用に残置）
   text-stroke / text-shadow だけなので layout 影響はゼロ。
============================================================= */
@supports (paint-order: stroke){
  body.has-cero-bg[data-tpad="glyph"] .tpad-t{
    paint-order:stroke fill;
    -webkit-text-stroke:var(--tpad-w) rgba(var(--tpad-ink), var(--tpad-a));
  }
}
body.has-cero-bg[data-tpad="glyph"] .tpad-t{
  text-shadow:
    0 0 calc(var(--tpad-w) * 0.7) rgba(var(--tpad-ink), calc(var(--tpad-halo) * 1)),
    0 0 calc(var(--tpad-w) * 1.6) rgba(var(--tpad-ink), calc(var(--tpad-halo) * .7)),
    0 0 calc(var(--tpad-w) * 3.0) rgba(var(--tpad-ink), calc(var(--tpad-halo) * .4));
}
body.has-cero-bg[data-tpad="glyph"] .tpad-t .dot{
  -webkit-text-stroke:0;
  text-shadow:none;    /* 🔒 ヒーロー題字の緑ドットは意匠を変えない（現状ヒーローは対象外） */
}

/* =============================================================
   ヒーローの扱い（2026-08-01i でボス指示により復帰）
   -------------------------------------------------------------
   08-01e で一度外し（当時は行間を書き換える実装だったのでレイアウトが動いていた）、
   08-01h で「板は文字の奥に置くだけ・行送りは実測」に直ったので復帰させた。
   ★08-01j ボス指示：**題字「Security Starts at cero.」は対象外**（板なし・素のまま）。
     板が付いているのは **サブコピー** と **Scroll キュー** だけ。
     題字は line-height:1.02 と行送りが極端に狭く、板の高さもその 1.02em になるため
     字面が板からはみ出やすい。また色が blink で入るのに板だけ先に出る、という
     見え方の問題もあった。→ 素のまま（🔒 緑ドットにも一切触れない）。
   ?tpadtitle=1 で題字にも付け直せる／?tpadhero=0 でヒーロー全体を外せる。

   対象外
   ・緑ベタの CTA（.btn--primary / .nav__cta）＝既に不透明の面に乗っている。
   ・.eyebrow の 🔒 緑ドットは ::before ＝ flex アイテムの外なので箱に入らない。
   ・矢印 svg（.arw）・スクロール線（.scroll-cue__line）は JS 側で箱の外に出している。
============================================================= */