@charset "utf-8";

/* =========================================================
   Fade（少し下からフェード）
========================================================= */
.fade {
	opacity: 0;
	transform: translateY(20px);
}

.fadestyle {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 0.8s ease,
		transform 0.8s ease;
	transition-delay: 0.2s;
}


/* =========================================================
   Up（下からフェード）
========================================================= */
.up {
	position: relative;
	opacity: 0;
	bottom: -20px;
}

.upstyle {
	opacity: 1;
	bottom: 0;
	transition:
		opacity 1s ease,
		bottom 1s ease;
	transition-delay: 0.5s;
}


/* =========================
   BLUR（ぼかし表示）
========================= */

/* 初期状態（画面外・表示前） */
.blur {
	opacity: 0;                 /* 透明 */
	filter: blur(30px);         /* 30pxぼかす */
	transform: scale(1.1);      /* 少し拡大しておく */
}

/* 表示状態（画面に入った後） */
.blurstyle {
	opacity: 1;                 /* 不透明にする */
	filter: blur(0);            /* ぼかし解除 */
	transform: scale(1);        /* 元のサイズに戻す */

	/* アニメーション時間設定 */
	transition:
		opacity 0.5s ease,      /* 透明→表示 に 0.7秒 */
		filter 0.5s ease,       /* ぼかし解除 に 0.7秒 */
		transform 0.5s ease;    /* 拡大→元サイズ に 0.7秒 */

	transition-delay: 0.1s;    /* ★画面に入ってから 0.5秒後に開始 */
}