@charset "UTF-8";

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

Top CSS

・トップページ用CSS「.top-×××」

上記はここに記述する

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

/* キービジュアル
----------------------------------------------------------------------------- */
.top-kv {
  padding-top:3.6rem;
  overflow:hidden;
  @media (width <= 767px) {
    padding-top:1.6rem;
  }

  .f {
    @media (width > 767px) {
      display:grid;
      grid-template-rows:1fr auto;
      grid-template-columns:1fr 80.0rem;
      grid-template-areas:
        "heading img"
        "copy img"
      ;
      box-sizing: content-box;
      padding-left:10.0rem;
    }
    @media (width <= 767px) {
    }
  }
  .f_heading {
    font-size:8.0rem;
    font-weight:700;
    letter-spacing:.10em;
    line-height:1.2;
    @media (width > 767px) {
      grid-area: heading;
    }
    @media (width <= 767px) {
      margin-bottom:2.8rem;
      padding-left:4.5rem;
      font-size:4.0rem;
      line-height:1.4;
    }
    > span {
      color:transparent;
      background-image:linear-gradient(
        to right,
        #6892EE 40%,
        #2FD38F 120%
      );
      -webkit-background-clip:text;
      background-clip:text;
    }
  }
  .top_js-kv {
    --scale:calc(var(--progress) * -.2);
    height:auto;
    aspect-ratio:4/3;
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:100%;
    mask-size:100%;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-image:url(/recruit/assets/img/top/kv_mask.svg);
    mask-image:url(/recruit/assets/img/top/kv_mask.svg);

    @media (width > 767px) {
      grid-area:img;
    }
    @media (width <= 767px) {
      margin-inline:4.5rem -1.0rem;
    }
    .splide__slide {
      img {
        transform:scale(calc(1.2 + var(--scale))) translateZ(0);
        will-change: transform;
        backface-visibility: hidden;
        transform-origin:100% 25%;
      }
    }
  }
  .f_copy {
    font-size:1.5rem;
    letter-spacing: .15em;
    line-height:1;
    @media (width > 767px) {
      padding-bottom:6.8rem;
      grid-area: copy;
    }
    @media (width <= 767px) {
      margin-top:2.4rem;
      text-align: center;
      font-size:1.2rem;
      letter-spacing: .09em;
    }
  }
  hr {
    margin-top:-2.0rem;
    border:none;
    border-bottom:1px solid var(--cc-gray-A);
    @media (width <= 767px) {
      margin-top:2.0rem;
    }
  }
  .copy {
    font-size:10.4rem;
    line-height:1.5;
    letter-spacing: .05em;
    text-align: center;
    position:relative;
    color:#ABABAB;
    @media (width <= 767px) {
      margin-top:1.8rem;
      font-size:2.3rem;
    }

    .c01 {
      color:transparent;
      background-image:linear-gradient(
        to right,
        #6892EE 40%,
        #2FD38F 120%
      );
      -webkit-background-clip:text;
      background-clip:text;
    }
    .c02 {
      color:var(--cc-blue-A);
    }
  }
}


/* 冒頭
----------------------------------------------------------------------------- */
.top-intro {
  margin-block:20.0rem 18.0rem;
  position:relative;
  @media (width > 767px) {
    display:grid;
    grid-template-columns: 1fr 48.0rem;
    padding-left:10.0rem;
  }
  @media (width <= 767px) {
    margin-block:8.0rem;
  }

  .vertical {
    position:absolute;
    inset-block:0;
    left:0;

    > span {
      display:block;
      writing-mode: vertical-rl;
      font-size:1.4rem;
      line-height:1;
      letter-spacing: .1em;
      position:sticky;
      top:calc(50% + (var(--header-height) / 2) - 9.6rem);
    }
  }
  .treat {
    background-color:#fff;
    width:38.0rem;
    position:absolute;
    right:20.0rem;
    opacity:.5;
    z-index: -1;
    @media (width > 767px) {
      top:8.0rem;
    }
    @media (width <= 767px) {
      margin-inline:auto;
      width:17.0rem;
      inset-inline:0;
      bottom:24.6rem;
    }
  }

  .t {
    font-size:1.8rem;
    line-height:2.4;
    letter-spacing: 0;
    @media (width <= 767px) {
      font-size:1.4rem;
      letter-spacing: .03em;
    }
  }
  .t_desc + .t_desc {
    margin-top:1lh;
  }

  .l {
    @media (width <= 767px) {
      margin-top:6.0rem;
    }
  }
  .l_copy {
    margin-bottom:8.4rem;
    font-size:6.0rem;
    line-height:1.5;
    letter-spacing: .1em;
    text-align: right;
    @media (width <= 767px) {
      margin-bottom:2.0rem;
      font-size:2.6rem;
    }
  }
  .imgs {
    img {
      &:nth-child(1) {
        margin-left:auto;
        margin-bottom:-2.0rem;
        position:relative;
        z-index: 1;
        @media (width <= 767px) {
          margin-bottom:-5.0rem;
        }
      }
      &:nth-child(2) {
        margin-bottom:11.0rem;
        @media (width <= 767px) {
          margin-bottom:4.0rem;
        }
      }
      &:nth-child(3) {
        margin-left:auto;
      }
    }
  }

}


