@charset "utf-8";
/*****************************************************
	
	スクロールアニメ
	
*****************************************************/

    /*----- フェードイン -----*/
    .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);
    }

    /*----- ズームイン -----*/
    .inviewzoomIn {
        transform: scale(0, 0);
        -webkit-transform: scale(0, 0);
        transition: 1.5s;
    }
    
    .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);
    }
    /*----- フェードイン -----*/
    .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);
    }
 
    /*----- ズームイン -----*/
    .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);
    }
/*----- フェードインしながら上へスライド -----*/
    .inviewfadeInDown {
        opacity: 0;
        transform: translate(0, -60px);
        -webkit-transform: translate(0, -60px);
        transition: .8s;
    }
    
    .fadeInDown {
        opacity: 1.0;
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }

/*----- フェードインしながら左からスライド -----*/
    .inviewfadeInRight {
        opacity: 0;
        transform: translate(-15%, 0);
        -webkit-transform: translate(-15%, 0);
        transition: .8s;
    }
    
    .fadeInRight {
        opacity: 1.0;
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }

/*----- フェードインしながら右からスライド -----*/
    .inviewfadeInLeft {
        opacity: 0;
        transform: translate(5%, 0);
        -webkit-transform: translate(5%, 0);
        transition: .5s;
    }
    
    .fadeInLeft {
        opacity: 1.0;
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }

/*----- フェードインしながら右からスライド -----*/
    .inviewmap-bg-slide {
        transform: translate(100%, 0);
        -webkit-transform: translate(100%, 0);
        transition: 1.0s;
    }
    
    .map-bg-slide {
   transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }


/*----- フェードインしながらブラー -----*/
    .inviewfadeInBrar {
        -ms-filter: blur(80px);
  filter: blur(80px);
		opacity: 0;
        transition: 1.0s;
		transform: translate(0, 10%);
        -webkit-transform: translate(0, 10%);
    }
    
    .fadeInBrar {
    -ms-filter: blur(0px);
  filter: blur(0px);
		opacity: 1.0;
		transform: translate(0%, 0);
        -webkit-transform: translate(0%, 0);
    }


/*----- 時間遅延 -----*/
    .delay0_1byo {
       transition-delay: .1s;
    }
.delay0_2byo {
       transition-delay: .2s;
    }
.delay0_3byo {
       transition-delay: .3s;
    }
.delay0_4byo {
       transition-delay: .4s;
    }
.delay0_5byo {
       transition-delay: .5s;
    }
.delay0_6byo {
       transition-delay: .6s;
    }
.delay0_8byo {
       transition-delay: .8s;
    }
.delay0_9byo {
       transition-delay: .9s;
    }
.delay1byo {
       transition-delay: 1.0s;
    }
.delay1_1byo {
       transition-delay: 1.1s;
    }
.delay1_2byo {
       transition-delay: 1.2s;
    }.delay1_5byo {
       transition-delay: 1.5s;
    }
.delay_mainbg {
       transition-delay: 2.8s;
    }

/* animation */
@-webkit-keyframes passing-bar{
	0% {
		left: 0;
		right: auto;
		width: 0;
	}
	30% {
		left: 0;
		right: auto;
		width: 100%;
	}
	70% {
		left: 0;
		width: 100%;
	}
	100% {
		left: auto;
		right: 0;
		width: 0;
	}
}
@keyframes passing-bar{
	0% {
		left: 0;
		width: 0;
	}
	30% {
		left: 0;
		width: 100%;
	}
	70% {
		left: 0;
		width: 100%;
	}
	100% {
		left: 100%;
		width: 0;
	}
}
@-webkit-keyframes passing-txt{
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes passing-txt{
	0% { opacity:0; }
	50% { opacity:0; }
	100% { opacity:1; }
}
/* css */
.passing{
	text-align:center;
}
.passing .passing-box {
	display: block;
}
.passing .passing-bar {
	position: relative;
	display: inline-block;
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	
}
.passing .passing-bar:before {
	content: '';
	display: inline-block;
	width: 0;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	background: #0076D8;
}

.passing .passing-txt {
	opacity: 0;
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0); 
	
}
.passing.move .passing-bar:before {
	-webkit-animation: passing-bar 1.5s ease 1.2s 1 normal forwards;
	animation: passing-bar 1.5s ease 1.2s 1 normal forwards;
}
.passing.move .passing-txt {
	-webkit-animation: passing-txt 0s ease 2.0s 1 normal forwards;
	animation:passing-txt 0s ease 2.0s 1 normal forwards;
}