@charset "UTF-8";

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

.recruit_crosstalk {
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }
}
============================================================================= */
body{
  padding-top: 0;
  background: #EFEFEF;
  color: #000;
}

.recruit_top-kv{
  position: relative;
  height: calc(var(--vh) * 100);
  .kvWrp{
    &[data-kv="1"] .kv1,
    &[data-kv="2"] .kv2,
    &[data-kv="3"] .kv3{
      opacity: 1;
    }
    &.animate-kv2{
      .cloud{
        img{
          animation:kv2-cloud 12s linear infinite;
        }
      }
    }
  }
  .kvImg{
    overflow: hidden;
    position: absolute;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
    transition: opacity 2s;
    opacity: 0;
  }
  .kvWrp{
    position: relative;
    object-fit: cover;
    width: 100%;
    height: 100%;
    .kvFill{
      position: absolute;
      left: 0;
      top: 0;
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }
  .js-imgFrm,.js-imgFrm2{
    img{
      opacity: 0;
      /* transition: opacity 1s; */
    }
    &[data-frame="1"] .f1,
    &[data-frame="2"] .f2,
    &[data-frame="3"] .f3{
      opacity: 1;
    }
  }
  .kvTtl{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    @media (width > 640px) {
      filter: drop-shadow(0 0 38.52px rgba(0, 0, 0, 0.40));
      width: 98rem;
      img{
        position: relative;
        left: 1.6rem;
        top: -2rem;
      }
    }
    @media (width <= 640px) {
      width: 35.67rem;
      img{
        position: relative;
        top: -1.2rem;
      }
    }
  }
  .kvTxt{
    position: absolute;
    top: 10rem;
    
    @media (width > 640px) {
      width: 22.1rem;
    }
    @media (width <= 640px) {
      width: 12.7rem;
    }
  }
  .js-cover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 中央に配置 */
    width: 100%; /* 初期状態は幅100% */
    height: auto;
    aspect-ratio: 16 / 9; /* 16:9比率を保つ */
    @media (width <= 640px) {
      aspect-ratio: 750 / 1336; /* 16:9比率を保つ */
    }
    .w100{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
    }
  }
  
  .kv1{
    .img-1{
      position: absolute;
      bottom: 50%;
      @media (width > 640px) {
        left: 37%;
        width: 32%;
        margin-bottom: -13%;

        @media (max-aspect-ratio: 1016/572) {
          min-width: 500px;
          left: 50%;
          margin-left: -204px;
          margin-bottom: -207px;
        }
      }
      @media (width <= 640px) {
        margin-bottom: -10rem;
        width: 29rem;
      }
      img{
        width: 100%;
        animation:kvimg1-1 4s linear infinite alternate;
      }
    }
    .img-2{
      position: absolute;
      
      right: 50%;
      width: 300px;
      margin-top: 233px;
      margin-right: 333px;
      bottom: 30px;
      @media (min-aspect-ratio: 1016/572) {
        bottom: auto;
        top: 50%;
        width: 20%;
        margin-top: 14.5%;
        margin-right: 20.5%;
      }
      .wave{
        position: absolute;
        left: 0;
        bottom: 0;
        animation:kvimg2-wave 2s linear infinite alternate;
      }
      .chara{
        animation:kvimg2-chara 2s linear infinite alternate;
      }
      img{
        position: relative;
        width: 100%;
        transform-origin: left bottom;
      }
    }
    .kvTxt{
      @media (width > 640px) {
        top: 16.4rem;
        left: 26rem;
      }
      @media (width <= 640px) {
        top: 14rem;
        right: 1.5rem;
      }
    }
  }
  .kv2{
    .cloud{
      @media (width <= 640px) {
        width: 125%;
        left: -20%;
      }
      img{
        object-fit: cover;
        width: 100%;
        height: 100%;
        /* animation:kv2-cloud 12s linear infinite; */
      }
    }
    .hand{
      position: absolute;
      width: 12.5%;
      bottom: 20%;
      left: 79%;
      img{
        transform-origin: left bottom;
        animation:kv2-hand 2.5s linear infinite alternate;
      }
    }
    .kvTxt{
      @media (width > 640px) {
        top: 14rem;
        left: 19rem;
      }
      @media (width <= 640px) {
        top: 8.9rem;
        right: 1.3rem;
      }
    }
  }
  .kv3{
    .kvTxt{
      @media (width > 640px) {
        top: 10.4rem;
        left: 25rem;
      }
      @media (width <= 640px) {
        top: 10.6rem;
        left: 3.8rem;
      }
    }
    .hand{
      position: absolute;
      left: 31%;
      top: 12%;
      width: 45.06%;
      @media (width <= 640px) {
        left: 17%;
        top: 23%;
        width: 91.06%;
      }
      img{
        width: 100%;
        animation:kv3-hand 1.5s linear infinite alternate;
      }
    }
  }
}
@keyframes kvimg1-1 {
	from {
	  transform: rotate(3deg);
	}
	to {
	  transform: rotate(-8deg);
	}
}
@keyframes kvimg2-chara {
	from {
	  transform: rotate(0deg);
	}
	to {
	  transform: rotate(-1.5deg);
	}
}
@keyframes kvimg2-wave {
	from {
	  transform: scale(.95);
	}
	to {
	  transform: scale(.90);
	}
}
@keyframes kv2-cloud {
	from {
	  transform:translateX(0);
	}
	to {
	  transform:translateX(10%);
	}
}
@keyframes kv2-hand {
	from {
	  transform: rotate(0deg);
	}
	to {
	  transform: rotate(-10deg);
	}
}

