/* 自治体業務・システム・ネットワーク全体マップ
   配色・書体は nice2have（nice2h.com）のデザインシステムに揃えている。
   ノードと連携線の色だけは意味を持つので、そちらは data.js / app.js 側で管理する。 */
:root{
  /* nice2have のブランドトークン */
  --ink:#14262C; --ink-soft:#4B636D; --faint:#7E949C;
  --teal:#0097A7; --teal-bright:#12C4D6; --teal-deep:#062F36; --teal-deeper:#04232A;
  --teal-mist:#E9F5F6; --orange:#EA7D1C; --amber:#F5A94B;
  --paper:#F6FAFA; --line:#DCE9EB; --card:#fff;
  --grad-accent:linear-gradient(90deg,var(--teal-bright),var(--teal));
  --grad-warm:linear-gradient(135deg,var(--orange),var(--amber));
  --shadow-card:0 2px 10px rgba(6,47,54,.05);
  --shadow-hover:0 14px 34px rgba(6,47,54,.14);
  /* 旧トークン名の別名（既存の記述をそのまま活かすため） */
  --tl:var(--teal); --tl-d:#007A88; --or:var(--orange);
  --ln:var(--line); --bg:var(--paper); --fg:var(--ink); --mut:var(--ink-soft);
  --hd:64px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'M PLUS 1p',"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
  font-size:14px;display:flex;flex-direction:column;overflow:hidden;
  -webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-weight:800;letter-spacing:.02em}
::selection{background:var(--teal);color:#fff}
a{color:var(--teal-deep);text-underline-offset:3px;font-weight:700}
a:hover{color:var(--teal)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--orange);outline-offset:2px;border-radius:4px;
}

/* ---------- header ---------- */
header{
  position:relative;padding:12px 20px 10px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  display:flex;gap:16px;align-items:flex-start;flex:0 0 auto;
}
header::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-accent)}
.hd-txt{min-width:0;flex:1}
h1{font-size:17px;margin:0 0 4px;line-height:1.35;color:var(--teal-deep)}
.sub{
  font-size:11.5px;color:var(--ink-soft);line-height:1.75;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer;
}
.sub.open{-webkit-line-clamp:unset}
.sub::after{content:"　▾";color:var(--teal)}
.sub.open::after{content:"　▴"}
.hd-act{display:flex;gap:8px;flex:0 0 auto;align-items:center}
/* nice2have のサイトへ戻る導線。サイト側のロゴと同じ組み方 */
.brand{
  display:inline-flex;align-items:center;gap:1px;font-weight:800;font-size:14.5px;
  color:var(--ink);text-decoration:none;letter-spacing:.02em;white-space:nowrap;
  padding:6px 12px;border-radius:999px;transition:background .2s,color .2s;
}
.brand span{color:var(--teal);font-size:13px}
.brand:hover{background:var(--teal-mist);color:var(--teal-deep)}
.btn{
  border:1px solid var(--line);background:var(--card);color:var(--ink-soft);
  border-radius:999px;padding:8px 18px;font-size:12.5px;cursor:pointer;font-weight:800;
  font-family:inherit;white-space:nowrap;line-height:1.4;
  transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s;
}
.btn:hover{background:var(--teal-mist);color:var(--teal-deep);border-color:rgba(0,151,167,.35)}
.btn:active{transform:translateY(1px)}
.btn.pri{
  background:var(--grad-warm);border-color:transparent;color:#fff;
  box-shadow:0 3px 10px rgba(234,125,28,.3);
}
.btn.pri:hover{background:var(--grad-warm);color:#fff;transform:translateY(-1px);box-shadow:0 6px 16px rgba(234,125,28,.4)}
.btn.teal{background:linear-gradient(135deg,var(--teal),#007A88);border-color:transparent;color:#fff;box-shadow:0 3px 10px rgba(0,151,167,.3)}
.btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}

/* ---------- nav ---------- */
nav{
  display:flex;gap:8px;padding:6px 20px;background:var(--card);
  border-bottom:1px solid var(--line);flex:0 0 auto;align-items:center;
}
/* タブだけを横スクロールさせ、表示設定は外に出しておく（重ならない） */
.tabs{
  display:flex;gap:4px;flex:1 1 auto;min-width:0;
  overflow-x:auto;scrollbar-width:none;align-items:center;
}
.tabs::-webkit-scrollbar{display:none}
nav button[data-t]{
  border:0;background:none;padding:8px 16px;font-size:13px;cursor:pointer;border-radius:999px;
  color:var(--ink-soft);font-family:inherit;white-space:nowrap;font-weight:700;
  transition:background .2s,color .2s;
}
nav button[data-t]:hover{color:var(--teal-deep);background:var(--teal-mist)}
nav button[data-t].on{color:var(--teal-deep);background:var(--teal-mist);font-weight:800}
#pt{flex:none;display:none;padding:6px 14px;font-size:12px}

/* ---------- control panel ---------- */
.panel{
  display:flex;flex-wrap:wrap;gap:8px 22px;padding:9px 20px;background:var(--card);
  border-bottom:1px solid var(--line);flex:0 0 auto;align-items:flex-start;
}
.grp{font-size:12px}
.grp>b{
  display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--teal);
  margin-bottom:4px;font-weight:800;letter-spacing:.14em;
}
.grp>b::before{content:'';width:16px;height:3px;border-radius:2px;background:var(--grad-accent);flex:none}
.panel label{margin-right:10px;cursor:pointer;white-space:nowrap;display:inline-block;color:var(--ink-soft)}
.panel input[type=radio],.panel input[type=checkbox]{vertical-align:-1px;margin-right:3px;accent-color:var(--teal)}
.srch{display:flex;align-items:center}
.sbox{position:relative;display:inline-flex;align-items:center}
#q{
  font-family:inherit;font-size:13px;padding:6px 28px 6px 14px;width:210px;
  border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);
  transition:border-color .2s,box-shadow .2s,background .2s;
}
#q::-webkit-search-cancel-button,#q::-webkit-search-decoration{-webkit-appearance:none;display:none}
#q:focus{outline:none;border-color:var(--teal);background:#fff;box-shadow:0 0 0 3px rgba(0,151,167,.15)}
#qx{position:absolute;right:8px;border:0;background:none;color:var(--faint);cursor:pointer;
  font-size:15px;line-height:1;padding:2px 4px;display:none}
