@charset "UTF-8";

/* --- loading layout --- */
#loading {
		display: none;/* js for one access */
		width: 100vw;
		height: 100vh;
		background: #26a8e1;/* pastel green */
		position: relative;
		z-index: 8000;/* for nav.cover */
		}
		#loading p {
				width: 150px;
				height: 150px;
				line-height: 22em;
				text-align: center;
				letter-spacing: 0.1em;
				text-indent: 0.5em;
				color: #fff;
				margin: auto;
				position: absolute;
				z-index: 9000;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
		}
		#loading.is-active {
				display: block;/* js for one access */
}
/* --- loading layout end --- */

/* --- loading animation --- */

.loader {
		box-sizing: border-box;
		display: flex;
		flex: 0 1 auto;
		flex-direction: column;
		flex-grow: 1;
		flex-shrink: 0;
		flex-basis: 300px;/*30% change for smart phone*/
		max-width: 300px; /*30% change for smart phone*/
		height: 200px;
		align-items: center;
		justify-content: center;
		perspective: 500px;
		margin: auto;
		position: absolute;
		z-index: 100;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
}
/* animetion line-scale */

@-webkit-keyframes line-scale {
		0% {
			     -o-transform: scaley(1);
			    -ms-transform: scaley(1);
			   -moz-transform: scaley(1);
			-webkit-transform: scaley(1);
							transform: scaley(1); 
		}
		50% {
			     -o-transform: scaley(0.4);
			    -ms-transform: scaley(0.4);
			   -moz-transform: scaley(0.4);
			-webkit-transform: scaley(0.4);
							transform: scaley(0.4); 
		}
		100% {
			     -o-transform: scaley(1);
			    -ms-transform: scaley(1);
			   -moz-transform: scaley(1);
			-webkit-transform: scaley(1);
							transform: scaley(1); 
		}
}
@keyframes line-scale {
		0% {
			     -o-transform: scaley(1);
			    -ms-transform: scaley(1);
			   -moz-transform: scaley(1);
			-webkit-transform: scaley(1);
							transform: scaley(1); 
		}
		50% {
			     -o-transform: scaley(0.4);
			    -ms-transform: scaley(0.4);
			   -moz-transform: scaley(0.4);
			-webkit-transform: scaley(0.4);
							transform: scaley(0.4);
		}
		100% {
			     -o-transform: scaley(1);
			    -ms-transform: scaley(1);
			   -moz-transform: scaley(1);
			-webkit-transform: scaley(1);
							transform: scaley(1); 
		} 
}

.line-scale > div:nth-child(1) {
		     -o-animation: line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
		    -ms-animation: line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
		   -moz-animation: line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
		-webkit-animation: line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
						animation: line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}

.line-scale > div:nth-child(2) {
		     -o-animation: line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
		    -ms-animation: line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
		   -moz-animation: line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
		-webkit-animation: line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
						animation: line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); 
}

.line-scale > div:nth-child(3) {
		     -o-animation: line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
		    -ms-animation: line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
		   -moz-animation: line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
		-webkit-animation: line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
						animation: line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); 
}

.line-scale > div:nth-child(4) {
		     -o-animation: line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
		    -ms-animation: line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
		   -moz-animation: line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
		-webkit-animation: line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
						animation: line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); 
}

.line-scale > div:nth-child(5) {
		     -o-animation: line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
		    -ms-animation: line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
		   -moz-animation: line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
		-webkit-animation: line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
						animation: line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); 
}

.line-scale > div {
		background-color: #FFF9A9;
		width: 4px;
		height: 35px;
		border-radius: 2px;
		margin: 2px;
		     -o-animation-fill-mode: both;
		    -ms-animation-fill-mode: both;
		   -moz-animation-fill-mode: both;
		-webkit-animation-fill-mode: both;
						animation-fill-mode: both;
		display: inline-block;
}
/* animetion line-scale end */