/* ============================================================
   HELEN v3 — Visitor-First Architecture
   訪問者が「最初に何を確認するか」を起点に設計
   ============================================================ */

/* ── 1. Tokens ── */
:root {
  --bg:    #0a0806;
  --bg2:   #100d0a;
  --bg3:   #1a1713;
  --bg4:   #0e0b09;
  --text:  #e4d9c4;
  --muted: #7a7060;
  --gold:  #c8a96e;
  --goldl: #dfc08a;
  --bdr:   rgba(200,169,110,.14);
  --bdrs:  rgba(200,169,110,.07);

  --fd: 'Cormorant Garamond','Noto Serif JP',Georgia,serif;
  --fb: 'Noto Serif JP','Hiragino Mincho ProN',Georgia,serif;

  --max:  1200px;
  --gap:  clamp(1.5rem,5vw,4rem);
  --nav:  72px;
  --ease: cubic-bezier(.16,1,.3,1);
}

/* ── 2. Reset ── */
*,*::before,*::after { box-sizing:border-box;margin:0;padding:0 }
html { scroll-behavior:smooth }
body {
  background:var(--bg);color:var(--text);
  font-family:var(--fb);font-weight:300;line-height:1.8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img   { display:block;max-width:100%;height:auto }
a     { color:inherit;text-decoration:none }
ul    { list-style:none }
button { cursor:pointer;font-family:inherit }

/* ── 3. Film Grain ── */
.grain {
  position:fixed;inset:-50%;width:200%;height:200%;
  pointer-events:none;z-index:9999;opacity:.026;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
}
@keyframes grain {
  0%,100%{transform:translate(0,0)}    10%{transform:translate(-2%,-2%)}
  20%{transform:translate(2%,1%)}      30%{transform:translate(-1%,2%)}
  40%{transform:translate(1%,-1%)}     50%{transform:translate(-2%,1%)}
  60%{transform:translate(2%,2%)}      70%{transform:translate(-1%,-2%)}
  80%{transform:translate(1%,1%)}      90%{transform:translate(-2%,-1%)}
}

/* ── 4. Layout ── */
.container { max-width:var(--max);margin-inline:auto;padding-inline:var(--gap) }
.section   { padding-block:clamp(5rem,11vw,9rem) }

/* ── 5. Typography ── */
.label {
  display:block;
  font-family:var(--fd);font-size:.68rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1.25rem;
}
.heading {
  font-family:var(--fd);
  font-size:clamp(1.85rem,4vw,3.4rem);
  font-weight:300;line-height:1.2;letter-spacing:.02em;
  margin-bottom:1.5rem;
}
/* STORY セクション見出し — Playfair Display で格調を上げる */
.concept .heading {
  font-family:'Playfair Display','Cormorant Garamond',Georgia,serif;
  font-size:clamp(2.2rem,5vw,4rem);
  font-weight:400;font-style:italic;
  letter-spacing:.01em;
}
.sec-desc { color:var(--muted);font-size:.9rem;line-height:2.1;max-width:38ch }
.sec-header { text-align:center;margin-bottom:clamp(3rem,6vw,5rem) }
.sec-header .sec-desc { margin-inline:auto }

/* ── 6. Buttons ── */
.btn {
  display:inline-flex;align-items:center;justify-content:center;
  padding:.9rem 2.4rem;
  font-family:var(--fd);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  border:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
  white-space:nowrap;cursor:pointer;
}
.btn-gold  { background:var(--gold);color:var(--bg);border-color:var(--gold) }
.btn-gold:hover { background:var(--goldl);border-color:var(--goldl) }
.btn-ghost { background:transparent;color:var(--text);border-color:rgba(228,217,196,.3) }
.btn-ghost:hover { border-color:var(--gold);color:var(--gold) }
.btn-full  { width:100% }

/* ── 7. Scroll Reveal ── */
.reveal {
  opacity:0;transform:translateY(28px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
}
.reveal.visible { opacity:1;transform:translateY(0) }

/* ── 8. Mobile Sticky CTA ── */
.mobile-cta {
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:200;
  padding:.75rem var(--gap) calc(.75rem + env(safe-area-inset-bottom));
  background:rgba(10,8,6,.96);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--bdr);
  transform:translateY(100%);
  transition:transform .4s var(--ease);
}
.mobile-cta.visible  { transform:translateY(0) }
.mobile-cta.hidden   { transform:translateY(100%) }
@media (max-width:900px) { .mobile-cta { display:block } }

/* ── 9. Nav ── */
.nav {
  position:fixed;top:0;left:0;right:0;z-index:400;
  height:var(--nav);
  transition:background .4s ease,box-shadow .4s ease;
}
.nav.scrolled {
  background:rgba(10,8,6,.97);
  box-shadow:0 1px 0 var(--bdr);
}
.nav-inner {
  max-width:var(--max);margin-inline:auto;padding-inline:var(--gap);
  height:100%;display:flex;align-items:center;justify-content:space-between;
}
.nav-logo {
  display:flex;align-items:center;
  transition:opacity .3s ease;
}
.nav-logo:hover { opacity:.7 }
.nav-logo-img {
  height:38px;width:auto;
  mix-blend-mode:screen;
  filter:brightness(1.1);
}
.nav-links { display:flex;align-items:center;gap:2.25rem }
.nav-links a {
  font-family:var(--fd);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);position:relative;transition:color .3s ease;
}
.nav-links a::after {
  content:'';position:absolute;bottom:-4px;left:0;
  width:0;height:1px;background:var(--gold);transition:width .3s var(--ease);
}
.nav-links a:hover { color:var(--gold) }
.nav-links a:hover::after { width:100% }
.nav-cta {
  padding:.5rem 1.25rem !important;border:1px solid var(--bdr) !important;
  color:var(--text) !important;transition:border-color .3s ease,color .3s ease !important;
}
.nav-cta::after { display:none !important }
.nav-cta:hover  { border-color:var(--gold) !important;color:var(--gold) !important }

