/* ============ あきないマップ — 冒険地図テーマ ============ */
:root {
  --ink: #1f2a33;
  --ink-soft: #64748b;
  --paper: #f5f7f9;
  --paper-deep: #eceff3;
  --paper-edge: #dbe2e8;
  --gold: #0f766e;
  --goods: #059669;
  --capex: #d97706;
  --opex: #e11d48;
  --hq-glow: #ffffff;
  --surface: rgba(255, 255, 255, .72);
  --surface-2: #ffffff;
  --surface-solid: #ffffff;
  --surface-border: rgba(30, 42, 51, .1);
  --grad-a: rgba(255, 255, 255, .95);
  --grad-b: rgba(246, 248, 250, .95);
  font-size: 15px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body, #app { height: 100%; }
body {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 20% 10%, #f8f1de 0%, var(--paper) 45%, var(--paper-deep) 100%);
  overflow: hidden;
}
h1, h2, h3, .serif {
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.01em;
}
a { color: var(--gold); }
button { font-family: inherit; cursor: pointer; }

/* ============ トップページ ============ */
.home {
  height: 100%;
  overflow-y: auto;
  padding: 48px 24px 80px;
}
.home-inner { max-width: 900px; margin: 0 auto; }
.hero { text-align: center; margin-bottom: 14px; }
.hero .compass { font-size: 3.2rem; }
.hero h1 { font-size: 2.3rem; margin: 6px 0 10px; }
.hero .sub { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.9; }
.free-banner {
  display: inline-block;
  margin: 18px auto 34px;
  padding: 7px 22px;
  border: 2px solid var(--gold);
  border-radius: 999px;
  color: var(--gold);
  font-weight: 700;
  background: var(--surface);
}
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--paper-edge);
  border-radius: 12px;
  padding: 20px 20px 16px;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  position: relative;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(90, 70, 30, .18);
  border-color: var(--gold);
}
.card .c-icon { min-height: 0; }
.card h2 { font-size: 1.25rem; margin: 8px 0 6px; }
.card .tagline { color: var(--ink-soft); font-size: .88rem; line-height: 1.7; min-height: 3em; }
.card .stats { margin-top: 12px; font-size: .8rem; color: var(--gold); display: flex; gap: 14px; }
.card .go { position: absolute; right: 16px; bottom: 12px; font-size: 1.1rem; color: var(--gold); }
.home-foot { margin-top: 44px; text-align: center; color: var(--ink-soft); font-size: .82rem; line-height: 2; }

.card .style-tag {
  font-size: .62rem; color: var(--gold); border: 1px solid var(--gold);
  border-radius: 999px; padding: 1px 8px; margin-left: 8px; vertical-align: middle;
}
.child-links { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.child-chip {
  font-size: .74rem; font-weight: 700; color: var(--gold);
  border: 1.5px dashed var(--gold); border-radius: 999px; padding: 3px 12px;
  transition: all .12s;
}
.child-chip:hover { background: var(--gold); color: #fff; }

.coverage { display: block; margin: 34px auto 0; max-width: 560px; text-decoration: none; }
.cov-more { text-align: center; font-size: .76rem; color: var(--gold); margin-top: 7px; font-weight: 700; }
.coverage:hover .cov-more { text-decoration: underline; }

/* ============ 全銘柄索引 ============ */
#dir-search {
  font-family: inherit; font-size: .95rem; padding: 9px 18px;
  border: 1.5px solid var(--paper-edge); border-radius: 999px;
  background: var(--surface-2); color: var(--ink);
  width: min(420px, 90%); margin-top: 14px;
}
#dir-search:focus { outline: none; border-color: var(--gold); }
.dir-sec {
  background: var(--surface);
  border: 1.5px solid var(--paper-edge);
  border-radius: 10px;
  margin-bottom: 10px;
  padding: 4px 16px;
}
.dir-sec summary {
  cursor: pointer; font-weight: 700; font-size: .95rem; padding: 8px 0;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
}
.dir-count { font-size: .74rem; color: var(--gold); font-weight: 600; margin-left: 8px; }
.dir-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 14px; }
.dir-chip {
  font-size: .76rem; color: var(--ink-soft);
  border: 1px solid var(--paper-edge); border-radius: 999px;
  padding: 3px 10px; background: var(--surface);
  text-decoration: none;
}
.dir-chip .dir-code { font-size: .64rem; opacity: .6; }
.dir-chip.covered {
  color: var(--ink); border-color: var(--gold); font-weight: 700;
  background: rgba(200,162,74,.15);
}
.dir-chip.covered:hover { background: var(--gold); color: #fff; }
.dir-legend { display: inline-block; margin-top: 6px; }
.cov-label { font-size: .82rem; color: var(--ink-soft); text-align: center; margin-bottom: 8px; }
.cov-label strong { color: var(--gold); font-size: 1.05rem; margin: 0 2px; }
.cov-bar {
  height: 10px; border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--paper-edge);
  overflow: hidden;
}
.cov-fill {
  height: 100%; border-radius: 999px;
  background: var(--gold);
  transition: width .6s ease;
}

