@charset "UTF-8";
/* 文字ブロックの上下余白は、Figmaのtext-box-trim（cap〜baseline）に合わせて lhCrop より上0.2em・下0.065em多く詰める */
/* 見出し・本文（design内の3セクション共通）
---------------------------------------- */
.designCopy {
  color: #364055;
}
@media only screen and (max-width: 767px) {
  .designCopy {
    text-align: center;
  }
}
.designCopy--center {
  text-align: center;
}
.designCopy__ttl {
  line-height: calc(1.6);
}
.designCopy__ttl:before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc((1 - 1.6) * 0.5em - 0.2em);
}
.designCopy__ttl:after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc((1 - 1.6) * 0.5em - 0.065em);
}
.designCopy__ttl {
  font-weight: 400;
  letter-spacing: 0.05em;
}
@media only screen and (min-width: 768px) {
  .designCopy__ttl {
    font-size: 32px;
  }
}
@media only screen and (max-width: 767px) {
  .designCopy__ttl {
    font-size: calc(22 / 375 * 100vw);
  }
}
.designCopy__txt {
  line-height: calc(2.6);
}
.designCopy__txt:before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc((1 - 2.6) * 0.5em - 0.2em);
}
.designCopy__txt:after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc((1 - 2.6) * 0.5em - 0.065em);
}
.designCopy__txt {
  /* Webフォント版にpaltが無く、SPで文字幅がFigmaより広くなる。改行位置を保つためSPは本文の左右余白を.wrap(15px)のみにしている */
  font-feature-settings: "palt" 1;
  letter-spacing: 0.05em;
}
@media only screen and (min-width: 768px) {
  .designCopy__txt {
    font-size: 16px;
  }
}
@media only screen and (max-width: 767px) {
  .designCopy__txt {
    font-size: calc(14 / 375 * 100vw);
  }
}
.designCopy__ttl + .designCopy__txt {
  padding-top: 60px;
}
@media only screen and (max-width: 767px) {
  .designCopy__ttl + .designCopy__txt {
    padding-top: calc(80 / 750 * 100vw);
  }
}

/* 導入見出し（共通の .headingUnit。色のみ指定）
---------------------------------------- */
.designIntro .heading,
.designIntro .txt {
  color: #364055;
}

/* 外観・エントランスホール（背景画像つき）
---------------------------------------- */
.design-front {
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 768px) {
  .design-front {
    padding: 80px 0;
  }
}
@media only screen and (max-width: 767px) {
  .design-front {
    padding: calc(160 / 750 * 100vw) 0 0;
  }
}
.design-front:before {
  /* 背景は上端に敷き、下は余白に溶けさせる */
  background: no-repeat center top/100% 100%;
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}
@media only screen and (min-width: 768px) {
  .design-front:before {
    background-image: url("../img/design/pc/bg-01@1.5x.jpg?v=1792056716");
    height: 69.4%;
    opacity: 0.5;
  }
}
@media only screen and (max-width: 767px) {
  .design-front:before {
    background-image: url("../img/design/sp/bg-01.jpg?v=1792056733");
    height: calc(650 / 375 * 100vw);
    opacity: 0.75;
  }
}

.facadeSect {
  display: flex;
}
@media only screen and (min-width: 768px) {
  .facadeSect {
    align-items: center;
    justify-content: space-between;
  }
}
@media only screen and (max-width: 767px) {
  .facadeSect {
    flex-direction: column;
    gap: calc(120 / 750 * 100vw);
  }
}
@media only screen and (min-width: 768px) {
  .facadeSect__txt {
    width: 440px;
  }
}
@media only screen and (min-width: 768px) {
  .facadeSect__photo {
    flex-shrink: 0;
    width: 460px;
  }
}
.facadeSect__photo .photo {
  /* 写真下のキャプション分（余白10px＋文字高9px） */
}
@media only screen and (min-width: 768px) {
  .facadeSect__photo .photo {
    margin-bottom: 19px;
  }
}
@media only screen and (max-width: 767px) {
  .facadeSect__photo .photo {
    margin-bottom: calc(38 / 750 * 100vw);
  }
}
.facadeSect__photo .photo__image {
  display: block;
  width: 100%;
}
.facadeSect__photo .cap {
  color: #333333;
  line-height: calc(1.4);
  padding-top: 10px;
}
.facadeSect__photo .cap:before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc((1 - 1.4) * 0.5em - 0.2em);
}
.facadeSect__photo .cap:after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc((1 - 1.4) * 0.5em - 0.065em);
}

.hallSect {
  display: flex;
}
@media only screen and (min-width: 768px) {
  .hallSect {
    align-items: flex-start;
    flex-direction: row-reverse;
    justify-content: space-between;
    margin-top: 120px;
  }
}
@media only screen and (max-width: 767px) {
  .hallSect {
    flex-direction: column;
    gap: calc(120 / 750 * 100vw);
    margin-top: calc(120 / 750 * 100vw);
  }
}
@media only screen and (min-width: 768px) {
  .hallSect__txt {
    width: 340px;
  }
}
@media only screen and (min-width: 768px) {
  .hallSect__photo {
    flex-shrink: 0;
    width: 560px;
  }
}
@media only screen and (max-width: 767px) {
  .hallSect__photo {
    /* .wrapの左右余白を打ち消して画面幅いっぱいに */
    margin: 0 calc(-30 / 750 * 100vw);
  }
}
.hallSect__photo .photo__image {
  display: block;
  width: 100%;
}

/* 光壁（グラデーション背景）
---------------------------------------- */
.design-lightwall {
  background-color: #ebf0f3;
}
@media only screen and (min-width: 768px) {
  .design-lightwall {
    background-image: linear-gradient(180deg, #ffffff 0%, #ebf0f3 8.173%);
    padding: 120px 0;
  }
}
@media only screen and (max-width: 767px) {
  .design-lightwall {
    background-image: linear-gradient(180deg, #ffffff 0%, #ebf0f3 12.981%);
    margin-top: calc(120 / 750 * 100vw);
    padding: calc(160 / 750 * 100vw) 0;
  }
}

@media only screen and (min-width: 768px) {
  .lightwallSect__head .designCopy__txt {
    margin-left: auto;
    margin-right: auto;
    width: 760px;
  }
}
@media only screen and (min-width: 768px) {
  .lightwallSect__cont {
    margin-top: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .lightwallSect__cont {
    margin-top: calc(120 / 750 * 100vw);
  }
}
.lightwallSect__cont .photo__image {
  display: block;
  width: 100%;
}