.side-menu {
  animation-delay: 2400ms;
}
.header-logo {
  display: none;
}

.hero {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.hero-inner {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.hero .kv-background {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  transform-origin: center bottom;
  transform: scale(1.15);
  animation: fadeIn 1s ease-in forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes zoomUp {
  0% {
    transform-origin: center bottom;
    transform: scale(1.15);
  }
  100% {
    transform-origin: center bottom;
    transform: scale(1.3);
  }
}

.hero .logo-portside-wrap {
  width: 275.27px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  aspect-ratio: 275.27 / 144.43;
}

.hero .logo-portside-wrap .logo-portside {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero .logo-portside-fill {
  opacity: 0;
  animation: logoFadeIn 1s ease 300ms forwards;
}

.hero .logo-portside-fill > g > path {
  fill: #23443E;
}

.hero .logo-portside-draw {
  display: none;
}

@keyframes logoFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media screen and (max-width: 768px) {
  .hero .logo-portside-wrap {
    width: calc(432.9vw / var(--s));
  }

  .hero .kv-background {
    height: 100vh;
    margin: 0;
  }
}

.about {
  padding-bottom: 210px;
}
.about-inner {
  padding-top: 184px;
}
.about-img {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 7px;
  margin-bottom: 140px;

  .illustration {
    width: 100%;
    max-width: 676px;
  }
  .keytext {
    margin: 0 auto;
    max-width: 196px;
    width: 100%;
  }
}
.about-title {
  font-size: 40px;
  margin-bottom: 40px;
  line-height: 1;
}
.about-content {
  width: 100%;
  margin: 0 auto;

  p {
    font-size: 23px;
    line-height: 1.5;
    &.-en {
      margin-bottom: 30px;
    }
  }
}
@media screen and (max-width: 768px) {
  .about {
    padding-top: calc(350vw / var(--s));
    padding-bottom: calc(223vw / var(--s));
  }
  .about-inner {
    padding: 0;
  }
  .about-img {
    display: flex;
    flex-direction: column;
    gap: calc(20vw / var(--s));
    margin-bottom: calc(190vw / var(--s));
    .illustration {
      width: calc(546.031vw / var(--s));
    }
    .keytext {
      width: calc(186.184vw / var(--s));
    }
  }
  .about-title {
    display: block;
    font-size: calc(50vw / var(--s));
    margin-bottom: calc(42vw / var(--s));
  }
  .about-content {
    p {
      font-size: calc(25vw / var(--s));
      &.-en {
        margin-bottom: calc(53vw / var(--s));
      }
    }
  }
}

.gallery-title {
  font-size: 40px;
  line-height: 1;
}
.gallery-inner {

  display: flex;
  flex-direction: column;
  gap: 44px;
}
.gallery-group {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.gallery-group-title {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--primary-color);
  padding-bottom: 3px;
  cursor: pointer;
  span {
    font-size: 34px;
    color: var(--primary-color);
    line-height: 1;
  }
}

.gallery-group-content-list {
  display: block;
}
.gallery-carousel-viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  touch-action: pan-y;
  cursor: grab;
}
.gallery-carousel-viewport:active {
  cursor: grabbing;
}
.gallery-carousel-viewport::-webkit-scrollbar {
  display: none;
}
.gallery-carousel-track {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  user-select: none;
}
.gallery-group-content-list .gallery-group-content-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  height: 600px;

  img {
    height: 100%;
  }
}

.gallery-illustration {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 24px;
  margin-top: 200px;

  .illustration {
    width: 100%;
    max-width: 743.792px;
  }
}

@media screen and (max-width: 768px) {
  .gallery {
    padding-bottom: calc(283vw / var(--s));
  }
  .gallery-inner {
    gap: calc(67vw / var(--s));
  }
  .gallery-title {
    display: block;
    font-size: calc(50vw / var(--s));

  }
  .gallery-group {
    gap: calc(45vw / var(--s));
  }
  .gallery-group-title {
    span {
      font-size: calc(37.5vw / var(--s));
    }

    i {
      width: calc(20vw / var(--s));

      &::before, &::after {
        height: 1px;
      }
    }
  }
  .gallery-group-content-item {
    width: 100%;
    height: auto !important;

    img {
      width: 100%;
    }
  }
  .gallery-illustration {
    margin-top: calc(216vw / var(--s));
    .illustration {
      width: calc(495.408vw / var(--s));
    }
  }
}


.floorplans {
  margin-top: 200px;
}
.floorplans-inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  gap: 44px;
}
.floorplans-title {
  font-size: 40px;
  line-height: 1;
  font-weight: 500;
}
.floorplans-group {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.floorplans-group-title {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--primary-color);
  padding-bottom: 3px;
  cursor: pointer;
  span {
    font-size: 25px;
    /* font-weight: bold; */
    color: var(--primary-color);
  }
  i {
    width: 13px;
    aspect-ratio: 1 / 1;
    display: inline-block;
    position: relative;

    &::before, &::after {
      content: '';
      display: block;
      width: 100%;
      height: 3px;
      background-color: var(--primary-color);
      position: absolute;
      top: 50%;
      left: 0;
      transition: transform 300ms ease;
    }
    &::after {
      transform: rotate(90deg);
    }
  }
}
.floorplans-group-content-floor {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0 60px;
}
.floorplans-floor {
  display: flex;
  gap: 93px;
}
.floorplans-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 195.894px;
  width: calc((100% - 279px) / 4);
  cursor: pointer;

  .floorplans-item-image {
    position: relative;
  }
  img {
    width: 100%;
    height: auto;
    transition: opacity 400ms ease;
  }
  img + img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }
  &:hover img + img {
    opacity: 1;
  }
  .floorplans-item-text {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    gap: 2px;
    line-height: 1;

    em {
      font-size: 22px;
      font-style: normal;
    }
    br {
      display: none;
    }
    span {
      font-size: 22px;
      line-height: 1;
    }
  }
}

