@import url("https://fonts.googleapis.com/css2?family=Yusei+Magic&family=Klee+One:wght@400;600&display=swap");
/* ============================================================
   らくがき帳 — けはれひょんの雰囲気を踏襲した設え（2026-09-08 案1）
   白い紙・黒の線・マーカーの見出し・蛍光の黄ひとつ。各ページの <style> の後に読み込む。
   ============================================================ */
html:root {
  --hand: 255px 14px 225px 14px / 14px 225px 14px 255px;
  --hand-s: 180px 10px 160px 10px / 10px 160px 10px 180px;
  --font-marker: "Yusei Magic", "Klee One", "Hiragino Sans", sans-serif;
  --font-hand: "Klee One", "Noto Sans JP", "Hiragino Sans", sans-serif;
  --hi: #ffe14d;
  --hi-ink: #e6a800;
  /* 各ページのトークンを紙と線へ */
  --kinari: #ffffff; --kinari-deep: #f0f0ee; --shiro: #ffffff;
  --paper: #ffffff; --paper2: #ffffff;
  --sumi: #1a1a1a; --sumi-mid: #333333; --sumi-light: #4a4a4a; --hai: #7a7a7a;
  --ink: #1a1a1a; --ink2: #4a4a4a; --ink3: #8a8a8a; --line: rgba(26,26,26,.9);
  --shu: #e6a800; --shu-muted: #c99300; --shu-light: #f0b400;
  --kohaku: #ffe14d;
  --font-serif: var(--font-marker);
  --font-sans: var(--font-hand);
  --font-en: var(--font-marker);
  --radius-s: 8px; --radius-m: 10px;
  --shadow-card: none; --shadow-hover: none;
  --yoru-bg: #111111; --yoru-surface: #161616; --yoru-line: #ffffff; --yoru-text: #ffffff; --yoru-muted: #bdbdbd;
}
html[data-toki=yoru]:root { --paper: #111111; --paper2: #161616; --ink: #ffffff; --ink2: #dddddd; --ink3: #9a9a9a; --line: rgba(255,255,255,.85); --shu: #ffe14d; --hi-ink: #ffe14d; }

body { font-family: var(--font-hand); }
h1, h2, h3, .sec-title, .en, .hero-label, .sec-label, .nav-logo .en, .brand, .intro-title, .prompt, .footer-catch, .yomi .w, .ask, .q .n, .ichi .n, .tag, .num, .kicker {
  font-family: var(--font-marker) !important; font-weight: 400 !important; letter-spacing: .04em;
}
/* 見出しのマーカー下線（蛍光） */
.sec-title, .intro-title, .ask { display: inline-block; background: linear-gradient(transparent 64%, var(--hi) 64%, var(--hi) 90%, transparent 90%); padding: 0 .1em; }
.hero h1 .shu-ten, .rinen-state strong { color: var(--ink); }
.rinen-state strong { border-bottom: 0 !important; background: linear-gradient(transparent 60%, var(--hi) 60%, var(--hi) 92%, transparent 92%); }
.sec-rule, .rule { background: var(--ink) !important; height: 2px !important; border-radius: 999px; }
.bar { background: #fff !important; border-top: 2px solid var(--ink) !important; }

/* 線で描いた枠 */
.rinen-card, .jigyo-card, .shin-card, .wp-cover, .gaiyo, .card, .box, .plan, .item, .toi, .two > *, .list, .flow > *, .faq details, .steps > *, .stage, .kasane-text, .r-foot, .tana, .mono li, .yomi {
  background: #fff !important; border: 2px solid var(--ink) !important; border-radius: var(--hand) !important; box-shadow: none !important; color: var(--ink);
}
html[data-toki=yoru] .rinen-card, html[data-toki=yoru] .card, html[data-toki=yoru] .box, html[data-toki=yoru] .tana, html[data-toki=yoru] .yomi { background: #111 !important; }
.rinen-card:hover, .jigyo-card:hover, .card:hover { transform: rotate(-.6deg) translateY(-2px) !important; }
.jigyo-tag, .tag { border: 1.5px solid var(--ink) !important; border-radius: 999px !important; color: var(--ink) !important; background: #fff !important; font-family: var(--font-marker) !important; }
.jigyo-tag.kaikou, .tag.now { background: var(--hi) !important; color: var(--ink) !important; }
.jigyo-tag.now { color: var(--hi-ink) !important; }

/* ボタン：白い紙に黒い線。主役だけ蛍光の黄 */
.btn, .btn-p, .btn-s, .btn-g, .btn-k, .btn-ghost, .btn-secondary, .btn-kohaku, .btn-ghost-dark, .btns a, .door, .shin-start .btn, .yomi a, .yomi button:not(.q), .cta a {
  font-family: var(--font-marker) !important; letter-spacing: .06em !important; font-weight: 400 !important;
  background: #fff !important; color: var(--ink) !important; border: 2px solid var(--ink) !important; border-radius: var(--hand) !important; box-shadow: none !important; transform: none !important; text-decoration: none;
}
.btn-primary, .btn-p, .btn-k, .btn-kohaku, .door.acc, .yomi a.acc, .cta a.acc, .nav-cta, .shin-start .btn-primary, .contact-btns .btn-primary {
  background: var(--hi) !important; color: var(--ink) !important; border: 2px solid var(--ink) !important;
}
.btn:hover, .btn-p:hover, .btn-s:hover, .btns a:hover, .door:hover, .yomi a:hover { background: var(--hi) !important; color: var(--ink) !important; transform: rotate(-1deg) !important; }
.opt { font-family: var(--font-hand) !important; }
.opt i { border-color: var(--ink) !important; }
.opt.picked i, .opt:hover i { background: var(--hi-ink) !important; border-color: var(--hi-ink) !important; }
.progress i.on, .shin-progress i.on { background: var(--hi-ink) !important; }

/* 帯（ナビ・フッター） */
.nav { background: rgba(255,255,255,.92) !important; border-bottom: 2px solid var(--ink) !important; backdrop-filter: none; }
.nav-links a, .nav-sp a { font-family: var(--font-hand); color: var(--ink) !important; }
.nav-links a::after { background: var(--hi-ink) !important; height: 2px !important; }
.nav-burger span { background: var(--ink) !important; }
footer, .footer, footera { background: #111 !important; color: #fff !important; }
footer a, .footer a { color: #fff !important; }
.footer-catch { color: #fff !important; }
.footer-copy, .footer-mail { color: #bdbdbd !important; }
/* 墨ダークの帯は「黒い紙に白い線」 */
.shiryo { background: #111 !important; color: #fff !important; }
.shiryo .btn-ghost-dark { color: #fff !important; border-color: #fff !important; background: #111 !important; }
.shiryo .btn-kohaku { background: var(--hi) !important; color: var(--ink) !important; border-color: #fff !important; }
.shiryo .wp-cover { background: #111 !important; border-color: #fff !important; }

/* 夜のページ（塾・色の兆）：黒い紙に白い線 */
body.yoru { background: #111 !important; color: #fff !important; }
body.yoru .nav { background: rgba(17,17,17,.92) !important; border-bottom-color: #fff !important; }
body.yoru .nav a, body.yoru .nav span, body.yoru .nav .en { color: #fff !important; }
body.yoru .bar { background: #111 !important; border-top-color: #fff !important; }
body.yoru .box, body.yoru .list, body.yoru .toi, body.yoru .two > *, body.yoru .flow > *, body.yoru .stage { background: #111 !important; border-color: #fff !important; color: #fff !important; }
body.yoru .btn, body.yoru .btn-g, body.yoru .btn-ghost, body.yoru .btn-secondary { background: #111 !important; color: #fff !important; border-color: #fff !important; }
body.yoru .btn:hover, body.yoru .btn-g:hover { background: var(--hi) !important; color: #1a1a1a !important; }
body.yoru .rule { background: #fff !important; }
body.yoru .sec-title, body.yoru .intro-title { background: linear-gradient(transparent 64%, rgba(255,225,77,.55) 64%, rgba(255,225,77,.55) 90%, transparent 90%); }

/* 入口（問い・墨）の細部 */
.trail li::before, .trail li+li i, .pt::before, .ten i, .jino .koko::before, .mark circle, .m.f, .mono b i.f { background: var(--ink); fill: var(--ink); }
.mark circle.now, .ten i { background: var(--hi-ink) !important; fill: var(--hi-ink) !important; }
.mark path, .m.o, .m.d, .mono b i { stroke: var(--ink); border-color: var(--ink); }
.hint, .cue, .sign, .prev, .cl, .dlab { font-family: var(--font-hand) !important; }
.yomi .w { font-size: 1.9rem !important; }
.hyon-fuki, .hyon-sheet { font-family: var(--font-hand); }

/* 紙の目・影は消す（らくがき帳は白い紙） */
body::before { display: none !important; }
.grain { display: none !important; }
.hero::before, .hero::after { display: none !important; }
img.hero-mark { filter: none; }
::selection { background: var(--hi); color: var(--ink); }

/* 黒い帯（資料）と夜のページの見出し：白い字に黄の帯は読めないので、細い下線にする。表紙の字は白 */
.shiryo .sec-title, body.yoru .sec-title, body.yoru .intro-title, html[data-toki=yoru] .sec-title {
  background: linear-gradient(transparent 84%, var(--hi) 84%, var(--hi) 96%, transparent 96%) !important; color: #fff !important;
}
.shiryo, .shiryo .sec-lead, .shiryo .shiryo-lead, .shiryo .shiryo-note, .shiryo p { color: #fff; }
.shiryo .shiryo-note, .shiryo .sec-label { color: #bdbdbd !important; }
.shiryo .wp-cover, .shiryo .wp-cover h3 { color: #fff !important; }
.shiryo .wp-cover p { color: #bdbdbd !important; }
.shiryo .wp-cover .wp-label, .shiryo .wp-cover .wp-line { color: var(--hi) !important; background-color: var(--hi); }
.shiryo .wp-cover .wp-label { background: none; }