/* Hamburger */
.nav-toggle {
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:28px;height:28px;background:none;border:none;padding:0;
}
.nav-toggle span {
  display:block;width:100%;height:1px;background:var(--text);
  transition:transform .35s ease,opacity .35s ease;
}
.nav-toggle.open span:nth-child(1) { transform:rotate(45deg) translate(4px,4px) }
.nav-toggle.open span:nth-child(2) { opacity:0;transform:scaleX(0) }
.nav-toggle.open span:nth-child(3) { transform:rotate(-45deg) translate(4px,-4px) }

/* ── 10. Hero ── */
.hero {
  position:relative;height:100svh;min-height:600px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:linear-gradient(160deg,#1c1510,#0a0806);
}
.hero-media { position:absolute;inset:0 }
.hero-img {
  width:100%;height:100%;
  object-fit:cover;object-position:center 50%;
  filter:brightness(.48) contrast(1.14) sepia(.18);
  will-change:transform;
}
.hero-vignette {
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at center, transparent 25%, rgba(10,8,6,.55) 100%),
    linear-gradient(to bottom,rgba(10,8,6,.1) 0%,rgba(10,8,6,.38) 38%,rgba(10,8,6,.92) 100%);
}
.hero-content {
  position:relative;z-index:2;text-align:center;
  padding-inline:var(--gap);padding-bottom:10rem;
}
.hero-location {
  font-family:var(--fd);font-size:.62rem;letter-spacing:.55em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1.5rem;
  animation:riseIn .9s var(--ease) .2s both;
}
.hero-title {
  font-family:var(--fd);
  font-size:clamp(4.5rem,14vw,12rem);
  font-weight:300;letter-spacing:.48em;line-height:1;
  color:var(--text);margin-bottom:1.25rem;
  animation:riseIn .9s var(--ease) .38s both;
}
.hero-rule {
  width:52px;height:1px;background:var(--gold);
  margin:0 auto 1.6rem;
  animation:growX .8s var(--ease) .55s both;
  transform-origin:center;
}
.hero-tagline {
  font-size:clamp(.85rem,2vw,1.05rem);letter-spacing:.15em;
  color:rgba(228,217,196,.85);margin-bottom:2.75rem;
  animation:riseIn .9s var(--ease) .65s both;
}
.hero-actions {
  display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;
  animation:riseIn .9s var(--ease) .8s both;
}

