@charset "UTF-8";

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

Service CSS

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

上記はここに記述する

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

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


  .i {
    display:grid;

    @media (width > 767px) {
      grid-template-columns:1fr 65.0rem;
      grid-template-areas:"text img";
      align-items: center;
    }
    @media (width <= 767px) {
      gap:2.8rem;
    }
  }
  .i_t {
    font-size:2.8rem;
    line-height:2.2;
    letter-spacing: .05em;
    @media (width > 767px) {
      grid-area:text;
    }
    @media (width <= 767px) {
      font-size:1.5rem;
      line-height:2.4;
    }
  }
  .i_t_desc {
    @media (width > 767px) {
    }
    @media (width <= 767px) {
    }

    & + & {
      margin-top:1lh;
      @media (width <= 767px) {
        margin-top:1em;
      }
    }
  }
  .i_img {
    @media (width > 767px) {
      grid-area:img;
    }
    @media (width <= 767px) {
    }
  }

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

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


/* JR北海道グループについて
----------------------------------------------------------------------------- */
.about-group {
  @media (width > 767px) {
    --e1:6.0rem;
    --e2:12.0rem;
    --e3:6.0rem;
    --e4:0rem;
    --e5:6.0rem;
    --e6:12.0rem;
    padding-block:20.0rem 26.0rem;
  }
  @media (width <= 767px) {
    --e1:2.0rem;
    --e2:4.0rem;
    --e3:2.0rem;
    --e4:0rem;
    padding-block:8.0rem 12.0rem;
  }

  .j {}
  .j-text {
    margin-top:4.8rem;
    padding-block:4.0rem;
    background-color:var(--cc-gray-A);
    color:#fff;
    font-size:6.0rem;
    line-height:1.1;
    letter-spacing: .05em;
    @media (width > 767px) {
      text-align: center;
    }
    @media (width <= 767px) {
      margin-top:2.4rem;
      border-radius:var(--radius-B);
      padding:2.0rem 3.0rem;
      font-size:3.2rem;
      line-height:calc(40/32);
    }

    > span {
      > span {
        color:var(--cc-green-B);
      }
    }
  }

  .g {
    &:not(:first-child) {
      margin-top:10.0rem;
      @media (width <= 767px) {
        margin-top:6.4rem;
      }
    }
  }
  .g-f {
    margin-top:8.0rem;
    @media (width <= 767px) {
      margin-top:4.8rem;
    }
  }
  .g-f-jr {
    padding:4.0rem 5.0rem;
    background-color:#fff;
    position:relative;
    @media (width <= 767px) {
      padding:3.0rem 2.0rem 2.0rem;;
    }

    &::after {
      content:"";
      margin-inline:auto;
      width:2.0rem;
      height:2.0rem;
      background-color:#fff;
      clip-path:polygon(0 0,100% 0,50% 100%);
      position:absolute;
      inset-inline:0;
      top:calc(100% - 1px);
    }
  }
  .g-f-jr-heading {
    margin-bottom:4.0rem;
    margin-inline:auto;
    width:fit-content;
  }
  .g-f-jr-l {
    display:grid;
    text-align: center;
    font-size:1.5rem;
    line-height:1.5;
    letter-spacing: .05em;
    @media (width > 767px) {
      grid-template-columns:repeat(6,1fr);
      gap:2.8rem;
    }
    @media (width <= 767px) {
      grid-template-columns:repeat(3,1fr);
      gap:.4rem;
      font-size:1.2rem;
    }

    > li {
      display:flex;
      justify-content: center;
      align-items: center;
      height:5.0rem;
      border-radius:var(--radius-B);
      background-color:var(--cc-green-E);
      color:#fff;
    }
  }

  .g-f-s {
    @media (width > 767px) {
      /* margin-top:-12.0rem; */
      /* padding:20.0rem 10.0rem 10.0rem; */
      padding:8.0rem 5.0rem;
    }
    @media (width <= 767px) {
      /* margin-top:-10.8rem; */
      /* padding-block:14.8rem 8.0rem; */
      padding-block:6.0rem 8.0rem;
    }

    > .m-bg {
      background-color:var(--cc-white-C);
      z-index: -1;
    }
  }
  .g-f-s-heading {
    margin-bottom:4.0rem;
    font-size:2.6rem;
    line-height:1.6;
    letter-spacing: .05em;
    text-align: center;
    @media (width <= 767px) {
      margin-bottom:3.2rem;
      font-size:1.8rem;
      line-height:1.8;
    }
  }
  .g-f-s-l {
    display:grid;
    @media (width > 767px) {
      grid-template-columns:repeat(5,1fr);
      gap:2.0rem;
    }
    @media (width <= 767px) {
      grid-template-columns:repeat(2,1fr);
      gap:.8rem;
    }

    > div {
      padding:2.0rem;
      border-radius:var(--radius-B);
      background-color:#fff;
      @media (width <= 767px) {
        display:flex;
        flex-direction: column;
      }
    }
    dt {
      display:flex;
      justify-content: center;
      align-items: center;
      margin-bottom:2.4rem;
      border-radius:var(--radius-B);
      height:5.0rem;
      background-color:var(--cc-blue-A);
      color:#fff;
      font-size:1.5rem;
      line-height:1.6;
      letter-spacing: .05em;
      @media (width <= 767px) {
        margin-bottom:1.2rem;
        padding-top:.1em;
        height:3.0rem;
        font-size:1.3rem;
      }
    }
    dd {
      margin-left:-.5em;
      font-size:1.5rem;
      line-height:1.5;
      @media (width > 767px) {
      }
      @media (width <= 767px) {
        flex:1;
        display:flex;
        flex-direction: column;
        margin-left:-1em;
        font-size:1.2rem;
        line-height:1.4;
      }

      small {
        font-size:1.25rem;
        margin-left:-.6em;
        @media (width <= 767px) {
          font-size:1.0rem;
        }
      }

      > ul {
        display:grid;
        gap:.25em;
        @media (width <= 767px) {
          gap:.4em;
          margin-bottom:.8rem;
          margin-right:-2.0rem;
        }

        li {
          padding-left:1em;
          &.strong {
            color:var(--cc-green-B);
          }
          &::before {
            content:"・";
            width:1em;
            margin-left:-1em;
          }
        }

        & + p {
          margin-top:.25em;
          @media (width > 767px) {
            padding-left:1em;
          }
          @media (width <= 767px) {
            margin-top:auto;
            margin-left:auto;
            width:fit-content;
          }
        }
      }
    }
  }
  > .m-bg {
    z-index: -2;
  }
}

