/*============================
アニメーション基本設定
============================*/
.effect {
opacity: 0;
transition: all 0.6s linear;
}

/* ============================
01 メインビジュアル
============================*/
.effect01 {
opacity: 0;
transition: opacity .3s linear;
transition-delay: 3s;
}

.effect02 {
opacity: 0;
transition: opacity 0.6s linear;
transition-delay: 4s;
}

.effect03 {
opacity: 0;
transition: opacity 0.6s linear;
transition-delay: 5s;
}

.effect.startEfx {
opacity: 1;
}


/* ============================
02 通常コンテンツ
============================*/
.effect_up {
transition: opacity 0.6s linear,  margin 0.6s linear;
transition-delay: 0.4s;
position: relative;
margin-top: 20px;
opacity: 0;
}

.effect.startEfx.effect_up {
opacity: 1;
margin-top: 0;
}

/* ============================
03 シャッターエフェクト
============================*/
.startEfx.effect_shutter .shutter {
animation: shutter01 1.4s cubic-bezier(.645, .045, .355, 1);
}

.startEfx.effect_shutter img {
animation: shutter02 1.4s cubic-bezier(.645, .045, .355, 1);
}

/* アニメーション設定 */
@keyframes shutter01 {
	0% {
		width: 100%;
		left: -101%;
		transform-origin: 100% 0;
	}
	30% {
		width: 100%; 
		left: 0;
		transform-origin: 100% 0;
	}
	60% {
		width: 100%; 
		left: 0;
		transform-origin: 100% 0;
	}
	100% {
		width: 0%; 
		left: 101%;
		transform-origin: 100% 0;
	}
}

@keyframes shutter02 {
	0% {
		opacity: 0;
	}
	30% {
		opacity: 0;
	}
	60% {
		opacity: 1;
	}
	99% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}