@charset "UTF-8";
/* サービス
================================================== */
/* 共通
-------------------------------------------------- */
.main__inner {
  padding-bottom: 18.66667vw;
}
@media all and (min-width: 768px) {
  .main__inner {
    padding-bottom: 73px;
  }
}

/* kv */
.kv__ttl--en .f_color {
  color: #00A1E9;
}

/* タイトル共通 */
.sec_detail__ttl,
.sec_case__ttl {
  background-image: url(/img/service/bg_ttl_sp.svg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  font-size: 5.33334vw;
  font-weight: bold;
  line-height: 1.45;
  letter-spacing: 0.1em;
  min-height: 8vw;
  text-align: center;
}
@media all and (min-width: 768px) {
  .sec_detail__ttl,
  .sec_case__ttl {
    background-image: url(/img/service/bg_ttl_pc.svg);
    background-position: left;
    font-size: 2.8rem;
    line-height: 1.42858;
    min-height: 50px;
    padding-left: min(7.32064vw, 100px);
    text-align: left;
  }
}

@media all and (min-width: 768px) {
  .sec_case__ttl {
    text-align: right;
    padding-left: min(8.56515vw, 117px);
    transform: scale(-1, 1);
  }
  .sec_case__ttl > span {
    display: block;
    transform: scale(-1, 1);
  }
}

/* top
-------------------------------------------------- */
.sec_top {
  background-image: url(/img/service/bg_line_sp.svg);
  background-position: top 13.33334vw center;
}
@media all and (min-width: 768px) {
  .sec_top {
    margin-top: 36px;
    background-image: initial;
  }
}
.sec_top::before {
  background: rgb(0, 161, 233);
  background: linear-gradient(180deg, rgba(0, 161, 233, 0.15) 0%, rgb(255, 255, 255) 100%);
}

.sec_top__inner {
  background-image: none;
}
@media all and (min-width: 768px) {
  .sec_top__inner {
    background-image: url(/img/service/bg_line_pc.svg);
  }
}

@media all and (max-width: 767px) {
  .sec_top__txt:first-of-type {
    margin-top: 7.46667vw;
  }
}

/* 主な事業内容
-------------------------------------------------- */
.sec_detail {
  margin-top: 14.66667vw;
}
@media all and (min-width: 768px) {
  .sec_detail {
    margin-top: 72px;
  }
}

@media all and (min-width: 768px) {
  .sec_detail__list {
    display: flex;
    flex-wrap: wrap;
    gap: 50px 50px;
    margin-top: 30px;
  }
}
.sec_detail__list li {
  margin-top: 4vw;
  padding-top: 5.33334vw;
  position: relative;
}
@media all and (min-width: 768px) {
  .sec_detail__list li {
    margin: 0;
    padding-top: 30px;
    width: calc(50% - 25px);
  }
}
.sec_detail__list li .list__ttl {
  color: #00A1E9;
  font-size: 4.26667vw;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}
@media all and (min-width: 768px) {
  .sec_detail__list li .list__ttl {
    font-size: 2rem;
    line-height: 1.5;
  }
}
.sec_detail__list li .list__inner {
  background-color: rgba(0, 161, 233, 0.1);
  border-radius: 2.66667vw;
  overflow: hidden;
  padding: 16.26667vw 2.66667vw 5.33334vw;
  position: relative;
}
@media all and (min-width: 768px) {
  .sec_detail__list li .list__inner {
    border-radius: 15px;
    padding: 97px 11.61417% 34px;
  }
}
.sec_detail__list li .list__inner::before {
  content: "";
  background-color: #fff;
  border-radius: 50%;
  height: 48vw;
  width: 48vw;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateY(-36vw) translateX(-50%);
}
@media all and (min-width: 768px) {
  .sec_detail__list li .list__inner::before {
    height: 180px;
    width: 180px;
    transform: translateY(-118px) translateX(-50%);
  }
}
.sec_detail__list li .list__txt {
  background-color: #fff;
  padding: 5.33334vw 6.66667vw;
}
@media all and (min-width: 768px) {
  .sec_detail__list li .list__txt {
    padding: 26px 1em;
    text-align: center;
  }
}
.sec_detail__list li .list__img {
  border-radius: 2.66667vw;
  margin-top: 5.33334vw;
  overflow: hidden;
}
@media all and (min-width: 768px) {
  .sec_detail__list li .list__img {
    border-radius: 10px;
    margin-top: 20px;
  }
}

/* プロジェクトの一例
-------------------------------------------------- */
.sec_case {
  margin-top: 13.33334vw;
}
@media all and (min-width: 768px) {
  .sec_case {
    margin-top: 70px;
  }
}

@media all and (min-width: 768px) {
  .sec_case__inner {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    gap: 0 min(3.66032vw, 50px);
  }
}

@media all and (min-width: 768px) {
  .sec_case__ttl {
    width: 100%;
  }
}

@media all and (min-width: 768px) {
  .sec_case__txtWrap {
    margin-top: 30px;
    width: calc(50% - 25px);
  }
}

.sec_case__list {
  margin-top: 5.33334vw;
}
@media all and (min-width: 768px) {
  .sec_case__list {
    margin-top: 0;
  }
}
@media all and (min-width: 768px) {
  .sec_case__list li {
    font-size: 1.6rem;
    line-height: 1.5;
  }
}

.sec_case__txt {
  margin-top: 4.26667vw;
}
@media all and (min-width: 768px) {
  .sec_case__txt {
    font-size: 1.6rem;
    line-height: 1.5;
    margin-top: 25px;
  }
}

.sec_case__img {
  margin-top: 5.33334vw;
}
@media all and (min-width: 768px) {
  .sec_case__img {
    margin-top: 30px;
    width: calc(50% - 25px);
  }
}/*# sourceMappingURL=service.css.map */