:root{
  color-scheme:light;
  --gofun:#ECEAE3;      /* 胡粉 */
  --gofun-2:#E2DFD5;
  --sumi:#2C2620;       /* 煤竹 */
  --sumi-soft:#6B6358;
  --bengara:#233B68;    /* 藍（ロゴ DIC-2397） */
  --bengara-deep:#172848;
  --accent-ink:#233B68;
  --err:#A0402F;
  --matcha:#6E7A3F;
  --wood:#D6C6A8;
  --line:#CFCABD;
  --night:#1B2D52;
  --glow:#C9A35E;
  --mincho:"Shippori Mincho B1","Noto Serif CJK JP","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --gothic:"Zen Kaku Gothic New","Noto Sans CJK JP","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic",sans-serif;
  --ease:cubic-bezier(.65,0,.25,1);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}

:root[data-theme="dark"]{
  --gofun:#1F1C18;--gofun-2:#28241F;--sumi:#E8E2D4;--sumi-soft:#ADA596;
  --bengara:#2B4A85;--bengara-deep:#14223D;--accent-ink:#A9BCE3;--err:#E08A78;--line:#3D3832;--wood:#4A3F31;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(72px + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--sumi);background-color:var(--gofun);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .35 0 0 0 0 .3 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  font-family:var(--gothic);font-size:15px;line-height:1.95;letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;font-feature-settings:"palt" 0;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--bengara);outline-offset:4px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tbd{color:var(--accent-ink);text-decoration:underline dotted;text-underline-offset:4px}

h1,h2,h3,h4,.big,.band p,figcaption b,.news .t,.dl dd,.phead p,.notice,.ft address{word-break:auto-phrase;text-wrap:balance}
p{text-wrap:pretty}

/* ============ header ============ */
.hd{
  position:fixed;left:0;right:0;top:0;z-index:40;
  padding-top:env(safe-area-inset-top,0px);
  transition:background .4s,color .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
.hd.solid{background:color-mix(in srgb,var(--gofun) 90%,transparent);backdrop-filter:blur(8px);border-bottom-color:var(--line)}
@media (min-width:861px){.hd.on-hero:not(.solid) .gnav{color:#EFE8DA}.hd.on-hero:not(.solid) .gnav a::after{background:var(--glow)}}
.hd-in{display:flex;align-items:center;justify-content:space-between;height:72px;padding:0 clamp(20px,4vw,48px)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand svg{width:30px;height:30px;flex:none}
.brand b{font-family:var(--mincho);font-weight:700;font-size:15px;letter-spacing:.2em}
.brand i{font-family:var(--mincho);font-style:normal;font-size:13px;letter-spacing:.14em;opacity:.75}
.gnav{display:flex;gap:clamp(20px,3vw,40px)}
.gnav a{font-family:var(--mincho);font-size:14px;letter-spacing:.18em;text-decoration:none;position:relative;padding:6px 0}
.gnav a::after{content:"";position:absolute;left:50%;bottom:0;width:4px;height:4px;border-radius:50%;background:var(--bengara);transform:translateX(-50%) scale(0);transition:transform .3s}
.gnav a[aria-current="page"]::after{transform:translateX(-50%) scale(1)}
.burger{display:none;background:none;border:0;color:inherit;font-family:var(--mincho);font-size:14px;letter-spacing:.2em;cursor:pointer;padding:10px 0}
@media (max-width:760px){
  .burger{display:block}
  .gnav{
    position:fixed;inset:0;top:0;z-index:-1;flex-direction:column;justify-content:center;align-items:center;gap:30px;
    background:var(--bengara-deep);color:#EFE8DA;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;
    padding-top:env(safe-area-inset-top,0px);
  }
  .gnav a{font-size:22px}
  .gnav a::after{background:var(--glow)}
  .hd.menu-open{color:#EFE8DA;background:transparent;border-bottom-color:transparent;backdrop-filter:none}
  .hd.menu-open .gnav{opacity:1;visibility:visible}
}

/* ============ lattice transition ============ */
.koshi{position:fixed;inset:0;z-index:60;display:flex;pointer-events:none}
.koshi span{flex:1;background:var(--bengara-deep);transform:scaleX(0);transform-origin:center;transition:transform .5s var(--ease)}
.koshi span:nth-child(odd){background:var(--bengara)}
.koshi.shut span{transform:scaleX(1.02)}
@media (prefers-reduced-motion:reduce){.koshi{display:none}}

/* ============ pages ============ */
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}

/* ============ hero ============ */
.hero{
  position:relative;min-height:100svh;min-height:100vh;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  background:var(--gofun);
}
@supports (min-height:100svh){.hero{min-height:100svh}}
.hero-copy{
  position:relative;display:flex;flex-direction:row-reverse;justify-content:center;align-items:center;gap:clamp(18px,3vw,40px);
  padding:110px clamp(20px,4vw,56px) 60px;
}
.hero-copy h1{
  writing-mode:vertical-rl;margin:0;font-family:var(--mincho);font-weight:800;
  font-size:clamp(46px,7.4vw,112px);line-height:1.15;letter-spacing:.14em;color:var(--sumi);
}
.hero-copy h1 .ch{display:inline-block;opacity:0;transform:translateY(-.25em);filter:blur(6px);animation:ink 1.2s var(--ease) forwards}
@keyframes ink{to{opacity:1;transform:none;filter:none}}
.hero-copy .sub{
  writing-mode:vertical-rl;font-family:var(--mincho);font-size:15px;letter-spacing:.32em;line-height:2.4;color:var(--sumi-soft);margin:0;
  opacity:0;animation:fadein 1.4s ease 1.9s forwards;
}
@keyframes fadein{to{opacity:1}}
.hanko{
  writing-mode:vertical-rl;align-self:flex-end;margin-bottom:10vh;
  background:var(--bengara);color:#F3E9DC;font-family:var(--mincho);font-weight:700;font-size:13px;letter-spacing:.3em;
  padding:12px 7px;border-radius:2px;opacity:0;transform:scale(1.4) rotate(-6deg);animation:stamp .5s cubic-bezier(.2,1.6,.4,1) 2.3s forwards;
}
@keyframes stamp{to{opacity:1;transform:scale(1) rotate(-2deg)}}

.window{position:relative;overflow:hidden;background:var(--night);isolation:isolate}
.window .room{
  position:absolute;inset:0;
  background:
    radial-gradient(45% 36% at var(--gx,58%) var(--gy,44%),rgba(255,255,255,.12),transparent 72%),
    linear-gradient(160deg,#25407A,#172848 70%);
}
.andon{position:absolute;left:58%;top:56%;width:clamp(70px,9vw,120px);transform:translate(-50%,-50%)}
.andon .paper{animation:breathe 6s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.92}50%{opacity:1}}
.wordmark{
  position:absolute;right:clamp(18px,3vw,40px);bottom:clamp(24px,5vw,56px);z-index:3;
  font-family:var(--mincho);color:#EFE3CC;font-size:clamp(34px,5vw,72px);letter-spacing:.06em;line-height:1;font-weight:400;
  opacity:0;animation:fadein 1.6s ease 1.6s forwards;
}
.wordmark small{display:block;font-size:12px;letter-spacing:.4em;margin-top:14px;opacity:.7;text-align:right}
.slats{position:absolute;inset:0;z-index:2;display:flex;gap:0}
.slats i{flex:1;background:linear-gradient(90deg,var(--bengara-deep),var(--bengara) 45%,var(--bengara-deep));transform:scaleX(1);transform-origin:center;
  animation:open 1.8s var(--ease) forwards;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.25)}
@keyframes open{to{transform:scaleX(.16)}}
.slats::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--bengara-deep);z-index:1}
.window .rail{position:absolute;left:0;right:0;top:34%;height:6px;background:var(--bengara-deep);z-index:2;opacity:0;animation:fadein .6s ease 1.4s forwards}
.scroll-cue{
  position:absolute;left:clamp(20px,4vw,56px);bottom:28px;font-family:var(--mincho);font-size:12px;letter-spacing:.3em;color:var(--sumi-soft);
  display:flex;align-items:center;gap:12px;text-decoration:none;
}
.scroll-cue::before{content:"";width:1px;height:44px;background:currentColor;transform-origin:top;animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;grid-template-rows:auto 62vh}
  .hero-copy{padding-top:120px;padding-bottom:48px}
  .hero-copy h1{font-size:clamp(60px,17vw,96px)}
  .hanko{margin-bottom:0}
  .scroll-cue{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero-copy h1 .ch,.hero-copy .sub,.hanko,.wordmark,.window .rail{animation:none;opacity:1;transform:none;filter:none}
  .hanko{transform:rotate(-2deg)}
  .slats i{animation:none;transform:scaleX(.16)}
  .andon .paper,.scroll-cue::before{animation:none}
}

/* ============ sections ============ */
.sec{padding:clamp(88px,12vw,168px) 0;position:relative}
.sec-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,6vw,96px)}
.v-title{
  writing-mode:vertical-rl;margin:0;font-family:var(--mincho);font-weight:700;
  font-size:clamp(22px,2.4vw,30px);letter-spacing:.36em;line-height:1;align-self:start;
  padding-left:clamp(14px,1.6vw,22px);border-left:1px solid var(--line);
}
.v-title small{font-size:11px;letter-spacing:.3em;font-weight:400;color:var(--sumi-soft);margin-top:1.4em;font-family:var(--mincho)}
@media (max-width:640px){
  .sec-grid{grid-template-columns:1fr}
  .v-title{writing-mode:horizontal-tb;border-left:0;padding-left:0;letter-spacing:.24em;display:flex;align-items:baseline;gap:16px}
  .v-title small{margin-top:0}
}

