/*--------------------------------------------------------------------
	onsen.css
	温泉ページ（onsen.html）専用の追加スタイル
	共通CSS（reset/basis/structure/parts/dark-theme）で足りない
	最小限のページ固有スタイルのみをここに記述する。
--------------------------------------------------------------------*/

/* ---- 湯めぐりの時間：しずくが落ちて波紋が広がる背景演出 ----
   #starfieldBg（dark-theme.css）と同じ手法：
   .hasWatermark > *:not(.kanjiWatermark) の position:relative/z-index:1 を
   !importantで打ち消し、背景の最背面（z-index:0）に敷く ---- */
.rippleBg {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ripple {
  position: absolute;
  width: 70px;
  height: 70px;
  margin: -35px 0 0 -35px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  opacity: 0;
  animation-name: waterRipple;
  animation-timing-function: cubic-bezier(.2, .6, .4, 1);
  animation-iteration-count: infinite;
}

.ripple::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  animation-name: waterDrop;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-duration: inherit;
  animation-delay: inherit;
}

@keyframes waterRipple {
  0%   { transform: scale(0.15); opacity: 0; }
  8%   { opacity: .55; }
  100% { transform: scale(1); opacity: 0; }
}

@keyframes waterDrop {
  0%   { opacity: 0; transform: scale(1); }
  4%   { opacity: 1; }
  14%  { opacity: 0; transform: scale(.4); }
  100% { opacity: 0; }
}

.ripple--1 { top: 18%; left: 10%;  width: 60px;  height: 60px;  margin: -30px 0 0 -30px; animation-duration: 4.6s; animation-delay: .2s; }
.ripple--2 { top: 66%; left: 20%;  width: 90px;  height: 90px;  margin: -45px 0 0 -45px; animation-duration: 5.8s; animation-delay: 1.8s; }
.ripple--3 { top: 34%; left: 42%;  width: 72px;  height: 72px;  margin: -36px 0 0 -36px; animation-duration: 5.1s; animation-delay: 3.1s; }
.ripple--4 { top: 80%; left: 58%;  width: 56px;  height: 56px;  margin: -28px 0 0 -28px; animation-duration: 4.3s; animation-delay: .9s; }
.ripple--5 { top: 12%; left: 74%;  width: 84px;  height: 84px;  margin: -42px 0 0 -42px; animation-duration: 6.2s; animation-delay: 2.6s; }
.ripple--6 { top: 52%; left: 88%;  width: 64px;  height: 64px;  margin: -32px 0 0 -32px; animation-duration: 4.9s; animation-delay: 4.2s; }
.ripple--7 { top: 90%; left: 32%;  width: 78px;  height: 78px;  margin: -39px 0 0 -39px; animation-duration: 5.5s; animation-delay: 5.4s; }

@media (prefers-reduced-motion: reduce) {
  .ripple,
  .ripple::before {
    animation: none;
    opacity: 0;
  }
}

/* ---- クリーム背景セクション（Garden Onsen等と同じ配色ルールを踏襲） ----
   ※「時間によって表情を変える露天風呂」は#yumeguriTime内に統合、
     「音・光・香り」(#senses)セクションは削除されたため、
     どちらもこのリストからは除外。
     「四季を肌で感じる湯」(#seasonBath)は黒背景からベージュに変更のため追加 ---- */
#wrapper01 #gardenBath,
#wrapper01 #indoorBath,
#wrapper01 #dayUse,
#wrapper01 #beforeBath,
#wrapper01 #seasonBath {
  background-color: #E8E2D3 !important;
}

#gardenBath h2.mincho, #gardenBath h3,
#indoorBath h2.mincho, #indoorBath h3,
#dayUse h2.mincho, #dayUse h3,
#beforeBath h2.mincho, #beforeBath h3,
#seasonBath h2.mincho, #seasonBath h3 {
  color: #2b2620 !important;
}

#gardenBath .fcGray02,
#indoorBath .fcGray02,
#dayUse .fcGray02,
#beforeBath .fcGray02,
#seasonBath .fcGray02 {
  color: #6b6355 !important;
}

#gardenBath .fcBrown02, #gardenBath .fcBrown02 a,
#indoorBath .fcBrown02, #indoorBath .fcBrown02 a,
#dayUse .fcBrown02, #dayUse .fcBrown02 a,
#beforeBath .fcBrown02, #beforeBath .fcBrown02 a,
#seasonBath .fcBrown02, #seasonBath .fcBrown02 a {
  color: #8a6d2f !important;
}

#gardenBath .kanjiWatermark,
#indoorBath .kanjiWatermark,
#dayUse .kanjiWatermark,
#beforeBath .kanjiWatermark,
#seasonBath .kanjiWatermark {
  color: rgba(60, 48, 24, 0.12);
}

#gardenBath .buttonBlack01,
#indoorBath .buttonBlack01,
#dayUse .buttonBlack01,
#beforeBath .buttonBlack01,
#seasonBath .buttonBlack01 {
  border: 1px solid rgba(0, 0, 0, 0.3);
}

/* ---- 日帰り入浴：料金・時間の定義リスト（クリーム背景用に文字色を明示） ---- */
#dayUse dl dt {
  color: #2b2620;
}

#dayUse dl dd,
#dayUse dl dd a {
  color: #6b6355 !important;
}

/* ---- 時間で表情を変える／やさしい湯ざわり：カード共通の縁取り ---- */
.featureList > * {
  padding: 28px 24px;
  border: 1px solid rgba(60, 48, 24, 0.18);
}

.featureListLabel {
  display: inline-block;
  color: #8a6d2f;
  font-size: 0.75rem;
  letter-spacing: .15em;
  margin-bottom: 10px;
}

