/* ===== Background root (fixed layers) ===== */
#innBgRoot{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* 各.inn用の固定背景レイヤー */
#innBgRoot .innBgLayer{
  position: absolute;
  inset: 0;
  opacity: 0;               /* JSで表示 */
  /*will-change: clip-path;*/
  overflow: hidden;          /* 追加：はみ出し/シーム抑制 */
  will-change: top, height;  /* 実際に変えてるのは clip-path ではなく top/height なので */
}

/* 背景実体（top/height は JS で制御） */
#innBgRoot .innBgLayer__inner{
  position: absolute;
  left: 0;
  width: 100%;
  will-change: top, height, transform;
  transform: translateZ(0); /* iOSの合成安定化 */
}

/* ★background-image をやめて img を cover 表示 */
#innBgRoot .innBgLayer__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*transform: translateZ(0);  iOS合成安定化 */
  filter: blur(10px);
  transform: scale(1.05) translateZ(0); /* ぼかしの端が見えないよう少し拡大 */
}

/* コンテンツは前面 */
#parallaxSticky .inn,
#parallaxSticky .inn__content{
  position: relative;
  z-index: 1;
}

/* ===== BG Animation（暗転＋blur） ===== */
#innBgRoot .innBgLayer::before{
  content:'';
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.8);
  pointer-events:none;
  z-index: 1;
  opacity: 1;
  /*
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: none;
/*
  transition-property: opacity;
  transition-timing-function: ease;
  transition-duration: 2.4s;
  transition-delay: 1.2s;
 
  */
}
/*
#innBgRoot .innBgLayer.is-animating::before{
  opacity: 1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

#innBgRoot .innBgLayer.is-anim-done::before{
  opacity: 1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: none;
}*/

/* 1つ目だけ遅らせたい場合（任意） 
#innBgRoot .innBgLayer[data-key="inn01"]::before{
  transition-delay: 2.0s;
}*/


@media screen and (min-width: 0px) and (max-width: 767.98px) { 
#innBgRoot .innBgLayer::before{
  background: rgba(0,0,0,0.75);
}

}