@charset "utf-8";

#container { background: #063c93;}
#hd { opacity: 0;}
#sp-menu { opacity: 0;}
#hd-cart { opacity: 0;}


#loading { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; z-index: 10;}

#startLogo { position: absolute; 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;}

#drawLogo { position: relative; width: 100%; height: 100vh; z-index: 9;}
#drawLogo .index-logo { position: absolute; left: 0; top: 50%; width: 100%; transform: translate(0,-60%); opacity: 0;}
#drawLogo .index-logo .inner { width: 85%; max-width: 960px; margin: 0 auto; opacity: 1;}
#drawLogo .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;
}
#drawLogo .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: 2.6s;
}
#drawLogo .index-logo h1 svg {}
@keyframes logoTxt{
 0% { stroke-dashoffset: 500px;}
 100% { stroke-dashoffset: 0px;}
}
#drawLogo.show .index-logo { animation: 1.0s linear fadeIn 1.5s forwards;}
#drawLogo.show .index-logo .inner { animation: 1.0s linear fadeOut 4.5s forwards;}

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




#hd.fadeIn { animation: 1.0s linear fadeIn 0.8s forwards;}
#sp-menu.fadeIn { animation: 1.0s linear fadeIn 0.8s forwards;}
#hd-cart.fadeIn { animation: 1.0s linear fadeIn 0.8s forwards;}

#ft { background: url('../img/bg-ft-sv.jpg') no-repeat 50% 50% / cover;}
@media (max-width: 641px) {
	#ft { background: url('../img/bg-ft-sv-sp.jpg') no-repeat 50% 100% / 100% auto;}
}


#firstView { position: relative; z-index: 3;}
#firstView:after { content: ''; display: block; width: 100%; height: 100%; background: url('../img/top/bg-kv.png') no-repeat 50% 92%; opacity: 0;
 position: absolute; left: 0; bottom: 0; z-index: 1;
}
#firstView .inner-sct { position: relative; width: 100%; max-width: 1280px; height: 100vh; margin: 0 auto; z-index: 2;}
#firstView .lead { position: absolute; left: 0; top: 50%; transform: translate(0,-55%); width: 100%;}
#firstView .lead p { color: #fff; font-size: 24px; line-height: 2.4; letter-spacing: 0.2rem; text-align: center;}
#firstView .lead p span { transition: 0.4s linear;}
#firstView .lead p span.hide { opacity: 0;}

#firstView .icn-new { position: absolute; left: 25%; top: 20%; width: 126px; opacity: 0;}
#firstView .icn-new div{ position: relative; width: 100%; border: solid 2px #fff; overflow: hidden; border-radius: 50%; box-shadow: 0 0 20px #fff;}
#firstView .icn-new div img{ width: 100%; }
#firstView .package { display: block; width: 92%; max-width: 1000px; height: 100%;
 position: absolute; left: 50%; top: 0; transform: translate(-50%,0%);
 background: url('../img/top/kv-bottle.png') no-repeat 50% 50% / 100% auto; opacity: 0;
}

#firstView .index-logo { position: absolute; left: 0; top: 50%; width: 100%; transform: translate(0,-60%);}
#firstView .index-logo .inner { width: 90%; max-width: 960px; margin: 0 auto;}
#firstView .index-logo h1 { text-align: center;}
#firstView .index-logo h1 img { width: 100%;}

#firstView .info { position: absolute; left: 0; bottom: 280px; width: 100%; opacity: 0;}
#firstView .info .inner { width: 90%; max-width: 1000px; margin: 0 auto;}
#firstView .info a,
#firstView .info span { display: block; width: 40%; max-width: 300px; color: #0f275d; text-decoration: none;}
#firstView .info a { transition: 0.3s linear;}
#firstView .info a:hover {  opacity: 0.8;}
#firstView .info dl { display: table; width: 100%; padding: 15px 24px; background: url('../img/top/bg-info.png') no-repeat 50% 50% / 100% 100%;}
#firstView .info dl dt,
#firstView .info dl dd { display: table-cell; vertical-align: middle;}
#firstView .info dl dt { width: 65px;}
#firstView .info dl dt img { width: 100%; box-shadow: 0 0 8px rgba(255,255,255,0.8);}
#firstView .info dl dd { width: auto; padding-left: 18px; font-size: 12px;}
#firstView .info dl dd span.date { display: block; font-size: 10px;}

