/* フリップカードのコンテナ */
.flip-card {
  margin: 0 auto 30px;
  background-color: transparent;
  width: min(300px, 100%);
  aspect-ratio: 1;
}

/* 画像のスタイル（初期状態） */
.flip-card-front img {
  width: 100%;
  height: auto;
  filter: brightness(1) blur(0px); /* 初期状態の明るさとぼかし */
  transform: scale(1); /* 初期状態のサイズ */
}

/* アニメーションの定義 */
@keyframes hoverEffect {
  0% {
    filter: brightness(1) blur(0px);
    transform: scale(1);
  }
  50% {
    filter: brightness(1.25) blur(5px);
    transform: scale(1.05);
  }
  100% {
    filter: brightness(1) blur(0px);
    transform: scale(1);
  }
}

/* ホバー時に画像にエフェクトを適用 */
.flip-card:hover .flip-card-front img {
  animation: hoverEffect 1.0s ease-in-out forwards;
}

.flip-card-back {display:none;}