/* forcenet.jp リニューアル — DESIGN.md トークン準拠
   デザインアイデンティティ: 「箱と回線」= エンジニアリンググレード
   角丸は小さく（標準4px / 小2px）、回線ライン・ノード・パケット・LEDを構造記号として使う */

:root {
  --navy-950: #0B1140;
  --navy-800: #131C60;
  --blue-700: #1A2888;
  --blue-500: #2F4BC7;
  --blue-300: #8FA5EC;
  --blue-100: #E8EDFB;
  --paper: #F5F7FC;
  --ink: #1A1E30;
  --ink-sub: #555E7C;
  --line: #D8DEEF;
  --amber: #F7A600;
  --amber-hover: #FFB92E;
  --status-ok: #2E9E6B;
  --device-bezel: #E3E9F7;
  --device-edge: #C6D1EA;
  --screen-bg: #FAFCFF;
  --shadow: 0 4px 12px rgba(11, 17, 64, .16);
  --shadow-hover: 0 6px 18px rgba(11, 17, 64, .22);
  --radius-sm: 4px;
  --radius-xs: 2px;
  --font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono", monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

/* ===== 見出しの折返し規約（例外なく全見出しに適用する） =====
   規約: h1 / h2 / h3 のテキストは必ず .phrase で文節ごとに包む。素のテキストを
   直接置かない。1文節しかない見出しも 1つの .phrase で包む。
   分割の粒度は「最も狭いブレークポイント（375px）で 1文節が 1行に収まること」を基準にする。

   仕組み:
   1) .phrase は inline-block。inline-block は行頭・行末でしか分割されないため、
      節の途中（例「同じ会社が答／えます。」）で折れなくなる。全ブラウザで効く保証線。
   2) word-break: auto-phrase は対応ブラウザ（Chromium系）が文節を自動判定する上乗せ。
      非対応ブラウザは宣言ごと無視するので 1) が担保する。
   keep-all は英数混在で副作用が出るため使わない。

   検証: 見出しの行数は Range#getClientRects で数えること。ブロック要素の
   Element#getClientRects は行数ではなく境界ボックスを返すため、折返しを検出できない。 */
h1, h2, h3,
.sec-lead { word-break: auto-phrase; }
.phrase { display: inline-block; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--blue-500); }

:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
/* 濃地（筐体パネル・フッター・メガパネル）の上では blue-500 が 2.5:1 しか出ないためアンバーへ */
.topology :focus-visible,
.case-fig :focus-visible { outline-color: var(--amber); }

/* LED（稼働中の記号）と端子マーク */

.led {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--status-ok);
  box-shadow: 0 0 0 3px rgba(46, 158, 107, .22);
}
.terminal {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-xs);
  background: var(--amber);
}

/* ---------- ヘッダー ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

/* 上段: 縦罫区切りのテキストリンク（枠付きタブは廃止） */

.utility-bar {
  border-bottom: 1px solid var(--line);
  padding-top: 3px;
}

.utility-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.reader-tabs,
.utility-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.reader-tabs { min-width: 0; }
.reader-tabs li + li { border-left: 1px solid var(--line); }
.reader-tabs a {
  display: block;
  padding: 2px 14px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.7;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
  transition: color .18s ease-out;
}
.reader-tabs li:first-child a { padding-left: 0; }
.reader-tabs a:hover { color: var(--blue-500); }
.reader-tabs a.is-current {
  font-weight: 700;
  color: var(--blue-700);
  text-decoration: underline;
  text-decoration-color: var(--amber);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.utility-links { margin-left: auto; gap: 22px; }
.utility-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
  transition: color .18s ease-out;
}
.utility-links a:hover { color: var(--blue-500); }
.utility-links a:hover .ico-chev { transform: translateX(2px); }

.ico-chev {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  color: var(--blue-500);
  transition: transform .18s ease-out;
}

/* 下段: ロゴ + NAV + 通常高さCTA */

.header-main { position: relative; }

.header-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
  height: 76px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}
.brand-tagline {
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .02em;
  color: var(--ink-sub);
  white-space: nowrap;
}

/* FNマーク＋社名ワードマークのロックアップ */
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-mark {
  flex-shrink: 0;
  width: auto;
  height: 38px;
}
.brand-name {
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--ink);
  white-space: nowrap;
  transition: color .18s ease-out;
}
.brand:hover .brand-name { color: var(--blue-700); }

.gnav {
  margin-left: auto;
  align-self: stretch;
  display: flex;
  align-items: stretch;
}
/* NAV直下の一次項目だけを対象にする。子孫セレクタにするとメガパネル内の
   ul / li / a まで巻き込み、パネルの中身が横並び・nowrap になる */
.gnav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: 2px;
}
/* li をヘッダー1段分（76px）いっぱいに伸ばす。メガパネルの上端（top:100%）と
   li の下端が同一線で接するため、トリガーとパネルの間に「ホバー溝」が生まれない */
.gnav > ul > li {
  display: flex;
  align-items: center;
}
.gnav > ul > li > a,
.gnav-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 8px 9px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  white-space: nowrap;
  color: var(--ink);
  background: none;
  border: 0;
  text-decoration: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color .18s ease-out, color .18s ease-out;
}
.gnav > ul > li > a:hover,
.gnav-trigger:hover,
.gnav-item.is-open > .gnav-trigger {
  background: var(--blue-100);
  color: var(--blue-700);
}
.ico-caret {
  width: 9px;
  height: 6px;
  flex-shrink: 0;
  color: var(--blue-500);
  transition: transform .18s ease-out;
}
.gnav > ul > li > a:hover .ico-caret,
.gnav-trigger:hover .ico-caret { transform: translateY(2px); }
.gnav-item.is-open > .gnav-trigger .ico-caret { transform: rotate(180deg); }

.header-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  background: var(--amber);
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  transition: background-color .18s ease-out, box-shadow .18s ease-out;
}
.header-cta:hover {
  background: var(--amber-hover);
  box-shadow: var(--shadow-hover);
}

