@charset "UTF-8";

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

Recruit Top CSS

・リクルートトップページ用CSS「.recruit_top-×××」

上記はここに記述する

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


/* キービジュアル
----------------------------------------------------------------------------- */
.recruit_top-kv {
  --tftl-n:calc(var(--tftl) * -1 + 1);
  position:relative;
  z-index: 1;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }

  &[style*="--tftl: 1"] .scene01,
  &:not([style*="--tftl: 1"]) :is(.scene02,.scene02_copy) {
    pointer-events:none;
  }

  > .js-tftl {
    position:absolute;
    @media (width > 640px) {
      top:100lvh;
      height:25lvh;
    }
    @media (width <= 640px) {
      top:100svh;
      height:25lvh;
    }
  }

  :is(.scene01,.scene02,.scene03) {
  }
  :is(.scene01,.scene02) {
    height:100svh;
    z-index: 1;
    position:sticky;
    top:0;
  }
  .scene01 {
    display:flex;
    @media (width > 640px) {
      align-items: center;
      opacity:var(--tftl-n);
    }
    @media (width <= 640px) {
      align-items: flex-start;
    }

    .heading {
      display:grid;
      gap:3.2rem;
      margin-left:auto;
      line-height:1.5;
      @media (width > 640px) {
        margin-top:-40.0rem;
      }
      @media (width <= 640px) {
        gap:1.4rem;
        margin-top:16.0rem;
        opacity:calc(var(--tftl) * -2 + 1);
      }
      .ja {
        font-size:4.6rem;
        letter-spacing: .23em;
        line-height:1.7;
        @media (width > 640px) {
        }
        @media (width <= 640px) {
          font-size:2.7rem;
        }
      }
      .en {
        font-size:2.0rem;
        line-height:1;
        letter-spacing: .1em;
        @media (width > 640px) {
        }
        @media (width <= 640px) {
          font-size:1.6rem;
        }
      }
    }
    .copy {
      margin:auto;
      height:fit-content;
      position:absolute;
      font-size:16.0rem;
      line-height:1;
      letter-spacing: .03em;
      @media (width > 640px) {
        inset:0 -14.0rem -35.0rem;
      }
      @media (width <= 640px) {
        font-size:6.4rem;
        line-height:1.1;
        bottom:7.2rem;
        opacity:calc(var(--tftl) * -3 + 1);
      }
    }
    .scroll {
      display:grid;
      justify-items: center;
      gap:.6rem;
      font-size:1.2rem;
      line-height:1;
      letter-spacing: .05em;
      position:absolute;
      bottom:0;

      &::after {
        content:"";
        display:block;
        width:1px;
        height:3.0rem;
        background-color:var(--cc-white-A);
      }
    }
  }
  .scene02 {
    display:flex;
    justify-content: center;
    margin-top:-100lvh;
    background-color:rgb(from var(--cc-green-D) r g b / .5);
    opacity:var(--tftl);
    mix-blend-mode: multiply;
    @media (width <= 640px) {
      margin-top:-100svh;
    }
  }
  .scene02_copy {
    font-feature-settings: "palt" 0;
    font-size:5.2rem;
    line-height:1.7;
    letter-spacing: .20em;
    z-index: 1;
    @media (width > 640px) {
      margin-top:-100lvh;
      padding-top:16.0rem;
      height:100lvh;
      opacity:var(--tftl);
      position:sticky;
      top:0;
    }
    @media (width <= 640px) {
      margin-top:5lvh;
      margin-bottom:calc(-6.8rem - var(--header-height));
      font-size:2.6rem;
      position:relative;
      z-index: 2;
    }
  }
  .scene03 {
    position:relative;
    z-index: 1;
    @media (width > 640px) {
      display:flex;
      align-items: center;
      margin-left:auto;
      width:50%;
      height:300lvh;
    }
    @media (width <= 640px) {
      padding-top:calc(25lvh + 3.2rem);
      padding-bottom:12.0rem;
    }

    .desc {
      @media (width > 640px) {
        margin-left:auto;
        width:fit-content;
      }
      span {
        display: inline-block;
      }
    }
  }
}



