@charset "utf-8";

/* =========================================================
   花の雲 — 共通スタイル
   フレームワークに依存しない、素のCSS。
   色・余白などの共通値は :root にまとめてあります。
   ========================================================= */

:root {
  --color-accent: #9c8061;        /* テーマの茶金色 */
  --color-accent-hover: #ad9071;
  --color-text: #333333;          /* 見出し・主要文字（原本 #333） */
  --color-muted-text: #666666;    /* 本文・補助文字（原本 #666） */
  --color-bg: #ffffff;
  --color-section-muted: #f8f8f8; /* うすいグレー背景（原本 #f8f8f8） */
  --color-dark: #222222;          /* フッター・濃い背景（原本 #222） */
  --header-height: 60px;
  --container: 1280px;        /* 内容幅1200px＋左右余白40px（原本と同じ） */
  --container-small: 980px;   /* 内容幅900px＋左右余白40px（原本と同じ） */
  --container-xsmall: 830px;  /* 内容幅750px＋左右余白40px（原本と同じ） */
  --font-serif: "Sawarabi Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
}

/* ---------- リセット・基本 ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-serif);
  color: var(--color-muted-text);   /* 本文は原本と同じ #666 */
  background: var(--color-bg);
  line-height: 1.5;                  /* 原本と同じ（16px→24px） */
  letter-spacing: normal;            /* 原本は字間なし */
  /* ※ -webkit-font-smoothing / text-rendering は指定しない。
        原本は標準描画（auto）。antialiased を入れると文字が細く薄く見えるため。 */
}

img { max-width: 100%; height: auto; vertical-align: middle; }

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}
a:hover { color: var(--color-accent-hover); }

h1, h2, h3 { font-weight: normal; line-height: 1.5; color: var(--color-text); }  /* 見出しは原本と同じ #333 */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 15px;   /* 原本と同じ左右余白（スマホ 15px） */
}
@media (min-width: 640px) { .container { padding-inline: 30px; } }  /* タブレット 30px */
@media (min-width: 960px) { .container { padding-inline: 40px; } }  /* PC 40px */
.container--small { max-width: var(--container-small); }
.container--xsmall { max-width: var(--container-xsmall); }

.section { padding-block: 90px; }
.section--small { padding-block: 50px; }
.section--muted { background: var(--color-section-muted); }
.text-center { text-align: center; }

/* スマホでだけ改行する <br class="br-sp"> */
.br-sp { display: none; }
@media (max-width: 640px) { .br-sp { display: inline; } }