.floorplans-illustration {
  display: flex;
  justify-content: center;
  width: 100%;
  gap: 24px;
  margin-top: 210px;

  .illustration {
    width: 100%;
    max-width: 341.383px;
  }
}
@media screen and (max-width: 768px) {
  .floorplans {
    margin-top: calc(50vw / var(--s));
  }
  .floorplans-inner {
    gap: calc(50vw / var(--s));
  }
  .floorplans-title {
    display: block;
    font-size: calc(45vw / var(--s));
    margin-bottom: calc(30vw / var(--s));
  }
  .floorplans-group {
    gap: calc(50vw / var(--s));
  }
  .floorplans-group-title {
    span {
      font-size: calc(37.5vw / var(--s));
    }
    i {
      width: calc(20vw / var(--s));
      &::before, &::after {
        height: 1px;
      }
    }
  }
  .floorplans-item {
    width: calc(236.2vw / var(--s));
    gap: calc(25vw / var(--s));

    .floorplans-item-text {
      em { 
        font-size: calc(37.5vw / var(--s));
      }
      span {
        font-size: calc(37.5vw / var(--s));
      }
    }
  }
  .floorplans-group-content {
    padding: 0 calc(100vw / var(--s));
  }
  .floorplans-group-content-floor {
    flex-wrap: wrap;
    gap: calc(126vw / var(--s));
    padding: 0;
  }
  .floorplans-floor {
    gap: calc(85vw / var(--s)) calc(145vw / var(--s));
    flex-wrap: wrap;
  }

  .floorplans-illustration {
    margin-top: calc(211.452vw / var(--s));
    .illustration {
      width: calc(292.054vw / var(--s));
    }
  }
}


