/* prana-tokyobay-test 施設用（hotel.css は触らない） */

/* 横スクロール抑制（html/body だと Concept sticky が壊れるため、はみ出しやすいセクションだけ） */
#home-section-badge,
#home-section-plan,
#home-experience {
  overflow-x: hidden;
}

/* ロゴが伸びてパートナー枠を潰さない */
#header-logo {
  flex-grow: 0;
  flex-shrink: 0;
  margin-right: 16px;
}

@media screen and (min-width: 768px) {
  #header-logo a img {
    height: 40px;
  }
}

/* パートナー表記 + ディズニーマーク（お手本相当）
   ロゴ左固定／パートナーはナビ左に寄せ（余白は左の auto が吸収 → 狭幅でもナビが逃げにくい） */
#header-partner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
  margin-right: 16px;
  font-size: 10px;
  font-weight: 300;
  line-height: 1.5;
  color: #555;
}

#header-partner p {
  margin: 0 8px 0 0;
  white-space: nowrap;
}

#header-partner img {
  display: block;
  width: 24px;
  height: 32px;
}

/*
  1440以上は上の見た目のまま。
  ノート実効幅（〜1439）だけパートナーを少し縮めてナビの折り返しを緩和。
*/
@media screen and (max-width: 1439px) and (min-width: 1280px) {
  #header-partner {
    margin-right: 10px;
    font-size: 9px;
    line-height: 1.4;
  }

  #header-partner p {
    margin-right: 6px;
  }

  #header-partner img {
    width: 20px;
    height: 27px;
  }

  #header-logo {
    margin-right: 12px;
  }

  #header-logo a img {
    height: 36px;
  }
}

/* SP：ナビがハンバーガーになる幅では文字を隠しマークだけ残す */
@media screen and (max-width: 1279px) {
  #header-partner p {
    display: none;
  }

  #header-partner {
    margin-right: 12px;
  }
}

/* Concept sticky 対策で後続セクションを z-index:20 にしたため、
   hotel.css の header(10) / #float-btn(9) が沈むのを施設側で前面に戻す */
header {
  z-index: 100;
}

#float-btn {
  z-index: 90;
}

/* =========================================================
   Information（Figma PC info 300:9251）
   - hotel.css の #D2CECE / 白バッジを施設のみ上書き
   - 他ホテルには影響しない
   ========================================================= */
#home-section-news {
  background: #FFFCF9; /* color/beige01 */
  /* Figma PC info: セクション上端→「Information」≈38px（hotel.css の 20px を上書き） */
  padding: 38px 0;
}

#home-section-news h2,
#home-section-news h2.serif {
  /* margin-bottom: 16px; */
  margin-bottom: 30px;
  color: #555; /* base/gray01 */
  font-family: "Arsenal", "Times New Roman", serif;
  font-size: 38px;
  font-weight: 400;
  line-height: 1;
}

#home-cico {
  margin: 0 0 20px;
}

#home-cico p,
#home-cico p:first-of-type {
  color: #333;
}

#home-cico .note {
  color: #333;
  font-size: 12.6px;
}

#home-news {
  color: #333;
}

#home-news dt {
  border-top-color: #EFE6D8; /* color/beige_line */
}

#home-news dt .date span:last-child.important {
  background: #F0DD8B; /* color/yellow */
  color: #333;
}

#home-news dd {
  border-top-color: #EFE6D8;
}

/*
  もっと見る矢印（#home-news-more）
  - 共通 v-down.svg は線が白 → ベージュ背景で消える
  - 共通画像を mask にし #333（Figma base/black_text）で塗る（施設のみ）
  - サイズは共通表示と同じ SVG 実寸（21×17）。16×8 指定だと潰れて小さく見える
*/
#home-news-more {
  background: #333;
  -webkit-mask: url(/assets/images/hotel/v-down.svg) center / 21px 17px no-repeat;
  mask: url(/assets/images/hotel/v-down.svg) center / 21px 17px no-repeat;
}

#home-news-more.active {
  background-image: none;
  -webkit-mask-image: url(/assets/images/hotel/v-up.svg);
  mask-image: url(/assets/images/hotel/v-up.svg);
}

@media screen and (max-width: 767px) {
  #home-section-news {
    padding-bottom: 85px; /* SPのみ。PC は padding: 38px 0 のまま */
  }

  #home-section-news h2,
  #home-section-news h2.serif {
    font-size: 28px;
  }
}

/* FV：銀座プレミア（#home-top-mov の 100vh 系）に合わせ、画面高さいっぱいに追従
   ※ header は fixed で上に乗る想定。固定 780px / 共通 80vh を上書き */
