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

.anHv{
  --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:#f6f9fc;padding:clamp(52px,6.5vw,96px) 24px;
}
.anHv__in{max-width:960px;margin:0 auto}
.anHv__title{margin:0 0 clamp(26px,3.5vw,40px);font-size:clamp(21px,2.9vw,30px);font-weight:800;color:var(--ink);
  text-align:center;letter-spacing:-.01em}
.anHv__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;perspective:1200px}
.anHv__card{
  position:relative;height:230px;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,.7,.3,1);
}
.anHv__card:hover,.anHv__card:focus-within{transform:rotateY(180deg)}
.anHv__face,.anHv__back{
  position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;display:grid;place-content:center;
  justify-items:center;gap:14px;padding:28px;text-align:center;
}
.anHv__face{background:#fff;box-shadow:0 0 0 1px var(--line)}
.anHv__ico{font-size:34px;color:var(--acc)}
.anHv__face b{font-size:18px;font-weight:800;color:var(--ink)}
.anHv__back{
  background:var(--acc);color:#fff;transform:rotateY(180deg);
  box-shadow:0 14px 30px -14px rgba(99,91,255,.7);
}
.anHv__back p{margin:0;font-size:13.5px;line-height:1.9}
.anHv__back span{font-size:12.5px;font-weight:800}
@media (max-width:800px){ .anHv__grid{grid-template-columns:1fr;perspective:none} .anHv__card{height:auto}
  .anHv__face,.anHv__back{position:static;backface-visibility:visible;transform:none}
  .anHv__card:hover{transform:none}
  .anHv__back{margin-top:10px}
}
@media (prefers-reduced-motion:reduce){ .anHv__card{transition:none} }