/* クイック情報ピル：ヒーロー下部に常時表示 */
.hero-quickinfo {
  position:absolute;bottom:0;left:0;right:0;z-index:3;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:0;
  background:rgba(10,8,6,.72);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--bdr);
  animation:riseIn .8s var(--ease) 1.1s both;
}
.qinfo-item {
  display:flex;align-items:center;gap:.6rem;
  padding:1rem 1.75rem;
  font-family:var(--fd);font-size:.72rem;letter-spacing:.1em;color:var(--muted);
  transition:color .3s ease;
}
.qinfo-item:hover { color:var(--text) }
.qinfo-item svg { width:14px;height:14px;opacity:.6;flex-shrink:0 }
.qinfo-sep {
  width:1px;height:1.5rem;background:var(--bdr);
}

/* Scroll indicator */
.hero-scroll {
  position:absolute;bottom:5.5rem;left:50%;transform:translateX(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:.6rem;
}
.scroll-text {
  font-family:var(--fd);font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted);
}
.scroll-line {
  display:block;width:1px;height:40px;
  background:linear-gradient(to bottom,transparent,var(--gold));
  animation:scrollPulse 2.4s ease-in-out infinite;
}

@keyframes riseIn { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes growX  { from{opacity:0;transform:scaleX(0)} to{opacity:1;transform:scaleX(1)} }
@keyframes scrollPulse {
  0%  {transform:scaleY(0);transform-origin:top;opacity:0}
  30% {opacity:1}
  50% {transform:scaleY(1);transform-origin:top}
  51% {transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom;opacity:0}
}

/* ── 11. FOR WHO ── */
.forwho { background:var(--bg2) }
.who-grid {
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--bdr);border:1px solid var(--bdr);
}
.who-card {
  background:var(--bg2);padding:2.5rem 2rem;
  position:relative;overflow:hidden;
  transition:background .35s ease;
  border-top:2px solid transparent;
  transition:background .35s ease,border-color .35s ease;
}
.who-card:hover { background:var(--bg3);border-color:var(--gold) }
.who-num {
  display:block;
  font-family:var(--fd);font-size:3rem;font-weight:300;letter-spacing:.04em;
  color:rgba(200,169,110,.14);line-height:1;
  margin-bottom:1.25rem;
  transition:color .3s ease;
}
.who-card:hover .who-num { color:rgba(200,169,110,.28) }
.who-card h3 {
  font-family:var(--fd);font-size:1.05rem;font-weight:400;letter-spacing:.04em;
  line-height:1.5;color:var(--text);margin-bottom:.9rem;
}
.who-card p { font-size:.84rem;color:var(--muted);line-height:1.95 }

/* ── 12. Space ── */
/* フィーチャー：扉の写真 */
.space-hero {
  position:relative;overflow:hidden;
  margin-block:clamp(1.8rem,4vw,3rem);
  max-height:80vh;
}
.space-hero img {
  width:100%;display:block;
  object-fit:cover;object-position:center 25%;
  filter:brightness(.55) contrast(1.18) saturate(.58);
  transition:transform 1.2s var(--ease),filter .6s ease;
}
.space-hero:hover img {
  transform:scale(1.03);
  filter:brightness(.65) contrast(1.1) saturate(.68);
}
.space-hero-caption {
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,8,6,.78) 0%,transparent 55%);
  display:flex;align-items:flex-end;
  padding:clamp(2rem,5vw,4rem);
  pointer-events:none;
}
.space-hero-caption p {
  font-family:var(--fd);
  font-size:clamp(1.2rem,3vw,2rem);
  font-style:italic;font-weight:300;
  color:var(--text);letter-spacing:.06em;
}

