/* ==========================================================================
   鮨 和顔 — main.css
   layout: wa-modern × palette: 墨 (sumi)
   ========================================================================== */

:root {
  --cp-primary: #0A0A0A;
  --cp-accent: #2C2C2C;
  --cp-text: #1A1A1A;
  --cp-muted: #6B6B6B;
  --cp-bg: #F5F2ED;
  --cp-white: #FFFFFF;
  --cp-line: #E2E8F0;
  --cp-shu: #B23A2F;

  --cp-dark-text: #F5F2ED;
  --cp-dark-muted: #A8A39B;
  --cp-dark-line: rgba(245, 242, 237, 0.16);
  --cp-line-soft: #D9D4CB;

  --font-body: 'Noto Serif JP', 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --font-display: 'Shippori Mincho', 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --font-brush: 'Yuji Syuku', 'Shippori Mincho', serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;

  --container: 1200px;
  --pad: clamp(1rem, 3vw, 3rem);
  --sec: clamp(4rem, 8vw, 8rem);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 900ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cp-bg);
  color: var(--cp-text);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.95;
  letter-spacing: 0.04em;
  font-feature-settings: 'palt';
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.06em; line-height: 1.4; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd, dt { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
address { font-style: normal; }
[hidden] { display: none !important; }
#contact-otp-block[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--cp-shu); outline-offset: 3px; }

/* 障子紙 subtle texture */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Utilities ---------- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
.container--narrow { max-width: 880px; }
.section { padding-block: var(--sec); position: relative; }
.section--dark { background: var(--cp-primary); color: var(--cp-dark-text); }
.section--dark .eyebrow { color: var(--cp-dark-muted); }
.section--dark .eyebrow::before { background: var(--cp-dark-text); }
.section--dark .section-head h2::before { background: var(--cp-dark-text); }
.section--dark .lead, .section--dark .muted { color: var(--cp-dark-muted); }
.section--tight { padding-block: clamp(3rem, 5vw, 5rem); }
.section-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.32; z-index: 0; pointer-events: none;
}
.section--dark .section-bg { opacity: 0.28; }
.section-bg + .section-bg-gradient,
.section-bg-gradient {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--cp-primary) 0%, rgba(10,10,10,0.55) 35%, rgba(10,10,10,0.55) 65%, var(--cp-primary) 100%);
}
.section > .container { position: relative; z-index: 1; }
.muted { color: var(--cp-muted); }
.small { font-size: 0.86rem; }
.mono { font-family: var(--font-mono); letter-spacing: 0.12em; }
.vertical { writing-mode: vertical-rl; font-feature-settings: 'palt', 'vert'; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 10000;
  background: var(--cp-primary); color: var(--cp-bg); padding: 0.6rem 1rem;
  font-size: 0.9rem; transition: top 200ms;
}
.skip-link:focus { top: 1rem; }

/* Eyebrow */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--cp-muted);
}
.eyebrow::before { content: ''; width: 1px; height: 1.6em; background: var(--cp-primary); }
.eyebrow--ja { text-transform: none; letter-spacing: 0.28em; font-family: var(--font-display); }

/* Section heading */
.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 {
  position: relative; padding-left: 1.25rem; margin-top: 0.9rem;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
}
.section-head h2::before {
  content: ''; position: absolute; left: 0; top: 0.15em; bottom: 0.15em; width: 4px;
  background: var(--cp-primary); transform-origin: top; transform: scaleY(0);
  transition: transform 1100ms var(--ease);
}
.section-head h2.is-in::before,
html:not(.js-enabled) .section-head h2::before { transform: scaleY(1); }
.section-head .lead { margin-top: 1.25rem; max-width: 46em; }
.section-head--center { text-align: center; }
.section-head--center h2 { padding-left: 0; }
.section-head--center h2::before { display: none; }
.lead { font-size: 1.05rem; color: var(--cp-muted); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.85rem 2rem; min-height: 3.25rem;
  font-family: var(--font-display); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.12em;
  border-radius: 0; border: 1px solid var(--cp-primary);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn--primary { background: var(--cp-primary); color: var(--cp-bg); }
.btn--primary:hover { background: transparent; color: var(--cp-primary); }
.btn--outline { background: transparent; color: var(--cp-primary); }
.btn--outline:hover { background: var(--cp-primary); color: var(--cp-bg); }
.btn--light { background: var(--cp-bg); color: var(--cp-primary); border-color: var(--cp-bg); }
.btn--light:hover { background: transparent; color: var(--cp-bg); }
.btn--light-outline { background: transparent; color: var(--cp-bg); border-color: var(--cp-bg); }
.btn--light-outline:hover { background: var(--cp-bg); color: var(--cp-primary); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; }

.arrow-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding-bottom: 0.35rem; border-bottom: 1px solid currentColor;
  font-family: var(--font-display); letter-spacing: 0.1em; font-size: 0.98rem;
  transition: gap 500ms var(--ease), opacity 500ms;
}
.arrow-link:hover { gap: 0.9rem; opacity: 0.75; }
.arrow-link::before { content: '→'; font-family: var(--font-mono); }

