@charset "UTF-8";
:root {
  --qua-cont-width-pc: 1075px;/*1055*/
  --qua-cont-width-nv-pc: 1055;/*数値のみ numerical value*/
}

.pjContents{
  overflow-x: clip;
  padding: 0 0 50px 0;
}

@media print, screen and (min-width:768px) {
  main .quaConPC{
    max-width: var(--qua-cont-width-pc);
  }
  .pjContents{
    padding-bottom: 80px;
  }
}

.lNav{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.lNav li{
  width: calc((155 / var(--qua-cont-width-nv-pc)) * 100%);
  font-size: clamp(calc(30px * var(--font-markup)), calc(30vw / var(--vw-pc)), 30px);/*30 / 15*/
  line-height: 1.2;
}
.lNav li a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: #9fa0a0;
  color: var(--color-white);
  text-decoration: none;
}
.lNav li a:hover{
  background: var(--color-key01);
  opacity: 1;
}
.lNav li.current a{
  background: var(--color-key01);
}

.quaPageTtl{
  position: relative;
  display: flex;
  align-items: baseline;
  margin: 120px 0 30px 0;
  padding: 0 0 15px 0;
  text-align: left;
  line-height: 1.0;
}
.quaPageTtl::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  display: block;
  width: 100vw;
  height: 1px;
  background: var(--color-def03);
  transform: translate(-50%,0);
}
.quaPageTtl span{
  line-height: 1.0;
}
.quaPageTtl .fJa{
  font-size: clamp(calc(90px * var(--font-markup)), calc(90vw / var(--vw-pc)), 90px);/*90 / 44*/
}
.quaPageTtl .fEn{
  margin: 0 0 0 0.5em;
  font-size: clamp(calc(70px * var(--font-markup)), calc(60vw / var(--vw-pc)), 60px);/*60 / 30*/
  color: #b5b5b6;
}

.quaHero{
  position: relative;
}
.quaHero > div{
  position: absolute;
  left: 50%;
  top: 7%;
  width: 100% !important;
  transform: translate(-50%,0);
}
.quaHero > div > div{
  display: flex;
  /*justify-content: center;*/
  align-items: center;
  width: 50%;
}
.quaHero > div > div p{
  margin: 0 0 0 1em;
  color: var(--color-white);
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: clamp(calc(42px * var(--font-markup)), calc(42vw / var(--vw-pc)), 42px);/*42 / 17*/
  text-align: left;
  line-height: 1.6;
}
.quaHero > div > div p span{
  text-combine-upright: all;
}
.quaHero .cap{
  position: absolute;
  right: 5px;
  bottom: 2px;
  color: var(--color-white);
}

.quaCopy01{
  margin: 0 0 0.8em 0;
  padding-left: 0.1em;
  font-size: clamp(calc(32px * var(--font-markup)), calc(32vw / var(--vw-pc)), 32px);/*32 / 16*/
  line-height: var(--line-height-narrow);
  letter-spacing: 0.1em;
  font-feature-settings: "palt";
}
.quaCopy01 strong{
  font-size: calc((50 / 32) * 100%);
  font-weight: normal;
  font-weight: 400;
}

.quaCopy02{
  margin: 0 0 0.4em 0;
  font-size: clamp(calc(30px * var(--font-markup)), calc(30vw / var(--vw-pc)), 30px);/*30 / 15*/
  line-height: var(--line-height-narrow);
  letter-spacing: 0.1em;
  font-feature-settings: "palt";
}
.quaCopy02 strong{
  font-size: calc((42 / 30) * 100%);
  font-weight: normal;
  font-weight: 400;
}

.quaCopy03{
  padding: 0.5em 0;
  border-top: 1px solid var(--color-def02);
  border-bottom: 1px solid var(--color-def02);
  font-size: clamp(calc(36px * var(--font-markup)), calc(36vw / var(--vw-pc)), 36px);/*36 / 18*/
  line-height: var(--line-height-narrow);
  letter-spacing: 0.1em;
  text-align: left;
  font-feature-settings: "palt";
}

.quaCopy03.-type01{
  margin: 0 0 0.4em 0;
  padding: 0;
  border-top: none;
  border-bottom: none;
}

