/* テーマ側で追加する部品。ハンドオフの CSS（src/css の他ファイル）は触らず、ここに足す。追加時は報告で申告する。 */

/* 取り扱い終了ラベル（2026-09-08 決定: 案 B グレー）。
   状態表示なので形はピル（--shape-pill）のまま、用途タグの青と区別するため --hair 地 × --ink-mute 字。
   製品カードの見出し h4 と製品詳細ヒーローの h1 の、製品名の後ろに出す。 */
/* ラベルを持つ見出しだけ flex にして、文字とピルを中央揃えにする（ラベルが無いカードは影響なし） */
.pcard :is(h3,h4,h5,h6):has(.discontinued),.pdh-title:has(.discontinued){display:flex;flex-wrap:wrap;align-items:center;gap:calc(6px * var(--sp-k)) calc(8px * var(--sp-k))}
.pcard :is(h3,h4,h5,h6) .discontinued,.pdh-title .discontinued{display:inline-block;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(--hair);color:var(--ink-mute);letter-spacing:0;white-space:nowrap}
/* 製品詳細ヒーローは地が --hair と同系色（薄い青灰）なので、白地＋細い枠にして埋もれないようにする */
.pdh-title:has(.discontinued){gap:calc(8px * var(--sp-k)) calc(12px * var(--sp-k))}
.pdh-title .discontinued{font-size:var(--fs-sub);padding:calc(6px * var(--sp-k)) calc(12px * var(--sp-k));background:#fff;border:1px solid var(--line)}

/* 製品カードの見出し（型番）を 16→18px に（2026-09-08 ユーザー指示。ラダーの次の値。キャッチ 2 行でも収まる） */
.pcard :is(h3,h4,h5,h6){font-size:var(--fs-cardsub);font-weight:700;line-height:1.6} /* 見出しが製品名から「一覧用サマリー」（文章、平均 90 字）になったので 18px/900 をやめる（2026-09-16） */

/* チップベンダー×シリーズ: 列を等幅にし、パネルは view 側で高さが揃うよう 2 列に振り分ける（2026-09-08 ユーザー指示）。
   デザインの 1.45fr/1fr は AMD 6 系列を前提にした固定配分で、データ次第で列幅と余白が崩れるため。980px 以下は category.css の 1 列のまま */
@media(min-width:981px){.vs-grid{grid-template-columns:1fr 1fr}.vs-grid>div:only-child{grid-column:1/-1}}

/* .pcat.links: カードの見た目は .pcat のまま、見出しを個別リンクにし、配下は縦並びリンク .lu（製品カテゴリの中分類は .acts ＋ .cardbtn.prod.ghost。2026-09-16）（旧 devmenu の .lu を移植。devmenu は廃止 2026-09-08）。
   .sol / .prod でアイコン地とリンク色を切り替える。カード全体はリンクではないのでホバーで浮かせない */
.pcat.links :is(h3,h4,h5,h6) a{color:inherit}
.pcat.links .lu{margin-top:calc(10px * var(--sp-k));display:grid}
.pcat.links .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}
.pcat.links .lu a:last-child{border-bottom:none}
.pcat.links .lu a svg{width:13px;height:13px;stroke-width:2.6;fill:none;flex:none}
.pcat.links.sol:hover{border-color:var(--sol)} /* .pcat:hover は --prod 固定なので受託系は --sol に */
.pcat.links.sol .ic{background:var(--sol-soft)}
.pcat.links.sol .ic svg{stroke:var(--sol)}
.pcat.links.sol :is(h3,h4,h5,h6) a:hover,.pcat.links.sol .lu a:hover{color:var(--sol)}
.pcat.links.sol .lu a svg{stroke:var(--sol)}
.pcat.links.prod :is(h3,h4,h5,h6) a:hover,.pcat.links.prod .lu a:hover{color:var(--prod)}
.pcat.links.prod .lu a svg{stroke:var(--prod)}

/* .alt-bg: 中分類一覧ページの背景色ルール。固定クラスではなく、可視セクション（hidden 除く）の偶数番目に .bg-soft 相当を当てる。
   bg-navy・インライン背景（受託の緑）・contact は数えず色も変えない。一覧（#list）の前後で別々に数える（ページ送りで下側の色が変わらないように）2026-09-08 */
