@charset "utf-8";
/* ============================================================
   Noël official site — shared stylesheet
   静けさ・自然・和モダン。明朝（Noto Serif JP）× EB Garamond。※2026-08-25 可読性向上のためShippori Minchoから変更・本文15→16px
   施設アクセントは body[data-facility] で切替。
   ============================================================ */

:root {
  --c-bg: #fff;
  --c-text: #2a2a2a;
  --c-blk: #151515;
  --c-navy: #002541;
  --c-line: #d9d5cf;
  --c-accent: #002541;
  --c-accent-bg: #f4f6f8;
  --c-gold: #ccab85;
  /* ベストレート表示専用の深い金（2026-09-10）。既存の --c-gold #ccab85 は
     白文字とのコントラストが 2.16:1 しか出ず、注記の日本語が読めないため別に持つ。
     この値は白文字で 4.71:1＝WCAG AA を満たす。 */
  --c-gold-deep: #8f6f20;
  --font-jp: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-en: "EB Garamond", "Noto Serif JP", serif;
  --ls-wide: .16em;
  --ls-body: .05em;
  --header-h: 84px;
  --pad-x: clamp(20px, 5vw, 64px);
}
body[data-facility="gensen"]   { --c-accent:#690016; --c-accent-bg:#f7f0f0; }
body[data-facility="fuji"]     { --c-accent:#002541; --c-accent-bg:#eef3f6; }
body[data-facility="skylight"] { --c-accent:#3c6686; --c-accent-bg:#eef3f6; }
body[data-facility="chimney"]  { --c-accent:#2d2824; --c-accent-bg:#edddd4; }
body[data-facility="notch"]    { --c-accent:#2f392c; --c-accent-bg:#f2f4ef; }
body[data-facility="seiryu"],
body[data-facility="seiryu-2"] { --c-accent:#2887a2; --c-accent-bg:#edf5f7; }
body[data-facility="jardin"]   { --c-accent:#0f3d07; --c-accent-bg:#f5f7ed; }
body[data-facility="forest"]   { --c-accent:#2f392c; --c-accent-bg:#f0f2ee; }
body[data-facility="once"]     { --c-accent:#55504b; --c-accent-bg:#f7f6f2; }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); }
body {
  font-family: var(--font-jp);
  font-weight: 400;
  color: var(--c-text);
  background: var(--c-bg);
  letter-spacing: var(--ls-body);
  line-height: 2;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  min-width: 0;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: opacity .4s ease; }
a:hover { opacity: .7; }
ul, ol { list-style: none; }
iframe { max-width: 100%; border: 0; }

.en-text { font-family: var(--font-en); }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; gap: 24px;
  height: var(--header-h);
  padding: 0 var(--pad-x);
  color: #fff;
  transition: background .5s ease, color .5s ease, box-shadow .5s ease;
}
.site-header.is-solid,
body[data-page="sub"] .site-header {
  background: rgba(255,255,255,.94);
  color: var(--c-blk);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  backdrop-filter: blur(6px);
}
.header-logo {
  font-family: var(--font-en);
  font-size: 22px; letter-spacing: .14em; font-weight: 500;
  line-height: 1.3; white-space: nowrap;
}
.header-logo small { display: block; font-family: var(--font-jp); font-size: 11px; letter-spacing: .3em; opacity: .85; }
.header-logo img { height: 48px; width: auto; }
.header-logo .logo-dark { display: none; }
.site-header.is-solid .logo-white, body[data-page="sub"] .logo-white { display: none; }
.site-header.is-solid .logo-dark, body[data-page="sub"] .logo-dark { display: block; }
body[data-page="sub"] .site-header.is-solid .logo-white { display: none; }
.header-nav { display: flex; gap: 28px; margin-left: auto; align-items: center; }
.header-nav a { font-weight: 500; font-size: 14px; letter-spacing: .12em; }
.header-lang { font-family: var(--font-en); font-size: 14px; letter-spacing: .1em; opacity: .9; }
.btn-reserve {
  display: inline-block;
  font-size: 14px; letter-spacing: .18em;
  padding: 12px 26px;
  border: 1px solid currentColor;
  transition: background .4s ease, color .4s ease, opacity .4s ease;
  text-align: center;
}
.btn-reserve:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; opacity: 1; }
/* 予約ボタンのベストレート表示（2026-09-09 CEO指示）。
   既定は非表示にしておき、ヘッダーが左サイドバーになる 1025px 以上でだけ出す。
   1024px 以下では .site-header .btn-reserve 自体が display:none なので、
   ここで出すと存在しないボタンのラベルだけが宙に浮く。
   ■ 出すページを「同じページに条件（4項目の注記）が載っているところ」に限っている。
     .bestrate-note（トップ・/bestrate）と .bd-note（エリア・施設）のどちらかを持つ75ページ。
     断定表現と打消し表示は同じ画面に無いと、打消しが無いのと同じ扱いになるため。
     /accommodations だけは主要導線なのに注記が無く、いまは対象外にしてある。 */
.btn-br { display: none; }
.site-header .btn-reserve { padding: 10px 22px; }

/* hamburger */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
  position: relative; z-index: 130;
  color: inherit;
}
.nav-toggle span {
  position: absolute; left: 10px; right: 10px; height: 1px;
  background: currentColor; transition: transform .4s ease, opacity .4s ease;
}
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 28px; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
body.nav-open .nav-toggle { color: #fff; }

/* overlay nav */
.global-nav {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(10, 18, 26, .96);
  color: #fff;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease, visibility .5s ease;
  overflow-y: auto;
}
body.nav-open .global-nav { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }
.global-nav-inner { padding: 96px var(--pad-x); text-align: center; width: 100%; }
.global-nav-inner ul + ul { margin-top: 32px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.2); }
.global-nav a { display: inline-block; padding: 10px 16px; font-size: 16px; letter-spacing: .18em; }
.global-nav .nav-en { font-family: var(--font-en); font-size: 13px; letter-spacing: .22em; opacity: .6; display: block; line-height: 1.4; }
.global-nav .nav-sub a { font-size: 14px; opacity: .95; }

/* ---------- hero ---------- */
.hero {
  position: relative; height: 100svh; min-height: 560px;
  overflow: hidden;
  display: grid; place-items: center;
  color: #fff; text-align: center;
}
.hero-media, .hero-media img, .hero-media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  /* 写真によっては中央が明るく、白い見出しが読めなくなる。
     全体を均す縦グラデーションに加え、見出しの位置だけを落とす楕円の暗幕を重ねる。 */
  background:
    radial-gradient(72% 46% at 50% 50%, rgba(0,0,0,.34) 0%, rgba(0,0,0,.18) 55%, rgba(0,0,0,0) 100%),
    linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.20) 38%, rgba(0,0,0,.40));
}
.hero-copy { position: relative; z-index: 2; padding: 0 var(--pad-x); }
.hero-copy h1 {
  font-size: clamp(26px, 4.2vw, 44px);
  font-weight: 500; letter-spacing: var(--ls-wide); line-height: 1.9;
  text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 2px 28px rgba(0,0,0,.5);
  /* 折り返しは .bs（文節）単位でしか起きないので、1〜2文字だけの行はそもそも出ない。
     均等割り(balance)は「前の行に詰める」の逆になるため使わない（2026-09-16 CEO指示）。 */
  max-width: 20em; margin-inline: auto;
  line-break: strict; /* 「180㎡」等が分断されないよう日本語の禁則処理を厳密に */
}
.hero-copy .hero-sub {
  font-family: var(--font-en);
  display: block; margin-top: 18px;
  font-size: clamp(15px, 1.7vw, 19px); letter-spacing: .28em;
}
/* ヒーロー：クロスフェードスライドショー
   3枚を重ね、下のレイヤーが不透明なまま上のレイヤーが乗ってくる方式。
   単純な opacity 交差だと切り替わりの瞬間に背景が透けて一瞬暗くなるが、この方式なら沈まない。
   1枚目は最初から opacity:1（アニメーションでフェードインさせない）＝ヒーローが白紙にならず LCP が遅れない。
   周期24秒／1枚あたり8秒（表示6.5秒＋フェード1.5秒）。 */
.hero { background: #1a222c; }
.hero-slideshow img { opacity: 0; }
.hero-slideshow img:nth-child(1) { opacity: 1; animation: heroken1 24s linear infinite; }
.hero-slideshow img:nth-child(2) { animation: heroslide2 24s ease-in-out infinite; }
.hero-slideshow img:nth-child(3) { animation: heroslide3 24s ease-in-out infinite; }
/* ケンバーンズ：拡大の戻しは必ず「隠れている間」に行い、表示中に巻き戻って見えないようにする */
@keyframes heroken1 {   /* 露出: 22秒〜8秒 */
  0%, 91.67%, 100% { transform: scale(1.06); }
  33.33%           { transform: scale(1); }
  58.33%           { transform: scale(1.06); }
}
@keyframes heroslide2 { /* 露出: 6.5秒〜16秒（16〜17.5秒は3枚目の下でフェードアウト） */
  0%     { opacity: 0; transform: scale(1.06); }
  27.08% { opacity: 0; transform: scale(1.06); }
  33.33% { opacity: 1; }
  66.67% { opacity: 1; transform: scale(1); }
  72.92% { opacity: 0; }
  100%   { opacity: 0; transform: scale(1.06); }
}
@keyframes heroslide3 { /* 露出: 14.5秒〜24秒（最後に消えて1枚目が現れる） */
  0%     { opacity: 0; transform: scale(1.06); }
  60.42% { opacity: 0; transform: scale(1.06); }
  66.67% { opacity: 1; }
  93.75% { opacity: 1; }
  100%   { opacity: 0; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slideshow img { animation: none; }
  .hero-slideshow img:first-child { opacity: 1; }
}

.hero-scroll {
  position: absolute; bottom: 28px; left: 50%; z-index: 2;
  font-family: var(--font-en); font-size: 12px; letter-spacing: .3em; color: #fff;
  transform: translateX(-50%);
  padding-bottom: 44px;
}
.hero-scroll::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 1px; height: 36px; background: #fff;
  animation: scrollline 2.2s ease infinite;
  transform-origin: top;
}
@keyframes scrollline { 0%{transform:scaleY(0)} 45%{transform:scaleY(1)} 100%{transform:scaleY(1);opacity:0} }

/* ---------- layout / sections ---------- */
main { display: block; }
.section { padding: clamp(72px, 10vw, 128px) var(--pad-x); }
.section-inner { max-width: 1080px; margin: 0 auto; }
.section-wide { max-width: 1280px; margin: 0 auto; }
.section:nth-of-type(even) { background: transparent; }
.section-tint { background: var(--c-accent-bg); }

/* 2段見出し（EN大＋JP小）— 全サイト共通の型 */
.sec-head { margin-bottom: clamp(36px, 5vw, 56px); text-align: center; }
.sec-head-en {
  display: block;
  font-family: var(--font-en);
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 400; letter-spacing: .2em; line-height: 1.4;
  color: var(--c-accent);
}
.sec-head-jp {
  display: block; margin-top: 10px;
  font-size: 15px; font-weight: 500; letter-spacing: .3em;
}
.sec-head-left { text-align: left; }

/* 詩的リード */
.lead {
  text-align: center;
  font-size: clamp(17px, 2.1vw, 21px);
  font-weight: 500; letter-spacing: var(--ls-wide); line-height: 2.4;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.body-text { max-width: 720px; margin: 0 auto; }
.body-text p + p { margin-top: 1.6em; }
.text-center { text-align: center; }

/* ---------- carousel（scroll-snap） ---------- */
.carousel-wrap { position: relative; margin: clamp(32px, 5vw, 56px) 0 0; }
.carousel {
  display: flex; gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel > * {
  flex: 0 0 min(78%, 720px);
  scroll-snap-align: center;
}
.carousel img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.carousel-tall img { aspect-ratio: 3 / 4; }
.carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; z-index: 5;
  background: rgba(255,255,255,.85); border: 1px solid var(--c-line);
  cursor: pointer; display: grid; place-items: center;
  transition: background .3s ease;
}
.carousel-btn:hover { background: #fff; }
.carousel-btn.prev { left: 8px; }
.carousel-btn.next { right: 8px; }
.carousel-btn::before {
  content: ""; width: 9px; height: 9px;
  border-top: 1px solid var(--c-blk); border-right: 1px solid var(--c-blk);
}
.carousel-btn.prev::before { transform: rotate(-135deg) translate(-1px, 1px); }
.carousel-btn.next::before { transform: rotate(45deg) translate(-1px, 1px); }

/* ---------- galleries ---------- */
.gallery-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  margin-top: clamp(32px, 5vw, 56px);
}
.gallery-grid img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.img-full { margin: clamp(32px, 5vw, 56px) 0 0; }
.img-full img { width: 100%; }

/* ---------- spec table（Access / Overview） ---------- */
.spec-table { max-width: 840px; margin: 0 auto; border-top: 1px solid var(--c-line); }
.spec-table > div {
  display: grid; grid-template-columns: 200px 1fr;
  border-bottom: 1px solid var(--c-line);
}
.spec-table dt {
  padding: 20px 16px;
  font-weight: 500; letter-spacing: .12em;
  background: var(--c-accent-bg);
}
.spec-table dd { padding: 20px 20px; min-width: 0; }
.spec-table ul li { position: relative; padding-left: 1.1em; }
.spec-table ul li::before { content: "・"; position: absolute; left: 0; }
.note { font-weight: 500; font-size: 13.5px; opacity: .92; }

.map-embed { margin-top: clamp(28px, 4vw, 44px); }
.map-embed iframe { width: 100%; height: 420px; display: block; filter: grayscale(.2); }

/* ---------- CTA ---------- */
.btn-line {
  display: inline-block;
  min-width: 260px;
  padding: 16px 40px;
  border: 1px solid var(--c-blk);
  font-size: 15px; letter-spacing: .22em; text-align: center;
  transition: background .4s ease, color .4s ease, border-color .4s ease, opacity .4s ease;
}
.btn-line:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; opacity: 1; }
.btn-line.btn-fill { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.btn-line.btn-fill:hover { opacity: .8; }
.btn-line .en { font-family: var(--font-en); font-size: 13px; letter-spacing: .26em; display: block; line-height: 1.4; opacity: .7; }
.cta-row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: clamp(28px, 4vw, 40px); }

/* 予約セクション（全ページ末尾・共通の締め） */
.booking-cta {
  background: var(--c-navy);
  color: #fff;
  text-align: center;
  padding: clamp(72px, 9vw, 112px) var(--pad-x);
}
body[data-facility] .booking-cta { background: var(--c-accent); }
body[data-facility="chimney"] .booking-cta,
body[data-facility="once"] .booking-cta { background: var(--c-blk); }
.booking-cta .sec-head-en { color: #fff; }
.booking-cta p { max-width: 640px; margin: 0 auto; }
.booking-cta .btn-line { border-color: #fff; color: #fff; }
.booking-cta .btn-line:hover { background: #fff; color: var(--c-blk); }
.booking-cta .sub-links { margin-top: 28px; display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.booking-cta .sub-links a { font-size: 13.5px; letter-spacing: .14em; border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 2px; }

/* ---------- floating / fixed bars ---------- */
.float-btns {
  position: fixed; right: 0; bottom: 96px; z-index: 90;
  display: flex; flex-direction: column; gap: 8px;
}
.float-btns a {
  writing-mode: vertical-rl;
  padding: 22px 12px;
  font-size: 13px; letter-spacing: .22em;
  background: var(--c-accent); color: #fff;
  transition: opacity .4s ease;
}
.float-btns a.alt { background: #fff; color: var(--c-blk); border: 1px solid var(--c-line); border-right: 0; }
.float-btns .en { font-family: var(--font-en); letter-spacing: .18em; opacity: .75; }
.float-btns.is-hidden { display: none; }

.sp-fixed-bar {
  position: fixed; inset: auto 0 0 0; z-index: 95;
  display: none;
  grid-template-columns: 1fr 1fr;
  background: rgba(255,255,255,.96);
  border-top: 1px solid var(--c-line);
  backdrop-filter: none;
}
.sp-fixed-bar a {
  padding: 15px 8px; text-align: center;
  font-size: 14px; letter-spacing: .18em;
}
.sp-fixed-bar a.bar-reserve { background: var(--c-accent); color: #fff; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--c-blk); color: #dcdcdc;
  padding: clamp(56px, 7vw, 88px) var(--pad-x) 120px;
  font-size: 14px;
}
.footer-inner { max-width: 1080px; margin: 0 auto; }
.footer-logo { font-family: var(--font-en); font-size: 26px; letter-spacing: .14em; color: #fff; line-height: 1.4; }
.footer-logo small { display: block; font-family: var(--font-jp); font-size: 11.5px; letter-spacing: .28em; opacity: .8; }
.footer-cols {
  display: grid; gap: 40px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-top: 40px; padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,.18);
}
.footer-cols h2 {
  font-size: 12.5px; font-weight: 500; letter-spacing: .26em;
  color: #fff; margin-bottom: 14px;
  font-family: var(--font-en);
}
.footer-cols li { margin-bottom: 8px; }
.footer-cols a { opacity: .95; }
.footer-bottom {
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.18);
  display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between;
  font-size: 12.5px; letter-spacing: .08em;
}
.footer-bottom .legal-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer-sns { display: flex; gap: 18px; }
.footer-sns a { font-family: var(--font-en); letter-spacing: .12em; }

/* ---------- cards（エリア・宿一覧・トップのダイジェスト） ---------- */
.card-grid { display: grid; gap: clamp(24px, 3.5vw, 40px); grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.card { display: block; }
.card figure { overflow: hidden; }
.card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.2s ease; }
.card:hover img { transform: scale(1.05); }
.card:hover { opacity: 1; }
.card-body { padding: 18px 4px 0; }
.card-title { font-size: 18px; font-weight: 500; letter-spacing: .12em; line-height: 1.7; }
.card-title .en { font-family: var(--font-en); display: block; font-size: 14px; letter-spacing: .2em; color: var(--c-accent); }
.card-desc { margin-top: 8px; font-size: 15px; line-height: 1.9; opacity: .95; }
.card-meta { margin-top: 8px; font-weight: 500; font-size: 13px; letter-spacing: .1em; opacity: .85; }
.card-more {
  display: inline-block; margin-top: 12px;
  font-family: var(--font-en); font-size: 13px; letter-spacing: .24em;
  border-bottom: 1px solid var(--c-blk); padding-bottom: 3px;
}

/* 交互レイアウト（画像＋テキスト） */
.media-row {
  display: grid; gap: clamp(28px, 5vw, 64px);
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.media-row + .media-row { margin-top: clamp(56px, 8vw, 96px); }
.media-row.reverse > figure { order: 2; }
.media-row img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- news ---------- */
.news-list { max-width: 840px; margin: 0 auto; border-top: 1px solid var(--c-line); }
.news-list article { padding: 28px 8px; border-bottom: 1px solid var(--c-line); }
.news-list time { font-family: var(--font-en); font-size: 13.5px; letter-spacing: .16em; color: var(--c-accent); display: block; }
.news-list h3 { font-size: 16.5px; font-weight: 500; letter-spacing: .08em; margin-top: 6px; }
.news-list p { margin-top: 8px; font-size: 14.5px; }

/* ---------- forms ---------- */
.form-wrap { max-width: 720px; margin: 0 auto; }
.form-field { margin-bottom: 28px; }
.form-field label { display: block; font-weight: 500; letter-spacing: .1em; margin-bottom: 8px; font-size: 15px; }
.form-field .req { color: #9a1f1f; font-size: 12px; margin-left: 8px; letter-spacing: .1em; }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--c-line);
  background: #fafaf8;
  font: inherit; letter-spacing: .04em;
  border-radius: 0; -webkit-appearance: none; appearance: none;
}
.form-field textarea { min-height: 180px; resize: vertical; }

/* 種別セレクト（2026-09-08）
   .form-field の入力欄は appearance:none で矢印が消えるため、そのままだと
   セレクトがテキスト欄と見分けられず、必須なのに「もう埋まっている」ように見える。
   造形はヘッダーの言語セレクタ（.header-lang::after）と同じ罫線45度を再利用する。
   新しい色・角丸・影は足さない。 */
.form-field .select-wrap { position: relative; display: block; }
.form-field .select-wrap select { padding-right: 44px; }
.form-field .select-wrap::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 6px; height: 6px; margin-top: -5px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); pointer-events: none; opacity: .55;
}
/* 未選択のあいだは他の空欄（placeholder）と同じ濃さに寄せる */
.form-field select.is-empty { color: #757575; }
/* 補足の一行（多言語の案内・ベストレートの記入のお願い） */
.form-note { margin-top: 10px; font-size: 13.5px; line-height: 1.9; opacity: .75; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: 1px solid var(--c-accent); background: #fff;
}
.form-consent { text-align: center; font-size: 14px; margin: 32px 0 24px; }
/* Turnstile ウィジェット（中央寄せ・高さ確保でCLS防止。色は足さない） */
.cf-turnstile { display: flex; justify-content: center; min-height: 65px; margin: 0 0 24px; }
/* ウィジェットは300px固定。画面幅が300pxを切る極狭端末でのみ実際にはみ出す
   （左側はスクロールで追えない）ため、そこだけ縮小して収める */
@media (max-width: 319px) {
  .cf-turnstile > div { transform: scale(.85); transform-origin: top center; }
}
.form-submit { text-align: center; }
.form-submit button { cursor: pointer; background: var(--c-accent); border: 1px solid var(--c-accent); color: #fff; font: inherit; }
.form-submit button:disabled { opacity: .5; cursor: default; }
.form-error { color: #9a1f1f; text-align: center; margin-top: 16px; display: none; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

/* ---------- text pages（privacy / legal） ---------- */
.doc-page { max-width: 840px; margin: 0 auto; }
.doc-page h2 { font-size: 18px; font-weight: 600; letter-spacing: .1em; margin: 44px 0 12px; padding-left: 14px; border-left: 2px solid var(--c-accent); }
.doc-page p + p { margin-top: 1em; }
.doc-page .doc-date { text-align: right; font-size: 14px; margin-top: 40px; }

/* ---------- breadcrumbs ---------- */
.breadcrumbs { padding: 12px var(--pad-x); font-weight: 500; font-size: 12.5px; letter-spacing: .06em; opacity: .88; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 4px; }
.breadcrumbs li:not(:last-child)::after { content: "／"; margin: 0 6px; opacity: .5; }

/* サブページ共通ヘッダー（ヒーローなしページ） */
.page-title {
  padding: calc(var(--header-h) + clamp(48px, 7vw, 80px)) var(--pad-x) clamp(40px, 6vw, 64px);
  text-align: center;
  background: var(--c-accent-bg);
}
.page-title .sec-head { margin-bottom: 0; }

/* ---------- animation ---------- */
/* スクロール連動フェード。JSが動いたときだけ隠す（html.js）。
   スクリプトが落ちた・ブロックされた場合に本文が真っ白にならないようにするため。 */
.js .js-fade { opacity: 0; transform: translateY(24px); transition: opacity 1.1s ease, transform 1.1s ease; }
.js-fade.is-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .js-fade { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .header-nav { display: none; }
  .nav-toggle { display: block; margin-left: auto; }
  .site-header .btn-reserve { display: none; }
}
@media (max-width: 767px) {
  body { font-size: 16px; }
  :root { --header-h: 64px; }
  .header-logo img { height: 38px; }
  .hero { min-height: 480px; }
  .spec-table > div { grid-template-columns: 1fr; }
  .spec-table dt { padding: 12px 14px; }
  .spec-table dd { padding: 14px 14px 20px; }
  .media-row { grid-template-columns: 1fr; }
  .media-row.reverse > figure { order: 0; }
  .carousel > * { flex-basis: 86%; }
  .float-btns { display: none; }
  .sp-fixed-bar { display: grid; }
  /* 2行になるセルがあるので、左右のセルを縦中央で揃える（既定の stretch だと
     1行側の文字が上に張り付く） */
  .sp-fixed-bar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 600; letter-spacing: .12em;
  }
  /* スマホには左サイドバーが無いので、ベストレート表示はこの予約ボタンが担う */
  .sp-fixed-bar .bar-reserve .btn-br {
    display: block;
    font-size: 10.5px; font-weight: 600; letter-spacing: .06em; line-height: 1.4;
    margin-bottom: 4px; opacity: .95;
  }
  .site-footer { padding-bottom: 140px; }
  .map-embed iframe { height: 320px; }
  .btn-line { min-width: 0; width: 100%; }
  .cta-row { flex-direction: column; align-items: stretch; }
}

/* ---------- 言語セレクタ（2026-08-25 多言語化） ---------- */
.header-lang { position: relative; display: inline-flex; align-items: center; }
.lang-select {
  appearance: none; -webkit-appearance: none;
  background: transparent; color: inherit;
  border: none;
  font-family: var(--font-en); font-size: 14px; letter-spacing: .1em;
  padding: 2px 16px 2px 0; cursor: pointer;
}
.lang-select:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
.lang-select option { color: var(--c-text); background: var(--c-bg); }
.header-lang::after {
  content: ""; position: absolute; right: 2px; top: 50%;
  width: 6px; height: 6px; margin-top: -5px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); pointer-events: none; opacity: .8;
}
/* 多言語ページの明朝系フォント（各ページでNoto Serifを読み込む） */
html:lang(zh-Hant) { --font-jp: "Noto Serif TC", "Noto Serif JP", serif; --font-en: "EB Garamond", "Noto Serif TC", serif; }
html:lang(zh-Hans) { --font-jp: "Noto Serif SC", "Noto Serif JP", serif; --font-en: "EB Garamond", "Noto Serif SC", serif; }
html:lang(ko)      { --font-jp: "Noto Serif KR", "Noto Serif JP", serif; --font-en: "EB Garamond", "Noto Serif KR", serif; }

/* Instagram最新6投稿グリッド（2026-08-25） */
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1.2vw, 14px); margin-top: clamp(32px, 5vw, 56px); }
.ig-grid a { display: block; overflow: hidden; }
.ig-grid img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; transition: opacity .4s ease, transform 1.2s ease; }
.ig-grid a:hover img { opacity: .85; transform: scale(1.05); }

/* 施設ページ：解説ブロックを「文章／写真」の2カラム交互レイアウトで見せる（2026-08-25）
   グループ化(.reveal-x > .rx-text + .rx-media)は site.js が行う。
   overflow-x:clip はスライド中の横スクロール防止（hidden だと overflow-y が auto になり
   main が縦スクロールコンテナ化してアンカー移動が壊れるため clip を使う） */
main { overflow-x: clip; }
.exp-photo { max-width: 840px; margin: clamp(32px, 5vw, 56px) auto 0; }

.reveal-x {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.reveal-x + .reveal-x { margin-top: clamp(56px, 8vw, 96px); }
.reveal-x.is-solo { grid-template-columns: 1fr; }
.reveal-x.is-solo .rx-text { max-width: 720px; margin-inline: auto; }
.rx-text, .rx-media { min-width: 0; }
.reveal-x[data-flip="1"] .rx-text { order: 2; }

/* 2カラム内は中央寄せを解除して読みやすく */
.reveal-x .sec-head { text-align: left; margin-bottom: clamp(18px, 2.4vw, 28px); }
.reveal-x.is-solo .sec-head { text-align: center; }
.reveal-x .lead { text-align: left; margin-bottom: clamp(16px, 2.2vw, 24px); }
.reveal-x.is-solo .lead { text-align: center; }
.reveal-x .body-text { max-width: none; margin: 0; }
.reveal-x .exp-photo,
.reveal-x .room-photo,
.reveal-x .carousel-wrap,
.reveal-x .gallery-grid { max-width: none; margin: 0; }
.reveal-x .rx-media > * + * { margin-top: clamp(16px, 2vw, 24px); }

/* 入場：ブロック全体（題名＋本文＋写真）が一体のまま片側からスライドイン。ブロックごとに左右交互 */
.js .reveal-x {
  opacity: 0;
  transform: translateX(-56px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22, .61, .36, 1);
}
.js .reveal-x[data-flip="1"] { transform: translateX(56px); }
.js .reveal-x.is-view { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .reveal-x { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 32px); }
  .reveal-x[data-flip="1"] .rx-text { order: 0; }   /* スマホは常に文章→写真の順 */
  .reveal-x .sec-head, .reveal-x .lead { text-align: center; }
  .js .reveal-x { transform: translateX(-28px); }
  .js .reveal-x[data-flip="1"] { transform: translateX(28px); }
  .js .reveal-x.is-view { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal-x { opacity: 1; transform: none; transition: none; }
}

/* FAQ（施設ページ・2026-08-26 SEO/LLMO対応で追加） */
.faq-list { max-width: 840px; margin: 0 auto; border-top: 1px solid var(--c-line); }
.faq-list > div { border-bottom: 1px solid var(--c-line); padding: 22px 4px; }
.faq-list dt { font-weight: 500; letter-spacing: .06em; line-height: 1.9; display: flex; gap: .6em; }
.faq-list dt::before { content: "Q."; font-family: var(--font-en); color: var(--c-accent); flex: none; }
.faq-list dd { margin-top: 10px; font-size: 1em; line-height: 2; opacity: .95; display: flex; gap: .6em; }
.faq-list dd::before { content: "A."; font-family: var(--font-en); color: var(--c-accent); flex: none; }
/* ---------- Book Direct：公式サイトからのご予約（2026-09-02 追加） ----------
   .booking-cta の直前・<main> 直下に置く独立セクション。
   罫線と余白と小さな英字だけで組み、面・角丸・グラデーション・バッジは足さない。
   色は --c-accent / --c-line / --c-text / --c-bg のみ（固定色は書かない）。
   文字色に --c-accent は使わない：seiryu / seiryu-2 の #2887a2 は白地で 4.14:1 と
   本文サイズの AA 4.5:1 を満たさないため。アクセントは Direct 側の1pxの縦罫だけに使う
   （.sec-head-en は 28〜40px の大文字テキストなので 3:1 基準を満たし、既存どおりで可）。
   背景がプレーンな .section に置く前提。.section-tint 上に置くと
   .bd-house（横罫を抜くための白地の印）だけが浮くので不可。 */
.book-direct .sec-head { margin-bottom: clamp(30px, 4vw, 44px); }

/* 二つの入口が、ひとつの宿（＝下の横罫）へ降りてくる図。英字ラベルのみで翻訳不要 */
.bd-route {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;                 /* 縦罫の下端を常に横罫に接地させる */
  column-gap: clamp(16px, 6vw, 72px);
  max-width: 560px;
  min-height: 172px;
  margin: 0 auto;
  border-bottom: 1px solid var(--c-line);
}
.bd-col { min-width: 0; display: flex; flex-direction: column; align-items: center; }
.bd-col-en {
  font-family: var(--font-en);
  font-size: 14px; letter-spacing: .16em; line-height: 1.5;
  white-space: nowrap;              /* 英字ラベルを1文字だけ落とさない */
  color: var(--c-text);
}
.bd-col-ota .bd-col-en { opacity: .8; }        /* 二重掛けはしない（.bd-line 側に opacity を持たせない） */
.bd-col-own .bd-col-en { font-weight: 500; }
.bd-line { display: block; width: 1px; margin-top: 12px; background: var(--c-line); }
.bd-col-ota .bd-line { height: 108px; }
.bd-col-own .bd-line { height: 54px; background: var(--c-accent); }  /* 短い＝宿に近い入口 */

/* 収束点。横罫の上に置き、--c-bg で罫線を抜いて「ひとつの宿」を示す */
.bd-house {
  position: absolute; left: 50%; bottom: 0;
  transform: translate(-50%, 50%);
  padding: 0 14px;
  background: var(--c-bg);
  font-family: var(--font-en);
  font-size: 16px; letter-spacing: .2em; line-height: 1.6;
  color: var(--c-text);
}

/* 本文。改行は原稿側の <br> で制御する（各言語で読みやすい位置に置き直すこと） */
.bd-body {
  max-width: 620px;
  margin: clamp(34px, 4.6vw, 48px) auto 0;
  text-align: center;
  text-wrap: pretty;                /* 非対応環境では無視されるだけ */
  font-size: clamp(16px, 1.6vw, 17.5px);
  line-height: 2.2; letter-spacing: .08em;
}

/* 条件の明記。既存 .note（12.5px / opacity .8）と併用し、幅と揃えだけを足す */
.bd-note {
  max-width: 620px;
  margin: clamp(16px, 2.2vw, 22px) auto 0;
  text-align: left;                 /* 複数行になるため中央揃えにしない */
  line-height: 1.9;
}

.book-direct .cta-row { margin-top: clamp(24px, 3.4vw, 32px); }

@media (max-width: 600px) {
  .bd-route { min-height: 150px; column-gap: 14px; }
  .bd-col-en { font-size: 13px; letter-spacing: .1em; }
  .bd-col-ota .bd-line { height: 92px; }
  .bd-col-own .bd-line { height: 46px; }
  .bd-house { font-size: 14.5px; padding: 0 10px; }
  .bd-body { line-height: 2.05; letter-spacing: .04em; }
}
/* ベストレート保証の一文。本文の1行目だけを一段強めて主役にする。
   色は --c-text のまま（--c-accent は seiryu 系 #2887a2 が白地で 4.14:1 と本文AAに届かないため使わない）。 */
.bd-lead {
  display: block;
  margin-bottom: .9em;
  font-weight: 500;
  font-size: clamp(17.5px, 2vw, 21px);
  letter-spacing: .1em;
  line-height: 1.95;
}
@media (max-width: 600px) { .bd-lead { font-size: 17px; letter-spacing: .06em; line-height: 1.85; } }

/* ---------- PC：左サイドバー型レイアウト（2026-09-02 追加）
   参考 https://www.ylandco-hotel.com/ ：固定の左カラムに
   ロゴ → 縦並びのナビ → 言語切替 → 最下部にご予約ボタン、右側が本文。
   1025px以上のみ。1024px以下は従来どおり上部ヘッダー＋ハンバーガーのまま。
   HTMLは変更せず、既存の .site-header を縦組みに組み替えるだけで実現している。 */
@media (min-width: 1025px) {
  :root {
    --side-w: clamp(200px, 16vw, 250px);
    --header-h: 24px;   /* 上部ヘッダーが無くなるため scroll-padding と sub頁の天地余白を詰める */
  }
  body { padding-left: var(--side-w); }

  .site-header,
  .site-header.is-solid,
  body[data-page="sub"] .site-header {
    inset: 0 auto 0 0;
    width: var(--side-w);
    height: 100svh;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 44px 24px 0;
    background: #fff;
    color: var(--c-blk);
    box-shadow: 1px 0 0 var(--c-line);
    backdrop-filter: none;
  }
  /* サイドバーは常に白地なので、ロゴは常に濃色版を使う */
  body .site-header .logo-white { display: none; }
  body .site-header .logo-dark  { display: block; }
  .site-header .header-logo { text-align: center; }
  .site-header .header-logo img { height: 54px; margin: 0 auto; }

  .header-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin: 46px 0 0;
  }
  .header-nav a { font-size: 13.5px; letter-spacing: .16em; line-height: 1.7; text-align: center; }
  .header-lang { margin-top: 8px; }

  /* ご予約はサイドバー最下部に貼り付ける（左右いっぱいの帯） */
  .site-header .btn-reserve {
    margin: auto -24px 0;
    padding: 22px 12px;
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #fff;
    /* 2026-09-10 CEO指摘：細くて小さく読みにくい。13.5px/400 → 15px/600 へ。
       字間は太くしたぶん詰める（.16em のままだと太字で間延びする）。 */
    font-size: 15px; font-weight: 600; letter-spacing: .12em;
    line-height: 1.6;
  }
  .site-header .btn-reserve:hover { opacity: .85; }
  /* 英字の Reserve は和文より一段小さく。和文を大きくしたぶん、
     ここまで大きくすると3行が同じ重さになって主従が消える。 */
  .site-header .btn-reserve .en-text {
    display: block; margin-left: 0 !important;
    font-size: 12px; font-weight: 400; letter-spacing: .18em; opacity: .85;
  }
  .site-header .btn-reserve .btn-br {
    display: block;
    font-size: 12px; font-weight: 600; letter-spacing: .08em; line-height: 1.5;
    margin: 0 0 8px; padding-bottom: 7px;
    border-bottom: 1px solid rgba(255,255,255,.4);
  }

  /* 右端の追従ボタンは「ご予約」がサイドバーと重複するため、お問い合わせのみ残す */
  .float-btns a:not(.alt) { display: none; }
}

/* ---------- 日本語の改行制御（2026-09-02 追加） ----------
   「…について」の「て」だけが次行に落ちるような、1文字だけの孤立行を防ぐ。
   - line-break: strict … 約物（、。「」）の禁則処理を厳密にする
   - text-wrap: pretty  … 最終行に1〜2文字だけ残る折り返しを回避（対応ブラウザのみ・非対応でも無害）
   1行に収まらない場合に文節で切りたい箇所は、HTML側で .wrap-unit（inline-block）で
   文節を包む。改行は .wrap-unit どうしの境目でしか起きなくなる。 */
body { line-break: strict; text-wrap: pretty; }
.wrap-unit { display: inline-block; }

/* ---------- 見出しを左に置く一覧セクション（2026-09-03 追加） ----------
   参考 earthboat.jp。骨格は Our Stay（セクション見出しを左カラムへ逃がす）、
   中身は Locations（写真＋名前の小さなカードを横に並べる）のハイブリッド。
   縦が縮むのは「見出しブロックが横へ抜ける」ことと「カードが3列で1段に収まる」ことによる。
   写真を小さくして稼いでいるのではない（1440px実測 373×249 → 252×168）。

   新しい造形は足していない：カードは既存の .card / .card-title / .card-desc /
   .card-more をそのまま使い、寸法だけ .stay-cards の中で詰める。
   520px以下の罫線リストは .news-list / .spec-table / .faq-list と同じ型。
   矢印記号は導入しない（このサイトの「続きへ」は .card-more ＝ EB Garamond ＋ 下罫線）。

   ■ 触るときの注意（既存実装の癖）
   ・セクションの class は一切変えていない（.section / .section-tint / .js-fade のまま）。
     `.section:nth-of-type(even){background:transparent}` が `.section-tint` に勝つため、
     section の本数・順序・class を変えると地色が総入れ替えになる。
     JA=6本／他4言語=5本で、いまの交互が成立している。
   ・.sec-split は .section-inner / .section-wide の直下に置くが、
     直下に「h3 を含む .sec-head」を2つ以上作らないこと。
     site.js がそれを検知して .reveal-x で2カラム化してしまう。
     （.sec-head は .sec-split-aside の中＝直下ではない。中身も h2 で h3 ではない）
   ・グリッドの子には min-width:0 を明示する。WebKit で右端が見切れるため。 */
.sec-split { display: grid; }
.sec-split > * { min-width: 0; }
/* 30em(450px) だと ja/zh/ko が2行に折れて「です。」級の孤立行が出る。
   1行の実測幅は ja 477 / en 571 / zh-Hant 447 / zh-Hans 447 / ko 474px なので
   40em(600px) で5言語とも1行に収まる。text-wrap:balance は使わない
   （CJK では「全10／棟。」のように数字と助数詞を割るため）。 */
.sec-split-lead {
  max-width: 40em;
  margin: 0 auto clamp(28px, 4vw, 44px);
  text-align: center;
  font-size: 15px; line-height: 2.05; letter-spacing: .06em;
}

/* 2026-09-08：CEO指示で Topics（#news）も全幅で中央揃えに戻した。
   これで .sec-split の利用者は「1カラムの中央積み」だけになり、
   1300px 以上で見出しを左カラムへ逃がすブロックは丸ごと不要になったので削除した
   （#area-list は 2026-09-04 に、#news は 2026-09-08 に中央へ戻っている）。
   .sec-split 自体は #area-list / #news の骨格として残す。 */

/* #area-list は全幅で中央揃え（2026-09-04・CEO指示）。
   見出し・説明・3枚のカード・「宿一覧を見る」を、1080px グリッドの中心軸に揃える。
   1080px は #about-noel の本文グリッド（.about-split の padding-left）と同じ基準線で、
   超ワイドでもカード幅は 341px で頭打ちになる＝カード専用の max-width を作らずに済む
   （.section-wide の 1280px のままだと 1658px 超でカードが 408px まで太り、
     .stay-cards の詰めた文字組 16/13/12px と釣り合わなくなる）。
   1300px 以上の2カラム化は #news にスコープしてあるので、ここに打ち消しは要らない。 */
#area-list .sec-split { max-width: 1080px; margin-inline: auto; }

/* ---------- 宿泊エリアのカード ----------
   既存 .card-grid（auto-fit minmax(min(300px,100%),1fr)）は PC 左サイドバーぶん本文が狭くなると
   1300px 前後で2カラムに落ち、1280px では 1,534px と 1440px(961px)より縦に長くなっていた。
   ここは件数が3で固定なので repeat(3,…) にして全 PC 幅で1段に保つ。 */
.stay-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.stay-cards > * { min-width: 0; }
.stay-cards .card-body { padding: 14px 2px 0; }
.stay-cards .card-title { font-size: 16px; letter-spacing: .1em; line-height: 1.6; }
.stay-cards .card-title .en { font-size: 12.5px; letter-spacing: .18em; line-height: 1.5; }
.stay-cards .card-desc { margin-top: 5px; font-size: 13px; line-height: 1.85; }
.stay-cards .card-more { margin-top: 10px; font-size: 12px; letter-spacing: .2em; }

/* サイト全体にキーボードフォーカスの輪郭が無かったので、ここで .card に足す（新規セレクタ・退行なし） */
.card:focus-visible { outline: 1px solid var(--c-accent); outline-offset: 4px; }

/* 施設名（ラテン表記＝全言語共通・翻訳不要）。
   区切り記号は置かず余白だけで分ける＝折り返しても行末に「／」がぶら下がらない。
   白地への実効色は rgb(80,80,80) 相当でコントラスト 8.06:1（AA/AAA可）。 */
.stay-props {
  display: flex; flex-wrap: wrap;
  gap: 1px clamp(9px, 1vw, 13px);
  margin-top: 7px;
  font-size: 12.5px; letter-spacing: .06em; line-height: 1.7;
  opacity: .82;
}
.stay-props span { white-space: nowrap; }

/* 520px 以下（スマホ）：サムネイル＋テキストの罫線リストへ。
   3列のままだとカードが 106px まで痩せて写真が判別できなくなるので、
   ここは「小さい写真を3つ並べる」より「読める写真を縦に流す」を採る（実測 133×89）。
   罫線リストは .news-list / .spec-table / .faq-list と同じ型で、新しい造形ではない。 */
@media (max-width: 520px) {
  .stay-cards {
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--c-line);
  }
  .stay-cards .card {
    display: grid;
    grid-template-columns: clamp(132px, 38%, 168px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 15px 0;
    border-bottom: 1px solid var(--c-line);
  }
  .stay-cards .card-body { padding: 0; }
  .stay-cards .card-title { font-size: 15.5px; }
}

/* ---------- Topics（旧「お知らせ」） ----------
   タイトル＋View More の行リスト。本文は各お知らせページ側に置く。
   掲載日は2026-08-31（CEO確認済み）。日付・タイトル・View More の3列。
   520px以下は下のメディアクエリで1列に潰し、日付が上段へ回る。 */
.topics-list { border-top: 1px solid var(--c-line); }
.topics-list > li { border-bottom: 1px solid var(--c-line); }
.topics-link {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) auto;   /* 日付・タイトル・View More */
  align-items: baseline;
  column-gap: clamp(16px, 2.4vw, 32px);
  padding: 18px 2px;
}
.topics-link:hover { opacity: 1; }            /* a:hover{opacity:.7} を打ち消し、下の1行で反応させる */
.topics-link:hover .topics-title { opacity: .68; }
.topics-link:focus-visible { outline: 1px solid var(--c-accent); outline-offset: 3px; }
.topics-title { font-size: 15.5px; font-weight: 500; letter-spacing: .06em; line-height: 1.9; transition: opacity .4s ease; }
.topics-link .card-more { margin-top: 0; white-space: nowrap; }
.topics-date { font-size: 13px; letter-spacing: .16em; color: var(--c-accent); white-space: nowrap; }

@media (max-width: 520px) {
  .topics-link { grid-template-columns: 1fr; row-gap: 2px; padding: 15px 2px; }
  .topics-title { font-size: 15px; }
  .topics-link .card-more { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .topics-title { transition: none; }
}


/* ---------- About Noël：文章＋縦長写真レール（2026-09-04 追加） ----------
   参考 earthboat.jp トップ「Our Stay」型。
   左＝英字の大見出し＋和文キャプション＋リード＋段落3つ、下半分は空けたまま。
   右＝5:8 の縦長写真が画面右端へ抜ける横レール＋細い進捗バー＋‹ ›。
   写真の高さは幅から決まるので、枚数が増えてもセクションは伸びない。

   ■ 触るときの注意
   ・セクションの class（.section .section-tint .js-fade）は一切変えていない。
     `.section:nth-of-type(even){background:transparent}` が .section-tint に詳細度で勝つため、
     section の本数・順序・class を変えると全ページの地色が総入れ替えになる。
   ・`#about-noel .section-inner { max-width: none }` で 1080px キャップを外しているが、
     そのままだと 1438px 超でこのセクションだけ左端が外へ出る（1920pxで231px、2560pxで551px）。
     .about-split の padding-left で 1080px グリッドの左端に固定して打ち消している。
     vw は使えない（1025px以上は左サイドバーぶん座標の原点がずれるため）。
   ・右端への抜けは `margin-right: calc(var(--pad-x) * -1)` だけで作る。はみ出し量は
     ちょうど --pad-x なのでレール右端＝ビューポート右端、横スクロールバーは出ない
     （`main{overflow-x:clip}` に頼らずオーバーフロー0で成立している）。
   ・写真幅は `100% / var(--about-d)` の**割り算だけ**で決める。docs/20260904 の明文ルールどおり
     clamp/max-width で頭打ちにしない（頭打ちにすると「切れ幅」が計算から外れて破片になる）。
     --about-d は「レールに見えている枚数」で、小数部がそのまま最後の1枚の切れ方になる。
     写真を大きくしたい／小さくしたいときは --about-d の階段を動かすこと。
   ・.stay-wrap / .stay-rail / .stay-bar は **site.js の進捗バー処理のフック名**（歴史的経緯で
     stay-。#area-list の .stay-cards / .stay-props とは無関係）。新規JSを足さないための名前。
   ・グリッド／フレックスの子には min-width:0 を明示する（WebKit の右端見切れ対策）。 */
.about-split { display: grid; padding-left: max(0px, calc((100% - 1080px) / 2)); }
.about-split > * { min-width: 0; }
#about-noel .section-inner { max-width: none; }

.about-rail {
  /* ‹ › の寸法と置き場所。ボタンは site.js が .about-rail(=.carousel-wrap) の子として
     挿入するので、ここに置いた変数がそのまま継承される（.stay-foot は兄弟なので不可）。
     --btn-inset は「レール左端からの寄せ」。--pad-x が 20px まで縮む SP でも
     画面左端から必ず 56px（＝ボタン1つ48px＋8px）内側に入り、iOS の
     エッジスワイプ帯（〜20px）から外れる。1120px 以上では 0＝レール左端＝写真の左端に揃う。 */
  --btn-size: 48px;
  --btn-gap: 8px;
  --btn-inset: max(0px, calc(56px - var(--pad-x)));
  --btn-run: calc(var(--btn-size) * 2 + var(--btn-gap) + 12px);   /* ‹ › 2つ＋隙間＋バーとの間隔 */
  margin-right: calc(var(--pad-x) * -1);
}
.about-rail .carousel { gap: 10px; padding-bottom: 0; }
.about-rail .carousel > * {
  /* 幅は flex-basis ではなく width で指定する。既存の `.carousel img{width:100%}` が
     flex-basis より勝ってしまい、Chrome 152 では写真がレール全幅まで伸びるため
     （現行 #about-noel が 1080×1440 に膨らんでいるのがまさにこの症状）。
     1行目の width:300px は calc が不正扱いになった環境（IACVT）用のフォールバック。 */
  flex: 0 0 auto;
  width: 300px;
  width: calc(100% / var(--about-d) - 10px);
  min-width: 0;               /* min-width:auto の自動最小サイズを無効化 */
  height: auto;
  scroll-snap-align: start;   /* 既定の center は右へ抜ける造形と噛み合わない */
}
.about-rail .carousel img { aspect-ratio: 5 / 8; }   /* 参考と同じ縦長比。既存の object-fit:cover が中央を切る */

/* 進捗バーと ‹ › の行（写真の下）。‹ › は行の左端（＝1枚目の写真の下）に2つ並べ、
   バーはその右から本文の右端まで通す。高さ48px＝ボタンと同じで、
   align-items:center によりバーの中心と ‹ › の中心が同じ y に乗る。
   margin-top を詰めているのは、行が34→48pxになったぶんを相殺して
   写真とバーの見かけの間隔を現行どおりに保つため（セクション高の増は +8〜10px に収まる）。
   .stay-foot は5言語トップにしか存在しないが、将来の再利用に寸法が付いて回らないよう
   #about-noel スコープにしてある（他の #about-noel 上書きと同じ原則）。 */
#about-noel .stay-foot {
  display: flex; align-items: center; height: var(--btn-size);
  margin-top: clamp(10px, 1.4vw, 16px);
  margin-left: calc(var(--btn-inset) + var(--btn-run));
  margin-right: var(--pad-x);
}
.stay-bar { position: relative; flex: 1 1 auto; height: 1px; overflow: hidden; background: var(--c-line); }
/* width:0 は必須。無いと JS 無効時・JS実行前の初回ペイントで「100%スクロール済み」の濃い帯が出る */
.stay-bar span { display: block; width: 0; height: 100%; background: var(--c-accent); }

/* ‹ › は写真の上（中央オーバーレイ）ではなく、参考と同じくバーの行に置く。ただし右端ではなく
   **行の左端＝1枚目の写真の下**に2つ並べる（2026-09-04 変更）。理由は3つ。
   ①画面の左右どちらの端からも離れる（最小56px。旧版はSPで右端から20pxだった）
   ②操作する対象（写真・進捗バー）の真下に戻る＝近接がアフォーダンスになる
   ③‹ › が対のまま隣り合うので「前後送り」に読める。
   白地の塗りは戻さない（レールの静けさを壊すため）が、**1px の枠線は戻す**。
   48px の当たり判定が透明のままだと「どこが押せるのか」が見えず、CEO指摘の「小さい」に
   答えられないため。1px 罫線は .btn-line / .stay-bar / .topics-list と同じ既存の語彙で、
   角丸・影・塗り・原色は足していない。
   （WCAG 1.4.11 の 3:1 が要るのは「そのコントロールを識別するために必要な視覚情報」で、
     識別を担うのは地色比 12:1 超のシェブロン。--c-line の枠は装飾なので 1.35:1 でも可。
     旧コメントはこの点を取り違えていたので書き換えた。）
   hover / active / focus では枠線を --c-accent に上げる＝押すと「濃くなる」。
   旧版の opacity:.55（＝唯一の目印が薄くなる）は方向が逆だったのでやめた。 */
#about-noel .carousel-btn {
  top: auto; bottom: 0; transform: none;
  width: var(--btn-size); height: var(--btn-size);
  background: transparent; border: 1px solid var(--c-line);
  transition: border-color .3s ease, opacity .3s ease;
}
#about-noel .carousel-btn:hover,
#about-noel .carousel-btn:active { background: transparent; border-color: var(--c-accent); opacity: 1; }
#about-noel .carousel-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
/* 端まで送り切った側は site.js が disabled にする。押しても何も起きないタップを無くす */
#about-noel .carousel-btn:disabled { border-color: var(--c-line); opacity: .3; cursor: default; }
#about-noel .carousel-btn:disabled:hover { border-color: var(--c-line); opacity: .3; }
#about-noel .carousel-btn::before { width: 12px; height: 12px; border-color: var(--c-accent); }
#about-noel .carousel-btn.prev { left: var(--btn-inset); right: auto; }
#about-noel .carousel-btn.next { left: calc(var(--btn-inset) + var(--btn-size) + var(--btn-gap)); right: auto; }

/* --- 1199px 以下：従来どおりの縦積み（見出し・リードは中央のまま）。レールだけ右端へ抜ける --- */
.about-rail { --about-d: 1.20; }
@media (min-width: 460px)  { .about-rail { --about-d: 1.45; } }
@media (min-width: 640px)  { .about-rail { --about-d: 1.90; } }
@media (min-width: 830px)  { .about-rail { --about-d: 2.45; } }

/* --- 1200px 以上：左＝文章／右＝レールの2カラム ---
   1025〜1199px を2カラムにしない理由：左サイドバーが出た直後で本文が880pxを切り、
   ここで2カラムにすると写真が250px級まで痩せるため（既存の .sec-split が 1300px を
   境にしているのと同じ判断）。 */
@media (min-width: 1200px) {
  .about-split {
    grid-template-columns: minmax(0, clamp(420px, 40%, 500px)) minmax(0, 1fr);
    column-gap: clamp(40px, 5%, 88px);
    align-items: start;
  }
  .about-rail { --about-d: 1.20; margin-top: 0; }
  /* 余白は分散させず、左カラムの「下」にまとめて残す＝参考の余白感。
     詰め方は既存の `.sec-split-aside .sec-head{margin-bottom:clamp(16px,1.6vw,22px)}` の踏襲 */
  .about-text .sec-head { text-align: left; margin-bottom: clamp(20px, 2.4vw, 30px); }
  .about-text .lead { text-align: left; margin-bottom: clamp(20px, 2.4vw, 30px); }
  /* 英語のキャプションは49字あり、和文用の .3em のままだと 2 行になる（他4言語は1行） */
  .about-text .sec-head-jp.en-text { letter-spacing: .12em; }
  .about-text .body-text { max-width: none; margin: 0; }
}
/* --about-d の階段：写真幅を 370〜451px（参考385pxの96〜117%）の帯に保ちつつ、
   切れ幅（最後の1枚の見えている量）を50〜414pxに保つための値。実測で決めてある。
   小数部が .20/.30/.45/.60/.90 と散っているのは、どの幅でも破片（0〜7px）を作らないため。 */
@media (min-width: 1250px) { .about-rail { --about-d: 1.30; } }
@media (min-width: 1330px) { .about-rail { --about-d: 1.45; } }
@media (min-width: 1430px) { .about-rail { --about-d: 1.60; } }
@media (min-width: 1690px) { .about-rail { --about-d: 1.90; } }
@media (min-width: 2060px) { .about-rail { --about-d: 2.30; } }
@media (min-width: 2450px) { .about-rail { --about-d: 2.70; } }
@media (min-width: 2800px) { .about-rail { --about-d: 2.90; } }

/* ---------- Best Rate バナー／詳細ページ（2026-09-05 追加） ----------
   参考：MUNI KYOTO トップの .banner--bestrate（1440pxで実測 631×150 の横長カード。
   客室写真＋rgba(0,0,0,.3)の暗幕＋白の見出し2行＋角丸16pxの明るいピル型ボタン）。
   骨格（本文グリッドの中に置いた1枚の写真カード／暗幕／白の文字／ボタンひとつ）は採り、
   造形はすべて Noël の既存語彙へ翻訳した：
   ・角丸ピル型ボタン → .btn-line（1px角枠）。site.css に border-radius の記述は
     .form-field input の `border-radius: 0` の1件しかない＝サイトに角丸の前例が存在しない。
   ・「濃い地＋白の2段見出し＋白枠の .btn-line」は新規造形ではなく .booking-cta の移植。
     違いは地が単色（--c-navy）か写真かだけ。ホバーで白く塗り潰すのも .booking-cta と同じ。
   ・写真の上に白文字を置くための暗幕と text-shadow は .hero-media::after / .hero-copy h1 と
     同じ考え方。--c-* に無い #fff と rgba(0,0,0,*) を使う理由もそこと同一＝写真上の可読性。
   ・暗幕は rgba(0,0,0,.30)＝MUNI と同値。写真を専用に切り出して（bestrate-band-01.webp）
     文字ゾーンに点光源が入らないようにしたので、これ以上濃くする必要がない。
     濃くしないぶん写真が「読める」まま残り、白地に浮く黒い箱にならない。
   ・幅 840px は .spec-table / .faq-list / .news-list / .doc-page と同じ既存の基準線。

   ■ 置き場所と地色パリティ
   <main> 直下・#about-noel の直前。**<section> ではなく <div>**。
   `.section:nth-of-type(even){background:transparent}`（0,2,0）が `.section-tint`（0,1,0）に勝つため、
   main 直下に <section> を1本足すと以降の地色が総入れ替えになる。:nth-of-type は要素型ごとに
   数えるので、<div> は section の番号に一切入らない＝地色ローテーションを動かさない。
   （<aside> でも同じ効果だが、販促ブロックに complementary ランドマークを与える必然が無いので
     <div> を選んでいる。サイト内に <aside> の前例もゼロ。）
   site.js の2カラム化（main .section-inner / .section-wide の直下の sec-head(h3) が2つ以上）にも
   .section-inner を使っていないので掛からない。 */
/* 上下は同量。下を 0 にすると注記のすぐ下から #about-noel の淡色地が始まり、
   バナーが次のセクションに貼り付いて見える（2026-09-05 CEO指摘）。
   .section の縦 padding（clamp(72px,10vw,128px)）より一段小さい値にして、
   「セクションではない差し込み」であることを余白の大きさでも示している。 */
.bestrate { padding: clamp(56px, 7vw, 96px) var(--pad-x); }

.bestrate-card {
  position: relative; display: block; overflow: hidden;
  max-width: 840px; margin: 0 auto;
  color: #fff;
  background: var(--c-navy);   /* 画像到着前・読み込み失敗時の下敷き。.booking-cta と同じ地色 */
}
.bestrate-card > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* 素材（1920×475・比4.04）はカードの最大比 2.6 より横長なので、cover の切り抜きは常に左右のみ。
     どの画面幅でも上下は必ず全部見える＝明るい空や点光源が文字の行に入り込まない。
     object-position は既定(center)のままでよい。 */
  transition: transform .8s ease;
}
.bestrate-card::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(0, 0, 0, .30);   /* 参考と同値 */
}
.bestrate-body {
  position: relative; z-index: 2;
  padding: clamp(32px, 3.8vw, 42px) clamp(22px, 4vw, 44px);
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 2px 24px rgba(0,0,0,.5);
}
.bestrate .sec-head { margin-bottom: 0; }
.bestrate .sec-head-en { color: #fff; font-size: clamp(24px, 2.6vw, 30px); }
.bestrate .sec-head-jp { color: #fff; margin-top: 8px; }
/* 英文が .sec-head-jp に入るときは字送りを詰める（既存 .about-text .sec-head-jp.en-text と同じ扱い） */
.bestrate .sec-head-jp.en-text { letter-spacing: .12em; }
.bestrate-lead {
  margin-top: clamp(12px, 1.6vw, 16px);
  font-size: clamp(15px, 1.6vw, 16.5px);
  line-height: 1.95; letter-spacing: .06em;
}
/* ボタン：.booking-cta .btn-line と同じ「白枠・白文字、ホバーで白く塗り潰す」。
   カード全体がリンクなので、カードのどこをホバーしてもボタンが点く。 */
.bestrate .btn-line {
  margin-top: clamp(20px, 2.4vw, 26px);
  padding: 13px 36px;
  border-color: #fff; color: #fff; text-shadow: none;
}
.bestrate-card:hover .btn-line { background: #fff; border-color: #fff; color: var(--c-blk); }
.bestrate-card:hover > img { transform: scale(1.04); }   /* .card:hover img と同じ */
.bestrate-card:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; }

/* 条件の明記（景表法）。断定表現と同じ画面に置く。文言は 2026-09-02 CEO承認の注記の1・2行目そのまま。
   残り2行（外部予約システムへ遷移する旨・クーポンの条件）は /bestrate に全文を置いている。
   .note は白地の上に出るので opacity をそのまま使ってよい（写真の上ではない）。 */
.bestrate-note { max-width: 840px; margin: clamp(14px, 2vw, 18px) auto 0; text-align: left; line-height: 1.9; }

@media (max-width: 600px) {
  .bestrate .sec-head-en { font-size: 23px; }
  .bestrate-lead { letter-spacing: .04em; line-height: 1.9; }
  .bestrate .btn-line { width: 100%; }
}
/* 374px以下では「ベストレートについて」が2行に割れるので、字送りと左右パディングだけ詰める */
@media (max-width: 374px) {
  .bestrate .btn-line { padding: 13px 14px; letter-spacing: .14em; }
}
@media (prefers-reduced-motion: reduce) {
  .bestrate-card > img, .bestrate-card:hover > img { transition: none; transform: none; }
}

/* ---------- /bestrate 本文 ----------
   セレクタは .bestrate-doc に閉じてある（.doc-page 全体には効かせない）。 */
.bestrate-doc .bd-body { max-width: 760px; }   /* 620 のままだと句の途中で折れる。原稿の <br> は 620 用ではない */
.bestrate-doc ul { margin: 10px 0 0; }
.bestrate-doc ul li { position: relative; padding-left: 1.15em; line-height: 2; }
.bestrate-doc ul li::before { content: "・"; position: absolute; left: 0; }
.bestrate-doc ul li + li { margin-top: .4em; }
.bestrate-doc ul + p { margin-top: 1.4em; }
.bestrate-doc .bestrate-note4 { margin-top: 2.6em; line-height: 1.95; }

/* ============================================================
   トップのお問い合わせ（2026-09-09）
   <main> 直下・#looking-for-owners の直後・.booking-cta の直前。
   ■ <section> にしないこと。`.section:nth-of-type(even){background:transparent}`(0,2,0)
     が `.section-tint`(0,1,0) に勝つため、main 直下に <section> を1本足すと以降の
     地色が総入れ替えになる。しかも ja だけ #news があってパリティが違うので、
     言語ごとに違う崩れ方をする。:nth-of-type は要素型ごとに数えるので div は無関係。
   ■ `.section` クラスも足さないこと。素のクラスセレクタなので div にも当たり、
     main 直下2本目の div（1本目は .bestrate）＝even に該当して自分の地色が飛ぶ。
   ■ 地色（.section-tint）も付けない。入力欄の面 #fafaf8 と --c-accent-bg #f4f6f8 は
     差が(6,4,0)しかなく、淡色地に置くと欄が地に溶けて1pxの罫だけになる。
   ■ 中に「h3 を含む .sec-head」を2つ以上作らないこと（site.js が .reveal-x で
     2カラム化し、フォームが半幅に潰れる＋Turnstileのiframeが差し直されて壊れる）。
   縦の余白は .section と同値。新しい数字は作らない。 */
.contact-home { padding: clamp(72px, 10vw, 128px) var(--pad-x); }

/* ============================================================
   ベストレートのポップアップ（2026-09-09）
   ■ 中央モーダルにしない。下端に寄せた非ブロッキングのカード。
     Googleの「煩わしいインタースティシャル」は(1)検索から着地した直後に本文を覆う
     (2)本文に到達する前に閉じさせる (3)本文より先に全画面で出す、を問題にする。
     安全域は「相応の面積で、簡単に閉じられるバナー」。下端カードはその形に収まる。
   ■ body 直下に置くこと。<header class="site-header"> の中に入れてはいけない。
     is-solid のとき backdrop-filter: blur(6px) が効き、position:fixed の子が
     ヘッダーの箱（高さ84px）に閉じ込められる。1280px以上では backdrop-filter が
     none に上書きされるので、PCでは再現せずモバイルだけ壊れる方向の罠。
   ■ z-index 110。.sp-fixed-bar(95)/.site-header(100) より上、.global-nav(120) より下。
     下にしてあるのは意図的で、ハンバーガーを開くとポップアップが自動的に隠れる。
   ■ スクロールロックはしない（本文を止めない＝インタースティシャル扱いを避ける）。
   ■ 配置は左下。右下は .float-btns（施設ページ・fixed right:0 bottom:96px）と衝突する。
   ============================================================ */
.bestrate-pop {
  position: fixed; z-index: 110;
  left: 24px; bottom: 24px; width: 360px; max-width: calc(100vw - 48px);
  background: var(--c-gold-deep); color: #fff;
  padding: 22px 24px 20px;
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
}
/* 施設ごとのアクセント色は当てない（2026-09-10）。ベストレートは
   施設ではなくブランド全体の約束なので、10棟で色が変わると別の話に見える。 */

/* 紋章＋見出しの横並び（参考画像の構図） */
.bestrate-pop .bp-head { display: flex; align-items: center; gap: 14px; }
.bestrate-pop .bp-seal { flex: 0 0 auto; width: 56px; height: 56px; display: block; }
.bestrate-pop .bp-seal svg { width: 100%; height: 100%; display: block; }
.bestrate-pop .bp-heads { min-width: 0; }
.bestrate-pop.is-view { opacity: 1; transform: none; }
.bestrate-pop .bp-title {
  font-size: 21px; font-weight: 600; line-height: 1.45; letter-spacing: .08em;
}
.bestrate-pop .bp-lead { font-size: 13px; line-height: 1.75; letter-spacing: .03em; margin-top: 6px; }
.bestrate-pop .btn-line {
  display: block; width: 100%; margin-top: 16px;
  border-color: #fff; color: #fff; min-width: 0;
}
.bestrate-pop .btn-line:hover { background: #fff; color: var(--c-blk); }
/* 折り返す文なので border-bottom ではなく text-decoration を使う。
   inline-block + border-bottom だと最終行の下に全幅の罫が引かれ、リンクではなく
   区切り線に見える（/bestrate 本文の注釈リンクと同じ text-decoration の書き方）。 */
.bestrate-pop .bp-ask {
  display: inline-block; margin-top: 14px;
  font-size: 13.5px; line-height: 1.8; letter-spacing: .04em;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: rgba(255,255,255,.55);
}
.bestrate-pop .bp-ask:hover { text-decoration-color: #fff; }
/* 条件は必ずポップアップの中に置く（景表法の打消し表示。別ページに逃がすと
   「打消し表示が無い」のと同じ扱いになる）。文言は各言語のバナー注記と同一。 */
.bestrate-pop .bp-note { margin-top: 14px; font-size: 11.5px; line-height: 1.75; opacity: .92; }
.bestrate-pop .bp-note a { border-bottom: 1px solid rgba(255,255,255,.4); }
.bestrate-pop .bp-close {
  position: absolute; top: 0; right: 0;
  width: 44px; height: 44px;              /* タップ標的は44px確保 */
  background: none; border: 0; cursor: pointer; color: inherit;
}
.bestrate-pop .bp-close span {
  position: absolute; left: 13px; right: 13px; top: 21px;
  height: 1px; background: currentColor;  /* ×は .nav-toggle と同じ1px罫の45度 */
}
.bestrate-pop .bp-close span:nth-child(1) { transform: rotate(45deg); }
.bestrate-pop .bp-close span:nth-child(2) { transform: rotate(-45deg); }
.bestrate-pop .bp-close:focus-visible { outline: 1px solid #fff; outline-offset: -4px; }

@media (max-width: 767px) {
  /* スマホは下端いっぱいのシート。高さは42vhで頭打ちにして本文を覆わない。
     開いている間だけ .sp-fixed-bar を隠す＝固定バーが2段に重ならない。 */
  .bestrate-pop {
    left: 0; right: 0; bottom: 0; width: auto; max-width: none;
    padding: 16px var(--pad-x) calc(16px + env(safe-area-inset-bottom));
    max-height: 46vh; overflow-y: auto; overscroll-behavior: contain;
  }
  body.bestrate-pop-open .sp-fixed-bar { display: none; }
  /* 条件（打消し表示）はスクロールせずに読めなければ意味が無い。
     スマホでは飾りの英字を落とし、余白を詰めて全文を1画面に収める。 */
  .bestrate-pop .bp-seal { width: 46px; height: 46px; }
  .bestrate-pop .bp-head { gap: 12px; }
  .bestrate-pop .bp-title { font-size: 18px; }
  .bestrate-pop .bp-lead { font-size: 12.5px; line-height: 1.7; }
  .bestrate-pop .bp-lead { font-size: 13.5px; line-height: 1.75; }
  .bestrate-pop .btn-line { margin-top: 12px; }
  .bestrate-pop .bp-ask { margin-top: 10px; font-size: 13px; }
  .bestrate-pop .bp-note { margin-top: 10px; line-height: 1.65; }
  .bestrate-pop .bp-close { width: 40px; height: 40px; }
  .bestrate-pop .bp-close span { left: 12px; right: 12px; top: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .bestrate-pop { transition: none; transform: none; }
}

/* ============================================================
   ハンバーガーの×が押せない問題の修正（2026-09-09）
   .site-header は position:fixed + z-index:100 でスタッキングコンテキストを作るため、
   .nav-toggle の z-index:130 はヘッダーの内側でしか効かず、ページ全体では実効100。
   一方 .global-nav は </header> の外の兄弟で z-index:120。つまりメニューを開くと
   暗幕がヘッダーごと×を覆い、閉じるボタンが押せなくなる（実測：クリックハンドラ
   発火0回・nav-open が true のまま）。Escハンドラも無いため、脱出はメニュー内の
   リンクを踏むかリロードのみだった。
   メニューが開いている間だけヘッダーを暗幕の上に出す。is-solid の白背景と
   濃色ロゴは暗幕の上では読めないので、同時に透過＋白ロゴへ戻す
   （body.nav-open .nav-toggle{color:#fff} は既にあり、この状態を想定していた）。 */
body.nav-open .site-header {
  z-index: 125;
  background: transparent; box-shadow: none; backdrop-filter: none; color: #fff;
}
body.nav-open .logo-white { display: block; }
body.nav-open .logo-dark { display: none; }

/* ベストレートのポップアップを左サイドバーの外に出す（2026-09-10）。
   1025px 以上ではヘッダーが幅 --side-w の縦サイドバーになるので、left:24px のままだと
   サイドバー最下部の予約ボタン＝いちばん押してほしいものをポップアップ自身が覆う。
   ■ このブロックは**ファイル末尾に置くこと**。`.bestrate-pop`（0,1,0）と同詳細度なので、
     上の @media (min-width:1025px) の中に書いても、後ろにある素の .bestrate-pop に
     後勝ちで負けて効かない（実測：left が 24px のままだった）。 */
@media (min-width: 1025px) {
  .bestrate-pop { left: calc(var(--side-w) + 24px); }
}

/* 日本語の折り返しを文節で行う（2026-09-10・CEO指摘「お選びくだ／さい。」）。
   site.js が切ってよい位置に <wbr> を入れ、このクラスを付ける。
   keep-all でそれ以外の位置での折り返しを止め、overflow-wrap で溢れだけ救う。
   ■ overflow-wrap: break-word を必ず併記すること。1単位（例「お問い合わせください。」）が
     入り切らない狭い欄では、これが無いと横に溢れて画面が横スクロールする。
   ■ text-wrap: pretty は body から継承される（最終行が1〜2文字だけ残るのを抑える）。 */
/* 2026-09-16：word-break:keep-all は外した。
   keep-all は「CJK文字どうしの間では折らない」指定なので、文節spanを並べても
   **span と span の境目まで折れなくなり**、見出しが1行のまま画面外へ溢れる
   （実測：.hero-copy h1 の min-content が 151px→437px に膨らみビューポートを超えた）。
   改行を文節境界だけに限るのは .bs（white-space:nowrap）の役目で、keep-all は不要。 */
.jp-wrap { overflow-wrap: break-word; }
/* 文節そのもの。改行できるのは .bs と .bs の境目だけになる（約物の後でも割れない）。
   inline のままにすること。inline-block にすると字間・行揃えが変わる。 */
.bs { white-space: nowrap; }
/* 1文節が長すぎて nowrap にすると溢れる塊。keep-all で「どこでも折れる」のを止め、
   モジュールが入れた <wbr>（助詞のあと・形式名詞の前）だけを折り返し候補にする。
   それでも入り切らないときだけ overflow-wrap で救う（溢れるよりはマシ、の最終手段）。 */
.bs2 { word-break: keep-all; overflow-wrap: break-word; }
/* 「できるだけ前の行に入れ込む」＝貪欲詰め。body から継承する text-wrap:pretty は
   最終行を短くしないよう前の行から単語を下ろすので、ここで打ち消す（2026-09-16 CEO指示）。 */
.jp-wrap { text-wrap: wrap; }

/* 2026-09-16：balance（行長を揃える）は「できるだけ前の行に入れ込む」の逆なので撤去。
   折り返し位置は .bs（文節）が担保する。 */

/* 特定商取引法に基づく表記の一覧（2026-09-10）。
   Noël は運営代行のブランド名で、棟ごとに販売する事業者が異なるため、
   ブランドで1枚にまとめず各施設の表記へ渡す。器は既存の .spec-table をそのまま使う。 */
.legal-index dd { padding: 0; }
.legal-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
  padding: 16px 20px;
}
.legal-row + .legal-row { border-top: 1px solid var(--c-line); }
.legal-row-name { letter-spacing: .06em; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.legal-row-biz { font-size: 13.5px; opacity: .8; }
.legal-row:hover .legal-row-name { opacity: .7; }
@media (max-width: 600px) {
  .legal-index dt { padding: 14px 16px; }
  .legal-row { padding: 14px 16px; }
}

/* 宿泊約款（2026-09-11）。条文見出しと、施設別のご利用条件の表。
   ■ 表は必ず .terms-table-wrap（overflow-x:auto）で包む。6列あるため
     375px では収まらず、包まないとページ全体が横スクロールする。 */
.terms-h {
  font-size: clamp(17px, 2vw, 19px); font-weight: 600; letter-spacing: .08em;
  margin: clamp(40px, 5vw, 56px) 0 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--c-line);
  max-width: 840px; margin-inline: auto;
}
.terms-table-wrap { max-width: 840px; margin: 0 auto; overflow-x: auto; }
.terms-table { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 14px; }
.terms-table th, .terms-table td {
  border: 1px solid var(--c-line); padding: 12px 14px;
  text-align: left; vertical-align: top; line-height: 1.8;
}
.terms-table thead th { background: var(--c-accent-bg); font-weight: 500; letter-spacing: .08em; white-space: nowrap; }
.terms-table tbody th { font-weight: 400; }
.terms-table tbody th a { border-bottom: 1px solid var(--c-line); padding-bottom: 2px; }
.terms-table td { white-space: nowrap; }
.terms-table td:nth-child(4) { white-space: normal; min-width: 200px; }
/* 出典の無いセル。空欄にすると「ルールが無い」と読まれるため必ず文言を置く */
.terms-ask { font-size: 13px; opacity: .7; white-space: normal; }

/* ---------- 宿一覧：エリア区切り／PARTNERバッジ／設備チップ（2026-09-14 追加） ----------
   ・main 直下に <section> を増やさない（.section:nth-of-type(even) の地色が総入れ替えになるため）。
     エリアの区切りは .area-block（div）で行う。
   ・チップは「事実として自社ページ・提携先公式サイトに記載のあるものだけ」を出す。
     非表示＝無い、ではないので .list-note の注記を必ずセットで置くこと。
   ・アイコンは <svg><use href="#i-…"> のスプライト。実体は各HTMLの先頭 .icon-sprite。 */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.area-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin-bottom: clamp(40px, 6vw, 64px); }
.area-jump a { font-size: 12px; letter-spacing: .16em; line-height: 1; padding: 10px 18px; border: 1px solid rgba(0,0,0,.16); border-radius: 999px; color: inherit; }
.area-jump a:hover { border-color: var(--c-accent); color: var(--c-accent); opacity: 1; }

.area-block + .area-block { margin-top: clamp(64px, 9vw, 112px); }
.area-head { margin-bottom: clamp(28px, 4vw, 40px); }
.area-count { margin-top: 10px; font-size: 12px; letter-spacing: .12em; opacity: .7; }

.card figure { position: relative; }
.card-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-family: var(--font-en); font-size: 10px; letter-spacing: .18em; line-height: 1;
  padding: 6px 9px; border-radius: 2px;
  background: rgba(255,255,255,.92); color: var(--c-accent);
}

.card-specs { list-style: none; padding: 0; margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.card-specs li {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; letter-spacing: .04em; line-height: 1.4;
  padding: 5px 9px; border: 1px solid rgba(0,0,0,.13); border-radius: 999px; opacity: .92;
}
.cs-i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .72; }

.list-note { margin-top: clamp(40px, 5vw, 56px); font-size: 12px; line-height: 1.9; opacity: .7; }
.list-note + .list-note { margin-top: .6em; }

/* トップFV：キャッチの下に「何のサイトか」を1行で置く（2026-09-14 追加） */
.hero-note {
  margin-top: 16px; font-size: clamp(12px, 1.3vw, 14px); letter-spacing: .1em; line-height: 1.9;
  text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 2px 20px rgba(0,0,0,.5);
  max-width: 38em; margin-inline: auto;
}

/* ---------- エリアページ：アクセス／周辺／季節（2026-09-14 追加） ----------
   ・main 直下の <section> 本数と順序を固定して組むこと。
     `.section:nth-of-type(even){background:transparent}`(0,2,0) が `.section-tint`(0,1,0) に
     勝つため、地色を出せるのは **奇数番目の section だけ**。1本足すと以降が総入れ替わる。
     現行の並びは 1.intro(tint) / 2.access / 3.spots(tint) / 4.seasons / 5.hotels(tint)
     / 6.book-direct / 7.booking-cta。
   ・所要時間は必ず幅（約◯〜◯分）で書く。行楽期の渋滞で実測が大きくぶれるため。 */
.area-lead { max-width: 760px; margin: 0 auto; }
.area-lead p + p { margin-top: 1.5em; }

.access-table { max-width: 840px; margin: 0 auto; border-top: 1px solid var(--c-line); }
.access-table > div { display: grid; grid-template-columns: 170px 1fr; border-bottom: 1px solid var(--c-line); }
.access-table dt { padding: 20px; font-weight: 500; letter-spacing: .08em; background: rgba(0,0,0,.022); }
.access-table dd { padding: 20px; min-width: 0; }
.access-table dd li { position: relative; padding-left: 1.1em; }
.access-table dd li::before { content: "・"; position: absolute; left: 0; }
.access-table dd li + li { margin-top: .55em; }
/* 数字と単位は絶対に割らない（「約1時間／15分」のような割れ方を防ぐ） */
.access-table .num, .num { font-family: var(--font-en); letter-spacing: .04em; white-space: nowrap; }

.spot-list { max-width: 840px; margin: 0 auto; border-top: 1px solid var(--c-line); list-style: none; padding: 0; }
.spot-list > li { padding: 24px 4px; border-bottom: 1px solid var(--c-line); display: grid; grid-template-columns: 1fr auto; gap: 0 24px; }
.spot-name { font-size: 16.5px; font-weight: 500; letter-spacing: .06em; line-height: 1.7; }
.spot-time { font-family: var(--font-en); font-size: 13px; letter-spacing: .1em; color: var(--c-accent); white-space: nowrap; padding-top: .4em; }
.spot-desc { grid-column: 1 / -1; margin-top: 8px; font-size: 14.5px; line-height: 1.95; opacity: .9; }

.season-grid { max-width: 980px; margin: 0 auto; display: grid; gap: clamp(22px, 3vw, 34px); grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr)); }
.season-grid > * { min-width: 0; }
.season-card { border-top: 1px solid var(--c-line); padding-top: 18px; }
.season-label { font-family: var(--font-en); font-size: 11.5px; letter-spacing: .24em; color: var(--c-accent); }
.season-card h3 { margin-top: 9px; font-size: 15.5px; font-weight: 500; letter-spacing: .06em; line-height: 1.75; }
.season-card p { margin-top: 11px; font-size: 14px; line-height: 1.95; opacity: .9; }

.area-note { max-width: 840px; margin: clamp(28px, 4vw, 40px) auto 0; font-size: 12px; line-height: 1.9; opacity: .7; }

/* エリアページの狭幅対応。ここは **必ずファイル末尾の新しい @media** に書く。
   同じ詳細度なら後勝ちなので、上の素のルールより前の @media に書くと効かない。 */
@media (max-width: 720px) {
  .access-table > div { grid-template-columns: 1fr; }
  .access-table dt { padding: 16px 12px 6px; background: none; font-size: 14px; letter-spacing: .1em; }
  .access-table dd { padding: 0 12px 18px; }
  .spot-list > li { grid-template-columns: 1fr; }
  .spot-time { padding-top: 4px; order: -1; font-size: 12px; }
  .spot-desc { margin-top: 6px; }
}

/* ============================================================
   「AIに聞く」フローティング（2026-09-15 追加・retra.jp からの移植）
   ------------------------------------------------------------
   本体は site.js が body 直下に生成する。HTMLは触っていない。
   ■ z-index 92。.float-btns(90) より上、.sp-fixed-bar(95)/.site-header(100)/
     .bestrate-pop(110)/.global-nav(120) より下。
     上に置きすぎるとハンバーガーやベストレートの上に載ってしまう。
   ■ パネルを開くと右端の .float-btns と重なるので、body.ask-fab-open で引っ込める
     （.bestrate-pop が .sp-fixed-bar を隠すのと同じ作法）。
   ■ 767px以下は下端の .sp-fixed-bar の上へ逃がす。さらにベストレートのシートが
     開いている間は重なるのでボタンごと隠す。
   ■ 意匠は白のすりガラス。写真の上にも下地の生成り色の上にも載るため。
     白を濃くしすぎると透け感が消えてただの白ボタンになる。
   ============================================================ */
.ask-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 92;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .45s ease, transform .45s ease;
}
.ask-fab.is-shown { opacity: 1; transform: none; pointer-events: auto; }

.ask-fab-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; cursor: pointer;
  background: rgba(255,255,255,.74);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid var(--c-line); border-radius: 2px;
  color: var(--c-blk); font-family: var(--font-jp);
  font-size: 13px; letter-spacing: .14em; line-height: 1; white-space: nowrap;
  box-shadow: 0 6px 22px rgba(0,0,0,.10);
  transition: background .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.ask-fab-btn:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.ask-fab-star { width: 14px; height: 14px; flex: none; }

.ask-fab-panel {
  width: min(292px, calc(100vw - 48px));
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--c-line); border-radius: 2px;
  padding: 22px 20px; text-align: left;
  box-shadow: 0 10px 34px rgba(0,0,0,.13);
}
.ask-fab-panel[hidden] { display: none; }
.ask-fab-title { font-size: 14px; font-weight: 500; letter-spacing: .1em; }
.ask-fab-desc { margin-top: 6px; font-size: 12px; line-height: 1.85; opacity: .75; }
.ask-fab-list { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.ask-fab-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border: 1px solid var(--c-line); border-radius: 2px;
  background: rgba(255,255,255,.55);
  font-size: 13px; letter-spacing: .04em; color: var(--c-blk); white-space: nowrap;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.ask-fab-item:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; opacity: 1; }
