@charset "utf-8";
/* CSS Document */
/*アニメーション*/
.fadein{
  visibility: hidden;
  opacity: 0;}
.active .fadein{
	animation-name: fadein;
	animation: fadeIn 1.5s ease forwards; }
@keyframes fadeIn {
    0% {
		opacity: 0;
    }
    100% {
		opacity: 1;
	    visibility: visible;
    }
}
.fadein_up {
  visibility: hidden;
  opacity: 0;}
a.fadein_up:hover{
  opacity: 0.7 !important;}
.active .fadein_up {
  animation: fadeInUp 1s ease forwards; }
@keyframes fadeInUp {
  from {
    transform: translateY(20px); }
  to {
    opacity: 1;
	visibility: visible;
    transform: translateY(0); } }
.fadein_right{
	visibility: hidden;
	opacity: 0;}
.active .fadein_right{
	animation: fadeInRight 1.5s ease-out 0s forwards;}
@keyframes fadeInRight {
  from {
    opacity: 0;
	visibility: visible;
    transform: translateX(-5%);
  }
  to {
    opacity: 1;
	visibility: visible;
    transform: translateX(0);
  }
}
.fadein_left{
	visibility: hidden;
	opacity: 0;}
.active .fadein_left{
	animation: fadeInLeft 1.5s ease-out 0s forwards;}
@keyframes fadeInLeft {
  from {
    opacity: 0;
	visibility: visible;
    transform: translateX(5%);
  }
  to {
    opacity: 1;
	visibility: visible;
    transform: translateX(0);
  }
}
.active .delay_0-5s {
  animation-delay: 0.5s; }
.active .delay_1s{
  animation-delay: 1s; }
.active .delay_1-5s {
  animation-delay: 1.5s; }
.active .delay_2s{
  animation-delay: 2s; }
.active .delay_2-5s{
  animation-delay: 2.5s; }
.active .delay_3s{
  animation-delay: 3s; }
.active .delay_3-5s{
  animation-delay: 3.5s; }