@charset "UTF-8";

/* intro
---------------------------------------------- */
.intro {
  padding-block: clamp(60px, 2.99rem + 3.24vw, 110px) clamp(50px, -0.06rem + 13.59vw, 260px);
  position: relative;
  z-index: 0;
}

.introBox {
  margin-top: 80px;
}

.introContents {
  width: calc(780 / 1440 * 100%);
}

.facade__inner {
  margin-top: 50px;
}

.facade__right {
  display: none;
}

/* designer */
.designer {
  margin-top: 70px;
}

.designerBox {
  gap: 15px calc(40 / 780 * 100%);
  margin-top: 35px;
}

.designerBoxHead {
  width: calc(260 / 780 * 100%);
}

.designerBoxBody {
  flex: 1;
  max-width: 420px;
}

.profile__company {
  font-size: clamp(22px, 0.96rem + 0.87vw, 32px);
  font-weight: 700;
  letter-spacing: 0.1em;
}
.profile__company .small {
  display: block;
  font-size: clamp(10px, 0.46rem + 0.35vw, 14px);
  letter-spacing: 0.1em;
  line-height: 1.3;
  margin-bottom: 1.5em;
}

.profile__name {
  font-size: clamp(14px, 0.62rem + 0.52vw, 20px);
  letter-spacing: 0.1em;
  margin-top: 1em;
}
.profile__name .small {
  display: block;
  font-size: calc(14 / 20 * 100%);
  margin-bottom: 1em;
}
.profile__name .em {
  font-size: calc(28 / 20 * 100%);
}
.profile__name .en {
  display: block;
  font-size: clamp(10px, 0.54rem + 0.17vw, 12px);
  margin-top: 1em;
}

.profile__text {
  margin-top: 1.5em;
}

.designerArchive {
  max-width: 720px;
  margin-top: 50px;
}

.designerArchiveList > li {
  width: calc(220 / 720 * 100%);
}
.designerArchive__name {
  color: #fff;
  margin-top: 1em;
  text-align: center;
}

.perspectiveImg {
  width: calc(1100 / 1920 * 100%);
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
}

