/* 炭火と酒肴 えん — Shoplit sample (premium) */
:root{
  --paper:#F2ECE1;
  --paper-2:#E8DFD0;
  --sumi:#1D1A17;
  --sumi-2:#2B2621;
  --shu:#B23A2B;
  --stone:#776D62;
  --line:#D6CBBB;
  --mincho:"Zen Old Mincho",serif;
  --gothic:"Zen Kaku Gothic New",system-ui,sans-serif;
  --wrap:1120px;
  --bar:0px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{background:var(--paper);color:var(--sumi);font-family:var(--gothic);font-size:16px;line-height:1.95;letter-spacing:.05em;-webkit-font-smoothing:antialiased;padding-bottom:var(--bar);word-break:auto-phrase}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit}
:focus-visible{outline:2px solid var(--shu);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.br-sp{display:none}

/* header */
.site-head{position:sticky;top:0;z-index:40;background:rgba(29,26,23,.96);color:var(--paper);backdrop-filter:blur(6px)}
.site-head .wrap{display:flex;align-items:center;gap:18px;height:76px;max-width:1240px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo .mark{width:40px;height:40px;border-radius:50%;background:var(--shu);color:#fff;display:grid;place-items:center;font-family:var(--mincho);font-weight:700;font-size:22px;line-height:1}
.logo .name{font-family:var(--mincho);line-height:1.3}
.logo .name small{display:block;font-size:11px;letter-spacing:.3em;color:#cfc4b4}
.logo .name b{font-size:20px;font-weight:700;letter-spacing:.2em}
.sample{font-size:11px;font-weight:500;letter-spacing:.14em;border:1px solid #cfc4b4;color:#cfc4b4;border-radius:4px;padding:0 7px}
.nav{margin-left:auto;display:flex;gap:22px;font-size:14px}
.nav a{text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--shu)}
.head-cta{display:inline-flex;align-items:center;gap:8px;background:var(--shu);color:#fff;text-decoration:none;font-size:14px;letter-spacing:.1em;padding:10px 20px;border-radius:4px;white-space:nowrap}
.menu-toggle{display:none;margin-left:auto;background:none;border:0;width:48px;height:48px;cursor:pointer}
.menu-toggle span{display:block;width:26px;height:2px;background:var(--paper);margin:7px auto;transition:transform .25s,opacity .25s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* hero */
.hero{position:relative;height:min(86vh,820px);min-height:540px;color:#fff;overflow:hidden;background:var(--sumi)}
.hero img{position:absolute;inset:0;object-position:70% 50%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,16,12,.8) 0%,rgba(20,16,12,.4) 40%,rgba(20,16,12,.05) 68%)}
.hero-body{position:relative;z-index:2;height:100%;max-width:1240px;margin:0 auto;padding:0 40px;display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:36px}
.hero h1{writing-mode:vertical-rl;font-family:var(--mincho);font-weight:700;font-size:clamp(40px,5vw,68px);letter-spacing:.24em;line-height:1.5}
.hero .sub{writing-mode:vertical-rl;font-size:16px;letter-spacing:.3em;color:#e8dfd0;align-self:center;margin-top:120px}
.hero .info{position:absolute;right:40px;text-align:right;bottom:40px;z-index:2;font-size:14px;letter-spacing:.12em;color:#e8dfd0;line-height:1.8}
.hero .info b{display:block;font-family:var(--mincho);font-size:22px;color:#fff;letter-spacing:.16em}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font-size:15px;letter-spacing:.1em;padding:14px 30px;border-radius:4px;border:1px solid var(--sumi);background:var(--sumi);color:var(--paper);transition:background .2s,color .2s}
.btn:hover{background:transparent;color:var(--sumi)}
.btn.shu{background:var(--shu);border-color:var(--shu);color:#fff}
.btn.shu:hover{background:transparent;color:var(--shu)}
.btn.ghost{background:transparent;color:var(--sumi)}
.btn.ghost:hover{background:var(--sumi);color:var(--paper)}

/* sections */
section{padding:104px 0}
.dark{background:var(--sumi);color:var(--paper)}
.tint{background:var(--paper-2)}
.h2{font-family:var(--mincho);font-weight:700;font-size:clamp(26px,3vw,36px);letter-spacing:.16em;line-height:1.5;margin-bottom:12px}
.h2-lead{color:var(--stone);margin-bottom:56px}
.dark .h2-lead{color:#bdb2a3}
.center{text-align:center}
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.photo{overflow:hidden;background:var(--sumi-2)}

/* signature: wooden menu tags (品書き) */
.fuda-wrap{display:flex;flex-direction:row-reverse;gap:14px;justify-content:center;flex-wrap:wrap}
.fuda{writing-mode:vertical-rl;background:#E9DCC4;color:var(--sumi);border:1px solid #CDB894;box-shadow:inset 0 0 0 4px #E9DCC4,inset 0 0 0 5px #CDB894;padding:22px 10px 18px;min-height:280px;width:62px;display:flex;justify-content:space-between;align-items:center;font-family:var(--mincho);text-decoration:none}
.fuda b{font-size:21px;font-weight:700;letter-spacing:.18em}
.fuda span{font-size:15px;letter-spacing:.06em}
.fuda.red{background:var(--shu);color:#fff;border-color:#8f2c20;box-shadow:inset 0 0 0 4px var(--shu),inset 0 0 0 5px #e39b90}
.fuda-note{text-align:center;font-size:13px;color:#bdb2a3;margin-top:28px}

/* food cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card .photo{aspect-ratio:1}
.card h3{font-family:var(--mincho);font-weight:700;font-size:21px;letter-spacing:.1em;margin-top:16px;display:flex;justify-content:space-between;gap:12px}
.card h3 .yen{font-family:var(--gothic);font-weight:500;font-size:16px;color:var(--shu);white-space:nowrap}
.card p{font-size:14px;color:var(--stone);margin-top:4px}

/* points */
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.points div{padding:32px 28px;border-right:1px solid var(--line)}
.points div:last-child{border-right:0}
.points h3{font-family:var(--mincho);font-size:21px;letter-spacing:.12em;margin-bottom:10px}
.points h3 em{font-style:normal;color:var(--shu);margin-right:8px}

/* instagram auto */
.ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.ig-grid a{aspect-ratio:1;overflow:hidden;display:block;background:var(--sumi-2)}
.ig-grid img{transition:transform .5s}
.ig-grid a:hover img{transform:scale(1.05)}
.ig-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.badge{display:inline-block;font-size:12px;letter-spacing:.08em;border:1px solid var(--shu);color:var(--shu);border-radius:999px;padding:2px 12px;margin-left:10px;vertical-align:middle}
.note{font-size:13px;color:var(--stone);margin-top:16px}

/* reserve band */
.reserve{background:var(--shu);color:#fff;padding:64px 0}
.reserve .wrap{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.reserve h2{font-family:var(--mincho);font-size:28px;letter-spacing:.14em}
.reserve p{font-size:14px;opacity:.9}
.reserve .tel{font-family:var(--mincho);font-size:30px;letter-spacing:.08em;text-decoration:none;display:block}
.reserve .btn{background:#fff;color:var(--shu);border-color:#fff}
.reserve .btn:hover{background:transparent;color:#fff}

/* page head */
.page-head{background:var(--sumi);color:var(--paper);padding:72px 0 64px}
.page-head h1{font-family:var(--mincho);font-weight:700;font-size:clamp(30px,3.6vw,44px);letter-spacing:.2em}
.page-head p{color:#bdb2a3;margin-top:8px}

/* menu page */
.tabs{position:sticky;top:76px;z-index:30;background:var(--paper);border-bottom:1px solid var(--line)}
.tabs .wrap{display:flex;gap:6px;overflow-x:auto;padding-top:12px;padding-bottom:12px;scrollbar-width:none}
.tabs a{flex:none;text-decoration:none;font-size:14px;padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:#fff8ee}
.tabs a:hover{border-color:var(--sumi)}
.menu-sec{padding:64px 0 24px}
.menu-sec h2{font-family:var(--mincho);font-size:26px;letter-spacing:.16em;display:flex;align-items:baseline;gap:14px;border-bottom:2px solid var(--sumi);padding-bottom:10px;margin-bottom:8px}
.menu-sec h2 small{font-family:var(--gothic);font-size:13px;color:var(--stone);letter-spacing:.06em}
.menu-cols{display:grid;grid-template-columns:1fr 1fr;column-gap:56px}
.item{display:flex;align-items:baseline;gap:10px;padding:14px 0;border-bottom:1px solid var(--line)}
.item .nm{font-weight:500}
.item .nm small{display:block;font-weight:400;font-size:13px;color:var(--stone)}
.item .dots{flex:1;border-bottom:1px dotted #b3a796;transform:translateY(-6px);min-width:20px}
.item .pr{white-space:nowrap}
.tag{display:inline-block;font-size:11px;background:var(--shu);color:#fff;border-radius:3px;padding:0 6px;margin-left:6px;vertical-align:2px}
.menu-photo{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
.menu-photo .photo{aspect-ratio:4/3}

/* course page */
.courses{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.course{background:#fff8ee;border:1px solid var(--line);padding:36px 30px;display:flex;flex-direction:column}
.course.pick{border:2px solid var(--shu)}
.course .lbl{font-size:12px;color:var(--shu);letter-spacing:.1em;min-height:20px}
.course h3{font-family:var(--mincho);font-size:24px;letter-spacing:.12em}
.course .price{font-family:var(--mincho);font-size:32px;margin:8px 0 2px}
.course .price small{font-family:var(--gothic);font-size:13px;color:var(--stone)}
.course ul{list-style:none;margin:18px 0 0;border-top:1px solid var(--line)}
.course li{padding:9px 0;border-bottom:1px dashed var(--line);font-size:15px}
.nomi{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.nomi div{border:1px solid var(--line);padding:24px 28px;background:#fff8ee}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gallery button{border:0;padding:0;background:var(--sumi-2);cursor:zoom-in;aspect-ratio:1;overflow:hidden}
.gallery button.wide{grid-column:span 2;aspect-ratio:2/1}
.gallery img{transition:transform .5s}
.gallery button:hover img{transform:scale(1.04)}
dialog.lightbox{border:0;padding:0;background:transparent;max-width:min(92vw,1100px);margin:auto}
dialog.lightbox::backdrop{background:rgba(15,12,10,.88)}
dialog.lightbox img{max-height:84vh;object-fit:contain;width:auto;margin:0 auto}
dialog.lightbox p{color:#e8dfd0;text-align:center;font-size:14px;margin-top:10px}
dialog.lightbox .close{position:fixed;top:20px;right:24px;background:none;border:1px solid #e8dfd0;color:#e8dfd0;border-radius:50%;width:48px;height:48px;font-size:22px;cursor:pointer}

/* info */
.info{width:100%;border-collapse:collapse;border-top:2px solid var(--sumi)}
.info th,.info td{text-align:left;padding:16px 0;border-bottom:1px solid var(--line);vertical-align:top;font-weight:400}
.info th{width:8em;color:var(--stone);font-size:14px}
.map{aspect-ratio:4/3;background:var(--paper-2);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px}
.map p{font-size:13px;color:var(--stone)}
details{border-bottom:1px solid var(--line)}
details:first-of-type{border-top:2px solid var(--sumi)}
summary{cursor:pointer;list-style:none;padding:20px 36px 20px 0;position:relative;font-weight:500}
summary::-webkit-details-marker{display:none}
summary::before{content:"問";font-family:var(--mincho);color:var(--shu);margin-right:12px}
summary::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;border-right:1.5px solid var(--sumi);border-bottom:1.5px solid var(--sumi);transform:translateY(-70%) rotate(45deg);transition:transform .25s}
details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details p{padding:0 0 22px 28px;color:#4a443d}

/* english */
.en-body{font-family:"Jost",var(--gothic);letter-spacing:.02em}
.en-list{list-style:none;border-top:1px solid var(--line)}
.en-list li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.en-list li span:first-child small{display:block;color:var(--stone);font-size:13px}

/* footer */
.site-foot{background:#141210;color:#d9cfc1;padding:64px 0 40px;font-size:14px}
.site-foot .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px}
.site-foot nav{display:flex;flex-direction:column;gap:6px}
.site-foot a{text-decoration:none}
.disclaimer{grid-column:1/-1;border-top:1px solid #3a342e;padding-top:22px;color:#a99f92;font-size:13px}

/* mobile bottom bar */
.bar{display:none}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

@media (max-width:1060px){
  .nav,.head-cta{display:none}
  .menu-toggle{display:block}
  .nav.open{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--sumi);padding:6px 24px 18px;border-top:1px solid #3a342e}
  .nav.open a{padding:14px 0;border-bottom:1px solid #3a342e;font-size:16px}
}
@media (max-width:860px){
  :root{--bar:72px}
  html{scroll-padding-top:136px}
  .br-sp{display:inline}
  .wrap{padding:0 20px}
  .site-head .wrap{height:68px}
  .tabs{top:68px}
  .hero{height:calc(100svh - 68px - var(--bar));min-height:520px}
  .hero img{object-position:72% 50%}
  .hero::after{background:linear-gradient(0deg,rgba(20,16,12,.8) 0%,rgba(20,16,12,.25) 60%)}
  .hero-body{padding:0 20px;align-items:flex-start;padding-top:48px}
  .hero .sub{margin-top:80px;font-size:14px}
  .hero .info{right:20px;bottom:24px}
  .hero-body{flex-direction:row-reverse;justify-content:flex-end}
  section{padding:72px 0}
  .split,.menu-cols,.nomi{grid-template-columns:1fr;gap:32px}
  .menu-cols{gap:0}
  .cards,.courses{grid-template-columns:1fr}
  .points{grid-template-columns:1fr}
  .points div{border-right:0;border-bottom:1px solid var(--line);padding:24px 0}
  .fuda{min-height:220px;width:52px;padding:16px 6px}
  .fuda b{font-size:18px}
  .fuda span{font-size:13px}
  .fuda-wrap{gap:8px;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding-bottom:10px;margin:0 -20px;padding-left:20px;padding-right:20px;scrollbar-width:none}
  .fuda{flex:none}
  .ig-grid{grid-template-columns:repeat(3,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .menu-photo{grid-template-columns:1fr 1fr}
  .site-foot .wrap{grid-template-columns:1fr}
  .bar{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--sumi);padding:8px 8px max(8px,env(safe-area-inset-bottom))}
  .bar a{display:flex;align-items:center;justify-content:center;height:56px;border-radius:6px;text-decoration:none;color:var(--paper);font-size:15px;font-weight:500;border:1px solid #4a433b}
  .bar a.main{background:var(--shu);border-color:var(--shu);color:#fff}
}

/* language switch link */
.nav a.lang{border:1px solid #6b6258;border-radius:4px;padding:5px 12px}
.nav a.lang:hover{border-color:var(--paper)}

/* English version */
.en-body h1,.en-body .h2,.en-body .page-head h1{letter-spacing:.04em}
.en-hero{flex-direction:row!important;justify-content:flex-start!important}
.hero h1.h1-en{writing-mode:horizontal-tb;font-family:var(--mincho);font-weight:700;font-size:clamp(40px,5.6vw,72px);line-height:1.15;letter-spacing:.01em;max-width:11em}
.sub-en{font-size:15px;letter-spacing:.14em;text-transform:none;color:#e8dfd0;margin-bottom:18px}
.en-fuda-wrap{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;max-width:1080px;margin:0 auto}
.en-fuda{background:#E9DCC4;color:var(--sumi);border:1px solid #CDB894;box-shadow:inset 0 0 0 4px #E9DCC4,inset 0 0 0 5px #CDB894;padding:18px 16px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:120px;text-decoration:none;font-family:var(--mincho)}
.en-fuda b{font-size:18px;line-height:1.3}
.en-fuda span{font-family:var(--gothic);font-size:15px}
.en-fuda.red{background:var(--shu);color:#fff;border-color:#8f2c20;box-shadow:inset 0 0 0 4px var(--shu),inset 0 0 0 5px #e39b90}
@media (max-width:860px){
  .hero h1.h1-en{font-size:40px}
  .en-fuda-wrap{grid-template-columns:1fr 1fr}
  .en-hero{padding-top:64px}
}