/* =====================================================================
   usdata design system v2 — "civic intelligence" editorial
   手書きCSS（Viteビルド非依存・共有レンタルで堅牢）。11_DESIGN_GUIDELINES.md 準拠。
   - デザイントークン（CSS変数）で一元管理 / モバイルファースト
   - 画像レスでビジュアル化（オーロラ/グラデ/グレイン/グラス）
   - スクロール演出は progressive enhancement（html.js でゲート、no-JSでも全表示）
   ===================================================================== */

:root {
  /* ---- deep surfaces (hero / footer / source) — cool indigo-navy ---- */
  --navy-950: #060912;
  --navy-900: #0a0e1c;
  --navy-800: #111729;
  --navy-700: #1a2342;
  --navy-600: #273156;
  --ink: #0e1726;
  --ink-2: #1c2740;
  --ink-soft: #364257;

  /* ---- paper / surfaces — cool near-white ---- */
  --paper: #f6f7f9;
  --paper-2: #ffffff;
  --paper-3: #f1f3f7;
  --line: #e9ebf1;
  --line-2: #dde1ea;
  --text: #232f42;
  --muted: #66718a;
  --muted-2: #9aa3b6;

  /* ---- accents — modern indigo + cyan（amber* はインディゴへ再ポイント＝全体をクール化）---- */
  --amber: #6366f1;
  --amber-bright: #818cf8;
  --amber-deep: #4f46e5;
  --cyan: #0ea5b7;
  --cyan-bright: #22d3ee;
  --cyan-glow: #67e8f9;
  --danger: #ef4444;

  /* ---- gradients ---- */
  --grad-ink: linear-gradient(165deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
  --grad-amber: linear-gradient(135deg, #818cf8, #6366f1 52%, #4f46e5);
  --grad-cyan: linear-gradient(135deg, #22d3ee, #0ea5b7);
  --grad-brand: linear-gradient(110deg, #818cf8, #22d3ee);
  --grad-text: linear-gradient(100deg, #fff 0%, #c7d2fe 52%, #67e8f9 100%);

  /* ---- type — modern webfont (Inter + Noto Sans JP) ---- */
  --sans: "Inter", "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --num: "Inter", "Noto Sans JP", ui-monospace, monospace;

  /* ---- shape / depth — softer, airier ---- */
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow: 0 1px 3px rgba(15, 23, 42, .04), 0 16px 36px -18px rgba(15, 23, 42, .16);
  --shadow-lg: 0 40px 80px -32px rgba(15, 23, 42, .38), 0 12px 28px -16px rgba(15, 23, 42, .18);
  --glow-amber: 0 14px 46px -10px rgba(99, 102, 241, .5);
  --glow-cyan: 0 14px 46px -10px rgba(34, 211, 238, .42);
  --ring: 0 0 0 3px rgba(99, 102, 241, .4);
  --maxw: 1160px;
  --ease: cubic-bezier(.22, .61, .27, 1);
  --spring: cubic-bezier(.34, 1.56, .46, 1);

  /* subtle film grain (data-URI SVG fractal noise) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
::selection { background: rgba(54, 194, 207, .26); color: var(--ink); }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background:
    radial-gradient(130% 120% at 100% -10%, rgba(34, 211, 238, .06), transparent 45%),
    radial-gradient(120% 120% at -10% 0%, rgba(99, 102, 241, .06), transparent 42%),
    var(--paper);
  line-height: 1.78;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* whole-page grain veil */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grain); background-size: 180px; opacity: .012; mix-blend-mode: multiply;
}
body > * { position: relative; z-index: 1; }

h1, h2, h3, h4 { line-height: 1.32; letter-spacing: .005em; margin: 0; text-wrap: balance; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; }

/* scrollbar (webkit) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--navy-700) 28%, transparent); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--navy-700) 45%, transparent); background-clip: padding-box; }

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--r-sm) 0; z-index: 200;
}
.skip:focus { left: 0; }

/* top scroll-progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 120;
  width: 100%; transform: scaleX(var(--sp, 0)); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--amber), var(--cyan-bright));
  box-shadow: 0 0 12px rgba(54, 194, 207, .6); pointer-events: none;
}

/* =====================================================================
   header
   ===================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(243, 240, 233, .72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.scrolled {
  background: rgba(247, 245, 240, .9);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 30px -18px rgba(11, 31, 58, .4);
}
.site-header .wrap { display: flex; align-items: center; gap: 18px; height: 66px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: .02em; transition: transform .2s var(--spring); }
.brand:hover { transform: translateY(-1px); }
.brand .mark { width: 32px; height: 32px; flex: none; filter: drop-shadow(0 4px 10px rgba(11, 31, 58, .25)); }
.brand .name { color: var(--ink); font-size: 1.04rem; }
.brand .name b { color: var(--amber-deep); }
.brand .sub { display: block; font-size: .62rem; font-weight: 700; color: var(--muted); letter-spacing: .16em; }
.nav { margin-left: auto; display: none; gap: 2px; }
.nav a {
  position: relative; font-size: .84rem; font-weight: 600; color: var(--ink-soft);
  padding: 8px 13px; border-radius: 999px; transition: color .2s var(--ease), background .2s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 5px; height: 2px; border-radius: 2px;
  background: var(--grad-cyan); transform: scaleX(0); transform-origin: 0 50%; transition: transform .25s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }
@media (min-width: 900px) { .nav { display: flex; } }

.lang-switch { position: relative; margin-left: 8px; }
.lang-switch > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 800; letter-spacing: .04em; color: var(--ink-soft); padding: 7px 13px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper-2); box-shadow: var(--shadow-xs); transition: border-color .2s, color .2s, box-shadow .2s; }
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary:hover { box-shadow: var(--shadow); }
.lang-switch > summary .caret { font-size: .7em; color: var(--muted); transition: transform .2s var(--ease); }
.lang-switch[open] > summary { border-color: var(--cyan); color: var(--ink); }
.lang-switch[open] > summary .caret { transform: rotate(180deg); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-lg); min-width: 140px; overflow: hidden; z-index: 80; animation: pop .18s var(--spring) both; }
.lang-menu a { display: block; padding: 10px 15px; font-size: .85rem; color: var(--ink-soft); transition: background .15s, color .15s; }
.lang-menu a:hover { background: rgba(11, 31, 58, .06); color: var(--ink); }
.lang-menu a.on { color: var(--cyan); font-weight: 700; }
@media (max-width: 899px) { .lang-switch { margin-left: auto; } }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }

/* =====================================================================
   hero — animated aurora
   ===================================================================== */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--grad-ink);
  color: #eef2f7;
}
/* drifting aurora blobs */
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 150%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(42% 52% at 80% 8%, rgba(34, 211, 238, .42), transparent 62%),
    radial-gradient(40% 50% at 14% 6%, rgba(129, 140, 248, .5), transparent 62%),
    radial-gradient(46% 56% at 58% 98%, rgba(99, 102, 241, .4), transparent 62%);
  filter: blur(40px) saturate(115%);
  animation: aurora 20s ease-in-out infinite alternate;
}
/* fine grid overlay */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 90% at 70% 0%, #000 30%, transparent 78%);
}
@keyframes aurora {
  0% { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1.05); }
  50% { transform: translate3d(4%, 3%, 0) rotate(8deg) scale(1.15); }
  100% { transform: translate3d(-2%, 4%, 0) rotate(-6deg) scale(1.08); }
}
.hero .wrap { position: relative; z-index: 1; padding-block: clamp(56px, 9vw, 96px) clamp(60px, 9vw, 104px); }
.kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .73rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #d6f3f6; background: rgba(54, 194, 207, .12); border: 1px solid rgba(54, 194, 207, .34);
  padding: 7px 14px; border-radius: 999px; backdrop-filter: blur(4px);
}
.kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan-bright); box-shadow: 0 0 0 0 rgba(54, 194, 207, .5); animation: ping 2.4s var(--ease) infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(54, 194, 207, .5); } 70%, 100% { box-shadow: 0 0 0 8px rgba(54, 194, 207, 0); } }
.hero h1 {
  margin-top: 22px; font-size: clamp(2.1rem, 6.6vw, 3.9rem); font-weight: 800; letter-spacing: -.01em;
  color: #fff; line-height: 1.16;
}
.hero h1 .hl {
  background: linear-gradient(100deg, var(--amber-bright), var(--amber) 45%, var(--cyan-bright));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lead { margin-top: 20px; max-width: 42em; font-size: clamp(1rem, 2.4vw, 1.2rem); color: #c8d3e2; }
.cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 13px; }
.btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: .94rem; padding: 13px 24px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  transition: transform .18s var(--spring), box-shadow .25s var(--ease), background .25s var(--ease);
}
.btn::after { /* shine sweep */
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-18deg);
  transition: left .6s var(--ease);
}
.btn:hover::after { left: 130%; }
.btn-primary { background: var(--grad-amber); color: #fff; box-shadow: var(--glow-amber); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 50px -8px rgba(99, 102, 241, .6); }
.btn-ghost { background: rgba(255, 255, 255, .07); color: #eef2f7; border-color: rgba(255, 255, 255, .26); backdrop-filter: blur(6px); }
.btn-ghost:hover { background: rgba(255, 255, 255, .14); transform: translateY(-2px); }

/* stat strip — glass cards */
.stats {
  margin-top: 46px; display: grid; grid-template-columns: 1fr; gap: 14px;
}
.stats .cell {
  position: relative; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r); padding: 20px 22px; backdrop-filter: blur(8px); overflow: hidden;
  transition: transform .25s var(--spring), background .25s var(--ease);
}
.stats .cell::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(var(--amber), var(--cyan-bright)); opacity: .9; }
.stats .cell:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .1); }
.stats .v { font-size: 1.7rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stats .v small { color: var(--amber-bright); font-size: 1.05rem; }
.stats .k { font-size: .82rem; color: #b7c2d1; margin-top: 3px; }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(3, 1fr); } }

/* =====================================================================
   sections
   ===================================================================== */
.section { padding-block: clamp(52px, 8vw, 80px); }
.section-head { max-width: 48em; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--grad-cyan); }
.section h2 { margin-top: 14px; font-size: clamp(1.6rem, 4vw, 2.3rem); color: var(--ink); letter-spacing: -.01em; }
.section .desc { margin-top: 13px; color: var(--muted); font-size: 1.04rem; }

/* category grid */
.cat-grid { margin-top: 36px; display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
.cat {
  position: relative; background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 24px 22px 22px; box-shadow: var(--shadow); overflow: hidden;
  transition: transform .22s var(--spring), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
/* pointer spotlight */
.cat::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease);
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--acc, var(--amber)) 16%, transparent), transparent 70%);
}
.cat:hover::after { opacity: 1; }
.cat::before { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%; background: linear-gradient(90deg, var(--acc, var(--amber)), color-mix(in srgb, var(--acc, var(--amber)) 30%, transparent)); }
.cat:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--acc, var(--amber)) 40%, var(--line-2)); }
.cat .tag {
  position: relative; display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--acc, var(--amber-deep)); background: color-mix(in srgb, var(--acc, var(--amber)) 13%, white);
  border: 1px solid color-mix(in srgb, var(--acc, var(--amber)) 26%, transparent);
  padding: 4px 11px; border-radius: 999px;
}
.cat h3 { position: relative; margin-top: 14px; font-size: 1.18rem; color: var(--ink); }
.cat p { position: relative; margin: 9px 0 0; color: var(--muted); font-size: .92rem; line-height: 1.7; }
.cat .more { position: relative; margin-top: 16px; font-size: .82rem; font-weight: 800; color: var(--acc, var(--ink)); display: inline-flex; align-items: center; gap: 5px; }
.cat .more::after { content: "→"; transition: transform .22s var(--spring); }
.cat:hover .more::after { transform: translateX(5px); }
a.cat.is-live { display: block; cursor: pointer; }
a.cat.is-live .more::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .2); display: inline-block; }

