/* 拠点情報（/sales-office/）だけの見た目。inc/office.php が拠点情報ページでだけ読み込む。
   地図（#arkmap）は 2026-09-28 に、提案プロトタイプの section#arkmap（左の拠点一覧＋右の写真
   プレート＋県の形とピン）をそのまま移植（マスター指示。手書きの地図は廃止）。#arkmap にスコープ。
   色は試作の --blue/--red を本番の --navy/--red に、--display（Zen Old Mincho）は本番で読み込んで
   いないので見出し書体 --head に、--tint は --navy-tint に寄せている（inc/case.php の ARKA 移植と
   同じ考え方）。県の輪郭以外の線（ピンを結ぶ線・到達範囲の輪）はマスター指示で出さないため、
   試作の reach（到達範囲の輪）まわりの見た目は移植していない。 */

#arkmap.maprow{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(24px,4vw,48px);align-items:start;margin-top:18px}
@media (max-width:1000px){#arkmap.maprow{grid-template-columns:1fr;gap:clamp(18px,4vw,32px)}}

#arkmap .mapwrap{position:sticky;top:20px}
@media (max-width:1000px){#arkmap .mapwrap{order:-1;position:static}}

#arkmap .mapsvg{width:100%;height:auto;display:block}
#arkmap .pref{fill:#DCE7F3;stroke:#A9C3DC;stroke-width:1.4}
#arkmap .pref.fk{fill:#E6EDF5;stroke:#BCCEDF}
#arkmap .mapcap{font-size:13px;opacity:.6;line-height:1.8;margin-top:16px;max-width:34em}

#arkmap .plate{margin:clamp(18px,3vh,28px) 0 0}
@media (min-width:1001px){
  #arkmap .plate{position:sticky;top:20px;z-index:3;background:var(--navy-tint);padding-top:14px;margin-top:0;border-radius:12px}
  #arkmap .sites{position:relative;z-index:1}
}
@media (max-width:1000px){#arkmap .plate{display:none}}
#arkmap .plate-fr{position:relative;aspect-ratio:3/2;overflow:hidden;background:#16293C;border:1px solid var(--line);border-radius:10px}
#arkmap .plate-fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 240ms ease}
#arkmap .plate-fr img.on{opacity:1}
#arkmap .plate-cap{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:11px 2px 0;font-size:13px;line-height:1.7}
#arkmap .pc-n{font-family:var(--head);font-size:16px;color:var(--navy)}
#arkmap .pc-r{font-size:11.5px;letter-spacing:.1em;color:var(--muted)}
#arkmap .pc-i{margin-left:auto;font-size:11.5px;letter-spacing:.14em;color:var(--muted);font-feature-settings:"tnum"}

#arkmap .sthumb{display:block;width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--navy-tint);border:1px solid var(--line);border-radius:8px;align-self:center}
#arkmap .sthumb img{width:100%;height:100%;object-fit:cover;display:block}
#arkmap .sites{list-style:none;margin:clamp(18px,3vh,26px) 0 0;padding:0;border-top:1px solid var(--line)}
#arkmap .sites li{border-bottom:1px solid var(--line)}
#arkmap .sites a{display:grid;grid-template-columns:52px minmax(120px,.40fr) 1fr auto;gap:10px 14px;padding:15px 2px;text-decoration:none;color:inherit;min-height:44px;align-items:baseline;border-radius:10px;transition:background 180ms ease,padding 180ms ease}
#arkmap .sites a:hover,#arkmap .sites li.on a,#arkmap .sites li.cur a{background:var(--navy-tint);padding-inline:10px}
#arkmap .sname{font-family:var(--head);font-weight:700;font-size:clamp(15px,1.7vw,17px);color:var(--navy);white-space:nowrap}
#arkmap .sname em{display:block;font-family:var(--jp);font-style:normal;font-weight:400;font-size:11.5px;letter-spacing:.05em;color:var(--muted);margin-top:5px}
#arkmap .saddr{font-size:13px;line-height:1.85;color:var(--text)}
#arkmap .sites a::after{content:"↗";margin-left:auto;font-size:12px;opacity:.45}

@media (max-width:1000px){
  #arkmap .sites li{position:relative}
  #arkmap .sites a{grid-template-columns:76px 1fr;gap:3px 14px;align-items:center}
  #arkmap .sthumb{grid-row:1 / span 2}
  #arkmap .sname,#arkmap .saddr{grid-column:2}
  #arkmap .sites a::after{position:absolute;right:2px;top:12px;margin:0}
}
@media (max-width:700px){
  #arkmap .sites{margin-top:clamp(18px,3vh,24px)}
  #arkmap .sites a{grid-template-columns:74px 1fr;gap:2px 12px;padding:10px 2px;min-height:0;align-items:center}
  #arkmap .sites a:hover,#arkmap .sites li.on a{padding-inline:8px}
  #arkmap .sname{white-space:normal;font-size:15px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;line-height:1.5}
  #arkmap .sname em{display:inline;margin-top:0;font-size:10.5px;letter-spacing:.1em}
  #arkmap .saddr{font-size:12px;line-height:1.65;color:var(--muted)}
  #arkmap .legend-map{gap:14px;font-size:11.5px;margin-top:12px}
  #arkmap .mapcap{font-size:12px;margin-top:10px}
}

#arkmap .pinlink{cursor:pointer;pointer-events:bounding-box}
#arkmap .pins-off .pinlink{pointer-events:none;cursor:default}
#arkmap .pinhit{fill:#fff;fill-opacity:0;stroke:none}
#arkmap .pin{fill:var(--navy);transition:fill 200ms ease,r 200ms ease}
#arkmap .pin.desig{fill:#fff;stroke:var(--red);stroke-width:6}
#arkmap .pinlink:hover .pin,#arkmap .pinlink:focus-visible .pin,#arkmap .pinlink.on .pin,#arkmap .pinlink.cur .pin{fill:var(--red)}
#arkmap .pinlink:hover .pin.desig,#arkmap .pinlink.on .pin.desig{fill:#fff;stroke-width:9}

#arkmap .legend-map{display:flex;gap:22px;flex-wrap:wrap;margin:18px 0 0;font-size:12.5px;letter-spacing:.02em;color:var(--text)}
#arkmap .legend-map span{display:flex;align-items:center;gap:8px}
#arkmap .legend-map .k{width:11px;height:11px;border-radius:50%;background:var(--navy);display:block}
#arkmap .legend-map .k.desig{background:#fff;box-shadow:0 0 0 3px var(--red)}

/* 吹き出し（2026-09-29〜）：ピンまたは一覧の行にカーソル（フォーカス）を合わせたときだけ、
   ピンから斜め→横に線が伸びてローマ字名（明朝・大）＋日本語の拠点名（赤・小）を出す。
   ふだんは線なし（提案プロトタイプ index_v2_オープニング.html の #ng-intro-css のうち
   map callout 部分をそのまま移植。assets/js/office.js が pointerenter/focusin で .callout を作る）。
   Zen Old Mincho は本番で読み込んでいないため、フォールバックの明朝（Hiragino Mincho ProN／
   Yu Mincho）で表示される。 */
#arkmap .reach{display:none}
#arkmap .callout{pointer-events:none}
#arkmap .callout path{fill:none;stroke:#0E2034;stroke-width:2;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:coDraw .45s ease forwards}
#arkmap .callout .ro{font:600 44px/1 "Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;letter-spacing:.08em;fill:#0E2034;opacity:0;animation:coFade .35s ease .3s forwards}
#arkmap .callout .jp{font:700 20px/1 sans-serif;fill:#D80C18;opacity:0;animation:coFade .35s ease .4s forwards}
@keyframes coDraw{to{stroke-dashoffset:0}}
@keyframes coFade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){#arkmap .callout path{animation:none;stroke-dashoffset:0}#arkmap .callout text{animation:none;opacity:1}}