@charset "UTF-8";
/* ============================================================
   style.css … PC用（画面幅 801px 以上で読み込み）
   ローズウッド宮古島（00003272）一休タイアップLP
   コンセプト：宮古ブルー × 白砂 × 夕陽のゴールド／「発見と再生の旅程」
   ※スマホ用の style_sd.css とは完全に独立（片方だけ直しても、もう片方には反映されない）。
     色やフォントを変えるときは、両ファイル冒頭の :root を同じ値にそろえること。
   ------------------------------------------------------------
   ■ このファイルの前提
     ・html { font-size: 62.5% } で 1rem = 10px。文字サイズは rem 指定（例：1.6rem = 16px）。
     ・色・フォントは冒頭 :root の変数（--sand など）で管理。色を変えるときは変数を直す。
     ・画像は本番画像サーバ（img-ikyu）の
         https://www.img-ikyu.com/contents/dg/special/2026/00003272/image/
       に置く前提。URL末尾の ?auto=compress,format&fit=crop&w=…&h=… は
       imgix の自動圧縮・切り抜き指定（fp-y で縦方向の切り抜き位置を調整）。
     ・スクロールで要素をふわっと出す動きは js/common.js（IntersectionObserver）が
       .list-mv01 に .mv01 を付けて実現。変化にかかる時間は HTML 側の
       style="transition: 1.6s;" で指定している。
     ・スライダーは Swiper 4.5（js/other.js で初期化）。
     ・料金ボタンの金額表示は一休共通の stay-common.js が自動で差し込む（本番のみ）。
     ・Googleマップは index.html 内のスクリプトで描画（本番ドメインのみ表示）。

   ■ 目次（HTMLの並び順）
     1. ベース / 共通パーツ（見出し・ワードマーク・スクロール表示）
     2. オープニング（ページ表示直後のアニメーション）
     3. ① HEADER（TOPスライダー・上部ナビ・キャッチ）／固定ナビ
     4. ② ABOUT（全面写真＋施設概要＋施設詳細ボタン）
     5. ③ TOPICS（Journey 01〜06：テキスト＋縦長写真スライダー）
     6. ④ PLAN（Special Offer：写真付きプランカード）
     7. ⑤ ACCESS（施設名・住所／地図＋写真・施設紹介）／FOOTER
     8. ページトップボタン
   ============================================================ */

/* ★デザイントークン（この案件の「表情」）※PC専用・独立管理。style_sd.css にも同じ値を持たせる */
:root{
  --sand:      #f4efe7;   /* 基調（白砂） */
  --sand-2:    #fbf8f3;   /* 明るいパネル */
  --shell:     #e7ddcf;   /* 区切り・淡色 */
  --ink:       #1c2e35;   /* 基本文字（深い海の色） */
  --ink-soft:  #4b575b;   /* 本文 */
  --blue:      #1f6a74;   /* 宮古ブルー（深） */
  --blue-2:    #2f8f95;   /* 宮古ブルー（明） */
  --blue-pale: #d5e5e3;   /* 淡いターコイズ */
  --gold:      #b08a5c;   /* 夕陽のゴールド（差し色） */
  --line:      #d6cbbb;   /* 罫線 */
  --font-en:   'Marcellus', 'Times New Roman', serif;
  --font-it:   'Cormorant Garamond', 'Times New Roman', serif;
  --font-jp:   'Zen Old Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --img-plan-bg: url(https://www.img-ikyu.com/contents/dg/special/2026/00003272/image/ss03.jpg?auto=compress,format&fit=crop&w=1920&h=1080&lossless=0&q=70);
}

/* ---------- 1. ベース ----------
   1rem = 10px にするための基準。以降の font-size はすべて rem で指定する */
html { font-size: 62.5%; }
body {
  color: var(--ink);
  background: var(--sand);
  width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: left;
  font-size: 1.6rem;
  line-height: 1.8;
  font-family: var(--font-jp);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
/* 見出しタグの既定の余白・太さをリセット */
h1,h2,h3,h4 { width: 100%; display: block; font-weight: 500; margin: 0; padding: 0; }
* { box-sizing: border-box; }
a { text-decoration: none; color: inherit; }
p { margin: 0; }
img { vertical-align: bottom; }
.sp_br { display: none; }
/* clearfix（float を使った要素の後ろで回り込みを解除する汎用クラス） */
.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }

