/* 占い入門(nyumon.banshoreki.com 相当 = banshoreki.com/nyumon/)の共通スタイル。
   占い本体は夜空だが、ここは読むための場所なので、明るい地に黒に近い字。
   飾りを増やさず、長い文章が疲れずに読めることだけを優先する。
   書体はシリーズと同じ(見出し=明朝・本文=ゴシック)で、地の色だけを変える。 */
:root{
  --ink:#33303A;        /* 本文 */
  --ink-strong:#1D1A24; /* 見出し */
  --muted:#6E6875;      /* 補足 */
  --paper:#FCFBF9;      /* 地 */
  --card:#FFFFFF;
  --line:rgba(40,35,50,.14);
  --accent:#35548F;     /* 落ち着いた藍。リンクと見出しの罫に使う */
  --accent-soft:rgba(53,84,143,.09);
  --gold:#9A7B2E;       /* 章の番号など、ごく控えめに */
  --ink-2:#4A4550;      /* 本文よりわずかに淡い字(リード・補足) */
  --tint:#F5F3EF;       /* 図・表・写真の淡い下地 */
  --bar:rgba(252,251,249,.94); /* 上の帯と、浮いているボタン */
  --ok:#4F7D53;         /* 読んだ印 */
  --vermilion:#B4483F;  /* 朱。図の中の「抑える」関係 */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic UI","Yu Gothic",system-ui,sans-serif;
  font-size:16.5px;line-height:2;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
a:focus-visible{outline:3px solid rgba(53,84,143,.45);outline-offset:3px}
img{max-width:100%;height:auto}
[hidden]{display:none!important}

/* 上の帯 */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:58px;padding:8px max(16px,calc((100vw - 860px)/2));
  background:var(--bar);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.brand{text-decoration:none;font-family:"Shippori Mincho B1","Yu Mincho",serif;
  font-size:18px;font-weight:700;letter-spacing:.1em;color:var(--ink-strong)}
.brand small{display:block;margin-top:1px;font-family:inherit;font-size:10.5px;font-weight:400;
  letter-spacing:.24em;color:var(--muted)}
.topbar nav{display:flex;gap:8px}
.topbar nav a{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;white-space:nowrap;
  border:1px solid var(--line);border-radius:999px;background:var(--card);
  color:var(--ink);text-decoration:none;font-size:13px;font-weight:700}

.wrap{max-width:860px;margin:0 auto;padding:0 20px 70px}
.crumb{margin:18px 0 0;color:var(--muted);font-size:12.5px}
.crumb a{color:var(--muted)}

/* 見出し */
.head{margin:26px 0 0}
.kicker{margin:0;color:var(--gold);font-size:12px;font-weight:700;letter-spacing:.28em}
h1{margin:9px 0 0;font-family:"Shippori Mincho B1","Yu Mincho",serif;
  font-size:clamp(26px,5.4vw,38px);font-weight:700;line-height:1.5;letter-spacing:.04em;
  color:var(--ink-strong);text-wrap:balance}
.lead{margin:16px 0 0;font-size:16px;color:var(--ink-2)}
h2{margin:48px 0 14px;padding:0 0 10px;border-bottom:1px solid var(--line);
  font-family:"Shippori Mincho B1","Yu Mincho",serif;
  font-size:clamp(21px,3.8vw,26px);font-weight:700;line-height:1.55;letter-spacing:.04em;
  color:var(--ink-strong)}
h3{margin:30px 0 8px;font-size:17px;font-weight:700;color:var(--ink-strong)}
/* 文字を大きくすると、括弧つきの長い見出しなどが1行に収まらないことがある。
   ふつうの折り返しを先に試し、どうしても収まらないときだけ途中で折る */
h1,h2,h3,p,li,dd,dt,figcaption{overflow-wrap:anywhere}
p{margin:0 0 16px}
strong{font-weight:700;color:var(--ink-strong)}
ul,ol{margin:0 0 16px;padding-left:1.5em}
li{margin:0 0 8px}
/* 「<b>見出し</b> 説明」の間は全角スペースで空けていたが、行末に残ると幅を持って
   はみ出す(全角スペースは行末で潰れない)。間隔はCSSで持たせる */
li > b:first-child,li > strong:first-child{margin-right:.5em}

/* 目次 */
.toc{margin:24px 0 0;padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.toc b{display:block;margin:0 0 8px;font-size:14px;letter-spacing:.06em;color:var(--muted)}
.toc ol{margin:0;padding-left:1.4em;font-size:14.5px;line-height:1.95}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}

/* 補足の囲み */
.note{margin:0 0 16px;padding:16px 18px;border-left:3px solid var(--accent);
  background:var(--accent-soft);color:var(--ink);font-size:15px;line-height:1.9}
.note b{color:var(--ink-strong)}

/* 表 */
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 18px;
  border:1px solid var(--line);border-radius:10px;background:var(--card)}
