/* ===== ロボットハンド制御ソフトウェア開発 固有（2026-09-29） ===== */
/* 「特徴」の構成図: 旧ページ .fsi-special-box-chart（基幹システム／ロボットコントローラ／ロボットの 3 層）を、既存の語彙（白いカードの枠、アイコン＋見出し＋✔ 箇条書きの項目）で組み直したもの。
   図の中の文字は直値。幅はセクション幅（1 セクション 1 幅）に従う。図版は views/solution/figures/robothand-system.php */
/* 2026-10-02 組み直し（クライアント修正依頼 V1＋ユーザー指摘「変。幅が広すぎる。ロボットコントローラ・ロボットも含め考え直せ。アイコン再考」）:
   図全体は中身の幅（3 段の枠は同じ幅、中央）。項目は同じ幅 --iw（いちばん長い箇条「ロボット動作制御（アーム移動）」が 1 行に入る幅）で段の中央に並べる。
   基幹システムの段は旧ページと同じく帯（薄い地）に横並び → 中央の線 → PLC の帯。帯の中の項目は枠なし（箱を重ねない）。ロボットコントローラ（開発対象）は淡い紺の段に白い項目の枠。
   項目のアイコンはサイトの線のアイコン（緑の線を角丸の地に、ロボットは丸の地に）。段の見出しのアイコンは元からある画像（同日ユーザー指摘「見出しのアイコン…あるやつ使って」） */
