/* Animation 設定
------------------------------------------------------------*/
.fadeIn {
	animation-name: fadeInAnime;
	animation-duration: 3s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes fadeInAnime{
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}









.scroll-space{
	box-sizing: border-box;
	padding-top: 300px;
	height: 1600px;
	color: #fff;
	overflow: hidden;
  }
  .fadein {
	  opacity: 0;
	  transform: translate(0,0);
	  transition: all 1.5s;

	&.fadein-bottom{
		transform: translate(0,30px);
	}
	&.scrollin{
	  opacity: 1 !important;
	  transform: translate(0, 0) !important;
	}
  }



/* ==================================================
   Liquid Distortion Style (水中ゆらぎ)
================================================== */

header h1 picture img {
    width: 100%;
    height: auto;
    display: block;
    /* フィルターを適用 */
    filter: url(#liquid-filter);
    /* 停止時の微調整（JSの計算を補足してより滑らかにします） */
    transition: filter 1s ease-out;
}

/* 停止完了後にJSから付与されるクラス */
.is-stopped {
    filter: none !important;
}