/* ==========================================================================
   かつうみ鍼灸院 — Design System (V5 Final / Sage × Kanban Accent)
   Codex / WordPress 引き継ぎ用クリーン CSS

   目次:
     1.  Design Tokens (CSS Custom Properties)
     2.  Reset / Base
     3.  Typography
     4.  Layout Utilities
     5.  Buttons
     6.  Header
     7.  Mobile Menu / Hamburger
     8.  Hero
     9.  Section Common
    10.  Component: Worry Cards
    11.  Component: Value Cards
    12.  Component: Service Cards
    13.  Component: Flow
    14.  Component: FAQ
    15.  Component: Price
    16.  Component: Gallery
    17.  Component: Concept / Director
    18.  Component: Legs Feature
    19.  Component: Beauty
    20.  Component: Contact Methods
    21.  CTA Band
    22.  Access / Hours
    23.  Footer
    24.  Floating CTA (PC)
    25.  Mobile Fixed CTA Bar
    26.  Page Hero (下層ページ共通)
    27.  Responsive: Mobile (≤768px)
    28.  Responsive: Small (≤400px)
   ========================================================================== */


/* ==========================================================================
   1. Design Tokens
   ========================================================================== */
:root{
  /* ---------- Background ---------- */
  --bg:              #FDFDFB;   /* ほぼ白・温かみあり */
  --bg-sub:          #F4F6F1;   /* 淡いセージ背景 */
  --bg-deep:         #EAEFE4;
  --cream:           #F7F4EA;   /* CTA上文字/濃色ブロック文字色 */

  /* ---------- Ink (Text) ---------- */
  --ink:             #2A2D28;   /* 本文 */
  --ink-soft:        #4A4E46;
  --muted:           #7B7F76;

  /* ---------- Lines ---------- */
  --line:            #D9DDD3;
  --line-soft:       #E9EBE3;

  /* ---------- Sage (メインアクセント・主役) ---------- */
  --sage:            #8AA57A;
  --sage-deep:       #556B48;   /* ★ 主要CTA・見出し・リンク・アクセントの主役 */
  --sage-soft:       #C7D4B8;

  /* ---------- Kanban Accents (看板由来・アクセント少量) ---------- */
  --marsala:         #8B3A2E;   /* 院名ロゴ・ブランドマーク・小さな装飾線 */
  --marsala-soft:    #C97A66;   /* カード hover 境界 */
  --marsala-line:    #E6C6BC;   /* FAQ回答 縦線など */
  --ochre:           #C48A3B;   /* 副タイトル "は り ・ き ゅ う" */
  --reserve-red:     #B8382A;   /* 「予約優先」バッジのみ */

  /* ---------- Brand external ---------- */
  --line-brand:      #06C755;   /* LINE 公式カラー */

  /* ---------- Danger / Alert ---------- */
  --danger:          #C86A5A;

  /* ---------- Footer ---------- */
  --footer-bg:       #26291F;
  --footer-fg:       #C9CDBF;
  --footer-muted:    #8B8F82;
  --footer-line:     #3A3D33;
}


/* ==========================================================================
   2. Reset / Base
   ========================================================================== */
*{ box-sizing: border-box; margin: 0; padding: 0; }
html{ scroll-behavior: smooth; }
body{
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 17px;
  line-height: 1.9;
  font-weight: 400;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }


/* ==========================================================================
   3. Typography
   ========================================================================== */
.serif{ font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif; font-weight: 400; }
.en{ font-family: "Cormorant Garamond", "Times New Roman", serif; font-weight: 400; letter-spacing: 0.08em; }
.kanban-serif{ font-family: "Yuji Syuku", "Noto Serif JP", serif; font-weight: 400; }

h1, h2, h3, h4{
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.04em;
  line-height: 1.5;
}

p{ text-wrap: pretty; }