/* 仕事を知る
----------------------------------------------------------------------------- */
.top-works {
  padding-block:8.0rem;
  overflow:hidden;
  @media (width > 767px) {
  }
  @media (width <= 767px) {
  }

  > .inner {
    @media (width > 767px) {
      display:grid;
      grid-template-rows:1fr auto auto 1fr;
      grid-template-columns:57.0rem 1fr;
      grid-template-areas:
        "img ."
        "img text"
        "img btns"
        "img ."
      ;
      column-gap:10.0rem;
      padding-inline:5.0rem 10.0rem;
    }
  }

  .t {
    @media (width > 767px) {
      grid-area:text
    }
    @media (width <= 767px) {
    }
  }
  .imgs {
    position:relative;
    @media (width > 767px) {
      grid-area:img;
    }
    @media (width <= 767px) {
      margin-top:5.2rem;
    }
    img {
      position:relative;
      will-change: filter;
      backface-visibility: hidden;
      &:nth-child(1) {
        margin-bottom:-7.6rem;
        filter:blur(calc(48px - (var(--tftl) * 112px)));
        @media (width <= 767px) {
          margin-bottom:-3.6rem;
        }
      }
      &:nth-child(2) {
        margin-left:auto;
        filter:blur(calc(48px - (var(--tftl) * 96px)));
        z-index: 1;
      }
    }
  }
  .b {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2.0rem;
    margin-top:7.2rem;
    @media (width > 767px) {
      grid-area:btns;
    }
    @media (width <= 767px) {
      gap:1.0rem;
      margin-top:6.0rem;
    }
    .l-button-A {
      width:100%;
      min-width:100%;
    }
  }
}


/* 人を知る
----------------------------------------------------------------------------- */
.top-staff {

  @media (width > 767px) {
  }
  @media (width <= 767px) {
  }

  .js-carousel-A {
    @media (width > 767px) {
      margin-inline:-4.0rem;
    }
    @media (width <= 767px) {
      margin-inline:auto;
      width:25.6rem;
    }
    .splide__track {
      padding-bottom:8.0rem;
      @media (width <= 767px) {
        padding-bottom:2.0rem;
      }
    }
    .splide__slide {
      transition-property: transform;
      transition-duration: var(--duration-parallax-A);
      transform:translateY(8.0rem);
      will-change: transform;
      @media (width <= 767px) {
        transform:translateY(2.0rem);
      }
      &:is(.is-active) {
        transform:translateY(0) !important;
      }
      /* slide数により変動:8 */
      &:is(
        .is-prev,
        .is-next,
        .splide__slide--clone.is-active+[id$="slide01"],
        .splide__slide--clone.is-active+[id$="clone08"],
        [id$="slide08"]:has(+.splide__slide--clone.is-active),
        [id$="clone05"]:has(+.splide__slide--clone.is-active)
      ) {
        @media (width > 767px) {
          transform:translateY(4.0rem) !important;
        }
        @media (width <= 767px) {
          transform:translateY(2.0rem) !important;
        }
      }
      > a {
        display:block;
        position:relative;
        .img {
          margin-left:2.0rem;
          position:relative;
          .m-arrow-A {
            border:1px solid var(--cc-black-A);
            position:absolute;
            bottom:2.0rem;
            right:2.0rem;
            @media (width <= 767px) {
              bottom:1.0rem;
              right:1.0rem;
            }
          }
          img {
            @media (width <= 767px) {
              object-fit: cover;
              object-position: center top;
              aspect-ratio: 24/30;
            }
          }
        }
        .initial {
          writing-mode: vertical-rl;
          font-size:6.0rem;
          line-height:.8;
          letter-spacing: .1em;
          z-index: 1;
          position:absolute;
          inset-inline-start: 4.0rem;
          @media (width <= 767px) {
            font-size:3.6rem;
            inset-inline-start: 2.0rem;
          }
        }
        .text {
          margin-right:2.0rem;
          margin-top:-28.8rem;
          padding-top:31.4rem;
          background-color:#fff;
          height:46.0rem;
          padding-inline:4.0rem;
          line-height:2;
          @media (width <= 767px) {
            margin-top:-17.2rem;
            padding-top:20.4rem;
            padding-inline:2.5rem;
            height:32.0rem;
          }
        }
      }
    }
    .js-carousel-pager-A {
      margin-top:4.0rem;
      @media (width > 767px) {
        margin-inline:auto;
        width:90.0rem;
      }
      @media (width <= 767px) {
        margin-top:3.0rem;
        margin-inline:-1.6rem;
      }
    }
  }
  .archive_link {
    margin-top:6.0rem;
    @media (width <= 767px) {
      margin-top:4.0rem;
    }
  }
}