#home-main-visual .swiper-container {
  height: 100vh;
  height: 100dvh;
}

/* concept（Figma PC: 画像を top:0 でピン留め → 本文だけが上面にかぶさる）
   hotel.css（.home-section h2 等）に負けないよう #home-concept で詳細度を上げる */
#home-concept {
  /* かぶせ移動量（スペーサー高さと本文の負マージンを同じ値に揃える） */
  --concept-pin-travel: min(75vh, 680px);
  --concept-image-gap: 152px; /* Figma: 画像下〜ベージュまでの初期余白 */
  padding: 0;
  background: #FFFCF9; /* color/beige01 — 画像まわりの白っぽい帯 */
  border-radius: 0;
  overflow: visible;
  container-type: inline-size;
  container-name: home-concept;
}

/*
  ピン親 = 画像 + gap + 透明スペーサー
  - スペーサーで親を高くし sticky を有効化
  - 本文の -travel でスペーサー分を相殺し、初期の巨大な白空きを出さない
*/
#home-concept .home-concept-pin {
  position: relative;
  z-index: 0;
  height: auto;
}

#home-concept .home-concept-pin-inner {
  width: 100%;
  max-width: 1440px;
  height: auto;
  margin: 0 auto;
  padding: 0 50px; /* Figma PC 画像左右 inset 50 */
  box-sizing: border-box;
  overflow: visible;
}

#home-concept .home-concept-image {
  position: sticky;
  top: 0;
  z-index: 0;
  height: auto;
  margin: 0 0 var(--concept-image-gap);
  display: block;
  box-sizing: border-box;
  padding: 41px 0 0;
  background: #FFFCF9;
}

#home-concept .home-concept-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

/* sticky 維持用の透明領域（本文が前面で覆うので画面上は空きに見えない） */
#home-concept .home-concept-pin-spacer {
  height: var(--concept-pin-travel);
  pointer-events: none;
  visibility: hidden;
}

/* 本文は前面。-travel でスペーサーと相殺し、スクロールで画像へかぶさる
   ※100vw + (50% - 50vw) はスクロールバー分で横スクロールしやすいため 100% に */
#home-concept .home-concept-body {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-top: calc(-1 * var(--concept-pin-travel));
  padding: 19px 0 0; /* Figma: タイトル y2153 − beige y2124 */
  background: #F7F3EC; /* color/beige02 */
  border-radius: 20px 20px 0 0;
  box-sizing: border-box;
  overflow: visible;
}

/* Figma PC 300:11032 — Arsenal 90px / #EFE6D8 / 中央 */
#home-concept .home-concept-bg-title {
  display: block;
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: 1384px;
  margin: 0 auto;
  box-sizing: border-box;
  font-family: "Arsenal", "Times New Roman", serif;
  font-size: min(90px, calc(100cqi * 90 / 1384));
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: #EFE6D8;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  pointer-events: none;
}

#home-concept .home-concept-bg-title .pc-line {
  display: block;
  width: 100%;
  white-space: nowrap;
}

#home-concept .home-concept-bg-title .sp-only {
  display: none;
}

/* PC基準1440の中央カラム */
#home-concept .home-concept-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: 1440px;
  margin: 81px auto 0;
  /* gap: min(120px, 8.333%); 120/1440 */
  gap: min(120px, 8.333vw); /* 120/1440 */
  padding-left: min(240px, 16.667%); /* Figma x=240 */
  padding-right: min(212px, 14.722%); /* Figma 右端余白 */
  box-sizing: border-box;
}

/* .home-section h2（hotel.css）より詳細度を高くし margin-bottom:30px / font-size:70px を無効化
   見出しは Figma改行単位で nowrap。列幅に応じて 32px を上限に縮小（中間で独自1カラムにしない） */
#home-concept h2.home-concept-heading,
#home-concept .home-concept-heading {
  flex: 1 1 383px;
  width: auto;
  max-width: 383px;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 2;
  color: #333;
  container-type: inline-size;
  container-name: home-concept-heading;
}

#home-concept .home-concept-heading-line {
  display: block;
  white-space: nowrap;
  font-size: min(32px, calc(100cqi * 32 / 383));
}

#home-concept .home-concept-text {
  flex: 1 1 485px;
  width: auto;
  max-width: 485px;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 2.6;
  color: #333;
}

#home-concept .home-concept-text p {
  margin: 0 0 45px;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  /* 本文はnowrapしない。Figma改行は<br>、幅不足時は自然折り返し可 */
}

/* PCでは出さず、SPだけ改行（Figma: そっと受け止めます／穏やかな時間が…） */
#home-concept .home-concept-text br.sp-break {
  display: none;
}