.menu-btn {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--blue-700);
  padding: 8px;
  cursor: pointer;
  transition: background-color .18s ease-out;
}
.menu-btn:hover { background: var(--blue-100); }

/* ---------- ヒーロー ---------- */

.hero {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 写真の壁面と同じモチーフ: ライト地に紺のトレース＋アンバーのノード。
   中央のコピーと干渉しないよう左右の端に寄せ、狭い幅では畳む */
.hero-trace {
  position: absolute;
  top: 0;
  height: 100%;
  width: 260px;
  pointer-events: none;
}
.hero-trace-l { left: 0; }
.hero-trace-r { right: 0; transform: scaleX(-1); }
@media (max-width: 1240px) {
  .hero-trace { display: none; }
}

/* R3-2 お知らせ帯 */

.notice-band {
  position: relative;
  z-index: 1;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 0 64px;
  overflow: hidden;
}

.notice-trace {
  position: absolute;
  top: 0;
  height: 100%;
  width: 240px;
  pointer-events: none;
}
.notice-trace-l { left: 0; }
.notice-trace-r { right: 0; transform: scaleX(-1); }
@media (max-width: 1120px) {
  .notice-trace { display: none; }
}

.notice-close {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--ink-sub);
  cursor: pointer;
  transition: background-color .18s ease-out, color .18s ease-out;
}
.notice-close svg { width: 14px; height: 14px; }
.notice-close:hover { background: var(--blue-100); color: var(--blue-700); }

.notice-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 46px;
  min-width: 0;
}

/* 型番プレート風バッジ */
.notice-badge {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  color: var(--ink);
  background: var(--amber);
  border-radius: var(--radius-xs);
  padding: 5px 10px;
  box-shadow: inset 0 0 0 1px rgba(26, 30, 48, .22);
}

.notice-text {
  margin: 0;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notice-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--blue-700);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
  transition: border-color .18s ease-out, color .18s ease-out;
}
.notice-link .ico-chev { color: var(--blue-500); }
.notice-link:hover { border-color: var(--blue-500); color: var(--blue-500); }
.notice-link:hover .ico-chev { transform: translateX(2px); }

/* R3-4 ヒーロー本体（中央構図） */

.hero-inner {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
  padding: 20px 24px 0;
  text-align: center;
}

/* R3-3 回線ブラケット */

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 12px;
}
.bracket {
  width: 64px;
  height: 24px;
  flex-shrink: 0;
}
.bracket-r { transform: scaleX(-1); }

.hero-badge-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}
.hero-badge-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--ink-sub);
  margin-bottom: 4px;
}
.hero-badge-value {
  font-size: 21px;
  font-weight: 900;
  letter-spacing: .01em;
  color: var(--ink);
  white-space: nowrap;
}
.hero-badge-value strong {
  font-size: 34px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  margin-right: 1px;
}
.hero-badge-value sup {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-sub);
  margin-left: 2px;
}

.hero h1 {
  margin: 0 0 14px;
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 900;
  line-height: 1.32;
  letter-spacing: .02em;
  font-feature-settings: "palt";
}

.lead {
  margin: 0 auto;
  max-width: 640px;
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--ink-sub);
}

/* R3-4 フェースプレート型CTA */

.hero-cta { margin-top: 20px; }

.cta-plates {
  display: grid;
  grid-template-columns: repeat(2, 300px);
  justify-content: center;
  gap: 16px;
}

.plate {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  text-align: left;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background-color .18s ease-out, box-shadow .18s ease-out, transform .18s ease-out;
}
.plate-primary {
  background: var(--amber);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.plate-primary:hover {
  background: var(--amber-hover);
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}
.plate-secondary {
  background: #fff;
  color: var(--blue-700);
  box-shadow: inset 0 0 0 1.5px var(--line), var(--shadow);
}
.plate-secondary:hover {
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--blue-500), var(--shadow-hover);
  transform: translateY(-1px);
}

.plate-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.plate-main {
  font-size: 16px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: .01em;
}
.plate-sub {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
}
.plate-primary .plate-sub { color: rgba(26, 30, 48, .85); }
.plate-secondary .plate-sub { color: var(--ink-sub); }

.plate-arrow {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  transition: transform .18s ease-out;
}
.plate:hover .plate-arrow { transform: translateX(3px); }

.cta-third-row {
  margin: 12px 0 0;
  text-align: center;
}
.cta-third {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  color: var(--blue-700);
  text-decoration: none;
  transition: color .18s ease-out;
}
.cta-third svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--amber);
  transition: transform .18s ease-out;
}
.cta-third:hover { color: var(--blue-500); }
.cta-third:hover svg { transform: translateX(3px); }

/* R3-4 トポロジー帯（主役） */

.topology-wrap {
  position: relative;
  max-width: 1160px;
  margin: 20px auto 0;
  padding: 0 24px;
}

/* ライト地の上に「置かれた箱」。中身の図版は無変更なので地は navy-950 を保つ */
.topology {
  margin: 0;
  padding: 14px 16px 12px;
  border: 1px solid rgba(143, 165, 236, .28);
  border-radius: var(--radius-sm);
  background: var(--navy-950);
  box-shadow: var(--shadow);
}
.topology .topo {
  width: 100%;
  height: auto;
  display: block;
}
.topology figcaption {
  margin-top: 6px;
  text-align: right;
  font-size: 11px;
  line-height: 1.6;
  color: rgba(143, 165, 236, .8);
}
.topo-hint { display: none; }

/* トポロジー内のテキスト（座標系は viewBox 単位） */

