@charset "utf-8";

/* ボタンのスタイル */
.btn-container1 {
  margin: 20px 0;
  display: flex; /* 横並び */
  justify-content: center; /* 横方向に中央揃え */
  align-items: center; /* 垂直方向に中央揃え */
  gap: 0; /* 隙間をゼロに設定 */
}
.btn-container1 img {
  margin: 0; /* 画像の間に隙間ができるのを防ぐ */
  padding: 0; /* 画像の周りのパディングをリセット */
}


.btn-container2 {
  margin: 20px 0;
  display: flex; /* 横並び */
  justify-content: center; /* 横方向に中央揃え */
  align-items: center; /* 垂直方向に中央揃え */
  gap: 0; /* 隙間をゼロに設定 */
}
.btn-container2 img {
  margin: 0; /* 画像の間に隙間ができるのを防ぐ */
  padding: 0; /* 画像の周りのパディングをリセット */
}


.btn-container3 {
  margin: 20px 0;
  display: flex; /* 横並び */
  justify-content: center; /* 横方向に中央揃え */
  align-items: center; /* 垂直方向に中央揃え */
  gap: 0; /* 隙間をゼロに設定 */
}

.btn-container3 img {
  margin: 0; /* 画像の間に隙間ができるのを防ぐ */
  padding: 0; /* 画像の周りのパディングをリセット */
}


/* 画像の幅を固定し、比率を保つ */
.btn-image {
  transition: all 0.3s ease; /* 画像変更時にアニメーションを追加 */
}

/* パソコンでホバー時の画像変更 */
@media (hover: hover) {
  .btn-houjin a:hover .btn-image {
    content: url('../imag/houjinb2.jpg'); /* カーソルを載せたときに画像を変更 */
  }

  .btn-sindan a:hover .btn-image {
    content: url('../imag/sindanb2.jpg'); /* カーソルを載せたときに画像を変更 */
  }

  .btn-counseling a:hover .btn-image {
    content: url('../imag/counseling2.jpg'); /* カーソルを載せたときに画像を変更 */
  }

}

/* ホバー無効化: タッチデバイス全般 */
@media (hover: none) {
  .btn-image:hover {
    content: none; /* ホバー時の変更を無効化 */
  }

  /* タッチデバイスでクリックしても画像が切り替わらないようにする */
  .btn-image:active {
    content: none; /* クリック時も画像が切り替わらないように */
  }
}

.section-description {
  text-align: justify;
  color: #000000;
  margin-top: 16px;
  font-size: 16px;
  padding: 0;
}

/* レスポンシブ対応: モバイル端末の表示調整 */
@media (max-width: 768px) {
  .btn-image {
    max-width: 300px; /* モバイル端末用に画像をさらに小さく設定 */
    height: auto; /* 縦横比を保持 */
  }
}

@media (max-width: 480px) {
  .btn-image {
    max-width: 250px; /* モバイル端末用に画像をさらに小さく設定 */
    height: auto; /* 縦横比を保持 */
  }
  .btn-container1,
  .btn-container2,
  .btn-container3 {
    flex-direction: column; /* イラストとボタンを縦並び */
    align-items: center; /* 中央揃え */
  }
}