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

#gcoat .h3Tit{
  background: #222222;
  color: #fff;
  font-size: 40px;
  padding: .6em;
  text-align: center;
  margin-bottom: 45px;
}

#aboutGcoat h4{
  font-size: 34px;
  color: #923636;
  border-bottom: 4px solid #923636;
  padding-bottom: .4em;
  margin-bottom: 1em
}
#aboutGcoat .pcFlex{
  margin-bottom: 30px
}
#aboutGcoat .txts{
  max-width: 580px
}
#aboutGcoat .txts p{
  font-size: 18px;
  margin-bottom: 1em;
  padding-right: 70px
}

#aboutGcoat figure{
  max-width: 520px
}


#aboutGcoat .beforeAndAfter figure {
  width: 46%;
  max-width: 506px;
}

#aboutGcoat .beforeAndAfter figure:first-child::before {
  position: absolute;
  right: -9%;
  top: calc(50% - 23px);
  display: block;
  width: 20px;
  height: 46px;
  content: '';
  background: #b18d2c;
}

#aboutGcoat .beforeAndAfter figure:first-child::after {
  position: absolute;
  right: -13.8%;
  top: calc(50% - 30px);
  display: block;
  width: 28px;
  height: 60px;
  content: '';
  background: #b18d2c;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}



#gcoatImprovementImage .beforeAndAfter{
  margin-bottom: 28px;
}
#gcoatImprovementImage .beforeAndAfter figure {
  width: 42%;
  max-width: 462px;
}

#gcoatImprovementImage .beforeAndAfter figure:first-child::before {
  position: absolute;
  right: -20%;
  top: calc(50% - 23px);
  display: block;
  width: 20px;
  height: 46px;
  content: '';
  background: #b18d2c;
}

#gcoatImprovementImage .beforeAndAfter figure:first-child::after {
  position: absolute;
  right: -26%;
  top: calc(50% - 30px);
  display: block;
  width: 28px;
  height: 60px;
  content: '';
  background: #b18d2c;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

#gcoatLineup{
  font-size: 24px;
  color: #923636;
  border-bottom: 2px solid #923636;
  padding-bottom: .4em;
  margin-bottom: 1em
}

#gcoatImprovementImage table{
  
}


#gcoatImprovementImage table tbody th{
  text-align: center;
}

#gcoatImprovementImage table tbody th.bgGray{
  color: #222;
  border-right: 1px solid #222;
  border-bottom: 1px solid #222
}


#gcoatImprovementImage table tbody th.lowGloss{
  background: #5f0000;
  font-size: 20px;
  padding: .46em;
  border-left: 1px solid #fff;
}

#gcoatImprovementImage table tbody th.highGloss{
  background: #9d1e1e;
  font-size: 20px;
  padding: .6em;
  border-left: 1px solid #fff;
}

#gcoatImprovementImage table tbody td{
   border-bottom: 1px solid #222;
     border-right: 1px solid #222;
  text-align: center
}


@media screen and (max-width: 768px) {
  #gcoat main section {
  padding: 50px 0;
}
  #gcoat .h3Tit{
  font-size: 26px;
  }
  #aboutGcoat h4 {
  font-size: 24px;
  }
  #aboutGcoat .txts p {
  font-size: 16px;
  padding-right: 0;
}
  #aboutGcoat .beforeAndAfter figure,
  #gcoatImprovementImage .beforeAndAfter figure{
  width: 100%;
}
  #aboutGcoat .beforeAndAfter figure:first-child,
  #gcoatImprovementImage .beforeAndAfter figure:first-child{
    margin-bottom: 50px
  }
  
  #aboutGcoat .beforeAndAfter figure:first-child::before,
  #gcoatImprovementImage .beforeAndAfter figure:first-child::before{
  right: calc(50% - 23px);
  bottom:   -25px;
  top: initial;
  display: block;
  width: 46px;
  height: 15px;
  content: '';
}

#aboutGcoat .beforeAndAfter figure:first-child::after,
  #gcoatImprovementImage .beforeAndAfter figure:first-child::after{
  right: calc(50% - 30px);
   bottom:   -45px;
  top: initial;
  display: block;
  width: 60px;
  height: 20px;
  content: '';
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
  #gcoatLineup{
    font-size: 20px;
  }
  #gcoatImprovementImage table tbody th.lowGloss,
  #gcoatImprovementImage table tbody th.highGloss{
    font-size: 15px;
    white-space: nowrap
  }
  
}