/*** 親要素 ***/
.slide-show{
  position: relative; /*子要素の起点*/
  margin: 0 auto; /*中央配置*/
  width: 900px;  /*横幅は固定 */
  min-height: 500px; /* ★V2　基準高さだけ指定 */
  overflow: hidden; /*外側要素の非表示*/
}

/*** 画像定義 ***/
.slide-show > img {
  position: absolute;
  top: 0;
  left: 0; /* ★V3 常に同じ位置 */
  width: 100%; /* 横幅を親に合わせる */
  height: auto;  /* ★V2  高さは自動 */
  opacity: 0; /* 初期状態として 非表示は opacity: 0; を明示する */
  transform: scale(1);        /* ★V4　初期ズーム率を定義 */
  animation-timing-function: ease-in-out;/* ★V3フェード用オプション  */
  animation-fill-mode: both;  /*★V4オプション  delay中・境界対策 */
}

/*** ★V3 フェード表示・非表示は opacity:0,1  切替時間 @keyframes の % で制御 ***/
/*** ★V4ズーム  transform: scale ***/
/*** ★V5 JavaScriptに移行
画像枚数はHTMLのJS内で計算 const images = show.querySelectorAll("img.slide");
１枚の秒数  const slot = 6;
トータル時間  const total = images.length * slot;
CSSで トータル時間内でどういう時間変遷で振る舞うかを定義 11枚なら6*11=66sに対するパーセント   ***/



@keyframes fadezoom{
  /* 非表示 */
  0%{
    opacity: 0;
    transform: scale(1);
  }

  /* フェードイン開始 */
  2%{
    opacity: 1;
    transform: scale(1.01);
     }

  /* 表示保持（ゆっくりズーム） */
  8%{
    opacity: 1;
    transform: scale(1.04);
  }

  /* フェードアウト10枚の画像なので1／10→10パーセントまで */
  9%{
    opacity: 0;
   transform: scale(1.04);
    }

  /* ★最後まで完全に消す */
  100%{
    opacity: 0;
    transform: scale(1);
     }
}