@charset "utf-8";

/* inview style
--------------------------------------------------- */
.top,
.btm,
.top2,
.btm2,
.left,
.right {
	opacity: 0;
}

.from_top,
.from_btm,
.from_top2,
.from_btm2,
.from_left,
.from_right {
	opacity: 1;
}

.top {
	transform: translate3d(0, -25px, 0);
}

.from_top {
	transform: translate3d(0, 0, 0);
	transition: .5s ease-in-out .25s;
}

.top2 {
	transform: translate3d(0, -25px, 0);
}

.from_top2 {
	transform: translate3d(0, 0, 0);
	transition: .75s ease-in-out .5s;
}

.btm {
	transform: translate3d(0, 25px, 0);
}

.from_btm {
	transform: translate3d(0, 0, 0);
	transition: 1.5s ease-out .5s;
}

.btm2 {
	transform: translate3d(0, 25px, 0);
}

.from_btm2 {
	transform: translate3d(0, 0, 0);
	transition: .5s ease-out .5s;
}

.left {
	transform: translate3d(-25px, 0, 0);
}

.from_left {
	transform: translate3d(0, 0, 0);
	transition: 1.25s cubic-bezier(.4, .8, .74, 1) .5s;
}

.right {
	transform: translate3d(25px, 0, 0);
}

.from_right {
	transform: translate3d(0, 0, 0);
	transition: 1.25s cubic-bezier(.4, .8, .74, 1) .5s;
}

.zoom {
	opacity: 0;
	transform: scale(.5);
}

.zoom_in {
	opacity: 1;
	transform: scale(1);
	transition: .5s ease-in-out .5s;
}


/*
transition-propertyの値
transition-durationの値
transition-timing-functionの値
transition-delayの値 の順

まとめると...
transition: background-color 1s linear 0 , width 1s linear 0 , height 1s linear 0;

初期値：
transition-property: all;
transition-duration: 0;
transition-timing-function: ease;
transition-delay: 0;

例：
transition-property: background-color, width, height; (CSSプロパティ名)
transition-duration: 1s; (変化に掛かる時間)
transition-timing-function: ease-in-out; (変化のタイミング)
transition-delay:3s; (変化がいつ始まるか)
*/