@charset "UTF-8";

/* ===================================================================

  LEX TOKYO PC Styles

=================================================================== */

/*
  Main Visual
=================================================================== */
.mv-container {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  display: grid;
  background-color: var(--blk);
  overflow: hidden;
}
.mv-container .contents-area {
  position: relative;
  z-index: 1;
  white-space: nowrap;
  grid-area: 1 / 1;
}
.mv-container .contents-area h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--wht);
  font-size: 64px;
  font-size: 6.4rem;
  letter-spacing: .05em;
  text-align: center;
  color: var(--gold);
  line-height: 1.2;
}
.mv-container .contents-area h2 span {
  font-size: .5em;
  letter-spacing: .015em;
  display: block;
  color: var(--wht);
}
.mv-container video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  grid-area: 1 / 1;
}

/*
  Main
=================================================================== */
.l-main { margin: 100vh 0 0; }

/*
  Section
=================================================================== */

@keyframes fadeOut {
  0% {
    visibility: visible;
    opacity: 1;
  }
  100% {
    visibility: hidden;
    opacity: 0;
  }
}

/* Section01
------------------------------------------------------------------- */
.sec01 {
  height: auto;
  background-color: var(--wht);
  padding: 150px 0;
}
.sec01 .sec-heading { color: var(--gold); }

/* Article */
.article-unit {
  position: relative;
  /*
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 20px;
  */
  margin: 40px auto 100px;
}
.article-unit article { width: calc((1200px - 40px) / 3); }
.article-unit article a {
  text-decoration: none;
  color: var(--blk);
  transition: all .3s;
}
.article-unit article a figure {
  overflow: hidden;
  margin: 0 0 10px;
}
.article-unit article a figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  transition: all .3s;
}
.article-unit article a:hover figure img { transform: scale(1.15); }
.article-unit article p {
  font-size: 14px;
  font-size: 1.4rem;
  letter-spacing: .05em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.article-unit article p span {
  display: inline-block;
  margin: 0 2em 0 0;
}

/*
  Swiper Styles
------------------------------------------------------------------- */
.swiper-button-prev {
  left: 7.5px;
  top: 45%;
  transform: translateY(-45%);
  width: 40px !important;
  height: 40px !important;
  margin-top: 0;
}
.swiper-button-prev::after {
  content: "";
  width: 100%;
  height: 100%;
  display: inline-block;
  background: url(../images/prev_w.svg) no-repeat 50% 50%;
  background-size: cover;
}
.swiper-button-next {
  right: 7.5px;
  top: 45%;
  transform: translateY(-45%);
  width: 40px !important;
  height: 40px !important;
  margin-top: 0;
}
.swiper-button-next::after {
  content: "";
  width: 100%;
  height: 100%;
  display: inline-block;
  background: url(../images/next_w.svg) no-repeat 50% 50%;
  background-size: cover;
}

.sec01 .lead {
  font-size: 18px;
  font-size: 1.8rem;
  letter-spacing: .05em;
  line-height: 2.0;
  margin: 40px 0 60px;
}

/* Section02
------------------------------------------------------------------- */
.sec02 {
  height: auto;
  padding: 0;
  background-color: var(--blk);
  display: grid;
}

.sec02 > figure {
  overflow: hidden;
  grid-area: 1 / 1;
}
.sec02 > figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 4096 / 2790;
  opacity: .36;
}

.sec02 .contents-area {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  padding: 150px 0;
}
.sec02 .contents-area .sec-heading { color: var(--gold); }
.sec02 .contents-area .bg-blk {
  padding: 70px 40px 0;
  margin: 40px auto 0;
  background: rgba(var(--blk-rgb), .59);
}

/* Party Slider */
.ws-container {
  /*max-width: 1920px;*/
  max-width: 1200px;
  width: 90%;
  margin: 40px auto 80px;
}

.price-unit {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0 0 60px;
}
.price {
  color: var(--gold);
  text-align: center;
}
.price h3 {
  font-size: 22px;
  font-size: 2.2rem;
  letter-spacing: .075em;
  margin: 0 0 1em;
}
.price ul li {
  font-size: 20px;
  font-size: 2.0rem;
  letter-spacing: .05em;
}
.attention {
  font-size: 14px;
  font-size: 1.4rem;
  letter-spacing: .05em;
  line-height: calc(24 / 14);
  color: var(--wht);
  margin: 0 0 40px;
}
.attention li::before { content: "※"; }
.en .attention li::before { content: "*"; }
.attention li {
  text-indent: -1em;
  padding: 0 0 0 1em;
}
.payment {
  background-color: var(--wht);
  margin: 0 0 80px;
}

