@charset "UTF-8";

/* =====================================================
  ROOT
===================================================== */
:root{
  --bg:var(--fb-bg);
  --text:var(--fb-text);
  --text-soft:var(--fb-muted);

  --title-color:rgba(244,243,239,.92);
  --kicker-color:rgba(244,243,239,.72);
  --link-color:rgba(244,243,239,.72);

  --bar-max:980px;
  --bar-gutter:20px;

  --img-size:388px;

  --title-size:clamp(24px, 2.2vw, 26px);
  --title-line:1.10;

  --section-title-size:clamp(24px, 2.2vw, 26px);
  --section-title-line:1.14;

  --bar-hover-scale:1.014;
  --bar-hover-ease:cubic-bezier(.22,.61,.36,1);

  --bar-hover-light:rgba(244,243,239,.18);
  --bar-hover-light-strong:rgba(244,243,239,.26);
  --bar-hover-text:#f4f3ef;

  --bar-section-pad-top:18px;
  --bar-section-pad-bottom:72px;

  --bar-head-gap:12px;
  --bar-lead-gap:16px;

  --bar-scenes-gap:10px;
}

/* =====================================================
  BASE
===================================================== */
html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;
  background:var(--bg);
}

body{
  background:var(--bg);
  color:var(--text);
  padding-top:72px;
}

main.oj-page,
main.bar-page{
  background:var(--bg);
}

section[id]{
  scroll-margin-top:96px;
}

/* =====================================================
  ANCHOR FIX
  One-Eyed Jack の高さに合わせる
===================================================== */
#scenes{
  scroll-margin-top:168px;
}

#menu,
#private,
#access{
  scroll-margin-top:152px;
}

::selection{
  background:rgba(244,243,239,.22);
  color:#fff;
}

.bar-shell{
  width:min(100%, var(--bar-max));
  margin-inline:auto;
  padding-inline:var(--bar-gutter);
  box-sizing:border-box;
}

/* =====================================================
  PAGE HEAD
  現在のPHP構造用（アンカーのみ）
===================================================== */
.bar-intro{
  padding:34px 0 20px;
  border-bottom:1px solid var(--fb-line-soft);
}

.bar-intro__grid{
  display:grid;
  grid-template-columns:1fr;
}

.bar-intro__right{
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
  width:100%;
  min-width:0;
  padding-top:56px;
}

.bar-intro__nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:flex-start;
  gap:0 24px;
  margin:0;
  padding:0;
  width:540px;
  max-width:100%;
}

.bar-intro__nav-link{
  position:relative;
  display:inline-block;
  padding:0 0 8px;
  font-family:var(--fb-en);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--link-color);
  text-decoration:none;
  transition:
    color .35s ease,
    opacity .35s ease;
}

.bar-intro__nav-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:currentColor;
  opacity:.42;
  transform:scaleX(.38);
  transform-origin:left center;
  transition:
    transform .4s var(--bar-hover-ease),
    opacity .35s ease,
    color .35s ease;
}

.bar-anchor{
  display:none;
}

/* =====================================================
  ONE PAGE SECTION
===================================================== */
.bar-section{
  padding:var(--bar-section-pad-top) 0 var(--bar-section-pad-bottom);
}

.bar-section + .bar-section{
  padding-top:10px;
}

.bar-section__head{
  margin:0 0 var(--bar-head-gap);
}

.bar-section__eyebrow{
  margin:0 0 2px;
  font-size:10px;
  letter-spacing:.16em;
  color:var(--kicker-color);
}

.bar-section__title{
  margin:0;
  font-family:var(--fb-en);
  font-size:var(--section-title-size);
  line-height:var(--section-title-line);
  color:var(--title-color);
}

.bar-section__lead{
  margin:0 0 var(--bar-lead-gap);
  max-width:640px;
  font-size:12px;
  line-height:1.9;
  color:var(--text-soft);
}

.bar-section__body{
  font-size:12px;
  line-height:1.9;
  color:var(--text-soft);
}

