@charset "utf-8";


.wrapper{
  width: 90%;
  max-width: 48em;
  margin: 0 auto;
}

.top-mv__title{
  margin-top: 15vh;
}
.top-mv__text{
  width: 75%;
  margin-top: 6em;
}
.top__image{
  margin-top: 1.5em;
  overflow: hidden;
  border-radius: 8px;
}
.top__image:first-child{
  margin-top: 3em;
}
.footer{
  margin: 30% 0 28%;
}
.footer__text{
  width: 12em;
  margin: 0 auto;
}


@media (min-width: 768px){
}

@media (min-width: 1024px){
  .wrapper{
    width: 80%;
    max-width: 70em;
  }
  .top-mv__title{
    max-width: 48em;
  }
  .top-mv__text{
    width: 40em;
  }
  .top__image{
    margin-top: 4em;
    border-radius: 16px;
  }
  .top__image:first-child{
    margin-top: 4em;
  }
  .footer {
    margin: 16% 0 14%;
  }
}

.color-wrap{
  position: relative;
  width: 100%;
  max-width: none;
}
.color-video{
  background-image: url(../image/color/noise03.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  overflow: hidden;
}
.color-video video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: color-burn;
}
.color-image{
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 40%;
  mix-blend-mode: difference;
  opacity: 0;
}