/*
Theme Name: Nana Child
Template: nana
Author: Child Theme Configurator
Version: 1.0.1783300773
Updated: 2026-07-06 10:19:33

*/

/* =========================================================
   nana 子テーマ追加CSS（child-additions.css）
   現行テーマ assets/css/style.css に直接追記していた差分のみを抽出。
   親 style.css の後に読み込むこと（既存値の上書きを含むため）。
   各ブロックは元の目印コメント（▼〜▲）付き。元style.cssの行番号を併記。
   ========================================================= */

/* ▼修正 [子CSS 構造バグ] 第5回レビュー: 旧・差分抽出時にセレクタ/波括弧が欠落した『浮き宣言』5ブロック(予約アイコン縦中央 top:50%;transform:...)を削除。
   これらはセレクタが無く無効なうえ、直後の .mv__video ルールをパーサが巻き込んで破棄し、TOP動画が縦横比制御されず画面幅に追従しない原因になっていた。
   ※予約バーアイコンの上下中央寄せが必要な場合は、正しいセレクタ付きで別途実装のこと。 ▲ */
/* ---- style.css L1415-1459 ---- */
/* ▼改修 [TOP S1] 静止画→動画＋見出しHTML */
/* ▼改修 [TOP ヒーロー] 第5回レビューA+B: PCは画面幅に応じて動画を比例スケール（旧 height:100% の塗りつぶしをやめ、aspect-ratioで縦横比を保ったまま拡大縮小＝映像全体が見える）。SP=モバイルは中央クロップ仕様を維持（第2回）。動画のPC/SP出し分けはJS(js-mv-video)。 */
.mv__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9; /* ▼改修 第5回②: TOP動画を他の動画ヒーロー(.p-lower-mv--video)と完全に同一サイズへ統一＝16:9＋max-height:88vh（旧 1440/765）。幅に応じ比例スケール・上下は88vhで頭打ち */
  max-height: 88vh;
  -o-object-fit: cover;
	 object-fit: cover;
}
@media screen and (max-width: 768px) {
  /* SP=モバイルは従来どおり中央クロップ（画面を覆う）。SP用動画はJSが data-src-sp を再生。 */
  .mv__video {
	height: 100%;
	aspect-ratio: 375/667;
  }
}
/* ▲改修ここまで [TOP ヒーロー] 第5回レビューA+B */
.mv__catch {
  position: absolute;
  left: 8.4%;
  bottom: 18%;
  color: #fff;
  z-index: 2;
}
.mv__catch-title {
  font-size: clamp(28px, 3.3333333333vw, 48px);
  font-weight: 400;
  letter-spacing: 0.15em;
  line-height: 1.4;
}
.mv__catch-en {
  margin-top: 0.5em;
  font-size: clamp(14px, 1.25vw, 18px);
  letter-spacing: 0.3em;
}
@media screen and (max-width: 768px) {
  .mv__catch {
	left: 8%;
	bottom: 22%;
  }
  .mv__catch-title {
	font-size: 28px;
  }
  .mv__catch-en {
	font-size: 14px;
  }
}
/* ▲改修ここまで [TOP S1] */

/* ---- style.css L2290-2366 ---- */
/* ▼改修 [TOP S4] 進捗バー→矢印+タブUI */
.how-to-spend__tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
	  flex-wrap: wrap;
  -webkit-box-pack: center;
	  -ms-flex-pack: center;
		  justify-content: center;
  gap: 8px 24px;
  margin-top: 18px;
}
.how-to-spend__tab {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(12px, 0.9722222222vw, 14px);
  color: #A5A5A5;
  letter-spacing: 0.08em;
  background: transparent;
  cursor: pointer;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  -webkit-transition: color 0.3s ease, border-color 0.3s ease;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.how-to-spend__tab.is-active {
  color: #333333;
  border-bottom-color: #CDAF64;
}
@media screen and (max-width: 768px) {
  .how-to-spend__tabs {
	gap: 6px 14px;
  }
  .how-to-spend__tab {
	font-size: 11px;
  }
}

/* 進捗ブロック撤去に伴う上部余白の調整（旧値: margin-top/padding-top は進捗バー用に確保されていた） */
.how-to-spend-slider {
  margin-top: clamp(0px, 2.7777777778vw, 40px);
  padding-top: clamp(40px, 3.8888888889vw, 56px);
}
@media screen and (max-width: 768px) {
  .how-to-spend-slider {
	margin-top: 24px;
	padding-top: 32px;
  }
}

/* アクティビティリンク（アクティビティスライド内） */
.how-to-spend__activity-link {
  display: inline-block;
  margin-top: clamp(12px, 1.3888888889vw, 20px);
  font-family: "Noto Serif JP", serif;
  font-size: clamp(12px, 0.9722222222vw, 14px);
  color: #333333;
  letter-spacing: 0.08em;
  border-bottom: 1px solid #CDAF64;
  padding-bottom: 2px;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.how-to-spend__activity-link:hover {
  opacity: 0.7;
}
.how-to-spend__activity-link::after {
  content: "›";
  margin-left: 6px;
  color: #CDAF64;
}
@media screen and (max-width: 768px) {
  .how-to-spend__activity-link {
	text-align: center;
  }
}
/* ▲改修ここまで [TOP S4] */

/* ---- style.css L2368-2653 ---- */
/* ▼追加 [1日の過ごし方] Readdy構成タイムライン＋回遊ナビ（page-how-to-spend.php） */
.p-hts-timeline {
  padding-top: clamp(60px, 6.9444444444vw, 100px);
  padding-bottom: clamp(40px, 4.8611111111vw, 70px);
}
.p-hts-timeline__intro {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  padding-inline: 24px;
  margin-bottom: clamp(48px, 5.5555555556vw, 80px);
}
.p-hts-timeline__intro p {
  font-size: clamp(13px, 0.9722222222vw, 14px);
  line-height: 2.8;
  letter-spacing: 0.08em;
}
.p-hts-timeline__wrapper {
  position: relative;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 24px;
}
/* 進捗ドット（PC） */
.p-hts-timeline__progress {
  position: absolute;
  left: clamp(20px, 2.7777777778vw, 40px);
  top: 40px;
  bottom: 40px;
  width: 1px;
}
.p-hts-timeline__progress-track {
  position: absolute;
  inset: 0;
  background: #DFDCD9;
}
.p-hts-timeline__progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: #CDAF64;
  -webkit-transition: height 0.5s ease;
  transition: height 0.5s ease;
}
.p-hts-timeline__dot {
  position: absolute;
  left: 50%;
  width: 11px;
  height: 11px;
  -webkit-transform: translate(-50%, -50%);
		  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #DFDCD9;
  cursor: pointer;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
}
.p-hts-timeline__dot.is-active {
  background: #CDAF64;
}
.p-hts-timeline__dot-label {
  display: none; /* 交互レイアウトの左側セクション見出しと重なるため非表示（ドット＝進捗表示は維持） */
  position: absolute;
  left: 18px;
  top: 50%;
  -webkit-transform: translateY(-50%);
		  transform: translateY(-50%);
  white-space: nowrap;
  font-family: "Noto Serif JP", serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #333333;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.p-hts-timeline__dot.is-current .p-hts-timeline__dot-label,
.p-hts-timeline__dot:hover .p-hts-timeline__dot-label {
  opacity: 1;
}
/* タイムライン項目（交互レイアウト） */
.p-hts-timeline__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
	  -ms-flex-direction: column;
		  flex-direction: column;
  gap: clamp(56px, 6.9444444444vw, 100px);
  padding-left: clamp(48px, 6.9444444444vw, 100px);
}
.p-hts-timeline__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
	  -ms-flex-align: center;
		  align-items: center;
  gap: clamp(24px, 2.7777777778vw, 40px);
}
.p-hts-timeline__item:nth-child(even) {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
	  -ms-flex-direction: row-reverse;
		  flex-direction: row-reverse;
}
.p-hts-timeline__img {
  position: relative;
  width: 55%;
  -ms-flex-negative: 0;
	  flex-shrink: 0;
  aspect-ratio: 733/424;
}
.p-hts-timeline__img img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
	 object-fit: cover;
  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
		  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.p-hts-timeline__time {
  position: absolute;
  bottom: -14px;
  right: 16px;
  background: #fff;
  color: #CDAF64;
  font-size: clamp(20px, 1.9444444444vw, 28px);
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 6px 14px;
}
.p-hts-timeline__item:nth-child(even) .p-hts-timeline__time {
  right: auto;
  left: 16px;
}
.p-hts-timeline__body {
  -webkit-box-flex: 1;
	  -ms-flex: 1;
		  flex: 1;
}
.p-hts-timeline__en {
  color: #CDAF64;
  font-size: clamp(12px, 0.9027777778vw, 13px);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.p-hts-timeline__ttl {
  font-size: clamp(20px, 1.5277777778vw, 22px);
  letter-spacing: 0.1em;
  line-height: 2.3;
  margin-bottom: clamp(12px, 1.3888888889vw, 20px);
}
.p-hts-timeline__text {
  font-size: clamp(13px, 0.9722222222vw, 14px);
  line-height: 2.6;
  letter-spacing: 0.08em;
  word-break: auto-phrase;
  text-wrap: pretty;
}
@media screen and (max-width: 768px) {
  .p-hts-timeline__list {
	padding-left: 0;
	gap: 56px;
  }
  .p-hts-timeline__item,
  .p-hts-timeline__item:nth-child(even) {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
		-ms-flex-direction: column;
			flex-direction: column;
	gap: 24px;
  }
  .p-hts-timeline__img {
	width: 100%;
  }
  .p-hts-timeline__time,
  .p-hts-timeline__item:nth-child(even) .p-hts-timeline__time {
	bottom: -12px;
	right: 12px;
	left: auto;
	font-size: 20px;
  }
  .p-hts-timeline__body {
	width: 100%;
  }
}

.p-hts-nav {
  padding-top: clamp(60px, 6.9444444444vw, 100px);
  padding-bottom: clamp(60px, 6.9444444444vw, 100px);
}
.p-hts-nav__head {
  text-align: center;
  margin-bottom: clamp(28px, 3.3333333333vw, 48px);
}
.p-hts-nav__head-en {
  color: #CDAF64;
  font-size: clamp(12px, 0.9722222222vw, 14px);
  letter-spacing: 0.15em;
}
.p-hts-nav__head-title {
  font-size: clamp(20px, 1.8055555556vw, 26px);
  margin-top: 8px;
}
.p-hts-nav__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.6666666667vw, 24px);
  list-style: none;
}
@media screen and (max-width: 768px) {
  .p-hts-nav__list {
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
  }
}
.p-hts-nav__card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1/1;
}
.p-hts-nav__img,
.p-hts-nav__img img {
  display: block;
  width: 100%;
  height: 100%;
}
.p-hts-nav__img img {
  -o-object-fit: cover;
	 object-fit: cover;
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.p-hts-nav__card:hover .p-hts-nav__img img {
  -webkit-transform: scale(1.05);
		  transform: scale(1.05);
}
.p-hts-nav__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
}
.p-hts-nav__card:hover::after {
  background: rgba(0, 0, 0, 0.42);
}
.p-hts-nav__label {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
	  -ms-flex-direction: column;
		  flex-direction: column;
  -webkit-box-align: center;
	  -ms-flex-align: center;
		  align-items: center;
  -webkit-box-pack: center;
	  -ms-flex-pack: center;
		  justify-content: center;
  gap: 4px;
  color: #fff;
}
.p-hts-nav__ja {
  font-size: clamp(16px, 1.3888888889vw, 20px);
  letter-spacing: 0.15em;
}
.p-hts-nav__en {
  font-size: clamp(10px, 0.7638888889vw, 11px);
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.7);
}
/* ▲追加ここまで [1日の過ごし方] */