/* ページ全体のラッパー（#top）とコンテンツ部分のラッパー */
.mainbody { width: 100%; margin: 0 auto; }
.contents_wrpper { width: 100%; margin: 0 auto; }

/* ---------- スクロール表示 ---------- */
/* .fade01 / .fade02：ふわっと表示（.fade02 は TOPのキャッチ。オープニング明けに表示を遅らせる指定は後述）
   .list-mv01 → .mv01：スクロールで画面に入ったら下からふわっと表示（js/common.js が .mv01 を付与）
   .move02：下から浮き上がる表示（予備） */
.fade01 { animation: fade 3.5s; animation-fill-mode: forwards; opacity: 1; }
.fade02 { animation: fade 2.2s; animation-fill-mode: forwards; opacity: 1; }
.list-mv01 { opacity: 0; transform: translateY(30px); }
.mv01 { opacity: 1.0; transform: translateY(0); }
.move02 { animation: bottom-to-top 2s; animation-fill-mode: forwards; opacity: 1; }
@keyframes fade { 0% { opacity: 0; } 30% { opacity: 0; } 100% { opacity: 1; } }
@keyframes bottom-to-top { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0); } }
/* TOPスライドの写真を 1.1倍 → 等倍へゆっくりズームさせる動き */
@keyframes kenburns { 0% { transform: scale(1.1); } 100% { transform: scale(1); } }
/* TOP下中央「Scroll」の縦線が上から伸びて下へ消える動き（無限ループ） */
@keyframes scrollLine { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- ワードマーク（施設ロゴ代替） ---------- */
/* テキストのロゴ用クラス。.wm_s は「MIYAKOJIMA」の小さい文字。
   letter-spacing（字間）は最後の文字の右にも付くため、同じ分だけ margin-right をマイナスにして中央揃えのずれを打ち消している */
.wm, .wm_s { display: block; font-family: var(--font-en); line-height: 1; text-align: center; }
.wm   { font-size: 2.4rem; letter-spacing: .38em; margin-right: -.38em; }
.wm_s { font-size: 1.05rem; letter-spacing: .62em; margin: 13px -.62em 0 0; }

/* ---------- セクション共通見出し（英字＋和文） ---------- */
/* 各セクション冒頭の見出し（英字 .en ＋ 縦線 ＋ 和文 .jp）。About・Topics・Special Offer・Access で共通。
   和文の上の縦線は .jp::before で描画。セクションごとの色違いは各セクション側で上書き */
.sec_head {
  text-align: center;
  margin: 0 auto 56px;
}
.sec_head .en {
  display: block;
  font-family: var(--font-en);
  font-size: 3.2rem;
  letter-spacing: .14em;
  line-height: 1.1;
  color: var(--ink);
}
.sec_head .jp {
  display: block;
  font-size: 1.3rem;
  letter-spacing: .3em;
  color: var(--gold);
  position: relative;
  padding-top: 24px;
  margin-top: 14px;
}
.sec_head .jp::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 1px; height: 16px;
  background: var(--gold);
}

/* 固定ナビ・オープニングのロゴ：施設支給 Wordmark.svg（黒のまま使用） */
.wm_img { margin-right: 0; line-height: 0; }
.wm_img img { height: auto; display: block; margin: 0 auto; }
#fixed-nav .fn_logo .wm_img img { width: 130px; }
#opening .wm_img img { width: 240px; }

