/* Heroセクションのスタイル */
.hero-section {
  /* 背景画像の設定 */
  background-image: url("bghero.jpg"); /* ⚠️ 画像のパスを実際の画像ファイルに合わせて変更してください */

  /* 画像がセクション全体を覆うように設定 */
  background-size: cover;

  /* 画像を中央に配置 */
  background-position: center center;

  /* 画像が繰り返し表示されないように設定 */
  background-repeat: no-repeat;

  /* セクションの高さ（ビューポートの高さの例） */
  height: 100vh; /* または '500px' など固定の高さ */

  /* コンテンツを中央に配置するためのFlexbox */
  display: flex;
  justify-content: center; /* 水平方向の中央揃え */
  align-items: center; /* 垂直方向の中央揃え */

  /* テキストが背景画像の上で読みやすくなるようにパディングを設定 */
  padding: 20px;

  /* ページの上下のマージンをリセットすることが多い */
  margin: 0;
}

/* Heroコンテンツのスタイル */
.hero-content {
  text-align: center;
  color: #ffffff; /* テキストを白など、背景の上で読みやすい色に設定 */
  /* 背景画像とのコントラストを上げるために、テキストに影を付けることも検討 */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.hero-content p {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

/* ボタンのスタイル例 */
.btn-primary {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff; /* ボタンの背景色 */
  color: #ffffff;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s;
}

.btn-primary:hover {
  background-color: #0056b3;
}