/* ===============================================
   ヒーローイメージ スタイル
================================================== */
.hero-section {
  position: relative; /* テキストを重ねるための基準 */
  height: 65vh; /* 画面の高さの65%をヒーローイメージの高さに */
  min-height: 400px;
  width: 100%;
  background-image: url('../images/site-hero-image.webp'); /* ★ヒーローイメージの画像ファイルを指定 */
  background-size: cover; /* 画像がセクション全体を覆うように調整 */
  background-position: center; /* 画像の中央を基準に表示 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

/* 画像の上に半透明の黒いフィルターをかけて文字を読みやすくする */
.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* 少し暗くする */
  z-index: 1;
}

/* ヒーローイメージ上のテキスト */
.hero-text {
  position: relative;
  z-index: 2; /* フィルターより手前に表示 */
  text-align: center;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.hero-text h2 {
  font-size: 3.2rem; /* PCでの文字サイズ */
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.1em;
}

.hero-text p {
  font-size: 1.6rem; /* PCでの文字サイズ */
  margin-top: 1rem;
}

/* ===============================================
   レスポンシブ対応
================================================== */

/* タブレット向け */
@media screen and (max-width: 1024px) {
  .hero-section {
    height: 50vh;
    min-height: 300px;
  }
  .hero-text h2 {
    font-size: 2.5rem;
  }
  .hero-text p {
    font-size: 1.3rem;
  }
}

/* スマートフォン向け */
@media screen and (max-width: 767px) {
  .hero-text h2 {
    font-size: 1.8rem;
  }
  .hero-text p {
    font-size: 1rem;
  }
}

/* hero.css にこの内容を記述 */
/* トップページ（.home-page）の時だけbodyにヒーローイメージを設定 */
body.home-page {
    background: var(--c-content-background) url('../images/site-hero-image.webp') no-repeat center center/cover;
    background-attachment: fixed;
}

/* トップページ以外のbodyの背景は、元のstyle.cssから移動 */
body:not(.home-page) {
    background: var(--c-page-background) url('../images/site-back.webp') no-repeat center center/cover;
    background-attachment: fixed;
}

/* トップページ用のヒーローイメージ（もしファイル名が違う場合は修正してください）*/
.hero-image {
    display: none; /* このCSSでbody背景に設定するため、img要素は不要になります */
}