@charset "UTF-8";

/* =============================================================================

Service CSS

・業務紹介用CSS「.service-×××」

上記はここに記述する

============================================================================= */

.service-intro {
  padding-bottom:12.0rem;
  @media (width <= 767px) {
    padding-bottom:6.4rem;
  }


  .i {
    display:grid;

    @media (width > 767px) {
      grid-template-columns:1fr 58.0rem;
      grid-template-rows:auto auto 1fr;
      grid-template-areas:
        "heading img"
        "desc img"
        ". img"
      ;
    }
    @media (width <= 767px) {
      grid-template-rows:auto auto 1fr;
      grid-template-areas:
        "img"
        "heading"
        "desc"
      ;
    }
  }
  .i_heading {
    grid-area:heading;
    display:flex;
    flex-direction: column;
    gap:1.8rem;
    font-size:4.2rem;
    line-height:1;
    letter-spacing: .05em;
    margin-bottom:6.8rem;

    @media (width <= 767px) {
      gap:.8rem;
      margin-block:3.2rem 1.6rem;
      font-size:2.3rem;
    }

    > span {
      padding-block:1.2rem;
      padding-inline:2.0rem calc(2.0rem - 1em);
      border-radius:var(--radius-B);
      width:fit-content;
      color:#fff;
      background-image:linear-gradient(to right,var(--cc-blue-A) 0%,var(--cc-green-D) 59.0rem);

      @media (width <= 767px) {
        padding-inline:.8rem calc(.8rem - 1em);
        padding-block:.6rem;
      }
    }
  }
  .i_desc {
    grid-area:desc;
    @media (width > 767px) {
    }
    @media (width <= 767px) {
    }
  }
  .i_img {
    grid-area:img;
    filter:drop-shadow(0 0 2.0rem rgba(0, 0, 0, 0.2));
    @media (width > 767px) {
    }
    @media (width <= 767px) {
      filter:drop-shadow(0 0 1.0rem rgba(0, 0, 0, 0.2));
    }
  }

  .text {
    --loop-duration:30s;
    margin-top:8.8rem;
    font-size:12.0rem;
    line-height:1.2;
    letter-spacing: .05em;
    @media (width <= 767px) {
      margin-top:5.2rem;
      font-size:6.0rem;
    }

    .item > p {
      background-image:var(--text-grad);
      background-clip:text;
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
    }
  }
}


/* SelectorName
----------------------------------------------------------------------------- */
.service-contents {
  display:grid;
  gap:10.0rem;
  padding-block:16.0rem;
  @media (width > 767px) {
  }
  @media (width <= 767px) {
    gap:6.4rem;
    padding-block:8.0rem;
  }
  .m-bg {
    background-color:var(--cc-white-C);
  }

  .i {
    background-color:#fff;
    position:relative;
    @media (width > 767px) {
      padding:10.0rem;
    }
    @media (width <= 767px) {
      padding:7.2rem 2.0rem 4.0rem;
    }
    &::before {
      content:"";
      width:4px;
      height:7.0rem;
      background-image:linear-gradient(210deg,var(--cc-blue-A) -10%,var(--cc-green-D) 150%);
      position:absolute;
      top:0;
      left:0;
      @media (width <= 767px) {
        height:5.0rem;
      }
    }
  }
  .i_number {
    font-size:3.0rem;
    letter-spacing: .05em;
    line-height:1.1;
    position:absolute;
    top:3.8rem;
    left:3.5rem;
    color:var(--cc-blue-A);
    @media (width <= 767px) {
      font-size:2.0rem;
      top:3.0rem;
      left:2.0rem;
    }
  }
  .i_category {
    font-size:1.8rem;
    line-height:1.2;
    letter-spacing: .05em;
    position:absolute;
    top:5.5rem;
    right:5.1rem;
    background-image:linear-gradient(120deg,var(--cc-blue-A) -50%,var(--cc-green-D) 150%);
    background-position:center;
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    @media (width <= 767px) {
      top:3.5rem;
      right:2.0rem;
      font-size:1.4rem;
    }
  }

  .i_heading {
    display:flex;
    align-items: center;
    gap:2.4rem;
    margin-bottom:8.0rem;
    font-size:4.0rem;
    line-height:1.8;
    letter-spacing: .05em;
    @media (width <= 767px) {
      margin-bottom:3.2rem;
      font-size:2.0rem;
      gap:1.6rem;
      line-height:1.6;
    }
    .icon {
      flex-shrink: 0;
      display:flex;
      justify-content: center;
      align-items: center;
      border-radius:50%;
      width:8.0rem;
      height:8.0rem;
      background-image:linear-gradient(135deg,var(--cc-blue-A) -50%,var(--cc-green-D) 150%);
      @media (width <= 767px) {
        width:4.8rem;
        height:4.8rem;
      }
    }
  }

  .i_list {
    display:grid;
    gap:4.8rem;
    @media (width <= 767px) {
      gap:2.4rem;
    }
    > div {
      padding-bottom:4.0rem;
      border-bottom:1px solid var(--cc-gray-A);
      display:grid;
      @media (width > 767px) {
        grid-template-columns:34.0rem 1fr;
        column-gap:4.8rem;
        align-items: center;
      }
      @media (width <= 767px) {
        padding-bottom:2.4rem;
      }
    }
    dt {
      align-self:center;
      margin-block:calc(.5em - .5lh);
      font-size:2.4rem;
      line-height:2;
      position:relative;
      @media (width > 767px) {
        display:flex;
        align-items: center;
        min-height:2lh;
      }
      @media (width <= 767px) {
        margin-bottom:1.6rem;
        padding-bottom:1.6rem;
        font-size:1.6rem;
        line-height:1.6;
      }

      &::after {
        content:"";
        position:absolute;
        @media (width > 767px) {
          width:3px;
          height:calc(100% - (.5lh - .5em));
          background-image:linear-gradient(30deg,var(--cc-blue-A) 0%,var(--cc-green-D) 150%);
          right:0;
          top:calc(.25lh - .25em);
        }
        @media (width <= 767px) {
          background-image:linear-gradient(120deg,var(--cc-blue-A) 0%,var(--cc-green-D) 150%);
          width:4.0rem;
          height:2px;
          left:0;
          bottom:0;
        }
      }
    }
    dd {
      margin-block:calc(.5em - .5lh);
      @media (width > 767px) {
        font-size:1.6rem;
        line-height:2.2;
      }
    }
  }
  .g-works_link {
    @media (width > 767px) {
      margin-top:6.0rem;
    }
    @media (width <= 767px) {
      margin-top:2.0rem;
    }
  }
}

/* SelectorName
----------------------------------------------------------------------------- */
.service-SelectorName {
  @media (width > 767px) {
  }
  @media (width <= 767px) {
  }
}