/* 環境・制度を知る
----------------------------------------------------------------------------- */
.top-web {
  position:relative;
  @media (width > 767px) {
  }
  @media (width <= 767px) {
    padding-block:6.0rem 8.0rem;
  }

  > .inner {
    @media (width > 767px) {
      display:grid;
      grid-template-columns: 50.0rem 1fr;
      column-gap: 17.0rem;
    }
  }

  .imgs {
    position:relative;
    @media (width <= 767px) {
      display:grid;
      gap:.8rem;
    }
    .js-infiniteloop {
      --loop-duration:50s;
      @media (width > 767px) {
        position:absolute;
        inset-block:0;
      }
      @media (width <= 767px) {
        --loop-duration:40s;
      }
      &.imgs01 {
        @media (width > 767px) {
          left:0;
        }
      }
      &.imgs02 {
        @media (width > 767px) {
          right:0;
        }
      }
      .item {
        display:flex;
        gap:2.0rem;
        @media (width > 767px) {
          padding-top:2.0rem;
          flex-direction: column;
        }
        @media (width <= 767px) {
          padding-right:.8rem;
          gap:.8rem;
        }
        > img {
          flex-shrink: 0;
        }
      }
    }
  }
  .t {
    @media (width > 767px) {
      padding-block:20.0rem;
      padding-right:10.0rem;
    }
    @media (width <= 767px) {
      margin-top:6.0rem;
    }
  }
  .t .l-heading-B {
    @media (width <= 767px) {
      margin-right:-2.5rem;
    }
  }
  .t_b {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2.0rem;
    margin-top:3.6rem;
    @media (width > 767px) {
      grid-area:btns;
    }
    @media (width <= 767px) {
      gap:1.0rem;
      margin-top:2.4rem;
    }
    .l-button-A {
      width:100%;
      min-width:100%;
    }
  }
  .bg {
    background-color:#2A2B38;
    position:absolute;
    inset:0;
    z-index: -2;
    overflow: hidden;
    &::before {
      content:"";
      background-color:#343434;
      opacity:.4;
      mix-blend-mode: multiply;
      position:absolute;
      inset:0;
    }
  }
  .bg_treat {
    text-align: right;
    font-size:11.0rem;
    letter-spacing: .1em;
    line-height:1.2;
    color:#fff;
    opacity:.1;
    position:relative;
    top:calc(.35em - .5lh);
    right:-.15em;
    z-index: -1;
    white-space: nowrap;
    @media (width <= 767px) {
      font-size:4.8rem;
      top:38.8rem;
      right:0;
    }
  }
}


/* 会社を知る
----------------------------------------------------------------------------- */
.top-about {

  @media (width > 767px) {
  }
  @media (width <= 767px) {
  }

  > .inner {
    position:relative;
  }
  .t {
    @media (width > 767px) {
      width:58.0rem;
    }
    @media (width <= 767px) {
    }
  }
  .t_b {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2.0rem;
    margin-top:7.2rem;
    @media (width > 767px) {
      grid-area:btns;
    }
    @media (width <= 767px) {
      gap:1.0rem;
      margin-top:4.8rem;
    }
    .l-button-A {
      width:100%;
      min-width:100%;
    }
  }

  .treat {
    background-color:#fff;
    width:38.0rem;
    position:absolute;
    top:0;
    right:2.0rem;
    opacity:.5;
    z-index: -1;
    @media (width > 767px) {
    }
    @media (width <= 767px) {
      width:17.0rem;
      right:0;
    }
  }

  .c {
    display:grid;
    margin-top:18.0rem;
    @media (width > 767px) {
      grid-template-columns:74.0rem 1fr;
      gap:10.0rem;
    }
    @media (width <= 767px) {
      margin-top:8.0rem;
      gap:5.6rem;
    }
  }
  .c_i {

  }
  .c_i_img {
    position:relative;
    color:#fff;

    &.-crosstalk {
      &::after {
        content:"";
        margin:auto;
        width:11.0rem;
        height:auto;
        aspect-ratio:110/104;
        -webkit-mask-position:center;
        mask-position:center;
        -webkit-mask-size:100%;
        mask-size:100%;
        -webkit-mask-repeat:no-repeat;
        mask-repeat:no-repeat;
        -webkit-mask-image:url(/recruit/assets/img/top/about-card01-treat.svg);
        mask-image:url(/recruit/assets/img/top/about-card01-treat.svg);
        background-color:currentColor;
        position:absolute;
        inset:10% 0 0 30%;
        z-index: 1;
        @media (width <= 767px) {
          width:7.2rem;
          inset:15% 0 0 50%;
        }
      }
    }
  }
  .c_i_img_caption {
    margin:auto;
    width:fit-content;
    height:fit-content;
    position:absolute;
    inset:0;
    font-size:3.2rem;
    line-height:1.2;
    letter-spacing: .05em;
    text-align: center;
    @media (width <= 767px) {
      font-size:2.6rem;
    }
  }
  .c_i_name {
    display:flex;
    justify-content:space-between;
    margin-top:2.0rem;
    font-size:1.8rem;
    line-height:1.8;
    @media (width <= 767px) {
      margin-top:1.6rem;
      font-size:1.4rem;
    }

    .m-arrow-A {
      flex-shrink: 0;
    }
  }
}


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