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

#logo-splash { position: fixed; width: 100%; height: 100vh; z-index: 9999; background: rgba(255,255,255,1.0); text-align:center; color:#fff; }
#logo-splash-img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#logo-splash-img img {
  width: 80%; /* スマホ画面の幅に対してどのくらいの割合にするか（例: 80%） */
  max-width: 250px; /* PCなどで画像が大きくなりすぎるのを防ぐ最大幅 */
  height: auto; /* 縦横比を崩さずにリサイズする */
}

/* 念のため、親要素（ロゴを囲むブロック）が中央配置になるようにする設定 */
#logo-splash-img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
#logo-splash-img img { width:200px; }
#logo-splash .splash-fadeUp { animation-name: spFadeUpAnime; animation-duration:0.5s; animation-fill-mode:forwards; opacity: 0;
}

@keyframes spFadeUpAnime{
	0% {
	opacity: 0;
	transform: translateY(100px);
	}
	100% {
	opacity: 1;
	transform: translateY(0);
	}
}

@media screen and (max-width: 599px) {
	#logo-splash-img img { width:150px; }
	#logo-splash-img { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);}
}
@media screen and (min-width: 600px) {
}
@media screen and (min-width: 600px) and (max-width: 899px)  {
	#logo-splash-img img { width:160px; }
}
@media screen and (min-width: 900px) and (max-width: 1079px)  {
	#logo-splash-img img { width:170px; }
}
@media screen and (min-width: 1080px) and (max-width: 1199px)  {
	#logo-splash-img img { width:180px; }
}
@media screen and (min-width: 1200px) and (max-width: 1479px)  {
	#logo-splash-img img { width:190px; }
}
@media screen and (min-width: 1480px) {
}