/* 枠に合わせて縮めない。列が多い表は横へ流して、箱の中でスクロールさせる。
   縮めると「伸びる・広がる」のような短い語まで一文字ずつ折れてしまう。 */
table{width:100%;min-width:max-content;border-collapse:collapse;font-size:14.5px}
th,td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.8}
th{background:var(--tint);color:var(--ink-strong);font-weight:700;white-space:nowrap}
td:first-child{white-space:nowrap;font-weight:700;color:var(--ink-strong)}
td.wrap-ok{white-space:normal;min-width:11em;max-width:24em}
tbody tr:last-child td{border-bottom:0}

/* 案内役の神様 */
.god{display:flex;align-items:center;gap:15px;margin:26px 0 0;padding:15px 17px;
  border:1px solid var(--line);border-radius:12px;background:var(--card)}
.god img{width:60px;height:60px;flex:none;border-radius:50%;object-fit:cover;object-position:50% 22%;
  border:1px solid var(--line)}
.god p{margin:0;font-size:14px;line-height:1.85;color:var(--ink-2)}
.god b{color:var(--ink-strong)}

/* 章の一覧(トップ) */
.chapters{display:grid;gap:12px;margin:22px 0 0;padding:0;list-style:none}
.chapters li{margin:0}
.chapters a{display:flex;align-items:center;gap:15px;padding:16px 18px;
  border:1px solid var(--line);border-radius:12px;background:var(--card);
  text-decoration:none;color:inherit}
.chapters a:hover{border-color:rgba(53,84,143,.42)}
.chapters img{width:54px;height:54px;flex:none;border-radius:50%;object-fit:cover;object-position:50% 22%;
  border:1px solid var(--line)}
.chapters .no{flex:none;width:54px;height:54px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line);color:var(--gold);
  font-family:"Shippori Mincho B1","Yu Mincho",serif;font-size:19px}
.chapters b{display:block;font-size:16.5px;font-weight:700;color:var(--ink-strong);line-height:1.6}
.chapters span{display:block;color:var(--muted);font-size:13.5px;line-height:1.75}
.chapters .soon{color:var(--muted);opacity:.72;pointer-events:none}
.chapters .soon .no{color:var(--muted)}

/* 末尾の誘導。ここは説明が本体なので、押しつけずに置く */
.try{margin:44px 0 0;padding:20px 19px 19px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.try b{display:block;margin:0 0 6px;font-family:"Shippori Mincho B1","Yu Mincho",serif;
  font-size:18px;color:var(--ink-strong);letter-spacing:.02em}
.try p{margin:0 0 14px;color:var(--muted);font-size:14px;line-height:1.85}
.try a{display:inline-flex;align-items:center;min-height:46px;padding:10px 20px;border-radius:999px;
  border:1px solid rgba(53,84,143,.42);background:transparent;color:var(--accent);
  text-decoration:none;font-size:14.5px;font-weight:700;letter-spacing:.04em}

/* 次に読むもの */
.next{display:grid;gap:10px;margin:34px 0 0;padding:0;list-style:none}
.next li{margin:0}
.next a{display:block;padding:15px 17px;border:1px solid var(--line);border-radius:12px;background:var(--card);
  text-decoration:none;color:var(--ink);font-size:14px}
.next a b{display:block;font-size:15.5px;font-weight:700;color:var(--ink-strong);line-height:1.6}
.next a span{color:var(--muted);font-size:13px}

footer{margin-top:52px;padding-top:26px;border-top:1px solid var(--line);
  text-align:center;color:var(--muted);font-size:11.5px;line-height:1.8}
footer p{margin:9px 0}
footer a{color:var(--muted)}

@media(max-width:560px){
  body{font-size:16px;line-height:1.95}
  .wrap{padding:0 16px 56px}
  .god img{width:52px;height:52px}
  .chapters a{gap:13px;padding:14px 15px}
  .chapters img,.chapters .no{width:46px;height:46px}
}

/* ── 教科書の部品 ───────────────────────── */

/* 図解。SVGは中で完結させる(外部読み込みなし) */
.figure{margin:0 0 20px;padding:20px 16px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);text-align:center}
.figure svg{max-width:100%;height:auto}
.figure figcaption{margin-top:12px;color:var(--muted);font-size:13px;line-height:1.8;text-align:center}

/* 流派によるちがい。本文と読み分けられるように地を変える */
.school{margin:0 0 18px;padding:16px 18px;border:1px solid rgba(154,123,46,.34);border-radius:10px;
  background:rgba(154,123,46,.06);font-size:15px;line-height:1.9}
.school b:first-child{display:block;margin-bottom:5px;color:var(--gold);font-size:13px;letter-spacing:.1em}

/* 用語の初出 */
.term{font-weight:700;color:var(--ink-strong);border-bottom:1px dotted rgba(53,84,143,.5)}
.yomi{color:var(--muted);font-size:.86em;font-weight:400}

