@charset "utf-8";
/*-----------------------------------------------
    details
-----------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");

/* ==============================================
/* :root
============================================== */
:root {
  --color-base: #444444;
  --color-white: #ffffff;
  --color-gray: #efefef;
  --color-dark-gray: #bbbbbb;
  --color-navy: #003a57;
  --color-red: #d63638;
  --color-light-red: #ffeaf1;
  --color-green: #16b192;
  --color-orange: #f6a822;
  --color-blue: #007aff;
  --color-light-blue: #eff7ff;
  --color-theme: #00a9c9;
  --color-khaki: #d3c27c;
}

/* ==============================================
/* Google Fonts Lato
============================================== */
.lato-thin {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.lato-light {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.lato-black {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: normal;
}

/* ==============================================
/* details_nav
============================================== */
.details_nav {
  position: sticky;
  top: 100px;
  inline-size: 100%;
  background: var(--color-gray);
  z-index: 1000;

  & ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding-block: 10px;

    & li {
      inline-size: calc(100% / 6 - 25px);
      block-size: 70px;
      font-weight: 600;

      & a {
        position: relative;
        inline-size: 100%;
        block-size: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        transition: 0.6s;

        &::before {
          content: "";
          inline-size: 40px;
          block-size: 40px;
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat;
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          margin: auto;
        }

        &::after {
          content: "";
          transition: 0.6s;
        }

        &.active::after {
          inline-size: 100%;
          block-size: 3px;
          background: var(--color-navy);
          display: inline-block;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
        }
      }

      &.top a::before {
        background-image: url(../img/estate/details_nav_top.webp);
      }

      &.point a::before {
        background-image: url(../img/estate/details_nav_point.webp);
      }

      &.plan a::before {
        background-image: url(../img/estate/details_nav_plan.webp);
      }

      &.summary a::before {
        background-image: url(../img/estate/details_nav_summary.webp);
      }

      &.faq a::before {
        background-image: url(../img/estate/details_nav_faq.webp);
      }
    }
  }
}

@media screen and (width <= 768px) {
  .details_nav {
    top: 60px;

    & ul {
      flex-direction: row;
      overflow-x: scroll;
      justify-content: flex-start;
      gap: 10px;

      & li {
        flex-shrink: 0;
        inline-size: 40%;
        block-size: 40px;
        font-size: 10px;

        & a {
          position: relative;
          inline-size: 65%;
          block-size: 100%;
          display: flex;
          justify-content: center;
          align-items: flex-end;
          transition: 0.6s;

          &::before {
            content: "";
            inline-size: 20px;
            block-size: 20px;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            margin: auto;
          }
        }
      }
    }
  }
}

/* ==============================================
/* #container
============================================== */
#container {
  overflow: visible;
  contain: paint;
  padding-top: 100px;
}

/* ==============================================
/* secDetailsTitle
============================================== */
.secDetailsTitle {
  margin-block: 30px;

  & h1 {
    position: relative;
    line-height: 1.5;
    letter-spacing: 0.05em;
    font-size: clamp(1.5rem, 1.337rem + 0.83vw, 2rem);
    padding-block: 20px;
    font-weight: bold;

    &::before,
    &::after {
      position: absolute;
      left: 0;
      inline-size: 100%;
      block-size: 2px;
      content: "";
      background-image: linear-gradient(to left, var(--color-theme) 0%, var(--color-navy) 100%);
    }

    &:before {
      top: 0;
    }

    &:after {
      bottom: 0;
    }
  }
}

@media screen and (width <= 768px) {
  .secDetailsTitle {
    margin-block: 20px;
  }
}