.topo text { font-family: var(--font); }
.topo-label { font-size: 10px; fill: var(--blue-300); }
.topo-name { font-size: 12.5px; font-weight: 700; fill: var(--blue-100); }
.topo-name-sm { font-size: 11.5px; font-weight: 700; fill: var(--blue-100); }
.topo-sub { font-size: 8.5px; fill: var(--blue-300); }
.topo-note { font-size: 9.5px; fill: var(--blue-300); }
.topo-legend { font-size: 8.5px; fill: #C7D3F5; }
.topo-legend-ttl { font-size: 9.5px; font-weight: 700; fill: #C7D3F5; }
.topo-mono {
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: .08em;
  fill: var(--blue-300);
  opacity: .85;
}

/* 接続された画面（意匠化UIモック）の構造色 */

.dv-body { fill: var(--device-bezel); stroke: var(--device-edge); stroke-width: 1; }
.dv-edge { fill: var(--device-edge); }
.dv-edge-s { stroke: var(--device-edge); }
.dv-screen { fill: var(--screen-bg); }
.ok-fill { fill: var(--status-ok); }
.ok-soft { fill: var(--status-ok); opacity: .14; }

.p-xs { font-size: 6.5px; }
.p-s { font-size: 7px; }
.p-sm { font-size: 7.5px; font-weight: 700; }
.p-md { font-size: 9px; font-weight: 700; }
.p-num { font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums; }
.p-unit { font-size: 7px; font-weight: 700; }

/* 実績 */

.hero-stats {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
  padding: 20px 24px 26px;
}

.stats {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  max-width: 780px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
/* 区切りはノード付きの縦ライン */
.stat {
  position: relative;
  padding: 0 30px;
  text-align: center;
}
.stat + .stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--line);
}
.stat + .stat::after {
  content: "";
  position: absolute;
  left: -2px;
  top: 50%;
  margin-top: -2.5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amber);
  opacity: .7;
}
.stat dt {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink-sub);
  margin-bottom: 2px;
}
.stat dd { margin: 0; white-space: nowrap; line-height: 1.15; }
.stat .num {
  font-size: 34px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.stat .unit {
  font-size: 14px;
  font-weight: 700;
  margin-left: 2px;
  color: var(--ink-sub);
}
.stat sup {
  font-size: 10px;
  color: var(--ink-sub);
  margin-left: 3px;
}

.stats-note {
  margin: 12px 0 0;
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-sub);
}

/* ---------- 製品ファミリー帯 ---------- */

.belt {
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.belt-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.belt-label {
  margin: 0;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ink-sub);
  border-right: 1px solid var(--line);
  padding-right: 22px;
}
.chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  background: #fff;
  transition: border-color .18s ease-out, box-shadow .18s ease-out, color .18s ease-out;
}
.chip svg { width: 17px; height: 17px; color: var(--blue-700); flex-shrink: 0; }
.chip:hover {
  border-color: var(--blue-500);
  color: var(--blue-700);
  box-shadow: var(--shadow);
}

/* ---------- 最新情報バー ---------- */

.newsbar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.newsbar-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 13.5px;
}
.newsbar-head {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--blue-700);
}
.newsline {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}
.newsline time {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--ink-sub);
}
.newsline .cat {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--blue-700);
  background: var(--blue-100);
  border-radius: var(--radius-xs);
  padding: 2px 9px;
}
.newsline .ttl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .18s ease-out;
}
.newsline:hover .ttl { color: var(--blue-500); text-decoration: underline; }
.news-more {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--blue-500);
  text-decoration: none;
}
.news-more:hover { text-decoration: underline; }

/* ---------- メガメニュー（筐体パネル） ---------- */

/* li は static のまま。絶対配置の基準は position:relative の .header-main になるため、
   top:100% = ヘッダー下段の下端 = 全幅バンドとして開く */
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 5;
  max-height: calc(100vh - 116px);
  overflow-y: auto;
  background: var(--navy-800);
  border-bottom: 2px solid var(--navy-950);
  box-shadow: var(--shadow-hover);
  animation: mega-in .16s ease-out;
}

@keyframes mega-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* トリガー中心へ合わせるアンバーの接続バー（--connector-x は JS が実測して渡す） */
.mega::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--connector-x, 50%);
  width: 26px;
  margin-left: -13px;
  height: 2px;
  background: var(--amber);
}

.mega :focus-visible { outline-color: var(--amber); }

.mega-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 22px 24px 20px;
}

.mega-cols,
.mega-biz {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.mega-col,
.mega-biz > li {
  position: relative;
  padding: 0 24px;
}
.mega-col:first-child,
.mega-biz > li:first-child { padding-left: 0; }
.mega-col:last-child,
.mega-biz > li:last-child { padding-right: 0; }

/* カテゴリ間の仕切りは配線ライン＋ノード */
.mega-col + .mega-col::before,
.mega-biz > li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: rgba(143, 165, 236, .28);
}
.mega-col + .mega-col::after,
.mega-biz > li + li::after {
  content: "";
  position: absolute;
  left: -2.5px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  opacity: .75;
}
.mega-biz > li + li::after { top: 18px; }

.mega-cat {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #C7D3F5;
}
.mega-cat .terminal { width: 7px; height: 7px; }

.mega-list { list-style: none; margin: 0; padding: 0; }

.mega-link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 10px 7px 8px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background-color .18s ease-out, box-shadow .18s ease-out;
}
.mega-link:hover {
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 2px 0 0 var(--amber);
}

.mega-mark {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  background: rgba(143, 165, 236, .1);
  box-shadow: inset 0 0 0 1px rgba(143, 165, 236, .3);
  color: var(--blue-300);
  transition: color .18s ease-out, box-shadow .18s ease-out;
}
.mega-mark svg { width: 16px; height: 16px; }
.mega-link:hover .mega-mark {
  color: var(--amber);
  box-shadow: inset 0 0 0 1px rgba(247, 166, 0, .55);
}

.mega-name {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--blue-100);
  transition: color .18s ease-out;
}
.mega-link:hover .mega-name { color: #fff; }
.mega-desc {
  display: block;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--blue-300);
}

