:root{
  --ink:#1d2330; --soft:#5a6473; --line:#dfe3ea; --accent:#2f6f64; --accent-deep:#235349;
  --accent2:#c14a2c; --paper:#f4f2ec; --card:#fff; --gold:#e0a83c; --bad:#b9bdcc;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;color:var(--ink);
  background:var(--paper);line-height:1.65;-webkit-font-smoothing:antialiased}

/* ===== グローバルナビ（印刷時は消える） ===== */
.nav{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);display:flex;gap:4px;align-items:center;padding:8px 16px;flex-wrap:wrap}
.nav .lefy{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.nav .lefy img{height:24px;width:auto;display:block;opacity:.85;transition:opacity .15s}
.nav .lefy:hover img{opacity:1}
.nav .home{font-weight:800;color:var(--accent-deep);text-decoration:none;margin:0 8px 0 10px;font-size:15px;
  padding-left:10px;border-left:1px solid var(--line)}

/* 印刷シートのブランドロゴ（右上） */
.brandbar .schlogo{height:30px;width:auto;display:block}
.nav a.t{font-size:13px;font-weight:700;color:var(--soft);text-decoration:none;padding:6px 11px;border-radius:8px}
.nav a.t:hover{background:#eef5f3;color:var(--ink)}
.nav a.t.on{background:var(--accent);color:#fff}
.nav .sp{flex:1}
.nav .navsec{font-size:10px;font-weight:800;color:var(--accent2);background:#fbeee9;
  padding:2px 7px;border-radius:6px;margin:0 2px 0 6px;white-space:nowrap}
.navlinks{display:contents}
.navburger{display:none;font:inherit;font-size:13px;font-weight:800;color:var(--accent-deep);
  background:#eef5f3;border:1px solid #d3e4e0;border-radius:8px;padding:6px 12px;cursor:pointer;margin-left:auto}
.nav .cta{font-size:12.5px;font-weight:800;color:#3a2a08;background:var(--gold);
  text-decoration:none;padding:7px 13px;border-radius:8px}

.sheet{max-width:840px;margin:0 auto;background:var(--card);padding:18mm 18mm;
  box-shadow:0 4px 30px rgba(0,0,0,.08)}

h1.main{font-size:25px;margin:0 0 4px;letter-spacing:.01em}
.lead{color:var(--soft);font-size:14px;margin:0 0 18px}
.brandbar{display:flex;justify-content:space-between;align-items:flex-end;
  border-bottom:3px solid var(--ink);padding-bottom:8px;margin-bottom:14px}
.brandbar .sch{font-size:12px;color:var(--soft);font-weight:700;text-align:right}

.intro{background:#eef5f3;border:1px solid #d3e4e0;border-radius:10px;padding:14px 18px;margin-bottom:8px}
.intro h2{font-size:15px;margin:0 0 8px;color:var(--accent)}
.types{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;font-size:13px;margin:0;padding:0;list-style:none}
.types li{padding-left:18px;position:relative}
.types li::before{content:"●";color:var(--accent);position:absolute;left:0;font-size:10px;top:3px}
.types b{color:var(--ink)} .types small{color:var(--soft)}

.seg{margin:26px 0 10px;display:flex;align-items:center;gap:10px}
.seg h2{font-size:18px;margin:0;color:var(--accent2)}
.seg .bar{flex:1;height:2px;background:var(--line)}

.q{break-inside:avoid;page-break-inside:avoid;border:1px solid var(--line);border-radius:12px;
  padding:14px 16px 12px;margin:0 0 16px;background:#fff}
.q-head{display:flex;align-items:center;gap:9px;margin-bottom:5px;flex-wrap:wrap}
.qno{font-weight:800;font-size:13px;color:#fff;background:var(--accent);border-radius:6px;padding:2px 9px}
.tag{font-size:11px;font-weight:700;color:var(--accent2);border:1px solid var(--accent2);border-radius:999px;padding:1px 8px}
.qtext{font-size:14.5px;margin:0 0 8px}
.qtext small{color:#888;font-size:12px}
.body{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.treebox{border:1px dashed #ccd2dc;border-radius:8px;padding:8px 10px;background:#fcfcfa;overflow-x:auto;flex:1;min-width:240px}
.treecap{font-size:11px;color:var(--soft);margin:0 0 4px;font-weight:700}
.side{width:200px;flex-shrink:0}
.ans{font-weight:800;font-size:15px}
.ans b{color:var(--accent2);font-size:24px;margin:0 3px}
.hint{font-size:12.5px;color:var(--soft);margin-top:6px;background:#f6f8f7;border-radius:7px;padding:8px 10px}

/* 練習：樹形図を書く欄はたっぷり広く */
.plist{counter-reset:p}
.pq{break-inside:avoid;page-break-inside:avoid;padding:6px 0 16px}
.pq .ph{display:flex;gap:8px;align-items:baseline;margin-bottom:8px}
.pnum{font-weight:800;color:var(--accent);font-size:14px;min-width:34px}
.pq .pt{font-size:14.5px}
.pq .ptag{font-size:10.5px;border-radius:999px;padding:0 7px;margin-left:6px;white-space:nowrap;border:1px solid}
.lvhead{font-size:13px;font-weight:800;margin:16px 0 4px;padding:3px 12px;border-radius:7px;display:inline-block}
.lv1{color:#2f6f64;border-color:#2f6f64} .lvhead.lv1{background:#e4efec}
.lv2{color:#2a62b8;border-color:#2a62b8} .lvhead.lv2{background:#e6eefb}
.lv3{color:#b06a12;border-color:#b06a12} .lvhead.lv3{background:#fbefda}
.lv4{color:#b23939;border-color:#b23939} .lvhead.lv4{background:#fbe6e6}
.lvkey{list-style:none;font-weight:800;margin-top:8px;color:var(--ink)}
.practwork{height:230px;border:1.5px dashed #c8cdd8;border-radius:10px;
  background-image:radial-gradient(#e4e7ee 1px,transparent 1px);background-size:19px 19px;background-position:8px 8px}
.practwork.tall{height:300px}
.practwork .ph2{font-size:10.5px;color:#aab0bd;padding:5px 0 0 9px;font-weight:700}

/* 計算・応用編：例題の式・解説ボックスと、練習の計算欄 */
.solbox{font-size:13.5px;line-height:1.7;background:#f6f8f7;border:1px solid var(--line);
  border-radius:10px;padding:10px 14px;margin-top:8px}
.solbox b{color:var(--accent2)}
/* 中学受験式の分数（横線）。組み合わせ＝(かける) /(下に わる) を縦に積む */
.fr{display:inline-grid;justify-items:center;vertical-align:middle;margin:0 .15em;line-height:1.2}
.fr>span{padding:0 .4em}
.fr>span+span{border-top:1.6px solid currentColor;padding-top:1px;margin-top:1px}
.calcwork{height:130px;border:1.5px dashed #c8cdd8;border-radius:10px;
  background-image:radial-gradient(#e4e7ee 1px,transparent 1px);background-size:19px 19px;background-position:8px 8px}
.calcwork .ph2{font-size:10.5px;color:#aab0bd;padding:5px 0 0 9px;font-weight:700}

/* 図つき練習（道順の格子など） */
.figbox{border:1.5px dashed #c8cdd8;border-radius:10px;background:#fcfcfa;padding:10px 12px;
  display:inline-block;max-width:100%;overflow-x:auto}
.figNote{font-size:12px;color:var(--soft);margin-top:5px;font-weight:700}
.solnote{font-size:12px;color:var(--soft);font-weight:400}

/* 解説（書き出しの樹形図つき） */
.kq{break-inside:avoid;page-break-inside:avoid;border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:0 0 12px;background:#fff}
.kh{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.kh .ka{font-weight:700;font-size:14px}
.kh .ka b{color:var(--accent2);font-size:20px;margin:0 3px}
.kq .kqtext{margin:6px 0 0;font-size:12px;color:var(--soft);line-height:1.7}
.kbox{overflow-x:auto;margin-top:8px;border-top:1px dashed var(--line);padding-top:8px}

.keybox{background:#f7f6f2;border:1px solid var(--line);border-radius:10px;padding:14px 18px}
.keybox h2{font-size:15px;margin:0 0 8px}
.keylist{columns:2;column-gap:26px;font-size:13px;margin:0;padding:0;list-style:none}
.keylist li{margin:4px 0;break-inside:avoid}
.keylist b{color:var(--accent2)}

svg{display:block}
.col-h{font:700 11px sans-serif;fill:var(--soft)}

/* サイコロなど：ペア書き出し */
.pairs{display:flex;flex-wrap:wrap;gap:7px 9px;padding:4px 2px}
.pair{font-weight:800;font-size:17px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:9px;padding:5px 12px;line-height:1.2}
footer{margin-top:22px;border-top:1px solid var(--line);padding-top:8px;font-size:11px;color:#9aa;
  display:flex;justify-content:space-between;align-items:center}
footer .fright{display:flex;align-items:center;gap:9px;text-align:right}
footer .fqr{width:46px;height:46px;display:block}

/* 名前・日付欄（印刷にも出す） */
.nameline{display:flex;justify-content:flex-end;align-items:baseline;gap:8px;
  font-size:12px;color:var(--soft);font-weight:700;margin:0 0 12px}
.nameline .nl{display:inline-block;width:170px;border-bottom:1.2px solid #9aa3b2}
.nameline .nl.s{width:90px}

/* LEFY 案内（画面のみ。印刷には出さない） */
.lefycta{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:#eef5f3;border:1px solid #d3e4e0;border-radius:12px;padding:14px 18px;margin:26px 0 6px;
  font-size:13.5px;line-height:1.7}
.lefycta a{background:var(--accent);color:#fff;font-weight:800;text-decoration:none;
  padding:10px 18px;border-radius:10px;white-space:nowrap}
.nextlink{margin:16px 0 4px;text-align:right;font-size:14px}
.nextlink a{color:var(--accent-deep);font-weight:800;text-decoration:none}
.nextlink a:hover{text-decoration:underline}

/* Cookie 同意バナー */
.cbanner{position:fixed;left:12px;right:12px;bottom:12px;z-index:100;max-width:640px;margin:0 auto;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 10px 30px rgba(20,40,70,.18);padding:14px 16px}
.cbanner p{margin:0;font-size:12.5px;color:#3a4757;line-height:1.7}
.cbanner a{color:var(--accent);font-weight:700}
.cbanner .btns{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
.cbanner button{font:inherit;font-size:12.5px;border-radius:8px;cursor:pointer;padding:7px 14px}
.cbanner .no{color:#6b7888;background:transparent;border:1px solid #e6ecf3}
.cbanner .ok{color:#fff;background:var(--accent);border:0;font-weight:800}

.printbtn{position:fixed;bottom:18px;right:16px;z-index:9;background:var(--accent);color:#fff;border:0;
  font:inherit;font-weight:800;padding:12px 20px;border-radius:999px;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.3)}
.printbtn:hover{background:var(--accent-deep)}

/* ===== ランディング ===== */
.hero{max-width:900px;margin:0 auto;padding:46px 22px 8px;text-align:center}
.hero .eyebrow{display:inline-block;font-size:13px;font-weight:800;color:var(--accent-deep);
  background:#e4efec;padding:6px 14px;border-radius:999px}
.hero h1{font-size:clamp(27px,5vw,42px);margin:16px 0 10px;line-height:1.25}
.hero h1 em{font-style:normal;color:var(--accent2);background:linear-gradient(transparent 60%,#f6dca8 60%)}
.hero p{color:var(--soft);font-size:16px;max-width:60ch;margin:0 auto}
.hero .herouse{margin-top:12px;font-size:13px;color:var(--accent-deep);background:#e4efec;
  display:inline-block;padding:6px 16px;border-radius:999px;font-weight:700}
.hero .heroCta{display:inline-block;margin-top:20px;background:var(--accent);color:#fff;font-weight:800;
  text-decoration:none;padding:13px 26px;border-radius:12px;box-shadow:0 12px 26px -12px var(--accent)}

.sectit{max-width:900px;margin:30px auto 2px;padding:0 22px}
.sectit h2{margin:0;font-size:21px;color:var(--accent-deep)}
.sectit p{margin:4px 0 0;font-size:13.5px;color:var(--soft)}
.cards{max-width:900px;margin:14px auto 8px;padding:0 22px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pcard.soon{cursor:default;opacity:.6;box-shadow:none}
.pcard.soon:hover{transform:none;border-color:var(--line)}
.pcard.soon p{color:var(--accent2);font-weight:700}
.pcard{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:20px;box-shadow:0 6px 22px -16px rgba(0,0,0,.4);transition:.15s}
.pcard:hover{transform:translateY(-2px);border-color:var(--accent)}
.pcard .ic{font-size:24px}
.pcard h3{margin:8px 0 4px;font-size:18px;color:var(--accent-deep)}
.pcard p{margin:0;font-size:13px;color:var(--soft)}
.pcard .count{display:inline-block;margin-top:10px;font-size:12px;font-weight:800;color:var(--accent2)}

.howbox{max-width:900px;margin:10px auto 30px;padding:0 22px}
.howbox .inner{background:#1d2330;color:#fff;border-radius:18px;padding:26px 28px;display:flex;
  justify-content:space-between;gap:18px;align-items:center;flex-wrap:wrap}
.howbox h2{margin:0 0 6px;font-size:20px}
.howbox p{margin:0;color:#c4cdd9;font-size:14px}
.howbox a{background:var(--gold);color:#3a2a08;font-weight:800;text-decoration:none;
  padding:13px 24px;border-radius:12px;white-space:nowrap}
.lfoot{text-align:center;color:#9aa;font-size:12px;padding:18px}

@page{size:A4;margin:14mm}
@media print{
  body{background:#fff}
  .nav,.printbtn,.lefycta,.nextlink,.cbanner{display:none !important}
  .sheet{box-shadow:none;max-width:none;padding:0;margin:0}
  .q,.pq,.keybox,.intro{background:#fff !important}
  .treebox{overflow:visible !important}

  /* A4で「変なところ」で途切れないように */
  .q,.pq,.intro,.keybox,.treebox,.body,.side,.pairs,.practwork,.keylist li{
    break-inside:avoid; page-break-inside:avoid;
  }
  /* 見出しが下に取り残されない */
  .seg{break-inside:avoid; break-after:avoid; page-break-after:avoid;}
  .seg h2,.qtext,.q-head,.ph{break-after:avoid; page-break-after:avoid;}
  /* 行の孤立を防ぐ */
  p,li{orphans:3; widows:3;}
  .lead{break-after:avoid;}
}
/* ===== レスポンシブ（スマホ最適化） ===== */
@media(max-width:760px){
  /* ナビ＝1行（ロゴ＋サイト名＋☰ボタン）。単元リンクはハンバーガーで開閉 */
  .nav{gap:4px;padding:8px 12px}
  .nav .home{margin:0 6px 0 8px;padding-left:8px;font-size:14px;white-space:nowrap}
  .nav .sp{display:none}
  .navburger{display:block}
  .navlinks{display:none;width:100%;flex-wrap:wrap;align-items:center;gap:4px;
    padding:8px 0 4px;border-top:1px solid var(--line);margin-top:8px}
  .nav.open .navlinks{display:flex}
  .nav a.t{padding:6px 10px;white-space:nowrap;background:#f4f6f5}
  .nav a.t.on{background:var(--accent)}
  .nav .navsec{flex-shrink:0;margin:0 2px 0 0;width:100%}

  /* 紙の余白(18mm)はスマホでは広すぎるので詰めて本文を広く使う */
  .sheet{padding:16px 14px;box-shadow:none}
  h1.main{font-size:20px}
  .brandbar{padding-bottom:6px;margin-bottom:12px}
  .brandbar .schlogo{height:24px}

  .printbtn{bottom:16px;right:14px;padding:12px 18px;font-size:14px}

  /* 例題の本文とこたえ・キーリストは縦積み */
  .body{gap:12px}
  .side{width:100%}
  .keylist{columns:1}
}
@media(max-width:680px){
  .types{grid-template-columns:1fr}
  .side{width:100%}

  /* トップはスクロール量を抑える：ヒーローを詰め、カードは2列のコンパクト表示 */
  .hero{padding:26px 18px 2px}
  .hero p{font-size:14px}
  .hero .herouse{font-size:11.5px;margin-top:10px}
  .sectit{margin:22px auto 0}
  .cards{grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}
  .pcard{padding:11px 13px;border-radius:12px}
  .pcard .ic{display:inline-block;font-size:16px;margin:0 5px 0 0;vertical-align:-1px}
  .pcard h3{display:inline;font-size:14.5px;margin:0;line-height:1.4}
  .pcard p{display:none}
  .pcard .count{display:block;margin-top:5px;font-size:10.5px}
  .howbox .inner{padding:18px 18px}
}
@media(max-width:420px){
  .sheet{padding:14px 11px}
  .hero{padding:24px 16px 2px}
  .sectit,.cards,.howbox{padding-left:14px;padding-right:14px}
}