/* ==========================================================================
   望雲 ビジュアルリニューアル 2026
   既存CSS(main.css/boun.css/style.css)の後に読み込み、視覚表現のみ上書きする。
   情報構造・URL・既存JSの挙動には手を入れない。
   ========================================================================== */

:root {
  /* Color */
  --color-bg:            #FFFFFF;
  --color-bg-warm:       #F8F6F3;
  --color-bg-cream:      #F5F3EF;
  --color-text:          #1A1A1A;
  --color-accent:        #615B54;
  --color-accent-light:  #8A847C;
  --color-dark:          #22201E;
  --color-on-dark:       #FFFFFF;
  --color-line:          #DDD8D1;

  /* Typography */
  --font-serif-jp: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --font-serif-en: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-brush:    "Yuji Syuku", var(--font-serif-jp);

  --ls-label: 0.2em;
  --ls-head:  0.12em;
  --ls-body:  0.06em;
  --lh-body:  2.0;

  /* Layout */
  --content-max: 1120px;
  --section-pad-y: clamp(72px, 8vw, 120px);
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition: 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* --------------------------------------------------------------------------
   1. ベース
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-serif-jp);
  color: var(--color-text);
  background: var(--color-bg);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
}

.wp-blocks p,
.contents p {
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

h1, h2, h3, h4 {
  font-family: var(--font-serif-jp);
  font-weight: 500;
  letter-spacing: var(--ls-head);
  line-height: 1.6;
  color: var(--color-text);
}

.wp-blocks h2.wp-block-heading {
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 500;
}

.wp-blocks h3.wp-block-heading {
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 500;
}

a {
  color: var(--color-text);
  transition: opacity var(--transition), color var(--transition), background-color var(--transition);
}

figcaption {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--color-accent-light);
}

::selection { background: var(--color-line); }

/* --------------------------------------------------------------------------
   2. 英字ラベル（既存 .home-contents-heading-eng ＋ 追加 .eng-label）
   -------------------------------------------------------------------------- */
.home-contents-heading-eng,
.eng-label,
.page-eng-label {
  font-family: var(--font-serif-en);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 10px;
  line-height: 1.4;
}

/* ラベル脇の短い罫線 */
.home-contents-heading-eng::after,
.eng-label::after {
  content: "";
  display: inline-block;
  width: 40px;
  height: 1px;
  background: var(--color-accent-light);
  vertical-align: middle;
  margin-left: 16px;
  opacity: 0.6;
}

.has-text-align-center .eng-label::after,
.home-contents-heading-eng.is-center::after,
.eng-label.is-center::after { display: none; }

.home-contents-heading-eng.is-center { text-align: center; }

/* --------------------------------------------------------------------------
   3. ボタン（アウトライン＋›シェブロンで統一）
   -------------------------------------------------------------------------- */
.wp-block-button .wp-block-button__link {
  font-family: var(--font-serif-jp);
  border-radius: 0 !important;
  font-size: 14px;
  letter-spacing: 0.14em;
  line-height: 1;
}

.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button[class*="is-style-outline--"] .wp-block-button__link {
  border: 1px solid var(--color-accent) !important;
  background: transparent !important;
  color: var(--color-accent) !important;
  padding: 16px 48px 16px 40px;
  position: relative;
  transition: color var(--transition), background-color var(--transition);
}

.wp-block-button.is-style-outline .wp-block-button__link::after,
.wp-block-button[class*="is-style-outline--"] .wp-block-button__link::after {
  content: "\203A"; /* › */
  font-family: var(--font-serif-en);
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-52%);
  transition: transform var(--transition);
  font-size: 16px;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button[class*="is-style-outline--"] .wp-block-button__link:hover {
  background: var(--color-accent) !important;
  color: var(--color-on-dark) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover::after,
.wp-block-button[class*="is-style-outline--"] .wp-block-button__link:hover::after {
  transform: translateY(-52%) translateX(4px);
}

/* --------------------------------------------------------------------------
   4. ヘッダー
   -------------------------------------------------------------------------- */
.header {
  transition: background-color var(--transition), box-shadow var(--transition);
}

.header,
.header-inner {
  background: rgba(255, 255, 255, 0.94) !important;
}

.header-shadow { box-shadow: none; border-bottom: 1px solid var(--color-line); }

.header-inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(20px, 3vw, 40px);
  box-sizing: border-box;
}

/* ロゴは既存の画像ロゴを維持（変更しない） */

.header-nav .menu-list {
  font-family: var(--font-serif-jp);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.1em;
  gap: 28px;
}

.header-nav .menu-list > li > a { color: var(--color-text); }
.header-nav .menu-list > li > a:hover { color: var(--color-accent); text-decoration: none; }

/* 予約ボタン（インラインstyleの#b5485bを上書き） */
.reservation-buttons div.wp-block-button.reservation > a {
  background: var(--color-dark) !important;
  color: var(--color-on-dark) !important;
  font-family: var(--font-serif-jp);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.12em;
  padding: 12px 28px;
  gap: 6px;
}

.reservation-buttons div.wp-block-button.reservation > a em {
  font-size: 10px;
  letter-spacing: 0.16em;
  opacity: 0.75;
}

.reservation-buttons div.wp-block-button.reservation > a:hover { opacity: 0.85; }

.header-buttons-list a { color: var(--color-accent); }

/* --------------------------------------------------------------------------
   5. ヒーロー（ホーム / 写真スライダー）ヘッダーは常時白のまま
   -------------------------------------------------------------------------- */
.hero-slider {
  position: relative;
  height: calc(100svh - 80px);
  min-height: 480px;
  overflow: hidden;
  background: var(--color-dark);
  cursor: pointer; /* タップ/クリックで次のスライドへ */
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.8s var(--ease);
  z-index: 0;
}

.hero-slide.is-active { opacity: 1; z-index: 1; }

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

/* ゆっくりしたKen Burns（表示中のみ） */
@media (prefers-reduced-motion: no-preference) {
  .hero-slide img { transform: scale(1.0); }
  .hero-slide.is-active img {
    animation: hero-kenburns 8s var(--ease) forwards;
  }
  @keyframes hero-kenburns {
    from { transform: scale(1.0); }
    to   { transform: scale(1.06); }
  }
}

/* 控えめなスクリム */
.hero-slider::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.22);
  pointer-events: none;
  z-index: 2;
}

/* スライダーインジケーター（細い横線型・下部中央） */
.hero-indicators {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hero-indicators button {
  display: block;
  width: 24px;
  height: 2px;
  padding: 8px 0;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  transition: width var(--transition);
}

.hero-indicators button::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: #fff;
  opacity: 0.5;
  transition: opacity var(--transition);
}

.hero-indicators li.is-active button { width: 48px; }
.hero-indicators li.is-active button::after { opacity: 1; height: 2px; }

/* 中央ロゴオーバーレイ */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: #fff;
  text-align: center;
  pointer-events: none;
}

.hero-overlay .hero-eng {
  font-family: var(--font-serif-en);
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.9;
}

