/* Helix Guard──　画面の設計
 *
 * 地図を主役にした全画面の道具として組む。地図はカードに入れず、面いっぱいに
 * 置く。上に重ねるのは、検索・凡例・操作だけ。
 *
 * 地図の塗りについて（2026-10-09 に作り直した理由）
 *   以前は濃い紺の5段で塗っていた。188か国のうち151か国が中間の2段に入るため、
 *   世界中が暗く沈み、どこが多いのか読めなかった（実測して作り直した）。
 *   いまは**淡い側に寄せた**段にしてある。117か国が最も淡い2段に入り、
 *   濃い側は12か国だけになる。地図は明るいまま、多い国だけが浮く。
 *
 * ⛔ 規則は必ず #hx の下にスコープする。クラスだけの指定は、画面側の
 *    総掛け規則（#root * 等）に詳細度で負ける。
 * ⛔ 斜体は使わない。絵文字は使わない。形はカスタムSVGで表す。
 * ⛔ アクセントは紺1色。赤は「該当あり」の警告専用。
 * ⛔ 余白は 4px の刻み（--s1..--s12）だけ。端数を直接書かない。
 * ⛔ 影は「面の上に浮いているもの」にだけ1段。飾りで重ねない。
 * ⛔ 色は必ず変数経由。変数を通さない色を書かない（暗い配色が崩れる）。
 */

/* ══ 基礎 ═══════════════════════════════════════════════════════════════ */

html, body { height: 100%; margin: 0; background: var(--canvas); }

:root, #hx {
  /* 余白の刻み */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s12: 48px;

  /* 面と文字 */
  --canvas: #eaedf1;          /* 地図の地（＝海）とページの地 */
  --surface: #ffffff;
  --surface-2: #f6f8fa;
  --line: #d8dee6;
  --line-soft: #e8ecf1;
  --line-strong: #b6c0cc;

  --ink: #15202b;
  --ink-2: #44535f;
  --ink-weak: #6b7988;

  /* アクセントは紺1色。濃い面（ヘッダ）も同じ色相から取る。 */
  --accent: #1e3a8a;
  --accent-strong: #16296a;
  --accent-soft: #eaeffb;
  --accent-line: #c2d0ec;
  --band: #14233f;            /* ヘッダの面 */
  --band-ink: #e8edf6;
  --band-ink-weak: #a6b4cd;
  --band-line: #2e4166;
  --on-accent: #ffffff;

  /* 注意書き（読んでほしいだけ。危険の合図ではない） */
  --notice-bg: #fdf8e8;
  --notice-line: #c08a1e;
  --notice-ink: #6b4f0f;

  /* ⛔「該当あり」の警告専用。他に流用しない。 */
  --alert: #b3261e;

  /* 近さ。紺の濃淡＋形で表す。 */
  --close-1: #16296a; --close-2: #3558ad;
  --close-3: #6c7d96; --close-4: #97a3b3;

  /* 地図。淡い側に寄せた5段。最も濃い段でも黒には寄せない。 */
  --map-void: #ccd2d8;        /* 国はあるが公開データが無い。無彩色の灰 */
  --map-edge: var(--canvas);  /* 国境。地の色で細く割る */
  --map-1: #cedcf8;
  --map-2: #a7c0f0;
  --map-3: #7c9ce0;
  --map-4: #5076c6;
  --map-5: #2a4fa0;
  --map-pick: #14233f;        /* 選んでいる国 */

  /* 小さな符号（角括弧・著作権表示・見出しの上の行）に使う等幅。
     日本語には当てない（和文のグリフを持たないので、字ごとに別の書体へ
     落ちて見た目がばらつく）。英字の短い符号だけに使う。 */
  --ff-mono: ui-monospace, "SFMono-Regular", Consolas, "Noto Sans Mono", monospace;

  --radius: 4px;
  --radius-lg: 8px;
  --focus: #3a6fd0;
  --lift: 0 1px 3px rgba(20, 35, 63, .14), 0 6px 20px rgba(20, 35, 63, .10);

  font-family: "Noto Sans JP", "Yu Gothic UI", "Hiragino Kaku Gothic ProN",
               Meiryo, "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
  :root, #hx {
    --canvas: #0d1117;
    --surface: #151b24;
    --surface-2: #1a2230;
    --line: #2a3442;
    --line-soft: #202936;
    --line-strong: #3c4857;

    --ink: #e3e9f0;
    --ink-2: #aab6c4;
    --ink-weak: #85929f;

    --accent: #8fb0f2;
    --accent-strong: #b5caf8;
    --accent-soft: #19243a;
    --accent-line: #2f4166;
    --band: #0a0f17;
    --band-ink: #dde5f1;
    --band-ink-weak: #90a0b8;
    --band-line: #243250;
    --on-accent: #0a0f17;

    --notice-bg: #2b2412;
    --notice-line: #9c7a22;
    --notice-ink: #e8d7a4;
    --alert: #f2938c;

    --close-1: #b5caf8; --close-2: #8fb0f2;
    --close-3: #85929f; --close-4: #68747f;

    --map-void: #2a3138;
    --map-edge: var(--canvas);
    --map-1: #1f3560;
    --map-2: #2b4a86;
    --map-3: #3d63ae;
    --map-4: #5880d2;
    --map-5: #87a6ec;
    --map-pick: #dde5f1;

    --lift: 0 1px 3px rgba(0, 0, 0, .5), 0 6px 20px rgba(0, 0, 0, .4);
  }
}

