/* slide 2 */
#slideshow_container {
}
#slideshow_container p {
  text-align:right;
  color:white;
  font-size:1.2rem;
  padding:0px;
  margin:0px 5px 2px 0px;
  font-family: "Monotype Corsiva", "Apple Chancery", "Lucida Calligraphy", "Palatino Linotype", "Dancing Script", cursive;
}
#slideshow {
  margin:2px auto;
  position: relative;
  width: 80%;
  aspect-ratio: 16 / 9;
/*  height: 400px;  */
  overflow: hidden; /* 画像がはみ出さないように */
}
#slideshow img {
  position: absolute;
  top: 0;
  left: 0;  
  width: 100%;       /* 横幅を枠いっぱいにする */
  height: 100%;      /* 高さを枠いっぱいにする */
  object-fit: cover; /* 枠に合わせてトリミング（隙間なく埋める） */
  object-position: center center; /* 画像の中心を基準にする */
  opacity: 0;
  transition: opacity 2s ease-in-out, transform 12s linear;
  will-change: opacity, transform;
}
/* 表示状態（JSでこのクラスをつける） */
#slideshow img.active {
  opacity: 1;
}
/*-------------- mobile responsive -----iphone6s --------------------*/
@media screen and  (max-width: 480px) { 
#slideshow {
  margin:2px auto;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

}

/* === アニメーションのバリエーション === */
/* パターンA: ズームイン */
.effect-zoom-in {
  transform: scale(1.0);
}
.effect-zoom-in.active {
  transform: scale(1.15); /* 1.15倍までゆっくり拡大 */
}

/* パターンB: ズームアウト */
.effect-zoom-out {
  transform: scale(1.15);
}
.effect-zoom-out.active {
  transform: scale(1.0);
}

/* パターンC: 左へ少しスライド */
.effect-slide-left {
  transform: translateX(50px);
}
.effect-slide-left.active {
  transform: translateX(0);
}

/* パターンD: ただのフェード（動きなし） */
.effect-fade {
  transform: scale(1.0);
}