/* ==========================================================================
   ONE BEANS 博多那珂店 — Quiet Luxury Editorial
   深緑×アイボリー×真鍮。金は線でのみ。豆はブランドの核。
   ========================================================================== */

:root {
  --brand-primary: #022F39;
  --brand-primary-dark: #01212a;
  --brand-primary-soft: #0a3d49;
  --brand-accent: #D0AC6D;
  --brand-accent-soft: rgba(208, 172, 109, 0.35);
  /* キャンペーン専用(期間限定の例外配色): 深緑の補色=ボルドー × シャンパンゴールド */
  --cp-wine: #5E1623;
  --cp-wine-deep: #3B0C16;
  --cp-wine-dark: #21060C;
  --cp-champagne: #EAD6AE;
  --cp-champagne-hi: #FBF1DC;
  --cp-champagne-deep: #B48C55;
  --cp-blush: #F7ECE6;
  --font-poster: "Bodoni Moda", "Shippori Mincho", serif;
  --brand-ivory: #FAF7F2;
  --brand-ivory-deep: #F2EDE4;
  --brand-surface: #FFFFFF;
  --brand-ink: #1F2A2E;
  --brand-ink-sub: #5E6B6F;
  --brand-line: #E2DCD2;
  --line-green: #06C755; /* LINEボタン専用 */

  --font-heading: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-body: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-en: "Marcellus", "Times New Roman", serif;
  --font-num: "Inter", sans-serif;
  --font-display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;

  --w-content: 1200px;
  --w-wide: 1360px;
  --w-prose: 680px;

  --sp-section: clamp(7rem, 16vw, 12rem);
  --radius-card: 12px;
  --radius-btn: 8px;
  --shadow-card: 0 1px 3px rgba(2, 47, 57, 0.08), 0 8px 32px rgba(2, 47, 57, 0.06);
  --shadow-float: 0 8px 40px rgba(2, 47, 57, 0.22);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.25s;
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--brand-ink);
  background: var(--brand-ivory);
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }

::selection { background: var(--brand-primary); color: var(--brand-ivory); }

:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
.theme-green :focus-visible,
.site-footer :focus-visible { outline-color: var(--brand-accent); }

.skip-link {
  position: fixed; top: -100px; left: 16px; z-index: 200;
  background: var(--brand-primary); color: #fff;
  padding: 10px 18px; border-radius: 0 0 8px 8px;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--brand-primary);
}
.theme-green h1, .theme-green h2, .theme-green h3, .theme-green h4 { color: var(--brand-ivory); }

.numeric, .price, time {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.en {
  font-family: var(--font-en);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: 22px;
}
.eyebrow::before {
  content: "";
  width: 34px; height: 1px;
  background: var(--brand-accent);
  transform-origin: left center;
}

.section-heading { margin-bottom: clamp(2.4rem, 5vw, 4rem); }
.section-heading h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 700;
}
.section-heading .heading-note {
  margin-top: 14px;
  color: var(--brand-ink-sub);
  font-size: 15px;
  max-width: 44em;
}
.theme-green .section-heading .heading-note { color: rgba(250, 247, 242, 0.72); }

.lead {
  font-size: clamp(1.02rem, 1.6vw, 1.15rem);
  line-height: 2.1;
  max-width: var(--w-prose);
}
.prose > * + * { margin-top: 1.4em; }
.prose { max-width: var(--w-prose); }

/* 行マスク見出し(JSがspanを包む) */
.line-mask .lm-line { display: block; overflow: hidden; }
.line-mask .lm-inner { display: block; will-change: transform; }

/* 巨大背景英字 */
.bg-word {
  position: absolute;
  z-index: 0;
  font-family: var(--font-en);
  font-size: clamp(6rem, 18vw, 15rem);
  letter-spacing: 0.08em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(208, 172, 109, 0.28);
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.theme-ivory .bg-word { -webkit-text-stroke-color: rgba(2, 47, 57, 0.08); }

/* 縦書きラベル */
.v-label {
  writing-mode: vertical-rl;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--brand-accent);
}

/* 金の罫線(scaleXで伸ばす) */
.gold-rule {
  height: 1px;
  background: linear-gradient(90deg, var(--brand-accent), var(--brand-accent-soft));
  transform-origin: left center;
  border: 0;
}
.gold-rule--dot { position: relative; overflow: visible; }
.gold-rule--dot::after {
  content: "";
  position: absolute; right: -3px; top: 50%;
  width: 9px; height: 7px;
  transform: translateY(-50%);
  background: var(--brand-accent);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; /* 豆 */
}

.image-note {
  font-size: 12px;
  color: var(--brand-ink-sub);
  margin-top: 12px;
  letter-spacing: 0.04em;
}
.theme-green .image-note { color: rgba(250, 247, 242, 0.6); }

/* ---------- Layout ---------- */
.container { width: min(var(--w-content), calc(100% - 48px)); margin-inline: auto; }
.container--wide { width: min(var(--w-wide), calc(100% - 40px)); margin-inline: auto; }

.section { position: relative; padding-block: var(--sp-section); }
.section--flush-top { padding-top: 0; }
.section--tight { padding-block: clamp(3.5rem, 8vw, 6rem); }

.theme-green {
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(208, 172, 109, 0.07), transparent 55%),
    var(--brand-primary);
  color: rgba(250, 247, 242, 0.88);
}
.theme-ivory-deep { background: var(--brand-ivory-deep); }

/* 豆のあしらい(SVGインライン用の器) */
.bean-deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
}
.bean-deco svg { display: block; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 32px;
  border-radius: var(--radius-btn);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  transition: background-color var(--dur-fast), color var(--dur-fast),
              border-color var(--dur-fast), transform var(--dur-fast);
  border: 1px solid transparent;
  text-align: center;
}
.btn--primary { background: var(--brand-primary); color: #fff; }
.btn--primary:hover { background: var(--brand-primary-dark); }
.btn--ghost { border-color: var(--brand-primary); color: var(--brand-primary); background: transparent; }
.btn--ghost:hover { background: var(--brand-primary); color: #fff; }
.btn--light { border-color: rgba(250,247,242,0.55); color: var(--brand-ivory); }
.btn--light:hover { background: var(--brand-ivory); color: var(--brand-primary); }
.btn--gold-line { border-color: var(--brand-accent); color: var(--brand-ivory); }
.btn--gold-line:hover { background: var(--brand-accent); color: var(--brand-primary); }
.btn--line { background: var(--line-green); color: #fff; }
.btn--line:hover { filter: brightness(0.94); }
.btn--lg { min-height: 62px; padding: 0 44px; font-size: 16px; }
.btn .btn-sub { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; opacity: 0.75; }
.btn--stack { flex-direction: column; gap: 2px; line-height: 1.3; }

.button-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* テキストリンク: 金下線が左から */
.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.08em;
  color: var(--brand-primary);
  padding-bottom: 6px;
}
.theme-green .text-link { color: var(--brand-ivory); }
.text-link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--brand-accent);
  transform: scaleX(0.35);
  transform-origin: left center;
  transition: transform 0.35s var(--ease-out);
}
.text-link:hover::after { transform: scaleX(1); }
.text-link .arrow { font-family: var(--font-en); color: var(--brand-accent); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color 0.35s, box-shadow 0.35s, backdrop-filter 0.35s;
  background: transparent;
}
.site-header.is-solid,
.site-header.is-scrolled {
  background: rgba(2, 47, 57, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(208, 172, 109, 0.25);
}
.header-inner {
  width: min(var(--w-wide), calc(100% - 40px));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 76px;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--brand-ivory); }
.brand img { height: 42px; width: auto; }
.brand-text { line-height: 1.2; }
.brand-text .en { display: block; font-size: 17px; letter-spacing: 0.18em; }
.brand-text small { font-size: 10px; letter-spacing: 0.22em; color: var(--brand-accent); }

.global-nav { display: flex; align-items: center; gap: 4px; }
.global-nav > li { position: relative; }
.global-nav a, .global-nav button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  color: rgba(250, 247, 242, 0.92);
  font-size: 14px;
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: 0.06em;
  position: relative;
}
.global-nav > li > a::after, .global-nav > li > button::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 1px; background: var(--brand-accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.3s var(--ease-out);
}
.global-nav > li > a:hover::after, .global-nav > li > button:hover::after,
.global-nav > li > button[aria-expanded="true"]::after { transform: scaleX(1); }

.dropdown {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 240px;
  background: var(--brand-ivory);
  border-radius: 10px;
  box-shadow: var(--shadow-float);
  padding: 10px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
}
.global-nav li:hover .dropdown,
.global-nav li:focus-within .dropdown,
.dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--brand-ink);
  padding: 11px 14px; border-radius: 8px;
  font-size: 14px;
}
.dropdown a:hover { background: var(--brand-ivory-deep); color: var(--brand-primary); }
.dropdown a .arrow { color: var(--brand-accent); font-family: var(--font-en); }

.header-utils { display: flex; align-items: center; gap: 16px; }
.header-tel {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--brand-ivory);
  font-family: var(--font-num);
  font-size: 16px;
  letter-spacing: 0.04em;
}
.header-tel small { font-size: 10px; font-family: var(--font-heading); color: var(--brand-accent); letter-spacing: 0.15em; }
.header-reserve { border: 1px solid var(--brand-accent); color: var(--brand-ivory); border-radius: var(--radius-btn); padding: 12px 22px; font-family: var(--font-heading); font-weight: 700; font-size: 13.5px; letter-spacing: 0.08em; transition: background-color var(--dur-fast), color var(--dur-fast); }
.header-reserve:hover { background: var(--brand-accent); color: var(--brand-primary); }

.nav-instagram { display: inline-flex; color: rgba(250,247,242,0.85); padding: 6px; }
.nav-instagram:hover { color: var(--brand-accent); }

.burger { display: none; }

/* SP menu */
.sp-menu {
  position: fixed; inset: 0; z-index: 150;
  background: var(--brand-primary);
  color: var(--brand-ivory);
  padding: 96px 28px 40px;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.sp-menu.is-open { opacity: 1; visibility: visible; }
.sp-menu .en-title { font-family: var(--font-en); color: var(--brand-accent); letter-spacing: 0.3em; font-size: 11px; margin-bottom: 18px; }
.sp-menu ul + .en-title { margin-top: 34px; }
.sp-menu a { display: flex; justify-content: space-between; padding: 13px 4px; font-family: var(--font-heading); font-size: 17px; border-bottom: 1px solid rgba(250,247,242,0.12); }
.sp-menu .arrow { color: var(--brand-accent); }
.sp-menu-close { position: absolute; top: 22px; right: 22px; color: var(--brand-ivory); font-size: 14px; letter-spacing: 0.2em; font-family: var(--font-en); }
.sp-menu .sp-tel { margin-top: 36px; }

/* ---------- Hero (top) ---------- */
.hero {
  position: relative;
  min-height: min(94vh, 900px);
  display: flex;
  align-items: center;
  color: var(--brand-ivory);
  overflow: clip;
  background: var(--brand-primary);
}
.hero__media { position: absolute; inset: -6% 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 40%; }
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(2,47,57,0.92) 0%, rgba(2,47,57,0.72) 34%, rgba(2,47,57,0.12) 68%, rgba(2,47,57,0.35) 100%);
}
.hero__inner { position: relative; z-index: 2; width: min(var(--w-wide), calc(100% - 48px)); margin-inline: auto; padding-block: 140px 110px; }
.hero__label { display: flex; gap: 16px; align-items: center; margin-bottom: 30px; }
.hero__label .en { font-size: 11.5px; color: var(--brand-accent); }
.hero__label .rule { width: 60px; height: 1px; background: var(--brand-accent); transform-origin: left; }
.hero h1 {
  color: var(--brand-ivory);
  font-size: clamp(2.35rem, 5.6vw, 4.3rem);
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: 0.06em;
}
.hero__sub { margin-top: 30px; max-width: 34em; font-size: clamp(0.95rem, 1.4vw, 1.05rem); line-height: 2.2; color: rgba(250,247,242,0.88); }
.hero__cta { margin-top: 42px; display: flex; flex-wrap: wrap; gap: 14px; }
.hero__scroll {
  position: absolute; left: 24px; bottom: 26px; z-index: 2;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-en); font-size: 10px; letter-spacing: 0.35em; color: rgba(250,247,242,0.7);
}
.hero__scroll .bar { width: 72px; height: 1px; background: rgba(250,247,242,0.4); position: relative; overflow: hidden; }
.hero__scroll .bar::after { content: ""; position: absolute; inset: 0; background: var(--brand-accent); transform: translateX(-100%); animation: scrollbar 2.4s var(--ease-out) infinite; }
@keyframes scrollbar { 60% { transform: translateX(0); } 100% { transform: translateX(100%); } }

/* 下層ページヒーロー */
.page-hero {
  position: relative;
  padding: 170px 0 90px;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(208,172,109,0.08), transparent 60%),
    var(--brand-primary);
  color: var(--brand-ivory);
  overflow: clip;
}
.page-hero .bg-word { right: -2%; bottom: -14px; }
.page-hero h1 { color: var(--brand-ivory); font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 900; }
.page-hero .lead { margin-top: 22px; color: rgba(250,247,242,0.85); }
.page-hero .container { position: relative; z-index: 1; }

.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; letter-spacing: 0.05em; color: rgba(250,247,242,0.6); margin-bottom: 34px; }
.breadcrumb a:hover { color: var(--brand-accent); }
.breadcrumb .sep { color: var(--brand-accent); }

/* ---------- Marquee ---------- */
.marquee {
  overflow: clip;
  padding-block: 26px;
  border-block: 1px solid rgba(208, 172, 109, 0.35);
  background: var(--brand-ivory);
}
.marquee--green { background: var(--brand-primary-dark); border-color: rgba(208,172,109,0.3); }
.marquee__track { display: flex; width: max-content; animation: marquee 64s linear infinite; }
.marquee span {
  font-family: var(--font-en);
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  letter-spacing: 0.3em;
  white-space: nowrap;
  padding-right: 3.2em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(2, 47, 57, 0.5);
}
.marquee--green span { -webkit-text-stroke-color: rgba(208, 172, 109, 0.65); }
.marquee span b { color: var(--brand-accent); -webkit-text-stroke: 0; font-weight: 400; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-block: 1px solid var(--brand-line); }
.theme-green .stats { border-color: rgba(250,247,242,0.16); }
.stat { padding: 34px 20px; text-align: center; position: relative; }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--brand-line); }
.theme-green .stat + .stat::before { background: rgba(250,247,242,0.16); }
.stat .num { font-family: var(--font-en); font-size: clamp(2rem, 4.4vw, 3.2rem); color: var(--brand-primary); line-height: 1.1; }
.theme-green .stat .num { color: var(--brand-ivory); }
.stat .num small { font-size: 0.44em; letter-spacing: 0.12em; color: var(--brand-accent); margin-left: 4px; }
.stat .label { margin-top: 8px; font-size: 12.5px; letter-spacing: 0.14em; color: var(--brand-ink-sub); }
.theme-green .stat .label { color: rgba(250,247,242,0.65); }