/* 手順 */
.step{margin:0 0 18px;padding:0;list-style:none;counter-reset:st}
.step li{position:relative;margin:0 0 12px;padding:0 0 0 40px;counter-increment:st}
.step li::before{content:counter(st);position:absolute;left:0;top:2px;width:27px;height:27px;
  display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);
  background:var(--card);color:var(--gold);font-size:13px;font-weight:700}
/* 見出しと説明は行を分ける。一行に詰めると、特大の文字で横にあふれる */
.step b{display:block;margin-bottom:1px;color:var(--ink-strong)}

/* 対にして見せる小さな表 */
.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin:0 0 18px}
.pair div{padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.pair b{display:block;margin-bottom:3px;color:var(--ink-strong);font-size:15.5px}
.pair span{color:var(--muted);font-size:13.5px;line-height:1.8}

/* 章のなか目次 */
.inpage{margin:22px 0 0;padding:16px 19px;border:1px solid var(--line);border-radius:12px;background:var(--tint)}
.inpage b{display:block;margin:0 0 6px;font-size:13px;letter-spacing:.08em;color:var(--muted)}
.inpage ul{margin:0;padding-left:1.3em;font-size:14.5px;line-height:1.9}
.inpage a{text-decoration:none}
.inpage a:hover{text-decoration:underline}

/* 道具の図鑑。絵と説明を並べる */
.tools{display:grid;gap:16px;margin:0 0 20px;padding:0;list-style:none}
.tools li{display:flex;gap:18px;align-items:flex-start;margin:0;padding:17px 18px;
  border:1px solid var(--line);border-radius:12px;background:var(--card)}
.tools img{width:96px;height:96px;flex:none;object-fit:contain;border-radius:8px;background:var(--tint)}
.tools b{display:block;margin:0 0 3px;font-family:"Shippori Mincho B1","Yu Mincho",serif;
  font-size:18px;color:var(--ink-strong);letter-spacing:.02em}
.tools .yomi2{display:block;margin:0 0 7px;color:var(--muted);font-size:12.5px;letter-spacing:.06em}
.tools p{margin:0 0 8px;font-size:14.5px;line-height:1.85}
.tools dl{margin:0;font-size:13.5px;line-height:1.8}
.tools dt{float:left;clear:left;width:5.6em;color:var(--gold);font-weight:700}
.tools dd{margin:0 0 2px 5.9em;color:var(--ink-2)}
@media(max-width:560px){
  .tools li{flex-direction:column;gap:12px;align-items:center;text-align:left}
  .tools img{width:120px;height:120px}
  .tools>li>div{width:100%}
}

/* 部の扉絵(納品されたら差し込む) */
/* 目次の一番上の表紙だけは、帯より先に置くので上の余白を詰める */
.hero-top{margin-top:16px}
.hero-band{margin:22px 0 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;line-height:0}
.hero-band img{width:100%;height:auto;display:block}

/* 事典の項目 */
.dict{display:grid;gap:13px;margin:0 0 22px;padding:0;list-style:none}
.dict li{margin:0;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.dict b{display:block;font-family:"Shippori Mincho B1","Yu Mincho",serif;
  font-size:17.5px;color:var(--ink-strong);letter-spacing:.02em;line-height:1.5}
.dict .meta{display:block;margin:3px 0 9px;color:var(--muted);font-size:12.5px;letter-spacing:.04em}
.dict p{margin:0 0 7px;font-size:14.5px;line-height:1.85}
.dict p:last-of-type{margin-bottom:0}
.dict .live{display:inline-block;margin-top:9px;padding:3px 11px;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:.04em}
.dict .live.now{background:var(--accent-soft);color:var(--accent);border:1px solid rgba(53,84,143,.24)}
.dict .live.past{background:rgba(40,35,50,.055);color:var(--muted);border:1px solid var(--line)}
.dict .live.ours{background:rgba(154,123,46,.13);color:var(--gold);border:1px solid rgba(154,123,46,.34)}

/* 十干・五行の象徴画 */
.symbol{float:right;width:132px;height:132px;margin:0 0 12px 18px;border-radius:12px;
  border:1px solid var(--line);background:var(--card);object-fit:cover}
h3{clear:both}
@media(max-width:560px){
  .symbol{float:none;display:block;width:150px;height:150px;margin:6px auto 12px}
}

/* 五行の五枚並べ */
.gogyo-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 20px}
.gogyo-cards figure{margin:0;padding:0;border:1px solid var(--line);border-radius:12px;
  background:var(--card);overflow:hidden}
.gogyo-cards img{width:100%;height:auto;display:block}
.gogyo-cards figcaption{padding:9px 11px 11px;color:var(--muted);font-size:12.5px;line-height:1.7}
.gogyo-cards figcaption b{display:block;margin-bottom:2px;
  font-family:"Shippori Mincho B1","Yu Mincho",serif;font-size:19px;color:var(--ink-strong)}

/* ═══════════════════════════════════════════════════════════════
   読むための道具立て(site.js が組み立てる)。
   目次の引き出し・文字の大きさ・しおり・読み進み・前後の章・上に戻る。
   ═══════════════════════════════════════════════════════════════ */

/* ── 文字の大きさ。4段階。選んだものは端末に憶えておく ───────── */
html[data-fs="s"]  body{font-size:15px}
html[data-fs="m"]  body{font-size:16.5px}
html[data-fs="l"]  body{font-size:19px;line-height:2.05}
html[data-fs="xl"] body{font-size:21.5px;line-height:2.1}
html[data-fs="s"]  h3{font-size:16px}
html[data-fs="s"]  .lead{font-size:15px}
html[data-fs="l"]  h1{font-size:clamp(29px,6vw,42px)}
html[data-fs="l"]  h2{font-size:clamp(23px,4.2vw,29px)}
html[data-fs="l"]  h3{font-size:19px}
html[data-fs="l"]  .lead{font-size:18px}
html[data-fs="xl"] h1{font-size:clamp(32px,6.6vw,46px)}
html[data-fs="xl"] h2{font-size:clamp(25px,4.6vw,32px)}
html[data-fs="xl"] h3{font-size:21px}
html[data-fs="xl"] .lead{font-size:20px}
/* 表は横に逃がしてあるので、大きくしても崩れない */
html[data-fs="l"]  .scroller table,html[data-fs="xl"] .scroller table{font-size:1em}

/* ── 上の帯に足す道具 ─────────────────────────────── */
.nv-tools{display:flex;gap:8px;margin-left:auto}
.nv-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 14px;
  border:1px solid var(--line);border-radius:999px;background:var(--card);
  color:var(--ink);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer}