#home-concept .home-concept-text p:last-child {
  margin-bottom: 0;
}

/* 動きを減らす設定時: ピン解除・通常の縦積み（Figma静止に近い） */
@media (prefers-reduced-motion: reduce) {
  #home-concept {
    --concept-pin-travel: 0px;
  }

  #home-concept .home-concept-pin {
    height: auto;
  }

  #home-concept .home-concept-pin-inner {
    height: auto;
  }

  #home-concept .home-concept-image {
    position: static;
    top: auto;
    height: auto;
    padding: 80px 0 0;
    margin-bottom: var(--concept-image-gap);
  }

  #home-concept .home-concept-pin-spacer {
    display: none;
  }

  #home-concept .home-concept-body {
    margin-top: 0;
  }
}

/* 中間幅: 1カラム化はしない（767のみ）。余白を譲り、PC用<br>は外して自然折り返しに任せる */
@media screen and (max-width: 1023px) and (min-width: 768px) {
  #home-concept {
    --concept-pin-travel: min(60vh, 520px);
    --concept-image-gap: 80px;
  }

  #home-concept .home-concept-pin-inner {
    padding-left: 40px;
    padding-right: 40px;
  }

  #home-concept .home-concept-image {
    padding: 40px 0 0;
  }

  #home-concept .home-concept-inner {
    gap: min(48px, 5%);
    padding-left: min(80px, 8%);
    padding-right: min(64px, 6%);
  }

  #home-concept .home-concept-text br.pc-break {
    display: none;
  }
}

/*
  PC幅: 写真表示高が大きくなるので travel（スペーサー）を延ばす
  - 1024 / 1280 は幅のみ（大モニター向け）
  - ノート（IdeaPad 等）は高さが足りず末尾が早く終わるので、高さ条件で別途延長
  - 本文の margin-top も同じ変数なのでセットで伸びる
*/
@media screen and (min-width: 1024px) {
  #home-concept {
    --concept-pin-travel: min(85vh, 820px);
  }
}

@media screen and (min-width: 1280px) {
  #home-concept {
    /* 広めPC・モニター: 以前の体感に戻す */
    --concept-pin-travel: min(90vh, 960px);
  }
}

/* ノート寄り（幅はPCだが innerHeight が低い）: かぶせが写真より先に終わらないよう travel を延ばす */
@media screen and (min-width: 1280px) and (max-height: 900px) {
  #home-concept {
    --concept-pin-travel: min(110vh, 1200px);
  }
}

@media screen and (max-width: 767px) {
  /* SP: PC同様に画像 sticky → ベージュ本文がかぶさって上がる
     Figma静止の見た目（左右30・角丸10・gap78）は維持しつつ pin を有効化 */
  #home-concept {
    --concept-pin-travel: min(70vh, 520px); /* 画像≈460高＋余韻（短すぎると終端がぎこちない） */
    --concept-image-gap: 78px; /* Figma: 画像下〜ベージュ */
    padding: 0;
    background: #FFFCF9; /* color/beige01 */
    border-radius: 0;
    overflow: visible;
  }

  #home-concept .home-concept-pin {
    height: auto;
  }

  #home-concept .home-concept-pin-inner {
    height: auto;
    padding: 0 30px;
    padding-bottom: 0;
    overflow: visible;
  }

  /* sticky 用スペーサー再表示（本文の -travel と対） */
  #home-concept .home-concept-pin-spacer {
    display: block;
    height: var(--concept-pin-travel);
    visibility: hidden;
    pointer-events: none;
  }

  /* 画像: SP専用 concept-01-sp / sticky / 330×460 / radius 10 */
  #home-concept .home-concept-image {
    position: sticky;
    top: 0;
    z-index: 0;
    height: auto;
    margin: 0 0 var(--concept-image-gap);
    padding: 0;
    display: block;
    background: #FFFCF9; /* sticky 中も帯色を維持 */
  }

  #home-concept .home-concept-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 330 / 460; /* Figma SP 304:2362 */
    object-fit: cover;
    object-position: center bottom;
    border-radius: 10px;
  }

  /* 英字〜本文: 前面で -travel 相殺し、スクロールでかぶせ */
  #home-concept .home-concept-body {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-top: calc(-1 * var(--concept-pin-travel));
    padding: 16px 30px 80px; /* タイトル上 2250-2234=16 */
    background: #F7F3EC;
    border-radius: 20px 20px 0 0;
    box-sizing: border-box;
  }

  /* SP: Arsenal 46px × 2行 / 中央（304:2366 / 304:2370）
     nowrap + コンテナ幅で縮小（基準370幅で46pxが最大） */
  #home-concept .home-concept-bg-title {
    max-width: none;
    margin: 0 -20px 20px; /* bodyの30px → 実質10px相当 */
    padding-top: 0;
    font-size: min(46px, calc(100cqi * 46 / 370));
    line-height: 1;
    white-space: normal;
    overflow: hidden;
    transform: none;
  }

  #home-concept .home-concept-bg-title .pc-line {
    display: none;
  }

  #home-concept .home-concept-bg-title .sp-only {
    display: block;
    width: 100%;
    text-align: center;
    white-space: nowrap;
  }

  #home-concept .home-concept-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  #home-concept h2.home-concept-heading,
  #home-concept .home-concept-heading {
    flex: none;
    max-width: none;
    width: 100%;
    margin: 0;
    /* SP基準390で24px、広いSP帯ではわずかに拡大（上限28）。320帯は line 側で防衛 */
    font-size: clamp(24px, calc(24px + (100vw - 390px) * 4 / 377), 28px);
    font-weight: 500;
    line-height: 2;
  }

  #home-concept .home-concept-heading-line {
    /* 改行は維持。幅不足（〜320）のみ cqi で縮小 */
    font-size: min(
      clamp(24px, calc(24px + (100vw - 390px) * 4 / 377), 28px),
      calc(100cqi * 24 / 320)
    );
  }

  #home-concept .home-concept-text {
    flex: none;
    max-width: none;
    width: 102%;
    margin: 0;
    /* SP基準390で16px、〜767で最大18px。意図改行を活かした余白感用 */
    font-size: clamp(16px, calc(16px + (100vw - 390px) * 2 / 377), 18px);
    font-weight: 500;
    line-height: 2.6;
  }

  #home-concept .home-concept-text p {
    margin: 0 0 45px;
  }

  #home-concept .home-concept-text p:last-child {
    margin-bottom: 0;
  }

  #home-concept .home-concept-text br.sp-break {
    display: unset;
  }
}