.quaCopy04{
  margin: 0 0 0.4em 0;
  font-size: clamp(calc(20px * var(--font-markup)), calc(30vw / var(--vw-pc)), 30px);/*30 / 20*/
  line-height: var(--line-height-narrow);
  letter-spacing: 0.1em;
  font-feature-settings: "palt";
}
.quaCopy04 strong{
  font-size: calc((42 / 30) * 100%);
  font-weight: normal;
  font-weight: 400;
}

.quaLead01{
  font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-pc)), 20px);/*20 / 13*/
  line-height: 1.6;
}
.quaLead02{
  font-size: clamp(calc(22px * var(--font-markup)), calc(22vw / var(--vw-pc)), 22px);/*22 / 12*/
  line-height: 1.6;
}
.att{
  color: #c30d23;
}

.quaSec{}
.quaSec.-type01{
  margin-top: 100px;
}
.quaSec.-type02{
  margin-top: 50px;
}


@media screen and (max-width:767px) {
  .lNav{
    position: relative;
    justify-content: center;
  }
  .lNav::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 100%;
    height: 1px;
    background: #7d7d7d;
    transform: translate(-50%,0);
  }
  .lNav li{
    width: 25%;
    margin: 0 4%;
    font-size: clamp(calc(15px * var(--font-markup)), calc(15vw / var(--vw-sp)), 15px);/*30 / 15*/
  }
  .lNav li:nth-of-type(n+4){
    margin-top: 15px;
    padding-top: 15px;
  }
  .lNav li a{}
  .lNav li a:hover{}
  .lNav li.current a{}
  
  .quaPageTtl{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 60px 0 30px 0;
    padding-bottom: 30px;
    text-align: center;
  }
  .quaPageTtl::after{
    bottom: 52%;
  }
  .quaPageTtl span{}
  .quaPageTtl .fJa{
    font-size: clamp(calc(44px * var(--font-markup)), calc(44vw / var(--vw-sp)), 44px);/*90 / 44*/
  }
  .quaPageTtl .fEn{
    margin-top: 20px;
    font-size: clamp(calc(30px * var(--font-markup)), calc(30vw / var(--vw-sp)), 30px);/*70 / 30*/
    color: #b5b5b6;
  }

  .quaHero{}
  .quaHero > div{
    position: absolute;
    left: 50%;
    top: 7%;
    transform: translate(-50%,0);
  }
  .quaHero > div > div{
    width: 100% !important;
  }
  .quaHero > div > div p{
    margin-left: 0;
    font-size: clamp(calc(17px * var(--font-markup)), calc(17vw / var(--vw-sp)), 17px);/*42 / 17*/
  }

  .quaCopy01{
    font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-sp)), 20px);/*32 / 20*/
    letter-spacing: 0.05em;
  }
  .quaCopy01 strong{
    font-size: calc((46 / 32) * 100%);
  }

  .quaCopy02{
    font-size: clamp(calc(18px * var(--font-markup)), calc(18vw / var(--vw-sp)), 18px);/*30 / 18*/
  }
  .quaCopy02 strong{
    font-size: calc((42 / 30) * 100%);
    font-weight: normal;
    font-weight: 400;
  }
  
  .quaCopy03{
    font-size: clamp(calc(18px * var(--font-markup)), calc(18vw / var(--vw-sp)), 18px);/*36 / 18*/
    letter-spacing: normal;
    text-align: center;
  }
  
  .quaCopy04{
    font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-sp)), 20px);/*30 / 20*/
    letter-spacing: normal;
  }

  .quaLead01{
    font-size: clamp(calc(15px * var(--font-markup)), calc(15vw / var(--vw-sp)), 15px);/*20 / 15*/
  }
  .quaLead02{
    font-size: clamp(calc(12px * var(--font-markup)), calc(12vw / var(--vw-sp)), 12px);/*22 / 12*/
  }
    .att{}

  .quaSec{}
  .quaSec.-type01{
    margin-top: 50px;
  }
  .quaSec.-type02{
    margin-top: 25px;
  }

}


