@charset "UTF-8";

@media screen and (max-width: 768px) {
  .container {
    overflow-x: hidden;
  }
}

/* header
---------------------------------------------- */
.site-theme-black .contentMenu__bg {
  background: url(../imgs/home/img_mv03.jpg) center/cover no-repeat;
}

@media screen and (max-width: 768px) {
  .site-theme-black .contentMenu__bg {
    background-image: url(../imgs/home/img_mv03_sp.jpg);
  }
}

/* mainVisual
---------------------------------------------- */
.mainVisual {
  height: 100vh;
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.mainVisual__inner {
  height: 100%;
}

.mainVisual__light {
  width: calc(251 / 1920 * 100%);
  mix-blend-mode: lighten;
  filter: brightness(1.5);
  opacity: 0;
  transition: 3s cubic-bezier(0, 0.61, 0.36, 1);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.mainVisual.is-active .mainVisual__light {
  opacity: 1;
  transition-duration: 5s;
}
.mainVisual.is-active02 .mainVisual__light {
  opacity: 0;
  visibility: hidden;
}

.mainVisual__copy {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.mainVisual__copy01,
.mainVisual__copy02 {
  /* width: calc(145 / 1920 * 100%); */
  width: 21px;
  filter: drop-shadow(0 0 10px rgb(0 0 0 / .6));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 33%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 33%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0) 100%);
  mask-size: 100% 350%;
  -webkit-mask-size: 100% 350%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: 0% 100%;
  -webkit-mask-position: 0% 100%;
  transition: 10s;
}
.mainVisual__copy02 {
  transition-delay: .5s;
}
.mainVisual__copy03 {
  width: 148px;
  opacity: 0;
  filter: blur(10px);
  /* transition: 4s .5s cubic-bezier(0, 0, 0, 0.96); */
  transition: 4s .5s ease;
}

/* active */
.mainVisual.is-active02 .mainVisual__copy03 {
  opacity: 1;
  filter: blur(0);
}
.mainVisual.is-active03 .mainVisual__copy03 {
  opacity: 0;
  filter: blur(10px);
}
.mainVisual.is-active03 .mainVisual__copy01 {
  mask-position: 0% 0%;
  -webkit-mask-position: 0% 0%;
}
.mainVisual.is-active04 .mainVisual__copy01 {
  opacity: 0;
  transition: .4s;
}
.mainVisual.is-active04 .mainVisual__copy02 {
  mask-position: 0% 0%;
  -webkit-mask-position: 0% 0%;
}
.mainVisual.is-active04 .mainVisual__copy03 {
  top: 20%;
  transform: translate(-50%, 0);
}
.mainVisual.is-active05 .mainVisual__copy02 {
  opacity: 0;
  transition: .4s;
}
.mainVisual.is-active05 .mainVisual__copy03 {
  opacity: 1;
  filter: blur(0);
  transition-delay: 1s;
}

.mainVisual__imageBox {
  height: 100%;
  position: relative;
  z-index: 0;
}
.mainVisual__bg {
  overflow: hidden;
  filter: brightness(1.3);
  transform: scale(1.2) translateX(8%);
  transform-origin: bottom;
  transition: 20s;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.mainVisual__bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(1.2) translateX(-5%);
  background-color: #000;
  transition: .6s .5s;
  z-index: 2;
}
.mainVisual__bg01 {
  transition: 1s;
}
.mainVisual__bg02 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: 1s;
  z-index: 1;
}
.mainVisual__image {
  overflow: hidden;
  transition: 1s cubic-bezier(0, 0, 0, 0.96);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.mainVisual__image::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / .7);
  transition: 1.5s 2s ease-out;
  z-index: 1;
}
.mainVisual__imageBox img {
  height: 100%;
  /* height: 100svh; */
  object-fit: cover;
}
.mainVisual__image01 img,
.mainVisual__image02 img {
  transform: scale(1.4);
  transition: 15s 3s linear;
}
.mainVisual__image .p-caption {
  z-index: 2;
}

.p-caption00 {
  transition: .4s;
}

