@charset "UTF-8";
/* ============================================================
   鉄板焼 大都会 東京駅八重洲店 — mock
   black / classic / retro-luxury / smoke
============================================================ */

:root{
  --bg:        #0b0a08;
  --bg-2:      #14110c;
  --bg-3:      #1b1710;
  --ink:       #ece5d6;
  --ink-mut:   #a89e8a;
  --gold:      #c9a45c;
  --gold-deep: #8f7434;
  --gold-line: rgba(201,164,92,.28);
  --red:       #8c2f2f;
  --serif-ja:  "Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --serif-en:  "Cormorant Garamond","Times New Roman",serif;
  --sans:      "Noto Sans JP",sans-serif;
  --ease:      cubic-bezier(.22,1,.36,1);
  --header-h:  84px;
  --announce-h:38px;
}

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

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + var(--announce-h)); }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif-ja);
  font-weight:400;
  line-height:1.9;
  letter-spacing:.06em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
::selection{ background:var(--gold-deep); color:#fff; }

/* ------------------------------------------------ scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:#000; }
::-webkit-scrollbar-thumb{ background:#3a3123; border-radius:5px; }

/* ============================================= film grain */
.grain{
  position:fixed; inset:-20%;
  width:140%; height:140%;
  pointer-events:none;
  z-index:9000;
  opacity:.055;
  will-change:transform;
  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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 12s steps(10) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate3d(0,0,0); }
  20%{ transform:translate3d(-2%,1.5%,0); }
  40%{ transform:translate3d(1.5%,-2%,0); }
  60%{ transform:translate3d(-1.5%,-1.5%,0); }
  80%{ transform:translate3d(2%,2%,0); }
}

/* ============================================= loader */
.loader{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  background:#050403;
  transition:visibility 0s 2.4s;
}
.loader__inner{
  display:flex; flex-direction:column; align-items:center; gap:22px;
  animation:loaderFade .8s var(--ease) 2.4s forwards;
}
.loader__logo{
  display:block;
  height:clamp(220px,42vh,340px); width:auto;
  opacity:0; animation:fadeIn .9s ease .2s forwards;
}
.loader__curtain{
  position:absolute; inset:0; background:#050403; transform:scaleY(1);
  transform-origin:top; z-index:-1;
}
.loader.is-done{ visibility:hidden; }
.loader.is-done .loader__curtain{ z-index:1; }
body.is-loading{ overflow:hidden; }
.loader{ clip-path:inset(0 0 0% 0); }
.loader.is-done{ animation:curtainUp 1s var(--ease) forwards; }
@keyframes curtainUp{ to{ clip-path:inset(0 0 100% 0); } }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fadeIn{ to{ opacity:1; } }
@keyframes loaderFade{ to{ opacity:0; transform:translateY(-14px); } }

