/*
 * わんこあんリニューアル / 子テーマ独自スタイル
 *
 * Phase 1:CSS 変数定義(SPEC 4・5・6章)
 * Phase 2:ベース・タイポグラフィ・共通レイアウト・ヘッダー・フッター・
 *         offcanvas・ボタン・アニメーション・レスポンシブ(SPEC 10章 / 15章 / 16章)
 * Phase 3 以降:各セクション固有のスタイルは template-parts と一緒に追記する。
 *
 * 目次:
 *   1. CSS Variables
 *   2. Reset / Base
 *   3. Typography Utilities
 *   4. Layout (Container / Section / Section Header)
 *   5. Header
 *   6. Reserve Button (固定)
 *   7. Offcanvas (モバイルナビ)
 *   8. Footer
 *   9. Buttons
 *  10. Animations
 *  11. Responsive (≤ 900px)
 *  12. Accessibility (prefers-reduced-motion)
 */

/* =====================================================
 * 1. CSS Variables(SPEC 4・5・6章)
 * ===================================================== */
:root {
  /* ----- カラー ----- */
  --color-bg:        #f5f1ea; /* 生成り(背景) */
  --color-bg-alt:    #ebe3d5; /* ベージュ(カフェ挿入背景など) */
  --color-paper:     #fdfbf6; /* オフホワイト(カード・セクション背景) */

  --color-ink:       #2b2420; /* メイン文字(温かい墨) */
  --color-ink-soft:  #5a4d42; /* サブ文字 */
  --color-ink-mute:  #8a7a6c; /* キャプション・日付など */

  --color-accent:      #a85d3f; /* メインアクセント(温泉の朱) */
  --color-accent-soft: #c98b6b; /* サブアクセント */

  --color-line:      #d8cfc0;

  /* CLAUDE_INSTRUCTIONS 標準変数との互換 */
  --color-primary:   #2b2420;
  --color-secondary: #a85d3f;
  --color-text:      #2b2420;

  /* ----- タイポグラフィ ----- */
  --font-serif:    'Noto Serif JP', serif;
  --font-en-serif: 'Cormorant Garamond', serif;
  --font-sans:     'Zen Kaku Gothic New', sans-serif;

  --font-main:     var(--font-sans);
  --font-heading:  var(--font-serif);

  /* ----- レイアウト ----- */
  --section-padding-desktop: 120px 80px;
  --section-padding-mobile:  80px 24px;
  --container-max: 1400px;
  --border-radius: 0;
  --transition-base: 0.3s ease;

  /* ----- ヘッダー ----- */
  --header-height-desktop: 76px;
  --header-padding-desktop: 24px 48px;
  --header-padding-mobile:  16px 20px;
}

/* =====================================================
 * 2. Reset / Base
 * ===================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.8;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-base);
}

/* スキップリンクが focus 時のみ表示されるよう Bootstrap の visually-hidden-focusable を再調整 */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* main の最低高さを確保(下層ページのコンテンツが少ない場合のフッター押し下げ) */
.site-content {
  min-height: 60vh;
}

/* =====================================================
 * 3. Typography Utilities
 * ===================================================== */
.text-serif    { font-family: var(--font-serif); }
.text-en-serif { font-family: var(--font-en-serif); font-style: italic; }
.text-sans     { font-family: var(--font-sans); }

.text-mute   { color: var(--color-ink-mute); }
.text-soft   { color: var(--color-ink-soft); }
.text-accent { color: var(--color-accent); }

/* "— LABEL —" のような英字ラベル(各セクション冒頭用) */
.text-en-label {
  display: inline-block;
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.3em;
  color: var(--color-accent);
}

/* 大見出し(ヒーロー級) */
.h-display {
  font-family: var(--font-serif);
  font-size: clamp(36px, 5vw, 68px);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 0.08em;
  margin: 0;
}

/* セクション見出し(中見出し) */
.h-section {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.1em;
  margin: 0;
}

/* 小見出し(カード見出し等) */
.h-card {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.1em;
  margin: 0;
}

/* =====================================================
 * 4. Layout (Container / Section / Section Header)
 * ===================================================== */
.wankoan-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 24px;
}

.wankoan-section {
  padding: var(--section-padding-desktop);
}

.wankoan-section--paper { background: var(--color-paper); }
.wankoan-section--bg-alt { background: var(--color-bg-alt); }
.wankoan-section--ink   { background: var(--color-ink); color: var(--color-paper); }

