@charset "UTF-8";
@keyframes fadeIn {
  0% {opacity: 0}
  60% {opacity: 1}
}

@-webkit-keyframes fadeIn {
  0% {opacity: 0}
  60% {opacity: 1}
}
@keyframes fadeIn2 {
  0% {opacity: 0}
  60% {opacity: 1}
}

@-webkit-keyframes fadeIn2 {
  0% {opacity: 0}
  60% {opacity: 1}
}
@keyframes fadeIn3 {
  0% {opacity: 0}
  60% {opacity: 1}
}

@-webkit-keyframes fadeIn3 {
  0% {opacity: 0}
  60% {opacity: 1}
}
/*******************モーダル*************************/
@keyframes mmfadeIn {
  from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes mmfadeOut {
  from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes mmslideIn {
from { transform: translateY(15%); }
  to { transform: translateY(0); }
}

@keyframes mmslideOut {
  from { transform: translateY(0); }
  to { transform: translateY(-10%); }
}

.micromodal-slide {
display: none;
}

.micromodal-slide.is-open {
display: block;
}

.micromodal-slide[aria-hidden="false"] .modal__overlay {
animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
will-change: transform;
}

/* ==========================================================================
共通
========================================================================== */ 
  html {
    scroll-padding-top: 88px;
  }
  
  .fadein_left {
    opacity : 0;
    transform : translateX(-30px);
    transition : all 1000ms;
    }
  .fadein_right{
    opacity : 0;
    transform : translateX(30px);
    transition : all 1000ms;
    }
  .fadein_bottom{
    opacity : 0;
    transform : translate(0px, 20px);
    transition : all 1000ms;
    }

  /* 画面内に入った状態 */
  .fadein_left.scrollin,
  .fadein_right.scrollin,
  .fadein_bottom.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }
    .bg_gr{
      background: #f2f2f2;
    }
    .slide-in {
      overflow: hidden;
        display: inline-block;
    }
    
    .slide-in_inner {
      display: inline-block;
    }
    
    /*左右のアニメーション*/
    .leftAnime{
        opacity: 0;/*事前に透過0にして消しておく*/
        transform : translate(0px, 300px);
    }
    
    .slideAnimeLeftRight {
      animation-name:slideTextX100;
      animation-duration:0.8s;
      animation-fill-mode:forwards;
        opacity: 0;
    }
    
    @keyframes slideTextX100 {
      from {
      transform: translateX(-100%); /*要素を左の枠外に移動*/
            opacity: 0;
      }
    
      to {
      transform: translateX(0);/*要素を元の位置に移動*/
        opacity: 1;
      }
    }
    
    .slideAnimeRightLeft {
      animation-name:slideTextX-100;
      animation-duration:0.8s;
      animation-fill-mode:forwards;
        opacity: 0;
    }
    
    
    @keyframes slideTextX-100 {
      from {
      transform: translateX(100%);/*要素を右の枠外に移動*/
        opacity: 0;
      }
    
      to {
      transform: translateX(0);/*要素を元の位置に移動*/
        opacity: 1;
      }
    }

    .text_bold600{
      font-weight: 600;
    }


/* ==========================================================================
スマートフォン
========================================================================== */ 
@media (max-width: 768px) {
  .mv {
    width: 100%;
    height: calc(50vh - 0px);
    margin: 0 auto 60px;
  }

  .mv img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .main_mv{
    width: 100%;
    height: 70vh;
    position: relative;
    overflow: hidden;
  }
  video{
    object-fit: cover;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
  }
  .brands_wrap{
    margin-top: 90px;
    /*background-image: url("../img/wave.jpg");
    background-position: 0px 30px;
    background-size: cover;
    background-color:rgba(255,255,255,0.7);*/
    background-blend-mode:lighten;
    position: relative;
    margin-top: 120px;
  }
  
  .brands_wrap h1{
    text-align:center;
    font-size: 1.7rem;
    letter-spacing: .5rem;
    font-weight: 500;
    margin-bottom: 40px;
  }

  .brands_wrap span.bg_text::after{
    content: "Recruit";
    display: block;
    width: 100%;
    position: absolute;
    top:-40px;
    right: 0;
    left: 0;
    margin: 0 auto;
    color: #000;
    opacity: .04;
    font-size: 6.5rem;
    font-weight: 500;
    letter-spacing: -0.1rem;
    font-family: "Shippori Mincho", serif;
  }
  .brands_wrap .text_sm{
    text-align: left;
    font-size: 1.4rem;
    font-weight: 300;
    letter-spacing: .2rem;
    line-height: 2em;
    padding: 0 24px 30px;
  }
  .recruit_index h2{
    text-align: center;
    margin: 60px auto;
    font-size: 1.6rem;
    font-weight: 500;
    padding:0 0 1em;
    border-bottom: 1px solid #48BCC9;
    width: 115px;
    letter-spacing: .2rem;
  }
  .under.recruit {
    background: #fff;
    padding-bottom: 120px;
  }
    .under.recruit2 .brands__mv {
      background-image: url(../img/mv_sp.png);
      padding-bottom: 57%;
    }
  #brand-swiper > .swiper-wrapper {
    -webkit-transition-timing-function: linear !important;
    -o-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
  }
  
  .under.recruit .brands__slider-wrap {
    overflow: hidden;
  }
  .under.recruit .brands__slider-wrap .brands__slider {
    display: flex;
    width: min-content;
  }
    .under.recruit .brands__slider-wrap .brands__slide {
      width: 187px;
    }
    .under.recruit .under__col2.ttl-area .right {
      padding-bottom: 66px;
    }
    .under.recruit .brands-nav {
      margin-bottom: 87px;
    }
    .under.recruit .brands-nav .ac {
      max-width: 85%;
      margin: 0 auto;
    }

    .under.recruit .brands-list {
      max-width: 100%;
      justify-content: space-between;
      margin-bottom: 25px;
      padding: 10px;
    }
    .under.recruit .brands-list__box {
      width: 100%;
      margin-right: 0;
      margin-bottom: 37px;
    }
    .under.recruit .brands-list__box + .brands-list__box {
      border-top: 1px solid #BEBEBE;
      padding-top: 38px;
    }

  
  .under.recruit .brands-list__box:nth-of-type(3n) {
    margin-right: 0;
  }
  .under.recruit .brands-list__link {
    display: block;
    color: #464444;
  }
  
  .under.recruit .brands-list__link:hover .btn-arrow {
    border-bottom-color: transparent;
  }
  .under.recruit .brands-list__link:hover .btn-arrow:after {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-transition: color 0.25s, -webkit-transform 0.45s cubic-bezier(0.08, 0.92, 0.35, 1);
    transition: color 0.25s, -webkit-transform 0.45s cubic-bezier(0.08, 0.92, 0.35, 1);
    transition: transform 0.45s cubic-bezier(0.08, 0.92, 0.35, 1), color 0.25s;
    transition: transform 0.45s cubic-bezier(0.08, 0.92, 0.35, 1), color 0.25s, -webkit-transform 0.45s cubic-bezier(0.08, 0.92, 0.35, 1);
  }
  

  .under.recruit .brands-list .heading {
    text-align: center;
    display: flex;
    justify-content: center;
    margin-bottom: 17px;
  }
  .under.recruit .brands-list .heading__thumb-wrap {
    transition: .3s ease;
    width: 100%;
      margin-bottom: 0;
  }
  .under.recruit .brands-list .heading__ttl {
    font-family: "Poppins", "Noto Sans JP", sans-serif;
    font-size: 1.9rem;
    font-weight: 100;
    line-height: 1.5;
    letter-spacing: 0.06em;
    word-break: break-all;
  }
  .under.recruit .brands-list .heading__ttl .jp {
    display: block;
    font-size: 1.2rem;
    font-weight: 100;
    letter-spacing: 0.04em;
    line-height: 1.7;
  }
    
    .under.recruit .brands-list .heading__ttl-wrap {
      text-align: left;
      width: 44%;
    }

    .job_type{
    position: relative;
    top:-12px;
    color: #fff;
    margin: 0 5px 6px 0;
    font-size: 1.2rem;
  }
  .job_type .job_type_bg{
    background-color:rgba(72,188,201,0.9);
    padding: 4px 12px;
    text-align: center;
    letter-spacing: .1rem;
  }
    
  .under.recruit .brands-list .bottom__ttl {
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.8;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
    margin-top: -28px;
  }
  .under.recruit .brands-list .bottom__txt {
    font-size: 1.2rem;
    line-height: 1.8;
    letter-spacing: 0.04em;
    margin-bottom: 30px;
  }
  .under.recruit .brands-list .bottom__btn:before, .under.recruit .brands-list .bottom__btn:after {
    left: 0;
  }

  .employment{
    display: flex;
  }
  .employment li{
    color: #48BCC9;
    border: 1px #48BCC9 solid;
    padding: 4px 9px;
    margin: 0 5px 6px 0;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: .1rem;
  }
  
  .under.recruit .pagination {
    width: 1100px;
    max-width: 82%;
    margin: 0 auto;
  }

  /************ 求人詳細ページ ************/

.sales_wrap,
.buyer_wrap,
.customer_wrap,
.marketer_wrap,
.st_ope_wrap{
  /*background-image: url("../img/wave.jpg");
  background-position: 0px 30px;
  background-size: cover;
  background-color:rgba(255,255,255,0.7);*/
  background-blend-mode:lighten;
  position: relative;
  margin-top: 100px;
  background: #fff;
  text-align: center;
}
.sales_wrap h1,
.buyer_wrap h1,
.customer_wrap h1,
.marketer_wrap h1,
.st_ope_wrap h1{
  text-align:center;
  font-size: 1.7rem;
  letter-spacing: .5rem;
  font-weight: 500;
  margin-bottom: 60px;
}

.sales_wrap span.bg_text::after{
  content: "Sales position";
  display: block;
  position: absolute;
  bottom:0px;
  right: 0;
  left: 0;
  margin: 0 auto;
  color: #000;
  opacity: .04;
  font-size: 5.5rem;
  font-weight: 500;
  letter-spacing: -0.2rem;
  font-family: "Shippori Mincho", serif;
}
.buyer_wrap span.bg_text::after{
  content: "Product Buyer";
  display: block;
  position: absolute;
  bottom:0px;
  right: 0;
  left: 0;
  margin: 0 auto;
  color: #000;
  opacity: .04;
  font-size: 5.5rem;
  font-weight: 500;
  letter-spacing: -0.2rem;
  font-family: "Shippori Mincho", serif;
}
.customer_wrap span.bg_text::after{
  content: "Customer";
  display: block;
  overflow: hidden;
  position: absolute;
  bottom:0px;
  right: 0;
  left: 0;
  margin: 0 auto;
  color: #000;
  opacity: .04;
  font-size: 5.5rem;
  font-weight: 500;
  letter-spacing: -0.2rem;
  font-family: "Shippori Mincho", serif;
}
.marketer_wrap span.bg_text::after{
  content: "Web Marketer";
  display: block;
  overflow: hidden;
  position: absolute;
  bottom:0px;
  right: 0;
  left: 0;
  margin: 0 auto;
  color: #000;
  opacity: .04;
  font-size: 5.5rem;
  font-weight: 500;
  letter-spacing: -0.2rem;
  font-family: "Shippori Mincho", serif;
}
.st_ope_wrap span.bg_text::after{
  content: "Store Operations";
  display: block;
  overflow: hidden;
  position: absolute;
  bottom:0px;
  right: 0;
  left: 0;
  margin: 0 auto;
  color: #000;
  opacity: .04;
  font-size: 4.8rem;
  font-weight: 500;
  letter-spacing: -0.2rem;
  font-family: "Shippori Mincho", serif;
}
.sales_wrap p,
.buyer_wrap p,
.customer_wrap p,
.marketer_wrap p,
.st_ope_wrap p{
  width: 980px;
}
.sales_wrap .text_sm,
.buyer_wrap .text_sm,
.customer_wrap .text_sm,
.marketer_wrap .text_sm,
.st_ope_wrap .text_sm{
  text-align: center;
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: .6rem;
  line-height: 3em;
  padding-bottom: 15px;
}
.job_details{
  max-width: 1100px;
  margin: 0 auto;
  font-family: "Poppins", "Noto Sans JP", sans-serif;
}
.job_details h2 {
  border-bottom: 1px #e0e0e0 solid;
  position: relative;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 3;
  padding: 0 3px;
  width: 95%;
  margin: 0 auto;
  letter-spacing: .1rem;
}

.job_details h2:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: 1px #48BCC9 solid;
  bottom: -1px;
  left:0;
  width: 25%;
}
.job_details p{
  font-size: 1.2rem;
  line-height: 2.6rem;
  letter-spacing: .1rem;
  padding: 30px 20px 60px;
}
.details_img img{
  width: 100%;
  padding: 0px 50px 60px 50px;
}
.job_details2{
  max-width: 980px;
  margin: 0 auto;
}
.job_details2 table{
  font-family: "Poppins", "Noto Sans JP", sans-serif;
  width: 95%;
  font-size: 1.2rem;
  margin: 20px auto 0 auto;
}
.job_details2 table th{
  background: #f5f5f5;
  text-align: left;
  padding: 15px 10px;
  width: 25%;
  font-weight: 500;
  border-bottom: 2px #fff solid;
  vertical-align: middle;
  line-height: 1.8rem;
}
.job_details2 table td{
  text-align: left;
  padding: 15px;
  line-height: 2;
  background: #fbfbfb;
  border-bottom: 2px #fff solid;
}
.job-entry{
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.job-entry a{
  padding: 20px 60px;
  display: block;
  background: #222;
  color: #fff;
  transition: .2s ease;
}
.job-entry-note{
  margin: 40px 0 20px;
  padding: 0 10px ;
}
.job-entry-note p{
  font-size: 1.3rem;
  line-height: 1.7em;
}

.btn_arrow {
  font-size: 1.3rem;
  letter-spacing: .01em;
  margin-top: 10px;
  /*矢印の基点とするためrelativeを指定*/
  position: relative;
  /*ボタンの形状*/
  border: 1px solid #555;
  padding: 3px 20px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  color: #242323;
  outline: none;
  /*アニメーションの指定*/
  transition: all .2s linear;
}



/*矢印と下線の形状*/
.btn_arrow::before {
  content: "";
  /*絶対配置で下線の位置を決める*/
  position: absolute;
  top: 50%;
  right: -36px;
  /*下線の形状*/
  width: 66px;
  height: 1px;
  background: #48BCC9;
  /*アニメーションの指定*/
  transition: all .2s linear;
}

.btn_arrow::after {
  content: "";
  /*絶対配置で矢印の位置を決める*/
  position: absolute;
  top: 34%;
  right: -31px;
  /*矢印の形状*/
  width: 1px;
  height: 10px;
  background: #48BCC9;
  transform: skewX(45deg);
  /*アニメーションの指定*/
  transition: all .2s linear;
}


  
}