/* ============================================= buttons */
.btn{
  position:relative;
  display:inline-block;
  padding:14px 34px;
  font-family:var(--serif-ja);
  font-size:14px; letter-spacing:.22em;
  border:1px solid var(--gold);
  color:var(--gold);
  background:transparent;
  overflow:hidden;
  cursor:pointer;
  transition:color .45s var(--ease), border-color .45s var(--ease), opacity .3s;
  z-index:1;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg,var(--gold-deep),var(--gold));
  transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.btn:hover{ color:#0d0b07; }
.btn:hover::before{ transform:scaleX(1); transform-origin:left; }
.btn--gold{
  background:linear-gradient(100deg,var(--gold-deep),var(--gold));
  color:#0d0b07; border-color:transparent;
}
.btn--gold::before{ background:#e6c987; }
.btn--gold:hover{ color:#0d0b07; }
.btn--lg{ padding:17px 46px; font-size:15px; }
.btn--line{ border-color:rgba(236,229,214,.4); color:var(--ink); }
.btn--line::before{ background:var(--ink); }
.btn--line:hover{ color:#0d0b07; }
.btn small{ font-size:.75em; letter-spacing:.1em; }
.btn:disabled{ opacity:.35; pointer-events:none; }
/* 無効ボタン（URL未設定の「ご予約」など）：クリック・ホバーとも無反応 */
.btn[aria-disabled="true"]{ cursor:default; }
.btn[aria-disabled="true"]:hover{ color:var(--ink); }
.btn[aria-disabled="true"]:hover::before{ transform:scaleX(0); }

/* ============================================= announce bar (GRAND OPEN) */
.announce{
  position:fixed; top:0; left:0; right:0; z-index:1050;
  height:var(--announce-h);
  display:flex; align-items:center; justify-content:center;
  padding:0 16px;
  background:linear-gradient(100deg,var(--gold-deep),var(--gold));
  box-shadow:0 1px 0 rgba(0,0,0,.25);
}
.announce__inner{
  margin:0;
  font-family:var(--serif-ja);
  font-size:clamp(11px,1.5vw,13.5px);
  font-weight:600; letter-spacing:.24em;
  color:#1a1206;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ============================================= GRAND OPEN popup (one-time on entry) */
.gopop{
  position:fixed; inset:0; z-index:8000;
  display:grid; place-items:center;
  pointer-events:none; opacity:0;
  background:radial-gradient(58% 58% at 50% 50%, rgba(6,5,3,.66) 0%, rgba(6,5,3,0) 72%);
}
.gopop__inner{
  display:flex; flex-direction:column; align-items:center; gap:clamp(10px,1.6vh,20px);
  transform:scale(.92);
}
.gopop__date{
  font-family:var(--serif-ja); font-size:clamp(16px,2.4vw,30px);
  letter-spacing:.32em; color:var(--ink); padding-left:.32em;
}
.gopop__title{
  font-family:var(--serif-en); font-weight:500;
  font-size:clamp(46px,9vw,124px); line-height:1; letter-spacing:.12em;
  color:var(--gold); text-shadow:0 8px 60px rgba(0,0,0,.6);
}
body.is-loaded .gopop{ animation:gopopFade 2.8s var(--ease) .7s forwards; }
body.is-loaded .gopop .gopop__inner{ animation:gopopScale 2.8s var(--ease) .7s forwards; }
@keyframes gopopFade{ 0%{opacity:0} 16%{opacity:1} 60%{opacity:1} 100%{opacity:0} }
@keyframes gopopScale{ 0%{transform:scale(.92)} 22%{transform:scale(1)} 100%{transform:scale(1.05)} }
@media (prefers-reduced-motion: reduce){ .gopop{ display:none; } }

/* ============================================= header */
.header{
  position:fixed; top:var(--announce-h); left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  height:var(--header-h);
  padding:0 clamp(20px,4vw,56px);
  transition:background .5s ease, backdrop-filter .5s ease, height .4s ease,
             box-shadow .5s ease;
}
.header.is-scrolled{
  height:66px;
  background:rgba(8,7,5,.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(201,164,92,.15);
}
.header__logo{ display:flex; align-items:center; gap:14px; }
.header__mark{
  display:block;
  width:44px; height:44px;
  object-fit:contain;
  transition:transform .6s var(--ease);
}
.header__logo:hover .header__mark{ transform:scale(1.06); }
.header__ja{ display:block; font-size:20px; font-weight:600; letter-spacing:.3em; line-height:1.2; }
.header__en{ display:block; font-family:var(--serif-en); font-size:10px; letter-spacing:.42em; color:var(--gold); }

.gnav{ display:flex; align-items:center; gap:clamp(18px,3vw,44px); }
.gnav__list{ display:flex; gap:clamp(16px,2.4vw,36px); }
.gnav__list a{ position:relative; display:block; text-align:center; padding:4px 2px; }
.gnav__ja{ display:block; font-size:13.5px; letter-spacing:.14em; }
.gnav__en{
  display:block; font-family:var(--serif-en); font-style:italic;
  font-size:10.5px; letter-spacing:.28em; color:var(--gold);
  opacity:.75;
}
.gnav__list a::after{
  content:""; position:absolute; left:50%; bottom:-6px;
  width:0; height:1px; background:var(--gold);
  transition:width .4s var(--ease), left .4s var(--ease);
}
.gnav__list a:hover::after{ width:100%; left:0; }
.gnav__reserve{ padding:11px 24px; font-size:13px; }

.menu-toggle{
  display:none;
  position:relative; z-index:1102;
  width:48px; height:48px;
  background:none; border:1px solid var(--gold-line); border-radius:50%;
  cursor:pointer;
}
.menu-toggle span{
  position:absolute; left:13px; right:13px; height:1px;
  background:var(--ink);
  transition:transform .45s var(--ease), top .45s var(--ease);
}
.menu-toggle span:nth-child(1){ top:19px; }
.menu-toggle span:nth-child(2){ top:27px; }
.menu-toggle.is-open span:nth-child(1){ top:23px; transform:rotate(30deg); }
.menu-toggle.is-open span:nth-child(2){ top:23px; transform:rotate(-30deg); }

/* ============================================= hero */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  padding:calc(var(--header-h) + 20px) clamp(20px,5vw,72px) 110px;
  overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:-3; background:#000; }
.hero__img{
  width:100%; height:100%; object-fit:cover;
  object-position:center;
  opacity:.92;
  filter:brightness(.72) saturate(.92) contrast(1.05);
  animation:kenburns 26s ease-in-out infinite alternate;
  transform-origin:60% 40%;
  will-change:transform;
}
[data-parallax],
[data-parallax-bg]{ will-change:transform; }
@keyframes kenburns{
  from{ transform:scale(1.02) translate(0,0); }
  to{ transform:scale(1.14) translate(-1.5%,1.5%); }
}
.hero__shade{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(62% 58% at 50% 45%, rgba(6,5,3,.62) 0%, rgba(6,5,3,0) 66%),
    linear-gradient(0deg, rgba(6,5,3,.92) 0%, rgba(6,5,3,0) 30%),
    linear-gradient(180deg, rgba(6,5,3,.55) 0%, rgba(6,5,3,0) 22%),
    linear-gradient(90deg, rgba(6,5,3,.35) 0%, rgba(6,5,3,0) 30%, rgba(6,5,3,0) 70%, rgba(6,5,3,.35) 100%);
}
/* 煙：smoke.png を transform / opacity のみで動かす（コンポジタ処理だけで完結し軽量） */
.hero__smoke{
  position:absolute; inset:0; z-index:-1;
  overflow:hidden;
  pointer-events:none; mix-blend-mode:screen;
}
.hero__smoke img{
  position:absolute;
  left:var(--x,60%); bottom:-22%;
  width:var(--w,340px); height:auto;
  margin-left:calc(var(--w,340px) / -2);
  opacity:0;
  animation:puff var(--t,16s) linear infinite;
  animation-delay:var(--d,0s);
  will-change:transform,opacity;
}
.hero__smoke.is-paused img{ animation-play-state:paused; }
@keyframes puff{
  0%  { opacity:0;                    transform:translate3d(0,0,0) scale(.9); }
  16% { opacity:var(--o,.26); }
  55% { opacity:calc(var(--o,.26) * .55); transform:translate3d(-2.5vw,-40vh,0) scale(1.7) rotate(6deg); }
  100%{ opacity:0;                    transform:translate3d(1.5vw,-76vh,0) scale(2.4) rotate(-4deg); }
}
.hero__watermark{
  position:absolute; z-index:-1;
  right:-.06em; bottom:-.18em;
  font-size:clamp(140px,26vw,420px);
  font-weight:700; line-height:1;
  letter-spacing:.02em;
  color:transparent;
  -webkit-text-stroke:1px rgba(201,164,92,.16);
  user-select:none; white-space:nowrap;
}
.hero__body{ max-width:1200px; }
.hero__since{
  font-family:var(--serif-en);
  font-style:italic;
  font-size:clamp(11px,1.3vw,14px);
  letter-spacing:.3em;
  color:var(--gold);
  margin-bottom:clamp(20px,3.2vh,38px);
  opacity:0; transition:opacity 1s ease 1.9s;
}
.hero__title{
  font-size:clamp(30px,5.4vw,72px);
  font-weight:600;
  line-height:1.55;
  letter-spacing:.08em;
  text-shadow:0 4px 40px rgba(0,0,0,.6);
}
.hero__line{ display:block; overflow:hidden; }
.hero__line span{
  display:inline-block;
  transform:translateY(110%);
  transition:transform 1.2s var(--ease);
}
.hero__line:nth-child(2) span{ transition-delay:.18s; }
.hero__sub{
  margin-top:clamp(18px,3vh,30px);
  font-size:clamp(19px,2.8vw,32px);
  letter-spacing:.12em;
  color:#d8d0bf;
}
.hero__subline{
  display:block;
  opacity:0; transform:translateY(16px);
  transition:opacity 1s ease, transform 1s var(--ease);
}
.hero__subline:nth-child(1){ transition-delay:2.1s; }
.hero__subline:nth-child(2){ transition-delay:2.3s; }
.hero__cta{
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:clamp(16px,2.2vw,30px);
  margin-top:clamp(26px,4.4vh,46px);
  opacity:0; transform:translateY(16px);
  transition:opacity 1s ease 2.5s, transform 1s var(--ease) 2.5s;
}
.cta-item{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; position:relative; }
.cta-note{
  font-family:var(--serif-ja);
  font-size:11.5px; letter-spacing:.08em; line-height:1.5;
  color:var(--gold);
  padding-left:3px;
}
.cta-note::before{ content:"― "; opacity:.6; }
/* LINE先行予約の強調フラグ（登録メリット＝一般予約より1週間早い）
   ボタンの“上”に絶対配置：ボタン位置に影響を与えず、2ボタンの上端が揃う */
.cta-flag{
  position:absolute; left:50%; bottom:100%; transform:translateX(-50%);
  margin-bottom:12px; white-space:nowrap;
  padding:5px 15px;
  font-family:var(--serif-ja);
  font-size:11.5px; font-weight:600; letter-spacing:.1em; line-height:1;
  color:#ecd9ad;
  border:1px solid var(--gold-line);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(201,164,92,.16), rgba(201,164,92,.05));
}
.banner__ctanote{
  margin-top:16px;
  font-size:12px; letter-spacing:.06em; line-height:1.6;
  color:var(--gold);
}
body.is-loaded .hero__line span{ transform:translateY(0); }
body.is-loaded .hero__since,
body.is-loaded .hero__subline,
body.is-loaded .hero__cta{ opacity:1; transform:translateY(0); }

.hero__tate{
  position:absolute; top:50%; right:clamp(18px,3.4vw,52px);
  transform:translateY(-58%);
  writing-mode:vertical-rl;
  font-size:clamp(13px,1.4vw,17px);
  letter-spacing:.55em;
  color:rgba(236,229,214,.85);
  padding-top:70px;
  opacity:0; transition:opacity 1.2s ease 2.8s;
}
.hero__tate::before{
  content:""; position:absolute; top:0; left:50%;
  width:1px; height:54px; background:var(--gold);
}
body.is-loaded .hero__tate{ opacity:1; }

.hero__foot{
  position:absolute; left:clamp(20px,5vw,72px); right:clamp(20px,5vw,72px); bottom:28px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  opacity:0; transition:opacity 1.2s ease 2.9s;
}
body.is-loaded .hero__foot{ opacity:1; }
.hero__badges{ display:flex; flex-wrap:wrap; gap:clamp(10px,1.6vw,18px); }
.hero__badges li{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:112px;
  padding:10px 16px 9px;
  border:1px solid var(--gold-line);
  /* backdrop-filterはヒーローのアニメーションと重なると毎フレーム再ブラーが走り重いので不使用 */
  background:rgba(8,7,5,.72);
}
.hero__badges strong{ font-size:13.5px; font-weight:600; letter-spacing:.14em; }
.hero__badges span{ font-size:10.5px; letter-spacing:.18em; color:var(--gold); }
.hero__hours{ text-align:right; white-space:nowrap; }
.hero__time{ font-family:var(--serif-en); font-size:clamp(22px,2.6vw,30px); letter-spacing:.12em; line-height:1.3; }
.hero__note{ font-size:11.5px; letter-spacing:.16em; color:var(--ink-mut); }

.scroll-cue{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  opacity:0; transition:opacity 1s ease 3.2s;
}
body.is-loaded .scroll-cue{ opacity:1; }
.scroll-cue span{
  font-family:var(--serif-en); font-style:italic;
  font-size:11px; letter-spacing:.34em; color:var(--gold);
}
.scroll-cue i{
  width:1px; height:64px;
  background:linear-gradient(180deg,var(--gold),transparent);
  overflow:hidden; position:relative;
}
.scroll-cue i::after{
  content:""; position:absolute; top:-40%; left:0; width:100%; height:40%;
  background:#fff; opacity:.9;
  animation:cue 2.2s ease-in-out infinite;
}
@keyframes cue{ 0%{ top:-40%; } 60%,100%{ top:110%; } }

/* ============================================= hero brand lockup (centered) */
.hero__brand{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(8px,1.5vh,18px);
  opacity:0; transform:translateY(14px);
  transition:opacity 1.3s ease 1.9s, transform 1.3s var(--ease) 1.9s;
}
body.is-loaded .hero__brand{ opacity:1; transform:translateY(0); }
.hero__brand-kicker{
  font-family:var(--serif-ja); font-weight:600;
  font-size:clamp(28px,4.6vw,56px);
  letter-spacing:.24em; color:var(--gold); padding-left:.24em;
}
.hero__brand-name{
  font-family:var(--serif-ja); font-weight:600;
  font-size:clamp(42px,6.4vw,84px); line-height:1.1;
  letter-spacing:.16em; padding-left:.16em;
  text-shadow:0 6px 54px rgba(0,0,0,.55);
}
.hero__brand-en{
  font-family:var(--serif-en); font-style:italic;
  font-size:clamp(12px,1.7vw,21px); letter-spacing:.4em;
  color:var(--gold); padding-left:.4em;
}

/* subtle single reservation dial (bottom-right) */
.hero__reserve{
  position:absolute; right:clamp(18px,3.4vw,54px); bottom:clamp(26px,5vh,60px);
  width:clamp(102px,10vw,130px); height:clamp(102px,10vw,130px);
  display:grid; place-items:center;
  border-radius:50%; border:1px solid var(--gold);
  background:rgba(8,7,5,.55);
  opacity:0;
  transition:opacity 1s ease 2.6s, background .5s var(--ease), transform .5s var(--ease);
}
body.is-loaded .hero__reserve{ opacity:1; }
.hero__reserve:hover{
  background:linear-gradient(100deg,var(--gold-deep),var(--gold));
  transform:scale(1.05);
}
.hero__reserve-in{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.hero__reserve small{
  font-family:var(--serif-en); font-size:12px; letter-spacing:.24em;
  color:var(--gold); transition:color .5s var(--ease);
}
.hero__reserve strong{
  font-family:var(--serif-ja); font-size:14px; font-weight:600; letter-spacing:.12em;
  color:var(--ink); transition:color .5s var(--ease);
}
.hero__reserve:hover small,
.hero__reserve:hover strong{ color:#0d0b07; }

/* ============================================= pre-open info / reservation band */
.pre-open{
  text-align:center;
  padding:clamp(58px,9vh,104px) clamp(20px,5vw,72px);
}
.pre-open__inner{ max-width:940px; margin:0 auto; }
.pre-open__title{
  font-family:var(--serif-ja); font-weight:600;
  font-size:clamp(22px,3vw,34px); letter-spacing:.12em; margin-top:10px;
}
.pre-open__cta{
  display:flex; justify-content:center; flex-wrap:wrap; align-items:flex-start;
  gap:clamp(18px,2.6vw,40px);
  margin-top:clamp(28px,4vh,46px);
  padding-top:44px; /* ボタン上のフラグ用の余白 */
}
.pre-open__cta .cta-item{ align-items:center; }
.pre-open__cta .cta-note{ padding-left:0; }
.pre-open__badges{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(10px,1.6vw,18px);
  margin-top:clamp(34px,5vh,56px);
}
.pre-open__badges li{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:118px; padding:12px 18px;
  border:1px solid var(--gold-line); background:rgba(255,255,255,.02);
}
.pre-open__badges strong{ font-size:13.5px; font-weight:600; letter-spacing:.14em; }
.pre-open__badges span{ font-size:10.5px; letter-spacing:.18em; color:var(--gold); }

/* ============================================= marquee */
.marquee{
  border-top:1px solid var(--gold-line);
  border-bottom:1px solid var(--gold-line);
  padding:18px 0;
  overflow:hidden;
  background:var(--bg);
}
.marquee__track{
  display:flex; width:max-content;
  animation:marquee 36s linear infinite;
}
.marquee__track span{
  font-family:var(--serif-en);
  font-size:clamp(16px,2.2vw,24px);
  font-weight:300;
  letter-spacing:.32em;
  white-space:nowrap;
  color:transparent;
  -webkit-text-stroke:.6px rgba(201,164,92,.75);
}
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ============================================= section base */
.section{
  position:relative;
  padding:clamp(90px,13vh,150px) clamp(20px,5vw,72px);
  max-width:1440px;
  margin:0 auto;
}
.section__ghost{
  position:absolute; top:34px; right:clamp(8px,2vw,30px);
  writing-mode:vertical-rl;
  font-size:clamp(80px,11vw,150px);
  font-weight:700; line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(236,229,214,.07);
  user-select:none; pointer-events:none;
}
.kicker{
  font-family:var(--serif-en); font-style:italic;
  font-size:15px; letter-spacing:.34em;
  color:var(--gold);
  margin-bottom:14px;
}
.kicker::after{
  content:""; display:inline-block;
  width:56px; height:1px; background:var(--gold);
  margin-left:18px; vertical-align:middle;
}
.heading{
  font-size:clamp(26px,3.6vw,44px);
  font-weight:600;
  letter-spacing:.1em;
  line-height:1.6;
}
.lead{ margin-top:18px; color:var(--ink-mut); font-size:clamp(13.5px,1.5vw,15.5px); }
.section__head{ margin-bottom:clamp(48px,7vh,80px); }

/* placeholder note */
.tbd{
  display:inline-block;
  font-family:var(--sans); font-weight:300;
  font-size:.82em; letter-spacing:.08em;
  color:#7d7360;
  border:1px dashed rgba(168,158,138,.4);
  padding:2px 10px;
}

/* ============================================= reveal animations */
.reveal{
  opacity:0; transform:translateY(30px);
  transition:opacity 1s ease, transform 1s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-img{ position:relative; overflow:hidden; }
/* iframe（Google Map）はscaleすると内部レイアウトの計測が狂うため対象外 */
.reveal-img img{ transform:scale(1.12); transition:transform 1.6s var(--ease); }
.reveal-img::after{
  content:""; position:absolute; inset:0;
  background:var(--bg);
  transform:scaleX(1); transform-origin:right;
  transition:transform 1.1s var(--ease);
  z-index:2;
}
.reveal-img.is-visible::after{ transform:scaleX(0); }
.reveal-img.is-visible img{ transform:scale(1.001); }

/* ============================================= about */
.about__grid{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(40px,6vw,90px);
  align-items:center;
}
.about__body{
  font-size:clamp(13.5px,1.5vw,15.5px);
  line-height:2.4;
  color:#cfc7b4;
  text-align:justify;
}
.about__body p{ margin-bottom:1.4em; }
.about__body p:last-child{ margin-bottom:0; }
.about__chef{
  margin-top:26px;
  font-size:clamp(16px,1.9vw,19px);
  font-weight:600; letter-spacing:.14em;
  color:#e7dfce;
}
.about__chef-role{
  display:inline-block; margin-right:.9em;
  font-size:11px; font-weight:500; letter-spacing:.32em;
  color:var(--gold);
  vertical-align:.12em;
}
.about__chef-suffix{ font-size:.72em; letter-spacing:.1em; color:var(--ink-mut); margin-left:.35em; }
/* 役員＋料理長の2名クレジット */
.about__credits{ margin-top:26px; }
.about__credits .about__chef{ margin-top:0; }
.about__credits .about__chef + .about__chef{ margin-top:12px; }
.about__text .heading{ margin-bottom:30px; font-size:clamp(20px,2.6vw,31px); line-height:1.85; }
.about__seal{
  display:inline-block;
  margin-top:20px;
  font-size:12.5px; letter-spacing:.34em;
  color:var(--gold);
  border:1px solid var(--gold-line);
  padding:8px 18px;
}
.about__photos{ position:relative; padding-bottom:120px; }
.about__photo--main{
  width:86%;
  margin-left:auto;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.about__photo--main::before{
  content:""; position:absolute; inset:14px -14px -14px 14px;
  border:1px solid var(--gold-line);
  z-index:-1;
}
.about__photo--main img{ aspect-ratio:4/3; object-fit:cover; filter:saturate(.95); }
.about__photo--sub{
  position:absolute; left:0; bottom:0;
  width:46%;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.about__photo--sub img{ aspect-ratio:3/4; object-fit:cover; filter:saturate(.9) brightness(.95); }

/* ============================================= signature */
.signature .section__head{ text-align:center; }
.signature .kicker::after{ display:none; }
.signature .kicker::before,
.signature .kicker + .heading + .lead{ }
.dish{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(36px,5vw,70px);
  align-items:center;
  margin-bottom:clamp(80px,12vh,130px);
}
.dish:last-child{ margin-bottom:0; }
.dish__photo{
  box-shadow:0 34px 90px rgba(0,0,0,.6);
}
.dish__photo img{
  aspect-ratio:16/11; object-fit:cover;
  filter:brightness(.94) saturate(.96);
  transition:transform 1.6s var(--ease), filter .8s ease;
}
.dish:hover .dish__photo img{ transform:scale(1.05); filter:brightness(1.02) saturate(1.05); }
.dish--rev .dish__photo{ order:2; }
.dish--rev .dish__text{ order:1; text-align:right; }
.dish--rev .dish__num{ margin-left:auto; }
.dish__text{ position:relative; }
.dish__num{
  font-size:clamp(72px,9vw,130px);
  line-height:1;
  font-weight:400;
  color:transparent;
  -webkit-text-stroke:1px rgba(201,164,92,.5);
  margin-bottom:-24px;
  user-select:none;
}
.dish__name{
  font-size:clamp(22px,2.8vw,32px);
  font-weight:600; letter-spacing:.12em;
  margin-bottom:18px;
}
.dish__name::after{
  content:""; display:block;
  width:64px; height:1px;
  background:var(--gold);
  margin-top:20px;
}
.dish--rev .dish__name::after{ margin-left:auto; }
.dish__desc{
  color:#cfc7b4;
  font-size:clamp(13.5px,1.5vw,15px);
  line-height:2.3;
  margin-bottom:22px;
}

/* ============================================= banner (新幹線会食) */
.banner{
  position:relative;
  padding:clamp(110px,18vh,190px) clamp(20px,5vw,72px);
  overflow:hidden;
  text-align:center;
}
.banner__bg{ position:absolute; inset:-12% 0; z-index:-2; }
.banner__bg img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.34) saturate(.85);
}
.banner::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse at center, rgba(6,5,3,.25) 0%, rgba(6,5,3,.82) 100%);
}
.banner__inner{
  max-width:760px; margin:0 auto;
  border:1px solid var(--gold-line);
  padding:clamp(40px,6vw,64px) clamp(24px,5vw,56px);
  background:rgba(8,7,5,.35);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  position:relative;
}
.banner__inner::before{
  content:""; position:absolute; inset:8px;
  border:1px solid rgba(201,164,92,.16);
  pointer-events:none;
}
.banner__kicker{
  font-size:clamp(12.5px,1.5vw,15px);
  letter-spacing:.3em; color:var(--gold);
  margin-bottom:18px;
}
.banner__title{
  font-size:clamp(34px,5.4vw,58px);
  font-weight:600; letter-spacing:.14em;
  margin-bottom:18px;
}
.banner__lead{
  color:#d5cdbc; font-size:clamp(13.5px,1.5vw,15.5px);
  margin-bottom:34px;
}

/* ============================================= instagram */
.insta .section__head{ text-align:center; }
.insta__grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:10px;
}
.insta__item{ position:relative; overflow:hidden; }
.insta__item img{
  aspect-ratio:1; object-fit:cover; width:100%;
  filter:saturate(.9) brightness(.92);
  transition:transform 1s var(--ease), filter .6s ease;
}
.insta__item::before{
  content:"→"; position:absolute; inset:auto 12px 10px auto;
  z-index:2; color:#fff; font-family:var(--serif-en);
  opacity:0; transform:translateX(-8px);
  transition:opacity .5s ease, transform .5s var(--ease);
}
.insta__item::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(6,5,3,.55), transparent 55%);
  opacity:0; transition:opacity .5s ease;
}
.insta__item:hover img{ transform:scale(1.08); filter:saturate(1.05) brightness(1); }
.insta__item:hover::before{ opacity:1; transform:translateX(0); }
.insta__item:hover::after{ opacity:1; }
.insta__more{ text-align:center; margin-top:44px; }

/* ============================================= access */
.access__grid{
  display:grid;
  grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(36px,5vw,72px);
  align-items:stretch;
}
.access__map{
  position:relative; min-height:380px;
  border:1px solid var(--gold-line);
  padding:10px;
  background:var(--bg-2);
}
.access__map iframe{
  width:100%; height:100%; min-height:360px;
  border:0; display:block;
  filter:grayscale(1) invert(.92) contrast(.9) brightness(.9) sepia(.14);
}
.access__mapnote{
  position:absolute; left:22px; bottom:20px;
  font-size:10.5px; letter-spacing:.22em;
  color:var(--ink-mut);
  background:rgba(8,7,5,.8);
  padding:4px 12px;
  pointer-events:none;
}
.access__table div{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:18px;
  padding:20px 6px;
  border-bottom:1px solid rgba(236,229,214,.12);
}
.access__table div:first-child{ border-top:1px solid var(--gold-line); }
.access__table dt{
  color:var(--gold);
  font-size:13.5px; letter-spacing:.24em;
  padding-top:2px;
}
.access__table dd{ font-size:14.5px; letter-spacing:.1em; }
.access__table small{ color:var(--ink-mut); font-size:12px; }

/* ============================================= contact */
.contact{ max-width:900px; }
.contact .section__head{ text-align:center; }
.form{
  border:1px solid var(--gold-line);
  padding:clamp(30px,5vw,56px);
  background:var(--bg-2);
}
.form__row{ margin-bottom:28px; }
.form__label{
  display:flex; align-items:center; gap:10px;
  font-size:14px; letter-spacing:.18em;
  margin-bottom:10px;
}
.req{
  font-style:normal; font-family:var(--sans);
  font-size:10px; letter-spacing:.14em;
  color:#e0b6b6; border:1px solid rgba(140,47,47,.8);
  background:rgba(140,47,47,.22);
  padding:1px 8px;
}
.req--opt{
  color:var(--ink-mut); border-color:rgba(168,158,138,.4);
  background:transparent;
}
.form__input{
  width:100%;
  font-family:var(--serif-ja);
  font-size:15px; letter-spacing:.06em;
  color:var(--ink);
  background:rgba(0,0,0,.35);
  border:1px solid rgba(236,229,214,.18);
  padding:13px 16px;
  transition:border-color .4s ease, box-shadow .4s ease;
}
.form__input:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,164,92,.12);
}
.form__input--area{ resize:vertical; min-height:140px; }
.form__row.has-error .form__input{ border-color:var(--red); }
.form__error{
  display:none;
  font-family:var(--sans); font-weight:300;
  font-size:12px; letter-spacing:.05em;
  color:#d98f8f;
  margin-top:8px;
}
.form__row.has-error .form__error{ display:block; }
.form__submit{ text-align:center; margin-top:36px; }
.form__hint{
  margin-top:14px;
  font-family:var(--sans); font-weight:300;
  font-size:12px; letter-spacing:.08em;
  color:var(--ink-mut);
}
.form__hint.is-sent{ color:var(--gold); }

/* ============================================= footer */
.footer{
  border-top:1px solid var(--gold-line);
  background:#080705;
  padding:clamp(60px,9vh,90px) clamp(20px,5vw,72px) 34px;
}
.footer__upper{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);
  gap:clamp(36px,5vw,72px);
  max-width:1440px; margin:0 auto 56px;
}
.footer__mark{
  display:block;
  width:56px; height:56px;
  object-fit:contain;
  margin-bottom:16px;
}
.footer__name{ font-size:24px; font-weight:600; letter-spacing:.34em; margin-bottom:14px; }
.footer__store{ font-size:13px; color:var(--ink-mut); line-height:2.1; margin-bottom:20px; }
.footer__sns{ display:flex; gap:12px; }
.footer__sns a{
  display:grid; place-items:center;
  min-width:52px; height:32px; padding:0 14px;
  border:1px solid rgba(236,229,214,.25);
  font-family:var(--serif-en); font-size:12px; letter-spacing:.18em;
  transition:border-color .4s, color .4s, background .4s;
}
.footer__sns a:hover{ border-color:var(--gold); color:var(--gold); }
.footer__snsnote{ margin-top:12px; font-size:11.5px; line-height:1.7; color:var(--ink-mut); letter-spacing:.04em; }
.footer__company div{
  display:grid; grid-template-columns:92px 1fr; gap:14px;
  padding:10px 0;
  border-bottom:1px solid rgba(236,229,214,.08);
  font-size:13px;
}
.footer__company dt{ color:var(--gold); letter-spacing:.2em; }
.footer__company dd{ color:#cfc7b4; letter-spacing:.06em; }
.footer__nav{ display:flex; flex-direction:column; gap:14px; }
.footer__nav a{
  position:relative;
  font-size:13.5px; letter-spacing:.16em;
  padding-left:20px;
  transition:color .35s;
}
.footer__nav a::before{
  content:""; position:absolute; left:0; top:50%;
  width:10px; height:1px; background:var(--gold);
  transition:width .35s var(--ease);
}
.footer__nav a:hover{ color:var(--gold); }
.footer__nav a:hover::before{ width:15px; }
.footer__copy{
  text-align:center;
  font-family:var(--serif-en);
  font-size:11.5px; letter-spacing:.3em;
  color:#6d6552;
  padding-top:26px;
  border-top:1px solid rgba(236,229,214,.07);
  max-width:1440px; margin:0 auto;
}

/* ============================================= fixed CTA */
.fixed-cta{
  position:fixed; right:0; bottom:110px; z-index:900;
  display:flex; flex-direction:column; gap:8px;
  transform:translateX(110%);
  transition:transform .7s var(--ease);
}
.fixed-cta.is-shown{ transform:translateX(0); }
.fixed-cta__btn{
  writing-mode:vertical-rl;
  padding:20px 11px;
  font-size:12.5px; letter-spacing:.3em;
  background:rgba(10,9,7,.95);
  border:1px solid var(--gold-line); border-right:0;
  color:var(--ink);
  transition:background .4s, color .4s, padding .4s var(--ease);
}
.fixed-cta__btn:hover{ padding-right:18px; color:var(--gold); }
.fixed-cta__btn--reserve{
  background:linear-gradient(160deg,var(--gold-deep),var(--gold));
  color:#0d0b07; border-color:transparent;
}
.fixed-cta__btn--reserve:hover{ color:#0d0b07; filter:brightness(1.1); }

/* ============================================= responsive */
@media (max-width: 1080px){
  /* 絶対配置のままだとCTAボタンに被るため、通常フローに戻す */
  .hero{ padding-bottom:96px; }
  .hero__foot{
    position:static;
    flex-direction:column; align-items:flex-start; gap:14px;
    margin-top:clamp(36px,6vh,56px);
  }
  .hero__hours{ text-align:left; }
}

@media (max-width: 960px){
  :root{ --header-h: 68px; }
  .menu-toggle{ display:block; }
  .gnav{
    position:fixed; inset:0; z-index:1100;
    flex-direction:column; justify-content:center;
    gap:40px;
    background:rgba(6,5,3,.96);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    opacity:0; visibility:hidden;
    transition:opacity .55s ease, visibility .55s;
  }
  .gnav.is-open{ opacity:1; visibility:visible; }
  .gnav__list{ flex-direction:column; text-align:center; gap:26px; }
  .gnav__ja{ font-size:19px; }
  .gnav__en{ font-size:11px; }
  .about__grid{ grid-template-columns:1fr; }
  .about__photos{ order:-1; padding-bottom:0; }
  /* 絶対配置の重なりが狭幅で過剰になるため、幅比例のオーバーラップに変更 */
  .about__photo--sub{
    position:static;
    width:52%;
    margin-top:-16%;
  }
  .dish,
  .dish--rev{ grid-template-columns:1fr; gap:26px; }
  .dish--rev .dish__photo{ order:0; }
  .dish--rev .dish__text{ order:1; text-align:left; }
  .dish--rev .dish__num{ margin-left:0; }
  .dish--rev .dish__name::after{ margin-left:0; }
  .insta__grid{ grid-template-columns:repeat(3,1fr); }
  .access__grid{ grid-template-columns:1fr; }
  .footer__upper{ grid-template-columns:1fr; gap:40px; }
}

@media (max-width: 640px){
  body{ line-height:1.85; }
  .hero{ padding-bottom:70px; }
  .hero__tate{ display:none; }
  .hero__badges li{ min-width:calc(50% - 5px); flex:1; }
  .hero__watermark{ font-size:clamp(120px,34vw,220px); bottom:-.1em; }
  .scroll-cue{ display:none; }
  .insta__grid{ grid-template-columns:repeat(2,1fr); }
  .access__table div{ grid-template-columns:88px 1fr; }
  .fixed-cta{
    inset:auto 0 0 0;
    flex-direction:row;
    transform:translateY(110%);
  }
  .fixed-cta.is-shown{ transform:translateY(0); }
  .fixed-cta__btn{
    writing-mode:horizontal-tb;
    flex:1; text-align:center;
    padding:15px 6px;
    border:1px solid var(--gold-line); border-bottom:0;
  }
  .fixed-cta__btn:hover{ padding-right:6px; }
  .footer{ padding-bottom:88px; }
}

/* ============================================= reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html{ scroll-behavior:auto; }
  .reveal,.reveal-img::after,.hero__line span,.hero__subline,
  .hero__cta,.hero__since,.hero__tate,.hero__foot,.scroll-cue{
    opacity:1 !important; transform:none !important;
  }
}

/* ============================================================
   フェーズ2：下層ページ（コンセプト / メニュー・ドリンク）
   構成はワイヤーフレーム（2026-07-23）に準拠。
   色・書体・質感はフェーズ1の既存トークンのみを使用し、
   新しい色は一切追加していない：
     背景 --bg / --bg-2 / --bg-3　文字 --ink / --ink-mut
     金   --gold / --gold-deep / --gold-line
     書体 --serif-ja（Shippori Mincho）/ --serif-en（Cormorant Garamond）
============================================================ */

/* --------------------------------------------- 02 ページヒーロー */
.page-hero{
  position:relative;
  min-height:clamp(380px,54vh,560px);
  display:grid; place-items:center;
  padding:calc(var(--header-h) + var(--announce-h) + 40px) clamp(20px,5vw,72px) clamp(52px,7vh,80px);
  overflow:hidden;
  isolation:isolate;
}
.page-hero__bg{ position:absolute; inset:0; z-index:-2; }
.page-hero__img{
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(.82) brightness(.46);
  transform:scale(1.06);
  animation:pageHeroZoom 14s var(--ease) forwards;
}
@keyframes pageHeroZoom{ to{ transform:scale(1); } }
.page-hero__shade{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(70% 70% at 50% 45%, rgba(11,10,8,.28) 0%, rgba(11,10,8,.84) 100%),
    linear-gradient(180deg, rgba(11,10,8,.74) 0%, rgba(11,10,8,0) 34%, rgba(11,10,8,.96) 100%);
}
/* ヒーロー下端の金の細罫（フェーズ1のセクション区切りと同じ質感） */
.page-hero::after{
  content:""; position:absolute; left:50%; bottom:0;
  width:min(88%,1440px); height:1px; transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, var(--gold-line) 22%, var(--gold-line) 78%, transparent);
}
.page-hero__inner{ text-align:center; max-width:920px; }
.page-hero__kicker{
  font-family:var(--serif-en); font-style:italic;
  font-size:clamp(12.5px,1.6vw,16px); letter-spacing:.4em;
  color:var(--gold);
  margin-bottom:22px; padding-left:.4em;
  opacity:0; animation:pageHeroUp .9s var(--ease) .15s forwards;
}
.page-hero__kicker::after{
  content:""; display:block;
  width:64px; height:1px; margin:20px auto 0;
  background:var(--gold-line);
}
.page-hero__title{
  font-size:clamp(26px,4.4vw,50px);
  font-weight:600; letter-spacing:.13em; line-height:1.62;
  text-shadow:0 6px 40px rgba(0,0,0,.55);
  opacity:0; animation:pageHeroUp 1.1s var(--ease) .3s forwards;
}
.page-hero__lead{
  margin-top:clamp(20px,3vh,28px);
  color:var(--ink-mut);
  font-size:clamp(12.5px,1.45vw,15px); line-height:2; letter-spacing:.09em;
  opacity:0; animation:pageHeroUp 1.1s var(--ease) .5s forwards;
}
@keyframes pageHeroUp{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:translateY(0); } }