.wankoan-section-header {
  text-align: center;
  margin-bottom: 80px;
}

.wankoan-section-header .text-en-label {
  margin-bottom: 20px;
}

.wankoan-section-header h2,
.wankoan-section-header .h-section {
  margin-bottom: 16px;
}

.wankoan-section-header p {
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--color-ink-mute);
  margin: 0;
}

/* =====================================================
 * 5. Header(SPEC 10-1)
 *    PC:透過固定 + mix-blend-mode: difference で文字色反転
 *    SP:半透明背景 + backdrop-filter で可読性確保
 * ===================================================== */
.wankoan-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 100;
  padding: var(--header-padding-desktop);
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none; /* 子要素のみクリック可にする(透過領域のクリック抜け防止) */
}

.wankoan-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  max-width: none;
  pointer-events: auto;
}

/* ----- ロゴ ----- */
.wankoan-header__logo {
  display: inline-flex;
  align-items: center;
  color: inherit;
  pointer-events: auto;
}

.wankoan-header__logo img {
  display: block;
  height: 56px;
  width: auto;
  max-width: 200px;
}

/* ----- PC ナビ ----- */
.wankoan-header__nav {
  pointer-events: auto;
}

.wankoan-header__nav ul {
  display: flex;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 16px;
  letter-spacing: 0.15em;
}

.wankoan-header__nav a {
  display: inline-block;
  padding: 4px 0;
  color: inherit;
  position: relative;
}

.wankoan-header__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.3s ease;
}

.wankoan-header__nav a:hover::after {
  width: 100%;
}

/* ----- ハンバーガー(SP のみ表示:右上に単独配置。予約は下部固定バーへ移行) ----- */
.wankoan-header__hamburger {
  position: fixed;
  top: 14px;
  right: 20px;
  z-index: 102;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 12px 10px;
  background: rgba(253, 251, 246, 0.9);
  border-radius: 4px;
  color: var(--color-ink);
  border: 0;
  cursor: pointer;
  pointer-events: auto;
}

.wankoan-header__hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* =====================================================
 * 6. Reserve Button
 *    PC のみ表示。SP は下部固定バー(.mobile-reserve-bar)へ移行。
 * ===================================================== */
.wankoan-reserve-btn {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-paper);
  padding: 14px 32px;
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.2em;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
  text-decoration: none;
  pointer-events: auto;
  white-space: nowrap;
}

.wankoan-reserve-btn:hover,
.wankoan-reserve-btn:focus-visible {
  background: var(--color-ink);
  color: var(--color-paper);
}

/* =====================================================
 * 6-2. Mobile Reserve Bar(SP のみ表示:画面下部固定の2カラム)
 *    左:お電話(--color-ink) / 右:ご予約(--color-accent)
 * ===================================================== */
.mobile-reserve-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
}

.mobile-reserve-bar__item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 12px;
  font-family: var(--font-serif);
  font-size: 15px;
  letter-spacing: 0.15em;
  color: var(--color-paper);
  text-decoration: none;
  transition: opacity 0.3s;
}

.mobile-reserve-bar__item:hover,
.mobile-reserve-bar__item:active {
  opacity: 0.85;
  color: var(--color-paper);
}

.mobile-reserve-bar__tel {
  background: var(--color-ink);
}

.mobile-reserve-bar__reserve {
  background: var(--color-accent);
}

.mobile-reserve-bar__icon {
  flex-shrink: 0;
}

.mobile-reserve-bar__label {
  display: inline-block;
}

/* =====================================================
 * 7. Offcanvas (モバイルナビ)
 *    Bootstrap 5 offcanvas のデフォルトを SPEC のトーンに揃える。
 * ===================================================== */
#wankoanOffcanvas {
  background: var(--color-paper);
  color: var(--color-ink);
  border-left: 0;
}

#wankoanOffcanvas .offcanvas-header {
  padding: 24px 24px 8px;
  border-bottom: 1px solid var(--color-line);
}

#wankoanOffcanvas .offcanvas-title {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.3em;
  color: var(--color-accent);
  margin: 0;
}

#wankoanOffcanvas .btn-close {
  filter: none;
  opacity: 0.6;
}

.wankoan-offcanvas-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wankoan-offcanvas-nav li {
  border-bottom: 1px solid var(--color-line);
}