@keyframes kv3-hand {
	from {
	  transform: rotate(0deg);
	}
	to {
	  transform: rotate(-5deg);
	}
}
.recruit_top-intro{
  background: var(--cc-grn);
  padding: 13.2rem 0 11.7rem;
  @media (width <= 640px) {
    padding: 7.2rem 0 7rem;
  }
  .in{
    display: flex;
    margin: 0 auto;
    @media (width > 640px) {
      justify-content: space-between;
      width: 96rem;
    }
    @media (width <= 640px) {
      flex-direction: column;
      width: 30rem;
      margin: 0 auto 0;
    }
  }
  .txtCopy{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5.3rem;
    @media (width > 640px) {
      margin-left: 5.5rem;
      margin-top: 9.5rem;
    }
    @media (width <= 640px) {
      gap: 2.6rem;
    }
    .txt{
      line-height: 0;
      position: relative;
    }
    .line{
      background: #fff;
      width: 100%;
      bottom: -0.5rem;
      height: 1.1rem;
      @media (width <= 640px) {
        bottom: -.3rem;
        height: .85rem;
      }
    }
    img{
      position: relative;
      width: auto;
      @media (width > 640px) {
        height: 4.3rem;
      }
      @media (width <= 640px) {
        height: 2.57rem;
      }
    }
  }
  .txtarea{
    @media (width > 640px) {
      width: 48rem;
    }
    @media (width <= 640px) {
      margin-top: 4rem;
    }
    .txt{
      font-weight: 700;
      line-height: 290%; /* 49.3px */
      letter-spacing: .14em;
      font-size: 1.7rem;
      @media (width <= 640px) {
        line-height: 274%;
        font-size: 1.5rem;
        letter-spacing: .2em;
        white-space: nowrap;
      }
    }
    .link{
      margin-top: 4rem;
      select{
        background: url(../img/recruit/top/ico-select.svg) center right 2rem /.8rem 1rem no-repeat;
        display: flex;
        align-items: center;
        font-weight: 700;
        border: solid .3rem #fff;
        letter-spacing: .2em;
        font-size: 1.3rem;
        width: 29.2rem;
        height: 4.8rem;
        padding-left: 2.2rem;
        @media (width <= 640px) {
          letter-spacing: .15em;
          width: 100%;
          background-position: center right 2.5rem 
        }
      }
    }
  }
}

.recruit_top-imgList{
  position: relative;
  overflow: hidden;
  height: 23.7rem;
  @media (width <= 640px) {
    height: 13.1rem;
  }
  .sld{
    will-change: transform;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    animation: marquee-left 100s linear infinite;

    img{
      height: 100%;
    }
  }
}
@keyframes marquee-left {
	from {
	  transform: translateX(0%);
	}
	to {
	  transform: translateX(-50%);
	}
}

.recruit_top-required{
  padding: 12.5rem 0 14rem;
  @media (width <= 640px) {
    padding: 5.5rem 0 6.5rem;
  }
  .cnt{
    margin: 0 auto;
    border: solid 1rem var(--cc-grn);
    border-radius: 3.6rem;
    padding-bottom: 12.5rem;
    @media (width > 640px) {
      width: 101rem;
    }
    @media (width <= 640px) {
      width: 31.6rem;
      border-radius: 1.8rem;
      border-width: 0.85rem;
      padding-bottom: 6.2rem;
    }
  }
  .secTtl{
    background: var(--cc-grn);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    line-height: 1;
    font-weight: 700;
    font-size: 2.2rem;
    letter-spacing: .15em;
    border-radius: 0 0 3.6rem 3.6rem;
    width: 40rem;
    height: 9.5rem;
    padding-bottom: 0.6rem;
    @media (width <= 640px) {
      border-radius:0 0 1.8rem 1.8rem;
      width:19.75rem ;
      height: 4.75rem;
      font-size: 1.7rem;
    }
  }
  .kv{
    width: 100%;
    margin: .5rem auto 7.5rem;
    @media (width > 640px) {
      margin: .5rem auto 7.5rem 0;
    }
    @media (width <= 640px) {
      margin-top: 2rem;
      margin-bottom: 5.5rem;
    }
  }
  .in{
    margin: 0 auto;
    width: 76.5rem;
    @media (width <= 640px) {
      width: 26rem;
    }
  }
  .numBlock{
    display: flex;
    flex-wrap: wrap;
    gap:4.4rem 8rem;
    @media (width > 640px) {
      justify-content: space-between;
      gap: 4.4rem 0rem;
    }
    @media (width <= 640px) {
      flex-direction: column;
      gap: 4rem;
    }
    .item{
      position: relative;
      
      @media (width > 640px) {
        box-sizing: content-box;
        padding-left:7.4rem;
        width: 29rem;
      }
      .item__head{
        @media (width <= 640px) {
          display: flex;
          align-items: center;
          gap: 1.1rem;
        }
      }
      .item__num{
        @media (width > 640px) {
          position: absolute;
          left: 0;
          width: 6rem;
          top: -1.3rem;
        }
        @media (width <= 640px) {
          width: 4.5rem;
        }
      }
      .item__ttl{
        letter-spacing: .2em;
        font-weight: 700;
        text-decoration: underline;
        text-underline-offset: 2px;
        font-size: 1.7rem;
        @media (width <= 640px) {
          line-height: normal;
          font-size: 1.6rem;
        }

      }
      .item__txt{
        letter-spacing: 0.22em;
        font-weight: 400;
        line-height: 160%; /* 24px */
        margin-top: .8rem;

        font-size: 1.5rem;
        @media (width > 640px) {
          text-align: justify;
        }
        @media (width <= 640px) {
          margin-top: 1.4rem;
          letter-spacing: .21em;
          font-size: 1.4rem;
        }
      }
    }
  }
  .typeBlock{
    margin-top: 8.4rem;
    @media (width <= 640px) {
      margin-top: 6.5rem;
    }
    .blockTtl{
      text-align: center;
      -webkit-font-smoothing: antialiased;
      background: #000;
      
      border-radius: .7rem;
      color: #FFF;
      font-weight: 700;
      line-height: 1;
      font-size: 2rem;
      letter-spacing: .4em;
      padding: 1.6rem 0;
      margin-bottom: 3rem;
      padding-left: 0.4em;
      @media (width <= 640px) {
        border-radius: .3rem;
        padding: 1.2rem 0;
        font-size: 1.7rem;
        margin-bottom: 2rem;
      }

    }
    .list{
      display: grid;
      grid-template-columns: repeat(4,1fr);
      gap: 1.2rem;
      @media (width <= 640px) {
        grid-template-columns: repeat(2,1fr);
        gap: .6rem;
      }
      li{
        text-align: center;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 1.2rem;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: .175em;
        padding-left: .35em;
        font-size: 1.6rem;

        height: 7.6rem;
        @media (width <= 640px) {
          height: 5.35rem;
          font-size: 1.4rem;
        }
      }
    }
  }
}