/* ---- 庭園露天風呂：teien01〜04を大きな一枚絵として見せるスライド ----
   contents06（最大1200px）の外へ、ブラウザ全幅までブリードさせる ---- */
.experienceTimelineHero {
  margin-top: 10px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* 切り替えの動きを、速度（script.js）だけでなく緩急にもゆったり感を持たせる。
   Swiperは.swiper-wrapperのtransition-timing-functionをこの変数経由で読むため、
   ここで上書きすると高級感のある滑らかなイージングになる */
.experienceTimelineHero .experienceSwiper {
  --swiper-wrapper-transition-timing-function: cubic-bezier(.65, 0, .35, 1);
}

/* 前後のスライドが左右にのぞいて見えるよう、コンテナ幅より少し狭くする
   （centeredSlides: true とセットでJS側から中央寄せ表示にしている） */
.experienceTimelineHero .experienceSubItem {
  width: 82%;
}

.experienceTimelineHero .experienceSubImg {
  height: 620px;
}

/* 全幅ブリードで section 自体の端まで広がったため、ナビボタンは
   スライダーの外（マイナス位置）ではなく内側に少し入れて配置する */
.experienceTimelineHero .experienceTimelineNav {
  top: 310px;
}

.experienceTimelineHero .experienceTimelineNav--prev {
  left: 20px;
}

.experienceTimelineHero .experienceTimelineNav--next {
  right: 20px;
}

@media screen and (max-width: 1250px) {
  .experienceTimelineHero .experienceSubItem {
    width: 88%;
  }
  .experienceTimelineHero .experienceSubImg {
    height: 380px;
  }
  .experienceTimelineHero .experienceTimelineNav {
    top: 190px;
  }
  .experienceTimelineHero .experienceTimelineNav--prev {
    left: 12px;
  }
  .experienceTimelineHero .experienceTimelineNav--next {
    right: 12px;
  }
}

@media screen and (max-width: 767px) {
  .experienceTimelineHero .experienceSubItem {
    width: 92%;
  }
}

/* ---- 庭園露天風呂：スライド下のリード文（コンテナ幅いっぱいだと<br>の位置で改行が不揃いになるため幅を絞って中央寄せ） ---- */
.leadTextNarrow {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- 庭園露天風呂／露天岩風呂：見出し上の「女湯・男湯」タグ ---- */
.bathGenderTag {
  display: inline-block;
  border: 1px solid currentColor;
  opacity: .9;
  padding: 5px 16px;
  font-size: 0.75rem;
  letter-spacing: .15em;
  margin-bottom: 14px;
}

/* ---- 内湯大浴場：女湯・男湯の2枚を横並びで表示（縦に細く切れないよう、横長のまま2カラム表示） ---- */
.indoorBathGenderImg {
  position: relative;
  overflow: hidden;
}

.indoorBathGenderImg img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.indoorBathGenderImgLabel {
  position: absolute;
  left: 14px;
  bottom: 14px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.7rem;
  letter-spacing: .15em;
  padding: 4px 14px;
}

@media screen and (min-width: 1251px) {
  .indoorBathGenderImg {
    height: 380px;
  }
}

@media screen and (max-width: 1250px) {
  .indoorBathGenderImg {
    height: 260px;
  }
}

/* ---- テキスト＋画像の2カラム帯（庭園／岩風呂／大浴場／泉質／間欠泉／日帰りで共通利用） ---- */
.splitBlock > .splitBlockImg > img {
  width: 100%;
  display: block;
  object-fit: cover;
}

@media screen and (min-width: 1251px) {
  .splitBlock > .splitBlockImg {
    height: 420px;
    overflow: hidden;
  }
  .splitBlock > .splitBlockImg > img {
    height: 100%;
  }
}

@media screen and (max-width: 1250px) {
  .splitBlock > .splitBlockImg {
    height: 260px;
    overflow: hidden;
    margin-bottom: 20px;
  }
  .splitBlock > .splitBlockImg > img {
    height: 100%;
  }
}

/* ---- 温泉の基本情報：表組みは明色セルのため文字色を明示（ダーク背景セクションでも可読に） ---- */
#infoTable .tableCommon01 th,
#infoTable .tableCommon01 td {
  color: #2b2620;
}

/* 表内の「要確認」表記（fcBrown02）は白系セル上で読めるよう、常に濃い色に固定する */
#infoTable .fcBrown02,
#infoTable .fcBrown02 a {
  color: #8a6d2f !important;
}

/* ---- 遊星館で過ごす「湯めぐりの時間」：2カラム時と同じ大きさのカードで横スクロール ---- */
.experienceTimelineWide {
  margin-top: 10px;
}

.experienceTimelineWide .experienceSubItem {
  width: min(42vw, 565px);
}

.experienceTimelineWide .experienceSubImg {
  height: min(28vw, 375px);
}

.experienceTimelineWide .experienceTimelineNav {
  top: min(14vw, 187px);
}

@media screen and (max-width: 1250px) {
  .experienceTimelineWide .experienceSubItem {
    width: min(75vw, 480px);
  }
  .experienceTimelineWide .experienceSubImg {
    height: min(50vw, 320px);
  }
  .experienceTimelineWide .experienceTimelineNav {
    top: min(25vw, 160px);
  }
}

/* ---- ご案内（注意事項）box ---- */
.noticeBox {
  border: 1px solid rgba(60, 48, 24, 0.3);
  padding: 30px 30px 30px 45px;
}

@media screen and (max-width: 767px) {
  .noticeBox {
    padding: 20px 20px 20px 35px;
  }
}