.bar-section__body p{
  margin:0;
}

.bar-section__body p + p{
  margin-top:12px;
}

.bar-section__grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) var(--img-size);
  gap:40px;
  align-items:start;
}

.bar-section__grid--media-left{
  grid-template-columns:var(--img-size) minmax(0, 1fr);
}

.bar-section__block{
  padding:16px 0;
  border-top:1px solid var(--fb-line-soft);
}

.bar-section__block:last-child{
  border-bottom:1px solid var(--fb-line-soft);
}

/* =====================================================
  MENU / PRIVATE IMAGE SIZE UNIFICATION
===================================================== */
#menu .bar-section__grid{
  grid-template-columns:minmax(0, 1fr) 540px;
  gap:40px;
  align-items:start;
}

#menu .bar-section__img{
  width:540px;
  aspect-ratio:16 / 10;
  justify-self:end;
}

#private .bar-section__grid,
#private .bar-section__grid--media-left{
  grid-template-columns:540px minmax(0, 1fr);
  gap:40px;
  align-items:start;
}

#private .bar-section__img{
  width:540px;
  aspect-ratio:16 / 10;
}

#menu .bar-section__img img,
#private .bar-section__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

#private .bar-section__grid:first-of-type{
  margin-bottom:34px;
}

/* =====================================================
  INFO ROWS
===================================================== */
.bar-meta{
  border-top:1px solid var(--fb-line-soft);
}

.bar-meta__row{
  display:grid;
  grid-template-columns:132px minmax(0, 1fr);
  gap:18px;
  padding:14px 0;
  border-bottom:1px solid var(--fb-line-soft);
}

.bar-meta__term{
  font-family:var(--fb-en);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--kicker-color);
}

.bar-meta__desc{
  font-size:12px;
  line-height:1.9;
  color:var(--text-soft);
}

.bar-meta__en{
  display:block;
  margin-top:4px;
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(244,243,239,.46);
}

/* CTA row */
.bar-meta__row--cta .bar-meta__desc{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}

.bar-meta__cta-link{
  order:1;
  font-family:var(--fb-en);
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(244,243,239,.78);
  text-decoration:none;
  position:relative;
  display:inline-block;
  padding-bottom:3px;
  line-height:1;
  margin-bottom:2px;
}

.bar-meta__cta-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:currentColor;
  opacity:.45;
  transform:scaleX(.32);
  transform-origin:left;
  transition:
    transform .4s cubic-bezier(.22,.61,.36,1),
    opacity .35s ease;
}

/* Reserve note */
.bar-meta__note{
  order:2;
  margin-top:4px;
  font-size:11px;
  line-height:1.6;
  color:rgba(244,243,239,.6);
}

.bar-meta__note-en{
  order:3;
  margin-top:2px;
  font-size:10px;
  letter-spacing:.08em;
  color:rgba(244,243,239,.42);
}

.bar-meta__tel{
  order:4;
  margin-top:8px;
}

.bar-meta__tel a{
  font-family:var(--fb-en);
  font-size:11px;
  letter-spacing:.12em;
  color:rgba(244,243,239,.78);
  text-decoration:none;
  position:relative;
  padding-bottom:2px;
}

.bar-meta__tel a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:currentColor;
  opacity:.4;
}

