<!-- v3.9.11 index 2026-10-08 (パスワード設定リンクの中継先＝管理者を旧 SaaS コンソールから GuardHub へ / MANABU「すすめる」・配信 v3.552・母艦 v3.538 と対)　【なぜ】中継は警備員・発注者以外（管理者）を旧コンソール saas_admin_v1.1.html の設定画面へ送っていた。設定し終えると運営コンソールのログイン欄が出て、顧客の管理者はそこから入れない（super_admin 以外は弾かれる）うえ、運営コンソールの存在も見せていた。母艦 v3.538 が自分でリンクを受け取れるようになったので、行き先を母艦へ。中継そのもの（# の資格を保ったまま渡す・自動では飛ばさない）は無変更。旧コンソールに残る役目はサポートログインだけになる。 -->
<!-- v3.9.10 index 2026-09-14 (ハブ図を経由させない＝開いた瞬間に GuardHub のログイン画面へ転送 / 第71S / MANABU 裁定 A 2026-09-14)　【なぜ】j-guard.jp/login/（HP）が GuardHub／365／2号を選ばせる入口になったので、app.j-guard.jp/ の相関図は二重＝顧客が「GuardHub を開く」を押したあと、もう一度 GuardHub の札を押す必要があった（MANABU が HP を一緒に見て「この画面は不要」）。【何を】v3.450 の再設定リンク中継スクリプトの早期 return を「母艦へ location.replace」に変えた。中継（# に access_token＋type=recovery）が乗っているときだけ従来どおりこの画面が出る＝救済用の中継は温存。JS 無効の環境向けに noscript の meta refresh も置いた。相関図の DOM・CSS は残置（中継の受け皿として描画される）。365.j-guard.jp/ は _redirects の 302! で先に発注者アプリへ飛ぶので無関係。デモ thunderous でも同じ挙動（母艦のデモ判定はホスト名なので影響なし）。header-badge v3.9.9→v3.9.10。 / base: v3.9.9 -->
<!-- v3.9.9 index 2026-09-03 (DEC-569②: J-GUARD DESK TOP をローンチ物から外す / 配信 v3.469)　【なぜ】DESK TOP（client_site/client_dashboard.html）は固定モックのスタブで、発注者の実務は 365 で足りる（第2回棚卸 第3層・裁定K）。【何を】ハブ図の発注者段から DESK TOP の札を外し 365 を中央に1枚、線は 365→GuardHub の1本、辺ラベルを1つに。配信 zip から client_dashboard.html と manifest_ct.json を除外（母艦・365・SW から参照なし）。中継（PW再設定）のロジックは無変更。base: v3.9.8 -->
<!-- v3.9.8 index 2026-09-03 (パスワード再設定リンクの中継先＝警備員を guard.j-guard.jp へ / MANABU裁定 09-03・配信 v3.468)　【なぜ】v3.9.5 の中継（救済用）は警備員を母艦オリジンの旧2号 /guard_apps/guard_app_traffic.html へ送っていたが、警備員の正は guard.j-guard.jp（08-27 分割・v3.9.7 でハブ図は済み・中継だけ残っていた）。トークンは URL の # に乗るだけでサーバへは送られない＝別オリジンでも Supabase の再設定は同じ。【何を】APPS.guard.path を https://guard.j-guard.jp/guard_apps/guard_app_traffic.html に（1号の警備員も同じ画面でPW設定できる）＋バッジ v3.9.8。それ以外は v3.9.7 と同一 -->
<!-- v3.9.7 index 2026-08-29 (ハブ図に1号を戻す＋警備員側のリンクを guard.j-guard.jp へ＋1号モックを配信物から除去 / MANABU裁定 08-29 A案・配信 v3.463)　【なぜ】v3.9.6 で「本工事した1号は guard.j-guard.jp へ載せるので母艦のハブ図からは入口を外す」と書いたが、載せたあと図に戻す作業が誰の手番にも入っておらず、図だけ見ると1号が存在しない製品に見えていた（08-29 MANABU が気づいた）。あわせて2号のカードが退役したはずのローカルパス /guard_apps/guard_app_traffic.html を指し続けており DEC-535（警備員に配るURLは guard.j-guard.jp だけ）と食い違っていた。【変更】(1) Row3 に nd-facility を復活。リンク先は https://guard.j-guard.jp/guard_apps/guard_app_facility（実測＝2026-08-29 に guard site v1.1 で稼働中）。⚠️バッジは「完成」にしない＝DEC-541「1号は勤怠と配置の土台。施設警備固有の業務（巡回・鍵・出入管理・設備点検）は未実装。営業で施設警備アプリとして見せない」に従い .b-wip「土台・巡回等は準備中」を新設して付ける。(2) nd-traffic のリンクも https://guard.j-guard.jp へ。(3) 外部サイトなので両方 target=_blank rel=noopener。(4) SVG 結線を hub→facility・hub→traffic の2本＋facility↔traffic の水平線に戻す（v3.9.5 と同じ形）。(5) header-badge v3.9.6→v3.9.7。【同時に除去】配信物から guard_apps/guard_app_facility.html（v3.448 から不変の旧モック fefc1d60…）・manifest_pk1.json・icons/pk1/ 5本。v3.9.6 は「ファイルは残す・リンクだけ外す」としていたが、URL直打ちでモックが開ける穴が残っており DEC-541 の趣旨に反するため MANABU 裁定で除去に変更。guard.j-guard.jp 側は自前の manifest_pk1.json とアイコンを持っている（2026-08-29 実測）ので影響なし。SW の precache は /offline.html のみ＝除去の影響なし。 / base: v3.9.6 -->
<!-- v3.9.6 index 2026-08-28 (ポケットケイビ1号（モック）の入口を外す / MANABU裁定 08-28 DEC-518＝A案 1号を本工事)　【なぜ】1号 guard_app_facility.html は丸ごとモック（ログイン画面0・Supabase SDK 0・トークン永久null・現場3件HTML直書き・カレンダー2026年4月固定・送信は .catch(()=>{}) で握りつぶし）。本番の入口に残すと、押した人には「動いているように見える」。本工事した1号は警備員専用サイト guard.j-guard.jp へ載せる（DEC-535＝警備員に配るURLはそこだけ）ので、母艦のハブ図からは入口を外す。⚠️ファイル自体は配信物に残す（v3.457 と1バイトも変えない）＝リンクを外すだけ。変更＝Row3の nd-facility ノード削除／SVG結線2本（hub→facility・traffic↔facility）削除／hub→traffic の始点を中央へ／header-badge の固定文字 v3.9.4→v3.9.6（v3.9.5 の時点で実態とずれていた）。 / base: v3.9.5 -->
<!-- v3.9.5 index 2026-08-26 (パスワード再設定リンクの中継を新設 / 母艦 v3.450 と対) 　再設定リンクは本来 Railway の PW_RESET_REDIRECT_GUARD / PW_RESET_REDIRECT_CLIENT が指すアプリへ直接戻る。🔴だがその環境変数が未設定のとき、あるいは Supabase の Redirect URLs に登録されていないときは、Supabase は Site URL ＝このページへ戻してしまう。2026-08-06 に SaaSコンソールで実際にこれが起き、原因が分かるまで時間を要した（body の redirect_to は読まれないという件）。そこでここへ落ちてきても本人が詰まらないように、# に乗っている資格をそのまま保って正しいアプリへ渡す中継を置いた。access_token の中の app_metadata.role を見て行き先を選ぶ（guard→2号／client→365／それ以外→管理者用の設定画面）。⚠️自動では飛ばさない＝何が起きたか分からないまま画面が変わるのを避け、押した先が分かる形にした。再設定リンク以外のときは1バイトも動かない（# に access_token と type=recovery の両方が無ければ即 return）。 / base: v3.9.4 -->
<!-- v3.9.4 index 2026-05-03 — Phase B (J-GUARD ブランド統一 残置修正) v4.26: 本番= title「デモ環境」削除 + header-badge「v3.9 DEMO」→「v3.9.4」 + Row2「2号警備アプリ」→「ポケットケイビ2号」 + Row2「1号警備アプリ」→「ポケットケイビ1号」 + footer「Atom Security Inc.」→「株式会社KSG」(計5件)。MANABU 2026-05-03 v4.25 セッション本番画面確認で旧称残存指摘 → 即時修正。UI design 変更なし。 / base: v3.9.3 -->
<!-- v3.9.2 index 2026-04-21 — B2 PWA対応: manifest.json / service-worker.js / pwa-register.js を参照。theme_color=#1e3a5f (navy)、scope=/、display=standalone、Cache First (静的) / Network First (/api/*) 戦略。アイコン 4 点 (192/512 maskable + apple-touch-icon 180 + favicon-32/ico) は /icons/ 配下に配置。frozen file 2 点 (guard_app_traffic.html, client_site_app_v1.html) は同一 scope 内で自動継承のため無変更。 / base: v3.9.1 -->
<!-- v3.9.1 index 2026-04-12 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<noscript><meta http-equiv="refresh" content="0;url=/security/security_company_unified_v3.html"></noscript>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>J-GUARD</title>
<!-- PWA v3.69 -->
<meta name="theme-color" content="#1e3a5f">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32.png">
<link rel="icon" href="/icons/favicon.ico">
<script src="/pwa-register.js" defer></script>
<!-- ══ v3.450 §PW: パスワード再設定リンクの中継（救済用） ══
     母艦が発行した再設定リンクは、本来 Railway の PW_RESET_REDIRECT_GUARD /
     PW_RESET_REDIRECT_CLIENT が指すアプリへ直接戻る。
     🔴だが、その環境変数が未設定のとき、あるいは Supabase の Redirect URLs に
     登録されていないときは、Supabase は「Site URL」＝このページへ戻してしまう。
     2026-08-06 に SaaSコンソールで実際にこれが起き、原因が分かるまで時間を要した。
     そこで、ここへ落ちてきた場合でも本人が詰まらないように、
     # に乗っている資格をそのまま保って正しいアプリへ渡す中継を置く。
     ⚠️ 自動では飛ばさない（何が起きたか分からないまま画面が変わるのを避ける）。 -->