/* ---- style.css L2932-2936 ---- */
  /* ▼改修 [共通] 宿泊予約だけ14pxに固定する旧指定を撤廃（ENクリップ防止／他項目と統一）。font-sizeは__ja/__enに委譲 */
  .reservation-bar__item:first-child span {
	display: block;
  }
  /* ▲改修ここまで [共通] */

/* ---- style.css L3148-3523 ---- */
/* ▼改修 [共通] Checkinn予約ボタンのMUI白塗り不具合を修正
   Checkinnウィジェットが生成する .MuiButton-containedPrimary が
   背景=白・文字=白（=不可視の白い箱）になる不具合を打ち消す。
   nana側CSSはMUIの詳細度に負けるため !important で上書きし、
   枠(c-cta-button)を活かして中央寄せ・文脈別の文字色に戻す。 */
.checkinn-reservation-button button {
  position: relative !important; /* ::before の予約アイコンをボタン内に収める（流出防止） */
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  font-family: "Noto Serif JP", serif !important;
  font-weight: 400 !important;
  font-size: clamp(11px, 1.1805555556vw, 17px) !important;
  line-height: 2.1764705882 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
.checkinn-reservation-button button:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}
/* 暗背景（予約セクション/フッター/ハンバーガー/ヒーロー予約バー）＝白文字 */
.p-top-reservation .checkinn-reservation-button button,
.p-top-reservation .checkinn-reservation-button button span,
.p-footer__cta-links .checkinn-reservation-button button,
.p-footer__cta-links .checkinn-reservation-button button span,
.p-hamburger-menu__cta-links .checkinn-reservation-button button,
.p-hamburger-menu__cta-links .checkinn-reservation-button button span,
.reservation-bar .checkinn-reservation-button button,
.reservation-bar .checkinn-reservation-button button span {
  color: #fff !important;
}
/* 明背景（下層CTA p-lower-cta）＝黒文字＋ホバーで明色背景 */
.p-lower-cta .checkinn-reservation-button button,
.p-lower-cta .checkinn-reservation-button button span {
  color: #000 !important;
}
.p-lower-cta .checkinn-reservation-button button:hover {
  background: #F2F2F2 !important;
}
/* 予約バー（ヒーロー右下フロート）の宿泊予約は、温泉/レストランと同じ暗背景＋字サイズに戻す（透明上書きの例外）。矢印は .reservation-bar__item button::after が継続適用 */
.reservation-bar .checkinn-reservation-button button {
  background: rgba(51, 51, 51, 0.6) !important;
  font-size: clamp(10px, 1.0416666667vw, 15px) !important;
}
.reservation-bar .checkinn-reservation-button button:hover {
  background: rgba(51, 51, 51, 0.9) !important;
}

