@charset "UTF-8";

/* @media screen and (min-width: 768px) { */
  .wrapper {
    overflow: revert;
  }
/* } */

@media screen and (max-width: 767px) {
  .pageTab__inner {
    grid-template-columns: 1fr;
  }

  #spCommonModalInner {
    background: #000;
  }
  #spCommonModalContents figure {
    width: 100%;
    margin-inline: auto;
    padding: 20px;
  }
}

/* tower
---------------------------------------------- */
/* facade */
.facadeContents {
  text-align: center;
}
.facade__text {
  margin-top: 3em;
}
.facade__text + .facade__text {
  margin-top: 2.5em;
}

.facadeHead {
  position: sticky;
  top: var(--headerheight);
  padding-bottom: clamp(100px, 6.6rem + 9.06vw, 240px);
}
.facadeImg {
  overflow: hidden;
}

/* towerDesign */
.towerDesign {
  padding-top: clamp(100px, 7.57rem + 6.47vw, 200px);
}
.designBox {
  width: calc(100% - 100px);
}
.designBox + .designBox {
  margin-top: clamp(80px, 6.06rem + 5.18vw, 160px);
}
.designBox__inner {
  display: grid;
  gap: 40px calc(200 / 1840 * 100%);
  align-items: flex-end;

}
.designBox__name .en {
  font-size: clamp(32px, 2.67rem + 0.7vw, 40px);
  letter-spacing: 0.02em;
}
.designBox__name .ja {
  margin-top: .5em;
}
.designBox__name + .designBox__text {
  margin-top: 1em;
}

@media screen and (min-width: 768px) {
  .designBox--main {
    max-width: 1600px;
    margin-left: auto;
  }
  .designBox--hall {
    max-width: 1840px;
  }
  .designBox--hall .designBox__inner {
    grid-template-columns: calc(1000 / 1840 * 100%) 1fr;
  }
  .designBox--view {
    max-width: 1840px;
    margin-left: auto;
  }
  .designBox--view .designBox__inner {
    grid-template-columns: 1fr calc(1000 / 1840 * 100%);
  }
}

@media screen and (max-width: 767px) {
  .facadeHead {
    top: 0;
  }
  .facade__text {
    letter-spacing: 0;
  }
  .facadeImg img {
    object-fit: cover;
  }

  /* towerDesign */
  .designBox {
    width: calc(355 / 375 * 100%);
  }
  .designBox__inner {
    row-gap: 25px;
  }
  .designBoxBody {
    padding-right: 20px;
  }

  .designBox--main,
  .designBox--view {
    margin-left: auto;
  }

  .designBox--hall .designBoxBody {
    padding-inline: 20px 0;
  }
  .designBox--view .designBoxBody {
    order: 1;
  }
}

/* gallery
---------------------------------------------- */
.gallery {
  margin-top: clamp(100px, 7.57rem + 6.47vw, 200px);
}
.galleryList {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.galleryBtn {
  position: relative;
  z-index: 0;
}
.galleryBtn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / .7);
  filter: blur(10px);
  opacity: 0;
  transition: .4s ease-out;
  z-index: 1;
}
.galleryBtn__hover {
  display: grid;
  place-content: center;
  row-gap: 20px;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(10px);
  opacity: 0;
  transition: .4s ease-out;
  z-index: 2;
}
.galleryBtn__text {
  color: #fff;
  font-size: clamp(16px, 1.07rem + 0.7vw, 24px);
  letter-spacing: 0.02em;
  text-align: center;
}
.galleryBtn__icon {
  width: 32px;
  aspect-ratio: 1;
  margin-inline: auto;
  position: relative;
  z-index: 0;
}
.galleryBtn__icon::before,
.galleryBtn__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 4px;
  background-color: #fff;
  z-index: 1;
}
.galleryBtn__icon::after {
  width: 4px;
  height: 100%;
}

/* galleryModal */
.galleryModal .modal__container {
  max-width: 600px;
  background-color: transparent;
  padding-inline: 0;
}
.galleryModalSlider {
  overflow: hidden;
  position: relative;
  z-index: 0;
}
.galleryModal__body {
  background-color: rgb(255 255 255 / .9);
  padding: 40px;
}
.galleryModal__title .small {
  display: block;
  font-size: 11px;
  letter-spacing: 0;
}
* + .galleryModal__text {
  margin-top: 1em;
}
.galleryModal .modal__close {
  top: 0;
  right: 0;
  background-color: #333;
  color: #fff;
  width: 30px;
  aspect-ratio: 1;
  font-size: 20px;
  line-height: 1;
}

@media (hover: hover) and (pointer: fine) {
  .galleryBtn:hover::before {
    opacity: 1;
    filter: blur(0);
    transition-duration: .2s;
  }
  .galleryBtn:hover .galleryBtn__hover {
    opacity: 1;
    filter: blur(0);
    transition-duration: .2s;
    transition-delay: .1s;
  }
}