/* SNS */
.bar-meta__desc--sns{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.bar-sns__item{
  line-height:1.6;
}

.bar-sns__label{
  display:block;
  font-family:var(--fb-en);
  font-size:10px;
  letter-spacing:.16em;
  color:rgba(244,243,239,.5);
  margin-bottom:2px;
}

/* =====================================================
  TOP MENU PREVIEW
===================================================== */
.bar-menu-vertical{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  border-top:1px solid rgba(244,243,239,.08);
  border-bottom:1px solid rgba(244,243,239,.08);
  align-items:stretch;
}

.bar-menu-vertical__item{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:8px;
  min-height:92px;
  padding:16px 14px 18px 0;
  text-decoration:none;
  color:inherit;
  border-right:none;
  transition:
    opacity .35s ease,
    color .35s ease;
}

.bar-menu-vertical__item:last-child{
  border-right:none;
}

.bar-menu-vertical__name{
  display:block;
  font-size:14px;
  line-height:1.28;
  letter-spacing:.01em;
  min-height:1.28em;
  color:rgba(244,243,239,.88);
}

.bar-menu-vertical__price{
  display:block;
  font-family:var(--fb-en);
  font-size:11px;
  line-height:1.2;
  letter-spacing:.09em;
  color:rgba(244,243,239,.60);
  margin-top:auto;
  padding-top:6px;
}

/* =====================================================
  HOVER
===================================================== */
@media (hover:hover){
  .bar-menu-vertical__item:hover{
    opacity:.82;
  }
}

/* =====================================================
  MOBILE
===================================================== */
@media (max-width:768px){
  .bar-menu-vertical{
    grid-template-columns:1fr;
    border-top:1px solid rgba(244,243,239,.08);
    border-bottom:1px solid rgba(244,243,239,.08);
  }

  .bar-menu-vertical__item{
    min-height:auto;
    padding:12px 0 13px;
    gap:4px;
    border-right:none;
    border-bottom:none;
  }
}

/* =====================================================
  IMAGE CONTAINERS
===================================================== */
.bar-info__img,
.bar-section__img,
.bar-gallery-editorial__item{
  position:relative;
  width:100%;
  overflow:hidden;
  background:rgba(255,255,255,.02);
}

.bar-info__img,
.bar-section__img{
  aspect-ratio:1 / 1;
}

.bar-section__img--wide{
  aspect-ratio:16 / 10;
}

.bar-info__img::after,
.bar-section__img::after,
.bar-gallery-editorial__item::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.10),
    rgba(0,0,0,.22)
  );
  opacity:.88;
  pointer-events:none;
  transition:opacity .55s var(--bar-hover-ease);
}

.js-lightbox-link{
  display:block;
  width:100%;
  height:100%;
  cursor:zoom-in;
}

/* =====================================================
  IMAGE TONE
===================================================== */
.bar-info__img img,
.bar-section__img img,
.bar-gallery-editorial__item img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  filter:
    saturate(.82)
    contrast(1.06)
    brightness(.94);
  transform:scale(1);
  transform-origin:center center;
  transition:
    transform .8s var(--bar-hover-ease),
    filter .6s var(--bar-hover-ease),
    opacity .45s ease;
}

/* =====================================================
  SCENES EDITORIAL
  現在のPHP構造用
===================================================== */
.bar-gallery-editorial{
  padding-top:14px;
  padding-bottom:78px;
}

.bar-gallery-editorial__layout{
  display:block;
  width:100%;
  margin-inline:0;
}

.bar-gallery-editorial__head{
  display:block;
  margin:0 0 12px;
  padding-top:0;
}

.bar-gallery-editorial__kicker{
  margin:0 0 14px;
  font-size:10px;
  letter-spacing:.16em;
  color:var(--kicker-color);
}

.bar-gallery-editorial__title{
  margin:0;
  font-family:var(--fb-en);
  font-size:var(--section-title-size);
  line-height:var(--section-title-line);
  color:var(--title-color);
}

.bar-gallery-editorial__grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:var(--bar-scenes-gap);
}

.bar-gallery-editorial__item{
  margin:0;
}

.bar-gallery-editorial__item a{
  display:block;
  width:100%;
  height:100%;
  text-decoration:none;
}

.bar-gallery-editorial__item--hero{
  grid-column:1 / span 8;
  aspect-ratio:8 / 5.6;
}

.bar-gallery-editorial__item--top-right{
  grid-column:9 / span 4;
  aspect-ratio:4 / 5.6;
}

.bar-gallery-editorial__item--mid-left{
  grid-column:1 / span 4;
  aspect-ratio:1 / 1;
}

.bar-gallery-editorial__item--mid-center{
  grid-column:5 / span 4;
  aspect-ratio:1 / 1;
}

