/* x-company-v6.css — このページ独自の v6 の層（決裁 I-29）。site-v6.css（下層共通の v6）の後に読む。?design=v4 では読まない。
   色は site-v6.css の役割の名前だけを使う（直値は :root の宣言だけ・check_colors.py）。文字の大きさは 11 段の --t-* だけ（check_type.py）。

   型は「製品ページ」（Apple の macbook-pro / iphone-18-pro）。製品名を主役にして、ページ内の目次（ローカルナビ）を上に置き、
   節ごとに「言いたいこと」を h2 の一文で見せ、下に図・数字・カードを大きく並べる。
     ヘッダーの下 … ローカルナビ（.v6-localnav・sticky）: 製品名／節へのリンク／資料請求。ヘッダーと同じガラスの作り
     ヒーロー     … 製品名「X Company」を display、一文を h1、中央揃え。下に横長の写真
     概要         … 3 つの段（提案→承認→実行）を大きなタイルに。承認だけ暗い面。スクロールの 4 項目と J Claw MCP の面
     つくり方・仕組み・Pack … 灰の面（--surface-1）に角丸 28 の大きなタイル（ベント）。タイルの頭（STEP・分類）を大きく、数字は display
     呼び方       … 4 つの呼び名を灰のタイルで横に
     業種と業務   … 灰の面に白いカード。業種はサムネイルつき、業務は 1 枚の板の中の一覧、導入例は大きな写真
     業種         … 横に流れるカード（scroll-snap。Apple のギャラリー）
     自律度       … α→δ を 1 本の物差しに（線・目盛り・矢印。実測 β・γ は塗り、枠組み α・δ は輪）
     統制         … 落ち着いた罫の一覧（上端だけ濃い線）
     比較         … Apple の比較表のように、列見出しを太字、行を罫で区切り、J Claw の列だけ淡い面
     料金と導入   … 番号つきの 4 つの手順（STEP を大きく、手順の間を線でつなぐ）と、料金の 2 枚の板
   英字の飾りのラベル（.idx・.hk）は日本語のピル（.v6-pill・TOP の I-8 と同じ作り）に置き換える。
   ------------------------------------------------------------------------------------------------ */

/* ---------- このページの寸法（色ではないので :root で持つ） ---------- */
:root{
  --xc-ln-top:70px;                                  /* ローカルナビの上端（ヘッダーの箱の下端 58px ＋ 12px） */
  --xc-ln-h:52px;                                    /* ローカルナビの高さ */
  --xc-sec:clamp(96px, 70px + 6.5vw, 164px);        /* セクションの上下の余白（1440 で 164・390 で 96） */
  --xc-r-lg:28px;                                    /* 大きなタイル・写真の角丸 */
  --xc-r-md:20px;                                    /* 小さなカード・板の角丸 */
  --xc-gap:20px;                                     /* タイルの間 */
}
@media(max-width:700px){:root{--xc-ln-top:66px; --xc-ln-h:48px; --xc-r-lg:24px; --xc-r-md:18px; --xc-gap:14px}}

/* 暗い面（仕組みの「共通シャーシ」のタイル・概要の「あなたが承認する」）: site-v6.css の暗い面と同じ入れ替え */
:root :is(#chassis .mech-grid>.mech:first-child,#about .ab-step.core){
  --text-1:var(--d-text-1); --text-2:var(--d-text-2); --text-3:var(--d-text-3);
  --surface-0:var(--d-surface-0); --surface-1:var(--d-surface-1);
  --line:var(--d-line); --line-strong:var(--d-line-strong);
  --fill:var(--d-fill); --fill-hover:var(--d-fill-hover);
  --glass-line:var(--d-glass-line); --glass-line-hover:var(--d-glass-line-hover); --glass-sh:var(--d-glass-sh);
  --raised:var(--d-raised); --raised-sh:var(--d-raised-sh);
  --brand-text:var(--d-brand-text); --brand-text-strong:var(--d-brand-text-strong); --focus:var(--d-brand-text); --ok:var(--d-ok); --ok-line:var(--d-ok-line);
}

/* ---------- ローカルナビ（v6 用の nav.v6-localnav。ヘッダーの下に貼りつく） ---------- */
/* 置き場所は main の最初の div.light の先頭。sticky の範囲はこの div（本文の終わりまで）なので、フッターの手前で一緒に流れて消える。
   上端はヘッダーの箱（下端 58px）の下。ヘッダーの影と重ならないように 70px */
:root .v6-localnav[hidden]{display:block}
:root .v6-localnav{position:sticky; top:var(--xc-ln-top); z-index:90; max-width:1180px; height:var(--xc-ln-h); margin:0 auto calc(var(--xc-ln-h) * -1); padding:0 24px; box-sizing:border-box}
/* 下の余白を負にして流れの高さを 0 に（ヒーローがページの上端から始まる。ヘッダーの明暗の判定（I-55 からは文字の下に見えている地）が変わらないように）。
   その分だけ本文の箱（div.light）の下に余白を足し、終わりでナビがフッターの上にはみ出さないようにする */