.alt-bg > :is(.block,.block-sm):not(.bg-navy):not(.contact):not([style*="background"]){background:#fff;border-top:0;border-bottom:0}
.alt-bg > :nth-child(even of :is(.block,.block-sm):not([hidden]):not(.bg-navy):not(.contact):not([style*="background"])),
.alt-bg.from-soft > :nth-child(odd of :is(.block,.block-sm):not([hidden]):not(.bg-navy):not(.contact):not([style*="background"])){background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.alt-bg.from-soft > :nth-child(even of :is(.block,.block-sm):not([hidden]):not(.bg-navy):not(.contact):not([style*="background"])){background:#fff;border-top:0;border-bottom:0}
/* .from-soft: 一覧（白固定）の直後の zone。奇数番目を薄色にして、一覧→薄色→白… と交互が続くようにする */

/* 関連コラムのサムネ画像。デザインは .ph（プレースホルダー）のみで img の指定が無いため（Kumico のサムネを出す 2026-09-09） */
/* イベントカード a.ev のサムネも同じ（デザインは .ph のみ。アイキャッチ 4:3 が 16:8 の枠から縦にはみ出していた。2026-09-29 指摘） */
:is(.news-feat,.ev) .thumb:has(img){position:relative;overflow:hidden}
:is(.news-feat,.ev) .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* image レイアウト（図・写真 1 枚）。基本は内容幅（.w-md）に収める。小さく出すときはフィールド「幅」で共通の汎用クラス .img-80（fsi-embedded.css）を img に付ける（2026-09-15）。
   width は書かない（.img-figure img の方が詳細度が高く、汎用クラスの width を打ち消してしまうため） */
.img-figure{margin:calc(28px * var(--sp-k)) auto 0}
.img-figure img{display:block;max-width:100%;height:auto;margin-left:auto;margin-right:auto;border-radius:var(--rd-md)}
.img-figure figcaption{margin-top:calc(10px * var(--sp-k));font-size:var(--fs-label);color:var(--ink-mute);text-align:center}


/* .voice.grp（番号付き課題＋小項目）。physicalai.css の定義を複製（MBD 下層でも使うため。2026-09-10）。モバイルの .vp 非表示はメディアクエリ内のみ */
.voice.grp{max-width:1080px;padding:calc(36px * var(--sp-k)) calc(42px * var(--sp-k));gap:calc(38px * var(--sp-k))}
.voice.grp .vp svg{width:140px;padding:0}
.voice.grp>ul{display:grid;grid-template-columns:1fr 1fr;gap:calc(26px * var(--sp-k)) calc(40px * var(--sp-k));flex:1}
.voice.grp>ul>li::before{content:none}
.voice.grp .vn{position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:var(--sol);color:#fff;font:700 12.5px/20px "Roboto Condensed",sans-serif;text-align:center}
.voice.grp li ul{list-style:none;display:grid;gap:calc(5px * var(--sp-k));margin-top:calc(8px * var(--sp-k))}
.voice.grp li ul li{position:relative;padding-left:calc(14px * var(--sp-k));font-size:var(--fs-body);font-weight:500;color:var(--ink-soft);line-height:1.7}
.voice.grp li ul li::before{content:"";position:absolute;left:0;top:9px;width:4px;height:4px;border-radius:50%;background:var(--sol)}
@media(max-width:820px){.voice.grp{flex-direction:column;gap:calc(20px * var(--sp-k));padding:calc(26px * var(--sp-k))}.voice.grp .vp{display:none}.voice.grp>ul{grid-template-columns:1fr;gap:calc(22px * var(--sp-k))}}
/* 課題パネルの箇条（.voice li）をひと回り大きく 16 → 20px（2026-10-02 クライアント修正依頼「課題提示エリアのフォントをひと回り大きく。他のページも同様に」、ユーザー裁定 20px。
   同日カード見出しのトークン --fs-card が 20px になったので、それを使う）。図版枠のチェックリスト .dom-panel>ul.ck li は同じ定義を共有しているが対象外（16px のまま）。番号付き .voice.grp の小項目は --fs-body のまま。
   頭の「!」「✓」の丸と番号は大きさはそのまま、位置だけ 1 行目（行の高さ 35px）の中央に（同日ユーザー「位置」） */
.voice li{font-size:var(--fs-card)}
.voice li::before,.voice.grp .vn{top:calc((var(--fs-card) * 1.75 - 20px) / 2)}/* 1 行目（行の高さ 1.75）の中央。PC 7.5px。スマホで文字が小さくなっても中央のまま（2026-10-04） */

/* 「前のセクションに続ける」（join）で同じ section 内に足したブロックの間隔 */
.joined{margin-top:calc(32px * var(--sp-k))}/* 40 → 32px（2026-10-02 見出しまわりの余白の決まり。ファイル末尾） */


/* .scope（appsec.css）の行間矢印を出さない変種。並列のグループ（自動化・CI の実績・成果）で使う */
.scope.no-arrows{padding-bottom:0}
.scope.no-arrows .scope-row::after{content:none}

/* .sec-head: .sec-head .sub の max-width 撤去（2026-09-08 指示）後、本文列が全幅になり .more が次行に落ちるため、本文列を伸縮にして .more を右に保つ */
.sec-head>div{flex:1 1 0;min-width:0}


/* ---------- TOP ヒーローの表示演出（2026-09-16 クライアント指摘 S1「キービジュアルの表示の仕方」＝ fsi.co.jp 程度のリッチさ。ユーザー解釈「表示方法をリッチに」）----------
   1) 背景写真はわずかにズームしながら定位置へ（Ken Burns。写真を .hero::after に移し、.hero 自身の背景は消す）
   2) 見出しまわりは上から順にフェードアップ（fsi.co.jp の .slide-fade-in は下から 36px・0.8s。ここは 20px・0.8s を段差 90ms で）
   レイアウト・最終状態はデザインのまま。prefers-reduced-motion では動かさない */
.hero{background-image:none}
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--mv-bg) center top/cover no-repeat;transform:scale(1.12);animation:hero-mv 9s var(--ease) forwards}/* 1.06 → 1.12（2026-09-16 ユーザー指示「ズームもう少し強めで」） */
.hero .wrap>*{opacity:0;transform:translateY(20px);animation:hero-in .8s var(--ease) forwards}
.hero .wrap>:nth-child(1){animation-delay:.12s}
.hero .wrap>:nth-child(2){animation-delay:.21s}
.hero .wrap>:nth-child(3){animation-delay:.30s}
.hero .wrap>:nth-child(4){animation-delay:.39s}
.hero .wrap>:nth-child(5){animation-delay:.48s}
@keyframes hero-mv{to{transform:scale(1)}}
@keyframes hero-in{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hero::after{transform:none;animation:none}.hero .wrap>*{opacity:1;transform:none;animation:none}}

/* ---------- メガナビ（2026-09-15 指示「グロナビをリッチ化して下層ページに直接飛べるように」→ 根本から作り込み） ----------
   考え方: 各パネルを「その領域の小さな入口」にする。左＝導入列（見出し・一文・検索・主導線・資料）、右＝領域に合った見せ方。
     製品: 大分類 10 のリスト ⇄ 選んだ大分類の中分類（件数付き）を右に出す 2 段構え。受託: 4 区分 ⇄ その区分のソリューション（サムネ＋一文＋子ページ）。
     業界・技術: 業界は写真タイル（TOP の .ind-tile と同じ写真）、テクノロジーはアイコン付きチップ。
   語彙はデザインのもの（.sec-head / .more / .en / .btn / .dl-band / .ind-tile / tech-* アイコン）。枠線は最小限にし、字の太さ・色・余白で階層を作る。
   骨格: nav.main > .mn-item（> a ＋ button.mn-tg ＋ .mn-panel > .mn-in > .mn-intro ＋ 本体）。開閉は .open、2 段の切替は .on（modules/meganav.js） */
nav.main .mn-item{display:flex;align-items:center;position:static}
/* 対応ツール・環境の「もっと見る」（2026-09-16 クライアント指摘 S4、ユーザー裁定「件数なし・中央揃え・アニメーション」）。折りたたみ分 .tb-x は開くまで出さない。ボタンは .more の見た目のまま（button なので地・枠・字体を消す）、開いたら山形を反転。高さのアニメーションは modules/toolbox-more.js */
.toolbox:not(.open) .chips .tb-x{display:none}
.toolbox .tb-foot{margin-top:calc(14px * var(--sp-k));display:flex;justify-content:center}
.toolbox .tb-more{background:none;border:0;padding:0;font-family:inherit;cursor:pointer}
.toolbox .tb-more svg{transition:transform .18s var(--ease)}
.toolbox.open .tb-more svg{transform:rotate(180deg)}
/* 検索結果のメーカーも同じ「もっと見る」（7 社目から畳む。2026-10-10 修正一覧 ①_2 No.12）。カードの下なので、間は部品どうしの間 32px */
.srch-makers:not(.open) .mk-grid .tb-x{display:none}
.srch-makers .tb-foot{margin-top:calc(32px * var(--sp-k));display:flex;justify-content:center}
.srch-makers .tb-more{background:none;border:0;padding:0;font-family:inherit;cursor:pointer}
.srch-makers .tb-more svg{transition:transform .18s var(--ease)}
.srch-makers.open .tb-more svg{transform:rotate(180deg)}

/* ラベルの下（ヘッダーの余白）にマウスが来てもパネルが閉じないよう、nav と .mn-item をヘッダーの高さいっぱいに広げる（2026-09-16 クライアント指摘）。直リンクの a は中央寄せのまま */
@media(min-width:769px){nav.main{align-self:stretch;align-items:center}nav.main .mn-item{align-self:stretch}}
nav.main .mn-item>a{display:inline-flex;align-items:center;gap:calc(5px * var(--sp-k))}
nav.main .mn-item>a .mn-cv{width:12px;height:12px;stroke:currentColor;stroke-width:2.4;fill:none;flex:none;opacity:.55;transition:transform .18s var(--ease),opacity .18s}
nav.main .mn-item.open>a{color:var(--navy);border-color:var(--navy)}
nav.main .mn-item.open>a .mn-cv{transform:rotate(180deg);opacity:1}
nav.main .mn-tg{display:none}
.mn-scrim{position:fixed;inset:0;z-index:50;background:rgba(2,26,61,.28);opacity:0;pointer-events:none;transition:opacity .2s var(--ease)}
.mn-scrim.on{opacity:1;pointer-events:auto}
.mn-panel{display:none;position:absolute;left:0;right:0;top:100%;z-index:5;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 30px 50px -28px rgba(0,50,120,.45);max-height:calc(100vh - 100px);overflow-y:auto}
nav.main .mn-item.open .mn-panel{display:block;animation:mn-in .2s var(--ease)}
@keyframes mn-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes mn-fade{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){nav.main .mn-item.open .mn-panel,.mn-pn.on{animation:none}.mn-scrim{transition:none}}
.mn-in{max-width:var(--maxw);margin:0 auto;padding:calc(34px * var(--sp-k)) calc(28px * var(--sp-k)) calc(38px * var(--sp-k));display:grid;grid-template-columns:calc((100% - 80px) / 3 * .9) 1fr;gap:calc(40px * var(--sp-k));align-items:stretch} /* 導入列 : リスト : 内容 = 0.9 : 0.9 : 1.2（等幅から導入列とリストを 1 割狭く。2026-09-15 指示） */
/* 領域の地色は導入列だけに（業界ページの #products の面色 ＝ 製品、受託トップの業界実績の面色 ＝ 受託）。列を上下いっぱいに伸ばし、::before で左端まで敷く */
.mn-panel.prod .mn-intro,.mn-panel.sol .mn-intro{position:relative;margin:calc(-34px * var(--sp-k)) 0 calc(-38px * var(--sp-k));padding:calc(34px * var(--sp-k)) calc(28px * var(--sp-k)) calc(38px * var(--sp-k)) 0;border-right:0}
.mn-panel.prod .mn-intro::before,.mn-panel.sol .mn-intro::before{content:"";position:absolute;top:-3px;bottom:0;right:0;width:50vw;background:inherit;border-top:inherit;z-index:-1}/* .theme-sol/.theme-prod の 3px 上線（共通 CSS）を左端まで延ばす。top:-3px は親の線と重ねるため（2026-09-16 ユーザー指摘「左側に余白」） */
.mn-panel.prod .mn-intro{background:color-mix(in oklab,var(--prod-bg) 8%,#fff)}
.mn-panel.sol .mn-intro{background:#f2f9f5}
.mn-panel .mn-in{position:relative;z-index:0}
/* 導入列 */
.mn-intro{border-right:1px solid var(--hair);padding-right:calc(32px * var(--sp-k));display:flex;flex-direction:column;align-items:flex-start}
.mn-intro .sec-ico{margin:0 0 calc(14px * var(--sp-k))}/* 見出し上のアイコン（TOP の .sec-ico と同じ部品・色は .theme-sol/.theme-prod。2026-09-16 ユーザー指示） */
.mn-intro .en{font-size:var(--fs-label);letter-spacing:.14em}
.mn-intro.prod .en{color:var(--prod)} .mn-intro.sol .en{color:var(--sol)} /* セクションのキッカーと同じく領域色 */
.mn-intro h3{font-size:calc(24px * var(--fs-k));font-weight:900;letter-spacing:-0.02em;line-height:1.3;margin-top:calc(8px * var(--sp-k));color:var(--ink)}
.mn-intro p{margin-top:calc(10px * var(--sp-k));font-size:var(--fs-sub);line-height:1.75;color:var(--ink-mute)}
.mn-search{display:flex;align-items:center;gap:calc(8px * var(--sp-k));margin-top:calc(16px * var(--sp-k));width:100%;border:1.5px solid var(--line);border-radius:10px;background:#fff;padding:calc(4px * var(--sp-k)) calc(4px * var(--sp-k)) calc(4px * var(--sp-k)) calc(12px * var(--sp-k));transition:border-color .14s,box-shadow .14s}
.mn-search:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px var(--blue-50)}
.mn-search>svg{width:16px;height:16px;stroke:var(--ink-mute);stroke-width:2;fill:none;flex:none}
.mn-search input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:var(--fs-sub);padding:calc(7px * var(--sp-k)) 0;background:transparent;color:var(--ink)}
.mn-search input::placeholder{color:var(--ink-mute)}
.mn-search .btn{padding:calc(8px * var(--sp-k)) calc(13px * var(--sp-k));font-size:var(--fs-label);border-radius:7px}
nav.main .mn-intro .more{margin-top:calc(16px * var(--sp-k));font-size:var(--fs-ui);padding:0;border:0;white-space:normal}
nav.main .mn-intro .more:hover{gap:calc(10px * var(--sp-k));border-color:transparent}
.mn-intro .mn-sub{list-style:none;margin:calc(16px * var(--sp-k)) 0 0;padding:calc(12px * var(--sp-k)) 0 0;border-top:1px solid var(--hair);display:grid;gap:2px;width:100%}
nav.main .mn-intro .mn-sub a{display:block;padding:calc(5px * var(--sp-k)) 0;border:0;font-size:var(--fs-sub);font-weight:500;color:var(--ink-soft);white-space:normal;transition:color .14s}
nav.main .mn-intro .mn-sub a:hover{color:var(--navy);border-color:transparent}
.mn-intro.prod .mn-sub a:hover{color:var(--prod)} .mn-intro.sol .mn-sub a:hover{color:var(--sol)}
/* 資料カード（.dl-band の縮小版） */
.mn-dl{margin-top:auto;padding-top:calc(20px * var(--sp-k));width:100%}
nav.main .mn-dl a{display:flex;align-items:center;gap:calc(10px * var(--sp-k));padding:calc(12px * var(--sp-k)) calc(12px * var(--sp-k));border:0;border-radius:var(--rd-md);background:var(--bg-soft);white-space:normal;transition:background .14s}
nav.main .mn-dl a:hover{background:#e9f0f9;border-color:transparent}
.mn-dl img{height:50px;width:auto;flex:none;filter:drop-shadow(0 6px 10px rgba(0,50,120,.18))}
.mn-dl a>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.mn-dl .k{font-family:"Roboto Condensed",sans-serif;font-size:var(--fs-label);font-weight:600;letter-spacing:.1em;color:var(--ink-mute)}
.mn-dl .t{font-size:var(--fs-label);font-weight:700;color:var(--ink);line-height:1.4}
.mn-dl .m{display:inline-flex;align-items:center;gap:calc(4px * var(--sp-k));font-size:var(--fs-label);font-weight:700;color:var(--navy)}
.mn-dl .m svg{width:12px;height:12px;stroke:currentColor;stroke-width:2.4;fill:none}
.mn-intro.prod .mn-dl .m{color:var(--prod)} .mn-intro.sol .mn-dl .m{color:var(--sol)}
/* 2 段構え（左のリスト ⇄ 右の内容）。li は display:contents で、リストは 1 列目に積み、内容は 2 列目の同じ場所に重ねて .on だけ見せる */
.mn-fly{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:calc((100% - 40px) * .9 / 2.1) 1fr;gap:2px calc(40px * var(--sp-k));align-items:start}
.mn-fly>li{display:contents}
nav.main .mn-ni{grid-column:1;display:flex;align-items:center;gap:calc(10px * var(--sp-k));padding:calc(8px * var(--sp-k)) calc(12px * var(--sp-k));border:0;border-radius:10px;font-size:var(--fs-ui);font-weight:700;color:var(--ink-soft);white-space:normal;line-height:1.35;transition:background .14s,color .14s}
nav.main .mn-ni .ic{width:30px;height:30px;border-radius:8px;background:var(--blue-50);display:flex;align-items:center;justify-content:center;flex:none;transition:background .14s}
nav.main .mn-ni .ic svg{width:17px;height:17px;stroke:var(--navy);stroke-width:1.8;fill:none}
nav.main .mn-ni .cv{margin-left:auto;width:12px;height:12px;stroke:currentColor;stroke-width:2.4;fill:none;flex:none;opacity:0;transform:translateX(-4px);transition:opacity .14s,transform .14s}
nav.main .mn-ni:hover,nav.main .mn-ni.on{background:var(--bg-soft);color:var(--navy);border-color:transparent}
nav.main .mn-panel.prod .mn-dl a,nav.main .mn-panel.sol .mn-dl a{background:#fff;box-shadow:var(--sh-1)}
nav.main .mn-panel.prod .mn-dl a:hover{background:var(--prod-soft)} nav.main .mn-panel.sol .mn-dl a:hover{background:var(--sol-soft)}
nav.main .mn-ni.on .cv{opacity:1;transform:none}
.mn-fly.prod .mn-ni .ic{background:var(--prod-soft)} .mn-fly.prod .mn-ni .ic svg{stroke:var(--prod)} nav.main .mn-fly.prod .mn-ni:hover,nav.main .mn-fly.prod .mn-ni.on{color:var(--prod)}
.mn-fly.sol .mn-ni .ic{background:var(--sol-soft)}  .mn-fly.sol .mn-ni .ic svg{stroke:var(--sol)}  nav.main .mn-fly.sol .mn-ni:hover,nav.main .mn-fly.sol .mn-ni.on{color:var(--sol)}
.mn-pn{grid-column:2;grid-row:1 / span 20;visibility:hidden;padding-left:0;align-self:stretch} /* 全部を同じ場所に重ねて置く → 行の高さが一番背の高い内容で固定され、切替で伸縮しない */
.mn-pn.on{visibility:visible;animation:mn-fade .18s var(--ease)}
.mn-pn .hd,.mn-blk .hd{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:calc(6px * var(--sp-k)) calc(16px * var(--sp-k));padding-bottom:calc(12px * var(--sp-k));border-bottom:1px solid var(--hair)}
.mn-pn .hd h4,.mn-blk .hd h4{flex:1 1 auto}
.mn-pn h4,.mn-blk h4{font-size:calc(20px * var(--fs-k));font-weight:900;letter-spacing:-0.01em;line-height:1.3;color:var(--ink)}
.mn-pn h4 .n,.mn-blk h4 .n{margin-left:calc(8px * var(--sp-k));font-family:"Roboto Condensed",sans-serif;font-size:var(--fs-sub);font-weight:700;color:var(--ink-mute);letter-spacing:0} /* .grp-h .n（— 全N件）と同じ書体 */
nav.main .mn-pn .more{padding:0;border:0;font-size:var(--fs-sub);white-space:nowrap;flex:none}
nav.main .mn-pn .more:hover{gap:calc(10px * var(--sp-k));border-color:transparent}
/* 製品: 中分類（件数付き） */
.mn-subs{list-style:none;margin:calc(6px * var(--sp-k)) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:calc(32px * var(--sp-k))}
nav.main .mn-subs a{display:flex;align-items:center;justify-content:space-between;gap:calc(12px * var(--sp-k));padding:calc(10px * var(--sp-k)) 0;border:0;border-bottom:1px solid var(--hair);font-size:var(--fs-ui);font-weight:700;color:var(--ink-soft);white-space:normal;line-height:1.4;transition:color .14s}
nav.main .mn-subs a:hover{color:var(--prod);border-color:var(--hair)}
.mn-subs .n{flex:none;font-family:"Roboto Condensed",sans-serif;font-size:var(--fs-label);font-weight:600;color:var(--ink-mute);letter-spacing:.03em}
.mn-subs .n b{font-size:var(--fs-ui);font-weight:700;margin-right:2px}
/* 製品: 大分類ごとの取り扱いメーカー（製品数順の上位 8 社） */
.mn-makers{margin-top:calc(18px * var(--sp-k))}
.mn-makers .k{display:flex;align-items:baseline;gap:calc(8px * var(--sp-k));font-size:var(--fs-label);font-weight:700;color:var(--ink-mute)}
.mn-makers .k span{font-family:"Roboto Condensed",sans-serif;font-size:var(--fs-label);font-weight:600;letter-spacing:.04em}
.mn-makers .chips{margin-top:calc(8px * var(--sp-k));display:flex;flex-wrap:wrap;gap:calc(6px * var(--sp-k))}
nav.main .mn-makers .chips a{display:inline-block;padding:calc(5px * var(--sp-k)) calc(11px * var(--sp-k));border:1px solid var(--line);border-radius:100px;background:#fff;font-size:var(--fs-label);font-weight:600;color:var(--ink-soft);white-space:nowrap;transition:border-color .14s,color .14s,background .14s}
nav.main .mn-makers .chips a:hover{border-color:var(--prod);color:var(--prod);background:var(--prod-soft)}
nav.main .mn-makers .chips a.rest{border-style:dashed;color:var(--ink-mute)}
/* 受託: ソリューションの行（サムネ＋見出し＋一文＋子ページ） */
.mn-srows{display:grid;grid-template-columns:1fr;gap:0;margin-top:calc(6px * var(--sp-k))}
.mn-srow{display:grid;grid-template-columns:76px 1fr;gap:calc(12px * var(--sp-k));padding:calc(10px * var(--sp-k)) 0;border-bottom:1px solid var(--hair);align-items:start}
.mn-srow:last-child{border-bottom:0}
.mn-srow .th{width:76px;height:52px;border-radius:8px;overflow:hidden;background:var(--sol-soft);display:flex;align-items:center;justify-content:center}
.mn-srow .th img{width:100%;height:100%;object-fit:cover;display:block}
.mn-srow .th svg{width:22px;height:22px;stroke:var(--sol);stroke-width:1.8;fill:none}
nav.main .mn-srow .t{display:block;padding:0;border:0;font-size:var(--fs-ui);font-weight:900;color:var(--ink);white-space:normal;line-height:1.35;transition:color .14s}
nav.main .mn-srow .t:hover{color:var(--sol);border-color:transparent}
.mn-srow p{margin:calc(3px * var(--sp-k)) 0 0;font-size:var(--fs-label);line-height:1.55;color:var(--ink-mute);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mn-srow .kids{margin-top:calc(5px * var(--sp-k));display:flex;flex-wrap:wrap;gap:2px calc(12px * var(--sp-k))}
nav.main .mn-srow .kids a{display:inline-flex;align-items:center;gap:calc(3px * var(--sp-k));padding:0;border:0;font-size:var(--fs-label);font-weight:700;color:var(--sol);white-space:normal;line-height:1.5}
nav.main .mn-srow .kids a::before{content:"›";opacity:.6}
nav.main .mn-srow .kids a:hover{text-decoration:underline;border-color:transparent}
/* 業界・技術: 業界とテクノロジーを横並びの 2 ブロックに。見出しは中分類の見出しと同じ、行は中分類より一回り小さく。業界は正方形に切った写真、テクノロジーはアイコン */
.mn-disc{display:grid;grid-template-columns:1fr 1fr;gap:calc(8px * var(--sp-k)) calc(40px * var(--sp-k));align-content:start}
.mn-list{list-style:none;margin:calc(6px * var(--sp-k)) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:calc(24px * var(--sp-k))}
nav.main .mn-list a{display:flex;align-items:center;gap:calc(9px * var(--sp-k));padding:calc(6px * var(--sp-k)) 0;border:0;border-bottom:1px solid var(--hair);font-size:var(--fs-label);font-weight:700;color:var(--ink-soft);white-space:normal;line-height:1.35;transition:color .14s}
nav.main .mn-list a:hover{color:var(--navy);border-color:var(--hair)}
/* 本文に書き込んだ枠（製品一覧の本文の .svc-row・.kumi-link）に画像を入れた形 .ph.filled。枠の大きさ・角丸は .ph のまま、斜線の内枠を消して画像を枠いっぱいに切り抜く（.ind-tile .ph.filled と同じ指定。margin:0 は本文の画像の余白 .article img を打ち消すため）。
   FPGAボードの「サービスイメージ」「記事サムネイル」に既定の画像を入れた（2026-10-07 ユーザー OK） */
:is(.svc-row,.kumi-link) .ph.filled::after{display:none}
:is(.svc-row,.kumi-link) .ph.filled img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;margin:0}
.mn-list .ph{width:32px;height:32px;border-radius:7px;overflow:hidden;background:var(--bg-soft);flex:none}
.mn-list .ph img{width:100%;height:100%;object-fit:cover;display:block}
.mn-list .ti{width:32px;height:32px;border-radius:7px;background:var(--blue-50);display:flex;align-items:center;justify-content:center;flex:none}
.mn-list .ti svg{width:17px;height:17px;stroke:var(--navy);stroke-width:1.65;fill:none}
.mn-list .tn{flex:1}
/* 幅適応はデザインの規則（間隔 → ラベル → 検索アイコン）より先に、追加した ∨ を落とす（1160px 以下。ヘッダーを 768px まで 1 行に保つため） */
@media(max-width:1160px){nav.main .mn-item>a .mn-cv{display:none}nav.main .mn-item>a{gap:0}}
@media(max-width:1100px){.mn-in{grid-template-columns:calc((100% - 52px) / 3 * .9) 1fr;gap:calc(26px * var(--sp-k))}.mn-intro{padding-right:calc(22px * var(--sp-k))}.mn-panel.prod .mn-intro,.mn-panel.sol .mn-intro{padding-right:calc(22px * var(--sp-k))}.mn-dl img{height:48px}.mn-list{grid-template-columns:1fr}.mn-fly{grid-template-columns:calc((100% - 26px) * .9 / 2.1) 1fr;gap:2px calc(26px * var(--sp-k))}nav.main .mn-ni{font-size:var(--fs-sub);padding:calc(7px * var(--sp-k)) calc(10px * var(--sp-k))}.mn-pn h4{font-size:var(--fs-card)}.mn-subs{grid-template-columns:1fr}}
@media(max-width:900px){.mn-in{grid-template-columns:1fr;gap:calc(22px * var(--sp-k));padding:calc(26px * var(--sp-k)) calc(28px * var(--sp-k)) calc(32px * var(--sp-k))}.mn-fly{grid-template-columns:200px 1fr}.mn-intro{border-right:0;border-bottom:1px solid var(--hair);padding:0 0 calc(16px * var(--sp-k))}.mn-panel.prod .mn-intro,.mn-panel.sol .mn-intro{margin:calc(-26px * var(--sp-k)) calc(-28px * var(--sp-k)) 0;padding:calc(22px * var(--sp-k)) calc(28px * var(--sp-k)) calc(18px * var(--sp-k));border-bottom:0}.mn-panel.prod .mn-intro::before,.mn-panel.sol .mn-intro::before{display:none}.mn-disc{grid-template-columns:1fr}.mn-intro p,.mn-dl{display:none}.mn-intro .mn-sub{border:0;padding:0;margin:calc(8px * var(--sp-k)) 0 0;grid-auto-flow:column;gap:calc(18px * var(--sp-k));width:auto}}
/* 768px 以下: ドロワー内のアコーディオン。2 段構えは畳んで、大分類／区分の下に中身をそのまま並べる */
@media(max-width:768px){
  nav.main{max-height:calc(100vh - 76px);overflow-y:auto}
  nav.main .mn-item{flex-wrap:wrap;align-items:stretch}
  nav.main .mn-item>a{flex:1;padding-right:calc(8px * var(--sp-k))}
  nav.main .mn-item>a .mn-cv{display:none}
  nav.main .mn-tg{display:flex;align-items:center;justify-content:center;width:60px;border:0;border-left:1px solid var(--hair);background:none;color:var(--navy);cursor:pointer}
  nav.main .mn-tg svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.4;fill:none;transition:transform .18s var(--ease)}
  nav.main .mn-item.open .mn-tg svg{transform:rotate(180deg)}
  nav.main .mn-item.open>a{color:var(--navy);border-color:transparent}
  nav.main .mn-item.open .mn-panel,.mn-pn.on{animation:none}
  .mn-panel{position:static;flex:0 0 100%;min-width:0;box-shadow:none;border-bottom:1px solid var(--line);background:var(--bg-soft);max-height:none;overflow:visible}/* flex:0 0 100%: 折り返す横並び（.mn-item）の中の項目なので、指定が無いと中身の幅までしか広がらず、開いたパネルの右に白い帯が残っていた（390px 幅で 組み込み製品 347px・受託開発 317px・業界/技術 279px。2026-10-07 ユーザー「展開後デザインが崩れてる」） */
  .mn-in{grid-template-columns:1fr;padding:calc(8px * var(--sp-k)) clamp(calc(20px * var(--sp-k)),5vw,calc(64px * var(--sp-k))) calc(20px * var(--sp-k));gap:calc(16px * var(--sp-k))}
  .mn-panel .mn-in{display:flex;flex-direction:column-reverse}/* 並びを逆に: 大分類・区分の一覧（.mn-fly）が先、「〜トップへ」と補助リンク（.mn-intro）は後（2026-10-07 ユーザー指定「並びも逆にしないとね」。すき間・余白は上の .mn-in の指定のまま） */
  .mn-intro,.mn-panel.prod .mn-intro,.mn-panel.sol .mn-intro{border:0;padding:0;margin:0;background:none}
  .mn-panel.prod .mn-intro::before,.mn-panel.sol .mn-intro::before{display:none}
  .mn-intro .sec-ico,.mn-intro .en,.mn-intro h3,.mn-intro p,.mn-dl{display:none}
  .mn-search{margin-top:calc(6px * var(--sp-k))}
  nav.main .mn-intro .more{margin-top:calc(12px * var(--sp-k));font-size:var(--fs-ui)}
  .mn-intro .mn-sub{margin-top:calc(6px * var(--sp-k));padding:0;border:0;grid-auto-flow:row;gap:0;width:100%}
  nav.main .mn-intro .mn-sub a{padding:calc(9px * var(--sp-k)) 0;font-size:var(--fs-ui);border-bottom:1px solid var(--line);background:none}
  .mn-fly{display:block}
  .mn-fly>li{display:block;border-bottom:1px solid var(--line)}
  nav.main .mn-ni{padding:calc(10px * var(--sp-k)) 0;border-radius:0;font-size:var(--fs-ui);background:none}
  nav.main .mn-ni .cv{display:none}
  nav.main .mn-fly.prod .mn-ni.on,nav.main .mn-fly.sol .mn-ni.on,nav.main .mn-ni.on{color:var(--ink);background:none} /* モバイルは 2 段構えを畳むので「選択中」の色は付けない */
  .mn-pn,.mn-pn.on{visibility:visible;padding:0 0 calc(10px * var(--sp-k)) calc(40px * var(--sp-k));border:0}
  .mn-pn .hd{display:none}
  .mn-subs{grid-template-columns:1fr;margin:0}
  .mn-makers{display:none}
  nav.main .mn-subs a{padding:calc(7px * var(--sp-k)) 0;border-bottom:0;font-size:var(--fs-ui);font-weight:500;background:none}
  .mn-srows{grid-template-columns:1fr;gap:0;margin:0}
  .mn-srow{grid-template-columns:1fr;padding:calc(6px * var(--sp-k)) 0;border-bottom:0}
  .mn-srow .th,.mn-srow p{display:none}
  nav.main .mn-srow .t{font-size:var(--fs-ui);font-weight:500;color:var(--ink-soft);background:none}
  .mn-srow .kids{margin:2px 0 0 calc(14px * var(--sp-k));flex-direction:column;gap:2px}
  nav.main .mn-srow .kids a{font-weight:500;color:var(--ink-mute);background:none}
  .mn-disc{grid-template-columns:1fr;gap:calc(16px * var(--sp-k))}
  .mn-list{grid-template-columns:1fr;margin:0}
  nav.main .mn-list a{padding:calc(8px * var(--sp-k)) 0;border-bottom:1px solid var(--line);font-weight:500;background:none}
  .mn-blk .hd{display:none}
}


/* 特集バナーの画像は cover（デザイン CSS は object-fit 未指定＝fill で、比率の違う画像が伸びる。2026-09-15 指示） */
.fbanner .fb-media,.fsm .thumb{object-fit:cover}

/* パートナー認定バッジ: 横長バッジ（AMD 513×132）が高さ 132px 基準だと横に大きすぎて Altera（622×414）と釣り合わないため横幅も抑える（2026-09-28 指示） */
.ptn .badge{max-width:min(100%,280px)}

/* 旧サイトから移植した本文（.article に入れる長文。FPGA 下層の「微調整」ページ 2026-09-28）: 図は内容幅に収めて中央に。旧テーマの装飾クラスは効かないので流し込みになる */
.article img{max-width:100%;height:auto;display:block;margin:calc(18px * var(--sp-k)) auto}
.article p>img+img{margin-top:calc(10px * var(--sp-k))}
.article table{max-width:100%;border-collapse:collapse}
.article table td,.article table th{border:1px solid var(--line);padding:calc(6px * var(--sp-k)) calc(10px * var(--sp-k));font-size:var(--fs-body);vertical-align:top}
.article small{font-size:var(--fs-sub);color:var(--ink-mute)}

/* 画像セクション（views/solution/sections/image.php）: figure の体裁と横並び。図版枠（.dom-panel＋.fig-head）は FPGA ページの図版と同じ。2026-09-28 */
.img-figure{margin:0;text-align:center}
.img-figure img{display:block;max-width:100%;height:auto;margin:0 auto}
.img-figure .img-60{width:60%}
.img-figure img.img-auto{width:auto}
/* 動画セクション（views/solution/sections/video.php、2026-09-30 ユーザー指示「YouTube 埋め込みの枠を新しく作る」。デザインに動画の部品が無いため追加）。
   枠・幅は画像と同じ（.img-figure、.img-80 / .img-60）。mp4 は動画の縦横比のまま、YouTube の iframe は 16:9。角丸は画像（.img-figure img）と同じ */
.video-frame{margin:0 auto;border-radius:var(--rd-md);overflow:hidden;background:#000}
.video-frame video{display:block;width:100%;height:auto}
.video-frame iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0}
/* 説明文と動画を 1 つの囲みに（.lead-panel の中に図版枠の見出し・動画。views/solution/sections/video.php の body、2026-10-02 クライアント修正依頼「動画と説明文を区分けしない」）。
   説明文 → 動画の見出しは 40px（図版枠 .dom-panel を 2 つ並べていたときの枠の間と同じくらい）、見出し → 動画は .fig-head の 24px のまま */
.lead-panel>p+.fig-head{margin-top:calc(40px * var(--sp-k))}
/* 同じ囲みで見出し・画像 → 説明文の順（image.php の body。Black Duck SCA のロゴと説明、2026-10-02）: 画像 → 説明文は 32px（部品の中の「中身 → 文」の間） */
.lead-panel>:is(.img-figure,.img-link,.img-grid)+p{margin-top:calc(32px * var(--sp-k))}
/* 図＋見出し＋文（why_rows）の「図を灰色の枠に小さく入れる」（fig_panel）。デザインの .why-fig（灰色の枠）は小さな SVG 図を入れる枠で、画像の大きさの定義が無い（.dg は幅 100%）ため、
   アイコン画像は枠の中で 140px に（旧サイトのアイコンは 250px。2026-09-30 AIアシスタント作成支援） */
.why-fig:not(.bare)>.dg{width:140px;max-width:100%}
/* 列いっぱいの図（.why-fig.bare）: 元の画像が列より小さいときは引き伸ばさず元の大きさで中央に（2026-10-02 FPGA マイグレーションの図 321・381px が 394px に引き伸ばされていた。製品写真と同じ考え方）。
   SVG は元の大きさを持たないことがあるので対象外 */
.why-fig.bare>img.dg:not([src$=".svg"]){width:auto;max-width:100%}
/* 図＋見出し＋文の行で、図・写真が無い行のアイコン（灰色の枠 .why-fig に白い丸）。形はデザイン products-top.css の .fig-warr（製品トップの「製品保証」の図）をそのまま共通に
   （products-top.css は製品トップでしか読まないため。色は受託の緑。製品トップでは後から読む products-top.css の青が勝つ）。2026-09-30 ユーザー指示「適したアイコンを入れて」 */
.fig-warr{width:118px;height:118px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(7px * var(--sp-k))}
.fig-warr svg{width:38px;height:38px;stroke:var(--sol);stroke-width:1.6;fill:none}
/* 「ポイント」の囲み（.point-box。デザインに無いので新設: 2026-09-30 ユーザー指示「カード内に囲みを新しく作る」→ 同日「活用例は導入事例と別物」で図と文の行 .why-row の本文の下へ。AIコンシェルジュ「活用事例」）。
   地は薄い灰色（--bg-soft）、ラベルの「!」は課題パネル .voice の「!」と同じ丸 */
.point-box{margin-top:calc(18px * var(--sp-k));background:var(--bg-soft);border-radius:var(--rd-md);padding:calc(18px * var(--sp-k)) calc(22px * var(--sp-k))}
.point-box .pl{display:inline-flex;align-items:center;gap:calc(8px * var(--sp-k));font-size:var(--fs-sub);font-weight:700;color:var(--ink)}
.point-box .pl::before{content:"!";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}
.point-box b{display:block;margin-top:calc(10px * var(--sp-k));font-size:var(--fs-body);line-height:1.7;color:var(--ink)}
.why-tx .point-box p,.point-box p{margin-top:calc(8px * var(--sp-k));font-size:var(--fs-body);line-height:1.9;color:var(--ink-soft)}
/* 図と文の行（why_rows）の「図なしのカード 2 列」と見出し下の悩みの人物イラスト（2026-10-01 ユーザー指示: 製品サポート「安心サポート事例」は「カードに画像なし、2カラム。悩みイラストをセクション見出し下に追加」）。
   カードの枠・余白は .why-row のまま、中の 2 列（図＋文）だけ 1 列に。イラストは課題パネル .voice .vp と同じ絵・同じ色（navy） */
.whyset.c2{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(24px * var(--sp-k))}
.why-row.nofig{grid-template-columns:minmax(0,1fr)}
.why-voice{display:flex;justify-content:center;margin-bottom:calc(34px * var(--sp-k))}
.why-voice svg{width:240px;height:auto}
.why-voice svg path{fill:var(--navy)}
@media(max-width:820px){.whyset.c2{grid-template-columns:minmax(0,1fr)}}
/* 製品の色で描く柔軟コンテンツ（固定ページ /products/support/ など。PageController がセクション全体を .tone-prod で包む。2026-10-01 ユーザー裁定 A）。
   部品のアクセントは受託の緑（--sol / --sol-soft）で書かれているので、包んだ中だけ製品の色に置き換える（特集の .theme-navy と同じ「祖先クラスで差分だけ」の考え方。
   .theme-prod は上線 3px を持つので包みには使わない）。.fcard の帯だけは色の直書き（#cde9da = oklch(0.909 0.036 162)）なので、同じ明るさ・彩度で製品の色相 222 に */
.tone-prod{--sol:var(--prod);--sol-soft:var(--prod-soft)}
.tone-prod .fcard .hd{background:oklch(0.909 0.036 222)}
/* 横長の関連カード（.scard.row）の中の悩みピル .aud と見出しの間。MBD の .svc .aud と同じ 13px（2026-09-30 ユーザー指摘「ピル余白」CRA「Black Duck SCA」） */
.scard.row .aud{margin-bottom:calc(13px * var(--sp-k))}
.img-figure figcaption{margin-top:calc(12px * var(--sp-k));font-size:var(--fs-sub);color:var(--ink-mute);font-weight:500;line-height:1.8}
.img-grid{align-items:start}
.dom-panel>.img-figure,.dom-panel>.img-grid{margin-top:calc(22px * var(--sp-k))}
/* 見出しの無い図版枠（image の fig_panel）では画像が先頭 → 上の 22px（見出し .fig-head との間）を外す。枠の内側の上下は枠の padding だけ（2026-10-02 ユーザー指摘「図のカード内の上余白が多い」Coverity） */
.dom-panel>:is(.img-figure,.img-grid,.img-link):first-child{margin-top:0}
.dom-panel>.img-figure img{max-width:100%}
/* 図版枠の見出しは長い文（旧原稿の「（従来）…」）でも折り返す。狭幅で枠からはみ出さない */
.fig-head :is(h3,h4,h5,h6){white-space:normal;text-wrap:balance;flex:0 1 auto;min-width:0}/* flex:none のままだと 1 行の幅から縮まず狭幅ではみ出す（2026-09-30 Black Duck SCA の 3 社ロゴの枠、390 幅） */
/* 紹介パネルの項目表（dl.hist.prof、altera.css）: 会社名 h4 を出さなくなったので（2026-09-28）、表がパネル先頭のときは h4 との間隔 margin-top 16px と 1 行目の上 padding を持たない。ロゴ枠の上端に揃える */
.mk .bd>.hist.prof:first-child{margin-top:0}
.mk .bd>.hist.prof:first-child>div:first-child{padding-top:0}

/* 対応表 .solve-tbl の行見出し td.pr に薄い地色（2026-09-29 ユーザー指示）。推し列 td.hl（physicalai.css、--blue-50）と区別できるよう地色はセクションの薄色 --bg-soft。狭幅（行が縦積み）では行の頭の帯になる */
.solve-tbl td.pr{background:var(--bg-soft)}
/* 行見出しは折り返さない（デザイン nowrap）ため、列幅（20% 等）に入りきらない見出しが隣の列にはみ出していた（2026-10-02 クライアント修正依頼 R5 Black Duck SCA「バイナリ・ファームウェア解析」。
   全ページを測ると 1000px で実績 7・IoMT 特集 1 も同じ）→ 入りきらないときだけ文節で折り返す（入る見出しは 1 行のまま）。900 以下はデザインどおり normal */
.solve-tbl td.pr{white-space:normal;word-break:auto-phrase}

/* ニュース詳細で本文が無く「詳細を見る」ボタン（.w-md > .sb-cta）だけのとき、注記 .sec-note の上に記事のときと同じ 30px（.article+.sec-note と同値。2026-09-29「wrap と sec-note の間に隙間がない」） */
.w-md+.sec-note{margin-top:calc(30px * var(--sp-k))}

/* ニュース旧本文（HTML ブロック → .article.legacy）。旧テーマ layout.css の値をそのまま: table 幅 100%・上下 28px、td は padding 12px・1px 線（色だけサイトの --line）。
   旧本文の inline padding と、固定高さの疑似ボタン（p style="display:inline-block"）は新しい行送りで文字に重なるので段落（ブロック）に戻す（2026-09-29「余白がおかしい」） */
.article.legacy table{width:100%;margin:calc(28px * var(--sp-k)) auto;border-collapse:collapse;border-spacing:0}
.article.legacy td,.article.legacy th{padding:calc(12px * var(--sp-k));border:1px solid var(--line);vertical-align:top}
/* 旧本文の固定幅（style="width:934px" の div・<hr width="910px"> 等）が PC 幅でも記事の枠から 99〜123px はみ出していた（2026-10-02 計測で 4 件: 13818・13819・13821・13824）→ 全幅で要素を枠の幅までに、hr の幅指定は打ち消す */
.article.legacy *{max-width:100%}
.article.legacy hr[width]{width:auto}
.article.legacy img{height:auto}
.article.legacy center{display:block;margin:calc(28px * var(--sp-k)) 0}
.article.legacy p{padding:0!important}
.article.legacy p[style*="inline-block"]{display:block!important;height:auto!important;margin:calc(10px * var(--sp-k)) auto 0}

/* 受託コラム（旧サイトの解説記事）の本文リンクと目次: デザインの記事本文（.article）には文中リンクの定義が無く a{color:inherit} で文字と区別がつかない。
   見出し右リンク .more と同じ紺（--navy）に下線（2026-09-29） */
.article :is(p,li) a{color:var(--navy);text-decoration:underline;text-underline-offset:.18em}
/* 受託コラムの本文に入る関連カード（.cards）・FAQ（.faq）は段落との間に 24px（.article .solve-tbl の上余白と同値。2026-09-29）。
   本文の前に固定する目次の枠（.article>.dom-panel）は画像・本文との間を 44px（.sec-head → 中身と同値。同日「目次前後余白が狭い」） */
.article :is(.cards,.faq){margin:calc(24px * var(--sp-k)) 0}
.article>.dom-panel{margin:calc(44px * var(--sp-k)) 0}

/* 一覧の絞り込みピル（.filter-pills）と一覧の間: デザインの 24px では詰まって見える（ニュース一覧・受託コラム一覧、2026-09-29 ユーザー指摘）。セクション見出し→中身と同じ 44px（.sec-head の margin-bottom） */
.filter-pills{margin-bottom:calc(44px * var(--sp-k))}
/* 絞り込みが複数の群になる一覧（実績一覧）: 1 行 = 群の名前 .k ＋ .filter-pills。群の名前の列を揃えて群ごとに 1 行にする（2026-09-30） */
.filter-rows{display:grid;grid-template-columns:max-content 1fr;gap:calc(10px * var(--sp-k)) calc(14px * var(--sp-k));align-items:baseline;margin-bottom:calc(44px * var(--sp-k))}
.filter-rows .filter-pills{margin-bottom:0}
.filter-rows .k{font-size:var(--fs-sub);font-weight:700;color:var(--ink-mute)}

/* 事例カードの技術構成要素（実績から出るカード: 実績一覧・関連事例・MBD の開発事例・SOM 分類の事例）は「 / 」でつないだ 1 行にし、丸印を付けない（2026-09-30 ユーザー指示「リストマーク消す」）。
   .spec-h4.plain（detail.css）と同じ .plain の付け方。字の大きさ・色・余白は .case li のまま */
.case ul.plain li::before{display:none}

/* TOP「WHAT IS FSI EMBEDDED」: 数字カードを一旦出さない間（2026-09-30 クライアント依頼）は、見出しブロックを横いっぱいに（2 列の右が空くため。同日ユーザー指示「端まで伸ばして」）。数字カードを戻せば .solo は付かない */
.whatis-top.solo{grid-template-columns:1fr}
.whatis-top.solo .whatis-lead p{max-width:none}
/* フッターの電話番号（2026-10-01 ユーザー指示「電話番号もちゃんとデザインして」。修正依頼 0929 p.3「受付時間を追加」）。
   形はお問い合わせ帯の .tel-num（電話アイコン＋Roboto Condensed の番号＋受付時間 .o）を、フッターの列の大きさと色（白・#b6c9e6）にしたもの */
.foot-col a.foot-tel{margin-top:calc(16px * var(--sp-k));padding-top:calc(16px * var(--sp-k));border-top:1px solid rgba(255,255,255,.14)} /* 上の「資料ダウンロード」との間に区切り線（2026-10-01 ユーザー指示）。線の色はフッター上下の区切り .foot-top と同じ */
.foot-tel .v{display:flex;align-items:center;gap:calc(7px * var(--sp-k));font-family:"Roboto Condensed",sans-serif;font-size:calc(22px * var(--fs-k));font-weight:700;color:#fff;line-height:1.1}
.foot-tel .v svg{width:17px;height:17px;fill:currentColor;stroke:none;flex:none}
.foot-tel .o{display:block;margin-top:calc(5px * var(--sp-k));font-size:var(--fs-label);color:#b6c9e6}
/* フッターの外部リンク（KUMICO・富士ソフト本体の 4 本）の印（2026-10-01 ユーザー指示「外部リンクアイコン付けて」。デザインに無い。Icons 'external'、文字色に合わせる） */
.foot-ext svg{display:inline-block;margin-left:calc(5px * var(--sp-k));vertical-align:-1px;opacity:.8}
/* 資料DL帯の表紙画像（2026-10-01 ユーザー指定）。PC（2 列のとき）は右下にはみ出して置く: 幅 38%・right -20px・bottom -30px（帯の overflow:hidden で切れる）。
   860px 以下（1 列）はユーザー指示「他よしなに」: 文と重ならないよう文の下に流し、右端に寄せて同じように右下へはみ出す（帯の余白 28px / 40px ＋ はみ出し 20px / 30px を負のマージンで） */
.dl-band{position:relative}
.dl-cover{width:38%;min-width:0;position:absolute;right:-20px;bottom:-30px;margin:0}
/* ボタンの文言が長いとき（例 /solutions/rag-ai-assistant/）に列からはみ出して画像に重なる・帯で切れるので、ボタンは列の幅で折り返す（既知の「620 以下で 30px はみ出す」もこれで解消） */
.dl-band .btn{white-space:normal;max-width:100%}
.dl-band .btn svg{flex:none} /* 折り返したときにアイコンが潰れないように */
@media(max-width:860px){
  .dl-band{grid-template-columns:minmax(0,1fr)}
  .dl-cover{position:static;width:72%;max-width:none;justify-self:end;margin:calc(14px * var(--sp-k)) calc(-48px * var(--sp-k)) calc(-70px * var(--sp-k)) auto}
}
@media(max-width:620px){.dl-cover{width:100%;margin-right:auto}} /* スマホは列が細いので表紙を列の幅いっぱいに（右へのはみ出しはやめた。2026-10-16 ユーザー「.dl-cover margin-right: auto; width: 100%」。それまで幅 88%） */
/* 工程フローのカードのピル（.stage .tags .tag-pill）は、文言がカード幅より長いと右にはみ出す（デザイン版 solution-physicalai も同じ組み。2026-10-01 ユーザー指摘「はみ出してる」）。カード内では折り返す */
.stage .tags .tag-pill{white-space:normal;max-width:100%}
/* 表の下の注釈（※…）は左揃え・太字にしない（共通の .mk-note は中央・600。2026-10-01 ユーザー指示: フィジカル AI 他社比較の注釈）。幅は表の枠（1080）にそろえる */
:is(.solve-tbl, .table-group, .subsec:has(> .solve-tbl)) + .mk-note{text-align:left;font-weight:500}
.subsec.w-md:has(> .solve-tbl) + .mk-note{max-width:1080px;margin-left:auto;margin-right:auto}
/* 見出しの前のまとめ文（.sec-close.lg、デザインの下余白 22px）と、その下の見出しの間を広げる（2026-10-01 ユーザー指摘: DMS/EMS「一括して管理します。」の下の余白が少ない） */
.sec-close.lg + .intro-head{margin-top:calc(56px * var(--sp-k))} /* 余白は重なる（.sec-close.lg の下 22px と合わせて 56px） */
/* 見出しの前のまとめ文で始まるセクション（課題の下の「その課題、〜が解決します」）: 上の余白を 120＋46px → 80px に詰める（2026-10-02 クライアント修正依頼「スペースを縮める」、
   まとめ文は大 24px に集約と同時）。980px 以下はセクションの余白 84px を同じ比率で 56px に */
section.block:has(> .wrap > .sec-close:first-child){padding-top:calc(80px * var(--sp-k))}
.wrap > .sec-close:first-child{margin-top:0}
@media(max-width:980px){section.block:has(> .wrap > .sec-close:first-child){padding-top:calc(56px * var(--sp-k))}}
/* QNX 事例の比較表の Device 行（AMD ZYNQ ロゴ。旧サイトの画像 300×182）。ワイヤーどおり表の中にロゴ（2026-10-01） */
.solve-tbl td.qnx-dev img{display:block;width:140px;max-width:100%;height:auto}
/* 本文の枠の先頭が h4 のとき（見出し h3 を枠の外に出した DMS/EMS「各工程のサービス詳細」）、h2 と同じく上の余白を付けない（2026-10-01） */
.article>h4:first-child{margin-top:0}
/* フィジカル AI のヒーロー直後「Modalix DevKit」の製品カード（.dk-card。views/components/partials/physical-devkit.php）。
   2026-10-01 ユーザー指示「新規デザインでいいからカード完結でいい感じで」: 写真・見出し・価格・問い合わせを 1 枚に収める。色・角丸・影・書体はサイトのトークン、
   左の写真の地は受託の薄い緑（--sol-soft）、見出し帯は Figma レビューのワイヤー（緑の帯に白文字）、問い合わせはお問い合わせの規則どおりオレンジ（.btn-accent） */
.dk-card{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);background:#fff;border:1px solid var(--line);border-radius:var(--rd-lg);box-shadow:var(--sh-1);overflow:hidden;max-width:1080px;margin:0 auto}
.dk-media{display:flex;align-items:center;justify-content:center;padding:calc(32px * var(--sp-k)) calc(28px * var(--sp-k));background:radial-gradient(120% 90% at 50% 40%,#fff 0%,var(--sol-soft) 70%)}
.dk-photo{display:block;width:100%;max-width:400px;height:auto}
.dk-body{padding:calc(36px * var(--sp-k)) calc(40px * var(--sp-k)) calc(34px * var(--sp-k));display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.dk-tag{display:inline-block;background:var(--sol);color:#fff;font-size:var(--fs-ui);font-weight:700;line-height:1.5;padding:calc(6px * var(--sp-k)) calc(14px * var(--sp-k));border-radius:6px}
.dk-name{display:flex;align-items:center;flex-wrap:wrap;gap:calc(8px * var(--sp-k)) calc(16px * var(--sp-k));margin-top:calc(20px * var(--sp-k))}
.dk-logo{display:block;height:34px;width:auto}
.dk-name :is(h2,h3){font-size:calc(30px * var(--fs-k));font-weight:900;line-height:1.3;color:var(--sol);letter-spacing:-0.01em}
.dk-lead{margin-top:calc(12px * var(--sp-k));font-size:var(--fs-body);line-height:1.9;color:var(--ink-soft);font-weight:500}
.dk-foot{display:flex;align-items:center;flex-wrap:wrap;gap:calc(16px * var(--sp-k)) calc(28px * var(--sp-k));margin-top:calc(22px * var(--sp-k));padding-top:calc(20px * var(--sp-k));border-top:1px solid var(--line);width:100%}
.dk-price{display:flex;align-items:baseline;gap:calc(8px * var(--sp-k));flex-wrap:wrap}
.dk-price .k{font-size:var(--fs-sub);font-weight:700;color:var(--ink-mute);border:1px solid var(--line);border-radius:6px;padding:2px calc(8px * var(--sp-k));align-self:center}
.dk-price .v{font-family:"Roboto Condensed",sans-serif;font-size:calc(40px * var(--fs-k));font-weight:700;line-height:1;color:var(--ink)}
.dk-price .u{font-size:var(--fs-body);font-weight:700;color:var(--ink)}
.dk-foot .btn{margin-left:auto}
@media(max-width:820px){.dk-card{grid-template-columns:minmax(0,1fr)}.dk-media{padding:calc(24px * var(--sp-k))}.dk-body{padding:calc(26px * var(--sp-k)) calc(24px * var(--sp-k)) calc(28px * var(--sp-k))}.dk-foot .btn{margin-left:0}}
@media(max-width:620px){.dk-name :is(h2,h3){font-size:calc(24px * var(--fs-k))}.dk-logo{height:28px}.dk-price .v{font-size:calc(34px * var(--fs-k))}.dk-foot .btn{white-space:normal}}
/* 詳細版（MLSoC セクション後半の DevKit 紹介。physical-devkit-detail）: 各部の名前入り基板写真を大きく（白地・左右 1:1）、3 つの特長は dl.dk-points */
.dk-card.detail{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.dk-card.detail .dk-media{background:#fff;border-right:1px solid var(--line);padding:calc(24px * var(--sp-k))}
.dk-card.detail .dk-photo{max-width:none}
.dk-card.detail .dk-name :is(h2,h3){font-size:calc(26px * var(--fs-k))}
.dk-points{display:grid;gap:calc(12px * var(--sp-k));margin:calc(16px * var(--sp-k)) 0 0}
.dk-points dt{display:flex;align-items:center;gap:calc(8px * var(--sp-k));font-size:var(--fs-body);font-weight:900;color:var(--ink)}
.dk-points dt::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sol);flex:none}
.dk-points dd{margin:2px 0 0 calc(14px * var(--sp-k));font-size:var(--fs-body);line-height:1.8;color:var(--ink-soft);font-weight:500}
@media(max-width:820px){.dk-card.detail{grid-template-columns:minmax(0,1fr)}.dk-card.detail .dk-media{border-right:0;border-bottom:1px solid var(--line)}}
/* 価格とボタンが 2 段になる幅（詳細版はいつも、1 枚目は 1100px 以下）はボタンを左揃えに（右に 1 つだけ残ると浮く） */
.dk-card.detail .dk-foot .btn{margin-left:0}
@media(max-width:1100px){.dk-foot .btn{margin-left:0}}
/* 見出し帯＋箇条書きのカード（.fcard）の箇条書きの下の図（任意。フィジカル AI「Micron との戦略的連携」の SiMa←出資・最先端メモリ技術の提供←micron、2026-10-01）。カードの下端にそろえ、上に細い区切り */
.fcard .fc-fig{margin:auto calc(22px * var(--sp-k)) 0;padding:calc(14px * var(--sp-k)) 0 calc(18px * var(--sp-k));border-top:1px solid var(--line)}
.fcard .fc-fig img{display:block;width:100%;max-width:480px;height:auto;margin:0 auto}
/* 画像（image）の「狭い幅では縮めずに横スクロール」（.img-figure.scroll。DMS/EMS・QNX の図版 4 点。2026-10-01 ユーザー指示「はみ出しても良い（横スクロール）」）。
   図の中の文字が読める大きさ（図は横 2160px で描いてあるので、全幅の図は 820px、60% の図は 560px）より小さくしない */
.img-figure.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.img-figure.scroll img{min-width:820px}
.img-figure.scroll img.img-60{min-width:560px}
/* テンプレートに直接置いた横長の図（受託トップ・FPGA の工程の帯 process_bar.svg、モデルベース開発の V 字図 .vfig、ASIC 特集の MIPI のブロック図）も同じ枠 .img-figure.scroll に入れた（2026-10-07 ユーザー「横長の図が縮んで読めない：いつものように対応して」）。
   PC の位置・大きさは変えない: SVG の図は角を丸めない（図の端の箱が欠ける）／V 字図の上下の余白（mbd.css の .vfig 14px・26px）は枠に移す */
.img-figure.scroll>img[src$=".svg"]{border-radius:0}
.img-figure.scroll>svg{min-width:820px}/* 画像だった図をコードの図（インライン SVG）にしたもの（2026-10-10。文字・色を書き換えられるように: モデルベース開発の V 字図 .vfig、DMS/EMS の全体像）。画像のときと同じ下限 */
.img-figure>svg{display:block;width:100%;height:auto;margin:0 auto}/* 画像（.img-figure img）と同じ置き方。.vfig は mbd.css の max-width 1080 がそのまま効く */
@media(min-width:1101px){.img-figure.scroll img.img-80{min-width:0}}/* 幅 80% の図は PC で 808px（1080 の枠の中）。820px の下限で 12px 大きくならないよう、PC では下限を外す（製品開発支援の事例の図 4 点） */
.img-figure:has(>.vfig){margin-top:calc(14px * var(--sp-k));margin-bottom:calc(26px * var(--sp-k))}

/* 検索結果（/search/・/products/search/。デザインに無いページ、2026-10-01）: TOP の検索窓 .bigsearch と人気のキーワード .quick を、左揃えのヒーロー .page-hero に置く（製品検索は製品色。products-top.css の .page-hero .bigsearch と同じ考え） */
.srch-hero .bigsearch{margin:calc(28px * var(--sp-k)) 0 0;max-width:880px;box-shadow:var(--sh-2)}
.srch-hero .bigsearch:focus-within{transform:none}
.srch-hero.theme-prod .bigsearch{border-color:var(--prod)}
.srch-hero.theme-prod .bigsearch>svg{stroke:var(--prod)}
.srch-hero .quick{justify-content:flex-start}

/* 検索の候補表示（入力中のドロップダウン。modules/search-suggest.js が body 直下に置き、検索窓の下に合わせる。デザインに無い UI、2026-10-01）。
   白地・線・角丸・影はカードと同じトークン、種別の見出しは絞り込み .fs-h と同じ小さい文字、選択中は薄色の地 */
.srch-sug{position:absolute;z-index:1000;background:#fff;border:1px solid var(--line);border-radius:var(--rd-md);box-shadow:var(--sh-2);padding:calc(6px * var(--sp-k)) 0;text-align:left;max-height:min(70vh,560px);overflow:auto}
.srch-sug .sg-h{display:flex;justify-content:space-between;gap:calc(12px * var(--sp-k));padding:calc(12px * var(--sp-k)) calc(18px * var(--sp-k)) calc(4px * var(--sp-k));font-size:var(--fs-label);font-weight:700;color:var(--ink-mute);letter-spacing:.04em}
.srch-sug a{display:flex;align-items:center;gap:calc(12px * var(--sp-k));padding:calc(7px * var(--sp-k)) calc(18px * var(--sp-k));font-size:var(--fs-ui);color:var(--ink);line-height:1.5}
/* サムネイル（2026-10-01 ユーザー指示）: 44px の枠。製品写真・ロゴは収める、受託・記事の画像（.cv）は枠いっぱい、製品カテゴリ（.ic）は .pcat .ic と同じアイコン地 */
.srch-sug a .th{flex:none;width:44px;height:44px;border-radius:8px;border:1px solid var(--hair);background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.srch-sug a .th:empty{background:var(--bg-soft)}
.srch-sug a .th img{width:100%;height:100%;object-fit:contain;padding:calc(3px * var(--sp-k))}
.srch-sug a .th.cv img{object-fit:cover;padding:0}
.srch-sug a .th.ic{background:var(--prod-soft);border-color:transparent}
.srch-sug a .th.ic svg{width:22px;height:22px;stroke:var(--prod);fill:none;stroke-width:1.8}
.srch-sug a .t{min-width:0;font-weight:700}/* 候補の名前は太字（2026-10-01 ユーザー指示） */
.srch-sug a .s{margin-left:auto;flex:none;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-sub);color:var(--ink-mute)}
.srch-sug a:hover,.srch-sug a.on{background:var(--bg-soft);color:var(--navy)}
.srch-sug .sg-all{border-top:1px solid var(--line);margin-top:calc(6px * var(--sp-k));padding-top:calc(12px * var(--sp-k));font-weight:700;color:var(--navy)}
/* 検索結果の行（.srch-rows > .scard.row）: 狭い幅でも画像を左の小さな枠に残す（.scard.row は 820px 以下で 1 列＝画像が全幅になり、結果が 1 画面に 1 件しか入らない） */
@media(max-width:820px){.srch-rows .scard.row{grid-template-columns:88px 1fr;gap:calc(14px * var(--sp-k));align-items:start;padding:calc(18px * var(--sp-k))}}
/* 検索結果の絞り込みで 0 件の項目（input:disabled）: 消さずに薄く・押せない（2026-10-01 ユーザー指示「0 件だった場合 disabled」） */
.fgroup label:has(input:disabled){color:var(--ink-mute);opacity:.5;cursor:default}
.fgroup label:has(input:disabled):hover{background:none}
/* 製品カードの仕様欄（.pcard .spec）: 区切りの無い長い型番（例「ZU48/ZU47/ZU43/ZU28/ZU27/ZU25DR」）で列が広がりカードの外へはみ出す。列を内容で広げず、型番は途中で折り返す（2026-10-01 検索結果の製品タブで発見。中分類一覧も同じカード） */
.pcard .spec,.why-tx .spec{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.pcard .spec dd,.why-tx .spec dd{overflow-wrap:anywhere}
/* 検索結果の種別タブ（.page-tabs）で 0 件のタブ（a.off、href 無し）: 薄く・押せない（2026-10-01 ユーザー指示） */
.page-tabs nav a.off{color:var(--ink-mute);opacity:.45;cursor:default}
.page-tabs nav a.off:hover{color:var(--ink-mute)}

/* ==== 狭い幅のはみ出し（2026-10-01 全ページ点検 1,112 ページ × 620 / 390。ユーザー指示「2 を対応」）。PC の見た目は変えない ==== */
/* ボタン（.btn は white-space:nowrap）: 文言が長いと画面からはみ出す。お問い合わせ「組み込み製品や受託開発に関して問い合わせる」（全ページ、390 で 14px）、
   業界・テクノロジー・メーカーの「〜をもっと見る」（620 で最大 694px）、ヒーローの CTA、特集の「〜の詳細」。640 以下は枠を超えるときだけ折り返す */
@media(max-width:640px){.btn{white-space:normal;max-width:100%;text-align:center}}
/* 原稿の改行位置の指定（style="white-space:nowrap" の span。例 テスト自動化・RAG の h2）: 640 以下は効かせない（行より長いと画面からはみ出す） */
@media(max-width:640px){[style*="white-space:nowrap"]{white-space:normal!important}}
/* KUMICO（TOP・受託開発トップの #kumico .kumi）: 紹介 360px＋記事の 2 列のまま縮まず 620 で 14px はみ出す（デザイン版 index.html も同じ）。860 以下は 1 列 */
@media(max-width:860px){.kumi{grid-template-columns:minmax(0,1fr);gap:calc(32px * var(--sp-k))}}
/* 実績の見出し行（.ach-head。TOP の受託・製品）: 見出しが縮まず 390 で 17px はみ出す。.fig-head h4 と同じく縮めて折り返す */
@media(max-width:640px){.ach-head{gap:calc(12px * var(--sp-k))}.ach-head :is(h3,h4,h5,h6){flex:0 1 auto;min-width:0;text-wrap:balance}.ach-head .ln{min-width:12px}}
/* 製品検索の帯（.psearch。TOP の製品販売・中分類ページ下・メーカーページ）: カテゴリの選択が最長の分類名の幅のまま縮まない。640 以下は選択を 1 行目に */
@media(max-width:640px){.psearch{flex-wrap:wrap}.psearch-cat{flex:1 1 100%;border-right:0;border-bottom:1.5px solid var(--line)}.psearch-cat select{width:100%;min-width:0}.psearch-mid{flex:1 1 0;min-width:0;padding:calc(12px * var(--sp-k)) calc(14px * var(--sp-k))}.psearch-mid input{min-width:0;width:100%}}
/* 製品トップのヒーロー検索（.bigsearch .cat 付き）: 640 以下はカテゴリの選択を 1 行目に */
@media(max-width:640px){.bigsearch:has(.cat){flex-wrap:wrap}.bigsearch .cat{flex:1 1 100%}.bigsearch .cat select{width:100%}.bigsearch input{min-width:0}}
/* 受託開発トップの業界別実績（.iblock .ib-top 写真＋文の 2 列）: 700 以下も 2 列のまま 390 で 122px はみ出す → 1 列 */
@media(max-width:700px){.ib-top{grid-template-columns:minmax(0,1fr);gap:calc(20px * var(--sp-k))}}
/* 実績一覧の絞り込み（.filter-rows ラベル＋ピル）: 長い区分名のピルが縮まない。640 以下はラベルを上に、ピルは折り返す */
@media(max-width:640px){.filter-rows{grid-template-columns:minmax(0,1fr);gap:calc(6px * var(--sp-k))}.filter-pills .f-cat{white-space:normal;max-width:100%}}
/* MBD の組み合わせ例（.combo）: 900 以下の 1 列が内容の最小幅（1fr）で 390 で 41px はみ出す → 列を縮める */
@media(max-width:900px){.combo{grid-template-columns:minmax(0,1fr)}.combo-row>*{max-width:100%;min-width:0}}
@media(max-width:640px){.combo-row{padding:calc(18px * var(--sp-k)) calc(16px * var(--sp-k))}}
/* 製品詳細の上段（.pdp-top 写真＋仕様）: 980 以下の 1 列で、列の最小幅が写真・型番の幅のまま 18px はみ出す */
.pdp-top>*{min-width:0}
/* 製品詳細の写真（.pdp-media img。枠＝白地・線・余白 16px は画像自体に付いていて幅 100%）: 元が枠より小さい写真（2026-10-02 計測で 99 件、199〜371px）を引き伸ばしてぼやけるので、
   写真は元の大きさを上限に枠の中央へ（scale-down）。枠の幅は「写真の元の幅」と「390px（PC の列幅。列がそれより狭ければ列幅）」の大きい方で、列幅が上限。
   PC は今までどおり 390px の枠。980px 以下の 1 列では、元が大きい写真は今までどおり列いっぱい、小さい写真は 390px の枠で中央（列いっぱいの枠だと余白だらけになる）。
   2026-10-02 ユーザー「あなたで完結するものだけ進めて」 */
.pdp-media img{width:auto;max-width:100%;min-width:min(100%,390px);margin-inline:auto;object-fit:scale-down}
/* 本文の長い URL（リンク・地の文。受託コラム・特集・ニュースの .article。例 /features/fpga4k8k/ultra-lowlatency/ の出典 URL）: 折り返す */
.article{overflow-wrap:break-word}
.article a{overflow-wrap:anywhere}
/* 旧ニュースの本文（.article.legacy）: 旧 HTML の固定幅（style="width:640px" の div・934px の表）がはみ出す。860 以下は幅を本文に収め、表は枠の中で横スクロール */
@media(max-width:860px){.article.legacy *{overflow-wrap:anywhere}.article.legacy table{display:block;overflow-x:auto}}/* 枠の幅までの指定は上の全幅の指定（2026-10-02）に寄せた */
/* 図と文の行（.whyset .why-row）: 980 以下の 1 列が内容の最小幅（製品トップ #benefits のロゴ格子）のまま 390 で 94px はみ出す → 列を縮める */
@media(max-width:980px){.whyset{grid-template-columns:minmax(0,1fr)}.why-row{grid-template-columns:minmax(0,1fr)}}
/* お問い合わせの枠（.contact-inner 左右 48px）・実績パネル（.ach-panel 48px）: 390 で中身が 236px まで狭まり、ボタン・見出しが 3 行に折れる。640 以下は左右の余白を詰める */
@media(max-width:640px){.contact-inner{padding:calc(36px * var(--sp-k)) calc(20px * var(--sp-k))}.ach-panel{padding:calc(32px * var(--sp-k)) calc(20px * var(--sp-k))}}
/* 見出しの長い語句（word-break:auto-phrase で 1 語扱いになる「組み込みソフトウェア受託開発」等。受託開発トップ h2 35px が 390 で 486px）: 640 以下は語の途中でも折り返す */
@media(max-width:640px){:is(h1,h2,h3){overflow-wrap:anywhere}}
/* セクション見出し h2（35px）: 390 でも 35px のままで語の途中で折れる → 640 以下は 26px（2026-10-02 ユーザー裁定 B）。
   TOP 等の .sec-head h2 はデザインで 980 以下 24px になっているので対象外。残っていた 35px の 3 つ（セクション導入・〜とは・お問い合わせ） */
@media(max-width:640px){:is(.intro-head,.whatis-lead,.contact-inner) h2{font-size:calc(26px * var(--fs-k))}}
/* スマホの文字サイズ（2026-10-04 ユーザー指示「PC とスマホでサイズが変わらないのが問題。スマホサイズで上書きするトークンを作れ」「本文は 14px ベースで他も同じように下げて」「トークン使ってないフォントサイズもなんとかして」）:
   640 以下（列が 1 列に落ちる幅）で文字サイズの倍率 --fs-k を 0.875 に＝本文 16 → 14px と同じ割合で、役割トークンも直値（calc(Npx * var(--fs-k))）もすべて下げる。
   上の h2 26px も 22.75px になる。丸の中の印・SVG の図の中の文字は対象外（fsi-embedded.css の :root の説明） */
@media(max-width:640px){:root{--fs-k:.875}}
/* スマホの余白（2026-10-04 ユーザー「スマホの余白も調整したい。一旦同じ割合で見てみたい」）: 640 以下で余白の倍率 --sp-k を文字と同じ 0.875 に（margin・padding・gap。2px 以下は対象外。tools/scale-spacing.py） */
@media(max-width:640px){:root{--sp-k:.875}}
/* 製品詳細の仕様（.pdspec）: 区切りの無い長い型番（例「ZU48/ZU47/ZU43/ZU28/ZU27/ZU25DR」）で値の列が広がる → 値の列を縮めて折り返す */
.pdspec>div{grid-template-columns:158px minmax(0,1fr)}
.pdspec dd{overflow-wrap:anywhere}
/* 図と文の行（.why-tx）の項目表 dl.spec（製品カードの定義リストと同じ体裁。fsi-embedded.css の .pcard .spec にセレクタを足した。2026-10-02 ユーザー指示）:
   見出しとの間、長い値（20 字以上）の 1 列 .long は本文と同じ文字（太字にしない） */
.why-tx .spec{margin-top:calc(14px * var(--sp-k))}
.why-tx .spec+.spec{margin-top:0}
.why-tx .spec.long{grid-template-columns:minmax(0,1fr)}
.why-tx .spec.long dd{font-size:var(--fs-body);font-weight:500;line-height:1.85;color:var(--ink-soft);margin-top:2px}
/* 本文の後に出す内訳の項目表（.spec.sub。why_rows の欄 spec_after、Coverity「特長」2026-10-02 クライアント修正依頼 S1「旧ページと同じく区切り線」）: 項目名は小項目の見出しなので、
   属性ラベル（分野・対象機器 等の 13px 灰色）ではなく本文の大きさの太字（もとの <b> と同じ強さ）。本文との間は 18px */
.why-tx p+.spec.sub{margin-top:calc(18px * var(--sp-k))}
.why-tx .spec.sub dt{font-size:var(--fs-body);font-weight:800;color:var(--ink);line-height:1.6}
.why-tx .spec.sub>div{padding:calc(12px * var(--sp-k)) 0}
.why-tx .spec.sub>div:first-child{border-top:1px solid var(--hair)}

/* 工程フローのカードの「置き換え前 → 置き換え後」（.stage .swap。FPGA マイグレーション「導入実績例」を旧ページの形に、2026-10-02 クライアント修正依頼・ユーザー裁定 A）。
   2 つの枠を図の段間コネクタ .fig-arrow（solution-mfg-data / testauto と同じ下向き矢印）でつなぐ。枠は薄い地＋線、角丸は既存の --rd-md */
.stage .swap{margin-top:calc(16px * var(--sp-k))}
.stage .swap .fig-arrow{margin:calc(8px * var(--sp-k)) auto}
.swap-box{border:1px solid var(--line);background:var(--bg-soft);border-radius:var(--rd-md);padding:calc(10px * var(--sp-k)) calc(14px * var(--sp-k));text-align:center;font-size:var(--fs-body);font-weight:700;color:var(--ink);line-height:1.6}
/* 導入文の囲み（.lead-panel）の直後に同じセクションで続く部品（.joined）: 40 → 64px（中見出しの区切り .task-sub と同じ間隔）。
   続きが見出しで始まるときだけ（キッカー＋見出し）。FPGA マイグレーションの導入文を CERTIFIED PARTNER の見出しの上に入れた形（2026-10-02 ユーザー指示「導入文の下のスペースをもう少し空けて」） */
/* → 見出しで始まる続きの部品は 64px（ファイル末尾の決まりに吸収、2026-10-02） */

/* ソリューションのバナー（.promo。TOP の PICK UP と同じ骨格）の変種（2026-10-02 OpenVINO の AI アラカルト、ユーザー指示「小さいバージョン・紺ではなく白バージョン」）。
   .light: 白地・線・濃い文字、写真の上のぼかしも白に（紺の .promo::before と同じ位置）。.sm: 幅 1080 → 920px、高さ 208 → 136px、余白・見出しを小さく */
.promo.light{background:#fff;border-color:var(--line);color:var(--ink);box-shadow:var(--sh-1)}
.promo.light::before{background:linear-gradient(95deg,#fff 0%,#fff 38%,rgba(255,255,255,.92) 48%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 100%)}
.promo.light:hover{border-color:var(--hair);box-shadow:var(--sh-2)}
.promo.light .promo-tx :is(h3,h4,h5,h6){color:var(--ink)}
.promo.light .promo-tx p{color:var(--ink-soft)}
.promo.light .promo-link{color:var(--navy)}
.promo.sm{min-height:136px;padding:calc(20px * var(--sp-k)) calc(32px * var(--sp-k));max-width:920px}/* 幅 1080 → 920（課題パネル・.sw-sm と同じ幅。同日ユーザー指示「気になるのは高さより幅」） */
:is(.sw-sm,.sw-md,.sw-lg) :is(.wrap,.joined) > .promo.sm{max-width:920px}/* セクション幅をそろえる共通の指定（fsi-embedded.css の :is(.sw-…) … > :is(…,.promo,…){max-width:var(--sw)}）より強く */
.promo.sm .promo-tx :is(h3,h4,h5,h6){font-size:var(--fs-card);margin-top:0}
.promo.sm .promo-tx .promo-tag + :is(h3,h4,h5,h6){margin-top:calc(7px * var(--sp-k))}
.promo.sm .promo-tx p{margin-top:calc(6px * var(--sp-k))}
.promo.sm .promo-link{margin-top:calc(8px * var(--sp-k))}
@media(max-width:640px){.promo.light::before{background:linear-gradient(95deg,#fff 0%,#fff 50%,rgba(255,255,255,.85) 72%,rgba(255,255,255,.6) 100%)}}/* 狭い幅は文字が写真にかかるので白のぼかしを強める */

/* アイコン付き説明カードの見出し下の文（.indp>.lead）: ふつうの太さの説明文（AppSec の詳細カード .dtl-grid .indp>.lead と同じ体裁を共通に）。
   .indp>p（太字の一文）とは別。エッジ AI カメラ「i-PRO 社カメラについて」を囲みからカードに（2026-10-02 ユーザー指示「サイトの流儀にならってカードに」） */
.indp>.lead{font-size:var(--fs-body);color:var(--ink-soft);line-height:1.9;font-weight:500;margin-top:calc(14px * var(--sp-k))}
.indp>.lead+.lead{margin-top:calc(10px * var(--sp-k))}
.indp>.lead a{color:var(--sol);text-decoration:underline}

/* アイコン付き説明カードの箇条書きの列数（.cards.list2 / .list3。1 列のカードで右が空くとき。エッジ AI カメラ「カメラ機能一覧」は 3 列、2026-10-02 ユーザー指示「右側が空きすぎ」「3 カラム」） */
.list2 .indp ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:calc(40px * var(--sp-k))}
.list3 .indp ul{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:calc(32px * var(--sp-k))}
@media(max-width:860px){.list3 .indp ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){:is(.list2,.list3) .indp ul{grid-template-columns:minmax(0,1fr)}}
/* 見出し下の文の強調（<b>。旧ページの青い強調＝受託の緑）と、カードの中の写真（.indp-imgs。横並び・下そろえ・元の大きさより大きくしない）。エッジ AI カメラ「i-PRO 社カメラについて」2026-10-02 */
.indp>.lead b{font-weight:900;color:var(--sol)}
.indp-imgs{display:flex;justify-content:center;align-items:flex-end;flex-wrap:wrap;gap:calc(20px * var(--sp-k)) calc(28px * var(--sp-k));margin-top:calc(24px * var(--sp-k))}
.indp-imgs img{display:block;width:auto;height:auto;max-width:min(100%,calc((100% - 56px) / 3));max-height:140px}/* 220 → 140px（同日ユーザー指示「写真でかい」） */
@media(max-width:640px){.indp-imgs img{max-width:calc((100% - 28px) / 2);max-height:110px}}

/* アイコン付き説明カードの中の注記（.indp>.note。製品詳細のカードの注記 .rail-card .note と同じ大きさ・薄い文字・ふつうの太さ。.indp>p の太字は当てない）。
   エッジ AI カメラ「カメラ機能一覧」の「※機種により異なります。」（2026-10-02 ユーザー指示「注釈。括弧いらない」） */
.indp>p.note{font-size:var(--fs-sub);color:var(--ink-mute);font-weight:500;line-height:1.7;margin-top:calc(14px * var(--sp-k))}

/* アイコン付き説明カードの中のアイコンの並び（.indp-icons。画像＋ラベル。アプリケーション開発「組み込み機器向けGUI」の旧ページのアイコン 6 つ、2026-10-02 ユーザー指示「現ページのアイコンはそのまま活かしたい」）。
   .indp ul の箇条（点）を当てないよう div で組む */
.indp-icons{display:flex;flex-wrap:wrap;gap:calc(18px * var(--sp-k)) calc(26px * var(--sp-k));margin-top:calc(22px * var(--sp-k))}
.indp-icons>div{display:flex;flex-direction:column;align-items:center;gap:calc(8px * var(--sp-k));min-width:84px;font-size:var(--fs-sub);font-weight:700;color:var(--ink-soft);text-align:center;line-height:1.4}
.indp-icons img{display:block;height:44px;width:auto}
/* カードの中の写真が 1 枚（図）のときは、写真の並びの大きさ制限をせず元の大きさ・カードの幅まで（アプリケーション開発「IoT システムの構築」「エッジ AI 開発」の図、2026-10-02） */
.indp-imgs img:only-child{max-height:none;max-width:100%}
@media(max-width:640px){.indp-icons{gap:calc(16px * var(--sp-k)) calc(10px * var(--sp-k))}.indp-icons>div{min-width:76px}}/* 狭い幅は 3 つずつ並ぶように */
/* アイコン付き説明カードの見出しを大きく（.cards.title-lg。20 → 24px＝中見出し .task-sub と同じ）。下に続くグループ見出し（.grp-h 22px）より小さく見えるとき。
   アプリケーション開発「アプリケーション開発実績」の 4 枚（2026-10-02 クライアント修正依頼 G3「上が H3、下が H4 だが下の方が大きい。H3 サイズを大きくしたい」） */
.title-lg .indp>:is(h3,h4,h5,h6){font-size:calc(24px * var(--fs-k))}

/* ==== 見出しまわりの余白の決まり（2026-10-02 ユーザー指摘「余白管理が雑。見出しの下が部品どうしの間より狭い」→ アプリケーション開発で試して OK、全ページへ） ====
   上下の関係は「見出しの上 ＞ 見出しの下 ≧ 部品どうしの間」、段が深いほど小さく:
   h2（セクション見出し）: 上 120px（セクションの上端。今のまま）・下 → 中身 48px・→ リード文 14px（今のまま）
   h3（小見出し .grp-h／中見出し .task-sub）: 上 64px・下 → カード・表・図 32px・→ 概要文 14px（概要文 → 中身 32px）
   見出しのない続きの部品どうし（.joined）32px、見出しで始まる続きの部品 64px。1 つの並びの中のカードの間（.cards の gap 18px）は変えない */
.intro-head{margin-bottom:calc(48px * var(--sp-k))}
.grp-h{margin-top:calc(64px * var(--sp-k));margin-bottom:calc(32px * var(--sp-k))}
.grp-h:first-child{margin-top:0}
.grp-h:has(+ .grp-tx){margin-bottom:calc(14px * var(--sp-k))}
.grp-tx{margin-bottom:calc(32px * var(--sp-k))}
.grp-h + .whyset{margin-top:calc(32px * var(--sp-k))}
.toolset>.cards+.grp-h{margin-top:calc(64px * var(--sp-k))}/* appsec.css の 40px を決まりに */
.task-sub .lead{margin-top:calc(14px * var(--sp-k))}
.task-sub .cards.mt,.task-sub + .cards.mt{margin-top:calc(32px * var(--sp-k))}
.joined:has(> .intro-head:first-child, > .grp-h:first-child, > :first-child > .grp-h:first-child){margin-top:calc(64px * var(--sp-k))}
.intro-head + :is(.grp-h,.task-sub){margin-top:0}/* h2 の直後の小見出し・中見出しは h2 の下（48px）だけ（小見出しの上 64px を当てない） */
.intro-head:has(+ .sec-note){margin-bottom:calc(14px * var(--sp-k))}/* 見出しの下の注記（intro_note）は概要文の扱い: 見出し → 14px、注記 → 中身 32px */
.intro-head + .sec-note{margin-bottom:calc(32px * var(--sp-k))}
.sec-close.lg + .intro-head:not(:has(*)){margin-top:0}/* まとめ文だけで見出しの無いセクション: まとめ文 → 中身 48px（h2 の下と同じ） */
/* 選ばれる理由などの見出し（.reason の h3〜h6）は読点・句点のところで折り返す: テンプレートで読点・句点ごとの塊 span.hchunk に分け（Fields::phrases）、塊を途中で折らない。
   1 行に収まらない塊だけは塊の中で語の切れ目（auto-phrase）で折る。読点の無い見出しは今までどおり。例「機器開発の「当事者」だから、｜製品がわかる」
   （2026-10-02 ユーザー指示「reason 見出しは読点で改行されるように」。keep-all で試したら読点の無い見出しが語の途中で折れたのでこの形に） */
.reason :is(h3,h4,h5,h6){word-break:auto-phrase}/* 読点の無い見出しも文節の切れ目で（「サポー｜ト」のような 1 文字の折り返しを出さない） */
.reason :is(h3,h4,h5,h6) .hchunk{display:inline-block}
.intro-head h2 .hchunk{display:inline-block}/* セクション見出しのかたまり（受託トップ「対応プラットフォーム」「ハードウェア開発ソリューション実績」。テンプレートのインラインの指定だったのをクラスに＝スマホで解けるように。2026-10-07） */

/* 強調リード（見出し下の文の強調版 p.lead-em。intro の欄 lead_em、2026-10-02 クライアント修正依頼 AppSec P2〜P4「1 ポイント大きく・太字・下線」）。
   ワイヤーのグレーの帯を写すのではなく、サイトの強調の言葉（テーマ色のアクセント・細い線・塗りは淡く）で組む:
   文字は --fs-lead 17px・700・濃い色（--ink）。<strong> で囲んだ主張の一文だけ 900 にして、テーマ色の色相のまま明るく鮮やかにしたマーカー（oklch L0.87・C0.12）を文字の下側（58〜92%）に敷く。
   当初はテーマ色を 24% に薄めた色 → 同日ユーザー「緑に見えないし、強調してるように見えない」で、濃い --sol を薄めるのではなく明るい緑に（相対色。古いブラウザは color-mix の白混ぜ）。
   線（text-decoration）にしないのはリンクの下線（記事本文 .article a）と見分けるため。色はテーマ色から（製品の .tone-prod では青、特集の .theme-navy では紺）。折り返しても行ごとに引く */
.intro-head p.lead-em{font-size:var(--fs-lead);font-weight:700;color:var(--ink)}
.intro-head p.lead-em strong{--mk:var(--sol);font-weight:900;padding:0 .1em;background:linear-gradient(transparent 58%,color-mix(in oklch,var(--mk) 45%,#fff) 58%,color-mix(in oklch,var(--mk) 45%,#fff) 92%,transparent 92%);background:linear-gradient(transparent 58%,oklch(from var(--mk) 0.87 0.12 h) 58%,oklch(from var(--mk) 0.87 0.12 h) 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.theme-navy .intro-head p.lead-em strong{--mk:var(--navy)}

/* 中見出し .task-sub の上の区切り線をやめる（2026-10-02 クライアント修正依頼 AppSec P7「ご支援の流れの下の線を削除」、ユーザー裁定 B＝全ページ）。
   同じセクションの中で線が帯の切れ目に見えるため。見出しの上は小見出し .grp-h と同じ 64px（上の決まり）だけにする（線の下の 48px も外す） */
.task-sub{border-top:0;padding-top:0}

/* メーカーカード .mk の左の枠に写真を入れる（.lg.ph。取り扱いツール partials/appsec-tools.php、2026-10-02 クライアント修正依頼 Q2「製品カードの画像を旧ページと同じものに」）。
   ロゴ用の地色・内側の余白をやめ、写真を枠（240×148、角丸 10px）いっぱいに切り抜く。旧ページの写真は 640×440 */
.mk .lg.ph{padding:0;overflow:hidden;background:none}
.mk .lg.ph img{width:100%;height:100%;max-height:none;object-fit:cover}
/* 640 以下は縦積みで枠が横いっぱい（高さ 124px）になり、写真が細い帯に切れる → 16:9 にして写真の大半を見せる */
@media(max-width:640px){.mk .lg.ph{height:auto;aspect-ratio:16/9}}

/* Black Duck SCA「Black Duck の基本構成」（views/solution/figures/bdsca-arch.php。2026-10-02 クライアント修正依頼 R3「旧ページの基本構成の形に」）。
   構成要素 3 つを薄い地の枠（工程フローの .scope-item と同じ地・線・角丸）、間の矢印は紺の線（.cfg .ar と同じ色・太さ）、矢印の上にやりとりするデータ（--fs-sub・濃い補足色）。
   アイコンは緑の線（.cfg .nd .ic と同じ描き方）を淡い緑の角丸の地に。矢印はアイコンの高さに合わせる。1100 以下は縦積みで矢印を下向きに（横並びのままだと 1000px で枠が 180px まで細り、見出しが 1 語ずつ折れる） */
.bda{display:grid;grid-template-columns:1fr 168px 1fr 168px 1fr;align-items:start}
.bda-nd{background:var(--bg-soft);border:1px solid var(--hair);border-radius:var(--rd-md);padding:calc(26px * var(--sp-k)) calc(22px * var(--sp-k)) calc(24px * var(--sp-k));text-align:center;height:100%}
.bda-nd .ic{width:64px;height:64px;border-radius:16px;background:var(--sol-soft);display:flex;align-items:center;justify-content:center;margin:0 auto calc(14px * var(--sp-k))}
.bda-nd .ic svg{width:34px;height:34px;fill:none;stroke:var(--sol);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bda-nd :is(h3,h4,h5,h6){font-size:var(--fs-cardsub);font-weight:900;line-height:1.45}
.bda-nd p{margin-top:calc(10px * var(--sp-k));font-size:var(--fs-body);color:var(--ink-soft);line-height:1.85;text-align:left}
.bda-ln .lb{font-family:"Roboto Condensed",sans-serif;font-size:var(--fs-sub);font-weight:700;color:var(--ink-mute);line-height:1.35;text-align:center;letter-spacing:.01em}
.bda-ln .ar svg{display:block;width:100%;height:12px;fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* 横並び: 矢印は 3 つの枠で同じ高さ（アイコンの下〜見出しの上、枠の上から 96px）に固定し、ラベルは矢印の上（往復の戻りのラベルは下）に置く */
@media(min-width:1101px){
  .bda-ln{position:relative;align-self:stretch}
  .bda-ln .ar{position:absolute;left:12px;right:12px;top:96px}
  .bda-ln .lb{position:absolute;left:0;right:0;bottom:calc(100% - 88px)}
  .bda-ln.two .ar{top:86px}
  .bda-ln.two .ar + .ar{top:106px}
  .bda-ln.two .lb:first-child{bottom:calc(100% - 78px)}
  .bda-ln.two .lb:last-child{bottom:auto;top:124px}
}
@media(max-width:1100px){
  .bda{grid-template-columns:1fr}
  .bda-nd{height:auto}
  .bda-ln{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:calc(6px * var(--sp-k)) calc(14px * var(--sp-k));padding:calc(14px * var(--sp-k)) 0}
  .bda-ln .ar{flex:none;width:40px;transform:rotate(90deg);margin:calc(14px * var(--sp-k)) calc(-12px * var(--sp-k))}/* 横向きの矢印を 90° 回して下向き（往復の戻りは上向き）に */
}

/* Coverity（2026-10-02 クライアント修正依頼 S4・S6）。
   S4: ピルそのものが中身の一覧（対応言語）は本文の大きさに（.tags.lg。indp_cards の欄 tags_lg）。
   S6: 事例カードの見出しの前の小さな語 .stp を見出しの上の 1 行に（cases の欄 stp_top → .cards.stp-top。工程フロー .stage .stp と同じ置き方。既定の SERVICE 01 などは見出しの左のまま）。製品カードの区分「SCA（ソフトウェアコンポジション解析）」が見出しの大きさだと 3 行に折れていた。字間は和文向けに詰める */
.indp .tags.lg .tag-pill{font-size:var(--fs-body);padding:calc(7px * var(--sp-k)) calc(14px * var(--sp-k))}
/* ピルの並びがカードの最後のとき、下の 12px（後に続く見出し・本文との間）を外す。カード内の下は padding だけ（2026-10-02 ユーザー指摘「カード内下余白が多い」Coverity 対応言語） */
.indp>.tags:last-child{margin-bottom:0}
.stp-top .case>:is(h3,h4,h5,h6):has(> .stp){flex-direction:column;align-items:flex-start}
.stp-top .case .stp{margin-bottom:calc(4px * var(--sp-k));letter-spacing:.02em}
/* 本文の幅に収める（概要文 .grp-tx を .wrap／続き .joined の直下に置いたとき。小見出し .grp-h と同じセクション幅。fsi-embedded.css の 1 セクション 1 幅の指定に .grp-tx が無かった） */
:is(.sw-sm,.sw-md,.sw-lg) :is(.wrap,.joined) > .grp-tx{max-width:var(--sw);margin-left:auto;margin-right:auto}

/* カード全体を囲む枠＋左上のラベル（.zone。stage_flow の欄 zone_label。VTD「技術領域」の 4 要素を囲む「Closed loop」、2026-10-02 クライアント修正依頼 X2「旧ページに合わせる」）。
   地はテスト自動化の構成イメージの領域 .cfg-zone と同じ（テーマ色 6%）、ラベルは見出しの前の小さな語 .stp と同じ字。枠の内側は上にラベルの分、左右下は 20px。小見出しの下は 32px（.cards.mt と同じ） */
.zone{position:relative;background:color-mix(in oklab,var(--sol) 6%,#fff);border-radius:var(--rd-lg);padding:calc(46px * var(--sp-k)) calc(20px * var(--sp-k)) calc(20px * var(--sp-k))}
.zone-lb{position:absolute;left:22px;top:16px}
.task-sub .zone.mt,.task-sub + .zone.mt{margin-top:calc(32px * var(--sp-k))}
.zone>.cards,.zone>.cards.mt{margin-top:0}/* 小見出しの下の .task-sub .cards.mt（32px）が枠の中でも効いてラベルとカードの間が空いていた */

/* 受託コラムの記事: ヒーローの直後の記事のセクションは上の余白 120 → 64px（views/column/single.php の .col-art。2026-10-02 クライアント修正依頼 B1「ヒーローとアイキャッチの間のスペースを狭く」。
   見出しのないメイン画像から始まるので、セクション見出しの上 120px ではなく小見出しの上と同じ 64px） */
section.block.col-art{padding-top:calc(64px * var(--sp-k))}

/* 続きの行の見出し（section-open の欄 mid_title＝中見出し h3 .task-sub.mid／sub_title＝小見出し h4 .grp-h。2026-10-04 製品開発支援 D1「旧ページの大項目・中項目・小項目をそのまま」）。
   見出しまわりの余白の決まり（上 ＞ 下 ≧ 部品どうし、段が深いほど小さく）に h4 を足す: h3 は上 64・下 32、h4 は上 48・下 32（→ 概要文 14）。h3 の直後の h4 は h3 の下（32）だけ */
.task-sub.mid{margin-bottom:calc(32px * var(--sp-k))}
.task-sub.mid + .grp-h{margin-top:0}
:is(h4,h5,h6).grp-h{margin-top:calc(48px * var(--sp-k))}
.wrap>.joined:has(> :is(h4,h5,h6).grp-h:first-child){margin-top:calc(48px * var(--sp-k))}/* .joined:has(> .grp-h:first-child)（64px）より強く */
/* 2 行以上になる見出し（文言に <br>）は、頭の縦棒を 1 行目の高さの真ん中に（.grp-h／.task-sub は flex の中央そろえで、3 行だと棒が 2 行目に来ていた） */
:is(h4,h5,h6).grp-h,.task-sub.mid>:is(h3,h4,h5,h6){align-items:flex-start}
:is(h4,h5,h6).grp-h::before,.task-sub.mid>:is(h3,h4,h5,h6)::before{margin-top:calc((1lh - 22px) / 2)}
/* 文節の切れ目で折り返す。640 以下は文言の <br>（PC で行をそろえるための改行）を外す（390 で「エミュ｜レータ」「拡｜大出来ます」のように語の途中と <br> の両方で折れて短い行が続いていた） */
:is(h4,h5,h6).grp-h,.task-sub.mid>:is(h3,h4,h5,h6){word-break:auto-phrase}
@media(max-width:640px){:is(h4,h5,h6).grp-h br,.task-sub.mid>:is(h3,h4,h5,h6) br{display:none}}

/* KEY POINT の図（cases の並び keypoint。製品開発支援「〜を活用するためのKEY POINT」、旧ページの図の形。2026-10-04 クライアント修正依頼 D1・ユーザー裁定 B）。
   白い図版枠 .dom-panel を上 1 段（1 枚目）・下 2 段（2・3 枚目）に分け、境目の真ん中に「中央のラベル」（テーマ色の地・白抜き）。仕切りは枠と同じ線の色。
   各項目は図（元の大きさまで。引き伸ばさない）＋ KEY POINT n（.stp）／見出し／文。2 枚目は文を外側・図を内側に（旧ページと同じ向き）。900 以下は図の下に文、760 以下は 1 列 */
.dom-panel.kp{--kp-pad:34px;display:grid;grid-template-columns:1fr 1fr;padding:0;overflow:visible}/* --kp-pad: 項目の内側の余白。中央のラベル（高さ 51px）に接する側はラベルの半分 26px を足し、ラベルと中身の間も同じ余白に */
.kp-it{display:flex;align-items:center;justify-content:center;gap:calc(28px * var(--sp-k));padding:var(--kp-pad)}
.kp-1{grid-column:1/-1;border-bottom:1px solid var(--line);padding-bottom:calc(var(--kp-pad) + 26px)}
.kp-2{border-right:1px solid var(--line);flex-direction:row-reverse}
.kp-hub + .kp-it,.kp-hub + .kp-it + .kp-it{padding-top:calc(var(--kp-pad) + 26px)}
.kp-hub{grid-column:1/-1;height:0;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.kp-hub span{background:var(--sol);color:#fff;font-size:var(--fs-cardsub);font-weight:900;line-height:1.4;padding:calc(13px * var(--sp-k)) calc(30px * var(--sp-k));border-radius:999px;box-shadow:var(--sh-1);text-align:center}
.theme-navy .kp-hub span{background:var(--navy)}
.kp-im{flex:0 1 auto;max-width:44%}
.kp-im img{display:block;max-width:100%;height:auto}/* 幅は画像の width 属性（元の大きさ）のまま＝読み込む前から場所が取られる（width:auto だと読み込むまで 0×0。2026-10-13） */
.kp-tx{flex:1 1 0;min-width:0;max-width:420px}
.kp-1 .kp-tx{max-width:480px}
.kp-tx :is(h3,h4,h5,h6){font-size:var(--fs-card);font-weight:900;line-height:1.45;color:var(--ink)}
.kp-tx .stp{display:block;margin-bottom:calc(6px * var(--sp-k))}
.kp-tx p{margin-top:calc(10px * var(--sp-k));font-size:var(--fs-body);color:var(--ink-soft);line-height:1.85}
@media(max-width:900px){.kp-2,.kp-3{flex-direction:column;align-items:flex-start;justify-content:flex-start}.kp-2 .kp-im,.kp-3 .kp-im{max-width:100%;align-self:center}.kp-2 .kp-tx,.kp-3 .kp-tx{max-width:none}}
@media(max-width:760px){
  .dom-panel.kp{--kp-pad:28px;grid-template-columns:1fr}
  .kp-hub + .kp-it + .kp-it{padding-top:var(--kp-pad)}
  .kp-it{flex-direction:column;align-items:flex-start;padding:var(--kp-pad) 22px}
  .kp-1{padding-bottom:calc(var(--kp-pad) + 26px)}
  .kp-2{border-right:0;border-bottom:1px solid var(--line)}
  .kp-im{max-width:100%;align-self:center}
  .kp-tx{max-width:none}
  .kp-hub span{font-size:var(--fs-body);padding:calc(12px * var(--sp-k)) calc(22px * var(--sp-k))}/* 390 幅でラベルが枠いっぱいにならないように */
}

/* 導入文の囲み（.lead-panel）の中の箇条書きと右の写真（lead_panel の欄 list・body_after・image・caption。製品開発支援「TOPICS」を旧ページの 1 つの枠に、2026-10-04 クライアント修正依頼 D1）。
   箇条はアイコン付き説明カードの箇条（.indp ul）と同じ点・間隔、文字は囲みの本文と同じ色。写真は右の列 300px（下の注記「2025年9月　AUTOMOTIVE WORLD 2025出展」が 1 行に入る幅）、注記は補足の大きさ。760 以下は写真を文の下に */
.lead-panel .lp-list{list-style:none;display:grid;gap:calc(7px * var(--sp-k));margin:calc(18px * var(--sp-k)) 0}
.lead-panel .lp-list li{font-size:var(--fs-body);color:var(--ink-soft);font-weight:500;display:flex;gap:calc(8px * var(--sp-k));line-height:1.8}
.lead-panel .lp-list li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--sol);margin-top:calc((1lh - 4px) / 2);flex:none}
.theme-navy .lead-panel .lp-list li::before{background:var(--navy)}
.lead-panel.side{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:calc(40px * var(--sp-k));align-items:start}
.lp-fig{margin:0}
.lp-fig img{display:block;width:100%;height:auto;border-radius:var(--rd-md)}
.lp-fig figcaption{margin-top:calc(10px * var(--sp-k));font-size:var(--fs-sub);color:var(--ink-mute);line-height:1.7;word-break:auto-phrase}/* 狭い幅で「出｜展」と 1 文字だけ折れないように */
@media(max-width:760px){.lead-panel.side{grid-template-columns:minmax(0,1fr);gap:calc(28px * var(--sp-k))}.lp-fig{max-width:300px}}

/* 両側に線の中見出し（section-open の欄 mid_line → .ach-head.mid。製品開発支援「エミュレータ」「治具」「プロトタイプ」＝旧ページの線付きの見出し、2026-10-04 ユーザー裁定 A）。
   形は TOP「対応実績」の .ach-head（中央の見出し＋両側の線）、色は TOP の受託の欄と同じテーマ色の文字・淡い線。下の小見出し（h4 .grp-h 22px）より大きく 24px。
   余白は見出しまわりの余白の決まりの h3（上 64・下 32。直後の小見出しは 32）。幅はセクション幅 */
.ach-head.mid{margin-top:calc(64px * var(--sp-k));margin-bottom:calc(32px * var(--sp-k))}
.ach-head.mid :is(h3,h4,h5,h6){font-size:calc(24px * var(--fs-k));color:var(--sol)}
.ach-head.mid .ln{background:color-mix(in oklab,var(--sol) 24%,#fff)}
.theme-navy .ach-head.mid :is(h3,h4,h5,h6){color:var(--navy)}
.theme-navy .ach-head.mid .ln{background:var(--blue-100)}
.ach-head.mid + .grp-h{margin-top:0}
.intro-head + .ach-head.mid{margin-top:0}
:is(.sw-sm,.sw-md,.sw-lg) :is(.wrap,.joined) > .ach-head.mid{max-width:var(--sw);margin-left:auto;margin-right:auto}

/* アイコン付き説明カードの見出しの上のラベル（indp_cards の欄 stp → .indp>.stp。製品開発支援「困りごと1〜4」、2026-10-04 ユーザー指示「困りごと○は見出しに含めずラベル的に」）。
   工程フローの STEP（.stage .stp: 見出しの上の行・下 9px）と同じ置き方。和文なので字間は Coverity の区分名（.stp-top .case .stp）と同じく詰める */
.indp>.stp{display:block;margin-bottom:calc(9px * var(--sp-k));letter-spacing:.02em}
.indp>.stp + :is(h3,h4,h5,h6){word-break:auto-phrase}/* ラベルを分けて見出しが短くなり、「〜効率が悪｜い」と 1 文字だけ折れたので文節の切れ目で折り返す */

/* ADVANTECH 特集（2026-10-04 特集レビュー F1-1〜F1-6。旧ページ https://www.fsi-embedded.jp/gpu-server/advantech/ に合わせる点だけ） */
/* F1-1 h1 の小さい 1 行目（feature の欄 hero_pre）。2 行目（大）の 6 割、中央寄せは今のまま */
.ind-hero.feat h1 .pre{display:block;font-size:.6em;line-height:1.6;margin-bottom:2px}
/* F1-2・F1-3 特徴は 3 列のカード → 図と文の行（why_rows。solution-tpv「3つの力」・受託トップ「選ばれる理由」と同じ部品、同日ユーザー指摘「1カラムの適したパーツ」）。
   見出しの色は .why-tx の見出しの強調 <b>（デザインはテーマ色。特集は紺＝RISC-V「特徴」の見出しと同じ --navy） */
.theme-navy .why-tx :is(h3,h4,h5,h6) b{color:var(--navy)}
/* F1-4 見出しを写真の上に（cases の欄 title_over → .fbanner.static。service-gui「GUI EXAMPLES」と同じ部品）。カードの頭に置く。
   旧ページと同じく見出しは写真の真ん中、写真がもともと濃いのでグラデーションは敷かない（同日ユーザー指示） */
.title-over .case>.fbanner.static{margin:0}
.title-over .case>.fbanner.static .fb-overlay{padding:calc(24px * var(--sp-k)) calc(26px * var(--sp-k));background:none;justify-content:center;align-items:center;text-align:center}
.title-over .case>.fbanner.static :is(h3,h4,h5,h6){margin-top:0}
/* F1-5・F1-6 一言（cases の項目の欄 catch）: 図の下にテーマ色・太字。おすすめの製品は 20px（catch_lg） */
.case>.catch{margin-top:calc(16px * var(--sp-k));font-size:var(--fs-body);font-weight:900;color:var(--sol);line-height:1.6}
.theme-navy .case>.catch{color:var(--navy)}
.catch-lg .case>.catch{font-size:var(--fs-card);line-height:1.5}
.case>.catch+p{margin-top:calc(8px * var(--sp-k))}
/* F1-5 見出しの横の枠（cases の項目の欄 badge。旧ページの「AI処理性能：〜」の体裁＝型番の横の細い線の四角）。見出しには含めない */
.case>.c-head{display:flex;flex-direction:column;align-items:flex-start;gap:calc(6px * var(--sp-k))}/* 枠は型番のすぐ下にそろえる（3 列のカードでは型番の横に入りきらず、カードごとに横・下がばらばらになったため） */
.case>.c-head>:is(h3,h4,h5,h6){font-size:var(--fs-card);font-weight:900;line-height:1.6}
.case .badge{border:1px solid var(--line);border-radius:4px;background:#fff;padding:2px calc(10px * var(--sp-k));font-size:var(--fs-label);font-weight:700;color:var(--ink-soft);line-height:1.6}
.ind-hero.feat h1:has(.pre),.case>.catch{word-break:auto-phrase}/* 「GPUサー｜バー」「ハ｜イエンド」のように語の途中で折れないよう文節で折り返す */
/* 受託の段の検索窓（TOP「組み込み受託開発」）: .psearch の検索ボタンを受託の緑に（製品の段は製品の青。2026-10-10 修正一覧 ①_2 No.6） */
.theme-sol .psearch-sbtn{background:var(--sol)}
.psearch:not(:has(.psearch-cat)) .psearch-mid{padding-block:calc(11px * var(--sp-k))}/* 分類のセレクトが無い形は、入力欄に上下の余白を持たせて、製品の段の検索窓と同じ高さ（46px）にする */
.theme-sol .psearch-sbtn:hover{background:color-mix(in oklab,var(--sol) 86%,#000)}
/* お問い合わせ帯のボタン: 文言がお問い合わせの種類で変わり長くなる（「AIアシスタントソリューションに関して問い合わせる」）。狭い幅で 2 行になるとき「問い合わ｜せる」と語の途中で折れないよう文節で折り、2 行の長さをそろえる。1 行に入る幅では変わらない（2026-10-07） */
.form-cta .btn{word-break:auto-phrase;text-wrap:balance}
.form-cta .btn svg{flex:none}/* 文言が 2 行になる幅でアイコンが横につぶれないように（20px → 14px になっていた） */
@media(max-width:980px){.form-cta{align-items:center}}/* 隣の .tel はデザインの CSS で 980px 以下が中央寄せ。フォームの側も同じ幅から中央に（上下に並ぶ幅でボタンの上の一文だけ左に寄っていた。2026-10-16 ユーザー） */

/* RISC-V 特集（2026-10-04 特集レビュー F2）。マルチストリーム特集の導入文（F7-1）も同じ */
/* F2-1・F7-1 ヒーロー直下の導入文: 囲みを外し、本文を 20px・太字（lead_panel の欄 plain_lg） */
.lead-panel.plain-lg{border:0;background:none;box-shadow:none;padding:0}
.lead-panel.plain-lg p{font-size:var(--fs-card);font-weight:700;color:var(--ink);line-height:1.9}
/* F2-2 メーカーの紹介とそのメーカーの製品を 1 つの枠に（mk_panel の欄 products → .mk-box。レビューの「こんな感じで」の形）。
   枠は紹介パネル .mk と同じ線・角丸・影、中の紹介パネルは枠を外し、製品カードはその下に 4 列。枠の中のカードは影を付けない（カードの中のカードが重く見えないように） */
.mk-box{border:1px solid var(--hair);background:#fff;border-radius:var(--rd-lg);padding:calc(28px * var(--sp-k));box-shadow:var(--sh-1)}
.mk-box>.mk{border:0;box-shadow:none;padding:0;background:none}
.mk-box>.cards{margin-top:calc(28px * var(--sp-k))}
.mk-box .pcard{box-shadow:none}
:is(.sw-sm,.sw-md,.sw-lg) :is(.wrap,.joined) > .mk-box{max-width:var(--sw);margin-left:auto;margin-right:auto}
/* RISC-V 特集 F2-2 追記（同日ユーザー指示「ボタンは最後」）: 製品一覧のボタンは製品カードの後、カードとの間は部品どうしの間 32px */
.mk-box>.sb-cta{margin-top:calc(32px * var(--sp-k))}
/* 同日ユーザー指示「見出し必要」: 枠の中の製品カードの見出し（h4 .grp-h、メーカー名の 1 段下）。説明文との間は h4 の上 48px、カードとの間は 32px（見出しまわりの余白の決まり） */
.mk-box>.mk+.grp-h{margin-top:calc(48px * var(--sp-k))}
.mk-box>.grp-h+.cards{margin-top:0}
.mk-box>.grp-h{font-size:var(--fs-cardsub)}/* 枠の中の小見出しなので --fs-cardsub 18px（メーカー名 h3 20px より大きい 22px だと親子が逆に見える） */

/* 小見出し付きの本文（body の group_title → .w-md > .grp-h ＋ .article）を幅 1160 のセクションに続けたとき、本文の枠もセクション幅に（1 セクション 1 幅。
   .w-md はセクション幅になるが中の .article は 1080 のままで、小見出しと左端がずれていた。コーデック 4K/8K の PRODUCT LINEUP に続けた解説、2026-10-04） */
:is(.sw-sm,.sw-md,.sw-lg) :is(.wrap,.joined) > .w-md > .article{max-width:var(--sw)}


/* 図と文の行の「本文 → 下向き矢印 → 矢印の後の文」（why_rows の項目の欄 text_after。AI アラカルト「ユースケース」の課題 → 解決、旧ページの形。2026-10-04 ユーザー指摘「矢印も何で無いの？」）。
   矢印は図の段間コネクタ .fig-arrow（テーマ色・26px）を文の頭にそろえて左に。上下は段落の間と同じくらい */
.why-tx>.fig-arrow{justify-content:flex-start;margin:calc(8px * var(--sp-k)) 0 0}
.why-tx>.fig-arrow+p.after{margin-top:calc(6px * var(--sp-k))}
/* 図版枠の中の図の下の囲み（画像 image の欄 point_*。.point-box＝E2E テスト自動化「活用事例」の効果と同じ。マルチストリーム特集「利用例」の「例」、2026-10-04）: 図の下 24px（図版枠の中の見出し → 図と同じ）。
   ラベルの頭の「!」の丸は付けない（同日ユーザー「アイコンいらねーだろ」。図と文の行の「ポイント」「効果」の囲みは今までどおり） */
.dom-panel>.img-figure+.point-box{margin-top:calc(24px * var(--sp-k))}
.dom-panel>.point-box .pl::before{content:none}
/* MRC のフォーム（お問い合わせ /contact/・製品詳細・資料のダウンロードの認証。2026-10-05 ユーザー「フォームのデザインを、新デザインに合わせたい」）:
   デザインのお問い合わせフォーム（product-ia-780i.html の .pdform。detail.css の .frow／.fl／.fin／.fradios／.fchecks／.fnote／.fsubmit）と同じ見た目に。
   資料のダウンロードの認証は MRC の表示枠 .mrc_webform_modal の中の #mrc_webform。MRC の CSS（m.fsi-embedded.jp/css/webform.css）はほぼ全部 !important なので、body ＋ ID から書いて !important で上書きする。色のインライン指定（!important）・設問の番号・勤務地の 2 段の見出しは
   src/js/modules/mrc-form.js が外す。確認画面・完了画面は MRC のページ（iframe）なのでここでは変えられない */
#mrc_webform.ma-form{background:none;padding:0;overflow-x:visible}
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) .mrc_webform_premsg{display:block !important;width:auto !important;margin:0 0 calc(18px * var(--sp-k)) !important;padding:0 !important}
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) .mrc_webform_premsg>div{box-sizing:border-box;height:180px !important;border:1px solid var(--line) !important;border-radius:var(--rd-md);background:var(--bg-soft);padding:calc(16px * var(--sp-k)) calc(20px * var(--sp-k)) !important;font-size:var(--fs-sub) !important;line-height:1.75;color:var(--ink-mute)}
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) :is(table.mrc_webform_questionnaire,table.mrc_webform_questionnaire>tbody){display:block !important;width:100% !important;margin:0}
/* 1 行＝「項目名（右寄せ）｜入力」（.frow）。設問の行は td の中の設問・回答を行の 2 列に */
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) tr.mrc_webform_row{display:grid;grid-template-columns:calc(190px + 52px) minmax(0,1fr);gap:calc(36px * var(--sp-k));align-items:start;padding:calc(10px * var(--sp-k)) 0}
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) tr.mrc_webform_row>td[colspan]{display:contents}
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) .mrc_webform_row .mrc_webform_q{display:grid !important;grid-template-columns:minmax(0,1fr) 44px;word-break:auto-phrase;overflow-wrap:anywhere;column-gap:calc(8px * var(--sp-k));align-items:start;border:0 !important;background:none !important;font-size:var(--fs-ui) !important;font-weight:700 !important;text-align:right !important;line-height:1.5 !important;padding:calc(12px * var(--sp-k)) 0 0 !important;color:var(--ink)}/* 項目名（.fl＝15px・太字。MRC は 12px !important）と「必須」をグリッドで横並び（2026-10-05 ユーザー指示） */
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) .mrc_webform_row .mrc_webform_a{border:0 !important;background:none !important;padding:0 !important;font-size:var(--fs-sub) !important;line-height:1.7;color:var(--ink-mute);min-width:0}
/* 必須の印（デザインに無い。項目名の右に小さな丸いラベル＝淡いオレンジの地。お客様情報の元の印は JS が隠す） */
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) .mrc_webform_req{display:inline-block;margin:calc(1px * var(--sp-k)) 0 0;font-size:var(--fs-label) !important;font-weight:700;line-height:1.5;color:var(--accent-ink);background:var(--accent-soft);border-radius:var(--shape-pill);padding:0 calc(8px * var(--sp-k));white-space:nowrap;text-align:center}
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) .mrc_webform_req[hidden]{display:none !important}
/* 入力欄（.fin）・プルダウン（.fselw の矢印を背景で） */
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) .mrc_webform_row .mrc_webform_a :is(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],select,textarea){box-sizing:border-box;width:100% !important;border:1.5px solid var(--line) !important;border-radius:8px !important;padding:calc(12px * var(--sp-k)) calc(14px * var(--sp-k)) !important;font-size:var(--fs-ui);font-family:inherit;line-height:1.5;outline:none;background-color:#fff !important;color:var(--ink);margin:0 !important;transition:.14s}
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) .mrc_webform_row .mrc_webform_a :is(input,select,textarea):focus{border-color:var(--prod) !important;box-shadow:0 0 0 3px color-mix(in oklab,var(--prod) 14%,transparent)}
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) .mrc_webform_row .mrc_webform_a select{-webkit-appearance:none !important;appearance:none !important;cursor:pointer;padding-right:calc(38px * var(--sp-k)) !important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%231a2230'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 14px center !important}
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) .mrc_webform_row .mrc_webform_a textarea{min-height:150px;resize:vertical;line-height:1.8}
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) .mrc_webform_zipcode input{max-width:220px;margin-right:calc(10px * var(--sp-k)) !important}
/* ラジオ・チェック（.fradios／.fchecks）。「その他」の記入欄は短い入力欄（.fin.s） */
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) .mrc_webform_row .mrc_webform_a label{display:inline-flex !important;align-items:center;vertical-align:middle;gap:calc(7px * var(--sp-k));margin:0 calc(20px * var(--sp-k)) calc(10px * var(--sp-k)) 0;font-size:var(--fs-ui);font-weight:500;line-height:1.6;color:var(--ink);cursor:pointer}
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) .mrc_webform_row .mrc_webform_a :is(input[type=radio],input[type=checkbox]){accent-color:var(--prod);width:16px !important;height:16px !important;margin:0 !important;flex:none}
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) .mrc_webform_row .mrc_webform_a .mrc_webform_group{display:inline-flex !important;align-items:center;vertical-align:middle;gap:calc(12px * var(--sp-k));margin:0 calc(20px * var(--sp-k)) calc(10px * var(--sp-k)) 0;max-width:100%}/* 「その他」＋記入欄（MRC のまとまり）。幅 320px で記入欄（220px）が枠から 52px はみ出し、ページが横に 8px 動いていた → まとまりは枠の幅まで、記入欄はその中で縮む（max-width・min-width:0。2026-10-13） */
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) .mrc_webform_row .mrc_webform_a .mrc_webform_group label{margin:0 !important;flex:none}
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) .mrc_webform_row .mrc_webform_a .mrc_webform_group input[type=text]{width:220px !important;max-width:100%;min-width:0;padding-top:calc(8px * var(--sp-k)) !important;padding-bottom:calc(8px * var(--sp-k)) !important}
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) .mrc_webform_row .mrc_webform_a:has(> label input:is([type=radio],[type=checkbox])){padding-top:calc(11px * var(--sp-k)) !important}
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) .mrc_webform_row .mrc_webform_a.mrc_webform_zipcode{display:flex !important;align-items:center;flex-wrap:wrap;column-gap:calc(12px * var(--sp-k));color:var(--ink-mute)}
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) .mrc_webform_row .mrc_webform_a.mrc_webform_zipcode input{margin-right:0 !important}
/* 選択肢の多いチェックの設問（4 つ以上）はデザインの .fnote の形: 区切り線の下に横いっぱいの見出し、その下に選択肢（product-ia-780i.html「これまでにご覧になったことがある“製品検索サイト”を…」） */
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) tr.mrc_webform_row:has(.mrc_webform_a input[type=checkbox]):has(.mrc_webform_a label:nth-of-type(4)){grid-template-columns:minmax(0,1fr);gap:calc(4px * var(--sp-k));margin-top:calc(16px * var(--sp-k));padding-top:calc(22px * var(--sp-k));border-top:1px solid var(--hair)}
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) tr.mrc_webform_row:has(.mrc_webform_a input[type=checkbox]):has(.mrc_webform_a label:nth-of-type(4)) .mrc_webform_a{padding-top:calc(6px * var(--sp-k)) !important}
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) tr.mrc_webform_row:has(.mrc_webform_a input[type=checkbox]):has(.mrc_webform_a label:nth-of-type(4)) .mrc_webform_q{grid-template-columns:auto auto;justify-content:start;text-align:left !important;padding-top:0 !important;font-size:var(--fs-body) !important}
/* 「お客様情報」の見出し（.fnote: 上に区切り線） */
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) tr.mrc_webform_custtitle{display:block;padding:0}
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) tr.mrc_webform_custtitle th{display:block;text-align:left !important;font-size:var(--fs-body) !important;font-weight:700 !important;color:var(--ink);background:none !important;margin:calc(26px * var(--sp-k)) 0 calc(4px * var(--sp-k));padding:calc(22px * var(--sp-k)) 0 0 !important;border:0 !important;border-top:1px solid var(--hair) !important}
/* 送信（.fsubmit .btn.btn-accent）・リセット（.btn-ghost）・お客様情報の保存 */
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) .mrc_webform_save_custinfo_message{text-align:center;margin-top:calc(26px * var(--sp-k));font-size:var(--fs-sub);color:var(--ink-mute)}
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) .mrc_webform_save_custinfo_message label{display:inline-flex;align-items:center;gap:calc(7px * var(--sp-k))}
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) .mrc_webform_save_custinfo_message input{accent-color:var(--prod)}
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) .mrc_webform_button{display:flex;justify-content:center;flex-wrap:wrap;gap:calc(14px * var(--sp-k));margin-top:calc(18px * var(--sp-k))}
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) .mrc_webform_button button{width:auto !important;height:auto !important;white-space:nowrap !important;border:0 !important;border-radius:var(--rd-btn) !important;padding:calc(16px * var(--sp-k)) calc(40px * var(--sp-k)) !important;font-size:var(--fs-ui) !important;font-weight:700 !important;font-family:inherit !important;line-height:1.4 !important;cursor:pointer;transition:.14s;box-shadow:none}
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) .mrc_webform_button button.mrc_webform_apply{background-color:var(--accent) !important;color:#fff !important}
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) .mrc_webform_button button.mrc_webform_apply:is(:hover,:focus){background-color:var(--accent) !important;filter:brightness(.95)}
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) .mrc_webform_button button.mrc_webform_clear{background-color:#fff !important;color:var(--ink-mute) !important;box-shadow:inset 0 0 0 1px var(--line);font-weight:500 !important;padding-left:calc(28px * var(--sp-k)) !important;padding-right:calc(28px * var(--sp-k)) !important}
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) .mrc_webform_button button.mrc_webform_clear:hover{background-color:var(--bg-soft) !important;color:var(--ink) !important}
@media(max-width:980px){body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) tr.mrc_webform_row{grid-template-columns:minmax(0,1fr);gap:calc(12px * var(--sp-k))}body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) .mrc_webform_row .mrc_webform_q{grid-template-columns:auto auto;justify-content:start;text-align:left !important;padding-top:0 !important}}
/* 資料のダウンロードの認証（MRC の表示枠。幅が狭いのでスマホと同じく項目名の下に入力欄） */
body .mrc_webform_modal #mrc_webform tr.mrc_webform_row{grid-template-columns:minmax(0,1fr);gap:calc(12px * var(--sp-k))}
body .mrc_webform_modal #mrc_webform .mrc_webform_row .mrc_webform_q{grid-template-columns:auto auto;justify-content:start;text-align:left !important;padding-top:0 !important}
/* 項目名の下に入力欄を置く形（980 以下・資料のダウンロードの認証・選択肢の多いチェックの設問）: 「必須」は項目名の文の直後に続ける。選択肢の上はほかの行と同じ間 */
@media(max-width:980px){body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) .mrc_webform_row .mrc_webform_q{display:block !important}body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) .mrc_webform_row .mrc_webform_a:has(> label input:is([type=radio],[type=checkbox])){padding-top:0 !important}}
body .mrc_webform_modal #mrc_webform .mrc_webform_row .mrc_webform_q,body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) tr.mrc_webform_row:has(.mrc_webform_a input[type=checkbox]):has(.mrc_webform_a label:nth-of-type(4)) .mrc_webform_q{display:block !important}
body .mrc_webform_modal #mrc_webform .mrc_webform_row .mrc_webform_a:has(> label input:is([type=radio],[type=checkbox])){padding-top:0 !important}
/* MRC の表示枠（確認モーダル「入力確認」・資料のダウンロードの認証。2026-10-06 ユーザー「確認画面はモーダルで出ます」）: 枠・見出し・×・背景の暗幕はページ側の DOM なのでサイトに合わせる。
   中の確認画面は MRC のページ（iframe・別ドメイン）なので変えられない。暗幕 body>.backdrop は MRC がインラインで黒 50% を付ける（!important なし） */