/* =========================== オープニング =========================== */
/* 白砂にワードマーク → 金の水平線 → 白砂・宮古ブルーの幕が順に上がる（約3.9秒）。CSSのみで自動的に消える */
:root { --op-delay: 3.3s; }  /* TOPの文字・ナビが出始めるタイミング */
/* #opening：画面全体を覆うレイヤー。pointer-events: none なので表示中も下のページ操作を邪魔しない。
   3.9秒後に visibility: hidden で完全に消える（JSが動かなくても必ず消える）
   ■ 時間の流れ
     0.2〜1.8秒  ロゴ（Wordmark.svg）がぼかしから浮かび上がる（op-logo）
     0.9〜1.9秒  金の水平線が中央から左右へ伸びる（op-line）
     1.3〜2.6秒  MIYAKOJIMA と英文コピーが下から現れる（op-up）
     2.3〜2.9秒  文字全体が上へ消える（op-out）
     2.6〜3.95秒 白砂の幕 → 宮古ブルーの幕の順に上へ抜ける（op-lift） */
#opening {
  position: fixed; inset: 0; z-index: 10000;
  pointer-events: none;
  animation: op-hide 0s linear 3.9s forwards;
}
/* 幕は2枚重ね（上が白砂 .sand、下が宮古ブルー .blue）。白砂が先に上がり、少し遅れて青が上がる */
#opening .op_layer { position: absolute; inset: 0; }
#opening .op_layer.blue {
  background: linear-gradient(180deg, var(--blue-2) 0%, var(--blue) 100%);
  animation: op-lift 1.1s cubic-bezier(.76,0,.24,1) 2.85s forwards;
}
#opening .op_layer.sand {
  background: var(--sand);
  animation: op-lift 1.1s cubic-bezier(.76,0,.24,1) 2.6s forwards;
}
#opening .op_inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--ink); text-align: center;
  animation: op-out .6s ease 2.3s forwards;
}
#opening .op_logo { margin: 0; }
#opening .wm { font-size: 3.4rem; animation: op-logo 1.6s cubic-bezier(.22,.61,.36,1) .2s both; }
#opening .op_line {
  display: block; width: 180px; height: 1px; margin: 22px auto;
  background: var(--gold);
  transform: scaleX(0);
  animation: op-line 1s cubic-bezier(.65,0,.35,1) .9s forwards;
}
#opening .wm_s { font-size: 1.3rem; margin-top: 0; animation: op-up 1s ease 1.3s both; }
#opening .op_copy {
  font-family: var(--font-it); font-style: italic;
  font-size: 1.9rem; letter-spacing: .06em; color: var(--blue);
  margin-top: 28px;
  animation: op-up 1s ease 1.6s both;
}
/* オープニング用の動きの定義 */
@keyframes op-logo { 0% { opacity: 0; transform: scale(1.08); filter: blur(6px); } 100% { opacity: 1; transform: none; filter: blur(0); } }
@keyframes op-line { to { transform: scaleX(1); } }
@keyframes op-up   { 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: none; } }
@keyframes op-out  { to { opacity: 0; transform: translateY(-16px); } }
@keyframes op-lift { to { transform: translateY(-100%); } }
@keyframes op-hide { to { visibility: hidden; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* オープニング明けに TOP のコピー・ナビ・スクロール表示を出す */
#top_ttl.fade02 { animation: fade 2.2s ease var(--op-delay) both; }
#navi, .ss-pagination, .scroll-cue { animation: fade-in 1.4s ease calc(var(--op-delay) + .3s) both; }

/* 動きを減らす設定の端末ではオープニングを出さない */
@media (prefers-reduced-motion: reduce) {
  #opening { display: none; }
  :root { --op-delay: 0s; }
}

/* =========================== ① HEADER =========================== */
/* TOP全体。重なり順：スライダー(z-index:1) → 上下の暗いグラデーション(::after / 2) → ナビ・キャッチ・Scroll(10) */
#header {
  width: 100%;
  height: 100vh;
  min-height: 640px;
  position: relative;
  overflow: hidden;
  background: var(--ink);
}
/* 写真の上下を少し暗くして、白いナビ・キャッチを読みやすくするグラデーション */
#header::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,24,30,.45) 0%, rgba(10,24,30,0) 22%, rgba(10,24,30,0) 50%, rgba(10,24,30,.55) 100%);
  z-index: 2;
  pointer-events: none;
}
/* TOPスライダー（Swiper・フェード切替）。表示中のスライドだけ kenburns でゆっくりズーム。
   loop 時に複製されるスライド（-duplicate-active）にも同じ動きを付けている */