/* SP + 動き軽減: かぶせオフ（縦積みに戻す） */
@media screen and (max-width: 767px) and (prefers-reduced-motion: reduce) {
  #home-concept {
    --concept-pin-travel: 0px;
  }

  #home-concept .home-concept-image {
    position: static;
    top: auto;
  }

  #home-concept .home-concept-pin-spacer {
    display: none;
  }

  #home-concept .home-concept-body {
    margin-top: 0;
  }
}

/* =========================================================
   Experience（Figma大枠・仮スライド）
   - スタイルはすべて #home-experience 配下（他 Swiper に触れない）
   - z-index: concept sticky 画像が下セクションに透けないよう前面へ
   ========================================================= */
#home-experience {
  position: relative;
  z-index: 20;
  padding: 110px 0 93px;
  background: #F7F3EC;
  box-sizing: border-box;
  overflow: hidden;
}

#home-experience .home-experience-header {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 min(120px, 8.333%); /* Figma PC 左120 / 1440 */
  box-sizing: border-box;
}

#home-experience .home-experience-header h2,
#home-experience h2.home-experience-title {
  margin: 0 0 15px;
  padding: 0;
  font-family: "Arsenal", "Times New Roman", serif;
  font-size: 38px; /* Figma Experience タイトル */
  font-weight: 400;
  line-height: 1;
  color: #555; /* base/gray01 */
}

#home-experience .home-experience-header .sub,
#home-experience .home-experience-sub {
  margin: 0 0 60px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  color: #333;
}

#home-experience .home-experience-swiper {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 0 60px min(120px, 8.333%); /* Figma PC 左120。最終カードの送りは JS slidesOffsetAfter */
  box-sizing: border-box;
  overflow: visible;
}

#home-experience .home-experience-swiper .swiper-wrapper {
  /* Figma: アクティブ400 / 覗き見300 は上揃え（y同位置） */
  align-items: flex-start;
}

/*
  スライド幅は常にアクティブ相当で固定（Swiper の移動計算を安定させる）
  大小の見た目は内側の media / body だけで変える → ぎこちない再計算を防ぐ
  最終カードも同じ幅。末尾で active にできるよう home-experience.js で slidesOffsetAfter を付与
*/
#home-experience .home-experience-swiper .swiper-slide {
  width: min(1000px, 69.444vw); /* 1000/1440 — 常時固定 */
  height: auto;
  min-height: min(400px, 27.778vw);
  box-sizing: border-box;
}

#home-experience .home-experience-card {
  display: flex;
  align-items: flex-start;
  gap: min(40px, 2.778vw);
  min-height: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-sizing: border-box;
}

/* 画像枠の共通（サイズは PC/SP で分ける） */
#home-experience .home-experience-card__media {
  position: relative;
  flex: 0 0 auto;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  transform-origin: left top;
  transition: width 0.4s ease, height 0.4s ease;
}