#firstView.show:after{ animation: 1.0s linear fadeIn 0.5s forwards;}
#firstView.show .package { animation: 1.0s linear fadeIn 0.5s forwards;}
#firstView.show .icn-new { animation: 1.0s linear fadeIn 1.0s forwards;}
#firstView.show .info { animation: 1.0s linear fadeIn 1.2s forwards;}
@media (max-width: 1201px) {
	#firstView .icn-new { left: 18%;}
}
@media (max-width: 1001px) {
	#firstView .icn-new { left: 15%; top: 12%;}
	#firstView .info { bottom: 60px;}
	#firstView .info a,
	#firstView .info span { width: 100%; max-width: 420px; margin: 0 auto;}
}
@media (max-width: 801px) {
	#firstView .icn-new { left: 12%; width: 100px;}
	#firstView .package { width: 90%; background: url('../img/top/kv-bottle-sp.png') no-repeat 50% 70% / 100% auto;}
}
@media (max-width: 641px) {
	#firstView:after { background-position: 50% 85%;}
	#firstView .package,
	#firstView .star { width: 80%;}
	#firstView .package { width: 100%; background-position: 50% 55%;}
	#firstView .info { top: auto; bottom: 100px;}
}
@media (max-width: 481px) {
	#firstView:after { background-position: 50% 72%;}
	#firstView .icn-new { left: 12%; top: 15%; width: 65px;}
	#firstView .package { width: 100%; height: 90%; top: 0; transform: translate(-50%,0);}
	#firstView .star { width: 80%; height: 90%; top: 0; transform: translate(-50%,0);}
	#firstView .package{ background-position: 50% 50%;}
	#firstView .star .sign.sign-1 { background-position: 50% 40%;}
	#firstView .star .sign.sign-2 { background-position: 50% 40%;}
	#firstView .star .sign.sign-3 { background-position: 50% 40%;}
	#firstView .star .sign.sign-4 { background-position: 50% 40%;}
	#firstView .index-logo { top: 40%;}
	#firstView .info {}
	#firstView .info dl dd { padding-left: 12px;}
}


.bnr-cosme { position: relative; z-index: 10; width: 100%; opacity: 0; animation: 1.0s linear fadeIn 1.5s forwards;}
.bnr-cosme div { width: 100%; max-width: 1280px; margin: 0 auto; padding: 15px 0 10px; background: rgba(255,255,255,.8);}
.bnr-cosme div p { text-align: center;}
.bnr-cosme div p img{ width: 90%; max-width: 500px; }



.index-wrap { position: relative; z-index: 10; padding-bottom: 200px; background: url(../img/top/bg-building.png) no-repeat 50% 100%;}
.sct.mb { margin-bottom: 240px;}
.sct .inner-sct { width: 90%; max-width: 1024px; margin: 0 auto;}