.hero-overlay .hero-logo {
  font-family: var(--font-brush);
  font-size: clamp(56px, 9vw, 104px);
  line-height: 1.15;
  letter-spacing: 0.14em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

/* ロゴ画像（黒ロゴを白抜きにして使用） */
.hero-overlay .hero-logo-img {
  width: clamp(220px, 36vw, 360px);
  height: auto;
  filter: brightness(0) invert(1) drop-shadow(0 2px 20px rgba(0, 0, 0, 0.45));
}

.hero-overlay .hero-sub {
  font-family: var(--font-serif-jp);
  font-size: clamp(12px, 1.6vw, 15px);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  opacity: 0.92;
}

.hero-overlay .hero-scroll {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-serif-en);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.85;
  padding-bottom: 48px;
}

.hero-overlay .hero-scroll {
  bottom: 56px;
}

.hero-overlay .hero-scroll::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.7);
  animation: hero-scroll-line 2.4s var(--ease) infinite;
  transform-origin: top;
}

@keyframes hero-scroll-line {
  0%   { transform: scaleY(0); }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* --------------------------------------------------------------------------
   6. 予約バー（ホーム / renewal.jsが挿入）
   -------------------------------------------------------------------------- */
.rsv-bar {
  position: relative;
  z-index: 5;
  max-width: var(--content-max);
  margin: -64px auto 0;
  background: var(--color-bg-cream);
  border: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 28px 40px;
}

.rsv-bar-label { margin: 0; flex: none; }

.rsv-bar-label .rsv-eng {
  display: block;
  font-family: var(--font-serif-en);
  font-size: 12px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-accent);
}

.rsv-bar-label .rsv-jp {
  font-size: 18px;
  letter-spacing: var(--ls-head);
}

.rsv-bar-note {
  margin: 0;
  flex: 1;
  font-size: 13px;
  line-height: 1.9;
  color: var(--color-accent);
  border-left: 1px solid var(--color-line);
  padding-left: 32px;
}

.rsv-bar-actions { display: flex; align-items: center; gap: 12px; flex: none; }

.rsv-btn {
  display: inline-block;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.14em;
  padding: 16px 44px 16px 32px;
  position: relative;
  white-space: nowrap;
}

.rsv-btn::after {
  content: "\203A";
  font-family: var(--font-serif-en);
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-52%);
  transition: transform var(--transition);
}

.rsv-btn-dark {
  background: var(--color-dark);
  color: var(--color-on-dark);
  border: 1px solid var(--color-dark);
}

.rsv-btn-dark:hover { opacity: 0.85; color: var(--color-on-dark); }

.rsv-btn-outline {
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  background: transparent;
  transition: background-color var(--transition), color var(--transition);
}

.rsv-btn-outline:hover { background: var(--color-accent); color: var(--color-on-dark); }

.rsv-btn:hover::after { transform: translateY(-52%) translateX(4px); }

@media screen and (max-width: 1023px) {
  .rsv-bar { flex-wrap: wrap; gap: 16px; margin: 0 16px; padding: 24px; }
  .rsv-bar-note { flex-basis: 100%; border-left: none; padding-left: 0; order: 3; }
}

@media screen and (max-width: 768px) {
  /* モバイルは既存の下部固定メニュー（宿泊予約）が予約導線 */
  .rsv-bar { display: none; }
}

/* --------------------------------------------------------------------------
   7. ホームのセクション
   -------------------------------------------------------------------------- */
body.home .content.wp-blocks > .wp-block-spacer { display: none; }

body.home .content.wp-blocks > .wp-block-group {
  max-width: none;   /* 旧 .home-contents{max-width:960px} を打ち消し、セクションは全幅・内側要素で中央寄せ */
  padding: var(--section-pad-y) 24px;
  margin: 0;
  position: relative;
}

/* 固定ヘッダー経由のアンカー移動でも見出しが隠れないようにする */
body.home .content.wp-blocks > .wp-block-group[id] {
  scroll-margin-top: 88px;
}

/* 旧CSSの max-width:960px を持つ内部ラッパも解除（中央寄せは各コンテナで担保） */
body.home .content.wp-blocks .home-contents { max-width: none; }

/* 交互背景（renewal.jsが .is-alt を付与） */
body.home .content.wp-blocks > .wp-block-group.is-alt { background: var(--color-bg-warm); }

/* 湯けむりモチーフの装飾ライン */
body.home .content.wp-blocks > .wp-block-group::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='520' viewBox='0 0 1400 520' fill='none'%3E%3Cpath d='M-40 420 C 260 300, 520 500, 820 340 S 1240 180, 1460 260' stroke='%23DDD8D1' stroke-width='1'/%3E%3Cpath d='M-40 470 C 300 370, 600 540, 940 400 S 1300 260, 1460 330' stroke='%23DDD8D1' stroke-width='1' opacity='0.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  opacity: 0.5;
  pointer-events: none;
}

body.home .content.wp-blocks > .wp-block-group.is-alt::before {
  background-position: center top;
  transform: scaleY(-1);
}

body.home .content.wp-blocks > .wp-block-group > * { position: relative; z-index: 1; }

/* セクション頭部（英字ラベル→見出し→説明→ボタン） */
.home-contents-head {
  max-width: var(--content-max);
  margin: 0 auto clamp(40px, 6vw, 64px);
}

/* 旧テーマの左パディングを解除し、見出し・本文・画像の左端を揃える */
.home-contents-heading {
  padding-left: 0 !important;
}

/* TOPページの旧テーマ由来の縦罫線を削除 */
body.home .home-contents-heading {
  border-left: none !important;
}

.home-contents-head.wp-block-columns {
  gap: clamp(32px, 4vw, 56px);
}

.home-contents-heading p.wp-block-paragraph {
  font-size: 15px;
  color: var(--color-text);
  margin-top: 20px;
}

.home-contents-heading h2.wp-block-heading { margin: 0; }

/* お知らせ帯（旧: 茶色帯 #7c6d6d を上書き） */
#home-information.is-style-group-home-information {
  background: var(--color-bg-warm);
  color: var(--color-text);
  padding-top: clamp(40px, 5vw, 56px) !important;
  padding-bottom: clamp(40px, 5vw, 56px) !important;
  border-bottom: 1px solid var(--color-line);
}

#home-information.is-style-group-home-information a { color: var(--color-text); }
#home-information.is-style-group-home-information a:hover { color: var(--color-accent); }

#home-information > .wp-block-group { max-width: var(--content-max); margin: 0 auto; }

#home-information h2.wp-block-heading {
  font-size: 20px;
  letter-spacing: var(--ls-label);
}

#home-information .wp-block-post-template { border-top: none; }
#home-information .wp-block-post-template li.wp-block-post { border-bottom: none; padding: 0; }

/* Welcome */
#home-welcome.bg-texture { background: none; }

#home-welcome .home-welcome-inner { max-width: 840px; margin: 0 auto; }

#home-welcome h2.wp-block-heading { margin-bottom: 32px; }