.wankoan-offcanvas-nav a {
  display: block;
  padding: 18px 4px;
  font-family: var(--font-serif);
  font-size: 16px;
  letter-spacing: 0.15em;
  color: var(--color-ink);
}

.wankoan-offcanvas-nav a:hover,
.wankoan-offcanvas-nav a:focus-visible {
  color: var(--color-accent);
}

/* =====================================================
 * 8. Footer(SPEC 10-2)
 * ===================================================== */
.wankoan-footer {
  background: var(--color-ink);
  color: var(--color-paper);
  padding: 80px 80px 40px;
}

.wankoan-footer__top {
  max-width: var(--container-max);
  margin: 0 auto 60px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}

.wankoan-footer__brand {
  display: flex;
  flex-direction: column;
}

.wankoan-footer__logo {
  margin-bottom: 20px;
}

.wankoan-footer__logo img {
  display: block;
  height: 60px;
  width: auto;
  max-width: 240px;
}

.wankoan-footer__address {
  font-size: 13px;
  line-height: 2;
  opacity: 0.7;
  font-style: normal; /* <address> のイタリック解除 */
}

.wankoan-footer__address a {
  color: inherit;
  text-decoration: none;
}

.wankoan-footer__address a:hover {
  opacity: 1;
  color: var(--color-accent-soft);
}

.wankoan-footer__links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.wankoan-footer__links a {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.1em;
  opacity: 0.7;
  padding: 8px 0;
  color: inherit;
}

.wankoan-footer__links a:hover,
.wankoan-footer__links a:focus-visible {
  opacity: 1;
  color: var(--color-accent-soft);
}

.wankoan-footer__bottom {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-top: 40px;
  border-top: 1px solid rgba(253, 251, 246, 0.1);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.2em;
  opacity: 0.5;
}

.wankoan-footer__bottom small {
  font-size: inherit;
}

/* =====================================================
 * 9. Buttons(共通)
 * ===================================================== */
.wankoan-btn {
  display: inline-block;
  padding: 16px 48px;
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.3em;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, gap 0.3s ease;
}

.wankoan-btn--outline-ink {
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.wankoan-btn--outline-ink:hover,
.wankoan-btn--outline-ink:focus-visible {
  background: var(--color-ink);
  color: var(--color-paper);
}

.wankoan-btn--outline-paper {
  border-color: var(--color-paper);
  color: var(--color-paper);
}

.wankoan-btn--outline-paper:hover,
.wankoan-btn--outline-paper:focus-visible {
  background: var(--color-paper);
  color: var(--color-ink);
}

.wankoan-btn--solid-accent {
  background: var(--color-accent);
  color: var(--color-paper);
  border-color: var(--color-accent);
}

.wankoan-btn--solid-accent:hover,
.wankoan-btn--solid-accent:focus-visible {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-paper);
}

/* 矢印付き英字インラインリンク(SPEC 8-2 のシーンリンク等で再利用) */
.wankoan-link-en {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--color-accent);
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 4px;
  transition: gap 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.wankoan-link-en:hover,
.wankoan-link-en:focus-visible {
  gap: 20px;
  color: var(--color-ink);
  border-bottom-color: var(--color-ink);
}

/* =====================================================
 * 10. Animations(SPEC 15章)
 * ===================================================== */
@keyframes wankoanFadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes wankoanScrollPulse {
  0%, 100% {
    opacity: 0.6;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(8px);
  }
}

/* Intersection Observer 用クラス(Phase 3 で JS から .is-visible を付与) */
.is-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.is-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ヒーローのスクロールヒント用(Phase 3 で hero.php に配置) */
.scroll-hint {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--color-paper);
  writing-mode: vertical-rl;
  animation: wankoanScrollPulse 2.5s ease-in-out infinite;
}

/* =====================================================
 * 11. Responsive (≤ 900px / SPEC 16章)
 *    モバイル切替基準は 900px。
 * ===================================================== */
