/* 静かな明朝と広い余白。写真は端まで寄せ、文字は少なく。英語の見出し＋［日本語］。色は TREE（クリーム・テラコッタ・墨・ゴールド） */
:root{
  --bg:#F7F0E4; --bg2:#EEE3D1; --ink:#3A302A; --sub:#6E6056; --line:#D9CCB6;
  --terra:#B24436; --on-terra:#FFF8EE; --gold:#B7925A; --foot:#2E2621; --foot-ink:#E9DFCF;
  --mincho:"Zen Old Mincho","Yu Mincho","Hiragino Mincho ProN",serif;
  --roman:"Cormorant Garamond","Times New Roman",serif;
}
/* 2026-11-10 中川さん：スマホの「ダークモード」でも黒くせず、いつもPCと同じクリームの色で見せる */
:root{color-scheme:light}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mincho);font-size:15.5px;line-height:2.1;letter-spacing:.06em;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px}
h1,h2,h3{font-weight:600;line-height:1.7;margin:0;text-wrap:balance;letter-spacing:.1em}
/* 日本語は文節（build.py が入れる <wbr>）の切れ目でだけ折り返す。長すぎる語は端で折る（2026-11-09 スタッフ指摘） */
body{word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
p{margin:0 0 1.2em}
[hidden]{display:none!important}

.draft{position:fixed;left:16px;bottom:16px;z-index:60;font-size:11px;letter-spacing:.08em;background:var(--ink);color:var(--bg);padding:2px 10px}

/* header */
.hd{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px clamp(16px,3vw,32px);background:linear-gradient(var(--bg) 60%, transparent)}
.hd-logo{color:var(--ink);display:block;width:clamp(78px,9vw,104px)}
.hd-logo svg,.ft-logo svg{width:100%;height:auto;display:block}
.hd-act{display:flex;gap:8px;align-items:flex-start}
details{position:relative}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
.rsv>summary{background:var(--terra);color:var(--on-terra);padding:9px 22px;font-size:14px;letter-spacing:.14em}
.rsv>summary::after{content:"";display:inline-block;width:5px;height:5px;border:solid currentColor;border-width:0 1px 1px 0;transform:rotate(45deg);margin:0 0 3px 12px}
.mn>summary{background:var(--bg);border:1px solid var(--line);padding:8px 20px;font-family:var(--roman);font-size:16px;letter-spacing:.08em}
.mn>summary::after{content:"···";margin-left:14px;letter-spacing:.1em}
.rsv-pop,.mn-pop{position:absolute;right:0;top:calc(100% + 8px);background:var(--bg);border:1px solid var(--line);min-width:260px;padding:10px 0;
  box-shadow:0 18px 40px -24px rgba(40,25,15,.45)}
.rsv-pop a{display:block;padding:10px 20px;text-decoration:none;font-size:14px;line-height:1.6}
.rsv-pop a span{display:block;font-size:11px;color:var(--sub)}
.rsv-pop a:hover,.mn-pop a:hover{background:var(--bg2)}
.mn-pop ul{list-style:none;margin:0;padding:0}
.mn-pop a{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:9px 22px;text-decoration:none}
.mn-pop .en{font-family:var(--roman);font-size:19px;letter-spacing:.04em}
.mn-pop .ja{font-size:12px;color:var(--sub)}
.mn-pop a[aria-current="page"] .en{color:var(--terra)}
.mn-info{font-size:12px;color:var(--sub);padding:10px 22px 0;margin:8px 0 0;border-top:1px solid var(--line);line-height:1.8}

/* section labels */
.sec-en{font-family:var(--roman);font-size:clamp(28px,4vw,40px);letter-spacing:.02em;line-height:1.2;margin:0 0 18px;color:var(--ink)}
.sec-en span{font-family:var(--mincho);font-size:12px;letter-spacing:.14em;color:var(--sub);margin-left:14px;vertical-align:middle;white-space:nowrap}
.more{display:inline-flex;align-items:center;gap:40px;text-decoration:none;font-size:14px;padding:6px 0;border-bottom:1px solid var(--ink);margin-right:28px}
.more::after{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.more:hover{color:var(--terra)}

/* hero A */
.hero-a{position:relative;padding:86px clamp(16px,6vw,96px) 0 clamp(16px,3vw,32px)}
.hero-a-img img{width:100%;height:min(78vh,720px);object-fit:cover}
.news{position:absolute;z-index:2;left:clamp(28px,4vw,48px);top:104px;margin:0;background:rgba(58,48,42,.82);color:#F7F0E4;font-size:13px;
  padding:6px 16px;letter-spacing:.08em;max-width:calc(100% - 56px)}
.news time{font-family:var(--roman);font-size:15px;margin-right:12px}
.scroll{position:absolute;right:clamp(4px,2vw,30px);bottom:40px;writing-mode:vertical-rl;font-family:var(--roman);font-size:13px;letter-spacing:.2em;margin:0;color:var(--sub)}
.scroll::after{content:"";display:block;width:1px;height:48px;background:var(--sub);margin:12px auto 0}
.intro-a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(32px,8vw,120px);max-width:1080px;margin:0 auto;
  padding:clamp(80px,12vw,150px) clamp(16px,5vw,48px)}
.tate{writing-mode:vertical-rl;font-size:clamp(22px,2.6vw,30px);letter-spacing:.28em;line-height:2.2;margin:0}
.intro-a-body{align-self:center;min-width:0}
.intro-a-body p{font-size:15.5px;line-height:2.5}
.en-note{font-family:var(--roman);font-style:italic;font-size:15px!important;color:var(--sub);letter-spacing:.02em;line-height:1.9!important}

/* hero B */
.hero-b{position:relative;padding-top:78px;background:var(--bg)}
.hero-b img{width:100%;height:min(86vh,820px);object-fit:cover}
.hero-b-copy{position:absolute;left:0;bottom:0;background:color-mix(in srgb,var(--bg) 60%,transparent);padding:clamp(24px,4vw,48px) clamp(20px,5vw,64px) 8px;max-width:min(640px,92%)}
.hero-b-copy h1{font-size:clamp(22px,3vw,32px)}
.hero-b-copy p:last-child{color:var(--sub);margin:12px 0 0}
.hero-b .sec-en{font-size:clamp(22px,3vw,30px)}
.news-b{top:96px;left:clamp(16px,3vw,32px)}
.strip-b{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:12px;padding:clamp(40px,6vw,72px) clamp(16px,3vw,32px) 0}
.strip-b img{width:100%;height:clamp(160px,22vw,300px);object-fit:cover}

/* alternating rows */
.row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,6vw,90px);align-items:center;
  padding:clamp(56px,9vw,120px) clamp(16px,5vw,64px) 0 0;max-width:1400px;margin:0 auto}