/* 組写真
----------------------------------------------------------------------------- */
.recruit_top-groupphoto {
  display:grid;
  width:100%;
  height:100lvh;
  position:sticky;
  top:0;
  @media (width > 640px) {
    grid-template-rows:50% 50%;
    grid-template-columns:50% 25% 25%;
  }
  @media (width <= 640px) {
    grid-template-rows:25% 25% 25% 25%;
    grid-template-columns:50% 50%;
  }
  .js-groupphoto-splide {
    .splide__track,
    .splide__list,
    .splide__slide {
      height:100%;
    }
    &:nth-child(1) {
      margin-bottom:-1px;
      @media (width > 640px) {
        grid-row:1/2;
        grid-column:1/2;
      }
      @media (width <= 640px) {
        grid-row:1/2;
        grid-column:1/-1;
      }
    }
    &:nth-child(2) {
      @media (width > 640px) {
        grid-row:2/3;
        grid-column:1/2;
      }
      @media (width <= 640px) {
        grid-row:2/3;
        grid-column:1/-1;
        margin-bottom:-1px;
      }
    }
    &:nth-child(3) {
      @media (width > 640px) {
        grid-row:1/-1;
        grid-column:2/3;
        margin-inline:-1px;
      }
      @media (width <= 640px) {
        grid-row:3/-1;
        grid-column:1/2;
        margin-right:-1px;
      }
    }
    &:nth-child(4) {
      margin-bottom:-1px;
      @media (width > 640px) {
        grid-row:1/2;
        grid-column:3/4;
      }
      @media (width <= 640px) {
        grid-row:3/4;
        grid-column:2/3;
      }
    }
    &:nth-child(5) {
      @media (width > 640px) {
        grid-row:2/3;
        grid-column:3/4;
      }
      @media (width <= 640px) {
        grid-row:4/5;
        grid-column:2/3;
      }
    }
  }
}


/* 数字で見るZABO
----------------------------------------------------------------------------- */
.recruit_top-data {
  padding-block:20.0rem;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
    padding-block:11.2rem;
  }

  .l-r_heading-A {
    margin-bottom:10.4rem;
    @media (width <= 640px) {
      margin-bottom:7.2rem;
    }
  }

  .datalist {
    display:grid;
    gap:3.2rem;
    @media (width > 640px) {
      grid-template-rows:repeat(4,auto);
      grid-template-columns:1fr 1fr;
      grid-auto-flow: column;
    }
    .item {
      @media (width > 640px) {
      }
      &:nth-child(1) {
        @media (width > 640px) {
          grid-row:1/3;
          grid-column:1/2;
        }
      }
      &:nth-child(4) {
        @media (width > 640px) {
          grid-row:3/-1;
          grid-column:2/3;
        }
      }
    }
  }
}