/* ==========================================================================
デスクトップ
========================================================================== */ 
@media (min-width: 1025px) {
  body{
    width: 100%!important;
  }
  .mv {
    width: 100%;
    height: calc(80vh - 88px);
    margin: 0 auto 60px;
  }

  .mv img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .main_mv{
    width: 100%;
    height: 70vh;
    position: relative;
    overflow: hidden;
  }
  video{
    object-fit: cover;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
  }
  .brands_wrap{
    /*background-image: url("../img/wave.jpg");
    background-position: 0px 30px;
    background-size: cover;
    background-color:rgba(255,255,255,0.7);*/
    background-blend-mode:lighten;
    position: relative;
    margin-top: 200px;
    background: #fff;
    text-align: center;
  }
  .brands_wrap h1{
    text-align:center;
    font-size: 2rem;
    letter-spacing: .5rem;
    font-weight: 500;
    margin-bottom: 80px;
  }

  .brands_wrap span.bg_text::after{
    content: "Recruit";
    display: block;
    position: absolute;
    top:-60px;
    right: 0;
    left: 0;
    margin: 0 auto;
    color: #000;
    opacity: .04;
    font-size: 8rem;
    font-weight: 500;
    letter-spacing: -0.1rem;
    font-family: "Shippori Mincho", serif;
  }
  .text_sm{
    text-align: center;
    font-size: 1.6rem;
    font-weight: 300;
    letter-spacing: .6rem;
    line-height: 3em;
    padding-bottom: 15px;
  }

  .recruit_index h2{
    text-align: center;
    margin: 100px auto 70px;
    font-size: 1.7rem;
    font-weight: 500;
    padding:0 0 1em;
    border-bottom: 1px solid #48BCC9;
    width: 115px;
    letter-spacing: .2rem;
  }
  
  .under.recruit {
    background: #fff;
    padding-bottom: 100px;
  }
  
  .under.recruit2 .brands__mv {
    background: url(../img/mv.png) center center/cover no-repeat;
    padding-bottom: 25.5%;
  }
  #brand-swiper > .swiper-wrapper {
    -webkit-transition-timing-function: linear !important;
    -o-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
  }
  .under.recruit .brands__slider-wrap {
    overflow: hidden;
  }
  .under.recruit .brands__slider-wrap .brands__slider {
    display: flex;
    width: min-content;
  }
  .under.recruit .brands__slider-wrap .brands__slide {
    width: 320px;
  }
  .under.recruit .under__col2.ttl-area .left {
    padding: 93px 0 21px;
  }
  .under.recruit .under__col2.ttl-area .right {
    padding-top: 104px;
  }
  .under.recruit .brands-nav .menu__list {
    width: 1100px;
    max-width: 96%;
    margin: 0 auto;
    display: flex;
  }
  .under.recruit .brands-nav .menu__link {
    font-family: "Poppins", "Noto Sans JP", sans-serif;
    color: #464444;
    font-weight: 100;
    letter-spacing: 0.06em;
  }
  .under.recruit .brands-nav .menu__link.current, .under.recruit .brands-nav .menu__link:hover {
    color:#48BCC9;
  }
  .under.recruit .brands-nav--heading {
    margin-bottom: 72px;
    background: #ededed;
    padding: 23px 0 25px;
  }
  .under.recruit .brands-nav--heading .menu__list {
    justify-content: flex-end;
  }
  .under.recruit .brands-nav--heading .menu__item {
    margin-left: 5%;
  }
  .under.recruit .brands-nav--bottom {
    background: none;
    padding: 0;
    margin-bottom: 62px;
  }
  .under.recruit .brands-nav--bottom .menu__list {
    border-top: 1px solid #A2A2A2;
    border-bottom: 1px solid #A2A2A2;
    padding: 24px 0;
    justify-content: center;
  }
  .under.recruit .brands-nav--bottom .menu__item {
    margin: 0 2.2%;
  }
  .under.recruit .brands-nav--bottom .menu__link {
    font-size: 1.3rem;
  }
  .under.recruit .brands-list {
    width: 1100px;
    max-width: 96%;
    margin: 0 auto 53px;
    display: flex;
    flex-wrap: wrap;
  }
  .under.recruit .brands-list__box {
    width: 30%;
    margin-right: 5%;
    margin-bottom: 94px;
  }
  .under.recruit .brands-list__box:nth-of-type(3n) {
    margin-right: 0;
  }
  .under.recruit .brands-list__link {
    display: block;
    color: #464444;
  }
  .under.recruit .brands-list__link:hover .heading__thumb-wrap {
    opacity: 0.8;
  }
  .under.recruit .brands-list__link:hover .btn-arrow {
    border-bottom-color: transparent;
  }
  .under.recruit .brands-list__link:hover .btn-arrow:after {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-transition: color 0.25s, -webkit-transform 0.45s cubic-bezier(0.08, 0.92, 0.35, 1);
    transition: color 0.25s, -webkit-transform 0.45s cubic-bezier(0.08, 0.92, 0.35, 1);
    transition: transform 0.45s cubic-bezier(0.08, 0.92, 0.35, 1), color 0.25s;
    transition: transform 0.45s cubic-bezier(0.08, 0.92, 0.35, 1), color 0.25s, -webkit-transform 0.45s cubic-bezier(0.08, 0.92, 0.35, 1);
  }

  .under.recruit .brands-list .heading {
    text-align: center;
  }
  .under.recruit .brands-list .heading__thumb-wrap {
    transition: .3s ease;
  }
  .under.recruit .brands-list .heading__ttl {
    font-family: "Poppins", "Noto Sans JP", sans-serif;
    font-size: 1.3rem;
    font-weight: 100;
    line-height: 1.7;
    letter-spacing: 0.06em;
    word-break: break-all;
  }
  .under.recruit .brands-list .heading__ttl .jp {
    display: block;
    font-size: 1.2rem;
    font-weight: 100;
    letter-spacing: 0.04em;
  }
  .job_type{
    position: relative;
    top:-7px;
    color: #fff;
    margin: 0 5px 6px 0;
    font-size: 1.2rem;
  }
  .job_type .job_type_bg{
    background-color:rgba(72,188,201,0.8);
    padding: 4px 12px;
    text-align: center;
    letter-spacing: .1rem;
    
  }
  
  .under.recruit .brands-list .bottom__ttl {
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.9;
    letter-spacing: 0.04em;
    margin-bottom: 7px;
    margin-top: -16px;
  }
  .under.recruit .brands-list .bottom__txt {
    font-size: 1.3rem;
    line-height: 1.9;
    letter-spacing: 0.04em;
    margin-bottom: 28px;
  }
  .under.recruit .brands-list .bottom__btn:before, .under.recruit .brands-list .bottom__btn:after {
    left: 0;
  }
  .under.recruit .brands-list .bottom__btn {
    font-size: 1.3rem;
  }
  .under.recruit .brands-list .bottom__btn .btn-txt {
    padding-right: 36px;
  }

  .employment{
    display: flex;
  }
  .employment li{
    color: #48BCC9;
    border: 1px #48BCC9 solid;
    padding: 4px 9px;
    margin: 0 5px 6px 0;
    font-size: 1.1rem;
    letter-spacing: .1rem;
  }

  .under.recruit .pagination {
    width: 1100px;
    max-width: 96%;
    margin: 0 auto;
  }

