@charset "UTF-8";
/* === designSect（デザインページのセクション。zeh/components/zehSect と同構造のため、修正時は両方を確認すること） === */
@media print, screen and (min-width: 768px) {
  .designSect:not(:first-child) {
    margin-top: 100px;
  }
}

@media screen and (max-width: 768px) {
  .designSect:not(:first-child) {
    margin-top: 70px;
  }
}

@media print, screen and (min-width: 768px) {
  .designSect__head .bandHeading + .heading {
    margin-top: 40px;
  }
}

@media screen and (max-width: 768px) {
  .designSect__head .bandHeading + .heading {
    margin-top: 24px;
  }
}

@media print, screen and (min-width: 768px) {
  .designSect__head .bandHeading + .txt {
    margin-top: 32px;
  }
}

@media screen and (max-width: 768px) {
  .designSect__head .bandHeading + .txt {
    margin-top: 20px;
  }
}

.designSect__head .heading {
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .designSect__head .heading {
    font-size: 36px;
  }
}

@media screen and (max-width: 768px) {
  .designSect__head .heading {
    font-size: 26px;
    line-height: 1;
  }
  .designSect__head .heading:before {
    content: '';
    margin-top: calc((1 - 1) * .5em);
  }
  .designSect__head .heading:after {
    margin-bottom: calc((1 - 1) * .5em);
  }
  .designSect__head .heading:before, .designSect__head .heading:after {
    content: '';
    display: block;
    height: 0;
    width: 0;
  }
}

@media print, screen and (min-width: 768px) {
  .designSect__head .heading + .txt {
    font-size: 24px;
    margin-top: 16px;
  }
}

@media screen and (max-width: 768px) {
  .designSect__head .heading + .txt {
    font-size: 17px;
    letter-spacing: .3px;
    margin-top: 10px;
  }
}

.designSect__head .heading + .txt .pt {
  line-height: 1;
}

@media print, screen and (min-width: 768px) {
  .designSect__head .heading + .txt .pt {
    font-size: 50px;
  }
}

@media screen and (max-width: 768px) {
  .designSect__head .heading + .txt .pt {
    font-size: 36px;
  }
}

.designSect__head .heading__num {
  font-size: 1.35em;
  line-height: 1;
}

.designSect__head .heading__variant {
  display: block;
}

@media screen and (max-width: 768px) {
  .designSect__head .heading__variant {
    margin-top: 32px;
  }
}

.designSect__head .txt {
  letter-spacing: .06em;
  line-height: 1.8;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .designSect__head + .designSect__cont {
    margin-top: 48px;
  }
}

@media screen and (max-width: 768px) {
  .designSect__head + .designSect__cont {
    margin-top: 32px;
  }
}

@media print, screen and (min-width: 768px) {
  .designSect__outframe {
    margin: 0 auto;
    max-width: 1200px;
  }
}

@media screen and (max-width: 768px) {
  .wrap {
    padding: 0 calc(60 / 750 * 100vw);
  }
}

.heading--center {
  text-align: center;
}

@media screen and (max-width: 768px) {
  .txt__nowrap {
    display: inline-block;
    letter-spacing: normal;
    white-space: nowrap;
  }
}

.txt--center {
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .txt--center {
    font-size: 16px;
  }
}

.pt {
  color: #907e5e;
  font-family: "Cinzel", serif;
}

@media print, screen and (min-width: 768px) {
  .pt {
    font-size: 50px;
  }
}

@media screen and (max-width: 768px) {
  .pt {
    font-size: 40px;
  }
}

.bandHeading__pt {
  font-size: 1.5em;
  line-height: 1;
}

.bandHeading__note {
  display: inline-block;
  font-family: "YakuHanMP", "Shippori Mincho B1", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  letter-spacing: normal;
  line-height: 1;
  position: relative;
}

@media print, screen and (min-width: 768px) {
  .bandHeading__note {
    font-size: 13px;
    top: -12px;
  }
}

@media screen and (max-width: 768px) {
  .bandHeading__note {
    font-size: calc(20 / 750 * 100vw);
    top: -5px;
  }
}

@media screen and (max-width: 768px) {
  .designSect__cont .touchFigure {
    margin: 0 calc(-60 / 750 * 100vw);
    width: 100vw;
  }
}

@media screen and (max-width: 768px) {
  .designSect__cont .touchFigure--swipe {
    height: 26.7vh;
  }
}

@media print, screen and (min-width: 768px) {
  .design-facade {
    padding-top: 120px;
  }
}

@media screen and (max-width: 768px) {
  .design-facade {
    padding-top: 70px;
  }
}

@media print, screen and (min-width: 768px) {
  .design-entrance {
    margin-top: 120px;
    padding-bottom: 120px;
  }
}

@media screen and (max-width: 768px) {
  .design-entrance {
    margin-top: 70px;
    padding-bottom: 70px;
  }
}