/* 
  https://www.nowte.net/ui/ui-css-slideshow/
 */
/* スライダー全体 */
.slider{
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    background-color: #000;
  }
  
  /* スライダー画像 */
  .slider .image{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }
  
  /*
    ①スライド画像
    表示する画像を定義
  */
  .slider .image:nth-of-type(1){
    animation-delay: 5s;
    /* background-image: url(https://picsum.photos/id/237/960/540); */
    background-image: url(img/main/mv01.jpg);
  }
  .slider .image:nth-of-type(2){
    animation-delay: 5s;
    /* background-image: url(https://picsum.photos/id/238/960/540); */
    background-image: url(img/main/mv02.jpg);
  }
  .slider .image:nth-of-type(3){
    animation-delay: 5s;
    /* animation-delay: 10s; */
    /* background-image: url(https://picsum.photos/id/239/960/540); */
    background-image: url(img/main/mv03.jpg);
  }
  
  /*
    ②アニメーション設定
    animation-durationのみ変更
  */
  .slider .image{
    animation-name: anime;
    animation-delay: 0;
    animation-iteration-count: infinite;
    animation-duration: 15s;  /* ①で設定したanimation-delayを合計を挿入 */
  }
  
  /* アニメーション定義 */
  @keyframes anime {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: scale(1.18);
    }
  }