.recruit_top-section_wrap {
  margin-top:25dvh;
  @media (width > 640px) {
    height:300dvh;
  }

  .js-tftl {
    position:absolute;
    @media (width > 640px) {
      margin-top:100dvh;
      height:100dvh;
    }
  }
}
.recruit_top-section {
  background-color:#fff;
  position: relative;
  overflow: hidden;
  clip-path: inset(0);
  @media (width > 640px) {
    height:150dvh;
  }
  @media (width <= 640px) {
  }
  .in {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    @media (width > 640px) {
      display:grid;
      grid-template-columns:1fr 1fr;
      grid-auto-flow: column;
    }
    @media (width <= 640px) {
      padding-block:11.2rem 9.6rem;
      background-size:cover;
      background-position:center;
      position:relative;
      background-color:#fff;
      z-index: 1;
    }
  }
  .img {
    @media (width > 640px) {
      grid-column:2/3;
    }
    @media (width <= 640px) {
      position:relative;
      img {
        border-radius:1.2rem;
      }
    }
  }
  .heading {
    width:fit-content;
    height:fit-content;
    font-size:8.8rem;
    line-height:1.15;
    letter-spacing: .05em;
    color:#fff;
    mix-blend-mode: difference;
    z-index: 1;
    @media (width > 640px) {
      margin:auto;
      position:absolute;
      inset:0;
    }
    @media (width <= 640px) {
      margin-block:-.5lh;
      margin-inline:auto;
      font-size:6.4rem;
      line-height:1.15;
      inset-inline:0;
      bottom:-.5lh;
    }
  }
  .textbg {
    position:fixed;
    top:0;
    left:0;
    height:100%;
    z-index:-1;
    background-color:#fff;
    @media (width > 640px) {
      width:51%;
    }
    @media (width <= 640px) {
      width: 100%;
    }
    .textbg-circle-ball {
      position:absolute;
      object-fit:contain;
      @media (width > 640px) {
        width:100rem;
        height:100rem;
      }
      @media (width <= 640px) {
        width:150rem;
        height:150rem;
      }
    }
    .textbg-circle-ball.type01 {
      @media (width > 640px) {
        top: -40rem;
        right: -30rem;
      }
      @media (width <= 640px) {
        top: -10rem;
        right: -7rem;
      }
    }
    .textbg-circle-ball.type02 {
      @media (width > 640px) {
        bottom: -20rem;
        left: -30rem;
      }
      @media (width <= 640px) {
        bottom: -5rem;
        left: -7rem;
      }
    }
    .textbg-circle-ball.type03 {
      @media (width > 640px) {
        top: -30rem;
        left: -30rem;
      }
      @media (width <= 640px) {
        top: -10rem;
        left: -10rem;
      }
    }
    .textbg-circle-ball.type04 {
      @media (width > 640px) {
        bottom: -40rem;
        right: -30rem;
      }
      @media (width <= 640px) {
        bottom: -10rem;
        right: -7rem;
      }
    }
    .textbg-img {
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      object-fit:cover;
      mix-blend-mode: multiply;
      opacity: 0.5;
    }
  }
  .text {
    @media (width > 640px) {
      display:flex;
      align-items:center;
      justify-content: flex-end;
      background-size:cover;
      background-position:center;
    }
    > .inner {
      @media (width > 640px) {
        padding-right:25.6rem;
        width:80.0rem;
        max-width: calc(100% - 8.0rem);
      }
    }
    .catch {
      margin-bottom:4.8rem;
      @media (width <= 640px) {
        margin-block:8.4rem 3.2rem;
      }
    }
    .desc {
      & + .desc {
        margin-top:1lh;
      }
    }
    .name_position {
      display:flex;
      align-items: flex-end;
      gap:2.0rem;
      @media (width > 640px) {
        color:var(--cc-white-A);
        position:absolute;
        right:4.0rem;
        bottom:3.2rem;
      }
      @media (width <= 640px) {
        margin-top:4.8rem;
        justify-content: flex-end;
      }
      .position {
        font-size:1.4rem;
        line-height:1.6;
        letter-spacing: .2em;
        @media (width <= 640px) {
          font-size:1.2rem;
        }
      }
      .name {
        font-size:2.4rem;
        line-height:1.35;
        letter-spacing: .2em;
        @media (width <= 640px) {
          font-size:2.0rem;
        }
      }

    }
  }
}

/* 募集要項・福利厚生
----------------------------------------------------------------------------- */
.recruit_top-join_our_team {
  padding-block:20.0rem;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
    padding-block:11.2rem;
  }

  .l-r_heading-A {
    margin-bottom:10.4rem;
    @media (width <= 640px) {
      margin-bottom:7.2rem;
    }

    .p-r_tg-en_heading-A {
      -webkit-background-clip:text;
      background-image:var(--grad-B);
      background-size: cover;
      color:transparent;
    }
  }

  .intro {
    @media (width > 640px) {
      display:flex;
      align-items: center;
      width:fit-content;
      margin-inline:auto;
      gap:6.4rem;
    }
    .heading {
      @media (width > 640px) {
        text-align: right;
      }
      @media (width <= 640px) {
        margin-bottom:2.4rem;
        text-align: center;
      }
    }
    .desc {
      @media (width <= 640px) {
      }
    }

  }

  .js-infiniteloop {
    --loop-duration:40s;
    padding-top:8.0rem;
    @media (width <= 640px) {
      --loop-duration:28s;
      padding-top:4.0rem;
    }
  }
  .js-infiniteloop-item {
    display:flex;
    align-items: flex-start;

    img {
      border-radius:4.0rem;
      margin-right:7.2rem;
      @media (width <= 640px) {
        border-radius:2.0rem;
        margin-right:2.4rem;
      }
      &:nth-child(even) {
        margin-top:6.4rem;
        @media (width <= 640px) {
          margin-top:3.2rem;
        }
      }
    }
  }
  .l-r_button-A {
    margin-top:3.2rem;
  }
}

/* SelectorName
----------------------------------------------------------------------------- */
.recruit_top-selectorName {
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }
}