/* ===============================================
// page-service-support.php (救援事業ページ)
// 「サポートの特長」セクション
// =============================================== */
.service-support-features {
  padding: 60px 0;
  background-color: var(--section-background-color);
  /* 背景色を section-background-color に変更 */
}

.service-support-features .site-inner {
  max-width: 1200px;
  /* Figmaの幅を参考に調整 */
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* セクションタイトルと線のスタイルは既存のものを流用 */

.service-support-features__list {
  display: flex;
  flex-wrap: wrap;
  /* スマホ表示で折り返すように */
  gap: 30px;
  /* アイテム間の隙間 */
  margin-top: 40px;
  /* タイトルからのマージン */
  list-style: none;
  padding: 0;
}

.service-support-features__item {
  background-color: #fff;
  /* アイテムの背景色 (Figmaより薄いグレー) */
  border-radius: 8px;
  padding: 30px;
  padding-top: 45px;
  /* 数字を配置するスペースを確保 */
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  flex: 0 0 calc(25% - 22.5px);
  /* PC表示: 4カラム (gapを考慮) */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  /* 数字の絶対配置の基準 */
}

.service-support-features__item-number-wrapper {
  position: absolute;
  top: -15px;
  /* カードの上にはみ出すように調整 */
  left: 50%;
  /* カードの中央に配置 */
  transform: translateX(-50%);
  /* 中央揃えのための調整 */
  width: 40px;
  /* 円の直径 */
  height: 40px;
  /* 円の直径 */
  background-color: #fff;
  /* 円の背景色 (白) */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  z-index: 1;
  /* アイコンより手前に表示 */
}

.service-support-features__item-number {
  font-size: 1rem;
  /* 数字のフォントサイズ */
  font-weight: 700;
  /* 太字 */
  color: var(--main-color);
  /* 数字の色 (メインカラー) */
}

.service-support-features__item-title {
  font-size: 1.3rem;
  /* タイトルのフォントサイズ */
  font-weight: 700;
  /* 太字 */
  color: var(--main-color);
  /* 文字色を main-color に変更 */
  margin: 0 0 15px 0;
  line-height: 1.4;
}

.service-support-features__item-description {
  font-size: 0.95rem;
  /* 説明文のフォントサイズ */
  color: #555;
  line-height: 1.7;
  margin: 0;
}



/* レスポンシブ対応 */
@media (max-width: 992px) {

  /* やや大きめのタブレットなど */
  .service-support-features__item {
    flex: 0 0 calc(50% - 15px);
    /* 2カラム (gapを考慮) */
  }
}

@media (max-width: 767px) {

  /* スマホ */
  .service-support-features__list {
    gap: 20px;
    /* スマホでは少し隙間を詰める */
  }

  .service-support-features__item {
    flex: 0 0 100%;
    /* 1カラム */
    padding: 20px;
    padding-top: 35px;
    /* スマホ用に調整 */
  }

  .service-support-features__item-number-wrapper {
    top: -10px;
    /* スマホ用に調整 */
    width: 30px;
    height: 30px;
  }

  .service-support-features__item-number {
    font-size: 0.8rem;
  }

  .service-support-features__item-title {
    font-size: 1.2rem;
  }

  .service-support-features__item-description {
    font-size: 0.9rem;
  }
}

/* ↓↓↓ ここから修正・追加 ↓↓↓ */
.service-support-features__item-icon-wrapper {
  width: 100px;
  /* 円の直径 */
  height: 100px;
  /* 円の直径 */
  background-color: #d9d9d9;
  /* 指定された背景色 */
  border-radius: 50%;
  /* 円形にする */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  /* タイトルとのマージン */
  padding: 15px;
  /* アイコンと円の間の実際のパディング値 */
  box-sizing: border-box;
  /* paddingを含めたサイズ計算にする */
}

.service-support-features__item-icon-img {
  display: block;
  /* 余白をなくすため */
  max-width: 100%;
  /* ラッパーからはみ出さないように */
  max-height: 100%;
  /* ラッパーからはみ出さないように */
  object-fit: contain;
  /* アスペクト比を維持して内接 */
}

/* ↑↑↑ ここまで修正・追加 ↑↑↑ */

.service-support-features__item-title {
  font-size: 1.3rem;
  /* タイトルのフォントサイズ */
  font-weight: 700;
  /* 太字 */
  color: var(--main-color);
  /* 数字の色 (メインカラー) */
}

@media (max-width: 767px) {

  /* スマホ */
  .service-support-features__list {
    gap: 20px;
    /* スマホでは少し隙間を詰める */
  }

  .service-support-features__item {
    flex: 0 0 100%;
    /* 1カラム */
    padding: 20px;
    padding-top: 35px;
    /* スマホ用に白丸数字の位置を調整 */
  }

  .service-support-features__item-number-wrapper {
    top: -10px;
    /* スマホ用に調整 */
    width: 30px;
    /* スマホ用に調整 */
    height: 30px;
    /* スマホ用に調整 */
  }

  .service-support-features__item-number {
    font-size: 0.8rem;
    /* スマホ用に調整 */
  }

  /* ↓↓↓ ここから修正・追加 ↓↓↓ */
  .service-support-features__item-icon-wrapper {
    width: 80px;
    /* スマホでの円の直径 */
    height: 80px;
    /* スマホでの円の直径 */
    margin-bottom: 15px;
    padding: 10px;
    /* スマホでのパディング */
  }

  /* ↑↑↑ ここまで修正・追加 ↑↑↑ */

  .service-support-features__item-title {
    font-size: 1.2rem;
    font-weight: 700;
    /* 太字 */
    color: var(--main-color);
    /* 数字の色 (メインカラー) */
  }

  .service-support-features__item-description {
    font-size: 0.9rem;
  }

}