@charset "utf-8";
/* ===========================================================
   論文でわかる知的雑学 — 本番の見た目
   見本 B2「夜の書見（改訂）」（site/design/b2-yomi.html）から
   色・書体・組み方を引き継ぐ。記事／本棚／運営者／トップの4種類に効く。
   =========================================================== */

:root{
  --night:  #10292E;  /* 深川：地 */
  --deep:   #17383C;  /* 藍鉄：図と引用の面 */
  --text:   #E4EEE3;  /* 白緑：本文 */
  --mint:   #DDF1DA;  /* 若苗：タヌキの緑。見出し */
  --sand:   #D7B87A;  /* 枯草：0 の線と PR のしるし */
  --muted:  #7FA79E;  /* 錆浅葱：補助の文字 */

  --line:      rgba(228,238,227,.16);
  --line-soft: rgba(127,167,158,.40);
  --line-sand: rgba(215,184,122,.45);
  --dot-off:   rgba(228,238,227,.13);

  --measure: 32em;          /* 本文の行長（全角40字前後） */
  --mincho: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --sans:   "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; background:var(--night); }
body{
  margin:0; background:var(--night); color:var(--text);
  font-family:var(--sans); font-size:18px; line-height:2.05;
  font-feature-settings:"palt" 1;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--mint); text-underline-offset:.3em; }
a:hover{ color:var(--sand); }
a:focus-visible{ outline:3px solid var(--sand); outline-offset:4px; }

.wrap{ max-width:calc(var(--measure) + 7em); margin:0 auto; padding:0 22px; }

/* ---- 頭 ---- */
.site-head{ padding:26px 0 0; }
.site-head .wrap{ display:flex; flex-wrap:wrap; gap:10px 26px; align-items:baseline; }
.site-head a{ text-decoration:none; }
.site-head .mark{ font-family:var(--mincho); font-weight:700; font-size:20px; color:var(--mint); letter-spacing:.04em; }
.site-head nav{ display:flex; gap:24px; font-size:16px; }
.site-head nav a{ color:var(--muted); }
.site-head nav a:hover{ color:var(--mint); }

/* ---- 記事の表題：幅に合わせて1行に収める ----------------
   字数は組み立てのときに --title-chars として入る。
   入れ物の幅 ÷ 字数 で字の大きさを決めるので、どの幅でも1行。
   cqi が使えない環境のために clamp() を先に置く。            */
.opening{ padding:60px 0 10px; }
.opening-col{ position:relative; padding-left:26px; }
.opening-col::before{
  content:""; position:absolute; left:0; top:.2em; bottom:.6em; width:2px;
  background:linear-gradient(to bottom, var(--sand), rgba(215,184,122,0));
}
.title-box{ margin:0 0 34px; }
.opening h1{
  font-family:var(--mincho); font-weight:700; color:var(--mint);
  line-height:1.35; letter-spacing:-.02em; margin:0;
  font-size:clamp(24px, 6.6vw, 44px);
  word-break:keep-all; line-break:strict; overflow-wrap:normal;
}
@supports (container-type: inline-size){
  .title-box{ container-type:inline-size; }
  .opening h1{ font-size:clamp(20px, calc(100cqi / (var(--title-chars, 14) * .99)), 48px); }
}

.record{ display:grid; grid-template-columns:auto 1fr; gap:6px 22px; font-size:16px;
         margin:0 0 30px; max-width:var(--measure); }
.record dt{ color:var(--muted); white-space:nowrap; }
.record dd{ margin:0; overflow-wrap:anywhere; min-width:0; }

/* ---- PR と各社の定型文 ---- */
.pr{
  font-size:16px; line-height:1.8; max-width:var(--measure); color:var(--muted);
  border-top:1px solid var(--line-sand); border-bottom:1px solid var(--line-sand);
  padding:12px 0; margin:0 0 18px;
}
.pr-label{ color:var(--sand); font-weight:700; letter-spacing:.1em; margin-right:.7em; }
.disclosure-top{ font-size:16px; line-height:1.8; color:var(--muted); max-width:var(--measure); margin:0 0 .8em; }