@media (max-width: 900px) {
  /* ----- セクション余白 ----- */
  .wankoan-section {
    padding: var(--section-padding-mobile);
  }

  .wankoan-section-header {
    margin-bottom: 50px;
  }

  /* ----- ヘッダー:モバイルは半透明背景に切替 ----- */
  .wankoan-header {
    padding: var(--header-padding-mobile);
    mix-blend-mode: normal;
    background: rgba(253, 251, 246, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--color-ink);
  }

  /* ----- フッター:1カラム化 ----- */
  .wankoan-footer {
    padding: 60px 24px 30px;
  }

  .wankoan-footer__top {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 40px;
  }

  .wankoan-footer__links {
    grid-template-columns: 1fr 1fr;
    gap: 8px 20px;
  }

  .wankoan-footer__bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  /* ----- ボタン:タップ領域確保 ----- */
  .wankoan-btn {
    padding: 14px 36px;
  }

  /* ----- ヘッダーロゴ:わずかに小さく ----- */
  .wankoan-header__logo img {
    height: 46px;
  }

  /* ----- モバイル固定予約バー:表示 + 本文末尾に高さ分の余白を確保 ----- */
  .mobile-reserve-bar {
    display: flex;
  }

  body {
    padding-bottom: 58px;
  }
}

/* =====================================================
 * 12. Accessibility(prefers-reduced-motion)
 * ===================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .is-fade-up {
    opacity: 1;
    transform: none;
  }
}

/* =====================================================
 * 13. Front Page Sections(Phase 3)
 *   13-1 Hero
 *   13-2 Intro
 *   13-3 Cafe Cut-in
 *   13-4 Story / Day Separator / Scene / Mid CTA
 *   13-5 Reserve CTA
 *   13-6 Facility
 *   13-7 Info
 *   13-8 News + Topics
 *   13-9 Section Responsive (≤ 900px)
 * ===================================================== */

/* ---------- 13-1. Hero ---------- */
.wankoan-hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 80px;
  color: var(--color-paper);
}

.wankoan-hero__image {
  position: absolute;
  inset: 0;
  background-color: var(--color-ink);
  background-size: cover;
  background-position: center;
  filter: brightness(0.7);
}

.wankoan-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(43, 36, 32, 0.3) 0%,
    rgba(43, 36, 32, 0)  40%,
    rgba(43, 36, 32, 0.5) 100%);
}

.wankoan-hero__content {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

.wankoan-hero__label {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.3em;
  margin: 0 0 24px;
  opacity: 0.9;
}

.wankoan-hero__copy {
  font-family: var(--font-serif);
  font-size: clamp(36px, 5vw, 68px);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 0.08em;
  margin: 0 0 32px;
}

.wankoan-hero__sub {
  font-size: 14px;
  letter-spacing: 0.2em;
  line-height: 2.2;
  max-width: 520px;
  margin: 0;
  opacity: 0.9;
}

.wankoan-hero__scroll {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

/* ヒーロー本文のフェードアップ(ロード時。IntersectionObserver は使わない) */
.wankoan-hero__label,
.wankoan-hero__copy,
.wankoan-hero__sub {
  animation: wankoanFadeUp 1.4s ease forwards;
  opacity: 0;
}
.wankoan-hero__label { animation-delay: 0.3s; }
.wankoan-hero__copy  { animation-delay: 0.6s; }
.wankoan-hero__sub   { animation-delay: 0.9s; }

/* ---------- 13-2. Intro ---------- */
.wankoan-intro {
  padding: 160px 80px;
}

.wankoan-intro__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 120px;
  align-items: center;
}

.wankoan-intro__text .text-en-label {
  margin-bottom: 32px;
}

.wankoan-intro__text h2 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.05em;
  margin: 0 0 40px;
  color: var(--color-ink);
}

.wankoan-intro__text p {
  font-size: 15px;
  line-height: 2.4;
  color: var(--color-ink-soft);
  margin: 0 0 20px;
  letter-spacing: 0.08em;
}

.wankoan-intro__text p:last-child { margin-bottom: 0; }

.wankoan-intro__image {
  position: relative;
}

.wankoan-intro__image img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--color-bg-alt);
}

.wankoan-intro__image::before,
.wankoan-intro__image::after {
  content: "";
  position: absolute;
  width: 80px;
  height: 80px;
  pointer-events: none;
}

.wankoan-intro__image::before {
  top: -30px;
  left: -30px;
  border-top: 1px solid var(--color-accent);
  border-left: 1px solid var(--color-accent);
}

.wankoan-intro__image::after {
  bottom: -30px;
  right: -30px;
  border-bottom: 1px solid var(--color-accent);
  border-right: 1px solid var(--color-accent);
}

/* ---------- 13-3. Cafe Cut-in ---------- */
.wankoan-cafe {
  background: var(--color-bg-alt);
  padding: 80px;
  margin: 80px auto;
  max-width: 1200px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
}