.psi-table {
  margin-top: 300px;
}
.psi-table-inner {
  /* max-width: 1200px; */
  /* width: 100%;
  margin: 0 auto; */

  display: flex;
  flex-direction: column;
  gap: 76px;
}
.psi-table-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 164.016px;
}
.psi-table-logo {
  display: block; 
  max-width: 126px;
  width: 100%;
  flex: 1;
}
.psi-table-carousel {
  display: block;
  max-width: 1017.75px;
  width: 100%;
  transform: translateY(23px);
}
.psi-table-images {
  display: grid;
  touch-action: pan-y;
}
.psi-table-image-layer {
  display: block;
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 700ms ease;
}
.psi-table-image-layer.is-active {
  opacity: 1;
}
.psi-table-image {
  display: block;
  width: 100%;
  height: auto;
}
.psi-table-pagination {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 15px;
}
.psi-table-pagination button {
  display: block;
  width: 40px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #91a5a1;
  cursor: pointer;
}
.psi-table-pagination button[aria-current="true"] {
  background: #174b43;
}
.psi-table-pagination button:focus-visible {
  outline: 2px solid #174b43;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .psi-table-image-layer {
    transition-duration: 0s;
  }
}
.psi-table-body {
  display: flex;
  gap: 164.016px;
  width: 100%;
}
.psi-table-body-spacer {
  max-width: 126px;
  width: 100%;
}
.psi-table-body-content {
  max-width: 1017.75px;
  flex: 1;
}
.psi-table-body .en,
.psi-table-body .ja {
  font-size: 20px;
  line-height: 1.75;
}
.psi-table-title {
  font-size: 40px;
  line-height: 1;
}

@media screen and (max-width: 768px) {
  .psi-table {
    margin-top: calc(200vw / var(--s));
  }
  .psi-table-inner {
    gap: calc(63vw / var(--s));
  }
  .psi-table-header {
    gap: calc(104.775vw / var(--s));
  }
  .psi-table-title {
    display: block;
    font-size: calc(50vw / var(--s));
  }
  .psi-table-logo {
    width: calc(112.623vw / var(--s));
  }
  .psi-table-carousel {
    max-width: calc(579.9vw / var(--s));
    transform: translateY(calc(16vw / var(--s)));
  }
  .psi-table-image {
    width: 100%;
  }
  .psi-table-pagination {
    gap: calc(5vw / var(--s));
    margin-top: calc(15vw / var(--s));
  }
  .psi-table-pagination button {
    width: calc(40vw / var(--s));
    height: calc(8vw / var(--s));
  }
  .psi-table-body {
    gap: calc(104.775vw / var(--s));
    justify-content: space-between;
    .en,
    .ja {
      font-size: calc(25vw / var(--s));
      line-height: 1.6;
    }
  }
  .psi-table-body-spacer {
    max-width: calc(112.623vw / var(--s));
  }
  .psi-table-body-content {
    max-width: calc(579.9vw / var(--s));
  }
}

