/* ============================================================
   REAL IMPACTs Dashboard — Shared Styles
   ============================================================ */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Colors */
  --navy: #030213;
  --white: #ffffff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-900: #1e3a5f;
  --green-100: #dcfce7;
  --green-600: #16a34a;
  --green-700: #15803d;
  --red-100: #fee2e2;
  --red-700: #b91c1c;
  --orange-100: #ffedd5;
  --orange-700: #c2410c;
  --yellow-100: #fef9c3;
  --yellow-700: #a16207;
  --purple-600: #9333ea;

  /* ============================================================
     Data-visualization palette — 図表・マーカー・凡例・バッジで共有する統一パレット。
     同じ役割には必ず同じトークンを使い、全セクションで配色を揃える。
     新しい色を足す前に、ここに該当する役割があるか必ず確認する。
     ============================================================ */
  /* ── ① ブランド／識別（chrome のみ。データの意味付けには使わない） ── */
  --dv-brand-navy:    #1c3849; /* ヘッダー・ダーク面 */
  --dv-brand-magenta: #dd3388; /* REAL IMPACTs ロゴ・識別アクセント */
  --dv-brand-lime:    #b8c144; /* ボタン / CTA */
  /* ── ② 評価（良→悪。信号機の並び＝世界共通の直感。この用途以外では使わない） ── */
  --dv-positive:      #5f9035; /* 強み・良好（ブランドの緑＝信号の緑） */
  --dv-warning:       #f59e0b; /* 平均並・注意（アンバー） */
  --dv-attention:     #b45309; /* 要強化（濃アンバー） */
  --dv-negative:      #dc2626; /* 下位・不足（レッド） */
  /* ── ③ 比較（“何と比べるか”。良し悪しの意味を持たない中立色） ── */
  --dv-property:      #0077a0; /* 本物件＝ブランドのティール（=「これがウチ」） */
  --dv-property-deep: #015a78; /* 本物件バーのグラデ終端（濃ティール） */
  --dv-bench-local:   #f9a644; /* 東京平均＝オレンジ */
  --dv-bench-global:  #97c5dc; /* グローバル＝ライトブルー */
  /* ── ④ 系列色（複数項目の区別。良し悪しの意味は持たない。チャートの系列に順番に使う） ── */
  --dv-series-1:      #0077a0; /* ティール */
  --dv-series-2:      #1c3849; /* ネイビー */
  --dv-series-3:      #dd3388; /* マゼンタ */
  --dv-series-4:      #8a9a3c; /* オリーブ（ライムを可読性向けに濃く） */
  --dv-series-5:      #7d96ab; /* スチール */
  --dv-series-6:      #7c5cbb; /* パープル */
  /* Hard / Soft 施策の種類（良し悪しではなく「種類」を表す。Hard=濃ティール→Soft=ミントで識別） */
  --dv-type-hard:     #0a6e78; /* ハード（物理・建物）— 濃いティール */
  --dv-type-mix:      #3fbdb4; /* ハード＆ソフト — 中間ティール */
  --dv-type-soft:     #9bd470; /* ソフト（運営・サービス）— ライトグリーン */
  /* UI 操作・選択アクセント（ボタン/タブ/選択ハイライト/リンク等）。ブランドのティールで統一。
     ※データの意味を持つ青（KPIカテゴリ等）はこれを使わず青のまま残す。 */
  --ui-accent:        #0077a0;

  /* Semantic */
  --bg: var(--gray-50);
  --text: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-400);
  --border: var(--gray-200);

  /* Typography */
  --sans: 'Inter', 'Noto Sans JP', system-ui, -apple-system, sans-serif;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.04);

  /* Layout */
  --max-w: 80rem;
  --header-h: 56px;
  /* 現在地追従ピルの高さ（editorial）。ヘッダー下に貼り付く sticky 要素・本文 padding は
     必ず calc(var(--header-h) + var(--pill-h)) を使い、93px 等をハードコードしない
     （embed モードが両変数を 0 に上書きして自動追従するため） */
  --pill-h: 37px;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* --- Header --- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  height: var(--header-h);
}
.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-logo {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
}
.lang-switch {
  display: flex;
  gap: 0.25rem;
}
.lang-btn {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--white);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--sans);
}
.lang-btn:hover { background: var(--gray-100); }
.lang-btn.active {
  background: var(--ui-accent);
  color: var(--white);
  border-color: var(--ui-accent);
}

/* --- Main Content --- */
.main-content {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: calc(var(--header-h) + 1.5rem) 1.5rem 3rem;
}

/* --- Page Header --- */
.page-header { margin-bottom: 2rem; }
.page-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
.page-subtitle {
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

/* --- Scope Selector --- */
.scope-selector {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.5rem;
  margin-bottom: 2rem;
}
.scope-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: 0.75rem;
}
.scope-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.scope-btn {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: none;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--sans);
  background: var(--gray-100);
  color: var(--gray-700);
}
.scope-btn:hover { background: var(--gray-200); }
.scope-btn.active {
  background: var(--ui-accent);
  color: var(--white);
  box-shadow: 0 1px 2px rgba(37,99,235,0.3);
}
.scope-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.scope-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--gray-200);
}
.scope-info-icon { color: var(--ui-accent); }
.scope-info-name { font-weight: 600; color: var(--text); }
.scope-info-sep { color: var(--text-muted); }
.scope-info-type { color: var(--text-secondary); }

/* --- Sections --- */
.sections { display: flex; flex-direction: column; gap: 1.5rem; }

/* --- Collapsible Section --- */
.section {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  cursor: pointer;
  transition: background 0.15s;
  user-select: none;
}
.section-header:hover { background: var(--gray-50); }
.section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text);
}
.section-desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}
.section-chevron {
  color: var(--text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.section.collapsed .section-chevron { transform: rotate(180deg); }
.section-body {
  padding: 1.5rem;
  border-top: 1px solid var(--gray-100);
}
.section.collapsed .section-body { display: none; }

/* --- Facility Info --- */
.facility-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
}
.facility-images {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--blue-50), var(--blue-100));
  border-radius: 8px;
  border: 1px solid var(--blue-200);
  overflow: hidden;
  padding: 0.5rem;
  min-height: 300px;
}
.facility-hero {
  position: relative;
  height: 160px;
  border-radius: 6px;
  overflow: hidden;
}
.facility-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.facility-hero-fallback {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-weight: 700;
  font-size: 1.25rem;
}
.facility-image-fallback {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  font-size: 0.75rem;
  gap: 0.5rem;
}
.facility-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.facility-hero-logo {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(4px);
  border-radius: 6px;
  padding: 0.5rem;
  box-shadow: var(--shadow);
}
.facility-hero-logo img { height: 2rem; width: auto; }
.facility-map, .facility-events {
  background: var(--white);
  padding: 0.5rem;
  border-radius: 4px;
}
.facility-map img, .facility-events img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Gallery layout (bento grid) */
.facility-layout-gallery {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.facility-gallery {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 0.8fr;
  gap: 6px;
  border-radius: 12px;
  overflow: hidden;
  height: 420px;
}
.gallery-cell { overflow: hidden; }
.gallery-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.gallery-cell:hover img { transform: scale(1.03); }
.gallery-cell-1 { grid-column: 1 / 3; grid-row: 1 / 3; }
.gallery-cell-2 { grid-column: 3; grid-row: 1; }
.gallery-cell-3 { grid-column: 4; grid-row: 1; }
.gallery-cell-4 { grid-column: 1; grid-row: 3; }
.gallery-cell-5 { grid-column: 2; grid-row: 3; }
.gallery-cell-map {
  grid-column: 3 / 5;
  grid-row: 2 / 4;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}
.gallery-cell-map img { object-fit: contain; }
.gallery-logo {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(4px);
  border-radius: 6px;
  padding: 0.5rem;
  box-shadow: var(--shadow);
  z-index: 1;
}
.gallery-logo img { height: 2rem; width: auto; display: block; }
.facility-layout-gallery .facility-detail { gap: 2rem; }

.facility-google-map {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.facility-google-map-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
.facility-google-map-label-en {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gray-500);
}
.facility-google-map-label-ja {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-900);
}
.facility-google-map-frame {
  position: relative;
  width: 100%;
  height: 420px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--gray-100);
}
.facility-google-map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.facility-google-map-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--gray-500);
  background: repeating-linear-gradient(45deg, var(--gray-100), var(--gray-100) 12px, #f3f4f6 12px, #f3f4f6 24px);
}
@media (max-width: 768px) {
  .facility-google-map-frame { height: 280px; }
}

@media (max-width: 768px) {
  .facility-gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    height: auto;
  }
  .gallery-cell-1 { grid-column: 1 / -1; grid-row: auto; height: 200px; }
  .gallery-cell-2, .gallery-cell-3, .gallery-cell-4, .gallery-cell-5 { height: 140px; }
  .gallery-cell-map { grid-column: 1 / -1; height: 120px; }
}

.facility-detail {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.facility-title-section {
  border-bottom: 1px solid var(--gray-100);
  padding-bottom: 1.25rem;
}
.facility-name {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text);
}
.facility-name-ja {
  color: var(--gray-500);
  font-weight: 500;
  font-size: 1.125rem;
  margin-left: 1rem;
}
.facility-abbr {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 500;
  margin-top: 0.5rem;
}
.facility-abbr-badge {
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.125rem 0.375rem;
  background: #e6f3f7;
  color: var(--ui-accent);
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.facility-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 3rem;
}
.info-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}
.info-value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gray-800);
  letter-spacing: -0.01em;
}
.info-value-sm {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
  line-height: 1.6;
}
.access-lines-flat {
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-top: 0.15rem;
}
.access-tag {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ui-accent);
  background: rgba(0, 119, 160, 0.10);
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.spec-row {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  padding: 0.25rem 0;
}
.spec-label {
  font-size: 0.75rem;
  color: var(--gray-500);
  width: 5rem;
  flex-shrink: 0;
}
.spec-value {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--gray-800);
}
.functions-section {
  background: var(--gray-50);
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid var(--gray-100);
}
.function-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.375rem 0;
}
.function-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ui-accent);
  margin-top: 0.5rem;
  flex-shrink: 0;
  opacity: 0.6;
}
.function-text {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
/* Rich function items (with name + description) */
.function-item-rich {
  align-items: flex-start;
  padding: 0.5rem 0;
}
.function-item-rich .function-dot {
  margin-top: 0.6rem;
}
.function-item-rich + .function-item-rich {
  border-top: 1px solid var(--gray-100);
  padding-top: 0.625rem;
}
.function-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}
.function-category {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ui-accent);
  background: rgba(0, 119, 160, 0.10);
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  margin-bottom: 0.25rem;
}
.function-name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--gray-800);
  letter-spacing: -0.01em;
  line-height: 1.45;
}
.function-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Facility concept block */
.facility-concept {
  margin: 0.5rem 0 1.5rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--ui-accent);
  background: linear-gradient(135deg, rgba(0,119,160,0.05) 0%, rgba(0,119,160,0.01) 100%);
  border-radius: 0 12px 12px 0;
}
.facility-concept-label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.625rem;
}
.facility-concept-label::before {
  content: '';
  display: block;
  width: 1.75rem;
  height: 1px;
  background: var(--ui-accent);
  opacity: 0.55;
}
.facility-concept-label-en {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ui-accent);
  text-transform: uppercase;
}
.facility-concept-label-ja {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gray-600);
}
.facility-concept p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--gray-700);
}

/* Facility overview section heading (above the entity / location / access columns) */
.facility-overview-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0.5rem 0 0.25rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--gray-200);
  width: 100%;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.facility-overview-heading:hover .facility-overview-heading-label,
.facility-overview-heading:hover .facility-overview-heading-name {
  color: var(--ui-accent);
}
.facility-overview-heading-chevron {
  margin-left: auto;
  align-self: center;
  display: inline-flex;
  color: var(--gray-400);
  transition: transform 0.2s ease;
}
.facility-overview-heading.collapsed .facility-overview-heading-chevron {
  transform: rotate(180deg);
}
.facility-overview-heading.collapsed + .facility-cols,
.facility-overview-heading.collapsed + .facility-cols + .facility-google-map {
  display: none;
}
.facility-overview-heading-name {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--text);
}
.facility-overview-heading-label {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--gray-500);
  letter-spacing: 0.02em;
}

/* Consortium members */
.consortium-list {
  font-size: 0.6875rem;
  color: var(--gray-500);
  line-height: 1.7;
  margin-top: 0.5rem;
}

.access-details-label {
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}
.certifications-empty {
  font-size: 0.8rem;
  color: var(--gray-500);
  padding: 0.25rem 0;
}
.spec-note {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 0.35rem;
  vertical-align: middle;
  cursor: help;
  outline: none;
}
.spec-note-icon {
  color: var(--gray-400);
  display: inline-flex;
  transition: color 0.15s;
}
.spec-note:hover .spec-note-icon,
.spec-note:focus .spec-note-icon {
  color: var(--ui-accent);
}
.spec-note-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--gray-900);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 0.45rem 0.65rem;
  border-radius: 6px;
  width: max-content;
  max-width: 260px;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.spec-note-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--gray-900);
}
.spec-note:hover .spec-note-tip,
.spec-note:focus .spec-note-tip {
  opacity: 1;
}
/* Access detail badges */
.access-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.75rem;
}
.access-detail-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 20px;
  background: var(--gray-50);
  border: 1px solid var(--gray-150, #e5e7eb);
  font-size: 0.6875rem;
}
.access-detail-time {
  font-weight: 700;
  color: var(--ui-accent);
  font-size: 0.75rem;
}
.access-detail-dest {
  color: var(--gray-600);
  font-weight: 500;
}

/* Certifications list */
.certifications-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.certification-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.6875rem;
  color: var(--gray-600);
  line-height: 1.5;
}
.certification-item svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--amber-600, #d97706);
}

/* --- Facility ESG Profile (VD) --- */
.facility-root {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.facility-vd {
  background: linear-gradient(180deg, #f8fafc 0%, var(--white) 60%);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.125rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 2.25rem; /* パート間の区切りを明確にするため広めに（旧 1rem） */
}
.facility-vd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px dashed var(--gray-200);
}
.facility-vd-title {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gray-900);
}
.facility-vd-title i { color: #0F7B85; }
.facility-vd-source {
  font-size: 0.6875rem;
  color: var(--gray-500);
  font-weight: 500;
  background: var(--gray-100);
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
}

.facility-vd-main {
  display: grid;
  grid-template-columns: minmax(140px, 180px) 1fr;
  gap: 1rem;
  align-items: stretch;
}
.facility-vd-score-card {
  background: linear-gradient(135deg, #0F7B85 0%, #446B4D 100%);
  color: var(--white);
  border-radius: 10px;
  padding: 0.875rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 4px 12px rgba(15, 123, 133, 0.18);
}
.facility-vd-score-label {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.9;
  font-weight: 600;
}
.facility-vd-score-value {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.2; /* 数字のディセンダ余白を確保（クリッピング防止） */
  margin: 0.25rem 0;
}
.facility-vd-score-sub {
  font-size: 0.6875rem;
  opacity: 0.95;
}

.facility-vd-ranks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 0.5rem;
}
.facility-vd-rank {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--bench, var(--border)); /* ベンチマーク種別（東京/グローバル）の左アクセント枠 */
  border-radius: 8px;
  padding: 0.5rem 0.625rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.facility-vd-rank-label {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  font-size: 0.625rem;
  color: var(--bench, var(--gray-600)); /* ラベルもベンチマーク色 */
  font-weight: 600;
  margin-bottom: 0.25rem;
  line-height: 1.3;
  min-height: 1.3em; /* ラベルは1行に統一。高さ揃え用に最小高を確保 */
}
.facility-vd-rank-label i { color: var(--bench, var(--gray-500)); flex-shrink: 0; margin-top: 1px; }
.facility-vd-rank-label > span {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.facility-vd-rank-value {
  font-size: 1.625rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--gray-900); /* 数値は中立色（色分けはラベル＋左枠が担う） */
}
.facility-vd-rank-total {
  font-size: 0.625rem;
  color: var(--gray-500);
}
.facility-vd-ranks-note {
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  color: var(--gray-500);
  line-height: 1.4;
}

.facility-vd-block {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.facility-vd-block-label {
  font-size: 0.875rem;
  color: var(--gray-800);
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* パート見出し: 地域課題（RISA）の risa-step-header と視覚を統一
   （アイコンバッジ＋見出し＋右へフェードする線）。色は ESG プロファイルのティール。 */
.facility-vd-part-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.facility-vd-part-badge {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--vd-accent, #0F7B85);
  color: #fff;
  border-radius: 7px;
}
.facility-vd-part-badge i,
.facility-vd-part-badge svg { width: 15px; height: 15px; }
.facility-vd-part-header .facility-vd-block-label { flex: 0 0 auto; }
.facility-vd-part-line {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--vd-accent, #0F7B85) 0%, transparent 100%);
  opacity: 0.45;
  min-width: 1rem;
}

.facility-vd-cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.375rem 0.75rem;
}
.facility-vd-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  padding: 0.375rem 0.5rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.75rem;
}
.facility-vd-cat-name { color: var(--gray-800); font-weight: 500; }
.facility-vd-cat-bar {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}
.facility-vd-cat-count {
  font-size: 0.875rem;
  font-weight: 700;
  color: #0F7B85;
  background: #E0F2F4;
  padding: 0.0625rem 0.4375rem;
  border-radius: 999px;
  min-width: 1.5rem;
  text-align: center;
}
.facility-vd-cat-avg {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.0625rem 0.375rem;
  border-radius: 4px;
}
.facility-vd-cat-avg.above { color: #2C4A33; background: #DDE7DC; }
.facility-vd-cat-avg.below { color: var(--gray-500); background: var(--gray-100); }

.facility-vd-sdgs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.facility-vd-sdg {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  cursor: help;
  transition: transform 0.15s ease;
}
.facility-vd-sdg:hover,
.facility-vd-sdg:focus-visible { transform: translateY(-2px); }
.facility-vd-sdg::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #1c3849;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 50;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}
.facility-vd-sdg::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 6px solid transparent;
  border-top-color: #1c3849;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 50;
}
.facility-vd-sdg:hover::after,
.facility-vd-sdg:hover::before,
.facility-vd-sdg:focus-visible::after,
.facility-vd-sdg:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 768px) {
  .facility-vd-main { grid-template-columns: 1fr; }
}

/* --- VD 16 Category Breakdown --- */
.vd-cat-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  font-size: 0.6875rem;
  color: var(--gray-600);
  margin-bottom: 0.5rem;
}
.vd-cat-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.vd-cat-legend-bar {
  width: 24px;
  height: 6px;
  background: linear-gradient(90deg, var(--dv-property) 0%, var(--dv-property-deep) 100%);
  border-radius: 3px;
}
.vd-cat-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.vd-cat-bar-mark-local { background: var(--dv-bench-local); }
.vd-cat-bar-mark-global { background: var(--dv-bench-global); }

.vd-cat-hint {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: 0.6875rem;
  color: var(--gray-500);
  margin-bottom: 0.5rem;
}
.vd-cat-hint i { color: #0F7B85; }
.vd-cat-chart-wrap {
  position: relative;
  height: 560px;
  margin-bottom: 0.75rem;
}
@media (max-width: 768px) {
  .vd-cat-chart-wrap { height: 460px; }
}
.vd-cat-detail-label {
  font-size: 0.6875rem;
  color: var(--gray-500);
  margin-bottom: 0.5rem;
}
.vd-cat-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem 1rem;
  align-items: start;
}
@media (max-width: 768px) {
  .vd-cat-list { grid-template-columns: 1fr; }
}
.vd-cat-row {
  background: var(--white);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 8px;
  overflow: hidden;
}
.vd-cat-summary {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem 0.625rem;
  cursor: pointer;
  list-style: none;
  transition: background 0.15s;
}
.vd-cat-summary::-webkit-details-marker { display: none; }
.vd-cat-summary:hover { background: var(--gray-50); }
.vd-cat-chevron {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--gray-400);
  transition: transform 0.2s ease;
}
details.vd-cat-row[open] .vd-cat-chevron { transform: rotate(180deg); }
.vd-cat-factors {
  padding: 0.5rem 0.625rem 0.625rem;
  border-top: 1px dashed var(--border);
  background: var(--gray-50);
}
.vd-cat-factors-empty {
  font-size: 0.6875rem;
  color: var(--gray-500);
  font-style: italic;
  line-height: 1.4;
}
.vd-cat-row.vd-cat-strong { border-left-color: var(--dv-positive); }
.vd-cat-row.vd-cat-avg    { border-left-color: var(--dv-warning); }
.vd-cat-row.vd-cat-weak   { border-left-color: var(--dv-attention); }
.vd-cat-row.vd-cat-gap    { border-left-color: var(--dv-negative); background: #fef2f2; }

.vd-cat-row-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
}
.vd-cat-num {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--gray-500);
  background: var(--gray-100);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  letter-spacing: 0.05em;
}
.vd-cat-name {
  flex: 1;
  color: var(--gray-900);
  font-weight: 600;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.vd-cat-count {
  font-size: 1rem;
  font-weight: 800;
  color: var(--gray-900);
  min-width: 1.5em;
  text-align: right;
}
.vd-cat-trend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vd-cat-trend-strong { color: var(--dv-positive); }
.vd-cat-trend-avg    { color: var(--dv-warning); }
.vd-cat-trend-weak   { color: #ea580c; }
.vd-cat-trend-gap    { color: var(--gray-400); }

.vd-cat-row-bar {
  position: relative;
  height: 8px;
  margin-top: 0.625rem; /* 平均ラベルを上に収めるための余白 */
  background: var(--gray-100);
  border-radius: 4px;
  overflow: visible;
}
.vd-cat-bar-subj {
  position: absolute;
  inset: 0;
  height: 8px;
  background: linear-gradient(90deg, var(--dv-property) 0%, var(--dv-property-deep) 100%);
  border-radius: 4px;
  max-width: 100%;
}
/* 棒は「本物件の値（施策数）」を表す中立の指標なので、評価によらず常にティールで統一。
   良し悪し（強み/平均並/要強化/未着手）は左枠線とバッジ（緑→アンバー→赤）で表す。 */

/* 東京平均の基準線（縦線 + 上部に「平均」ラベル） */
.vd-cat-baseline {
  position: absolute;
  top: -3px;
  height: 14px;
  width: 2px;
  background: var(--dv-bench-local);
  transform: translateX(-1px);
  border-radius: 1px;
  z-index: 2;
}
.vd-cat-baseline::after {
  content: attr(data-label);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 1px;
  font-size: 0.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--dv-bench-local);
  white-space: nowrap;
}

.vd-cat-bar-mark {
  position: absolute;
  top: -2px;
  width: 3px;
  height: 12px;
  transform: translateX(-1.5px);
  border-radius: 1px;
}
.vd-cat-bar-mark.vd-cat-bar-mark-local  { background: var(--dv-bench-local); }
.vd-cat-bar-mark.vd-cat-bar-mark-global { background: var(--dv-bench-global); }

.vd-cat-row-foot {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.625rem;
  color: var(--gray-500);
}
.vd-cat-foot-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.vd-cat-source {
  margin-top: 0.625rem;
  font-size: 0.625rem;
  color: var(--gray-500);
  font-style: italic;
}

/* --- VD Score Distribution --- */
.vd-dist-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem 1rem;
  margin-bottom: 0.875rem;
}
@media (max-width: 640px) {
  .vd-dist-summary { flex-direction: column; align-items: stretch; gap: 0.875rem; }
}
/* 総合スコア＝カードではなくテキスト表示 */
.vd-dist-stat-subject {
  flex: 0 0 auto;
  min-width: 190px;
  margin-left: calc(26px + 0.625rem);
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.4rem;
}
.vd-dist-stat-label {
  flex-basis: 100%;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
  font-weight: 600;
}
.vd-dist-stat-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--gray-900);
  margin: 0.125rem 0;
  line-height: 1.1;
}
.vd-dist-stat-sub {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--gray-500);
}
.vd-dist-chart-wrap {
  position: relative;
  height: 220px;
  margin: 0.25rem 0;
}

/* --- VD Factor List (Hard/Soft) --- */
.vd-fac-summary { flex: 1 1 320px; min-width: 0; margin-bottom: 0; }
.vd-fac-caption {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--gray-500);
  margin-bottom: 0.375rem;
}
.vd-fac-bar {
  display: flex;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  background: var(--gray-100);
  margin-bottom: 0.5rem;
}
.vd-fac-bar-seg { display: block; height: 100%; }
.vd-fac-bar-seg.vd-fac-hard { background: var(--dv-type-hard); }
.vd-fac-bar-seg.vd-fac-mix  { background: var(--dv-type-mix); }
.vd-fac-bar-seg.vd-fac-soft { background: var(--dv-type-soft); }
.vd-fac-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  font-size: 0.75rem;
  color: var(--gray-700);
}
.vd-fac-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.vd-fac-legend strong { color: var(--gray-900); }
.vd-fac-legend em { font-style: normal; color: var(--gray-500); font-size: 0.6875rem; }
.vd-fac-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.vd-fac-dot.vd-fac-hard { background: var(--dv-type-hard); }
.vd-fac-dot.vd-fac-mix  { background: var(--dv-type-mix); }
.vd-fac-dot.vd-fac-soft { background: var(--dv-type-soft); }

.vd-fac-details { margin-top: 0.25rem; }
.vd-fac-summary-toggle {
  cursor: pointer;
  list-style: none;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ui-accent);
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--border);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.vd-fac-summary-toggle::before {
  content: '▸';
  display: inline-block;
  transition: transform 0.15s ease;
  font-size: 0.875em;
}
.vd-fac-details[open] .vd-fac-summary-toggle::before { transform: rotate(90deg); }
.vd-fac-summary-toggle::-webkit-details-marker { display: none; }

.vd-fac-groups {
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
}
@media (max-width: 768px) {
  .vd-fac-groups { grid-template-columns: 1fr; }
}
.vd-fac-group {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
}
.vd-fac-group-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: 0.375rem;
}
.vd-fac-group-num {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--gray-500);
  background: var(--gray-100);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
}
.vd-fac-group-name {
  flex: 1;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-900);
}
.vd-fac-group-count {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gray-600);
}
.vd-fac-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.vd-fac-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--gray-800);
  padding: 0.125rem 0;
}
.vd-fac-name {
  flex: 1;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.vd-fac-badge {
  font-size: 0.5625rem;
  font-weight: 700;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  margin-top: 1px;
}
.vd-fac-badge.vd-fac-hard { color: #0a7e82; background: #d3eef0; }
.vd-fac-badge.vd-fac-mix  { color: #1d7d77; background: #d9f1ee; }
.vd-fac-badge.vd-fac-soft { color: #1f6b4d; background: #d7ede2; }

/* --- VD Tenant Alignment --- */
.vd-ten-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.625rem;
  margin-bottom: 0.875rem;
}
@media (max-width: 640px) {
  .vd-ten-summary { grid-template-columns: 1fr; }
}
.vd-ten-stat {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.625rem 0.75rem;
  text-align: center;
}
.vd-ten-stat-hi {
  background: linear-gradient(135deg, #0F7B85 0%, #446B4D 100%);
  border-color: transparent;
  color: var(--white);
  box-shadow: 0 4px 12px rgba(15, 123, 133, 0.18);
}
.vd-ten-stat-hi .vd-ten-stat-label,
.vd-ten-stat-hi .vd-ten-stat-sub { color: rgba(255,255,255,0.85); }
.vd-ten-stat-label {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
  font-weight: 600;
}
.vd-ten-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--gray-900);
  margin: 0.125rem 0;
  line-height: 1.2;
}
.vd-ten-stat-hi .vd-ten-stat-value { color: var(--white); }
.vd-ten-stat-sub {
  font-size: 0.625rem;
  color: var(--gray-500);
}

.vd-ten-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem 1rem;
  margin-bottom: 0.75rem;
}
@media (max-width: 768px) {
  .vd-ten-cols { grid-template-columns: 1fr; }
}
.vd-ten-col {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.625rem 0.75rem;
}
.vd-ten-col-head {
  font-size: 0.6875rem;
  font-weight: 700;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: 0.375rem;
}
.vd-ten-col-head-top { color: #047857; }
.vd-ten-col-head-bot { color: #92400e; }

.vd-ten-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.5fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-size: 0.75rem;
}
.vd-ten-name {
  color: var(--gray-900);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vd-ten-rate-bar {
  position: relative;
  display: block;
  height: 6px;
  background: var(--gray-100);
  border-radius: 3px;
  overflow: hidden;
}
.vd-ten-rate-bar > span {
  display: block;
  height: 100%;
  border-radius: 3px;
}
.vd-ten-rate-val {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--gray-700);
  font-size: 0.6875rem;
  min-width: 3em;
  text-align: right;
}

.vd-ten-all {
  margin-top: 0.625rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.125rem 1rem;
}
@media (max-width: 640px) {
  .vd-ten-all { grid-template-columns: 1fr; }
}

/* --- Per-tenant requirement accordion --- */
.vd-ten-acc-head {
  margin-top: 0.875rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: none;
  letter-spacing: 0.02em;
}
.vd-ten-acc {
  margin-top: 0.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.vd-ten-tenant {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  overflow: hidden;
}
.vd-ten-tenant[open] {
  box-shadow: var(--shadow-sm);
}
.vd-ten-tsum {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr) auto 200px 48px 140px;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
}
.vd-ten-srctype {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.4;
  border: 1px solid transparent;
}
.vd-ten-srctype.is-official { background: #dcfce7; color: #166534; border-color: #86efac; }
.vd-ten-srctype.is-industry { background: #dbeafe; color: #1e3a8a; border-color: #93c5fd; }
.vd-ten-srctype.is-sample   { background: #fef3c7; color: #78350f; border-color: #fcd34d; }
.vd-ten-srcnote {
  background: #ffffff;
  border: 1px dashed var(--border);
  border-radius: 0.375rem;
  padding: 0.4375rem 0.625rem;
  margin-bottom: 0.4375rem;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--gray-600);
}
.vd-ten-srcnote b { color: var(--gray-800); font-weight: 600; margin-right: 0.25rem; }
.vd-ten-tsum::-webkit-details-marker { display: none; }
.vd-ten-tsum:hover { background: var(--gray-50); }
.vd-ten-caret {
  width: 1rem;
  height: 1rem;
  color: var(--gray-400);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.vd-ten-tenant[open] .vd-ten-caret { transform: rotate(90deg); }
.vd-ten-tcount {
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  color: var(--gray-500);
  white-space: nowrap;
  justify-self: end;
}
.vd-ten-tcount b { color: #047857; font-weight: 600; }
.vd-ten-tcount .vd-ten-gap {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  font-weight: 600;
  padding: 0.0625rem 0.4375rem;
  border-radius: 999px;
  margin-left: 0.25rem;
}
.vd-ten-reqs {
  border-top: 1px solid var(--border);
  padding: 0.375rem 0.75rem 0.625rem;
  display: flex;
  flex-direction: column;
  background: var(--gray-50);
}
/* テナント要件テーブル（VD 準拠: タグ単位の適合 = 塗り / 未適合 = 枠線） */
.vd-ten-legend {
  display: inline-flex;
  gap: 0.25rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}
.vd-ten-tblhead {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.375rem 0.25rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--gray-500);
}
.vd-ten-relnote {
  display: block;
  font-weight: 400;
  color: var(--gray-400);
  margin-top: 0.125rem;
}
.vd-ten-trow {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.4375rem 0.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  line-height: 1.45;
  align-items: start;
}
.vd-ten-tno { color: var(--gray-400); font-variant-numeric: tabular-nums; }
.vd-ten-ttxt { color: var(--gray-700); }
.vd-ten-trow.is-unrel .vd-ten-ttxt { color: var(--gray-400); }
.vd-ten-ttags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-content: flex-start;
}
.vd-tag2 {
  font-size: 0.625rem;
  font-weight: 500;
  padding: 0.0625rem 0.4375rem;
  border-radius: 4px;
  white-space: nowrap;
}
.vd-tag2.is-m { background: #0f766e; border: 1px solid #0f766e; color: var(--white); }
.vd-tag2.is-u { background: var(--white); border: 1px solid #f59e0b; color: #92400e; }
.vd-tag2.is-x {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  color: var(--gray-500);
  margin-left: 0.375rem;
}
@media (max-width: 640px) {
  .vd-ten-tblhead { display: none; }
  .vd-ten-trow { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .vd-ten-ttags { grid-column: 2; }
}

/* --- Challenge Cards --- */
.challenge-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.challenge-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  transition: box-shadow 0.2s;
}
.challenge-card:hover { box-shadow: var(--shadow-md); }
.challenge-top {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.challenge-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.challenge-icon svg { width: 1.25rem; height: 1.25rem; }
.challenge-info { flex: 1; min-width: 0; }
.challenge-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  gap: 0.5rem;
}
.challenge-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}
.challenge-badge {
  font-size: 0.6875rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  border: 1px solid;
  font-weight: 500;
  white-space: nowrap;
}
.badge-high { background: var(--orange-100); color: var(--orange-700); border-color: #fdba74; }
.badge-medium { background: var(--yellow-100); color: var(--yellow-700); border-color: #fde047; }
.badge-low { background: var(--green-100); color: var(--green-700); border-color: #86efac; }
.challenge-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* --- RISA Challenges (data-driven, scope-comparable) --- */
.risa-loading { padding: 1rem 0; font-size: 0.875rem; color: var(--gray-500); }
.risa-wrap { display: flex; flex-direction: column; gap: 1rem; }

.risa-header {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem 0.875rem;
}

/* --- Scope: Subject ↔ Comparison relation layout (Design A) --- */
.risa-scope-relation {
  display: grid;
  grid-template-columns: minmax(140px, max-content) auto 1fr;
  align-items: stretch;
  gap: 0.875rem;
}
.risa-subject-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  background: linear-gradient(135deg, #e6f3f7 0%, #cce7ef 100%);
  border: 1px solid #a6d4e2;
  border-radius: 10px;
  padding: 0.625rem 0.875rem;
  min-width: 0;
}
.risa-subject-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--ui-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.risa-subject-tag i { color: var(--ui-accent); }
.risa-subject-name {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.risa-subject-pref {
  font-size: 0.6875rem;
  color: var(--gray-600);
  font-weight: 500;
}
.risa-relation-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--gray-400);
  font-weight: 300;
  user-select: none;
}
.risa-comparison-side {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
  justify-content: center;
}
.risa-comparison-tag {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--gray-600);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.risa-comparison-segs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.1875rem;
}
.risa-comp-seg {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid transparent;
  background: transparent;
  color: var(--gray-700);
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--sans);
  transition: all 0.15s;
}
.risa-comp-seg:hover { background: var(--gray-100); color: var(--gray-900); }
.risa-comp-seg.active {
  background: var(--ui-accent);
  color: var(--white);
  border-color: var(--ui-accent);
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25);
}
.risa-comp-seg-name { line-height: 1; }
.risa-comp-seg-cnt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: 0.0625rem 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  background: var(--gray-100);
  color: var(--gray-700);
  border-radius: 999px;
  line-height: 1.3;
}
.risa-comp-seg.active .risa-comp-seg-cnt {
  background: rgba(255, 255, 255, 0.22);
  color: var(--white);
}
.risa-comparison-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4375rem;
  font-size: 0.75rem;
  color: var(--gray-600);
}
.risa-comparison-status-text { line-height: 1.4; }
.risa-comparison-status-text b {
  color: var(--ui-accent);
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0 0.0625rem;
}
.risa-comparison-active-pill {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ui-accent);
  background: #e6f3f7;
  border: 1px solid #a6d4e2;
  padding: 0.0625rem 0.4375rem;
  border-radius: 999px;
}

@media (max-width: 720px) {
  .risa-scope-relation {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .risa-relation-arrow {
    transform: rotate(90deg);
    font-size: 1rem;
    height: 1.25rem;
  }
}

/* --- Legacy scope row (kept for backwards-compat; not used by new layout) --- */
.risa-scope-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
}
.risa-scope-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  color: var(--gray-500);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.risa-scope-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.risa-scope-btn {
  padding: 0.3125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--gray-700);
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--sans);
  transition: all 0.15s;
}
.risa-scope-btn:hover { background: var(--gray-100); }
.risa-scope-btn.active {
  background: var(--ui-accent);
  color: var(--white);
  border-color: var(--ui-accent);
}
.risa-scope-info {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.risa-scope-count {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--gray-600);
  background: var(--white);
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.risa-scope-subject {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--gray-700);
}
.risa-scope-subject i { color: var(--ui-accent); }
.risa-scope-subject b { font-weight: 700; color: var(--gray-900); }