/* active */
.mainVisual.is-active .mainVisual__bg {
  transform: scale(1.2) translateX(0);
}
.mainVisual.is-active .mainVisual__bg::before {
  opacity: 0;
}
.mainVisual.is-active02 .mainVisual__image01 img {
  transform: scale(1);
}
.mainVisual.is-active03 .p-caption00 {
  opacity: 0;
}
.mainVisual.is-active03 .mainVisual__bg {
  /* mask-position: 130% 130%; */
  /* -webkit-mask-position: 130% 130%; */
  /* opacity: 0; */
  /* filter: blur(10px); */
}
.mainVisual.is-active03 .mainVisual__image02 img {
  transform: scale(1);
}
.mainVisual.is-active03 .mainVisual__bg01 {
  opacity: 0;
}
.mainVisual.is-active03 .mainVisual__image01::before {
  opacity: .5;
}
.mainVisual.is-active04 .mainVisual__image01 {
  opacity: 0;
  filter: blur(10px);
}
.mainVisual.is-active04 .mainVisual__image02::before {
  opacity: .5;
}
.mainVisual.is-active05 .mainVisual__bg02 {
  opacity: 0;
}
.mainVisual.is-active05 .mainVisual__image02 {
  opacity: 0;
  filter: blur(10px);
}
.mainVisual.is-active05 .mainVisual__image03::before {
  opacity: 0;
  transition-delay: 1s;
}

/* skip */
.mainVisual__skip {
  position: absolute;
  bottom: 60px;
  left: 40px;
  background-color: #000;
  border: 1px solid rgb(255 255 255 / .4);
  color: #fff;
  font-size: 20px;
  padding: .3em .5em;
  transition: .4s;
  z-index: 10;
}
.mainVisual.is-active05 .mainVisual__skip {
  opacity: 0;
  visibility: hidden;
}

/* skip click */
.mainVisual.is-skip .mainVisual__light,
.mainVisual.is-skip .mainVisual__copy01,
.mainVisual.is-skip .mainVisual__copy02,
.mainVisual.is-skip .mainVisual__copy03,
.mainVisual.is-skip .mainVisual__bg,
.mainVisual.is-skip .mainVisual__image01,
.mainVisual.is-skip .mainVisual__image02,
.mainVisual.is-skip .mainVisual__image03::before,
.mainVisual.is-skip .mainVisual__skip {
  opacity: 0;
  visibility: hidden;
  transition: .6s;
}
.mainVisual.is-skip .mainVisual__copy03 {
  top: 20%;
  transform: translate(-50%, 0);
  transition: top .4s .8s, transform .3s .8s;
}
.mainVisual.is-skip02 .mainVisual__copy03 {
  filter: blur(0);
  opacity: 1;
  visibility: visible;
  transition: 1s .5s cubic-bezier(0, 0, 0, 0.96);
}

@media screen and (max-width: 768px) {
  .mainVisual {
    overflow: revert;
  }
  .mainVisual__light {
    top: 25%;
    transform: translate(-50%, 0);
    width: calc(120 / 375 * 100%);
  }
  .mainVisual__copy {
    top: 15%;
    transform: translate(-50%, 0);
  }
  .mainVisual__copy01,
  .mainVisual__copy02 {
    width: 20px;
  }
  .mainVisual__copy03 {
    top: 20%;
    width: 120px;
  }

  /* .mainVisual__image::before {
    background : linear-gradient(180deg, rgba(255, 255, 255, 0) 80%, rgba(35, 24, 21, 1) 100%);
  } */

  /* .mainVisual__merit {
    bottom: 6vh;
    bottom: 6svh;
    width: 300px;
  } */

  .mainVisual__skip {
    bottom: 5vh;
    bottom: 5dvh;
    left: 20px;
  }
}

/* merit
---------------------------------------------- */
.merit {
  background-color: #000;
  padding-block: 50px;
}
.merit__inner {
  max-width: 1140px;
  margin-inline: auto;
  z-index: 1;
}

@media screen and (max-width: 768px) {
  .merit {
    padding-block: 70px 30px;
  }
}

/* lower
---------------------------------------------- */
.lowerSection {
  background-color: var(--base-color);
  position: relative;
  z-index: 0;
}

.lowerSection__bg {
  overflow: hidden;
  position: relative;
  z-index: 0;
}
.lowerSection__bg img {
  height: 100vh;
  object-fit: cover;
}
.lowerSection__bg .p-caption {
  z-index: 5;
}

