@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: #3D3F54; background-color: #EDEDF0; text-align: center; padding: 1rem; font-feature-settings: "palt"; font-size: 2.8rem; line-height: 1.4; }
.item .sub-title { color: #3D3F54; 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; column-gap: 4rem; }
.zeh .title { grid-column: span 2; }
.zeh .img { grid-row: span 3; }

.d-neqst { grid-template-columns: repeat(2, 1fr); 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; column-gap: 6rem; align-items: flex-start; }
.waterproof .title { order: 1; }
.waterproof .text-block { order: 3; display: grid; grid-template-columns: 1fr 0.6fr; }
.waterproof .text-block .icon { margin-top: 1rem; }
.waterproof .img { order: 2; grid-row: span 3; margin-top: 0; }

.performance-display { color: #3D3F54; }

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

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

.sumstock { display: grid; grid-template-columns: 1fr 0.7666fr; 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 { column-gap: 3rem; }
  .d-neqst, .waterproof { 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 { order: 2; grid-template-columns: 1fr 120px; }
  .waterproof .img { margin-top: 2rem; order: 3; }
  .aq .img { margin-top: 2rem; }
  .livness { display: grid; grid-template-columns: 1fr; 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; } }