/* 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;
  --status-err: #C43D3D;
  --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;

  /* 余白スケール（8pxベース）。詰まった余白は「AIっぽさ」に直結するため、
     関係の近い要素は近く・セクション境界は遠く（近接の法則）で段階を使い分ける。
     一律の倍率ではなく、下の役割ごとに段を選ぶこと */
  --sp-1: 8px;    /* 密接: ラベルと本体、アイコンと文字 */
  --sp-2: 14px;   /* 近接: 見出しとリード、カード内の段落間 */
  --sp-3: 24px;   /* 小分離: 見出しブロック内の区切り */
  --sp-4: 40px;   /* 中分離: 見出しブロックとカード群 */
  --sp-5: 64px;   /* 大分離: セクション内の大きな塊の間 */
  --sp-6: 112px;  /* セクション境界（デスクトップ） */
  --sp-6-m: 64px; /* セクション境界（狭幅。間延びさせない） */
}

* { 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 しか出ないためアンバーへ */
.hero :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(--navy-950);
  color: #fff;
  overflow: hidden;
}

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

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

.notice-band {
  position: relative;
  z-index: 1;
  background: var(--blue-700);
  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: rgba(255, 255, 255, .8);
  cursor: pointer;
  transition: background-color .18s ease-out, color .18s ease-out;
}
.notice-close svg { width: 14px; height: 14px; }
.notice-close:hover { background: rgba(255, 255, 255, .14); color: #fff; }

.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: #fff;
  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: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  padding-bottom: 1px;
  transition: border-color .18s ease-out;
}
.notice-link .ico-chev { color: var(--amber); }
.notice-link:hover { border-color: var(--amber); }
.notice-link:hover .ico-chev { transform: translateX(2px); }

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

.hero-inner {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--sp-4) 24px 0;
  text-align: center;
}

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

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
}
.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: #C7D3F5;
  margin-bottom: 4px;
}
.hero-badge-value {
  font-size: 21px;
  font-weight: 900;
  letter-spacing: .01em;
  color: #fff;
  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(--blue-300);
  margin-left: 2px;
}

.hero h1 {
  margin: 0 0 20px;
  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: 760px;
  font-size: 15.5px;
  line-height: 1.9;
  color: #C7D3F5;
}

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

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

.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 {
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(143, 165, 236, .55);
}
.plate-secondary:hover {
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1.5px #fff;
  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: #C7D3F5; }

.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: 18px 0 0;
  text-align: center;
}
.cta-third {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  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(--amber-hover); }
.cta-third:hover svg { transform: translateX(3px); }

/* R15 背面レイヤー: 気配としての抽象トポロジー。
   周縁に密・中央は静穏。情報ではなく雰囲気として置く */