.ask-fab-logo { width: 17px; height: 17px; flex: none; fill: currentColor; }
.ask-fab-copy {
  display: block; width: 100%; margin-top: 14px; padding: 0;
  background: none; border: 0; cursor: pointer; color: inherit;
  font-family: var(--font-jp); font-size: 12px; letter-spacing: .04em;
  text-align: center; text-decoration: underline; text-underline-offset: 3px; opacity: .75;
  transition: opacity .3s ease;
}
.ask-fab-copy:hover { opacity: 1; }

body.ask-fab-open .float-btns { opacity: 0; pointer-events: none; }
/* やどチャットの外部ウィジェット（.rag-embed-launcher / z-index 999999）と同居したときの逃げ。
   2026-09-15 以降、やどチャットが入っている GENSEN では .ask-fab 自体を出さないので
   現状このルールが効く場面は無い。**やどチャットが他の棟へ広がったときのために残している**
   （向こうの z-index には勝てないため、こちらから引っ込めるしか手がない）。 */
body.ask-fab-open .rag-embed-launcher,
body.ask-fab-open .rag-embed-widget { opacity: 0; pointer-events: none; }

/* 「AIに聞く」の狭幅・非対応環境の上書き。**ファイル末尾の新しい @media に置くこと**
   （同詳細度は後勝ちのため、前方の @media に書くと素のルールに負ける）。 */
