@charset "UTF-8";
.main {
  overflow: hidden;
}

.section-wrap {
  background-image: url(../images/top_fv_bg.png);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  padding-bottom: 60px;
  padding-top: 220px;
}

.fv {
  padding-inline: 20px;
}

.fv__contents {
  margin-inline: auto;
  max-width: 600px;
  position: relative;
}

.fv__content__title {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.72;
}

.fv__content__desc {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fv__content:nth-of-type(1) .fv__content__desc {
  margin-top: 20px;
}
.fv__content:nth-of-type(2) .fv__content__img {
  aspect-ratio: 508/400;
  max-width: 276px;
  position: absolute;
  right: 0;
  top: -150px;
  width: 50%;
}
.fv__content:nth-of-type(3) .fv__content__img {
  aspect-ratio: 474/325;
  margin-left: auto;
  margin-top: 20px;
  width: 80%;
}
.fv__content:nth-of-type(4) .fv__content__desc {
  margin-top: 20px;
}

.fv__content__img {
  border-radius: 10px;
  overflow: hidden;
}

.about {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-inline: auto;
  max-width: 600px;
  padding-inline: 20px;
  padding-top: 120px;
}

.about__img {
  aspect-ratio: 446/240;
  border-radius: 10px;
  flex-shrink: 0;
  overflow: hidden;
}
.about__title .c-section-title__jp {
  align-items: center;
  display: inline-flex;
  gap: 15px;
}
.about__title .c-section-title__jp::before {
  background-color: #d0e9f4;
  border-radius: 50%;
  content: "";
  height: 18px;
  width: 18px;
}

.about__desc {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.service__contents {
  background-color: #f7f7f7;
  border-radius: 40px;
  padding-bottom: 60px;
  padding-inline: 20px;
  padding-top: 60px;
}

.service__title {
  text-align: center;
}
.service__boxs {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-inline: auto;
  margin-top: 40px;
  max-width: 1186px;
}

.service-box {
  border-radius: 40px;
  overflow: hidden;
  padding: 40px 20px;
  position: relative;
}

.service-box__img {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.service-box__contents {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: space-between;
  margin-inline: auto;
  max-width: 600px;
  position: relative;
  z-index: 2;
}

.service-box-left__num {
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 90px;
  letter-spacing: -11.1px;
  line-height: 1.1135135135;
}

.service-box-left__title {
  border-bottom: 1px dotted #707070;
  margin-top: 30px;
  padding-bottom: 10px;
  width: 100%;
}

.service-box-left__desc {
  margin-top: 30px;
}
.service-box-left__desc.c-text-main {
  letter-spacing: 1px;
}

.service-box-left__btn {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.service-box-right {
  aspect-ratio: 467/250;
  border-radius: 10px;
  flex-shrink: 0;
  overflow: hidden;
}

.company {
  padding-top: 60px;
  position: relative;
  z-index: 2;
}

.company__bg {
  aspect-ratio: 1366/1064;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: -45px;
  width: 70%;
}

.company__inner {
  padding-inline: 20px;
}
.company__contents {
  border-radius: 30px;
  margin-inline: auto;
  max-width: 1186px;
  overflow: hidden;
  padding-bottom: 40px;
  padding-inline: 20px;
  padding-top: 40px;
  position: relative;
}

.company__img {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.company__img::after {
  background-image: linear-gradient(to bottom, rgba(147, 147, 147, 0.3), rgba(128, 128, 128, 0.87));
  content: "";
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}

.company__content {
  align-items: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.company__title {
  align-items: center;
}
.company__desc {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.39px;
  line-height: 2.31;
  margin-top: 30px;
  max-width: 619px;
  text-align: center;
}

.company__btn {
  margin-top: 30px;
}
.works {
  padding-top: 60px;
  position: relative;
}

.works__bg {
  aspect-ratio: 1366/926;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: -50px;
  width: 70%;
  z-index: 1;
}

.works__inner {
  margin-left: auto;
  max-width: 1366px;
  overflow: hidden;
  padding-left: 20px;
  position: relative;
  position: relative;
  z-index: 2;
}

.works__contents {
  margin-top: 40px;
}
.works__contents .swiper {
  overflow: visible;
}
.works__contents .swiper-button-prev,
.works__contents .swiper-button-next {
  top: 30px;
}
.works__contents .swiper-button-next {
  right: 90px;
}
.works__contents .swiper-button-prev {
  right: 20px;
}

.works__btn {
  display: flex;
  justify-content: center;
  margin-top: 58px;
}
.works__btn .c-btn-square--yellow {
  background-color: #f5f0d1;
}
.works__btn .c-btn-square--yellow .c-btn-square__arrow {
  background-color: #fff;
}

.news {
  padding-bottom: 117px;
  padding-top: 120px;
  position: relative;
}
.news__bg {
  bottom: -60px;
  pointer-events: none;
  position: absolute;
  right: 0;
  width: 100%;
  z-index: 1;
}

.news__inner {
  padding-inline: 20px;
  position: relative;
  z-index: 2;
}

.news__contents {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 30px;
  justify-content: space-between;
  margin-inline: auto;
  max-width: 1186px;
}

.news__left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.news__btn .c-btn-square--orange {
  background-color: #f9e8dd;
}
.news__btn .c-btn-square--orange .c-btn-square__arrow {
  background-color: #fff;
}

.news__right {
  width: 100%;
}

@media (min-width: 768px) {
  .service-box-left__desc.c-text-main {
    letter-spacing: 0.39px;
  }
}

@media (min-width: 1024px) {
  .section-wrap {
    padding-bottom: 159px;
    padding-top: 113px;
  }
  .fv {
    padding-inline: 80px;
  }
  .fv__contents {
    align-items: center;
    -moz-column-gap: 20px;
         column-gap: 20px;
    -moz-column-gap: 49px;
         column-gap: 49px;
    display: grid;
    grid-template-columns: 45.9747817653% 49.2725509214%;
    max-width: 1076px;
    padding-left: 45px;
  }
  .fv__content__title {
    font-size: 29px;
  }
  .fv__content__desc {
    gap: 20px;
  }
  .fv__content:nth-of-type(1) .fv__content__desc {
    margin-right: auto;
    margin-top: 40px;
    max-width: 336px;
  }
  .fv__content:nth-of-type(2) .fv__content__img {
    left: 0;
    max-width: 100%;
    position: relative;
    right: 0;
    top: 0;
    width: 100%;
  }
  .fv__content:nth-of-type(3) .fv__content__img {
    margin-top: 0;
    width: 100%;
  }
  .fv__content:nth-of-type(4) .fv__content__desc {
    margin-inline: auto;
    margin-top: 0;
    width: 88.3858267717%;
  }
  .about {
    align-items: flex-start;
    flex-direction: row;
    justify-content: space-between;
    max-width: 1196px;
    padding-inline: 90px;
    padding-top: 170px;
  }
  .about__img {
    aspect-ratio: 446/486;
    max-width: 446px;
    width: 43.8976377953%;
  }
  .about__texts {
    max-width: 442px;
    width: 43.5039370079%;
  }
  .about__title {
    margin-top: 26px;
  }
  .about__desc {
    gap: 25px;
    margin-top: 57px;
  }
  .service__inner {
    padding-left: 80px;
  }
  .service__contents {
    padding-bottom: 130px;
    padding-inline: 50px;
    padding-top: 120px;
  }
  .service__boxs {
    gap: 50px;
    margin-top: 60px;
  }
  .service-box {
    padding: 48px 77px 77px 70px;
  }
  .service-box__contents {
    flex-direction: row;
    max-width: 100%;
  }
  .service-box-left {
    max-width: 504px;
    width: calc(504 / 1366 * 100vw);
  }
  .service-box-left__num {
    font-size: 185px;
  }
  .service-box-left__title {
    margin-top: 60px;
    padding-bottom: 25px;
  }
  .service-box-left__desc {
    margin-top: 51px;
  }
  .service-box-left__btn {
    justify-content: flex-start;
    margin-top: 35px;
  }
  .service-box-right {
    aspect-ratio: 467/469;
    max-width: 467px;
    width: calc(467 / 1366 * 100vw);
  }
  .company {
    padding-left: 80px;
    padding-top: 66px;
  }
  .company__bg {
    top: -317px;
    width: 100%;
  }
  .company__contents {
    padding-bottom: 68px;
    padding-top: 70px;
  }
  .company__desc {
    margin-top: 45px;
  }
  .company__btn {
    margin-top: 48px;
  }
  .works {
    padding-top: 150px;
  }
  .works__bg {
    top: -290px;
    width: 100%;
  }
  .works__inner {
    margin-inline: auto;
    padding-left: 130px;
  }
  .works__contents {
    margin-top: 51px;
  }
  .works__contents .swiper-button-next {
    right: 120px;
  }
  .works__contents .swiper-button-prev {
    right: 50px;
  }
  .works__btn {
    padding-right: 130px;
  }
  .news__bg {
    bottom: -336px;
  }
  .news__inner {
    padding-left: 130px;
    padding-right: 50px;
  }
  .news__contents {
    flex-direction: row;
  }
  .news__left {
    gap: 48px;
    max-width: 315px;
    width: calc(315 / 1366 * 100vw);
  }
  .news__right {
    margin-top: 70px;
    max-width: 763px;
    width: calc(763 / 1366 * 100vw);
  }
}