/* ==========================================================================
   YAKINIKU 29LAB. — Demo C（SNS・デート・若者集客型）
   Editorial / Minimal / Fashion / Urban / Photography / Japanese Modern
   色・書体は :root で変更できます
   ========================================================================== */
:root {
  --bg:      #f3efe7;   /* Off White */
  --bg-2:    #e8e1d3;   /* Beige light */
  --beige:   #d8ccb6;   /* Beige */
  --gray:    #8a8378;   /* Warm Gray */
  --ink:     #121110;   /* Black */
  --ink-2:   #1d1b19;
  --red:     #c63a22;   /* Accent Red（使いすぎない） */
  --line:    rgba(18, 17, 16, .18);
  --line-w:  rgba(243, 239, 231, .22);

  --serif: "Bodoni Moda", "Times New Roman", serif;
  --sans:  "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;

  --header-h: 60px;
  --cta-h: 56px;
  --gut: 20px;
  --wrap: 1240px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 15px; font-weight: 400; line-height: 1.95; letter-spacing: .04em;
  overflow-x: hidden; padding-bottom: calc(var(--cta-h) + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol, dl, dd, figure, h1, h2, h3, p { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 0; z-index: 400; background: var(--ink); color: #fff; padding: 8px 14px; }
.skip:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.wrap.narrow { max-width: 820px; }
.sec { padding: 88px 0; position: relative; }
.note { font-size: 11.5px; color: var(--gray); margin-top: 28px; line-height: 1.9; letter-spacing: .06em; }

.sec-label { font-family: var(--serif); font-style: italic; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--gray); display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.sec-label i { font-style: normal; color: var(--red); letter-spacing: .1em; }
.sec-label i::after { content: ""; display: inline-block; width: 34px; height: 1px; background: currentColor; vertical-align: middle; margin-left: 12px; }
.sec-title { font-weight: 500; font-size: clamp(30px, 8.4vw, 64px); line-height: 1.35; letter-spacing: .05em; }

/* ---------- Photo / Mask / Parallax ---------- */
.ph { position: relative; overflow: hidden; aspect-ratio: var(--ar, 4/3); background: var(--beige); margin: 0; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; scale: 1.14; transform: translate3d(0, var(--py, 0px), 0); transition: scale 1.4s var(--ease); will-change: transform; }
.ph:hover img { scale: 1.2; }
.js .mask { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--ease); }
.js .mask.in { clip-path: inset(0 0 0 0); }
.js .mask.in-load { animation: maskIn 1.6s var(--ease) .1s both; }
@keyframes maskIn { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

.js .rise, .js .reveal:not(.mask) { opacity: 0; transform: translateY(26px); transition: opacity 1.1s var(--ease) var(--d, 0s), transform 1.1s var(--ease) var(--d, 0s); }
.js .rise.in, .js .reveal:not(.mask).in { opacity: 1; transform: none; }

/* ---------- Buttons ---------- */
.cta-line { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 15px; letter-spacing: .24em; min-height: 52px; padding: 0 4px; border-bottom: 1px solid currentColor; transition: gap .3s var(--ease), color .3s; }
.cta-line:hover { gap: 18px; }
.cta-line.dark { color: var(--ink); }
.cta-fill { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 34px; background: var(--ink); color: var(--bg); font-family: var(--serif); letter-spacing: .26em; font-size: 15px; border: 1px solid var(--ink); transition: background .3s, color .3s; cursor: pointer; text-align: center; }
.cta-fill:hover { background: var(--red); border-color: var(--red); }
.cta-fill.block { width: 100%; min-height: 58px; }

/* ---------- Header ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 200; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gut); color: #fff; transition: background .5s var(--ease), color .5s var(--ease), box-shadow .5s; }
.site-header.scrolled, body.drawer-open .site-header { background: rgba(243,239,231,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
body.drawer-open .site-header { background: transparent; box-shadow: none; backdrop-filter: none; }
.logo { font-family: var(--serif); font-size: 15px; letter-spacing: .28em; font-weight: 500; }
.logo b { font-style: italic; font-size: 28px; letter-spacing: .02em; margin-right: 3px; font-weight: 500; }
.hd-reserve { margin-left: auto; margin-right: 4px; font-family: var(--serif); font-size: 11px; letter-spacing: .22em; border: 1px solid currentColor; padding: 5px 12px; transition: background .3s, color .3s; }
.hd-reserve:hover { background: currentColor; }
.hd-reserve:hover { color: var(--ink); }
.burger { position: relative; background: none; border: 0; cursor: pointer; height: 44px; padding: 0 0 0 8px; display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 12px; letter-spacing: .24em; }
.burger-x { position: relative; width: 22px; height: 10px; }
.burger-x::before, .burger-x::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform .45s var(--ease), top .45s var(--ease); }
.burger-x::before { top: 0; } .burger-x::after { top: 9px; }
.burger[aria-expanded="true"] .burger-x::before { top: 4px; transform: rotate(20deg); }
.burger[aria-expanded="true"] .burger-x::after { top: 4px; transform: rotate(-20deg); }

.drawer { position: fixed; inset: 0; z-index: 150; background: var(--bg); padding: calc(var(--header-h) + 20px) var(--gut) 40px; display: flex; flex-direction: column; justify-content: space-between; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .8s var(--ease), visibility .8s; overflow-y: auto; }
.drawer.open { clip-path: inset(0); visibility: visible; }
.drawer ol { display: grid; }
.drawer li a { display: flex; align-items: baseline; gap: 18px; padding: 8px 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-style: italic; font-size: clamp(28px, 8vw, 44px); line-height: 1.3; }
.drawer li i { font-style: normal; font-size: 11px; letter-spacing: .2em; color: var(--red); width: 24px; }
.drawer-cta { margin-top: 24px; background: var(--ink); color: var(--bg); text-align: center; padding: 18px; font-family: var(--serif); letter-spacing: .3em; }
body.drawer-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100svh; min-height: 560px; color: #fff; overflow: hidden; background: var(--ink); isolation: isolate; }
.hero-img { position: absolute; inset: 0; z-index: -2; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 48% 50%; animation: heroScale 2.8s var(--ease) both; }
@keyframes heroScale { from { scale: 1.2; } to { scale: 1.02; } }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18,17,16,.45) 0%, rgba(18,17,16,0) 28%, rgba(18,17,16,.05) 50%, rgba(18,17,16,.78) 100%); }
.hero-copy { position: absolute; left: var(--gut); right: var(--gut); bottom: calc(var(--cta-h) + 34px + env(safe-area-inset-bottom)); }
.hero-meta { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--serif); font-size: 11px; letter-spacing: .28em; margin-bottom: 20px; opacity: 0; animation: fadeIn 1.2s var(--ease) 1s forwards; }
.hero h1 { font-weight: 500; font-size: clamp(36px, 11vw, 120px); line-height: 1.22; letter-spacing: .06em; }
.hero h1 span { display: block; opacity: 0; transform: translateY(40px); animation: riseIn 1.4s var(--ease) forwards; }
.hero h1 .l1 { animation-delay: .7s; } .hero h1 .l2 { animation-delay: .9s; }
.hero-en { margin-top: 16px; font-family: var(--serif); font-style: italic; font-size: clamp(12px, 3.3vw, 18px); letter-spacing: .3em; opacity: 0; animation: fadeIn 1.4s var(--ease) 1.3s forwards; }
.hero-cta { margin-top: 28px; display: flex; align-items: center; gap: 26px; opacity: 0; animation: fadeIn 1.4s var(--ease) 1.5s forwards; }
.hero .cta-line { color: #fff; }
.hero .cta-fill { background: #fff; color: var(--ink); border-color: #fff; }
.hero .cta-fill:hover { background: var(--red); border-color: var(--red); color: #fff; }
.hero-scroll { display: none; }
@keyframes riseIn { to { opacity: 1; transform: none; } }
@keyframes fadeIn { to { opacity: 1; } }

.marquee { overflow: hidden; border-block: 1px solid var(--line); background: var(--bg); padding: 12px 0; }
.marquee-track { display: flex; width: max-content; animation: marq 38s linear infinite; }
.marquee-track span { font-family: var(--serif); font-style: italic; font-size: 13px; letter-spacing: .3em; white-space: pre; color: var(--gray); padding-right: 0; }
@keyframes marq { to { transform: translateX(-50%); } }

/* ---------- Concept ---------- */
.concept { padding: 96px 0 72px; }
.concept-grid { display: grid; gap: 56px; }
.concept-visual { position: relative; padding-bottom: 22%; }
.concept-visual .ph:first-child { width: 72%; }
.concept-visual .ov { position: absolute; right: 0; bottom: 0; width: 58%; border: 8px solid var(--bg); }
.concept-text h2 { margin-bottom: 26px; }
.concept-text .big { font-family: var(--serif); font-size: 15px; letter-spacing: .12em; color: var(--red); margin-bottom: 14px; font-family: var(--sans); font-weight: 700; }
.concept-text p + p { margin-top: 1.2em; }
.concept-text > p { color: #3b3733; }
.creed { margin-top: 36px; border-top: 1px solid var(--line); }
.creed li { padding: 16px 0; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.creed b { font-family: var(--serif); font-weight: 500; letter-spacing: .24em; font-size: 13px; }
.creed span { font-size: 13.5px; color: var(--gray); line-height: 1.8; }

/* ---------- Featured ---------- */
.featured { padding: 40px 0 40px; background: var(--bg); }
.featured .sec-title { margin-bottom: 40px; }
.feat { margin-top: 64px; }
.feat .ph { width: 100%; }
.feat-text { padding: 26px var(--gut) 0; }
.feat-no { font-family: var(--serif); font-style: italic; font-size: 74px; line-height: 1; color: var(--beige); margin-bottom: -10px; }
.feat h3 { font-weight: 500; font-size: clamp(26px, 7.4vw, 44px); line-height: 1.3; letter-spacing: .06em; }
.feat h3 small { display: block; font-family: var(--serif); font-style: italic; font-size: 11.5px; letter-spacing: .3em; color: var(--gray); margin-bottom: 6px; font-weight: 400; }
.feat p { color: #3b3733; margin-top: 12px; max-width: 30em; }
.feat .price { font-family: var(--serif); font-size: 34px; color: var(--ink); letter-spacing: .06em; margin-top: 14px; }
.feat .cta-line { margin-top: 10px; }
.feat.f2 .feat-text { order: 2; } .feat.f2 .ph { order: 1; }
.feat.f3 .ph { width: 78%; margin-left: auto; }
.feat.f3 .feat-text { padding-top: 22px; }

/* ---------- Gallery ---------- */
.gallery { padding: 72px 0 96px; background: var(--bg-2); }
.gallery .sec-title { margin-bottom: 40px; }
.gal { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 10px; row-gap: 26px; padding: 0 var(--gut); max-width: 1500px; margin: 0 auto; }
.g figcaption { margin-top: 8px; font-family: var(--serif); font-style: italic; font-size: 11px; letter-spacing: .24em; color: var(--gray); }
.g1 { grid-column: 1 / 13; margin-inline: calc(var(--gut) * -1); }
.g2 { grid-column: 5 / 13; margin-top: -16%; position: relative; z-index: 2; }
.g2 .ph { border: 6px solid var(--bg-2); }
.g3 { grid-column: 1 / 7; }
.g4 { grid-column: 1 / 13; margin-right: calc(var(--gut) * -1); }
.g5 { grid-column: 1 / 9; margin-top: -10%; position: relative; z-index: 2; }
.g5 .ph { border: 6px solid var(--bg-2); }
.g6 { grid-column: 6 / 13; margin-top: 14%; }
.g7 { grid-column: 3 / 10; }

/* ---------- Menu ---------- */
.menu { background: var(--bg); padding-bottom: 72px; }
.menu .sec-title { margin-bottom: 36px; }
.menu-cols { display: grid; gap: 44px; }
.mblock h3 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 32px; letter-spacing: .1em; color: var(--ink); padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
.mblock li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.mblock .n { font-size: 15.5px; line-height: 1.55; }
.mblock .n em { display: block; font-style: normal; font-size: 12px; color: var(--gray); letter-spacing: .06em; }
.mblock .p { font-family: var(--serif); font-size: 18px; white-space: nowrap; letter-spacing: .04em; }
.mblock .hl { background: var(--beige); padding-inline: 12px; margin-inline: -12px; border-bottom-color: transparent; }
.mblock .hl .p { color: var(--red); }

/* ---------- Course ---------- */
.course { background: var(--bg); padding-top: 24px; }
.course .sec-title { margin-bottom: 30px; }
.course-rows { border-top: 1px solid var(--ink); }
.course-rows li { padding: 30px 0; border-bottom: 1px solid var(--line); transition: padding .5s var(--ease), background .4s; }
.cr-head { display: grid; grid-template-columns: 44px 1fr auto; align-items: baseline; gap: 10px; }
.cr-no { font-family: var(--serif); font-style: italic; font-size: 30px; color: var(--red); line-height: 1; }
.cr-head h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 6.4vw, 38px); letter-spacing: .12em; line-height: 1.2; }
.cr-price { font-family: var(--serif); font-size: clamp(22px, 6vw, 34px); letter-spacing: .04em; }
.cr-desc { margin: 8px 0 0 54px; font-size: 14px; font-weight: 500; }
.cr-items { margin: 6px 0 0 54px; font-size: 12.5px; color: var(--gray); line-height: 1.9; }

/* ---------- Pair ---------- */
.pair { background: var(--bg-2); padding: 80px 0 88px; }
.pair-grid { display: grid; gap: 40px; }
.pair-visual { position: relative; padding-right: 14%; }
.pair-stamp { position: absolute; right: 0; bottom: -18px; font-family: var(--serif); font-style: italic; font-size: clamp(54px, 17vw, 120px); line-height: .86; color: var(--ink); letter-spacing: -.01em; mix-blend-mode: multiply; }
.pair-text h2 { font-weight: 500; font-size: clamp(26px, 7.2vw, 46px); line-height: 1.45; margin-bottom: 18px; }
.pair-text > p { color: #3b3733; }
.pair-card { margin-top: 28px; background: var(--bg); border: 1px solid var(--ink); padding: 28px 22px 26px; }
.pc-name { font-family: var(--serif); letter-spacing: .34em; font-size: 14px; color: var(--gray); }
.pc-price { font-family: var(--serif); font-size: 52px; line-height: 1.2; letter-spacing: .02em; }
.pc-price small { font-family: var(--sans); font-size: 13px; letter-spacing: .1em; color: var(--gray); }
.pair-card ol { margin: 14px 0 22px; counter-reset: p; border-top: 1px solid var(--line); }
.pair-card li { counter-increment: p; display: grid; grid-template-columns: 28px 74px 1fr; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.6; }
.pair-card li::before { content: "0" counter(p); font-family: var(--serif); font-style: italic; color: var(--red); font-size: 13px; }
.pair-card li b { font-weight: 700; font-size: 12px; letter-spacing: .12em; }

/* ---------- Drinks ---------- */
.drinks { background: var(--ink-2); color: var(--bg); padding: 88px 0; }
.drinks .sec-label { color: var(--beige); }
.drinks-grid { display: grid; gap: 40px; }
.drinks .sec-title { margin-bottom: 34px; }
.drinks-ph { background: #2a2623; }
.dr-lists { display: grid; gap: 30px; }
.dr-lists h3 { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: .24em; font-size: 15px; color: var(--beige); padding-bottom: 8px; border-bottom: 1px solid var(--line-w); }
.dr-lists li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-w); font-size: 14.5px; }
.dr-lists b { font-family: var(--serif); font-weight: 400; font-size: 17px; white-space: nowrap; }

/* ---------- Scene ---------- */
.scene { background: var(--bg); padding: 88px 0 80px; overflow: hidden; }
.scene .sec-title { margin-bottom: 36px; font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: .06em; font-size: clamp(30px, 9vw, 72px); }
.scene-row { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gut) 8px; scrollbar-width: none; }
.scene-row::-webkit-scrollbar { display: none; }
.sc { flex: none; width: 70vw; max-width: 320px; scroll-snap-align: start; }
.sc a { display: block; }
.sc-tag { font-family: var(--serif); font-size: 22px; letter-spacing: .24em; margin-top: 14px; }
.sc-copy { font-size: 13px; color: #3b3733; line-height: 1.85; margin-top: 4px; }

/* ---------- Instagram ---------- */
.insta { background: var(--beige); }
.insta-grid { display: grid; gap: 44px; }
.insta-text h2 { font-weight: 500; font-size: clamp(24px, 6.6vw, 40px); line-height: 1.5; margin-bottom: 26px; }
.roles { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ink); margin-bottom: 24px; background: var(--bg); }
.roles > div { padding: 16px 14px 14px; }
.roles > div + div { border-left: 1px solid var(--ink); background: var(--ink); color: var(--bg); }
.r-t { font-family: var(--serif); letter-spacing: .24em; font-size: 12px; margin-bottom: 8px; opacity: .8; }
.roles li { font-size: 13px; line-height: 1.7; padding: 4px 0; border-top: 1px solid var(--line); }
.roles > div + div li { border-color: var(--line-w); }
.insta-text > p { color: #2f2b27; }
.demo-btn { margin-top: 18px; background: none; border: 0; border-bottom: 1px dashed var(--ink); cursor: not-allowed; opacity: .75; flex-wrap: wrap; text-align: left; line-height: 1.6; padding: 10px 0; }
.demo-btn span { font-family: var(--sans); font-size: 11px; letter-spacing: .06em; }
.from-ig { display: flex; margin-top: 20px; font-family: var(--sans); font-size: 13px; letter-spacing: .08em; padding: 0 20px; }
.insta-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; align-self: start; }
.insta-tiles li { position: relative; }
.insta-tiles span { position: absolute; left: 6px; top: 6px; background: var(--bg); font-family: var(--serif); font-size: 9.5px; letter-spacing: .2em; padding: 1px 7px; }

/* ---------- News ---------- */
.news { background: var(--bg); }
.news .sec-title { margin-bottom: 30px; }
.news-list { display: grid; gap: 14px; }
.news-list a { display: block; border: 1px solid var(--ink); padding: 24px 22px 22px; background: var(--bg); transition: background .4s var(--ease), color .4s; }
.news-list a:hover { background: var(--ink); color: var(--bg); }
.nl-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; font-family: var(--serif); font-size: 12px; letter-spacing: .18em; }
.tag { display: inline-block; padding: 0 12px; font-size: 11px; letter-spacing: .24em; border: 1px solid currentColor; line-height: 1.8; }
.t-new { background: var(--red); border-color: var(--red); color: #fff; }
.news-list h3 { font-weight: 500; font-size: 21px; line-height: 1.5; letter-spacing: .05em; margin-bottom: 8px; }
.news-list p:last-child { font-size: 13px; color: var(--gray); line-height: 1.85; }
.news-list a:hover p:last-child { color: var(--beige); }
.more { margin-left: 8px; font-family: var(--serif); }

/* ---------- Shop / Access ---------- */
.shop { background: var(--bg-2); padding: 80px 0 60px; }
.shop-grid { display: grid; gap: 28px; }
.info div { display: grid; grid-template-columns: 86px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.info div:first-child { border-top: 1px solid var(--ink); }
.info dt { font-size: 12px; letter-spacing: .2em; color: var(--gray); line-height: 2; }
.info dd { font-size: 14.5px; line-height: 1.85; }
.info a { font-family: var(--serif); font-size: 20px; letter-spacing: .08em; border-bottom: 1px solid var(--red); }
.access { background: var(--bg-2); padding: 20px 0 88px; }
.access-grid { display: grid; gap: 30px; }
.map { aspect-ratio: 4/3; background: repeating-linear-gradient(45deg, rgba(18,17,16,.04) 0 10px, transparent 10px 20px), var(--beige); display: grid; place-items: center; text-align: center; border: 1px solid var(--line); }
.map b { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 36px; letter-spacing: .3em; }
.map span { font-size: 12px; color: var(--gray); }
.access-text .sec-title { font-size: clamp(28px, 7.4vw, 44px); margin-bottom: 14px; }
.route { margin: 14px 0 22px; }
.route li { display: grid; grid-template-columns: 28px 1fr; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.7; }
.route i { font-family: var(--serif); color: var(--red); font-size: 17px; font-style: italic; }

/* ---------- Reservation ---------- */
.reserve { background: var(--ink); color: var(--bg); padding: 88px 0 96px; }
.reserve .sec-label { color: var(--beige); }
.reserve-grid { display: grid; gap: 40px; }
.reserve-intro h2 { font-weight: 500; font-size: clamp(36px, 11vw, 80px); line-height: 1.18; margin-bottom: 20px; }
.reserve-intro > p { color: var(--beige); }
.tel { display: block; margin-top: 26px; padding: 18px 0; border-block: 1px solid var(--line-w); font-family: var(--serif); font-size: 34px; letter-spacing: .1em; line-height: 1.3; }
.tel small { display: block; font-size: 11px; letter-spacing: .3em; color: var(--beige); }
.tel span { display: block; font-family: var(--sans); font-size: 11.5px; letter-spacing: .12em; color: var(--beige); }
.reserve .note { color: #9a9285; }
.rform { display: grid; gap: 24px; }
.field { display: grid; gap: 4px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field label, .field legend { font-family: var(--serif); letter-spacing: .24em; font-size: 12px; color: var(--beige); padding: 0; }
.field input[type=text], .field input[type=tel], .field input[type=date], .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 10px 2px; font-size: 16px; color: var(--bg); background: transparent; border: 0; border-bottom: 1px solid rgba(243,239,231,.4); border-radius: 0; appearance: none; -webkit-appearance: none; transition: border-color .3s;
}
.field textarea { resize: vertical; min-height: 84px; }
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--beige) 50%), linear-gradient(135deg, var(--beige) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
.field select option { background: #1d1b19; color: var(--bg); }
.field input[type=date] { color-scheme: dark; }
.field input::placeholder, .field textarea::placeholder { color: rgba(243,239,231,.3); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--bg); }
.field.invalid input, .field.invalid select { border-bottom-color: #ff8a70; }
.err { font-size: 12px; color: #ff9d86; }
.err:empty { display: none; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pills { grid-template-columns: 1fr 1fr; gap: 8px; }
.pills legend { grid-column: 1 / -1; margin-bottom: 4px; }
.pills label { position: relative; letter-spacing: .12em; }
.pills input { position: absolute; opacity: 0; }
.pills span { display: flex; align-items: center; justify-content: center; min-height: 48px; border: 1px solid rgba(243,239,231,.4); font-family: var(--serif); font-size: 13px; letter-spacing: .18em; color: var(--bg); cursor: pointer; transition: all .25s; }
.pills input:checked + span { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.pills input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.check { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-size: 14px; }
.check input { width: 22px; height: 22px; accent-color: var(--red); }
.rform .cta-fill { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.rform .cta-fill:hover { background: var(--red); border-color: var(--red); color: #fff; }
.form-done { padding: 16px; border: 1px solid var(--beige); font-size: 14px; line-height: 1.9; }

/* ---------- FAQ ---------- */
.faq { background: var(--bg); }
.faq .sec-title { margin-bottom: 28px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--ink); }
.faq-list summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font-size: 15.5px; line-height: 1.7; min-height: 56px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 14px; height: 1px; background: var(--ink); }
.faq-list summary::before { content: ""; position: absolute; right: 10.5px; top: calc(50% - 6.5px); width: 1px; height: 14px; background: var(--ink); transition: transform .4s var(--ease); }
.faq-list details[open] summary::before { transform: scaleY(0); }
.faq-list details p { padding: 0 0 22px; color: #3b3733; font-size: 14px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--bg); border-top: 1px solid var(--ink); padding: 56px 0 40px; overflow: hidden; }
.foot-mark { font-family: var(--serif); font-size: clamp(88px, 30vw, 360px); line-height: .88; letter-spacing: -.02em; margin: 0 0 30px -4px; white-space: nowrap; }
.foot-mark b { font-style: italic; font-weight: 400; margin-right: .02em; }
.foot-row { display: grid; gap: 22px; font-size: 13px; line-height: 1.9; }
.foot-row ul { display: flex; flex-wrap: wrap; gap: 0 20px; font-family: var(--serif); letter-spacing: .18em; }
.foot-row a { display: block; padding: 8px 0; }
.demo-note { margin-top: 28px; font-size: 11px; color: var(--gray); line-height: 1.9; }
.copy { margin-top: 12px; font-family: var(--serif); font-size: 11px; letter-spacing: .14em; color: var(--gray); }

/* ---------- Mobile CTA ---------- */
.sp-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 180; height: calc(var(--cta-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: 1fr 1.5fr; transition: transform .6s var(--ease); }
.sp-cta a { display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 14px; letter-spacing: .3em; }
.sp-menu { background: var(--bg); color: var(--ink); border-top: 1px solid var(--ink); }
.sp-res { background: var(--red); color: #fff; }
.sp-cta.hide, body.drawer-open .sp-cta { transform: translateY(100%); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .mask, .js .rise, .js .reveal:not(.mask) { clip-path: none !important; opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .mask.in-load, .hero-img img, .hero h1 span, .hero-meta, .hero-en, .hero-cta { animation: none !important; opacity: 1 !important; transform: none !important; }
  .marquee-track { animation: none; }
  .ph img { transition: none; transform: none !important; }
}

/* ==========================================================================
   Tablet / Desktop
   ========================================================================== */
@media (min-width: 560px) {
  .insta-tiles { gap: 6px; }
  .sc { width: 44vw; }
}

@media (min-width: 900px) {
  :root { --header-h: 76px; --gut: 48px; }
  body { font-size: 16px; padding-bottom: 0; }
  .sp-cta { display: none; }
  .site-header { padding: 0 var(--gut); }
  .logo { font-size: 17px; } .logo b { font-size: 34px; }
  .hd-reserve { font-size: 13px; padding: 9px 24px; margin-right: 24px; }
  .burger { font-size: 13px; }
  .drawer { padding: calc(var(--header-h) + 36px) var(--gut) 48px; flex-direction: row; align-items: flex-end; gap: 80px; }
  .drawer ol { flex: 1; grid-template-columns: 1fr 1fr; column-gap: 60px; }
  .drawer-cta { flex: none; width: 320px; margin: 0; }

  .hero-copy { left: var(--gut); right: var(--gut); bottom: 90px; }
  .hero-meta { font-size: 12px; margin-bottom: 28px; }
  .hero h1 { max-width: 10em; }
  .hero-cta { margin-top: 44px; gap: 40px; }
  .hero-scroll { display: block; position: absolute; right: var(--gut); bottom: 90px; writing-mode: vertical-rl; font-family: var(--serif); font-size: 11px; letter-spacing: .4em; }
  .hero-scroll span::after { content: ""; display: block; width: 1px; height: 70px; margin: 12px auto 0; background: #fff; transform-origin: top; animation: cue 2.4s var(--ease) infinite; }
  @keyframes cue { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

  .sec { padding: 150px 0; }
  .sec-label { margin-bottom: 28px; }

  .concept { padding: 170px 0 120px; }
  .concept-grid { grid-template-columns: 1.1fr 1fr; gap: 110px; align-items: center; }
  .concept-text h2 { font-size: 72px; }
  .creed li { grid-template-columns: 160px 1fr; align-items: baseline; }

  .featured { padding: 40px 0; }
  .featured .sec-title { margin-bottom: 70px; }
  .feat { display: grid; align-items: center; margin-top: 120px; }
  .feat-text { padding: 0; }
  .feat-no { font-size: 150px; margin-bottom: -26px; }
  .feat.f1 { grid-template-columns: 7fr 4fr; column-gap: 7%; }
  .feat.f1 .ph { grid-column: 1; }
  .feat.f1 .feat-text { padding-right: var(--gut); }
  .feat.f2 { grid-template-columns: 4fr 6fr; column-gap: 8%; margin-top: 90px; padding-left: var(--gut); }
  .feat.f2 .feat-text { order: 1; padding-left: calc((100vw - var(--wrap)) / 2 > 0 ? 0px : 0px); }
  .feat.f2 .ph { order: 2; }
  .feat.f3 { grid-template-columns: 5fr 5fr; column-gap: 9%; padding-inline: 12%; margin-top: 130px; }
  .feat.f3 .ph { width: 100%; }
  .feat.f3 .feat-text { padding-top: 0; }

  .gallery { padding: 130px 0 170px; }
  .gallery .sec-title { margin-bottom: 70px; }
  .gal { column-gap: 22px; row-gap: 0; }
  .g1 { grid-column: 1 / 8; grid-row: 1; }
  .g2 { grid-column: 9 / 13; grid-row: 1 / 3; margin-top: 12vw; }
  .g3 { grid-column: 3 / 7; grid-row: 2; margin-top: -7vw; position: relative; z-index: 2; }
  .g3 .ph { border: 8px solid var(--bg-2); }
  .g4 { grid-column: 4 / 13; grid-row: 3; margin-top: 7vw; }
  .g5 { grid-column: 1 / 5; grid-row: 4; margin-top: -10vw; }
  .g6 { grid-column: 7 / 11; grid-row: 4; margin-top: 8vw; }
  .g7 { grid-column: 9 / 13; grid-row: 5; margin-top: 2vw; }
  .g5 .ph, .g2 .ph { border-width: 8px; }
  .g figcaption { font-size: 12px; }

  .menu-cols { grid-template-columns: 1fr 1fr; column-gap: 100px; row-gap: 70px; }
  .mblock h3 { font-size: 44px; }
  .mblock .n { font-size: 16.5px; }

  .course-rows li { padding: 44px 0; }
  .course-rows li:hover { padding-left: 24px; background: var(--bg-2); }
  .cr-head { grid-template-columns: 90px 1fr auto; }
  .cr-no { font-size: 48px; }
  .cr-desc, .cr-items { margin-left: 100px; max-width: 46em; }

  .pair { padding: 150px 0; }
  .pair-grid { grid-template-columns: 1fr 1fr; gap: 110px; align-items: center; }
  .pair-visual { padding-right: 18%; }
  .pair-card { padding: 38px 40px 34px; }
  .pc-price { font-size: 68px; }

  .drinks { padding: 150px 0; }
  .drinks-grid { grid-template-columns: .85fr 1fr; gap: 110px; align-items: start; }
  .dr-lists { grid-template-columns: 1fr 1fr; gap: 44px 50px; }

  .scene { padding: 150px 0 140px; }
  .scene-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; overflow: visible; padding: 0 var(--gut); max-width: var(--wrap); margin: 0 auto; }
  .sc { width: auto; max-width: none; }
  .sc.s2 { margin-top: 60px; } .sc.s3 { margin-top: 20px; } .sc.s4 { margin-top: 90px; }
  .sc a:hover .sc-tag { color: var(--red); }

  .insta-grid { grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
  .roles > div { padding: 22px 24px 20px; }
  .roles li { font-size: 14px; }

  .news-list { grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
  .news-list li:nth-child(2) { margin-top: 40px; }
  .news-list a { padding: 34px 28px 30px; min-height: 300px; display: flex; flex-direction: column; }
  .news-list h3 { font-size: 24px; }
  .news-list p:last-child { margin-top: auto; }

  .shop { padding: 130px 0 90px; }
  .shop-grid { grid-template-columns: .8fr 1.2fr; gap: 100px; }
  .access { padding: 40px 0 150px; }
  .access-grid { grid-template-columns: 1.3fr 1fr; gap: 90px; align-items: center; }
  .map { aspect-ratio: 5/4; }

  .reserve { padding: 150px 0 160px; }
  .reserve-grid { grid-template-columns: .85fr 1.15fr; gap: 120px; align-items: start; }
  .reserve-intro { position: sticky; top: calc(var(--header-h) + 36px); }

  .faq-list summary { font-size: 17px; }
  .site-footer { padding: 90px 0 50px; }
  .foot-row { grid-template-columns: 1fr auto; align-items: end; }
}

@media (max-width: 359px) {
  .row2 { grid-template-columns: 1fr; }
  .hero-cta { gap: 14px; }
  .hd-reserve { display: none; }
}