/* ==============================================
/* secDetailsProperty
============================================== */
.secDetailsProperty {
  inline-size: 100%;
  margin: 0 auto 100px;
  padding: 60px auto 100px;

  & .doubleColumn {
    display: flex;
    align-items: flex-start;
    gap: 50px;

    & .mainArea {
      inline-size: 900px;

      & .propertyContent {
        position: relative;
        inline-size: 100%;
        block-size: auto;

        & .propertyIcon {
          inline-size: 100%;

          & .iconList {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-start;
            gap: 20px;
            margin-block-end: 15px;

            & li {
              inline-size: calc(100% / 8 - 18px);
              background: var(--color-green);
              border-radius: 5px;

              & img {
                max-inline-size: 100px;
              }
            }
          }
        }

        & .propertyTitle {
          margin-block: 0 30px;

          & h2 {
            font-size: clamp(1.25rem, 1.128rem + 0.62vw, 1.625rem);
            font-weight: bold;
          }
        }

        & .swiper {
          position: relative;
          inline-size: 100%;
          block-size: 100%;
          background: var(--color-gray);

          & .swiper-slide {
            display: grid;
            place-items: center;

            & img {
              display: block;
              inline-size: 100%;
              block-size: 530px;
              object-fit: cover;
              background: var(--color-white);
            }
          }

          & .swiper-button-next,
          & .swiper-button-prev {
            inline-size: 50px;
            block-size: 50px;
            color: var(--color-white);
            background: var(--color-base);
            border-radius: 50%;

            &:after,
            &:after {
              font-size: 22px;
            }
          }

          & .swiper-pagination {
            position: absolute;
            bottom: 0;
            left: 0;
            inline-size: 100px;
            color: var(--color-white);
            background-color: var(--color-base);
            font-weight: bold;
            text-align: center;
            transition: 0.3s opacity;
            transform: translate3d(0, 0, 0);
            z-index: 10;
          }

          .autoplay-progress {
            position: absolute;
            left: 2.5%;
            bottom: 7.5%;
            z-index: 10;
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: var(--color-white);

            & svg {
              --progress: 0;
              position: absolute;
              left: 0;
              top: 0px;
              z-index: 10;
              width: 100%;
              height: 100%;
              stroke-width: 4px;
              stroke: var(--color-white);
              fill: none;
              stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
              stroke-dasharray: 125.6;
              transform: rotate(-90deg);
            }
          }
        }

        & .propertyTable {
          display: flex;
          align-items: flex-start;
          margin-block: 30px 0;

          & .priceTable {
            inline-size: 100%;
            min-block-size: 150px;
            border-inline-start: 1px solid var(--color-dark-gray);
            border-block-end: 1px solid var(--color-dark-gray);

            & th,
            & td {
              padding: 10px;
              border-block-start: 1px solid var(--color-dark-gray);
              vertical-align: middle;
            }

            & th {
              inline-size: 150px;
              background: var(--color-gray);
              font-weight: 600;
              text-align: center;
            }

            & td {
              inline-size: calc(100% - 150px);

              & .price {
                font-size: 40px;
                font-weight: bold;
                color: var(--color-red);
                line-height: 1;
              }

              & .payment {
                font-size: 24px;
                font-weight: 600;
              }

              & .loan {
                display: inline-block;
                cursor: pointer;
                color: var(--color-white);
                background: var(--color-base);
                padding: 5px 10px;
                border-radius: 5px;
                font-size: 14px;
              }
            }
          }

          & .areaTable {
            inline-size: 100%;
            min-block-size: 150px;
            border: 1px solid var(--color-dark-gray);

            & th,
            & td {
              padding: 10px;
              border-block-start: 1px solid var(--color-dark-gray);
              vertical-align: middle;
            }

            & th {
              inline-size: 150px;
              background: var(--color-gray);
              font-weight: 600;
              text-align: center;
            }

            & td {
              inline-size: calc(100% - 150px);
            }
          }
        }

        & .point {
          margin-block: 60px 0;

          & h3 {
            position: relative;
            font-size: clamp(1.125rem, 1.043rem + 0.41vw, 1.375rem);
            text-align: center;
            font-weight: bold;

            &:before {
              position: absolute;
              bottom: -10px;
              left: 50%;
              transform: translate(-50%, 10px);
              inline-size: 60px;
              block-size: 5px;
              content: "";
              background: var(--color-navy);
            }
          }

          & .pointList {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-block: 60px 0;
            gap: 50px 20px;
            list-style: none;

            & .item {
              position: relative;
              inline-size: calc(100% / 2 - 10px);

              & img {
                inline-size: 100%;
                block-size: 300px;
                object-fit: cover;
                aspect-ratio: 2 / 3;
                border: solid 1px var(--color-dark-gray);
              }

              & .title {
                position: absolute;
                top: 0;
                left: 0;
                display: flex;
                align-items: center;
                gap: 10px;
                inline-size: 100%;
                block-size: 50px;
                color: var(--color-white);
                background: rgba(0, 0, 0, 0.6);

                & .square {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  flex-direction: column;
                  inline-size: 50px;
                  block-size: 50px;
                  color: var(--color-base);
                  background-color: var(--color-khaki);
                  line-height: 1;

                  & .num {
                    font-size: 20px;
                  }
                }

                & .htxt {
                  inline-size: calc(100% - 50px);
                  font-size: 18px;
                  font-weight: bold;
                }
              }
            }
          }
        }

        & .planOverview {
          margin-block: 60px 0;

          & h3 {
            position: relative;
            font-size: clamp(1.125rem, 1.043rem + 0.41vw, 1.375rem);
            text-align: center;
            font-weight: bold;

            &:before {
              position: absolute;
              bottom: -10px;
              left: 50%;
              transform: translate(-50%, 10px);
              inline-size: 60px;
              block-size: 5px;
              content: "";
              background: var(--color-navy);
            }
          }

          & .planList {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            gap: 20px;
            margin-block: 60px 0;
            background: var(--color-gray);
            padding: 20px;

            & .item {
              inline-size: calc(100% / 3 - 13px);
              background: var(--color-white);
              padding-block: 5px;

              & img {
                max-inline-size: 100%;
                min-block-size: 250px;
                object-fit: cover;
              }

              & .caption {
                text-align: center;
                margin-block-start: 5px;
              }
            }
          }
        }

        & .living {
          inline-size: 100%;
          margin-block: 60px 0;

          & h3 {
            position: relative;
            font-size: clamp(1.125rem, 1.043rem + 0.41vw, 1.375rem);
            text-align: center;
            font-weight: bold;

            &:before {
              position: absolute;
              bottom: -10px;
              left: 50%;
              transform: translate(-50%, 10px);
              inline-size: 60px;
              block-size: 5px;
              content: "";
              background: var(--color-navy);
            }
          }

          & .bg-gray {
            padding: 20px;
            background: var(--color-gray);
            margin-block: 60px 0;
          }

          & ul {
            display: flex;
            gap: 30px;

            & li {
              inline-size: calc(100% / 3 - 20px);

              & a {
                position: relative;
                cursor: pointer;

                &::before {
                  content: "";
                  position: absolute;
                  inset: -5px;
                }

                & .item {
                  display: flex;
                  align-items: center;
                  background: var(--color-white);

                  & img {
                    max-inline-size: 100%;
                    inline-size: 100px;
                  }

                  & p {
                    position: relative;
                    inline-size: calc(100% - 100px);
                    font-size: 18px;
                    text-align: center;
                    background: var(--color-white);

                    &::after {
                      position: absolute;
                      top: 50%;
                      right: 5%;
                      transform: translate(-5%, -50%);
                      content: "";
                      display: block;
                      background: url(../img/estate/modal_icon.svg) center / contain no-repeat;
                      inline-size: 25px;
                      block-size: 25px;
                    }
                  }
                }
              }
            }
          }
        }

        & .faq {
          inline-size: 100%;
          margin-block: 60px 0;

          & h3 {
            position: relative;
            font-size: clamp(1.125rem, 1.043rem + 0.41vw, 1.375rem);
            text-align: center;
            font-weight: bold;

            &:before {
              position: absolute;
              bottom: -10px;
              left: 50%;
              transform: translate(-50%, 10px);
              inline-size: 60px;
              block-size: 5px;
              content: "";
              background: var(--color-navy);
            }
          }
        }

        & .gift {
          inline-size: 100%;
          margin-block: 60px 0;

          & h3 {
            position: relative;
            font-size: clamp(1.125rem, 1.043rem + 0.41vw, 1.375rem);
            text-align: center;
            font-weight: bold;

            &:before {
              position: absolute;
              bottom: -10px;
              left: 50%;
              transform: translate(-50%, 10px);
              inline-size: 60px;
              block-size: 5px;
              content: "";
              background: var(--color-navy);
            }
          }

          & img {
            margin-block: 60px 0;
            max-inline-size: 100%;
          }
        }

        & .booking {
          inline-size: 100%;
          margin-block: 60px 0;

          & h3 {
            position: relative;
            font-size: clamp(1.125rem, 1.043rem + 0.41vw, 1.375rem);
            text-align: center;
            font-weight: bold;

            &:before {
              position: absolute;
              bottom: -10px;
              left: 50%;
              transform: translate(-50%, 10px);
              inline-size: 60px;
              block-size: 5px;
              content: "";
              background: var(--color-navy);
            }
          }

          & .bookingTable {
            margin-block: 60px 0;
            background: var(--color-gray);
            padding: 20px;

            & .bookingWrap {
              display: grid;
              grid-template-columns: repeat(2, 1fr);
              gap: 0 30px;
              background: var(--color-white);
              padding: 20px;

              & .bookingItem {
                inline-size: 100%;

                & .saturday {
                  color: var(--color-blue);
                  font-weight: bold;
                }

                & .sunday {
                  color: var(--color-red);
                  font-weight: bold;
                }

                & table {
                  inline-size: 100%;
                  border: solid 1px var(--color-dark-gray);

                  & th,
                  & td {
                    padding: 5px;
                  }
                }
              }
            }
          }
        }

        & .conversion {
          margin-block: 30px 0;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 15px;

          & .reserve a {
            position: relative;
            color: var(--color-white);
            background: var(--color-orange);
            font-weight: bold;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 10px 50px;
            text-decoration: none;
            transition: 0.3s ease-in-out;
            inline-size: 100%;

            &:hover {
              opacity: 0.8;
            }

            &::before {
              content: "";
              position: absolute;
              top: 50%;
              left: 5%;
              transform: translate(-5%, -50%);
              display: inline-block;
              inline-size: 30px;
              block-size: 30px;
              background: url(../img/estate/detail_reserve_icon.webp) center / contain no-repeat;
            }

            &:after {
              content: "";
              position: absolute;
              top: 50%;
              right: 20px;
              display: flex;
              justify-content: center;
              align-items: center;
              transition: right 0.3s;
              width: 10px;
              height: 10px;
              border-top: solid 2px currentColor;
              border-right: solid 2px currentColor;
              transform: translateY(-50%) rotate(45deg);
            }
          }

          & .document a {
            position: relative;
            color: var(--color-white);
            background: var(--color-green);
            font-weight: bold;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 10px 50px;
            text-decoration: none;
            transition: 0.3s ease-in-out;
            inline-size: 100%;

            &:hover {
              opacity: 0.8;
            }

            &::before {
              content: "";
              position: absolute;
              top: 50%;
              left: 5%;
              transform: translate(-5%, -50%);
              display: inline-block;
              inline-size: 30px;
              block-size: 30px;
              background: url(../img/estate/detail_document_icon.webp) center / contain no-repeat;
            }

            &:after {
              content: "";
              position: absolute;
              top: 50%;
              right: 20px;
              display: flex;
              justify-content: center;
              align-items: center;
              transition: right 0.3s;
              width: 10px;
              height: 10px;
              border-top: solid 2px currentColor;
              border-right: solid 2px currentColor;
              transform: translateY(-50%) rotate(45deg);
            }
          }
        }
      }
    }

    & .subdivision {
      inline-size: 100%;
      margin-block: 60px 0;

      & h3 {
        position: relative;
        font-size: clamp(1.125rem, 1.043rem + 0.41vw, 1.375rem);
        text-align: center;
        font-weight: bold;

        &:before {
          position: absolute;
          bottom: -10px;
          left: 50%;
          transform: translate(-50%, 10px);
          inline-size: 60px;
          block-size: 5px;
          content: "";
          background: var(--color-navy);
        }
      }

      & .subdivisionList {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 30px;
        margin-block: 60px 0;

        & li {
          inline-size: calc(100% / 3 - 20px);
          border: solid 1px var(--color-dark-gray);
          border-radius: 5px;

          & .listImg {
            inline-size: 100%;

            & img {
              max-inline-size: 100%;
            }
          }

          & .listBody {
            padding: 15px 5px;

            & .titleTxt {
              font-weight: 600;
            }

            & table {
              inline-size: 100%;

              & th {
                inline-size: 65px;
                block-size: 50px;
                color: var(--color-white);
                background: var(--color-base);
                border-block-end: solid 1px var(--color-white);
                font-size: 13px;
                text-align: center;
                vertical-align: middle;
              }

              & td {
                inline-size: calc(100% - 65px);
                font-size: 13px;
                background: var(--color-gray);
                border-block-end: solid 1px var(--color-white);
                vertical-align: middle;
                padding: 0 10px;

                & .priceTxt {
                  font-size: 26px;
                  color: var(--color-red);
                }
              }
            }
          }
        }
      }
    }

    & aside {
      position: sticky;
      top: 210px;
      inline-size: calc(100% - 900px);
      block-size: auto;
      border: solid 1px var(--color-dark-gray);
      z-index: 10;

      & .inner {
        padding: 15px;
      }

      & h4 {
        font-size: 18px;
        font-weight: 600;
        color: var(--color-white);
        background: var(--color-navy);
        text-align: center;
        padding-block: 10px;
      }

      & .secStoreInfo {
        inline-size: 100%;

        & tr {
          border-block-start: solid 1px var(--color-dark-gray);

          &:last-of-type {
            border-block-end: solid 1px var(--color-dark-gray);
          }
        }

        & th {
          background: var(--color-gray);
          inline-size: 80px;
          padding: 5px;
          text-align: center;
          font-size: 13px;
        }

        & td {
          inline-size: calc(100% - 80px);
          padding: 5px;
          font-size: 13px;

          & h5 {
            font-size: 16px;
            font-weight: 600;
          }
        }
      }

      & .secSpGoogleMap {
        display: none;
      }

      & .secConversion {
        margin-block: 30px 0;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 15px;

        & .reserve a {
          position: relative;
          color: var(--color-white);
          background: var(--color-orange);
          font-weight: bold;
          display: flex;
          justify-content: space-around;
          align-items: center;
          padding: 10px 50px;
          text-decoration: none;
          transition: 0.3s ease-in-out;
          inline-size: 100%;

          &:hover {
            opacity: 0.8;
          }

          &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 5%;
            transform: translate(-5%, -50%);
            display: inline-block;
            inline-size: 30px;
            block-size: 30px;
            background: url(../img/estate/detail_reserve_icon.webp) center / contain no-repeat;
          }

          &:after {
            content: "";
            position: absolute;
            top: 50%;
            right: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: right 0.3s;
            width: 10px;
            height: 10px;
            border-top: solid 2px currentColor;
            border-right: solid 2px currentColor;
            transform: translateY(-50%) rotate(45deg);
          }
        }

        & .document a {
          position: relative;
          color: var(--color-white);
          background: var(--color-green);
          font-weight: bold;
          display: flex;
          justify-content: space-around;
          align-items: center;
          padding: 10px 50px;
          text-decoration: none;
          transition: 0.3s ease-in-out;
          inline-size: 100%;

          &:hover {
            opacity: 0.8;
          }

          &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 5%;
            transform: translate(-5%, -50%);
            display: inline-block;
            inline-size: 30px;
            block-size: 30px;
            background: url(../img/estate/detail_document_icon.webp) center / contain no-repeat;
          }

          &:after {
            content: "";
            position: absolute;
            top: 50%;
            right: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: right 0.3s;
            width: 10px;
            height: 10px;
            border-top: solid 2px currentColor;
            border-right: solid 2px currentColor;
            transform: translateY(-50%) rotate(45deg);
          }
        }
      }

      & .secPcBnr {
        margin-block: 15px 0;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 15px;

        & li {
          border: solid 1px var(--color-gray);
          inline-size: auto;
          block-size: 150px;

          & img {
            max-inline-size: 100%;
          }
        }
      }
    }
  }
}

