@charset "UTF-8";

/* スライダーのスタイル設定　*/
.imgfade {
  position:relative;
  height:250px;
  padding:0 auto;
}
.imgfade > ul {
  margin:0;
  padding:0;
  list-style:none;
}
.imgfade > ul > img {
  width:100%;
  margin:0 auto 0;
  padding:0 auto;
}
.imgfade > ul > li {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  animation-iteration-count:infinite;
  animation-duration:20s;
}

/* アニメーション開始時間の設定 */
.imgfade > ul > li:nth-child(1) {
  animation-name:imgfade;
  animation-delay:-2s;
}
.imgfade > ul > li:nth-child(2) {
  animation-name:imgfade;
  animation-delay:8s;
  opacity:0;
}

/* フェードイン・フェードアウトの設定 */
@keyframes imgfade{
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  } 
}


/* PC用 */
@media screen and (min-width: 768px) , print {
  
}

/* 小さい画面用 */
@media screen and (max-width: 767px) {
  .imgfade {
    height: 300px;
  }
}