.vip-reservation h2.sec-heading { color: var(--gold); }
.vip-reservation h3 {
  font-size: 22px;
  font-size: 2.2rem;
  letter-spacing: .05em;
  color: var(--gold);
  text-align: center;
  margin: 30px 0;
}
.reservation-unit {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 60px;
  margin: 0 0 80px;
}
.reservation-unit dl {
  color: var(--gold);
  text-align: center;
  letter-spacing: .05em;
}
.reservation-unit dl dt {
  font-size: 22px;
  font-size: 2.2rem;
  letter-spacing: .075em;
  margin: 0 0 .75em;
}
.reservation-unit dl dd {
  font-size: 20px;
  font-size: 2.0rem;
  letter-spacing: .05em;
  line-height: calc(32 / 20);
  border-top: solid 1px var(--gold);
  padding: 1em 0;
}
.floor-map { margin: 100px 0 0; }
.floor-map figure {
  width: 70%;
  height: auto;
  margin: 40px auto 0;
}

/* Section03
------------------------------------------------------------------- */
.sec03 {
  height: auto;
  background-color: var(--wht);
  padding: 150px 0;
}
.sec03 .sec-heading { color: var(--gold); }
.sec03 p {
  font-size: 23px;
  font-size: 2.3rem;
  letter-spacing: .05em;
  text-align: center;
  color: var(--gold);
  margin: 40px 0 60px;
}
.sec03 h3 {
  font-size: 26px;
  font-size: 2.6rem;
  letter-spacing: .05em;
  text-align: center;
  background-color: var(--gold);
  padding: .5em 0;
}

/* Section04
------------------------------------------------------------------- */
.sec04 {
  height: auto;
  background-color: var(--wht);
  padding: 150px 0;
}
.sec04 .sec-heading { color: var(--gold); }
.sec04 p {
  font-size: 23px;
  font-size: 2.3rem;
  letter-spacing: .05em;
  text-align: center;
  color: var(--gold);
  margin: 40px 0 60px;
}
.contact-form {
  font-size: 16px;
  font-size: 1.6rem;
}
.contact-form ul li { margin: 40px 0 0; }
.contact-form [type="text"], 
.contact-form [type="email"],
.contact-form textarea {
  width: 100%;
  border: solid 1px var(--gold);
  border-radius: 10px;
  background-color: transparent !important;
  padding: 1em;
  transition: all .3s;
}
.contact-form [type="text"]:focus,
.contact-form [type="email"]:focus,
.contact-form textarea:focus { background-color: #f5f5f5; }

/* placeholder */
::-webkit-input-placeholder { color: #999; }
::-moz-placeholder { color: #999; }
:-ms-input-placeholder { color: #999; }

.default-btn {
  border: none;
  width: 360px;
  max-width: 90%;
  height: 65px;
  font-size: 18px !important;
  font-size: 1.8rem !important;
  letter-spacing: .05em;
  color: var(--wht);
  background-color: #666666 !important;
  border-radius: 15px !important;
  margin: auto;
  display: block;
  cursor: pointer;
  transition: all .3s;
}
.default-btn:hover { opacity: .7; }
.submit-btn { background-color: var(--gold) !important; }

.button-unit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 4%;
  margin: 60px auto 0;
}
.button-unit .default-btn {
  width: 48%;
  max-width: 360px;
  margin: 0;
}

/* Google Chrome Hack */
input:-webkit-autofill {
  box-shadow: 0 0 0 1000px var(--wht) inset !important;
  -webkit-text-fill-color: var(--blk) !important;
}

/* Section05
------------------------------------------------------------------- */
.sec05 {
  height: auto;
  background: rgba(var(--blk-rgb), 1.0);
  padding: 150px 0;
}
.sec05 .sec-heading { color: var(--gold); }
.gmap {
  position: relative;
  width: 100%;
  height: 0;
  padding: 0 0 calc(9 / 16 * 100%);
  overflow: hidden;
  margin: 40px 0 0;
}
.gmap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.location {
  color: var(--wht);
  padding: 40px;
}
.location h3 {
  font-size: 24px;
  font-size: 2.4rem;
  letter-spacing: .05em;
  margin: 0 0 .5em;
  color: #adaeae;
}
.location dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.location dl {
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: .05em;
}
.location dl dt { line-height: 2.0; }
.location dl dt span {
  font-size: calc(22 / 16 * 1em);
  line-height: 1.5;
  display: block;
  color: #adaeae;
}
.location dl dd { line-height: 2.0; }

.location ul {
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: .05em;
}
.location ul li:last-of-type { margin: 1em 0 0; }
.location ul li a {
  color: var(--gold);
  text-decoration: none;
  transition: all .3s;
}
.location ul li a:hover { text-decoration: underline; }

/*
  Swiper Slider Styles
=================================================================== */
.slider01 .swiper-wrapper { transition-timing-function: linear; }
.slider02 .swiper-wrapper { transition-timing-function: linear; }
.slider03 .swiper-wrapper { transition-timing-function: linear; }

.slider02 .swiper-slide p {
  position: absolute;
  z-index: 1;
  left: 1em;
  bottom: .5em;
  font-size: 20px;
  font-size: 2.0rem;
  letter-spacing: .05em;
  color: var(--wht);
}