/* ==========================================================
   ネットワーク設計・構築ページ（network.html）専用のデザイン
   ----------------------------------------------------------
   共通の色・ヘッダー・フッター・ボタンは style.css を使い、
   このファイルでは network.html だけの見せ方を定義しています。
   クラス名はすべて「nw-」で始まるので、ほかのページには影響しません。
   ========================================================== */
:root {
  /* VLAN（用途ごとに分けたネットワーク）の色 */
  --v-biz: #1565c0;    /* 業務 */
  --v-guest: #0f8a8a;  /* ゲストWi-Fi */
  --v-cam: #7b4bb7;    /* 防犯カメラ */
  --nw-rule: #d6e2f0;
  --nw-code-bg: #0f1d33;
}

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nw-hero__lead, .nw-head p, .nw-decide p, .nw-table td, .nw-topo__readout { word-break: auto-phrase; }

/* ---------- ページ上部：見出し＋構成図 ---------- */
.nw-hero { background: var(--sky); border-bottom: 1px solid var(--nw-rule); }
.nw-hero__inner { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: center; padding-top: 56px; padding-bottom: 60px; }
.nw-hero h1 { font-size: clamp(30px, 4.6vw, 44px); font-weight: 900; color: var(--navy); line-height: 1.3; }
.nw-hero__lead { margin-top: 18px; font-size: clamp(16px, 2vw, 18px); max-width: 30em; }
.nw-hero__meta { list-style: none; margin: 14px 0 0; padding: 0; font-size: 14px; color: var(--muted); line-height: 1.7; }
.nw-hero__meta span { white-space: nowrap; }
.nw-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* 構成図 */
.nw-topo { margin: 0; background: #fff; border: 1px solid var(--nw-rule); border-radius: 10px; padding: 16px 16px 14px; box-shadow: 0 16px 36px rgba(11, 42, 91, .10); }
.nw-topo__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.nw-topo__title { font-weight: 700; color: var(--navy); font-size: 15px; }
.nw-topo__hint { font-size: 12px; color: var(--muted); }
.nw-legend { list-style: none; margin: 12px 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nw-legend button {
  display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 14px; font-weight: 700;
  color: var(--ink); background: #fff; border: 1px solid var(--nw-rule); border-radius: 6px; padding: 6px 12px; cursor: pointer;
}
.nw-legend button i { width: 18px; height: 4px; border-radius: 2px; background: var(--c, #9aa6b5); }
.nw-legend button[aria-pressed="true"] { border-color: var(--c, var(--navy)); box-shadow: inset 0 0 0 1px var(--c, var(--navy)); background: #f7faff; }
.nw-legend button:focus-visible { outline: 3px solid #ffb366; outline-offset: 2px; }
.nw-topo svg { display: block; width: 100%; height: auto; }

/* 構成図の線と機器 */
.nw-link { fill: none; stroke: #9fb0c4; stroke-width: 3; }
.nw-link--air { stroke-dasharray: 5 5; }
.nw-ov { fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .3s; }
.nw-ov.v-biz { stroke: var(--v-biz); }
.nw-ov.v-guest { stroke: var(--v-guest); }
.nw-ov.v-cam { stroke: var(--v-cam); }
.nw-ov--air { stroke-dasharray: 6 6; }
.nw-node { transition: opacity .3s; }
.nw-node rect:not(.nw-tag) { fill: #fff; stroke: #0b2a5b; stroke-width: 2; }  /* 左端の色の目印（nw-tag）は、HTMLで指定した色のまま */
.nw-node text { font-size: 15px; font-weight: 700; fill: #0b2a5b; text-anchor: middle; }
.nw-node--end text { font-size: 14px; }  /* 端末は箱が小さいので少し小さい文字 */
.nw-node.nw-node--core rect { fill: #0b2a5b; }  /* UTM・L3スイッチ：紺の箱に白い文字 */
.nw-node.nw-node--core text { fill: #fff; }
.nw-topo[data-show="biz"] .nw-ov.v-biz,
.nw-topo[data-show="guest"] .nw-ov.v-guest,
.nw-topo[data-show="cam"] .nw-ov.v-cam { opacity: 1; }
.nw-topo[data-show="biz"] .nw-node:not(.v-biz),
.nw-topo[data-show="guest"] .nw-node:not(.v-guest),
.nw-topo[data-show="cam"] .nw-node:not(.v-cam) { opacity: .25; }
@media (prefers-reduced-motion: reduce) { .nw-ov, .nw-node { transition: none; } }
.nw-topo__readout { margin-top: 8px; font-size: 14px; min-height: 3.2em; }
.nw-topo__readout strong { color: var(--navy); }
.nw-topo__note { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* ---------- 本文 ---------- */
.nw-sec { padding: 64px 0; }
.nw-sec + .nw-sec { border-top: 1px solid var(--nw-rule); }
.nw-head { margin-bottom: 28px; max-width: 760px; }
.nw-head h2 { font-size: clamp(22px, 3vw, 28px); color: var(--navy); line-height: 1.45; }
.nw-head p { margin-top: 10px; color: var(--muted); }

/* 設計で決めること：説明と、設計書の抜粋を左右に並べる */
.nw-decide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px 48px; align-items: start; padding: 28px 0; border-bottom: 1px solid var(--nw-rule); }
.nw-head + .nw-decide { border-top: 2px solid var(--navy); }  /* 最初の項目の上だけ太い線 */
.nw-decide h3 { font-size: 19px; color: var(--navy); margin-bottom: 8px; }
.nw-decide p { color: var(--ink); font-size: 15px; }
.nw-decide p small { display: block; margin-top: 8px; color: var(--muted); font-size: 14px; }
.nw-doc { margin: 0; background: #fff; border: 1px solid var(--nw-rule); border-radius: 6px; overflow: hidden; }
.nw-doc figcaption { display: flex; justify-content: space-between; gap: 8px; padding: 8px 14px; font-size: 12px; color: var(--muted); background: #f5f8fc; border-bottom: 1px solid var(--nw-rule); }
.nw-doc table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.nw-doc th, .nw-doc td { padding: 8px 14px; text-align: left; border-bottom: 1px solid #eef2f7; }
.nw-doc tr:last-child td { border-bottom: 0; }
.nw-doc th { color: var(--muted); font-weight: 500; font-size: 12px; }
.nw-doc .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
.nw-doc pre {
  margin: 0; padding: 14px 16px; background: var(--nw-code-bg); color: #d7e3f4; overflow-x: auto;
  font-family: Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.7;
}
.nw-doc pre b { color: #8fd3ff; font-weight: 400; }

/* 対応表・工程表 */
.nw-table-wrap { overflow-x: auto; }
.nw-table { width: 100%; border-collapse: collapse; font-size: 15px; background: #fff; }
.nw-table th, .nw-table td { padding: 16px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--nw-rule); }
.nw-table thead th { font-size: 13px; color: var(--muted); font-weight: 700; border-bottom: 2px solid var(--navy); }
.nw-table tbody th { color: var(--navy); font-weight: 700; }
.nw-table--case tbody th { width: 34%; }
.nw-table--flow { min-width: 620px; }
.nw-table--flow tbody th { width: 22%; white-space: nowrap; }
.nw-table--flow .no {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-right: 10px;
  border-radius: 50%; background: var(--navy); color: #fff; font-size: 13px; font-weight: 900; vertical-align: 1px;
}
.nw-table--flow td:last-child { color: var(--muted); font-size: 14px; }
.nw-note { margin-top: 14px; font-size: 14px; color: var(--muted); }

.nw-makers { font-size: 17px; font-weight: 700; color: var(--navy); line-height: 2; }
.nw-area { font-size: 17px; }
.nw-area strong { color: var(--navy); }

/* ---------- 画面幅ごとの調整 ---------- */
@media (max-width: 1100px) {
  .nw-hero__inner { grid-template-columns: 1fr; gap: 32px; padding-top: 44px; padding-bottom: 52px; }
  .nw-topo { max-width: 700px; }
}
@media (max-width: 860px) {
  .nw-decide { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .nw-sec { padding: 48px 0; }
  .nw-hero__cta .btn { width: 100%; }
  .nw-topo { padding: 12px 10px 12px; }
  .nw-legend button { font-size: 13px; padding: 6px 10px; }
  .nw-table--case thead { display: none; }
  .nw-table--case tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--nw-rule); }
  .nw-table--case tbody th, .nw-table--case tbody td { display: block; width: auto; padding: 0; border: 0; }  /* スマホでは「こんなとき」を見出し、その下に説明 */
  .nw-table--case td { margin-top: 4px; }
}