#home-experience .home-experience-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 0;
}

/* 非アクティブ（右の覗き見）を暗く — Figma rgba(0,0,0,0.2) */
#home-experience .home-experience-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

/*
  PC専用: アクティブ大小切替・末尾 is-experience-end-active
  ※ SP（max-width:767）に漏らさない（詳細度負け防止）
*/
@media screen and (min-width: 768px) {
  /* アクティブ画像枠 600×400（Figma Group 147） */
  #home-experience .home-experience-card__media {
    width: min(600px, 41.667vw);
    height: min(400px, 27.778vw);
  }

  #home-experience .swiper-slide:not(.swiper-slide-active):not(.is-experience-end-active) .home-experience-card {
    gap: 0;
  }

  /* 覗き見画像 450×300 — スライド幅は変えず、画像だけ小さく */
  #home-experience .swiper-slide:not(.swiper-slide-active):not(.is-experience-end-active) .home-experience-card__media {
    width: min(450px, 31.25vw);
    height: min(300px, 20.833vw);
    border-radius: 10px;
  }

  #home-experience .swiper-slide:not(.swiper-slide-active):not(.is-experience-end-active) .home-experience-card__media::after {
    opacity: 1;
  }

  #home-experience .swiper-slide:not(.swiper-slide-active):not(.is-experience-end-active) .home-experience-card__body {
    display: none;
  }

  /* 末尾到達時のみ最終カードをアクティブ相当に（IdeaPad等で active が付かない対策） */
  #home-experience .swiper-slide.is-experience-end-active .home-experience-card {
    gap: min(40px, 2.778vw);
  }

  #home-experience .swiper-slide.is-experience-end-active .home-experience-card__media {
    width: min(600px, 41.667vw);
    height: min(400px, 27.778vw);
  }

  #home-experience .swiper-slide.is-experience-end-active .home-experience-card__media::after {
    opacity: 0;
  }

  #home-experience .swiper-slide.is-experience-end-active .home-experience-card__body {
    display: flex;
  }

  #home-experience .home-experience-card__body {
    width: min(360px, 25vw);
  }
}

#home-experience .home-experience-card__body {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  padding: 0;
  box-sizing: border-box;
}

#home-experience .home-experience-card__body h3 {
  margin: 0 0 16px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.5;
  color: #333;
}

#home-experience .home-experience-card__body p {
  margin: 0 0 50px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.75;
  color: #333;
}

/* PC意図改行。SPは自然折り返し（Figma PC: は、／です。で改行） */
#home-experience .home-experience-card__body br.sp-break {
  display: none;
}

#home-experience .home-experience-card__link {
  margin-top: auto;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  text-decoration: none;
}

#home-experience .home-experience-card__link:hover {
  text-decoration: underline;
}

/* scrollbar（#home-experience 限定スキン） */
#home-experience .home-experience-scrollbar {
  left: min(120px, 8.333%);
  right: min(120px, 8.333%);
  bottom: 0;
  width: auto;
  height: 2px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 0;
}

#home-experience .home-experience-scrollbar .swiper-scrollbar-drag {
  background: #de680e;
  border-radius: 0;
  height: 2px;
}