:root main>.light{padding-bottom:var(--xc-ln-h)}
:root .v6-ln-in{display:flex; align-items:center; gap:12px; height:100%; padding:0 7px 0 20px; box-sizing:border-box;
  border:1px solid var(--glass-line); border-radius:10px; background:var(--raised); box-shadow:var(--glass-sh);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur)}   /* 白 70%＋ぼかし（Apple のローカルナビと同じ濃さ）。輪郭と光はヘッダーと同じ */
:root .v6-ln-name{flex:none; font-family:var(--disp); font-weight:800; font-size:var(--t-h5); line-height:1; letter-spacing:0; color:var(--text-1); white-space:nowrap}
:root .v6-ln-links{display:flex; align-items:center; gap:2px; flex:1 1 auto; min-width:0; height:100%; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain}
:root .v6-ln-links::-webkit-scrollbar{display:none}
:root .v6-ln-a:first-child{margin-left:auto} :root .v6-ln-a:last-child{margin-right:auto}   /* 収まるときは中央、あふれるときは左から（auto の余白は押し出さない） */
:root .v6-ln-a{flex:none; display:flex; align-items:center; height:36px; padding:0 12px; border-radius:6px; font-family:var(--font); font-weight:500; font-size:var(--t-small);
  line-height:1; letter-spacing:.02em; color:var(--text-2); white-space:nowrap; transition:color .2s,background .2s}
:root .v6-ln-a:hover{color:var(--text-1); background:var(--fill-hover)}
:root .v6-ln-name{transition:color .2s}
@media(hover:hover){   /* I-54 ページ内ナビ（ガラス）と名前 */
  :root .v6-ln-a:not([aria-current]):hover{color:var(--brand-text-strong)}
  :root .v6-ln-name:hover{color:var(--brand-text)}
}
:root .v6-ln-cv{flex:none; display:flex; align-items:center; height:36px; padding:0 16px; border-radius:6px; background:var(--brand-bg); color:var(--text-inverse);
  font-family:var(--font); font-weight:700; font-size:var(--t-small); line-height:1; letter-spacing:.02em; white-space:nowrap; transition:background .25s}