/* 落款 (seal) */
.seal {
  display: grid; grid-template-rows: 1fr 1fr; grid-auto-flow: column; direction: rtl; gap: 0.1em;
  width: 4.2em; height: 4.2em; padding: 0.35em;
  background: var(--cp-shu); color: #FBF5EE;
  font-family: var(--font-brush); font-size: 1rem; line-height: 1;
  border: 2px solid var(--cp-shu); box-shadow: inset 0 0 0 1px #FBF5EE;
  text-align: center; align-items: center; justify-items: center;
  user-select: none;
}
.seal span { display: block; font-size: 1.35em; }
.seal--lg { font-size: 1.4rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 500;
  background: rgba(245, 242, 237, 0.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--cp-line-soft);
}
.header__inner {
  max-width: var(--container); margin-inline: auto; padding: 0.9rem var(--pad);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem;
}
.brand { display: inline-flex; align-items: center; gap: 0.9rem; }
.brand__mark { width: 48px; height: 48px; object-fit: contain; }
.brand__name { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0.18em; font-weight: 500; }
.brand__kana { display: block; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.3em; color: var(--cp-muted); line-height: 1; margin-top: 0.15rem; }
.nav { display: flex; justify-content: flex-end; gap: clamp(1.25rem, 2.5vw, 2.5rem); }
.nav__link {
  position: relative; font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.14em; padding: 0.4rem 0;
}
.nav__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--cp-primary);
  transform: scaleX(0); transform-origin: right; transition: transform 600ms var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.header__cta { white-space: nowrap; }
.header__cta .btn { min-height: 2.8rem; padding: 0.6rem 1.4rem; font-size: 0.88rem; }
.burger {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  border: 1px solid var(--cp-primary);
}
.burger span { display: block; width: 20px; height: 1px; background: var(--cp-primary); position: relative; }
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 1px; background: var(--cp-primary);
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }

/* Drawer (body 直下) */
.drawer { position: fixed; inset: 0; z-index: 1000; }
.drawer[hidden] { display: none !important; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(10, 10, 10, 0.6); z-index: 0; }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(84vw, 360px); z-index: 1;
  background: var(--cp-primary); color: var(--cp-dark-text);
  padding: 1.25rem 1.5rem 2rem; display: flex; flex-direction: column;
  transform: translateX(0); animation: drawer-in 500ms var(--ease);
}
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer__top { display: flex; justify-content: space-between; align-items: center; }
.drawer__title { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.32em; color: var(--cp-dark-muted); }
.drawer__close {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--cp-dark-line); color: var(--cp-dark-text);
}
.drawer__nav { margin-top: 2rem; display: flex; flex-direction: column; border-top: 1px solid var(--cp-dark-line); }
.drawer__nav a {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 1.1rem 0.25rem; border-bottom: 1px solid var(--cp-dark-line);
  font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.14em; color: var(--cp-dark-text);
}
.drawer__nav a small { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.24em; color: var(--cp-dark-muted); }
.drawer__cta { margin-top: auto; display: flex; flex-direction: column; gap: 0.75rem; padding-top: 2rem; }
.drawer__tel { font-family: var(--font-mono); font-size: 1.25rem; letter-spacing: 0.08em; color: var(--cp-dark-text); }
.drawer__hours { font-size: 0.82rem; color: var(--cp-dark-muted); }