/* ---- 本文 ---- */
.article-body section{ padding:64px 0 0; }
h1{ font-family:var(--mincho); font-weight:700; color:var(--mint); }
.page h1{ font-size:clamp(26px,6.4vw,38px); line-height:1.5; margin:56px 0 28px; letter-spacing:.01em; }
h2{
  font-family:var(--mincho); font-weight:700; color:var(--mint);
  font-size:clamp(22px,5.6vw,30px); line-height:1.65; letter-spacing:.02em;
  margin:0 0 22px;
}
.page h2{ margin:54px 0 18px; }
h3{ font-family:var(--mincho); font-weight:700; color:var(--mint); font-size:20px; line-height:1.7; margin:36px 0 14px; }
p{ margin:0 0 1.6em; max-width:var(--measure); }
.article-body ul, .article-body ol{ max-width:var(--measure); margin:0 0 1.6em; padding-left:1.4em; }
.article-body li{ margin:0 0 .5em; }
strong{ font-weight:400; color:var(--mint); border-bottom:1px solid rgba(221,241,218,.45); padding-bottom:.12em; }
em{ font-style:normal; color:var(--mint); }
blockquote{
  max-width:var(--measure); background:var(--deep); border-left:3px solid var(--sand);
  padding:22px 22px 22px 20px; margin:0 0 1.8em;
  font-family:var(--mincho); font-size:clamp(19px,4.8vw,23px); line-height:1.85; color:var(--mint);
}
blockquote p:last-child{ margin-bottom:0; }

/* 灯り：読んでいるあたりだけ明るくする（JavaScript が付ける） */
html.anim .lamp{ opacity:.62; transition:opacity .6s ease; }
html.anim .lamp.is-lit{ opacity:1; }

/* ===========================================================
   図
   =========================================================== */
.fig{ margin:34px 0 0; }
.fig-title{
  font-family:var(--mincho); font-weight:700; font-size:19px; color:var(--mint);
  margin:0 0 16px; line-height:1.6; max-width:none;
}
.badge{
  display:inline-block; margin-left:.7em; padding:1px 10px; border-radius:2px;
  background:var(--sand); color:var(--night); white-space:nowrap;
  font-family:var(--sans); font-size:16px; font-weight:700; letter-spacing:.06em;
  line-height:1.5; vertical-align:.1em;
}
.fig-canvas{ background:var(--deep); padding:22px 20px 18px; }
.fig-canvas:empty{ display:none; }          /* JavaScript が動かないときは空の面を出さない */
.fig-stick{ background:var(--night); }

