/* Honte（本手）— 証券印刷 × 碁盤。紙の色、墨、朱。角丸のカードや飾りのアイコンは使わない */
:root{
  --paper:#F4F1EA; --paper2:#EDE8DC; --ink:#1C1C1C; --sub:#5B554A; --rule:#CFC6B4; --line:#3B2A12;
  --shu:#B4442B; --kaya:#E6C48C;
  --mincho:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --gothic:"BIZ UDPGothic","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--gothic);font-size:16px;line-height:1.9;
  background-image:linear-gradient(var(--paper2) 1px,transparent 1px);background-size:100% 3px}
a{color:var(--ink);text-decoration-color:var(--shu);text-underline-offset:3px}
a:hover{color:var(--shu)}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
@media(max-width:600px){.wrap{padding:0 16px}}

/* 上の帯 */
header.site{border-bottom:1px solid var(--ink)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;padding-bottom:14px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:14px;text-decoration:none;color:var(--ink)}
.brand img{height:30px;width:auto;display:block}
.brand small{font-family:var(--mincho);font-size:.82rem;color:var(--sub);letter-spacing:.06em}
nav.site{display:flex;gap:22px;flex-wrap:wrap;font-size:.9rem}
nav.site a{text-decoration:none;color:var(--sub)}
nav.site a:hover{color:var(--ink)}
nav.site a[aria-current]{color:var(--ink);border-bottom:2px solid var(--shu);padding-bottom:2px}
.band{height:24px;background:url(/assets/band.svg) repeat-x center;border-bottom:1px solid var(--rule)}

/* 本文 */
main{display:block}
main .inner{max-width:1040px;margin:0 auto;padding:48px 24px 40px}
@media(max-width:600px){main .inner{padding:32px 16px 32px}}
h1{font-family:var(--mincho);font-weight:800;font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.38;margin:0 0 24px;letter-spacing:.02em;max-width:18em}
@media(max-width:420px){h1{font-size:1.72rem}}
h2{font-family:var(--mincho);font-weight:700;font-size:1.6rem;line-height:1.45;margin:56px 0 16px;letter-spacing:.03em;padding-top:18px;border-top:1px solid var(--ink)}
h3{font-family:var(--mincho);font-weight:700;font-size:1.18rem;margin:28px 0 8px}
p,ul,ol{margin:0 0 14px}
main p,main li{max-width:42em}
.lead{font-size:1.05rem;max-width:36em}
.meta{color:var(--sub);font-size:.88rem}
.kicker{font-family:var(--mincho);font-size:.95rem;letter-spacing:.2em;color:var(--shu);margin:0 0 18px}
.stance{font-family:var(--mincho);font-weight:700;font-size:1.1rem;max-width:36em}
.ph{display:inline-block}
h1,h2,h3,.kicker,.stance{word-break:auto-phrase}

/* 見出しの段（トップ） */
.hero{position:relative;padding:24px 0 40px;overflow:hidden}
.hero > *{position:relative}
.hero .rosette{position:absolute;right:-90px;top:-70px;width:520px;height:520px;background:url(/assets/rosette.svg) no-repeat center/contain;pointer-events:none}
@media(max-width:760px){.hero .rosette{width:340px;height:340px;right:-150px;top:-40px;opacity:.6}}

/* 碁盤の罫 */
.goban{height:44px;margin:40px 0 8px;opacity:.55;background:
  radial-gradient(circle,var(--line) 2.6px,transparent 3px) center/44px 44px,
  linear-gradient(90deg,transparent 21.5px,var(--rule) 21.5px,var(--rule) 22.5px,transparent 22.5px) 0 0/44px 44px,
  linear-gradient(transparent 21.5px,var(--line) 21.5px,var(--line) 22.5px,transparent 22.5px) 0 0/44px 44px;
  background-repeat:no-repeat,repeat-x,repeat-x}
.goban + h2{border-top:0;padding-top:0;margin-top:24px}

/* 注意報 */
.alertline{display:grid;grid-template-columns:150px 1fr;gap:24px;border-top:2px solid var(--shu);border-bottom:1px solid var(--rule);padding:22px 0;margin:8px 0 0}
@media(max-width:600px){.alertline{grid-template-columns:1fr;gap:6px}}
.alertline .date{font-family:var(--mincho);color:var(--shu);font-weight:700;letter-spacing:.05em}
.alertline h3{margin:0 0 8px;font-size:1.22rem}
.alertline p{margin:0 0 8px}

