:root{--accent:#1F3A5F;--tint:#E8EEF5;--red:#C0392B;--red-tint:#FBE9E7;--amber:#B7791F;--amber-tint:#FFF3D6;--green:#2C6E31;--green-tint:#E8F2E6;--blue:#0B5D8A;--ink:#222;--gray:#666;--line:#e3e3e3;--bg:#fff;--radius:14px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg);line-height:1.75;font-size:16px}
a{color:var(--accent)}
img{max-width:100%;height:auto}
.wrap{max-width:1080px;margin:0 auto;padding:0 18px}
h1{font-size:1.9rem;line-height:1.3;margin:.4em 0 .5em}
h2{font-size:1.4rem;margin:2.2em 0 .8em;padding-bottom:.3em;border-bottom:3px solid var(--accent);display:flex;align-items:center;gap:.5em}
h2 img{width:34px;height:34px;background:var(--accent);border-radius:50%;padding:6px}
h3{font-size:1.1rem;margin:.2em 0 .5em;color:var(--accent)}
.h1-icon{width:44px;height:44px;vertical-align:middle;margin-right:.3em;background:var(--accent);border-radius:50%;padding:7px}
p{margin:.4em 0}
ul,ol{padding-left:1.4em;margin:.3em 0}
li{margin:.25em 0}
.lead{font-size:1.05rem}
.note{color:var(--gray);font-size:.95rem}
small{color:var(--gray)}
/* header */
.site-header{background:var(--accent);color:#fff;position:sticky;top:0;z-index:20;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;min-height:60px}
.brand{display:flex;align-items:center;gap:.5em;color:#fff;text-decoration:none;font-weight:700;font-size:1.05rem;padding:.5em 0}
.brand img{width:34px;height:34px}
.brand small{display:block;font-size:.7rem;font-weight:400;opacity:.85;color:#fff}
.site-nav{display:flex;flex-wrap:wrap;gap:.2em .9em;font-size:.9rem}
.site-nav a{color:#fff;text-decoration:none;opacity:.92;padding:.25em 0}
.site-nav a:hover{text-decoration:underline}
.nav-em{font-weight:700;background:var(--red);padding:.2em .6em!important;border-radius:6px}
.menu-btn{display:none;background:none;border:2px solid #fff;color:#fff;font-size:1.3rem;border-radius:6px;padding:.1em .5em}
@media(max-width:860px){.menu-btn{display:block}.site-nav{display:none;width:100%;flex-direction:column;gap:.1em;padding-bottom:.6em}body.nav-open .site-nav{display:flex}}
/* hero */
.hero{background:linear-gradient(135deg,var(--accent),#3a5a85);color:#fff;border-radius:var(--radius);padding:2.2rem 1.6rem;margin-top:1.4rem}
.hero h1{color:#fff;font-size:2rem}
.hero .lead{max-width:800px}
.hero strong{color:#FFD27A}
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;padding:.6em 1.2em;border-radius:8px;font-weight:700;border:2px solid var(--accent);cursor:pointer;font-size:1rem;line-height:1.3}
.btn-red{background:var(--red);border-color:var(--red)}
.btn-ghost{background:#fff;color:var(--accent)}
.hero .btn-ghost,.hero .btn{border-color:#fff}
.hero .btn:not(.btn-red){background:#fff;color:var(--accent)}
.hero-actions{display:flex;gap:.6em;flex-wrap:wrap;margin-top:1em}
/* category cards */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.8em}
.cat-card{display:flex;align-items:center;gap:.7em;background:var(--tint);border-radius:var(--radius);padding:.9em 1em;text-decoration:none;color:var(--ink);border:2px solid transparent}
.cat-card:hover{border-color:var(--accent)}
.cat-card img{width:46px;height:46px;background:var(--accent);border-radius:50%;padding:8px;flex:none}
.cat-card strong{display:block;color:var(--accent);line-height:1.3}
.cat-card span{font-size:.85rem;color:var(--gray)}
.cat-hero{display:flex;align-items:center;gap:1em;background:var(--tint);border-radius:var(--radius);padding:1.2em 1.4em;margin-top:1em}
.cat-hero img{width:70px;height:70px;background:var(--accent);border-radius:50%;padding:12px;flex:none}
.cat-hero h1{color:var(--accent);margin:0 0 .2em}
/* animal cards */
.search{margin:.5em 0 1em}
.search input{width:100%;font-size:1.05rem;padding:.7em 1em;border:2px solid var(--line);border-radius:10px}
.animal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1em}
.animal-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.06);display:flex;flex-direction:column}
.animal-card.hidden{display:none}
.animal-card .thumb{display:block;aspect-ratio:3/2;background:var(--tint);overflow:hidden}
.animal-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.animal-card .thumb img.icon-only{object-fit:contain;padding:18%}
.ac-body{padding:.8em 1em 1em;display:flex;flex-direction:column;gap:.2em;flex:1}
.ac-body h3{margin:0}
.ac-body h3 a{text-decoration:none;display:flex;align-items:center;gap:.4em}
.ac-body h3 img{width:26px;height:26px}
.ac-body p{margin:0;font-size:.9rem;color:var(--gray)}
.ac-body .pt{color:var(--ink);font-size:.9rem;margin-top:.3em}
.ac-links{margin-top:auto;padding-top:.6em;display:flex;gap:.5em}
.mini{font-size:.85rem;background:var(--tint);color:var(--accent);text-decoration:none;padding:.25em .7em;border-radius:6px;font-weight:700}
/* animal page */
.breadcrumb{font-size:.85rem;color:var(--gray);margin:.8em 0}
.animal-hero{display:grid;grid-template-columns:1fr 1fr;gap:1.4em;align-items:center;margin-bottom:1em}
@media(max-width:760px){.animal-hero{grid-template-columns:1fr}}
.hero-photo{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--tint)}
.hero-photo img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.hero-photo figcaption{font-size:.75rem;color:var(--gray);padding:.3em .8em;background:#fafafa}
.hero-photo figcaption a{color:var(--gray)}
.hero-icon{aspect-ratio:3/2;display:flex;align-items:center;justify-content:center}
.hero-icon img{width:45%;height:auto;aspect-ratio:1}
.cat-label{display:flex;align-items:center;gap:.4em;color:var(--accent);font-weight:700;margin:0}
.cat-label img{width:28px;height:28px}
.hero-text h1{color:var(--accent);margin:.1em 0}
.hero-text .sub{color:var(--gray)}
.point{background:var(--amber-tint);border-radius:10px;padding:.6em .9em;font-weight:700;display:flex;gap:.5em;align-items:flex-start}
.point img{width:28px;height:28px;background:var(--amber);border-radius:50%;padding:5px;flex:none}
.toc{display:flex;flex-wrap:wrap;gap:.35em;background:var(--tint);border-radius:var(--radius);padding:.8em 1em;font-size:.9rem;align-items:center}
.toc strong{margin-right:.4em;color:var(--accent)}
.toc a{background:#fff;border-radius:6px;padding:.2em .6em;text-decoration:none;border:1px solid var(--line)}
.kv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.6em;margin:0}
.kv{background:var(--tint);border-radius:10px;padding:.6em .9em}
.kv dt{font-weight:700;color:var(--accent);font-size:.9rem}
.kv dd{margin:0}
.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:.9em}
.card{background:var(--tint);border-radius:var(--radius);padding:1em 1.1em}
.card h3{display:flex;align-items:center;gap:.4em}
.card ul{margin:0}
.card-red{background:var(--red-tint)}.card-red h3{color:var(--red)}
.card-amber{background:var(--amber-tint)}.card-amber h3{color:var(--amber)}
.lbl{display:inline-block;background:var(--accent);color:#fff;font-size:.78rem;padding:.05em .5em;border-radius:5px;margin-right:.4em;font-weight:700;vertical-align:middle}
.lbl-green{background:var(--green)}.lbl-red{background:var(--red)}.lbl-amber{background:var(--amber)}.lbl-blue{background:var(--blue)}
.checklist{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.5em}
.checklist li{background:var(--tint);border-radius:10px;padding:.5em .8em}
.checklist label{display:flex;gap:.6em;align-items:flex-start;cursor:pointer}
.checklist input{width:22px;height:22px;flex:none;margin-top:.2em}
.steps{counter-reset:s;list-style:none;padding:0}
.steps li{counter-increment:s;position:relative;padding-left:2.3em;margin:.5em 0}
.steps li::before{content:counter(s);position:absolute;left:0;top:.1em;width:1.7em;height:1.7em;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;text-align:center;line-height:1.7em;font-size:.9rem}
.cta{background:var(--tint);border:2px dashed var(--accent);border-radius:var(--radius);padding:1.2em 1.4em}
.cta h3{margin-top:0}
.course-box{display:flex;gap:1em;align-items:center;background:#f6f6f6;border-radius:var(--radius);padding:1em 1.2em;margin:2em 0 1em;flex-wrap:wrap}
.course-box img{border-radius:8px;background:#fff;flex:none}
.link-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.4em}
.link-list a{display:flex;align-items:center;gap:.4em;background:var(--tint);border-radius:8px;padding:.4em .7em;text-decoration:none}
.link-list img{width:24px;height:24px}
.about-box{background:#fafafa;border-radius:var(--radius);padding:1.2em 1.4em;margin-top:1.5em}
.about-box h2{margin-top:1.2em}
/* quiz */
.quiz-controls{display:flex;flex-wrap:wrap;gap:.8em;align-items:center;background:var(--tint);padding:.8em 1em;border-radius:var(--radius);margin:1em 0}
.quiz-controls select{font-size:1rem;padding:.3em .5em;border-radius:6px;border:1px solid var(--line)}
.quiz{margin:1em 0}
.q-progress{display:flex;justify-content:space-between;font-size:.9rem;color:var(--gray);margin-bottom:.4em}
.q-bar{height:8px;background:var(--line);border-radius:4px;overflow:hidden;margin-bottom:1em}
.q-bar span{display:block;height:100%;background:var(--accent);width:0;transition:width .3s}
.q-card{border:2px solid var(--accent);border-radius:var(--radius);padding:1.2em 1.4em;background:#fff}
.q-card .tag{display:inline-block;background:var(--tint);color:var(--accent);font-size:.8rem;padding:.1em .6em;border-radius:6px;margin-right:.4em;font-weight:700}
.q-card .tag.d1{background:var(--green-tint);color:var(--green)}.q-card .tag.d3{background:var(--red-tint);color:var(--red)}
.q-card h3{font-size:1.2rem;margin:.4em 0}
.scenario{background:#fafafa;border-left:4px solid var(--accent);padding:.7em 1em;border-radius:0 8px 8px 0}
.choices{list-style:none;padding:0;display:grid;gap:.5em;margin:.8em 0}
.choices button{width:100%;text-align:left;background:#fff;border:2px solid var(--line);border-radius:10px;padding:.7em 1em;font-size:1rem;cursor:pointer;display:flex;gap:.6em;align-items:flex-start;line-height:1.5;font-family:inherit}
.choices button:hover{border-color:var(--accent)}
.choices button .k{flex:none;width:1.8em;height:1.8em;border-radius:50%;background:var(--tint);color:var(--accent);font-weight:700;text-align:center;line-height:1.8em}
.choices button.correct{border-color:var(--green);background:var(--green-tint)}
.choices button.wrong{border-color:var(--red);background:var(--red-tint)}
.choices button:disabled{cursor:default}
.q-result{border-radius:10px;padding:.9em 1.1em;margin:.8em 0}
.q-result.ok{background:var(--green-tint)}.q-result.ng{background:var(--red-tint)}
.q-result h4{margin:0 0 .3em}
.q-nav{display:flex;gap:.6em;flex-wrap:wrap;margin-top:.8em}
.q-summary{background:var(--tint);border-radius:var(--radius);padding:1.2em 1.4em}
.q-summary .score{font-size:2.2rem;font-weight:700;color:var(--accent)}
.q-summary table{width:100%;border-collapse:collapse;font-size:.9rem;margin-top:.6em}
.q-summary td,.q-summary th{padding:.3em .5em;border-bottom:1px solid var(--line);text-align:left}
.answers details{border:1px solid var(--line);border-radius:10px;padding:.5em .9em;margin:.5em 0;background:#fff}
.answers summary{cursor:pointer;font-weight:700;display:flex;gap:.5em;align-items:center;flex-wrap:wrap}
.answers .no{background:var(--accent);color:#fff;border-radius:6px;padding:0 .5em;font-size:.85rem}
.answers .tag{font-size:.8rem;color:var(--gray);font-weight:400}
.choices-static{padding-left:1.6em}
.choices-static li.correct{font-weight:700;color:var(--green)}
/* footer */
.site-footer{background:#f3f3f3;margin-top:3em;padding:1.5em 0 2em;border-top:4px solid var(--accent)}
.footer-courses{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1em}
.course{display:flex;gap:.9em;align-items:center;background:#fff;border-radius:10px;padding:.8em 1em}
.course img{flex:none;border-radius:6px}
.disclaimer{font-size:.85rem;color:var(--gray);margin-top:1em}
.credit{font-size:.85rem;color:var(--gray)}
@media print{.site-header,.site-footer,.quiz-controls,.quiz,.toc,.hero-actions,.cta,.menu-btn{display:none!important}body{font-size:12pt}.answers details{page-break-inside:avoid}.answers details[open]{display:block}}