.hero-topo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  will-change: transform;
}
.ht-line   { fill: none; stroke: #8FA5EC; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; opacity: .30; }
.ht-line-w { fill: none; stroke: #8FA5EC; stroke-width: 1; stroke-linecap: round; opacity: .18; }
/* 中央を横切る配線はさらに落とす（コピーの背後） */
.ht-quiet  { fill: none; stroke: #8FA5EC; stroke-width: 1; opacity: .10; }
/* 箱の塗り。#0F1752 = navy-800 を 55% で navy-950 に重ねた合成色。
   見た目は従来のゴーストのままで、不透明なのでパケットを確実に隠せる */
.ht-face   { fill: #0F1752; stroke: #8FA5EC; stroke-width: 1.1; stroke-opacity: .34; }
.ht-globe  { fill: #0F1752; }
.ht-plate  { fill: #0C1345; stroke: #8FA5EC; stroke-width: 1.1; stroke-opacity: .2; }
.ht-fill   { fill: #8FA5EC; opacity: .16; }
.ht-dot    { fill: #8FA5EC; opacity: .30; }
.ht-amber  { fill: #F7A600; }
.ht-ok     { fill: #2E9E6B; opacity: .55; }
.ht-mono   { font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; fill: #8FA5EC; opacity: .16; }

/* --- 走行パケット: 間欠バースト方式 ---
   「個々は速く、全体は静かに」。1本を 0.9〜1.4 秒で駆け抜け、周期の残り9割は休止する。
   走行区間は下の @keyframes の 0%→7% に固定してあり（デューティ7%）、
   速度と頻度はどちらも --pkt-cycle-* だけで決まる（周期の7%が走行時間）。
   デューティ自体を変えたいときは ht-burst の 7% / 6% のストップを動かす。
   5本×7%なので、理論上は無走行が約70%・1粒が約26%・2粒が約4%になる。
   経路は背面の配線と同じ d。offset系のみでlayoutを叩かない。
   コピー背後の静穏ゾーン（中央の細線3本）には流さず、周縁の配線だけに乗せる */
.ht-packets {
  /* 周期。走行時間 = 周期 × 7% → 0.91s / 1.12s / 1.33s / 0.98s / 1.4s */
  --pkt-cycle-1: 13s;
  --pkt-cycle-2: 16s;
  --pkt-cycle-3: 19s;
  --pkt-cycle-4: 14s;
  --pkt-cycle-5: 20s;
  /* 位相。走行開始が 0 / 3.5 / 7 / 10.5 / 14 秒と等間隔に散るよう
     delay = 走行開始 - 周期 で逆算している（周期が互いに素なので以降は緩やかにドリフトする） */
  --pkt-delay-1: -13s;
  --pkt-delay-2: -12.5s;
  --pkt-delay-3: -12s;
  --pkt-delay-4: -3.5s;
  --pkt-delay-5: -6s;
  /* 尾の長さ。ヘッドから遅らせる時間で、走行が速いほど尾も伸びる */
  --pkt-trail-lag-1: .05s;
  --pkt-trail-lag-2: .1s;
  /* 濃度 */
  --pkt-head-op: .85;
  --pkt-trail1-op: .45;
  --pkt-trail2-op: .2;
  /* 鼓動の1粒 */
  --pkt-drift-cycle: 8s;
  --pkt-drift-op: .5;
}

.ht-drift,
.ht-burst > circle {
  fill: var(--amber);
  opacity: 0;
  transform-box: view-box;
  transform-origin: 0 0;
  offset-rotate: 0deg;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* 走行は周期の先頭10%だけ。残り9割は終端で不可視のまま待機する */
@keyframes ht-burst {
  0%   { offset-distance: 0%;   opacity: 0; }
  0.8% { opacity: var(--op); }
  6%   { opacity: var(--op); }
  7%   { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}
/* 鼓動は従来どおり端点でフェードする緩やかな漂い */
@keyframes ht-drift {
  0%, 100% { offset-distance: 0%; opacity: 0; }
  4%       { opacity: var(--pkt-drift-op); }
  96%      { opacity: var(--pkt-drift-op); }
  99.9%    { offset-distance: 100%; }
}

.ht-burst > circle { animation-name: ht-burst; }
.ht-burst > .ht-h  { --op: var(--pkt-head-op); }
.ht-burst > .ht-t1 { --op: var(--pkt-trail1-op); }
.ht-burst > .ht-t2 { --op: var(--pkt-trail2-op); }

/* 鼓動: 左端の短い配線をゆっくり漂う（27px/秒程度） */
.ht-drift {
  offset-path: path("M0 470h124l18 18h72");
  animation-name: ht-drift;
  animation-duration: var(--pkt-drift-cycle);
  animation-timing-function: ease-in-out;
}

/* --- バースト各本。縦3（b2/b3/b4）・横2（b1/b5）で R16 の比率を保つ --- */
/* 横: 下部の幹線。途中で機器の箱の背後を通る */
.ht-b1 > circle { offset-path: path("M122 646h1246"); animation-duration: var(--pkt-cycle-1); }
.ht-b1 > .ht-h  { animation-delay: var(--pkt-delay-1); }
.ht-b1 > .ht-t1 { animation-delay: calc(var(--pkt-delay-1) + var(--pkt-trail-lag-1)); }
.ht-b1 > .ht-t2 { animation-delay: calc(var(--pkt-delay-1) + var(--pkt-trail-lag-2)); }
/* 縦: 左のライザー */
.ht-b2 > circle { offset-path: path("M148 246V560h84V646"); animation-duration: var(--pkt-cycle-2); }
.ht-b2 > .ht-h  { animation-delay: var(--pkt-delay-2); }
.ht-b2 > .ht-t1 { animation-delay: calc(var(--pkt-delay-2) + var(--pkt-trail-lag-1)); }
.ht-b2 > .ht-t2 { animation-delay: calc(var(--pkt-delay-2) + var(--pkt-trail-lag-2)); }
/* 縦: 右のライザー */
.ht-b3 > circle { offset-path: path("M1292 246V520h-96V646"); animation-duration: var(--pkt-cycle-3); }
.ht-b3 > .ht-h  { animation-delay: var(--pkt-delay-3); }
.ht-b3 > .ht-t1 { animation-delay: calc(var(--pkt-delay-3) + var(--pkt-trail-lag-1)); }
.ht-b3 > .ht-t2 { animation-delay: calc(var(--pkt-delay-3) + var(--pkt-trail-lag-2)); }
/* 縦: 左のドロップ（純縦） */
.ht-b4 > circle { offset-path: path("M252 380V646"); animation-duration: var(--pkt-cycle-4); }
.ht-b4 > .ht-h  { animation-delay: var(--pkt-delay-4); }
.ht-b4 > .ht-t1 { animation-delay: calc(var(--pkt-delay-4) + var(--pkt-trail-lag-1)); }
.ht-b4 > .ht-t2 { animation-delay: calc(var(--pkt-delay-4) + var(--pkt-trail-lag-2)); }
/* 横: 右端の配線束 */
.ht-b5 > circle { offset-path: path("M1440 316h-168l-20 20h-92"); animation-duration: var(--pkt-cycle-5); }
.ht-b5 > .ht-h  { animation-delay: var(--pkt-delay-5); }
.ht-b5 > .ht-t1 { animation-delay: calc(var(--pkt-delay-5) + var(--pkt-trail-lag-1)); }
.ht-b5 > .ht-t2 { animation-delay: calc(var(--pkt-delay-5) + var(--pkt-trail-lag-2)); }

/* コピー背後の減光。周縁のトポロジーは残しつつ中央のコントラストを確保する */
.hero-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 54% at 50% 44%,
    rgba(11, 17, 64, .94) 0%,
    rgba(11, 17, 64, .72) 48%,
    rgba(11, 17, 64, 0) 100%);
}

/* 実績 */

.hero-stats {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--sp-4) 24px var(--sp-5);
}

.stats {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  max-width: 780px;
  margin: 0 auto;
  border-top: 1px solid rgba(143, 165, 236, .3);
  padding-top: 28px;
}
/* 区切りはノード付きの縦ライン */
.stat {
  position: relative;
  padding: 0 30px;
  text-align: center;
}
.stat + .stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: rgba(143, 165, 236, .3);
}
.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(--blue-300);
  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: #C7D3F5;
}
.stat sup {
  font-size: 10px;
  color: var(--blue-300);
  margin-left: 3px;
}

.stats-note {
  margin: 16px 0 0;
  text-align: center;
  font-size: 11.5px;
  color: rgba(143, 165, 236, .75);
}

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

.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,
.record,
.topnews,
.company { scroll-margin-top: 128px; }
.audience-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--sp-6) 24px var(--sp-6);
}

.sec-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 var(--sp-1);
  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 var(--sp-2);
  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: var(--sp-4) 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: var(--sp-6) 24px var(--sp-6);
}
.products h2 {
  margin: 0 0 var(--sp-2);
  max-width: 760px;
  font-size: clamp(21px, 2.1vw, 27px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .02em;
  font-feature-settings: "palt";
}

/* ---------- R18: サービス全体図（営業資料P.01の筐体パネルを移植） ---------- */

.svc-map { margin: var(--sp-4) 0 0; }

/* ライト地に置かれた箱。navy-950地・正準影・四隅のビス点 */
.svm-panel {
  position: relative;
  background: var(--navy-950);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 14px 22px 18px;
}
.svm-panel::before,
.svm-panel::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  width: 4px;
  background-image:
    radial-gradient(circle, rgba(143, 165, 236, .55) 1.8px, transparent 1.9px),
    radial-gradient(circle, rgba(143, 165, 236, .55) 1.8px, transparent 1.9px);
  background-size: 4px 4px;
  background-position: top center, bottom center;
  background-repeat: no-repeat;
}
.svm-panel::before { left: 9px; }
.svm-panel::after  { right: 9px; }

.svm-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0 2px 10px;
  border-bottom: 1px solid rgba(143, 165, 236, .28);
}
.svm-bar .led { width: 7px; height: 7px; box-shadow: 0 0 0 2px rgba(46, 158, 107, .24); }
.svm-id {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: #C7D3F5;
  white-space: nowrap;
}
.svm-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
}
.svm-legend {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  line-height: 1.6;
  color: #C7D3F5;
  white-space: nowrap;
}
.svm-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.svm-lg-line { width: 16px; border-top: 1.4px solid var(--blue-300); }
.svm-lg-packet { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }

/* 狭幅は図を縮めて潰さず、パネル内の横スクロールで見せる */
.svm-canvas { overflow-x: auto; }
.svm-map { display: block; width: 100%; height: auto; min-width: 660px; }

/* 図版の構造色。sales/service-overview-landscape.html と同一体系（濃地の内側なので blue-300 / #C7D3F5） */
.svm-map text { font-family: var(--font); }
.svm-map .m-cap   { font-size: 13px; font-weight: 700; fill: #fff; }
.svm-map .m-sub   { font-size: 10px; font-weight: 500; fill: #C7D3F5; }
.svm-map .m-mono  { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; fill: var(--blue-300); }
.svm-map .m-plate { font-size: 10.5px; font-weight: 700; fill: #C7D3F5; }
.svm-map .m-wire      { fill: none; stroke: var(--blue-300); stroke-width: 1.4; stroke-linecap: round; }
.svm-map .m-wire-thin { fill: none; stroke: var(--blue-300); stroke-width: 1.1; }
.svm-map .m-body { fill: var(--navy-800); stroke: var(--blue-300); stroke-width: 1.3; }
.svm-map .m-node { fill: var(--navy-950); stroke: var(--blue-300); stroke-width: 1.4; }
.svm-map .m-dot    { fill: var(--blue-300); }
.svm-map .m-packet { fill: var(--amber); }
.svm-map .m-ok     { fill: var(--status-ok); }
.svm-map .m-vent   { fill: none; stroke: var(--blue-300); stroke-width: 1.1; opacity: .5; }

/* 走行パケット: ヒーローと同じ間欠バースト方式（ht-burst keyframes・デューティ7%）。
   周期は互いに素、位相は走行開始が 0 / 2.2 / 4.4 / 6.6 / 8.8 秒と散るよう delay = 開始 - 周期 で逆算。
   経路は背面の配線と同じ d。機器ボディの背面レイヤなので端点では筐体に隠れて消える */
.svm-packets {
  --pkt-cycle-1: 11s;
  --pkt-cycle-2: 17s;
  --pkt-cycle-3: 13s;
  --pkt-cycle-4: 15s;
  --pkt-cycle-5: 19s;
  --pkt-delay-1: -11s;
  --pkt-delay-2: -14.8s;
  --pkt-delay-3: -8.6s;
  --pkt-delay-4: -8.4s;
  --pkt-delay-5: -10.2s;
  --pkt-trail-lag-1: .05s;
  --pkt-trail-lag-2: .1s;
  --pkt-head-op: .9;
  --pkt-trail1-op: .5;
  --pkt-trail2-op: .22;
}
.svm-burst > circle {
  fill: var(--amber);
  opacity: 0;
  transform-box: view-box;
  transform-origin: 0 0;
  offset-rotate: 0deg;
  animation-name: ht-burst;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.svm-burst > .svm-h  { --op: var(--pkt-head-op); }
.svm-burst > .svm-t1 { --op: var(--pkt-trail1-op); }
.svm-burst > .svm-t2 { --op: var(--pkt-trail2-op); }
/* クラウド→集線バス→WAN */
.svm-p1 > circle { offset-path: path("M98 52H132V145H250"); animation-duration: var(--pkt-cycle-1); }
.svm-p1 > .svm-h  { animation-delay: var(--pkt-delay-1); }
.svm-p1 > .svm-t1 { animation-delay: calc(var(--pkt-delay-1) + var(--pkt-trail-lag-1)); }
.svm-p1 > .svm-t2 { animation-delay: calc(var(--pkt-delay-1) + var(--pkt-trail-lag-2)); }
/* インターネット→WAN（幹線直行） */
.svm-p2 > circle { offset-path: path("M86 145H250"); animation-duration: var(--pkt-cycle-2); }
.svm-p2 > .svm-h  { animation-delay: var(--pkt-delay-2); }
.svm-p2 > .svm-t1 { animation-delay: calc(var(--pkt-delay-2) + var(--pkt-trail-lag-1)); }
.svm-p2 > .svm-t2 { animation-delay: calc(var(--pkt-delay-2) + var(--pkt-trail-lag-2)); }
/* 在宅・外出先→集線バス→WAN */
.svm-p3 > circle { offset-path: path("M100 225H132V145H250"); animation-duration: var(--pkt-cycle-3); }
.svm-p3 > .svm-h  { animation-delay: var(--pkt-delay-3); }
.svm-p3 > .svm-t1 { animation-delay: calc(var(--pkt-delay-3) + var(--pkt-trail-lag-1)); }
.svm-p3 > .svm-t2 { animation-delay: calc(var(--pkt-delay-3) + var(--pkt-trail-lag-2)); }
/* CAT-01→内部バス下降→サーバー */
.svm-p4 > circle { offset-path: path("M502 76H540V214H590"); animation-duration: var(--pkt-cycle-4); }
.svm-p4 > .svm-h  { animation-delay: var(--pkt-delay-4); }
.svm-p4 > .svm-t1 { animation-delay: calc(var(--pkt-delay-4) + var(--pkt-trail-lag-1)); }
.svm-p4 > .svm-t2 { animation-delay: calc(var(--pkt-delay-4) + var(--pkt-trail-lag-2)); }
/* CAT-03→内部バス上昇→業務PC */
.svm-p5 > circle { offset-path: path("M502 214H540V76H590"); animation-duration: var(--pkt-cycle-5); }
.svm-p5 > .svm-h  { animation-delay: var(--pkt-delay-5); }
.svm-p5 > .svm-t1 { animation-delay: calc(var(--pkt-delay-5) + var(--pkt-trail-lag-1)); }
.svm-p5 > .svm-t2 { animation-delay: calc(var(--pkt-delay-5) + var(--pkt-trail-lag-2)); }

/* 静的パケットは reduced-motion 専用（下のメディアクエリで表示） */
.svm-static { display: none; }

.svm-note {
  margin: 10px 2px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-sub);
}
/* 2行に折り返しても1行目の光学中心に乗るよう、行box高（13px×1.8）から逆算した固定オフセット */
.svm-note-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--amber);
}

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

.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); }

/* 3分類のラックに載らない現行製品の受け口。主役はラックなので、
   ここは筐体を組まずに罫線だけで区切った控えめな一覧にする */
.pf-other {
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.pf-other-head {
  margin: 0 0 var(--sp-2);
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--blue-700);
}
.pf-other-head .terminal { width: 8px; height: 8px; }
.pf-other-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px 20px;
}
.pf-other-list a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
  transition: background-color .18s ease-out;
}
.pf-other-list a:hover { background: var(--blue-100); }
.pf-other-name {
  flex-shrink: 0;
  font-size: 13.5px;
  font-weight: 700;
}
.pf-other-list a:hover .pf-other-name { color: var(--blue-700); }
.pf-other-desc {
  min-width: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-sub);
  word-break: auto-phrase;
}