.stl { position: relative; overflow: hidden;}
.stl h2 { position: relative; text-align: center; transition: 0.3s ease; opacity: 0; transform: translate(0,60px);}
.stl h2 img { width: 100%; max-width: 500px;}
.stl.show h2 { opacity: 1; transform: translate(0,0);}
p.stl-jp { color: #fff; font-size: 16px; text-align: center;}
@media (max-width: 801px) {
	.sct.mb { margin-bottom: 100px;}
	.sct .inner-sct { padding-top: 50px;}
	p.stl-jp { font-size: 14px;}
}
@media (max-width: 481px) {
	.index-wrap { padding-bottom: 100px; background-size: auto 120px;}
	.sct.mb { margin-bottom: 40px;}
	p.stl-jp { font-size: 11px;}
}



#care {}
#care .inner-sct { padding-top: 80px;}
#care .stl h2 img { width: 90%; max-width: 730px;}
#care .stl h2 img.sp { display: none;}
#care h3 { position: relative; margin-bottom: 30px; text-align: center; transition: 0.4s linear; opacity: 0; transform: translate(0,20px);}
#care h3 img { width: 100%; max-width: 920px;}
#care h3 img.sp { display: none;}
#care .ctn { transition: 0.4s linear; opacity: 0;}
#care p { color: #fff; font-size: 18px; font-weight: 700; line-height: 2.4; letter-spacing: 0.1rem; text-align: center;}
#care p sup{ font-size: 12px; vertical-align: super;}
#care ul { margin-bottom: 25px; font-size: 0; text-align: center;}
#care ul li { display: inline-block; width: 32%; max-width: 180px; padding: 0 14px;}
#care ul li img { width: 100%;}
#care .btn-more { width: 100%; max-width: 290px; margin: 0 auto; transition: 0.4s linear; opacity: 0;}

#care h3.show { opacity: 1; transform: translate(0,0);}
#care .ctn.show { opacity: 1;}
#care .btn-more.show { opacity: 1;}
@media (max-width: 801px) {
	#care .inner-sct { padding-top: 100px;}
	#care p span { display: block;}
	#care ul li{ padding: 0 8px;}
}
@media (max-width: 481px) {
	#care { margin-bottom: 0px;}
	#care .stl { margin-bottom: 10px;}
	#care .stl h2 img.pc { display: none;}
	#care .stl h2 img.sp { display: block; width: 90%; margin: 0 auto;}
	#care h3 img.pc { display: none;}
	#care h3 img.sp { display: block; width: 94%; margin: 0 auto;}
	#care p { margin-bottom: 15px; font-size: 13px; line-height: 1.8;}
	#care p.mb { margin-bottom: 30px;}
	#care ul { margin-bottom: 15px;}
	#care ul li{ padding: 0 4px;}
}


#story .inner-sct { width: 72%; margin: 0 auto; padding-top: 120px;}
#story .movie { width: 100%; max-width: 540px; margin: 0 auto;}
#story .movie .inner { position: relative; width: 100%;}
#story .movie .preload { position: absolute; left: 0; top: 0; z-index: 2; width: 100%;}
#story .movie .preload img { width: 100%; opacity: 1; transition: 0.3s linear;}
#story .movie .preload.fade img { opacity: 0;}
#story .movie video { position: relative; z-index: 1; width: 100%;}
@media (max-width: 641px) {
	#story .inner-sct { padding-top: 80px;}
}
@media (max-width: 481px) {
	#story .inner-sct { padding-top: 50px;}
}


#product .inner-sct { width: 100%;}
#product p.stl-jp { margin-bottom: 80px;}
#product .ctn-flex { display: flex; align-items: center; justify-content: space-between; width: 88%; max-width: 780px; margin: 0 auto 60px;}
#product .ctn-flex .ctn { position: relative; width: 32%; max-width: 250px;}
#product .ctn-flex .ctn .icn-new { width: 100px; position: absolute; left: -30px; top: -70px; z-index: 2; transition: 0.4s linear 0.4s; opacity: 0;}
#product .ctn-flex .ctn .icn-new img { width: 100%;}
#product .ctn-flex .ctn figure { position: relative; width: 100%; margin: 0 auto 30px; text-align: center;}
#product .ctn-flex .ctn figure a { position: relative; display: block; width: 100%; text-align: center; transition: 0.4s linear; opacity: 0; transform: translate(0px,30px);}

#product .ctn-flex .ctn figure img { width: 100%; max-width: 250px; box-shadow: 0 0 12px #333;}
#product .ctn-flex .btn-more { width: 92%; max-width: 200px; margin: 0 auto;}
#product .ctn-flex.show .ctn .icn-new { opacity: 1;}
#product .ctn-flex.show .ctn figure a { opacity: 1; transform: translate(0px,0px)}
#product .ctn-flex.show .ctn figure a:hover { opacity: 0.85;}
#product .ctn.show .txt p { opacity: 1;}
#product .note1 p { color: #fff; font-size: 12px; text-align: right;}
@media (max-width: 801px) {
	#product .ctn-flex .ctn .icn-new { width: 60px; left: -20px; top: -40px;}
}
@media (max-width: 641px) {
	#product .ctn-flex .ctn figure { margin: 0 auto 15px;}
	#product .ctn-flex .ctn a.btn span.box:after { right: 10px;}
}
@media (max-width: 481px) {
	#product p.stl-jp{ margin-bottom: 20px;}
	#product .ctn-flex { margin: 0 auto 20px;}
	#product .ctn-flex .ctn .icn-new { left: -10px; top: -24px; width: 38px;}
	#product .ctn-flex .ctn a.btn {}
	#product .ctn-flex .ctn a.btn span.box { padding: 0px 0px 6px;}
	#product .ctn-flex .ctn a.btn span.box em { display: inline-block; vertical-align: middle; font-size: 11px; letter-spacing: 0.05rem; line-height: 1;}
	#product .ctn-flex .ctn a.btn span.box:after { width: 5px; height: 5px;}
	#product .note1 { width: 90%; margin: 0 auto;}
	#product .note1 p { font-size: 10px;}

}



#special { position: relative;}
#special .inner { position: relative; z-index: 2; width: 100%; padding: 180px 0; transition: 0.4s linear 0.4s; opacity: 0; transform: translate(0,30px);}
#special h2 { width: 90%; margin: 0 auto 25px; color: #0f275d; text-align: center;}
#special h2 img { width: 100%; max-width: 600px;}
#special p { margin-bottom: 40px; color: #0f275d; font-weight: 700; text-align: center;}
#special .bnr { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 40px; font-size: 0; text-align: center;}
#special .bnr .slick-slide { padding: 12px 0;}
#special .bnr .slick-slide a { display: block; width: 94%; max-width: 380px; margin: 0 auto; border-radius: 15px; overflow: hidden; box-shadow: 0 0 10px #aaa;}
#special .bnr .slick-slide a img { width: 100%;}
/*
#special ul li { display: inline-block; width: 32%; }
#special ul li span,
#special ul li a { display: block; width: 94%; max-width: 380px; margin: 0 auto; border-radius: 15px; overflow: hidden; box-shadow: 0 0 12px #999;}
#special ul li span img,
#special ul li a img { width: 100%;}
*/
#special .slick-arrow { top: 45%;}
#special .slick-dots { padding: 8px; font-size: 0;}
#special .slick-dots li { display: inline-block; width: 20px;}
#special .slick-dots li button { width: 8px; height: 8px; margin: 0 auto; background: #a1a1a1; border: solid 1px #a1a1a1; border-radius: 50%;}
#special .slick-dots li.slick-active button { background: #fff; border-color: #204d9b;}
#special .bnr div a:hover img,
#special ul li a:hover img { opacity: 0.85;}
#special .bg { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1;
 background: url(../img/top/bg-cloud.png) no-repeat 50% 50% / auto 100%;
 transition: 0.6s linear; opacity: 1; 
}
#special.show .inner { opacity: 1; transform: translate(0,0px);}
#special.show .bg { opacity: 1;}
@media (min-width: 1701px) {
	#special .bg { background-size: 100% 100%;}
}