/* 4枚グリッド */
.space-grid {
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:var(--bdr);
  margin-bottom:clamp(2rem,4vw,3rem);
}
.space-item { overflow:hidden;aspect-ratio:4/3;background:var(--bg3) }
.space-item img {
  width:100%;height:100%;object-fit:cover;
  filter:brightness(.62) contrast(1.1) sepia(.22) saturate(.85);
  transition:transform .9s var(--ease),filter .5s ease;
}
.space-item:hover img {
  transform:scale(1.07);
  filter:brightness(.78) contrast(1.06) sepia(.15) saturate(.9);
}

.space-attrs {
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--bdr);border:1px solid var(--bdr);
}
.space-attr { background:var(--bg);padding:2.5rem 2rem }
.attr-en {
  display:block;
  font-family:var(--fd);font-size:.58rem;letter-spacing:.38em;text-transform:uppercase;
  color:var(--gold);opacity:.6;margin-bottom:.5rem;
}
.space-attr h3 {
  font-family:var(--fd);font-size:.92rem;font-weight:400;
  letter-spacing:.06em;color:var(--text);margin-bottom:.75rem;
}
.space-attr p { font-size:.85rem;color:var(--muted);line-height:1.95 }

/* ── 13. Concept ── */
.concept-grid {
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(3rem,8vw,8rem);align-items:center;
}
.concept-img {
  overflow:hidden;aspect-ratio:3/4;display:block;
}
.concept-img img {
  width:100%;height:100%;object-fit:cover;
  filter:brightness(.72) contrast(1.08) sepia(.18) saturate(.9);
  transition:transform .9s var(--ease),filter .5s ease;
}
.concept-img:hover img {
  transform:scale(1.04);filter:brightness(.82) contrast(1.05) sepia(.12);
}
.concept-lead {
  font-family:var(--fd);
  font-size:clamp(1rem,2vw,1.18rem);
  font-style:italic;font-weight:300;
  color:var(--text);line-height:1.75;letter-spacing:.04em;
  padding-left:1.25rem;
  border-left:1px solid var(--gold);
  margin-bottom:1.75rem;
}
.concept-body {
  display:flex;flex-direction:column;gap:1.25rem;
  color:var(--muted);font-size:.9rem;line-height:2.1;
  max-width:44ch;margin-bottom:1.5rem;
}
.concept-closing {
  font-family:var(--fd);
  font-size:clamp(.88rem,1.6vw,.98rem);
  font-style:italic;font-weight:300;
  color:rgba(228,217,196,.6);
  letter-spacing:.06em;line-height:1.9;
  margin-bottom:2rem;
}

/* ── 14. Cocktails ── */
.cocktails { background:var(--bg2) }

/* カクテルフォトギャラリー */
.cocktail-gallery {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:3px;
  margin-block:clamp(1.8rem,4vw,3rem);
}
.cocktail-item {
  overflow:hidden;aspect-ratio:3/4;background:var(--bg3);
}
.cocktail-item--wide {
  grid-column:1 / -1;aspect-ratio:21/9;
}
.cocktail-item img {
  width:100%;height:100%;object-fit:cover;
  filter:brightness(.72) contrast(1.1) sepia(.18) saturate(.9);
  transition:transform .9s var(--ease),filter .5s ease;
}
.cocktail-item:hover img {
  transform:scale(1.05);
  filter:brightness(.86) contrast(1.05) sepia(.1);
}