/************ 求人詳細ページ ************/

.sales_wrap,
.buyer_wrap,
.customer_wrap,
.marketer_wrap,
.st_ope_wrap{
  /*background-image: url("../img/wave.jpg");
  background-position: 0px 30px;
  background-size: cover;
  background-color:rgba(255,255,255,0.7);*/
  background-blend-mode:lighten;
  position: relative;
  margin-top: 200px;
  background: #fff;
  text-align: center;
}
.sales_wrap h1,
.buyer_wrap h1,
.customer_wrap h1,
.marketer_wrap h1,
.st_ope_wrap h1{
  text-align:center;
  font-size: 2rem;
  letter-spacing: .5rem;
  font-weight: 500;
  margin-bottom: 80px;
}

.sales_wrap span.bg_text::after{
  content: "Sales position";
  display: block;
  position: absolute;
  top:-60px;
  right: 0;
  left: 0;
  margin: 0 auto;
  color: #000;
  opacity: .04;
  font-size: 8rem;
  font-weight: 500;
  letter-spacing: -0.1rem;
  font-family: "Shippori Mincho", serif;
}
.buyer_wrap span.bg_text::after{
  content: "Product Buyer";
  display: block;
  position: absolute;
  top:-60px;
  right: 0;
  left: 0;
  margin: 0 auto;
  color: #000;
  opacity: .04;
  font-size: 8rem;
  font-weight: 500;
  letter-spacing: -0.1rem;
  font-family: "Shippori Mincho", serif;
}
.customer_wrap span.bg_text::after{
  content: "Customer";
  display: block;
  position: absolute;
  top:-60px;
  right: 0;
  left: 0;
  margin: 0 auto;
  color: #000;
  opacity: .04;
  font-size: 8rem;
  font-weight: 500;
  letter-spacing: -0.1rem;
  font-family: "Shippori Mincho", serif;
}
.marketer_wrap span.bg_text::after{
  content: "Web Marketer";
  display: block;
  position: absolute;
  top:-60px;
  right: 0;
  left: 0;
  margin: 0 auto;
  color: #000;
  opacity: .04;
  font-size: 8rem;
  font-weight: 500;
  letter-spacing: -0.1rem;
  font-family: "Shippori Mincho", serif;
}
.st_ope_wrap span.bg_text::after{
  content: "Store Operations";
  display: block;
  position: absolute;
  top:-60px;
  right: 0;
  left: 0;
  margin: 0 auto;
  color: #000;
  opacity: .04;
  font-size: 8rem;
  font-weight: 500;
  letter-spacing: -0.1rem;
  font-family: "Shippori Mincho", serif;
}
.sales_wrap p,
.buyer_wrap p,
.customer_wrap p,
.marketer_wrap p,
.st_ope_wrap p{
  width: 980px;
}
.sales_wrap .text_sm,
.buyer_wrap .text_sm,
.customer_wrap .text_sm,
.marketer_wrap .text_sm,
.st_ope_wrap .text_sm{
  text-align: center;
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: .6rem;
  line-height: 3em;
  padding-bottom: 15px;
}
.job_details{
  max-width: 1100px;
  margin: 0 auto;
  font-family: "Poppins", "Noto Sans JP", sans-serif;
}
.job_details h2 {
  border-bottom: 1px #e0e0e0 solid;
  position: relative;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 3;
  padding: 0 10px;
  letter-spacing: .1rem;
}