/* ---------- Editorial split ---------- */
.split { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.split--reverse { grid-template-columns: 5fr 7fr; }
.split--reverse .split__media { order: 2; }
.split__media { position: relative; }
.split__media img { width: 100%; height: auto; border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.split__media .v-label { position: absolute; top: 0; right: -30px; }
.split__copy h3, .split__copy h2 { font-size: clamp(1.45rem, 2.6vw, 2rem); margin-bottom: 20px; }
.split__copy .lead { margin-bottom: 18px; }
.split__copy .prose { color: var(--brand-ink-sub); font-size: 15px; }
.theme-green .split__copy .prose { color: rgba(250,247,242,0.75); }
.split__copy .text-link { margin-top: 26px; }
.feature-list { margin-top: 22px; display: grid; gap: 7px; }
.feature-list li { display: flex; gap: 12px; align-items: baseline; font-size: 14.5px; }
.feature-list li::before {
  content: ""; flex: 0 0 8px; width: 8px; height: 6px;
  background: var(--brand-accent);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform: translateY(-2px);
}

/* オーバーラップカード */
.overlap { position: relative; }
.overlap__media img { width: 100%; border-radius: var(--radius-card); }
.overlap__card {
  position: relative;
  background: var(--brand-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: clamp(1.8rem, 3.5vw, 3rem);
  margin: -70px 0 0 auto;
  width: min(560px, 92%);
  z-index: 2;
}

/* ---------- Cards / Services ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 26px; }
.svc-card { grid-column: span 2; background: var(--brand-surface); border-radius: var(--radius-card); overflow: clip; box-shadow: var(--shadow-card); display: flex; flex-direction: column; transition: transform 0.35s var(--ease-out), box-shadow 0.35s; }
.svc-card:nth-child(1), .svc-card:nth-child(2) { grid-column: span 3; }
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-float); }
.svc-card__media { overflow: clip; aspect-ratio: 3 / 2; }
.svc-card:nth-child(-n+2) .svc-card__media { aspect-ratio: 16 / 9; }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out); }
.svc-card:hover .svc-card__media img { transform: scale(1.04); }
.svc-card__body { padding: 26px 26px 30px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.svc-card__body .en { font-size: 10.5px; color: var(--brand-accent); }
.svc-card__body h3 { font-size: 1.2rem; }
.svc-card__body p { font-size: 14px; color: var(--brand-ink-sub); flex: 1; }
.svc-card__body .text-link { align-self: flex-start; }

/* trio(3つの証明) */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3vw, 2.6rem); align-items: start; }
.trio > article:nth-child(2) { transform: translateY(46px); }
.trio__media { overflow: clip; border-radius: var(--radius-card); aspect-ratio: 4 / 5; }
.trio__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out); }
.trio article:hover .trio__media img { transform: scale(1.045); }
.trio h3 { display: flex; align-items: baseline; gap: 14px; margin-top: 22px; font-size: 1.35rem; }
.trio h3 .en { font-size: 11px; color: var(--brand-accent); }
.trio p { margin-top: 10px; font-size: 14.5px; color: var(--brand-ink-sub); }
.trio .text-link { margin-top: 16px; }

/* ---------- Flow(ご利用の流れ) ---------- */
.flow { counter-reset: flow; display: grid; gap: 0; }
.flow li { position: relative; display: block; padding: 28px 0 28px 60px; border-bottom: 1px solid var(--brand-line); }
.theme-green .flow li { border-color: rgba(250,247,242,0.14); }
.flow li::before { content: none; }
.flow h4, .flow .flow-h { font-size: 1.05rem; margin-bottom: 6px; }
.flow p { font-size: 14px; color: var(--brand-ink-sub); }
.theme-green .flow p { color: rgba(250,247,242,0.72); }

/* ---------- Tables(料金) ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 4px; }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; }
caption { text-align: left; font-family: var(--font-heading); font-weight: 700; padding-bottom: 12px; color: var(--brand-primary); }
th, td { text-align: left; padding: 15px 16px; border-bottom: 1px solid var(--brand-line); vertical-align: top; }
thead th { font-size: 12px; letter-spacing: 0.12em; color: var(--brand-ink-sub); font-weight: 500; border-bottom: 1px solid var(--brand-accent); }
td.num, th.num { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:hover { background: rgba(2, 47, 57, 0.025); }
.table-note { font-size: 12.5px; color: var(--brand-ink-sub); margin-top: 14px; }
+ { margin-top: clamp(3.4rem, 7vw, 5.4rem); }
h3 { font-size: 1.25rem; margin-bottom: 18px; display: flex; align-items: center; gap: 14px; }
h3::after { content: ""; flex: 1; height: 1px; background: var(--brand-line); }
.ok { color: var(--brand-primary); font-weight: 700; }
.ng { color: var(--brand-line); }

.page-index { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.page-index a { border: 1px solid rgba(250,247,242,0.35); border-radius: 999px; padding: 8px 18px; font-size: 13px; transition: border-color var(--dur-fast), color var(--dur-fast), background-color var(--dur-fast); }
.page-index a:hover { border-color: var(--brand-accent); color: var(--brand-accent); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 860px; }
.faq-list details { border-bottom: 1px solid var(--brand-line); }
.faq-list summary {
  display: flex; align-items: baseline; gap: 18px;
  padding: 26px 44px 26px 4px;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--brand-primary);
  position: relative;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before { content: "Q"; font-family: var(--font-en); color: var(--brand-accent); font-size: 1.2rem; }
.faq-list summary::after {
  content: "+"; position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-en); font-size: 1.3rem; color: var(--brand-accent);
  transition: transform 0.3s var(--ease-out);
}
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-answer { display: flex; gap: 18px; padding: 0 4px 28px; }
.faq-answer::before { content: "A"; font-family: var(--font-en); color: var(--brand-ink-sub); font-size: 1.1rem; }
.faq-answer p { font-size: 15px; color: var(--brand-ink-sub); max-width: 62em; }

/* ---------- Gallery ---------- */
.masonry { columns: 3 260px; column-gap: 22px; }
.masonry figure { break-inside: avoid; margin-bottom: 22px; border-radius: var(--radius-card); overflow: clip; }
.masonry img { width: 100%; transition: transform 0.6s var(--ease-out); }
.masonry figure:hover img { transform: scale(1.03); }

/* ---------- News ---------- */
.news-list li { border-bottom: 1px solid var(--brand-line); }
.theme-green .news-list li { border-color: rgba(250,247,242,0.14); }
.news-list a { display: flex; flex-wrap: wrap; gap: 10px 32px; align-items: baseline; padding: 24px 4px; transition: background-color var(--dur-fast); }
.news-list a:hover { background: rgba(2,47,57,0.03); }
.theme-green .news-list a:hover { background: rgba(250,247,242,0.05); }
.news-list time { font-family: var(--font-num); font-size: 13px; color: var(--brand-accent); letter-spacing: 0.06em; }
.news-list .title { font-family: var(--font-heading); font-weight: 700; }

/* ---------- Reservation panel ---------- */
.reserve-panel {
  position: relative;
  background:
    radial-gradient(80% 130% at 12% 0%, rgba(208,172,109,0.1), transparent 55%),
    var(--brand-primary);
  border-radius: 18px;
  color: var(--brand-ivory);
  padding: clamp(2.6rem, 6vw, 4.5rem);
  overflow: clip;
}
.reserve-panel .bg-word { right: -10px; bottom: -18px; font-size: clamp(4rem, 10vw, 8rem); }
.reserve-panel h2 { color: var(--brand-ivory); font-size: clamp(1.5rem, 3vw, 2.1rem); }
.reserve-panel .lead { color: rgba(250,247,242,0.85); margin-top: 14px; font-size: 15px; }
.reserve-panel .tel-big { display: inline-flex; flex-direction: column; gap: 2px; margin-top: 26px; }
.reserve-panel .tel-big .num { font-family: var(--font-num); font-size: clamp(1.9rem, 4.6vw, 2.8rem); letter-spacing: 0.04em; color: var(--brand-ivory); }
.reserve-panel .tel-big small { font-size: 12px; letter-spacing: 0.2em; color: var(--brand-accent); }
.reserve-panel .button-row { margin-top: 26px; }
.reserve-hours { margin-top: 22px; font-size: 13px; color: rgba(250,247,242,0.7); }

/* ---------- Floating CTA ---------- */
.cta-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: 3fr 2fr;
  height: calc(64px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -6px 24px rgba(2,47,57,0.18);
  transform: translateY(110%);
}
.cta-dock a { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-heading); font-weight: 700; font-size: 14.5px; letter-spacing: 0.04em; }
.cta-dock .dock-tel { background: var(--brand-primary); color: #fff; }
.cta-dock .dock-line { background: var(--line-green); color: #fff; }

.cta-rail { position: fixed; right: 24px; top: 50%; z-index: 90; display: none; flex-direction: column; gap: 12px; transform: translate(140%, -50%); }
.cta-rail a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 10px; font-family: var(--font-heading); font-weight: 700; letter-spacing: 0.05em; text-align: center; box-shadow: var(--shadow-float); }
.cta-rail .rail-tel { background: var(--brand-primary); color: #fff; width: 168px; min-height: 84px; font-size: 15px; }
.cta-rail .rail-tel small { font-family: var(--font-num); font-weight: 400; font-size: 12.5px; opacity: 0.85; letter-spacing: 0.05em; }
.cta-rail .rail-web { background: var(--brand-surface); color: var(--brand-primary); border: 1px solid var(--brand-primary); width: 168px; min-height: 56px; font-size: 13.5px; transition: background-color var(--dur-fast), color var(--dur-fast); }
.cta-rail .rail-web:hover { background: var(--brand-primary); color: #fff; }

/* ---------- Footer ---------- */
.site-footer { background: var(--brand-primary-dark); color: rgba(250,247,242,0.82); position: relative; overflow: clip; }
.site-footer .footer-top { padding: clamp(4rem, 8vw, 6rem) 0 3rem; display: grid; grid-template-columns: 1.2fr 2fr; gap: clamp(2.5rem, 6vw, 5rem); position: relative; z-index: 1; }
.footer-brand img { height: 54px; margin-bottom: 18px; }
.footer-brand .name { font-family: var(--font-heading); font-weight: 700; color: var(--brand-ivory); }
.footer-brand dl { margin-top: 18px; display: grid; gap: 6px; font-size: 13.5px; }
.footer-brand dt { color: var(--brand-accent); font-size: 11px; letter-spacing: 0.2em; margin-top: 8px; }
.footer-brand .tel { font-family: var(--font-num); font-size: 22px; color: var(--brand-ivory); }
.footer-sns { display: flex; gap: 14px; margin-top: 20px; }
.footer-sns a { color: rgba(250,247,242,0.8); }
.footer-sns a:hover { color: var(--brand-accent); }

.footer-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.footer-nav h3 { font-family: var(--font-en); font-weight: 400; font-size: 11px; letter-spacing: 0.3em; color: var(--brand-accent); margin-bottom: 16px; }
.footer-nav a { display: block; padding: 6px 0; font-size: 13.5px; color: rgba(250,247,242,0.75); }
.footer-nav a:hover { color: var(--brand-ivory); }

.footer-legal { border-top: 1px solid rgba(250,247,242,0.14); padding: 26px 0; font-size: 12px; color: rgba(250,247,242,0.55); line-height: 2; position: relative; z-index: 1; }
.footer-legal strong { color: rgba(250,247,242,0.75); font-weight: 500; }
.footer-bottom { border-top: 1px solid rgba(250,247,242,0.14); padding: 22px 0 26px; display: flex; flex-wrap: wrap; gap: 12px 30px; justify-content: space-between; font-size: 12px; color: rgba(250,247,242,0.5); position: relative; z-index: 1; }
.site-footer .bg-word { left: 50%; transform: translateX(-50%); bottom: 40px; font-size: clamp(5rem, 14vw, 11rem); -webkit-text-stroke-color: rgba(208,172,109,0.1); }

/* ---------- Utility ---------- */
.mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-36 { margin-top: 36px; } .mt-48 { margin-top: 48px; } .mt-64 { margin-top: 64px; }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.only-sp { display: none; }

/* 404 */
.notfound { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 140px 24px 80px; }
.notfound .code { font-family: var(--font-en); font-size: clamp(5rem, 16vw, 9rem); color: var(--brand-primary); line-height: 1; }

/* ---------- Responsive ---------- */
@media (min-width: 1280px) {
  .cta-dock { display: none; }
  .cta-rail { display: flex; }
}

@media (max-width: 1279px) {
  .global-nav, .header-tel, .header-reserve { display: none; }
  .burger { display: inline-flex; flex-direction: column; gap: 5px; padding: 10px; }
  .burger span { width: 26px; height: 2px; background: var(--brand-ivory); transition: transform 0.3s, opacity 0.3s; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

}

@media (max-width: 900px) {
  .split, .split--reverse { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .split__media .v-label { display: none; }
  .trio { grid-template-columns: 1fr; }
  .trio > article:nth-child(2) { transform: none; }
  .trio__media { aspect-ratio: 16 / 10; }
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .svc-card, .svc-card:nth-child(1), .svc-card:nth-child(2) { grid-column: span 1; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3)::before { display: none; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-nav { grid-template-columns: 1fr 1fr; }
  .overlap__card { margin-top: -40px; }
  .flow li { padding-left: 48px; }
}

@media (max-width: 640px) {
  .svc-grid { grid-template-columns: 1fr; }
  .hero__inner { padding-block: 130px 120px; }
  .hero__media img { object-position: 62% 40%; }
  .masonry { columns: 2 150px; column-gap: 14px; }
  .only-sp { display: block; }
  .btn { width: 100%; }
  .button-row { flex-direction: column; align-items: stretch; }
  .reserve-panel .button-row { flex-direction: column; }
  .page-hero { padding-top: 130px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .marquee__track { animation: none; transform: none; }
  .hero__scroll .bar::after { animation: none; }
}

/* デバイス別CTAの出し分け */
.pc-only { display: none; }
.sp-tab-only { display: inline-flex; }
@media (min-width: 1280px) {
  .pc-only { display: inline-flex; }
  .sp-tab-only { display: none; }
}

[hidden] { display: none !important; }

/* ==========================================================================
   2026-09-19 UX/表現アップデート
   ノイズ粒子・ドット地・リング/豆のあしらい・線画アイコン・ピン留めパネル
   ========================================================================== */

/* --- フィルムグレイン(全面・極薄) --- */
body::after {
  content: "";
  position: fixed; inset: -50%;
  z-index: 999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
}

/* --- アイボリー面の質感 --- */
.tex-dots {
  background-image:
    radial-gradient(rgba(2, 47, 57, 0.055) 1px, transparent 1.4px);
  background-size: 26px 26px;
}
.theme-green.tex-dots {
  background-image:
    radial-gradient(rgba(208, 172, 109, 0.10) 1px, transparent 1.4px),
    radial-gradient(120% 90% at 85% 10%, rgba(208, 172, 109, 0.07), transparent 55%);
  background-size: 26px 26px, auto;
  background-color: var(--brand-primary);
}

/* --- あしらいフィールド(リング・豆・ドット) --- */
.deco-field { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: clip; }
.deco { position: absolute; }
.deco--dot { width: 7px; height: 7px; background: var(--brand-accent); border-radius: 50%; opacity: 0.55; }
.theme-ivory 
/* --- 線画アイコン(描画アニメ) --- */
.li-icon { display: inline-flex; color: var(--brand-accent); flex: 0 0 auto; }
.li-icon svg { width: 40px; height: 40px; }
.li-icon [stroke] { stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.li-icon .draw { stroke-dasharray: var(--len, 120); stroke-dashoffset: var(--len, 120); transition: stroke-dashoffset 1.2s var(--ease-out) 0.15s; }
.is-drawn .draw, .no-js .draw { stroke-dashoffset: 0; }
.trio h3 .li-icon svg { width: 30px; height: 30px; }
.flow .li-icon { position: absolute; left: 0; top: 30px; opacity: 0.9; }


/* --- スクロール進捗バー --- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--brand-accent), rgba(208,172,109,0.5));
  transform: scaleX(0); transform-origin: left center;
  z-index: 130; pointer-events: none;
}

/* --- ページヴェール(ロード時の幕) --- */
.page-veil {
  position: fixed; inset: 0; z-index: 400;
  background: var(--brand-primary);
  display: grid; place-items: center;
  transform-origin: top center;
}
.page-veil .bean-mark { opacity: 0.9; }
@media (prefers-reduced-motion: reduce) { .page-veil { display: none; } }

/* --- ピン留めパネル(選ばれる理由) --- */
.pin-stage { position: relative; }
.pin-view {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 4fr) 7fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.pin-head { position: relative; z-index: 2; }
.pin-count {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--font-en);
  color: var(--brand-accent);
  margin-top: 34px;
}
.pin-count .cur { font-size: clamp(3rem, 6vw, 4.6rem); line-height: 1; color: var(--brand-ivory); }
.pin-count .total { font-size: 1rem; letter-spacing: 0.2em; }
.pin-track { width: 140px; height: 1px; background: rgba(250,247,242,0.25); margin-top: 20px; position: relative; }
.pin-track i { position: absolute; inset: 0; background: var(--brand-accent); transform-origin: left; transform: scaleX(0.01); }
.pin-panels { position: relative; min-height: 520px; }
.pin-panel { display: grid; grid-template-columns: 1fr; gap: 22px; align-content: center; }
.pin-panel .panel-media { border-radius: var(--radius-card); overflow: clip; box-shadow: var(--shadow-card); }
.pin-panel .panel-media img { width: 100%; height: clamp(240px, 34vh, 340px); object-fit: cover; }
.pin-panel h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--brand-ivory); display: flex; align-items: center; gap: 14px; }
.pin-panel .prose { color: rgba(250,247,242,0.78); font-size: 15px; }
.pin-panel .feature-list li { color: rgba(250,247,242,0.85); }

@media (min-width: 1024px) {
  .pin-stage .pin-wrap { height: 100svh; display: flex; align-items: center; overflow: clip; }
  .pin-panels { min-height: 60svh; }
  .pin-panel { position: absolute; inset: 0; }
  .pin-panel:not(:first-child) { opacity: 0; visibility: hidden; }
}
@media (max-width: 1023px) {
  .pin-view { grid-template-columns: 1fr; }
  .pin-count, .pin-track { display: none; }
  .pin-panel + .pin-panel { margin-top: 56px; }
}

/* --- 写真列(レスポンシブ) --- */
.photo-row { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.photo-row figure { border-radius: var(--radius-card); overflow: clip; }
.photo-row img { width: 100%; height: 100%; object-fit: cover; }

/* --- SPヒーロー: CVをファーストビューに --- */
.hero { min-height: 100svh; }
@media (max-width: 640px) {
  .hero { min-height: 100svh; align-items: flex-end; }
  .hero__inner { padding-block: 104px 92px; }
  .hero__label { margin-bottom: 16px; }
  .hero__label .rule { width: 38px; }
  .hero h1 { font-size: clamp(1.9rem, 8.2vw, 2.4rem); line-height: 1.5; }
  .hero__sub { margin-top: 14px; font-size: 12.5px; line-height: 1.9; max-width: 100%;
               display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .hero__cta { margin-top: 20px; gap: 10px; }
  .hero__cta .btn { min-height: 54px; width: 100%; }
  .hero__cta .btn--lg { min-height: 58px; }
  .hero__scroll { bottom: 12px; left: 20px; }
  .hero__scroll .bar { width: 46px; }
  .hero__media img { object-position: 66% 32%; }
  .hero__media::after {
    background: linear-gradient(180deg, rgba(2,47,57,0.55) 0%, rgba(2,47,57,0.25) 34%, rgba(2,47,57,0.55) 62%, rgba(2,47,57,0.92) 100%);
  }
}

/* --- SP細部調整(崩れ対策) --- */
@media (max-width: 640px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 24px 10px; }
  .stat .label { font-size: 11px; letter-spacing: 0.06em; }
  .overlap__card { width: 100%; margin: -28px 0 0; }
  .split__copy h2, .split__copy h3 { font-size: 1.35rem; }
  .section-heading h2 { font-size: 1.45rem; }
  .page-hero { padding: 118px 0 64px; }
  .page-hero .bg-word { font-size: clamp(4rem, 26vw, 7rem); bottom: -6px; }
  .bg-word { font-size: clamp(4.4rem, 22vw, 9rem); }
  .flow li { grid-template-columns: 52px 1fr; gap: 14px; padding: 20px 0; }
  .flow .li-icon { display: none; }
  .reserve-panel { border-radius: 14px; }
  .reserve-panel .tel-big .num { font-size: 1.8rem; }
  .marquee { padding-block: 16px; }
  th, td { padding: 12px 10px; font-size: 13px; }
  h3 { font-size: 1.1rem; }
  .masonry { columns: 2 140px; }
  .footer-nav { grid-template-columns: 1fr 1fr; gap: 20px; }
  .footer-legal { font-size: 10.5px; line-height: 1.9; }
}

/* ピン留め: ライト面バリアント */
.pin-stage--light .pin-count .cur { color: var(--brand-primary); }
.pin-stage--light .pin-panel h3 { color: var(--brand-primary); }
.pin-stage--light .pin-panel .prose { color: var(--brand-ink-sub); }
.pin-stage--light .pin-panel .feature-list li { color: var(--brand-ink); }
.pin-stage--light .pin-track { background: rgba(2, 47, 57, 0.15); }

/* SPヒーロー: 電話CTAを最強調(白地反転) */


/* 横はみ出しの徹底封じ */
html { overflow-x: clip; }
main { overflow-x: clip; }

/* ==========================================================================
   v3 — 2026 リッチネス: 比率正規化 / ベントー / ボタン強化 / ギミック
   ========================================================================== */

/* --- 画像比率の正規化(縦長の違和感解消) --- */
.split__media img { aspect-ratio: 4 / 3; object-fit: cover; }
.overlap__media img { aspect-ratio: 21 / 10; object-fit: cover; }
.ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 3vw, 28px); align-items: start; }
.ba-grid img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; border-radius: var(--radius-card); }

/* --- ベントーグリッド(ギャラリー) --- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; grid-auto-flow: dense; }
.bento figure { position: relative; border-radius: var(--radius-card); overflow: clip; }
.bento img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; transition: transform 0.6s var(--ease-out); }
.bento .b-feature { grid-column: span 2; grid-row: span 2; }
.bento .b-feature img { aspect-ratio: 1 / 1; }
.bento .b-wide { grid-column: span 2; }
.bento .b-wide img { aspect-ratio: 2 / 1; }
.bento figure:hover img { transform: scale(1.04); }
.bento .zoom { display: block; height: 100%; cursor: zoom-in; }
.bento .zoom:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; border-radius: var(--radius-card); }
@media (max-width: 640px) {
  .bento { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* --- ボタン視認性の強化 --- */
.btn { font-size: 15.5px; border-width: 1.5px; }
.btn--ghost { background: var(--brand-surface); box-shadow: var(--shadow-card); }
.btn--light { background: rgba(2, 47, 57, 0.35); backdrop-filter: blur(6px); border-width: 1.5px; }
.btn--gold-line { border-width: 1.5px; background: rgba(2, 47, 57, 0.25); backdrop-filter: blur(6px); }
.reserve-panel .btn--gold-line, .sp-menu .btn--gold-line { background: rgba(250, 247, 242, 0.06); }
.header-reserve { border-width: 1.5px; }

/* --- ガラスパネル(液体ガラスの気配) --- */
.overlap__card { background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(16px) saturate(1.1); border: 1px solid rgba(226, 220, 210, 0.9); }

/* --- カスタムカーソル(PC・fine pointerのみ) --- */
@media (hover: hover) and (pointer: fine) {
  html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor summary { cursor: none; }
  .cursor-dot, .cursor-ring {
    position: fixed; top: 0; left: 0; z-index: 500; pointer-events: none;
    transform: translate(-50%, -50%);
  }
  .cursor-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-accent); }
  .cursor-ring {
    width: 38px; height: 38px; border-radius: 50%;
    border: 1.5px solid rgba(208, 172, 109, 0.8);
    display: grid; place-items: center;
    transition: width 0.25s var(--ease-out), height 0.25s var(--ease-out),
                background-color 0.25s, border-color 0.25s;
  }
  .cursor-ring .cursor-label {
    font-family: var(--font-en); font-size: 9px; letter-spacing: 0.2em;
    color: var(--brand-primary); opacity: 0; transition: opacity 0.2s;
  }
  .cursor-ring.is-view { width: 66px; height: 66px; background: rgba(208, 172, 109, 0.92); border-color: transparent; }
  .cursor-ring.is-view .cursor-label { opacity: 1; }
  .cursor-ring.is-press { width: 26px; height: 26px; }
}
@media (hover: none), (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }

/* --- 3Dチルト --- */
.tilt { transform-style: preserve-3d; will-change: transform; }
.tilt .tilt-shine {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(240px circle at var(--sx, 50%) var(--sy, 50%), rgba(255, 255, 255, 0.22), transparent 60%);
  opacity: 0; transition: opacity 0.3s;
}
.tilt:hover .tilt-shine { opacity: 1; }
.svc-card__media, .trio__media, .panel-media, .overlap__media { position: relative; }

/* --- ヒーローの剥がれ(スクロールで縮み角丸に) --- */
.hero { transform-origin: center 20%; }

/* --- マーキー(速度反応の素地) --- */
.marquee__track { will-change: transform; }

/* ==========================================================================
   v4: グランメゾン改修
   明朝ディスプレイ / オープニング / 歩く犬 / 肉球カーソル / 円形ワイプボタン
   ========================================================================== */

/* --- ディスプレイ書体(明朝)で格を出す --- */
.hero h1, .page-hero h1, .section-heading h2,
.reserve-panel h2, .overlap__card h2, .pin-head h2,
.statement h2, .access-layer__card h2,
.theme-green > .container > h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.hero h1 { font-size: clamp(2.5rem, 6vw, 4.7rem); line-height: 1.5; font-weight: 500; }
.section-heading h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); }
.page-hero h1 { font-weight: 500; }
.section-heading { margin-bottom: clamp(2.8rem, 6vw, 4.6rem); }

