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

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

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

	/*----- 左からスライドフェードイン -----*/
    .inviewLeft,.slideLR .wrap {
		opacity: 0;
        transform: translate(-1000px, 0);
        transition: 1.0s;
    }
    
    .LeftIn,.slideLR .LRIn01 {
		opacity: 1.0;
        transform: translate(0, 0);
    }
	/*----- 右からスライドフェードイン -----*/
    .inviewRight,.home #banners .wrap {
		opacity: 0;
        transform: translate(50px, 0);
        transition: 1.0s;
    }
    
    .RightIn {
		opacity: 1.0;
        transform: translate(0, 0);
    }
	.home #banners .LRIn02 {
		transition-delay:0.5s;
		opacity: 1.0;
        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;
    } 


	.anime01 {
		opacity: 0.3;
        transform: translate(-100%, 0);
        transition: 0.5s;
    }
    
    .anime01_in {
		opacity: 1;
        transform: translate(0, 0);
    }
	.anime02 {
		opacity: 0.3;
        transform: translate(-100%, 0);
        transition: 0.5s;
    }
    
    .anime02_in {
		opacity: 1;
		transition-delay :0.1s;
        transform: translate(0, 0);
    }



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


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