/* =========================================================
   観測 KANSOKU — Design System
   明るい基調（生成りの紙）＋ OS設定に追従するダークモード
   図解SVGは var(--viz-*) を参照するので、色は自動で切り替わる
   ========================================================= */

:root{
  /* --- surface --- */
  --bg:        #fbfaf7;   /* 生成り。純白より目が疲れにくい */
  --bg-2:      #f4f2ed;
  --surface:   #ffffff;
  --surface-2: #f7f5f1;
  --line:      rgba(20,24,31,.12);
  --line-2:    rgba(20,24,31,.22);

  /* --- ink --- 本文は #14181F。生成り地に対して約15:1 */
  --ink:       #14181f;
  --ink-2:     #4a5361;
  --ink-3:     #6e7788;

  /* --- accent --- */
  --indigo:    #1b5e8c;   /* 藍。リンク・主役 */
  --indigo-d:  #144a6f;
  --terra:     #c4553b;   /* テラコッタ */
  --green:     #2f7a52;
  --amber:     #a8701a;
  --violet:    #6b4e9e;

  /* --- 図解用（SVGから参照） --- */
  --viz-1:     #1b5e8c;
  --viz-2:     #2f7a52;
  --viz-3:     #c4553b;
  --viz-4:     #a8701a;
  --viz-5:     #6b4e9e;
  --viz-ink:   #14181f;
  --viz-ink2:  #4a5361;
  --viz-muted: #6e7788;
  --viz-mute2: #9aa3b2;
  --viz-line:  #d8d4cc;
  --viz-line2: #e8e5df;
  --viz-glow:  rgba(27,94,140,.10);

  /* --- type --- */
  --f-display: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-body:    "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", -apple-system, sans-serif;
  --f-mono:    "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* --- layout --- */
  --w-text:    720px;
  --w-wide:    1040px;
  --w-full:    1280px;
  --r:         12px;
  --r-lg:      18px;

  --shadow:    0 1px 2px rgba(20,24,31,.05), 0 8px 24px rgba(20,24,31,.06);
  --shadow-lg: 0 2px 4px rgba(20,24,31,.06), 0 18px 44px rgba(20,24,31,.12);

  --ease: cubic-bezier(.22,1,.36,1);
}

/* =========================================================
   ダークモード（OSの設定に追従）
   ========================================================= */
@media (prefers-color-scheme: dark){
  :root{
    --bg:        #0e1116;
    --bg-2:      #12161d;
    --surface:   #161a21;
    --surface-2: #1c212a;
    --line:      rgba(237,240,245,.12);
    --line-2:    rgba(237,240,245,.24);

    --ink:       #edf0f5;
    --ink-2:     #aab3c1;
    --ink-3:     #7d8695;

    --indigo:    #5ab3e8;
    --indigo-d:  #8fd0f5;
    --terra:     #e8836a;
    --green:     #58c48c;
    --amber:     #e0a942;
    --violet:    #a98ce0;

    --viz-1:     #5ab3e8;
    --viz-2:     #58c48c;
    --viz-3:     #e8836a;
    --viz-4:     #e0a942;
    --viz-5:     #a98ce0;
    --viz-ink:   #edf0f5;
    --viz-ink2:  #aab3c1;
    --viz-muted: #7d8695;
    --viz-mute2: #5d6675;
    --viz-line:  #2a303a;
    --viz-line2: #222831;
    --viz-glow:  rgba(90,179,232,.14);

    --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --shadow-lg: 0 2px 4px rgba(0,0,0,.4), 0 18px 44px rgba(0,0,0,.5);
  }
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:86px;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.95;
  font-feature-settings:"palt" 1;
  letter-spacing:.015em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* 背景の淡い色味。主張しすぎない程度に */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(760px 520px at 8% -6%,  var(--viz-glow), transparent 62%),
    radial-gradient(680px 480px at 96% 2%,  rgba(196,85,59,.06), transparent 60%);
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}

img,svg,video,iframe{ max-width:100%; }
img{ height:auto; display:block; }
a{ color:inherit; }