.nv-btn:hover{background:var(--accent-soft);border-color:rgba(53,84,143,.35)}
.nv-ico{font-size:15px;line-height:1}
@media(max-width:420px){.nv-lb{display:none}.nv-btn{padding:6px 13px}}

/* 読み進みの細い線(帯の下端) */
.nv-read{position:absolute;left:0;right:0;bottom:-1px;height:3px;pointer-events:none}
.nv-read i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,#9A7B2E,#C9A94E)}

/* 文字の大きさのパネル */
.nv-fs-panel{position:absolute;right:14px;top:calc(100% + 9px);z-index:40;
  padding:13px 15px 14px;border:1px solid var(--line);border-radius:15px;background:var(--card);
  box-shadow:0 20px 44px rgba(20,18,26,.2)}
.nv-fs-panel > b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.12em;color:var(--muted)}
.nv-fs-row{display:flex;gap:7px;margin-top:9px}
.nv-fs-row button{min-width:54px;min-height:42px;border:1px solid var(--line);border-radius:11px;
  background:var(--paper);color:var(--ink);font-family:inherit;font-weight:700;cursor:pointer}
.nv-fs-row button:nth-child(1){font-size:12px}
.nv-fs-row button:nth-child(2){font-size:14px}
.nv-fs-row button:nth-child(3){font-size:16px}
.nv-fs-row button:nth-child(4){font-size:18px}
.nv-fs-row button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}

/* ── 目次の引き出し ──────────────────────────────── */
body.nv-locked{overflow:hidden}
.nv-drawer{position:fixed;inset:0;z-index:80}
.nv-mask{position:absolute;inset:0;background:rgba(22,19,28,.42);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.nv-panel{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;
  width:min(430px,90vw);background:var(--paper);border-left:1px solid var(--line);
  box-shadow:-22px 0 54px rgba(22,19,28,.28);animation:nvIn .22s ease}
@keyframes nvIn{from{transform:translateX(22px);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.nv-panel{animation:none}}
.nv-head{display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 12px;border-bottom:1px solid var(--line)}
.nv-head b{font-family:"Shippori Mincho B1","Yu Mincho",serif;font-size:19px;letter-spacing:.14em;
  color:var(--ink-strong)}
.nv-close{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;
  background:var(--card);color:var(--ink);font-size:15px;cursor:pointer;font-family:inherit}

.nv-state{padding:14px 16px 15px;border-bottom:1px solid var(--line)}
.nv-bar{height:7px;border-radius:99px;background:rgba(40,35,50,.1);overflow:hidden}
.nv-bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#9A7B2E,#C9A94E)}
.nv-count{margin:9px 0 0;font-size:12.5px;color:var(--muted)}
.nv-count b{color:var(--ink-strong)}
.nv-resume{display:block;margin-top:12px;padding:12px 14px;text-decoration:none;
  border:1px solid rgba(154,123,46,.42);border-radius:13px;background:rgba(154,123,46,.08);
  color:var(--ink-strong)}
.nv-resume-k{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--gold)}
.nv-resume b{display:block;margin-top:3px;font-size:15px;line-height:1.6}

.nv-list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 8px 22px}
.nv-home{display:block;margin:10px 8px 4px;padding:10px 12px;border:1px dashed var(--line);
  border-radius:11px;text-align:center;font-size:13px;text-decoration:none;color:var(--muted)}