@media screen and (width <= 768px) {
  .secDetailsProperty {
    inline-size: 100%;
    margin: 0 auto 100px;

    & .doubleColumn {
      flex-direction: column;

      & .mainArea {
        inline-size: 100%;

        & .propertyContent {
          position: relative;

          & .propertyIcon {
            inline-size: 100%;

            & .iconList {
              flex-direction: row;
              flex-wrap: nowrap;
              overflow-x: scroll;

              & li {
                inline-size: 20%;
                flex-shrink: 0;
              }
            }
          }

          & .swiper {
            position: relative;

            & .swiper-slide {
              & img {
                inline-size: 100%;
                block-size: 200px;
                object-fit: cover;
                aspect-ratio: 2 / 3;
              }
            }

            & .swiper-button-next,
            & .swiper-button-prev {
              inline-size: 30px;
              block-size: 30px;

              &:after,
              &:after {
                font-size: 16px;
              }
            }

            & .swiper-pagination {
              inline-size: 60px;
              font-size: 14px;
            }

            .autoplay-progress {
              bottom: 18%;
              inline-size: 40px;
              block-size: 40px;

              & svg {
                stroke-width: 2px;
              }
            }
          }

          & .propertyTable {
            flex-direction: column;

            & .priceTable {
              inline-size: 100%;
              border-inline: 1px solid var(--color-dark-gray);

              & th {
                inline-size: 100px;
              }

              & td {
                inline-size: calc(100% - 100px);

                & .price {
                  font-size: 36px;
                }

                & .payment {
                  font-size: 22px;
                }
              }
            }

            & .areaTable {
              inline-size: 100%;
              border-inline: 1px solid var(--color-dark-gray);

              & th,
              & td {
                border-block-end: 1px solid var(--color-dark-gray);
              }

              & th {
                inline-size: 100px;
              }

              & td {
                inline-size: calc(100% - 100px);
              }
            }
          }

          & .recommend {
            margin-block: 60px 0;

            & .recommendList {
              position: relative;
              padding: 20px 10px;

              &::before {
                background: #fff;
                font-size: clamp(1.125rem, 1.043rem + 0.41vw, 1.375rem);
                margin-inline: -38px;
              }
            }
          }

          & .point {
            & .pointList {
              flex-direction: row;
              overflow-x: scroll;
              flex-wrap: nowrap;
              padding-block-end: 15px;

              & .item {
                inline-size: 100%;
                flex-shrink: 0;

                & img {
                  inline-size: 100%;
                  block-size: 200px;
                  object-fit: cover;
                  aspect-ratio: 2 / 3;
                }

                & .title {
                  & .circle {
                    inline-size: 55px;
                    block-size: 55px;
                    font-size: 12px;

                    & .num {
                      font-size: 22px;
                    }
                  }

                  & .htxt {
                    font-size: 16px;
                    line-height: 1.5;
                  }
                }

                & p {
                  font-size: 14px;
                }
              }
            }
          }

          & .feature {
            margin-block: 60px 0;

            & p {
              text-align: left;
            }

            & .featureList {
              display: grid;
              grid-template-columns: repeat(2, 1fr);
              gap: 30px;
            }
          }

          & .planOverview {
            & .planList {
              flex-direction: row;
              overflow-x: scroll;
              justify-content: flex-start;
              padding-block-end: 15px;

              & .item {
                inline-size: 100%;
                flex-shrink: 0;
              }
            }
          }

          & .living {
            inline-size: 100%;
            margin-block: 60px 0;

            & ul {
              flex-direction: column;
              gap: 30px;

              & li {
                inline-size: 100%;

                & a {
                  position: relative;
                  cursor: pointer;

                  &::before {
                    content: "";
                    position: absolute;
                    inset: -5px;
                  }

                  & .item {
                    & img {
                      max-inline-size: 100%;
                      inline-size: 75px;
                    }

                    & p {
                      inline-size: calc(100% - 75px);
                      font-size: 18px;
                    }
                  }
                }
              }
            }
          }

          & .faq {
            margin-block: 60px 0;
            padding: 0;
          }

          & .booking {
            margin-block: 30px 0;

            & .bookingTable {
              padding: 10px;

              & .bookingWrap {
                grid-template-columns: repeat(1, 1fr);
                padding: 10px;
                gap: 10px 0;

                & .bookingItem {
                  inline-size: 100%;
                }
              }
            }
          }

          & .conversion {
            margin-block: 30px 0;
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 15px;

            & .reserve a {
              position: relative;
              color: var(--color-white);
              background: var(--color-orange);
              font-weight: bold;
              display: flex;
              justify-content: space-around;
              align-items: center;
              padding: 10px;
              text-decoration: none;
              transition: 0.3s ease-in-out;
              inline-size: 100%;

              &:hover {
                opacity: 0.8;
              }

              &::before {
                content: "";
                position: absolute;
                top: 50%;
                left: 5%;
                transform: translate(-5%, -50%);
                display: inline-block;
                inline-size: 30px;
                block-size: 30px;
                background: url(../img/estate/detail_reserve_icon.webp) center / contain no-repeat;
              }

              &:after {
                content: "";
                position: absolute;
                top: 50%;
                right: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                transition: right 0.3s;
                width: 10px;
                height: 10px;
                border-top: solid 2px currentColor;
                border-right: solid 2px currentColor;
                transform: translateY(-50%) rotate(45deg);
              }
            }

            & .document a {
              position: relative;
              color: var(--color-white);
              background: var(--color-green);
              font-weight: bold;
              display: flex;
              justify-content: space-around;
              align-items: center;
              padding: 10px 50px;
              text-decoration: none;
              transition: 0.3s ease-in-out;
              inline-size: 100%;

              &:hover {
                opacity: 0.8;
              }

              &::before {
                content: "";
                position: absolute;
                top: 50%;
                left: 5%;
                transform: translate(-5%, -50%);
                display: inline-block;
                inline-size: 30px;
                block-size: 30px;
                background: url(../img/estate/detail_document_icon.webp) center / contain no-repeat;
              }

              &:after {
                content: "";
                position: absolute;
                top: 50%;
                right: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                transition: right 0.3s;
                width: 10px;
                height: 10px;
                border-top: solid 2px currentColor;
                border-right: solid 2px currentColor;
                transform: translateY(-50%) rotate(45deg);
              }
            }
          }
        }
      }

      & .subdivision {
        inline-size: 100%;
        margin-block: 60px 0;

        & h3 {
          position: relative;
          font-size: clamp(1.125rem, 1.043rem + 0.41vw, 1.375rem);
          text-align: center;
          font-weight: bold;

          &:before {
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translate(-50%, 10px);
            inline-size: 60px;
            block-size: 5px;
            content: "";
            background: var(--color-navy);
          }
        }

        & .subdivisionList {
          flex-direction: row;
          overflow-x: scroll;
          flex-wrap: nowrap;

          & li {
            inline-size: 80%;
            flex-shrink: 0;

            & .listImg {
              inline-size: 100%;

              & img {
                max-inline-size: 100%;
              }
            }

            & .listBody {
              padding: 15px 5px;

              & .titleTxt {
                font-weight: 600;
              }

              & table {
                inline-size: 100%;

                & th {
                  inline-size: 65px;
                  block-size: 50px;
                  color: var(--color-white);
                  background: var(--color-base);
                  border-block-end: solid 1px var(--color-white);
                  font-size: 13px;
                  text-align: center;
                  vertical-align: middle;
                }

                & td {
                  inline-size: calc(100% - 65px);
                  font-size: 13px;
                  background: var(--color-gray);
                  border-block-end: solid 1px var(--color-white);
                  vertical-align: middle;
                  padding: 0 10px;

                  & .priceTxt {
                    font-size: 26px;
                    color: var(--color-red);
                  }
                }
              }
            }
          }
        }
      }

      & aside {
        position: sticky;
        top: 110px;
        inline-size: 100%;
        block-size: auto;
        border: solid 1px var(--color-dark-gray);
        z-index: 10;

        & .inner {
          padding: 15px;
        }

        & h4 {
          font-size: 18px;
          font-weight: 600;
          color: var(--color-white);
          background: var(--color-navy);
          text-align: center;
          padding-block: 10px;
        }

        & .secStoreInfo {
          inline-size: 100%;

          & tr {
            border-block-start: solid 1px var(--color-dark-gray);

            &:last-of-type {
              border-block-end: solid 1px var(--color-dark-gray);
            }
          }

          & th {
            background: var(--color-gray);
            inline-size: 80px;
            padding: 5px;
            text-align: center;
            font-size: 13px;
          }

          & td {
            inline-size: calc(100% - 80px);
            padding: 5px;
            font-size: 13px;

            & h5 {
              font-size: 16px;
              font-weight: 600;
            }
          }
        }

        & .secSpGoogleMap {
          display: block;
          inline-size: 100%;
          margin-block: 30px;

          & iframe {
            inline-size: 100%;
            block-size: 375px;
            aspect-ratio: 16 / 9;
          }
        }

        & .secConversion {
          display: none;
        }

        & .secPcBnr {
          display: none;
        }
      }
    }
  }
}