#hx *, #hx *::before, #hx *::after { box-sizing: border-box; }
#hx p, #hx h1, #hx h2, #hx h3, #hx dl, #hx dd, #hx figure { margin: 0; }
#hx ul, #hx ol { margin: 0; padding: 0; list-style: none; }
#hx i, #hx em, #hx cite, #hx address { font-style: normal; }
#hx a { color: var(--accent); text-decoration: none; }
#hx a:hover { color: var(--accent-strong); text-decoration: underline; }
#hx table { border-collapse: collapse; width: 100%; }
#hx button { font: inherit; }
#hx-sprite { display: none; }
#hx :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
#hx .num { font-variant-numeric: tabular-nums; }
#hx .vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ══ 外枠 ═══════════════════════════════════════════════════════════════
   地図の画面（app）は縦に伸びず、画面の中で完結させる。
   読み物の画面（doc）は普通に縦へ伸ばす。 */

#hx { display: flex; flex-direction: column; min-height: 100vh; }
#hx.is-app { height: 100vh; min-height: 0; overflow: hidden; }

/* ── ヘッダ ─────────────────────────────────────────── */
#hx-top { flex: 0 0 auto; background: var(--band); color: var(--band-ink); }
#hx .top-in {
  display: flex; align-items: center;
  gap: var(--s6); padding: 0 var(--s5); height: 52px;
}
#hx .brand { display: flex; align-items: center; gap: var(--s2); color: #fff; }
#hx .brand:hover { color: #fff; text-decoration: none; }
/* ブランドマークは画像（/static/brand.svg）。幅だけ決めて、高さは
   viewBox の比に任せる。高さを固定すると図が潰れる（実際に潰れた）。
   inline のままだと行の下に隙間が出るので block にする。 */
#hx .brand-mark { width: 34px; height: auto; display: block; }
#hx .brand-name {
  font-size: 1rem; font-weight: 700; letter-spacing: .04em;
}
/* 切り替えは右へ寄せる（左はロゴ、右は切り替えと提供元への道）。 */
#hx .top-nav { display: flex; align-items: center; gap: var(--s5); margin-left: auto; }
#hx .top-link {
  color: var(--band-ink-weak); font-size: .875rem; font-weight: 600;
  padding: var(--s1) 0; border-bottom: 2px solid transparent;
}
#hx .top-link:hover { color: #fff; text-decoration: none; }
#hx .top-link.is-on { color: #fff; border-bottom-color: #8fb0f2; }

/* 提供元への問い合わせ。これは画面の切り替えではないので、細い縦線で
   切り離し、角括弧の等幅で「外へ出る」ことを示す（提供元サイトと同じ組み方）。
   ⛔ 矢印の文字は使わない。外の行き先は #i-away の形で示す。 */
#hx .top-div { width: 1px; height: 18px; background: var(--band-line); }
#hx .top-away {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-family: var(--ff-mono); font-size: .6875rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--band-ink); white-space: nowrap;
}
#hx .top-away:hover { color: #fff; text-decoration: none; }
#hx .top-brk { color: var(--band-ink-weak); }
#hx .top-away:hover .top-brk { color: #fff; }
#hx .top-away-icon { width: 11px; height: 11px; }

/* ══ 地図の舞台 ═════════════════════════════════════════════════════════ */

#hx-stage {
  flex: 1 1 auto; position: relative; min-height: 0;
  background: var(--canvas); overflow: hidden;
}
#hx .stage-map { position: absolute; inset: 0; }
#hx .world {
  display: block; width: 100%; height: 100%;
  touch-action: none; cursor: grab;
}
#hx .world.is-dragging { cursor: grabbing; }

/* 国の形。境界は地の色で細く割るだけ。白い罫で縁取らない
   （縁取ると陸が網のように見えて、塗りの違いが読めなくなる）。 */
