@charset "UTF-8";
/* CSS Document */
/*読み込み時 トップ*/
.main01_fade {-webkit-animation-fill-mode:both;-ms-animation-fill-mode:both;animation-fill-mode:both; -webkit-animation-duration:4.8s; -ms-animation-duration:4.8s; animation-duration:4.8s;
	-webkit-animation-delay:0.7s; /* アニメーション開始時間 */	-ms-animation-delay:0.7s;animation-delay:0.7s;		-webkit-animation-name:main01_fade;     animation-name:main01_fade;     visibility: visible !important;}
@keyframes main01_fade{     0% { opacity: 0;}    100% { opacity: 1; }}


.fu_2nd_01{animation-name:fu_2nd_01;animation-duration:1.8s;animation-fill-mode:forwards;opacity:0;animation-delay:1.2s;}
@keyframes fu_2nd_01{  from {    opacity: 0;  transform: translateY(30px);  }  to {    opacity: 1;  transform: translateY(0);  }}


.fu_2nd_05{animation-name:fu_2nd_05;animation-duration:1.6s;animation-delay:0.6s;animation-fill-mode:forwards;opacity:0;}
@keyframes fu_2nd_05{  from {    opacity: 0;  transform: translateY(30px);  }  to {    opacity: 1;  transform: translateY(0);  }}

/* 上から */
.fadeDown{animation-name:fadeDownAnime;animation-duration:1.8s;animation-delay:0.6s;animation-fill-mode:forwards;opacity:0;}
@keyframes fadeDownAnime{from {opacity: 0;transform: translateY(-100px);}to {opacity: 1;transform: translateY(0);}}

/* 下から */
.fadeUp{animation-name:fadeUpAnime;animation-duration:1.8s;animation-delay:0.6s;animation-fill-mode:forwards;opacity:0;}
@keyframes fadeUpAnime{from {opacity: 0;transform: translateY(100px);}to {opacity: 1;transform: translateY(0);}}

/* 左から */
.fadeLeft{animation-name:fadeLeftAnime;animation-duration:1s;animation-fill-mode:forwards;opacity:0;
animation-delay:2.2s;}
@keyframes fadeLeftAnime{from {opacity: 0;transform: translateX(-100px);}to {opacity: 1;transform: translateX(0);}}

/* 右から */
.fadeRight{animation-name:fadeRightAnime;animation-duration:1.8s;animation-fill-mode:forwards;opacity:0;
animation-delay:1.2s;}
@keyframes fadeRightAnime{from {opacity: 0;transform: translateX(100px);}to {opacity: 1;transform: translateX(0);}}

/* その場で */
.fadeIn{animation-name:fadeInAnime;animation-duration:1s;animation-fill-mode:forwards;opacity:0;
animation-delay:0.5s;}
@keyframes fadeInAnime{from {opacity: 0;}to {opacity: 1;}}

.fadeIn02{animation-name:fadeInAnime;animation-duration:1.5s;animation-fill-mode:forwards;opacity:0;
animation-delay:2.4s;}
@keyframes fadeInAnime{from {opacity: 0;}to {opacity: 1;}}

.fadeIn03{animation-name:fadeInAnime;animation-duration:1.2s;animation-fill-mode:forwards;opacity:0;
animation-delay:1.2s;}
@keyframes fadeInAnime{from {opacity: 0;}to {opacity: 1;}}

/* 拡大 */
.zoomIn{	animation-name:zoomInAnime;	animation-duration:1.5s;	animation-fill-mode:forwards;animation-delay:0.5s;	}
@keyframes zoomInAnime{  0% {opacity: 0; 	transform: scale(0.6);  }  70% {     opacity: 1;  transform: scale(1);  }85% {     opacity: 1;  transform: scale(1.2);  }100%{     opacity: 1;  transform: scale(1);  }}

.zoomIn02{	animation-name:zoomInAnime;	animation-duration:1.5s;	animation-fill-mode:forwards;animation-delay:4.0s;	}
@keyframes zoomInAnime{  0% {opacity: 0; 	transform: scale(0.6);  }  70% {     opacity: 1;  transform: scale(1);  }85% {     opacity: 1;  transform: scale(1.2);  }100%{     opacity: 1;  transform: scale(1);  }}