/* ---------- Hero (index / split) ---------- */
.hero { padding-block: clamp(3rem, 6vw, 6rem) clamp(3.5rem, 7vw, 7rem); }
.hero__inner {
  max-width: var(--container); margin-inline: auto; padding-inline: var(--pad);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(2rem, 5vw, 5rem);
  position: relative;
}
.hero__copy { padding-block: 2rem; }
.hero__title {
  /* 4rem/0.1em だと 7 文字の各行が 5fr 列に収まらず「と、」「を。」が孤立行になるため縮小 */
  font-size: clamp(2.4rem, 4.4vw, 3.5rem); line-height: 1.5; letter-spacing: 0.08em; margin-top: 1.5rem;
}
.hero__title span { display: block; }
.hero__sub { margin-top: 1.5rem; font-style: italic; color: var(--cp-muted); letter-spacing: 0.06em; font-size: 1rem; }
.hero__text { margin-top: 2rem; }
.hero__text p + p { margin-top: 0.25rem; }
.hero__links { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
.hero__media { position: relative; }
.hero__media img, .hero__media picture img {
  width: 100%; height: min(70vh, 660px); aspect-ratio: 16 / 9; object-fit: cover; object-position: center;
  filter: saturate(0.92);
}
.hero__seal {
  position: absolute; left: -2.6rem; top: 50%; transform: translateY(-50%); z-index: 2;
}
.hero__brush {
  position: absolute; right: 1.25rem; bottom: 1.25rem; z-index: 2;
  font-family: var(--font-brush); font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--cp-bg);
  letter-spacing: 0.2em; writing-mode: vertical-rl; text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}

/* ---------- Index grid (4 columns) ---------- */
.index-grid { border-top: 1px solid var(--cp-line-soft); }
.index-grid__list {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(3rem, 5vw, 4.5rem);
}
.index-item { display: block; border-top: 1px solid var(--cp-primary); padding-top: 1.25rem; transition: border-color var(--dur), color var(--dur); }
.index-item:hover { border-top-width: 2px; margin-top: -1px; }
.index-item__num { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.3em; color: var(--cp-muted); }
.index-item h3, .index-item__title { font-family: var(--font-display); font-size: clamp(1.15rem, 1.8vw, 1.35rem); margin-top: 0.75rem; font-weight: 500; letter-spacing: 0.06em; }
.index-item__en { display: block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cp-muted); margin-top: 0.4rem; }
.index-item p { font-size: 0.9rem; color: var(--cp-muted); margin-top: 1rem; line-height: 1.85; }

/* ---------- Split ---------- */
.split {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: clamp(2.5rem, 6vw, 6rem);
}
.split--reverse .split__media { order: -1; }
.split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.split__media--wide img { aspect-ratio: 4 / 3; }
.split__body h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-top: 0.9rem; }
.split__body h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); margin-top: 0.9rem; }
.split__body p { margin-top: 1.25rem; }
.split__body .btn-row, .split__body .arrow-link { margin-top: 2rem; }
.section--dark .split__body p { color: var(--cp-dark-text); }
.section--dark .split__body .lead { color: var(--cp-dark-muted); }

/* 引用 (和顔愛語) */
.quote {
  font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: 0.2em; line-height: 1.8;
  border-left: 1px solid currentColor; padding-left: 1.5rem; margin-top: 1.5rem;
}
.quote small { display: block; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.3em; margin-top: 0.75rem; opacity: 0.7; }

/* ---------- Promise cards (3 点) ---------- */
.promise-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.card {
  background: var(--cp-bg); border: 1px solid var(--cp-line); padding: clamp(1.5rem, 3vw, 2rem);
  position: relative; transition: border-color var(--dur) var(--ease);
}
.card::before {
  content: ''; position: absolute; left: -1px; top: 1.25rem; bottom: 1.25rem; width: 1px;
  background: var(--cp-primary); transform: scaleY(0.35); transform-origin: top; transition: transform var(--dur) var(--ease), width var(--dur);
}
.card:hover { border-color: var(--cp-primary); }
.card:hover::before { transform: scaleY(1); width: 3px; }
.card__num { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.3em; color: var(--cp-muted); }
.card__icon { width: 32px; height: 32px; margin-top: 1rem; color: var(--cp-primary); }
.card h3 { margin-top: 1rem; font-size: clamp(1.15rem, 1.8vw, 1.35rem); }
.card p { margin-top: 0.9rem; font-size: 0.95rem; line-height: 1.9; }
.section--dark .card { background: transparent; border-color: var(--cp-dark-line); color: var(--cp-dark-text); }
.section--dark .card::before { background: var(--cp-dark-text); }
.section--dark .card:hover { border-color: var(--cp-dark-text); }
.section--dark .card__icon { color: var(--cp-dark-text); }
.section--dark .card__num { color: var(--cp-dark-muted); }