/* --------------------------------------------- パンくず */
.crumb{
  max-width:1440px; margin:0 auto;
  padding:26px clamp(20px,5vw,72px) 0;
}
.crumb__list{
  /* 既存の list-style 解除は ul のみに効いているため、ol にも明示的に指定。
     未指定だと 1. 2. の番号が出てテキストと重なる。 */
  list-style:none;
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  font-family:var(--sans); font-weight:300;
  font-size:11.5px; letter-spacing:.16em;
  color:var(--ink-mut);
}
.crumb__list li + li::before{ content:"／"; margin-right:12px; opacity:.5; }
.crumb__list a{ color:var(--ink-mut); transition:color .4s ease; }
.crumb__list a:hover{ color:var(--gold); }
.crumb__list [aria-current="page"]{ color:var(--gold); }

/* --------------------------------------------- 03 店舗紹介（About／詳細） */
.abt__grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(40px,6vw,88px); align-items:start;
}
.abt__item{
  display:grid; grid-template-columns:54px 1fr;
  gap:8px;
  padding-bottom:32px; margin-bottom:32px;
  border-bottom:1px solid var(--gold-line);
}
.abt__item:last-of-type{ border-bottom:0; padding-bottom:0; margin-bottom:0; }
.abt__num{
  font-family:var(--serif-en);
  font-size:clamp(22px,2.6vw,30px); line-height:1.25;
  color:var(--gold);
}
.abt__label{
  font-size:clamp(16px,1.9vw,20px); font-weight:600; letter-spacing:.2em;
  margin-bottom:12px;
}
/* 小見出しに寄り添う金の短い罫（フェーズ1の kicker と同じ手法） */
.abt__label::after{
  content:""; display:inline-block;
  width:38px; height:1px; background:var(--gold-line);
  margin-left:16px; vertical-align:middle;
}
.abt__body p{ font-size:14px; line-height:2.05; color:var(--ink-mut); }
.abt__note{
  margin-top:30px;
  font-family:var(--sans); font-weight:300;
  font-size:11.5px; letter-spacing:.08em; color:#7d7360;
}
.abt__photos{ display:flex; flex-direction:column; gap:clamp(20px,3vh,32px); }
.abt__photo img{ width:100%; aspect-ratio:16/10; object-fit:cover; filter:saturate(.92); }
.abt__cap{
  display:block; margin-top:10px;
  font-size:11px;
}

