/* ---------------------------
コンセプトセクション&カテゴリセクション共通
----------------------------*/

.concept-section .text-read,
.category-section .text-read {
  margin-top: 2em;
}

.concept-section .text-read .emphasis,
.category-section .text-read .emphasis {
  font-weight: 700;
  font-size: 2.2rem;
}

/* ---------------------------
コンセプトセクション
----------------------------*/
.concept-section {
  /* margin-top: 70px; */
  background-image: url(../images/top/bg-concept-section.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.concept-section h3 img {
  max-height: 25px;
}
.concept-section h4 {
  color: #1a274e;
}

.concept-section figure {
  margin: 20px 0 40px;
}
.list-concept-purpose {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 1.5em 0;
  /* カウンターをリセット */
  counter-reset: concept-counter;
}

.list-concept-purpose > li {
  width: 48%;
  background-color: rgba(255, 255, 255, 0.4);
  padding: 4em 2em 8em;
  padding-bottom: 3em;
  background-image: url(../images/top/bg-concept-purpose01.svg);
  background-repeat: no-repeat;
  background-position: 90% 90%;
  background-size: 30%;
  /* カウンターの表示用に相対位置を指定 */
  position: relative;
}

@media screen and (max-width: 640px) {
  .list-concept-purpose {
    gap: 15px;
  }
  .list-concept-purpose > li {
    width: 100%;
  }
}

.list-concept-purpose > li::before {
  /* カウンターをインクリメント */
  counter-increment: concept-counter;
  /* カウンターの内容を表示 */
  content: counter(concept-counter);
  /* 擬似要素の位置・デザイン */
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.5em;
  font-weight: 700;
  color: #ffcd00; /* お好みで変更ください */
}

.list-concept-purpose > li:nth-of-type(2) {
  background-image: url(../images/top/bg-concept-purpose02.svg);
}

/* 入れ子のul内のliに横線マークを表示 */
.list-concept-purpose > li ul li {
  position: relative;
  padding-left: 2em; /* 横線分だけ余白を確保 */
}

.list-concept-purpose > li ul li span {
  font-weight: 700;
}

.list-concept-purpose > li ul li::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 2px; /* 横線の太さ。必要に応じて変更 */
  background-color: #000; /* 横線の色。必要に応じて変更 */
  /* テキストと揃えるためのマージンや位置調整 */
  position: absolute;
  left: 0;
  top: 10px;
}