#home-welcome p.has-text-align-center {
  font-size: 15px;
  line-height: 2.4;
}

/* ニュース一覧（お知らせ/ニュース&トピックス 共通） */
.wp-block-post-template { border-top: 1px solid var(--color-line); }

.wp-block-post-template li.wp-block-post {
  border-bottom: 1px solid var(--color-line);
  display: flex;
  align-items: baseline;
  gap: 28px;
  padding: 18px 8px;
  margin: 0;
}

.wp-block-post-date time {
  font-family: var(--font-serif-en);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--color-accent-light);
  white-space: nowrap;
}

.wp-block-post-template h2.wp-block-post-title {
  font-size: 15px !important;
  font-weight: 400;
  letter-spacing: var(--ls-body);
  line-height: 1.8;
  margin: 0;
}

.wp-block-post-title a { text-decoration: none !important; }
.wp-block-post-title a:hover { color: var(--color-accent); }

@media screen and (max-width: 600px) {
  .wp-block-post-template li.wp-block-post { flex-direction: column; gap: 4px; }
}

/* ニュース&トピックス */
#home-news .home-news-inner { max-width: var(--content-max); margin: 0 auto; }
#home-news h2.wp-block-heading { margin-bottom: 40px; }
#home-news .wp-block-buttons { margin-top: 40px; }

/* アクセス */
#home-access { text-align: center; }
#home-access > * { max-width: var(--content-max); margin-left: auto; margin-right: auto; }
#home-access h2.wp-block-heading { margin-bottom: 24px; }
#home-access p { font-size: 14px; color: var(--color-accent); }

#home-access .gmap { margin: 40px auto; }
#home-access .gmap iframe {
  width: 100%;
  height: clamp(320px, 42vw, 480px);
  display: block;
  border: 1px solid var(--color-line) !important;
}

/* ==========================================================================
   写真ギャラリー（ふふ日光を参考にした非対称レイアウト）
   共通: .mo-gallery。パターンで並びを変える
     - .mo-gallery--split-left  : 大画像(左) ＋ 縦2枚(右)
     - .mo-gallery--split-right : 縦2枚(左) ＋ 大画像(右)
     - .mo-gallery--grid        : 3×2の6枚モザイク
   ========================================================================== */
.mo-gallery {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  gap: clamp(14px, 1.6vw, 24px);
}

.mo-item {
  margin: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.mo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease);
}

.mo-item:hover img { transform: scale(1.04); }

.mo-item figcaption {
  padding: 10px 2px 0;
  text-align: left;
}

/* --- split（大＋縦2枚） --- */
.mo-gallery--split-left  { grid-template-columns: 1.85fr 1fr; align-items: stretch; }
.mo-gallery--split-right { grid-template-columns: 1fr 1.85fr; align-items: stretch; }

.mo-item--main img { min-height: 440px; }

.mo-col {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: clamp(14px, 1.6vw, 24px);
}

.mo-col .mo-item { display: flex; }

/* split-right は大画像を右側へ */
.mo-gallery--split-right .mo-item--main { order: 2; }
.mo-gallery--split-right .mo-col        { order: 1; }

/* 平面図など図版は切り抜かず全体表示 */
.mo-item--plan { background: var(--color-bg-warm); }
.mo-item--plan img { object-fit: contain; }

/* --- single / pair / grid2 / grid（枚数に応じて自動選択） --- */
.mo-gallery--single { grid-template-columns: 1fr; }
.mo-gallery--single .mo-item img { aspect-ratio: 16 / 9; }

.mo-gallery--pair { grid-template-columns: 1fr 1fr; }
.mo-gallery--pair .mo-item img { aspect-ratio: 4 / 3; }

.mo-gallery--grid2 { grid-template-columns: 1fr 1fr; }
.mo-gallery--grid2 .mo-item img { aspect-ratio: 4 / 3; }

.mo-gallery--grid { grid-template-columns: repeat(3, 1fr); }
.mo-gallery--grid .mo-item img { aspect-ratio: 4 / 3; }

/* --- リビール（子要素を時間差で） --- */
.mo-gallery.is-in .mo-item { opacity: 1; transform: none; }
.mo-gallery.is-in .mo-item:nth-child(1) { transition-delay: 0s; }
.mo-gallery.is-in .mo-item:nth-child(2) { transition-delay: 0.12s; }
.mo-gallery.is-in .mo-item:nth-child(3) { transition-delay: 0.24s; }
.mo-gallery.is-in .mo-item:nth-child(4) { transition-delay: 0.36s; }
.mo-gallery.is-in .mo-item:nth-child(5) { transition-delay: 0.48s; }
.mo-gallery.is-in .mo-item:nth-child(6) { transition-delay: 0.6s; }
.mo-gallery.is-in .mo-col .mo-item:nth-child(2) { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .mo-item { opacity: 1; transform: none; transition: none; }
}

@media screen and (max-width: 768px) {
  .mo-gallery--split-left,
  .mo-gallery--split-right { grid-template-columns: 1fr; }
  .mo-gallery--split-right .mo-item--main { order: 0; }
  .mo-gallery--split-right .mo-col        { order: 0; }
  .mo-item--main img { min-height: 0; aspect-ratio: 3 / 2; }
  .mo-col { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .mo-col .mo-item img { aspect-ratio: 3 / 2; }
  .mo-gallery--grid,
  .mo-gallery--grid2,
  .mo-gallery--pair { grid-template-columns: 1fr 1fr; }
  .mo-gallery--single .mo-item img { aspect-ratio: 3 / 2; }
}

/* 動画セクション */
#home-movie .movie-frame {
  max-width: var(--content-max);
  margin: 0 auto;
  border: 1px solid var(--color-line);
}

#home-movie .movie-frame video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* スライダー（slick / 下層ページで継続使用） */
.wp-block-oh-wpml-blocks-oh-wpml-slider { max-width: var(--content-max); margin: 0 auto; }

.slick figure { margin: 0; }

.slick figcaption {
  text-align: right;
  padding: 10px 4px 0;
}

/* インジケーター: 細い横線型（旧CSSの absolute配置・赤帯を打ち消す） */
.slick-dots,
.slick-gallery-autoplay-lazyload .slick-slider .slick-dots {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 10px;
  list-style: none;
  padding: 24px 0 0;
  margin: 0;
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
}

.slick-dots > li,
.slick-gallery-autoplay-lazyload ul.slick-dots > li {
  width: auto !important;
  max-width: none !important;
  height: auto;
  margin: 0;
  flex: none;
}

/* 旧CSSの li::after（赤ボーダーのアクティブ表現）を無効化 */
.slick-dots > li::after { display: none !important; }

.slick-dots li button,
.slick-dots > li button,
.slick-dots > li.slick-active button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 24px;
  height: 2px;
  padding: 8px 0;
  background: transparent !important;
  border: none;
  cursor: pointer;
  position: relative;
}

.slick-dots li button::before { display: none; }

.slick-dots li button::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: var(--color-accent-light);
  opacity: 0.45;
  transition: opacity var(--transition), background-color var(--transition);
}

