@charset "utf-8";


/* ==========================================================================
	NAVIGATION
	========================================================================== */

/* ==========================================================================
	MAIN
	========================================================================== */

body{
  xoverflow-x:hidden;
}

.masthead {
	position: relative;
	min-width: 300px;
	max-height: 600px;
	overflow: hidden;
}
.masthead-video {
    z-index: 0;
	width: 100%;
	margin-bottom: -7px;
}
.masthead-video img{
	width: 100%;
	height: auto;
}
.masthead-overlay {
  background:url(../images/cover.png);
	position: absolute;
	top: 0; left: 0;
	bottom: 0; right: 0;
	width: 100%;
	height: 100%;
}
.masthead-overlay h2 {
	position: absolute;
	width: 100%;
	text-align: center;
	line-height: 1;
	top: 40%;
	color: #FFF;
	font-size: 300%;
	font-weight: normal;
}
audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}
#scroll {
	position: absolute;
	width: 100%;
	text-align: center;
	line-height: 1;
	bottom: 50px;
}


/* ==========================================================================
	CONTENT
	========================================================================== */

.animation-button02 {
   width:89px;
   height:89px;
	 margin: 0 auto;
}
/*マウスオーバー回転*/
.animation-button02 {
	display: block;
   -webkit-border-radius: 80px;/*Safari & Chrome */
   transiton:all 0.5s ease;/*アニメーションの設定*/
   -webkit-transition: all 0.5s ease;/*Safari & Chrome */
   -moz-transition: all 0.5s ease;/*FireFox */
   -ms-transition: all 0.5s ease;/*IE*/
}
.animation-button02:hover{/*マウスオーバー時*/
   animation: kaiten 1s;
   animation-iteration-count: 2;/*アニメーションの繰り返し回数*/
   -webkit-animation: kaiten 1s; /*Safari & Chrome */
   -webkit-animation-iteration-count: 2;/*Safari & Chrome */
}
 
@keyframes kaiten {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); } 
 
}
@-webkit-keyframes kaiten { /*Safari & Chrome */
   0% { -webkit-transform: rotate(0deg); }
   100% { -webkit-transform: rotate(360deg); } 
}



/* ------------------------------------------------------------
	 PC  
   ------------------------------------------------------------ */

@media screen and (min-width: 769px){


.masthead {
}

/* ---------------------
	 CONTENT
   --------------------- */

}

/* ------------------------------------------------------------
	 TABLET   for - 799px
   ------------------------------------------------------------ */

@media screen and (max-width:768px){


/* ---------------------
	 CONTENT
   --------------------- */
}


/* ------------------------------------------------------------
	 SP　499pxまで
   ------------------------------------------------------------ */

@media screen and (max-width: 640px) {

/* ---------------------
	 MAIN
   --------------------- */
.masthead-overlay h1 {
	top: 30%;
}

.masthead-overlay h1 img {
	width: 80%;
	margin: 0 auto;
}

/* ---------------------
	 CONTENT
   --------------------- */
/*bt*/
.circle-bt {
	width: 50px;
	margin: 0 auto;
}

}