#mainvisual {
  width: 100%;
  height: 100vh;
  max-height: 1080px;
  aspect-ratio: 1920/1080;
  overflow: hidden;
  position: fixed;
  top: 0;
  z-index: 0;
}
#mainvisual::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(../img/common/noise.png);
  background-size: 150px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  mix-blend-mode: multiply;
}
#mainvisual .inner {
  pointer-events: none;
}
#mainvisual .background {
  width: 100%;
  inset: 0;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: fixed;
  top: 0;
}
#mainvisual .background.is-left {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
#mainvisual .background.is-left .bg_wrap {
  position: relative;
}
@media screen and (min-width: 769px) {
  #mainvisual .background.is-left .bg_wrap {
    right: calc(min(40 / 1320 * 100vw, 40px) * -1);
  }
}
#mainvisual .background .bg_wrap {
  height: 100%;
  max-height: 1080px;
  aspect-ratio: 1522/1080;
  position: absolute;
  aspect-ratio: 1720/1080;
  right: calc(min(170 / 1320 * 100vw, 170px) * -1);
  margin: auto;
}
@media screen and (min-width: 1921px) {
  #mainvisual .background .bg_wrap {
    left: min(390 / 1320 * 100vw, 390px);
    right: 0;
  }
}
@media screen and (max-width: 768px) {
  #mainvisual .background .bg_wrap {
    right: 0;
  }
}
#mainvisual .background .bg_img {
  width: 100%;
  height: 100%;
  background: url(../img/top/mv/background_pc.png) no-repeat left top;
  background-size: auto 100%;
}
#mainvisual .background .box_parts {
  z-index: 5;
}
#mainvisual .background .box_parts .people {
  position: absolute;
}
#mainvisual .background .box_parts .people.people01 {
  width: calc(89 / 1720 * 100%);
  top: calc(266 / 1080 * 100%);
  left: calc(150 / 1720 * 100%);
}
#mainvisual .background .box_parts .people.people02 {
  width: calc(89 / 1720 * 100%);
  top: calc(235 / 1080 * 100%);
  left: calc(444 / 1720 * 100%);
  aspect-ratio: 89/269;
}
#mainvisual .background .box_parts .people.people02 .sprite {
  width: 100%;
  height: 100%;
  background-image: url(../img/top/mv/people02.png);
  background-repeat: no-repeat;
  background-size: 800% 100%;
}
#mainvisual .background .box_parts .people.people03 {
  width: calc(169 / 1720 * 100%);
  top: calc(182 / 1080 * 100%);
  left: calc(780 / 1720 * 100%);
  aspect-ratio: 169/236;
}
#mainvisual .background .box_parts .people.people03 .sprite {
  width: 100%;
  height: 100%;
  background-image: url(../img/top/mv/people03.png);
  background-repeat: no-repeat;
  background-size: 400% 100%;
}
#mainvisual .background .box_parts .people.people04 {
  width: calc(133 / 1720 * 100%);
  top: calc(854 / 1080 * 100%);
  left: calc(759 / 1720 * 100%);
  aspect-ratio: 133/217;
}
#mainvisual .background .box_parts .people.people04 .sprite {
  width: 100%;
  height: 100%;
  background-image: url(../img/top/mv/people04.png);
  background-repeat: no-repeat;
  background-size: 600% 100%;
}
#mainvisual .background .box_parts .people.people05 {
  width: calc(68 / 1720 * 100%);
  top: calc(540 / 1080 * 100%);
  left: calc(1414 / 1720 * 100%);
  aspect-ratio: 68/185;
}
#mainvisual .background .box_parts .icon {
  position: absolute;
}
#mainvisual .background .box_parts .icon.icon01 {
  width: calc(46 / 1720 * 100%);
  top: calc(160 / 1080 * 100%);
  left: calc(244 / 1720 * 100%);
  -webkit-animation: floating-y 1.2s ease-in-out infinite alternate;
          animation: floating-y 1.2s ease-in-out infinite alternate;
}
#mainvisual .background .box_parts .icon.icon02 {
  width: calc(52 / 1720 * 100%);
  top: calc(341 / 1080 * 100%);
  left: calc(614 / 1720 * 100%);
  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
}
#mainvisual .background .box_parts .icon.icon03 {
  width: calc(61 / 1720 * 100%);
  top: calc(433 / 1080 * 100%);
  left: calc(635 / 1720 * 100%);
  -webkit-animation: floating-y 1.4s ease-in-out infinite alternate;
          animation: floating-y 1.4s ease-in-out infinite alternate;
}
#mainvisual .background .box_parts .icon.icon04 {
  width: calc(58 / 1720 * 100%);
  top: calc(919 / 1080 * 100%);
  left: calc(683 / 1720 * 100%);
  animation: floating-y 1.2s ease-in-out infinite alternate-reverse;
}
#mainvisual .background .box_parts .icon.icon05 {
  width: calc(58 / 1720 * 100%);
  top: calc(790 / 1080 * 100%);
  left: calc(863 / 1720 * 100%);
  -webkit-animation: floating-y 1.8s ease-in-out infinite alternate;
          animation: floating-y 1.8s ease-in-out infinite alternate;
}
#mainvisual .background .box_parts .icon.icon06 {
  width: calc(49 / 1720 * 100%);
  top: calc(546 / 1080 * 100%);
  left: calc(1338 / 1720 * 100%);
  animation: floating-y 1.4s ease-in-out infinite alternate-reverse;
}
@-webkit-keyframes floating-y {
  0% {
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
  }
  100% {
    -webkit-transform: translateY(10%);
            transform: translateY(10%);
  }
}
@keyframes floating-y {
  0% {
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
  }
  100% {
    -webkit-transform: translateY(10%);
            transform: translateY(10%);
  }
}
@media screen and (max-width: 768px) {
  #mainvisual {
    width: 100%;
    height: initial;
    max-height: 1334px;
    aspect-ratio: 750/1334;
  }
  #mainvisual .background {
    bottom: auto !important;
  }
  #mainvisual .background.is-left {
    padding-left: 0;
  }
  #mainvisual .background .bg_wrap {
    width: 100%;
    height: auto;
    max-height: initial;
    aspect-ratio: 750/855;
    top: 0;
  }
  #mainvisual .background .bg_img {
    height: 100%;
    background: url(../img/top/mv/background_sp.png) no-repeat right top;
    background-size: 100%;
  }
  #mainvisual .background .box_parts .people.people01 {
    width: min(57 / 750 * 100vw, 57px);
    top: 25.3%;
    left: 6.8%;
  }
  #mainvisual .background .box_parts .people.people02 {
    width: min(59 / 750 * 100vw, 59px);
    top: 22.3%;
    left: 31.5%;
  }
  #mainvisual .background .box_parts .people.people03 {
    width: min(107 / 750 * 100vw, 107px);
    top: 19.3%;
    left: 60.1%;
  }
  #mainvisual .background .box_parts .people.people04 {
    width: min(83 / 750 * 100vw, 83px);
    top: 76%;
    left: 38.6%;
  }
  #mainvisual .background .box_parts .people.people05 {
    width: min(42 / 750 * 100vw, 42px);
    top: 52.7%;
    right: 0.5%;
    left: auto;
  }
  #mainvisual .background .box_parts .icon.icon01 {
    width: min(30 / 750 * 100vw, 30px);
    top: 16%;
    left: 15%;
  }
  #mainvisual .background .box_parts .icon.icon02 {
    width: min(32 / 750 * 100vw, 32px);
    top: 30%;
    left: 46%;
  }
  #mainvisual .background .box_parts .icon.icon03 {
    width: min(39 / 750 * 100vw, 39px);
    top: 37.4%;
    left: 47.6%;
  }
  #mainvisual .background .box_parts .icon.icon04 {
    width: min(37 / 750 * 100vw, 37px);
    top: 80%;
    left: 32%;
  }
  #mainvisual .background .box_parts .icon.icon05 {
    width: min(38 / 750 * 100vw, 38px);
    top: 70.2%;
    left: 47.5%;
  }
  #mainvisual .background .box_parts .icon.icon06 {
    width: min(32 / 750 * 100vw, 32px);
    top: 51.2%;
    right: 8.2%;
    left: auto;
  }
}

.area_image .img {
  opacity: 0;
}