/* ===== 製造業データ利活用（ページ固有） ===== */

/* 新規部品：実現できること図（INPUT → FSIソリューション → OUTPUT の縦フロー）
   段間コネクタは共通 .fig-arrow、ゾーン見出しは共通 .grp-hを使用。 */
.io-side{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--rd-md);padding:calc(20px * var(--sp-k)) calc(20px * var(--sp-k)) calc(22px * var(--sp-k))}
.io-list{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(10px * var(--sp-k))}
.io-list.c3{grid-template-columns:repeat(3,1fr)}
.io-box{background:#fff;border:1px solid var(--line);border-radius:var(--rd-btn);padding:calc(12px * var(--sp-k)) calc(14px * var(--sp-k)) calc(13px * var(--sp-k))}
.io-box :is(h3,h4,h5,h6){font-size:var(--fs-cardsub);font-weight:900;line-height:1.5}
.io-box p{font-size:var(--fs-body);color:var(--ink-soft);line-height:1.7;margin-top:calc(5px * var(--sp-k));font-weight:500}
.io-box .io-src{margin-top:calc(9px * var(--sp-k))}
.io-core{background:var(--navy);border:1px solid var(--navy);border-radius:var(--rd-md);box-shadow:var(--sh-1);margin:0 auto;max-width:760px}
.io-core-h{color:#fff;border-bottom:1px solid rgba(255,255,255,.22);padding:calc(17px * var(--sp-k)) calc(20px * var(--sp-k));text-align:center;font-size:calc(22px * var(--fs-k));font-weight:900;line-height:1.65}
.io-core-b{list-style:none;display:flex;align-items:center;justify-content:center;padding:calc(17px * var(--sp-k)) calc(20px * var(--sp-k)) calc(19px * var(--sp-k))}
.io-core-b li{display:flex;align-items:center;font-size:var(--fs-body);font-weight:900;color:#fff}
.io-core-b li+li::before{content:"";width:18px;height:18px;margin:0 calc(14px * var(--sp-k));background:rgba(255,255,255,.62);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/contain no-repeat}
@media(max-width:1100px){.io-list,.io-list.c3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.io-list,.io-list.c3{grid-template-columns:1fr}}

/* 既存部品へのページ内レイアウト差分 */
.dom-panel>ul.ck{width:max-content;max-width:100%;margin:0 auto}
#why .reason .tags{display:flex;gap:calc(7px * var(--sp-k));flex-wrap:wrap;justify-content:center;margin-top:calc(18px * var(--sp-k))}