#hx .shape, #hx .dot {
  fill: var(--map-void); stroke: var(--map-edge);
  stroke-width: .5; vector-effect: non-scaling-stroke;
}
#hx .b1 { fill: var(--map-1); }
#hx .b2 { fill: var(--map-2); }
#hx .b3 { fill: var(--map-3); }
#hx .b4 { fill: var(--map-4); }
#hx .b5 { fill: var(--map-5); }
#hx .hit { cursor: pointer; }
#hx .hit:hover > .shape, #hx .hit:hover > .dot,
#hx .hit:focus-visible > .shape, #hx .hit:focus-visible > .dot {
  stroke: var(--map-pick); stroke-width: 1.6;
}
#hx .hit:focus-visible { outline: none; }
#hx .hit.is-pick > .shape, #hx .hit.is-pick > .dot {
  stroke: var(--map-pick); stroke-width: 2.2;
}

/* ── 地図に重ねるもの ───────────────────────────────── */
#hx .over {
  position: absolute; z-index: 2; pointer-events: none;
}
#hx .over > * { pointer-events: auto; }
#hx .over-top {
  top: var(--s5); left: var(--s5); right: var(--s5);
  display: flex; align-items: flex-start; gap: var(--s4);
}
#hx .over-bottom {
  left: var(--s5); right: var(--s5); bottom: var(--s5);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s4);
}
/* 引き出しが出ている間は、下の帯を引き出しの幅だけ左へ寄せる。
   寄せないと拡大・縮小の操作が引き出しの裏に隠れる（実際に隠れた）。 */
#hx-stage.has-drawer .over-bottom { right: calc(400px + var(--s5)); }

/* 検索。地図の上に浮かせる唯一の入力。 */
#hx .seek { width: min(520px, 100%); }
#hx .seek-form {
  display: flex; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--lift); overflow: hidden;
}
#hx .seek-input {
  flex: 1; min-width: 0; font: inherit; font-size: 1rem;
  padding: var(--s3) var(--s4); border: 0; background: transparent;
  color: var(--ink);
}
#hx .seek-input:focus { outline: none; }
#hx .seek-form:focus-within { border-color: var(--focus); }
#hx .seek-go {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-weight: 700; color: var(--on-accent); background: var(--accent);
  border: 0; padding: 0 var(--s5); cursor: pointer;
}
#hx .seek-go:hover { background: var(--accent-strong); }
#hx .seek-go[disabled] { opacity: .6; cursor: default; }
#hx .seek-icon { width: 17px; height: 17px; }
#hx .seek-note {
  margin-top: var(--s2); padding-left: var(--s1);
  font-size: .8125rem; color: var(--ink-2);
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3);
}
#hx .seek-note b { font-weight: 700; color: var(--ink); }

/* 見出しだけに使う書体。**同梱する。外部から取りに行かない。**
   （公開サイトが他所へ通信しないという決まりがある）
   日本語の全グリフは 2.3MB あるので、使う字だけに絞って 31KB にしてある。
   作り直しは tools/make_font_subset.py。字が足りているかは tests/test_font.py。
   Zen Kaku Gothic New Black / SIL Open Font License 1.1
   全文は /static/zenkakugothicnew-OFL.txt に同梱。 */
@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("/static/zenkakugothicnew-black.woff2?v=1") format("woff2");
  font-weight: 900;
  font-style: normal;
  /* 読み込めるまでは落ち先の書体で出す（文字が消えている時間を作らない）。 */
  font-display: swap;
}

/* このシステムの紹介。**この一画だけ意匠を入れてある。**
   地図が主役なので検索欄の幅のまま。地（濃い面・方眼・縁）だけを CSS で描き、
   文字は文字のまま置く。画像に焼くと狭い画面で読めなくなるため。
   ⛔ ここの色は**この一画だけ**で閉じる。明暗どちらでも同じ濃い面に置くので
      配色を切り替えない。brand.svg の帯と同じ色を使う（新しい色ではない）。 */
#hx .pitch {
  --pitch-1: #00D4AA;         /* ブランドの帯の左端 */
  --pitch-2: #3C93E0;         /* 同・中央（濃い地で読めるよう少し明るく） */
  --pitch-3: #8B7BF0;         /* 同・右端 */
  /* ⚠ この一画の文字は**白**にする。濃い地に灰色を置くと沈んで読みにくい
        （2026-10-11 オーナー指摘）。強弱は色ではなく**大きさと太さ**で付ける。 */
  --pitch-ink: #ffffff;
  margin-top: var(--s3); padding: var(--s4) var(--s5) var(--s5);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: var(--radius-lg); box-shadow: var(--lift);
  /* 薄い方眼 ＋ 濃い面。P1 の図にある格子で、地にわずかな奥行きを与える。 */
  background-image:
    repeating-linear-gradient(to right,
      rgba(255, 255, 255, .045) 0 1px, transparent 1px 130px),
    repeating-linear-gradient(to bottom,
      rgba(255, 255, 255, .045) 0 1px, transparent 1px 48px),
    linear-gradient(145deg, #12203a, #0a1322);
}
/* 見出しの上の小さな行。P1 の「── [ 02 ] / PRODUCTS」にあたる。 */
#hx .pitch-eyebrow {
  margin: 0; display: flex; align-items: center; gap: var(--s2);
  font-family: var(--ff-mono);
  font-size: .625rem; font-weight: 700; letter-spacing: .14em;
}
#hx .pitch-rule {
  width: 18px; height: 1px; background: var(--pitch-1); opacity: .8;
}
#hx .pitch-no { color: var(--pitch-1); }
#hx .pitch-kind { color: var(--pitch-ink); }