.ss-slider { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.ss-slider .swiper-slide { overflow: hidden; }
.ss-slider .slide-img, .ss-slider .slide-img img { width: 100%; height: 100%; }
.ss-slider .slide-img img { object-fit: cover; object-position: 50% 50%; display: block; }
.ss-slider .swiper-slide-active .slide-img img,
.ss-slider .swiper-slide-duplicate-active .slide-img img { animation: kenburns 7s ease-out forwards; }

/* TOP写真の上に載る上部ナビ（左：ロゴ／中：メニュー／右：一休ロゴ） */
#navi {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 34px 5vw 0;
  color: #fff;
}
#navi .hd_logo a { display: block; transition: opacity .3s; }
#navi .hd_logo a:hover { opacity: .75; }
/* 左上ロゴ：施設支給 Wordmark.svg（黒）を白く表示 */
#navi .hd_logo .wm_img { margin-right: 0; line-height: 0; }
#navi .hd_logo .wm_img img { width: 170px; height: auto; display: block; margin: 0 auto; filter: brightness(0) invert(1); }
#navi .menu {
  display: flex; gap: 0 46px;
  list-style: none; margin: 0 0 0 auto; padding: 0 56px 0 0;
}
#navi .menu a {
  font-family: var(--font-en);
  font-size: 1.4rem; letter-spacing: .22em;
  position: relative; padding-bottom: 6px;
}
/* メニューのホバー時の下線：右から消えて左から伸びるアニメーション */
#navi .menu a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: #fff;
  transform: scaleX(0); transform-origin: right; transition: transform .4s;
}
#navi .menu a:hover::after { transform: scaleX(1); transform-origin: left; }
/* 上部ナビ右の一休ロゴ（白） */
#navi .logo_ikyu img { height: 28px; width: auto; display: block; }

/* TOPのキャッチ（上から：英文 .en → 細線 → 施設名 .name → キャッチ .jp）。h1 タグ */
#top_ttl {
  position: absolute;
  left: 6vw;
  bottom: max(8vh, 110px);  /* 下中央の「Scroll」（高さ約90px）と重ならない高さを確保 */
  z-index: 10;
  color: #fff;
  width: auto;
  text-shadow: 0 2px 24px rgba(0,0,0,.25);
}
#top_ttl .en {
  display: block;
  font-family: var(--font-it); font-style: italic; font-weight: 400;
  font-size: 1.8rem; letter-spacing: .08em;
  margin-bottom: 8px;
}
#top_ttl .jp {
  display: block;
  font-size: 1.5rem; font-weight: 500;
  letter-spacing: .16em; line-height: 1.8;
  margin-top: 12px;
}
/* 英文と施設名の間の短い細線（施設名の上） */
#top_ttl .name::before {
  content: ""; display: block;
  width: 40px; height: 1px;
  background: rgba(255,255,255,.75);
  margin: 10px 0 18px;
}
/* 施設名（TOPの主役） */
#top_ttl .name {
  display: block;
  font-size: 3.4rem; font-weight: 500;
  letter-spacing: .2em; line-height: 1.4;
}

/* TOPスライダーの位置表示（縦線）。Swiper の pagination を縦並びにして、表示中の線だけ長く・濃くする */
.ss-pagination {
  position: absolute; z-index: 10;
  right: 5vw; bottom: max(8vh, 110px);
  display: flex; flex-direction: column; gap: 14px;
}
.ss-pagination .swiper-pagination-bullet {
  width: 2px; height: 28px; border-radius: 0;
  background: #fff; opacity: .4; margin: 0 !important;
  transition: opacity .4s, height .4s;
}
.ss-pagination .swiper-pagination-bullet-active { opacity: 1; height: 52px; }

/* TOP下中央の「Scroll」と、伸び縮みする縦線 */
.scroll-cue {
  position: absolute; z-index: 10;
  left: 50%; bottom: 0; transform: translateX(-50%);
  color: #fff; text-align: center;
  font-family: var(--font-en); font-size: 1.1rem; letter-spacing: .3em;
}
.scroll-cue span { display: block; padding-bottom: 76px; position: relative; margin-right: -.3em; }
.scroll-cue span::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 1px; height: 64px; background: #fff;
  animation: scrollLine 2.4s ease-in-out infinite;
}

