html{scroll-behavior:auto}/* 製品一覧系はスムーススクロールなし（2026-09-08 ユーザー指示）。共通CSS の html{scroll-behavior:smooth} をこのページ固有CSS で上書き */
/* ===== 製品一覧・中カテゴリページ共通スタイル（fsi-embedded.css の拡張） ===== */
/* 検索条件ピル（page-hero内） */
.cond{display:inline-flex;align-items:center;gap:calc(8px * var(--sp-k));margin-top:calc(18px * var(--sp-k));background:#fff;border:1px solid var(--line);border-radius:var(--shape-pill);padding:calc(9px * var(--sp-k)) calc(20px * var(--sp-k));font-size:var(--fs-body);font-weight:700;color:var(--ink-soft);box-shadow:var(--sh-1)}
.cond .k{font-family:"Roboto Condensed",sans-serif;font-size:var(--fs-label);letter-spacing:.08em;color:var(--ink-mute)}
.cond b{color:var(--prod)}
/* 大分類ラベル（page-hero内、H1の上） */
/* ページの特長パネル */
.feature-panel{border:1px solid var(--line);background:#fff;border-radius:var(--rd-lg);padding:calc(42px * var(--sp-k)) calc(48px * var(--sp-k));box-shadow:var(--sh-1)}/* 幅は .w-md（基本1080） 2026-08-16 */
.feature-panel h2{text-align:center;font-size:calc(24px * var(--fs-k));font-weight:900;letter-spacing:-0.02em}
.flist{margin-top:calc(28px * var(--sp-k));display:grid;gap:calc(18px * var(--sp-k))}
.fitem{display:flex;gap:calc(16px * var(--sp-k));align-items:flex-start}
.fitem .n{width:30px;height:30px;border-radius:50%;background:var(--prod);color:#fff;font-family:"Roboto Condensed",sans-serif;font-weight:700;font-size:var(--fs-sub);display:flex;align-items:center;justify-content:center;flex:none;margin-top:2px}
.fitem p{font-size:var(--fs-body);line-height:1.9;color:var(--ink);font-weight:500}
.feature-panel .cta{text-align:center;margin-top:calc(30px * var(--sp-k))}
/* チップベンダー × シリーズ */
.vs-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:calc(16px * var(--sp-k));align-items:start}
.vs-grid .vs-panel+.vs-panel{margin-top:calc(16px * var(--sp-k))}
.vs-row{display:flex;gap:calc(16px * var(--sp-k));padding:calc(13px * var(--sp-k)) 0;border-bottom:1px solid var(--hair);align-items:baseline}
.vs-row:last-child{border-bottom:none;padding-bottom:2px}
.vs-row .fam{width:96px;flex:none;font-weight:900;font-size:var(--fs-body)}
.vs-row .chips{display:flex;flex-wrap:wrap;gap:calc(8px * var(--sp-k))}
.vs-row .chips a{font-size:var(--fs-ui);padding:calc(6px * var(--sp-k)) calc(15px * var(--sp-k));border:1px solid var(--line);border-radius:var(--rd-btn);background:var(--bg-soft);color:var(--ink-soft);font-weight:500;transition:.14s}
.vs-row .chips a:hover{border-color:var(--prod);color:var(--prod);background:#fff}
/* 一覧：フィルター（サイドメニュー）＋グリッド — 一覧セクションのみ特殊レイアウト */
#list{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#list .sec-head .en{color:var(--prod)}
#list .sec-head .en::before{color:var(--prod)}
#list .pl-cond b{color:var(--prod)}
.plist{display:grid;grid-template-columns:minmax(280px,324px) 1fr;gap:0;align-items:stretch}
.fside-rail{background:color-mix(in oklab,var(--prod-bg) 8%,#fff);border-left:3px solid var(--prod);border-right:1px solid var(--line)}
.fside{padding:calc(38px * var(--sp-k)) clamp(calc(20px * var(--sp-k)),2vw,calc(30px * var(--sp-k))) calc(46px * var(--sp-k)) clamp(calc(28px * var(--sp-k)),3.5vw,calc(60px * var(--sp-k)));display:flex;flex-direction:column;gap:calc(12px * var(--sp-k));position:sticky;top:97px}/* 絞り込みカラムを sticky に（2026-09-08 ユーザー指示。設計時に一時解除されていたもの）。メニューが画面より高いときの上下切替は src/js/modules/sticky-filter.js が top / margin-top を動かす */
.fside>*{flex:none}
.fside::-webkit-scrollbar{width:6px}
.fside::-webkit-scrollbar-thumb{background:var(--blue-100);border-radius:var(--shape-pill)}
.plist-main{width:100%;max-width:1160px;margin:0 auto;padding:calc(84px * var(--sp-k)) clamp(calc(28px * var(--sp-k)),4vw,calc(56px * var(--sp-k))) calc(96px * var(--sp-k))}/* ペイン上限をラダー値1160へ（1120廃止） 2026-08-16 */
.fside .fs-h{display:flex;align-items:center;font-size:var(--fs-card);font-weight:900;color:var(--ink);padding:calc(4px * var(--sp-k)) 0 calc(10px * var(--sp-k))}
details.fgroup{border:1px solid var(--line);background:#fff;border-radius:var(--rd-md);overflow:hidden;box-shadow:var(--sh-1)}
.fgroup summary{display:flex;align-items:center;justify-content:space-between;gap:calc(8px * var(--sp-k));background:#fff;padding:calc(14px * var(--sp-k)) calc(17px * var(--sp-k));font-size:var(--fs-ui);font-weight:900;cursor:pointer;list-style:none;transition:.14s}
.fgroup summary:hover{background:var(--bg-soft)}
.fgroup[open] summary{border-bottom:1px solid var(--hair)}
.fgroup summary::-webkit-details-marker{display:none}
.fgroup summary::after{content:"−";font-family:"Roboto Condensed",sans-serif;color:var(--prod);font-weight:700}
.fgroup:not([open]) summary::after{content:"+"}
.fgroup ul{list-style:none;padding:calc(8px * var(--sp-k)) calc(16px * var(--sp-k)) calc(12px * var(--sp-k));display:grid;gap:1px}
.fgroup .gsub{font-size:var(--fs-label);font-weight:900;color:var(--ink-mute);padding:calc(9px * var(--sp-k)) 2px calc(3px * var(--sp-k));letter-spacing:.04em}
.fgroup label{display:flex;align-items:center;gap:calc(9px * var(--sp-k));font-size:var(--fs-ui);font-weight:500;padding:calc(5px * var(--sp-k)) 2px;color:var(--ink);cursor:pointer;border-radius:var(--rd-btn);line-height:1.45}
.fgroup label:hover{background:var(--bg-soft)}
.fgroup input{accent-color:var(--prod);width:15px;height:15px;flex:none}
.fgroup .cnt{margin-left:auto;font-family:"Roboto Condensed",sans-serif;font-size:var(--fs-label);color:var(--ink-mute);white-space:nowrap}
.fgroup .fclear{margin:calc(4px * var(--sp-k)) calc(16px * var(--sp-k)) calc(15px * var(--sp-k));display:block;text-align:center;font-size:var(--fs-ui);font-weight:700;color:var(--prod);border:1px solid color-mix(in oklab,var(--prod) 30%,#fff);border-radius:var(--rd-btn);padding:calc(7px * var(--sp-k))}
.fgroup .fclear:hover{background:var(--prod-soft)}
.pl-cond{font-size:var(--fs-body);color:var(--ink-mute);text-align:left;margin-top:calc(12px * var(--sp-k))}
.pl-cond b{color:var(--ink)}
/* 一覧ツールバー（製品数・並び順・表示数） */
.ltool{display:flex;align-items:center;justify-content:space-between;gap:calc(16px * var(--sp-k));flex-wrap:wrap;margin-bottom:calc(18px * var(--sp-k))}
.ltool .cnt{font-size:var(--fs-sub);color:var(--ink-soft);font-weight:500}
.ltool .cnt b{font-family:"Roboto Condensed",sans-serif;font-size:calc(22px * var(--fs-k));font-weight:700;color:var(--prod);margin:0 2px}
.ltool .ctrl{display:flex;gap:calc(16px * var(--sp-k));flex-wrap:wrap}
.lsel{display:flex;align-items:center;gap:calc(9px * var(--sp-k));font-size:var(--fs-ui);font-weight:700;color:var(--ink-soft)}
.lsel .sw{position:relative;display:inline-flex}
.lsel .sw::after{content:"";position:absolute;right:12px;top:50%;transform:translateY(-50%);border-left:4.5px solid transparent;border-right:4.5px solid transparent;border-top:5px solid var(--ink-soft);pointer-events:none}
.lsel select{appearance:none;-webkit-appearance:none;border:1px solid var(--line);border-radius:8px;background:#fff;padding:calc(9px * var(--sp-k)) calc(34px * var(--sp-k)) calc(9px * var(--sp-k)) calc(14px * var(--sp-k));font-size:var(--fs-ui);font-family:inherit;font-weight:500;color:var(--ink);cursor:pointer;outline:none}
.lsel select:hover{border-color:var(--prod)}
/* 一覧内グループ見出し */
/* メーカー紹介パネルの幅は .w-md（基本1080） 2026-08-16 */
/* カテゴリジャンプチップ（役割B：セクション内ジャンプと同一の形） */
.catset .chips{display:flex;flex-wrap:wrap;gap:calc(9px * var(--sp-k));padding-top:calc(4px * var(--sp-k))}
.catset .chips a{display:inline-flex;align-items:center;gap:calc(7px * var(--sp-k));font-size:var(--fs-ui);font-weight:700;padding:calc(8px * var(--sp-k)) calc(16px * var(--sp-k));border:1px solid color-mix(in oklab,var(--prod) 30%,#fff);border-radius:var(--rd-btn);background:#fff;color:var(--prod);transition:.14s}
.catset .chips a::after{content:"";width:12px;height:12px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.6}
.catset .chips a:hover{background:var(--prod);color:#fff;border-color:var(--prod)}
.catset .chips a:hover::after{opacity:1}@media(max-width:980px){.catset{grid-template-columns:1fr}}
/* .pager は3ページ（中カテゴリ／ニュース一覧／イベント一覧）で使うため共通CSSへ移設（2026-08-28） */
/* 兄弟カテゴリタイル */
/* .sib（兄弟カテゴリタイル・絞り込みの入口カード）は受託コラムの記事の後でも使うため共通 CSS（fsi-embedded.css）へ移設（2026-10-06。値はそのまま） */
/* サポート 8カード */
.sup{border:1px solid var(--line);background:#fff;border-radius:var(--rd-md);padding:calc(20px * var(--sp-k)) calc(20px * var(--sp-k)) calc(22px * var(--sp-k));box-shadow:var(--sh-1)}
.sup .n{font-family:"Roboto Condensed",sans-serif;font-size:calc(28px * var(--fs-k));font-weight:700;line-height:1;color:color-mix(in oklab,var(--prod) 32%,#fff)}
.sup :is(h3,h4,h5,h6){font-size:var(--fs-card);font-weight:900;margin-top:calc(9px * var(--sp-k));line-height:1.5}
.sup p{font-size:var(--fs-body);color:var(--ink-soft);margin-top:calc(8px * var(--sp-k));line-height:1.8}
/* FAQ */
details.qa{border:1px solid var(--line);background:#fff;border-radius:var(--rd-md);box-shadow:var(--sh-1)}
/* メーカーカード：.mk / .mk-grid は共通CSS（役割E）へ移設 */
.grp-lead p{font-size:var(--fs-body);color:var(--ink-soft);line-height:2;max-width:66em;margin:calc(12px * var(--sp-k)) auto 0}
/* 受託開発クロスセル（theme-sol） */
/* .chk-grid / .chk / .svc-row は共通CSSへ移設（役割G） */
.dev-h4{font-size:calc(20px * var(--fs-k));font-weight:900;margin:calc(46px * var(--sp-k)) 0 calc(6px * var(--sp-k));display:flex;align-items:center;gap:calc(11px * var(--sp-k))}
.dev-h4::before{content:"";width:5px;height:20px;background:var(--sol);border-radius:2px;flex:none}
.dev-p{font-size:var(--fs-body);color:var(--ink-soft);line-height:2;margin-top:calc(10px * var(--sp-k));max-width:72em}
/* 記事（FPGAボードとは） */
.article .kumi-link{display:grid;grid-template-columns:130px 1fr;gap:calc(20px * var(--sp-k));background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--rd-md);padding:calc(20px * var(--sp-k)) calc(22px * var(--sp-k));margin-top:calc(40px * var(--sp-k));align-items:center;transition:.16s var(--ease)}
.article .kumi-link:hover{border-color:var(--navy);box-shadow:var(--sh-1)}
.article .kumi-link .ph{aspect-ratio:4/3}
.article .kumi-link .t{font-size:var(--fs-card);font-weight:900;line-height:1.6;margin-top:calc(6px * var(--sp-k))}
.article .kumi-link .d{font-size:var(--fs-sub);color:var(--ink-soft);line-height:1.8;margin-top:calc(7px * var(--sp-k))}
/* ニーズ別検索パネル */
.needs{align-items:start}
.np{border:1px solid var(--hair);background:#fff;border-radius:var(--rd-md);box-shadow:var(--sh-1);overflow:hidden}
.np h3{background:var(--prod);color:#fff;font-size:var(--fs-cardsub);font-weight:900;text-align:center;padding:calc(13px * var(--sp-k));letter-spacing:.04em}
.np .links{padding:calc(16px * var(--sp-k)) calc(18px * var(--sp-k)) calc(18px * var(--sp-k));display:flex;flex-wrap:wrap;gap:calc(8px * var(--sp-k));align-content:flex-start}
.np .links a{display:inline-flex;align-items:center;font-size:var(--fs-ui);font-weight:500;border:1px solid var(--line);border-radius:var(--rd-btn);padding:calc(6px * var(--sp-k)) calc(14px * var(--sp-k));color:var(--ink-soft);background:var(--bg-soft);transition:.14s}
.np .links a:hover{border-color:var(--prod);color:var(--prod);background:#fff}
.np .gsub{width:100%;font-size:var(--fs-label);font-weight:900;color:var(--ink-mute);margin:calc(8px * var(--sp-k)) 0 2px;letter-spacing:.04em}
.np .gsub:first-child{margin-top:0}@media(max-width:1100px){.sup-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:980px){.plist,.vs-grid,.mk-grid,.needs{grid-template-columns:1fr}.fside{position:static;max-height:none;padding:calc(28px * var(--sp-k))}.fside-rail{border-right:none;border-bottom:1px solid var(--line)}.plist-main{padding:calc(48px * var(--sp-k)) calc(28px * var(--sp-k)) calc(64px * var(--sp-k))}.feature-panel{padding:calc(30px * var(--sp-k)) calc(24px * var(--sp-k))}}@media(max-width:640px){.sup-grid{grid-template-columns:1fr}}