.row-rev{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);padding:clamp(56px,9vw,120px) 0 0 clamp(16px,5vw,64px)}
.row-rev .row-img{order:2}
.row-img img{width:100%;aspect-ratio:3/2;object-fit:cover}
.row-copy{min-width:0;padding-inline:clamp(0px,1vw,8px)}
.row-copy h2{font-size:clamp(19px,2.2vw,24px);margin-bottom:22px}
.row-copy p{color:var(--ink);max-width:28em}

/* about */
.about{max-width:1080px;margin:0 auto;padding:clamp(80px,11vw,140px) clamp(16px,5vw,48px) 0}
.about-list{margin:0 0 40px;border-top:1px solid var(--line)}
.about-list div,.spec div{display:grid;grid-template-columns:9em minmax(0,1fr);gap:16px;padding:16px 4px;border-bottom:1px solid var(--line)}
.about-list dt,.spec dt{color:var(--sub);font-size:14px}
.about-list dd,.spec dd{margin:0}
.about-strip{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:12px;margin-bottom:28px}
.about-strip img{width:100%;height:clamp(140px,18vw,240px);object-fit:cover}

.newsbox{max-width:1080px;margin:0 auto;padding:clamp(70px,10vw,120px) clamp(16px,5vw,48px) 0}
.newsbox time{font-family:var(--roman);font-size:17px;color:var(--sub);margin-right:18px}
.soon{color:var(--sub);font-size:13.5px}

/* call */
.call{margin:clamp(80px,11vw,140px) clamp(16px,3vw,32px) 0;background:var(--bg2);text-align:center;padding:clamp(48px,7vw,80px) 16px}
.call .sec-en span{display:block;margin:8px 0 0}
.call-tel{font-family:var(--roman);font-size:clamp(34px,5vw,48px);letter-spacing:.06em;margin:6px 0 4px;line-height:1.3}
.call-tel a{text-decoration:none}
.call-hours{font-size:13px;color:var(--sub)}
.call-links{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 0;margin:18px 0 0}

