/* ===========================================
 * PROBLEM
 * ======================================== */

.problem {
  padding: 6rem 0 9rem;
  background-color: var(--bg-gray);
  .inner {
    position: relative;
  }
  .list {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    margin-top: 4rem;
  }
  .item {
    background-color: var(--bg-white);
    padding: 2.4rem;
    text-align: center;
    border: 1px solid var(--border-gray);
  }
  .num  {
    font-family: "Roboto", "Yu Gothic Medium", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
    font-weight: 100;
    font-size: 2.4rem;
    color: var(--text-main);
  }
  .text {
    text-align: center;
    font-size: 1.8rem;
    font-weight: var(--text-bold);
    line-height: 1.5;
  }
  .img {
    position: absolute;
    bottom: -9rem;
    width: 7rem;
    right: 50%;
    transform: translateX(50%);
  }
  .inner > ul > li > button {
    display: flex;
    align-items: center;
    gap: .4rem;
    appearance: none;
    margin-left: auto;
    padding: 0;
    background: transparent;
    border: none;
    color: #1f665e;
    font-weight: 700;
    font-size: 1.4rem;
    text-decoration: underline;
    cursor: pointer;
    transition: opacity 0.25s;
  }
  .inner > ul > li > button:hover {
    opacity: 0.8;
  }
  .inner > ul > li > div + button {
    margin-top: 2rem;
  }
  .inner > ul > li > button > span {
    display: block;
    position: relative;
    height: 1.6rem;
    width: 1.6rem;
    background-color: #1f665e;
    border-radius: 50%;
    color: #1f665e;
  }
  .inner > ul > li > button > span::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: .4rem;
    height: .4rem;
    top: 50%;
    left: 50%;
    border-top: solid 1px #fff;
    border-right: solid 1px #fff;
    transform: translate(-70%, -50%) rotate(45deg);
  }
}

@media screen and (min-width:769px) {
  .problem {
    .list {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 2rem;
    }
    .item {
      width: calc((100% - 2rem) / 2);
    }
    .img {
      width: 10rem;
    }
    > .inner > ul > li {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
}

@media screen and (min-width:1024px) {
  .problem {
    padding: 10rem 0;
    .inner {
      max-width: 108rem;
      margin: 0 auto;
    }
    .item {
      width: calc((100% - 4rem) / 3);
      padding: 2.8rem 2.4rem 3.6rem;
    }
    .img {
      width: 16rem;
      right: 5rem;
      bottom: -10rem;
    }  
  }
}