/* concept */
.concept{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:end}
.concept .big{
  font-family:var(--mincho);font-weight:500;font-size:clamp(24px,2.7vw,38px);line-height:1.75;letter-spacing:.1em;margin:0;
}
.concept p.body{font-family:var(--mincho);font-size:16px;line-height:2.4;max-width:30em;margin:0 0 1.6em;color:var(--sumi-soft)}
.concept .def{display:flex;gap:18px;align-items:baseline;border-top:1px solid var(--line);padding-top:22px;margin-top:8px}
.concept .def b{font-family:var(--mincho);font-weight:400;font-size:28px;letter-spacing:.04em;color:var(--accent-ink)}
.concept .def span{font-size:13px;color:var(--sumi-soft)}
@media (max-width:860px){.concept{grid-template-columns:1fr}}

/* signature */
.sig{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.sig figure{margin:0}
.photo{
  position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--gofun-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.photo svg{width:46%;height:auto;color:var(--sumi);opacity:.85;transition:transform .8s var(--ease)}
.sig figure:hover .photo svg{transform:scale(1.06)}
.photo .ph-note{position:absolute;left:12px;bottom:10px;font-size:11px;color:var(--sumi-soft);letter-spacing:.1em}
.sig figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:16px}
.sig figcaption b{font-family:var(--mincho);font-weight:500;font-size:17px;letter-spacing:.08em}
.sig figcaption span{font-size:12px;color:var(--sumi-soft);white-space:nowrap}
.sig figure:nth-child(2){margin-top:clamp(0px,6vw,80px)}
@media (max-width:760px){.sig figcaption{flex-direction:column;gap:2px}.sig{grid-template-columns:1fr 1fr}.sig figure:nth-child(2){margin-top:0}.sig figure:nth-child(3){grid-column:1 / -1}.sig figure:nth-child(3) .photo{aspect-ratio:16/9}}

.link-line{
  display:inline-flex;align-items:center;gap:14px;margin-top:48px;font-family:var(--mincho);letter-spacing:.2em;text-decoration:none;font-size:14px;
}
.link-line::after{content:"";width:48px;height:1px;background:currentColor;transition:width .4s var(--ease)}
.link-line:hover::after{width:80px}

/* night band */
.band{background:var(--night);color:#EDE4D3;overflow:hidden}
.band .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center}
.band p{font-family:var(--mincho);font-size:clamp(18px,2.6vw,34px);line-height:1.9;letter-spacing:.12em;margin:0}
.band .mon{width:clamp(100px,14vw,180px);color:var(--glow);opacity:.9}
@media (max-width:640px){.band .wrap{grid-template-columns:1fr}.band .mon{justify-self:end}}

/* news list (shared) */
.news{list-style:none;margin:0;padding:0;border-top:1px solid var(--sumi)}
.news li{border-bottom:1px solid var(--line)}
.news button{
  width:100%;display:grid;grid-template-columns:9em minmax(0,1fr) 24px;gap:20px;align-items:baseline;
  padding:26px 0;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;
}
.news time{font-family:var(--mincho);font-variant-numeric:tabular-nums;letter-spacing:.1em;color:var(--sumi-soft)}
.news .t{font-family:var(--mincho);font-size:17px;letter-spacing:.06em}
.news .pm{position:relative;width:14px;height:14px;justify-self:end;align-self:center}
.news .pm::before,.news .pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transition:transform .35s var(--ease)}
.news .pm::after{transform:rotate(90deg)}
.news li.open .pm::after{transform:rotate(0)}
.news .body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.news li.open .body{grid-template-rows:1fr}
.news .body > div{overflow:hidden}
.news .body p{margin:0 0 28px;padding-left:calc(9em + 20px);max-width:calc(9em + 20px + 38em);color:var(--sumi-soft)}
@media (max-width:640px){
  .news button{grid-template-columns:minmax(0,1fr) 20px;gap:4px 12px}
  .news time{grid-column:1;font-size:13px}
  .news .t{grid-column:1}
  .news .pm{grid-row:1 / span 2;grid-column:2}
  .news .body p{padding-left:0}
}

