@charset "UTF-8";

/* =====================================================
  PAGE : INSIDE THE SPACE
===================================================== */

.oj-inside-page{
  background:var(--fb-bg);
  color:var(--fb-text);

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1, "liga" 1, "palt" 1;
}

.oj-inside-page a{
  color:inherit;
  text-decoration:none;
  transition:
    color .45s ease,
    opacity .45s ease,
    transform .65s cubic-bezier(.16,.72,.18,1);
}

/* =====================================================
  MV SLIDER
===================================================== */

.oj-inside-mv{
  margin-top:24px;
  margin-bottom:0;
  padding:0 0 10px;
}

.oj-inside-mv .bar-shell{
  width:100%;
  max-width:var(--bar-max);
  margin:0 auto;
  padding:0 var(--bar-gutter);
}

.oj-inside-mv__slider{
  width:100%;
}

.oj-inside-mv__slides{
  position:relative;
  width:100%;
  aspect-ratio:1.85 / 1;
  overflow:hidden;
  background:var(--fb-bg);
}

.oj-inside-mv__slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform:scale(1.055);
  filter:blur(12px);
  z-index:1;
  transition:
    opacity 4.8s cubic-bezier(.22,.61,.36,1),
    transform 12s cubic-bezier(.22,.61,.36,1),
    filter 4.8s cubic-bezier(.22,.61,.36,1);
}

.oj-inside-mv__slide.is-active{
  opacity:1;
  transform:scale(1);
  filter:blur(0);
  z-index:3;
}

.oj-inside-mv__slide.is-leaving{
  opacity:.28;
  transform:scale(1.018);
  filter:blur(3px);
  z-index:2;
}

.oj-inside-mv__slide img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* =====================================================
  CONTROL
===================================================== */

.oj-inside-mv__control{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:24px;
  margin-top:14px;
  align-items:center;
}

.oj-inside-mv__nav{
  border:0;
  background:none;
  font-family:var(--fb-en);
  font-size:10px;
  letter-spacing:.18em;
  color:rgba(244,243,239,.46);
  cursor:pointer;
  transition:.4s;
}

.oj-inside-mv__nav:hover{
  color:rgba(244,243,239,.78);
  opacity:.86;
}

.oj-inside-mv__bar{
  position:relative;
  height:1px;
}

.oj-inside-mv__bar-base{
  width:100%;
  background:rgba(244,243,239,.12);
  position:absolute;
}

.oj-inside-mv__bar-current{
  position:absolute;
  height:1px;
  width:20%;
  background:rgba(244,243,239,.54);
  transition:width 2.4s cubic-bezier(.22,.61,.36,1);
}

.oj-inside-mv__count{
  margin-top:12px;
  text-align:center;
  font-size:11px;
  letter-spacing:.18em;
  color:rgba(244,243,239,.38);
}

/* =====================================================
  SECTION
===================================================== */

.oj-inside-section{
  padding:12px 0 40px;
}

#menu{
  padding-top:10px;
  padding-bottom:36px;
}

#private{
  padding-top:26px;
  padding-bottom:58px;
}

#reserve{
  padding-top:18px;
  padding-bottom:54px;
}

#access{
  padding-top:14px;
  padding-bottom:40px;
}

.oj-inside-section__grid{
  display:grid;
  grid-template-columns:170px 1fr;
  gap:36px;
}

.oj-inside-section__head{
  transform:translateY(1px);
}

.oj-inside-section__eyebrow{
  margin:0 0 2px;
  font-size:8px;
  line-height:1.4;
  letter-spacing:.16em;
  color:rgba(244,243,239,.36);
}

.oj-inside-section__title{
  margin:0;
  font-family:var(--fb-en);
  font-size:20px;
  line-height:1.14;
  letter-spacing:.015em;
  color:rgba(244,243,239,.78);
  font-synthesis:none;
}

#private .oj-inside-section__body{
  padding-top:13px;
}

/* =====================================================
  MENU
===================================================== */

.oj-concept-en{
  margin-top:10px;
  margin-bottom:18px;

  font-size:11px;
  line-height:1.8;
  letter-spacing:.06em;
  font-weight:300;

  color:rgba(244,243,239,.44);
  opacity:.78;

  max-width:420px;
}

.oj-inside-list__item{
  display:grid;
  grid-template-columns:150px 1fr;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.022);

  transition:
    transform .65s cubic-bezier(.16,.72,.18,1),
    opacity .45s ease;
}

.oj-inside-list__name{
  font-size:15px;
  line-height:1.45;
  letter-spacing:.035em;
  color:rgba(244,243,239,.82);

  transition:
    color .45s ease;
}

.oj-inside-list__price{
  justify-self:start;
  font-family:var(--fb-en);
  font-size:12px;
  line-height:1.35;
  letter-spacing:.09em;
  color:rgba(244,243,239,.48);
  font-variant-numeric:tabular-nums;

  transition:
    color .45s ease;
}

@media (hover:hover){

  .oj-inside-list__item:hover{
    transform:translateY(2px);
    opacity:.86;
  }

  .oj-inside-list__item:hover .oj-inside-list__name{
    color:rgba(244,243,239,.90);
  }

  .oj-inside-list__item:hover .oj-inside-list__price{
    color:rgba(244,243,239,.60);
  }

}

/* =====================================================
  META
===================================================== */

.oj-inside-meta__row{
  display:grid;
  grid-template-columns:150px 1fr;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.025);
}

.oj-inside-meta__term{
  font-size:9px;
  line-height:1.4;
  letter-spacing:.14em;
  color:rgba(244,243,239,.34);
}

.oj-inside-meta__desc,
.oj-inside-meta__desc p,
.oj-inside-meta__desc a{
  font-size:11px;
  line-height:1.8;
  letter-spacing:.04em;
  color:rgba(244,243,239,.56);
}