/* --------------------------------------------- 04 料理コンセプト（Philosophy） */
.philo__main{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(32px,4.5vw,64px); align-items:center;
  margin-bottom:clamp(44px,6vh,72px);
}
.philo__photo img{ width:100%; aspect-ratio:4/3; object-fit:cover; filter:saturate(.95); }
.philo__lead{
  font-size:clamp(15px,1.9vw,20px);
  line-height:2.15; letter-spacing:.1em;
}

.pcards{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,32px);
}
.pcard{
  position:relative;
  border:1px solid var(--gold-line);
  padding:clamp(26px,2.9vw,36px);
  background:linear-gradient(180deg, rgba(201,164,92,.045), rgba(201,164,92,0));
  transition:border-color .5s ease, background .5s ease;
}
.pcard:hover{ border-color:rgba(201,164,92,.5); background:linear-gradient(180deg, rgba(201,164,92,.09), rgba(201,164,92,0)); }
.pcard__num{
  font-family:var(--serif-en);
  font-size:clamp(20px,2.2vw,26px); line-height:1;
  color:var(--gold);
  margin-bottom:16px;
}
.pcard__title{
  font-size:clamp(17px,1.9vw,21px); font-weight:600; letter-spacing:.2em;
}
.pcard__desc{
  margin-top:14px;
  font-size:13px; line-height:2; color:var(--ink-mut);
}

