/* ! normalize.css v1.0.0 | MIT License | git.io/normalize */
@charset "UTF-8";

html{
	background: #000;
}

 .loadingWrap {
 width: 100%;/*100%で全画面表示*/
 height: 100%;/*100%で全画面表示*/
 background: #fff;/*背景色*/
 position: fixed;
 top: 0;/*画面上部からの位置*/
 left: 0;/*画面左部からの位置*/
 z-index: 9999;/*レイヤー(この他にpositionを使用していない場合は不要)*/
}
.loadingWrap .loader {
	position: absolute;
    top: 50%;
    left: 50%;
	margin: auto;/*画像位置調整(-画像高さの半分 0 0 -画像幅の半分)*/
}

.wrap {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  align-items: center;
}


.covervid-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* ==========================================================================
Buttons
========================================================================== */
.learn-btn, .download-btn {
	width: 100%;
	height: auto;
	display: block;
    padding: 18px 0;
    border: 2px solid #000;
    border-radius: 3px;
    color: #000;
    font-size: 14px;
	font-family: 'Mallanna', sans-serif;
	letter-spacing: 0.1em;
}

.learn-btn:hover,.learn-btn:focus {
    color: #555;
	border-color:#555;
    text-decoration: none;
}

.read-more-btn {
    display: inline-block;
    color: #311436;
    text-transform: uppercase;
    font-weight: 400;
}
.read-more-btn i, .download-btn i {
    margin-left: 5px;
	color:#fff;
	font-size:1.3em;
}
.showcase .download-btn {
    margin-top: 50px
}
.download .download-btn {
    margin-top: 25px
}

.back_g{
	/*background: url(../img/top_animation/bg.jpg);*/
	background: #030612;
	background-position: bottom;
	background-size: auto 100%;
	height: 100vh;
	width: 100vw;
}

.back_b{
	background: #000;
	height: 100vh;
	width: 100vw;
	z-index: 2;
	opacity: 0;
	transition-duration: 0.5s;
}

.skip_b{
	padding: 5px 20px;
	z-index: 3;
	top: 30px;
	left: 30px;
	color: #fff;
	border: 1px solid #fff;
}

/* ==========================================================================
Hero
========================================================================== */

.hero {
    position: relative;
    padding: 0 0 0 0;
    color: #FFF;
	background:none;
	margin: 0 auto;
	max-width: 1500px;
}


.mist{
transition-duration:4.5s !important;
transition-delay:1.5s !important;
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index:10;
  pointer-events: none;
}

.mist video {
  position: fixed;
  right: 0;
  top: 0;
    width: 120%;
    height: 120%;
}

#scroll{
    top:15.8%;
	width: 100%;
	height: 100%;
	display: block;
}

.hero .container {
	top: 10%;
	position: relative;
	width:auto;
	margin:0;
	padding:0;
}

.hero .images{
	width:100%;
	margin:0 auto;
	padding:0;
}

.hero video {
	width: 100%;
	height: auto;
	pointer-events: none;
}

.hero img {
	width: 100%;
	height: auto;
	pointer-events: none;
	top: 0;
	left: 0;
}

.hero .visual{
	transition-delay: 5s;
	transition-duration: 1s;
	top: 0;
	left: 0;
}

.hero .b_visual{
	opacity: 0;
	top: -2%;
	left: 0;
	transition-duration: 0.5s;
}

.hero .top_img9,
.hero .top_img10{
	opacity: 0;
	top: 0%;
	left: 0;
	transition-duration: 1.5s;
}

.hero .top_img10{
	opacity: 0;
	top: 0%;
	left: 0;
	transition-duration: 1.5s;
}

.hero .top_img11{
	opacity: 0;
	top: 0;
	left: 0;
	transition-duration: 2.5s;
}

/*#mov01{	transition-delay: 7.5s;}
#mov02{	transition-delay: 7.6s;}
#mov03{	transition-delay: 7.7s;}
#mov04{	transition-delay: 7.8s;}
#mov05{	transition-delay: 7.9s;}
#mov06{	transition-delay: 8s;}
*/

#mov01{	transition-delay: 7s;}
#mov02{	transition-delay: 7.1s;}
#mov03{	transition-delay: 7.2s;}
#mov04{	transition-delay: 7.3s;}
#mov05{	transition-delay: 7.4s;}
#mov06{	transition-delay: 7.5s;}
#mov07{	transition-delay: 4s;}
#mov08{	transition-delay: 8.5s;}
#mov09{	transition-delay: 10.5s;}




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

.gr{
	opacity: 0;
}
	
}