@charset "utf-8";/*ページ用*/
/* ---------------------------------------------------------------------- */
.animTrigger {
/*
	opacity: 0;
*/
}
.animbox {
	animation-duration: 1s;
	animation-fill-mode:forwards;
/*
	opacity:0;
*/
}
.animtex {
	animation-duration: 1s;
	animation-fill-mode:forwards;
}
/*test*/
.test {
opacity:1;
}
.test.animated {
	opacity:1;
	animation-name: testanimated;
	animation-duration:2s;
}
@keyframes testanimated {
	0%{transform: rotateY(0) translateY(40px);opacity: 0;}
	100%{transform: rotateY(360deg) translateY(0);opacity: 1;}
}
/*headerlogo*/
/*
.headerlogo img.animated {
	animation-name: headerlogo;
animation-duration: 2s;
	opacity: 1;
}
@keyframes headerlogo {
	0%{transform: rotateY(0) translateY(40px);opacity: 0;}
	100%{transform: rotateY(360deg) translateY(0);opacity: 1;}
}
*/
/*top-logo*/
.top-logo img.animated {
	opacity: 0;
}
.top-logo img.animated {
	animation-name: toplogo;
	opacity: 1;
}
@keyframes toplogo{

	0%{transform: rotateY(0) translateY(40px);opacity: 0;}
	100%{transform: rotateY(360deg) translateY(0);opacity: 1;}
/*

  from {
  transform: translateY(100px);
  }
  to {
  transform: translateY(0);
  }

*/
}






.box-fadein.animated {
	animation-duration: 1.8s;
	animation-name: boxfadein;
	opacity: 1;
}
@keyframes boxfadein {
  from {
  opacity: 0;
  }
  to {
  opacity: 1;
  }
}


.text-left.animated {
	animation-name: textleft;
	opacity: 1;
}
@keyframes textleft{
  from {
  transform: translateX(100px);
  }
  to {
  transform: translateX(0);
  }
}
.text-right.animated {
	animation-name: textright;
	opacity: 1;
}
@keyframes textright{
  from {
  transform: translateX(-100px);
  }
  to {
  transform: translateX(0);
  }
}
.text-top.animated {
	animation-name: texttop;
	opacity: 1;
}
@keyframes texttop {
  from {
  transform: translateY(100px);
  }
  to {
  transform: translateY(0);
  }
}
.text-btm.animated {
	animation-name: textbtm;
	opacity: 1;
}
@keyframes textbtm {
  from {
  transform: translateY(-100px);
  }
  to {
  transform: translateY(0);
  }
}



/*
#header .animated {
animation-name:headeranimatedAnime;
}
@keyframes headeranimatedAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}
*/

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