/* SP Figma 304:275 — ヘッダー gap10→35 / カード310×206.67 / 1枚目白マット */
@media screen and (max-width: 767px) {
  #home-experience {
    padding: 35px 0 40px; /* bg上端〜見出し 35（3046→3081） */
  }

  #home-experience .home-experience-header {
    padding: 0 30px;
  }

  #home-experience .home-experience-header h2,
  #home-experience h2.home-experience-title {
    margin: 0 0 10px; /* Figma gap 10 */
    font-size: 28px;
    line-height: 1;
    color: #555;
  }

  #home-experience .home-experience-header .sub,
  #home-experience .home-experience-sub {
    margin: 0 0 35px; /* ヘッダー〜カード gap 35 */
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    color: #555;
  }

  #home-experience .home-experience-swiper {
    /* 左右30 / カード〜スクロールバー gap 50 */
    padding: 0 30px 50px 30px;
  }

  /*
    SP Figma: カード幅310 / 間隔20 / 左30
    → 横スライドのみ。アクティブでも画像・文字サイズ／gap は変えない（PCの縮小ルールを打ち消し）
  */
  #home-experience .home-experience-swiper .swiper-slide {
    width: min(310px, calc(100vw - 80px));
    min-height: 0;
  }

  /* PCの last-child 幅特例は廃止（全スライド同幅）。SPは共通幅を上書き */
  #home-experience .home-experience-swiper .swiper-slide:last-child {
    width: min(310px, calc(100vw - 80px));
  }

  #home-experience .home-experience-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  /* PCの「非アクティブ gap:0」を打ち消し → 文字が下に動かない */
  #home-experience .swiper-slide:not(.swiper-slide-active) .home-experience-card {
    gap: 20px;
  }

  #home-experience .home-experience-card__media {
    width: 100%;
    height: auto;
    aspect-ratio: 310 / 206.67; /* Figma SP */
    max-height: none;
    border-radius: 10px;
    transition: none; /* サイズ変化アニメを止める */
  }

  #home-experience .swiper-slide:not(.swiper-slide-active) .home-experience-card__media {
    width: 100%;
    height: auto;
    aspect-ratio: 310 / 206.67;
    max-height: none;
  }

  /* 1枚目のみ: 白マット＋内側余白（Figma 408:675 / 408:677） */
  #home-experience .home-experience-card--framed .home-experience-card__media {
    position: relative;
    box-sizing: border-box;
    background: #fff;
    overflow: hidden;
  }

  #home-experience .home-experience-card--framed .home-experience-card__media img {
    position: absolute;
    left: 25.83px;
    top: 11.88px;
    width: calc(100% - 51.66px); /* 25.83 × 2 */
    height: calc(100% - 23.76px); /* 11.88 × 2 */
    object-fit: cover;
    border-radius: 0;
  }

  #home-experience .home-experience-card--framed .home-experience-card__credit {
    display: block;
    position: absolute;
    right: 8px;
    bottom: 4px;
    z-index: 1;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 6.2px;
    font-weight: 400;
    line-height: 1.5;
    color: #333;
    pointer-events: none;
  }

  /* SPは覗き見でもタイトル頭が見える（お手本どおり本文を消さない） */
  #home-experience .swiper-slide:not(.swiper-slide-active) .home-experience-card__body {
    display: flex;
    align-self: flex-start;
    justify-content: flex-start;
  }

  /* SPの覗き見は暗幕なし（お手本は通常表示の見切れ） */
  #home-experience .swiper-slide:not(.swiper-slide-active) .home-experience-card__media::after {
    opacity: 0;
    transition: none;
  }

  #home-experience .home-experience-card__body {
    width: 100%;
    padding: 0;
    align-self: flex-start;
    justify-content: flex-start;
    gap: 0;
  }

  #home-experience .home-experience-card__body h3 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
  }

  #home-experience .home-experience-card__body p {
    margin: 0 0 20px; /* 本文〜リンク gap 20 */
    font-size: 14px;
    font-weight: 500;
    line-height: 1.75;
  }

  #home-experience .home-experience-card__link {
    margin-top: 0; /* PCの auto を打ち消し（Figmaは gap 固定） */
  }

  #home-experience .home-experience-card__body br.pc-break {
    display: none;
  }

  #home-experience .home-experience-card__body br.sp-break {
    display: unset;
  }

  #home-experience .home-experience-scrollbar {
    left: 30px;
    right: 30px;
    width: auto;
    background: #ddd5c7; /* Figma 304:318 */
  }
}

/* PC: ©Disney は出さない（SP専用） */
#home-experience .home-experience-card__credit {
  display: none;
}

/* =========================================================
   Rewards バナー帯 / Pickup Plan〜Campaign（Figma PC_TOP）
   - バナー帯: Experience と同じ beige02（body 灰を消す）
   - Plan: hotel.css #C7B299 → color/yellow
   ========================================================= */
/* sticky 画像の上に後続セクションを重ねる（透け防止） */
#home-rewards-banner,
#home-section-plan,
#home-section-topics,
#home-section-gallery,
#home-section-map,
#home-section-badge {
  position: relative;
  z-index: 20;
}

#home-rewards-banner {
  background: #F7F3EC; /* color/beige02 */
  padding-bottom: 80px; /* 目安。見た目で 80〜120 を調整 */
}

/* Figma bnr 1200幅。共通 hotel.css の padding:0 10% を施設のみ解除 */
#home-rewards-banner .home-banner-wrap {
  padding-left: 0;
  padding-right: 0;
}

#home-section-plan {
  background: #F0DD8B; /* color/yellow — Figma pickup/campaign bg */
  padding: 58px 0 80px; /* hotel の section.home-section を上書き */

}

/* =========================================================
   英語セクション見出し（Figma: Arsenal Regular 38 / gray01）
   - hotel.css .serif（Noto Serif JP）・h2 20px を施設側で上書き
   - Topics のみ暗背景のため白
   ========================================================= */
