/* ===== モデルベース開発（受託開発下層・開発手法詳細）fsi-embedded.css の拡張 ===== */
/* 上位カテゴリラベル（page-hero内、H1の上）― 製品下層 .cat-parent の受託（sol）版 */
/* ソリューション／委託形態パネル */
.mbd-panel{background:#f2f9f5;border:1px solid color-mix(in oklab,var(--sol) 10%,#fff);border-radius:var(--rd-lg);padding:calc(36px * var(--sp-k)) calc(38px * var(--sp-k)) calc(40px * var(--sp-k))}
.mbd-panel>h3{font-size:calc(22px * var(--fs-k));font-weight:900;margin-bottom:calc(24px * var(--sp-k));display:flex;align-items:center;gap:calc(11px * var(--sp-k));letter-spacing:-0.01em}
.mbd-panel>h3::before{content:"";width:5px;height:22px;background:var(--sol);border-radius:2px;flex:none}

.svc,.combo-row .cmb-s{background:#fff;border:1px solid var(--line);border-radius:var(--rd-md)}
.svc{position:relative;display:flex;flex-direction:column;padding:calc(24px * var(--sp-k)) calc(28px * var(--sp-k)) calc(20px * var(--sp-k));box-shadow:var(--sh-1);transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .14s}
.combo-row .cmb-s{padding:calc(14px * var(--sp-k)) calc(22px * var(--sp-k));min-height:82px;align-self:stretch;display:flex;align-items:center;justify-content:center}
.svc:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--sol)}
/* .aud（悩みピル）は共通CSSへ昇格（2026-08-17 エッジAIで2ページ目の利用）。以下は文脈固有の上書きのみ */
.svc .aud{margin-bottom:calc(13px * var(--sp-k))}
.svc :is(h3,h4,h5,h6),.combo-row .cmb-s h4{font-size:var(--fs-card);font-weight:900;line-height:1.6;text-wrap:balance;word-break:auto-phrase}
.combo-row .cmb-s h4{font-size:calc(20px * var(--fs-k));text-align:center}
.svc p{font-size:var(--fs-body);color:var(--ink-soft);line-height:1.9;margin-top:calc(10px * var(--sp-k));flex:1;font-weight:500}
.svc .lk{align-self:flex-end;margin-top:calc(14px * var(--sp-k));display:inline-flex;align-items:center;gap:calc(5px * var(--sp-k));font-size:var(--fs-ui);font-weight:700;color:var(--sol)}
.svc .lk svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.6;fill:none}
.x-sep{display:flex;flex-direction:column;align-items:center;margin:calc(-17px * var(--sp-k)) 0;position:relative;z-index:2;height:68px}
.x-sep.sm{margin:0;height:auto}
.x-sep.sm .c{width:40px;height:40px;font-size:calc(20px * var(--fs-k))}
.x-sep .c{width:68px;height:68px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);display:flex;align-items:center;justify-content:center;font-size:calc(34px * var(--fs-k));font-weight:900;color:var(--sol);line-height:1}

/* .fcard は共通CSSへ昇格（2026-08-16 エッジAIで2ページ目の利用） */
.combo-row .cmb-f{background:#cde9da;text-align:center}
.combo-row .cmb-f{border-radius:var(--rd-md);padding:calc(12px * var(--sp-k)) calc(18px * var(--sp-k));min-width:140px;min-height:82px;align-self:stretch;display:flex;align-items:center;justify-content:center}
.combo-row .cmb-f .k{display:block;font-size:var(--fs-label);font-weight:700;color:var(--ink-soft)}
.combo-row .cmb-f .n{display:block;font-size:calc(22px * var(--fs-k));font-weight:900;color:var(--ink);margin-top:1px}
.combo-row .cmb-f .n{font-size:calc(20px * var(--fs-k))}
/* 【新規部品】組み合わせ例：「お悩み → ソリューション × 委託形態」1行1組の対応表。
   上の2パネルのカードをそのまま縮めて並べる：ソリューション側は .svc のカード体裁、
   委託形態側は .fcard .hd の緑地＋キッカー＋名前。どちらも体裁は元のカードと1定義を共有する。
   悩みピル .aud、×バッジ .x-sep.sm、共通矢印 .fig-arrow.r、結論行 .fig-close も既存部品。 */
.combo{display:grid;gap:calc(14px * var(--sp-k));grid-template-columns:auto auto minmax(0,1fr) auto auto}
.combo>.fig-head{grid-column:1/-1;margin-bottom:calc(4px * var(--sp-k))}
.combo-row{grid-column:1/-1;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--rd-md);padding:calc(22px * var(--sp-k)) calc(30px * var(--sp-k)) calc(20px * var(--sp-k));
  display:grid;grid-template-columns:subgrid;align-items:center;gap:0 calc(18px * var(--sp-k))}
