:root {
  --viewport-width: min(100vw, 1600px);
  --b: calc(var(--viewport-width) / 160);
}

#building .commonDivisions__list__item.building {
  display: none;
}
#building .preface__wrapper {
  padding-top: max(12rem, 70px);
  padding-top: max(8rem, 50px);
}
#building .preface__image {
  border-radius: max(0.6rem, 6px);
  overflow: hidden;
  width: 100%;
  min-height: 300px;
  aspect-ratio: 256/93;
  margin-bottom: max(4rem, 30px);
}
@media screen and (max-width: 550px) {
  #building .preface__image {
    min-height: 200px;
  }
}
#building .preface__image img {
  width: 100%;
  height: 100%;
  object-position: 30%;
}
#building .preface h4 {
  font-size: max(2rem, 16px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-bottom: max(1rem, 10px);
}
#building .product {
  margin-top: max(8rem, 50px);
  border-radius: max(4rem, 30px) max(4rem, 30px) 0 0;
  background: #F6F7F5;
  overflow: hidden;
}
#building .product__wrapper {
  padding-top: max(15rem, 70px);
  padding-bottom: max(15rem, 70px);
}
#building .product__title {
  color: #fff;
  font-size: max(3rem, 22px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  display: block;
  width: 100%;
  padding: max(2.5rem, 20px) max(4.5rem, 20px);
  margin-bottom: max(5.5rem, 30px);
  background: linear-gradient(300deg, #30B8D8, #389A60 60%, #3A9447);
  border-radius: max(0.6rem, 6px);
  overflow: hidden;
}
#building .product__content {
  display: grid;
  gap: max(15rem, 70px) max(6rem, 40px);
}
#building .product__content__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: max(10rem, 30px);
}
@media screen and (max-width: 1000px) {
  #building .product__content__inner {
    grid-template-columns: 1fr;
  }
}
#building .product__content__image {
  flex-shrink: 0;
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 623/415;
  border-radius: max(0.6rem, 6px);
  overflow: hidden;
}
#building .product__content__image img {
  width: 100%;
  height: 100%;
}
#building .product__content__image .numberBox {
  position: absolute;
  inset: 0;
}
#building .product__content__image .numberBox span {
  position: absolute;
  display: grid;
  place-items: center;
  width: 7%;
  height: auto;
  aspect-ratio: 1/1;
  background: #fff;
  border: max(0.2rem, 2px) solid #3A9447;
  box-shadow: 2px 2px 0 rgba(58, 148, 71, 0.33);
  overflow: hidden;
  color: #3A9447;
  font-size: max(3rem, 12px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}
@media screen and (max-width: 1000px) {
  #building .product__content__image .numberBox span {
    font-size: max(5rem, 12px);
  }
}
#building .product__content__text__title {
  position: relative;
  width: 100%;
  margin-bottom: max(5rem, 30px);
}
#building .product__content__text__title h4 {
  width: 90%;
  color: #3A9447;
  font-size: max(2rem, 14px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  padding: max(2.5rem, 20px) max(3rem, 25px);
  padding-right: max(5%, 30px);
  border-radius: max(0.6rem, 6px);
  background: #fff;
  overflow: hidden;
}
#building .product__content__text__title .imageBox {
  position: absolute;
  top: 50%;
  right: 2.5%;
  width: max(15%, 80px);
  transform: translateY(-50%);
}
#building .product__content__text__list {
  display: grid;
  gap: max(4rem, 25px);
}
@media screen and (max-width: 1300px) {
  #building .product__content__text__list {
    gap: max(3rem, 15px);
  }
}
#building .product__content__text__list li {
  display: flex;
  align-items: baseline;
  gap: max(2.5rem, 20px);
}
#building .product__content__text__list li .number {
  display: grid;
  place-items: center;
  width: auto;
  height: 120%;
  aspect-ratio: 1/1;
  background: #fff;
  border: max(0.2rem, 2px) solid #3A9447;
  box-shadow: 2px 2px 0 rgba(58, 148, 71, 0.33);
  overflow: hidden;
  color: #3A9447;
  font-size: 100%;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}
#building .product__content__text__list li p {
  font-size: max(2rem, 16px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
#building .product__content__inner.inner1 .product__content__image span:nth-of-type(1) {
  top: 80%;
  left: 10%;
}
#building .product__content__inner.inner1 .product__content__image span:nth-of-type(2) {
  top: 15%;
  left: 20%;
}
#building .product__content__inner.inner1 .product__content__image span:nth-of-type(3) {
  top: 15%;
  left: 70%;
}
#building .product__content__inner.inner1 .product__content__image span:nth-of-type(4) {
  top: 60%;
  left: 70%;
}
#building .product__content__inner.inner2 .product__content__image span:nth-of-type(1) {
  top: 55%;
  left: 60%;
}
#building .product__content__inner.inner2 .product__content__image span:nth-of-type(2) {
  top: 35%;
  left: 20%;
}
#building .product__content__inner.inner2 .product__content__image span:nth-of-type(3) {
  top: 35%;
  left: 40%;
}
#building .product__content__inner.inner2 .product__content__image span:nth-of-type(4) {
  top: 67%;
  left: 8%;
}
#building .product__content__inner.inner3 .product__content__image span:nth-of-type(1) {
  top: 65%;
  left: 45%;
}
#building .product__content__inner.inner3 .product__content__image span:nth-of-type(2) {
  top: 85%;
  left: 55%;
}
#building .product__content__inner.inner3 .product__content__image span:nth-of-type(3) {
  top: 30%;
  left: 20%;
}
#building .product__content__inner.inner3 .product__content__text__title .imageBox {
  right: 0;
  width: max(20%, 100px);
}
#building .product__content__inner.inner4 .product__content__image span:nth-of-type(1) {
  top: 70%;
  left: 50%;
}
#building .product__content__inner.inner4 .product__content__image span:nth-of-type(2) {
  top: 60%;
  left: 15%;
}
#building .product__content__inner.inner4 .product__content__image span:nth-of-type(3) {
  top: 35%;
  left: 65%;
}
#building .product__content__inner.inner4 .product__content__image span:nth-of-type(4) {
  top: 50%;
  left: 85%;
}
#building .product__content__inner.inner4 .product__content__text__title .imageBox {
  width: max(17.5%, 90px);
}
#building .maker {
  background: linear-gradient(to bottom, #F6F7F5 50%, #fff 50%);
}
#building .maker__wrapper {
  padding: max(7.5rem, 40px) max(9rem, 50px);
  background: #3A9447;
  border-radius: max(1rem, 10px);
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  #building .maker__wrapper {
    padding: 50px 10%;
  }
}
#building .maker .section-title .rhombus {
  background: #fff !important;
}
#building .maker .section-title__inner__text {
  color: #fff;
}
#building .maker__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: max(5rem, 30px) max(13rem, 50px);
}
@media screen and (max-width: 1300px) {
  #building .maker__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 1000px) {
  #building .maker__list {
    gap: max(5rem, 30px) max(7rem, 50px);
  }
}
@media screen and (max-width: 768px) {
  #building .maker__list {
    grid-template-columns: 1fr;
  }
}
#building .maker__list .btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
#building .maker__list .btn__text {
  color: #fff;
  font-size: max(1.6rem, 13px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  border-bottom: max(0.1rem, 1px) solid #fff;
}
#building .maker__list .btn__icon {
  width: auto;
  height: 100%;
  object-fit: contain;
  filter: invert(1) brightness(100);
}