.bar-gallery-editorial__item--mid-right{
  grid-column:9 / span 4;
  aspect-ratio:1 / 1;
}

.bar-gallery-editorial__item--bottom-wide{
  grid-column:1 / span 12;
  aspect-ratio:12 / 5.2;
}

/* =====================================================
  MAP
===================================================== */
.bar-map{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  overflow:hidden;
  background:#0b0b0b;
}

.bar-map--wide{
  aspect-ratio:16 / 10;
}

.bar-map iframe{
  width:100%;
  height:100%;
  display:block;
  filter:
    grayscale(100%)
    brightness(.96)
    contrast(.92);
  opacity:.94;
  transition:
    opacity .4s var(--bar-hover-ease),
    transform .7s var(--bar-hover-ease);
}

.bar-map::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(10,11,14,.16);
  pointer-events:none;
  transition:opacity .4s var(--bar-hover-ease);
}

/* =====================================================
  ACCESS : FULL WIDTH / NO MAP
===================================================== */
#access .bar-section__body{
  width:100%;
  max-width:none;
}

#access .bar-meta{
  width:100%;
}

#access .bar-meta__row{
  grid-template-columns:132px minmax(0, 1fr);
  gap:18px;
}

#access .bar-meta__desc{
  max-width:none;
}

#access .bar-meta__desc br{
  display:block;
}

#access .bar-meta__term{
  align-self:start;
}

#access .bar-meta__row:last-child{
  border-bottom:1px solid var(--fb-line-soft);
}

/* =====================================================
  LINKS
===================================================== */
.bar-info__body a,
.bar-intro__lead a,
.bar-section__body a,
.bar-meta__desc a{
  color:var(--link-color);
  text-decoration:none;
  position:relative;
  display:inline-block;
  transition:
    opacity .35s ease,
    color .35s ease;
}

.bar-info__body a[data-plain]::after,
.bar-intro__lead a[data-plain]::after,
.bar-section__body a[data-plain]::after{
  display:none;
}

.bar-info__body > a::before,
.bar-intro__lead > a::before,
.bar-section__body > a::before,
.bar-info__body p > a::before,
.bar-intro__lead p > a::before,
.bar-section__body p > a::before,
.bar-meta__desc a::before{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:100%;
  height:1px;
  background:currentColor;
  opacity:.38;
  transform:scaleX(.78);
  transform-origin:left center;
  transition:
    transform .4s var(--bar-hover-ease),
    opacity .35s ease;
}

.bar-menu-preview-grid__more{
  color:var(--link-color);
  text-decoration:none;
  position:relative;
  display:inline-block;
  transition:
    opacity .35s ease,
    color .35s ease;
}

.bar-menu-preview-grid__more::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:100%;
  height:1px;
  background:currentColor;
  opacity:.38;
  transform:scaleX(.78);
  transform-origin:left center;
  transition:
    transform .4s var(--bar-hover-ease),
    opacity .35s ease;
}

/* =====================================================
  PRICE + RESERVE
===================================================== */
.bar-meta__desc--price{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
}

.bar-meta__price{
  font-size:12px;
  color:rgba(244,243,239,.72);
  line-height:1.2;
  padding-bottom:1px;
}

.bar-meta__desc--price a{
  font-family:var(--fb-en);
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(244,243,239,.68);
  text-decoration:none;
  position:relative;
  top:1px;
  line-height:1;
  padding-bottom:3px;
}

.bar-meta__desc--price a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:currentColor;
  opacity:.45;
  transform:scaleX(.32);
  transform-origin:left;
  transition:
    transform .4s cubic-bezier(.22,.61,.36,1),
    opacity .35s ease;
}

#private .bar-meta__row:last-child .bar-meta__desc--price{
  min-height:18px;
}

/* =====================================================
  FOOTER
===================================================== */
footer{
  border-top:1px solid var(--fb-line-soft);
  padding-top:16px;
}

.fb-footer__inner{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
}

