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

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

 /*----- フェードイン -----*/
    .inviewfadeIn {opacity: 0;transition: .8s; }
    
    .fadeIn {opacity: 1.0;}
	
	
	
    /*----- 上へスライド -----*/
    .inviewUp {
        transform: translate(0, 40px);
        transition: .8s;
    }
    
    .Up {
        transform: translate(0, 0);
        transition-delay:0.2s;
    }

	/*----- 左からスライドフェードイン -----*/
    .inviewLeft,.slideLR .wrap {
		opacity: 0;
        transform: translate(-1000px, 0);
        transition: .8s;
    }
    
    .LeftIn,.slideLR .LRIn01 {
		opacity: 1.0;
        transform: translate(0, 0);
    }
	/*----- 右からスライドフェードイン -----*/
    .inviewRight,.home #banners .wrap {
		opacity: 0;
        transform: translate(1000px, 0);
        transition: .8s;
    }
    
    .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: 50%;height:50%;z-index:-1;}
	
	
    .inviewDown {
		opacity: 0;
        transform: translate(0, -500px);
        transition: .8s;
    }
    
    .inviewDown.DownIn{
		opacity: 1.0;
        transform: translate(0, 0);
    }
	
	/*----- 下からスライドフェードイン -----*/
	
	
    .inviewsUp,.inviewsUp02 {
		opacity: 0;
        transform: translate(0, 50px);
        transition: .8s;
		transition-delay:0.5s;
		
    }
	.inviewsUp .img img,
	.inviewsUp .img .in-img{transform: scale(1.2);transition: 0.8s!important;}

    
    .UpIn {
		 
		opacity: 1.0;
        transform: translate(0, 0);
		
        
    }
	.UpIn .img img,
	.UpIn .img .in-img{transform: scale(1.0);}

	@keyframes ups01 {
		0% {  transform: translate(0, 50px); }
	  100% {  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);}
	
	
    /*----- ズームイン -----*/
    .inviewzoomIn {
        transform: scale(0, 0);
        transition: .8s;
    }
    
    .zoomIn {
        transform: scale(1, 1);
        animation-name: ZOOM;
        animation: ZOOM 0.5s ease 0s 1 forwards;
    } 

    @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);
    }