.banner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 60px;
  margin: 3em auto 4em auto;
}

.banner-grid .col p{
  padding: 5px 0 0 20px;
  background: url(/jp/ja/img/common/arrow.png) no-repeat 0 13px;
        background-size: 15px auto;
}
.banner-grid .col a {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  position: relative;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.4s ease;
  box-shadow: none; /* 初期状態で影なし */
}

/* 画像設定 */
.banner-grid .col a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

/* ポヨンと弾むアニメーション */
.banner-grid .col a:hover img {
  animation: pop-bounce 0.6s ease-out forwards;
}

@keyframes pop-bounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.3); } /* 少し強めに拡大 */
  65% { transform: scale(0.95); } /* 弾んで縮む */
  85% { transform: scale(1.08); } /* もう一度軽く弾む */
  100% { transform: scale(1.00); } /* 最終的に軽く拡大 */
}


/* スマホでは1列表示 */
@media (max-width: 768px) {
  .banner-grid {
    grid-template-columns: 1fr;
  }
}