

  :root {
    --wrap-pad:  50px;
    --section-y: 135px;
    --header-h:  6rem;
    --fs-body:   18px;
    --lh-body: 1.89;
    --ls-body:   .04em;
  }

  .site-header--overlay { padding-block: 2.25rem; }

  .drawer-brand-col { padding: 2.75rem 3rem; }
  .drawer-brand { font-size: 1.9rem; }

  .drawer-menu {
    justify-content: flex-start;
    gap: 2.5rem;
    padding-block: 6rem 3rem;
  }

  .drawer-close { top: 2rem; right: 2.5rem; }

  .sec-ttl-main { font-size: 1.6rem; }
  .sec-ttl-sub  { font-size: 2rem; }

  .note-sm { font-size: .78rem; line-height: 1.714; }

  .btn { min-height: 56px; font-size: 1rem; letter-spacing: .04em; }

  .sticky-cta { display: flex; }
  .sticky-cta a { min-height: 117px; font-size: 1.15rem; letter-spacing: .22em; }
  body.has-sticky { padding-bottom: var(--sticky-bar, 117px); }

  .gallery-grid { gap: 1rem; }

  .site-footer { padding-block: 170px 220px; }

  #concept .wrap + .wrap,
  #course .wrap + .wrap,
  #kodawari .wrap + .wrap { margin-top: 135px; }

  #course .wrap h3 { font-size: 1.45rem; }

  #course .wrap ul { font-size: .92rem; }

  #course .carousel-prev,
  #souvenir .carousel-prev { left: -2.6rem; }
  #course .carousel-next,
  #souvenir .carousel-next { right: -2.6rem; }

  #chef figure + p { font-size: 1.3rem; }

  #souvenir .frame-box {
    display: grid;
    grid-template-columns: 47% 47%;
    justify-content: space-between;
    align-items: center;
    column-gap: 6%;
    padding: 3.25rem 3rem;
  }
  #souvenir figure { margin: 0; }
  #souvenir h3 { margin-top: 1.2em; font-size: 1.5rem; }
  #souvenir h3 + p { font-size: 1.1rem; }

  .eyebrow-dash { font-size: .95rem; }

  .site-header--overlay .header-fix { gap: 1.25rem; }

  #concept .wrap:nth-of-type(odd) > figure,
  #kodawari .wrap:nth-of-type(odd) > figure { order: 2; justify-self: start; }
  #concept .wrap:nth-of-type(even) > figure,
  #kodawari .wrap:nth-of-type(even) > figure { order: 0; justify-self: end; }

  #lunch .carousel-prev,
  #dinner .carousel-prev { left: -2.6rem; }
  #lunch .carousel-next,
  #dinner .carousel-next { right: -2.6rem; }

  #lunch .wrap h3,
  #dinner .wrap h3 { font-size: 1.45rem; }
  #lunch .wrap h3 + p,
  #dinner .wrap h3 + p { font-size: 1.1rem; }
  #lunch .note-sm,
  #dinner .note-sm { max-width: 45em; margin-inline: auto; }

  #concept .wrap { display: block; max-width: 830px; }

main p { max-width: 45em; }
main .txt-center > p,
main p.txt-center { margin-inline: auto; }

  .to-top { bottom: calc(var(--sticky-h, 8.3rem) + 8px); }

.site-header--overlay { align-items: center; }

.hero { min-height: 100svh; }
.hero-brand { margin-bottom: 2em; font-size: 3.6rem; }
.hero-brand .logo-img { width: 58%; max-width: 320px; }
.hero-ttl { font-size: .8rem; }
.hero-sub { font-size: .66rem; }

#concept .wrap,
#course .wrap,
#kodawari .wrap {
  display: grid;
  grid-template-columns: 47% 47%;
  justify-content: space-between;
  align-items: center;
  column-gap: 6%;
}
#concept .wrap > figure,
#course .wrap > figure,
#kodawari .wrap > figure { margin: 0; }
#concept .wrap:nth-of-type(even) > figure,
#course  .wrap:nth-of-type(odd)  > figure { order: 2; }

#concept .wrap,
#course .wrap,
#kodawari .wrap,
#souvenir .wrap { max-width: 1280px; }
#concept .wrap > figure,
#course .wrap > figure,
#kodawari .wrap > figure { max-width: 461px; justify-self: end; }
#concept .wrap:nth-of-type(even) > figure,
#course  .wrap:nth-of-type(odd)  > figure { justify-self: start; }
#souvenir .frame-box > figure { max-width: 415px; justify-self: end; }

#concept .wrap { display: block; max-width: 830px; }

.sticky-cta {
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease),
              visibility var(--dur) var(--ease);
}
body.is-scrolled .sticky-cta {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}

.site-header--overlay { padding-block: 28px; transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), padding var(--dur) var(--ease), min-height var(--dur) var(--ease); }
body.is-scrolled .site-header--overlay { padding-block: 12px; min-height: 80px; }
.site-header--overlay .logo { display: flex; align-items: center; margin-right: auto; }
.site-header--overlay .logo-img { width: 72px; height: 72px; object-fit: contain; transition: width var(--dur) var(--ease), height var(--dur) var(--ease); }
body.is-scrolled .site-header--overlay .logo-img { width: 56px; height: 56px; }

.hero-brand .logo-img { width: 200px; max-width: none; }

.gr-oc .oc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; overflow: visible; }
.gr-oc .carousel-prev,
.gr-oc .carousel-next { display: none; }
.gr-oc .oc-ttl { font-size: 1.4rem; }

#reserve h3 { max-width: 830px; margin: 48px auto 16px; font-size: 20px; }
#reserve .policy-list { max-width: 830px; margin-inline: auto; }
#reserve .policy-list dt { flex: 0 0 13em; }

.drawer-brand-col { padding-top: 32px; }
.drawer-brand-img { display: block; width: 128px; height: auto; }
.drawer-menu { padding-top: 208px; }

:root { --footer-brand-img-h: 128px; }

.hero-brand > span { font-size: 1.3rem; }
#kodawari h3,
#reserve .sec-ttl + h3 { font-size: 1.45rem; }
