/* japanbythebook — 記事サイトの共通CSS
   ★ピンの `pin-*.css` とは別物。ピンは1000×1500の固定寸法のポスターで、
     こちらは**読ませるためのページ**。色と書体だけ pin-base.css から引き継ぐ。
   ⚠ピンのCSSをここに持ち込まない（固定幅なのでスマホで死ぬ）。 */

:root{
  --ink:#16294C; --ink-soft:#43536F; --ink-faint:#6B7A90;
  --accent:#D64545; --accent-deep:#B02F2F;
  --paper:#FAF7F2; --paper-deep:#F1EBE1; --line:#E3DED4;
  --white:#fff; --green:#2E7D63;
  --warn:#D64545; --warn-bg:#FDECEC;
  --measure:34rem;                 /* ★1行の長さ。英文は詰めすぎない */
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Segoe UI Variable Text","Segoe UI","Helvetica Neue",Arial,sans-serif;
  font-size:18px; line-height:1.7;
}
@media (min-width:48rem){ body{font-size:19px;} }

.wrap{max-width:var(--measure); margin:0 auto; padding:0 1.25rem;}
.wide{max-width:52rem;}

/* ── 上下 ───────────────────────────────── */
.site-head{
  background:var(--ink); color:#fff; padding:.9rem 0;
}
.site-head a{color:#fff; text-decoration:none; font-weight:700; letter-spacing:.01em;}
.site-head .tag{display:block; font-size:.72em; font-weight:600; color:#A8B8D4; letter-spacing:.02em;}

.site-foot{
  margin-top:4rem; background:var(--ink); color:#C9D4E6;
  padding:2rem 0 2.5rem; font-size:.86em; line-height:1.65;
}
.site-foot a{color:#fff;}
.site-foot .who{color:#fff; font-weight:700; margin-bottom:.4rem;}

/* ── 記事 ───────────────────────────────── */
article{padding:2.5rem 0 0;}
h1{font-size:2.05em; line-height:1.18; letter-spacing:-.02em; margin:.2em 0 .5em;}
h2{font-size:1.35em; line-height:1.3; margin:2.4em 0 .6em; padding-top:1.4em; border-top:2px solid var(--line);}
h3{font-size:1.08em; margin:1.8em 0 .4em;}
p{margin:0 0 1.1em;}
a{color:var(--accent-deep);}
strong{font-weight:700;}
em{font-style:normal; color:var(--accent-deep); font-weight:700;}

.lede{font-size:1.14em; color:var(--ink-soft); line-height:1.6;}

/* いつ時点の情報か。★毎ページ必ず出す */
.asof{
  display:inline-block; font-size:.8em; font-weight:700; letter-spacing:.02em;
  background:var(--paper-deep); color:var(--ink-soft);
  padding:.35em .8em; border-radius:99px; margin-bottom:1.2em;
}

/* 手順 */
ol.steps{margin:0 0 1.4em; padding:0; list-style:none; counter-reset:s;}
ol.steps li{
  counter-increment:s; position:relative; padding:0 0 .9em 2.5rem; margin:0;
}
ol.steps li::before{
  content:counter(s); position:absolute; left:0; top:.1em;
  width:1.7rem; height:1.7rem; border-radius:50%;
  background:var(--ink); color:#fff; font-size:.8em; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}

/* 注意の箱。★制度の記事は例外を書かないと、例外に当たった人にだけ嘘になる */
.note{
  border-left:5px solid var(--accent); background:var(--warn-bg);
  padding:1rem 1.1rem; margin:1.4em 0; border-radius:0 8px 8px 0;
}
.note p:last-child{margin-bottom:0;}
.note .lbl{
  display:block; font-size:.78em; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent-deep); margin-bottom:.35em;
}
.note.plain{border-left-color:var(--ink-soft); background:var(--paper-deep);}
.note.plain .lbl{color:var(--ink-soft);}

/* 表。★横に溢れさせない */
.tablewrap{overflow-x:auto; margin:1.4em 0; -webkit-overflow-scrolling:touch;}
table{border-collapse:collapse; width:100%; min-width:26rem; font-size:.92em;}
th,td{text-align:left; padding:.6em .7em; border-bottom:1px solid var(--line); vertical-align:top;}
th{background:var(--paper-deep); font-weight:700; white-space:nowrap;}

/* 出典。★実写を使わないぶん、信頼はここで作る */
.sources{font-size:.88em; color:var(--ink-soft);}
.sources li{margin-bottom:.5em;}
.sources a{word-break:break-word;}

/* トップの記事カード */
.cards{list-style:none; padding:0; margin:1.5em 0 0;}
.cards li{
  background:var(--white); border:2px solid var(--line); border-radius:12px;
  padding:1.1rem 1.2rem; margin-bottom:1rem;
}
.cards a{text-decoration:none; color:var(--ink); font-weight:700; font-size:1.06em; line-height:1.35; display:block;}
.cards .sub{display:block; margin-top:.35em; font-size:.86em; font-weight:400; color:var(--ink-soft); line-height:1.55;}
.cards li.soon{background:transparent; border-style:dashed; color:var(--ink-faint);}
.cards li.soon span{font-weight:700; color:var(--ink-faint);}