/* 事業内容パネル（浅いバンド） */
.mega-biz > li { padding-top: 0; padding-bottom: 0; }
.biz-link {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background-color .18s ease-out, box-shadow .18s ease-out;
}
.biz-link:hover {
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 2px 0 0 var(--amber);
}
.biz-mark {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  background: rgba(143, 165, 236, .1);
  box-shadow: inset 0 0 0 1px rgba(143, 165, 236, .3);
  color: var(--blue-300);
  transition: color .18s ease-out, box-shadow .18s ease-out;
}
.biz-mark svg { width: 24px; height: 24px; }
.biz-link:hover .biz-mark {
  color: var(--amber);
  box-shadow: inset 0 0 0 1px rgba(247, 166, 0, .55);
}
.biz-name {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--blue-100);
  transition: color .18s ease-out;
}
.biz-link:hover .biz-name { color: #fff; }
.biz-desc {
  display: block;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--blue-300);
}

.mega-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(143, 165, 236, .24);
}
.mega-more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1.5px rgba(143, 165, 236, .55);
  transition: background-color .18s ease-out, box-shadow .18s ease-out;
}
.mega-more:hover {
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1.5px #fff;
}
.mega-more svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--amber);
  transition: transform .18s ease-out;
}
.mega-more:hover svg { transform: translateX(3px); }

/* ---------- 読者別入口（白地セクション） ---------- */

.audience {
  background: #fff;
  border-bottom: 1px solid var(--line);
}

/* ページ内リンクの着地点が sticky ヘッダー（40+76+1=117px）に隠れないようにする */
.audience,
.products,
.services,
.cases,
.reasons,
.support,
.company { scroll-margin-top: 128px; }
.audience-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 56px 24px 60px;
}

.sec-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--blue-700);
}
.sec-eyebrow .terminal { width: 8px; height: 8px; }

.audience h2 {
  margin: 0 0 10px;
  max-width: 760px;
  font-size: clamp(21px, 2.1vw, 27px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .02em;
  font-feature-settings: "palt";
}
.sec-lead {
  margin: 0;
  max-width: 720px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--ink-sub);
}

.aud-cards {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.aud-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow .18s ease-out, transform .18s ease-out, border-color .18s ease-out;
}
.aud-card:hover,
.aud-card:focus-within {
  transform: translateY(-2px);
  border-color: var(--blue-500);
  box-shadow: var(--shadow-hover);
}

/* 図版の地は方眼（図面の地）。イラスト自体は透過で重なる */
.aud-figure {
  position: relative;
  border-bottom: 1px solid var(--line);
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, rgba(26, 40, 136, .10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26, 40, 136, .10) 1px, transparent 1px);
  background-size: 16px 16px;
}
.aud-figure .il {
  display: block;
  width: 100%;
  height: auto;
}
.aud-tag {
  position: absolute;
  left: 10px;
  top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: .1em;
  color: var(--blue-700);
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  padding: 0 6px;
}

/* イラスト共通の構造色（トークン参照。無彩色グレー・黒影は使わない） */
.il text { font-family: var(--font); }
.il-face { fill: var(--device-bezel); stroke: var(--device-edge); stroke-width: 1.2; }
.il-unit { fill: #fff; stroke: var(--device-edge); stroke-width: 1.1; }
.il-slot { fill: var(--blue-100); stroke: var(--device-edge); stroke-width: .8; }
.il-line { fill: none; stroke: var(--blue-500); stroke-width: 1.5; stroke-linecap: round; }
.il-line-w { fill: none; stroke: var(--blue-300); stroke-width: 1.4; stroke-linecap: round; }
.il-thin { fill: none; stroke: var(--device-edge); stroke-width: 1.2; }
.il-fill { fill: var(--blue-100); }
.il-sub { fill: var(--blue-300); }
.il-amber { fill: var(--amber); }
.il-ok { fill: var(--status-ok); }
.il-cap { font-size: 9.5px; font-weight: 700; fill: var(--blue-700); }
.il-mono {
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: .08em;
  fill: var(--ink-sub);
}

.aud-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 20px;
}
.aud-card h3 {
  margin: 0 0 9px;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: .01em;
  font-feature-settings: "palt";
}
.aud-text {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-sub);
}

.aud-links-label {
  margin: 0 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink-sub);
}
.aud-links {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.aud-links .chip { font-size: 12.5px; padding: 5px 10px; }
.aud-links .chip svg { width: 15px; height: 15px; }

.aud-cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  font-size: 14.5px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: .01em;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background-color .18s ease-out, box-shadow .18s ease-out;
}
.aud-cta svg {
  margin-left: auto;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  transition: transform .18s ease-out;
}
.aud-cta:hover svg { transform: translateX(3px); }
.aud-cta-primary {
  background: var(--amber);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.aud-cta-primary:hover {
  background: var(--amber-hover);
  box-shadow: var(--shadow-hover);
}
.aud-cta-secondary {
  color: var(--blue-700);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.aud-cta-secondary:hover {
  background: var(--blue-100);
  box-shadow: inset 0 0 0 1.5px var(--blue-500);
}

/* ---------- 製品紹介（図面の地＋幹線でつないだラック） ---------- */

/* 地は図面（細目24px + 主線120px）。読者別入口の白と交互リズムを作る */
.products {
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, rgba(26, 40, 136, .14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26, 40, 136, .14) 1px, transparent 1px),
    linear-gradient(to right, rgba(26, 40, 136, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26, 40, 136, .07) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  border-bottom: 1px solid var(--line);
}
.products-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 56px 24px 60px;
}
.products h2 {
  margin: 0 0 10px;
  max-width: 760px;
  font-size: clamp(21px, 2.1vw, 27px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .02em;
  font-feature-settings: "palt";
}

/* カテゴリを縦に貫く幹線。ノードで各ラックへ分岐する */
.pf-cats { margin-top: 32px; }

.pf-cat {
  position: relative;
  padding-left: 52px;
}
.pf-cat + .pf-cat { margin-top: 28px; }

.pf-cat::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 0;
  bottom: -28px;
  width: 2px;
  background: var(--line);
}
.pf-cat:first-child::before { top: 25px; }
.pf-cat:last-child::before { bottom: auto; height: 25px; }

/* 分岐ノード。ヘッダーはラック枠線1pxの下から始まる min-height:48px なので
   中心はブロック上端から 1+24=25px。ノードは高さ14pxなので top:18px で一致する */
.pf-node {
  position: absolute;
  left: 9px;
  top: 18px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--blue-500);
}
.pf-node::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 4px;
  width: 30px;
  height: 2px;
  background: var(--line);
}

