/* hero-overlay.css (build:20260110_hero_overlay_01) */
/* 目的：HERO内の3サービス画像の上にサービス名を表示し、縦長画像でも見切れないようにする */
/* 既存CSSに影響を出さないため、.hero 内にだけスコープしています */

.hero .cards{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 860px){
  .hero .cards{
    grid-template-columns: 1fr;
  }
}

.hero .card .service-image{
  position: relative;
}

.hero .card .service-image img{
  width: 100%;
  display: block;
  border-radius: 12px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.hero .card .service-label{
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 10;
  padding: 6px 12px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
}