@charset "UTF-8";

/* スクロールでフェードイン */

.scroll_anima {
	opacity: 0;
	visibility: hidden;
	transition: all 1s;
	transform: translateY(120px);
}

.is-active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}


/* スクロールでぼかし */

.scroll_blur {
	opacity: 0;
	visibility: hidden;
	transition: all 1s;
    -ms-filter: blur(30px);
    filter: blur(30px);
    transform: scale(1.3);
}

.is-blur {
	opacity: 1;
	visibility: visible;
	-ms-filter: blur(0px);
    filter: blur(0px);
    transform: scale(1);
}



/* ページ遷移アニメ */

.leftCurtainbg {
	display: block;
	content: "";
	position:fixed;
	z-index: 999;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	transform: scaleX(0);
	background: rgba(255, 255, 255, .3);
	animation-name:curtainAnime;
	animation-duration:1.3s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
}

@keyframes curtainAnime {
	0% {
	  transform-origin: center left;
	  transform: scale(2,2) translateX(-300%) skewX(-45deg);
	}
	40% {
	  transform-origin: center left;
	  transform: scale(2,2) translateX(-17%) skewX(-45deg);
	}
	40.001% {
	  transform-origin: center left;
	  transform: scale(2,2) translateX(-17%) skewX(-45deg);
	}
	100% {
	  transform-origin: center left;
	  transform: scale(2,2) translateX(500%) skewX(-45deg);
	}
  }

.fadeout {
  animation : fadeOut 1s;
  animation-fill-mode: both;
  }
  @keyframes fadeOut {
  0% {
	opacity: 1;
  }
  100% {
	opacity: 0;
  }
  }
  
  #container{
  opacity: 0;/*はじめは透過0に*/
  }
  
  /*bodyにpageOnクラスがついたら出現*/
  body.pageOn #container{
  animation-name:PageAnimeOn;
  animation-duration:1s;
  animation-delay: 0.8s;
  animation-fill-mode:forwards;
  opacity: 0;
  }
  
  @keyframes PageAnimeOn{
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
  }
  }