@charset "utf-8";

/*CSSスライドショー設定
---------------------------------------------------------------------------*/
/*１枚目*/
@keyframes slide1 {
  0% {
    opacity: 1;
  }

  12.5% {
    opacity: 1;
  }

  25% {
    opacity: 1;
  }

  37.5% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  62.5% {
    opacity: 0;
  }

  75% {
    opacity: 0;
  }

  87.5% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/*2枚目*/
@keyframes slide2 {
  0% {
    opacity: 0;
  }

  12.5% {
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  37.5% {
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  62.5% {
    opacity: 1;
  }

  75% {
    opacity: 0;
  }

  87.5% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/*3枚目*/
@keyframes slide3 {
  0% {
    opacity: 0;
  }

  12.5% {
    opacity: 0;
  }

  25% {
    opacity: 0;
  }

  37.5% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  62.5% {
    opacity: 1;
  }

  75% {
    opacity: 1;
  }

  87.5% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/*4枚目*/
@keyframes slide4 {
  0% {
    opacity: 0;
  }

  12.5% {
    opacity: 0;
  }

  25% {
    opacity: 0;
  }

  37.5% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  62.5% {
    opacity: 0;
  }

  75% {
    opacity: 1;
  }

  87.5% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/*画像ブロック*/
#mainimg {
  position: fixed;
  /*スクロールしても固定表示させる指定*/
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

#mainimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*4枚画像の共通設定*/
.slide1,
.slide2,
.slide3,
.slide4 {
  position: absolute;
  width: 100%;
  height: 100%;
  animation-duration: 25s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-timing-function: linear;
}

/*１枚目*/
.slide1 {
  animation-name: slide1;
}

/*2枚目*/
.slide2 {
  animation-name: slide2;
}

/*3枚目*/
.slide3 {
  animation-name: slide3;
}

/*4枚目*/
.slide4 {
  animation-name: slide4;
}