:root{ --mint:#62d2b1; --gold:#f2c84b; --ink:#1f2933; --cream:#fffbee; --muted:#6b7280; --ring:#e5e7eb; --card:#fff; }
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP","Yu Gothic",sans-serif}
.container{max-width:1040px;margin:0 auto;padding:24px}
a{color:var(--mint);text-decoration:none} a:hover{text-decoration:underline}


/* ヒーロー */
.header{position:relative;overflow:hidden;background:linear-gradient(180deg, rgba(98,210,177,.10), transparent)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{display:flex;align-items:center;gap:12px}
.logo img{width:40px;height:40px;filter:drop-shadow(0 6px 16px rgba(0,0,0,.10))}
.nav{display:flex;gap:14px;flex-wrap:wrap}
.nav a{padding:8px 10px;border-radius:10px}
.nav a.active{background:#fff;border:1px solid var(--ring)}
.hero{padding:28px 0;text-align:left}
.hero h1{margin:6px 0 6px;font-size:28px}
.hero p{color:var(--muted);margin:0}


/* バブル背景 */
.hero-bg{position:absolute;pointer-events:none;inset:0;z-index:-1;background:radial-gradient(1000px 520px at 10% 0%, rgba(98,210,177,.18), transparent),radial-gradient(800px 460px at 90% 12%, rgba(242,200,75,.18), transparent)}
.blob{position:absolute;width:200px;height:200px;border-radius:50%;filter:blur(22px);opacity:.55;animation:float 10s ease-in-out infinite alternate}
.blob.b1{background:var(--mint);top:10%;left:15%}
.blob.b2{background:var(--gold);top:0%;right:10%;animation-delay:1.2s}
.blob.b3{background:#b4e3ff;bottom:-6%;left:25%;animation-delay:.6s}
@keyframes float{to{transform:translateY(16px) translateX(6px)}}


/* 波 */
.wave svg{display:block;width:100%;height:80px}
.wave path{fill:#fff}
.wave{ pointer-events:none; }


/* コンテンツ */
.section h2{font-size:22px;margin:8px 0 12px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--ring);border-radius:16px;padding:16px;box-shadow:0 2px 12px rgba(0,0,0,.04)}
.card h3{margin:8px 0 6px;font-size:18px}
.badge{display:inline-block;background:var(--mint);color:#fff;border-radius:999px;padding:4px 10px;font-weight:700;font-size:12px}


/* ボタン */
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.btn{appearance:none;border:1px solid var(--mint);background:var(--mint);color:#fff;padding:10px 14px;border-radius:999px;font-weight:700;text-decoration:none}
.btn.ghost{background:#fff;color:var(--mint)}
.btn.disabled{opacity:.55;pointer-events:none}


/* 補足文 */
.note{color:var(--muted);font-size:14px}
.kicker{color:var(--muted);font-weight:700;font-size:12px;letter-spacing:.2px}


/* バンド */
.band{background:linear-gradient(180deg, rgba(242,200,75,.16), rgba(242,200,75,.06));padding:18px 0;margin-top:24px}
.band .inner{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}


/* フッター */
.footer{border-top:1px solid var(--ring);margin-top:18px}
.footer .row{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.sns{display:flex;gap:10px}
.sns a{border:1px solid var(--ring);background:#fff;padding:8px 12px;border-radius:999px;font-weight:700}


/* 小さめ画面の微調整 */
@media (max-width:520px){ .hero h1{font-size:24px} }