@charset "UTF-8";
/* CSS Document */

/*pageH [
----------------------------------------------------------- */
.pageH{
  position: relative;
  margin-bottom: 0;
  color: var(--color-white);
}
.pageH > div{
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  width: 100%;
  line-height: var(--line-height-narrow);
  transform: translate(-50%,-50%);
  z-index: 10;
}
.pageH h1{
  font-size: clamp(calc(14px * var(--font-markup)), calc(14vw / var(--vw-sp)), 14px);/*14 / 16*/
}
.pageH p{
  font-family: var(--font-family-en);
  font-size: clamp(calc(40px * var(--font-markup)), calc(40vw / var(--vw-sp)), 40px);/*40 / 60*/
  font-weight: 800;
  letter-spacing: 0.05em;
  padding-left: 0.05em;
  line-height: 1.2;
}

.pageH::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-main);
  opacity: 0.5;
  z-index: 9;
}
.pageH > figure{
  z-index: 8;
}

@media print, screen and (min-width:768px) {
  .pageH{}
  .pageH > div{}
  .pageH h1{
    font-size: clamp(calc(16px * var(--font-markup)), calc(16vw / var(--vw-pc)), 16px);/*14 / 16*/
  }
  .pageH p{
    font-size: clamp(calc(60px * var(--font-markup)), calc(60vw / var(--vw-pc)), 60px);/*40 / 60*/
  }

  .pageH::before{}
  .pageH > figure{}
}



/* //////////////////////////////////////////////////////////
quality [
////////////////////////////////////////////////////////// */

/*intro [
----------------------------------------------------------- */
.quality .intro{
  padding: 30px 0;
  background: #009944;
  color: var(--color-white);
  text-align: left;
}
.quality .intro > div{}
.quality .intro > div > div{}
.quality .intro h2{
  margin: 0 0 20px 0;
  font-size: clamp(calc(28px * var(--font-markup)), calc(28vw / var(--vw-sp)), 28px);/*28 / 42*/
  line-height: var(--line-height-narrow);
}
.quality .intro p{
  line-height: var(--line-height-wide01);
}
.quality .intro figure{
  width: 80%;
  margin: 20px auto 0 auto;
}

@media print, screen and (min-width:768px) {
  .quality .intro{
    padding: 60px 0;
  } 
  .quality .intro > div{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
  }
  .quality .intro > div > div{
    width: calc((650 / var(--cont-width-nv-pc)) * 100%);
  }
  .quality .intro h2{
    margin: 0 0 40px 0;
    font-size: clamp(calc(42px * var(--font-markup)), calc(42vw / var(--vw-pc)), 42px);/*28 / 42*/
  }
  .quality .intro p{}
  .quality .intro figure{
    width: calc((420 / var(--cont-width-nv-pc)) * 100%);
    margin: 0;
  }
}


/*q5s [
----------------------------------------------------------- */
.quality .q5s{
  padding: 30px 0;
  background: var(--color-main01);
  color: var(--color-main);
  text-align: center;
}
.quality .q5s figure{
  width: 40%;
  max-width: 200px;
  margin: 0 auto 20px auto;
}
.quality .q5s h2{
  margin: 0 0 20px 0;
  font-size: clamp(calc(22px * var(--font-markup)), calc(22vw / var(--vw-sp)), 22px);/*22 / 32*/
  line-height: var(--line-height-narrow);
}
.quality .q5s p{
  text-align: left;
  line-height: var(--line-height-wide01);
}

@media print, screen and (min-width:768px) {
  .quality .q5s{
    padding: 60px 0;
  }
  .quality .q5s figure{}
  .quality .q5s h2{
    margin: 0 0 30px 0;
    font-size: clamp(calc(32px * var(--font-markup)), calc(32vw / var(--vw-sp)), 32px);/*22 / 32*/
  }
  .quality .q5s p{
    text-align: center;
  }
}

/*q5sList [
----------------------------------------------------------- */
.quality .q5sList{}
.quality .q5sList > section{}
.quality .q5sList > section .q5sH{
}
.quality .q5sList > section .q5sH a{
  position: relative;
  display: block;
  height: 100%;
}
.quality .q5sList > section .q5sH a > div{
  position: absolute;
  left: calc((10 / var(--cont-width-nv-sp)) * 100%);
  top: 50%;
  width: 42%;
  max-width: 180px;
  padding: 10px 0;
  background: rgba(var(--color-white-rgb),0.8);
  color: var(--color-main);
  transform: translate(0,-50%);
}
.quality .q5sList > section .q5sH a > div > div{
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.quality .q5sList > section .q5sH a > div > div p{
  margin: 0 5px 0 0;
  font-family: var(--font-family-en);
  font-size: clamp(calc(15px * var(--font-markup)), calc(15vw / var(--vw-sp)), 15px);/*15 / 20*/
  font-weight: 800;
  text-align: left;
  line-height: 1.2;
}
.quality .q5sList > section .q5sH a > div > div figure{
  width: 40%;
  max-width: 110px;
}
.quality .q5sList > section .q5sH a > div > h3{
  margin: 10px 0;
  font-size: clamp(calc(24px * var(--font-markup)), calc(24vw / var(--vw-sp)), 24px);/*24 / 40*/
  text-align: center;
  line-height: 1.0;
}
.quality .q5sList > section .q5sH a > div > p{
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family-en);
  font-size: clamp(calc(14px * var(--font-markup)), calc(14vw / var(--vw-sp)), 14px);/*14 / 15*/
  text-align: center;
  line-height: 1.0;
}
.quality .q5sList > section .q5sH a > div > p::after{
  content: "+";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0 0 0 5px;
  background: var(--color-main);
  color: var(--color-white);
  border-radius: 50%;
  font-size: 90%;
  text-align: center;
  line-height: 15px;
  transition: .3s;
}