#qn{font-size:11px;color:var(--ink-soft);margin-left:8px;white-space:nowrap;font-weight:700}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11px;margin:0 4px 3px 0;font-weight:700}

/* ---------- main / tabs ---------- */
main{flex:1 1 auto;min-height:0;position:relative}
.tab{display:none;position:absolute;inset:0}
.tab.on{display:block}
#t-det{overflow:auto;padding:16px 20px 60px;-webkit-overflow-scrolling:touch}

/* ---------- map ---------- */
#mapwrap{
  position:absolute;inset:10px 20px;background:#fff;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;touch-action:none;box-shadow:var(--shadow-card);
}
#map{width:100%;height:100%;display:block;cursor:grab}
#map.grabbing{cursor:grabbing}
.cbox{fill:#FBFDFD;stroke:#C6D8DB;stroke-dasharray:4 3}
.cbox.nwbox{fill:var(--teal-mist);stroke:var(--teal);stroke-dasharray:none}
.clab{font-size:12px;font-weight:800;fill:var(--teal)}
.nlab{fill:var(--ink);pointer-events:none;user-select:none}
.nlab.nw{font-weight:800}
.nrect{stroke-width:1.2;cursor:pointer}
.nrect.nw{stroke-width:2}
.edge{fill:none;pointer-events:none}
.dim{opacity:.10}
.hit{opacity:0;fill:#000}
g.nd.hl .nrect{stroke-width:2.6}
g.nd.hl .halo{stroke:var(--amber);stroke-width:5;fill:none;opacity:.9}
.halo{display:none}
g.nd.hl .halo{display:block}

#zoomctl{
  position:absolute;right:32px;bottom:24px;display:flex;flex-direction:column;gap:6px;z-index:6;
}
#zoomctl button{
  width:36px;height:36px;border:1px solid var(--line);background:rgba(255,255,255,.95);
  border-radius:10px;cursor:pointer;font-size:15px;color:var(--teal-deep);font-family:inherit;
  box-shadow:var(--shadow-card);line-height:1;padding:0;font-weight:800;
  transition:background .2s,border-color .2s;
}
#zoomctl button:hover{background:var(--teal-mist);border-color:rgba(0,151,167,.35)}
#zoomctl button.wide{width:36px;font-size:10.5px}
#zhint{
  position:absolute;left:32px;bottom:24px;z-index:6;font-size:11px;color:var(--ink-soft);
  background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:999px;padding:6px 14px;
  pointer-events:none;box-shadow:var(--shadow-card);
}

