@charset "UTF-8";
/*==================================
コンテンツ説明部分　共通
==================================*/
.p-service_info-white,
.p-service_info-black {
  display: flex;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}

.p-service_info-white .l-left {
  width: 60%;
  margin-right: 2%;
}
.p-service_info-white .l-right {
  width: 38%;
}

.p-service_info-black .l-left {
  width: 40%;
}
.p-service_info-black .l-right {
  width: 55%;
  margin-left: 5%;
}

.p-service_description {
  margin-top: 4%;
  margin-bottom: 15%;
}

.p-service_content {
  padding: 0 0 5% 0;
}

/*==================================
各コンテンツ
==================================*/
/* バナー */
.p-service_banner {
  padding-bottom: 10%;
  position: relative;
}
.p-service_banner__img-01, .p-service_banner__img-02, .p-service_banner__img-03, .p-service_banner__img-04 {
  width: 35%;
  position: absolute;
  margin-right: 32.2916666667%;
  margin-left: auto;
  box-shadow: 24px 24px 34px -5px rgba(27, 126, 111, 0.6235294118);
  transform: rotate(0deg) skewX(-10deg) perspective(600px) rotateY(-23deg);
}
.p-service_banner__img-01 img, .p-service_banner__img-02 img, .p-service_banner__img-03 img, .p-service_banner__img-04 img {
  width: 100%;
}
.p-service_banner__img-01 {
  top: -3%;
  right: 0;
  z-index: 5;
}
.p-service_banner__img-02 {
  top: 6%;
  right: -4%;
  z-index: 4;
}
.p-service_banner__img-03 {
  top: 15%;
  right: -8%;
  z-index: 3;
}
.p-service_banner__img-04 {
  top: 24%;
  right: -12%;
  z-index: 2;
}

/* LP */
.p-service_lp {
  background-color: #000;
  padding: 10% 0;
  color: #fff;
  position: relative;
}
.p-service_lp__img {
  width: 47.2%;
  position: absolute;
  margin-left: 20.8333333333%;
}
.p-service_lp__img img {
  width: 100%;
}

/* サイト */
.p-service_site {
  padding: 10% 0;
  position: relative;
}
.p-service_site__img {
  position: absolute;
  width: 70%;
  height: 100%;
  margin-right: 20.8333333333%;
}
.p-service_site__img img {
  width: 100%;
}
.p-service_site__img-01 {
  position: absolute;
  top: 4%;
  right: 65%;
  z-index: 5;
}
.p-service_site__img-02 {
  position: absolute;
  top: 25%;
  right: 12%;
  z-index: 4;
}

/* コンサル */
.p-service_consulting {
  background-color: #000;
  padding: 10% 0;
  color: #fff;
  position: relative;
}

