@charset "UTF-8";

/*
 * TOPページMV用、動きのみのCSSです。
 */

.m-mv {
  opacity: 0;
  transition: opacity 1.2s;
}
.m-mv.open {
  opacity: 1;
}

.m-mv__title {
  top: max(calc(-20 / 1920 * 100vw), -20px);
  left: min(calc(480 / 1920 * 100vw), 480px);
  max-width: min(calc(296 / 1920 * 100vw), 296px);
}

.m-mv__pin {
  animation: mv-pin-sway 2s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
  animation-delay: 0.15s;
}
@keyframes mv-pin-sway {
  0% {
    transform: translateY(calc(-60% + 100vw * 0.004)) translateX(-50%);
  }
  100% {
    transform: translateY(calc(-60% + 100vw * -0.004)) translateX(-50%);
  }
}

.m-mv__cloud-balloon2 {
  position: absolute;
  top: 0;
  left: calc(9 / 1920 * 100vw);
  transform: translateY(calc(16 / 1920 * 100vw));
  width: calc(100% - 32 / 1920 * 100vw);
  height: 100%;
}

.m-mv__cloud-balloon picture img {
  /* animation: mv-cloud-balloon-sway 2s cubic-bezier(0.4, 0, 0.6, 1) 0s infinite
    alternate; */
}
.m-mv__cloud-balloon2 picture img {
  /* animation: mv-cloud-balloon-sway 2.5s cubic-bezier(0.4, 0, 0.6, 1) -2s
    infinite alternate; */
}
@keyframes mv-cloud-balloon-sway {
  0% {
    transform: translateY(calc(100vw * 0.003));
  }
  100% {
    transform: translateY(calc(100vw * -0.003));
  }
}

@media (max-width: 767px) {
  .m-mv__title {
    max-width: calc(258 * 1rem / var(--font-size__base));
    padding-top: calc(8 * 1rem / var(--font-size__base));
  }

  @keyframes mv-pin-sway {
    0% {
      transform: translateY(calc(-55% + 100vw * 0.01)) translateX(-50%);
    }
    100% {
      transform: translateY(calc(-55% + 100vw * -0.01)) translateX(-50%);
    }
  }

  .m-mv__cloud-balloon2 {
    display: none;
  }

  @keyframes mv-cloud-balloon-sway {
    0% {
      transform: translateY(calc(100vw * -0.01));
    }
    100% {
      transform: translateY(calc(100vw * 0.01));
    }
  }
}