/**********出現**********/
/*フェードイン*/
.fade-in {
    animation-name: fade-in;
    animation-delay: ;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
    animation-timing-function: ease;
}

@-webkit-keyframes fade-in {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

.fade-in-2s {
    animation-name: fade-in-2s;
    animation-delay: ;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
    animation-timing-function: ease;
}

@-webkit-keyframes fade-in-2s {
	0% {
		opacity:0;
	}
	30% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

.fade-in-3s {
    animation-name: fade-in-3s;
    animation-delay: ;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
    animation-timing-function: ease;
}

@-webkit-keyframes fade-in-3s {
	0% {
		opacity:0;
	}
	50% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

/*拡大*/
.expand {
    animation-name: expand;
    animation-delay: ;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
    animation-timing-function: ease;
}

@-webkit-keyframes expand {
	0% {
        -ms-transform:scale(0.5,0.5);
        -webkit-transform:scale(0.5,0.5);
        transform:scale(0.5,0.5);
		opacity:0;
	}
	100% {
        -ms-transform:scale(1,1);
        -webkit-transform:scale(1,1);
        transform:scale(1,1);
		opacity:1;
	}
}

.expand-2s {
    animation-name: expand-2s;
    animation-delay: ;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
    animation-timing-function: ease;
}

@-webkit-keyframes expand-2s {
	0% {
        -ms-transform:scale(0,0);
        -webkit-transform:scale(0,0);
        transform:scale(0,0);
		opacity:0;
	}
	30% {
        -ms-transform:scale(0.5,0.5);
        -webkit-transform:scale(0.5,0.5);
        transform:scale(0.5,0.5);
		opacity:0;
	}
	100% {
        -ms-transform:scale(1,1);
        -webkit-transform:scale(1,1);
        transform:scale(1,1);
		opacity:1;
	}
}

.expand-3s {
    animation-name: expand-3s;
    animation-delay: ;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
    animation-timing-function: ease;
}

@-webkit-keyframes expand-3s {
	0% {
        -ms-transform:scale(0,0);
        -webkit-transform:scale(0,0);
        transform:scale(0,0);
		opacity:0;
	}
	50% {
        -ms-transform:scale(0.3,0.3);
        -webkit-transform:scale(0.3,0.3);
        transform:scale(0.3,0.3);
		opacity:0;
	}
	100% {
        -ms-transform:scale(1,1);
        -webkit-transform:scale(1,1);
        transform:scale(1,1);
		opacity:1;
	}
}

/*上から移動*/
.move-from-above {
    animation-name: move-from-above;
    animation-delay: ;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
    animation-timing-function: ease;
    
}

@keyframes move-from-above {
    0% {
        -ms-transform:translateY(-60px);
        -webkit-transform:translateY(-60px);
        transform:translateY(-60px);
        opacity:0;
    }
    100% {
        -ms-transform:translateY(0px);
        -webkit-transform:translateY(0px);
        transform:translateY(0px);
        opacity:1;
    }
}

.move-from-above-2s {
    animation-name: move-from-above-2s;
    animation-delay: ;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
    animation-timing-function: ease;
    
}

@keyframes move-from-above-2s {
    0% {
        -ms-transform:translateY(-60px);
        -webkit-transform:translateY(-60px);
        transform:translateY(-60px);
        opacity:0;
    }
	30% {
        -ms-transform:translateY(-30px);
        -webkit-transform:translateY(-30px);
        transform:translateY(-60px);
        opacity:0;
    }
    100% {
        -ms-transform:translateY(0px);
        -webkit-transform:translateY(0px);
        transform:translateY(0px);
        opacity:1;
    }
}

.move-from-above-3s {
    animation-name: move-from-above-3s;
    animation-delay: ;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
    animation-timing-function: ease;
    
}

@keyframes move-from-above-3s {
    0% {
        -ms-transform:translateY(-60px);
        -webkit-transform:translateY(-60px);
        transform:translateY(-60px);
        opacity:0;
    }
	50% {
        -ms-transform:translateY(-42px);
        -webkit-transform:translateY(-42px);
        transform:translateY(-42px);
        opacity:0;
    }
    100% {
        -ms-transform:translateY(0px);
        -webkit-transform:translateY(0px);
        transform:translateY(0px);
        opacity:1;
    }
}

/*下から移動*/
.move-from-bottom {
    animation-name: move-from-bottom;
    animation-delay: ;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
    animation-timing-function: ease;
    
}

@keyframes move-from-bottom {
    0% {
        -ms-transform:translateY(60px);
        -webkit-transform:translateY(60px);
        transform:translateY(60px);
        opacity:0;
    }
    100% {
        -ms-transform:translateY(0px);
        -webkit-transform:translateY(0px);
        transform:translateY(0px);
        opacity:1;
    }
}

.move-from-bottom-2s {
    animation-name: move-from-bottom-2s;
    animation-delay: ;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
    animation-timing-function: ease;
    
}

@keyframes move-from-bottom-2s {
    0% {
        -ms-transform:translateY(60px);
        -webkit-transform:translateY(60px);
        transform:translateY(60px);
        opacity:0;
    }
	50% {
        -ms-transform:translateY(30px);
        -webkit-transform:translateY(30px);
        transform:translateY(30px);
        opacity:0;
    }
    100% {
        -ms-transform:translateY(0px);
        -webkit-transform:translateY(0px);
        transform:translateY(0px);
        opacity:1;
    }
}

.move-from-bottom-3s {
    animation-name: move-from-bottom-3s;
    animation-delay: ;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
    animation-timing-function: ease;
    
}

@keyframes move-from-bottom-3s {
    0% {
        -ms-transform:translateY(60px);
        -webkit-transform:translateY(60px);
        transform:translateY(60px);
        opacity:0;
    }
	30% {
        -ms-transform:translateY(42px);
        -webkit-transform:translateY(42px);
        transform:translateY(42px);
        opacity:0;
    }
    100% {
        -ms-transform:translateY(0px);
        -webkit-transform:translateY(0px);
        transform:translateY(0px);
        opacity:1;
    }
}

/*左から移動*/
.move-from-left {
    animation-name: move-from-left;
    animation-delay: ;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
    animation-timing-function: ease;
    
}

@keyframes move-from-left {
    0% {
        -ms-transform:translateX(-30px);
        -webkit-transform:translateX(-30px);
        transform:translateX(-30px);
        opacity:0;
    }
    100% {
        -ms-transform:translateX(0px);
        -webkit-transform:translateX(0px);
        transform:translateX(0px);
        opacity:1;
    }
}

.move-from-left-2s {
    animation-name: move-from-left-2s;
    animation-delay: ;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
    animation-timing-function: ease;
    
}

@keyframes move-from-left-2s {
    0% {
        -ms-transform:translateX(-30px);
        -webkit-transform:translateX(-30px);
        transform:translateX(-30px);
        opacity:0;
    }
	30% {
        -ms-transform:translateX(-15px);
        -webkit-transform:translateX(-15px);
        transform:translateX(-15px);
        opacity:0;
    }
    100% {
        -ms-transform:translateX(0px);
        -webkit-transform:translateX(0px);
        transform:translateX(0px);
        opacity:1;
    }
}

.move-from-left-3s {
    animation-name: move-from-left-3s;
    animation-delay: ;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
    animation-timing-function: ease;
    
}

@keyframes move-from-left-3s {
    0% {
        -ms-transform:translateX(-30px);
        -webkit-transform:translateX(-30px);
        transform:translateX(-30px);
        opacity:0;
    }
	50% {
        -ms-transform:translateX(-21px);
        -webkit-transform:translateX(-21px);
        transform:translateX(-21px);
        opacity:0;
    }
    100% {
        -ms-transform:translateX(0px);
        -webkit-transform:translateX(0px);
        transform:translateX(0px);
        opacity:1;
    }
}

/*右から移動*/
.move-from-right {
    animation-name: move-from-right;
    animation-delay: ;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
    animation-timing-function: ease;
    
}

@keyframes move-from-right {
    0% {
        -ms-transform:translateX(30px);
        -webkit-transform:translateX(30px);
        transform:translateX(30px);
        opacity:0;
    }
    100% {
        -ms-transform:translateX(0px);
        -webkit-transform:translateX(0px);
        transform:translateX(0px);
        opacity:1;
    }
}

.move-from-right-2s {
    animation-name: move-from-right-2s;
    animation-delay: ;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
    animation-timing-function: ease;
    
}

@keyframes move-from-right-2s {
    0% {
        -ms-transform:translateX(30px);
        -webkit-transform:translateX(30px);
        transform:translateX(30px);
        opacity:0;
    }
	30% {
        -ms-transform:translateX(15px);
        -webkit-transform:translateX(15px);
        transform:translateX(15px);
        opacity:0;
    }
    100% {
        -ms-transform:translateX(0px);
        -webkit-transform:translateX(0px);
        transform:translateX(0px);
        opacity:1;
    }
}

.move-from-right-3s {
    animation-name: move-from-right-3s;
    animation-delay: ;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
    animation-timing-function: ease;
    
}

@keyframes move-from-right-3s {
    0% {
        -ms-transform:translateX(30px);
        -webkit-transform:translateX(30px);
        transform:translateX(30px);
        opacity:0;
    }
	50% {
        -ms-transform:translateX(21px);
        -webkit-transform:translateX(21px);
        transform:translateX(21px);
        opacity:0;
    }
    100% {
        -ms-transform:translateX(0px);
        -webkit-transform:translateX(0px);
        transform:translateX(0px);
        opacity:1;
    }
}

/*挿入ワイプ*/
.wipe-in {
    animation-name: wipe-in;
    animation-delay: ;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
    animation-timing-function: ease;
}

@-webkit-keyframes wipe-in {
	0% {
        -ms-transform:scale(3,3);
        -webkit-transform:scale(3,3);
        transform:scale(3,3);
		opacity:0;
	}
	100% {
        -ms-transform:scale(1,1);
        -webkit-transform:scale(1,1);
        transform:scale(1,1);
		opacity:1;
	}
}

.wipe-in-2s {
    animation-name: wipe-in-2s;
    animation-delay: ;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
    animation-timing-function: ease;
}

@-webkit-keyframes wipe-in-2s {
	0% {
        -ms-transform:scale(3,3);
        -webkit-transform:scale(3,3);
        transform:scale(3,3);
		opacity:0;
	}
	30% {
        -ms-transform:scale(1.5,1.5);
        -webkit-transform:scale(1.5,1.5);
        transform:scale(1.5,1.5);
		opacity:0;
	}
	100% {
        -ms-transform:scale(1,1);
        -webkit-transform:scale(1,1);
        transform:scale(1,1);
		opacity:1;
	}
}

.wipe-in-3s {
    animation-name: wipe-in-3s;
    animation-delay: ;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
    animation-timing-function: ease;
}

@-webkit-keyframes wipe-in-3s {
	0% {
        -ms-transform:scale(3,3);
        -webkit-transform:scale(3,3);
        transform:scale(3,3);
		opacity:0;
	}
	50% {
        -ms-transform:scale(2,2);
        -webkit-transform:scale(2,2);
        transform:scale(2,2);
		opacity:0;
	}
	100% {
        -ms-transform:scale(1,1);
        -webkit-transform:scale(1,1);
        transform:scale(1,1);
		opacity:1;
	}
}


/**********変形**********/
/*左へワイプ*/
.wipe-left {
    animation-name: wipe-left;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
    animation-timing-function: ease;
}

@keyframes wipe-left {
    0% {
        margin-left: 100%;
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

.wipe-left-2s {
    animation-name: wipe-left-2s;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
    animation-timing-function: ease;
}

@keyframes wipe-left-2s {
    0% {
        margin-left: 100%;
        opacity:0;
    }
	30% {
        margin-left: 100%;
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

.wipe-left-3s {
    animation-name: wipe-left-3s;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
    animation-timing-function: ease;
}

@keyframes wipe-left-3s {
    0% {
        margin-left: 100%;
        opacity:0;
    }
	50% {
        margin-left: 100%;
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

/*右へワイプ*/
.wipe-right {
    animation-name: wipe-right;
    animation-delay: ;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
    animation-timing-function: ease;
}

@keyframes wipe-right {
    0% {
        margin-right: 100%;
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

.wipe-right-2s {
    animation-name: wipe-right-2ss;
    animation-delay: ;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
    animation-timing-function: ease;
}

@keyframes wipe-right-2ss {
    0% {
        margin-right: 100%;
        opacity:0;
    }
	30% {
        margin-right: 100%;
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

.wipe-right-3s {
    animation-name: wipe-right-3s;
    animation-delay: ;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
    animation-timing-function: ease;
}

@keyframes wipe-right-3s {
    0% {
        margin-right: 100%;
        opacity:0;
    }
	50% {
        margin-right: 100%;
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

/*下へワイプ*/
.wipe-bottom {
    animation-name: wipe-bottom;
    animation-delay: ;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
    animation-timing-function: ease;
}

@keyframes wipe-bottom {
    0% {
        margin-bottom: 100%;
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

/*上へワイプ*/
.wipe-top {
    animation-name: wipe-top;
    animation-delay: ;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
    animation-timing-function: ease;
}

@keyframes wipe-top {
    0% {
        margin-top: 100%;
        opacity:0;
    }
    100% {
        opacity:1;
    }
}