header {
  /* position: fixed; */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  background-color: #FFF;
}
/* wrap */

.hero {
  position: relative;
}
/* video */

.video-box {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}

/* overlay */

.overlay::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: rgba(0, 0, 0, 0.4);
}
#video-background,
#video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  margin-top: 0;
}
 
#video-background {
  z-index: -2;
}
 
#video-overlay {
  z-index: -1;
}
@media (max-width: 991px) {
  /* .video-box{
    display: none; 
  } */

  .video-box{
    width: 100%;
    padding-bottom: 56.25%;
    height: 0px;
    position: relative;
  }
  #video-background,#video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .hero{
    padding-top: 60.2px;
  }
  /* .video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  } */
  /* .hero{
    background-image: url(./img/main.png);
    background-repeat: no-repeat;
    background-position: 60% center;
    background-size: cover;
    height: 60vh;
    width: 100%;
  } */
  .scroll_area{
    display: none;
  }
}
@media (max-width: 640px) {
  /* .hero{
    background-image: url(./img/main_sp.png);
    background-position: center;
    height: 46vh;
  } */
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
}


/* loader */
/*▼▼ ここから追加する ▼▼*/
.loader-wrap {
	position: fixed;
	display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #fff;
}
/*▲▲ ここまで追加する ▲▲*/

.loader,
.loader:before,
.loader:after {
	background: #ffffff;
	-webkit-animation: load1 1s infinite ease-in-out;
	animation: load1 1s infinite ease-in-out;
	width: 1em;
	height: 4em;
}
.loader {
	color: #ffffff;
	text-indent: -9999em;
	margin: 88px auto;
	position: relative;
	font-size: 11px;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}
.loader:before,
.loader:after {
	position: absolute;
	top: 0;
	content: '';
}
.loader:before {
	left: -1.5em;
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}
.loader:after {
	left: 1.5em;
}
@-webkit-keyframes load1 {
	0%,
	80%,
	100% {
		box-shadow: 0 0;
		height: 4em;
	}
	40% {
		box-shadow: 0 -2em;
		height: 5em;
	}
}
@keyframes load1 {
	0%,
	80%,
	100% {
		box-shadow: 0 0;
		height: 4em;
	}
  	40% {
		box-shadow: 0 -2em;
		height: 5em;
	}
}