@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;
}
.cap{
	font-size: 10px;
	line-height: 1.6;
	letter-spacing: normal;
}
.cap02{
	font-size: 12px;
	line-height: 1.6;
	letter-spacing: normal;
}
.cap.-type01{
  position: absolute !important;
  right: 5px;
  bottom: 2px;
}
.cap.-type02{
  position: absolute !important;
  right: 10px;
  bottom: 2px;
}
.cap.-type03{
  position: absolute !important;
  left: 5px;
  bottom: 2px;
}

@media screen and (max-width:767px) {
/*キャプション*/
	.caption{
		padding: 15px 0;
	}
	.cap{}
  
  .cap02{
    font-size: 11px;
  }
  .cap.-type01{
    right: 2px
  }
  .cap.-type02{
    right: 4px;
  }
}

@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;
  margin: 50px 0 0 0;
}
.lNav li{
  width: calc((190 / var(--cont-width-nv-pc)) * 100%);
  font-size: clamp(calc(24px * var(--font-markup)), calc(24vw / var(--vw-pc)), 24px);/*24 / 15*/
}
.lNav li a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 15px 0;
  border: 1px solid var(--color-key02);
  color: var(--color-key02);
  text-decoration: none;
}
.lNav li a:hover{
  background: var(--color-key02);
  color: var(--color-white);
  opacity: 1;
}
.lNav li.current a{
  background: var(--color-key02);
  color: var(--color-white);
}

.quaPageTtl{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 80px 0 40px 0;
  text-align: center;
}
/*.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{
  padding-left: 0.05em;
  font-size: clamp(calc(46px * var(--font-markup)), calc(46vw / var(--vw-pc)), 46px);/*46 / 32*/
  letter-spacing: 0.05em;
}
.quaPageTtl .fEn{
  padding-left: 0.05em;
  font-size: clamp(calc(22px * var(--font-markup)), calc(22vw / var(--vw-pc)), 22px);/*22 / 18*/
  letter-spacing: 0.05em;
}

.quaHero{
  position: relative;
}
.quaHero > div{
  position: absolute;
  left: 50%;
  top: 7%;
  width: 100% !important;
  transform: translate(-50%,0);
  height: 100%;
}
.quaHero > div > div{
  display: flex;
  /*justify-content: center;*/
  align-items: center;
  width: 50%;
  height: 100%;
}
.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;
  height: 100%;
}
.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(28px * var(--font-markup)), calc(28vw / var(--vw-pc)), 28px);/*28 / 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(28px * var(--font-markup)), calc(28vw / var(--vw-pc)), 28px);/*28 / 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(42px * var(--font-markup)), calc(42vw / var(--vw-pc)), 42px);/*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(28px * var(--font-markup)), calc(28vw / var(--vw-pc)), 28px);/*28 / 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(24px * var(--font-markup)), calc(24vw / var(--vw-pc)), 24px);/*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;
    gap: 10px;
  }
  /*.lNav::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 100%;
    height: 1px;
    background: #7d7d7d;
    transform: translate(-50%,0);
  }*/
  .lNav li{
    width: calc((100% - (10px * 2)) / 3);
    font-size: clamp(calc(16px * var(--font-markup)), calc(16vw / var(--vw-sp)), 16px);/*24 / 16*/
  }
  .lNav li a{}
  .lNav li a:hover{}
  .lNav li.current a{}
  
  .quaPageTtl{
    margin: 60px 0 30px 0;
  }
  .quaPageTtl::after{
    bottom: 52%;
  }
  .quaPageTtl span{}
  .quaPageTtl .fJa{
    font-size: clamp(calc(32px * var(--font-markup)), calc(32vw / var(--vw-sp)), 32px);/*46 / 32*/
  }
  .quaPageTtl .fEn{
    font-size: clamp(calc(18px * var(--font-markup)), calc(18vw / var(--vw-sp)), 18px);/*22 / 18*/
  }

  .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((26 / 20) * 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(20px * var(--font-markup)), calc(22vw / var(--vw-pc)), 20px);/*20 / 11*/
  line-height: 1.0;
}
.ear01 ul li strong{
  margin: 0 10px -5px 10px;
  font-size: clamp(calc(66px * var(--font-markup)), calc(66vw / var(--vw-pc)), 66px);/*66 / 40*/
  font-weight: 400;
  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;
  align-items: flex-start;
}
.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: #3e3a39;
  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%);*/
  width: calc((520 / 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-def01);
  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;
  padding: 0 0 0 1.2em;
}
/*.fir05 .calc li::before*/
.fir05 .calc div:last-of-type ul 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*/
  .fir05 .calc div:last-of-type ul li::before{
    width: 12px;
    height: 12px;
  }

}


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

