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

/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on_logo {
  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_logo {
	opacity: 1.0;
	filter: alpha(opacity=100);
	-moz-opacity: 1.0;
	transform: translateX(0);
	/**/
	position: fixed;
	top: 0px;
	left: 0px;
	padding: 15px;
	height: 80px;
	background-color: hsla(0,0%,51%,0.40);
 z-index: 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_logo {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
	/**/
	position: relative;
	left: 0%;
}

.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_logo {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}
/*----------------------------
scroll_off ｜
----------------------------*/

.scroll_off.on_logo {
    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_logo {
	opacity: 1.0;
	filter: alpha(opacity=100);
	-moz-opacity: 1.0;
	transform: translateX(0);
	/**/
	position: relative;
	left: 47%;
}


.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_logo {
	opacity: 1.0;
	filter: alpha(opacity=100);
	-moz-opacity: 1.0;
	transform: translateX(0);
}

.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(30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_right3.on_logo {
	opacity: 1.0;
	filter: alpha(opacity=100);
	-moz-opacity: 1.0;
	transform: translateX(0);
}

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