@charset "UTF-8";

/* ----------------
 * コンテンツエリア
 * ---------------- */


.l-p-recruit .main_img {
    background-image: url(../img/recruit/recruit_main_img01.png);
    background-repeat: no-repeat;
    background-size:contain;
    height: 240px;
    margin: 10rem 0 0;
}


@media screen and (min-width: 768px) {
.l-p-recruit .main_img {
    background-image:url(../img/recruit/recruit_main_img01.png);
    height: 690px;
    background-repeat: no-repeat;
    background-size:cover;
}
}


.l-p-recruit .main_img .inner {
      width: 100%;
      margin-top: 2rem;
      margin-left: auto;
      margin-right: auto;
      padding: 20px;
  }


@media screen and (min-width: 768px) {
  .l-p-recruit .main_img .inner {
    width: 100rem;
    margin-left: auto;
    margin-right: auto;
  }
}

.l-p-recruit .main_img .text-area {
    width: 100%;
    position: absolute;
    margin-top: 2rem;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    top: 2%;
    left: 0%;
    right: 0%;
  }


@media screen and (min-width: 768px) {
  .l-p-recruit .main_img .text-area {
    width: 100rem;
     position: absolute;
    margin-top: 2rem;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    top: 7%;
    left: 0%;
    right: 0%;
  }
}

@media screen and (min-width: 102.1rem) {
      .l-p-recruit .main_img .text-area {
    right: 20%;
  }
}


.l-p-recruit .main_img .text-area h2 {
   font-family: "WindSong", cursive;
    font-size: 3.5rem;
      color: #fff;
  }


@media screen and (min-width: 768px) {
  .l-p-recruit .main_img .text-area h2 {
   font-family: "WindSong", cursive;
      font-size: 5.1rem;
      color: #fff;
  }
}

.l-p-recruit .main_img .text-area-jp {
   font-family: "Klee One", cursive;
    font-size: 2rem;
      color: #fff;
  }


@media screen and (min-width: 768px) {
  .l-p-recruit .main_img .text-area-jp {
   font-family: "Klee One", cursive;
      font-size: 4rem;
      color: #fff;
  }
}

.l-p-recruit .main_img .text-area .text01 {
    font-size: 1.6rem;
      color: #fff;
  }


@media screen and (min-width: 768px) {
  .l-p-recruit .main_img .text-area .text01 {
   font-size: 3rem;
  }
}

.l-p-recruit .main_img .text-area .text02 {
   font-family: "Klee One", cursive;
    font-size: 2.5rem;
      color: #fff;
  }


@media screen and (min-width: 768px) {
  .l-p-recruit .main_img .text-area .text02 {
      margin-left: 15rem;
      font-size: 4rem;
  }
}

 .l-p-recruit h4 {
     font-size: 2rem;
     color: #00A84D;
     margin-bottom: 2rem;
     text-align: left;
}

@media screen and (min-width: 768px) {
    .l-p-recruit  h4 {
        font-size: 2.4rem;
        color: #00A84D;
        margin-bottom: 5rem;
        text-align: left;
}
}


/* ----------------
 * 見出しエリア
 * ---------------- */

.l-p-recruit .caption_area .inner {
      width: 100%;
      margin: 0 auto 5rem;
      padding: 0 20px;
  }


@media screen and (min-width: 768px) {
  .l-p-recruit .caption_area .inner {
      width: 100rem;
      margin-top: 4rem;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 3rem;
      position:relative;
      top: 16%;
      left: 0;
      right: 0;
      margin-bottom: 8rem
  }
}

.caption_area .flexbox-title{
    font-size: 2.5rem;
    margin-bottom: 3rem;
}

.caption_area .flexbox {
    display: block;
    padding: 0px;
}

@media screen and (min-width: 768px) {
.caption_area .flexbox {
    display: flex;
    padding: 0px;
    width: 980px;
    align-items: flex-end;
}
}

.caption_area .flexbox>div {
    width: 100%;
    padding: 10px;
}

@media screen and (min-width: 768px) {
.caption_area .flexbox>div {
    width: 50%;
    padding: 10px;
    
}
}

/* ----------------
 * ピックアップ
 * ---------------- */

.l-p-recruit .pick_up {
    background-image: url(../img/recruit/pickup_img.png);
    background-repeat:repeat;
    background-size:contain;
    height: 100%;
    position: relative;
}


@media screen and (min-width: 768px) {
.l-p-recruit .pick_up {
    background-image:url(../img/recruit/pickup_img.png);
    height: 451px;
    background-repeat: no-repeat;
    background-size:cover;
}
}

.l-p-recruit .pick_up .inner {
      width: 100%;
      margin: 0rem auto 5rem;
      padding: 20px;
    
  }


@media screen and (min-width: 768px) {
  .l-p-recruit .pick_up .inner {
      width: 980px;
      height: 450px;
      margin: 0rem auto 8rem;
      position:relative;
  }
}

.pickup_title{
    font-family: "Jost", sans-serif;
    font-size: 2.5rem;
    margin:0　0 5rem ;
}

@media screen and (min-width: 768px) {
.pickup_title{
    font-family: "Jost", sans-serif;
    font-size: 4.2rem;
    margin: 5rem 0;
}
}

.pickup_title_white{
    font-size: 1.6rem;
    margin: 5rem 0 0 0rem;
    color: #ffffff;
}

@media screen and (min-width: 768px) {
    .pickup_title_white{
        font-size: 3.2rem;
    margin: 5rem 0 0 9rem;
    color: #ffffff;
}
}

.pick_up .flexbox {
    display: block;
    padding: 10px;
    width: 100%;
    
}