@media screen and (max-width: 1000px) {
  .introContents {
    width: 100%;
  }

  .facade__inner {
    /* display: flex; */
    /* align-items: flex-end; */
    /* justify-content: space-between; */
    position: relative;
    z-index: 0;
  }
  .facade__left {
    width: 100%;
    margin-top: 30px;
    /* padding-bottom: calc(50 / 320 * 100%); */
  }
  .facade__right {
    display: block;
    width: min(calc(260 / 375 * 100vw), 380px);
    margin-inline: 0 auto;
    /* position: absolute;
    bottom: 0;
    right: calc(50% - 50vw);
    z-index: 0; */
  }

  .designerBoxBody,
  .designerArchive {
    max-width: revert;
  }

  .perspectiveImg {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .introBox {
    margin-top: 30px;
  }

  .facade__inner {
    margin-top: 25px;
  }

  .designer__copy {
    font-size: 15px;
    text-align: center;
  }
  .designerBox {
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
  }
  .designerBoxHead {
    width: calc(120 / 300 * 100%);
    margin-inline: auto;
  }
  .profile__company .small {
    margin-bottom: .5em;
  }

  .designerArchive {
    width: 100%;
    margin-top: 25px;
    margin-inline: auto;
  }
  .designerArchiveList {
    /* flex-direction: column; */
    justify-content: center;
    align-items: center;
    gap: 25px calc(10 / 300 * 100%);
  }
  .designerArchiveList > li {
    width: calc(145 / 300 * 100%);
  }
  .designerArchive__name {
    font-size: 12px;
  }
}

/* material
---------------------------------------------- */
.materialHead {
  padding-top: 160px;
  position: relative;
  z-index: 0;
}

.materialHeadContents {
  width: calc(620 / 1440 * 100%);
}
.materialHead__text {
  margin-top: 2em;
}

.materialFigure {
  width: min(calc(1080 / 1920 * 100%), 1080px);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.materialFigure .p-caption {
  bottom: 20%;
}

.landplan {
  margin-top: clamp(50px, 0.55rem + 11vw, 220px);
  padding-block: 100px;
}
.landplanBox {
  width: calc(1560 / 1800 * 100%);
  margin-inline: auto;
}

.landplanBoxHead {
  width: calc(580 / 1560 * 100%);
  position: relative;
  z-index: 1;
}
.landplanBox__text {
  margin-top: 2.5em;
}

.landplanBox__img {
  max-width: 1560px;
  margin-top: max(-22%, -290px);
  margin-inline: auto;
}
.landplanBox__img img {
  mix-blend-mode: multiply;
}

/* plant */
.plant {
  margin-top: 150px;
}

.plant__title {
  font-size: clamp(18px, 0.46rem + 1.39vw, 34px);
  letter-spacing: 0.1em;
}

.plantBox {
  margin-top: 30px;
}

.plantList {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px min(calc(35 / 1440 * 100%), 35px);
}
.plantList__name {
  margin-top: 1em;
  text-align: center;
}

/* green */
.green {
  margin-top: clamp(60px, 2.08rem + 7.12vw, 170px);
  padding-bottom: clamp(60px, 2.81rem + 3.91vw, 120px);
}
.greenBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 40px calc(65 / 1680 * 100%);
}

.greenBoxBody {
  padding-right: 30px;
}
.greenBoxContents {
  max-width: 580px;
}
.greenBox__text {
  margin-top: 3em;
}

.greenBox__img {
  width: calc(411 / 1680 * 100%);
}

/* light */
.light {
  margin-top: clamp(60px, 2.08rem + 7.12vw, 170px);
  padding-bottom: clamp(60px, 2.81rem + 3.91vw, 120px);
}
.lightBox {
  display: flex;
  align-items: center;
  gap: 40px calc(80 / 1680 * 100%);
}

.lightBox__img {
  width: calc(900 / 1680 * 100%);
}

.lightBoxBody {
  flex: 1;
  padding-right: 30px;
}
.lightBoxContents {
  max-width: 580px;
}
.lightBox__text {
  margin-top: 3em;
}

@media screen and (max-width: 1000px) {
  .plantList {
    grid-template-columns: repeat(2, 1fr);
    column-gap: calc(10 / 320 * 100%);
    max-width: 480px;
    margin-inline: auto;
  }
  .plantList > li:last-child {
    grid-column: 1/3;
    width: calc(145 / 300 * 100%);
    margin-inline: auto;
  }
}

@media screen and (max-width: 768px) {
  .materialHead {
    padding-top: 190px;
  }
  .materialHeadContents {
    width: 100%;
  }
  .materialFigure {
    width: min(calc(280 / 375 * 100vw), 280px);
  }

  .landplan {
    margin-top: 30px;
    padding-block: 30px 0;
  }
  .landplanBox {
    width: 100%;
  }
  .landplanBoxHead {
    width: calc(300 / 350 * 100%);
    margin-inline: auto;
  }
  .landplanBox__img {
    margin-top: 20px;
  }

  .plant {
    margin-top: 50px;
  }
  .plantBox {
    /* width: calc(1800 / 1920 * 100%); */
    margin-top: 25px;
    margin-left: auto;
  }

  .greenBox {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
  .greenBox__img {
    width: calc(225 / 300 * 100%);
  }
  /* .greenBoxBody {
    flex: revert;
    padding-inline: calc(25 / 350 * 100%);
  } */

  .lightBox {
    flex-direction: column;
  }
  .lightBox__img {
    width: 100%;
  }
  .lightBoxBody {
    flex: revert;
    padding-inline: calc(25 / 350 * 100%);
  }
}

/* interior
---------------------------------------------- */
.interiorBox {
  column-gap: calc(80 / 1440 * 100%);
  padding-block: clamp(60px, 2.81rem + 3.91vw, 120px);
}

.interiorBoxHead {
  flex: 1;
}
.interiorBox__text {
  margin-top: 3em;
}

.interiorBoxBody {
  width: calc(840 / 1440 * 100%);
}

@media screen and (max-width: 768px) {
  .interior {
    overflow: hidden;
  }
  .interiorBox__text .photo {
    float: right;
    width: calc(180 / 300 * 100%);
    margin-inline: 20px calc(50% - 50vw);
  }
}

/* view
---------------------------------------------- */
.view {
  padding-bottom: clamp(60px, 2.81rem + 3.91vw, 120px);
}
.viewBox {
  flex-wrap: nowrap;
  gap: 20px calc(70 / 1440 * 100%);
  padding-block: clamp(80px, 2.88rem + 9.06vw, 220px);
}

.viewBoxHead {
  width: calc(1020 / 1440 * 100%);
}
.viewBox__copy {
  color: #7a6a56;
  white-space: nowrap;
  margin-block: auto;
  margin-bottom: 80px;
}

.viewBoxBody {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .viewBox {
    flex-direction: column-reverse;
    align-items: flex-start;
    width: calc(1800 / 1920 * 100%);
    padding-right: 0;
  }

  .viewBoxHead {
    width: 100%;
  }

  .viewBoxBody {
    flex: revert;
    width: calc(320 / 350 * 100%);
  }
  .viewBox__copy {
    font-size: 14px;
    margin-bottom: 50px;
  }
}