/* 幹線を流れるパケット */
.pf-cat + .pf-cat::after {
  content: "";
  position: absolute;
  left: 12px;
  top: -18px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
}

/* ラック筐体 */
.pf-rack {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.pf-rack-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;   /* ノード位置の基準。変更時は .pf-node の top も合わせること */
  padding: 8px 18px;
  background: var(--blue-100);
  border-bottom: 1px solid var(--line);
}
.pf-plate {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .1em;
  color: var(--blue-700);
  background: #fff;
  border: 1px solid var(--device-edge);
  border-radius: var(--radius-xs);
  padding: 1px 8px;
}
.pf-cat-name {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--ink);
}
.pf-count {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink-sub);
  font-variant-numeric: tabular-nums;
}
.pf-portal {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--blue-700);
  text-decoration: none;
  transition: color .18s ease-out;
}
.pf-portal:hover { color: var(--blue-500); text-decoration: underline; }

/* 製品ユニット（1U相当の横長カード。2列＝2ベイのラック） */
.pf-units {
  list-style: none;
  margin: 0;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.pf-unit {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background-color .18s ease-out, border-color .18s ease-out,
              box-shadow .18s ease-out, transform .18s ease-out;
}
.pf-unit:hover {
  background: #fff;
  border-color: var(--blue-500);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.pf-mark {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--device-edge);
  color: var(--blue-700);
  transition: box-shadow .18s ease-out, color .18s ease-out;
}
.pf-mark svg { width: 24px; height: 24px; }
.pf-unit:hover .pf-mark {
  color: var(--blue-500);
  box-shadow: inset 0 0 0 1px var(--blue-500);
}

.pf-body { min-width: 0; }
.pf-name {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}
.pf-desc {
  display: block;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-sub);
}
.pf-go {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--blue-500);
}
.pf-ico {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform .18s ease-out;
}
.pf-portal .pf-ico { width: 13px; height: 13px; }
.pf-unit:hover .pf-go { color: var(--blue-700); }
.pf-unit:hover .pf-go .pf-ico { transform: translateX(2px); }
.pf-portal:hover .pf-ico { transform: translateX(2px); }

.pf-cta {
  margin-top: 34px;
  display: flex;
  justify-content: center;
}
.pf-cta .plate { width: 320px; }

/* ---------- 導入事例（紺地・図面の地） ---------- */

.cases {
  background-color: #fff;
  background-image:
    linear-gradient(to right, rgba(26, 40, 136, .10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26, 40, 136, .10) 1px, transparent 1px),
    linear-gradient(to right, rgba(26, 40, 136, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26, 40, 136, .05) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.cases-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 56px 24px 60px;
}
.cases .sec-lead { color: var(--ink-sub); }
.cases h2 {
  margin: 0 0 10px;
  max-width: 800px;
  font-size: clamp(21px, 2.1vw, 27px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .02em;
  font-feature-settings: "palt";
  color: var(--ink);
}

/* 事例3件は縦積みのワイドカード（図版左・本文右）にする。
   3カラム等分だと図版が 0.66 倍になり図中の 9px ラベルが 5.9px まで潰れる。
   2+1 は図版倍率が 1.01 と 2.06 に割れて同一セクション内で見え方が揃わない。
   この構成なら3件とも 1.13 倍で均一に読め、事例間に序列も付かない */
.case-grid {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.case-card {
  height: 100%;
  display: flex;
  flex-direction: row;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-decoration: none;
  /* 四隅のビス点（筐体感） */
  background-image:
    radial-gradient(circle at 7px 7px, rgba(26, 40, 136, .3) 1.3px, transparent 1.3px),
    radial-gradient(circle at calc(100% - 7px) 7px, rgba(26, 40, 136, .3) 1.3px, transparent 1.3px),
    radial-gradient(circle at 7px calc(100% - 7px), rgba(26, 40, 136, .3) 1.3px, transparent 1.3px),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), rgba(26, 40, 136, .3) 1.3px, transparent 1.3px);
  background-repeat: no-repeat;
  transition: border-color .18s ease-out, box-shadow .18s ease-out, transform .18s ease-out;
}
.case-card:hover,
.case-card:focus-visible {
  border-color: var(--blue-500);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* 構成図はカード内の紺パネル（箱）として維持する。図版の中身は無変更 */
.case-fig {
  flex: 0 0 55%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-950);
  border-right: 1px solid var(--line);
}
.case-fig .cs {
  display: block;
  width: 100%;
  height: auto;
}
/* CASE番号は図版に重ねず本文のメタ行へ置く。図版ごとに空き隅を探す必要がなくなり、
   図の要素とラベルが衝突する不具合を構造的に無くせる */

/* 事例図版の構造色 */
.cs text { font-family: var(--font); }
.cs-box { fill: var(--navy-800); stroke: var(--blue-300); stroke-width: 1.3; }
.cs-unit { fill: var(--navy-950); stroke: var(--blue-300); stroke-width: 1; }
.cs-line { fill: none; stroke: var(--blue-300); stroke-width: 1.3; stroke-linecap: round; }
.cs-thin { fill: none; stroke: var(--blue-300); stroke-width: 1; opacity: .55; }
.cs-dash { fill: none; stroke: var(--blue-300); stroke-width: 1.1; stroke-dasharray: 5 4; opacity: .5; }
.cs-fill { fill: var(--blue-300); }
.cs-amber { fill: var(--amber); }
.cs-ok { fill: var(--status-ok); }
.cs-lbl { font-size: 9px; fill: var(--blue-300); }
.cs-mono {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .08em;
  fill: var(--blue-300);
  opacity: .9;
}

.case-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
  padding: 22px 26px;
}
.case-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
}
.case-id {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: .1em;
  color: var(--ink-sub);
}
.case-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--blue-700);
  background: var(--blue-100);
  box-shadow: inset 0 0 0 1px rgba(26, 40, 136, .18);
  border-radius: var(--radius-xs);
  padding: 1px 9px;
}
.case-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: .01em;
  color: var(--ink);
  font-feature-settings: "palt";
}
.case-text {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink-sub);
}
.case-go {
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--blue-700);
}
.case-go svg { color: var(--amber); }
.case-card:hover .case-go { color: var(--blue-500); }
.case-go svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform .18s ease-out;
}
.case-card:hover .case-go svg { transform: translateX(3px); }