.nv-list details{border-bottom:1px solid var(--line)}
.nv-list summary{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 10px;cursor:pointer;list-style:none;
  font-size:14.5px;font-weight:700;color:var(--ink-strong)}
.nv-list summary::-webkit-details-marker{display:none}
.nv-list summary::after{content:"＋";margin-left:2px;color:var(--muted);font-weight:400;font-size:13px}
.nv-list details[open] summary::after{content:"−"}
.nv-list summary i{margin-left:auto;font-style:normal;font-size:11.5px;font-weight:400;color:var(--muted)}
.nv-list ul{margin:0 0 11px;padding:0;list-style:none}
.nv-list li{margin:0}
.nv-list li a{display:flex;gap:9px;align-items:baseline;padding:9px 11px 9px 14px;
  border-radius:9px;text-decoration:none;color:var(--ink);font-size:14px;line-height:1.65}
.nv-list li a:hover{background:var(--accent-soft)}
.nv-no{flex:none;min-width:3.1em;color:var(--gold);font-size:11.5px;font-weight:700}
.nv-list a.now{background:var(--accent-soft);color:var(--accent);font-weight:700}
.nv-list a.done .nv-nm::after{content:"　✓";color:var(--ok);font-size:11.5px;font-weight:700}
.nv-foot{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
  padding:13px 16px 15px;border-top:1px solid var(--line);font-size:12.5px}

/* ── しおりの位置へ戻る案内 ───────────────────────── */
.nv-back{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:15px 0 0;padding:11px 14px;
  border:1px solid rgba(154,123,46,.35);border-radius:12px;background:rgba(154,123,46,.07);
  font-size:13.5px;color:var(--ink);transition:opacity .7s}
.nv-back.fade{opacity:.42}
.nv-back button{min-height:38px;padding:6px 15px;border:1px solid rgba(154,123,46,.5);
  border-radius:999px;background:var(--card);color:var(--gold);
  font-family:inherit;font-size:13px;font-weight:700;cursor:pointer}

/* ── 前の章 / 次の章 ─────────────────────────────── */
.nv-pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:44px 0 0}
.nv-pager a{display:block;padding:14px 16px;border:1px solid var(--line);border-radius:14px;
  background:var(--card);text-decoration:none;color:var(--ink)}
.nv-pager a:hover{border-color:rgba(53,84,143,.35);background:var(--accent-soft)}
.nv-pager span{display:block;font-size:11.5px;letter-spacing:.1em;color:var(--muted)}
.nv-pager b{display:block;margin-top:4px;font-size:14.5px;line-height:1.6;color:var(--ink-strong)}
.nv-next{text-align:right}
.nv-none{visibility:hidden}
@media(max-width:520px){.nv-pager{grid-template-columns:1fr}.nv-next{text-align:left}}

/* ── 上に戻る ────────────────────────────────── */
.nv-up{position:fixed;right:16px;bottom:16px;z-index:40;width:47px;height:47px;
  border:1px solid var(--line);border-radius:50%;background:var(--bar);
  color:var(--ink);font-size:19px;font-family:inherit;cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .22s;
  box-shadow:0 12px 28px rgba(20,18,26,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.nv-up.on{opacity:1;pointer-events:auto}

/* ── 目次のページ側: 読んだ章としおりの印 ──────────────── */
.chapters a.done > span > b::after{content:"　✓";color:var(--ok);font-size:12px}
.chapters a.marked{box-shadow:inset 0 0 0 2px rgba(154,123,46,.45)}
.nv-resume-top{margin:20px 0 0}
.nv-resume-c{display:block;margin-top:3px;font-size:12px;color:var(--muted)}

/* ── 表紙(トップページの一番上) ──────────────────────── */
.cover{position:relative;margin:18px 0 0;border:1px solid var(--line);border-radius:16px;
  overflow:hidden;background:var(--tint)}
.cover img{display:block;width:100%;height:auto}
.cover-copy{position:absolute;left:0;right:0;top:0;padding:clamp(18px,4.5vw,40px) clamp(18px,4.5vw,44px) 0}
.cover-copy .kicker{margin:0}
.cover-copy h1{margin:6px 0 0}
@media(max-width:560px){
  .cover-copy{padding:14px 16px 0}
  .cover-copy h1{font-size:clamp(24px,7.4vw,32px)}
  .cover-copy .kicker{font-size:11px;letter-spacing:.2em}
}

/* ── 一番下: 占い本体へ送り出す ───────────────────────── */
.to-bansho{position:relative;display:block;overflow:hidden;margin:46px 0 0;
  border:1px solid rgba(154,123,46,.45);border-radius:18px;background:#0D1426;
  text-decoration:none;box-shadow:0 22px 46px rgba(13,20,38,.2)}
/* 絵は横長(2:1)で、六つの光が右寄りにある。帯に切り出すと輪が欠けるので右へ寄せる */
.to-bansho img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 50%}
.to-bansho::after{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(8,13,28,.88) 0%,rgba(8,13,28,.6) 32%,
             rgba(8,13,28,.14) 68%,rgba(8,13,28,0) 100%)}