/* ---------- Stats ---------- */
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--cp-line-soft); border-bottom: 1px solid var(--cp-line-soft);
}
.stats > div { padding: clamp(1.5rem, 3vw, 2.5rem) 1rem; border-left: 1px solid var(--cp-line-soft); }
.stats > div:first-child { border-left: 0; }
.stats dt { font-family: var(--font-display); font-size: clamp(2.4rem, 4.5vw, 3.6rem); line-height: 1; letter-spacing: 0.02em; }
.stats .unit { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.2em; margin-left: 0.4rem; color: var(--cp-muted); }
.stats dd { margin-top: 0.9rem; font-size: 0.86rem; color: var(--cp-muted); line-height: 1.7; }
.section--dark .stats { border-color: var(--cp-dark-line); }
.section--dark .stats > div { border-color: var(--cp-dark-line); }
.section--dark .stats .unit, .section--dark .stats dd { color: var(--cp-dark-muted); }

/* ---------- Menu rows ---------- */
.menu-block + .menu-block { margin-top: clamp(2.5rem, 5vw, 4rem); }
.menu-block__title { display: flex; align-items: baseline; gap: 1rem; font-size: clamp(1.15rem, 1.8vw, 1.35rem); margin-bottom: 0.5rem; }
.menu-block__title small { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cp-muted); }
.section--dark .menu-block__title small { color: var(--cp-dark-muted); }
.menu-block__note { font-size: 0.86rem; color: var(--cp-muted); margin-top: 0.5rem; }
.section--dark .menu-block__note { color: var(--cp-dark-muted); }
.menu-list { border-top: 1px solid var(--cp-line-soft); margin-top: 1rem; }
.section--dark .menu-list { border-color: var(--cp-dark-line); }
.menu-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 1rem;
  padding: 1.1rem 0.25rem; border-bottom: 1px solid var(--cp-line-soft);
  transition: padding-left var(--dur) var(--ease);
}
.section--dark .menu-row { border-color: var(--cp-dark-line); }
.menu-row:hover { padding-left: 0.75rem; }
.menu-row__name { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.08em; }
.menu-row__name small { display: block; font-family: var(--font-body); font-size: 0.8rem; color: var(--cp-muted); letter-spacing: 0.04em; margin-top: 0.2rem; }
.section--dark .menu-row__name small { color: var(--cp-dark-muted); }
.menu-row__price { font-family: var(--font-mono); font-size: 0.95rem; letter-spacing: 0.08em; white-space: nowrap; }
.menu-row__price small { font-size: 0.7rem; opacity: 0.7; margin-left: 0.35rem; }
.menu-row__price .member { display: block; text-align: right; font-size: 0.72rem; color: var(--cp-muted); letter-spacing: 0.05em; }
.section--dark .menu-row__price .member { color: var(--cp-dark-muted); }
.menu-row--wine .menu-row__name small { line-height: 1.7; }

.menu-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.menu-layout__media { position: sticky; top: 6rem; display: grid; gap: 1rem; }
.menu-layout__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.menu-layout__media img + img { aspect-ratio: 4 / 3; }

/* ---------- Sake grid ---------- */
.sake-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.sake-card { border: 1px solid var(--cp-dark-line); display: grid; grid-template-rows: auto 1fr; transition: border-color var(--dur); }
.sake-card:hover { border-color: var(--cp-dark-text); }
.sake-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--cp-accent); }
.sake-card__body { padding: clamp(1.5rem, 3vw, 2rem); }
.sake-card h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); }
.sake-card .price { font-family: var(--font-mono); font-size: 0.9rem; letter-spacing: 0.1em; margin-top: 0.75rem; color: var(--cp-dark-muted); }
.sake-card p { margin-top: 1rem; font-size: 0.95rem; }
.sake-card .arrow-link { margin-top: 1.5rem; }

/* pairing quotes */
.pairing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.pairing blockquote { margin: 0; border: 1px solid var(--cp-line-soft); padding: 1.5rem; font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.06em; }
.section--dark .pairing blockquote { border-color: var(--cp-dark-line); }
.pairing blockquote::before { content: '「'; opacity: 0.5; }
.pairing blockquote::after { content: '」'; opacity: 0.5; }

/* ---------- Locker benefits ---------- */
.benefit-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; margin-top: 1.5rem; }
.benefit-list li { display: grid; grid-template-columns: 22px 1fr; gap: 0.75rem; align-items: start; font-size: 0.95rem; line-height: 1.8; }
.benefit-list svg { width: 22px; height: 22px; margin-top: 0.35em; }