.pf-cta {
  margin-top: var(--sp-5);
  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: var(--sp-6) 24px var(--sp-6);
}
.cases .sec-lead { color: var(--ink-sub); }
.cases h2 {
  margin: 0 0 var(--sp-2);
  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: var(--sp-4) 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); }

/* ---------- SI事例・実績 ----------
   ライト地の上に細目の方眼を引き、実績を機器スロットのように並べる。
   顧客区分は英数字の刻印（SI-01〜10）と組にして「台帳の行」に見せる */

.record {
  background-color: #fff;
  background-image:
    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: 24px 24px, 24px 24px;
  border-bottom: 1px solid var(--line);
}
.record-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--sp-6) 24px var(--sp-6);
}
.record h2 {
  margin: 0 0 var(--sp-2);
  max-width: 800px;
  font-size: clamp(21px, 2.1vw, 27px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .02em;
  font-feature-settings: "palt";
}
.record .sec-lead {
  max-width: 780px;
  color: var(--ink-sub);
}
.record-grid {
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.record-item {
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.record-client {
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.record-id {
  flex-shrink: 0;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--blue-700);
  background: var(--blue-100);
  border-radius: var(--radius-xs);
}
.record-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink-sub);
  word-break: auto-phrase;
}

/* ---------- お知らせ（トップ） ----------
   ライト地に「置かれた箱」としての一覧パネル。行は 1U のスロットに見立て、
   区切りは hairline、日付は英数字なので mono の刻印にする */

.topnews {
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.topnews-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--sp-6) 24px var(--sp-6);
}
.topnews-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.topnews h2 {
  margin: 0;
  font-size: clamp(21px, 2.1vw, 27px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .02em;
  font-feature-settings: "palt";
}
.topnews-go {
  flex-shrink: 0;
  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;
  background: #fff;
  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;
}
.topnews-go:hover {
  background: var(--blue-100);
  box-shadow: inset 0 0 0 1.5px var(--blue-500);
}
.topnews-go svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform .18s ease-out; }
.topnews-go:hover svg { transform: translateX(3px); }

.topnews-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.topnews-list > li + li { border-top: 1px solid var(--line); }
.topnews-item {
  display: grid;
  grid-template-columns: 96px 92px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 0 20px;
  padding: 15px 22px;
  color: var(--ink);
  text-decoration: none;
  transition: background-color .18s ease-out;
}
.topnews-item:hover,
.topnews-item:focus-visible { background: var(--paper); }
.topnews-date {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--blue-700);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.topnews-cat {
  justify-self: start;
  padding: 2px 10px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--blue-700);
  background: var(--blue-100);
  border-radius: var(--radius-xs);
  white-space: nowrap;
}
.topnews-ttl {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.7;
  word-break: auto-phrase;
  transition: color .18s ease-out;
}
.topnews-item:hover .topnews-ttl { color: var(--blue-700); }
.topnews-arw {
  width: 16px;
  height: 16px;
  color: var(--blue-500);
  transition: transform .18s ease-out;
}
.topnews-item:hover .topnews-arw { transform: translateX(3px); }

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

.company { background: #fff; }
.company-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--sp-6) 24px var(--sp-6);
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: var(--sp-5);
}
.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 {
  margin-top: var(--sp-3);
  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: var(--sp-6) 24px var(--sp-6);
}
.lw-head {
  margin: 0 0 var(--sp-4);
  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: 56px 48px 40px;
}
/* 等分グリッドをやめ、各ロゴの自然な幅のまま中央寄せで折り返す。
   幅が揃わないぶん行ごとの本数と行幅が変わり、整列しすぎた印象を避けられる */
.lw-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 44px 56px;
}
.lw-grid li {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* --logo-h はロゴ実寸比から算出した光学的な高さ（h = 100/√アスペクト を 30〜60px でクランプ）。
   sqrt(w*h) が一定になるので、横長ワードマークは幅で・縦組みエンブレムは高さで大きさが揃う。
   一律の height 指定にすると 10:1 と 1.85:1 で見た目が倍近く食い違う */
/* max-height では intrinsic より小さい画像を拡大できない（cybercom は実寸 54px しかない）。
   height を直接与え、幅が溢れる場合だけ object-fit: contain で内側に収める（比率は保たれる） */
.lw-grid img {
  display: block;
  width: auto;
  height: var(--logo-h, 46px);
  max-width: 100%;
  object-fit: contain;
}
/* 背景込みで配布されている公式アセット（CTC）。塗りつぶしタイルは同じ光学値でも
   面積が重く見えるため、算出値に 0.85 を掛けて周囲と釣り合わせている */
.lw-tile { border-radius: var(--radius-sm); }

/* 注記は日本語を含むため mono を使わない（DESIGN.md: monoは英数字のみ） */
.lw-note {
  margin: var(--sp-4) 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: var(--sp-6) 24px var(--sp-6);
}
.services h2 {
  margin: 0 0 var(--sp-2);
  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: var(--sp-4) 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: var(--sp-6) 24px var(--sp-6);
}
.reasons h2,
.support h2 {
  margin: 0 0 var(--sp-2);
  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: var(--sp-4) 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: var(--sp-4) 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: var(--sp-6) 24px var(--sp-6);
}

.steps {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* ---- スポットイラスト（白カード＋ラベル＋2色線画） ----
   線 = --blue-700 / 面 = --blue-100 / 差し色 = --amber。
   絵文字調・人物の顔は描かない。すべて用途ごとの専用SVGで使い回さない */
.step-fig {
  position: relative;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.step-fig .spot {
  display: block;
  width: 100%;
  height: auto;
}
/* 番号は刻印。英数字のみなので等幅を使える */
.step-num {
  position: absolute;
  left: 16px;
  top: 13px;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  /* ライト地なので blue-300（2.2:1）は使えない。DESIGN.md「blue-300は濃地専用」 */
  color: var(--blue-500);
}
.step-body { padding: 16px 20px 20px; }

.spot .sp-face { fill: #fff; stroke: var(--blue-700); stroke-width: 1.8; stroke-linejoin: round; }
.spot .sp-fill { fill: var(--blue-100); stroke: var(--blue-700); stroke-width: 1.6; }
.spot .sp-line { fill: none; stroke: var(--blue-700); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.spot .sp-line-b { fill: none; stroke: var(--blue-700); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spot .sp-thin { fill: none; stroke: var(--blue-700); stroke-width: 1.2; stroke-linejoin: round; }
.spot .sp-hair { fill: none; stroke: var(--blue-700); stroke-width: 1.2; stroke-linecap: round; opacity: .45; }
.spot .sp-dash { fill: none; stroke: var(--blue-700); stroke-width: 1.4; stroke-dasharray: 5 4; opacity: .7; }
.spot .sp-dot { fill: var(--blue-700); opacity: .45; }
.spot .sp-amber { fill: var(--amber); }
.spot .sp-amber-r { fill: var(--amber); }
.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);
}
/* 段の間をつなぐ回線。カード高さは grid で揃うので中央に置く */
.step + .step::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  margin-top: -1px;
  width: 8px;
  height: 2px;
  background: var(--line);
}

.support-scope {
  margin: var(--sp-4) 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: var(--sp-5);
  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: var(--sp-5);
  display: flex;
  justify-content: center;
}
.support-cta .plate { width: 320px; }

/* ---------- 無料お試しの固定CTA ---------- */

/* ビューポート基準の右下アンカー。スクロール位置に依存しないので、
   ヒーロー内に現れて背景へ埋没することがない。ヘッダー(z:20)より下に置き、
   メガメニューを開いたときはメニューを前面にする */
.tryout {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 15;
  width: 250px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hover);
  overflow: hidden;
  animation: tryout-in .22s ease-out;
}
@keyframes tryout-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* 紺のヘッダー行＝筐体のフェースプレート。白カードとの対比で
   紺帯の上でもライト本文の上でも輪郭が立つ */
.tryout-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px 13px 14px;
  background: var(--navy-800);
}
.tryout-head :focus-visible { outline-color: var(--amber); }
.tryout-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
  color: #fff;
}
.tryout-trace {
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 8px;
  opacity: .9;
}

.tryout-close {
  margin-left: auto;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-xs);
  color: rgba(255, 255, 255, .75);
  cursor: pointer;
  transition: background-color .18s ease-out, color .18s ease-out;
}
.tryout-close svg { width: 13px; height: 13px; }
.tryout-close:hover { background: rgba(255, 255, 255, .14); color: #fff; }

.tryout-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tryout-item {
  display: block;
  padding: 11px 14px 12px;
  background: #fff;
  text-decoration: none;
  transition: background-color .18s ease-out, box-shadow .18s ease-out;
}
.tryout-list li + li .tryout-item { border-top: 1px solid var(--line); }
.tryout-item:hover {
  background: var(--paper);
  box-shadow: inset 2px 0 0 var(--amber);
}
.tryout-name {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}
.tryout-desc {
  display: block;
  font-size: 11px;
  line-height: 1.55;
  color: var(--ink-sub);
}
/* ライト地なのでアンバーは文字色に使わない（2.06:1）。DESIGN.mdのトーン規律どおり */
.tryout-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--blue-700);
}
.tryout-go svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--blue-500);
  transition: transform .18s ease-out;
}
.tryout-item:hover .tryout-go svg { transform: translateX(2px); }

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

/* NAVは「お知らせ」を加えて6項目。CTAまで1行に収めるため、縮小の段は
   5項目時（1200 / 1120）より一段早く効かせる */
