/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */







/* ==================================================================
【Facility】館内マップ
================================================================== */
.facility-maptitle-1 {
  max-width: 1125px;
  margin: 30px auto 65px;
  text-align: center;
  font-weight: bold;
}
.facility-maptitle-1 p {
  font-size: 28px;  
}
.facility-map img {
  height: auto;        /* 縦横比を維持 */
  object-fit: contain; /* 画像全体を表示 */
  display: block;
  margin: 0 auto;      /* 中央寄せ */
  border-radius: 20px;
}




/* ==================================================================
【Facility】ヘッダー下の文章
================================================================== */
.facility-intro-text-1 {
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px 20px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
  max-width: 1125px;       
  margin: 100px auto 60px;    
  font-size: 14px;
  line-height: 1.6;
  text-align: center;

  opacity: 0;
  transition: opacity 2s ease;

}

/* 表示状態 */
.facility-intro-text-1.show {
  opacity: 1;
}

.facility-intro-text-1 h2 {
  font-size: 25px;
  margin: 10px 0px 20px 0px;
  color: #5C4433;
}

.facility-intro-text-1 p {
  margin: 6px 0;
}
@media (max-width: 768px) {
  .facility-intro-text-1 {
    position: relative;
    top: -90px;
    width: 90%; 
    margin: 130px auto 0px;
  }
  .facility-intro-text-1 h2 {
    font-size: 18px;
  }
}
@media (min-width: 769px) {
  .facility-intro-text-1 {
    position: relative;
    top: -30px;
    width: 800px; 
  }
}










/* ==================================================================
【Facility】館内MAPブロック
================================================================== */
.facility-mapsection {
  position: relative;
  padding: 100px 0;
  /* background-color: #f7f6f5; */   /* パールホワイト  */
  /* background-color: #f5f4ef; */
  background-color: #f5f4ef;

  opacity: 0;
  transform: translateY(60px);
  transition: 
    opacity 2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 2s cubic-bezier(0.22, 1, 0.36, 1);

}

/* 表示時 */
.facility-mapsection.show {
  opacity: 1;
  transform: translateY(0);
}

.facility-mapsection:first-of-type {
  margin-top: -20px;
}
.facility-mapcontainer {
  max-width: none;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  gap: 40px;
}

/* ==================================================================
【Facility】館内MAPブロック_PCのときだけ横並び＋交互
================================================================== */
@media (min-width: 768px) {
  .facility-mapsection:nth-of-type(odd) .facility-mapcontainer {
    flex-direction: column-reverse;
  }
  .facility-mapcontainer {
    padding: 0 35px;
  }
}


/* ==================================================================
【Facility】館内MAPブロック_画像部分
================================================================== */
.facility-mapleft {
  flex: 0 0 100%;
  position: relative;
  overflow: hidden;
}
.facility-mapleft img {
  height: none;

  width: 95%;
  max-width: 1200px;

  object-fit: cover;
  display: block;
  margin: 0 auto;
  border-radius: 20px;
}
@media (min-width: 768px) {
  .facility-mapleft img {
  margin-bottom: 50px;
  }
}
@media (max-width: 768px) {
  .facility-mapleft img {
  margin-bottom: 20px;
  }
}


/* ==================================================================
【Facility】館内MAPブロック_説明文字部分
================================================================== */
.facility-mapright {

  width: 80%;
  max-width: 800px;
  text-align: center;

  flex: 1;
  padding-top: 0px;
  display: inline-block;

  margin: 0 auto;
  display: block;
}




/* ==================================================================
【Facility】館内MAPブロック_スマホ画面
================================================================== */
@media (max-width: 768px) {
  .facility-mapcontainer {
    flex-direction: column;
    gap: 10px; /* ← 40 → 10 に縮める */
  }
  .facility-mapleft,
  .facility-mapright {
    flex: 1 1 100%;
  }
  .facility-mapleft img {
    width: 90%; 
    max-width: none; 
    height: 220px; 
  }
  .facility-mapright {
    padding-top: 0px;
  }
}



/* ==================================================================
【Facility】館内MAPブロック_英語タイトル
================================================================== */
.facility-mapen {
  font-size: 28px;
  letter-spacing: 2px;
  margin-bottom: 2px;
  font-weight: bold;
  margin: 0;
  /* text-align: left; */

}