.ls30{
  padding: 50px 0;
  background: #f5f1df;
}
.ls30 > div{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 700px;
  margin: 0 auto;
}
.ls30 > div figure{
  width: calc((250 / 700) * 100%);
}
.ls30 > div h3{
  width: calc((400 / 700) * 100%);
  font-size: clamp(calc(42px * var(--font-markup)), calc(42vw / var(--vw-pc)), 42px);/*42 / 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(18px * var(--font-markup)), calc(18vw / var(--vw-pc)), 18px);/*18 / 13*/
  line-height: var(--line-height-narrow);
  text-align: left;
  letter-spacing: 0.05em;
}

.dur02{}
.dur02 section{}
.dur02 section h5{
  position: relative;
  margin: 0 0 70px 0;
  padding: 0 0 10px 130px;
  font-size: clamp(calc(46px * var(--font-markup)), calc(46vw / var(--vw-pc)), 46px);/*46 / 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-def01);
}
.dur02 section h5 span{
  position: absolute;
  left: 0;
  bottom: -30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  padding-left: 0.1em;
  border-radius: 50%;
  background: var(--color-def01);
  color: var(--color-white);
  font-size: clamp(calc(24px * var(--font-markup)), calc(24vw / var(--vw-pc)), 24px);/*24 / 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(40px * var(--font-markup)), calc(40vw / var(--vw-pc)), 40px);/*40 / 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%;
}


.dur02 section h5 i{
  margin: 0 0.5em 0 0;
  font-style: normal;
  font-size: calc((36 / 46) * 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(20px * var(--font-markup)), calc(20vw / var(--vw-sp)), 20px);/*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{}
  
  .dur02 section h5 i{
    display: block;
    margin: 0 auto;;
  }

}



/*str02*/
.dur02 .str02{}

.dur02 .str02 .conts .tit{
  width: 80px;
  height: 80px;
  line-height: 80px;
  margin: 0;
  border-radius: 50%;
  background: #73655e;
  color: #fff;
  font-size: 25px;
  text-align: center;
  font-weight: normal;
}
.dur02 .str02 .conts{
  width: calc((800 / 1055) * 100%);
  margin-top: -20px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}
.dur02 .str02 .conts .midashi{
  font-size: 20px;
  line-height: 1.4;
  margin-bottom: 10px;
  text-align: left;
}
.dur02 .str02 .conts .t1{
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
}
.dur02 .str02 .conts .komi{
  padding: 0.4em;
  background: #111111;
  color: #fff;
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 10px;
  text-align: center;
}
.dur02 .str02 .conts .t2{
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
  letter-spacing: normal;
}
.dur02 .str02 .conts ul{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 40px;
  margin-bottom: 50px;
}
.dur02 .str02 .conts ul li{
  width: 46%;
}
.dur02 .str02 .conts ul.ls li:nth-child(1){
  width: 52%;
}
.dur02 .str02 .conts ul.ls li:nth-child(2){
  width: 36%;
}
.dur02 .str02 .conts .roof{
  max-width: 423px;
  width: 90%;
  margin: 0 auto 30px;
}
@media print, screen and (max-width:767px) {
  .dur02 .str02{}
  .dur02 .str02 .conts .tit{
    margin: 0 auto 30px;
  }
  .dur02 .str02 .conts{
    display: block;
    width: 100%;
    margin-top: 0;
    margin-left: 0;
  }
  .dur02 .str02 .conts .midashi{
    font-size: 18px;
  }
  .dur02 .str02 .conts ul{
    display: block;
    margin-bottom: 20px;
  }
  .dur02 .str02 .conts ul li{
    width: 100%;
    margin-bottom: 20px;
  }
  .dur02 .str02 .conts ul.ls li:nth-child(1){
    width: 100%;
  }
  .dur02 .str02 .conts ul.ls li:nth-child(2){
    width: 100%;
  }
  .dur02 .str02 .conts .roof{
    margin: 0 auto 20px;
  }
}





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

.the02{
  padding: 40px 0;
  background: #f5f1df;
}
.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: #f5f1df;
}
.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(36px * var(--font-markup)), calc(36vw / var(--vw-pc)), 36px);/*36 / 18*/
  font-weight: 400;
  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: var(--color-def01);
  font-size: clamp(calc(60px * var(--font-markup)), calc(60vw / var(--vw-pc)), 60px);/*60 / 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(20px * var(--font-markup)), calc(20vw / var(--vw-pc)), 20px);/*22 / 12*/
  line-height: 1.6;
  text-align: left;
}

