@charset "UTF-8";
/* =========================================================
   First-time Guest Page — LAVA Hot Wellness Singapore (CQ)
   Image-stacked build: sequential 01_ ... 28_ assets, base
   design width 750px. Fluid on mobile, letterboxed on PC.
   ========================================================= */

.ftWrapper {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  position: relative;
  background: #fff;
  box-shadow: rgba(100, 100, 111, 0.2) 0 0 26px 0;
  overflow: hidden;
}

/* PC表示限定：画像スタック全体の横幅を約100px狭める（750px→650px）
   .content自体は中央寄せ用の見えない外枠（1024px）で背景・枠線がなく、
   幅を変えても見た目は変わらないため、実際に画面に見える .ftWrapper の方を狭める */
@media screen and (min-width: 761px) {
  .ftWrapper {
    max-width: 500px;
  }
}

.ftImg {
  display: block;
  width: 100%;
  height: auto;
}

.ftImg--narrow {
  width: 92.5333%;
  margin: 0 auto;
}

.ftLink {
  display: block;
}

.ftLink .ftImg {
  transition: filter 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .ftLink:hover .ftImg {
    filter: brightness(1.15) saturate(0.9);
  }
}

/* Blank-image replacements: same height ratio as the original
   assets they replace, scaling fluidly with wrapper width. */
.ftSpacer {
  display: block;
  width: 100%;
}
.ftSpacer--05 { aspect-ratio: 750 / 47; }
.ftSpacer--09 { aspect-ratio: 750 / 96; }
.ftSpacer--19 { aspect-ratio: 750 / 42; }
.ftSpacer--21 { aspect-ratio: 750 / 107; }

.ftMap {
  width: 100%;
  line-height: 0;
}
.ftMap iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 750 / 400;
  border: 0;
}

/* Floating CTA button (floating_book_trial_pill.webp)
   画面幅いっぱい・マージン/パディングなしで画面の真下に固定。
   白＋黄色の背景は CSS で横長に伸ばし、赤ボタン（画像）は幅を別途指定。 */
.floatBtn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  margin: 0;
  display: none;
  z-index: 9999;
  background: #fff;
  border-top: 5px solid #ffcd00;
  box-sizing: border-box;
  padding: 14px 4%;
  text-align: center;
}
.floatBtn img {
  display: inline-block;
  width: 90%;
  max-width: 710px;
  height: auto;
  transition: filter 0.2s ease;
}
/* PC表示限定：赤ボタンをコンテンツと同じ横幅（.ftWrapper の650px）に合わせる */
@media screen and (min-width: 761px) {
  .floatBtn {
    padding: 18px 4%;
  }
  .floatBtn img {
    width: 100%;
    max-width: 650px;
  }
}
@media (hover: hover) and (pointer: fine) {
  .floatBtn:hover img {
    filter: brightness(1.15) saturate(0.9);
  }
}

#first-time-contents .content {
  padding: 0;
  margin-bottom: 0;
}
/* PC表示時の #ft-about（LAVAについて）上部の余白をこのページのみ調整
   共通CSS(modules_260928.css)の padding:120px 0; を上書きし、
   ft_about_img.jpgを非表示にした分、ft_about_logo.svgの上に少しだけ余白を残す */
#ft-about {
  padding-top: 40px;
}

/* PC表示限定：共通CSSの白→グレーのグラデーションは
   ft_about_img.jpg の高さ分を白にする前提だったため、
   画像を消したこのページでは 24_final_cta.webp の直下から
   グレーが始まるようにグラデーションを解除して単色のグレーにする
   （SPは元々グラデーションがないため、PCのみに限定） */
@media screen and (min-width: 761px) {
  #ft-about {
    background: #f5f5f5;
  }
}

/* 24_final_cta.webp と #ft-about の間の余白をこのページのみ完全に削除
   共通CSS(modules_260928.css)の .mainArea > article { margin-bottom: 120px/60px; }
   をID指定で打ち消す（#ft-about側のpadding-topだけでは消えなかった分） */
#first-time-contents {
  margin-bottom: 0;
}

/* 「LAVAについて」ブロックの ft_about_img.jpg をこのページのみ非表示にする。
   この CSS ファイルは first-time ページにしか読み込まれないため、
   他ページで共有している #ft-about（about_lava_261001.php）には影響しない。 */
.ft-about-img {
  display: none;
}