@charset "utf-8";
/* CSS Document */


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

@media screen and (max-width: 499.9px) {
    ._fade-images {
      position : relative;
      max-width : 600px;
      max-height : 360px;
      margin : 1em auto 1em auto;
    }

    /* 表示領域の「position: relative;」により，領域高さが0になるため，paddingで高さを確保する */
    ._fade-images::before {
      padding-top : 50%;
    }
    
}
    
/* アニメーションの設定 */
._fade-images div.item {
  position : absolute;
  top : 0;
  left : 0;
  max-width : 100%;
  max-height : 100%;
  opacity : 0;
  animation : itemfade-change-anime 20s infinite;  /* アニメーション : 下記「@keyframes chg-itm-anim の 0% から 100% まで」を「10秒」で「無限」に繰り返す */
}
/* 1つ目のアイテム */
._fade-images div.item:nth-of-type( 1 ) {
  animation-delay : 0s;
}
/* 2つ目のアイテム */
._fade-images div.item:nth-of-type( 2 ) {
  animation-delay : 5s;
}
/* 2つ目のアイテム */
._fade-images div.item:nth-of-type( 3 ) {
  animation-delay : 10s;
}
/* 2つ目のアイテム */
._fade-images div.item:nth-of-type( 4 ) {
  animation-delay : 15s;
}
/**
* 画像が4枚のため1枚当たり25%
* 1枚目->2枚目に向けて 25%（不透明）から 37.5%（透明）まででフェードアウト
* 37.5%到達（自分の区間25% + 次区間の前半12.5%）で前の画像が見えなくなる
*/
@keyframes itemfade-change-anime {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
    z-index: 4;
  }
  25% {
    opacity: 1;
  }
  37.5% {
    opacity: 0;
    z-index: 1;
  }
  100% {
    opacity: 0;
  }
}