/*耐震性s
------------------------------------------------*/
/*ear01*/
.ear01{}
.ear01 ul{
  display: flex;
}
.ear01 ul li{
  display: flex;
  align-items: flex-end;
  font-size: clamp(calc(32px * var(--font-markup)), calc(32vw / var(--vw-pc)), 32px);/*32 / 16*/
  line-height: 1.0;
}
.ear01 ul li + li{
  margin: 0 0 0 1.0em;
}
.ear01 ul li > span{
  font-size: clamp(calc(22px * var(--font-markup)), calc(22vw / var(--vw-pc)), 22px);/*22 / 11*/
  line-height: 1.0;
}
.ear01 ul li strong{
  margin: 0 10px -5px 10px;
  font-size: clamp(calc(80px * var(--font-markup)), calc(80vw / var(--vw-pc)), 80px);/*80 / 40*/
  line-height: 1.0;
}
.ear01 ul li strong span{
  font-size: 50%;
}

@media screen and (max-width:767px) {
  .ear01{}
  .ear01 ul{
    flex-direction: column;
  }
  .ear01 ul li{
    align-items: center;
    justify-content: center;
    font-size: clamp(calc(16px * var(--font-markup)), calc(16vw / var(--vw-sp)), 16px);/*32 / 16*/
  }
  .ear01 ul li + li{
    margin-top: 10px;
    margin-left: 0;
  }
  .ear01 ul li > span{
    font-size: clamp(calc(22px * var(--font-markup)), calc(11vw / var(--vw-sp)), 11px);/*22 / 11*/
  }
  .ear01 ul li strong{
    margin: 0 10px 10px 10px;
    font-size: clamp(calc(40px * var(--font-markup)), calc(40vw / var(--vw-sp)), 40px);/*80 / 40*/
  }
  .ear01 ul li strong span{}
}

/*ear02*/
.ear02{
  display: flex;
  justify-content: space-between;
}
.ear02 div{
  width: calc((500 / var(--qua-cont-width-nv-pc)) * 100%);
}
.ear02 figure{
  position: relative;
  width: calc((490 / var(--qua-cont-width-nv-pc)) * 100%);
}
.ear02 figure .cap{
  color: var(--color-white);
}

@media screen and (max-width:767px) {
  .ear02{
    display: block;
  }
  .ear02 div{
    width: 100%;
    margin-top: 30px;
  }
  .ear02 figure{
    width: 100%;
  }
  .ear02 figure .cap{}
}

/*earBF*/
.earBF{
  margin: 150px 0 0 0;
  padding: 50px 0;
  background: var(--color-def03);
  color: var(--color-white);
  text-align: center;
}
.earBF figure{
  max-width: 485px;
  margin: 0 auto;
}
.earBF p{
  margin: 1em 0 0 0;
  font-size: clamp(calc(32px * var(--font-markup)), calc(32vw / var(--vw-pc)), 32px);/*32 / 16*/
}

@media screen and (max-width:767px) {
  .earBF{
    margin-top: 50px;
    padding: 40px 0;
  }
  .earBF figure{
    width: 67%;
  }
  .earBF p{
    font-size: clamp(calc(16px * var(--font-markup)), calc(16vw / var(--vw-pc)), 16px);/*32 / 16*/
  }
}


/*ear03*/
.ear03{
  display: flex;
  justify-content: space-between;
}
.ear03 div{
  display: flex;
  flex-direction: column;
  width: calc((490 / var(--qua-cont-width-nv-pc)) * 100%);
}
.ear03 div > figure{
  margin-top: 20px;
}
.ear03 > figure{
  position: relative;
  width: calc((500 / var(--qua-cont-width-nv-pc)) * 100%);
}
.ear03 > figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ear03 figure .cap{
  color: var(--color-white);
}

@media screen and (max-width:767px) {
  .ear03{
    flex-direction: column-reverse;
  }
  .ear03 div{
    display: block;
    width: 100%;
    margin-top: 30px;
  }
  .ear03 div > figure{}
  .ear03 > figure{
    width: 100%;
  }
  .ear03 > figure img{
    width: auto;
    height: auto;
    object-fit: unset;
  }
  .ear03 figure .cap{}
}


/*ear04*/
.ear04{
  display: flex;
  justify-content: space-between;
}
.ear04 div{
  display: flex;
  flex-direction: column;
  width: calc((490 / var(--qua-cont-width-nv-pc)) * 100%);
}
.ear04 figure{
  position: relative;
  width: calc((526 / var(--qua-cont-width-nv-pc)) * 100%);
}