@media (max-width: 801px) {
	#special h2 { margin-bottom: 10px;}
	#special .bnr { padding: 0px;}
	#special .bnr .slick-slide a { border-radius: 6px;}
}
@media (max-width: 641px) {
	#special ul li { display: block; width: 100%; margin: 0 auto 30px;}
	#special ul li:last-child { margin: 0 auto;}
}
@media (max-width: 481px) {
	#special .inner { padding: 100px 0;}
	#special h2 { margin-bottom: 6px;}
	#special p { margin-bottom: 20px; font-size: 13px;}
	#special ul li { margin: 0 auto 20px;}
	#special ul li span,
	#special ul li a { border-radius: 8px; box-shadow: 0 0 8px #ccc;}
}


#instagram .inner-sct { padding: 80px 0;}
#instagram .stl { margin-bottom: 30px;}
#instagram ul { margin: 0 auto 40px; font-size: 0; text-align: center; transition: 0.4s linear; opacity: 0;}
#instagram ul li { display: inline-block; width: 33%; padding: 25px;}
#instagram ul li img { width: 100%; box-shadow: 0 0 15px #162971;}
#instagram ul li img.sp { display: none;}
#instagram .follow { width: 50%; max-width: 300px; margin: 0 auto; transition: 0.4s linear; opacity: 0;}
#instagram .follow a { display: block; padding: 10px 0; border: solid 2px #fff; border-radius: 50px;
 color: #fff; font-size: 25px; font-weight: 700; letter-spacing: 0.05rem; text-align: center; text-decoration: none;
}
#instagram .follow a span { display: inline-block; vertical-align: middle;}
#instagram .follow a svg { display: inline-block; vertical-align: middle; width: 34px; margin-left: 12px; fill: #fff;}
#instagram .follow a:hover { background: rgba(255,255,255,0.15);}
#instagram .follow.show,
#instagram ul.show { opacity: 1;}
@media (max-width: 801px) {
	#instagram ul li { padding: 15px;}
}
@media (max-width: 641px) {
	#instagram ul li { width: 50%;}
	#instagram ul li img.pc { display: none;}
	#instagram ul li img.sp { display: block;}
	#instagram .follow a { padding: 8px 0; font-size: 21px;}
}
@media (max-width: 481px) {
	#instagram .inner-sct { padding: 40px 0 60px;}
	#instagram .stl { margin-bottom: 20px;}
	#instagram .follow p a { padding-bottom: 5px;}
	#instagram .follow p a svg { width: 20px;}
	#instagram ul { margin: 0 auto 20px;}
	#instagram ul li { padding: 8px;}
	#instagram ul li img { box-shadow: 0 0 8px #00092a;}
	#instagram .follow a { padding: 6px 0; border-width: 1px; font-size: 15px;}
	#instagram .follow a svg { width: 20px;}
}


