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


body {
	background:url(../images/common/bg.jpg) repeat top center;
	background-size:cover;
}


header .mainLogo {
	display:none;
}


#container {
	padding-top:200px;
	padding-bottom:0px;
	text-align:center;
	position:relative;
	overflow:hidden;
}

.contents {
	position:relative;
	z-index:100;
	padding-bottom:200px;
}

h1 {margin:0 auto 0px;
width:85%;
max-width:568px;
color:#fff;
font-size:16px;
letter-spacing:0.1em;
text-align:center;
}
h1 img {
	margin:10px 0;}
	h1 span img {
		width:80%;
		max-width:314px;
	}

hr {border-top:none;border-right:none;border-bottom:none;border-left:1px solid #707079; display:block; width:1px; margin:20px auto;}
.border01 {height:150px; border-left:none;}
.border02 {height:100px;}

.whats {
	width:75%;
	max-width:356px;
	margin:0 auto 10px;
}

.movie {display:inline-block; border:1px solid white; margin:0 auto 0; position:relative; padding:5px 5px 0; }
.movie h2 {position:absolute; top:-150px; left:0px; width:150px;}

.movie {
  position: relative;
  width: 95%;
  padding-top: 56.25%;
  max-width:560px;
}
.movie iframe {
  position: absolute;
  top: 1%;
  right: 1%;
  width: 98% !important;
  height: 98% !important;
}


/*
.movie iframe {
  position: absolute;
  top: 1%;
  right: 1%;
  width: 98% !important;
  height: 98% !important;
  max-width:560px;
  max-height:315px;
}
-*/

/* desktop */
@media only screen and (min-width: 481px) {
#container {
	padding-top:300px;
	padding-bottom:0px;
	text-align:center;
	position:relative;
	overflow:hidden;
}

.contents {
	position:relative;
	z-index:100;
	padding-bottom:400px;
}

h1 {margin:0 auto 220px;
width:85%;
max-width:625px;
color:#fff;
font-size:16px;
letter-spacing:0.1em;
text-align:center;
}
h1 img {
	margin:10px 0;}
	h1 span img {
		width:85%;
		max-width:345px;
	}
	
hr {border-top:none;border-right:none;border-bottom:none;border-left:1px solid #707079; display:block; width:1px; margin:20px auto;}
.border01 {height:300px;border-left:1px solid #707079; }

.whats {
	width:75%;
	max-width:356px;
	margin:0 auto 20px;
}

.movie h2 {position:absolute; top:-150px; left:-50px; width:200px;}

.movie {
  position: relative;
  width: 100%;
  padding-top: 325px;
  max-width:570px;
  max-height:315px;
}
/*

.movie iframe {
  position: absolute;
  top: 5px;
  right: 5px;
   width: 100% !important;
  height: 100% !important;
 max-width:560px;
  max-height:315px;
}*/

}

p {font-family: 'Josefin Sans', sans-serif; font-weight:300; color:#fff; letter-spacing:0.1em; font-size:24px;}

.btn {padding-top:20px; position:relative; z-index:100;}
.btn a {
	color:#fff;
	background:rgba(0,0,0,0.8); border:1px solid #fff;
	border-radius:100px;
	padding:18px 30px;
	text-decoration:none;
	font-size:16px;
	width:250px;
}
.btn a:hover {
	background:rgba(90,150,228,0.4);
}
.btn a img {height:18px; margin-top:-4px; margin-left:10px;}

/* desktop */
@media only screen and (min-width: 769px) {

.btn {padding-top:20px; position:relative; z-index:100;}
.btn a {
	color:#fff;
	background:rgba(0,0,0,0.8); border:1px solid #fff;
	border-radius:100px;
	padding:30px 60px;
	text-decoration:none;
	font-size:18px;
	width:320px;
}
.btn a:hover {
	background:rgba(90,150,228,0.4);
}
.btn a img {height:18px; margin-top:-4px; margin-left:10px;}

.movie h2 {position:absolute; top:-150px; left:-150px; width:200px;}
.movie {
  position: relative;
  width: 100%;
  padding-top: 325px;
  max-width:570px;
  max-height:315px;
}
}


.momotaro {
	width:100%;
	height:200px;
	background:url(../images/top/momotaro_sp.png) no-repeat center bottom;
	background-size:contain;
	margin:0 auto;
	position:absolute;
	bottom:0px;
z-index:1;}


.earth {
	background-image:url(../images/top/earth.png) ;
	background-repeat:no-repeat;
	background-size:contain;
	width:100%;
	height:100%;
	max-width:1300px;
	position:absolute;
	top:30px;
	left:0px;
	z-index:1;
	text-align:left;
}

.inseki01 {
	position:absolute;
	top:1500px;
	left:0px;
	z-index:3;
	width:40%; }
	
.inseki02 {
	position:absolute;
	top:2000px;
	left:0;
	z-index:4;}
	
.hoshi01 {
	position:absolute;
	top:1500px;
	right:-30px;
	z-index:5;}

.hoshi02 {
	position:absolute;
	top:700px;
	right:0;
	z-index:6;
	width:50%;}
	
.blackhall {
	position:absolute;
	left:0;
	top:370px;
	z-index:2;
	text-align:center;
	width:85%;
	background:url(../images/top/blackhall.png) no-repeat top center;
	background-size:250%;
	height:1195px;
}
/* desktop */
@media only screen and (min-width: 769px) {


.earth {
	background-image:url(../images/top/earth.png) ;
	background-repeat:no-repeat;
	width:100%;
	height:100%;
	max-width:1300px;
	position:absolute;
	top:30px;
	left:0px;
	z-index:1;
	text-align:left;
}

.inseki01 {
	position:absolute;
	top:1500px;
	left:0px;
	z-index:3;
	width:289px; }
	
.inseki02 {
	position:absolute;
	top:2000px;
	left:0;
	z-index:4;}
	
.hoshi01 {
	position:absolute;
	top:1500px;
	right:-30px;
	z-index:5;}

.hoshi02 {
	position:absolute;
	top:700px;
	right:0;
	z-index:6;
	width:328px;}


.blackhall {
	position:absolute;
	left:0;
	top:730px;
	z-index:2;
	text-align:center;
	width:100%;
	background:url(../images/top/blackhall.png) no-repeat top center;
	height:1195px;
    -webkit-animation: spin 400s linear infinite;
    -moz-animation: spin 400s linear infinite;
    -ms-animation: spin 400s linear infinite;
    -o-animation: spin 400s linear infinite;
    animation: spin 400s linear infinite;
}

.momotaro {
	width:100%;
	height:555px;
	background:url(../images/top/momotaro.png) no-repeat center bottom;
	background-size:contain;
	margin:0 auto;
	position:absolute;
	bottom:0px;
z-index:1;}

}

@-webkit-keyframes spin {
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
	0% {-moz-transform: rotate(0deg);}
	100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
	0% {-ms-transform: rotate(0deg);}
	100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
	0% {-o-transform: rotate(0deg);}
	100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
.momo {
	position:absolute;
	top:0px;
	right:-600px;
	z-index:7;
	width:60%;
	max-width:480px;
}