.job_details h2:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: 1px #48BCC9 solid;
  bottom: -1px;
  left:0;
  width: 20%;
}
.job_details p{
  font-size: 1.4rem;
  line-height: 2.6rem;
  letter-spacing: .1rem;
  padding: 30px 10px 60px;
}
.job_details .details_img{
  display: flex;
  flex-wrap: nowrap;
}
.job_details .details_img img{
  width: 300px;
  padding: 30px;
}
.job_details2{
  max-width: 980px;
  margin: 0 auto;
}
.job_details2 table{
  font-family: "Poppins", "Noto Sans JP", sans-serif;
  width: 100%;
  font-size: 1.3rem;
  margin-top: 50px;
}
.job_details2 table th{
  background: #f5f5f5;
  text-align: left;
  padding: 15px 24px;
  width: 20%;
  font-weight: 500;
  border-bottom: 2px #fff solid;
  vertical-align: middle;
}
.job_details2 table td{
  text-align: left;
  padding: 15px 24px;
  line-height: 2;
  background: #fbfbfb;
  border-bottom: 2px #fff solid;
}
.job-entry{
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
.job-entry a{
  padding: 25px 80px;
  border: 1px #242323 solid;
  display: block;
  color: #464444;
  transition: .2s ease;
}
.job-entry a:hover{
  border: 1px #242323 solid;
  background: #242323;
  color: #fff;
}

.job-entry-note{
  margin: 40px 0 20px;
}
.job-entry-note p{
  text-align: center;
  font-size: 1.3rem;
  line-height: 1.7em;
}


.btn_arrow {
  font-size: 1.3rem;
  letter-spacing: .01em;
  margin-top: 10px;
  /*矢印の基点とするためrelativeを指定*/
  position: relative;
  /*ボタンの形状*/
  border: 1px solid #555;
  padding: 3px 20px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  color: #242323;
  outline: none;
  /*アニメーションの指定*/
  transition: all .2s linear;
}

.btn_arrow:hover {
  background: #242323;
  color: #fff;
}

/*矢印と下線の形状*/
.btn_arrow::before {
  content: "";
  /*絶対配置で下線の位置を決める*/
  position: absolute;
  top: 50%;
  right: -36px;
  /*下線の形状*/
  width: 66px;
  height: 1px;
  background: #242323;
  /*アニメーションの指定*/
  transition: all .2s linear;
}

.btn_arrow::after {
  content: "";
  /*絶対配置で矢印の位置を決める*/
  position: absolute;
  top: 36%;
  right: -31px;
  /*矢印の形状*/
  width: 1px;
  height: 10px;
  background: #242323;
  transform: skewX(45deg);
  /*アニメーションの指定*/
  transition: all .2s linear;
}

/*hoverした際の移動*/
.btn_arrow:hover::before {
  right: -43px;
}

.btn_arrow:hover::after {
  right: -38px;
}


}