.fb-footer__menu{
  display:flex;
  gap:24px;
  list-style:none;
  padding:0;
  margin:0;
}

.fb-footer__menu a{
  position:relative;
  font-family:var(--fb-en);
  font-size:10px;
  color:var(--text-soft);
  text-decoration:none;
  transition:
    color .35s ease,
    opacity .35s ease;
}

.fb-footer__menu a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:100%;
  height:1px;
  background:currentColor;
  opacity:0;
  transform:scaleX(.78);
  transform-origin:left center;
  transition:
    opacity .35s ease,
    transform .4s var(--bar-hover-ease);
}

.fb-footer__copy{
  margin-left:auto;
  font-family:var(--fb-en);
  font-size:10px;
  color:var(--text-soft);
}

/* =====================================================
  LIGHTBOX
===================================================== */
#fbLightbox,
.lightbox-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:min(4vw, 34px);
  box-sizing:border-box;
  background:
    radial-gradient(circle at center, rgba(0,0,0,.10) 0%, rgba(0,0,0,.34) 44%, rgba(0,0,0,.88) 100%);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;
  pointer-events:none;
  transition:
    opacity .42s ease,
    backdrop-filter .42s ease,
    -webkit-backdrop-filter .42s ease;
}

#fbLightbox.is-open,
.lightbox-overlay.is-open{
  opacity:1;
  pointer-events:auto;
}

.fb-lightbox__inner,
.lightbox-inner{
  position:relative;
  width:auto;
  max-width:min(90vw, 1440px);
  max-height:90vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:min(2.6vw, 24px);
  box-sizing:border-box;
}

.fb-lightbox__inner::before,
.lightbox-inner::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at center,
      rgba(255,255,255,0) 52%,
      rgba(255,255,255,.02) 68%,
      rgba(0,0,0,.14) 100%);
  opacity:0;
  transform:scale(.985);
  transition:
    opacity .7s ease,
    transform .8s cubic-bezier(.22,.61,.36,1);
}

#fbLightbox.is-open .fb-lightbox__inner::before,
.lightbox-overlay.is-open .lightbox-inner::before{
  opacity:1;
  transform:scale(1);
}

.fb-lightbox__img,
.lightbox-inner img{
  position:relative;
  z-index:1;
  display:block;
  max-width:100%;
  max-height:calc(90vh - min(5.2vw, 48px));
  width:auto;
  height:auto;
  filter:none !important;
  opacity:0;
  transform:scale(.965);
  transform-origin:center center;
  box-shadow:
    0 24px 80px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.04);
  transition:
    opacity .46s ease,
    transform .82s cubic-bezier(.22,.61,.36,1),
    box-shadow .45s ease;
}

#fbLightbox.is-open .fb-lightbox__img,
.lightbox-overlay.is-open .lightbox-inner img{
  opacity:1;
  transform:scale(1);
}

.fb-lightbox__close{
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
  width:42px;
  height:42px;
  border:0;
  background:transparent;
  color:rgba(244,243,239,.82);
  cursor:pointer;
  transition:opacity .35s ease, transform .35s ease, color .35s ease;
}

.fb-lightbox__close::before,
.fb-lightbox__close::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:18px;
  height:1px;
  background:currentColor;
  transform-origin:center;
}

.fb-lightbox__close::before{
  transform:translate(-50%,-50%) rotate(45deg);
}

.fb-lightbox__close::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}

body.has-lightbox,
body.fb-lightbox-open{
  overflow:hidden;
}