/* 予約ポップアップモーダル（全予約ボタン共通） */
.p-reserve-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  -webkit-box-align: center;
	  -ms-flex-align: center;
		  align-items: center;
  -webkit-box-pack: center;
	  -ms-flex-pack: center;
		  justify-content: center;
  padding: 20px;
}
.p-reserve-modal.is-open {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.p-reserve-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}
.p-reserve-modal__window {
  position: relative;
  z-index: 1;
  width: 92vw;
  max-width: 1040px;
  height: 90vh;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
	  -ms-flex-direction: column;
		  flex-direction: column;
  -webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
		  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.p-reserve-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
}
.p-reserve-modal__close:hover {
  background: rgba(0, 0, 0, 0.85);
}
.p-reserve-modal__iframe {
  -webkit-box-flex: 1;
	  -ms-flex: 1;
		  flex: 1;
  width: 100%;
  border: 0;
}
.p-reserve-modal__foot {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
	  -ms-flex-align: center;
		  align-items: center;
  -webkit-box-pack: justify;
	  -ms-flex-pack: justify;
		  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  border-top: 1px solid #eee;
}
.p-reserve-modal__note {
  font-size: 11px;
  color: #999;
}
.p-reserve-modal__fallback {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-negative: 0;
	  flex-shrink: 0;
  padding: 6px 14px;
  background: #333333;
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.p-reserve-modal__fallback:hover {
  background: #000;
}
@media screen and (max-width: 768px) {
  .p-reserve-modal {
	padding: 0;
  }
  .p-reserve-modal__window {
	width: 100vw;
	height: 100vh;
	max-width: none;
	border-radius: 0;
  }
}
/* 宿泊予約ボタンはCheckinnウィジェット非依存（自前モーダル）。カーソルをポインタに */
.checkinn-reservation-button,
.checkinn-reservation-button button {
  cursor: pointer;
}

/* コンセプト：写真カルーセル（S3/S5・Read photoSlider移植／バニラJS） */
.p-concept-carousel {
  background: #fff;
  padding: clamp(40px, 4.4444444444vw, 64px) 24px;
}
.p-concept-carousel__inner {
  max-width: 1040px;
  margin: 0 auto;
}
.p-concept-carousel__viewport {
  position: relative;
  overflow: hidden;
}
.p-concept-carousel__track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: -webkit-transform 0.7s ease-in-out;
  transition: -webkit-transform 0.7s ease-in-out;
  transition: transform 0.7s ease-in-out;
  transition: transform 0.7s ease-in-out, -webkit-transform 0.7s ease-in-out;
}
.p-concept-carousel__slide {
  -webkit-box-flex: 0;
	  -ms-flex: 0 0 100%;
		  flex: 0 0 100%;
  width: 100%;
  height: clamp(260px, 41.6666666667vw, 600px);
}
.p-concept-carousel__slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
	 object-fit: cover;
  -o-object-position: top;
	 object-position: top;
  display: block;
}
.p-concept-carousel__arrow {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
		  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.2);
  border: 0;
  cursor: pointer;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
  z-index: 2;
}
.p-concept-carousel__arrow:hover {
  background: rgba(0, 0, 0, 0.4);
}
.p-concept-carousel__arrow--prev { left: 16px; }
.p-concept-carousel__arrow--next { right: 16px; }
.p-concept-carousel__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}
.p-concept-carousel__arrow--prev::before {
  -webkit-transform: translate(-30%, -50%) rotate(-135deg);
		  transform: translate(-30%, -50%) rotate(-135deg);
}
.p-concept-carousel__arrow--next::before {
  -webkit-transform: translate(-70%, -50%) rotate(45deg);
		  transform: translate(-70%, -50%) rotate(45deg);
}
.p-concept-carousel__dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
	  -ms-flex-align: center;
		  align-items: center;
  -webkit-box-pack: center;
	  -ms-flex-pack: center;
		  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}
.p-concept-carousel__dot {
  width: 16px;
  height: 2px;
  padding: 0;
  border: 0;
  background: rgba(51, 51, 51, 0.3);
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.p-concept-carousel__dot:hover {
  background: rgba(51, 51, 51, 0.5);
}
.p-concept-carousel__dot.is-active {
  width: 32px;
  background: #CDAF64;
}

/* 予約バー：日本語の下に英語サブ＋フォント拡大＋サイズ再調整（Readdy参考） */
.reservation-bar__item {
  position: relative;
  height: clamp(56px, 4.4444444444vw, 64px);
}
.reservation-bar__item > a,
.reservation-bar__item.checkinn-reservation-button,
.reservation-bar .checkinn-reservation-button button,
.reservation-bar__item > button {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
	  -ms-flex-direction: column !important;
		  flex-direction: column !important;
  -webkit-box-pack: center !important;
	  -ms-flex-pack: center !important;
		  justify-content: center !important;
  -webkit-box-align: center !important;
	  -ms-flex-align: center !important;
		  align-items: center !important;
  gap: 1px;
  line-height: 1.25;
}
.reservation-bar__ja {
  display: block;
  font-size: clamp(13px, 1.0416666667vw, 15px);
  letter-spacing: 0.05em;
  line-height: 1.25;
  white-space: nowrap;
}
.reservation-bar__en {
  display: block;
  font-size: clamp(10px, 0.8333333333vw, 12px);
  letter-spacing: 0.08em;
  opacity: 0.65;
  text-transform: capitalize;
  line-height: 1.25;
  white-space: nowrap;
}
/* 宿泊予約はbutton要素のためline-heightが継承で広がる→温泉(a)側に合わせて固定 */
.reservation-bar .checkinn-reservation-button button {
  line-height: 1.25 !important;
  padding: 0 !important;
}
.reservation-bar__item a span::after,
.reservation-bar__item button::after {
  content: none;
}
.reservation-bar__item > a::after,
.reservation-bar__item.checkinn-reservation-button::after {
  content: "";
  position: absolute;
  right: clamp(8px, 0.9027777778vw, 13px);
  top: 50%;
  -webkit-transform: translateY(-50%);
		  transform: translateY(-50%);
  width: clamp(5px, 0.4166666667vw, 6px);
  height: clamp(8px, 0.6944444444vw, 10px);
  background: url(../img/common/reservation-bar-arrow.webp) no-repeat center center/contain;
  z-index: 2;
}
/* ▼改修 [共通] 予約バー：3項目を等幅に統一（不揃い解消） */
.reservation-bar__item:first-child,
.reservation-bar__item:nth-child(2),
.reservation-bar__item:nth-child(3) {
  width: clamp(150px, 13.8888888889vw, 200px);
}
/* ▲改修ここまで [共通] */
@media screen and (max-width: 768px) {
  .reservation-bar__item {
	height: 100%;
  }
  /* ▼改修 [共通] モバイル：3項目を等幅(各1/3)に統一＋ENが収まるよう字サイズ調整 */
  .reservation-bar__item:first-child,
  .reservation-bar__item:nth-child(2),
  .reservation-bar__item:nth-child(3) {
	width: 33.3333%;
  }
  .reservation-bar__ja {
	font-size: 11px;
  }
  .reservation-bar__en {
	font-size: 8px;
  }
  /* ▲改修ここまで [共通] */
  .reservation-bar__item > a::after,
  .reservation-bar__item.checkinn-reservation-button::after {
	content: none;
  }
}
/* ▲改修ここまで [共通] */

/* ---- style.css L3885-3910 ---- */
/* ▼改修 [共通 ヒーロー見出し] 下層ヒーロー見出しの字間を 0.7em→0.15em に統一（長いタイトルの不自然な字間を解消・TOPと同様。PC/SP共通） */
.p-lower-mv__title {
  font-size: clamp(24px, 2.7083333333vw, 39px);
  letter-spacing: 0.15em;
  line-height: 1.2051282051;
}
@media screen and (max-width: 768px) {
  .p-lower-mv__title {
	font-size: clamp(0px, 6.4vw, 39px);
	-webkit-writing-mode: vertical-lr;
		-ms-writing-mode: tb-lr;
			writing-mode: vertical-lr;
	letter-spacing: 0.15em;
  }
}
/* ▲改修ここまで [共通 ヒーロー見出し] */
/* ▼改修 [1日の過ごし方 S1] 長いタイトルの字間をTOP同様に詰める（他下層の2文字タイトルは0.7emのまま維持） */
.p-lower-mv__title--hts {
  letter-spacing: 0.15em;
}
@media screen and (max-width: 768px) {
  .p-lower-mv__title--hts {
	letter-spacing: 0.15em;
  }
}
/* ▲改修ここまで [1日の過ごし方 S1] */

/* ---- style.css L3928-3930 ---- */
  /* ▼改修 [共通 リード文字サイズ] 本文リード 最大15px→14px */
  font-size: clamp(13px, 1.0416666667vw, 14px);
  /* ▲改修ここまで [共通 リード文字サイズ] */

/* ---- style.css L3940-3942 ---- */
	/* ▼改修 [共通 リード文字サイズ] 本文リードSP 最大15px→14px */
	font-size: clamp(0px, 3.4666666667vw, 14px);
	/* ▲改修ここまで [共通 リード文字サイズ] */

/* ---- style.css L3958-3960 ---- */
  /* ▼改修 [共通 リード文字サイズ] 主見出し 最大20px→16px */
  font-size: clamp(14px, 1.3888888889vw, 16px);
  /* ▲改修ここまで [共通 リード文字サイズ] */

/* ---- style.css L3967-3969 ---- */
	/* ▼改修 [共通 リード文字サイズ] 主見出SP 最大20px→16px */
	font-size: clamp(0px, 4vw, 16px);
	/* ▲改修ここまで [共通 リード文字サイズ] */

/* ---- style.css L3976-3978 ---- */
	/* ▼改修 [共通 リード文字サイズ] 最大20px→16px */
	font-size: clamp(0px, 4.8vw, 16px);
	/* ▲改修ここまで [共通 リード文字サイズ] */

/* ---- style.css L4150-4357 ---- */
/* ▼改修 [客室 S1/S3] ヒーロー4点スライドショー＋客室カード動画スライド */
/* S1: ヒーロー高さをReaddy準拠（PCはほぼ全画面高さ）に。1440/560だと3:2画像が大きく切れるため */
.p-lower-mv--guest-hero {
  overflow: hidden;
  aspect-ratio: auto;
  height: 86vh;
  min-height: 480px;
  max-height: 900px;
}
.p-guest-hero-slider {
  position: absolute;
  inset: 0;
  height: 100%;
}
.p-guest-hero-slider .splide__track,
.p-guest-hero-slider .splide__list,
.p-guest-hero-slider .splide__slide {
  height: 100%;
}
.p-guest-hero-slider img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
	 object-fit: cover;
}
.p-guest-hero-slider .splide__pagination {
  bottom: clamp(12px, 1.3888888889vw, 20px);
}
.p-guest-hero-slider .splide__pagination__page {
  background: rgba(255, 255, 255, 0.5);
}
.p-guest-hero-slider .splide__pagination__page.is-active {
  background: #fff;
}
@media screen and (max-width: 768px) {
  .p-lower-mv--guest-hero {
	height: auto;
	aspect-ratio: 375/667;
  }
}
.p-lower-card__img video {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
	 object-fit: cover;
  background: #000;
}
/* スライドにも親.p-lower-card__imgの全ブリードmargin(calc(50%-50vw))が継承され、スライド同士が重なる不具合を解消（コンテナの全ブリードは維持） */
.splide__slide.p-lower-card__img {
  margin-right: 0;
}