/* 一番に目へ入ってほしい一行。2行目だけ帯の色で抜く。 */
#hx .pitch-lead {
  margin: var(--s3) 0 0;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Yu Gothic UI",
               "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-size: 1.5rem; font-weight: 900; line-height: 1.3;
  letter-spacing: .01em; color: var(--pitch-ink);
}
#hx .pitch-accent {
  background-image: linear-gradient(to right,
    var(--pitch-1), var(--pitch-2) 52%, var(--pitch-3));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
#hx .pitch-sub {
  margin: var(--s2) 0 0; font-size: .8125rem; line-height: 1.6;
  color: var(--pitch-ink);
}

/* 3つの特徴。P1 の丸い枠のタグにあたる。
   言葉だけでなく形（カスタムSVG）でも違いが分かるようにする。 */
#hx .pitch-tags {
  margin: var(--s3) 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: var(--s2);
}
#hx .pitch-tag {
  flex: 1 1 150px; min-width: 0;
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s3); border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
}
#hx .pitch-icon { flex: 0 0 auto; width: 16px; height: 16px; }
#hx .pitch-icon.is-1 { color: var(--pitch-1); }
#hx .pitch-icon.is-2 { color: var(--pitch-2); }
#hx .pitch-icon.is-3 { color: var(--pitch-3); }
#hx .pitch-txt { min-width: 0; display: flex; flex-direction: column; }
#hx .pitch-txt b {
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Yu Gothic UI",
               "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-size: .8125rem; font-weight: 900; line-height: 1.35;
  color: var(--pitch-ink);
}
#hx .pitch-txt small {
  font-size: .6875rem; line-height: 1.35; color: var(--pitch-ink);
}

/* 凡例。箱に入れず、地の上に直接置く。 */
#hx .key { display: flex; flex-direction: column; gap: var(--s2); }
#hx .key-title {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  color: var(--ink-weak); text-transform: uppercase;
}
#hx .key-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
#hx .key-steps { display: flex; }
#hx .key-step {
  display: flex; flex-direction: column; gap: var(--s1); align-items: center;
  font-size: .72rem; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
#hx .key-step + .key-step { margin-left: 2px; }
#hx .key-chip { width: 54px; height: 10px; border-radius: 1px; }
#hx .key-chip.b1 { background: var(--map-1); }
#hx .key-chip.b2 { background: var(--map-2); }
#hx .key-chip.b3 { background: var(--map-3); }
#hx .key-chip.b4 { background: var(--map-4); }
#hx .key-chip.b5 { background: var(--map-5); }
#hx .key-void { display: flex; align-items: center; gap: var(--s2); }
#hx .key-void .key-chip { width: 18px; background: var(--map-void); }
#hx .key-void span { font-size: .72rem; color: var(--ink-2); }

/* 母数の内訳。合計と必ず一致させる。 */
#hx .tally {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4);
  font-size: .78rem; color: var(--ink-weak); margin-top: var(--s1);
}
#hx .tally b { color: var(--ink-2); font-weight: 700; font-variant-numeric: tabular-nums; }

/* 地図に形が無い国・地域への入口。
   件数があるのに地図から辿れない国を、そのまま行き止まりにしない。
   数が増えても折り返すだけで済むように、帯ではなく並びで置く。 */
#hx .offmap {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--s1) var(--s2); margin-top: var(--s2);
  font-size: .78rem;
}
#hx .offmap-h { color: var(--ink-weak); }
#hx .offmap-item {
  display: inline-flex; align-items: baseline; gap: var(--s1);
  padding: 1px var(--s2); border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface); color: var(--accent);
}
#hx .offmap-item:hover { border-color: var(--accent-line); text-decoration: none; }
#hx .offmap-n { color: var(--ink-weak); }

/* 拡大・縮小 */
#hx .zoom { display: flex; flex-direction: column; gap: var(--s1); }
#hx .zoom-btn {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--lift); cursor: pointer;
}
#hx .zoom-btn:hover { color: var(--ink); border-color: var(--line-strong); }
#hx .zoom-btn svg { width: 16px; height: 16px; }

/* 地図の上で指している国と件数。紹介欄のすぐ下に貼り付くと、どちらを
   読めばよいのか分からなくなるので、**間を空けて**少し大きく出す。 */
