@charset "UTF-8";
/* =============================================================
   design page
============================================================= */

/* FACADE DESIGN
---------------------------------------------- */
.facadeSect {
  position: relative;
}
.facadeSect__bg {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.facadeSect__bg .photo__image {
  display: block;
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .facadeSect__bg {
  }
}
.facadeSect__deco {
  position: absolute;
  top: 6.6%;
  left: 0;
  width: 100%;
  z-index: 1;
}
@media only screen and (max-width: 767px) {
  .facadeSect__deco {
    padding-left: calc(24 / 375 * 100vw);
    top: 5%;
  }
  /* SPは左揃え（decorationTtl既定のcenterを上書き） */
  .facadeSect__deco .decorationTtl {
    text-align: left;
    line-height: 1.2;
  }
}
.facadeSect__txt {
  position: absolute;
  z-index: 1;
}
@media only screen and (min-width: 768px) {
  .facadeSect__txt {
    top: 17%;
    left: 8.33%;
    width: 26.2%;
  }
}
@media only screen and (max-width: 767px) {
  .facadeSect__txt {
    top: 16%;
    left: calc(24 / 375 * 100vw);
    width: calc(276 / 375 * 100vw);
  }
}
.facadeSect__txt .headingLv2 {
  text-align: left;
}
@media only screen and (min-width: 768px) {
  .facadeSect__txt .headingLv2 + .txt {
    margin-top: 40px;
    text-align: left;
  }
  /* FigmaのFACADE本文は行間が広め（leading 2.6相当）。自然折返しに合わせ2.4で再現 */
  .facadeSect__txt .txt {
    line-height: 2.2;
  }
}
@media only screen and (max-width: 767px) {
  .facadeSect__txt .headingLv2 {
    margin-top: calc(24 / 375 * 100vw);
    line-height: 1.6;
  }
  .facadeSect__txt .headingLv2 + .txt {
    margin-top: calc(24 / 375 * 100vw);
    line-height: 2.4;

  }
}

/* ENTRANCE
---------------------------------------------- */
@media only screen and (min-width: 768px) {
  .entranceSect {
    margin-top: 160px;
  }
}
@media only screen and (max-width: 767px) {
  .entranceSect {
    margin-top: calc(96 / 375 * 100vw);
  }
}
.entranceSect__head {
  position: relative;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .entranceSect__head {
    padding: 80px 0;
  }
}
@media only screen and (max-width: 767px) {
  .entranceSect__head {
    padding: calc(56 / 375 * 100vw) 0;
  }
}
/* ENTRANCE英字は構造（bgLayer > entranceSect__head）を保ったまま、absoluteでレンガ背景の
   上（白地）へ浮かせる。Figmaでは img-bg がタイトルの下端から始まり、タイトル自体は白地に載る。 */
.entranceSect__deco {
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 100%;
}
/* Figmaのエントランス背景テクスチャは上部がはっきり見え、下へいくほどフェードアウトする。
   共通の一律opacityではなく、下方向グラデーションのマスクで「上=くっきり／下=消える」を再現する。 */
.entranceSect .bgLayer--texture01:after {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}
@media only screen and (min-width: 768px) {
  .entranceSect__head .headingLv2 + .txt {
    margin-top: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .entranceSect__head .headingLv2 + .txt {
    margin-top: calc(24 / 375 * 100vw);
  }
}
.entranceSect__head .txt {
  margin-left: auto;
  margin-right: auto;
  line-height: 2.4;
}
@media only screen and (min-width: 768px) {
  .entranceSect__head .txt {
    max-width: 700px;
  }
}
.entranceSect__cont {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.entranceSect__cont .photo__image {
  display: block;
  width: 100%;
}