/* =====================================================
  HOVER UNIFICATION
===================================================== */
@media (hover:hover){

  .bar-intro__nav-link:hover{
    color:var(--bar-hover-text);
  }

  .bar-intro__nav-link:hover::after{
    opacity:.88;
    transform:scaleX(1);
  }

  .bar-menu-vertical__item:hover{
    opacity:.82;
  }

  .bar-menu-preview-grid__more:hover::after{
    transform:scaleX(1);
    opacity:1;
  }

  .bar-info__body > a:hover::before,
  .bar-intro__lead > a:hover::before,
  .bar-section__body > a:hover::before,
  .bar-info__body p > a:hover::before,
  .bar-intro__lead p > a:hover::before,
  .bar-section__body p > a:hover::before,
  .bar-meta__desc a:hover::before{
    opacity:.88;
    transform:scaleX(1);
  }

  .bar-meta__desc--price a:hover{
    color:#f4f3ef;
  }

  .bar-meta__desc--price a:hover::after{
    transform:scaleX(1);
    opacity:.9;
  }

  .bar-meta__cta-link:hover{
    color:#f4f3ef;
  }

  .bar-meta__cta-link:hover::after{
    transform:scaleX(1);
    opacity:.9;
  }

  .bar-meta__tel a:hover{
    color:#f4f3ef;
  }

  .bar-meta__tel a:hover::after{
    opacity:.85;
  }

  .bar-info__img:hover img,
  .bar-info__img a:hover img,
  .bar-section__img:hover img,
  .bar-section__img a:hover img,
  .bar-gallery-editorial__item:hover img,
  .bar-gallery-editorial__item a:hover img{
    filter:
      saturate(.9)
      contrast(1.08)
      brightness(.97);
    transform:scale(1.014);
  }

  .bar-info__img:hover::after,
  .bar-section__img:hover::after{
    opacity:.72;
  }

  .bar-gallery-editorial__item:hover::after,
  .bar-gallery-editorial__item a:hover::after{
    opacity:.34;
  }

  .bar-map:hover iframe{
    filter:
      grayscale(100%)
      brightness(.97)
      contrast(.98);
    transform:scale(1.01);
    opacity:.98;
  }

  .bar-map:hover::after{
    opacity:.85;
  }

  .fb-footer__menu a:hover{
    color:var(--bar-hover-text);
  }

  .fb-footer__menu a:hover::after{
    opacity:.88;
    transform:scaleX(1);
  }

  .fb-lightbox__close:hover{
    color:#f4f3ef;
    transform:scale(1.04);
  }
}

/* =====================================================
  RESPONSIVE
===================================================== */
@media (max-width:960px){

  :root{
    --img-size:288px;
    --bar-max:960px;
    --bar-gutter:18px;
  }

  .bar-intro__nav{
    width:420px;
  }

  .bar-section__grid{
    grid-template-columns:minmax(0, 1fr) var(--img-size);
    gap:32px;
  }

  .bar-section__grid--media-left{
    grid-template-columns:var(--img-size) minmax(0, 1fr);
  }

  #menu .bar-section__grid{
    grid-template-columns:minmax(0, 1fr) 420px;
    gap:32px;
  }

  #menu .bar-section__img{
    width:420px;
  }

  #private .bar-section__grid,
  #private .bar-section__grid--media-left{
    grid-template-columns:420px minmax(0, 1fr);
    gap:32px;
  }

  #private .bar-section__img{
    width:420px;
  }
}