/* page head */
.ph{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:end;gap:0;padding-top:78px}
.ph-img img{width:100%;height:min(70vh,640px);object-fit:cover}
.ph-copy{padding:clamp(28px,4vw,56px) clamp(16px,5vw,64px) 0;min-width:0}
.ph-copy h1{font-size:clamp(22px,2.6vw,30px);margin-bottom:22px}
.lead{max-width:30em}
.ph-plain{grid-template-columns:minmax(0,1fr);max-width:1080px;margin:0 auto;padding-top:clamp(120px,14vw,170px)}
.ph-plain .ph-copy{padding-inline:clamp(16px,5vw,48px)}

/* body */
.body{max-width:960px;margin:0 auto;padding:clamp(40px,6vw,80px) clamp(16px,5vw,48px) 0}
.h-line{font-size:clamp(17px,1.9vw,20px);margin:clamp(56px,7vw,88px) 0 22px;display:flex;align-items:center;gap:18px}
.h-line::after{content:"";flex:1;height:1px;background:var(--line)}
.h-line small{font-size:12px;color:var(--sub);letter-spacing:.1em;font-weight:400;order:2}
.body>.h-line:first-child{margin-top:0}
.menu{margin:0 0 24px;border-top:1px solid var(--line)}
.menu div{display:grid;grid-template-columns:10em minmax(0,1fr) auto;gap:8px 20px;align-items:baseline;padding:18px 4px;border-bottom:1px solid var(--line)}
.menu dt{font-weight:600}
.menu dd{margin:0}
.m-desc{color:var(--sub);font-size:14px}
.m-price,.c-price,.b-price{font-family:var(--roman);font-size:24px;letter-spacing:.03em;white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}
.m-price span,.c-price span{font-family:var(--mincho);font-size:12px;margin-left:3px}
.menu-head,.menu-2p div{display:grid;grid-template-columns:minmax(0,1fr) 6.5em 6.5em;gap:8px 20px;align-items:baseline}
.menu-head{font-size:12px;color:var(--sub);letter-spacing:.12em;padding:0 4px 6px;text-align:right}
.menu-2p .m-price{text-align:right}
.m-sub{color:var(--sub)}
.h-sub{font-size:15px;font-weight:600;color:var(--sub);letter-spacing:.14em;margin:32px 0 6px}
.dots{list-style:none;padding:0;margin:0 0 1.2em}
.dots li{position:relative;padding-left:1.4em;margin-bottom:.5em}
.dots li::before{content:"";position:absolute;left:2px;top:.95em;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.steps li{padding:18px 16px 18px 0;font-size:14px;line-height:1.9;border-bottom:1px solid var(--line)}
.steps li span{display:block;font-size:17px;font-weight:600;margin-bottom:4px}
.note{background:var(--bg2);padding:18px 22px;font-size:14px;margin-top:24px}
.courses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,4vw,48px);margin-bottom:28px}
.course{border-top:2px solid var(--ink);padding-top:18px}
.course:first-child{border-color:var(--terra)}
.c-for{font-size:12.5px;color:var(--terra);margin:0 0 4px;letter-spacing:.12em}
.course h3{font-size:19px}
.c-price{font-size:40px;margin:2px 0 10px}
.bentos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.5vw,28px);margin:0}
.bentos figure{margin:0;min-width:0}
.bentos img{width:100%;aspect-ratio:4/3;object-fit:cover}
.bentos figcaption{padding-top:12px;font-size:13.5px;color:var(--sub);line-height:1.8}
.bentos figcaption b{display:block;color:var(--ink);font-size:16px;font-weight:600}
.b-price{display:block;color:var(--ink);font-size:28px}
.b-price small{font-family:var(--mincho);font-size:12px;margin-left:3px}
/* ディナーのお酒の案内（2026-11-04） */
.drink-hi{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start;margin-bottom:8px}
.drink-hi img{width:100%;aspect-ratio:4/3;object-fit:cover}
.drink-hi .spec div{grid-template-columns:minmax(0,1fr) auto}
.spec{margin:0 0 24px;border-top:1px solid var(--line)}
.spec div{grid-template-columns:13em minmax(0,1fr)}

