@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Outfit:wght@300;400;500;600;700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#f8faf7;color:#2a3a2e;font-family:"Noto Sans JP","Outfit",sans-serif;font-weight:400;line-height:1.9;-webkit-font-smoothing:antialiased}

/* ===== Animations ===== */
.fade-up{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.fade-up.visible{opacity:1;transform:none}
.stagger{transition-delay:calc(var(--i,0) * .12s)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes blob{0%,100%{border-radius:42% 58% 62% 38%/45% 55% 45% 55%}50%{border-radius:58% 42% 38% 62%/55% 45% 55% 45%}}

/* ===== Nav ===== */
nav{position:fixed;top:0;left:0;right:0;z-index:100;height:56px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;background:rgba(248,250,247,.88);backdrop-filter:blur(16px);border-bottom:1px solid rgba(0,0,0,.04);transition:box-shadow .3s}
nav.scrolled{box-shadow:0 2px 12px rgba(0,0,0,.04)}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-logo img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.nav-logo span{font-family:"Outfit",sans-serif;font-size:13px;font-weight:600;letter-spacing:.1em;color:#2a3a2e}
.nav-links{display:flex;gap:24px;list-style:none;align-items:center}
.nav-links a{font-size:12px;color:#7a8a7e;text-decoration:none;transition:color .2s}
.nav-links a:hover{color:#2a3a2e}
.nav-cta{font-size:11px!important;padding:7px 18px;background:#3aaa8a;color:#fff!important;border-radius:20px;transition:background .2s}
.nav-cta:hover{background:#2e9478}
.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;z-index:102}
.nav-burger span{display:block;width:20px;height:1.5px;background:#2a3a2e;transition:transform .3s,opacity .2s}
.nav-burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.nav-overlay{position:fixed;inset:0;z-index:99;background:rgba(248,250,247,.98);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;opacity:0;pointer-events:none;transition:opacity .3s}
.nav-overlay.open{opacity:1;pointer-events:auto}
.nav-overlay a{font-size:17px;color:#2a3a2e;text-decoration:none}

/* ===== Hero ===== */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:100px 24px 60px;position:relative;overflow:hidden}
.hero-blobs{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-blob{position:absolute;filter:blur(80px);opacity:.22;animation:blob 14s ease-in-out infinite}
.hero-blob-1{width:400px;height:400px;background:#3aaa8a;top:-10%;right:8%;animation-delay:0s}
.hero-blob-2{width:320px;height:320px;background:#5bc4a8;bottom:0;left:2%;animation-delay:-5s}
.hero-blob-3{width:240px;height:240px;background:#7ad4c0;top:40%;left:40%;animation-delay:-9s}
.hero-content{position:relative;text-align:center;max-width:640px}
.hero-logo{width:100px;height:100px;border-radius:50%;object-fit:cover;margin:0 auto 24px;animation:float 5s ease-in-out infinite;box-shadow:0 8px 28px rgba(58,170,138,.12)}
.hero h1{font-family:"Outfit",sans-serif;font-size:clamp(32px,5.5vw,52px);font-weight:700;line-height:1.15;letter-spacing:-.02em;margin-bottom:6px;color:#1e3228}
.hero-sub{font-family:"Outfit",sans-serif;font-size:clamp(13px,1.8vw,16px);font-weight:300;color:#5a7a6a;margin-bottom:20px}
.hero-desc{font-size:14px;color:#5a7a6a;line-height:2;max-width:440px;margin:0 auto}
.hero-cta{display:inline-block;margin-top:32px;padding:12px 32px;font-size:13px;font-weight:500;background:#3aaa8a;color:#fff;border-radius:24px;text-decoration:none;transition:background .2s,transform .2s,box-shadow .2s;box-shadow:0 4px 14px rgba(58,170,138,.18)}
.hero-cta:hover{background:#2e9478;transform:translateY(-2px);box-shadow:0 6px 20px rgba(58,170,138,.22)}

/* ===== Sections ===== */
section{padding:88px 24px}
.wrap{max-width:880px;margin:0 auto}
.label{font-family:"Outfit",sans-serif;font-size:11px;font-weight:600;letter-spacing:.16em;color:#3aaa8a;text-transform:uppercase;margin-bottom:10px}
h2{font-family:"Outfit",sans-serif;font-size:clamp(22px,3.2vw,30px);font-weight:700;line-height:1.45;margin-bottom:14px;color:#1e3228}
.lead{font-size:14px;color:#5a7a6a;max-width:540px;line-height:2}

/* ===== Concept ===== */
.concept{background:#fff}
.concept-text{font-size:14px;color:#4a5e50;max-width:600px;line-height:2.2;margin-bottom:36px}
.concept-box{padding:28px 32px;background:linear-gradient(135deg,#eef7f3,#f4faf7);border-radius:14px;border-left:4px solid #3aaa8a;margin-bottom:40px}
.concept-box p{font-size:15px;font-weight:500;line-height:1.9;color:#1e3228}
.concept-img{border-radius:14px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.04)}
.concept-img img{width:100%;height:auto;display:block}

/* ===== Strengths ===== */
.strengths{background:#f8faf7}
.str-img{margin-top:40px;border-radius:14px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.04)}
.str-img img{width:100%;height:auto;display:block}
.str-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.str-card{background:#fff;border-radius:14px;padding:32px 24px;border:1px solid rgba(0,0,0,.04);transition:transform .3s,box-shadow .3s}
.str-card:hover{transform:translateY(-4px);box-shadow:0 8px 28px rgba(58,170,138,.07)}
.str-num{font-family:"Outfit",sans-serif;font-size:36px;font-weight:700;background:linear-gradient(135deg,#3aaa8a,#78cdb8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:14px}
.str-card h3{font-size:14px;font-weight:700;margin-bottom:8px;line-height:1.5;color:#1e3228}
.str-card p{font-size:12px;color:#5a7a6a;line-height:1.85}

/* ===== Overview ===== */
.overview{background:#fff}
.overview-img{margin-top:32px;border-radius:14px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.04)}
.overview-img img{width:100%;height:auto;display:block}

/* ===== Products ===== */
.products{background:#f8faf7}
.prod-cards{display:flex;flex-direction:column;gap:40px;margin-top:48px}
.prod-row{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;background:#fff;border-radius:16px;overflow:hidden;border:1px solid rgba(0,0,0,.04);transition:box-shadow .3s}
.prod-row:hover{box-shadow:0 8px 28px rgba(0,0,0,.05)}
.prod-row.reverse .prod-text{order:2}
.prod-row.reverse .prod-visual{order:1}
.prod-text{padding:36px 32px}
.prod-text h3{font-family:"Outfit",sans-serif;font-size:20px;font-weight:600;margin-bottom:10px;color:#1e3228}
.prod-text p{font-size:13px;color:#5a7a6a;line-height:1.9;margin-bottom:14px}
.prod-tag{display:inline-block;font-size:10px;font-weight:500;padding:4px 12px;border-radius:16px}
.prod-tag.active,.prod-tag.live{background:#e6f5f0;color:#2e9478}
.prod-tag.soon{background:#eef3f9;color:#4a8ec4}
.prod-link{display:inline-block;margin-top:12px;font-size:13px;font-weight:500;color:#3aaa8a;text-decoration:none;transition:gap .2s}
.prod-link:hover{text-decoration:underline}
.prod-visual{overflow:hidden;min-height:240px}
.prod-visual img{width:100%;height:100%;object-fit:cover;display:block}

/* ===== Future ===== */
.future{background:#fff}
.future-text{font-size:14px;color:#4a5e50;max-width:600px;line-height:2.2;margin-bottom:36px}
.future-img{border-radius:14px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.04)}
.future-img img{width:100%;height:auto;display:block}

/* ===== Download ===== */
.download{background:#f8faf7}
.dl-row{margin-top:32px;display:flex;align-items:center;gap:20px;padding:20px 24px;background:#fff;border:1px solid rgba(0,0,0,.04);border-radius:12px;max-width:520px;transition:box-shadow .2s}
.dl-row:hover{box-shadow:0 4px 16px rgba(0,0,0,.04)}
.dl-body{flex:1}
.dl-title{font-size:14px;font-weight:600;color:#1e3228;margin-bottom:2px}
.dl-desc{font-size:12px;color:#7a8a7e}
.dl-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;font-size:12px;font-weight:500;background:#3aaa8a;color:#fff;border-radius:20px;text-decoration:none;transition:background .2s;white-space:nowrap}
.dl-btn:hover{background:#2e9478}

/* ===== Contact ===== */
.contact{background:#fff;text-align:center}
.contact .lead{margin:0 auto 36px}
.contact-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-main{display:inline-block;padding:12px 28px;font-size:13px;font-weight:500;background:#3aaa8a;color:#fff;border-radius:24px;text-decoration:none;transition:background .2s,transform .2s}
.btn-main:hover{background:#2e9478;transform:translateY(-2px)}
.btn-sub{display:inline-block;padding:12px 28px;font-size:13px;border:1px solid #ccc;color:#2a3a2e;border-radius:24px;text-decoration:none;transition:border-color .2s}
.btn-sub:hover{border-color:#3aaa8a}
.contact-mail{margin-top:18px;font-size:12px;color:#7a8a7e}
.contact-mail a{color:#7a8a7e;text-decoration:none}
.contact-mail a:hover{color:#3aaa8a}

/* ===== Footer ===== */
footer{padding:28px 24px;text-align:center;border-top:1px solid rgba(0,0,0,.04)}
footer p{font-size:11px;color:#aaa}
footer a{color:#3aaa8a;text-decoration:none;font-size:11px}

/* ===== Responsive ===== */
@media(max-width:700px){
  nav{padding:0 16px}
  .nav-links{display:none}
  .nav-burger{display:flex}
  section{padding:64px 16px}
  .str-grid{grid-template-columns:1fr}
  .prod-row{grid-template-columns:1fr}
  .prod-row.reverse .prod-text{order:1}
  .prod-row.reverse .prod-visual{order:2}
  .prod-visual{min-height:180px}
  .contact-btns{flex-direction:column;align-items:center}
  .dl-row{flex-direction:column;align-items:flex-start}
}