:root { --green:#06C755; --dark:#1a1a1a; --gray:#666; --light:#f2f7f4; }
* { box-sizing:border-box; }
body { margin:0; color:var(--dark); font-family:-apple-system,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif; line-height:1.7; }
.wrap { max-width:680px; margin:0 auto; padding:0 20px; }
h1 { font-size:30px; line-height:1.35; margin:0 0 12px; }
h2 { font-size:22px; text-align:center; margin:0 0 24px; }
h3 { font-size:16px; margin:0 0 6px; color:var(--green); }
.sub { font-size:16px; color:#333; margin:0 0 24px; }
.micro { font-size:12px; color:var(--gray); margin-top:10px; }
.center { text-align:center; }

/* hero */
.hero { background:linear-gradient(160deg,#0a3, var(--green)); color:#fff; padding:56px 0 48px; }
.hero h1 { color:#fff; }
.hero .sub { color:#eafff2; }
.hero .micro { color:#dffbe9; }

/* CTA */
.cta { display:inline-block; background:#fff; color:var(--green); font-weight:bold; font-size:17px; padding:14px 28px; border-radius:999px; text-decoration:none; box-shadow:0 4px 14px rgba(0,0,0,.15); }
.cta-sec { background:var(--green); color:#fff; text-align:center; }
.cta-sec h2 { color:#fff; }
.cta-sec .cta { color:var(--green); }

/* sections */
.sec { padding:48px 0; }
.sec.alt { background:var(--light); }
.pains { list-style:none; padding:0; max-width:420px; margin:0 auto; }
.pains li { background:#fff; border:1px solid #e3e8e5; border-radius:12px; padding:14px 18px; margin-bottom:12px; font-weight:bold; }
.cards { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.card { background:#fff; border:1px solid #e3e8e5; border-radius:12px; padding:18px; }
.card p { font-size:14px; color:var(--gray); margin:0; }

/* price */
.price { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.price-box { border:2px solid #e3e8e5; border-radius:14px; padding:20px; text-align:center; background:#fff; }
.price-box.rec { border-color:var(--green); }
.price-box .t { font-weight:bold; }
.price-box .p { font-size:30px; font-weight:bold; margin:6px 0; }
.price-box .p span { font-size:13px; font-weight:normal; color:var(--gray); }
.price-box .d { font-size:12px; color:var(--gray); }

/* footer */
.foot { background:#13231b; color:#cfe; padding:28px 0; text-align:center; font-size:13px; }
.foot a { color:#cfe; }
.copyright { color:#8fb; margin-top:8px; }

@media (max-width:480px){ h1{font-size:25px;} .cards{grid-template-columns:1fr;} .price{grid-template-columns:1fr;} }