@media (max-width: 1400px) {
  .gnav > ul > li > a,
  .gnav-trigger { padding: 8px 8px; font-size: 13.5px; }
  .brand-name { font-size: 16px; }
}

/* NAV6項目とCTAが並ぶ幅ではロックアップの社名まで入らないため、マークのみに畳む */
@media (max-width: 1340px) {
  .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; }
  .record-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-other-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 見出しと「一覧を見る」は縦積みにし、行は 日付＋カテゴリ / 見出し の2段へ折る */
  .topnews-head { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .topnews-item {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 8px 14px;
    padding: 16px 18px;
  }
  .topnews-ttl { grid-column: 1 / -1; }
  .topnews-arw { display: none; }
}

@media (max-width: 640px) {
  .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; }
  .pf-other-list { grid-template-columns: minmax(0, 1fr); }
  .record-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ヘッダー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) {
  /* 見出し列が狭いと折り返しだらけになるため縦積みへ */
  .company-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .foot-cols { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

@media (max-width: 560px) {
  .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: 1100px) {
  /* 幅が減るぶんロゴも縮めないと、行の末尾に1本だけ余る折返しになる */
  .lw-panel { padding: 44px 32px 34px; }
  .lw-grid { gap: 38px 36px; }
  .lw-grid img { height: calc(var(--logo-h, 46px) * .85); }
}

@media (max-width: 900px) {
  /* この幅から先は自然折返しが成立しない（1本だけの行が出る）ので2列で固定する */
  .lw-panel { padding: 30px 20px 24px; }
  .lw-grid { gap: 28px 20px; }
  .lw-grid li { flex: 0 0 calc(50% - 10px); }
  .lw-grid img { height: calc(var(--logo-h, 46px) * .8); }
  .lw-note { margin-top: 26px; }
}

@media (max-width: 640px) {
  /* アスペクト10:1級のワードマークは半幅セルだと高さ13px程度まで潰れるため、
     この幅から1行を使わせて可読性を保つ */
  .lw-grid li.lw-wide { flex-basis: 100%; }
}

@media (max-width: 480px) {
  .lw-grid { gap: 24px 14px; }
  .lw-grid li { flex: 0 0 calc(50% - 7px); }
  .lw-grid li.lw-wide { flex-basis: 100%; }
  .lw-grid img { height: calc(var(--logo-h, 46px) * .68); }
}

@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; }
  .support-cta .plate { width: 100%; max-width: 320px; }
}

@media (max-width: 900px) {
  /* 右端の縦型は成立しないので下端の細バーへ。説明文と「試してみる」の文字は畳み、
     製品名＋外部遷移マークに絞る */
  .tryout {
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
  .tryout-head { padding: 8px 10px 8px 14px; }
  .tryout-trace { display: none; }
  .tryout-label { font-size: 11.5px; }

  .tryout-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px 14px 12px;
  }
  .tryout-list li { display: flex; }
  .tryout-list li + li .tryout-item { border-top: 1px solid var(--line); }
  .tryout-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xs);
    background: var(--paper);
  }
  .tryout-desc { display: none; }
  .tryout-go-t { display: none; }
  .tryout-name { font-size: 12px; }
  .tryout-go { margin-top: 0; margin-left: auto; }
}

@media (max-width: 760px) {
  /* 狭幅は間延びさせない。セクション境界だけ縮め、要素間の近接関係は保つ */
  .services-inner,
  .audience-inner,
  .products-inner,
  .logowall-inner,
  .cases-inner,
  .reasons-inner,
  .support-inner,
  .record-inner,
  .topnews-inner,
  .company-inner { padding-top: var(--sp-6-m); padding-bottom: var(--sp-6-m); }
  .hero-inner { padding-top: var(--sp-4); }
  .topology-wrap { margin-top: var(--sp-4); }
  .hero-stats { padding-top: var(--sp-4); padding-bottom: var(--sp-5); }
  .terms,
  .support-cta,
  .pf-cta { margin-top: var(--sp-4); }
}

@media (max-width: 760px) {
  /* 背面は簡素化。周縁のゴーストパネルと下部の機器群は畳み、
     静穏ゾーンの配線とパケットだけ残す（性能と視認性を優先） */
  .ht-panel-l,
  .ht-panel-r,
  .ht-base,
  .ht-base-wire { display: none; }
  /* 走行パケットは狭幅では止める。下部の幹線ごと畳んでおり、
     残る端の配線だけに流しても意味が伝わらないうえ、常時再生は電池に響く */
  .ht-packets { display: none; }
  .hero-veil {
    background: radial-gradient(ellipse 90% 60% at 50% 42%,
      rgba(11, 17, 64, .95) 0%,
      rgba(11, 17, 64, .8) 55%,
      rgba(11, 17, 64, .4) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .mega { animation: none; }
  /* 2層のパララックスは完全静止（JS側でも transform を外す） */
  .hero-topo { transform: none !important; }
  /* 走行は止め、既存の静的なアンバードットだけの表現へ戻す */
  .ht-packets { display: none; }
  .tryout { animation: none; }
  html { scroll-behavior: auto; }
  /* サービス全体図もPDFと同じ静的パケットへ切替える */
  .svm-packets { display: none; }
  .svm-static { display: initial; }
}

/* サービス全体図の狭幅調整。図はスクロールで原寸を保つので、バーだけ畳む */
@media (max-width: 760px) {
  .svm-panel { padding: 12px 14px 14px; }
  .svm-title { font-size: 13px; }
  .svm-legend { display: none; }
}

/* ===== 下層ページ共通（SPEC-company） ===== */

/* gnav の現在ページ表示。hover は背景色で示すため、現在地は下線という別プロパティで示す。
   .gnav > ul > li > a:hover の方が詳細度が高いが、色は同じ blue-700 で衝突しない */
.gnav a[aria-current="page"] {
  font-weight: 700;
  color: var(--blue-700);
  text-decoration: underline;
  text-decoration-color: var(--amber);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* ---------- subhero（下層ページ共通ヒーロー） ---------- */

/* トップの2層ヒーローの縮約版。下層は読み物なので走行パケットは持ち込まず静的に組む
   （間欠バーストはトップの署名として温存する） */
.subhero {
  position: relative;
  background: var(--navy-950);
  color: #fff;
  overflow: hidden;
}
.subhero :focus-visible { outline-color: var(--amber); }

.subhero-bg,
.subhero-topo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* コピーの背後を横切る細線。トップの .ht-quiet と同じ濃度 */
.sh-quiet  { fill: none; stroke: #8FA5EC; stroke-width: 1; opacity: .10; }
.sh-line   { fill: none; stroke: #8FA5EC; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; opacity: .30; }
.sh-line-w { fill: none; stroke: #8FA5EC; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; opacity: .18; }
/* 箱の塗り。トップの .ht-face と同一の合成色（navy-800 を 55% で navy-950 に重ねた値） */
.sh-face   { fill: #0F1752; stroke: #8FA5EC; stroke-width: 1.1; stroke-opacity: .34; }
.sh-fill   { fill: #8FA5EC; opacity: .16; }
.sh-dot    { fill: #8FA5EC; opacity: .30; }
.sh-amber  { fill: #F7A600; }
.sh-ok     { fill: #2E9E6B; opacity: .55; }

.subhero-inner {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--sp-4) 24px;
}

/* パンくず。JSON-LD の BreadcrumbList と同じ2階層 */
.crumbs { margin: 0 0 var(--sp-3); }
.crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12.5px;
  line-height: 1.7;
}
.crumbs li { display: flex; align-items: center; }
.crumbs li + li::before {
  content: "/";
  margin: 0 9px;
  color: var(--blue-300);
}
.crumbs a {
  color: var(--blue-100);
  text-decoration: none;
  border-bottom: 1px solid rgba(143, 165, 236, .5);
  transition: color .18s ease-out, border-color .18s ease-out;
}
.crumbs a:hover { color: #fff; border-color: var(--amber); }
.crumbs [aria-current="page"] { color: var(--blue-300); }

/* 英字のみのラベルなので mono の刻印を使える */
.subhero-eyebrow {
  margin: 0 0 var(--sp-1);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .18em;
  color: var(--blue-300);
}
.subhero h1 {
  margin: 0 0 var(--sp-2);
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: .02em;
  font-feature-settings: "palt";
  color: #fff;
}
.subhero-tagline {
  margin: 0 0 var(--sp-3);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .02em;
  color: var(--blue-100);
}
.subhero-lead {
  margin: 0;
  max-width: 760px;
  font-size: 14.5px;
  line-height: 1.9;
  color: #C7D3F5;
}

/* ---------- 下層セクションの共通骨格 ---------- */

.sub-sec {
  border-bottom: 1px solid var(--line);
  /* ページ内アンカーの着地点が sticky ヘッダー（40+76+1=117px）に隠れないようにする */
  scroll-margin-top: 128px;
}
.sub-sec--white { background: #fff; }
.sub-sec--paper { background: var(--paper); }
/* ロゴウォールの白パネルを白地の上に置くと輪郭が消えるため、図面の地を敷いて分ける */
.sub-sec--grid {
  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;
}

.sub-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--sp-6) 24px;
}

.sec-head { margin-bottom: var(--sp-4); }
/* 下層の eyebrow は現行ページの英字文言をそのまま引き継ぐので刻印にできる */
.sub-sec .sec-eyebrow {
  font-family: var(--font-mono);
  letter-spacing: .14em;
}
.sub-sec h2 {
  margin: 0;
  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);
}
.sub-lead {
  margin: var(--sp-2) 0 0;
  max-width: 760px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--ink-sub);
}

/* ---------- 図版の器（スポットイラスト） ---------- */

.fig-canvas {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  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;
}
.fig-canvas .spot { display: block; width: 100%; height: auto; }
.fig-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;
}
.fig-cap {
  margin: var(--sp-1) 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-sub);
}
/* 図版内の識別子は英数字のみなので mono を使う。blue-300 はライト地では 2.2:1 しか出ないので使わない */
.ph-mono {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  fill: var(--blue-500);
}

/* ---------- 企業理念 ---------- */

.phil {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: var(--sp-5);
  align-items: start;
}
.phil-body {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 28px 30px;
}
.phil-body p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--ink);
}
.phil-body p + p { margin-top: var(--sp-2); }
.phil-fig { margin: 0; }

/* ---------- 筐体パネル（定義リスト） ---------- */

.panel {
  position: relative;
  background-color: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 28px 30px;
  /* 四隅のビス点（筐体感）。事例カードと同じ意匠 */
  background-image:
    radial-gradient(circle at 9px 9px, rgba(26, 40, 136, .3) 1.3px, transparent 1.3px),
    radial-gradient(circle at calc(100% - 9px) 9px, rgba(26, 40, 136, .3) 1.3px, transparent 1.3px),
    radial-gradient(circle at 9px calc(100% - 9px), rgba(26, 40, 136, .3) 1.3px, transparent 1.3px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), rgba(26, 40, 136, .3) 1.3px, transparent 1.3px);
  background-repeat: no-repeat;
}

.spec { margin: 0; }
.spec-row {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 24px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.spec-row:first-child { padding-top: 0; }
.spec-row:last-child { padding-bottom: 0; border-bottom: 0; }
.spec-row dt {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--ink-sub);
}
.spec-row dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.spec-row dd a {
  color: var(--blue-500);
  text-decoration: none;
  transition: color .18s ease-out;
}
.spec-row dd a:hover { color: var(--blue-700); text-decoration: underline; }

/* 取引先。column-width を 288px にしてあるので、最長の社名（20字＝280px）が
   割れる幅になると自動で1段組みへ落ちる */
.partners {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2 288px;
  column-gap: 28px;
}
.partners li {
  position: relative;
  padding-left: 14px;
  font-size: 14px;
  line-height: 1.9;
  break-inside: avoid;
}
/* 行box（14px×1.9＝26.6px）の中心から端子マーク5pxの半分を引いた位置 */
.partners li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-xs);
  background: var(--blue-100);
  box-shadow: inset 0 0 0 1px var(--device-edge);
}