/* ---------- 固定ナビ ---------- */
/* スクロール追従ナビ。通常は画面の上に隠しておき（translateY(-101%)）、
   TOPをほぼ抜けたら js/common.js が .show を付けて上から降りてくる */
#fixed-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 9000;
  background: rgba(244,239,231,.96);
  border-bottom: 1px solid var(--line);
  transform: translateY(-101%);
  transition: transform .5s ease;
}
#fixed-nav.show { transform: translateY(0); }
#fixed-nav .fn_inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px; padding: 0 5vw;
}
#fixed-nav .fn_logo a { display: block; color: var(--ink); }
#fixed-nav .fn_logo .wm { font-size: 1.9rem; }
#fixed-nav .fn_logo .wm_s { font-size: .9rem; margin-top: 10px; }
#fixed-nav .fn_menu {
  display: flex; gap: 0 44px; list-style: none;
  margin: 0 0 0 auto; padding: 0 50px 0 0;
}
#fixed-nav .fn_menu a {
  font-family: var(--font-en); font-size: 1.35rem; letter-spacing: .22em;
  color: var(--ink); transition: color .3s;
}
#fixed-nav .fn_menu a:hover { color: var(--blue-2); }
#fixed-nav .fn_logo_ikyu img { height: 24px; width: auto; display: block; }

/* メニューは折り返さない（Special Offer 等の長い項目対策）。幅の狭いPCでは間隔を詰める */
#navi .menu a, #fixed-nav .fn_menu a { white-space: nowrap; }
@media screen and (max-width: 1100px) {
  #navi .menu { gap: 0 26px; padding-right: 30px; }
  #fixed-nav .fn_menu { gap: 0 24px; padding-right: 28px; }
}

/* =========================== ② ABOUT =========================== */
/* TOPとの間に余白 → 全面写真＋暗幕＋下寄せ中央の白文字（細い列）／下端に全幅の黒バー */
/* 構成：TOPとの間の余白 → 全面写真（about01）＋暗幕 → 下寄せ・中央揃えの白文字 → 全幅の黒い「施設詳細を見る」バー */
#about { background: var(--sand); padding-top: 120px; }
/* 写真エリア。高さは画面幅の46%以上（横長の写真を大きく見せる）。文字は下寄せ */
.about_visual {
  position: relative;
  overflow: hidden;
  min-height: 46vw;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 120px 50px 72px;
  color: #fff;
}
/* 背景写真は .about_bg の中の img を全面に敷く（object-fit: cover） */
.about_bg { position: absolute; inset: 0; z-index: 0; }
.about_bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.about_bg::after {
  content: ""; position: absolute; inset: 0;
  /* 上は景色を残し、文字のある下側ほど暗く */
  background: linear-gradient(180deg, rgba(12,28,34,.3) 0%, rgba(12,28,34,.45) 40%, rgba(12,28,34,.58) 100%);
}
.about_txt {
  position: relative; z-index: 1;
  /* 幅は最長行に合わせる（改行位置は <br> で指定済み）→ Mac/Windowsの文字幅差でも折り返さない */
  width: max-content; max-width: calc(100vw - 100px); text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.35), 0 2px 16px rgba(0,0,0,.45);
}
#about .sec_head { margin-bottom: 20px; }
#about .sec_head .en { color: #fff; }
#about .sec_head .jp { color: #fff; }
#about .sec_head .jp::before { background: #fff; }
.about_txt .lead {
  font-size: 1.7rem; font-weight: 500; line-height: 1.8; letter-spacing: .06em;
  margin-bottom: 12px;
}
/* PCは自動折り返しをしない（句点などの <br> 位置でのみ改行） */
.about_txt .lead, .about_txt .txt { white-space: nowrap; }
/* リード文は語句の途中で改行しない */
.about_txt .lead .nb { display: inline-block; }
.about_txt .txt {
  font-size: 1.4rem; line-height: 1.85; letter-spacing: .04em;
  margin-bottom: .8em;
}
.about_txt .txt:last-child { margin-bottom: 0; }
/* 「施設詳細を見る」ボタン（黒いバー）。ACCESS の施設詳細ボタン（.ac_btn）でも同じクラスを使い回している */
.about_btn { margin: 0; }
.about_btn a {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  width: 100%; padding: 22px 20px;
  background: #000; color: #fff;
  font-size: 1.3rem; font-weight: 600; letter-spacing: .12em;
  transition: background .35s;
}
.about_btn a:hover { background: var(--blue); }
/* 矢印「＞」：ホバーで右へスライド */
.about_btn .arw {
  width: 8px; height: 8px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
  margin-left: -2px;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.about_btn a:hover .arw { transform: translateX(6px) rotate(45deg); }

/* =========================== ③ TOPICS =========================== */
/* 構成：各 Journey（.tp_row）＝ 左：テキスト（.tp_txt）／右：縦長写真のスライダー（.tp_media） */
#topics {
  padding: 150px 0 110px;
  background: var(--sand-2);
}
/* 1件分の行。写真側は画面の端まで広げるため、テキスト側だけ左右の余白（7vw）を取っている */
.tp_row {
  display: grid;
  grid-template-columns: 4fr 7fr;
  align-items: center;
  padding: 70px 0 70px 7vw;
}
/* 2・6件目は左右反転（sec_head が1番目の子要素のため odd 指定） */
.tp_row:not(.tp_band):nth-child(odd) {
  grid-template-columns: 7fr 4fr;
  padding: 70px 7vw 70px 0;
}
.tp_row:not(.tp_band):nth-child(odd) .tp_txt { order: 2; padding: 0 0 0 80px; }
.tp_row:not(.tp_band):nth-child(odd) .tp_media { order: 1; }
.tp_row:not(.tp_band):nth-child(odd) .tp_ctrl { justify-content: flex-end; padding-right: 0; }

