@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: #231815;
  --color-white: #ffffff;
  --color-gray: #efefef;
  --color-dark-gray: #d1d5d5;
  --color-navy: #141f3f;
  --color-red: #d63638;
  --color-green: #16b192;
  --color-orange: #f6a822;
  --color-blue: #007aff;
  --color-theme: #00a9c9;
}

/* ==============================================
/* 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;
}

/* ==============================================
/* #secFv
============================================== */
#secFv {
  inline-size: 100%;
  block-size: auto;

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

/* ==============================================
/* #secLead
============================================== */
#secLead {
  inline-size: 100%;
  block-size: auto;
}

/* ==============================================
/* #secPresent
============================================== */
#secPresent {
  inline-size: 100%;
  background: var(--color-theme);
  block-size: auto;
}

/* ==============================================
/* #secMerit
============================================== */
#secMerit {
  inline-size: 100%;
  block-size: auto;
}

/* ==============================================
/* #secProperty
============================================== */
#secProperty {
  inline-size: 100%;
  block-size: auto;
  background: var(--color-dark-gray);
}

/* =================================================
/* areaTab
================================================= */
.areaTab {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  cursor: pointer;
  margin-block: 60px 0;

  & .tab {
    color: var(--color-white);
    background-color: var(--color-navy);
    border-right: none;
    padding: 10px;
    display: grid;
    place-items: center;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    block-size: 140px;
    border-radius: 5px;

    &.is-active {
      color: var(--color-white);
      background: var(--color-theme);
      transition: all ease-out 0.2s 0.1s;
    }
  }
}

@media screen and (width <=768px) {
  .areaTab {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-block: 30px 0;

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

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

  &.is-show {
    display: block;
    transition: all ease-out 0.2s 0.1s;
  }
}

/* ==============================================
/* propertyBox
============================================== */
.propertyBox {
  inline-size: 100%;
  block-size: auto;
  display: flex;
  margin-block: 100px 0;
  box-shadow: 0px 0px 4.75px 0.25px rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  background: var(--color-white);

  & .imgBox {
    inline-size: 50%;

    & .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: 100%;
          object-fit: cover;
          background: var(--color-white);
        }
      }

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

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

      /*  ページネーションの間隔を調整 */
      & .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0 5px;
      }

      & .swiper-pagination-bullet.swiper-pagination-bullet-active .circle-pagination_inner {
        color: var(--color-base);
      }

      & .swiper-pagination-bullet.swiper-pagination-bullet-active.circle-pagination::before {
        animation: circleRight 5s linear forwards;
      }

      & .swiper-pagination-bullet.swiper-pagination-bullet-active.circle-pagination::after {
        animation: circleLeft 5s linear forwards;
      }

      /* 円形のページネーションを作成 */
      & .circle-pagination {
        position: relative;
        inline-size: 40px;
        block-size: 40px;
        z-index: 1;
        background-color: var(--color-base);
        border-radius: 50%;
        text-align: center;
        overflow: hidden;
        margin: auto;
        cursor: pointer;
        font-size: 14px;
        opacity: 1;

        /* 擬似要素でプログレスバー作成 */
        &::before {
          content: "";
          display: block;
          inline-size: 40px;
          block-size: 40px;
          background-color: var(--color-white);
          transform-origin: right 20px;
          position: absolute;
          top: 0;
          left: -20px;
          z-index: 2;
        }

        &::after {
          content: "";
          display: block;
          inline-size: 40px;
          block-size: 40px;
          background-color: var(--color-white);
          transform-origin: left 20px;
          position: absolute;
          top: 0px;
          left: 20px;
          z-index: 3;
        }

        & .circle-pagination_inner {
          display: flex;
          align-items: center;
          justify-content: center;
          inline-size: 35px;
          block-size: 35px;
          background-color: var(--color-white);
          border-radius: 50%;
          color: var(--color-dark-gray);
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 4;
        }
      }
    }
  }

  & .infoBox {
    inline-size: calc(100% - 50%);
    padding: 20px 10px;

    & .infoHeader {
      margin-block-end: 20px;

      & .title {
        font-size: 24px;
        font-weight: bold;
        line-height: 1;
      }

      & .subTitle {
        padding-block-start: 10px;
      }

      & .catch {
        font-size: 18px;
        font-weight: bold;
        padding-block-start: 10px;
      }
    }

    & .infoBody {
      margin-block-end: 20px;

      & .tableList {
        margin-block: 0 20px;

        & .boxTable {
          inline-size: 100%;
          display: flex;
          flex-wrap: wrap;

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

            &:last-child {
              border-block-end: none;
            }

            & .tableTit {
              inline-size: 80px;
              padding: 10px;
              font-size: 13px;
              text-align: center;
              background: var(--color-base);
              color: var(--color-white);
              display: flex;
              align-items: center;
              justify-content: center;
              block-size: 45px;
            }

            & .tableTxt {
              inline-size: calc(100% - 80px);
              background: var(--color-gray);
              padding: 10px;
              block-size: 45px;
              font-size: 13px;
              display: flex;
              align-items: center;

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

      & .drawingBox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 30px;

        & .drawingImgBox {
          position: relative;
          inline-size: calc(100% / 2 - 15px);
          background: var(--color-gray);
          padding: 10px;

          &::after {
            position: absolute;
            bottom: 10px;
            right: 10px;
            content: "";
            display: block;
            inline-size: 40px;
            block-size: 40px;
            background: url(../img/common/zoom_in.svg) 100% 100% / cover no-repeat;
          }

          & img {
            display: block;
            margin: 0 auto;
            max-inline-size: 60%;
            block-size: auto;
          }
        }

        & p {
          text-align: center;
        }
      }
    }

    & .infoFooter {
      margin: 0;

      & .conversion {
        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/common/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/common/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);
          }
        }
      }
    }
  }
}