@media (max-width: 767px) {
  .ask-fab { right: 16px; bottom: calc(92px + env(safe-area-inset-bottom)); }
  /* やどチャットのランチャー（bottom:89px・高さ54px）が居るページでは、その上へ */
  .ask-fab.has-chat { bottom: calc(158px + env(safe-area-inset-bottom)); }
  .ask-fab-btn { padding: 12px 18px; font-size: 12.5px; }
  body.bestrate-pop-open .ask-fab { opacity: 0; pointer-events: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ask-fab-btn { background: #fff; }
  .ask-fab-panel { background: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .ask-fab { transition: none; }
}

/* ---------- オーナー向け（2026-09-15 追加） ----------
   ■ トップは「入口だけ」。本文は /owners に出す（宿を探している人の文脈から外れるため）。
     グローバルナビ・ヘッダーからは外してあり、導線はトップ下部の帯とフッターだけ。
   ■ トップの帯は <section> のまま置き換えている。main 直下の section を増減させると
     `.section:nth-of-type(even)` が `.section-tint` に勝つ関係で以降の地色が総入れ替わる。 */
.owners-door { padding-top: 0; }
.owners-door-link {
  display: block; max-width: 840px; margin: 0 auto;
  border: 1px solid var(--c-line);
  padding: clamp(30px, 4.2vw, 48px) clamp(20px, 4vw, 48px);
  text-align: center; color: inherit;
  transition: background .4s ease, border-color .4s ease, color .4s ease, opacity .4s ease;
}
.owners-door-link:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; opacity: 1; }
.od-en { display: block; font-family: var(--font-en); font-size: 12px; letter-spacing: .28em; color: var(--c-accent); }
.owners-door-link:hover .od-en { color: #fff; opacity: .9; }
.od-jp { display: block; margin-top: 12px; font-size: clamp(19px, 2.3vw, 24px); letter-spacing: .12em; line-height: 1.7; }
.od-lead { display: block; margin-top: 12px; font-size: 13.5px; line-height: 1.9; opacity: .8; }
.od-more {
  display: inline-block; margin-top: 22px;
  font-family: var(--font-en); font-size: 12.5px; letter-spacing: .24em;
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
}

/* /owners の「Noëlがすること」3項目 */
.owners-steps {
  max-width: 960px; margin: clamp(40px, 5vw, 60px) auto 0;
  display: grid; gap: clamp(24px, 3vw, 36px);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.owners-steps > * { min-width: 0; }
.owners-step { border-top: 1px solid var(--c-line); padding-top: 20px; }
.os-num { font-family: var(--font-en); font-size: 12px; letter-spacing: .22em; color: var(--c-accent); }
.owners-step h2 { margin-top: 10px; font-size: 17px; font-weight: 500; letter-spacing: .08em; line-height: 1.7; }
.owners-step p { margin-top: 12px; font-size: 14.5px; line-height: 1.95; opacity: .9; }

/* トップのFVだけ、キャッチ〜英字〜説明1行の間を詰める（2026-09-16 CEO指摘）。
   ■ 見た目の空きの内訳（1440px実測）：h1 44px / line-height 1.9 ＝ 上下に約20pxの半行送りが付く。
     そこに .hero-sub の margin 18px と .hero-sub 自身の半行送り 9.5px が乗って、
     キャッチと英字の間が実測 約47px になっていた。マージンだけを詰めて 約35px にする。
   ■ h1 の line-height は触らない。スマホではキャッチが2行に折り返すので、ここを詰めると
     タイトル自身の行間まで詰まる。施設・エリアページの hero も同じ .hero-copy を使うため、
     **data-page="home" に限定**している（他ページのFVは従来どおり）。 */
body[data-page="home"] .hero-copy .hero-sub { margin-top: 6px; }
body[data-page="home"] .hero-note { margin-top: 8px; }

/* さらに詰める（2026-09-16 CEO指示・第2弾）。
   PC幅だけ追加で詰め、スマホは据え置き。
   ■ スマホではキャッチが2行に折り返す。h1 の行間（line-height 1.9 ＝ 26px時で約23px）より
     キャッチと英字の間を狭くすると、英字がキャッチの一部に見えてしまう。
     そのため 768px 未満は上のルール（6px / 8px ＝ 見た目25px / 21px）のまま。
   ■ PC（1440px実測）：キャッチ↔英字 35px→29px、英字↔説明 24px→20px。
     h1 の半行送り約20pxは残るので、マージン0が実質の下限。これ以上は line-height を触るしかない。 */
@media (min-width: 768px) {
  body[data-page="home"] .hero-copy .hero-sub { margin-top: 0; }
  body[data-page="home"] .hero-note { margin-top: 4px; }
}