/* -----------------------
  quality
----------------------- */
.quality {
  background: url(../img/quality_bg.png) no-repeat center top min(calc(1145/960 * 100vw), 1145px) / 100% auto;
  margin-top: max(calc(-140/960 * 100vw), -140px);
}

.quality .ttl-box {
  position: relative;
}

.quality .point_icon {
  position: absolute;
  bottom: max(calc(-178/ 960 *100vw), -178px);
  z-index: 3;
}

.quality_wrap {
  position: relative;
}

.quality_wrap h3 {
  display: grid;
  place-items: center;
  position: relative;
}

.quality_wrap h3 img,
.quality_wrap h3 span {
  grid-area: 1 / 1;
  align-self: end;
}

.quality_wrap h3 span {
  position: relative;
  z-index: 2;
}

.quality .txt-slider {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: grid;
}

.quality .txt-slider .slide-item:nth-of-type(2) {
  animation-delay: 9s;
}

.quality .txt-slider .slide-item {
  width: min(calc(1267/960 * 100vw), 1267px);
  height: min(17.81vw, 171px);
  padding-left: min(3.13vw, 30px);
  grid-area: 1 / 1;
  transform: translateX(100%);
  animation: marquee 18s linear infinite;
  animation-delay: 0s;
}

.lp_wrap .quality .grid-box {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "overlap";
}

.quality_01_var,
.quality_brand {
  display: grid;
}

.quality_brand p,
.quality_01_var p {
  grid-area: 1 / 1;
}

.quality_01_var p:nth-of-type(2) {
  margin-bottom: max(calc(-34/ 960 *100vw), -34px);
  z-index: 2;
  align-self: end;
}

.quality_01_blur {
  display: grid;
  place-items: center;
  position: relative;
}

.quality_01_blur p {
  grid-area: 1 / 1;
}

.quality_01_blur .grid-02 img {
  opacity: 0;
  transition: opacity 0.9s ease-in-out;
}

.quality_01_blur .grid-03 {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s ease, transform 0.9s ease;
  transition-delay: 0.8s;
}

.quality_01_blur.active .grid-02 img {
  opacity: 1;
}

.quality_01_blur.active .grid-03 {
  opacity: 1;
  transform: translateY(0);
}