:root{--teal:#0d9488;--teal-deep:#0b7c71;--teal-dark:#0a6b61;--beige:#f5f4ef;--ink:#1e293b;--muted:#64748b;--line:#e7e5de;--amber:#f59e0b;--white:#fff;--radius:16px;--shadow-sm:0 1px 2px #0f2a260a, 0 6px 16px #0f2a260d;--shadow-md:0 10px 30px #0f2a261a}*{box-sizing:border-box}html,body{margin:0;padding:0}body{color:var(--ink);background:var(--beige);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-family:Noto Sans JP,system-ui,-apple-system,Hiragino Kaku Gothic ProN,Yu Gothic,sans-serif;line-height:1.8}a{color:inherit;text-decoration:none}.wrap{max-width:1120px;margin:0 auto;padding:0 24px}.wrap.narrow{max-width:1080px}.topbar{background:var(--teal);color:#fff}.topbar-inner{align-items:center;gap:16px;height:58px;display:flex}.tb-brand{color:#fff;align-items:center;gap:9px;font-size:15px;font-weight:700;display:flex}.tb-search{width:min(320px,40vw);margin-left:auto;position:relative}.tb-search input{width:100%;color:var(--ink);background:#fffffff5;border:none;border-radius:999px;outline:none;padding:9px 14px 9px 38px;font-family:inherit;font-size:13px}.tb-search .icon{width:16px;height:16px;color:var(--teal);position:absolute;top:50%;left:13px;transform:translateY(-50%)}footer{color:#ffffffd1;background:#0a5a52;margin-top:48px;padding:34px 0 28px}.foot-inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;display:flex}.foot-brand{color:#fff;align-items:center;gap:11px;font-size:17px;font-weight:700;display:flex}.foot-links{flex-wrap:wrap;gap:22px;font-size:13px;display:flex}.foot-links a{color:#fffc;transition:color .15s}.foot-links a:hover{color:#fff}.copy{color:#ffffff8c;border-top:1px solid #ffffff24;width:100%;margin-top:22px;padding-top:18px;font-size:12px}.hero{background:linear-gradient(160deg, var(--teal) 0%, var(--teal-deep) 62%, var(--teal-dark) 100%);color:#fff;padding:46px 0 52px}.hero-inner{text-align:center}.brand{align-items:center;gap:10px;margin-bottom:18px;display:inline-flex}.brand .brand-name{letter-spacing:.04em;color:#fff;font-size:20px;font-weight:900}.hero h1{letter-spacing:.01em;margin:0 0 9px;font-size:clamp(22px,3.3vw,32px);font-weight:900}.hero p.lead{color:#ffffffe0;max-width:520px;margin:0 auto 22px;font-size:13.5px;font-weight:500}.search{max-width:560px;margin:0 auto;position:relative}.search input{width:100%;color:var(--ink);background:#fff;border:none;border-radius:999px;outline:none;padding:15px 20px 15px 50px;font-family:inherit;font-size:15px;box-shadow:0 10px 28px #083c3642}.search input::placeholder{color:#9aa5ad}.search .icon{width:20px;height:20px;color:var(--teal);position:absolute;top:50%;left:19px;transform:translateY(-50%)}.search input:focus{box-shadow:0 10px 28px #083c3642,0 0 0 4px #ffffff8c}main{padding:0 0 20px}.section{padding-top:40px}.cat-grid{grid-template-columns:repeat(2,1fr);gap:18px;display:grid}.cat-card{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);background:#fff;flex-direction:column;gap:9px;min-height:132px;padding:26px 28px 24px 30px;transition:transform .18s,box-shadow .18s,border-color .18s;display:flex;position:relative;overflow:hidden}.cat-card:before{content:"";background:var(--teal);transform-origin:50%;opacity:.55;width:4px;transition:transform .2s,opacity .2s;position:absolute;top:0;bottom:0;left:0;transform:scaleY(.4)}.cat-card:hover{box-shadow:var(--shadow-md);border-color:#cfeae6;transform:translateY(-4px)}.cat-card:hover:before{opacity:1;transform:scaleY(1)}.cat-card h3{margin:0;font-size:17px;font-weight:700}.cat-card p{color:var(--muted);margin:0;font-size:13.5px;line-height:1.7}.cat-card .count{color:var(--teal);letter-spacing:.02em;margin-top:auto;font-size:12px;font-weight:700}.cat-card .count:after{content:" →";color:var(--teal);font-weight:700}.no-results{text-align:center;color:var(--muted);padding:40px 0 4px;font-size:14px;display:none}.cta-band{border-radius:var(--radius);box-shadow:var(--shadow-md);color:#fff;background:linear-gradient(165deg,#12a093,#0b7c71);flex-wrap:wrap;align-items:center;gap:24px;margin-top:34px;padding:26px 32px;display:flex}.cta-band .txt{flex:1;min-width:240px}.cta-band h3{margin:0 0 5px;font-size:17px;font-weight:900}.cta-band p{color:#ffffffe6;margin:0;font-size:13px;line-height:1.7}.cta-band .btn{color:var(--teal-deep);white-space:nowrap;background:#fff;border-radius:999px;align-items:center;gap:8px;padding:12px 24px;font-size:14px;font-weight:700;transition:transform .15s,box-shadow .15s;display:inline-flex}.cta-band .btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #00000029}.crumb{color:var(--muted);padding:20px 0 0;font-size:12.5px}.crumb a:hover{color:var(--teal)}.crumb .sep{color:#c3c9cf;margin:0 7px}.crumb .here{color:var(--ink)}.cat-head{padding:14px 0 4px}.cat-head h1{margin:0 0 8px;font-size:clamp(24px,3.4vw,32px);font-weight:900}.cat-head p{color:var(--muted);max-width:640px;margin:0;font-size:14px}.layout{grid-template-columns:1fr 260px;align-items:start;gap:40px;padding:26px 0 10px;display:grid}.art-list{flex-direction:column;gap:12px;min-width:0;display:flex}.art-row{border:1px solid var(--line);border-left:4px solid var(--teal);box-shadow:var(--shadow-sm);background:#fff;border-radius:12px;align-items:center;gap:16px;padding:18px 22px;transition:transform .16s,box-shadow .16s,border-color .16s;display:flex}a.art-row:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.art-txt{min-width:0}.art-title{color:var(--ink);font-size:15.5px;font-weight:700}.art-desc{color:var(--muted);margin-top:2px;font-size:13px;line-height:1.6}.art-arrow{color:var(--teal);flex:none;margin-left:auto;font-size:16px;font-weight:700}.art-row.wip{box-shadow:none;cursor:default;background:#fafaf7;border-left-color:#cbd2cf}.art-row.wip .art-title{color:#9aa3a0}.art-row.wip .art-desc{color:#b3bab7}.badge-wip{color:#8a938f;background:#edede7;border:1px solid #e0e0d8;border-radius:999px;flex:none;margin-left:auto;padding:4px 11px;font-size:11px;font-weight:700}aside.side{position:sticky;top:22px}.side-box{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);background:#fff;padding:16px}.side-box .h{color:var(--muted);letter-spacing:.1em;margin:0 0 8px;padding:0 8px;font-size:12px;font-weight:700}.side-box ul{margin:0;padding:0;list-style:none}.side-box li{margin:0 0 1px}.side-box a{color:#54606c;border-left:2px solid #0000;border-radius:9px;padding:9px 12px;font-size:13.5px;transition:all .15s;display:block}.side-box a:hover{color:var(--teal-deep);background:#f6f5f0}.side-box a.current{color:var(--teal-deep);border-left-color:var(--teal);background:#eaf6f4;font-weight:700}.side-help{color:#fff;border-radius:var(--radius);background:linear-gradient(165deg,#12a093,#0b7c71);margin-top:14px;padding:16px 18px}.side-help .h{color:#fff;margin:0 0 6px;font-size:13px;font-weight:700}.side-help p{color:#ffffffe6;margin:0 0 12px;font-size:12px;line-height:1.7}.side-help a{color:var(--teal-deep);background:#fff;border-radius:999px;padding:8px 15px;font-size:12.5px;font-weight:700;display:inline-block}.art-head2{padding:14px 0 8px}.art-head2 .tag{color:var(--teal);background:#e4f5f2;border-radius:999px;margin-bottom:12px;padding:4px 11px;font-size:11px;font-weight:700;display:inline-block}.art-head2 h1{margin:0 0 10px;font-size:clamp(24px,3.4vw,32px);font-weight:900;line-height:1.45}.art-head2 .meta{color:var(--muted);font-size:12.5px}.article-layout{grid-template-columns:1fr 250px;align-items:start;gap:40px;padding:24px 0 10px;display:grid}.prose{min-width:0;line-height:1.85}.prose>.lead{color:#42505f;margin:0 0 26px;font-size:15.5px}.prose h2{margin:2px 0 14px;scroll-margin-top:74px;font-size:20px;font-weight:900}.prose p{margin:0 0 16px;font-size:14.5px}.prose ol{counter-reset:step;margin:0 0 18px;padding-left:0;list-style:none}.prose ol>li{margin:0;padding:0 0 18px 46px;font-size:14.5px;position:relative}.prose ol>li:before{counter-increment:step;content:counter(step);background:var(--teal);color:#fff;border-radius:50%;place-items:center;width:30px;height:30px;font-size:14px;font-weight:700;display:grid;position:absolute;top:1px;left:0}.prose ol>li:not(:last-child):after{content:"";background:#dcedea;width:2px;position:absolute;top:34px;bottom:-2px;left:15px}code.k{border:1px solid var(--line);color:#0d6f65;background:#f0efe9;border-radius:6px;padding:1px 7px;font-family:inherit;font-size:13px;font-weight:700}.divider{border:none;border-top:1px solid var(--line);height:0;margin:38px 0 30px;position:relative}.divider:before{content:"";background:var(--teal);width:40px;height:2px;position:absolute;top:-1px;left:0}.shot{text-align:center;aspect-ratio:16/9;background:repeating-linear-gradient(45deg,#fbfbf8,#fbfbf8 12px,#f4f4ee 12px 24px);border:1.5px dashed #c9d3d0;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;margin:6px 0 8px;display:flex}.shot .ic{color:#9fb2ad;width:34px;height:34px;margin:0 auto 8px;display:block}.shot b{color:#7d8c88;font-size:13px;font-weight:700;display:block}.shot small{color:#9aa8a4;margin-top:2px;font-size:12px;display:block}figure{margin:0}figcaption{color:var(--muted);text-align:center;margin:6px 0 20px;font-size:12px}.tip{border:1px solid var(--line);border-left:4px solid var(--teal);box-shadow:var(--shadow-sm);background:#fff;border-radius:10px;margin:4px 0 6px;padding:15px 18px}.tip .t{color:var(--teal-deep);align-items:center;gap:7px;margin:0 0 4px;font-size:13.5px;font-weight:700;display:flex}.tip p{color:#4a5763;margin:0;font-size:13.5px}.prevnext{gap:12px;margin:34px 0 0;display:flex}.prevnext a{border:1px solid var(--line);box-shadow:var(--shadow-sm);background:#fff;border-radius:12px;flex:1;padding:14px 16px;transition:all .15s}.prevnext a:hover{box-shadow:var(--shadow-md);border-color:#cfeae6}.prevnext .dir{color:var(--muted);font-size:11px;font-weight:700}.prevnext .t{color:var(--ink);margin-top:3px;font-size:13.5px;font-weight:700}.prevnext .next{text-align:right}.prevnext .empty{flex:1}aside.toc{position:sticky;top:22px}.toc-box{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);background:#fff;padding:18px}.toc-box .h{color:var(--muted);letter-spacing:.1em;margin:0 0 10px;font-size:12px;font-weight:700}.toc-box ul{margin:0;padding:0;list-style:none}.toc-box li{margin:0 0 2px}.toc-box a{color:#54606c;border-left:2px solid #0000;border-radius:8px;padding:6px 10px;font-size:13px;transition:all .15s;display:block}.toc-box a:hover{color:var(--teal-deep);border-left-color:var(--teal);background:#f6f5f0}.toc-help{color:#fff;border-radius:var(--radius);background:linear-gradient(165deg,#12a093,#0b7c71);margin-top:14px;padding:16px 18px}.toc-help .h{color:#fff;letter-spacing:0;margin:0 0 6px;font-size:13px;font-weight:700}.toc-help p{color:#ffffffe6;margin:0 0 12px;font-size:12px;line-height:1.7}.toc-help a{color:var(--teal-deep);background:#fff;border-radius:999px;padding:8px 15px;font-size:12.5px;font-weight:700;display:inline-block}.wip-page{text-align:center;padding:60px 20px 40px}.wip-page .badge{color:#8a938f;background:#edede7;border:1px solid #e0e0d8;border-radius:999px;margin-bottom:16px;padding:5px 14px;font-size:12px;font-weight:700;display:inline-block}.wip-page h1{margin:0 0 10px;font-size:22px;font-weight:900}.wip-page p{color:var(--muted);margin:0 0 22px;font-size:14px}.wip-page a.back{background:var(--teal);color:#fff;border-radius:999px;padding:11px 22px;font-size:13.5px;font-weight:700;display:inline-block}@media (max-width:860px){.article-layout{grid-template-columns:1fr;gap:8px}aside.toc{display:none}.tb-search{width:44vw}}@media (max-width:820px){.cat-grid{grid-template-columns:1fr}.layout{grid-template-columns:1fr;gap:20px}aside.side{position:static}}@media (max-width:560px){.hero{padding:36px 0 44px}.wrap{padding:0 18px}.section{padding-top:32px}.cta-band{padding:22px}.prevnext{flex-direction:column}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
