@charset "UTF-8";

/* ==========================================================
   VIVANT 考察記録 — 共通スタイル（改訂版）
   情報の「確度」を視覚言語の中心に置く。
   確定した事実と未確認の推測を、罫線の色と濃度で分離する。
   有彩色は朱の1色のみ。それ以外は白・オフホワイト・墨で構成。
   ========================================================== */

:root{
  --bg:#ffffff;
  --bg-sub:#f7f7f5;
  --bg-guess:#fdf6f4;
  --ink:#23252a;
  --ink-mid:#4a4d54;
  --muted:#6d7078;
  --line:#e4e3df;
  --line-strong:#c9c8c2;
  --accent:#b3352b;

  --head:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --body:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --wrap:720px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-weight:400;
  font-size:16px;
  line-height:1.9;
  font-feature-settings:"palt" 1;
}

h1,h2,h3,h4,.brand,.lead-title{font-family:var(--head);}

a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-strong);}
a:hover{border-bottom-color:var(--accent);color:var(--accent);}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px;}

/* ---------- ヘッダー ---------- */
.masthead{border-bottom:1px solid var(--line);background:var(--bg);}
.masthead .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;padding-top:16px;padding-bottom:16px;
}
.brand{
  display:inline-flex;align-items:center;gap:9px;
  font-size:17px;font-weight:700;letter-spacing:.06em;
  color:var(--ink);border-bottom:none;
}
.brand::before{
  content:"";width:9px;height:16px;background:var(--accent);flex:none;
}
.brand em{font-style:normal;font-weight:500;font-size:14px;color:var(--muted);letter-spacing:.08em;}
.masthead nav{display:flex;gap:18px;flex-wrap:wrap;}
.masthead nav a{
  font-size:13.5px;color:var(--ink-mid);border-bottom:none;font-weight:500;
}
.masthead nav a:hover{color:var(--accent);}

/* ---------- 確度メーター（サイトの中核部品） ---------- */
.conf{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
}
.conf-bars{display:inline-flex;gap:2px;}
.conf-bars i{display:block;width:13px;height:6px;background:var(--line);}
.conf-label{font-weight:700;font-size:11.5px;letter-spacing:.06em;color:var(--muted);}