@media screen and (max-width: 767px) {
  .galleryList {
    grid-template-columns: 1fr 1fr;
  }
  .galleryBtn::before {
    filter: blur(0);
    opacity: 1;
  }
  .galleryBtn__hover {
    row-gap: 10px;
    filter: blur(0);
    opacity: 1;
  }
  .galleryBtn__icon {
    width: 16px;
  }
  .galleryBtn__icon::before {
    height: 2px;
  }
  .galleryBtn__icon::after {
    width: 2px;
  }

  /* galleryModal */
  .galleryModal__body {
    padding: 20px;
  }
}

/* floor
---------------------------------------------- */
.floor {
  background-color: #222;
  color: #fff;
  padding-block: 160px;
}
.floor__inner {
  display: grid;
  grid-template-columns: 1fr calc(1120 / 1760 * 100%);
  gap: 50px 5%;
}
.floor__title {
  letter-spacing: 0.02em;
}
.floorInfo {
  position: sticky;
  top: calc(var(--headerheight) + 50px);
}
.floorInfo .tabBoxList {
  margin-left: 0;
  max-width: 406px;
  background-color: #bbb;
  margin-top: 20px;
}
.floorInfo .tabBoxList::before {
  background-color: #fff;
}
.floorInfo .tabBox__tab {
  color: #222;
}

.floorRight__inner {
  display: grid;
  grid-template-columns: calc(560 / 1120 * 100%) calc(480 / 1120 * 100%);
  gap: 50px calc(80 / 1120 * 100%);
}
.floorMap__img {
  position: sticky;
  top: calc(var(--headerheight) + 50px);
}

.floorBox + .floorBox {
  margin-top: 80px;
}
.floorBox__title {
  font-size: clamp(24px, 0.8rem + 2.09vw, 48px);
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgb(255 255 255 / .3);
  padding-bottom: 10px;
}
* + .floorList {
  margin-top: 80px;
}
.floorList li + li {
  margin-top: 80px;
}
* + .floorList__body {
  margin-top: 20px;
}
.floorList__title {
  display: flex;
  align-items: center;
  column-gap: 1em;
}
.floorList__title .alphabet {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  aspect-ratio: 1;
  background-color: #1B3A6A;
  border: 1px solid rgb(255 255 255 / .5);
  color: #fff;
  font-size: 20px;
  text-align: center;
}
* + .floorList__text {
  margin-top: 1.5em;
}
.floorList__title .small {
  display: block;
  font-size: 11px;
  letter-spacing: 0;
}

@media screen and (min-width: 1025px) and (max-height: 700px) {
	.floorMap__img {
		width: min(60vh, 100%);
		margin-inline: auto;
	}
}

@media screen and (max-width: 1200px) {
  .tabBox__tab {
    font-size: 14px;
  }
}

@media screen and (max-width: 1024px) {
  .floorRight__inner {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
  }
}

@media screen and (max-width: 960px) {
  .floor__inner {
    grid-template-columns: 1fr;
  }
  .floorInfo {
    max-width: 400px;
    margin-inline: auto;
  }
  .floorRight__inner {
    margin-inline: auto;
  }
}

@media screen and (max-width: 767px) {
  .floor {
    padding-block: 20px 60px;
  }

  .floorLeft {
    position: sticky;
    top: 0;
    background: #222;
    padding-block: 40px 20px;
    z-index: 10;
  }

  .floorMap {
    width: calc(180 / 335 * 100%);
    margin-inline: auto;
  }
  .floorMap .commonSpModalImage:before {
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
  }
  .floorMap .commonSpModalImage {
    display: block;
    height: 100%;
  }

  * + .floorList {
    margin-top: 40px;
  }

  .floorList li + li {
    margin-top: 50px;
  }

  .floorList__title .alphabet {
    width: 20px;
    font-size: 14px;
  }
}

/* service
---------------------------------------------- */
.service {
  background-color: #F4F4F4;
  padding-block: clamp(80px, 6.06rem + 5.18vw, 160px);
}
.service__inner {
  display: grid;
  grid-template-columns: 1fr calc(1260 / 1760 * 100%);
  gap: 40px 3%;
}
.service__title {
  font-size: 18px;
  margin-bottom: 1em;
}

.serviceBody {
  max-width: 1000px;
  margin-left: auto;
}
.serviceList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(20 / 1000 * 100%);
}
.serviceList > li {
  background-color: #fff;
}
.serviceList__body {
  padding: calc(30 / 320 * 100%);
}
* + .serviceList__text {
  margin-top: .5em;
}

@media screen and (max-width: 1200px) {
  .service__inner {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 767px) {
  .serviceList {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
  .serviceList__body {
    padding: calc(30 / 335 * 100%);
  }
}

/* pageTabBottom
---------------------------------------------- */
.pageTabBottom {
  margin-top: clamp(100px, 7.57rem + 6.47vw, 200px);
}