/* Mssion Vision
----------------------------------------------------------------------------- */
.about-mission_vision {
  position:relative;
  @media (width > 767px) {
    padding-bottom:20.0rem;
  }
  @media (width <= 767px) {
    padding-bottom:8.0rem;
  }


  &::before {
    content:"";
    margin-inline:auto;
    background-color:#F8F8F8;
    position:absolute;
    inset-inline:0;
    z-index: -2;
    @media (width > 767px) {
      margin-block:auto;
      width:80.0rem;
      inset-block:18.0rem 0rem;
    }
    @media (width <= 767px) {
      margin-block:auto;
      width:31.5rem;
      inset-block:-7.5rem 0rem;
      z-index: -2;
    }
  }
}

.about-mission {
  padding-top:13.2rem;
  @media (width > 767px) {
    display:flex;
    justify-content: space-between;
  }
  @media (width <= 767px) {
    padding-top:5.2rem;
  }

  .l-heading-B {
    @media (width <= 767px) {
      margin-bottom:3.6rem;
    }
  }

  .c {
    @media (width > 767px) {
      padding-top:1.6rem;
    }

  }
  .c_heading {
    display:flex;
    margin-bottom:1.6rem;
    @media (width <= 767px) {
      margin-bottom:1.2rem;
    }

    &:not(:first-child) {
      margin-top:3.6rem;
      @media (width <= 767px) {
        margin-top:4.0rem;
      }
    }
    .en {
      flex-shrink: 0;
      width:7.0rem;
      font-size:2.2rem;
      line-height:1.1;
      letter-spacing: .05em;
      position:relative;
      @media (width <= 767px) {
        font-size:1.6rem;
        width:5.0rem;
      }
      &::before {
        content:"";
        width:2.0rem;
        height:1px;
        background-color:currentColor;
        position:absolute;
        top:calc(.5lh - .5px);
        right:1.0rem;
        @media (width <= 767px) {
          width:1.2rem;
        }
      }
    }
    .ja {
      margin-top:calc(.5em - .5lh + .1em);
      font-size:2.0rem;
      line-height:1.6;
      @media (width <= 767px) {
        font-size:1.4rem;
      }
    }
  }
  .c_desc {
    --r_gap:1.4rem;
    display:flex;
    flex-direction: column;
    gap:var(--r_gap);
    font-size:2.7rem;
    line-height:1;
    letter-spacing: .05em;

    @media (width > 767px) {
    }
    @media (width <= 767px) {
      --r_gap:.8rem;
      font-size:1.6rem;
    }

    .pc {
      @media (width > 767px) {
        display:flex;
        justify-content: baseline;
        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) 84.8rem);
      }
      @media (width <= 767px) {
        display:flex;
        flex-direction: column;
        gap:var(--r_gap);
      }
    }
    .sp {
      @media (width > 767px) {
      }
      @media (width <= 767px) {
        padding-inline:1.2rem calc(1.2rem - 1em);
        padding-block:.6rem .8rem;
        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) 31.5rem);

        &.-no_pr {
          padding-right:1.2rem;
        }
      }
    }
  }
}