.lowerBox__copy {
  width: fit-content;
  font-size: clamp(24px, 1.17rem + 0.7vw, 32px);
  letter-spacing: 0.3em;
  margin-block: auto;
  text-align: center;
}
.lowerSection__title {
  color: #978236;
  font-size: 18px;
  letter-spacing: .34em;
  text-indent: .34em;
  margin-top: 2vh;
  text-align: center;
}
.lowerSection__text {
  font-size: clamp(13px, 0.77rem + 0.09vw, 14px);
  letter-spacing: 0.3em;
  line-height: 3;
  margin-top: 7vh;
  margin-block: auto;
}
.lowerSection__btn {
  display: block;
  width: 230px;
  background: linear-gradient(90deg, rgb(0 0 0 / .8) 0%, rgb(0 0 0 / 1) 100%);
  border: .5px solid #e2ded4;
  color: #e2ded4;
  font-size: 12px;
  letter-spacing: 0.22em;
  margin-top: 3vh;
  padding: 1em;
  transition: .4s cubic-bezier(0.65, 0.05, 0.36, 1);
  text-align: center;
  position: relative;
  z-index: 0;
}
.lowerSection__btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #e2ded4;
  transition: .3s cubic-bezier(0.65, 0.05, 0.36, 1);
  z-index: 0;
}
.lowerSection__btn .text {
  display: block;
  transition: .3s cubic-bezier(0.65, 0.05, 0.36, 1);
  position: relative;
  z-index: 1;
}
.lowerSection__btn .text::after {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background-color: #e2ded4;
  margin-top: 10px;
  margin-inline: auto;
  transition: .3s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.lowerContents02 {
  height: 100vh;
  /* background-color: var(--base-color); */
  position: sticky;
  top: 0;
  z-index: 1;
}
.lowerContents02__bg {
  overflow: hidden;
}
.lowerContents02__bg img {
  height: 100vh;
  object-fit: cover;
}

/* location */
.locationContents {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 1400px;
  z-index: 1;
}
.locationMap {
  width: calc(700 / 1400 * 100%);
}
.locationBox {
  width: calc(560 / 1400 * 100%);
  color: #fff;
  margin-bottom: -5vh;
}
.locationBox__title {
  font-size: 20px;
  letter-spacing: 0.34em;
  text-align: center;
}
.locationBox__copy {
  margin-top: 1.5em;
}
.locationBox__imgBox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(16 / 404 * 100%);
  margin-top: 30px;
}
.locationMovieBox {
  margin-top: 30px;
}

/* residence */
.residenceMovie {
  /* display: flex;
  align-items: flex-start;
  justify-content: space-between; */
  /* width: calc(1600 / 1920 * 100%); */
  width: 100%;
  height: 100%;
  margin-inline: auto;
  padding-block: 5vh;
}
.residenceMovieItem--lounge {
  /* width: calc(1200 / 1920 * 100%); */
  width: calc(1500 / 1920 * 100%);
}
.residenceMovieItem--movie {
  width: calc(800 / 1920 * 100%);
  margin-top: -5%;
  margin-left: auto;
}

/* concept */
.concept {
  height: auto;
}
.conceptBox {
  height: 100%;
}
.concept__img {
  width: calc(1100 / 1920 * 100%);
  position: absolute;
  top: 17.5%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, 5%);
  transition: .4s ease-out;
  z-index: 1;
}
.concept.is-active  .concept__img {
  opacity: 1;
  transform: translate(-50%, 0);
}
.concept__bg {
  height: 100%;
}
.concept__bg .p-caption {
  bottom: 54%;
}

.conceptContents {
  display: flex;
  flex-direction: row-reverse;
  column-gap: 25%;
  color: #fff;
  position: absolute;
  top: 48%;
  left: 50%;
  filter: blur(10px);
  opacity: 0;
  transform: translate(-50%, 5%);
  transition: .6s .2s ease-out;
  z-index: 1;
}
.concept.is-active .conceptContents {
  filter: blur(0);
  opacity: 1;
  transform: translate(-50%, 0);
}
.concept__copy {
  font-size: clamp(28px, 0.91rem + 1.74vw, 48px);
  letter-spacing: 0.13em;
}
.concept__text {
  font-size: clamp(12px, 0.58rem + 0.35vw, 16px);
  letter-spacing: 0.3em;
  line-height: 3;
  margin-top: 15%;
}
.concept__text sup {
  right: -1em;
}