/* --- エディトリアル大数字(01/02/03) --- */
.trio article { position: relative; }
.art-num {
  position: absolute; top: -0.52em; left: -6px; z-index: 2;
  font-size: clamp(3.4rem, 6vw, 5rem); line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--brand-accent);
  pointer-events: none;
}

/* --- ボタン: 円形ワイプhover(mirutoオマージュ) --- */
.btn { position: relative; z-index: 0; overflow: hidden; }
.btn::before {
  content: "";
  position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit;
  clip-path: circle(0% at 12% 50%);
  transition: clip-path 0.55s var(--ease-out);
}
.btn:hover::before { clip-path: circle(150% at 12% 50%); }
.btn--primary::before { background: var(--brand-primary-dark); }
.btn--primary:hover { background: var(--brand-primary); }
.btn--ghost::before { background: var(--brand-primary); }
.btn--ghost:hover { background: var(--brand-surface); }
.btn--light::before { background: var(--brand-ivory); }
.btn--light:hover { background: rgba(2,47,57,0.55); }
.btn--gold-line::before { background: var(--brand-primary-dark); }
.btn--gold-line:hover { background: rgba(2,47,57,0.55); color: var(--brand-ivory); }
.btn--line::before { background: rgba(0,0,0,0.12); }

/* --- 肉球カーソル --- */
@media (hover: hover) and (pointer: fine) {
  .cursor-dot { width: 16px; height: 16px; border-radius: 0; background: none; color: var(--brand-accent); }
  .cursor-dot .paw-svg { width: 16px; height: 16px; display: block; filter: drop-shadow(0 1px 2px rgba(1,33,42,0.35)); }
}
.paw-stamp {
  position: fixed; z-index: 240; pointer-events: none;
  width: 22px; height: 22px; color: var(--brand-accent);
  transform: translate(-50%, -50%);
  animation: pawstamp 0.9s var(--ease-out) forwards;
}
.paw-stamp .paw-svg { width: 100%; height: 100%; }
@keyframes pawstamp {
  0% { opacity: 0.95; scale: 0.5; }
  35% { scale: 1.05; }
  100% { opacity: 0; scale: 1; }
}

/* --- 犬SVG共通(足・尻尾のリグ) --- */
.dog-svg { display: block; overflow: visible; }
.dog-svg .dog-leg { transform-box: fill-box; transform-origin: top center; }
.dog-svg .dog-tail { transform-box: fill-box; transform-origin: bottom right; animation: dogwag 0.9s ease-in-out infinite; }
.is-walking .dog-leg--a, .is-walking .dog-leg--d { animation: dogleg 0.42s linear infinite; }
.is-walking .dog-leg--b, .is-walking .dog-leg--c { animation: dogleg 0.42s linear infinite reverse; }
@keyframes dogleg { 0%,100% { rotate: 17deg; } 50% { rotate: -17deg; } }
@keyframes dogwag { 0%,100% { rotate: -8deg; } 50% { rotate: 10deg; } }

/* --- マーキー: 2段化 + 帯上を歩く犬 --- */
.marquee { position: relative; overflow: visible; margin-top: clamp(46px, 6.5vw, 72px); }
.marquee > .marquee__track { overflow: clip; }
.marquee { clip-path: none; }
.marquee__track--rev { animation-direction: reverse; margin-top: 6px; }
.marquee__track--fill span { -webkit-text-stroke: 0; color: rgba(2, 47, 57, 0.16); }
.marquee--green .marquee__track--fill span { color: rgba(208, 172, 109, 0.22); }
.marquee__dog {
  position: absolute; top: 2px; left: -120px;
  transform: translateY(-100%);
  width: 104px; color: var(--brand-accent);
  opacity: 0.95;
  animation: dogtrot 34s linear infinite;
}
.marquee--green .marquee__dog { color: var(--brand-accent); }
.marquee__dog .dog-svg { width: 104px; height: 62px; }
.marquee__dog .dog-leg--a, .marquee__dog .dog-leg--d { animation: dogleg 0.42s linear infinite; }
.marquee__dog .dog-leg--b, .marquee__dog .dog-leg--c { animation: dogleg 0.42s linear infinite reverse; }
@keyframes dogtrot { to { left: calc(100% + 120px); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__dog, .marquee__track--rev { display: none; }
}

/* マーキーのはみ出し対策: 横だけクリップ */
.marquee { overflow-x: clip; overflow-y: visible; }

/* --- オープニング(トップ・セッション1回) --- */
.opening {
  position: fixed; inset: 0; z-index: 600;
  display: grid; place-items: center;
}
.opening__half {
  position: absolute; left: 0; right: 0; height: 50.2%;
  background:
    radial-gradient(120% 160% at 50% 100%, rgba(208,172,109,0.08), transparent 55%),
    var(--brand-primary);
}
.opening__half--top { top: 0; }
.opening__half--btm {
  bottom: 0;
  background:
    radial-gradient(120% 160% at 50% 0%, rgba(208,172,109,0.08), transparent 55%),
    var(--brand-primary);
}
.opening__center { position: relative; z-index: 1; text-align: center; padding: 0 24px; }
.opening__walk {
  display: flex; justify-content: center; gap: 26px;
  margin-bottom: 34px; color: var(--brand-accent);
}
.opening__walk .op-paw { width: 15px; height: 15px; opacity: 0; }
.opening__walk .op-paw:nth-child(odd) { transform: rotate(-14deg) translateY(-5px); }
.opening__walk .op-paw:nth-child(even) { transform: rotate(14deg) translateY(5px); }
.opening__walk .paw-svg { width: 100%; height: 100%; }
.opening__bean { display: inline-block; margin-bottom: 26px; }
.opening__bean svg { width: 72px; height: 53px; }
.opening__word {
  font-size: clamp(2rem, 7vw, 4.2rem);
  letter-spacing: 0.3em;
  color: var(--brand-ivory);
  line-height: 1.2;
  text-indent: 0.3em; /* 字間ぶんのセンター補正 */
}
.opening__word .op-ch { display: inline-block; }
.opening__tag {
  margin-top: 18px;
  font-size: 11px; letter-spacing: 0.42em;
  color: var(--brand-accent);
}
@media (prefers-reduced-motion: reduce) { .opening { display: none !important; } }

/* --- 余白と質感の微調整 --- */
@media (min-width: 1024px) {
  .hero__inner { padding-block: 170px 130px; }
}
.lead { line-height: 2.25; }
.eyebrow { margin-bottom: 26px; }

/* v4: 内側パララックスのはみ出しクリップ */
.split__media, .overlap__media, .bento figure { overflow: hidden; }

/* ==========================================================================
   v5: 構成一新 — 英字ディスプレイKV / サービス編集レイアウト /
   3つの強み / ステートメント / レイヤードアクセス
   ========================================================================== */

/* --- オープニング: 現行ロゴ --- */
.opening__logo { display: block; margin-bottom: 8px; }
.opening__logo-mask { display: inline-block; overflow: hidden; padding-bottom: 4px; }
.opening__logo img { height: clamp(76px, 11vw, 116px); width: auto; display: block; }

/* --- ヒーロー: 英字ディスプレイ + フローティング写真 --- */
.hero h1.en-display {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: clamp(2.7rem, 6.6vw, 5.4rem);
  line-height: 1.14;
  letter-spacing: 0.04em;
}
.hero__jp {
  margin-top: 28px;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.9vw, 1.45rem);
  letter-spacing: 0.16em;
  color: var(--brand-ivory);
}
.hero__sub { margin-top: 16px; }
.hero__float {
  position: absolute; right: 4.5%; bottom: 9%; z-index: 2;
  width: clamp(210px, 21vw, 300px);
  padding: 10px 10px 12px;
  background: rgba(2, 47, 57, 0.38);
  border: 1px solid rgba(208, 172, 109, 0.55);
  backdrop-filter: blur(8px);
  border-radius: 8px;
}
.hero__float { display: block; color: inherit; text-decoration: none; transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out); }
.hero__float figure { margin: 0; }
.hero__float-go { display: inline-block; margin-left: 8px; transition: transform 0.3s var(--ease-out); }
.hero__float:hover, .hero__float:focus-visible { border-color: var(--brand-accent); background: rgba(2, 47, 57, 0.55); }
.hero__float:hover .hero__float-go, .hero__float:focus-visible .hero__float-go { transform: translateX(4px); }
.hero__float img { display: block; width: 100%; border-radius: 4px; }
.hero__float figcaption { margin-top: 9px; font-size: 9.5px; letter-spacing: 0.32em; color: var(--brand-accent); }
@media (max-width: 1179px) { .hero__float { display: none; } }

