html,body{margin:0;background:#fff}

.svRv{
  --acc:#635bff; --ink:#0a2540; --body:#374151; --sub:#4b5563; --line:#e6e9ee;
  font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  background:#fff;padding:clamp(56px,7vw,104px) 24px;
}
.svRv__in{max-width:960px;margin:0 auto}
.svRv__eyebrow{margin:0 0 16px;font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--acc)}
.svRv__title{margin:0;font-size:clamp(24px,3.6vw,38px);line-height:1.45;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.svRv__grid{margin:clamp(32px,4vw,52px) 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svRv__grid article{
  background:#f6f9fc;border-radius:12px;padding:26px 22px;box-shadow:inset 0 0 0 1px var(--line);
}
.svRv__grid b{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--acc)}
.svRv__grid h3{margin:12px 0 0;font-size:16px;font-weight:800;color:var(--ink)}
.svRv__grid p{margin:10px 0 0;font-size:13px;line-height:1.85;color:var(--body)}
.svRv__note{margin:22px 0 0;font-size:11.5px;color:var(--sub)}

/* スクロール駆動アニメーション。完全に見えた時点で「出終わった」状態になるよう範囲を指定する */
@supports (animation-timeline: view()){
  .svRv__title,.svRv__grid article{
    animation:svRv-up linear both;
    animation-timeline:view();
    animation-range:entry 10% cover 38%;
  }
  .svRv__grid article:nth-child(2){animation-range:entry 14% cover 44%}
  .svRv__grid article:nth-child(3){animation-range:entry 18% cover 50%}
}
@keyframes svRv-up{ from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none} }
@media (max-width:820px){ .svRv__grid{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  .svRv__title,.svRv__grid article{animation:none;opacity:1;transform:none}
}