.mv {
  display: block;
  height: 100svh;
  width: 100%;
  overflow: clip;
}
.mv .video-js .vjs-tech {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 100vw;
  min-height: 100svh;
  -o-object-fit: cover;
     object-fit: cover;
}
.mv .vjs-poster {
  position: fixed;
  background-size: cover;
}

.mvPoster {
  position: absolute;
  display: block;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../images/index/yokoku0_sp.jpg");
}
@media (orientation: landscape) {
  .mvPoster {
    background-image: url("../images/index/yokoku0_pc.jpg");
  }
}

.mvVideo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  width: 100%;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
}

.mv__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  max-width: 15.625rem;
  z-index: 1000;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition-property: top, left, -webkit-transform;
  transition-property: top, left, -webkit-transform;
  transition-property: top, left, transform;
  transition-property: top, left, transform, -webkit-transform;
  -webkit-transition-duration: 0.6s;
          transition-duration: 0.6s;
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
  opacity: 0;
}
@media (min-width: 600px) {
  .mv__logo {
    max-width: 40rem;
  }
}
.mv__logo img {
  -webkit-transition-property: width, height;
  transition-property: width, height;
  -webkit-transition-duration: 0.6s;
          transition-duration: 0.6s;
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
}
.mv__logo.is-start {
  opacity: 1;
}
.mv__logo.is-animated {
  top: 1.5625rem;
  left: 1.5625rem;
  -webkit-transform: unset;
          transform: unset;
}
@media (min-width: 600px) {
  .mv__logo.is-animated {
    top: 2.8125rem;
    left: 2.8125rem;
  }
}
.mv__logo.is-animated img {
  width: auto;
  height: 2rem;
}
@media (min-width: 600px) {
  .mv__logo.is-animated img {
    height: 5rem;
  }
}

/* hero */
.hero {
  position: relative;
  overflow-x: clip;
}

.hero__title {
  position: absolute;
  top: 16.7916041979%;
  left: 41.3333333333%;
  width: 17.3333333333%;
  z-index: 3;
}
@media (min-width: 800px) {
  .hero__title {
    top: 18.75%;
    left: 46.953125%;
    width: 6.015625%;
  }
}

.hero__logo {
  position: absolute;
  bottom: 2.9985007496%;
  left: 8%;
  width: 69.8666666667%;
}
@media (min-width: 800px) {
  .hero__logo {
    bottom: 3.125%;
    left: 3.90625%;
    width: 32.03125%;
  }
}

.hero__catch {
  position: absolute;
  top: 5.9970014993%;
  left: 8%;
  width: 83.2%;
}
@media (min-width: 800px) {
  .hero__catch {
    top: 5.2083333333%;
    left: 28.515625%;
    width: 42.34375%;
  }
}

.hero__line {
  position: absolute;
  z-index: 2;
  top: 16.3418290855%;
  left: 18.9333333333%;
  width: 72.8%;
}
@media (min-width: 800px) {
  .hero__line {
    top: 17.7083333333%;
    left: 34.21875%;
    width: 37.34375%;
  }
}

/* content */
.content {
  position: relative;
  z-index: 1;
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}
.content::after {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  display: block;
  background: center/cover no-repeat url("../images/index/hero_sp.webp");
}
@media (min-width: 992px) {
  .content::after {
    background-image: url("../images/index/hero_pc@2x.webp");
  }
}
@media (min-aspect-ratio: 1280/854) {
  .content::after {
    background-image: url("../images/index/hero_pc@2x.webp");
  }
}/*# sourceMappingURL=index.css.map */