@charset "utf-8";

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

:root {
  --color-accent: #9c8061;        /* テーマの茶金色 */
  --color-accent-hover: #ad9071;
  --color-text: #2d2120;          /* 本文の文字色 */
  --color-muted-text: #6b625b;
  --color-bg: #ffffff;
  --color-section-muted: #f6f3ef; /* うすいクリーム色の背景 */
  --color-dark: #2b2723;          /* フッター・濃い背景 */
  --header-height: 60px;
  --container: 1200px;
  --container-small: 780px;
  --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-text);
  background: var(--color-bg);
  line-height: 1.9;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
.container--small { max-width: var(--container-small); }

.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.9rem;
  letter-spacing: 0.1em;
  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; }

.btn--light { border-color: #fff; color: #fff; }
.btn--light:hover { background: #fff; color: var(--color-text); }

/* =========================================================
   ヘッダー（共通部品）
   ========================================================= */
.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.95rem;
  letter-spacing: 0.08em;
}
.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;
  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; }

/* 文章ページの見出しエリア */
.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: #e5ddd4; 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 {
  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;
  bottom: 40px; left: 0; right: 0;
  text-align: center;
  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: 44px; height: 44px;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  z-index: 3;
}
.hero__nav:hover { opacity: 1; }
.hero__nav--prev { left: 10px; }
.hero__nav--next { right: 10px; }
.hero__nav svg { width: 100%; height: 100%; }

/* ドット */
.hero__dots {
  position: absolute;
  bottom: 18px; left: 0; right: 0;
  display: flex;
  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); min-height: 420px; }
.hero__title--corner {
  top: 22%;
  left: auto;
  right: 8%;
  transform: none;
  max-height: 40vh;
}

/* =========================================================
   汎用セクション（濃い背景・白文字）
   ========================================================= */
.section--dark { color: #fff; }
.section--dark a { color: #e8ddcf; }
.section--dark a:hover { color: #fff; }
.section--dark .lead { color: #fff; }
.bg-gray { background-color: #4a443e; } /* 背景画像が無くても濃色になる保険 */

.section-title {
  font-size: 1.7rem;
  text-align: center;
  margin-bottom: 20px;
}
.lead {
  font-size: 1.15rem;
  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; }

.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; }

/* ---------- 花の雲便り（記事一覧） ---------- */
.topics-list {
  max-width: 820px;
  margin: 20px auto 0;
  list-style: none;
  padding: 0;
}
.topics-list li { border-bottom: 1px solid #e5ddd4; }
.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__meta { color: var(--color-accent); font-size: 0.9rem; }
.article__title { font-size: 1.6rem; margin: 8px 0 24px; }
.article img { margin: 16px 0; }
.article p { margin: 0 0 16px; }
.article__back { margin-top: 40px; text-align: center; }

@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 #e5ddd4;
}
.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 #e5ddd4;
}
.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;
}

/* ---------- アクセスの地図画像（トリミングせず原寸比で） ---------- */
.map-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 30px;
}
.map-images figure { margin: 0; text-align: center; }
.map-images img {
  width: 100%;
  height: auto;              /* 地図は縦横比を保って全体表示 */
  border: 1px solid #e5ddd4;
}
.map-images figcaption {
  font-size: 0.85rem;
  color: var(--color-muted-text);
  margin-top: 6px;
}
@media (max-width: 640px){ .map-images { grid-template-columns: 1fr; } }

/* ---------- 注意書きボックス ---------- */
.notice {
  max-width: 760px;
  margin: 40px auto 0;
  padding: 22px 26px;
  background: #f6f3ef;
  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 #e0d8cd;
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
}
.spec-table th {
  width: 28%;
  background: #efe9e1;
  font-weight: normal;
  white-space: nowrap;
}

/* ---------- 料金・メニューリスト ---------- */
.price-list {
  max-width: 760px;
  margin: 30px auto 0;
  list-style: none;
  padding: 0;
}
.price-list li {
  padding: 18px 4px;
  border-bottom: 1px solid #e5ddd4;
}
.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-text); }
.benefit h2,
.concept h2 { font-size: 1.7rem; margin-bottom: 24px; }
.benefit .lead,
.concept h2 small {
  display: inline-block;
  font-size: 1.05rem;
  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 { margin-top: 10px; line-height: 1.8; }
.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 56px;
  text-align: center;
}
.feature__title { margin: 0 0 28px; }
.feature__title img { max-height: 60px; 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.25rem; margin: 0 0 4px; }
.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: #6b625b; }
.mobile-bar__access { background: #857a6f; }

/* トップへ戻る */
.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: center; }
  .footer-nav { justify-content: center; }

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

  .cards--3, .cards--2 { grid-template-columns: 1fr; gap: 32px; }
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .hero__title--corner { right: 50%; transform: translateX(50%); top: 20%; }
}