.planned { margin-top: 36px; text-align: center; }
.planned h3 { font-size: .85rem; color: var(--ink-soft); font-weight: 600; margin-bottom: 12px; }
.planned-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.planned-chip {
  font-size: .78rem; color: var(--ink-soft);
  border: 1.5px dashed var(--paper-edge); border-radius: 999px; padding: 4px 14px;
  background: rgba(255,255,255,.25); cursor: help;
}

.about-sec {
  background: var(--surface);
  border: 1.5px solid var(--paper-edge);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 16px;
  max-width: 640px;
  margin-left: auto; margin-right: auto;
}
.about-sec h2 { font-size: 1.05rem; margin-bottom: 8px; }
.about-sec p { font-size: .88rem; line-height: 2; color: var(--ink); }

/* ============ マップ画面レイアウト ============ */
.mapapp { height: 100%; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  background: linear-gradient(var(--grad-a), var(--grad-b));
  border-bottom: 2px solid var(--paper-edge);
  flex-wrap: wrap;
  z-index: 5;
}
.topbar .home-link {
  text-decoration: none; font-size: .9rem; color: var(--ink-soft);
  border: 1px solid var(--paper-edge); border-radius: 8px; padding: 5px 10px;
  background: var(--surface);
}
.topbar .home-link:hover { color: var(--gold); border-color: var(--gold); }
.topbar .share-btn { font-family: inherit; cursor: pointer; white-space: nowrap; }
.topbar h1 { font-size: 1.25rem; }
.topbar .title-wrap { display: flex; align-items: baseline; min-width: 0; }
.topbar .tag { font-size: .75rem; color: var(--ink-soft); font-weight: normal; margin-left: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#map-search {
  font-family: inherit; font-size: .88rem; padding: 6px 12px;
  border: 1.5px solid var(--paper-edge); border-radius: 999px;
  background: var(--surface-2); color: var(--ink);
  width: 210px;
}
#map-search:focus { outline: none; border-color: var(--gold); }
#map-search.miss { border-color: var(--opex); }
.topbar select {
  font-family: inherit; font-size: .9rem; padding: 5px 8px;
  border: 1px solid var(--paper-edge); border-radius: 8px;
  background: var(--surface-2); color: var(--ink);
}
.spacer { flex: 1; }

.filters { display: flex; gap: 6px; }
.filters button {
  border: 1.5px solid var(--paper-edge);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: .85rem;
  transition: all .12s;
}
.filters button:hover { border-color: var(--gold); color: var(--ink); }
.filters button.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filters button .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.dot.goods { background: var(--goods); }
.dot.capex { background: var(--capex); }
.dot.opex  { background: var(--opex); }

