/* =========
   Reset
========= */

:root{
  --bg:#fafafa;
  --surface:#ffffff;
  --text:#111111;
  --muted:#6b7280;
  --line:#e5e7eb;
  --accent:#17b26a;

  --radius:18px;
  --shadow:0 8px 30px rgba(0,0,0,.05);

  --container:1120px;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{

  font-family:"Inter","Noto Sans JP",sans-serif;

  background:var(--bg);

  color:var(--text);

  line-height:1.8;

  overflow-x:hidden;

  -webkit-font-smoothing:antialiased;

}

img{

  display:block;

  max-width:100%;

}

a{

  text-decoration:none;

  color:inherit;

}

.container{

  max-width:var(--container);

  margin:auto;

  padding:0 28px;

}

.narrow{

  max-width:760px;

}

/* =========
Header
========= */

.header{

  position:fixed;

  inset:0 0 auto 0;

  height:72px;

  display:flex;

  align-items:center;

  backdrop-filter:blur(18px);

  background:rgba(250,250,250,.72);

  border-bottom:1px solid rgba(255,255,255,.5);

  z-index:1000;

}

.header .container{

  display:flex;

  justify-content:space-between;

  align-items:center;

  width:100%;

}

.logo{

  font-size:20px;

  font-weight:700;

  letter-spacing:-0.5px;

}

nav{

  display:flex;

  gap:32px;

}

nav a{

  color:var(--muted);

  transition:.3s;

}

nav a:hover{

  color:var(--text);

}

/* =========
Hero
========= */

.hero{

  min-height:80vh;

  display:flex;

  align-items:center;

  justify-content:center;

  text-align:center;

  position:relative;

  padding:140px 24px 90px;

  overflow:hidden;

}

.hero-inner{

  position:relative;

  z-index:2;

  max-width:820px;

}

.eyebrow{

  font-size:13px;

  letter-spacing:4px;

  color:var(--accent);

  font-weight:700;

  margin-bottom:20px;

}

.hero h1{

  font-size:clamp(48px,8vw,88px);

  line-height:1.05;

  letter-spacing:-3px;

  margin-bottom:28px;

}

.lead{

  font: size 19px;

  color:var(--muted);

  max-width:650px;

  margin:auto;

}

.button{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  margin-top:42px;

  padding:16px 34px;

  background:#111;

  color:white;

  border-radius:999px;

  font-weight:600;

  transition:.35s;

}

.button:hover{

  transform:translateY(-4px);

  box-shadow:var(--shadow);

}

.button.dark{

  background:#111;

}

.scroll{

  position:absolute;

  bottom:32px;

  color:#9ca3af;

  font-size:14px;

  letter-spacing:2px;

}

/* =========
Background Blur
========= */

.blur{

  position:absolute;

  border-radius:999px;

  filter:blur(120px);

}

.blur-green{

  width:420px;

  height:420px;

  background:#86efac;

  left:-120px;

  top:-100px;

  opacity:.28;

}

.blur-blue{

  width:360px;

  height:360px;

  background:#bfdbfe;

  right:-120px;

  bottom:-120px;

  opacity:.30;

}

/* =========
Section
========= */

.section{

  padding:120px 0;

}

.label{

  color:var(--accent);

  letter-spacing:3px;

  font-size:13px;

  font-weight:700;

  margin-bottom:16px;

}

.section h2{

  font-size:clamp(30px,5vw,58px);

  line-height:1.15;

  letter-spacing:-2px;

  margin-bottom:28px;

}

.text{

  color:var(--muted);

  font-size:18px;

}
/* =========================
   Service
========================= */

.service-list{

    max-width:1100px;
    margin:80px auto 0;
    padding:0 28px;

}

.service{

    display:grid;
    grid-template-columns:80px 1fr 1fr;
    gap:40px;

    align-items:center;

    padding:40px 0;

    border-top:1px solid var(--line);

    transition:.35s;

}

.service:last-child{

    border-bottom:1px solid var(--line);

}

.service:hover{

    transform:translateX(10px);

}

.service span{

    font-size:14px;

    color:#9ca3af;

    font-weight:600;

}

.service h3{

    font-size:28px;

    font-weight:600;

    letter-spacing:-1px;

}

.service p{

    color:var(--muted);

}


/* =========================
   Concept
========================= */

.concept{

    text-align:center;

}

.divider{

    width:80px;

    height:1px;

    background:#ddd;

    margin:0 auto;

}


/* =========================
   Contact
========================= */

.contact{

    padding-top:140px;

}

.contact-card{

    background:#111;

    color:white;

    border-radius:24px;

    padding:90px;

    text-align:center;

}

.contact-card .label{

    color:#86efac;

}

.contact-card h2{

    margin-bottom:24px;

}

.contact-card .text{

    color:#cfcfcf;

    max-width:700px;

    margin:auto;

}

.contact-card .button{

    margin-top:40px;

    background:white;

    color:#111;

}


/* =========================
   Footer
========================= */

footer{

    padding:90px 0;

}

.footer{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:40px;

}

.footer p{

    color:var(--muted);

    margin-top:8px;

}

.footer-links{

    display:flex;

    gap:30px;

}

.footer-links a{

    color:var(--muted);

    transition:.3s;

}

.footer-links a:hover{

    color:#111;

}


/* =========================
   Animation
========================= */

.fade{

    opacity:0;

    transform:translateY(40px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.fade.show{

    opacity:1;

    transform:none;

}


/* =========================
   Mobile
========================= */

@media(max-width:900px){

    nav{

        display:none;

    }

    .hero{

        min-height:72vh;

        padding:120px 24px 80px;

    }

    .hero h1{

        font-size:54px;

        letter-spacing:-2px;

    }

    .lead{

        font-size:17px;

    }

    .section{

        padding:90px 0;

    }

    .service{

        grid-template-columns:1fr;

        gap:12px;

        padding:28px 0;

    }

    }

    .service h3{

        font-size:22px;

    }

    .contact-card{

        padding:56px 28px;

        border-radius:20px;

    }

    .footer{

        flex-direction:column;

    }

    .footer-links{

        flex-direction:column;

        gap:12px;

    }



@media(max-width:600px){

    .container{

        padding:0 20px;

    }

    .hero{

        text-align:left;

        align-items:flex-end;

        padding-bottom:90px;

    }

    .hero-inner{

        max-width:100%;

    }

    .hero h1{

        font-size:42px;

        line-height:1.15;

    }

    .lead{

        margin:0;

    }

    .button{

        width:100%;

        margin-top:30px;

    }

    .scroll{

        display:none;

    }

    .contact-card h2{

        font-size:34px;

    }

}