/* 画面には表示しないが読み上げ用に残すテキスト */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- ボタン ---------- */
.btn {
  display: inline-block;
  padding: 12px 30px;
  border: 1px solid var(--color-accent);
  border-radius: 2px;
  color: var(--color-accent);
  background: transparent;
  font-size: 0.875rem;   /* 原本のボタン 14px */
  letter-spacing: normal;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.btn:hover { background: var(--color-accent); color: #fff; }

.btn--filled { background: var(--color-accent); color: #fff; }
.btn--filled:hover { background: var(--color-accent-hover); color: #fff; }



/* =========================================================
   ヘッダー（共通部品）
   ========================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-height);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 28px;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
/* ヒーローに重なっている間は透明・白文字 */
.site-header,
.site-header a { color: #fff; }
.site-header .brand { text-shadow: 0 1px 6px rgba(0,0,0,0.35); }

/* スクロール後は白背景・濃い文字 */
.site-header.is-scrolled {
  background: rgba(255,255,255,0.96);
  box-shadow: 0 1px 8px rgba(0,0,0,0.08);
}
.site-header.is-scrolled,
.site-header.is-scrolled a { color: var(--color-text); }
.site-header.is-scrolled .brand { text-shadow: none; }

.brand { margin: 0; line-height: 0; }
.brand a { display: inline-block; }
.brand__logo { width: 100px; height: auto; display: block; }
/* 通常（ヒーローに重なる間）は白ロゴ、黒ロゴは隠す */
.brand__logo--black { display: none; }
/* スクロール後・文章ページ（白背景）では黒ロゴに切替 */
.site-header.is-scrolled .brand__logo--white,
.no-hero .brand__logo--white { display: none; }
.site-header.is-scrolled .brand__logo--black,
.no-hero .brand__logo--black { display: block; }

.global-nav ul {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.global-nav a {
  color: inherit;
  font-size: 0.875rem;   /* 原本 14px */
  letter-spacing: normal;
}
.global-nav a:hover { color: var(--color-accent-hover); }
.global-nav .icon { width: 20px; height: 20px; display: block; }

/* ハンバーガーボタン（スマホ用） */
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  border: 0; background: transparent; cursor: pointer;
  color: #fff;   /* デフォルト白（現行同様） */
  padding: 8px;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle span { position: relative; }
.nav-toggle span::before { position: absolute; top: -7px; width: 100%; }
.nav-toggle span::after  { position: absolute; top: 7px;  width: 100%; }

/* ヒーローが無いページ（文章ページ）は、ヘッダーを最初から白背景・濃い文字に */
body.no-hero { padding-top: var(--header-height); }
.no-hero .site-header {
  background: rgba(255,255,255,0.96);
  box-shadow: 0 1px 8px rgba(0,0,0,0.08);
}
.no-hero .site-header,
.no-hero .site-header a { color: var(--color-text); }
.no-hero .site-header .brand { text-shadow: none; }
/* ハンバーガー：スクロール時・文章ページは灰色（現行同様） */
.site-header.is-scrolled .nav-toggle,
.no-hero .nav-toggle { color: var(--color-muted-text); }

/* 文章ページの見出しエリア */
.page-header {
  text-align: center;
  padding: 56px 20px 8px;
}
.page-header h1 {
  font-size: 1.9rem;
  letter-spacing: 0.12em;
  margin: 0;
}
.page-header p { color: var(--color-muted-text); margin: 12px 0 0; }

/* ---------- オフキャンバス（スマホメニュー） ---------- */
.offcanvas {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
}
.offcanvas.is-open { visibility: visible; pointer-events: auto; }

.offcanvas__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.offcanvas.is-open .offcanvas__overlay { opacity: 1; }

.offcanvas__panel {
  position: absolute;
  top: 0; right: 0;
  width: 280px;
  max-width: 80vw;
  height: 100%;
  background: #fff;
  padding: 28px 24px;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  text-align: center;
}
.offcanvas.is-open .offcanvas__panel { transform: translateX(0); }

.offcanvas__close {
  position: absolute; top: 14px; right: 16px;
  width: 36px; height: 36px;
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.6rem; line-height: 1; color: var(--color-text);
}
.offcanvas__logo { margin: 10px 0 24px; }
.offcanvas__logo img { width: 100px; }

.offcanvas nav ul { list-style: none; margin: 0; padding: 0; }
.offcanvas nav li { margin-block: 4px; }
.offcanvas nav a {
  display: block;
  padding: 12px 0;
  color: var(--color-text);
  font-size: 1.05rem;
}
.offcanvas__divider { height: 1px; background: #e5e5e5; margin: 18px 0; }
.offcanvas__tel { font-size: 1.2rem; color: var(--color-accent); }
.offcanvas__hours { color: var(--color-muted-text); font-size: 0.8rem; }
.offcanvas__social { display: flex; justify-content: center; gap: 20px; margin-top: 16px; }
.offcanvas__social .icon { width: 26px; height: 26px; }

/* =========================================================
   ヒーロー（トップのスライドショー）
   ========================================================= */
.hero {
  position: relative;
  height: 100vh;
  min-height: 480px;
  overflow: hidden;
  background: #000;
}
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
}
/* 新しいスライドは下に不透明で待機（フェードしない） */
.hero__slide.is-active {
  opacity: 1;
  z-index: 1;
}
/* 前のスライドが上でフェードアウトして、下の新スライドが現れる（原本と同じ） */
.hero__slide.is-leaving {
  opacity: 0;
  z-index: 2;
  transition: opacity 1.4s ease;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Ken Burns — 表示中・退場中とも継続。
   MV（各ページ上部の大きいスライド）＝ズームイン、本文中の帯スライダー＝ズームアウト（原本どおり） */
.hero__slide.is-active .hero__bg,
.hero__slide.is-leaving .hero__bg {
  animation: kenburns-in 8s ease-out forwards;   /* MV：通常→拡大 */
}
.hero--band .hero__slide.is-active .hero__bg,
.hero--band .hero__slide.is-leaving .hero__bg,
.room-slider .hero__slide.is-active .hero__bg,
.room-slider .hero__slide.is-leaving .hero__bg {
  animation: kenburns-out 8s ease-out forwards;  /* 本文スライダー・客室詳細スライダー：拡大→通常 */
}
@keyframes kenburns-in {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}
@keyframes kenburns-out {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}

.hero__title {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  /* 縦書きの白文字。元サイトと同じく原寸で表示（引き伸ばさない） */
  width: auto;
  max-width: 80%;
  max-height: 60vh;
}
.hero__caption {
  position: absolute;
  margin: 0;
  bottom: 60px; left: auto; right: 30px;   /* 現行と同じ 右下 */
  text-align: right;
  color: #fff;
  letter-spacing: 0.2em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

/* 前後の矢印 */
.hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 40px;        /* タップ領域。矢印本体は小さく（現行に合わせる） */
  display: flex; align-items: center; justify-content: center;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.7);     /* 現行と同じ白70% */
  cursor: pointer;
  opacity: 0;                       /* 初期は非表示（現行同様） */
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 3;
}
/* PC：MVにホバーで矢印表示 */
@media (hover: hover) {
  [data-hero]:hover .hero__nav { opacity: 1; pointer-events: auto; }
}
/* スマホ：MVをタップで矢印表示（JSが nav-visible を付与） */
[data-hero].nav-visible .hero__nav { opacity: 1; pointer-events: auto; }
.hero__nav--prev { left: 14px; }
.hero__nav--next { right: 14px; }
.hero__nav svg { width: 11px; height: auto; }   /* 細い矢印を等倍相当に（viewBox 14:24） */

/* ドット */
.hero__dots {
  display: none;   /* ページネーションは表示しない（矢印で操作） */
  position: absolute;
  bottom: 18px; left: 0; right: 0;
  justify-content: center;
  gap: 10px;
  list-style: none;
  margin: 0; padding: 0;
  z-index: 3;
}
.hero__dots button {
  width: 10px; height: 10px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: transparent;
  padding: 0; cursor: pointer;
  transition: background 0.2s ease;
}
.hero__dots button[aria-current="true"] { background: #fff; }

/* ---------- 本文中の帯スライダー（料理写真など。全画面ではなく高さ固定） ---------- */
.hero.hero--band {
  height: 450px;
  min-height: 0;        /* 全画面ヒーローの min-height:480px を打ち消す */
  max-width: 900px;
  margin: 40px auto 0;
}
@media (max-width: 640px) { .hero.hero--band { height: 280px; } }

/* ---------- 下層ページのスライドショー（タイトルは右上） ---------- */
.hero--sub { height: calc(100vh - 60px); max-height: 800px; min-height: 420px; }   /* 現行同様、見える高さは最大800pxにクリップ（PCでワイド）。※2026-07-23実測：現行は 2000×1150 でMV=800px（直後セクションがtop=860）。max-heightを外すと画面いっぱいに伸びて現行とズレるので絶対に消さないこと */
.hero__title--corner {
  top: 30px;          /* 現行と同じ 右上 */
  left: auto;
  right: 30px;
  transform: none;
  max-height: 40vh;
}

/* =========================================================
   汎用セクション（濃い背景・白文字）
   ========================================================= */
.section--dark { color: rgba(255,255,255,0.7); }  /* 原本の実測値 */
/* 濃い背景セクションの見出しは白（グローバルの #333 見出し色を打ち消す） */
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: rgba(255,255,255,0.7); }
.section--dark a { color: #e8ddcf; }
.section--dark a:hover { color: #fff; }
.section--dark .lead { color: rgba(255,255,255,0.7); }
/* 濃いグレーの模様は背景画像（原本の gray.png と同一）のみ。原本は背景色を持たない */

.section-title {
  font-size: 1.7rem;    /* 原本の見出し 27.2px（実測） */
  text-align: center;
  margin-bottom: 20px;
}
.lead {
  font-size: 1.5rem;    /* 原本のリード 24px */
  color: var(--color-muted-text);
}
.note {
  font-size: 0.9rem;
  line-height: 1.8;
}

/* ---------- カード（画像＋文章） ---------- */
.cards {
  display: grid;
  gap: 40px;
  margin-top: 40px;
}
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin-inline: auto; }
.cards--5 { grid-template-columns: repeat(5, 1fr); gap: 20px; }  /* 本館 客室一覧＝5室横一列（原本と同じ） */

.card__media img {
  width: 100%;
  height: auto;          /* 原寸比のまま表示（切り抜かない） */
  display: block;
}
.card__title {
  font-size: 1.1rem;
  margin: 18px 0 10px;
}
.card__text { font-size: 0.95rem; }

/* ---------- 花の雲便り（記事一覧＝4列グリッド／原本と同じ） ---------- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 30px;
}
@media (max-width: 960px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .news-grid { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; } }
.news-card a { display: block; color: var(--color-text); }
.news-card a:hover { color: var(--color-text); opacity: 0.8; }
.news-card__thumb {
  width: 100%;
  aspect-ratio: 1 / 1;   /* 正方形サムネ（元画像も400×400の正方形） */
  object-fit: cover;
  display: block;
}
.news-card__meta { margin: 12px 0 0; font-size: 0.78rem; }
.news-card__cat {
  display: inline-block; color: #fff; background: var(--color-accent);
  padding: 2px 10px; margin-right: 8px;
}
.news-card__date { color: var(--color-accent); }
.news-card__title { font-size: 0.95rem; margin: 6px 0 0; line-height: 1.6; }

/* ---------- 花の雲便り（旧・縦リスト。詳細ページで未使用なら残置可） ---------- */
.topics-list {
  max-width: 820px;
  margin: 20px auto 0;
  list-style: none;
  padding: 0;
}
.topics-list li { border-bottom: 1px solid #e5e5e5; }
.topics-list a {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 22px 4px;
  color: var(--color-text);
}
.topics-list a:hover { color: var(--color-text); opacity: 0.75; }
.topics-list__thumb {
  flex: 0 0 110px;
  width: 110px; height: 110px;
  object-fit: cover;
}
.topics-list__date { font-size: 0.85rem; color: var(--color-accent); }
.topics-list__cat {
  display: inline-block;
  font-size: 0.75rem;
  color: #fff;
  background: var(--color-accent);
  padding: 2px 10px;
  margin-left: 8px;
}
.topics-list__title { font-size: 1.1rem; margin: 8px 0 0; }

/* 記事本文（花の雲便り 詳細） */
.article { max-width: 760px; margin-inline: auto; }


.article img { margin: 16px 0; }
.article p { margin: 0 0 16px; }

@media (max-width: 640px) {
  .topics-list a { gap: 16px; }
  .topics-list__thumb { flex-basis: 80px; width: 80px; height: 80px; }
}

/* ---------- 文章ページ（プライバシー等） ---------- */
.prose { max-width: 800px; margin-inline: auto; }
.prose h2 {
  font-size: 1.2rem;
  margin: 40px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e5e5;
}
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 16px; }
.prose ol, .prose ul { margin: 0 0 16px; padding-left: 1.5em; }
.prose li { margin-bottom: 8px; }
.prose small { color: var(--color-muted-text); }

/* ---------- FAQ（アコーディオン） ---------- */
.faq {
  max-width: 760px;
  margin: 30px auto 0;
}
.faq details {
  border-bottom: 1px solid #e5e5e5;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 40px 20px 4px;
  position: relative;
  font-size: 1.05rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q."; color: var(--color-accent); margin-right: 10px; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 8px; top: 50%;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--color-accent);
  border-bottom: 1.5px solid var(--color-accent);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq__body {
  padding: 0 4px 22px 26px;
  color: var(--color-muted-text);
}

/* ---------- 地図の埋め込み ---------- */
.map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-width: 900px;
  margin: 30px auto 0;
}
.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- 外部フォーム埋め込み ---------- */
.form-embed {
  max-width: 720px;
  margin: 20px auto 0;
}
.form-embed iframe {
  width: 100%;
  height: 1200px;
  max-width: 100%;
  border: 0;
}

/* ---------- 見出し下の小さな飾りアイコン（原本と同じ20px） ---------- */
.ornament { width: 20px; height: 20px; display: inline-block; }

/* 2列レイアウト（PCは横並び、スマホは縦。交通アクセスの地図・交通手段など） */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  margin-top: 30px;
  max-width: 846px;      /* 原本のカラム幅 403px×2 ＋ gap 40px */
  margin-inline: auto;
}
.two-col--center { text-align: center; }
.two-col img { margin-inline: auto; }
@media (max-width: 768px) { .two-col { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- 注意書きボックス ---------- */
.notice {
  max-width: 760px;
  margin: 40px auto 0;
  padding: 22px 26px;
  background: #f8f8f8;
  border-left: 3px solid var(--color-accent);
  font-size: 0.92rem;
  line-height: 1.9;
}
.notice__title { font-weight: bold; margin: 0 0 8px; }

/* ---------- 仕様テーブル（泉質・効能など） ---------- */
.spec-table {
  width: 100%;
  max-width: 760px;
  margin: 30px auto 0;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.spec-table th,
.spec-table td {
  border: 1px solid #e5e5e5;
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
}
.spec-table th {
  width: 28%;
  background: #f0f0f0;
  font-weight: normal;
  white-space: nowrap;
}

/* ---------- 料金表 ---------- */
.price-table {
  width: 100%;
  max-width: 620px;
  margin: 30px auto 16px;
  border-collapse: collapse;
  text-align: center;
}
.price-table th,
.price-table td {
  border: 1px solid #e5e5e5;
  padding: 14px 18px;
}
.price-table thead th { background: #f0f0f0; font-weight: normal; }
.price-table tbody th { background: #f8f8f8; font-weight: normal; white-space: nowrap; }
.price-table td { color: var(--color-accent); }
.price-note { max-width: 620px; margin: 0 auto; font-size: 0.85rem; color: var(--color-muted-text); line-height: 1.9; }

/* ---------- 料金・メニューリスト ---------- */
.price-list {
  max-width: 760px;
  margin: 30px auto 0;
  list-style: none;
  padding: 0;
}
.price-list li {
  padding: 18px 4px;
  border-bottom: 1px solid #e5e5e5;
}
.price-list__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  font-size: 1.05rem;
  margin-bottom: 6px;
}
.price-list__price { color: var(--color-accent); white-space: nowrap; }
.price-list__desc { font-size: 0.92rem; color: var(--color-muted-text); margin: 0; }

/* ---------- 写真ギャラリー ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 40px;
}
.gallery img {
  width: 100%;
  height: auto;          /* 原寸比のまま表示（切り抜かない） */
  display: block;
}

/* ---------- 客室詳細 ---------- */
.breadcrumb { font-size: 0.85rem; color: var(--color-muted-text); margin: 0 0 6px; }
.room-detail__name { font-size: 1.9rem; letter-spacing: 0.1em; margin: 0 0 14px; }

/* ---------- 客室カード（一覧） ---------- */
.room-card { text-align: center; }
.room-card__media img {
  width: 100%;
  height: auto;          /* 原寸比のまま表示（切り抜かない） */
  display: block;
}
.room-card__name {
  font-size: 1.3rem;
  margin: 18px 0 6px;
}
.room-card__name a { color: inherit; }
.room-card__meta { margin: 0 0 16px; }
.room-card__meta a { color: inherit; }

/* =========================================================
   予約特典・コンセプト（背景付きセクション）
   ========================================================= */
.bg-section {
  background-size: cover;
  background-position: center;
}
.benefit { color: var(--color-muted-text); }  /* 原本 #666 */
.benefit h2,
.concept h2 { font-size: 1.7rem; margin-bottom: 24px; }   /* 原本 27.2px（実測） */
.benefit .lead,
.concept h2 small {
  display: inline-block;
  font-size: 1.5rem;    /* 原本 24px */
  color: var(--color-muted-text);
}
.benefit p { margin-block: 12px; }
.benefit .tel { font-size: 1.4rem; }
.benefit small { color: var(--color-muted-text); font-size: 0.82rem; }
.concept h2 small { font-size: 1.36rem; margin-top: 10px; line-height: 1.8; }  /* 原本 21.76px（実測） */
.concept p { margin-block: 16px; }

/* =========================================================
   サービス紹介（画像＋テキスト交互）
   ========================================================= */
.feature {
  display: grid;
  grid-template-columns: 3fr 2fr;
  align-items: center;
  padding-block: 70px;   /* セクション間の余白（原本と同じ上下70px。横は画像フルブリードのまま） */
}
.feature__media img {
  width: 100%;
  height: auto;         /* 画像本来の縦横比で表示（トリミングしない） */
  display: block;
}
.feature__body {
  padding: 48px 40px;   /* 左右は原本と同じ40px（テキスト幅432pxになる） */
  text-align: center;
}
.feature__title { margin: 0 0 28px; }
.feature__title img { width: auto; }   /* 原本は等倍表示。高さを縮めない */
.feature__desc { margin-bottom: 28px; }

/* 偶数セクションは画像を右側に */
/* 画像を右側に。列幅も入れ替えて、画像は常に大きい方の列(3fr)に置く */
.feature--reverse { grid-template-columns: 2fr 3fr; }
.feature--reverse .feature__media { order: 2; }
.feature--reverse .feature__body  { order: 1; }

/* =========================================================
   フッター（共通部品）
   ========================================================= */
.site-footer__info {
  background: var(--color-section-muted);
  padding-block: 40px;
}
.site-footer__info .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.site-footer__name { font-size: 1.5rem; margin: 0 0 4px; }   /* 原本 24px */
.site-footer__addr { margin: 0; color: var(--color-muted-text); }

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0; padding: 0;
}
.footer-nav a { font-size: 0.92rem; }
.footer-nav .icon { width: 18px; height: 18px; display: block; }

.site-footer__copyright {
  background: var(--color-dark);
  color: #ddd;
  text-align: center;
  padding: 14px;
  font-size: 0.8rem;
}

/* スマホ下部固定バー */
.mobile-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
}
.mobile-bar a {
  flex: 1;
  text-align: center;
  padding: 14px 4px;
  color: #fff;
  font-size: 0.9rem;
}
.mobile-bar a:hover { color: #fff; opacity: 0.9; }
.mobile-bar__book { background: var(--color-accent); }
.mobile-bar__tel  { background: #666666; }
.mobile-bar__access { background: #888888; }

/* トップへ戻る */
.to-top {
  position: fixed;
  right: 16px; bottom: 16px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(43,39,35,0.85);
  color: #fff;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 80;
}
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top svg { width: 18px; height: 10px; }

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width: 960px) {
  .global-nav { display: none; }   /* PC用メニューを隠す */
  .nav-toggle { display: block; }

  .feature { grid-template-columns: 1fr; padding-block: 40px; }
  .feature__media { order: 1 !important; }
  .feature__body  { order: 2 !important; padding: 40px 24px; }

  .section { padding-block: 60px; }
  .site-footer__info .container { flex-direction: column; text-align: left; align-items: flex-start; }
  .footer-nav { justify-content: flex-start; }

  .mobile-bar { display: flex; }
  .site-footer__copyright { padding-bottom: 70px; } /* 固定バーの分の余白 */
  .to-top { bottom: 70px; }

  .cards--3, .cards--2 { grid-template-columns: 1fr; gap: 32px; }
  .cards--5 { grid-template-columns: repeat(2, 1fr); gap: 24px; }  /* スマホは2列（原本と同じ） */
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 6px; }
}

/* ===== 客室詳細ページ（本館各室） ===== */
.room-heading { padding-block: 50px 0; }
.room-heading__label { margin: 0; font-size: 1.05rem; color: var(--color-text); }
.divider-logo {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin: 16px 0 6px;
}
.divider-logo::before, .divider-logo::after {
  content: ""; height: 1px; width: 56px; background: #d6d6d6;
}
.divider-logo img { width: 32px; height: 32px; }

/* 写真スライダー｜スペック表 の2カラム（原本 3:2） */
.room-cols {
  display: grid; grid-template-columns: 3fr 2fr; gap: 40px;
  align-items: start; margin-top: 30px;
}
.room-slider {
  position: relative; overflow: hidden; background: #000;
  aspect-ratio: 3 / 2;   /* 写真と同じ横長3:2＝切り取りなしで全体が見える */
}
.room-cols__spec .spec-table { margin-top: 0; }
.room-cols__spec .btn { display: block; text-align: center; margin-top: 20px; }

/* 間取り図｜家具・設備・備品 の2カラム */
.room-cols2 {
  display: grid; grid-template-columns: 1fr 3fr; gap: 40px;
  align-items: start; max-width: 960px; margin: 56px auto 0;
}
.madori img { width: 100%; height: auto; display: block; }

@media (max-width: 780px) {
  .room-cols { grid-template-columns: 1fr; gap: 24px; }
  .room-cols2 { grid-template-columns: 1fr; gap: 20px; }
  .madori { max-width: 240px; margin-inline: auto; }
}
ul.price-note { text-align: left; padding-left: 1.4em; }
ul.price-note li { margin: 3px 0; }

/* 別荘詳細：コンテンツ全体が濃い背景（原本の実測値 #202020／文字は白70%）
   ※「他の客室タイプ」はこの外＝白背景（原本と同じ） */
.villa-dark { background: #202020; color: rgba(255,255,255,0.7); }
.villa-dark h1, .villa-dark h2, .villa-dark h3,
.villa-dark .room-heading__label { color: rgba(255,255,255,0.7); }
.villa-dark .divider-logo::before,
.villa-dark .divider-logo::after { background: rgba(255,255,255,0.2); }
/* 表は背景なし・白70%文字・薄い白の罫線（原本の実測値） */
.villa-dark .spec-table th, .villa-dark .spec-table td,
.villa-dark .price-table th, .villa-dark .price-table td,
.villa-dark .price-table thead th {
  background: transparent; color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.2);
}
.villa-dark .spec-table tr, .villa-dark .price-table tr { border-color: rgba(255,255,255,0.2); }
.villa-dark .price-note { color: rgba(255,255,255,0.7); }
.room-heading--dark { padding-block: 40px; }
/* 文字サイズ・色はすべて原本の実測値 */
.villa-dark .room-heading__label { font-size: 1.5rem; }                    /* 原本 24px・白70% */
.villa-dark .room-detail__name {                                           /* 原本 25.6px・白100%・字間なし */
  font-size: 1.6rem; color: #fff; letter-spacing: normal;
}
.villa-catch {                                                             /* 「贅を極めた…」原本 24px・白70% */
  font-size: 1.5rem; color: rgba(255,255,255,0.7);
  text-align: center; margin: 0 0 24px; font-weight: normal; line-height: 1.5;
}
.villa-dark .section-title { font-size: 1.7rem; color: #fff; }             /* 「別荘 料金表」原本 27.2px・白100% */
.villa-dark .villa-lead { color: rgba(255,255,255,0.7); }                  /* 説明文 原本 白70% */
/* room-cols内のサブスライダーは全幅制限・中央marginを解除（カラム幅いっぱいに） */
.room-cols .hero--band { max-width: none; margin: 0; height: auto; aspect-ratio: 3 / 2; }

/* 原本の「薄い模様」タイル背景（原本の muted.png と同一画像） */
.bg-muted { background-image: url(/assets/images/bg/bg-benefit.png); background-repeat: repeat; background-size: auto; }


/* 濃い背景のセクション内でも、茶色の塗りボタンの文字は白に保つ */
.section--dark .btn--filled,
.villa-dark .btn--filled { color: #fff; }

/* ---------- 花の雲便り：記事詳細（すべて原本の実測値） ---------- */
.article__title {                      /* 原本 42px・#333・左寄せ */
  font-size: 2.625rem; color: var(--color-text); text-align: left;
  margin: 0 0 20px; line-height: 1.3; font-weight: normal;
}
.article__meta { font-size: 0.875rem; color: var(--color-text); margin: 0 0 20px; }  /* 原本 14px・#333 */
.article__label {                      /* 原本 背景#9c8061・白・14px・padding 0 10px */
  display: inline-block; background: var(--color-accent); color: #fff;
  font-size: 0.875rem; padding: 0 10px; margin-left: 6px; line-height: 1.8;
}
.article__image { text-align: center; margin-block: 20px; }   /* 原本 画像は中央 */
.article__body { font-size: 1rem; color: var(--color-muted-text); line-height: 1.5; }  /* 原本 16px/#666/24px */
.article p.article__back { text-align: right; margin-top: 56px; }   /* .article p より優先させる。上の余白を確保 */
@media (max-width: 640px) { .article__title { font-size: 1.8rem; } }

/* ヘッダー・フッターのメニューだけ、細めの描画にする（依頼者のご希望）
   ※本文は原本どおりの標準描画のまま */
.global-nav,
.footer-nav,
.offcanvas nav { -webkit-font-smoothing: antialiased; }

/* No.9 交通：ボタン2つの間に余白（スマホで密着しないよう） */
.btn-group { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* No.5・No.4・No.7 スマホ幅：見出し・リードは中央のまま、説明文だけ左揃え（現行同様） */
@media (max-width: 767px) {
  .tx-sp-left { text-align: left; }
  .feature__desc { text-align: left; }
}

/* No.10 スマホ幅：スペック表を「見出し／詳細」の縦並びにする（現行同様） */
@media (max-width: 640px) {
  .spec-table th, .spec-table td { display: block; width: 100%; }
  .spec-table th { white-space: normal; border-bottom: 0; }
  .spec-table td { border-top: 0; }
}

/* 特別料理：スマホで2列（現行同様。他の3枚カードは1列のまま） */
@media (max-width: 640px) {
  .cards--sp2 { grid-template-columns: 1fr 1fr; gap: 16px; }
}