/* ---------- 会社情報 ---------- */

.company { background: #fff; }
.company-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 56px 24px 52px;
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 48px;
}
.company h2 {
  margin: 0 0 16px;
  font-size: clamp(20px, 2vw, 25px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .02em;
  font-feature-settings: "palt";
}
.company-go {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--blue-700);
  text-decoration: none;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1.5px var(--line);
  transition: background-color .18s ease-out, box-shadow .18s ease-out;
}
.company-go:hover {
  background: var(--blue-100);
  box-shadow: inset 0 0 0 1.5px var(--blue-500);
}
.company-go svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform .18s ease-out; }
.company-go:hover svg { transform: translateX(3px); }

/* 会社概要表。dt/dd を罫線で区切った仕様書調 */
.company-table {
  margin: 0;
  border-top: 1px solid var(--line);
}
.company-row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.company-row dt {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--ink-sub);
  letter-spacing: .04em;
}
.company-row dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.company-row dd a { color: var(--blue-500); text-decoration: none; }
.company-row dd a:hover { text-decoration: underline; }

/* ---------- ロゴウォール ---------- */

.logowall {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.logowall-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 56px 24px 60px;
}
.lw-head {
  margin: 0 0 26px;
  text-align: center;
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: .02em;
  font-feature-settings: "palt";
  color: var(--ink);
}

/* ロゴは白いパネル1枚の上に直接置く。1点ずつ枠で囲わない */
.lw-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 40px 32px 30px;
}
.lw-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 36px 24px;
  align-items: center;
  justify-items: center;
}
.lw-grid li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
}
/* --logo-h はロゴ実寸比から算出した光学的な高さ（h = 52/√アスペクト を 20〜36px でクランプ）。
   一律の高さ揃えだと 10:1 のワードマークと 1.85:1 の縦組みで見た目の大きさが揃わない */
.lw-grid img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--logo-h, 30px);
  object-fit: contain;
}
/* 背景込みで配布されている公式アセット（CTC）は、角丸だけ当ててタイルとして置く */
.lw-tile { border-radius: var(--radius-sm); }

/* 注記は日本語を含むため mono を使わない（DESIGN.md: monoは英数字のみ） */
.lw-note {
  margin: 28px 0 0;
  text-align: right;
  font-size: 11.5px;
  line-height: 1.7;
  letter-spacing: .02em;
  color: var(--ink-sub);
  font-variant-numeric: tabular-nums;
}

/* ---------- フッター ---------- */

.site-footer {
  background: var(--navy-950);
  color: #C7D3F5;
}
.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 48px 24px 0;
  display: grid;
  grid-template-columns: minmax(0, 264px) minmax(0, 1fr);
  gap: 40px;
}
/* 製品・会社リンクは1つの nav にまとめ、内側で4列に割る */
.foot-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}
.site-footer :focus-visible { outline-color: var(--amber); }

.foot-mark {
  height: 34px;
  width: auto;
  display: block;
  margin-bottom: 12px;
}
.foot-name {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
}
.foot-addr {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.8;
  color: #C7D3F5;
}
.foot-tel {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.8;
}
.foot-tel a {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: .04em;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(143, 165, 236, .5);
  transition: border-color .18s ease-out;
}
.foot-tel a:hover { border-color: var(--amber); }

.foot-h {
  margin: 0 0 10px;
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #fff;
  border-bottom: 1px solid rgba(143, 165, 236, .25);
}
.foot-h .terminal { width: 6px; height: 6px; }
.foot-list { list-style: none; margin: 0; padding: 0; }
.foot-list a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #C7D3F5;
  text-decoration: none;
  transition: color .18s ease-out;
}
.foot-list a:hover { color: #fff; text-decoration: underline; }
.foot-list a svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--blue-300);
  transition: transform .18s ease-out, color .18s ease-out;
}
.foot-list a:hover svg { color: var(--amber); transform: translateX(2px); }

.footer-bottom {
  max-width: 1160px;
  margin: 0 auto;
  padding: 22px 24px 26px;
}
/* 区切りは回線ライン＋ノード */
.footer-bottom-rule {
  position: relative;
  height: 1px;
  margin-bottom: 18px;
  background: rgba(143, 165, 236, .25);
}
.footer-bottom-rule::after {
  content: "";
  position: absolute;
  left: 0;
  top: -2.5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
}
.foot-copy {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.7;
  letter-spacing: .02em;
  color: rgba(199, 211, 245, .8);
}


/* ---------- 事業紹介フォトカード ---------- */

.services {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.services-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 56px 24px 60px;
}
.services h2 {
  margin: 0 0 10px;
  max-width: 760px;
  font-size: clamp(21px, 2.1vw, 27px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .02em;
  font-feature-settings: "palt";
}

.svc-cards {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.svc-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow .18s ease-out, transform .18s ease-out, border-color .18s ease-out;
}
.svc-card:hover,
.svc-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--blue-500);
  box-shadow: var(--shadow-hover);
}