#hx .readout {
  margin-top: var(--s8); display: inline-flex; align-items: baseline;
  gap: var(--s3); min-height: 22px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--s2) var(--s4);
  box-shadow: var(--lift); font-size: 1rem;
}
#hx .readout[hidden] { display: none; }
#hx .readout-name { font-weight: 700; }
#hx .readout-n {
  font-size: 1.125rem; font-weight: 700; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* ── 右の引き出し（国を選んだとき）──────────────────── */
#hx .drawer {
  position: absolute; z-index: 3; top: 0; right: 0; bottom: 0;
  width: min(400px, 100%); display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: var(--lift);
}
#hx .drawer-head {
  flex: 0 0 auto; padding: var(--s4) var(--s5) var(--s3);
  border-bottom: 1px solid var(--line-soft);
}
#hx .drawer-eyebrow {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  color: var(--ink-weak); text-transform: uppercase;
}
#hx .drawer-title {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s3); margin-top: var(--s1);
}
#hx .drawer-name { font-size: 1.25rem; font-weight: 700; line-height: 1.35; }
#hx .drawer-shut {
  flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--radius); color: var(--ink-weak); cursor: pointer;
}
#hx .drawer-shut:hover { background: var(--surface-2); color: var(--ink); }
#hx .drawer-shut svg { width: 14px; height: 14px; }
#hx .drawer-n {
  margin-top: var(--s2); font-size: 1.75rem; font-weight: 700;
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
#hx .drawer-n small { font-size: .875rem; font-weight: 400; color: var(--ink-2); margin-left: var(--s1); }
#hx .drawer-body { flex: 1 1 auto; overflow-y: auto; }
#hx .drawer-foot {
  flex: 0 0 auto; padding: var(--s3) var(--s5);
  border-top: 1px solid var(--line-soft); background: var(--surface-2);
}
#hx .drawer-sect { padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line-soft); }
#hx .drawer-sect:last-child { border-bottom: 0; }
#hx .drawer-h {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  color: var(--ink-weak); text-transform: uppercase; margin-bottom: var(--s2);
}
#hx .bars { display: flex; flex-direction: column; gap: var(--s2); }
#hx .bar-row { display: block; }
#hx .bar-row:hover { text-decoration: none; }
#hx .bar-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s2); font-size: .875rem; line-height: 1.45;
}
#hx .bar-name { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
#hx .bar-row:hover .bar-name { color: var(--accent); text-decoration: underline; }
#hx .bar-n { flex: 0 0 auto; color: var(--ink-weak); font-variant-numeric: tabular-nums; }
/* a の中の span は既定で inline。display を与えないと高さも幅も効かず、
   棒がまったく出ない（実際に出なかった）。 */
#hx .bar-top { display: flex; }
/* 溝は敷かない。敷くと全幅の灰色の線になり、行の区切り罫に見えて
   棒の長さが読めなくなる（実際にそう見えた）。棒だけを置く。 */
#hx .bar-track { display: block; margin-top: 3px; height: 5px; }
#hx .bar-fill { display: block; height: 100%; background: var(--map-4); border-radius: 3px; }
#hx .names { display: flex; flex-direction: column; }
#hx .name-row {
  padding: var(--s2) 0; border-bottom: 1px solid var(--line-soft);
  display: block;
}
#hx .name-row:last-child { border-bottom: 0; }
#hx .name-row:hover { text-decoration: none; }
#hx .name-main { display: block; font-weight: 700; color: var(--accent); overflow-wrap: anywhere; }
#hx .name-row:hover .name-main { text-decoration: underline; }
#hx .name-sub { display: block; font-size: .8125rem; color: var(--ink-weak); margin-top: 2px; }

/* ══ 読み物の画面 ═══════════════════════════════════════════════════════ */

#hx-main { flex: 1 0 auto; width: 100%; padding: var(--s6) var(--s5) var(--s12); }
#hx .wrap { max-width: 1180px; margin: 0 auto; }
#hx .wrap-narrow { max-width: 820px; }
#hx .stack > * + * { margin-top: var(--s4); }

#hx .card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
#hx .card-pad { padding: var(--s5) var(--s6); }
#hx .card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); padding: var(--s4) var(--s6);
  border-bottom: 1px solid var(--line-soft);
}
#hx .card-foot {
  padding: var(--s3) var(--s6); border-top: 1px solid var(--line-soft);
  background: var(--surface-2);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

#hx .h1 { font-size: 1.5rem; font-weight: 700; line-height: 1.35; }
#hx .h2 { font-size: 1.125rem; font-weight: 700; line-height: 1.4; }
#hx .h3 { font-size: 1rem; font-weight: 700; }
#hx .lead { color: var(--ink-2); margin-top: var(--s2); }
#hx .muted { color: var(--ink-weak); }
#hx .eyebrow {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  color: var(--ink-weak); text-transform: uppercase;
}
#hx .small { font-size: .875rem; }