/* ---------- detail table ---------- */
table{
  border-collapse:separate;border-spacing:0;width:100%;background:#fff;font-size:12.5px;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-card);
}
th,td{border-bottom:1px solid var(--line);padding:9px 11px;vertical-align:top;text-align:left;line-height:1.7}
td+td,th+th{border-left:1px solid var(--line)}
tr:last-child td{border-bottom:none}
th{background:var(--teal-mist);color:var(--teal-deep);font-weight:800;position:sticky;top:0;z-index:2}
td ul{margin:0;padding-left:16px}
td li{margin-bottom:2px}
.ab{color:var(--faint);font-size:11px}
.did{color:var(--faint);font-family:ui-monospace,SFMono-Regular,monospace;letter-spacing:.02em}
.rowfb{border:1px solid var(--line);background:#fff;border-radius:999px;cursor:pointer;
  font-size:11px;color:var(--ink-soft);padding:3px 11px;font-family:inherit;white-space:nowrap;
  margin-top:5px;font-weight:700;transition:border-color .2s,color .2s,background .2s}
.rowfb:hover{border-color:rgba(0,151,167,.4);color:var(--teal-deep);background:var(--teal-mist)}
#nores{padding:40px 4px;color:var(--ink-soft);font-size:13px}

/* ---------- tooltip ---------- */
#tip{
  position:fixed;display:none;background:var(--teal-deep);color:#fff;font-size:11.5px;
  padding:10px 13px;border-radius:8px;max-width:300px;line-height:1.75;z-index:30;pointer-events:none;
  box-shadow:0 8px 24px rgba(6,47,54,.28);
}

/* ---------- drawer ---------- */
#drw{
  position:fixed;top:0;right:0;width:min(420px,100%);height:100%;background:#fff;
  border-left:1px solid var(--line);box-shadow:-8px 0 28px rgba(6,47,54,.14);
  padding:24px 22px 40px;overflow-y:auto;display:none;z-index:40;
  -webkit-overflow-scrolling:touch;
}
#drw::before{content:'';position:fixed;top:0;right:0;width:min(420px,100%);height:4px;background:var(--grad-accent);z-index:41}
#drw.on{display:block}
#drw h2{font-size:17px;margin:0 44px 3px 0;color:var(--teal-deep)}
#drw .cl{color:var(--faint);font-size:12px;margin-bottom:13px}
#drw h3{
  position:relative;font-size:12.5px;color:var(--teal-deep);margin:20px 0 8px;
  letter-spacing:.04em;padding-left:12px;
}
#drw h3::before{content:'';position:absolute;left:0;top:2px;bottom:2px;width:4px;border-radius:2px;background:var(--grad-accent)}
#drw ul{margin:0;padding-left:18px;font-size:13px;line-height:1.9;color:var(--ink-soft)}
#drw table{font-size:12px}
#drw td{padding:6px 8px}
#cls{position:absolute;top:16px;right:16px;border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:5px 14px;cursor:pointer;font-family:inherit;font-size:12px;color:var(--ink-soft);font-weight:700;z-index:42}
#cls:hover{background:var(--teal-mist);color:var(--teal-deep);border-color:rgba(0,151,167,.35)}
.drw-act{display:flex;gap:8px;margin:20px 0 4px;flex-wrap:wrap}

