/* 共通：色・文字・レイアウト・ボタン */
:root {
  --ink: #333;
  --sub: #555;
  --muted: #777;
  --stone: #8d8a85;
  --line: #d6d3ce;
  --light: #cfcdc9;
  --paper: #f4f3f1;
  --cream: #faf8f3;
  --sand: #e6e5e0;
  --gold: #8a6a3c;
  --red: #b33a2a;
  --blue: #3a6db3;
  --green: #5fae5a;
  --green-dark: #468a42;
  --mincho: "Shippori Mincho", serif;
  --serif-en: "Cormorant Garamond", serif;
  --script: "Great Vibes", cursive;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #e9e8e5;
  color: var(--ink);
  font-family: "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--muted); }
img { display: block; max-width: 100%; }
button { font-family: inherit; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }

.page { max-width: 480px; margin: 0 auto; background: #fff; overflow: hidden; }

/* 写真の枠：親の大きさいっぱいに切り抜いて表示 */
.ph { width: 100%; height: 100%; object-fit: cover; }
.ph-contain { width: 100%; height: 100%; object-fit: contain; }

/* 文字 */
.mincho { font-family: var(--mincho); }
.en { font-family: var(--serif-en); }
.lead { font-size: 13px; line-height: 2.1; text-wrap: pretty; }
.vertical { writing-mode: vertical-rl; }

/* 緑の予約ボタン */
.btn-reserve {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 56px; border-radius: 28px;
  background: var(--green); color: #fff;
  font-weight: 700; font-size: 15px; letter-spacing: .08em;
  box-shadow: 0 3px 0 var(--green-dark);
}
.btn-reserve:hover { color: #fff; opacity: .92; }

/* 丸い前後ボタン */
.round-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--stone); background: #fff; color: var(--sub);
  font-size: 16px; cursor: pointer;
}
.round-btn:hover { background: var(--stone); color: #fff; }

/* スライダーのドット */
.dots { display: flex; gap: 8px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--light); }
.dots i.on { background: var(--sub); }

/* 横スワイプの列 */
.swipe {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.swipe::-webkit-scrollbar { display: none; }

/* 固定ヘッダー */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; justify-content: center; pointer-events: none;
}
.site-header .bar {
  width: 100%; max-width: 480px; height: 52px; padding: 0 14px;
  display: flex; align-items: center;
  transition: background .3s ease, box-shadow .3s ease;
}
.site-header.scrolled .bar { background: rgba(255,255,255,.95); box-shadow: 0 1px 8px rgba(0,0,0,.08); }
.site-header .logo-link { position: relative; display: block; height: 34px; width: 150px; pointer-events: auto; }
.site-header .logo-link img { position: absolute; width: auto; transition: opacity .3s ease; }
.logo-white { left: -5px; top: -4px; height: 35px; filter: drop-shadow(0 1px 6px rgba(0,0,0,.35)); }
.logo-dark { left: 0; top: 4px; height: 26px; opacity: 0; }
.site-header.scrolled .logo-white { opacity: 0; }
.site-header.scrolled .logo-dark { opacity: 1; }

/* 下部の固定ボタン */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; justify-content: center; pointer-events: none;
  transition: transform .3s ease, opacity .3s ease;
  transform: translateY(110%); opacity: 0;
}
.sticky-cta.show { transform: translateY(0); opacity: 1; }
.sticky-cta .inner {
  width: 100%; max-width: 480px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.94); box-shadow: 0 -2px 12px rgba(0,0,0,.08);
  pointer-events: auto;
}
.sticky-cta .btn-reserve { height: 52px; border-radius: 26px; gap: 8px; letter-spacing: .06em; }

/* フッター */
.site-footer {
  padding: 28px 24px; background: var(--cream); border-top: 1px solid #e2dfd8;
  color: var(--muted); font-size: 11px; text-align: center;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.site-footer img { height: 36px; width: auto; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}