.eyebrow{
  font-family: "Noto Serif JP", serif;
  color: var(--sage-deep);
  letter-spacing: 0.18em;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before{
  content: "";
  width: 32px; height: 1px;
  background: var(--sage-deep);
}


/* ==========================================================================
   4. Layout Utilities
   ========================================================================== */
.container{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.container-narrow{ width: 100%; max-width: 880px; margin: 0 auto; padding: 0 32px; }
section{ padding: 120px 0; position: relative; }

.text-center{ text-align: center; }
.text-muted{ color: var(--muted); }
.text-sage{ color: var(--sage-deep); }
.mt-2{ margin-top: 8px; } .mt-4{ margin-top: 16px; } .mt-6{ margin-top: 24px; }
.mt-8{ margin-top: 32px; } .mt-12{ margin-top: 48px; } .mt-16{ margin-top: 64px; }


/* ==========================================================================
   5. Buttons
   ========================================================================== */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 34px;
  border-radius: 999px;
  font-size: 15px;
  letter-spacing: 0.14em;
  font-weight: 500;
  min-height: 52px;
  border: 1px solid transparent;
  transition: transform .2s ease, background .25s ease, box-shadow .25s ease;
}
.btn-primary{ background: var(--sage-deep); color: var(--cream); }
.btn-primary:hover{ background: #3f5335; transform: translateY(-2px); box-shadow: 0 12px 32px -12px rgba(85,107,72,0.5); }

.btn-outline{ background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover{ background: var(--ink); color: var(--cream); }

.btn-ghost{ background: var(--bg-sub); color: var(--ink); }
.btn-ghost:hover{ background: var(--bg-deep); }

.btn-line{ background: var(--line-brand); color: #fff; }
.btn-line:hover{ background: #05b34c; transform: translateY(-2px); }

.btn-lg{ padding: 24px 42px; font-size: 16px; min-height: 60px; }


/* ==========================================================================
   6. Header
   ========================================================================== */
.site-header{
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background-color: #fdfbf6;
  background-image: url('../images/global-menu-wallpaper.png');
  background-position: center;
  background-size: cover;
  border-bottom: 1px solid var(--line-soft);
}
.site-header .container{
  display: flex; align-items: center; justify-content: space-between;
  height: 76px;
}
.brand{ display: block; flex: 0 0 auto; }
.brand-logo{ display: block; width: auto; height: 74px; }

.nav{ display: flex; align-items: center; gap: 36px; }
.nav a{
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--ink);
  position: relative;
  padding: 8px 0;
  transition: color .2s ease;
}
.nav a:hover{ color: var(--sage-deep); }
.nav a::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1px; background: var(--sage-deep);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.nav a:hover::after{ transform: scaleX(1); }

.header-cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--sage-deep);
  color: var(--cream) !important;
  padding: 14px 24px;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 0.12em;
  min-height: 44px;
  transition: background .25s ease, transform .2s ease;
}
.header-cta:hover{ background: #3f5335; transform: translateY(-1px); }
.header-cta svg{ width: 14px; height: 14px; }


/* ==========================================================================
   7. Mobile Menu / Hamburger
   ========================================================================== */
.nav-toggle{
  display: none;
  width: 48px; height: 48px;
  background: transparent;
  border: 1px solid var(--sage-deep);
  border-radius: 50%;
  cursor: pointer;
  align-items: center; justify-content: center;
  color: var(--sage-deep);
}
.nav-toggle svg{ width: 22px; height: 22px; }

.mobile-menu{
  display: none;
  position: fixed; inset: 0;
  background: rgba(253,253,251,0.98);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 100;
  padding: 90px 32px 32px;
  overflow-y: auto;
}
.mobile-menu.open{ display: block; }
.mobile-menu-close{
  position: absolute; top: 20px; right: 20px;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--sage-deep);
  border-radius: 50%;
  color: var(--sage-deep);
  cursor: pointer;
}
.mobile-menu ul{ list-style: none; padding: 0; margin: 0; }
.mobile-menu li{ border-bottom: 1px solid var(--line-soft); }
.mobile-menu li a{
  display: block;
  padding: 20px 8px;
  font-family: "Noto Serif JP", serif;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: 0.08em;
}
.mobile-menu-brand{
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--marsala);
}
.mobile-menu-brand .name{
  font-family: "Yuji Syuku", serif;
  color: var(--marsala);
  font-size: 22px;
  letter-spacing: 0.14em;
}
.mobile-menu-brand .sub{
  color: var(--ochre);
  font-size: 12px;
  letter-spacing: 0.16em;
  margin-top: 4px;
}
.mobile-menu-cta{
  margin-top: 32px;
  display: flex; flex-direction: column;
  gap: 12px;
}


/* ==========================================================================
   8. Hero
   ========================================================================== */
.hero{
  position: relative;
  padding-top: 88px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-sub) 100%);
}
.hero-inner{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
  max-width: 1440px; margin: 0 auto;
  padding: 24px 60px 80px;
  min-height: calc(100vh - 88px);
}
.hero-copy{ padding-bottom: 40px; position: relative; }
.hero-eyebrow{
  font-family: "Noto Serif JP", serif;
  color: var(--sage-deep);
  letter-spacing: 0.18em;
  font-size: 15px;
  display: flex; align-items: center; gap: 14px;
}
.hero-eyebrow::before{
  content: "";
  width: 40px; height: 1px;
  background: var(--sage-deep);
}
.hero-kanban-row{
  margin-top: 18px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.kanban-stamp{
  display: inline-block;
  font-family: "Yuji Syuku", serif;
  color: #fff;
  background: var(--reserve-red);
  font-size: 12px;
  letter-spacing: 0.14em;
  padding: 4px 12px;
  transform: rotate(-3deg);
  box-shadow: 0 2px 6px -2px rgba(184,56,42,0.4);
}
.kanban-hari{
  font-family: "Yuji Syuku", serif;
  color: var(--marsala);
  font-size: 14px;
  letter-spacing: 0.24em;
}
.hero-title{
  font-family: "Noto Serif JP", serif;
  font-size: clamp(34px, 4.2vw, 60px);
  line-height: 1.5;
  font-weight: 500;
  margin-top: 32px;
  letter-spacing: 0.04em;
}
.hero-title .em{ color: var(--sage-deep); }
.hero-title .em2{ display: inline-block; position: relative; }
.hero-title .em2::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: 2px;
  height: 10px;
  background: rgba(138,165,122,0.32);
  z-index: -1;
}
.hero-lede{
  margin-top: 32px;
  max-width: 520px;
  font-size: 17px;
  line-height: 2;
  color: var(--ink);
}
.hero-lede p + p{ margin-top: 24px; }
.hero-lede-location span,
.hero-lede-line{ display: block; }
.hero-motto{
  margin-top: 40px;
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
  padding: 20px 28px;
  background: rgba(255,255,255,0.7);
  border-left: 3px solid var(--sage-deep);
}
.hero-motto .en{
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: var(--sage-deep);
  font-size: 14px;
  letter-spacing: 0.2em;
}
.hero-motto .ja{
  font-family: "Noto Serif JP", serif;
  font-size: 20px;
  color: var(--ink);
  letter-spacing: 0.08em;
}
.hero-cta-row{ margin-top: 40px; display: flex; gap: 16px; flex-wrap: wrap; }

.hero-visual{ position: relative; }
.hero-visual .frame{
  width: 100%;
  aspect-ratio: 3/4;
  max-height: 720px;
  overflow: hidden;
  background: var(--bg-sub);
}
.hero-visual .frame img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.hero-signature{
  position: absolute;
  left: -40px; bottom: 40px;
  background: var(--bg);
  padding: 20px 24px;
  border-top: 2px solid var(--marsala);
  max-width: 260px;
}
.hero-signature .role{
  font-family: "Noto Serif JP", serif;
  font-size: 13px;
  color: var(--sage-deep);
  letter-spacing: 0.16em;
}
.hero-signature .name{
  font-family: "Noto Serif JP", serif;
  font-size: 22px;
  color: var(--ink);
  margin-top: 6px;
}
.hero-signature .name .en{
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.16em;
  display: block; margin-top: 4px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
}


