/************************************************

	animation

*************************************************/
/* fadeIn */
.fadeIn,
.fadeIn01,
.fadeIn02,
.fadeIn03{
	opacity: 0;
}
.fadeIn.active {
-webkit-animation: fadeIn 2s ease forwards;
  animation: fadeIn 2s ease forwards;
}
.fadeIn01.active {
-webkit-animation: fadeIn 1s ease 1s forwards;
  animation: fadeIn 1s ease 1s forwards;
}
.fadeIn02.active {
  -webkit-animation: fadeIn 1s ease 1.5s forwards;
  animation: fadeIn 1s ease 1.5s forwards;
}
.fadeIn03.active {
 -webkit-animation: fadeIn 1s ease 2s forwards;
  animation: fadeIn 1s ease 2s forwards;
}

@keyframes fadeIn {
	100% { opacity: 1; }
}

/* fadeUp */
.fadeUp,
.fadeUp01,
.fadeUp02,
.fadeUp03,
.fadeUp04,
.fadeUp05{
	opacity: 0;
}
.fadeUp{
	transform: translateY(50px);	
}
.fadeUp01,
.fadeUp02,
.fadeUp03,
.fadeUp04,
.fadeUp05{
	transform: translateY(30px);	
}
.fadeUp.active{
	animation: fadeUp 1s forwards;
	-webkit-animation: fadeUp 1s forwards;
}
.fadeUp01.active{
	animation: fadeUp2 .5s linear 0s forwards;
	-webkit-animation: fadeUp2 .5s linear 0s forwards;
}
.fadeUp02.active{
	animation: fadeUp2 .5s linear .4s forwards;
	-webkit-animation: fadeUp2 .5s linear .4s forwards;
}
.fadeUp03.active{
	animation: fadeUp2 .5s linear .8s forwards;
	-webkit-animation: fadeUp2 .5s linear .8s forwards;
}
.fadeUp04.active{
	animation: fadeUp2 .5s linear 1.2s forwards;
	-webkit-animation: fadeUp2 .5s linear 1.2s forwards;
}
.fadeUp05.active{
	animation: fadeUp2 .5s linear 1.5s forwards;
	-webkit-animation: fadeUp2 .5s linear 1.5s forwards;
}

@keyframes fadeUp {
	0% { opacity: 0; transform: translateY(50px); }
	100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp2{
	0% { opacity: 0; transform: translateY(30px); }
	100% { opacity: 1; transform: translateY(0); }
}

/* scrollFx */
.scrollFx{
	clip-path: inset(0 100% 0 0);
	transition-timing-function: linear;
	transition-property: clip-path;
	transition-duration: .75s;
	transition-delay: .25s;
	&.active {
	  clip-path: inset(0 0 0 0);
	}
}

@media screen and (max-width: 480px) {
.fadeUp05.active{
	animation: fadeUp2 .5s linear 0s forwards;
	-webkit-animation: fadeUp2 .5s linear 0s forwards;
}	
}


/* ふわふわ */
@keyframes fuwafuwa {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
  }
  
  .anime-fuwafuwa {
    animation: 5s fuwafuwa infinite;
  }
  

  /* 回転 */
  @keyframes rotation{
    0%{ transform:rotate(0);}
    100%{ transform:rotate(360deg); }
  }

  .anime-rotation {
    animation: 150s rotation infinite;
  }