@media screen and (max-width:767px) {
  .ear04{
    display: block;
  }
  .ear04 div{    
    display: block;
    width: 100%;
  }
  .ear04 figure{    
    width: 100%;
    margin-top: 30px;
  }
}


/*ear05*/
.ear05{
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
}
.ear05 div{
  display: flex;
  flex-direction: column;
  width: calc((500 / var(--qua-cont-width-nv-pc)) * 100%);
}
.ear05 div > figure{
  margin-top: 20px;
}
.ear05 > figure{
  position: relative;
  width: calc((495 / var(--qua-cont-width-nv-pc)) * 100%);
}
.ear05 > figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ear05 > figure .cap{
  color: var(--color-white);
}

@media screen and (max-width:767px) {
  .ear05{
    flex-direction: column-reverse;
  }
  .ear05 div{    
    display: block;
    width: 100%;
    margin-top: 30px;
  }
  .ear05 div > figure{}
  .ear05 > figure{
    width: 100%;
  }
  .ear05 > figure img{
    width: auto;
    height: auto;
    object-fit: unset;
  }
  .ear05 > figure .cap{}

}


/*ear06*/
.ear06{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: row-reverse;
}
.ear06 div{
  display: flex;
  flex-direction: column;
  width: calc((500 / var(--qua-cont-width-nv-pc)) * 100%);
}
.ear06 > figure{
  position: relative;
  width: calc((515 / var(--qua-cont-width-nv-pc)) * 100%);
}
.ear06 ul{
  width: 100%;
}
.ear06 ul li{
  margin-top: 50px;
}

@media screen and (max-width:767px) {
  .ear06{
    display: block;
  }
  .ear06 div{
    display: block;
    width: 100%;
  }
  .ear06 > figure{
    width: 100%;
    margin-top: 30px;
  }
  .ear06 ul{
    width: 100vw;
    transform: translate(-20px,0);
  }
  .ear06 ul li{
    margin-top: 30px;
  }
}




/*耐火性
------------------------------------------------*/

.fir02,
.fir03,
.fir04,
.fir05{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;  
}


.fir02,
.fir04{
  flex-direction: row-reverse;
}
.fir02 div,
.fir03 div,
.fir05 div:nth-of-type(1){
  width: calc((500 / var(--qua-cont-width-nv-pc)) * 100%);
}
.fir02 figure,
.fir03 figure,
.fir05 figure{
  width: calc((490 / var(--qua-cont-width-nv-pc)) * 100%);
}


/*fir02*/
.fir02 figure .cap{
  color: var(--color-white);
}

/*fir04*/
.fir04 div{
  width: calc((490 / var(--qua-cont-width-nv-pc)) * 100%);
}
.fir04 figure{
  width: calc((480 / var(--qua-cont-width-nv-pc)) * 100%);
}
.fir04 figure figcaption{
  line-height: var(--line-height-narrow);
}

/*fir05*/
.fir05 .beta{
  margin: 0 0 10px 0;
  padding: 10px;
  background: var(--color-def03);
  color: var(--color-white);
  font-size: clamp(calc(22px * var(--font-markup)), calc(22vw / var(--vw-pc)), 22px);/*22 / 14*/
  line-height: 1.0;
  text-align: center;
}
.fir05 sup{
  position: relative;
  top: -10px;
}
.fir05 figure{
  align-self: flex-end;
}

.fir05 .calc{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}
.fir05 .calc h5{
  position: relative;
  width: 100%;
  margin: 0 0 1em 0;
  font-size: clamp(calc(22px * var(--font-markup)), calc(22vw / var(--vw-pc)), 22px);/*22 / 14*/
  line-height: 1.0;
  text-align: left;
}
.fir05 .calc h5::before{
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  display: block;
  width: calc(100% - 10em);
  height: 1px;
  background: var(--color-def02);
}
.fir05 .calc h6{
  position: relative;
  margin: 0 0 0.5em 0;
  font-size: clamp(calc(22px * var(--font-markup)), calc(22vw / var(--vw-pc)), 22px);/*22 / 14*/
  line-height: 1.0;
  text-align: left;
}
.fir05 .calc h6 + h6{
  padding-top: 0.3em;
}
.fir05 .calc > div{
  margin: 0 0 30px 0;
  text-align: left;
}
.fir05 .calc div:last-of-type{
  width: 100%;
}
.fir05 .calc div:last-of-type ul{
  display: flex;
  flex-wrap: wrap;
}
.fir05 .calc li{
  position: relative;
  margin: 0.4em 0 0 0;
  padding: 0 0 0 1.2em;
  font-size: clamp(calc(22px * var(--font-markup)), calc(22vw / var(--vw-pc)), 22px);/*22 / 14*/
  line-height: var(--line-height-narrow);
  text-align: left;
}
.fir05 .calc div:last-of-type ul li{
  margin-right: 1em;
}
.fir05 .calc li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  background: var(--color-def01);
  border-radius: 50%;
}