.svc-fig { position: relative; }
/* 素材が3:2なので同比で置き、トリミングを起こさない */
.svc-fig img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.svc-plate {
  position: absolute;
  left: 10px;
  top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: .1em;
  color: var(--blue-700);
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  padding: 0 6px;
}

.svc-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 20px;
}
.svc-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: .01em;
  color: var(--ink);
  font-feature-settings: "palt";
}
.svc-text {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-sub);
}
.svc-go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-700);
  transition: color .18s ease-out;
}
.svc-go svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--amber);
  transition: transform .18s ease-out;
}
.svc-card:hover .svc-go { color: var(--blue-500); }
.svc-card:hover .svc-go svg { transform: translateX(3px); }

/* ---------- 選ばれる理由 ---------- */

.reasons {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.reasons-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 56px 24px 56px;
}
.reasons h2,
.support h2 {
  margin: 0 0 10px;
  max-width: 800px;
  font-size: clamp(21px, 2.1vw, 27px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .02em;
  font-feature-settings: "palt";
  color: var(--ink);
}

.reasons-grid {
  position: relative;
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}
.reason { position: relative; }
/* 幹線は「自分のマーク中心 → 次のマーク中心」を1区間ずつ引く。
   マークは列の左端に置かれるので、区間長 = 列幅 + gap = calc(100% + 28px)。
   grid の gap を変えたらこの 28px も合わせること */
.reason:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 28px;
  top: 27px;
  z-index: 0;
  width: calc(100% + 28px);
  height: 2px;
  background: var(--line);
}
/* 幹線を流れるパケット（項目間の中央） */
.reason + .reason::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: -18px;
  top: 23px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
}

.reason-mark {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  color: var(--blue-700);
}
.reason-mark svg { width: 30px; height: 30px; }

.reason-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: .01em;
  color: var(--ink);
  font-feature-settings: "palt";
}
.reason-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-sub);
}
.reason-text sup {
  font-size: 10px;
  color: var(--ink-sub);
  margin-left: 1px;
}
.reasons-note {
  margin: 26px 0 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--ink-sub);
  font-variant-numeric: tabular-nums;
}

/* ---------- 安心のサポート体制 ---------- */

.support { background: #fff; }
.support-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 56px 24px 60px;
}

.steps {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.step {
  position: relative;
  padding: 22px 24px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
/* 番号は刻印。英数字のみなので等幅を使える */
.step-num {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  /* ライト地なので blue-300（2.2:1）は使えない。DESIGN.md「blue-300は濃地専用」 */
  color: var(--blue-500);
}
.step-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--ink);
}
.step-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-sub);
}
/* 段の間をつなぐ回線 */
.step + .step::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 34px;
  width: 8px;
  height: 2px;
  background: var(--line);
}

.support-scope {
  margin: 20px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--amber);
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink);
}

/* 利用規約の公開ブロック */
.terms {
  margin-top: 34px;
  padding: 28px 30px 26px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.terms-head { max-width: 760px; }
.terms-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: .01em;
  color: var(--ink);
  font-feature-settings: "palt";
}
.terms-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-sub);
}

/* 条文タグ。型番プレートの意匠だが日本語を含むため等幅は使わない */
.terms-arts {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.terms-arts li {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 5px 11px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
}
.art-no {
  font-weight: 700;
  color: var(--blue-700);
  font-variant-numeric: tabular-nums;
}

.terms-links {
  margin: 18px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.terms-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--blue-700);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color .18s ease-out, border-color .18s ease-out;
}
.terms-links a svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--blue-500);
  transition: transform .18s ease-out;
}
.terms-links a:hover {
  color: var(--blue-500);
  border-color: var(--blue-500);
}
.terms-links a:hover svg { transform: translateX(2px); }

.terms-note {
  margin: 16px 0 0;
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--ink-sub);
  font-variant-numeric: tabular-nums;
}

.support-cta {
  margin-top: 34px;
  display: flex;
  justify-content: center;
}
.support-cta .plate { width: 320px; }

/* ---------- レスポンシブ ---------- */

@media (max-width: 1200px) {
  .gnav > ul > li > a,
  .gnav-trigger { padding: 8px 8px; font-size: 13.5px; }
  .brand-name { font-size: 16px; }
}

/* NAV6項目とCTAが並ぶ幅ではロックアップの社名まで入らないため、マークのみに畳む */
@media (max-width: 1120px) {
  .brand-tagline,
  .brand-name { display: none; }
  .gnav > ul > li > a,
  .gnav-trigger { padding: 8px 7px; font-size: 13px; }
  .header-cta { padding: 11px 14px; font-size: 13.5px; }
}

@media (max-width: 960px) {
  .utility-inner { gap: 12px; overflow-x: auto; scrollbar-width: thin; }
  .reader-tabs { flex-shrink: 0; }
  .utility-links { gap: 16px; flex-shrink: 0; }

  .gnav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    z-index: 2;
  }
  .gnav.is-open { display: block; }
  .gnav > ul { flex-direction: column; padding: 10px 16px; gap: 0; }

  .header-inner { gap: 14px; }
  .header-cta { margin-left: auto; }
  .menu-btn { display: inline-flex; order: 3; }

  .notice-band { padding: 0 16px 0 46px; }
  .notice-close { left: 8px; }

  .hero-inner { padding: 24px 24px 0; }

  /* 図面は横スクロールで全体を見せる */
  .topo-scroll { overflow-x: auto; }
  .topology .topo { min-width: 900px; }
  .topo-hint {
    display: block;
    margin: 0 0 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .06em;
    color: rgba(143, 165, 236, .8);
  }
}

@media (max-width: 760px) {
  .cta-plates { grid-template-columns: minmax(0, 320px); gap: 12px; }
  .stat { padding: 0 18px; }

  .belt-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .belt-label { border-right: 0; padding-right: 0; }
}