.menu-grid {
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--bdr);border:1px solid var(--bdr);
  margin-bottom:2.5rem;
}
.menu-card {
  background:var(--bg2);padding:2rem 1.75rem;position:relative;overflow:hidden;
  transition:background .3s ease;
}
.menu-bar {
  position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.menu-card:hover { background:var(--bg3) }
.menu-card:hover .menu-bar { transform:scaleX(1) }
.menu-num {
  display:block;
  font-family:var(--fd);font-size:2.6rem;font-weight:300;letter-spacing:.04em;
  color:rgba(200,169,110,.16);line-height:1;margin-bottom:1rem;
  transition:color .3s ease;
}
.menu-card:hover .menu-num { color:rgba(200,169,110,.3) }
.menu-body h3 {
  font-family:var(--fd);font-size:1rem;font-weight:400;
  letter-spacing:.1em;color:var(--gold);margin-bottom:.6rem;
}
.menu-body p { font-size:.82rem;color:var(--muted);line-height:1.9 }
.menu-note {
  text-align:center;font-size:.75rem;color:var(--muted);opacity:.5;letter-spacing:.05em;
}

/* ── 15. Philosophy ── */
.philosophy-inner {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}
.philosophy-body {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  color: var(--muted);
  font-size: .9rem;
  line-height: 2.1;
  margin-top: 1.5rem;
}
.philosophy-body p:last-child {
  color: var(--text);
  font-family: var(--fd);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: .04em;
}

/* ── 16. Instagram Social Proof ── */
.instagram { background:var(--bg4);border-block:1px solid var(--bdr) }
.ig-inner {
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(3rem,8vw,8rem);align-items:center;
  padding-block:clamp(3rem,6vw,5.5rem);
}
.ig-text p { color:var(--muted);font-size:.9rem;line-height:2.1;max-width:40ch;margin-bottom:0 }
.ig-img {
  overflow:hidden;aspect-ratio:1;display:block;
}
.ig-img img {
  width:100%;height:100%;object-fit:cover;
  filter:brightness(.6) contrast(1.1) sepia(.25);
  transition:transform .9s var(--ease),filter .5s ease;
}
.ig-img:hover img {
  transform:scale(1.04);filter:brightness(.72) contrast(1.05) sepia(.18);
}

/* ── 16. Reservation CTA ── */
.reservation-cta {
  padding:clamp(2rem,4vw,3rem);
  border:1px solid var(--bdr);
  background:var(--bg3);
  display:flex;flex-direction:column;gap:1.25rem;
}
.reservation-cta__eyebrow {
  font-family:var(--fd);font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);
}
.reservation-cta__desc {
  font-size:.88rem;color:var(--muted);line-height:2.1;
}
.reservation-cta__btn {
  gap:.6rem;
}
.reservation-cta__divider {
  display:flex;align-items:center;gap:1rem;
  font-family:var(--fd);font-size:.65rem;letter-spacing:.18em;color:var(--muted);opacity:.5;
}
.reservation-cta__divider::before,
.reservation-cta__divider::after {
  content:'';flex:1;height:1px;background:var(--bdr);
}

/* ── 17. Booking (Reservation + Access 統合) ── */
.booking { background:var(--bg) }
.booking-grid {
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,6rem);
  align-items:start;
}
.booking-form-wrap { }

/* Form */
.form { }
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:1rem }
.form-field { display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.25rem }
.form-field label {
  font-family:var(--fd);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.req { color:var(--gold) }
.form-field input,
.form-field select,
.form-field textarea {
  background:var(--bg3);border:1px solid var(--bdr);border-radius:0;
  color:var(--text);padding:.875rem 1rem;
  font-family:var(--fb);font-size:.88rem;line-height:1.5;
  outline:none;-webkit-appearance:none;appearance:none;width:100%;
  transition:border-color .3s ease;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color:var(--muted);opacity:.4 }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color:var(--gold) }
.form-field select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237a7060' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;
  padding-right:2.5rem;cursor:pointer;
}
.form-field select option { background:var(--bg3);color:var(--text) }
.form-field textarea { resize:vertical }

/* Access (right column) */
.access-map { margin-bottom:1.5rem }
.map-placeholder {
  aspect-ratio:16/9;background:var(--bg3);border:1px solid var(--bdr);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;color:var(--muted);
}
.map-placeholder svg  { width:28px;height:28px;opacity:.4 }
.map-placeholder span { font-family:var(--fd);font-size:.75rem;letter-spacing:.2em;opacity:.5 }
.access-map iframe {
  width:100%;aspect-ratio:16/9;border:1px solid var(--bdr);display:block;
  filter:grayscale(1) invert(.9) sepia(.2) hue-rotate(180deg);
}
.access-list {
  display:grid;grid-template-columns:max-content 1fr;gap:0 1.75rem;
}
.access-list dt {
  font-family:var(--fd);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);padding-top:.3rem;align-self:start;
}
.access-list dd {
  font-size:.88rem;color:var(--muted);line-height:2;
  border-bottom:1px solid var(--bdrs);padding-bottom:.9rem;margin-bottom:.9rem;
}
.access-list dd small { display:block;font-size:.75rem;margin-top:.2rem }
.access-list a { color:var(--gold);transition:opacity .3s ease }
.access-list a:hover { opacity:.7 }

