@layer components {
/*
* 理念ページ（why-nexray／社名変更に込めた思い）固有レイアウト。
* 本文は nexray-sheet（白カード 1472）＋ nexray-sheet__inner に載り、この列だけ 1024px に絞る。
* ここでは本文列の幅・サイズ統一・縦リズム・イントロ部の並び・スクロール reveal（.nc-fade）・
* インライン装飾（.text-accent）を担う。
*
* 縦の余白について：WP のフロー余白 `:where(.is-layout-flow) > * + *`（＝ブロック間 24px・
* styles.spacing.blockGap 1.5rem 由来）は wp 層のため、components 層の通常宣言で上書きできる
* （#98/#100）。各コンテナの `> * + *` margin で必要な余白に合わせる。
*
* 整列は全幅で左寄せ（先方FB 2026-07-31）。かつて ≥1024 で中央寄せしていたが撤去した。
* 文章が左端に張り付かないよう、中央寄せの代わりに本文列自体を 1024px に絞って中央に置く。
*
* 文字サイズは主見出し（.nc-band-wipe＝48px 上限）以外を全て large（fluid 20→24px）に
* 統一する（先方FB「最初のコピー以外のフォントサイズを最後の一文のサイズに揃える」）。
* 詳細は下の「サイズ統一」ブロック。行間も結び文と同じ 1.7 に揃えるため md 分岐は無い。
*
* 縦リズムはその字面（行送り 34px(SP) / 40.8px(PC)）に合わせて一段引き上げてある：
* 段落間 32px ／ 群内 24px ／ 大ブロック間 64px(SP)・92px(PC)。アキが行送りを下回ると
* 塊の切れ目が読めなくなるため、この大小関係（群内 < 段落間 < 章の切れ目 ≦ 大ブロック間）
* を崩さないこと。
*/
/*
* 本文サイズはコンテナに置き「継承」で本文段落へ配る（p セレクタにしない）。
* emphasis-text / word-badge__meaning 等は各自 font-size を明示するため、継承より
* 明示指定が勝つ＝ページ側の本文サイズがコンポーネント見出しを潰さない（特異度戦争回避）。
*/
/*
* 本文列の幅。shell.css の .nexray-sheet__inner（＝同一要素）が持つ content-max 1216px を
* 1024px へ絞る。先方FB「左よせにする」で中央寄せを外した際、1216px のまま左寄せにすると
* 白カードの左端寄りに文章が張り付いて見えるため、列を狭めて余白を左右に作りブロックごと
* ページ中央に置く（margin-inline:auto は sheet__inner 側が既に持っている）。
*
* 1024px の根拠：24px＋字送り 0.02em ＝ 全角1字約 24.5px なので 41字/行。
で切られた
* 実際の行長は最長が 46字（1126px）で、それ以外は 40字以下（980px 以下）に収まる。
* つまり 1024px なら 46字の1行だけが溢れる状態にでき、その1行に DB 側で
を1つ足して
* 解消する（27字／19字に分割）。960px まで絞ると 40字行も折れて DB 修正が2箇所に増える。
* 左右には各 96px の余白が出る。
*
* 詳細度 0,2,0 で shell.css の .nexray-sheet__inner（0,1,0）に勝たせる＝レイヤー内の
* ソース順に依存させない（ADR 0007）。
*
* ⚠ container-type がこの要素にあるため 100cqi の基準も 1216→1024 に変わる。主見出し
* （(100cqi-32)/16）は cqi 800px 以上で上限 48px に張り付くので実効値は不変。
* 社名バッジ・NEXUS/RAY の clamp も広い幅では上限 large に張り付くため影響しない。
*/
.nexray-sheet__inner.nc-why__inner {
max-width: 1024px;
}
.nc-why__inner {
/* 長め見出し（.nc-band-wipe）の font-size が実コンテナ幅に追従できるよう cqi 基準にする。 */
container-type: inline-size;
text-align: left;
/*
* 本文サイズ＝large（fluid 20→24px）。先方FB「最初のコピー以外のフォントサイズを
* 最後の一文のサイズに揃える」＝結び文（#269 で large にした一文）を基準に一本化した。
* 旧値は 1rem(≤768) / 1.125rem(≥769) のブレークポイント切替だったが、large は
* theme.json の fluid 定義でビューポートに連続追従するため md 分岐そのものが不要になる。
*
* 行間も結び文と同じ 1.7 に揃える（旧 2 / 2.2）。字面だけ大きくして行間を据え置くと
* 行送りが 52.8px（24×2.2）まで開き、
明示改行の多いこのページはページ全長が
* 約1.33倍に伸びる。1.7 なら行送りは 34px(SP) / 40.8px(PC) で従来の 32 / 39.6px と
* ほぼ同値＝字は大きくなるがスクロール量は変わらない（#264 で縦を詰めた方針とも整合）。
*/
font-size: var(--wp--preset--font-size--large);
line-height: 1.7;
font-weight: 400;
}
/* ============================================================
* 縦リズム（先方FB 2026-07-31 のサイズ統一に追随）
*
* 本文が large（行送り 34px(SP) / 40.8px(PC)）になったため、旧来のアキは軒並み行送りより
* 狭くなり、段落や群の切れ目が行送りに埋もれて「均一な文字の壁」に見える状態だった：
* 段落間 24px（WP flow）＝ 行送りの 0.59〜0.71 倍
* 群内 16px（イントロ群 / 語義解説群 / バッジ内）＝ 完全に埋もれる
* 大ブロック間 SP 40px ＝ 行送り 34px の 1.18 倍で弱い
* → 字面とアキの比率を従来（16px 本文に対し 24/16/40px）と同程度に戻すため一段引き上げる。
* 段落間 24→32px ／ 群内 16→24px ／ 大ブロック間 SP 40→64px（PC 92px は据え置き）。
* PC の大ブロック間は行送り 40.8px の 2.25 倍あり十分なので触らない。
* ============================================================ */
/* 大ブロック間 92px（モバイルは 64px。移植元 gap-92／その縮小値を large 化に合わせ再調整）。 */
.nc-why__inner > * + * {
margin-block-start: 4rem; /* 64px（モバイル） */
}
/*
* プレーンな nc-fade グループ内の段落間＝32px（旧 WP flow の 24px）。
* 下の2つ（イントロ群・語義解説群）は同じ nc-fade だが群としての詰めた間隔を持つため、
* クラス2枚重ねの詳細度 (0,4,0) でこの規則 (0,3,0) に確実に勝たせる（ADR 0007）。
*/
.nc-why__inner > .nc-fade > * + * {
margin-block-start: var(--wp--preset--spacing--40); /* 32px */
}
/* イントロ（社名変更の宣言）内の間隔＝24px（旧 16px）。 */
.nc-why__inner > .nc-fade.name-change-intro > * + * {
margin-block-start: 1.5rem; /* 24px（theme.json の spacing 刻みは 8/16/32/64… で 24px が無いためリテラル） */
}
/* 語義解説群（イントロ文＋NEXUS/RAY バッジ）内の間隔＝24px（旧 16px）。 */
.nc-why__inner > .nc-fade.nc-word-group > * + * {
margin-block-start: 1.5rem; /* 24px（theme.json の spacing 刻みは 8/16/32/64… で 24px が無いためリテラル） */
}
/* 語義バッジ内（語見出し行↔本文）＝24px（旧 16px。word-badge.css の既定を上書き）。 */
.nc-why__inner .word-badge > * + * {
margin-block-start: 1.5rem; /* 24px（theme.json の spacing 刻みは 8/16/32/64… で 24px が無いためリテラル） */
}
/* 語義解説群のイントロ文（3段落）内の段落間＝32px（旧 WP flow の 24px）。 */
.nc-why__inner .nc-word-intro > * + * {
margin-block-start: var(--wp--preset--spacing--40); /* 32px */
}
/*
* 章の切れ目のアキ。先方FB「昨日いれてもらった段落の位置がちがうので修正：Nexray という
* 名前には・・・の前にいれてください」で #269 の位置から1段落ぶん上へ移動した。
* 旧：イントロ文の群 ↔ NEXUS バッジの間（.nc-word-group > .nc-word-intro + .word-badge）
* 新：「Nexray という名前には、二つの想いが込められています。」の直前
* 旧位置の規則は撤去したので、イントロ群↔バッジ間は群内標準の 24px に戻る。
*
* 値は SP/PC とも 64px（旧は SP 32px / PC 64px）。SP を 32px から上げたのは、本文が
* large になり行送りが 34px になったため 32px では行送り未満＝切れ目に見えないから。
* 64px は隣の 32px（段落間）・24px（群内）より明確に大きく、大ブロック間（64/92px）と
* 同格以下に収まる＝「同一ブロック内の章の切れ目」の階層を保つ。
*
* ⚠ この一文が .nc-word-intro の末尾段落であることに依存する（DB 側にクラスが無いため
* 構造で指す。ページ本文は本番 DB と同期する運用資産で、クラス追加には本番反映作業が
* 付いてくるため＝#260 と同じ判断）。イントロ文に段落を足すと外れるので、その時は
* 追加CSSクラスによる明示フックへ移す。
* 詳細度 (0,3,1) で上の段落間 32px (0,3,0) に勝つ＝ソース順に依存しない。
*/
.nc-why__inner .nc-word-intro > p:last-child {
margin-block-start: var(--wp--preset--spacing--50); /* 64px */
}
/*
* バッジ行（社名バッジ＋後続テキストを横並び）。
*
* padding-left は持たない。移植時（#97）は 4px を入れていたが、これは当時バッジが持って
* いた四隅ブラケット（::before の inset: -3px）のはみ出しを打ち消して字面を本文列へ
* 揃えるための補正だった。#255 でブラケットを撤去したため役目を終え、残すと前後の段落より
* 4px だけ余計に字下げされる（≥1024 の中央寄せでも中心がずれる）。
*/
.nexray-badge-line {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 1rem;
}
/*
* ※ 結びの一文だけを large／行間 1.7 にしていた特例（#269 の
* `.nc-why__inner > .nc-fade:last-child`）は削除した。先方FB「最初のコピー以外の
* フォントサイズを最後の一文のサイズに揃える」で本文全体がその値になったため、
* 末尾ブロックを構造で指す（＝本文末にブロックを足すと外れる）脆い依存も同時に消えた。
*
* ※ NEXUS/RAY・意味テキスト・社名バッジ（小）のサイズ上書きは、共有コンポーネント側の
* 既定値を触らずこのファイル末尾の「サイズ統一」ブロックにまとめてある（下記）。
*/
/*
* インライン強調（移植元 .text-accent）。青太字のみ。
*
* 先方FB「デザイン装飾をシンプルに」で薄青(#d1edff)の下線ハイライトを撤去した（#255）。
* 装飾（下線）だけを外し、強調の意味を担う青太字と字面（サイズ・太さ）は維持する。
* 下線の描画に付随していた宣言も併せて不要になったため落とした：
* background-image（下線本体）／padding-bottom: 2px（下線と字間の逃げ）／
* box-decoration-break: clone（折返し行にも下線を引くための指定）／
* display: inline（上記のための明示。span の既定と同じなので不要）
*/
.text-accent {
color: var(--wp--preset--color--primary);
font-weight: 600;
}
/*
* スクロール reveal（.nc-fade）の基本規則は共有 components/reveal.css へ移設した（#160）。
* このページの本文ブロックは .nc-fade（下からフェードアップ）で現れ、主見出しだけは
* .nc-band-wipe（左→右ワイプ）で別挙動になる（#269）。いずれも規則は reveal.css が持つ。
*/
/* ============================================================
* サイズ統一（先方FB 2026-07-31）
* 「最初のコピー以外のフォントサイズを最後の一文のサイズに揃える」
*
* 対象＝このページの主見出し（.nc-band-wipe）以外の全テキスト。基準値は本文と同じ
* large（fluid 20→24px）。本文・意味テキスト・社名バッジ・NEXUS/RAY を一値に集約する。
*
* 共有コンポーネント（emphasis-text.css / word-badge.css / nexray-badge.css）の既定値は
* 触らず、ここから .nc-why__inner 配下として上書きする。理由は emphasis-text をトップの
* mv-message が使っており、「トップページは変更不要」を構造的に保証したいため（値を
* 共有側で書き換えると波及先の検証がトップまで広がる）。
* 代償として共有側には実測較正済みの旧 clamp 式が残る（#268 のモバイル1行化など）。
* 経緯はこのコメントに残し、掃除は Phase 2 で行う。
*
* セレクタはソース順に依存させず詳細度で勝たせる（ADR 0007）。特に NEXUS/RAY を
* `.nc-why__inner .emphasis-text--lg` で指してはいけない：主見出しも
* `emphasis-text--lg` を持つため同詳細度(0,2,0)で衝突し、ソース順次第で主見出しまで
* 24px に縮む。`.word-badge` を経路に挟んで語バッジ内の2語だけに限定する。
*
* ★1行に収まらない狭幅だけは自動で縮める（＝上限 large の clamp にする）。
* 横並びで1行に収める要素（NEXUS/RAY 行・社名バッジ）は、字を大きくすると物理的に
* 入らなくなる。ブラウザ実測（375px 幅・利用可能幅 279px＝375 − 外側ラッパ24×2 −
* シート padding 24×2）では、語・意味を large にすると
* 語 74 ＋ column-gap 8 ＋ 意味 209（罫線16＋余白8込み）＝ 291px
* で 12px 足りず2行に割れ、#268 の先方FB「語＋意味を1行に」を壊す。社名バッジも同様に
* 「（Nexray）」が2行目へ落ちる。
* → 上限を large、値をコンテナ幅連動にした clamp にすることで、入る幅では本文と完全に
* 同値（＝FB どおり揃う）、入らない幅だけ縮んで1行を守る。約 397px 以上で large に
* 張り付くため、769px 境界での段差も出ない（旧案は 768→769 で 48→22px と跳ねた）。
* min() ではなく clamp() を使うのは下限 0.85rem（可読フロア）を維持するため。
* project-intro の見出し（min(100cqi/15.2, 1.5rem)）と同じ発想。
*
* ※ word-badge.css のモバイル規則（語=1em／意味=0.42em／見出し行の流体 font-size）は
* 共有ファイルを触らない方針のため残るが、下の2規則が絶対値で上書きするので効かない。
* 罫線16px・gap8px の詰め（＝上式の固定コスト 32px の内訳）だけが生きている。
* ============================================================ */
/*
* NEXUS / RAY（旧 clamp 2rem〜3rem＝最大48px）。主見出しは .nc-band-wipe 側の式で 48px 据え置き。
* 係数 12.783 の内訳（実測較正・1em 当たり）：語 NEXUS 3.653em ＋ 意味 9.13em。
* 固定コスト 32px は column-gap 8px ＋ 意味の padding-left 24px（罫線16＋余白8）。
* 分母は 13.2 に切り上げて約3%の安全余裕を持たせる（Web フォント読込差で折れるのを防ぐ。
* word-badge.css の 7.485→7.7 と同じ思想）。
*/
.nc-why__inner .word-badge .emphasis-text--lg,
.nc-why__inner .word-badge__meaning {
font-size: clamp(0.85rem, calc((100cqi - 32px) / 13.2), var(--wp--preset--font-size--large));
}
/*
* 社名バッジ（小）「株式会社ネクスレイ（Nexray）」。旧 clamp(0.85rem, 100cqi/15.5, 1.25rem)。
* 変えたのは上限だけ（1.25rem → large）＝実測較正済みの除数 15.5 と下限 0.85rem は据え置き。
* よって狭幅の挙動（縮めて1行を守る）は従来と完全に同一で、広い幅で本文と揃うようになる。
* 折り返しの安全弁として .nexray-badge--sm の flex-wrap は据え置く。
*/
.nc-why__inner .nexray-badge--sm {
font-size: clamp(0.85rem, calc(100cqi / 15.5), var(--wp--preset--font-size--large));
}
@media (min-width: 769px) {
.nc-why__inner > * + * {
margin-block-start: 5.75rem; /* 92px（移植元 gap-92 既定値） */
}
}
/*
* ※ デスクトップ（≥1024）で全体を中央寄せしていた規則（text-align:center と
* .nexray-badge-line / .word-badge__header の justify-content:center）は削除した。
* 先方FB「左よせにする」＝中央揃えが見づらいという指摘への対応。base の text-align:left が
* 全幅で効くようになり、横並び行も flex の既定（flex-start）で左に揃う。
* 代わりに本文列を 1024px に絞ってページ中央に置く（上の max-width）。
*/
}