:root{
  --bg:#fff; --tint:#f5f5f7; --ink:#1d1d1f; --sub:#6e6e73;
  --line:#d2d2d7; --card:#fff; --btn:#1d1d1f; --btn-ink:#fff;
  --inv-bg:#000; --inv-ink:#f5f5f7;
  --r:22px;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#000;--tint:#111113;--ink:#f5f5f7;--sub:#a1a1a6;--line:#2c2c2e;--card:#1c1c1e;--btn:#f5f5f7;--btn-ink:#000;--inv-bg:#f5f5f7;--inv-ink:#1d1d1f}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.9 "Noto Sans JP","Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
.wrap{max-width:980px;margin:0 auto;padding:0 24px}
a{color:inherit}
h1,h2,h3{line-height:1.4;margin:0;letter-spacing:-.01em}
strong,b{font-weight:700}
.sp{display:none}

/* header */
.header{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
.header__in{display:flex;justify-content:space-between;align-items:center;min-height:52px;gap:12px}
.logo{font-weight:700;text-decoration:none;font-size:15px;letter-spacing:0}
.logo span{font-weight:800}
.nav{display:flex;align-items:center;gap:24px;font-size:13px}
.nav a{text-decoration:none;color:var(--sub)}
.nav a:hover{color:var(--ink)}
.nav .btn{color:var(--btn-ink)}

/* buttons */
.btn{display:inline-block;background:var(--btn);color:var(--btn-ink);font-weight:600;padding:14px 30px;border-radius:999px;text-decoration:none;border:1px solid var(--btn);transition:opacity .2s}
.btn:hover{opacity:.8}
.btn--sm{padding:5px 14px;font-size:13px}
.btn--lg{padding:18px 44px;font-size:18px}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}

/* hero */
.hero{padding:104px 0 88px;text-align:center}
.hero__tag{display:inline-block;margin:0 0 24px;color:var(--sub);font-size:15px;font-weight:600;letter-spacing:.04em}
.hero h1{font-size:clamp(32px,7vw,68px);font-weight:800;line-height:1.3;letter-spacing:-.02em}
.hero h1 em{font-style:normal;display:inline-block;margin-bottom:.1em}
.hero__lead{color:var(--sub);margin:32px auto;max-width:640px;font-size:clamp(15px,2.2vw,19px)}
.hero__lead strong{color:var(--ink)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.points{display:flex;flex-wrap:wrap;gap:0;justify-content:center;list-style:none;padding:0;margin:56px auto 0;max-width:640px;border-top:1px solid var(--line)}
.points li{flex:1 1 33%;padding:24px 8px 0;font-size:14px;color:var(--sub)}
.points b{display:block;font-size:clamp(20px,3.6vw,28px);color:var(--ink);line-height:1.4}

/* sections */
.sec{padding:96px 0}
.sec--tint{background:var(--tint)}
.sec h2{font-size:clamp(26px,4.6vw,42px);font-weight:800;text-align:center;margin-bottom:36px;letter-spacing:-.02em}
.lead{text-align:center;margin:0 auto 48px;max-width:720px;color:var(--sub);font-size:clamp(16px,2.2vw,19px)}
.lead strong{color:var(--ink)}
.note{text-align:center;color:var(--sub);font-size:14px;margin-top:32px}

/* check list */
.checks{list-style:none;padding:0;margin:0 auto;max-width:680px}
.checks li{position:relative;padding:18px 8px 18px 44px;border-bottom:1px solid var(--line)}
.checks li::before{content:"";position:absolute;left:8px;top:25px;width:16px;height:16px;border:1.5px solid var(--ink);border-radius:50%}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--tint);border-radius:var(--r);padding:32px 28px}
.sec--tint .card{background:var(--card)}
.card__no{font-size:13px;font-weight:700;color:var(--sub);margin-bottom:12px;letter-spacing:.1em}
.card__no::before{content:"0"}
.card h3{font-size:19px;margin-bottom:12px}
.card p{margin:0;color:var(--sub);font-size:15px;line-height:1.85}

/* why */
.why{max-width:720px;margin:0 auto}
.why p{margin:0 0 20px}

/* columns */
.cols{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch}
.cols--2{grid-template-columns:1fr 1fr}
.col{background:var(--tint);border-radius:var(--r);padding:32px 28px}
.sec--tint .col{background:var(--card)}
.col--new{background:var(--inv-bg)!important;color:var(--inv-ink)}
.col h3{font-size:19px;margin-bottom:12px}
.col p{margin:0;color:var(--sub);font-size:15px}
.col ul{margin:0;padding-left:20px}
.col li{margin-bottom:4px}
.col__arrow{align-self:center;font-size:32px;font-weight:300;color:var(--sub)}

/* steps */
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.steps li{counter-increment:s;background:var(--card);border-radius:var(--r);padding:28px 24px}
.steps li::before{content:"0" counter(s);display:block;color:var(--sub);font-size:13px;font-weight:700;letter-spacing:.1em}
.steps b{display:block;font-size:18px;margin:6px 0 8px}
.steps span{font-size:14px;color:var(--sub);line-height:1.8;display:block}

/* price */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.plan{position:relative;background:var(--card);border-radius:var(--r);padding:40px 32px;border:1px solid var(--line)}
.plan--main{border:2px solid var(--ink)}
.plan__badge{position:absolute;top:-13px;left:28px;background:var(--ink);color:var(--bg);font-size:12px;font-weight:700;padding:3px 14px;border-radius:999px}
.plan h3{font-size:22px}
.plan__for{margin:4px 0 16px;color:var(--sub);font-size:14px}
.plan__price{margin:0 0 20px;font-weight:700}
.plan__price small{display:block;font-size:13px;color:var(--sub);font-weight:400}
.num{font-size:clamp(36px,6vw,52px);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.plan ul,.care ul{margin:0;padding-left:20px}
.care{margin-top:20px;background:var(--inv-bg);color:var(--inv-ink);border-radius:var(--r);padding:36px 32px}
.care h3{font-size:20px;margin-bottom:12px}
.care .num{font-size:36px}
.care .note{text-align:left;margin:16px 0 0;color:var(--inv-ink);opacity:.65}

/* faq */
details{background:var(--tint);border-radius:16px;margin:0 auto 12px;max-width:760px}
summary{cursor:pointer;padding:18px 24px;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-weight:300;font-size:22px;line-height:1.4;color:var(--sub)}
details[open] summary::after{content:"−"}
details p{margin:0;padding:0 24px 20px;color:var(--sub);font-size:15px}

/* cta */
.cta{text-align:center;background:var(--inv-bg);color:var(--inv-ink)}
.cta h2{color:var(--inv-ink)}
.cta .lead,.cta .note{color:var(--inv-ink);opacity:.7}
.cta .btn{background:var(--inv-ink);color:var(--inv-bg);border-color:var(--inv-ink)}

.footer{padding:32px 0;text-align:center;color:var(--sub);font-size:12px;background:var(--tint)}
.footer p{margin:4px 0}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s,transform .7s}
.reveal.is-in{opacity:1;transform:none}

:focus-visible{outline:3px solid var(--sub);outline-offset:3px}

@media (max-width:760px){
  body{font-size:16px}
  .nav a:not(.btn){display:none}
  .sp{display:inline}
  .cards,.plans,.steps,.cols,.cols--2{grid-template-columns:1fr}
  .col__arrow{transform:rotate(90deg);text-align:center}
  .sec{padding:64px 0}
  .hero{padding:64px 0 56px}
}