@charset "UTF-8";

/* @media screen and (min-width: 768px) { */
  .wrapper {
    overflow: revert;
  }
/* } */

@media screen and (max-width: 767px) {
  .pageTab__inner {
    grid-template-columns: 1fr;
  }

  #spCommonModalInner {
    background: #000;
  }
  #spCommonModalContents figure {
    width: 100%;
    margin-inline: auto;
    padding: 20px;
  }
}

/* quality
---------------------------------------------- */
.quality + .quality {
  margin-top: 100px;
}

.qualityHead__copy {
  margin-top: 1em;
}
.qualityHead__text {
  margin-top: 2em;
}
.qualityHead__note {
  margin-top: 1.5em;
}

.qualityBox {
  margin-top: 40px;
}
.qualityBox__inner--column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px calc(30 / 1280 * 100%);
}
* + .qualityBox__text,
* + .qualityBox__note {
  margin-top: 1.5em;
}

.whats {
  border: 1px solid #E0DDD8;
}
.whats__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 20px calc(80 / 1278 * 100%);
  padding: calc(40 / 1278 * 100%);
}
.whats__title .en {
  font-size: 32px;
  letter-spacing: 0.02em;
  margin-right: .5em;
}

/* quality01 */
.quality01 .qualityBox {
  margin-top: 80px;
}

/* quality02 */
.graph {
  background-color: #E0DDD8;
  margin-top: 40px;
}
.graph__inner {
  display: grid;
  grid-template-columns: calc(480 / 1120 * 100%) 1fr;
  align-items: center;
  gap: 30px calc(80 / 1120 * 100%);
  padding: calc(40 / 1280 * 100%) calc(80 / 1280 * 100%);
}

/* quality03 */
.bels {
  margin-top: 80px;
}
.bels__inner {
  display: grid;
  grid-template-columns: calc(480 / 1280 * 100%) 1fr;
  align-items: center;
  gap: 30px calc(80 / 1280 * 100%);
}

@media screen and (max-width: 767px) {
  .quality + .quality {
    margin-top: 60px;
  }

  .qualityHead__text {
    margin-top: 1.5em;
  }
  .qualityHead__note {
    margin-top: 1em;
  }

  .qualityBox {
    margin-top: 30px;
  }
  .qualityBox__inner--column {
    grid-template-columns: 1fr;
  }
  * + .qualityBox__text,
  * + .qualityBox__note {
    margin-top: 1em;
  }

  .whats__inner {
    grid-template-columns: 1fr;
    padding: calc(30 / 332 * 100%);
  }
  .whats__title .en {
    font-size: 24px;
  }

  /* quality01 */
  .quality01 .qualityBox {
    margin-top: 40px;
  }

  /* quality02 */
  .graph {
    margin-top: 20px;
  }
  .graph__inner {
    grid-template-columns: 1fr;
    padding: calc(30 / 332 * 100%);
  }

  /* quality03 */
  .bels {
    margin-top: 20px;
  }
  .bels__inner {
    grid-template-columns: 1fr;
  }
}

/* pageTabBottom
---------------------------------------------- */
.pageTabBottom {
  margin-top: clamp(100px, 7.57rem + 6.47vw, 200px);
}