::selection{ background:var(--indigo); color:#fff; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:60;
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  border-bottom:1px solid var(--line);
}
.site-header__in{
  max-width:var(--w-full); margin:0 auto;
  padding:0 24px; height:64px;
  display:flex; align-items:center; gap:28px;
}
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:0 0 auto; }
.brand__mark{ width:30px; height:30px; flex:0 0 auto; }
.brand__name{
  font-family:var(--f-display); font-weight:800;
  font-size:21px; letter-spacing:.16em; line-height:1;
}
.brand__sub{
  font-family:var(--f-mono); font-size:9.5px;
  letter-spacing:.28em; color:var(--ink-3);
  display:block; margin-top:4px;
}
.nav{ display:flex; gap:2px; margin-left:auto; align-items:center; }
.nav a{
  font-size:13.5px; letter-spacing:.06em; color:var(--ink-2);
  text-decoration:none; padding:8px 13px; border-radius:999px;
  transition:color .2s, background .2s;
  /* これが無いと、幅が足りないときに flex で潰されて
     日本語が1文字ずつ縦に折り返される */
  white-space:nowrap;
  flex:0 0 auto;
}
.nav a:hover{ color:var(--ink); background:var(--surface-2); }
.nav a.is-cta{
  color:#fff; background:var(--indigo); font-weight:700;
}
.nav a.is-cta:hover{ background:var(--indigo-d); color:#fff; }
@media (prefers-color-scheme: dark){
  .nav a.is-cta{ color:#0e1116; }
  .nav a.is-cta:hover{ color:#0e1116; }
}
/* リンクが6本あるので、860pxでは間に合わない。
   入りきらなくなる手前でカテゴリから順に畳む。 */
@media (max-width:1120px){
  .nav a[href^="#bio"], .nav a[href^="#space"], .nav a[href^="#brain"],
  .nav a[href^="#tech"], .nav a[href*="#bio"], .nav a[href*="#space"],
  .nav a[href*="#brain"], .nav a[href*="#tech"]{ display:none; }
}

/* ---------- ハンバーガー ---------- */
.navtoggle{
  display:none; margin-left:auto;
  width:44px; height:44px; padding:0;
  border:1px solid var(--line-2); border-radius:10px;
  background:var(--surface); cursor:pointer;
  align-items:center; justify-content:center;
}
.navtoggle:hover{ border-color:var(--indigo); }
.navtoggle span{
  display:block; position:relative;
  width:19px; height:2px; border-radius:2px; background:var(--ink);
  transition:transform .25s var(--ease), background .1s;
}
.navtoggle span::before,
.navtoggle span::after{
  content:""; position:absolute; left:0;
  width:19px; height:2px; border-radius:2px; background:var(--ink);
  transition:transform .25s var(--ease), top .25s var(--ease);
}
.navtoggle span::before{ top:-6px; }
.navtoggle span::after{ top:6px; }
.navtoggle[aria-expanded="true"] span{ background:transparent; }
.navtoggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.navtoggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

@media (max-width:820px){
  .brand__sub{ display:none; }
  .navtoggle{ display:flex; }

  .nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    margin:0; padding:8px 16px 16px;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lg);
    /* 閉じている間は完全に隠す。visibility も切らないと
       画面外のリンクにタブで入れてしまう */
    max-height:0; overflow:hidden; visibility:hidden;
    transition:max-height .3s var(--ease), visibility 0s .3s;
  }
  .nav.is-open{
    max-height:min(78vh, 520px); overflow-y:auto; visibility:visible;
    transition:max-height .3s var(--ease), visibility 0s;
  }
  /* PC用に畳んでいたカテゴリは、メニュー内では見せる */
  .nav a{
    display:block !important;
    padding:14px 12px; border-radius:10px;
    font-size:16px; border-bottom:1px solid var(--line);
  }
  .nav a:last-child{ border-bottom:0; }
  .nav a.is-cta{ margin-top:10px; text-align:center; }
  .nav a.is-sister{ border:1px solid var(--line-2); margin-top:10px; text-align:center; }
}
@media (max-width:600px){
  .site-header__in{ gap:12px; }
}

/* ---------- 上へ戻る ---------- */
.totop{
  position:fixed; right:20px; bottom:20px; z-index:55;
  width:48px; height:48px; border-radius:50%;
  border:1px solid var(--line-2); background:var(--surface);
  color:var(--indigo); cursor:pointer;
  display:grid; place-items:center;
  box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s var(--ease), transform .25s var(--ease),
             visibility 0s .25s, border-color .2s;
}
.totop.is-shown{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease),
             visibility 0s, border-color .2s;
}
.totop:hover{ border-color:var(--indigo); background:var(--surface-2); }
.totop svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:600px){
  .totop{ right:14px; bottom:14px; width:44px; height:44px; }
}

