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

.hvRi{
  --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;
}
.hvRi__in{max-width:1080px;margin:0 auto}
.hvRi__title{margin:0 0 clamp(24px,3.5vw,38px);font-size:clamp(21px,2.9vw,30px);font-weight:800;color:var(--ink);letter-spacing:-.01em}
.hvRi__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hvRi__card{
  position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;text-decoration:none;display:flex;
  align-items:flex-end;
}
.hvRi__card::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(10,20,16,.78));
  transition:opacity .3s;
}
.hvRi__card--a{background:linear-gradient(150deg,#7fa8c4,#2f5872)}
.hvRi__card--b{background:linear-gradient(150deg,#88a887,#3c5b3d)}
.hvRi__card--c{background:linear-gradient(150deg,#c2b28f,#6f5f42)}
.hvRi__body{position:relative;z-index:1;padding:24px;color:#fff;width:100%;
  transform:translateY(34px);transition:transform .38s cubic-bezier(.16,.84,.24,1)}
.hvRi__area{margin:0;font-size:11px;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.72)}
.hvRi__body h3{margin:10px 0 0;font-size:19px;font-weight:800}
.hvRi__more{margin:14px 0 0;font-size:12.5px;font-weight:700;opacity:0;transition:opacity .3s .06s}
.hvRi__card:hover .hvRi__body{transform:none}
.hvRi__card:hover .hvRi__more{opacity:1}
@media (max-width:860px){ .hvRi__grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .hvRi__grid{grid-template-columns:1fr} }
@media (hover:none){
  .hvRi__body{transform:none}
  .hvRi__more{opacity:1}
}
@media (prefers-reduced-motion:reduce){ .hvRi__body,.hvRi__more{transition:none} }