@charset "utf-8";

body {
  background-color: #f5f5f5;
}
.main-visual {
  margin: 38px 0 47px 21%;
  position: relative;
}

/* メインビュー左下のメインタイトル */
.page-title__area {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: absolute;
  bottom: -90px;
  left: -45px;
  z-index: 1;
}
.service-under__title {
  width: 168px;
  height: 71px;
  font-size: 45px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 0.5em;
  text-align: center;
  line-height: 71px;
  background-color: #63f26e;
  padding-left: 21px;
}
.service-under__title-design {
  width: 350px;
}
.service-under__title-hudousan {
  width: 237px;
}

.service-under__subtitle {
  width: 438px;
  height: 71px;
  font-size: 70px;
  color: #fff;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 71px;
  background-color: #63f26e;
}
.service-under__subtitle-design {
  width: 280px;
}
.service-under__subtitle-hudousan {
  width: 387px;
}
.service-under__subtitle-online {
  width: 407px;
}

/* メインビュー右下コンテンツ */
.main-bottom {
  max-width: calc(50% - 170px);
  padding-right: 89px;
  margin: 47px 0 262px auto;
}
.main-bottom__title {
  font-size: clamp(1.063rem, 0.938rem + 0.63vw, 1.688rem);
  /* 1920w:27px 320vw:17px */
  font-weight: bold;
  margin-bottom: 26px;
}
.main-bottom__text {
  font-size: clamp(0.938rem, 0.85rem + 0.44vw, 1.375rem);
  /* 1920w:22px 320vw:16px */
  letter-spacing: 0.1em;
  line-height: 1.45;
}
/* 各sectionの英語のタイトル */
.service-under__section--title-en {
  font-size: clamp(1rem, -0.455rem + 7.27vw, 5rem);
  letter-spacing: 0.02em;
  color: #63f26e;
}
/* 建設ページ以外のsectionのスタイル */
.service-under__section {
  padding: 0 36px;
  margin: 0 320px 140px 470px;
}
.service-under__section--inner {
  max-width: 1114px;
  margin: 0 auto;
}
.service-under__section--inner-title--ja {
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 0.1em;
  margin-bottom: 30px;
}
.service-under__section--inner-text {
  font-size: 22px;
  letter-spacing: 0.01em;
  line-height: 1.6;
  margin-bottom: 111px;
}
.more__button {
  margin-top: 64px;
}

@media (max-width: 1260px) {
  .header {
    z-index: 99;
  }
  .main-visual {
    height: 450px;
    margin: 38px 0 47px 28%;
    position: relative;
  }
  .service-under__slider-img {
    height: 450px;
    object-fit: cover;
    object-position: center;
  }
  /* メインビュー左下のメインタイトル */
  .page-title__area {
    left: -13px;
  }
  .service-under__title {
    width: 140px;
    height: 64px;
    font-size: 38px;
    line-height: 64px;
  }
  .service-under__title-design {
    width: 258px;
  }
  .service-under__subtitle {
    width: 316px;
    height: 64px;
    font-size: 50px;
    line-height: 64px;
  }
  .service-under__subtitle-design {
    width: 242px;
  }
  .service-under__title-hudousan {
    width: 237px;
  }

  /* メインビュー右下コンテンツ */
  .main-bottom {
    max-width: 50%;
    padding-right: 89px;
    margin: 123px 0 200px auto;
  }
  /* 各sectionの英語のタイトル */
  .service-under__section--title-en {
    font-size: clamp(1rem, -0.455rem + 7.27vw, 5rem);
    letter-spacing: 0.02em;
    color: #63f26e;
  }
  /* 建設ページ以外のsectionのスタイル */
  .service-under__section {
    margin: 0 100px 140px 28%;
  }
  .service-under__section--inner-title--ja {
    font-size: 22px;
    margin-bottom: 30px;
  }
  .service-under__section--inner-text {
    font-size: 18px;
    margin-bottom: 80px;
  }
}

@media (max-width: 767px) {
  .main-visual {
    height: 250px;
    margin: 74px 0 47px 0;
  }
  .service-under__slider-img {
    width: 100%;
    height: 250px;
    object-position: center;
  }
  /* メインビュー左下のメインタイトル */
  .page-title__area {
    left: 0;
    bottom: -43px;
    gap: 7px;
  }
  .service-under__title {
    width: 83px;
    height: 34px;
    font-size: 22px;
    line-height: 34px;
    padding-left: 10px;
  }
  .service-under__title-design {
    width: 133px;
    font-size: 21px;
    letter-spacing: 0.3em;
  }
  .service-under__title-hudousan {
    width: 113px;
    font-size: 21px;
  }
  .service-under__subtitle {
    width: auto;
    height: 34px;
    font-size: 33px;
    text-align: left;
    line-height: 34px;
    padding: 0 19px 0 13px;
  }

  /* メインビュー右下コンテンツ */
  .main-bottom {
    max-width: 100%;
    padding: 0 10%;
    margin: 92px auto 56px auto;
  }
  .main-bottom__title {
    font-size: 17px;
    margin-bottom: 14px;
  }
  .main-bottom__text {
    font-size: 15px;
    letter-spacing: 0.03em;
    line-height: 1.45;
  }
  /* 各sectionの英語のタイトル */
  .service-under__section--title-en {
    font-size: 42px;
  }
  /* 建設ページ以外のsectionのスタイル */
  .service-under__section {
    padding: 0;
    margin: 0 10% 140px 10%;
  }
  .service-under__section--inner-title--ja {
    font-size: 16px;
    margin-bottom: 22px;
  }
  .service-under__section--inner-text {
    font-size: 14px;
    margin-bottom: 46px;
  }
}