/* --- 番号・ラベル(共通) --- */
.svc-num {
  display: block;
  font-family: var(--font-en);
  font-size: clamp(3rem, 5vw, 4.4rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--brand-accent);
}
.svc-num--sm { font-size: clamp(2rem, 3vw, 2.6rem); }
.svc-label {
  display: block;
  margin: 16px 0 10px;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brand-accent);
}

/* --- サービス: 編集型フィーチャー + ミニカード --- */
.svc-features { display: grid; gap: clamp(4rem, 8vw, 7rem); }
.svc-feature {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
}
.svc-feature:nth-child(even) { direction: rtl; }
.svc-feature:nth-child(even) > * { direction: ltr; }
.svc-feature__media { overflow: hidden; border-radius: var(--radius-card); position: relative; }

.svc-feature__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.svc-feature__body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin-bottom: 16px;
}
.svc-feature__body .prose { margin-bottom: 20px; }
.svc-mini-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 26px; margin-top: clamp(4rem, 8vw, 7rem);
}
.svc-mini {
  background: var(--brand-surface);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: translate 0.35s var(--ease-out), box-shadow 0.35s;
}
.svc-mini:hover { translate: 0 -6px; box-shadow: var(--shadow-float); }
.svc-mini__media { overflow: hidden; }
.svc-mini__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: scale 0.6s var(--ease-out); }
.svc-mini:hover .svc-mini__media img { scale: 1.05; }
.svc-mini__body { padding: 24px 26px 28px; position: relative; }
.svc-mini__body .svc-num { position: absolute; right: 20px; top: -0.55em; }
.svc-mini__body .svc-label { margin: 0 0 6px; }
.svc-mini__body h3 { font-size: 19px; margin-bottom: 8px; }
.svc-mini__body p { font-size: 14px; color: var(--brand-ink-sub); margin-bottom: 12px; }

/* --- 3つの強み(深緑) --- */
.strengths { display: grid; gap: clamp(5rem, 10vw, 9rem); }
.strength {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.strength:nth-child(even) { direction: rtl; }
.strength:nth-child(even) > * { direction: ltr; }
.strength__media { position: relative; overflow: hidden; border-radius: var(--radius-card); }

.strength__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.strength__body h3 {
  font-family: var(--font-display);
  color: var(--brand-ivory);
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
  margin-bottom: 18px;
}
.strength__body .prose { margin-bottom: 20px; color: rgba(250, 247, 242, 0.88); }
.strength__body .image-note { margin: 14px 0 6px; }

/* --- ステートメント(旧コンセプト凝縮) --- */
.statement { position: relative; overflow: clip; }
.statement__img {
  position: absolute; z-index: 0;
  width: clamp(180px, 20vw, 300px);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.statement__img--l { left: 4%; top: 10%; rotate: -3deg; }
.statement__img--r { right: 4%; top: 16%; rotate: 2.5deg; }
.statement__img img { width: 100%; display: block; }
.statement h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
@media (max-width: 1023px) {
  .statement__img { opacity: 0.28; width: clamp(140px, 30vw, 200px); }
}

/* --- レイヤードアクセス --- */
.access-v5 { position: relative; overflow: clip; }
.access-layer { position: relative; padding-bottom: 70px; }
.access-layer__photo {
  width: min(64%, 780px);
  overflow: hidden;
  border-radius: var(--radius-card);
}
.access-layer__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.access-layer__card {
  position: absolute; right: 0; top: 50%;
  transform: translateY(-54%);
  width: min(470px, 92%);
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(14px);
  padding: clamp(30px, 4vw, 52px);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
}

.access-layer__card h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.access-min { display: flex; align-items: baseline; gap: 10px; margin: 20px 0 14px; font-family: var(--font-en); }
.access-min .num {
  font-size: clamp(3.6rem, 6vw, 5.2rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px var(--brand-accent);
}
.access-min .unit { font-size: 11px; letter-spacing: 0.26em; color: var(--brand-ink-sub); line-height: 1.5; }
.access-dl { display: grid; gap: 10px; font-size: 14.5px; margin-bottom: 18px; }
.access-dl dt { font-size: 10px; letter-spacing: 0.24em; color: var(--brand-accent); text-transform: uppercase; }
.access-dl a:hover { color: var(--brand-accent); }
.access-layer__sub {
  position: absolute; left: 5%; bottom: -20px;
  width: clamp(190px, 22vw, 280px);
  border: 8px solid var(--brand-surface);
  box-shadow: var(--shadow-card);
  rotate: -2deg;
  border-radius: 4px; overflow: hidden;
}
.access-layer__sub img { width: 100%; display: block; }

/* --- v5 SP --- */
@media (max-width: 1023px) {
  .svc-feature, .strength { grid-template-columns: 1fr; gap: 22px; }
  .svc-mini-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 3rem; }
  .access-layer { padding-bottom: 0; }
  .access-layer__photo { width: 100%; }
  .access-layer__card {
    position: static; transform: none;
    width: min(92%, 470px); margin: -70px auto 0; 
  }
  .access-layer__sub { display: none; }
  .hero__jp { margin-top: 20px; font-size: 1rem; }
  .hero h1.en-display { font-size: clamp(1.9rem, 9.4vw, 2.5rem); letter-spacing: 0.02em; }
}

/* ==========================================================================
   v6: EN見出し主体 / リッチCTA / カード統計 / 質感グラデ / ジェリーカーソル /
   ショーケース(画像スタックスクロール)
   ========================================================================== */

/* --- 改行の粗れ防止 --- */
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

/* --- セクション見出し: 英語ディスプレイ主体 --- */
.section-heading .eyebrow--jp {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: none;
  color: var(--brand-ink-sub);
}
.theme-green .section-heading .eyebrow--jp { color: rgba(250, 247, 242, 0.7); }
.section-heading h2.en-display {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.6vw, 3.7rem);
  letter-spacing: 0.06em;
  line-height: 1.1;
}

/* --- 背景の質感: 柔らかなグラデ + 全体グレイン --- */
.section:not(.theme-green):not(.theme-ivory-deep) {
  background-image:
    radial-gradient(70% 55% at 100% 0%, rgba(208, 172, 109, 0.07), transparent 55%),
    radial-gradient(50% 40% at 0% 100%, rgba(2, 47, 57, 0.045), transparent 60%);
}
.theme-ivory-deep {
  background-image:
    radial-gradient(60% 50% at 0% 0%, rgba(208, 172, 109, 0.1), transparent 55%),
    linear-gradient(180deg, var(--brand-ivory-deep), #EFE9DE);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 2;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* --- リッチCTA --- */
.btn .btn-main { display: inline-flex; align-items: center; gap: 9px; line-height: 1.3; }
.btn .web-ic, .cta-rail .web-ic { flex: none; }
.btn-num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.btn--stack .btn-sub { opacity: 0.8; }
@media (min-width: 1280px) { .header-reserve { display: inline-flex; align-items: center; gap: 8px; } }
.cta-rail .rail-tel { flex-direction: column; gap: 3px; }
.cta-rail .rail-tel small { font-family: var(--font-heading); font-weight: 700; font-size: 12px; opacity: 0.85; }
.cta-rail .rail-tel .num { font-family: var(--font-num); font-size: 19px; font-weight: 500; letter-spacing: 0.03em; }
.cta-rail .rail-web { flex-direction: column; gap: 2px; min-height: 66px; }
.cta-rail .rail-web .btn-main { display: inline-flex; align-items: center; gap: 7px; }
.cta-rail .rail-web small { font-size: 9px; letter-spacing: 0.28em; color: var(--brand-accent); }

/* --- 強みCTAボタン(本文との間に呼吸) --- */
.strength__cta { margin-top: 30px; }
.svc-feature__body .text-link { margin-top: 12px; }

/* --- 統計: カードレイヤーへ --- */
.stats--cards { border-block: 0; gap: 18px; }
.stats--cards .stat {
  background: var(--brand-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 34px 16px 28px;
}
.stats--cards .stat + .stat::before { content: none; }
.stats--cards .stat::after {
  content: "";
  display: block;
  width: 34px; height: 2px;
  margin: 16px auto 0;
  background: linear-gradient(90deg, var(--brand-accent), rgba(208, 172, 109, 0.2));
}
@media (max-width: 767px) {
  .stats--cards { grid-template-columns: repeat(2, 1fr); }
}

/* --- ステートメントはさらにゆったり --- */
.statement { padding-block: clamp(8rem, 18vw, 13rem); }

/* --- カーソル: 大きく・影なし・ジェリー --- */
@media (hover: hover) and (pointer: fine) {
  .cursor-dot { width: 26px; height: 26px; }
  .cursor-dot .paw-svg { width: 26px; height: 26px; filter: none; }
  .cursor-ring { width: 88px; height: 88px; border-width: 1.5px; }
  .cursor-ring.is-view { width: 118px; height: 118px; }
  .cursor-ring .cursor-label { font-size: 12px; }
}

/* --- ショーケース: 画像スタックスクロール --- */
.showcase__stage { position: relative; height: 100svh; overflow: clip; background: var(--brand-primary-dark); }
.showcase__panel { position: absolute; inset: 0; margin: 0; will-change: transform; }
.showcase__panel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.showcase__panel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(200deg, transparent 55%, rgba(1, 33, 42, 0.55) 100%);
}
.showcase__cap {
  position: absolute; left: clamp(24px, 5vw, 72px); bottom: clamp(24px, 5vw, 64px); z-index: 2;
  color: var(--brand-ivory);
}
.showcase__cap .en {
  display: block;
  font-family: var(--font-en);
  font-size: clamp(2.2rem, 5vw, 4rem);
  letter-spacing: 0.08em;
  line-height: 1.05;
}
.showcase__cap small {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: rgba(250, 247, 242, 0.85);
}
@media (prefers-reduced-motion: reduce) {
  .showcase__stage { height: auto; background: none; }
  .showcase__panel { position: relative; height: 68svh; }
}

/* ==========================================================================
   v7: 明朝統一後の調整 / グルーピング余白 / 縦書きアクセスカード /
   統計カード装飾 / 新フッター / SPヒーロー1行化
   ========================================================================== */

/* --- グルーピング: 本文→箇条書き→ボタンの呼吸 --- */
.svc-feature__body .text-link { margin-top: 28px; display: inline-block; }
.svc-feature__body .feature-list li,
.strength__body .feature-list li { line-height: 1.75; }
.strength__cta { margin-top: 34px; }

/* --- 中央寄せブロック内のノートも中央に --- */
.center .heading-note { margin-inline: auto; }

/* --- ボタン矢印 --- */
.btn .arw {
  display: inline-block;
  margin-left: 12px;
  font-family: var(--font-en);
  transition: transform 0.3s var(--ease-out);
}
.btn:hover .arw { transform: translateX(6px); }

/* --- 統計カード: 金ヘアライン+ENタグ+質感 --- */
.stats--cards .stat {
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(208, 172, 109, 0.09), transparent 60%),
    var(--brand-surface);
}
.stats--cards .stat::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand-accent), rgba(208, 172, 109, 0.1));
}
.stat__tag {
  display: block;
  margin-bottom: 12px;
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--brand-accent);
}

/* --- ステートメントのJPラベル調整 --- */
.statement .eyebrow--jp { font-size: 13px; letter-spacing: 0.2em; }

/* --- アクセスカード: 右端ベタ付け・縦書き見出しの深緑パネル --- */
.access-layer { padding-bottom: 40px; }
.access-layer__photo { width: min(60%, 740px); }
.access-card {
  position: absolute;
  top: -44px; bottom: 44px;
  right: calc((100% - 100vw) / 2);
  transform: none;
  width: min(470px, 88%);
  display: flex;
  gap: clamp(24px, 3vw, 40px);
  padding: clamp(34px, 4vw, 52px);
  background:
    radial-gradient(120% 90% at 0% 100%, rgba(208, 172, 109, 0.1), transparent 55%),
    var(--brand-primary);
  color: rgba(250, 247, 242, 0.9);
  backdrop-filter: none;
  border-radius: var(--radius-card) 0 0 var(--radius-card);
  box-shadow: var(--shadow-float);
}
.access-card::before { border-color: rgba(208, 172, 109, 0.4); }
.access-card__v {
  order: 2;
  align-self: center;
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--brand-ivory);
  margin: 0;
}
.access-card__v span { display: block; white-space: nowrap; margin-left: 0.75em; }
.access-card__body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.access-card .access-min .num { -webkit-text-stroke-color: var(--brand-accent); }
.access-card .access-min .unit { color: rgba(250, 247, 242, 0.7); }
.access-card .access-dl { margin: 6px 0 20px; gap: 12px; }
.access-card .access-dl dd { color: rgba(250, 247, 242, 0.88); font-size: 13.5px; line-height: 1.8; }
.access-tel {
  font-size: 18px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: var(--brand-ivory);
}
.access-tel:hover { color: var(--brand-accent); }
.access-card .text-link { color: var(--brand-ivory); }
@media (max-width: 1023px) {
  .access-layer { padding-bottom: 0; }
  .access-card {
    position: static;
    width: min(94%, 470px);
    margin: -70px 0 0 auto;
    border-radius: var(--radius-card) 0 0 var(--radius-card);
  }
  .access-card__v { font-size: 1.15rem; letter-spacing: 0.16em; }
}

/* --- 新フッター: 上下レイヤー分割 --- */
.site-footer { padding-block: clamp(5rem, 9vw, 7.5rem) 0; }
.ft-brand { text-align: center; position: relative; z-index: 1; }
.ft-name { margin-top: 20px; font-family: var(--font-display); font-size: 17px; letter-spacing: 0.14em; color: var(--brand-ivory); }
.ft-tag { margin-top: 10px; font-size: 10px; letter-spacing: 0.34em; color: var(--brand-accent); }
.ft-nav {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(3rem, 5vw, 4.5rem);
  padding-block: clamp(2.6rem, 4vw, 3.8rem);
  border-block: 1px solid rgba(250, 247, 242, 0.14);
}
.ft-nav h2, .ft-nav h3 { font-size: 11px; letter-spacing: 0.3em; color: var(--brand-accent); margin-bottom: 18px; font-family: var(--font-en); font-weight: 400; }
.ft-nav a { display: block; font-size: 13.5px; color: rgba(250, 247, 242, 0.82); padding: 6px 0; }
.ft-nav a:hover { color: var(--brand-accent); }
.ft-info {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 44px);
  padding-block: clamp(2.4rem, 4vw, 3.4rem);
}
.ft-info .en { display: block; font-size: 10px; letter-spacing: 0.3em; color: var(--brand-accent); text-transform: uppercase; margin-bottom: 10px; }
.ft-info p { font-size: 13px; line-height: 1.9; color: rgba(250, 247, 242, 0.82); }
.ft-tel { font-size: 19px; letter-spacing: 0.07em; color: var(--brand-ivory); white-space: nowrap; }
.ft-tel:hover { color: var(--brand-accent); }
.ft-sns { position: relative; z-index: 1; display: flex; justify-content: center; gap: 18px; padding-bottom: 2.2rem; }
.ft-sns a { color: rgba(250, 247, 242, 0.8); font-size: 12px; letter-spacing: 0.2em; border: 1px solid rgba(250, 247, 242, 0.3); border-radius: 999px; padding: 8px 22px; }
.ft-sns a:hover { color: var(--brand-primary); background: var(--brand-ivory); }
@media (max-width: 1023px) {
  .ft-nav { grid-template-columns: 1fr; gap: 26px; }
  .ft-info { grid-template-columns: 1fr 1fr; gap: 22px; }
}
@media (max-width: 560px) {
  .ft-info { grid-template-columns: 1fr; }
}

