:root{
  --ground:      #F7F3EC;  
  --ground-deep: #E8DFCC;  
  --ink:         #1A1A1A;  
  --ink-soft:    #4E463B;  
  --ink-faint:   #6C624E;  
  --butter:      #815C2A;  
  --line:        #DED5C3;

  
  --butter-light:    #C08A3E;
  --ink-faint-light: #A2977F;

  --serif: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Segoe UI", system-ui, sans-serif;

  --page: 1180px;   
  --read: 760px;    

  
  --s1:  8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 40px;
  --s6: 48px;
  --s7: 64px;
  --s8: 80px;
  --s9: 96px;

  
  --tap: 48px;

  
  --stick: 0px;
}


*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--butter-light); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }


.notice{
  background:var(--ink); color:var(--ground);
  font-size:12px; line-height:1.7; letter-spacing:.02em;
  padding:9px 20px; text-align:center;
}
.notice b{ color:var(--butter-light); font-weight:500; }


.head{ border-bottom:1px solid var(--line); background:var(--ground); }
.head-in{
  max-width:var(--page); margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

.brand{
  display:flex; align-items:center; gap:11px;
  font-family:var(--serif); font-size:20px; letter-spacing:.09em;
  text-decoration:none; color:var(--ink); white-space:nowrap;
}
.brand img{ display:block; width:auto; height:56px; }

.nav{ display:flex; gap:22px; list-style:none; margin:0; padding:0; }
.nav a{
  font-size:12px; letter-spacing:.14em; text-decoration:none;
  color:var(--ink-soft); padding-bottom:3px; border-bottom:1px solid transparent;
}
.nav a:hover{ color:var(--ink); border-bottom-color:var(--butter-light); }
.nav a[aria-current]{ color:var(--ink); border-bottom-color:var(--ink); }


.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.nav-switch{ display:none; }
.nav-btn{ display:none; }


@media (max-width:1000px){
  :root{ --stick:69px; }   
  
  .head{ position:sticky; top:0; z-index:30; }
  .head-in{
    flex-wrap:wrap; column-gap:var(--s3); row-gap:0;
    padding:10px 20px; position:relative;
  }
  
  .brand img{ height:48px; }
  .brand{ gap:9px; font-size:19px; }
  .nav-switch{
    display:block; position:absolute; width:1px; height:1px;
    opacity:0; margin:0; pointer-events:none;
  }
  .nav-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:var(--tap); height:var(--tap); margin-right:-14px;  
    cursor:pointer; color:var(--ink);
  }
  .nav-switch:focus-visible ~ .nav-btn{ outline:2px solid var(--butter-light); outline-offset:-4px; }
  .nav-bars{ position:relative; display:block; width:20px; height:1.5px; background:var(--ink); }
  .nav-bars::before, .nav-bars::after{
    content:""; position:absolute; left:0; display:block;
    width:20px; height:1.5px; background:var(--ink); transition:transform .18s;
  }
  .nav-bars::before{ top:-6px; }
  .nav-bars::after{  top:6px; }
  .nav-switch:checked ~ .nav-btn .nav-bars{ background:transparent; }
  .nav-switch:checked ~ .nav-btn .nav-bars::before{ transform:translateY(6px)  rotate(45deg); }
  .nav-switch:checked ~ .nav-btn .nav-bars::after{  transform:translateY(-6px) rotate(-45deg); }

  .nav-wrap{ flex-basis:100%; display:none; }
  .nav-switch:checked ~ .nav-wrap{ display:block; }
  
  .nav{ display:block; padding:var(--s1) 0 var(--s2); }
  .nav li{ border-top:1px solid var(--line); }
  .nav a{
    display:flex; align-items:center; min-height:var(--tap);
    font-size:13px; letter-spacing:.14em; color:var(--ink);
    padding:0 0 0 14px; border-bottom:0; border-left:2px solid transparent;
  }
  .nav a:hover{ border-bottom-color:transparent; }
  .nav a[aria-current]{ border-left-color:var(--ink); border-bottom-color:transparent; }
}




.head-cta{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:38px; padding:0 18px; margin-left:var(--s1);
  font-size:12px; letter-spacing:.14em; text-decoration:none; white-space:nowrap;
  color:var(--ground); background:var(--ink); border:1px solid var(--ink);
}
.head-cta:hover{ background:var(--ground); color:var(--ink); }


.cta-bar{ display:none; }
@media (max-width:1000px){
  .head-cta{ display:none; }          
  .cta-bar{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:40;
    background:var(--ground); border-top:1px solid var(--line);
    
    padding:14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
    box-shadow:0 -3px 14px rgba(26,26,26,.13);
  }
  
  .cta-bar a{
    display:flex; align-items:center; justify-content:center;
    min-height:var(--tap); width:100%;
    font-size:14px; letter-spacing:.1em; text-decoration:none;
    color:var(--ground); background:var(--butter); border:1px solid var(--butter);
  }
  
  body.has-cta{ padding-bottom:calc(var(--tap) + 29px + env(safe-area-inset-bottom, 0px)); }
}


