/* Hero */
.hero{padding:72px 0;background:linear-gradient(180deg,#f7fff9,transparent)}
.hero .container{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
@media(max-width:880px){.hero .container{grid-template-columns:1fr}}
.hero .chip{display:inline-block;background:var(--chip);color:#fff;padding:4px 10px;border-radius:999px;font-size:12px;margin-bottom:10px}
.hero h1{font-size:clamp(24px,5vw,40px);margin-bottom:8px}
.hero .lead{color:var(--muted);margin-bottom:16px}
.cta{display:flex;gap:12px;margin:16px 0 12px}
.btn{display:inline-block;border:1px solid var(--brand);padding:10px 16px;border-radius:10px;font-weight:700}
.btn-primary{background:var(--brand);color:#fff}
.btn-ghost{background:var(--ghost);color:var(--brand)}
.bullets{list-style:disc;color:var(--muted)}
.hero-visual .mockup{height:280px;border-radius:16px;background:
  radial-gradient(80% 120% at 20% 0,#bfffe0,transparent),
  radial-gradient(100% 140% at 100% 100%,#e8fff3,transparent),
  linear-gradient(135deg,#f0fff8,#fff);border:1px solid #e6f4ec}

/* Types */
.types .sub{color:var(--muted);margin-bottom:12px}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media(max-width:1024px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.grid{grid-template-columns:repeat(1,1fr)}}
.card{border:1px solid #eee;border-radius:14px;padding:12px;background:#fff}
.card .thumb{height:120px;border-radius:10px;background:#f7fbf8;margin-bottom:8px}

/* Before/After */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:880px){.two-col{grid-template-columns:1fr}}
.ticks{list-style:disc}
.ba-mock{border:1px dashed #cfe8da;border-radius:14px;background:#fbfffd;height:220px}

/* Features */
.features-grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:1024px){.features-grid{grid-template-columns:repeat(2,1fr)}}
.f-item{border:1px solid #eee;border-radius:12px;padding:16px;background:#fff}

/* Price */
.price .price-box{border:2px solid var(--brand);border-radius:16px;padding:24px;text-align:center;background:#fff}
.price .yen{font-size:28px}

/* Contact & Map */
.contact .contact-list{list-style:none;padding:0;margin:8px 0 16px}
.map iframe{width:100%;min-height:280px;border:0;border-radius:12px}

.card-link { text-decoration:none; color:inherit; display:block; transition:transform .2s ease; }
.card-link:hover { transform:translateY(-4px); }