/* --- SP: ヒーローJPコピーを1行に / 余白調整 --- */
@media (max-width: 1023px) {
  .hero__jp {
    margin-top: 16px;
    font-size: clamp(11.5px, 3.85vw, 15px);
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
  .hero__sub { margin-top: 14px; }
  .hero__cta { margin-top: 30px; }
}

/* v7fix: アクセス注記がポラロイドと重ならないように */
.access-v5 .image-note { margin-top: 52px; }

/* ==========================================================================
   v8: 最終調整 — 縦書きCTAレール / ショーケースSPのバー逃げ /
   SPアクセス内枠削除 / 予約見出し1行化
   ========================================================================== */

/* --- PC右固定CTA: 縦書きの縦長2ボタン --- */
.cta-rail .rail-tel,
.cta-rail .rail-web {
  writing-mode: vertical-rl;
  flex-direction: row;
  width: 62px;
  padding: 22px 0;
  gap: 10px;
}
.cta-rail .rail-tel { min-height: 262px; font-size: 14px; }
.cta-rail .rail-tel small {
  font-size: 13px;
  letter-spacing: 0.14em;
  opacity: 0.9;
}
.cta-rail .rail-tel .num {
  font-size: 15px;
  letter-spacing: 0.12em;
}
.cta-rail .rail-web { min-height: 236px; }
.cta-rail .rail-web .btn-main {
  flex-direction: row;
  gap: 8px;
  font-size: 13.5px;
  letter-spacing: 0.14em;
}
.cta-rail .rail-web small {
  font-size: 8.5px;
  letter-spacing: 0.24em;
}

/* --- ショーケース: SP/タブレットは下部固定バーの上で100%表示 --- */
@media (max-width: 1023px) {
  .showcase__stage {
    height: calc(100svh - 64px - env(safe-area-inset-bottom, 0px));
  }
  .showcase__cap { bottom: 22px; }
  .showcase__cap .en { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
}

/* --- アクセスカード: SP/タブレットは金の内枠を外す --- */
@media (max-width: 1023px) {
  .access-card::before { content: none; }
}

/* --- 予約パネル見出し: SPで1行に --- */
@media (max-width: 767px) {
  .reserve-panel h2 {
    font-size: clamp(16px, 5.4vw, 21px);
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
}

/* ==========================================================================
   v9: 空豆(緑線) / 予約CTAの明確なボタン化 / SPアクセスの再レイアウト
   ========================================================================== */

/* --- 豆あしらい: 緑の線(深緑面では金) --- */
.bean-deco { color: #8FAE8B; }
.theme-green .bean-deco, .page-veil .bean-mark { color: var(--brand-accent); }

/* --- 予約パネル: 電話を明確なボタンに --- */
.reserve-panel .tel-big {
  align-items: center;
  gap: 6px;
  padding: 22px 48px 24px;
  border: 1.5px solid var(--brand-accent);
  border-radius: 14px;
  background: rgba(250, 247, 242, 0.07);
  box-shadow: 0 10px 30px rgba(1, 33, 42, 0.35);
  transition: background-color var(--dur-fast), transform var(--dur-fast);
}
.reserve-panel .tel-big:hover { background: rgba(250, 247, 242, 0.14); transform: translateY(-2px); }
.reserve-panel .tel-big small { letter-spacing: 0.12em; }

/* --- LINEアイコン --- */
.line-ic { flex: none; }
.btn--line .btn-sub { color: rgba(255, 255, 255, 0.9); }

/* --- 下部固定ドック: 2行(ラベル+英字/番号) --- */
.cta-dock a { flex-direction: column; gap: 2px; line-height: 1.25; }
.cta-dock a .btn-main { display: inline-flex; align-items: center; gap: 7px; }
.cta-dock a small {
  font-size: 8.5px;
  letter-spacing: 0.22em;
  opacity: 0.85;
  font-weight: 400;
}

/* --- SPアクセス: 重なり解消+右端ベタ付け+右余白 --- */
@media (max-width: 1023px) {
  .access-card {
    margin: 20px calc((100% - 100vw) / 2) 0 auto;
    width: min(calc(94% + (100vw - 100%) / 2), 500px);
    padding: 30px 26px 32px 24px;
    gap: 20px;
  }
  .access-card__v { margin-right: 2px; }
  .access-min { margin-top: 0; }
}
.access-card .text-link { white-space: nowrap; }
.access-dl .nw { white-space: nowrap; display: inline-block; }

/* v9fix: 予約パネル電話ボタン — SPで番号1行 */
@media (max-width: 767px) {
  .reserve-panel .tel-big { width: 100%; padding: 16px 12px 18px; }
  .reserve-panel .tel-big small { white-space: nowrap; font-size: 10.5px; letter-spacing: 0.08em; }
  .reserve-panel .tel-big .num { font-size: clamp(18px, 5.6vw, 24px); white-space: nowrap; }
}

/* ==========================================================================
   v10: レール2列縦書き / ドック1:1 / サービスにセージの差し色 /
   アクセス位置調整 / ヒーロースライドショー / FVボタン視認性 / フッターLINE
   ========================================================================== */

/* --- 縦書きレール: JP主列+EN添え列(番号なし) --- */
.cta-rail .rail-tel,
.cta-rail .rail-web {
  flex-direction: column; /* vertical-rl では列が横に並ぶ */
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 26px 0;
}
.cta-rail .rail-tel { min-height: 250px; }
.cta-rail .rail-web { min-height: 250px; }
.cta-rail .v-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  letter-spacing: 0.16em;
}
.cta-rail .v-upright { text-orientation: upright; letter-spacing: 0.1em; }
.cta-rail .v-sub {
  font-size: 8.5px;
  letter-spacing: 0.3em;
  opacity: 0.75;
  font-weight: 400;
}
.cta-rail .rail-web .v-sub { color: var(--brand-accent); opacity: 1; }

/* --- PCアクセスカード: レールと重ならない位置へ --- */
@media (min-width: 1024px) {
  .access-card { right: 112px; border-radius: var(--radius-card); }
}

/* --- SPドック: 1:1で余白を確保 --- */
.cta-dock { grid-template-columns: 1fr 1fr; }
.cta-dock a { padding-inline: 8px; }
.cta-dock a .btn-main { font-size: 13.5px; white-space: nowrap; }

/* --- 差し色(セージ): サービスの英字ラベル --- */
:root { --brand-sage: #7FA37B; }
.svc-feature__body .svc-label,
.svc-mini__body .svc-label { color: var(--brand-sage); }
.strength__body .svc-label { color: #A9C8A5; }
.svc-feature__body h3::after {
  content: "";
  display: block;
  width: 30px; height: 2px;
  margin-top: 12px;
  background: linear-gradient(90deg, var(--brand-sage), rgba(127, 163, 123, 0.2));
}

/* --- SPアクセス: 写真大きめ+文字を隠さない重なり --- */
@media (max-width: 1023px) {
  .access-layer__photo { width: 100%; }
  .access-layer__photo img { aspect-ratio: 4 / 3.4; }
  .access-card {
    position: relative;
    z-index: 2;
    margin-top: -64px;
  }
}

/* --- ヒーロー: クロスフェードスライドショー --- */
.hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 68% 40%;
  opacity: 0;
}
.hero__media img:first-child { opacity: 1; }

/* --- FVボタンの視認性: 電話=緑ガラス地 / Web=白面 --- */
.hero .btn--gold-line {
  background: rgba(2, 47, 57, 0.55);
  backdrop-filter: blur(8px);
}
.hero .btn--gold-line:hover { background: rgba(1, 33, 42, 0.75); color: var(--brand-ivory); }
.hero .btn--light {
  background: rgba(250, 247, 242, 0.95);
  color: var(--brand-primary);
  border-color: transparent;
  box-shadow: var(--shadow-card);
}
.hero .btn--light .btn-sub { color: var(--brand-primary); opacity: 0.65; }
.hero .btn--light:hover { background: var(--brand-ivory); color: var(--brand-primary); }

/* --- フッターLINEボタン --- */
.ft-line-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--line-green);
  color: #fff;
  border: 0 !important;
  border-radius: 999px;
  padding: 14px 34px !important;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px !important;
  letter-spacing: 0.06em !important;
  box-shadow: 0 8px 24px rgba(6, 199, 85, 0.25);
}
.ft-line-btn:hover { filter: brightness(0.94); background: var(--line-green) !important; color: #fff !important; }
.ft-line-btn small { font-size: 8.5px; letter-spacing: 0.26em; opacity: 0.85; }

/* ==========================================================================
   v11: レール英字サイズ統一 / ヘッダーCTAのベタ地ボタン化
   ========================================================================== */

/* --- レール: PHONE RESERVATION を ONLINE BOOKING と同サイズに --- */
.cta-rail .rail-tel small {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 8.5px;
  letter-spacing: 0.3em;
  opacity: 0.75;
}

/* --- ヘッダー: 電話・WEB予約を面のあるボタンに(透過廃止) --- */
.header-tel {
  background: rgba(1, 33, 42, 0.78);
  border: 1px solid rgba(208, 172, 109, 0.35);
  border-radius: 8px;
  padding: 8px 16px 9px;
  transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.header-tel:hover { border-color: var(--brand-accent); background: rgba(1, 33, 42, 0.95); }
.header-reserve {
  background: linear-gradient(135deg, #0E4A57 0%, var(--brand-primary-dark) 100%);
  border-color: rgba(208, 172, 109, 0.75);
  box-shadow: 0 4px 16px rgba(1, 33, 42, 0.35);
}
.header-reserve:hover {
  background: linear-gradient(135deg, #146070 0%, #06303c 100%);
  border-color: var(--brand-accent);
  color: var(--brand-ivory);
}

/* ==========================================================================
   v12: ヘッダーCTA統一 / SERVICES背景英字 / 緑面グラデ / 強みCTA英字
   ========================================================================== */

/* --- ヘッダーCTA: 同サイズ2段構成 --- */
.hbtn {
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  min-width: 205px;
  padding: 7px 18px 8px !important;
  border-radius: 8px;
  line-height: 1.3;
}
.header-tel.hbtn small {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--brand-accent);
  font-family: var(--font-heading);
  white-space: nowrap;
}
.header-tel.hbtn .num {
  font-family: var(--font-num);
  font-size: 15.5px;
  letter-spacing: 0.05em;
  color: var(--brand-ivory);
}
.header-reserve.hbtn { display: inline-flex !important; }
.header-reserve.hbtn .btn-main { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }
.header-reserve.hbtn small {
  font-size: 8px;
  letter-spacing: 0.28em;
  color: var(--brand-accent);
  font-weight: 400;
}

/* --- 深緑セクション: グラデで重みを --- */
.theme-green {
  background:
    radial-gradient(120% 90% at 85% 8%, rgba(208, 172, 109, 0.09), transparent 55%),
    linear-gradient(172deg, #0B4450 0%, var(--brand-primary) 42%, #011B23 100%);
}
.marquee--green {
  background: linear-gradient(180deg, #01252E 0%, var(--brand-primary-dark) 100%);
}

/* --- 強みCTA: 英字サブ --- */
.strength__cta .btn-main { display: inline-flex; align-items: center; }
.strength__cta .btn-sub { color: var(--brand-accent); opacity: 1; font-size: 9px; letter-spacing: 0.26em; }

/* ==========================================================================
   v13: SPヘッダー復旧 / 料金目次 / マップ / SP微調整 / サービスギャラリー
   ========================================================================== */

/* --- SP: ヘッダーはロゴ+ハンバーガーのみ(WEBボタン非表示を再徹底) --- */
@media (max-width: 1279px) {
  .header-tel, .header-reserve, .header-reserve.hbtn { display: none !important; }
}

/* --- SP: 本文をさらに一段小さく(13-14px帯へ) --- */
@media (max-width: 767px) {
  body { font-size: 13.5px; }
  .lead { font-size: 14px; line-height: 2.05; }
  .heading-note { font-size: 13px; }
  .hero__sub { font-size: 12.5px; }
}

/* --- 料金ページ: 白地の目次リスト --- */
.page-index--toc { margin-top: 0; display: block; }
.page-index--toc .toc-title {
  font-size: 10.5px;
  letter-spacing: 0.3em;
  color: var(--brand-accent);
  margin-bottom: 14px;
}
.page-index--toc ol {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 48px;
  border-top: 1px solid var(--brand-line);
}
.page-index--toc li a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 13px 6px;
  border: 0;
  border-bottom: 1px solid var(--brand-line);
  border-radius: 0;
  font-size: 14px;
  color: var(--brand-ink);
  letter-spacing: 0.06em;
}
.page-index--toc li a .en {
  font-size: 12px;
  color: transparent;
  -webkit-text-stroke: 0.8px var(--brand-accent);
}
.page-index--toc li a::after {
  content: "→";
  margin-left: auto;
  font-family: var(--font-en);
  color: var(--brand-accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s, transform 0.25s var(--ease-out);
}
.page-index--toc li a:hover { color: var(--brand-primary); background: rgba(208, 172, 109, 0.06); }
.page-index--toc li a:hover::after { opacity: 1; transform: none; }
@media (max-width: 767px) {
  .page-index--toc ol { grid-template-columns: 1fr; }
}

/* --- Googleマップ埋め込み --- */
.map-embed {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  aspect-ratio: 16 / 8;
}
.map-embed iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  filter: saturate(0.85) contrast(1.02);
}
@media (max-width: 767px) { .map-embed { aspect-ratio: 4 / 3.2; } }

/* --- SP FV: 電話ボタンの文字をはっきり --- */
@media (max-width: 640px) {
  .hero__cta .btn--gold-line .btn-sub {
    color: var(--brand-primary);
    opacity: 1;
    font-weight: 700;
  }
  .hero__cta .btn--gold-line .btn-num { font-weight: 600; }
}

/* --- SPアクセス: 縦書き見出しの右余白を拡大 --- */
@media (max-width: 1023px) {
  .access-card { padding-right: 40px; }
  .access-card__v { font-size: 1.08rem; letter-spacing: 0.12em; }
}

/* ==========================================================================
   v14: サービス下層の自動ギャラリースライダー / 料金表SP縦積み /
   SPメニューCTA整形
   ========================================================================== */

/* --- ギャラリー: 右→左へ流れ続ける無限スライダー --- */
.gal-slider { overflow: clip; }
.gal-slider__track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: galslide 48s linear infinite;
  will-change: transform;
}
.gal-slider figure {
  flex: none;
  width: clamp(230px, 30vw, 380px);
  margin: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.gal-slider img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
@keyframes galslide { to { transform: translateX(calc(-50% - 9px)); } }
.gal-slider:hover .gal-slider__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .gal-slider { overflow-x: auto; }
  .gal-slider__track { animation: none; }
}

/* --- 料金表: SPは横スクロールせず縦積みカード行に --- */
@media (max-width: 767px) {
  .table-wrap { overflow: visible; }
  table, tbody { display: block; width: 100%; min-width: 0; }
  td.num { white-space: nowrap; }
  thead { display: none; }
  tr {
    display: block;
    position: relative;
    padding: 13px 96px 13px 2px;
    border-bottom: 1px solid var(--brand-line);
  }
  td {
    display: block;
    border: 0 !important;
    padding: 0 !important;
    font-size: 12px;
    color: var(--brand-ink-sub);
    text-align: left !important;
  }
  td:first-child {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--brand-ink);
    margin-bottom: 2px;
  }
  td.num {
    position: absolute;
    right: 2px; top: 50%;
    transform: translateY(-50%);
    font-size: 15.5px;
    color: var(--brand-primary);
    font-weight: 500;
  }
}

/* --- SPメニューのCTA: FVと同型に整形 --- */
.sp-menu .button-row { flex-direction: column; gap: 12px; }
.sp-menu .button-row .btn { width: 100%; min-height: 58px; }
.sp-menu .btn--gold-line { background: rgba(250, 247, 242, 0.07); }
.sp-menu .btn--gold-line .btn-num { font-size: 19px; }

/* ==========================================================================
   v15: 料金表のサイズ別価格 / 適合表 / 目次余白 / SP FV電話ボタン /
   CTA数字のセリフ化
   ========================================================================== */

/* --- 目次: 行内パディングを広めに --- */
.page-index--toc li a { padding: 15px 10px; }
.page-index--toc ol { margin-bottom: 6px; }

/* --- CTAの数字はセリフ(Marcellus)で統一 --- */
.btn-num,
.header-tel.hbtn .num,
.tel-big .num,
.access-tel,
.ft-tel {
  font-family: var(--font-en);
  font-weight: 400;
}

/* --- SP: 料金表のサイズ別価格(部分メニュー/オプション) --- */
@media (max-width: 767px) {
  .table--multi td.num {
    position: static;
    transform: none;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
    font-size: 14px;
    color: var(--brand-primary);
    font-weight: 500;
    padding: 3px 0 !important;
    text-align: right !important;
  }
  .table--multi td.num::before {
    content: attr(data-l);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--brand-ink-sub);
  }
  .table--multi tr { padding: 13px 2px; }
  .table--multi td:nth-child(2) { margin-bottom: 8px; }

  /* --- SP: サイズ適合表は表形式のまま --- */
  .table--matrix { display: table; min-width: 0; }
  .table--matrix thead { display: table-header-group; }
  .table--matrix tbody { display: table-row-group; }
  .table--matrix tr { display: table-row; padding: 0; border: 0; }
  .table--matrix th,
  .table--matrix td {
    display: table-cell;
    padding: 10px 4px !important;
    border-bottom: 1px solid var(--brand-line) !important;
    font-size: 11px;
    text-align: center !important;
    color: var(--brand-ink);
    vertical-align: middle;
  }
  .table--matrix thead th {
    font-size: 9.5px;
    letter-spacing: 0.04em;
    color: var(--brand-ink-sub);
  }
  .table--matrix th:first-child,
  .table--matrix td:first-child {
    text-align: left !important;
    font-weight: 700;
    white-space: nowrap;
  }
  .table--matrix caption { font-size: 13.5px; }
}

/* --- SP FV: 電話ボタンは濃い青緑地+白文字 --- */
@media (max-width: 640px) {
  .hero__cta .btn--gold-line {
    background: linear-gradient(150deg, #0C4551 0%, #032A33 100%) !important;
    backdrop-filter: none;
    border-color: var(--brand-accent);
    color: var(--brand-ivory);
  }
  .hero__cta .btn--gold-line .btn-sub { color: var(--brand-ivory); opacity: 0.95; }
  .hero__cta .btn--gold-line .btn-num { color: #fff; }
}

/* v16fix: マーキー文字用のcolor:transparentが犬spanに勝っていた */
.marquee span.marquee__dog {
  color: var(--brand-accent);
  -webkit-text-stroke: 0;
  padding-right: 0;
}

/* ==========================================================================
   v17: マーキー — 犬撤去 / 上セクションに密着 / タイポ大型化
   ========================================================================== */
.marquee {
  margin-top: 0;
  overflow: clip;
  padding-block: clamp(26px, 3.4vw, 40px);
}
.marquee span {
  font-size: clamp(1.7rem, 3.6vw, 2.9rem);
  letter-spacing: 0.16em;
  padding-right: 2.4em;
}
.marquee__track--rev { margin-top: 10px; }
/* 強み(深緑グラデの終端色)からシームレスに続ける */
.marquee--green {
  background: linear-gradient(180deg, #011B23 0%, #01242D 100%);
  border-top-color: transparent;
}
.marquee__dog { display: none; }

/* ==========================================================================
   v18: マーキー微調整 / SERVICES重ね / 強み下の帯位置
   ========================================================================== */

/* --- 帯: 上ラインなし・下ラインのみ / 速度統一 --- */
.marquee { border-top: 0; }
.marquee__track,
.marquee__track--rev { animation-duration: 60s; }

/* FV下(アイボリー帯)は控えめサイズ・上を詰める */
.marquee:not(.marquee--green) { padding-block: 14px 22px; }
.marquee:not(.marquee--green) span {
  font-size: clamp(1rem, 2vw, 1.45rem);
  letter-spacing: 0.24em;
}
.marquee:not(.marquee--green) .marquee__track--rev { margin-top: 6px; }

/* --- SERVICES: 背景英字に見出しを重ねる(上余白を詰める) --- */
.svc-sec { padding-top: clamp(3.2rem, 6.5vw, 5rem); }

/* --- 強み: 下の緑帯を上へ寄せ、帯下に余白を --- */
.strengths-sec { padding-bottom: clamp(2.8rem, 5.5vw, 4.5rem); }
.marquee--green { padding-block: clamp(30px, 4vw, 46px) clamp(34px, 4.5vw, 52px); }

/* --- 下層ページ: セクション余白を適正化(トップの演出用余白を引き継がない) --- */
body:not(.home) .section { padding-block: clamp(4.2rem, 8vw, 6.5rem); }
body:not(.home) .section--tight { padding-block: clamp(2.8rem, 5.5vw, 4.2rem); }
body:not(.home) .section--flush-top { padding-top: 0; }

/* --- 表: ヘッダー/カテゴリをはっきり --- */
thead th {
  color: var(--brand-ink);
  font-weight: 600;
  font-size: 12.5px;
}
td[rowspan] {
  font-weight: 700;
  color: var(--brand-primary);
}
caption { font-size: 17px; }
.table-note { margin-top: 14px; }

/* ==========================================================================
   v19: 緑帯サイズ統一 / 肉球あしらい / SP表caption修正 / ヴェールロゴ
   ========================================================================== */

/* --- 緑帯もFV下と同サイズ・下に余韻 --- */
.marquee--green { padding-block: 14px 32px; }
.marquee--green span {
  font-size: clamp(1rem, 2vw, 1.45rem);
  letter-spacing: 0.24em;
}
.marquee--green .marquee__track--rev { margin-top: 6px; }

/* --- フィロソフィ: 白い肉球を薄く散らす --- */
.st-paw {
  position: absolute;
  z-index: 0;
  width: var(--s, 50px);
  rotate: var(--r, 0deg);
  color: #fff;
  opacity: 0.8;
  pointer-events: none;
  filter: drop-shadow(0 1px 0 rgba(2, 47, 57, 0.04));
}
.st-paw .paw-svg { width: 100%; height: auto; display: block; }
@media (max-width: 767px) { .st-paw { opacity: 0.55; --s: 40px; } }

/* --- SP表: captionの崩壊(縦長化)を修正 --- */
@media (max-width: 767px) {
  .table-wrap caption {
    display: block;
    width: 100%;
    padding: 0 0 14px;
    font-size: 15px;
  }
}

/* --- ページ遷移ヴェール: ロゴ --- */
.page-veil .bean-mark img { height: 74px; width: auto; display: block; }

/* ==========================================================================
   v20: 料金表の背景白ベース統一 / SP下層ヒーロー詰め / 料金ブロックの
   グルーピング(見出しは表に寄せ、前ブロックとの間に余白)
   ========================================================================== */

/* --- SP: 下層ヒーロー(パンくず/タイトル/リード)の行間を詰める --- */
@media (max-width: 767px) {
  .page-hero { padding: 112px 0 48px; }
  .breadcrumb { margin-bottom: 16px; }
  .page-hero .lead { margin-top: 10px; }
}

/* --- 料金ブロック: 見出し⇔表を近づけ、ブロック間に大きな余白 --- */
.price-block + .price-block { margin-top: clamp(4.2rem, 8.5vw, 7rem); }
.price-block .section-heading { margin-bottom: clamp(1.3rem, 2.4vw, 1.9rem); }
.price-block .button-row { margin-top: 34px; }
.price-block .table-note { margin-top: 16px; }

/* v20fix: 適合表(matrix)のcaptionはtable-captionのまま上に */
@media (max-width: 767px) {
  .table--matrix caption {
    display: table-caption;
    caption-side: top;
    padding: 0 0 12px;
  }
}

/* ==========================================================================
   v21: 全文明朝 / SP・タブレット本文13.5px統一 / ナビ英字サブ /
   予約パネル電話CTAの階層入替 / ドック常時表示対応
   ========================================================================== */

/* --- SP/タブレット: 本文サイズをトップと同じ13.5pxに統一 --- */
@media (max-width: 1023px) {
  body { font-size: 13.5px; }
  .lead { font-size: 13.5px; line-height: 2.05; }
  .feature-list li { font-size: 13px; }
  .heading-note { font-size: 12.5px; }
  table { font-size: 13px; }
}

/* --- PCナビ: 日本語+小さな英語 --- */
.global-nav > li > a,
.global-nav > li > button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.3;
}
.nav-en {
  font-size: 8px;
  letter-spacing: 0.26em;
  color: var(--brand-accent);
  opacity: 0.9;
  font-weight: 400;
}

/* --- 予約パネル: 「電話で予約する」を主役に、番号は控えめに --- */
.tel-big__label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(17px, 2vw, 21px);
  letter-spacing: 0.1em;
  color: var(--brand-ivory);
}
.reserve-panel .tel-big .num {
  font-size: 12.5px !important;
  letter-spacing: 0.14em;
  color: var(--brand-accent);
  font-family: var(--font-en);
}
@media (max-width: 767px) {
  .reserve-panel .tel-big .num { font-size: 11px !important; white-space: nowrap; }
  .tel-big__label { white-space: nowrap; }
}

/* --- フッター: 固定ドックに隠れないよう最下部に余白(常時表示化に伴い) --- */
@media (max-width: 1279px) {
  .site-footer .footer-bottom { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   v22: お部屋カード / タブレット全面調整 / 金の肉球 / 筆記体アクセント /
   ショーケース進捗インジケーター
   ========================================================================== */

/* --- フィロソフィ肉球: 白→薄い金 --- */
.st-paw { color: var(--brand-accent); opacity: 0.38; filter: none; }
@media (max-width: 767px) { .st-paw { opacity: 0.3; } }

/* --- 筆記体アクセント(サービス/強みの写真) --- */
.script-accent {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  font-family: "Pinyon Script", "Marcellus", cursive;
  font-weight: 400;
  color: var(--brand-accent);
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.1;
  rotate: -7deg;
  opacity: 0.95;
  text-shadow: 0 2px 18px rgba(2, 26, 35, 0.5);
  white-space: nowrap;
}
.script-accent--br { right: clamp(16px, 2.4vw, 30px); bottom: clamp(10px, 2vw, 22px); }
.script-accent--tl { left: clamp(16px, 2.4vw, 30px); top: clamp(8px, 1.8vw, 18px); }
@media (max-width: 767px) { .script-accent { font-size: 26px; } }

/* --- ホテル: サイズ別に選べるお部屋(カード表示) --- */
.rooms-avail__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.rooms-avail__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ravail {
  background: #fff;
  border: 1px solid rgba(2, 47, 57, 0.1);
  border-radius: 14px;
  padding: 18px 16px 12px;
  box-shadow: 0 8px 24px rgba(2, 47, 57, 0.05);
}
.ravail__en {
  display: block;
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: 4px;
  white-space: nowrap;
}
.ravail__name {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  padding-bottom: 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(2, 47, 57, 0.1);
}
.ravail ul { list-style: none; margin: 0; padding: 0; }
.ravail li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  padding: 7px 0;
}
.ravail li + li { border-top: 1px dashed rgba(2, 47, 57, 0.08); }
.ravail li::after { content: "○"; font-weight: 700; color: var(--brand-sage); }
.ravail li.ng { color: rgba(2, 47, 57, 0.42); }
.ravail li.ng::after { content: "—"; color: rgba(2, 47, 57, 0.3); font-weight: 400; }
@media (max-width: 1023px) {
  .rooms-avail__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ravail { padding: 15px 14px 10px; }
}

/* --- ショーケース: 3枚あることを示す進捗バー --- */
.showcase__prog {
  position: absolute;
  right: clamp(14px, 2vw, 26px);
  top: 50%;
  translate: 0 -50%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.showcase__prog span {
  width: 3px;
  height: 28px;
  border-radius: 2px;
  background: rgba(250, 247, 242, 0.3);
  transition: background-color 0.3s, height 0.3s;
}
.showcase__prog span.is-on { background: var(--brand-accent); height: 44px; }
@media (prefers-reduced-motion: reduce) { .showcase__prog { display: none; } }

/* --- タブレット(768-1279): 余白・FV・ヘッダー(ハンバーガー化はブレークポイント変更側) --- */
@media (min-width: 768px) and (max-width: 1279px) {
  .container { width: min(var(--w-content), calc(100% - 88px)); }
  .container--wide { width: min(var(--w-wide), calc(100% - 88px)); }
  .hero__inner {
    width: 100%;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 140px clamp(44px, 6.5vw, 76px) 112px;
  }
  .hero h1.en-display { font-size: clamp(3.3rem, 8.2vw, 5rem); line-height: 1.1; letter-spacing: 0.01em; }
  .hero__jp { margin-top: 22px; font-size: clamp(15px, 2.2vw, 18px); letter-spacing: 0.1em; }
  .hero__sub { margin-top: 16px; font-size: 13.5px; max-width: 34em; }
  .hero__cta { margin-top: 36px; }
}
/* タブレット縦(768-1023): アクセスカードを写真に被せすぎない */
@media (min-width: 768px) and (max-width: 1023px) {
  .access-card {
    width: min(500px, 92%);
    margin: -20px 0 0 auto;
    border-radius: var(--radius-card) 0 0 var(--radius-card);
  }
}
/* 1024-1279: レールが無いのでアクセスカードの右余白を詰める */
@media (min-width: 1024px) and (max-width: 1279px) {
  .access-card { right: 36px; }
}

/* --- 汎用: 単語内改行の防止 --- */
.nw { white-space: nowrap; display: inline-block; }

/* --- お部屋カード: SPで途中改行を防ぐ --- */
@media (max-width: 479px) {
  .rooms-avail__grid { gap: 8px; }
  .ravail { padding: 13px 12px 9px; }
  .ravail__name { font-size: 12.5px; letter-spacing: 0.02em; white-space: nowrap; }
  .ravail li { font-size: 11.5px; white-space: nowrap; letter-spacing: 0.01em; }
}

/* ==========================================================================
   v23: 内枠撤去 / 筆記体はみ出し配置 / CTA階層 / 見出しアンダーライン /
   住所確定・LINE公式リンク
   ========================================================================== */

/* --- 筆記体: 画像の角から大きくはみ出す --- */
.svc-fig { position: relative; }
.svc-fig .script-accent {
  font-size: clamp(46px, 5.2vw, 76px);
  opacity: 0.92;
  rotate: -6deg;
  text-shadow: 0 2px 22px rgba(2, 26, 35, 0.35);
}
.svc-fig .script-accent--tl { left: -18px; right: auto; top: -34px; bottom: auto; }
.svc-fig .script-accent--br { right: clamp(12px, 4vw, 56px); left: auto; bottom: -30px; top: auto; }
@media (max-width: 767px) {
  .svc-fig .script-accent { font-size: 38px; }
  .svc-fig .script-accent--tl { left: -6px; top: -24px; }
  .svc-fig .script-accent--br { right: 8px; bottom: -22px; }
}

/* --- 見出し: EN大見出しに金のアンダーライン --- */
.section-heading h2.en-display::after {
  content: "";
  display: block;
  width: 54px; height: 2px;
  margin-top: 20px;
  background: linear-gradient(90deg, var(--brand-accent), rgba(208, 172, 109, 0.1));
  border-radius: 1px;
}
.center .section-heading h2.en-display::after,
.center.section-heading h2.en-display::after {
  margin-inline: auto;
  background: linear-gradient(90deg, rgba(208, 172, 109, 0.1), var(--brand-accent), rgba(208, 172, 109, 0.1));
}

/* --- FV電話CTA: ラベル主役・番号は小さく --- */
.btn--stack .btn-sub.numeric {
  font-family: var(--font-en);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  opacity: 0.85;
}
.hero__cta .btn--stack .btn-main { font-size: 15px; letter-spacing: 0.1em; }

/* --- 予約パネル電話: 番号のみ・少し大きく整える --- */
.reserve-panel .tel-big { width: fit-content; min-width: 300px; }
.reserve-panel .tel-big .num { font-size: 13px !important; letter-spacing: 0.2em; }
@media (max-width: 767px) {
  .reserve-panel .tel-big { width: 100%; min-width: 0; }
  .reserve-panel .tel-big .num { font-size: 12px !important; }
}

/* --- サービスminiカード: ホバーで金線 --- */
.svc-mini { transition: translate 0.35s var(--ease-out, ease), box-shadow 0.35s, border-color 0.35s; }
.svc-mini:hover { border-color: rgba(208, 172, 109, 0.55); }

/* ==========================================================================
   v24: 筆記体 — 右下配置は右へはみ出す / SPは全て右下に統一
   ========================================================================== */
.svc-fig .script-accent--br { right: -16px; left: auto; }
@media (max-width: 767px) {
  .svc-fig .script-accent,
  .svc-fig .script-accent--tl,
  .svc-fig .script-accent--br {
    left: auto; top: auto;
    right: -30px; bottom: -18px;
  }
}

/* ==========================================================================
   v25: 筆記体の角度UP / タブレット:ショーケースcap・アクセス右下化 /
   CTAリッチ化 / SP:キャッチと肉球の被り解消
   ========================================================================== */

/* --- 筆記体: 角度をもう少し --- */
.svc-fig .script-accent { rotate: -10deg; }

/* --- タブレット(1024-1279): ショーケースの文字が固定CTAに隠れない --- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .showcase__stage { height: calc(100svh - 64px - env(safe-area-inset-bottom, 0px)); }
  .showcase__cap { bottom: 34px; }
}

/* --- タブレット: アクセスカードを画像の右下側へ・下パディング追加 --- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .access-card { top: auto; bottom: -36px; padding-bottom: 52px; }
  .access-layer { padding-bottom: 120px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .access-card { padding-bottom: 46px; }
}

/* --- CTAリッチ化: FV/メニューの電話ボタン --- */
.hero__cta .btn--stack, .sp-menu .btn--stack { border-radius: 12px; }
.hero__cta .btn--gold-line, .sp-menu .btn--gold-line {
  background: linear-gradient(165deg, #10505D 0%, #063441 55%, #04303A 100%);
  border: 1.5px solid rgba(208, 172, 109, 0.9);
  box-shadow: 0 12px 28px rgba(1, 20, 26, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.hero__cta .btn--gold-line:hover {
  background: linear-gradient(165deg, #14596A 0%, #084050 55%, #063a46 100%);
  box-shadow: 0 18px 36px rgba(1, 20, 26, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.hero__cta .btn--light { box-shadow: 0 12px 28px rgba(1, 20, 26, 0.35); }
.hero__cta .btn--line, .sp-menu .btn--line { box-shadow: 0 12px 28px rgba(4, 58, 31, 0.35); }

/* --- CTAリッチ化: 予約パネルの電話ボタン --- */
.reserve-panel .tel-big {
  background:
    linear-gradient(135deg, rgba(208, 172, 109, 0.2), rgba(208, 172, 109, 0.04) 45%, rgba(208, 172, 109, 0.16) 100%),
    linear-gradient(165deg, rgba(13, 72, 85, 0.85), rgba(2, 32, 40, 0.92));
  border: 1.5px solid var(--brand-accent);
  border-radius: 14px;
  padding: 20px 48px 22px;
  box-shadow: 0 14px 32px rgba(1, 20, 26, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;
}
.reserve-panel .tel-big:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 42px rgba(1, 20, 26, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
@media (max-width: 767px) {
  .reserve-panel .tel-big { padding: 18px 16px 20px; }
}

/* --- SP: Quality Daysのキャッチが肉球と被らないように --- */
@media (max-width: 767px) {
  .st-paw--hi { display: none; }
  .st-paw { opacity: 0.2; }
  /* 装飾写真を文字帯から退避 */
  .statement__img { opacity: 0.14; width: clamp(108px, 26vw, 150px); }
  .statement__img--l { left: -7%; top: 1%; }
  .statement__img--r { right: -7%; top: auto; bottom: 5%; }
  /* 本文レイヤーを最前面へ(インラインz-index:1を上書き) */
  .statement .container.center { z-index: 3 !important; }
  .statement .eyebrow--jp { color: var(--brand-primary); font-weight: 600; }
}

/* --- FVボタン: 押したくなるサイズ感と質感 --- */
.hero__cta .btn--stack {
  min-height: 68px;
  min-width: 248px;
  padding-inline: 34px;
}
.hero__cta .btn--stack .btn-main { font-size: 16px; }
.hero__cta .btn { transition: transform 0.3s, box-shadow 0.3s, background 0.3s, border-color 0.3s; }
.hero__cta .btn:hover { transform: translateY(-3px); }
@media (max-width: 767px) {
  .hero__cta .btn--stack { min-height: 60px; min-width: 0; padding-inline: 18px; }
  .hero__cta .btn--stack .btn-main { font-size: 15px; }
}

/* --- タブレット: ショーケースの文字を固定CTAからさらに離す --- */
@media (min-width: 768px) and (max-width: 1279px) {
  .showcase__cap { bottom: 46px; }
}

/* ==========================================================================
   v27: 豆のあしらい撤去 / セクション背景テクスチャ（斜めヘアライン＋淡い光）
   ========================================================================== */

/* 深緑面：金の極細ヘアライン + 角のグロー（テーマのグラデーションは維持） */
.theme-green.tex-weave {
  background-image:
    repeating-linear-gradient(135deg, rgba(208, 172, 109, 0.032) 0 1px, transparent 1px 14px),
    radial-gradient(120% 90% at 85% 8%, rgba(208, 172, 109, 0.1), transparent 55%),
    radial-gradient(80% 60% at 0% 18%, rgba(127, 163, 123, 0.09), transparent 60%),
    linear-gradient(172deg, #0B4450 0%, var(--brand-primary) 42%, #011B23 100%);
}

/* アイボリー面：紙目のヘアライン + 金とセージの淡い光 */
.tex-paper,
.section.tex-paper:not(.theme-green):not(.theme-ivory-deep) {
  background-image:
    repeating-linear-gradient(135deg, rgba(2, 47, 57, 0.022) 0 1px, transparent 1px 12px),
    radial-gradient(70% 55% at 100% 0%, rgba(208, 172, 109, 0.11), transparent 60%),
    radial-gradient(60% 50% at 0% 100%, rgba(127, 163, 123, 0.07), transparent 60%);
}
.theme-ivory-deep.tex-paper {
  background-image:
    repeating-linear-gradient(135deg, rgba(2, 47, 57, 0.022) 0 1px, transparent 1px 12px),
    radial-gradient(70% 55% at 100% 0%, rgba(208, 172, 109, 0.11), transparent 60%),
    radial-gradient(60% 50% at 0% 0%, rgba(208, 172, 109, 0.1), transparent 55%),
    linear-gradient(180deg, var(--brand-ivory-deep), #EFE9DE);
}

/* セクションの切り替わりに金のヘアライン（アイボリー面のみ・控えめ） */
.tex-paper { position: relative; }
.tex-paper::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(208, 172, 109, 0.45), transparent);
  pointer-events: none;
}

/* ==========================================================================
   v28: 強みセクション→緑マーキーの背景を継ぎ目なく連結
   ========================================================================== */
.marquee--green {
  background-color: #011B23;
  background-image:
    repeating-linear-gradient(135deg, rgba(208, 172, 109, 0.032) 0 1px, transparent 1px 14px);
  background-repeat: repeat;
  border-top: 0;
  margin-top: 0;
}
.strengths-sec { padding-bottom: 0; }
.strengths-sec + .marquee--green {
  /* サブピクセル境界でアイボリー地が1px透けるのを防ぐため1px重ねる */
  margin-top: -1px;
  padding-top: calc(clamp(2.6rem, 5vw, 4rem) + 1px);
}

/* ==========================================================================
   v30: 規約・ポリシー本文（プライバシーポリシー）
   ========================================================================== */
.legal-doc { max-width: 52em; }
.legal-doc h2 {
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(2, 47, 57, 0.12);
  margin-bottom: 18px;
}
.legal-doc p { margin-bottom: 1em; }
.legal-doc .legal-lead { font-size: 1.02em; }
.legal-doc ol, .legal-doc ul { margin: 0 0 1.2em 1.4em; padding: 0; }
.legal-doc ol { list-style: decimal; }
.legal-doc li { margin-bottom: 0.7em; line-height: 2; }
.legal-doc a { text-decoration: underline; text-underline-offset: 3px; }
.legal-doc .table-wrap { margin-bottom: 1.4em; }
.legal-doc th { text-align: left; white-space: nowrap; }
.legal-contact { list-style: none; margin-left: 0; }
.legal-contact li { padding-left: 1.1em; position: relative; }
.legal-contact li::before {
  content: ""; position: absolute; left: 0; top: 0.85em;
  width: 6px; height: 1px; background: var(--brand-accent);
}
.legal-date { margin-top: 3rem; color: var(--brand-ink-sub); font-size: 0.92em; }

/* 外部サービスへの情報送信 */
.ext-svc { display: grid; gap: 14px; margin: 0 0 1.4em; }
.ext-svc__item {
  border: 1px solid rgba(2, 47, 57, 0.12);
  border-radius: 12px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.6);
}
.ext-svc__name {
  font-family: var(--font-heading); font-weight: 700;
  margin-bottom: 10px !important;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(2, 47, 57, 0.1);
}
.ext-svc__name span {
  display: block; font-weight: 400; font-size: 0.78em;
  letter-spacing: 0.06em; color: var(--brand-ink-sub); margin-top: 3px;
}
.ext-svc dl { display: grid; gap: 8px; margin: 0; }
.ext-svc dl > div { display: grid; grid-template-columns: 8.5em 1fr; gap: 10px; }
.ext-svc dt { font-size: 0.86em; color: var(--brand-ink-sub); letter-spacing: 0.06em; }
.ext-svc dd { margin: 0; font-size: 0.92em; }
@media (min-width: 768px) { .ext-svc { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) {
  .ext-svc dl > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ==========================================================================
   v31: 事業者情報(company/)の法定表示テーブル
   料金表用のSP縦積みルール(tr に 96px のファントム余白、td を小さな補足文字に
   する等)が th/td 2列の定義表に当たって崩れていたため、専用クラスで上書きする。
   ========================================================================== */

.reg-wrap {
  max-width: 760px;
  border: 1px solid rgba(2, 47, 57, 0.12);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.6);
  padding: 4px 26px;
}
.reg-table { min-width: 0; }
.reg-table th,
.reg-table td { padding: 16px 0; vertical-align: top; }
.reg-table th {
  width: 14em;
  font-weight: 500;
  color: var(--brand-ink-sub);
  letter-spacing: 0.04em;
}
.reg-table td {
  padding-left: 12px;
  color: var(--brand-ink);
  /* 「博多那珂店」が「那/珂」で割れるのを防ぎ、空白位置で折り返す。
     1語で入りきらない場合だけ anywhere が効いてはみ出しを防ぐ。 */
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.reg-table tbody tr:last-child th,
.reg-table tbody tr:last-child td { border-bottom: 0; }
.reg-table tbody tr:hover { background: transparent; }

/* SP: ラベルを上、値を下に積む(料金表の縦積みルールを無効化) */
@media (max-width: 767px) {
  .reg-wrap { padding: 2px 18px; }
  .reg-table,
  .reg-table tbody { display: block; }
  .reg-table tr {
    display: block;
    padding: 15px 0;
    border-bottom: 1px solid var(--brand-line);
  }
  .reg-table tbody tr:last-child { border-bottom: 0; }
  .reg-table th,
  .reg-table td {
    display: block;
    width: auto;
    border: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }
  .reg-table th {
    font-size: 11.5px;
    letter-spacing: 0.08em;
    color: var(--brand-ink-sub);
    margin-bottom: 5px;
  }
  .reg-table td { font-size: 14px; color: var(--brand-ink); }
}

/* ==========================================================================
   v34: グランドオープン記念キャンペーン — Bordeaux & Champagne
   トップで唯一の暖色面。深緑の補色(ボルドー)で強いコントラストを取りつつ、
   金は箔(グラデーション)と細罫に限定して高級感を保つ。
   レイヤー: z0 背景光/透かし → z1 写真 → z2 ガラスパネル → z3 メダリオン
   ========================================================================== */
.cp2 {
  position: relative;
  isolation: isolate;
  overflow: clip;
  color: var(--cp-blush);
  background:
    radial-gradient(55% 65% at 24% 38%, rgba(234, 214, 174, 0.14), transparent 62%),
    radial-gradient(45% 60% at 82% 60%, rgba(160, 44, 62, 0.45), transparent 65%),
    linear-gradient(165deg, var(--cp-wine) 0%, var(--cp-wine-deep) 58%, var(--cp-wine-dark) 100%);
}
/* 上下の細い箔ライン */
.cp2::before,
.cp2::after {
  content: "";
  position: absolute; left: 0; right: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--cp-champagne-deep) 20%, var(--cp-champagne-hi) 50%, var(--cp-champagne-deep) 80%, transparent);
}
.cp2::before { top: 0; }
.cp2::after { bottom: 0; }

/* 背景レイヤー: ダマスク風の極細斜線 + 透かし文字 */
.cp2__bg {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(135deg, rgba(234, 214, 174, 0.035) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(45deg, rgba(234, 214, 174, 0.02) 0 1px, transparent 1px 16px);
}
.cp2__watermark {
  position: absolute;
  left: -2%; bottom: -0.18em;
  font-family: var(--font-poster);
  font-style: italic;
  font-size: clamp(7rem, 17vw, 16rem);
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(234, 214, 174, 0.12);
}

/* ティッカー: 箔の細罫で挟んだ静かな帯 */
.cp2__ticker {
  position: relative; z-index: 2;
  overflow: clip;
  padding-block: 13px;
  border-bottom: 1px solid rgba(234, 214, 174, 0.22);
  background: rgba(33, 6, 12, 0.35);
}
.cp2__ticker-track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.cp2__ticker span {
  display: inline-flex; align-items: center;
  white-space: nowrap;
  font-family: var(--font-en);
  font-size: 12.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cp-champagne);
}
.cp2__ticker i {
  display: inline-block;
  width: 5px; height: 5px;
  margin-inline: 2.2em;
  background: var(--cp-champagne-deep);
  transform: rotate(45deg);
}

/* --- グリッド --- */
.cp2__grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "head media" "info media";
  column-gap: clamp(40px, 6vw, 96px);
  align-items: start;
  padding-block: clamp(72px, 8vw, 120px);
}
.cp2__head { grid-area: head; }
.cp2__media { grid-area: media; align-self: center; position: relative; }
.cp2__info { grid-area: info; }

/* --- 見出し --- */
.cp2__kicker {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 18px;
  margin-bottom: 30px;
  font-size: 13px;
}
.cp2__kicker .en {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 12.5px; letter-spacing: 0.36em; color: var(--cp-champagne);
}
.cp2__kicker .en::before { content: ""; width: 40px; height: 1px; background: var(--cp-champagne-deep); }
.cp2__kdate { font-family: var(--font-poster); font-size: 19px; letter-spacing: 0.08em; }
.cp2__kdate small { font-family: var(--font-en); font-size: 10.5px; letter-spacing: 0.22em; opacity: 0.8; }
.cp2__shop { padding-left: 18px; border-left: 1px solid rgba(234, 214, 174, 0.4); letter-spacing: 0.18em; }

.cp2__title { color: var(--cp-blush); line-height: 1; letter-spacing: 0; }
.cp2__title-sub {
  display: block;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 600;
  letter-spacing: 0.22em;
}
/* 箔の質感(共通) */
.cp2__num,
.cp2__unit b:first-child,
.cp2__stamp-in b {
  background: linear-gradient(170deg, var(--cp-champagne-hi) 0%, var(--cp-champagne) 32%, var(--cp-champagne-deep) 62%, var(--cp-champagne) 88%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--cp-champagne);
}
.cp2__offer {
  display: flex; align-items: flex-end;
  gap: clamp(12px, 1.6vw, 22px);
  margin-top: clamp(18px, 2.4vw, 28px);
}
.cp2__pre {
  writing-mode: vertical-rl;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 600;
  letter-spacing: 0.28em;
  padding: 6px 0 6px 14px;
  margin-bottom: 1.1em;
  border-left: 1px solid var(--cp-champagne-deep);
  color: var(--cp-blush);
}
.cp2__num {
  font-family: var(--font-poster);
  font-weight: 500;
  font-size: clamp(9rem, 18vw, 16rem);
  line-height: 0.78;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums;
  filter: drop-shadow(0 18px 30px rgba(20, 3, 7, 0.45));
}
.cp2__unit { display: flex; flex-direction: column; line-height: 0.85; padding-bottom: 0.3em; margin-left: 0.1em; }
.cp2__unit b { font-family: var(--font-poster); font-weight: 500; }
.cp2__unit b:first-child { font-size: clamp(3.4rem, 6.4vw, 5.8rem); }
.cp2__unit b:last-child {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  letter-spacing: 0.14em;
  color: var(--cp-blush);
  margin-top: 8px;
}

.cp2__again {
  display: inline-flex; align-items: center; gap: 16px;
  margin-top: clamp(26px, 3vw, 36px);
  padding: 10px 26px;
  border: 1px solid rgba(234, 214, 174, 0.55);
  border-radius: 999px;
  background: rgba(234, 214, 174, 0.06);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.24em;
  color: var(--cp-champagne-hi);
}
.cp2__orn { width: 6px; height: 6px; background: var(--cp-champagne-deep); transform: rotate(45deg); flex: none; }

/* --- 写真(z1) --- */
.cp2__photo {
  position: relative;
  border-radius: 999px 999px 16px 16px;
  outline: 1px solid rgba(234, 214, 174, 0.55);
  outline-offset: 12px;
  box-shadow: 0 40px 80px -20px rgba(20, 3, 7, 0.7);
}
.cp2__photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 28%;
  border-radius: inherit;
  transition: transform 1.2s var(--ease-out);
}
.cp2__photo { overflow: clip; }
.cp2__media:hover .cp2__photo img { transform: scale(1.03); }
.cp2__photo::after { /* 写真の下端をボルドーへ溶かし、パネルの可読性を確保 */
  content: "";
  position: absolute; inset: 55% 0 0 0;
  background: linear-gradient(180deg, transparent, rgba(33, 6, 12, 0.55));
  pointer-events: none;
}

/* --- メダリオン(z3) --- */
.cp2__stamp {
  position: absolute; z-index: 3;
  right: clamp(-44px, -2.6vw, -20px);
  top: 8%;
  width: clamp(116px, 11vw, 144px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, var(--cp-wine) 0%, var(--cp-wine-dark) 75%);
  border: 1px solid var(--cp-champagne);
  box-shadow: 0 0 0 6px var(--cp-wine-dark), 0 0 0 7px rgba(234, 214, 174, 0.4), 0 20px 40px rgba(20, 3, 7, 0.55);
}
.cp2__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: cp-spin 48s linear infinite; }
.cp2__ring text { font-family: var(--font-en); font-size: 14.5px; letter-spacing: 0.18em; fill: var(--cp-champagne); }
.cp2__stamp-in {
  max-width: 64%;
  display: flex; flex-direction: column; align-items: center;
  line-height: 1.05;
  font-family: var(--font-en);
  text-transform: uppercase;
}
.cp2__stamp-in small { font-size: 8.5px; letter-spacing: 0.26em; color: rgba(247, 236, 230, 0.75); }
.cp2__stamp-in b { font-family: var(--font-poster); font-weight: 500; font-size: clamp(1.9rem, 2.7vw, 2.4rem); margin-block: 2px; }
@keyframes cp-spin { to { transform: rotate(360deg); } }

/* --- ガラスパネル(z2): 写真に重ねて期間と対象を集約 --- */
.cp2__panel {
  position: relative; z-index: 2;
  width: min(100% + 80px, 500px);
  margin: -120px 0 0 -80px;
  padding: 24px 26px 22px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(94, 22, 35, 0.72), rgba(33, 6, 12, 0.78));
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(234, 214, 174, 0.35);
  box-shadow: 0 30px 60px -18px rgba(20, 3, 7, 0.7), inset 0 1px 0 rgba(251, 241, 220, 0.12);
}
.cp2__label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--cp-champagne);
}
.cp2__period { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid rgba(234, 214, 174, 0.2); }
.cp2__dates { display: flex; align-items: center; gap: 14px; }
.cp2__dates time { font-family: var(--font-poster); font-weight: 500; font-size: clamp(1.7rem, 2.4vw, 2.1rem); line-height: 1; color: var(--cp-blush); }
.cp2__dates time small { font-family: var(--font-en); font-size: 10px; letter-spacing: 0.2em; margin-left: 5px; color: var(--cp-champagne); }
.cp2__dash { display: block; width: 28px; height: 1px; background: var(--cp-champagne-deep); }

.cp2__targets { padding-top: 16px; }
.cp2__targets .cp2__label { margin-bottom: 12px; letter-spacing: 0.18em; }
.cp2__targets ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cp2__targets a {
  position: relative;
  display: flex; height: 100%; flex-direction: column; align-items: center; gap: 7px;
  padding: 12px 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(234, 214, 174, 0.2);
  background: rgba(247, 236, 230, 0.05);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--cp-blush);
  text-decoration: none;
  transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}
/* 対象メニュー: 各サービスページへのリンク */
/* 文字欄は2行分の高さを確保し、1行の項目も「セルフ/シャンプー」の中央に揃える */
.cp2__targets ul { grid-auto-rows: 1fr; }
.cp2__targets a > span:last-child { display: flex; align-items: center; justify-content: center; min-height: 2.7em; text-align: center; line-height: 1.35; white-space: normal; word-break: keep-all; }
.cp2__targets a:hover, .cp2__targets a:focus-visible { border-color: rgba(234, 214, 174, 0.65); background: rgba(247, 236, 230, 0.12); }
.cp2__targets a:focus-visible { outline: 2px solid var(--cp-champagne); outline-offset: 2px; }
.cp2__ic svg { display: block; width: 24px; height: 24px; stroke-width: 1.3; color: var(--cp-champagne); }

/* --- 情報(左下): 残り日数・注記・CTA --- */
.cp2__count {
  display: inline-flex; align-items: baseline; gap: 10px;
  margin-top: clamp(30px, 3.4vw, 44px);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.12em;
  color: var(--cp-blush);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(234, 214, 174, 0.35);
}
.cp2__count b {
  font-family: var(--font-poster);
  font-weight: 500;
  font-size: 2.3rem;
  line-height: 1;
  padding-inline: 4px;
  color: var(--cp-champagne);
}
.cp2__notes { margin-top: 20px; }
.cp2__notes li {
  font-size: 14px;
  line-height: 1.85;
  color: rgba(247, 236, 230, 0.88);
  padding-left: 1em; text-indent: -1em;
}

.cp2__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.cp2__btn {
  position: relative;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  min-height: 64px; min-width: 240px;
  padding: 10px 32px;
  border-radius: var(--radius-btn);
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background-color 0.25s, border-color 0.25s;
}
.cp2__btn-main { display: inline-flex; align-items: center; gap: 8px; font-size: 16.5px; letter-spacing: 0.08em; }
.cp2__btn-sub { font-size: 11.5px; letter-spacing: 0.16em; opacity: 0.8; }
.cp2__btn--tel {
  min-width: 290px;
  color: var(--cp-wine-dark);
  background: linear-gradient(160deg, var(--cp-champagne-hi) 0%, var(--cp-champagne) 45%, var(--cp-champagne-deep) 100%);
  box-shadow: 0 14px 30px -10px rgba(20, 3, 7, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.cp2__btn--tel .cp2__btn-main { font-size: 18px; }
.cp2__btn--tel:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -10px rgba(20, 3, 7, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.cp2__btn--web,
.cp2__btn--line { border: 1px solid rgba(234, 214, 174, 0.6); color: var(--cp-blush); background: rgba(247, 236, 230, 0.04); }
.cp2__btn--web:hover { background: rgba(247, 236, 230, 0.1); border-color: var(--cp-champagne); }
.cp2__btn--line { background: var(--line-green); border-color: transparent; color: #fff; }
.cp2 :focus-visible { outline: 2px solid var(--cp-champagne-hi); outline-offset: 3px; }

.cp2__more {
  display: inline-flex; gap: 10px; align-items: center;
  margin-top: 24px;
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cp-blush);
  padding-bottom: 5px;
  background: linear-gradient(var(--cp-champagne), var(--cp-champagne)) left bottom / 100% 1px no-repeat;
}
.cp2__more span { color: var(--cp-champagne); transition: transform var(--dur-fast); }
.cp2__more:hover span { transform: translateX(4px); }

/* 端末別の出し分け(.cp2__btn の display 指定に負けないよう明示) */
@media (min-width: 1024px) { .cp2__btn.sp-tab-only { display: none; } }
@media (max-width: 1023px) { .cp2__btn.pc-only { display: none; } }

/* 終了後(お知らせ詳細) */
.cp2.is-ended .cp2__count b { display: none; }

.cp-terms { margin-inline: auto; }

/* --- タブレット/SP --- */
@media (max-width: 1023px) {
  .cp2__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "media" "info";
    padding-block: 60px 72px;
  }
  .cp2__media { width: min(100%, 460px); margin: 52px auto 0; }
  .cp2__photo { width: 78%; margin-inline: auto; }
  .cp2__photo img { aspect-ratio: 1; }
  .cp2__panel { width: 100%; margin: -64px 0 0; }
  .cp2__stamp { right: 2%; top: -6%; }
  .cp2__watermark { font-size: 26vw; bottom: auto; top: 30%; left: -4%; }
}
@media (max-width: 640px) {
  .cp2__grid { width: calc(100% - 40px); padding-block: 48px 60px; }
  .cp2__kicker { gap: 6px 12px; margin-bottom: 22px; }
  .cp2__kicker .en { width: 100%; }
  .cp2__num { font-size: clamp(7.4rem, 36vw, 9.6rem); }
  .cp2__unit b:first-child { font-size: 3.2rem; }
  .cp2__unit b:last-child { font-size: 1.9rem; }
  .cp2__again { font-size: 14.5px; padding: 9px 20px; gap: 12px; letter-spacing: 0.18em; }
  .cp2__photo { width: 80%; outline-offset: 8px; }
  .cp2__stamp { width: 96px; right: 0; top: -8%; }
  .cp2__stamp-in small { display: none; }
  .cp2__stamp-in b { font-size: 1.6rem; }
  .cp2__panel { padding: 20px 18px 18px; }
  .cp2__period { flex-wrap: wrap; }
  .cp2__targets ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp2__targets a { flex-direction: row; justify-content: center; align-items: center; font-size: 13px; padding: 10px 10px; }
  .cp2__targets a svg { width: 20px; height: 20px; }
  .cp2__count { font-size: 14px; }
  .cp2__cta { flex-direction: column; }
  .cp2__btn { width: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cp2__ticker-track, .cp2__ring { animation: none; }
  .cp2__photo img, .cp2__btn { transition: none; }
}

/* ==========================================================================
   ギャラリーの拡大表示(ライトボックス) — main.js が <dialog class="lightbox"> を生成
   深緑の暗室に、真鍮の額縁で写真を1枚ずつ掛けるイメージ
   ========================================================================== */
.lightbox {
  width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: 0; border: 0;
  display: none;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--brand-primary) 92%, transparent), color-mix(in srgb, var(--brand-primary-dark) 97%, transparent) 70%);
  color: var(--brand-ivory);
  overflow: hidden;
}
.lightbox[open] { display: grid; }
.lightbox::backdrop { background: color-mix(in srgb, var(--brand-primary-dark) 60%, transparent); backdrop-filter: blur(6px); }

/* 背景の透かし文字 */
.lightbox__mark {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -54%);
  font-family: var(--font-poster); font-style: italic;
  font-size: clamp(8rem, 24vw, 22rem); line-height: 1; white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--brand-accent) 16%, transparent);
  z-index: -1;
  pointer-events: none; user-select: none;
}

/* ヘッダー: ラベル + 閉じる */
.lightbox__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(16px, 4vw, 48px) 10px;
}
.lightbox__brand { display: flex; align-items: center; gap: 14px; margin: 0; font-family: var(--font-en); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--brand-accent); }
.lightbox__brand::before { content: ""; width: 40px; height: 1px; background: var(--brand-accent); }
.lightbox__close {
  display: flex; align-items: center; gap: 14px;
  min-height: 44px; padding: 0 2px;
  font-family: var(--font-en); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--brand-ivory);
}
.lightbox__x { position: relative; display: block; width: 40px; height: 40px; border: 1px solid color-mix(in srgb, var(--brand-accent) 60%, transparent); border-radius: 50%; transition: transform 0.5s var(--ease-out), border-color 0.3s; }
.lightbox__x::before, .lightbox__x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1px; margin: 0 0 0 -7px; background: currentColor; transform: rotate(45deg); }
.lightbox__x::after { transform: rotate(-45deg); }
.lightbox__close:hover .lightbox__x, .lightbox__close:focus-visible .lightbox__x { transform: rotate(90deg); border-color: var(--brand-accent); }