@media (hover: hover) and (pointer: fine) {
  .lowerSection__btn:hover::before {
    width: 100%;
  }
  .lowerSection__btn:hover {
    color: #000;
  }
  .lowerSection__btn:hover .text::after {
    width: 40px;
    background-color: #000;
  }
}

@media screen and (min-width: 769px) and (max-height: 900px) {
  .locationContents {
    transform: translate(-50%, -50%) scale(.8);
  }
}

@media screen and (min-width: 769px) {
  .lowerSection__bgCover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    overflow: hidden;
    transition: .4s;
    z-index: 0;
  }
  .lowerSection__bgCover img {
    height: 100%;
    object-fit: cover;
  }

  .lowerContents01 {
    padding-bottom: 100vh;
    position: sticky;
    top: 0;
    z-index: 0;
  }

  .lowerContents01Wrap {
    position: sticky;
    top: 0;
  }

  .lowerContents01Box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    transition: 1s ease-out;
    z-index: 0;
  }

  .lowerSection__bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(35 24 21 / 1) 100%);
    opacity: 0;
    transition: .4s;
    z-index: 1;
  }
  .lowerContents01Box.is-active .lowerSection__bg::before {
    opacity: 1;
  }

  .lowerSection--residence .lowerContents01Box.is-active .lowerSection__bg::before {
    opacity: 0;
  }

  .lowerBox {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(1460 / 1920 * 100%);
    height: 100%;
    opacity: 0;
    transition: .6s .2s;
    z-index: 5;
  }
  .lowerContents01Box.is-active .lowerBox {
    opacity: 1;
  }

  .stickySpacer {
    height: 100vh;
  }

  /* position */
  .lowerSection--position .lowerSection__bgCover {

  }
  /* residence */
  .lowerSection--residence .lowerSection__bgCover {
    background: var(--base-color);
  }
  .lounge img {
    height: 100vh;
    object-fit: cover;
  }

  /* plan */
  .planPcBox {
    height: 100vh;
    padding-block: 5vh;
    position: relative;
    z-index: 1;
  }
  .planSpBox .photo {
    width: calc(660 / 1400 * 100%);
  }
  .planSpBox .photo:nth-child(2) {
    margin-top: -20%;
    margin-left: auto;
  }
  .lowerSection--plan .lowerSection__bgCover {
    background: var(--base-color);
  }
}

@media screen and (min-width: 769px) and (max-height: 800px) {
  .lowerBox {
    transform: translate(-50%, -50%) scale(.8);
    transform-origin: right;
  }
}

