/* scrollfade.css（ふわっとロード） */
.scroll-fade {
	opacity: 0;
}

.scroll-up {
	opacity: 0;
	/*スクロールアップする距離*/
	transform: translateY(100px);
	/*処理にかかる時間*/
	transition: all 1.5s;
}

.scroll-inLeft {
	opacity: 0;
	transform: translateX(-100px);
	transition: all 1.5s;
}

.scroll-inRight {
	opacity: 0;
	transform: translateX(100px);
	transition: all 1.5s;
}

.load-fade {
	opacity: 0;
	transition: all 1.5s;
}

.load-up {
	opacity: 0;
	/*スクロールアップする距離*/
	transform: translateY(100px);
	/*処理にかかる時間*/
	transition: all 1.5s;
}

.load-inLeft {
	opacity: 0;
	transform: translateX(-100px);
	transition: all 1.5s;
}

.load-inRight {
	opacity: 0;
	transform: translateX(100px);
	transition: all 1.5s;
}

.scroll-fade.done,
.scroll-up.done,
.scroll-inLeft.done,
.scroll-inRight.done,
.load-fade.done,
.load-up.done,
.load-inLeft.done,
.load-inRight.done {
	opacity: 1;
	transform: translate(0, 0);
}

.scroll-fade.fasted-1,
.scroll-up.fasted-1,
.scroll-inLeft.fasted-1,
.scroll-inRight.fasted-1,
.load-fade.fasted-1,
.load-up.fasted-1,
.load-inLeft.fasted-1,
.load-inRight.fasted-1 {
	transition: all 1.25s;
}

.scroll-fade.fasted-2,
.scroll-up.fasted-2,
.scroll-inLeft.fasted-2,
.scroll-inRight.fasted-2,
.load-fade.fasted-2,
.load-up.fasted-2,
.load-inLeft.fasted-2,
.load-inRight.fasted-2 {
	transition: all 1s;
}

.scroll-fade.fasted-3,
.scroll-up.fasted-3,
.scroll-inLeft.fasted-3,
.scroll-inRight.fasted-3,
.load-fade.fasted-3,
.load-up.fasted-3,
.load-inLeft.fasted-3,
.load-inRight.fasted-3 {
	transition: all 0.75s;
}

.scroll-fade.fasted-4,
.scroll-up.fasted-4,
.scroll-inLeft.fasted-4,
.scroll-inRight.fasted-4,
.load-fade.fasted-4,
.load-up.fasted-4,
.load-inLeft.fasted-4,
.load-inRight.fasted-4 {
	transition: all 0.5s;
}

.scroll-fade.slowed-1,
.scroll-up.slowed-1,
.scroll-inLeft.slowed-1,
.scroll-inRight.slowed-1,
.load-fade.slowed-1,
.load-up.slowed-1,
.load-inLeft.slowed-1,
.load-inRight.slowed-1 {
	transition: all 1.75s;
}

.scroll-fade.slowed-2,
.scroll-up.slowed-2,
.scroll-inLeft.slowed-2,
.scroll-inRight.slowed-2,
.load-fade.slowed-2,
.load-up.slowed-2,
.load-inLeft.slowed-2,
.load-inRight.slowed-2 {
	transition: all 2s;
}

.scroll-fade.slowed-3,
.scroll-up.slowed-3,
.scroll-inLeft.slowed-3,
.scroll-inRight.slowed-3,
.load-fade.slowed-3,
.load-up.slowed-3,
.load-inLeft.slowed-3,
.load-inRight.slowed-3 {
	transition: all 2.25s;
}

.scroll-fade.slowed-4,
.scroll-up.slowed-4,
.scroll-inLeft.slowed-4,
.scroll-inRight.slowed-4,
.load-fade.slowed-4,
.load-up.slowed-4,
.load-inLeft.slowed-4,
.load-inRight.slowed-4 {
	transition: all 2.5s;
}

.scroll-fade.delayed-1,
.scroll-up.delayed-1,
.scroll-inLeft.delayed-1,
.scroll-inRight.delayed-1,
.load-fade.delayed-1,
.load-up.delayed-1,
.load-inLeft.delayed-1,
.load-inRight.delayed-1 {
	transition-delay: 0.25s;
}

.scroll-fade.delayed-2,
.scroll-up.delayed-2,
.scroll-inLeft.delayed-2,
.scroll-inRight.delayed-2,
.load-fade.delayed-2,
.load-up.delayed-2,
.load-inLeft.delayed-2,
.load-inRight.delayed-2 {
	transition-delay: 0.5s;
}

.scroll-fade.delayed-3,
.scroll-up.delayed-3,
.scroll-inLeft.delayed-3,
.scroll-inRight.delayed-3,
.load-fade.delayed-3,
.load-up.delayed-3,
.load-inLeft.delayed-3,
.load-inRight.delayed-3 {
	transition-delay: 0.75s;
}

.scroll-fade.delayed-4,
.scroll-up.delayed-4,
.scroll-inLeft.delayed-4,
.scroll-inRight.delayed-4,
.load-fade.delayed-4,
.load-up.delayed-4,
.load-inLeft.delayed-4,
.load-inRight.delayed-4 {
	transition-delay: 1s;
}