:root { --ink:#1f2933; --muted:#5f6b76; --line:#d8dee4; --green:#1d6f4f; --soft:#f4f7f5; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); font:16px/1.65 "Yu Gothic","Hiragino Kaku Gothic ProN","Meiryo",Arial,sans-serif; }
a { color:inherit; }
.container { width:min(1120px,calc(100% - 32px)); margin:auto; }
.category-header { border-bottom:1px solid var(--line); background:#fff; }
.header-inner { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { color:var(--green); font-size:21px; font-weight:800; text-decoration:none; }
.brand small { display:block; color:var(--muted); font-size:12px; font-weight:400; }
nav { display:flex; flex-wrap:wrap; gap:16px; }
nav a { text-decoration:none; }
nav a:hover, .breadcrumbs a:hover { color:var(--green); text-decoration:underline; }
.language-toggle { border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); padding:6px 10px; font:inherit; cursor:pointer; }
.breadcrumbs { display:flex; gap:10px; padding:20px 0; color:var(--muted); font-size:14px; }
.category-hero { padding:34px 0 56px; border-bottom:1px solid var(--line); }
.category-hero > p:not(.eyebrow) { max-width:780px; color:var(--muted); font-size:18px; }
.eyebrow { color:var(--green); font-size:12px; font-weight:800; letter-spacing:.1em; }
h1 { margin:4px 0 14px; font-size:clamp(30px,5vw,46px); line-height:1.35; }
h2 { margin:6px 0 12px; font-size:clamp(23px,3vw,30px); line-height:1.4; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.category-sub-links { display:flex; flex-wrap:wrap; gap:12px; margin:18px 0 0; }
.category-sub-links a { color:var(--green); font-weight:700; text-decoration:underline; }
.button { display:inline-block; border:1px solid var(--green); border-radius:8px; padding:11px 17px; color:var(--green); font-weight:700; text-decoration:none; }
.button.primary { background:var(--green); color:#fff; }
.button:hover { filter:brightness(.92); }
.category-stock, .buying-guide { padding:54px 0; }
.section-heading p:last-child { color:var(--muted); }
.category-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:26px; }
.category-card { overflow:hidden; border:1px solid var(--line); border-radius:10px; background:#fff; }
.category-card a { display:block; height:100%; text-decoration:none; }
.category-card a:hover h3 { color:var(--green); text-decoration:underline; }
.category-card img, .image-placeholder { display:block; width:100%; aspect-ratio:4/3; object-fit:contain; background:var(--soft); }
.image-placeholder { display:grid; place-items:center; color:var(--muted); }
.category-card-copy { padding:16px; }
.stock-badge { color:var(--green); font-size:12px; font-weight:700; }
.category-card h3 { margin:8px 0; font-size:18px; line-height:1.5; }
.category-card p { margin:0 0 12px; color:var(--muted); font-size:14px; }
.category-card strong { display:block; color:#b94035; font-size:20px; }
.category-card small { display:block; margin-top:4px; color:var(--muted); }
.buying-guide { border-top:1px solid var(--line); }
.guide-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.guide-grid > div { padding:20px; border-radius:8px; background:var(--soft); }
.guide-grid h3 { margin:0 0 8px; }
.guide-grid p { margin:0; color:var(--muted); }
.visit-panel { margin:0 0 64px; padding:28px; border-radius:10px; background:var(--soft); }
.visit-panel address { margin:16px 0; font-style:normal; }
footer { padding:24px 0; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
@media(max-width:850px) { .category-grid,.guide-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .header-inner { align-items:flex-start; flex-direction:column; padding:14px 0; } .header-inner nav { gap:12px; font-size:14px; } .category-grid,.guide-grid { grid-template-columns:1fr; } .category-hero { padding:18px 0 36px; } .category-stock,.buying-guide { padding:36px 0; } }