@charset "UTF-8";

/* ==== color ========================== */
:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-primary: #8CBD3D;
  --color-blue: #0081C2;
  --color-bgGray: #F2F2F2;
  --futura: "futura-pt", sans-serif;
}

/*================================================
 *  subVisual
 ================================================*/
#subVisual::before {
  background-image: url(../../images/quality-policy/subVisual.png);
}

@media screen and (max-width:767px) {
  #subVisual::before {
    background-position: center right 33%;
  }

}

/*================================================
 *  patent
 ================================================*/
.quality__list {
  margin-top: 5%;
}

.quality__list li * {
  color: #64646F;
}

.quality__list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  letter-spacing: 0.1em;
  padding: 1em 0;
  font-weight: 400;
  line-height: 2;
  align-items: center;
}

.quality__list li:nth-child(even) {
  background-color: #F4F7E9;
}

.quality__list li.ttl {
  font-size: 1.23em;
  font-weight: bold;
  padding: 2em 0;
  border-top: 1px solid #505051;
  border-bottom: 1px solid #505051;
}

.quality__list li .patent__n {
  width: 43.8%;
  padding-left: 1.3em;
}

.quality__list li.ttl .patent__n {
  padding-left: 1em;
}

.quality__list li.not__products .patent__n {
  width: calc(43.8% + 21.3%);
}

.quality__list li .products__n {
  width: 21.3%;
}

.quality__list li .patent__no {
  width: 17.6%;
}

.quality__list li .number {
  width: 16.9%;
}



@media screen and (max-width:767px) {
  #patent .narrow {
    width: 100%;
  }

  .sp__scroll {
    width: 96.66%;
    margin-left: auto;
    overflow-x: scroll;
    border-right: unset;
    margin-top: 10vw;
    padding-bottom: 10px;
  }


  .quality__list {
    width: 100%;
    /* min-width: 143.66vw; */
    min-width: 158vw;
    margin-left: auto;
    margin-top: 0;
    font-size: 0.9em;
    border: 1px solid #B9BABA;
  }

  .scrollbar::-webkit-scrollbar {
    width: 100%;
    height: 7px;
    background: #F2F2F2;
    border-radius: 1em 0 0 1em;
  }

  .scrollbar-thumb-rounded::-webkit-scrollbar-thumb {
    border-radius: 1em;
  }

  .scrollbar-thumb-black::-webkit-scrollbar-thumb {
    --bg-opacity: 1;
    background-color: #ccc;
  }

  .quality__list li.ttl {
    font-size: 1.185em;
    border-top: unset;
    border-bottom: 1px solid #B9BABA;
  }
}


/*================================================
 *  utility
 ================================================*/
#utility {
  background: var(--color-bgGray);
}

#utility ul li.ttl {
  font-size: 1em;
  padding: 2.46em 0;
  font-weight: 400;
  background: var(--color-white);
}

#utility .products__n {
  width: 43.1%;
  padding-left: 1.3em;
}

#utility .patent__no {
  width: 39.7%;
}

#utility .number {
  width: 16.9%;
}


@media screen and (max-width:767px) {
  #utility .narrow {
    width: 100%;
  }
}


/*================================================
 *  fire
 ================================================*/
#fire .patent__n {
  width: 67.9%;
}

#fire .products__n {
  width: 16%;
}

#fire .number {
  width: 15.8%;
}

#fire .quality__list li.not__products .patent__n {
  width: calc(67.9% + 16%);
}

#fire a {
  width: 100%;
  height: 11.66vw;
  margin: 16% auto;
  position: relative;
  display: grid;
  place-content: center;
  letter-spacing: 0.2em;
}

#fire a:hover {
  opacity: 1;
}

#fire a::before {
  position: absolute;
  content: "";
  background: url(../../images/quality-policy/policy_btn.jpg) no-repeat center/cover;
  width: 100%;
  height: 100%;
}

#fire a::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  mix-blend-mode: multiply;
  background: #0081C2;
}

#fire a span {
  position: relative;
  z-index: 1;
  color: var(--color-white);
  font-size: 1.79em;
  padding-right: 2.74em;
}

#fire a span::before {
  position: absolute;
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  display: inline-block;
  background-image: url(../../images/quality-policy/arrow.png);
  width: 1.87em;
  height: 0;
  padding-bottom: 1.87em;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  transition: .4s;
}

#fire a:hover span::before {
  right: -0.5em;
}

@media screen and (max-width:767px) {
  #fire {
    padding-bottom: 0;
  }

  #fire .narrow {
    width: 100%;
  }

  #fire a {
    min-width: 300px;
    width: 83.3vw;
    height: 30vw;
    margin: 10vw auto 0;
  }

  #fire a::before {
    background: url(../../images/quality-policy/policy_btn_sp.jpg) no-repeat center/cover;
  }

  #fire a span {
    font-size: 1.53em;
  }

  #fire a span::before {
    width: 1.91em;
    padding-bottom: 1.91em;
  }
}