@media screen and (min-width: 1280px) and (max-width: 1550px) {
  .p-service_banner__img-01, .p-service_banner__img-02, .p-service_banner__img-03, .p-service_banner__img-04 {
    margin-right: 20%;
  }
  .p-service_banner__img-01 {
    top: 5%;
    right: 0;
  }
  .p-service_banner__img-02 {
    top: 14%;
    right: -4%;
  }
  .p-service_banner__img-03 {
    top: 23%;
    right: -8%;
  }
  .p-service_banner__img-04 {
    top: 32%;
    right: -12%;
  }
  .p-service_site {
    padding: 10% 0;
  }
  .p-service_site__img {
    width: 70%;
    height: 100%;
    margin-right: 13.3333333333%;
  }
  .p-service_site__img img {
    width: 90%;
  }
  .p-service_site__img-01 {
    position: absolute;
    top: 20%;
    right: 65%;
    z-index: 5;
  }
  .p-service_site__img-02 {
    position: absolute;
    top: auto;
    bottom: -15%;
    right: 12%;
    z-index: 4;
  }
}
/* 画面サイズ 750px 未満 SP */
@media screen and (max-width: 750px) {
  .p-service_banner__img-01, .p-service_banner__img-02, .p-service_banner__img-03, .p-service_banner__img-04 {
    width: 50%;
    margin-right: 20%;
  }
  .p-service_banner__img-01 {
    top: auto;
    bottom: 20%;
    right: 0;
    z-index: 5;
  }
  .p-service_banner__img-02 {
    top: auto;
    bottom: 15%;
    right: -4%;
    z-index: 4;
  }
  .p-service_banner__img-03 {
    top: auto;
    bottom: 10%;
    right: -8%;
    z-index: 3;
  }
  .p-service_banner__img-04 {
    top: auto;
    bottom: 5%;
    right: -12%;
    z-index: 2;
  }
  .p-service_site {
    padding: 10% 0;
  }
  .p-service_site__img {
    width: 70%;
    height: 100%;
    margin-right: 20.8333333333%;
  }
  .p-service_site__img img {
    width: 100%;
  }
  .p-service_site__img-01 {
    position: absolute;
    top: 20%;
    right: 65%;
    z-index: 5;
  }
  .p-service_site__img-02 {
    position: absolute;
    top: auto;
    bottom: -15%;
    right: 12%;
    z-index: 4;
  }
}
/* iphone12 */
@media only screen and (min-device-width: 390px) and (max-device-width: 844px) and (-webkit-device-pixel-ratio: 3) {
  .p-service_banner__img-01, .p-service_banner__img-02, .p-service_banner__img-03, .p-service_banner__img-04 {
    transform: unset;
  }
}
/*==================================
フロー
==================================*/
.p-service_flow_item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 40px;
}
.p-service_flow_iconwrap {
  width: 12.0689655172%;
}
.p-service_flow_icon {
  position: relative;
  text-align: center;
  background-color: #00bcae;
  width: 5em;
  height: 5em;
  border-radius: 50%;
}
.p-service_flow_icon img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.p-service_flow_icon::after {
  content: "";
  display: block;
  position: absolute;
  border-left: 2px solid #00bcae;
  height: 5em;
  width: 2px;
  bottom: -5em;
  left: 2.5em;
}
.p-service_flow_icon.p-service_noline::after {
  border: none;
}
.p-service_flow_ttlwrap {
  display: flex;
  align-items: flex-start;
  width: 21.1206896552%;
}
.p-service_flow_no {
  color: #00bcae;
  font-size: clamp(20px, 1.35vw, 26px);
  font-weight: bold;
  margin-right: 1.5%;
}
.p-service_flow_ttl {
  font-size: clamp(20px, 1.35vw, 26px);
  font-weight: bold;
}
.p-service_flow_text {
  width: 66.8103448276%;
}

.p-service_flow_ttlwrap.p-service_flow_ttlwrap--single {
  width: 88%;
}

/* 画面サイズ 750px 未満 SP */
@media screen and (max-width: 750px) {
  .p-service_flow_item {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 60px;
  }
  .p-service_flow_iconwrap {
    width: 24.4%;
  }
  .p-service_flow_icon {
    position: relative;
    text-align: center;
    background-color: #00bcae;
    width: 5em;
    height: 5em;
    border-radius: 50%;
  }
  .p-service_flow_icon::after {
    content: none;
  }
  .p-service_flow_icon.p-service_noline::after, .p-service_flow_text.p-service_noline::after {
    border: none;
  }
  .p-service_flow_ttlwrap {
    justify-content: center;
    width: 93.3333333333%;
    margin: 2% 0;
  }
  .p-service_flow_no {
    color: #00bcae;
    font-size: clamp(20px, 1.35vw, 26px);
    font-weight: bold;
  }
  .p-service_flow_ttl {
    font-size: clamp(20px, 1.35vw, 26px);
    font-weight: bold;
  }
  .p-service_flow_text {
    position: relative;
    width: 93.3333333333%;
  }
  .p-service_flow_text::after {
    content: "";
    display: block;
    position: absolute;
    border-left: 2px solid #00bcae;
    height: 2em;
    width: 2px;
    bottom: -2.5em;
    left: 50%;
  }
}