/*OPEN時*/
.quality .q5sList > section .q5sH.is-current a > div > p::after{
  content: "-";
}


.quality .q5sList > section .q5sB{
  display: none;
  padding: 0 0 40px 0;
  background: var(--color-main01);
  color: var(--color-main);
}
.quality .q5sList > section .q5sB > div{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
.q5sList > section .cap{
  margin: 10px 0 0 0;
  font-size: clamp(calc(11px * var(--font-markup)), calc(11vw / var(--vw-sp)), 11px);/*11 / 12*/
  text-align: right;
}
.quality .q5sList > section .q5sB > div > div{
  margin: 20px 0 0 0;
  text-align: left;
}
.quality .q5sList > section .q5sB h4{
  margin: 0 0 20px 0;
  font-size: clamp(calc(22px * var(--font-markup)), calc(22vw / var(--vw-sp)), 22px);/*22 / 34*/
  text-align: left;
  line-height: var(--line-height-narrow);
}
.quality .q5sList > section .q5sB p{
  line-height: var(--line-height-wide01);
}

.quality .q5sList > section .q5sB > div > figure{
  width: 80%;
  margin: 30px auto 0 auto;
}
.quality .q5sList > section .q5sB > div > figure figcaption{
  margin: 10px 0 0 0;
  font-size: clamp(calc(11px * var(--font-markup)), calc(11vw / var(--vw-sp)), 11px);/*11 / 12*/
  text-align: left;
  line-height: 1.2;
}

@media print, screen and (min-width:768px) {
  .quality .q5sList{}
  .quality .q5sList > section{}
  .quality .q5sList > section .q5sH{}
  .quality .q5sList > section .q5sH a{}
  .quality .q5sList > section .q5sH a > div{
    left: calc((50 / var(--cont-width-nv-pc)) * 100%);
    width: calc((320 / var(--cont-width-nv-pc)) * 100%);
    max-width: 320px;
    padding: 25px 0;
  }
  .quality .q5sList > section .q5sH a > div > div{}
  .quality .q5sList > section .q5sH a > div > div p{
    margin: 0 10px 0 0;
    font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-pc)), 20px);/*15 / 20*/
  }
  .quality .q5sList > section .q5sH a > div > div figure{}
  .quality .q5sList > section .q5sH a > div > h3{
    margin: 20px 0;
    font-size: clamp(calc(40px * var(--font-markup)), calc(40vw / var(--vw-pc)), 40px);/*24 / 40*/
  }
  .quality .q5sList > section .q5sH a > div > p{
    font-size: clamp(calc(15px * var(--font-markup)), calc(15vw / var(--vw-pc)), 15px);/*14 / 15*/
  }
  .quality .q5sList > section .q5sH a > div > p::after{}

  .quality .q5sList > section .q5sB{
    padding: 0 0 80px 0;
  }
  .quality .q5sList > section .q5sB > div{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  .quality .q5sList > section .cap{
    width: 100%;
    font-size: clamp(calc(12px * var(--font-markup)), calc(12vw / var(--vw-pc)), 12px);/*11 / 12*/
  }
  .quality .q5sList > section .q5sB > div > div{
    width:  calc((710 / var(--cont-width01-nv-pc)) * 100%);
    margin: 50px 0 0 0;
  }
  .quality .q5sList > section .q5sB h4{
    margin: 0 0 30px 0;
    font-size: clamp(calc(34px * var(--font-markup)), calc(34vw / var(--vw-pc)), 34px);/*22 / 34*/
  }
  .quality .q5sList > section .q5sB p{}

  .quality .q5sList > section .q5sB > div > figure{
    width:  calc((304 / var(--cont-width01-nv-pc)) * 100%);
    margin: 50px 0 0 0;
  }
  .quality .q5sList > section .q5sB > div > figure figcaption{
    font-size: clamp(calc(12px * var(--font-markup)), calc(12vw / var(--vw-pc)), 12px);/*11 / 12*/
  }
}