@charset "UTF-8";
/* CSS Document */






/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on_img {
  transform: translateY(0);
  opacity: 1.0;
}
/*----------------------------
scroll_up3 ｜下から上へ真ん中に出現
----------------------------*/
.scroll_up3 {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up3.on_img {
  transform: translateY(0);
  opacity: 1.0;
	/**/
	position: relative;
	margin-right: auto;
	margin-left: auto;
}

/*----------------------------
scroll_up2 ｜その場で出現
----------------------------*/
.scroll_up2 {
  transition: 0.8s ease-in-out;
  transform: translateY(0px);
  opacity: 0;
}
.scroll_up2.on_img {
  transform: translateY(0);
  opacity: 1.0;
}


/*----------------------------
scroll_left ｜左から出現
----------------------------*/
.scroll_left {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_left.on_img {
	opacity: 1.0;
	filter: alpha(opacity=100);
	-moz-opacity: 1.0;
	transform: translateX(0);
	/**/
	position: relative;
	left: 10%;
}
.scroll_left2 {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_left2.on_img {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
	/**/
	position: relative;
	margin-right: auto;
	margin-left: 10%;
}

.scroll_left3 {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_left3.on_img {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}
/*----------------------------
scroll_off ｜
----------------------------*/

.scroll_off.on_img {
    opacity: 0.0;
    filter: alpha(opacity=0);
    -moz-opacity: 0.0;
    transform: translateX(0);
}

/*----------------------------
scroll_right ｜右から出現
----------------------------*/
.scroll_right {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_right.on_img {
	opacity: 1.0;
	filter: alpha(opacity=100);
	-moz-opacity: 1.0;
	transform: translateX(0);
	/**/
	position: relative;
	left: 60%;
}
@media (max-width: 899px){
	.scroll_right.on_img {
	left: 50%;
	}
}

.scroll_right2 {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_right2.on_img {
	opacity: 1.0;
	filter: alpha(opacity=100);
	-moz-opacity: 1.0;
	transform: translateX(0);
	/**/
	position: relative;
	margin-right:  10%;
	margin-left: auto;
}

.scroll_right3 {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(100px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_right3.on_img {
	opacity: 1.0;
	filter: alpha(opacity=100);
	-moz-opacity: 1.0;
	transform: translateX(0);
}

@media screen and (max-width: 620px) {
	.scroll_right3.on_img {
	position: relative;
	top: 0px;
}
}