/* 戻る道。読み物の画面の先頭に必ず置く。 */
#hx .back {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-size: .875rem; font-weight: 600; margin-bottom: var(--s3);
}
#hx .back svg { width: 14px; height: 14px; }

#hx .btn {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-size: .9375rem; font-weight: 600;
  padding: var(--s2) var(--s4); border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink); cursor: pointer;
}
#hx .btn:hover { background: var(--surface-2); border-color: var(--accent-line); text-decoration: none; }
#hx .btn-main {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
#hx .btn-main:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
#hx .btn-quiet { border-color: transparent; background: transparent; color: var(--accent); }
#hx .btn-quiet:hover { background: var(--surface-2); }
#hx .btn[disabled] { opacity: .5; cursor: default; }
#hx .btn svg { width: 15px; height: 15px; }

#hx .chip {
  display: inline-block; font-size: .76rem; line-height: 1.5;
  padding: 1px var(--s2); border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink-2); white-space: nowrap;
}
#hx .chip + .chip { margin-left: var(--s1); }
#hx .chip-row { display: flex; flex-wrap: wrap; gap: var(--s1); }
#hx .chip-row .chip + .chip { margin-left: 0; }

/* 検索窓（読み物の画面に置くとき） */
#hx .find { display: flex; max-width: 640px; }
#hx .find-input {
  flex: 1; min-width: 0; font: inherit; font-size: 1rem;
  padding: var(--s3) var(--s4); color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
}
#hx .find-input:focus { outline: 2px solid var(--focus); outline-offset: -2px; }
#hx .find-go {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-weight: 700; color: var(--on-accent); background: var(--accent);
  border: 1px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0 var(--s5); cursor: pointer;
}
#hx .find-go:hover { background: var(--accent-strong); }
#hx .find-go[disabled] { opacity: .6; cursor: default; }
#hx .find-icon { width: 17px; height: 17px; }

/* 2段組（左に絞り込み） */
#hx .split { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s4); }
@media (max-width: 900px) { #hx .split { grid-template-columns: 1fr; } }

/* 絞り込み */
#hx .facets { align-self: start; position: sticky; top: var(--s4); }
#hx .facet-grp + .facet-grp { border-top: 1px solid var(--line-soft); }
#hx .facet-h {
  padding: var(--s3) var(--s4) var(--s1); font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; color: var(--ink-weak); text-transform: uppercase;
}
#hx .facet {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s4); color: var(--ink); font-size: .875rem; line-height: 1.45;
}
#hx .facet:hover { background: var(--surface-2); text-decoration: none; }
#hx .facet.is-on { background: var(--accent-soft); font-weight: 700; }
#hx .facet-box {
  flex: 0 0 auto; width: 13px; height: 13px; border-radius: 2px;
  border: 1px solid var(--line-strong); background: var(--surface);
}
#hx .facet.is-on .facet-box {
  border-color: var(--accent); background: var(--accent);
  box-shadow: inset 0 0 0 2px var(--surface);
}
#hx .facet-name {
  flex: 1; min-width: 0; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#hx .facet-n { flex: 0 0 auto; color: var(--ink-weak); font-size: .8125rem; font-variant-numeric: tabular-nums; }
#hx .facet-more { padding: var(--s1) var(--s4) var(--s3); font-size: .8125rem; color: var(--ink-weak); }
#hx .facet-clear { padding: var(--s2) var(--s4); border-top: 1px solid var(--line-soft); }

/* 1件＝1行 */
#hx .rec {
  display: flex; align-items: flex-start; gap: var(--s4);
  padding: var(--s3) var(--s6); border-bottom: 1px solid var(--line-soft);
}
#hx .rec:last-child { border-bottom: 0; }
#hx .rec:hover { background: var(--surface-2); }
#hx .rec-main { flex: 1; min-width: 0; }
#hx .rec-name {
  font-size: 1.0625rem; font-weight: 700; line-height: 1.4;
  color: var(--accent); overflow-wrap: anywhere;
}
#hx .rec:hover .rec-name { text-decoration: underline; }
#hx .rec-meta {
  margin-top: var(--s1); color: var(--ink-2); font-size: .875rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s3);
}
#hx .rec-meta > * { white-space: nowrap; }
#hx .rec-meta .sep { color: var(--line-strong); }
#hx .rec-src {
  margin-top: var(--s1); font-size: .875rem; color: var(--ink-weak);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3);
}
#hx .rec-where { max-width: min(34ch, 100%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hx .rec-grp {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s6); background: var(--surface-2);
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
#hx .recs > .rec-grp:first-child { border-top: 0; }
#hx .grp-icon { width: 22px; height: 16px; flex: 0 0 auto; }
#hx .grp-text { font-size: .8125rem; font-weight: 700; letter-spacing: .02em; }
#hx .close-exact { color: var(--close-1); }
#hx .close-contains { color: var(--close-2); }
#hx .close-near { color: var(--close-3); }
#hx .close-loose { color: var(--close-4); }

