@charset "UTF-8";
/**/
/*--eyecatch--*/
/**/
div.eyecatch{
  display: flex;
  align-items: center;

  width: 100%;
  height: 260px;

  background-image: url(../img/eyecatch-bg.jpg);
}
div.eyecatch h2{
  width: min(1120px,100%);
  padding: 0 16px;
  margin-inline: auto;

  color: var(--tc);
  font-size: 45px;
  font-weight: 700;
}
/**/
/*--intro--*/
/**/
div#intro{
  width: min(1120px,100%);
  padding: 80px 16px;
  margin-inline: auto;
  margin-bottom: 80px;

  background: #EFF9FF;
  border-image-source: linear-gradient(#EFF9FF,#EFF9FF);
  border-image-slice: 0 fill;
  border-image-outset: 0 100vw;
}
div#intro p.heading{
  margin-bottom: 24px;

  color: var(--tc);
  font-size: 35px;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
}
div#intro .content{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  column-gap: 24px;

  line-height: 2;
}
div#intro .content .text{
  padding-top: .5em;
}
.itemContainer-wrap>.title{
  padding: 0 16px;
  margin-bottom: 24px;

  font-size: 26px;
  font-weight: 700;
  text-align: center;
}
.itemContainer{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  column-gap: 24px;
  row-gap: 48px;
  width: min(1120px,100%);
  padding: 16px;
  padding-bottom: 144px;
  margin-inline: auto;
}
/*--paint-gi--*/
#paint-gi .item{
  display: grid;
  grid-template-rows: auto auto;
  column-gap: 24px;
  row-gap: 8px;
}
#paint-gi .item .number{
  font-size: 38px;
  line-height: 1;
  color: var(--tc);
}
/*--roof-replace--*/
#roof-replace .item .number{
  padding: 4px;
  font-size: 38px;
  color: var(--tc);
}
@media (min-width : 1200px){
}
@media (max-width : 1200px){
  /**/
  /*--eyecatch--*/
  /**/
  div.eyecatch{
    height: clamp(120px,20vw,260px);
  }
  div.eyecatch h2{
    padding: 0 16px;
  
    font-size: min(6vw,45px);
  }
}
@media (max-width : 599px){
  /**/
  /*--intro--*/
  /**/
  div#intro p.heading{
    font-size: min(7vw,35px);
  }
  div#intro .content{
    display: grid;
    grid-template-columns: repeat(1,1fr);
    row-gap: 24px;
  }

  .itemContainer{
    grid-template-columns: repeat(1,1fr);
  }
}