.risa-custom-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px dashed var(--border);
  padding-top: 0.625rem;
}
.risa-custom-hint { font-size: 0.6875rem; color: var(--gray-600); }
.risa-scope-actions { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.risa-scope-action {
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--gray-700);
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--sans);
}
.risa-scope-action:hover { background: var(--gray-100); }
.risa-search {
  width: 100%;
  padding: 0.4375rem 0.625rem;
  font-size: 0.8125rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--sans);
  background: var(--white);
}
.risa-region-list {
  max-height: 200px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.25rem;
}
.risa-region-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.4375rem;
  font-size: 0.75rem;
  color: var(--gray-800);
  border-radius: 4px;
  cursor: pointer;
}
.risa-region-item:hover { background: var(--gray-50); }
.risa-selected-count {
  font-size: 0.6875rem;
  color: var(--gray-600);
  font-weight: 500;
}

/* --- RISA Step Chapter Header (各ブロック上のチャプターヘッダー) --- */
.risa-step-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.75rem 0 0.75rem;
  padding: 0;
  scroll-margin-top: 1rem;
}
.risa-step-header:first-of-type { margin-top: 0; }
.risa-step-badge {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--step-color, #0284c7);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.risa-step-label {
  flex: 0 0 auto;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--step-color, #0284c7);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.risa-step-title {
  flex: 0 0 auto;
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.3;
}
.risa-step-line {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--step-color, #0284c7) 0%, transparent 100%);
  opacity: 0.5;
  min-width: 1rem;
}
@media (max-width: 540px) {
  .risa-step-header {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .risa-step-line { display: none; }
}

/* --- RISA "How to read this section" 統合ブロック
   コンテナ背景は持たず、内包する3要素（ステップカード／データ説明／詳細展開）
   が独立した白カードとして並ぶ。ダッシュボードの読み方とビジュアル統一。 --- */
.risa-howto {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.risa-howto-head {
  margin-bottom: 0;
}
.risa-howto-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 0.25rem 0;
}
.risa-howto-sub {
  font-size: 0.8125rem;
  color: var(--gray-600);
  margin: 0;
  line-height: 1.5;
}

/* 4ステップフロー (flexで「ダッシュボードの読み方」と同じ構造) */
.risa-howto-steps {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.risa-howto-step {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 0.5rem;
  padding: 0.875rem 0.75rem 1rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--risa-howto-color, #0284c7);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}
.risa-howto-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.risa-howto-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.risa-howto-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--risa-howto-color, #0284c7);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
}
.risa-howto-step-icon {
  font-size: 1.25rem;
  line-height: 1;
}
.risa-howto-step-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.3;
}
.risa-howto-step-desc {
  font-size: 0.75rem;
  color: var(--gray-600);
  line-height: 1.5;
}
.risa-howto-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--gray-400);
  font-size: 1rem;
  font-weight: 700;
  padding: 0 0.375rem;
}

/* レスポンシブ: 「ダッシュボードの読み方」(.dg-steps) と同一閾値で1列化 */
@media (max-width: 640px) {
  .risa-howto-steps {
    flex-direction: column;
    gap: 0.5rem;
  }
  .risa-howto-arrow { display: none; }
}

/* ミニデータ説明 (主観 × 客観) */
.risa-howto-data {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.875rem 1rem;
}
.risa-howto-data-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 0.625rem;
}
.risa-howto-data-emoji {
  font-size: 0.9375rem;
  display: inline-flex;
  align-items: center;
  color: var(--gray-700, #374151);
}
.risa-howto-data-emoji svg { display: block; }
.risa-howto-data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
@media (max-width: 640px) {
  .risa-howto-data-grid { grid-template-columns: 1fr; }
}
.risa-howto-data-col {
  padding: 0.625rem 0.75rem;
  background: var(--gray-50);
  border-radius: 6px;
  border-left: 3px solid var(--gray-300);
}
.risa-howto-data-wb { border-left-color: #6366f1; }
.risa-howto-data-cen { border-left-color: #0d9488; }
.risa-howto-data-col-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}
.risa-howto-data-badge {
  display: inline-block;
  padding: 0.125rem 0.4375rem;
  background: #ede9fe;
  color: #6d28d9;
  font-size: 0.6875rem;
  font-weight: 700;
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.risa-howto-data-badge-cen { background: #d1fae5; color: #047857; }
.risa-howto-data-col-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--gray-900);
}
.risa-howto-data-col-sub {
  font-size: 0.75rem;
  color: var(--gray-700);
  margin-bottom: 0.25rem;
}
.risa-howto-data-col-ex {
  font-size: 0.6875rem;
  color: var(--gray-500);
  line-height: 1.5;
}

/* 凡例 */
.risa-howto-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.625rem;
  border-top: 1px dashed var(--border);
}
.risa-howto-legend-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--gray-600);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-right: 0.25rem;
}
.risa-howto-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.1875rem 0.5rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.6875rem;
  color: var(--gray-700);
  white-space: nowrap;
}
.risa-howto-legend-chip b {
  font-weight: 700;
  color: var(--gray-900);
}
.risa-howto-legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

/* もっと詳しく見る（既存wbIntroを内包する展開エリア）*/
.risa-howto-more {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.risa-howto-more[open] { background: #fafbfc; }
.risa-howto-more-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-700);
  user-select: none;
  transition: background 0.15s ease;
}
.risa-howto-more-summary::-webkit-details-marker { display: none; }
.risa-howto-more-summary:hover { background: var(--gray-50); }
.risa-howto-more-icon {
  font-size: 0.9375rem;
  display: inline-flex;
  align-items: center;
}
.risa-howto-more-icon svg { display: block; }
.risa-howto-more-text { flex: 1; }
.risa-howto-more-chev {
  font-size: 0.75rem;
  color: var(--gray-500);
  font-weight: 700;
}
.risa-howto-more-chev::before { content: '＋'; }
.risa-howto-more[open] .risa-howto-more-chev::before { content: '−'; }
.risa-howto-more > .risa-wb-intro {
  padding: 0.25rem 1rem 1rem 1rem;
  margin-bottom: 0;
}

/* 旧 risa-lead / risa-methodology クラスは廃止（互換のため空保持） */

/* --- RISA Well-Being indicator introduction panel (3 blocks) --- */
.risa-wb-intro {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.risa-wb-block {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
}
.risa-wb-block-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 0.75rem 0;
  padding-bottom: 0.625rem;
  border-bottom: 2px solid var(--gray-100);
}
.risa-wb-body {
  font-size: 0.875rem;
  color: var(--gray-700);
  line-height: 1.75;
  margin: 0 0 0.625rem 0;
}
.risa-wb-body:last-child {
  margin-bottom: 0;
}
.risa-wb-source {
  font-size: 0.6875rem;
  color: var(--gray-500);
  line-height: 1.4;
  margin: 0.5rem 0 0 0;
}
.risa-wb-note {
  font-size: 0.75rem;
  color: var(--gray-500);
  line-height: 1.5;
  margin: 0.5rem 0 0 0;
}
.risa-wb-subtitle {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 1rem 0 0.5rem 0;
  padding-top: 0.875rem;
  border-top: 1px solid var(--gray-100);
}
.risa-wb-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 0.25rem 0;
}
.risa-wb-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 0.8125rem;
  background: var(--white);
}
.risa-wb-sources-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.8125rem;
  background: var(--white);
}
.risa-wb-table th,
.risa-wb-sources-table th {
  background: #f1f5f9;
  color: var(--gray-700);
  text-align: left;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  font-weight: 700;
}
.risa-wb-table td,
.risa-wb-sources-table td {
  padding: 0.75rem 0.875rem;
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-100);
  vertical-align: top;
  line-height: 1.6;
}
.risa-wb-table tr:last-child td,
.risa-wb-sources-table tr:last-child td {
  border-bottom: none;
}
.risa-wb-cell-strong {
  font-weight: 700;
  color: var(--gray-900);
  white-space: nowrap;
}
.risa-wb-deflist {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.5rem 0 0 0;
}
.risa-wb-defrow {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1rem;
  padding: 0.375rem 0;
  border-bottom: 1px dashed var(--gray-100);
}
.risa-wb-defrow:last-child {
  border-bottom: none;
}
.risa-wb-defrow dt {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
}
.risa-wb-defrow dd {
  font-size: 0.8125rem;
  color: var(--gray-700);
  line-height: 1.6;
  margin: 0;
}
.risa-wb-score-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--gray-50);
  border-radius: 6px;
}
.risa-wb-score-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--gray-700);
}
.risa-wb-score-item b {
  color: var(--gray-900);
  font-weight: 700;
  min-width: 3em;
}
.risa-wb-score-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .risa-wb-defrow {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}

/* --- RISA Explainer panel (このセクションの読み方) --- */
.risa-explainer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.875rem;
  background: linear-gradient(180deg, #f8fafc 0%, var(--white) 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.125rem;
}
@media (max-width: 900px) {
  .risa-explainer { grid-template-columns: 1fr; }
}
.risa-explainer-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.risa-explainer-col + .risa-explainer-col {
  border-left: 1px solid var(--border);
  padding-left: 1.125rem;
}
@media (max-width: 900px) {
  .risa-explainer-col + .risa-explainer-col {
    border-left: none;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: 0.75rem;
  }
}
.risa-explainer-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.risa-explainer-icon {
  font-size: 1.125rem;
  line-height: 1;
}
.risa-explainer-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--gray-900);
}
.risa-explainer-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.risa-explainer-lede {
  font-size: 0.8125rem;
  color: var(--gray-700);
  line-height: 1.5;
}
.risa-explainer-lede b {
  font-weight: 700;
  color: var(--gray-900);
}
.risa-explainer-note {
  font-size: 0.6875rem;
  color: var(--gray-500);
  line-height: 1.45;
}
.risa-explainer-source {
  font-size: 0.6875rem;
  color: var(--gray-500);
  line-height: 1.4;
  margin-top: 0.25rem;
}
.risa-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem;
}
.risa-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--risa-cat-color, #0284c7);
  border-radius: 999px;
  font-size: 0.6875rem;
  color: var(--gray-800);
  line-height: 1.2;
}
.risa-cat-chip-icon {
  font-size: 0.8125rem;
  line-height: 1;
}
.risa-preset-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem;
}
.risa-preset-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.1875rem 0.5rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.6875rem;
  color: var(--gray-700);
  font-weight: 600;
}
.risa-score-legend {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
}
.risa-score-row-item {
  display: grid;
  grid-template-columns: 14px 56px 1fr;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--gray-700);
}
.risa-score-row-item b {
  font-weight: 700;
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
}
.risa-score-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

/* --- RISA Summary bar (地域課題 + 地域の強み) --- */
.risa-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
}
@media (max-width: 720px) {
  .risa-summary { grid-template-columns: 1fr; }
}
.risa-summary-col {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.875rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.risa-summary-col-low  { border-top: 3px solid #dc2626; background: linear-gradient(180deg, #fef2f2 0%, var(--white) 60%); }
.risa-summary-col-high { border-top: 3px solid #16a34a; background: linear-gradient(180deg, #f0fdf4 0%, var(--white) 60%); }

.risa-summary-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.risa-summary-badge {
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.risa-summary-badge svg { display: block; }
.risa-summary-badge-low svg { color: #dc2626; }
.risa-summary-badge-high svg { color: #16a34a; }
.risa-summary-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--gray-900);
}
.risa-summary-hint {
  flex-basis: 100%;
  font-size: 0.6875rem;
  color: var(--gray-500);
  line-height: 1.4;
}
.risa-summary-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
@media (max-width: 480px) {
  .risa-summary-tiles { grid-template-columns: 1fr; }
}
/* 折りたたみ: 上位8件のみ表示（残りは「もっと見る」ボタンで展開） */
.risa-summary-tiles.is-collapsed .risa-summary-tile:nth-child(n+9) {
  display: none;
}
.risa-summary-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  padding: 0.4rem 0.85rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-700, #374151);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.risa-summary-more:hover {
  background: var(--gray-50, #f9fafb);
  border-color: var(--gray-400, #9ca3af);
}
.risa-summary-more-caret {
  font-size: 0.7rem;
  line-height: 1;
}
.risa-summary-tile {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.risa-summary-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}
.risa-summary-low:hover  { border-color: #fca5a5; }
.risa-summary-high:hover { border-color: #86efac; }
.risa-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  line-height: 1;
  flex-shrink: 0;
}
.risa-summary-body {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  flex: 1;
  min-width: 0;
}
.risa-summary-toprow {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.risa-summary-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.25;
}
.risa-source-badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.125rem 0.4rem;
  border-radius: 4px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  white-space: nowrap;
}
.risa-source-wb {
  background: #ede9fe;
  color: #6d28d9;
  border: 1px solid #c4b5fd;
}
.risa-source-census {
  background: #d1fae5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.risa-summary-count {
  display: inline-block;
  min-width: 1.5rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--gray-700);
  margin-left: 0.25rem;
}
.risa-summary-col-low .risa-summary-count {
  background: #fee2e2;
  color: #991b1b;
}
.risa-summary-col-high .risa-summary-count {
  background: #dcfce7;
  color: #14532d;
}
.risa-summary-empty {
  font-size: 0.75rem;
  color: var(--gray-500);
  padding: 0.75rem 0.5rem;
  text-align: center;
}
.risa-summary-meta {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.risa-summary-score {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
}
.risa-summary-value {
  font-size: 1rem;
  font-weight: 800;
  color: var(--gray-900);
  line-height: 1;
}
.risa-summary-rank {
  font-size: 0.6875rem;
  color: var(--gray-500);
  font-weight: 600;
}
.risa-summary-cat-hint {
  font-size: 0.625rem;
  color: var(--gray-400);
  font-weight: 500;
  margin-top: 0.125rem;
}

/* --- カテゴリカード内のサブブロック（参考値・物件特性） --- */
.risa-details-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 0.5rem;
}
.risa-sub-block {
  border-top: 1px dashed var(--border);
  padding-top: 0.75rem;
}
.risa-sub-block:first-child {
  border-top: none;
  padding-top: 0;
}
.risa-sub-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gray-500);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.risa-ind-tag.neut {
  background: #f3f4f6;
  color: var(--gray-600);
  border: 1px solid var(--gray-300);
}
.risa-site-block {
  background: transparent;
  padding: 0;
}
.risa-site-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gray-700);
  margin-bottom: 0.5rem;
}
.risa-site-items {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.risa-site-row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 0.125rem 0.75rem;
  align-items: baseline;
  padding: 0.25rem 0;
  border-bottom: 1px dotted var(--gray-200);
}
.risa-site-row:last-child {
  border-bottom: none;
}
.risa-site-label {
  font-size: 0.75rem;
  color: var(--gray-600);
  font-weight: 500;
}
.risa-site-value {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--gray-900);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.risa-site-value.risa-site-lvl-ok    { color: #16a34a; }
.risa-site-value.risa-site-lvl-mid   { color: #d97706; }
.risa-site-value.risa-site-lvl-high  { color: #dc2626; }
.risa-site-note {
  grid-column: 1 / -1;
  grid-row: 3;
  font-size: 0.6875rem;
  color: var(--gray-500);
  line-height: 1.4;
}
.risa-site-row-chart .risa-site-chart-card {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 0.5rem;
  background: linear-gradient(180deg, #faf5ff 0%, #ffffff 100%);
  border: 1px solid #ede9fe;
  border-radius: 8px;
  padding: 0.625rem 0.75rem 0.5rem;
}
.risa-site-chart-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}
.risa-site-chart-title {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #6b21a8;
  letter-spacing: 0.02em;
}
.risa-site-chart-yoy {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #16a34a;
  background: #dcfce7;
  padding: 0.0625rem 0.375rem;
  border-radius: 4px;
}
.risa-site-chart-unit {
  margin-left: auto;
  font-size: 0.625rem;
  color: var(--gray-500);
  font-variant-numeric: tabular-nums;
}
.risa-site-chart-canvas-wrap {
  position: relative;
  width: 100%;
  height: 160px;
}
.risa-site-chart-canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}
.risa-site-block-note {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dotted var(--gray-300);
  font-size: 0.6875rem;
  color: var(--gray-500);
  line-height: 1.5;
}

/* --- Facilities block — count badge + collapsible facility names --- */
.risa-fac-items {
  display: flex;
  flex-direction: column;
}
.risa-fac-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 0.625rem;
  row-gap: 0.25rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--gray-100);
}
.risa-fac-row:last-child {
  border-bottom: none;
}
.risa-fac-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.risa-fac-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-800);
}
.risa-fac-count {
  justify-self: end;
  min-width: 1.875rem;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
}
.risa-fac-detail {
  grid-column: 2 / -1;
  grid-row: 2;
}
.risa-fac-detail summary {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  list-style: none;
}
.risa-fac-detail summary::-webkit-details-marker { display: none; }
.risa-fac-detail summary::after {
  content: '▸';
  font-size: 0.625rem;
  transition: transform 0.15s ease;
}
.risa-fac-detail[open] summary::after { transform: rotate(90deg); }
.risa-fac-note {
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  color: var(--gray-500);
  line-height: 1.55;
}
.risa-fac-unit {
  font-size: 0.625rem;
  font-weight: 700;
  margin-left: 0.0625rem;
}
.risa-fac-caption {
  font-size: 0.6875rem;
  color: var(--gray-500);
  margin: -0.125rem 0 0.5rem;
}

/* --- Generic attribute block (zoning / school / transport / price / fiscal) --- */
.risa-attr-items {
  display: flex;
  flex-direction: column;
}
.risa-attr-row {
  display: grid;
  grid-template-columns: auto 1fr minmax(0, auto);
  grid-template-rows: auto auto auto;
  align-items: baseline;
  column-gap: 0.625rem;
  row-gap: 0.25rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--gray-100);
}
.risa-attr-row:last-child {
  border-bottom: none;
}
.risa-attr-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}
.risa-attr-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-800);
}
.risa-attr-value {
  justify-self: end;
  text-align: right;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.risa-attr-value.risa-site-lvl-ok   { color: #16a34a; }
.risa-attr-value.risa-site-lvl-mid  { color: #d97706; }
.risa-attr-value.risa-site-lvl-high { color: #dc2626; }
.risa-attr-row-chart .risa-site-chart-card {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 0.5rem;
}
.risa-attr-detail {
  grid-column: 2 / -1;
  grid-row: 3;
}
.risa-attr-detail summary {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  list-style: none;
}
.risa-attr-detail summary::-webkit-details-marker { display: none; }
.risa-attr-detail summary::after {
  content: '▸';
  font-size: 0.625rem;
  transition: transform 0.15s ease;
}
.risa-attr-detail[open] summary::after { transform: rotate(90deg); }
.risa-attr-note {
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  color: var(--gray-500);
  line-height: 1.55;
}

/* --- Hazard block — emphasized risk display --- */
.risa-site-block-hazard {
  margin-top: 0.25rem;
}
.risa-sub-title-hazard {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--gray-700);
  background: linear-gradient(90deg, #fef2f2 0%, #fff7ed 100%);
  border-left: 3px solid #dc2626;
  padding: 0.375rem 0.625rem;
  border-radius: 0 6px 6px 0;
  text-transform: none;
  letter-spacing: 0.01em;
  margin-bottom: 0.625rem;
}
.risa-sub-title-icon {
  font-size: 0.875rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.risa-sub-title-icon svg { display: block; }
.risa-hazard-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.risa-hazard-row {
  position: relative;
  display: flex;
  align-items: stretch;
  background: #fafafa;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.risa-hazard-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.risa-hazard-stripe {
  width: 5px;
  flex-shrink: 0;
  background: var(--gray-400);
}
.risa-hazard-body {
  flex: 1;
  min-width: 0;
  padding: 0.625rem 0.75rem;
}
.risa-hazard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.risa-hazard-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--gray-900);
}
.risa-hazard-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
}
.risa-hazard-badge-icon {
  font-size: 0.75rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.risa-hazard-badge-icon svg { display: block; }
.risa-hazard-value {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 0.25rem;
  line-height: 1.4;
}
.risa-hazard-note {
  font-size: 0.6875rem;
  color: var(--gray-500);
  line-height: 1.5;
}

/* Level: high (red) */
.risa-hazard-row.risa-site-lvl-high {
  background: linear-gradient(90deg, #fef2f2 0%, #ffffff 60%);
  border-color: #fecaca;
}
.risa-hazard-row.risa-site-lvl-high .risa-hazard-stripe {
  background: #dc2626;
}
.risa-hazard-row.risa-site-lvl-high .risa-hazard-badge {
  background: #dc2626;
  color: #ffffff;
  border-color: #b91c1c;
}
.risa-hazard-row.risa-site-lvl-high .risa-hazard-value {
  color: #991b1b;
  font-weight: 700;
}

/* Level: mid (amber) */
.risa-hazard-row.risa-site-lvl-mid {
  background: linear-gradient(90deg, #fffbeb 0%, #ffffff 60%);
  border-color: #fde68a;
}
.risa-hazard-row.risa-site-lvl-mid .risa-hazard-stripe {
  background: #d97706;
}
.risa-hazard-row.risa-site-lvl-mid .risa-hazard-badge {
  background: #fbbf24;
  color: #78350f;
  border-color: #f59e0b;
}
.risa-hazard-row.risa-site-lvl-mid .risa-hazard-value {
  color: #92400e;
}

/* Level: ok (green) */
.risa-hazard-row.risa-site-lvl-ok {
  background: linear-gradient(90deg, #f0fdf4 0%, #ffffff 60%);
  border-color: #bbf7d0;
}
.risa-hazard-row.risa-site-lvl-ok .risa-hazard-stripe {
  background: #16a34a;
}
.risa-hazard-row.risa-site-lvl-ok .risa-hazard-badge {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}
.risa-hazard-row.risa-site-lvl-ok .risa-hazard-value {
  color: #15803d;
}

/* Level: low (light green) */
.risa-hazard-row.risa-site-lvl-low {
  background: linear-gradient(90deg, #f7fee7 0%, #ffffff 60%);
  border-color: #d9f99d;
}
.risa-hazard-row.risa-site-lvl-low .risa-hazard-stripe {
  background: #65a30d;
}
.risa-hazard-row.risa-site-lvl-low .risa-hazard-badge {
  background: #ecfccb;
  color: #3f6212;
  border-color: #bef264;
}

/* Level: tbd (gray) */
.risa-hazard-row.risa-site-lvl-tbd .risa-hazard-stripe {
  background: var(--gray-400);
}
.risa-hazard-row.risa-site-lvl-tbd .risa-hazard-badge {
  background: var(--gray-100);
  color: var(--gray-600);
  border-color: var(--gray-300);
}

/* --- 地域特性（参考指標） — 中立指標 --- */
.risa-context-panel {
  margin-top: 0.75rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
}
.risa-ctx-head {
  margin-bottom: 0.875rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed var(--border);
}
.risa-ctx-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 0.25rem;
}
.risa-ctx-sub {
  font-size: 0.75rem;
  color: var(--gray-500);
  line-height: 1.5;
}
.risa-ctx-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
.risa-ctx-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.5fr) minmax(140px, 2fr) minmax(80px, 1fr) minmax(80px, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.25rem;
  border-bottom: 1px solid var(--gray-100);
}
.risa-ctx-row:last-child {
  border-bottom: none;
}
.risa-ctx-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-700);
}
.risa-ctx-bar {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.risa-ctx-bar-track {
  position: relative;
  height: 6px;
  background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%);
  border-radius: 3px;
}
.risa-ctx-bar-marker {
  position: absolute;
  top: -3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gray-700);
  border: 2px solid var(--white);
  transform: translateX(-50%);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.risa-ctx-bar-axis {
  display: flex;
  justify-content: space-between;
  font-size: 0.625rem;
  color: var(--gray-400);
  font-variant-numeric: tabular-nums;
}
.risa-ctx-value {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  justify-content: flex-end;
}
.risa-ctx-value-num {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
}
.risa-ctx-value-unit {
  font-size: 0.6875rem;
  color: var(--gray-500);
}
.risa-ctx-mean {
  font-size: 0.6875rem;
  color: var(--gray-500);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  .risa-ctx-row {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0.5rem 1rem;
  }
  .risa-ctx-bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .risa-ctx-mean {
    text-align: left;
  }
}

/* --- RISA Commitment Bridge (地域課題 → マテリアリティ → KPI) --- */
.risa-bridge {
  margin-top: 0.5rem;
  background: var(--white, #fff);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.risa-bridge-head {
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--border);
  background: var(--white);
}
.risa-bridge-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.3;
}
.risa-bridge-sub {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--gray-500);
  line-height: 1.45;
}
.risa-bridge-table {
  display: flex;
  flex-direction: column;
}
.risa-bridge-row {
  --risa-cat-color: #0284c7;
  display: grid;
  grid-template-columns: minmax(260px, 2fr) minmax(120px, 1fr) minmax(220px, 2fr);
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.risa-bridge-row:last-child { border-bottom: none; }
.risa-bridge-row-head {
  background: #f8fafc;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.5rem 1.25rem;
  align-items: center;
}
@media (max-width: 760px) {
  .risa-bridge-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .risa-bridge-row-head { display: none; }
}
.risa-bridge-cell {
  min-width: 0;
}
.risa-bridge-cell-cat {
  border-left: 3px solid var(--risa-cat-color);
  padding-left: 0.625rem;
}
.risa-bridge-cat-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.risa-bridge-cat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: var(--risa-cat-color, #0284c7);
}
.risa-bridge-cat-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.25;
}
.risa-bridge-score {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  margin-left: auto;
}
.risa-bridge-score-num {
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.risa-bridge-score-rank {
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.risa-bridge-commit {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--gray-700);
  line-height: 1.5;
}
.risa-bridge-cell-mat {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem;
  align-content: flex-start;
}
.risa-bridge-mat {
  display: inline-flex;
  align-items: center;
  padding: 0.1875rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  border: 1px solid;
  border-radius: 999px;
  line-height: 1.3;
  white-space: nowrap;
}
.risa-bridge-cell-kpi {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem;
  align-content: flex-start;
}
.risa-bridge-tbd {
  display: inline-flex;
  align-items: center;
  padding: 0.1875rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #9ca3af;
  background: #f3f4f6;
  border: 1px dashed #d1d5db;
  border-radius: 6px;
  line-height: 1.3;
  white-space: nowrap;
}
.risa-bridge-kpi {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid;
  border-radius: 6px;
  text-decoration: none;
  line-height: 1.3;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.risa-bridge-kpi:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  text-decoration: none;
}

/* Card highlight when scrolled to from summary */
@keyframes risaCardFlash {
  0%   { box-shadow: 0 0 0 0 rgba(2, 132, 199, 0); }
  20%  { box-shadow: 0 0 0 6px rgba(2, 132, 199, 0.25); }
  100% { box-shadow: 0 0 0 0 rgba(2, 132, 199, 0); }
}
.risa-card-flash {
  animation: risaCardFlash 1.4s ease-out;
}

/* STEP3 冒頭の 9カテゴリ俯瞰レーダー */
.risa-overview {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px 10px;
  margin-bottom: 1rem;
}
.risa-overview-head { margin-bottom: 6px; }
.risa-overview-title { display: block; font-size: 14px; font-weight: 800; color: var(--gray-900); }
.risa-overview-hint { display: block; margin-top: 3px; font-size: 11.5px; color: var(--gray-500); line-height: 1.5; }
.risa-overview-canvas-wrap { position: relative; height: 380px; margin: 4px auto 0; max-width: 560px; }

.risa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.875rem;
}
.risa-card {
  --risa-cat-color: #0284c7;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--risa-cat-color);
  border-radius: 10px;
  padding: 1rem 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.risa-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}
.risa-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
  color: var(--risa-cat-color, #0284c7);
}
.risa-card-titles { flex: 1; min-width: 0; }
.risa-card-title { font-size: 0.9375rem; font-weight: 700; color: var(--gray-900); line-height: 1.25; }
.risa-card-note { font-size: 0.6875rem; color: var(--gray-500); margin-top: 0.1875rem; line-height: 1.4; }

.risa-card-empty {
  font-size: 0.8125rem;
  color: var(--gray-500);
  font-style: italic;
}

.risa-score-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.625rem;
}
.risa-score {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
}
.risa-score-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1875rem;
}
.risa-rank {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.risa-deviation { font-size: 0.6875rem; color: var(--gray-500); }

.risa-bar {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: var(--gray-100);
  margin-top: 0.125rem;
  overflow: hidden;
}
.risa-bar-track { display: none; }
.risa-bar-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: 4px;
}
.risa-bar-mark {
  position: absolute;
  top: -2px; bottom: -2px;
  width: 1px;
  background: var(--gray-700);
  z-index: 1;
}
.risa-bar-axis {
  display: flex;
  justify-content: space-between;
  font-size: 0.625rem;
  color: var(--gray-500);
  margin-top: 0.125rem;
}
.risa-bar-axis-mid { color: var(--gray-700); font-weight: 600; }

.risa-top3 {
  font-size: 0.6875rem;
  color: var(--gray-600);
  line-height: 1.4;
}