@media screen and (max-width: 768px) {
  .lowerSection__bg .lowerBox__copy {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
  .lowerSection__bg .p-caption {
    bottom: 60px;
  }
  .lowerBox {
    color: #fff;
    padding-block: 45px 0;
    position: relative;
    z-index: 1;
  }
  .lowerSection__textBox .lowerBox__copy {
    display: none;
  }
  .lowerSection__title {
    width: 250px;
    background-color: var(--base-color);
    padding: 2.5em;
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .lowerSection__text {
    position: relative;
    z-index: 2;
  }
  .lowerSection__btn {
    width: 100%;
    border: none;
    font-size: 14px;
    margin-top: 40px;
    padding: 2.5em;
  }

  .lowerContents02 {
    height: auto;
    position: relative;
    z-index: 0;
  }
  .lowerContents02__bg img {
    height: auto;
  }

  /* location */
  .locationContents {
    flex-direction: column-reverse;
    width: calc(300 / 375 * 100%);
    max-width: 400px;
  }
  .locationMap {
    width: 100%;
    margin-top: 20px;
  }
  .locationBox {
    width: 100%;
    margin-bottom: 0;
  }
  .locationBox__title {
    font-size: 14px;
  }
  .locationBox__copy {
    width: 85%;
  }
  .locationBox__imgBox,
  .locationMovieBox {
    margin-top: 20px;
  }

  /* position */
  .lowerSection--position .lowerBox {
    padding-bottom: 30px;
  }
  .lowerSection--position .lowerSection__btn,
  .lowerSection--plan .lowerSection__btn {
    margin-top: 0;
  }

  /* residence */
  .lounge {
    width: calc(320 / 375 * 100%);
    margin-top: 20px;
    margin-inline: auto;
  }

  .residenceMovie {
    display: block;
  }
  .residenceMovieItem--lounge {
    /* width: calc(200 / 375 * 100%); */
    width: calc(320 / 375 * 100%);
    margin-left: auto;
  }
  .residenceMovieItem--movie {
    width: calc(300 / 375 * 100%);
    margin-top: 20px;
    margin-left: 0;
  }

  /* plan */
  .planSpBox {
    margin-block: 20px 40px;
  }
  .planSpBox .photo {
    width: calc(180 / 320 * 100%);
  }
  .planSpBox .photo:nth-child(2) {
    margin-top: -10%;
    margin-left: auto;
  }

  .concept__img {
    width: calc(340 / 375 * 100%);
    top: 28%;
  }
  .conceptContents {
    top: 48%;
  }
  .concept__copy {
    color: #fff;
    position: absolute;
    top: 9%;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 1;
  }
  .concept__text {
    margin-top: 0;
  }
}

/* parse
---------------------------------------------- */
.parse__img {
  overflow: hidden;
}

/* entryArea
---------------------------------------------- */
.entryArea {
  background-color: var(--base-color);
  padding-block: 90px;
}
.entryAreaBox {
  max-width: 940px;
  border: .5px solid rgb(255 255 255 / .5);
}
.entryAreaBox__inner {
  display: grid;
  grid-template-columns: calc(470 / 940 * 100%) 1fr;
}
.entryAreaBox__link {
  display: block;
  overflow: hidden;
  position: relative;
  z-index: 0;
}
.entryAreaBox__link img {
  height: 100%;
  object-fit: cover;
  transition: .4s ease-out;
}
.entryAreaBox__title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  color: #fff;
  font-weight: 600;
  text-align: center;
  z-index: 1;
}
.entryAreaBox__title .en {
  display: block;
  font-size: 40px;
  letter-spacing: 0.36em;
}
.entryAreaBox__title .ja {
  display: block;
  font-size: 14px;
  letter-spacing: 0.1em;
  line-height: 1.4;
  margin-top: 1em;
}
.entryAreaBoxBody {
  display: grid;
  place-items: center;
}
.entryAreaBox__text {
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.15em;
  line-height: 2.4;
  text-align: center;
}

@media (hover: hover) and (pointer: fine) {
  .entryAreaBox__link:hover img {
    transform: scale(1.1);
    filter: brightness(.6);
  }
}

@media screen and (max-width: 768px) {
  .entryArea {
    padding-block: 30px;
  }
  .entryAreaBox {
    width: calc(340 / 375 * 100%);
    max-width: 400px;
    border: none;
  }
  .entryAreaBox__inner {
    grid-template-columns: 1fr;
    row-gap: 30px;
  }
  .entryAreaBox__title .en {
    font-size: 30px;
  }
  .entryAreaBox__title .ja {
    font-size: 12px;
  }
  .entryAreaBoxBody {
    display: block;
  }
  .entryAreaBox__text {
    font-size: 12px;
  }

}

/* news over ride
---------------------------------------------- */
.news__heading .en,
.campaign__heading .en {
  color: var(--accent-color);
}
.news__heading .jp,
.newsGroup .newsDetail__term,
.newsGroup .newsDetail__desc,
.newsGroup .noticeCard__inner .txt {
  color: #fff;
}
.newsGroup .noticeCard__link .statusIcon:before,
.newsGroup .noticeCard__link .statusIcon:after {
  background-color: #fff;
}

.newsGroup .noticeCard__link--noLink .newsDetail__desc {
  overflow: revert;
  -webkit-line-clamp: revert;
}

@media screen and (min-width: 768px) {
  .news {
    margin-top: 40px;
    padding-bottom: 80px;
  }

  .newsGroup .noticeCard__link.is-active, .newsGroup .noticeCard__link:hover {
    background-color: transparent;
    opacity: .7;
  }

  .newsGroup .noticeCard__link--noLink .newsDetail__desc {
    width: calc(100% - 100px);
    line-height: 1.7;
    pointer-events: none;
  }
}