@charset "utf-8";
/* CSS Document */
/* 外枠：はみ出た部分を隠す */
.slide-container {
  width: 100%;
  overflow: hidden;
  /*background: #f0f0f0;*/ /* 確認用背景色 */
}
/* スライドの器：画像を横に並べる */
.slide-track {
  display: flex;
  width: fit-content; /* 中身のサイズに合わせる */
  animation: loop-slide 20s linear infinite; /* 20秒で一周、等速、無限 */
}
.slide-track img {
  padding-right: 1.5%;
  width: 100vw; /* 画像の幅（画面いっぱいに表示する場合） */
  height: auto;
  display: block;
}
/* アニメーション：左へ1枚分（50%）移動したらリセット */
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/*body {
  overflow-x: hidden;
  padding: 0;
  margin: 0;
}*/
.facility-nav ul {
  display: flex;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  width: 30%;
  justify-content: space-between;
}
.facility-nav li {
  margin: 0;
}
.facility-nav li a {
  display: block;
  padding: 1vw 0 1.1vw 0;
}
.facility-nav li a:hover {
  border-bottom: 2px solid #666;
}
.facility-nav li img {
  width: 100%;
}
.facility1 {}
.facility13 {
  position: relative;
}
.toaccess {
  position: absolute;
  top: 20.3vw;
  left: 61.7%;
    width: 13%;
}
.toaccess a:hover{opacity: 0.6;}
.toaccess img{width: 100%;}
/*slider関連*/
/* 共通設定 */
.facility-container section {
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* 各セクションの設定 */
.facility1 {
  background-image: url('../img/facility/facility_r1_c1.png');
  aspect-ratio: 1920 / 901;
}
.facility2 {
  background-image: url('../img/facility/facility_r2_c1.png');
  aspect-ratio: 1920 / 613;
}
.facility3 {
  background-color: #F9F5F2;
  /*background-image: url('../img/facility/facility_r3_c1.png');*/
  aspect-ratio: 1920 / 73;
}
.facility4 {
  background-color: #F9F5F2;
  /* background-image: url('../img/facility/facility_r4_c1.png');*/
  aspect-ratio: 1920 / 175;
}
.facility5 {
  background-image: url('../img/facility/facility_r5_c1.png');
  aspect-ratio: 1920 / 700;
}
.facility6 {
  background-color: #F9F5F2;
  /*background-image: url('../img/facility/facility_r6_c1.png');*/
  aspect-ratio: 1920 / 569;
}
.facility7 {
  background-image: url('../img/facility/facility_r7_c1.png');
  aspect-ratio: 1920 / 205;
}
.facility8 {
  background-image: url('../img/facility/facility_r8_c1.png');
  aspect-ratio: 1920 / 256;
}
.facility9 {
  background-image: url('../img/facility/facility_r9_c1.png');
  aspect-ratio: 1920 / 1;
}
.facility10 {
  background-image: url('../img/facility/facility_r10_c1.png');
  aspect-ratio: 1920 / 561;
}
.facility11 {
  background-image: url('../img/facility/facility_r11_c1.png');
  aspect-ratio: 1920 / 330;
}
.facility12 {
  background-image: url('../img/facility/facility_r12_c1.png');
  aspect-ratio: 1920 / 243;
}
.facility13 {
  background-image: url('../img/facility/facility_r13_c1.png');
  aspect-ratio: 1920 / 701;
}
.facility14 {
  background-image: url('../img/facility/facility_r14_c1.png');
  aspect-ratio: 1920 / 650;
}
/* --- レイアウト配置 --- */
.facility-slider-box1 {
  max-width: 820px;
  top: 0;
  left: 17%;
}
/* --- スライダー共通設定 --- */
[class^="facility-slider-box"] {
  position: relative;
  overflow: hidden;
  width: calc(100% * (820 / 1920));
}
[class^="facility-slider-box"] .base-img {
  display: block;
  width: 100%;
  height: auto;
  visibility: hidden; /* 高さを維持するための透明な土台 */
}
[class^="facility-slider-box"] .in {
  display: flex;
  justify-content: center;
  padding-top: 1.8%;
}
[class^="facility-slider-box"] .in img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: .5s;
  z-index: 0;
  animation: slide 14s infinite;
}
[class^="facility-slider-box"] input {
  display: none;
}
/* ナビゲーションドット */
[class^="facility-slider-box"] label span {
  display: block;
  width: 10px;
  height: 10px;
  padding: 7px;
  margin: 30% 0 0;
  border-radius: 100%;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
[class^="facility-slider-box"] label span::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #777;
  opacity: 0.5;
  border-radius: 100%;
  animation-duration: 14s;
  animation-iteration-count: infinite;
}
/* --- アニメーション定義 --- */
@keyframes slide {
  0% {
    opacity: 0;
  }
  3.5%, 25% {
    opacity: 1;
    z-index: 1;
  }
  28.5% {
    opacity: 0;
    z-index: 0;
  }
}
/* box1専用のアニメーション色 */
@keyframes slidebutton1 {
  0%, 28.5% {
    opacity: 0.5;
    background: #777;
  }
  3.5%, 25% {
    opacity: 1;
    background: #fbb03b;
  }
}
/* --- ホバー・チェック時の挙動 --- */
[class^="facility-slider-box"] .in:hover img, [class^="facility-slider-box"] .in:hover span::before {
  animation-play-state: paused;
}
[class^="facility-slider-box"] input:checked ~ .in img, [class^="facility-slider-box"] input:checked ~ .in span::before {
  animation: none !important;
}
/* 個別チェック時の表示（1〜4枚目共通） */
[class^="facility-slider-box"] input:nth-of-type(1):checked ~ .in label:nth-of-type(1) img, [class^="facility-slider-box"] input:nth-of-type(2):checked ~ .in label:nth-of-type(2) img, [class^="facility-slider-box"] input:nth-of-type(3):checked ~ .in label:nth-of-type(3) img, [class^="facility-slider-box"] input:nth-of-type(4):checked ~ .in label:nth-of-type(4) img {
  opacity: 1;
  z-index: 1;
}
/* --- box1 専用設定 --- */
.facility-slider-box1 label span::before {
  animation-name: slidebutton1;
}
.facility-slider-box1 input:checked ~ .in label span::before {
  background: #fbb03b !important;
  opacity: 1;
}
/* --- タイミング調整 --- */
[class^="facility-slider-box"] label:nth-of-type(1) span::before, [class^="facility-slider-box"] label:nth-of-type(1) img {
  animation-delay: 0s;
}
[class^="facility-slider-box"] label:nth-of-type(2) span::before, [class^="facility-slider-box"] label:nth-of-type(2) img {
  animation-delay: 3.5s;
}
[class^="facility-slider-box"] label:nth-of-type(3) span::before, [class^="facility-slider-box"] label:nth-of-type(3) img {
  animation-delay: 7s;
}
[class^="facility-slider-box"] label:nth-of-type(4) span::before, [class^="facility-slider-box"] label:nth-of-type(4) img {
  animation-delay: 10.5s;
}