@charset "UTF-8";

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

Recruit Join Our Team CSS

・リクルート募集要項・福利厚生用CSS「.recruit_jot-×××」

上記はここに記述する

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

/* header
----------------------------------------------------------------------------- */
.recruit_jot-header {
  padding-top:14.4rem;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
    padding-top:6.4rem;
  }
  .heading {
    display:grid;
    align-items: center;
    gap:1.6rem;
    margin-bottom:6.4rem;
    text-align: center;
    @media (width <= 640px) {
      margin-bottom:3.2rem;
    }
    .en {
      font-size:16.0rem;
      line-height:1.15;
      letter-spacing: .05em;
      color:transparent;
      -webkit-background-clip:text;
      background-image:var(--grad-B);
      background-size: cover;
      @media (width > 640px) {
      }
      @media (width <= 640px) {
        font-size:7.2rem;
        line-height:1.1;
      }
    }
    .ja {
      font-size:1.6rem;
      line-height:1.6;
      letter-spacing: .2em;
      @media (width > 640px) {
      }
      @media (width <= 640px) {
        font-size:1.4rem;
      }
    }
  }
  .desc {
    margin-bottom:3.2rem;
    @media (width > 640px) {
      margin-inline:auto;
      width:48.0rem;
    }
    @media (width <= 640px) {
      margin-bottom:1.6rem;
      padding-inline:4.4rem;
    }
  }
  .js-infiniteloop {
    --loop-duration:60s;
    @media (width <= 640px) {
      --loop-duration:28s;
    }
  }
  .js-infiniteloop-item {
    display:flex;
    @media (width <= 640px) {
      border-radius:1.2rem;
    }

    > picture {
      &:nth-child(odd) img {
        @media (width <= 640px) {
          margin-top:4.0rem;
        }
      }
      &:nth-child(even) img {
        @media (width > 640px) {
          margin-top:6.4rem;
        }
      }
    }

    img {
      margin-right:8.0rem;
      border-radius:2.8rem;
      flex-shrink:0;

      @media (width <= 640px) {
        margin-right:2.2rem;
        border-radius:1.2rem;
      }
    }
  }
}

/* 社内制度
----------------------------------------------------------------------------- */
.recruit_jot-work_style {
  overflow:hidden;
  padding-block:20.0rem 30.0rem;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
    padding-block:11.2rem 17.6rem;
  }

  > .inner {
    position:relative;
  }

  .header {
    margin-bottom:10.4rem;
    @media (width > 640px) {
      display:flex;
      align-items: flex-start;
      gap:8.0rem;
    }
    @media (width <= 640px) {
      margin-bottom:12.0rem;
    }
    .l-r_heading-A {
      @media (width <= 640px) {
        margin-bottom:3.2rem;
      }
    }
    .desc {
      @media (width > 640px) {
        margin-top:5.2rem;
      }
      @media (width <= 640px) {
      }
    }
  }

  .splide {
    @media (width > 640px) {
      width:130.6rem;
      position:static;
    }
    @media (width <= 640px) {
      padding-right:4.0rem;
      position:relative;
    }
    .splide__track {
      overflow:visible;
    }
    .splide__list {
    }
    .splide__arrows {
      display:flex;
      gap:2.4rem;
      position:absolute;
      right:0;
      z-index: 1;
      @media (width > 640px) {
        top:17.6rem;
      }
      @media (width <= 640px) {
        gap:1.6rem;
        right:0;
        bottom:calc(100% + 3.2rem);
      }
    }
    .splide__arrow {
      --my-color:var(--base-color);
      border-radius:50%;
      border:1px solid;
      width:7.2rem;
      height:7.2rem;
      border-radius:50%;
      @media (width <= 640px) {
        width:4.8rem;
        height:4.8rem;
      }
      > svg {
        width:100%;
        height:auto;
        fill:var(--my-color);
      }
      &.is-prev {
        svg {
          transform:scaleX(-1);
        }
      }
    }
    img {
      border-radius:2.8rem;
      @media (width <= 640px) {
        border-radius:1.2rem;
      }
    }
    .heading {
      padding-block:3.2rem .8rem;
    }
  }
}


/* イベント
----------------------------------------------------------------------------- */
.recruit_jot-event {
  padding-top:1px;
  padding-bottom:14.4rem;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
    padding-bottom:9.6rem;
  }

  .header {
    margin-bottom:11.2rem;
    @media (width > 640px) {
      display:grid;
      grid-template-columns:calc(50% + 8.0rem) 1fr;
      gap:18.0rem;
    }
    @media (width <= 640px) {
      margin-bottom:6.4rem;
    }
    .kv {
      margin-top:-10.0rem;
      @media (width > 640px) {
        height:62.0rem;
      }
      @media (width <= 640px) {
        margin-top:-6.4rem;
      }

      img {
        border-radius:0 2.8rem 2.8rem 0;
        @media (width <= 640px) {
          border-radius:0 1.2rem 1.2rem 0;
        }
      }
    }
    .l-r_heading-A {
      padding-block:14.4rem 4.0rem;
      @media (width <= 640px) {
        padding-block:5.6rem 3.2rem;
      }
    }
  }
}
.recruit_jot-event-contents {
  display:grid;
  align-items: flex-start;
  @media (width > 640px) {
    grid-template-columns: 1fr 1fr;
    gap:10.4rem;
  }
  @media (width <= 640px) {
    gap:6.4rem;
  }

  .item {
    display:grid;
    gap:3.2rem;
    @media (width <= 640px) {
      gap:2.4rem;
    }
    > img {
      border-radius:2.8rem;
      @media (width <= 640px) {
        border-radius:1.2rem;
      }
    }
  }
}


/* 募集要項
----------------------------------------------------------------------------- */
.recruit_jot-job {
  padding-block:20.0rem;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
    padding-block:11.2rem;
  }

  > .inner {
    @media (width > 640px) {
      display:grid;
      grid-template-columns: 1fr 82.8rem;
    }
    @media (width <= 640px) {
    }
  }
  .header {
    @media (width <= 640px) {
      margin-bottom:4.8rem;
    }
    .l-r_heading-A {
      margin-bottom:4.2rem;
      @media (width <= 640px) {
        margin-bottom:3.2rem;
      }
    }
  }
}


/* photogallery
----------------------------------------------------------------------------- */
.recruit_jot-photogallery {
  background-color: #fff;
  --loop-duration:32s;
  @media (width > 640px) {
    padding-bottom: 0.4rem;
  }
  @media (width <= 640px) {
    padding-bottom: 0.4rem;
  }
  .js-infiniteloop-item {
    @media (width > 640px) {
      display:flex;
    }
    @media (width <= 640px) {
      display:grid;
      gap:.4rem;
      width:100%;
      animation:unset;
      &.is-clone {
        display:none !important;
      }
    }
    .photo {
      @media (width > 640px) {
        flex-shrink: 0;
        padding-right:.4rem;
      }
    }
    img {
      @media (width > 640px) {
      }
      @media (width <= 640px) {
        width:100%;
      }
    }
  }
}

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