/* S3: 客室カードをReaddy構成に（メディアを収める／側面中央のグレー角丸矢印／下部ドット／動画は再生ボタン）。guest-roomにスコープ */
.p-lower-cards--guest-room .p-lower-card {
  gap: clamp(24px, 4.5vw, 64px);
}
/* スライダー本体（.splide.p-lower-card__img）だけをメディア枠に。スライド(.splide__slide.p-lower-card__img)には効かせない */
.p-lower-cards--guest-room .splide.p-lower-card__img {
  margin: 0;
  -webkit-box-flex: 0;
	  -ms-flex: 0 0 56%;
		  flex: 0 0 56%;
  width: auto;
  max-width: 760px;
  height: auto;
  aspect-ratio: 4/3;
  position: relative;
}
.p-lower-cards--guest-room .splide.p-lower-card__img .splide__track,
.p-lower-cards--guest-room .splide.p-lower-card__img .splide__list,
.p-lower-cards--guest-room .splide.p-lower-card__img .splide__slide {
  height: 100%;
}
.p-lower-cards--guest-room .splide.p-lower-card__img .splide__slide {
  aspect-ratio: auto;
}
.p-lower-cards--guest-room .splide.p-lower-card__img .splide__slide img,
.p-lower-cards--guest-room .splide.p-lower-card__img .splide__slide video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
	 object-fit: cover;
}
.p-lower-cards--guest-room .p-lower-card__content {
  -webkit-box-flex: 1;
	  -ms-flex: 1;
		  flex: 1;
}
@media screen and (max-width: 768px) {
  .p-lower-cards--guest-room .splide.p-lower-card__img {
	-ms-flex: none;
		flex: none;
	width: 100%;
	max-width: none;
  }
  .p-lower-cards--guest-room .p-lower-card__content {
	-ms-flex: none;
		flex: none;
  }
}
.p-lower-cards--guest-room .splide {
  position: relative;
}
.p-lower-cards--guest-room .splide__arrow {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
		  transform: translateY(-50%);
  z-index: 2;
  width: clamp(34px, 2.7777777778vw, 40px);
  height: clamp(34px, 2.7777777778vw, 40px);
  border-radius: 4px;
  background: rgba(245, 245, 245, 0.85);
  opacity: 1;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
}
.p-lower-cards--guest-room .splide__arrow:hover {
  background: #fff;
}
.p-lower-cards--guest-room .splide__arrow--prev {
  left: clamp(8px, 0.9722222222vw, 14px);
}
.p-lower-cards--guest-room .splide__arrow--next {
  right: clamp(8px, 0.9722222222vw, 14px);
}
.p-lower-cards--guest-room .splide__arrow svg {
  width: 42%;
  height: 42%;
  fill: #333333;
}
/* Splide既定テーマ未読込のため左(prev)矢印が右向きのまま→水平反転して左向きに */
.p-lower-cards--guest-room .splide__arrow--prev svg {
  -webkit-transform: scaleX(-1);
		  transform: scaleX(-1);
}
.p-lower-cards--guest-room .splide__pagination {
  position: absolute;
  left: 50%;
  bottom: clamp(8px, 0.8333333333vw, 12px);
  -webkit-transform: translateX(-50%);
		  transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  z-index: 2;
  padding: 0;
}
.p-lower-cards--guest-room .splide__pagination li {
  line-height: 1;
}
.p-lower-cards--guest-room .splide__pagination__page {
  width: 8px;
  height: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  opacity: 1;
}
.p-lower-cards--guest-room .splide__pagination__page.is-active {
  background: #fff;
  -webkit-transform: none;
		  transform: none;
}
.p-lower-card__video {
  position: relative;
}
.p-lower-card__play {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
		  transform: translate(-50%, -50%);
  z-index: 3;
  width: clamp(54px, 5vw, 72px);
  height: clamp(54px, 5vw, 72px);
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
}
.p-lower-card__play:hover {
  background: rgba(0, 0, 0, 0.62);
}
.p-lower-card__play::before {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
		  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}
.p-lower-card__video.is-playing .p-lower-card__play {
  display: none;
}
/* ▲改修ここまで [客室 S1/S3] */

/* ---- style.css L4768-4770 ---- */
  /* ▼改修 [共通 リード文字サイズ] 補足情報リード 最大15px→14px・本文と統一 */
  font-size: clamp(13px, 1.0416666667vw, 14px);
  /* ▲改修ここまで [共通 リード文字サイズ] */

/* ---- style.css L4776-4778 ---- */
	/* ▼改修 [共通 リード文字サイズ] 補足情報リードSP 最大15px→14px */
	font-size: clamp(0px, 3.4666666667vw, 14px);
	/* ▲改修ここまで [共通 リード文字サイズ] */

/* ---- style.css L4942-4971 ---- */
/* ▼改修 [施設 S4] 館内マップ見出しを横書き化＋画像の上に配置（重なり解消・PC/SP共通） */
.p-equipment-map__container .c-vertical__titles {
  position: static;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
	  -ms-flex-direction: row;
		  flex-direction: row;
  -webkit-box-align: baseline;
	  -ms-flex-align: baseline;
		  align-items: baseline;
  gap: 0.6em;
  margin-bottom: clamp(16px, 2.2vw, 32px);
  padding-left: clamp(0px, 1.7vw, 25px);
}
.p-equipment-map__container .c-vertical__title,
.p-equipment-map__container .c-vertical__title--en {
  -webkit-writing-mode: horizontal-tb;
	  -ms-writing-mode: lr-tb;
		  writing-mode: horizontal-tb;
}
@media screen and (max-width: 768px) {
  .p-equipment-map__container .c-vertical__titles {
	margin-bottom: 20px;
	padding-left: 0;
  }
}
/* ▲改修ここまで [施設 S4] 館内マップ見出し横書き */