/* 読了プログレス */
.progress{
  position:fixed; top:0; left:0; height:3px; z-index:70;
  width:0%;
  background:var(--indigo);
  transition:width .1s linear;
}


/* 広告について（2026-08-10）
   AdSense管理画面のページ除外で /science/ 配下を自動広告の対象外にしてある。
   そのため、このサイトに出る広告は下の .adslot（ヘッダー直下と記事下）の
   手動ユニット2枠だけ。自動広告がヘッダーに枠を差し込むことは無くなった。

   もし将来この除外を解除するなら注意。自動広告はヘッダーの flex 行に
   898x300 の枠を差し込み、sticky ヘッダーが 300px に膨らんで
   ページが横スクロールする（実測: scrollWidth 1436px / clientWidth 946px）。
   その場合はヘッダーを flex から組み直す必要がある。 */

.adslot--top{
  border-bottom:1px solid var(--line);
  background:var(--surface);
  padding:10px 24px;
  min-height:0;
}

/* =========================================================
   共通パーツ
   ========================================================= */
.wrap{ max-width:var(--w-full); margin:0 auto; padding:0 24px; }
.wrap--wide{ max-width:var(--w-wide); }
.wrap--text{ max-width:var(--w-text); }

.eyebrow{
  font-family:var(--f-mono); font-size:11px;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--indigo); margin:0 0 14px;
  display:flex; align-items:center; gap:11px; font-weight:700;
}
.eyebrow::before{ content:""; width:24px; height:2px; background:var(--indigo); }

.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:700;
  letter-spacing:.08em; padding:4px 11px;
  border:1px solid var(--line-2); border-radius:999px;
  color:var(--ink-2); text-decoration:none;
  background:var(--surface);
  transition:.2s;
}
.tag:hover{ border-color:var(--indigo); color:var(--indigo); }
.tag--bio    { border-color:var(--green);  color:var(--green); }
.tag--space  { border-color:var(--violet); color:var(--violet); }
.tag--brain  { border-color:var(--terra);  color:var(--terra); }
.tag--physics{ border-color:var(--amber);  color:var(--amber); }

/* =========================================================
   HERO
   ========================================================= */
