.levels {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 1550px;
  padding: var(--section-padding);
}

.level-bg-image {
  position: absolute;
  width: 100%;
  height: 148%;
  top: -9vh;
  background-image: url(../../images/topPage/kentei_background.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: -50;
}

.level-bg-cloud {
  position: absolute;
  width: 200vw;
  height: 100%;
  top: -400px;
  background-image: url(../../images/topPage/kentei_cloud.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  transform: translateX(-50vw);
  z-index: -45;
}

.level-bg-rain {
  position: absolute;
  top: -8%;
  width: 3000px;
  height: 140%;
  background-image: url(../../images/animation/top_rain_anim.gif);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  justify-self: center;
  z-index: -45;
  left: 50%;
  transform: translateX(-50%);
  animation: rainScroll 3s linear infinite;
}

.level-bg-decoration-1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-75%, -80%);
  background-image: url(../../images/topPage/kentei_decoration_1.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  z-index: -40;
}

.level-bg-decoration-2 {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(75%, -95%);
  background-image: url(../../images/topPage/kentei_decoration_2.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  z-index: -30;
}

.level-bg-decoration-1,
.level-bg-decoration-2 {
  opacity: 0;
  /* 初期状態は非表示 */
}


.slide-in1 {
  animation: slideIn1 0.8s ease-out forwards;
}

.slide-in2 {
  animation: slideIn2 0.8s ease-out forwards;
  animation-delay: 0.3s;
}

@keyframes slideIn1 {
  0% {
    opacity: 0;
    transform: translate(-100%, 20%);
  }

  100% {
    opacity: 1;
    transform: translate(-75%, -80%);
  }
}

@keyframes slideIn2 {
  0% {
    opacity: 0;
    transform: translate(100%, 20%);
  }

  100% {
    opacity: 1;
    transform: translate(75%, -95%);
  }
}

.ex1-hidden-panel {
  position: absolute;
  width: 773px;
  height: 520px;
  top: 50%;
  left: 50%;
  transform: translate(-45%, -30%);
  background-image: url(../../images/topPage/kentei_hide_ex.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  z-index: 200;
  pointer-events: none;
  display: flex;
}

/* PC表示のレスポンシブ */
@media screen and (min-width: 768px) {
  .level-bg-decoration-1 {
    width: 745px;
    height: 950px;
  }

  .level-bg-decoration-2 {
    width: 423px;
    height: 449px;
  }
}

@media screen and (min-width: 3000px) {
  .level-bg-image {
    width: 100%;
    height: 160%;
  }
}

/* モバイル表示のレスポンシブ */
@media screen and (max-width: 767px) {
  .levels {
    height: 120vh;
  }

  .level-bg-decoration-1 {
    width: calc(745 * (100vw / 767));
    height: calc(950 * (100vw / 767));
  }

  .level-bg-decoration-2 {
    width: calc(423 * (100vw / 767));
    height: calc(449 * (100vw / 767));
  }

  .ex1-hidden-panel {
    width: 200%;
    transform: translate(-45%, -40%);
  }
}