@charset "utf-8";
/* CSS Document */
.first-view-yurukotto {
  background-image: url(../img/yurukotto/yurukotto-image.webp);
}
.white {
  color: #fff;
}
.black {}
.text-shadow {
  text-shadow: 0 2px 4px rgba(0, 0, 0, .55);
}
.bg-peach {
  background-color: #fce3cd;
  padding: 30px;
  display: inline-block;
}
.bg-peach p {
  padding: 0;
  margin: 0;
}
#yurukotto-guide {
  padding: 80px 0;
}
@media(max-width:750px) {
  .bg-peach {
    padding: 10px;
    width: 90%;
    margin: auto;
  }
}
.ttl {
  margin: 0;
  padding: 0;
}
h3.subttl {
  padding: 0 0 10px 0;
  margin: 0;
}
h3.subttl2 {
  text-align: right;
}
.facility-text2 {
  text-align: right;
}
p.ta-l {
  margin: 0;
}
@media(max-width:767px) {
  h3.subttl2 {
    text-align: left;
  }
  .facility-text2 {
    text-align: left;
    padding: 0;
    margin: 0;
  }
}
/* セクション土台 */
.yuru-yuge-section {
  position: relative;
  background: #e6f1e6; /* 緑のエリア色に合わせて調整 */
  overflow: hidden;
  margin-top: 60px;
}
/* 前面コンテンツ */
.yy-content {
  position: relative;
  z-index: 1; /* ← 前面に出す */
  padding: clamp(24px, 4vw, 56px) 0 /*clamp(16px, 3vw, 40px)*/ ;
}
/* 背景アニメ層 */
/* 既存の yy-smoke に追記OK */
/* 湯気 */
.yy-smoke {
  position: absolute;
  bottom: -140px;
  width: min(26vw, 220px);
  opacity: 0.8;
  filter: blur(2px);
  mix-blend-mode: screen;
  animation: yugeUpSway var(--dur, 12s) ease-in-out infinite;
  will-change: transform, opacity;
}
/* 上昇＋ゆらぎを一体化したアニメ */
@keyframes yugeUpSway {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.6;
  }
  10% {
    transform: translate(5px, -80px) scale(1.02) rotate(0.3deg);
    opacity: 0.9;
  }
  30% {
    transform: translate(-10px, -200px) scale(1.05) rotate(-0.4deg);
    opacity: 1;
  }
  60% {
    transform: translate(15px, -700px) scale(1.1) rotate(0.6deg);
    opacity: 0.8;
  }
  100% {
    transform: translate(-8px, -1040px) scale(1.15) rotate(-0.4deg);
    opacity: 0;
  }
}
/* 左右のゆらぎアニメーション */
/* 左右個別設定を強めに */
/* 既存 */
/* 左側3本 */
.yy-left {
  left: 6%;
  --dur: 10s;
  animation-delay: 0s;
}
.yy-left2 {
  left: 12%;
  --dur: 10s;
  animation-delay: 3s;
}
.yy-left3 {
  left: 18%;
  --dur: 10s;
  animation-delay: 6s;
}
/* 右側3本 */
.yy-right {
  right: 6%;
  --dur: 13s;
  animation-delay: 0s;
}
.yy-right2 {
  right: 12%;
  --dur: 13s;
  animation-delay: 4s;
}
.yy-right3 {
  right: 18%;
  --dur: 13s;
  animation-delay: 8s;
}
/* コンテンツ幅と余白 */
.facility-head, .facility-block {
  max-width: 1280px; /* 画像の見せ場を確保 */
  margin: 0 auto;
  padding-inline: clamp(13px, 2.5vw, 20px);
}
.facility-block p {
  font-feature-settings: "palt";
}
.facility-head {
  text-align: center;
  /*padding-block: clamp(24px, 6vw, 56px) clamp(8px, 3vw, 24px);*/
}
/* 2カラム土台 */
.facility-block {
  display: flex;
  grid-template-columns: 720fr 520fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
  padding: 40px 0;
  /*display: grid;
  grid-template-columns: 720fr 520fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
  padding: 40px 0;*/
}
/* 反転（テキスト左・画像右） */
.facility-block.reverse {
  grid-template-columns: 520fr 720fr;
  flex-direction: row-reverse;
}
/* 画像 */
.facility-img {
  margin: 0;
  position: relative;
  width: 64%;
}
.facility-img img {
  width: 100%;
  height: auto;
  display: block;
  /*box-shadow: 0 8px 24px rgba(0,0,0,.18);*/
}
/* テキスト側の最小幅確保（折返し防止） */
.facility-text {
  min-width: 270px;
}
/* ====== レスポンシブ ====== */
@media (max-width: 980px) {
  .facility-block, .facility-block.reverse {
    grid-template-columns: 1fr; /* 縦積み */
    gap: 16px;
  }
  .facility-text {
    order: 2;
  } /* 画像→テキストの順に揃える */
  .facility-block.reverse .facility-text {
    order: 1;
  } /* 逆配置の時は先にテキスト */
  .facility-block.reverse .facility-img {
    order: 2;
  }
}
/* 動きを苦手とする環境配慮 */
@media (prefers-reduced-motion: reduce) {
  .yy-smoke {
    animation: none;
    opacity: .25;
  }
}
/* 親に基準を作る＆はみ出し防止 */
.fv-section {
  position: relative;
  width: 100%;
  overflow: hidden;
}
/* 背景は“位置指定済み”にして z-index を有効化 */
.fv-bg {
  position: relative; /* ← 追加 */
  z-index: 1; /* ← ここで有効になる */
  display: block; /* ← aspect-ratio を効かせる */
  width: 100%;
  aspect-ratio: 1920 / 977; /* ← そのままOK */
  background: url(../img/yurukotto/yurukotto-image2.webp) center top/cover no-repeat;
}
/* 湯気（absolute）は .fv-section を基準に重ねる */
.steam {
  position: absolute; /* ← 親が relative になったのでOK */
  bottom: 0;
  z-index: 2;
  /* 既存プロパティはそのまま */
}
/* 湯気共通 */
.steam {
  position: absolute;
  bottom: 0;
  width: 120px;
  height: 120px;
  background: radial-gradient(white 20%, rgba(255, 255, 255, 0) 70%);
  opacity: 0;
  border-radius: 50%;
  filter: blur(8px);
  animation: steam-rise 6s infinite ease-in; /* ← 8s → 6s（約1.3倍速） */
  z-index: 2;
}
.steam1 {
  left: 20%;
  animation-delay: 0s;
}
.steam2 {
  left: 35%;
  width: 140px;
  height: 140px;
  animation-delay: 2s;
}
.steam3 {
  left: 50%;
  width: 160px;
  height: 160px;
  animation-delay: 4s;
}
.steam4 {
  left: 65%;
  width: 120px;
  height: 120px;
  animation-delay: 1s;
} /* 追加 */
.steam5 {
  left: 80%;
  width: 100px;
  height: 100px;
  animation-delay: 3s;
} /* 追加 */
@keyframes steam-rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  50% {
    transform: translateY(-150px) scale(1.2);
    opacity: 0.5;
  }
  100% {
    transform: translateY(-300px) scale(1.4);
    opacity: 0;
  }
}
.book-lounge {
  background-color: #fce3cd;
  padding: clamp(24px, 4vw, 56px) 0;
}
.book-lounge-img {
  display: flex;
  max-width: 1280px;
  width: 96%;
  margin: auto;
  justify-content: space-between;
  padding: clamp(24px, 4vw, 56px) 0;
}
.book-lounge-img img {
  max-width: 420px;
  width: 30%;
}
.backtree-left {
  background-image: url(../img/yurukotto/tree-left.webp);
  background-position: 10% center;
  background-repeat: no-repeat;
}
.backtree-right {
  background-image: url(../img/yurukotto/tree-right.webp);
  background-position: 90% center;
  background-repeat: no-repeat;
}
@media(max-width:767px) {
  .backtree-left {
    background-image: url(../img/yurukotto/tree-left.webp);
    background-position: 10% bottom;
    background-repeat: no-repeat;
    background-size: 20%;
  }
  .backtree-right {
    background-image: url(../img/yurukotto/tree-right.webp);
    background-position: 90% bottom;
    background-repeat: no-repeat;
    background-size: 15%;
  }
}
/* スライドのコンテナ（.swiper）にアスペクト比（縦横比）を持たせる */
/* ※ 16 / 9 は横長の比率。 4 / 3 など、写真の比率に合わせて調整してください */
.facility-slide .swiper {
  max-width: 657px !important;
  width: 100%;
}
/* スライドの中の画像（img）が、コンテナにきっちり収まるように指定 */
.facility-slide .swiper-slide img {
  width: 100%;
  max-width: 657px;
}
@media(max-width:767px) {
  .first-view {
    margin-bottom: 0px;
  }
  .facility-img {
    margin: auto;
  }
  .facility-block {
    display: block;
    width: 96%;
    padding: 10px 0;
  }
  .swiper-wrapper {
    width: 100%;
    margin: auto;
  }
  .facility-img {
    width: 100%;
  }
}
.yurukotto-facility {
  padding: clamp(24px, 4vw, 56px) 0;
}
.okomori-poncho {
  padding: clamp(24px, 4vw, 56px) 0;
  background-color: #e1efd8;
}
.to-price {
  padding: clamp(24px, 4vw, 56px) 0;
}