.hero{ padding:84px 0 64px; }
.hero__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:52px; align-items:center; }
@media (max-width:940px){
  .hero{ padding:52px 0 40px; }
  .hero__grid{ grid-template-columns:1fr; gap:32px; }
}
.hero h1{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(32px,5.2vw,60px); line-height:1.34;
  margin:0 0 22px; color:var(--ink);
}
.hero h1 .hl{
  background:linear-gradient(180deg,transparent 64%, color-mix(in srgb, var(--amber) 38%, transparent) 64%);
  padding:0 .06em;
}
.hero h1 .num{
  font-family:var(--f-mono); font-weight:700;
  color:var(--indigo); letter-spacing:-.02em;
}
.hero p{ font-size:16px; color:var(--ink-2); max-width:52ch; margin:0 0 30px; }
.hero__actions{ display:flex; gap:12px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 24px; border-radius:999px;
  font-size:14.5px; font-weight:700; letter-spacing:.04em;
  text-decoration:none; border:1.5px solid transparent;
  transition:.24s var(--ease);
}
.btn--primary{ background:var(--indigo); color:#fff; box-shadow:var(--shadow); }
.btn--primary:hover{ background:var(--indigo-d); transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn--ghost{ border-color:var(--line-2); color:var(--ink); background:var(--surface); }
.btn--ghost:hover{ border-color:var(--indigo); color:var(--indigo); }
@media (prefers-color-scheme: dark){
  .btn--primary{ color:#0e1116; }
  .btn--primary:hover{ color:#0e1116; }
}

.hero__viz{ position:relative; aspect-ratio:1/1; }
.hero__viz svg{ width:100%; height:100%; }

/* =========================================================
   統計ストリップ
   ========================================================= */
.strip{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); }
.strip__in{
  max-width:var(--w-full); margin:0 auto; padding:26px 24px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
@media (max-width:760px){ .strip__in{ grid-template-columns:repeat(2,1fr); } }
.stat{ text-align:center; }
.stat__n{
  font-family:var(--f-mono); font-size:clamp(21px,3.2vw,30px);
  font-weight:700; color:var(--indigo); line-height:1.2; letter-spacing:-.02em;
}
.stat__l{ font-size:12px; color:var(--ink-2); letter-spacing:.06em; margin-top:5px; }

/* =========================================================
   セクション見出し
   ========================================================= */
.sec{ padding:72px 0; }
.sec__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; margin-bottom:32px; flex-wrap:wrap;
}
.sec__title{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(24px,3.4vw,34px); margin:0; line-height:1.4;
}
.sec__more{ font-size:13.5px; color:var(--indigo); text-decoration:none; white-space:nowrap; font-weight:700; }
.sec__more:hover{ text-decoration:underline; }

/* =========================================================
   記事カード
   ========================================================= */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px; }
.card{
  position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  text-decoration:none; color:inherit;
  box-shadow:var(--shadow);
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.card:hover{ transform:translateY(-4px); border-color:var(--line-2); box-shadow:var(--shadow-lg); }
.card__viz{
  aspect-ratio:16/9; position:relative;
  background:var(--surface-2); border-bottom:1px solid var(--line);
  overflow:hidden;
}
.card__viz svg{ position:absolute; inset:0; width:100%; height:100%; }
.card__body{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:11px; flex:1; }
.card__title{
  font-family:var(--f-display); font-weight:800;
  font-size:19.5px; line-height:1.55; margin:0; transition:color .2s;
}
.card:hover .card__title{ color:var(--indigo); }
.card__ex{ font-size:13.5px; color:var(--ink-2); line-height:1.85; margin:0; }
.card__meta{
  margin-top:auto; padding-top:12px;
  display:flex; align-items:center; gap:9px;
  font-family:var(--f-mono); font-size:11px; color:var(--ink-3);
}

.card--lead{ grid-column:span 2; }
.card--lead .card__viz{ aspect-ratio:21/9; }
.card--lead .card__title{ font-size:26px; }
@media (max-width:760px){ .card--lead{ grid-column:span 1; } }

.badge-new{
  position:absolute; top:14px; left:14px; z-index:2;
  font-size:10.5px; letter-spacing:.14em; font-weight:700;
  padding:5px 11px; border-radius:999px;
  background:var(--terra); color:#fff;
}

/* =========================================================
   記事本文
   ========================================================= */
.article{ padding:48px 0 40px; }
.article__head{ max-width:var(--w-text); margin:0 auto 40px; }
.article__cat{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.article__title{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(27px,4.4vw,46px); line-height:1.44;
  margin:0 0 20px;
}
.article__lede{
  font-size:17px; color:var(--ink-2); line-height:2.05;
  margin:0 0 26px; padding:16px 20px;
  border-left:3px solid var(--indigo);
  background:var(--surface); border-radius:0 var(--r) var(--r) 0;
}
.article__meta{
  display:flex; gap:18px; flex-wrap:wrap; align-items:center;
  font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3);
  padding-top:18px; border-top:1px solid var(--line);
}

/* 本文タイポ */
.prose{ max-width:var(--w-text); margin:0 auto; }
.prose > *{ margin-left:auto; margin-right:auto; }

.prose h2{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(22px,3.2vw,30px); line-height:1.5;
  margin:72px 0 22px; padding-top:26px;
  border-top:2px solid var(--line); position:relative;
}
.prose h2::before{
  content:attr(data-n);
  position:absolute; top:-10px; left:0;
  font-family:var(--f-mono); font-size:10.5px; font-weight:700;
  letter-spacing:.22em; color:var(--indigo);
  background:var(--bg); padding-right:14px;
}
.prose h3{
  font-family:var(--f-body); font-weight:700;
  font-size:19px; line-height:1.7;
  margin:42px 0 14px; color:var(--ink);
  padding-left:13px; border-left:4px solid var(--green);
}
.prose p{ margin:0 0 26px; }
.prose strong{
  font-weight:700; color:var(--ink);
  background:linear-gradient(180deg,transparent 62%, color-mix(in srgb, var(--amber) 34%, transparent) 62%);
  padding:0 .06em;
}
.prose a{
  color:var(--indigo); text-decoration:none;
  border-bottom:1.5px solid color-mix(in srgb, var(--indigo) 40%, transparent);
  transition:.2s;
}
.prose a:hover{ border-bottom-color:var(--indigo); background:color-mix(in srgb, var(--indigo) 8%, transparent); }
.prose ul,.prose ol{ margin:0 0 26px; padding-left:1.3em; }
.prose li{ margin-bottom:11px; }
.prose li::marker{ color:var(--indigo); }

.prose .drop::first-letter{
  font-family:var(--f-display); font-size:3.1em;
  float:left; line-height:.86; margin:.08em .12em 0 0;
  color:var(--indigo);
}

/* 引用 */
.pull{
  margin:40px auto; padding:28px 30px;
  border:1px solid var(--line); border-left:4px solid var(--indigo);
  border-radius:0 var(--r) var(--r) 0;
  background:var(--surface);
  font-family:var(--f-display); font-size:20px; line-height:1.85;
  color:var(--ink);
}
.pull cite{
  display:block; margin-top:14px;
  font-family:var(--f-mono); font-size:11.5px; font-style:normal;
  letter-spacing:.06em; color:var(--ink-3);
}

/* 補足ボックス */
.box{
  margin:34px auto; padding:22px 24px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); box-shadow:var(--shadow);
}
.box__t{
  font-size:12.5px; font-weight:700; letter-spacing:.1em;
  color:var(--green); margin:0 0 12px;
}
.box p:last-child{ margin-bottom:0; }
.box--warn{ border-color:color-mix(in srgb, var(--amber) 45%, transparent); }
.box--warn .box__t{ color:var(--amber); }

/* =========================================================
   インフォグラフィック
   ========================================================= */
.fig{
  margin:48px auto; max-width:var(--w-wide);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); overflow:hidden;
  box-shadow:var(--shadow);
}
.fig__head{ padding:22px 26px 0; }
.fig__n{
  font-family:var(--f-mono); font-size:10.5px; font-weight:700;
  letter-spacing:.22em; color:var(--indigo); margin:0 0 8px;
}
.fig__t{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(18px,2.6vw,23px); line-height:1.5; margin:0;
}
.fig__body{ padding:18px 22px 8px; }
.fig__body svg{ width:100%; height:auto; display:block; }
.fig figcaption{
  padding:14px 26px 22px; margin:0;
  font-size:12.5px; line-height:1.85; color:var(--ink-2);
  border-top:1px solid var(--line); background:var(--surface-2);
}
.fig figcaption b{ color:var(--ink); font-weight:700; }

/* 数字カード */
.numgrid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:14px; margin:38px auto; max-width:var(--w-wide);
}
.numcard{
  padding:20px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--surface);
  position:relative; overflow:hidden; box-shadow:var(--shadow);
}
.numcard::after{ content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--viz-1); }
.numcard__n{
  font-family:var(--f-mono); font-weight:700;
  font-size:clamp(23px,3.4vw,32px); line-height:1.15;
  color:var(--viz-1); letter-spacing:-.025em;
}
.numcard__n small{ font-size:.46em; color:var(--ink-2); margin-left:3px; letter-spacing:0; }
.numcard__l{ font-size:12.5px; color:var(--ink-2); margin-top:8px; line-height:1.7; }
.numcard:nth-child(2)::after{ background:var(--viz-2); }
.numcard:nth-child(2) .numcard__n{ color:var(--viz-2); }
.numcard:nth-child(3)::after{ background:var(--viz-3); }
.numcard:nth-child(3) .numcard__n{ color:var(--viz-3); }
.numcard:nth-child(4)::after{ background:var(--viz-4); }
.numcard:nth-child(4) .numcard__n{ color:var(--viz-4); }

