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

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

 /*----- フェードイン -----*/
    .inviewfadeIn {opacity: 0;transition: .8s; }
    
    .fadeIn {opacity: 1.0;}
	
	
	
    /*----- 上へスライド -----*/
    .inviewUp {
        transform: translate(0, 40px);
        -webkit-transform: translate(0, 40px);
        transition: .8s;
    }
    
    .Up {
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }
	/*----- 左からスライドフェードイン -----*/
    .inviewLeft{
		opacity: 0;
        transform: translate(-1000px, 0);
        -webkit-transform: translate(-1000px, 0);
        transition: .8s;
    }
    
    .LeftIn{
		opacity: 1.0;
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }
	/*----- 右からスライドフェードイン -----*/
    .inviewRight,section#topBox02:before,section#topBox02:after{
		opacity: 0;
        transform: translate(1000px, 0);
        -webkit-transform: translate(1000px, 0);
        transition: .8s;
    }
    
    .RightIn ,section#topBox02.RightIn:before,section#topBox02.RightIn:after{
		opacity: 1.0;
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }
	/*----- 上からスライドフェードイン -----*/
	.trigger {position:absolute;top:50%;width: 100%;height:50%;z-index:-1;}
	
	
    .inviewDown {
		opacity: 0;
        transform: translate(0, -500px);
        -webkit-transform: translate(0, -500px);
        transition: .8s;
    }
    
    .inviewDown.DownIn{
		opacity: 1.0;
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }
	
	/*----- 下からスライドフェードイン -----*/
	
	
    .inviewsUp,.inviewsUp02 {
		opacity: 0;
        transform: translate(0, 30px);
        -webkit-transform: translate(0, 30px);
        transition: .8s;
    }
    
    .UpIn {
		opacity: 1.0;
        transform: translate(0, 0);
        -webkit-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);
        -webkit-transform: scale(0, 0);
        transition: .8s;
    }
    
    .zoomIn {
        transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
    } 
    
    /*----- フェードインしながら上へスライド -----*/
    .inviewfadeInUp {
        opacity: 0;
        transform: translate(0, 60px);
        -webkit-transform: translate(0, 60px);
        transition: .8s;
    }
    
    .fadeInUp {
        opacity: 1.0;
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }


/*カスタムアニメーション*/
	
	/*セクション01*/
	
	   .goLeft {
		opacity: 0;
        transform: translate(-1000px, 0);
        -webkit-transform: translate(-1000px, 0);
        transition: .8s;
    }
    	.goLeft.goLeftIn {animation: goleft 0.8s ease 0.5s 1 forwards;}

	@keyframes goleft {
		100% {opacity: 1;transform: translate(0, 0);-webkit-transform: translate(0, 0);}
	}

	   .goLeft02 {
		opacity: 0;
        transform: translate(-150px, 0);
        -webkit-transform: translate(-150px, 0);
        transition: .8s;
    }
    	.goLeft02.goLeftIn {animation: goleft02 0.8s ease 0.5s 1 forwards;}

	@keyframes goleft02 {
		100% {opacity: 1;transform: translate(0, 0);-webkit-transform: translate(0, 0);}
	}

    .animaPOKO > li {
		opacity: 0;
        transform: translate(0, 30px);
        -webkit-transform: translate(0, 30px);
        transition: .8s;
    }


	.animaPOKO.POKO > li:nth-child(1) {animation: POKO 0.5s ease 0s 1 forwards;}
	.animaPOKO.POKO > li:nth-child(2) {animation: POKO 0.5s ease 0.1s 1 forwards;}
	.animaPOKO.POKO > li:nth-child(3) {animation: POKO 0.5s ease 0.2s 1 forwards;}
	.animaPOKO.POKO > li:nth-child(4) {animation: POKO 0.5s ease 0.3s 1 forwards;}
	.animaPOKO.POKO > li:nth-child(5) {animation: POKO 0.5s ease 0.4s 1 forwards;}
	.animaPOKO.POKO > li:nth-child(6) {animation: POKO 0.5s ease 0.5s 1 forwards;}
	.animaPOKO.POKO > li:nth-child(7) {animation: POKO 0.5s ease 0.6s 1 forwards;}
	.animaPOKO.POKO > li:nth-child(8) {animation: POKO 0.5s ease 0.7s 1 forwards;}
	
	@keyframes POKO {
	100% {
	opacity: 1;transform: translate(0, 0);-webkit-transform: translate(0, 0);
	}
	}


@media screen and (min-width: 0px) and (max-width: 767px) {



	/*----- 左からスライドフェードイン -----*/
    .inviewLeft{
		opacity: 0;
        transform: translate(-50%, 0);
        -webkit-transform: translate(-50%, 0);
        transition: .8s;
    }
    
    .LeftIn{
		opacity: 1.0;
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }
	/*----- 右からスライドフェードイン -----*/
    .inviewRight{
		opacity: 0;
        transform: translate(50%, 0);
        -webkit-transform: translate(50%, 0);
        transition: .8s;
    }
    
    .RightIn{
		opacity: 1.0;
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }

	   .goLeft {
		opacity: 0;
        transform: translate(-50%, 0);
        -webkit-transform: translate(-50%, 0);
        transition: .8s;
    }
	   .goLeft02 {
		opacity: 0;
        transform: translate(-50%, 0);
        -webkit-transform: translate(-50%, 0);
        transition: .8s;
    }
	
}