.risa-details summary {
  font-size: 0.75rem;
  color: var(--ui-accent);
  cursor: pointer;
  padding: 0.25rem 0;
  font-weight: 500;
}
.risa-details summary:hover { color: #015a78; }
.risa-inds {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border);
}
.risa-ind {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.risa-ind-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--gray-700);
}
.risa-ind-tag {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.0625rem 0.3125rem;
  border-radius: 3px;
  flex-shrink: 0;
}
.risa-ind-tag.wb { background: #ede9fe; color: #6d28d9; }
.risa-ind-tag.cen { background: #d1fae5; color: #047857; }
.risa-ind-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.375rem;
  font-size: 0.6875rem;
}
.risa-ind-val { font-weight: 700; color: var(--gray-900); font-size: 0.8125rem; }
.risa-ind-arrow { font-weight: 700; }
.risa-ind-mean { color: var(--gray-500); }
.risa-ind-pctile {
  margin-left: auto;
  font-weight: 600;
  color: var(--gray-700);
  background: var(--gray-100);
  padding: 0.0625rem 0.375rem;
  border-radius: 4px;
}
.risa-ind-pctile small { font-size: 0.5625rem; color: var(--gray-500); margin-left: 1px; }

/* WB ★ 5-star rating display */
.risa-stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.875rem;
  line-height: 1;
  letter-spacing: 0.5px;
}
.risa-stars-fill { color: #f59e0b; position: relative; display: inline-flex; }
.risa-stars-empty { color: #d1d5db; }
.risa-star-half {
  position: relative;
  display: inline-block;
  color: #d1d5db;
}
.risa-star-half::before {
  content: '★';
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  overflow: hidden;
  color: #f59e0b;
}
.risa-stars-num {
  margin-left: 4px;
  font-size: 0.6875rem;
  color: var(--gray-500);
  font-weight: 600;
}
.risa-ind-mean .risa-stars { font-size: 0.75rem; }
.risa-ind-mean .risa-stars-num { font-size: 0.625rem; }
.risa-summary-value .risa-stars { font-size: 0.9375rem; }

.risa-source {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  align-self: flex-start;
  padding: 0.375rem 0.75rem;
  background: var(--gray-100);
  border-radius: 6px;
  font-size: 0.6875rem;
  color: var(--gray-600);
  font-weight: 500;
}
.risa-source i { color: var(--gray-500); }

/* --- Property-specific Forecast Block (irregular geo scope) --- */
.risa-forecast {
  margin: 1.5rem 0 0.75rem;
  padding: 1.25rem 1.25rem 1rem;
  background: linear-gradient(180deg, #fffbf5 0%, #ffffff 60%);
  border: 1px solid #fcd9b3;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.risa-forecast-head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.risa-forecast-titles {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}
.risa-forecast-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.01em;
}
.risa-scope-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.risa-scope-badge-irregular {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}
.risa-scope-badge-irregular i { color: #b45309; }
.risa-forecast-subject {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: 0.75rem;
  color: var(--gray-600);
  font-weight: 500;
}
.risa-forecast-subject i { color: var(--gray-400); }
.risa-forecast-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.625rem;
}
.risa-forecast-stat {
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--gray-100);
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
}
.risa-forecast-stat-label {
  font-size: 0.6875rem;
  color: var(--gray-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.risa-forecast-stat-value {
  font-size: 0.875rem;
  color: var(--gray-900);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.risa-forecast-chart-wrap {
  height: 220px;
  background: #fff;
  border-radius: 10px;
  padding: 0.625rem;
  border: 1px solid var(--gray-100);
}
.risa-forecast-context {
  font-size: 0.75rem;
  color: var(--gray-600);
  line-height: 1.6;
  padding-left: 0.5rem;
  border-left: 2px solid #fcd34d;
}
.risa-forecast-source {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  font-size: 0.6875rem;
  color: var(--gray-500);
  line-height: 1.5;
}
.risa-forecast-source i { flex-shrink: 0; margin-top: 2px; color: var(--gray-400); }

/* --- Property Data Block (time-series supplementary charts inside RISA category) --- */
.risa-propdata {
  margin: 0.75rem 0 0;
  display: block;
}
.risa-propdata-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.875rem;
}
.risa-propdata-card {
  background: #fff;
  border: 1px solid var(--gray-100);
  border-radius: 10px;
  padding: 0.875rem 0.9375rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.risa-propdata-card-head {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.risa-propdata-card-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--gray-900);
}
.risa-propdata-card-meta {
  font-size: 0.6875rem;
  color: var(--gray-500);
  font-weight: 500;
}
.risa-propdata-info {
  font-size: 0.75rem;
  color: var(--gray-600);
  line-height: 1.55;
}
.risa-propdata-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  font-size: 0.6875rem;
  color: var(--gray-700);
}
.risa-propdata-leg {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
}
.risa-propdata-leg-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.risa-propdata-chart-wrap {
  height: 180px;
  padding: 0.25rem 0;
}
.risa-propdata-note {
  font-size: 0.6875rem;
  color: var(--gray-600);
  line-height: 1.55;
  padding-left: 0.5rem;
  border-left: 2px solid #9fd0e8;
}
.risa-propdata-source {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  font-size: 0.625rem;
  color: var(--gray-500);
  line-height: 1.5;
}
.risa-propdata-source i { flex-shrink: 0; margin-top: 2px; color: var(--gray-400); }

/* --- Property Attributes Block (site-specific facts: hazard, zoning, school) --- */
.risa-attrs {
  margin: 0.75rem 0 0.75rem;
  padding: 1.25rem 1.25rem 1rem;
  background: #fafafa;
  border: 1px solid var(--gray-150, #e5e7eb);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.risa-attrs-head {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.risa-attrs-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.01em;
}
.risa-attrs-subject {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: 0.75rem;
  color: var(--gray-600);
  font-weight: 500;
}
.risa-attrs-subject i { color: var(--gray-400); }
.risa-attrs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.875rem;
}
.risa-attrs-card {
  background: #fff;
  border: 1px solid var(--gray-100);
  border-radius: 10px;
  padding: 0.875rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.risa-attrs-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--gray-100);
}
.risa-attrs-card-head i { color: var(--gray-500); }
.risa-attrs-card-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.01em;
}
.risa-attrs-card-items {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}
.risa-attrs-item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.risa-attrs-item-label {
  font-size: 0.6875rem;
  color: var(--gray-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.risa-attrs-item-value {
  font-size: 0.8125rem;
  color: var(--gray-800);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.risa-attrs-item.is-warn .risa-attrs-item-value { color: #b45309; }
.risa-attrs-item.is-ok .risa-attrs-item-value { color: #16a34a; }
.risa-attrs-item-note {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.6875rem;
  color: var(--gray-500);
  font-weight: 500;
}
.risa-attrs-card-note {
  font-size: 0.6875rem;
  color: var(--gray-500);
  line-height: 1.55;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--gray-100);
}
.risa-attrs-source {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  font-size: 0.6875rem;
  color: var(--gray-500);
  line-height: 1.5;
}
.risa-attrs-source i { flex-shrink: 0; margin-top: 2px; color: var(--gray-400); }

@media (max-width: 640px) {
  .risa-scope-info { margin-left: 0; }
  .risa-grid { grid-template-columns: 1fr; }
  .risa-forecast-chart-wrap { height: 180px; }
  .risa-attrs-grid { grid-template-columns: 1fr; }
}

/* --- Materiality Cards --- */
.materiality-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.materiality-card {
  background: var(--white);
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.materiality-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.materiality-header svg { width: 2rem; height: 2rem; stroke-width: 1.5; }
.materiality-title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.materiality-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 1rem;
}
.sub-mat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 0.5rem;
}
.sub-mat-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sub-mat-tag {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 4px;
  border: 1px solid;
}

/* ── Materiality Theme Options（オーナー選択用テーマ案セレクター）── */
.mat-options-intro {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  max-width: 62rem;
}

/* ── 採用モード: コンセプト図（スライド1「人・資源・活動が循環」）──── */
.mat-concept {
  border: 1.5px solid #A7D3B4;
  border-radius: 14px;
  background: radial-gradient(120% 130% at 50% -25%, #EEF4E0 0%, #E3EFE6 48%, #D8F0EA 100%);
  padding: 1.6rem 1.5rem 1.3rem;
  margin-bottom: 1.75rem;
  text-align: center;
}
.mat-concept-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2C6E49;
  margin-bottom: 0.55rem;
}
.mat-concept-eyebrow svg { width: 0.85rem; height: 0.85rem; }
.mat-concept-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1F5132;
  line-height: 1.5;
  margin-bottom: 1.2rem;
}
.mat-concept-cycle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 1.15rem;
}
.mat-concept-loop {
  display: inline-flex;
  color: #2C6E49;
  opacity: 0.5;
  flex: none;
}
.mat-concept-loop svg { width: 1rem; height: 1rem; }
.mat-concept-nodes {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.mat-concept-node {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1.5px solid;
  border-radius: 999px;
  padding: 0.55rem 1.05rem;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.mat-concept-node-ic { display: inline-flex; flex: none; }
.mat-concept-node-ic svg { width: 1.25rem; height: 1.25rem; }
.mat-concept-node-name { font-size: 0.95rem; font-weight: 700; }
.mat-concept-arrow {
  display: inline-flex;
  color: #2C6E49;
  opacity: 0.55;
  flex: none;
}
.mat-concept-arrow svg { width: 1.1rem; height: 1.1rem; }
.mat-concept-transform {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  justify-content: center;
  background: rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  padding: 0.5rem 1.15rem;
}
.mat-concept-from {
  font-size: 0.9rem;
  color: var(--gray-500);
  text-decoration: line-through;
  text-decoration-color: rgba(0, 0, 0, .25);
}
.mat-concept-tarrow { display: inline-flex; color: #0F766E; }
.mat-concept-tarrow svg { width: 1.1rem; height: 1.1rem; }
.mat-concept-to {
  font-size: 1rem;
  font-weight: 700;
  color: #115E59;
}
.mat-concept-foot {
  font-size: 0.78rem;
  color: var(--gray-600);
  margin-top: 0.9rem;
}

/* 採用モード: 採用フレームのヘッダー */
.mat-adopted-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}
.mat-adopted-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #1F5132;
  background: #E3EFE6;
  border: 1px solid #A7D3B4;
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
}
.mat-adopted-badge svg { width: 0.85rem; height: 0.85rem; }
.mat-adopted-framework {
  font-size: 0.72rem;
  font-weight: 700;
  color: #2C6E49;
}
.mat-adopted-name {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--gray-900);
}
.mat-options-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}
.mat-opt-card {
  text-align: left;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  font-family: inherit;
}
.mat-opt-card:hover {
  border-color: var(--gray-400);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
  transform: translateY(-2px);
}
.mat-opt-card.selected {
  border-color: #2C6E49;
  box-shadow: 0 0 0 1.5px #2C6E49 inset;
}
.mat-opt-card-top { display: flex; align-items: center; gap: 0.5rem; min-height: 1.1rem; }
.mat-opt-framework {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #2C6E49;
  background: #E3EFE6;
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
  white-space: nowrap;
}
.mat-opt-name {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.3;
}
.mat-opt-rec {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--white);
  background: #5F9035;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  white-space: nowrap;
}
.mat-opt-check { margin-left: auto; color: #2C6E49; display: inline-flex; }
.mat-opt-check svg { width: 1.125rem; height: 1.125rem; stroke-width: 2.5; }
.mat-opt-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.mat-opt-chip {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  border: 1px solid;
  line-height: 1.3;
}
.mat-opt-tag {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.mat-opt-grouping {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--gray-500);
  margin-top: auto;
}
.mat-options-detail {
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem;
}
.mat-opt-detail-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1.25rem;
}
.mat-opt-detail-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  background: #2C6E49;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  align-self: center;
}
.mat-opt-detail-framework {
  font-size: 0.72rem;
  font-weight: 700;
  color: #2C6E49;
  align-self: center;
}
.mat-opt-detail-name { font-size: 1.25rem; font-weight: 700; color: var(--gray-900); }
.mat-opt-detail-desc {
  font-size: 0.9rem;
  color: var(--gray-700);
  line-height: 1.75;
  margin: 0 0 1rem;
  max-width: 64rem;
}
.mat-opt-detail-bestfor {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.6rem;
  background: #EEF4E0;
  border: 1px solid #C8DD9A;
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  margin-bottom: 1.25rem;
}
.mat-opt-bestfor-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #4D7C0F;
  white-space: nowrap;
}
.mat-opt-bestfor-label svg { width: 0.85rem; height: 0.85rem; }
.mat-opt-bestfor-text { font-size: 0.85rem; color: var(--gray-700); line-height: 1.6; }
.mat-opt-theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.mat-opt-theme-card {
  border: 1px solid;
  border-radius: 8px;
  padding: 1rem;
}
.mat-opt-theme-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.mat-opt-theme-head svg { width: 1.375rem; height: 1.375rem; stroke-width: 2; flex-shrink: 0; }
.mat-opt-theme-name { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.mat-opt-els { display: flex; flex-direction: column; gap: 0.5rem; }
.mat-opt-el-name {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
  padding: 0.4rem 0.65rem;
  background: rgba(255, 255, 255, .6);
  border: 1px solid;
  border-radius: 6px;
}
.mat-opt-detail-note {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
}
/* STEP 見出し */
.mat-step { margin-bottom: 2.25rem; }
.mat-step-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.mat-step-num {
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em;
  color: var(--white); background: #2C6E49; padding: 0.2rem 0.5rem; border-radius: 4px;
}
.mat-step-title { font-size: 1.05rem; font-weight: 700; color: var(--gray-900); }
.mat-step-lead { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; margin: 0.15rem 0 1rem; max-width: 62rem; }

/* STEP1: ゾーン診断（下段インパクト・ロジックモデルと同じ語彙・色） */
.mat-zones { display: flex; flex-direction: column; gap: 0.75rem; max-width: 62rem; }
.mat-zone {
  border: 1px solid var(--border); border-left: 4px solid var(--mat-zone-color, var(--gray-400));
  border-radius: 10px; background: var(--white); padding: 0.8rem 1rem;
}
.mat-zone-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.mat-zone-label { font-size: 0.92rem; font-weight: 800; color: var(--mat-zone-color, var(--gray-700)); }
.mat-zone-desc { font-size: 0.75rem; color: var(--text-secondary); }
.mat-zone-empty { opacity: .6; }
.mat-zone-none { font-size: 0.75rem; color: var(--gray-500); margin-top: 0.4rem; }
.mat-zone-rest { background: var(--gray-50); }
.mat-zone-rest .mat-zone-label { color: var(--gray-600); }
.mat-zone-item { margin-top: 0.65rem; padding-top: 0.65rem; border-top: 1px dashed var(--border); }
.mat-zone-item-name {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.88rem; font-weight: 700; color: var(--gray-900); margin-bottom: 0.4rem;
}
.mat-zone-item-name svg { width: 1rem; height: 1rem; color: var(--mat-zone-color, var(--gray-500)); flex-shrink: 0; }
.mat-zone-note { font-size: 0.7rem; color: var(--gray-500); margin-top: 0.4rem; }

/* 3データ根拠チップ */
.mat-ev-list { display: flex; flex-direction: column; gap: 0.3rem; }
.mat-ev { display: flex; gap: 0.4rem; align-items: flex-start; font-size: 0.72rem; line-height: 1.45; }
.mat-ev-tag {
  display: inline-flex; align-items: center; gap: 0.2rem; font-weight: 700; font-size: 0.62rem;
  padding: 0.1rem 0.35rem; border-radius: 4px; white-space: nowrap; flex-shrink: 0;
}
.mat-ev-tag svg { width: 0.72rem; height: 0.72rem; }
.mat-ev-region .mat-ev-tag { background: #E0ECF5; color: #1E3A5F; }
.mat-ev-tenant .mat-ev-tag { background: #E3EFE6; color: #2C6E49; }
.mat-ev-facility .mat-ev-tag { background: #F3ECDD; color: #92400E; }
.mat-ev-text { color: var(--gray-700); }
.mat-ev-list-sm .mat-ev { font-size: 0.68rem; }

/* 候補カード（3案） */
.mat-opt-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 0.5rem; }
.mat-opt-groups { display: flex; flex-direction: column; gap: 0.45rem; }
.mat-opt-group { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.5rem 0.6rem; border-radius: 8px; border: 1px solid; }
.mat-opt-group-name { display: flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; font-weight: 700; line-height: 1.3; }
.mat-opt-group-name svg { width: 0.82rem; height: 0.82rem; flex-shrink: 0; }
.mat-opt-group-els { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.mat-opt-el-tag {
  font-size: 0.68rem; font-weight: 700; padding: 0.12rem 0.5rem; border-radius: 999px;
  background: rgba(255, 255, 255, .75); border: 1px solid; line-height: 1.4; white-space: nowrap;
}
.mat-opt-prec-hint {
  display: flex; align-items: flex-start; gap: 0.35rem;
  font-size: 0.72rem; color: var(--gray-600); line-height: 1.5; margin-top: auto;
}
.mat-opt-prec-hint svg { width: 0.8rem; height: 0.8rem; flex-shrink: 0; margin-top: 0.14rem; color: #2C6E49; }

/* 詳細のテーマカード内 */
.mat-opt-el { display: flex; flex-direction: column; gap: 0.35rem; }
.mat-opt-el-name { display: flex; align-items: center; }
.mat-opt-el-ic { display: inline-flex; margin-right: 0.4rem; flex-shrink: 0; opacity: 0.85; }
.mat-opt-el-ic svg { width: 0.82rem; height: 0.82rem; }
.mat-opt-oneliner { display: flex; gap: 0.35rem; align-items: flex-start; font-size: 0.8rem; font-weight: 600; line-height: 1.5; margin-bottom: 0.85rem; }
.mat-opt-oneliner svg { width: 0.9rem; height: 0.9rem; flex-shrink: 0; opacity: 0.65; margin-top: 0.15rem; }

/* STEP3: この案が目指す実例 */
.mat-prec { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
.mat-prec-head {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.95rem; font-weight: 800; color: var(--gray-900); margin-bottom: 0.3rem;
}
.mat-prec-head svg { width: 1rem; height: 1rem; color: #2C6E49; flex-shrink: 0; }
.mat-prec-lead { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.6; margin: 0 0 0.85rem; max-width: 60rem; }
.mat-prec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
.mat-prec-card {
  border: 1px solid var(--border); border-left: 4px solid var(--mat-prec-color, #2C6E49);
  border-radius: 10px; background: var(--white); padding: 0.85rem 1rem;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.mat-prec-name { font-size: 0.9rem; font-weight: 800; color: var(--gray-900); line-height: 1.35; }
.mat-prec-context { font-size: 0.7rem; font-weight: 700; color: var(--gray-500); }
.mat-prec-theme-chip {
  align-self: flex-start; font-size: 0.66rem; font-weight: 700;
  padding: 0.12rem 0.5rem; border-radius: 999px; border: 1px solid; line-height: 1.4;
}
.mat-prec-summary { font-size: 0.78rem; color: var(--gray-700); line-height: 1.6; }
.mat-prec-note { font-size: 0.7rem; color: var(--gray-500); margin-top: 0.75rem; }

@media (max-width: 900px) {
  .mat-opt-cards { grid-template-columns: 1fr; }
  .mat-opt-theme-grid { grid-template-columns: 1fr; }
  .mat-prec-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .mat-concept-title { font-size: 1.1rem; }
  .mat-concept-node-name { font-size: 0.85rem; }
  .mat-concept-node { padding: 0.45rem 0.85rem; }
  .mat-concept-loop { display: none; }
  .mat-adopted-name { font-size: 1.15rem; }
}

/* Materiality keyProjects sub-list */
.mat-projects-details {
  margin-top: 1rem;
}
.mat-projects-details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  user-select: none;
  border-top: 1px solid var(--gray-100);
}
.mat-projects-details > summary::-webkit-details-marker { display: none; }
.mat-projects-details > summary:hover .mat-projects-label { color: var(--gray-700); }
.mat-projects-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.mat-projects-count {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--gray-500);
  background: var(--gray-100);
  padding: 0.0625rem 0.375rem;
  border-radius: 999px;
  min-width: 1.25rem;
  text-align: center;
}
.mat-projects-chev {
  margin-left: auto;
  display: inline-flex;
  color: var(--gray-400);
  transition: transform 0.2s ease;
}
.mat-projects-details[open] > summary .mat-projects-chev {
  transform: rotate(180deg);
}
.mat-projects {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.mat-project {
  padding: 0.625rem 0.75rem;
  border-radius: 8px;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.mat-project-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.mat-project-name {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.mat-project-since {
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.125rem 0.4375rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.mat-project-status {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* --- KPI Category Selector (Operational / Social / Environmental / Financial) --- */
.kpi-category-selector {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 1.5rem;
}
.kpi-category-label {
  flex: 0 0 auto;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #6b7280);
  margin-bottom: 0;
}
.kpi-category-tabs {
  /* セグメント切替（アセットクラスのタブと共通デザイン）。コンテンツ幅いっぱいに広げて均等分割 */
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--gray-100, #f3f4f6);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 12px;
}
.kpi-category-tabs .building-tab {
  flex: 1 1 0;
  text-align: center;
  justify-content: center;
}
.kpi-category-tab {
  /* .building-tab を継承。微調整のみ */
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

/* --- KPI Tab Buttons (Legacy — 他で使用していないか確認のため残置) --- */
.kpi-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.kpi-tab {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: none;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--sans);
  background: var(--gray-100);
  color: var(--gray-700);
}
.kpi-tab:hover { background: var(--gray-200); }
.kpi-tab.active {
  background: var(--ui-accent);
  color: var(--white);
}

/* --- KPI Cards Grid --- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}
.kpi-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1rem 1rem 1.25rem;
  border-left: 4px solid var(--gray-300);
  transition: box-shadow 0.2s, border-color 0.2s;
  position: relative;
  overflow: hidden;
}
.kpi-card:hover {
  box-shadow: var(--shadow-md);
}
.kpi-card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.kpi-card-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kpi-card-icon svg { width: 1rem; height: 1rem; }
.kpi-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  flex: 1;
}
.kpi-card-materiality {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.materiality-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.kpi-card-description {
  font-size: 0.6875rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--gray-100);
}
.kpi-card-metrics { display: flex; flex-direction: column; gap: 0.375rem; }
.kpi-metric {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.75rem;
}
.kpi-metric-label { color: var(--text-muted); }
.kpi-metric-value { font-weight: 600; color: var(--text); }
.kpi-metric-value.primary {
  font-size: 1.125rem;
  font-weight: 700;
}
.kpi-chart-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px dashed #e5e7eb;
  font-size: 0.6875rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.kpi-chart-heading-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 600;
  color: #475569;
}
.kpi-chart-heading-icon {
  display: inline-flex;
  color: #94a3b8;
}
.kpi-chart-heading-period {
  font-weight: 500;
  color: #94a3b8;
  font-size: 0.625rem;
  letter-spacing: 0.02em;
}
.kpi-chart-heading-trend {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 600;
  padding: 0.125rem 0.375rem;
  border-radius: 999px;
  font-size: 0.625rem;
  letter-spacing: 0.02em;
}
.kpi-chart-heading-trend.is-improving {
  background: #ecfdf5;
  color: #047857;
}
.kpi-chart-heading-trend.is-worsening {
  background: #fef2f2;
  color: #b91c1c;
}
.kpi-chart-heading-trend.is-flat {
  background: #f1f5f9;
  color: #64748b;
}
.kpi-chart-arrow {
  font-size: 0.75rem;
  line-height: 1;
}

.kpi-card-chart {
  height: 110px;
  margin-top: 0.375rem;
}
.kpi-card-materiality-section {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px dashed #e5e7eb;
}
.kpi-card-materiality-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.375rem;
}
.kpi-card-materiality-dots {
  display: inline-flex;
  gap: 3px;
}
.kpi-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 0.75rem;
}
.kpi-card-materiality-section .kpi-card-tags { margin-top: 0; }
.kpi-sub-tag {
  font-size: 0.625rem;
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
  border: 1px solid;
}

/* --- KPI ↔ Impact Checker 紐付け（プログレスバー型） --- */
.kpi-card-ic-ref {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.kpi-ic-section-label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.02em;
  margin-bottom: 0.125rem;
}
.kpi-ic-section-label svg {
  color: #94a3b8;
}
.kpi-ic-item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.625rem;
  background: transparent;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #16a34a;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: #334155;
  transition: all 0.15s;
}
.kpi-ic-item:hover {
  background: #fef3c7;
  border-color: #f59e0b;
  border-left-color: #f59e0b;
}
.kpi-ic-head {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  color: #64748b;
  margin-bottom: 0.375rem;
}
.kpi-ic-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: #94a3b8;
}
.kpi-ic-q {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: #475569;
}
.kpi-ic-arrow {
  flex-shrink: 0;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
}
.kpi-ic-item:hover .kpi-ic-arrow,
.kpi-ic-item:hover .kpi-ic-icon {
  color: #f59e0b;
}
.kpi-ic-item:hover .kpi-ic-q {
  color: #78350f;
}

/* プログレスバー */
.kpi-ic-bar {
  position: relative;
  height: 18px;
  background: #f1f5f9;
  border-radius: 9px;
  overflow: hidden;
}
.kpi-ic-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
  border-radius: 9px;
  transition: width 0.4s ease-out;
}
.kpi-ic-bar-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #0f172a;
  text-shadow: 0 0 2px rgba(255,255,255,0.85);
  letter-spacing: 0.02em;
}
.kpi-ic-bar-suffix {
  font-weight: 500;
  font-size: 0.625rem;
  margin-left: 0.25rem;
  opacity: 0.75;
}

/* NPS ゲージ */
.kpi-ic-nps-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.kpi-ic-nps-gauge {
  position: relative;
  flex: 1;
  height: 12px;
}
.kpi-ic-nps-track {
  position: absolute;
  inset: 50% 0 auto 0;
  height: 4px;
  margin-top: -2px;
  background: linear-gradient(90deg, #dc2626 0%, #e2b96b 50%, #16a34a 100%);
  border-radius: 2px;
}
.kpi-ic-nps-mid {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #475569;
  opacity: 0.5;
}
.kpi-ic-nps-marker {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  margin-left: -5px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: left 0.4s ease-out;
}
.kpi-ic-nps-value {
  font-size: 0.8125rem;
  font-weight: 700;
  min-width: 2.5rem;
  text-align: right;
}

/* Impact Checker ハイライト演出 */
.ic-card.ic-highlight,
.ic-matrix.ic-highlight,
.ic-highlight {
  animation: ic-highlight-pulse 2.4s ease-out;
}
@keyframes ic-highlight-pulse {
  0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6); outline: 3px solid #f59e0b; outline-offset: 4px; }
  60% { box-shadow: 0 0 0 12px rgba(245, 158, 11, 0); outline: 3px solid #f59e0b; outline-offset: 4px; }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); outline: 3px solid transparent; outline-offset: 4px; }
}

/* --- KPI Over Time --- */
.chart-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.chart-title-group {}
.chart-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text);
}
.chart-subtitle {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}
/* チャート用の役割説明（section-desc と同じトーン）— 常設 */
.chart-desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
  line-height: 1.6;
}
/* チャート下の「読み方」ヒント（rm-info-line と同じトーン）— 誤読防止 */
.chart-readhint {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  background: var(--gray-50);
  border-left: 2px solid var(--border);
  padding: 0.5rem 0.75rem;
  color: var(--text-muted);
  line-height: 1.65;
}
.toggle-group {
  display: flex;
  gap: 0;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  overflow: hidden;
}
.toggle-btn {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--sans);
  background: var(--white);
  color: var(--gray-700);
}
.toggle-btn:hover { background: var(--gray-50); }
.toggle-btn.active-purple {
  background: var(--purple-600);
  color: var(--white);
}
.toggle-btn.active-green {
  background: #16a34a;
  color: var(--white);
}
.chart-toggles { display: flex; gap: 0.75rem; align-items: center; }
.year-selector {
  background: var(--blue-50);
  border: 1px solid var(--blue-200);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.year-selector-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: 0.75rem;
}
.year-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.year-btn {
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  border: 2px solid var(--gray-300);
  background: var(--white);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--sans);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.year-btn.selected {
  color: var(--white);
}
.kpi-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: var(--gray-50);
  border-radius: 8px;
}
.kpi-sel-group-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: 100%;
  margin-top: 0.5rem;
}
.kpi-sel-group-label:first-child { margin-top: 0; }
.kpi-sel-btn {
  padding: 0.25rem 0.625rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--white);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--sans);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.kpi-sel-btn:hover { border-color: var(--gray-400); }
.kpi-sel-btn.selected {
  border-color: currentColor;
  font-weight: 600;
}
.kpi-sel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.chart-container {
  position: relative;
  height: 400px;
  margin-bottom: 1rem;
}
.chart-container canvas { width: 100% !important; height: 100% !important; }

/* --- Financial Analysis --- */
.financial-kpi-grid {
  /* セグメント切替（KPIカテゴリ / アセットクラスと共通デザイン）。全幅・均等分割 */
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
  padding: 0.25rem;
  background: var(--gray-100, #f3f4f6);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 12px;
}
.financial-kpi-btn {
  flex: 1 1 0;
  white-space: nowrap;
  text-align: center;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-600, #4b5563);
  cursor: pointer;
  transition: all 0.12s ease;
  font-family: var(--sans);
}
.financial-kpi-btn:hover {
  background: rgba(255, 255, 255, 0.55);
  color: var(--gray-800, #1f2937);
}
.financial-kpi-btn.active {
  background: var(--white, #fff);
  color: #015a78;
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(1, 90, 120, 0.18);
}
.model-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.model-metric {
  padding: 1rem;
  border-radius: 8px;
  text-align: center;
}
.model-metric.metric-green { background: var(--green-100); color: var(--green-700); }
.model-metric.metric-purple { background: #f3e8ff; color: #7c3aed; }
.model-metric.metric-blue { background: var(--blue-100); color: #2563eb; }
.model-metric-value {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.model-metric-label {
  font-size: 0.75rem;
  font-weight: 500;
}
.impact-factors { margin-bottom: 1.5rem; }
.impact-factors-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1rem;
}
.factor-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 8px;
  background: var(--gray-50);
  margin-bottom: 0.5rem;
  transition: background 0.15s;
}
.factor-item:hover { background: var(--gray-100); }
.factor-rank {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}
.factor-rank.rank-1 { background: #fef08a; color: #854d0e; }
.factor-rank.rank-2 { background: var(--gray-200); color: var(--gray-700); }
.factor-rank.rank-3 { background: #fed7aa; color: #9a3412; }
.factor-rank.rank-other { background: var(--gray-100); color: var(--gray-500); }
.factor-type-badge {
  font-size: 0.625rem;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.factor-type-kpi { background: var(--blue-100); color: #2563eb; }
.factor-type-stakeholder { background: var(--green-100); color: var(--green-600); }
.factor-type-property { background: #f3e8ff; color: var(--purple-600); }
.factor-name {
  flex: 1;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
}
.factor-direction {
  font-size: 0.75rem;
  font-weight: 600;
}
.factor-direction.positive { color: var(--green-600); }
.factor-direction.negative { color: var(--red-700); }
.factor-bar-wrap {
  width: 6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.factor-bar {
  flex: 1;
  height: 6px;
  background: var(--gray-200);
  border-radius: 3px;
  overflow: hidden;
}
.factor-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}
.factor-pct {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-secondary);
  width: 2.5rem;
  text-align: right;
}
.category-breakdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.category-box {
  border-radius: 8px;
  padding: 1rem;
}
.category-box-title {
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.category-box-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  padding: 0.375rem 0;
}

/* --- Operational KPI Table --- */
.kpi-table-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.fy-selector {
  display: flex;
  gap: 0.25rem;
}
.fy-btn {
  padding: 0.25rem 0.625rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--white);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--sans);
}
.fy-btn:hover { background: var(--gray-100); }
.fy-btn.active {
  background: var(--ui-accent);
  color: var(--white);
  border-color: var(--ui-accent);
}
.kpi-table {
  width: 100%;
  border-collapse: collapse;
}
.kpi-table th,
.kpi-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--gray-100);
}
.kpi-table th {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.kpi-table td { color: var(--text); }
.kpi-table td:last-child {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.kpi-table tr:hover td { background: var(--gray-50); }
.yoy-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  margin-left: 0.5rem;
}
.yoy-up { background: var(--green-100); color: var(--green-700); }
.yoy-down { background: var(--red-100); color: var(--red-700); }

/* --- Footer --- */
.site-footer {
  background: var(--gray-900);
  color: var(--gray-300);
  padding: 1rem 0;
  margin-top: 2rem;
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-copy { font-size: 0.75rem; }
.btn-back-top {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border: none;
  background: var(--gray-800);
  color: var(--gray-300);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s;
  font-family: var(--sans);
}
.btn-back-top:hover { background: var(--gray-700); }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .kpi-grid, .challenge-grid { grid-template-columns: repeat(2, 1fr); }
  .materiality-grid { grid-template-columns: 1fr; }
  .facility-grid { grid-template-columns: 1fr; }
  .facility-cols { grid-template-columns: 1fr; }
  .financial-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .model-metrics { grid-template-columns: 1fr; }
  .category-breakdown { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .kpi-grid, .challenge-grid { grid-template-columns: 1fr; }
  .page-title { font-size: 1.5rem; }
  .chart-controls { flex-direction: column; align-items: flex-start; }
  .chart-toggles { flex-wrap: wrap; }
  .footer-inner { flex-direction: column; gap: 0.5rem; text-align: center; }
}

/* --- Utilities --- */
.section-spaced { margin-top: 1.5rem; }
.text-right { text-align: right; }
.is-hidden { display: none; }
.fy-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
}
.kpi-unit-inline {
  color: var(--gray-400);
  font-size: 0.6875rem;
}
.app-error-state {
  padding: 3rem;
  text-align: center;
  color: var(--gray-500);
}

/* --- Edit Mode（社内オペレーター用 KPI 表示切替）--- */
.edit-mode-banner {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1.25rem;
  background: linear-gradient(135deg, var(--amber-50, #fffbeb), var(--amber-100, #fef3c7));
  border: 1px solid var(--amber-200, #fde68a);
  border-radius: 8px;
  margin-bottom: 1rem;
}
.edit-mode-banner-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: var(--white, #fff);
  border-radius: 50%;
  color: var(--amber-700, #b45309);
}
.edit-mode-banner-icon svg { width: 1rem; height: 1rem; }
.edit-mode-banner-text {
  flex: 1;
  font-size: 0.8125rem;
  color: var(--amber-900, #78350f);
  line-height: 1.4;
}
.edit-mode-banner-text strong { display: block; font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; }
.edit-mode-banner-text span { display: block; margin-top: 0.125rem; }
.edit-mode-exit {
  flex-shrink: 0;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--white, #fff);
  color: var(--amber-700, #b45309);
  border: 1px solid var(--amber-300, #fcd34d);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.edit-mode-exit:hover {
  background: var(--amber-50, #fffbeb);
  border-color: var(--amber-500, #f59e0b);
}

/* KPI カード上の表示切替ボタン */
.kpi-toggle-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  margin-left: auto;
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 6px;
  color: var(--gray-500, #6b7280);
  cursor: pointer;
  transition: all 0.15s;
}
.kpi-toggle-btn:hover {
  background: var(--white, #fff);
  border-color: var(--gray-300, #d1d5db);
  color: var(--gray-900, #111827);
}
.kpi-toggle-btn.is-hidden {
  background: var(--amber-50, #fffbeb);
  color: var(--amber-700, #b45309);
  border-color: var(--amber-200, #fde68a);
}
.kpi-toggle-btn svg { width: 0.875rem; height: 0.875rem; }

.kpi-card.kpi-card-hidden {
  opacity: 0.45;
  background: var(--gray-50, #f9fafb);
}
.kpi-card.kpi-card-hidden .kpi-card-title::after {
  content: ' (Hidden)';
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--amber-700, #b45309);
}
html[lang='ja'] .kpi-card.kpi-card-hidden .kpi-card-title::after {
  content: '（非表示）';
}

/* --- Local Social Challenges Section（定性サマリ、8 カード × 4 列）--- */
.local-challenges-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
@media (max-width: 1024px) {
  .local-challenges-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .local-challenges-grid { grid-template-columns: 1fr; }
}
.local-challenge-card {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--white, #fff);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 8px;
  transition: box-shadow 0.15s;
}
.local-challenge-card:hover {
  box-shadow: var(--shadow-md, 0 4px 6px rgba(0,0,0,0.07));
}
.lc-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 8px;
  border: 1px solid;
}
.lc-icon svg { width: 1.125rem; height: 1.125rem; }
.lc-body { flex: 1; min-width: 0; }
.lc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.lc-category {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-900, #111827);
  line-height: 1.3;
  margin: 0;
}
.lc-status {
  flex-shrink: 0;
  padding: 0.125rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}
.lc-status-high {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}
.lc-status-medium {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}
.lc-status-low {
  background: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
}
.lc-description {
  font-size: 0.75rem;
  color: var(--gray-600, #4b5563);
  line-height: 1.5;
  margin: 0;
}

/* --- Global Benchmark Section（海外類似プロジェクトとの比較表）--- */
.gb-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 8px;
  background: var(--white, #fff);
}
.gb-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
.gb-table th,
.gb-table td {
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
  vertical-align: top;
  font-size: 0.8125rem;
}
.gb-table tbody tr:last-child th,
.gb-table tbody tr:last-child td {
  border-bottom: none;
}
.gb-table tbody tr:hover {
  background: var(--gray-50, #f9fafb);
}
.gb-col-label {
  width: 18%;
  text-align: left;
  background: var(--gray-50, #f9fafb);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--gray-600, #4b5563);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.gb-col-project {
  text-align: left;
  font-size: 0.6875rem;
  border-left: 1px solid var(--gray-200, #e5e7eb);
}
.gb-subject-col {
  background: rgba(245, 158, 11, 0.08);
}
.gb-project-head {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.125rem;
}
.gb-project-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}
.gb-project-name {
  color: var(--gray-900, #111827);
  font-weight: 700;
  font-size: 0.75rem;
}
.gb-project-region {
  color: var(--gray-500, #6b7280);
  font-weight: 400;
  font-size: 0.6875rem;
}
.gb-row-label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--gray-600, #4b5563);
  background: var(--gray-50, #f9fafb);
}
.gb-cell {
  color: var(--gray-900, #111827);
  border-left: 1px solid var(--gray-200, #e5e7eb);
}
.gb-cell-right {
  text-align: right;
  font-weight: 700;
}
.gb-subject-cell {
  background: rgba(245, 158, 11, 0.06);
}
.gb-cell-placeholder-badge {
  background: var(--amber-100, #fef3c7);
  color: var(--amber-700, #b45309);
  margin: 0;
}
.gb-cell-placeholder-reason {
  margin-top: 0.25rem;
  font-size: 0.625rem;
  color: var(--gray-500, #6b7280);
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
}

/* --- SWOT Section（戦略象限分析）--- */
.swot-root {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.swot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 768px) {
  .swot-grid { grid-template-columns: 1fr; }
}
.swot-cell {
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 8px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.swot-cell-header {
  padding-bottom: 0.5rem;
  border-bottom: 2px solid;
}
.swot-cell-label {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.swot-kpi-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.swot-kpi-mini {
  display: block;
  padding: 0.625rem 0.875rem;
  background: var(--white, #fff);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-left: 3px solid;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: all 0.15s;
}
.swot-kpi-mini:hover {
  background: var(--gray-50, #f9fafb);
  transform: translateX(2px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
}
.swot-kpi-mini-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-900, #111827);
  line-height: 1.3;
}
.swot-kpi-mini-meta {
  margin-top: 0.25rem;
}
.swot-insight {
  padding: 0.875rem;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  border: 1px solid var(--gray-100, #f3f4f6);
}
.swot-insight-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gray-900, #111827);
  margin-bottom: 0.375rem;
}
.swot-insight-text {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--gray-700, #374151);
  margin: 0;
}
.swot-insight-placeholder {
  background: repeating-linear-gradient(
    45deg,
    var(--gray-50, #f9fafb),
    var(--gray-50, #f9fafb) 8px,
    var(--gray-100, #f3f4f6) 8px,
    var(--gray-100, #f3f4f6) 16px
  );
  border-style: dashed;
}

/* SWOT 経由で KPI カードへ遷移した時のハイライト演出 */
@keyframes kpi-flash {
  0%   { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.6); }
  50%  { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.2); }
  100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}
.kpi-card.kpi-highlight {
  animation: kpi-flash 1.6s ease-out;
}

/* --- Buildings Section（複合施設のビル選択 + 施設ハイライト）--- */
.buildings-root {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.buildings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.building-tab {
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 8px;
  border: 2px solid var(--gray-200, #e5e7eb);
  background: var(--white, #fff);
  color: var(--gray-700, #374151);
  cursor: pointer;
  transition: all 0.15s;
}
.building-tab:hover {
  border-color: var(--gray-300, #d1d5db);
  background: var(--gray-50, #f9fafb);
}
.building-tab.active {
  border-color: var(--ui-accent, #0077a0);
  background: #e6f3f7;
  color: #015a78;
}
.buildings-subhead {
  font-size: 0.875rem;
  color: var(--gray-700, #374151);
  margin-top: 0.5rem;
}
.buildings-subhead strong {
  color: var(--gray-900, #111827);
  font-weight: 700;
}
.buildings-facility-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.building-facility-chip {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid;
  transition: all 0.15s;
}
.building-facility-chip.is-included {
  background: #e6f3f7;
  color: #015a78;
  border-color: #a9d3e0;
}
.building-facility-chip.is-muted {
  background: var(--gray-50, #f9fafb);
  color: var(--gray-400, #9ca3af);
  border-color: var(--gray-200, #e5e7eb);
}
.buildings-note {
  font-size: 0.75rem;
  color: var(--gray-500, #6b7280);
  font-style: italic;
  border-top: 1px solid var(--gray-100, #f3f4f6);
  padding-top: 0.75rem;
}
.kpi-empty-hint {
  grid-column: 1 / -1;
  padding: 1.5rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--gray-500, #6b7280);
  background: var(--gray-50, #f9fafb);
  border: 1px dashed var(--gray-200, #e5e7eb);
  border-radius: 8px;
}

/* --- Placeholder UI（データ収集中） --- */
.placeholder-block {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 2rem 1.5rem;
  background: repeating-linear-gradient(
    45deg,
    var(--gray-50, #f9fafb),
    var(--gray-50, #f9fafb) 10px,
    var(--gray-100, #f3f4f6) 10px,
    var(--gray-100, #f3f4f6) 20px
  );
  border: 1px dashed var(--gray-300, #d1d5db);
  border-radius: 8px;
  color: var(--gray-600, #4b5563);
}
.placeholder-block.placeholder-compact {
  padding: 1rem;
}
.placeholder-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--white, #fff);
  border-radius: 50%;
  color: var(--gray-400, #9ca3af);
  border: 1px solid var(--gray-200, #e5e7eb);
}
.placeholder-icon svg { width: 1.25rem; height: 1.25rem; }
.placeholder-content { flex: 1; }
.placeholder-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--amber-100, #fef3c7);
  color: var(--amber-700, #b45309);
  margin-bottom: 0.5rem;
}
.placeholder-message {
  font-size: 0.875rem;
  color: var(--gray-700, #374151);
  line-height: 1.5;
}

/* 「準備中」を単なる不在表示ではなくデータ依頼として使うための必要データ一覧。
   JSON の `placeholders.needs[key]` が定義されたときだけ現れる。 */
.placeholder-needs {
  margin-top: 0.875rem;
  padding: 0.875rem 1rem;
  background: var(--white, #fff);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-left: 3px solid var(--amber-500, #f59e0b);
  border-radius: 6px;
}
.placeholder-needs-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--amber-700, #b45309);
  margin-bottom: 0.5rem;
}
.placeholder-need-list { list-style: none; margin: 0; padding: 0; }
.placeholder-need {
  position: relative;
  padding: 0.25rem 0 0.25rem 1.1rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--gray-800, #1f2937);
}
.placeholder-need::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65rem;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--amber-500, #f59e0b);
  border-radius: 2px;
}
.placeholder-need-label { font-weight: 600; }
.placeholder-need-note {
  color: var(--gray-500, #6b7280);
  font-weight: 400;
  margin-left: 0.5rem;
}
.placeholder-needs-why,
.placeholder-needs-src {
  margin: 0.625rem 0 0;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--gray-600, #4b5563);
}
.placeholder-needs-src span {
  font-weight: 700;
  color: var(--gray-700, #374151);
  margin-right: 0.4rem;
}
@media (max-width: 640px) {
  .placeholder-need-note { display: block; margin-left: 0; }
}

/* 地域課題セクションの「枠組み表示モード」アウトライン（実数値なし） */
.risa-framework-outline { margin-top: 1rem; }
.risa-framework-outline .placeholder-block { margin-bottom: 1.25rem; }
.risa-fw-cat {
  border: 1px solid var(--gray-200, #e5e7eb);
  border-left: 4px solid var(--risa-cat-color, #0284c7);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 0.875rem;
  background: var(--white, #fff);
}
.risa-fw-cat-head { display: flex; align-items: center; gap: 0.5rem; }
.risa-fw-cat-icon { display: inline-flex; color: var(--risa-cat-color, #0284c7); }
.risa-fw-cat-icon svg { width: 1.1rem; height: 1.1rem; }
.risa-fw-cat-title { font-size: 1rem; font-weight: 700; color: var(--gray-900, #111827); }
.risa-fw-cat-note {
  margin: 0.4rem 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--gray-600, #4b5563);
  line-height: 1.5;
}
.risa-fw-ind-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.risa-fw-ind { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.875rem; color: var(--gray-800, #1f2937); }
.risa-fw-ind-badge {
  flex-shrink: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--gray-100, #f3f4f6);
  color: var(--gray-600, #4b5563);
}
.risa-fw-ind-badge.risa-fw-ind-wb { background: #e0f2fe; color: #0369a1; }
.risa-fw-ind-badge.risa-fw-ind-census { background: #ecfdf5; color: #047857; }
.risa-fw-ind-key { font-weight: 500; }
.risa-fw-ind-role { font-size: 0.75rem; color: var(--gray-500, #6b7280); }

/* KPI カードがプレースホルダの場合 */
.kpi-card.kpi-card-placeholder {
  opacity: 0.85;
  background: repeating-linear-gradient(
    45deg,
    var(--white, #fff),
    var(--white, #fff) 8px,
    var(--gray-50, #f9fafb) 8px,
    var(--gray-50, #f9fafb) 16px
  );
}
.kpi-placeholder-badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--amber-100, #fef3c7);
  color: var(--amber-700, #b45309);
  margin-bottom: 0.5rem;
}

/* --- サンプルデータバッジ：実データではないことを各KPIカード単位で明示 --- */
.kpi-sample-badge {
  flex-shrink: 0;
  align-self: flex-start;
  display: inline-block;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--amber-100, #fef3c7);
  color: var(--amber-700, #b45309);
  border: 1px solid var(--amber-200, #fde68a);
  text-transform: uppercase;
  cursor: help;
}
.kpi-placeholder-reason {
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  color: var(--gray-500, #6b7280);
  font-style: italic;
  line-height: 1.4;
}

/* ============================================================
   Editorial Layout（layout.template === 'editorial' のみ適用）
   GOYOH ブランドガイドライン準拠
   ============================================================ */
body.layout-editorial {
  /* GOYOH ブランドパレット */
  --goyoh-navy: #1c3849;
  --goyoh-cream: #f2f2ec;
  --goyoh-cream-2: #e9e9e5;
  --goyoh-cream-3: #dededa;
  --goyoh-green: #5f9035;
  --goyoh-green-light: #a4b261;
  --goyoh-button: #b8c144;
  --goyoh-teal: #0077a0;

  /* HICity アクセント（施設ブランドカラー） */
  --hicity-blue: #00aeef;
  --hicity-magenta: #e91e8a;

  /* 意味マッピング */
  --editorial-bg: #ffffff;
  --editorial-hero-bg: #ffffff;
  --editorial-text: var(--goyoh-navy);
  --editorial-text-sub: #6b7280;
  --editorial-rule: var(--goyoh-cream-3);
  --editorial-accent: var(--goyoh-green);
  --editorial-gradient: linear-gradient(90deg, #a4b261 0%, #5f9035 50%, #0077a0 100%);

  background: var(--editorial-bg);
}

/* editorial 配下では従来の page-header（タイトル + サブタイトル）は非表示 */
body.layout-editorial .page-header { display: none; }

/* スプリットヒーロー: 左 42% (text + cream) / 右 58% (image) */
body.layout-editorial .editorial-hero {
  display: grid;
  grid-template-columns: 42% 58%;
  min-height: 360px;
  margin-bottom: 2.5rem;
  background: var(--editorial-hero-bg);
  overflow: hidden;
}

body.layout-editorial .ed-hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.5rem 3rem;
  background: var(--editorial-hero-bg);
}

body.layout-editorial .ed-hero-titles {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

body.layout-editorial .ed-hero-name {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--editorial-text);
  margin: 0;
}

body.layout-editorial .ed-hero-name::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 0.875rem;
  background: var(--editorial-gradient);
  border-radius: 2px;
}

/* タグライン: HICity リーフレット p12-13 の公式コピー
   施設名と差別化するため、行間を広めにとり weight を落として読み物的に。
   HICity ブルーのアクセントで施設ブランド感を添える。 */
body.layout-editorial .ed-hero-tagline {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--goyoh-teal);
  margin: 0;
  max-width: 28em;
}

body.layout-editorial .ed-hero-image {
  position: relative;
  overflow: hidden;
  background: var(--goyoh-cream-2);
}

body.layout-editorial .ed-hero-image img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  body.layout-editorial .editorial-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  body.layout-editorial .ed-hero-text { padding: 2rem 1.5rem; }
  body.layout-editorial .ed-hero-image img { min-height: 220px; }
  body.layout-editorial .ed-hero-name { font-size: 1.625rem; }
}

/* --- Item 3: カード装飾解除（editorial 配下のみ）---
   各セクションを白カードから「白背景に直接コンテンツが流れる」状態に。
   折りたたみ機能は Item 7 で別途解除予定。 */
body.layout-editorial .section {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

body.layout-editorial .section-header {
  padding-left: 0;
  padding-right: 0;
}
body.layout-editorial .section-header:hover {
  background: transparent;
}

body.layout-editorial .section-body {
  padding: 1rem 0 0 0;
  border-top: 0;
}

/* スコープセレクタも同様にフラット化 */
body.layout-editorial .scope-selector {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* --- Item 4: セクション間余白の拡張（editorial 配下のみ）---
   HICity リーフレット風の「呼吸する縦リズム」を作る。
   セクション間 96px / ヒーロー後 64px / スコープセレクタ後 64px */
body.layout-editorial .sections {
  gap: 6rem;
}
body.layout-editorial .editorial-hero {
  margin-bottom: 2.5rem;
}
body.layout-editorial .scope-selector {
  margin-bottom: 2rem;
}
/* main-content 自体の下余白も増やしてフッターとの間に呼吸を */
body.layout-editorial .main-content {
  padding-bottom: 6rem;
}

@media (max-width: 1024px) {
  body.layout-editorial .sections { gap: 4rem; }
  body.layout-editorial .editorial-hero { margin-bottom: 2rem; }
  body.layout-editorial .scope-selector { margin-bottom: 1.5rem; }
  body.layout-editorial .main-content { padding-bottom: 4rem; }
}
@media (max-width: 640px) {
  body.layout-editorial .sections { gap: 3rem; }
  body.layout-editorial .editorial-hero { margin-bottom: 1.5rem; }
  body.layout-editorial .scope-selector { margin-bottom: 1rem; }
}

/* --- Item 5: コンテンツ幅の制約（段階適用）---
   テキスト主体の要素のみ max-width: 720px に制約。
   KPI グリッド / チャート / テーブル等のデータ可視化要素は既存幅を維持。 */
body.layout-editorial .section-title {
  max-width: 720px;
}
body.layout-editorial .section-desc {
  max-width: 720px;
}

/* マテリアリティの説明テキスト */
body.layout-editorial .materiality-desc {
  max-width: 720px;
}

/* SWOT インサイト（分析テキスト） */
body.layout-editorial .swot-insight {
  max-width: 720px;
}

/* 地域社会課題（定性サマリ）の説明テキスト */
body.layout-editorial .local-challenges-grid .challenge-desc {
  max-width: 720px;
}

/* --- Phase 2-B: セクション英語キャプション（editorial 配下のみ）---
   日本語表示時、section-title の上に英語名を小さく表示する editorial パターン。
   英語表示時はタイトル自体が英語なのでキャプションは非表示。 */
body.layout-editorial .section-caption {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--editorial-accent);
  margin-bottom: 0.375rem;
  line-height: 1;
}
/* 英語モード時はキャプションを隠す（タイトルと重複するため） */
html[lang="en"] body.layout-editorial .section-caption { display: none; }

/* --- RISA「ガイド」バッジ：STEP の塗りバッジに対して、白塗り + 薄枠 + ソフト影で
   「番号ではなくメタ階層」を表現する */
.risa-howto-step-badge {
  background: #ffffff;
  color: var(--step-color, #64748b);
  border: 1px solid var(--gray-300, #d1d5db);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* --- セクション見出しの STEP インジケータ（編集デザイン的なミニマル表記） --- */
body.layout-editorial .section-step-banner {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  line-height: 1;
}
body.layout-editorial .section-step-badge {
  align-self: center;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--step-color);
  flex-shrink: 0;
  font-size: 0;
  color: transparent;
}
body.layout-editorial .section-step-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--step-color);
}
body.layout-editorial .section-step-sep {
  color: var(--gray-300);
  font-weight: 400;
}
body.layout-editorial .section-step-title-text {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gray-600);
}

/* --- Phase 2-B: セクション区切りグラデーションルール ---
   各セクションの上部に GOYOH グラデーションの細い水平線を入れ、
   editorial 的な「章」の区切りを視覚化する。 */
body.layout-editorial .section {
  padding-top: 2rem;
  position: relative;
}
body.layout-editorial .section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 2px;
  background: var(--editorial-gradient);
  border-radius: 1px;
}

/* --- Item 6: セクション見出しの配置（editorial 配下のみ）---
   見出しはコンテンツ本体の直上に全幅で表示する。
   （旧: 左 200px カラムに sticky 配置する 2 カラムだったが、
   コンテンツ幅が常に狭くなるため廃止。ナビゲーションは
   上部ピルバー + TOC ドロワーが担う。） */
@media (min-width: 1024px) {
  body.layout-editorial .section-title {
    font-size: 1.375rem;
    line-height: 1.4;
  }
  body.layout-editorial .section-desc {
    margin-top: 0.375rem;
  }
}

/* --- Item 7: 折りたたみ UI 解除（editorial 配下のみ）---
   editorial レイアウトでは全セクション常時展開。
   シェブロンを非表示にし、ヘッダークリックの pointer を解除。
   collapsed 状態も強制的にオーバーライドして表示。 */
body.layout-editorial .section-chevron {
  display: none;
}
body.layout-editorial .section-header {
  cursor: default;
  pointer-events: none;
}
/* collapsed でも section-body を表示し続ける */
body.layout-editorial .section.collapsed .section-body {
  display: block;
}

/* --- Phase 2-B: KPI タブの editorial 化 ---
   ピル型から下線型に変更し、editorial の雰囲気に統一。 */
body.layout-editorial .kpi-tabs {
  gap: 0;
  border-bottom: 1px solid var(--editorial-rule);
  margin-bottom: 2rem;
}
body.layout-editorial .kpi-tab {
  background: transparent;
  border-radius: 0;
  color: var(--editorial-text-sub);
  padding: 0.625rem 1.25rem;
  border-bottom: 2px solid transparent;
  font-size: 0.8125rem;
}
body.layout-editorial .kpi-tab:hover {
  background: transparent;
  color: var(--editorial-text);
}
body.layout-editorial .kpi-tab.active {
  background: transparent;
  color: var(--editorial-text);
  font-weight: 600;
  border-image: var(--editorial-gradient) 1;
}

/* --- Phase 2-B: RISA スコープボタンの editorial 化 --- */
body.layout-editorial .risa-scope-btn {
  background: transparent;
  border: 1px solid var(--editorial-rule);
  color: var(--editorial-text-sub);
}
body.layout-editorial .risa-scope-btn:hover {
  border-color: var(--editorial-accent);
  color: var(--editorial-text);
}
body.layout-editorial .risa-scope-btn.active {
  background: var(--editorial-accent);
  border-color: var(--editorial-accent);
  color: #fff;
}

/* --- Phase 2-B: フッターの editorial 化 --- */
body.layout-editorial .site-footer {
  background: var(--goyoh-navy);
}
body.layout-editorial .btn-back-top {
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.7);
}
body.layout-editorial .btn-back-top:hover {
  border-color: rgba(255,255,255,0.4);
  color: #fff;
}

/* --- Phase 2-B: サイトヘッダーの editorial 化 --- */
body.layout-editorial .site-header {
  background: var(--goyoh-navy);
}

/* --- Hamburger button (header-left) --- */
.header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.header-menu-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  cursor: pointer;
  padding: 0.375rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.header-menu-btn:hover {
  background: var(--gray-100);
  border-color: var(--gray-200);
}
body.layout-editorial .header-menu-btn {
  color: rgba(255,255,255,0.92);
}
body.layout-editorial .header-menu-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}

/* --- TOC Drawer (左から滑り込む目次) --- */
.toc-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  z-index: 998;
}
.toc-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.toc-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 340px;
  max-width: 88vw;
  height: 100vh;
  background: #fff;
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.12);
  transform: translateX(-105%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.toc-drawer.is-open {
  transform: translateX(0);
}

.toc-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--editorial-rule, var(--gray-200));
  flex-shrink: 0;
}
.toc-drawer-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--editorial-text, var(--text));
  margin: 0;
}
.toc-drawer-close {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.375rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.toc-drawer-close:hover {
  background: var(--gray-100);
  color: var(--text);
}

.toc-drawer-nav {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 0;
}

.toc-step {
  padding: 0.5rem 1.5rem 1rem;
  margin-bottom: 0.5rem;
}
.toc-step + .toc-step {
  border-top: 1px solid var(--editorial-rule, var(--gray-200));
  padding-top: 1rem;
}
.toc-step-other {
  padding-bottom: 0.5rem;
}

.toc-step-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.625rem;
}
.toc-step-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}
.toc-step-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--editorial-text-sub, var(--text-secondary));
}

.toc-step-links {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding-left: 2rem;
}

.toc-link {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--editorial-text, var(--text));
  text-decoration: none;
  border-radius: 6px;
  border-left: 2px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  line-height: 1.4;
}
.toc-step-other .toc-link {
  margin-left: 0;
}
.toc-link:hover {
  background: var(--gray-50, #f9fafb);
  color: var(--editorial-text, var(--text));
}
.toc-link.is-active {
  background: var(--gray-100, #f3f4f6);
  border-left-color: var(--toc-step-color, var(--editorial-accent));
  font-weight: 600;
}

@media (max-width: 640px) {
  .toc-drawer { width: 86vw; }
  .toc-drawer-header { padding: 1rem 1.25rem; }
  .toc-step { padding: 0.5rem 1.25rem 1rem; }
}

/* --- Current section pill (ヘッダー直下に貼り付く 1 行帯) ---
   editorial レイアウト時のみ表示。スクロール位置に応じて、現在閲覧中の
   セクション情報を「● STEP X タイトル ▸ セクション名」の 1 行で表示する。 */
.toc-current-pill {
  display: none;
}
body.layout-editorial .toc-current-pill {
  display: block;
  position: fixed;
  top: var(--header-h, 64px);
  left: 0;
  right: 0;
  z-index: 45;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--editorial-rule, #e5e7eb);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
body.layout-editorial .toc-current-pill.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.toc-pill-inner {
  max-width: var(--max-w, 1280px);
  margin: 0 auto;
  padding: 0.5rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 36px;
  font-size: 0.8125rem;
  line-height: 1.4;
  overflow: hidden;
}
.toc-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--editorial-accent, #16a34a);
  flex-shrink: 0;
  display: inline-block;
}
.toc-pill-step {
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.toc-pill-sep {
  color: var(--editorial-text-sub, #9ca3af);
  font-size: 0.875rem;
  flex-shrink: 0;
}
.toc-pill-title {
  font-weight: 600;
  color: var(--editorial-text, var(--text));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* editorial レイアウトでは main-content の上余白にピル分(--pill-h)を加える。
   ピルは fixed なので、加算しないと最上部コンテンツの一部が隠れる。 */
body.layout-editorial .main-content {
  padding-top: calc(var(--header-h, 64px) + 1.5rem + var(--pill-h, 37px));
}

/* editorial: セクション見出しはコンテンツ直上に全幅表示（項目 6 参照）。
   ピルバーは「いま見ているセクション」を示す上部の控えめなインジケータ。 */

@media (max-width: 640px) {
  .toc-pill-inner {
    padding: 0.4375rem 0.875rem;
    font-size: 0.75rem;
    gap: 0.5rem;
  }
}

/* --- Real Estate Market Data (native section) --- */
/* ミクロ/マクロ比較は ESG と同じベンチマーク色を再利用：
   ミクロ（大田区＝身近）＝コーラル #e95245、マクロ（東京マクロ・全国＝広域）＝ティール #24a6ba。
   予測（オレンジ）は別軸。グラフの線色は他系列との衝突回避のため従来色を維持。 */
.rm-root {
  /* 階層色は ESG ベンチマーク変数（--dv-bench-local / --dv-bench-global）から color-mix で派生。
     → 色変更は app.css の --dv-bench-* 1 か所で ESG セクションとマーケットデータの両方に反映される。
     文字/枠は読みやすい濃いめのシェード、塗り（pale/mid）は淡いシェードを派生して使う。 */
  /* マクロ（東京集計・全国＝広域）＝ ESG「グローバル平均」色系（ライトブルー） */
  --rm-purple: color-mix(in srgb, var(--dv-bench-global) 50%, #0f3a4a);
  --rm-purple-pale: color-mix(in srgb, var(--dv-bench-global) 16%, transparent);
  --rm-purple-mid: color-mix(in srgb, var(--dv-bench-global) 40%, transparent);
  --rm-nation: var(--rm-purple); --rm-nation-text: var(--rm-purple);
  --rm-nation-pale: var(--rm-purple-pale); --rm-nation-mid: var(--rm-purple-mid);
  /* ミクロ（大田区＝身近）＝ ESG「東京平均」色系（オレンジ） */
  --rm-micro: color-mix(in srgb, var(--dv-bench-local) 60%, #4a2600);
  --rm-micro-pale: color-mix(in srgb, var(--dv-bench-local) 18%, transparent);
  --rm-micro-mid: color-mix(in srgb, var(--dv-bench-local) 40%, transparent);
  width: 100%;
}

.rm-source-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 1rem; }
.rm-src-tag {
  font-size: 0.6875rem;
  background: var(--gray-100);
  border: 1px solid var(--border);
  color: var(--gray-500);
  padding: 0.125rem 0.5rem;
  border-radius: 3px;
  letter-spacing: 0.02em;
}

.rm-tabs { margin-bottom: 1.25rem; }

/* --- Asset Class Selector (Office / Residential / Hotel / Commercial) --- */
.rm-asset-selector {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 1.5rem;
}
.rm-asset-label {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #6b7280);
  margin-bottom: 0;
}
.rm-asset-tabs {
  /* セグメント切替（トラック）。全幅・均等分割。共通スタイルは下記 .kpi-category-tabs / .rm-asset-tabs .building-tab */
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--gray-100, #f3f4f6);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 12px;
}
.rm-asset-tab {
  /* 基本は .building-tab スタイルを継承。微調整のみ */
  flex: 1 1 0;
  text-align: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

/* セグメント切替の子ボタン（KPI カテゴリ / アセットクラス共通）:
   未選択は枠なしの平坦、選択中だけ白いツマみとして浮かせる */
.kpi-category-tabs .building-tab,
.rm-asset-tabs .building-tab {
  border: 1px solid transparent;
  background: transparent;
  color: var(--gray-600, #4b5563);
  border-radius: 8px;
  box-shadow: none;
}
.kpi-category-tabs .building-tab:hover,
.rm-asset-tabs .building-tab:hover {
  background: rgba(255, 255, 255, 0.55);
  border-color: transparent;
  color: var(--gray-800, #1f2937);
}
.kpi-category-tabs .building-tab.active,
.rm-asset-tabs .building-tab.active {
  background: var(--white, #fff);
  color: #015a78;
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(1, 90, 120, 0.18);
}

.rm-panel {
  width: 100%;
  /* 不動産マーケット内のミュート色は dashboard 既定より少し濃いめ（読みやすさ重視） */
  --rm-text-muted: #4b5563;   /* gray-600 */
  --rm-text-meta:  #6b7280;   /* gray-500 */
}

.rm-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.rm-kpi-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.875rem 1rem;
  position: relative;
}
.rm-kpi-label { font-size: 0.75rem; color: var(--rm-text-muted, #4b5563); margin-bottom: 0.375rem; line-height: 1.4; font-weight: 600; }
.rm-kpi-val { font-size: 1.375rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.rm-kpi-unit { font-size: 0.75rem; font-weight: 400; color: var(--rm-text-meta, #6b7280); margin-left: 2px; }
.rm-kpi-sub { font-size: 0.6875rem; color: var(--rm-text-meta, #6b7280); margin-top: 0.375rem; line-height: 1.5; }
.rm-kpi-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  padding: 0.125rem 0.5rem;
  border-radius: 3px;
  font-weight: 600;
}
.rm-kpi-badge svg { display: block; }
.rm-kpi-badge.up { background: rgba(22, 163, 74, 0.10); color: #166534; }
.rm-kpi-badge.dn { background: rgba(184, 60, 44, 0.10); color: #b91c1c; }

.rm-divider { display: flex; align-items: center; gap: 0.5rem; margin: 1.5rem 0 1rem; }
.rm-divider::before, .rm-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.rm-divider-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  white-space: nowrap;
}
.rm-divider-area .rm-divider-label { background: rgba(22, 163, 74, 0.10); border: 1px solid rgba(22, 163, 74, 0.25); color: #15803d; }
.rm-divider-area::before, .rm-divider-area::after { background: rgba(22, 163, 74, 0.20); }
.rm-divider-macro .rm-divider-label { background: var(--rm-purple-pale); border: 1px solid var(--rm-purple-mid); color: var(--rm-purple); }
.rm-divider-macro::before, .rm-divider-macro::after { background: var(--rm-purple-mid); }

.rm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 900px) { .rm-grid-2 { grid-template-columns: 1fr; } }

.rm-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 1rem;
  overflow: hidden;
}
.rm-card-head {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--gray-50);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.rm-card-title { font-size: 0.875rem; font-weight: 700; color: var(--text); flex: 1; }
.rm-card-meta { font-size: 0.6875rem; color: var(--rm-text-meta, #6b7280); white-space: nowrap; }
.rm-card-body { padding: 0.875rem 1rem 1rem; }

.rm-summary-strip {
  display: flex; align-items: center; gap: 0.875rem;
  padding: 0.625rem 0.875rem;
  background: var(--rm-purple-pale);
  border: 1px solid var(--rm-purple-mid);
  border-radius: 6px;
  margin-bottom: 0.875rem;
  flex-wrap: wrap;
}
.rm-summary-label { font-size: 0.75rem; font-weight: 600; color: var(--rm-purple); white-space: nowrap; }
.rm-summary-val { font-size: 1.125rem; font-weight: 700; color: var(--rm-purple); }
.rm-summary-unit { font-size: 0.6875rem; font-weight: 400; color: var(--text-muted); margin-left: 2px; }
.rm-summary-meta { font-size: 0.6875rem; color: #166534; }

.rm-table-title { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 700; color: #166534; margin-bottom: 0.375rem; }
.rm-table-title::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #16a34a; display: inline-block; }
.rm-table-unit { font-size: 0.6875rem; font-weight: 600; color: var(--rm-text-meta, #6b7280); margin-bottom: 0.375rem; }
.rm-table-wrap { overflow-x: auto; }
.rm-table { width: 100%; font-size: 0.75rem; border-collapse: collapse; }
.rm-table th { text-align: left; padding: 0.375rem 0.5rem; color: var(--text-muted); font-weight: 600; border-bottom: 2px solid var(--border); font-size: 0.75rem; }
.rm-table th.num, .rm-table td.num { text-align: right; }
.rm-table td { padding: 0.375rem 0.5rem; color: var(--text); border-bottom: 1px solid var(--gray-100); }
.rm-table .rm-row-star { background: rgba(22, 163, 74, 0.06); }
.rm-table .rm-row-star td { color: #15803d; font-weight: 600; }
.rm-table td svg { vertical-align: -2px; color: #f59e0b; }

.rm-note { margin-top: 0.5rem; font-size: 0.75rem; color: var(--rm-text-muted, #4b5563); line-height: 1.65; }
.rm-note svg { vertical-align: -2px; color: #f59e0b; }
.rm-meta-row { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 0.625rem; padding: 0.5rem 0.75rem; background: var(--gray-50); border-radius: 4px; font-size: 0.6875rem; color: var(--rm-text-meta, #6b7280); }
.rm-meta-source { margin-left: auto; }
.rm-info-line { font-size: 0.75rem; background: var(--gray-50); border-left: 2px solid var(--border); padding: 0.5rem 0.75rem; margin-bottom: 0.75rem; color: var(--rm-text-muted, #4b5563); line-height: 1.65; }
.rm-sub-label { font-size: 0.75rem; font-weight: 600; color: var(--rm-text-meta, #6b7280); margin-bottom: 0.375rem; }

.rm-legend { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-bottom: 0.5rem; }
.rm-leg { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; color: var(--text); }
.rm-leg-dot { width: 10px; height: 2px; border-radius: 1px; display: inline-block; }
.rm-leg-dash { width: 10px; height: 0; border: 0; border-top: 2px dashed; }
.rm-leg-meta { color: var(--text-muted); margin-left: auto; }

.rm-chart { position: relative; height: 220px; width: 100%; }
.rm-chart-sm { height: 180px; }
.rm-chart canvas { width: 100% !important; height: 100% !important; }

.rm-placeholder {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--gray-50);
}
.rm-placeholder-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.rm-placeholder-text { font-size: 0.875rem; }

/* --- Hero summary callout --- */
.rm-hero {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  background: linear-gradient(135deg, rgba(124, 92, 187, 0.08), rgba(124, 92, 187, 0.03));
  border: 1px solid rgba(124, 92, 187, 0.22);
  border-left: 4px solid var(--rm-purple);
  border-radius: 8px;
  padding: 1rem 1.125rem;
  margin-bottom: 1.25rem;
}
.rm-hero-icon {
  font-size: 1.5rem;
  line-height: 1.1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  color: var(--rm-purple);
}
.rm-hero-icon svg { display: block; }
.rm-hero-body { flex: 1; }
.rm-hero-title {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--rm-purple);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.375rem;
}
.rm-hero-text { font-size: 0.8125rem; color: var(--text); line-height: 1.7; }
.rm-hero-text b { color: var(--rm-purple); font-weight: 700; }

/* --- KPI row split (area | macro) --- */
.rm-kpi-row-split {
  position: relative;
  grid-template-columns: repeat(4, 1fr);
}
.rm-kpi-row-split .rm-kpi-card:nth-child(2) { margin-right: 0.375rem; }
.rm-kpi-row-split .rm-kpi-card:nth-child(3) {
  margin-left: 0.375rem;
  position: relative;
}
.rm-kpi-row-split .rm-kpi-card:nth-child(3)::before {
  content: '';
  position: absolute;
  top: 0.5rem; bottom: 0.5rem; left: -0.5rem;
  width: 1px;
  background: var(--border);
}
@media (max-width: 1100px) { .rm-kpi-row-split { grid-template-columns: repeat(2, 1fr); } .rm-kpi-row-split .rm-kpi-card:nth-child(3)::before { display: none; } }
@media (max-width: 600px) { .rm-kpi-row-split { grid-template-columns: 1fr; } }

.rm-kpi-area { border-left-color: var(--rm-micro); }
.rm-kpi-macro { border-left-color: var(--rm-purple); }
.rm-kpi-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 3px;
  margin-bottom: 0.375rem;
  letter-spacing: 0.02em;
}
.rm-kpi-tag svg { display: block; }
.rm-kpi-tag-area { background: var(--rm-micro-pale); color: var(--rm-micro); border: 1px solid var(--rm-micro-mid); }
.rm-kpi-tag-macro { background: var(--rm-purple-pale); color: var(--rm-purple); border: 1px solid var(--rm-purple-mid); }
.rm-kpi-tag-nation { background: var(--rm-nation-pale); color: var(--rm-nation-text); border: 1px solid var(--rm-nation-mid); }

/* --- Block dividers (more prominent than rm-divider) --- */
.rm-block-divider {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  margin: 2rem 0 1rem;
  padding: 0.625rem 0.875rem;
  border-radius: 6px;
  border-left: 4px solid;
}
/* Tier color tokens — shared by block banners and their cards */
.rm-block-area,    .rm-card-area    { --rm-tier: var(--rm-micro); --rm-tier-text: var(--rm-micro); --rm-tier-pale: color-mix(in srgb, var(--dv-bench-local) 8%, transparent); --rm-tier-band: color-mix(in srgb, var(--dv-bench-local) 12%, transparent); }
.rm-block-macro,   .rm-card-macro   { --rm-tier: var(--rm-purple); --rm-tier-text: var(--rm-purple); --rm-tier-pale: var(--rm-purple-pale); --rm-tier-band: color-mix(in srgb, var(--dv-bench-global) 12%, transparent); }
.rm-block-forward, .rm-card-forward { --rm-tier: #7c5cbb; --rm-tier-text: #5b3f93; --rm-tier-pale: rgba(124, 92, 187, 0.08); --rm-tier-band: rgba(124, 92, 187, 0.12); }
.rm-block-nation,  .rm-card-nation  { --rm-tier: var(--rm-nation); --rm-tier-text: var(--rm-nation-text); --rm-tier-pale: var(--rm-nation-pale); --rm-tier-band: rgba(125, 150, 171, 0.12); }

.rm-block-divider { border-left-width: 5px; }
.rm-block-area    { background: var(--rm-tier-band); border-left-color: var(--rm-tier); }
.rm-block-macro   { background: var(--rm-tier-band); border-left-color: var(--rm-tier); }
.rm-block-forward { background: var(--rm-tier-band); border-left-color: var(--rm-tier); }
.rm-block-nation  { background: var(--rm-tier-band); border-left-color: var(--rm-tier); }
.rm-block-divider .rm-block-label { color: var(--rm-tier-text); }
.rm-block-label {
  font-size: 0.9375rem;
  font-weight: 700;
  font-family: var(--sans);
  letter-spacing: 0.01em;
}
.rm-block-sub {
  font-size: 0.6875rem;
  color: var(--text-muted);
}

/* --- Card-level area/macro badge --- */
.rm-area-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 3px;
  background: var(--rm-micro-pale);
  color: var(--rm-micro);
  border: 1px solid var(--rm-micro-mid);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.rm-area-badge svg { display: block; }
.rm-area-badge-macro { background: var(--rm-purple-pale); color: var(--rm-purple); border-color: var(--rm-purple-mid); }
.rm-area-badge-nation { background: var(--rm-nation-pale); color: var(--rm-nation-text); border-color: var(--rm-nation-mid); }
.rm-area-badge-forward { background: rgba(124, 92, 187, 0.10); color: #5b3f93; border-color: rgba(124, 92, 187, 0.30); }

/* Tier coloring on the whole card: tinted header only (left accent bar removed) */
.rm-card-area .rm-card-head,
.rm-card-macro .rm-card-head,
.rm-card-nation .rm-card-head,
.rm-card-forward .rm-card-head {
  background: var(--rm-tier-pale);
  border-left: 0; /* card 側の左バーに一本化（二重線回避） */
}
.rm-card-area .rm-card-title,
.rm-card-macro .rm-card-title,
.rm-card-nation .rm-card-title,
.rm-card-forward .rm-card-title { color: var(--rm-tier-text); }

/* ============================================================
   Real Estate Market — Zoom-out scale ladder（案①）
   物件周辺 → 区/エリア → 都心 → 東京圏/全国 を縦のスケール軸として読ませる。
   ミクロ→マクロ色（--dv-bench-local / --dv-bench-global）を spine の軸に使う。
   ============================================================ */
.rm-banner {
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--rm-text-muted, #4b5563);
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
}
.rm-banner b { color: var(--text); font-weight: 700; }
.rm-banner-lead {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ui-accent);
  margin-right: 0.5rem;
}
.rm-banner-lead svg { display: block; }

.rm-ladder {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  /* 縦のスケール軸（ミクロ＝下層エリア → マクロ＝広域）を spine で表現 */
  padding-left: 1.75rem;
}
.rm-ladder::before {
  content: '';
  position: absolute;
  left: 0.6875rem;
  top: 0.75rem;
  bottom: 0.75rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--rm-micro) 0%, var(--rm-purple) 100%);
  opacity: 0.45;
}

/* 地理レンジのグループ見出し（例: 名古屋市内 / 全国）。配下のカードはデータの種類で小分け */
.rm-geo-group {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 -0.125rem -1.25rem;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--gray-900, #111827);
}
.rm-geo-group:first-child { margin-top: 0; }
.rm-geo-group::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--blue-600, #2563eb);
  box-shadow: 0 0 0 3px var(--white);
}

.rm-stop {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.rm-stop[open] { box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05); }
.rm-stop { --stop-color: var(--rm-micro); }
.rm-stop-micro { --stop-color: var(--rm-micro); }
.rm-stop-macro { --stop-color: var(--rm-purple); }

/* spine 上のスケール・マーカー（番号入りの円） */
.rm-stop-head::before {
  content: attr(data-step);
  position: absolute;
  left: -1.75rem;
  top: 0.9375rem;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--stop-color);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 3px var(--white);
}

.rm-stop-head {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  column-gap: 0.875rem;
  row-gap: 0.4375rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  list-style: none;
}
.rm-stop-head::-webkit-details-marker { display: none; }
.rm-stop-sub {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}
.rm-stop-scale {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.01em;
}
.rm-stop-where {
  font-size: 0.75rem;
  color: var(--rm-text-meta, #6b7280);
  font-weight: 500;
  min-width: 0;
}
.rm-stop-metric {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.rm-stop-metric small { font-size: 0.6875rem; font-weight: 500; color: var(--rm-text-meta, #6b7280); margin-left: 1px; }
.rm-stop-read {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  background: rgba(22, 163, 74, 0.10);
  color: #166534;
}
.rm-stop-read svg { display: block; }
.rm-stop-chev {
  display: inline-flex;
  color: var(--gray-400);
  transition: transform 0.2s ease;
}
.rm-stop[open] .rm-stop-chev { transform: rotate(180deg); }
.rm-stop-body {
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--gray-100);
  margin-top: -1px;
  padding-top: 1rem;
}
/* ladder 内のカードは枠を持たず素のブロックとして並ぶ（二重枠回避） */
.rm-stop-body .rm-card { border: 0; border-radius: 0; margin-bottom: 0; overflow: visible; }
.rm-stop-body .rm-card + .rm-card { margin-top: 1.25rem; }
.rm-stop-body .rm-card-head { background: transparent; padding: 0 0 0.5rem; border-bottom: 1px solid var(--gray-100); }
.rm-stop-body .rm-card-body { padding: 0.75rem 0 0; }
.rm-stop-body > .rm-grid-2 { margin-bottom: 0; }

@media (max-width: 760px) {
  .rm-stop-head { grid-template-columns: 1fr auto; }
  .rm-stop-where { grid-column: 1 / -1; order: 5; }
  .rm-stop-read { grid-column: 1 / -1; order: 6; justify-self: start; }
}

/* ============================================================
   Impact Checker (REAL IMPACTs Impact Checker)
   GOYOH ブランドカラー: navy #1c3849 / green #5f9035 / teal #0077a0
   ============================================================ */
.impact-checker-root {
  --ic-brand-navy: #1c3849;
  --ic-brand-green: #5f9035;
  --ic-brand-green-light: #a4b261;
  --ic-brand-button: #b8c144;
  --ic-brand-teal: #0077a0;
  --ic-brand-cream: #f2f2ec;
  --ic-brand-cream-2: #e9e9e5;
  --ic-brand-gradient: linear-gradient(90deg, #a4b261 0%, #5f9035 50%, #0077a0 100%);
  display: flex; flex-direction: column; gap: 20px;
}
/* サンプル（デモ）表示。実データと誤認させないための「サンプル感」。
   impactChecker._sample / kpi._sample が true のときに付与される。 */
.impact-checker-root.ic-is-sample { position: relative; }

/* 財務セクションのサンプル注記（financialSample=true のとき表示） */
.fin-sample-note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.fin-sample-text { font-size: 12px; color: var(--gray-500); }

/* 全面ウォーターマーク（斜めに「SAMPLE」をタイル状に繰り返す）。
   最前面・クリック透過。薄いのでグラフ・数値の可読性は保つ。
   アンケート（セクション全体）と KPI カード（カード単位）で共用。 */
.sample-watermark {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='190'%3E%3Ctext x='130' y='100' fill='%2364748b' fill-opacity='0.11' font-family='Inter, sans-serif' font-size='34' font-weight='700' letter-spacing='4' text-anchor='middle' transform='rotate(-28 130 95)'%3ESAMPLE%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
}
/* KPI カードは小さいのでタイルを縮小（1〜2回繰り返す程度に） */
.kpi-card .sample-watermark { background-size: 180px 130px; }

.ic-summary {
  background: linear-gradient(135deg, var(--ic-brand-cream) 0%, #ffffff 60%, rgba(95, 144, 53, 0.06) 100%);
  border: 1px solid var(--ic-brand-cream-2);
  border-radius: 12px;
  padding: 20px 24px;
  position: relative;
  overflow: hidden;
}
.ic-summary::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--ic-brand-gradient);
}
.ic-summary-head { margin-bottom: 16px; }
.ic-title-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ic-title { font-size: 18px; font-weight: 700; color: var(--ic-brand-navy); letter-spacing: 0.02em; }
/* アンケートがサンプル（デモ）値であることを示すバッジ。KPI の .kpi-sample-badge と同一の見た目 */
.ic-sample-badge {
  flex-shrink: 0;
  display: inline-block;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--amber-100, #fef3c7);
  color: var(--amber-700, #b45309);
  border: 1px solid var(--amber-200, #fde68a);
  text-transform: uppercase;
  cursor: help;
}
.ic-subtitle { margin: 6px 0 0; color: #475569; font-size: 13.5px; line-height: 1.55; }
.ic-stats { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 16px; align-items: stretch; }
@media (max-width: 768px) { .ic-stats { grid-template-columns: 1fr; } }
.ic-stat {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 6px;
}
.ic-stat-value { font-size: 22px; font-weight: 700; color: #0f172a; }
.ic-stat-label { font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; }
.ic-stat-wide { gap: 8px; }
.ic-seg-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ic-seg-pill {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #cbd5e1; background: #f8fafc; border-radius: 999px;
  padding: 4px 10px; font-size: 12px; color: #334155;
}
.ic-seg-dot { width: 8px; height: 8px; border-radius: 50%; }
.ic-seg-count { font-weight: 700; color: #0f172a; }
.ic-methodology { margin: 12px 0 0; font-size: 12px; color: #64748b; line-height: 1.55; }

/* Tabs */
.ic-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  background: #f1f5f9; border-radius: 10px; padding: 6px;
}
.ic-tab {
  --ic-cat-color: var(--ic-brand-green);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border: none; background: transparent;
  border-radius: 7px; cursor: pointer; font-size: 13px; color: #475569;
  font-family: inherit; transition: background 0.15s, color 0.15s;
}
.ic-tab:hover { background: #e2e8f0; color: #0f172a; }
.ic-tab.active {
  background: #fff; color: var(--ic-cat-color);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  font-weight: 600;
}
.ic-tab-icon { display: inline-flex; }
.ic-tab.active .ic-tab-icon { color: var(--ic-cat-color); }

/* Content area */
.ic-content {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 768px) { .ic-content { grid-template-columns: 1fr; } }

/* 関連項目（GRESB / WELL / SDGs） */
.ic-frameworks {
  grid-column: 1 / -1;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ic-fw-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ic-fw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 768px) { .ic-fw-grid { grid-template-columns: 1fr; } }
.ic-fw-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ic-fw-head {
  font-size: 0.75rem;
  font-weight: 700;
  color: #334155;
  letter-spacing: 0.02em;
}
.ic-fw-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ic-fw-pill {
  display: inline-block;
  font-size: 0.6875rem;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #cbd5e1;
  color: #475569;
}
.ic-fw-gresb { border-color: #15803d; color: #15803d; background: #f0fdf4; }
.ic-fw-well { border-color: #ca8a04; color: #92400e; background: #fefce8; }
.ic-fw-sdgs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ic-fw-sdg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  cursor: help;
}

.ic-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.ic-card-wide { grid-column: 1 / -1; }
.ic-card-nps { grid-column: 1 / -1; }

.ic-q-label { font-size: 13.5px; font-weight: 600; color: #0f172a; line-height: 1.45; }

.ic-positive-bar {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 10px; background: #f8fafc; border-radius: 6px; font-size: 12px;
}
.ic-positive-label { color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; font-size: 10.5px; }
.ic-positive-value { font-size: 18px; font-weight: 700; }
.ic-positive-meta { margin-left: auto; color: #94a3b8; font-size: 11px; }

.ic-chart-wrap { position: relative; height: 260px; }
.ic-chart-wrap-tall { height: 380px; }

/* Matrix */
.ic-matrix {
  grid-column: 1 / -1;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 16px 18px;
}
.ic-group-label { font-size: 14px; font-weight: 600; color: #0f172a; margin-bottom: 12px; }
.ic-legend { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 12px; font-size: 11.5px; color: #475569; }
.ic-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.ic-legend-dot { width: 10px; height: 10px; border-radius: 2px; }

.ic-matrix-rows { display: flex; flex-direction: column; gap: 8px; }
.ic-matrix-row {
  display: grid; grid-template-columns: 220px 1fr 56px; align-items: center; gap: 12px;
  font-size: 12.5px;
}
@media (max-width: 768px) {
  .ic-matrix-row { grid-template-columns: 1fr; gap: 4px; }
  .ic-matrix-row .ic-matrix-score { text-align: left; }
}
.ic-matrix-label { color: #334155; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; }
.ic-matrix-bar {
  display: flex; height: 22px; border-radius: 4px; overflow: hidden;
  background: #f1f5f9;
}
.ic-matrix-seg { display: inline-block; height: 100%; }
.ic-matrix-score { font-weight: 700; text-align: right; font-size: 13px; }
.ic-matrix-note { margin-top: 10px; font-size: 11px; color: #94a3b8; }

/* Three-part group (3択) */
.ic-three-group {
  grid-column: 1 / -1;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 16px 18px;
}
.ic-three-rows { display: flex; flex-direction: column; gap: 14px; }
.ic-three-row { display: grid; grid-template-columns: 220px 1fr; gap: 12px; align-items: center; }
@media (max-width: 768px) { .ic-three-row { grid-template-columns: 1fr; } }
.ic-three-label { font-size: 12.5px; color: #334155; }
.ic-three-bar {
  display: flex; height: 26px; border-radius: 4px; overflow: hidden;
  background: #f1f5f9;
}
.ic-three-seg {
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 600; min-width: 0;
}
.ic-three-legend {
  grid-column: 1 / -1; font-size: 11px; color: #64748b;
  margin-top: 2px;
}

/* NPS */
.ic-nps {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 20px 24px;
}
.ic-nps-summary {
  display: grid; grid-template-columns: 180px 1fr; gap: 24px;
  align-items: center; margin: 16px 0 24px;
}
@media (max-width: 768px) { .ic-nps-summary { grid-template-columns: 1fr; } }
.ic-nps-score {
  text-align: center; padding: 16px;
  background: #f8fafc; border-radius: 10px;
}
.ic-nps-score-value { font-size: 42px; font-weight: 700; line-height: 1; }
.ic-nps-score-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #64748b; margin-top: 6px; }
.ic-nps-breakdown { display: flex; flex-direction: column; gap: 10px; }
.ic-nps-cat {
  display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 10px;
  font-size: 13px; color: #334155;
}
.ic-nps-cat strong { font-weight: 600; }
.ic-nps-cat span:last-child { font-weight: 700; color: #0f172a; }
.ic-nps-dot { width: 10px; height: 10px; border-radius: 50%; }

.ic-nps-bar {
  display: flex; align-items: flex-end; gap: 4px;
  height: 120px; padding: 8px 0;
  border-bottom: 1px solid #e2e8f0;
}
.ic-nps-col {
  flex: 1; border-radius: 3px 3px 0 0; position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  min-height: 8px;
}
.ic-nps-col-label {
  position: absolute; bottom: -18px; font-size: 10px; color: #64748b;
}
.ic-nps-axis {
  display: flex; justify-content: space-between;
  margin-top: 22px; font-size: 11px; color: #64748b;
}

/* Free text */
.ic-freetext {
  grid-column: 1 / -1;
  background: var(--ic-brand-cream); border: 1px solid var(--ic-brand-cream-2); border-radius: 10px;
  padding: 14px 18px;
}
.ic-freetext-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  color: var(--ic-brand-navy);
}
.ic-freetext-icon { display: inline-flex; color: var(--ic-brand-green); }
.ic-freetext-list { display: flex; flex-direction: column; gap: 8px; }
.ic-quote {
  margin: 0; padding: 8px 12px; background: #fff;
  border-left: 3px solid var(--ic-brand-green); border-radius: 4px;
  font-size: 13px; color: #334155; line-height: 1.5;
  font-style: italic;
}
.ic-empty { color: #94a3b8; font-size: 12px; margin: 0; }

/* --- Dashboard Guide (Logic Tree) --- */
.dg-guide { display: flex; flex-direction: column; gap: 16px; }
.dg-steps {
  display: flex; align-items: stretch; gap: 0; padding-top: 18px;
}
.dg-step {
  display: flex; align-items: stretch; flex: 1; min-width: 0;
}
.dg-step-card {
  position: relative;
  flex: 1; min-width: 0;
  background: #fff; border: 1px solid var(--gray-200); border-radius: 12px;
  padding: 26px 16px 16px;
  display: flex; flex-direction: column; gap: 12px;
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.dg-step-card::before {
  /* Top color band, subtle step identity */
  content: ''; position: absolute; top: 0; left: 16px; right: 16px; height: 3px;
  background: var(--dg-color, var(--gray-300));
  border-radius: 0 0 3px 3px; opacity: .85;
}
.dg-step-card:hover {
  border-color: var(--dg-color, var(--gray-300));
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
.dg-step-num-wrap {
  position: absolute; top: -18px; left: 14px;
  background: #fff; padding: 0 2px;
}
.dg-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  font-size: 16px; font-weight: 800; color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  font-family: 'Inter', sans-serif;
}
.dg-step-head {
  display: flex; align-items: center; gap: 8px;
  padding-left: 2px;
}
.dg-step-icon { display: inline-flex; flex-shrink: 0; }
.dg-step-title { font-size: 13px; font-weight: 700; color: var(--gray-800); line-height: 1.3; }
.dg-tree {
  position: relative;
  display: flex; flex-direction: column;
  padding-left: 14px;
  margin-left: 4px;
}
.dg-tree::before {
  /* Vertical trunk line */
  content: ''; position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--dg-color, var(--gray-300));
  opacity: .35;
}
.dg-tree::after {
  /* Cap the trunk at the last leaf level */
  content: ''; position: absolute;
  left: 0; bottom: 0;
  width: 2px; background: #fff;
  height: calc(50% - 1px);
}
.dg-leaf {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--gray-700); text-decoration: none;
  padding: 5px 6px 5px 12px; border-radius: 6px;
  transition: background .15s, color .15s;
  cursor: pointer;
  min-height: 26px;
}
.dg-leaf-branch {
  /* Horizontal branch line from trunk into leaf */
  position: absolute;
  left: -14px; top: 50%;
  width: 14px; height: 2px;
  background: var(--dg-color, var(--gray-300));
  opacity: .35;
}
.dg-leaf-text { line-height: 1.3; }
.dg-leaf:hover {
  background: var(--gray-100); color: var(--gray-900);
}
.dg-leaf:hover .dg-leaf-branch { opacity: .8; }
.dg-arrow {
  display: flex; align-items: center; justify-content: center;
  padding: 0 6px; color: var(--gray-300); flex-shrink: 0;
}

/* Responsive: stack on narrow screens */
@media (max-width: 640px) {
  .dg-steps { flex-direction: column; gap: 18px; padding-top: 20px; }
  .dg-arrow { display: none; }
  .dg-step { flex-direction: column; }
}

/* ===== Xymax 形式アンケート（平均得点 + 自由回答）===== */
.xs-block-label {
  font-size: 13px; font-weight: 700; color: var(--ic-brand-navy, #1c3849);
  letter-spacing: .02em; margin-bottom: 12px;
  padding-left: 10px; border-left: 3px solid var(--ic-brand-green, #5f9035);
}

/* 1. サマリーヘッダ + 総合得点 */
.xs-summary {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, var(--ic-brand-cream, #f2f2ec) 0%, #fff 60%, rgba(95,144,53,.06) 100%);
  border: 1px solid var(--ic-brand-cream-2, #e9e9e5);
  border-radius: 12px; padding: 20px 24px; position: relative; overflow: hidden;
}
.xs-summary::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--ic-brand-gradient, linear-gradient(90deg,#a4b261,#5f9035 50%,#0077a0));
}
.xs-summary-main { flex: 1 1 320px; min-width: 0; }
.xs-source { font-size: 11.5px; color: #64748b; margin: 6px 0 0; }
.xs-score-card {
  flex: 0 0 auto; text-align: center; min-width: 150px;
  background: #fff; border: 1px solid var(--ic-brand-cream-2, #e9e9e5);
  border-radius: 12px; padding: 12px 22px; box-shadow: 0 1px 3px rgba(0,0,0,.05);
  border-top: 3px solid var(--xs-c, #5f9035);
}
.xs-score-label { font-size: 11px; font-weight: 600; color: #64748b; }
.xs-score-value { font-size: 40px; font-weight: 800; line-height: 1.1; color: var(--xs-c, #2e9e51); }
.xs-score-max { font-size: 16px; font-weight: 600; color: #94a3b8; }
.xs-score-meta { font-size: 12px; color: #475569; }

/* 2. 総合得点の位置づけ */
.xs-pos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.xs-pos-card { background: #fff; border: 1px solid #e9e9e5; border-radius: 10px; padding: 14px 16px; }
.xs-pos-name { font-size: 12.5px; font-weight: 700; color: #1c3849; margin-bottom: 8px; }
.xs-pos-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.xs-pos-sub { font-size: 11px; color: #64748b; }
.xs-pos-score { font-size: 26px; font-weight: 800; }
.xs-pos-note { font-size: 10.5px; color: #94a3b8; margin-top: 8px; line-height: 1.5; }

/* 3. カテゴリ別平均得点（レーダー + チップ） */
.xs-cat-grid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(200px, 1fr); gap: 20px; align-items: center; }
.xs-radar-wrap { position: relative; height: 280px; }
.xs-cat-chips { display: flex; flex-direction: column; gap: 8px; }
.xs-cat-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 14px; border-radius: 8px; background: #fff;
  border: 1px solid #e9e9e5; border-left: 4px solid var(--c, #2563eb);
}
.xs-cat-chip-name { font-size: 12.5px; font-weight: 600; color: #334155; }
.xs-cat-chip-score { font-size: 20px; font-weight: 800; }

/* 4. 項目別の得点（横棒） */
.xs-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; }
.xs-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: #475569; }
.xs-legend-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.xs-item-chart-wrap { position: relative; height: 540px; }
.xs-series-legend { display: flex; flex-wrap: wrap; gap: 18px; margin: -2px 0 12px; }
.xs-series-item { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: #475569; }
.xs-series-bar { width: 16px; height: 11px; border-radius: 2px; background: linear-gradient(90deg, rgba(0,119,160,.55), rgba(95,144,53,.55), rgba(184,193,68,.55)); display: inline-block; }
.xs-series-line { width: 18px; height: 0; border-top: 2px dashed #64748b; display: inline-block; position: relative; }

/* 位置づけヒストグラム */
.xs-hist-wrap { position: relative; height: 112px; margin-top: 12px; }
.xs-pos-source { font-size: 10.5px; color: #94a3b8; margin: 12px 0 0; line-height: 1.5; }

/* 参考値バナー（捏造ではなく図表からの読み取りであることを明示） */
.xs-ref-banner {
  display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap;
  background: #fff8ec; border: 1px solid #f5e2bf; border-radius: 8px;
  padding: 9px 13px; font-size: 11.5px; color: #7a5b1e; line-height: 1.55; margin: 0;
}
.xs-ref-badge {
  flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: .03em;
  background: #e6a23c; color: #fff; border-radius: 4px; padding: 2px 7px;
}
.xs-ref-note { font-size: 10.5px; color: #b08534; margin: 8px 0 0; }

/* 5. 回答テナント概要（表） */
.xs-roster-scroll { overflow-x: auto; border: 1px solid #e9e9e5; border-radius: 10px; }
.xs-roster { width: 100%; border-collapse: collapse; font-size: 12px; background: #fff; }
.xs-roster th, .xs-roster td { padding: 9px 12px; text-align: left; border-bottom: 1px solid #f1f1ee; white-space: nowrap; }
.xs-roster thead th { background: var(--ic-brand-cream, #f2f2ec); color: #1c3849; font-weight: 700; font-size: 11.5px; position: sticky; top: 0; }
.xs-roster tbody tr:last-child td { border-bottom: none; }
.xs-roster tbody tr:hover { background: #fafaf7; }
.xs-roster .xs-num { text-align: right; }
.xs-r-company { font-weight: 600; color: #1c3849; white-space: normal; min-width: 150px; }
.xs-r-ind, .xs-r-since { color: #64748b; }
.xs-sat {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 12.5px;
}

/* 6. 自由回答 */
.xs-comments-list { display: flex; flex-direction: column; gap: 14px; }
.xs-cgroup { border-left: 3px solid var(--c, #64748b); padding-left: 14px; }
.xs-cgroup-head {
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
  color: var(--c, #1c3849); margin-bottom: 10px; cursor: pointer; list-style: none;
  padding: 6px 0;
  position: sticky; top: calc(var(--header-h, 56px) + var(--pill-h, 37px)); z-index: 5;
  background: #fff;
}
.xs-cgroup-head::-webkit-details-marker { display: none; }
.xs-cgroup-head::before {
  content: '▾'; color: var(--c, #64748b); font-size: 11px; transition: transform .15s;
}
.xs-cgroup:not([open]) .xs-cgroup-head::before { transform: rotate(-90deg); }
.xs-cgroup:not([open]) .xs-cgroup-head { margin-bottom: 0; }
.xs-cgroup-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px;
  padding: 0 6px; border-radius: 9px; background: var(--c, #64748b); color: #fff; font-size: 11px; font-weight: 700;
}
.xs-comment {
  margin: 0 0 8px; background: #fff; border: 1px solid #ecece8; border-radius: 8px;
  padding: 10px 14px;
}
.xs-comment-text { font-size: 12.5px; color: #334155; line-height: 1.6; }
.xs-comment-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; align-items: center; }
.xs-comment-topic {
  font-size: 10.5px; font-weight: 600; color: #475569;
  background: #f1f1ee; border-radius: 4px; padding: 1px 7px;
}
.xs-comment-company { font-size: 10.5px; color: #94a3b8; }

/* 7. 設問一覧 */
.xs-questions {
  background: #fff; border: 1px solid #e9e9e5; border-radius: 10px; padding: 4px 16px;
}
.xs-questions-summary {
  cursor: pointer; font-size: 12.5px; font-weight: 700; color: #1c3849;
  padding: 10px 0; display: flex; align-items: center; gap: 10px; list-style: none;
}
.xs-questions-summary::-webkit-details-marker { display: none; }
.xs-questions-summary::before { content: '▸'; color: #94a3b8; transition: transform .15s; }
.xs-questions[open] .xs-questions-summary::before { transform: rotate(90deg); }
.xs-q-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px;
  padding: 0 6px; border-radius: 9px; background: #e9e9e5; color: #475569; font-size: 11px; font-weight: 700;
}
.xs-q-list { padding: 4px 0 12px; }
.xs-q-row { display: grid; grid-template-columns: 28px 92px 1fr; gap: 10px; padding: 6px 0; border-top: 1px solid #f4f4f1; font-size: 11.5px; align-items: start; }
.xs-q-no { color: #94a3b8; font-weight: 700; text-align: right; }
.xs-q-cat { color: #5f9035; font-weight: 600; }
.xs-q-text { color: #475569; line-height: 1.5; }

@media (max-width: 720px) {
  .xs-cat-grid { grid-template-columns: 1fr; }
  .xs-radar-wrap { height: 260px; }
  .xs-summary { flex-direction: column; align-items: stretch; }
  .xs-score-card { align-self: center; }
  .xs-q-row { grid-template-columns: 24px 1fr; }
  .xs-q-cat { display: none; }
}

/* ============================================================
   Impact Logic Model (インパクト・ロジックモデル)  il-*
   配色はダッシュボード共通パレットに統一:
   提言KPI＝本物件ティール（--dv-property）／評価＝共通の赤・緑／
   情報源＝系列ネイビー・系列マゼンタ・本物件ティール／文字・枠線＝ --gray-* トークン
   ============================================================ */
.il-wrap { display: flex; flex-direction: column; gap: 16px; }

/* 概要パネル（読み方: ベン図＋ゾーン凡例 → チェーン一覧ナビ → 折りたたみ注記） */
.il-overview {
  background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px;
}
.il-overview-top { display: flex; gap: 22px; align-items: center; margin: 4px 0 12px; }
.il-venn { width: 100%; height: auto; display: block; }
.il-venn-label { font-size: 13px; font-weight: 700; font-family: var(--sans); }
.il-overview-legend { flex: 1; min-width: 0; }
.il-method-intro { font-size: 13px; color: var(--gray-700); line-height: 1.75; margin: 0 0 10px; }
.il-zone-defs { display: flex; flex-direction: column; gap: 6px; }
.il-zone-def { display: flex; align-items: baseline; gap: 10px; }
.il-zone-chip {
  display: inline-flex; align-items: center; flex: none;
  font-size: 11px; font-weight: 700; padding: 2px 10px;
  border-radius: 999px; border: 1px solid; white-space: nowrap;
}
.il-zone-desc { font-size: 12px; color: var(--gray-600); line-height: 1.55; }

/* 折りたたみ注記（方法論の前提・注意書き） */
.il-method-more { margin-top: 12px; border-top: 1px dashed var(--gray-200); padding-top: 9px; }
.il-method-more summary {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; list-style: none;
  font-size: 11.5px; font-weight: 600; color: var(--gray-500); user-select: none;
}
.il-method-more summary::-webkit-details-marker { display: none; }
.il-method-more summary i { transition: transform .15s; }
.il-method-more[open] summary i:last-child { transform: rotate(180deg); }
.il-method-notes { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.il-method-note { display: flex; gap: 6px; font-size: 12px; color: var(--gray-500); line-height: 1.55; align-items: flex-start; }
.il-method-note i { flex: none; margin-top: 3px; }

/* チェーンカード */
.il-chain {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  border-left: 4px solid var(--il-zone-color, #6b7280);
  padding: 16px 18px;
}
/* チェーンヘッダ＝開閉トグル（既定折りたたみ。ヘッダに結論＝提言KPIサマリを常時表示） */
.il-chain-head {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.il-chain.is-open .il-chain-head {
  position: sticky; top: calc(var(--header-h, 56px) + var(--pill-h, 37px)); z-index: 6;
  background: #fff;
  padding: 10px 0; margin: -10px 0 4px;
}
.il-chain.is-open.is-tinted .il-chain-head {
  background: color-mix(in srgb, var(--il-zone-color, #fff) 4%, #fff);
}
.il-chain-num {
  flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--il-zone-color, #6b7280);
  color: #fff; font-size: 12px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
}
.il-chain-head-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.il-chain-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ヘッダ右の提言KPIサマリ（このチェーンの結論。折りたたみ時も見える＝Cの強調） */
.il-chain-head-kpi {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px; border-radius: 9px; background: #f0f7fa; border: 1px solid rgba(0, 119, 160, 0.28);
  margin-left: 4px;
}
.il-chain-head-kpi-tag {
  font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--dv-property-deep); white-space: nowrap;
}
.il-chain-head-kpi-label { font-size: 11px; color: var(--gray-600); }
.il-chain-head-kpi-val { font-size: 14px; font-weight: 800; color: var(--gray-500); white-space: nowrap; }
.il-chain-head-kpi-val b { color: var(--dv-property-deep); }

/* 開閉キャレット + ボディ折りたたみ */
.il-chain-caret { flex: 0 0 auto; color: var(--gray-400); margin-top: 2px; transition: transform .18s ease; display: inline-flex; }
.il-chain.is-open .il-chain-caret { transform: rotate(180deg); }
.il-chain-body { display: none; }
.il-chain.is-open .il-chain-body { display: block; }
.il-priority {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; padding: 0 7px; border-radius: 6px;
  background: var(--dv-brand-navy); color: #fff; font-size: 12px; font-weight: 800;
}
.il-chain-title { font-size: 15.5px; font-weight: 700; color: var(--gray-900); }
.il-chain-tagline { font-size: 12px; color: var(--gray-500); }

/* ① 課題・根拠 */
.il-ev { background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; }
.il-step-tag { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; color: var(--gray-500); letter-spacing: .04em; margin-bottom: 6px; }
.il-step-num {
  flex: 0 0 16px; height: 16px; border-radius: 50%; background: var(--gray-200); color: var(--gray-700);
  font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}
.il-flow-kpi .il-step-num { background: var(--dv-property); color: #fff; }
.il-ev-body { display: flex; gap: 18px; align-items: flex-start; }
.il-ev-rows { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
/* チェーン内ミニベン図（このチェーンが3円のどこに当てはまるか）— 各項目の左に配置 */
.il-chain-venn { flex: 0 0 138px; order: -1; }
.il-venn-mini-label { font-size: 25px; font-weight: 700; font-family: var(--sans); }
.il-venn-mini-num { fill: #fff; font-size: 22px; font-weight: 800; pointer-events: none; }

/* 根拠カード: 情報源ごとに1枚。主役＝色付き左ボーダー、参考＝色なし枠＋チップのみ */
.il-ev-card {
  background: #fff; border: 0.5px solid var(--gray-200); border-left: 3px solid var(--ev-color, var(--gray-300));
  border-radius: 8px; padding: 9px 12px; font-size: 12.5px; line-height: 1.55;
}
.il-ev-card-context { border-left: 0.5px solid var(--gray-200); background: var(--gray-50); }
.il-ev-card-top { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.il-ev-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
}
.il-ev-chip i { flex: none; }
.il-ev-ref-tag {
  font-size: 10px; font-weight: 700; color: var(--gray-500);
  background: var(--gray-100); border: 0.5px solid var(--gray-200);
  padding: 1px 7px; border-radius: 999px;
}
.il-ev-text { color: var(--gray-700); min-width: 0; }
/* テナント根拠カード内に織り込む「ESG要件・要望」ブロック（アンケート文の下に区切って表示） */
.il-ev-reqwrap { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--gray-200); }
.il-ev-reqwrap-flush { margin-top: 0; padding-top: 0; border-top: none; }
.il-ev-reqhead {
  display: flex; align-items: flex-start; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--gray-600);
}
.il-ev-reqhead i { flex: none; margin-top: 2px; color: var(--ev-color, var(--gray-400)); }
.il-ev-reqs { display: flex; flex-direction: column; gap: 4px; margin-top: 5px; }
.il-ev-req {
  display: flex; align-items: flex-start; gap: 5px;
  padding: 4px 8px; border-radius: 6px;
  background: var(--gray-50); background: color-mix(in srgb, var(--ev-color, #888) 7%, transparent);
  border-left: 2px solid var(--ev-color, var(--gray-300));
  font-size: 11.5px; line-height: 1.45; color: var(--gray-600);
}
.il-ev-req i { flex: none; margin-top: 2px; color: var(--ev-color, var(--gray-400)); opacity: .8; }
.il-ev-source-cap {
  display: flex; align-items: center; gap: 4px; margin-top: 5px;
  font-size: 11px; color: var(--gray-500);
}
.il-ev-source-cap i { flex: none; }

/* クリックで該当部分（ESGポジショニングの該当カテゴリ等）へ飛べる根拠カード */
.il-ev-card-link { cursor: pointer; transition: box-shadow .12s ease, border-color .12s ease; }
.il-ev-card-link:hover { box-shadow: 0 1px 4px rgba(0,0,0,.07); border-color: var(--gray-300); }
.il-ev-card-link:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
.il-ev-jump {
  display: inline-flex; align-items: center; gap: 3px; margin-left: auto;
  font-size: 10.5px; font-weight: 700; color: var(--ui-accent);
  white-space: nowrap; vertical-align: middle;
}
.il-ev-jump i { flex: none; }

/* ジャンプ先のハイライト演出（根拠行クリック時） */
.il-jump-flash { animation: ilJumpFlash 1.6s ease; }
@keyframes ilJumpFlash {
  0%, 55% { box-shadow: 0 0 0 3px var(--ui-accent); background: rgba(0, 119, 160, 0.08); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); background: transparent; }
}

/* ②〜⑤ 因果の鎖 */
.il-flow { display: grid; grid-template-columns: 1fr 20px 1fr 20px 1.2fr 20px 1fr; gap: 6px; align-items: stretch; }
.il-flow-step { background: #fff; border: 1px solid var(--gray-200); border-radius: 10px; padding: 10px 12px; }
.il-flow-step .il-step-tag { margin-bottom: 4px; }
.il-flow-text { font-size: 12.5px; color: var(--gray-700); line-height: 1.55; }
.il-flow-arrow { display: flex; align-items: center; justify-content: center; color: var(--ui-accent); }
.il-flow-kpi { border: 1.5px solid rgba(0, 119, 160, 0.4); background: #f0f7fa; }
.il-flow-kpi .il-step-tag { color: var(--dv-property-deep); }
.il-flow-kpi-target { margin-top: 6px; font-size: 14px; font-weight: 800; color: var(--dv-property-deep); }
.il-flow-kpi-note { margin-top: 2px; font-size: 11px; color: #4a7d94; }

/* 優先領域マップ（ベン図ドット + チェーン一覧ナビ。クリックで該当カードへ） */
.il-map-venn { flex: 0 0 28%; }
.il-venn-dot { cursor: pointer; }
.il-venn-dot text { fill: #fff; font-size: 9.5px; font-weight: 800; pointer-events: none; }
.il-venn-dot:hover circle { stroke-width: 2.5; }
.il-map-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.il-map-title { font-size: 12.5px; font-weight: 700; color: var(--gray-700); }
.il-map-hint { display: block; text-align: center; font-size: 11px; color: var(--gray-500); margin-top: 8px; }
.il-map-rows { display: flex; flex-direction: column; gap: 5px; }
.il-map-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--gray-50); border: 1px solid var(--gray-100); border-left: 3px solid var(--il-zone-color, #6b7280);
  border-radius: 8px; padding: 7px 10px; cursor: pointer; font: inherit; color: var(--gray-400);
  transition: background .15s, border-color .15s;
}
.il-map-row:hover { background: var(--gray-100); border-color: var(--gray-300); border-left-color: var(--il-zone-color, #6b7280); }
.il-map-num {
  flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--il-zone-color, #6b7280);
  color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}
.il-map-row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.il-map-row-title { font-size: 13px; font-weight: 700; color: var(--gray-800); }
.il-map-row-chips { display: inline-flex; gap: 6px; align-items: center; }
.il-map-kpi { font-size: 12px; color: var(--gray-600); white-space: nowrap; }
.il-map-kpi b { color: var(--dv-property-deep); font-weight: 800; }
.il-chain-flash { animation: ilChainFlash 1.6s ease; }
@keyframes ilChainFlash {
  0%, 55% { box-shadow: 0 0 0 3px var(--il-zone-color, #6b7280); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

/* 根拠スコアのミニゲージ（現状 vs 基準） */
.il-gauge { margin-top: 5px; max-width: 340px; }
.il-gauge-bar { position: relative; height: 6px; border-radius: 999px; background: var(--gray-200); }
.il-gauge-fill { height: 100%; border-radius: 999px; }
.il-gauge-tick { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--gray-700); border-radius: 1px; transform: translateX(-1px); }
.il-gauge-labels { display: flex; align-items: baseline; gap: 12px; margin-top: 3px; font-size: 11px; color: var(--gray-600); }
.il-gauge-labels b { font-weight: 800; }
.il-gauge-max { color: var(--gray-400); }

/* 提言KPIゲージ（現状→目標の引き上げ幅。本物件ティールで統一） */
.il-kpi-gauge { margin-top: 7px; }
.il-kpi-gauge-bar { position: relative; height: 8px; border-radius: 999px; background: #d9e9f1; }
.il-kpi-gauge-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 999px 0 0 999px; background: var(--dv-property); }
.il-kpi-gauge-lift { position: absolute; top: 0; height: 100%; background: repeating-linear-gradient(45deg, #82b8d0, #82b8d0 3px, #b9dbea 3px, #b9dbea 6px); }
.il-kpi-gauge-tick { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--dv-property-deep); transform: translateX(-1px); }
.il-kpi-gauge-scale { display: flex; justify-content: space-between; font-size: 10px; color: #6ea3bb; margin-top: 2px; }

/* 提言KPIの「採用」ボタン（④ アウトカム枠内） */
.il-adopt-btn {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  padding: 7px 12px; border-radius: 8px; cursor: pointer;
  font-size: 12px; font-weight: 700; font-family: var(--sans);
  color: #fff; background: var(--dv-property-deep); border: 1px solid var(--dv-property-deep);
  transition: filter .12s ease, background .12s ease;
}
.il-adopt-btn:hover { filter: brightness(1.08); }
.il-adopt-btn i { flex: none; }
.il-adopt-btn.is-adopted { background: #5f9035; border-color: #5f9035; }

/* 提言KPI（採用）カード（KPIパフォーマンス → 運営KPIタブに追加される） */
.kpi-card-proposed { position: relative; background: linear-gradient(180deg, #f4fafc 0%, #fff 60%); }
.kpi-proposed-badge {
  display: inline-flex; align-items: center; gap: 5px; margin-bottom: 8px;
  padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
  color: var(--dv-property-deep); background: rgba(0, 119, 160, 0.1); border: 1px solid rgba(0, 119, 160, 0.3);
}
.kpi-proposed-badge i { flex: none; }
.kpi-proposed-target { margin: 6px 0 4px; font-size: 17px; font-weight: 800; color: var(--dv-property-deep); }
.kpi-proposed-target b { color: #5f9035; }
.kpi-proposed-note { margin-top: 6px; font-size: 11.5px; color: var(--gray-500); }
.kpi-proposed-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.kpi-proposed-link, .kpi-proposed-remove {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  padding: 5px 10px; border-radius: 7px; font-size: 11px; font-weight: 700; font-family: var(--sans);
  background: #fff; transition: background .12s ease;
}
.kpi-proposed-link { color: var(--dv-property-deep); border: 1px solid rgba(0, 119, 160, 0.35); }
.kpi-proposed-link:hover { background: rgba(0, 119, 160, 0.07); }
.kpi-proposed-remove { color: var(--gray-500); border: 1px solid var(--gray-300); }
.kpi-proposed-remove:hover { background: var(--gray-50); color: var(--red-700); }
.kpi-proposed-link i, .kpi-proposed-remove i { flex: none; }

/* 候補KPIカード（_candidate: true）: 採用決定前の検討用エントリ。
   数値・チャートを持たないため、破線ボーダー + グレーのバッジで
   「データ収集中」（プレースホルダ）とも「提言KPI・採用」とも区別する */
.kpi-card.kpi-card-candidate {
  border-style: dashed;
  border-left-style: solid;
  background: linear-gradient(180deg, #fafaf8 0%, #fff 55%);
}
.kpi-candidate-badge {
  display: inline-flex; align-items: center; gap: 5px; margin-bottom: 8px;
  padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
  color: var(--gray-600, #4b5563); background: var(--gray-100, #f3f4f6);
  border: 1px dashed var(--gray-400, #9ca3af);
  cursor: help;
}
.kpi-candidate-badge i { flex: none; }

/* 採用チェック済みの候補: 破線→実線 + 緑トーン（il-adopt-btn.is-adopted と同じ緑） */
.kpi-card.kpi-card-candidate.is-adopted {
  border-style: solid;
  border-color: #a9cf8f;
  background: linear-gradient(180deg, #f4faf0 0%, #fff 55%);
}
.kpi-candidate-badge.is-adopted {
  color: #3f6f28; background: #eef6e9;
  border-style: solid; border-color: #a9cf8f;
}
.kpi-candidate-actions { margin-top: 10px; }
.kpi-candidate-adopt-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 8px; cursor: pointer;
  font-size: 12px; font-weight: 700; font-family: var(--sans);
  color: var(--gray-600, #4b5563); background: #fff; border: 1px solid var(--gray-300, #d1d5db);
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.kpi-candidate-adopt-btn:hover { background: var(--gray-50, #f9fafb); }
.kpi-candidate-adopt-btn.is-adopted { color: #fff; background: #5f9035; border-color: #5f9035; }
.kpi-candidate-adopt-btn.is-adopted:hover { filter: brightness(1.08); }
.kpi-candidate-adopt-btn i { flex: none; }

/* ② 施策の実装ソリューション候補（chains[].solutions[]、GOYOH Solutions DB 由来） */
.il-sol {
  margin-top: 10px; padding: 10px 12px; background: #fcfdfe; border-radius: 10px;
  border: 1px dashed var(--gray-300); border-left: 3px solid var(--il-zone-color, #6b7280);
}
.il-sol-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--gray-800);
  width: 100%; font-family: var(--sans); text-align: left;
  background: none; border: none; padding: 0; cursor: pointer;
}
.il-sol-caret { color: var(--gray-400); transition: transform .18s ease; display: inline-flex; flex: none; margin-left: 6px; }
.il-sol-caret i { flex: none; }
.il-sol-collapsed .il-sol-caret { transform: rotate(-90deg); }
.il-sol-collapsed .il-sol-cards { display: none; }
.il-sol-head .il-sol-src { font-weight: 500; color: var(--gray-500); font-size: 11px; margin-left: auto; text-align: right; }
.il-sol-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 6px; border-radius: 999px; background: var(--il-zone-color, #6b7280); color: #fff;
  font-size: 10.5px; font-weight: 800;
}
/* 横長1列レイアウト: 1施策＝全幅1枚。情報を「概要→効果→特徴/選定→導入の流れ→対象実績」の順で整理 */
.il-sol-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.il-sol-card {
  background: #fff; border: 1px solid var(--gray-200); border-radius: 10px; padding: 12px 14px;
  border-left: 3px solid var(--sol-accent, var(--gray-300));
}
/* 施策タイプで色を連動（設備系＝ティール / 運用系＝ミント）。意味のある最小限の色 */
.il-sol-card-hard { --sol-accent: #0b7d80; --sol-tint-bg: #eef7f8; --sol-tint-border: #cfe9ec; --sol-tint-text: #0a5560; }
.il-sol-card-soft { --sol-accent: #34735a; --sol-tint-bg: #eef6f1; --sol-tint-border: #cfe6da; --sol-tint-text: #2b5e49; }
/* ヘッダー: サムネイル（140×96・3:2）+ 施策名/提供元 + 種別チップ を横一列に */
.il-sol-header { display: flex; align-items: flex-start; gap: 12px; }
.il-sol-thumb {
  width: 140px; height: 96px; flex: none; border-radius: 8px; overflow: hidden;
  background: var(--sol-tint-bg, var(--gray-100)); border: 0.5px solid var(--sol-tint-border, var(--gray-200));
  display: flex; align-items: center; justify-content: center;
}
.il-sol-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.il-sol-thumb-contain img { object-fit: contain; padding: 10px; box-sizing: border-box; }
.il-sol-thumb-ph { color: var(--sol-accent, var(--gray-400)); }
.il-sol-headmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.il-sol-name { font-size: 14px; font-weight: 700; color: var(--gray-900); line-height: 1.35; }
.il-sol-provider { font-size: 11.5px; color: var(--gray-500); }
.il-sol-chips { display: flex; flex-wrap: wrap; gap: 4px; flex: none; }
.il-sol-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
/* Soft/Hard は施策タイプ共通色（ミント / ティール）の系統で表現 */
.il-sol-chip-soft { background: #ecf6f1; color: #34735a; border-color: #b7dcc9; }
.il-sol-chip-hard { background: #e7f8f8; color: #0b7d80; border-color: #a3e3e5; }
.il-sol-chip-time { background: var(--gray-50); color: var(--gray-600); border-color: var(--gray-200); }
/* オーナーCapEx計画由来の施策（GOYOH Solutions DB 候補と区別） */
.il-sol-chip-owner { background: var(--navy); color: #fff; border-color: var(--navy); }
.il-sol-cost { display: flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 11px; font-weight: 600; color: var(--dv-attention); }
.il-sol-desc { margin-top: 10px; font-size: 12px; color: var(--gray-600); line-height: 1.6; }

.il-sol-detail-tag { display: flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; color: var(--gray-500); letter-spacing: 0.04em; margin: 0 0 7px; }
.il-sol-detail-tag i { flex: none; }
.il-sol-detail-tag-hero { color: var(--sol-accent, var(--dv-property-deep)); }

/* 期待される効果（主役）: ラベル太字 + 補足を小カードで 2 列。タイプ連動の淡色で強調 */
.il-sol-effects-block { margin-top: 12px; }
.il-sol-effects { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.il-sol-effect { background: var(--sol-tint-bg, var(--gray-50)); border: 0.5px solid var(--sol-tint-border, transparent); border-radius: 8px; padding: 8px 10px; }
.il-sol-effect-label { display: block; font-size: 12px; font-weight: 700; color: var(--sol-tint-text, var(--gray-800)); line-height: 1.4; }
.il-sol-effect-val { display: block; margin-top: 2px; font-size: 11px; color: var(--gray-600); line-height: 1.45; }

/* 特徴・選定ポイントの 2 列ブロック */
.il-sol-featsel { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
.il-sol-features { display: flex; flex-wrap: wrap; gap: 4px; }
.il-sol-feature {
  display: inline-flex; align-items: center; font-size: 10.5px; line-height: 1.4;
  padding: 2px 8px; border-radius: 999px;
  background: var(--gray-50); color: var(--gray-700); border: 1px solid var(--gray-200);
}
.il-sol-selpts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.il-sol-selpt { display: flex; align-items: flex-start; gap: 5px; font-size: 11px; color: var(--gray-600); line-height: 1.5; }
.il-sol-selpt i { flex: none; margin-top: 2px; color: var(--dv-positive); }

/* 導入の流れ: 横並びの帯（番号付きステップ + 所要期間） */
.il-sol-steps-block { margin-top: 12px; }
.il-sol-steps { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px; }
.il-sol-step { display: flex; flex-direction: column; gap: 1px; }
.il-sol-step-label { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--gray-700); line-height: 1.4; }
.il-sol-step-num {
  flex: 0 0 16px; height: 16px; border-radius: 50%; background: #e3eff5; color: var(--dv-property-deep);
  font-size: 9.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}
.il-sol-step-dur { margin-left: 21px; font-size: 10px; color: var(--gray-500); white-space: nowrap; }
.il-sol-step-sep { color: var(--gray-300); display: inline-flex; align-self: center; margin-top: 7px; }
.il-sol-step-sep i { flex: none; }

/* フッター: 対象 / 実利用者 / 実績 + 製品リンク */
.il-sol-foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--gray-100);
}
.il-sol-spec { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--gray-500); }
.il-sol-spec i { flex: none; }
.il-sol-link {
  display: inline-flex; align-items: center; gap: 4px; margin-left: auto;
  font-size: 11px; font-weight: 600; color: var(--ui-accent); text-decoration: none; white-space: nowrap;
}
.il-sol-link:hover { text-decoration: underline; }
.il-sol-link i { flex: none; }

/* 効果を測る候補KPI（ソリューションカード内・ネガティブインパクト確認の直前）。
   solutions[].candidateKpiIds で既存の候補KPI（_candidate）を参照して表示。
   採用操作は持たず、KPIパフォーマンス欄の候補KPI機能へ誘導（採用状態は共有）。 */
.il-sol-candkpi {
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--gray-300);
}
.il-ck-head { display: flex; align-items: center; justify-content: space-between; }
.il-ck-head .il-sol-detail-tag { margin: 0; color: var(--ui-accent); }
.il-ck-count {
  font-size: 10.5px; font-weight: 700; color: var(--gray-500);
  background: var(--gray-100); border-radius: 999px; padding: 1px 8px;
}
.il-ck-note { margin: 6px 0 10px; font-size: 11px; line-height: 1.55; color: var(--gray-500); }
.il-ck-rows { display: flex; flex-direction: column; gap: 8px; }
.il-ck-row { border: 1px solid var(--gray-200); border-radius: 8px; padding: 9px 11px; background: #fff; }
.il-ck-row.is-adopted { border-color: #bfe3cf; background: #f2faf5; }
.il-ck-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.il-ck-badge {
  display: inline-flex; align-items: center; gap: 3px; flex: none; white-space: nowrap;
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: #eaf1fb; color: #185fa5; border: 1px solid #b5d4f4;
}
.il-ck-badge i { flex: none; }
.il-ck-badge.is-adopted { background: #e7f6ee; color: #157347; border-color: #bfe3cf; }
.il-ck-label { font-size: 12.5px; font-weight: 700; color: var(--gray-900); line-height: 1.4; }
.il-ck-desc { margin-top: 4px; font-size: 11.5px; line-height: 1.55; color: var(--gray-600); }
.il-ck-foot { margin-top: 8px; display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.il-ck-target {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 11px; color: var(--gray-700);
  background: var(--gray-50); border: 0.5px solid var(--gray-200); border-radius: 6px; padding: 2px 8px;
}
.il-ck-target-lab { font-size: 10px; color: var(--gray-500); }
.il-ck-target b { font-weight: 700; color: var(--gray-900); }
.il-ck-link {
  display: inline-flex; align-items: center; gap: 4px; margin-left: auto;
  font-size: 11px; font-weight: 600; color: var(--ui-accent); text-decoration: none; white-space: nowrap;
}
.il-ck-link:hover { text-decoration: underline; }
.il-ck-link.is-adopted { color: #157347; }
.il-ck-link i { flex: none; }

/* ネガティブインパクトの確認（ソリューションカード末尾）。
   UNEP FI 22カテゴリのうち、そのソリューションに該当するものだけを弱/中/強で提示。
   negativeImpacts:[] = 評価済み・該当なし、未定義 = 未評価（ブロック非表示）。 */
/* ネガティブインパクトの趣旨説明 + 凡例（セクション内に1回だけ）。
   施策が初めて出てくる前に置き、記号の意味を一括解説する。 */
.il-ni-intro {
  margin: 4px 0 18px; padding: 14px 16px; background: var(--gray-50);
  border: 1px solid var(--gray-200); border-radius: 12px;
}
.il-ni-intro-head {
  display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--gray-900);
}
.il-ni-intro-head i { flex: none; color: var(--gray-500); }
.il-ni-intro-title { line-height: 1.4; }
.il-ni-intro-lead { margin: 7px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--gray-600); }
/* 集計ドーナツ（UNEP FI 22カテゴリ）+ サマリ + 強度キー。施策データから自動集計 */
.il-ni-intro-body { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 12px; }
.il-ni-radar { flex: 0 0 200px; max-width: 200px; }
.il-ni-radar-grp { fill: var(--gray-500); font-size: 11px; font-family: var(--sans); font-weight: 600; }
.il-ni-radar-num { fill: var(--gray-900); font-size: 30px; font-weight: 700; font-family: var(--sans); }
.il-ni-radar-den { fill: var(--gray-500); font-size: 12px; font-family: var(--sans); }
.il-ni-radar-info { flex: 1; min-width: 200px; }
.il-ni-radar-summary { font-size: 13.5px; font-weight: 700; color: var(--gray-800); line-height: 1.5; }
.il-ni-strength-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; }
.il-ni-key-item { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--gray-600); }
.il-ni-key-sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.il-ni-radar-draft { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 10.5px; color: var(--gray-500); font-style: italic; }
.il-ni-radar-draft i { flex: none; }

/* Direction A: 安心材料サマリ（数字カード + 低減見込みバナー + 折りたたみ） */
.il-ni-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; margin-top: 14px; }
.il-ni-stat { background: var(--gray-0, #fff); border: 1px solid var(--gray-200); border-radius: 10px; padding: 10px 13px; }
.il-ni-stat-label { font-size: 11.5px; color: var(--gray-500); }
.il-ni-stat-val { font-size: 23px; font-weight: 700; color: var(--gray-900); line-height: 1.15; margin-top: 3px; }
.il-ni-stat-unit { font-size: 12px; font-weight: 400; color: var(--gray-500); margin-left: 3px; }
.il-ni-stat-val.is-good { color: var(--dv-positive); }
.il-ni-stat-val.is-caution { color: var(--dv-warning); }
.il-ni-stat-val.is-alert { color: var(--dv-negative); }
.il-ni-stat-sub { display: flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--dv-positive); margin-top: 5px; }
.il-ni-stat-sub i { flex: none; }
.il-ni-reassure { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 9px 13px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; font-size: 12.5px; line-height: 1.55; color: #15803d; }
.il-ni-reassure i { flex: none; }
.il-ni-folds { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.il-ni-folds .il-ni-legend { margin-top: 0; }

/* 統一レベル部品（段階メーター + Lv.番号 + 語）。概要の階段・施策チップ・カード行・残余で共通利用 */
.il-ni-lv { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--gray-700); white-space: nowrap; }
.il-ni-lv-meter { display: inline-flex; align-items: flex-end; gap: 2px; flex: none; }
.il-ni-lv-bar { width: 4px; border-radius: 1px; background: var(--gray-300); }
.il-ni-lv-bar:nth-child(1) { height: 5px; }
.il-ni-lv-bar:nth-child(2) { height: 8px; }
.il-ni-lv-bar:nth-child(3) { height: 11px; }
.il-ni-lv-low  .il-ni-lv-bar:nth-child(-n+1) { background: #eab308; }
.il-ni-lv-mid  .il-ni-lv-bar:nth-child(-n+2) { background: #f97316; }
.il-ni-lv-high .il-ni-lv-bar:nth-child(-n+3) { background: #dc2626; }
.il-ni-lv-num { font-weight: 800; }
.il-ni-lv-pill { border-radius: 999px; padding: 2px 9px; }
.il-ni-lv-low.il-ni-lv-pill  { background: #fef9c3; color: #854d0e; }
.il-ni-lv-mid.il-ni-lv-pill  { background: #ffedd5; color: #9a3412; }
.il-ni-lv-high.il-ni-lv-pill { background: #fee2e2; color: #991b1b; }
.il-ni-lv-tbd.il-ni-lv-pill  { background: var(--gray-100); color: var(--gray-600); }

/* フロー帯（対象 → 点検 → 開示）: 施策との紐づきを文章でなく図で示す */
.il-ni-flow { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.il-ni-flow-node { flex: 1; min-width: 150px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 8px; padding: 9px 12px; }
.il-ni-flow-tag { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--gray-500); font-weight: 700; }
.il-ni-flow-tag i { flex: none; }
.il-ni-flow-text { font-size: 12.5px; color: var(--gray-800); margin-top: 3px; line-height: 1.5; }
.il-ni-flow-arrow { display: flex; align-items: center; color: var(--gray-300); flex: none; }

/* レベル階段（弱→強で高さが増す。件数を上に、Lv.部品を下に配置） */
.il-ni-stair-wrap { margin-top: 16px; }
.il-ni-stair-lead { font-size: 11.5px; color: var(--gray-500); margin-bottom: 6px; }
.il-ni-stair { display: flex; align-items: flex-end; gap: 14px; }
.il-ni-stair-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.il-ni-stair-num { font-size: 18px; font-weight: 800; color: var(--gray-900); }
.il-ni-stair-num.is-zero { color: var(--gray-400); font-weight: 700; }
.il-ni-stair-unit { font-size: 10.5px; font-weight: 400; color: var(--gray-400); margin-left: 1px; }
.il-ni-stair-bar { width: 100%; border-radius: 4px; }
.il-ni-stair-low  { background: #eab308; }
.il-ni-stair-mid  { background: #f97316; }
.il-ni-stair-high { background: #dc2626; }
.il-ni-stair-bar-empty.il-ni-stair-low  { background: transparent; border: 1px dashed #eab308; opacity: .5; }
.il-ni-stair-bar-empty.il-ni-stair-mid  { background: transparent; border: 1px dashed #f97316; opacity: .5; }
.il-ni-stair-bar-empty.il-ni-stair-high { background: transparent; border: 1px dashed #dc2626; opacity: .5; }
.il-ni-stair-axis { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 10.5px; color: var(--gray-400); }
.il-ni-stair-axis i { flex: none; }
.il-ni-stair-axis-line { flex: 1; height: 1px; background: var(--gray-200); }

/* 留意点のある施策チップ（クリックで該当カードへジャンプ） */
.il-ni-chips-wrap { margin-top: 16px; }
.il-ni-chips-lead { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--gray-500); margin-bottom: 6px; }
.il-ni-chips-lead i { flex: none; }
.il-ni-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.il-ni-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: #fff; border: 1px solid var(--gray-300); border-radius: 999px;
  padding: 4px 10px; font-size: 12px; color: var(--gray-700); font-family: inherit;
}
.il-ni-chip:hover { border-color: var(--gray-400); background: var(--gray-50); }
.il-ni-chip-name { font-weight: 600; }
.il-ni-chip > i { flex: none; color: var(--gray-400); }
.il-ni-residual-note { color: var(--gray-500); }

/* 施策カード詳細: 「懸念 → 軽減策 → 対策後」の物語行。ラベルは色を持たない構造タグ */
.il-ni-story { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 9px; margin-top: 9px; align-items: start; }
.il-ni-story-label { font-size: 10.5px; font-weight: 700; border-radius: 4px; padding: 2px 7px; white-space: nowrap; margin-top: 1px; color: var(--gray-500); background: var(--gray-100); }
/* 段階ごとに色分け。ダッシュボード共通トークンに統一（浮かないトーンに）。
   懸念=負の色(gap と同じ赤/#fef2f2)／軽減策=ブランド緑(green-100)／対策後=基調のティール(ui-accent)。
   対策後のティールはゲージの対策後の点と同色。 */
.il-ni-story-label-concern { color: var(--red-700); background: #fef2f2; }
.il-ni-story-label-mit     { color: var(--green-700); background: var(--green-100); }
.il-ni-story-label-after   { color: var(--ui-accent); background: #e6f2f6; }
.il-ni-story-text { font-size: 12.5px; color: var(--gray-700); line-height: 1.6; }
.il-ni-story-after { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.il-ni-story-arrow { display: inline-flex; color: var(--gray-400); }
.il-ni-story-note { font-size: 11.5px; color: var(--gray-500); }
/* リスクの位置バー（折りたたみの外に常時表示） */
.il-ni-gaugewrap { margin-top: 10px; }
/* この評価の根拠（数字の導出）フォールド */
.il-ni-basis { margin-top: 9px; }
.il-ni-basis > summary { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; list-style: none; font-size: 11px; font-weight: 600; color: var(--ui-accent); }
.il-ni-basis > summary::-webkit-details-marker { display: none; }
.il-ni-basis > summary i { flex: none; transition: transform .15s; }
.il-ni-basis[open] > summary i { transform: rotate(180deg); }
.il-ni-basis-body { font-size: 12px; color: var(--gray-600); line-height: 1.8; margin-top: 6px; padding: 8px 11px; background: var(--gray-50); border: 1px solid var(--gray-150, #eef0f3); border-radius: 8px; }
.il-ni-basis-body .il-ni-dots { vertical-align: middle; margin: 0 1px; }
.il-ni-legend { margin-top: 10px; }
.il-ni-legend > summary {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; list-style: none;
  font-size: 11.5px; font-weight: 600; color: var(--ui-accent); padding: 2px 0;
}
.il-ni-legend > summary::-webkit-details-marker { display: none; }
.il-ni-legend > summary i { flex: none; }
.il-ni-legend[open] > summary i:last-child { transform: rotate(180deg); }
.il-ni-legend-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 10px;
}
.il-ni-legend-box {
  background: var(--gray-0, #fff); border: 1px solid var(--gray-200); border-radius: 8px; padding: 10px 12px;
}
.il-ni-legend-tag { font-size: 11px; font-weight: 700; color: var(--gray-500); margin-bottom: 8px; }
.il-ni-legend-rows { display: flex; flex-direction: column; gap: 7px; font-size: 12px; color: var(--gray-700); }
.il-ni-legend-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 7px; }
.il-ni-legend-axis { color: var(--gray-700); font-weight: 700; min-width: 12px; }

.il-ni-block {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--gray-200);
}
.il-ni-tag {
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
}
.il-ni-tag i { flex: none; color: var(--gray-500); }
.il-ni-tag-title { font-size: 13px; font-weight: 700; color: var(--gray-800); }
.il-ni-tag-sub { font-size: 11px; font-weight: 400; color: var(--gray-500); }
.il-ni-none {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gray-500);
}
.il-ni-none i { flex: none; color: #16a34a; }
.il-ni-none-reason { font-size: 11.5px; color: var(--gray-500); margin-top: 4px; padding-left: 21px; line-height: 1.55; }
.il-ni-rows { display: flex; flex-direction: column; gap: 8px; }
.il-ni-row {
  padding: 8px 10px; border-radius: 8px; background: var(--gray-50);
  border: 1px solid var(--gray-150, #eef0f3); border-left: 3px solid var(--gray-300);
}
.il-ni-row-low  { border-left-color: #eab308; }
.il-ni-row-mid  { border-left-color: #f97316; }
.il-ni-row-high { border-left-color: #dc2626; }
.il-ni-row-tbd  { border-left-color: var(--gray-300); }
.il-ni-rowhead { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.il-ni-cat { font-size: 12.5px; font-weight: 700; color: var(--gray-800); }
/* 出典の区別: UNEP FI = 実線下線 / GOYOH補完 = 破線下線（フレームワーク第10章 10.3 準拠） */
.il-ni-cat.il-ni-src-unepfi { border-bottom: 1.5px solid var(--gray-400); padding-bottom: 1px; }
.il-ni-cat.il-ni-src-goyoh  { border-bottom: 1.5px dashed var(--gray-400); padding-bottom: 1px; }
/* 強度メーター: 弱=1 / 中=2 / 強=3 段。点灯色はレベルに対応（黄→橙→赤） */
.il-ni-meter { display: inline-flex; gap: 3px; flex: none; }
.il-ni-seg { width: 20px; height: 6px; border-radius: 2px; background: var(--gray-200); }
.il-ni-seg-off { background: var(--gray-200); }
.il-ni-meter-low  .il-ni-seg-on { background: #eab308; }
.il-ni-meter-mid  .il-ni-seg-on { background: #f97316; }
.il-ni-meter-high .il-ni-seg-on { background: #dc2626; }
.il-ni-meter-tbd  .il-ni-seg-on { background: var(--gray-300); }
.il-ni-level {
  font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 1px 9px; line-height: 1.5;
}
.il-ni-level-low  { background: #fef9c3; color: #854d0e; }
.il-ni-level-mid  { background: #ffedd5; color: #9a3412; }
.il-ni-level-high { background: #fee2e2; color: #991b1b; }
.il-ni-level-tbd  {
  background: repeating-linear-gradient(45deg, var(--gray-100), var(--gray-100) 4px, var(--gray-200) 4px, var(--gray-200) 8px);
  color: var(--gray-600);
}
.il-ni-src-mark { font-size: 9.5px; font-weight: 700; color: var(--gray-400); margin-left: auto; letter-spacing: .02em; }
.il-ni-concern { font-size: 12px; color: var(--gray-600); margin-top: 5px; line-height: 1.55; }
.il-ni-mit {
  display: flex; align-items: flex-start; gap: 5px; margin-top: 6px;
  font-size: 12px; color: var(--gray-700); line-height: 1.55;
}
.il-ni-mit i { flex: none; color: #16a34a; margin-top: 2px; }
.il-ni-mit b { color: var(--gray-800); }
.il-ni-draft {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
  font-size: 10.5px; color: var(--gray-500); font-style: italic;
}
.il-ni-draft i { flex: none; }

/* 段階ゲート: 低・未評価はコンパクト（カテゴリ名＋強度チップのみ）。詳細は中・高のみ */
.il-ni-row-compact { padding: 6px 10px; }

/* リスク評価ブロック（言葉＋ドット＋ゲージ。数字の羅列を避け初見でも読める形に）*/
.il-ni-assess { margin-top: 8px; }
.il-ni-assess-line { display: flex; align-items: baseline; gap: 7px; }
.il-ni-assess-score-label { font-size: 12px; font-weight: 700; color: var(--gray-700); }
.il-ni-assess-score b { font-size: 16px; font-weight: 800; }
.il-ni-assess-max { font-size: 11px; color: var(--gray-400); margin-left: 1px; }
.il-ni-bandtext-low  { color: #a16207; }
.il-ni-bandtext-mid  { color: #c2410c; }
.il-ni-bandtext-high { color: #b91c1c; }
/* 区分チップ（軽度=黄 / 要注意=橙 / 要モニタリング=赤）。残余対比・凡例でも再利用 */
.il-ni-band {
  font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 1px 9px; line-height: 1.6; white-space: nowrap;
}
.il-ni-band-low  { background: #fef9c3; color: #854d0e; }
.il-ni-band-mid  { background: #ffedd5; color: #9a3412; }
.il-ni-band-high { background: #fee2e2; color: #991b1b; }
/* スコアゲージ（1〜25。色帯=区分、●=現状、○=軽減策後） */
.il-ni-gauge {
  position: relative; height: 8px; border-radius: 999px; margin: 7px 0 3px;
  background: linear-gradient(to right, #fde68a 0 20%, #fdba74 20% 48%, #fca5a5 48% 100%);
}
/* 点の色は物語ラベルと一致（現状=濃色マーカー／対策後=ティール、対策後ラベルのティールと同色） */
.il-ni-gauge-mark { position: absolute; top: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%); border-radius: 50%; }
.il-ni-gauge-before { background: #1f2937; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.18); z-index: 2; }
.il-ni-gauge-after  { background: #fff; border: 2px solid var(--ui-accent); z-index: 1; }
/* ゲージの点の凡例（どちらが現状／対策後か明示） */
.il-ni-gauge-key { display: flex; flex-wrap: wrap; gap: 5px 14px; margin: 5px 0 2px; font-size: 10.5px; color: var(--gray-500); }
.il-ni-gauge-key-item { display: inline-flex; align-items: center; gap: 5px; }
.il-ni-gauge-keydot { width: 11px; height: 11px; border-radius: 50%; flex: none; display: inline-block; }
.il-ni-gauge-keydot-before { background: #1f2937; }
.il-ni-gauge-keydot-after { background: #fff; border: 2px solid var(--ui-accent); }
/* 影響の大きさ × 起こりやすさ。2つを独立カード化し、間に「×」を置いて境目を明示 */
.il-ni-assess-facs { display: flex; align-items: stretch; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.il-ni-fac-cell {
  flex: 1; min-width: 130px; background: var(--gray-50);
  border: 1px solid var(--gray-150, #eef0f3); border-radius: 8px; padding: 6px 11px; cursor: default;
}
.il-ni-fac-cell-label { font-size: 10.5px; color: var(--gray-500); margin-bottom: 3px; }
.il-ni-fac-cell-val { display: flex; align-items: center; gap: 8px; }
.il-ni-fac-cell-word { font-size: 13px; font-weight: 700; color: var(--gray-800); }
.il-ni-assess-x { display: flex; align-items: center; color: var(--gray-400); font-weight: 700; font-size: 15px; flex: none; }
.il-ni-dots { display: inline-flex; gap: 2px; }
.il-ni-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gray-200); }
.il-ni-dot.on { background: var(--gray-500); }
/* 残余リスク（対策前 → 残余） */
.il-ni-residual {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  margin-top: 7px; font-size: 11.5px; color: var(--gray-600);
}
.il-ni-residual-label { font-weight: 700; color: var(--gray-700); }
.il-ni-residual-arrow { color: var(--gray-400); font-weight: 700; }

/* 「要モニタリング」項目の今後の測定指標（第9章 定量評価セット） */
.il-ni-monitor {
  margin-top: 8px; padding: 8px 10px; border-radius: 8px;
  background: #fff7ed; border: 1px solid #fed7aa;
}
.il-ni-monitor-head {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; color: #9a3412;
}
.il-ni-monitor-head i { flex: none; }
.il-ni-monitor-lead { font-size: 11px; color: var(--gray-600); margin: 3px 0 6px; line-height: 1.5; }
.il-ni-monitor-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.il-ni-monitor-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--gray-700); }
.il-ni-monitor-ind { flex: 1; }
.il-ni-monitor-unit { font-size: 11px; color: var(--gray-500); font-variant-numeric: tabular-nums; white-space: nowrap; }
.il-ni-monitor-axis {
  flex: none; font-size: 10px; font-weight: 700; color: #9a3412;
  background: #ffedd5; border-radius: 4px; padding: 0 5px; line-height: 1.6;
}

/* レーダー: セグメント通し番号(1〜22) と 3側面の外周バンド */
.il-ni-radar-idx { font-size: 9px; font-weight: 700; font-family: var(--sans); pointer-events: none; }
.il-ni-radar svg path[data-ni-cat] { transition: stroke .12s, stroke-width .12s; }
.il-ni-radar svg path.il-ni-hot { stroke: #111827; stroke-width: 2.5; }

/* 「このセクションの見方」4ステップ（凡例の先頭。点検→抽出→評価→開示） */
.il-ni-guide { margin-bottom: 16px; }
.il-ni-guide-lead { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--gray-500); margin-bottom: 8px; }
.il-ni-guide-lead i { flex: none; }
.il-ni-guide-row { display: flex; align-items: stretch; gap: 6px; }
.il-ni-guide-step {
  flex: 1; min-width: 0; background: var(--gray-50);
  border: 1px solid var(--gray-150, #eef0f3); border-radius: 8px; padding: 9px 10px;
}
.il-ni-guide-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--blue-600); }
.il-ni-guide-head i { flex: none; }
.il-ni-guide-num {
  width: 18px; height: 18px; border-radius: 50%; background: var(--blue-100); color: var(--blue-700);
  display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; flex: none;
}
.il-ni-guide-title { font-size: 12.5px; font-weight: 700; color: var(--gray-800); margin-bottom: 2px; }
.il-ni-guide-desc { font-size: 11px; color: var(--gray-600); line-height: 1.45; }
.il-ni-guide-arrow { display: flex; align-items: center; color: var(--gray-300); flex: none; }
@media (max-width: 640px) {
  .il-ni-guide-row { flex-direction: column; }
  .il-ni-guide-arrow { transform: rotate(90deg); align-self: center; }
}

/* ネガティブインパクトの考え方（ロジック説明）— 単語羅列ではなく完結した文で示す */
.il-ni-logic { display: flex; flex-direction: column; gap: 14px; }
.il-ni-logic-block {
  background: var(--gray-50);
  border: 1px solid var(--gray-150, #eef0f3);
  border-radius: 10px;
  padding: 11px 13px;
}
.il-ni-logic-h {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 800; color: var(--gray-800); margin-bottom: 7px;
}
.il-ni-logic-h i { flex: none; color: var(--blue-600); }
.il-ni-logic-p { font-size: 12.5px; color: var(--gray-700); line-height: 1.7; margin: 0; }
.il-ni-logic-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.il-ni-logic-step { display: flex; align-items: flex-start; gap: 9px; }
.il-ni-logic-step-mark {
  position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--blue-100); color: var(--blue-700);
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.il-ni-logic-step-mark i { flex: none; }
.il-ni-logic-step-n {
  position: absolute; top: -4px; right: -4px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--blue-600); color: #fff; border: 1.5px solid #fff;
  font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.il-ni-logic-step-body { min-width: 0; }
.il-ni-logic-step-t { display: block; font-size: 12.5px; font-weight: 700; color: var(--gray-800); margin-bottom: 1px; }
.il-ni-logic-step-d { display: block; font-size: 12.5px; color: var(--gray-700); line-height: 1.65; }
.il-ni-logic-axes { list-style: none; margin: 7px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.il-ni-logic-axis { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; color: var(--gray-700); line-height: 1.65; }
.il-ni-logic-axis-n { flex: none; font-weight: 800; color: var(--blue-600); }
.il-ni-logic-bands { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }

/* 考え方フォールド内の「全体像をレーダーで見る」小見出し（ロジック解説とレーダーの区切り） */
.il-ni-radar-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--gray-700);
  margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--gray-200);
}
.il-ni-radar-title i { flex: none; color: var(--gray-500); }

/* 22カテゴリ参照リスト（番号 ↔ 名称。社会/環境/経済の3グループ） */
.il-ni-ref-wrap { margin-top: 14px; }
.il-ni-ref-title {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; color: var(--gray-500); margin-bottom: 8px;
}
.il-ni-ref-title i { flex: none; }
.il-ni-ref { display: grid; grid-template-columns: 2fr 1.3fr 1fr; gap: 10px 16px; }
@media (max-width: 640px) { .il-ni-ref { grid-template-columns: 1fr; } }
.il-ni-ref-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; margin-bottom: 5px;
}
.il-ni-ref-bar { width: 4px; height: 13px; border-radius: 2px; flex: none; }
.il-ni-ref-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.il-ni-ref-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--gray-700); line-height: 1.5;
  padding: 1px 4px; border-radius: 5px; cursor: default;
}
.il-ni-ref-item.il-ni-hot { background: var(--gray-100); }
.il-ni-ref-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.il-ni-ref-idx { font-size: 10px; font-weight: 700; color: var(--gray-400); min-width: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.il-ni-ref-name { flex: 1; }

/* 親和テナント・パネル（② 施策のソリューション群の近く。チェーンのテーマに関連する
   要望を持つ入居テナントを社名＋適合率＋要望文で提示。tenantAlignment から動的生成） */
.il-ten {
  margin-top: 10px; padding: 10px 12px; background: #fdfcff; border-radius: 10px;
  border: 1px dashed var(--gray-300); border-left: 3px solid var(--dv-series, #dd3388);
}
.il-ten-headrow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; font-weight: 700; color: var(--gray-800);
  width: 100%; background: none; border: none; padding: 0; cursor: pointer; font-family: var(--sans); text-align: left;
}
.il-ten-headrow > i { flex: none; color: var(--dv-series, #dd3388); }
.il-ten-caret { color: var(--gray-400); transition: transform .18s ease; display: inline-flex; flex: none; margin-left: 6px; }
.il-ten-caret i { flex: none; }
.il-ten-collapsed .il-ten-caret { transform: rotate(-90deg); }
.il-ten-body { margin-top: 8px; }
.il-ten-collapsed .il-ten-body { display: none; }
.il-ten-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 6px; border-radius: 999px; background: var(--dv-series, #dd3388); color: #fff; font-size: 10.5px; font-weight: 800;
}
.il-ten-note { font-weight: 500; color: var(--gray-500); font-size: 10.5px; margin-left: auto; text-align: right; }
.il-ten-headrow-static { cursor: default; }
.il-ten-emptynote { margin-top: 6px; font-size: 12px; color: var(--gray-500); }
.il-ten-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px; margin-top: 8px; }
.il-ten-row { background: #fff; border: 1px solid var(--gray-200); border-radius: 8px; padding: 7px 10px; }
.il-ten-row-hidden { display: none; }
.il-ten.is-open .il-ten-row-hidden { display: block; }
.il-ten-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.il-ten-name { font-size: 12.5px; font-weight: 700; color: var(--gray-800); line-height: 1.4; }
.il-ten-rate {
  flex: none; font-size: 10.5px; font-weight: 800; color: var(--dv-series-deep, #a81f63);
  background: var(--dv-series-bg, #fce7f3); border-radius: 999px; padding: 1px 8px; white-space: nowrap;
}
.il-ten-reqs { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.il-ten-req { font-size: 11px; color: var(--gray-600); line-height: 1.5; }
.il-ten-req-more { font-size: 10px; font-weight: 700; color: var(--gray-400); white-space: nowrap; }
.il-ten-more {
  margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font: inherit;
  font-size: 11px; font-weight: 700; color: var(--dv-series-deep, #a81f63);
  background: none; border: none; padding: 2px 0;
}
.il-ten-more:hover { text-decoration: underline; }
/* 「この施策で未充足要件に対応できる」明示（緑＝新規に充足できる機会。誇張せず該当時のみ表示） */
.il-ten-fillnote {
  display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; padding: 7px 10px;
  background: #f0f7f0; border: 1px solid #cfe6cf; border-radius: 8px;
  font-size: 11.5px; line-height: 1.5; color: #3c6b3c; font-weight: 600;
}
.il-ten-fillnote i { flex: none; margin-top: 2px; color: #5f9035; }
.il-ten-fillnote b { color: #2f5a2f; }
.il-ten-row-fill { border-color: #cfe6cf; background: #fbfdfb; }
.il-ten-fill {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 5px;
  padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700;
  color: #3c6b3c; background: #eaf5ea; border: 1px solid #cfe6cf;
}
.il-ten-fill i { flex: none; color: #5f9035; }

/* 検証ループ・出典 */
.il-verify {
  display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 9px;
  border-top: 1px dashed var(--gray-200); font-size: 12px; color: var(--gray-500);
}
.il-source { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--gray-500); }

@media (max-width: 860px) {
  .il-overview-top { flex-direction: column; align-items: stretch; }
  .il-map-venn { flex: none; max-width: 230px; margin: 0 auto; }
  .il-map-kpi { display: none; }
  .il-flow { grid-template-columns: 1fr; }
  .il-flow-arrow { transform: rotate(90deg); height: 16px; }
  .il-ev-body { flex-direction: column; }
  .il-chain-venn { flex: none; width: 150px; margin: 0 auto; }
  /* 狭い画面ではヘッダを折り返し、提言KPIサマリを番号＋タイトルの下に回す */
  .il-chain-head { flex-wrap: wrap; }
  .il-chain-head-caret, .il-chain-caret { order: 2; margin-left: auto; }
  .il-chain-head-kpi { order: 3; flex-basis: 100%; margin-left: 34px; margin-top: 8px; }
  /* 施策提案カード: 効果・特徴/選定の 2 列を 1 列に畳む */
  .il-sol-effects, .il-sol-featsel { grid-template-columns: 1fr; }
  .il-sol-header { flex-wrap: wrap; }
  .il-sol-chips { width: 100%; }
}

/* =====================================================================
   共通化された表示改善（広小路本町 PR #194 由来 → 全デモ共通へ昇格）
   ---------------------------------------------------------------------
   もともと広小路本町のページ専用に書かれていた汎用的なレイアウト改善を、
   全デモに反映するため _shared に移設したもの。各セクション ID / クラスで
   スコープされており、そのセクションを持つデモにのみ効く。
   ヒーロー写真・画像ギャラリー・分析範囲初期選択は物件固有のため移設せず、
   引き続き demo-hirokoji-honmachi/index.html に残している。
   ===================================================================== */

/* 主要機能: 箇条書きの丸ドットを廃止し、カテゴリタグ背景を文字幅に合わせる */
.functions-section .function-dot { display: none; }
.functions-section .function-category { align-self: flex-start; width: auto; }

/* 各セクションの見出し下の説明文を太字に */
.section-desc { font-weight: 700; }

/* ESG プロファイルの「ValueDriver (GOYOH)」表記を非表示 */
.facility-vd-source { display: none; }

/* テナントアンケート: 評価方法の注記を上部の緑枠（xs-summary）内に収めたときの余白 */
.xs-summary-main .ic-methodology { margin-top: 0.6rem; margin-bottom: 0; }
/* テナントアンケート: xs-summary 上部の緑グラデーション線を削除 */
#section-impact-checker .xs-summary::before { display: none; }

/* 地域比較のカテゴリカードを 3 列（3×3）に。狭い画面では 2 列・1 列へ折り返す */
#section-regional-comparison .risa-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  #section-regional-comparison .risa-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  #section-regional-comparison .risa-grid { grid-template-columns: 1fr; }
}
/* カードの大きな数字が偏差値であることを示す小ラベル */
.hk-score-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gray-500, #6b7280);
  line-height: 1.2;
  margin-top: 0.65rem;
  margin-bottom: 0.1rem;
}
/* 精密値（例: 75.2）はバー上の「その値の位置（%）」の真上に表示。
   JS が margin-left を value% に設定し、translateX(-50%) でその地点に中央寄せする。 */
/* モーダル内では数字を少し上げる（バーとの間隔を少し空ける） */
.hk-modal-content .risa-deviation.hk-above-bar {
  margin-top: 0.4rem;
  margin-bottom: 0.05rem;
}
/* セクション内・詳細モーダル内（クローン）どちらでも効くようセクション限定を外す */
.risa-deviation.hk-above-bar {
  transform: translateX(-50%);
  white-space: nowrap;
  /* margin-left は JS が fill 先端% に設定。box は右端まで広がるが、
     box 中心が先端に一致するため text-align:center で「文字の中心」を先端に合わせる。 */
  text-align: center;
  margin-top: 0.9rem;
  margin-bottom: -0.5rem;
  margin-right: 0;
  font-weight: 700;
  color: var(--gray-700, #374151);
}

/* 地域課題・強みのサマリーを、アイコンなし・1 列の表形式に */
.risa-summary-tiles { grid-template-columns: 1fr; }
.risa-summary-icon { display: none; }
/* タイル内のレイアウトを「カテゴリ（上） → 項目名・レーティング・順位（同じ行）」に */
.risa-summary-body {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1875rem 0.625rem;
}
.risa-summary-cat-hint { order: -1; flex-basis: 100%; }
/* レーティングと順位をひとまとめにして行の右端へ右揃え */
.risa-summary-meta { flex: 1; }
.risa-summary-value { margin-left: auto; }

/* 地域比較カードの「詳細データ」をクリックでモーダル表示に */
.hk-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.55);
  padding: 1.5rem;
}
.hk-modal-overlay[hidden] { display: none; }
.hk-modal {
  background: #fff;
  border-radius: 16px;
  max-width: 720px;
  width: 100%;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  position: relative;
}
.hk-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-shrink: 0;
  padding: 1.25rem 1.5rem 0.75rem;
  border-bottom: 1px solid var(--gray-100);
}
.hk-modal-content { overflow: auto; padding: 1rem 1.5rem 1.75rem; }
.hk-modal-title { font-size: 1.05rem; font-weight: 800; color: var(--gray-900); }
.hk-modal-close {
  border: none;
  background: var(--gray-100);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: var(--gray-600);
  flex-shrink: 0;
}
.hk-modal-close:hover { background: var(--gray-200, #e5e7eb); }
/* モーダル内では details の本体を常に表示し、開閉マーカーは隠す */
.hk-modal .risa-details-body { display: block; }

/* 不動産マーケットデータの ladder を2列グリッドに（データ内容は不変・配置のみ）。
   ※ ここから下は「エリア見出し（.rm-geo-group）でグループ化できる ladder」にのみ適用する。
      JS が実際に行（.hk-rm-row）を生成できたときだけ ladder に .hk-rm-grid を付与するため、
      見出し構造を持たない ladder（例: 羽田の spine 型）は従来の縦スパイン表示のまま影響を受けない。 */
.rm-ladder.hk-rm-grid { display: block; padding-left: 0; }
/* 縦の spine（スケール軸の線）はグリッドでは意味をなさないため非表示 */
.rm-ladder.hk-rm-grid::before { display: none; }
/* 地理レンジの見出し（名古屋市内 / 全国 等）は各カテゴリ行の見出しに */
.hk-rm-grid .rm-geo-group { margin: 0.75rem 0 0.625rem 0; }
.hk-rm-grid .rm-geo-group:first-child { margin-top: 0; }
/* 同カテゴリの stop を等幅で横並び・高さを揃える（JS で生成する行コンテナ）。
   1行は最大2枚に制限し、3枚以上は次の行へ折り返す。 */
.hk-rm-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.25rem;
  align-items: stretch;
  margin-bottom: 0.5rem;
}
/* 行に1枚だけ余る場合は全幅に伸ばして余白を作らない */
.hk-rm-row > .rm-stop:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* spine 上にあった番号マーカーを、各カード左上の小バッジへ移設 */
.hk-rm-grid .rm-stop-head::before { left: 0.625rem; top: -0.6875rem; }
/* 1つのカード（stop）内にチャート（カード）が2つある場合は横に並べる */
.hk-rm-grid .rm-stop-body:has(> .rm-card + .rm-card) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.hk-rm-grid .rm-stop-body:has(> .rm-card + .rm-card) .rm-card + .rm-card { margin-top: 0; }
/* 2チャートを持つ stop が他カードと並列（半幅）になる行は、その行を「直列」
   （全幅で縦に並べる）に切り替える。JS が hk-rm-serial を付与。 */
.hk-rm-row.hk-rm-serial { grid-template-columns: 1fr; }
/* チャート横並び時は2カードを上揃えに固定する（下揃えだと整列が収束しないため）。 */
.hk-rm-grid .rm-stop-body:has(> .rm-card + .rm-card),
.hk-rm-grid .rm-grid-2 { align-items: start; }
.hk-rm-grid .rm-stop-body:has(> .rm-card + .rm-card) > .rm-card,
.hk-rm-grid .rm-grid-2 > .rm-card { align-self: start; margin-top: 0; }
/* 見出しが長く「タイトル＋出典」が1行に収まらない場合は、出典をタイトルの下へ落とす
   （JS が hk-head-stack を付与）。見出し部の高さは JS で左右そろえる。 */
.rm-card-head.hk-head-stack {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
  row-gap: 0.15rem;
  align-items: center;
  align-content: center;
}
.rm-card-head.hk-head-stack .rm-area-badge { grid-row: 1 / span 2; align-self: center; }
.rm-card-head.hk-head-stack .rm-card-title { grid-column: 2; grid-row: 1; }
.rm-card-head.hk-head-stack .rm-card-meta {
  grid-column: 2;
  grid-row: 2;
  white-space: normal;
  text-align: right;
}
@media (max-width: 760px) {
  .hk-rm-row { grid-template-columns: 1fr; }
  .hk-rm-grid .rm-stop-body:has(> .rm-card + .rm-card) { grid-template-columns: 1fr; }
}

/* =====================================================================
   投資と経営実績（トラックレコード）セクション — trackRecord キー定義時のみ
   ===================================================================== */
.tr-root { display: flex; flex-direction: column; gap: 1.1rem; }
.tr-intro { font-size: 0.86rem; color: var(--gray-600); line-height: 1.75; }

/* サマリーチップ */
.tr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; }
.tr-stat {
  background: #fff; border: 1px solid var(--gray-200); border-radius: 10px;
  padding: 0.75rem 0.9rem; display: flex; flex-direction: column; gap: 0.15rem;
}
.tr-stat-icon { color: var(--blue-600); margin-bottom: 0.15rem; }
.tr-stat-value { font-size: 1.15rem; font-weight: 700; color: var(--gray-900); letter-spacing: -0.01em; }
.tr-stat-label { font-size: 0.7rem; color: var(--gray-600); line-height: 1.45; }

/* ブロック見出し */
.tr-block { display: flex; flex-direction: column; gap: 0.6rem; }
.tr-block-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
.tr-block-title {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.86rem; font-weight: 700; color: var(--gray-900);
}
.tr-block-title svg { color: var(--blue-600); }

/* 年表バンド（縦積み: 年ラベル＝左 / 当年のイベント群＝右にコンパクトに敷き詰め） */
.tr-tl-legend { display: inline-flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.tr-tl-leg { display: inline-flex; align-items: center; gap: 0.32rem; font-size: 0.7rem; color: var(--gray-600); }
.tr-tl-leg i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.tr-timeline {
  display: flex; flex-direction: column; gap: 0.55rem;
  border-top: 2px solid var(--gray-200); padding-top: 0.7rem;
}
.tr-tl-year {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 0.75rem;
  align-items: start;
}
.tr-tl-yearlabel {
  font-size: 0.92rem; font-weight: 800; color: var(--gray-900); letter-spacing: 0.02em;
  padding: 0.35rem 0 0 0.55rem;
  border-left: 3px solid var(--blue-600);
  align-self: stretch;
}
.tr-tl-events {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.4rem;
}
.tr-tl-event {
  background: #fff; border: 1px solid var(--gray-200); border-left: 3px solid var(--gray-200);
  border-radius: 8px; padding: 0.5rem 0.6rem; display: flex; flex-direction: column; gap: 0.22rem;
}
.tr-tl-event-label { display: flex; align-items: flex-start; gap: 0.38rem; font-size: 0.76rem; font-weight: 600; color: var(--gray-900); line-height: 1.45; }
.tr-tl-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 0.28em; }
.tr-tl-month { font-size: 0.68rem; font-weight: 500; color: var(--gray-500, #6b7280); white-space: nowrap; }
.tr-tl-event-sub { padding-left: 1.05rem; }
.tr-tl-amount { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; font-weight: 700; color: var(--gray-900); }
.tr-tl-amount svg { color: var(--gray-500, #6b7280); }
.tr-tl-effect { font-size: 0.7rem; color: #15803d; font-weight: 600; }
/* 施策ごとの ValueDriver ESG タグ（実装済みタグ＝teal 系。年表の基調を崩さない控えめなチップ）*/
.tr-tl-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; padding-left: 1.05rem; margin-top: 0.1rem; }
/* 先頭のブランドラベル（ソリッド teal）で「以下は ValueDriver の ESG タグ」と一目で示す */
.tr-tl-taglead {
  display: inline-flex; align-items: center; gap: 0.22rem;
  font-size: 0.58rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.02em;
  padding: 0.1rem 0.4rem; border-radius: 4px;
  background: #0f766e; color: var(--white, #fff); border: 1px solid #0f766e;
  white-space: nowrap;
}
.tr-tl-taglead svg { flex: none; }
.tr-tl-tag {
  font-size: 0.6rem; font-weight: 600; line-height: 1.3;
  padding: 0.05rem 0.4rem; border-radius: 4px;
  background: rgba(15, 118, 110, 0.08); color: #0f766e; border: 1px solid rgba(15, 118, 110, 0.22);
}
.tr-tl-tagnote {
  display: flex; align-items: center; gap: 0.3rem;
  font-size: 0.68rem; color: var(--gray-500, #6b7280); margin-bottom: 0.5rem;
}
.tr-tl-tagnote svg { color: #0f766e; flex: none; }

/* チャートカード */
.tr-charts { display: flex; flex-direction: column; gap: 0.9rem; }
.tr-chart-card { background: #fff; border: 1px solid var(--gray-200); border-radius: 10px; padding: 0.9rem 1rem; }
.tr-chart-title { font-size: 0.84rem; font-weight: 700; color: var(--gray-900); margin-bottom: 0.4rem; }
.tr-chart-legend { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.tr-leg { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; color: var(--gray-600); }
.tr-leg-line { width: 18px; height: 0; border-top: 2.4px solid var(--leg-color, #2563eb); display: inline-block; }
.tr-leg-dashed { border-top-style: dashed; }
.tr-chart-wrap { position: relative; height: 250px; }
.tr-chart-note {
  display: flex; align-items: flex-start; gap: 0.4rem; margin-top: 0.6rem;
  font-size: 0.76rem; color: var(--gray-600); line-height: 1.65;
  background: var(--gray-50); border-radius: 8px; padding: 0.55rem 0.7rem;
}
.tr-chart-note svg { color: #b45309; flex: none; margin-top: 0.15em; }

/* 示唆カード（本格チャートを載せるためカード自体を2列＝各カードで十分な横幅を確保） */
.tr-insights { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
.tr-insight {
  grid-column: span 1; background: #fff; border: 1px solid var(--gray-200); border-radius: 10px;
  padding: 0.95rem 1.05rem; display: flex; flex-direction: column; gap: 0.45rem;
}
.tr-insight-featured {
  grid-column: span 2;
  border-color: rgba(37, 99, 235, 0.35);
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.045), rgba(37, 99, 235, 0) 55%), #fff;
  box-shadow: 0 1px 3px rgba(2, 6, 23, 0.05);
}
.tr-insight-head { display: flex; align-items: flex-start; gap: 0.45rem; }
.tr-insight-icon { color: var(--blue-600); flex: none; margin-top: 0.05em; }
.tr-insight-title { font-size: 0.82rem; font-weight: 700; color: var(--gray-900); line-height: 1.5; }
.tr-insight-featured .tr-insight-title { font-size: 0.88rem; }
.tr-insight-stat {
  font-size: 1.25rem; font-weight: 800; color: var(--blue-600); letter-spacing: -0.01em;
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
}
.tr-insight-featured .tr-insight-stat { font-size: 1.5rem; }
.tr-insight-statlabel { font-size: 0.68rem; font-weight: 500; color: var(--gray-600); }
.tr-insight-body { font-size: 0.76rem; color: var(--gray-600); line-height: 1.7; }

/* 注意書き・出典（ダッシュボード基調のグレートーン。警告アイコンのみ琥珀で控えめに合図） */
.tr-notes {
  background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 10px; padding: 0.75rem 0.95rem;
}
.tr-notes-title {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.76rem; font-weight: 700; color: var(--gray-700, #374151); margin-bottom: 0.35rem;
}
.tr-notes-title svg { color: #b45309; }
.tr-notes ol { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.25rem; }
.tr-notes li { font-size: 0.73rem; color: var(--gray-600); line-height: 1.65; }
.tr-source { display: flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; color: var(--gray-500, #6b7280); }

@media (max-width: 900px) {
  .tr-stats { grid-template-columns: repeat(2, 1fr); }
  .tr-insights { grid-template-columns: 1fr; }
  .tr-insight, .tr-insight-featured { grid-column: span 1; }
  .tr-chart-wrap { height: 210px; }
}
@media (max-width: 560px) {
  /* 狭いビューでは年ラベルを上に、イベント群を下にスタック */
  .tr-tl-year { grid-template-columns: 1fr; gap: 0.35rem; }
  .tr-tl-yearlabel { border-left: none; border-bottom: 2px solid var(--blue-600); padding: 0 0 0.15rem 0; }
}

/* ===== トラックレコード: ストーリー先行リデザイン ===== */
/* 示唆カード: 番号バッジ + 事実/解釈の2行構造 + 開閉詳細 + グラフジャンプ */
.tr-insight-num {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-size: 0.72rem; font-weight: 800; line-height: 20px; text-align: center;
  margin-top: 0.05em;
}
.tr-insight-fact { font-size: 0.78rem; color: var(--gray-900); line-height: 1.7; }
.tr-insight-interp {
  display: flex; align-items: flex-start; gap: 0.35rem;
  font-size: 0.76rem; color: var(--gray-600); line-height: 1.65;
}
.tr-insight-interp svg { flex: none; margin-top: 0.2em; color: var(--blue-600); }
.tr-insight-foot { display: flex; flex-direction: column; gap: 0.35rem; margin-top: auto; }

/* 示唆カード内: テナント要件の改修前後充足（beforeAfter）VDカテゴリー別 */
.tr-ba {
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: 0.55rem 0.6rem;
  background: var(--gray-50); border: 1px solid var(--gray-200, #e5e7eb); border-radius: 8px;
}
.tr-ba-title {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.75rem; font-weight: 700; color: var(--gray-900);
}
.tr-ba-title svg { flex: none; color: var(--blue-600); }
/* 前後サマリー（改修前 N/16 → 改修後 M/16 ＋差分） */
.tr-ba-summary {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.3rem 0.5rem; background: #fff;
  border: 1px solid var(--gray-200, #e5e7eb); border-radius: 6px;
}
.tr-ba-summary > svg { flex: none; color: var(--gray-400, #9ca3af); }
.tr-ba-sum-item { display: inline-flex; align-items: baseline; gap: 0.3rem; }
.tr-ba-sum-lab { font-size: 0.66rem; color: var(--gray-500, #6b7280); }
.tr-ba-sum-item b { font-size: 0.92rem; font-weight: 700; color: var(--gray-500, #6b7280); }
.tr-ba-sum-after b { color: #166534; }
.tr-ba-sum-tot { font-size: 0.66rem; color: var(--gray-400, #9ca3af); }
.tr-ba-sum-gain {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.15rem;
  font-size: 0.72rem; font-weight: 700; color: #15803d;
  background: #dcfce7; border-radius: 999px; padding: 0.12rem 0.55rem;
}
.tr-ba-sum-gain svg { flex: none; }
.tr-ba-subtitle { font-size: 0.68rem; color: var(--gray-600, #4b5563); line-height: 1.6; margin-top: -0.15rem; }
/* ESG タグ適合率（改修前→改修後）。ESGプロファイルと同じレートバーを再利用 */
.tr-ba-matchrate {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 0.45rem 0.6rem; background: #fff;
  border: 1px solid var(--gray-200, #e5e7eb); border-radius: 6px;
}
.tr-ba-mr-head {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.7rem; font-weight: 700; color: var(--gray-900); flex-wrap: wrap;
}
.tr-ba-mr-head svg { flex: none; color: var(--blue-600); }
.tr-ba-mr-sub { font-size: 0.62rem; font-weight: 400; color: var(--gray-500, #6b7280); }
/* 案A: 積み上げバー（改修前=スレート / 改修で獲得=緑 / 残り=トラック） */
.tr-ba-mr-bar {
  display: flex; height: 30px; border-radius: 6px; overflow: hidden;
  background: var(--gray-100, #f3f4f6);
}
.tr-ba-mr-seg {
  display: flex; align-items: center; justify-content: center; white-space: nowrap;
  font-size: 0.68rem; font-weight: 700; color: #fff; overflow: hidden;
}
.tr-ba-mr-before { background: #64748b; }
.tr-ba-mr-gain { background: #16a34a; }
.tr-ba-mr-scale { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 0.35rem; }
.tr-ba-mr-bef { font-size: 0.66rem; color: var(--gray-600, #4b5563); font-variant-numeric: tabular-nums; }
.tr-ba-mr-aft { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.tr-ba-mr-aft b { font-size: 1.25rem; font-weight: 700; color: #16a34a; font-variant-numeric: tabular-nums; }
.tr-ba-mr-aft small { font-size: 0.62rem; color: var(--gray-500, #6b7280); }
.tr-ba-mr-note { font-size: 0.62rem; color: var(--gray-500, #6b7280); line-height: 1.55; margin-top: 0.1rem; }
/* ESGプロファイルと同じ要件要望表（3状態チップ: 改修前から適合 / 改修で獲得 / 未適合）。開閉式・既定は閉 */
.tr-ba-reqtable {
  border: 1px solid var(--gray-200, #e5e7eb); border-radius: 6px; overflow: hidden; background: #fff;
}
.tr-ba-rt-sum {
  cursor: pointer; list-style: none; user-select: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem;
  padding: 0.45rem 0.6rem;
}
.tr-ba-rt-sum::-webkit-details-marker { display: none; }
.tr-ba-rt-sum::before { content: '+'; font-weight: 700; color: var(--blue-600); margin-right: 0.1rem; }
.tr-ba-reqtable[open] .tr-ba-rt-sum::before { content: '−'; }
.tr-ba-rt-sum:hover { background: var(--gray-50); }
.tr-ba-rt-sumlab { font-size: 0.72rem; font-weight: 600; color: var(--blue-600); }
.tr-ba-rt-legend {
  display: inline-flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-left: auto;
}
.tr-ba-reqtable .vd-ten-reqs { border-top: 1px solid var(--gray-200, #e5e7eb); }
/* 3状態チップの配色（is-u=未適合はESGプロファイルの枠線チップを流用） */
.vd-tag2.is-before { background: #64748b; border: 1px solid #64748b; color: #fff; }
.vd-tag2.is-gained { background: #16a34a; border: 1px solid #16a34a; color: #fff; }
/* カテゴリー別横棒グラフ（青=改修前から充足 / 緑=改修で獲得） */
.tr-ba-chart { display: flex; flex-direction: column; gap: 0.32rem; }
.tr-ba-bar-row { display: grid; grid-template-columns: 130px 1fr 34px; align-items: center; gap: 0.5rem; }
.tr-ba-bar-cat {
  display: flex; align-items: center; gap: 0.3rem;
  font-size: 0.66rem; color: var(--gray-700, #374151); min-width: 0;
}
.tr-ba-bar-cat svg { flex: none; color: var(--gray-500, #6b7280); }
.tr-ba-bar-cat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-ba-bar-track {
  height: 15px; background: var(--gray-100, #f3f4f6); border-radius: 4px;
  display: flex; overflow: hidden;
}
.tr-ba-bar-seg { height: 100%; }
.tr-ba-bar-before { background: var(--gray-400, #9ca3af); }
.tr-ba-bar-gained { background: var(--green-600, #16a34a); }
.tr-ba-bar-val { font-size: 0.66rem; color: var(--gray-500, #6b7280); text-align: right; white-space: nowrap; }
.tr-ba-bar-val-gain { color: #166534; font-weight: 700; }
.tr-ba-legend {
  display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.15rem;
  font-size: 0.64rem; color: var(--gray-500, #6b7280);
}
.tr-ba-leg { display: inline-flex; align-items: center; gap: 0.3rem; }
.tr-ba-leg-sw { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.tr-ba-leg-before { background: var(--gray-400, #9ca3af); }
.tr-ba-leg-gained { background: var(--green-600, #16a34a); }
/* ESGプロファイルのテナント行への遷移ボタン */
.tr-ba-esglink {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.7rem; font-weight: 600; color: var(--blue-600);
  background: none; border: 1px solid rgba(37, 99, 235, 0.35); border-radius: 999px;
  padding: 0.25rem 0.7rem; cursor: pointer; font-family: inherit;
}
.tr-ba-esglink:hover { background: rgba(37, 99, 235, 0.06); }
.tr-ba-esglink svg { flex: none; }
/* 改修で充足した要件の明細（開閉式） */
.tr-ba-gained-detail { border-top: 1px solid var(--gray-200, #e5e7eb); padding-top: 0.4rem; }
.tr-ba-gained-detail > summary {
  cursor: pointer; list-style: none; user-select: none;
  font-size: 0.72rem; font-weight: 600; color: var(--blue-600);
}
.tr-ba-gained-detail > summary::-webkit-details-marker { display: none; }
.tr-ba-gained-detail > summary::before { content: '+ '; }
.tr-ba-gained-detail[open] > summary::before { content: '− '; }
.tr-ba-gained-body { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.4rem; }
.tr-ba-seclabel {
  display: flex; align-items: center; gap: 0.3rem;
  font-size: 0.7rem; font-weight: 700; margin-top: 0.05rem;
}
.tr-ba-seclabel-gain { color: #15803d; }
.tr-ba-seclabel svg { flex: none; }
.tr-ba-group { display: flex; flex-direction: column; gap: 0.22rem; }
.tr-ba-group-head {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.72rem; font-weight: 600; color: var(--gray-900);
}
.tr-ba-group-head svg { flex: none; color: var(--green-600, #16a34a); }
.tr-ba-group-count { font-weight: 400; color: var(--gray-400, #9ca3af); font-size: 0.66rem; }
.tr-ba-grid {
  display: grid; grid-template-columns: 1fr 14px 1fr 14px 22px;
  row-gap: 0.22rem; column-gap: 0.3rem; align-items: stretch;
}
.tr-ba-cell {
  font-size: 0.68rem; line-height: 1.45; border-radius: 5px; padding: 0.3rem 0.45rem;
  display: flex; flex-direction: column; gap: 0.15rem; justify-content: center;
}
.tr-ba-req { background: #fff; border: 1px solid var(--gray-200, #e5e7eb); color: var(--gray-700, #374151); }
.tr-ba-measure { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.tr-ba-year {
  align-self: flex-start; font-size: 0.62rem; font-weight: 700; color: #15803d;
  background: #dcfce7; border-radius: 5px; padding: 0.08rem 0.4rem; letter-spacing: 0.02em;
}
.tr-ba-mid { display: flex; align-items: center; justify-content: center; color: var(--gray-300, #cbd5e1); }
.tr-ba-mid-met { color: var(--green-600, #16a34a); }
.tr-ba-check {
  display: flex; align-items: center; justify-content: center;
  color: #15803d; background: #dcfce7; border-radius: 6px;
}
.tr-ba-check svg { flex: none; }
/* 改修前から充足の10要件（開閉式） */
.tr-ba-existing { border-top: 1px solid var(--gray-200, #e5e7eb); padding-top: 0.5rem; }
.tr-ba-existing > summary {
  cursor: pointer; list-style: none; user-select: none;
  font-size: 0.72rem; font-weight: 600; color: var(--blue-600);
}
.tr-ba-existing > summary::-webkit-details-marker { display: none; }
.tr-ba-existing > summary::before { content: '+ '; }
.tr-ba-existing[open] > summary::before { content: '− '; }
.tr-ba-existing-body { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.4rem; }
.tr-ba-exist-cat {
  display: flex; align-items: center; gap: 0.3rem;
  font-size: 0.68rem; font-weight: 600; color: var(--gray-600, #4b5563); margin-bottom: 0.15rem;
}
.tr-ba-exist-cat svg { flex: none; color: var(--gray-400, #9ca3af); }
.tr-ba-exist-count { font-weight: 400; color: var(--gray-400, #9ca3af); }
.tr-ba-exist-req {
  display: flex; align-items: flex-start; gap: 0.3rem;
  font-size: 0.7rem; color: var(--gray-700, #374151); line-height: 1.5; padding-left: 0.2rem;
}
.tr-ba-exist-req svg { flex: none; color: var(--green-600, #16a34a); margin-top: 0.15em; }
.tr-ba-note { font-size: 0.64rem; color: var(--gray-500, #6b7280); line-height: 1.6; }
.tr-insight-more summary {
  cursor: pointer; font-size: 0.72rem; font-weight: 600; color: var(--blue-600);
  list-style: none; user-select: none;
}
.tr-insight-more summary::-webkit-details-marker { display: none; }
.tr-insight-more summary::before { content: '+ '; }
.tr-insight-more[open] summary::before { content: '− '; }
.tr-insight-more .tr-insight-body { margin-top: 0.3rem; }
.tr-insight-jump {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.72rem; font-weight: 600; color: var(--blue-600);
  background: none; border: 1px solid rgba(37, 99, 235, 0.35); border-radius: 999px;
  padding: 0.18rem 0.6rem; cursor: pointer;
  font-family: inherit;
}
.tr-insight-jump:hover { background: rgba(37, 99, 235, 0.06); }

/* 注釈つき本格グラフ（該当区間の丸囲み＋矢印＋変化量をカード内のフルスケール Chart.js に重ねる） */
.tr-insight-chart {
  display: flex; flex-direction: column; gap: 0.35rem;
  margin-top: 0.15rem;
}
.tr-insight-chart-legend {
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  font-size: 0.7rem; color: var(--gray-600);
}
.tr-insight-chart-caption { font-weight: 700; color: var(--gray-700, #374151); }
.tr-leg-marker .tr-leg-ellipse {
  display: inline-block; width: 18px; height: 12px;
  border: 2px solid #d97706; border-radius: 999px; background: transparent;
}
.tr-insight-chart-wrap { position: relative; height: 230px; }
.tr-insight-featured .tr-insight-chart-wrap { height: 260px; }
@media (max-width: 900px) {
  .tr-insight-chart-wrap,
  .tr-insight-featured .tr-insight-chart-wrap { height: 220px; }
}

/* 統合タイムラインの番号バッジから飛んできたとき、該当カードを一瞬強調 */
.tr-insight-flash { animation: trInsightFlash 1.6s ease-out; }
@keyframes trInsightFlash {
  0% { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.45); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

/* 統合タイムライン: 共有x軸の縦積みパネル */
.tr-integrated {
  background: #fff; border: 1px solid var(--gray-200); border-radius: 10px;
  padding: 0.9rem 1rem;
}
.tr-lane-wrap { position: relative; height: 46px; }
.tr-panel-wrap { position: relative; }

/* 物件運営レポート（原本の形式）: 既定で展開・手動で閉じられる開閉ブロック */
.tr-raw { border-top: 2px solid var(--gray-200); padding-top: 0.7rem; }
.tr-raw summary {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none; user-select: none;
}
.tr-raw summary::-webkit-details-marker { display: none; }
.tr-raw-chevron { color: var(--gray-500, #6b7280); transition: transform 0.2s; }
.tr-raw[open] .tr-raw-chevron { transform: rotate(180deg); }
.tr-raw .tr-charts-2col { margin-top: 0.7rem; }
.tr-charts-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.tr-charts-2col .tr-chart-wrap { height: 230px; }

@media (max-width: 900px) {
  .tr-charts-2col { grid-template-columns: 1fr; }
}

/* ============================================================
   CRREM 脱炭素パスウェイ整合性セクション
   物件の炭素原単位を CRREM の国×用途パスウェイに重ねる。
   GIA・排出係数が未確定のうちは単一線ではなく帯（レンジ）で示す。
   ============================================================ */
.crrem-intro {
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--gray-700, #374151);
  margin: 0 0 1.25rem;
  max-width: 62rem;
}

/* 判定バナー */
.crrem-verdict {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  margin-bottom: 1.25rem;
}
.crrem-verdict.crrem-aligned {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}
.crrem-verdict.crrem-misaligned {
  background: #fef2f2;
  border: 1px solid #fecaca;
}
.crrem-verdict-mark { flex-shrink: 0; display: flex; }
.crrem-aligned .crrem-verdict-mark { color: #16a34a; }
.crrem-misaligned .crrem-verdict-mark { color: #dc2626; }
.crrem-verdict-head {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--gray-900, #111827);
}
.crrem-verdict-sub {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--gray-600, #4b5563);
  margin-top: 0.2rem;
}

/* 数値タイル */
.crrem-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.crrem-tile {
  padding: 0.875rem 1rem;
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 8px;
}
.crrem-tile-target { border-color: #bbf7d0; background: #f0fdf4; }
.crrem-tile-warn { border-color: #fecaca; background: #fef2f2; }
.crrem-tile-cap {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--gray-500, #6b7280);
  line-height: 1.4;
  margin-bottom: 0.35rem;
}
.crrem-tile-val {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--gray-900, #111827);
  line-height: 1.1;
}
.crrem-tile-target .crrem-tile-val { color: #15803d; }
.crrem-tile-warn .crrem-tile-val { color: #b91c1c; }
.crrem-tile-unit {
  font-size: 0.6875rem;
  color: var(--gray-500, #6b7280);
  margin-top: 0.2rem;
}

/* チャート */
.crrem-chart-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--gray-700, #374151);
  margin-bottom: 0.625rem;
}
.crrem-eui-head { margin-top: 2rem; }
.crrem-chart {
  position: relative;
  height: 320px;
  margin-bottom: 0.75rem;
}
.crrem-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: 0.75rem;
  color: var(--gray-600, #4b5563);
}
.crrem-lg { display: inline-flex; align-items: center; gap: 0.4rem; }
.crrem-sw {
  display: inline-block;
  width: 1.1rem;
  height: 0.5rem;
  border-radius: 2px;
}
.crrem-sw-band { background: rgba(124, 92, 187, 0.28); border: 1px solid rgba(124, 92, 187, 0.55); }
.crrem-sw-path { background: #16a34a; height: 0.2rem; }
.crrem-sw-flat {
  height: 0;
  border-top: 2px dashed #dc2626;
  border-radius: 0;
}

/* 前提・出典 */
.crrem-notes {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-200, #e5e7eb);
}
.crrem-notes-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gray-500, #6b7280);
  margin-bottom: 0.5rem;
}
.crrem-notes ul { list-style: none; margin: 0; padding: 0; }
.crrem-notes li {
  position: relative;
  padding: 0.2rem 0 0.2rem 0.9rem;
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--gray-600, #4b5563);
}
.crrem-notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gray-400, #9ca3af);
}
.crrem-attrib {
  margin: 0.75rem 0 0;
  font-size: 0.6875rem;
  color: var(--gray-500, #6b7280);
  font-style: italic;
}

@media (max-width: 900px) {
  .crrem-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .crrem-tiles { grid-template-columns: 1fr; }
  .crrem-chart { height: 260px; }
}

/* ── ① CRREM とは（初見の人向けの説明ブロック）────────────────── */
details.crrem-explain {
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 12px;
  padding: 0.875rem 1.375rem 1rem;
  margin-bottom: 1.5rem;
}
details.crrem-explain > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
details.crrem-explain > summary::-webkit-details-marker { display: none; }
/* 見出しは地域課題セクションの「?」ガイドと同じ視覚言語（risa-step-* を流用）。
   summary 内で使うため、余白だけこちらで打ち消す。 */
.crrem-ex-sum-head {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
}
.crrem-ex-sum-c {
  display: inline-flex;
  color: var(--gray-400, #9ca3af);
  transition: transform 0.15s ease;
}
details.crrem-explain[open] .crrem-ex-sum-c { transform: rotate(180deg); }
.crrem-ex-body {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-200, #e5e7eb);
}
.crrem-ex-lead {
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--gray-700, #374151);
  margin-bottom: 1.125rem;
}
/* CRREM 概念図（ARES/GRESB 等で使われる標準の見せ方）*/
.crrem-ex-fig {
  background: var(--white, #fff);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 10px;
  padding: 0.875rem 1rem 0.625rem;
}
.crrem-ex-fig svg {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
}
.crrem-ex-fig svg text { font-family: var(--sans, 'Inter', 'Noto Sans JP', sans-serif); }
.crrem-ex-figcap {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--gray-200, #e5e7eb);
  font-size: 0.6875rem;
  line-height: 1.6;
  color: var(--gray-500, #6b7280);
}
.crrem-glossary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.875rem;
  margin: 1.125rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-200, #e5e7eb);
}
.crrem-glossary dt {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gray-800, #1f2937);
  margin-bottom: 0.2rem;
}
.crrem-glossary dd {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.65;
  color: var(--gray-600, #4b5563);
}

/* ── ② 結論の強調数値とカウントダウンバー ─────────────────── */
.crrem-hl {
  font-size: 1.0625em;
  font-weight: 800;
  color: #b91c1c;
  padding: 0 0.1em;
}
.crrem-aligned .crrem-verdict-head .crrem-hl { color: #15803d; }
.crrem-countdown { margin: 0 0 1.5rem; }
.crrem-cd-track {
  position: relative;
  height: 0.75rem;
  border-radius: 999px;
  background: var(--gray-200, #e5e7eb);
  overflow: hidden;
}
.crrem-cd-ok {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, #22c55e, #16a34a);
}
.crrem-cd-ng {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  background-color: #fee2e2;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(220, 38, 38, 0.28) 4px, rgba(220, 38, 38, 0.28) 8px);
}
.crrem-cd-pin {
  position: absolute;
  top: -0.25rem; bottom: -0.25rem;
  width: 3px;
  margin-left: -1.5px;
  background: #b91c1c;
  border-radius: 2px;
}
/* 逸脱位置のラベルはバーの上に出す（左端の「いま」表記と衝突させない） */
.crrem-cd-flag {
  position: relative;
  height: 1.5rem;
  margin-bottom: 0.15rem;
}
.crrem-cd-flag-t {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 800;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 5px;
  padding: 1px 7px;
}
.crrem-cd-flag-t::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 0;
  height: 0;
  margin-left: -4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #fecaca;
}
/* 逸脱位置が両端に寄ると吹き出しがはみ出すので、寄せ方を切り替えて三角だけをピンに合わせる */
.crrem-cd-flag-l .crrem-cd-flag-t { transform: none; }
.crrem-cd-flag-l .crrem-cd-flag-t::after { left: 0; margin-left: 2px; }
.crrem-cd-flag-r .crrem-cd-flag-t { transform: translateX(-100%); }
.crrem-cd-flag-r .crrem-cd-flag-t::after { left: auto; right: 0; margin-left: 0; margin-right: 2px; }
.crrem-cd-axis {
  position: relative;
  height: 1.1rem;
  margin-top: 0.45rem;
  font-size: 0.6875rem;
  color: var(--gray-500, #6b7280);
}
.crrem-cd-ax-l { position: absolute; left: 0; }
.crrem-cd-ax-r { position: absolute; right: 0; }
.crrem-cd-key {
  display: flex;
  gap: 1.25rem;
  margin-top: 0.3rem;
  font-size: 0.6875rem;
  color: var(--gray-600, #4b5563);
}
.crrem-cd-k { display: inline-flex; align-items: center; gap: 0.4rem; }
.crrem-cd-k::before {
  content: "";
  width: 0.75rem;
  height: 0.5rem;
  border-radius: 2px;
}
.crrem-cd-k-ok::before { background: #16a34a; }
.crrem-cd-k-ng::before {
  background-color: #fee2e2;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(220, 38, 38, 0.45) 2px, rgba(220, 38, 38, 0.45) 4px);
}

/* 逸脱領域の凡例スウォッチ */
.crrem-sw-zone {
  background-color: rgba(220, 38, 38, 0.06);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(220, 38, 38, 0.3) 2px, rgba(220, 38, 38, 0.3) 4px);
}

/* ── ⑤ 打ち手の効き方 ───────────────────────────── */
.crrem-levers { margin-top: 2rem; }
.crrem-lv-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.crrem-lv-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.crrem-lv-table th {
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--gray-500, #6b7280);
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--gray-300, #d1d5db);
  white-space: nowrap;
}
.crrem-lv-table td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--gray-100, #f3f4f6);
  vertical-align: middle;
}
.crrem-lv-table tbody tr:hover { background: var(--gray-50, #f9fafb); }
.crrem-lv-emph { background: #fffdf5; }
.crrem-lv-emph:hover { background: #fffaeb; }
.crrem-lv-name { font-weight: 600; color: var(--gray-900, #111827); }
.crrem-mk {
  display: inline-block;
  width: 1.25rem;
  font-weight: 800;
  font-size: 0.9375rem;
  text-align: center;
  margin-right: 0.35rem;
}
.crrem-mk-best { color: #15803d; }
.crrem-mk-good { color: #0077a0; }
.crrem-mk-weak { color: #b45309; }
.crrem-mk-none { color: var(--gray-400, #9ca3af); }
.crrem-mk-t { font-size: 0.75rem; color: var(--gray-600, #4b5563); }
.crrem-lv-note {
  margin: 0.875rem 0 0;
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--gray-600, #4b5563);
  padding: 0.75rem 0.875rem;
  background: var(--gray-50, #f9fafb);
  border-radius: 6px;
}

/* ── 関連セクションへの導線 ─────────────────────────── */
.crrem-related {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin-top: 1.5rem;
  padding: 0.75rem 0.875rem;
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 8px;
}
.crrem-related-lbl {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gray-500, #6b7280);
}
.crrem-related-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--blue-600, #2563eb);
  text-decoration: none;
}
.crrem-related-link:hover { text-decoration: underline; }
.crrem-related-link svg { color: var(--gray-400, #9ca3af); }

/* ── ⑦ 前提・出典（折りたたみ）──────────────────────── */
details.crrem-notes > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
details.crrem-notes > summary::-webkit-details-marker { display: none; }
.crrem-notes-flag {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--amber-100, #fef3c7);
  color: var(--amber-700, #b45309);
}
.crrem-notes-more {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--gray-500, #6b7280);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
details.crrem-notes[open] > summary { margin-bottom: 0.625rem; }

@media (max-width: 900px) {
  .crrem-glossary { grid-template-columns: 1fr; gap: 0.75rem; }
}

/* --- Embed mode (?embed=1) ---
   EaSyGo ダッシュボード埋め込み用の機能。削除しないこと（Issue #285 / 親側 = ate-react-remix#2277）。
   iframe 埋め込み時はブランド表示・言語切替・目次ナビを親ダッシュボード側が担うため、
   自前ヘッダーと現在地追従ピルを隠し、純コンテンツのみ表示する。
   高さ調整は --header-h / --pill-h の変数上書きで行う（本文 padding-top・
   sticky 要素の top・目次オフセットが同変数参照のため自動追従する。
   個別要素の高さは直接いじらない。ヘッダー/ピル下に貼り付く要素を新設するときは
   93px 等をハードコードせず必ず calc(var(--header-h) + var(--pill-h)) を使うこと）。 */
body.is-embed {
  --header-h: 0px;
  --pill-h: 0px; /* ピル非表示のため、ピル分の余白・sticky オフセットも 0 に */
}
body.is-embed #siteHeader,
body.is-embed #tocCurrent { display: none !important; }
/* iframe 内スクロールが端に達したとき、親ページへスクロールが伝播（scroll chaining）
   すると、親側レイアウト次第で iframe が親の固定ヘッダー下に潜り込み得る。
   embed 時はチェーンを遮断し、スクロールを iframe 内で完結させる（docs/103 §3.2 の
   「スクロールは iframe 内部に委ねる」の徹底）。スクローラーは <html> のため
   html 側のクラス（app.js が body と同時に付与）に効かせる。 */
html.is-embed { overscroll-behavior-y: contain; }