/* =========================================================
   埋め込み（X / YouTube）
   ========================================================= */
.embed{ margin:40px auto; max-width:var(--w-text); }
.embed__label{
  font-size:12px; font-weight:700; letter-spacing:.1em;
  color:var(--ink-3); margin:0 0 12px;
  display:flex; align-items:center; gap:9px;
}
.embed__label::before{ content:""; width:18px; height:2px; background:var(--line-2); }
.embed .twitter-tweet{ margin:0 auto !important; }

/* widgets.js が読めない環境でも中身が読めるようにする。
   埋め込み成功時は widgets.js が blockquote を display:none にするので、
   このスタイルはフォールバック時にだけ見える。 */
blockquote.twitter-tweet:not(.twitter-tweet-rendered){
  display:block; margin:0 auto; padding:22px 24px; max-width:550px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); box-shadow:var(--shadow); position:relative;
  font-size:15px; line-height:1.85; color:var(--ink-2);
}
blockquote.twitter-tweet:not(.twitter-tweet-rendered)::before{
  content:"𝕏"; position:absolute; top:16px; right:20px;
  font-size:18px; color:var(--ink-3);
}
blockquote.twitter-tweet:not(.twitter-tweet-rendered) p{
  margin:0 0 14px; padding-right:28px; color:var(--ink);
}
blockquote.twitter-tweet:not(.twitter-tweet-rendered) a{
  display:inline-block; margin-top:6px;
  font-size:13px; font-weight:700;
  color:var(--indigo); text-decoration:none;
  border-bottom:1.5px solid color-mix(in srgb, var(--indigo) 40%, transparent);
}
blockquote.twitter-tweet:not(.twitter-tweet-rendered) a:hover{ border-bottom-color:var(--indigo); }