.faq {
  margin-top: 300px;
}
.faq-inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  gap: 44px;
}
.faq-title {
  font-size: 40px;
  line-height: 1;
}
.faq-group {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.faq-group-title,
.faq-top-trigger,
.faq-inner-title {
  color: var(--primary-color);
  cursor: pointer;
}
.faq-group-title {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--primary-color);
  padding-bottom: 3px;
  span {
    font-size: 34px;
  }
  i {
    width: 20px;
    aspect-ratio: 1 / 1;
    display: inline-block;
    position: relative;

    &::before, &::after {
      content: '';
      display: block;
      width: 100%;
      height: 3px;
      background-color: var(--primary-color);
      position: absolute;
      top: 50%;
      left: 0;
      transition: transform 300ms ease;
    }
    &::after {
      transform: rotate(90deg);
    }
  }
}
.faq-group.is-open .faq-group-title i::after {
  transform: rotate(0deg);
}
.faq-group-content-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-group-content,
.faq-top-panel,
.faq-inner-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 400ms ease;
}
.faq-group.is-open .faq-group-content,
.faq-top-row.is-open .faq-top-panel,
.faq-inner-item.is-open .faq-inner-content {
  grid-template-rows: 1fr;
}
.faq-group-content > *,
.faq-top-panel > *,
.faq-inner-content > * {
  min-height: 0;
  overflow: hidden;
}
.faq-inner-list {
  display: flex;
  flex-direction: column;
}
.faq-top-row {
  border-bottom: 1px solid var(--primary-color);
}
.faq-top-trigger,
.faq-inner-title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  background: transparent;
  text-align: left;
}
.faq-top-trigger {
  padding: 16px 0;
  font-size: 20px;
}
.faq-inner-item {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--primary-color);
  gap: 10px;
  padding-bottom: 10px;
}
.faq-inner-title {
  display: flex;
  padding: 14px 0 14px 24px;
  gap: 34px;
  font-size: 23px;
  justify-content: flex-start;
  align-items: flex-start;

  span {
    display: block;
    margin-top: .5em;
    line-height: 1.76;
  }

  &::before {
    content: 'Q';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52.9px;
    height: 52.9px;
    aspect-ratio: 1 / 1;
    font-size: 40px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    font-family: "ivyjournal", serif;
  }
}
.faq-inner-content {
  padding: 0 24px;
}
.faq-inner-content p {
  margin-top: .5em;
  padding-bottom: 16px;
  font-size: 23px;
  line-height: 1.6;
  flex: 1;
}
.faq-inner-content-inner {
  display: flex;
  gap: 34px;
  align-items: flex-start;
  &::before {
    content: 'A';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52.9px;
    aspect-ratio: 1 / 1;
    font-size: 40px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    font-family: "ivyjournal", serif;
  }
}
.faq-top-plus,
.faq-inner-title i {
  width: 20px;
  height: 20px;
  display: inline-block;
  flex: 0 0 auto;
  position: relative;
  margin: auto 0 auto auto;
}
.faq-inner-title i::before,
.faq-inner-title i::after {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--primary-color);
  position: absolute;
  top: 50%;
  left: 0;
  transition: transform 300ms ease;
}
.faq-inner-title i::after {
  transform: rotate(90deg);
}
.faq-inner-item.is-open .faq-inner-title i::after {
  transform: rotate(0deg);
}
.faq-top-plus {
  flex: 0 0 auto;
  font-size: 26px;
  font-weight: normal;
  line-height: 1;
  transition: transform 300ms ease;
}
.faq-top-row.is-open .faq-top-plus,
.faq-inner-item.is-open .faq-inner-plus {
  transform: rotate(45deg);
}

@media screen and (max-width: 768px) {
  .faq {
    margin-top: calc(200vw / var(--s));
  }
  .faq-title {
    display: block;
    font-size: calc(50vw / var(--s));
  }
  .faq-inner {
    gap: calc(58vw / var(--s));
  }
  .faq-group {
    gap: calc(33vw / var(--s));
  }
  .faq-group-title {
    span {
      font-size: calc(34vw / var(--s));
    }

    i {
      width: calc(20vw / var(--s));

      &::before, 
      &::after {
        height: 1px;
      }
    }
  }
  .faq-group-content-inner {
    gap: calc(34vw / var(--s));
  }
  .faq-inner-item {
    gap: calc(34vw / var(--s));
    padding-bottom: 0;
  }
  .faq-inner-title {
    font-size: calc(25vw / var(--s));
    gap: calc(34vw / var(--s));
    padding: 0;

    i {
      width: calc(20vw / var(--s));

      &::before, 
      &::after {
        height: 1px;
      }
    }

    &::before {
      width: calc(57.32vw / var(--s));
      height: calc(57.32vw / var(--s));
      font-size: calc(41vw / var(--s));
    }
  }
  .faq-inner-content {
    padding: 0;
    p {
      font-size: calc(25vw / var(--s));
    }
  }
  .faq-inner-content-inner {
    gap: calc(34vw / var(--s));

    &::before {
      width: calc(57.32vw / var(--s));
      font-size: calc(41vw / var(--s));
    }
  }
}