@media screen and (max-width:767px) {
  .fir02,
  .fir03,
  /*.fir04,*/
  .fir05{
    display: block;
  }
  .fir02 div,
  .fir03 div,
  .fir05 div:nth-of-type(1){
    width: 100%;
  }
  .fir02 figure,
  .fir03 figure,
  .fir05 figure{
    margin-top: 30px;
    width: 100%;
  }


  /*fir02*/
  .fir02 figure .cap{}

  /*fir04*/
  .fir04{
    flex-direction: column-reverse;
  }
  .fir04 div{
    width: 100%;
    margin-top: 30px;
  }
  .fir04 figure{
    width: 100%;
  }
  .fir04 figure figcaption{}

  /*fir05*/
  .fir05 .beta{
    font-size: clamp(calc(14px * var(--font-markup)), calc(14vw / var(--vw-sp)), 14px);/*22 / 14*/
  }
  .fir05 sup{
    top: -8px;
  }
  .fir05 figure{
    align-self: auto;
  }
  
  .fir05 .calc{
    display: block;
  }
  .fir05 .calc h5{
    font-size: clamp(calc(14px * var(--font-markup)), calc(14vw / var(--vw-sp)), 14px);/*22 / 14*/
  }
  .fir05 .calc h5::before{}
  .fir05 .calc h6{
    font-size: clamp(calc(14px * var(--font-markup)), calc(14vw / var(--vw-sp)), 14px);/*22 / 14*/
  }
  .fir05 .calc h6 + h6{}
  .fir05 .calc > div{
    margin-bottom: 20px;
  }
  .fir05 .calc div:last-of-type{}
  .fir05 .calc div:last-of-type ul{}
  .fir05 .calc li{
    font-size: clamp(calc(14px * var(--font-markup)), calc(14vw / var(--vw-sp)), 14px);/*22 / 14*/
  }
  .fir05 .calc div:last-of-type ul li{}
  .fir05 .calc li::before{
    width: 12px;
    height: 12px;
  }

}


/*耐久性
------------------------------------------------*/
.dur01{
  margin-bottom: 100px;
}

.ls30{
  padding: 50px 0;
  background: var(--color-white);
}
.ls30 > div{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 860px;
  margin: 0 auto;
}
.ls30 > div figure{
  width: calc((315 / 860) * 100%);
}
.ls30 > div h3{
  width: calc((510 / 860) * 100%);
  font-size: clamp(calc(50px * var(--font-markup)), calc(50vw / var(--vw-pc)), 50px);/*50 / 26*/
  line-height: var(--line-height-narrow);
  text-align: left;
}
.ls30 > div p:last-of-type{
  width: 100%;
  margin: 20px 0 0 0;
  font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-pc)), 20px);/*20 / 13*/
  line-height: var(--line-height-narrow);
  text-align: left;
}

.dur02{}
.dur02 section{}
.dur02 section h5{
  position: relative;
  margin: 0 0 70px 0;
  padding: 0 0 20px 150px;
  font-size: clamp(calc(52px * var(--font-markup)), calc(52vw / var(--vw-pc)), 52px);/*52 / 28*/
  text-align: left;
  letter-spacing: 0.05em;
  line-height: var(--line-height-narrow);
}
.dur02 section h5::before{
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  width: calc(100% - 20px);
  height: 1px;
  background: var(--color-def02);
}
.dur02 section h5 span{
  position: absolute;
  left: 0;
  bottom: -30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 130px;
  padding-left: 0.1em;
  border-radius: 50%;
  background: var(--color-def03);
  color: var(--color-white);
  font-size: clamp(calc(28px * var(--font-markup)), calc(28vw / var(--vw-pc)), 28px);/*52 / 28*/
  letter-spacing: 0.1em;
}