.fig-data{
  border-collapse:collapse; margin:18px 0 0; font-size:16px; line-height:1.7;
  width:100%; max-width:var(--measure);
}
.fig-data th, .fig-data td{ text-align:left; padding:8px 14px 8px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.fig-data th{ font-weight:400; color:var(--muted); white-space:nowrap; }
.fig-note{ font-size:16px; line-height:1.85; color:var(--muted); margin:18px 0 0; max-width:var(--measure); }
.fig-source{ font-size:16px; line-height:1.85; color:var(--muted); margin:6px 0 0; max-width:var(--measure); }

/* ---- 段階（steps）：図を留めて、横の文章で進める ---- */
.fig-step{ padding:22px 0; }
.fig-step p{ margin:0 0 1.2em; }
.fig-step p:last-child{ margin-bottom:0; }
html.anim .fig-staged .fig-stick{ position:sticky; top:0; z-index:2; padding:10px 0 14px; }
html.anim .fig-staged .fig-step{
  min-height:66vh; display:flex; flex-direction:column; justify-content:center;
  opacity:.34; transition:opacity .5s ease;
}
html.anim .fig-staged .fig-step.is-on{ opacity:1; }
html.anim .fig-staged .fig-step:last-child{ min-height:74vh; }

@media (min-width: 900px){
  /* 段階のある図だけ、右へ広げて2段に組む。左端は本文とそろえたまま */
  .fig-staged{ --ext:clamp(0px, calc((100vw - 760px) / 2), 320px); width:calc(100% + var(--ext)); }
  .fig-staged .fig-stage{ display:grid; grid-template-columns:1fr 1.06fr; gap:0 52px; align-items:start; }
  .fig-staged .fig-stick{ order:2; align-self:start; }
  .fig-staged .fig-steps{ order:1; }
  html.anim .fig-staged .fig-stick{ top:clamp(16px, 13vh, 104px); padding:0; }
  .fig-staged .fig-canvas{ padding:26px 24px 20px; }
  .fig-staged .fig-title{ font-size:20px; }
}

/* ---- 種類ごとの中身：100人の丸 ---- */
.dg-group{ margin:0 0 22px; }
.dg-group:last-child{ margin-bottom:0; }
.dg-label{ font-size:16px; line-height:1.7; margin:0 0 10px; max-width:none; }
.dg-dots{ display:grid; grid-template-columns:repeat(20, 1fr); gap:4px; max-width:420px; }
.dg-dot{ aspect-ratio:1; border-radius:50%; background:var(--dot-off); transition:background-color .45s ease; }
.dg-group.is-on .dg-dot.is-hit{ background:var(--mint); }
.dg-count{ font-size:16px; line-height:1.7; margin:10px 0 0; color:var(--text); max-width:none; }
.dg-count b{ color:var(--sand); font-weight:700; }

/* ---- もとのリスクを変える ---- */
.rs-dots{ display:grid; grid-template-columns:repeat(20, 1fr); gap:4px; max-width:420px;
          opacity:0; transition:opacity .5s ease; }
.rs-dots.is-on{ opacity:1; }
.rs-dot{ aspect-ratio:1; border-radius:50%; background:var(--dot-off); transition:background-color .3s ease; }
.rs-dot.is-stay{ background:var(--mint); }
.rs-dot.is-cut{ background:var(--sand); }
.rs-control{ margin:18px 0 0; opacity:0; transition:opacity .5s ease; }
.rs-on .rs-control{ opacity:1; }
html:not(.anim) .rs-control{ opacity:1; }
.rs-control label{ display:block; font-size:16px; line-height:1.7; color:var(--muted); margin:0 0 6px; }
.rs-range{ -webkit-appearance:none; appearance:none; width:100%; max-width:420px; background:transparent; margin:0; }
.rs-range::-webkit-slider-runnable-track{ height:2px; background:var(--line-soft); }
.rs-range::-moz-range-track{ height:2px; background:var(--line-soft); }
.rs-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:26px; height:26px; margin-top:-12px;
  border-radius:50%; background:var(--night); border:3px solid var(--mint); cursor:pointer;
}
.rs-range::-moz-range-thumb{
  width:26px; height:26px; border-radius:50%; background:var(--night); border:3px solid var(--mint); cursor:pointer;
}
.rs-range:focus-visible{ outline:3px solid var(--sand); outline-offset:6px; }
.rs-out{ font-size:16px; line-height:1.8; margin:14px 0 0; max-width:none; }
.rs-out b{ color:var(--sand); font-weight:700; }

