/*　ローディング画面のためのcss */
#splash {
	/* fixedで全面に固定 */
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	background: #fff;
	text-align: center;
	color:  #fff;
}

/* loading画面中央配置 */
#splash_logo{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

/* fadeUpをするアイコンの動き */
.fadeUp{
	animation-name: fadeUpAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeUpAnime{
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	
	to{
		opacity: 1;
		transform: translateY(0);
	}
}
/* //fadeUpをするアイコンの動き */

/* loadingの縁をなぞる動き */
.loading {
  width: 600px;
}

.loading path {
  fill: white;
  stroke: black; 
  stroke-width: 3px;
  animation: svg-anime 2s linear;
}

@keyframes svg-anime{
  0% {
    fill: transparent;
    stroke-dasharray: 1000px;
    stroke-dashoffset: 1000px;
  }
  90% {
    fill: transparent;
    stroke-dashoffset: 0;
  }
  100%{
    fill: white;
  }
}
/* //loadingの縁をなぞる動き */