:root .v6-ln-cv:hover{background:var(--brand-bg-hover)}
/* 部分公開ゲート（ページ末尾の GATE）が行き先の無いリンクを止めたときは、ほかの資料請求のボタンと同じ淡い見た目に */
:root .v6-ln-cv[aria-disabled="true"]{opacity:.34; filter:grayscale(.6)}
@media(max-width:900px){
  :root .v6-ln-a{padding:0 9px}
  :root .v6-ln-links{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 20px),transparent); mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 20px),transparent)}   /* 横に流せることを端の薄れで示す（収まるときは端が空いているので見えない） */
}
@media(max-width:700px){
  :root .v6-localnav{padding:0 16px}
  :root .v6-ln-in{gap:6px; padding:0 5px 0 14px}
  :root .v6-ln-a{height:34px}
  :root .v6-ln-cv{height:34px; padding:0 12px}
}
/* ページ内リンクで飛んだとき、見出しがローカルナビの下に隠れないように */
:root main :is(section[id],#jclawmcp){scroll-margin-top:max(0px, calc(var(--xc-ln-top) + var(--xc-ln-h) + 32px - var(--xc-sec)))}
:root #jclawmcp{scroll-margin-top:calc(var(--xc-ln-top) + var(--xc-ln-h) + 24px)}
/* 決裁 I-67③: 仕組み（#chassis）は上の余白が 0（つくり方と 1 つの灰の面として続ける。下の :root #chassis{padding-top:0}）なので、上の規則のままだとピルが節の上端＝ヘッダーとローカルナビの下に止まって隠れる。
   ほかの節のピルと同じ高さ（広い幅では上の余白 --xc-sec の位置、狭い幅ではローカルナビの下端＋32px）に止める */
:root main section#chassis{scroll-margin-top:max(var(--xc-sec), calc(var(--xc-ln-top) + var(--xc-ln-h) + 32px))}
@media(prefers-reduced-motion:reduce){html:root{scroll-behavior:auto}}

/* ---------- 日本語のピル（英字の飾りのラベル .idx・.hk を置き換える。TOP の I-8 のピルと同じ作り） ---------- */
:root .v6-pill[hidden]{display:flex}
:root .v6-pill{display:flex; width:max-content; max-width:100%; align-items:center; box-sizing:border-box; margin:0 0 24px; padding:5px 14px 6px;
  border:1px solid var(--glass-line); border-radius:8px; background:var(--fill); box-shadow:var(--glass-sh);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  font-family:var(--disp); font-weight:800; font-size:var(--t-h6); line-height:1.5; letter-spacing:.02em; color:var(--text-1); font-feature-settings:"palt" 1}
:root .v6-pill+:is(.idx,.hk){display:none}
:root #jclawmcp .idx{font-family:var(--disp); font-weight:800; letter-spacing:.02em}   /* 置き換えない製品名のピル（J CLAW MCP）も同じ字に */

/* ---------- セクションの面と余白（白と灰を交互に。灰の面ではタイルが白） ---------- */
:root main .sub-sec{padding:var(--xc-sec) 0}
:root main .ed-pad{padding-top:var(--xc-sec); padding-bottom:var(--xc-sec)}
:root main .sub-sec+.sub-sec{border-top:0}                         /* 面の明暗で区切る（線は引かない） */
:root :is(#made,#chassis,#xcompany,#packs2,#governance,#bizmodel){background:var(--surface-1)}
:root #chassis{padding-top:0}                                       /* つくり方と仕組みは 1 つの灰の面として続ける */
:root #about{border-top-color:transparent !important}               /* ヒーローとの間の線（style 属性）は、同じ白の面なので消す */
:root .ed-title{max-width:22em}
:root .ed-title .mincho{font-weight:inherit}                        /* 見出しの後半も同じ太さ（800）で */
:root main .sub-lead{margin-top:24px}
:root main .sub-ctas{gap:12px; margin-top:40px}

/* ---------- ヒーロー: 製品名を display、一文を h1、中央揃え、下に横長の写真 ---------- */
:root .sub-hero{padding:calc(var(--xc-ln-top) + var(--xc-ln-h) + 40px) 0 0}   /* ローカルナビの下端＋40px にパンくず */
:root .sub-hero .crumb{margin-bottom:0}
:root .sub-hero .kv2{display:block; margin-top:clamp(32px,4vw,56px); text-align:center}
:root .sub-hero .v6-pill{margin:0 auto 24px}
:root .sub-hero .kv-wm{display:block; font-size:var(--t-display); line-height:1.05; letter-spacing:-.02em; background:none; color:var(--text-1)}   /* グラデーションは 4 か所だけ（I-19）なので単色 */
/* I-44（2026-09-28）: 名前は支給のロゴ（assets/images/x-company/x-company-logo.svg。ロゴの中のグラデーションはロゴのもの）。文字の透かしは v6 で隠す */
:root .sub-hero .kv-wm:has(+ .v6-xc-logo){display:none}
:root .sub-hero .v6-xc-logo[hidden]{display:block; width:auto; height:clamp(40px, 29.71px + 2.638vw, 68px); max-width:100%; margin-inline:auto}   /* ヒーローは中央揃え */
:root .sub-hero .kv-sub{max-width:none; margin-top:20px}
:root .sub-hero .sub-lead{max-width:36em; margin:32px auto 0; text-wrap:pretty}
:root .sub-hero .sub-ctas{justify-content:center; margin-top:40px}
/* 写真: 同じ写真の大きい原本（top/figures/figure-05.jpg 880×1120。vis-01.jpg は 384×512 で横長に引き伸ばすと粗い）を style 属性より強く当てる */
:root .sub-hero .vis{aspect-ratio:2/1; margin-top:clamp(56px,6.2vw,96px); border:0; border-radius:var(--xc-r-lg);
  background-image:url(/assets/images/top/figures/figure-05.jpg) !important; background-position:50% 44%}
@media(max-width:700px){
  :root .sub-hero .kv2{margin-top:32px}
  :root .sub-hero .vis{aspect-ratio:4/5; margin-top:48px; background-position:50% 50%}
}

/* ---------- 概要（#about）: 3 つの段・スクロールの 4 項目・J Claw MCP ---------- */
:root #about .ab-flow{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); align-items:stretch; gap:12px; margin-top:clamp(48px,5vw,72px)}
:root #about .ab-step{justify-content:center; min-height:clamp(88px,8vw,120px); padding:20px 24px; box-sizing:border-box; border:0; border-radius:var(--xc-r-md);
  background:var(--surface-1); font-family:var(--disp); font-weight:800; font-size:var(--t-h4); line-height:1.4; color:var(--text-1); text-align:center}
:root #about .ab-step.core{background:var(--surface-0)}             /* 人が承認する段だけ暗い面（上の入れ替えで --surface-0 が暗くなる） */
:root #about .ab-step.core::before{width:10px; height:10px; background:var(--brand)}   /* 「いまここ」の印（I-19: グラデーションではなく赤の単色） */
:root #about .ab-ar{align-self:center; font-family:var(--font); font-size:var(--t-h4); color:var(--text-3)}
:root #about .ab-scroll{gap:clamp(40px,6vw,96px); margin-top:clamp(64px,7vw,112px)}
:root #about .sc-no{gap:10px; font-family:var(--font); font-size:var(--t-caption); letter-spacing:.04em; color:var(--text-3)}
:root #about .sc-no b{font-size:var(--t-h2); letter-spacing:-.02em; color:var(--text-1)}
:root #about .ab-sc-item.act .sc-no b{background:none; color:var(--brand-text)}   /* 読んでいる項目の番号＝「いまここ」の赤 */
:root #about .sc-t{font-size:var(--t-h3); line-height:1.3; letter-spacing:0; margin-top:20px}
:root #about .sc-d{font-size:var(--t-body); line-height:1.8; color:var(--text-2); max-width:30em; margin-top:16px}
:root #about .sc-a{margin-top:32px}
:root #about .ab-sc-vis{top:calc(var(--xc-ln-top) + var(--xc-ln-h) + 24px); border:0; border-radius:var(--xc-r-lg); background:var(--surface-1)}
:root #about .sc-mim{border-radius:var(--xc-r-md)}
/* J Claw MCP: 灰の大きな面。ルールの例は白い板の中の罫の一覧に */
:root #about .mcp-band{margin-top:clamp(72px,8vw,120px); padding:clamp(32px,4.4vw,64px); border:0; border-radius:var(--xc-r-lg); background:var(--surface-1)}
:root #about .mcp-ic{top:clamp(24px,3vw,44px); right:clamp(24px,3vw,44px)}
:root #about .mcp-grid{gap:clamp(32px,4vw,56px)}
:root #about .mcp-title{margin-top:0; padding-right:0; font-size:var(--t-h3); line-height:1.35; letter-spacing:0; font-feature-settings:"palt" 1; word-break:auto-phrase; line-break:strict}
:root #about .mcp-lead{font-size:var(--t-body); line-height:1.8; color:var(--text-2); margin-top:20px}
:root #about .mcp-strong{margin-top:24px; padding:16px 20px 16px 24px; border-radius:12px; background:var(--surface-0); font-size:var(--t-body); line-height:1.7; color:var(--text-1)}
:root #about .mcp-strong::before{background:var(--text-1); border-radius:12px 0 0 12px}
:root #about .mcp-rules{padding:12px 28px 16px; border:0; border-radius:var(--xc-r-md); background:var(--surface-0)}
:root #about .mcp-rules-cap{margin:12px 0 4px; font-family:var(--font); font-size:var(--t-caption); letter-spacing:.04em; color:var(--text-3)}
:root #about .mcp-rule{padding:14px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:none; font-family:var(--font); font-size:var(--t-small); line-height:1.7; color:var(--text-1)}
:root #about .mcp-rule:last-child{border-bottom:0}
:root #about .mcp-rule+.mcp-rule{margin-top:0}
:root #about .mcp-close{margin-top:32px; padding-top:28px; border-top-color:var(--line-strong); font-size:var(--t-body); line-height:1.8; color:var(--text-2)}
@media(min-width:861px){
  /* I-31 で h3 が 40px（1440 幅）になり、左の列（1.15fr）の中では見出しが 3 行に折れて「そのまま。」だけが 1 行に残る（861〜1440 幅のすべて）。
     ピルと見出しを帯の全幅に出して 2 行に戻し、その下を 2 列（左＝説明と要点・右＝ルールの例）にする。
     左の div は display:contents で格子に参加させる（HTML はそのまま）。ルールの例が説明より高いときの余りは 4 行目（1fr）が受ける */
  :root #about .mcp-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); grid-template-rows:auto auto auto 1fr; row-gap:0}
  :root #about .mcp-grid>div:first-child{display:contents}
  :root #about .mcp-grid>div:first-child>:is(.idx,.mcp-title){grid-column:1/-1}
  :root #about .mcp-grid>div:first-child>:is(.mcp-lead,.mcp-strong){grid-column:1}
  :root #about .mcp-grid>div:first-child>.mcp-strong{align-self:start}
  :root #about .mcp-rules{grid-column:2; grid-row:3/5; align-self:start}
  :root #about .mcp-title{margin-bottom:clamp(32px,3.2vw,48px)}
  :root #about .mcp-lead{margin-top:0}
}
@media(max-width:860px){
  :root #about .ab-flow{grid-template-columns:1fr; gap:8px}
  :root #about .ab-ar{justify-self:center; transform:rotate(90deg)}
}

/* ---------- つくり方・仕組み・Pack: 灰の面に白い大きなタイル（ベント） ---------- */
:root :is(#made,#chassis,#packs2) .mech-grid{gap:var(--xc-gap); margin-top:clamp(48px,5vw,72px)}
:root :is(#made,#chassis,#packs2) .mech{display:flex; flex-direction:column; min-width:0; padding:clamp(28px,3vw,44px); border:0; border-radius:var(--xc-r-lg);
  background:var(--surface-0); box-shadow:none; color:var(--text-1)}
/* タイルの頭（STEP・分類・本数）を大きく。v4 のグラデーションの文字は単色に */
:root :is(#made,#chassis,#packs2) .mech .mk2{margin:0 0 clamp(40px,4.4vw,64px); background:none; font-family:var(--disp); font-weight:800; font-size:var(--t-h3);
  line-height:1.2; letter-spacing:-.01em; color:var(--text-1); font-feature-settings:"palt" 1}
:root :is(#made,#chassis,#packs2) .mech b{margin:auto 0 0; font-size:var(--t-h4); line-height:1.4; word-break:auto-phrase}   /* 3 列の狭いタイル（768 幅など）で「構築／する」「届け／る」と語の途中で折れないよう、文節で折る */
:root :is(#made,#chassis,#packs2) .mech p{margin-top:12px; font-size:var(--t-body); line-height:1.75; color:var(--text-2)}
:root #made .mech .mk2{margin-bottom:clamp(32px,3.6vw,48px)}
:root #made .mech b{margin-top:0}                                    /* 手順は左から順に読むので、見出しの高さを 3 枚で揃える（上揃え） */
/* つくり方の数字: 1 枚の白い板に 3 つの数字を display で */
:root #made .cnt-band{margin-top:var(--xc-gap); border:0; border-radius:var(--xc-r-lg); background:var(--surface-0)}
:root #made .cnt{padding:clamp(36px,4.4vw,64px) 24px; border-left:1px solid var(--line)}
:root #made .cnt:first-child{border-left:0}
:root #made .cnt .n{font-size:var(--t-display); line-height:1; letter-spacing:-.03em; color:var(--text-1)}
:root #made .cnt .l{margin-top:16px; font-family:var(--font); font-size:var(--t-small); line-height:1.6; letter-spacing:.02em; color:var(--text-2)}
/* 仕組み: 変わらないシャーシは暗い面、差し替わるスロットは破線の枠（差し込む場所の形）、X Concierge との違いは横長 */
:root #chassis .mech-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
:root #chassis .mech-grid>.mech:first-child{background:var(--surface-0)}          /* 暗い面（上の入れ替え） */
:root #chassis .mech-grid>.mech:nth-child(2){background:transparent; border:2px dashed var(--line-strong)}
:root #chassis .mech-grid>.mech:nth-child(3){grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(32px,4vw,64px); align-items:end}
:root #chassis .mech-grid>.mech:nth-child(3) .mk2{grid-row:1/3; align-self:start; margin:0}
:root #chassis .mech-grid>.mech:nth-child(3) b{margin:0}
:root #chassis .mech{min-height:clamp(260px,24vw,340px)}
:root #chassis .mech-grid>.mech:nth-child(3){min-height:0}
/* Pack: 本数（バーティカル 40・ホリゾンタル 60）を h2 の大きさで */
:root #packs2 .mech .mk2{font-size:var(--t-h2); letter-spacing:-.02em}
:root #packs2 .mech{min-height:clamp(240px,22vw,320px)}
@media(max-width:700px){
  :root #chassis .mech-grid{grid-template-columns:1fr}
  :root #packs2 .mech-grid{grid-template-columns:1fr !important}   /* style 属性（1fr 1fr）より強く */
  :root #chassis .mech-grid>.mech:nth-child(3){display:flex; align-items:stretch}
  :root #chassis .mech-grid>.mech:nth-child(3) .mk2{margin:0 0 40px}
  :root #chassis .mech-grid>.mech:nth-child(3) b{margin-top:auto}
  :root #made .cnt-band{flex-direction:column}
  :root #made .cnt{border-left:0; border-top:1px solid var(--line)}
  :root #made .cnt:first-child{border-top:0}
}

/* ---------- 呼び方（#sites）: 4 つの呼び名を灰のタイルで横に ---------- */
:root #sites .core-rows{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--xc-gap); margin:clamp(48px,5vw,72px) 0 6px; border-top:0}   /* 下の注記（style 属性の上 14px）まで 20px */
:root #sites .core-row{flex-direction:column; align-items:flex-start; gap:16px; padding:clamp(24px,2.4vw,32px); border:0; border-radius:var(--xc-r-md); background:var(--surface-1)}
:root #sites .core-row .k{width:auto; font-family:var(--disp); font-weight:800; font-size:var(--t-h4); line-height:1.4; letter-spacing:0; color:var(--text-1)}
:root #sites .core-row>span:not(.k){font-size:var(--t-body); line-height:1.75; color:var(--text-2)}
@media(max-width:1100px){:root #sites .core-rows{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){:root #sites .core-rows{grid-template-columns:1fr}}

/* ---------- 業種と業務（#xcompany）: 灰の面に白いカード ---------- */
:root #xcompany .xc-gh{gap:14px; margin:clamp(64px,7vw,104px) 0 24px; padding-bottom:16px; border-bottom:1px solid var(--line-strong)}
:root #xcompany .xc-gh::before{content:none}                          /* グラデーションの短線は 4 か所の外（I-19） */
:root #xcompany .xc-gh .jp{font-size:var(--t-h3); line-height:1.2; letter-spacing:0}
:root #xcompany .xc-gh .en{font-family:var(--font); font-size:var(--t-caption); font-weight:600; letter-spacing:.08em; color:var(--text-3)}
:root #xcompany .xc-grid{gap:16px}
:root #xcompany .xc-card{gap:18px; padding:16px 20px 16px 16px; border:0; border-radius:var(--xc-r-md); background:var(--surface-0)}
:root #xcompany .xc-thumb{width:88px; border-radius:14px}
:root #xcompany .xc-nm{font-size:var(--t-h5); line-height:1.4}
:root #xcompany .xc-st{font-family:var(--font); font-size:var(--t-caption); font-weight:600; letter-spacing:.02em; color:var(--text-3)}
:root #xcompany .xc-st.live{color:var(--ok)}
:root #xcompany .xc-card.more{border:1px dashed var(--line-strong); background:transparent; color:var(--text-2)}
:root #xcompany .xc-card.more b{font-size:var(--t-h4); color:var(--text-2)}
:root #xcompany .xc-card.more span{font-size:var(--t-small)}
:root #xcompany .xs-list{padding:4px 28px; border-radius:var(--xc-r-md); background:var(--surface-0)}
:root #xcompany .xs-row{padding:18px 0; border-bottom-color:var(--line)}
:root #xcompany .xs-row .nm{font-size:var(--t-body)}
:root #xcompany .xs-row .xc-st{font-size:var(--t-caption)}
@media(min-width:1101px){:root #xcompany .xs-row:nth-last-child(-n+3){border-bottom:0}}
@media(max-width:1100px) and (min-width:701px){:root #xcompany .xs-row:nth-last-child(-n+2){border-bottom:0}}
@media(max-width:700px){:root #xcompany .xs-row:last-child{border-bottom:0} :root #xcompany .xs-list{padding:4px 20px}}
/* 導入例: 大きな写真（入場の切り抜き .fig.on の角丸も 28 に） */
:root #xcompany .case-ed{gap:var(--xc-gap); margin-top:0}
:root #xcompany .cd .fig{border-radius:var(--xc-r-lg)}
:root #xcompany .cd .fig:not(.on){clip-path:inset(10% 8% 10% 8% round var(--xc-r-lg))}
:root #xcompany .cd .fig.on{clip-path:inset(0 0 0 0 round var(--xc-r-lg))}
:root #xcompany .cd-meta{margin-top:20px}
:root #xcompany .cd-meta .co{font-family:var(--disp); font-weight:800; font-size:var(--t-h4); letter-spacing:0}
:root #xcompany .cd-meta .tg{font-family:var(--font); font-size:var(--t-caption); font-weight:600; letter-spacing:.08em; color:var(--text-3)}
:root #xcompany .cd .ds{margin-top:6px; font-size:var(--t-body); color:var(--text-2)}
:root #xcompany .ed-pad{padding-bottom:0}                            /* 注記（.wrap の外にある）を写真の下に寄せ、余白は注記の後で取る */
:root #xcompany{padding-bottom:var(--xc-sec)}
:root #xcompany>.form-note{box-sizing:border-box; max-width:1180px; margin-left:auto; margin-right:auto; padding:0 24px}   /* .wrap の外なので本文の幅に揃える */
@media(max-width:700px){:root #xcompany>.form-note{padding:0 16px}}

/* ---------- 業種（#industries）: 横に流れるカード（Apple のギャラリー。scroll-snap） ---------- */
:root #industries{overflow-x:clip; container-type:inline-size}      /* 帯は画面の端まで。はみ出しは節で切る（clip はスクロールの箱を作らない） */
/* 帯の左右の余白＝本文（.wrap）の左端までの距離。節の幅（100cqi。スクロールバーを含まない）から出すので、止まる位置も本文の左端に揃う */
:root #industries .cat-grid{--xc-bleed:max(24px, calc((100cqi - 1180px) / 2 + 24px));
  display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:clamp(280px,25vw,360px); gap:var(--xc-gap);
  margin:clamp(48px,5vw,72px) calc(var(--xc-bleed) * -1) 0; padding:0 var(--xc-bleed) 20px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-inline:var(--xc-bleed); scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent}
:root #industries .cat{display:flex; flex-direction:column; min-width:0; padding:16px 16px 28px; border:0; border-radius:var(--xc-r-lg); background:var(--surface-1); scroll-snap-align:start}
:root #industries .cat-im{height:auto; aspect-ratio:4/3; margin:0 0 24px; border-radius:calc(var(--xc-r-lg) - 8px)}
:root #industries .cat>:not(.cat-im){margin-left:8px; margin-right:8px}
:root #industries .cat .cc{background:none; font-family:var(--font); font-size:var(--t-caption); font-weight:600; letter-spacing:.06em; color:var(--text-3)}
:root #industries .cat b{margin-top:6px; margin-bottom:14px; font-size:var(--t-h4); line-height:1.4}
:root #industries .cat li{padding-left:14px; font-size:var(--t-small); line-height:1.8; color:var(--text-2)}
:root #industries .cat li+li{margin-top:4px}
:root #industries .cat li::before{top:.85em; width:6px; height:2px; background:var(--text-3)}
:root #industries .cat li a{color:var(--text-1); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-strong)}
:root #industries .req2{padding:1px 6px; border-color:var(--brand-text); border-radius:4px; font-family:var(--font); font-size:var(--t-caption); color:var(--brand-text)}
/* 最後の「あなたの業種」: 写真の代わりに大きな＋、破線の枠 */
:root #industries .cat:last-child{justify-content:flex-end; background:transparent; border:2px dashed var(--line-strong)}
:root #industries .cat:last-child .cc{margin-bottom:auto; font-family:var(--disp); font-weight:800; font-size:var(--t-h1); line-height:1; letter-spacing:0; color:var(--text-1)}
:root #industries .sub-ctas{margin-top:32px}
@media(max-width:700px){:root #industries .cat-grid{--xc-bleed:16px; grid-auto-columns:78%}}
/* フォーカスの輪（決裁 I-63・QA 74）: 帯の中にキーボードで届く子が無いとき（部分公開のゲートが不動産管理のリンクを tabindex=-1 にする）、Chrome は
   スクロールの箱そのものを Tab の止まり先にする。サイトの輪は a・button だけなので、ブラウザ既定の青い 1px の輪が出ていた。
   帯は画面の端から端まで（外側は #industries の overflow-x:clip で切れる）なので、輪は内側（-2px）に描く */
:root #industries .cat-grid:focus-visible{outline:2px solid var(--focus); outline-offset:-2px}

/* ---------- 自律度（#autonomy）: α→δ を 1 本の物差しに ---------- */
/* 線（::before）と矢じり（::after）を .core-rows に、目盛りの丸を各行の ::before に。丸は右へ行くほど大きく、
   demo で実測した β・γ は塗り、枠組みの α・δ は輪（下の注記「α・δ は枠組み、β・γ は実測」と同じ区別） */
:root #autonomy .core-rows{position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 clamp(24px,3vw,40px); margin:clamp(56px,6vw,88px) 0 26px; padding-top:64px; border-top:0}
:root #autonomy .core-rows::before{content:""; position:absolute; left:0; right:8px; top:15px; height:2px; background:var(--text-1)}
:root #autonomy .core-rows::after{content:""; position:absolute; right:0; top:10px; border:6px solid transparent; border-left:10px solid var(--text-1); border-right:0}
:root #autonomy .core-row{--s:14px; position:relative; flex-direction:column; align-items:flex-start; gap:14px; padding:0; border:0}
:root #autonomy .core-row:nth-child(2){--s:18px} :root #autonomy .core-row:nth-child(3){--s:22px} :root #autonomy .core-row:nth-child(4){--s:26px}
:root #autonomy .core-row::before{content:""; position:absolute; left:0; top:calc(16px - 64px - var(--s) / 2); width:var(--s); height:var(--s); box-sizing:border-box;
  border:2px solid var(--text-1); border-radius:50%; background:var(--surface-0)}
:root #autonomy .core-row:is(:nth-child(2),:nth-child(3))::before{background:var(--text-1)}
:root #autonomy .core-row .k{width:auto; font-family:var(--disp); font-weight:800; font-size:var(--t-h3); line-height:1.2; letter-spacing:0; color:var(--text-1)}
:root #autonomy .core-row>span:not(.k){font-size:var(--t-body); line-height:1.75; color:var(--text-2)}
@media(max-width:700px){
  :root #autonomy .core-rows{grid-template-columns:1fr; row-gap:40px; padding:4px 0 8px 48px}
  :root #autonomy .core-rows::before{left:15px; right:auto; top:0; bottom:8px; width:2px; height:auto}
  :root #autonomy .core-rows::after{left:10px; right:auto; top:auto; bottom:0; border:6px solid transparent; border-top:10px solid var(--text-1); border-bottom:0}
  :root #autonomy .core-row::before{left:calc(16px - 48px - var(--s) / 2); top:calc(18px - var(--s) / 2)}
}

/* ---------- 統制（#governance）: 落ち着いた罫の一覧 ---------- */
:root #governance .core-rows{margin:clamp(48px,5vw,72px) 0 18px; border-top:1px solid var(--text-1)}   /* 下の注記（style 属性の上 14px）まで 32px */
:root #governance .core-row{display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:32px; align-items:baseline; padding:28px 0; border-bottom:1px solid var(--line-strong)}
:root #governance .core-row .k{width:auto; font-family:var(--disp); font-weight:800; font-size:var(--t-h5); line-height:1.4; letter-spacing:0; color:var(--text-1)}
:root #governance .core-row>span:not(.k){font-size:var(--t-body); line-height:1.75; color:var(--text-1)}
:root #governance .form-note{padding:20px 24px; border-radius:16px; background:var(--surface-0); font-size:var(--t-small); line-height:1.8; color:var(--text-2)}
:root #governance .form-note b{color:var(--text-1)}
@media(max-width:700px){:root #governance .core-row{grid-template-columns:1fr; gap:8px; padding:22px 0}}

/* ---------- 比較（#position）: Apple の比較表のように ---------- */
:root #position .cmp-blk{margin-top:0}
:root #position .cmp-blk>h3{max-width:22em; margin-bottom:24px; font-size:var(--t-h2) !important; line-height:1.25; letter-spacing:0;
  font-feature-settings:"palt" 1; word-break:auto-phrase; text-wrap:balance; line-break:strict}   /* 節の言いたいこと＝h2（style 属性の 24px より強く） */
:root #position .cmp-blk>h3 .mincho{font-weight:inherit}
:root #position .cmp-blk>.ed-lead{font-size:var(--t-lead)}
:root #position .cmp-wrap{margin-top:clamp(48px,5vw,72px)}
:root #position .cmp-wrap:focus-visible{outline:2px solid var(--focus); outline-offset:2px}   /* 横に流れる表の輪（決裁 I-63）: 中に押せるものが無いと Chrome は箱を Tab の止まり先にする。a・button と同じ 2px の輪を */
:root #position .cmpv2{font-size:var(--t-small)}
:root #position .cmpv2 thead th{padding:0 20px 20px; border-bottom:1px solid var(--text-1); font-family:var(--font); font-weight:700; font-size:var(--t-small); line-height:1.5; letter-spacing:0; color:var(--text-1)}
:root #position .cmpv2 thead th.jc{padding:28px 24px 20px; border:0; border-bottom:1px solid var(--text-1); border-radius:var(--xc-r-md) var(--xc-r-md) 0 0; background:var(--surface-1);
  font-family:var(--disp); font-weight:800; font-size:var(--t-h5); color:var(--text-1)}
:root #position .cmpv2 .jc-bar{width:24px; background:var(--brand); margin-bottom:12px}   /* 自社の列の印（赤の単色） */
:root #position .cmpv2 tbody th{padding:24px 20px 24px 0; font-family:var(--font); font-weight:700; font-size:var(--t-small); color:var(--text-1); vertical-align:top}
:root #position .cmpv2 td{padding:24px 20px; border-bottom-color:var(--line)}
:root #position .cmpv2 td.jc{padding:24px; border-left:0; border-right:0; background:var(--surface-1)}
:root #position .cmpv2 tbody tr:last-child td.jc{border-bottom:0; border-radius:0 0 var(--xc-r-md) var(--xc-r-md)}
:root #position .cmpv2 .mk{margin-bottom:10px; font-size:var(--t-h5)}
:root #position .cmpv2 .m0{background:none; font-size:var(--t-h4); color:var(--text-1)}
:root #position .cmpv2 .m1{opacity:1; color:var(--text-1)}
:root #position .cmpv2 .m2{opacity:1; color:var(--text-3)}
:root #position .cmpv2 .ct{font-size:var(--t-small); line-height:1.7; color:var(--text-2)}
:root #position .cmpv2 td.jc .ct{font-size:var(--t-small); font-weight:600; color:var(--text-1)}
:root #position .cmp-legend{margin-top:20px; font-family:var(--font); font-size:var(--t-caption); letter-spacing:.02em; color:var(--text-3)}
@media(max-width:900px){   /* 横に流すとき、行の名前の列を左に留める */
  :root #position .cmpv2 :is(tbody th,thead th:first-child){position:sticky; left:0; z-index:1; background:var(--surface-0)}
  :root #position .cmpv2 tbody th{padding-right:16px; white-space:normal; min-width:104px}
}

/* ---------- 料金と導入（#bizmodel）: 番号つきの手順と料金の板 ---------- */
:root #bizmodel .bm-flow{gap:var(--xc-gap); margin-top:clamp(48px,5vw,72px)}
:root #bizmodel .bm-step{display:flex; flex-direction:column; padding:clamp(24px,2.4vw,36px); border:0; border-radius:var(--xc-r-lg); background:var(--surface-0)}
:root #bizmodel .bm-step .hk{font-family:var(--disp); font-weight:800; font-size:var(--t-h3); line-height:1.2; letter-spacing:-.01em; color:var(--text-1); white-space:nowrap}
/* 絵はタイルの左上（flex の order で先頭へ・絶対配置を外す）、その下に STEP を大きく。
   I-31 で h3 が 40px になり、右上に絵を置いたままだと「STEP 01」（約 160px）が絵に重なる（1024 幅では文字の上に乗る）ため */
:root #bizmodel .bm-step .bm-ic{position:static; order:-1; flex:none; width:52px; height:52px; margin:0 0 clamp(20px,2.2vw,28px)}
:root #bizmodel .bm-step b{margin-top:clamp(32px,3.4vw,48px); font-size:var(--t-h4); line-height:1.4; letter-spacing:0; word-break:auto-phrase}   /* 4 列の狭いタイルで「棚卸／し」のように 1 字だけ次の行に残らないよう、文節で折る */
:root #bizmodel .bm-step p{margin-top:12px; font-size:var(--t-body); line-height:1.75; color:var(--text-2)}
@media(min-width:1101px){   /* 手順の間を線でつなぐ（絵の中ほどの高さで） */
  :root #bizmodel .bm-step:not(:last-child)::after{content:""; position:absolute; top:calc(clamp(24px,2.4vw,36px) + 25px); right:calc(var(--xc-gap) * -1); width:var(--xc-gap); height:2px; background:var(--line-strong)}
}
:root #bizmodel .bm-grid{gap:var(--xc-gap); margin-top:var(--xc-gap)}
:root #bizmodel .bm-card{padding:clamp(32px,3.6vw,52px); border:0; border-radius:var(--xc-r-lg); background:var(--surface-0)}
:root #bizmodel .bm-k{background:none; font-family:var(--font); font-size:var(--t-small); font-weight:700; letter-spacing:.06em; color:var(--text-3)}
:root #bizmodel .bm-t{margin-top:12px; font-size:var(--t-h3); line-height:1.3}
:root #bizmodel .bm-d{margin-top:12px; font-size:var(--t-body); line-height:1.75; color:var(--text-2)}
:root #bizmodel .bm-rows{margin-top:32px; border-top-color:var(--text-1)}
:root #bizmodel .bm-row{padding:20px 0; border-bottom-color:var(--line)}
:root #bizmodel .bm-row span{font-family:var(--font); font-size:var(--t-small); letter-spacing:.02em; color:var(--text-2)}
:root #bizmodel .bm-row b{font-size:var(--t-h4); line-height:1.4}
:root #bizmodel .bm-note{margin-top:24px; font-family:var(--font); font-size:var(--t-caption); line-height:1.8; letter-spacing:.02em; color:var(--text-3)}
:root #bizmodel .bm-note::before{background:var(--line-strong); margin-top:10px}

/* ---------- 結び（まずは、資料から。） ---------- */
:root #pricing+.sub-sec .ed-title{max-width:none}
:root #pricing+.sub-sec .sub-ctas{margin-top:40px}
/* 決裁 I-70③: 狭い幅の折れ方。句を無装飾の span.v6-xc-ph で区切り、700px 以下は句の間でだけ折る（I-67④ と同じ作り）。「専門家インタビューから、つくる。」は 360 幅で「か／ら」、比較表の「導入予算の目安」は 390 で「目／安」、J Claw MCP の例は 390 で「分け／る」と折れていた */
@media(max-width:700px){:root .v6-xc-ph{white-space:nowrap}}
@media(max-width:900px){:root #position .cmpv2 tbody th .v6-xc-ph{white-space:nowrap}}   /* 比較表の行の名前は 900px 以下で貼りつき・折り返すので、句の nowrap も 900px 以下に */