/* ---- 推定値と幅 ---- */
.iv-plot{ position:relative; }
.iv-zero{ position:absolute; top:18px; bottom:30px; width:1px; background:var(--sand); }
.iv-zero::after{
  content:"0"; position:absolute; top:-22px; left:50%; transform:translateX(-50%);
  font-size:16px; color:var(--sand); line-height:1.3;
}
.iv-row{ padding:10px 0 4px; opacity:0; transition:opacity .5s ease; }
.iv-row.is-on{ opacity:1; }
.iv-name{ font-size:16px; margin:0 0 12px; line-height:1.7; color:var(--text); max-width:none; }
.iv-bar{ position:relative; height:28px; }
.iv-track{ position:absolute; top:13px; left:0; right:0; height:1px; background:var(--line); }
.iv-ci{
  position:absolute; top:8px; height:12px; border-radius:6px; background:var(--mint);
  transform:scaleX(0); transform-origin:var(--origin,50%) 50%;
  transition:transform .95s cubic-bezier(.2,.75,.25,1);
}
.iv-row.is-on .iv-ci{ transform:scaleX(1); }
.iv-point{
  position:absolute; top:4px; width:20px; height:20px; border-radius:50%;
  background:var(--night); border:3px solid var(--mint); margin-left:-10px;
  opacity:0; transform:scale(.4); transition:opacity .4s ease, transform .4s ease;
}
.iv-row.is-on .iv-point{ opacity:1; transform:scale(1); transition-delay:.5s; }
.iv-value{ font-size:16px; margin:12px 0 0; line-height:1.75; min-height:1.75em; max-width:none; }
.iv-verdict{ font-size:16px; margin:2px 0 0; color:var(--muted); min-height:1.75em; max-width:none;
             opacity:0; transition:opacity .5s ease; }
.iv-verdict.is-on{ opacity:1; }
.iv-verdict b{ color:var(--sand); font-weight:700; }
.iv-axis{ position:relative; height:28px; border-top:1px solid rgba(228,238,227,.22); margin-top:10px; }
.iv-axis span{ position:absolute; top:5px; font-size:16px; color:var(--muted); transform:translateX(-50%); white-space:nowrap; }
.iv-axis span:first-child{ transform:none; }
.iv-axis span:last-child{ transform:translateX(-100%); }

/* ---- 誰が残ったか ---- */
.fl-step{ opacity:0; transition:opacity .5s ease; }
.fl-step.is-on{ opacity:1; }
.fl-label{ font-size:16px; line-height:1.7; margin:0 0 6px; max-width:none; }
.fl-bar{ height:14px; background:var(--mint); border-radius:2px; width:0; transition:width .8s cubic-bezier(.2,.75,.25,1); }
.fl-step.is-on .fl-bar{ width:var(--w,100%); }
.fl-n{ font-size:16px; line-height:1.7; margin:6px 0 0; color:var(--muted); max-width:none; }
.fl-n b{ color:var(--text); font-weight:700; }
.fl-drop{
  font-size:16px; line-height:1.6; color:var(--sand); margin:0; padding:8px 0 8px 16px;
  border-left:1px solid var(--line-sand); max-width:none;
  opacity:0; transition:opacity .5s ease;
}
.fl-drop.is-on{ opacity:1; }

/* ===========================================================
   本棚・運営者・トップ
   =========================================================== */
.page{ padding-bottom:20px; }
.page p{ margin:0 0 1.4em; }
.shelf{ list-style:none; padding:0; margin:0 0 10px; max-width:var(--measure); }
.shelf li{ padding:16px 0 16px 18px; border-left:1px solid var(--line-soft); margin:0 0 2px; }
.shelf .shelf-meta{ display:block; font-size:16px; color:var(--muted); line-height:1.7; margin-top:2px; }

.article-list{ list-style:none; padding:0; margin:0; max-width:var(--measure); }
.article-list li{ padding:22px 0; border-bottom:1px solid var(--line); }
.article-list a{
  font-family:var(--mincho); font-weight:700; font-size:clamp(20px,4.6vw,24px);
  line-height:1.6; text-decoration:none; display:block;
}
.article-list a:hover{ text-decoration:underline; }
.article-list .meta{ display:block; font-size:16px; color:var(--muted); margin-top:4px; }
.lede{ color:var(--muted); font-size:17px; line-height:1.95; }