/* ── 18. Footer ── */
.footer { background:var(--bg2);border-top:1px solid var(--bdr);padding-block:4rem 2.5rem }
.footer-inner {
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:2rem;flex-wrap:wrap;margin-bottom:3rem;
}
.footer-logo-img {
  height:44px;width:auto;
  mix-blend-mode:screen;
  display:block;margin-bottom:.75rem;
}
.footer-brand p { font-size:.78rem;color:var(--muted);letter-spacing:.06em }
.footer-nav { display:flex;gap:2rem;align-items:center;flex-wrap:wrap }
.footer-nav a {
  font-family:var(--fd);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);transition:color .3s ease;
}
.footer-nav a:hover { color:var(--gold) }
.footer-ig  { color:var(--muted);transition:color .3s ease;display:block }
.footer-ig:hover { color:var(--gold) }
.footer-copy {
  font-size:.7rem;color:var(--muted);opacity:.4;text-align:center;letter-spacing:.06em;
}

/* ── 18. Responsive / Tablet ── */
@media (max-width:900px) {
  .nav-links {
    position:fixed;top:var(--nav);left:0;right:0;bottom:0;
    background:#0a0806;
    flex-direction:column;align-items:center;justify-content:center;gap:2.75rem;
    transform:translateX(100%);transition:transform .45s var(--ease);
    z-index:399;
  }
  .nav-links.open { transform:translateX(0) }
  .nav-links a { font-size:1.1rem;letter-spacing:.3em;color:var(--text) }
  .nav-toggle { display:flex }

  .hero-quickinfo {
    display:grid;grid-template-columns:1fr 1fr;
    border-top:1px solid var(--bdr);
  }
  .hero-quickinfo .qinfo-sep { display:none }
  .qinfo-item { padding:.75rem 1rem;font-size:.65rem }
  .qinfo-item:first-child,
  .qinfo-item:nth-child(3) { border-right:1px solid var(--bdr) }
  .qinfo-item:first-child,
  .qinfo-item:nth-child(3) { border-bottom:1px solid var(--bdr) }
  .qinfo-item:first-child { border-bottom:1px solid var(--bdr) }
  .qinfo-item:nth-child(3) { border-bottom:1px solid var(--bdr) }
  .hero-content { padding-bottom:8rem }
  .hero-scroll { bottom:9.5rem }

  .who-grid    { grid-template-columns:1fr }
  .space-grid  { grid-template-columns:1fr 1fr }
  .space-attrs { grid-template-columns:1fr }
  .concept-grid { grid-template-columns:1fr;gap:3rem }
  .concept-img { aspect-ratio:16/9 }
  .concept-body { max-width:none }
  .cocktail-gallery { grid-template-columns:1fr 1fr }
  .cocktail-item--wide { aspect-ratio:16/9 }
  .menu-grid   { grid-template-columns:repeat(2,1fr) }
  .ig-inner    { grid-template-columns:1fr;gap:3rem }
  .ig-img      { aspect-ratio:16/9 }
  .booking-grid { grid-template-columns:1fr }
  .footer-inner { flex-direction:column;align-items:center;text-align:center }
  .footer-nav   { justify-content:center }
  .footer-logo-img { margin-inline:auto }
}

/* ── 19. Responsive / Mobile ── */
@media (max-width:580px) {
  .hero-title   { letter-spacing:.2em }
  .hero-actions { flex-direction:column;align-items:center }
  .who-card     { padding:2rem 1.5rem }
  .cocktail-gallery { grid-template-columns:1fr 1fr }
  .cocktail-item--wide { grid-column:auto;aspect-ratio:4/3 }
  .menu-grid    { grid-template-columns:1fr 1fr }
  .menu-card    { padding:.85rem 1rem }
  .menu-num     { font-size:.85rem;margin-bottom:.2rem }
  .menu-body h3 { font-size:.82rem }
  .menu-body p  { font-size:.72rem;line-height:1.6 }
  .space-grid   { grid-template-columns:1fr 1fr }
  .space-item   { aspect-ratio:1 }

  /* セクション余白を詰める */
  .section      { padding-block:3rem }
  .sec-header   { margin-bottom:2rem }
  .space-hero   { margin-block:1.5rem }
  .cocktail-gallery { margin-block:1.5rem }
  .instagram    { padding-block:3rem }
  .ig-inner     { padding-block:0 }
}