@media (max-width:768px){

  html{
    scroll-padding-top:84px;
  }

  body{
    padding-top:64px;
  }

  section[id]{
    scroll-margin-top:84px;
  }

  #scenes,
  #menu,
  #private,
  #access{
    scroll-margin-top:84px;
  }

  :root{
    --bar-gutter:16px;
    --bar-section-pad-top:14px;
    --bar-section-pad-bottom:56px;
    --bar-head-gap:10px;
    --bar-lead-gap:14px;
    --bar-scenes-gap:6px;
  }

  .bar-intro{
    padding:24px 0 14px;
  }

  .bar-intro__right{
    justify-content:flex-start;
    align-items:flex-start;
    width:100%;
    padding-top:22px;
  }

  .bar-intro__nav{
    width:auto;
    justify-content:flex-start;
    gap:10px 18px;
  }

  .bar-section__grid,
  .bar-section__grid--media-left{
    grid-template-columns:1fr;
    gap:20px;
  }

  .bar-map,
  .bar-info__img,
  .bar-section__img{
    width:100%;
    aspect-ratio:1 / 1;
  }

  #menu .bar-section__grid,
  #private .bar-section__grid,
  #private .bar-section__grid--media-left{
    grid-template-columns:1fr;
  }

  #menu .bar-section__img,
  #private .bar-section__img{
    width:100%;
    aspect-ratio:16 / 10;
  }

  .bar-meta__row{
    grid-template-columns:1fr;
    gap:4px;
  }

  .bar-menu-vertical{
    grid-template-columns:1fr;
  }

  .bar-menu-vertical__item{
    min-height:auto;
    padding:12px 0;
    border-right:none;
    border-bottom:1px solid var(--fb-line-soft);
  }

  .bar-menu-vertical__item:last-child{
    border-bottom:none;
  }

  .bar-menu-preview-grid__more-wrap{
    margin-top:16px;
  }

  #access .bar-meta__row{
    grid-template-columns:1fr;
    gap:4px;
  }

  .bar-gallery-editorial{
    padding-top:12px;
    padding-bottom:62px;
  }

  .bar-gallery-editorial__head{
    margin-bottom:10px;
  }

  .bar-gallery-editorial__kicker{
    margin-bottom:10px;
  }

  .bar-gallery-editorial__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:6px;
  }

  .bar-gallery-editorial__item--hero{
    grid-column:1 / span 1 !important;
    aspect-ratio:1 / 1 !important;
  }

  .bar-gallery-editorial__item--top-right{
    grid-column:2 / span 1 !important;
    aspect-ratio:1 / 1 !important;
  }

  .bar-gallery-editorial__item--mid-left{
    grid-column:1 / -1 !important;
    aspect-ratio:1.42 / 1 !important;
  }

  .bar-gallery-editorial__item--mid-center{
    grid-column:1 / span 1 !important;
    aspect-ratio:1 / 1 !important;
  }

  .bar-gallery-editorial__item--mid-right{
    grid-column:2 / span 1 !important;
    aspect-ratio:1 / 1 !important;
  }

  .bar-gallery-editorial__item--bottom-wide{
    grid-column:1 / -1 !important;
    aspect-ratio:2 / 1.15 !important;
  }

  .bar-meta__note{
    font-size:10px;
  }

  .bar-meta__note-en{
    font-size:9px;
  }

  .bar-meta__tel a{
    font-size:10px;
  }

  .bar-meta__desc--sns{
    gap:8px;
  }

  .bar-meta__desc--price{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  .bar-meta__price{
    padding-bottom:0;
    line-height:1.4;
  }

  .bar-meta__desc--price a{
    top:0;
    padding-bottom:3px;
  }

  .fb-footer__inner{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  .fb-footer__menu{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:flex-start;
    gap:8px;
  }

  .fb-footer__menu li{
    margin:0;
    padding:0;
  }

  .fb-footer__menu a{
    display:inline-block;
    font-size:10px;
    line-height:1.2;
    letter-spacing:.06em;
    padding:0;
  }

  .fb-footer__copy{
    margin-left:0;
    margin-top:2px;
    line-height:1.25;
  }

  #fbLightbox,
  .lightbox-overlay{
    padding:16px;
  }

  .fb-lightbox__inner,
  .lightbox-inner{
    padding:10px;
    max-width:94vw;
    max-height:92vh;
  }

  .fb-lightbox__img,
  .lightbox-inner img{
    max-height:calc(92vh - 20px);
  }

  .fb-lightbox__close{
    top:8px;
    right:8px;
  }
}

/* =====================================================
  MENU VERTICAL : FINAL TUNING
===================================================== */
#menu .bar-section__body{
  display:flex;
  flex-direction:column;
}

.bar-menu-preview-grid__more-wrap{
  margin-top:18px;
}

@media (hover:hover){
  .bar-menu-vertical__item:hover{
    transform:none;
  }
}

@media (max-width:768px){
  .bar-menu-vertical__name{
    min-height:auto;
  }

  .bar-menu-vertical__price{
    margin-top:0;
    padding-top:0;
  }
}