@media screen and (min-width: 768px) {
.pick_up .flexbox {
    display: flex;
    padding: 0px;
    width: 980px;
    
}
}

.pick_up .flexbox>div {
    width: 100%;
    padding: 10px;
    background-color: #fff;
    margin:1rem auto;
    text-align: center;
    height: 150px;
}

@media screen and (min-width: 768px) {
.pick_up .flexbox>div {
    width: 33.333%;
    padding: 20px;
    margin:0 1rem;
    height: 200px;
}
 }   


.pick_up h5 {
    font-size: 2rem;
    color: #2B9A29;
    margin-top: 2rem;
    margin-bottom: 1rem;
}


@media screen and (min-width: 768px) {   
.pick_up h5 {
    font-size: 2rem;
    color: #2B9A29;
    margin-top: 3rem;
    margin-bottom: 2rem;
}
 }  

    
.pick_up .contents_txt {
    text-align: left;
}
    
/* ----------------
 * インタビュー
 * ---------------- */
    
.l-p-recruit .interview_area .inner {
    width: 100%;
      margin:0 auto 5rem;
      padding: 20px;
    position:relative;
  }

@media screen and (min-width: 768px) {
  .l-p-recruit .interview_area .inner {
      width: 980px;
      margin: 2rem auto 8rem;
      position: relative;
}
}

    
  .l-p-recruit .interview_area .flexbox {
      display: block;
      padding: 10px;
      width: 100%;
      align-items:flex-start;
      text-align: center;
      background: linear-gradient(180deg, #fff 0%, #fff 40%, #ECF1ED 40%, #ECF1ED 100%);
    border-bottom: none;

}

@media screen and (min-width: 768px) {
  .l-p-recruit .interview_area .flexbox {
      display: flex;
      background: linear-gradient(180deg, #fff 0%, #fff 50%, #ECF1ED 50%, #ECF1ED 100%);
      border-bottom: 3px solid #00A84D;
      margin:0 0 5rem;
      padding: 20px 20px 10px 20px;
      padding: 0px 30px 0px;
      width: 100%;
      align-items: flex-end;
}
}

  .l-p-recruit .interview_area .flexbox>div {
      width: 100%;
      padding: 10px;
      text-align: center;
}

@media screen and (min-width: 768px) {
  .l-p-recruit .interview_area .flexbox>div {
      width: auto;
      padding: 10px;
      text-align: left;
      margin-bottom: 1rem
}
}    
 
@media screen and (min-width: 768px) {
  .l-p-recruit .interview_area .flexbox:nth-child(odd) {
      flex-direction: row-reverse
}
}

@media screen and (min-width: 768px) {
  .l-p-recruit .interview_area .flexbox-img {
    width: 282px;    
}
}



.interview_txt_box {
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 1rem;
    text-align: left;   
}    
    
@media screen and (min-width: 768px) {    
.interview_txt_box {
    width: 576px;
    margin-top: 0rem;
    margin-bottom: 0rem;
    font-size: 1.4rem
}
} 

.name_txt {
    font-size: 2.2rem;
    text-align: left;
}

@media screen and (min-width: 768px) {     
.name_txt {
    font-size: 2.4rem;    
}
}

.name_txt_small {
    font-size: 1.4rem;    
}

/* ----------------
 * スライダー
 * ---------------- */
.l-p-recruit .scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
.l-p-recruit .scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}
.l-p-recruit .scroll-infinity__list--left {
  animation: infinity-scroll-left 20s infinite linear 0.5s both;
}
.l-p-recruit .scroll-infinity__item {
  width: calc(100vw / 5);
}

.l-p-recruit .scroll-infinity__item>img {
  width: 100%;
  height: auto;
}

@media screen and (min-width: 768px) {
.l-p-recruit .scroll-infinity__item>img {
  width: 240px;
  height: 200px;
}
}

/* ----------------
 * ボタンエリア
 * ---------------- */

.l-p-recruit .recruit_link_area .inner {
    width: 100%;
      margin:5rem auto 0;
      padding:0 20px;
  }

@media screen and (min-width: 768px) {
  .l-p-recruit .recruit_link_area .inner {
      width: 980px;
      margin: 8rem auto 0rem;
}
}


.l-p-recruit .recruit_link_area .flexbox {
    display: block;
    padding: 0px;
}

@media screen and (min-width: 768px) {
.l-p-recruit .recruit_link_area .flexbox {
    display: flex;
    padding: 0px;
    width: 980px;
    align-items: flex-end;
}
}

.l-p-recruit .recruit_link_area .flexbox>div {
    width: 100%;
    padding: 10px 0;
}

@media screen and (min-width: 768px) {
.l-p-recruit .recruit_link_area .flexbox>div {
    width: 33.3333%;
    padding: 10px;
    margin: 0 1rem;
    
}
}

 .l-p-recruit .recruit_link_area-h4 {
     font-size: 2.4rem;
     margin-bottom: 2rem;
     text-align: left;
}

@media screen and (min-width: 768px) {
    .l-p-recruit .recruit_link_area-h4 {
        font-size: 2.4rem;
        color: #000000;
        margin-bottom: 5rem;
        text-align: center;
}
}


.arrow_r_b {
  position: relative;
  display: inline-block;
  padding: 22px;
    background-color: #eeeeee;
    width: 100%;
    color: #00A84D;
    
}
.arrow_r_b:before {
  content: '';
  width: 18px;
  height: 18px;
  background: #00A84D;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 5%;
  bottom: 0;
  margin: auto;
}
.arrow_r_b:after {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 7%;
  bottom: 0;
  margin: auto;
}