:root{
--navy:#004399;
--navy-deep:#00306e;
--navy-ink:#021a3d;
--blue-50:#eef4fd;
--blue-100:#dbe8fb;
--ink:#0a131f;
--ink-soft:#1a2230; /* 2026-09-16 クライアント指摘「フォント全般をもう少し暗めに」→ #242424 から --ink 寄りに */
--ink-mute:#3f4d60; /* 同上（#516176 から一段暗く） */
--line:#e7edf6;
--hair:#eef2f8;
--bg:#ffffff;
--bg-soft:#f5f8fc;
--accent:#ff6a3d;
--accent-soft:#fff0ea;
--accent-ink:#d44a1f;
--sol:oklch(0.46 0.13 158);
--sol-soft:oklch(0.965 0.03 158);
--prod:oklch(0.50 0.126 222);
--prod-soft:oklch(0.965 0.035 222);
--prod-bg:oklch(0.56 0.115 222); /* light-background source teal — kept at original lightness */
/* 文字サイズは役割トークンで指定する（2026-09-16 ユーザー裁定。クライアント指摘「本文 15px は 16px に」「文字を見やすく」が多数あり、部品ごとの直値をやめた）。
カード見出しは --fs-card。セクション見出し（20px 以上）は役割トークンにせず、値に倍率 --fs-k を掛ける（calc(35px * var(--fs-k))）。丸の中の印（.voice li::before の「!」等）と SVG の図の中の文字は直値のまま
--fs-k: 文字サイズの倍率。PC 1、スマホ（640 以下）0.875＝本文 16 → 14px と同じ割合ですべての文字を下げる（2026-10-04 ユーザー指示「PC とスマホでサイズが変わらないのが問題」「本文は 14px ベースで他も同じように下げて」「トークン使ってないフォントサイズもなんとかして」。切り替えは fsie-ext.css） */
--fs-k:1;
--sp-k:1; /* 余白（margin・padding・gap）の倍率。PC 1、スマホ（640 以下）0.875＝文字と同じ割合（2026-10-04 ユーザー「スマホの余白も調整したい。一旦同じ割合で見てみたい」。値は calc(Npx * var(--sp-k))、変換と戻しは tools/scale-spacing.py、切り替えは fsie-ext.css） */
--fs-body:calc(16px * var(--fs-k)); /* 本文・説明文・リード・箇条書き・表の本文（カード内の小見出しは 2026-10-02 から --fs-cardsub） */
--fs-sub:calc(14px * var(--fs-k)); /* 補足・注記・メタ（日付・件数）・スペック項目名・図の中の文字 */
--fs-label:calc(13px * var(--fs-k)); /* 欧文キッカー・タグ・ピル（操作しないもの） */
--fs-ui:calc(15px * var(--fs-k)); /* ボタン・ナビ・操作するピル・入力・タブ・ページ送り */
--fs-card:calc(20px * var(--fs-k)); /* カード・パネル・FAQ の見出し（h3/h4/h5・summary・カード内タイトル）。セクション見出し（20px 以上）は直値のまま。18 → 20px（2026-10-02 クライアント修正依頼「全体的に H3・H4 のサイズを大きく」、ユーザー裁定 A＝トークンごとサイト全体） */
--fs-cardsub:calc(18px * var(--fs-k)); /* カード内の小見出し（工程フロー・説明カード・図の見出し・ツール一覧・製品カードの見出し等。もとは --fs-body 16px、同日 +2px で分けた） */
--fs-lead:calc(17px * var(--fs-k)); /* 強調リード（見出し下の文の強調版 p.lead-em。本文の --fs-body より 1px 大きい。2026-10-02 クライアント修正依頼「1 ポイント大きく・太字」、AppSec） */
--fs-subhead:calc(16px * var(--fs-k)); /* 見出しに付く和文サブタイトル（.use .hd .s 等。見出し階層の一部。欧文キッカー .en/.stp/.rk は --fs-label/--fs-sub のまま）。2026-09-16 ユーザー裁定 */
--gap-sm:calc(14px * var(--sp-k));
--gap-md:calc(18px * var(--sp-k));
--gap-lg:calc(28px * var(--sp-k));
--mv-bg:url('/app/wp-content/themes/fsi-embedded/dist/assets/mv-bg-e-BEH_EsTi.webp'); /* hero MV image（案E 確定） */
--maxw:1280px;
--rd:8px; /* radius / small */
--rd-btn:8px; /* 操作＝ボタン・CTA・誘導リンク（B案：角丸矩形） */
--shape-pill:100px; /* 分類・状態＝タグ・チップ・ラベル（操作しないもの） */
--rd-md:12px; /* radius / card */
--rd-lg:20px; /* radius / hero & feature */
--sh-1:0 1px 2px rgba(16,38,76,.04),0 6px 16px -10px rgba(16,38,76,.12);
--sh-2:0 24px 48px -30px rgba(0,50,120,.42);
--sh-pop:0 32px 64px -34px rgba(0,40,110,.5);
--ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0;font-feature-settings:"palt" 1}
html{scroll-behavior:smooth}
body{font-family:"Zen Kaku Gothic New",system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased;font-feature-settings:"palt" 1;letter-spacing:-0.02em}
/* Roboto Condensed（欧文・数字）は詰めをリセット */
.gro,.en{letter-spacing:normal}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 calc(28px * var(--sp-k))}
a{color:inherit;text-decoration:none}
.gro{font-family:"Roboto Condensed",sans-serif}
.num{font-variant-numeric:tabular-nums}
.ph{position:relative;background:
linear-gradient(135deg,rgba(0,67,153,.035),rgba(0,67,153,0) 60%),
repeating-linear-gradient(135deg,#edf2fa 0 10px,#f6f9fd 10px 20px);
border:1px solid var(--hair);border-radius:var(--rd-md);display:flex;align-items:center;justify-content:center;color:var(--ink-mute);overflow:hidden}
.ph::after{content:"";position:absolute;inset:8px;border:1px dashed rgba(82,96,118,.16);border-radius:calc(var(--rd-md) - 6px);pointer-events:none}
.ph span{position:relative;font-family:"Roboto Condensed",monospace;font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:#6c7e96;background:rgba(255,255,255,.9);padding:calc(4px * var(--sp-k)) calc(11px * var(--sp-k));border-radius:var(--shape-pill);box-shadow:0 1px 2px rgba(16,38,76,.06)}
/* ---------- header ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);border-top:4px solid var(--navy)}
/* header spans full window width (fluid), not capped to --maxw */
header .wrap{max-width:none;padding:0 clamp(calc(28px * var(--sp-k)),4vw,calc(64px * var(--sp-k)))}
.head{display:flex;align-items:center;gap:calc(32px * var(--sp-k));height:92px}
.logo{display:flex;align-items:center;gap:calc(11px * var(--sp-k));margin-right:clamp(0px,calc(4vw - 32px),32px)}
.logo img{height:46px;width:auto;display:block}
.logo b{font-size:calc(18px * var(--fs-k));letter-spacing:.02em;line-height:1.1;white-space:nowrap}
.logo small{display:block;font-size:var(--fs-label);color:var(--ink-soft);font-weight:500}
nav.main{display:flex;gap:calc(34px * var(--sp-k));font-size:var(--fs-ui);font-weight:500;flex:none}
nav.main a{padding:calc(6px * var(--sp-k)) 0;border-bottom:2px solid transparent;transition:.15s;white-space:nowrap}
nav.main a:hover{color:var(--navy);border-color:var(--navy)}
.spacer{flex:1;min-width:0}
/* ヘッダー右端の操作群（検索＋資料請求＋お問い合わせ）。ヘッダー内で1つの塊として扱う */
.head-actions{display:flex;align-items:center;gap:calc(10px * var(--sp-k));flex:none}
.icon-btn{width:40px;height:40px;border:1px solid var(--line);border-radius:var(--rd-btn);display:flex;align-items:center;justify-content:center;color:var(--ink-soft);flex-shrink:0}
.icon-btn:hover{border-color:var(--navy);color:var(--navy)}
.icon-btn svg{width:18px;height:18px;stroke:currentColor}
.btn{display:inline-flex;align-items:center;gap:calc(8px * var(--sp-k));font-weight:700;border-radius:var(--rd-btn);padding:calc(11px * var(--sp-k)) calc(18px * var(--sp-k));font-size:var(--fs-ui);white-space:nowrap;transition:.15s;cursor:pointer;border:none}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{filter:brightness(.95)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-deep)}
/* 白地・navy枠のセカンダリボタン（枠は inset shadow なので btn-accent と同じ高さになる） */
.btn-ghost{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.btn-ghost:hover{background:var(--navy);color:#fff;box-shadow:inset 0 0 0 1px var(--navy)}
/* ヘッダーの幅適応：間隔→ラベル→検索アイコン の順に落とす（文字は --fs-ui 固定） */
@media(max-width:1300px){.head{gap:calc(22px * var(--sp-k))}nav.main{gap:calc(24px * var(--sp-k))}}
@media(max-width:1160px){nav.main{gap:calc(18px * var(--sp-k))}.head-actions{gap:calc(8px * var(--sp-k))}.head .btn{padding:calc(11px * var(--sp-k)) calc(14px * var(--sp-k))}.head .icon-btn{width:36px;height:36px}}
/* 1080px以下：副の資料請求からラベルを落とす（主のお問い合わせは文字のまま）。
アイコンのみでも高さ46pxを保ち、隣のラベル付きボタンと上下がずれないようにする */
@media(max-width:1080px){.head .btn-ghost{width:46px;height:46px;padding:0;gap:0;justify-content:center}.head .btn-ghost span{display:none}.head .btn-ghost svg{width:18px;height:18px}}
@media(max-width:980px){.head .btn-accent{width:46px;height:46px;padding:0;gap:0;justify-content:center}.head .btn-accent span{display:none}.head .btn-accent svg{width:18px;height:18px}}
/* 最後に検索アイコンを落とす（ラベルより後。まだ余白があるうちに消さない） */
@media(max-width:1020px){.head .icon-btn{display:none}}
@media(max-width:900px){.head{gap:calc(16px * var(--sp-k))}nav.main{gap:calc(13px * var(--sp-k))}.logo img{height:38px}}
@media(max-width:800px){.head{gap:calc(12px * var(--sp-k))}nav.main{gap:calc(9px * var(--sp-k))}.logo img{height:34px}}
/* 768px以下：ナビをドロワーに折りたたむ（ヘッダーはロゴ＋メニュー＋お問い合わせのみ）。
CSSだけで開閉するため .nav-toggle（隠しチェックボックス）を nav.main の直前の兄弟に置く */
.nav-btn{display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:var(--rd-btn);align-items:center;justify-content:center;color:var(--navy);cursor:pointer;flex:none}
.nav-btn:hover{border-color:var(--navy);background:var(--bg-soft)}
.nav-btn svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
@media(max-width:768px){
.head{gap:calc(10px * var(--sp-k));height:76px}
.logo img{height:32px}
.nav-btn{display:flex;order:9}
nav.main{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--sh-2);padding:calc(6px * var(--sp-k)) 0}
.nav-toggle:checked~nav.main{display:flex}
nav.main a{padding:calc(15px * var(--sp-k)) clamp(calc(20px * var(--sp-k)),5vw,calc(64px * var(--sp-k)));border-bottom:0;font-size:var(--fs-ui);font-weight:700}
nav.main a:hover{background:var(--bg-soft);border-color:transparent;color:var(--navy)}
.head .btn-ghost{display:none}
}
/* ---------- hero (MV / blueprint) ---------- */
.hero{position:relative;overflow:hidden;background:#fbfcfe var(--mv-bg) center top/cover no-repeat;border-bottom:1px solid var(--line);padding:calc(82px * var(--sp-k)) 0 calc(74px * var(--sp-k));text-align:center}
/* 案C のみ：ヘッダー背景なし → MV画像をヘッダー裏まで展開 */
html.mv-c:not(.scrolled) header{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
html.mv-c .hero{margin-top:calc(-92px * var(--sp-k));padding-top:calc(174px * var(--sp-k))}
.hero .wrap{position:relative;z-index:3}
/* soft center wash so the headline + search stay legible over the artwork */
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:radial-gradient(680px 420px at 50% 44%,rgba(255,255,255,.92) 0%,rgba(255,255,255,.55) 52%,transparent 78%)}
.hero .glow{display:none}
h1.hero-h{font-size:calc(48px * var(--fs-k));font-weight:900;line-height:1.38;margin-top:calc(24px * var(--sp-k));letter-spacing:.01em;text-wrap:balance}
h1.hero-h em{font-style:normal;color:var(--navy)}
.hero-sub{margin:calc(20px * var(--sp-k)) auto 0;font-size:var(--fs-body);color:var(--ink-soft);line-height:1.85;font-weight:500}/* max-width:38em を撤去（2026-09-10 ユーザー指示） */
.bigsearch{margin:calc(34px * var(--sp-k)) auto 0;max-width:880px;background:#fff;border:2px solid var(--navy);border-radius:var(--rd-lg);padding:calc(9px * var(--sp-k)) calc(9px * var(--sp-k)) calc(9px * var(--sp-k)) calc(22px * var(--sp-k));display:flex;align-items:center;gap:calc(12px * var(--sp-k));box-shadow:var(--sh-pop);transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.bigsearch:focus-within{transform:translateY(-1px);box-shadow:0 0 0 4px rgba(0,67,153,.12),var(--sh-pop)}
.bigsearch svg{width:21px;height:21px;stroke:var(--navy);flex-shrink:0}
.bigsearch .btn svg,.psearch .btn svg{width:16px;height:16px;stroke:#fff}
.bigsearch input{flex:1;border:none;outline:none;font-size:var(--fs-ui);font-family:inherit;background:transparent;color:var(--ink)}
.bigsearch input::placeholder{color:#9aa8bd}
.bigsearch .btn{padding:calc(14px * var(--sp-k)) calc(28px * var(--sp-k));font-size:var(--fs-ui);border-radius:var(--rd-btn)}
.quick{margin-top:calc(18px * var(--sp-k));display:flex;gap:calc(9px * var(--sp-k));flex-wrap:wrap;justify-content:center;font-size:var(--fs-ui);color:var(--ink-soft)}
.quick a{background:rgba(255,255,255,.86);border:1px solid var(--line);border-radius:var(--shape-pill);padding:calc(6px * var(--sp-k)) calc(15px * var(--sp-k));transition:.16s var(--ease);white-space:nowrap;backdrop-filter:blur(2px);font-weight:500}
.quick a:hover{border-color:var(--navy);color:var(--navy);background:#fff}
/* page-hero のキャッチコピー行 */
.page-hero .hero-catch{font-size:calc(19px * var(--fs-k));font-weight:900;margin-top:calc(16px * var(--sp-k));letter-spacing:.01em;color:var(--navy)}
.theme-sol .hero-catch{color:var(--sol)}
/* ---------- カードグリッド：サイト唯一の均等N列グリッド ---------- */
/* 列数は .c1〜.c6／gap は既定18px・.tight14px・.loose28px／内容幅は基本1080（.w-md）・3〜4カラム等の必要時のみ1160（.w-lg） */
.cards{display:grid;gap:var(--gap-md);grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
.cards>*{min-width:0}
.cards.c1{--cols:1}.cards.c2{--cols:2}.cards.c3{--cols:3}.cards.c4{--cols:4}.cards.c5{--cols:5}.cards.c6{--cols:6}
.cards.tight{gap:var(--gap-sm)}.cards.loose{gap:var(--gap-lg)}
.cards.mt{margin-top:calc(24px * var(--sp-k))}
/* ロゴ＋説明パネルをカード束の直後に置くときの間（部品側が持つ。ページCSSで margin-top を足さない） */
.cards+.mk{margin-top:calc(24px * var(--sp-k))}
.w-md{max-width:1080px;margin-left:auto;margin-right:auto}/* 内容幅の基本は1080一本。3〜4カラム等で必要な場合のみ .w-lg 1160（2026-08-16 確定） */
.w-lg{max-width:1160px;margin-left:auto;margin-right:auto}
.img-80{display:block;width:80%;height:auto;margin-left:auto;margin-right:auto}/* 画像を内容幅の 80% で出す汎用クラス（img に付ける。縦の余白は持たない）。ユーザー指示 2026-09-15 */
/* 1〜3列のときは中のカードを大きく（列数で決まる） */
.cards.c1>.stage,.cards.c2>.stage,.cards.c3>.stage{padding:calc(26px * var(--sp-k)) calc(28px * var(--sp-k))}
.cards.c1>.stage>:is(h3,h4,h5,h6),.cards.c2>.stage>:is(h3,h4,h5,h6),.cards.c3>.stage>:is(h3,h4,h5,h6){font-size:var(--fs-card)}
.cards.c1>.stage>p,.cards.c2>.stage>p,.cards.c3>.stage>p{font-size:var(--fs-body);line-height:1.95;margin-top:calc(11px * var(--sp-k))}
@media(max-width:1100px){.cards.c6{--cols:4}.cards.c5{--cols:3}.cards.c4{--cols:2}}
@media(max-width:900px){.cards.c3,.cards.c4,.cards.c5{--cols:2}.cards.c6{--cols:3}.cards.c2{--cols:1}
/* 3枚のときは2列にすると最終行が1枚だけ残るので1列に落とす */
.cards.c3:has(>:nth-child(3):last-child){--cols:1}}
/* 矢印付きの並べ（工程フロー）：.cards の修飾子。列幅は .cards が全行で揃える */
.cards.arrows{gap:calc(32px * var(--sp-k))}
.cards.arrows>*{position:relative}
.cards.arrows>*::after{content:"";position:absolute;top:50%;left:calc(100% + 16px);width:16px;height:16px;transform:translate(-50%,-50%);background:#b6c1d2;-webkit-mask:url("data:image/svg+xml;utf8,") center/16px 16px no-repeat;mask:url("data:image/svg+xml;utf8,") center/16px 16px no-repeat}
/* 工程フローは列を保つ（順序が読めなくなるため折り返さない）。900pxで1列に落とす */
@media(max-width:1100px) and (min-width:901px){.cards.c6.arrows{--cols:6}.cards.c5.arrows{--cols:5}.cards.c4.arrows{--cols:4}}
@media(max-width:900px){.cards.arrows{--cols:1}.cards.arrows>*::after{content:"";left:50%;top:calc(100% + 16px);transform:translate(-50%,-50%) rotate(90deg)}}
/* 1列の工程フローは常に下向き矢印 */
.cards.c1.arrows>*::after{left:50%;top:calc(100% + 16px);transform:translate(-50%,-50%) rotate(90deg)}
/* 1つのセルにカードを縦に積むとき（工程が枝分かれする図） */
.cards>.cell{display:flex;flex-direction:column;gap:calc(10px * var(--sp-k));min-width:0}
.cards>.cell>*{flex:1}
.cards.arrows>*:last-child::after{content:none!important}
@media(max-width:640px){.cards.c1,.cards.c2,.cards.c3,.cards.c4,.cards.c5{--cols:1}.cards.c6{--cols:2}}
/* ---------- section base ---------- */
/* セクション余白は 2026-09-16 クライアント指摘 S18「要素間のスペースをもう少し」→ ユーザー裁定で 136%（88→120 / 108→148 / 58→80。狭幅と #about 内の余白も同率） */
section.block{padding:calc(120px * var(--sp-k)) 0}
.block-lg{padding:calc(148px * var(--sp-k)) 0}
.block-sm{padding:calc(80px * var(--sp-k)) 0}
.bg-soft{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bg-navy{position:relative;overflow:hidden;background:linear-gradient(158deg,var(--navy) 0%,var(--navy-deep) 62%,var(--navy-ink) 100%);color:#fff;border-top:1px solid var(--navy-deep);border-bottom:1px solid var(--navy-ink)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:calc(24px * var(--sp-k));margin-bottom:calc(44px * var(--sp-k));flex-wrap:wrap}
.sec-head .en{display:inline-flex;align-items:baseline;gap:calc(10px * var(--sp-k));font-family:"Roboto Condensed",sans-serif;font-size:var(--fs-sub);font-weight:600;letter-spacing:.16em;color:var(--navy)}
.sec-head .en::before{content:"/";font-family:"Roboto Condensed",sans-serif;font-weight:700;font-size:calc(24px * var(--fs-k));line-height:1;letter-spacing:0;color:var(--navy)}
.sec-head h2{font-size:calc(35px * var(--fs-k));font-weight:900;margin-top:calc(11px * var(--sp-k));letter-spacing:-0.03em;line-height:1.3}
.sec-head .sub{font-size:var(--fs-body);color:var(--ink-soft);margin-top:calc(13px * var(--sp-k));line-height:1.85;font-weight:500}/* max-width:46em を撤去（2026-09-08 ユーザー指示） */
.more{font-size:var(--fs-body);font-weight:700;color:var(--navy);display:inline-flex;align-items:center;gap:calc(6px * var(--sp-k));white-space:nowrap;transition:gap .16s var(--ease)}
.more:hover{gap:calc(9px * var(--sp-k))}
.more svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;flex:none}
/* 役割A｜カード全体がクリッカブルなときの誘導＝テキスト＋シェブロン（色は文脈で3種） */
.more.sol{color:var(--sol)}
.more.prod{color:var(--prod)}
/* ---- ヒーローCTA（全ページ共通・旧 .mbd-cta） ---- */
.hero-cta{display:flex;gap:calc(14px * var(--sp-k));flex-wrap:wrap;margin-top:calc(28px * var(--sp-k))}
.hero-cta .btn{padding:calc(15px * var(--sp-k)) calc(28px * var(--sp-k));font-size:var(--fs-ui);border-radius:var(--rd-btn);box-shadow:var(--sh-1)}
/* ---- 役割B-1｜同一ページ内アンカー帯（旧 .ind-anchors / .ind-jump を統一） ---- */
.anchors{display:flex;gap:calc(10px * var(--sp-k));flex-wrap:wrap;justify-content:center}
.anchors a{display:inline-flex;align-items:center;gap:calc(9px * var(--sp-k));background:#fff;border:1px solid var(--line);border-radius:var(--rd-btn);padding:calc(12px * var(--sp-k)) calc(22px * var(--sp-k));font-size:var(--fs-ui);font-weight:700;color:var(--ink);transition:.15s var(--ease)}
.anchors a .dot{width:9px;height:9px;border-radius:var(--shape-pill);flex:none;background:var(--navy)}
.anchors a svg{width:14px;height:14px;stroke:var(--ink-mute);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.anchors a:hover{border-color:var(--navy);color:var(--navy);box-shadow:var(--sh-1)}
.anchors a:hover svg{stroke:var(--navy)}
.anchors a.sol .dot{background:var(--sol)}
.anchors a.sol:hover{border-color:var(--sol);color:var(--sol)}
.anchors a.sol:hover svg{stroke:var(--sol)}
.anchors a.prod .dot{background:var(--prod)}
.anchors a.prod:hover{border-color:var(--prod);color:var(--prod)}
.anchors a.prod:hover svg{stroke:var(--prod)}
.anchor-band{background:transparent;border:0;padding:0;margin:calc(-26px * var(--sp-k)) 0;position:relative;z-index:3}
.anchor-band .anchors a{box-shadow:0 6px 20px rgba(0,20,58,.18)}
.anchor-band .anchors a:hover{box-shadow:0 8px 24px rgba(0,20,58,.24)}
/* 折返しが起きる幅：またぎをやめ、次セクションと地続きの白面にする（テーマルールも外す） */
@media(max-width:820px){.anchor-band{margin:0;padding:calc(26px * var(--sp-k)) 0 0;background:transparent;z-index:1}
.anchor-band .anchors a{box-shadow:var(--sh-1)}
.anchor-band+section.theme-sol,.anchor-band+section.theme-prod{border-top:0}}
/* セクション内の下位グループへのジャンプ（ドットなし・軽いチップ） */
.anchors.inline{justify-content:center;gap:calc(9px * var(--sp-k))}
.anchors.inline a{padding:calc(8px * var(--sp-k)) calc(16px * var(--sp-k));font-size:var(--fs-ui);font-weight:700;color:var(--ink-soft);border-color:var(--line);background:#fff}
.anchors.inline a svg{width:12px;height:12px}
.anchors.inline a:hover{border-color:var(--navy);color:var(--navy);box-shadow:none}
.anchors.inline.sol a:hover{border-color:var(--sol);color:var(--sol)}
.anchors.inline.sol a:hover svg{stroke:var(--sol)}
.anchors.inline.prod a{color:var(--prod);border-color:color-mix(in oklab,var(--prod) 30%,#fff)}
.anchors.inline.prod a svg{stroke:color-mix(in oklab,var(--prod) 60%,#fff)}
.anchors.inline.prod a:hover{background:var(--prod);color:#fff;border-color:var(--prod)}
.anchors.inline.prod a:hover svg{stroke:#fff}
/* ---- 役割D｜事例・実績カード：列数で形が決まる（3列以上＝縦／2列以下＝横 .row） ---- */
.case{border:1px solid var(--line);background:#fff;border-radius:var(--rd-md);padding:calc(26px * var(--sp-k)) calc(30px * var(--sp-k));box-shadow:var(--sh-1);display:flex;flex-direction:column}
/* 2026-09-30 ユーザー裁定: 事例カードの見出しは左揃え（旧: 中央揃え）。ほかの一覧（ニュース・イベント・コラム・特集）のカードと揃える。事例カード全体に共通 */
.case>:is(h3,h4,h5,h6){font-size:var(--fs-card);font-weight:900;text-align:left;line-height:1.6;display:flex;align-items:center;justify-content:flex-start;text-wrap:balance;word-break:auto-phrase;overflow-wrap:anywhere} /* 2026-09-30: 入りきらない長い一語（「モデルベースシステムズエンジニアリング」等）だけ語の途中で折り返す（はみ出し防止） */
.case .ph{aspect-ratio:16/7;width:100%;margin:calc(12px * var(--sp-k)) 0 0;border-radius:10px}
.case .cimg{width:100%;aspect-ratio:16/7;object-fit:cover;margin:calc(12px * var(--sp-k)) 0 0;border-radius:10px;display:block}
/* .fit＝製品切り抜き写真（cropせず全体を見せる。row.art の縦型版） */
.case .cimg.fit{object-fit:contain;background:#fff;padding:calc(14px * var(--sp-k));box-sizing:border-box}
.case>p{font-size:var(--fs-body);color:var(--ink-soft);line-height:1.9;margin-top:calc(16px * var(--sp-k));font-weight:500}
.case .meta{padding-top:calc(16px * var(--sp-k))}
.case .acts{margin-top:auto;padding-top:calc(18px * var(--sp-k));display:flex;justify-content:flex-end}
/* 2026-09-30 ユーザー裁定: 区分・技術構成要素の小見出しは --fs-sub 14px（メタの役割。本文 16px と同じ大きさで差が無かった） */
.case .meta :is(h3,h4,h5,h6){font-size:var(--fs-sub);font-weight:900;color:var(--ink);border-top:1px solid var(--hair);padding-top:calc(14px * var(--sp-k))}
.case .tags{display:flex;flex-wrap:wrap;gap:calc(7px * var(--sp-k));margin:calc(10px * var(--sp-k)) 0 calc(14px * var(--sp-k))}
.case>.tags:first-child{margin-top:0;margin-bottom:calc(12px * var(--sp-k))}
.case .tags span{font-size:var(--fs-label);font-weight:700;color:var(--sol);background:var(--sol-soft);border:1px solid color-mix(in oklab,var(--sol) 20%,#fff);border-radius:var(--shape-pill);padding:calc(4px * var(--sp-k)) calc(12px * var(--sp-k));line-height:1.5}
.case ul{list-style:none;display:grid;gap:calc(6px * var(--sp-k));margin-top:calc(10px * var(--sp-k))}
.case li{font-size:var(--fs-body);color:var(--ink-soft);display:flex;gap:calc(8px * var(--sp-k));line-height:1.65;font-weight:500}
.case li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--navy);margin-top:calc(8px * var(--sp-k));flex:none}
/* 横型（2列以下のときはこちら） */
.case.row{display:grid;grid-template-columns:300px 1fr;grid-template-rows:auto auto 1fr;gap:0 calc(30px * var(--sp-k));padding:calc(24px * var(--sp-k)) calc(28px * var(--sp-k));align-items:start}
.case.row>.cimg,.case.row>.ph{grid-area:1/1/4/2;margin:0;align-self:start;width:100%;aspect-ratio:4/3;object-fit:cover}
/* .art＝イラスト（切り抜かず全体を見せる） */
.case.row.art>.cimg{object-fit:contain;background:#fff}
.case.row>:is(h3,h4,h5,h6){grid-area:1/2/2/3;display:block;text-align:left;justify-content:flex-start;min-height:0;font-size:var(--fs-card)}
.case.row>p{grid-area:2/2/3/3;margin-top:calc(11px * var(--sp-k))}
.case.row>.meta{grid-area:3/2/4/3;padding-top:calc(15px * var(--sp-k))}
.case.row>.acts{grid-area:4/2/5/3}
@media(max-width:820px){.case.row{grid-template-columns:1fr;grid-template-rows:none;gap:0}.case.row>.cimg,.case.row>.ph{grid-area:auto;aspect-ratio:16/7;margin:calc(12px * var(--sp-k)) 0 0}.case.row.art>.cimg{aspect-ratio:4/3;max-width:360px}.case.row>:is(h3,h4,h5,h6){grid-area:auto}.case.row>p{grid-area:auto}.case.row>.meta{grid-area:auto}.case.row>.acts{grid-area:auto;justify-content:flex-start}}
/* ---- 役割E｜ロゴ＋説明の紹介枠（旧 .tool を統合） ---- */
.mk{border:1px solid var(--hair);background:#fff;border-radius:var(--rd-lg);padding:calc(26px * var(--sp-k)) calc(28px * var(--sp-k));box-shadow:var(--sh-1);display:grid;grid-template-columns:240px 1fr;gap:calc(26px * var(--sp-k));align-items:start}
.mk .lg{height:148px;display:flex;align-items:center;justify-content:center;background:var(--bg-soft);border:1px solid var(--hair);border-radius:10px;padding:calc(18px * var(--sp-k));font-family:"Roboto Condensed",sans-serif;font-weight:700;font-size:calc(20px * var(--fs-k));color:var(--navy);text-align:center;line-height:1.3}
.mk .lg img{max-height:100px;max-width:100%;width:100%;object-fit:contain}
.mk .bd{display:flex;flex-direction:column;min-width:0}
.mk .bd :is(h3,h4,h5,h6){font-size:var(--fs-card);font-weight:900}
.mk p{font-size:var(--fs-body);color:var(--ink-soft);line-height:1.95;margin-top:calc(10px * var(--sp-k));flex:1}
.mk .acts{margin-top:calc(18px * var(--sp-k))}/* ボタン本体は共通 .cardbtn */
/* 縦積み（3列以上に並べるとき） */
.mk.stack{grid-template-columns:1fr;gap:calc(16px * var(--sp-k));padding:calc(24px * var(--sp-k))}
.mk.stack .lg{height:88px;padding:calc(12px * var(--sp-k));font-size:calc(18px * var(--fs-k))}
.mk.stack .lg img{max-height:42px;width:auto;max-width:82%}
.mk.stack p{font-size:var(--fs-body);line-height:1.85;margin-top:0}
.mk .lg image-slot{width:100%;height:100%}
/* 正方形のバッジ型ロゴ：横長ロゴと視覚的重量を揃えるため枠いっぱいまで使う */
.mk .lg:has(img.sq){padding:calc(6px * var(--sp-k))}
.mk .lg img.sq{max-height:100%;width:auto;max-width:none}
.mk-note{text-align:center;font-size:var(--fs-sub);color:var(--ink-mute);font-weight:600;margin-top:calc(14px * var(--sp-k))}
@media(max-width:900px){.mk-grid,.mk-grid.c3{grid-template-columns:1fr}}
/* 複数列に並べるとき（.mk-grid の2列以上）は本文列が細くなるため、ロゴ枠は従来サイズのまま。
縦積み .mk.stack は対象外（デザイン CSS ではこの規則が .mk.stack に勝って、solution-testauto「対応ツール例」の本文列が 100px 程度に潰れていた。2026-09-29 指摘で :not(.stack) を追加） */
.mk-grid:is(.c2,.c3,.c4) .mk:not(.stack){grid-template-columns:180px 1fr}
.mk-grid:is(.c2,.c3,.c4) .mk:not(.stack) .lg{height:110px;padding:calc(16px * var(--sp-k))}
.mk-grid:is(.c2,.c3,.c4) .mk:not(.stack) .lg img{max-height:70px}
/* ロゴ枠を拡大（180→240px）したぶん、狭幅では縦積みに切り替える（本文列が潰れるため。2026-08-28） */
@media(max-width:640px){.mk:not(.stack),.mk-grid:is(.c2,.c3,.c4) .mk:not(.stack){grid-template-columns:1fr;gap:calc(18px * var(--sp-k))}.mk:not(.stack) .lg,.mk-grid:is(.c2,.c3,.c4) .mk:not(.stack) .lg{height:124px}}
/* ================= 重複解消：2ページ以上で使う部品はここに1回だけ ================= */
/* --- 「なぜ選ばれるか」横並びブロック（受託TOP／製品TOP 共通・旧 dev-top+products-top コピペ） --- */
.whyset{display:grid;gap:calc(34px * var(--sp-k))}
.why-row{border:1px solid var(--line);display:grid;grid-template-columns:0.82fr 1.18fr;gap:calc(44px * var(--sp-k));align-items:center;background:#fff;border-radius:var(--rd-lg);padding:calc(32px * var(--sp-k)) calc(36px * var(--sp-k));box-shadow:var(--sh-1)}
.why-fig{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(16px * var(--sp-k));background:var(--bg-soft);border:1px solid var(--hair);border-radius:var(--rd-md);padding:calc(28px * var(--sp-k)) calc(24px * var(--sp-k));min-height:216px}
.why-fig.tight{padding:calc(20px * var(--sp-k)) calc(16px * var(--sp-k))}
.why-fig.bare{background:none;border:none;padding:0}
/* 図画像。.why-fig の中だけでなく .dom-panel 直下でも使うので部品単体に体裁を持たせる */
.dg{width:100%;height:auto;display:block}
/* bareの写真版：透過図と違い写真は角丸を部品側で持つ（SVG図は透過背景のため見た目不変） */
.why-fig.bare .dg{border-radius:var(--rd-md)}
.why-tx :is(h3,h4){font-size:calc(22px * var(--fs-k));font-weight:700;line-height:1.6;letter-spacing:-0.01em}
.why-tx :is(h3,h4) b{font-weight:900;color:var(--sol)}
.theme-prod .why-tx :is(h3,h4) b,.whyset.prod .why-tx :is(h3,h4) b{color:var(--prod)}
.why-tx p{font-size:var(--fs-body);color:var(--ink-soft);line-height:1.95;margin-top:calc(14px * var(--sp-k));font-weight:500}
/* 小セクションの区切り（TOPの「選ばれる理由」と同じ数値）。2ページ目の利用で tpv.css から昇格 */
.subsec{margin-top:calc(52px * var(--sp-k));border-top:1px solid var(--line);padding-top:calc(46px * var(--sp-k))}
/* グループ見出し直下に大型行の束が来る組合せの間隔：束の行間（whyset gap 34）と同値にして見出しをリズムに乗せる */
.grp-h+.whyset{margin-top:calc(34px * var(--sp-k))}
@media(max-width:980px){.why-row{grid-template-columns:1fr;gap:calc(26px * var(--sp-k));padding:calc(26px * var(--sp-k)) calc(24px * var(--sp-k))}}
/* 上揃え修飾子：図が本文より縦長のとき（写真入り行）。第三者検証で採用 */
.whyset.top .why-row{align-items:start}
/* --- 3列パネルグリッド（受託TOP／FPGA 共通） --- */
@media(max-width:1100px){.spec3{grid-template-columns:1fr}}
/* --- 番号ラベル（サイト唯一の番号表現。順序なし＝「01」／順序あり＝「STEP 01」） --- */
.stp{font-family:"Roboto Condensed",sans-serif;font-size:var(--fs-sub);font-weight:700;letter-spacing:.12em;color:var(--sol);flex:none}
.stp.prod{color:var(--prod)}
.stage .stp{display:block;margin-bottom:calc(9px * var(--sp-k))}
.stage .st-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:calc(10px * var(--sp-k))}
.stage .st-head .si{margin:0}
.stage .st-head .stp{margin-bottom:0}
/* --- グループ見出し（一覧・分類の区切り。既定ティール／.sol で緑） --- */
.grp-h{display:flex;align-items:center;gap:calc(11px * var(--sp-k));font-size:calc(22px * var(--fs-k));font-weight:900;margin:calc(46px * var(--sp-k)) 0 calc(18px * var(--sp-k))}
.grp-h::before{content:"";width:5px;height:22px;background:var(--prod);border-radius:2px;flex:none}
.grp-h.sol::before{background:var(--sol)}
.grp-h .n{font-family:"Roboto Condensed",sans-serif;font-size:var(--fs-body);color:var(--ink-mute);font-weight:700;margin-left:2px}
.grp-h:first-child{margin-top:0}
/* --- パネル見出しのアイコン枠（旧 mbd.css の裸 .ci） --- */
.ci{width:30px;height:30px;border-radius:8px;background:var(--sol-soft);display:inline-flex;align-items:center;justify-content:center;flex:none}
.ci svg{width:17px;height:17px;stroke:var(--sol);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.indp>:is(h3,h4,h5,h6){display:flex;align-items:center;gap:calc(12px * var(--sp-k))}
/* --- 領域パネル（受託TOP／MBD 共通） --- */
.indp{border:1px solid var(--line);background:#fff;border-radius:var(--rd-md);padding:calc(28px * var(--sp-k)) calc(32px * var(--sp-k)) calc(30px * var(--sp-k));box-shadow:var(--sh-1)}
.indp>:is(h3,h4,h5,h6){text-align:left;font-size:calc(20px * var(--fs-k));font-weight:900}
.indp ul{list-style:none;display:grid;gap:calc(7px * var(--sp-k));align-content:start}
.indp li{font-size:var(--fs-body);color:var(--ink);font-weight:500;display:flex;gap:calc(8px * var(--sp-k));line-height:1.6}
.indp li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--sol);margin-top:calc(9px * var(--sp-k));flex:none}
.indp li.tbd{color:var(--ink-mute)}
.indp.sm ul{margin-top:calc(16px * var(--sp-k))}
/* 領域パネルに説明メディアを入れる使い方（第三者検証 AI活用） */
.indp>.tags{display:flex;gap:calc(7px * var(--sp-k));flex-wrap:wrap;margin-bottom:calc(12px * var(--sp-k))}
.indp>.ph{aspect-ratio:16/9;margin-top:calc(16px * var(--sp-k))}
.indp>img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;margin-top:calc(16px * var(--sp-k));display:block}
.indp>p{font-size:var(--fs-body);color:var(--ink);line-height:1.9;font-weight:700;margin-top:calc(16px * var(--sp-k))}
.indp>p+ul{margin-top:calc(14px * var(--sp-k))}
.indp>.use{margin-top:calc(18px * var(--sp-k))}
/* --- 親カテゴリ表示（中カテゴリ／MBD／FPGA 共通） --- */
.cat-parent{display:inline-flex;align-items:center;gap:calc(11px * var(--sp-k));font-size:var(--fs-body);font-weight:700;color:var(--prod);margin-bottom:calc(8px * var(--sp-k))}
.cat-parent .ci{width:36px;height:36px;border-radius:var(--rd-btn);background:var(--prod);display:flex;align-items:center;justify-content:center;flex:none}
.cat-parent .ci svg{width:20px;height:20px;stroke:#fff;stroke-width:1.8;fill:none}
.cat-parent.sol{color:var(--sol)}
.cat-parent.sol .ci{background:var(--sol)}
/* --- FAQ（受託系＝緑がベース／製品系は .prod） --- */
.faq{display:grid;gap:calc(12px * var(--sp-k))}/* 幅は .w-md（内容幅 1080 一本。デザインの 1000 は独自値だったので統一。2026-09-16） */
.qa{border:1px solid var(--line);background:#fff;border-radius:var(--rd-md);box-shadow:var(--sh-1);overflow:hidden}
.qa summary{display:flex;gap:calc(13px * var(--sp-k));padding:calc(22px * var(--sp-k)) calc(26px * var(--sp-k));font-weight:900;font-size:var(--fs-card);cursor:pointer;list-style:none;align-items:baseline;line-height:1.6}
.qa summary::-webkit-details-marker{display:none}
.qa summary .m{font-family:"Roboto Condensed",sans-serif;font-weight:700;color:var(--sol);flex:none}
.faq.prod .qa summary .m{color:var(--prod)}
/* 開閉記号: デザインの文字「＋」（フォント依存で太さ・中心が揃わない）をやめ、サイトの線アイコンと同じ SVG に。開いたら縦線が消えて「−」（2026-09-16 ユーザー指示） */
.qa summary .tg{margin-left:auto;align-self:center;flex:none;width:20px;height:20px;display:flex;align-items:center;justify-content:center}
.qa summary .tg svg{width:20px;height:20px;stroke:var(--ink-mute);stroke-width:2.4;stroke-linecap:round;fill:none}
.qa summary .tg .v{transform-origin:center;transition:transform .2s var(--ease)}
.qa[open] summary .tg .v{transform:scaleY(0)}
@media(prefers-reduced-motion:reduce){.qa summary .tg .v{transition:none}}
.qa .a{display:flex;gap:calc(13px * var(--sp-k));padding:0 calc(26px * var(--sp-k)) calc(24px * var(--sp-k));align-items:baseline}
.qa .a .m{font-family:"Roboto Condensed",sans-serif;font-weight:700;color:var(--ink-mute);flex:none}
.qa .a p{font-size:var(--fs-body);color:var(--ink-soft);line-height:1.95;font-weight:500}
/* --- 解説記事パネル（受託系＝緑がベース／製品系は .prod） --- */
/* 幅はサイト基本の1080一本（`.w-md` と同値）。2026-08-31 ユーザー裁定で従来の1020を廃止 */
.article{border:1px solid var(--line);background:#fff;border-radius:var(--rd-lg);padding:calc(48px * var(--sp-k)) calc(54px * var(--sp-k));box-shadow:var(--sh-1);max-width:1080px;margin:0 auto}
.article>h2{font-size:calc(24px * var(--fs-k));font-weight:900;text-align:center;margin-bottom:calc(8px * var(--sp-k))}
/* 1枚のパネルに大見出しが複数並ぶ記事（MBD／GUI開発）用の段落り */
.article>h2:not(:first-child){margin-top:calc(64px * var(--sp-k))}
.article h3{font-size:calc(20px * var(--fs-k));font-weight:900;margin:calc(38px * var(--sp-k)) 0 calc(6px * var(--sp-k));padding-left:calc(14px * var(--sp-k));border-left:4px solid var(--sol)}
.article.prod h3{border-left-color:var(--prod)}
.article h4{font-size:var(--fs-card);font-weight:900;margin:calc(24px * var(--sp-k)) 0 2px}
.article h5{font-size:var(--fs-cardsub);font-weight:900;margin:calc(16px * var(--sp-k)) 0 0;color:var(--ink)}
.article p{font-size:var(--fs-body);line-height:2.05;color:var(--ink);margin-top:calc(10px * var(--sp-k))}
.article ul{list-style:none;margin:calc(14px * var(--sp-k)) 0 0;padding:0;display:grid;gap:calc(9px * var(--sp-k));font-size:var(--fs-body);line-height:1.95;color:var(--ink)}
.article ul li{position:relative;padding-left:calc(19px * var(--sp-k))}
.article ul li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--sol)}
.article.prod ul li::before{background:var(--prod)}
/* ✓マーカー版（他の部品と同じ .ck 修飾子） */
.article ul.ck li{padding-left:calc(25px * var(--sp-k))}
.article ul.ck li::before{content:"✓";left:0;top:0;width:auto;height:auto;border-radius:0;background:none;font-size:calc(14px * var(--fs-k));font-weight:900;color:var(--sol)}
/* 解説記事パネルに埋め込む表（ユーザー裁定 2026-08-25）：見出し直下に置くので上余白を持たせ、
表見出し（th）は本文の見出しより一回り小さくする。コラム系デザイン内の表のみ */
.article .solve-tbl{margin-top:calc(24px * var(--sp-k))}
/* 記事パネル→注記の間隔は部品側で持つ（.dom-panel+.sec-note と同じ考え方） */
.article+.sec-note{margin-top:calc(30px * var(--sp-k))}
.article .solve-tbl th{font-size:var(--fs-body)}
@media(max-width:700px){.article{padding:calc(32px * var(--sp-k)) calc(24px * var(--sp-k))}}
/* --- 対応タスクのタイル並べ（MBD／AI補 共通） --- */
@media(max-width:900px){.task-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.task-grid{grid-template-columns:1fr}}
/* --- チェックリスト行（中カテゴリの「このような課題に対応できます」） --- */
.chk{background:#fff;border:1px solid color-mix(in oklab,var(--sol) 22%,#fff);border-radius:var(--rd-md);padding:calc(17px * var(--sp-k)) calc(20px * var(--sp-k));font-size:var(--fs-body);font-weight:700;line-height:1.7;display:flex;gap:calc(11px * var(--sp-k));align-items:flex-start}
.chk svg{width:18px;height:18px;stroke:var(--sol);stroke-width:2.2;fill:none;flex:none;margin-top:calc(3px * var(--sp-k))}
@media(max-width:820px){.chk-grid{grid-template-columns:1fr}}
/* --- 説明メディア行（画像左＋見出し右。.case.row と同じ骨格） --- */
.svc-row{border:1px solid var(--hair);display:grid;grid-template-columns:190px 1fr;gap:calc(24px * var(--sp-k));background:#fff;border-radius:var(--rd-md);padding:calc(24px * var(--sp-k)) calc(28px * var(--sp-k));box-shadow:var(--sh-1);margin-top:calc(20px * var(--sp-k));align-items:center}
.svc-row .ph{aspect-ratio:4/3}
.svc-row :is(h3,h4,h5,h6){font-size:var(--fs-card);font-weight:900}
.svc-row p{font-size:var(--fs-body);color:var(--ink-soft);line-height:1.9;margin-top:calc(8px * var(--sp-k))}
@media(max-width:820px){.svc-row{grid-template-columns:1fr}}
/* --- ページ最上部ヒーロー（受託TOP／製品TOP 共通） --- */
.hero-top .sec-ico{margin:0 auto calc(16px * var(--sp-k))}
.hero-top h1.hero-h{font-size:calc(44px * var(--fs-k));font-weight:900;line-height:1.35;margin-top:calc(14px * var(--sp-k));letter-spacing:-0.01em}
.hero-top .hero-sub{margin:calc(16px * var(--sp-k)) auto 0;font-size:var(--fs-body);color:var(--ink-soft);line-height:1.85;font-weight:500}/* max-width:40em を撤去（2026-09-10 ユーザー指示） */
.hero-top .hero-sub em{font-style:normal;font-weight:900;color:var(--sol);word-break:auto-phrase}
.page-hero.theme-prod.hero-top .hero-sub em{color:var(--prod)}
@media(max-width:980px){.hero-top h1.hero-h{font-size:calc(28px * var(--fs-k))}.page-hero.hero-top{padding:calc(28px * var(--sp-k)) 0 calc(42px * var(--sp-k))}}
/* --- 工程カード（FPGA／テスト自動化 共通） --- */
.stage{border:1px solid var(--line);background:#fff;border-radius:var(--rd-md);box-shadow:var(--sh-1);padding:calc(18px * var(--sp-k)) calc(18px * var(--sp-k)) calc(16px * var(--sp-k))}
.stage.on{border-color:var(--sol);box-shadow:0 0 0 1px var(--sol),var(--sh-pop)}
.theme-prod .stage.on{border-color:var(--prod);box-shadow:0 0 0 1px var(--prod),var(--sh-pop)}
.stage .si{width:34px;height:34px;border-radius:10px;background:var(--sol-soft);display:flex;align-items:center;justify-content:center;margin-bottom:calc(10px * var(--sp-k))}
.stage .si svg{width:19px;height:19px;stroke:var(--sol);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.stage :is(h3,h4,h5,h6){font-size:var(--fs-cardsub);font-weight:900;line-height:1.5}
.stage p{font-size:var(--fs-body);color:var(--ink-soft);line-height:1.85;margin-top:calc(8px * var(--sp-k));font-weight:500}
.stage .tags{display:flex;gap:calc(7px * var(--sp-k));flex-wrap:wrap;margin-bottom:calc(13px * var(--sp-k))}
.stage ul{list-style:none;margin-top:calc(8px * var(--sp-k));display:grid;gap:calc(4px * var(--sp-k))}
.stage li{font-size:var(--fs-body);color:var(--ink-soft);font-weight:500;line-height:1.6;display:flex;gap:calc(7px * var(--sp-k))}
.stage li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--sol);flex:none;margin-top:calc(8px * var(--sp-k))}
/* ラベルバンド＋箇条書きカード（委託形態・メリデメ等の対比群）。MBDのページ部品から昇格（2026-08-16） */
.fcard{border:1px solid var(--hair);background:#fff;border-radius:var(--rd-md);overflow:hidden;box-shadow:var(--sh-1);display:flex;flex-direction:column}
.fcard .hd{background:#cde9da;text-align:center;padding:calc(15px * var(--sp-k)) calc(18px * var(--sp-k)) calc(13px * var(--sp-k))}
.fcard .hd .k{display:block;font-size:var(--fs-label);font-weight:700;color:var(--ink-soft)}
.fcard .hd .n{display:block;font-size:calc(22px * var(--fs-k));font-weight:900;color:var(--ink);margin-top:1px}
.fcard ul{list-style:none;padding:calc(18px * var(--sp-k)) calc(22px * var(--sp-k)) calc(22px * var(--sp-k));display:grid;gap:calc(9px * var(--sp-k));align-content:start}
.fcard li{font-size:var(--fs-body);font-weight:500;color:var(--ink);display:flex;gap:calc(9px * var(--sp-k));line-height:1.65}
.fcard li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--sol);flex:none;margin-top:calc(9px * var(--sp-k))}
/* 悩みピル .aud（「〜したい」対象者タグ）。MBDのページ部品から昇格（2026-08-17 エッジAIで2ページ目の利用） */
.aud{display:flex;flex-wrap:wrap;gap:calc(7px * var(--sp-k))}
.aud span{display:inline-flex;align-items:center;gap:calc(7px * var(--sp-k));font-size:var(--fs-label);font-weight:700;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--shape-pill);padding:calc(5px * var(--sp-k)) calc(13px * var(--sp-k)) calc(5px * var(--sp-k)) calc(11px * var(--sp-k));line-height:1.45}
.aud span::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;background:var(--sol)}
.aud .a-auto::before{background:var(--prod)}
.aud .a-done::before{background:var(--navy)}
.stage .go{display:inline-flex;align-items:center;gap:calc(4px * var(--sp-k));margin-top:calc(9px * var(--sp-k));font-size:var(--fs-label);font-weight:700;color:var(--sol)}
.stage .go svg{width:11px;height:11px;stroke:currentColor;stroke-width:2.6;fill:none}
.stage .ok{display:inline-block;margin-top:calc(9px * var(--sp-k));font-size:var(--fs-label);font-weight:700;color:var(--accent-ink);background:var(--accent-soft);border-radius:var(--shape-pill);padding:calc(3px * var(--sp-k)) calc(10px * var(--sp-k))}
/* --- 図の外枠パネル（FPGA／テスト自動化／AI補 共通） --- */
.dom-panel{border:1px solid var(--line);background:#fff;border-radius:var(--rd-lg);padding:calc(30px * var(--sp-k)) calc(34px * var(--sp-k));box-shadow:var(--sh-1);overflow-x:auto}
.dom-panel+.cards,.dom-panel+.sec-note{margin-top:calc(34px * var(--sp-k))}
.dom-panel .dom-s{text-align:center;font-size:var(--fs-label);color:var(--accent-ink);font-weight:700;margin-bottom:calc(22px * var(--sp-k))}
/* ---- 役割B-2｜兄弟ページ切替タブ（旧 .cat-tabs / .subnav を統一） ---- */
.page-tabs{background:#fff;border-bottom:1px solid var(--line)}
.page-tabs .wrap{display:flex;justify-content:center;flex-wrap:wrap}
.page-tabs nav{display:flex;gap:2px;flex-wrap:wrap;justify-content:center}
.page-tabs nav a{padding:calc(16px * var(--sp-k)) calc(20px * var(--sp-k));font-size:var(--fs-ui);font-weight:700;color:var(--ink-soft);border-bottom:3px solid transparent;transition:.15s}
.page-tabs nav a:hover{color:var(--navy)}
.page-tabs nav a.on{color:var(--navy);border-color:var(--navy)}
.page-tabs.sol nav a:hover,.page-tabs.sol nav a.on{color:var(--sol)}
.page-tabs.sol nav a.on{border-color:var(--sol)}
.page-tabs.prod nav a:hover,.page-tabs.prod nav a.on{color:var(--prod)}
.page-tabs.prod nav a.on{border-color:var(--prod)}
/* 役割A｜ボタンだけがクリッカブルなときの誘導＝角丸矩形の塗りボタン（B案：矩形＝押せる） */
.acts{display:flex;gap:calc(10px * var(--sp-k));flex-wrap:wrap;margin-top:calc(16px * var(--sp-k))}
.cardbtn{display:inline-flex;align-items:center;gap:calc(7px * var(--sp-k));background:var(--navy);color:#fff;border-radius:var(--rd-btn);padding:calc(11px * var(--sp-k)) calc(20px * var(--sp-k));font-size:var(--fs-ui);font-weight:700;line-height:1.4;transition:.15s}
.cardbtn:hover{filter:brightness(.92)}
.cardbtn svg{width:12px;height:12px;stroke:currentColor;stroke-width:2.6;fill:none;flex:none}
.cardbtn.sol{background:var(--sol)}
.cardbtn.prod{background:var(--prod)}
.cardbtn.ghost{background:#fff;color:var(--navy);border:1.5px solid color-mix(in oklab,var(--navy) 30%,#fff)}
.cardbtn.sol.ghost{color:var(--sol);border-color:color-mix(in oklab,var(--sol) 30%,#fff)}
.cardbtn.prod.ghost{color:var(--prod);border-color:color-mix(in oklab,var(--prod) 30%,#fff)}
/* ghost の hover は地の色で塗る（.btn-ghost:hover と同じ振る舞い）。元の「枠だけ濃くする」hover は .sol.ghost / .prod.ghost と同じ詳細度で前にあり効いていなかった（2026-09-16 クライアント指摘 S19 の続き） */
.cardbtn.ghost:hover{background:var(--navy);color:#fff;border-color:var(--navy);filter:none}
.cardbtn.sol.ghost:hover{background:var(--sol);border-color:var(--sol)}
.cardbtn.prod.ghost:hover{background:var(--prod);border-color:var(--prod)}
/* ---- navy-section overrides + faint grid ---- */
.bg-navy::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
background-size:108px 108px,108px 108px;
-webkit-mask:radial-gradient(900px 460px at 78% 0%,#000,transparent 72%);mask:radial-gradient(900px 460px at 78% 0%,#000,transparent 72%)}
.bg-navy .wrap{position:relative;z-index:1}
.bg-navy .sec-head .en{color:#8fb6f0}
.bg-navy .sec-head .en::before{color:#8fb6f0}
.bg-navy .sec-head h2{color:#fff}
.bg-navy .sec-head .sub{color:#dbe8fb}
.bg-navy .more{color:#fff}
/* ---- twin detail sections: navy top rule + matching icon (WHAT IS と連動) ---- */
.theme-sol{border-top:3px solid var(--sol)}
.theme-prod{border-top:3px solid var(--prod)}
.sec-lead{display:flex;align-items:flex-start;gap:calc(18px * var(--sp-k))}
.sec-ico{width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;flex:none;margin-top:calc(3px * var(--sp-k))}
.sec-ico svg{width:28px;height:28px;stroke-width:1.7;fill:none;stroke:#fff}
.theme-sol .sec-ico{background:var(--sol)}
.theme-prod .sec-ico{background:var(--prod)}
.theme-sol .sec-head .en{color:var(--sol)}
.theme-sol .sec-head .en::before{color:var(--sol)}
.theme-prod .sec-head .en{color:var(--prod)}
.theme-prod .sec-head .en::before{color:var(--prod)}
/* ⑤ 受託=緑面 / 製品=青(ティール)面 — 互いに、また他コンテンツと差をつける */
#solutions{background:#f2f9f5}
#product-sales{background:color-mix(in oklab,var(--prod-bg) 8%,#fff)}
/* ⑥ 受託セクション内の青→緑へ統一 */
#solutions .more{color:var(--sol)}
#solutions .reasons-head b{color:var(--sol)}
#solutions .ach-head :is(h3,h4,h5,h6){color:var(--sol)}
#solutions .ach-head .ln{background:color-mix(in oklab,var(--sol) 24%,#fff)}
#solutions .ach-col h5{color:var(--sol)}
#solutions .ach-panel .ach-col{border-bottom-color:color-mix(in oklab,var(--sol) 14%,#fff)}
/* ⑦ 製品セクションの青系アクセントをティール(--prod)へ寄せ、ベースnavyと分離 */
#product-sales .more{color:var(--prod)}
#product-sales .psearch-sbtn{background:var(--prod)}
#product-sales .psearch-sbtn:hover{background:color-mix(in oklab,var(--prod) 86%,#000)}
#product-sales .ach-head :is(h3,h4,h5,h6){color:var(--prod)}
#product-sales .ach-col h5{color:var(--prod)}
#product-sales .ach-col h5::before{background:var(--prod)}
/* 製品セクションの「特徴」ポイントカラーをティールへ */
#product-sales .reasons-head b{color:var(--prod)}
/* WHAT IS セクション背景は白、デュアルカードにセクション同調の背景色 */
section#about.bg-soft{background:#fff}
#about .dual .card.sol{background:#f2f9f5}
#about .dual .card.prod{background:color-mix(in oklab,var(--prod-bg) 8%,#fff)}
/* H4サブブロック（対応実績/メーカー面）をセクション色に */
#solutions .ach-panel{background:#e7f4ed}
#product-sales .ach-panel{background:color-mix(in oklab,var(--prod-bg) 13%,#fff)}
/* テクノロジーリストを少し高く（業界カードと高さを揃える） */
#discovery .tech-li{padding-top:calc(18px * var(--sp-k));padding-bottom:calc(18px * var(--sp-k))}
.cat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:calc(18px * var(--sp-k));transition:.18s;position:relative;overflow:hidden}
.cat:hover{border-color:var(--navy);transform:translateY(-3px);box-shadow:0 20px 40px -28px rgba(0,50,120,.5)}
.cat .thumb{width:100%;aspect-ratio:16/10;margin-bottom:calc(13px * var(--sp-k))}
.cat .nm{font-weight:700;font-size:var(--fs-body)}
.cat .cnt{font-family:"Roboto Condensed",sans-serif;font-size:var(--fs-label);color:var(--ink-soft);margin-top:calc(3px * var(--sp-k))}
.cat .cnt b{color:var(--accent);font-size:var(--fs-sub)}
.cat .tags{margin-top:calc(10px * var(--sp-k));display:flex;flex-wrap:wrap;gap:calc(6px * var(--sp-k))}
.cat .tags span{font-size:var(--fs-label);background:var(--bg-soft);color:var(--ink-soft);padding:calc(3px * var(--sp-k)) calc(8px * var(--sp-k));border-radius:var(--shape-pill)}
/* ---------- discovery ---------- */
.disc-col{background:#fff;color:var(--ink);border:1px solid rgba(255,255,255,.1);border-radius:var(--rd-lg);padding:calc(30px * var(--sp-k)) calc(32px * var(--sp-k));box-shadow:0 34px 64px -38px rgba(0,16,52,.8)}
.disc-col .hd{display:flex;align-items:center;gap:calc(10px * var(--sp-k));margin-bottom:calc(16px * var(--sp-k))}
.disc-col h3{font-size:calc(22px * var(--fs-k));font-weight:900;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:calc(8px * var(--sp-k))}
/* --- 対応環境・ツールの白カード（MBD／スマートデバイスアプリ 共通） --- */
.toolbox{border:1px solid var(--line);background:#fff;border-radius:var(--rd-md);padding:calc(22px * var(--sp-k)) calc(26px * var(--sp-k)) calc(24px * var(--sp-k));box-shadow:var(--sh-1)}
.toolbox :is(h3,h4,h5,h6){display:flex;align-items:center;gap:calc(10px * var(--sp-k));font-size:var(--fs-cardsub);font-weight:900;margin-bottom:calc(14px * var(--sp-k))}
.toolbox .chips span{font-family:"Roboto Condensed",sans-serif;font-size:var(--fs-sub);font-weight:600;color:var(--ink-soft);background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--shape-pill);padding:calc(7px * var(--sp-k)) calc(15px * var(--sp-k));letter-spacing:.01em}
/* discovery v2 — image tiles (業界) + icon list (テクノロジー) */
#discovery .disc-grid{align-items:stretch}
#discovery .disc-col{display:flex;flex-direction:column}
#discovery .ind-grid,#discovery .tech-list{flex:1;align-content:start}
#discovery .disc-col{padding:calc(30px * var(--sp-k)) calc(32px * var(--sp-k)) calc(34px * var(--sp-k))}
#discovery .disc-col .hd{gap:calc(13px * var(--sp-k));margin-bottom:calc(24px * var(--sp-k))}
.disc-col .hd .hi{width:46px;height:46px;border-radius:12px;background:var(--blue-50);display:flex;align-items:center;justify-content:center;flex:none}
.disc-col .hd .hi svg{width:25px;height:25px;stroke:var(--navy);stroke-width:1.7;fill:none}
.ind-tile{display:flex;flex-direction:column;gap:calc(9px * var(--sp-k));cursor:pointer}
.ind-tile .ph{aspect-ratio:4/3;border-radius:11px;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.ind-tile .ph.filled::after{display:none}
.ind-tile .ph.filled img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ind-tile:hover .ph{transform:translateY(-3px);box-shadow:var(--sh-2)}
.ind-tile .lb{display:flex;align-items:center;justify-content:space-between;gap:calc(6px * var(--sp-k));font-size:var(--fs-label);font-weight:700;color:var(--ink);line-height:1.4}
.ind-tile .lb svg{width:13px;height:13px;stroke:var(--navy);stroke-width:2.4;fill:none;flex:none;transition:transform .16s var(--ease)}
.ind-tile:hover .lb{color:var(--navy)}
.ind-tile:hover .lb svg{transform:translateX(2px)}
.tech-li{display:flex;align-items:center;gap:calc(13px * var(--sp-k));padding:calc(14px * var(--sp-k)) calc(16px * var(--sp-k));border:1px solid var(--line);border-radius:11px;background:#fff;transition:.16s var(--ease)}
.tech-li:hover{border-color:var(--navy);background:var(--blue-50);transform:translateY(-2px);box-shadow:var(--sh-1)}
.tech-li .ti{width:32px;height:32px;flex:none;display:flex;align-items:center;justify-content:center}
.tech-li .ti svg{width:24px;height:24px;stroke:var(--navy);stroke-width:1.65;fill:none}
.tech-li .tn{flex:1;font-size:var(--fs-ui);font-weight:700;color:var(--ink);line-height:1.35}
.tech-li .tc{width:15px;height:15px;stroke:var(--ink-mute);stroke-width:2.4;fill:none;flex:none;transition:transform .16s var(--ease)}
.tech-li:hover .tc{stroke:var(--navy);transform:translateX(2px)}
/* ---------- one-stop intro (dual) ---------- */
.intro-head{text-align:center;max-width:44em;margin:0 auto calc(34px * var(--sp-k))}
.intro-head .en{font-family:"Roboto Condensed",sans-serif;font-size:var(--fs-label);letter-spacing:.14em;color:var(--navy)}
.intro-head h2{font-size:calc(35px * var(--fs-k));font-weight:900;margin-top:calc(8px * var(--sp-k));line-height:1.4;text-wrap:balance}
.intro-head p{font-size:var(--fs-body);color:var(--ink-soft);margin-top:calc(14px * var(--sp-k));line-height:1.85}
.dual .card{border:1px solid var(--hair);border-radius:var(--rd-lg);padding:calc(32px * var(--sp-k));background:#fff;display:flex;flex-direction:column;box-shadow:var(--sh-1);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.dual .card:hover{box-shadow:var(--sh-2);transform:translateY(-3px)}
.dual .card.sol{border-top:4px solid var(--sol)}
.dual .card.prod{border-top:4px solid var(--prod)}
.dual .card .en{font-family:"Roboto Condensed",sans-serif;font-size:var(--fs-label);font-weight:600;letter-spacing:.1em;color:var(--navy)}
.dual .card.sol .en{color:var(--sol)}
.dual .card.prod .en{color:var(--prod)}
.dual .card h3{font-size:calc(28px * var(--fs-k));font-weight:900}
.dual .card .lead{font-size:var(--fs-body);color:var(--ink-soft);margin-top:calc(12px * var(--sp-k));flex:1;font-weight:500}
.dual .card .top{display:flex;align-items:flex-start;gap:calc(15px * var(--sp-k));margin-bottom:2px}
.dual .card .top .ic{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:none}
.dual .card.sol .top .ic{background:var(--sol)}
.dual .card.prod .top .ic{background:var(--prod)}
.dual .card .top .ic svg{width:26px;height:26px;stroke-width:1.7;fill:none;stroke:#fff}
.dual .card.sol .more{color:var(--sol)}
.dual .card.prod .more{color:var(--prod)}
/* ---------- WHAT IS — enriched intro (ref design, in-system) ---------- */
.whatis-top{display:grid;grid-template-columns:0.8fr 1.2fr;gap:calc(52px * var(--sp-k));align-items:center}/* 0.92fr 1.08fr → 統計カードの本文が 3 行に折れるので右列を広げた（2026-09-16 クライアント指摘「横幅拡げる」） */
@media(max-width:900px){.whatis-top{grid-template-columns:1fr;gap:calc(34px * var(--sp-k))}}/* 2 列のままだと h2 が「製品調/達」で割れる（620 幅で確認）。統計カードが 1 列になる 900px で縦積みに（2026-09-16） */
.whatis-lead .en{display:inline-flex;align-items:baseline;gap:calc(9px * var(--sp-k));font-family:"Roboto Condensed",sans-serif;font-size:var(--fs-sub);font-weight:600;letter-spacing:.16em;color:var(--navy)}
.whatis-lead .en::before{content:"/";font-family:"Roboto Condensed",sans-serif;font-weight:700;font-size:calc(24px * var(--fs-k));line-height:1;letter-spacing:0;color:var(--navy)}
.whatis-lead h2{font-size:calc(35px * var(--fs-k));font-weight:900;margin-top:calc(11px * var(--sp-k));line-height:1.34;text-wrap:balance}
.whatis-lead p{font-size:var(--fs-body);color:var(--ink-soft);margin-top:calc(20px * var(--sp-k));line-height:1.95;max-width:31em;font-weight:500}
.stat-card{border:1px solid var(--hair);background:#fff;border-radius:var(--rd-md);padding:calc(22px * var(--sp-k)) calc(24px * var(--sp-k)) calc(20px * var(--sp-k));box-shadow:var(--sh-1);display:flex;gap:calc(16px * var(--sp-k));align-items:flex-start;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.stat-card .si{width:46px;height:46px;border-radius:12px;background:var(--blue-50);display:flex;align-items:center;justify-content:center;flex:none;margin-top:calc(3px * var(--sp-k))}
.stat-card .si svg{width:24px;height:24px;stroke:var(--navy);stroke-width:1.6;fill:none}
.stat-card .sk{font-size:var(--fs-label);color:var(--ink);font-weight:600}
.stat-card .sv{font-family:"Roboto Condensed",sans-serif;font-weight:700;font-size:calc(40px * var(--fs-k));line-height:1.05;color:var(--navy);margin-top:1px;letter-spacing:.01em;display:flex;align-items:baseline;gap:calc(3px * var(--sp-k))}
.stat-card .sv u{font-size:calc(18px * var(--fs-k));font-weight:700;text-decoration:none;color:var(--ink-soft)}
.stat-card .sd{font-size:var(--fs-body);color:var(--ink);margin-top:calc(9px * var(--sp-k));line-height:1.7}
.stat-note{text-align:right;font-size:var(--fs-label);color:var(--ink-mute);margin-top:calc(13px * var(--sp-k));font-family:"Roboto Condensed",sans-serif;letter-spacing:.02em}
/* dual cards — image + sub-feature grid + cta (scoped to #about) */
#about .dual{margin-top:calc(80px * var(--sp-k))}
#about .dual .card .lead{flex:none}
#about .dual .card .ph{width:100%;aspect-ratio:16/7;margin:calc(20px * var(--sp-k)) 0 2px;border-radius:var(--rd-md)}
#about .dual .card .card-img{width:100%;aspect-ratio:16/9;margin:calc(20px * var(--sp-k)) 0 2px;border-radius:var(--rd-md);object-fit:cover;display:block;border:1px solid var(--hair)}
.feats{margin-bottom:calc(26px * var(--sp-k))}
.feat-li{display:flex;gap:calc(11px * var(--sp-k));align-items:flex-start}
.feat-li .fi{width:40px;height:40px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none}
.feat-li .fi svg{width:19px;height:19px;stroke-width:1.7;fill:none}
.card.sol .feat-li .fi{background:var(--sol-soft)}
.card.sol .feat-li .fi svg{stroke:var(--sol)}
.card.prod .feat-li .fi{background:var(--prod-soft)}
.card.prod .feat-li .fi svg{stroke:var(--prod)}
.feat-li .ft{font-size:var(--fs-body);color:var(--ink-soft);line-height:1.55;font-weight:600;padding-top:2px}
#about .dual .card .cta,#about .dual .card .more{margin-top:auto}
#about .dual .card .more{padding-top:calc(4px * var(--sp-k))}
.btn-sol{background:var(--sol);color:#fff}
.btn-sol:hover{filter:brightness(.94)}
.btn-prod{background:var(--prod);color:#fff}
.btn-prod:hover{filter:brightness(.94)}
#about .dual .card .cta .btn{width:100%;justify-content:space-between;padding:calc(16px * var(--sp-k)) calc(22px * var(--sp-k));font-size:var(--fs-ui);border-radius:var(--rd-btn)}
#about .dual .card .cta .btn svg{width:18px;height:18px;stroke:#fff;flex:none}
/* 選ばれる理由 */
.reasons{margin-top:calc(72px * var(--sp-k));border-top:1px solid var(--line);padding-top:calc(64px * var(--sp-k))}
.reasons-head{text-align:center;font-size:calc(28px * var(--fs-k));font-weight:900;margin-bottom:calc(36px * var(--sp-k));letter-spacing:-0.03em}
.reasons-head b{color:var(--navy)}
.reason{text-align:center;display:flex;flex-direction:column;align-items:center;gap:calc(15px * var(--sp-k))}
/* .reason を並べる .cards（.loose）は .reason-grid: 項目の間にセパレーター（2026-09-16 クライアント指摘 S16、ユーザー裁定「セパレーター」）。
項目の幅・gap はデザインのまま（padding で狭めると見出しが折れる）。線は疑似要素で gap の中央に置く。::before＝左の線、::after＝上の線。列数は .cards の --cols と同じ規則で切り替える */
.cards.reason-grid{gap:calc(var(--gap-lg) * 2)}/* 項目の間隔は .loose の倍（2026-09-16 ユーザー裁定「倍にして」）。.cards.loose より詳細度を落とさない */
.reason-grid .reason{position:relative}
.reason-grid .reason::before,.reason-grid .reason::after{content:"";position:absolute;background:var(--line);display:none}
.reason-grid .reason::before{top:0;bottom:0;left:calc(var(--gap-lg) * -1);width:1px}
.reason-grid .reason::after{left:0;right:0;top:calc(var(--gap-lg) * -1);height:1px}
.reason-grid.c4 .reason:not(:nth-child(4n+1))::before,.reason-grid.c3 .reason:not(:nth-child(3n+1))::before{display:block}
.reason-grid.c4 .reason:nth-child(n+5)::after,.reason-grid.c3 .reason:nth-child(n+4)::after{display:block}
.reason-grid.c2 .reason:not(:nth-child(2n+1))::before{display:block}.reason-grid.c2 .reason:nth-child(n+3)::after{display:block}/* 2 列（solution-physicalai「OUR SOLUTION」）。c3/c4 だけだったので線が出ていなかった（2026-09-29 指摘） */
/* 狭幅の切り替えは .cards.reason-grid … で上の c3/c4 の規則（:not(:nth-child()) を含むので詳細度 0,4,1）と同じ詳細度にし、後勝ちで上書きする */
@media(max-width:900px){.cards.reason-grid .reason:nth-child(n)::before,.cards.reason-grid .reason:nth-child(n)::after{display:none}.cards.reason-grid .reason:nth-child(even)::before{display:block}.cards.reason-grid .reason:nth-child(n+3)::after{display:block}}
@media(max-width:640px){.cards.reason-grid .reason:nth-child(n)::before{display:none}.cards.reason-grid .reason:nth-child(n+2)::after{display:block}}
.reason .ri{width:66px;height:66px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-1)}
.reason .ri svg{width:30px;height:30px;stroke:var(--navy);stroke-width:1.55;fill:none}
/* アイコンの代わりに番号を入れる場合 */
.reason .ri b{font-family:"Roboto Condensed",sans-serif;font-size:calc(24px * var(--fs-k));font-weight:700;color:var(--navy);letter-spacing:.04em}
/* 見出しの上に置く連番キッカー（01 開発知見 など） */
.reason .rk{font-family:"Roboto Condensed",sans-serif;font-size:var(--fs-label);font-weight:700;letter-spacing:.1em;color:var(--ink-mute);margin:-2px 0 calc(-9px * var(--sp-k))}
.reason :is(h3,h4,h5,h6){font-size:var(--fs-card);font-weight:900;color:var(--navy)}
/* 番号ラベルを見出しに入れる場合（番号を折り返しに巻き込まない） */
.reason :is(h3,h4,h5,h6):has(.stp){display:flex;align-items:baseline;justify-content:center;gap:calc(9px * var(--sp-k))}
.reason p{font-size:var(--fs-body);color:var(--ink-soft);line-height:1.75}
/* テーマ色（受託＝緑／製品＝ティール）。ページCSSで #id 上書きしない */
.reason.sol :is(h3,h4,h5,h6){color:var(--sol)}
.reason.sol .ri svg{stroke:var(--sol)}
.reason.sol .ri b{color:var(--sol)}
.reason.prod :is(h3,h4,h5,h6){color:var(--prod)}
.reason.prod .ri svg{stroke:var(--prod)}
.reason.prod .ri b{color:var(--prod)}
/* 選ばれる理由 — WHAT IS のみ一回り大きく */
#about .reasons{padding-top:calc(74px * var(--sp-k))}
#about .reasons-head{font-size:calc(28px * var(--fs-k));margin-bottom:calc(42px * var(--sp-k))}
#about .reason .ri{width:82px;height:82px}
#about .reason .ri svg{width:38px;height:38px}
#about .reason :is(h3,h4,h5,h6){font-size:calc(22px * var(--fs-k))}
#about .reason p{font-size:var(--fs-body);line-height:1.8}
/* ---------- news ---------- */
.news-grid{display:grid;grid-template-columns:3fr 2fr;gap:calc(18px * var(--sp-k))}
.news-feats .news-feat .thumb{aspect-ratio:16/9}
.news-feat{border:1px solid var(--hair);background:#fff;border-radius:var(--rd-lg);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-1);transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.news-feat:hover{border-color:var(--navy);box-shadow:var(--sh-2);transform:translateY(-2px);}
.news-feat .thumb{width:100%;aspect-ratio:16/7}
.news-feat .bd{padding:calc(22px * var(--sp-k)) calc(24px * var(--sp-k))}
.news-list{display:flex;flex-direction:column;gap:0}
.nrow{display:flex;gap:calc(14px * var(--sp-k));align-items:flex-start;padding:calc(15px * var(--sp-k)) calc(4px * var(--sp-k));border-bottom:1px solid var(--line);transition:.14s}
.nrow:hover{background:#fff;border-radius:10px;padding-left:calc(14px * var(--sp-k));padding-right:calc(14px * var(--sp-k))}
.nrow:last-child{border-bottom:none}
.tag-pill{font-size:var(--fs-label);font-weight:700;padding:calc(3px * var(--sp-k)) calc(9px * var(--sp-k));border-radius:var(--shape-pill);background:var(--blue-50);color:var(--navy);white-space:nowrap;flex-shrink:0;margin-top:2px}
.tag-pill.new{background:var(--accent);color:#fff}
.tag-pill.gray{background:var(--bg-soft);color:var(--ink-soft)}
.nrow .ntx{font-size:var(--fs-body);font-weight:600}
.nrow .ndate{font-family:"Roboto Condensed",sans-serif;font-size:var(--fs-label);color:var(--ink-soft);margin-top:calc(5px * var(--sp-k))}
/* ニュース行のサムネ（任意スロット。`.im`＝実画像／`.ph`＝支給待ち。置くなら行の先頭）
サムネありの行は一覧ページ向けの大きい形：画像｜（日付＋タグの .nmeta 行 → 見出し18px）の2列で
見出しの左端が全行揃う。サムネなしの行（TOP・イベント一覧）は従来のコンパクト形（タグ左）のまま */
.nrow>.ph,.nrow>.im{flex:0 0 208px;width:208px;aspect-ratio:16/9;border-radius:9px}
.nrow>.im{object-fit:cover;border:1px solid var(--hair);display:block}
.nrow>.ph span{padding:calc(3px * var(--sp-k)) calc(8px * var(--sp-k));letter-spacing:.04em}
.nrow:has(>.ph),.nrow:has(>.im){align-items:center;gap:calc(22px * var(--sp-k));padding:calc(18px * var(--sp-k)) calc(14px * var(--sp-k))}
.nrow:has(>.ph):hover,.nrow:has(>.im):hover{background:var(--bg-soft)}
.nrow:has(>.ph) .ntx,.nrow:has(>.im) .ntx{font-size:var(--fs-card);font-weight:700;line-height:1.7;text-wrap:pretty}
/* 日付＋カテゴリタグのメタ行（ニュース一覧の行と詳細ヘッドの2か所で使うので単体の部品） */
.nmeta{display:flex;align-items:center;flex-wrap:wrap;gap:calc(12px * var(--sp-k));margin-bottom:calc(8px * var(--sp-k))}
.nmeta .ndate{font-family:"Roboto Condensed",sans-serif;font-size:var(--fs-sub);color:var(--ink-soft);margin-top:0}
.nmeta .tag-pill{margin-top:0}
@media(max-width:640px){.nrow>.ph,.nrow>.im{flex:0 0 128px;width:128px}.nrow>.ph span{display:none}
.nrow:has(>.ph),.nrow:has(>.im){gap:calc(16px * var(--sp-k));padding:calc(16px * var(--sp-k)) calc(12px * var(--sp-k))}
.nrow:has(>.ph) .ntx,.nrow:has(>.im) .ntx{font-size:var(--fs-body);line-height:1.65}}
.news-feat .bd .ntitle{font-size:var(--fs-card);font-weight:900;margin-top:calc(8px * var(--sp-k));line-height:1.5}
.news-feat .bd .ndate{font-family:"Roboto Condensed",sans-serif;font-size:var(--fs-label);color:var(--ink-soft);margin-top:calc(10px * var(--sp-k))}
/* ---------- solutions detail ---------- */
.sol-card{border:1px solid var(--hair);background:#fff;border-radius:var(--rd-md);padding:calc(22px * var(--sp-k));box-shadow:var(--sh-1);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.sol-card:hover{border-color:var(--sol);transform:translateY(-3px);box-shadow:var(--sh-2)}
.sol-card .ic{width:40px;height:40px;border-radius:10px;background:var(--sol-soft);display:flex;align-items:center;justify-content:center;margin-bottom:calc(14px * var(--sp-k))}
.sol-card .ic svg{width:21px;height:21px;stroke:var(--sol);stroke-width:1.7;fill:none}
.sol-card :is(h3,h4,h5,h6){font-size:calc(20px * var(--fs-k));font-weight:900}
.sol-card .lu{margin-top:calc(12px * var(--sp-k));display:grid}
.sol-card .lu a{display:flex;align-items:center;justify-content:space-between;gap:calc(10px * var(--sp-k));font-size:var(--fs-ui);font-weight:700;color:var(--ink-soft);padding:calc(10px * var(--sp-k)) 2px;border-bottom:1px solid var(--hair);line-height:1.5;transition:color .14s}
.sol-card .lu a:last-child{border-bottom:none}
.sol-card .lu a svg{width:13px;height:13px;stroke:var(--sol);stroke-width:2.6;fill:none;flex:none}
.sol-card .lu a:hover{color:var(--sol)}
/* figure: process-flow (上流→下流) */
.flow{display:flex;flex-wrap:wrap;gap:calc(7px * var(--sp-k)) calc(5px * var(--sp-k));justify-content:center;align-items:center;width:100%}
.flow .step{font-size:var(--fs-label);font-weight:700;color:#fff;line-height:1;padding:calc(10px * var(--sp-k)) calc(16px * var(--sp-k)) calc(10px * var(--sp-k)) calc(22px * var(--sp-k));white-space:nowrap;
clip-path:polygon(0 0,calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,0 100%,11px 50%)}
.flow .step:first-child{padding-left:calc(16px * var(--sp-k));clip-path:polygon(0 0,calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,0 100%)}
.theme-sol .flow .step{background:color-mix(in oklab,var(--sol) 80%,#fff)}
.theme-sol .flow .step.d{background:var(--sol)}
.theme-sol .flow .step.e{background:var(--navy)}
/* セクション締めのまとめテキスト（全ページ共通） */
/* 課題・現場の声チェックリスト帯（アイコン+リスト。既定は「!」、.ck で「✓」） */
.voice{border:1px solid var(--line);max-width:920px;margin:0 auto;background:#fff;border-radius:var(--rd-lg);box-shadow:var(--sh-1);padding:calc(30px * var(--sp-k)) calc(36px * var(--sp-k));display:flex;gap:calc(26px * var(--sp-k));align-items:center}
/* .wide＝内容幅いっぱい（1080）。項目が多く1行が長いページ用 */
.voice.wide{max-width:1080px}
.voice .vp{flex:none;display:flex;align-items:center;justify-content:center}
.voice .vp svg{width:200px;height:auto;padding:0 calc(20px * var(--sp-k))}
.voice .vp svg path{fill:var(--navy)}
.voice ul,.dom-panel>ul.ck{display:grid;gap:calc(12px * var(--sp-k));list-style:none}
.voice li,.dom-panel>ul.ck li{position:relative;padding-left:calc(30px * var(--sp-k));font-size:var(--fs-body);font-weight:800;line-height:1.75}
.voice li::before,.dom-panel>ul.ck li::before{content:"!";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:var(--sol);color:#fff;font-weight:900;font-size:12.5px;display:flex;align-items:center;justify-content:center}
.voice.ck li::before,.dom-panel>ul.ck li::before{content:"✓";font-size:11px}
.indp ul.ck li::before{content:"✓";width:auto;height:auto;border-radius:0;background:none;margin-top:0;font-size:calc(14px * var(--fs-k));font-weight:900;color:var(--sol)}
/* 図の強調行（結論＝図直下／問題提起＝図冒頭にも置ける。テーマ色は .sol 等の修飾で） */
.fig-close{text-align:center;font-size:calc(18px * var(--fs-k));font-weight:900;margin-top:calc(20px * var(--sp-k));text-wrap:balance}
.dom-panel>.fig-close:first-child{margin-top:0}
.fig-close.sol{color:var(--sol)}
.fig-close.prod{color:var(--prod)}
/* 強調行の中の参照記号（※）。本文と同じ大きさでは目立つのでラダー下限の16pxに落とす */
.sec-close .refmark,.fig-close .refmark{font-size:var(--fs-body);font-weight:700;vertical-align:.28em;margin:0 .1em}
/* 図の段間コネクタ（下向き矢印。アイコンは .cards.arrows と同じ「軸＋矢じり」） */
.fig-arrow{display:flex;justify-content:center;margin:calc(14px * var(--sp-k)) auto}
.fig-arrow.r{margin:0}
.fig-arrow.r svg{transform:rotate(-90deg)}
/* 左向き（エッジAI役割分担図 2026-08-16 追加） */
.fig-arrow.l{margin:0}
.fig-arrow.l svg{transform:rotate(90deg)}
.fig-arrow svg{width:26px;height:26px;stroke:var(--sol);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
/* セクション間コネクタ（境界線をまたぐ円形バッジ） */
.sec-arrow{display:flex;flex-direction:column;align-items:center;margin:calc(52px * var(--sp-k)) auto calc(-146px * var(--sp-k));position:relative;z-index:5}/* 下の負マージンはセクション余白（120px、2026-09-16 の 136% 化）に合わせて -114→-146。丸の中心が境界線に乗る（余白 − 矢印 78px の半分 26px） */
.sec-arrow::before{content:"";width:1px;height:26px;background:var(--ink-mute);opacity:.45}
.sec-arrow .c{width:52px;height:52px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);display:flex;align-items:center;justify-content:center;margin-top:-1px}
.sec-arrow .c svg{width:22px;height:22px;stroke:var(--sol);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* 図キャプション（ach-head系の小型バリアント。図内見出し専用） */
.fig-head{display:flex;align-items:center;justify-content:center;gap:calc(16px * var(--sp-k));margin-bottom:calc(24px * var(--sp-k))}
.fig-head :is(h3,h4,h5,h6){font-size:var(--fs-cardsub);font-weight:900;color:var(--ink);letter-spacing:-0.01em;flex:none;text-align:center}
.fig-head .ln{flex:1;height:1px;background:var(--line);min-width:20px;max-width:120px}
.fig-head.wide .ln{max-width:none}
.sec-close{text-align:center;font-size:calc(18px * var(--fs-k));font-weight:700;line-height:1.9;color:var(--ink);max-width:44em;margin:calc(36px * var(--sp-k)) auto 0;word-break:auto-phrase;text-wrap:balance}
/* セクション冗頭に置くとき（前のセクションの課題を受けて解決を宣言する1行） */
.sec-close.lead{margin:0 auto calc(44px * var(--sp-k))}
/* 大きいバリアント：セクションのまとめ／つなぎの一文 */
.sec-close.lg{font-size:calc(24px * var(--fs-k));font-weight:900;line-height:1.7;letter-spacing:-0.01em;max-width:40em;margin:calc(46px * var(--sp-k)) auto calc(22px * var(--sp-k))}
.sec-close.sol{color:var(--sol)}
.sec-close.prod{color:var(--prod)}
/* figure: language support */
.fig-lang{display:flex;align-items:center;gap:calc(16px * var(--sp-k))}
/* achievements — quiet index (no boxed pills) */
.ach{column-width:250px;column-gap:calc(46px * var(--sp-k));margin-top:0}
/* 対応実績：特徴ブロック配下のH4サブブロック（薄ネイビー面） */
.ach-panel{margin-top:calc(66px * var(--sp-k));background:var(--blue-50);border-radius:var(--rd-lg);padding:calc(48px * var(--sp-k))}
.ach-head{display:flex;align-items:center;justify-content:center;gap:calc(20px * var(--sp-k));flex-wrap:nowrap;margin-bottom:calc(30px * var(--sp-k))}
.ach-head :is(h3,h4,h5,h6){font-size:calc(20px * var(--fs-k));font-weight:900;color:var(--navy);letter-spacing:-0.03em;flex:none;text-align:center}
.ach-head .ln{flex:1;height:1px;background:var(--blue-100);min-width:24px}
.ach-foot{text-align:center;margin-top:calc(28px * var(--sp-k))}
.ach-foot .more{font-size:var(--fs-ui)}
.ach-panel .ach-col{border-bottom-color:var(--blue-100)}
/* セクション背景が異なるため、面と背景の「明度差」を揃える（受託=白面 / 製品=bg-soft面） */
#product-sales .ach-panel{background:color-mix(in oklab,var(--prod-bg) 13%,#fff)}
.ach-col{break-inside:avoid;background:none;border:0;box-shadow:none;border-radius:0;padding:0 0 calc(18px * var(--sp-k));margin-bottom:calc(18px * var(--sp-k));border-bottom:1px solid var(--hair)}
.ach-col h5{font-size:var(--fs-cardsub);font-weight:900;color:var(--navy);margin-bottom:calc(9px * var(--sp-k));display:flex;align-items:center;gap:calc(9px * var(--sp-k));padding:0;border:0}
.ach-col h5::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sol);flex:none}
.ach-col ul{list-style:none;display:block;font-size:var(--fs-body);line-height:1.95;color:var(--ink)}
.ach-col li{display:inline}
.ach-col li:not(:last-child)::after{content:"\30FB";color:var(--ink-mute);margin:0 1px}
/* ---------- product sales detail ---------- */
.psearch{display:flex;align-items:stretch;background:#fff;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:calc(44px * var(--sp-k))}
.psearch-cat{position:relative;display:flex;align-items:center;background:var(--bg-soft);border-right:1.5px solid var(--line);flex-shrink:0}
.psearch-cat select{appearance:none;-webkit-appearance:none;border:none;outline:none;background:transparent;font-size:var(--fs-ui);font-family:inherit;color:var(--ink);cursor:pointer;padding:calc(13px * var(--sp-k)) calc(38px * var(--sp-k)) calc(13px * var(--sp-k)) calc(16px * var(--sp-k));min-width:210px}
.psearch-cat::after{content:"";position:absolute;right:14px;top:50%;transform:translateY(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid var(--ink-soft);pointer-events:none}
.psearch-mid{display:flex;align-items:center;gap:calc(10px * var(--sp-k));flex:1;padding:0 calc(16px * var(--sp-k))}
.psearch-mid svg{width:18px;height:18px;stroke:var(--ink-soft);flex-shrink:0}
.psearch-mid input{flex:1;border:none;outline:none;font-size:var(--fs-ui);font-family:inherit;background:transparent;color:var(--ink)}
.psearch-mid input::placeholder{color:#9aa8bd}
.psearch-sbtn{display:flex;align-items:center;gap:calc(8px * var(--sp-k));background:var(--navy);color:#fff;border:none;padding:0 calc(22px * var(--sp-k));font-size:var(--fs-ui);font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap;transition:background .15s}
.psearch-sbtn:hover{background:#002e80}
.psearch-sbtn svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2}
.pcat{border:1px solid var(--hair);background:#fff;border-radius:var(--rd-md);padding:calc(22px * var(--sp-k));box-shadow:var(--sh-1);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);display:flex;flex-direction:column}
.pcat:hover{border-color:var(--prod);transform:translateY(-3px);box-shadow:var(--sh-2)}
.pcat .ic{width:40px;height:40px;border-radius:10px;background:var(--prod-soft);display:flex;align-items:center;justify-content:center;margin-bottom:calc(14px * var(--sp-k))}
.pcat .ic svg{width:21px;height:21px;stroke:var(--prod);stroke-width:1.7;fill:none}
.pcat :is(h3,h4,h5,h6){font-size:calc(20px * var(--fs-k));font-weight:900}
.pcat .subs{margin-top:calc(10px * var(--sp-k));display:flex;flex-wrap:wrap;gap:calc(6px * var(--sp-k))}
.pcat .subs span{font-size:var(--fs-sub);color:var(--ink-soft);background:#eef0f3;border-radius:var(--shape-pill);padding:calc(4px * var(--sp-k)) calc(11px * var(--sp-k))}
/* ---------- events ---------- */
.ev{border:1px solid var(--hair);background:#fff;border-radius:var(--rd-md);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-1);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.ev:hover{border-color:var(--navy);box-shadow:var(--sh-2);transform:translateY(-3px);}
.ev .top{padding:calc(18px * var(--sp-k)) calc(20px * var(--sp-k)) 0;display:flex;gap:calc(8px * var(--sp-k));align-items:center}
.ev .theme{font-size:var(--fs-label);font-weight:700;color:var(--navy);background:var(--blue-50);border-radius:var(--shape-pill);padding:calc(3px * var(--sp-k)) calc(9px * var(--sp-k))}
.ev .free{font-size:var(--fs-label);font-weight:700;color:#1f8a5b;background:#e7f6ee;border-radius:var(--shape-pill);padding:calc(3px * var(--sp-k)) calc(8px * var(--sp-k))}
.ev .bd{padding:calc(12px * var(--sp-k)) calc(20px * var(--sp-k)) calc(20px * var(--sp-k));display:flex;flex-direction:column;flex:1}
.ev :is(h3,h4,h5,h6){font-size:var(--fs-card);font-weight:900;line-height:1.5}
.ev .when{font-family:"Roboto Condensed",sans-serif;font-size:var(--fs-label);color:var(--ink-soft);margin-top:calc(10px * var(--sp-k));display:flex;align-items:center;gap:calc(9px * var(--sp-k))}
.ev p{font-size:var(--fs-body);color:var(--ink-soft);margin-top:calc(8px * var(--sp-k));flex:1}
/* ---------- banner area (campaign slot — dummy) ---------- */
.banner-band{padding:calc(26px * var(--sp-k)) 0 calc(26px * var(--sp-k))}
.promo{display:flex;align-items:center;max-width:1080px;margin:0 auto;min-height:208px;background:#021a3d;border:1px solid rgba(255,255,255,.14);border-radius:var(--rd-lg);padding:calc(26px * var(--sp-k)) calc(40px * var(--sp-k));color:#fff;overflow:hidden;position:relative;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.promo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(95deg,#02152f 0%,#02152f 38%,rgba(3,24,57,.92) 48%,rgba(3,24,57,.5) 60%,rgba(3,24,57,0) 100%)}
.promo:hover{border-color:rgba(143,182,240,.6);box-shadow:var(--sh-2);transform:translateY(-2px)}
.promo-tx{position:relative;z-index:2;flex:1;min-width:0;max-width:56%}
.promo-tag{display:inline-block;font-family:"Roboto Condensed",sans-serif;font-size:var(--fs-label);letter-spacing:.12em;background:#2766d8;color:#fff;padding:calc(4px * var(--sp-k)) calc(11px * var(--sp-k));border-radius:var(--shape-pill)}
.promo-tx :is(h3,h4,h5,h6){font-size:calc(22px * var(--fs-k));font-weight:900;margin-top:calc(9px * var(--sp-k));color:#fff}
.promo-tx p{font-size:var(--fs-body);color:rgba(255,255,255,.92);margin-top:calc(8px * var(--sp-k));max-width:42em;line-height:1.7}
.promo-link{display:inline-flex;align-items:center;gap:calc(7px * var(--sp-k));margin-top:calc(13px * var(--sp-k));font-size:var(--fs-ui);font-weight:700;color:#9fc2f5}
.promo-bg{position:absolute;top:0;right:0;height:100%;width:56%;object-fit:cover;object-position:center right;z-index:0;display:block}
.banner-foot{display:flex;align-items:center;justify-content:center;gap:calc(14px * var(--sp-k));margin-top:calc(13px * var(--sp-k))}
.promo-dots{display:flex;gap:calc(7px * var(--sp-k))}
.promo-dots i{width:7px;height:7px;border-radius:50%;background:#cdd7e6;display:block}
.promo-dots i.on{background:var(--navy);width:20px;border-radius:var(--shape-pill)}
/* ---------- KUMICO (owned media) ---------- */
.kumi{display:grid;grid-template-columns:360px 1fr;gap:calc(56px * var(--sp-k));align-items:start}
.kumi-label{font-family:"Roboto Condensed",sans-serif;font-size:var(--fs-label);font-weight:700;letter-spacing:.14em;color:var(--navy)}
.kumi-logo{width:100%;max-width:330px;height:auto;display:block;margin-top:calc(14px * var(--sp-k))}
.kumi-line{font-size:calc(18px * var(--fs-k));font-weight:900;line-height:1.55;margin-top:calc(20px * var(--sp-k))}
.kumi-intro p{font-size:var(--fs-body);color:var(--ink-soft);line-height:1.9;margin-top:calc(14px * var(--sp-k))}
.kumi-head{display:flex;align-items:center;justify-content:space-between;gap:calc(16px * var(--sp-k));flex-wrap:wrap;margin-bottom:calc(22px * var(--sp-k))}
.kumi-head h3{font-size:calc(20px * var(--fs-k));font-weight:900;display:flex;align-items:center;gap:calc(11px * var(--sp-k));letter-spacing:.01em}
.kumi-head h3::before{content:"";width:5px;height:21px;background:var(--navy);border-radius:2px}
.kumi-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:calc(18px * var(--sp-k))}
.kumi-card{border:1px solid var(--hair);display:flex;flex-direction:column;background:#fff;border-radius:var(--rd-md);overflow:hidden;box-shadow:var(--sh-1);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.kumi-card:hover{border-color:var(--navy);transform:translateY(-3px);box-shadow:var(--sh-2);}
.kumi-card .thumb{width:100%;aspect-ratio:16/10;border:0;border-radius:0;border-bottom:1px solid var(--hair)}
.kumi-card .bd{padding:calc(14px * var(--sp-k)) calc(15px * var(--sp-k)) calc(16px * var(--sp-k));display:flex;flex-direction:column;gap:calc(9px * var(--sp-k))}
.kumi-card .cat{align-self:flex-start;font-size:var(--fs-label);font-weight:700;line-height:1;padding:calc(4px * var(--sp-k)) calc(9px * var(--sp-k));border-radius:var(--shape-pill);background:var(--blue-50);color:var(--navy)}
.kumi-card .date{font-family:"Roboto Condensed",sans-serif;font-size:var(--fs-label);color:var(--ink-mute);letter-spacing:.02em}
.kumi-card .ttl{font-size:var(--fs-cardsub);font-weight:900;line-height:1.55;color:var(--ink);text-wrap:pretty}
.kumi-card img.thumb{object-fit:cover;display:block}
.kumi-card .ctags{display:flex;flex-wrap:wrap;gap:calc(6px * var(--sp-k));margin-top:calc(3px * var(--sp-k))}
.kumi-card .ctags span{font-size:var(--fs-label);color:var(--ink-soft);background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--shape-pill);padding:calc(3px * var(--sp-k)) calc(9px * var(--sp-k));font-family:"Roboto Condensed",sans-serif}
/* ---------- contact CTA ---------- */
.contact{background:var(--bg-soft);border-top:1px solid var(--line)}
.contact-inner{border:1px solid var(--line);background:#fff;border-radius:20px;padding:calc(46px * var(--sp-k)) calc(48px * var(--sp-k));text-align:center;box-shadow:0 30px 60px -44px rgba(0,50,120,.5)}
.contact-inner .en{font-family:"Roboto Condensed",sans-serif;font-size:var(--fs-label);font-weight:700;letter-spacing:.14em;color:var(--navy)}
.contact-inner h2{font-size:calc(35px * var(--fs-k));font-weight:900;margin-top:calc(10px * var(--sp-k))}
.contact-inner p{font-size:var(--fs-body);color:var(--ink-soft);margin:calc(14px * var(--sp-k)) auto 0;line-height:1.85;font-weight:500}/* max-width:48em を撤去（2026-09-08 ユーザー指示） */
.contact-actions{display:flex;gap:calc(28px * var(--sp-k));justify-content:center;flex-wrap:wrap;margin-top:calc(26px * var(--sp-k));align-items:flex-start}
.contact-actions .btn{padding:calc(15px * var(--sp-k)) calc(30px * var(--sp-k));font-size:var(--fs-ui)}
.form-cta{display:flex;flex-direction:column;align-items:flex-start;gap:calc(10px * var(--sp-k))}
.form-cta .k{font-size:var(--fs-sub);color:var(--ink-soft);font-weight:700}
.form-cta .btn{font-size:var(--fs-body);min-height:54px}
.tel{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:calc(10px * var(--sp-k));border-left:1px solid var(--line);padding-left:calc(24px * var(--sp-k));margin-left:calc(6px * var(--sp-k))}
.tel .tel-num{display:flex;flex-direction:column;justify-content:center;min-height:54px}
.tel .k{font-size:var(--fs-sub);color:var(--ink-soft);font-weight:700}
.tel .v{display:flex;align-items:center;gap:calc(11px * var(--sp-k));font-family:"Roboto Condensed",sans-serif;font-size:calc(35px * var(--fs-k));font-weight:700;color:var(--navy);line-height:1.05}
.tel .v .tel-ico{width:28px;height:28px;fill:var(--navy);stroke:none;flex:none}
.tel .o{font-size:var(--fs-label);color:var(--ink-soft)}
/* ---------- footer ---------- */
footer{background:var(--navy-deep);color:#c2d3ed;padding:calc(48px * var(--sp-k)) 0 calc(28px * var(--sp-k))}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:calc(40px * var(--sp-k));flex-wrap:wrap;padding-bottom:calc(28px * var(--sp-k));border-bottom:1px solid rgba(255,255,255,.14)}
.foot-brand{display:flex;flex-direction:column;gap:calc(14px * var(--sp-k));align-items:flex-start}
.foot-logo{height:50px;width:auto;display:block;align-self:flex-start}
.foot-brand small{font-size:var(--fs-label);line-height:1.7;color:#b6c9e6;letter-spacing:.02em}
.foot-top .logo b{color:#fff}
.foot-top .logo small{color:#b6c9e6}
.foot-cols{display:flex;gap:calc(54px * var(--sp-k));flex-wrap:wrap}
.foot-col h5{font-family:"Roboto Condensed",sans-serif;font-size:var(--fs-label);letter-spacing:.1em;color:#9bb4d9;margin-bottom:calc(12px * var(--sp-k))}
.foot-col a{display:block;font-size:var(--fs-ui);color:#dce6f6;margin-bottom:calc(9px * var(--sp-k))}
.foot-col a:hover{color:#fff}
.foot-bottom{display:flex;justify-content:space-between;gap:calc(18px * var(--sp-k));flex-wrap:wrap;margin-top:calc(24px * var(--sp-k));font-size:var(--fs-label)}
.foot-bottom .links{display:flex;gap:calc(18px * var(--sp-k));flex-wrap:wrap}
.foot-bottom .links a:hover{color:#fff}
/* ---------- hero eyebrow (simple) ---------- */
.hero-eyebrow{display:inline-flex;align-items:center;gap:calc(10px * var(--sp-k));font-family:"Roboto Condensed",sans-serif;font-size:var(--fs-sub);font-weight:600;letter-spacing:.06em;color:var(--navy)}
.hero-eyebrow::before,.hero-eyebrow::after{content:"";width:26px;height:2px;background:var(--navy)}
/* ---------- subblock (特徴 / 対応実績) ---------- */
.subblock{border:1px solid var(--line);border-radius:var(--rd-lg);padding:calc(42px * var(--sp-k)) calc(40px * var(--sp-k)) calc(46px * var(--sp-k));margin-top:calc(48px * var(--sp-k));background:#fff}
/* frameless variant — matches WHAT IS「選ばれる理由」ブロック */
.subblock.plain{border:none;border-radius:0;background:transparent;padding:calc(46px * var(--sp-k)) 0 0;margin-top:calc(52px * var(--sp-k));border-top:1px solid var(--line)}
.subblock.plain .reasons-head{margin-bottom:calc(36px * var(--sp-k))}
.subblock.plain .sb-foot{text-align:center;margin-top:calc(34px * var(--sp-k))}
/* セクション末尾の誘導ボタン（products-top.css から共通へ移設）。中央寄せの「〜の詳細」「〜をもっと見る」は .more ではなく .sb-cta ＋ .btn。色はそのセクションのテーマ（受託 .btn-sol／製品 .btn-prod／無色 .btn-navy）。2026-09-16 クライアント指摘 S17 */
.sb-cta{text-align:center;margin-top:calc(38px * var(--sp-k))}
.sb-cta .btn{border-radius:var(--rd-btn);padding:calc(15px * var(--sp-k)) calc(30px * var(--sp-k));font-size:var(--fs-ui)}
.sb-cta .btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.4;fill:none;flex:none}/* 山形（2026-09-16 ユーザー指示） */
/* 兄弟カテゴリタイル .sib（category.css から共通へ移設。値はそのまま。製品分類の一覧のほか、受託コラムの記事の後のフォームファクターのカードでも使う。2026-10-06） */
.sib a{display:flex;align-items:center;gap:calc(12px * var(--sp-k));background:#fff;border:1px solid var(--line);border-radius:11px;padding:calc(17px * var(--sp-k)) calc(18px * var(--sp-k));font-weight:700;font-size:var(--fs-ui);transition:.16s var(--ease)}
.sib a .ic{width:36px;height:36px;border-radius:9px;background:var(--prod-soft);display:flex;align-items:center;justify-content:center;flex:none}
.sib a .ic svg{width:20px;height:20px;stroke:var(--prod);stroke-width:1.7;fill:none}
.sib a:hover{border-color:var(--prod);transform:translateY(-2px);box-shadow:var(--sh-1)}
.sib a.on{border-color:var(--prod);box-shadow:inset 0 0 0 1px var(--prod)}
@media(max-width:640px){.sib{grid-template-columns:1fr}}
.subblock h3{font-size:calc(24px * var(--fs-k));font-weight:900;letter-spacing:.01em}
/* ---------- events fix ---------- */
.ev .thumb{width:100%;aspect-ratio:16/8}
.ev .free{color:var(--navy);background:var(--blue-50)}
.ev .status{font-size:var(--fs-label);font-weight:700;color:#1f8a5b;background:#e7f6ee;border-radius:var(--shape-pill);padding:calc(3px * var(--sp-k)) calc(8px * var(--sp-k));margin-left:auto}
/* ---------- features restructure ---------- */
.feat-row1{margin-bottom:calc(16px * var(--sp-k))}
.feat-row1 .fbanner{grid-column:span 2}
.feat-row1 .fsm{align-self:stretch}
.f-cat{display:inline-block;font-size:var(--fs-label);font-weight:700;color:var(--navy);background:var(--blue-50);border:1px solid var(--blue-100);border-radius:var(--shape-pill);padding:calc(3px * var(--sp-k)) calc(10px * var(--sp-k))}
.fsm{border:1px solid var(--line);background:#fff;border-radius:var(--rd-md);overflow:hidden;box-shadow:var(--sh-1);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);display:block;padding:0}
.fsm:hover{border-color:var(--navy);transform:translateY(-3px);box-shadow:var(--sh-2)}
.fsm .thumb{width:100%;aspect-ratio:16/8}
.fsm .bd{padding:calc(18px * var(--sp-k)) calc(20px * var(--sp-k))}
.fsm :is(h3,h4,h5,h6){font-size:var(--fs-card);font-weight:900;margin-top:calc(9px * var(--sp-k))}
.fsm p{font-size:var(--fs-body);color:var(--ink-soft);margin-top:calc(7px * var(--sp-k));line-height:1.7}
/* ---------- KUMICO tags ---------- */
.kumi-tags{display:flex;flex-wrap:wrap;gap:calc(7px * var(--sp-k));margin-top:calc(18px * var(--sp-k))}
.kumi-tags span{font-size:var(--fs-label);color:var(--ink-soft);background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--shape-pill);padding:calc(3px * var(--sp-k)) calc(10px * var(--sp-k));font-family:"Roboto Condensed",sans-serif}
@media(max-width:980px){.feat-row1,.feat-row2{grid-template-columns:1fr}.feat-row1 .fbanner{grid-column:auto}}
@media(max-width:1100px){.sol4,.ach{grid-template-columns:repeat(2,1fr)}}
@media(max-width:980px){
h1.hero-h{font-size:calc(28px * var(--fs-k))}
.hero{padding:calc(54px * var(--sp-k)) 0 calc(50px * var(--sp-k))}
section.block{padding:calc(84px * var(--sp-k)) 0}
.sec-arrow{margin:calc(20px * var(--sp-k)) auto calc(-110px * var(--sp-k))}/* 余白 84px に合わせて -88→-110 */
.block-lg{padding:calc(96px * var(--sp-k)) 0}
.block-sm{padding:calc(64px * var(--sp-k)) 0}
.sec-head h2{font-size:calc(24px * var(--fs-k))}
.tel{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:calc(18px * var(--sp-k));margin-left:0;align-items:center;text-align:center}
}
/* ---- unified tag system（分類・状態ラベル＝ピル。B案） ---- */
.tag-pill,.f-cat,.ev .theme,.ev .free,.ev .status,.nmeta .status,.promo-tag{display:inline-flex;align-items:center;font-size:var(--fs-label);font-weight:700;line-height:1;padding:calc(4px * var(--sp-k)) calc(10px * var(--sp-k));border-radius:var(--shape-pill);letter-spacing:.02em;border:1px solid transparent;white-space:nowrap}
.tag-pill{background:var(--blue-50);color:var(--navy);border-color:var(--blue-100);margin-top:2px}
.tag-pill.new{background:var(--accent);color:#fff;border-color:transparent}
.tag-pill.gray{background:var(--bg-soft);color:var(--ink-soft);border-color:var(--line)}
.f-cat{background:var(--blue-50);color:var(--navy);border-color:var(--blue-100)}
.ev .theme{background:var(--blue-50);color:var(--navy);border-color:var(--blue-100)}
.ev .free{background:var(--bg-soft);color:var(--ink-soft);border-color:var(--line)}
/* 状態ピル（受付中等）はイベントカードと詳細ヘッドのメタ行で同じ見た目。右寄せはカード内だけ */
.ev .status,.nmeta .status{background:#e7f6ee;color:#1f8a5b;border-color:transparent}
.ev .status{margin-left:auto}
/* 終了・受付終了の状態（イベント一覧のアーカイブ。状態ラベルなのでピルのまま弱める） */
.ev .status.end{background:var(--bg-soft);color:var(--ink-mute);border-color:var(--line)}
/* ページャ（円形アイコンバッジはボタン形B案の例外）。既定はベースnavy／`.prod` で製品ティール。
中カテゴリ・ニュース一覧・イベント一覧の3ページで使うため category.css から昇格（2026-08-28） */
.pager{display:flex;gap:calc(9px * var(--sp-k));justify-content:center;align-items:center;margin-top:calc(38px * var(--sp-k))}
.pager a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:"Roboto Condensed",sans-serif;font-size:var(--fs-ui);font-weight:700;color:var(--ink-soft);background:#fff;transition:.14s}
.pager a svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.2;fill:none}
.pager a.on{background:var(--navy);border-color:var(--navy);color:#fff}
.pager a:hover:not(.on){border-color:var(--navy);color:var(--navy)}
.pager.prod a.on{background:var(--prod);border-color:var(--prod)}
.pager.prod a:hover:not(.on){border-color:var(--prod);color:var(--prod)}
.pager .gap{width:auto;border:none;background:none;color:var(--ink-mute);cursor:default}
/* 絞り込みチップの行（ニュース一覧・イベント一覧の2ページ共用）。チップ本体は既存 .f-cat */
.filter-pills{display:flex;flex-wrap:wrap;gap:calc(10px * var(--sp-k));align-items:center;margin-bottom:calc(24px * var(--sp-k))}
.filter-pills .k{font-size:var(--fs-sub);font-weight:700;color:var(--ink-mute);margin-right:calc(4px * var(--sp-k))}
.filter-pills a.f-cat{transition:.14s}
.filter-pills a.f-cat:hover{border-color:var(--navy);color:var(--navy)}
.filter-pills a.f-cat.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.promo-tag{background:#2766d8;color:#fff;border-color:transparent}
.kumi-intro h3{font-size:calc(20px * var(--fs-k))}
/* ---- feature strong = banner style ---- */
.fbanner{position:relative;display:block;border-radius:var(--rd-lg);overflow:hidden;box-shadow:var(--sh-1);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.fbanner:hover{box-shadow:var(--sh-2);transform:translateY(-3px)}
.fbanner .fb-media{position:absolute;inset:0;border:0;border-radius:0;align-items:flex-start;justify-content:flex-end;padding:calc(14px * var(--sp-k))}
.fbanner .fb-media::after{display:none}
.fbanner img.fb-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;padding:0}
.fsm img.thumb{object-fit:cover;display:block}
.fbanner .fb-overlay{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(34px * var(--sp-k)) calc(36px * var(--sp-k));background:linear-gradient(180deg,rgba(2,26,61,0) 20%,rgba(2,26,61,.5) 56%,rgba(2,26,61,.92) 100%);color:#fff}
.fbanner :is(h3,h4,h5,h6){font-size:calc(28px * var(--fs-k));font-weight:900;margin-top:calc(13px * var(--sp-k));color:#fff;line-height:1.4;text-wrap:balance}
.fbanner p{font-size:var(--fs-body);color:rgba(255,255,255,.92);margin-top:calc(11px * var(--sp-k));max-width:34em;line-height:1.7}
.fbanner .f-cat{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.34);align-self:flex-start}
/* 非リンク版（タグ＋見出しを写真に重ねるだけの面）。
押しても何も起きないので浮かせない。本文がなく高さが出ないため比率で決める */
.fbanner.static{aspect-ratio:16/9;cursor:default;border-radius:var(--rd-md)}
.fbanner.static:hover{transform:none;box-shadow:var(--sh-1)}
/* 幅の狭い面（2列）に並べるので、見出しは特集バナー（28px）より1段下げる */
.fbanner.static :is(h3,h4,h5,h6){font-size:calc(22px * var(--fs-k));margin-top:calc(11px * var(--sp-k))}
/* 本文・箰条書きまで写真に載せる場合。中身で高さが決まるので比率を外し、地を濃くする */
.fbanner.static.rich{aspect-ratio:auto;min-height:340px}
.fbanner.static.rich .fb-overlay{background:linear-gradient(180deg,rgba(2,26,61,.34) 0%,rgba(2,26,61,.78) 52%,rgba(2,26,61,.9) 100%)}
.fbanner .fb-overlay ul{margin-top:calc(13px * var(--sp-k));display:grid;gap:calc(7px * var(--sp-k));list-style:none}
.fbanner .fb-overlay li{font-size:var(--fs-body);color:rgba(255,255,255,.92);line-height:1.7;display:flex;gap:calc(9px * var(--sp-k))}
.fbanner .fb-overlay li::before{content:"";width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.8);margin-top:calc(9px * var(--sp-k));flex:none}
/* ---- maker logo wall ---- */
.logo-cell{aspect-ratio:5/2;background:#fff;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;padding:calc(8px * var(--sp-k)) calc(12px * var(--sp-k));transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.logo-cell:hover{border-color:var(--blue-100);box-shadow:var(--sh-1)}
.logo-cell img{max-width:100%;max-height:100%;object-fit:contain;display:block;transition:transform .2s var(--ease)}
.logo-cell:hover img{transform:scale(1.04)}
/* ロゴ壁の外枠パネル（製品トップ・ASIC特集で使用）。products-top.css から共通へ昇格（2026-08-24） */
.mkr-panel{background:color-mix(in oklab,var(--prod-bg) 11%,#fff);border-radius:var(--rd-lg);padding:calc(42px * var(--sp-k)) calc(48px * var(--sp-k)) calc(48px * var(--sp-k))}
@media(max-width:980px){.mkr-panel{padding:calc(28px * var(--sp-k)) calc(22px * var(--sp-k)) calc(32px * var(--sp-k))}}
@media(max-width:1000px){.logo-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:600px){.logo-grid{grid-template-columns:repeat(2,1fr)}}
/* ---------- 下層ページ共通（breadcrumb / page hero） ---------- */
.crumbs{display:flex;align-items:center;gap:calc(9px * var(--sp-k));font-family:"Roboto Condensed",sans-serif;font-size:var(--fs-sub);color:var(--ink-mute);padding-top:calc(13px * var(--sp-k));padding-bottom:calc(13px * var(--sp-k));flex-wrap:wrap}
.page-hero .crumbs{padding-top:0;padding-bottom:calc(20px * var(--sp-k))}
.ind-hero .crumbs{padding-top:0;padding-bottom:calc(24px * var(--sp-k))}
.ind-hero .crumbs,.ind-hero .crumbs a{color:#a9bedd}
.ind-hero .crumbs a:hover{color:#fff}
.ind-hero .crumbs .sep{color:rgba(255,255,255,.4)}
.ind-hero .crumbs b{color:#fff}
.crumbs a{color:var(--ink-mute)}
.crumbs a:hover{color:var(--navy)}
.crumbs .sep{color:#c3cede}
.crumbs b{color:var(--ink);font-weight:600}
.page-hero{background:var(--bg-soft);border-bottom:1px solid var(--line);padding:calc(44px * var(--sp-k)) 0 calc(52px * var(--sp-k))}
.page-hero .en{display:inline-flex;align-items:baseline;gap:calc(10px * var(--sp-k));font-family:"Roboto Condensed",sans-serif;font-size:var(--fs-sub);font-weight:600;letter-spacing:.16em;color:var(--navy)}
.page-hero .en::before{content:"/";font-weight:700;font-size:calc(24px * var(--fs-k));line-height:1;letter-spacing:0}
.page-hero h1{font-size:calc(40px * var(--fs-k));font-weight:900;letter-spacing:-0.03em;line-height:1.3;margin-top:calc(10px * var(--sp-k))}
.page-hero .sub{font-size:var(--fs-body);color:var(--ink-soft);margin-top:calc(13px * var(--sp-k));line-height:1.85;font-weight:500}/* max-width:52em を撤去（2026-09-08 ユーザー指示） */
.page-hero.theme-sol{background:#f2f9f5;border-top:3px solid var(--sol)}
.page-hero.theme-sol .en{color:var(--sol)}
.page-hero.theme-prod{background:color-mix(in oklab,var(--prod-bg) 8%,#fff);border-top:3px solid var(--prod)}
.page-hero.theme-prod .en{color:var(--prod)}
@media(max-width:980px){.page-hero h1{font-size:calc(28px * var(--fs-k))}.page-hero{padding:calc(32px * var(--sp-k)) 0 calc(38px * var(--sp-k))}}
/* ===== 共有部品（2ページ以上で使用・ページCSSから移設） ===== */
/* ヒーロー背景写真つき（.hero-bg とセットの契約。片方だけをページCSSに置かない） */
.page-hero.has-bg{position:relative;overflow:hidden;padding-bottom:calc(60px * var(--sp-k))}
.page-hero.has-bg>.wrap{position:relative;z-index:1}
.hero-bg{position:absolute;top:0;right:0;height:100%;width:64%;object-fit:cover;object-position:72% 58%;
-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 26%,#000 58%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 26%,#000 58%)}
.hero-tx{max-width:none}/* max-width:47em を撤去（2026-09-10 ユーザー指示） */
.intro-head{max-width:none}
.intro-head h2{word-break:auto-phrase}
.task-sub{margin-top:calc(64px * var(--sp-k));border-top:1px solid var(--line);padding-top:calc(48px * var(--sp-k))}
.task-sub>:is(h3,h4,h5,h6){font-size:calc(24px * var(--fs-k));font-weight:900;letter-spacing:-0.01em;display:flex;align-items:center;gap:calc(11px * var(--sp-k))}
.task-sub>:is(h3,h4,h5,h6)::before{content:"";width:5px;height:22px;background:var(--sol);border-radius:2px;flex:none}
.task-sub .lead{font-size:var(--fs-body);color:var(--ink-soft);margin-top:calc(10px * var(--sp-k));line-height:1.9;font-weight:500}
.task{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--rd-md);padding:calc(20px * var(--sp-k)) calc(22px * var(--sp-k))}
.task :is(h3,h4,h5,h6){font-size:var(--fs-cardsub);font-weight:900;line-height:1.6}
.task p{font-size:var(--fs-body);color:var(--ink-soft);line-height:1.8;margin-top:calc(7px * var(--sp-k));font-weight:500}
/* 見出し行つき対応表（DMS/EMS の工程×課題→解決策→効果／GUI開発のフレームワーク比較）。
.dev-table は見出し1列＋内容1列の定義表なので、3列以上の対応表はこちら。
横スクロールさせない（900px以下は1件＝1カードに縦積み。td の data-l が見出しになる）。
.pr＝1列目（navy 900）／.sv＝受け渡し点の強い罫線／.ef＝結論列（✓）はいずれも任意。 */
.solve-tbl{border:1px solid var(--line);background:#fff;border-radius:var(--rd-lg);box-shadow:var(--sh-1);max-width:1160px;margin:0 auto;overflow:hidden}
.solve-tbl table{width:100%;border-collapse:collapse;table-layout:fixed}
.solve-tbl th{background:var(--navy);color:#fff;font-size:var(--fs-body);font-weight:900;text-align:left;padding:calc(15px * var(--sp-k)) calc(22px * var(--sp-k));line-height:1.5}
.solve-tbl td{font-size:var(--fs-body);line-height:1.8;color:var(--ink);font-weight:500;padding:calc(20px * var(--sp-k)) calc(22px * var(--sp-k));vertical-align:top;border-top:1px solid var(--line);border-left:1px solid var(--hair);text-wrap:pretty}
.solve-tbl td:first-child{border-left:0}
.solve-tbl td.pr{font-size:var(--fs-body);font-weight:900;color:var(--navy);line-height:1.7;white-space:nowrap;padding-left:calc(20px * var(--sp-k));padding-right:calc(14px * var(--sp-k))}
.solve-tbl td.pr .tag-pill{margin-left:calc(10px * var(--sp-k))}
.solve-tbl td.sv,.solve-tbl th:nth-child(3){border-left:1px solid color-mix(in oklab,var(--navy) 34%,#fff)}
.solve-tbl td.ef{padding-left:calc(42px * var(--sp-k));position:relative}
.solve-tbl td.ef::after{content:"✓";position:absolute;left:20px;top:19px;font-size:calc(14px * var(--fs-k));font-weight:900;color:var(--sol);line-height:1.8}
@media(max-width:900px){
.solve-tbl thead{display:none}
.solve-tbl table,.solve-tbl tbody,.solve-tbl tr,.solve-tbl td{display:block;width:auto}
.solve-tbl tr{border-top:1px solid var(--line)}
.solve-tbl tbody tr:first-child{border-top:0}
.solve-tbl td{border-top:0;border-left:0;padding:0 calc(22px * var(--sp-k)) calc(16px * var(--sp-k))}
.solve-tbl td.pr{padding:calc(22px * var(--sp-k)) calc(22px * var(--sp-k)) calc(14px * var(--sp-k));white-space:normal}
.solve-tbl td.sv{border-left:0}
.solve-tbl td.ef::after{top:auto;margin-top:calc(22px * var(--sp-k))}
.solve-tbl td:not(.pr)::before{content:attr(data-l);display:block;font-size:var(--fs-label);font-weight:900;color:var(--ink-mute);margin-bottom:calc(5px * var(--sp-k))}
.solve-tbl td:last-child{padding-bottom:calc(24px * var(--sp-k))}
}
.dl-band{background:#e7f4ed;border:1px solid color-mix(in oklab,var(--sol) 14%,#fff);border-radius:var(--rd-lg);padding:calc(44px * var(--sp-k)) calc(48px * var(--sp-k)) calc(46px * var(--sp-k));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.86fr);gap:calc(24px * var(--sp-k));align-items:center;overflow:hidden}
/* 製品テーマ版（受託=緑に対し製品=ティール。.sec-close.prod / .more.prod と同じ修飾子） */
.dl-band.prod{background:color-mix(in oklab,var(--prod-bg) 8%,#fff);border-color:color-mix(in oklab,var(--prod-bg) 16%,#fff)}
.dl-band .btn{text-align:left}
.dl-tx{text-align:left}
.dl-cover{width:60%;min-width:196px;height:auto;display:block;margin-left:auto;margin-right:0}
.dl-band h3{font-size:calc(24px * var(--fs-k));font-weight:900;letter-spacing:-0.01em;line-height:1.55;text-wrap:pretty}
.dl-band p{font-size:var(--fs-body);color:var(--ink-soft);margin-top:calc(12px * var(--sp-k));line-height:1.9;font-weight:500}
.dl-band .btn{margin-top:calc(22px * var(--sp-k));border-radius:var(--rd-btn);padding:calc(16px * var(--sp-k)) calc(34px * var(--sp-k));font-size:var(--fs-ui)}
.lead-panel{border:1px solid var(--line);background:#fff;border-radius:var(--rd-lg);padding:calc(34px * var(--sp-k)) calc(40px * var(--sp-k));box-shadow:var(--sh-1);max-width:1040px;margin:0 auto}
.lead-panel p{font-size:var(--fs-body);color:var(--ink-soft);line-height:2.05;font-weight:500}
.lead-panel p+p{margin-top:calc(18px * var(--sp-k))}
.sec-note{text-align:center;font-size:var(--fs-body);font-weight:500;color:var(--ink);line-height:2;margin:0 auto calc(30px * var(--sp-k));max-width:56em;word-break:auto-phrase}
.sec-note small{display:block;font-size:var(--fs-label);color:var(--ink-mute);font-weight:500}
.case3 .case{padding:calc(24px * var(--sp-k)) calc(26px * var(--sp-k))}
.case3 .case>:is(h3,h4,h5,h6){font-size:var(--fs-card)}
.case3 .case .ph,.case3 .case .cimg{aspect-ratio:16/7}
.case3 .case .meta :is(h3,h4,h5,h6)+.tags{margin:calc(8px * var(--sp-k)) 0 calc(14px * var(--sp-k))}
.case3 .case .tags span{font-size:var(--fs-label);padding:calc(3px * var(--sp-k)) calc(10px * var(--sp-k))}
.case3 .case .ph image-slot{width:100%;height:100%}
a.case{color:inherit;transition:.16s var(--ease)}
a.case:hover{box-shadow:var(--sh-2);transform:translateY(-2px);border-color:var(--sol)}
.use{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--rd-md);padding:calc(20px * var(--sp-k)) calc(22px * var(--sp-k))}
.use .hd :is(h3,h4,h5,h6){font-size:var(--fs-card);font-weight:900;line-height:1.6}/* --fs-body → --fs-card（本文 16px と同じで見出しに見えない。2026-09-16 ユーザー指摘） */
.use .hd .s{font-size:var(--fs-subhead);font-weight:700;color:var(--sol);margin-top:2px}
.use p{font-size:var(--fs-body);color:var(--ink-soft);line-height:1.8;margin-top:calc(8px * var(--sp-k));font-weight:500}
.vs-panel{border:1px solid var(--line);background:#fff;border-radius:var(--rd-md);padding:calc(24px * var(--sp-k)) calc(28px * var(--sp-k));box-shadow:var(--sh-1)}
.vs-panel h3{display:flex;align-items:center;gap:calc(11px * var(--sp-k));font-size:var(--fs-card);font-weight:900;margin-bottom:calc(10px * var(--sp-k));letter-spacing:.01em}
.vs-panel h3::before{content:"";width:5px;height:21px;background:var(--prod);border-radius:2px;flex:none}
.pcard{border:1px solid var(--hair);background:#fff;border-radius:var(--rd-md);padding:calc(18px * var(--sp-k)) calc(18px * var(--sp-k)) calc(20px * var(--sp-k));box-shadow:var(--sh-1);display:flex;flex-direction:column;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.pcard .ptags{display:flex;gap:calc(6px * var(--sp-k));flex-wrap:wrap}
.pcard .ptags span{display:inline-flex;font-size:var(--fs-label);font-weight:700;line-height:1;padding:calc(5px * var(--sp-k)) calc(10px * var(--sp-k));border-radius:var(--shape-pill);background:var(--prod-soft);color:var(--prod)}
.pcard :is(h3,h4,h5,h6){font-size:var(--fs-cardsub);font-weight:900;line-height:1.5;margin-top:calc(10px * var(--sp-k))}
/* 製品カードの説明文（画像の下・スペックの上）。ユーザー裁定（2026-08-25）でカードの正式な行として追加 */
.pcard>p{font-size:var(--fs-body);line-height:1.85;color:var(--ink-soft);font-weight:500;margin:calc(10px * var(--sp-k)) 0 2px}
.pcard .ph{aspect-ratio:16/9;margin:calc(12px * var(--sp-k)) 0 calc(4px * var(--sp-k))}
.pcard .pimg{width:100%;aspect-ratio:16/9;object-fit:contain;background:#fff;border:1px solid var(--hair);border-radius:10px;padding:calc(8px * var(--sp-k));margin:calc(12px * var(--sp-k)) 0 calc(4px * var(--sp-k));display:block;box-sizing:border-box}
.pcard .spec,.why-tx .spec{display:grid;grid-template-columns:1fr 1fr;gap:0 calc(16px * var(--sp-k))}
/* 説明文を持つカードはスペック表を下部に付ける（本文長が不揃いでも表の上端が揃う）ユーザー裁定 2026-08-25 */
.pcard>p+.spec{margin-top:auto}
.pcard .spec>div,.why-tx .spec>div{padding:calc(8px * var(--sp-k)) 0;border-bottom:1px solid var(--hair)}
.pcard .spec>div:nth-last-child(1):nth-child(odd),.why-tx .spec>div:nth-last-child(1):nth-child(odd){grid-column:1/-1}
.pcard .spec dt,.why-tx .spec dt{font-size:var(--fs-label);color:var(--ink-mute)}
.pcard .spec dd,.why-tx .spec dd{font-size:var(--fs-sub);font-weight:700;margin-top:1px;line-height:1.4}
.pcard .ifs{display:flex;gap:calc(6px * var(--sp-k));flex-wrap:wrap;margin-top:calc(13px * var(--sp-k))}
.pcard .ifs span{font-family:"Roboto Condensed",sans-serif;font-size:var(--fs-label);font-weight:600;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--shape-pill);padding:calc(4px * var(--sp-k)) calc(12px * var(--sp-k));color:var(--ink-soft)}
.ask{text-align:center}
.ask h2{font-size:calc(30px * var(--fs-k));font-weight:900;color:#fff;letter-spacing:-0.02em}
.ask p{font-size:var(--fs-body);color:#dbe8fb;line-height:2;max-width:52em;margin:calc(16px * var(--sp-k)) auto 0}
.ask .btn{margin-top:calc(24px * var(--sp-k));padding:calc(15px * var(--sp-k)) calc(32px * var(--sp-k));font-size:var(--fs-ui)}
.ind-hero{position:relative;overflow:hidden;background:var(--navy-ink);color:#fff;padding:calc(66px * var(--sp-k)) 0 calc(90px * var(--sp-k))}
.ind-hero .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.ind-hero .shade{position:absolute;inset:0;background:linear-gradient(92deg,rgba(0,52,118,.95) 0%,rgba(0,67,153,.85) 42%,rgba(0,67,153,.4) 78%,rgba(0,67,153,.22) 100%)}
.ind-hero .tbig{position:absolute;right:clamp(16px,7vw,120px);top:50%;transform:translateY(-50%);width:clamp(150px,17vw,220px);height:auto;stroke:#fff;opacity:.6;stroke-width:1;fill:none;pointer-events:none;z-index:0}
.ind-hero.bg-navy{background:linear-gradient(158deg,var(--navy) 0%,var(--navy-deep) 62%,var(--navy-ink) 100%)}
.ind-hero.bg-navy .bgimg{opacity:.3;mix-blend-mode:screen;filter:saturate(.55);-webkit-mask-image:linear-gradient(158deg,transparent 32%,#000 80%);mask-image:linear-gradient(158deg,transparent 32%,#000 80%)}
.ind-hero .wrap{position:relative;z-index:1}
.ind-hero .lb{display:inline-flex;align-items:center;gap:calc(9px * var(--sp-k));font-size:var(--fs-sub);font-weight:700;color:#9fc0f2;letter-spacing:.04em}
.ind-hero .lb::before{content:"";width:22px;height:2px;background:#9fc0f2;border-radius:2px}
.ind-hero h1{font-size:calc(42px * var(--fs-k));font-weight:900;letter-spacing:-0.03em;line-height:1.25;margin-top:calc(12px * var(--sp-k));color:#fff}
.ind-hero .sub{font-size:var(--fs-body);color:#dbe8fb;margin-top:calc(14px * var(--sp-k));max-width:46em;line-height:1.95}
/* --- 特集ヒーロー（.ind-hero の特集バリアント。ユーザー裁定 2026-08-25：業界・技術ページと一目で区別できる形
＝①写真が主役（全面・下から暗く）②帯を深く③中央寄せ。業界＝写真＋左からの紺シェード／技術＝無地紺＋右に大アイコン。
ASIC特集・その下層・コーデック特集の3ページで使うため asic.css から共通へ昇格（2026-08-25） --- */
.ind-hero.feat{padding:calc(104px * var(--sp-k)) 0 calc(112px * var(--sp-k));text-align:center;background:var(--navy-ink)}
.ind-hero.feat .bgimg{opacity:1;filter:saturate(.85) brightness(.92)}
.ind-hero.feat .shade{background:linear-gradient(180deg,rgba(4,16,40,.28) 0%,rgba(4,16,40,.55) 46%,rgba(4,16,40,.88) 100%)}
.ind-hero.feat .crumbs{justify-content:center}
.ind-hero.feat .eyebrow{display:block;font-family:"Roboto Condensed",sans-serif;font-size:var(--fs-sub);font-weight:700;letter-spacing:.24em;color:#bcd4f7;margin-bottom:calc(14px * var(--sp-k))}
.ind-hero.feat h1{margin-top:0;font-size:calc(40px * var(--fs-k));line-height:1.55;text-shadow:0 2px 18px rgba(0,10,30,.5)}
.ind-hero.feat .sub{font-weight:700;margin:calc(16px * var(--sp-k)) auto 0;max-width:44em}
@media(max-width:900px){.ind-hero.feat{padding:calc(76px * var(--sp-k)) 0 calc(84px * var(--sp-k))}.ind-hero.feat h1{font-size:calc(30px * var(--fs-k))}}
@media(max-width:640px){.ind-hero.feat{padding:calc(58px * var(--sp-k)) 0 calc(64px * var(--sp-k))}}
/* グループ見出し（.grp-h）直下の説明段落。ASIC特集の .mipi-lead を役割名に改めて共通へ昇格（2026-08-25・コーデック特集と共用） */
.grp-tx{font-size:var(--fs-body);line-height:2.05;color:var(--ink-soft);font-weight:500;margin-bottom:calc(30px * var(--sp-k))}
/* --- 特集ページのベーステーマ（2026-08-25 ユーザー裁定：特集の親は「組み込みソリューション特集」であって
受託＝緑でも製品＝ティールでもない）。既存の .theme-prod と同じ「祖先クラスで差分だけ上書き」のやり方で、
既定が緑／ティールになっている共通部品のアクセントだけをベースの navy に差し替える。付けたページ以外に影響しない --- */
.theme-navy .stp{color:var(--navy)}
.theme-navy .sec-close{color:var(--navy)}
.theme-navy .stage .si{background:var(--blue-50)}
.theme-navy .stage .si svg{stroke:var(--navy)}
.theme-navy .stage li::before{background:var(--navy)}
.theme-navy .voice li::before,.theme-navy .dom-panel>ul.ck li::before{background:var(--navy)}
.theme-navy .indp ul.ck li::before{color:var(--navy)}
.theme-navy .fig-arrow svg,.theme-navy .sec-arrow .c svg{stroke:var(--navy)}
.theme-navy .grp-h::before{background:var(--navy)}
.theme-navy .vs-panel h3::before{background:var(--navy)}
/* 合図（.more）はテーマ色に従う。既定は緑（受託）なので navy ページでは navy に差し替える（2026-08-28） */
.theme-navy .more,.theme-navy .more svg{color:var(--navy);stroke:var(--navy)}
.theme-navy .pcat:hover{border-color:var(--navy)}
.theme-navy .pcat .ic{background:var(--blue-50)}
.theme-navy .pcat .ic svg{stroke:var(--navy)}
.theme-navy .article h3{border-left-color:var(--navy)}
.theme-navy .article ul li::before{background:var(--navy)}
.theme-navy .article ul.ck li::before{color:var(--navy)}
/* 資料DL帯／申込帯の地色（既定は受託＝緑。navy ページでは青系に差し替える） */
.theme-navy .dl-band{background:var(--blue-50);border-color:var(--blue-100)}
.scard{border:1px solid var(--hair);position:relative;display:flex;flex-direction:column;background:#fff;border-radius:var(--rd-md);padding:calc(20px * var(--sp-k)) calc(20px * var(--sp-k)) calc(18px * var(--sp-k));box-shadow:var(--sh-1);transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .14s}
.scard:hover{transform:translateY(-3px);box-shadow:var(--sh-2);}
.scard :is(h3,h4,h5,h6){font-size:var(--fs-card);font-weight:900;line-height:1.55}
/* 見出しの行数が違っても写真・本文・合図の位置を揃える。
min-height で2行ぶんを確保すると1行のカードに空白が出るので、
親グリッド（.cards）の行を共有して動的に揃える */
@supports(grid-template-rows:subgrid){
.cards>.scard:not(.row){display:grid;grid-template-rows:subgrid;grid-row:span 4;align-content:start}
/* 子5つの scard（キッカー行つき）は span を追従（行不足で p と .more が重なる実例あり） */
.cards>.scard:not(.row):has(>:nth-child(5)){grid-row:span 5}
.cards>.scard:not(.row):has(>:nth-child(6)){grid-row:span 6}
/* 事例カードも同じ方式（固定 min-height を置き換え）。.acts で下端揃えするカードは flex のまま */
/* span は子要素数に一致させる（余った空トラックが伸びて幽霊余白になる実例あり）。row-gap:0＝親gapの内部相続を断つ */
.cards.case3>.case:not(.row):not(:has(.acts)){display:grid;grid-template-rows:subgrid;grid-row:span 3;align-content:start;row-gap:0}
.cards.case3>.case:not(.row):not(:has(.acts)):has(>:nth-child(4)){grid-row:span 4}
.cards.case3>.case:not(.row):not(:has(.acts)):has(>:nth-child(5)){grid-row:span 5}
}
.scard .ph{aspect-ratio:16/9;border-radius:9px}
.scard .im{aspect-ratio:16/9;border-radius:9px;object-fit:cover;width:100%;display:block;border:1px solid var(--hair)}
.scard p{font-size:var(--fs-body);color:var(--ink-soft);line-height:1.85;margin-top:calc(12px * var(--sp-k));flex:1}
.scard .more{margin-top:calc(14px * var(--sp-k));font-size:var(--fs-ui)}
.scard .more svg{width:13px;height:13px}
/* 2列以下のときの横型（事例カード .case.row と同じ考え方）。画像左＋テキスト右 */
.scard.row{display:grid;grid-template-columns:190px 1fr;gap:calc(24px * var(--sp-k));align-items:center;padding:calc(24px * var(--sp-k)) calc(28px * var(--sp-k))}
.scard.row>.im,.scard.row>.ph{aspect-ratio:4/3}
.scard.row :is(h3,h4,h5,h6){font-size:var(--fs-card)}
.scard.row p{font-size:var(--fs-body);margin-top:calc(8px * var(--sp-k));flex:none}
@media(max-width:820px){.scard.row{grid-template-columns:1fr}}
@media(max-width:1100px){.hero-bg{width:58%;object-position:76% 58%}
.hero-tx{max-width:none}/* max-width:34em を撤去（2026-09-10 ユーザー指示） */
}
@media(max-width:860px){.hero-bg{width:100%;opacity:.3;object-position:64% 60%;-webkit-mask-image:none;mask-image:none}
.hero-tx{max-width:none}
.dl-band{grid-template-columns:1fr;padding:calc(36px * var(--sp-k)) calc(28px * var(--sp-k)) calc(40px * var(--sp-k));gap:calc(8px * var(--sp-k))}
.dl-cover{width:70%;max-width:340px;margin:0 auto}
}
@media(max-width:900px){.use-grid{grid-template-columns:1fr}
.sec-close{font-size:var(--fs-body)}
.ind-hero .tbig{display:none}}
@media(max-width:640px){.voice{flex-direction:column;align-items:flex-start;padding:calc(26px * var(--sp-k))}
.ind-hero h1{font-size:calc(28px * var(--fs-k))}
.ind-hero{padding:calc(48px * var(--sp-k)) 0 calc(60px * var(--sp-k))}
}
@media(max-width:980px){.ask h2{font-size:calc(22px * var(--fs-k))}}
/* ===== .pcat.static: 中のリンクを押す製品カテゴリカード（ASIC 特集から共通昇格 2026-09-08。メーカーページでも使用） ===== */
.pcat.static{padding:calc(26px * var(--sp-k)) calc(30px * var(--sp-k)) calc(28px * var(--sp-k))}.pcat.static:hover{transform:none;box-shadow:var(--sh-1)}.pcat.static .ct-h{display:flex;align-items:center;gap:calc(13px * var(--sp-k));margin-bottom:calc(16px * var(--sp-k))}.pcat.static .ct-h .ic{margin-bottom:0}.pcat.static .chips a{display:inline-flex;align-items:center;gap:calc(7px * var(--sp-k));font-size:var(--fs-ui);font-weight:700;padding:calc(8px * var(--sp-k)) calc(16px * var(--sp-k));border:1px solid color-mix(in oklab,var(--prod) 30%,#fff);border-radius:var(--rd-btn);background:#fff;color:var(--prod);transition:.14s}.pcat.static .chips a svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;opacity:.6}.pcat.static .chips a:hover{background:var(--prod);color:#fff;border-color:var(--prod)}.pcat.static .chips a:hover svg{opacity:1}
/* ================= 1 セクション 1 幅（2026-09-29 ユーザー裁定） =================
セクションの幅は主ブロック（最初のレイアウト）の幅に合わせる: .sw-sm 920（課題パネル .voice）／.sw-md 1080（.w-md）／.sw-lg 1160（.w-lg）。
SectionFlow が に付け、見出しのリード・締めの一文・注記と、同居する部品（続きのレイアウト・小見出し枠・自前幅のパネル・図版）を同じ幅に揃える。
幅を宣言しないページ（製品・業界・TOP）は従来どおり各部品の自前幅。
実測（2026-09-29、14 ページ 154 セクション）: ブロック幅 1224/1160/1080/1040/920 が混在、同一セクション内の混在 21、リードがブロックより広い 6、締めが狭い 20/23 → 0 に */
.sw-sm{--sw:920px}.sw-md{--sw:1080px}.sw-lg{--sw:1160px}
:is(.sw-sm,.sw-md,.sw-lg) .intro-head{max-width:var(--sw)}
:is(.sw-sm,.sw-md,.sw-lg) :is(.sec-close,.sec-note,.fig-close){max-width:var(--sw)}
:is(.sw-sm,.sw-md,.sw-lg) :is(.wrap,.joined,.task-sub,.subsec,.case-group,.table-group,.why-group,.fcards) > :is(.cards,.w-md,.w-lg,.voice,.lead-panel,.article,.solve-tbl,.dom-panel,.bstruct,.wall,.scope-panel,.msmap,.ptn-note,.dev-table,.vfig,.scope,.promo,.mbd-panel,.combo,.faq,.task-sub,.subsec,.toolbox-grid,.grp-h,.case-group,.table-group,.why-group,.fcards,.img-figure,.mk-note,.sb-cta,.shikashi,.prop-sub,.mx,.cap-grid,.use-sub,.x-sep,.indp,.whyset){max-width:var(--sw);margin-left:auto;margin-right:auto}/* 対象は .wrap（と続き・小見出し枠・包み）の直下だけ。グリッドの中の要素に margin:auto を当てるとグリッド項目が内容幅に縮むので、入れ子には効かせない（2026-09-29） */