/* =======================================================
/* tableColor
======================================================= */
.twoSlot {
  color: #00a118;
  background: #ceffd5;
}

.oneSlot {
  color: #bf9600;
  background: #fffce5;
}

.fullyBooked {
  color: #888888;
  background: var(--color-gray);
}

/* ==============================================
/* secModalContent
============================================== */
.secModalContent.remodal {
  position: relative;
  max-inline-size: 1080px;
  block-size: auto;
  padding: 30px;
  background: var(--color-white);
}

@media screen and (width <= 768px) {
  .secModalContent.remodal {
    max-inline-size: 95%;
    block-size: auto;
    padding: 10px;
  }
}

/* ==============================================
/* loanTitle
============================================== */
.loanTitle {
  font-size: 18px;
  color: var(--color-white);
  background: var(--color-base);
  padding: 15px;
  margin-block: 100px 50px;

  &:first-of-type {
    margin-block: 0 50px;
  }
}

@media screen and (width <= 768px) {
  .loanTitle {
    padding: 5px;
    margin-block: 50px 25px;

    &:first-of-type {
      margin-block: 0 25px;
    }
  }
}

/* ==============================================
/* environmentTitle
============================================== */
.environmentTitle {
  font-size: 18px;
  color: var(--color-white);
  background: var(--color-base);
  padding: 15px;
  margin-block: 100px 50px;

  &:first-of-type {
    margin-block: 0 50px;
  }
}