.tp_txt { padding-right: 80px; }
/* 見出し：Journey番号（.num／斜体の欧文）→ 英字（.en）→ 和文（.jp）＋下線 */
.tp_ttl { margin-bottom: 30px; }
.tp_ttl .num {
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--font-it); font-style: italic;
  font-size: 1.8rem; letter-spacing: .08em; color: var(--gold);
}
.tp_ttl .num i { font-size: 5.2rem; line-height: 1; }
.tp_ttl .en {
  display: block;
  font-family: var(--font-en);
  font-size: 1.5rem; letter-spacing: .24em;
  color: var(--blue); margin: 18px 0 12px;
}
.tp_ttl .jp {
  display: block;
  font-size: 2.3rem; font-weight: 500; letter-spacing: .1em; line-height: 1.7;
  padding-bottom: 26px; border-bottom: 1px solid var(--line);
}
.tp_lead { font-size: 1.5rem; line-height: 2.2; letter-spacing: .05em; color: var(--ink-soft); }

/* 写真スライダー（Swiper）。1.7枚見せ（スマホは1.25枚）で横に流れる。設定は js/other.js */
.tp_media { min-width: 0; overflow: hidden; }
/* スライド高さ＝画像高さ（画像下に余白を作らない） */
.tp-slider .swiper-wrapper { height: auto !important; }
.tp-slider .swiper-slide { height: auto !important; }
.tp-slider .swiper-slide img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
/* スライダー直下の操作部：‹ 前へ ／ 枚数表示「01 / 05」／ 次へ ›（js/other.js が各行の要素に紐付け） */
.tp_ctrl {
  display: flex; align-items: center; gap: 0 22px;
  margin-top: 22px;
}
/* 枚数表示。Swiper の pagination を type: 'fraction' で使用。既定の絶対配置を解除して操作部の中に並べている */
.tp-frac {
  font-family: var(--font-en); font-size: 1.4rem; letter-spacing: .2em; color: var(--ink);
  min-width: 70px; text-align: center;
  position: static !important; width: auto !important;
}
/* 前へ／次へボタン（丸枠＋細い矢印）。矢印は ::after の枠線2辺を45度回転させて描画 */
.sw-arw {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--ink); position: relative; cursor: pointer;
  transition: background .3s;
  outline: none;
}
.sw-arw::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px;
  border-top: 1px solid var(--ink); border-right: 1px solid var(--ink);
  transition: border-color .3s;
}
.sw-arw.next::after { transform: translate(-65%,-50%) rotate(45deg); }
.sw-arw.prev::after { transform: translate(-35%,-50%) rotate(-135deg); }
.sw-arw:hover { background: var(--ink); }
.sw-arw:hover::after { border-color: #fff; }

/* テキストのみの帯（Journey 04） */
/* テキストのみの帯（画像が無いトピック用の予備レイアウト）。現在は未使用 */
.tp_band {
  display: block;
  margin: 70px 0;
  padding: 120px 7vw;
  background: linear-gradient(120deg, var(--blue) 0%, var(--blue-2) 100%);
  color: #fff;
  text-align: center;
}
.tp_band_in { max-width: 760px; margin: 0 auto; }
.tp_band .tp_ttl .num { justify-content: center; color: #e8d6bd; }
.tp_band .tp_ttl .en { color: #fff; opacity: .85; }
.tp_band .tp_ttl .jp { border-bottom-color: rgba(255,255,255,.35); display: inline-block; padding: 0 20px 26px; }
.tp_band .tp_lead { color: rgba(255,255,255,.92); }

/* =========================== ④ PLAN =========================== */
/* Special Offer（宿泊プラン）。背景は TOP写真（ss03）を濃紺で暗く敷いている（--img-plan-bg） */
#spplan {
  padding: 150px 50px 160px;
  background:
    linear-gradient(rgba(20,38,45,.86), rgba(20,38,45,.9)),
    var(--img-plan-bg) center / cover no-repeat;
  color: #fff;
}
#spplan .sec_head .en { color: #fff; }
#spplan .sec_head .jp { color: #d9c3a3; }
#spplan .sec_head .jp::before { background: #d9c3a3; }
/* プランカードの並び */
.plan_list {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px;
}
/* プランカード1枚（細い金枠）。上：写真 .p_img ／下：番号・プラン名・補足・料金ボタン .p_body */
.plan_wp {
  border: 1px solid rgba(217,195,163,.55);
  padding: 10px;
  text-align: center;
  display: flex; flex-direction: column;
  position: relative;
}
/* プラン画像（カード上部・3:2） */
.plan_wp .p_img { overflow: hidden; }
.plan_wp .p_img img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block;
  transition: transform 1.2s ease;
}
.plan_wp:hover .p_img img { transform: scale(1.04); }
.plan_wp .p_body {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: 42px 40px 46px;
}
/* Plan 01 の番号（斜体の欧文）とプラン名（欧文） */
.plan_wp .p_num {
  font-family: var(--font-it); font-style: italic;
  font-size: 1.8rem; color: #d9c3a3; letter-spacing: .08em;
}
.plan_wp .p_num i { font-size: 3.2rem; margin-left: 8px; }
.plan_wp .p_ttl {
  font-family: var(--font-en); font-weight: 400;
  font-size: 3.4rem; letter-spacing: .08em; line-height: 1.4;
  margin: 18px 0 14px; text-align: center;
}
.plan_wp .p_label {
  font-size: 1.5rem; letter-spacing: .14em; color: rgba(255,255,255,.82);
  margin-bottom: 40px;
}
/* 料金ボタン。中の金額は一休共通の stay-common.js が data-planid / data-accommodationid を元に自動表示（本番のみ）。
   連泊プランは HTML 側で URL に &lc=2、属性に data-lodgingcount="2" を付けている */
.plan_rate {
  display: block;
  width: 100%; max-width: 520px;
  margin-top: auto;
  padding: 28px 24px;
  background: var(--ink); color: #fff;
  border: 2px solid var(--gold);
  font-size: 1.7rem; font-weight: 700; letter-spacing: .08em; line-height: 1.7;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  transition: background .35s, color .35s, border-color .35s;
}
.plan_rate:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
/* 以下は stay-common.js が流し込む料金文の中身：1行目＝通常料金、2行目＝ポイント利用後の料金（大きく・目立たせる） */
.plan_rate b { font-weight: 700; font-size: 2rem; letter-spacing: .04em; }
.plan_rate .off { display: block; margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.35); color: #fff; }
.plan_rate .off .shousai { white-space: nowrap; letter-spacing: .02em; font-size: 1.6rem; font-weight: 700; }
.plan_rate .off .s { font-size: 1.5rem; font-weight: 700; }
.plan_rate .off b.after_point_rate { white-space: nowrap; font-size: 2.8rem; font-weight: 700; color: #f1d9b0; letter-spacing: .02em; }
.plan_rate:hover .off b.after_point_rate { color: #fff; }

/* =========================== ⑤ ACCESS =========================== */
/* 構成：見出し → 施設名＋住所（中央）→ 地図 ＋ 写真・施設紹介・施設詳細ボタン */
#access {
  padding: 150px 0 0;
  background: var(--sand);
}
#access .sec_head { margin-bottom: 36px; }
/* 見出し下：施設名＋住所（中央） */
.access_head { text-align: center; margin-bottom: 64px; }
.access_head .name { font-size: 2rem; font-weight: 500; letter-spacing: .14em; margin-bottom: 10px; }
.access_head .addr { font-size: 1.5rem; letter-spacing: .08em; color: var(--ink-soft); }
/* 左：地図（画面左端まで・約6割）／右：写真＋施設紹介＋ボタン */
.access_in {
  display: grid; grid-template-columns: 3fr 2fr; gap: 0 70px; align-items: stretch;
  padding: 0 7vw 0 0;
}
/* 地図は右側の内容の高さに合わせる（最低560px） */
.access_map { background: var(--shell); position: relative; min-height: 560px; }
#gglmap { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 右側はコンパクトに：幅を絞り、上下に余白を取って地図の縦中央に置く */
.access_info { align-self: center; width: 100%; max-width: 440px; margin: 0 auto; padding: 48px 0; }
.access_info .ac_img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.access_info .ac_txt { margin: 26px 0 24px; }
.access_info .ac_btn { margin: 0; }
.access_info .ac_btn a { padding: 17px 20px; }
.access_info .ac_txt .lead { font-size: 1.55rem; font-weight: 500; line-height: 1.8; letter-spacing: .05em; margin-bottom: 12px; }
.access_info .ac_txt .lead .nb { display: inline-block; }  /* 語句の途中で改行しない */
.access_info .ac_txt p { font-size: 1.3rem; line-height: 2; letter-spacing: .03em; color: var(--ink-soft); }

/* ---------- FOOTER ----------
   一休ロゴ＋コピーライト（© Ikyu Corporation）。最下部に全幅の色帯（::after） */
.ft2 { padding: 64px 0 0; text-align: center; }
/* フッター最下部の全幅の色帯 */
.ft2::after { content: ""; display: block; height: 15px; margin-top: 40px; background: var(--ink); }
.ft2 img { width: 110px; height: auto; transition: opacity .3s; }
.ft2 a:hover img { opacity: .7; }
.ft2 address {
  font-style: normal; font-family: var(--font-en);
  font-size: 1.1rem; letter-spacing: .1em; color: var(--ink-soft); margin-top: 22px;
}

/* ---------- ページトップ ---------- */
#toPageTop { position: fixed; right: 30px; bottom: 30px; z-index: 8000; margin: 0; }
/* ページ右下の「TOPへ戻る」ボタン（四角・濃紺）。100pxスクロールすると js/common.js が表示する */
#toPageTop a {
  display: block; width: 54px; height: 54px; border-radius: 0;
  background: var(--ink); position: relative; transition: background .3s;
  border: 1px solid rgba(255,255,255,.4);  /* 最下部の濃紺の色帯と重なっても見えるように */
}
#toPageTop a::after {
  content: ""; position: absolute; top: 60%; left: 50%;
  width: 16px; height: 16px;
  border-top: 1.5px solid #fff; border-left: 1.5px solid #fff;
  transform: translate(-50%,-50%) rotate(45deg);
}
#toPageTop a:hover { background: var(--blue); }