/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 12 2024 | 06:09:13 */
/*==============================================================
jQuery 「inview.js」（表示領域に入ったら判定）
==============================================================*/
/*==============================================================
フェード
==============================================================*/
/*----------------------------------------------------
フェードイン（下から）
----------------------------------------------------*/
/* フェードイン(初期値) */
.fadeIn {
	opacity: 0; /* 最初は非表示 */
	transform: translateY(60px); /* Y軸60px下位置にセット */
	transition: opacity .8s, transform .8s; /* 透過率と縦方向の移動を0.8秒 */}
/* フェードイン(スクロール後) */
.fadeIn.show_on {
	opacity: 1; /* 表示領域に入ったら表示 */
	transform: translateY(0); /* 60px上に移動する */
	transition-delay: 0.1s; /* フェード開始を〇秒遅らせる */}
/*----------------------------------------------------
フェードイン（上から）
----------------------------------------------------*/
.fadeIn_t {opacity: 0; transform: translateY(-60px); transition: opacity .8s, transform .8s;}
/* フェードイン(スクロール後) */
.fadeIn_t.show_on {opacity: 1; transform: translateY(0); transition-delay: 0.1s;}
/*----------------------------------------------------
フェードイン（左から）
----------------------------------------------------*/
.fadeIn_l {opacity: 0; transform: translateX(-60px); transition: opacity .8s, transform .8s;}
/* フェードイン(スクロール後) */
.fadeIn_l.show_on {opacity: 1; transform: translateX(0); transition-delay: 0.1s;}
/*----------------------------------------------------
フェードイン（右から）
----------------------------------------------------*/
.fadeIn_r {opacity: 0; transform: translateX(60px); transition: opacity .8s, transform .8s;}
/* フェードイン(スクロール後) */
.fadeIn_r.show_on {opacity: 1; transform: translateX(0); transition-delay: 0.1s;}

/*==============================================================
ブラー
==============================================================*/
/*----------------------------------------------------
基本
----------------------------------------------------*/
.blur {
	opacity: 0;
	-moz-transition: -moz-transform 0.5s linear;
	-webkit-transition: -webkit-transform 0.5s linear;
	-o-transition: -o-transform 0.5s linear;
	-ms-transition: -ms-transform 0.5s linear;
	transition: transform 0.5s linear;
	-webkit-animation-duration: 1.5s;
	animation-duration: 1.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
/*----------------------------------------------------
表示領域に入ったらアニメーション開始
----------------------------------------------------*/
.blur.blur_on {
	-webkit-animation-name: imgBlur;
	animation-name: imgBlur;
	opacity: 1;
	transition: .8s;
}
/*----------------------------------------------------
アニメーションキー
----------------------------------------------------*/
@-webkit-keyframes imgBlur {
	from {
		opacity: 0;
		-webkit-filter: blur(15px);
		-moz-filter: blur(15px);
		-ms-filter: blur(15px);
		-o-filter: blur(15px);
		filter: blur(15px);
	}
	
	to {
		opacity: 1;
		-webkit-filter: blur(0px);
		-moz-filter: blur(0px);
		-ms-filter: blur(0px);
		-o-filter: blur(0px);
		filter: blur(0px);
	}
}

@keyframes imgBlur {
	from {
		opacity: 0;
		-webkit-filter: blur(15px);
		-moz-filter: blur(15px);
		-ms-filter: blur(15px);
		-o-filter: blur(15px);
		filter: blur(15px);
	}
	
	to {
		opacity: 1;
		-webkit-filter: blur(0px);
		-moz-filter: blur(0px);
		-ms-filter: blur(0px);
		-o-filter: blur(0px);
		filter: blur(0px);
	}
}