.fadeIn {
	opacity: 0;
	transition : all 600ms;
}

.fadeIn.scrollIn{
	opacity: 1;
	transform: translate(0, 0);
}

/* フェードの方向 */
/* 下から上 */
.fadeBottom {
	transform : translate(0, 50px);
}
/* 上から下 */
.fadeTop {
	transform : translate(0, -50px);
}
/* 左から右 */
.fadeLeft {
	transform : translate(-50px , 0);
}
/* 右から左 */
.fadeRight {
	transform : translate(50px , 0);
}


/* アニメーション */
.anime {
	transition : all 700ms;
	opacity: 0;
	transition-delay:0.5s;
	transition-timing-function:ease-out;
}
.anime.scrollIn{
	transform: translate(0, 0);
	opacity: 1;
}

/* 左から右（移動量大） */
.fadeLeft2 {
	transform : translate(-80px , 0);
}
/* 右から左（移動量大） */
.fadeRight2 {
	transform : translate(80px , 0);
}
/* 下から上 */
.fadeBottom2 {
	transform : translate(0, 80px);
}

/* 左から山なり */
.yamanariLeft {
	transform : translate(-100px , 50px) rotate(-25deg);
	transition-delay:1.5s;
}
/* 右から山なり */
.yamanariRight {
/*	transform : translate(100px , -50px) rotate(30deg);*/
	transition-delay:0.5s;
	transition-timing-function:ease-in;
}

/* ぼかした状態から表示（画像専用） */
.fadeBlur{
    position: relative;
    overflow: hidden;
}
.fadeBlur img{
    vertical-align: middle;
    filter: blur(10px);
    opacity: 0;
    transition: all .7s ease-in-out .2s;
}
.fadeBlur.scrollIn img{
    filter: blur(0px);
    opacity: 1;
}

/* 白グラデ */
.fadeWhite{
    position: relative;
    overflow: hidden;
}
.fadeWhite::after{
    content: "";
    display: block;
    width: 200%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
    transform: translateX(-50%);
    transition: all .3s ease-in-out .3s;
}
.fadeWhite img{
    vertical-align: middle;
}
.fadeWhite.scrollIn::after{
    animation: viewinMask 1s ease-in-out forwards;
}
@keyframes viewinMask{
    0%{
        transform: translateX(-50%);
    }
    100%{
        transform: translateX(50%);
    }
}