/* value section */
.value { position: relative; background: var(--paper-3); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.value-grid { margin-top: 34px; display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .value-grid { grid-template-columns: repeat(3, 1fr); } }
.value-item { position: relative; padding-left: 4px; }
.value-item .ic {
  width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
  background: var(--grad-ink); color: var(--amber-bright); font-weight: 800; font-size: 1.2rem;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.value-item h3 { margin-top: 16px; font-size: 1.16rem; color: var(--ink); }
.value-item p { margin-top: 9px; color: var(--muted); font-size: .95rem; }

/* progress note */
.note {
  margin-top: 34px; display: flex; gap: 15px; align-items: flex-start;
  background: linear-gradient(120deg, color-mix(in srgb, var(--cyan) 9%, var(--paper-2)), var(--paper-2));
  border: 1px solid color-mix(in srgb, var(--cyan) 28%, var(--line));
  border-radius: var(--r-lg); padding: 20px 22px; box-shadow: var(--shadow-xs);
}
.note .badge { flex: none; font-size: .66rem; font-weight: 800; letter-spacing: .06em; color: #05484f;
  background: color-mix(in srgb, var(--cyan) 26%, white); padding: 6px 11px; border-radius: 999px; }
.note p { margin: 0; color: var(--ink-soft); font-size: .94rem; }
.note p a { color: var(--cyan); font-weight: 700; }
.note p a:hover { text-decoration: underline; }

/* disclaimer band */
.disclaimer { background: var(--navy-900); color: #aeb9c8; }
.disclaimer .wrap { padding-block: 28px; font-size: .82rem; }
.disclaimer strong { color: #e7edf4; }

/* =====================================================================
   footer
   ===================================================================== */
.site-footer { position: relative; background: var(--navy-900); color: #9fabbb; overflow: hidden; }
.site-footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(129, 140, 248, .6), rgba(34, 211, 238, .6), transparent); }
.site-footer .wrap { padding-block: 48px 30px; display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .site-footer .wrap { grid-template-columns: 1.5fr 1fr 1fr; } }
.site-footer h4 { color: #e7edf4; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 14px; }
.site-footer a { color: #b1bdcc; font-size: .9rem; display: block; padding: 4px 0; transition: color .18s, transform .18s; width: fit-content; }
.site-footer a:hover { color: var(--amber-bright); transform: translateX(3px); }
.foot-brand .name { color: #fff; font-weight: 800; font-size: 1.05rem; }
.foot-brand p { font-size: .87rem; line-height: 1.75; margin: 12px 0 0; max-width: 32em; }
.foot-bottom { border-top: 1px solid rgba(255, 255, 255, .08); }
.foot-bottom .wrap { padding-block: 18px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; font-size: .78rem; color: var(--muted-2); }

/* =====================================================================
   motion / scroll reveal
   ===================================================================== */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.reveal { animation: rise .8s var(--ease) both; }
.reveal.d1 { animation-delay: .08s; }
.reveal.d2 { animation-delay: .16s; }
.reveal.d3 { animation-delay: .24s; }

/* JS scroll reveal — hidden state gated on html.js (set synchronously only when
   IntersectionObserver exists). usdata.js adds .is-in as elements enter the viewport,
   and removes html.js as a safety net if the script fails to load → no-JS shows everything. */
html.js :where(.section-head, .cat, .art-card, .ind-card, .value-item, .note, .vuln-facts,
  .impact-box, .kp-block, .faq-block, .source-box, .company-dir, .rank-list, .recent-list, .doc-lead) {
  opacity: 0; transform: translateY(22px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay: var(--d, 0ms); will-change: opacity, transform;
}
html.js .is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  html.js :where(.section-head, .cat, .art-card, .ind-card, .value-item, .note, .vuln-facts,
    .impact-box, .kp-block, .faq-block, .source-box, .company-dir, .rank-list, .recent-list, .doc-lead) {
    opacity: 1 !important; transform: none !important;
  }
  html { scroll-behavior: auto; }
}

/* =====================================================================
   service pages — page hero
   ===================================================================== */
.wrap-narrow { max-width: 780px; }

.page-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--grad-ink); color: #eef2f7; }
.page-hero::before {
  content: ""; position: absolute; inset: -30% -10% auto auto; width: 70%; height: 160%; z-index: -1; pointer-events: none;
  background: radial-gradient(45% 45% at 80% 20%, color-mix(in srgb, var(--acc, var(--cyan-bright)) 55%, transparent), transparent 65%),
              radial-gradient(40% 40% at 95% 70%, rgba(60, 110, 220, .35), transparent 60%);
  filter: blur(26px); animation: aurora 22s ease-in-out infinite alternate;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .4; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(120% 100% at 80% 0%, #000 30%, transparent 75%);
}
.page-hero .wrap { position: relative; z-index: 1; padding-block: 44px 50px; }
.page-hero .eyebrow { color: var(--acc, var(--cyan-bright)); }
.page-hero .eyebrow::before { background: var(--acc, var(--cyan-bright)); }
.page-hero h1 { margin-top: 12px; font-size: clamp(1.7rem, 4.8vw, 2.7rem); color: #fff; letter-spacing: -.01em; }
.page-hero .lead-sm { margin-top: 14px; max-width: 52em; color: #c8d3e2; font-size: 1rem; }
.page-hero .lead-sm a { color: var(--amber-bright); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.page-hero .lead-sm strong { color: #fff; }

.crumbs { font-size: .8rem; color: #94a3b7; display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.crumbs a { color: #bcc7d6; transition: color .18s; }
.crumbs a:hover { color: var(--amber-bright); }
.page-hero .crumbs { margin-bottom: 8px; }
/* プロフィール（企業/省庁）のダッシュボード型ヒーロー */
.page-hero .hero-sub { color: #9fb6d6; font-weight: 600; font-size: .5em; letter-spacing: 0; }
.prof-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.prof-badge { font-size: .7rem; font-weight: 800; padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); color: #eef2f7; letter-spacing: .02em; }
.prof-stats { display: flex; flex-wrap: wrap; gap: 16px 36px; margin-top: 24px; }
.prof-stat { display: flex; flex-direction: column; gap: 3px; }
.prof-stat .psv { font-family: var(--num); font-weight: 800; font-size: 1.6rem; color: #fff; line-height: 1.05; }
.prof-stat .psl { font-size: .73rem; color: #9fb6d6; letter-spacing: .04em; }
/* 横断検索フォーム（ヒーロー上） */
.search-form { display: flex; gap: 8px; margin-top: 20px; max-width: 640px; }
.search-form input[type="search"] { flex: 1 1 auto; min-width: 0; padding: 12px 16px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .96); color: var(--ink); font-size: 1rem; }
.search-form button { flex: none; padding: 12px 22px; border-radius: 10px; border: none; background: var(--acc, var(--cyan)); color: #fff; font-weight: 800; cursor: pointer; transition: filter .15s; }
.search-form button:hover { filter: brightness(1.1); }
.profile-intro-lead { margin-top: 22px; color: var(--ink-soft); line-height: 1.85; font-size: 1.01rem; }

.inline-disclaimer { margin-top: 16px; font-size: .8rem; color: #a4b4c7; border-left: 3px solid rgba(129, 140, 248, .6); padding: 4px 0 4px 13px; }
.inline-disclaimer.block { color: var(--muted); border-left-color: color-mix(in srgb, var(--amber) 50%, var(--line-2)); background: var(--paper-2); padding: 14px 18px; border-radius: var(--r); margin-top: 26px; box-shadow: var(--shadow-xs); }
.inline-disclaimer.block p { margin: 4px 0; }

/* =====================================================================
   badges / chips
   ===================================================================== */
.badge-type { display: inline-block; color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .04em; padding: 4px 11px; border-radius: 999px; box-shadow: 0 4px 12px -4px rgba(11, 31, 58, .4); }
.badge-type.sm { font-size: .62rem; padding: 3px 8px; flex: none; box-shadow: none; }
.badge-soft { display: inline-block; font-size: .7rem; font-weight: 700; color: var(--ink-soft); background: color-mix(in srgb, var(--navy-700) 7%, var(--paper-2)); border: 1px solid var(--line); padding: 3px 10px; border-radius: 999px; }

/* =====================================================================
   featured article cards
   ===================================================================== */
.article-grid { margin-top: 32px; display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .article-grid { grid-template-columns: repeat(2, 1fr); } }
.art-card {
  position: relative; isolation: isolate; background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px 22px 20px; box-shadow: var(--shadow); overflow: hidden;
  transition: transform .22s var(--spring), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.art-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(var(--acc, var(--amber)), color-mix(in srgb, var(--acc, var(--amber)) 35%, transparent)); }
.art-card::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s var(--ease); background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--acc, var(--amber)) 10%, transparent), transparent 70%); }
.art-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--acc, var(--amber)) 32%, var(--line-2)); }
.art-card:hover::after { opacity: 1; }
.art-meta { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; font-size: .78rem; }
.art-card h3 { margin: 13px 0 0; font-size: 1.14rem; line-height: 1.48; }
.art-card h3 a { color: var(--ink); background-image: linear-gradient(var(--cyan), var(--cyan)); background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .3s var(--ease), color .2s; }
.art-card h3 a:hover { color: var(--cyan); background-size: 100% 2px; }
.art-sum { margin: 11px 0 0; color: var(--muted); font-size: .9rem; }
.art-points { margin: 13px 0 0; padding-left: 4px; list-style: none; color: var(--ink-soft); font-size: .86rem; }
.art-points li { position: relative; padding: 3px 0 3px 18px; }
.art-points li::before { content: ""; position: absolute; left: 2px; top: .85em; width: 6px; height: 6px; border-radius: 50%; background: var(--acc, var(--cyan)); }
.art-more { display: inline-flex; align-items: center; gap: 5px; margin-top: 16px; font-size: .85rem; font-weight: 800; color: var(--cyan); }
.art-more::after { content: "→"; transition: transform .2s var(--spring); }
.art-more:hover { color: var(--ink); }
.art-card:hover .art-more::after { transform: translateX(4px); }

/* =====================================================================
   recent feed
   ===================================================================== */
.recent-sec { background: var(--paper-3); border-top: 1px solid var(--line); }
.recent-list { margin: 26px 0 0; padding: 0; list-style: none; }
.recent-list li { display: flex; flex-wrap: wrap; gap: 7px 13px; align-items: baseline; padding: 15px 14px; border-radius: var(--r); border: 1px solid transparent; transition: background .2s var(--ease), border-color .2s, transform .2s var(--ease); }
.recent-list li + li { box-shadow: 0 -1px 0 var(--line); }
.recent-list li:hover { background: var(--paper-2); border-color: var(--line); box-shadow: var(--shadow); transform: translateX(4px); }
.rc-title { color: var(--ink); font-weight: 600; font-size: .94rem; flex: 1 1 60%; }
.rc-title:hover { color: var(--cyan); }
.rc-meta { font-size: .8rem; }
.source-note { margin-top: 18px; font-size: .82rem; color: var(--muted); }
.source-note a { color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; }

/* =====================================================================
   article (detail)
   ===================================================================== */
.doc { padding-block: 40px 64px; }
.doc-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.doc-title { margin-top: 16px; font-size: clamp(1.6rem, 4.6vw, 2.35rem); line-height: 1.34; color: var(--ink); letter-spacing: -.01em; }
.doc-meta { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: .83rem; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.doc-meta .dot { color: var(--line-2); }
.doc-lead {
  position: relative; overflow: hidden; margin-top: 26px; font-size: clamp(1.08rem, 2.3vw, 1.2rem); font-weight: 600; color: var(--ink); line-height: 1.9;
  padding: 22px 26px 22px 28px; border-radius: var(--r-lg);
  background: linear-gradient(120deg, color-mix(in srgb, var(--amber) 10%, var(--paper-2)), var(--paper-2));
  border: 1px solid color-mix(in srgb, var(--amber) 26%, var(--line)); box-shadow: var(--shadow-xs);
}
.doc-lead::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 4px; background: var(--grad-amber); }
/* プロフィール導入文（会社/省庁概要＝説明はここに一本化） */
.profile-intro { margin-top: 18px; }
.profile-intro p { margin: 0 0 13px; color: var(--ink-soft); line-height: 1.95; font-size: 1.01rem; }
.profile-intro p:first-child { color: var(--ink); font-size: 1.09rem; font-weight: 500; }
.profile-intro p:last-child { margin-bottom: 0; }

.block-h { position: relative; font-size: 1.2rem; font-weight: 700; color: var(--ink); margin: 0 0 16px; letter-spacing: -.01em; display: flex; align-items: center; gap: 11px; }
.block-h::before { content: ""; flex: none; width: 15px; height: 15px; border-radius: 5px; background: var(--grad-brand); box-shadow: var(--glow-cyan); }

.kp-block { margin-top: 36px; background: linear-gradient(135deg, color-mix(in srgb, var(--cyan) 7%, var(--paper-2)), var(--paper-2)); border: 1px solid color-mix(in srgb, var(--cyan) 24%, var(--line)); border-radius: var(--r-lg); padding: 22px 24px; box-shadow: var(--shadow-xs); }
.kp-list { margin: 0; padding-left: 2px; list-style: none; }
.kp-list li { position: relative; padding: 7px 0 7px 28px; color: var(--ink-soft); font-size: .97rem; line-height: 1.7; }
.kp-list li::before { content: ""; position: absolute; left: 3px; top: 1.05em; width: 9px; height: 9px; border-radius: 3px; background: var(--grad-cyan); box-shadow: var(--glow-cyan); }

.doc-body { margin-top: 34px; }
.doc-body p { margin: 0 0 22px; line-height: 2.05; color: var(--text); font-size: 1.05rem; text-wrap: pretty; }
/* lead-in: first paragraph gets emphasis + an editorial drop cap */
.doc-body > p:first-of-type { font-size: 1.1rem; color: var(--ink); }

/* impact / fact block. 概要(=ul.kp-list) → カラフルなファクト・タイル / 段落 → コールアウト */
.impact-box { margin-top: 32px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; box-shadow: var(--shadow-xs); }
.impact-box p { margin: 0; color: var(--ink-soft); line-height: 1.9; }
/* ファクト＝「基本情報」：詰め込みカードをやめ、読みやすい定義リスト（ラベル｜値）に。
   長い識別子（CVE-…）やCVSSベクタが途中で割れない／高さ不揃いの空白も出ない。 */
.impact-box .kp-list { display: grid; gap: 0; grid-template-columns: 1fr; padding: 0; margin: 6px 0 0; }
.impact-box .kp-list li { display: grid; grid-template-columns: minmax(92px, 22%) 1fr; gap: 4px 22px; align-items: baseline; padding: 12px 2px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: .98rem; font-weight: 500; line-height: 1.65; }
.impact-box .kp-list li:first-child { padding-top: 2px; }
.impact-box .kp-list li:last-child { border-bottom: none; padding-bottom: 2px; }
.impact-box .kp-list li::before { content: none; }
.impact-box .kp-list li strong { font-family: var(--sans); font-size: .83rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--muted); }
.impact-box .kp-list li .fact-v { overflow-wrap: break-word; word-break: break-word; }
@media (max-width: 460px) {
  .impact-box .kp-list li { grid-template-columns: 1fr; gap: 1px; padding: 10px 2px; }
  .impact-box .kp-list li strong { font-size: .78rem; }
}
/* paragraph callout (日本への含意 / 最新アクション 等) */
.impact-box:has(> p) { position: relative; padding-left: 30px; background: linear-gradient(120deg, color-mix(in srgb, var(--amber) 7%, var(--paper-2)), var(--paper-2)); border-color: color-mix(in srgb, var(--amber) 26%, var(--line)); }
.impact-box:has(> p)::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 4px; border-radius: 4px; background: var(--grad-amber); }

/* 一次情報の原文スニペット（中立トーン・アンバー強調を上書き） */
.impact-box.src-quote { background: var(--paper-3); border-color: var(--line); }
.impact-box.src-quote::before { background: var(--grad-cyan); }
.impact-box.src-quote .num { font-size: .9rem; color: var(--ink-soft); line-height: 1.75; overflow-wrap: anywhere; }

/* （セクション見出しはクリーンなグラデのアクセントドットで統一＝.block-h）*/

.faq-block { margin-top: 36px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--r); padding: 0; margin-bottom: 12px; background: var(--paper-2); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.faq-item:hover { border-color: var(--line-2); box-shadow: var(--shadow-xs); }
.faq-item[open] { border-color: color-mix(in srgb, var(--cyan) 32%, var(--line)); box-shadow: var(--shadow); }
.faq-item summary { cursor: pointer; padding: 16px 48px 16px 18px; font-weight: 700; color: var(--ink); list-style: none; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--cyan) 14%, white); color: var(--cyan); font-weight: 700; transition: transform .25s var(--spring), background .2s; }
.faq-item[open] summary::after { content: "−"; transform: translateY(-50%) rotate(180deg); background: var(--grad-cyan); color: #fff; }
.faq-a { padding: 0 18px 18px; color: var(--muted); line-height: 1.85; font-size: .94rem; animation: fadein .3s var(--ease); }
@keyframes fadein { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.source-box { position: relative; margin-top: 38px; background: var(--grad-ink); color: #c6d0dd; border-radius: var(--r-lg); padding: 24px 26px; overflow: hidden; box-shadow: var(--shadow); }
.source-box::before { content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none; background-image: var(--grain); background-size: 160px; mix-blend-mode: overlay; }
.source-box .block-h { color: #fff; }
.source-box .block-h::before { background: var(--grad-brand); box-shadow: none; }
.source-box .muted { color: #9fb0c4; font-size: .86rem; }
.source-links { margin: 14px 0 0; padding-left: 4px; list-style: none; }
.source-links li { position: relative; margin: 7px 0; padding-left: 20px; color: #c6d0dd; font-size: .9rem; }
.source-links li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan-bright); }
.source-links a { color: var(--cyan-glow); text-decoration: underline; text-underline-offset: 2px; }
.source-links a:hover { color: #fff; }

.tag-row { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.tag-chip { font-size: .78rem; color: var(--ink-soft); background: color-mix(in srgb, var(--navy-700) 6%, var(--paper-2)); border: 1px solid var(--line); padding: 5px 13px; border-radius: 999px; transition: transform .15s var(--spring), border-color .2s, color .2s; }
.tag-chip:hover { transform: translateY(-2px); border-color: var(--cyan); color: var(--cyan); }
/* ページ下部の関連/戻るリンク＝ピル（ボタン）化。単独でも複数でも整って見える。 */
.back-link { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 10px; }
.back-link a, .back-link .cmp-cta {
    display: inline-flex; align-items: center; gap: 7px; margin: 0;
    padding: 9px 16px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--paper-2);
    color: var(--ink); font-weight: 650; font-size: .9rem; text-decoration: none;
    transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
}
.back-link a:hover, .back-link .cmp-cta:hover {
    border-color: color-mix(in srgb, var(--cyan) 55%, transparent);
    background: var(--paper); box-shadow: var(--shadow-xs); transform: translateY(-1px); text-decoration: none;
}
.back-link .cmp-cta {
    border-color: color-mix(in srgb, var(--acc, var(--cyan)) 45%, transparent);
    color: var(--acc, var(--cyan)); font-weight: 700;
}
.back-link .cmp-cta:hover { border-color: var(--acc, var(--cyan)); }

/* =====================================================================
   security pages
   ===================================================================== */
.sev-badge { display: inline-block; color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .03em; padding: 4px 11px; border-radius: 999px; background: #dc2626; box-shadow: 0 4px 12px -4px rgba(220, 38, 38, .6); }
.sev-badge.sm { font-size: .62rem; padding: 3px 8px; flex: none; box-shadow: none; }
.sev-badge.exploited { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.sev-text { font-weight: 800; }
.badge-exploited { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .03em; padding: 4px 11px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, #991b1b, #7f1d1d); }
.chip-ransom { display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .03em; padding: 3px 10px; border-radius: 999px; color: #7f1d1d; background: #fee2e2; border: 1px solid #fca5a5; }
.chip-ransom.sm { font-size: .6rem; padding: 2px 8px; flex: none; }

.vuln-facts { margin-top: 30px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: grid; grid-template-columns: 1fr; box-shadow: var(--shadow-xs); }
@media (min-width: 620px) { .vuln-facts { grid-template-columns: repeat(2, 1fr); } }
.vuln-facts .vf { display: flex; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line); align-items: baseline; transition: background .18s; }
.vuln-facts .vf:hover { background: var(--paper-3); }
.vuln-facts .vf-k { flex: none; width: 6.5em; color: var(--muted); font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.vuln-facts .vf-v { color: var(--ink-soft); font-size: .92rem; word-break: break-word; }
.vuln-facts .vf-v.small, .vuln-facts .num.small { font-size: .8rem; }
@media (min-width: 620px) { .vuln-facts .vf:nth-child(odd):last-child { border-bottom: none; } }

/* =====================================================================
   company pages
   ===================================================================== */
.company-dir { margin-top: 26px; display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px) { .company-dir { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .company-dir { grid-template-columns: repeat(4, 1fr); } }
.co-chip { display: flex; flex-direction: column; gap: 3px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 15px; box-shadow: var(--shadow-xs); transition: transform .16s var(--spring), box-shadow .2s, border-color .2s; }
.co-chip:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--cyan); }
.co-ticker { font-family: var(--num); font-weight: 800; font-size: .94rem; color: var(--ink); letter-spacing: .02em; }
.co-name { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ev-chip { display: inline-block; font-size: .72rem; color: var(--ink-soft); background: color-mix(in srgb, var(--amber) 14%, white); border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--line)); padding: 2px 9px; border-radius: 999px; margin: 2px 2px 0 0; }
.vuln-facts .ev-chip { margin-top: 0; }

/* =====================================================================
   spending / grants ranking
   ===================================================================== */
.amount-badge { display: inline-block; font-family: var(--num); font-weight: 800; font-size: .82rem; color: var(--amber-deep); background: color-mix(in srgb, var(--amber) 14%, white); border: 1px solid color-mix(in srgb, var(--amber) 34%, var(--line)); padding: 3px 11px; border-radius: 999px; }
.amount-badge.lg { font-size: 1rem; padding: 5px 15px; }

.rank-list { margin: 28px 0 0; padding: 0; list-style: none; counter-reset: rank; display: grid; gap: 4px; }
.rank-row { position: relative; display: flex; gap: 16px; align-items: flex-start; padding: 16px 16px; border-radius: var(--r); border: 1px solid transparent; transition: background .2s var(--ease), border-color .2s, transform .2s var(--ease), box-shadow .2s; }
.rank-row + .rank-row { box-shadow: 0 -1px 0 var(--line); }
.rank-row:hover { background: var(--paper-2); border-color: var(--line); box-shadow: var(--shadow); transform: translateY(-2px); }
.rank-num { flex: none; width: 2.2em; height: 2.2em; display: grid; place-items: center; border-radius: 50%; text-align: center; font-family: var(--num); font-weight: 800; font-size: .95rem; color: var(--amber-deep); background: color-mix(in srgb, var(--amber) 12%, white); border: 1px solid color-mix(in srgb, var(--amber) 26%, var(--line)); }
/* top 3 emphasis */
.rank-row:nth-child(1) .rank-num { color: #6b4e00; background: linear-gradient(135deg, #ffe79a, #f0b840); border-color: #e0a32e; box-shadow: var(--glow-amber); }
.rank-row:nth-child(2) .rank-num { color: #44505e; background: linear-gradient(135deg, #eef1f5, #cdd5df); border-color: #b9c2cd; }
.rank-row:nth-child(3) .rank-num { color: #6e4523; background: linear-gradient(135deg, #f3d6b8, #d8a673); border-color: #c89968; }
.rank-main { flex: 1 1 auto; min-width: 0; }
.rank-recipient { font-weight: 700; font-size: 1rem; color: var(--ink); }
.rank-recipient:hover { color: var(--cyan); text-decoration: underline; }
.ja-tag { display: inline-block; margin-left: 8px; font-size: .64rem; font-weight: 800; color: #05484f; background: color-mix(in srgb, var(--cyan) 18%, white); border: 1px solid color-mix(in srgb, var(--cyan) 34%, var(--line)); padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.rank-meta { font-size: .8rem; margin-top: 4px; color: var(--muted); }
.branch-tag { display: inline-block; font-size: .66rem; font-weight: 800; color: #fff; background: var(--acc, #374151); padding: 2px 9px; border-radius: 999px; vertical-align: middle; }
/* rankings hub cards */
.rank-cards { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 8px; }
@media (min-width: 720px) { .rank-cards { grid-template-columns: repeat(2, 1fr); } }
.rank-card { position: relative; display: flex; flex-direction: column; padding: 22px 22px 20px; border-radius: var(--r); border: 1px solid var(--line); background: var(--paper); text-decoration: none; overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; }
.rank-card::before { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%; background: linear-gradient(90deg, var(--acc, var(--cyan)), color-mix(in srgb, var(--acc, var(--cyan)) 30%, transparent)); }
.rank-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--acc, var(--cyan)) 40%, var(--line)); }
.rank-card-h { margin: 8px 0 0; font-size: 1.12rem; color: var(--ink); }
.rank-card-desc { margin: 8px 0 0; color: var(--muted); font-size: .86rem; line-height: 1.65; }
.rank-mini { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.rank-mini li { display: flex; align-items: baseline; gap: 10px; font-size: .86rem; padding: 5px 0; border-bottom: 1px solid var(--line); }
.rank-mini-pos { flex: none; width: 1.6em; height: 1.6em; display: grid; place-items: center; border-radius: 50%; font-family: var(--num); font-weight: 800; font-size: .76rem; color: var(--amber-deep); background: color-mix(in srgb, var(--amber) 12%, white); border: 1px solid color-mix(in srgb, var(--amber) 26%, var(--line)); }
.rank-mini li:nth-child(1) .rank-mini-pos { color: #6b4e00; background: linear-gradient(135deg, #ffe79a, #f0b840); border-color: #e0a32e; }
.rank-mini-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.rank-mini-val { flex: none; font-family: var(--num); font-weight: 800; color: var(--amber-deep); }
.rank-card-more { margin-top: 14px; font-size: .82rem; font-weight: 800; color: var(--acc, var(--ink)); }
/* rankings detail table */
.rank-pos { font-family: var(--num); font-weight: 800; color: var(--muted); }
tbody tr:nth-child(1) .rank-pos { color: #b8860b; font-size: 1.05rem; }
tbody tr:nth-child(2) .rank-pos, tbody tr:nth-child(3) .rank-pos { color: #6b7280; }
.rank-sub { display: inline-block; margin-left: 8px; font-size: .76rem; }
.rank-insight { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--r); background: var(--paper-2); border: 1px solid var(--line); border-left: 3px solid var(--cyan); font-size: .9rem; color: var(--ink); line-height: 1.7; }
.rank-insight::before { content: "›"; color: var(--cyan); font-weight: 800; margin-right: 8px; }
/* 当サイト独自の読み解き（ランキング/一覧の機械化回避） */
.reading-box { margin: 0 0 24px; padding: 20px 24px; border-radius: var(--r-lg); background: var(--paper-2); border: 1px solid var(--line); box-shadow: var(--shadow-xs); position: relative; padding-left: 28px; }
.reading-box::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 4px; border-radius: 4px; background: var(--grad-cyan); }
.reading-box .block-h { margin-bottom: 10px; }
.reading-box p { margin: 0; color: var(--ink-soft); line-height: 1.9; }
/* 資金フロー（/flows） */
.flow-viz { display: flex; flex-direction: column; gap: 12px; }
.flow-row { --acc: #475569; }
.flow-ends { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .92rem; margin-bottom: 5px; }
.flow-ends .flow-arrow { color: var(--ink-faint); font-weight: 700; }
.flow-ends a { color: var(--ink); text-decoration: none; border-bottom: 1.5px solid color-mix(in srgb, var(--acc) 40%, transparent); transition: border-color .15s, color .15s; }
.flow-ends a:hover { color: var(--acc); border-bottom-color: var(--acc); }
.flow-ends .flow-c { font-weight: 650; }
.flow-ends .flow-prof { font-size: .78rem; border-bottom: none; }
.flow-ends .flow-prof:hover { color: var(--acc); }
.flow-track { position: relative; display: flex; align-items: center; gap: 10px; }
.flow-bar { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 78%, #fff) 0%, var(--acc) 100%); min-width: 6px; box-shadow: var(--shadow-xs); }
.flow-amt { color: var(--ink-soft); font-size: .86rem; white-space: nowrap; }
.flow-cols { display: grid; gap: 22px 32px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .flow-cols { grid-template-columns: 1fr 1fr; } }
.flow-col .block-h { margin-bottom: 12px; }
.flow-rank { list-style: none; margin: 0; padding: 0; counter-reset: fr; }
.flow-rank li { --acc: #475569; counter-increment: fr; display: flex; align-items: center; gap: 10px; padding: 9px 4px 9px 0; border-bottom: 1px solid var(--line); }
.flow-rank li::before { content: counter(fr); flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--acc); font-size: .76rem; font-weight: 700; display: grid; place-items: center; }
.flow-rank li a { flex: 1 1 auto; color: var(--ink); text-decoration: none; border-bottom: 1.5px solid transparent; }
.flow-rank li a:hover { color: var(--acc); border-bottom-color: color-mix(in srgb, var(--acc) 55%, transparent); }
.flow-rank li b { color: var(--ink-soft); font-size: .86rem; white-space: nowrap; }
/* 指標くらべ（/indicators）：分野チップ・変化セル（発散バー） */
.ind-domain { display: inline-block; font-size: .72rem; font-weight: 700; color: #fff; background: var(--acc, #475569); padding: 2px 9px; border-radius: 6px; white-space: nowrap; }
.chg-cell { position: relative; min-width: 130px; }
.chg-bar { position: absolute; top: 50%; right: 50%; transform: translateY(-50%); height: 60%; border-radius: 4px; opacity: .22; }
.chg-bar.dir-up { background: #15803d; right: auto; left: 50%; }
.chg-bar.dir-down { background: #b91c1c; right: 50%; left: auto; }
.chg-bar.dir-flat { background: var(--muted-2); }
.chg-val { position: relative; z-index: 1; font-weight: 700; }
.chg-val.dir-up { color: #15803d; }
.chg-val.dir-down { color: #b91c1c; }
.chg-val.dir-flat { color: var(--ink-soft); }
.cmp-table .spark { width: 96px; height: 26px; display: block; }
.cmp-table .spark polyline { fill: none; stroke: var(--ink-soft); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.cmp-table .spark.dir-up polyline { stroke: #15803d; }
.cmp-table .spark.dir-down polyline { stroke: #b91c1c; }
/* 検索：関連ページ（エンティティ一致）カード */
.ent-matches { display: flex; flex-wrap: wrap; gap: 10px; }
.ent-match { --acc: #475569; display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper-2); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.ent-match:hover { border-color: var(--acc); box-shadow: var(--shadow-xs); transform: translateY(-1px); }
.ent-match .ent-kind { font-size: .68rem; font-weight: 800; letter-spacing: .04em; color: #fff; background: var(--acc); padding: 2px 8px; border-radius: 6px; }
.ent-match .ent-name { font-weight: 650; color: var(--ink); }
.ent-match .ent-sub { font-size: .8rem; color: var(--ink-faint); }
.block-h .sec-count { font-size: .76rem; font-weight: 700; color: var(--ink-soft); background: var(--paper-3); border-radius: 999px; padding: 1px 9px; margin-left: 6px; vertical-align: 2px; }
/* エンティティ・タイムライン（プロフィールの歩み） */
.tl { list-style: none; margin: 0; padding: 0; }
.tl-item { --acc: #475569; position: relative; padding: 0 0 18px 22px; margin-left: 6px; border-left: 2px solid var(--line); }
.tl-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.tl-dot { position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--acc); border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--acc); }
.tl-date { font-size: .8rem; color: var(--ink-faint); margin-right: 9px; }
.tl-kind { display: inline-block; font-size: .7rem; font-weight: 700; color: var(--acc); background: color-mix(in srgb, var(--acc) 12%, transparent); padding: 1px 8px; border-radius: 5px; margin-right: 9px; vertical-align: 1px; }
.tl-title { font-weight: 600; }
.tl-title a { color: var(--ink); text-decoration: none; border-bottom: 1.5px solid color-mix(in srgb, var(--acc) 45%, transparent); transition: color .15s, border-color .15s; }
.tl-title a:hover { color: var(--acc); border-bottom-color: var(--acc); }
.tl-meta { display: block; color: var(--ink-soft); font-size: .86rem; margin-top: 2px; }
/* アクティビティ・タイムライン（/trends） */
.ts-panel { --acc: #0e7490; margin-top: 30px; padding: 20px 22px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-xs); }
.ts-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ts-head .block-h { margin: 0; }
.ts-meta { color: var(--ink-soft); font-size: .82rem; white-space: nowrap; }
.ts-desc { margin: 6px 0 14px; font-size: .9rem; }
.ts-chart { overflow-x: auto; padding-bottom: 2px; }
.ts-bars { display: flex; align-items: flex-end; gap: 3px; height: 150px; min-width: 100%; }
.ts-bar { flex: 1 1 0; min-width: 7px; background: linear-gradient(180deg, var(--acc) 0%, color-mix(in srgb, var(--acc) 60%, #fff) 100%); border-radius: 4px 4px 0 0; position: relative; opacity: .82; transition: opacity .15s; }
.ts-bar:hover { opacity: 1; }
.ts-bar.is-peak { opacity: 1; box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 35%, transparent); }
.ts-peak-val { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: .7rem; color: var(--acc); font-weight: 700; white-space: nowrap; }
.ts-axis { display: flex; gap: 3px; margin-top: 5px; min-width: 100%; }
.ts-tick { flex: 1 1 0; min-width: 7px; text-align: center; }
.ts-tick i { font-style: normal; font-size: .66rem; color: var(--ink-faint); }
.ts-reading { margin: 14px 0 0; color: var(--ink-soft); line-height: 1.85; font-size: .92rem; padding-left: 12px; border-left: 3px solid color-mix(in srgb, var(--acc) 45%, transparent); }
/* 横断ダイジェスト（2カラム） */
.digest-grid { display: grid; gap: 24px 32px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .digest-grid { grid-template-columns: 1fr 1fr; } }
.digest-col { margin-top: 0 !important; }
/* sortable table headers */
.sortable .th-sort { cursor: pointer; user-select: none; white-space: nowrap; transition: color .15s; }
.sortable .th-sort:hover { color: var(--cyan); }
.sortable .th-sort::after { content: "↕"; opacity: .3; margin-left: 5px; font-size: .82em; }
.sortable .th-sort[data-dir="asc"]::after { content: "▲"; opacity: .85; }
.sortable .th-sort[data-dir="desc"]::after { content: "▼"; opacity: .85; }
/* 緊急度バッジ（KEV） */
.urgency-badge { display: inline-block; font-size: .68rem; font-weight: 800; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.urgency-badge.crit { color: #fff; background: #dc2626; }
.urgency-badge.high { color: #92400e; background: #fef3c7; border: 1px solid #fcd34d; }
.trade-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.trade-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: var(--r); border: 1px solid var(--line); background: var(--paper-2); text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; }
.trade-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, #9a3412 40%, var(--line)); }
.trade-card .tc-label { font-size: .8rem; color: var(--muted); font-weight: 700; }
.trade-card .tc-val { font-family: var(--num); font-weight: 800; font-size: 1.35rem; color: var(--ink); }
.trade-card .tc-tag { font-size: .62rem; font-weight: 800; margin-left: 8px; vertical-align: middle; opacity: .8; }
@media (max-width: 620px) { .trade-cards { grid-template-columns: 1fr; } }
.agency-chip { display: inline-block; margin: 0 6px 6px 0; padding: 3px 10px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); font-size: .76rem; }
.agency-chip b { margin-left: 4px; color: var(--amber-deep); }
.scope-cell { display: inline-block; max-width: 42ch; overflow-wrap: anywhere; }
.ext { text-decoration: none; opacity: .6; }
.ext:hover { opacity: 1; }
.filing-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; }
.filing-list li { display: flex; align-items: baseline; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: .9rem; flex-wrap: wrap; }
.filing-badge { flex: none; display: inline-block; min-width: 3.4em; text-align: center; font-size: .66rem; font-weight: 800; color: #fff; background: var(--acc, #475569); padding: 2px 8px; border-radius: 6px; }
.filing-date { flex: none; color: var(--muted); font-size: .78rem; }
/* 全件ブラウズ：絞り込みバー／ピル／ページャ */
.browse-filters { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; padding: 16px 18px; margin: 4px 0 18px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-xs); }
.bf-field { display: flex; flex-direction: column; gap: 5px; font-size: .8rem; color: var(--muted); font-weight: 700; }
.bf-field select, .bf-field input { font: inherit; font-weight: 500; color: var(--ink); padding: 8px 11px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--paper-2); min-width: 130px; }
.bf-field.bf-search { flex: 1 1 220px; }
.bf-field.bf-search input { width: 100%; min-width: 180px; }
.bf-field select:focus, .bf-field input:focus { outline: none; border-color: var(--amber); box-shadow: var(--ring); }
.bf-go { font: inherit; font-weight: 700; color: #fff; background: var(--amber-deep); border: 0; border-radius: var(--r-sm); padding: 9px 18px; cursor: pointer; }
.bf-go:hover { background: var(--amber); }
.bf-clear { align-self: center; font-size: .85rem; color: var(--muted); text-decoration: underline; }
.browse-count { margin: 0 0 10px; font-size: .85rem; }
.hero-cta { margin: 14px 0 0; }
.hero-cta a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .92rem; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); padding: 9px 16px; border-radius: 999px; backdrop-filter: blur(4px); transition: background .2s, border-color .2s; }
.hero-cta a:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); }
.pill { display: inline-block; font-size: .72rem; font-weight: 700; color: #fff; background: var(--acc, #475569); padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.pill.danger { background: var(--danger); }
.browse-table td { vertical-align: top; }
.pager { display: flex; gap: 14px; align-items: center; justify-content: center; margin: 26px 0 0; }
.pager .pg { font-weight: 700; padding: 8px 16px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink); }
.pager .pg:hover { border-color: var(--amber); color: var(--amber-deep); }
.pager .pg.disabled { color: var(--muted-2); border-color: var(--line); cursor: default; }
.pager .pg-info { color: var(--muted); font-size: .9rem; }
/* 用語リンク（本文中の専門用語→用語集）。控えめな点線下線＋ヘルプカーソル。 */
.gloss { color: inherit; text-decoration: none; border-bottom: 1px dotted color-mix(in srgb, var(--indigo, #6366f1) 55%, var(--line)); cursor: help; }
.gloss:hover { border-bottom-style: solid; color: var(--indigo, #6366f1); }
/* 用語集ページ */
.gloss-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 30px; }
.gloss-toc a { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 600; padding: 6px 13px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); text-decoration: none; color: var(--ink-soft); transition: border-color .2s, color .2s, transform .2s; }
.gloss-toc a:hover { border-color: var(--cyan); color: var(--ink); transform: translateY(-1px); }
.gloss-toc a .num { font-size: .72rem; color: var(--muted); }
.gloss-cat { margin-top: 34px; scroll-margin-top: 80px; }
.gloss-grid { margin: 16px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .gloss-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .gloss-grid { grid-template-columns: repeat(3, 1fr); } }
.gloss-card { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); scroll-margin-top: 90px; transition: border-color .2s, box-shadow .2s, transform .2s; }
.gloss-card:hover { border-color: color-mix(in srgb, var(--cyan) 40%, var(--line)); box-shadow: var(--shadow); transform: translateY(-2px); }
.gloss-card dt { font-weight: 800; color: var(--ink); margin-bottom: 6px; font-size: .98rem; }
.gloss-card dd { margin: 0; color: var(--ink-soft); line-height: 1.7; font-size: .9rem; }
.gloss-card:target { border-color: var(--cyan); box-shadow: var(--glow-cyan); }
.gloss-card:target dt { color: var(--indigo, #6366f1); }
.rank-desc { font-size: .82rem; color: var(--ink-soft); margin-top: 5px; line-height: 1.65; }
.rank-amt { flex: none; text-align: right; min-width: 8em; }
.rank-amt-ja { display: block; font-family: var(--num); font-weight: 800; font-size: 1.02rem; color: var(--ink); }
.rank-amt-usd { display: block; font-size: .72rem; color: var(--muted); margin-top: 2px; }
@media (max-width: 560px) {
  .rank-row { gap: 12px; padding: 14px 10px; }
  .rank-amt { min-width: 6em; }
  .rank-amt-usd { display: none; }
}

/* =====================================================================
   economy dashboard
   ===================================================================== */
.ind-grid { margin-top: 10px; display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .ind-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .ind-grid { grid-template-columns: repeat(4, 1fr); } }
.ind-card { position: relative; display: block; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--shadow); overflow: hidden; transition: transform .18s var(--spring), box-shadow .22s, border-color .22s; }
.ind-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad-cyan); opacity: .8; }
.ind-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--cyan) 34%, var(--line-2)); }
.ind-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ind-name { font-weight: 700; font-size: .92rem; color: var(--ink); line-height: 1.4; }
.ind-freq { flex: none; font-size: .64rem; font-weight: 700; color: var(--muted); background: var(--paper-3); border: 1px solid var(--line); padding: 2px 8px; border-radius: 999px; }
.ind-valrow { display: flex; align-items: baseline; gap: 7px; margin-top: 14px; }
.ind-headline { font-family: var(--num); font-weight: 800; font-size: 1.6rem; color: var(--ink); letter-spacing: -.02em; }
.ind-arrow { font-size: .92rem; font-weight: 800; }
.ind-arrow.dir-up { color: #c2410c; }
.ind-arrow.dir-down { color: #1f7a8c; }
.ind-arrow.dir-flat { color: var(--muted-2); }
.ind-label { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.spark { display: block; width: 100%; height: 32px; margin: 12px 0 4px; overflow: visible; }
.spark polyline { fill: none; stroke: var(--cyan); stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.ind-sub { font-size: .78rem; color: var(--ink-soft); min-height: 1.1em; }
.ind-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: .68rem; color: var(--muted-2); }
.ind-foot .ind-agency { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ind-panel { position: relative; overflow: hidden; margin-top: 20px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; background: var(--grad-ink); color: #eef2f7; border-radius: var(--r-lg); padding: 26px 28px; box-shadow: var(--shadow); }
.ind-panel::before { content: ""; position: absolute; inset: -40% auto auto -10%; width: 50%; height: 180%; background: radial-gradient(circle, rgba(54, 194, 207, .35), transparent 60%); filter: blur(20px); pointer-events: none; }
.ind-panel-label { position: relative; font-size: .74rem; color: #9fb6d6; letter-spacing: .08em; text-transform: uppercase; }
.ind-panel-value { position: relative; display: flex; align-items: baseline; gap: 12px; margin-top: 6px; }
.ind-panel-headline { font-family: var(--num); font-weight: 800; font-size: clamp(2rem, 7vw, 2.7rem); color: #fff; letter-spacing: -.02em; }
.ind-panel .ind-arrow { font-size: 1.3rem; }
.ind-panel .ind-arrow.dir-up { color: var(--amber-bright); }
.ind-panel .ind-arrow.dir-down { color: var(--cyan-glow); }
.ind-panel-sub { position: relative; margin-top: 7px; color: #c6d0dd; font-size: .9rem; }
.ind-panel-asof { position: relative; margin-top: 9px; color: #93a2b6; font-size: .78rem; }
.spark-lg { position: relative; width: 260px; max-width: 100%; height: 64px; flex: none; overflow: visible; }
.spark-lg polyline { fill: none; stroke: var(--cyan-glow); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 6px rgba(95, 216, 228, .5)); }

.obs-list { margin-top: 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
@media (min-width: 680px) { .obs-list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .obs-list { grid-template-columns: repeat(4, 1fr); } }
.obs-list li { justify-content: space-between; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.obs-list li + li { box-shadow: none; }
.obs-list li:hover { background: var(--paper-2); transform: translateY(-2px); }
.obs-list .obs-val { font-weight: 700; color: var(--ink); }
.obs-val { font-weight: 700; color: var(--ink); }

/* =====================================================================
   small-screen polish
   ===================================================================== */
@media (max-width: 480px) {
  .wrap { padding-inline: 16px; }
  .site-header .wrap { height: 60px; gap: 10px; }
  .brand .sub { display: none; }
  .cta .btn { flex: 1 1 auto; justify-content: center; }
  .doc-lead { font-size: 1.02rem; padding: 14px 16px; }
  .source-box, .kp-block, .impact-box { padding: 18px 18px; }
}

/* ============================================================
   法務・規約ページ（プライバシーポリシー等）の長文レイアウト
   ============================================================ */
.legal { max-width: 820px; margin-inline: auto; padding: clamp(40px, 7vw, 80px) 22px clamp(56px, 9vw, 96px); }
.legal .crumbs { font-size: .82rem; color: var(--muted); margin-bottom: 18px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.legal .crumbs a { color: var(--ink-soft); }
.legal .crumbs a:hover { color: var(--ink); }
.legal > h1 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); color: var(--ink); letter-spacing: -.01em; line-height: 1.2; }
.legal .legal-updated { margin-top: 12px; font-size: .82rem; color: var(--muted); }
.legal .legal-lead { margin-top: 20px; font-size: 1.05rem; line-height: 1.85; color: var(--ink-soft); }
.legal-section { margin-top: 30px; }
.legal-body .legal-section:first-child { margin-top: 4px; }
.legal-section h2 { font-size: 1.22rem; color: var(--ink); }
.legal-section p { margin-top: 14px; line-height: 1.9; color: var(--ink-soft); }
.legal-section ul { margin-top: 14px; padding-left: 1.3em; }
.legal-section li { margin-top: 8px; line-height: 1.85; color: var(--ink-soft); }
.legal-section a { color: var(--indigo, #4f46e5); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.legal-section a:hover { color: #3730a3; }

/* ============================================================
   データテーブル（/area 州別データ等）
   ============================================================ */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-xs); }
.data-table { width: 100%; border-collapse: collapse; font-size: .92rem; background: var(--paper-2); }
.data-table th, .data-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.data-table thead th { background: var(--paper-3); color: var(--ink-soft); font-weight: 700; font-size: .82rem; position: sticky; top: 0; }
.data-table th.num, .data-table td.num { text-align: right; }
.data-table tbody tr:hover { background: rgba(99, 102, 241, .05); }
.data-table .sticky-col { position: sticky; left: 0; background: var(--paper-2); font-weight: 600; }
.data-table thead .sticky-col { background: var(--paper-3); z-index: 1; }
/* テーブルの名前リンクは「クリックできる」と分かりつつ洗練された見た目に（全テーブル共通）。
   細い下線＋ホバーで下線がふわっと離れ、矢印が滑り出る。 */
.data-table tbody .sticky-col a,
.cmp-table tbody td.sticky-col a {
    color: var(--indigo, #4f46e5);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-decoration-color: color-mix(in srgb, var(--indigo, #4f46e5) 35%, transparent);
    text-underline-offset: 3px;
    transition: text-decoration-color .2s var(--ease, ease), text-underline-offset .2s var(--ease, ease);
}
.data-table tbody .sticky-col a::after,
.cmp-table tbody td.sticky-col a::after {
    content: "›";
    display: inline-block;
    margin-left: 2px;
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity .2s var(--ease, ease), transform .2s var(--ease, ease);
}
.data-table tbody .sticky-col a:hover,
.cmp-table tbody td.sticky-col a:hover {
    text-decoration-color: var(--indigo, #4f46e5);
    text-underline-offset: 5px;
}
.data-table tbody .sticky-col a:hover::after,
.cmp-table tbody td.sticky-col a:hover::after {
    opacity: .8;
    transform: translateX(0);
}
.agency-chip a { color: var(--indigo, #4f46e5); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--indigo, #4f46e5) 40%, transparent); text-underline-offset: 2px; transition: text-decoration-color .2s; }
.agency-chip a:hover { text-decoration-color: currentColor; }

/* ============================================================
   比較ツール（/compare）
   ============================================================ */
.reading-list { margin: 0; padding-left: 20px; }
.reading-list li { color: var(--ink-soft); line-height: 1.85; margin: 4px 0; }

.cmp-pickers { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .cmp-pickers { grid-template-columns: repeat(2, 1fr); } }
.cmp-picker { padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper-2); box-shadow: var(--shadow-xs); }
.cmp-picker .block-h { margin-bottom: 8px; }
.cmp-picker > .muted { margin: 0 0 16px; font-size: .88rem; }
.cmp-selects { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); margin-bottom: 16px; }
.cmp-selects select { width: 100%; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--paper-2); color: var(--ink); font-size: .92rem; }
.cmp-selects select:focus { outline: 2px solid color-mix(in srgb, var(--cyan) 55%, transparent); outline-offset: 1px; }
.cmp-rebar { margin-bottom: 4px; display: flex; flex-wrap: wrap; align-items: end; gap: 14px; }
.cmp-rebar .cmp-selects { flex: 1 1 auto; margin-bottom: 0; }

.cmp-examples { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.cmp-examples a { color: var(--acc, var(--ink)); text-decoration: none; font-weight: 600; }
.cmp-examples a:hover { text-decoration: underline; }

.cmp-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.cmp-tabs a { padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); color: #e8eef7; text-decoration: none; font-weight: 700; font-size: .9rem; background: rgba(255, 255, 255, .08); }
.cmp-tabs a:hover { background: rgba(255, 255, 255, .16); }
.cmp-tabs a.on { background: #fff; color: var(--ink); border-color: #fff; }

/* digest のタブは明色背景なので濃色の見た目に上書き */
.digest-tabs { margin: 0 0 20px; }
.digest-tabs a { border-color: var(--line-2); color: var(--ink-soft); background: var(--paper); }
.digest-tabs a:hover { background: var(--paper-3); }
.digest-tabs a.on { background: var(--ink); color: #fff; border-color: var(--ink); }

.cmp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.cmp-filter-input { flex: 1 1 280px; min-width: 0; max-width: 420px; padding: 11px 15px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--paper-2); color: var(--ink); font-size: .95rem; }
.cmp-filter-input:focus { outline: 2px solid color-mix(in srgb, var(--cyan) 55%, transparent); outline-offset: 1px; }
.cmp-hint { font-size: .82rem; }
.cmp-table.sortable thead th { cursor: pointer; user-select: none; white-space: nowrap; }
.cmp-table.sortable thead th.sticky-col { position: sticky; left: 0; z-index: 2; }
.cmp-table tbody td.sticky-col { position: sticky; left: 0; background: var(--paper-2); font-weight: 600; }
.cmp-table .th-sort::after { content: " ⇅"; opacity: .35; font-size: .8em; }
.cmp-table .th-sort[data-dir="asc"]::after { content: " ↑"; opacity: .9; }
.cmp-table .th-sort[data-dir="desc"]::after { content: " ↓"; opacity: .9; }

/* 州タイルマップ（geo近似の格子型ミニマップ・指標で色分け） */
.tilemap-wrap { margin-bottom: 34px; }
.map-metrics { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.map-metric-btn { font: inherit; font-size: .8rem; font-weight: 600; color: var(--ink-soft); background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.map-metric-btn:hover { border-color: color-mix(in srgb, #1d4ed8 45%, transparent); color: var(--ink); }
.map-metric-btn.is-active { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.map-metric-now { margin-left: auto; color: var(--ink-soft); font-weight: 600; }
.tilemap { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; max-width: 520px; }
.tilemap .tile { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: .62rem; font-weight: 700; letter-spacing: .03em; text-decoration: none; transition: transform .15s var(--ease, ease), box-shadow .15s; }
.tilemap .tile-empty { background: transparent; }
.tilemap .tile-na { background: var(--paper-3); color: var(--muted-2); }
.tilemap a.tile:hover { transform: translateY(-2px); box-shadow: 0 6px 16px -6px rgba(11, 31, 58, .45); }
.tile.b0, .tile-key.b0 { background: #eaf1fc; color: #1e40af; }
.tile.b1, .tile-key.b1 { background: #bcd4fb; color: #1e40af; }
.tile.b2, .tile-key.b2 { background: #7eaef6; color: #0f2147; }
.tile.b3, .tile-key.b3 { background: #3b76e8; color: #fff; }
.tile.b4, .tile-key.b4 { background: #1d4ed8; color: #fff; }
.tile-legend { display: flex; align-items: center; gap: 5px; margin-top: 12px; font-size: .76rem; color: var(--muted); }
.tile-key { width: 18px; height: 11px; border-radius: 3px; display: inline-block; }

/* 横スクロールの気付きやすさ：スクロール可能な端に影を出す（端まで送ると消える）。 */
/* データバー（ランキングの値セル＝Excelのデータバー風。値の下に細い棒で相対量を可視化） */
.bar-cell { position: relative; }
.bar-cell .bar-track { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 4px; border-radius: 2px; background: var(--paper-3); overflow: hidden; }
.bar-cell .bar-fill { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #6366f1, #22d3ee); }
.bar-cell .bar-val { position: relative; z-index: 1; }

.cmp-wrap, .table-scroll {
    background:
        linear-gradient(to right, var(--paper-2) 30%, rgba(255, 255, 255, 0)) 0 0 / 36px 100% no-repeat,
        linear-gradient(to left, var(--paper-2) 30%, rgba(255, 255, 255, 0)) 100% 0 / 36px 100% no-repeat,
        linear-gradient(to right, rgba(11, 31, 58, .22), rgba(11, 31, 58, 0)) 0 0 / 22px 100% no-repeat,
        linear-gradient(to left, rgba(11, 31, 58, .22), rgba(11, 31, 58, 0)) 100% 0 / 22px 100% no-repeat,
        var(--paper-2);
    background-attachment: local, local, scroll, scroll, local;
}
.cmp-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-xs); }
/* スクロール影をテーブルが覆い隠さないよう、テーブル自体は透過（背景はラッパが担当） */
.cmp-table, .data-table { background: transparent !important; }
/* 横スクロールバーを常時はっきり見せる（横移動できると分かるように） */
.cmp-wrap, .table-scroll { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 32%, transparent) transparent; }
.cmp-wrap::-webkit-scrollbar, .table-scroll::-webkit-scrollbar { height: 11px; }
.cmp-wrap::-webkit-scrollbar-track, .table-scroll::-webkit-scrollbar-track { background: color-mix(in srgb, var(--ink) 6%, transparent); border-radius: 6px; }
.cmp-wrap::-webkit-scrollbar-thumb, .table-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
.cmp-wrap::-webkit-scrollbar-thumb:hover, .table-scroll::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink) 48%, transparent); background-clip: content-box; }
/* 表の上部にも横スクロールバー（下と連動・JSが overflow 時のみ表示） */
.x-topscroll { display: none; overflow-x: auto; overflow-y: hidden; height: 14px; margin-bottom: 5px; }
.x-topscroll-inner { height: 1px; }
.x-topscroll { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 32%, transparent) transparent; }
.x-topscroll::-webkit-scrollbar { height: 11px; }
.x-topscroll::-webkit-scrollbar-track { background: color-mix(in srgb, var(--ink) 6%, transparent); border-radius: 6px; }
.x-topscroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
.x-topscroll::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink) 48%, transparent); background-clip: content-box; }
/* 「横にスクロールできます」ヒント（JSが overflow 時のみ表示・スクロール後は消す） */
.x-scroll-hint { display: none; align-items: center; gap: 7px; margin: 0 0 8px; font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.x-scroll-hint.show { display: inline-flex; }
.x-scroll-hint .xh-i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: color-mix(in srgb, var(--cyan) 16%, transparent); color: var(--cyan); font-size: .82rem; animation: xhpulse 1.6s ease-in-out infinite; }
@keyframes xhpulse { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .x-scroll-hint .xh-i { animation: none; } }
.cmp-table { width: 100%; border-collapse: collapse; font-size: .94rem; background: var(--paper-2); }
.cmp-table th, .cmp-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.cmp-table tbody td.sticky-col { white-space: nowrap; }
.cmp-table thead th { background: var(--paper-3); color: var(--ink); font-weight: 800; font-size: .95rem; border-bottom: 2px solid var(--line-2); }
.cmp-table thead th a { color: var(--ink); text-decoration: none; }
.cmp-table thead th a:hover { color: var(--indigo, #4f46e5); text-decoration: underline; }
.cmp-table tbody th { font-weight: 700; color: var(--ink-soft); width: 1%; white-space: nowrap; }
.cmp-table td.num { text-align: right; font-family: var(--num); font-variant-numeric: tabular-nums; }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: none; }
.cmp-table tbody tr:hover { background: rgba(99, 102, 241, .04); }
.cmp-tick { display: inline-block; margin-left: 7px; font-size: .72rem; font-weight: 700; color: var(--muted); }
.cmp-lead { background: color-mix(in srgb, var(--cyan) 9%, transparent); font-weight: 800; color: var(--ink); }
.cmp-leadmark { margin-left: 6px; font-size: .7rem; color: var(--cyan); }
.cmp-rank { display: block; margin-top: 3px; font-size: .72rem; font-weight: 600; color: var(--muted); }
.cmp-rowdesc { display: block; margin-top: 4px; font-size: .76rem; font-weight: 400; color: var(--muted); line-height: 1.55; white-space: normal; max-width: 240px; }

/* 関連プロフィール（記事詳細→企業/省庁） */
.related-box { margin-top: 30px; }
.related-links { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.related-links li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
.related-links li:hover { border-color: color-mix(in srgb, var(--cyan) 40%, var(--line)); background: var(--paper-2); }
.related-links .rl-label { font-size: .72rem; font-weight: 700; color: var(--muted); }
.related-links a { font-weight: 700; color: var(--ink); text-decoration: none; }
.related-links a:hover { color: var(--indigo, #4f46e5); }

.cmp-cta { margin-left: 18px; font-weight: 700; color: var(--acc, var(--cyan)); text-decoration: none; }
.cmp-cta:hover { text-decoration: underline; }

/* 事業者ID（UEI）表示 */
.entity-id { margin: 0 0 10px; font-size: .85rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.uei-chip { display: inline-block; padding: 2px 9px; border-radius: 6px; background: var(--paper-3); border: 1px solid var(--line); color: var(--ink); font-size: .8rem; letter-spacing: .03em; }

/* 貿易：年次推移チャート（過去データ） */
.trade-chart { margin: 6px 0 4px; color: var(--ink-soft); }
.trade-chart svg { display: block; }
.chart-legend { display: flex; gap: 18px; margin: 2px 0 14px; font-size: .82rem; }
.chart-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }