@charset "UTF-8";

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

Recruit Common CSS

・リクルート共通用CSS

上記はここに記述する

============================================================================= */
:root{
  --cc-black-rcrt:#000;
  --cc-grn:#D2FF37;
  --cc-blue:#0019DF;
  --ff-arialB:"Arial Black",Arial Black, Arial Bold, Gadget, sans-serif;;
  --ff-helvetica:"Helvetica Neue", Helvetica, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Arial, "Yu Gothic", Meiryo, sans-serif;
}
._pc{
  @media (width > 640px) {
  }
  @media (width <= 640px) {
    display: none !important;
  }
}
._sp{
  @media (width > 640px) {
    display: none !important;
  }
  @media (width <= 640px) {
  }
}

/* モーダルサンプル
============================================================================= */
body.is-modal-lock {
  position: fixed;
  width: 100%;
  inset: 0;
  top: calc(-1 * var(--scroll-y));
  overflow: hidden;

  @media (width > 640px) {
    padding-right:var(--scrollbar-w);
  }
}

.js-html_modal-button {
  cursor: pointer;
}

.js-modal {
  opacity: 0;
  transition-property: opacity;
  transition-duration:var(--duration-hover-A);
  width:100vw;
  max-height:100dvh;
  overflow-y:auto;
  

  &[open] {
    display:flex;
    justify-content: center;
    align-items: flex-start;
  }

  &.is-open {
    opacity: 1;
    &::backdrop {
      opacity:1;
    }
  }
  &::backdrop {
    background: rgba(51,51,51,0.3);
    opacity:0;
    transition-property: opacity;
    transition-duration:var(--duration-hover-A);
    backdrop-filter: blur(15px);
  }

  .modal_inner {
    &.is-full {
      width:100%;
    }
    &.-spFull{
      @media (width <= 640px) {
        height: calc(var(--vh) * 100);
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .js-modal-close {
    --my-pb:3.0rem;
    display:flex;
    align-items: center;
    gap:1.2rem;
    padding:2.5rem var(--my-pb);
    width:fit-content;
    font-size:1.8rem;
    line-height:1.2;
    letter-spacing: .05em;
    cursor:pointer;
    position: absolute;

    top: -5rem;
    right: -6rem;
    z-index: 2;
    @media (width <= 640px) {
      right: -4rem;
      --my-pb:2.0rem;
      width:fit-content;

    }
    &:before{
      content: '';
      display: block;
      background: url(../img/recruit/top/modal-close.svg) center center /cover no-repeat;
      width: 4rem;
      height: 1.6rem;
      @media (width <= 640px) {
        width: 2.75rem;
        height: 1.2rem;
      }
    }
  }

  .modal_contents{
    
    .in{
      position: relative;
      background: #fff;
      margin: 15rem auto;
      border: solid .4rem var(--cc-grn);
      border-radius: 6rem;
      
      @media (width > 640px) {
        width: 100rem;
      }
      @media (width <= 640px) {
        width: 30rem;
        border-width: 0.5rem;
        border-radius: 2.5rem;
        margin: 6rem auto;
      }
    }
    .ttl{
      -webkit-font-smoothing: antialiased;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      
      background: var(--cc-grn);
      color: #000;
      width: 34rem;
      height: 6.4rem;
      border-radius:  0 0 2rem 2rem;

      font-weight: 700;
      letter-spacing: .15em;
      font-size: 2rem;
      @media (width <= 640px) {
        border-radius:  0 0 1.2rem 1.2rem;
        width: 22.8rem;
        height: 4.3rem;
        font-size: 1.5rem;
        &.-spW{
          width: 25.8rem;
        }
      }
    }
    .cntClm{
      display: flex;
      margin: 0 auto;
      padding: 8rem 0 12rem;
      @media (width > 640px) {
        width: 76.7rem;
        justify-content: space-between;
      }
      @media (width <= 640px) {
        flex-direction: column;
        width: 26rem;
        padding: 2.9rem 0;
      }
      .img{
        @media (width > 640px) {
          width: 40.9rem;
        }
      }
      .txtBlock{
        display: flex;
        flex-direction: column;
        
        @media (width > 640px) {
          justify-content: space-between;
          width: 31.8rem;
        }
        @media (width <= 640px) {
          margin-top: 2.8rem;
        }
        .txt{
          line-height: 2.33;
          font-size: 1.5rem;
          letter-spacing: .18em;
          @media (width > 640px) {
            margin-top: -.5em;
          }
          @media (width <= 640px) {
            line-height: 1.76;
            font-size: 1.4rem;
          }
        }
        .btn{
          position: relative;
          -webkit-font-smoothing: antialiased;
          background: #000;
          color: #fff;
          display: flex;
          flex-direction: column;
          justify-content: center;
          border-radius: 1rem;
          padding-left: 2.4rem;
          height: 7.2rem;
          gap: .9rem;
          @media (width <= 640px) {
            padding-left: 1.3rem;
            margin-top: 4.5rem;
            height: 6.4rem;
            gap: .7rem;
          }
          &:after{
            content: '';
            background: url(../img/recruit/top/modal-ico-arw.svg) center center /cover no-repeat;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 1.1rem;
            height: .9rem;
            right: 3rem;
            @media (width <= 640px) {
              right: 1rem;
            }
          }
          .btnTxt1{
            line-height: 1;
            letter-spacing: .2em;
            font-size: 1.2rem;
          }
          .btnTxt2{
            line-height: 1;
            letter-spacing: .2em;
            font-weight: 700;
            font-size: 1.4rem;
          }
        }
      }
    }
  }
  
  &#scholarship{
    .scholarshipCnt{
      @media (width > 640px) {
        display: flex;
        height: 100vh;
        align-items: center;
        justify-content: center;
      }
    }
    .in{
      border-radius: 0;
      border: none;
      background: #fff;
      margin: 15rem auto;
      padding: 4.8rem 9.6rem;
      @media (width > 640px) {
        width: 70rem;
      }
      @media (width <= 640px) {
        margin: 6rem auto;
        padding: 3rem 2rem;
      }
      .txt{
        letter-spacing: .18em;
        line-height: 2;
        font-size: 1.5rem;
        @media (width <= 640px) {
          font-size: 1.4rem;
        }
      }
    }
  }
}


.page-container{
  position: relative;
}
.cmnFixEntry{
  z-index: 2;
  position: fixed;
  span{
    display: block;
  }
  @media (width > 640px) {
    display: flex;
    align-items: center;
    top: calc(50% - 12rem);
    right: 0;
    .btn{
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--cc-black-rcrt);
      width: 6.8rem;
      height: 24rem;
      transform: translateX(100%);
      transition: transform .2s;
      svg{
        width: 1.9rem;
        height: 8.6rem;
        fill:var(--cc-grn);
      }
    }
  }
  @media (width <= 640px) {
    width: 100%;
    bottom: 0;
    left: 0;
    
    .btn{
      height: 6.3rem;
      background: var(--cc-grn);
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;  
      transition: background .2s, transform .2s;
      transform: translateY(100%);
    }
   
    span{
      width: 9.35rem;
      height: 2.219rem;
    }
    svg{
      width: 9.35rem;
      height: 2.219rem;
      fill:#000;
      transition: fill .2s;
    }
  }
}
.is-entryIn{
  @media (width > 640px) {
    .cmnFixEntry{
      .btn{
        transform: translateX(0%);
      }
    }
  }
  @media (width <= 640px) {
    .cmnFixEntry{
      .btn{
        transform: translateY(0%);
      }
    }
  }
}
.is-grnArea{
  @media (width <= 640px) {
    .cmnFixEntry{
      .btn{
        background: #000;
        svg{
          fill:var(--cc-grn);
        }
      }
    }
  }
}

.is-cnt-end{
  @media (width <= 640px) {
    .cmnFixEntry{
      position: absolute;
    }
  }
}


.js-iv{
  &.js-fadeIn{
    opacity: 0;
    transition: opacity 1.3s cubic-bezier(0.625, 0, 0.355, 1);
    &.-viewed{
      opacity: 1;
    }
  }
  &.js-txtUp{
    .txtWrp{
      display: inline-block;
      overflow: hidden;
    }
    img{
      transform: translateY(100%);
      transition: transform 1.3s cubic-bezier(0.625, 0, 0.355, 1);
      &.js-tu-del-1{
        transition-delay: .1s;
      }
      &.js-tu-del-2{
        transition-delay: .2s;
      }
      &.js-tu-del-3{
        transition-delay: .4s;
      }
    }
    &.-viewed{
      img{
        transform: translateY(0%);
      }
    }
  }
  &.js-txtUpMulti{
    .txtWrp{
      display: inline-block;
      overflow: hidden;
    }
    img{
      transform: translateY(105%);
      transition: transform 1.3s cubic-bezier(0.625, 0, 0.355, 1);
    }
    &.-viewed{
      img{
        transform: translateY(0%);
      }
    }
  }
  &.js-txtSlide{
    overflow: hidden;
    img{
      transform: translateX(-100%);
      transition: transform 1.3s cubic-bezier(0.625, 0, 0.355, 1);
    }
    &.-viewed{
      img{
        transform: translateX(0%);
      }
    }
  }
  &.js-txtLine{
    position: relative;
    .txtOut{
      position: relative;
      display: inline-block;
      overflow: hidden;
    }
    .txtIn{
      display: inline-block;
      transform: translateY(100%);
      transition: transform 1.3s cubic-bezier(0.625, 0, 0.355, 1) .2s;
    }
    .line{
      position: absolute;
      width: 100%;
      left: 0;
      bottom: 0;
      transform-origin: left bottom;
      transform: scaleX(0);
      transition: transform 1.3s cubic-bezier(0.625, 0, 0.355, 1);
    }
    &.-viewed{
      .txtIn{
        transform: translateY(0%);
      }
      .line{
        transform: scaleX(1);
      }
    }
  }
}