body>.backdrop{background-color:var(--ink) !important;opacity:.6 !important}
body .mrc_webform_modal .mrc_webform_modal_dialog{width:min(720px,calc(100% - 32px)) !important;margin:calc(48px * var(--sp-k)) auto !important}
body .mrc_webform_modal .mrc_webform_modal_content{border:0 !important;border-radius:var(--rd-lg) !important;box-shadow:0 24px 64px rgba(10,19,31,.28) !important;overflow:hidden}
body .mrc_webform_modal .mrc_webform_modal_header{display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;gap:calc(16px * var(--sp-k));min-height:0 !important;padding:calc(18px * var(--sp-k)) calc(20px * var(--sp-k)) calc(18px * var(--sp-k)) calc(28px * var(--sp-k)) !important;border-bottom:1px solid var(--line) !important}
body .mrc_webform_modal .mrc_webform_modal_title{font-family:inherit !important;font-size:var(--fs-card) !important;font-weight:700 !important;line-height:1.4 !important;color:var(--ink)}
body .mrc_webform_modal button.mrc_webform_close{float:none !important;flex:none;display:grid;place-items:center;width:40px;height:40px;margin:0 !important;border-radius:50% !important;font-size:26px !important;font-weight:400 !important;line-height:1 !important;color:var(--ink-mute) !important;text-shadow:none !important;opacity:1 !important;filter:none !important;transition:.14s}
body .mrc_webform_modal button.mrc_webform_close:is(:hover,:focus-visible){background:var(--bg-soft) !important;color:var(--ink) !important}
body .mrc_webform_modal .mrc_webform_modal_body{padding:calc(24px * var(--sp-k)) calc(28px * var(--sp-k)) calc(28px * var(--sp-k)) !important}
body .mrc_webform_modal .mrc_webform_modal_body iframe{display:block;height:min(560px,calc(100dvh - 220px)) !important;min-height:320px}
body .mrc_webform_modal #mrc_download_modal_desc{padding:calc(24px * var(--sp-k)) calc(28px * var(--sp-k)) 0 !important;font-size:var(--fs-body) !important;font-weight:500 !important;line-height:1.7;color:var(--ink)}/* 資料のダウンロードの認証の一文（見出しの下・body の外。MRC は左右 20px で入力欄とずれる） */
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform) :is(.mrc_webform_q,.mrc_webform_a,.mrc_webform_message,th,td,label,input,select,textarea,button){font-family:inherit !important}/* MRC は項目名・回答欄に Lucida Grande／ヒラギノを !important で指定 → サイトの書体（body の Zen Kaku Gothic New）に揃える */
body :is(#mrc_webform.ma-form,.mrc_webform_modal #mrc_webform){font-family:inherit !important}
/* 製品一覧（2026-10-06 レビュー：製品1.png）: 絞り込みメニューの見出しの下にキーワードの検索欄（ユーザー「A。位置は左メニュー（見出し下）」）。部品はデザインの製品検索 .psearch（分類セレクト無し・ボタンは製品の色） */
.fside .psearch.fkw{margin:0 0 calc(6px * var(--sp-k))}
.fside .psearch.fkw .psearch-mid{padding:0 calc(12px * var(--sp-k))}
.fside .psearch.fkw input{-webkit-appearance:none;appearance:none;min-width:0;width:100%;padding:calc(12px * var(--sp-k)) 0}
.fside .psearch.fkw .psearch-sbtn{background:var(--prod);padding:0 calc(16px * var(--sp-k))}
.fside .psearch.fkw .psearch-sbtn:hover{background:color-mix(in oklab,var(--prod) 86%,#000)}
/* 980px 以下（1 列）: 絞り込みメニューを一覧の見出しの下に（ユーザー「絞り込みメニューは、製品一覧見出しの下」）。.plist-main を display:contents にして並べ替える（PC の組みは変えない）。
   余白は .plist-main の 980 以下の padding（48 / 28 / 64）を中身に移したもの */
@media(max-width:980px){
  .plist-main{display:contents}
  .plist-main>.sec-head{order:0;padding:calc(48px * var(--sp-k)) calc(28px * var(--sp-k)) 0}
  .plist>.fside-rail{order:1;border-top:1px solid var(--line)}
  .plist-main>:not(.sec-head){order:2;margin-left:calc(28px * var(--sp-k));margin-right:calc(28px * var(--sp-k))}
  .plist-main>.ltool{margin-top:calc(28px * var(--sp-k))}
  .plist-main>:last-child{margin-bottom:calc(64px * var(--sp-k))}
}
/* タブ .page-tabs は 980px 以下で折り返さず横スクロール（ユーザー「page-tabs は改行しない（横スクロール）」）。収まるときは中央のまま（端のタブの auto の余白）。
   今のページのタブまで最初にスクロールするのは src/js/modules/page-tabs.js */
@media(max-width:980px){
  .page-tabs .wrap{display:block;padding-left:0;padding-right:0}
  .page-tabs nav{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:0 calc(28px * var(--sp-k))}
  .page-tabs nav::-webkit-scrollbar{display:none}
  .page-tabs nav a{flex:none;white-space:nowrap}
  .page-tabs nav a:first-child{margin-left:auto}
  .page-tabs nav a:last-child{margin-right:auto}
}
/* 現在の検索条件 .pcond（views/products/cond.php。製品一覧のヒーロー・一覧の見出しの下、製品の検索結果。2026-10-06 ユーザー「『現在の検索条件』は小さく小見出し、実条件は項目ごとにピル」）。
   ピルは新しい部品（同日ユーザー「色が製品カードのタグと同じなので再考」「新定義。14px」）: デザインのヒーローの「現在の検索条件」.cond（白地・線・値は製品の色）を項目ごとに分けた形。文字は --fs-sub。項目名（キーワード：など）は薄い色・ふつうの太さ */
.pcond{margin-top:calc(16px * var(--sp-k));text-align:left}
.pcond .k{font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;color:color-mix(in oklab,var(--ink-mute) 70%,#fff);margin-bottom:calc(8px * var(--sp-k))}
.pcond .ptags{display:flex;gap:calc(6px * var(--sp-k));flex-wrap:wrap}
.pcond .ptags>span{display:inline-flex;align-items:baseline;font-size:var(--fs-sub);font-weight:700;line-height:1.4;padding:calc(6px * var(--sp-k)) calc(14px * var(--sp-k));border-radius:var(--shape-pill);background:#fff;border:1px solid var(--line);color:var(--prod)}
.pcond .ptags>span i{font-style:normal;font-weight:500;color:color-mix(in oklab,var(--prod) 65%,#fff)}/* 項目名は製品の青を薄めた色（同日ユーザー「薄くしたいがグレーでは無く青系」） */
/* 外せる条件（「×」付きのリンク。同日ユーザー「フィルタ条件は『×』つけてクリアできるように」）: 見た目はピルと同じ、押せるので枠と×が製品の色に */
.pcond .ptags a{display:inline-flex;align-items:center;gap:calc(6px * var(--sp-k));font-size:var(--fs-sub);font-weight:700;line-height:1.4;padding:calc(6px * var(--sp-k)) calc(10px * var(--sp-k)) calc(6px * var(--sp-k)) calc(14px * var(--sp-k));border-radius:var(--shape-pill);background:#fff;border:1px solid var(--line);color:var(--prod);cursor:pointer;transition:border-color .15s,background-color .15s}
.pcond .ptags>a i{font-style:normal;font-weight:500;color:color-mix(in oklab,var(--prod) 65%,#fff)}
.pcond .ptags a svg{width:14px;height:14px;flex:none;stroke:color-mix(in oklab,var(--ink-mute) 38%,#fff);stroke-width:2.4;stroke-linecap:round;fill:none;transition:stroke .15s}/* ×は薄いグレー（同日ユーザー「色が濃い」→ A →「もう少し薄く」） */
.pcond .ptags a:hover{border-color:var(--prod);background:color-mix(in oklab,var(--prod) 5%,#fff)}
.pcond .ptags a:hover svg{stroke:var(--prod)}
.page-hero .pcond{margin-top:calc(18px * var(--sp-k))}
/* 左メニューの開閉の印: よくある質問（.qa summary .tg）と同じ ＋／− の線画（開くと縦線が縮んで −。2026-10-06 ユーザー「+- アイコンの品質が良くない。よくある質問などのモジュールを見て」）。
   デザイン category.css の文字の「+」「−」（summary::after）はやめる */
.fgroup summary::after,.fgroup:not([open]) summary::after{content:none}
.fgroup summary .tg{margin-left:auto;align-self:center;flex:none;width:20px;height:20px;display:flex;align-items:center;justify-content:center}
.fgroup summary .tg svg{width:20px;height:20px;stroke:var(--prod);stroke-width:2.4;stroke-linecap:round;fill:none}/* 色は前の文字の印と同じ製品の色（同日ユーザー「色くらいは調整しなよ」） */
.fgroup summary .tg .v{transform-origin:center;transition:transform .2s var(--ease)}
.fgroup[open] summary .tg .v{transform:scaleY(0)}
@media(prefers-reduced-motion:reduce){.fgroup summary .tg .v{transition:none}}
/* 製品一覧の条件ページの紹介（views/products/category.php。分類の「特長」と同じ .feature-panel に段落。2026-10-06） */
.feature-panel.lp-intro>p{margin-top:calc(16px * var(--sp-k));font-size:var(--fs-body);line-height:1.85;color:var(--ink-soft)}/* 直下の段落だけ（番号付きの項目 .fitem p に効くと、文が 16px 下がって番号の丸とずれる。2026-10-06 ユーザー指摘「番号リストのベースラインがずれてる」） */
.feature-panel.lp-intro h2+p{margin-top:calc(22px * var(--sp-k))}
/* 製品一覧の条件ページの詳しい説明（#lp-detail の .article）の表（Zynq-7000 SoC の比較表 4 つ。2026-10-06）: 文との間・見出しセルの薄い地・860px 以下は表だけ横スクロール（.article.legacy の表と同じ扱い） */
:is(#lp-detail,.tone-prod) .article table{margin:calc(14px * var(--sp-k)) 0 0}/* .tone-prod: 分類ページの知識系の本文（部品 body。SOM・COM の比較表、2026-10-06）にも同じ指定 */
:is(#lp-detail,.tone-prod) .article table th{background:var(--bg-soft);font-weight:700;white-space:nowrap}
@media(max-width:860px){:is(#lp-detail,.tone-prod) .article table{display:block;overflow-x:auto}:is(#lp-detail,.tone-prod) .article table td{white-space:nowrap}}
/* 分類の冒頭文の副題（.feature-panel の h2 の中の .s。「産業用PCとは」の下の「その特徴や民生用PCとの違いなど」。見出しに付く和文サブタイトル＝--fs-subhead。2026-10-06 レビュー「製品一覧 3」） */
.feature-panel h2 .s{display:block;margin-top:calc(6px * var(--sp-k));font-size:var(--fs-subhead);font-weight:700;letter-spacing:0;color:var(--ink-mute)}
/* 番号付きの項目（.fitem。分類の「特長」・冒頭文）の番号の丸: 上の余白を文字サイズから計算（PC は今までどおり 2px。スマホは文字が 14px になって 1 行目が低くなる分だけ丸を上げ、PC と同じ位置関係に。2026-10-06「番号リストのベースラインがずれてる」） */
.fitem .n{margin-top:calc(2px + (var(--fs-body) * 1.9 - 16px * 1.9) / 2)}
/* 締めの一文（.sec-close。全レイアウト共通の欄 after）は 24px・極太の 1 種類にまとめる（2026-10-06 ユーザー「締めなのに小さい。本文より一段大きいと言っても大差ない。再定義して」→ 裁定 C）。
   それまでの標準は 18px・太字（本文 16px と +2px）で、900px 以下は本文と同じ大きさまで下がっていた（fsi-embedded.css の @media(max-width:900px)）。文字は「大」（.sec-close.lg）と同じ値にし、
   900px 以下で下げる指定も効かなくなる（スマホは --fs-k で 21px）。.lg に残るのは上下の余白（上 46・下 22）だけ。「見出しの前のまとめ文」は 10/2 に「大」へ集約済み */
.sec-close{font-size:calc(24px * var(--fs-k));font-weight:900;line-height:1.7;letter-spacing:-0.01em}
/* 絞り込みの入口カード（.axis-cards。製品分類の一覧の冒頭文の下。2026-10-06 レビュー「製品一覧 4」SOM・COM のフォームファクター）: 「取り扱いカテゴリ」と同じ .sib のカード（アイコン＋名前、選んでいる値は .on）に、
   名前の下の一文 .d を足した（デザインの .sib は名前だけ）。一文があるのでアイコンは上揃え */
.axis-cards .sib a{align-items:flex-start}
.axis-cards .sib a .tx{display:block;min-width:0}
.axis-cards .sib a .d{display:block;margin-top:calc(4px * var(--sp-k));font-size:var(--fs-sub);font-weight:500;line-height:1.6;color:var(--ink-mute)}
/* よくある質問の区分の小見出し（.faq の中の h3.grp-h.faq-grp。SOM・COM「基礎・用語について」など、2026-10-06）: 見出しの決まりどおり、区分の上 64（最初の区分は 0）・下 32 */
.faq>.faq-grp{margin:calc(52px * var(--sp-k)) 0 calc(20px * var(--sp-k))}/* .faq は gap 12px の並びなので、その分を引いた値 */
.faq>.faq-grp:first-child{margin-top:0}
/* 受託コラムの本文の中に置く製品の入口（views/column/product-entry.php: フォームファクターのカード .sib・取り扱いメーカー .mk。2026-10-06 産業用ロボットの解説。
   ユーザー「赤枠のやつなんでセクションにしたの？違うだろ」→ 本文の続きとして同じ枠の中に）: 記事の文字の指定（.article h3 の縦線と余白・.article p の行間と色・.article img の上下の余白）を
   カードの中に効かせない。値はカード本来のもの（.mk p の 1.95・--ink-soft）。カードの並びと前後の段落・見出しの間は .article :is(.cards,.faq) の 24px のまま */
.article .mk .bd :is(h3,h4,h5,h6){margin:0;padding-left:0;border-left:0}
.article .mk p{line-height:1.95;color:var(--ink-soft)}
.article .mk img{margin:0}

/* スマホ表示の最適化 1（2026-10-06）TOP「ニュース」（.news-grid＝注目カード 2 枚｜一覧の 3fr 2fr）: デザインの CSS に狭い幅の指定が無く、スマホでも 2 列のままで
   文が 70〜126px の列に折れていた。900px 以下は縦積み（注目カード → 一覧）。注目カードは 641〜900 で 2 枚横並び（共通の .cards.c2 は 900 以下で 1 列なので戻す）、640 以下は 1 列 */
@media(max-width:900px){.news-grid{grid-template-columns:1fr}.news-grid .cards.news-feats{--cols:2}}
@media(max-width:640px){.news-grid .cards.news-feats{--cols:1}}

/* =====================================================================================================================================================
   スマホの組みの規則（640px 以下。2026-10-07 ユーザー「もっと本質的にちゃんと対応した方がいい。TOP だけ見ても要対応箇所が多い」）
   デザインの CSS は PC の組みが中心で、スマホでは ①横並びのまま文の列が細くなる ②1 列に落ちて縦に長くなる ③行の端に 1〜2 文字だけ落ちる、が部品ごとに出ていた
   （TOP は 390px 幅で 33 画面。業界のタイルだけで 4 画面）。部品ごとの継ぎ当てでなく、次の規則で組む。TOP で確かめ、同じ部品を使う全ページに効く。PC・タブレットは変えない。
   M1 見出し帯（.sec-head）は縦に積む。右のリンクは文の下
   M2 見出しと、中央寄せの文は、行の長さをそろえ文節で折る（端に 1〜2 文字だけ落とさない）
   M3 アイコン＋見出し＋一文の項目（選ばれる理由 .reason）は、アイコン左・文右の行にして左寄せ
   M4 写真のタイルは 2 列（1 列にして縦に伸ばさない）。ロゴ・図の大きさは PC との比率で決める（見出しが縮んだ分だけ縮め、小さくしすぎない）
   M5 アイコンと見出しで始まるカード（.sol-card・.pcat）は、アイコンと見出しを 1 行に
   M6 写真の上に文字を載せるバナー（.promo・.fbanner）は、文字を枠いっぱいに、写真は全面の下敷きにして暗くする
   M7 押せるものは高さ 36px 以上（フッターのリンク・絞り込みのピル・見出しのリンク）
   M8 記事のカード（ニュース・イベント・特集・コラム）が並ぶ段は、カードを幅の 2/3 にして横に並べ、横スクロール（.sp-scroll。一覧ページの全件の並びは対象外）
   M9 図: 文字の入った図で、スマホで PC の半分未満の大きさになるものは、縮めずに横スクロール（部品「画像」の欄 scroll＝.img-figure.scroll。820px より小さくしない）。
      幅を 80%・60% に絞った画像・動画は、スマホでは枠いっぱい
   ===================================================================================================================================================== */
@media(max-width:640px){
  /* M1 見出し帯 */
  .sec-head{flex-direction:column;align-items:stretch;gap:calc(12px * var(--sp-k))}
  .sec-head>.more{align-self:flex-end}
  .sec-lead{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:calc(14px * var(--sp-k));align-items:center}/* アイコンは欧文キッカー＋見出しの左。リード文は枠いっぱい */
  .sec-lead>div{display:contents}
  .sec-lead>.sec-ico{grid-row:1 / span 2;width:46px;height:46px;border-radius:13px;margin-top:0}
  .sec-lead>.sec-ico svg{width:24px;height:24px}
  .sec-lead .en,.sec-lead h2{grid-column:2}
  .sec-lead h2{margin-top:calc(4px * var(--sp-k))}
  .sec-lead .sub{grid-column:1 / -1}

  /* M2 見出し・中央寄せの文 */
  :is(h1,h2,h3,h4),.reasons-head{text-wrap:balance;word-break:auto-phrase}
  h4{overflow-wrap:anywhere}/* h1〜h3 は上（文節で折れない長い語句は途中で折る）と同じ */
  .pcard :is(h3,h4,h5,h6){text-wrap:pretty}/* 製品カードの見出しは 2〜3 行の説明の文（一覧用サマリー）。balance だと行が短くそろって右が空く（2026-10-16 ユーザー）。文節で折るのは上のまま */
  .hero-sub,.contact-inner>p,.intro-head>p,.sec-close{text-wrap:balance;word-break:auto-phrase}
  .ach-col li{display:inline-block}/* 「・」でつないだ語の並び（対応実績）を語の途中で折らない（「モデルベース開｜発」）。語ごとに 1 かたまりにし、語と語の間でだけ折る。1 行より長い語はその中で折れる */

  /* M3 選ばれる理由 */
  .reason:has(>.ri){display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:calc(16px * var(--sp-k));row-gap:calc(6px * var(--sp-k));align-items:start;justify-items:start;text-align:left}
  .reason:has(>.ri)>.ri,#about .reason:has(>.ri)>.ri{grid-row:1 / span 4;width:52px;height:52px}/* #about は PC で 82px の指定（ID）があるので名指し */
  .reason:has(>.ri)>.ri svg{width:25px;height:25px}
  .reason:has(>.ri)>.ri b{font-size:calc(20px * var(--fs-k))}
  .reason:has(>.ri)>:not(.ri){grid-column:2}
  .reason:has(>.ri)>.rk{margin:0}
  .reason:has(>.ri) :is(h3,h4,h5,h6):has(.stp){justify-content:flex-start}
  .reason:has(>.ri)>:is(h3,h4,h5,h6){align-self:center}

  /* M4 タイル */
  .cards.ind-grid{--cols:2;gap:calc(16px * var(--sp-k)) calc(12px * var(--sp-k))}
  /* メーカーのロゴ（.logo-cell）は 2 列のまま（PC の 1 枠 176px に対し 147px でほぼ同じ大きさ。3 列にすると 96px で小さすぎる＝2026-10-07 ユーザー指摘） */
  .kumi-logo{max-width:200px}/* KUMICO のロゴ: PC は見出し 35px に対し 330px。スマホは見出しが 21px なので同じ割合（0.6）で 200px（そのままだと枠いっぱいで大きすぎる＝同日ユーザー指摘） */

  /* M5 カードの頭 */
  :is(.sol-card,.pcat):has(>.ic){display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:calc(12px * var(--sp-k));align-items:center}
  :is(.sol-card,.pcat):has(>.ic)>.ic{margin-bottom:0}
  :is(.sol-card,.pcat):has(>.ic)>:not(.ic):not(h3):not(h4):not(h5):not(h6){grid-column:1 / -1}
  .pcat:has(>.ic)>.acts{margin-top:calc(14px * var(--sp-k))}

  /* M6 バナー */
  .promo{min-height:0;padding:calc(26px * var(--sp-k)) calc(24px * var(--sp-k))}
  .promo-tx{max-width:none}
  .promo-bg{width:100%}
  .promo::before{background:linear-gradient(180deg,rgba(2,21,47,.9) 0%,rgba(2,21,47,.78) 100%)}
  .promo.light::before{background:linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.86) 100%)}
  .fbanner .fb-overlay{background:linear-gradient(180deg,rgba(2,26,61,.42) 0%,rgba(2,26,61,.8) 46%,rgba(2,26,61,.94) 100%)}

  /* M7 押せるもの */
  .foot-col a{margin-bottom:0;padding:calc(9px * var(--sp-k)) 0}
  .foot-col a.foot-tel{padding-bottom:0}
  .foot-bottom .links{gap:0 calc(18px * var(--sp-k))}
  .foot-bottom .links a{padding:calc(9px * var(--sp-k)) 0}
  .filter-pills a.f-cat{padding:calc(9px * var(--sp-k)) calc(14px * var(--sp-k))}
  .sec-head>.more,.kumi-head>.more{padding:calc(7px * var(--sp-k)) 0}

  /* M4 の続き: 「テクノロジーから探す」（.tech-list）も 2 列（2026-10-07 ユーザー「2 カラムにしたい。いい感じにやって」）。1 行の横並び（アイコン｜名前｜山形）だと名前が 6 字で折れるので、
     アイコンを左上・山形を右上に置き、名前は下の段に枠いっぱい（9 字ほど入り、長い名前も 2 行）。同じ段のタイルは高さがそろう */
  .cards.tech-list{--cols:2;gap:calc(10px * var(--sp-k))}
  .tech-li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;align-content:start;gap:calc(9px * var(--sp-k)) 0;padding:calc(13px * var(--sp-k)) calc(13px * var(--sp-k)) calc(14px * var(--sp-k))}
  .tech-li .ti{grid-area:1 / 1;width:26px;height:26px}
  .tech-li .tc{grid-area:1 / 3;width:13px;height:13px}
  .tech-li .tn{grid-area:2 / 1 / 3 / 4;word-break:auto-phrase;overflow-wrap:anywhere}

  /* M8 記事のカードの横スクロール（2026-10-07 ユーザー「ニュース・イベント・特集・コラム系の通常カード：サイズを 2/3 くらいにし、横並び横スクロール」）。
     並びに .sp-scroll を付ける（TOP のニュース・イベント・特集の小カード・KUMICO、関連コラムのセクション、コラム詳細の関連コラム）。画面の端から端まで流し、次のカードが右に見える。
     カードの中は幅に合わせて余白を詰め、見出しはカード内の小見出しの大きさ（--fs-cardsub）に。高さは並びの中でそろう */
  .sp-scroll,:is(.sw-sm,.sw-md,.sw-lg) :is(.wrap,.joined)>.cards.sp-scroll{display:flex;gap:calc(12px * var(--sp-k));max-width:none;margin-left:calc(-28px * var(--sp-k));margin-right:calc(-28px * var(--sp-k));margin-bottom:calc(-16px * var(--sp-k));padding:2px calc(28px * var(--sp-k)) calc(16px * var(--sp-k));overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding:0 calc(28px * var(--sp-k));scrollbar-width:none}
  .sp-scroll::-webkit-scrollbar{display:none}
  .sp-scroll>*{flex:0 0 66.667%;min-width:0;scroll-snap-align:start}
  .sp-scroll>:is(.news-feat,.fsm) .bd{padding:calc(14px * var(--sp-k)) calc(16px * var(--sp-k)) calc(16px * var(--sp-k))}
  .sp-scroll>.ev .bd{padding:calc(10px * var(--sp-k)) calc(16px * var(--sp-k)) calc(16px * var(--sp-k))}
  .sp-scroll .ntitle,.sp-scroll>:is(.fsm,.ev) :is(h3,h4,h5,h6){font-size:var(--fs-cardsub)}
  .sp-scroll>.ev .when{flex-wrap:wrap;gap:calc(5px * var(--sp-k)) calc(9px * var(--sp-k))}/* 日時と「無料」のピルが横に入りきらないので折り返す（日時が 3 行に割れていた） */
  .feat-all{display:block}
  .feat-all>.feat-subs{display:flex;margin-top:var(--gap-md)}

  /* M2 の続き: 短い語句・かたまりが 1〜2 字だけ次の行に落ちる所（全 207 ページを 390px で走査して拾った。tools/shots/out/mobile-orphans.mjs） */
  .intro-head h2 .hchunk{display:inline}/* 受託トップ「組み込み受託開発ハードウェア開｜発」: PC 用のかたまりが 1 行に入らない → かたまりを解いて文節で折る */
  .grp-h .n{white-space:nowrap}/* 見出しの横の件数「— 全3｜件」 */
  .pcard .spec dd{word-break:auto-phrase}/* 製品カードの項目の値「ディスプレイストリーム圧｜縮」 */
  /* エッジAI「役割分担」の図の枠のラベル（.rf-band: 丸いラベル「フィジカルAI」＋説明の一文。PC は枠の上の線にまたがって横並び）: スマホではラベルが「フィ｜ジカ｜ルAI」と 3 行に折れて丸い印に見え、
     説明は幅 96px で 4 行だった → ラベルは 1 行で枠の線の上、説明はその下（枠の中）に枠いっぱい。枠の上の余白を説明の分だけ広げる（52 → 96px） */
  .relfig{padding-top:calc(96px * var(--sp-k))}
  .rf-framebg{margin-top:calc(-96px * var(--sp-k))}
  .rf-band{flex-direction:column;align-items:flex-start;gap:calc(8px * var(--sp-k));left:18px;right:18px;transform:translateY(-19px)}
  .rf-band b{white-space:nowrap}
  .io-core-h{font-size:calc(19px * var(--fs-k));padding-left:calc(14px * var(--sp-k));padding-right:calc(14px * var(--sp-k))}/* 製造業データ利活用の図の中央の箱: 見出し「…ソリュー｜ション」、3 つの語「収集・統｜合 → 基盤構｜築 → AI・分｜析」 */
  .io-core-b{flex-wrap:wrap;row-gap:calc(6px * var(--sp-k));padding-left:calc(12px * var(--sp-k));padding-right:calc(12px * var(--sp-k))}
  .io-core-b li{white-space:nowrap;font-size:var(--fs-sub)}
  .io-core-b li+li::before{width:14px;height:14px;margin:0 calc(8px * var(--sp-k))}

  /* M9 図 */
  .img-figure:not(.scroll) :is(.img-80,.img-60){width:100%}/* PC で内容幅の 80%・60% に絞った画像・動画（スマホで 60% は 205px）は枠いっぱいに */
  .indp-imgs:has(>img:only-child){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}/* カードの中の図 1 枚（アプリケーション開発「IoT システムの構築」「エッジ AI 開発」）: 元の大きさ（820px まで）のまま横スクロール */
  .indp-imgs>img:only-child{max-width:820px;width:auto}

  /* ユーザー指定の値（2026-10-07「すべてスマホ用調整」。TOP をスマホ幅で見て決めた値をそのまま） */
  html.mv-c .hero{padding-top:calc(130px * var(--sp-k))}
  h1.hero-h{font-size:calc(26px * var(--fs-k))}
  .bigsearch .btn{padding:calc(14px * var(--sp-k)) calc(14px * var(--sp-k)) calc(14px * var(--sp-k)) calc(18px * var(--sp-k))}
  #about .dual{margin-top:calc(56px * var(--sp-k))}
  .dual .card{padding:calc(32px * var(--sp-k)) calc(24px * var(--sp-k))}
  .dual .card .cards.c2{--cols:2}/* 指定は .cards.c2。2 枚のカードの中の 4 項目（.feats）のことと読んだ（すべての .cards.c2 を 2 列にすると 2 枚のカード自体が横並びになる） */
  .dual .card .feats{column-gap:calc(10px * var(--sp-k))}.dual .card .feat-li{gap:calc(8px * var(--sp-k))}/* 2 列にすると「豊富な開発実績と」（8 字）が 4px 足りず「と」だけ次の行に落ちるので、列の間とアイコンの横を詰める（390px 幅で 1 行に入る） */
  .card span.fi{width:24px;height:24px}
  .feat-li .fi svg{width:16px;height:16px}
  section.block{padding:calc(64px * var(--sp-k)) 0}
  .block-sm{padding:calc(32px * var(--sp-k)) 0}/* 小さいセクション（製品一覧の冒頭文・「特長」の枠、資料ダウンロード帯、イベントの申込帯）。余白を直書きしている 2 か所（製品一覧「取り扱いカテゴリ」48px、製品詳細の本文の上 44px）はその値のまま */
  .sec-arrow{margin-bottom:calc(-90px * var(--sp-k))}/* 次のセクションにまたがる矢印: 下の負の余白はセクションの余白 64 ＋ 丸の半分 26（980 以下は 84 ＋ 26 ＝ 110 だった） */
  .reasons{margin-top:calc(64px * var(--sp-k));padding-top:calc(48px * var(--sp-k))}
  #discovery .disc-col{padding:calc(28px * var(--sp-k)) calc(24px * var(--sp-k)) calc(32px * var(--sp-k))}
  .sec-lead{row-gap:calc(4px * var(--sp-k))}
  .sec-head .sub{margin-top:calc(24px * var(--sp-k))}
  .ach-head{margin-bottom:calc(24px * var(--sp-k))}
  .fbanner .fb-overlay{padding:calc(160px * var(--sp-k)) calc(24px * var(--sp-k)) calc(26px * var(--sp-k)) calc(24px * var(--sp-k))}
  .foot-bottom{flex-direction:column-reverse}
}
/* 小さいセクション（.block-sm）のうち、余白をテンプレートに直書きしていた 2 か所（製品一覧「〇〇の取り扱いカテゴリ」の帯＝上下 48px、製品詳細の本文＝上 44px）:
   直書きだとスマホの .block-sm の指定（上下 32px）が効かないので、クラスに移して 641px 以上だけに当てる（2026-10-07 ユーザー「A」。PC・タブレットの値は同じ） */
@media(min-width:641px){.block-sm.sib-band{padding:calc(48px * var(--sp-k)) 0}.block-sm.pdp-body{padding-top:calc(44px * var(--sp-k))}}
/* 見出しの「折り返してよい位置」（wbr.sp。modules/soft-break.js と Fields::softbreak が入れる）はスマホだけで効かせる。PC・タブレットの折り返しは変えない */
@media(min-width:641px){wbr.sp{display:none}}
/* TOP「特集」の格子（.feat-all。大 .fbanner ＋小 .fsm 4 枚を 1 つの格子に。小カードの包み .feat-subs はスマホの横スクロール用で、PC・タブレットでは display:contents）:
   並びは 2 つの格子（.feat-row1 ＋ .cards.c3）だったときと同じ。981 以上＝1 段目 大（2 列分）＋小 1、2 段目 小 3。段の間は旧 .feat-row1 の下の余白 16px。
   980 以下＝大 → 小 1（1 列）→ 残りは 3 列。900 以下＝全部 1 列（共通の「3 枚の .cards.c3 は 900 以下で 1 列」と同じ結果）。段の間の余白も前と同じ（大 → 小 1 は 18px、小 1 → 残りは 16px、残りどうしは 18px） */
.feat-all{row-gap:calc(16px * var(--sp-k))}
.feat-all>.fbanner{grid-column:span 2}
.feat-all>.feat-subs{display:contents}
.feat-all .fsm{align-self:stretch}
@media(max-width:980px){.feat-all>.fbanner,.feat-all>.feat-subs>.fsm:first-child{grid-column:1 / -1}.feat-all>.fbanner{margin-bottom:calc(var(--gap-md) - 16px * var(--sp-k))}}
@media(max-width:900px){.cards.feat-all{--cols:1;row-gap:var(--gap-md)}.feat-all>.fbanner{margin-bottom:0}.feat-all>.feat-subs>.fsm:first-child{margin-bottom:calc(16px * var(--sp-k) - var(--gap-md))}}
@media(max-width:640px){.feat-all>.feat-subs{display:flex}.feat-all>.feat-subs>.fsm:first-child{margin-bottom:0}}

/* 製品詳細の「製品サポート」へのボタン（2026-10-10 修正一覧 ①_2 No.7。デザインに無い部品＝ユーザー裁定: PC は右カラムの問い合わせの下、
   1100px 以下＝右カラムが本文の下に回る幅では、画面の下に追従する帯に右カラムと同じ 2 つを並べる。ボタンは既存の .btn-accent・.btn-prod）。
   文言が長い（19 文字）ので、文節（<wbr>）でだけ折る。帯は、右カラム・問い合わせフォーム・フッターが見えている間は隠す（modules/pdp-float.js が .is-off を付ける） */
.rail-support{white-space:normal;line-height:1.45;text-align:left}/* 幅・上の間は .rail-card .btn（detail.css）のまま */
.rail-card+.rail-card{margin-top:calc(14px * var(--sp-k))}/* 問い合わせの枠の下に、同じ形の枠をもう 1 つ＝製品サポート（2026-10-11 ユーザー「お問い合わせと同じように枠に入れたい」。上の一文は旧サイトの「国内販売店です」＝Site::resellerNote） */
.rail-card .t{overflow-wrap:anywhere;word-break:auto-phrase;text-wrap:balance}/* 製品名は長く、切れ目の無いものがある。文節で折って行の長さをそろえる（「ご提供い｜たします。」のように語の途中で折らない） */
.rail-card>.btn:first-child{margin-top:0}/* 一文の無い枠はボタンだけ */
.rail-card .t .hchunk{display:inline-block;max-width:100%}/* 製品名のかたまり */
.rail-support span,.pdp-float .btn span{word-break:keep-all;text-wrap:balance}
.rail-support svg,.pdp-float .btn svg{flex:none}
.pdp-float{display:none}
@media(max-width:1100px){
  .pdp-float{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:center;gap:calc(8px * var(--sp-k));padding:calc(10px * var(--sp-k)) calc(12px * var(--sp-k)) calc(10px * var(--sp-k) + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.96);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(2,26,61,.08);transition:transform .2s var(--ease),visibility .2s}
  .pdp-float.is-off{transform:translateY(110%);visibility:hidden}
  .pdp-float .btn{justify-content:center;min-height:46px;padding-inline:calc(12px * var(--sp-k))}
  .pdp-float .btn-accent{flex:none}
  .pdp-float .btn-prod{white-space:normal;line-height:1.35;text-align:left}
}
@media(max-width:640px){.pdp-float .btn-prod{flex:1}}
@media(prefers-reduced-motion:reduce){.pdp-float{transition:none}}

/* 工程・項目のカード（.stage）: 白いセクションの上では、薄い背景色（--bg-soft）にする（2026-10-10 クライアント修正依頼・製造系の PDF
   「全体の背景が白くて、四角の背景が白いので、もう少しメリハリをつけたい。四角の背景色はこちらの色を」→ ユーザー裁定 A＝サイト全体）。
   薄いセクション（.bg-soft）の上は白のまま＝どちらの地でもカードと地に差が付く。調べ: tools/shots/out/stage-backdrop.mjs（白地の上 155 枚・23 ページ／薄い地の上 124 枚） */
section:not(.bg-soft):not(.bg-navy) .stage{background:var(--bg-soft)}

/* 受託のページの表（.solve-tbl）は受託の緑（2026-10-10 クライアント修正依頼・製造系の PDF「表の色も受託の緑にあわせる」→ ユーザー裁定 A＝受託のページの表すべて。
   特集・イベントの表は紺のまま）。修飾子 .sol は .more.sol・.reason.sol と同じ。付けるのは部品 table（テーマが受託のとき）と、一点物の dms-solve・qnx-cases */
.solve-tbl.sol th{background:var(--sol)}
.solve-tbl.sol td.pr{color:var(--sol)}
.solve-tbl.sol td.sv,.solve-tbl.sol th:nth-child(3){border-left-color:color-mix(in oklab,var(--sol) 34%,#fff)}

/* 選ばれる理由のラベル（.rk「01 企業体力」）とアイコン（2026-10-10 クライアント修正依頼・製造系の PDF「この部分の文字サイズを少し大きくして、上のアイコンのレイアウトを調整したい」
   → ユーザー裁定 A＝サイト全体、「この指示のままはいまいちなのでいい感じにして」）。ラベルのある並び（11 ページ）だけが変わる。
   ラベル: 13px・薄い色・欧文の書体 → 見出しに付く和文サブタイトルの大きさ（--fs-subhead）・本文の色・ページの書体。頭の番号（.n）だけ欧文の書体・テーマ色で一回り大きく。
   アイコン: 丸を 66 → 44px にしてラベルの左に並べ、「アイコン＋ラベル」を 1 行の小見出しとして読ませる（依頼の見本は丸なしのアイコン＋黒い太字 20px で、すぐ下の見出しと同じ強さになるため、見出しより一段下げた）。
   ラベルの無い並び（アイコンだけ・丸の中に番号）は今までどおり。640px 以下は M3（アイコン左・文右）のまま、ラベルの文字だけ同じ指定 */
.reason .rk{font-family:inherit;font-size:var(--fs-subhead);font-weight:900;letter-spacing:.02em;color:var(--ink);margin:0;line-height:1.35;display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left}/* 番号と名前は 2 行に分ける（番号が上。2026-10-10 ユーザー「番号とラベルを改行させてください」） */
.reason .rk .n{font-family:"Roboto Condensed",sans-serif;font-size:calc(20px * var(--fs-k));font-weight:700;letter-spacing:.06em;line-height:1.1;color:var(--navy)}
.reason.sol .rk .n{color:var(--sol)}
.reason.prod .rk .n{color:var(--prod)}
@media(min-width:641px){
  .reason:has(>.ri):has(>.rk){flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;align-content:flex-start;column-gap:calc(12px * var(--sp-k))}
  .reason:has(>.ri):has(>.rk)>:not(.ri):not(.rk){flex:0 0 100%}
  .reason:has(>.ri):has(>.rk)>:is(.more,.tags){justify-content:center}
  .reason:has(>.ri):has(>.rk)>.ri{width:44px;height:44px}
  .reason:has(>.ri):has(>.rk)>.ri svg{width:22px;height:22px}
}

/* 画像の width／height 属性（Fields::img が元の大きさを出す。2026-10-13 製品開発支援の #dl へのジャンプが画像の読み込みで手前に止まる件）。
   属性の高さがそのまま使われると、幅だけ CSS で決めている画像が縦に伸びるので、高さは今までどおり成り行き（auto）に。:where で詳細度 0 ＝部品の指定（height・aspect-ratio）が必ず勝つ */
:where(img[width][height]){height:auto}
.logo-cell img{width:auto}/* メーカーのロゴの枠: 幅も高さも上限だけの指定（max-width・max-height）なので、属性の幅が効くと画像の箱が横に広がる（121 → 150px。全 1,118 ページ × 1280・390px の前後比較で変わったのはここだけ）→ 幅も成り行きに戻す */

/* 英語ページ /en/（2026-10-13 ユーザー「高さを全画面にできますか？」）: ページはキービジュアルだけなので、ヒーローを画面の下まで伸ばし、見出し〜ボタンは縦の中央に置く。
   ヒーローはヘッダーの下に潜っている（html.mv-c .hero の負の margin。幅で値が変わる）ので、高さを数値で持たず、body を縦並びにして残りを全部ヒーローに渡す。
   中身が画面より長いとき（横に寝かせたスマホなど）は今までどおり中身の高さ */
body.en-top{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
body.en-top .hero{flex:1 0 auto;display:grid;align-content:center}
body.en-top h1.hero-h{margin-top:0}/* 見出しの上の余白は、上に置くキッカー（日本語 TOP の .hero-eyebrow）との間。英語ページにはキッカーが無く、残すとその分だけ中身が下に寄る */

/* よくある質問の答えの中のリンク（2026-10-13 修正一覧 ①_3 の製造系 5「テキストリンクの視認性調整」。Figma「リンクを他と同じように緑色にあわせたい」）。
   リンクの色は a{color:inherit} のままで、答えの文と見分けが付かなかった → 説明カードの文の中のリンク（.indp>.lead a）と同じ テーマ色＋下線 に。色は Q の印（.qa summary .m）と同じ決まり */
.qa .a a{color:var(--sol);text-decoration:underline}
.faq.prod .qa .a a{color:var(--prod)}
/* エッジAI「役割分担」の図: フィジカルAI の枠をクラウドAI まで広げる（2026-10-13 修正一覧 ①_3 のエッジAI 1。Figma「フィジカルAIの領域をここまで広げる。フィジカルAIは、全部を包括しているような見え方に」）。
   枠（.rf-framebg）は 3 列目（エッジAI）まで → 5 列目（クラウドAI）まで。クラウドAI の箱が枠の線に付かないよう、図の右にも左と同じ 26px。1150px 以下の縦積みでは枠を最後の行（クラウドAI）まで。
   デザインの edgeai.css は触らず、ここで上書き */
.rf-framebg{grid-area:1/1/4/6}
.relfig{padding-right:calc(26px * var(--sp-k))}
@media(max-width:1150px){
  .rf-framebg{grid-area:1/1/9/2}
  .relfig{padding-right:0}
  .rf-note{margin-bottom:0}
  .rf-cloud{margin:0 calc(18px * var(--sp-k)) calc(20px * var(--sp-k))}
}
/* 表（.solve-tbl）の中のリンク（2026-10-13 MediaTek Genio 特集の比較表: 製品名 → 製品詳細）。よくある質問の答えの中のリンク（.qa .a a）と同じく テーマ色＋下線。
   それまで表の行にリンクは 1 つも無かった（a{color:inherit} のままだとリンクに見えない） */
.solve-tbl td a{color:var(--navy);text-decoration:underline}
.solve-tbl.sol td a{color:var(--sol)}
/* セクション見出しの中の注記の印（※）。デザインの .refmark（締めの一文 .sec-close の中の ※。fsi-embedded.css）と同じ役割のクラスを見出しでも使う。
   大きさは見出しの字の半分・上付き（締めの一文の中は本文の大きさ。見出しは PC 35px・スマホ 22.75px と幅があるので見出しとの比で決める）。
   2026-10-13 E2E テスト自動化の RESULTS「テストコスト※58%削減」。下に置く注釈は .sec-note の中の small＝小さい字・薄い色 */
.intro-head h2 .refmark{font-size:.5em;font-weight:700;line-height:1;vertical-align:.75em;margin:0 .1em}
/* 見出し下の注記・注釈（.sec-note）の中のリンクも、テキストリンクの形＝色＋下線（2026-10-13 ユーザー「テキストリンク用スタイルあてて」。
   IoMT 医療機器サイバーセキュリティの注釈＝厚生労働省のページへのリンクが、下線も色も無くリンクに見えなかった）。
   色は表の中のリンク（.solve-tbl td a）と同じ決め方: 既定は紺、受託のページは緑（intro-head が付ける .sol。製品の色のページは .prod） */
.sec-note a{color:var(--navy);text-decoration:underline}
.sec-note.sol a{color:var(--sol)}
.sec-note.prod a{color:var(--prod)}

/* 受託コラムの著者の枠（2026-10-15 ユーザー「連載・著者を見た目含め仕組み化したい」→「OKです」。views/column/single.php の .mk-box.col-author）:
   本文の後の間は目次の枠（.article>.dom-panel）と同じ 44px。写真は人物なので、メーカーのロゴ用の箱（.mk .lg＝高さ 148px・画像 100px・薄い地）ではなく、角丸の正方形で枠いっぱいに（最大 200px） */
.article>.mk-box{margin:calc(44px * var(--sp-k)) 0 0}
.col-author .mk .lg{height:auto;padding:0;border:0;background:none;width:100%;max-width:200px;aspect-ratio:1/1;overflow:hidden;border-radius:10px}
.col-author .mk .lg img{width:100%;height:100%;max-height:none;object-fit:cover}
/* 受託コラムのタイトルの上の連載名（2026-10-15 ユーザー「記事タイトル部にも連載名を表示したい」→「分類のピルの下で、ピルではない形で」→「リンクなしでいい」。views/column/single.php の p.nser）:
   分類のピルの下に 1 行の文字。大きさは補足（--fs-sub）・太字 */
.page-hero.news .nser{margin:0 0 calc(10px * var(--sp-k));font-size:var(--fs-sub);font-weight:700;color:var(--ink-soft);line-height:1.7}
/* 記事の詳細（ニュース・受託コラム）の分類のピルの下の余白: 10 → 18px（同日ユーザー「分類のピルの下：余白をもう少し空けてください。（共通でいいです）」。news.css の .page-hero.news .nmeta を上書き。日付の行は style で下 0 のまま） */
.page-hero.news .nmeta{margin-bottom:calc(18px * var(--sp-k))}
/* 受託コラムの記事の中の図版枠の見出し（目次・連載「名前」・著者プロフィール。見出しのタグでなく文字だけ）は文節で折り、行の長さをそろえる（スマホの組みの規則 M2。2026-10-15 連載名が「知るべ／き」で折れていた） */
.article .fig-head{word-break:auto-phrase;text-wrap:balance;text-align:center}
/* 受託コラムの著者（2026-10-15 ユーザー「タイトル周りに著者名も。日付の横」→「「著者」はいらない。写真がほしい」→「区切りがほしい。一覧カードにも表示」）: span.nauth＝日付の横に、区切りの縦線＋丸い小さな写真＋名前。
   記事のタイトルまわり（views/column/single.php）は写真 26px、カード（views/components/column-card.php の .news-feat）は文字が小さいので 22px */
.nauth{display:inline-flex;align-items:center;gap:calc(7px * var(--sp-k));border-left:1px solid var(--line);padding-left:calc(12px * var(--sp-k));line-height:1.2}
.nauth img{width:calc(26px * var(--fs-k));height:calc(26px * var(--fs-k));border-radius:50%;object-fit:cover;margin:0;flex:none}
.news-feat .ndate .nauth{margin-left:calc(10px * var(--sp-k));padding-left:calc(10px * var(--sp-k));vertical-align:middle}
.news-feat .ndate .nauth img{width:calc(22px * var(--fs-k));height:calc(22px * var(--fs-k))}
/* ヘッダーの 2 段組み（2026-10-15 要望「日本語サイトのグロナビに小さくていいので英語サイトへのリンクを」（参考 https://www.fsi.co.jp/ の ENGLISH）→ ユーザー「B（ボタンの上）ですが、中途半端な対応では無く、2段組みに最適化して」。header.php の header.two-tier）:
   上の段 .head-top＝右寄せの小さな文字のリンク（サイト内検索・English。アイコン付き）、下の段 .head＝ロゴ・グロナビ・資料請求・お問い合わせ（検索のアイコンは上の段へ移した）。
   高さ: 上の段 30px＋下の段 76px（1 段だった 92px から下の段を詰め、全体は +14px）。ロゴは左の列で上下 2 段を通す。TOP（案 C＝写真に重ねる）は写真の位置もこの高さに合わせる。
   768px 以下は上の段を出さない（ヘッダーは 1 段・76px のまま。English はメニューの最後の .mn-en） */
/* 組み: 左の列＝ロゴ（上下 2 段を通す。同日ユーザー「サイトロゴは縦断して」）、右の列＝上の段 30px ＋ 下の段 76px。段の間に罫線は入れない（同日ユーザー「罫線入りません」）。
   ロゴとグロナビの間は、1 段だったときの .head の間（32／22／16／12px）と同じ */
header.two-tier .hd2{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:30px 76px;column-gap:calc(32px * var(--sp-k))}
header.two-tier .hd2>.logo{grid-column:1;grid-row:1 / 3;align-self:center}
header.two-tier .head-top{grid-column:2;grid-row:1;display:flex;justify-content:flex-end;align-items:flex-end;gap:calc(24px * var(--sp-k))}
@media(max-width:1300px){header.two-tier .hd2{column-gap:calc(22px * var(--sp-k))}}
@media(max-width:900px){header.two-tier .hd2{column-gap:calc(16px * var(--sp-k))}}
@media(max-width:800px){header.two-tier .hd2{column-gap:calc(12px * var(--sp-k))}}
.ht-link{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-label);font-weight:700;color:var(--ink-mute);white-space:nowrap;line-height:1}
.ht-link svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;flex:none}
.ht-link:hover{color:var(--navy)}
.ht-link[lang="en"],header.en-head .ht-link{font-family:"Roboto Condensed",sans-serif;letter-spacing:.02em;font-size:var(--fs-sub)}/* 英字のリンク（日本語版の English・英語版の Japanese） */
header.two-tier .head{grid-column:2;grid-row:2;height:76px}
/* 下の段の間（.head の gap）: 2 段にしてロゴを左の列へ出したので、効くのはグロナビ ↔ 伸び縮みする空き（.spacer）↔ ボタンの 2 か所だけ。デザインの 1 段のときの 32／22／16px は大きすぎる（同日ユーザー「head の gap も大きすぎます」）→ 12px（769px 以上の全部の幅） */
/* 同日ユーザー「間隔が開きすぎてるから直せ」: グロナビとボタンの間の伸び縮みする空き（.spacer）をやめ、グロナビをボタンの左隣に寄せる（空きはロゴとグロナビの間へ）。
   グロナビとボタンの間（.head の gap）は、グロナビの項目どうしの間（nav.main の gap）より広く＝項目の間＋14px 前後（同日ユーザー「グロナビ内のメニュー間より狭いのはだめでしょ」）: 項目 34 → 48／24 → 38／18 → 32／13 → 27／9 → 23px */
@media(min-width:769px){header.two-tier .head{gap:calc(48px * var(--sp-k))}header.two-tier .head .spacer{display:none}header.two-tier nav.main{margin-left:auto}}
@media(min-width:769px) and (max-width:1300px){header.two-tier .head{gap:calc(38px * var(--sp-k))}}
@media(min-width:769px) and (max-width:1240px){header.two-tier .head{gap:calc(32px * var(--sp-k))}}
@media(min-width:769px) and (max-width:900px){header.two-tier .head{gap:calc(27px * var(--sp-k))}}
@media(min-width:769px) and (max-width:800px){header.two-tier .head{gap:calc(23px * var(--sp-k))}}
nav.main .mn-en{display:none}
@media(min-width:769px){html.mv-c :is(body.home,body.en-top) .hero{margin-top:-106px;padding-top:calc(106px + 82px * var(--sp-k))}}/* 英語のトップ /en/ も 2 段のヘッダーになった（2026-10-16）ので同じ潜り方 */
@media(max-width:768px){header.two-tier .head-top{display:none}header.two-tier .hd2{grid-template-rows:76px;column-gap:calc(10px * var(--sp-k))}header.two-tier .hd2>.logo{grid-row:1}header.two-tier .head{grid-row:1}nav.main .mn-en{display:block;font-family:"Roboto Condensed",sans-serif}}
/* 下の段の幅の切り替え（2 段組みと一緒に、2026-10-15）: デザインの順番（間を詰める → 資料請求の文字を消す → お問い合わせの文字を消す）はそのままに、切り替える幅を今のグロナビの文言（デザインより長い）に合わせて広い方へずらす。
   下の段の間を 12px に詰めた後に測り直した: 資料請求は 1100px 以下で文字なし（デザインは 1080px。1090px で 10px はみ出すため）、お問い合わせは 1040px 以下で文字なし（デザインは 980px。グロナビとボタンの間を項目の間より広くした後、1030px で食い込むため）。デザインの幅（1160・1080・980px）のままだと、1200・1100・1024・820・769px で下の段が右の余白にはみ出していた（820・769px は横スクロール。2 段にする前から） */
@media(max-width:1240px){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))}}
@media(max-width:1100px){.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:1040px){.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(min-width:769px) and (max-width:940px){nav.main{font-size:calc(14px * var(--fs-k))}}
/* 769〜860px は下の段に資料請求のボタンの場所が無い → 上の段の文字のリンク（.ht-dl）に移す（上の段は右寄せで余裕がある） */
.ht-link.ht-dl{display:none}
@media(min-width:769px) and (max-width:860px){.ht-link.ht-dl{display:inline-flex}.head .btn-ghost{display:none}}
/* ページ内リンク（ヒーローの資料・お問い合わせのボタン、コラムの目次など）で飛んだ先を、追従するヘッダーの下に出す（ヘッダーの高さ＝PC 111px・768px 以下 81px。それまでは指定が無く、飛んだ先の上がヘッダーに隠れていた）。メガメニューの高さの上限も 2 段のヘッダーの高さに合わせる */
html{scroll-padding-top:111px}
@media(max-width:768px){html{scroll-padding-top:81px}}
@media(min-width:769px){header.two-tier .mn-panel{max-height:calc(100vh - 111px)}}
/* 資料ダウンロード /download/ のカードの表紙は切らずに全体を見せる（2026-10-15 ユーザー「.case .cimg object-fit は contain」。表紙は 16:10 で、カードの枠 16:7 に cover だと上下が切れていた）。実績・事例のカードの写真は今のまま（枠いっぱい） */
.dl-list .case .cimg{object-fit:contain}

/* 英語のヘッダー（header.two-tier.en-head。2026-10-16 ユーザー「日本語版へのリンクは日本語版と同じようにヘッダーにしてください」）: 日本語版と同じ 2 段で、上の段に「Japanese」。
   グロナビが無いので下の段は Inquiry を右に寄せる（769px 以上の .spacer を消す決まりの代わり）。768px 以下は 1 段のまま「Japanese」を Inquiry の左に（英語のヘッダーにはメニューが無い） */
header.en-head .head{justify-content:flex-end}
@media(max-width:768px){
  header.two-tier.en-head .hd2{grid-template-columns:auto minmax(0,1fr) auto}
  header.two-tier.en-head .head-top{display:flex;grid-column:2;grid-row:1;align-items:center}
  header.two-tier.en-head .head{grid-column:3}
}

/* ---------- スマホの直し（2026-10-16 ユーザー「これもスマホ」） ---------- */
@media(max-width:640px){
  .voice .vp{width:100%}/* 課題の枠は 640 以下で縦並び・左寄せ（デザインの CSS）→ 絵の箱を列いっぱいにして絵を中央に */
  .fig-head .ln{display:none}/* 図版の見出しの左右の線。細い幅では見出しが詰まるので出さない（同日ユーザー「消していい」） */
  /* 工程フローの縦積みの組（.cell＝同時に進む工程。PC は 1 つの列に縦積み）を、1 列のスマホでは横に 2 列（部品 stage_flow の欄 cell_row）。
     ほかのカードは 1 列・下向き矢印のまま（同日ユーザー「全体像 2カラムに」→ 全体を 2 列にしたら「違う」→ 案 A） */
  .cards.cell-row>.cell{flex-direction:row}
  .cards.cell-row>.cell>*{flex:1 1 0;min-width:0}
  /* 組み込み製品トップの図（.fig-tri・.fig-lang。products-top.css）: PC の幅（1 項目 86／96px）のままで灰色の枠からはみ出していた → 項目を枠の幅で分け、丸と矢印を小さく。真ん中の吹き出しが長い .fig-lang は真ん中を広く */
  .why-fig:has(>.fig-tri,>.fig-lang){padding-inline:calc(12px * var(--sp-k))}
  .fig-tri,.fig-lang{width:100%;gap:calc(4px * var(--sp-k))}
  .fig-tri .p,.fig-lang .p{flex:1 1 0;min-width:0;width:auto}
  .fig-lang .p.main{flex-grow:1.5}
  .fig-tri .c,.fig-lang .c{width:56px;height:56px}
  .fig-tri .c svg,.fig-lang .c svg{width:26px;height:26px}
  .fig-tri .arr svg,.fig-lang .arr svg{width:18px;height:18px}
  .fig-tri .lb,.fig-lang .lb{word-break:auto-phrase}
}

/* 悩みピル .aud（「〜したい」対象者タグ）の文字を 13px（--fs-label）→ 14px（--fs-sub）に（2026-10-19 テストアップ修正事項 MBD「他のやつ含めてもう少し大きく」→ ユーザー「6 A」＝サイト全体の .aud。MBD・エッジAI・CRA など） */
.aud span{font-size:var(--fs-sub)}