.map-wrap { position: relative; flex: 1; overflow: hidden; }
svg.mapsvg { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
svg.mapsvg.dragging { cursor: grabbing; }

/* ============ 地図の地形 ============ */
.terrain circle.ring {
  fill: none;
  stroke: var(--gold);
  stroke-opacity: .18;
  stroke-width: 1.5;
  stroke-dasharray: 3 7;
}
.terrain .sector-line { stroke: var(--gold); stroke-opacity: .08; stroke-width: 1; }
.compass text { font-family: "Hiragino Mincho ProN", serif; fill: var(--gold); }

/* ============ エッジ ============ */
.edge path.line { fill: none; stroke-width: 2.4; transition: opacity .2s; }
.edge.flow-goods path.line { stroke: var(--goods); stroke-dasharray: 1 7; stroke-linecap: round; stroke-width: 2.8; }
.edge.flow-capex path.line { stroke: var(--capex); stroke-dasharray: 8 6; animation: flowdash 1.1s linear infinite; }
.edge.flow-opex  path.line { stroke: var(--opex);  stroke-dasharray: 8 6; animation: flowdash 0.8s linear infinite; }
@keyframes flowdash { to { stroke-dashoffset: -14; } }
.edge path.hit { fill: none; stroke: transparent; stroke-width: 18; cursor: pointer; }
.edge text.elabel {
  text-anchor: middle;
  font-size: calc(10px * var(--lblk, 1));
  fill: var(--ink-soft);
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 3px;
  stroke-linejoin: round;
  opacity: .88;
  transition: opacity .3s;
  pointer-events: none;
}
svg.near .edge text.elabel { opacity: 1; }
.edge { opacity: .8; }
.edge:hover { opacity: 1; }
.edge:hover path.line { stroke-width: 4; }

/* フロー種別フィルタ */
.map-wrap[data-filter="goods"] .edge:not(.flow-goods),
.map-wrap[data-filter="capex"] .edge:not(.flow-capex),
.map-wrap[data-filter="opex"]  .edge:not(.flow-opex) {
  opacity: .05; pointer-events: none;
}

/* ホバー時のフォーカス */
svg.focus .edge:not(.lit) { opacity: .06; }
svg.focus .node:not(.lit) { opacity: .3; }
svg.focus .edge.lit { opacity: 1; }
svg.focus .edge.lit path.line { stroke-width: 3.6; }

/* ============ ノード ============ */
.node { cursor: pointer; transition: opacity .2s; }
.node circle.body {
  fill: var(--hq-glow);
  stroke: var(--ink);
  stroke-width: 2;
  filter: drop-shadow(0 3px 5px rgba(80, 60, 20, .3));
  transition: stroke-width .12s;
}
.node:hover circle.body { stroke-width: 3.5; stroke: var(--gold); }
.node.center circle.body { stroke-width: 3; fill: var(--hq-glow); }
.node circle.halo { fill: var(--gold); opacity: 0; transition: opacity .15s; }
.node:hover circle.halo { opacity: .15; }
.node text { user-select: none; }
.node text.icon { text-anchor: middle; }
.node text.role {
  text-anchor: middle;
  font-weight: 700;
  font-size: 15px;
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.node.center text.role { font-size: 18px; }
.node .count-badge circle { fill: var(--gold); }
.node .count-badge text { fill: #fff; font-size: 11px; text-anchor: middle; font-weight: 700; }

/* 登場アニメーション */
.node { animation: pop .5s backwards; }
@keyframes pop {
  from { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(.6); }
  to   { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(1); }
}

/* ============ 凡例・操作 ============ */
.legend {
  position: absolute; left: 14px; bottom: 14px;
  background: rgba(248, 241, 222, .92);
  border: 1.5px solid var(--paper-edge);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: .78rem;
  color: var(--ink-soft);
  line-height: 1.9;
  pointer-events: none;
}
.legend .row { display: flex; align-items: center; gap: 8px; }
.legend .swatch { width: 26px; height: 0; border-top: 3px solid; border-radius: 2px; }
.legend .swatch.goods { border-color: var(--goods); border-top-style: dotted; }
.legend .swatch.capex { border-color: var(--capex); border-top-style: dashed; }
.legend .swatch.opex { border-color: var(--opex); border-top-style: dashed; }
.legend .hint { margin-top: 6px; font-size: .72rem; opacity: .8; }

.zoomctl {
  position: absolute; right: 14px; bottom: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.zoomctl button {
  width: 38px; height: 38px;
  border: 1.5px solid var(--paper-edge);
  border-radius: 10px;
  background: rgba(248, 241, 222, .95);
  color: var(--ink);
  font-size: 1.1rem;
  transition: all .12s;
}
.zoomctl button:hover { border-color: var(--gold); color: var(--gold); }

/* ============ ツールチップ ============ */
.tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--surface-solid);
  border: 1.5px solid var(--gold);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: .82rem;
  max-width: 280px;
  box-shadow: 0 6px 18px rgba(80, 60, 20, .25);
  opacity: 0;
  transition: opacity .1s;
  z-index: 20;
  line-height: 1.6;
}
.tooltip.show { opacity: 1; }
.tooltip .t-flow { font-weight: 700; font-size: .72rem; }
.tooltip .t-flow.goods { color: var(--goods); }
.tooltip .t-flow.capex { color: var(--capex); }
.tooltip .t-flow.opex { color: var(--opex); }
.tooltip .t-amount { color: var(--ink-soft); font-size: .76rem; margin-top: 2px; }

/* ============ 詳細パネル ============ */
.panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 360px;
  max-width: 92vw;
  background: linear-gradient(var(--grad-a), var(--grad-b));
  border-left: 2px solid var(--paper-edge);
  box-shadow: -8px 0 24px rgba(80, 60, 20, .15);
  transform: translateX(105%);
  transition: transform .25s ease;
  overflow-y: auto;
  z-index: 10;
  padding: 20px 22px 40px;
}
.panel.open { transform: translateX(0); }
.panel .close {
  position: absolute; top: 12px; right: 14px;
  border: none; background: none; font-size: 1.4rem; color: var(--ink-soft);
}
.panel .close:hover { color: var(--ink); }
.panel .p-icon { font-size: 2rem; }
.panel h2 { font-size: 1.3rem; margin: 4px 0 4px; }
.panel .p-layer {
  display: inline-block; font-size: .72rem; color: var(--gold);
  border: 1px solid var(--gold); border-radius: 999px; padding: 2px 10px;
  margin-bottom: 12px;
}
.panel .p-desc { font-size: .88rem; line-height: 1.9; color: var(--ink); margin-bottom: 6px; }
.panel .p-note { font-size: .78rem; color: var(--ink-soft); line-height: 1.7; margin-bottom: 6px; }
.panel .portal-link {
  display: block;
  margin: 10px 0 4px;
  padding: 10px 14px;
  border: 1.5px dashed var(--gold);
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: .88rem;
  background: var(--surface-2);
  transition: all .15s;
}
.panel .portal-link:hover { background: var(--gold); color: #fff; }
.panel h3 {
  font-size: .95rem; margin: 18px 0 8px;
  border-bottom: 1px dashed var(--paper-edge); padding-bottom: 4px;
}
.panel ul { list-style: none; }
.panel .company {
  padding: 11px 10px;
  margin: 6px 0;
  font-size: .88rem;
  background: var(--surface);
  border: 1px solid rgba(217,196,147,.7);
  border-radius: 10px;
}
.panel .company.none { color: var(--ink-soft); font-size: .8rem; border: none; background: none; }
.panel .company .c-main { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-weight: 700; font-size: .95rem; }
.panel .company a { text-decoration: none; }
.panel .company a:hover { text-decoration: underline; }
.panel .company .fin { font-size: .78rem; color: var(--ink); margin-top: 5px; }
.panel .company .fin.note-only { color: var(--ink-soft); }
.panel .company .fin-asof { opacity: .65; margin-left: 5px; font-size: .7rem; }
.panel .company .c-meta { font-size: .74rem; color: var(--ink-soft); margin-top: 4px; }
.panel .company .c-biz { color: var(--ink); }
.panel .company .ticker {
  font-size: .68rem; background: var(--paper-deep); border-radius: 4px;
  padding: 0 5px; color: var(--ink-soft); font-weight: 700;
}
.panel .company .c-note { font-style: normal; opacity: .85; }

.sort-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 18px; border-bottom: 1px dashed var(--paper-edge); padding-bottom: 6px; }
.sort-row h3 { font-size: .95rem; }
.sort-select {
  font-family: inherit; font-size: .78rem; padding: 3px 6px;
  border: 1px solid var(--paper-edge); border-radius: 8px;
  background: var(--surface-2); color: var(--ink);
}
.sort-note { font-size: .68rem; color: var(--ink-soft); line-height: 1.6; margin: 6px 0 2px; }
.company-filter {
  font-family: inherit; font-size: .82rem; padding: 6px 12px;
  border: 1.5px solid var(--paper-edge); border-radius: 999px;
  background: var(--surface-2); color: var(--ink);
  width: 100%; margin: 6px 0 2px;
}
.company-filter:focus { outline: none; border-color: var(--gold); }

.seg { margin-top: 10px; }
.seg-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.seg-label {
  font-weight: 700; font-size: .84rem; color: var(--gold);
}
.seg-label::before { content: "◈ "; }
.seg-portal {
  font-size: .74rem; font-weight: 700; text-decoration: none;
  border: 1.5px dashed var(--gold); border-radius: 999px; padding: 2px 10px;
  transition: all .15s; white-space: nowrap;
}
.seg-portal:hover { background: var(--gold); color: #fff; }
.seg-desc { font-size: .72rem; color: var(--ink-soft); line-height: 1.6; margin: 2px 0; }

.preview-hint {
  margin-top: 14px; font-size: .74rem; color: var(--ink-soft);
  border-top: 1px dashed var(--paper-edge); padding-top: 8px;
}
.badge {
  font-size: .66rem; border-radius: 999px; padding: 1px 8px; font-weight: 700;
}
.badge.hiring { background: #b3541e; color: #fff; }
.badge.plan-free { background: var(--paper-deep); color: var(--ink-soft); }
.badge.plan-paid { background: var(--gold); color: #fff; }
.panel .flow-item {
  padding: 7px 0; border-bottom: 1px dotted var(--paper-edge);
  font-size: .84rem; line-height: 1.6;
}
.panel .flow-item .f-chip {
  font-size: .68rem; font-weight: 700; border-radius: 4px; padding: 1px 6px; color: #fff; margin-right: 6px;
}
.f-chip.goods { background: var(--goods); }
.f-chip.capex { background: var(--capex); }
.f-chip.opex { background: var(--opex); }
.panel .flow-item .f-peer { color: var(--gold); font-weight: 700; }
.panel .flow-item .f-amount { display: block; color: var(--ink-soft); font-size: .76rem; }
.panel .sources { font-size: .76rem; color: var(--ink-soft); line-height: 1.8; }
.panel .sources a { word-break: break-all; }
.panel .p-meta { margin-top: 16px; font-size: .72rem; color: var(--ink-soft); }

/* エラー */
.error-box { padding: 60px 24px; text-align: center; color: var(--ink-soft); }

@media (max-width: 720px) {
  .topbar { padding: 8px 10px; gap: 8px; }
  .topbar h1 { font-size: 1.02rem; }
  .topbar .tag { display: none; }
  .topbar .home-link { padding: 10px 10px; font-size: .78rem; }
  #map-search { flex: 1; width: 100px; min-width: 0; }
  .filters { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .filters button { padding: 12px 14px; font-size: .82rem; white-space: nowrap; min-height: 44px; }
  .legend { display: none; }
  .panel { width: 100vw; max-width: 100vw; }
}

/* ---- 業界の歩き方カード ---- */
.guide-card {
  position: absolute; left: 14px; top: 14px; z-index: 18;
  max-width: 360px; padding: 0;
  background: linear-gradient(160deg, var(--grad-a), var(--grad-b));
  border: 1.5px solid var(--paper-edge); border-radius: 12px;
  box-shadow: 0 4px 18px rgba(60,40,10,.18);
  font-size: .82rem; line-height: 1.65; color: var(--ink);
}
.guide-card summary {
  cursor: pointer; padding: 10px 14px; font-weight: 700; color: var(--ink);
  list-style: none; user-select: none; min-height: 24px;
}
.guide-card summary::-webkit-details-marker { display: none; }
.guide-card summary::after { content: "▸"; float: right; color: var(--ink-soft); transition: transform .15s; }
.guide-card[open] summary::after { transform: rotate(90deg); }
.guide-card p { margin: 0; padding: 0 14px 10px; }
.guide-card p strong { color: var(--gold); }
@media (max-width: 640px) {
  .guide-card { left: 8px; right: 8px; max-width: none; top: 8px; font-size: .8rem; }
}

/* ---- カネの旅(ガイドツアー) ---- */
.journey-launch {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 19;
  font-family: inherit; font-size: .88rem; font-weight: 700; color: #fff;
  background: var(--gold);
  border: 1.5px solid transparent; border-radius: 999px; padding: 12px 22px;
  cursor: pointer; box-shadow: 0 4px 16px rgba(60,40,10,.35);
  min-height: 44px; white-space: nowrap; max-width: calc(100% - 24px);
  overflow: hidden; text-overflow: ellipsis;
}
.journey-launch:hover { filter: brightness(1.12); }
.journey-bar {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 20;
  width: min(560px, calc(100% - 20px));
  background: linear-gradient(160deg, var(--grad-a), var(--grad-b));
  border: 1.5px solid var(--paper-edge); border-radius: 14px;
  box-shadow: 0 6px 24px rgba(60,40,10,.3);
  padding: 12px 16px; font-size: .86rem; line-height: 1.6; color: var(--ink);
}
.journey-bar .j-head { font-weight: 700; margin-bottom: 4px; }
.journey-bar .j-count {
  display: inline-block; background: var(--gold); color: #fff; border-radius: 999px;
  font-size: .72rem; padding: 1px 9px; margin-right: 6px; font-weight: 700;
}
.journey-bar .j-route { font-size: .78rem; color: var(--ink-soft); margin-bottom: 4px; }
.journey-bar .j-flow { border-radius: 4px; padding: 1px 6px; font-weight: 700; color: #fff; font-size: .7rem; margin-right: 4px; }
.journey-bar .j-flow.goods { background: #2e7d6e; }
.journey-bar .j-flow.capex { background: #b97a12; }
.journey-bar .j-flow.opex { background: #a84a5f; }
.journey-bar .j-say { margin: 0 0 8px; }
.journey-bar .j-nav { display: flex; gap: 8px; }
.journey-bar .j-nav button {
  font-family: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
  border: 1.5px solid var(--paper-edge); border-radius: 8px; padding: 8px 16px;
  background: rgba(255,255,255,.65); color: var(--ink); min-height: 40px;
}
.journey-bar .j-nav button[data-j="next"] { background: var(--gold); color: #fff; border-color: transparent; }
.journey-bar .j-nav button:disabled { opacity: .4; cursor: default; }
.journey-bar .j-nav .j-close { margin-left: auto; }
.journeying .edges .edge { opacity: .05; pointer-events: none; }
.journeying .nodes .node { opacity: .3; }
.journeying .edge.journey-hot { opacity: 1 !important; pointer-events: auto; }
.journeying .edge.journey-hot path.line { stroke-width: 4.5; }
.journeying .edge.journey-hot .elabel { opacity: 1; }
.journeying .node.journey-node { opacity: 1; }
.journeying .guide-card { display: none; }
@media (max-width: 640px) {
  .journey-bar { font-size: .82rem; }
}

/* ---- ホームカードのカネの旅バッジ ---- */
.card .journey-tag {
  display: inline-block; margin: 2px 0 6px; padding: 2px 10px;
  font-size: .72rem; font-weight: 700; color: var(--gold);
  background: rgba(15,118,110,.08); border: 1px solid rgba(15,118,110,.3);
  border-radius: 999px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 100%;
}

/* ---- 提携・取引表示 ---- */
.c-deals { color: var(--ink); }
.c-deals a { color: var(--gold); text-decoration: underline dotted; }
.deals-more { color: var(--ink-soft); }

/* ---- ロゴ紋章 ---- */
.logo-emblem { display: block; margin: 0 auto 6px; filter: drop-shadow(0 3px 8px rgba(60,40,10,.25)); }
.nav-emblem { width: 17px; height: 17px; vertical-align: -3px; margin-right: 2px; }

/* ---- 業界カードの写真帯(セピア調で羊皮紙に馴染ませる) ---- */
.card-photo {
  height: 96px; margin: -20px -20px 12px; border-radius: 10.5px 10.5px 0 0;
  background-size: cover; background-position: center;
  filter: saturate(.85) contrast(.96);
  opacity: .92; position: relative;
  border-bottom: 1.5px solid var(--paper-edge);
  transition: filter .2s, opacity .2s;
}
.card-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent, var(--paper));opacity:.55;
  pointer-events: none;
}
.card:hover .card-photo { filter: saturate(1) contrast(1); opacity: 1; }

/* ---- セマンティックズーム: 寄った時の強調 ---- */
.node .top-company {
  opacity: 0; transition: opacity .3s; pointer-events: none;
  text-anchor: middle; font-size: 10.5px; fill: var(--ink-soft);
  paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round;
}
svg.near .node .top-company { opacity: 1; }
.node .count-badge circle { transition: r .25s; }
.node .count-badge text { transition: font-size .25s; }
svg.near .node .count-badge circle { r: 14px; }
svg.near .node .count-badge text { font-size: 13px; }

/* 地図ドラッグ時にラベルがテキスト選択されるのを防止 */
.map-wrap svg { user-select: none; -webkit-user-select: none; }

/* ---- 子マップへのポータル(クリック可能) ---- */
.portal-btn { cursor: pointer; }
.portal-btn .portal-hit { fill: transparent; }
.portal-btn:hover .portal { opacity: 1; }

/* ---- 企業カードの構造化(絵文字レス) ---- */
.c-listing { margin-left: 8px; font-size: .72rem; color: var(--ink-soft); font-weight: 400; white-space: nowrap; }
.c-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px 14px;
  margin: 6px 0 2px; font-size: .86rem;
}
.c-stats .stat .sl { color: var(--ink-soft); font-size: .72rem; margin-right: 6px; }
.c-deals { margin: 4px 0 2px; font-size: .8rem; }
.c-deals summary { cursor: pointer; color: var(--gold); user-select: none; }
.c-deals ul { margin: 4px 0 0; padding-left: 18px; }
.c-deals li { margin: 2px 0; }
.deal-with { color: var(--ink-soft); }
.c-foot { margin-top: 4px; font-size: .75rem; color: var(--ink-soft); }

/* ポータルの視認性: ゆっくり明滅して「押せる」ことを示す */
.portal-btn .portal { animation: portal-pulse 2.6s ease-in-out infinite; }
@keyframes portal-pulse {
  0%, 100% { opacity: .65; }
  50% { opacity: 1; }
}

/* ---- ポータル遷移元バナー+対応ノードの強調 ---- */
.jump-banner {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 19;
  display: flex; align-items: center; gap: 12px; max-width: min(92%, 600px);
  padding: 8px 14px; font-size: .82rem; color: var(--ink);
  background: linear-gradient(160deg, var(--grad-a), var(--grad-b));
  border: 1.5px solid var(--gold); border-radius: 999px;
  box-shadow: 0 4px 18px rgba(60,40,10,.22);
}
.jump-banner a { color: var(--gold); font-weight: 700; white-space: nowrap; }
.jump-banner .jb-close {
  background: none; border: none; cursor: pointer; color: var(--ink-soft);
  font-size: .9rem; padding: 2px 4px; line-height: 1;
}
.node.from-linked .halo { fill: rgba(201,151,28,.28); animation: from-pulse 1.2s ease-in-out infinite; }
@keyframes from-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@media (max-width: 640px) {
  .jump-banner { top: auto; bottom: 76px; font-size: .78rem; flex-wrap: wrap; justify-content: center; }
}

/* ---- 無料メンバー登録ゲート ---- */
.gate .gate-card {
  max-width: 560px; margin: 0 auto; padding: 26px 28px;
  background: var(--surface-2); border: 1.5px solid var(--gold);
  border-radius: 14px; box-shadow: 0 6px 24px rgba(60,40,10,.15);
}
.gate .gate-card h2 { font-size: 1.15rem; margin-bottom: 10px; }
.gate .gate-card > p { font-size: .9rem; line-height: 1.9; color: var(--ink-soft); }
#gate-form { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
#gate-form label { font-size: .82rem; font-weight: 700; display: flex; flex-direction: column; gap: 5px; }
#gate-form input, #gate-form select {
  font-family: inherit; font-size: .95rem; padding: 10px 12px;
  border: 1.5px solid var(--paper-edge); border-radius: 8px;
  background: var(--surface-2); color: var(--ink);
}
#gate-form button {
  margin-top: 4px; padding: 13px; font-family: inherit; font-size: 1rem; font-weight: 700;
  color: #fff; background: var(--gold);
  border: none; border-radius: 999px; cursor: pointer; min-height: 48px;
  box-shadow: 0 2px 8px rgba(15,118,110,.25);
}
#gate-form button:hover { filter: brightness(1.08); }
.gate-note { font-size: .72rem; color: var(--ink-soft); text-align: center; }
.gate-open { margin-top: 18px; border-top: 1px dashed var(--paper-edge); padding-top: 14px; font-size: .82rem; }
.gate-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.gate-chip {
  padding: 6px 14px; border: 1.5px solid var(--gold); border-radius: 999px;
  color: var(--ink); font-weight: 700; background: var(--surface-2);
}
.gate-chip:hover { background: rgba(15,118,110,.08); }
.card .access-tag {
  display: inline-block; margin: 2px 0 6px; padding: 2px 10px;
  font-size: .7rem; font-weight: 700; color: var(--ink-soft);
  border: 1px dashed var(--paper-edge); border-radius: 999px;
}
.card .access-tag.open { color: #2e6e3e; border-color: #2e6e3e; background: rgba(64,140,80,.08); }

/* ---- 分岐フォーム・業界チップ ---- */
.gate-branch { display: flex; flex-direction: column; gap: 12px; padding: 12px; border: 1px dashed var(--paper-edge); border-radius: 10px; background: var(--surface); }
#gate-form .opt { font-weight: 400; color: var(--ink-soft); font-size: .74rem; }
.ind-select { border: 1px dashed var(--paper-edge); border-radius: 10px; padding: 10px 12px 12px; }
.ind-select legend { font-size: .82rem; font-weight: 700; padding: 0 6px; }
.ind-chips { display: flex; flex-wrap: wrap; gap: 7px; max-height: 150px; overflow-y: auto; }
.ind-chip { cursor: pointer; }
.ind-chip input { display: none; }
.ind-chip span {
  display: inline-block; padding: 5px 12px; font-size: .78rem; font-weight: 700;
  border: 1.5px solid var(--paper-edge); border-radius: 999px; color: var(--ink-soft);
  background: var(--surface-2); transition: all .12s;
}
.ind-chip input:checked + span { border-color: var(--gold); color: var(--gold); background: rgba(15,118,110,.08); }
.ind-chip input:disabled + span { opacity: .4; cursor: not-allowed; }

/* ---- 渋滞対策: エッジが多いマップ(dense)は引きでラベルを畳み、線も薄く ---- */
svg.dense .edge { opacity: .45; }
svg.dense .edge text.elabel { opacity: 0; }
svg.dense.near .edge { opacity: .8; }
svg.dense.near .edge text.elabel { opacity: 1; }
.edge:hover text.elabel { opacity: 1 !important; }
svg.focus .edge.lit text.elabel { opacity: 1 !important; }
svg.focus .node.lit { opacity: 1; }

/* ---- 比較ボタン・マイマップ ---- */
.cmp-add {
  font-family: inherit; font-size: .68rem; font-weight: 700; cursor: pointer;
  padding: 2px 9px; margin-left: 8px; border-radius: 999px;
  border: 1.5px solid var(--paper-edge); background: var(--surface-2); color: var(--ink-soft);
  vertical-align: 1px;
}
.cmp-add.on { border-color: var(--gold); color: var(--gold); background: rgba(15,118,110,.08); }
.cmp-add:hover { border-color: var(--gold); }
.cmp-wrap { overflow-x: auto; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: .84rem; background: var(--surface); border-radius: 10px; }
.cmp-table th, .cmp-table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--paper-edge); white-space: nowrap; }
.cmp-table th { font-size: .74rem; color: var(--ink-soft); }
.cmp-sub { font-size: .7rem; color: var(--ink-soft); }
.cmp-del { font-family: inherit; font-size: .7rem; cursor: pointer; border: 1px solid var(--paper-edge); background: none; border-radius: 6px; padding: 2px 8px; color: var(--ink-soft); }
.cmp-del:hover { color: #a84a5f; border-color: #a84a5f; }
.cmp-copy {
  margin-top: 12px; font-family: inherit; font-size: .86rem; font-weight: 700; cursor: pointer;
  padding: 9px 18px; border-radius: 999px; border: 1.5px solid var(--gold);
  background: rgba(15,118,110,.08); color: var(--gold); min-height: 42px;
}
.guide-card .g-talk { border-top: 1px dashed var(--paper-edge); padding-top: 8px; margin-top: 2px; }
.hero-uses { font-size: .86rem; color: var(--gold); font-weight: 700; }


/* ============ 2026 モダンテーマ層(ダークファースト+ガラス) ============ */
html { -webkit-font-smoothing: antialiased; }

/* 夜の航海図(ダークモード) */
:root[data-theme="dark"] {
  --ink: #e6ebf0;
  --ink-soft: #94a3b8;
  --paper: #101820;
  --paper-deep: #0b1117;
  --paper-edge: #2b3844;
  --gold: #3db8a5;
  --goods: #34a884;
  --capex: #cf9440;
  --opex: #d9647e;
  --hq-glow: #1a2530;
  --surface: rgba(255, 255, 255, .04);
  --surface-2: rgba(255, 255, 255, .08);
  --surface-solid: #172029;
  --surface-border: rgba(255, 255, 255, .1);
  --grad-a: rgba(26, 35, 44, .96);
  --grad-b: rgba(16, 24, 32, .96);
}
:root[data-theme="dark"] body {
  background: var(--paper);
}
body {
  background: var(--paper);
}
:root[data-theme="dark"] .card { background: var(--surface); }
:root[data-theme="dark"] .card-photo { filter: sepia(.15) saturate(.8) contrast(.95) brightness(.8); opacity: .85; }
:root[data-theme="dark"] .card:hover .card-photo { filter: saturate(.95) brightness(.95); }

/* ガラスモーフィズム(控えめなブラー+薄い縁) */
.topbar, .panel, .guide-card, .journey-bar, .jump-banner, .gate-card {
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border-color: var(--surface-border);
}
.guide-card, .jump-banner {
  background: linear-gradient(160deg, var(--grad-a), var(--grad-b));
}
.panel { box-shadow: 0 8px 24px rgba(0, 0, 0, .14); }
.card, .gate-card, .about-sec, .coverage {
  border-color: var(--surface-border);
  border-radius: 16px;
}
.card { transition: transform .18s cubic-bezier(.2,.8,.3,1.1), box-shadow .18s, border-color .18s; }
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(40, 28, 8, .12); }
:root[data-theme="dark"] .card:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }

/* 矢印マーカーもテーマ変数に追従させる */
marker[id="arrow-goods"] path { fill: var(--goods); }
marker[id="arrow-capex"] path { fill: var(--capex); }
marker[id="arrow-opex"] path { fill: var(--opex); }

:root[data-theme="dark"] .node circle.body { stroke: var(--paper-edge); }
:root[data-theme="dark"] .node:hover circle.body,
:root[data-theme="dark"] .node.center circle.body { stroke: var(--gold); }
:root[data-theme="dark"] .terrain circle.ring { stroke-opacity: .3; }
:root[data-theme="dark"] #gate-form input, :root[data-theme="dark"] #gate-form select {
  background: var(--surface-2); color: var(--ink); border-color: var(--surface-border);
}
:root[data-theme="dark"] .cmp-table { background: var(--surface); }
:root[data-theme="dark"] #map-search { background: var(--surface-2); color: var(--ink); }

/* テーマ切替ボタン */
.theme-toggle {
  position: fixed; left: 14px; bottom: 14px; z-index: 60;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--surface-border);
  background: var(--surface-2);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  font-size: 1.15rem; line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  transition: transform .15s;
}
.theme-toggle:hover { transform: scale(1.08); }

/* ---- ダーク時の残ページ調整(索引・パネル内・バッジ・フォーム部品) ---- */
:root[data-theme="dark"] .journey-tag,
:root[data-theme="dark"] .card .journey-tag { color: var(--gold); border-color: rgba(61,184,165,.35); background: rgba(61,184,165,.1); }
:root[data-theme="dark"] .access-tag.open { color: #5fd08a; border-color: #5fd08a; background: rgba(95,208,138,.1); }
:root[data-theme="dark"] .dir-chip { background: var(--surface); border-color: var(--surface-border); color: var(--ink-soft); }
:root[data-theme="dark"] .dir-chip.covered { color: var(--gold); border-color: var(--gold); }
:root[data-theme="dark"] .dir-sec summary { color: var(--ink); }
:root[data-theme="dark"] select, :root[data-theme="dark"] input[type="search"] {
  background: var(--surface-2); color: var(--ink); border-color: var(--surface-border);
}
:root[data-theme="dark"] .company { background: var(--surface); border-color: var(--surface-border); }
:root[data-theme="dark"] .sort-note, :root[data-theme="dark"] .gate-note { color: var(--ink-soft); }
:root[data-theme="dark"] .cmp-add { background: var(--surface); color: var(--ink-soft); border-color: var(--surface-border); }
:root[data-theme="dark"] .cmp-add.on { color: var(--gold); border-color: var(--gold); background: rgba(61,184,165,.12); }
:root[data-theme="dark"] .cmp-copy { color: var(--gold); background: rgba(61,184,165,.1); }
:root[data-theme="dark"] .planned-chip { background: var(--surface); border-color: var(--surface-border); color: var(--ink-soft); }
:root[data-theme="dark"] .coverage { background: var(--surface); }
:root[data-theme="dark"] .about-sec { background: var(--surface); }
:root[data-theme="dark"] .gate-chip { background: var(--surface); color: var(--ink); }
:root[data-theme="dark"] .child-chip { color: var(--gold); border-color: var(--gold); }
:root[data-theme="dark"] .style-tag { color: var(--gold); border-color: var(--gold); }
:root[data-theme="dark"] .journey-launch { border-color: var(--gold); }

/* ---- 脱・絵文字後のラベルタイポグラフィ(編集誌風の小ラベル) ---- */
.guide-card p strong {
  display: block; font-size: .7rem; letter-spacing: .14em;
  color: var(--gold); margin-bottom: 3px; font-family: inherit;
}
.guide-card summary { letter-spacing: .06em; }
.card .journey-tag, .card .access-tag { letter-spacing: .03em; }
.topbar .home-link { letter-spacing: .04em; }

/* ---- 企業ランキング ---- */
.rank-controls { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.rank-controls select, .rank-controls input {
  font-family: inherit; font-size: .9rem; padding: 9px 12px;
  border: 1.5px solid var(--paper-edge); border-radius: 8px;
  background: var(--surface-2); color: var(--ink);
}
.rank-controls input { flex: 1; min-width: 200px; }
.rank-table .rank-no { color: var(--ink-soft); font-size: .8rem; width: 2em; }
.rank-table .rank-val { font-weight: 700; }
.rank-table .rank-sub { color: var(--ink-soft); }
.rank-note { margin-top: 10px; font-size: .76rem; color: var(--ink-soft); }
.rank-cta { margin-top: 14px; text-align: center; }
.rank-cta a {
  display: inline-block; padding: 12px 26px; border-radius: 999px; font-weight: 700;
  color: #fff; background: var(--gold);
  border: 1.5px solid transparent;
}
.rank-table .cmp-add { margin-left: 8px; }

/* ---- 企業ロゴ(favicon/イニシャル) ---- */
.c-logo {
  width: 20px; height: 20px; border-radius: 5px; vertical-align: -4px; margin-right: 7px;
  border: 1px solid var(--surface-border); background: #fff; object-fit: contain;
}
:root[data-theme="dark"] .c-logo { background: #e6ebf0; }
.c-logo.fallback {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; color: var(--ink-soft);
  background: var(--paper-deep);
}
.rank-table .c-logo { vertical-align: -5px; }

/* ---- 市場規模表示 ---- */
.p-market { font-size: .86rem; margin: 4px 0 8px; }
.p-market strong { color: var(--gold); font-size: 1rem; }
.p-market .ms-sub { display: block; font-size: .72rem; color: var(--ink-soft); margin-top: 2px; }