.container-3 h1 {
font-size: 3rem;
margin-top: 150px;
margin-left: 80px;
}


.subtitle {
font-size: 2rem;
margin-top: -50px;
margin-left: 190px;
}


.features {
 display: flex;
 justify-content: space-between;
 gap: 50px;              /* 各特徴の間隔 */
 width: 1000px;
 margin: 50px auto;
}


.feature {
 flex: 1;
 text-align: center;     /* 中央寄せ */
}
.feature img {
 width: auto;
 height: 400px;
 border-radius: 0;     /* 角を少し丸める（任意） */
 margin-bottom: 15px;
}


.feature-number {
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.5rem;
 font-weight: bold;
 color: #4c4b4b;;
 margin: 20px 0;
 position: relative;
}


.feature-number::after {
 content: "";
 flex: 1;                     /* 線を伸ばす */
 height: 1px;
 background: #ccc;            /* 線の色 */
 margin-left: 12px;           /* 番号との間隔 */
}


.feature h3 {
 font-size: 1.2rem;
 margin-bottom: 10px;
 color: #4c4b4b;
}


.feature p {
 font-size: 0.95rem;
 line-height: 1.6;
 color: #4c4b4b;
}

@media (max-width: 768px) {
  .container-3 h1 {
    font-size: 2rem;       /* 見出しを縮小 */
    margin: 40px 0 20px;   /* 上下余白を調整 */
    text-align: center;    /* 中央寄せ */
  }

  .subtitle {
    font-size: 1.2rem;
    margin: 0 auto 20px;
    text-align: center;
  }

  .features {
    flex-direction: column; /* ← 縦並びに切り替え */
    width: 100%;            /* ← 横幅いっぱいに */
    gap: 30px;              /* ← 縦方向の間隔 */
    margin: 20px auto;
    align-items: center;    /* ← 中央寄せ */
  }

  .feature {
    width: 90%;             /* ← 画面幅に合わせる */
    text-align: center;
  }

  .feature img {
    width: 100%;            /* ← 横幅いっぱいに */
    height: auto;           /* ← アスペクト比を維持 */
    max-height: 250px;      /* ← スマホで大きすぎないように制限 */
    object-fit: cover;
  }

  .feature-number {
    font-size: 1.2rem;
  }

  .feature h3 {
    font-size: 1rem;
  }

  .feature p {
    font-size: 0.9rem;
  }
}