@charset "UTF-8";

.list-page {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto 67px;
}

.list-page li {
  width: 49%;
}

.list-page li a {
  display: block;
  height: 80px;
  border: 1px solid #B1B1B1;
  display: flex;
  justify-content: center;
  flex-direction: column;
  color: #fff;
  justify-content: center;
  align-items: center;
  transition: all 0.4s;
  text-align: center;
}

.list-page li a .txt-en {
  font-size: 22px;
  letter-spacing: 2.2px;
  line-height: 1.2;
  margin: 0 0 2px;
}

.list-page li a .txt-jp {
  font-size: 12px;
}

.list-page li a:hover,
.list-page li a.active {
  border: 1px solid #B1B1B1;
  background: rgba(221, 221, 221, 0.50);
}

.list-page li a.active {
  pointer-events: none;
}

@media screen and (max-width: 768px) {
  .list-page {
    row-gap: 20px;
  }

  .list-page li {
    width: 100%;
  }

  .list-page li a .txt-en {
    font-size: 18px;
  }

}

.container1200 {
  max-width: 1200px;
  margin: 0 auto;
  width: calc(100% - 40px);
}

.mainVisual {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* .anchor-link{padding-top: 30px;} */
.mainVisual__picture img {
  width: 100%;
  height: 100vh;
  object-position: center;
  object-fit: cover;
}

.mainVisual__capIn {
  position: absolute;
  right: 5px;
  bottom: 5px;
  z-index: 2;
}

.mainVisual .title-page {
  color: #ffffff;
  position: absolute;
  bottom: 6.375%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 100%;
  text-align: center;
}

.mainVisual::after {
  content: '';
  width: 100%;
  height: 18.75%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
  left: 0;
  bottom: 0%;
  position: absolute;
}

.wrap-content {
  padding: 120px 0 0;
  color: #ffffff;
}

/*  */
.title02 {
  text-align: center;
}

.list-nav {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 0 80px;
}

.list-nav li {
  width: 24.167%;
}

.list-nav li a {
  display: flex;
  flex-direction: column;
  color: #fff;
  border: 1px solid #525252;
  transition: all 0.4s;
  background: linear-gradient(180deg, #212121 0%, #525252 100%);
  justify-content: center;
  align-items: center;
  height: 80px;
}

.list-nav li a.active,
.list-nav li a:hover {
  border: 1px solid #E6E6E6;
  background: linear-gradient(180deg, #99894D 0%, #DAC783 100%);
}

.list-nav li a.active {
  pointer-events: none;
}

.list-nav li a .txt-en {
  font-size: 20px;
  line-height: 1.2;
  margin: 0 0 2px;
  letter-spacing: 2px;
}

.list-nav li a .txt-jp {
  font-size: 14px;
  letter-spacing: 1.4px;
}

.box-title {
  text-align: center;
  margin: 0 0 47px;
}

.box-title h3 {
  font-size: 40px;
  letter-spacing: 4px;
  line-height: 1.125;
  margin: 0 0 2px;
}

.box-title p {
  font-size: 16px;
  letter-spacing: 1.6px;
  line-height: 1.4375;
}

.ttl-bnr {
  border-top: 1px solid #A3A3A3;
  border-bottom: 1px solid #A3A3A3;
  font-size: 18px;
  line-height: 2.667;
  margin: 0 0 30px;
}

.box {
  margin: 0 0 150px;
}

/* .box-item:not(:last-child) {
  margin: 0 0 60px;
} */

.box-item .inner-item {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
}

.box-item .inner-item .col-left {
  width: 28%;
}

.box-item .inner-item .col-right {
  width: 70%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 42px;
}

.box-powder-room {

  & .box-item .inner-item .col-left {
    width: 28%;
  }

  & .box-item .inner-item .col-middle {
    width: 16.3%;
  }

  & .box-item .inner-item .col-right {
    width: 44%;

    & .item {
      width: 47%;
    }

  }

}

@media screen and (max-width: 768px) {
  .box-powder-room {

    & .box-item .inner-item .col-left {
      width: 100%;
    }

    & .box-item .inner-item .col-middle {
      width: 54.6%;
    }

    & .box-item .inner-item .col-right {
      width: 39.4%;

      & .item {
        width: 100%;
        margin-bottom: 10px;
      }

    }

  }

}


.box-toile {
  & .box-item-wrap {
    display: flex;

    & .box-item-toile {
      flex-basis: 48%;
      padding-right: 40px;
      flex-wrap: wrap;

      & .inner-item .col-left {
        width: 57.8%;
      }

      & .inner-item .col-middle {
        width: 36.4%;
      }

      & .inner-item .col-right {
        width: 100%;
        margin-top: 20px;

        & .item {
          width: 30%;
        }

      }
    }

    & .box-item-other {
      flex-basis: 50%;
      border-left: 1px solid #A3A3A3;
      padding-left: 30px;

      & .inner-item {
        /* flex-direction: column; */
        justify-content: space-between;
        margin-bottom: 30px;

        & .otherTit {
          margin-bottom: 8px;
          border-bottom: 1px solid #A3A3A3;
          font-size: 20px;
          padding-bottom: 8px;
          width: 100%;
        }

        & .otherText {
          font-size: 14px;
          line-height: 1.6;

          & .note {
            font-size: 10px;
            margin-top: 8px;
          }

        }

        & .col-left {
          width: 48%;
        }

        & .col-right {
          width: 48%;

          align-items: stretch;
          align-content: flex-start;
          row-gap: 0;

          & .item {
            width: 100%;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .box-toile {
    & .box-item-wrap {
      flex-direction: column;

      & .box-item-toile {
        flex-basis: 100%;
        padding-right: 0px;

        & .inner-item .col-left {
          width: 100%;
        }

        & .inner-item .col-middle {
          width: 49.8%;
        }

        & .inner-item .col-right {
          flex-direction: column;
          width: 46%;
          margin-top: 0px;


          & .item {
            margin-bottom: 10px;
            width: 100%;
          }


        }
      }

      & .box-item-other {
        flex-basis: 100%;
        border-left: none;
        margin-top: 40px;
        padding-top: 40px;
        border-top: 1px solid #A3A3A3;
        padding-left: 0;

        & .inner-item {
          /* flex-direction: column; */
          /* justify-content: center; */
          /* row-gap: 20px; */
          justify-content: space-between;

          & .col-right {
            & .item {
              width: 100%;
              margin-bottom: 10px;
            }
          }
        }
      }
    }
  }
}





.box-item .inner-item .col-right .item {
  width: 31%;
}



.box-item .inner-item .item p {
  text-align: center;
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.4;
}

.box-other {
  margin: 0 0 80px;
}

.box-other .box-item .inner-item {
  justify-content: flex-start;
  gap: 38px;
}

.box-other .box-item .inner-item .col-left {
  width: 30.5833%;
}

.box-other .box-item .inner-item .col-right {
  width: 30.5833%;
}

.box-other .box-item .inner-item .col-right .item {
  width: 100%;
}

/* kitchen */
@media screen and (max-width: 768px) {
  .wrap-content {
    padding: 60px 0 0;
  }

  .title02 span {
    letter-spacing: -0.5em;
  }

  .box-item:not(:last-child) {
    margin: 0 0 20px;
  }

  .box {
    margin: 0 0 50px;
  }

  .list-nav li {
    width: 49%;
    margin-bottom: 2%;
  }

  .list-nav li a {
    height: 60px;
  }

  .list-nav li a .txt-en {
    font-size: 15px;
  }

  .list-nav li a .txt-jp {
    font-size: 12px;
  }

  .box-title h3 {
    font-size: min(8.5vw, 34px);
  }

  .ttl-bnr {
    font-size: 16px;
  }

  .box-item .inner-item .col-left {
    width: 100%;
    margin-bottom: 30px;
  }

  .box-item .inner-item .col-right {
    width: 100%;
    gap: 0;
    justify-content: space-between;
  }

  .box-item .inner-item .col-right .item {
    width: 48%;
    margin: 0 0 30px;
  }

  .box-item .inner-item .item p {
    font-size: 12px;
  }

  .box-other {
    margin-bottom: 0;
  }

  .box-other .box-item .inner-item {
    justify-content: space-between;
    gap: 0;
  }

  .box-other .box-item .inner-item .col-left {
    width: 48%;
  }

  .box-other .box-item .inner-item .col-right {
    width: 48%;
  }
}

.wrap-content .block {
  padding: 0 0 106px;
}

.bottomArea {
  color: #ffffff;
  font-size: 12px;
  line-height: 1.4;
  position: relative;
  z-index: 1;
  padding: 45px 0;
}


@media screen and (max-width: 768px) {

  .wrap-content .block {
    padding: 0 0 100px;
  }

  .photo img {
    width: 100%;
  }
}

/* ========================= */
/* delux-room */
/* box-bathroom */
.delux-room .box-bathroom .inner-item .col-left {
  width: 60%;
  display: flex;
  justify-content: space-between;
}

.delux-room .box-bathroom .inner-item .col-right {
  width: 38.5%;
}

.delux-room .box-bathroom .inner-item .col-left .item {
  width: 23.4%;
}

.delux-room .box-bathroom .inner-item .col-left .item01 {
  width: 46.84%;
}

.delux-room .box-bathroom .inner-item .col-right .item {
  width: 47.505422%;
}

/* box-powder-room */

.delux-room .box-powder-room .inner-item .col-left {
  width: 53.916667%;
  display: flex;
  justify-content: space-between;
}

.delux-room .box-powder-room .inner-item .col-right {
  width: 43.833333%;
}

.delux-room .box-powder-room .inner-item .col-left .item {
  width: 34.48%;
}

.delux-room .box-powder-room .inner-item .col-left .item01 {
  width: 60%;
}

.delux-room .box-powder-room .inner-item .col-right .item {
  width: 47.528517%;
}



@media screen and (max-width: 768px) {
  .delux-room .box-bathroom .inner-item .col-left {
    width: 100%;
  }

  .delux-room .box-bathroom .inner-item .col-right {
    width: 100%;
  }

  .delux-room .box-bathroom .inner-item .col-right .item {
    width: 48%;
  }

  .delux-room .box-powder-room .inner-item .col-left {
    width: 100%;
  }

  .delux-room .box-powder-room .inner-item .col-right {
    width: 100%;
  }

  .delux-room .box-powder-room .inner-item .col-right .item {
    width: 48%;
  }

}

.box-item-wrap.endBox {
  flex-wrap: wrap;
}

.nijyu-yuka-wrap {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-top: 80px;
}

.nijyu-yuka-img {
  padding: 32px 0 24px 0;
  flex-basis: 54%;
}

.nijyu-yuka {
  background-color: #444;
  color: #fff;
  padding: 24px;
  text-align: left;
  display: flex;
  align-items: center;
  flex-basis: 41%;
  flex-direction: column;
  justify-content: center;

  & p:nth-of-type(1) {
    font-size: 22px;
    margin-bottom: 12px;
  }

  & p:nth-of-type(2) {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 8px;
  }

  & p:nth-of-type(3) {
    font-size: 10px;
    line-height: 1.5;
  }
}

@media screen and (max-width: 768px) {

  .nijyu-yuka-wrap {
    flex-direction: column;
    padding-top: 0;
  }


}