/* 囲み：線で区切る。角丸にしない */
.box{border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);padding:18px 0;margin:0 0 20px}
.box.accent{background:var(--paper2);border:1px solid var(--rule);padding:22px 24px}
.box.alert{border-top:2px solid var(--shu)}
.box h3{margin-top:0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 32px;margin:0 0 20px;border-top:1px solid var(--ink)}
.cards .box{border-top:0;margin:0}
.tag{display:inline-block;font-family:var(--gothic);font-size:.72rem;letter-spacing:.1em;border:1px solid var(--ink);padding:0 6px;margin:0 8px 6px 0;vertical-align:2px}
.tag.alert{border-color:var(--shu);color:var(--shu)}
.button{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;padding:10px 22px;font-weight:700;border:1px solid var(--ink)}
.button:hover{background:var(--shu);border-color:var(--shu);color:var(--paper)}

/* 表 */
.table{overflow-x:auto;margin:0 0 16px}
table{border-collapse:collapse;width:100%;font-size:.95rem;background:rgba(255,255,255,.35)}
th,td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
thead th,tr:first-child th{font-family:var(--mincho);font-weight:700;border-bottom:2px solid var(--ink)}
td.lv{white-space:nowrap;font-family:var(--mincho);font-weight:700}
td.lv.hi{color:var(--shu)}

/* 検証の表と、事件の時間 */
.evidence{display:grid;grid-template-columns:1fr 280px;gap:40px;align-items:start}
@media(max-width:860px){.evidence{grid-template-columns:1fr}}
.aside{border-left:1px solid var(--ink);padding-left:22px}
.aside .big{font-family:var(--mincho);font-size:2.6rem;font-weight:800;line-height:1.1;margin:0}
.aside p{margin:6px 0 18px;font-size:.95rem}

/* 一・二・三の一覧 */
ol.steps{list-style:none;margin:0;padding:0;counter-reset:s;border-top:1px solid var(--ink)}
ol.steps li{display:grid;grid-template-columns:72px 1fr auto;gap:20px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--rule);counter-increment:s;max-width:none}
ol.steps li::before{content:counter(s,cjk-ideographic);font-family:var(--mincho);font-size:2rem;font-weight:800;color:var(--shu);line-height:1}
@media(max-width:600px){ol.steps li{grid-template-columns:48px 1fr}ol.steps li .go{grid-column:2}}
ol.steps h3{margin:0 0 4px}
ol.steps p{margin:0;color:var(--sub)}
.go{font-size:.9rem;white-space:nowrap}

/* 封じ手 */
.fuuji{display:grid;grid-template-columns:240px 1fr;gap:40px;align-items:center;background:var(--paper2);padding:32px;border:1px solid var(--rule);margin:48px 0 0}
@media(max-width:760px){.fuuji{grid-template-columns:1fr;padding:22px}}
.fuuji h2{border-top:0;padding-top:0;margin-top:0}

/* よくある質問 */
dl.faq{margin:0 0 20px;border-top:1px solid var(--ink)}
dl.faq dt{font-family:var(--mincho);font-weight:700;font-size:1.08rem;padding:18px 0 6px}
dl.faq dd{margin:0;padding:0 0 18px;border-bottom:1px solid var(--rule);max-width:44em;color:var(--ink)}

blockquote{margin:0 0 14px;padding:4px 16px;border-left:2px solid var(--shu);color:var(--sub)}
code{font-size:.9em;background:var(--paper2);padding:0 4px}
pre{overflow-x:auto;background:var(--paper2);border:1px solid var(--rule);padding:14px;font-size:.85rem;line-height:1.55}
pre code{background:none;padding:0}
hr{border:0;border-top:1px solid var(--rule);margin:32px 0}

/* フッター */
footer.site{border-top:1px solid var(--ink);margin-top:24px;color:var(--sub);font-size:.85rem;padding:22px 0 48px}
footer.site .wrap{display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}
footer.site a{color:var(--sub)}