@media screen and (max-width:767px) {
  .the01{
    /*margin-bottom: 50px;*/
  }
  
  .the02{
    padding: 30px 0;
  }
  .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: #595757;
  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-def01);
  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(40px * var(--font-markup)), calc(40vw / var(--vw-pc)), 40px);/*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(38px * var(--font-markup)), calc(38vw / var(--vw-pc)), 38px);/*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%);*/
  width: calc((160 / 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;
  }
}




/*マルチバランス*/
.mbWrap .mb01{
  padding: 80px 0;
  background: var(--color-def01);
  color: var(--color-white);
}
.mbWrap .mb01 > div{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mbWrap .mb01 > div .txt{
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: calc((400 / var(--cont-width-nv-pc)) * 100%);
  text-align: left;
}
.mbWrap .mb01 > div figure{  
  width: calc((512 / var(--cont-width-nv-pc)) * 100%);
}

.mbWrap .mbUnit{
  padding: 40px 0;
  background: #f5f3f2;
}
.mbWrap .mbUnitH{
  display: flex;
  gap: 0 calc((30 / var(--cont-width-nv-pc)) * 100%);
  padding-left: calc((30 / var(--cont-width-nv-pc)) * 100%);
  color: #235924;
  text-align: left;
}
.mbWrap .mbUnitH p{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  background: #235924;
  border-radius: 50%;
  color: var(--color-white);
  font-size: clamp(calc(30px * var(--font-markup)), calc(30vw / var(--vw-pc)), 30px);/*30 / 22*/
}
.mbWrap .mbUnitH .copy01{
  margin-bottom: 0;
}

.mbWrap .mbUnitB{
  display: flex;
  justify-content: flex-end;
}
.mbWrap .mbUnitB > div{
  padding: 0 calc((40 / var(--cont-width-nv-pc)) * 100%);
  text-align: left;
}
.mbWrap .mbUnitB > div:nth-of-type(1){
  width: calc((455 / var(--cont-width-nv-pc)) * 100%);
}
.mbWrap .mbUnitB > div:nth-of-type(2){
  width: calc((410 / var(--cont-width-nv-pc)) * 100%);
  border-left: 1px solid var(--color-def01);
}

.mbWrap .mbUnitB > div > figure{
  margin-top: 30px;
}


.mbWrap .mbUnit.mbRank{
  padding: 80px calc((100 / var(--cont-width-nv-pc)) * 100%);
}
.mbWrap .mbUnit.mbRank .mbUnitH{
  justify-content: center;
}
.mbWrap .mbUnit.mbRank .mbUnitH .copy01{
  width: 100%;
  letter-spacing: 0.05em;
  text-align: center;
}

.mbWrap .mbUnit.mbRank .mbUnitB{
  display: block;
  margin-top: 40px;
}
.mbWrap .mbUnit.mbRank .mbUnitB  > div{
  display: block;
  width: 100%;
  padding: 0;
}
.mbWrap .mbUnit.mbRank .mbUnitB  > ol{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 25px;
}
.mbWrap .mbUnit.mbRank .mbUnitB  > ol li{
  width: calc((240 / 790) * 100%);
  padding: 15px 2%;
  background: var(--color-white);
  border-style: solid;
  border-width: 1px;
  border-color: #928178;
}
.mbWrap .mbUnit.mbRank .mbUnitB  > ol li .t01{
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: clamp(calc(18px * var(--font-markup)), calc(18vw / var(--vw-pc)), 18px);/*18 / 16*/
  text-align: center;
}
.mbWrap .mbUnit.mbRank .mbUnitB  > ol li .t01 strong{
  margin: 0 0 0 0.2em;
  font-size: calc((36 / 18) * 100%);
  font-weight: 400;
}
.mbWrap .mbUnit.mbRank .mbUnitB  > ol li .t02{
  margin: 10px 0 0 0;
  font-size: clamp(calc(14px * var(--font-markup)), calc(14vw / var(--vw-pc)), 14px);/*14 / 13*/
  line-height: var(--line-height);
  text-align: left;
}
.mbWrap .mbUnit.mbRank .mbUnitB  > ol li .t02 strong{
  color: #b6002a;
  font-weight: 400;
}

.mbWrap .mbUnit.mbRank .mbUnitB  > ol li:nth-of-type(1) .t01{
  padding: 5px;
  background: #a89990;
}

.mbWrap .mbUnit.mbRank .mbUnitB  > ol li:nth-of-type(2) .t01{
  padding: 7px;
  background: #675952;
}

.mbWrap .mbUnit.mbRank .mbUnitB  > ol li:nth-of-type(3) .t01{
  padding: 10px;
  background: #93293c;
  font-size: clamp(calc(26px * var(--font-markup)), calc(26vw / var(--vw-pc)), 26px);/*26 / 20*/
}
.mbWrap .mbUnit.mbRank .mbUnitB  > ol li:nth-of-type(3) .t02{
  font-size: clamp(calc(16px * var(--font-markup)), calc(16vw / var(--vw-pc)), 16px);/*16 / 15*/
}

@media screen and (max-width:767px) {
  /*マルチバランス*/
  .mbWrap .mb01{
    padding: 20px 0;
  }
  .mbWrap .mb01 > div{
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    gap: 20px;
  }
  .mbWrap .mb01 > div .txt{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
  }
  .mbWrap .mb01 > div figure{  
    width: 100%;
  }

  .mbWrap .mbUnit{
    padding: 30px 0;
  }
  .mbWrap .mbUnitH{
    align-items: center;
    gap: 0 10px;
    padding-left: calc((30 / var(--cont-width-nv-pc)) * 100%);
  }
  .mbWrap .mbUnitH p{
    width: 70px;
    height: 70px;
    font-size: clamp(calc(22px * var(--font-markup)), calc(22vw / var(--vw-sp)), 22px);/*30 / 22*/
  }
  .mbWrap .mbUnitH .copy01{
    width: calc(100% - 80px);
    font-size: clamp(calc(16px * var(--font-markup)), calc(16vw / var(--vw-sp)), 16px);/*18 / 16*/
  }

  .mbWrap .mbUnitB{
    flex-direction: column;
    justify-content: unset;
    gap: 0;
  }
  .mbWrap .mbUnitB > div{
    margin: 20px auto 0 auto;
    text-align: left;
  }
  .mbWrap .mbUnitB > div:nth-of-type(1){
    width: 90%;
  }
  .mbWrap .mbUnitB > div:nth-of-type(2){
    width: 90%;
    padding: 30px 0 0 0;
    border-top: 1px solid var(--color-def01);
    border-left: none;
  }

  .mbWrap .mbUnitB > div > figure{
    margin-top: 30px;
  }
  
  
  .mbWrap .mbUnit.mbRank{
    padding: 30px 20px;
  }
  .mbWrap .mbUnit.mbRank .mbUnitH{}
  .mbWrap .mbUnit.mbRank .mbUnitH .copy01{}

  .mbWrap .mbUnit.mbRank .mbUnitB{
    margin-top: 20px;
  }
  .mbWrap .mbUnit.mbRank .mbUnitB  > div{}
  .mbWrap .mbUnit.mbRank .mbUnitB  > ol{
    flex-direction: column;
    align-items: unset;
    justify-content: unsetn;
    gap: 10px;
    margin-top: 20px;
  }
  .mbWrap .mbUnit.mbRank .mbUnitB  > ol li{
    width: 100%;
    padding: 10px;
  }
  .mbWrap .mbUnit.mbRank .mbUnitB  > ol li .t01{
    font-size: clamp(calc(16px * var(--font-markup)), calc(16vw / var(--vw-sp)), 16px);/*18 / 16*/
  }
  .mbWrap .mbUnit.mbRank .mbUnitB  > ol li .t01 strong{}
  .mbWrap .mbUnit.mbRank .mbUnitB  > ol li .t02{
    font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-sp)), 13px);/*14 / 13*/
  }
  .mbWrap .mbUnit.mbRank .mbUnitB  > ol li .t02 strong{}

  .mbWrap .mbUnit.mbRank .mbUnitB  > ol li:nth-of-type(1) .t01{}

  .mbWrap .mbUnit.mbRank .mbUnitB  > ol li:nth-of-type(2) .t01{}

  .mbWrap .mbUnit.mbRank .mbUnitB  > ol li:nth-of-type(3) .t01{
    font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-sp)), 20px);/*26 / 20*/
  }
  .mbWrap .mbUnit.mbRank .mbUnitB  > ol li:nth-of-type(3) .t02{
    font-size: clamp(calc(15px * var(--font-markup)), calc(15vw / var(--vw-sp)), 15px);/*16 / 15*/
  }
  
}