[id]{ scroll-margin-top:calc(var(--stick) + var(--s2)); }


.title h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(28px,5vw,42px); letter-spacing:.14em;
  margin:0 0 6px; text-wrap:balance;
}
.title .en{
  font-size:11px; letter-spacing:.34em; color:var(--ink-faint);
  text-transform:uppercase; margin:0 0 20px;
}
.title p{ margin:0; color:var(--ink-soft); font-size:14px; }


.flag{
  display:inline-block; vertical-align:2px;
  font-family:var(--sans); font-size:10px; letter-spacing:.08em; line-height:1.5;
  color:var(--butter); border:1px solid var(--butter);
  padding:1px 6px; margin-left:8px; white-space:nowrap;
}


.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--tap);           
  text-decoration:none;
  font-size:13px; letter-spacing:.1em; padding:13px 26px;
  border:1px solid var(--ink); color:var(--ink);
}
.btn:hover{ background:var(--ink); color:var(--ground); }
.btn.is-quiet{ border-color:var(--ink-faint-light); color:var(--ink-soft); }
.btn.is-quiet:hover{ background:none; border-color:var(--ink); color:var(--ink); }


.notes{ margin:0; padding:0; list-style:none; }
.notes li{
  display:flex; justify-content:space-between; gap:20px;
  padding:11px 0; border-bottom:1px solid var(--line);
  font-size:13px;
}
.notes .k{ color:var(--ink); }
.notes .v{ color:var(--ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap; }


.notes.is-main li{ padding:15px 0; align-items:baseline; }
.notes.is-main .k{ font-family:var(--serif); font-size:15px; letter-spacing:.03em; }
.notes.is-main .k em{
  display:block; font-style:normal; font-family:var(--sans);
  font-size:11.5px; line-height:1.7; color:var(--ink-faint); margin-top:2px;
}
.notes.is-main .v{ font-size:15px; }
.sub-head{
  font-size:10.5px; letter-spacing:.2em; color:var(--ink-faint);
  text-transform:uppercase; margin:var(--s5) 0 4px;
}
.sub-head:first-child{ margin-top:0; }


.sando-head{
  margin:var(--s5) 0 var(--s3); padding-top:var(--s3);
  border-top:1px solid #3A3835;
  font-size:12.5px; letter-spacing:.06em; color:#B7AE9E;
}
.sando-head b{ color:var(--ground); font-weight:500; }
.sando-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3);
  margin:0; padding:0; list-style:none;
}