/* ==========================================================================
   9. Section Common
   ========================================================================== */
.sect-head{ margin-bottom: 60px; }
.sect-head.centered{ text-align: center; }
.sect-eyebrow{
  font-family: "Noto Serif JP", serif;
  color: var(--sage-deep);
  letter-spacing: 0.18em;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.sect-eyebrow::before{
  content: "";
  width: 32px; height: 1px;
  background: var(--sage-deep);
}
.sect-head.centered .sect-eyebrow{ justify-content: center; }
.sect-head h2{
  font-family: "Noto Serif JP", serif;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.05em;
  margin-top: 20px;
}
.sect-head h2 .em{ color: var(--sage-deep); }
.sect-lede{
  max-width: 640px;
  margin-top: 24px;
  font-size: 16px;
  line-height: 2;
  color: var(--ink-soft);
}
.sect-head.centered .sect-lede{ margin-left: auto; margin-right: auto; }


/* ==========================================================================
   10. Component: Worry Cards
   ========================================================================== */
.worries{ background: var(--bg-sub); }
.worry-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.worry-card{
  background: #fff;
  padding: 32px 28px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border: 1px solid var(--line-soft);
}
.worry-check{
  flex-shrink: 0;
  width: 32px; height: 32px;
  background: var(--sage-deep);
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-family: "Noto Serif JP", serif;
  font-size: 14px;
}
.worry-text{
  font-family: "Noto Serif JP", serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  padding-top: 4px;
}
.worry-note{
  margin-top: 48px;
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-size: 20px;
  color: var(--ink);
  line-height: 1.8;
}
.worry-note .accent{
  display: block;
  margin-top: 12px;
  color: var(--sage-deep);
  font-size: 24px;
}


/* ==========================================================================
   11. Component: Value Cards
   ========================================================================== */
.values-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.values-grid > :nth-child(4){ grid-column: 1 / 3; }
.values-grid > :nth-child(5){ grid-column: 3 / 4; }

.value-card{
  background: var(--bg);
  border: 1px solid var(--line-soft);
  padding: 40px 32px;
  transition: border-color .3s ease, transform .3s ease;
}
.value-card:hover{ border-color: var(--marsala-soft); transform: translateY(-4px); }
.value-card:hover .value-num{ color: var(--marsala); }

.value-num{
  font-family: "Cormorant Garamond", serif;
  font-size: 40px;
  color: var(--sage-deep);
  font-style: italic;
  line-height: 1;
  transition: color .3s ease;
}
.value-title{
  font-family: "Noto Serif JP", serif;
  font-size: 21px;
  font-weight: 500;
  margin-top: 20px;
  margin-bottom: 14px;
  line-height: 1.55;
}
.value-body{
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.95;
}


/* ==========================================================================
   12. Component: Service Cards
   ========================================================================== */
.services{ background: var(--bg-sub); }

.svc-lead{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 40px;
}
.svc-card-lead{
  background: #fff;
  overflow: hidden;
  display: grid;
  grid-template-columns: 5fr 4fr;
  border: 1px solid var(--line-soft);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.svc-card-lead:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(42,45,40,0.15);
  border-color: var(--marsala-soft);
}
.svc-card-lead .thumb{ overflow: hidden; }
.svc-card-lead .thumb img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.svc-card-lead:hover .thumb img{ transform: scale(1.05); }
.svc-card-lead .body{
  padding: 32px 28px;
  display: flex; flex-direction: column;
}
.svc-card-lead .cat{
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: var(--sage-deep);
  letter-spacing: 0.16em;
  font-size: 13px;
}
.svc-card-lead .ttl{
  font-family: "Noto Serif JP", serif;
  font-size: 24px;
  font-weight: 500;
  margin-top: 8px;
  letter-spacing: 0.04em;
}
.svc-card-lead .desc{
  margin-top: 16px;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.9;
  flex: 1;
}
.svc-card-lead .link{
  margin-top: 20px;
  font-family: "Noto Serif JP", serif;
  font-size: 14px;
  color: var(--sage-deep);
  letter-spacing: 0.08em;
}
.svc-card-lead .link::after{ content: " →"; }

.svc-sub{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.svc-sub-card{
  background: #fff;
  border: 1px solid var(--line-soft);
  padding: 28px;
  transition: border-color .3s ease;
}
.svc-sub-card:hover{ border-color: var(--marsala-soft); }
.svc-sub-card .cat{
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: var(--sage-deep);
  letter-spacing: 0.16em;
  font-size: 12px;
}
.svc-sub-card .ttl{
  font-family: "Noto Serif JP", serif;
  font-size: 18px;
  font-weight: 500;
  margin-top: 8px;
}
.svc-sub-card .desc{
  margin-top: 12px;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.9;
}


/* ==========================================================================
   13. Component: Flow
   ========================================================================== */
.flow{ background: var(--bg-sub); }
.flow-list{ display: flex; flex-direction: column; gap: 0; }
.flow-step{
  display: grid;
  grid-template-columns: 120px 1fr 1.2fr;
  gap: 40px;
  align-items: center;
  padding: 36px 0;
  border-top: 1px solid var(--line-soft);
}
.flow-step:last-child{ border-bottom: 1px solid var(--line-soft); }
.flow-step .num{
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 44px;
  color: var(--sage-deep);
}
.flow-step .num .step{
  display: block;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--marsala);
  font-style: normal;
  font-family: "Noto Sans JP", sans-serif;
}
.flow-step .ttl{
  font-family: "Noto Serif JP", serif;
  font-size: 22px;
  font-weight: 500;
}
.flow-step .desc{
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.95;
}


/* ==========================================================================
   14. Component: FAQ
   ========================================================================== */
.first-faq-item{
  background: var(--bg-sub);
  padding: 28px 32px;
  border-left: 3px solid var(--sage-deep);
}
.first-faq-q{
  display: block;
  font-family: "Noto Serif JP", serif;
  font-size: 18px;
  color: var(--ink);
  line-height: 1.6;
  list-style: none;
  pointer-events: none;
}
.first-faq-q::-webkit-details-marker{ display: none; }
.first-faq-q::marker{ content: ""; }
.first-faq-mark{
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: var(--sage-deep);
  font-size: 20px;
}
.first-faq-plus{ display: none; }
.first-faq-a{
  margin-top: 12px;
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 2;
}

.faq{ background: var(--bg); }
.faq-list{ max-width: 880px; margin: 0 auto; }
.faq-item{ border-bottom: 1px solid var(--line-soft); }
.faq-q{
  width: 100%;
  text-align: left;
  padding: 28px 8px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  font-family: "Noto Serif JP", serif;
  font-size: 19px;
  color: var(--ink);
  min-height: 44px;
  transition: color .2s ease;
}
.faq-q:hover{ color: var(--sage-deep); }
.faq-q .mark{
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: var(--sage-deep);
  font-size: 22px;
  line-height: 1;
  margin-top: 4px;
}
.faq-q .plus{
  margin-left: auto;
  color: var(--sage-deep);
  font-size: 20px;
  transition: transform .3s ease;
}
.faq-item.open .faq-q .plus{ transform: rotate(45deg); }
.faq-a{
  display: none;
  padding: 0 8px 28px 24px;
  margin-left: 8px;
  border-left: 3px solid var(--marsala-line);
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 2;
}
.faq-item.open .faq-a{ display: block; }


/* ==========================================================================
   15. Component: Price
   ========================================================================== */
.price-simple{ background: var(--bg); }
.price-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.price-item{
  background: #fff;
  border: 1px solid var(--line-soft);
  padding: 32px 28px;
  position: relative;
}
.price-item::before{
  content: "";
  position: absolute; top: 0; left: 0;
  width: 40px; height: 3px;
  background: var(--marsala);
}
.price-item .cat{
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 12px;
  color: var(--sage-deep);
  letter-spacing: 0.14em;
}
.price-item .name{
  font-family: "Noto Serif JP", serif;
  font-size: 19px;
  font-weight: 500;
  margin-top: 8px;
}
.price-item .amount{
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--line-soft);
  font-family: "Cormorant Garamond", serif;
  font-size: 26px;
  color: var(--sage-deep);
}
.price-item .amount .from{
  font-size: 13px;
  color: var(--muted);
  font-family: "Noto Sans JP", sans-serif;
  margin-left: 4px;
}
.price-item .note{
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.8;
}
.price-cta{ margin-top: 40px; text-align: center; }