.wankoan-cafe::before {
  content: "— a little detour to OneOneCafe —";
  position: absolute;
  top: -10px;
  left: 80px;
  background: var(--color-bg);
  padding: 0 16px;
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--color-ink-mute);
}

.wankoan-cafe__image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-bg);
}

.wankoan-cafe__body h3 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.05em;
  margin: 0 0 20px;
}

.wankoan-cafe__body p {
  font-size: 14px;
  line-height: 2.2;
  color: var(--color-ink-soft);
  margin: 0;
}

.wankoan-cafe__timing {
  display: inline-block;
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--color-accent);
  margin-bottom: 12px;
}

.wankoan-cafe__body .wankoan-cafe__cta {
  margin-top: 28px;
}

/* ---------- 13-4. Story / Day Separator / Scene / Mid CTA ---------- */
.wankoan-story {
  padding: 120px 0 60px;
  position: relative;
}

.wankoan-story__header {
  text-align: center;
  margin-bottom: 80px;
  padding: 0 80px;
}

.wankoan-story__header .text-en-label {
  display: inline-block;
  margin-bottom: 20px;
}

.wankoan-story__header h2 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 300;
  letter-spacing: 0.1em;
  margin: 0 0 16px;
}

.wankoan-story__header p {
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--color-ink-mute);
  margin: 0;
}

/* Day separator */
.wankoan-day-separator {
  max-width: var(--container-max);
  margin: 40px auto;
  padding: 0 80px;
  display: flex;
  align-items: center;
  gap: 40px;
}

.wankoan-day-separator .line {
  flex: 1;
  height: 1px;
  background: var(--color-line);
}

.wankoan-day-separator .label {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.3em;
  color: var(--color-ink-mute);
}

.wankoan-day-separator .day-num {
  font-size: 28px;
  color: var(--color-accent);
  margin-right: 12px;
  font-weight: 400;
}

/* Scene */
.wankoan-scene {
  padding: 80px;
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  gap: 80px;
  align-items: center;
}

.wankoan-scene--left  { grid-template-columns: 55% 1fr; }
.wankoan-scene--right { grid-template-columns: 1fr 55%; }
.wankoan-scene--right .wankoan-scene__image { order: 2; }
.wankoan-scene--right .wankoan-scene__text  { order: 1; }

.wankoan-scene__image {
  position: relative;
}

.wankoan-scene__image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-bg-alt);
}

.wankoan-scene__time {
  position: absolute;
  top: 24px;
  left: 24px;
  background: var(--color-paper);
  padding: 10px 20px;
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--color-ink);
}

.wankoan-scene__num {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 72px;
  font-weight: 300;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: 24px;
}

.wankoan-scene__label {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--color-ink-mute);
  margin-bottom: 16px;
  text-transform: uppercase;
}

.wankoan-scene__jp {
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 0.3em;
  color: var(--color-ink-mute);
  margin-bottom: 20px;
}

.wankoan-scene__copy {
  font-family: var(--font-serif);
  font-size: clamp(19px, 1.8vw, 26px);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.08em;
  color: var(--color-ink);
  margin: 0 0 20px;
}

.wankoan-scene__copy em {
  font-style: normal;
  color: var(--color-accent);
  border-bottom: 1px dashed var(--color-accent-soft);
  cursor: pointer;
  transition: var(--transition-base);
}

.wankoan-scene__copy em:hover {
  color: var(--color-ink);
}

/* Mid CTA(DAY1 と DAY2 の間に挿入する予約ボタン) */
.wankoan-mid-cta {
  text-align: center;
  padding: 60px 80px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ---------- 13-5. Reserve CTA ---------- */
.wankoan-reserve-cta {
  background: var(--color-ink);
  color: var(--color-paper);
  padding: 120px 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.wankoan-reserve-cta::before {
  content: "RESERVATION";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: clamp(60px, 12vw, 180px);
  font-weight: 300;
  color: rgba(253, 251, 246, 0.04);
  letter-spacing: 0.1em;
  white-space: nowrap;
  pointer-events: none;
}

.wankoan-reserve-cta__content {
  position: relative;
  z-index: 2;
}

.wankoan-reserve-cta h2 {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: 0.1em;
  margin: 0 0 48px;
}

.wankoan-reserve-cta__tel {
  margin-top: 40px;
  font-family: var(--font-en-serif);
  font-size: 13px;
  letter-spacing: 0.2em;
  opacity: 0.7;
}

.wankoan-reserve-cta__tel a {
  display: inline-block;
  margin-top: 8px;
  font-size: 22px;
  letter-spacing: 0.15em;
  opacity: 1;
  color: inherit;
}

/* ---------- 13-6. Facility ---------- */
.wankoan-facility {
  padding: 160px 80px;
  background: var(--color-paper);
}

.wankoan-facility__header {
  text-align: center;
  margin-bottom: 100px;
}

.wankoan-facility__header .text-en-label {
  display: inline-block;
  margin-bottom: 20px;
}

.wankoan-facility__header h2 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 300;
  letter-spacing: 0.1em;
  margin: 0;
}

.wankoan-facility__grid {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 80px 60px;
}

.wankoan-facility__item {
  display: block;
  color: inherit;
  text-decoration: none;
}

.wankoan-facility__inner {
  overflow: hidden;
}

.wankoan-facility__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-bg-alt);
  transition: transform 0.8s ease;
}

