.introSect {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .introSect {
    width: 120rem;
  }
}
@media screen and (max-width: 767px) {
  .introSect {
    padding: 0 3.2rem;
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .introSect__cont {
    align-items: flex-start;
    display: flex;
    gap: 4.8rem;
  }
}
@media screen and (min-width: 768px) {
  .introSect__head + .introSect__cont {
    margin-top: 8rem;
  }
}
@media screen and (max-width: 767px) {
  .introSect__head + .introSect__cont {
    margin-top: 6.4rem;
  }
}
@media screen and (min-width: 768px) {
  .introSect__headingArea {
    flex: 1;
    left: 0;
    padding-bottom: 8rem;
    position: sticky;
    top: 12rem;
  }
}
@media screen and (max-width: 767px) {
  .introSect__headingArea .headingUnit .heading {
    text-align: center;
  }
}
.introSect__facade {
  padding-bottom: 2rem;
  -webkit-mask-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 25%, rgb(255, 255, 255) 33%, rgb(255, 255, 255) 66%, rgba(255, 255, 255, 0) 75%);
          mask-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 25%, rgb(255, 255, 255) 33%, rgb(255, 255, 255) 66%, rgba(255, 255, 255, 0) 75%);
  -webkit-mask-position: 100% 100%;
          mask-position: 100% 100%;
  -webkit-mask-size: 100% 400%;
          mask-size: 100% 400%;
}
@media screen and (min-width: 768px) {
  .introSect__facade {
    width: 68rem;
  }
}
@media screen and (max-width: 767px) {
  .introSect__facade {
    margin: 8rem -3.2rem 0;
  }
}
@media screen and (max-width: 767px) {
  .introSect__facade .photo__caption--capOut {
    padding-right: 1rem;
  }
}
.introSect__facade.sai-animate {
  -webkit-mask-position: 100% 50%;
          mask-position: 100% 50%;
  transition: 4s cubic-bezier(0.43, 0.02, 0.05, 1) 0s !important;
}

.architectSect {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .architectSect {
    width: 115.2rem;
  }
}
@media screen and (max-width: 767px) {
  .architectSect {
    padding: 0 3.2rem;
  }
}
.architectSect__cont {
  display: flex;
  gap: 8rem;
}
@media screen and (min-width: 768px) {
  .architectSect__cont {
    justify-content: center;
  }
}
@media screen and (max-width: 767px) {
  .architectSect__cont {
    flex-direction: column;
  }
}
.architectSect__head + .architectSect__cont {
  margin-top: 8rem;
}
@media screen and (min-width: 768px) {
  .architectSect__material {
    width: 57.6rem;
  }
}
@media screen and (max-width: 767px) {
  .architectSect__material {
    margin-left: -3.2rem;
    margin-right: -3.2rem;
  }
}
@media screen and (max-width: 767px) {
  .architectSect__material .photo .capOut {
    padding-right: 0.5rem;
  }
}

@media screen and (min-width: 768px) {
  .facilitySect__cont .usableList__inner {
    gap: 4.8rem;
  }
}
@media screen and (max-width: 767px) {
  .facilitySect__cont .usableList__inner {
    gap: 5.6rem 2.2rem;
  }
}
@media screen and (min-width: 768px) {
  .facilitySect__cont .usableList__item {
    width: calc((100% - 14.4rem) / 4);
  }
}
@media screen and (max-width: 767px) {
  .facilitySect__cont .usableList__item {
    width: calc(50% - 1.1rem);
  }
}
.facilitySect__head + .facilitySect__cont {
  margin-top: 8rem;
}

.designerCard {
  display: flex;
}
@media screen and (min-width: 768px) {
  .designerCard {
    gap: 3.2rem;
  }
}
@media screen and (max-width: 767px) {
  .designerCard {
    gap: 2.4rem;
  }
}
.designerCard__head {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
@media screen and (min-width: 768px) {
  .designerCard__head {
    width: 20rem;
  }
}
@media screen and (max-width: 767px) {
  .designerCard__head {
    flex: 1;
  }
}
.designerCard__name {
  letter-spacing: 0.1em;
  line-height: 1.6;
  text-align: center;
  text-box: trim-both text;
}
@media screen and (min-width: 768px) {
  .designerCard__name {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 767px) {
  .designerCard__name {
    font-size: 2rem;
  }
}
.designerCard__company {
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  line-height: 1.6;
  text-align: center;
  text-box: trim-both text;
}
@media screen and (min-width: 768px) {
  .designerCard__body {
    width: 26.4rem;
  }
}
@media screen and (max-width: 767px) {
  .designerCard__body {
    width: 15.2rem;
  }
}

@media screen and (min-width: 768px) {
  .residence-introduction {
    padding: 10rem 0;
  }
}
@media screen and (max-width: 767px) {
  .residence-introduction {
    padding: 10rem 0 8rem;
  }
}

@media screen and (min-width: 768px) {
  .residence-architect {
    padding: 10rem 0;
  }
}
@media screen and (max-width: 767px) {
  .residence-architect {
    padding: 8rem 0;
  }
}

@media screen and (min-width: 768px) {
  .residence-facilities {
    padding: 10rem 0;
  }
}
@media screen and (max-width: 767px) {
  .residence-facilities {
    padding: 8rem 0;
  }
}
/*# sourceMappingURL=style.css.map */