:root{
  --bg:#0a0a0b; --bg-2:#111113; --ink:#e8e3d7; --muted:#9a9487; --gold:#b79a5b; --red:#9e3a2c; --line:rgba(232,227,215,.22);
  --serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--serif);color:var(--ink);background:var(--bg);line-height:2;font-size:15px;letter-spacing:.06em;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(1040px,100% - 48px);margin-inline:auto}
h1,h2,h3{font-weight:500;line-height:1.7;letter-spacing:.14em}
.v{writing-mode:vertical-rl;text-orientation:upright}
.v-mixed{writing-mode:vertical-rl;text-orientation:mixed}

/* header */
.site-header{position:fixed;inset:0 0 auto 0;z-index:60;height:0;pointer-events:none}
.site-header>*{pointer-events:auto}
.site-header::before{content:"";position:absolute;inset:0 0 auto 0;height:150px;background:linear-gradient(rgba(10,10,11,.85),transparent);pointer-events:none}
.menu-btn{position:absolute;left:24px;top:22px;width:44px;height:36px;background:none;border:0;cursor:pointer;color:#fff}
.menu-btn span,.menu-btn span::before{display:block;width:40px;height:1px;background:#fff;position:absolute;left:2px;transition:.25s}
.menu-btn span{top:12px}.menu-btn span::before{content:"";top:8px;left:0}
.menu-btn[aria-expanded=true] span{transform:translateY(4px) rotate(20deg)}
.menu-btn[aria-expanded=true] span::before{transform:translateY(-8px) rotate(-40deg);top:8px}
.brand{position:absolute;right:26px;top:20px}
.brand img{height:54px;width:auto}
.vnav{position:absolute;right:190px;top:34px}
.vnav ul{list-style:none;display:flex;flex-direction:row-reverse;gap:22px}
.vnav a{writing-mode:vertical-rl;text-orientation:upright;text-decoration:none;font-size:13.5px;letter-spacing:.35em;color:#fff;display:block;padding:2px 0;transition:opacity .2s;text-shadow:0 0 12px rgba(0,0,0,.7)}
.vnav a:hover{opacity:.6}
.vnav a[aria-current]{color:var(--gold)}
.side{position:fixed;left:24px;bottom:28px;z-index:40;list-style:none;display:none;gap:12px;font-size:12px;letter-spacing:.2em;text-shadow:0 0 10px rgba(0,0,0,.8)}
.side a{text-decoration:none;display:flex;align-items:center;gap:12px;opacity:.9}
.side a::before{content:"";width:12px;height:1px;background:#fff}
.side a:hover{opacity:.6}
.overlay{position:fixed;inset:0;z-index:55;background:rgba(10,10,11,.97);display:grid;place-items:center;opacity:0;visibility:hidden;transition:.4s}
.overlay.open{opacity:1;visibility:visible}
.overlay ul{list-style:none;text-align:center}
.overlay li+li{margin-top:10px}
.overlay a{text-decoration:none;font-size:22px;letter-spacing:.4em;padding:10px 20px;display:inline-block}
.overlay a:hover{color:var(--gold)}
.overlay .tel{display:block;margin-top:34px;font-family:var(--sans);font-size:15px;letter-spacing:.2em;color:var(--muted)}

@media (min-width:1240px){.side{display:grid}}
/* hero */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#000}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%;animation:slowzoom 18s ease-out forwards}
@keyframes slowzoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.65),rgba(0,0,0,.5) 45%,rgba(0,0,0,.78))}
.hero-copy{position:absolute;z-index:2;right:max(20vw,170px);top:max(210px,22vh);writing-mode:vertical-rl;text-orientation:upright;--fs:clamp(22px,min(3.4vw,calc((100svh - 300px)/11.9)),48px);text-shadow:0 2px 18px rgba(0,0,0,.9),0 0 40px rgba(0,0,0,.6)}
.hero-copy h1{font-size:var(--fs);letter-spacing:.32em;line-height:1.9;font-weight:500;animation:heroin 1.2s ease-out both}
.hero-copy h1 span{display:block}
.hero-copy .sub{font-size:12px;letter-spacing:.4em;color:#e8dcb8;margin-left:calc(var(--fs) * .9);padding-top:.3em;animation:heroin 1.2s .2s ease-out both}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.scroll{position:absolute;z-index:2;left:50%;bottom:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;font-size:10px;letter-spacing:.3em;gap:8px;text-decoration:none}
.scroll::after{content:"";width:1px;height:56px;background:linear-gradient(#fff,transparent);animation:drip 2s infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* sub page head */
.page-head{padding:170px 0 80px;text-align:center;background:var(--bg)}
.page-head .en{font-family:var(--sans);letter-spacing:.5em;font-size:10.5px;color:var(--gold);display:block;margin-bottom:14px}
.page-head h1{font-size:clamp(26px,3.6vw,38px);letter-spacing:.4em;font-weight:500;padding-left:.4em}
.page-head p{margin-top:16px;color:var(--muted);font-size:13px}
.page-head::after{content:"";display:block;width:1px;height:64px;background:var(--line);margin:40px auto 0}

/* sections */
section{padding:110px 0}
.alt{background:var(--bg-2)}
.sec-title{text-align:center;margin-bottom:60px}
.sec-title .en{display:block;font-family:var(--sans);letter-spacing:.5em;font-size:10.5px;color:var(--gold);margin-bottom:10px}
.sec-title h2{font-size:clamp(22px,3vw,30px);letter-spacing:.4em;padding-left:.4em}
.kanji{text-align:center;color:var(--ink);font-size:22px;letter-spacing:.3em;padding:30px 0}
.kanji::before,.kanji::after{content:"";display:inline-block;width:28px;height:1px;background:var(--line);vertical-align:middle;margin:0 18px}

/* news */
.news-sec{display:grid;grid-template-columns:120px 1fr;gap:40px;max-width:900px;margin-inline:auto}
.news-sec h2{font-size:22px;height:7em}
.news{list-style:none;border-top:1px solid var(--line)}
.news li{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:22px 6px;border-bottom:1px solid var(--line)}
.news time{color:var(--muted);font-size:13px;letter-spacing:.1em;font-family:var(--sans)}
.news b{font-weight:500}
.news small{display:block;color:var(--muted);font-size:12.5px;line-height:1.9;margin-top:4px}

/* full-bleed feature */
.feature{position:relative;min-height:90vh;display:flex;align-items:center;justify-content:flex-end;padding:0;overflow:hidden}
.feature img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55)}
.feature .inner{position:relative;z-index:2;display:flex;gap:56px;align-items:flex-start;padding:90px max(24px,8vw) 90px 24px}
.feature h2{font-size:clamp(24px,3.2vw,38px);letter-spacing:.34em;line-height:2}
.feature p{font-size:15px;line-height:2.4;letter-spacing:.18em}

/* alternating rows */
.row{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;max-width:980px;margin-inline:auto}
.row+.row{margin-top:110px}
.row.rev .pic{order:2}
.row .pic{position:relative}
.row .pic img{width:100%;aspect-ratio:4/3;object-fit:cover}
.row .pic::after{content:"";position:absolute;inset:14px -14px -14px 14px;border:1px solid var(--line);z-index:-1}
.row .txt{display:flex;gap:36px;justify-content:center;align-items:flex-start}
.row h2{font-size:26px;letter-spacing:.4em}
.row p{font-size:14px;line-height:2.4;height:15em;letter-spacing:.14em}
.more{display:inline-block;margin-top:28px;text-decoration:none;font-size:13px;letter-spacing:.3em;border-bottom:1px solid var(--gold);padding-bottom:4px}
.more:hover{color:var(--gold)}

/* info */
.info{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
table.info-table{width:100%;border-collapse:collapse}
.info-table th,.info-table td{padding:16px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:14.5px}
.info-table th{width:7.5em;font-weight:500;letter-spacing:.2em;white-space:nowrap;color:var(--muted)}
.info-table td small{display:block;color:var(--muted);font-size:12.5px;line-height:1.9}
.map{width:100%;height:100%;min-height:380px;border:0;filter:invert(.92) hue-rotate(180deg) saturate(.7) contrast(.9)}
.info img{width:100%;aspect-ratio:4/3;object-fit:cover}

.call{text-align:center;padding:100px 0;border-top:1px solid var(--line)}
.call h2{font-size:clamp(20px,2.6vw,26px);letter-spacing:.4em}
.call p{margin:14px 0 26px;color:var(--muted);font-size:13px}
.call .num{font-size:clamp(32px,5.4vw,50px);letter-spacing:.2em;text-decoration:none;display:block;font-weight:500}

/* buttons */
.btn{display:inline-block;text-decoration:none;letter-spacing:.3em;padding:14px 34px;border:1px solid var(--ink);color:var(--ink);transition:.25s;font-size:14px;background:none;font-family:inherit}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn.solid{background:var(--red);border-color:var(--red);color:#fff}
.btn.solid:hover{background:#fff;color:var(--red);border-color:#fff}

/* menu */
.menu-nav{background:var(--bg);border-block:1px solid var(--line);overflow-x:auto}
.menu-nav ul{display:flex;gap:4px;list-style:none;width:max-content;margin-inline:auto;padding:0 24px}
.menu-nav a{display:block;text-decoration:none;letter-spacing:.22em;padding:16px 14px;font-size:13px;white-space:nowrap;border-bottom:1px solid transparent;color:var(--muted)}
.menu-nav a:hover{color:var(--ink);border-color:var(--gold)}
.provisional{max-width:760px;margin:0 auto 10px;border:1px solid var(--gold);color:var(--gold);padding:12px 18px;font-size:12.5px;text-align:center;letter-spacing:.12em;line-height:1.9}
.menu-sec{padding:84px 0 8px;scroll-margin-top:20px}
.menu-sec h2{font-size:22px;letter-spacing:.4em;display:flex;align-items:center;gap:20px;margin-bottom:10px}
.menu-sec h2::after{content:"";flex:1;height:1px;background:var(--line)}
.menu-sec .note{color:var(--muted);font-size:12.5px;margin-bottom:22px}
.menu-sec .photo{margin:22px 0 30px;aspect-ratio:3/2;object-fit:cover;width:100%;max-width:540px;filter:brightness(.9)}
.dish-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 64px}
.dish{padding:18px 0;border-bottom:1px solid var(--line)}
.dish .row2{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
.dish h3{font-size:16.5px;letter-spacing:.14em;white-space:nowrap}
.dish .dots{flex:1;min-width:8px}
.dish .price{font-size:15px;white-space:nowrap;color:var(--gold);letter-spacing:.12em}
.dish p{margin-top:6px;font-size:12.5px;color:var(--muted);line-height:1.9}
.tax{text-align:right;font-size:12px;color:var(--muted);margin:18px 0 0}

.menu-lead{max-width:760px;margin:0 auto;text-align:center}
.menu-lead h2{font-size:26px;letter-spacing:.4em;padding-left:.4em;margin-bottom:12px}
.menu-lead p{color:var(--muted);font-size:13.5px}
.menu-lead .provisional{margin-top:18px}
.dish .price small.inc{font-size:11.5px;color:var(--muted);margin-left:6px;letter-spacing:.06em}
/* generic content */
.two{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.two img{width:100%;aspect-ratio:3/2;object-fit:cover}
.rich h2{font-size:24px;margin-bottom:18px;letter-spacing:.3em}
.rich p+p{margin-top:1.2em}
.pricebox{border:1px solid var(--line);padding:6px 26px 14px;margin-top:20px}
.pricebox .dish:last-child{border-bottom:0}

/* form */
form.demo{max-width:640px;margin-inline:auto;display:grid;gap:20px}
form.demo label{display:grid;gap:6px;font-size:13px;letter-spacing:.14em;color:var(--muted)}
form.demo input,form.demo select,form.demo textarea{font:inherit;padding:13px 14px;border:1px solid var(--line);background:#141416;color:var(--ink);font-size:15px;border-radius:0;color-scheme:dark}
form.demo .grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.demo-note{border:1px solid var(--gold);color:var(--gold);padding:10px 14px;font-size:12.5px;text-align:center;max-width:640px;margin:0 auto 26px}

footer{padding:80px 0 40px;text-align:center;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line)}
footer img{height:64px;width:auto;margin:0 auto 26px}
footer ul{list-style:none;display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
footer a{text-decoration:none;letter-spacing:.24em;color:var(--ink)}
footer small{display:block;margin-top:22px;opacity:1;color:#8d887c}
.reveal{opacity:0;transform:translateY(22px);transition:opacity 1.2s,transform 1.2s}
.reveal.in{opacity:1;transform:none}

@media (max-width:860px){
  body{font-size:14.5px}
  .vnav{display:none}
  .site-header::before{height:96px;background:linear-gradient(rgba(10,10,11,.96) 65%,transparent)}
  .brand img{height:42px}
  .brand{right:18px;top:18px}
  .menu-btn{left:14px;top:18px}
  .hero-copy{right:14vw;top:max(130px,16vh);--fs:clamp(22px,min(7vw,calc((100svh - 260px)/11.9)),32px)}
  section{padding:76px 0}
  .news-sec{grid-template-columns:1fr;gap:20px}
  .news-sec h2{writing-mode:horizontal-tb;height:auto;text-align:center}
  .news li{grid-template-columns:1fr;gap:2px}
  .feature{min-height:82vh}
  .feature{justify-content:center}
  .feature .inner{gap:28px;padding:80px 16px}
  .feature h2{font-size:22px}
  .feature p{font-size:13.5px;line-height:2.3}
  .row{grid-template-columns:1fr;gap:34px}
  .row.rev .pic{order:0}
  .row .txt{flex-direction:row;justify-content:center}
  .row .pic::after{inset:10px -8px -10px 8px}
  .row h2{font-size:22px}
  .row p{height:14em;font-size:13.5px}
  .info,.two{grid-template-columns:1fr;gap:36px}
  .dish-list{grid-template-columns:1fr}
  form.demo .grid2{grid-template-columns:1fr}
  .menu-nav ul{margin-inline:0}
  .page-head{padding:130px 0 60px}
}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}.hero img.bg,.hero-copy h1,.hero-copy .sub,.scroll::after{animation:none}}

/* gallery (bento) */
.gallery{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:44px 28px}
.gallery figure img{width:100%;aspect-ratio:3/2;object-fit:cover;background:#171717}
.gallery figcaption{margin-top:14px;text-align:center}
.gallery h3{font-size:16px;letter-spacing:.16em}
.gallery .price{margin-top:2px;color:var(--gold);font-size:15px;letter-spacing:.1em}
.gallery .price small.inc{display:block;color:var(--muted);font-size:12px;letter-spacing:.06em}
@media (max-width:860px){.gallery{grid-template-columns:repeat(2,1fr);gap:32px 16px}.gallery h3{font-size:14.5px;letter-spacing:.08em}.gallery .price{font-size:13.5px}}
@media (max-width:420px){.gallery{grid-template-columns:1fr}}

/* instagram */
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start}
.ig-item{min-width:0}
.ig-item .instagram-media{margin:0 auto!important}
@media (max-width:860px){
  .ig-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:0 24px 16px;margin:0 -24px;-webkit-overflow-scrolling:touch}
  .ig-item{flex:0 0 min(86vw,340px);scroll-snap-align:center}
}

/* instagram cards (API) */
.ig-grid{min-height:120px}
.ig-card{display:block;text-decoration:none;background:var(--bg-2);border:1px solid var(--line);transition:.25s}
.ig-card:hover{border-color:var(--gold);transform:translateY(-3px)}
.ig-thumb{display:block;position:relative;aspect-ratio:1/1;overflow:hidden;background:#171717}
.ig-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.ig-card:hover .ig-thumb img{transform:scale(1.04)}
.ig-badge{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.6);display:grid;place-items:center;font-size:12px;color:#fff;padding-left:2px}
.ig-meta{display:block;padding:16px 18px 20px}
.ig-meta time{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.12em;color:var(--gold);margin-bottom:6px}
.ig-cap{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.9;color:var(--ink);letter-spacing:.06em}

/* 2026-11-07 更新 */
.vnav ul{gap:20px}
.vnav a{font-size:13px;letter-spacing:.3em}
.vnav a.tabelog,.overlay a.tabelog{color:var(--gold)}
.hero-copy{--fs:clamp(20px,min(3.2vw,calc((100svh - 300px)/21.5)),44px)}
.feature h2{font-size:clamp(20px,2.4vw,30px);letter-spacing:.3em}
.row .pic{display:block}
.row h2 a{text-decoration:none}
.row h2 a:hover{color:var(--gold)}
.omakase-price{font-size:clamp(34px,5vw,52px);letter-spacing:.14em;color:var(--gold);margin-top:18px;line-height:1.4}
.course-grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:900px;margin-inline:auto}
.course-grid li{border:1px solid var(--line);padding:44px 10px;text-align:center;font-size:20px;letter-spacing:.4em;padding-left:calc(10px + .4em)}
.map{min-height:420px}
@media (max-width:860px){
  .hero-copy{--fs:clamp(20px,min(6.2vw,calc((100svh - 260px)/21.5)),30px)}
  .feature h2{font-size:20px}
  .course-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:860px){.map{min-height:460px}}

/* CTA (電話・ご予約) 2026-11-07 */
.cta{position:fixed;right:24px;bottom:24px;z-index:50;display:flex;align-items:stretch;background:rgba(10,10,11,.84);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(183,154,91,.5);box-shadow:0 12px 32px rgba(0,0,0,.55);transition:opacity .4s,transform .4s}
.cta.pre{opacity:0;transform:translateY(14px);pointer-events:none}
.cta-tel{display:flex;align-items:center;gap:12px;padding:11px 22px 11px 18px;text-decoration:none;color:var(--ink)}
.cta-tel svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cta-tel span{display:flex;flex-direction:column;line-height:1.45}
.cta-tel small{font-size:10.5px;letter-spacing:.32em;color:var(--gold)}
.cta-tel b{font-weight:500;font-size:20px;letter-spacing:.1em;white-space:nowrap}
.cta-res{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 26px;background:var(--red);color:#fff;text-decoration:none;font-size:15px;letter-spacing:.3em;padding-left:calc(26px + .3em);line-height:1.5;transition:background .25s}
.cta-res small{font-size:10px;letter-spacing:.2em;opacity:.8}
.cta-res:hover{background:#b8473a}
.cta-tel:hover b{color:#fff}
@media (max-width:860px){
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
  .cta{left:0;right:0;bottom:0;border:0;border-top:1px solid rgba(183,154,91,.5);box-shadow:0 -8px 24px rgba(0,0,0,.5);padding-bottom:env(safe-area-inset-bottom);background:rgba(10,10,11,.94)}
  .cta.pre{transform:translateY(100%)}
  .cta-tel{flex:1;justify-content:center;padding:8px 10px;gap:10px;min-height:58px}
  .cta-tel b{font-size:19px;letter-spacing:.06em}
  .cta-res{flex:0 0 36%;padding:0 8px;font-size:15px;letter-spacing:.2em}
}
@media (max-width:360px){.cta-tel small{display:none}.cta-tel b{font-size:17px}}

/* ヒーローの文字は最初から表示し(LCP短縮)、位置の動きだけ付ける */
@keyframes heroin{from{transform:translateY(14px)}to{transform:none}}