/* ==========================================================================
   /article 共通スタイル。生の16進色はここでは使わず、必ず tokens.css の
   var(--...) を経由する(パレット差し替え時にこのファイルは無編集で済む)。
   Scope3 みえる化マップ(impact/index.html)とトーン・書体・角丸を統一。
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700;900&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=Fredoka:wght@400;500;600;700&display=swap');

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body.article-body, body.article-index-body{
  margin:0; color:var(--ink);
  font-family:var(--font-body); line-height:1.9; font-size:16px;
  -webkit-font-smoothing:antialiased;
  background:linear-gradient(180deg,var(--sky) 0%,var(--sky-2) 34%,var(--paper) 62%,var(--paper) 100%);
  background-attachment:fixed;
  min-height:100vh;
}
a{ color:var(--forest); text-decoration:none; }
a:hover{ text-decoration:underline; }
.wrap{ max-width:720px; margin:0 auto; padding:0 20px 80px; }

/* article body floats as a card over the fixed sky backdrop */
body.article-body .wrap{
  background:var(--card);
  margin-top:28px; margin-bottom:48px;
  border:2px solid #fff; border-radius:var(--r-lg);
  padding:8px clamp(20px,4vw,52px) 52px;
  box-shadow:var(--shadow);
}
@media (max-width:600px){
  body.article-body .wrap{ margin-top:16px; border-radius:var(--r-md); }
}

