@charset "UTF-8";
    }
    .slide {
        position: relative;
        overflow: hidden;
        width: 92%;
        height:400px;
        top: 23%;
        margin: auto;
    }

    /******* Left to Right ****************/
    .LR a {
        display: block;
        position: absolute;
        width: 100%;
        height: auto;
  left       : -100%;
  animation  : LR 30s ease infinite;
    }

    .LR a img{
        display:block;
        width:100%;
        height:inherit;
    }
 

.LR a:nth-of-type(1) { animation-delay: 0s }
.LR a:nth-of-type(2) { animation-delay: 6s }
.LR a:nth-of-type(3) { animation-delay: 12s }
.LR a:nth-of-type(4) { animation-delay: 18s }
.LR a:nth-of-type(5) { animation-delay: 24s } 

@keyframes LR{
   0% { left: -100% }
   2% { left: 0     }
  18% { left: 0     }
  20% { left: 100%  }
 100% { left: 100%  }
}

    /******************** 縦まわり　********************/
    .Tate a {
        display: block;
        position: absolute;
        width: 100%;
        height: auto;
        opacity: 0;
        animation: Tate 20s ease infinite;
    }
    .Tate a img{
        display:block;
        width:100%;
        height:inherit;

    }

    .Tate a:nth-of-type(1) {
        animation-delay: 0s
    }

    .Tate a:nth-of-type(2) {
        animation-delay: 10s
    }
/*
    .Tate a:nth-of-type(3) {
        animation-delay: 12s
    }

    .Tate a:nth-of-type(4) {
        animation-delay: 18s
    }

    .Tate a:nth-of-type(5) {
        animation-delay: 24s
    }
*/

    @keyframes Tate {
   0% { opacity: 0; transform: rotateX(90deg) }
   6% { opacity: 1; transform: rotateX(0deg)  }
  44% { opacity: 1; transform: rotateX(0deg)  }
  50% { opacity: 0; transform: rotateX(90deg) }
 100% { opacity: 0; transform: rotateX(90deg) }
    }

/**** 近くから遠く ****/
    .Zoom a {
        display: block;
        position: absolute;
        width: 100%;
        height: auto;
        opacity: 0;
        animation: Zoom 30s ease infinite;
    }
    
    .Zoom a img{
        display:block;
        width:100%;
        height:inherit;
    }
 

.Zoom a:nth-of-type(1) { animation-delay: 0s }
.Zoom a:nth-of-type(2) { animation-delay: 6s }
.Zoom a:nth-of-type(3) { animation-delay: 12s }
.Zoom a:nth-of-type(4) { animation-delay: 18s }
.Zoom a:nth-of-type(5) { animation-delay: 24s }
 

@keyframes Zoom{
   0% { opacity: 0; transform: scale(2, 2)  }
   2% { opacity: 1; transform: scale(1, 1)  }
  18% { opacity: 1; transform: scale(1, 1)  }
  20% { opacity: 0; transform: scale(.1, .1)}
 100% { opacity: 0; transform: scale(.1, .1)}
}
    
 /***** 回転 *****/
.Rot a {
  display    : block;
  position   : absolute;
  width      : 100%;
  height     : auto;
  opacity    : 0;
  animation  : Rot 30s ease infinite;
}

    
.Rot a img{
    display:block;
    width:100%;
    height:inherit;
    }    
 
.Rot a:nth-of-type(1) { animation-delay: 0s }
.Rot a:nth-of-type(2) { animation-delay: 6s }
.Rot a:nth-of-type(3) { animation-delay: 12s }
.Rot a:nth-of-type(4) { animation-delay: 18s }
.Rot a:nth-of-type(5) { animation-delay: 24s }
 
@keyframes Rot{
   0% { opacity: 0; transform: skewX(-90deg)}
   5% { opacity: 1; transform: skewX(0deg)   }
  15% { opacity: 1; transform: skewX(0deg)   }
  20% { opacity: 0; transform: skewX(90deg) }
 100% { opacity: 0; transform: skewX(90deg) }
}
    
 /***** フェード *****/
.Fade a {
  display    : block;
  position   : absolute;
  width      : 100%;
  height     : auto;
  opacity    : 0;
  animation  : Fade 30s ease infinite;
}

    
.Fade a img{
    display:block;
    width:100%;
    height:inherit;
    } 

.Fade a:nth-of-type(1) { animation-delay: 0s }
.Fade a:nth-of-type(2) { animation-delay: 6s }
.Fade a:nth-of-type(3) { animation-delay: 12s }
.Fade a:nth-of-type(4) { animation-delay: 18s }
.Fade a:nth-of-type(5) { animation-delay: 24s }

@keyframes Fade{
   0% { opacity: 0 }
   5% { opacity: 1 }
  20% { opacity: 1 }
  25% { opacity: 0 }
 100% { opacity: 0 }
}