/* ---------- 導入実績（ロゴウォール再利用） ---------- */

/* 注記が2行になる幅では右揃えが読みにくいので左へ寄せる */
@media (max-width: 560px) {
  .sub-sec .lw-note { text-align: left; }
}

/* ---------- 代表取締役 略歴（縦の回線タイムライン） ---------- */

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

.bio-row {
  position: relative;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--sp-4);
  padding-left: 48px;
}
.bio-row + .bio-row { margin-top: var(--sp-4); }

/* 配線は行ごとに1区間ずつ引き、行間（--sp-4）ぶんを負の bottom で渡す。
   最終行だけ自分の下端で止め、端子マークへ受け渡す */
.bio-row::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 0;
  bottom: calc(var(--sp-4) * -1);
  width: 2px;
  background: var(--line);
}
.bio-row:last-child::before { bottom: 0; }
/* 行間を流れるパケット。中心が行間（40px）の中央に来る */
.bio-row + .bio-row::after {
  content: "";
  position: absolute;
  left: 19px;
  top: -24px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
}

/* ノードは 40×24。リング中心 (15,12) が配線の中心 x=23 / 年プレートの中心 y=12 に一致する */
.bio-node {
  position: absolute;
  left: 8px;
  top: 0;
  width: 40px;
  height: 24px;
}
/* 始端・終端の端子マーク。配線と同じ x=23 を通す */
.bio-term {
  display: block;
  width: 40px;
  height: 20px;
  margin-left: 8px;
}

.bn-ring { fill: #fff; stroke: var(--blue-500); stroke-width: 2; }
.bn-core { fill: var(--blue-700); }
.bn-stub { fill: none; stroke: var(--line); stroke-width: 2; }
/* 現職の行だけ稼働中のLEDにする */
.bn-ring-ok { stroke: var(--status-ok); }
.bn-halo { fill: var(--status-ok); opacity: .18; }
.bn-led { fill: var(--status-ok); }
.bt-face { fill: #fff; stroke: var(--blue-500); stroke-width: 1.6; }
.bt-line { fill: none; stroke: var(--line); stroke-width: 2; }
.bt-hair { fill: none; stroke: var(--device-edge); stroke-width: 1.2; stroke-linecap: round; }

.bio-head { min-width: 0; }
/* 年代の刻印プレート。中心をノード中心（行上端から12px）に一致させる必要があるので、
   高さをフォント由来にしない。親のstrutは和文、中の刻印はmonoで基準線がずれ、
   行boxが line-height より 1px 高くなるため、高さ24pxを直接与えて flex で中央に置く。
   inline-block も不可（親の行boxに乗って 4.5px 下がる） */
.bio-year {
  display: flex;
  align-items: center;
  width: fit-content;
  height: 24px;
  margin: 0 0 var(--sp-1);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--blue-700);
  background: #fff;
  border: 1px solid var(--device-edge);
  border-radius: var(--radius-xs);
  font-variant-numeric: tabular-nums;
}
/* 刻印は英数字部分だけに掛ける。「〜」は和文なので mono に含めない */
.bio-y { font-family: var(--font-mono); letter-spacing: .06em; }
.bio-org {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .02em;
  color: var(--ink);
  font-feature-settings: "palt";
}

.bio-body { min-width: 0; }
/* 書影は箇条書きの右に添える。1fr にすると書影が本文から離れて右端へ張り付くので、
   本文列を max-content までに留めて近接させる（min は0なので狭幅でも溢れない） */
.bio-body--book {
  display: grid;
  grid-template-columns: minmax(0, max-content) 156px;
  justify-content: start;
  gap: var(--sp-3) var(--sp-4);
  align-items: start;
}
.bio-list { list-style: none; margin: 0; padding: 0; }
.bio-list li {
  position: relative;
  padding-left: 16px;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--ink);
}
/* 汎用の中黒ではなく、配線から分岐した端子として引く */
.bio-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 7px;
  height: 2px;
  background: var(--blue-500);
}
.bio-list a {
  color: var(--blue-500);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .18s ease-out;
}
.bio-list a:hover { color: var(--blue-700); }

.bio-book {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 12px 12px 10px;
  text-align: center;
}
.bio-book img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
}
.bio-book figcaption {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-sub);
}

/* ---------- 沿革（回線ライン＋年ノード） ---------- */

.hist { list-style: none; margin: 0; padding: 0; }
.hist-node {
  position: relative;
  z-index: 1;
  display: block;
  width: 24px;
  height: 24px;
  margin-bottom: 14px;
}
.hist-year {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
}
/* 年は英数字なので刻印にできる。「年」は和文なので外に置く */
.hist-y {
  font-family: var(--font-mono);
  letter-spacing: .04em;
  color: var(--blue-700);
  font-variant-numeric: tabular-nums;
}
.hist-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-sub);
}

/* 始端・終端の端子。略歴タイムラインと同じ .bt-* 語彙を使い、終端だけ
   「現在も続いている」ことを --status-ok のLEDと刻印で示す。
   端子の接続点は 始端=(58,12) / 終端=(0,12)（viewBox座標）で、
   どちらの向きでもこの点を回線の端に合わせる */
.hist-wrap { position: relative; }
.hist-term { position: absolute; display: block; }
.hist-term-start { width: 58px; height: 24px; }
.hist-term-end { width: 72px; height: 24px; }
.hist-led-halo { fill: var(--status-ok); opacity: .18; }
.hist-led { fill: var(--status-ok); }
/* 英数字のみのラベルなので刻印にできる。ライト地なので blue-700（12.3:1） */
.hist-now {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  fill: var(--blue-700);
}

/* 広い幅は横の幹線。区間長 = 列幅 + gap（28px）。gap を変えたらここも合わせること */
@media (min-width: 761px) {
  /* 端子ぶんを内側に確保する。列幅はこの padding を引いた残りを3等分したもので、
     幹線の区間長は列幅相対なので padding を変えても接続はずれない */
  .hist-wrap { padding: 0 72px 0 46px; }
  .hist {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
  }
  .hist-item { position: relative; }
  .hist-item::after {
    content: "";
    position: absolute;
    top: 11px;
    z-index: 0;
    height: 2px;
    background: var(--line);
  }
  .hist-item:not(:last-child)::after {
    left: 12px;
    width: calc(100% + 28px);
  }
  /* 最終ノードから終端端子の接続点（＝コンテンツ右端）まで引き切る */
  .hist-item:last-child::after { left: 12px; right: 0; }
  .hist-item + .hist-item::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: -18px;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--amber);
  }
  /* 始端の接続点(58,12)が最初のノード中心(46+12=58)に、
     終端の接続点(0,12)がコンテンツ右端に重なる */
  .hist-term-start { left: 0; top: 0; }
  .hist-term-end { right: 0; top: 0; }
}

/* 狭幅では幹線を縦へ倒す */
@media (max-width: 760px) {
  /* 上下へ振る端子ぶんの余白 */
  .hist-wrap { padding: 48px 0 76px; }
  .hist-item { position: relative; padding-left: 40px; }
  .hist-item + .hist-item { margin-top: var(--sp-3); }
  .hist-item::after {
    content: "";
    position: absolute;
    left: 11px;
    top: 12px;
    bottom: calc(var(--sp-3) * -1);
    width: 2px;
    background: var(--line);
  }
  /* 最終行は自分の下端＝olの下端まで引き、終端端子へ渡す */
  .hist-item:last-child::after { bottom: 0; }
  .hist-node { position: absolute; left: 0; top: 0; margin-bottom: 0; }

  /* 端子は接続点を transform-origin にして90°回し、本体を縦へ振る。
     始端は接続点を (12,60)＝最初のノード中心へ置いて本体を上へ、
     終端は接続点を olの下端へ置いて本体を下へ送る */
  .hist-term-start {
    left: -46px;
    top: 48px;
    transform-origin: 58px 12px;
    transform: rotate(90deg);
  }
  .hist-term-end {
    left: 12px;
    right: auto;
    top: auto;
    bottom: 64px;
    transform-origin: 0 12px;
    transform: rotate(90deg);
  }
  /* 刻印だけは水平に戻す（回転すると縦書きになって読めない） */
  .hist-now {
    transform-box: fill-box;
    transform-origin: center;
    transform: rotate(-90deg);
  }
}