/*タブ*/

.tab-list{
  display: flex;
  justify-content: center;
  gap: 0 calc((30 / var(--cont-width-nv-pc)) * 100%);
}
.tab-list .tab-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc((470 / var(--cont-width-nv-pc)) * 100%);
  max-width: 470px;
  padding: 20px 45px;
  border: 1px solid #595757;
  border-radius: 200px;
  color: #595757;
  text-align: left;
  transition: var(--transition-duration01);
}

.tab-list .tab-item > div p:nth-of-type(1){
  font-size: clamp(calc(28px * var(--font-markup)), calc(28vw / var(--vw-pc)), 28px);/*28 / 20*/
}
.tab-list .tab-item > div p:nth-of-type(2){
  margin: 10px 0 0 0;
  font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-pc)), 20px);/*20 / 16*/
}
.tab-list .tab-item > i{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid #595757;
  border-radius: 50%;
  transition: var(--transition-duration01);
}
.tab-list .tab-item > i::after{
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-top: 2px;
  border-top: 10px solid #595757;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: none;
}


.tab-list .tab-item.active{
  background: #595757;
  color: var(--color-white);
}
.tab-list .tab-item.active > i{
  background: #595757;
  border-color: var(--color-white);
}
.tab-list .tab-item.active > i::after{
  border-top-color: var(--color-white);
}
@media screen and (min-width:768px) {
  .tab-list .tab-item:hover{
    cursor: pointer;
    background: #595757;
    color: var(--color-white);
  }
  .tab-list .tab-item:hover > i{
    background: #595757;
    border-color: var(--color-white);
  }
  .tab-list .tab-item:hover > i::after{
    border-top-color: var(--color-white);
  }
}


