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

#toppage #mainWrap {
  width: 100%;
  background-color: #000;
  transition: 1s 0.5s;
  opacity: 1;
  min-height: inherit;
}
#toppage #mainWrap #mainBox {
 height: 0;
  width: 100%;
  padding-top: 56.28%;
  position: relative;
  margin: 0 auto;
  
  
  
  /*height: 100vh;
  padding-top: 0;*/
}
/*#toppage.loaded #mainWrap {
  opacity: 1;
}*/

#toppage #mainWrap #videoWrap {
position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top:0;
  z-index: 0;
  background-color: #000;
  overflow: hidden;
}
#toppage #mainWrap #videoWrap #movie {
  width: 100%;
  height: 100%;
  
  object-fit:contain;
}
#toppage #mainWrap #videoImgWrap {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top:0;
  z-index: 1;
  display: none;
  overflow: hidden;
}
#toppage #mainWrap #videoImgWrap img {
  width: 100%;
  height: 100%;
  
  object-fit:contain;
}
#toppage #mainWrap #movieButton {
  position: absolute;
  right: 1.5%;
  bottom: 2%;
  color: #fff;
  z-index: 99;
  width: 6em;
	container-type: inline-size;
  
}
#toppage #mainWrap #movieButton a {
  border: rgba(255,255,255,0.6) solid 1px;
  padding: 0 1em;
  transition: 0.3s;
  background-color: rgba(0,0,0,0.6);
  opacity: 1;
  text-align: center;
  color: #fff;
	font-size:14cqw;
}
#toppage #mainWrap #movieButton a:hover {
  opacity: 0.6;
}



/*========Loading===========*/

#toppage .video_wrapper {
    position: relative;
}
#toppage .video_wrapper:not(.js_active)::before {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    content: "";
}
#toppage .video_wrapper:not(.js_active)::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 40px;
    height: 40px;
    background-image: url("../../images/top/loading.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    content: "";
}
#toppage .video_wrapper.js_active::before,
#toppage .video_wrapper.js_active::after {
  display: none;
}

/*#toppage .video_wrapper > video {
    width: 100%;
}*/


@keyframes aniBase {
    0% {
        opacity: 0;
      transform: translateY(40%);
    }
    50% {
        opacity: 1;
      transform: translateY(40%);
    }
  100% {
        opacity: 1;
    transform: translateY(0%);
    }
}

@media screen and (max-width : 959px ){
  #toppage #mainWrap {
     /*height: 0;*/
      /*width: 100%;*/
      /*padding-top: 56.28%;*/
  }
  #toppage #mainWrap #movieButton {
    position: absolute;
    color: #fff;
    z-index: 1;
    width: 5em;

  }

}

@media screen and (max-width : 599px ){
	#toppage #mainWrap #mainBox {
	width: 100%;
      padding-top: 177.78%;
	}
	#toppage #mainWrap #movieButton {
    width: 6em;
		right: 3%;
    bottom: 2%;
  }
}