@charset "utf-8";
/*-----------------------------------------------------

	animation .css
	アニメーション CSS

------------------------------------------------------*/


/*---- TOP ----*/

.mask_bg_hol {
  color: transparent;
  display: inline-block;
  overflow: hidden;
  position: relative;
  transition: color 0ms 450ms;
}
.mask_bg_hol::after {
  background: linear-gradient(to right, #005cbc 0%,#0077c7 50%,#0091da 100%);
  bottom: 0;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(0, 101%);
}

.mask_bg_hol.is_animated {
  color: #fff;
}
.mask_bg_hol.is_animated::after {
  animation: mask_bg_hol 1.2s cubic-bezier(0.8, 0, 0.170, 1);
}

@keyframes mask_bg_hol {
  0% {
    transform: translate(101%, 0)
  }
  40%, 60% {
    transform: translate(0, 0%)
  }
  100% {
    transform: translate(-101%, 0)
  }
}



@media screen and (min-width: 768px) {


.img_mask img {
	opacity: 0;
}

.img_mask.active img {
    max-width: 100%;
    animation-name: anime_left_to_right;
    animation-fill-mode: forwards;
    animation-duration: 1.7s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-direction: normal;
}

@keyframes anime_left_to_right {
    0% {
        clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
				opacity: 0;
				transform: scale(120%);
    }
    75% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
    100% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
				opacity: 1;
				transform: scale(100%);
    }
}



.slideIn_left, .slideIn_right, .slideIn_right_delay, .fadeInUp_nodelay, .fadeInUp, .fadeIn, .fadeInSlow, .fadeInImage, .fadeInDelay {
	opacity: 0;
}




.fadeIn.active {
	animation-name: fadeIn;
	animation-duration: 0.5s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

.fadeInDelay.active {
	animation-name: fadeIn;
	animation-duration: 0.5s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	animation-delay: 0.5s;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.fadeInUp_nodelay.active {
	animation-name: fadeInUp_nodelay;
	animation-duration: 0.5s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

@keyframes fadeInUp_nodelay {
	0% {
		transform: translate3d(0, 30px, 0);
		opacity: 0;
	}
	100% {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

.fadeInUp.active {
	animation-name: fadeInUp;
	animation-duration: 0.5s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	animation-delay: 0.7s;
}

@keyframes fadeInUp {
	0% {
		transform: translate3d(0, 30px, 0);
		opacity: 0;
	}
	100% {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}



.slideIn_left.active {
	animation-name: slideIn_left;
	animation-duration: 0.5s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

@keyframes slideIn_left {
	0% {
		transform: translate3d(-80px, 0, 0);
		opacity: 0;
	}
	100% {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

.slideIn_right.active {
	animation-name: slideIn_right;
	animation-duration: 0.5s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

@keyframes slideIn_right {
	0% {
		transform: translate3d(30px, 0, 0);
		opacity: 0;
	}
	100% {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

.slideIn_right_delay.active {
	animation-name: slideIn_right;
	animation-duration: 0.5s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
	animation-delay: 1s;
}

@keyframes slideIn_right {
	0% {
		transform: translate3d(30px, 0, 0);
		opacity: 0;
	}
	100% {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}


.fadeInImage.active {
	animation-name: fadeInImage;
	animation-duration: 0.5s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	animation-delay: 0.8s;
}

@keyframes fadeInImage {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


.flash.active {
	animation-name: flash;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes flash {
  0%,91%,96%,100%{
    opacity: 1;
  }

  92%{
    opacity: 0;
  }
  
  97%{
    opacity: 0;
  }
}


.fadeInSlow.active {
	animation-name: fadeInSlow;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

@keyframes fadeInSlow {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


}





/*-----------------------------------------------------

	SP layout

------------------------------------------------------*/


@media screen and (max-width: 767px) {	




.slideIn_left, .slideIn_right, .slideIn_right_delay, .fadeInUp_nodelay, .fadeInUp, .fadeIn, .fadeInSlow, .fadeInImage, .fadeInDelay, .img_mask {
	opacity: 0;
}


.slideIn_left.active, .slideIn_right.active, .slideIn_right_delay.active, .fadeInUp_nodelay.active, .fadeInUp.active, .fadeIn.active, .fadeInSlow.active, .fadeInImage.active, .fadeInDelay.active, .img_mask.active {
	animation-name: fadeInUp_nodelay_SP;
	animation-duration: 0.5s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

@keyframes fadeInUp_nodelay_SP {
	0% {
		transform: translate3d(0, 20px, 0);
		opacity: 0;
	}
	100% {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}







}