/* ---------- アクセス（地図を収める筐体パネル） ---------- */

.map {
  margin-top: var(--sp-4);
  background: var(--navy-950);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  /* iframe の角を面と揃えるため、パネル側で切り落とす */
  overflow: hidden;
}
.map-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(143, 165, 236, .28);
}
.map-bar .led { width: 7px; height: 7px; box-shadow: 0 0 0 2px rgba(46, 158, 107, .24); }
.map-id {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: #C7D3F5;
}
.map-ports { margin-left: auto; width: 76px; height: 12px; flex-shrink: 0; }
.map-port { fill: none; stroke: #8FA5EC; stroke-width: 1.1; opacity: .5; }
.map iframe {
  display: block;
  width: 100%;
  height: 400px;
  border: 0;
}

/* ---------- お問い合わせ ---------- */

.contact-card {
  margin-top: var(--sp-4);
  max-width: 760px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 28px 30px;
}
.contact-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink);
}
.contact-card p + p { margin-top: var(--sp-2); }
.contact-note { font-size: 13.5px; color: var(--ink-sub); }
.contact-cta { margin-top: var(--sp-4); }
.contact-cta .plate { width: 320px; max-width: 100%; }

/* ---------- 下層ページのレスポンシブ ---------- */

@media (max-width: 900px) {
  .phil { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .phil-fig { max-width: 460px; }
}

@media (max-width: 760px) {
  /* 狭幅は間延びさせない。セクション境界だけ縮める */
  .sub-inner { padding-top: var(--sp-6-m); padding-bottom: var(--sp-6-m); }
  .subhero-inner { padding-top: var(--sp-3); }
  /* 帯の端に寄せた回線束と機器は畳み、コピー背後の細線だけ残す */
  .sh-edge { display: none; }

  .phil-body,
  .panel,
  .contact-card { padding: 20px 18px; }

  .spec-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .spec-row dt { font-size: 12.5px; }

  .bio-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .bio-body--book { grid-template-columns: minmax(0, 1fr); }
  .bio-book { max-width: 200px; }

  .map iframe { height: 300px; }
}

/* 和文の折返し規約を下層ページの本文段落へも広げる（h1-h3 と .sec-lead は既存定義が担う）。
   .phrase と違い段落は文節で包めないので、対応ブラウザの auto-phrase に任せる */
.subhero-lead,
.sub-lead,
.phil-body p,
.contact-card p,
.bio-list li,
.hist-text { word-break: auto-phrase; }

/* ===== /contact/（SPEC-contact） ===== */

/* タグラインが無いページ（h1の次がいきなりリード）は帯が痩せるので、上下の余白を
   --sp-4 から --sp-5 へ一段上げ、DESIGN.md の subhero 想定（300〜360px）に収める。
   .subhero に min-height と flex を与える手もあるが、.subhero-inner の `margin: 0 auto` が
   フレックスアイテムの auto マージンとして働き、幅が fit-content に縮んで
   /company/ のコピーが右へずれる。ページ側にクラスを足さず、
   「タグラインの有無」だけで自動的に切り替わるこの形にする */
.subhero:has(h1 + .subhero-lead) .subhero-inner {
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-5);
}
/* 同じ理由で、h1 とリードの間は「近接」では詰まりすぎるので小分離へ。
   隣接マージンは相殺されるので max(14, 24) = 24px になる */
.subhero h1 + .subhero-lead { margin-top: var(--sp-3); }

/* utility-bar の現在ページ表示。reader-tabs の .is-current と同じ扱い */
.utility-links a[aria-current="page"] {
  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 a[aria-current="page"]:hover { color: var(--blue-500); }

/* ---------- 製品専用窓口カード ---------- */

.pdesks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.pdesk {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: border-color .18s ease-out, box-shadow .18s ease-out, transform .18s ease-out;
}
.pdesk:hover,
.pdesk:focus-visible {
  border-color: var(--blue-500);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
/* マークはメガメニューと同じ #m-* を使う。器だけライト地用に組み替える */
.pdesk-mark {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  border-radius: var(--radius-xs);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--device-edge);
  color: var(--blue-700);
  transition: color .18s ease-out, box-shadow .18s ease-out;
}
.pdesk-mark svg { width: 24px; height: 24px; }
.pdesk:hover .pdesk-mark {
  color: var(--blue-500);
  box-shadow: inset 0 0 0 1px var(--blue-500);
}
/* タグは2行ぶんの高さを確保する。長いタグ（AI通話アシスト…）だけが折り返すと
   同じ行のカードで製品名の位置が揃わないため、行box（1.6em）×2 を下限にする */
.pdesk-tag {
  display: block;
  min-height: 3.2em;
  margin-bottom: 4px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--ink-sub);
}
.pdesk-name {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--ink);
  font-feature-settings: "palt";
}
.pdesk-text {
  display: block;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink-sub);
}
.pdesk-go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--blue-700);
  transition: color .18s ease-out;
}
.pdesk-go svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--blue-500);
  transition: transform .18s ease-out;
}
.pdesk:hover .pdesk-go { color: var(--blue-500); }
.pdesk:hover .pdesk-go svg { transform: translate(2px, -2px); }

/* ---------- 汎用フォーム ---------- */

.fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-4);
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}
/* 種別と本文は1行使う */
.field--wide { grid-column: 1 / -1; }

.field label {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .02em;
  color: var(--ink);
}
/* 必須マーク。小さな記号なので --status-err を文字色に使える（白地で5.15:1） */
.req {
  margin-left: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--status-err);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .18s ease-out, box-shadow .18s ease-out;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-sub); opacity: 1; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--device-edge); }
/* focus は罫を --blue-500 に締める。outline は打ち消さない
   （打ち消すと :focus-visible の輪郭まで消える。ライト地なので輪郭色は blue-500 のまま） */
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--blue-500);
  box-shadow: inset 0 0 0 1px var(--blue-500);
}
.field textarea { resize: vertical; min-height: 132px; }

/* 選択記号は .ico-caret と同じ形。data URI なので var() が使えず blue-500 を直値で持つ */
.field select {
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1.2 5 5 9 1.2' fill='none' stroke='%232F4BC7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 6px;
}

/* ハニーポット。現行の視覚非表示手法をそのまま保存する */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-foot {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

/* contact.js は className を 'form-status' へ丸ごと戻すので、基底の見た目はこの1クラスに集約する。
   --status-ok はライト地の本文色にできない（3.38:1）ため、状態色は縦罫と淡い面に回し
   文字は --ink のまま置く（--amber と同じ扱い） */
.form-status {
  /* 空でも1行ぶん確保して、メッセージ出現時にボタンが動かないようにする */
  margin: 0 0 var(--sp-2);
  min-height: 1.4em;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--ink);
}
.form-status.is-ok,
.form-status.is-err {
  padding: 10px 14px;
  border-left: 3px solid;
  border-radius: var(--radius-xs);
}
.form-status.is-ok {
  border-left-color: var(--status-ok);
  background: rgba(46, 158, 107, .10);
}
.form-status.is-err {
  border-left-color: var(--status-err);
  background: rgba(196, 61, 61, .08);
}

/* フェースプレート型の送信ボタン。LEDは ::before で描く
   （contact.js が textContent を差し替えるので子要素にすると初回送信で消える） */
.form-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 30px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: .01em;
  color: var(--ink);
  background: var(--amber);
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: background-color .18s ease-out, box-shadow .18s ease-out, transform .18s ease-out;
}
.form-submit::before {
  content: "";
  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);
}
.form-submit:hover {
  background: var(--amber-hover);
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}
/* 送信中。面と文字を落として押せないことを示す（--line 地に --ink-sub で 4.7:1） */
.form-submit:disabled {
  background: var(--line);
  color: var(--ink-sub);
  box-shadow: none;
  transform: none;
  cursor: default;
}
.form-submit:disabled::before { background: var(--ink-sub); box-shadow: none; }

.form-notes { margin: var(--sp-3) 0 0; }
.form-notes p {
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink-sub);
}

.pdesk-tag,
.pdesk-text,
.form-notes p { word-break: auto-phrase; }

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

@media (max-width: 1199px) {
  .pdesks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 3列は960px以上まで。これ未満だとカード内寸が最長タグ
   「AI通話アシスト（クラウド版オプション）」= 232px を下回り、文字が右padding へはみ出す */
@media (max-width: 959px) {
  .pdesks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .pdesks { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  /* 2カラムだとラベルと入力が窮屈になるので1カラムへ */
  .fields { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .form-submit { width: 100%; justify-content: center; }
}

/* ===== /local-ai-box/（SPEC-local-ai-box） ===== */

/* ---------- 製品ヒーロー（subheroの2カラム拡張） ---------- */

.subhero--product .subhero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: var(--sp-5);
  align-items: center;
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-5);
}
.subhero-copy { min-width: 0; }
/* 和文のeyebrowなので刻印（mono）を外す。DESIGN.md「monoは英数字のみ」 */
.subhero-eyebrow--ja {
  font-family: var(--font);
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--blue-300);
}
.subhero--product .subhero-lead { max-width: 620px; }
.subhero-cta { margin-top: var(--sp-4); }
.subhero-cta .plate { width: 320px; max-width: 100%; }
.subhero-cta .cta-third-row { text-align: left; margin-top: var(--sp-2); }

