/* ===== 読み物(記事詳細)=====
   2026-08-23 デザインハンドオフ reading-article.dc.html に準拠。
   数値はすべてハンドオフの確定値。スタイルはここにだけ書く
   (CLAUDE.md: CSSはCSSファイルにだけ書く。HTMLにもタグにも書かない)。 */

.sec{padding:0 var(--pad)}
.sec > .inner{max-width:var(--wrap);margin:0 auto}

/* ---- キッカー(小見出し + 罫線 + 右の日付) ---- */
.kicker{display:flex;align-items:baseline;gap:14px}
.kicker .label{font-family:Archivo,sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;color:var(--primary)}
.kicker .rule{flex:1;height:1px;background:var(--rule-mid)}
.kicker .note{font-family:Archivo,sans-serif;font-size:11px;
  letter-spacing:.12em;color:var(--ink-dim)}

/* ---- ヒーロー ---- */
.artshero{padding-top:76px}
.artshero .kicker{margin-bottom:34px}
.artshero h1{margin:0;font-size:76px;line-height:1.16;font-weight:900;
  letter-spacing:-.02em;max-width:16em;text-wrap:pretty}
.leadrow{display:grid;grid-template-columns:1fr 360px;gap:56px;align-items:end;
  margin-top:40px;padding-bottom:26px;border-bottom:1px solid var(--rule)}
.leadrow .sub{margin:0;font-size:19px;line-height:1.95;font-weight:500;
  color:var(--ink-lead);max-width:32em;text-wrap:pretty}
.meta{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 18px;
  font-size:12.5px;color:var(--ink-dim)}
.meta dt{font-family:Archivo,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  font-size:10px;font-weight:700;padding-top:2px}
.meta dd{margin:0;color:var(--ink)}

/* ---- 本文エリア(左に目次・右に本文) ---- */
.artsbody{padding-bottom:110px}
.artsgrid{display:grid;grid-template-columns:196px 1fr;gap:64px;align-items:start}
.toc{position:sticky;top:32px;padding-top:52px}
.tochead{font-family:Archivo,sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim);
  padding-bottom:12px;border-bottom:1px solid var(--rule-mid)}
.toc ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.toc li{border-bottom:1px solid var(--rule-soft)}
.toc a{display:flex;gap:10px;padding:13px 0;font-size:13px;line-height:1.6;
  font-weight:500;color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--primary)}
.toc .n{font-family:Archivo,sans-serif;font-weight:700;color:var(--primary)}

.artsgrid article{max-width:41em;padding-top:52px;
  display:flex;flex-direction:column;gap:64px}
.artsgrid article > section{display:grid;grid-template-columns:88px 1fr;gap:28px}
.secnum{font-family:Archivo,sans-serif;font-size:52px;font-weight:300;
  line-height:.9;letter-spacing:-.03em;color:var(--primary)}
.artsgrid h2{margin:0 0 22px;font-size:31px;line-height:1.45;
  font-weight:700;letter-spacing:-.01em}
.artsgrid h3{margin:32px 0 12px;font-size:20px;font-weight:700;line-height:1.6}
.artsgrid p{margin:0 0 20px;font-size:17.5px;line-height:2.1;
  color:var(--ink-body);text-wrap:pretty}
.artsgrid p:last-child{margin-bottom:0}
.artsgrid strong{font-weight:700;color:var(--ink)}
.artsgrid ul,.artsgrid ol{margin:0 0 20px;padding-left:1.4em;
  font-size:17.5px;line-height:2.1;color:var(--ink-body)}
.artsgrid li{margin-bottom:8px}

/* ---- 未移行のページ(about / guide / glossary / privacy / articles /
   shindan / birth)。本文レイアウトはまだ旧構造だが、article.css の見出し・本文の
   指定は .artsgrid の中だけに絞ってあるため、素のままだと無指定になる。
   第4段階でこれらを組み替えたら、この節は削除する。 ---- */
/* 横パディングは base.css の .wrap が持つ。ここは上下だけ足す */
main.wrap{padding-top:48px;padding-bottom:72px}
main.wrap > h1{margin:0 0 .3em;font-size:clamp(30px,5vw,44px);font-weight:900;
  letter-spacing:-.015em;line-height:1.3}
main.wrap > .sub{margin:0 0 44px;font-size:19px;line-height:1.9;color:var(--ink-lead)}
main.wrap h2{margin:56px 0 16px;font-size:26px;font-weight:700;
  letter-spacing:-.01em;line-height:1.45}