.rh{--iw:330px;width:max-content;max-width:100%;margin:0 auto;display:grid}
.rh-tier{border:1px solid var(--line);border-radius:var(--rd-lg);background:#fff;box-shadow:var(--sh-1);padding:calc(20px * var(--sp-k)) calc(28px * var(--sp-k)) calc(26px * var(--sp-k))}
.rh-tier.hl{background:var(--blue-50);border-color:color-mix(in oklab,var(--navy) 24%,#fff)}
.rh-lab{display:flex;align-items:center;gap:calc(12px * var(--sp-k));font-size:var(--fs-card);font-weight:900;color:var(--navy)}
.rh-row{display:grid;grid-template-columns:repeat(var(--n),var(--iw));gap:calc(12px * var(--sp-k));width:max-content;max-width:100%;margin:calc(18px * var(--sp-k)) auto 0}
.rh-row.n1{--n:1}.rh-row.n2{--n:2}
.rh-link.in+.rh-row{margin-top:0}
.rh-band{background:var(--bg-soft);border-radius:12px;padding:calc(4px * var(--sp-k))}
.rh-item{display:grid;grid-template-columns:44px minmax(0,1fr);gap:calc(14px * var(--sp-k));align-items:start;padding:calc(14px * var(--sp-k)) calc(16px * var(--sp-k));border-radius:10px}
.rh-cards .rh-item{background:#fff;border:1px solid var(--hair)}
.rh-item .ic{width:44px;height:44px;border-radius:12px;background:var(--sol-soft);display:flex;align-items:center;justify-content:center}
.rh-band .rh-item .ic{background:#fff}
.rh-item .ic svg,.rh-robots .ic svg{width:24px;height:24px;fill:none;stroke:var(--sol);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rh-item :is(h3,h4,h5,h6){font-size:var(--fs-cardsub);font-weight:900;margin:0;line-height:1.5}
.rh-item ul{list-style:none;margin:calc(6px * var(--sp-k)) 0 0;padding:0;font-size:var(--fs-sub);color:var(--ink-soft);line-height:1.7}
.rh-item li::before{content:"✔";color:var(--sol);font-weight:900;margin-right:calc(6px * var(--sp-k))}
.rh-link{width:2px;height:24px;margin:0 auto;background:color-mix(in oklab,var(--navy) 35%,#fff);border-radius:1px}
.rh-link.in{height:18px}
.rh-robots{display:flex;align-items:center;justify-content:center;gap:calc(16px * var(--sp-k));margin-top:calc(18px * var(--sp-k))}
.rh-robots .ic{width:60px;height:60px;border-radius:50%;background:var(--sol-soft);display:flex;align-items:center;justify-content:center}
.rh-robots .ic svg{width:38px;height:38px}
.rh-robots .dots{color:var(--ink-mute);font-weight:700;letter-spacing:.2em;padding:0 calc(4px * var(--sp-k))}
@media(max-width:760px){.rh{width:auto}.rh-row,.rh-row.n2{grid-template-columns:minmax(0,1fr);width:auto}.rh-tier{padding:calc(18px * var(--sp-k)) calc(16px * var(--sp-k)) calc(20px * var(--sp-k))}.rh-band.n2{gap:0}.rh-band .rh-item+.rh-item{border-top:1px solid var(--hair);border-radius:0}}/* 縦積みの帯の中は間を詰めて細い線で区切る */
@media(max-width:640px){.rh-robots{gap:calc(10px * var(--sp-k))}.rh-robots .ic{width:52px;height:52px}}
/* 配色は原案（旧ページの図のアイコン）の段ごとのテーマ色（2026-10-02 ユーザー指摘「青とか緑とかじゃなく、そのテーマ色で配色しろ」）:
   基幹システム 赤 #C31011／ロボットコントローラ 紺 #0C2967／ロボット 金 #7C5F01（それぞれ原案の画像の色）。見出しの文字・アイコンの線・✔・帯と段の淡い地・ロボットの丸をその色で。段の間の線は灰（原案 #474c5d） */
.rh-tier.biz{--tc:#C31011}.rh-tier.ctl{--tc:#0C2967}.rh-tier.rbt{--tc:#7C5F01}
.rh-band.plc{background:#fff;border:1px solid color-mix(in oklab,var(--tc) 35%,#fff)}/* 原案の PLC は地なし（旧 .fsbc-group.only-right-one は background transparent）→ 白地に灰の枠線（2026-10-02 ユーザー指摘「枠線くらい付けろ」） */
.rh-lab{color:var(--tc)}
.rh-tier.hl{background:color-mix(in oklab,var(--tc) 6%,#fff);border-color:color-mix(in oklab,var(--tc) 24%,#fff)}
.rh-band{background:color-mix(in oklab,var(--tc) 7%,#fff)}
.rh-item .ic{background:color-mix(in oklab,var(--tc) 9%,#fff)}
.rh-band .rh-item .ic{background:#fff}
.rh-item .ic svg{stroke:var(--tc)}
.rh-item li::before{color:var(--tc)}
/* カード同士をつなぐ線（段の間＝図の幹）は太く 4px・濃い灰、カードの中の線（基幹システムの帯 → PLC）は 2px のまま段のテーマ色を淡く（2026-10-02 ユーザー指摘「カード内ラインとカードつなげるラインが何で一緒なんだよ」「カード同士の方を太くすればいい」） */
.rh-link{width:4px;border-radius:2px;background:#474c5d}
.rh-link.in{width:2px;border-radius:1px;background:color-mix(in oklab,var(--tc) 50%,#fff)}
.rh-robots .ic{background:var(--tc)}
.rh-robots .ic svg{stroke:#fff}
/* 段の見出しのアイコンはサイトの見出しのアイコン .ci（fsi-embedded.css。30px の淡い角丸に線のアイコン）を段のテーマ色で */
.rh-lab .ci{width:48px;height:48px;border-radius:12px;background:color-mix(in oklab,var(--tc) 10%,#fff)}/* 段の見出しのアイコンは項目のアイコン（44px）より大きく（.ci の 30px のままだと下の項目より小さく逆転していた） */
.rh-lab .ci svg{width:26px;height:26px;stroke:var(--tc)}
.rh-band.plc .rh-item .ic{background:color-mix(in oklab,var(--tc) 9%,#fff)}/* PLC は白地の枠なので、アイコンの地は白にせず段の色を淡く（ロボットコントローラの白いカードと同じ） */