@charset "UTF-8";

/* =========================================
   Problem Section
   ========================================= */
.problem {
  position: relative;
  background-image: url('../images/bg_problem.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 10.0rem;
  padding-bottom: 11.1rem;
}

.problem__title {
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 3.4rem;
  color: var(--color-white);
  text-align: center;
  letter-spacing: 0.1em;
  line-height: 1.5;
}

.problem__content {
  position: relative;
  margin-top: 8.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.problem__line {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 48.4rem;
  z-index: 1;
}

.problem__line img {
  height: 100%;
  width: auto;
  display: block;
}

.problem__list {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3.0rem;
  width: 100%;
  align-items: center;
}

.problem__item {
  width: 62.8rem;
  height: 7.0rem;
  background-color: var(--color-white);
  border-radius: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 2.0rem;
  gap: 0.8rem;
}

.problem__icon {
  width: 6.5rem;
  height: 4.5rem;
  flex-shrink: 0;
}

.problem__text {
  font-family: var(--font-sub-sans);
  font-weight: 500;
  font-size: 2.0rem;
  color: #333333;
  line-height: 1.5;
  letter-spacing: 0;
}

/* =========================================
   Tablet & SP (max-width: 1024px)
   ========================================= */
@media screen and (max-width: 1024px) {
  .problem {
    background-image: url('../images/bg_problem_sp.jpg');
    padding-top: 6.0rem;
    padding-bottom: 7.0rem;
  }

  .problem__title {
    font-size: 2.2rem;
    line-height: calc(34 / 22);
    letter-spacing: 0.2em;
  }

  .problem__content {
    margin-top: 5.0rem;
  }

  .problem__line {
    height: 39.6rem;
  }

  .problem__list {
    gap: 1.6rem;
  }

  .problem__item {
    width: 33.0rem;
    height: 7.3rem;
    border-radius: 0.6rem;
    padding-left: 1.0rem;
    gap: 0.4rem;
  }

  .problem__icon {
    width: 5.1rem;
    height: 3.7rem;
  }

  .problem__text {
    font-size: 1.6rem;
    line-height: calc(24 / 16);
  }
}