/* Shared first-visit course pricing */
.course-section{ padding: 100px 0; }
.course-section-treatment{ background: var(--bg); }
.course-section-beauty{ background: var(--bg-sub); }
.course-subhead{
  margin: -8px 0 28px;
  text-align: center;
}
.course-subhead h3{
  font-family: "Noto Serif JP", serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.course-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 1040px;
  margin: 0 auto;
}
.course-card{
  position: relative;
  min-width: 0;
  padding: 30px 32px;
  border: 1px solid var(--line-soft);
  background: #fff;
}
.course-card::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 3px;
  background: var(--marsala);
}
.course-name{
  font-family: "Noto Serif JP", serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.6;
}
.course-meta{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--line-soft);
}
.course-time{
  color: var(--sage-deep);
  font-family: "Noto Serif JP", serif;
  font-size: 17px;
  letter-spacing: 0.08em;
}
.course-price{
  color: var(--sage-deep);
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: 28px;
  white-space: nowrap;
}
.course-description{
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.9;
}
.course-note{
  max-width: 1040px;
  margin: 28px auto 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.9;
  text-align: center;
}
.course-guidance{
  padding: 80px 0;
  background: var(--bg);
}
.course-guidance-list{
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.course-guidance-list li{
  position: relative;
  padding: 18px 22px 18px 48px;
  border: 1px solid var(--line-soft);
  background: var(--bg-sub);
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.9;
}
.course-guidance-list li::before{
  content: "・";
  position: absolute;
  top: 18px;
  left: 22px;
  color: var(--sage-deep);
}
.course-link{
  margin-top: 36px;
  text-align: center;
}


/* ==========================================================================
   16. Component: Gallery
   ========================================================================== */
.gallery{ background: var(--bg-sub); }
.gallery-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.gallery-grid .g{ overflow: hidden; }
.gallery-grid .g img{
  width: 100%; height: 100%;
  object-fit: cover;
  aspect-ratio: 4/5;
  transition: transform .5s ease;
}
.gallery-grid .g:hover img{ transform: scale(1.05); }
.gallery-grid .g1{ grid-row: span 2; }
.gallery-grid .g1 img{ aspect-ratio: 4/5.5; }
.gallery-note{
  text-align: center;
  margin-top: 24px;
  font-size: 13px;
  color: var(--muted);
}


/* ==========================================================================
   17. Component: Concept / Director
   ========================================================================== */
.concept{ background: var(--bg); }
.concept-inner{
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 80px;
  align-items: center;
}
.concept-visual{ position: relative; aspect-ratio: 4/5; }
.concept-visual img{ width: 100%; height: 100%; object-fit: cover; }
.concept-visual .caption{
  position: absolute;
  right: -20px; bottom: 40px;
  background: var(--sage-deep);
  color: var(--cream);
  padding: 24px 28px;
  max-width: 280px;
  font-family: "Noto Serif JP", serif;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.06em;
  border-top: 4px solid var(--marsala);
}
.concept p{
  font-size: 17px;
  line-height: 2.1;
  color: var(--ink-soft);
  margin-top: 24px;
}
.concept p strong,
.hero-lede strong{
  font-weight: 500;
  color: var(--ink);
  background: linear-gradient(180deg, transparent 65%, rgba(138,165,122,0.28) 65%);
  padding: 0 2px;
}

.director{ background: var(--bg); }
.director-inner{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
}
.director-photo{ aspect-ratio: 3/4; overflow: hidden; }
.director-photo img{ width: 100%; height: 100%; object-fit: cover; }
.director-body h3{
  font-family: "Noto Serif JP", serif;
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 500;
  line-height: 1.7;
  color: var(--ink);
  margin-top: 24px;
}
.director-body p{
  font-size: 17px;
  line-height: 2.1;
  color: var(--ink-soft);
  margin-top: 24px;
}
.director-sign{
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line-soft);
  display: flex; gap: 32px; align-items: center;
}
.director-sign .role{
  font-family: "Noto Serif JP", serif;
  font-size: 13px;
  color: var(--sage-deep);
  letter-spacing: 0.16em;
}
.director-sign .name{
  font-family: "Noto Serif JP", serif;
  font-size: 26px;
  margin-top: 6px;
}
.director-sign .name .en{
  display: block;
  margin-top: 4px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.16em;
}