/****--------- ふりこ ---------****/
.pendulum{animation-name:pendulum;transform-origin:top;transform:top;animation:pendulum ease-in-out 2.5s infinite alternate;animation-delay:2.2s;}
@keyframes pendulum{0%{transform: rotate(10deg);}100%{transform: rotate(-10deg);}}

/****--------- ボール ---------****/
.ball{animation-name:ball;animation: ball 1.3s alternate infinite;animation-delay:3.2s;}
@keyframes ball{0%   { transform:translate(0%, 0%) rotateX(25deg); }100% { transform:translate(0%, -60px); }}


/****--------- 回転 ---------****/
.spin{animation: spin 0.5s linear 1;animation-delay:1.5s;}
@keyframes spin{0%   { transform: rotate(0deg); }100% { transform: rotate(360deg); }}

.spin02{animation: spin 0.5s linear 1;animation-delay:0.5s;}
@keyframes spin{0%   { transform: rotate(0deg); }100% { transform: rotate(360deg); }}

/****--------- エンジン ---------****/
.engine{animation-name:engine;animation:engine 5.0s infinite;animation-delay: 5s;}
@keyframes engine{
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  60%  { transform: scale(0.9, 0.9) translate(0%, 0%); }
 70% { transform: scale(1.0, 1.0) translate(0%, 0%); }
  80%  { transform: scale(0.9, 0.9) translate(0%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

.fadeInTrigger, .fadeUpTrigger, .fadeDownTrigger, .fadeLeftTrigger, .fadeRightTrigger {
  opacity: 0;
}



 




/********スクロール時***********************************************************************************************/


.fadeup01 {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 1.2s ease-out 0.6s, transform 0.6s ease-out 0.6s;
}

.fadeup01.active {
    opacity: 1;
    transform: translateX(0);
}

.fadeup02 {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 1.2s ease-out 1.2s, transform 0.6s ease-out 1.2s;
}

.fadeup02.active {
    opacity: 1;
    transform: translateX(0);
}

.fadeup03 {
    opacity: 0;
    transform: translateX(-30px); /* 左から */
    transition: opacity 1.2s ease-out 0.6s, transform 0.6s ease-out 0.6s;
}

.fadeup03.active {
    opacity: 1;
    transform: translateX(0);
}

.fadeup04 {
    opacity: 0;
    transform: translateX(-30px); /* 左から */
    transition: opacity 1.2s ease-out 1.2s, transform 0.6s ease-out 1.2s;
}

.fadeup04.active {
    opacity: 1;
    transform: translateX(0);
}

.fadeup04 {
    opacity: 0;
    transform: translateX(-30px); /* 左から */
    transition: opacity 1.2s ease-out 1.8s, transform 0.6s ease-out 1.8s;
}

.fadeup04.active {
    opacity: 1;
    transform: translateX(0);
}
.fadeup05 {
    opacity: 0;
    transform: translateX(-30px); /* 左から */
    transition: opacity 1.2s ease-out 1.6s, transform 0.6s ease-out 1.6s;
}

.fadeup05.active {
    opacity: 1;
    transform: translateX(0);
}
.fadeup06 {
    opacity: 0;
    transform: translateX(-30px); /* 左から */
    transition: opacity 1.2s ease-out 2.0s, transform 0.6s ease-out 2.0s;
}

.fadeup06.active {
    opacity: 1;
    transform: translateX(0);
}

.fadeup07 {
  opacity: 0;
  transition: opacity 1.2s ease-out 1.2s;
}

.fadeup08 {
  opacity: 0;
  transition: opacity 1.2s ease-out 1.8s;
}

.fadeup09 {
  opacity: 0;
  transition: opacity 1.2s ease-out 0.6s;
}

.fadeup10 {
  opacity: 0;
  transition: opacity 1.2s ease-out 1.2s;
}

.fadeup11 {
    opacity: 0;
    transform: translateX(30px); /* 左から */
    transition: opacity 1.2s ease-out 1.8s, transform 0.6s ease-out 1.8s;
}

.fadeup11.active {
    opacity: 1;
    transform: translateX(0);
}

.fadeup07.active, .fadeup08.active, .fadeup09.active, .fadeup10.active, .fadeup11.active { opacity: 1;}

.value_appear_movie,
.value_appear1,
.value_appear2,
.value_appear3 {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease-out;
}
.value_appear_movie.active,
.value_appear1.active,
.value_appear2.active,
.value_appear3.active {
  opacity: 1;
  transform: translateY(0);
}