.tb-copy{position:relative;z-index:1;display:block;padding:26px 22px 24px}
.tb-copy small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.16em;color:#E3C87E;
  text-shadow:0 1px 7px rgba(4,8,20,.95)}
.tb-copy b{display:block;margin-top:6px;font-family:"Shippori Mincho B1","Yu Mincho",serif;
  font-size:clamp(22px,5.6vw,30px);font-weight:700;letter-spacing:.08em;line-height:1.4;color:#F4E3B4;
  text-shadow:0 2px 8px rgba(4,8,20,.95)}
.tb-copy span{display:block;margin-top:8px;max-width:28em;font-size:13px;line-height:1.8;color:#DDE4F0;
  text-shadow:0 1px 7px rgba(4,8,20,.95)}
.tb-copy i{display:inline-block;margin-top:13px;padding:8px 17px;border-radius:999px;font-style:normal;
  border:1px solid rgba(217,180,74,.5);background:rgba(217,180,74,.14);
  color:#F0DFAE;font-size:13px;font-weight:700}
@media(min-width:700px){.tb-copy{padding:34px 32px 32px}}

/* JSが動かない環境でも読めるように、道具立ては出さないだけにする */
.no-js .nv-tools,.no-js .nv-up{display:none}

/* ── 夜のモード ──────────────────────────────────────
   地と字を入れ替えるだけで、余白も組み方も昼と同じにする。
   図(SVG)は色を変数で書いてあるので、そのまま追随する。 */
html[data-theme="night"]{
  --ink:#D4D0DA;
  --ink-strong:#F1EDF5;
  --ink-2:#BEB9C7;
  --muted:#9C95A7;
  --paper:#17151E;
  --card:#211E2A;
  --tint:#262230;
  --line:rgba(220,214,232,.17);
  --accent:#9BB8EA;
  --accent-soft:rgba(155,184,234,.13);
  --gold:#CBA85A;
  --ok:#7FB283;
  --vermilion:#D97A6E;
  --bar:rgba(23,21,30,.94);
  color-scheme:dark;
}
/* 明るい線画は夜に眩しいので、少しだけ落とす(消しはしない) */
html[data-theme="night"] .cover img,
html[data-theme="night"] .hero-band img,
html[data-theme="night"] .gogyo-cards img,
html[data-theme="night"] .symbol,
html[data-theme="night"] .tools img{filter:brightness(.84) contrast(1.04) saturate(.9)}
html[data-theme="night"] a:focus-visible{outline-color:rgba(155,184,234,.55)}
html[data-theme="night"] .nv-bar{background:rgba(220,214,232,.14)}
html[data-theme="night"] .nv-mask{background:rgba(5,4,8,.62)}
html[data-theme="night"] .nv-fs-row button[aria-pressed="true"],
html[data-theme="night"] .nv-th-row button[aria-pressed="true"]{color:#14121C}
html[data-theme="night"] .school,
html[data-theme="night"] .nv-resume,
html[data-theme="night"] .nv-back{border-color:rgba(203,168,90,.34);background:rgba(203,168,90,.09)}
/* 一番下の占い本体への誘いは、もともと夜空なので枠だけ馴染ませる */
html[data-theme="night"] .to-bansho{box-shadow:0 22px 46px rgba(0,0,0,.4)}

/* 画面の明るさの切り替え(文字の大きさと同じパネルに並べる) */
.nv-th-row{display:flex;gap:7px;margin-top:9px}
.nv-th-row button{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 15px;
  border:1px solid var(--line);border-radius:11px;background:var(--paper);color:var(--ink);
  font-family:inherit;font-size:13px;font-weight:700;cursor:pointer}
.nv-th-row button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.nv-fs-panel > b + .nv-fs-row + b{margin-top:14px}

/* ── 読み上げ ─────────────────────────────────────
   端末の音声で本文を読む。いま読んでいるところに印を付ける。 */
/* 読んでいるところ。地がベージュなので、黄土色では同系で埋もれる。
   地から離れた緑にして、左端にも太い棒を出す。 */
.nv-speak-now{background:rgba(18,138,104,.16)!important;border-radius:7px;
  box-shadow:0 0 0 5px rgba(18,138,104,.16),
             inset 5px 0 0 0 #0E9B72;
  transition:background .18s}
html[data-theme="sepia"] .nv-speak-now{background:rgba(14,120,92,.16)!important;
  box-shadow:0 0 0 5px rgba(14,120,92,.16),
             inset 5px 0 0 0 #0C8A64}
html[data-theme="night"] .nv-speak-now{background:rgba(52,220,166,.16)!important;
  box-shadow:0 0 0 5px rgba(52,220,166,.16),
             inset 5px 0 0 0 #34DCA6}
.nv-speak-deck{position:fixed;left:50%;bottom:14px;z-index:50;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:8px;
  width:min(560px,calc(100vw - 24px));padding:11px 14px;
  border:1px solid var(--line);border-radius:16px;background:var(--bar);
  box-shadow:0 16px 38px rgba(20,18,26,.26);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.nv-speak-deck button{min-height:40px;padding:7px 15px;border:1px solid var(--line);border-radius:999px;
  background:var(--card);color:var(--ink);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer}
.sp-pos{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.sp-rate{display:flex;align-items:center;gap:5px;margin-left:auto;color:var(--muted);font-size:11.5px}
.sp-rate button{min-height:34px;padding:4px 9px;font-size:12px}
.sp-rate button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
html[data-theme="night"] .sp-rate button[aria-pressed="true"]{color:#14121C}
@media(max-width:430px){
  .nv-speak-deck{gap:7px;padding:9px 11px}
  .nv-speak-deck > button{padding:7px 12px;font-size:12.5px}
  .sp-rate{width:100%;margin-left:0;justify-content:center}
}

/* ── セピア(昼と夜のあいだ) ────────────────────────
   紙に近い色。長く読むときの目の負担を下げる。 */
html[data-theme="sepia"]{
  --ink:#4A3F33;
  --ink-strong:#2E2519;
  --ink-2:#5C5043;
  --muted:#8A7A66;
  --paper:#F6EDDC;
  --card:#FDF8EC;
  --tint:#EFE4CE;
  --line:rgba(92,72,44,.22);
  --accent:#7A5628;      /* セピアの地には藍より茶が合う */
  --accent-soft:rgba(122,86,40,.11);
  --gold:#8A6A22;
  --ok:#4F7D53;
  --vermilion:#A8433A;
  --bar:rgba(246,237,220,.95);
}
/* 絵は紙の色になじませる */
html[data-theme="sepia"] .cover img,
html[data-theme="sepia"] .hero-band img,
html[data-theme="sepia"] .gogyo-cards img,
html[data-theme="sepia"] .symbol,
html[data-theme="sepia"] .tools img{filter:sepia(.18) saturate(.92)}

/* ── 行の間隔 ─────────────────────────────────── */
html[data-lh="wide"]  body{line-height:2.25}
html[data-lh="xwide"] body{line-height:2.5}
html[data-lh="wide"]  p,html[data-lh="wide"]  li{margin-bottom:20px}
html[data-lh="xwide"] p,html[data-lh="xwide"] li{margin-bottom:25px}
html[data-lh="wide"]  li,html[data-lh="xwide"] li{margin-top:0}

/* 表示パネルは中身が増えたので、画面から溢れたら中でスクロールさせる */
.nv-fs-panel{max-height:calc(100vh - 90px);overflow-y:auto;overscroll-behavior:contain}
.nv-fs-panel > b{margin-top:14px}
.nv-fs-panel > b:first-child{margin-top:0}
.nv-th-row{flex-wrap:wrap}
.nv-th-row button{flex:1 1 auto;justify-content:center}

/* 読み上げバーの中身(操作の段と、設定の段) */
.sp-line{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.sp-sub{gap:12px;color:var(--muted);font-size:11.5px}
.sp-where{color:var(--muted);font-size:11.5px}
.sp-where b{color:var(--ink-strong);font-weight:700}
.sp-where a{margin-left:6px}
.sp-voice-wrap{display:flex;align-items:center;gap:6px}
.sp-voice{min-height:34px;max-width:9em;padding:4px 8px;border:1px solid var(--line);border-radius:9px;
  background:var(--card);color:var(--ink);font-family:inherit;font-size:12.5px}
.sp-cont{display:flex;align-items:center;gap:6px;cursor:pointer}
.sp-cont input{width:18px;height:18px;accent-color:var(--accent)}

/* ── ことばで探す(目次の引き出しの中) ────────────────── */
.nv-search{padding:12px 16px 0}
.nv-q{width:100%;min-height:46px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);color:var(--ink);font-family:inherit;font-size:15px}
.nv-q::placeholder{color:var(--muted);font-size:12.5px}
.nv-q:focus{outline:3px solid var(--accent-soft);outline-offset:1px;border-color:var(--accent)}
.nv-hits{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:10px 8px 22px}
.nv-hitnum,.nv-nohit{margin:2px 8px 9px;color:var(--muted);font-size:12px}
.nv-hits a{display:flex;gap:9px;align-items:baseline;margin-bottom:5px;padding:11px 12px 12px;
  border:1px solid var(--line);border-radius:11px;background:var(--card);
  text-decoration:none;color:var(--ink)}
.nv-hits a:hover{border-color:rgba(53,84,143,.35);background:var(--accent-soft)}
.nv-hit-body{min-width:0}
.nv-hit-body b{display:block;font-size:14px;font-weight:700;line-height:1.6;color:var(--ink-strong)}
.nv-hit-body small{display:block;margin-top:4px;color:var(--muted);font-size:12px;line-height:1.75;
  overflow-wrap:anywhere}
.nv-hits mark{padding:0 2px;border-radius:3px;background:rgba(154,123,46,.3);color:inherit}
html[data-theme="night"] .nv-hits mark{background:rgba(203,168,90,.32)}

/* 八十一数理の「一般の評価」。三資料が揃った吉凶と、割れる数を見分ける */
.j-good{color:var(--ok);font-weight:700;white-space:nowrap}
.j-bad{color:var(--vermilion);font-weight:700;white-space:nowrap}
.j-split{color:var(--muted);white-space:nowrap;font-size:.92em}

/* ── 文字の大きさと行間を、もう一段ずつ ────────────────── */
html[data-fs="xs"] body{font-size:13.5px;line-height:1.95}
html[data-fs="xs"] h3{font-size:15px}
html[data-fs="xs"] .lead{font-size:14px}
html[data-lh="narrow"] body{line-height:1.75}
html[data-lh="narrow"] p,html[data-lh="narrow"] li{margin-bottom:12px}
/* 五つ並ぶので、一つあたりを詰める */
.nv-fs-row button{min-width:0;flex:1 1 0;padding:0 2px}
.nv-fs-row button:nth-child(1){font-size:11px}
.nv-fs-row button:nth-child(2){font-size:12px}
.nv-fs-row button:nth-child(3){font-size:14px}
.nv-fs-row button:nth-child(4){font-size:16px}
.nv-fs-row button:nth-child(5){font-size:18px}

/* ── 読み上げは浮かせる ───────────────────────────────
   本文の上に置くと、読み返すたびに章の頭へ戻ってしまうため。
   押した時点で見えているところから読む。 */
.nv-speak-start{position:fixed;right:14px;top:68px;z-index:41;
  display:inline-flex;align-items:center;gap:7px;margin:0;
  min-height:40px;padding:8px 16px;
  border:0;border-radius:999px;
  background:var(--accent);color:#fff;
  font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;
  box-shadow:0 6px 18px rgba(20,18,26,.3)}
.nv-speak-start .sp-lb{color:#fff}
.nv-speak-start [aria-hidden]{color:#fff;font-size:11px}
.nv-speak-start:hover{filter:brightness(1.12)}
/* 下へ読み進むあいだは、右上へすっと引っ込む */
.nv-speak-start{transition:transform .22s ease,opacity .22s ease}
.nv-speak-start.is-away{transform:translateY(-64px);opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){
  .nv-speak-start{transition:none}
  .nv-speak-start.is-away{transform:none;opacity:0}
}
/* 夜は地の色が明るい水色になるので、文字を暗くしないと読めない */
html[data-theme="night"] .nv-speak-start,
html[data-theme="night"] .nv-speak-start .sp-lb,
html[data-theme="night"] .nv-speak-start [aria-hidden]{color:#14121C}
/* 記号だけにしたいときは、表示設定から切り替える */
html[data-spbtn="icon"] .nv-speak-start .sp-lb{display:none}
html[data-spbtn="icon"] .nv-speak-start{width:40px;padding:0;justify-content:center;gap:0}
/* 帯のボタンは、名前を出したままにする(記号だけでは何か分からない) */
@media(max-width:420px){.nv-lb{display:inline}}
.nv-btn{padding:6px 13px}
.nv-ico{font-weight:700}

/* ── 狭い画面では、列の多い表を縦に積む ────────────────
   一行を一枚のまとまりにして、各セルの前に列名を出す。
   横スクロールをしなくても、右端の列まで読める。 */
@media(max-width:560px){
  .stack-sp{min-width:0;width:100%;font-size:14px}
  .stack-sp thead{display:none}
  .stack-sp,.stack-sp tbody,.stack-sp tr,.stack-sp td{display:block;width:auto}
  .stack-sp tr{margin:0 0 11px;padding:12px 14px 11px;
    border:1px solid var(--line);border-radius:12px;background:var(--card)}
  .stack-sp tr:last-child{margin-bottom:0}
  .stack-sp td{border:0;padding:4px 0;line-height:1.75;
    white-space:normal!important;min-width:0!important;max-width:none!important}
  .stack-sp td::before{content:attr(data-label) "　";
    color:var(--muted);font-size:12.5px;font-weight:400}
  /* 一列目は、そのまとまりの見出しとして立てる */
  .stack-sp td:first-child{margin:0 0 6px;padding:0 0 7px;
    border-bottom:1px solid var(--line);
    font-family:"Shippori Mincho B1","Yu Mincho",serif;font-size:18px;font-weight:700}
  .stack-sp td:first-child::before{display:none}
  .stack-sp td:empty{display:none}
  /* 積んだ表は箱の中で横に流れないので、影も要らない */
  .scroller:has(.stack-sp){overflow-x:visible;border:0;padding:0}
}

/* 公開している趣旨。注意書きより先に、一言だけ */
.foot-why{color:var(--ink-2);font-size:12.5px}