<script>
(function(){
  'use strict';
  /* 🔴解析時に走る＝ページのどの処理より先。取り出したらアドレスバーからは消す。 */
  var h = (location.hash || '').replace(/^#/, '');
  if (!h || h.indexOf('access_token=') < 0 || h.indexOf('type=recovery') < 0) {
    /* v3.9.10（2026-09-14・MANABU 裁定 A）: 再設定リンクの中継でないときは、ハブ図を出さずに GuardHub のログイン画面へ直行する。
       理由＝j-guard.jp/login/ が既にアプリを選ばせているので、ここで相関図をもう一度見せるのは二重（顧客が2回押す）。
       中継（この下）は温存＝# に access_token と type=recovery が乗っているときだけ従来どおりこの画面が出る。 */
    location.replace('/security/security_company_unified_v3.html' + (location.search || ''));
    return;
  }
  try { history.replaceState(null, '', location.pathname + location.search); } catch (e) {}

  var APPS = {
    guard:  { path: 'https://guard.j-guard.jp/guard_apps/guard_app_traffic.html',   label: 'ポケットケイビ2号（警備員アプリ）' }, /* v3.9.8: 警備員の正は guard.j-guard.jp */
    client: { path: '/client_site/client_site_app_v1.html', label: 'ポケットケイビ365（発注者アプリ）' },
    admin:  { path: '/security/security_company_unified_v3.html', label: 'GuardHub（警備会社の管理者）' } /* v3.9.11: 旧 SaaS コンソールから GuardHub へ */
  };
  /* access_token の payload から役割とログインIDを読む。署名は検証しない＝行き先を選ぶためだけ。 */
  var role = '', email = '';
  try {
    var b = h.split('access_token=')[1].split('&')[0].split('.')[1].replace(/-/g, '+').replace(/_/g, '/');
    while (b.length % 4) b += '=';
    var o = JSON.parse(decodeURIComponent(atob(b).split('').map(function(c){
      return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join('')));
    role = (o.app_metadata && o.app_metadata.role) || o.role || '';
    email = o.email || '';
  } catch (e) {}
  var primary = APPS[role] || (role ? APPS.admin : null);

  function esc(s){ return String(s == null ? '' : s).replace(/[&<>"']/g, function(m){ return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[m]; }); }
  function btn(a, main){
    return '<a href="' + a.path + '#' + h + '" style="display:block;text-align:center;text-decoration:none;padding:' + (main ? '16px' : '12px') + ' 18px;border-radius:12px;margin-bottom:10px;font-weight:700;font-size:' + (main ? '16px' : '13px') + ';'
      + (main ? 'background:linear-gradient(135deg,#1e3a5f,#2d6cb4);color:#fff;box-shadow:0 4px 16px rgba(30,58,95,.25)' : 'background:#fff;color:#1e3a5f;border:1px solid #e2e8f0') + '">'
      + (main ? 'パスワードを設定する' : a.label) + (main ? '<div style="font-size:11px;font-weight:400;opacity:.85;margin-top:3px">' + esc(a.label) + '</div>' : '') + '</a>';
  }
  function render(){
    var d = document.createElement('div');
    d.id = 'jgpw-relay';
    d.setAttribute('style', 'position:fixed;inset:0;z-index:99999;background:linear-gradient(180deg,#f8fafc,#eef2f7);overflow-y:auto;padding:36px 20px;font-family:"Noto Sans JP","Helvetica Neue",sans-serif');
    var others = [];
    for (var k in APPS) if (!primary || APPS[k].path !== primary.path) others.push(btn(APPS[k], false));
    d.innerHTML =
      '<div style="max-width:400px;margin:0 auto">'
      + '<div style="text-align:center;font-size:34px">🔑</div>'
      + '<div style="text-align:center;font-size:19px;font-weight:900;color:#0f172a;margin:6px 0 8px">パスワードの設定</div>'
      + '<div style="text-align:center;font-size:12px;line-height:1.8;color:#475569;margin-bottom:18px">'
      + (email ? '<b>' + esc(email) + '</b> さんの<br>' : '')
      + 'パスワード再設定のリンクです。<br>下のボタンから設定画面へお進みください。</div>'
      + (primary ? btn(primary, true) : '')
      + '<div style="font-size:11px;color:#94a3b8;text-align:center;margin:16px 0 8px">' + (primary ? '別のアプリの場合はこちら' : 'お使いのアプリを選んでください') + '</div>'
      + others.join('')
      + '<div style="font-size:11px;line-height:1.8;color:#94a3b8;margin-top:18px">※ このリンクは1回だけ有効です。画面を閉じてしまった場合は、お手数ですが会社のご担当者にもう一度ご依頼ください。</div>'
      + '</div>';
    document.body.appendChild(d);
  }
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', render);
  else render();
})();
</script>

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
:root {
  --bg: #f8fafc; --bg2: #ffffff;
  --navy: #1e3a5f; --navy2: #2d6cb4;
  --t1: #0f172a; --t2: #475569; --t3: #94a3b8;
  --border: #e2e8f0;
  --ok-bg: #dcfce7; --ok: #15803d;
  --f: 'Noto Sans JP', 'Helvetica Neue', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0 }
body {
  background: linear-gradient(180deg, var(--bg) 0%, #eef2f7 100%);
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  font-family: var(--f); padding: 32px 20px;
}
.container { max-width: 720px; width: 100% }

/* Header */
.header { display: flex; align-items: center; gap: 14px; margin-bottom: 8px }
.header-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(135deg, var(--navy), var(--navy2));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(30,58,95,.2); font-size: 26px;
}
.header-title { font-size: 22px; font-weight: 900; color: var(--t1); letter-spacing: -0.5px }
.header-sub { font-size: 11px; color: var(--t3); font-weight: 500; margin-top: 1px }
.header-badge { margin-left: auto; font-size: 10px; font-weight: 700; background: #e0f2fe; color: #0369a1; padding: 5px 12px; border-radius: 6px }
.divider { height: 1px; margin: 18px 0 24px; background: linear-gradient(90deg, var(--navy2), transparent); opacity: 0.2 }

/* Diagram */
.diagram { position: relative; padding: 0 0 20px }
.diagram svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0 }

/* Row layout */
.row-top, .row-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; position: relative; z-index: 1 }
.row-center { display: flex; justify-content: center; margin: 0; position: relative; z-index: 1 }
.row-label-left, .row-label-right { position: absolute; z-index: 2 }

/* Cards shared */
a.node {
  display: flex; flex-direction: column; align-items: center;
  text-decoration: none; color: var(--t1); transition: all .2s;
  padding: 16px 12px 14px; border-radius: 14px;
  background: var(--bg2); border: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,.04); text-align: center;
}
a.node:hover { border-color: var(--navy2); box-shadow: 0 6px 20px rgba(45,108,180,.1); transform: translateY(-2px) }

/* Hub (center) */
a.node-hub {
  display: flex; flex-direction: column; align-items: center;
  text-decoration: none; color: var(--t1); transition: all .2s;
  padding: 18px 32px 16px; border-radius: 16px;
  background: linear-gradient(135deg, #f0f7ff, #fff); border: 2px solid var(--navy2);
  box-shadow: 0 2px 12px rgba(45,108,180,.12); text-align: center;
}
a.node-hub:hover { box-shadow: 0 8px 28px rgba(45,108,180,.18); transform: translateY(-2px) }

/* App icon */
.n-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; margin-bottom: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.n-name { font-size: 12px; font-weight: 700; color: var(--t1); line-height: 1.3 }
.n-type { font-size: 9px; color: var(--t3); margin-top: 2px; font-weight: 500 }
.n-platform { display: inline-flex; align-items: center; gap: 3px; margin-top: 6px; font-size: 9px; color: var(--t3); background: #f1f5f9; padding: 2px 8px; border-radius: 4px }
.badge { font-size: 9px; font-weight: 700; padding: 3px 8px; border-radius: 4px; white-space: nowrap; margin-top: 6px }
.b-ok { background: var(--ok-bg); color: var(--ok) }
.b-wip { background: #fef3c7; color: #92400e } /* v3.9.7: 「完成」と区別する＝DEC-541（1号は土台） */

/* Edge labels */
.edge-label {
  font-size: 9px; font-weight: 600; color: #7c93b0;
  background: rgba(248,250,252,.9); padding: 2px 8px; border-radius: 4px;
  white-space: nowrap; position: absolute; z-index: 3;
  border: 1px solid #e2e8f0;
}

/* Spacer for SVG lines */
.line-space { height: 52px; position: relative; z-index: 0 }
.line-space-sm { height: 36px; position: relative; z-index: 0 }

/* Side labels */
.side-label {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 9px; font-weight: 700; color: var(--t3);
  letter-spacing: 2px; writing-mode: vertical-rl;
  text-orientation: mixed;
}
.side-label.left { left: -28px }
.side-label.right { right: -28px }

.footer { text-align: center; font-size: 10px; color: var(--t3); margin-top: 28px }

@media (max-width: 520px) {
  .header-title { font-size: 18px }
  .n-icon { width: 44px; height: 44px; font-size: 20px; border-radius: 12px }
  .n-name { font-size: 11px }
  .line-space { height: 40px }
  .edge-label { font-size: 8px }
  a.node-hub { padding: 14px 20px }
}
</style>
</head>
<body>
<div class="container">

  <div class="header">
    <div class="header-icon">🛡️</div>
    <div>
      <div class="header-title">J-GUARD</div>
      <div class="header-sub">Security Management Platform</div>
    </div>
    <span class="header-badge">v3.9.10</span>
  </div>
  <div class="divider"></div>

  <div class="diagram" id="diagram">

    <!-- ── Row 1: 発注者側 ── -->
    <div style="font-size:10px;font-weight:700;color:var(--t3);letter-spacing:2px;margin-bottom:10px;padding-left:2px">🏗️ 発注者</div>
    <div class="row-top" id="row-top">
      <!-- v3.9.9 (DEC-569②): J-GUARD DESK TOP はローンチ物から外した（配信物からも除外）。発注者側は 365 の1枚。 -->
      <a class='node' href='/client_site/client_site_app_v1' id='nd-site' style='grid-column:1 / -1;width:min(100%,360px);justify-self:center'>
        <div class="n-icon" style="background:linear-gradient(135deg,#065f46,#10b981);color:#d1fae5">📋</div>
        <div class="n-name">ポケットケイビ365</div>
        <div class="n-type">配置管理・予算管理</div>
        <span class="n-platform">📱 iOS / Android</span>
        <span class="badge b-ok">完成</span>
      </a>
    </div>

    <!-- edge labels: top→center -->
    <div class="line-space" style="position:relative">
      <span class="edge-label" style="left:50%;top:50%;transform:translate(-50%,-50%)">受発注・請求・配置・署名</span>
    </div>

    <!-- ── Row 2: 統合管理（ハブ） ── -->
    <div class="row-center">
      <a class='node-hub' href='/security/security_company_unified_v3' id='nd-hub'>
        <div class="n-icon" style="background:linear-gradient(135deg,var(--navy),var(--navy2));color:#b8d4f0;box-shadow:0 3px 12px rgba(30,58,95,.2)">🖥️</div>
        <div class="n-name" style="font-size:14px">GuardHub</div>
        <div class="n-type">警備員管理・勤怠・配置・コンプライアンス</div>
        <span class="n-platform">🖥 Web</span>
        <span class="badge b-ok">更新済み</span>
      </a>
    </div>

    <!-- edge labels: center→bottom -->
    <div class="line-space" style="position:relative">
      <span class="edge-label" style="left:20%;top:50%;transform:translate(-50%,-50%)">勤怠・GPS</span>
      <span class="edge-label" style="left:50%;top:80%;transform:translate(-50%,-50%)">電子署名連携</span>
      <span class="edge-label" style="left:80%;top:50%;transform:translate(-50%,-50%)">シフト・巡回</span>
    </div>

    <!-- ── Row 3: 警備員側 ── -->
    <div style="font-size:10px;font-weight:700;color:var(--t3);letter-spacing:2px;margin-bottom:10px;padding-left:2px">🦺 警備員</div>
    <div class="row-bottom" id="row-bottom">
      <a class='node' href='https://guard.j-guard.jp/guard_apps/guard_app_facility' target="_blank" rel="noopener" id='nd-facility'>
        <div class="n-icon" style="background:linear-gradient(135deg,#1a2e3d,#305a6b);color:#9ad6f5">🏢</div>
        <div class="n-name">ポケットケイビ1号</div>
        <div class="n-type">施設警備</div>
        <span class="n-platform">📱 iOS / Android</span>
        <span class="badge b-wip">土台・巡回等は準備中</span>
      </a>
      <a class='node' href='https://guard.j-guard.jp/guard_apps/guard_app_traffic' target="_blank" rel="noopener" id='nd-traffic'>
        <div class="n-icon" style="background:linear-gradient(135deg,#3d2e1a,#6b5030);color:#f5d89a">🚧</div>
        <div class="n-name">ポケットケイビ2号</div>
        <div class="n-type">交通誘導・雑踏</div>
        <span class="n-platform">📱 iOS / Android</span>
        <span class="badge b-ok">完成</span>
      </a>
    </div>

    <!-- SVG connection lines -->
    <svg id="lines" xmlns="http://www.w3.org/2000/svg" style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0">
      <defs>
        <marker id="dot" viewBox="0 0 6 6" refX="3" refY="3" markerWidth="4" markerHeight="4"><circle cx="3" cy="3" r="2.5" fill="#bdd0e8"/></marker>
      </defs>
    </svg>
  </div>

  <div class="footer">© 2026 株式会社KSG All rights reserved.</div>
</div>

<script>
function drawLines(){
  const svg=document.getElementById('lines');
  const dg=document.getElementById('diagram');
  const dgR=dg.getBoundingClientRect();
  svg.setAttribute('viewBox',`0 0 ${dgR.width} ${dgR.height}`);
  svg.style.width=dgR.width+'px';
  svg.style.height=dgR.height+'px';

  function center(id){
    const el=document.getElementById(id);
    if(!el)return{x:0,y:0};
    const r=el.getBoundingClientRect();
    return{x:r.left+r.width/2-dgR.left, y:r.top+r.height/2-dgR.top};
  }
  function bot(id){const el=document.getElementById(id);if(!el)return{x:0,y:0};const r=el.getBoundingClientRect();return{x:r.left+r.width/2-dgR.left,y:r.bottom-dgR.top};}
  function top2(id){const el=document.getElementById(id);if(!el)return{x:0,y:0};const r=el.getBoundingClientRect();return{x:r.left+r.width/2-dgR.left,y:r.top-dgR.top};}
  function right2(id){const el=document.getElementById(id);if(!el)return{x:0,y:0};const r=el.getBoundingClientRect();return{x:r.right-dgR.left,y:r.top+r.height/2-dgR.top};}
  function left2(id){const el=document.getElementById(id);if(!el)return{x:0,y:0};const r=el.getBoundingClientRect();return{x:r.left-dgR.left,y:r.top+r.height/2-dgR.top};}

  // clear old
  svg.querySelectorAll('line,path').forEach(l=>l.remove());

  const style='stroke:#c4d5e8;stroke-width:1.5;stroke-dasharray:4,3';
  const style2='stroke:#d0dce8;stroke-width:1;stroke-dasharray:3,3';

  // site→hub (v3.9.9: DESK TOP を外したので発注者側は 365 の1本・中央へ)
  const s=bot('nd-site'), h=top2('nd-hub');
  addLine(s.x,s.y,center('nd-hub').x,h.y,style);
  // hub→facility / hub→traffic  (v3.9.7: 1号を戻したので2本に戻す)
  const hb=bot('nd-hub').y, t=top2('nd-traffic'), f=top2('nd-facility');
  addLine(center('nd-hub').x-40,hb,f.x,f.y,style);
  addLine(center('nd-hub').x+40,hb,t.x,t.y,style);
  // facility↔traffic (horizontal)
  addLine(right2('nd-facility').x+4,center('nd-facility').y-10,left2('nd-traffic').x-4,center('nd-traffic').y-10,style2);

  function addLine(x1,y1,x2,y2,st){
    const l=document.createElementNS('http://www.w3.org/2000/svg','line');
    l.setAttribute('x1',x1);l.setAttribute('y1',y1);
    l.setAttribute('x2',x2);l.setAttribute('y2',y2);
    l.setAttribute('style',st);
    l.setAttribute('marker-start','url(#dot)');
    l.setAttribute('marker-end','url(#dot)');
    svg.appendChild(l);
  }
}
drawLines();
window.addEventListener('resize',drawLines);
</script>
</body>
</html>