#home-section-plan h2,
#home-section-plan h2.serif,
#home-campaign h2,
#home-campaign h2.serif,
#home-section-gallery h2,
#home-section-gallery h2.serif,
#home-section-map h2,
#home-section-map h2.serif,
#home-outbound h2,
#home-outbound h2.serif,
#home-section-topics > .content > h2,
#home-section-topics > .content > h2.serif {
  font-family: "Arsenal", "Times New Roman", serif;
  font-size: 38px;
  font-weight: 400;
  line-height: 1;
  color: #555; /* base/gray01 */
}

#home-section-plan h2,
#home-section-plan h2.serif {
  margin-bottom: 54px; /* hotel の 20px を上書き */
}

/* Pickup だけ（Campaign との間の余白） */
#home-section-plan > .content > .pickup-plan.swiper-container {
  padding-bottom: 130px;
}

/* Campaign だけ（Topics との間） */
#home-campaign .swiper-container {
  padding-bottom: 40px; /* 見た目で 30〜60 程度に調整 */
}

#home-section-plan .pickup-plan a {
  font-weight: 500; /* Figma Medium */
}

#home-section-badge > .content > hr {
  margin: 60px 0; /* hotel の section hr（62px）を上書き */
}

/*
  Outbound 下〜住所（#hotel-info-section）
  Figma Frame 368: links 下端 y188 → 住所ブロック y248 ＝ 約60px
  hotel は Outbound pb50 + badge 下40 + hotel-info pt50 で空きすぎる
*/
#home-section-badge.home-section {
  padding-bottom: 0;
}

#home-outbound .swiper-container {
  padding-bottom: 24px; /* scrollbar 用の最小限（hotel 50px を上書き） */
}

#hotel-info-section {
  padding-top: 42px; /* Outbound 下〜住所 ≈ Figma 60 との兼ね合い */
}

#hotel-info-section .hotel-info {
  padding-top: 0; /* hotel の 20px を外し、住所をブロック上端に */
  padding-bottom: 30px; /* 電子パンフ下〜次セクション前 */
}

/* Figma Frame 327: 住所13 Medium / TEL15 / 注意12.6 #888・下線・行間10 / ブロック間30 */
#hotel-info-section .hotel-info .address {
  margin: 0 0 10px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: #333;
}

#hotel-info-section .hotel-info a.tel {
  color: #333; /* hotel の #121212 → Figma base/black_text */
}

#hotel-info-section .hotel-info .address + p {
  margin: 0 0 20px; /* 住所+TEL グループ → 注意文（Figma gap 20） */
}

#hotel-info-section .hotel-info .note {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12.6px;
  font-weight: 400;
  line-height: 1.5;
  color: #888; /* base/gray02 */
  text-decoration: underline;
}

#hotel-info-section .hotel-info .note + .note {
  margin-top: 10px;
}

#hotel-info-section .hotel-info-form {
  margin: 30px auto; /* 注意文〜ボタン / ボタン〜PDF（Figma gap 30） */
}

#hotel-info-section .hotel-info a.pdf {
  display: inline-block;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

/* Share with Mitsui / Our Brands（rsv-jp.html .sns-section） */
.sns-section {
  padding-top: 21px; /* hotel を施設側で上書き */
}

/*
  Outbound: 中間幅だけスライドを広げ、長い文言が固定高さ60pxから溢れないようにする
  - 高さは共通のまま（カード凸凹を避ける）
  - 768–1023: 共通 300px だと文字幅不足（例: バルドラール）
  - SP・広めPCは共通のまま
*/
@media screen and (min-width: 768px) and (max-width: 1023px) {
  #home-outbound .swiper-slide {
    /* Swiper の inline width を上書き */
    width: 380px !important;
  }
}

#home-section-topics > .content > h2,
#home-section-topics > .content > h2.serif {
  color: #fff; /* Figma Topics — base/white */
  margin-bottom: 61px; /* hotel の .home-section h2 を上書き */
}

#home-section-topics.home-section {
  padding: 61px 0 80px; /* hotel の section.home-section を上書き */
  margin-bottom: 20px; /* hotel の section.grd 30px を上書き */
}

#home-topics .swiper-container {
  padding-bottom: 82px; /* hotel の 50px を上書き */
}

/* Topics カード／アクセント（Figma PC topics）
   - サムネ: 正方形＋cover で円が潰れないように
   - 短い縦線・scrollbar: #FFAB61
   - カード区切り線: #585244
   - hotel.css（#f00 / #fff）を施設のみ上書き */
#home-topics .thumbnail {
  width: 240px;
  max-width: 80%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  object-position: center;
}

#home-topics .doc {
  border-right-color: #585244;
  line-height: 1.75;
  padding: 4% 0; /* hotel の 5% を上書き */

}