.yt{
  position:relative; aspect-ratio:16/9;
  border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); background:var(--surface-2);
}
.yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt--lazy{ cursor:pointer; }
.yt--lazy img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:.3s; }
.yt--lazy:hover img{ transform:scale(1.03); }
.yt__play{
  position:absolute; inset:0; margin:auto;
  width:68px; height:68px; border-radius:50%;
  background:#ff0033; border:0; cursor:pointer;
  display:grid; place-items:center;
  box-shadow:0 6px 24px rgba(0,0,0,.35);
  transition:.24s var(--ease);
}
.yt--lazy:hover .yt__play{ transform:scale(1.1); }
.yt__play svg{ width:26px; height:26px; margin-left:4px; fill:#fff; }
.yt__cap{ margin-top:11px; font-size:12.5px; color:var(--ink-2); line-height:1.8; }
.yt__cap b{ color:var(--ink); font-weight:700; }

/* =========================================================
   目次
   ========================================================= */
.toc{
  max-width:var(--w-text); margin:0 auto 48px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); padding:22px 26px; box-shadow:var(--shadow);
}
.toc__t{
  font-family:var(--f-mono); font-size:11px; font-weight:700;
  letter-spacing:.2em; color:var(--indigo); margin:0 0 14px;
}
.toc ol{ margin:0; padding-left:0; list-style:none; counter-reset:toc; }
.toc li{ margin-bottom:9px; counter-increment:toc; }
.toc a{
  display:flex; gap:12px; font-size:14.5px; color:var(--ink-2);
  text-decoration:none; transition:.2s;
}
.toc a::before{
  content:counter(toc,decimal-leading-zero);
  font-family:var(--f-mono); font-size:11px; color:var(--ink-3);
  flex:0 0 auto; padding-top:3px;
}
.toc a:hover{ color:var(--indigo); }

/* =========================================================
   出典
   ========================================================= */
