/* カードの見た目を少し整える */
.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

/* ▼ ひっくり返すカード構造 */
.flip-card {
  perspective: 1000px;
  cursor: pointer;
  width: 100%;
}

.flip-inner {
  position: relative;
  width: 100%;
  height: 220px; /* ← 高さは調整OK（縦に伸びるのを防ぐ） */
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card.flipped .flip-inner {
  transform: rotateY(180deg);
}

.flip-front,
.flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flip-back {
  transform: rotateY(180deg);
}

.flip-front img,
.flip-back img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0rem;
}