/* 表 */
#hx .tscroll { overflow-x: auto; }
#hx .table { font-size: .9375rem; }
#hx .table th {
  text-align: left; font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  color: var(--ink-weak); text-transform: uppercase;
  padding: var(--s2) var(--s6); border-bottom: 1px solid var(--line);
  background: var(--surface-2); white-space: nowrap;
}
#hx .table td {
  padding: var(--s3) var(--s6); border-bottom: 1px solid var(--line-soft); vertical-align: top;
}
#hx .table tr:last-child td { border-bottom: 0; }
#hx .table tbody tr:hover { background: var(--surface-2); }
#hx .table .c-n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
#hx .table .c-tight { white-space: nowrap; }
/* 1列目（名称・リスト名）に幅を寄せる。狭いと語の途中で改行して読めない。
   ただし寄せすぎると、列が増えたとき右端の列が見えなくなる（実際になった）。 */
#hx .table th:first-child, #hx .table td:first-child { width: 30%; min-width: 260px; }
#hx .t-main { font-weight: 700; }
#hx .t-sub { color: var(--ink-weak); font-size: .875rem; margin-top: 2px; }

/* 項目の並び */
#hx .meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s4) var(--s6); }
#hx .meta-k { font-size: .68rem; font-weight: 700; letter-spacing: .09em; color: var(--ink-weak); text-transform: uppercase; }
#hx .meta-v { margin-top: 2px; overflow-wrap: anywhere; }
#hx .meta-v-strong { font-size: 1.0625rem; font-weight: 700; }

/* 注意書き */
#hx .caveat {
  display: flex; align-items: flex-start; gap: var(--s2);
  background: var(--notice-bg); border: 1px solid var(--notice-line);
  border-left-width: 4px; border-radius: var(--radius);
  padding: var(--s2) var(--s3); color: var(--notice-ink); font-size: .9375rem;
}
#hx .caveat-icon { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; }

#hx .empty { padding: var(--s6); color: var(--ink-2); }
#hx .note { padding: var(--s3) var(--s6); color: var(--ink-weak); font-size: .875rem; }

/* ページ送り */
#hx .pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); padding: var(--s3) var(--s6);
  border-top: 1px solid var(--line-soft); background: var(--surface-2);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
#hx .pager-now { color: var(--ink-2); font-size: .9375rem; font-variant-numeric: tabular-nums; }
#hx .pager-moves { display: flex; gap: var(--s2); }
#hx .pager-icon { width: 15px; height: 15px; }

/* 入力 */
#hx .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s3) var(--s5); }
#hx .label { display: block; font-size: .8125rem; font-weight: 700; color: var(--ink-2); margin-bottom: var(--s1); }
#hx .input, #hx .select {
  width: 100%; font: inherit; font-size: .9375rem; padding: var(--s2) var(--s3);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
}
#hx .input:focus, #hx .select:focus { outline: 2px solid var(--focus); outline-offset: -2px; }
#hx .acts { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s4); }

/* ── 足 ─────────────────────────────────────────────── */
#hx-foot { flex: 0 0 auto; background: var(--band); color: var(--band-ink-weak); }
#hx .foot-in { max-width: 1180px; margin: 0 auto; padding: var(--s6) var(--s5); }
#hx .foot-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--s6) var(--s8); font-size: .875rem; line-height: 1.75;
}
#hx .foot-h {
  /* 和文なので書体は本文のまま。字間だけ広げて「小さな見出し」に見せる
     （等幅を当てると和文のグリフが字ごとに別の書体へ落ちてばらつく）。 */
  font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  color: #fff; text-transform: uppercase; margin-bottom: var(--s2);
}

/* 提供元の一画。ロゴ ＋ 一行の説明 ＋ 事業体への道（提供元サイトと同じ組み方）。 */
#hx .foot-name {
  display: flex; align-items: center; gap: var(--s2);
  color: #fff; font-size: 1rem; font-weight: 700; letter-spacing: .04em;
}
/* ロゴは幅だけ決めて、高さは viewBox の比に任せる（固定すると図が潰れる）。 */
#hx .foot-mark { width: 28px; height: auto; display: block; }
#hx .foot-tag { margin-top: var(--s2); max-width: 36em; }
#hx .foot-away { display: inline-flex; align-items: center; gap: var(--s1); }
#hx .foot-away-icon { width: 11px; height: 11px; }

