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

.breadcrumb{background:#fff;z-index: 1;    position: relative;}
.footerSiteMap{z-index: 1;    position: relative;}

/* 各.inn用の固定背景レイヤー */
#innBgRoot .innBgLayer{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;        /* JSで都度セット */
  height: 0;     /* JSで都度セット */
  bottom: auto;  /* ★念のため */
  overflow: hidden;
  opacity: 0;
  will-change: top, height, opacity;
}

/* 背景実体（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合成安定化 */
}

/* コンテンツは前面 */
#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);
  /*opacity: 0;*/
  pointer-events:none;
/*
  transition-property: opacity;
  transition-timing-function: ease;
  transition-duration: 2.4s;
  transition-delay: 1.2s;
  */
  opacity: 1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: none;
  z-index: 1;
}
/*
#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.5);
}*/

}