
:root{--ink:#202b35;--soft:#556574;--a:#246c66;--bg:#f8f8f3;--line:#dfE5df;--white:#fff;--accent:#e5f2ec}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;color:var(--ink);background:var(--bg);line-height:1.85}a{color:var(--a)}header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}.shell{max-width:1080px;margin:auto;padding:0 22px}.head{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-size:1.19rem;font-weight:850;letter-spacing:.03em;text-decoration:none;color:var(--ink)}.brand small{display:block;color:var(--soft);font-size:.62rem;letter-spacing:.12em}nav{display:flex;gap:18px;flex-wrap:wrap}nav a{text-decoration:none;color:var(--soft);font-size:.87rem}nav a:hover{text-decoration:underline}.notice{background:#eaf0ec;text-align:center;padding:7px 12px;font-size:.75rem;color:#476259}.hero{background:linear-gradient(130deg,#e5f1e8,#f7f5eb);padding:68px 0 76px}.eyebrow{font-weight:750;letter-spacing:.15em;font-size:.78rem;color:var(--a)}h1{font-size:clamp(2rem,5vw,3.25rem);line-height:1.45;letter-spacing:-.03em;margin:10px 0 20px}h2{font-size:1.6rem;margin:0 0 20px;line-height:1.5}h3{font-size:1.1rem;margin:0 0 9px}p{margin:0 0 16px}.lead{font-size:1.1rem;max-width:680px;color:#45555a}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}.button{display:inline-block;border:1px solid var(--a);border-radius:10px;padding:10px 18px;background:var(--a);color:#fff;text-decoration:none;font-weight:750}.button.alt{background:#fff;color:var(--a)}section{padding:55px 0}.sectionIntro{color:var(--soft);margin-top:-12px;margin-bottom:24px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{background:#fff;border:1px solid var(--line);padding:24px;border-radius:17px}.card p{color:var(--soft);font-size:.92rem}.card a{font-weight:750}.pill{display:inline-block;background:#e5f2ec;color:#28695e;padding:2px 10px;font-size:.75rem;border-radius:30px;margin-bottom:12px}.panel{background:#fff;border:1px solid var(--line);padding:26px;border-radius:17px;max-width:830px}.formgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}label{display:block;font-weight:700;font-size:.84rem;margin-bottom:7px}input,select{width:100%;border:1px solid #bfcac5;border-radius:9px;padding:12px;font-size:1rem;background:#fff;color:var(--ink)}output{display:block;background:#edf6ef;padding:15px 18px;border-radius:10px;margin-top:18px}.results{display:none}.results.show{display:block}.muted,small{color:var(--soft)}.article{max-width:780px;margin:auto;padding:45px 22px 75px}.article h1{font-size:2.25rem}.article h2{margin:35px 0 12px;font-size:1.42rem}.article ul{padding-left:24px}.article li{margin:8px 0}.article .box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;margin:22px 0}.article table{border-collapse:collapse;width:100%;background:#fff}.article th,.article td{padding:12px;border:1px solid var(--line);text-align:left}.article th{background:#ebf3ed}.updated{font-size:.82rem;color:var(--soft)}footer{background:#243b39;color:#f1f5f3;padding:32px 0}footer a{color:#e5f3ea;margin-right:18px;font-size:.84rem}.footlinks{display:flex;gap:10px;flex-wrap:wrap}footer p{font-size:.78rem;color:#c5d2cd;margin-top:16px}.warning{border-left:4px solid #c6a15b;padding:12px 16px;background:#fff7e8;font-size:.86rem}.tag{font-size:.7rem;color:#6b8279}button{cursor:pointer}.filter{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:25px}.filter button{padding:9px 14px;border:1px solid #b1c8bf;border-radius:30px;background:#fff;color:#346f65}.filter button.active{background:#246c66;color:white}.hide{display:none}@media(max-width:720px){.head{align-items:start;flex-direction:column;padding:15px 0;gap:8px}.grid,.formgrid{grid-template-columns:1fr}.hero{padding:48px 0}.card{padding:20px}nav{gap:11px}.article h1{font-size:1.8rem}}
/* Illustrated editorial layout */
:root { --bg: #faf9f4; --line: #d9e1d7; }
.hero { background: #edf2e9; padding: 58px 0; }
.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
}
.hero-art, .card-art, .article-art { display: block; width: 100%; height: auto; }
.hero-art { border: 1px solid #c6d5c8; border-radius: 4px; }
.hero h1 { line-height: 1.34; }
.card { border-radius: 6px; }
.card-art { margin-bottom: 18px; border-radius: 3px; }
.article-art { margin: 8px 0 20px; border-radius: 4px; }
#courses, #planner { scroll-margin-top: 90px; }
.contact-email { overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .hero { padding: 36px 0; }
  .hero-layout { grid-template-columns: 1fr; }
  .hero-layout .lead { font-size: 1rem; }
  .head { padding-inline: 22px; }
  #courses, #planner { scroll-margin-top: 105px; }
}
