#wrapperIn{
  padding-top: 0;
  
}

main{
}

#top-visual{
  min-height: 640px;
  width: 99vw;
  height: 100vh;
  top: 0;
  left: 0;
}

#top-visual #top-copy{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 614px;
  height: 100%;
  padding-top: 100px;
  position: relative;
  left: 10%;
}

#top-visual #top-copy .copy2{
  margin: 40px auto;
  overflow: hidden;
}

#top-visual #top-copy .copy2 span{
  display: inline-block;
  margin-bottom: 36px;
}

#top-visual #top-copy .copy2 span,
#top-visual #top-copy .copy2 span::after {
  animation-delay: .8s;
  animation-iteration-count: 1;
  animation-duration: .8s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}

#top-visual #top-copy .copy2 span {
  position: relative;
  animation-name: clip-text;
  color: #FFF;
  white-space: nowrap;
  cursor: default;
}
#top-visual #top-copy .copy2 span::after {
  content: "";
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e00000;
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  animation-name: text-revealer;
}

#top-visual #top-copy .copy2 span.copy2-2,
#top-visual #top-copy .copy2 span.copy2-2::after {
  animation-delay: 1s;
}


@keyframes clip-text {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}


@keyframes text-revealer {
  
  0%, 50% {
    transform-origin: 0 50%;
  }
  
  60%, 100% {
    transform-origin: 100% 50%;   
  }

  
  60% {
    transform: scaleX(1);
  }
  
  100% {
    transform: scaleX(0);
  }
}

.start-btn{
  -webkit-animation-delay: 1.4s !important;
  animation-delay: 1.4s !important;
}


#video-wrap{
  position: relative;
  position: fixed;
  z-index: -1;
  top: 0;
  right:0;
  left:0;
  bottom:0;
  overflow: hidden;
}

#video-wrap::after{
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fff;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
	transition: 1s all linear;
}

#video-wrap.scroll::after{
  opacity: .8;
}

#video {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 177.77777778vh;
  height: 56.25vw;
  min-height: 100%;
  min-width: 100%;
}

#contents{
  height: calc(100vh - 96px);
}

#contents .layout{
  display: flex;
  justify-content: space-between;
  padding: 0 5%;
  max-width: 1234px;
  margin: auto;
}

#contents h2{
  margin-top: 100px;
  margin-bottom: 100px;
  text-align: center;
}

#contents h2 .enb{
  display: inline-block;
  font-size: 5.4rem;
  border-bottom: 1px solid #000;
  line-height: .8:
  margin-bottom: 20px;
}

#contents h2 .jp{
  display: block;
  font-size: 2rem;
}

#contents .layout .box{
  width: 32%;
}

#contents .layout .box a{
  line-height: 1;
  margin-bottom: 20px;
}

#contents .layout .box h3{
  font-size: 2rem;
  font-weight: bold;
}

#contents .layout .box p{
  font-size: 1.2rem;
}

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

#top-visual{
  min-height: 0;
}

#top-visual #top-copy{
  width: 100%;
  left: 0;
  padding: 0 5%;
}

#contents{
  height: auto;
}

#contents .layout{
  display: block;
  padding-bottom: 50px
}

#contents .layout .box{
  width: 100%;
  margin-bottom: 30px;
}

}