/* 表示領域全体 */
div.container.itmFade_2 {
  position : relative;
  max-width : 680px;
  max-height : 320px;
  /* margin : 1em auto 1em auto; */
}
/* 表示領域の「position: relative;」により，領域高さが0になるため，paddingで高さを確保する */
div.container.itmFade_2::before {
  content : "";
  display : block;
  padding-top : 57%;
}


/* アニメーションの設定 */
div.container.itmFade_2 div.item {
  position : absolute;
  top : 0;
  left : 0;
  max-width : 100%;
  max-height : 100%;
  opacity : 0;
  animation : itmFade2-chg-itm-anim 10s infinite;  /* アニメーション : 下記「@keyframes chg-itm-anim の 0% から 100% まで」を「10秒」で「無限」に繰り返す */
}
/* 1つ目のアイテム */
div.container.itmFade_2 div.item:nth-of-type( 1 ) {
  animation-delay : 0s;  /* アニメーション(下記「@keyframes chg-itm-anim」)の開始を0秒遅らせる */
}
/* 2つ目のアイテム */
div.container.itmFade_2 div.item:nth-of-type( 2 ) {
  /**
   * アニメーションの進行(下記「@keyframes chg-itm-anim」)の開始を5秒遅らせる
   * (上記アニメーション全体10秒の1/2，1枚目のアニメーションが50%に到達(フェードアウト開始)した時に2枚目のアニメーション(フェードイン)開始)
  **/
  animation-delay : 5s;
}

/* アニメーションの進行 */
@keyframes itmFade2-chg-itm-anim {
  0% {
    opacity : 0;
    z-index : 2;
  }
  17%{
    opacity : 1;
  }
  50%{
    opacity : 1;
  }
  /**
   * 画像が2枚のため1枚当たり50%
   * 1枚目->2枚目(50%・不透明から65%・透明)にフェードして切り替える
   * 表示されている画像が一番手前に来るように「z-index」で奥行きの並び順を変更
   */
  65%{
    opacity : 0;
    z-index : 1;
  }
  100% {
    opacity : 0;
  }
}