.refs{ max-width:var(--w-text); margin:60px auto 0; padding-top:28px; border-top:2px solid var(--line); }
.refs h2{
  font-family:var(--f-mono); font-size:12px; font-weight:700;
  letter-spacing:.2em; color:var(--ink-3); margin:0 0 18px; border:0; padding:0;
}
.refs h2::before{ display:none; }
.refs ol{ padding-left:1.3em; font-size:13.5px; line-height:1.95; color:var(--ink-2); }
.refs li{ margin-bottom:10px; }
.refs a{ color:var(--indigo); text-decoration:none; border-bottom:1px solid var(--line-2); word-break:break-all; }
.refs a:hover{ border-bottom-color:var(--indigo); }

/* シェア */
.share{ max-width:var(--w-text); margin:44px auto 0; display:flex; gap:11px; align-items:center; flex-wrap:wrap; }
.share__t{ font-family:var(--f-mono); font-size:11px; font-weight:700; letter-spacing:.16em; color:var(--ink-3); margin-right:4px; }
.share a{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:999px;
  border:1.5px solid var(--line-2); color:var(--ink-2);
  background:var(--surface);
  font-size:13.5px; font-weight:700; text-decoration:none;
  transition:.24s var(--ease);
}
.share a:hover{ border-color:var(--indigo); color:var(--indigo); transform:translateY(-2px); }
.share svg{ width:15px; height:15px; fill:currentColor; }

/* =========================================================
   姉妹サイト導線
   ========================================================= */
.nav a.is-sister{
  border:1.5px solid var(--line-2);
  color:var(--ink-2); font-weight:700;
}
.nav a.is-sister:hover{ border-color:var(--terra); color:var(--terra); background:transparent; }

.sister{
  display:grid; grid-template-columns:1fr 240px; gap:28px; align-items:center;
  padding:30px 34px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--surface);
  box-shadow:var(--shadow); text-decoration:none; color:inherit;
  transition:transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.sister:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--terra); }
@media (max-width:760px){ .sister{ grid-template-columns:1fr; gap:16px; } .sister__viz{ display:none; } }
.sister__eyebrow{
  font-family:var(--f-mono); font-size:10.5px; font-weight:700;
  letter-spacing:.24em; color:var(--terra); margin:0 0 10px;
}
.sister__title{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(21px,3vw,27px); margin:0 0 10px; line-height:1.45;
}
.sister__ex{ font-size:14px; color:var(--ink-2); margin:0 0 14px; line-height:1.9; }
.sister__cta{ font-size:14px; font-weight:700; color:var(--terra); }
.sister:hover .sister__cta{ text-decoration:underline; }
.sister__viz svg{ width:100%; height:auto; }

/* =========================================================
   広告枠
   ========================================================= */
.adslot{
  max-width:var(--w-wide); margin:0 auto; padding:8px 0;
  min-height:100px; overflow:hidden;
}
.adslot ins{ display:block; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ margin-top:96px; border-top:1px solid var(--line); background:var(--surface); }
.site-footer__in{
  max-width:var(--w-full); margin:0 auto; padding:52px 24px 36px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;
}
@media (max-width:760px){ .site-footer__in{ grid-template-columns:1fr; gap:28px; } }
.site-footer h4{
  font-family:var(--f-mono); font-size:11px; font-weight:700;
  letter-spacing:.2em; color:var(--ink-3); margin:0 0 14px;
}
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ margin-bottom:9px; }
.site-footer a{ font-size:13.5px; color:var(--ink-2); text-decoration:none; }
.site-footer a:hover{ color:var(--indigo); }
.site-footer__note{ font-size:13px; color:var(--ink-2); line-height:1.9; max-width:40ch; }
.copy{
  border-top:1px solid var(--line); padding:18px 24px;
  text-align:center; font-family:var(--f-mono);
  font-size:10.5px; letter-spacing:.12em; color:var(--ink-3);
}

/* =========================================================
   アニメーション
   ========================================================= */
.reveal{ opacity:0; transform:translateY(18px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.spark{ animation:spark 2.8s ease-in-out infinite; transform-origin:center; }
@keyframes spark{ 0%,100%{opacity:.45} 50%{opacity:1} }
.dash{ stroke-dasharray:5 7; animation:dash 1.6s linear infinite; }
@keyframes dash{ to{ stroke-dashoffset:-24; } }