/* カードコンテナ */
.level-cards {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 407px;
  bottom: -85vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 30%);
  gap: 63px;
  z-index: 10;
  opacity: 0;
}

.slide-in3 {
  animation: slideIn3 0.8s ease-out forwards;
  animation-delay: 0.3s;
}

@keyframes slideIn3 {
  0% {
    opacity: 0;
    transform: translate(-50%, 90%);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, 30%);
  }
}

.card-bg-image {
  position: absolute;
  width: 633px;
  height: 1055px;
  top: -24%;
  left: 50%;
  transform: translateX(-53%);
  background-image: url(../../images/topPage/kentei_decoration_3.svg);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -3;
}

/* カード */
.card {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 410px;
  height: 138px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--white);
}

/* カード内の要素 */
.level-info-container {
  display: flex;
  flex-direction: column;
  align-self: center;
  width: 100%;
  height: 110px;
  gap: 12px;
}

.level-info,
.exam-info {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}

.level-info span {
  font-family: var(--primary-font);
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.exam-info span {
  font-family: var(--primary-font);
  font-size: 50px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.exam-info .subtitle {
  width: 101px;
  height: 50px;
}

.level-info .stars {
  display: flex;
  flex-direction: row;
  gap: 4px;
}

.level-info .star-outline {
  width: 24px;
  height: 24px;
  background-image: url(../../images/topPage/sutar_outline.svg);
  background-size: 100%;
  background-repeat: no-repeat;
}

.level-info .star-fill {
  width: 24px;
  height: 24px;
  background-image: url(../../images/topPage/star_fill.svg);
  background-size: 100%;
  background-repeat: no-repeat;
}

.challenge-button {
  display: block;
  width: 137px;
  height: 137px;
  color: var(--white);
  cursor: pointer;
  z-index: 10;
}

.challenge-button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.challenge-button img.hover {
  display: none;
}

.challenge-button:hover img.default {
  display: none;
}

.challenge-button:hover img.hover {
  display: inline;
}

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

  .level-cards {
    width: calc(410 * (100vw / 767));
    gap: calc(63 * (100vw / 767));
  }

  .card {
    height: calc(138 * (100vw / 767));
  }

  .card-bg-image {
    width: calc(633 * (100vw / 767));
    height: calc(1055 * (100vw / 767));
  }

  .exam-info span {
    font-size: calc(50 * (100vw / 767));
  }

  .exam-info .subtitle {
    width: calc(101 * (100vw / 767));
    height: calc(50 * (100vw / 767));
  }

  .challenge-button {
    width: calc(137 * (100vw / 767));
    height: calc(137 * (100vw / 767));
  }

  .level-info-container {
    height: calc(110 * (100vw / 767));
    gap: calc(12 * (100vw / 767));
  }

  .level-info,
  .exam-info {
    gap: calc(16 * (100vw / 767));
  }

  .level-info span {
    font-size: calc(14 * (100vw / 767));
  }

  .level-info .star-outline,
  .level-info .star-fill {
    width: calc(24 * (100vw / 767));
    height: calc(24 * (100vw / 767));
  }
}