@charset "utf-8";

/*================================================
    ↓↓↓　main上部　紹介文　↓↓↓
=================================================*/
.foreword {
  font-size: 1.15rem;
  max-width: 1150px;
  padding: 0 20px;
  margin: 0 auto 180px auto;
}
.foreword-contents {
  line-height: 2em;
}
.jump {
  color: #0719a3;
}
.jump:hover {
  color: #7c6c03;
}

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

/*================================================
      ↓↓↓　section共通　↓↓↓
  =================================================*/
.section-wrapper {
  max-width: 1150px;
  padding: 0 20px;
  margin: 0 auto 120px auto;
}

@media screen and (max-width: 767px) {
  .section-wrapper {
    margin-bottom: 80px;
  }
}

/*======  titleが左の時のスタイル  ======*/
.section-heading {
  font-weight: bold;
  font-size: 24px;
  color: #fff;
  letter-spacing: 0.3em;
  line-height: 70px;
  width: 60%;
  height: 70px;
  background-color: #0071bc;
  position: relative;
  padding-left: 2em;
  margin-bottom: 50px;
}
.section-heading::after {
  width: 100%;
  height: 100%;
  background-color: #73a5c6;
  position: absolute;
  content: "";
  top: 0;
  left: 5px;
  z-index: -1;
  transform: rotate(-2deg);
}
.section-container {
  display: flex;
  justify-content: space-between;
}

.section-inner1 {
  width: 50%;
  line-height: 1.6em;
  overflow: hidden;
  position: relative;
  padding: 0 30px 50px 30px;
}
.section-inner1_text {
  padding-bottom: 10px;
}
.section-inner2 {
  width: 50%;
  border: 3px dotted #0071bc;
  border-radius: 10px;
  background-color: #fff;
  padding: 15px;
  position: relative;
  margin-bottom: 50px;
}
.js-fade {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  transition: opacity 1.5s, visibility 1.5s, transform 1.5s;
}
.scroll {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}
.section-inner-title {
  font-size: 1.6rem;
  letter-spacing: 0.7em;
  text-align: center;
  margin-bottom: 15px;
}
.section-inner2-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 20px;
}
.check-inner {
  width: 45%;
}
figcaption {
  font-size: 14px;
  text-align: center;
  margin-top: 7px;
}

/*======  titleが右の時のスマホスタイル  ======*/
@media screen and (max-width: 767px) {
  .section-heading {
    line-height: 50px;
    width: 80%;
    height: 50px;
    margin-bottom: 30px;
  }
  .section-container {
    flex-direction: column;
  }
  .section-inner1 {
    width: 100%;
    padding: 0;
    padding-bottom: 35px;
  }
  .section-inner2 {
    width: 100%;
    margin-bottom: 30px;
  }
  .section-inner-title {
    font-size: 1.4rem;
  }
  figcaption {
    font-size: 12px;
  }
}

/*======  titleが右の時のスタイル  ======*/
.section-heading2 {
  margin-left: auto;
}
.section-container2 {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
}

@media screen and (max-width: 767px) {
  .section-container2 {
    flex-direction: column;
  }
}

/*======  各sectionの疑似要素のスタイル  ======*/
.wall-bg::after {
  content: "WALL";
  font-size: 190px;
  font-weight: 700;
  color: #faf2f2;
  left: 50%;
  bottom: 100px;
  position: absolute;
  transform: translateX(-50%) rotate(-8deg);
  z-index: -1;
}
.roof-bg::after {
  content: "ROOF";
  font-size: 200px;
  font-weight: 700;
  color: #faf2f2;
  left: 50%;
  bottom: 100px;
  position: absolute;
  transform: translateX(-50%) rotate(-8deg);
  z-index: -1;
}
.iron-bg::after {
  content: "IRON";
  font-size: 220px;
  font-weight: 700;
  color: #faf2f2;
  left: 50%;
  bottom: 100px;
  position: absolute;
  transform: translateX(-50%) rotate(-8deg);
  z-index: -1;
}
.waterproof-bg::before {
  content: "WATER";
  font-size: 130px;
  font-weight: 700;
  color: #faf2f2;
  left: 30px;
  bottom: 168px;
  position: absolute;
  transform: rotate(-8deg);
  z-index: -1;
}
.waterproof-bg::after {
  content: "PROOF";
  font-size: 130px;
  font-weight: 700;
  color: #faf2f2;
  right: -6px;
  bottom: 75px;
  position: absolute;
  transform: rotate(-8deg);
  z-index: -1;
}
.indoor-bg::before {
  content: "IN-";
  font-size: 200px;
  font-weight: 700;
  color: #faf2f2;
  left: 30px;
  bottom: 238px;
  position: absolute;
  transform: rotate(-8deg);
  z-index: -1;
}
.indoor-bg::after {
  content: "DOOR";
  font-size: 200px;
  font-weight: 700;
  color: #faf2f2;
  right: -46px;
  bottom: 95px;
  position: absolute;
  transform: rotate(-8deg);
  z-index: -1;
}
.other-bg::after {
  content: "OTHER";
  font-size: 172px;
  font-weight: 700;
  color: #faf2f2;
  left: 50%;
  bottom: 204px;
  position: absolute;
  transform: translateX(-50%) rotate(-8deg);
  z-index: -1;
}