.dur02 section h5 + div{
  position: relative;
  margin: 40px 0 0 0;
  padding: 0 0 0 170px;
}
.dur02 section h5 + div h6{
  margin: 0 0 30px 0;
  font-size: clamp(calc(42px * var(--font-markup)), calc(42vw / var(--vw-pc)), 42px);/*42 / 22*/
  text-align: left;
  line-height: 1.0;
}
.dur02 section h5 + div h6 img{
  position: absolute;
  left: 0;
  top: 0;
  width: 140px;
}
.dur02 section h5 + div h6 + div{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.dur02 section h5 + div h6 + div figure{
  width: calc((540 / 890) * 100%);
}
.dur02 section h5 + div h6 + div div{
  width: calc((320 / 890) * 100%);
  text-align: left;
}
.dur02 section h5 + div h6 + div figure.w100,
.dur02 section h5 + div h6 + div div.w100{
  width: 100%;
}


@media screen and (max-width:767px) {
  .dur01{
    margin-bottom: 50px;
  }

  .ls30{
    padding: 20px 0;
  }
  .ls30 > div{
    display: block;
  }
  .ls30 > div figure{
    width: 50%;
    margin: 0 auto 10px auto;
  }
  .ls30 > div h3{
    width: 100%;
    font-size: clamp(calc(26px * var(--font-markup)), calc(26vw / var(--vw-sp)), 26px);/*50 / 26*/
    text-align: center;
  }
  .ls30 > div p:last-of-type{
    width: 100%;
    margin-top: 10px;
    padding-top: 10px;
    font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-sp)), 13px);/*20 / 13*/
  }

  .dur02{}
  .dur02 section{}
  .dur02 section h5{
    margin-bottom: 20px;
    padding: 0 0 20px 0;
    font-size: clamp(calc(28px * var(--font-markup)), calc(28vw / var(--vw-sp)), 28px);/*52 / 28*/
    text-align: center;
  }
  .dur02 section h5::before{
    width: 100%;
  }
  .dur02 section h5 span{
    position: static;
    width: 100%;
    height: 26px;
    margin-bottom: 20px;
    border-radius: 200px;
    font-size: clamp(calc(16px * var(--font-markup)), calc(16vw / var(--vw-sp)), 16px);/*28 / 16*/
  }

  .dur02 section h5 + div{
    position: static;
    margin-top: 20px;
    padding-left: 0;
  }
  .dur02 section h5 + div h6{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-size: clamp(calc(22px * var(--font-markup)), calc(22vw / var(--vw-sp)), 22px);/*42 / 22*/
  }
  .dur02 section h5 + div h6 img{
    position: static;
    width: 75px;
    margin: 0 10px 0 0;
  }
  .dur02 section h5 + div h6 + div{
    display: block;
  }
  .dur02 section h5 + div h6 + div figure{
    width: 100%;
  }
  .dur02 section h5 + div h6 + div div{
    width: 100%;
    margin: 20px 0 0 0;
  }
  .dur02 section h5 + div h6 + div figure.w100,
  .dur02 section h5 + div h6 + div div.w100{}
}


/*断熱性
------------------------------------------------*/
.the01{
  margin-bottom: 100px;
}

.the02{}
.the02 > div{
  display: flex;
  justify-content: space-between;
}
.the02 > div > div{
  width: calc(calc(500 / var(--qua-cont-width-nv-pc)) * 100%);
  text-align: left;
}
.the02 > div > figure{
  width: calc(calc(470 / var(--qua-cont-width-nv-pc)) * 100%);
}
.the03{}
.the03 figure{
  margin-top: 60px;
}

.the04{}
.the04 h4.quaCopy04{
  text-align: left;
}
.the04 > div > section{
  margin: 20px 0 0 0;
  padding: 0 0 40px 0;
  /*background: #f2f2f2;*/
  background: rgba(204,204,204,0.4);
}
.the04 > div > section h5{
  display: flex;
  align-items: center;
  margin: 0 25px 20px 25px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-def02);
  font-size: clamp(calc(38px * var(--font-markup)), calc(38vw / var(--vw-pc)), 38px);/*38 / 18*/
  line-height: 1.2;
  text-align: left;
  font-feature-settings: "palt";
}
.the04 > div > section h5 span{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  margin: 0 10px 0 0;
  background: var(--color-white);
  color: #727171;
  font-size: clamp(calc(70px * var(--font-markup)), calc(70vw / var(--vw-pc)), 70px);/*70 / 25*/
  line-height: 1.0;
  text-align: center;
}
.the04 > div > section h5 + div{
  padding: 0 70px;
  text-align: left;
}
.the04 > div > section figure{
  margin-top: 30px;
}