.sando{ display:grid; grid-template-columns:112px 1fr; gap:var(--s2); align-items:center; }
.sando .shot{ aspect-ratio:1/1; overflow:hidden; background:#262524; }
.sando .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.sando h3{ word-break:keep-all; overflow-wrap:anywhere;   
  font-family:var(--serif); font-weight:500; font-size:15px;
  letter-spacing:.04em; margin:0 0 4px; line-height:1.5; color:var(--ground);
}
.sando .price{ font-size:13.5px; font-variant-numeric:tabular-nums; margin:0; color:var(--ground); }

.sando .where{ font-size:12.5px; letter-spacing:.08em; margin:2px 0 0; color:#B7AE9E; }
@media (max-width:560px){ .sando-grid{ grid-template-columns:1fr; } }


.price .tag{ margin-left:.9em; font-size:11.5px; letter-spacing:.08em; color:#B7AE9E; white-space:nowrap; }
.ltd-notice{
  margin:0 0 var(--s4); padding:10px 14px; border:1px solid var(--butter-light);
  font-size:12.5px; line-height:1.8; color:var(--ground);
}


.sando-head.is-light{
  border-top-color:var(--line); color:var(--ink-faint);
}
.sando-head.is-light b{ color:var(--ink); }
.is-light + .sando-grid .sando h3{ color:var(--ink); }
.is-light + .sando-grid .sando .price{ color:var(--ink-soft); }
.is-light + .sando-grid .sando .shot{ background:var(--ground-deep); }



.foot{ border-top:1px solid var(--line); }
.foot-in{
  max-width:var(--page); margin:0 auto; padding:var(--s5) 20px var(--s7);
}
.foot-nav ul{
  list-style:none; margin:0 0 var(--s3); padding:0;
  display:flex; flex-wrap:wrap; gap:0 var(--s5);
}
.foot-nav a{
  display:flex; align-items:center; min-height:var(--tap);
  font-size:13px; letter-spacing:.06em; text-decoration:none; color:var(--ink);
}
.foot-nav a:hover{ color:var(--butter); }
.foot-end{
  display:flex; justify-content:space-between; gap:var(--s2); flex-wrap:wrap;
  align-items:center; padding-top:var(--s1); border-top:1px solid var(--line);
  font-size:12px; color:var(--ink-faint); letter-spacing:.04em;
}
.foot-end a{
  display:inline-flex; align-items:center; min-height:var(--tap);
  color:var(--ink-faint); text-decoration:none;
}
.foot-end a:hover{ color:var(--ink); }

.foot-end .corp{ display:block; margin-top:3px; color:var(--ink-faint); }
@media (min-width:561px){ .foot-end .corp{ display:inline; margin-top:0; }
  .foot-end .corp::before{ content:"　／　"; } }
.foot-end a[aria-current]{ color:var(--ink); }

.foot-links{ display:inline-flex; flex-wrap:wrap; column-gap:var(--s3); }



.head-end{ display:flex; align-items:center; gap:var(--s2); }
.nav-lang{ display:none; }
.head-lang{
  display:inline-flex; align-items:center; justify-content:center; min-height:38px;
  padding:0 4px;
  font-size:12px; letter-spacing:.12em; text-decoration:none; white-space:nowrap;
  color:var(--ink-soft); border-bottom:1px solid transparent;
}
.head-lang:hover{ color:var(--ink); }
.head-lang:lang(ja){ letter-spacing:.06em; }

@media (min-width:1001px) and (max-width:1099px){ .head-lang{ display:none; } }
@media (max-width:1000px){
  .head-end{ order:2; margin-left:auto; }
  .head-lang{ min-height:var(--tap); padding:0 10px; }
  .nav-btn{ order:3; }
  .nav-wrap{ order:4; }
  
  .head-lang:lang(ja){ display:none; }
  .nav-lang{ display:block; }
}


@media (max-width:560px){
  .foot-nav ul{ display:block; margin-bottom:var(--s2); }
  .foot-nav li{ border-bottom:1px solid var(--line); }
}


.site-notice{ background:var(--ground-deep); border-bottom:1px solid var(--line); }
.site-notice[hidden]{ display:none; }
.site-notice p{
  max-width:var(--page); margin:0 auto; padding:0 20px;
  font-size:13px; line-height:1.7; letter-spacing:.04em; color:var(--ink);
}
.site-notice p[hidden]{ display:none; }
.site-notice a{
  display:flex; align-items:center; gap:12px; min-height:var(--tap);
  padding:6px 0; text-decoration:none; color:inherit;
}
.site-notice a::before{
  content:""; flex:none; width:3px; align-self:stretch; margin:4px 0;
  background:var(--butter);
}
.site-notice a::after{ content:"→"; flex:none; color:var(--butter); }   
.site-notice a:hover{ color:var(--butter); }
@media (max-width:560px){ .site-notice p{ font-size:12.5px; } }


.store-card .shot, .store-shot{ position:relative; }
.store-badge{
  position:absolute; left:12px; top:12px; z-index:1;
  background:var(--ink); color:var(--ground);
  font-size:12px; letter-spacing:.06em; line-height:1.5; padding:5px 11px;
}
.store-badge[hidden]{ display:none; }


.hero-stage{ position:relative; background:var(--ink); overflow:hidden; }
.hero-stage picture{ display:block; }

.hero-media{
  display:block; width:100%; height:clamp(420px,72vh,720px);
  object-fit:cover; object-position:center 58%;
}

.hero-video{ object-position:center 30%; filter:brightness(1.1) contrast(.92) saturate(1.06); }
.hero-video[hidden], .hero-pic[hidden]{ display:none; }

@media (min-width:561px){
  :root{ --hero-top:85px; }
  body:has(.site-notice:not([hidden])){ --hero-top:134px; }
  .hero-stage:has(.hero-video:not([hidden])){ background:var(--ground); }
  .hero-media.hero-video{
    height:auto; aspect-ratio:16 / 9; margin-inline:auto; object-fit:cover;
    width:min(100%, max(640px, calc((100vh - var(--hero-top)) * 16 / 9)));
    width:min(100%, max(640px, calc((100svh - var(--hero-top)) * 16 / 9)));
  }
}
@media (min-width:561px) and (max-width:1000px){
  :root{ --hero-top:69px; }
  body:has(.site-notice:not([hidden])){ --hero-top:118px; }
}

@media (max-width:560px){
  .hero-media{ height:auto; aspect-ratio:1 / 1; max-height:70vh; max-height:70svh; object-position:center 50%; }
  .hero-stage .hero-video:not([hidden]){ position:absolute; inset:0; width:100%; height:100%; max-height:none; }
  .hero-stage .hero-pic{ position:relative; z-index:1; transition:opacity .5s ease; }
  .hero-stage.is-live .hero-pic{ opacity:0; pointer-events:none; }
}