/* form */
.form{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.f-row{display:grid;grid-template-columns:13em minmax(0,1fr);gap:8px 24px;padding:18px 0;border:0;border-bottom:1px solid var(--line);margin:0;min-width:0}
.f-row legend{float:left;padding:0}
fieldset.f-row{display:block}
fieldset.f-row legend{width:13em;margin-right:24px}
.opts{display:flex;flex-direction:column;gap:4px;overflow:hidden}
label,legend{font-size:14.5px}
label em,legend em{font-style:normal;font-size:10.5px;color:var(--terra);border:1px solid var(--terra);padding:0 6px;margin-left:10px;letter-spacing:.1em}
input,textarea{font:inherit;font-family:var(--mincho);color:var(--ink);background:var(--bg);border:1px solid var(--line);padding:10px 12px;width:100%}
.opts input{width:auto;margin-right:8px}
.f-row small{display:block;color:var(--sub);font-size:12.5px;margin-top:6px}
.form-msg{color:var(--terra);margin:18px 0 0}
.form-msg:empty{display:none}
.submit{align-self:center;margin-top:36px;background:var(--terra);color:var(--on-terra);border:0;font:inherit;font-size:15px;letter-spacing:.16em;padding:16px 56px;cursor:pointer}

/* footer */
.ft{background:var(--foot);color:var(--foot-ink);margin-top:clamp(80px,11vw,140px);padding-bottom:env(safe-area-inset-bottom,0px)}
.ft-in{max-width:1180px;margin:0 auto;padding:clamp(56px,7vw,88px) clamp(16px,5vw,48px) 32px}
.ft-logo{width:120px;color:var(--foot-ink);margin-bottom:36px}
.ft-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;font-size:13.5px;line-height:2}
.ft-nav{list-style:none;padding:0;margin:0}
.ft-nav a{text-decoration:none;display:flex;gap:12px;align-items:baseline}
.ft-nav .en{font-family:var(--roman);font-size:16px}
.ft-nav .ja{font-size:11px;opacity:.7}
.ft-facts{font-size:11.5px;opacity:.75;margin:40px 0 0;line-height:1.9;max-width:none}
.ft-facts span{border:1px solid currentColor;padding:0 6px;margin-right:10px}
.ft-note{font-size:12px;line-height:1.8;opacity:.6;margin:20px 0 0}
.ft-copy{font-family:var(--roman);font-size:13px;opacity:.6;margin:24px 0 0}

