@charset "UTF-8";
/* CSS Document */
/*------------------------------------------------------------------------------*/
.fade{
	opacity: 0;
}
.fade.roll{
	opacity : 1;
	transition: all 1s 0.5s ease-in;
}
.fadeUp{
	opacity: 0;
	transform : translate(0, 100px);
}
.fadeUp.roll{
	opacity : 1;
	transition: all 1s 0.5s ease-in;
	transform : translate(0, 0);
}
.fadeUp.roll:nth-of-type(2) {
	opacity : 1;
	transition: all 1s 0.8s ease-in;
	transform : translate(0, 0);
}
.fadeUp.roll:nth-of-type(3) {
	opacity : 1;
	transition: all 1s 1s ease-in;
	transform : translate(0, 0);
}
.fadeUp.roll:nth-of-type(4) {
	opacity : 1;
	transition: all 1s 1.2s ease-in;
	transform : translate(0, 0);
}
/*---------------*/
.fadeLeft{
	opacity: 0;
	transform : translate(-100px,0);
}
.fadeLeft.roll{
	opacity : 1;
	transition: all 0.8s ease-in;
	transform : translate(0, 0);
}
/*-------------------*/
.fadeRight{
	opacity: 0;
	transform : translate(100px,0);
}
.fadeRight.roll{
	opacity : 1;
	transition: all 0.8s ease-in;
	transform : translate(0, 0);
}
/*------------------------------------------------------ ぼかし出現--------------*/
.blur{
	filter: blur(5px);
	transform: scale(1.02)
}
.blur.roll{
	filter: blur(0);
	transform: scale(1);
	transition: all 0.5s 0.5s ease-in;
}
/*------------------------------------------------------ 背景色が伸びて出現--------------*/
.bgextend .view-font::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 110%;
    height: 110%;
   background-color: #000000;
	/*初期値*/
    -webkit-transform: translateX(110vw) scaleX(1);/*Windowの外へ配置*/
    transform: translateX(110vw) scaleX(1);/*Windowの外へ配置*/
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
}
/*.showクラス付与後*/
.bgextend.roll .view-font::after {
    -webkit-animation: anime_show .6s forwards;	
    animation: anime_show .6s forwards;
}
.view1.show .view-font:nth-of-type(2):after{
    -webkit-animation-delay: .15s;
    animation-delay: .15s;
}

/* Standard Syntax */
@keyframes anime_show {
    0% {
        transform: translateX(110vw) scaleX(1);/*Windowの外へ配置*/
        transform-origin: 0 0;
    }
    50% {
        transform: translateX(0) scaleX(1);
		transform-origin: 0 0;
    }
    100% {
        transform: translateX(0) scaleX(0);
		transform-origin: 0 0;
    }
}
/* Chrome, Safari */
@-webkit-keyframes anime_show {
    0% {
        -webkit-transform: translateX(110vw) scaleX(0);/*Windowの外へ配置*/
		-webkit-transform-origin: 0 0;
    }
    50% {
        -webkit-transform: translateX(0) scaleX(1);
		-webkit-transform-origin: 0 0;
    }
    100% {
        -webkit-transform: translateX(0) scaleX(0);
		-webkit-transform-origin: 0 0;
    }
}
/*------------------------------------------------------テキスト　１文字ずつ現れる-------------*/
.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
  0% {opacity:0;}
  100% {opacity:1;}
}