.problems-title {
  margin: 0;
  padding: 0;
  font-size: 2.4rem; /*文字サイズ。240%。*/
  font-weight: normal; /*h要素のデフォルトの太字を標準に*/
  margin-bottom: 5vw; /*下にスペースを空ける*/
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
}

.problems-title .title {
  font-size: 1.2rem;
}

@media screen and (min-width: 330px) {
  .problems-title .title {
    font-size: 1.5rem;
  }
}
@media screen and (min-width: 430px) {
  .problems-title .title {
    font-size: 2rem;
  }
}

@media screen and (min-width: 550px) {
  .problems-title .title {
    font-size: 2.5rem;
  }
}

.sub-text {
  display: inline-block;
  font-size: 0.9rem; /*文字サイズ80%*/
  opacity: 0.6; /*透明度。色が60%出た状態。*/
  letter-spacing: 0.1rem; /*文字間隔を少しだけ広く*/
  padding-top: 2rem; /*上に空ける余白。ラインとの間の余白調整です。お好みで。*/
}

.problems-grid {
  display: grid;
  grid-template-columns: repeat(
    2,
    1fr
  ); /*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
  gap: 3vw;
}

@media screen and (min-width: 800px) {
  /*listブロック全体を囲むブロック*/
  .problems-grid {
    display: grid;
    grid-template-columns: repeat(
      3,
      1fr
    ); /*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
    gap: 3vw;
  }
}

.problems-grid .list * {
  margin: 0;
  padding: 0;
}

/*ボックス１個あたり*/
.problems-grid .list {
  display: grid;
  margin-bottom: 2rem; /*ボックスの下に空けるスペース*/
}

/*ボックス内のp要素*/
.problems-grid .list p {
  font-size: 0.85rem; /*文字サイズを85%に*/
  line-height: 1.5; /*行間を狭くする*/
  font-size: 10px;
}
@media screen and (min-width: 400px) {
  .problems-grid .list p {
    font-size: 1rem;
  }
}

@media screen and (min-width: 600px) {
  .problems-grid .list p {
    font-size: 1.2rem;
  }
}

/*ボックス１個あたり*/
.problems-grid .list {
  padding: 1rem; /*ボックス内の余白。１文字分。*/
  background: #f0f0f0; /*背景色*/
  color: var(--primary-color);
  grid-template-rows: auto 1fr auto; /*１つ目（この場合はfigure要素のサイズ）と「詳しくみる」ボタンの高さは自動に、２つ目（この場合はtextブロック））を残った幅で使う*/
  /* box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1); */
  /* ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.1は色が10%出た状態。*/
}

/*ボックス内のfigure画像*/
.problems-grid .list figure {
  margin: -1rem; /*画像を枠いっぱいに表示させる為に上の「.problems-grid .list」のpadding分をネガティブマーインで指定*/
  background-color: #f0f0f0;
}

/* ==============================
   おまかせください
============================== */
.leave-it-to-us-grid {
  display: grid;
}

@media screen and (min-width: 700px) {
  .leave-it-to-us-grid {
    display: grid;
    grid-template-columns: repeat(
      3,
      1fr
    ); /*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
    gap: 3vw;
  }
}

.leave-it-to-us {
  color: #fff;
  background-color: black;
  padding: 40px;
}
.leave-it-to-us .title {
  margin: 0;
  position: relative;
  display: inline-block;
  height: 100%;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /*テキストの影。右へ、下へ、ぼかし幅、0,0,0は黒のことで0.3は色が30%出た状態。*/
  font-size: 1.7rem;
}
.leave-it-to-us .text {
  border-top: 1px solid #fff;
  padding: 10px;
  font-size: 1.2rem;
}

@media screen and (min-width: 360px) {
  .leave-it-to-us .title {
    font-size: 2.5rem;
  }
  .leave-it-to-us .text {
    font-size: 1.4rem;
  }
}

@media screen and (min-width: 800px) {
  .leave-it-to-us .title {
    font-size: 4rem;
  }
  .leave-it-to-us .text {
    font-size: 1.6rem;
  }
}