@charset "utf-8";
/* CSS Document */
/* 共通設定 */
.fac-section {
  width: 100%;
  height: auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
}
/* 各セクションの縦横比と背景 (aspect-ratio: 幅 / 高さ) */
.fac1 {
  aspect-ratio: 1920 / 701;
  background-image: url('../img/facility/facility_r1_c1.png');
}
.fac2 {
  aspect-ratio: 1920 / 678;
  background-image: url('../img/facility/facility_r2_c1.png');
}
.fac3 {
  aspect-ratio: 1920 / 450;
  background-image: url('../img/facility/facility_r3_c1.png');
}
.fac4 {
  aspect-ratio: 1920 / 451;
  background-image: url('../img/facility/facility_r4_c1.png');
}
.fac5 {
  aspect-ratio: 1920 / 449;
  background-image: url('../img/facility/facility_r5_c1.png');
}
.fac6 {
  aspect-ratio: 1920 / 450;
  background-image: url('../img/facility/facility_r6_c1.png');
}
.fac7 {
  aspect-ratio: 1920 / 451;
  background-image: url('../img/facility/facility_r7_c1.png');
}
.fac8 {
  aspect-ratio: 1920 / 448;
  background-image: url('../img/facility/facility_r8_c1.png');
}
.fac9 {
  aspect-ratio: 1920 / 451;
  background-image: url('../img/facility/facility_r9_c1.png');
}
.fac10 {
  aspect-ratio: 1920 / 450;
  background-image: url('../img/facility/facility_r10_c1.png');
}
.fac11 {
  aspect-ratio: 1920 / 474;
  background-image: url('../img/facility/facility_r11_c1.png');
}
.fac12 {
  aspect-ratio: 1920 / 208;
  background-image: url('../img/facility/facility_r12_c1.png');
}
.fac13 {
  aspect-ratio: 1920 / 528;
  background-image: url('../img/facility/facility_r13_c1.png');
}
.fac14 {
  aspect-ratio: 1920 / 431;
  background-image: url('../img/facility/facility_r14_c1.png');
}
/* スライダー全体のコンテナ */
.fac-slider-box {}
.fac-slider {
  position: relative;
  width: 28.7%;
  height: 90%; /* 親セクションのaspect-ratioに従う */
  overflow: hidden;
  top: 0;
  left: 18.8%;
}
/* スライドする画像 */
.fac-slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* 背景画像と合わせる場合はcontain / 埋めるならcover */
  opacity: 0;
  animation: fac-fade-animation 12s infinite; /* 4秒×3枚 = 12s */
}
/* 画像ごとの遅延設定（3枚の場合） */
.fac-slider img:nth-child(1) {
  animation-delay: 0s;
}
.fac-slider img:nth-child(2) {
  animation-delay: 4s;
}
.fac-slider img:nth-child(3) {
  animation-delay: 8s;
}
/* フェードアニメーションの定義 */
@keyframes fac-fade-animation {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  } /* 4秒のうちの最初の少しでフェードイン */
  33% {
    opacity: 1;
  } /* 33%（約4秒）まで表示維持 */
  43% {
    opacity: 0;
  } /* 次の画像と重なりながらフェードアウト */
  100% {
    opacity: 0;
  }
}
/* 2枚専用スライダー */
.fac-slider-2 {
  position: relative;
  width: 28.7%;
  height: 90%; /* 親セクションのaspect-ratioに従う */
  overflow: hidden;
  top: 0;
  left: 18.8%;
}
.fac-slider-2 img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  animation: fac-fade-animation-2 10s infinite; /* 5秒×2枚 = 10s */
}
/* 2枚それぞれの遅延設定 */
.fac-slider-2 img:nth-child(1) {
  animation-delay: 0s;
}
.fac-slider-2 img:nth-child(2) {
  animation-delay: 5s;
}
/* 2枚用のフェードアニメーション定義 */
@keyframes fac-fade-animation-2 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  } /* フェードイン */
  45% {
    opacity: 1;
  } /* 表示維持 */
  55% {
    opacity: 0;
  } /* フェードアウト */
  100% {
    opacity: 0;
  }
}