.map {
  margin-top: 100px;
}
.map-inner {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.map-title {
  font-size: 40px;
  margin-bottom: 40px;
  line-height: 1;
}
.map-image {
  display: block;
  margin-bottom: 24px;
  transition: opacity 300ms ease;
  img {
    width: 100%;
    height: auto;
  }

  &:hover {
    opacity: 0.8;
  }
}
.map-description {
  p {
    font-size: 23px;
  }
}
@media screen and (max-width: 768px) {
  .map {
    margin-top: calc(300vw / var(--s));
  }
  .map-title {
    display: block;
    font-size: calc(50vw / var(--s));
    margin-bottom: calc(41vw / var(--s));
  }
  .map-image {
    margin-bottom: calc(45vw / var(--s));
  }
  .map-description {
    p {
      font-size: calc(25vw / var(--s));
    }
  }
}

.floor_plan-modal {
  --modal-base: 1922;

  display: none;
  position: fixed;
  inset: 0;
  z-index: 20;
  background-color: #FFFDF1;
  color: var(--primary-color);
  width: 100vw;
  height: 100dvh;
  padding-top: min(calc(28vw / var(--modal-base) * 100), 28px);
  /* padding-inline: min(calc(74vw / var(--modal-base) * 100), 74px); */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: auto;
/* 
  &::before {
    content: "";
    display: block;
    position: sticky;
    width: min(calc(1858.61vw / var(--modal-base) * 100), 1858.61px);
    top: min(calc(28vw / var(--modal-base) * 100), 28px);
    height: min(calc(20vw / var(--modal-base) * 100), 20px);
    z-index: 2;
    background-color: var(--primary-color);
    margin: 0 auto;
  } */

}
.floor_plan-modal.is-open {
  display: flex;
}
.floor_plan-modal .modal-close {
  position: absolute;
  /* top: min(calc(100vw / var(--modal-base) * 100), 100px); */
  top: min(calc(40vw / var(--modal-base) * 100), 40px);
  right: min(calc(40vw / var(--modal-base) * 100), 40px);
  z-index: 1;
  /* width: min(calc(1560vw / var(--modal-base) * 100), 1560px); */
  display: flex; 
  justify-content: flex-end;
}
.floor_plan-modal .modal-close-btn {
  /* right: min(calc(205vw / var(--modal-base) * 100), 205px); */
  width: min(calc(39.18vw / var(--modal-base) * 100), 39.18px);
  aspect-ratio: 1;
  cursor: pointer;

  img {
    width: 100%;
  }
}
.floor_plan-modal .modal-close img {
  width: 100%;
  height: 100%;
}
.floor_plan-modal .modal-navigation {
  position: fixed;
  top: 50%;
  z-index: 1;
  width: min(calc(105.98vw / var(--modal-base) * 100), 105.98px);
  height: min(calc(50.26vw / var(--modal-base) * 100), 50.26px);
  border: 1px solid var(--primary-color);
  border-radius: min(calc(50.26vw / 2 / var(--modal-base) * 100), calc(50.26px / 2)); 
  background: transparent;
  color: var(--primary-color);
  cursor: pointer;
  transform: translateY(-50%);
  font-size: min(calc(32.39vw / var(--modal-base) * 100), 32.39px);
  /* padding-top: min(calc(7vw / var(--modal-base) * 100), 7px); */
}
.floor_plan-modal .modal-navigation-prev {
  left: min(calc(84vw / var(--modal-base) * 100), 84px);
}
.floor_plan-modal .modal-navigation-next {
  right: min(calc(84vw / var(--modal-base) * 100), 84px);
}
.floor_plan-modal .modal-inner {
  width: min(calc(1390.71vw / var(--modal-base) * 100), 1390.71px);
  /* margin: auto; */
  /* margin-top: min(calc(200vw / var(--modal-base) * 100), 200px); */

  display: flex;
  flex-direction: column;
  justify-content: center;
}
.floor_plan-modal .modal-inner::-webkit-scrollbar {
  display: none;
}
.floor_plan-modal .modal-header {
  margin-bottom: min(calc(32vw / var(--modal-base) * 100), 32px);
  text-align: center;
}
.floor_plan-modal .modal-header h2 {
  font-size: min(calc(30vw / var(--modal-base) * 100), 30px);
  font-weight: 400;
  line-height: 1.2;
}
.floor_plan-modal .modal-images {
  display: flex;
  gap: min(calc(70vw/ var(--modal-base) * 100), 70px);
}
.floor_plan-modal .modal-images .-block {
  display: flex;
  flex-direction: column;
  gap: min(calc(20vw / var(--modal-base) * 100), 20px);
}
.floor_plan-modal .modal-images.modal-image-carousel {
  display: block;
  max-width: none;
  height: auto;
  min-height: 0;
  transform: none;
}
.modal-image-carousel .psi-table-images {
  position: relative;
  aspect-ratio: 1390 / 745.3;
  overflow: hidden;
}
.modal-image-carousel .psi-table-image-layer {
  position: absolute;
  inset: 0;
}
.modal-image-carousel .psi-table-image {
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media screen and (max-width: 768px) {
  .modal-image-carousel .psi-table-images {
    aspect-ratio: 965 / 657;
  }
}
.floor_plan-modal .modal-images .-row {
  display: flex;
  justify-content: space-between;
  gap: min(calc(7vw / var(--modal-base) * 100), 7px);

  img {
    display: block;
    height: min(calc(var(--pc-height) / var(--modal-base) * 100vw), calc(var(--pc-height) * 1px));
  }
}
.floor_plan-modal .modal-images .-cell {
  min-width: 0;
}
.floor_plan-modal .modal-images .-caption {
  margin-top: min(calc(5vw / var(--modal-base) * 100), 5px);
  font-size: min(calc(15vw / var(--modal-base) * 100), 15px);
  line-height: 1.2;
}
.floor_plan-modal .modal-body-foot {
  display: flex;
  align-items: flex-end;
  gap: min(calc(70vw / var(--modal-base) * 100), 70px);
  /* min-height: min(calc(233.56vw / var(--modal-base) * 100), 233.56px); */

  .modal-reservation {
    font-size: min(calc(20vw / var(--modal-base) * 100), 20px);
    margin-left: auto;
    /* margin-top: auto; */
    margin-right: 0;
    margin-bottom: 0;
    display: flex;
    justify-content: flex-end;
    a {
      width: min(calc(180vw / var(--modal-base) * 100), 180px);
    }
  }
}
.floor_plan-modal .modal-factors {
  display: flex;
  flex-wrap: wrap;
  gap: min(calc(10vw / var(--modal-base) * 100), 10px) min(calc(25vw / var(--modal-base) * 100), 25px);
  margin-top: min(calc(24vw / var(--modal-base) * 100), 24px);
}
.floor_plan-modal .modal-factor {
  font-size: min(calc(14vw / var(--modal-base) * 100), 14px);
}
.floor_plan-modal .modal-factor-item {
  padding-bottom: 1px;
  /* background: url(../img/top/modal-line.svg) left bottom repeat-x; */
  white-space: nowrap;
  /* padding-top: 7px; */
  border-bottom: 0.25px solid var(--primary-color);
}
.floor_plan-modal > .modal-reservation {
  display: none;
}
.floor_plan-modal .modal-reservation {
  width: min(calc(250vw / var(--modal-base) * 100), 250px);
  margin: min(calc(100vw / var(--modal-base) * 100), 100px) auto 0;
}
.floor_plan-modal .modal-reservation {
  a {
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding-top: min(calc(7vw / var(--modal-base) * 100), 7px); */
    width: min(calc(242.09vw / var(--modal-base) * 100), 242.09px);
    height: min(calc(48.63vw / var(--modal-base) * 100), 48.63px);
    background: url(../img/top/modal-reservation-bg.svg) no-repeat center center;
    background-size: contain;
    font-family: 'ivyjournal', serif;
    font-style: italic;
  }
}
body.modal-open {
  overflow: hidden;
}
.modal-navigation-wrapper .modal-reservation {
  display: none;
}

@media screen and (max-width: 768px) {
  .floor_plan-modal {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    z-index: 2000;
    padding-top: calc(20vw / var(--s));
    overflow: auto;
    &::before {
      height: calc(20vw / var(--s));
      width: calc(100% - 2 * calc(20vw / var(--s)));
    }
  }
  .floor_plan-modal .modal-close {
    width: calc(39.3vw / var(--s));
    top: calc(73vw / var(--s));
    left: auto;
    right: calc(54vw / var(--s));
  }
  .floor_plan-modal .modal-close-btn {
    width: 100%;
  }
  .modal-navigation-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: calc(60vw / var(--s));
    width: calc(961.32vw / var(--s));
    margin: 0 auto;
    margin-top: calc(120vw / var(--s));
  }
  .floor_plan-modal .modal-navigation {
    width: calc(123.81vw / var(--s));
    height: calc(59.32vw / var(--s));
    font-size: calc(37.48vw / var(--s));
    border-radius: calc(61vw / var(--s));
    top: auto;
    transform: none;
    bottom: calc(80vw / var(--s));
    position: static;
    /* padding-top: calc(7vw / var(--s)); */
  }
  .floor_plan-modal .modal-reservation {
    display: block;
    bottom: calc(80vw / var(--s));
    left: 0;
    right: 0;
    margin: 0 auto;
    width: calc(280.18vw / var(--s));
    height: calc(56.29vw / var(--s));

    a {
      width: 100%;
      height: 100%;
      background: url(../img/top/modal-reservation-bg.svg) no-repeat center center;
      background-size: contain;
      font-size: calc(26.8vw / var(--s));
      /* padding-top: calc(7vw / var(--s)); */
    }
  }
  .floor_plan-modal .modal-navigation-prev {
    left: calc(54vw / var(--s));
  }
  .floor_plan-modal .modal-navigation-next {
    right: calc(54vw / var(--s));
  }
  .floor_plan-modal .modal-inner {
    margin-top: calc(32vw / var(--s));
    width: calc(961.32vw / var(--s));
    justify-content: flex-start;
    height: auto;
    overflow: visible;
  }
  .floor_plan-modal .modal-inner .modal-reservation {
    display: none;
  }
  .floor_plan-modal .modal-header {
    margin-bottom: calc(37.5vw / var(--s));
  }
  .floor_plan-modal .modal-header h2 {
    font-size: calc(35vw / var(--s));
  }

  .floor_plan-modal .modal-body {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .floor_plan-modal .modal-images {
    position: relative;
    height: calc(1137.47vw / var(--s));
    min-height: calc(1137.47vw / var(--s));

    .-cell {
      position: absolute;
      width: calc(var(--width) / var(--s) * 1vw);
      img {
        display: block;
        width: 100%;
        height: calc(var(--height) / var(--s) * 1vw);
      }
      top: calc(var(--top) / var(--s) * 1vw);
      left: calc(var(--left) / var(--s) * 1vw);
      right: calc(var(--right) / var(--s) * 1vw);
      bottom: calc(var(--bottom) / var(--s) * 1vw);
    }
  }

  .floor_plan-modal .modal-images .-caption {
    font-size: calc(24vw / var(--s));
    margin-top: calc(3vw / var(--s));
  }
  /* .floor_plan-modal .modal-body-foot {
    height: calc(191.28vw / var(--s));
  } */
  .floor_plan-modal .modal-factors {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: calc(50vw / var(--s));
  }
  .floor_plan-modal .modal-factor {
    font-size: calc(30vw / var(--s));
  }
  .floor_plan-modal .modal-factor-item {
    white-space: wrap;
  }
}