/* ── 20. Reduced Motion ── */
@media (prefers-reduced-motion:reduce) {
  .grain,.scroll-line { animation:none }
  .hero-location,.hero-title,.hero-rule,.hero-tagline,.hero-actions,.hero-quickinfo { animation:none }
  .reveal { opacity:1;transform:none;transition:none }
  .mobile-cta { transition:none }
}

/* ══════════════════════════════════════
   v3.1 — Refined Speakeasy
   ══════════════════════════════════════ */

/* 1. セクション背景リズム */
.concept  { background: var(--bg4) }
.cocktails { background: var(--bg) }
.space    { background: var(--bg2) }

/* 2. 垂直余白 */
.section  { padding-block: clamp(5rem, 10vw, 8rem) }

/* 3. Art Deco 装飾ライン — ラベル前 */
.sec-header .label::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--gold);
  opacity: .55;
  margin: 0 auto .9rem;
}
.concept-text .label::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--gold);
  opacity: .55;
  margin: 0 0 .9rem;
}

/* 4. メニューカード — カクテル名を主役に */
.menu-num {
  font-size: 1.4rem;
  color: rgba(200,169,110,.09);
  margin-bottom: .6rem;
}
.menu-card:hover .menu-num { color: rgba(200,169,110,.2) }
.menu-body h3 {
  font-size: 1.08rem;
  letter-spacing: .07em;
  line-height: 1.45;
  color: var(--text);
}
.menu-card:hover .menu-body h3 { color: var(--gold) }

/* トップバーをサイドボーダーに変更 */
.menu-bar { display: none }
.menu-card {
  border-left: 1px solid transparent;
  transition: background .3s ease, border-color .35s ease;
}
.menu-card:hover { border-left-color: var(--gold) }

/* 5. STORY — 本文と締め文 */
.concept-body {
  gap: 1.7rem;
  font-size: .88rem;
}
.concept-closing {
  color: rgba(228,217,196,.76);
  font-size: clamp(.92rem, 1.7vw, 1.02rem);
  line-height: 2;
}

/* 6. SPACE アトリビュート — 左ボーダーホバー */
.space-attr {
  border-left: 1px solid transparent;
  padding-left: 1.75rem;
  transition: border-color .35s ease;
}
.space-attr:hover { border-left-color: var(--gold) }

/* 7. カクテルギャラリー — 余白を上品に */
.cocktail-gallery { gap: 4px }

/* 8. セクションヘッダー余白 */
.sec-header { margin-bottom: clamp(2.5rem, 5.5vw, 4.5rem) }

/* 9. コンセプト折りたたみ */
.concept-more { display:none }
.concept-more.open { display:block }
.concept-more p { margin-bottom:1.2rem }
.concept-more p:last-child { margin-bottom:0 }
.concept-more-img { margin:1.4rem 0;overflow:hidden }
.concept-more-img img { width:100%;display:block;filter:brightness(.72) contrast(1.1) sepia(.25) saturate(.8) }
.concept-toggle {
  display:inline-flex;align-items:center;gap:.5rem;
  background:none;border:none;padding:0;margin-top:.75rem;
  font-family:var(--fd);font-size:.72rem;letter-spacing:.18em;
  color:var(--gold);cursor:pointer;transition:opacity .3s ease;
}
.concept-toggle:hover { opacity:.7 }
.concept-toggle svg { transition:transform .3s ease }
.concept-toggle[aria-expanded="true"] svg { transform:rotate(180deg) }
.toggle-close { display:none }
.concept-toggle[aria-expanded="true"] .toggle-open { display:none }
.concept-toggle[aria-expanded="true"] .toggle-close { display:inline }