/* ==========================================================================
   18. Component: Legs Feature
   ========================================================================== */
.legs-feature{
  background: var(--bg-deep);
  position: relative;
  overflow: hidden;
}
.legs-feature-inner{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: center;
}
.legs-copy .lede-lg{
  font-family: "Noto Serif JP", serif;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-top: 32px;
}
.legs-copy p{
  margin-top: 24px;
  font-size: 17px;
  line-height: 2;
  color: var(--ink-soft);
}
.legs-copy .list{
  margin-top: 32px;
  padding: 24px 28px;
  background: rgba(255,255,255,0.6);
  border-left: 3px solid var(--sage-deep);
}
.legs-copy .list-title{
  font-family: "Noto Serif JP", serif;
  font-size: 15px;
  color: var(--sage-deep);
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.legs-copy .list ul{
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
}
.legs-copy .list li{
  padding-left: 18px;
  position: relative;
  font-size: 16px;
  color: var(--ink);
  line-height: 1.8;
}
.legs-copy .list li::before{
  content: "";
  position: absolute;
  left: 0; top: 14px;
  width: 8px; height: 1px;
  background: var(--sage-deep);
}
.legs-visual{ aspect-ratio: 4/5; overflow: hidden; }
.legs-visual img{ width: 100%; height: 100%; object-fit: cover; }
.legs-cta-row{ margin-top: 40px; }


/* ==========================================================================
   19. Component: Beauty
   ========================================================================== */
.beauty-feature{ background: var(--bg-sub); }
.beauty-inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.beauty-visual{ aspect-ratio: 4/5; overflow: hidden; }
.beauty-visual img{ width: 100%; height: 100%; object-fit: cover; }
.beauty-copy .en{
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.22em;
  color: var(--sage-deep);
}
.beauty-copy h2{
  font-family: "Noto Serif JP", serif;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.04em;
  margin-top: 16px;
}
.beauty-copy p{
  margin-top: 24px;
  font-size: 17px;
  line-height: 2.05;
  color: var(--ink-soft);
}


/* ==========================================================================
   20. Component: Contact Methods
   ========================================================================== */
.contact-methods{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 60px;
}
.contact-methods.method-count-1{ grid-template-columns: 1fr; }
.contact-methods.method-count-2{ grid-template-columns: repeat(2, 1fr); }
.method-card{
  background: #fff;
  border: 1px solid var(--line-soft);
  padding: 40px 32px;
  text-align: center;
  transition: border-color .3s ease, transform .3s ease;
}
.method-card:hover{ border-color: var(--marsala-soft); transform: translateY(-4px); }
.method-card .icon{
  width: 64px; height: 64px;
  margin: 0 auto;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.method-card.web .icon{ background: var(--sage-deep); }
.method-card.line .icon{ background: var(--line-brand); }
.method-card.tel .icon{ background: var(--marsala); }
.method-card .title{
  font-family: "Noto Serif JP", serif;
  font-size: 20px;
  margin-top: 20px;
  font-weight: 500;
}
.method-card .val{
  margin-top: 12px;
  font-size: 14px;
  color: var(--muted);
  font-family: "Cormorant Garamond", serif;
  letter-spacing: 0.14em;
}
.method-card .desc{
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 12px;
  line-height: 1.9;
}


/* ==========================================================================
   21. CTA Band
   ========================================================================== */
.cta-band{
  background: var(--sage-deep);
  color: var(--cream);
  padding: 100px 0;
}
.cta-band h2{
  color: var(--cream);
  font-family: "Noto Serif JP", serif;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.6;
}
.cta-band .sect-eyebrow{ color: var(--sage-soft); }
.cta-band .sect-eyebrow::before{ background: var(--sage-soft); }
.cta-band .lede{
  color: rgba(247,244,234,0.85);
  margin-top: 24px;
  font-size: 17px;
  line-height: 2.05;
  max-width: 640px;
}
.cta-buttons{
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.cta-buttons .btn-primary{ background: var(--cream); color: var(--sage-deep); }
.cta-buttons .btn-primary:hover{ background: #fff; }
.cta-buttons .btn-outline{ color: var(--cream); border-color: var(--cream); }
.cta-buttons .btn-outline:hover{ background: var(--cream); color: var(--sage-deep); }
.cta-note{
  margin-top: 24px;
  font-size: 13px;
  color: rgba(247,244,234,0.6);
}


/* ==========================================================================
   22. Access / Hours
   ========================================================================== */
.access{ background: var(--bg-sub); }
.access-inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.access-inner.no-map{ grid-template-columns: 1fr; }
.access-info dl{
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 20px 24px;
}
.access-info dt{
  font-family: "Noto Serif JP", serif;
  color: var(--sage-deep);
  font-size: 15px;
  letter-spacing: 0.08em;
}
.access-info dd{
  font-size: 16px;
  color: var(--ink);
  line-height: 1.9;
}
.access-info dd .todo{
  color: var(--muted);
  font-size: 14px;
  font-style: italic;
}
.access-map{
  background: #fff;
  aspect-ratio: 4/3;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-soft);
}
.access-map iframe{
  width: 100%; height: 100%;
  border: 0;
  filter: grayscale(0.2) contrast(1.05);
}

.hours-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin-top: 20px;
}
.hours-table th, .hours-table td{
  padding: 14px 8px;
  text-align: center;
  border-top: 1px solid var(--line-soft);
}
.hours-table th{
  font-family: "Noto Serif JP", serif;
  color: var(--muted);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.14em;
}
.hours-table tr:last-child td{ border-bottom: 1px solid var(--line-soft); }
.hours-table td.closed{ color: var(--danger); }


/* ==========================================================================
   23. Footer
   ========================================================================== */
.site-footer{
  background: var(--footer-bg);
  color: var(--footer-fg);
  padding: 80px 0 40px;
}
.site-footer h4{
  color: #fff;
  font-family: "Noto Serif JP", serif;
  font-size: 16px;
  margin-bottom: 20px;
}
.site-footer a{ color: var(--footer-fg); }
.site-footer a:hover{ color: #fff; }
.footer-grid{
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
}
.footer-brand-name{
  font-family: "Yuji Syuku", "Noto Serif JP", serif;
  font-size: 22px;
  color: #fff;
  letter-spacing: 0.12em;
}
.footer-brand-sub{
  font-size: 12px;
  color: var(--footer-muted);
  letter-spacing: 0.14em;
  margin-top: 6px;
}
.footer-list{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
}
.footer-bottom{
  margin-top: 60px;
  padding-top: 24px;
  border-top: 1px solid var(--footer-line);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--footer-muted);
}


/* ==========================================================================
   24. Floating CTA (PC のみ表示)
   ========================================================================== */
.floating-cta{
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.floating-cta a{
  display: inline-flex;
  align-items: center;
  padding: 16px 24px;
  border-radius: 999px;
  background: var(--sage-deep);
  color: var(--cream);
  font-family: "Noto Serif JP", serif;
  font-size: 14px;
  letter-spacing: 0.1em;
  box-shadow: 0 12px 30px -8px rgba(0,0,0,0.25);
  transition: transform .2s ease;
}
.floating-cta a:hover{ transform: translateY(-3px); }


/* ==========================================================================
   25. Mobile Fixed CTA Bar (Mobile のみ表示)
   ========================================================================== */
.mobile-cta-bar{
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  background: rgba(253,253,251,0.98);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line-soft);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}
.mobile-cta-bar-inner{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 480px; margin: 0 auto;
}
.mobile-cta-bar-inner.cta-count-1{ grid-template-columns: 1fr; }
.mobile-cta-bar-inner.cta-count-2{ grid-template-columns: repeat(2, 1fr); }
.mobile-cta-btn{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 6px;
  min-height: 56px;
  border-radius: 12px;
  font-size: 12px;
  letter-spacing: 0.08em;
  font-family: "Noto Sans JP", sans-serif;
  text-align: center;
  transition: transform .15s ease;
}
.mobile-cta-btn:active{ transform: scale(0.97); }
.mobile-cta-btn .lbl{ font-size: 11px; }
.mobile-cta-btn svg{ width: 22px; height: 22px; }
.mobile-cta-btn.web{ background: var(--sage-deep); color: var(--cream); }
.mobile-cta-btn.line{ background: var(--line-brand); color: #fff; }
.mobile-cta-btn.tel{ background: var(--marsala); color: var(--cream); }


/* ==========================================================================
   26. Page Hero (下層ページ共通)
   ========================================================================== */
.page-hero{
  padding: 160px 0 80px;
  background: linear-gradient(180deg, var(--bg-sub) 0%, var(--bg) 100%);
}
.page-hero.deep{
  background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 100%);
}
.page-hero-inner{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
}
.page-hero-inner.centered{
  grid-template-columns: 1fr;
  text-align: center;
}
.page-hero .eyebrow-line{
  font-family: "Noto Serif JP", serif;
  color: var(--sage-deep);
  letter-spacing: 0.18em;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.page-hero .eyebrow-line::before{
  content: "";
  width: 32px; height: 1px;
  background: var(--sage-deep);
}
.page-hero-inner.centered .eyebrow-line{ justify-content: center; }
.page-hero-inner.centered .eyebrow-line::before{ display: none; }
.page-hero h1{
  font-family: "Noto Serif JP", serif;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.5;
  margin-top: 24px;
}
.page-hero h1 .em{ color: var(--sage-deep); }
.page-hero .lede{
  margin-top: 28px;
  font-size: 17px;
  line-height: 2.05;
  color: var(--ink-soft);
  max-width: 540px;
}
.page-hero-inner.centered .lede{ margin-left: auto; margin-right: auto; }
.breadcrumb{
  margin-top: 20px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.14em;
}
.breadcrumb a{ color: var(--muted); }
.breadcrumb a:hover{ color: var(--sage-deep); }
.page-hero-visual{ aspect-ratio: 3/4; overflow: hidden; }
.page-hero-visual img{ width: 100%; height: 100%; object-fit: cover; }
.page-hero-visual.landscape{ aspect-ratio: 4/3; }


/* ==========================================================================
   27. Responsive: Mobile (≤768px)
   ========================================================================== */
@media (max-width: 768px){
  section{ padding: 72px 0; }
  .container, .container-narrow{ padding: 0 24px; }

  /* Header */
  .site-header .container{ height: 64px; }
  .brand-logo{ height: 62px; }
  .header-cta{ display: none; }
  .nav{ display: none; }
  .nav-toggle{ display: inline-flex; }

  /* Hero */
  .hero{ padding-top: 90px; }
  .hero-inner{
    grid-template-columns: 1fr;
    align-items: stretch;
    padding: 20px 20px 48px;
    gap: 32px;
    min-height: auto;
  }
  .hero-copy{ order: 1; padding-bottom: 0; }
  .hero-visual{ order: 2; }
  .hero-title{ font-size: 30px; line-height: 1.5; margin-top: 20px; }
  .hero-lede{ font-size: 16px; line-height: 1.95; margin-top: 24px; }
  .hero-motto{
    margin-top: 28px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .hero-motto .ja{ font-size: 17px; }
  .hero-cta-row{
    margin-top: 28px;
    flex-direction: column;
    align-items: stretch;
  }
  .hero-cta-row .btn{ width: 100%; }
  .btn-lg{ padding: 20px 24px; min-height: 56px; font-size: 15px; }
  .hero-visual .frame{ max-height: 480px; aspect-ratio: 4/5; }
  .hero-visual .frame img{ object-position: center 18%; }
  .hero-signature{
    position: static;
    left: auto; bottom: auto;
    padding: 16px 20px;
    margin-top: 12px;
    max-width: none;
  }

  /* Section head */
  .sect-head h2{ font-size: 24px; line-height: 1.55; }
  .sect-head{ margin-bottom: 40px; }
  .sect-lede{ font-size: 16px; line-height: 1.95; margin-top: 20px; }

  /* Worry */
  .worry-grid{ grid-template-columns: 1fr; }
  .legs-worry-grid{ grid-template-columns: 1fr !important; }
  .worry-card{ padding: 20px; }
  .worry-text{ font-size: 16px; }
  .worry-note{ font-size: 18px; }
  .worry-note .accent{ font-size: 20px; }

  /* Price: keep each timed plan readable without horizontal overflow. */
  .price-grid-4{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100%;
  }
  .price-grid-4 > div{
    width: 100%;
    min-width: 0;
    padding: 24px 20px !important;
  }
  .combo-grid{
    grid-template-columns: 1fr !important;
    width: 100%;
  }
  .combo-grid > div{
    width: 100%;
    min-width: 0;
  }

  /* Shared course pricing */
  .course-section{ padding: 72px 0; }
  .course-grid{
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
  }
  .course-card{ padding: 24px 20px; }
  .course-name{ font-size: 18px; }
  .course-meta{ gap: 12px; }
  .course-time{ font-size: 16px; }
  .course-price{ font-size: 25px; }
  .course-description{ font-size: 15px; }
  .course-note{
    margin-top: 22px;
    text-align: left;
  }
  .course-guidance{ padding: 64px 0; }
  .course-guidance-list li{ padding: 16px 18px 16px 42px; }
  .course-guidance-list li::before{ top: 16px; left: 18px; }

  /* Concept */
  .concept-inner{ grid-template-columns: 1fr; gap: 32px; }
  .concept-visual .caption{
    position: static;
    right: auto; bottom: auto;
    margin-top: -20px;
    max-width: 92%;
  }
  .concept p{ font-size: 16px; }

  /* Legs */
  .legs-feature-inner{ grid-template-columns: 1fr; gap: 32px; }
  .legs-copy .lede-lg{ font-size: 22px; }
  .legs-copy p{ font-size: 16px; }
  .legs-copy .list ul{ grid-template-columns: 1fr; }
  .legs-copy .list li{ font-size: 16px; }
  .legs-cta-row .btn{ width: 100%; }

  /* Values */
  .values-grid{ grid-template-columns: 1fr; gap: 16px; }
  .values-grid > :nth-child(4),
  .values-grid > :nth-child(5){ grid-column: auto; }
  .value-card{ padding: 28px 24px; }
  .value-title{ font-size: 19px; }
  .value-body{ font-size: 16px; }

  /* Services */
  .svc-lead{ grid-template-columns: 1fr; gap: 16px; }
  .svc-sub{ grid-template-columns: 1fr; gap: 12px; }
  .svc-card-lead{ grid-template-columns: 1fr; }
  .svc-card-lead .thumb{ aspect-ratio: 16/9; }
  .svc-card-lead .body{ padding: 24px; }
  .svc-card-lead .ttl{ font-size: 20px; }
  .svc-card-lead .desc{ font-size: 16px; }
  .svc-sub-card .desc{ font-size: 16px; }

  /* Flow */
  .flow-step{
    grid-template-columns: 60px 1fr;
    gap: 16px;
    padding: 24px 0;
  }
  .flow-step .num{ font-size: 34px; }
  .flow-step .num .step{ font-size: 10px; }
  .flow-step .ttl{ font-size: 19px; }
  .flow-step .desc{ font-size: 16px; grid-column: 2; }

  /* Director */
  .director-inner{ grid-template-columns: 1fr; gap: 32px; }
  .director-photo{ aspect-ratio: 4/5; }
  .director-photo img{ object-position: center 22%; }
  .director-body h3{ font-size: 21px; }
  .director-body p{ font-size: 16px; }
  .director-sign{
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  /* Beauty */
  .beauty-inner{ grid-template-columns: 1fr; gap: 32px; }
  .beauty-copy h2{ font-size: 24px; }
  .beauty-copy p{ font-size: 16px; }

  /* Price */
  .price-list{ grid-template-columns: 1fr; gap: 14px; }
  .price-item{ padding: 24px 22px; }
  .price-item .note{ font-size: 14px; }

  /* Gallery */
  .gallery-grid{ grid-template-columns: 1fr 1fr; gap: 12px; }
  .gallery-grid .g1{ grid-row: auto; grid-column: span 2; }
  .gallery-grid .g1 img{ aspect-ratio: 16/10; }

  /* FAQ */
  .first-inner{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .first-inner > div{ gap: 12px !important; }
  .first-faq-item{ padding: 0; }
  .first-faq-q{
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 20px;
    cursor: pointer;
    pointer-events: auto;
  }
  .first-faq-plus{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    color: var(--sage-deep);
    font-family: "Noto Sans JP", sans-serif;
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
    transition: transform .3s ease;
  }
  .first-faq-item[open] .first-faq-plus{ transform: rotate(45deg); }
  .first-faq-a{
    margin-top: 0;
    padding: 0 20px 20px 62px;
    font-size: 15px;
    line-height: 1.9;
  }
  .faq-q{
    font-size: 17px;
    padding: 24px 8px;
    min-height: 60px;
  }
  .faq-a{ font-size: 16px; padding: 0 8px 24px 20px; }

  /* CTA band */
  .cta-band h2{ font-size: 24px; line-height: 1.55; }
  .cta-band .lede{ font-size: 16px; }
  .cta-buttons{
    flex-direction: column;
    align-items: stretch;
  }
  .cta-buttons .btn{ width: 100%; }

  /* Contact methods */
  .contact-methods,
  .contact-methods.method-count-2{ grid-template-columns: 1fr; gap: 12px; }
  .method-card{ padding: 32px 24px; }

  /* Access */
  .access-inner{ grid-template-columns: 1fr; gap: 32px; }
  .access-info dl{ grid-template-columns: 90px 1fr; gap: 12px 16px; }
  .access-info dd{ font-size: 16px; }
  .hours-table{ font-size: 13px; }
  .hours-table th, .hours-table td{ padding: 10px 4px; }

  /* Page hero */
  .page-hero{ padding: 130px 0 60px; }
  .page-hero-inner{ grid-template-columns: 1fr; gap: 32px; }
  .page-hero h1{ font-size: 28px; }
  .page-hero .lede{ font-size: 16px; }

  /* Footer */
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-bottom{ flex-direction: column; gap: 12px; }

  /* Show mobile CTA bar */
  .mobile-cta-bar{ display: block; }
  .floating-cta{ display: none; }
  body{ padding-bottom: 90px; }
}


/* ==========================================================================
   28. Responsive: Small (≤400px)
   ========================================================================== */
@media (max-width: 400px){
  .hero-title{ font-size: 27px; }
  .sect-head h2{ font-size: 22px; }
  .page-hero h1{ font-size: 26px; }
  .worry-card{ padding: 18px; }
}


/* ==========================================================================
   PC only reset (>= 769px)
   ========================================================================== */
@media (min-width: 769px){
  .nav-toggle{ display: none !important; }
  .mobile-cta-bar{ display: none !important; }
  .mobile-menu{ display: none !important; }
}

/* ============================================
   29. WordPress theme integration
   ============================================ */
.footer-message{
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.95;
  color: #A0A498;
}
.mobile-menu-contact{ width: 100%; }
.cta-band-content{ max-width: 720px; }
.wp-default-content{ padding: 140px 0 100px; min-height: 60vh; }
.wp-default-content .entry-content,
.wp-default-content .entry-summary{ margin-top: 32px; }
.post-summary{ padding: 40px 0; border-bottom: 1px solid var(--line-soft); }

/* Reservation page: keep the booking plugin inside the site's content width. */
.reserve-section{ padding: 80px 0 120px; background: var(--bg-sub); }
.reserve-booking{
  max-width: 960px;
  min-width: 0;
  margin: 0 auto;
  padding: 40px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  overflow-x: auto;
}
.reserve-booking > *{ max-width: 100%; }
@media (max-width: 768px){
  .reserve-section{ padding: 64px 0 96px; }
  .reserve-booking{ padding: 20px 16px; }
}
@media (min-width: 769px) and (max-width: 1100px){
  .site-header .nav, .site-header .header-cta{ display: none; }
  .site-header .nav-toggle{ display: inline-flex !important; }
  .mobile-menu.open{ display: block !important; }
}

.contact-method-section{ padding: 60px 0; }
.contact-opening-note{
  max-width: 720px;
  margin: 40px auto 0;
  padding: 24px 32px;
  border: 1px solid var(--sage-soft);
  background: rgba(255,255,255,0.7);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.95;
}
.contact-opening-note-title,
.form-privacy-title{
  color: var(--sage-deep);
  font-family: "Noto Serif JP", serif;
}
.contact-form-section{
  padding: 80px 0 120px;
  background: var(--bg-sub);
}
.form-wrap{
  max-width: 720px;
  margin: 0 auto;
  padding: 60px;
  border: 1px solid var(--line-soft);
  background: #fff;
}
.form-field{ margin-bottom: 24px; }
.form-label{
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
  font-family: "Noto Serif JP", serif;
  font-size: 16px;
  font-weight: 500;
}
.form-required,
.form-optional{
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
}
.form-required{ background: var(--sage-deep); color: var(--cream); }
.form-optional{ border: 1px solid var(--line); background: var(--bg-sub); color: var(--muted); }
.form-radio-group{ display: flex; flex-wrap: wrap; gap: 12px; }
.form-radio{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 14px 20px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 15px;
  cursor: pointer;
}
.form-control{
  width: 100%;
  min-height: 52px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.form-textarea{ min-height: 160px; line-height: 1.8; resize: vertical; }
.form-privacy-note{
  margin-top: 40px;
  padding: 20px 24px;
  background: var(--bg-sub);
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 2;
}
.form-actions{ margin-top: 32px; text-align: center; }
.form-submit{
  width: 100%;
  max-width: 360px;
  min-height: 60px;
  padding: 24px 40px;
  border: 0;
  border-radius: 999px;
  background: var(--sage-deep);
  color: var(--cream);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  letter-spacing: 0.16em;
  cursor: pointer;
}

body.admin-bar .site-header{ top: 32px; }
body.admin-bar .mobile-menu{ top: 32px; }

@media (max-width: 782px){
  body.admin-bar .site-header{ top: 46px; }
  body.admin-bar .mobile-menu{ top: 46px; }
  .form-wrap{ padding: 32px 24px; }
}