@charset "UTF-8";

/*共通*/
:root {
  --text-color-01: #000000;
  --text-color-02: #333333;
  --text-color-02: #444444;
  --primary-color-01: #ffff66;
  --primary-color-02: #eecce8;
  --primary-color-03: #ff5153;
  --bg-color-01: #f3eec9;
}
p {
  font-size: 1.1rem;
}

#service-page {
  background-color: var(--bg-color-01);
}
.custom-page-ttl {
  background-color: var(--primary-color-01);
  padding-top: 12vw;
  padding-bottom: 2vw;

  .zcontainer {
    max-width: 1000px;
  }
  & h1 img {
    width: 17%;
  }
  & p {
    margin: 0;
  }
}

.service-container {
  position: relative;
  padding: 1vw 5vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5vw;
  max-width: 1000px;

  .service-group:first-child .svc-go-btn {
    margin-left: auto;
  }
}
.service-sec01 {
  background: no-repeat url("../img/top/bg/kv-cloud01.svg");
  background-size: 20vw;
  background-position: 10% 10%;
  position: relative;
  padding: 3vw 0;
}
.service-sec02 {
  background: no-repeat url("../img/top/bg/kv-cloud08.svg");
  background-size: 20vw;
  background-position: 5% 22%;
  background-color: #fff;
  position: relative;
  padding: 8vw 0 10vw;
  margin-bottom: 5vw;
}
.service-sec02::after {
  content: "";
  background-image: url("../img/service/svc-separate01_pc.svg");
  background-repeat: repeat-x;
  position: absolute;
  right: 0;
  left: 0;
  bottom: -2px;
  display: block;
  height: 7vw;
  transform: scaleY(-1);
}

.service-group {
  position: relative;
  padding-bottom: 5vw;

  & h2 img {
    width: 50%;
  }
  & p {
    text-align: justify;
  }
  & figure {
    margin: 1vw auto;
    border-radius: 1vw;
    box-sizing: border-box;
    overflow: hidden;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
  }
}
.service-img {
  position: absolute;
  width: min(50%, 15vw);
}
.service-img01 {
  left: -18%;
  bottom: -8%;
}
.service-img02 {
  right: -3%;
  bottom: -9%;
  z-index: 10;
}
.service-img03 {
  left: -0%;
  bottom: -18%;
  width: 60%;
}
.service-img04 {
  right: -2%;
  bottom: -13%;
}
.svc-cloud {
  position: absolute;
  width: min(50%, 23vw);
  right: 1%;
  top: -11%;
}
.svc-cloud02 {
  position: absolute;
  width: min(30%, 15vw);
  right: -4%;
  top: 50%;
}
.svc-suwaro {
  width: min(20%, 5vw);
  position: absolute;
  top: 10%;
  left: 40%;
}
.svc-go-btn {
  width: fit-content;
  margin-top: 2vw;

  & a {
    background: no-repeat url(../img/service/icon-more.svg);
    background-size: 5px;
    background-position: 90% center;
    background-color: var(--primary-color-01);
    display: block;
    text-align: center;
    padding: 0.7vw 3.8vw 0.7vw 2.8vw;
    border-radius: 5vw;
    font-size: 1.1rem;
  }
}

/*SPサイズ*/
@media screen and (max-width: 767px) {
  .custom-page-ttl {
    padding-top: 30vw;
    padding-bottom: 7vw;

    & h1 {
      margin: 1vw 0;
    }
    & h1 img {
      width: 45%;
    }
  }
  .service-section {
    padding: 0;
  }
  .service-container {
    padding: 0;
    grid-template-columns: 1fr;
    gap: 0;

    .service-group:nth-child(1)::after {
      content: "";
      background-image: url("../img/service/svc-separate01_sp.svg");
      background-repeat: repeat-x;
      position: absolute;
      right: 0;
      left: 0;
      top: 99%;
      display: block;
      height: 7vw;
      z-index: 10;
    }
  }
  .service-group {
    padding: 15vw 5vw 40vw;

    & figure {
      border-radius: 3vw;
    }
  }
  .service-sec01 {
    background-size: 50%;
    background-position: -37% 3%;

    .service-group:nth-child(1) {
      padding-top: 10vw;
    }
    .service-group:nth-child(2) {
      background-color: #fff;
    }
  }
  .service-sec02 {
    background-color: revert;
    margin-bottom: 10vw;

    .service-group:nth-child(1)::before {
      content: "";
      background-image: url("../img/service/svc-separate01_sp.svg");
      background-repeat: repeat-x;
      position: absolute;
      right: 0;
      left: 0;
      bottom: 100%;
      display: block;
      height: 7vw;
      transform: scaleY(-1);
    }
    .service-group:nth-child(2) {
      background: no-repeat url("../img/service/bg-service04.svg");
      background-color: #fff;
      background-position: 0 20%;
      padding-bottom: 50%;
    }
  }
  .service-sec02::after {
    content: "";
    background-image: url(../img/service/svc-separate01_sp.svg);
  }
  .service-img {
    width: min(50%, 45vw);
  }
  .service-img01 {
    left: 5%;
    bottom: 4%;
    width: 49;
  }
  .service-img02 {
    right: 6%;
    bottom: 7%;
  }
  .service-img03 {
    left: 6%;
    bottom: 1%;
    width: 60%;
  }
  .service-img04 {
    right: 10%;
    bottom: 11%;
    width: 55%;
  }
  .svc-cloud {
    width: min(50%, 50vw);
    left: -12%;
    top: -8%;
    z-index: 10;
  }
  .svc-cloud02 {
    width: min(50%, 37vw);
    top: 6%;
  }
  .svc-suwaro {
    width: min(50%, 17vw);
    top: 3%;
    left: 80%;
  }

  .svc-go-btn {
    & a {
      width: 45vw;
      padding: 3.3vw 9vw 3.3vw 5vw;
      font-size: 1rem;
      line-height: 1rem;
    }
  }
  .service-group {
    & h2 img {
        width: 60%;
    }
  }
  .service-group {
    & p {
        margin-block-end: 1.3em;
    }
  }
}

/*PCサイズ*/
@media screen and (min-width: 768px) {
  .service-sec02::before {
    content: "";
    background-image: url("../img/service/svc-separate01_pc.svg");
    background-repeat: repeat-x;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    display: block;
    height: 5vw;
  }
}

/* タブレット */
@media screen and (min-width: 767px) and (max-width: 1280px) {
  .service-sec02::before {
    content: "";
    background-image: url("../img/service/svc-separate01_pc.svg");
    background-repeat: repeat-x;
    position: absolute;
    right: 0;
    left: 0;
    top: -2px;
    display: block;
    height: 5vw;
  }
  .service-sec02::after {
    content: "";
    background-image: url("../img/service/svc-separate01_pc.svg");
    background-repeat: repeat-x;
    position: absolute;
    right: 0;
    left: 0;
    bottom: -2px;
    display: block;
    height: 5vw;
    transform: scaleY(-1);
  }
}