@charset "utf-8";
@import "keyframes.css";

body { background: #012492;}
.light { text-shadow: 0 0 10px #ffc, 0 0 10px #ffc;}

#startLogo { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; z-index: 100; background: #fff;}
#startLogo img { position: absolute; top: 35%; left: 50%; transform: translate(-50%,0); width: 60%; max-width: 620px;}

#firstView { position: relative; width: 100%; height: 100vh; z-index: 9;}
#firstView .index-logo { position: absolute; left: 0; top: 50%; width: 100%; transform: translate(0,-60%); opacity: 0;}
#firstView .index-logo .inner { width: 85%; max-width: 960px; margin: 0 auto; opacity: 1;}
#firstView .index-logo h1 { display: block; text-align: center;
 background-image: url(../img/top/star.png), url(../img/top/star.png), url(../img/top/star.png), url(../img/top/star.png), url(../img/top/star.png);
 background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
 background-position: 3.4% 16%, 31.5% 52%, 43.5% 4%, 75.2% 15.5%, 94.5% 90%;
 background-size: 25px auto, 20px auto, 20px auto, 25px auto, 20px auto;
}
#firstView .index-logo h1 svg { width: 100%; fill:none;
 stroke-dasharray: 500px; stroke-dashoffset: 500px;
 stroke:#f4f4f4; stroke-miterlimit:10; stroke-width:3px;
 animation: logoTxt 2.0s linear forwards; animation-delay: 3.2s;
}
#firstView .index-logo h1 svg {}
@keyframes logoTxt{
 0% { stroke-dashoffset: 500px;}
 100% { stroke-dashoffset: 0px;}
}
#firstView.show .index-logo { animation: 1.0s linear fadeIn 1.5s forwards;}
#firstView.show .index-logo .inner { animation: 1.0s linear fadeOut 4.5s forwards;}

@media (max-width: 1001px) {
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#firstView .index-logo { top: 40%;}
	#firstView .index-logo h1 { background-size: 15px auto, 12px auto, 12px auto, 15px auto, 12px auto;}
}


#bg-shooting { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; z-index: 1; overflow: hidden;}
#bg-shooting .bg-moon { position: absolute; left: 74%; top: 13%; width: 150px; height: 150px; z-index: 10;
 background: url('../img/top/moon.gif') no-repeat 50% 50% / cover;
}
#bg-shooting .star-position { position: fixed; left: 200px; top: 200px; z-index: 9; height: 100px; width: 100px; transform: rotateZ(45deg);}
#bg-shooting .shootingstar { height: 0; width: 1px; background: linear-gradient(transparent, rgb(255, 255, 255));
 animation: shooting 0.8s linear;
}
#bg-shooting .stars { position: absolute; left: 0; top: 0; z-index: 8; width: 100%; height: 100%;}
#bg-shooting .stars div { position: relative; width: 100%; height: 100%;}
#bg-shooting .stars div span { position: absolute; display: block; width: 15px; height: 20px;
 background: url(../img/top/star.png) no-repeat 50% 50% / 100% 100%; opacity: 1;
}
#bg-shooting .stars div.s span { animation: flash-s 2.0s infinite;}
#bg-shooting .stars div.s span:nth-of-type(1){ top: 10%; left: 38%; animation-delay: 0.0s;}
#bg-shooting .stars div.s span:nth-of-type(2){ top: 28%; left: 34%; animation-delay: 1.0s;}
#bg-shooting .stars div.s span:nth-of-type(3){ top: 50%; left: 20%; animation-delay: 3.0s;}
#bg-shooting .stars div.s span:nth-of-type(4){ top: 70%; right: 10%; animation-delay: 2.5s;}
#bg-shooting .stars div.s span:nth-of-type(5){ top: 80%; right: 15%; animation-delay: 1.0s;}
#bg-shooting .stars div.s span:nth-of-type(6){ top: 85%; right: 45%; animation-delay: 0.0s;}
#bg-shooting .stars div.s span:nth-of-type(7){ top: 90%; left: 28%; animation-delay: 1.0s;}

#bg-shooting .stars div.m span { animation: flash-m 2.25s infinite;}
#bg-shooting .stars div.m span:nth-of-type(1){ top: 6%; right: 28%; animation-delay: 2.2s;}
#bg-shooting .stars div.m span:nth-of-type(2){ top: 15%; right: 35%; animation-delay: 2.0s;}
#bg-shooting .stars div.m span:nth-of-type(3){ top: 25%; left: 10%; animation-delay: 1.4s;}
#bg-shooting .stars div.m span:nth-of-type(4){ top: 35%; left: 18%; animation-delay: 0.0s;}
#bg-shooting .stars div.m span:nth-of-type(5){ top: 42%; left: 16%; animation-delay: 1.5s;}
#bg-shooting .stars div.m span:nth-of-type(6){ top: 90%; right: 16%; animation-delay: 1.0s;}

#bg-shooting .stars div.l span { animation: flash-l 2.75s infinite;}
#bg-shooting .stars div.l span:nth-of-type(1){ top: 10%; left: 45%; animation-delay: 0.5s;}
#bg-shooting .stars div.l span:nth-of-type(2){ top: 25%; left: 28%; animation-delay: 0.0s;}
#bg-shooting .stars div.l span:nth-of-type(3){ top: 32%; right: 10%; animation-delay: 1.5s;}
#bg-shooting .stars div.l span:nth-of-type(4){ top: 48%; left: 10%; animation-delay: 2.0s;}
#bg-shooting .stars div.l span:nth-of-type(5){ top: 60%; right: 15%; animation-delay: 1.0s;}
#bg-shooting .stars div.l span:nth-of-type(6){ top: 70%; right: 26%; animation-delay: 0.0s;}

#bg-shooting .milky { position: absolute; left: 0%; z-index: 5; bottom: 0%; width: 50%; height: 500px; opacity: 0;
 background: url(../img/top/bg-milkyway.png) no-repeat 50% 100% / auto 100%;
 transition: 0.8s linear;
}
#bg-shooting .milky.show { opacity: 1;}

#bg-shooting .base { position: absolute; left: 0; top: 0; width: 100%; height: 110%;
	background: url(../img/bg.jpg) no-repeat repeat 50% 0% / 100% auto;
}
@media (max-width: 801px) {
	#bg-shooting .bg-moon { left: 72%; top: 10%; width: 100px; height: 100px;}
	#bg-shooting .milky { background-size: 100% 100%;}
}
@media (max-width: 481px) {
	#bg-shooting .bg-moon { left: 68%; top: 8%; width: 90px; height: 90px;}
}