/* ---------- Message (料理長) ---------- */
.message { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.message__sign {
  writing-mode: vertical-rl; font-feature-settings: 'palt', 'vert';
  font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.6rem); letter-spacing: 0.3em; line-height: 1;
  border-right: 1px solid currentColor; padding-right: 1.25rem; align-self: start;
}
.message__sign small { display: block; font-size: 0.7em; opacity: 0.7; margin-top: 1.25em; }
.message__body p + p { margin-top: 1.25rem; }
.message__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.message__name { margin-top: 2rem; font-family: var(--font-display); letter-spacing: 0.14em; }
.message__name small { display: block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.3em; color: var(--cp-muted); margin-bottom: 0.35rem; }

/* ---------- Notice / details ---------- */
.notice { border-top: 1px solid var(--cp-line-soft); }
.notice details { border-bottom: 1px solid var(--cp-line-soft); }
.notice summary {
  cursor: pointer; list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.5rem; align-items: center;
  padding: 1.25rem 0.25rem; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.08em;
}
.notice summary::-webkit-details-marker { display: none; }
.notice summary .tag { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--cp-muted); border: 1px solid var(--cp-line-soft); padding: 0.25rem 0.6rem; white-space: nowrap; }
.notice summary .plus { font-family: var(--font-mono); transition: transform 600ms var(--ease); }
.notice details[open] summary .plus { transform: rotate(45deg); }
.notice .notice__body { padding: 0 0.25rem 1.5rem; font-size: 0.95rem; color: var(--cp-text); max-width: 60em; }
.notice .notice__body p + p { margin-top: 0.75rem; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; background: var(--cp-primary); color: var(--cp-dark-text); overflow: hidden; isolation: isolate; }
.cta-band .section-bg { opacity: 0.42; }
.cta-band::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(10,10,10,0.82) 0%, rgba(10,10,10,0.55) 60%, rgba(10,10,10,0.35) 100%);
}
.cta-band__inner {
  position: relative; z-index: 1; max-width: var(--container); margin-inline: auto; padding: clamp(4rem, 9vw, 8rem) var(--pad);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; align-items: end;
}
.cta-band h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); margin-top: 1rem; }
.cta-band p { margin-top: 1.25rem; color: var(--cp-dark-muted); max-width: 40em; }
.cta-band .eyebrow { color: var(--cp-dark-muted); }
.cta-band .eyebrow::before { background: var(--cp-dark-text); }
.cta-band__actions { display: flex; flex-direction: column; gap: 0.75rem; min-width: 260px; }
.cta-band__tel { font-family: var(--font-mono); font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: 0.08em; color: var(--cp-dark-text); }
.cta-band__tel small { display: block; font-size: 0.65rem; letter-spacing: 0.3em; color: var(--cp-dark-muted); margin-bottom: 0.25rem; }

/* ---------- Sister stores ---------- */
.sisters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.sisters a {
  display: flex; flex-direction: column; gap: 0.5rem; padding: 1.5rem; border: 1px solid var(--cp-line);
  transition: border-color var(--dur) var(--ease);
}
.sisters a:hover { border-color: var(--cp-primary); }
.sisters .name { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.08em; }
.sisters .url { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.12em; color: var(--cp-muted); word-break: break-all; }

/* ---------- Info table ---------- */
.info-table { border-top: 1px solid var(--cp-line-soft); }
.info-table > div { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 1rem; padding: 1rem 0.25rem; border-bottom: 1px solid var(--cp-line-soft); }
.info-table dt { font-family: var(--font-display); letter-spacing: 0.1em; color: var(--cp-muted); font-size: 0.9rem; }
.info-table dd { font-size: 0.98rem; }
.info-table a { border-bottom: 1px solid currentColor; }
.section--dark .info-table, .section--dark .info-table > div { border-color: var(--cp-dark-line); }
.section--dark .info-table dt { color: var(--cp-dark-muted); }

/* ---------- Map ---------- */
.cp-map { border: 1px solid var(--cp-line); overflow: hidden; background: var(--cp-line-soft); }
.cp-map iframe { display: block; width: 100%; height: 420px; border: 0; filter: grayscale(0.85) contrast(1.05); background: var(--cp-line-soft); }
.cp-map__fallback {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1.5rem;
  padding: 0.9rem 1.25rem; background: var(--cp-bg); border-top: 1px solid var(--cp-line);
  font-size: 0.86rem; letter-spacing: 0.04em;
}
.cp-map__fallback a { font-family: var(--font-display); letter-spacing: 0.1em; border-bottom: 1px solid currentColor; white-space: nowrap; }
.cp-map__fallback a::after { content: ' ↗'; font-family: var(--font-mono); }
.landmarks { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.landmarks li { font-size: 0.82rem; letter-spacing: 0.04em; border: 1px solid var(--cp-line-soft); padding: 0.3rem 0.75rem; color: var(--cp-text); }
.directions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }

/* ---------- Reserve panels ---------- */
.reserve-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.reserve-panel { border: 1px solid var(--cp-line); padding: clamp(1.75rem, 3vw, 2.5rem); display: flex; flex-direction: column; }
.reserve-panel__icon { width: 36px; height: 36px; }
.reserve-panel h3 { margin-top: 1.25rem; font-size: clamp(1.15rem, 1.8vw, 1.35rem); }
.reserve-panel p { margin-top: 1rem; font-size: 0.95rem; flex: 1; }
.reserve-panel .btn, .reserve-panel .tel-big { margin-top: 1.5rem; }
.tel-big { font-family: var(--font-mono); font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: 0.06em; display: block; }
.tel-big small { display: block; font-size: 0.65rem; letter-spacing: 0.3em; color: var(--cp-muted); }

/* ---------- Gallery strip ---------- */
.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.strip img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--cp-line-soft); }
.section--dark .strip img { background: var(--cp-accent); }
.strip figure { margin: 0; }
.strip figcaption { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.28em; color: var(--cp-muted); margin-top: 0.75rem; text-transform: uppercase; }
.section--dark .strip figcaption { color: var(--cp-dark-muted); }

/* ---------- Page hero (中ページ・generator が背景配置) ---------- */
.cp-page-hero {
  position: relative; background-color: var(--cp-primary); color: var(--cp-dark-text);
  background-size: cover; background-position: center;
  min-height: clamp(360px, 52vh, 560px); display: grid; align-items: end; isolation: isolate;
}
.cp-page-hero--about { background-image: linear-gradient(180deg, rgba(10,10,10,0.55), rgba(10,10,10,0.88)), url('/assets/images/hero-about.jpg'); }
.cp-page-hero--services { background-image: linear-gradient(180deg, rgba(10,10,10,0.55), rgba(10,10,10,0.88)), url('/assets/images/hero-services.jpg'); }
.cp-page-hero--contact { background-image: linear-gradient(180deg, rgba(10,10,10,0.55), rgba(10,10,10,0.88)), url('/assets/images/hero-contact.jpg'); }
.page-hero__inner {
  position: relative; z-index: 1; max-width: var(--container); margin-inline: auto; padding: clamp(3rem, 6vw, 5rem) var(--pad);
  width: 100%;
}
.page-hero__inner .eyebrow { color: var(--cp-dark-muted); }
.page-hero__inner .eyebrow::before { background: var(--cp-dark-text); }
.page-hero__inner h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); margin-top: 1rem; letter-spacing: 0.12em; }
.page-hero__inner p { margin-top: 1rem; color: var(--cp-dark-muted); max-width: 40em; }
.breadcrumb { display: flex; gap: 0.75rem; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.24em; color: var(--cp-dark-muted); margin-top: 2rem; }
.breadcrumb a { border-bottom: 1px solid transparent; }
.breadcrumb a:hover { border-color: currentColor; }

/* ---------- Footer ---------- */
.site-footer { position: relative; isolation: isolate; background: var(--cp-primary); color: var(--cp-dark-text); overflow: hidden; }
.cp-footer__particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.site-footer .footer-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.18; z-index: 0; pointer-events: none; }
.cp-footer__inner { position: relative; z-index: 1; max-width: var(--container); margin-inline: auto; padding: clamp(4rem, 7vw, 6rem) var(--pad) 2rem; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); }
.footer__brand { display: flex; align-items: center; gap: 1rem; }
.footer__brand img { width: 56px; height: 56px; object-fit: contain; filter: invert(1) hue-rotate(180deg) brightness(1.08); }
.footer__brand .brand__name { color: var(--cp-dark-text); }
.footer__brand .brand__kana { color: var(--cp-dark-muted); }
.footer__tagline { margin-top: 1.5rem; font-size: 0.92rem; color: var(--cp-dark-muted); max-width: 30em; }
.footer__h { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--cp-dark-muted); margin-bottom: 1rem; }
.footer__nav a { display: block; padding: 0.4rem 0; font-family: var(--font-display); letter-spacing: 0.12em; font-size: 0.95rem; }
.footer__nav a:hover { color: var(--cp-dark-muted); }
.footer__info { font-size: 0.9rem; color: var(--cp-dark-text); line-height: 1.9; }
.footer__info a { border-bottom: 1px solid var(--cp-dark-line); }
.footer__sisters { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--cp-dark-line); display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.82rem; }
.footer__sisters .footer__h { width: 100%; margin-bottom: 0.25rem; }
.footer__sisters a { color: var(--cp-dark-muted); border-bottom: 1px solid transparent; }
.footer__sisters a:hover { color: var(--cp-dark-text); border-color: currentColor; }
.footer__bottom { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--cp-dark-line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.2em; color: var(--cp-dark-muted); }