.the04 > div > section h6.quaCopy02{}

.the04 .the0401{
  padding-bottom: 0;
}
.the04 .the0401 .quaCopy02 .quaLead02{
  position: absolute;
  right: 0;
  bottom: 0;
}
.the04 .the0401 figure .cap{
  color: var(--color-white);
}

.the04 .the0402{}
.the04 .the0402 div > div .quaLead02 + p{
  font-size: clamp(calc(16px * var(--font-markup)), calc(16vw / var(--vw-pc)), 16px);/*16 / 10*/
}
.the04 .the0402 div > div figure{
  text-align: center;
}

.the04 .the0403{}

.the05{
  text-align: left;
}
.the05 figure:nth-of-type(1) img{
  mix-blend-mode: multiply;
}

.the06{}
.the06 ul{
  display: flex;
  margin: 20px 0 0 0;
}
.the06 ul li{
  width: calc(100% / 3);
  padding: 0 15px;
  font-feature-settings: "palt";
}
.the06 ul li + li{
  border-left: 4px dotted #727171;
}
.the06 ul li figure{
  width: calc((130 / 340) * 100%);
  max-width: 130px;
  margin: 0 auto;
}
.the06 ul li dt{
  margin: 20px 0 0 0;
  font-size: clamp(calc(24px * var(--font-markup)), calc(24vw / var(--vw-pc)), 24px);/*24 / 14*/
  line-height: 1.4;
  text-align: left;
}
.the06 ul li dd{
  margin: 10px 0 0 0;
  font-size: clamp(calc(22px * var(--font-markup)), calc(22vw / var(--vw-pc)), 22px);/*22 / 12*/
  line-height: 1.6;
  text-align: left;
}

@media screen and (max-width:767px) {
  .the01{
    margin-bottom: 50px;
  }
  
  .the02{}
  .the02 > div{
    display: block;
  }
  .the02 > div > div{
    width: 100%;
    text-align: center;
  }
  .the02 > div > div p{
    margin-top: 20px;
  }
  .the02 > div > figure{
    width: 100%;
    margin-top: 20px;
  }

  .the03{}
  .the03 h4{
    padding-left: 0.3em;
    letter-spacing: 0.3em;
  }
  .the03 figure{
    margin-top: 30px;
  }
  
  .the04{}
  .the04 h4.quaCopy04{
    text-align: center;
  }
  
  .the04 > div > section{
    margin: 10px 0 0 0;
    padding: 0 0 20px 0;
  }
  .the04 > div > section h5{
    margin: 0 20px 10px 20px;
    padding: 15px 0;
    font-size: clamp(calc(18px * var(--font-markup)), calc(18vw / var(--vw-sp)), 18px);/*38 / 18*/
  }
  .the04 > div > section h5 span{
    width: 32px;
    height: 32px;
    font-size: clamp(calc(25px * var(--font-markup)), calc(25vw / var(--vw-sp)), 25px);/*70 / 25*/
  }
  .the04 > div > section h5 + div{
    padding: 0 20px;
  }
  .the04 > div > section figure{
    margin-top: 20px;
  }
  .the04 > div > section h6.quaCopy02{
    font-size: clamp(calc(15px * var(--font-markup)), calc(15vw / var(--vw-sp)), 15px);
    letter-spacing: normal;
  }

  .the04 .the0401{}
  .the04 .the0401 .quaCopy02 .quaLead02{
    position: static;
    display: block;
    margin-left: auto;
    text-align: right;
  }
  .the04 .the0401 figure .cap{
    color: var(--color-white);
  }

  .the04 .the0402{}
  .the04 .the0402 div > div .quaLead02 + p{
    font-size: clamp(calc(10px * var(--font-markup)), calc(10vw / var(--vw-sp)), 10px);/*16 / 10*/
  }
  .the04 .the0402 div > div figure{
    text-align: center;
  }

  .the04 .the0403{}
  
  
  .the06{}
  .the06 ul{
    display: block;
    margin-top: 0;
  }
  .the06 ul li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px 0;
  }
  .the06 ul li + li{
    border-left: none;
    border-top: 4px dotted #727171;
  }
  .the06 ul li figure{
    width: calc((90 / 335) * 100%);
    max-width: 90px;
    margin: 0;
  }
  .the06 ul li dl{
    width: calc(((335 - 100) / 335) * 100%);
  }
  .the06 ul li dt{
    margin-top: 0;
    font-size: clamp(calc(14px * var(--font-markup)), calc(14vw / var(--vw-sp)), 14px);/*24 / 14*/
  }
  .the06 ul li dd{
    font-size: clamp(calc(12px * var(--font-markup)), calc(12vw / var(--vw-sp)), 12px);/*22 / 12*/
  }
}
  
  
/*保証
------------------------------------------------*/
.gua01{
  margin-bottom: 100px;
}