/* ---- 足もと ---- */
.site-foot{ margin-top:80px; padding:40px 0 60px; border-top:1px solid var(--line); }
.site-foot p{ max-width:var(--measure); font-size:16px; line-height:1.9; color:var(--muted); margin:0 0 .9em; }
.site-foot p:last-child{ color:var(--text); margin-bottom:0; }

/* ===========================================================
   幅の調整
   =========================================================== */
@media (max-width: 899px){
  .fig-canvas{ padding:16px 16px 12px; }
  .fig-title{ font-size:17px; line-height:1.7; margin:0 0 12px; }
  .badge{ margin-left:.6em; padding:0 8px; vertical-align:.06em; }
  .iv-row{ padding:6px 0 2px; }
  .iv-name{ line-height:1.5; margin:0 0 8px; }
  .iv-value{ line-height:1.5; min-height:1.5em; margin-top:8px; }
  .iv-verdict{ line-height:1.5; min-height:1.5em; }
  .iv-zero{ top:14px; bottom:28px; }
  .iv-axis{ height:26px; margin-top:6px; }
  .dg-group{ margin-bottom:16px; }
  html.anim .fig-staged .fig-stick{ padding:8px 0 12px; }
  html.anim .fig-staged .fig-step{ min-height:60vh; }
  html.anim .fig-staged .fig-step:last-child{ min-height:68vh; }
}

@media (max-width: 519px){
  body{ font-size:17px; line-height:1.95; }
  .wrap{ padding:0 16px; }
  .opening{ padding:40px 0 6px; }
  .opening-col{ padding-left:0; }
  .opening-col::before{ left:-10px; }
  .article-body section{ padding:48px 0 0; }
  .dg-dots, .rs-dots{ grid-template-columns:repeat(10, 1fr); gap:5px; max-width:260px; }
}

/* ===========================================================
   動きを止める設定
   =========================================================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition:none !important; animation:none !important; }
  html.anim .lamp{ opacity:1; }
  .fig-stick{ position:static !important; }
  html.anim .fig-staged .fig-step{ min-height:0; opacity:1; display:block; }
  .iv-row, .iv-verdict, .fl-step, .fl-drop{ opacity:1; }
  .iv-ci{ transform:scaleX(1); }
  .iv-point{ opacity:1; transform:scale(1); }
  .fl-bar{ width:var(--w,100%); }
  .rs-control, .rs-dots{ opacity:1; }
}

/* ===========================================================
   紙に刷るとき
   =========================================================== */
@media print{
  html, body{ background:#fff; color:#111; font-size:11pt; line-height:1.7; }
  .site-head nav, .rs-control{ display:none; }
  .wrap{ max-width:none; padding:0; }
  a{ color:#111; }
  h1, h2, h3, .fig-title, .site-head .mark, blockquote{ color:#111; }
  .opening h1{ font-size:20pt; }
  .opening-col{ padding-left:0; }
  .opening-col::before{ display:none; }
  .fig-canvas, blockquote{ background:#f2f2f2; color:#111; }
  .fig-staged{ width:auto; }
  .fig-staged .fig-stage{ display:block; }
  .fig-stick{ position:static !important; }
  .fig-step{ min-height:0 !important; opacity:1 !important; display:block !important; }
  .iv-row, .iv-verdict, .fl-step, .fl-drop, .lamp, .rs-dots{ opacity:1 !important; }
  .iv-ci{ transform:scaleX(1) !important; }
  .iv-point{ opacity:1 !important; transform:scale(1) !important; }
  .dg-dot.is-hit, .rs-dot.is-stay{ background:#333 !important; }
  .rs-dot.is-cut{ background:#999 !important; }
  .dg-dot, .rs-dot{ background:#ddd; }
  .badge{ background:#333; color:#fff; }
  .pr, .disclosure-top, .fig-note, .fig-source, .site-foot p, .record dt, .muted{ color:#333; }
  .fig, .article-body section{ break-inside:avoid; }
  .site-foot{ border-top:1px solid #999; }
}