/* ==================================================================
【Facility】館内MAPブロック_日本語タイトル
================================================================== */
.facility-mapjp {
  font-size: 16px;
  opacity: 0.8;
  font-weight: bold;

  margin: 2px auto 12px;   /* ← 中央寄せ */
  padding-top: 2px;

  border-top: 1px solid rgba(0,0,0,0.3);

  text-align: center;      /* ← 文字を中央に */
  width: fit-content;      /* ← 幅を文字に合わせる（重要） */

  margin-bottom: 20px;


}



/* ==================================================================
【Facility】館内MAPブロック_説明文
================================================================== */
.facility-mapdesc {
  font-size: 14px;
  /* line-height: 0.8; */
  max-width: none;
  margin: 0 0 10px 0 !important;
}



/* ==================================================================
【Facility】館内MAPブロック_英語タイトルと日本語タイトルの間の横線
================================================================== */
.facility-mapsection .facility-mapjp {
  width: 200px;
}

/* ==================================================================
【Facility】館内MAPブロック_スマホ画面
================================================================== */
@media (max-width: 768px) {
  .facility-mapcontainer {
    flex-direction: column;
    gap: 10px;
  }

  .facility-mapleft img {
    width: 100%; 
    height: 100%;  
  }
  .facility-mapright {
    padding-top: 0px;
    width: 90%;
    max-width: 100%;
  }

}












/* ==================================================================
【Facility】設備一覧各ブロック
================================================================== */
.facility-section {
  position: relative;
  padding: 25px 0;

  opacity: 0;
  transform: translateY(60px);
  transition: 
    opacity 2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 2s cubic-bezier(0.22, 1, 0.36, 1);

}

/* 表示時 */
.facility-section.show {
  opacity: 1;
  transform: translateY(0);
}


.facility-section:first-of-type {
  margin-top: -20px;
}
.facility-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  gap: 40px;
}



/* ==================================================================
【Facility】PCのときだけ横並び＋交互
================================================================== */
@media (min-width: 768px) {
  .facility-section:nth-of-type(odd) .facility-container {
    flex-direction: row-reverse;
  }
  .facility-container {
    padding: 0 35px;
  }
}



/* ==================================================================
【Facility】画像部分
================================================================== */
.facility-left {
  flex: 0 0 55%;
  position: relative;
  overflow: hidden;
}
.facility-left img {
  width: 80%;
  max-width: 800px;
  height: 500px;
  object-fit: cover;
  display: block;
  margin: 0 auto;
  border-radius: 20px;
}


/* ==================================================================
【Facility】説明文字部分
================================================================== */
.facility-right {
  flex: 1;
  padding-top: 0px;
  display: inline-block;
}



/* ==================================================================
【Facility】スマホ画面
================================================================== */
@media (max-width: 768px) {
  .facility-container {
    flex-direction: column;
    gap: 10px; /* ← 40 → 10 に縮める */
  }
  .facility-left,
  .facility-right {
    flex: 1 1 100%;
  }
  .facility-left img {
    width: 90%; 
    max-width: none; 
    height: 220px;
  }
  .facility-right {
    padding-top: 0px;
  }
}



/* ==================================================================
【Facility】英語タイトル
================================================================== */
.facility-en {
  font-size: 28px;
  letter-spacing: 2px;
  margin-bottom: 2px;
  font-weight: bold;
  margin: 0;
  text-align: left;
}

/* ==================================================================
【Facility】日本語タイトル
================================================================== */
.facility-ja {
  font-size: 16px;
  margin-bottom: 20px;
  opacity: 0.8;
  font-weight: bold;
  margin: 0;

  margin: 2px 0 12px;
  padding-top: 2px;
  border-top: 1px solid rgba(0,0,0,0.3);

}



/* ==================================================================
【Facility】説明文
================================================================== */
.facility-desc {
  font-size: 14px;
  line-height: 1.6;
  max-width: none;
  margin: 0 0 10px 0 !important;
}



/* ==================================================================
【Facility】館内共通アメニティ部分
================================================================== */
.facility-subtitle {
  line-height: 1.6; 
  margin: 0 0 1px 0 !important;
}
.facility-amenity-box {
  font-size: 14px;
  border: 1px solid #999;     /* 外枠 */
  border-radius: 4px;         /* 角丸 */
  overflow: hidden;           /* 角丸を中にも適用 */
  margin-top: 20px;
}
.amenity-header {
  text-align: center;
  /* background-color: #f0f0f0; */  /* グレー塗り */
  /* background-color: #e9e7de; */
  background-color: #e9e7de;
  padding: 10px 15px;
  border-bottom: 1px solid #999; /* 横線 */
}
.amenity-body {
  /* background-color: #ffffff; */
  text-align: center;
  padding: 20px;
}