/* --------------------------------------------- 05 料理長紹介（Chef） */
.chef__grid{
  display:grid; grid-template-columns:auto 1fr;
  gap:clamp(36px,5vw,72px); align-items:center;
}
/* 顔写真は未支給のため、ワイヤー同様に円形のプレースホルダーで示す */
.chef__ph{
  width:clamp(170px,19vw,230px); aspect-ratio:1;
  border-radius:50%;
  border:1px dashed rgba(201,164,92,.45);
  background:radial-gradient(60% 60% at 50% 40%, rgba(201,164,92,.09), rgba(201,164,92,0));
  display:grid; place-items:center;
}
.chef__ph-text{
  font-family:var(--sans); font-weight:300;
  font-size:12.5px; line-height:2; letter-spacing:.14em;
  color:var(--ink-mut); text-align:center;
}
.chef__ph-text small{ font-size:10.5px; opacity:.75; }
.chef__role{
  font-family:var(--serif-en); font-style:italic;
  font-size:13px; letter-spacing:.3em; color:var(--gold);
  margin-bottom:12px;
}
.chef__name{
  font-size:clamp(24px,3.2vw,36px); font-weight:600; letter-spacing:.18em;
}
.chef__name-en{
  display:block; margin-top:12px;
  font-family:var(--serif-en); font-style:italic; font-weight:400;
  font-size:.38em; letter-spacing:.24em; color:var(--ink-mut);
}
.chef__check{ margin-top:24px; }
.chef__draft{
  margin-top:20px; padding:18px 22px;
  border-left:2px solid var(--gold-line);
  background:rgba(236,229,214,.03);
  font-size:13.5px; line-height:2; color:var(--ink-mut);
}
.chef__draft-label{
  display:inline-block; margin-right:12px;
  font-family:var(--sans); font-weight:500;
  font-size:11px; letter-spacing:.16em; color:var(--gold);
  border:1px solid var(--gold-line); padding:3px 10px;
}

