@charset "utf-8";
/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/
#splash , #splash2 {
    /*fixedで全面に固定*/
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 3;
	text-align:center;
	color:#fff;
}
#splash3 {
    /*fixedで全面に固定*/
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 3;
	text-align:center;
	color:#fff;
}
/* Loading画像中央配置　*/
#splash_logo, #splash_logo2 {
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#splash_logo3 {
	position: absolute;
	top: 55%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo svg, #splash_logo2 svg{
	width:600px;
}
#splash_logo3 svg{
	width:400px;
}
@media screen and (min-width:320px ) and (max-width: 449.98px) {
	#splash_logo svg, #splash_logo2 svg {
		width:300px;
	}
	#splash_logo3 svg{
		width: 200px;
	}
}

@media screen and (min-width:450px ) and (max-width: 575.98px) {
	#splash_logo, #splash_logo2 {
		top: 75%;
	}
	#splash_logo3 {
		top: 85%;
	}
	#splash_logo svg, #splash_logo2 svg {
		width:400px;
	}
	#splash_logo3 svg{
		width: 200px;
	}
}

@media screen and (min-width:576px ) and (max-width: 767.98px) {
	#splash_logo, #splash_logo2 {
		top: 75%;
	}
	#splash_logo3 {
		top: 85%;
	}
	#splash_logo svg, #splash_logo2 svg{
		width:500px;
	}
	#splash_logo3 svg{
		width: 250px;
	}
}
@media screen and (min-width:768px ) and (max-width: 991.98px) {
	#splash_logo, #splash_logo2 {
		top: 65%;
	}
	#splash_logo3 {
		top: 75%;
	}
	#splash_logo svg, #splash_logo2 svg{
		width:600px;
	}
	#splash_logo3 svg{
		width: 300px;
	}
}
@media screen and (min-width:992px ) and (max-width: 1199.98px) {
	#splash_logo, #splash_logo2 {
		top: 75%;
	}
	#splash_logo3 {
		top: 85%;
	}
	#splash_logo svg, #splash_logo2 svg{
		width:700px;
	}
	#splash_logo3 svg{
		width: 400px;
	}
}
@media screen and (min-width:1200px ) {
	#splash_logo, #splash_logo2 {
		top: 70%;
	}
	#splash_logo3 {
		top: 80%;
	}
	#splash_logo svg, #splash_logo2 svg{
		width:800px;
	}
	#splash_logo3 svg{
		width: 500px;
	}
}
/*=============== SVGアニメーション内の指定 =================*/

/*アニメーション前の指定*/
#mask path, #mask polygon, #mask rect {
		fill-opacity: 0;/*最初は透過0で見えない状態*/
		transition: fill-opacity 2.5s;/*カラーがつく際のアニメーション0.5秒で変化*/
		fill: none;/*塗りがない状態*/
		stroke: #fff;/*線の色*/
	}

/*アニメーション後に.doneというクラス名がで付与された時の指定*/
#mask.done path, #mask.done polygon, #mask.done rect {
	  fill: #fff;/*塗りの色*/
	  fill-opacity: 1;/*透過1で見える状態*/
	  stroke: none;/*線の色なし*/
	}


#mask2 path, #mask2 polygon, #mask2 rect {
		fill-opacity: 0;/*最初は透過0で見えない状態*/
		transition: fill-opacity 7s;/*カラーがつく際のアニメーション0.5秒で変化*/
		fill: none;/*塗りがない状態*/
		stroke: tranlate;/*線の色*/
	}
/*アニメーション後に.doneというクラス名がで付与された時の指定*/
#mask2.done path, #mask2.done polygon, #mask2.done rect {
	  fill: #ffffff;/*塗りの色*/
	  fill-opacity: 1;/*透過1で見える状態*/
	  stroke: none;/*線の色なし*/
	}



#mask3 path, #mask3 polygon, #mask3 rect {
		fill-opacity: 0;/*最初は透過0で見えない状態*/
		transition: fill-opacity 7s;/*カラーがつく際のアニメーション0.5秒で変化*/
		fill: none;/*塗りがない状態*/
		stroke: tranlate;/*線の色*/
	}
/*アニメーション後に.doneというクラス名がで付与された時の指定*/
#mask3.done path, #mask3.done polygon, #mask3.done rect {
	  fill: #ffffff;/*塗りの色*/
	  fill-opacity: 1;/*透過1で見える状態*/
	  stroke: none;/*線の色なし*/
	}