/* ---------- modal ---------- */
#ovl{position:fixed;inset:0;background:rgba(4,35,42,.5);backdrop-filter:blur(2px);z-index:50;display:none}
#ovl.on{display:block}
#modal{
  position:fixed;z-index:51;display:none;background:#fff;border-radius:16px;overflow:hidden;
  width:min(560px,calc(100% - 28px));max-height:min(88vh,760px);overflow-y:auto;
  left:50%;top:50%;transform:translate(-50%,-50%);
  box-shadow:0 24px 60px rgba(6,47,54,.28);padding:26px 24px 24px;
  -webkit-overflow-scrolling:touch;
}
#modal::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:var(--grad-accent)}
#modal.on{display:block}
#modal h2{font-size:17px;margin:0 40px 7px 0;color:var(--teal-deep)}
#modal .lead{font-size:12.5px;color:var(--ink-soft);line-height:1.85;margin:0 0 16px}
#mcls{position:absolute;top:18px;right:16px;border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:5px 14px;cursor:pointer;font-family:inherit;font-size:12px;color:var(--ink-soft);font-weight:700}
#mcls:hover{background:var(--teal-mist);color:var(--teal-deep);border-color:rgba(0,151,167,.35)}
.fld{margin-bottom:14px}
.fld>label{display:block;font-size:12px;font-weight:800;color:var(--teal-deep);margin-bottom:6px}
.req{color:var(--orange);font-size:11px;font-weight:700;margin-left:5px}
.opt{color:var(--faint);font-size:11px;font-weight:400;margin-left:5px}
.fld input[type=text],.fld input[type=email],.fld select,.fld textarea{
  width:100%;font-family:inherit;font-size:13.5px;padding:10px 12px;line-height:1.7;
  border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);
  transition:border-color .2s,box-shadow .2s;
}
.fld textarea{min-height:112px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,151,167,.15)}
.cnt{font-size:11px;color:var(--faint);text-align:right;margin-top:4px}
.cnt.over{color:#C0392B}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ctx{
  background:var(--paper);border:1px solid var(--line);border-left:4px solid;
  border-image:linear-gradient(180deg,var(--teal-bright),var(--teal)) 1;
  border-radius:0 10px 10px 0;padding:11px 14px;
  font-size:11.5px;color:var(--teal-deep);line-height:1.85;margin-bottom:16px;
}
.mact{
  position:sticky;bottom:-24px;z-index:2;display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin:18px -24px -24px;padding:14px 24px;background:#fff;border-top:1px solid var(--line);
}
.msg{font-size:12.5px;line-height:1.7}
.msg.err{color:#C0392B}
.msg.ok{color:var(--tl-d)}
#done{text-align:center;padding:18px 0 8px}
#done .big{font-size:16px;font-weight:800;margin-bottom:10px;color:var(--teal-deep)}
#done .rid{font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;color:var(--ink-soft);
  background:var(--teal-mist);border-radius:999px;padding:7px 16px;display:inline-block;margin:8px 0 16px}
.priv{font-size:11px;color:var(--faint);line-height:1.8;margin:14px 0 0}

/* ---------- toast ---------- */
#toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:60;
  background:var(--teal-deep);color:#fff;font-size:12.5px;padding:11px 20px;border-radius:999px;
  opacity:0;pointer-events:none;transition:opacity .18s;font-weight:700;
  box-shadow:0 10px 28px rgba(6,47,54,.3);
}
#toast.on{opacity:1}

/* ---------- changelog ---------- */
#t-log{overflow:auto;padding:20px 20px 60px}
.logwrap{max-width:820px}
.logwrap h2{position:relative;font-size:17px;margin:0 0 8px;padding-left:16px;color:var(--teal-deep)}
.logwrap h2::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:5px;border-radius:3px;background:var(--grad-accent)}
.logwrap p.note{font-size:12.5px;color:var(--ink-soft);line-height:1.9;margin:0 0 22px}
.log-e{
  border-left:3px solid;border-image:linear-gradient(180deg,var(--teal-bright),rgba(0,151,167,.15)) 1;
  padding:0 0 20px 16px;margin-left:4px;
}
.log-e .d{font-size:11.5px;color:var(--faint);font-family:ui-monospace,monospace;letter-spacing:.04em}
.log-e h3{font-size:14px;margin:3px 0 7px;color:var(--ink)}
.log-e ul{margin:0;padding-left:18px;font-size:13px;line-height:1.9;color:var(--ink-soft)}