.subhero-fig { min-width: 0; }
.lbhero { display: block; width: 100%; height: auto; }
/* 盾の内側＝閉域。パケットは内側だけを走り、外周へ出ない */
.lh-ring   { fill: none; stroke: #8FA5EC; stroke-width: 1.2; stroke-dasharray: 8 6; opacity: .16; }
.lh-shield { fill: rgba(143, 165, 236, .05); stroke: #8FA5EC; stroke-width: 1.8; stroke-opacity: .38; stroke-linejoin: round; }
.lh-face   { fill: #0F1752; stroke: #8FA5EC; stroke-width: 1.4; stroke-opacity: .5; }
.lh-vent   { fill: none; stroke: #8FA5EC; stroke-width: 1; opacity: .3; }
.lh-unit   { fill: #8FA5EC; opacity: .22; }
.lh-bay    { fill: #0B1140; stroke: #8FA5EC; stroke-width: 1; stroke-opacity: .32; }
.lh-port   { fill: #8FA5EC; opacity: .35; }
.lh-wire   { fill: none; stroke: #8FA5EC; stroke-width: 1.4; opacity: .34; stroke-linecap: round; }
.lh-wire-t { fill: none; stroke: #8FA5EC; stroke-width: 1.4; opacity: .22; stroke-linecap: round; }
.lh-node   { fill: #0B1140; stroke: #8FA5EC; stroke-width: 1.6; stroke-opacity: .55; }
.lh-core   { fill: #8FA5EC; opacity: .8; }
.lh-lock   { fill: #8FA5EC; opacity: .5; }
.lh-lock-arc { fill: none; stroke: #8FA5EC; stroke-width: 2; opacity: .55; }
.lh-lock-pin { fill: #0B1140; }
.lh-amber  { fill: #F7A600; }
.lh-ok     { fill: #2E9E6B; opacity: .8; }
.lh-mono   { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; fill: #8FA5EC; opacity: .75; }
.lh-cap    { font-family: var(--font); font-size: 12px; letter-spacing: .06em; fill: #C7D3F5; }

/* ---------- 汎用カード（市場動向・ユースケース・読み物で共有） ---------- */

.lbcards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.lbcards > li { display: flex; }
.lbcard {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 26px 26px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  text-decoration: none;
}
.lbcard--link {
  transition: border-color .18s ease-out, box-shadow .18s ease-out, transform .18s ease-out;
}
.lbcard--link:hover,
.lbcard--link:focus-visible {
  border-color: var(--blue-500);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
/* 図は項目ごとの専用マーク。器は筐体の面に合わせる */
.lbcard-mark {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  border-radius: var(--radius-sm);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--device-edge);
  color: var(--blue-700);
  transition: color .18s ease-out, box-shadow .18s ease-out;
}
.lbcard-mark svg { width: 32px; height: 32px; }
.lbcard--link:hover .lbcard-mark {
  color: var(--blue-500);
  box-shadow: inset 0 0 0 1px var(--blue-500);
}
.lbcard-title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: .01em;
  color: var(--ink);
  font-feature-settings: "palt";
}
.lbcard-text {
  display: block;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-sub);
}
.lbcard-go {
  margin-top: auto;
  padding-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-700);
  transition: color .18s ease-out;
}
.lbcard-go svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--amber);
  transition: transform .18s ease-out;
}
.lbcard--link:hover .lbcard-go { color: var(--blue-500); }
.lbcard--link:hover .lbcard-go svg { transform: translateX(3px); }

/* ---------- モデル名チップ ---------- */

.modeltags {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.modeltags li {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--blue-700);
  background: var(--blue-100);
  border-radius: var(--radius-xs);
  padding: 4px 12px;
}

/* ---------- 転換の区切り（しかし／その結果） ---------- */

/* 回線を左右から引き、端子で受けて話題を切り替える */
.turn {
  margin: var(--sp-5) 0 0;
  display: flex;
  align-items: center;
  gap: 16px;
}
.turn-line {
  flex: 1;
  height: 1px;
  background: var(--line);
  position: relative;
}
.turn-line::after {
  content: "";
  position: absolute;
  top: -3.5px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-xs);
  background: var(--blue-100);
  box-shadow: inset 0 0 0 1px var(--device-edge);
}
.turn-line:first-child::after { right: 0; }
.turn-line:last-child::after { left: 0; }
.turn-word {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink-sub);
}

/* ---------- リスク／根拠カード ---------- */

.riskcards,
.evcards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.evcards { margin-top: var(--sp-4); }
.riskcard,
.evcard {
  padding: 26px 28px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
/* 損害賠償カードは論点が重いので全幅の1枚に */
.evcard--wide { margin-top: 20px; border-left: 3px solid var(--amber); }
.riskcard-title,
.evcard-title {
  margin: 0 0 10px;
  font-size: 16.5px;
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: .01em;
  color: var(--ink);
  font-feature-settings: "palt";
}
.riskcard p,
.evcard p {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-sub);
}
/* 出典・参考。.evcard p より詳細度を上げて上書きする（!important は使わない） */
.evcard .src {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.8;
}
.src a,
.tnote a,
.lbstat-label a {
  color: var(--blue-500);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .18s ease-out;
}
.src a:hover,
.tnote a:hover,
.lbstat-label a:hover { color: var(--blue-700); }

/* ---------- 統計3点 ---------- */

.lbstats {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.lbstat {
  padding: 24px 22px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  text-align: center;
}
.lbstat-num {
  margin: 0 0 8px;
  font-size: 42px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--blue-700);
  font-variant-numeric: tabular-nums;
}
.lbstat-label {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--ink-sub);
}

/* ---------- 規制・ガイドライン表 ---------- */

.tablepanel { margin-top: var(--sp-4); padding: 0; overflow: hidden; }
/* 表は縮めて潰さず、パネル内の横スクロールで原寸を保つ */
.tablescroll { overflow-x: auto; }
.regtable {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 13.5px;
  line-height: 1.7;
}
.regtable--gl { min-width: 840px; }
.regtable th {
  padding: 13px 16px;
  text-align: left;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--blue-700);
  background: var(--blue-100);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.regtable td {
  padding: 13px 16px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.regtable tbody tr:last-child td { border-bottom: 0; }
.regtable .c { text-align: center; white-space: nowrap; }
.regtable .dsc { font-size: 13px; color: var(--ink-sub); }
/* 要件の識別子（U-5 等）は原文の注記なので小さく添える */
.req-id {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-sub);
}
.regtable strong { font-weight: 700; color: var(--blue-700); }
/* 組み合わせ強化の区切り行 */
.regtable-split td {
  padding: 11px 16px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--blue-700);
  background: var(--blue-100);
  border-top: 2px solid var(--device-edge);
}

/* 判定チップ。面で意味を出し、文字は --ink（DESIGN.mdの「面＋ink」の扱い） */
.badge {
  display: inline-block;
  padding: 3px 11px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--ink);
  border-radius: var(--radius-xs);
  white-space: nowrap;
}
.badge-warn { background: var(--amber); box-shadow: inset 0 0 0 1px rgba(26, 30, 48, .2); }
.badge-ok { background: var(--status-ok); box-shadow: inset 0 0 0 1px rgba(26, 30, 48, .2); }

.tnote {
  margin: 12px 0 0;
  font-size: 11.5px;
  line-height: 1.85;
  color: var(--ink-sub);
}

/* ---------- Solution ---------- */

.scope-note {
  margin: 0 0 var(--sp-4);
  padding-left: 14px;
  border-left: 2px solid var(--amber);
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink-sub);
}

/* 構成図はライト地の上に置く。紺は「閉域AI BOX」という箱だけに使う
   （DESIGN.md: 本文で紺を全面背景にしない。使ってよいのは箱） */
.diagram {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.diagram-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--blue-100);
  border-bottom: 1px solid var(--line);
}
.diagram-bar .led { width: 7px; height: 7px; box-shadow: 0 0 0 2px rgba(46, 158, 107, .24); }
.diagram-id {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--blue-700);
}
.diagram-legend {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: var(--ink-sub);
  white-space: nowrap;
}
.diagram-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.lg-line { width: 16px; border-top: 1.6px dashed var(--blue-700); }
.lg-packet { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.diagram-scroll { overflow-x: auto; }
.dgm { display: block; width: 100%; height: auto; min-width: 860px; }

.dgm text { font-family: var(--font); }
.dg-cap { font-size: 14px; font-weight: 700; fill: var(--ink); }
.dg-box { fill: #fff; stroke: var(--blue-700); stroke-width: 1.6; }
.dg-unit { fill: var(--blue-100); stroke: var(--device-edge); stroke-width: 1.1; }
.dg-lbl { font-size: 12px; fill: var(--ink); }
.dg-note { font-size: 11.5px; fill: var(--ink-sub); }
.dg-wire { fill: none; stroke: var(--blue-700); stroke-width: 2; stroke-dasharray: 7 5; stroke-linecap: round; }
.dg-packet { fill: var(--amber); }
.dg-ok { fill: var(--status-ok); }
/* 製品本体＝紺の筐体 */
.dg-core { fill: var(--navy-950); }
.dg-corehair { stroke: rgba(143, 165, 236, .3); stroke-width: 1; }
.dg-coretitle { font-size: 16px; font-weight: 700; fill: #fff; }
.dg-bay { fill: rgba(143, 165, 236, .1); stroke: rgba(143, 165, 236, .3); stroke-width: 1; }
.dg-bay-t { font-size: 13px; fill: #C7D3F5; }
.dg-screw { fill: rgba(143, 165, 236, .45); }
.dg-mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; fill: var(--blue-300); }
/* 遮断はエラー色。線と×は図形なので3:1、文字は白地の上で5.15:1 */
.dg-cut { fill: none; stroke: var(--status-err); stroke-width: 2; stroke-dasharray: 7 5; stroke-linecap: round; }
.dg-cross { fill: none; stroke: var(--status-err); stroke-width: 3.2; stroke-linecap: round; }
.dg-outer { fill: #fff; stroke: var(--status-err); stroke-width: 1.6; }
.dg-outer-t { font-size: 14px; font-weight: 700; fill: var(--status-err); }
.dg-outer-s { font-size: 12px; fill: var(--status-err); }
.dg-outer-x { font-size: 17px; font-weight: 700; fill: var(--status-err); }

/* 特徴カード */
.feats {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.feat {
  padding: 28px 30px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
/* ローカルLLMの実力は結論なので、淡地の全幅面で強調する */
.feat--accent {
  grid-column: 1 / -1;
  background: var(--blue-100);
  border-color: var(--device-edge);
}
.feat-title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: .01em;
  color: var(--ink);
  font-feature-settings: "palt";
}
.feat p {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-sub);
}
.feat--accent p { color: var(--ink); }

.guideline { margin-top: var(--sp-6); }
.guideline-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--ink);
  font-feature-settings: "palt";
}
.guideline-lead {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-sub);
}

/* ---------- First Release ---------- */

.release { max-width: 820px; }
.release-badge {
  display: inline-block;
  margin: 0 0 14px;
  padding: 4px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .14em;
  color: var(--ink);
  background: var(--amber);
  border-radius: var(--radius-xs);
  box-shadow: inset 0 0 0 1px rgba(26, 30, 48, .2);
}
.release-title {
  margin: 0 0 12px;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--ink);
  font-feature-settings: "palt";
}
.release-text {
  margin: 0 0 var(--sp-3);
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--ink-sub);
}
.release-feats {
  list-style: none;
  margin: 0 0 var(--sp-3);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.release-feats li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.release-feats li::before {
  content: "";
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--status-ok);
}
.release-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  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;
}
.release-link svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--amber);
  transition: transform .18s ease-out;
}
.release-link:hover { color: var(--blue-500); border-color: var(--blue-500); }
.release-link:hover svg { transform: translateX(3px); }

/* ---------- CTA ---------- */

.ctablock { text-align: center; }
.ctablock-title {
  margin: 0 0 var(--sp-2);
  font-size: clamp(23px, 2.4vw, 30px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--ink);
  font-feature-settings: "palt";
}
.ctablock-lead {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--ink-sub);
}

