:root{--bg:#f4efe3;--card:#fffdf6;--ink:#231f1a;--sub:#6b6256;--accent:#b3321f;--accent2:#2f5d62;--red:#b3321f;--line:#e0d5bd;--hl:#fbe8b8;--ok:#2f6b3a;--shadow:0 2px 10px rgba(60,40,20,.08);--font:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#171a1a;--card:#212524;--ink:#ece6d8;--sub:#a9a193;--accent:#e2705f;--accent2:#7fb5ba;--red:#e2705f;--line:#363c3a;--hl:#4a3f20;--ok:#7fc08a;--shadow:none}}
:root[data-theme="dark"]{--bg:#171a1a;--card:#212524;--ink:#ece6d8;--sub:#a9a193;--accent:#e2705f;--accent2:#7fb5ba;--red:#e2705f;--line:#363c3a;--hl:#4a3f20;--ok:#7fc08a;--shadow:none}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.9;font-size:18px}
a{color:var(--accent2)}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
header.top{background:var(--card);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:10px 16px}
header.top .logo{font-size:1.35rem;font-weight:700;letter-spacing:.15em;color:var(--accent);text-decoration:none}
header.top .logo small{display:block;font-size:.62rem;letter-spacing:.1em;color:var(--sub);font-weight:400}
header.top nav{margin-left:auto;display:flex;gap:14px;font-family:system-ui,sans-serif;font-size:.9rem;align-items:center}
header.top nav a{color:var(--ink);text-decoration:none}header.top nav a:hover{color:var(--accent)}
button,.btn{font-family:system-ui,sans-serif;font-size:.95rem;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:8px 16px;cursor:pointer;text-decoration:none;display:inline-block}
button:hover,.btn:hover{border-color:var(--accent);color:var(--accent)}
button:disabled{opacity:.35;cursor:default}
button.on{background:var(--accent);border-color:var(--accent);color:#fff}
/* hero */
.hero2{position:relative;overflow:hidden;color:var(--ink);background:linear-gradient(180deg,rgba(244,239,227,.25),rgba(244,239,227,.55) 60%,var(--bg)),url(../img/hero.webp) center 30%/cover no-repeat;isolation:isolate}
.hero2::before{content:"";position:absolute;inset:0;z-index:-1;background:transparent}
.hero2::after{content:"";position:absolute;inset:0;z-index:-1}
.hero2 .in{max-width:860px;margin:0 auto;padding:68px 16px 80px;text-align:center}
.eyebrow{font-family:system-ui,sans-serif;font-size:.8rem;letter-spacing:.35em;opacity:.85}
.hero2 h1{font-size:clamp(2.2rem,7vw,3.8rem);letter-spacing:.22em;margin:.3em 0 .1em;font-weight:700;color:var(--ink);text-shadow:0 0 18px rgba(255,250,235,.9),0 0 4px rgba(255,250,235,.9)}.hero2 .catch,.hero2 .lead,.hero2 .eyebrow{text-shadow:0 0 12px rgba(255,250,235,.95),0 0 3px rgba(255,250,235,.9)}
.catch{font-size:clamp(1.05rem,3.2vw,1.45rem);letter-spacing:.12em;margin:.2em 0 1.2em}
.lead{max-width:34em;margin:0 auto 1.6em;font-size:.98rem;line-height:2;opacity:.95}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta a{font-family:system-ui,sans-serif;text-decoration:none;border-radius:999px;padding:12px 26px;font-size:1rem;font-weight:700;letter-spacing:.06em}
.cta .p{background:var(--accent);color:#fff;box-shadow:0 6px 20px rgba(179,50,31,.45)}
.cta .s{background:rgba(255,253,246,.75);color:var(--ink);border:1px solid var(--ink)}
.stats{display:flex;justify-content:center;gap:clamp(14px,4vw,40px);margin-top:34px;flex-wrap:wrap}
.stats div{font-family:system-ui,sans-serif;text-align:center}
.stats b{display:block;font-size:clamp(1.6rem,5vw,2.3rem);font-family:var(--font);line-height:1.1}
.stats span{font-size:.72rem;letter-spacing:.15em;opacity:.85}
.wide{max-width:1040px;margin:0 auto;padding:0 16px}
.hd{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:56px 0 6px}
.hd h2{font-size:1.5rem;letter-spacing:.14em;margin:0;border:0;padding:0}
.hd h2::before{content:"";display:inline-block;width:.5em;height:1.1em;background:var(--accent);margin-right:.5em;vertical-align:-.15em;border-radius:2px}
.hd p{margin:0;color:var(--sub);font-family:system-ui,sans-serif;font-size:.85rem}
.today2{position:relative;margin:-40px auto 0;max-width:760px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 30px;box-shadow:0 12px 36px rgba(40,30,10,.2);z-index:2;text-align:center}
.today2::before{content:"今日の一句";position:absolute;top:-13px;left:24px;background:var(--accent);color:#fff;font-family:system-ui,sans-serif;font-size:.78rem;letter-spacing:.2em;padding:3px 14px;border-radius:999px}
.today2 .t{font-size:clamp(1.25rem,3.6vw,1.7rem);line-height:2.1;margin:8px 0}
.today2 .m{color:var(--sub);font-size:.98rem}
.today2 .row{margin-top:14px}
/* 柱カード */
.moods{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:16px}
.mood{border-radius:16px;padding:20px 18px 16px;color:#fff;min-height:190px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.mood .em{font-size:2rem;line-height:1}
.mood h3{margin:6px 0 2px;font-size:1.2rem;letter-spacing:.08em;color:#fff}
.mood p{margin:0 0 10px;font-size:.85rem;opacity:.95;line-height:1.6}
.mood .ws{margin-top:auto;display:flex;gap:6px;flex-wrap:wrap}
.mood .ws a{font-family:system-ui,sans-serif;font-size:.8rem;background:rgba(255,255,255,.2);color:#fff;text-decoration:none;border-radius:999px;padding:4px 12px;border:1px solid rgba(255,255,255,.45)}
.mood .ws a:hover{background:rgba(255,255,255,.4)}
.m-A{background:linear-gradient(135deg,#d9822b,#b3321f)}.m-B{background:linear-gradient(135deg,#2f5d62,#1f3f55)}
.m-C{background:linear-gradient(135deg,#7a5ca8,#3f3a78)}.m-D{background:linear-gradient(135deg,#4a7a52,#2c5a52)}.m-E{background:linear-gradient(135deg,#8a6a32,#5a3d1e)}
/* 名場面 */
.picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:16px}
.pick{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 18px 14px;box-shadow:var(--shadow);display:flex;flex-direction:column;position:relative}
.pick::before{content:"“";position:absolute;top:-6px;left:12px;font-size:3.6rem;color:var(--accent);opacity:.25}
.pick .o{font-size:1.1rem;line-height:2.1;margin:6px 0 8px}
.pick .q2{font-size:.9rem;color:var(--sub);line-height:1.7;border-top:1px dashed var(--line);padding-top:8px}
.pick .q2::before{content:"💬 "}
.pick .from{margin-top:auto;padding-top:10px;font-family:system-ui,sans-serif;font-size:.78rem}
/* 棚 */
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.chips button{font-size:.85rem;padding:5px 14px}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.work{background:var(--card);border:1px solid var(--line);border-radius:12px;color:var(--ink);box-shadow:var(--shadow);display:block;text-decoration:none;overflow:hidden;transition:transform .2s,box-shadow .2s}
.work:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(40,30,10,.2);border-color:var(--accent)}
.work .cv{height:96px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.95);font-size:2.2rem;letter-spacing:.12em;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.3);padding:0 10px;text-align:center;line-height:1.2}
.work .bd{padding:12px 16px 14px}
.work .k{font-family:system-ui,sans-serif;font-size:.72rem;color:var(--sub)}
.work .ti{font-size:1.05rem;font-weight:700;margin:2px 0;line-height:1.6}
.work .b{font-size:.85rem;color:var(--sub);line-height:1.6;margin-top:4px}
.play{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:16px}
.playc{display:flex;gap:14px;align-items:center;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:var(--shadow)}
.playc:hover{border-color:var(--accent)}
.playc .ic{font-size:2.4rem;flex:none}
.playc b{display:block;font-size:1.15rem;letter-spacing:.06em}
.playc span{font-size:.88rem;color:var(--sub);line-height:1.6}
/* 章ページ */
main{max-width:820px;margin:0 auto;padding:16px}
.crumb{font-family:system-ui,sans-serif;font-size:.8rem;color:var(--sub);margin:12px 0}.crumb a{color:var(--sub)}
.chead{border-radius:16px;padding:26px 22px;color:#fff;margin:8px 0 18px;box-shadow:var(--shadow)}
.chead .src{color:rgba(255,255,255,.85);margin:0 0 6px}
.chead h1{margin:.1em 0;font-size:clamp(1.4rem,4.4vw,2rem);line-height:1.5;color:#fff;letter-spacing:.06em}
.chead .badge{border-color:rgba(255,255,255,.7);color:#fff}
h1{font-size:1.7rem;line-height:1.5;margin:.6em 0}
h2{font-size:1.1rem;border-left:5px solid var(--accent);padding-left:10px;margin:2.2em 0 .7em;letter-spacing:.05em}
.q{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--accent2);border-radius:12px;padding:14px 18px;font-size:1.08rem;box-shadow:var(--shadow)}
.story p{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 18px;margin:12px 0;box-shadow:var(--shadow)}
.badge{display:inline-block;font-size:.7rem;border:1px solid var(--sub);color:var(--sub);border-radius:999px;padding:0 10px;margin-left:8px;vertical-align:middle;font-family:system-ui,sans-serif}
.src{color:var(--sub);font-size:.82rem;font-family:system-ui,sans-serif}
.kd{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:14px 0;box-shadow:var(--shadow)}
.line{font-size:1.6rem;line-height:2.7;letter-spacing:.04em}
.tk{display:inline-block;position:relative;padding:0 .12em;margin-bottom:.9em;cursor:default}
.tk .k{position:absolute;left:-.2em;bottom:-1.25em;font-size:.5em;color:var(--red);font-weight:700;white-space:nowrap}
.tk .o{position:absolute;right:-.5em;bottom:-.3em;font-size:.42em;color:var(--sub);white-space:nowrap}
.tk .n{position:absolute;left:0;right:0;top:-.8em;text-align:center;font-size:.45em;color:var(--ok);font-weight:700}
.tk.hide-k .k,.tk.hide-k .o,.tk.hide-n .n{display:none}
.tk.second{opacity:.6;font-size:.62em;vertical-align:.25em}
.tk.nohint .k,.tk.nohint .o{display:none}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.reveal{display:none;margin-top:10px;padding:10px 14px;border-radius:10px;background:var(--bg);border-left:4px solid var(--accent2)}
.reveal.on{display:block}
.reveal b{display:block;font-size:.72rem;color:var(--sub);font-weight:400;font-family:system-ui,sans-serif}
ruby rt{font-size:.5em}
.note{background:var(--hl);border-radius:12px;padding:12px 16px}
.one{font-size:1.3rem;text-align:center;margin:1.8em 0;padding:18px;border-radius:14px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);position:relative}
.one::before{content:"ひとことで言うと";display:block;font-family:system-ui,sans-serif;font-size:.7rem;letter-spacing:.2em;color:var(--accent)}
.quiz .c{display:block;width:100%;text-align:left;margin:6px 0;border-radius:10px;padding:10px 14px}
.quiz .c.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.quiz .c.ng{opacity:.5}
.why{color:var(--sub);font-size:.95rem;margin:2px 0 10px}
.pz .tk{border:2px solid var(--line);border-radius:8px;margin:4px;padding:2px 10px;cursor:pointer;background:var(--card);user-select:none}
.pz .tk.picked{border-color:var(--ok);color:var(--ok)}
.pz .tk.shake{animation:sh .3s}
@keyframes sh{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.pz .line{line-height:3.2}
footer{max-width:1040px;margin:2.5em auto 0;padding:20px 16px 40px;border-top:1px solid var(--line);color:var(--sub);font-size:.78rem;font-family:system-ui,sans-serif}
footer a{color:var(--sub)}
@media(max-width:560px){.hero2 .in{padding:52px 16px 64px}.today2{margin:-30px 12px 0;padding:22px 18px}}

/* 水墨画の挿絵 */
.stats b,.stats span{text-shadow:0 0 10px rgba(255,250,235,.95)}
.mood,.work .cv,.chead{background-size:cover;background-position:center;color:#231f1a}
.im-A{background-image:linear-gradient(90deg,rgba(255,250,235,.82),rgba(255,250,235,.25)),url(../img/pillar-a.webp)}
.im-B{background-image:linear-gradient(90deg,rgba(255,250,235,.82),rgba(255,250,235,.25)),url(../img/pillar-b.webp)}
.im-C{background-image:linear-gradient(90deg,rgba(255,250,235,.82),rgba(255,250,235,.25)),url(../img/pillar-c.webp)}
.im-D{background-image:linear-gradient(90deg,rgba(255,250,235,.82),rgba(255,250,235,.25)),url(../img/pillar-d.webp)}
.im-E{background-image:linear-gradient(90deg,rgba(255,250,235,.82),rgba(255,250,235,.25)),url(../img/pillar-e.webp)}
.mood h3,.chead h1{color:#231f1a}
.mood p{opacity:1}
.mood .ws a{background:rgba(255,253,246,.8);color:#231f1a;border:1px solid #231f1a}
.mood .ws a:hover{background:#fff}
.work .cv{color:#231f1a;text-shadow:0 0 10px rgba(255,250,235,.95),0 0 3px rgba(255,250,235,.95)}
.chead .src{color:#6b6256}.chead .badge{border-color:#6b6256;color:#6b6256;background:rgba(255,253,246,.6)}
.chead h1{text-shadow:0 0 12px rgba(255,250,235,.9)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero2{background:linear-gradient(180deg,rgba(23,26,26,.55),rgba(23,26,26,.8) 60%,var(--bg)),url(../img/hero.webp) center 30%/cover no-repeat}
:root:not([data-theme="light"]) .im-A,:root:not([data-theme="light"]) .im-B,:root:not([data-theme="light"]) .im-C,:root:not([data-theme="light"]) .im-D,:root:not([data-theme="light"]) .im-E{background-blend-mode:normal;filter:none}}

/* 縦書き（漢詩・切り替え式） */
.vert .lines{display:flex;flex-direction:row-reverse;justify-content:center;gap:.35em;overflow-x:auto;padding:.2em 0}
.vert .line{writing-mode:vertical-rl;line-height:1.5;letter-spacing:.08em;white-space:nowrap}
.vert .tk{margin:0 .6em;padding:.1em 0}
.vert .tk .k,.vert .tk .o{writing-mode:vertical-rl;text-orientation:upright;line-height:1;letter-spacing:0}
.vert .tk .k{left:-.62em;right:auto;bottom:-.1em;top:auto}
.vert .tk .o{right:-.62em;left:auto;bottom:-.1em;top:auto}
.vert .tk .n{left:auto;right:-.7em;top:-.2em;width:auto;writing-mode:horizontal-tb}
.vert .slines{display:flex;flex-direction:row-reverse;justify-content:center;gap:.9em;overflow-x:auto}
.vert .sl{writing-mode:vertical-rl;font-size:1.15rem;line-height:1.6;letter-spacing:.1em;white-space:nowrap}
.vt{margin-left:auto}
.vert>.line{margin:0 auto;width:max-content;max-width:100%;overflow-x:auto}
.vert .reveal b{writing-mode:horizontal-tb}
#pk.vert .tk{margin:3px .75em;padding:2px 0}

/* 章ごとの水墨画 */
.ci{background-image:linear-gradient(90deg,rgba(255,250,235,.8),rgba(255,250,235,.2)),var(--ci)}
.ill{margin:12px 0 18px}
.ill img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow)}

/* 和紙の質感・朱の返り点・落款 */
body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
:root[data-theme="dark"] body{background-image:none}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) body{background-image:none}}
.tk .k{font-family:"Yuji Syuku","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;font-weight:900;color:#c23b22;text-shadow:.3px 0 0 #c23b22,0 .3px 0 #c23b22;transform:rotate(-3deg)}
.vert .tk .k{transform:none}
.one::after{content:"漢";position:absolute;right:14px;bottom:12px;width:26px;height:26px;line-height:26px;text-align:center;font-size:.95rem;font-weight:700;color:#fff;background:#c23b22;border-radius:3px;transform:rotate(4deg);opacity:.9;font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif}
.one{padding-bottom:30px}

/* はじめての道すじ・つぎに読む */
.path{list-style:none;margin:0 0 8px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.path a{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow)}
.path .no{flex:none;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:system-ui,sans-serif}
.path .tx{display:flex;flex-direction:column;line-height:1.5}.path .tx span{font-size:.8rem;color:var(--sub);font-family:system-ui,sans-serif}
.nextl{list-style:none;padding:0;margin:8px 0}.nextl li{margin:6px 0;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}.nextl span{font-size:.8rem;color:var(--sub);font-family:system-ui,sans-serif}

/* 入門コラム */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-bottom:8px}
.col{display:flex;flex-direction:column;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);background-size:cover;background-position:center}
.col .cn{font-family:system-ui,sans-serif;font-size:.75rem;color:var(--accent);letter-spacing:.15em}
.col .ct{font-weight:700;line-height:1.5}
.col .cl{font-size:.82rem;color:var(--sub);line-height:1.6;font-family:system-ui,sans-serif}
.col.ci{background-image:linear-gradient(90deg,rgba(255,250,235,.86),rgba(255,250,235,.28)),var(--ci)}
.rpt{font-size:.82rem;color:var(--sub);margin-top:1.6em;font-family:system-ui,sans-serif}