.recruit_top-interview{

  .kvBlock{
    position: relative;
    .txtarea{
      position: absolute;
      width: 100%;
      text-align: center;
      
      @media (width > 640px) {
        top: 50%;
        transform: translateY(-50%);
      }
      @media (width <= 640px) {
        top: 16.5rem;
      }
      img{
        margin: 0 auto;
      }
      .kvtxt-1{
        img{
          width: 22.3rem;
          @media (width <= 640px) {
            width: 11.725rem;
          }
        }
      }
      .kvtxt-2{
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 3rem;
        gap: 3.6rem;
        @media (width <= 640px) {
          margin-top: 1.3rem;
          gap: 1.25rem;
        }
        .txtWrp{
          filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.30));
        }
        img{
          height: 11.4rem;
          @media (width <= 640px) {
            height: 3.9rem;
          }
        }
      }
    }
  }
  .cntBlock{
    background: var(--cc-grn);
    padding-bottom: 14.8rem;
    @media (width <= 640px) {
      padding-bottom: 6.05rem;
    }
  }
  .topTxtBlock{
    text-align: center;
    font-weight: 700;
    letter-spacing: .25em;
    line-height: 2.5;
    font-size: 1.7rem;
    padding-top: 8.6rem;
    @media (width <= 640px) {
      padding-top: 2.6rem;
      letter-spacing: .2em;
      line-height: 1.8;
      font-size: 1.5rem;
    }
  }
  .listBlock{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    padding-top: 6rem;
    @media (width > 640px) {
      width: 100rem;
      gap: 4.8rem 9.8rem;
    }
    @media (width <= 640px) {
      padding-top: 3rem;
      width: 29.9rem;
      justify-content: space-between;
      gap:2.6rem 0;
      
    }
    .item{
      @media (width > 640px) {
        width: 26.8rem;
      }
      @media (width <= 640px) {
        width: 13.8rem;
      }
      .item__txtarea{
        letter-spacing: 0;
        position: relative;
        background: #000;
        -webkit-font-smoothing: antialiased;
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: -4rem auto 0;
        border-radius: 1.5rem;
        gap: 1.2rem;
        width: 23rem;
        height: 7.7rem;
        @media (width > 640px) {
          padding-left: 0.4rem;
        }
        @media (width <= 640px) {
          border-radius: .4rem;
          margin-top: -2.1rem;
          width: 12.3rem;
          height: 6.8rem;
          justify-content: flex-start;
          padding-top: .5rem;
          gap: .5rem;
        }
        .txtOdd{
          text-align: center;
          line-height: 1;
          font-size: 1.3rem;
          letter-spacing: .1em;
          @media (width <= 640px) {
            line-height: normal;
            letter-spacing: .2em;
            padding-left: .4em;
            font-size: 1.0rem;
          }
        }
        .txtName{
          text-align: center;
          line-height: 1;
          font-weight: 500;
          letter-spacing: .15em;
          font-size: 1.8rem;
          @media (width <= 640px) {
            padding-left: .2em;
            font-size: 1.4rem;
          }
        }
      }
    }
  }
  .ctBlock{
    margin: 11rem auto 0;
    @media (width > 640px) {
      width: 100.2rem;
    }
    @media (width <= 640px) {
      margin-top:7.75rem;
    }
    .link{
      display: block;
      position: relative;
      .img{
        width: 100%;
      }
      .txtarea{
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        z-index: 2;
        top: 8.2rem;
        right: 3.3rem;
        width: 41rem;
        @media (width <= 640px) {
          width: 28.285rem;
          top: 1.5rem;
          right: 1.36rem;
        }
        .txt{
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          gap: .5rem;
          margin-top: 1.7rem;
          @media (width <= 640px) {
            margin-top: 2.3rem;
          }
          span{
            line-height: normal;
            background: #000;
            -webkit-font-smoothing: antialiased;
            color: #fff;
            font-weight: 400;
            letter-spacing: .1em;
            font-size: 1.5rem;
            padding: .2rem .5rem .5rem .9rem;
            @media (width <= 640px) {
              padding: .2rem 1rem .5rem .9rem;
              font-size: 1.3rem;
            }
          }
        }
      }
    }
  }
}

.recruit_top-system{
  padding-top: 11.2rem;
  @media (width <= 640px) {
    padding-top: 7.8rem;
  }
  .cnt{
    margin: 0 auto;
    background: #fff;
    border-radius: 3.6rem;
    padding-bottom: 11.5rem;
    @media (width > 640px) {
      width: 100rem;
    }
    @media (width <= 640px) {
      border-radius: 1.5rem;
      width: 30rem;
      padding-bottom: 7.5rem;
    }
  }
  .secTtl{
    background: var(--cc-grn);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8.2rem;
    line-height: 1;
    font-weight: 700;
    font-size: 2.2rem;
    letter-spacing: .15em;
    border-radius: 0 0 3.6rem 3.6rem;
    width: 39rem;
    height: 8.6rem;
    @media (width <= 640px) {
      border-radius: 0 0 1.5rem 1.5rem;
      width: 24rem;
      height: 5.4rem;
      font-size: 1.6rem;
      padding-bottom: .2rem;
      margin-bottom: 4rem;
    }
  }
  .listBlock{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto;
    @media (width > 640px) {
      width: 72.4rem;
      gap:5.8rem 0;
    }
    @media (width <= 640px) {
      flex-direction: column;
      gap: 5.25rem;
    }
    .item{
      .item__img{
        margin: 0 auto;
        position: relative;
        overflow: hidden;
        border-radius: 50%;
        width: 21rem;
        @media (width <= 640px) {
          width: 20rem;
        }
        img{
          width: 100%;
        }
      }
      .item__ttl{
        text-align: center;
        line-height: normal;
        font-weight: 700;
        letter-spacing: .2em;
        font-size: 1.6rem;
        margin-top: 1.3rem;
      }
      .item__txt{
        margin: 1.2rem auto 0;
        font-weight: 400;
        letter-spacing: .15em;
        line-height: 1.6;
        font-size: 1.4rem;
        @media (width > 640px) {
          width: 20rem;
        }
        @media (width <= 640px) {
          width: 25.9rem;
          margin-top: 0.6rem;
        }
      }
      .item__btn{
        margin-top: 3rem;
        @media (width <= 640px) {
          margin-top: 2.5rem;
        }
        button{
          border: solid 1px #000;
          margin: 0 auto;
          display: flex;
          align-items: center;
          justify-content: center;
          
          width: 19.3rem;
          height: 3.1rem;

          font-weight: 700;
          letter-spacing: .12em;
          font-size:1.4rem;
          @media (width <= 640px) {
            width: 26rem;
            height: 3.2rem;
          }
        }
      }
    }
  }
}