.conf[data-level="4"] .conf-bars i:nth-child(-n+4){background:var(--ink);}
.conf[data-level="4"] .conf-label{color:var(--ink);}
.conf[data-level="3"] .conf-bars i:nth-child(-n+3){background:#7c7f86;}
.conf[data-level="3"] .conf-label{color:#5c5f66;}
.conf[data-level="2"] .conf-bars i:nth-child(-n+2){background:#cf8b84;}
.conf[data-level="2"] .conf-label{color:#a05a52;}
.conf[data-level="1"] .conf-bars i:nth-child(-n+1){background:var(--accent);}
.conf[data-level="1"] .conf-label{color:var(--accent);}

/* ---------- トップ：導入 ---------- */
.intro{padding:44px 0 34px;border-bottom:1px solid var(--line);}
.intro .stat{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  color:var(--muted);margin:0 0 16px;
}
.intro h1{
  font-size:27px;font-weight:700;line-height:1.6;letter-spacing:.005em;
  margin:0 0 18px;
}
.intro p{margin:0 0 13px;color:var(--ink-mid);font-size:15px;}
.intro p:last-child{margin-bottom:0;}

.policy{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);}
.policy h2{
  font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--muted);
  margin:0 0 12px;
}
.policy ul{margin:0;padding-left:1.15em;font-size:14px;line-height:1.85;color:var(--ink-mid);}
.policy li{margin-bottom:4px;}

/* ---------- トップ：リード記事（カードにしない） ---------- */
.lead{padding:34px 0 32px;border-bottom:1px solid var(--line);}
.lead .flag{
  display:inline-block;background:var(--accent);color:#fff;
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  padding:3px 9px;margin-bottom:14px;
}
.lead-title{font-size:25px;font-weight:700;line-height:1.55;margin:0 0 14px;}
.lead-title a{border-bottom:none;}
.lead-title a:hover{color:var(--accent);}
.lead p{margin:0 0 16px;font-size:15.5px;color:var(--ink-mid);}
.lead .foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.lead .date{font-family:var(--mono);font-size:11.5px;color:var(--muted);}

/* ---------- トップ：記事リスト（罫線区切り） ---------- */
.group{padding:30px 0 0;}
.group > h2{
  font-size:14px;font-weight:700;letter-spacing:.12em;
  margin:0 0 4px;padding-bottom:10px;border-bottom:2px solid var(--ink);
}
.entry{padding:20px 0;border-bottom:1px solid var(--line);}
.entry h3{font-size:18px;font-weight:700;line-height:1.55;margin:0 0 7px;}
.entry h3 a{border-bottom:none;}
.entry h3 a:hover{color:var(--accent);}
.entry p{margin:0 0 11px;font-size:14.5px;color:var(--ink-mid);line-height:1.8;}
.entry .foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.entry .date{font-family:var(--mono);font-size:11px;color:var(--muted);}

/* 基礎資料：密度を上げた簡易リスト */
.refs{margin:0;padding:0;list-style:none;}
.refs li{
  display:flex;gap:14px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--line);
}
.refs .t{font-family:var(--head);font-weight:600;font-size:15.5px;flex:none;}
.refs .t a{border-bottom:none;}
.refs .t a:hover{color:var(--accent);}
.refs .d{font-size:13.5px;color:var(--muted);line-height:1.7;}

/* ---------- 記事ページ ---------- */
.article{padding:36px 0 10px;}
.article .kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:var(--muted);margin:0 0 12px;
}
.article h1{
  font-size:26px;font-weight:700;line-height:1.6;margin:0 0 22px;
}
.docbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:12px 0;margin-bottom:32px;
}
.docbar .date{font-family:var(--mono);font-size:11.5px;color:var(--muted);}

.article h2{
  font-size:19px;font-weight:700;line-height:1.6;
  margin:44px 0 16px;padding-bottom:9px;
  border-bottom:2px solid var(--ink);
}
.article h3{
  font-size:16px;font-weight:600;margin:30px 0 10px;color:var(--ink);
}
.article p{margin:0 0 17px;}
.article ul,.article ol{padding-left:1.35em;margin:0 0 18px;}
.article li{margin-bottom:8px;}
.article strong{font-weight:700;}

/* 事実と推測の分離 */
.fact,.guess{padding:17px 20px;margin:0 0 22px;border-radius:2px;}
.fact{background:var(--bg-sub);border-left:3px solid var(--ink);}
.guess{background:var(--bg-guess);border-left:3px solid var(--accent);}
.fact .tag,.guess .tag{
  display:block;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.14em;font-weight:700;
  margin-bottom:9px;
}
.fact .tag{color:var(--ink);}
.guess .tag{color:var(--accent);}
.fact p:last-child,.guess p:last-child,
.fact ul:last-child,.guess ul:last-child,
.fact ol:last-child,.guess ol:last-child{margin-bottom:0;}
.fact .tw:last-child,.guess .tw:last-child{margin-bottom:0;}
.fact table,.guess table{background:var(--bg);}

/* 配信・広告枠 */
.promo{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:20px 0;margin:38px 0;
}
.promo .label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  color:var(--muted);margin:0 0 9px;
}
.promo h4{margin:0 0 9px;font-size:15.5px;font-weight:700;}
.promo p{margin:0;font-size:14px;color:var(--ink-mid);}

/* 出典・関連 */
.sources{margin:44px 0 0;padding:20px 0 0;border-top:2px solid var(--ink);}
.sources h2{
  font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--muted);
  margin:0 0 11px;border:none;padding:0;
}
.sources ul{margin:0;padding-left:1.15em;font-size:13px;line-height:1.8;color:var(--muted);}
.sources li{margin-bottom:3px;}