/* ---- style.css L4993-5268 ---- */
/* ▼移植 [施設 S4] インタラクティブ館内マップ＋[S1]動画ヒーロー */
.p-lower-mv--video {
  overflow: hidden;
  /* 動画は16:9。1440/560だと上下が大きく切れるため、動画ヒーローは16:9にして無クロップ表示 */
  aspect-ratio: 16/9;
  max-height: 88vh;
}
/* ▼改修 [共通 ヒーロー①(第1回) 動画コンテナ] SP動画コンテナを縦長・中央クロップに（縮小表示を解消し重なり/タイトル切れを防止）。※白帯/ロゴは ヒーロー②(第2回) を参照 */
@media screen and (max-width: 768px) {
  .p-lower-mv--video {
	aspect-ratio: 375/667;
	max-height: none;
  }
}
/* ▲改修ここまで [共通 ヒーロー①(第1回)] */
.p-lower-mv__video {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
	 object-fit: cover;
  -o-object-position: center center;
	 object-position: center center;
}
.p-equipment-map__layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
	  -ms-flex-align: start;
		  align-items: flex-start;
  gap: clamp(24px, 3vw, 48px);
  /* ▼改修 [施設 S4] 見出し横書き化に伴い左オフセット解除 */
  margin-left: 0;
  /* ▲改修ここまで [施設 S4] */
}
@media screen and (max-width: 768px) {
  .p-equipment-map__layout {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
		-ms-flex-direction: column;
			flex-direction: column;
	margin-left: 0;
  }
}
.p-equipment-map__maps {
  -webkit-box-flex: 1;
	  -ms-flex: 1 1 56%;
		  flex: 1 1 56%;
  min-width: 0;
}
.p-equipment-map__maps .p-equipment-map__img {
  width: 100%;
  margin-inline: 0;
  cursor: pointer;
}
.p-equipment-map__maps .p-equipment-map__img + .p-equipment-map__img {
  margin-top: 16px;
}
.p-equipment-map__maps .p-equipment-map__img img {
  height: auto;
  -o-object-fit: fill;
	 object-fit: fill;
}
.p-equipment-map__floor {
  position: relative;
}
.p-equipment-map__point {
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
		  transform: translate(-50%, -50%);
  width: clamp(20px, 1.8vw, 26px);
  height: clamp(20px, 1.8vw, 26px);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 3;
}
.p-equipment-map__point--onsen { color: #CDAF64; }
.p-equipment-map__point--room { color: #4a7c9b; }
.p-equipment-map__point--cafe { color: #c75c5c; }
.p-equipment-map__dot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  border: 2px solid #fff;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
		  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  -webkit-transition: -webkit-transform 0.25s ease;
		  transition: transform 0.25s ease;
}
.p-equipment-map__point::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  z-index: -1;
  -webkit-animation: eqPing 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
		  animation: eqPing 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@-webkit-keyframes eqPing {
  0% { -webkit-transform: scale(1); opacity: 0.5; }
  80%, 100% { -webkit-transform: scale(2.4); opacity: 0; }
}
@keyframes eqPing {
  0% { transform: scale(1); opacity: 0.5; }
  80%, 100% { transform: scale(2.4); opacity: 0; }
}
.p-equipment-map__point:hover .p-equipment-map__dot {
  -webkit-transform: scale(1.15);
		  transform: scale(1.15);
}
.p-equipment-map__point.is-active .p-equipment-map__dot {
  -webkit-transform: scale(1.28);
		  transform: scale(1.28);
}
.p-equipment-map__point.is-active::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid currentColor;
}
.p-equipment-map__plabel {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  -webkit-transform: translateX(-50%);
		  transform: translateX(-50%);
  background: rgba(51, 51, 51, 0.92);
  color: #fff;
  font-size: 11px;
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.25s ease;
		  transition: opacity 0.25s ease;
  z-index: 4;
}
.p-equipment-map__point:hover .p-equipment-map__plabel,
.p-equipment-map__point.is-active .p-equipment-map__plabel {
  opacity: 1;
}
.p-equipment-map__panel {
  -webkit-box-flex: 1;
	  -ms-flex: 1 1 44%;
		  flex: 1 1 44%;
  min-width: 0;
}
.p-equipment-map__hint {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
	  -ms-flex-align: center;
		  align-items: center;
  -webkit-box-pack: center;
	  -ms-flex-pack: center;
		  justify-content: center;
  gap: 6px;
  -ms-flex-wrap: wrap;
	  flex-wrap: wrap;
  text-align: center;
  border: 2px dashed #DFDCD9;
  border-radius: 8px;
  padding: 14px;
  font-size: clamp(12px, 0.9027777778vw, 13px);
  color: #707070;
  background: #fafafa;
}
.p-equipment-map__hint-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #c75c5c;
}
.p-equipment-map__detail {
  margin-top: clamp(16px, 1.6vw, 24px);
  background: #fff;
  border: 1px solid #DFDCD9;
  border-radius: 8px;
  overflow: hidden;
  -webkit-box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08);
		  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08);
}
.p-equipment-map__detail-img {
  aspect-ratio: 4/3;
  background: #f0ebe5;
}
.p-equipment-map__detail-img img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
	 object-fit: cover;
}
.p-equipment-map__detail-body {
  padding: clamp(16px, 1.8vw, 24px);
}
.p-equipment-map__detail-en {
  color: #CDAF64;
  font-size: clamp(12px, 0.9027777778vw, 13px);
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.p-equipment-map__detail-title {
  font-size: clamp(18px, 1.5277777778vw, 21px);
  letter-spacing: 0.08em;
  margin-bottom: clamp(10px, 1.1vw, 16px);
}
.p-equipment-map__detail-text {
  font-size: clamp(13px, 0.9722222222vw, 14px);
  line-height: 2;
  color: #464646;
  margin-bottom: clamp(14px, 1.4vw, 20px);
}
.p-equipment-map__detail-link {
  display: inline-block;
  border: 1px solid #333333;
  padding: 8px 18px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #333333;
  -webkit-transition: all 0.3s ease;
		  transition: all 0.3s ease;
}
.p-equipment-map__detail-link::after {
  content: "◆";
  color: #CDAF64;
  margin-left: 8px;
  font-size: 10px;
}
.p-equipment-map__detail-link:hover {
  background: #333333;
  color: #fff;
}
.p-equipment-map__modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
	  -ms-flex-align: center;
		  align-items: center;
  -webkit-box-pack: center;
	  -ms-flex-pack: center;
		  justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}
.p-equipment-map__modal img {
  max-width: 92%;
  max-height: 90%;
}
.p-equipment-map__modal-close {
  position: absolute;
  top: 16px;
  right: 26px;
  background: none;
  border: 0;
  color: #fff;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
}
/* ▲移植ここまで [施設 S4]＋[S1] */

/* ---- style.css L7283-7322 ---- */
/* ▼新規 [共通] モバイル等での不自然な改行（文中の泣き別れ＝「夜。」だけ次行等）対策。日本語を文節境界で折り返す。
   未対応ブラウザ(Firefox等)は従来の折返しにフォールバック（悪化なし）。固定<br>が文の途中に入る箇所は別途SP無効化が必要 */
.u-wrap-phrase {
  word-break: auto-phrase;
  text-wrap: pretty;
}
/* 改行させたくない語句（熟語・固有名詞など）をひとくくりに保つ。例：いつの間にか */
.u-nobr {
  white-space: nowrap;
}
/* 汎用：サイト全体の本文に文節折返しを既定適用（個別のclass付与は不要）。
   例外的に固めたい語句のみ <span class="u-nobr"> で囲む。未対応ブラウザ(Firefox等)は従来折返しにフォールバック */