/* 6ステップ。矢印グリフではなく回線＋ノードで進行を示す */
.flow {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
}
.flow-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 区間長 = 列幅 + gap（20px）。gap を変えたらここも合わせること */
.flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 13px;
  z-index: 0;
  width: calc(100% + 20px);
  height: 2px;
  background: var(--line);
}
.flow-node {
  position: relative;
  z-index: 1;
  display: block;
  width: 28px;
  height: 28px;
  margin-bottom: 10px;
}
.flow-node svg { display: block; width: 28px; height: 28px; }
.fn-ring { fill: #fff; stroke: var(--blue-500); stroke-width: 2; }
.fn-core { fill: var(--blue-700); }
.fn-ring-ok { stroke: var(--status-ok); }
.fn-halo { fill: var(--status-ok); opacity: .18; }
.fn-led { fill: var(--status-ok); }
.flow-no {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.5;
  color: var(--blue-500);
  font-variant-numeric: tabular-nums;
}
.flow-label {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .01em;
  color: var(--ink);
}
.ctablock-act {
  margin-top: var(--sp-5);
  display: flex;
  justify-content: center;
}
.ctablock-act .plate { width: 320px; max-width: 100%; text-align: left; }

.lbcard-text,
.riskcard p,
.evcard p,
.feat p,
.release-text,
.ctablock-lead,
.scope-note,
.tnote { word-break: auto-phrase; }

/* ---------- /local-ai-box/ のレスポンシブ ---------- */

@media (max-width: 1000px) {
  .subhero--product .subhero-inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .subhero-fig { max-width: 320px; }
  .lbstats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}

@media (max-width: 900px) {
  /* 6列は横に潰れるので縦の幹線へ倒す */
  .flow { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .flow-step {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 10px 0 10px 0;
  }
  .flow-step:not(:last-child)::after {
    left: 13px;
    top: 24px;
    width: 2px;
    height: calc(100% - 8px);
  }
  .flow-node { margin-bottom: 0; }
  .flow-no { min-width: 24px; text-align: left; }
}

/* 3枚組は2列にすると1枚あぶれるので、トップの .svc-cards と同じく3列から1列へ落とす */
@media (max-width: 860px) {
  .lbcards { grid-template-columns: minmax(0, 520px); justify-content: center; gap: 20px; }
}

@media (max-width: 760px) {
  .riskcards,
  .evcards,
  .feats { grid-template-columns: minmax(0, 1fr); }
  .lbstats { grid-template-columns: minmax(0, 1fr); }
  .lbstat { text-align: left; }
  .riskcard,
  .evcard,
  .feat { padding: 20px 20px 18px; }
  .lbcard { padding: 20px 20px 18px; }
  .guideline { margin-top: var(--sp-5); }
  .turn { margin-top: var(--sp-4); }
}

/* ===== First Release 写真カラム（#3 画像追加・2026-08-03） ===== */

.release--with-photo { max-width: none; }

.release-cols {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  align-items: center;
}

.release-photo { margin: 0; }

.release-photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.release-photo figcaption {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-sub);
}

@media (max-width: 760px) {
  .release-cols { grid-template-columns: 1fr; gap: 20px; }
}

/* ===== /privacy/（SPEC-privacy） ===== */

/* フッターの法務導線。濃地なので濃地用トークンで組む */
.foot-legal {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.7;
}
.foot-legal a {
  color: var(--blue-100);
  text-decoration: none;
  border-bottom: 1px solid rgba(143, 165, 236, .45);
  transition: color .18s ease-out, border-color .18s ease-out;
}
.foot-legal a:hover { color: #fff; border-color: var(--amber); }

/* ---------- 法的文書ページ ---------- */

.legal-inner { max-width: 860px; }
.legal-block + .legal-block { margin-top: var(--sp-6); }
.legal-block h2 {
  margin: 0 0 var(--sp-3);
  font-size: clamp(20px, 2.1vw, 25px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--ink);
  font-feature-settings: "palt";
}
/* 条文はライト地に置かれた筐体パネルに収める */
.legal-panel {
  padding: 28px 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.legal-panel h3 {
  margin: 24px 0 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.65;
  color: var(--blue-700);
}
.legal-panel h3:first-child { margin-top: 0; }
.legal-panel p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.95;
  color: var(--ink);
  word-break: auto-phrase;
}
.legal-panel p:last-child { margin-bottom: 0; }
.legal-panel ul,
.legal-panel ol { margin: 0 0 14px; padding-left: 1.5em; }
.legal-panel li { margin-bottom: 6px; font-size: 15px; line-height: 1.9; color: var(--ink); }
.legal-panel a {
  color: var(--blue-500);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .18s ease-out;
}
.legal-panel a:hover { color: var(--blue-700); }
/* 事業者情報の定義リスト。会社概要の仕様書調に合わせる */
.legal-panel .info-grid { margin: 0; }
.legal-panel .info-grid dt {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--ink-sub);
}
.legal-panel .info-grid dd {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.legal-panel .info-grid dd:last-child { margin-bottom: 0; }
@media (min-width: 641px) {
  .legal-panel .info-grid {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 0 24px;
  }
  .legal-panel .info-grid dt { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .legal-panel .info-grid dd { padding: 12px 0; margin: 0; border-bottom: 1px solid var(--line); }
  .legal-panel .info-grid dt:first-of-type,
  .legal-panel .info-grid dd:first-of-type { padding-top: 0; }
}

/* フォームの同意文言 */
.form-consent {
  margin: 0 0 var(--sp-3);
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink-sub);
  word-break: auto-phrase;
}
.form-consent a {
  color: var(--blue-500);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .18s ease-out;
}
.form-consent a:hover { color: var(--blue-700); }

@media (max-width: 760px) {
  .legal-panel { padding: 20px 18px; }
  .legal-block + .legal-block { margin-top: var(--sp-5); }
}

/* ---------- 極狭幅（旧iPhone SE・折りたたみ端末の外側画面・高倍率ズーム） ----------
   ロゴ＋CTA＋ハンバーガーが 320px に収まらず、メニューボタンが画面外へ出て
   押せなくなっていた（ゼータ検収 2026-08-04。変更前から発生）。
   CTAは畳まず、周囲の余白と刻みを詰めて全部を画面内に入れる */
@media (max-width: 360px) {
  .header-inner { padding: 0 12px; gap: 8px; }
  .header-cta { padding: 9px 10px; font-size: 12px; gap: 6px; }
  .header-cta .led { width: 6px; height: 6px; }
  .menu-btn { width: 34px; height: 34px; }
}

/* ── 事業内容（/solutions/）の製品・サービス一覧 ──────────────────────────
   feat-title を各製品サイトへのリンクにしているため、見出しの字面はそのままに、
   ホバーとフォーカスでリンクだと分かるようにする。素の a のままだと既定の
   青字＋下線になり、カードの見出しとして浮く */
.feat-title a {
  color: inherit;
  text-decoration: none;
}

.feat-title a:hover,
.feat-title a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 同ページの製品カテゴリ見出し。pf-cat-name はトップの製品ラック用で margin:0 のため、
   feats のカード群と続けて置くと直前のカードに貼りつく */
.sub-sec .pf-cat-name {
  margin: var(--sp-4) 0 var(--sp-2);
}

.sub-sec .sec-head + .pf-cat-name {
  margin-top: 0;
}