/* --------------------------------------------- 相互導線ブロック */
.crosslink-sec{ padding-top:0; }
.crosslink{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(24px,4vw,48px); flex-wrap:wrap;
  border:1px solid var(--gold-line);
  padding:clamp(28px,4vw,46px);
  background:linear-gradient(120deg, rgba(201,164,92,.05), rgba(201,164,92,0) 60%);
  transition:border-color .5s ease, background .5s ease;
}
.crosslink:hover{ border-color:rgba(201,164,92,.55); background:linear-gradient(120deg, rgba(201,164,92,.1), rgba(201,164,92,0) 60%); }
.crosslink__en{
  display:block;
  font-family:var(--serif-en); font-style:italic;
  font-size:12.5px; letter-spacing:.3em; color:var(--gold);
  margin-bottom:10px;
}
.crosslink__title{
  display:block;
  font-size:clamp(20px,2.6vw,28px); font-weight:600; letter-spacing:.2em;
}
.crosslink__desc{
  display:block; margin-top:12px;
  font-size:13px; line-height:1.95; color:var(--ink-mut);
}
.crosslink__btn{
  display:inline-flex; align-items:center; gap:14px;
  flex:0 0 auto;
  border:1px solid var(--gold);
  color:var(--gold);
  padding:15px 34px;
  font-size:13.5px; letter-spacing:.18em;
  transition:background .5s var(--ease), color .5s ease;
}
.crosslink:hover .crosslink__btn{ background:var(--gold); color:#0d0b07; }
.crosslink__arrow{ transition:transform .45s var(--ease); }
.crosslink:hover .crosslink__arrow{ transform:translateX(6px); }

/* --------------------------------------------- メニュー・ドリンク */
.menu-sec .section__head{ margin-bottom:clamp(38px,5vh,56px); }

.mgroup{
  border-top:1px solid var(--gold-line);
  padding-top:26px;
  margin-bottom:clamp(44px,5.5vh,64px);
}
.mgroup:last-of-type{ margin-bottom:0; }
.mgroup__head{
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:12px;
  margin-bottom:20px;
}
.mgroup__title{
  font-size:clamp(18px,2.1vw,24px); font-weight:600; letter-spacing:.22em;
}

.mlist{ display:flex; flex-direction:column; }
.mitem{
  display:flex; align-items:baseline; gap:14px;
  padding:17px 0;
  border-bottom:1px dashed rgba(201,164,92,.16);
}
.mitem:last-child{ border-bottom:0; }
.mitem__name{
  flex:0 0 auto;
  font-size:clamp(14.5px,1.7vw,17px); font-weight:500; letter-spacing:.12em;
}
.mitem__desc{
  flex:0 1 auto;
  font-size:12.5px; line-height:1.8; color:var(--ink-mut);
}
/* 品名と価格をつなぐリーダー罫（お品書きらしい表情に） */
.mitem__leader{
  flex:1 1 40px; min-width:24px;
  height:1px; align-self:flex-end; margin-bottom:.42em;
  background-image:linear-gradient(90deg, rgba(201,164,92,.34) 0 3px, transparent 3px 7px);
  background-size:7px 1px;
}
.mitem__price{
  flex:0 0 auto;
  font-family:var(--serif-en);
  font-size:14px; letter-spacing:.1em; color:var(--gold);
  white-space:nowrap;
}

.mnote{
  margin-top:clamp(32px,4vh,48px);
  border-top:1px solid var(--gold-line);
  padding-top:22px;
  font-family:var(--sans); font-weight:300;
  font-size:12px; line-height:2.1; letter-spacing:.06em;
  color:var(--ink-mut);
}
.mnote li{ padding-left:1.2em; text-indent:-1.2em; }
.mnote li::before{ content:"※ "; color:var(--gold); }

/* --------------------------------------------- ご予約導線（全ページ共通CTA帯） */
.cta-band{
  position:relative;
  border-top:1px solid var(--gold-line);
  background:linear-gradient(180deg, rgba(27,23,16,.6), rgba(11,10,8,1));
  padding:clamp(68px,9vh,110px) clamp(20px,5vw,72px);
  text-align:center;
}
.cta-band__inner{ max-width:840px; margin:0 auto; }
.cta-band .kicker{ display:inline-block; }
.cta-band__title{
  font-size:clamp(23px,3vw,36px); font-weight:600; letter-spacing:.14em;
  margin-top:6px;
}
.cta-band .pre-open__cta{ margin-top:clamp(30px,4vh,42px); }
.cta-band__memo{
  margin-top:clamp(28px,3.5vh,40px);
  font-family:var(--sans); font-weight:300;
  font-size:11.5px; letter-spacing:.08em; color:#7d7360;
}

/* --------------------------------------------- トップ 05 各ページへの導線（フェーズ2で追加） */
.explore__grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(20px,2.6vw,36px);
}
.ecard{
  position:relative; display:block;
  border:1px solid var(--gold-line);
  background:linear-gradient(180deg, rgba(201,164,92,.045), rgba(201,164,92,0));
  transition:border-color .5s ease;
}
.ecard:hover{ border-color:rgba(201,164,92,.55); }
.ecard__photo{ overflow:hidden; }
.ecard__photo img{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  filter:saturate(.85) brightness(.6);
  transition:transform 1.6s var(--ease), filter .7s ease;
}
.ecard:hover .ecard__photo img{ transform:scale(1.05); filter:saturate(.95) brightness(.72); }
.ecard__body{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:clamp(24px,3vw,36px);
}
.ecard__en{
  font-family:var(--serif-en); font-style:italic;
  font-size:12.5px; letter-spacing:.3em; color:var(--gold);
  margin-bottom:10px;
}
.ecard__ja{
  font-size:clamp(19px,2.4vw,27px); font-weight:600; letter-spacing:.2em;
}
.ecard__desc{
  margin-top:14px;
  font-size:13px; line-height:1.95; color:var(--ink-mut);
}
.ecard__btn{
  display:inline-flex; align-items:center; gap:12px;
  margin-top:24px;
  border:1px solid var(--gold-line);
  color:var(--ink);
  padding:12px 28px;
  font-size:13px; letter-spacing:.18em;
  transition:background .5s var(--ease), color .5s ease, border-color .5s ease;
}
.ecard:hover .ecard__btn{ background:var(--gold); border-color:var(--gold); color:#0d0b07; }
.ecard__arrow{ transition:transform .45s var(--ease); }
.ecard:hover .ecard__arrow{ transform:translateX(6px); }

/* --------------------------------------------- 下層ページ：レスポンシブ */
@media (max-width: 1080px){
  .gnav__list{ gap:clamp(14px,2.2vw,26px); }
}

@media (max-width: 960px){
  .abt__grid{ grid-template-columns:1fr; }
  .abt__photos{ order:-1; flex-direction:row; }
  .abt__photo{ flex:1; }
  .philo__main{ grid-template-columns:1fr; }
  .pcards{ grid-template-columns:1fr; }
  .chef__grid{ grid-template-columns:1fr; justify-items:start; }
  .crosslink{ flex-direction:column; align-items:flex-start; }
  .explore__grid{ grid-template-columns:1fr; }
}

@media (max-width: 640px){
  .page-hero{ min-height:clamp(320px,48vh,420px); }
  .abt__photos{ flex-direction:column; }
  .abt__item{ grid-template-columns:38px 1fr; }
  /* 狭幅ではリーダー罫を省き、価格を下段に回す */
  .mitem{ flex-wrap:wrap; gap:6px 12px; }
  .mitem__leader{ display:none; }
  .mitem__name{ flex:1 1 100%; }
  .mitem__desc{ flex:1 1 auto; }
  .mitem__price{ margin-left:auto; }
  .crosslink__btn{ width:100%; justify-content:center; }
}

@media (prefers-reduced-motion: reduce){
  .page-hero__img,
  .page-hero__kicker,
  .page-hero__title,
  .page-hero__lead{ opacity:1 !important; animation:none !important; transform:none !important; }
}

/* トップ 03 店舗紹介：コンセプトページへの導線ボタン */
.about__more{ margin-top:30px; }

/* トップ 06 Instagram：連携前の注記 */
.insta__memo{
  margin-top:26px; text-align:center;
  font-family:var(--sans); font-weight:300;
  font-size:11.5px; line-height:2; letter-spacing:.06em;
  color:#7d7360;
}
.insta__memo .tbd{ margin-left:10px; }

/* ============================================================
   スマホ：カード類を横スライド（スワイプ）化
   縦に積み上がって画面が間延びするのを防ぐ。
   JSは使わず CSS の scroll-snap のみ。指で払うと1枚ずつ吸着する。
   対象：トップの導線カード／コンセプトの3カード／Instagramの6枚
   ※ 画面端までは広げない。負のマージンで広げると文書全体が
     横に伸び、中央寄せの本文やボタンが右にずれて切れるため。
============================================================ */
.swipe-hint{ display:none; }

@media (max-width: 960px){
  .explore__grid,
  .pcards{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:84%;
    gap:14px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .explore__grid::-webkit-scrollbar,
  .pcards::-webkit-scrollbar{ display:none; }
  .ecard,
  .pcard{ scroll-snap-align:start; }
  /* スライドしても高さがガタつかないよう揃える */
  .pcard{ display:flex; flex-direction:column; }

  .swipe-hint{
    display:block; margin-top:20px; text-align:center;
    font-family:var(--sans); font-weight:300;
    font-size:11px; letter-spacing:.18em; color:#7d7360;
  }
  .swipe-hint::before{ content:"←"; color:var(--gold); margin-right:.9em; }
  .swipe-hint::after{ content:"→"; color:var(--gold); margin-left:.9em; }
}

@media (max-width: 640px){
  .explore__grid,
  .pcards{ grid-auto-columns:88%; }

  .insta__grid{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:48%;
    gap:10px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .insta__grid::-webkit-scrollbar{ display:none; }
  .insta__item{ scroll-snap-align:start; }
}

/* ============================================================
   Instagram 最新投稿フィード（検証用 / concept.html）
   /api/instagram-feed から取得した投稿を並べる。
   角丸は使わない（サイト全体が角のあるデザインのため）。
============================================================ */
.ig-feed{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
}
.ig-feed__item{
  position:relative; overflow:hidden;
  border:1px solid var(--gold-line);
  opacity:0;
  animation:igFeedIn .8s var(--ease) forwards;
}
/* 5枚が順にふわっと出るように少しずつ遅らせる */
.ig-feed__item:nth-child(1){ animation-delay:.00s; }
.ig-feed__item:nth-child(2){ animation-delay:.08s; }
.ig-feed__item:nth-child(3){ animation-delay:.16s; }
.ig-feed__item:nth-child(4){ animation-delay:.24s; }
.ig-feed__item:nth-child(5){ animation-delay:.32s; }
@keyframes igFeedIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }

.ig-feed__item img{
  display:block; width:100%;
  aspect-ratio:1/1; object-fit:cover;
  filter:saturate(.9) brightness(.92);
  transition:transform 1s var(--ease), filter .6s ease;
}
.ig-feed__item::after{
  content:"↗"; position:absolute; inset:auto 10px 8px auto;
  font-size:13px; color:var(--gold);
  opacity:0; transition:opacity .4s ease;
}
.ig-feed__item:hover img{ transform:scale(1.07); filter:saturate(1.02) brightness(1); }
.ig-feed__item:hover::after{ opacity:1; }

/* 未連携・取得失敗・読み込み中の案内 */
.ig-feed__status{
  margin-top:22px; text-align:center;
  font-family:var(--sans); font-weight:300;
  font-size:12px; letter-spacing:.08em; color:#7d7360;
  border:1px dashed rgba(168,158,138,.35);
  padding:18px 16px;
}
.ig-feed__status[hidden]{ display:none; }
/* 投稿が並んだら枠線の案内は不要 */
.ig-feed.is-loaded + .ig-feed__status{ border:0; padding:0; }

.ig-feed__more{ text-align:center; margin-top:40px; }

@media (max-width: 960px){
  .ig-feed{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 640px){
  .ig-feed{ grid-template-columns:repeat(2,1fr); }
}
@media (prefers-reduced-motion: reduce){
  .ig-feed__item{ opacity:1; animation:none; }
}

/* ============================================================
   コース表示（お料理）
   コース名・価格・構成（先付け〜余韻）・アレルゲンを1枚にまとめる
============================================================ */
.course{
  padding:clamp(26px,3vw,36px) 0;
  border-bottom:1px dashed rgba(201,164,92,.18);
}
.course:last-of-type{ border-bottom:0; padding-bottom:0; }

.course__head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:16px;
  margin-bottom:clamp(18px,2.4vh,26px);
}
.course__name{
  flex:0 0 auto;
  font-size:clamp(17px,2vw,22px); font-weight:600; letter-spacing:.16em;
}
/* コース名と価格をつなぐリーダー罫 */
.course__head::after{
  content:""; order:1; flex:1 1 40px; min-width:20px;
  height:1px; align-self:flex-end; margin-bottom:.5em;
  background-image:linear-gradient(90deg, rgba(201,164,92,.3) 0 3px, transparent 3px 7px);
  background-size:7px 1px;
}
.course__price{
  order:2; flex:0 0 auto; text-align:right;
  font-family:var(--serif-en);
  font-size:clamp(19px,2.2vw,25px); letter-spacing:.05em; color:var(--gold);
  white-space:nowrap;
}
.course__price small{ font-size:.56em; margin-left:3px; letter-spacing:.1em; }
.course__price-in{
  display:block; margin-top:5px;
  font-family:var(--sans); font-weight:300;
  font-size:11px; letter-spacing:.06em; color:var(--ink-mut);
}
.course__lead{
  margin:-8px 0 22px;
  font-size:13px; line-height:1.95; color:var(--ink-mut);
}

.course__list{ display:flex; flex-direction:column; gap:13px; }
.course__row{
  display:grid; grid-template-columns:150px 1fr;
  gap:20px; align-items:baseline;
}
.course__row dt{
  font-size:12.5px; letter-spacing:.14em; color:var(--gold);
  line-height:1.7;
}
.course__row dd{ font-size:14px; line-height:1.9; }

/* アレルゲン表記 */
.course__alg{
  display:inline-block; margin-left:12px;
  font-family:var(--sans); font-weight:300;
  font-size:10.5px; letter-spacing:.1em; color:var(--ink-mut);
  border:1px solid var(--gold-line); padding:1px 8px;
  vertical-align:.14em; white-space:nowrap;
}
.course__alg::before{ content:"アレルゲン："; opacity:.7; }
/* 2つ目以降のアレルゲン表記（「アレルゲン：」の見出しは重ねない） */
.course__alg--sub::before{ content:none; }
.course__alg--sub{ margin-left:6px; }

/* 「又は」で選べる品 */
.course__alt{ display:block; }
.course__or{
  display:block; margin:5px 0;
  font-size:11.5px; letter-spacing:.24em; color:var(--ink-mut);
}
.course__note{
  margin-top:20px;
  font-family:var(--sans); font-weight:300;
  font-size:11.5px; line-height:1.9; letter-spacing:.06em; color:#7d7360;
}

@media (max-width: 640px){
  .course__head{ gap:4px 12px; }
  .course__head::after{ display:none; }
  .course__name{ flex:1 1 100%; }
  .course__price{ order:0; margin-left:0; text-align:left; }
  .course__price-in{ display:inline-block; margin:0 0 0 10px; }
  .course__row{ grid-template-columns:1fr; gap:3px; }
  .course__alg{ margin-left:0; margin-top:6px; }
}

/* 個室のミニマムチャージ（コンセプト：店舗紹介内） */
.minimum{
  margin-top:34px; padding:clamp(22px,2.6vw,30px);
  border:1px solid var(--gold-line);
  background:linear-gradient(180deg, rgba(201,164,92,.05), rgba(201,164,92,0));
}
.minimum__title{
  font-size:clamp(15px,1.8vw,18px); font-weight:600; letter-spacing:.2em;
  margin-bottom:14px;
}
.minimum__lead{ font-size:13px; line-height:1.95; color:var(--ink-mut); }
.minimum__list{
  margin-top:20px; padding-top:18px;
  border-top:1px solid var(--gold-line);
  display:flex; flex-direction:column; gap:11px;
}
.minimum__list > div{
  display:flex; align-items:baseline; gap:14px;
}
.minimum__list dt{
  flex:0 0 auto;
  font-size:13px; letter-spacing:.14em;
}
/* 品目と金額をつなぐリーダー罫 */
.minimum__list > div::after{
  content:""; order:1; flex:1 1 20px;
  height:1px; margin-bottom:.35em;
  background-image:linear-gradient(90deg, rgba(201,164,92,.3) 0 3px, transparent 3px 7px);
  background-size:7px 1px;
}
.minimum__list dd{
  order:2; flex:0 0 auto;
  font-family:var(--serif-en); font-size:16px; letter-spacing:.05em; color:var(--gold);
  white-space:nowrap;
}
.minimum__list dd small{ font-size:.62em; margin-left:2px; }
.minimum__note{
  margin-top:16px;
  font-family:var(--sans); font-weight:300;
  font-size:11px; letter-spacing:.06em; color:#7d7360;
}

/* お飲み物：品目未確定のあいだのカテゴリ紹介 */
.drink-cats{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,32px);
}
.drink-cat{
  border-top:1px solid var(--gold-line);
  padding-top:24px;
}
.drink-cat__title{
  font-size:clamp(16px,1.9vw,20px); font-weight:600; letter-spacing:.2em;
}
.drink-cat__desc{
  margin-top:12px;
  font-size:13px; line-height:1.95; color:var(--ink-mut);
}
@media (max-width: 640px){
  .drink-cats{ grid-template-columns:1fr; gap:0; }
  .drink-cat{ padding:20px 0; }
}

/* 撮影素材の写真列（お料理・お飲み物） */
.shots{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,1.4vw,18px);
  margin-bottom:clamp(44px,6vh,72px);
}
.shots--2{ grid-template-columns:repeat(2,1fr); }
.shots__item{ overflow:hidden; }
.shots__item img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  filter:saturate(.96);
  transition:transform 1.4s var(--ease);
}
.shots__item:hover img{ transform:scale(1.05); }
@media (max-width: 960px){
  .shots{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px){
  .shots--2{ grid-template-columns:1fr; }
}

/* 導線カードが1枚だけのときは中央に寄せる（コンセプト非表示時） */
.explore__grid:has(.ecard:only-child){
  grid-template-columns:minmax(0,760px);
  justify-content:center;
}

/* 原稿未受領の箇所を示す「準備中」表示 */
.wip{
  display:inline-block;
  border:1px dashed rgba(168,158,138,.35);
  padding:9px 20px;
  font-family:var(--sans); font-weight:300;
  font-size:12px; letter-spacing:.18em;
  color:#8a8069;
}
.wip--sm{ padding:7px 16px; font-size:11.5px; }
.about__body .wip + .wip{ margin-top:1.4em; }
.chef__text-body{ margin-top:24px; }

/* ============================================================
   ワインリスト（シャンパーニュ／赤／白）
   ヴィンテージ・銘柄（英/和）・生産者（英/和）・価格の4列
============================================================ */
.wlist{ display:flex; flex-direction:column; }
.wine{
  display:grid;
  grid-template-columns:52px minmax(0,1.1fr) minmax(0,.9fr) auto;
  gap:4px 20px; align-items:baseline;
  padding:14px 0;
  border-bottom:1px dashed rgba(201,164,92,.14);
}
.wine:last-child{ border-bottom:0; }
.wine__vintage{
  font-family:var(--serif-en);
  font-size:13.5px; letter-spacing:.06em; color:var(--gold);
  white-space:nowrap;
}
.wine__main,.wine__sub{ display:block; min-width:0; }
.wine__name{
  display:block;
  font-size:14.5px; letter-spacing:.06em; line-height:1.6;
}
.wine__name-ja{
  display:block; margin-top:3px;
  font-size:11.5px; letter-spacing:.08em; color:var(--ink-mut);
}
.wine__sub-en{
  display:block;
  font-family:var(--serif-en);
  font-size:13px; letter-spacing:.04em; color:var(--ink-mut);
}
.wine__sub-ja{
  display:block; margin-top:3px;
  font-size:11px; letter-spacing:.06em; color:#7d7360;
}
.wine__price{
  font-family:var(--serif-en);
  font-size:14.5px; letter-spacing:.05em; color:var(--gold);
  text-align:right; white-space:nowrap;
}

@media (max-width: 960px){
  .wine{ grid-template-columns:46px minmax(0,1fr) auto; gap:4px 14px; }
  /* 生産者は銘柄の下へ回す */
  .wine__sub{ grid-column:2; }
  .wine__price{ grid-row:1; grid-column:3; }
}
@media (max-width: 640px){
  .wine{ grid-template-columns:1fr auto; }
  .wine__vintage{ grid-column:1; grid-row:1; font-size:12px; }
  .wine__main{ grid-column:1; grid-row:2; }
  .wine__sub{ grid-column:1; grid-row:3; }
  .wine__price{ grid-column:2; grid-row:1 / span 3; align-self:center; }
}

/* グラス提供ドリンクの価格（本体＋税込を2段で） */
.mitem__price-in{
  display:block; margin-top:3px;
  font-family:var(--sans); font-weight:300;
  font-size:10.5px; letter-spacing:.04em; color:var(--ink-mut);
  text-align:right;
}
.mitem__price small{ font-size:.62em; margin-left:2px; }

/* テーマ専用：予約受付前の無効化ボタン */
.btn.btn-disabled{ opacity:.5; pointer-events:none; }