/* やさしい分離子の頁の部品（2026-11-06）。色はサイトの変数だけ（--accent・--gold・--ink 系・--surface・--line）。暗い画面はサイトの切り替えに従う。
   二つの出どころは、色のほかに線の形（実線と点線）と札の言葉でも分ける。 */
.ez{--ez-a:var(--accent);--ez-b:var(--gold);
  --ez-ta:color-mix(in srgb,var(--accent) 16%,var(--surface));
  --ez-tb:color-mix(in srgb,var(--gold) 22%,var(--surface));
  --ez-leaf:color-mix(in srgb,var(--ink3) 18%,var(--surface));
  --ez-hedge:color-mix(in srgb,var(--ink3) 30%,var(--surface))}
.ez-q{font-size:1.15rem;font-weight:700;margin:1.2em 0 .4em}
.ez-fig{margin:1.4em 0;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:.7em .8em .9em}
.ez-fig svg{display:block;width:100%;max-width:520px;height:auto;margin:.2em auto 0}
.ez-step{font-weight:700;font-size:1.02rem;margin:.6em .2em .1em;display:flex;gap:.5em;align-items:baseline}
.ez-step .n{flex:0 0 auto;display:inline-block;min-width:1.7em;height:1.7em;line-height:1.7em;text-align:center;border-radius:50%;background:var(--ink);color:var(--surface);font-size:.85rem}
.ez-cap{margin:.4em .3em 0}
.ez-sep{border-left:4px solid var(--ez-b);background:var(--bg);border-radius:0 10px 10px 0;padding:.45em .8em;margin:.8em .2em .2em}
.ez-sep.no{border-left-color:var(--ink3)}
.ez-care{font-size:.92rem;color:var(--ink2);border-left:4px solid var(--line);padding:.3em .8em;margin:.7em .2em 0}
.ez-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7em;margin:1em 0}
@media (max-width:640px){.ez-cards{grid-template-columns:minmax(0,1fr)}}
.ez-card{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:.7em .9em}
.ez-card .w{font-weight:700;font-size:1.1rem}
.ez rt{font-size:.62em}
.ez-card .easy{margin:.3em 0 .2em;font-weight:700}
.ez-card .def{margin:0;font-size:.9rem;color:var(--ink2)}
.ez-motto{border:2px solid var(--ez-b);border-radius:14px;background:var(--surface);padding:.9em 1.1em;margin:1.4em 0;font-size:1.12rem;font-weight:700;line-height:1.9}
.ez-knob{display:flex;flex-wrap:wrap;align-items:center;gap:.3em .8em;margin:.6em .3em .2em;font-weight:700}
.ez-knob span{flex:1 1 100%}
.ez-knob input[type=range]{flex:1 1 auto;min-width:120px;height:44px;margin:0;accent-color:var(--ez-a);cursor:pointer}
.ez-knob output{flex:0 0 4.2em;text-align:right;font-size:1.05rem}
.ez-btns{display:flex;flex-wrap:wrap;gap:.5em;margin:.3em .3em 0}
.ez-btns button{padding:.45em 1em;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-weight:700;cursor:pointer;min-height:44px}
.ez-deeper{border:1px solid var(--line);border-radius:14px;background:var(--bg);padding:.8em 1.1em;margin:1.6em 0}
/* 絵の中 */
.ez svg text{font-family:inherit}
.ez .t{fill:var(--ink);font-size:21px;font-weight:700}
.ez .t2{fill:var(--ink2);font-size:19px}
.ez .ta{fill:var(--ez-a);font-size:21px;font-weight:700}
.ez .tb{fill:var(--ez-b);font-size:21px;font-weight:700}
.ez .mid{text-anchor:middle}
.ez .end{text-anchor:end}
.ez .qm{fill:var(--ink3);font-size:56px;font-weight:700;text-anchor:middle}
.ez .soil{fill:var(--ez-tb)}
.ez .ground{stroke:var(--ink3);stroke-width:2}
.ez .hedge{fill:var(--ez-hedge);stroke:var(--ink3);stroke-width:1.5}
.ez .crown{fill:var(--ez-leaf);stroke:var(--ink3);stroke-width:1.5}
.ez .crownfill{fill:var(--ez-leaf)}
.ez .fl{fill:var(--surface);stroke:var(--ink2);stroke-width:2.5}
.ez .fl-dye{fill:var(--ez-a);stroke:var(--ez-a);stroke-width:2.5}
.ez .root{fill:none;stroke:var(--ink2);stroke-width:7;stroke-linecap:round}
.ez .root-dye{fill:none;stroke:var(--ez-a);stroke-width:7;stroke-linecap:round}
.ez .cup{fill:var(--ez-ta);stroke:var(--ez-a);stroke-width:2.5;stroke-linejoin:round}
.ez .pour{fill:none;stroke:var(--ez-a);stroke-width:3;stroke-dasharray:4 5;stroke-linecap:round}
.ez .patch{fill:var(--ez-a);opacity:.35}
.ez .wind{fill:none;stroke:var(--ink3);stroke-width:3;stroke-linecap:round}
.ez .window{fill:var(--ez-ta);stroke:var(--ink2);stroke-width:3}
.ez .halo{fill:none;stroke:var(--surface);stroke-width:7;stroke-linecap:round}
.ez .b0{fill:none;stroke:var(--ink2);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.ez .bA{fill:none;stroke:var(--ez-a);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.ez .bB{fill:none;stroke:var(--ez-b);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.ez svg.merged .bA,.ez svg.merged .bB{stroke:var(--ink2)}
.ez .pathA{fill:none;stroke:var(--ez-a);stroke-width:3.5;stroke-linecap:round}
.ez .pathB{fill:none;stroke:var(--ez-b);stroke-width:3.5;stroke-dasharray:9 7;stroke-linecap:round}
.ez .maskline{fill:none;stroke:#fff;stroke-width:14;stroke-linecap:butt}
.ez .together{fill:var(--ez-ta)}
.ez .lake{fill:var(--ez-ta);stroke:var(--ez-a);stroke-width:2}
.ez .forest{fill:var(--ez-b)}
.ez .island{fill:var(--ez-tb);stroke:var(--ez-b);stroke-width:2}
.ez .sea{fill:var(--ez-ta)}
.ez .river{fill:none;stroke:var(--ez-ta);stroke-width:24}
.ez .river-up{fill:none;stroke:var(--ez-a);stroke-opacity:.45;stroke-width:40}
.ez .arrow{fill:none;stroke:var(--ez-a);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.ez .arrowB{fill:none;stroke:var(--ez-b);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.ez .arrow0{fill:none;stroke:var(--ink3);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.ez .f0{fill:var(--surface);stroke:var(--ink2);stroke-width:2.5}
.ez .fA{fill:var(--surface);stroke:var(--ez-a);stroke-width:3}
.ez .fB{fill:var(--surface);stroke:var(--ez-b);stroke-width:3;stroke-dasharray:7 4}
.ez .hide{display:none}