:root {
    --white: #fdfcfa;
    --paper: #f6f2ec;
    --sand: #ece4d8;
    --line-soft: #e6ddd0;
    --taupe: #a68a6d;
    --taupe-dark: #8a6f56;
    --charcoal: #2e2b27;
    --ink: #3c3831;
    --ink-soft: #837a6d;
    --ink-faint: #a99f8f;
    --cta: #b8552b;
    --cta-dark: #9c4620;
    --cta-pale: #f4e4da;
    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-sm: 10px;
    --shadow-soft: 0 4px 28px rgba(46, 43, 39, 0.05);
    --shadow-card: 0 2px 18px rgba(46, 43, 39, 0.045);
    --header-h: 76px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
  body {
    margin: 0;
    font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    color: var(--ink);
    background: var(--white);
    line-height: 1.9;
    -webkit-font-smoothing: antialiased;
    font-weight: 400;
  }
  img { max-width: 100%; display: block; }
  a { text-decoration: none; color: inherit; }
  ul { margin: 0; padding: 0; list-style: none; }
  section { padding: 96px 24px; }
  .container { max-width: 1080px; margin: 0 auto; }

  .eyebrow {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: var(--taupe-dark);
    margin-bottom: 22px;
    text-transform: uppercase;
  }
  .section-title {
    font-size: 26px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.06em;
    margin: 0 0 20px;
    color: var(--charcoal);
  }
  .section-lead {
    color: var(--ink-soft);
    font-size: 14.5px;
    letter-spacing: 0.02em;
    margin: 0 0 56px;
  }
  .section-head { text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; }

  /* ---------- scroll reveal ---------- */
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
    transition-delay: var(--reveal-delay, 0s);
  }
  .reveal.is-visible { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
  }

  /* placeholder image block: swap inner content for a real <img> */
  .ph-image {
    background: linear-gradient(160deg, var(--paper), var(--sand));
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--ink-faint);
    text-align: center;
    gap: 10px;
    padding: 20px;
  }
  .ph-image svg { width: 34px; height: 34px; opacity: 0.55; stroke-width: 1.2; }
  .ph-image span { font-size: 12px; font-weight: 500; letter-spacing: 0.05em; opacity: 0.85; }

  /* ---------- Header ---------- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: rgba(253, 252, 250, 0.86);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--line-soft);
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    font-size: 17px;
    letter-spacing: 0.12em;
    color: var(--charcoal);
  }
  .brand .logo-mark { height: 42px; width: auto; display: block; flex-shrink: 0; }
  .brand .mark {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--charcoal);
    color: var(--paper);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    flex-shrink: 0;
  }
  .brand small {
    display: block;
    font-size: 9.5px;
    font-weight: 400;
    letter-spacing: 0.14em;
    color: var(--ink-faint);
    margin-top: 2px;
  }
  .nav-desktop {
    display: none;
    gap: 36px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
  }
  .nav-desktop li { list-style: none; }
  .nav-desktop a { position: relative; padding-bottom: 4px; }
  .nav-desktop a::after {
    content: "";
    position: absolute;
    left: 0; right: 100%; bottom: 0;
    height: 1px;
    background: var(--taupe-dark);
    transition: right 0.35s var(--ease);
  }
  .nav-desktop a:hover { color: var(--charcoal); }
  .nav-desktop a:hover::after { right: 0; }

  .btn-hotpepper {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--cta);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.04em;
    padding: 11px 18px;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(184, 85, 43, 0.28);
    white-space: nowrap;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s ease;
  }
  .btn-hotpepper:hover { background: var(--cta-dark); }
  .btn-hotpepper:active { transform: scale(0.97); }
  .btn-hotpepper svg { width: 16px; height: 16px; stroke-width: 1.8; flex-shrink: 0; }

  .btn-cta {
    display: block;
    width: 100%;
    background: var(--cta);
    color: #fff;
    font-weight: 600;
    font-size: 15.5px;
    letter-spacing: 0.03em;
    padding: 17px;
    border-radius: 999px;
    box-shadow: 0 12px 26px rgba(184, 85, 43, 0.3);
    transition: transform .2s var(--ease), background .2s ease;
  }
  .btn-cta:hover { background: var(--cta-dark); }
  .btn-cta:active { transform: scale(0.98); }
  .btn-cta .sub-label { display: block; font-size: 10.5px; font-weight: 400; letter-spacing: 0.04em; opacity: 0.85; margin-top: 4px; }

  .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--charcoal);
    color: var(--charcoal);
    background: transparent;
    padding: 15px 34px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    transition: background .25s ease, color .25s ease;
  }
  .btn-ghost:hover { background: var(--charcoal); color: var(--white); }
  .btn-ghost svg { width: 14px; height: 14px; stroke-width: 1.8; transition: transform .25s var(--ease); }
  .btn-ghost:hover svg { transform: translateX(4px); }

  /*
    全10ページの @media (min-width: 860px) ブロックの先頭で共通していた部分だけを抽出。
    ページ固有の見出しサイズ調整等（.hero h1 や .page-hero h1 など）は各テンプレート側の
    news.css 等に個別に持たせてください。
  */
  /* ---------- Footer (site-footer) ---------- */
  footer.site-footer {
    margin-top: 56px;
    background: var(--paper);
    color: var(--ink-soft);
    padding: 44px 24px calc(108px + env(safe-area-inset-bottom));
    font-size: 12px;
    letter-spacing: 0.02em;
    text-align: center;
    border-top: 1px solid var(--line-soft);
  }
  footer.site-footer .brand { justify-content: center; color: var(--charcoal); margin-bottom: 14px; }
  footer.site-footer p { margin: 6px 0; }
  footer.site-footer .copyright { margin-top: 20px; color: var(--ink-faint); font-size: 11px; }
  footer.site-footer .logo-mark { height: 32px; }

  /* ---------- Mobile sticky booking bar ---------- */
  .mobile-book-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    background: rgba(253, 252, 250, 0.92);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line-soft);
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  }
  .mobile-book-bar .btn-cta { font-size: 15px; padding: 15px; }

  @media (min-width: 860px) {
    .nav-desktop { display: flex; }
    .site-header { padding: 0 40px; }
    section { padding: 128px 40px; }
    .section-title { font-size: 32px; }
    .mobile-book-bar { display: none; }
    footer.site-footer { padding: 52px 40px; }
  }

  /* ---------- Footer CTA (全ページ共通で使用) ---------- */
  .footer-cta {
    margin-top: 48px;
    background: var(--charcoal);
    border-radius: var(--radius-lg);
    padding: 56px 32px;
    text-align: center;
    color: var(--white);
  }
  .footer-cta h3 { font-size: 21px; font-weight: 400; letter-spacing: 0.06em; margin: 0 0 12px; }
  .footer-cta p { font-size: 13px; letter-spacing: 0.02em; color: rgba(253,252,250,0.6); margin: 0 0 28px; }
  .footer-cta .btn-cta { max-width: 320px; margin: 0 auto; }