@media screen and (width <= 768px) {
  .environmentTitle {
    padding: 5px;
    margin-block: 50px 25px;

    &:first-of-type {
      margin-block: 0 25px;
    }
  }
}

/* ==============================================
/* summaryTitle
============================================== */
.summaryTitle {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-white);
  background: var(--color-base);
  padding: 15px;
  margin-block: 100px 50px;

  &:first-of-type {
    margin-block: 0 50px;
  }
}

@media screen and (width <= 768px) {
  .summaryTitle {
    padding: 5px;
    margin-block: 50px 25px;

    &:first-of-type {
      margin-block: 0 25px;
    }
  }
}

/* ==============================================
/* environmentList
============================================== */
.environmentList {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 50px;

  & li {
    inline-size: calc(100% / 3 - 34px);

    & img {
      max-inline-size: 100%;
    }

    & dl dt {
      text-align: left;
      font-size: 18px;
      font-weight: 600;
      margin-block: 10px;
    }

    & dl dd {
      text-align: left;
      font-size: 14px;
    }
  }
}

@media screen and (width <= 768px) {
  .environmentList {
    flex-direction: row;
    overflow-x: scroll;
    flex-wrap: nowrap;
    gap: 20px;
    padding-block-end: 15px;

    & li {
      inline-size: 80%;
      flex-shrink: 0;

      & img {
        max-inline-size: 100%;
      }

      & dl dt {
        text-align: left;
        font-size: 18px;
        font-weight: 600;
        margin-block: 10px;
      }

      & dl dd {
        text-align: left;
        font-size: 12px;
      }
    }
  }
}

