/* ========== facility 専用: CSS-only スライダー ========== */

/* 汎用設定 */
.event-slider {
  display: grid;
  grid-template-areas: "stack";
  width: 100%;
  overflow: hidden;
  position: relative;
}
.event-slider > div {
  grid-area: stack;
  opacity: 0;
  display: block !important; /* どこかのCSSで消されても可視化 */
  visibility: visible !important;
}
.event-slider img {
  width: 100%;
  height: auto;
  display: block;
}

/* インジケータ（下の3本バー） */
.event-indicators {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}
.event-indicators .bar {
  width: 36px;
  height: 6px;
  background: #e5e5e5;
  opacity: .6;
}

/* ===== アニメーション設定（3枚×各4秒＝合計12秒のループ） ===== */
@keyframes facFade {
  0%   { opacity: 0; }
  8%   { opacity: 1; }   /* フェードイン */
  25%  { opacity: 1; }   /* 表示維持 */
  33%  { opacity: 0; }   /* フェードアウト */
  100% { opacity: 0; }
}

/* インジケータの点灯（該当時間帯だけ濃く） */
@keyframes facBar {
  0%   { background:#e5e5e5; opacity:.6; }
  8%   { background:#4d4d4d; opacity:1; }
  25%  { background:#4d4d4d; opacity:1; }
  33%  { background:#e5e5e5; opacity:.6; }
  100% { background:#e5e5e5; opacity:.6; }
}

/* ========== 1ブロック目（会議：.slider1 / .indicator1） ========== */
.slider1 > div { animation: facFade 12s infinite; }
.slider1 > div:nth-child(1) { animation-delay: 0s;  }
.slider1 > div:nth-child(2) { animation-delay: 4s;  }
.slider1 > div:nth-child(3) { animation-delay: 8s;  }
/* 初期白防止 */
.slider1 > div:first-child { opacity: 1; }

/* インジケータ3本をスライドに同期 */
.indicator1 .bar:nth-child(1) { animation: facBar 12s infinite; animation-delay: 0s;  }
.indicator1 .bar:nth-child(2) { animation: facBar 12s infinite; animation-delay: 4s;  }
.indicator1 .bar:nth-child(3) { animation: facBar 12s infinite; animation-delay: 8s;  }

/* ========== 2ブロック目（イベント：.slider2 / .indicator2） ========== */
.slider2 > div { animation: facFade 12s infinite; }
.slider2 > div:nth-child(1) { animation-delay: 0s;  }
.slider2 > div:nth-child(2) { animation-delay: 4s;  }
.slider2 > div:nth-child(3) { animation-delay: 8s;  }
.slider2 > div:first-child { opacity: 1; }

.indicator2 .bar:nth-child(1) { animation: facBar 12s infinite; animation-delay: 0s;  }
.indicator2 .bar:nth-child(2) { animation: facBar 12s infinite; animation-delay: 4s;  }
.indicator2 .bar:nth-child(3) { animation: facBar 12s infinite; animation-delay: 8s;  }

/* ========== 3ブロック目（パーティー：.slider3 / .indicator3） ========== */
.slider3 > div { animation: facFade 12s infinite; }
.slider3 > div:nth-child(1) { animation-delay: 0s;  }
.slider3 > div:nth-child(2) { animation-delay: 4s;  }
.slider3 > div:nth-child(3) { animation-delay: 8s;  }
.slider3 > div:first-child { opacity: 1; }

.indicator3 .bar:nth-child(1) { animation: facBar 12s infinite; animation-delay: 0s;  }
.indicator3 .bar:nth-child(2) { animation: facBar 12s infinite; animation-delay: 4s;  }
.indicator3 .bar:nth-child(3) { animation: facBar 12s infinite; animation-delay: 8s;  }

/* ===== ヒーローの背景（PC/SP別画像） ===== */
.heroview-section {
  width: 100%;
  height: 56vw;          /* 画面幅基準の可変。固定したければ適宜変更 */
  max-height: 100vh;
  background-image: url('https://www.hotel-kobayashi.com/wp/wp-content/themes/onepress-kobayashi/images/facility/fac-hero.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.pc { display: block; }
.sp { display: none; }
@media (max-width: 750px) {
  .pc { display: none; }
  .sp { display: block; }
  .heroview-section {
    aspect-ratio: 450 / 625;
    height: auto;
    background-image: url('https://www.hotel-kobayashi.com/wp/wp-content/themes/onepress-kobayashi/images/facility/sp-fac-hero.png');
  }
}

/* 画像のはみ出し防止（保険） */
.facility-image img,
.facility-box-image img,
.eventroom-image img {
  width: 100%;
  height: auto;
  display: block;
}
.event-slider-box .event-label{ 
    margin-top: 18px;
}
.map-image{
    text-align: center;
}
.map-image img{
    margin: auto;
}