/* BINAH Lab「書物」版（第1段階）。HP本体と同じ頁組み。外部フォント・スクリプトなし、CSPは変更しない。書体はシステムの明朝系だけ（Klee Oneは第2段階。入れるときはCSPの font-src を審査） */
:root{--ink:#1B2340;--paper:#F5F0E6;--lamp:#C9973A;--ink70:rgba(27,35,64,.72);--ink40:rgba(27,35,64,.4);--serif:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho","Noto Serif JP","BIZ UDPMincho","MS PMincho",serif;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--paper:#EAE4D5}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--serif);color:var(--ink);background:var(--ink);line-height:2;font-size:17px;overflow-wrap:anywhere}
body::before{content:"";position:fixed;inset:0;background:url(/assets/paper-tile.svg) 0 0/260px;opacity:.05;pointer-events:none}
a{color:inherit;text-underline-offset:4px}
h1,h2,h3,p,dl,dd,dt,ul,ol,table{margin:0;padding:0}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--lamp);outline-offset:3px}
.leaf{position:relative;width:min(1200px,calc(100% - 64px));margin:48px auto;padding:56px 72px 40px;background:var(--paper) url(/assets/paper-tile.svg) 0 0/260px;box-shadow:0 40px 90px rgba(0,0,0,.45)}
.leaf::before{content:"";position:absolute;inset:0 auto 0 0;width:70px;background:linear-gradient(90deg,rgba(27,35,64,.16),rgba(27,35,64,0));pointer-events:none}
.leaf::after{content:"";position:absolute;inset:22px;border:1px solid var(--ink40);box-shadow:inset 0 0 0 5px var(--paper),inset 0 0 0 6px rgba(27,35,64,.22);pointer-events:none}
.run{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 24px;font-size:13px;letter-spacing:.2em;color:var(--ink70);padding-bottom:10px;border-bottom:1px solid var(--ink40);margin-bottom:56px}
.run{align-items:center}
.lg{display:flex;align-items:center;gap:10px;line-height:0;text-decoration:none;margin:-14px 0 -10px -14px;color:var(--ink)}
.lg img{display:block;height:auto}
.lg .sub{font-size:15px;letter-spacing:.3em;line-height:1;color:var(--ink70);padding-top:2px}
.lg .sub{white-space:nowrap}
.run nav{display:flex;flex-wrap:wrap;gap:4px 1.8em}
.run nav a{text-decoration:none;padding:6px 0}
.run nav a:hover{text-decoration:underline}
main.pg{position:relative;z-index:1}
/* 頁：左の余白に日付・PR表示（注の位置）、中央に本文。右の余白は将来の広告枠のために空けておく */
main.pg>*,article>*{grid-column:2}
main.pg,article{display:grid;grid-template-columns:200px minmax(0,640px) 1fr;column-gap:40px;align-items:start}
article{grid-column:1/-1}
main.pg>article{grid-column:1/-1}
.crumb{grid-column:2;font-size:13px;letter-spacing:.12em;color:var(--ink70);margin-bottom:24px}
.crumb a{text-decoration:none}
h1{font-size:40px;line-height:1.5;font-weight:400;letter-spacing:.04em;margin-bottom:28px;text-wrap:balance}
h2{font-size:15px;font-weight:400;letter-spacing:.3em;color:var(--ink70);margin:56px 0 20px;display:flex;align-items:center;gap:18px;line-height:1.7}
h2::before{content:"";flex:none;width:44px;height:1px;background:var(--ink)}
article p,main.pg>p{margin-bottom:1.1em}
article ul,article ol{margin:0 0 1.1em;padding-left:1.5em}
article li{margin-bottom:.4em}
strong{font-weight:700}
.meta,.prn{grid-column:1;font-size:13px;line-height:1.85;color:var(--ink70);border-top:1px solid var(--ink40);padding-top:8px;margin:0 0 14px;max-width:200px}
.meta{grid-row:2}
.prn{grid-row:3;border:0;border-top:1px solid var(--ink40);margin-top:8px}
.note{margin-top:2.4em;padding-top:14px;border-top:1px solid var(--ink40);font-size:14px;color:var(--ink70)}
.muted,.small{color:var(--ink70);font-size:14px}
.tbl{border-collapse:collapse;width:100%}
.tbl th,.tbl td{text-align:left;vertical-align:top;border-bottom:1px solid var(--ink40);padding:10px 8px}
.tbl th{width:7em;font-weight:400;color:var(--ink70)}
.posts{list-style:none;padding:0!important;border-top:1px solid var(--ink)}
.posts li{margin:0!important;padding:16px 0;border-bottom:1px solid var(--ink40);font-size:19px;line-height:1.7}
.posts a{text-decoration:none}
.posts a:hover{text-decoration:underline}
.so{display:block;width:64px;height:auto;margin:2.4em 0 0 auto;opacity:.85}
/* 広告・PRの枠（将来）：本文の列の幅（640px）の中に、「広告」の表示つきで置く。左の注の位置の「PR」表示は常に残す。右の余白には置かない */
.ad{border:1px solid var(--ink40);padding:10px 14px 14px;margin:2em 0;font-size:12px;color:var(--ink70);letter-spacing:.2em}
.foot{position:relative;z-index:1;margin-top:80px;padding-top:12px;border-top:1px solid var(--ink40);font-size:12px;line-height:1.9;color:var(--ink70);letter-spacing:.08em}
.foot p{margin:0 0 4px}
.foot a{margin-right:1.4em}
@media (max-width:900px){
 .leaf{width:calc(100% - 20px);margin:10px auto;padding:30px 22px 24px}
 .leaf::after{inset:10px}
 .run{margin-bottom:32px;font-size:12px}
 .lg img{width:110px;height:auto}
 .lg{margin-left:-8px}
 main.pg,article{display:block}
 h1{font-size:28px;margin-bottom:20px}
 .meta,.prn{max-width:none;margin:0 0 8px 12px;padding:0 0 0 12px;border:0;border-left:1px solid var(--ink40);font-size:12.5px}
 .so{width:56px}
 .posts li{font-size:17px}
}