main.wrap h3{margin:32px 0 10px;font-size:19px;font-weight:700}
main.wrap p{margin:0 0 18px;font-size:17.5px;line-height:2.1;color:var(--ink-body)}
main.wrap ul,main.wrap ol{margin:0 0 18px;padding-left:1.4em;
  font-size:17.5px;line-height:2.1;color:var(--ink-body)}
main.wrap li{margin-bottom:8px}
main.wrap strong{font-weight:700;color:var(--ink)}

/* ---- 注釈ブロック(左に色帯は付けず、枠線で囲う) ---- */
.callout{border:1px solid var(--rule);padding:26px 28px;margin:0 0 20px}
.callout .lab{font-family:Archivo,sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;color:var(--primary);margin-bottom:12px}
.callout p{margin:0;font-size:15.5px;line-height:1.95;color:var(--ink-body)}
.tight{margin:0}

/* ---- 図版 ---- */
figure{margin:0}
figcaption,.figcap{margin-top:12px;font-size:12.5px;line-height:1.8;color:var(--ink-dim)}

/* ---- 表(横罫線だけ。全セルを囲むと表計算ソフトの見た目になる) ---- */
.rwrap{overflow-x:auto;margin:0 0 28px}
.rtable{width:100%;border-collapse:collapse;font-size:15px}
.rtable caption{caption-side:top;text-align:left;font-size:12.5px;
  color:var(--ink-dim);padding:0 0 10px}
.rtable th,.rtable td{border:0;border-bottom:1px solid var(--rule-soft);
  padding:12px 20px 12px 0;text-align:left;line-height:1.8;vertical-align:top}
.rtable th{font-family:Archivo,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);
  border-bottom:1px solid var(--rule);padding-bottom:10px;white-space:nowrap}
.rtable tr:last-child td{border-bottom:0}
.rtable td strong,.rtable td b{color:var(--ink)}
.rtable .bad{color:var(--primary)}

/* ---- 出典・免責 ---- */
.sources{list-style:none;padding:0;margin:0 0 20px}
.sources li{border-bottom:1px solid var(--rule-soft);padding:14px 0;font-size:15px}
.sources strong,.sources b{display:block;margin-bottom:2px}
.sources span{color:var(--ink-dim);font-size:14px}
.disc{background:var(--surface);padding:22px 24px;color:var(--ink-dim);
  font-size:14px;line-height:1.9}
.enddisc{margin-top:44px}
.fine{font-size:13px;color:var(--ink-dim)}

/* ---- 層カード(about など) ---- */
.layers{display:grid;gap:1px;background:var(--rule-mid);margin:0 0 24px}
.layer{background:var(--bg);padding:22px 24px}
.layer h3{margin:0 0 6px;font-size:16.5px;color:var(--primary)}
.layer p{margin:0;font-size:15px;line-height:1.95}
.layer .src{display:block;margin-top:10px;font-size:13px;color:var(--ink-dim)}
.versions{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--rule-mid);margin:0 0 24px}
.vcard{background:var(--bg);padding:20px 22px}
.vcard h3{margin:0 0 6px;font-size:15.5px}
.vcard p{margin:0;font-size:15px;color:var(--ink-dim);line-height:1.9}

/* ---- 関連記事 ---- */
.related{border-top:1px solid var(--rule);background:var(--surface);
  padding-top:56px;padding-bottom:96px}
.relhead{font-family:Archivo,sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:26px}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rcard{border:1px solid var(--rule-mid);background:var(--bg);
  padding:26px 24px 24px;min-height:180px;display:flex;flex-direction:column;gap:12px;
  text-decoration:none}
.rcard:hover{border-color:var(--rule);text-decoration:none}
.rcard .no{font-family:Archivo,sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--primary)}
.rcard .t{font-size:19px;font-weight:700;line-height:1.55;color:var(--ink)}
.rcard .d{font-size:13px;line-height:1.85;color:var(--ink-card);margin-top:auto}