body {
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* 動画ヒーローの白ファサード：白背景＋黒ロゴ→動画が再生可能になったらフェードアウト */
.p-mv-facade {
  position: absolute;
  inset: 0;
  z-index: 30; /* ヘッダー(z:20)より前面に。ファサード時にヘッダーロゴが透けて見え「ロゴが切れた」ように見える不具合を解消 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  opacity: 1;
  transition: opacity 0.8s ease;
}
.p-mv-facade.is-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0s 0.8s;
}
.p-mv-facade .p-mv-facade__logo {
  width: clamp(110px, 12vw, 170px) !important;
  height: auto !important;
  object-fit: contain !important;
}
/* ▲新規ここまで [共通] */

/* ---- style.css L7324-7351 ---- */
/* ▼改修 [共通 ヒーロー②(第2回④⑤) ヘッダー帯] SPヒーローを「白帯＋動画」に統一。
   白帯=ヘッダー(透明)を白背景にしたもの。高さはロゴ＋ハンバーガーに合わせて縮小(167px→88px)。
   main{margin-top:-167px}でヘッダーがヒーロー上部に重なる構造を利用し、その帯を白くフタする。
   白帯に合わせてロゴ＝黒(header.phpでlogo-black差替)・ハンバーガー＝黒。動画・画像の中央クロップは ヒーロー①(第1回) の .p-lower-mv--video 側で指定。PCは変更なし。 */
@media screen and (max-width: 768px) {
  .p-header--hero {
	background: #fff;
	height: 88px;
  }
  /* SPロゴを縦版→横版（デスクトップ版の縮小・白帯のため黒ロゴ）。88px帯に収まる範囲で拡大。縦ロゴ指定(aspect 37/88・width74px・margin-left:11px)を上書き */
  /* margin-topを負値にして上へ寄せ、ハンバーガーボタンと上下中央を揃える（ヘッダーpadding-top分を打ち消す） */
  .p-header--hero .p-header__title--hero a img {
	width: clamp(0px, 18vw, 68px);
	aspect-ratio: 128/87;
	margin-top: -8px;
	margin-left: 0;
  }
  /* 白帯のためハンバーガー線を黒に（ドロワー展開時=暗背景のときは白へ戻す） */
  .p-header--hero .p-header__hamburger:not([aria-expanded="true"])::before,
  .p-header--hero .p-header__hamburger:not([aria-expanded="true"])::after {
	background-color: #333;
  }
  /* 白ファサードは白帯にはかけず「動画の範囲」だけを覆う（top=main margin-top相当の167pxで帯の直下から開始） */
  .p-mv-facade {
	top: 167px;
  }
}
/* ▲改修ここまで [共通 ヒーロー②(第2回④⑤)] */

/* ---- style.css L7378-7464 ---- */
/* ▼新規 [コンセプト S6新設] 古民家再生の物語：3枚コンポジション（傾きなし・中央大／左右小）。PCは純CSSフェードイン（移動・拡大なし・中央に重ならず）、SPは静止。発火はJSの is-in 付与 */
.p-concept-slidein {
  padding: clamp(40px, 6vw, 96px) 0;
}
.p-concept-slidein__stage {
  position: relative;
  width: min(92%, 1040px);
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 1040 / 640;
  cursor: pointer; /* クリックで再生（⑥） */
}
.p-concept-slidein__item {
  position: absolute;
  margin: 0;
  will-change: transform, opacity;
  -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
		  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.p-concept-slidein__item img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
	 object-fit: cover;
}
/* 定位置（最終状態・傾きなし）。中央を大きく、左右を小さく */
.p-concept-slidein__item--base {
  left: 21%;
  top: 12%;
  width: 58%;
  aspect-ratio: 3 / 2;
  z-index: 1;
}
.p-concept-slidein__item--tr {
  left: 1%;
  top: 1%;
  width: 26%;
  aspect-ratio: 3 / 2;
  z-index: 3;
}
.p-concept-slidein__item--br {
  right: 1%;
  bottom: 2%;
  width: 28%;
  aspect-ratio: 3 / 2;
  z-index: 2;
}
/* JS制御時のみ初期非表示→ゆっくりフェードイン（移動なしの純フェードで所定位置に表示＝中央に重ならない）。
   ▼改修 [コンセプト ギミック] 2026-07-09: PC限定(min-width:769px)を撤廃しSPでも同じ演出を有効化
   （最終確認②の指摘・ユーザー承認済み。タップでの再生もJS側で全幅対応済み）。
   prefers-reduced-motion時は従来どおり静止表示（アクセシビリティ維持） ▲ */
@media (prefers-reduced-motion: no-preference) {
  .p-concept-slidein.js-anim .p-concept-slidein__item {
	opacity: 0;
	-webkit-transition: opacity 1.2s ease;
	transition: opacity 1.2s ease;
  }
  .p-concept-slidein.js-anim.is-in .p-concept-slidein__item {
	opacity: 1;
  }
  /* 中央→左上→右下の順にフェード（遅延） */
  .p-concept-slidein.js-anim.is-in .p-concept-slidein__item--base { -webkit-transition-delay: 0s; transition-delay: 0s; }
  .p-concept-slidein.js-anim.is-in .p-concept-slidein__item--tr { -webkit-transition-delay: 1s; transition-delay: 1s; }
  .p-concept-slidein.js-anim.is-in .p-concept-slidein__item--br { -webkit-transition-delay: 2.1s; transition-delay: 2.1s; }
}
@media screen and (max-width: 768px) {
  /* SPは横長ステージに3枚を対角カスケード。tr=左上隅／br=右下隅にフラッシュ配置し、中央(base)と少し重ねて一体感を出す。左右画像は小さめ（右下のずれ・余白を解消） */
  .p-concept-slidein__stage {
	width: 94%;
	aspect-ratio: 10 / 9;
  }
  .p-concept-slidein__item--base {
	left: 13%;
	top: 16%;
	width: 74%;
  }
  .p-concept-slidein__item--tr {
	left: 0;
	top: 0;
	width: 42%;
  }
  .p-concept-slidein__item--br {
	left: auto;
	right: 0;
	bottom: 0;
	width: 44%;
  }
}
/* ▲新規ここまで [コンセプト S6新設] */

/* ▼改修 [共通 ヘッダー] 第4回レビュー① PCヘッダーの白文字ナビ／ロゴが、明るいヒーロー画像や白ファサード上で視認できない対策。
   どの背景でも読めるよう控えめな暗い影（ハロー）を付与。ナビはPC専用（SPは display:none）。親は不変。 */
.p-header__nav-link,
.p-header__nav-link--en {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55), 0 0 2px rgba(0, 0, 0, 0.45);
}
.p-header--hero .p-header__title a img {
  -webkit-filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
          filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}
/* ▲改修ここまで [共通 ヘッダー] 第4回レビュー① */

/* ▼改修 [写真ヒーロー] 第5回レビューC: コンセプト・周辺観光のヒーロー写真（原寸1920×1280=3:2）が
   コンテナを画像等倍の高さ(フルHDで約1270px)に押し広げ、PCフル画面でも下が切れて全体が見えなかった対策。
   動画ヒーロー(.p-lower-mv--video)と同じ 16:9＋max-height:88vh に統一し、写真は中央基準のcoverで表示。
   PC(769px〜)のみ適用。SPは従来レイアウト（コンセプトはSP専用画像）を維持。 */
@media screen and (min-width: 769px) {
  .p-lower-mv--photo {
	aspect-ratio: 16/9;
	max-height: 88vh;
	overflow: hidden;
  }
  .p-lower-mv--photo picture,
  .p-lower-mv--photo picture img {
	display: block;
	width: 100%;
	height: 100%;
  }
  .p-lower-mv--photo picture img {
	-o-object-fit: cover;
	   object-fit: cover;
	-o-object-position: center center;
	   object-position: center center;
  }
}
/* ▲改修ここまで [写真ヒーロー] 第5回レビューC */

/* [共通 ヘッダー] 第5回①の白⇔黒自動切替（ハイブリッド）は実機確認の結果、
   従来の「白文字＋text-shadow」の方が認識しやすいとの判断で取り下げ（2026-07-07）。
   視認性対策は上記 [共通 ヘッダー] 第4回レビュー① の text-shadow を継続採用。 */

/* ▼追加 [客室 S1] 第5回レビュー②: ヒーロースライドショーの白化対策（フェイルセーフ）。
   Splideのフル版CSSは .splide{visibility:hidden}（JS初期化まで丸ごと非表示）を含むため、
   JSの読み込みが遅延/失敗すると「真っ白」のままになる。未初期化でも1枚目を静止表示して
   最低限ヒーロー写真が見える状態を保証する（初期化後はSplideが通常どおり制御）。 */
.p-guest-hero-slider {
  visibility: visible;
}
.p-guest-hero-slider:not(.is-initialized) .splide__list > .splide__slide + .splide__slide {
  display: none; /* 未初期化時は2枚目以降を隠し、1枚目のみ表示（縦積み防止） */
}
/* ▲追加ここまで [客室 S1] 第5回レビュー② */


/* =========================================================
   第6回レビュー対応（2026-07-08 メンバー再レビュー指摘①〜⑤）
   ========================================================= */

/* ▼改修 [TOP ヒーロー] 第6回①: 「be yourself」を小文字表示に。
   HTMLは元々小文字だが、親 .u-en { text-transform: capitalize } が先頭を大文字化して
   「Be Yourself」と表示されていた。TOPのキャッチのみ打ち消し（PC/SP共通） */
.mv__catch-en {
  text-transform: none;
}
/* ▲改修ここまで [TOP ヒーロー] 第6回① */

/* ▼改修 [共通 予約バー] 第6回②: SPで宿泊予約(first-child)だけ文字が大きくENがはみ出す件。
   真因＝親のSP規則 .reservation-bar__item:first-child span { font-size:14px }（詳細度0-2-1）が
   子の .reservation-bar__ja{11px}/.reservation-bar__en{8px}（0-1-0）に勝って生存していた
   （既存の撤廃ブロックは font-size を再宣言していないため打ち消せていなかった）。
   詳細度で勝つ指定（0-3-0）で他2項目と同サイズに統一 */
@media screen and (max-width: 768px) {
  .reservation-bar__item:first-child .reservation-bar__ja {
	font-size: 11px;
  }
  .reservation-bar__item:first-child .reservation-bar__en {
	font-size: 8px;
  }
}
/* ▲改修ここまで [共通 予約バー] 第6回② */

/* ▼改修 [共通 CTA] 第6回③: SPでフッター/ハンバーガー/TOP予約の「ご宿泊予約はこちら」(button)だけ
   11pxになり他のリンク(17px)と不揃いな件。真因＝子のCheckinn白塗り対策
   .checkinn-reservation-button button { font-size: clamp(11px,1.18vw,17px) !important } が @media外の
   全幅適用で、SPでは11pxに落ち、親のSP規則17pxを !important で潰していた。
   SPは17pxに戻す（予約バー内の宿泊予約は②の2段組サイズを使うため対象外） */
@media screen and (max-width: 768px) {
  .p-footer__cta-links .checkinn-reservation-button button,
  .p-hamburger-menu__cta-links .checkinn-reservation-button button,
  .p-top-reservation .checkinn-reservation-button button,
  .p-lower-cta .checkinn-reservation-button button {
	font-size: 17px !important;
  }
}
/* ▲改修ここまで [共通 CTA] 第6回③ */

/* ▼改修 [客室 ヒーロー] 第6回④: SPでスライドショーの画像送り○(Splide pagination)が
   予約バー(absolute bottom:0・高さ62px)に重なる件。SPでは○を非表示（削除）。
   PCは被りが無い（実測で確認済み）ためレビュー済みデザインを維持 */
@media screen and (max-width: 768px) {
  .p-guest-hero-slider .splide__pagination {
	display: none;
  }
}
/* ▲改修ここまで [客室 ヒーロー] 第6回④ */

/* ▼改修 [周辺観光 ヒーロー] 第6回⑤: SPでヒーローが高さ約250pxの帯になり、縦書きタイトルが
   はみ出し・予約バーが写真の下1/4を覆っていた件。
   真因＝第3回でSP専用縦長画像(375×667)を廃止し横長1920×1280の単一画像に統一したが、
   SPレイアウトは「縦長画像がコンテナを押し広げる」前提のまま（第5回の16:9対策はPCのみ）。
   周辺観光ヒーロー専用モディファイア p-lower-mv--photo-sp-full（header.phpで付与）で、
   SPも他ページと同じ縦長ヒーロー(375:667)＋中央基準coverに統一。
   ※コンセプトはSP専用縦長画像が正常動作しているため対象外（--photo共通には効かせない） */
@media screen and (max-width: 768px) {
  .p-lower-mv--photo-sp-full {
	aspect-ratio: 375 / 667;
	overflow: hidden;
  }
  .p-lower-mv--photo-sp-full picture,
  .p-lower-mv--photo-sp-full picture img {
	display: block;
	width: 100%;
	height: 100%;
  }
  .p-lower-mv--photo-sp-full picture img {
	-o-object-fit: cover;
	   object-fit: cover;
	-o-object-position: center center;
	   object-position: center center;
  }
}
/* ▲改修ここまで [周辺観光 ヒーロー] 第6回⑤ */

/* ▼改修 [共通 CTA] 第6回⑥: フッター/ハンバーガーの予約系3ボタンでカレンダーアイコンの位置が不揃いな件。
   真因＝アイコンの付け方が2方式混在：a系(温泉/レストラン)は span::before がテキスト追従
   （テキスト長で位置が変わる）、button系(宿泊)は枠左端からの固定位置。
   → a系も button系と同じ「枠左端固定」(PC=left:35px/SP=left:28px・上下中央)に統一し、
   テキスト余白も button系と同値に（お問い合わせはアイコン無しのため対象外）。
   セレクタはフッター/ハンバーガー限定＝予約バー・下層CTA(p-lower-cta)・TOP予約には影響しない */
.p-footer__cta-links .c-cta-link__reservation,
.p-hamburger-menu__cta-links .c-cta-link__reservation {
  position: relative;
  padding-left: clamp(0px, 3.2638888889vw, 47px); /* 親の button と同値 */
}
.p-footer__cta-links .c-cta-link__reservation span,
.p-hamburger-menu__cta-links .c-cta-link__reservation span {
  position: static;   /* ::before の基準を span→a(枠) へ移す */
  padding-left: 0;    /* テキスト追従用の余白を撤廃 */
}
.p-footer__cta-links .c-cta-link__reservation span::before,
.p-hamburger-menu__cta-links .c-cta-link__reservation span::before {
  left: 35px;         /* 親 button::before と同じ横位置 */
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
/* button系アイコンの縦位置(top:30%/33%)も上下中央に統一 */
.p-footer__cta-links .checkinn-reservation-button button::before,
.p-hamburger-menu__cta-links .checkinn-reservation-button button::before {
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  .p-footer__cta-links .c-cta-link__reservation,
  .p-hamburger-menu__cta-links .c-cta-link__reservation {
	padding-left: 55px; /* 親のSP button と同値 */
  }
  .p-footer__cta-links .c-cta-link__reservation span::before,
  .p-hamburger-menu__cta-links .c-cta-link__reservation span::before {
	left: 28px;         /* 親のSP button::before と同じ横位置 */
  }
}
/* ▲改修ここまで [共通 CTA] 第6回⑥ */

/* =========================================================
   最終確認対応（2026-07-09 ユーザー指摘①）SP動画ヒーローの刷新
   ========================================================= */
/* ▼改修 [共通 SPヒーロー動画] 2026-07-09: SPの動画ヒーローを「フルスクリーン枠に中央クロップ」から
   「4:5枠で動画を見せる＋直下に予約バー」へ変更（案B改・ユーザー承認済み）。
   - SP専用動画（TOP/温泉/食事/施設＝1080×1350）→ クロップ無しで全体表示
   - PC共通動画（レストラン/アクティビティ＝1280×720）→ 中央を4:5で切り出し（拡大なし・縮小のみ。
     従来の縦長枠より見える範囲が広がる: 横32%→45%）
   - 予約バーは動画に重ねず、動画下端＝バー上端で直下に通常配置
   - 対象はSPの動画ヒーロー6ページのみ。写真ヒーロー（コンセプト/周辺観光/アクセス/1日の過ごし方/客室）とPC表示は不変 */
@media screen and (max-width: 768px) {
  /* 1) 動画: 4:5枠（素材が4:5なら無クロップ、16:9なら中央切り出し） */
  .mv__video,
  .p-lower-mv--video .p-lower-mv__video {
	height: auto;
	aspect-ratio: 4 / 5;
	max-height: none;
	-o-object-fit: cover;
	   object-fit: cover;
	-o-object-position: center center;
	   object-position: center center;
  }
  /* 2) コンテナ: 固定の縦長比をやめ、高さは中身（動画＋バー）に任せる */
  .p-lower-mv--video {
	aspect-ratio: auto;
	max-height: none;
	height: auto;
  }
  /* 3) ヘッダー白帯との重なり解消（2026-07-10・ユーザー指摘）: 親 main{margin-top:-167px}
	（PCで透明ヘッダーをヒーローに重ねるための全体設計）により、SPでは不透明な白帯の裏に
	動画の上部167pxが隠れて「上が切れて横長に見える」原因になっていた。
	SPの動画ヒーローのみ相殺し、動画をヘッダー白帯の直下から開始させる。
	写真ヒーロー（コンセプト/周辺観光/アクセス等）はcover表示のため従来どおり（対象外） */
  .mv,
  .p-lower-mv--video {
	margin-top: 167px;
  }
  /* 3b) 予約バー: 重ね配置(absolute bottom:0)をやめ、動画直下の通常配置に
	（親の width:100%/height:62px は維持。動画下端＝バー上端が自動で一致） */
  .mv .reservation-bar,
  .p-lower-mv--video .reservation-bar {
	position: static;
  }
  /* 4) TOPキャッチ「ありのままで」: bottom基準にバー分(62px)を加算し動画領域内へ
	（2026-07-10(2): 白帯重なり解消後に位置調整を再適用。94→32px＝動画下部へ） */
  .mv__catch {
	bottom: calc(62px + 32px);
  }
  /* 5) scroll down: 動画内右側へ（::beforeの線が下に58px伸びるためバーに入らない高さ）
	（2026-07-10(2): 位置調整を再適用。164→96px＝線の下端は動画内） */
  .mv__scroll-down {
	bottom: calc(62px + 96px);
  }
  /* 6) 下層の縦書きタイトル: 動画(469px)内に収まる位置へ（従来667px枠基準の13%を置き換え）
	（2026-07-10(2): 位置調整を再適用。60→32px＝TOPキャッチと統一） */
  .p-lower-mv--video .p-lower-mv__title-wrapper {
	bottom: calc(62px + 32px);
  }
}
/* ▲改修ここまで [共通 SPヒーロー動画] 2026-07-09 */


/* =========================================================
   SPヒーロー統一（2026-07-10 ユーザー承認済み改善②）
   ========================================================= */
/* ▼改修 [共通 SPヒーロー統一] 2026-07-10: 写真ヒーローのページ（1日の過ごし方/客室/コンセプト/
   アクセス/周辺観光/404）も、動画ヒーロー6ページと同じ構成
   「白帯ヘッダー直下から開始 → 4:5枠（中央基準crop）→ 予約バー直下」にSPで統一。
   - 白帯相殺: 親 main{margin-top:-167px} による上167px不可視を写真ヒーローでも解消
   - 4:5枠: SP縦長素材(375:667)は上下を中央基準で少し切り、横長素材(周辺観光/客室)は左右を切る
   - 第6回⑤の p-lower-mv--photo-sp-full(375:667枠) は本統一(4:5)に置き換わる（詳細度で上書き）
   PC表示は不変。ブログ/お問い合わせ等ヒーロー無しページは非対象（.p-lower-mv不使用を確認済み） */
@media screen and (max-width: 768px) {
  /* A) 白帯相殺（動画ページは既存指定と同値・重複無害） */
  .p-lower-mv {
	margin-top: 167px;
  }
  /* B) 写真ヒーローのコンテナ: 固定比をやめ中身（写真＋バー）に任せる */
  .p-lower-mv:not(.p-lower-mv--video) {
	aspect-ratio: auto;
	height: auto;
	max-height: none;
	overflow: visible;
  }
  /* C) 写真: 動画と同じ4:5枠・中央基準crop */
  .p-lower-mv:not(.p-lower-mv--video) picture img,
  .p-lower-mv:not(.p-lower-mv--video) > img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	max-height: none;
	-o-object-fit: cover;
	   object-fit: cover;
	-o-object-position: center center;
	   object-position: center center;
  }
  /* D) 客室スライドショー: absolute(inset:0)をフロー配置に変え、4:5枠で表示
	（スライド/画像は既存の height:100% 連鎖でこの枠に追従） */
  .p-lower-mv--guest-hero .p-guest-hero-slider {
	position: static;
	inset: auto;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
  }
  /* E) 予約バー: 全ヒーローで「写真/動画の直下」に統一 */
  .p-lower-mv .reservation-bar {
	position: static;
  }
  /* F) 縦書きタイトル位置: 動画ページと同値に統一（画像下端から32px上） */
  .p-lower-mv .p-lower-mv__title-wrapper {
	bottom: calc(62px + 32px);
  }
}
/* ▲改修ここまで [共通 SPヒーロー統一] 2026-07-10 */


/* ▼改修 [共通 ハンバーガー] 2026-07-10: SPナビの列崩れ修正（最終確認の指摘①）。
   親CSSは「nth-child奇数=左列148px固定・偶数=auto」方式だが、非表示のli（PC専用レストラン等）が
   DOM上の番号を消費するため表示順とnth-childがズレ、ブログ追加後は
   アクセス=auto幅・ブログ=148px と逆転して行が崩れていた。
   → 表示中の全項目を148px（2列=296px）に統一し、隠しliの有無に依存しない構造にする */
@media screen and (max-width: 768px) {
  /* flex+nth-child幅指定 → Grid 2カラム（左148px・右は残り幅）へ変更。
	 display:noneの項目はGridの自動配置から除外されるため、隠しliが何個あっても表示項目が順に2列に整列する */
  .p-hamburger-menu .p-hamburger-menu__nav-list {
	display: grid;
	grid-template-columns: 148px 1fr;
	-webkit-column-gap: 0;
	   -moz-column-gap: 0;
			column-gap: 0;
	row-gap: 30px;
  }
  .p-hamburger-menu__nav-list .p-hamburger-menu__nav-item,
  .p-hamburger-menu__nav-list:nth-of-type(2) .p-hamburger-menu__nav-item:nth-child(n) {
	width: auto;
  }
}
/* ▲改修ここまで [共通 ハンバーガー] 2026-07-10 */

/* ▼改修 [コンセプト ギミック] 2026-07-10: クリック/タップでの再生用（最終確認の指摘②）。
   再生時に一瞬で初期状態（透明）へ戻すための遷移無効クラス。
   （従来のreplayは同一フレームでis-inを外して即付け直すため遷移が発生せず、見た目が変わらなかった） */
.p-concept-slidein.js-anim.no-anim .p-concept-slidein__item {
  -webkit-transition: none !important;
  transition: none !important;
}
/* ▲改修ここまで [コンセプト ギミック] 2026-07-10 */