.wankoan-facility__item:hover img {
  transform: scale(1.03);
}

.wankoan-facility__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 24px;
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 16px;
}

.wankoan-facility__name {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.wankoan-facility__name-en {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--color-ink-mute);
}

.wankoan-facility__desc {
  margin-top: 16px;
  font-size: 13px;
  line-height: 2;
  color: var(--color-ink-soft);
  letter-spacing: 0.05em;
}

/* ---------- 13-7. Info ---------- */
.wankoan-info {
  padding: 140px 80px;
  max-width: var(--container-max);
  margin: 0 auto;
}

.wankoan-info__header {
  text-align: center;
  margin-bottom: 80px;
}

.wankoan-info__header .text-en-label {
  display: inline-block;
  margin-bottom: 16px;
}

.wankoan-info__header h2 {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 300;
  letter-spacing: 0.1em;
  margin: 0;
}

.wankoan-info__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.wankoan-info__card {
  display: block;
  background: var(--color-paper);
  padding: 50px 40px;
  text-align: center;
  transition: transform 0.3s ease, border-color 0.3s ease;
  border: 1px solid transparent;
  color: inherit;
  text-decoration: none;
}

.wankoan-info__card:hover {
  border-color: var(--color-line);
  transform: translateY(-4px);
}

.wankoan-info__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 24px;
  stroke: var(--color-accent);
  stroke-width: 1;
  fill: none;
  display: block;
}

.wankoan-info__card h3 {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.1em;
  margin: 0 0 8px;
}

.wankoan-info__card .en {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--color-ink-mute);
  margin: 0 0 20px;
}

.wankoan-info__card p {
  font-size: 13px;
  line-height: 2;
  color: var(--color-ink-soft);
  margin: 0;
}

/* ---------- 13-8. News + Topics ---------- */
.wankoan-news-topics {
  padding: 120px 80px;
  background: var(--color-paper);
}

.wankoan-news-topics__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
}

.wankoan-news-topics__col h2 {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 300;
  letter-spacing: 0.1em;
  margin: 0 0 8px;
}

.wankoan-news-topics__col .text-en-label {
  display: block;
  margin-bottom: 40px;
}

.wankoan-news-topics__empty {
  font-size: 14px;
  color: var(--color-ink-mute);
  padding: 24px 0;
}

/* News(左カラム) */
.wankoan-news__item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-line);
  color: inherit;
  text-decoration: none;
}

.wankoan-news__date {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--color-ink-mute);
  letter-spacing: 0.1em;
}

.wankoan-news__title {
  font-size: 14px;
  line-height: 1.8;
  transition: color 0.3s ease;
}

.wankoan-news__item:hover .wankoan-news__title {
  color: var(--color-accent);
}

/* Topics(右カラム) */
.wankoan-topics__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.wankoan-topics__item {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 0.4s ease;
}

.wankoan-topics__item:hover {
  transform: translateY(-4px);
}

.wankoan-topics__thumb {
  overflow: hidden;
  margin-bottom: 14px;
  background: var(--color-bg-alt);
}

.wankoan-topics__thumb img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.wankoan-topics__item:hover .wankoan-topics__thumb img {
  transform: scale(1.04);
}

.wankoan-topics__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.wankoan-topics__date {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 12px;
  color: var(--color-ink-mute);
  letter-spacing: 0.15em;
}

.wankoan-topics__tag {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--color-accent);
  padding: 2px 8px;
  border: 1px solid var(--color-accent-soft);
  text-transform: uppercase;
}

