@charset "UTF-8";
/* ==========================================================================
   .photo-slider ― Smart Slider 3 の代替スライダー用スタイル

   もとのテーマ（enpile）では、特徴セクションやお部屋の画像スライダーが
   Smart Slider 3 というプラグインで作られていました。
   このサイトではプラグインを使わず Swiper に置き換えているため、
   そのぶんの調整をこのファイルにまとめています。

   ▼ なぜ打ち消しが必要か
   style.css にはトップのメインスライダー専用の指定があります。

       .swiper-wrapper  { height: 250px; }
       .swiper-slide img { height: 850px; }

   これは Swiper 共通のクラスに対する指定なので、あとから足した
   小さいスライダーにも効いてしまい、画像が縦850pxまで伸びていました。
   ここで打ち消し、参考サイトと同じ高さに揃えています。

   ▼ サムネイル
   サムネイルは footer.php のスクリプトが自動で作ります。
   スライドを増やせばサムネイルも増えるので、HTMLを足す必要はありません。
   ========================================================================== */

/* 周辺観光カードのホバー時の拡大（写真の比率は style.css 側で固定しています） */
.area_slider .area_card > a:hover .area_card_img img {
  transform: scale(1.05);
}

/* --- 共通の打ち消し ------------------------------------------------------ */
.photo-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.photo-slider .swiper-wrapper {
  height: 100%;
}
.photo-slider .swiper-slide {
  height: 100%;
}
.photo-slider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ドットは photo-slider--dots のときだけ出します（既定はサムネイル） */
.photo-slider .swiper-pagination {
  display: none;
}
.photo-slider--dots .swiper-pagination {
  display: block;
  bottom: 14px;
}
.photo-slider--dots .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background: #fff;
  opacity: .55;
  transition: opacity .3s ease;
}
.photo-slider--dots .swiper-pagination-bullet:hover {
  opacity: .85;
}
.photo-slider--dots .swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--sh-accent);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
}


/* ==========================================================================
   トップ：5つの特徴
   参考サイト実測 … 枠全体 735 x 524px（写真 367px ＋ サムネイル 156px）
   写真とサムネイルを縦に積んで、枠全体でこの比率になるようにしています。
   ========================================================================== */
.feature_img {
  display: flex;
  flex-direction: column;
  gap: 8px;
  aspect-ratio: 735 / 524;
}
.feature_img .photo-slider {
  flex: 1 1 auto;
  min-height: 0; /* flex の中で縮めるために必要 */
}

/*
  重ねて配置している文章を、写真より前面に出します。
  Swiper のコンテナが z-index:1 を持つため、この指定が無いと
  文章の左半分が写真の下に潜り込んで読めなくなります。
  （この行は消さないでください）
*/
.feature_txt {
  z-index: 2;
}

/* --- トップ：お部屋（参考サイト実測 1180 x 393px）------------------------ */
.roomcontainer .photo-slider {
  aspect-ratio: 1180 / 393;
}

/* --- 下層ページのスライダー（参考サイト /room/ 実測 1180 x 656px）-------- */
.rm_img .photo-slider {
  aspect-ratio: 1180 / 656;
}


/* ==========================================================================
   サムネイル
   高さを変えたいときは .photo-thumbs の height を書き換えてください。
   ========================================================================== */
.photo-thumbs {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  height: 96px;
  margin-top: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
/* 特徴セクションは枠全体で比率を保つため、上の余白はここで持たせません */
.feature_img .photo-thumbs {
  margin-top: 0;
}

.photo-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 128px;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: .45;
  transition: opacity .3s ease;
}
.photo-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-thumb:hover {
  opacity: .8;
}
.photo-thumb.is-active {
  opacity: 1;
}
/* 選択中の写真に枠をつけます */
.photo-thumb.is-active::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--sh-accent);
}


/* ==========================================================================
   前へ / 次へ の矢印
   photo-slider--dots のスライダーにだけ、スクリプトが自動で作ります。
   サムネイル方式のスライダーには出ません。
   ========================================================================== */
.photo-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, .82);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color .3s ease;
}
.photo-nav:hover {
  background: #fff;
}
.photo-nav::before {
  content: '';
  display: block;
  width: 11px;
  height: 11px;
  border-top: 2px solid var(--sh-accent-dark);
  border-right: 2px solid var(--sh-accent-dark);
}
.photo-nav--prev {
  left: 0;
}
.photo-nav--prev::before {
  transform: rotate(-135deg);
  margin-left: 4px;
}
.photo-nav--next {
  right: 0;
}
.photo-nav--next::before {
  transform: rotate(45deg);
  margin-right: 4px;
}


/* --- 施設一覧のサムネイル（参考サイト実測 378 x 240px）------------------- */
.facility_list figure {
  height: 240px;
  overflow: hidden;
}
.facility_list figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* --- スマホ ------------------------------------------------------------- */
@media screen and (max-width: 980px) {
  /* 幅いっぱいになるぶん、少し縦長にして見やすくします */
  .feature_img {
    aspect-ratio: 4 / 3.4;
  }
  .roomcontainer .photo-slider,
  .rm_img .photo-slider {
    aspect-ratio: 16 / 10;
  }
  .photo-thumbs {
    height: 64px;
    gap: 6px;
  }
  .photo-thumb {
    width: 84px;
  }
  .photo-nav {
    width: 38px;
    height: 38px;
  }
  .photo-slider--dots .swiper-pagination {
    bottom: 8px;
  }
  .facility_list figure {
    height: 200px;
  }
}