/* ---- 狭い画面 ---- */
@media (max-width:1100px){
  /* 目次を落として本文を1カラムに(ハンドオフの推奨ブレークポイント) */
  .artsgrid{grid-template-columns:1fr;gap:0}
  .toc{display:none}
  .artsgrid article{max-width:none}
  .leadrow{grid-template-columns:1fr;gap:28px;align-items:start}
}
@media (max-width:820px){
  .artshero{padding-top:28px}
  .artshero h1{font-size:34px;line-height:1.24}
  .artshero .kicker{margin-bottom:18px}
  .leadrow{margin-top:22px;padding-bottom:20px}
  .leadrow .sub{font-size:16px;line-height:1.9}
  /* 連番は見出しの上に積む */
  .artsgrid article{padding-top:32px;gap:44px}
  .artsgrid article > section{grid-template-columns:1fr;gap:10px}
  .secnum{font-size:30px;line-height:1}
  .artsgrid h2{font-size:24px;margin-bottom:16px}
  .artsgrid p,.artsgrid ul,.artsgrid ol{font-size:16px;line-height:2}
  .artsbody{padding-bottom:56px}
  .rgrid{grid-template-columns:1fr}
  .related{padding-top:40px;padding-bottom:56px}
  .callout{padding:20px 22px}
}
/* 最初の見出しより前の前置き(記事の要点をまとめた callout など)。
   連番を持たないので、連番カラムは空のまま本文カラムに置く(2026-08-23) */
.lede-block{display:grid;grid-template-columns:88px 1fr;gap:28px}
@media (max-width:820px){.lede-block{grid-template-columns:1fr;gap:10px}}

/* ---- 開運日カレンダー(記事内のデータ表。ハンドオフ kaiunbi.dc.html) ----
   最強開運日は色やバッジではなく**地の反転**で示す(2026-08-23) */
.lhead{display:flex;align-items:baseline;gap:14px;padding-bottom:10px;
  border-bottom:1px solid var(--rule);margin-top:6px}
.lhead span{font-family:Archivo,sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim)}
.luckygrid{display:grid;grid-template-columns:repeat(6,1fr);
  border-left:1px solid var(--rule-soft);margin-bottom:34px}
.luckygrid .lday{padding:18px 8px;text-align:center;
  border-right:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}
.luckygrid .dnum{font-family:Archivo,sans-serif;font-size:20px;font-weight:600}
.luckygrid .dwd{font-size:11px;color:var(--ink-dim);margin-top:4px}
/* 天赦日と一粒万倍日が重なる日 */
.luckygrid .lday.on{background:var(--ink);border-right-color:var(--ink);
  border-bottom-color:var(--ink)}
.luckygrid .lday.on .dnum{color:#fff}
.luckygrid .lday.on .dwd{color:#c9c9c2}
.lnote{margin:-22px 0 34px;font-size:12.5px;color:var(--ink-dim)}
.luckylist{display:grid;grid-template-columns:64px 1fr;margin-bottom:28px}
.luckylist .lm{padding:12px 0;font-family:Archivo,sans-serif;font-size:13px;
  font-weight:600;color:var(--primary);border-bottom:1px solid var(--rule-soft)}
.luckylist .ld{padding:12px 0;font-family:Archivo,sans-serif;font-size:14.5px;
  color:var(--ink-body);letter-spacing:.04em;border-bottom:1px solid var(--rule-soft)}
.luckylist .ld strong{color:var(--ink);font-weight:700}
@media (max-width:820px){
  .luckygrid{grid-template-columns:repeat(3,1fr)}
  .luckygrid .dnum{font-size:17px}
  .luckylist{grid-template-columns:52px 1fr}
  .luckylist .ld{font-size:13.5px}
}
/* 天赦日の決まり方(季節×干支の4列表)。ハンドオフ kaiunbi.dc.html の指定 */
.howbox{border:1px solid var(--rule);padding:26px 28px;margin:0 0 20px}
.howbox .lab{font-family:Archivo,sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:var(--primary);margin-bottom:16px}
.seasongrid{display:grid;grid-template-columns:repeat(4,1fr);
  border-left:1px solid var(--rule-soft)}
.seasongrid > *{border-right:1px solid var(--rule-soft);
  border-bottom:1px solid var(--rule-soft);text-align:center}
.seasongrid .s{padding:10px 0;font-family:Archivo,sans-serif;font-size:11px;
  font-weight:700;letter-spacing:.2em;color:var(--ink-dim)}
.seasongrid .e{padding:18px 0;font-size:30px;font-weight:700}
.howbox p{margin:16px 0 0;font-size:14px;line-height:1.9;color:var(--ink-body)}
@media (max-width:820px){.seasongrid .e{font-size:22px;padding:14px 0}}