/* ============================================================
   テンクウ de メイソウ 共通スタイル
   Tailwind（CDN）で足りない「状態による見た目の変化」だけを
   ここで補います。色や余白の大半は各HTML内のclassで指定しています。
   ============================================================ */

:root {
  --cream: #FAF6EC;
  --sand: #F2ECDD;
  --ink: #242822;
  --green: #1D3B37;
  --green-dark: #142824;
  --muted: #484D46;
  --gold: #B08E52;
}

/* Tailwind(CDN)の読み込み前でも背景が白く光らないように */
html { scroll-behavior: smooth; }
body { background: var(--cream); margin: 0; }

/* 固定ヘッダーの高さ分、アンカー移動時に余白をとる */
section[id] { scroll-margin-top: 72px; }
#instagram { scroll-margin-top: 90px; }

/* ===== ヘッダー（トップ時は透明／スクロール時はクリーム色） ===== */
#site-header { transition: background-color .4s ease, backdrop-filter .4s ease; }
#site-header.is-scrolled {
  background: rgba(250, 246, 236, .95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ロゴ文字・ナビ・ボタンの色は、スクロール状態で切り替える */
#site-header .brand-name { color: #fff; transition: color .3s; }
#site-header.is-scrolled .brand-name { color: var(--green); }

#site-header .nav-link { color: #fff; transition: color .3s, opacity .3s; }
#site-header .nav-link:hover { opacity: .7; }
#site-header.is-scrolled .nav-link { color: var(--muted); }

#site-header .cta-reserve {
  background: rgba(255, 255, 255, .2);
  border: 1px solid #fff;
  color: #fff;
  transition: background-color .3s, border-color .3s, color .3s;
}
#site-header .cta-reserve:hover { background: rgba(255, 255, 255, .3); }
#site-header.is-scrolled .cta-reserve {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
#site-header.is-scrolled .cta-reserve:hover { background: var(--green-dark); }

#site-header .hamburger { color: #fff; transition: color .3s; }
#site-header.is-scrolled .hamburger { color: #383D37; }

/* ===== モバイルメニュー（JSで .open を付け外し） ===== */
.mobile-menu { display: none; }
.mobile-menu.open { display: flex; }
@media (min-width: 768px) { .mobile-menu { display: none !important; } }

/* ===== 問い合わせフォームのハニーポット（bot対策の隠し欄） ===== */
.contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}