.slick-dots li.slick-active button,
.slick-dots > li.slick-active button { width: 48px; }
.slick-dots li.slick-active button::after { opacity: 1; background: var(--color-accent); height: 2px; }

/* スライダーは中央constrainedに（はみ出す隣接スライドを隠す） */
.wp-block-oh-wpml-blocks-oh-wpml-slider .slick-list { overflow: hidden; }

/* slick矢印は非表示（静謐さ優先・ドット操作は残す） */
.slick-prev, .slick-next { display: none !important; }

/* --------------------------------------------------------------------------
   8. 下層ページ
   -------------------------------------------------------------------------- */
.breadcrumbs {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 18px 24px 0;
}

.breadcrumbs ol {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--color-accent-light);
}

.breadcrumbs li:not(:first-child)::before { content: "\203A"; margin-right: 8px; opacity: 0.6; }
.breadcrumbs a { color: var(--color-accent-light); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-accent); }

/* ページタイトル（h1）＝小型ヒーロー: 英字ラベルはrenewal.jsが挿入 */
.main-page h1.wp-block-heading {
  text-align: center;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 500;
  letter-spacing: var(--ls-head);
  margin: clamp(48px, 7vw, 80px) 0 16px;
}

.page-eng-label {
  display: block;
  text-align: center;
  margin: clamp(40px, 6vw, 64px) 0 0;
}

.page-eng-label + .wp-block-group h1.wp-block-heading,
.page-eng-label ~ * h1.wp-block-heading { margin-top: 12px; }

.main-page { padding-bottom: var(--section-pad-y); }

.main-page h2.wp-block-heading {
  margin-top: clamp(56px, 8vw, 96px);
  margin-bottom: 24px;
  position: relative;
  padding-bottom: 18px;
}

.main-page h2.wp-block-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 1px;
  background: var(--color-accent-light);
}

.main-page h2.wp-block-heading.has-text-align-center::after {
  left: 50%;
  transform: translateX(-50%);
}

.main-page figure { margin-left: 0; margin-right: 0; }

/* コンテンツ幅をデザインに統一（旧 width:90%/max-width:960px を置換） */
.main-page.main-page {
  width: 100%;
  max-width: 1088px;
  margin: 0 auto;
  padding: 0 24px var(--section-pad-y);
  box-sizing: border-box;
}

/* ページ導入（h1直下のリード文） */
.main-page > .wp-block-group:first-of-type > p.wp-block-paragraph,
.page-eng-label + .wp-block-group > p.wp-block-paragraph {
  font-size: 15px;
  line-height: 2.2;
  color: var(--color-accent);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* 画像（wp-block-image） */
.main-page .wp-block-image { margin: 0; }
.main-page .wp-block-image img { width: 100%; height: auto; display: block; }

/* カラム内のカード画像は縦横比を統一 */
.main-page .wp-block-columns { gap: clamp(16px, 2vw, 32px); margin-bottom: 0; }
.main-page .wp-block-columns .wp-block-image img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* カラム内の見出し（カードタイトル）は大余白・下線を解除 */
.main-page .wp-block-columns h2.wp-block-heading,
.main-page .wp-block-columns h3.wp-block-heading {
  margin-top: 18px;
  margin-bottom: 8px;
  padding-bottom: 0;
  font-size: clamp(17px, 2vw, 20px);
}
.main-page .wp-block-columns h2.wp-block-heading::after,
.main-page .wp-block-columns h3.wp-block-heading::after { display: none; }
.main-page .wp-block-columns h2.wp-block-heading a { text-decoration: none; }
.main-page .wp-block-columns h2.wp-block-heading a:hover { color: var(--color-accent); }
.main-page .wp-block-columns p.wp-block-paragraph {
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text);
  margin-top: 6px;
}

/* メディア＋テキスト（周辺観光など） */
.main-page .wp-block-media-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  margin: 8px 0;
}
.main-page .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { order: 1; }
.main-page .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { order: 2; }
.main-page .wp-block-media-text__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.main-page .wp-block-media-text h3.wp-block-heading {
  margin-top: 0;
  margin-bottom: 12px;
  padding-bottom: 12px;
}
.main-page .wp-block-media-text p.wp-block-paragraph { font-size: 14px; line-height: 1.95; }

@media screen and (max-width: 768px) {
  .main-page .wp-block-media-text { grid-template-columns: 1fr; }
  .main-page .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { order: 0; }
  .main-page .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { order: 0; }
}

/* テーブル類（温泉利用時間・料金・FAQ等） */
.main-page table {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0;
  font-size: 14px;
}
.main-page table td, .main-page table th {
  border: 1px solid var(--color-line);
  padding: 12px 16px;
  line-height: 1.8;
  vertical-align: top;
  text-align: left;
}
.main-page table th {
  background: var(--color-bg-warm);
  font-weight: 500;
}

