/* サムネイル画像切り替え用のスタイル - ページめくりエフェクト */
.cast-img {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 133.33%; /* 3:4のアスペクト比 */
  perspective: 1000px;
  transform-style: preserve-3d;
}

/* 基本的な画像スタイル - 両面共通 */
.cast-img .face1,
.cast-img .face2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: transform 0.6s ease-in-out;
}

/* 最初の画像は通常表示 */
.cast-img .face1 {
  transform: rotateY(0deg);
  z-index: 2;
}

/* 2枚目の画像は最初は裏側に隠れている */
.cast-img .face2 {
  transform: rotateY(180deg);
  z-index: 1;
}

/* アクティブ状態（ページめくり中） */
.cast-img.active .face1 {
  transform: rotateY(-180deg);
}

.cast-img.active .face2 {
  transform: rotateY(0deg);
}

/* ページめくり効果の影 */
.cast-img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 3;
}

.cast-img.active::before {
  opacity: 1;
}

/* モバイル対応 */
@media screen and (max-width: 767px) {
  .cast-img {
    padding-bottom: 133.33%; /* 3:4のアスペクト比を維持 */
    perspective: 500px; /* モバイルでは視点を近づける */
  }
}

/* 画像サイズ調整 */
.cast-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}