/* ==============================================
/* remodal
============================================== */
.remodal {
  padding: 15px !important;

  & .txtCenter {
    font-size: 13px;
    text-align: left;
  }
}

/* ==============================================
/* Modal Close
============================================== */
.remodal-cancel {
  margin-block-start: 50px !important;
  inline-size: 300px;
  background: var(--color-base) !important;
}

@media screen and (width <= 768px) {
  .remodal-cancel {
    margin-block-start: 30px !important;
    inline-size: 100%;
  }
}

/* =================================================
/* facilitiesTab
================================================= */
.facilitiesTab {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  cursor: pointer;

  & .tab {
    color: var(--color-white);
    background-color: var(--color-base);
    border: 1px solid var(--color-white);
    border-right: none;
    padding: 10px;
    font-weight: bold;

    &.is-active {
      color: var(--color-white);
      background: var(--color-theme);
    }
  }
}

@media screen and (width <=768px) {
  .facilitiesTab {
    grid-template-columns: repeat(3, 1fr);

    & .tab {
      display: grid;
      place-items: center;
      grid-template-rows: 50px;
      padding: 0 10px;
      font-size: 12px;
    }
  }
}

/* =================================================
/* content
================================================= */
.content {
  display: none;

  &.is-show {
    display: block;
  }
}