/* マッサージ料金表: 上下の表で3列の幅を共通化 */
.main-page figure.wp-block-table.massage-menu {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

.main-page figure.wp-block-table.massage-menu table {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.main-page figure.wp-block-table.massage-menu td:nth-child(1),
.main-page figure.wp-block-table.massage-menu th:nth-child(1) {
  width: 15%;
}

.main-page figure.wp-block-table.massage-menu td:nth-child(2),
.main-page figure.wp-block-table.massage-menu th:nth-child(2) {
  width: 29%;
}

.main-page figure.wp-block-table.massage-menu td:nth-child(3),
.main-page figure.wp-block-table.massage-menu th:nth-child(3) {
  width: 56%;
}

/* 入浴時間表: 浴場×男女の3列グリッド（温泉ページ） */
.main-page figure.wp-block-table.bath-hour {
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  overflow-x: auto;
}
.main-page figure.wp-block-table.bath-hour table { display: table; width: 100%; table-layout: fixed; }
.main-page figure.wp-block-table.bath-hour th,
.main-page figure.wp-block-table.bath-hour td { text-align: center; }
.main-page figure.wp-block-table.bath-hour th:nth-child(1) { width: 28%; }

/* SP専用の改行（PCでは無効・「、」位置での折返し制御用） */
.sp-br { display: none; }
@media screen and (max-width: 768px) { .sp-br { display: inline; } }

/* お飲み物などの小見出し（左罫線付き） */
.main-page h3.drink-sub,
.main-page h4.drink-sub {
  font-size: 16px;
  font-weight: 500;
  margin: 24px 0 6px;
  padding-left: 12px;
  border-left: 2px solid var(--color-accent);
  line-height: 1.5;
}
.main-page h3.drink-sub:first-child,
.main-page h4.drink-sub:first-child { margin-top: 0; }
.main-page h3.drink-sub + p.wp-block-paragraph,
.main-page h4.drink-sub + p.wp-block-paragraph { margin-top: 2px; }

/* 特徴ページ: 各項目の「詳細はこちら」動線 */
.main-page p.feature-more { margin-top: 12px; }
.main-page p.feature-more a {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  text-decoration: none;
}
.main-page p.feature-more a::after {
  content: "\203A"; /* › */
  font-family: var(--font-serif-en);
  margin-left: 8px;
  font-size: 16px;
  transition: transform var(--transition);
}
.main-page p.feature-more a:hover { color: var(--color-text); }
.main-page p.feature-more a:hover::after { transform: translateX(3px); }

/* 客室ページ: スペックを「客室情報」パネルにして本文との区切りを明確化 */
.main-page .wp-block-column.room-spec {
  background: var(--color-bg-warm);
  padding: 28px 32px;
  align-self: start;
}
.main-page .room-spec-title {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-text);
}
.main-page .wp-block-column.room-spec p.wp-block-paragraph {
  font-size: 14px;
  line-height: 2.1;
  color: var(--color-accent);
  margin: 0;
}
@media screen and (max-width: 768px) {
  .main-page .wp-block-column.room-spec { padding: 22px 22px; margin-top: 4px; }
}

/* リード文の強調 */
.main-page p.wp-block-paragraph strong { font-weight: 500; }

/* 通常リスト（別注料理・特典条件など） */
.main-page .wp-block-list:not(.is-style-list-buttons) {
  max-width: 640px;
  margin: 12px auto;
  padding-left: 1.2em;
  font-size: 14px;
  line-height: 2;
}
.main-page .wp-block-list:not(.is-style-list-buttons) li { margin: 4px 0; }
.main-page .wp-block-list:not(.is-style-list-buttons) strong { font-weight: 500; }

/* 地図 */
.main-page .gmap { margin: 24px auto; }
.main-page .gmap iframe {
  width: 100%;
  height: clamp(320px, 42vw, 480px);
  display: block;
  border: 1px solid var(--color-line) !important;
}

/* アンカーボタンリスト（アクセスのページ内ナビ等） */
.main-page .wp-block-list.is-style-list-buttons {
  list-style: none;
  padding: 0;
  margin: 8px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.main-page .wp-block-list.is-style-list-buttons > li { margin: 0; }
.main-page .wp-block-list.is-style-list-buttons a {
  display: inline-block;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  padding: 12px 34px;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.1em;
  transition: background-color var(--transition), color var(--transition);
}
.main-page .wp-block-list.is-style-list-buttons a:hover {
  background: var(--color-accent);
  color: var(--color-on-dark);
}

/* 区切り線 */
.main-page .wp-block-separator {
  border: none;
  border-top: 1px solid var(--color-line);
  background: none;
  width: 100%;
  max-width: 100%;
  opacity: 1;
}

/* FAQ アコーディオン */
.main-page .wp-block-details {
  border: none; /* 罫線を廃止し、余白で区切る */
  padding: 0;
  margin: 0 0 28px;
}
.main-page .wp-block-details:last-of-type { border: none; margin-bottom: 0; }
.main-page .wp-block-details > summary {
  cursor: pointer;
  padding: 0 0 12px 0;
  font-size: 16px;
  letter-spacing: 0.04em;
  list-style: none;
  position: relative;
}
.main-page .wp-block-details > summary::-webkit-details-marker { display: none; }
.main-page .wp-block-details > summary::after { content: none; display: none; } /* ＋/− マーカーを廃止 */
.main-page .wp-block-details > :not(summary) {
  padding: 0;
  color: var(--color-accent);
  font-size: 14px;
  line-height: 1.95;
  margin: 0;
}
.main-page .wp-block-details table { margin-bottom: 22px; }

/* お問い合わせフォーム（Contact Form 7） */
.main-page .wpcf7-form { max-width: 580px; margin: 0 auto; text-align: left; }
.main-page .wpcf7-form > p { margin: 0 0 22px; }
.main-page .wpcf7-form label { font-size: 14px; letter-spacing: 0.06em; line-height: 2; }
.main-page .wpcf7-form .required { color: var(--color-accent); font-size: 11px; margin-left: 6px; letter-spacing: 0.08em; }
.main-page .wpcf7-form input[type="text"],
.main-page .wpcf7-form input[type="email"],
.main-page .wpcf7-form input[type="tel"],
.main-page .wpcf7-form input[type="date"],
.main-page .wpcf7-form input[type="number"],
.main-page .wpcf7-form select,
.main-page .wpcf7-form textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--color-line);
  background: transparent;
  padding: 10px 2px;
  margin-top: 6px;
  font-family: var(--font-serif-jp);
  font-size: 16px; /* 16px未満だとiOSでフォーカス時に自動ズームされる */
  color: var(--color-text);
  transition: border-color var(--transition);
}
.main-page .wpcf7-form input:focus,
.main-page .wpcf7-form select:focus,
.main-page .wpcf7-form textarea:focus {
  outline: none;
  border-bottom-color: var(--color-accent);
}
.main-page .wpcf7-form textarea { min-height: 140px; resize: vertical; }
.main-page .wpcf7-form .wpcf7-radio .wpcf7-list-item { margin: 0 20px 0 0; }
.main-page .wpcf7-form .wpcf7-radio input { margin-right: 6px; }
.main-page .wpcf7-form .wpcf7-submit {
  display: block;
  margin: 12px auto 0;
  background: var(--color-dark);
  color: var(--color-on-dark);
  border: 1px solid var(--color-dark);
  padding: 16px 56px;
  font-family: var(--font-serif-jp);
  font-size: 15px;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: opacity var(--transition);
}
.main-page .wpcf7-form .wpcf7-submit:hover { opacity: 0.85; }

/* --------------------------------------------------------------------------
   9. モーダル（メニュー / 言語）
   -------------------------------------------------------------------------- */
.modal { background: rgba(26, 24, 22, 0.96); }

.modal .modal-board { max-width: 760px; }

/* MENUラベルのみ（望雲タイトルは廃止） */
#modal-menu .modal-board::before {
  content: "MENU";
  display: block;
  font-family: var(--font-serif-en);
  font-size: 12px;
  letter-spacing: var(--ls-label);
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  margin-bottom: 28px;
}

#modal-menu .modal-board { display: block; }

/* 英字ラベルは廃止 */
.modal-nav .menu-eng { display: none; }

.modal-nav .menu-list {
  font-family: var(--font-serif-jp);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: var(--ls-head);
  margin-top: 0;
}

/* 2列グリッド・下線なし・各項目は中央寄せ */
#modal-menu .modal-nav .menu-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  row-gap: 4px;
  border-top: none;
}

.modal-nav .menu-list > li {
  border: none !important;
}

.modal-nav .menu-list > li > a {
  padding: 16px 4px;
  display: block;
  text-align: center;
  line-height: 1.5;
}

.modal-nav .menu-list > li > a:hover { text-decoration: none; color: rgba(255, 255, 255, 0.7); }

@media screen and (max-width: 640px) {
  #modal-menu .modal-nav .menu-list { grid-template-columns: 1fr; row-gap: 0; }
  .modal-nav .menu-list > li > a { padding: 17px 4px; }
}

