/* ヒーロー */

 /* デモ用：前後に余白 */
  .spacer { height: 120vh; display: grid; place-items: center; color: #666; }

  /* --- ヒーロー（全画面→拡大しながら透過） --- */

  /* セクション自体は長くして“スクロール余白”を持たせる */
  .hero-section {
    position: relative;
    height: 200vh;              /* 100vhはsticky表示、残り100vhでエフェクト進行 */
    overflow: clip;             /* はみ出しを隠す（Safari対応でoverflow: hiddenでもOK） */
    background: #fff5e8;    
           /* 透過時の下地（任意） */
    margin: 0;
    padding: 0;
  }

  /* 画面に張り付くキャンバス（ここに画像を固定） */
  .hero-sticky {
    position: sticky;
    top: 0;
    left: 0;
    height: 100vh;
    isolation: isolate; 
     z-index: 0;      /* z-index管理が楽になる */
  }

  /* Rellax対象（親） */
  .hero-parallax.rellax {
    position: relative;
    width: 100%;
    height: 100%;
    will-change: transform;     /* rellaxのtransform最適化 */
  }

  /* 拡大＆フェード対象（子） */
  .hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;  /* ここは 0〜10 くらいでOK */
  transform-origin: center center;
  will-change: transform, opacity;
  transition: transform 0.1s linear, opacity 0.1s linear;
}

/* テキストも一緒にフェードさせる */
.hero_text {
    text-align: center;
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: #f0f0f0;
  font-size: 3rem;
  font-weight: 900;
  white-space: nowrap;
  will-change: opacity, transform;
  transition: opacity 0.1s linear, transform 0.1s linear;
}

/* ヒーローがほぼ消えたあとはクリックを裏に通す用（任意） */
.hero-sticky.hero-hidden {
  pointer-events: none;
}

  @media (prefers-reduced-motion: reduce) {
    .hero-image { transition: none; }
  }


@media screen and (max-width: 992px) {
    
    
}
@media screen and (max-width: 768px) {
    
    
}
@media screen and (max-width: 576px) {
   .hero_text {
    font-size: 1.8rem;
    bottom: 20%;
   } 
    
}