@charset "utf-8";
/* CSS Document */

/* 基本アニメーション設定 */
/*-------------------------------------------*/

 /*----- フェードイン -----*/
    .inviewfadeIn {opacity: 0;transition: .7s; }
    
    .fadeIn {opacity: 1.0;}

	/*----- 左からスライドフェードイン -----*/
    .inviewLeft {
		opacity: 0;
        transform: translate(-40px, 0);
    }
    
    .LeftIn {
		animation: LeftIn 0.5s ease 0s 1 forwards;
    }
	@keyframes LeftIn {
	100% {opacity: 1;transform: translate(0, 0);}
	}
	/*----- 右からスライドフェードイン -----*/
    .inviewRight {
		opacity: 0;
        transform: translate(40px, 0);
    }
    
    .RightIn {
		animation: RightIn 0.5s ease 0s 1 forwards;
    }
	@keyframes RightIn {
	100% {opacity: 1;transform: translate(0, 0);}
	}
	/*----- 上からスライドフェードイン -----*/
	.trigger {position:absolute;top:50%;width: 100%;height:50%;z-index:-1;}
	
	
    .inviewDown {
		opacity: 0;
        transform: translate(0, -500px);
        transition: .8s;
    }
    
    .inviewDown.DownIn{
		opacity: 1.0;
        transform: translate(0, 0);
    }
	
	/*----- 下からスライドフェードイン -----*/

	.inviewsUp {
		opacity: 0;
        transform: translate(0, 30px);
        transition: 1s;
    }
    
    .UpIn {
		opacity: 1.0;
        transform: translate(0, 0);
    }

    .inviewsUp02 {
		opacity: 0;
        transform: matrix(1,0,0,.8,0,50);
		transition: all .5s cubic-bezier(.175,.885,.32,1.275);
		transition-delay :0.3s;
    }

    .UpIn02 {
		opacity: 1.0;
		transform: matrix(1,0,0,1,0,0);
    }


    /*----- ズームイン -----*/
    .inviewzoomIn {
        transform: scale(0, 0);
    }
   
    .zoomIn {
        animation: ZOOM 0.5s ease 0s 1 forwards;
    } 
    .inviewzoomIn02 {
        transform: scale(0, 0);
    }
   
    .zoomIn02 {
        animation: ZOOM 0.5s ease 0.3s 1 forwards;
    } 
    .inviewzoomIn03 {
        transform: scale(0, 0);
    }
   
    .zoomIn03 {
        animation: ZOOM 0.5s ease 0.6s 1 forwards;
    } 
    .inviewzoomIn04 {
        transform: scale(0, 0);
    }
   
    .zoomIn04 {
        animation: ZOOM 0.5s ease 0.9s 1 forwards;
    } 

    @keyframes ZOOM {
	80% {opacity: 1;transform: scale(1.05, 1.05);}
	100% {opacity: 1;transform: scale(1, 1);}
	}

	/*----- ズームアウト -----*/
    .inviewzoomOut {
		opacity: 0;
        transform: scale(1.05, 1.05);
    }
   
    .zoomOut {
        animation: ZOOM02 0.5s ease 0s 1 forwards;
    }

	@keyframes ZOOM02 {
	100% {opacity: 1;transform: scale(1, 1);}
	}

	/*----- ねじれてフェードイン -----*/
	.spiral .wrap{
		opacity: 0;
		transform: rotateY(90deg);
		transform-origin: 50% 0;
		transition: .8s;}
		
	.spiral .spiralIn{
		opacity: 1.0;
		transform: rotateY(0);}
	
	



    
    /*----- フェードインしながら上へスライド -----*/
    .inviewfadeInUp {
        opacity: 0;
        transform: translate(0, 60px);
        transition: .8s;
    }
    
    .fadeInUp {
        opacity: 1.0;
        transform: translate(0, 0);
    }