/* 言語モーダル */
#modal-language h2.wp-block-heading {
  color: #fff;
  font-family: var(--font-serif-en);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: var(--ls-label);
}

.wpml-ls-legacy-list-vertical ul { border-top: 1px solid rgba(255, 255, 255, 0.18); }

.wpml-ls-legacy-list-vertical li { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }

.wpml-ls-legacy-list-vertical a {
  padding: 16px 4px;
  letter-spacing: 0.1em;
}

.modal-control-button { opacity: 0.8; }
.modal-control-button:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   10. 固定UI（FAQ・チャット）renewal.jsが挿入
   言語切替はヘッダーのLANGUAGEボタン＋フッターの言語リストに格納
   -------------------------------------------------------------------------- */
.footer-lang {
  display: flex;
  justify-content: center;
  align-items: baseline; /* 多言語(タイ語等)の縦位置ずれを防ぐためベースライン揃え */
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}
/* フッターナビ(AIコンシェルジュ等)と言語セレクターの間隔を確保
   （boun.css の `.footer .footer-nav ul{margin:0 auto}` を上回る詳細度で上マージンのみ付与） */
.footer .footer-nav ul.footer-lang { margin-top: 32px; }

.footer-lang li { display: flex; align-items: baseline; }

.footer-lang li:not(:first-child)::before {
  content: "";
  align-self: center; /* 区切り線は行の中央に */
  width: 1px;
  height: 11px;
  background: var(--color-line);
  margin: 0 16px;
}

.footer-lang a {
  font-family: var(--font-serif-en);
  font-size: 12px;
  line-height: 1; /* スクリプト間で行高を統一しベースラインを揃える */
  letter-spacing: 0.14em;
  color: var(--color-accent-light);
  text-decoration: none;
}

.footer-lang a:hover,
.footer-lang a.is-current { color: var(--color-text); }

/* フッターブランド「望雲」ふりがな（ぼううん） */
.wp-block-heading ruby { ruby-position: over; -webkit-ruby-position: before; }
.wp-block-heading ruby rt {
  font-family: var(--font-serif-jp);
  font-size: 0.32em;
  letter-spacing: 0.2em;
  font-weight: 400;
  color: var(--color-accent-light);
  line-height: 1.6;
}

.fixed-corner {
  position: fixed;
  right: 20px;
  bottom: 88px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fixed-corner a {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--color-line);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  text-decoration: none;
  color: var(--color-accent);
  transition: background-color var(--transition), color var(--transition);
}

.fixed-corner a:hover { background: var(--color-accent); color: #fff; }

.fixed-corner .fc-eng {
  font-family: var(--font-serif-en);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.fixed-corner .fc-jp { font-size: 9px; letter-spacing: 0.05em; }

@media screen and (max-width: 768px) {
  .fixed-corner { bottom: 76px; right: 12px; }
  .fixed-corner a { width: 44px; height: 44px; }
}

/* 既存のページトップボタン */
.return-button a {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--color-line);
  color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   11. フッター
   -------------------------------------------------------------------------- */
.footer {
  background: var(--color-bg-cream);
  color: var(--color-text);
  border-top: 1px solid var(--color-line);
}

.footer a { color: var(--color-text); }

.footer .footer-inner { max-width: var(--content-max); }

/* フッターのロゴ（望雲）は書体を変えず既存の表現を維持 */
.footer h2.wp-block-heading {
  font-size: 36px;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.footer .footer-widgets p.wp-block-paragraph { font-size: 13px; color: var(--color-accent); }
.footer .footer-widgets p.wp-block-paragraph strong { font-weight: 500; letter-spacing: 0.24em; }

.footer .wp-block-social-links .wp-social-link,
.footer :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-instagram {
  background: transparent !important;
  color: var(--color-accent) !important;
  border: 1px solid var(--color-line);
  border-radius: 50%;
}

/* 予約・特典・アクセスのボタン列 → アウトライン化 */
.footer .footer-nav ul.menu-buttons > li a {
  display: block;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  background: transparent;
  font-size: 13px;
  letter-spacing: 0.12em;
  padding: 14px 8px;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}

.footer .footer-nav ul.menu-buttons > li a:hover {
  background: var(--color-accent);
  color: #fff;
  opacity: 1;
}

.footer .footer-nav ul.menu-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  font-weight: 400;
}

.footer .footer-nav ul.menu-list > li { display: flex; align-items: center; }

.footer .footer-nav ul.menu-list > li:not(:first-child)::before {
  content: "";
  width: 1px;
  height: 12px;
  background: var(--color-line);
  margin: 0 18px;
}

.footer .footer-nav ul.menu-list a { text-decoration: none; }
.footer .footer-nav ul.menu-list a:hover { color: var(--color-accent); }

.footer .footer-copyright {
  font-family: var(--font-serif-en);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--color-accent-light);
  text-align: center;
}

/* --------------------------------------------------------------------------
   12. モバイル固定メニュー
   -------------------------------------------------------------------------- */
.footer .mobile-fixed-menu {
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--color-line);
}

.footer .mobile-fixed-menu .menu-list {
  font-family: var(--font-serif-jp);
  border-top: none;
}

.footer .mobile-fixed-menu a { color: var(--color-text); text-decoration: none; }