.amenity-body p:first-child {
  margin-top: 0;
}

.amenity-title {
  margin-bottom: 0px;
  margin-top: 6px;
  /* font-weight: bold; */ 
}
.amenity-title + p {
  margin-top: 0;
}
@media (max-width: 768px) {
.facility-amenity-box {
  margin: 0 0 15px 0 !important;
 }
}


/* ==================================================================
【Facility】英語タイトルと日本語タイトルの間の横線
================================================================== */
.facility-section.lounge .facility-ja {
  width: 130px;
}
.facility-section.kitchen .facility-ja {
  width: 140px;
}
.facility-section.washroom .facility-ja {
  width: 190px;
}
.facility-section.bathroom .facility-ja {
  width: 180px;
}
.facility-section.bedroom .facility-ja {
  width: 160px;
}
.facility-section.toilet .facility-ja {
  width: 115px;
}
.facility-section.kotatsu .facility-ja {
  width: 145px;
}
.facility-section.entrance .facility-ja {
  width: 300px;
}
.facility-section.receptionroom .facility-ja {
  width: 285px;
}




/* ==================================================================
【Facility】画像のスライド
================================================================== */
.facility-left .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 1s ease;
}
.facility-left .slide.active {
  opacity: 1;
  position: relative; /* ← これで高さが戻る */
}




/* ==================================================================
【Facility】設備一覧各ブロックの上下の横線（※見えなくしている）
================================================================== */
.facility-section::before {
  content: "";
  display: block;
  width: 80%; 
  max-width: 1200px;
  height: 2px;
  background-color: transparent;
  margin: 0 auto 80px; 
}
.facility-section::after {
  content: "";
  display: block;
  width: 80%;  
  max-width: 1200px;
  height: 2px;
  background-color: transparent;
  margin: 80px auto 0; 
}
@media (max-width: 768px) {
  .facility-section::before {
    background-color: transparent;
    margin: 0 auto 50px;
  }
  .facility-section::after {
    background-color: transparent;
    margin: 30px auto 0;
  }
}




/* ==================================================================
【Facility】スライド画像下のドット
================================================================== */
.facility-dots {
  position: absolute;
  bottom: 0px; 
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px; 
  z-index: 10;   
}
.facility-dots span {
  width: 8px;              
  height: 8px;
  border-radius: 50%; 
  /* background: white; */          /* 非選択はずっと白 */
  border: 1px solid #8c7a6b;   /* 黒い枠線 */
  cursor: pointer;
  transition: 0.3s all;
  display: inline-block;
  margin: 0 4px;
}
.facility-dots span.active {
  animation: fillDot 3s linear forwards;
}
@keyframes fillDot {
  from { background: transparent; }
  to { background: #8c7a6b; }
}



/* ==================================================================
【Facility】
================================================================== */
@media (max-width: 768px) {
  .facility-section.map::before {
    margin-bottom: 20px;
  }
  .facility-dots {
    margin-top: 0px; 
  }
}


/* ==================================================================
【Facility】ブロックごとに交互に背景色を設定
================================================================== */
/* .facility-section:nth-of-type(even) {
  background-color: #dcdcdc;
} */

.facility-section:nth-of-type(odd) {
  /* background-color: #f8fbf8; */   /* 白磁  */
  /* background-color: #f7fcfe; */   /* 卯の花色  */
  /* background-color: #dddcd6; */   /* 絹鼠  */
  /* background-color: #f3f3f3; */   /* 乳白色  */
  /* background-color: #f3f3f2; */   /* 白練  */
  /* background-color: #dcdddd; */   /* 白鼠  */
  /* background-color: #eae5e3; */   /* 素色  */
  /* background-color: #f8f4e6; */   /* 象牙色  */
  /* background-color: #fff9f5; */   /* アンバーホワイト  */
  /* background-color: #efefef; */   /* シルバーホワイト  */
  /* background-color: #eee9e6; */   /* ベージュカメオ  */
  /* background-color: #eee7e0; */   /* エクリュ  */
  /* background-color: #fafdff; */   /* スノーホワイト  */
  /* background-color: #f7f6f5; */   /* パールホワイト  */
  /* background-color: #f5f4ef; */
  background-color: #f5f4ef;

}




/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */