*::before,
*::after {
  box-sizing: border-box;
}

* {
  padding: 0;
  margin: 0;
}

html {
  font-size: calc(100vw / 140);
}

body {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  font-size: calc(100vh / 140);
  line-height: 1;
  font-feature-settings: "palt";
  background: #fff;
  color: #000;
  text-size-adjust: 100%;
  overflow: hidden;
}

.transparent {
  opacity: 0;
}

.catch {
  position: absolute;
  background-image: url(img/catch_pc.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 22%;
  width: 22%;
  left: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
  animation-name: catch;
  animation-duration: 6.4s;
  animation-delay: 1.4s;
  animation-fill-mode: both;
  animation-timing-function: linear;
  z-index: -99;
  will-change: opacity, transform;
}

@keyframes catch {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  25% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    display: none;
  }
}

.kv {
  --x: 0px;
  --y: 0px;
  z-index: 9999;
}

.kv .logos * {
  z-index: 9999;
  position: absolute;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  transform-origin: center;
  will-change: transform, opacity, background-position;
}

.kv .logos .logo {
  position: absolute;
  background-image: url(img/logo.png);
  background-origin: center;
  background-position-x: calc(38% + var(--x) * -0.2);
  background-position-y: calc(47% + var(--y) * -0.2);
  background-repeat: no-repeat;
  background-size: 30% auto;
  height: 100%;
  width: 100%;
  top: 0%;
  left: 0%;
}

.kv .logos .logo10 {
  position: absolute;
  background-image: url(img/logo10.png);
  background-origin: center;
  background-position: top right;
  background-repeat: no-repeat;
  width: 14rem;
  height: 14rem;
  top: 1.4rem;
  right: 1.4rem;
}

.kv .glow {
  z-index: -9;
}

.kv .glow * {
  z-index: -9;
  position: absolute;
  height: 100%;
  width: 100%;
  background: transparent;
  opacity: 0.62;
  border-radius: 50%;
  will-change: opacity, transform;
}

.kv .glow .honoka {
  top: 0;
  right: 0;
  height: 110%;
  width: 110%;
  transform: translate(50%, -50%);
  background: radial-gradient(ellipse at center, #f7d67d 0%, transparent 70%);
}

.kv .glow .shizuku {
  left: 0;
  bottom: 0;
  transform: translate(-50%, 50%);
  background: radial-gradient(ellipse at center, #ba88e7 0%, #ba88e7 26%, transparent 70%);
}

.kv .glow .miyuki {
  right: 0;
  bottom: 0;
  height: 90%;
  width: 90%;
  transform: translate(50%, 50%);
  background: radial-gradient(ellipse at center, #86dfe7 0%, #86dfe7 40%, transparent 70%);
}

.kv .konva {
  z-index: 8999;
}

.kv-sp {
  z-index: 9999;
}

.kv-sp .poster {
  position: absolute;
  background-image: url(img/kv.jpg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  z-index: 9;
}

.animated {
  animation-fill-mode: both;
}

.animated.fadeIn {
  animation-name: fadeIn;
  animation-duration: 1.4s;
  animation-timing-function: ease-in-out;
}

.animated.fadeInGlow {
  animation-name: fadeIn;
  animation-duration: 3s;
  animation-timing-function: ease-out;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media screen and (min-aspect-ratio: 7/6) {
  .kv {
    display: block;
  }
  .kv-sp {
    display: none;
  }
}

@media screen and (max-aspect-ratio: 7/6) {
  .kv {
    display: none;
  }
  .kv-sp {
    display: block;
  }
}