.wankoan-topics__title {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: var(--color-ink);
  transition: color 0.3s ease;
}

.wankoan-topics__item:hover .wankoan-topics__title {
  color: var(--color-accent);
}

.wankoan-news-topics__viewall {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--color-ink-mute);
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 4px;
  transition: gap 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.wankoan-news-topics__viewall:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  gap: 16px;
}

/* ---------- 13-9. Section Responsive (≤ 900px / SPEC 16章) ---------- */
@media (max-width: 900px) {
  /* Hero */
  .wankoan-hero {
    padding: 40px 24px;
    min-height: 540px;
  }

  /* Intro */
  .wankoan-intro {
    padding: 80px 24px;
  }
  .wankoan-intro__inner {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .wankoan-intro__text h2 {
    margin-bottom: 24px;
  }

  /* Cafe */
  .wankoan-cafe {
    grid-template-columns: 1fr;
    padding: 40px 24px;
    margin: 60px 24px;
  }
  .wankoan-cafe::before {
    left: 24px;
  }

  /* Story / Scene */
  .wankoan-story {
    padding: 80px 0 30px;
  }
  .wankoan-story__header {
    padding: 0 24px;
    margin-bottom: 50px;
  }
  .wankoan-day-separator {
    padding: 0 24px;
    gap: 20px;
  }
  .wankoan-day-separator .label {
    font-size: 12px;
  }
  .wankoan-day-separator .day-num {
    font-size: 20px;
  }
  .wankoan-scene {
    padding: 50px 24px;
    grid-template-columns: 1fr !important;
    gap: 40px;
  }
  .wankoan-scene--right .wankoan-scene__image { order: 1; }
  .wankoan-scene--right .wankoan-scene__text  { order: 2; }
  .wankoan-scene__num {
    font-size: 52px;
  }
  .wankoan-mid-cta {
    padding: 40px 24px;
  }

  /* Reserve CTA */
  .wankoan-reserve-cta {
    padding: 80px 24px;
  }
  .wankoan-reserve-cta h2 {
    margin-bottom: 32px;
  }
  .wankoan-reserve-cta::before {
    font-size: 80px;
  }

  /* Facility */
  .wankoan-facility {
    padding: 80px 24px;
  }
  .wankoan-facility__header {
    margin-bottom: 60px;
  }
  .wankoan-facility__grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  /* Info */
  .wankoan-info {
    padding: 80px 24px;
  }
  .wankoan-info__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .wankoan-info__card {
    padding: 40px 24px;
  }

  /* News + Topics */
  .wankoan-news-topics {
    padding: 80px 24px;
  }
  .wankoan-news-topics__inner {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .wankoan-topics__grid {
    gap: 16px;
  }
}

/* =====================================================
 * 14. Preloader(初回ロード時の順次フェードイン)
 *    タイムライン:
 *      0.2s 犬の顔(0.5s)
 *      0.6s メインロゴ(0.5s)
 *      1.0s 小英字(0.4s)
 *      1.2s オレンジ装飾線 左→右ワイプ(0.4s)
 *      1.8s 静止
 *      2.2s フェードアウト(0.5s)
 *    JS 側は min 2200ms 経過 + window.load を待ってから .is-hidden を付与。
 * ===================================================== */
body.is-loading {
  overflow: hidden;
}

.preloader {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.preloader__svg {
  width: 280px;
  max-width: 60%;
  height: auto;
}

.preloader__svg svg {
  display: block;
  width: 100%;
  height: auto;
}

/* 初期状態:各パーツを非表示 */
.preloader__svg .dog-face,
.preloader__svg .main-logo,
.preloader__svg .sub-text {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.preloader__svg .accent-line {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s ease;
}

/* .is-animating で順次表示 */
.preloader.is-animating .dog-face {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}
.preloader.is-animating .main-logo {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}
.preloader.is-animating .sub-text {
  opacity: 1;
  transform: translateY(0);
  transition-duration: 0.4s;
  transition-delay: 1.0s;
}
.preloader.is-animating .accent-line {
  transform: scaleX(1);
  transition-delay: 1.2s;
}

/* prefers-reduced-motion:即時表示 */
@media (prefers-reduced-motion: reduce) {
  .preloader__svg .dog-face,
  .preloader__svg .main-logo,
  .preloader__svg .sub-text,
  .preloader__svg .accent-line {
    opacity: 1;
    transform: none;
    transition: none;
  }
}