/* ---------- responsive ---------- */
/* iPhone のノッチ・ホームバーの逃げ */
@supports(padding:max(0px)){
  header{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
}

@media (max-width:1000px){
  /* 凡例が2段になると縦を食うので、狭くなったら文字を詰める */
  .pill{font-size:10.5px;padding:2px 9px}
  .grp{font-size:11.5px}
}

@media (max-width:860px){
  header{padding:11px 14px 10px;gap:10px;flex-wrap:wrap}
  h1{font-size:16px}
  .sub{-webkit-line-clamp:1}
  nav{padding:6px 14px}
  .panel{padding:10px 14px;gap:8px 16px}
  #mapwrap{inset:10px 12px}
  #t-det{padding:14px 14px 60px}
  #zoomctl{right:20px;bottom:18px}
  #zhint{left:20px;bottom:18px;max-width:calc(100% - 100px)}
  #q{width:150px}
  /* 7列の一覧は詰めずに横スクロールさせる */
  #t-det{overflow:auto}
  #t-det table{min-width:760px}
}
@media (max-width:640px){
  header{padding:10px 14px 9px;gap:8px}
  h1{font-size:15.5px;line-height:1.4}
  .hd-act .btn.ghost{display:none}
  .hd-act .btn.pri{padding:8px 15px;font-size:12px}
  .brand{font-size:13.5px;padding:5px 8px}
  /* タブだけ横スクロール。表示設定はその外なので、隠れることも重なることもない */
  nav{padding:6px 14px;gap:6px}
  nav button[data-t]{padding:8px 12px;font-size:12.5px}
  #pt{display:block;padding:7px 12px;font-size:11.5px}
  .panel{display:none}
  .panel.open{display:flex}
  .panel{padding:12px 14px 14px;gap:10px 16px}
  .panel label{margin-right:12px;padding:2px 0;display:inline-block}
  #q{width:100%}
  .sbox{width:100%}
  .srch{width:100%;flex-wrap:wrap;gap:4px}
  .grp{flex:1 1 100%}
  #drw{width:100%;top:auto;bottom:0;height:min(82%,100%);border-left:0;
    border-top:1px solid var(--line);border-radius:16px 16px 0 0;
    box-shadow:0 -8px 30px rgba(6,47,54,.2);
    padding:22px 16px calc(40px + env(safe-area-inset-bottom))}
  #drw::before{position:absolute;width:100%;border-radius:16px 16px 0 0}
  #modal{border-radius:16px 16px 0 0;top:auto;bottom:0;left:0;transform:none;
    width:100%;max-height:92vh;padding:24px 16px 24px}
  .mact{margin:16px -16px -24px;padding:13px 16px calc(13px + env(safe-area-inset-bottom));bottom:-24px}
  #toast{bottom:calc(28px + env(safe-area-inset-bottom))}
  #zoomctl{bottom:calc(18px + env(safe-area-inset-bottom))}
  #zhint{bottom:calc(18px + env(safe-area-inset-bottom))}
  th{font-size:11.5px}
  td,th{padding:7px 8px}
  table{font-size:12px}
  #t-det table{min-width:700px}
}

@media (max-width:400px){
  header{padding:9px 12px 8px}
  h1{font-size:14.5px}
  .sub{font-size:11px}
  .hd-act .btn.pri{padding:7px 13px;font-size:11.5px}
  .brand{font-size:12.5px;padding:5px 6px}
  nav{padding:5px 12px;gap:5px}
  nav button[data-t]{padding:7px 10px;font-size:11.5px}
  #pt{padding:6px 10px;font-size:11px}
  #mapwrap{inset:8px 8px}
  #t-det,#t-log{padding-left:12px;padding-right:12px}
  #zoomctl{right:14px}
  #zoomctl button{width:34px;height:34px}
  #zhint{left:14px;font-size:10.5px;padding:5px 11px}
}

/* 指で触る端末では、線に重なる当たり判定を少し広げる */
@media (hover:none){
  .rowfb{padding:5px 13px}
  nav button[data-t]{padding-top:10px;padding-bottom:10px}
}
@media print{
  nav,.panel,.hd-act,#zoomctl,#zhint,#drw,#ovl,#modal,#toast{display:none!important}
  body{overflow:visible;height:auto}
  main{position:static}
  .tab{position:static;display:none}
  .tab.on{display:block}
  #mapwrap{position:static;border:0;box-shadow:none}
  header::before{display:none}
}