#home-topics .swiper-slide:first-child .doc {
  border-left-color: #585244;
}

#home-topics .doc::before {
  border-right-color: #FFAB61;
}

#home-topics .swiper-scrollbar-drag {
  background: #FFAB61;
}

/* =========================================================
   Photo Gallery / Map（Figma: 連続する beige02 帯）
   - Gallery: モザイク1枚＋./photogallery/ リンク
   - 画像パスは test.html の <style>
   ========================================================= */
#home-section-gallery,
#home-section-map {
  background: #F7F3EC; /* color/beige02 — Gallery〜Map 同色 */
}

#home-section-map {
  padding-top: 80px; /* hotel の section.home-section（40px 上下）のうち上だけ伸ばす */
  padding-bottom: 72px;
}

#home-section-map iframe.google-map {
  margin-bottom: 27px; /* hotel の 10px を上書き */
}

#home-section-gallery h2,
#home-section-gallery h2.serif,
#home-section-map h2,
#home-section-map h2.serif {
  margin-bottom: 50px; /* Figma: 見出し〜コンテンツ */
}

#home-section-gallery #home-gallery-banner {
  /* hotel.css の a#home-gallery-banner 相当（リンク廃止のため div でも同サイズ） */
  display: block;
  height: 0;
  padding-bottom: 33.3%; /* PC 1200×400 */
  /* Figma 差し替えバナー — hotel.css の cover ではなく枠ぴったり */
  background-size: 100% 100%;
  background-position: center top;
  background-repeat: no-repeat;
}

@media screen and (max-width: 767px) {
  #home-section-gallery #home-gallery-banner {
    padding-bottom: 66.7%; /* SP 約 3:2（1800×1200） */
  }
}

/* Map アクセス文言（Figma: ■と2行目を左揃え／駅名 Medium・詳細 Regular） */
#home-section-map .annotation-1 > li {
  padding-left: 0; /* hotel の 1.5em ぶら下げを解除 */
  margin-bottom: 30px;
  line-height: 1.75;
}

#home-section-map .annotation-1 > li > span:first-of-type,
#home-section-map .map-access-title > span:first-of-type {
  position: static; /* hotel の absolute を解除 */
}

#home-section-map .map-access-title,
#home-section-map .map-access-body {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 500; /* Figma: 両行とも Medium */
  color: #555;
  line-height: 1.75;
}

/* =========================================================
   共通フッター配色（Prana Figma PC_TOP footer 300:9566 のみ）
   - HTML は共通 include のまま。他館の hotel.css は触らない
   - 共通 body は #f5f5f5 のため、背景未指定の中身がグレーに見える
   - 中身を白に。見出しバー・#footer-links-1（#e6e6e6）と #copy（#f9e8d3）は共通のまま
   ========================================================= */
footer {
  background: #fff;
}

#footer-hotel-list,
#group-links-more {
  background: #fff;
}

/* =========================================================
   追従CTA（#float-btn）色のみ施設上書き
   - HTML/文言は共通 include のまま
   - Figma PC 追従 300:10960 / color/orange・green
   - hotel.css・共通 style より詳細度を上げて他館に影響させない
   ========================================================= */
#float-btn #coupon-banner a {
  background: #DE680E; /* color/orange — 共通は #e60012 */
  color: #fff;
}

#float-btn #qr-checkin-banner a {
  background: #098A74; /* color/green — 共通は #004098 */
  color: #fff;
}

/* ご予約はこちら（白地＋オレンジ上枠） */
#float-btn li a#modal-rsv-btn {
  color: #DE680E;
  border-top-color: #DE680E;
  font-weight: 700;
}

#float-btn li a#modal-rsv-btn span {
  color: #DE680E; /* 共通 span は #e60012 */
}

/* 新規会員登録・会員ログイン（白地＋グリーン上枠） */
#float-btn ul > li:last-child > a {
  color: #098A74;
  border-top-color: #098A74;
}

/* =========================================================
   SP FV下 施設アイコン（#home-facility / section.m-on = PC非表示）
   Figma SP_TOP link: 特典→客室→朝食→レストラン→大浴場→館内→周辺
   ※ 指示があるまで PC には影響させない
   ========================================================= */
@media screen and (max-width: 1023px) {
  /* #home-facility を包む section だけ（PCは m-on で非表示） */
  section.home-section.m-on {
    padding: 38px 0 35px; /* hotel の section.home-section を上書き */
  }

  #home-facility .facility-icon-privilege {
    background-image: url(/assets/images/prana-tokyobay-test/facility-icon/privilege.svg);
    background-size: 28px auto;
  }

  #home-facility li a {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.1;
    color: #888;
  }
}