@charset "UTF-8";
/*画面内に入ったら表示する*/
/* 画面外にいる状態 */
.fade {
    opacity : 0.0;
    transition : all 500ms;
    /* [disabled]width: auto; */
}
    .fademain{
        animation: fadeMain 0.2s ease 0.3s 1 normal;
    }
    @keyframes fadeMain { /*animation-nameで設定した値を書く*/
        0% {opacity: 0} /*アニメーション開始時は不透明度0%*/
        100% {opacity: 1} /*アニメーション終了時は不透明度100%*/
    }
.fade.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}

/*画面内に入ったら表示する*/
/* 画面外にいる状態 */
.fadein {
    opacity : 0.0;
    transform : translate(0, 100px);
    transition : all 300ms;

    /* [disabled]height: auto; */
}
/* 画面内に入った状態 */
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}

/*画面内に入ったら表示する*/
/* 画面外にいる状態 */
.fadein-right {
    opacity : 0.0;
    transform : translate(100px, 0);
    transition : all 300ms;
    display: block;
}
/* 画面内に入った状態 */
.fadein-right.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}

/*画面内に入ったら表示する*/
/* 画面外にいる状態 */
.fadein-left {
	opacity : 0.0;
	transform : translate(-100px, 0);
	transition : all 500ms;
	display: block;
}
/* 画面内に入った状態 */
.fadein-left.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}


 @keyframes alpha {
from {
 opacity:0;
}
to {
 opacity:1;
}
}
 @keyframes alpha-re {
from {
 opacity:1;
}
to {
 opacity:0;
}
}
@keyframes leftgo {
from {
opacity:0;
transform: translateX(-980px);
}
to {
opacity:1;
transform: translateX(0px);
}
}
@keyframes rightgo {
from {
opacity:0;
transform: translateX(50px);
}
to {
opacity:1;
transform: translateX(0px);
}
}
#effect2 .fadein:nth-of-type(2) {
	-moz-transition-delay: 100ms;
	-webkit-transition-delay: 100ms;
	-o-transition-delay: 100ms;
	-ms-transition-delay: 100ms;
}
#effect2 .fadein:nth-of-type(3) {
	-moz-transition-delay: 150ms;
	-webkit-transition-delay: 150ms;
	-o-transition-delay: 150ms;
	-ms-transition-delay: 150ms;
}
#effect2 .fadein:nth-of-type(4) {
    -moz-transition-delay: 200ms;
    -webkit-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    -ms-transition-delay: 200ms;
}
#effect2 .fadein:nth-of-type(5) {
    -moz-transition-delay: 250ms;
    -webkit-transition-delay: 250ms;
    -o-transition-delay: 250ms;
    -ms-transition-delay: 250ms;
}

#effect3 .fadein-right:nth-of-type(2) {
    -moz-transition-delay: 100ms;
    -webkit-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    -ms-transition-delay: 100ms;
    padding-bottom: 0px;
}
#effect3 .fadein-right:nth-of-type(3) {
    -moz-transition-delay: 150ms;
    -webkit-transition-delay: 150ms;
    -o-transition-delay: 150ms;
    -ms-transition-delay: 150ms;
}

#effect4 .fadein-left:nth-of-type(2) {
	-moz-transition-delay: 300ms;
	-webkit-transition-delay: 300ms;
	-o-transition-delay: 300ms;
	-ms-transition-delay: 300ms;
}
#effect4 .fadein-left:nth-of-type(3) {
    -moz-transition-delay: 150ms;
    -webkit-transition-delay: 150ms;
    -o-transition-delay: 150ms;
    -ms-transition-delay: 150ms;
}