@charset "utf-8";

@-webkit-keyframes fadeIn {
  0% {
	  opacity : 0;
	  -webkit-transform : translate(0,0) scale(.95);
	          transform : translate(0,0) scale(.95);
	-webkit-transform-origin: center center;
	        transform-origin: center center;
  }
  100% {
    -webkit-transform : translate(0, 0);
            transform : translate(0, 0);
	  opacity : 1;
  }
}

.fadein {
    opacity : 0;
    -webkit-transform : translate(0,0) scale(.95);
        -ms-transform : translate(0,0) scale(.95);
            transform : translate(0,0) scale(.95);
	-webkit-transform-origin: center center;
	    -ms-transform-origin: center center;
	        transform-origin: center center;
    -webkit-transition: 2s cubic-bezier(.19,1,.22,1);
    -o-transition: 2s cubic-bezier(.19,1,.22,1);
    transition: 2s cubic-bezier(.19,1,.22,1);
    }

.fadein.scrollin {
    opacity : 1;
    -webkit-transform : translate(0, 0) scale(1);
        -ms-transform : translate(0, 0) scale(1);
            transform : translate(0, 0) scale(1);
	-webkit-transform-origin: center center;
	    -ms-transform-origin: center center;
	        transform-origin: center center;
	-webkit-animation-name: fadeIn;
    animation-name: fadeIn;
	-webkit-animation-delay:0s;
	        animation-delay:0s;   /* アニメーションの開始時間指定 */
    -webkit-animation-duration: 1s;
            animation-duration: 1s;   /* アニメーション動作時間の指定 */
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;  /* アニメーションの動き指定（徐々に早く）*/
    -webkit-animation-iteration-count: 0;
            animation-iteration-count: 0;
	opacity : 1;
    }
@-webkit-keyframes fadeIn2 {
  0% {
	  opacity : 0;
	  -webkit-transform : translate(0,30px) scale(1);
	          transform : translate(0,30px) scale(1);
	-webkit-transform-origin: center center;
	        transform-origin: center center;
  }
  100% {
    -webkit-transform : translate(0, 0);
            transform : translate(0, 0);
	  opacity : 1;
  }
}

.fadein2 {
    opacity : 0;
    -webkit-transform : translate(0,30px) scale(1);
        -ms-transform : translate(0,30px) scale(1);
            transform : translate(0,30px) scale(1);
	-webkit-transform-origin: center center;
	    -ms-transform-origin: center center;
	        transform-origin: center center;
    -webkit-transition: 2s cubic-bezier(.19,1,.22,1);
    -o-transition: 2s cubic-bezier(.19,1,.22,1);
    transition: 2s cubic-bezier(.19,1,.22,1);
    }

.fadein2.scrollin2 {
    opacity : 1;
    -webkit-transform : translate(0, 0) scale(1);
        -ms-transform : translate(0, 0) scale(1);
            transform : translate(0, 0) scale(1);
	-webkit-transform-origin: center center;
	    -ms-transform-origin: center center;
	        transform-origin: center center;
	-webkit-animation-name: fadeIn2;
    animation-name: fadeIn2;
	-webkit-animation-delay:0s;
	        animation-delay:0s;   /* アニメーションの開始時間指定 */
    -webkit-animation-duration: 1s;
            animation-duration: 1s;   /* アニメーション動作時間の指定 */
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;  /* アニメーションの動き指定（徐々に早く）*/
    -webkit-animation-iteration-count: 0;
            animation-iteration-count: 0;
	opacity : 1;
    }




.fadeSlider {
  position: relative;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.fadeSlider::before{
	content: "";
	z-index: 4;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: .3;
}
.fadeSlider span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.fadeSlider span.fadeSlider_01 {
  background-image: url("../img/top01.jpg") ;
  animation: fadeSlideImg01 15s ease-out infinite;
  animation-delay: 3s;
}
.fadeSlider span.fadeSlider_02 {
  opacity: 0;
  background-image: url("../img/top02.jpg") ;
  animation: fadeSlideImg02 15s ease-out infinite;
  animation-delay: 3s;
}
.fadeSlider span.fadeSlider_03 {
  opacity: 0;
  background-image: url("../img/top03.jpg") ;
  animation: fadeSlideImg03 15s ease-out infinite;
  animation-delay: 3s;
}

@keyframes fadeSlideImg01 {
  0% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  66% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeSlideImg02 {
  0% {
    opacity: 0;
  }
  33% {
    opacity: 1;
  }
  66% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeSlideImg03 {
  0% {
    opacity: 0;
  }
  33% {
    opacity: 0;
  }
  66% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@media all and (max-width: 768px) {
.fadeSlider span.fadeSlider_01 {
  background-image: url("../img/top01.jpg") ;
  animation: fadeSlideImg01 15s ease-out infinite;
  animation-delay: 3s;
}
.fadeSlider span.fadeSlider_02 {
  opacity: 0;
  background-image: url("../img/top02.jpg");
  animation: fadeSlideImg02 15s ease-out infinite;
  animation-delay: 3s;
}
.fadeSlider span.fadeSlider_03 {
  opacity: 0;
  background-image: url("../img/top03-sp.jpg") ;
  animation: fadeSlideImg03 15s ease-out infinite;
  animation-delay: 3s;
}
}