@media screen and (width <=768px) {
  .propertyBox {
    flex-direction: column;
    margin-block: 50px 0;

    & .imgBox {
      inline-size: 100%;

      & .swiper {
        position: relative;

        /* 円形のページネーションを作成 */
        & .circle-pagination {
          position: relative;
          inline-size: 30px;
          block-size: 30px;
          z-index: 1;
          background-color: var(--color-base);
          border-radius: 50%;
          text-align: center;
          overflow: hidden;
          margin: auto;
          cursor: pointer;
          font-size: 14px;
          opacity: 1;

          /* 擬似要素でプログレスバー作成 */
          &::before {
            content: "";
            display: block;
            inline-size: 30px;
            block-size: 30px;
            background-color: var(--color-white);
            transform-origin: right 15px;
            position: absolute;
            top: 0;
            left: -15px;
          }

          &::after {
            content: "";
            display: block;
            inline-size: 30px;
            block-size: 30px;
            background-color: var(--color-white);
            transform-origin: left 15px;
            position: absolute;
            top: 0px;
            left: 15px;
          }

          & .circle-pagination_inner {
            inline-size: 25px;
            block-size: 25px;
          }
        }
      }
    }

    & .infoBox {
      inline-size: 100%;
      padding: 20px 10px;

      & .infoHeader {
        margin-block-end: 20px;

        & .title {
          font-size: 20px;
          font-weight: bold;
          line-height: 1.5;
        }

        & .subTitle {
          padding-block-start: 10px;
        }

        & .catch {
          font-size: 17px;
        }
      }

      & .infoBody {
        margin-block-end: 20px;

        & .tableList {
          margin-block: 0 20px;

          & .boxTable {
            inline-size: 100%;
            flex-wrap: wrap;

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

      & .drawingBox {
        display: flex;
        align-items: center;
        justify-content: space-between;

        & .drawingImgBox {
          position: relative;

          &::after {
            position: absolute;
            bottom: 5px !important;
            right: 5px !important;
            content: "";
            display: block;
            inline-size: 25px !important;
            block-size: 25px !important;
            background: url(../img/zoom_in.svg) center / cover no-repeat;
          }

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

    & .infoFooter {
      margin: 0;

      & .conversion {
        grid-template-columns: repeat(1, 1fr) !important;
      }
    }
  }
}

@keyframes circleLeft {
  0% {
    transform: rotate(0deg);
    background-color: var(--color-white);
  }

  50% {
    transform: rotate(180deg);
    background-color: var(--color-white);
  }

  50.01% {
    transform: rotate(360deg);
    background-color: var(--color-base);
  }

  100% {
    transform: rotate(360deg);
    background-color: var(--color-base);
  }
}

@keyframes circleRight {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(180deg);
  }
}

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

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

/* ==============================================
/* #secFlow
============================================== */
#secFlow {
  inline-size: 100%;
  block-size: auto;
  background: var(--color-theme);

  & .display-pc {
    position: relative;

    & img {
      margin-block: 60px 0;
    }
  }

  & .display-sp {
    position: relative;

    & .flowBox {
      inline-size: 100%;
      margin-block: 40px 0;

      & .flowHeader {
        inline-size: auto;
        max-block-size: 40px;
      }

      & .flex {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        margin-block-start: 20px;

        & .txtBox {
          inline-size: 50%;

          & p {
            margin: 0;
          }
        }

        & .imgBox {
          inline-size: calc(100% - 50%);

          & img {
            object-fit: cover;
            margin: 0;
          }
        }
      }

      & p {
        margin-block-start: 20px;
      }

      & img {
        margin-block-start: 20px;
      }
    }
  }
}

/* ==============================================
/* #secBenefit
============================================== */
#secBenefit {
  inline-size: 100%;
  block-size: auto;

  & .benefitList {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 55px 110px;
    margin-block: 60px 0;

    & li {
      inline-size: calc(100% / 2 - 55px);

      & .listHeader {
        block-size: 130px;

        & img {
          inline-size: auto;
          max-block-size: 130px;
          margin: 0;
        }
      }

      & .listBody {
        min-block-size: 120px;
        margin-block-start: 20px;
      }

      & img {
        inline-size: 100%;
        margin-block-start: 20px;
      }
    }
  }
}

@media screen and (width <=768px) {
  #secBenefit {
    position: relative;

    & .benefitList {
      overflow-x: scroll;
      flex-direction: row;
      flex-wrap: nowrap;
      gap: 0 30px;

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

        & .listHeader {
          block-size: 65px;
        }
      }
    }
  }
}