/* =================================================
/* facilitiesList
================================================= */
.facilitiesList {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 30px;
  padding: 30px 15px;
  background: var(--color-gray);

  & li {
    inline-size: calc(100% / 3 - 20px);
    text-align: left;

    & img {
      max-inline-size: 100%;
    }

    & .name {
      font-size: 17px;
      font-weight: bold;
      margin-block: 15px;
    }

    & p {
      font-size: 12px;
    }

    & .annotation {
      font-size: 12px;
    }
  }
}

@media screen and (width <= 768px) {
  .facilitiesList {
    flex-direction: row;
    overflow-x: scroll;
    flex-wrap: nowrap;

    & li {
      inline-size: 100%;
      flex-shrink: 0;

      & img {
        max-inline-size: 100%;
      }

      .name {
        font-size: 18px;
        font-weight: bold;
        margin-block: 15px;
      }

      .annotation {
        font-size: 12px;
      }
    }
  }
}

/* =================================================
/* BELS
================================================= */
.bels {
  margin-block-start: 30px;

  & img {
    max-inline-size: 70%;
  }
}

/* ==============================================
/* tableList
============================================== */
.tableList {
  inline-size: 100%;

  & .boxTable {
    display: flex;
    flex-wrap: wrap;

    & .tableItem {
      inline-size: 50%;
      border-block-end: solid 1px var(--color-white);
      display: flex;

      &:last-of-type {
        border-bottom: none;
      }

      & .tableTit {
        inline-size: 150px;
        padding: 10px;
        font-size: 14px;
        color: var(--color-white);
        background: var(--color-base);
        display: grid;
        place-items: center;
      }

      & .tableTxt {
        inline-size: calc(100% - 150px);
        background: var(--color-gray);
        padding: 10px;
        min-block-size: 60px;
        font-size: 14px;
        display: grid;
        align-items: center;
        text-align: left;
      }

      & .mapInner {
        display: inline-block;
        color: var(--color-theme);
      }

      & .nmber {
        font-size: 24px;
        color: var(--color-red);
        font-weight: bold;
      }
    }
  }
}