/* prototype switcher (公開時は外す) */
.proto{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;align-items:center;gap:6px;
  background:#111;color:#fff;border-radius:999px;padding:6px 8px;font:13px/1 system-ui,sans-serif;letter-spacing:0;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.proto button{background:#333;color:#fff;border:0;border-radius:50%;width:28px;height:28px;font-size:16px;cursor:pointer}
.proto span{padding:0 10px;white-space:nowrap}

/* mobile dock */
.dock{display:none}
@media (max-width:760px){
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
  .dock{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--bg);
    border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
  .dock a{text-align:center;padding:14px 0;text-decoration:none;font-size:14px;letter-spacing:.1em;border-left:1px solid var(--line)}
  .dock a:first-child{background:var(--terra);color:var(--on-terra);border:0}
  .proto{bottom:calc(68px + env(safe-area-inset-bottom,0px))}
  .draft{bottom:auto;top:70px;left:16px}
  .rsv>summary{padding:8px 14px}
  .mn>summary{padding:7px 12px}
  .mn>summary::after{margin-left:8px}
  .hero-a{padding-right:16px}
  .scroll{display:none}
  .intro-a{grid-template-columns:minmax(0,1fr);justify-items:start}
  .tate{writing-mode:horizontal-tb;font-size:22px;letter-spacing:.14em}
  .row,.row-rev,.ph{grid-template-columns:minmax(0,1fr);padding-inline:0}
  .row-rev .row-img{order:0}
  .row-copy{padding-inline:16px}
  .hero-b-copy{position:static;max-width:none}
  .strip-b{grid-template-columns:1fr 1fr}
  .strip-b img:last-child{display:none}
  .about-strip,.bentos,.courses,.ft-cols,.drink-hi{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:1fr 1fr}
  .menu div{grid-template-columns:minmax(0,1fr) auto}
  .menu .m-desc{grid-column:1/-1;grid-row:2}
  .menu-head,.menu-2p div{grid-template-columns:minmax(0,1fr) 5em 5em;gap:4px 10px}
  .m-price{font-size:21px}
  .about-list div,.spec div,.f-row{grid-template-columns:minmax(0,1fr);gap:2px}
  fieldset.f-row legend{float:none;width:auto;margin:0 0 6px}
  .sec-en span{display:block;margin:6px 0 0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.menu-compact div{grid-template-columns:minmax(0,1fr) auto}
.menu-compact .dt-wide{font-weight:400;font-size:14.5px;line-height:1.9}
/* メニューの写真（写真のある品だけ。無い品は同じ幅の空き） */
.menu-pics div{grid-template-columns:76px minmax(0,10em) minmax(0,1fr) auto;align-items:center}
.menu-pics.menu-2p div{grid-template-columns:76px minmax(0,1fr) 6.5em 6.5em}
.menu-head{grid-template-columns:76px minmax(0,1fr) 6.5em 6.5em!important}
.m-img{margin:0;width:76px;height:76px}
.m-img img{width:76px;height:76px;object-fit:cover;background:var(--bg2)}
.m-img img[src$=".png"]{object-fit:contain;background:transparent}
.c-img{width:100%;aspect-ratio:3/2;object-fit:cover;margin-bottom:14px}
@media (max-width:760px){
  .menu-pics div{grid-template-columns:64px minmax(0,1fr) auto}
  .menu-pics .m-desc{grid-column:2/-1;grid-row:2}
  .menu-pics.menu-2p div,.menu-head{grid-template-columns:64px minmax(0,1fr) 4.6em 4.6em!important}
  .m-img,.m-img img{width:64px;height:64px}
  .menu-pics .m-img{grid-row:1/span 2}
}
/* メニューのカード（参考画像の形：見出し＋写真・品名・ひとこと・価格を3列） */
.m-lead{color:var(--sub);font-size:14px;max-width:none}
.m-sec{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin:56px 0 18px;font-weight:400}
.m-en{font-family:var(--roman);font-size:clamp(22px,2.6vw,28px);letter-spacing:.12em;line-height:1.2}
.m-ja{font-size:12px;color:var(--sub);letter-spacing:.14em}
.mcards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px clamp(16px,2.5vw,32px)}
.mc{min-width:0}
.mc-img{aspect-ratio:4/3;background:var(--bg2);overflow:hidden;margin-bottom:12px}
.mc-img img{width:100%;height:100%;object-fit:cover;display:block}
.mc-img:has(img[src$=".png"]){background:#ECEBE8}
.mc-img img[src$=".png"]{object-fit:contain;padding:10px 14px}
.mc-name{font-weight:600;font-size:15.5px;line-height:1.6;margin:0}
.mc-note{font-size:12.5px;color:var(--sub);line-height:1.7;margin:2px 0 0}
.mc-price{font-family:var(--roman);font-size:22px;margin:4px 0 0;line-height:1.4;font-variant-numeric:lining-nums tabular-nums}
.mc-price span,.mc-rest .m-price span{font-family:var(--mincho);font-size:11.5px;margin-left:2px}
.mc-price small{font-family:var(--mincho);font-size:11px;color:var(--sub);margin-right:6px;letter-spacing:.08em}
.mc-rest{margin-top:20px}
.mc-rest div{grid-template-columns:minmax(0,12em) minmax(0,1fr) auto}
.mc-rest .m-price small{font-family:var(--mincho);font-size:11px;color:var(--sub);margin-right:6px}
@media (max-width:760px){
  .mcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
  .mc-name{font-size:14px}
  .mc-price{font-size:19px}
  .mc-rest div{grid-template-columns:minmax(0,1fr) auto}
}
/* トップ：集まり・ご注文（ケータリング・貸切・お弁当）は3枚のカードで */
.groups{max-width:1180px;margin:0 auto;padding:clamp(80px,11vw,140px) clamp(16px,5vw,48px) 0}
.group-cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,40px)}
.group-cards a{display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.group-cards img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:14px}
.g-en{font-family:var(--roman);font-size:24px;letter-spacing:.04em;line-height:1.3}
.g-ja{font-size:12px;color:var(--sub);letter-spacing:.14em}
.g-txt{font-size:14px;margin-top:8px;line-height:1.9}
.group-cards a:hover .g-en{color:var(--terra)}
@media (max-width:760px){.group-cards{grid-template-columns:minmax(0,1fr)}}