/* body */
.body  {
	margin: 0;
	padding: 0;
	background:black;
}

/* main */
.main{
  	margin: 0;
  	width: 100%;
		text-align: center;
		scroll-behavior: smooth;

}

.container{
	overflow: auto;
	scroll-snap-type: y mandatory;
	height:100vh;
}

.area{
	scroll-snap-align: start;
	height: 100vh;
}

/* top_block */
.top_block{
  	height: 100vh;
  	width: 100%;
  	scroll-snap-align: start;

  	position: relative;
}

.top_background{
  	position:absolute;
  	top:0;
  	left:0;
  	right:0;
	  bottom:0;
	  width: 100%;
  	display:block;
}

.stars {
  	background:#000 url(include/stars2.png) repeat top center;
}

.twinkling{
  	background:transparent url(include/twinkling3.png) repeat top center;
  	animation:move-twink-back 200s linear infinite;
}

@keyframes move-twink-back {
  	0%{
    	background-position:0 0;
  	}
  	100%{
    	background-position:-10000px 5000px;
  	}
}


.logo2{
  	display: none;
}

.logo{
	  text-align : center;
  	display: block;
  	width: 100%;
  	animation-name: fadeIn ;
  	animation-duration: 1.5s;
  	animation-delay: 0.5s;
  	animation-fill-mode: both;
}

.logo img{
  	width: 80%;
}

@keyframes fadeIn { /*animetion-nameで設定した値を書く*/

  	0% {
		opacity: 0
	}
	/*アニメーション開始時は不透明度0%*/
 	100%{
		opacity: 1
	}
	/*アニメーション終了時は不透明度100%*/
}

/*.top_background2{
	position:absolute;
	top:100px;
	left:50%;
	right:0;
	bottom:50%;
	width: 100%;
	display:block;
}*/

.star-box {
 position: absolute;
 left: 200px;
 top: 200px;
 height: 100px;
 width: 100px;
 transform: rotateZ(45deg);
}

.star-box2 {
 position: absolute;
 left: 600px;
 top: 600px;
 height: 100px;
 width: 100px;
 transform: rotateZ(55deg);
}

.shooting_star {
  height: 0;
  width: 2px;
  background: linear-gradient(transparent, rgb(255, 255, 255));
  animation-name: shooting;
  animation-duration: 1.0s;
	animation-delay: 1.5s;
	/*animation-iteration-count: 5;
	animation-fill-mode: backwords;*/
  animation-timing-function: linear;

}

.shooting_star2 {
  height: 0;
  width: 2px;
  background: linear-gradient(transparent, rgb(255, 255, 255));
  animation-name: shooting;
  animation-duration: 1.0s;
	animation-delay: 3.5s;
	/*animation-iteration-count: 5;
	animation-fill-mode: backwords;*/
  animation-timing-function: linear;

}


@keyframes shooting {
  0% {
    height: 0;
    opacity: 50%;
  }


  50% {
    height: 150px;
    opacity: 100%;
  }


  100% {
    height: 200px;
    opacity: 0;
  }
}

/*@import url(https://fonts.googleapis.com/css?family=Open+Sans);

.scroll {
	position: absolute;
	top:85%;
	left:80%;
  text-align: right;
  font-size: 2.5em;
  color: #fff;
  letter-spacing: -7px;
  font-weight: 100;
  text-transform: uppercase;
	animation: fadeIn 10s, blur 2s ease-out infinite;
	text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;
}

@keyframes blur {
  from {
    text-shadow:0px 0px 10px #fff,
      0px 0px 10px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #7B96B8,
      0px 0px 150px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px -10px 100px #7B96B8,
      0px -10px 100px #7B96B8;
  }
}
*/

.scroll {
    padding-top: -70px;
		position: absolute;
		top:83%;
		left:50%;
		width: 30px;
	  height: 30px;
	  text-align: center;
	  font-weight: 30;
	  font-size: 1.4em;
	  color: #fff;
		animation-name: fadeIn ;
		animation-duration: 1.5s;
		animation-delay: 3s;
		animation-fill-mode: both;

}
.scroll span {
  position: absolute;
  top: 83%;
  left: 50%;
  width: 30px;
  height: 30px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb 2s infinite;
  animation: sdb 2s infinite;
  box-sizing: border-box;
}

@-webkit-keyframes sdb {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
  20% {
    -webkit-transform: rotate(-45deg) translate(-10px, 10px);
  }
  40% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
}
@keyframes sdb {
  0% {
    transform: rotate(-45deg) translate(0, 0);
  }
  20% {
    transform: rotate(-45deg) translate(-10px, 10px);
  }
  40% {
    transform: rotate(-45deg) translate(0, 0);
  }
}


/* intro_block */
.intro_block{
  height: 100vh;
  width: 100%;
  scroll-snap-align: start;
}

/* intro_block text_block */
.text_block{
  width: 100%;
	text-align: center;
}


.text_content h2 {
  position: relative;
  display: inline-block;
  padding: 0 65px;
  text-align: center;
  color: white;
  font-size: 50px;
}

h2:before,
h2:after {
  position: absolute;
  top: calc(50% - 3px);
  width: 50px;
  height: 6px;
  content: '';
  border-top: solid 2px #FFFFFF;
  border-bottom: solid 2px #FFFFFF;
}

h2:before {
  left: 0;
}

h2:after {
  right: 0;
}

.text_content p {
  position: relative;
  display: inline-block;
  padding: 10px 100px;
  text-align: left;
  color: gray;
  font-size: 20px;
}

/* intro_block button_block */
.button_block {
  display: inline-block;
  margin: 20px 30px;
  padding: 20px 20px;
	text-align: center;
}

.button {
  background: #fff;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: block;
  position: relative;
  overflow: hidden;
  transition: all .35s ease-in-out .35s;
  margin: 0 auto;
  text-align: center;
  font-size: 20px;
  color: #444;
}

.button span {
  display: block;
  padding: 15px 30px;
  background: #fff;
  z-index: 100;
  position: relative;
  transition: all .35s ease-in-out .35s;
}
.button:hover span {
  background: #36B4C7;
  color: #fff;
  transition: all .35s ease-in-out .35s;
}
.button:after {
  bottom: -100%;
  right: -100%;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: #36B4C7;
  transition: all .35s ease-in-out .5s;
}
.button:hover:after {
  right: 0;
  bottom: 0;
  transition: all ease-in-out .35s;
}

.button:hover:before {
  left: 0;
  top: 0;
  transition: all ease-in-out .35s;
}


@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */

	.body{
		font-family: "sans-serif" ;
	}

	.stars {
	  	background:#000 url(../include/stars3.png) repeat top center;
	}


	.star-box2 {
		display: none;
	}

	.shooting_star2 {
		display: none;
	}
	.text_content h2 {
		padding-top: 30px;
	  font-size: 20px;
		font-family: "sans-serif" ;
	}

	h2:before,
	h2::after {
		  top: calc(50% + 10px);
	}

	.text_content p {
	  padding: 40px 30px;
	  font-size: 12px;
		color: #ccc;
		font-family: "sans-serif" ;
	}

	.logo{
		  padding: 150px 0px;
	}

	.logo img{
	  	width: 100%;
	}

	.scroll {
		top:85%;
		left:10%;
	  letter-spacing: 0px;
		text-align: center;
	  font-size: 1.3em;
	}

	.button {
  font-size: 14px;
}

}