/* 写真: 真鍮の細い額縁(外側に1px) */
.lightbox__stage {
  display: grid; place-items: center;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  outline: none;
  min-height: 0;
  padding: 18px clamp(84px, 9vw, 132px) 22px;
}
.lightbox__img {
  display: block;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
  border-radius: 4px;
  outline: 1px solid color-mix(in srgb, var(--brand-accent) 70%, transparent);
  outline-offset: 12px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
  will-change: transform, opacity;
}

/* フッター: 番号・説明・進み具合・サムネイル */
.lightbox__foot {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 12px 32px;
  width: min(1200px, calc(100% - 2 * clamp(16px, 4vw, 48px)));
  margin: 0 auto;
  padding: 6px 0 calc(22px + env(safe-area-inset-bottom));
}
.lightbox__num { display: flex; align-items: baseline; gap: 12px; margin: 0; font-family: var(--font-poster); font-variant-numeric: tabular-nums; color: var(--brand-accent); line-height: 1; }
.lightbox__cur { display: inline-block; font-size: clamp(2.6rem, 4vw, 3.4rem); font-style: italic; }
.lightbox__sep { width: 26px; height: 1px; background: var(--brand-accent); transform: rotate(-60deg); }
.lightbox__tot { font-size: 15px; color: var(--brand-ivory); opacity: 0.7; }
.lightbox__meta { min-width: 0; padding-bottom: 6px; }
.lightbox__alt { margin: 0 0 12px; font-family: var(--font-heading); font-size: 14px; letter-spacing: 0.12em; color: var(--brand-ivory); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lightbox__bar { position: relative; height: 1px; background: color-mix(in srgb, var(--brand-ivory) 18%, transparent); }
.lightbox__bar span { position: absolute; inset: 0; background: var(--brand-accent); transform-origin: left center; transform: scaleX(0); transition: transform 0.6s var(--ease-out); }
.lightbox__thumbs { display: flex; gap: 8px; margin: 0; padding: 0 0 6px; list-style: none; }
.lightbox__thumbs button { position: relative; display: block; width: 46px; height: 46px; padding: 0; border-radius: 4px; overflow: hidden; opacity: 0.38; transition: opacity 0.3s var(--ease-out); }
.lightbox__thumbs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--brand-accent); transform: scaleX(0); transition: transform 0.4s var(--ease-out); }
.lightbox__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.lightbox__thumbs button:hover { opacity: 0.75; }
.lightbox__thumbs button[aria-current="true"] { opacity: 1; }
.lightbox__thumbs button[aria-current="true"]::after { transform: scaleX(1); }
.lightbox__thumbs button:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }

/* 前後ボタン(PCは左右中央・SPはフッター右) */
.lightbox__nav { display: contents; }
.lightbox__arrow {
  position: absolute; top: 50%; z-index: 2;
  display: grid; place-items: center;
  width: 56px; height: 56px; margin-top: -28px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--brand-accent) 55%, transparent);
  color: var(--brand-ivory);
  overflow: hidden;
  transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.lightbox__arrow::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--brand-ivory); transform: scale(0); transition: transform 0.45s var(--ease-out); }
.lightbox__arrow svg { position: relative; width: 22px; height: 22px; transition: transform 0.45s var(--ease-out); }
.lightbox__arrow:hover, .lightbox__arrow:focus-visible { border-color: var(--brand-ivory); color: var(--brand-primary); }
.lightbox__arrow:hover::before, .lightbox__arrow:focus-visible::before { transform: scale(1); }
.lightbox__prev { left: clamp(16px, 2.5vw, 40px); }
.lightbox__next { right: clamp(16px, 2.5vw, 40px); }
.lightbox__prev:hover svg { transform: translateX(-3px); }
.lightbox__next:hover svg { transform: translateX(3px); }
.lightbox__arrow:focus-visible, .lightbox__close:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; }
.lightbox[data-single] .lightbox__arrow, .lightbox[data-single] .lightbox__thumbs, .lightbox[data-single] .lightbox__num { display: none; }

@media (max-width: 1023px) {
  .lightbox__thumbs { display: none; }
  .lightbox__foot { grid-template-columns: auto minmax(0, 1fr) auto; }
}
@media (max-width: 767px) {
  .lightbox__head { padding-top: 14px; }
  .lightbox__close { gap: 10px; }
  .lightbox__stage { padding: 14px 16px 18px; }
  .lightbox__img { outline-offset: 7px; }
  .lightbox__mark { font-size: 44vw; writing-mode: vertical-rl; transform: translate(-50%, -50%); }
  .lightbox__close > span:first-child { display: none; }
  /* 1段目: 番号 + 前後ボタン / 2段目: 説明 + 進み具合 */
  .lightbox__foot { grid-template-columns: 1fr auto; align-items: center; gap: 12px 16px; }
  .lightbox__cur { font-size: 2.3rem; }
  .lightbox__meta { grid-column: 1 / -1; grid-row: 2; padding-bottom: 0; }
  .lightbox__alt { font-size: 13px; letter-spacing: 0.06em; white-space: normal; }
  .lightbox__nav { display: flex; gap: 10px; }
  .lightbox__arrow { position: relative; top: auto; left: auto; right: auto; width: 48px; height: 48px; margin: 0; }
}