/*タイミング*/
/*-----------------*/
/*写真*/
.animated:after {
	/*始まるタイミング*/
	-moz-animation-delay:0s;
	-webkit-animation-delay:0s;
	-o-animation-delay:0s;
	-ms-animation-delay:0s;
	animation-delay:0s;
	/*変化時間*/
	-webkit-animation-duration: 1.0s;
	animation-duration: 1.0s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeInLeft1;
	animation-name: fadeInLeft1
}
/*グレー*/
.sub_topimg_fade:after{
	-webkit-animation-duration: 3.0s;
	animation-duration: 3.0s;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn
}
/*緑背景*/
.animated1 {
	opacity: 1;
	/*始まるタイミング*/
	-moz-animation-delay:1.0s;
	-webkit-animation-delay:1.0s;
	-o-animation-delay:1.0s;
	-ms-animation-delay:1.0s;
	animation-delay:1.0s;
	/*変化時間*/
	-webkit-animation-duration: 1.0s;
	animation-duration: 1.0s;

	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
/*文字*/
.animated2 {
	/*始まるタイミング*/
	-moz-animation-delay:2.0s;
	-webkit-animation-delay:2.0s;
	-o-animation-delay:2.0s;
	-ms-animation-delay:2.0s;
	animation-delay:2.0s;
	/*変化時間*/
	-webkit-animation-duration: 1.0s;
	animation-duration: 1.0s;

	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

/*アニメ動作*/
/*-----------------*/
/*緑背景*/
@-webkit-keyframes fadeInLeft2 {
  0% {
    opacity: 0;
	width:0;
  }
  100% {
    opacity: 1;
	width:470px;
  }
}
@keyframes fadeInLeft2 {
  0% {
    opacity: 0;
	width:0;
  }
  100% {
    opacity: 1;
	width:470px;
  }
}

@-webkit-keyframes fadeInLeft2Sp {
  0% {
	opacity: 0;
	width:0;
  }
  100% {
	opacity: 1;
	width:60%;
  }
}
@keyframes fadeInLeft2Sp {
  0% {
	opacity: 0;
	width:0;
  }
  100% {
	opacity: 1;
	width:60%;
  }
}

@media screen and (min-width: 1024px) {
	.fadeInLeft2 {
		-webkit-animation-name: fadeInLeft2;
		animation-name: fadeInLeft2;
	}
}

@media screen and (max-width: 1023px) {
	.fadeInLeft2 {
	-webkit-animation-name: fadeInLeft2Sp;
	animation-name: fadeInLeft2Sp;
	}
}


/*-----------------*/
/*文字大*/
@-webkit-keyframes fadeInUp1 {
  0% {
    opacity: 0;
	margin:90px 0 10px 0;
  }
  100% {
    opacity: 1;
	margin:80px 0 10px 0;
  }
}

@keyframes fadeInUp1 {
  0% {
    opacity: 0;
	margin:90px 0 10px 0;
  }
  100% {
    opacity: 1;
	margin:80px 0 10px 0;
  }
}

@-webkit-keyframes fadeInUp1Sp {
  0% {
	opacity: 0;
	margin:10px 0 10px 0;
  }
  100% {
	opacity: 1;
	margin:0 0 10px 0;
  }
}

@keyframes fadeInUp1Sp {
  0% {
	opacity: 0;
	margin:10px 0 10px 0;
  }
  100% {
	opacity: 1;
	margin:0 0 10px 0;
  }
}


@media screen and (min-width: 1024px) {
	.fadeInUp1 {
		-webkit-animation-name: fadeInUp1;
		animation-name: fadeInUp1;
	}
}

@media screen and (max-width: 1023px) {
	.fadeInUp1 {
	-webkit-animation-name: fadeInUp1Sp;
	animation-name: fadeInUp1Sp;
	}
}

/*-----------------*/
/*文字英語*/
@-webkit-keyframes fadeInUp2 {
  0% {
    opacity: 0;
	margin:20px 0 0 0;
  }
  100% {
    opacity: 1;
	margin:10px 0 0 0;
  }
}
@keyframes fadeInUp2 {
  0% {
    opacity: 0;
	margin:20px 0 0 0;
  }
  100% {
    opacity: 1;
	margin:10px 0 0 0;
  }
}

@-webkit-keyframes fadeInUp2Sp {
  0% {
	opacity: 0;
	margin:10px 0 0 0;
  }
  100% {
	opacity: 1;
	margin:0;
  }
}
@keyframes fadeInUp2Sp {
  0% {
	opacity: 0;
	margin:10px 0 0 0;
  }
  100% {
	opacity: 1;
	margin:0;
  }
}

@media screen and (min-width: 1024px) {
	.fadeInUp2 {
		-webkit-animation-name: fadeInUp2;
		animation-name: fadeInUp2;
	}
}

@media screen and (max-width: 1023px) {
	.fadeInUp2 {
	  -webkit-animation-name: fadeInUp2Sp;
	  animation-name: fadeInUp2Sp;
	}
}

/*-----------------*/
/*写真*/
@-webkit-keyframes fadeInLeft1 {
  0% {
	width:1305px;
  }
  100% {
	width:0;
  }
}
@keyframes fadeInLeft1 {
  0% {
	width:1305px;
  }
  100% {
	width:0;
  }
}

@-webkit-keyframes fadeInLeft1Sp {
  0% {
	width:100%;
  }
  100% {
	width:0;
  }
}
@keyframes fadeInLeft1Sp {
  0% {
	width:100%;
  }
  100% {
	width:0;
  }
}

/*-----------------*/
/*グレー*/
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}