.loader {
  position: relative;
  z-index: 0;
  --c-loader-bg: rgb(153 224 255);
  --c-ball: #ffffff;
  --c-shadow: rgba(0, 0, 0, 0.5);
  --r-ball: 15px;
  --bounce-height: 3em;
  --ball-distance: 2em;
  --duration: 0.6s;

  &-inner {
    width: calc(3 * var(--r-ball) + 2 * var(--ball-distance));
  }

  &-bounce {
    // ボールの基本的な大きさを設定
    // Set the basic size of the ball
    font-size: var(--r-ball);
    // ボール半分左にずらす。（中央揃え）
    // Shift the ball half to the left. (Center alignment)
    position: relative;
    left: calc(50% - 0.5em);
  }

  &-balls {
    width: 300px;
    height: 1em;
  }

  &-ball {
    position: absolute;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: var(--c-ball);
    transform-origin: bottom center;
    animation: kf-ball var(--duration) alternate infinite ease;

    &:nth-child(2) {
      left: calc(-1 * var(--ball-distance));
      animation-delay: calc(var(--duration) / 3);
    }

    &:nth-child(3) {
      left: var(--ball-distance);
      animation-delay: calc(var(--duration) / 3 * 2);
    }
  }

  &-shadows {
    position: relative;
    top: -0.1em;
  }

  &-shadow {
    position: absolute;
    z-index: -1;
    width: 1em;
    height: 0.2em;
    border-radius: 50%;
    background: var(--c-shadow);
    transform-origin: 50%;
    animation: kf-shadow var(--duration) alternate infinite ease;
    filter: blur(0.5px);

    &:nth-child(2) {
      left: calc(-1 * var(--ball-distance));
      animation-delay: calc(var(--duration) / 3);
    }

    &:nth-child(3) {
      left: var(--ball-distance);
      animation-delay: calc(var(--duration) / 3 * 2);
    }
  }
}

@keyframes kf-ball {
  0% {
    bottom: 0;
    border-radius: 4em 4em 2em 2em;
    transform: scale(1.3, 0.25);
  }

  40% {
    border-radius: 50%;
    transform: scale(1);
  }

  100% {
    bottom: var(--bounce-height);
    transform: none;
  }
}

@keyframes kf-shadow {
  0% {
    transform: scaleX(1.3);
  }
  40% {
    transform: scaleX(1);
    opacity: 0.6;
  }
  100% {
    transform: scaleX(0.2);
    opacity: 0.3;
  }
}