.oj-inside-meta__desc{
  font-family:var(--fb-en);
}

.oj-inside-meta__desc p{
  opacity:.82;
  margin:0;
}

.oj-inside-meta__desc p + p{
  margin-top:6px;
}

/* =====================================================
  PRIVATE
===================================================== */

.oj-inside-room-title{
  display:block;
  padding:16px 0 6px;
  border-bottom:1px solid rgba(255,255,255,.04);
  font-size:15px;
  line-height:1.5;
  letter-spacing:.03em;
  color:rgba(244,243,239,.82);
  transition:
    opacity .7s cubic-bezier(.22,.61,.36,1),
    color .7s cubic-bezier(.22,.61,.36,1),
    border-color .7s cubic-bezier(.22,.61,.36,1);
}

a.oj-inside-room-title{
  cursor:pointer;
}

@media (hover:hover){

  a.oj-inside-room-title:hover{
    opacity:.74;
    color:rgba(244,243,239,.92);
    border-color:rgba(255,255,255,.06);
  }

}

#private .oj-inside-room-title:first-of-type{
  padding-top:0;
}

.oj-room-lead{
  margin:2px 0 8px;
  font-family:var(--fb-en);
  font-size:11px;
  line-height:1.8;
  letter-spacing:.04em;
  color:rgba(244,243,239,.52);
  opacity:.82;
}

.oj-concept-ja{
  margin:2px 0 4px;
  font-size:11px;
  line-height:1.9;
  letter-spacing:.04em;
  color:rgba(244,243,239,.72);
}

.oj-inside-room-divider{
  margin:26px 0;
  height:1px;
  background:rgba(255,255,255,.055);
}

/* =====================================================
  RESERVE
===================================================== */

#reserve .oj-inside-meta__row{
  border-bottom:none;
}

#reserve .oj-inside-meta__desc p:nth-of-type(3){
  margin-top:18px;
}

#reserve .oj-inside-meta__desc p:nth-of-type(4){
  margin-top:6px;
}

/* TEL */
#reserve .oj-inside-meta__desc a[href^="tel"]{
  display:inline-block;
  margin-top:6px;
  font-size:11px;
  letter-spacing:.04em;
  color:rgba(244,243,239,.82);
}

/* Reserve */
#reserve .oj-inside-meta__desc a[href*="hotpepper"]{
  display:inline-block;
  margin-top:10px;
  font-size:11px;
  letter-spacing:.08em;
  color:rgba(244,243,239,.72);
  position:relative;
}

/* Reserve underline */
#reserve .oj-inside-meta__desc a[href*="hotpepper"]::after{
  content:"";
  display:block;
  width:100%;
  height:1px;
  margin-top:6px;
  background:rgba(244,243,239,.18);
}

#reserve .oj-inside-meta__desc a[href^="tel"]:hover{
  color:rgba(244,243,239,.92);
}

#reserve .oj-inside-meta__desc a[href*="hotpepper"]:hover{
  color:rgba(244,243,239,.82);
}

/* =====================================================
  FOCUS
===================================================== */

.oj-inside-page a:focus-visible,
.oj-inside-mv__nav:focus-visible{
  outline:1px solid rgba(244,243,239,.28);
  outline-offset:4px;
}

/* =====================================================
  MOBILE
===================================================== */

@media (max-width:960px){

  .oj-inside-section__grid{
    grid-template-columns:1fr;
    gap:24px;
  }

}

@media (max-width:768px){

  .oj-inside-mv{
    margin-top:22px;
  }

  .oj-inside-mv__slides{
    aspect-ratio:4 / 3;
  }

  .oj-inside-section{
    padding:10px 0 34px;
  }

  .oj-inside-section__grid{
    display:flex;
    flex-direction:column;
    gap:18px;
  }

  .oj-inside-mv__control{
    margin-top:2px;
  }

  .oj-inside-mv__count{
    margin-top:2px;
  }

}

/* =====================================================
  INSIDE THE SPACE : FINAL AIR TUNING
===================================================== */

.oj-inside-page .case-detail-hero__lead,
.oj-inside-page .oj-inside-lead,
.oj-inside-page .oj-inside-intro{
  opacity:.72;
  letter-spacing:.02em;
}

.oj-inside-page .icz-about-structure__text,
.oj-inside-page .oj-inside-structure__text,
.oj-inside-page .oj-inside-meta__desc{
  color:rgba(244,243,239,.50);
}

.oj-inside-page .case-detail-block,
.oj-inside-page .oj-inside-block{
  margin-top:calc(var(--icz-block-gap, 55px) * 1.2);
}

/* One-Eyed Jack inside page existing section tuning */
.oj-inside-page .oj-inside-section{
  padding-top:calc(12px * 1.2);
  padding-bottom:calc(40px * 1.2);
}

.oj-inside-page #menu{
  padding-top:12px;
  padding-bottom:43px;
}

.oj-inside-page #private{
  padding-top:31px;
  padding-bottom:70px;
}

.oj-inside-page #reserve{
  padding-top:22px;
  padding-bottom:65px;
}

.oj-inside-page #access{
  padding-top:17px;
  padding-bottom:48px;
}

/* =====================================================
  REMOVE ROOM TITLE LINE (FORCE)
===================================================== */

#private a.oj-inside-room-title,
#private .oj-inside-room-title{
  border-bottom:none !important;
}

.oj-inside-private-link{
  display:block;
  color:inherit;
  text-decoration:none;
  transition:
    transform .65s cubic-bezier(.16,.72,.18,1),
    opacity .45s ease;
}

@media (hover:hover){

  .oj-inside-private-link:hover{
    transform:translateY(2px);
    opacity:.86;
  }

}