.recruit_top-btmBtns{
  padding: 9rem 0 8.4rem;
  
  @media (width <= 640px) {
    width: 30rem;
    margin: 0 auto;
    padding: 5rem 0 14.3rem;
  }
  .entryBtnBlock{
    margin-bottom: 8.5rem;
    @media (width <= 640px) {
      margin-bottom: 5.5rem;
    }
    .txt{
      line-height: 1;
      text-align: center;
      letter-spacing: .14em;
      font-size: 1.8rem;
      margin-bottom: 2rem;
      @media (width <= 640px) {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
      }
    }
    .entryBtn{
      display: flex;
      align-items: center;
      justify-content: center;
      background: #000;
      margin: 0 auto;
      width: 45rem;
      height: 9rem;
      @media (width <= 640px) {
        width: 30rem;
        height: 6rem;
      }
      img{
        width: 10rem;
        @media (width <= 640px) {
          width: 6.9rem;
        }
      }
    }
  }
  .clm{
    display: flex;
    justify-content: center;
    gap: 4rem;
    @media (width <= 640px) {
      flex-direction: column;
      gap: 3rem;
    }
    a{
      position: relative;
      -webkit-font-smoothing: antialiased;
      padding-left: 11.2rem;
      @media (width <= 640px) {
        padding-left: 4rem;
      }
      .ico{
        overflow: hidden;
        border-radius: 50%;
        z-index: 1;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 17.4rem;
        @media (width <= 640px) {
          width: 10.9rem;
        }
      }
      .txtarea{
        color: #fff;
        border-radius:3.3rem ;
        display: flex;
        flex-direction: column;
        justify-content: center;
      
        font-weight: 700;
        width: 44.5rem;
        height: 14.3rem;
        font-size: 2.7rem;
        letter-spacing:0.12em;
        padding-left:8.7rem;
        @media (width <= 640px) {
          border-radius:1.6rem ;
          padding-left: 9rem;
          width: 26rem;
          height: 9.4rem;
          font-size: 1.4rem;
        }
        .ttl{
          display: flex;
          align-items: center;
          line-height: 1;
          gap: .6rem;
          @media (width <= 640px) {
            align-items: flex-start;
            flex-direction: column;
          }
          .ttl_txt1{
            letter-spacing: .14em;
            font-size: 3rem;
            @media (width <= 640px) {
              font-size: 1.8rem;
            }
          }
          .ttl_txt2{
            letter-spacing: .2em;
            font-size: 1.4rem;
            @media (width <= 640px) {
              font-size: 1.2rem;
            }
          }
        }
        .linkTxt{
          line-height: 1;
          position: relative;
          letter-spacing: .18em;
          font-size: 1.3rem;
          width: 29.3rem;
          margin-top: 1.5rem;
          @media (width <= 640px) {
            width: 13.8rem;
            font-size: 1rem;
          }
          &:before{
            position: absolute;
            right: 0;
            top: 50%;
            content: '';
            width: 100%;
            height: 1px;
            background: #fff;
          }
          span{
            position: relative;
            padding-right: 1rem;
          }
        }
        &.-blue{
          background: var(--cc-blue);
          .linkTxt span{
            background: var(--cc-blue);
          }
        }
        &.-orange{
          background:#F78B00;
          .linkTxt span{
            background:#F78B00;
          }
        }
      }
    }
  }
  
}