/* ==========================================================================
タブレット
========================================================================== */ 
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .tablet{
    display: none;
  }
  .main_mv{
    width: 100%;
    height: 50vh;
    position: relative;
    overflow: hidden;
  }
  video{
    object-fit: cover;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
  }
  .brands_wrap{
    margin-top: 90px;
    /*background-image: url("../img/wave.jpg");
    background-position: 0px 30px;
    background-size: cover;
    background-color:rgba(255,255,255,0.7);*/
    background-blend-mode:lighten;
    position: relative;
    margin-top: 120px;
  }
  
  .brands_wrap h1{
    text-align:center;
    font-size: 1.7rem;
    letter-spacing: .5rem;
    font-weight: 500;
    margin-bottom: 40px;
  }

  .brands_wrap span.bg_text::after{
    content: "Recruit";
    display: block;
    width: 100%;
    position: absolute;
    top:-40px;
    right: 0;
    left: 0;
    margin: 0 auto;
    color: #000;
    opacity: .04;
    font-size: 6.5rem;
    font-weight: 500;
    letter-spacing: -0.1rem;
    font-family: "Shippori Mincho", serif;
  }
  .brands_wrap .text_sm{
    text-align: left;
    font-size: 1.4rem;
    font-weight: 300;
    letter-spacing: .2rem;
    line-height: 2em;
    padding: 0 24px 30px;
  }
  .recruit_index h2{
    text-align: center;
    margin: 60px auto;
    font-size: 1.6rem;
    font-weight: 500;
    padding:0 0 1em;
    border-bottom: 1px solid #48BCC9;
    width: 115px;
    letter-spacing: .2rem;
  }
  
  *:focus {
    outline: none;
    }
    .under.recruit {
      background: #fff;
      padding-bottom: 120px;
    }
    
    .under.recruit2 .brands__mv {
      background: url(../img/mv.png) center center/cover no-repeat;
      padding-bottom: 25.5%;
    }
    #brand-swiper > .swiper-wrapper {
      -webkit-transition-timing-function: linear !important;
      -o-transition-timing-function: linear !important;
      transition-timing-function: linear !important;
    }
    .under.recruit .brands__slider-wrap {
      overflow: hidden;
    }
    .under.recruit .brands__slider-wrap .brands__slider {
      display: flex;
      width: min-content;
    }
    .under.recruit .brands__slider-wrap .brands__slide {
      width: 320px;
    }
    .under.recruit .under__col2.ttl-area .left {
      padding: 93px 0 21px;
    }
    .under.recruit .under__col2.ttl-area .right {
      padding-top: 104px;
    }
    .under.recruit .brands-nav .menu__list {
      width: 1100px;
      max-width: 96%;
      margin: 0 auto;
      display: flex;
    }
    .under.recruit .brands-nav .menu__link {
      font-family: "Poppins", "Noto Sans JP", sans-serif;
      color: #464444;
      font-weight: 100;
      letter-spacing: 0.06em;
    }
    .under.recruit .brands-nav .menu__link.current, .under.recruit .brands-nav .menu__link:hover {
      color:#48BCC9;
    }
    .under.recruit .brands-nav--heading {
      margin-bottom: 72px;
      background: #ededed;
      padding: 23px 0 25px;
    }
    .under.recruit .brands-nav--heading .menu__list {
      justify-content: flex-end;
    }
    .under.recruit .brands-nav--heading .menu__item {
      margin-left: 5%;
    }
    .under.recruit .brands-nav--bottom {
      background: none;
      padding: 0;
      margin-bottom: 62px;
    }
    .under.recruit .brands-nav--bottom .menu__list {
      border-top: 1px solid #A2A2A2;
      border-bottom: 1px solid #A2A2A2;
      padding: 24px 0;
      justify-content: center;
    }
    .under.recruit .brands-nav--bottom .menu__item {
      margin: 0 2.2%;
    }
    .under.recruit .brands-nav--bottom .menu__link {
      font-size: 1.3rem;
    }
    .under.recruit .brands-list {
      width: 1100px;
      max-width: 96%;
      margin: 0 auto 53px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .under.recruit .brands-list__box {
      width: 49%;
      
      margin-bottom: 94px;
    }
    .under.recruit .brands-list__box:nth-of-type(3n) {
      margin-right: 0;
    }
    .under.recruit .brands-list__link {
      display: block;
      color: #464444;
    }
    .under.recruit .brands-list__link:hover .heading__thumb-wrap {
      opacity: 0.8;
    }
    .under.recruit .brands-list__link:hover .btn-arrow {
      border-bottom-color: transparent;
    }
    .under.recruit .brands-list__link:hover .btn-arrow:after {
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
      -webkit-transform-origin: left;
      transform-origin: left;
      -webkit-transition: color 0.25s, -webkit-transform 0.45s cubic-bezier(0.08, 0.92, 0.35, 1);
      transition: color 0.25s, -webkit-transform 0.45s cubic-bezier(0.08, 0.92, 0.35, 1);
      transition: transform 0.45s cubic-bezier(0.08, 0.92, 0.35, 1), color 0.25s;
      transition: transform 0.45s cubic-bezier(0.08, 0.92, 0.35, 1), color 0.25s, -webkit-transform 0.45s cubic-bezier(0.08, 0.92, 0.35, 1);
    }
  
    .under.recruit .brands-list .heading {
      text-align: center;
      margin-bottom: 24px;
    }
    .under.recruit .brands-list .heading__thumb-wrap {
      margin-bottom: 21px;
      transition: .3s ease;
    }
    .under.recruit .brands-list .heading__ttl {
      font-family: "Poppins", "Noto Sans JP", sans-serif;
      font-size: 1.3rem;
      font-weight: 100;
      line-height: 1.7;
      letter-spacing: 0.06em;
      word-break: break-all;
    }
    .under.recruit .brands-list .heading__ttl .jp {
      display: block;
      font-size: 1.2rem;
      font-weight: 100;
      letter-spacing: 0.04em;
    }

    .job_type{
    position: relative;
    top:-12px;
    color: #fff;
    margin: 0 5px 6px 0;
    font-size: 1.2rem;
  }
  .job_type .job_type_bg{
    background-color:rgba(72,188,201,0.9);
    padding: 4px 12px;
    text-align: center;
    letter-spacing: .1rem;
  }
    
    .under.recruit .brands-list .bottom__ttl {
      font-size: 1.4rem;
      font-weight: bold;
      line-height: 1.9;
      letter-spacing: 0.04em;
      margin-bottom: 10px;
      margin-top: -35px;
    }
    .under.recruit .brands-list .bottom__txt {
      font-size: 1.4rem;
      line-height: 1.9;
      letter-spacing: 0.04em;
      margin-bottom: 28px;
    }
    .under.recruit .brands-list .bottom__btn:before, .under.recruit .brands-list .bottom__btn:after {
      left: 0;
    }
    .under.recruit .brands-list .bottom__btn {
      font-size: 1.3rem;
    }
    .under.recruit .brands-list .bottom__btn .btn-txt {
      padding-right: 36px;
    }
  
    .employment{
      display: flex;
    }
    .employment li{
      color: #48BCC9;
      border: 1px #48BCC9 solid;
      padding: 4px 9px;
      margin: 0 5px 6px 0;
      font-size: 1.1rem;
      letter-spacing: .1rem;
    }
  
    .under.recruit .pagination {
      width: 1100px;
      max-width: 96%;
      margin: 0 auto;
    }
  /************ 求人詳細ページ ************/

.sales_wrap,
.buyer_wrap,
.customer_wrap,
.marketer_wrap,
.st_ope_wrap{
  /*background-image: url("../img/wave.jpg");
  background-position: 0px 30px;
  background-size: cover;
  background-color:rgba(255,255,255,0.7);*/
  background-blend-mode:lighten;
  position: relative;
  margin-top: 100px;
  background: #fff;
  text-align: center;
}
.sales_wrap h1,
.buyer_wrap h1,
.customer_wrap h1,
.marketer_wrap h1,
.st_ope_wrap h1{
  text-align:center;
  font-size: 1.7rem;
  letter-spacing: .5rem;
  font-weight: 500;
  margin-bottom: 60px;
}

.sales_wrap span.bg_text::after{
  content: "Sales position";
  display: block;
  position: absolute;
  bottom:0px;
  right: 0;
  left: 0;
  margin: 0 auto;
  color: #000;
  opacity: .04;
  font-size: 5.5rem;
  font-weight: 500;
  letter-spacing: -0.2rem;
  font-family: "Shippori Mincho", serif;
}
.buyer_wrap span.bg_text::after{
  content: "Product Buyer";
  display: block;
  position: absolute;
  bottom:0px;
  right: 0;
  left: 0;
  margin: 0 auto;
  color: #000;
  opacity: .04;
  font-size: 5.5rem;
  font-weight: 500;
  letter-spacing: -0.2rem;
  font-family: "Shippori Mincho", serif;
}
.customer_wrap span.bg_text::after{
  content: "Customer";
  display: block;
  position: absolute;
  bottom:0px;
  right: 0;
  left: 0;
  margin: 0 auto;
  color: #000;
  opacity: .04;
  font-size: 5.5rem;
  font-weight: 500;
  letter-spacing: -0.2rem;
  font-family: "Shippori Mincho", serif;
}
.marketer_wrap span.bg_text::after{
  content: "Web Marketer";
  display: block;
  position: absolute;
  bottom:0px;
  right: 0;
  left: 0;
  margin: 0 auto;
  color: #000;
  opacity: .04;
  font-size: 5.5rem;
  font-weight: 500;
  letter-spacing: -0.2rem;
  font-family: "Shippori Mincho", serif;
}
.st_ope_wrap span.bg_text::after{
  content: "Store Operations";
  display: block;
  position: absolute;
  bottom:0px;
  right: 0;
  left: 0;
  margin: 0 auto;
  color: #000;
  opacity: .04;
  font-size: 5.5rem;
  font-weight: 500;
  letter-spacing: -0.2rem;
  font-family: "Shippori Mincho", serif;
}
.sales_wrap p,
.buyer_wrap p,
.customer_wrap p,
.marketer_wrap p,
.st_ope_wrap p{
  width: 980px;
}
.text_sm{
  text-align: center;
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: .6rem;
  line-height: 3em;
  padding-bottom: 15px;
}
.job_details{
  max-width: 1100px;
  margin: 0 auto;
  font-family: "Poppins", "Noto Sans JP", sans-serif;
}
.job_details h2 {
  border-bottom: 1px #e0e0e0 solid;
  position: relative;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 3;
  padding: 0 3px;
  width: 95%;
  margin: 0 auto;
  letter-spacing: .1rem;
}

.job_details h2:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: 1px #48BCC9 solid;
  bottom: -1px;
  left:0;
  width: 25%;
}
.job_details p{
  font-size: 1.2rem;
  line-height: 2.6rem;
  letter-spacing: .1rem;
  padding: 30px 20px 60px;
  text-align: left;
}
.details_img{
  text-align: center;
}
.details_img img{
  width: 30%;
}
.job_details2{
  max-width: 980px;
  margin: 0 auto;
}
.job_details2 table{
  font-family: "Poppins", "Noto Sans JP", sans-serif;
  width: 95%;
  font-size: 1.2rem;
  margin: 20px auto 0 auto;
}
.job_details2 table th{
  background: #f5f5f5;
  text-align: left;
  padding: 15px 10px;
  width: 25%;
  font-weight: 500;
  border-bottom: 2px #fff solid;
  vertical-align: middle;
  line-height: 1.8rem;
}
.job_details2 table td{
  text-align: left;
  padding: 15px;
  line-height: 2;
  background: #fbfbfb;
  border-bottom: 2px #fff solid;
}
.job-entry{
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.job-entry a{
  padding: 20px 60px;
  display: block;
  background: #222;
  color: #fff;
  transition: .2s ease;
}
.job-entry-note{
  margin: 40px 0 20px;
}
.job-entry-note p{
  text-align: center;
  font-size: 1.3rem;
  line-height: 1.7em;
}


.btn_arrow {
  font-size: 1.3rem;
  letter-spacing: .01em;
  margin-top: 10px;
  /*矢印の基点とするためrelativeを指定*/
  position: relative;
  /*ボタンの形状*/
  border: 1px solid #555;
  padding: 3px 20px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  color: #242323;
  outline: none;
  /*アニメーションの指定*/
  transition: all .2s linear;
}



/*矢印と下線の形状*/
.btn_arrow::before {
  content: "";
  /*絶対配置で下線の位置を決める*/
  position: absolute;
  top: 50%;
  right: -36px;
  /*下線の形状*/
  width: 66px;
  height: 1px;
  background: #48BCC9;
  /*アニメーションの指定*/
  transition: all .2s linear;
}

.btn_arrow::after {
  content: "";
  /*絶対配置で矢印の位置を決める*/
  position: absolute;
  top: 36%;
  right: -31px;
  /*矢印の形状*/
  width: 1px;
  height: 10px;
  background: #48BCC9;
  transform: skewX(45deg);
  /*アニメーションの指定*/
  transition: all .2s linear;
}
  
}