.about-vision {
  padding-top:18.0rem;
  @media (width <= 767px) {
    padding-top:6.0rem;
  }

  .l-heading-B {
    margin-bottom:6.0rem;
    @media (width <= 767px) {
      margin-bottom:3.6rem;
    }
  }

  .l {
    display:grid;

    @media (width > 767px) {
      grid-template-columns:repeat(2,1fr);
      gap:10.0rem;
    }
    @media (width <= 767px) {
      gap:3.2rem;
    }
    > div {
      &:nth-child(1) {
        > dd {
          background-image:linear-gradient(
            130deg,
            var(--cc-blue-A) 0%,
            var(--cc-green-D) calc(200% + 10.0rem)
          );
          background-position:left center;
        }
      }
      &:nth-child(2) {
        > dd {
          background-image:linear-gradient(
            130deg,
            var(--cc-blue-A) -100%,
            var(--cc-green-D) 100%
          );
          background-position:left 10%;
        }
      }
    }
    dt {
      margin-bottom:1.6rem;
      text-align: center;
      font-size:2.2rem;
      line-height:1.1;

      @media (width <= 767px) {
        margin-bottom:1.6rem;
        font-size:2.0rem;
      }
    }
    dd {
      color:#fff;
      padding-block:4.0rem;
      font-size:2.4rem;
      text-align: center;
      line-height:2;
      letter-spacing: .05em;

      @media (width <= 767px) {
        padding-block:2.8rem;
        font-size:1.6rem;
      }

      small {
        font-size:1.8rem;
        @media (width <= 767px) {
          font-size:1.2rem;
        }
      }
    }
  }

}

/* Service
----------------------------------------------------------------------------- */
.about-service {
  .about-group + & {
    @media (width > 767px) {
      margin-top:-12.0rem;
    }
    @media (width <= 767px) {
      margin-top:-4.0rem;
    }
  }
  @media (width > 767px) {
    --s1:6.0rem;
    --s2:0rem;
    --s3:6.0rem;
    --s4:12.0rem;
    --s5:6.0rem;
    --s6:0rem;
    padding-block:26.0rem 20.0rem;
  }
  @media (width <= 767px) {
    --s1:2.0rem;
    --s2:0.0rem;
    --s3:2.0rem;
    --s4:4.0rem;
    padding-block:9.2rem 8.0rem;
  }

  > .intro {
    margin-bottom:7.2rem;
    @media (width <= 767px) {
      margin-bottom:6.8rem;
    }
  }

  .g-service_links {
    @media (width <= 767px) {
      margin-inline:-3.0rem;
    }
  }
  .g-works_link {
    margin-top:10.0rem;
    @media (width <= 767px) {
      margin-top:6.0rem;
    }
  }

  > .m-bg {
    background-color:var(--cc-white-C);
  }
}

/* Company
----------------------------------------------------------------------------- */
.about-company {
  background-color:var(--cc-white-A);
  @media (width > 767px) {
    padding-block:13.0rem;
  }
  @media (width <= 767px) {
    padding-block:8.0rem;
  }

  .link {
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom:6.0rem;
    background-color:var(--cc-white-B);
    font-size:2.2rem;
    line-height:1.6;
    letter-spacing: .05em;
    padding:3.2rem;

    @media (width <= 767px) {
      margin-bottom:2.0rem;
      font-size:1.6rem;
      padding:1.6rem;
    }

    .l-circle_arrow-A {
      flex-shrink: 0;
    }
  }

  .l {
    @media (width > 767px) {
      display:flex;
      border-left:1px solid var(--cc-gray-A);
    }
    @media (width <= 767px) {
      display:grid;
      gap:1.0rem;
    }
  }
  .l_i {
    @media (width > 767px) {
      flex:1;
      border-right:1px solid var(--cc-gray-A);
    }
    @media (width <= 767px) {
      border-bottom:1px solid var(--cc-gray-A);
    }

    > a {
      display:flex;
      line-height:1;
      @media (width > 767px) {
        flex-direction: column;
        align-items: center;
      }
      @media (width <= 767px) {
        gap:1.2rem;
        align-items: baseline;
        padding-block:1.2rem;
      }

      .ja {
        font-size:1.6rem;
        @media (width > 767px) {
          margin-bottom:1.2rem;
        }
        @media (width <= 767px) {
          font-size:1.4rem;
        }
      }
      .en {
        font-size:2.8rem;
        background-image:linear-gradient(120deg,var(--cc-blue-A) 30%,var(--cc-green-D) 90%);
        background-clip:text;
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
        @media (width <= 767px) {
          font-size:2.6rem;
        }
      }
      .l-circle_arrow-A {
        flex-shrink: 0;
        @media (width > 767px) {
          margin-top:2.4rem;
        }
        @media (width <= 767px) {
          margin-left:auto;
        }
      }
    }
  }
}

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