:root{--ink:#243129;--muted:#647168;--green:#2f7a4d;--green2:#eaf5ee;--line:#dfe8e1;--paper:#fff;--bg:#f7faf8;--accent:#f2b94b}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:var(--ink);background:var(--bg);line-height:1.75}
a{color:#176c3b;text-decoration-thickness:.08em;text-underline-offset:.18em}img{max-width:100%;height:auto} .wrap{max-width:1120px;margin:auto;padding:0 20px}
.top{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}.topin{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:64px}.brandmark{font-weight:800;text-decoration:none;color:var(--ink);font-size:1.05rem}.nav{display:flex;gap:16px;flex-wrap:wrap}.nav a{text-decoration:none;font-size:.92rem}
.hero{background:linear-gradient(135deg,#f1f8f3,#fff 55%,#fff6dc);padding:72px 0 56px;border-bottom:1px solid var(--line)}.eyebrow{font-size:.86rem;font-weight:800;color:var(--green);letter-spacing:.08em}.hero h1{font-size:clamp(2rem,5vw,4rem);line-height:1.13;margin:.3em 0}.lead{font-size:1.1rem;max-width:790px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}.btn{display:inline-block;background:var(--green);color:#fff;text-decoration:none;border-radius:999px;padding:11px 20px;font-weight:700}.btn.sub{background:#fff;color:var(--green);border:1px solid #b7d1c0}
section{padding:54px 0}.section-title{font-size:clamp(1.55rem,3vw,2.2rem);margin:0 0 8px}.section-intro{color:var(--muted);max-width:800px;margin-top:0}.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px}.quick a{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px;text-decoration:none;font-weight:700}.quick small{display:block;color:var(--muted);font-weight:500;margin-top:4px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}.card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}.card-img{aspect-ratio:4/3;background:#fff;display:grid;place-items:center;padding:14px;border-bottom:1px solid var(--line)}.card-img img{max-height:220px;object-fit:contain}.card-body{padding:18px;display:flex;flex-direction:column;flex:1}.tag{font-size:.78rem;font-weight:800;color:var(--green);background:var(--green2);padding:4px 8px;border-radius:999px;align-self:flex-start}.card h3{font-size:1.18rem;margin:.7em 0 .35em}.card p{margin:.25em 0;color:#3d4a41}.use{font-size:.9rem;color:var(--muted)!important}.links{display:flex;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:14px}.links a{font-weight:700}
.compare{overflow:auto}.compare table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line)}.compare th,.compare td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.compare th{background:#f0f7f2;white-space:nowrap}
.note{background:#fff8e8;border:1px solid #edd89d;border-radius:16px;padding:18px 20px}.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 16px;margin:10px 0}.faq summary{font-weight:800;cursor:pointer}.footer{padding:35px 0 50px;color:var(--muted);font-size:.9rem}.breadcrumb{font-size:.86rem;color:var(--muted);margin-bottom:18px}
@media(max-width:850px){.grid{grid-template-columns:repeat(2,1fr)}.quick{grid-template-columns:repeat(2,1fr)}.nav{display:none}}
@media(max-width:560px){.grid{grid-template-columns:1fr}.quick{grid-template-columns:1fr}.hero{padding:48px 0 38px}.wrap{padding:0 16px}}

.product-layout{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.4fr);gap:24px;align-items:start}
@media(max-width:700px){.product-layout{grid-template-columns:1fr}}