/* info */
.info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px)}
.dl{margin:0;border-top:1px solid var(--sumi)}
.dl div{display:grid;grid-template-columns:7em minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.dl dt{font-family:var(--mincho);letter-spacing:.16em;color:var(--sumi-soft)}
.dl dd{margin:0}
.map{
  position:relative;min-height:340px;border:1px solid var(--line);background:var(--gofun-2);overflow:hidden;
}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.map .ph-note{position:absolute;left:14px;bottom:10px;font-size:11px;color:var(--sumi-soft);letter-spacing:.1em}
@media (max-width:860px){.info{grid-template-columns:1fr}}

/* ============ sub page head ============ */
.phead{padding:clamp(140px,18vw,220px) 0 clamp(40px,6vw,72px);position:relative}
.phead .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.phead h1{font-family:var(--mincho);font-weight:800;font-size:clamp(44px,8vw,120px);letter-spacing:.12em;line-height:1;margin:0}
.phead p{margin:0;max-width:24em;color:var(--sumi-soft);font-family:var(--mincho);line-height:2.2}
.phead .stripe{position:absolute;left:0;right:0;bottom:0;height:8px;background:repeating-linear-gradient(90deg,var(--bengara) 0 7px,transparent 7px 22px);opacity:.85}
@media (max-width:760px){.phead .wrap{flex-direction:column;align-items:flex-start}}

/* ============ menu ============ */
.ippuku{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:start;margin-bottom:clamp(48px,6vw,80px)}
.ippuku h2{writing-mode:vertical-rl;font-family:var(--mincho);font-weight:800;font-size:clamp(40px,5vw,64px);letter-spacing:.3em;margin:0;color:var(--accent-ink);order:2}
.ippuku p{font-family:var(--mincho);font-size:16px;line-height:2.4;max-width:30em;margin:0;color:var(--sumi-soft);align-self:end}

.cat-h{display:flex;align-items:baseline;gap:20px;margin:0 0 6px}
.cat-h h3{font-family:var(--mincho);font-weight:700;font-size:24px;letter-spacing:.3em;margin:0}
.cat-h span{font-size:12px;color:var(--sumi-soft);letter-spacing:.1em}

.fuda-rail{position:relative;padding-top:22px;margin-bottom:clamp(64px,8vw,104px)}
.fuda-rail::before{content:"";position:absolute;left:0;right:0;top:8px;height:3px;background:var(--sumi);opacity:.85;border-radius:2px}
.fuda{list-style:none;margin:0;padding:0 0 12px;display:flex;flex-direction:row-reverse;gap:clamp(10px,1.4vw,18px);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin}
.fuda li{
  flex:0 0 auto;width:clamp(64px,7.2vw,86px);min-height:clamp(260px,26vw,320px);scroll-snap-align:start;
  position:relative;transform-origin:50% -14px;transition:transform .5s cubic-bezier(.3,1.5,.5,1);
}
.fuda li::before{content:"";position:absolute;left:50%;top:-14px;width:1px;height:16px;background:var(--sumi);opacity:.6}
.fuda li:hover{transform:rotate(-2.2deg)}
.fuda .board{
  height:100%;min-height:inherit;padding:22px 0 18px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  background:
    repeating-linear-gradient(90deg,rgba(80,55,30,.06) 0 1px,transparent 1px 7px),
    linear-gradient(180deg,#E3D5B8,#D5C29E);
  color:#2C2620;border-radius:2px 2px 3px 3px;box-shadow:0 1px 0 rgba(0,0,0,.08),0 10px 18px -12px rgba(40,25,10,.45);
}
:root[data-theme="dark"] .fuda .board{background:repeating-linear-gradient(90deg,rgba(0,0,0,.12) 0 1px,transparent 1px 7px),linear-gradient(180deg,#5A4A36,#4A3C2C);color:#EFE5D2}

.fuda .name{writing-mode:vertical-rl;font-family:var(--mincho);font-weight:700;font-size:clamp(16px,1.5vw,19px);letter-spacing:.18em;line-height:1.4}
.fuda .name small{font-size:.66em;font-weight:500;letter-spacing:.1em;opacity:.75}
.fuda .tag{display:flex;flex-direction:column;gap:4px;margin-top:14px}
.fuda .tag em{font-style:normal;font-family:var(--mincho);font-size:11px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;border:1px solid currentColor}
.fuda .tag em.hot{background:var(--bengara);border-color:var(--accent-ink);color:#F3E9DC}
.rail-hint{font-size:12px;color:var(--sumi-soft);margin-top:10px;text-align:right;display:none}
@media (max-width:760px){.rail-hint{display:block}}

.food{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,5vw,72px)}
.food article{display:grid;grid-template-columns:96px minmax(0,1fr);gap:22px;padding:28px 0;border-bottom:1px solid var(--line)}
.food .thumb{aspect-ratio:1;background:var(--gofun-2);border:1px solid var(--line);display:grid;place-items:center}
.food .thumb svg{width:58%;color:var(--sumi);opacity:.8}
.food h4{font-family:var(--mincho);font-weight:700;font-size:18px;letter-spacing:.08em;margin:2px 0 6px}
.food p{margin:0;color:var(--sumi-soft);font-size:14px;line-height:1.9}
@media (max-width:760px){.food{grid-template-columns:1fr}}
.m-note{margin-top:40px;font-size:13px;color:var(--sumi-soft);font-family:var(--mincho)}

/* ============ contact ============ */
.cgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px)}
@media (max-width:860px){.cgrid{grid-template-columns:1fr}}
.notice{border:1px solid var(--bengara);color:var(--accent-ink);padding:16px 20px;font-family:var(--mincho);font-size:14px;margin:32px 0 0;line-height:1.9}
.form{display:grid;gap:30px}
.f label,.f legend{display:flex;gap:12px;align-items:baseline;font-family:var(--mincho);letter-spacing:.14em;margin-bottom:10px;padding:0}
.f .badge{font-family:var(--gothic);font-size:11px;letter-spacing:.06em;padding:1px 8px;border:1px solid var(--line);color:var(--sumi-soft)}
.f .badge.req{border-color:var(--accent-ink);background:var(--bengara);color:#F3E9DC}
.f input[type=text],.f input[type=email],.f input[type=tel],.f textarea{
  width:100%;font:inherit;font-size:16px;color:var(--sumi);background:transparent;border:0;border-bottom:1px solid var(--sumi);
  padding:10px 2px;border-radius:0;transition:border-color .3s,background .3s;
}
.f input:focus,.f textarea:focus{outline:none;border-bottom-color:var(--accent-ink);background:color-mix(in srgb,var(--bengara) 5%,transparent)}
.f input:focus-visible,.f textarea:focus-visible{outline:2px solid var(--bengara);outline-offset:2px}
.f textarea{min-height:170px;resize:vertical;border:1px solid var(--sumi);padding:12px}
fieldset.f{border:0;margin:0;padding:0;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips label{margin:0;letter-spacing:.08em;cursor:pointer}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips span{display:inline-block;border:1px solid var(--sumi);padding:9px 20px;font-family:var(--mincho);font-size:14px;transition:background .25s,color .25s}
.chips input:checked + span{background:var(--sumi);color:var(--gofun)}
.chips input:focus-visible + span{outline:2px solid var(--bengara);outline-offset:3px}
.err{display:none;color:var(--err);font-size:13px;margin:8px 0 0}
.f.bad .err{display:block}
.f.bad input,.f.bad textarea{border-color:var(--err)}
.agree{display:flex;gap:12px;align-items:flex-start;font-size:14px;cursor:pointer}
.agree input{margin-top:6px;accent-color:var(--accent-ink);width:16px;height:16px}
.submit{
  justify-self:start;font-family:var(--mincho);font-size:15px;letter-spacing:.3em;cursor:pointer;
  background:var(--bengara);color:#F3E9DC;border:0;padding:18px 48px;position:relative;overflow:hidden;
}
.submit::before{content:"";position:absolute;inset:0;background:var(--bengara-deep);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.submit:hover::before{transform:scaleX(1)}
.submit span{position:relative}
.form .hint{font-size:12px;color:var(--sumi-soft);margin:-14px 0 0}

/* ============ footer ============ */
.ft{background:var(--bengara-deep);color:#EFE5D2;position:relative}
.ft::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.25) 0 7px,transparent 7px 22px)}
.ft-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(32px,6vw,96px);padding:clamp(64px,8vw,104px) 0 48px;align-items:start}
.ft-name{writing-mode:vertical-rl;font-family:var(--mincho);font-weight:700;font-size:26px;letter-spacing:.3em;margin:0;line-height:1.2}
.ft-name i{font-style:normal;font-weight:400;font-size:15px;letter-spacing:.1em;opacity:.75;margin-top:.8em}
.ft address{font-style:normal;font-size:14px;line-height:2.1;opacity:.9}
.ft nav{display:grid;gap:12px}
.ft nav a{font-family:var(--mincho);text-decoration:none;letter-spacing:.2em;font-size:14px;opacity:.9}
.ft nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:6px}
.ft .tbd{color:#F0C9A0}
.copy{display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(239,229,210,.2);padding:20px 0 28px;font-size:11px;letter-spacing:.14em;opacity:.7}
.totop{background:none;border:0;color:inherit;font:inherit;cursor:pointer;letter-spacing:.2em}
@media (max-width:760px){.ft-in{grid-template-columns:auto minmax(0,1fr)}.ft nav{grid-column:1 / -1;grid-template-columns:1fr 1fr}}

/* ---- multi-page additions ---- */
.arriving .koshi span{transform:scaleX(1.02);transition:none}
.thanks{min-height:70vh;display:flex;align-items:center}
.thanks p{font-family:var(--mincho);line-height:2.2;color:var(--sumi-soft);max-width:32em}
.hp{display:none}

/* ---- shippo hero (logo motif) ---- */
.shippo{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.shippo circle{fill:none;stroke:rgba(236,234,227,.38);stroke-width:1.1;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.5s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.shippo .petal{fill:#ECEAE3;opacity:0;animation:fadein .9s ease forwards}
.plate{position:absolute;right:clamp(18px,3vw,40px);bottom:clamp(24px,5vw,56px);z-index:3;background:#172848;color:#ECEAE3;padding:clamp(18px,2vw,28px) clamp(20px,2.4vw,32px);opacity:0;animation:fadein 1.4s ease 2s forwards;box-shadow:0 0 0 1px rgba(236,234,227,.18)}
.plate svg{display:block;width:clamp(150px,15vw,210px);aspect-ratio:220/62;height:auto}
@media (prefers-reduced-motion:reduce){.shippo circle{animation:none;stroke-dashoffset:0}.shippo .petal,.plate{animation:none;opacity:1}}
.brand .mk{width:48px;height:32px;flex:none;color:var(--accent-ink)}
.brand .tp{width:auto;height:40px;aspect-ratio:220/62;flex:none}
.hd.menu-open .brand .mk{color:#ECEAE3}
.ft-logo{width:150px;aspect-ratio:243/284;height:auto;color:#ECEAE3;display:block}
.band .mon{width:clamp(140px,18vw,240px);aspect-ratio:231/155;height:auto;color:#ECEAE3}

/* ---- photos ---- */
.photo img,.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease)}
.sig figure:hover .photo img{transform:scale(1.04)}
.thumb.ph-img{overflow:hidden}
/* drink cards with hanging wooden tag */
.dgrid{list-style:none;margin:0 0 clamp(64px,8vw,104px);padding:28px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px) clamp(16px,2.4vw,32px);border-top:1px solid var(--sumi)}
.dcard{position:relative}
.dimg{aspect-ratio:1;overflow:hidden;background:var(--gofun-2);border:1px solid var(--line)}
.dimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease)}
.dcard:hover .dimg img{transform:scale(1.04)}
.ftag{
  position:absolute;top:-14px;right:14px;width:clamp(44px,4.4vw,56px);padding:14px 0 10px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  background:repeating-linear-gradient(90deg,rgba(80,55,30,.06) 0 1px,transparent 1px 7px),linear-gradient(180deg,#E3D5B8,#D5C29E);
  color:#2C2620;border-radius:2px;box-shadow:0 10px 18px -10px rgba(20,20,40,.55);
  transform-origin:50% -10px;transition:transform .5s cubic-bezier(.3,1.5,.5,1);
}
.ftag::before{content:"";position:absolute;left:50%;top:-10px;width:1px;height:10px;background:var(--sumi);opacity:.6}
.dcard:hover .ftag{transform:rotate(-3deg)}
.ftag .name{writing-mode:vertical-rl;font-family:var(--mincho);font-weight:700;font-size:clamp(13px,1.2vw,16px);letter-spacing:.16em;line-height:1.35}
.ftag .name small{font-size:.7em;font-weight:500;opacity:.75}
.ftag .tag{display:flex;flex-direction:column;gap:4px}
.ftag .tag em{font-style:normal;font-family:var(--mincho);font-size:10px;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;border:1px solid currentColor}
.ftag .tag em.hot{background:var(--bengara);border-color:var(--bengara);color:#F3E9DC}
@media (max-width:760px){.dgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.ftag{right:8px}}
.cat-h + .dgrid{margin-top:16px}

/* ---- v4: cafe menu ---- */
.hero-copy h1{font-size:clamp(40px,5.4vw,84px)}
@media (max-width:860px){.hero-copy h1{font-size:clamp(44px,12vw,72px)}}
.sig{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr)}
.sig figure:nth-child(2){margin-top:0}
.sig figure.wide .photo{aspect-ratio:3/2}
@media (max-width:760px){.sig{grid-template-columns:1fr 1fr}.sig figure.wide{grid-column:1 / -1}.sig figure.wide .photo{aspect-ratio:3/2}}
.cat-h{margin-top:clamp(56px,7vw,88px);padding-bottom:14px;border-bottom:1px solid var(--sumi)}
.cat-h span{font-family:var(--mincho);letter-spacing:.16em}
.ippuku + .cat-h{margin-top:0}
.plist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,5vw,72px)}
.plist li{display:flex;align-items:baseline;gap:12px;padding:18px 0;border-bottom:1px solid var(--line)}
.plist .n{font-family:var(--mincho);font-size:16px;letter-spacing:.06em}
.plist .d{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px);min-width:16px}
.plist .p{font-family:var(--mincho);font-variant-numeric:tabular-nums;letter-spacing:.04em;white-space:nowrap}
.two .plist,.two .plist{grid-template-columns:1fr}
@media (max-width:760px){.plist{grid-template-columns:1fr}}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,5vw,72px)}
@media (max-width:760px){.two{grid-template-columns:1fr}}
.feat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);margin:28px 0 8px}
.feat figure{margin:0}
.fimg{aspect-ratio:3/2;overflow:hidden;background:var(--gofun-2);border:1px solid var(--line)}
.fimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease)}
.feat figure:hover .fimg img{transform:scale(1.04)}
.feat figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:14px}
.feat figcaption b{font-family:var(--mincho);font-weight:500;font-size:17px;letter-spacing:.06em}
.feat figcaption span{font-family:var(--mincho)}
@media (max-width:760px){.feat{grid-template-columns:1fr}}
.dgrid{border-top:0;margin:28px 0 8px;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
@media (max-width:1000px){.dgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.dgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dimg{aspect-ratio:4/5}
.dprice{margin:12px 0 0;font-family:var(--mincho);text-align:right}
.ftag{padding:14px 0 12px}
.chips-list{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips-list li{border:1px solid var(--sumi);padding:8px 18px;font-family:var(--mincho);font-size:14px;letter-spacing:.08em}
.concept .def b{flex:none;white-space:nowrap}

/* ---- hero photo (仮) ---- */
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;z-index:0;transform:scale(1.06);animation:settle 2.4s var(--ease) forwards}
@keyframes settle{to{transform:scale(1)}}
.window .room{z-index:0;background:
  radial-gradient(45% 36% at var(--gx,58%) var(--gy,44%),rgba(255,255,255,.10),transparent 72%),
  linear-gradient(160deg,rgba(37,64,122,.42),rgba(23,40,72,.72) 75%)}
.hero-photo + .room{position:absolute;inset:0}
.shippo circle{stroke:rgba(236,234,227,.30)}
@media (prefers-reduced-motion:reduce){.hero-photo{animation:none;transform:none}}
.window .room{background:
  linear-gradient(to top,rgba(23,40,72,.78),rgba(23,40,72,.18) 45%,rgba(23,40,72,.10) 70%,rgba(23,40,72,.35))}
.shippo{-webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.55) 40%,transparent 75%);mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.55) 40%,transparent 75%)}
.shippo circle{stroke:rgba(236,234,227,.45)}

