#main-visual {
  position: relative;
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
}
#main-visual, .video-wrapper {
  width: 100vw;
  height: 100vh;
  min-width: 100vw;
  overflow: hidden;
}
#main-visual .video-wrapper video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 100vh;
  height: 100%;
  min-width: 100vw;
  min-height: 100vh;
  object-fit: cover;
}
.video-wrapper .sp {
  display: none;
}
@media screen and (max-width: 800px) {
    #design-content{
        height: 100vw;
        min-height: 100vh;
        max-height: 100vh;
        overflow-y: hidden;
    }
   
  #main-visual, .video-wrapper {
    width: 100vw;
    height: 100vh;
    min-width: 100vw;
    overflow: hidden;
    max-height: 100vh;
  }
  #main-visual .video-wrapper video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100vh;
    height: 100%;
    min-width: 100vw;
    min-height: 100vh;
    object-fit: cover;
    max-height: 100vh;
    overflow-y: hidden;
    object-position: 50% 60%;
  }
  .video-wrapper .sp {
    display: block;
  }
  .video-wrapper .web {
    display: none;
  }
}