.tab-content{
  margin: 70px 0 0 0;
}
.tab-panel {
  /*display: none;*/
  opacity: 0;
  visibility: hidden;
  height: 0;
  transition: opacity var(--transition-duration02) ease;
}
.tab-panel.active {
  /*display: block;*/
  opacity: 1;
  visibility: visible;
  height: auto;
}

@media screen and (max-width:767px) {
  .tab-list{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px 0;
  }
  .tab-list .tab-item{
    width: 90%;
    padding: 15px 30px;
  }

  .tab-list .tab-item > div p:nth-of-type(1){
    font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-sp)), 20px);/*28 / 20*/
  }
  .tab-list .tab-item > div p:nth-of-type(2){
    font-size: clamp(calc(16px * var(--font-markup)), calc(16vw / var(--vw-sp)), 16px);/*20 / 16*/
  }
  .tab-list .tab-item > i{
    width: 20px;
    height: 20px;
  }
  .tab-list .tab-item > i::after{
    margin-top: 2px;
    border-top: 6px solid #595757;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
  }


  .tab-list .tab-item.active{}
  .tab-list .tab-item.active > i{}
  .tab-list .tab-item.active > i::after{}
  
  .tab-list .tab-item:active{
    background: #595757;
    color: var(--color-white);
  }
  .tab-list .tab-item:active > i{
    background: #595757;
    border-color: var(--color-white);
  }
  .tab-list .tab-item:active > i::after{
    border-top-color: var(--color-white);
  }
  
  .tab-content{
    margin-top: 40px;
  }
  .tab-panel {}
  .tab-panel.active {}
}