.note2 { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 25px 0 20px; background: #031636; z-index: 2;}
.note2 ul { width: 90%; max-width: 680px; margin: 0 auto; text-align: center;}
.note2 ul li { color: #bbb; font-size: 12px; letter-spacing: 0.1rem; line-height: 1.4;}
@media (max-width: 481px) {
	.note2 { padding: 15px 0;}
	.note2 ul li { font-size: 10px; letter-spacing: 0.05rem;}
}

/*
#select .stl { margin-bottom: 20px;}
#select .box { width: 100%; max-width: 850px; margin: 0 auto 20px; border-radius: 15px; overflow: hidden; transition: 0.4s linear; opacity: 0;}
#select .box p { text-align: center;}
#select .box p img { width: 100%;}
#select .box ul { font-size: 0; text-align: center;}
#select .box ul li { display: inline-block; width: 33.33334%;}
#select .box ul li a { display: block; width: 100%;}
#select .box ul li a img { width: 100%;}
#select .more { width: 100%; max-width: 850px; margin: 0 auto;}
#select .more a { display: block; padding: 18px; background: rgba(255,255,255,0.85); border-radius: 50px;
 color: #0f275d; font-size: 23px; font-weight: 700; letter-spacing: 0.15rem; text-align: center; text-decoration: none;
}
#select .more a:hover { opacity: 0.85;}
#select .box.show { opacity: 1;}
@media (max-width: 481px) {
	#select .more a { padding: 8px; background: rgba(255,255,255,0.95); font-size: 16px;}
}


#awards .frame { padding: 100px 0 60px; background: url(../img/top/bg-no1.png) no-repeat 50% 0% / auto 100%;}
#awards p { color: #fff; text-align: center;}
#awards p.stl-jp { margin-bottom: 50px;}
#awards p.note { width: 90%; margin: 0 auto; color: #909090; font-size: 10px;}
#awards figure { width: 90%; max-width: 640px; margin: 0 auto; text-align: center; transition: 0.4s linear; opacity: 0;}
#awards figure img { width: 100%;}
#awards figure img.sp { display: none;}
#awards figure.show { opacity: 1;}
@media (max-width: 641px) {
	#awards .frame { background: none;}
	#awards figure { width: 100%; padding-bottom: 80px; background: url(../img/top/bg-no1-sp.png) no-repeat 50% 100% / auto 75%;}
	#awards figure img.pc { display: none;}
	#awards figure img.sp { display: block; width: 90%; margin: 0 auto;}
}
@media (max-width: 481px) {
	#awards p.stl-jp { margin-bottom: 20px;}
	#awards p.note { text-align: left;}
	#awards p.note br { display: none;}
	#awards figure { margin: 0 auto; padding-bottom: 50px;}
}
*/

/*	背景	*/
#clouds { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; height: 100%; overflow: hidden; z-index: 2;}
#clouds .cloud { position: absolute; background-image: url('../img/top/cloud-1.png'); background-repeat: no-repeat; background-size: auto 100%;}
#clouds .cloud.cloud-r { background-image: url('../img/top/cloud-2.png');}
#clouds .cloud.cloud1 { z-index: 2; width: 320px; height: 320px; background-position: 100% 50%; left: 0; top: 14%;}
#clouds .cloud.cloud2 { z-index: 3; width: 450px; height: 420px; background-position: 0% 50%; right: 0; top: 6%;}
#clouds .cloud.cloud3 { z-index: 4; width: 400px; height: 200px; background-position: 0% 50%; right: 0; top: 18%; opacity: 0.6;}
#clouds .cloud.cloud4 { z-index: 5; width: 420px; height: 360px; background-position: 100% 50%; left: 0; top: 38%;}
#clouds .cloud.cloud5 { z-index: 6; width: 200px; height: 200px; background-position: 0% 50%; right: 0; top: 54%; opacity: 0.85;}
#clouds .cloud.cloud6 { z-index: 7; width: 680px; height: 600px; background-position: 100% 50%; left: 0; top: 80%;}
@media (max-width: 801px) {
	#clouds .cloud.cloud2 { width: 300px; height: 280px;}
	#clouds .cloud.cloud4 { width: 250px; height: 214px;}
	#clouds .cloud.cloud6 { width: 500px; height: 440px;}
}
@media (max-width: 481px) {
	#clouds .cloud.cloud1 { width: 200px; height: 200px;}
	#clouds .cloud.cloud2 { width: 85px; height: 70px; top: 6%;}
	#clouds .cloud.cloud3 { width: 200px; height: 100px; top: 18%;}
	#clouds .cloud.cloud4 { width: 100px; height: 86px; top: 38%;}
	#clouds .cloud.cloud5 { width: 100px; height: 100px; top: 54%;}
	#clouds .cloud.cloud6 { width: 120px; height: 106px; top: 80%;}
}

#bg-shooting { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; z-index: 1; overflow: hidden;}
#bg-shooting .inner{ position: relative; width: 100%; max-width: 1280px; height: 100%; margin: 0 auto; overflow: hidden;}
#bg-shooting .bg-moon { position: absolute; right: 10%; top: 13%; width: 150px; height: 150px; z-index: 10;
 background: url('../img/top/moon.gif') no-repeat 50% 50% / cover; opacity: 0;
}
#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: 10%; right: 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 .stars div.l span:nth-of-type(7){ top: 18%; left: 10%; animation-delay: 2.0s;}
#bg-shooting .stars div.l span:nth-of-type(8){ top: 80%; right: 30%; animation-delay: 1.0s;}
#bg-shooting .stars div.l span:nth-of-type(9){ top: 90%; right: 10%; animation-delay: 0.0s;}
#bg-shooting .stars div.l span:nth-of-type(10){ top: 72%; left: 5%; animation-delay: 1.0s;}
#bg-shooting .stars div.l span:nth-of-type(11){ top: 52%; right: 5%; animation-delay: 0.0s;}
#bg-shooting.show .bg-moon { animation: 1.0s linear fadeIn 3.0s forwards;}


#bg-shooting .milky { position: absolute; right: 55%; 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 { width: 100%; height: 110%; background: url('../img/bg.jpg') no-repeat repeat 50% 0% / 100% auto;}
@media (max-width: 1001px) {
	#bg-shooting .bg-moon { right: 6%; top: 10%; width: 100px; height: 100px;}
}

@media (max-width: 801px) {
	#bg-shooting .milky { background-size: 100% 100%;}
}
@media (max-width: 481px) {
	#bg-shooting .bg-moon { left: 68%; top: 8%; width: 90px; height: 90px;}
}


.popup { padding-top: 40px;}
.popup .popup-in { padding: 40px;}
.popup h3 { width: 100%; max-width: 600px; margin: 0 auto 20px; padding-bottom: 10px; border-bottom: solid 2px #5c86c5; text-align: center;}
.popup h3 img{ width: 100%;}
.popup h3 img.sp { display: none;}
.popup p { text-align: center;}
.popup p img { width: 100%; max-width: 620px;}
.popup ul { display: none;}

@media (max-width: 481px) {
	.popup .popup-in { padding: 20px;}
	.popup h3 img.pc { display: none;}
	.popup h3 img.sp { display: block;}
	.popup p { display: none;}
	.popup ul { display: block;}
	.popup ul li img{ width: 100%;}
}