.combo-row>.fig-close{grid-column:1/-1;margin-top:calc(14px * var(--sp-k))}
.combo-row .aud span{font-size:var(--fs-ui);padding:calc(8px * var(--sp-k)) calc(16px * var(--sp-k)) calc(8px * var(--sp-k)) calc(14px * var(--sp-k))}
@media(max-width:900px){.combo{grid-template-columns:1fr}
  .combo-row{grid-template-columns:1fr;justify-items:center;gap:calc(12px * var(--sp-k))}
  .combo-row .fig-arrow.r svg{transform:none}}

/* V字対応領域 */
/* 図版は内容幅 1080 一本（`.w-md` と同値）。ユーザー裁定 2026-09-15 で従来の 80% を廃止（img に既定の max-width が無いため width:100% を明示） */
.vfig{display:block;width:100%;max-width:1080px;height:auto;margin:calc(14px * var(--sp-k)) auto calc(26px * var(--sp-k))}

.area{border:1px solid var(--line);background:#fff;border-radius:var(--rd-md);padding:calc(24px * var(--sp-k)) calc(28px * var(--sp-k));box-shadow:var(--sh-1);display:flex;flex-direction:column}
.area h3{font-size:var(--fs-card);font-weight:900;display:flex;gap:calc(10px * var(--sp-k));align-items:center;letter-spacing:-0.01em}
.area h3::before{content:"";width:5px;height:19px;background:var(--sol);border-radius:2px;flex:none}
.area p{font-size:var(--fs-body);color:var(--ink-soft);line-height:1.9;margin-top:calc(12px * var(--sp-k));flex:1;font-weight:500}

/* 強み: 4カラム .reason 型（TOP部品＋solカラー、FPGAページと同型） */
#strengths .reason p{text-wrap:pretty}
#strengths .reason :is(h3,h4,h5,h6) small{font-size:var(--fs-label);color:var(--ink-mute);font-weight:700;margin-left:calc(4px * var(--sp-k))}


/* 対応業界 */
.indp :is(h3,h4,h5,h6){display:flex;align-items:center;gap:calc(10px * var(--sp-k))}
.indp .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(24px * var(--sp-k));margin-top:calc(24px * var(--sp-k))}
.indp h4{font-size:var(--fs-cardsub);font-weight:900;margin-bottom:calc(11px * var(--sp-k));display:flex;align-items:center;gap:calc(8px * var(--sp-k))}
.indp h4::before{content:"";width:4px;height:15px;background:var(--sol);border-radius:2px;flex:none}

/* 対応環境・ツール */

/* 対応環境・ツールの .toolbox は2ページ（MBD・スマートデバイスアプリ）で使うため fsi-embedded.css へ移設 */

/* 開発事例：.case / .case.row / .case-grid は共通CSS（役割D）へ移設 */

/* ノウハウ集（TOP最新情報カードを踏襲） */
#knowhow .news-feat .thumb{aspect-ratio:16/9}

/* 関連ソリューション（業界タイルと同型のリンクバナー） */

#related .ind-tile{gap:calc(12px * var(--sp-k))}
#related .ind-tile .ph{aspect-ratio:16/8;border-radius:var(--rd-md)}
#related .ind-tile .lb{font-size:var(--fs-ui);font-weight:900;line-height:1.65}@media(max-width:900px){#related .ind-grid{grid-template-columns:1fr 1fr !important}}@media(max-width:560px){#related .ind-grid{grid-template-columns:1fr !important}}@media(max-width:1100px){.indp .cols{grid-template-columns:1fr 1fr}}@media(max-width:860px){.forms-grid{grid-template-columns:1fr}.mbd-panel{padding:calc(26px * var(--sp-k)) calc(22px * var(--sp-k)) calc(30px * var(--sp-k))}}@media(max-width:640px){.svc-grid{grid-template-columns:1fr}.indp .cols{grid-template-columns:1fr}.svc :is(h3,h4,h5,h6),.case>:is(h3,h4,h5,h6){min-height:0}}