@charset "UTF-8";
/* === attempt（取り組み：帯下の図版＋設備カード群のラッパー。宿河原2準拠） === */
@media screen and (max-width: 768px) {
  .attempt {
    width: 100%;
  }
}

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

@media screen and (max-width: 768px) {
  .attempt__head .touchFigure__inner {
    padding-top: 40px;
  }
}

@media print, screen and (min-width: 768px) {
  .attempt__head + .attempt__cont {
    margin-top: 80px;
  }
}

@media screen and (max-width: 768px) {
  .attempt__head + .attempt__cont {
    margin-top: 60px;
  }
}

/* === zehCard（取り組み内の設備カード。宿河原2準拠・番号付き見出し） === */
.zehCard {
  counter-increment: cardOrder;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  /* SPで2枚横並び。狭い画面（約352px未満）でも1列に崩れないよう、親幅の半分を上限にする */
}

.zehCard__head {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.zehCard__ttl {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #1a5072;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  line-height: 1;
  position: relative;
}

@media print, screen and (min-width: 768px) {
  .zehCard__ttl {
    font-size: 18px;
    padding-bottom: 10px;
  }
}

@media screen and (max-width: 768px) {
  .zehCard__ttl {
    font-size: 14px;
    padding-bottom: 10px;
  }
}

.zehCard__ttl:before {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #5f94b6;
  color: #ffffff;
  content: counter(cardOrder);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  letter-spacing: 0;
}

@media print, screen and (min-width: 768px) {
  .zehCard__ttl:before {
    font-size: 14px;
    height: 20px;
    margin-right: 18px;
    padding-bottom: 3px;
    width: 20px;
  }
}

@media screen and (max-width: 768px) {
  .zehCard__ttl:before {
    font-size: 14px;
    height: 20px;
    margin-right: 10px;
    padding-bottom: 3px;
    width: 20px;
  }
}

.zehCard__ttl:after {
  background-color: #5f94b6;
  bottom: 0;
  content: '';
  height: 1px;
  left: 0;
  position: absolute;
  width: 100%;
}

.zehCard__ttl + .txt {
  margin-top: 15px;
}

.zehCard__visual {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media print, screen and (min-width: 768px) {
  .zehCard__visual {
    margin-top: 30px;
  }
}

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

.zehCard__visual .photo__capIn, .zehCard__visual .photo__capOut {
  letter-spacing: 0;
}

@media print, screen and (min-width: 768px) {
  .zehCard__visual .photo + .photo {
    margin-left: 20px;
  }
}

@media screen and (max-width: 768px) {
  .zehCard__visual .photo + .photo {
    margin-left: 10px;
  }
}

.zehCard .txt {
  letter-spacing: .02em;
  line-height: calc(24 / 16);
  text-align: justify;
}

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

@media screen and (max-width: 768px) {
  .zehCard .txt {
    font-size: 11px;
  }
}

@media screen and (max-width: 768px) {
  .zehCard--spHalf {
    max-width: calc(50% - (19 / 750 * 100vw));
    width: 148px;
  }
}

.zehCard .caption {
  display: inline-block;
}

/* === zehCardGroup（取り組み内の設備カードの並び。宿河原2準拠・PC2列／SP混在幅） === */
.zehCardGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media print, screen and (min-width: 768px) {
  .zehCardGroup .zehCard {
    width: 456px;
  }
}

@media print, screen and (min-width: 768px) {
  .zehCardGroup .zehCard:nth-of-type(n + 3) {
    margin-top: 60px;
  }
}

@media screen and (max-width: 768px) {
  .zehCardGroup .zehCard:not(:last-of-type) {
    margin-bottom: 40px;
  }
}

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

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

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

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

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

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

.zehSect__head .heading {
  color: #1a5072;
  text-align: center;
}

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

@media screen and (max-width: 768px) {
  .zehSect__head .heading {
    font-size: 20px;
  }
}

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

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

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

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

@media screen and (max-width: 768px) {
  .zehSect__cont > * + * {
    margin-top: calc(50 / 750 * 100vw);
  }
}

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

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

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

.nowrap {
  white-space: nowrap;
}

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

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

.zehSect__cont .txt {
  letter-spacing: .06em;
  line-height: 1.9;
}

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

@media screen and (max-width: 768px) {
  .zehSect__cont .txt {
    font-size: calc(26 / 750 * 100vw);
  }
}

/* === intro: badge + lead text side by side === */
.zehIntro {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media print, screen and (min-width: 768px) {
  .zehIntro {
    gap: 50px;
  }
}

@media screen and (max-width: 768px) {
  .zehIntro {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: calc(70 / 750 * 100vw);
  }
}

.zehIntro .zehBadge {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
}

.zehIntro .txt {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

/* === ZEH-M Oriented: text/concept left, chart right === */
.zehGrid {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media print, screen and (min-width: 768px) {
  .zehGrid {
    gap: 48px;
  }
}

@media screen and (max-width: 768px) {
  .zehGrid {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: calc(50 / 750 * 100vw);
  }
}

.zehGrid__col {
  width: 100%;
}

.zehGrid__col:first-child {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

@media print, screen and (min-width: 768px) {
  .zehGrid__col:last-child {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 340px;
  }
}

@media print, screen and (min-width: 768px) {
  .zehGrid__col > * + * {
    margin-top: 32px;
  }
}

@media screen and (max-width: 768px) {
  .zehGrid__col > * + * {
    margin-top: calc(40 / 750 * 100vw);
  }
}

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

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

.zehSect__banner {
  color: #1a5072;
  font-family: "YakuHanMP", "Shippori Mincho B1", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.8;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .zehSect__banner {
    font-size: 23px;
    padding: 24px 0;
  }
}

@media screen and (max-width: 768px) {
  .zehSect__banner {
    font-size: calc(36 / 750 * 100vw);
    padding: calc(30 / 750 * 100vw) 0;
  }
}

/* === ZEH-M badge === */
.zehBadge {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .zehBadge {
    width: 340px;
  }
}

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

.zehBadge__mark {
  background-color: #ffffff;
  border-radius: 4px;
  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
}

@media print, screen and (min-width: 768px) {
  .zehBadge__mark {
    padding: 14px;
    width: 140px;
  }
}

@media screen and (max-width: 768px) {
  .zehBadge__mark {
    padding: calc(14 / 750 * 100vw);
    width: calc(180 / 750 * 100vw);
  }
}

.zehBadge__mark img {
  display: block;
  width: 100%;
}

.zehBadge__txt {
  letter-spacing: .04em;
  line-height: 1.8;
}

@media print, screen and (min-width: 768px) {
  .zehBadge__txt {
    font-size: 12px;
    margin-top: 12px;
    text-align: center;
  }
}

@media screen and (max-width: 768px) {
  .zehBadge__txt {
    font-size: calc(21 / 750 * 100vw);
    margin-top: calc(16 / 750 * 100vw);
    text-align: center;
  }
}

/* === high-insulation + high-efficiency concept boxes === */
.zehConcept {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media print, screen and (min-width: 768px) {
  .zehConcept {
    gap: 16px;
  }
}

@media screen and (max-width: 768px) {
  .zehConcept {
    gap: calc(16 / 750 * 100vw);
  }
}

.zehConcept__box {
  background-color: #f5f6f4;
  border: 1px solid #dde2dc;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .zehConcept__box {
    padding: 24px 12px;
  }
}

@media screen and (max-width: 768px) {
  .zehConcept__box {
    padding: calc(30 / 750 * 100vw) calc(10 / 750 * 100vw);
  }
}

.zehConcept__ttl {
  font-family: "YakuHanMP", "Shippori Mincho B1", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  letter-spacing: .04em;
  line-height: 1.6;
}

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

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

.zehConcept__sub {
  color: #1a5072;
  font-family: "YakuHanMP", "Shippori Mincho B1", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  font-weight: 600;
  letter-spacing: .04em;
  position: relative;
}

@media print, screen and (min-width: 768px) {
  .zehConcept__sub {
    font-size: 18px;
    margin-top: 22px;
    padding-top: 18px;
  }
}

@media screen and (max-width: 768px) {
  .zehConcept__sub {
    font-size: calc(28 / 750 * 100vw);
    margin-top: calc(30 / 750 * 100vw);
    padding-top: calc(24 / 750 * 100vw);
  }
}

.zehConcept__sub:before {
  background-color: #b7bdb4;
  content: '';
  left: 50%;
  position: absolute;
  top: 0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

@media print, screen and (min-width: 768px) {
  .zehConcept__sub:before {
    height: 1px;
    width: 34px;
  }
}

@media screen and (max-width: 768px) {
  .zehConcept__sub:before {
    height: 1px;
    width: calc(50 / 750 * 100vw);
  }
}

.zehConcept__plus {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #b4b4b4;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  font-family: "Cinzel", serif;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

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

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

/* === energy comparison chart (image from brochure data) === */
.zehChart {
  margin: 0 auto;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .zehChart {
    max-width: 320px;
  }
}

.zehChart img {
  display: block;
  width: 100%;
}

/* === evaluation table === */
.zehTable__caption {
  background-color: #f5f6f4;
  border: 1px solid #cccccc;
  border-bottom: none;
  font-weight: 500;
  letter-spacing: .02em;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .zehTable__caption {
    font-size: 15px;
    padding: 12px 10px;
  }
}

@media screen and (max-width: 768px) {
  .zehTable__caption {
    font-size: calc(18 / 750 * 100vw);
    padding: calc(12 / 750 * 100vw) calc(4 / 750 * 100vw);
  }
}

.zehTable table {
  border-collapse: collapse;
  margin: 0 auto;
  table-layout: fixed;
  width: 100%;
}

.zehTable th,
.zehTable td {
  border: 1px solid #cccccc;
  letter-spacing: .02em;
  overflow-wrap: break-word;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .zehTable th,
  .zehTable td {
    font-size: 15px;
    padding: 12px 10px;
  }
}

@media screen and (max-width: 768px) {
  .zehTable th,
  .zehTable td {
    font-size: calc(18 / 750 * 100vw);
    padding: calc(12 / 750 * 100vw) calc(4 / 750 * 100vw);
  }
}

.zehTable th {
  background-color: #f5f6f4;
  font-weight: 500;
}

.zehTable td {
  line-height: 1.5;
}

.zehTable__name {
  color: #1a5072;
  font-family: "Cinzel", serif;
  letter-spacing: .02em;
}

@media screen and (max-width: 768px) {
  .zehTable__name {
    width: 20%;
  }
}

.zehTable__small {
  display: inline-block;
  font-size: .75em;
  font-weight: 400;
}

/* === merit list === */
.zehMerit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .zehMerit {
    gap: 60px;
  }
}

@media screen and (max-width: 768px) {
  .zehMerit {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: calc(40 / 750 * 100vw);
  }
}

.zehMerit__item {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
}

.zehMerit__ttl {
  color: #1a5072;
  font-family: "YakuHanMP", "Shippori Mincho B1", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  letter-spacing: .06em;
}

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

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

.zehMerit__txt {
  line-height: 1.8;
}

@media print, screen and (min-width: 768px) {
  .zehMerit__txt {
    font-size: 15px;
    letter-spacing: .02em;
    margin-top: 12px;
  }
}

@media screen and (max-width: 768px) {
  .zehMerit__txt {
    font-size: calc(27 / 750 * 100vw);
    letter-spacing: .04em;
    margin-top: calc(14 / 750 * 100vw);
  }
}