:root { color-scheme: light; --ink:#17212b; --muted:#61707c; --line:#dbe3e8; --surface:#f5f8fa; --accent:#176b66; --accent-dark:#0d4f4c; --max:760px; font-family: system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; }
* { box-sizing:border-box; }
h1,h2,h3,p,a,li { max-width:100%; overflow-wrap:anywhere; word-break:break-word; }
body { margin:0; color:var(--ink); background:#fff; line-height:1.7; }
a { color:var(--accent-dark); }
.site-header { display:flex; align-items:baseline; gap:.7rem; min-width:0; max-width:100%; padding:18px max(20px,calc((100% - var(--max))/2)); border-bottom:1px solid var(--line); }
.brand { color:var(--ink); font-weight:800; letter-spacing:.12em; text-decoration:none; }
.brand-note { color:var(--muted); font-size:.78rem; }
.shell { width:min(var(--max),calc(100% - 40px)); max-width:100%; margin:0 auto; padding:42px 0 72px; }
.hero { padding:8px 0 38px; }
.eyebrow { color:var(--accent); font-size:.75rem; font-weight:800; letter-spacing:.13em; margin:0 0 10px; }
h1,h2,h3 { line-height:1.3; margin-top:0; }
h1 { font-size:clamp(2rem,7vw,3.1rem); letter-spacing:-.04em; margin-bottom:14px; }
h2 { font-size:1.35rem; margin-bottom:0; }
h3 { font-size:1.08rem; }
.hero-copy { color:var(--muted); margin:0; font-size:1.03rem; }
.section-heading { align-items:center; border-bottom:2px solid var(--ink); display:flex; justify-content:space-between; margin-bottom:18px; padding-bottom:12px; }
.count { color:var(--muted); font-size:.85rem; }
.empty-state { background:var(--surface); border:1px dashed #b9c7cd; border-radius:14px; padding:30px 22px; text-align:center; }
.empty-state h3 { margin-bottom:7px; }
.empty-state p { color:var(--muted); margin:0; }
.card-grid { display:grid; gap:14px; min-width:0; }
.article-card { border:1px solid var(--line); border-radius:14px; padding:20px; text-decoration:none; display:block; min-width:0; overflow-wrap:anywhere; transition:border-color .15s,transform .15s; }
.article-card:hover,.article-card:focus-visible { border-color:var(--accent); transform:translateY(-1px); }
.article-card h3 { color:var(--ink); margin-bottom:7px; }
.article-card p { color:var(--muted); margin:0 0 10px; }
.meta { color:var(--muted); font-size:.82rem; }
.article-shell { padding-top:34px; }
.back-link { font-size:.9rem; }
.article-header { border-bottom:1px solid var(--line); margin:20px 0 30px; padding-bottom:25px; }
.article-header h1 { font-size:clamp(1.8rem,6vw,2.7rem); margin-bottom:14px; }
.disclosure { background:#eef7f5; border-left:4px solid var(--accent); border-radius:4px; color:#244a48; font-size:.9rem; margin:20px 0; padding:12px 14px; }
.article-section { background:var(--surface); border-radius:12px; margin:18px 0; padding:20px; }
.article-section p { white-space:pre-line; }
.source-note { color:var(--muted); font-size:.85rem; border-top:1px solid var(--line); padding-top:16px; }
.product-list { display:grid; gap:14px; margin-top:15px; }
.product-card { background:var(--surface); border-radius:12px; padding:18px; }
.product-card h3 { margin-bottom:8px; }
.conditions { margin:8px 0 14px; padding-left:1.1rem; }
.link-option { margin-top:10px; }
.product-link { display:inline-block; background:var(--accent); border-radius:7px; color:#fff; font-weight:700; padding:9px 13px; text-decoration:none; }
.product-link:hover,.product-link:focus-visible { background:var(--accent-dark); }
.link-label { display:block; color:var(--muted); font-size:.78rem; margin-bottom:4px; }
.site-footer { border-top:1px solid var(--line); color:var(--muted); font-size:.8rem; padding:20px; text-align:center; }
.notice { background:var(--surface); border-radius:14px; padding:24px; }
@media (min-width: 680px) { .shell { padding-top:58px; } .card-grid { grid-template-columns:repeat(2,1fr); } }