@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;600&family=Noto+Serif+JP:wght@300;600&display=swap");
section {
  max-width: 1100px;
  margin-inline: auto;
}

.item-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6rem;
  margin-top: 8rem;
  margin-bottom: 4rem;
}

.item .title {
  color: #55764e;
  background-color: #eaf1eb;
  text-align: center;
  padding: 1rem;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  font-size: 2.8rem;
  line-height: 1.4;
}
.item .sub-title {
  color: #55764e;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  font-size: 2.2rem;
  line-height: 1.4;
  margin-top: 2rem;
}
.item .text {
  font-size: 1.6rem;
  line-height: 1.8;
  margin-top: 2rem;
}
.item .img {
  margin-top: 2rem;
}
.item .note {
  margin-top: 2rem;
}

.zeh,
.d-neqst,
.waterproof,
.aq,
.livness,
.sumstock {
  grid-column: span 2;
  display: grid;
}

.zeh {
  grid-template-columns: 0.66fr 1fr;
  grid-template-rows: repeat(3, auto) 1fr;
  -webkit-column-gap: 4rem;
     -moz-column-gap: 4rem;
          column-gap: 4rem;
}
.zeh .title {
  grid-column: span 2;
}
.zeh .img {
  grid-row: span 3;
}

.d-neqst {
  grid-template-columns: repeat(2, 1fr);
  -webkit-column-gap: 6rem;
     -moz-column-gap: 6rem;
          column-gap: 6rem;
  position: relative;
}
.d-neqst .icon {
  max-width: 175px;
  position: absolute;
  right: 0;
  top: 5rem;
}
.d-neqst .title,
.d-neqst .sub-title,
.d-neqst .text {
  grid-column: span 2;
}
.d-neqst .sub-title {
  padding-right: 175px;
}

.waterproof {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, auto) 1fr;
  -webkit-column-gap: 6rem;
     -moz-column-gap: 6rem;
          column-gap: 6rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.waterproof .title {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}
.waterproof .text-block {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
  display: grid;
  grid-template-columns: 1fr 0.6fr;
}
.waterproof .text-block .icon {
  margin-top: 1rem;
}
.waterproof .img {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  grid-row: span 3;
  margin-top: 0;
}

.performance-display {
  color: #55764e;
}

.aq .img {
  margin-top: 4rem;
}

.livness {
  display: grid;
  grid-template-columns: 1fr 214px;
  -webkit-column-gap: 4rem;
     -moz-column-gap: 4rem;
          column-gap: 4rem;
}
.livness .title,
.livness .text {
  grid-column: span 2;
}
.livness .sub-title {
  -ms-flex-item-align: end;
      align-self: flex-end;
}

.sumstock {
  display: grid;
  grid-template-columns: 1fr 0.7666fr;
  -webkit-column-gap: 4rem;
     -moz-column-gap: 4rem;
          column-gap: 4rem;
}
.sumstock .title,
.sumstock .sub-title {
  grid-column: span 2;
}
.sumstock .img {
  margin-top: 4rem;
}
.sumstock .img02 .note {
  line-height: 1.4;
}

@media screen and (max-width: 930px) {
  .item-list {
    gap: 4rem;
  }
  .zeh,
  .livness,
  .sumstock {
    -webkit-column-gap: 3rem;
       -moz-column-gap: 3rem;
            column-gap: 3rem;
  }
  .d-neqst,
  .waterproof {
    -webkit-column-gap: 4rem;
       -moz-column-gap: 4rem;
            column-gap: 4rem;
  }
}
@media screen and (max-width: 640px) {
  .item-list {
    grid-template-columns: 1fr;
    margin-top: 3rem;
  }
  .item .title {
    font-size: 2.2rem;
  }
  .item .sub-title {
    font-size: 1.8rem;
  }
  .item .text {
    font-size: 1.4rem;
  }
  .zeh,
  .d-neqst,
  .waterproof,
  .aq,
  .livness,
  .sumstock {
    grid-column: span 1;
  }
  .zeh {
    grid-template-columns: 1fr;
  }
  .zeh .title {
    grid-column: span 1;
  }
  .d-neqst {
    grid-template-columns: 1fr;
  }
  .d-neqst .icon {
    position: static;
    margin-inline: auto;
  }
  .d-neqst .title,
  .d-neqst .sub-title,
  .d-neqst .text {
    grid-column: span 1;
  }
  .d-neqst .sub-title {
    padding-right: 0;
  }
  .waterproof {
    grid-template-columns: 1fr;
  }
  .waterproof .text-block {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    grid-template-columns: 1fr 120px;
  }
  .waterproof .img {
    margin-top: 2rem;
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
  .aq .img {
    margin-top: 2rem;
  }
  .livness {
    display: grid;
    grid-template-columns: 1fr;
    -webkit-column-gap: 4rem;
       -moz-column-gap: 4rem;
            column-gap: 4rem;
  }
  .livness .title,
  .livness .text {
    grid-column: span 1;
  }
  .livness .icon {
    max-width: 200px;
    margin-inline: auto;
  }
  .sumstock {
    grid-template-columns: 1fr;
  }
  .sumstock .title,
  .sumstock .sub-title {
    grid-column: span 1;
  }
  .sumstock .img {
    margin-top: 3rem;
  }
}