/* 一番下の細い帯。著作権表示と収録の鮮度を1行に並べる。 */
#hx .foot-bottom {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--s1) var(--s4);
  margin-top: var(--s6); padding-top: var(--s4);
  border-top: 1px solid var(--band-line); font-size: .78rem;
}
#hx .foot-copy { font-family: var(--ff-mono); letter-spacing: .1em; }
#hx .foot-stamp { font-variant-numeric: tabular-nums; }
#hx-foot a { color: #9fb9e8; }

/* 地図の画面では足を細い帯にして、画面の中に収める。 */
#hx.is-app #hx-foot { display: none; }
#hx .app-foot {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--s1) var(--s4);
  padding: var(--s2) var(--s5); background: var(--band);
  color: var(--band-ink-weak); font-size: .78rem;
}
#hx .app-foot a { color: #9fb9e8; }

/* ── 濃い帯の際に入れる1本線 ────────────────────────────────
   2026-10-12 オーナー指定。提供元（Helix Lab）のサイトと見た目を合わせるため、
   ヘッダの下端とフッタの上端にだけブランドの帯色を 1px 入れる。
   ⛔ 色はこの一画で閉じる。面は紺のまま。線より太く使わない・他へ広げない。
      色は brand.svg の帯と同じで、新しい色を足したのではない。
   ⚠ 面の色（background）を決める規則より**後**に置く。前に置くと shorthand の
     background で background-image ごと消え、線が出ない。 */
#hx-top, #hx-foot, #hx .app-foot {
  --seam: linear-gradient(to right, #00D4AA, #0176D3 52%, #6B5CE7);
  background-image: var(--seam);
  background-repeat: no-repeat;
  background-size: 100% 1px;
}
#hx-top { background-position: bottom left; }
#hx-foot, #hx .app-foot { background-position: top left; }

/* ══ 幅が足りないとき ═══════════════════════════════════════════════════ */

@media (max-width: 860px) {
  /* 重ねるのをやめ、上から順に積む。狭い画面で引き出しを地図に重ねると、
     地図が完全に隠れて何も選べなくなる（実際にそうなった）。 */
  #hx.is-app { height: auto; min-height: 100vh; overflow: visible; }
  #hx-stage { display: flex; flex-direction: column; overflow: visible; }
  /* 高さを vh で決めない。地図の縦横比より高くすると、上下に広い空白が
     できて地図が小さく沈む（実際にそうなった）。viewBox の比に任せる。 */
  #hx .stage-map { position: relative; inset: auto; order: 2; height: auto; }
  #hx .world { height: auto; }
  #hx .over { position: static; padding: 0 var(--s3); }
  #hx .over-top { order: 1; padding-top: var(--s3); display: block; }
  #hx .over-bottom {
    order: 3; padding-top: var(--s3); padding-bottom: var(--s3);
    align-items: flex-start;
  }
  #hx .seek { width: 100%; }
  /* 紹介は幅いっぱいになる。見出しだけ少し落として、2行のまま収める。 */
  #hx .pitch { padding: var(--s3) var(--s4) var(--s4); }
  #hx .pitch-lead { font-size: 1.3125rem; }
  #hx .key-chip { width: 34px; }
  #hx-stage.has-drawer .over-bottom { right: auto; }
  #hx #hx-drawer-slot { order: 4; }
  #hx .drawer {
    position: static; width: 100%; box-shadow: none;
    border-left: 0; border-top: 1px solid var(--line);
  }
  #hx .drawer-body { overflow-y: visible; }
  #hx.is-app #hx-foot { display: block; }
}

@media (max-width: 720px) {
  #hx .top-in { height: auto; flex-wrap: wrap; gap: 0 var(--s3); padding: var(--s2) var(--s3); }
  /* 折り返すときは「ロゴと問い合わせ」を1行目、切り替えを2行目にする。
     順を決めないと切り替えが幅いっぱいを取り、問い合わせが3行目へ落ちる。 */
  #hx .top-nav { order: 3; width: 100%; gap: var(--s4); margin: var(--s1) 0 0; }
  #hx .top-away { order: 2; margin-left: auto; }
  #hx .top-div { display: none; }
  #hx-main { padding: var(--s4) var(--s3) var(--s8); }
  #hx .card-head, #hx .rec, #hx .pager, #hx .rec-grp, #hx .note, #hx .empty {
    padding-left: var(--s3); padding-right: var(--s3);
  }
  #hx .card-pad, #hx .card-foot { padding: var(--s4) var(--s3); }
  #hx .table th, #hx .table td { padding-left: var(--s3); padding-right: var(--s3); }
  #hx .table th:first-child, #hx .table td:first-child { min-width: 0; width: auto; }
  #hx .card-head { flex-wrap: wrap; gap: var(--s1); }
  #hx .rec { flex-direction: column; gap: var(--s1); }
  #hx .drawer-sect, #hx .drawer-head, #hx .drawer-foot { padding-left: var(--s4); padding-right: var(--s4); }
}