.next{margin:38px 0 0;padding-top:22px;border-top:1px solid var(--line);}
.next h2{
  font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--muted);
  margin:0 0 12px;border:none;padding:0;
}
.next ul{margin:0;padding-left:1.15em;font-size:15px;}
.next li{margin-bottom:8px;}

/* ---------- 表 ---------- */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 24px;}
table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.75;}
.tw table{margin-bottom:0;}
th,td{border-bottom:1px solid var(--line);padding:11px 10px 11px 0;text-align:left;vertical-align:top;}
th{font-weight:700;font-size:13px;letter-spacing:.04em;color:var(--muted);border-bottom-color:var(--line-strong);}
td small{color:var(--muted);font-size:12.5px;}
td .conf{font-size:10px;}

/* ---------- フッター ---------- */
footer{
  margin-top:64px;border-top:1px solid var(--line);background:var(--bg-sub);
  padding:26px 0;font-size:13px;color:var(--muted);
}
footer .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;}
footer a{color:var(--ink-mid);border-bottom:1px solid var(--line-strong);}
footer a:hover{color:var(--accent);}
footer .note{font-size:12px;}

/* ---------- スマートフォン ---------- */
@media (max-width:640px){
  body{font-size:15.5px;line-height:1.85;}
  .wrap{padding:0 18px;}
  .masthead .wrap{padding-top:13px;padding-bottom:13px;gap:9px;}
  .masthead nav{gap:15px;width:100%;}
  .masthead nav a{font-size:13px;}
  .intro{padding:32px 0 26px;}
  .intro h1{font-size:22px;line-height:1.55;}
  .lead-title{font-size:21px;}
  .entry h3{font-size:17px;}
  .article h1{font-size:21.5px;}
  .article h2{font-size:17.5px;margin-top:36px;}
  .article h3{font-size:15.5px;}
  .fact,.guess{padding:15px 16px;}
  .refs li{flex-direction:column;gap:4px;}
  .refs .t{font-size:16px;}
  table{font-size:13.5px;}
  th,td{padding:9px 8px 9px 0;}
  .tw{margin-left:-18px;margin-right:-18px;padding:0 18px;}
}

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

/* ==========================================================
   トップページ：ブログ型2カラム（記事中心の構成）
   ========================================================== */

.wrap-wide{max-width:1020px;margin:0 auto;padding:0 22px;}

.updatebar{
  border-bottom:1px solid var(--line);
  padding:20px 0 14px;
}
.updatebar h1{font-family:var(--head);font-size:19px;font-weight:700;margin:0 0 5px;letter-spacing:.02em;}
.updatebar .now{font-size:13px;color:var(--muted);margin:0;font-family:var(--mono);letter-spacing:.03em;}
.updatebar .now b{color:var(--ink-mid);font-weight:500;}

.layout{display:block;padding-top:4px;}
.col-main{min-width:0;}
.col-side{min-width:0;}

/* セクション見出し（トップ用） */
.sec{margin-top:26px;}
.sec > h2{
  font-size:15px;font-weight:700;letter-spacing:.1em;
  margin:0;padding-bottom:9px;border-bottom:2px solid var(--ink);
}
.sec .note{
  font-size:12.5px;color:var(--muted);margin:10px 0 0;line-height:1.7;
}

/* 記事一覧（罫線区切り） */
.post{padding:19px 0;border-bottom:1px solid var(--line);}
.post .meta{
  font-family:var(--mono);font-size:11px;color:var(--muted);
  margin:0 0 6px;letter-spacing:.04em;
}
.post .meta .ep{color:var(--accent);font-weight:700;}
.post h3{font-size:17.5px;font-weight:600;line-height:1.6;margin:0 0 7px;}
.post h3 a{border-bottom:none;}
.post h3 a:hover{color:var(--accent);}
.post p{margin:0 0 9px;font-size:14px;color:var(--ink-mid);line-height:1.8;}
.post .conf{opacity:.95;}

