/* カスタムスタイル */
    .rounded-circle-img {
        width: 120px;
        height: 120px;
        object-fit: cover;
        border: 3px solid #f8f9fa; /* 枠線 */
      }
  
      .highlight-text {
        color: #007bff;
        font-weight: bold;
      }
  
      .card-custom {
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
        height: 100%;
      }
  
      .narrow-gap {
        margin-right: 10px; /* 画像と問題提起の間隔を狭く */
      }

      .arrow-icon {
        font-size: 2rem;
        color: #6c757d;
        margin: 0 15px; /* 矢印とカードの間隔調整 */
      }
      .text-shadow {
        text-shadow: 3px 3px 8px rgba(0, 0, 0, 1.9); /* x, y, blur-radius, 色 */
      }



  
      /* 表題部分のテキスト */
      .title-text {
        color: white;
        text-align: center;
        font-weight: bold;
        font-size: 2.5rem;
      }
  
      /* サービスの説明部分 */
      .service-section {
        padding: 4rem 0;
      }
  
      /* 左側の画像（ひし形にカット） */
      .image-cut {
        width: 100%;
        max-width: 300px;
        height: auto;
        aspect-ratio: 3 / 2;
        clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
        object-fit: cover;
      }
  
      /* 高さ調整 */
      .service-text {
        display: flex;
        align-items: center;
        height: 100%;
      }

/* h3ボックスのスタイルを強調 */
.service-text h3 {
    font-size: 1.5rem; /* 文字を少し大きく */
    color: #ffffff; /* 文字色を白に */
    background-color: #007bff; /* 目立つ青色の背景 */
    border-radius: 20px; /* 丸みを少し強調 */
    padding: 15px 20px; /* 内側の余白を調整 */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* 影を強調 */
    display: inline-block; /* ボックスサイズをテキストに合わせる */
    margin: 0; /* 不要な余白を削除 */
}

/* h3とpの間の余白を広げる */
.service-text h3 + p {
    margin-top: 20px; /* 上部の余白を広げる */
}