/* ---------- Back to top ---------- */
.back-to-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 800;
  width: 48px; height: 48px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--cp-accent); color: var(--cp-bg); border: 1px solid var(--cp-accent);
  opacity: 1; transition: opacity 600ms var(--ease), background 600ms, transform 600ms var(--ease);
}
.back-to-top[hidden] { display: none !important; }
.back-to-top:hover { background: var(--cp-bg); color: var(--cp-primary); }
.back-to-top svg { width: 14px; height: 14px; }
.back-to-top .vertical { font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.15em; line-height: 1; }

/* ---------- Motion ---------- */
.fade-in { opacity: 1; transform: none; transition: transform var(--dur) var(--ease); }
html.js-enabled .fade-in:not(.is-in) { transform: translateY(8px); }
html.js-enabled .fade-in--right:not(.is-in) { transform: translateX(8px); }
.lazy-warm { transition: filter 1200ms var(--ease), opacity 1200ms var(--ease); }
html.js-enabled .lazy-warm:not(.is-loaded) { filter: sepia(0.35) brightness(0.9); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .message { grid-template-columns: auto minmax(0, 1fr); }
  .message__media { grid-column: 1 / -1; max-width: 420px; }
  .sisters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__copy { padding-block: 0; }
  .hero__media img, .hero__media picture img { height: auto; aspect-ratio: 3 / 4; max-height: 72vh; }
  .hero__seal { left: auto; right: 0; top: auto; bottom: 100%; transform: translateY(-1rem); }
  .index-grid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split--reverse { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .menu-layout { grid-template-columns: 1fr; }
  .menu-layout__media { position: static; grid-template-columns: 1fr 1fr; }
  .menu-layout__media img, .menu-layout__media img + img { aspect-ratio: 4 / 3; }
  .promise-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > div:nth-child(3) { border-left: 0; }
  .stats > div:nth-child(n + 3) { border-top: 1px solid var(--cp-line-soft); }
  .section--dark .stats > div:nth-child(n + 3) { border-top-color: var(--cp-dark-line); }
  .cta-band__inner { grid-template-columns: 1fr; align-items: start; }
  .directions { grid-template-columns: 1fr; }
  .reserve-grid, .sake-grid, .pairing, .benefit-list { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .header__cta { display: none; }
  .header__inner { grid-template-columns: auto 1fr; }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }
  .section { padding: 4rem 0; }
  .container { padding-inline: 1.25rem; }
  .header__inner { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 1.25rem; gap: 1rem; }
  .brand__mark { width: 38px; height: 38px; }
  .brand__name { font-size: 0.78rem; letter-spacing: 0.02em; }
  .brand__kana { display: none; }
  .nav { display: none; }
  .header__cta { display: none; }
  .burger { display: inline-flex; }
  .hero { padding-block: 2.5rem 3rem; }
  .hero__title { font-size: clamp(2rem, 8vw, 2.6rem); }
  .hero__seal { display: none; }
  .hero__brush { font-size: 1.5rem; }
  .index-grid__list { grid-template-columns: 1fr 1fr; gap: 1.5rem 1.25rem; }
  .message { grid-template-columns: 1fr; }
  .message__sign { writing-mode: horizontal-tb; border-right: 0; border-bottom: 1px solid currentColor; padding: 0 0 0.75rem; display: flex; gap: 1rem; align-items: baseline; }
  .message__sign small { margin-top: 0; }
  .strip { grid-template-columns: 1fr 1fr; }
  .stats dt { font-size: 2.2rem; }
  .cp-map iframe { height: 280px; }
  .info-table > div { grid-template-columns: 1fr; gap: 0.2rem; }
  .footer__grid { grid-template-columns: 1fr; }
  .sisters { grid-template-columns: 1fr; }
  .notice summary { grid-template-columns: minmax(0, 1fr) auto; }
  .notice summary .tag { display: none; }
  .back-to-top { right: 0.9rem; bottom: 0.9rem; }
  .seal--lg { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html.js-enabled .fade-in:not(.is-in) { transform: none; }
}

/* ai-hp enforced subpage hero backgrounds */
.aihp-subpage-hero--with-image {
  position: relative;
  background-image:
    linear-gradient(135deg, rgba(10, 10, 10, 0.9), rgba(10, 10, 10, 0.72)),
    var(--aihp-subpage-hero-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
  isolation: isolate;
}
.aihp-subpage-hero--with-image > * {
  position: relative;
  z-index: 1;
}


/* 実写真が未用意のスロットに入るプレースホルダ。
   cover だと「写真は準備中です」の文字がトリミングされるため contain で全体を見せる。
   .lazy-warm 由来の sepia フィルタもかからないよう filter を打ち消す */
.split__media img.cp-img-placeholder {
  object-fit: contain;
  background: var(--cp-bg);
  border: 1px solid var(--cp-line-soft);
  filter: none !important;
}

/* 長音符・小書き仮名・読点などを行頭に置かない（既定の loose だと「ロッカ / ー」になる） */
body { line-break: strict; }

/* 日本語の禁則: カタカナ語の途中改行と 1 文字だけの孤立行を避けるため、
   短い見出し・定義リスト・要約テキストは句読点・中黒・スラッシュでのみ改行させる。
   （収まらない場合は overflow-wrap: anywhere が最終手段として働く） */
h1, h2, h3,
.index-item__title,
.menu-row__name,
.stats dd,
.notice summary,
.info-table dd,
.footer__info {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* aihp-concierge-content-section-v1 */
.aihp-content-section {
  padding: 5rem 1.25rem;
  color: var(--cp-text, var(--color-text, var(--text-color, inherit)));
}

.aihp-content-section__inner {
  width: min(100%, 70rem);
  margin: 0 auto;
}

.aihp-content-section__header {
  max-width: 48rem;
  margin-bottom: 2rem;
}

.aihp-content-section__title {
  margin: 0;
  font: inherit;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  color: inherit;
}

.aihp-content-section__intro,
.aihp-content-section__body {
  max-width: 48rem;
  margin: 1rem 0 0;
  line-height: 1.9;
}

.aihp-content-section__body p {
  margin: 0 0 1rem;
}

.aihp-content-section__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
}

.aihp-content-section__card,
.aihp-content-section__step,
.aihp-content-section__faq {
  border: 1px solid var(--cp-line, var(--color-line, rgba(15, 23, 42, 0.14)));
  border-radius: 6px;
  background: var(--cp-surface, var(--color-surface, var(--cp-bg, var(--color-bg, var(--cp-white, #fff)))));
}

.aihp-content-section__card {
  padding: 1.5rem;
}

.aihp-content-section__card h3,
.aihp-content-section__step h3 {
  margin: 0 0 0.75rem;
  font: inherit;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0;
  color: inherit;
}

.aihp-content-section__card p,
.aihp-content-section__step p,
.aihp-content-section__faq p {
  margin: 0;
  line-height: 1.75;
}

.aihp-content-section__steps {
  display: grid;
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aihp-content-section__step {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.25rem;
}

.aihp-content-section__step-number {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: 50%;
  background: var(--cp-primary, var(--color-primary, var(--primary, #0f766e)));
  color: var(--cp-on-primary, var(--color-on-primary, #fff));
  font-weight: 700;
}

.aihp-content-section__faqs {
  display: grid;
  gap: 0.75rem;
}

.aihp-content-section__faq summary {
  cursor: pointer;
  padding: 1.125rem 1.25rem;
  font-weight: 700;
}

.aihp-content-section__faq p {
  padding: 0 1.25rem 1.25rem;
}

.aihp-content-section__cta {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  margin-top: 1.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 6px;
  background: var(--cp-primary, var(--color-primary, var(--primary, #0f766e)));
  color: var(--cp-on-primary, var(--color-on-primary, #fff));
  font-weight: 700;
  text-decoration: none;
}

/* on-primary 変数が無いサイトでは primary の明度から黒/白を自動で選ぶ
   （素の宣言は上の白のまま = 相対色構文が無い環境の後方互換。SECTION_ON_PRIMARY_COLOR_AUTO 参照） */
@supports (color: oklch(from #fff clamp(0%, (0.58 - l) * 100000%, 100%) 0 0)) and (color: light-dark(#fff, #000)) {
  .aihp-content-section__step-number,
  .aihp-content-section__cta {
    color: var(--cp-on-primary, var(--color-on-primary, oklch(from var(--cp-primary, var(--color-primary, var(--primary, #0f766e))) clamp(0%, (0.58 - l) * 100000%, 100%) 0 0)));
  }
}

@media (max-width: 640px) {
  .aihp-content-section {
    padding: 3.5rem 1.25rem;
  }

  .aihp-content-section__title {
    font-size: 1.75rem;
  }
}