@media screen and (width <= 768px) {
  .tableList {
    margin-block: 0;

    & .tableItem {
      inline-size: 100% !important;
      font-size: 12px !important;

      & .tableTit {
        inline-size: 100px !important;
      }

      & .tableTxt {
        inline-size: calc(100% - 100px) !important;
        min-height: 40px;
      }

      & .nmber {
        font-size: 18px !important;
      }
    }
  }
}

/* ==============================================
/* details
============================================== */
details {
  max-inline-size: 100%;
  border-block-end: solid 1px var(--color-base);
  margin-block: 60px 0;

  & summary {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px 15px 45px;
    color: var(--color-base);
    font-weight: bold;
    cursor: pointer;

    &::before {
      position: absolute;
      left: 15px;
      font-weight: bold;
      font-size: 20px;
      color: var(--color-blue);
      content: "Q";
    }

    &::after {
      content: "";
      transform: translateY(-25%) rotate(45deg);
      inline-size: 10px;
      block-size: 10px;
      margin-left: 10px;
      border-bottom: 3px solid var(--color-base);
      border-right: 3px solid var(--color-base);
      transition: transform 0.5s;
    }
  }

  & p {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 0 30px 15px 45px;
    color: var(--color-base);
    transition: transform 0.5s, opacity 0.5s;

    &::before {
      position: absolute;
      left: 15px;
      font-weight: bold;
      font-size: 20px;
      color: var(--color-red);
      line-height: 1.4;
      content: "A";
    }
  }
}

details[open] summary::after {
  transform: rotate(225deg);
}

details[open] p {
  transform: none;
  opacity: 1;
}

@media screen and (width <= 768px) {
  details {
    inline-size: 100%;
    margin-block: 30px 0;

    & summary {
      position: relative;
      font-size: 15px;

      &::after {
        position: absolute;
        right: 0;
      }
    }
  }
}

/* ==============================================
/* spCvMenu
============================================== */
.spCvMenu {
  display: none;
}

@media screen and (width <= 768px) {
  .spCvMenu {
    display: block;
    position: fixed;
    top: auto;
    bottom: 0;
    inline-size: 100%;
    block-size: 88px;
    z-index: 200;
    transition: 0.3s;

    & ul {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: 45px;
      gap: 1px;
      background-color: var(--color-white);
      border-block-start: 1px solid var(--color-white);

      & li {
        inline-size: 100%;
        display: grid;
        place-items: center;
        font-size: 14px;
        font-weight: bold;
        color: var(--color-white);
        background-color: var(--color-orange);

        &:hover {
          text-decoration: none;
        }

        &:last-of-type {
          background: var(--color-green);
        }
      }
    }

    & .viewerCount {
      color: var(--color-white);
      background: var(--color-base);
      padding: 5px;
      font-size: 13px;

      & p {
        position: relative;
        text-align: center;
        padding-inline-start: 20px;

        &::before {
          position: absolute;
          top: 50%;
          left: 2.5%;
          transform: translate(-2.5%, -50%);
          content: "";
          display: block;
          inline-size: 15px;
          block-size: 15px;
          background: url(../img/estate/multiple_people_icon.png) center center / cover no-repeat;
        }

        & .lato-bold {
          font-size: 18px;
          color: var(--color-orange);
        }
      }
    }
  }
}

/* ==============================================
/* spActive
============================================== */
.spActive {
  display: none;
}

@media screen and (width <= 768px) {
  .spActive {
    display: block;
    font-size: 12px;
    margin-block-start: 5px;
    color: var(--color-red);
    text-align: left;
  }
}

/* =================================================
/* jsAccordion
================================================= */
@media screen and (width <= 768px) {
  .jsAccordion {
    position: relative;
    transition-duration: 0.2s;

    &::before {
      content: "＋";
      position: absolute;
      right: 10px;
      transform: rotate(90deg);
      transition: transform 0.4s;
    }

    &.is-open::before {
      content: "－";
      transform: rotate(180deg);
      transition: transform 0.4s;
    }
  }

  .jsAccordion-details {
    display: none;
  }

  .jsAccordion.is-open .jsAccordion-details {
    display: block;
  }
}

/* =================================================
/* pointBox
================================================= */
.pointBox {
  margin-block-start: 30px;
  border: 1px solid var(--color-dark-gray);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-height: 100px;
  background-color: var(--color-gray);

  & .tit,
  & .txt {
    line-height: 28px;
    min-block-size: 100px;
    block-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  & .tit {
    font-size: 18px;
    text-align: center;
    color: var(--color-base);
    font-weight: bold;
    background-color: var(--color-gray);
    inline-size: 160px;
    letter-spacing: 1px;
  }

  & .txt {
    font-size: 15px;
    inline-size: calc(100% - 160px);
    padding: 10px 20px;
    background-color: var(--color-white);
  }
}

@media screen and (width <= 768px) {
  .pointBox {
    flex-direction: column;
    border: 1px solid var(--color-dark-gray);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: 100px;
    background-color: var(--color-gray);
    margin-top: 20px;

    & .tit,
    & .txt {
      inline-size: 100%;
      line-height: 21px;
      min-block-size: auto;
    }

    & .tit {
      block-size: 40px;
      font-size: 13px;
      letter-spacing: 0;
    }

    & .txt {
      font-size: 12px;
      padding: 15px;
    }
  }
}