/* ---------------- header / footer(/article 共通) ---------------- */
header.uq-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.34);
  backdrop-filter:blur(20px) saturate(1.8); -webkit-backdrop-filter:blur(20px) saturate(1.8);
  border-bottom:1px solid rgba(255,255,255,.5);
  box-shadow:0 8px 24px rgba(47,58,43,.05);
}
header.uq-header .inner{
  max-width:960px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
header.uq-header .brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-heading); font-weight:900; font-size:1rem; color:var(--ink); text-decoration:none; }
header.uq-header .brand:hover{ text-decoration:none; }
header.uq-header .brand .logo{ width:32px; height:32px; flex:0 0 auto; filter:drop-shadow(0 3px 6px rgba(47,58,43,.14)); }
header.uq-header .brand .dot{ width:8px; height:8px; border-radius:50%; background:var(--leaf); }
header.uq-header nav.uq-nav{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
header.uq-header nav.uq-nav a{
  font-family:var(--font-heading); font-weight:700; font-size:13px; color:var(--ink);
  padding:8px 15px; border-radius:999px; background:rgba(255,255,255,.66);
  border:2px solid transparent; text-decoration:none; transition:.2s var(--ease);
}
header.uq-header nav.uq-nav a:hover{ background:#fff; border-color:var(--leaf); transform:translateY(-2px); text-decoration:none; }
header.uq-header nav.uq-nav a.cta-nav{ background:var(--forest); color:#fff; }
header.uq-header nav.uq-nav a.cta-nav:hover{ background:var(--leaf-deep); border-color:var(--honey); }

nav.uq-breadcrumb{ max-width:720px; margin:0 auto; padding:14px 20px 0; font-size:0.78rem; color:var(--ink-3); }
nav.uq-breadcrumb a{ color:var(--ink-3); text-decoration:none; }
nav.uq-breadcrumb a:hover{ color:var(--forest); text-decoration:underline; }
nav.uq-breadcrumb .sep{ margin:0 6px; color:var(--line); }
nav.uq-breadcrumb .current{ color:var(--ink); }

footer.uq-footer{ margin-top:64px; background:var(--paper-2); border-top:1px solid var(--line); }
footer.uq-footer .inner{ max-width:960px; margin:0 auto; padding:32px 20px; display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:center; }
footer.uq-footer nav{ display:flex; gap:16px; flex-wrap:wrap; }
footer.uq-footer a{ color:var(--ink-2); text-decoration:none; font-size:0.82rem; font-weight:700; font-family:var(--font-heading); }
footer.uq-footer a:hover{ color:var(--forest); }
footer.uq-footer .copy{ font-size:0.76rem; color:var(--ink-3); }

/* ---------------- index hero ----------------
   No background of its own — the fixed sky→paper gradient on
   body.article-index-body shows through here and continues
   unbroken into .uq-hub-nav / .uq-hub-section below, so the whole
   page reads as one continuous backdrop instead of two gradients
   stacked back-to-back. */
.uq-sky-band{ position:relative; overflow:hidden; }
.uq-sky-band .cloud{ position:absolute; color:#fff; opacity:.9; }
.uq-index-hero{ max-width:960px; margin:0 auto; padding:52px 20px 22px; position:relative; z-index:2; }
.uq-index-hero h1{ font-family:var(--font-heading); font-size:clamp(1.6rem,3.4vw,2.1rem); font-weight:900; margin:0 0 10px; }
.uq-index-hero p{ color:var(--ink-2); max-width:640px; margin:0; font-size:15px; line-height:1.9; }

.uq-hub-nav{ max-width:960px; margin:24px auto 0; padding:0 20px; display:flex; gap:8px; flex-wrap:wrap; }
.uq-hub-nav a{ font-family:var(--font-heading); font-size:0.78rem; font-weight:700; color:var(--forest); background:var(--card); border:2px solid var(--line); padding:7px 14px; border-radius:999px; text-decoration:none; transition:.2s var(--ease); }
.uq-hub-nav a:hover{ background:#fff; border-color:var(--leaf); transform:translateY(-2px); text-decoration:none; }

.uq-hub-section{ max-width:960px; margin:0 auto; padding:44px 20px 0; }
.uq-hub-section h2{ font-family:var(--font-heading); font-size:1.3rem; font-weight:900; margin:0 0 4px; padding-top:22px; border-top:1px solid var(--line); }
.uq-hub-section .hub-note{ color:var(--ink-3); font-size:0.82rem; margin:0 0 18px; }
.uq-card-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:18px; margin-top:18px; }
.uq-card{ display:block; border:2px solid #fff; border-radius:var(--r-lg); padding:20px 22px; text-decoration:none; color:var(--ink); background:var(--card); box-shadow:var(--shadow-sm); transition:.2s var(--ease); }
.uq-card:hover{ transform:translateY(-3px); border-color:var(--leaf); box-shadow:var(--shadow); text-decoration:none; }
.uq-card .cat{ display:inline-block; font-family:var(--font-heading); font-weight:700; font-size:11px; color:var(--leaf-deep); background:var(--sky); letter-spacing:.03em; padding:3px 10px; border-radius:999px; }
.uq-card h3{ font-family:var(--font-heading); font-size:1rem; font-weight:900; margin:12px 0 8px; line-height:1.6; }
.uq-card p{ font-size:0.82rem; color:var(--ink-2); margin:0; line-height:1.7; }
.uq-card.is-pending{ background:var(--paper-2); color:var(--ink-3); box-shadow:none; border-color:var(--line); }
.uq-card.is-pending h3{ color:var(--ink-3); }

/* ---------------- article-head / lede / meta ---------------- */
.article-head{ padding:44px 0 28px; border-bottom:1px solid var(--line); }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-heading); font-weight:700; font-size:0.78rem; letter-spacing:.1em; color:var(--leaf-deep); margin-bottom:16px; }
.eyebrow::before{ content:""; width:22px; height:3px; border-radius:2px; background:var(--honey); }
.article-head h1{ font-family:var(--font-heading); font-size:1.7rem; font-weight:900; margin:0 0 16px; line-height:1.55; text-wrap:balance; }
.meta{ font-size:0.82rem; color:var(--ink-3); display:flex; gap:14px; flex-wrap:wrap; font-family:var(--font-mono); font-feature-settings:"tnum" 1; }
.lede{ font-size:1.05rem; color:var(--ink-2); margin:22px 0 0; line-height:1.9; }

nav.toc{ background:var(--paper-2); border:2px solid var(--line); border-radius:var(--r-md); padding:18px 22px; margin:32px 0; }
nav.toc .title{ font-weight:700; font-size:0.85rem; color:var(--forest); margin-bottom:10px; font-family:var(--font-heading); }
nav.toc ol{ margin:0; padding-left:1.2em; font-size:0.9rem; }
nav.toc li{ margin-bottom:6px; }
nav.toc a{ color:var(--ink); text-decoration:none; }
nav.toc a:hover{ color:var(--forest); text-decoration:underline; }

/* ---------------- article body ---------------- */
article h2{ font-family:var(--font-heading); font-size:1.35rem; font-weight:900; margin:48px 0 18px; padding-top:10px; border-top:3px solid var(--honey); }
article h3{ font-family:var(--font-heading); font-size:1.08rem; font-weight:700; margin:26px 0 10px; color:var(--forest); }
article p{ margin:0 0 18px; }
article ul, article ol{ margin:0 0 18px; padding-left:1.4em; }
article li{ margin-bottom:8px; }
article sup{ font-size:0.75em; }
article strong{ color:var(--ink); }

.table-scroll{ overflow-x:auto; margin:0 0 20px; -webkit-overflow-scrolling:touch; }
.table-scroll table{ margin:0; min-width:480px; }
table{ width:100%; border-collapse:collapse; margin:20px 0; font-size:0.85rem; }
th, td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
th{ background:var(--paper-2); font-weight:700; color:var(--forest); font-family:var(--font-heading); }
td.num{ font-family:var(--font-mono); font-weight:700; color:var(--leaf-deep); white-space:nowrap; }

.stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1px; background:var(--line); border:2px solid var(--line); border-radius:var(--r-md); overflow:hidden; margin:24px 0; }
.stat-row .stat{ background:var(--card); padding:16px 14px; text-align:center; }
.stat-row .stat .n{ font-family:var(--font-mono); font-weight:700; font-size:1.3rem; color:var(--forest); }
.stat-row .stat .l{ font-size:0.74rem; color:var(--ink-3); margin-top:4px; }

.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:24px 0; }
.stat-card{ background:var(--paper-2); border:2px solid var(--line); border-radius:var(--r-md); padding:16px 18px; }
.stat-card .stat-num{ display:block; font-family:var(--font-mono); font-weight:700; font-size:1.5rem; color:var(--forest); line-height:1.2; margin-bottom:6px; }
.stat-card .stat-label{ display:block; font-size:0.78rem; color:var(--ink-3); line-height:1.6; }

.reason-card{ border:2px solid var(--line); border-radius:var(--r-md); padding:18px 20px; margin:0 0 14px; background:var(--card); }
.reason-card .num{ display:block; font-family:var(--font-mono); font-size:0.7rem; font-weight:700; letter-spacing:.08em; color:var(--leaf-deep); margin-bottom:6px; }
.reason-card h3{ margin:0 0 8px; font-size:1rem; }
.reason-card p:last-child{ margin-bottom:0; }

.case-card{ border:2px solid var(--line); border-left:4px solid var(--leaf); border-radius:var(--r-md); padding:18px 20px; margin:0 0 14px; background:var(--card); }
.case-card h3{ margin:0 0 4px; font-size:1rem; }
.case-card .case-sub{ display:block; font-family:var(--font-mono); font-size:0.72rem; color:var(--ink-3); margin-bottom:10px; }
.case-card p:last-child{ margin-bottom:0; }

.box{ border-radius:var(--r-md); padding:18px 20px; margin:24px 0; font-size:0.94rem; border:2px solid var(--line); }
.box-info{ background:linear-gradient(135deg,#EAF5F9,#D2EAF1); border-color:var(--sky-deep); }
.box-green{ background:linear-gradient(135deg,#F3FBEC,#EAF6E1); border-color:#BFE0A6; }
.box-amber{ background:linear-gradient(135deg,#FFF8E9,#FBEFD2); border-color:var(--honey); }
.box-info .label, .box-green .label, .box-amber .label{ font-weight:700; color:var(--forest); font-size:0.76rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; font-family:var(--font-heading); }

.cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
  background:radial-gradient(120% 140% at 85% 10%,#2E7A48,#1F5A34 60%,#1a4d2d); color:#EAF3E4;
  border-radius:var(--r-md); padding:26px 28px; margin:40px 0; }
.cta .txt h4{ margin:0 0 6px; font-size:1.05rem; font-family:var(--font-heading); color:#fff; }
.cta .txt p{ margin:0; font-size:0.86rem; color:#C6DCC0; }
.cta a.btn{ display:inline-block; background:var(--honey); color:#402c00; text-decoration:none; font-weight:700; font-family:var(--font-heading); font-size:0.88rem; padding:12px 22px; border-radius:999px; white-space:nowrap; box-shadow:0 5px 0 var(--honey-deep); transition:.2s var(--ease); }
.cta a.btn:hover{ background:var(--honey); transform:translateY(-2px); box-shadow:0 7px 0 var(--honey-deep); text-decoration:none; }

.series-nav{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:24px 0; }
.series-nav span{ font-size:0.76rem; color:var(--ink-3); }
.series-nav a{ font-size:0.76rem; font-weight:700; color:var(--forest); background:var(--paper-2); border:1px solid var(--line); padding:5px 12px; border-radius:999px; text-decoration:none; }
.series-nav a:hover{ background:#fff; border-color:var(--leaf); }

.sources{ margin-top:50px; padding-top:24px; border-top:1px solid var(--line); }
.sources h3{ font-size:0.95rem; color:var(--ink-3); margin-bottom:12px; font-family:var(--font-heading); }
.sources ol{ font-size:0.84rem; color:var(--ink-3); padding-left:1.3em; }
.sources li{ margin-bottom:8px; }
.sources a{ color:var(--forest); }

.disclaimer{ margin-top:28px; padding:16px 18px; border-radius:var(--r-sm); background:var(--paper-2); font-size:0.78rem; color:var(--ink-3); border:1px solid var(--line); }

.author-box{ margin-top:28px; display:flex; gap:14px; align-items:flex-start; padding:18px; background:var(--card); border:2px solid #fff; box-shadow:var(--shadow-sm); border-radius:var(--r-sm); }
.author-box .av{ width:44px; height:44px; border-radius:50%; background:var(--forest); flex-shrink:0; }
.author-box .name{ font-weight:700; font-size:0.9rem; font-family:var(--font-heading); }
.author-box .role{ font-size:0.78rem; color:var(--ink-3); }

/* ---------------- 追加ブロック(生成時にのみ挿入。原文spanの外側) ---------------- */
.uq-pillar-link{ margin-top:32px; padding:18px 20px; border-radius:var(--r-sm); background:linear-gradient(135deg,#EAF5F9,#D2EAF1); border:2px solid var(--sky-deep); display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.uq-pillar-link .lbl{ font-size:0.74rem; color:var(--forest); font-weight:700; font-family:var(--font-heading); text-transform:uppercase; letter-spacing:.05em; }
.uq-pillar-link a{ font-weight:700; color:var(--forest); text-decoration:none; }
.uq-pillar-link a:hover{ text-decoration:underline; }

.uq-related{ margin-top:32px; }
.uq-related h3{ font-family:var(--font-heading); font-size:0.95rem; color:var(--ink-3); margin-bottom:14px; }
.uq-related ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.uq-related li a{ display:block; padding:14px 16px; border:2px solid var(--line); border-radius:var(--r-sm); color:var(--ink); text-decoration:none; font-size:0.9rem; background:var(--card); transition:.2s var(--ease); }
.uq-related li a:hover{ border-color:var(--leaf); transform:translateY(-2px); text-decoration:none; }

.uq-series-strip{ margin-top:32px; padding:20px; border-radius:var(--r-md); background:var(--paper-2); border:2px solid var(--line); }
.uq-series-strip h3{ font-family:var(--font-heading); font-size:0.9rem; color:var(--forest); margin:0 0 12px; }
.uq-series-strip ol{ list-style:none; margin:0; padding:0; counter-reset:series; display:grid; gap:8px; }
.uq-series-strip li{ counter-increment:series; }
.uq-series-strip li a, .uq-series-strip li .current{ display:flex; gap:10px; align-items:baseline; padding:8px 10px; border-radius:var(--r-sm); text-decoration:none; font-size:0.86rem; }
.uq-series-strip li a{ color:var(--ink); }
.uq-series-strip li a:hover{ background:#fff; text-decoration:none; }
.uq-series-strip li .current{ color:var(--forest); font-weight:700; background:#fff; }
.uq-series-strip li a::before, .uq-series-strip li .current::before{ content: counter(series); flex:0 0 auto; width:20px; height:20px; border-radius:50%; background:var(--forest); color:#fff; font-size:0.72rem; font-family:var(--font-mono); display:flex; align-items:center; justify-content:center; }

/* ---------------- badges ---------------- */
.badge-pillar{ display:inline-block; font-family:var(--font-heading); font-size:0.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#5a3d00; background:var(--honey); padding:2px 9px; border-radius:999px; margin-left:8px; vertical-align:middle; }

/* ---------------- responsive ---------------- */
@media (max-width: 600px){
  .wrap{ padding:0 16px 60px; }
  .article-head{ padding:32px 0 22px; }
  .article-head h1{ font-size:1.34rem; }
  header.uq-header .inner{ padding:12px 16px; }
  footer.uq-footer .inner{ padding:26px 16px; flex-direction:column; align-items:flex-start; }
  .cta{ flex-direction:column; align-items:flex-start; }
  .uq-index-hero, .uq-hub-nav, .uq-hub-section{ padding-left:16px; padding-right:16px; }
  .uq-card-grid{ grid-template-columns:1fr; }
}