/* ==== v5 adjustments ==== */
/* hero copy: quiet, light mincho like the main store */
.hero-copy{flex-direction:row-reverse;align-items:center;justify-content:center;gap:clamp(22px,2.6vw,36px)}
.hero-copy h1.hc-main{writing-mode:vertical-rl;font-family:var(--mincho);font-weight:400;font-size:clamp(24px,2.5vw,38px);letter-spacing:.24em;line-height:2.1;margin:0;color:var(--sumi)}
.hc-rule{width:1px;height:clamp(90px,14vh,150px);background:var(--sumi);opacity:.45;align-self:center;transform-origin:top;transform:scaleY(0);animation:rule 1.2s var(--ease) 2.4s forwards}
@keyframes rule{to{transform:scaleY(1)}}
.hc-en{writing-mode:vertical-rl;font-family:var(--mincho);font-size:12.5px;letter-spacing:.2em;color:var(--sumi-soft);margin:0;opacity:0;animation:fadein 1.4s ease 2.6s forwards}
@media (max-width:860px){.hero-copy h1.hc-main{font-size:clamp(22px,6.4vw,30px)}.hero-copy{padding-top:110px;padding-bottom:44px}}
@media (prefers-reduced-motion:reduce){.hc-rule{animation:none;transform:none}.hc-en{animation:none;opacity:1}}
/* hero right: photo framed inside the shippo field, no overlap */
.window .room{background:radial-gradient(45% 36% at var(--gx,58%) var(--gy,44%),rgba(255,255,255,.10),transparent 72%),linear-gradient(160deg,#25407A,#172848 70%)}
.shippo{-webkit-mask-image:none;mask-image:none}
.shippo circle{stroke:rgba(236,234,227,.36)}
.hero-photo{inset:auto;left:9%;top:11%;width:82%;height:68%;z-index:2;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);transform:none;animation:fadein 1.6s ease .9s both}
@media (max-width:860px){.hero-photo{left:7%;top:8%;width:86%;height:66%}}
.plate{z-index:3}
/* photos: show whole image, no cropping */
.photo,.fimg,.dimg{aspect-ratio:auto!important;height:auto;display:block}
.sig figure.wide .photo{aspect-ratio:auto!important}
.photo img,.fimg img,.dimg img{height:auto!important;object-fit:contain}
.sig,.feat,.dgrid{align-items:start}
/* sub page heading: less shouty */
.phead h1{font-weight:500;font-size:clamp(34px,4.6vw,60px);letter-spacing:.2em}
.phead p{max-width:30em}
.sig{align-items:end}
.phead + .sec{padding-top:clamp(48px,6vw,80px)}
.phead + .sec .wrap > .cat-h:first-child{margin-top:0}

/* ==== v6: photo left (top on mobile), shippo panel right with copy ==== */
.hero{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.hero-pic{position:relative;overflow:hidden;min-height:100%}
.hero-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:scale(1.05);animation:settle 2.4s var(--ease) forwards}
.hero-pic::before{content:"";position:absolute;inset:0 0 auto 0;height:160px;z-index:1;background:linear-gradient(rgba(20,24,34,.5),transparent)}
.hero-pic .scroll-cue{z-index:2;color:#ECEAE3}
.hc-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;background:#172848;color:#ECEAE3;
  display:flex;flex-direction:row-reverse;align-items:center;gap:clamp(18px,2vw,30px);
  padding:clamp(36px,4.5vw,64px) clamp(30px,3.6vw,52px);box-shadow:0 0 0 1px rgba(236,234,227,.18)}
.hc-card h1.hc-main{writing-mode:vertical-rl;font-family:var(--mincho);font-weight:400;font-size:clamp(22px,2.1vw,34px);letter-spacing:.24em;line-height:2.1;margin:0;color:#ECEAE3}
.hc-card .hc-rule{background:#ECEAE3;opacity:.5}
.hc-card .hc-en{color:rgba(236,234,227,.75)}
.hd.on-hero:not(.solid){color:#ECEAE3}
.hd.on-hero:not(.solid) .brand .mk{color:#ECEAE3}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;grid-template-rows:62vh auto}
  .hero-pic{min-height:62vh}
  .window{min-height:78vh}
  .hc-card h1.hc-main{font-size:clamp(20px,5.6vw,26px)}
  .hd.on-hero:not(.solid) .burger{color:#ECEAE3}
}
@media (prefers-reduced-motion:reduce){.hero-pic img{animation:none;transform:none}}

/* ==== v7: full-bleed photo hero ==== */
.hero.hero-full{display:block;position:relative;min-height:100vh;overflow:hidden;background:#1d2230}
@supports (min-height:100svh){.hero.hero-full{min-height:100svh}}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:scale(1.05);animation:settle 2.6s var(--ease) forwards}
.hero-shade{position:absolute;inset:0;background:
  linear-gradient(to left,rgba(16,20,30,.55),rgba(16,20,30,.15) 45%,transparent 70%),
  linear-gradient(rgba(16,20,30,.45),transparent 22%)}
.hero-text{position:absolute;top:50%;right:clamp(28px,9vw,180px);transform:translateY(-50%);z-index:2;
  display:flex;flex-direction:row-reverse;align-items:flex-start;gap:clamp(18px,2vw,30px);color:#F2EEE6}
.hero-text h1.hc-main{writing-mode:vertical-rl;font-family:var(--mincho);font-weight:400;font-size:clamp(24px,2.5vw,40px);letter-spacing:.24em;line-height:2.1;margin:0;color:#F2EEE6;text-shadow:0 1px 18px rgba(0,0,0,.35)}
.hero-text .hc-rule{background:#F2EEE6;opacity:.6;align-self:center}
.hero-text .hc-en{color:rgba(242,238,230,.85);text-shadow:0 1px 10px rgba(0,0,0,.4)}
.hero-full .scroll-cue{color:#F2EEE6;z-index:2}
.hd.on-hero:not(.solid){color:#F2EEE6}
.hd.on-hero:not(.solid) .brand .mk{color:#F2EEE6}
.hd.on-hero:not(.solid) .burger{color:#F2EEE6}
@media (max-width:860px){
  .hero.hero-full{min-height:88vh;grid-template-rows:none}
  .hero-text{right:24px;top:auto;bottom:clamp(40px,8vh,80px);transform:none}
  .hero-text h1.hc-main{font-size:clamp(20px,5.6vw,26px)}
  .hero-shade{background:linear-gradient(to top,rgba(16,20,30,.6),transparent 60%),linear-gradient(rgba(16,20,30,.45),transparent 22%)}
}
@media (prefers-reduced-motion:reduce){.hero-bg{animation:none;transform:none}}

/* shippo moves to the navy band */
.band{position:relative;isolation:isolate}
.band-pattern{position:absolute;inset:0;z-index:-1;-webkit-mask-image:linear-gradient(to left,#000 10%,transparent 75%);mask-image:linear-gradient(to left,#000 10%,transparent 75%)}
.band-pattern .shippo circle{animation:none;stroke-dashoffset:0;stroke:rgba(236,234,227,.28)}
.band-pattern .shippo .petal{animation:none;opacity:.9}
.band .mon{display:none}

/* concept: no dead space */
.concept{align-items:start}
.concept .big{margin-top:-.2em}

/* food features: same size, whole photo visible */
.feat{align-items:start}
.feat .fimg{aspect-ratio:4/3!important;background:#E6E2D9}
.feat .fimg img{width:100%;height:100%!important;object-fit:contain}

/* ==== v8: the former hero-right design as its own section ==== */
.band2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:min(78vh,720px);background:var(--night);color:#EDE4D3}
.band2-text{display:flex;align-items:center;padding:clamp(56px,8vw,120px) clamp(24px,6vw,96px)}
.band2-text p{font-family:var(--mincho);font-size:clamp(18px,2.2vw,30px);line-height:2;letter-spacing:.12em;margin:0}
.band2-art{position:relative;min-height:420px}
.band2-art .room{position:absolute;inset:0;background:radial-gradient(45% 36% at var(--gx,58%) var(--gy,44%),rgba(255,255,255,.10),transparent 72%),linear-gradient(160deg,#25407A,#172848 70%)}
.band2-art .shippo{-webkit-mask-image:none;mask-image:none}
.band2-art .shippo circle{stroke:rgba(236,234,227,.38)}
.band2-art.io:not(.inview) .shippo circle,.band2-art.io:not(.inview) .shippo .petal,.band2-art.io:not(.inview) .plate{animation-play-state:paused}
@media (max-width:860px){.band2{grid-template-columns:1fr}.band2-art{min-height:68vh}}
.band2-text p{word-break:auto-phrase;font-size:clamp(17px,1.9vw,26px)}

/* v9: band2 text vertical & centred, no plate */
.band2-text{justify-content:center;align-items:center}
.b2-inner{display:flex;flex-direction:row-reverse;align-items:flex-start;gap:clamp(18px,2vw,28px)}
.b2-main{writing-mode:vertical-rl;font-family:var(--mincho);font-weight:400;font-size:clamp(20px,1.9vw,28px)!important;letter-spacing:.24em;line-height:2.2;margin:0;color:#ECEAE3;word-break:normal!important}
.b2-rule{width:1px;height:clamp(80px,12vh,130px);background:#ECEAE3;opacity:.5;align-self:center}
.b2-en{writing-mode:vertical-rl;font-family:var(--mincho);font-size:12.5px;letter-spacing:.3em;color:rgba(236,234,227,.7);margin:0}
@media (max-width:860px){.band2-text{padding:64px 24px}}

.cform-wrap{max-width:760px}

/* v10: tighter vertical rhythm, balanced concept */
.sec{padding:clamp(64px,7.5vw,112px) 0}
.concept{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:clamp(32px,5vw,80px)}
.concept .big{margin:0 0 clamp(28px,3vw,44px)}
.c-defs .def:first-child{margin-top:0}
.concept .c-right p.body:last-child{margin-bottom:0}
@media (max-width:860px){.concept{grid-template-columns:1fr}}

/* v11: compact take-out band */
.band2{min-height:0;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.band2-text{padding:clamp(40px,5vw,64px) clamp(24px,6vw,96px);justify-content:flex-start}
.b2-inner{display:block}
.b2-en{writing-mode:horizontal-tb;font-size:12px;letter-spacing:.3em;margin:0 0 14px;color:rgba(236,234,227,.65)}
.b2-main{writing-mode:horizontal-tb;font-size:clamp(17px,1.6vw,22px)!important;letter-spacing:.14em;line-height:2;word-break:auto-phrase!important}
.band2-art{min-height:clamp(200px,22vw,300px)}
@media (max-width:860px){.band2{grid-template-columns:1fr}.band2-art{min-height:180px}}

/* v11: 蔵だし食パン feature (after the main store) */
.kura{position:relative;margin:28px 0 12px;padding:clamp(28px,4vw,56px) clamp(20px,4vw,56px) clamp(20px,3vw,36px);
  background:linear-gradient(180deg,#F5F3F2,#EBE8E5);color:#2C2620;
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"pic text" "bread bread" "cap cap";gap:clamp(16px,2vw,28px) clamp(24px,4vw,64px)}
.kura-pic{grid-area:pic;display:flex;align-items:center;gap:clamp(8px,1.5vw,24px);align-self:start}
.kura-pic img{width:min(56%,460px);height:auto;display:block}
.kura-hand{position:relative;font-family:"Yomogi","Klee One","Zen Kaku Gothic New","Noto Sans CJK JP",cursive;font-size:clamp(15px,1.5vw,22px);letter-spacing:.14em;line-height:1.9;margin:0;padding:clamp(28px,3vw,44px) clamp(14px,2vw,28px)}
.kura-curl{position:absolute;inset:-6% -14% -6% -18%;width:132%;height:112%;color:#2C2620;opacity:.85;pointer-events:none}
.kura-text{grid-area:text;display:flex;flex-direction:row-reverse;align-items:flex-start;gap:clamp(14px,1.8vw,26px);height:clamp(280px,30vw,420px)}
.kura-text h4{writing-mode:vertical-rl;font-family:var(--mincho);font-weight:500;font-size:clamp(28px,3.2vw,46px);letter-spacing:.12em;margin:0;line-height:1.2}
.kura-en{writing-mode:vertical-rl;font-family:var(--mincho);font-size:13px;letter-spacing:.14em;color:#6B6358;margin:0}
.kura-body{writing-mode:vertical-rl;font-family:var(--mincho);font-size:clamp(13px,1.15vw,16px);letter-spacing:.14em;line-height:2.3;margin:0;max-height:100%}
.kura-bread{grid-area:bread;margin-top:clamp(-120px,-6vw,0px)}
.kura-bread img{width:100%;height:auto;display:block}
.kura-cap{grid-area:cap;display:flex;justify-content:center;gap:18px;margin:0;font-family:var(--mincho);letter-spacing:.12em}
.kura-cap b{font-weight:500}
@media (max-width:760px){
  .kura{grid-template-columns:1fr;grid-template-areas:"text" "pic" "bread" "cap"}
  .kura-text{justify-content:center;height:300px}
  .kura-pic img{width:58%}
  .kura-bread{margin-top:0}
}
/* single hot-sand card: image + caption side by side */
.feat{grid-template-columns:1fr;margin-top:clamp(24px,3vw,40px)}
.feat figure{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:center}
.feat figcaption{flex-direction:column;align-items:flex-start;gap:8px;padding-top:0}
@media (max-width:760px){.feat figure{grid-template-columns:1fr}}
.kura-bread{margin-top:0}
.kura-text{height:clamp(240px,24vw,340px)}

/* v12 */
.feat{grid-template-columns:repeat(2,minmax(0,1fr))}
.feat figure{display:block}
.feat figcaption{flex-direction:row;align-items:baseline;justify-content:space-between;padding-top:14px}
@media (max-width:760px){.feat{grid-template-columns:1fr}}
.kura{margin:0 0 clamp(40px,5vw,64px);grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"bread text" "cap cap";align-items:end;
  padding:clamp(28px,4vw,56px) clamp(20px,4vw,56px) clamp(20px,3vw,32px)}
.kura-text{height:auto;align-self:start}
.kura-text h3{writing-mode:vertical-rl;font-family:var(--mincho);font-weight:500;font-size:clamp(28px,3vw,44px);letter-spacing:.12em;margin:0;line-height:1.2}
.kura-body{line-height:2.4;font-size:clamp(13px,1.1vw,15.5px)}
.kura-cap{justify-content:flex-start}
.sig2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px}
@media (max-width:760px){
  .kura{grid-template-columns:1fr;grid-template-areas:"text" "bread" "cap"}
  .kura-text{justify-content:center}
  .sig2{grid-template-columns:1fr 1fr}
}

.feat figure.sm .fimg img{transform:scale(.72)}
.feat figure.sm:hover .fimg img{transform:scale(.75)}

/* v13: main-store style vertical logo + nav on the left of the hero */
.hero-side{position:absolute;left:clamp(36px,4.5vw,80px);top:50%;transform:translateY(-50%);z-index:3;color:#F2EEE6;display:flex;flex-direction:column;gap:clamp(48px,9vh,110px)}
.hs-logo{display:block;width:clamp(110px,9vw,150px);opacity:0;animation:fadein 1.4s ease .4s forwards}
.hs-logo svg{display:block;width:100%;aspect-ratio:243/284;height:auto;color:#F2EEE6;filter:drop-shadow(0 1px 12px rgba(0,0,0,.25))}
.hs-nav{display:flex;flex-direction:column;gap:clamp(18px,3.2vh,30px);opacity:0;animation:fadein 1.4s ease .8s forwards}
.hs-nav a{font-family:var(--mincho);font-size:clamp(14px,1.1vw,17px);letter-spacing:.2em;text-decoration:none;text-shadow:0 1px 10px rgba(0,0,0,.35);width:max-content;border-bottom:1px solid transparent;padding-bottom:3px;transition:border-color .3s}
.hs-nav a:hover,.hs-nav a[aria-current="page"]{border-bottom-color:rgba(242,238,230,.7)}
.hero-shade{background:
  linear-gradient(to right,rgba(16,20,30,.5),rgba(16,20,30,.12) 30%,transparent 45%),
  linear-gradient(to left,rgba(16,20,30,.55),rgba(16,20,30,.15) 40%,transparent 60%)}
@media (min-width:861px){
  .hd.on-hero:not(.solid){opacity:0;visibility:hidden;transform:translateY(-100%)}
  .hd{transition:opacity .4s,transform .4s,visibility .4s,background .4s,border-color .4s}
}
@media (max-width:860px){.hero-side{display:none}}
@media (prefers-reduced-motion:reduce){.hs-logo,.hs-nav{animation:none;opacity:1}}

/* v14: full-width shippo band, text floating in a clear centre */
.band2{position:relative;display:block;min-height:clamp(300px,34vw,460px);overflow:hidden;background:#172848}
.band2-art{position:absolute!important;inset:0;min-height:0!important}
.band2-art .shippo{-webkit-mask-image:radial-gradient(ellipse 34% 58% at 50% 50%,transparent 35%,#000 80%);mask-image:radial-gradient(ellipse 34% 58% at 50% 50%,transparent 35%,#000 80%)}
.band2-text{position:relative;z-index:2;min-height:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(56px,7vw,96px) 24px}
.band2-text .b2-en{margin:0 0 16px}
.band2-text .b2-main{font-size:clamp(17px,1.7vw,24px)!important}
@media (max-width:860px){.band2{min-height:320px}.band2-art .shippo{-webkit-mask-image:radial-gradient(ellipse 60% 40% at 50% 50%,transparent 30%,#000 85%);mask-image:radial-gradient(ellipse 60% 40% at 50% 50%,transparent 30%,#000 85%)}}

/* v14: reveal on scroll */
.rv{opacity:0;transform:translateY(26px);transition:opacity 1s ease,transform 1.2s var(--ease)}
.rv.in{opacity:1;transform:none}
.kura.rv .kura-bread img{transform:scale(1.04);transition:transform 1.8s var(--ease) .2s}
.kura.rv.in .kura-bread img{transform:none}
.hero-bg{will-change:transform}
.scroll-cue{display:none}
/* v15: let the pattern show through behind the text */
.band2-art .shippo{-webkit-mask-image:radial-gradient(ellipse 30% 50% at 50% 50%,rgba(0,0,0,.42) 20%,#000 75%);mask-image:radial-gradient(ellipse 30% 50% at 50% 50%,rgba(0,0,0,.42) 20%,#000 75%)}
.band2-text p{text-shadow:0 0 18px rgba(23,40,72,.9),0 0 4px rgba(23,40,72,.8)}
@media (max-width:860px){.band2-art .shippo{-webkit-mask-image:radial-gradient(ellipse 60% 40% at 50% 50%,rgba(0,0,0,.42) 20%,#000 80%);mask-image:radial-gradient(ellipse 60% 40% at 50% 50%,rgba(0,0,0,.42) 20%,#000 80%)}}
/* v16: plain pattern, text directly on top (no smoke / mask) */
.band2-art .shippo{-webkit-mask-image:none!important;mask-image:none!important}
.band2-art .room{background:linear-gradient(160deg,#22396C,#172848 75%)!important}
.band2-text p{text-shadow:none}
.band2-text .b2-en{color:#ECEAE3!important;opacity:1}

/* v17: faster page transition */
.koshi span{transition:transform .3s var(--ease)}
/* kura text: one column per line, never re-wrapped */
.kura-body{white-space:nowrap}
.kura-text{height:auto}
@media (max-width:760px){
  .concept p.body{max-width:none;font-size:14.5px;line-height:2.15;margin-bottom:1.3em}
  .concept .big{font-size:22px}
  .c-defs .def b{font-size:24px}
  .c-defs .def span{font-size:12.5px}
  .kura{padding:28px 18px 20px}
  .kura-text{gap:10px}
  .kura-text h3{font-size:28px}
  .kura-en{font-size:11px}
  .kura-body{font-size:12.5px;letter-spacing:.1em;line-height:2.1}
  .kura-cap{font-size:14px;justify-content:space-between;gap:10px}
}

/* v18: lighter, faster */
.rv{transform:translateY(16px);transition:opacity .6s ease,transform .7s var(--ease)}

/* v19: fast lattice transition — opens on first paint, no waiting for JS/fonts */
.koshi span{transition:transform .26s var(--ease)}
.arriving .koshi span{transition:none;animation:koshiOpen .45s var(--ease) both}
@keyframes koshiOpen{from{transform:scaleX(1.02)}to{transform:scaleX(0)}}

/* v20: icon-only burger so it isn't confused with the food menu */
.burger{width:44px;height:44px;padding:0;position:relative;font-size:0}
.burger span{position:absolute;left:10px;right:10px;height:1px;background:currentColor;transition:transform .3s var(--ease),top .3s var(--ease)}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){top:26px}
.hd.menu-open .burger span:nth-child(1){top:21.5px;transform:rotate(28deg)}
.hd.menu-open .burger span:nth-child(2){top:21.5px;transform:rotate(-28deg)}
/* no prices */
.plist li{display:block}
.feat figcaption,.kura-cap{justify-content:flex-start}
/* v21: teaser announcement */
.open{background:var(--gofun);border-bottom:1px solid var(--line)}
.open-in{display:flex;justify-content:center;align-items:center;gap:clamp(32px,7vw,120px);padding:clamp(48px,6vw,80px) 0}
.open-item{text-align:center}
.open-en{margin:0 0 12px;font-family:var(--mincho);font-size:12px;letter-spacing:.3em;color:var(--sumi-soft)}
.open-date{margin:0;font-family:var(--mincho);color:var(--accent-ink);display:flex;align-items:baseline;justify-content:center;gap:.25em;line-height:1}
.open-date span{font-size:clamp(34px,4.4vw,56px);letter-spacing:.04em;font-variant-numeric:lining-nums}
.open-date small{font-size:clamp(13px,1.2vw,16px);letter-spacing:.1em;color:var(--sumi)}
.open-date i{font-style:normal;font-size:clamp(20px,2vw,28px);margin:0 .2em;color:var(--sumi-soft)}
.open-jp{margin:16px 0 0;font-family:var(--mincho);font-size:clamp(14px,1.2vw,16px);letter-spacing:.3em}
.open-rule{width:1px;align-self:stretch;background:var(--line)}
@media (max-width:640px){.open-in{flex-direction:column;gap:28px}.open-rule{width:56px;height:1px;align-self:center}}
/* about: no defs, facts row */
.concept .big{margin-bottom:0}
.facts{display:flex;flex-wrap:wrap;gap:0;margin:clamp(24px,3vw,36px) 0 0;border-top:1px solid var(--line)}
.facts div{flex:1 1 0;min-width:110px;padding:16px 16px 0 0}
.facts div + div{padding-left:16px;border-left:1px solid var(--line)}
.facts dt{font-family:var(--mincho);font-size:12px;letter-spacing:.2em;color:var(--sumi-soft);margin-bottom:6px}
.facts dd{margin:0;font-family:var(--mincho);font-size:16px;letter-spacing:.08em}
/* live map */
.map-live{min-height:340px;padding:0}
.map-live iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.35) contrast(1.02)}
.concept .big{white-space:nowrap}
.facts dd{white-space:nowrap}
@media (max-width:640px){.facts div{min-width:0;padding-right:10px}.facts div + div{padding-left:10px}.facts dd{font-size:14px}}
/* v22: footer address matches surrounding type, sits lower */
.ft-in{align-items:center}
.ft address{font-family:var(--mincho);font-size:14px;letter-spacing:.14em;line-height:2.2;opacity:.9}
.ft nav{align-self:center}
@media (max-width:760px){.ft-in{align-items:center}.ft address{font-size:13px}}
.ft address .ft-hours{display:inline-block;margin-top:10px}
@media (max-width:760px){
  .ft-in{grid-template-columns:1fr;justify-items:start;gap:32px}
  .ft-logo{width:130px}
  .ft nav{grid-column:auto;width:100%}
}
/* v23: tighter concept */
#concept{padding-top:clamp(24px,3vw,48px)}
.concept .big{line-height:1.7}
.concept p.body{line-height:2.05;margin-bottom:1em}
.facts{margin-top:clamp(18px,2vw,28px)}
.facts div{padding-top:12px}
.facts dd{font-size:15px}
#concept .v-title{font-size:clamp(20px,2vw,26px);letter-spacing:.28em}
@media (max-width:760px){.ft-logo{justify-self:center;margin:0 auto}}
/* v24: mobile hero like the main store — big logo top-left, burger box top-right, copy on the right */
@media (max-width:860px){
  .hero.hero-full{min-height:0;height:76svh;max-height:720px}
  .hero-shade{background:linear-gradient(rgba(16,20,30,.45),transparent 30%),linear-gradient(to left,rgba(16,20,30,.5),transparent 55%)}
  .hero-side{display:block;left:20px;top:calc(env(safe-area-inset-top,0px) + 20px);transform:none}
  .hero-side .hs-nav{display:none}
  .hs-logo{width:92px}
  .hero-text{top:auto;bottom:32px;right:18px;transform:none;gap:14px}
  .hero-text h1.hc-main{font-size:24px;line-height:1.95}
  .hero-text .hc-rule{height:70px}
  .hero-text .hc-en{font-size:11px}
  /* header over hero: only a navy burger box */
  .hd.on-hero:not(.solid){background:transparent;border-bottom-color:transparent;backdrop-filter:none}
  .hd.on-hero:not(.solid) .brand{opacity:0;pointer-events:none}
  .hd.on-hero:not(.solid) .hd-in{padding-right:0}
  .hd.on-hero:not(.solid) .burger{width:64px;height:64px;background:#172848;color:#F2EEE6}
  .hd.on-hero:not(.solid) .burger span{left:20px;right:20px}
  .hd.on-hero:not(.solid) .burger span:nth-child(1){top:27px}
  .hd.on-hero:not(.solid) .burger span:nth-child(2){top:36px}
  .hd.on-hero.menu-open .burger span:nth-child(1),.hd.on-hero.menu-open .burger span:nth-child(2){top:31.5px}
  .hd .hd-in{height:64px}
}
/* v25: mobile hero closer to the main store — copy runs past the photo onto the page */
.hero-under{display:none}
@media (max-width:860px){
  .hero.hero-full{height:56svh;height:56vh;max-height:none}
  @supports (height:1svh){.hero.hero-full{height:56svh}}
  .hero-text{top:22.4svh;bottom:auto;right:20px}
  .hero-text h1.hc-main,.hero-text .hc-main{font-size:30px;letter-spacing:.22em;line-height:1.9}
  .hero-text .hc-rule{height:84px}
  .hero-under{display:block;position:relative;height:150px;overflow:hidden;background:var(--gofun)}
  .hero-under .hero-text{position:absolute;top:calc(22.4svh - 56svh);right:20px;color:var(--sumi)}
  .hero-under .hero-text .hc-main{color:var(--sumi);text-shadow:none;margin:0;writing-mode:vertical-rl;font-family:var(--mincho);font-weight:400}
  .hero-under .hero-text .hc-rule{background:var(--sumi)}
  .hero-under .hero-text .hc-en{color:var(--sumi-soft);text-shadow:none}
  .hu-mark{position:absolute;left:24px;top:40px;width:84px;aspect-ratio:231/155;height:auto;color:var(--accent-ink);opacity:.9}
  .hero-under + .sec{padding-top:24px}
  .hd.on-hero:not(.solid) .burger{width:76px;height:76px}
  .hd.on-hero:not(.solid) .burger span{left:24px;right:24px}
  .hd.on-hero:not(.solid) .burger span:nth-child(1){top:33px}
  .hd.on-hero:not(.solid) .burger span:nth-child(2){top:42px}
  .hd.on-hero.menu-open .burger span:nth-child(1),.hd.on-hero.menu-open .burger span:nth-child(2){top:37.5px}
  .hd.on-hero:not(.solid) .hd-in{height:76px}
  .hs-logo{width:100px}
}
@media (max-width:860px){.hero-shade{background:linear-gradient(rgba(16,20,30,.55),rgba(16,20,30,.1) 32%,transparent 45%),linear-gradient(to left,rgba(16,20,30,.5),transparent 55%)}}
/* v26: mobile copy smaller, fits inside the photo */
@media (max-width:860px){
  .hero-under{display:none!important}
  .hero.hero-full{height:66svh;height:66vh}
  @supports (height:1svh){.hero.hero-full{height:66svh}}
  .hero-text{top:auto;bottom:28px;right:18px;transform:none;gap:12px}
  .hero-text h1.hc-main{font-size:21px;letter-spacing:.2em;line-height:1.9}
  .hero-text .hc-rule{height:60px}
  .hero-text .hc-en{font-size:10.5px}
}