.footer .mobile-fixed-menu .menu-list > li.reservation a {
  background: var(--color-dark);
  color: var(--color-on-dark);
  letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   13. スクロール・リビール
   -------------------------------------------------------------------------- */
.rv {
  /* JSやアンカー移動のタイミングに左右されず、内容は常に読める状態を保つ */
  opacity: 1;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.rv.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .hero-overlay .hero-scroll::after { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* --------------------------------------------------------------------------
   14. モバイル最適化（ふふ日光のスマホレイアウトを参考）
   視認性: 本文16px＋行間2 / 導線: 全幅ボタン＋下部固定バー / 余白の整理
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {

  /* --- タイポグラフィ: 本文を1段大きく、読みやすく --- */
  body { font-size: 16px; }

  .wp-blocks p,
  .contents p,
  .home-contents-heading p.wp-block-paragraph,
  #home-welcome p.has-text-align-center {
    font-size: 16px;
    line-height: 2.05;
  }

  .wp-blocks h2.wp-block-heading { font-size: 24px; }
  .wp-blocks h3.wp-block-heading { font-size: 19px; }
  .main-page h1.wp-block-heading { font-size: 26px; margin-top: 40px; }
  .page-eng-label { margin-top: 32px; }
  .home-contents-heading-eng, .eng-label, .page-eng-label { font-size: 12px; }
  figcaption, .mo-item figcaption { font-size: 12px; padding-top: 8px; }

  /* 長文リードの強制改行を解除して自然に折り返す */
  #home-welcome p.has-text-align-center br,
  .home-contents-heading p.wp-block-paragraph br { display: none; }

  /* --- ヘッダー: ロゴ＋アイコンのみのすっきり構成 --- */
  .header-inner { padding: 0 16px; }
  .header-logo a { width: 150px !important; height: 56px !important; background-size: auto 46px !important; }
  /* 宿泊予約は下部固定バーに集約（ヘッダーでは非表示） */
  .header-widgets { display: none; }
  .header-buttons-list a { min-width: 44px; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; }

  /* --- ヒーロー: 額装風フレーム＋高さ最適化（横写真の過剰クロップを回避） --- */
  body.home .hero-slider,
  .hero-slider {
    height: calc(100svh - 61px - 58px - env(safe-area-inset-bottom));
    min-height: 500px;
    margin: 0 14px;
  }

  .hero-overlay .hero-logo { font-size: 52px; }
  .hero-overlay .hero-eng { font-size: 11px; letter-spacing: 0.26em; }
  .hero-overlay .hero-sub { font-size: 12px; letter-spacing: 0.28em; text-indent: 0.28em; }
  .hero-overlay .hero-scroll { bottom: 44px; padding-bottom: 36px; }
  .hero-overlay .hero-scroll::after { height: 30px; }

  .hero-indicators { bottom: 18px; gap: 10px; }
  .hero-indicators button { width: 20px; padding: 12px 0; } /* タップ領域44px相当 */
  .hero-indicators li.is-active button { width: 40px; }

  /* --- セクション余白と水平パディング --- */
  body.home .content.wp-blocks > .wp-block-group { padding-left: 20px; padding-right: 20px; }
  .home-contents-head { margin-bottom: 32px; }
  .home-contents-head.wp-block-columns {
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 24px !important;
    row-gap: 24px !important;
  }
  body.home .content.wp-blocks > .wp-block-group[id] { scroll-margin-top: 68px; }

  /* --- ボタン: ほぼ全幅・中央寄せ（ふふ流） --- */
  .wp-block-buttons { width: 100%; }
  .wp-block-button { width: 100%; }
  .wp-block-button.is-style-outline .wp-block-button__link,
  .wp-block-button[class*="is-style-outline--"] .wp-block-button__link {
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    text-align: center;
    padding: 18px 48px 18px 40px;
    font-size: 15px;
  }
  .home-contents-buttons { padding: 0; }

  /* --- ギャラリー: 余白を締めてリズム良く --- */
  .mo-gallery { gap: 12px; }
  .mo-col { gap: 12px; }

  /* 1枚目はフル幅で大きく見せ、以降は2列（ふふ流のリズム） */
  .mo-gallery--grid .mo-item:first-child,
  .mo-gallery--grid2 .mo-item:first-child,
  .mo-gallery--pair .mo-item:first-child {
    grid-column: 1 / -1;
  }
  .mo-gallery--grid .mo-item:first-child img,
  .mo-gallery--grid2 .mo-item:first-child img,
  .mo-gallery--pair .mo-item:first-child img {
    aspect-ratio: 3 / 2;
  }

  /* 偶数枚のとき最後の1枚が孤立するのを防ぎ、「大→2列→大」のリズムに */
  .mo-gallery--grid .mo-item:last-child:nth-child(even),
  .mo-gallery--grid2 .mo-item:last-child:nth-child(even) {
    grid-column: 1 / -1;
  }
  .mo-gallery--grid .mo-item:last-child:nth-child(even) img,
  .mo-gallery--grid2 .mo-item:last-child:nth-child(even) img {
    aspect-ratio: 3 / 2;
  }

  /* --- 動画セクション: 全幅で没入感を --- */
  #home-movie .movie-frame {
    margin-left: -20px;
    margin-right: -20px;
    border-left: none;
    border-right: none;
  }

  /* --- 下部固定バー: 主要導線を親指ゾーンに --- */
  .footer .mobile-fixed-menu {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.07);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .footer .mobile-fixed-menu .menu-list { font-size: 13px; letter-spacing: 0.04em; }
  .footer .mobile-fixed-menu .menu-list > li a { height: 58px; display: flex; align-items: center; justify-content: center; }
  .footer .mobile-fixed-menu .menu-list > li.reservation { width: 116px; }
  .footer .mobile-fixed-menu .menu-list > li.reservation a { font-size: 14px; letter-spacing: 0.08em; }
  .footer { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  /* FAQ/Chatの固定ボタンは下部バーの上に */
  .fixed-corner { bottom: calc(70px + env(safe-area-inset-bottom)); right: 8px; gap: 7px; }
  .fixed-corner a { width: 40px; height: 40px; }
  .return-button { display: none; } /* ページトップはモバイルでは冗長 */

  /* --- フッター: ボタンは縦積み全幅・リンクは2列グリッドで整列 --- */
  .footer .footer-inner { padding: 56px 20px; gap: 32px; }
  .footer .footer-nav { gap: 0; }
  .footer .footer-nav ul.menu-buttons { flex-direction: column; gap: 10px; margin-bottom: 24px; }
  .footer .footer-nav ul.menu-buttons > li a { padding: 16px 8px; font-size: 14px; }

  /* PCの「｜区切り横並び」をやめ、1列フル幅・ヘアライン区切りの明快なリストに */
  .footer .footer-nav ul.menu-list {
    display: block;
    font-size: 15px;
    line-height: 1.6;
    width: 100%;
    margin: 0;
  }
  .footer .footer-nav ul.menu-list > li {
    display: block;
    width: 100% !important;
    max-width: none !important;
  }
  .footer .footer-nav ul.menu-list > li::before { display: none !important; }
  .footer .footer-nav ul.menu-list > li a {
    display: block;
    padding: 16px 4px;
    border-bottom: 1px solid var(--color-line);
    letter-spacing: 0.06em;
    position: relative;
  }
  /* 右端に › を添えてタップ可能と分かるように */
  .footer .footer-nav ul.menu-list > li a::after {
    content: "\203A";
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-52%);
    color: var(--color-accent-light);
    font-family: var(--font-serif-en);
  }
  .footer .footer-nav ul.menu-list.menu-list-primary { border-top: 1px solid var(--color-line); }
  /* primaryとsecondaryの境界二重線を回避＋文字サイズを統一（旧1.3remを上書き） */
  .footer .footer-nav ul.menu-list.menu-list-secondary {
    border-top: none;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 0;
  }

  .footer h2.wp-block-heading { font-size: 30px; }
  .footer .footer-nav ul.footer-lang { margin-top: 32px; }
  .footer-lang { flex-wrap: wrap; }

  /* --- 下層ページ --- */
  .main-page.main-page { padding-left: 20px; padding-right: 20px; }
  .breadcrumbs { padding: 12px 20px 0; }
  .main-page h2.wp-block-heading { margin-top: 48px; }

  /* テーブルは横スクロールで崩れ防止 */
  .main-page table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .main-page table td, .main-page table th { padding: 10px 12px; font-size: 13px; }

  /* 料金表は共通の列比率を保ったまま画面内に収める */
  .main-page figure.wp-block-table.massage-menu table { display: table; }

  /* アンカーボタン（アクセス）: 3ボタンを等幅・等高で横1行に */
  .main-page .wp-block-list.is-style-list-buttons { flex-direction: row; flex-wrap: nowrap; gap: 8px; align-items: stretch; }
  .main-page .wp-block-list.is-style-list-buttons > li { flex: 1 1 0; min-width: 0; display: flex; }
  .main-page .wp-block-list.is-style-list-buttons a { display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; padding: 12px 4px; font-size: 12px; letter-spacing: 0.02em; line-height: 1.4; }

  /* FAQ: タップ領域と行間（マーカー廃止のため右余白なし） */
  .main-page .wp-block-details > summary { padding: 0 0 12px 0; font-size: 15px; line-height: 1.8; }

  /* フォーム: 幅いっぱい＋送信ボタン全幅 */
  .main-page .wpcf7-form { max-width: none; }
  .main-page .wpcf7-form .wpcf7-submit { width: 100%; padding: 18px 8px; }

  /* カラムカード: 画像下の見出しを詰める */
  .main-page .wp-block-columns { gap: 28px; }

  /* モーダルメニュー: 余白とタップ領域 */
  .modal .modal-board { width: 88%; margin: 72px auto; }
  .modal-nav .menu-list > li > a { padding: 16px 4px; }
  .modal-control-button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* さらに小さい端末（〜380px）: ロゴと見出しを微調整 */
@media screen and (max-width: 380px) {
  .header-logo a { width: 136px !important; background-size: auto 42px !important; }
  .wp-blocks h2.wp-block-heading { font-size: 22px; }
  .hero-overlay .hero-logo { font-size: 46px; }
}

/* --------------------------------------------------------------------------
   15. ライトボックス（ギャラリー画像のタップ拡大 / renewal.jsが生成）
   -------------------------------------------------------------------------- */
.mo-item img { cursor: zoom-in; }

.lb {
  position: fixed;
  inset: 0;
  z-index: 2000; /* 下部固定バー等より前面 */
  background: rgba(22, 20, 18, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb[hidden] { display: none; }

.lb figure {
  margin: 0;
  max-width: 92vw;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.lb figure img {
  max-width: 92vw;
  max-height: 76vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.5);
}

.lb figcaption {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-align: center;
  min-height: 1em;
}

.lb button {
  position: absolute;
  z-index: 2; /* 画像より前面に */
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  font-family: var(--font-serif-en);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  transition: color var(--transition);
}

.lb .lb-count { z-index: 2; }

.lb button:hover { color: #fff; }

.lb .lb-close {
  top: max(10px, env(safe-area-inset-top));
  right: 10px;
  font-size: 30px;
  line-height: 1;
}

.lb .lb-prev, .lb .lb-next {
  top: 50%;
  transform: translateY(-50%);
  font-size: 40px;
  line-height: 1;
}

.lb .lb-prev { left: 4px; }
.lb .lb-next { right: 4px; }

.lb .lb-count {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(14px, env(safe-area-inset-bottom));
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-serif-en);
  font-size: 12px;
  letter-spacing: 0.2em;
}

body.lb-open { overflow: hidden; }

@media screen and (max-width: 768px) {
  .lb figure img { max-width: 94vw; max-height: 70vh; }
  .lb .lb-prev, .lb .lb-next { font-size: 34px; }
}

/* スクリーンリーダー専用（視覚的に非表示・SEO用h1等） */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0;}

/* =========================================================
   追加修正（2026-07-21）
   ========================================================= */

/* ③ 英語ヘッダーのはみ出し対策
      英語はナビ文言（特に "Official website reservation benefits"）が長く、
      ~1120px 以下ではインラインナビが収まらず折り返して崩れる。
      その帯ではインラインナビを畳み、ハンバーガー(MENU)へ委ねる（日本語版と同様の操作）。
      ナビ自体はリンク内で改行させない。 */
/* 日本語以外は各言語のナビ文言が長く、狭い画面ではナビ項目が折り返して崩れるため、
   ~1120px 以下ではインラインナビを畳みハンバーガー(MENU)へ委ねる。ナビ内は改行させない。
   （日本語版はご依頼の基準のため変更しない） */
html:not([lang="ja"]) .header-nav .menu-list > li > a { white-space: nowrap; }
@media screen and (max-width: 1120px) {
  html:not([lang="ja"]) .header-nav { display: none; }
}
/* 予約ボタンの見出し語を単語途中で折り返させない（Reservation 等） */
.header-widgets .wp-block-button.reservation > a { white-space: nowrap; }


/* ① 本文（リード文・説明文・キャプション）→ メディア（ギャラリー／画像／カラム）
      の間の余白を統一。旧テンプレでは margin:0 で接触していたため breathing room を付与。 */
.main-page p.wp-block-paragraph + .mo-gallery,
.main-page p.wp-block-paragraph + .wp-block-image,
.main-page p.wp-block-paragraph + figure.wp-block-image,
.main-page p.wp-block-paragraph + .wp-block-columns {
  margin-top: clamp(28px, 3.5vw, 48px);
}

/* ② モバイル固定CTA：宿泊予約ボタン上部に重なる「ベストレート宣言」吹き出し（アニメなし） */
@media screen and (max-width: 768px) {
  .footer .mobile-fixed-menu .menu-list > li.reservation > a {
    position: relative;
    overflow: visible;
  }
  .footer .mobile-fixed-menu .menu-list > li.reservation > a::before {
    content: "ベストレート宣言";
    position: absolute;
    left: 50%;
    bottom: calc(100% - 11px); /* ボタン上端に約11px重ねる */
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: var(--font-serif-jp, "Noto Serif JP", serif);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #b5485b;
    background: #fff;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid #b5485b;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
    z-index: 2;
    pointer-events: none;
  }
  .footer .mobile-fixed-menu .menu-list > li.reservation > a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% - 15px); /* 尻尾もボタン上に少しかかる */
    transform: translateX(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    background: #fff;
    border-right: 1px solid #b5485b;
    border-bottom: 1px solid #b5485b;
    z-index: 1;
    pointer-events: none;
  }

  /* 吹き出し文言の言語別出し分け */
  html[lang="en-US"] .footer .mobile-fixed-menu .menu-list > li.reservation > a::before { content: "Best Rate"; }
  html[lang="ko-KR"] .footer .mobile-fixed-menu .menu-list > li.reservation > a::before { content: "최저가 보장"; }
  html[lang="th"]    .footer .mobile-fixed-menu .menu-list > li.reservation > a::before { content: "ราคาดีที่สุด"; }
  html[lang="zh-hant"] .footer .mobile-fixed-menu .menu-list > li.reservation > a::before { content: "最優惠價格"; }
  /* 吹き出しが画面左端で見切れないようガード（予約ボタンは左端） */
  .footer .mobile-fixed-menu .menu-list > li.reservation > a::before { max-width: 92vw; }
  /* 英語のみ欧文セリフ体（韓/タイ/繁体は各言語の既定フォントに委ねる） */
  html[lang="en-US"] .footer .mobile-fixed-menu .menu-list > li.reservation > a::before {
    font-family: var(--font-serif-en, "Cormorant Garamond", serif);
    letter-spacing: 0.04em;
  }
}