@media (max-width: 560px) {
  .brand-mark { height: 34px; }

  .notice-text { white-space: normal; font-size: 13px; }
  .notice-inner { flex-wrap: wrap; height: auto; padding: 10px 0; justify-content: flex-start; gap: 8px 10px; }
  .notice-band { padding: 0 14px 0 40px; }

  .hero h1 { font-size: 26px; }
  .bracket { width: 44px; }
  .hero-badge { gap: 10px; }
  .hero-badge-value strong { font-size: 30px; }

  .plate-main { font-size: 15px; }

  .stats { flex-wrap: wrap; gap: 14px 0; }
  .stat { padding: 0 14px; }
  .stat .num { font-size: 28px; }
  .stat + .stat::before,
  .stat + .stat::after { display: none; }

  .newsbar-inner { flex-wrap: wrap; gap: 8px 14px; }
  .newsline { width: 100%; }
  .newsline .ttl { white-space: normal; }
  .news-more { margin-left: 0; }
}

/* 新規コンポーネントのレスポンシブ（基底より後段に置いて確実に上書きする） */

@media (max-width: 960px) {
  /* ハンバーガー内は縦積み。メガパネルはアコーディオンへ退化させる */
  .gnav > ul > li { display: block; }
  .gnav.is-open {
    max-height: calc(100vh - 116px);
    overflow-y: auto;
  }
  .gnav > ul > li > a,
  .gnav-trigger { padding: 12px 10px; font-size: 15px; }
  .gnav-trigger { width: 100%; justify-content: space-between; }

  .mega {
    position: static;
    max-height: none;
    overflow: visible;
    margin: 2px 0 8px;
    border-bottom: 0;
    border-radius: var(--radius-sm);
    box-shadow: none;
    animation: none;
  }
  .mega::before { display: none; }
  .mega-inner { padding: 14px; }
  .mega-cols,
  .mega-biz { grid-template-columns: 1fr; }
  .mega-col,
  .mega-biz > li { padding: 0; }
  .mega-col + .mega-col,
  .mega-biz > li + li {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(143, 165, 236, .24);
  }
  .mega-col + .mega-col::before,
  .mega-col + .mega-col::after,
  .mega-biz > li + li::before,
  .mega-biz > li + li::after { display: none; }
  .mega-foot { justify-content: stretch; }
  .mega-more { flex: 1; justify-content: center; }
}

@media (max-width: 900px) {
  .aud-cards {
    grid-template-columns: minmax(0, 520px);
    justify-content: center;
    gap: 20px;
  }
}

@media (max-width: 1000px) {
  .footer-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; }
}

@media (max-width: 860px) {
  /* 写真の情報量が落ちるため、2列を挟まず1列へ落とす */
  .svc-cards { grid-template-columns: minmax(0, 520px); justify-content: center; gap: 20px; }
}

@media (max-width: 900px) {
  /* 1ベイのラックへ。幹線とノードは残してカテゴリの区切りを保つ */
  .pf-units { grid-template-columns: minmax(0, 1fr); }

  /* 図版左・本文右が窮屈になる幅で、図版上・本文下の縦積みへ切り替える */
  .case-card { flex-direction: column; }
  .case-fig {
    flex: 0 0 auto;
    border-right: 0;
    border-bottom: 1px solid rgba(143, 165, 236, .2);
  }
  .case-body { padding: 18px 20px 20px; }
  .company-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

@media (max-width: 640px) {
  .products-inner { padding: 40px 24px 44px; }
  .pf-cat { padding-left: 34px; }
  .pf-cat::before { left: 9px; }
  .pf-node { left: 3px; }
  .pf-node::after { width: 18px; }
  .pf-cat + .pf-cat::after { left: 6px; }

  .pf-rack-head { gap: 10px; padding: 8px 14px; }
  .pf-units { padding: 12px; gap: 10px; }

  .pf-cta .plate { width: 100%; max-width: 320px; }
}

/* ヘッダー1行に統合サイト導線まで収まらなくなる幅で初めて折り返す */
@media (max-width: 520px) {
  .pf-rack-head { flex-wrap: wrap; gap: 8px 10px; }
  .pf-portal { margin-left: 0; width: 100%; }
}

/* 本文が読める幅（約150px）を割る前に、導線を製品名の下段へ確定的に落とす。
   flex-wrap では本文が縮むだけで折り返らないため grid で行を固定する */
@media (max-width: 480px) {
  .pf-unit {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
    column-gap: 12px;
    row-gap: 6px;
  }
  .pf-mark { grid-column: 1; grid-row: 1; }
  .pf-body { grid-column: 2; grid-row: 1; }
  .pf-go { grid-column: 2; grid-row: 2; margin-left: 0; }
}

@media (max-width: 640px) {
  .cases-inner { padding: 40px 24px 44px; }
  .company-inner { padding: 40px 24px 40px; }
  /* 見出し列が狭いと折り返しだらけになるため縦積みへ */
  .company-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .foot-cols { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

@media (max-width: 560px) {
  .audience-inner { padding: 40px 24px 44px; }
  .aud-body { padding: 16px 16px 18px; }
  .aud-card h3 { font-size: 16px; }

  .case-body { padding: 14px 16px 16px; }
  .case-title { font-size: 15.5px; }
}

@media (max-width: 1000px) {
  .lw-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .lw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 20px; }
  .lw-panel { padding: 30px 22px 24px; }
}

@media (max-width: 480px) {
  .lw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; }
  .logowall-inner { padding: 40px 24px 44px; }
}

@media (max-width: 1000px) {
  /* 2列になると幹線が段をまたぐため、線とパケットは畳む */
  .reasons-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 28px; }
  .reason:not(:last-child)::after { display: none; }
  .reason + .reason::before { display: none; }
}

@media (max-width: 760px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .step + .step::before { display: none; }
  .terms { padding: 24px 20px 22px; }
}

@media (max-width: 560px) {
  .reasons-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .reasons-inner { padding: 40px 24px 44px; }
  .support-inner { padding: 40px 24px 44px; }
  .support-cta .plate { width: 100%; max-width: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .mega { animation: none; }
  html { scroll-behavior: auto; }
}