.gua02{
  padding: 50px 0;
  background: #222;
  color: var(--color-white);
}
.gua02 > div > div:nth-of-type(1){
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.gua02 > div > div:nth-of-type(1) > span{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 130px;
  margin: 0 20px 0 0;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-def02);
  font-size: clamp(calc(28px * var(--font-markup)), calc(28vw / var(--vw-pc)), 28px);/*28 / 17*/
  line-height: var(--line-height-narrow);
}
.gua02 > div > div:nth-of-type(1) h4{
  width: calc(100% - 150px);
  font-size: clamp(calc(42px * var(--font-markup)), calc(42vw / var(--vw-pc)), 42px);/*42 / 20*/
  text-align: left;
  line-height: var(--line-height-narrow);
  letter-spacing: normal;
}
.gua02 > div > div:nth-of-type(1) + p{
  padding: 0 0 0 160px;
}


.gua03{}
.gua03 h3 + p{
  padding: 10px 0;
  background: #222;
  color: var(--color-white);
  font-size: clamp(calc(24px * var(--font-markup)), calc(24vw / var(--vw-pc)), 24px);/*24 / 13*/
  text-align: center;
  line-height: 1.0;
}
.gua03 h4{
  margin: 20px 0;
  font-size: clamp(calc(42px * var(--font-markup)), calc(42vw / var(--vw-pc)), 42px);/*42 / 17*/
  text-align: center;
  line-height: var(--line-height-narrow);
}
.gua03 ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.gua03 ul li{
  width: calc((155 / var(--qua-cont-width-nv-pc)) * 100%);
}
.gua03 ul li figure{
  background: var(--color-white);
  border: 1px solid #222;
}
.gua03 ul li p{
  margin-top: 15px;
  line-height: var(--line-height-narrow);
}

@media screen and (max-width:767px) {
  .gua01{
    margin-bottom: 50px;
  }

  .gua02{
    padding: 20px 0;
  }
  .gua02 > div > div:nth-of-type(1){}
  .gua02 > div > div:nth-of-type(1) > span{
    width: 80px;
    height: 80px;
    margin-right: 15px;
    font-size: clamp(calc(17px * var(--font-markup)), calc(17vw / var(--vw-sp)), 17px);/*28 / 17*/
  }
  .gua02 > div > div:nth-of-type(1) h4{
    width: calc(100% - 95px);
    font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-sp)), 20px);/*42 / 20*/
  }
  .gua02 > div > div:nth-of-type(1) + p{
    margin: 20px 0 0 0;
    padding-left: 0;
  }


  .gua03{}
  .gua03 h3 + p{
    font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-sp)), 13px);/*24 / 13*/
  }
  .gua03 h4{
    font-size: clamp(calc(17px * var(--font-markup)), calc(17vw / var(--vw-sp)), 17px);/*42 / 17*/
  }
  .gua03 h4 + p{
    letter-spacing: normal;
    font-feature-settings: "palt";
  }
  .gua03 ul{}
  .gua03 ul li{
    width: calc((100% - 20px) / 3);
  }
  .gua03 ul li:nth-child(n+4){
    margin-top: 20px;
  }
  .gua03 ul li figure{}
  .gua03 ul li p{
    margin-top: 10px;
  }
}