@charset "utf-8";
/*ローディング*/
@keyframes fadeUpAnime {
  0% {
    opacity: 0.3;
    transform: translateY(12px);
  }
  50% {
    opacity: 0.5;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.loader{
  position: fixed;
  inset: 0;
  background: linear-gradient(
    to right,
    #F3F7F5 0%,
    #FCFAF6 50%,
    #FDF9F3 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999999;
}

.loader-inner{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(0);

}

.loading_logo{
  width: 150px;
  backface-visibility: hidden;
}


.fadeUp{
  animation-name: fadeUpAnime;
  animation-duration: 1.8s; /* ゆったり */
  animation-timing-function: cubic-bezier(.4, 0, .2, 1); /* Material系 */
  animation-iteration-count: infinite;
  animation-direction: alternate;
  will-change: transform, opacity;
}


.loader-inner{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


@-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;
    }

.fadein3 {
    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);
    }

.fadein3.scrollin3 {
    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;
}
}

.fade-img{
  opacity: 0;
  animation: imgFadeIn 1s ease forwards;
}

@keyframes imgFadeIn{
  from{
    opacity: 0;
	  margin-top: 50px;
  }
  to{
    opacity: 1;
	  margin-top: 0;
  }
}