/* movetosec — 2026-09-10 リデザイン
   方針: 和文の明朝×ゴシックで見出しと本文を対比させる。数字を主役に置く。
        Web フォントは読まない（LCP を守る）。OS 搭載の明朝を指定して選択の意思を出す。 */
:root{
  /* 60-30-10: 地 60 / 面 30 / 差し色 10 */
  --bg:#faf8f4;          /* 純白にしない。わずかに温かい紙色 */
  --fg:#1a1815;
  --muted:#5f574c;
  --line:#ded6c8;
  --rule:#c9bda9;
  --card:#f4f0e8;
  --accent:#8a4b2a;      /* 差し色: 煉瓦 */
  --data:#2f5d50;        /* データ用: 深緑。リンクと数字を分ける */
  --maxw:42rem;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --r-sm:2px; --r-md:4px;   /* 角丸は2種類まで */

  --mincho:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP","Songti SC",serif;
  --gothic:"Hiragino Sans","Yu Gothic",YuGothic,"Noto Sans JP","IBM Plex Sans JP",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#16150f;--fg:#e9e4d8;--muted:#a09786;--line:#312d24;--rule:#4a4437;
        --card:#1e1c15;--accent:#d08a5c;--data:#7fb8a4;}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--gothic);
  font-size:16.5px;line-height:1.9;letter-spacing:.01em;
  font-feature-settings:'palt' 1;}

/* ── PR 表記: 中央寄せをやめ、本文の幅に揃える ───────────── */
.pr{border-bottom:1px solid var(--line);font-size:.76rem;color:var(--muted);
  letter-spacing:.02em;padding:var(--s3) 0}
.pr>span{display:block;max-width:var(--maxw);margin:0 auto;padding:0 var(--s5)}
.pr>span::before{content:"広告";display:inline-block;margin-right:var(--s3);
  padding:1px 6px;border:1px solid var(--rule);border-radius:var(--r-sm);
  font-size:.68rem;letter-spacing:.08em;vertical-align:1px}

/* ── ヘッダ ─────────────────────────────────────── */
header.site{border-bottom:1px solid var(--line)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s5)}
nav{display:flex;align-items:baseline;gap:var(--s5);padding:var(--s5) 0 var(--s4);font-size:.87rem}
nav a{color:var(--muted);text-decoration:none;padding-bottom:2px}
nav a:hover{color:var(--accent)}
nav a[aria-current="page"]:not(.brand){color:var(--fg);border-bottom:2px solid var(--accent)}
.brand{font-family:var(--mincho);font-size:1.18rem;font-weight:600;color:var(--fg)!important;
  letter-spacing:.06em;margin-right:auto}

main{padding:var(--s7) 0 var(--s8)}

/* ── 見出し: 明朝。本文ゴシックとの対比が識別点 ───────────── */
h1,h2,h3{font-family:var(--mincho);font-weight:600;letter-spacing:.02em;line-height:1.5}
h1{font-size:2.05rem;margin:0 0 var(--s5)}
h2{font-size:1.32rem;margin:var(--s8) 0 var(--s4);position:relative;padding-left:var(--s4)}
h2::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--accent)}
h3{font-size:1.03rem;margin:var(--s6) 0 var(--s3);color:var(--muted)}
p{margin:0 0 var(--s5)}
ul,ol{padding-left:1.4em;margin:0 0 var(--s5)}
li{margin:var(--s2) 0}
a{color:var(--accent);text-underline-offset:3px}

/* ── リード: 太字ではなく級数と色で ──────────────────── */
.lead{font-size:1.12rem;line-height:1.85;color:var(--fg)}
main>p:first-of-type strong:only-child{font-weight:inherit}

/* ── 数字を主役にする ───────────────────────────── */
.stats{display:flex;flex-wrap:wrap;gap:var(--s6) var(--s7);
  margin:var(--s6) 0 var(--s7);padding:var(--s5) 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.stat b{display:block;font-family:var(--mincho);font-size:2.3rem;font-weight:600;
  line-height:1.1;color:var(--data);letter-spacing:-.01em}
.stat span{display:block;font-size:.78rem;color:var(--muted);margin-top:var(--s1);letter-spacing:.04em}

/* ── 表: 罫線を減らし、数字だけ太く ────────────────── */
.tw{overflow-x:auto;margin:0 0 var(--s5)}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{padding:var(--s3) var(--s4) var(--s3) 0;text-align:left;
  border-bottom:1px solid var(--line);white-space:nowrap}
th{font-family:var(--mincho);font-weight:600;font-size:.85rem;color:var(--muted);
  border-bottom:1px solid var(--rule);letter-spacing:.04em}
td:not(:first-child){font-variant-numeric:tabular-nums;color:var(--data)}

/* ── 引用/要点箱: 枠で囲まず、左の罫線だけ ───────────── */
blockquote{margin:var(--s6) 0;padding:0 0 0 var(--s5);
  border-left:2px solid var(--accent);font-size:.95rem;color:var(--muted)}
blockquote p{margin:0 0 var(--s3)}
blockquote strong{color:var(--fg)}
blockquote ul{margin:0}

.crumbs{font-size:.78rem;color:var(--muted);margin:0 0 var(--s5);letter-spacing:.02em}
.crumbs a{color:var(--muted)}
.byline{font-family:var(--mincho);font-size:.87rem;color:var(--muted);
  margin:0 0 var(--s7);padding-bottom:var(--s4);border-bottom:1px solid var(--line)}
.note{font-size:.82rem;color:var(--muted);line-height:1.75}
p.note{margin-top:calc(var(--s5) * -0.6)}

/* ── 記事リスト: カードにしない ─────────────────── */
.posts{list-style:none;padding:0;margin:0 0 var(--s7)}
.posts li{margin:0;padding:var(--s5) 0;border-bottom:1px solid var(--line)}
.posts a{font-family:var(--mincho);font-size:1.1rem;text-decoration:none;color:var(--fg)}
.posts a:hover{color:var(--accent)}
.posts .note{display:block;margin-top:var(--s2)}

.authorbox{margin:var(--s8) 0 0;padding:var(--s5) 0 0;border-top:1px solid var(--rule);font-size:.88rem}
.authorbox p{margin:0 0 var(--s2)}
.authorbox strong{font-family:var(--mincho);font-size:1rem}

footer.site{border-top:1px solid var(--line);margin-top:var(--s8);
  padding:var(--s5) 0 var(--s8);font-size:.8rem;color:var(--muted)}
footer.site a{color:var(--muted)}

@media(max-width:600px){
  h1{font-size:1.6rem}
  .stat b{font-size:1.9rem}
  .stats{gap:var(--s5)}
  body{font-size:16px}
}