/* 注目の考察：番号付き一覧 */
.picks{margin:0;padding:0;list-style:none;counter-reset:pick;}
.picks li{
  display:flex;gap:14px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.picks li::before{
  counter-increment:pick;content:"0" counter(pick);
  font-family:var(--mono);font-size:12px;color:var(--accent);
  font-weight:700;flex:none;padding-top:2px;
}
.picks .body{min-width:0;}
.picks .body a{font-family:var(--head);font-weight:600;font-size:16px;border-bottom:none;}
.picks .body a:hover{color:var(--accent);}
.picks .body span{display:block;font-size:13.5px;color:var(--muted);line-height:1.7;margin-top:3px;}

/* 未回収の伏線 */
.open{margin:0;padding:0;list-style:none;}
.open li{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--line);
}
.open .q{font-size:15px;line-height:1.6;}
.open .q a{border-bottom:none;}
.open .q a:hover{color:var(--accent);}
.open .st{
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.06em;flex:none;white-space:nowrap;
}
.open .st[data-s="有力"]{color:#5c5f66;}
.open .st[data-s="未確認"]{color:#a05a52;}
.open .st[data-s="憶測"]{color:var(--accent);}

/* サイト末尾の説明 */
.sitenote{
  margin-top:44px;padding:20px 0 0;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--muted);line-height:1.85;
}
.sitenote h2{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--muted);margin:0 0 9px;}
.sitenote p{margin:0 0 8px;}

/* サイドバー */
.side{margin-top:34px;}
.side h2{
  font-size:12.5px;font-weight:700;letter-spacing:.12em;
  margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line-strong);
}
.side ul{margin:0;padding:0;list-style:none;}
.side li{padding:7px 0;font-size:14px;line-height:1.6;}
.side li a{border-bottom:none;color:var(--ink-mid);}
.side li a:hover{color:var(--accent);}
.side li .sub{display:block;font-size:11.5px;color:var(--muted);margin-top:1px;}
.side .all{margin-top:10px;font-size:13px;}

/* エピソード一覧はサイドバーでは横並びタグ状に */
.eplist{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;}
.eplist li{padding:0;}
.eplist a{
  display:inline-block;border:1px solid var(--line-strong);
  padding:5px 11px;font-size:13px;color:var(--ink-mid);
  border-radius:3px;
}
.eplist a:hover{border-color:var(--accent);color:var(--accent);}

@media (min-width:900px){
  .layout{
    display:grid;grid-template-columns:minmax(0,1fr) 236px;
    gap:52px;align-items:start;
  }
  .col-side{border-left:1px solid var(--line);padding-left:26px;}
  .side:first-child{margin-top:34px;}
}

@media (max-width:640px){
  .wrap-wide{padding:0 18px;}
  .updatebar h1{font-size:17px;}
  .post h3{font-size:16.5px;}
  .picks .body a{font-size:15.5px;}
  .open li{flex-direction:column;gap:3px;}
  .open .st{align-self:flex-start;}
}

/* ==========================================================
   図版（自作SVG）
   ========================================================== */
.fig{margin:0 0 30px;}
.fig svg{width:100%;height:auto;display:block;}
.fig figcaption{
  font-size:12.5px;color:var(--muted);line-height:1.7;
  margin-top:9px;padding-top:8px;border-top:1px solid var(--line);
}
.legend{
  display:flex;gap:16px;flex-wrap:wrap;margin:0 0 14px;
  font-family:var(--mono);font-size:11px;color:var(--muted);
}
.legend span{display:inline-flex;align-items:center;gap:6px;}
.legend i{display:block;width:14px;height:8px;}