@media screen and (max-width: 767px) {
  .wall-bg::after {
    font-size: 125px;
    bottom: 57px;
  }
  .roof-bg::after {
    font-size: 130px;
  }
  .iron-bg::after {
    font-size: 155px;
  }
  .waterproof-bg::before {
    font-size: 100px;
    bottom: 187px;
  }
  .waterproof-bg::after {
    font-size: 100px;
    right: 32px;
    bottom: 47px;
  }
  .indoor-bg::before {
    font-size: 130px;
    bottom: 160px;
  }
  .indoor-bg::after {
    font-size: 130px;
    right: 9px;
    bottom: 46px;
  }
  .other-bg::after {
    font-size: 110px;
    bottom: 36px;
  }
}

/*======  section下部（外壁・屋根・鉄部　共通）  ======*/
.section-under {
  border: 3px solid #333;
  text-align: center;
  background-color: #fff;
  padding-top: 20px;
}
.section-under-wrapper {
  max-width: 1150px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 50px;
}
.section-under-heading {
  font-size: 2.25rem;
  border-bottom: 1px solid #333;
  display: inline-block;
}
.section-under-container {
  width: 120px;
  height: 150px;
  text-align: center;
  background-color: #b9b9b9;
  padding: 30px 10px;
}
.section-under-text {
  padding-top: 30px;
}
.arrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 20px 34.6px;
  border-color: transparent transparent transparent #b3b3b3;
}
.arrow2 {
  border-color: transparent transparent transparent #999;
}
.arrow3 {
  border-color: transparent transparent transparent #808080;
}
.arrow4 {
  border-color: transparent transparent transparent #666;
}
.arrow5 {
  border-color: transparent transparent transparent #4c4c4c;
}

@media screen and (max-width: 767px) {
  .section-under-wrapper {
    flex-direction: column;
  }
  .section-under-container {
    width: 100%;
    height: 50px;
    background-color: #b9b9b9;
    align-items: center;
    display: flex;
    padding: 0 10px;
    margin: 5px 0;
  }
  .section-under-title {
    width: 30%;
    text-align: right;
  }
  .section-under-text {
    width: 70%;
    padding: 0;
  }
  .arrow {
    border-width: 34.6px 20px 0 20px;
    border-color: #b3b3b3 transparent transparent transparent;
  }
  .arrow2 {
    border-color: #999 transparent transparent transparent;
  }
  .arrow3 {
    border-color: #808080 transparent transparent transparent;
  }
  .arrow4 {
    border-color: #666 transparent transparent transparent;
  }
  .arrow5 {
    border-color: #4c4c4c transparent transparent transparent;
  }
}

/*======  section下部（防水工事の表）  ======*/
table {
  width: 100%;
  border-collapse: collapse;
  caption-side: bottom;
}
caption {
  font-size: 0.75rem;
  text-align: right;
  margin-top: 10px;
}
table th,
table td {
  text-align: center;
  border: 1px solid #333;
  padding: 15px;
}

/*======  section横の大きなタイトル  ======
.side-title1::before {
  color: #f3f2f2;
  font-size: 230px;
  font-weight: 700;
  position: absolute;
  content: "WALL";
  top: 100px;
  right: -380px;
  transform: rotate(90deg);
  z-index: -1;
}
.side-title2::before {
  color: #f3f2f2;
  font-size: 230px;
  font-weight: 700;
  position: absolute;
  content: "ROOF";
  top: 100px;
  left: -390px;
  transform: rotate(90deg);
  z-index: -1;
}
.side-title3::before {
  color: #f3f2f2;
  font-size: 230px;
  font-weight: 700;
  position: absolute;
  content: "IRON";
  top: 100px;
  right: -355px;
  transform: rotate(90deg);
  z-index: -1;
}
.side-title4::before {
  color: #f3f2f2;
  font-size: 230px;
  font-weight: 700;
  position: absolute;
  content: "WATERPROOF";
  top: 400px;
  left: -840px;
  transform: rotate(90deg);
  z-index: -1;
}
.side-title5::before {
  color: #f3f2f2;
  font-size: 230px;
  font-weight: 700;
  position: absolute;
  content: "INDOOR";
  top: 130px;
  right: -510px;
  transform: rotate(90deg);
  z-index: -1;
}
.side-title6::before {
  color: #f3f2f2;
  font-size: 230px;
  font-weight: 700;
  position: absolute;
  content: "OTHER";
  top: 100px;
  left: -460px;
  transform: rotate(90deg);
  z-index: -1;
}
*/
/*======  section横の大きなタイトル(sp-display-none)  ======*/
@media screen and (max-width: 767px) {
  .side-title1::before,
  .side-title2::before,
  .side-title3::before,
  .side-title4::before,
  .side-title5::before,
  .side-title6::before {
    display: none;
  }
}