/*= 基本 =*/
@font-face{
  font-family: "NuFKG";
  font-weight: normal;
  src:url("https://www.font-stream.com/fontdata/NuFKG-none.woff2?token=asidoito0usk72bb") format("woff2"),
  url("https://www.font-stream.com/fontdata/NuFKG-none.woff?token=asidoito0usk72bb") format("woff");
}
@font-face{
  font-family: "Ruika_sub";
  font-weight: normal;
  src:url("../font/Ruika-09-sub.woff2") format("woff2"),
  url("../font/Ruika-09-sub.woff") format("woff");
}
@media screen and (max-width: 768px) {
  .section_header {
  }
}
@media screen and (min-width: 768px) {
  #site-header {
    transition: background-color .25s ease;
  }
}

.section_body {
  padding: 1rem 0;
  line-height: 1.6;
}

.section_body p{
  padding-bottom: 1rem;
}

@media screen and (min-width: 768px) {
  .grid_wrapper {
    display: grid;
    grid-template-columns:1fr 2fr;
  }
  .grid_wrapper .section_body{
    padding: 0 0 0 2rem;
    border-left: 8px solid #001751;
  }
}

/*= キービジュアル =*/
.main_image {
  position:relative ;
  background: #001751;
  overflow: hidden;
}

.main_image .catch_wrapper {
  position: relative;
  top: 0;
  bottom: 0;
  color: #fff;
  width: 200%;
  left: -50%;
  padding: 156px 14px 78px;
  margin:0 auto ;
  text-align: center;
}

.catch_wrapper .catch_copy {
  position: relative;
  font-size: 3.25rem;
  font-weight: 900;
  font-family: "Ruika_sub";
}

/*= アニメーション =*/
@keyframes sub {
  0% {
    transform:translateX(130%);
  }
  2%{
    transform-origin:center center;
    transform:translateX(130%) scale(1.2,.9);
  }
  3%{
    transform-origin:center left;
  }
  5%{
    transform:translateX(130%) scale(.8,1.1);
  }
  15%{
    transform:translateX(130%) scale(.8,1.1);
  }
  20%{
    transform:translateX(90%) scale(.8,1.1);
  }
  30%{
    transform:translateX(90%) scale(1,1);
  }
  32%{
    transform-origin:center center;
    transform:translateX(90%) scale(1.2,.9);
  }
  33%{
    transform-origin:center left;
  }
  35%{
    transform:translateX(90%) scale(.8,1.1);
  }
  45%{
    transform:translateX(90%) scale(.8,1.1);
  }
  50%{
    transform:translateX(40%) scale(.8,1.1);
  }
  60%{
    transform:translateX(40%) scale(1,1);
  }
  62%{
    transform-origin:center center;
    transform:translateX(40%) scale(1.2,.9);
  }
  63%{
    transform-origin:center left;
  }
  65%{
    transform:translateX(40%) scale(.8,1.1);
  }
  75%{
    transform:translateX(40%) scale(.8,1.1);
  }
  80%{
    transform:translateX(0%) scale(.8,1.1);
  }
  90%{
    transform:translateX(0%) scale(1,1);
  }
  95%{
    color: #fff;
  }
  100%{
    transform:translateX(0%) scale(1,1);
    color: #00AEFF;
  }
}

@keyframes main {
  0% {
    transform: translateX(100%);
    color: #fff;
  }
  15%{
    transform:translateX(100%);
  }
  30%{
    transform:translateX(60%);
  }
  45%{
    transform:translateX(60%);
  }
  60%{
    transform:translateX(30%);
  }
  75%{
    transform:translateX(30%);
  }
  90%{
    transform:translateX(0%);
    color: #fff;
  }
  95%{
    color: #FF2D5F;
  }
  100%{
    transform:translateX(0%);
    color: #FF2D5F;
  }
}
.catch_wrap_2 {
  position: relative;
  .main {
    transform: translateX(100%);
    display: inline-block;
    animation: main 6s ease forwards;
    animation-delay: 2s;
  }
  .sub {
    transform: translateX(140%);
    display: inline-block;
    animation: sub 6s ease forwards;
    animation-delay: 2s;
  }
}

@media screen and (min-width: 768px) {
  .catch_wrapper .catch_copy {
    font-size: 6rem;
  }
}

.feature_link{
  text-align: center;
}
.feature_link .feature_btn {
  display: block;
  border-radius: 4px;
  height:100px;
  position: relative;
  border:4px solid #FFF500 ;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: 1rem;
  background-size: cover;
  position: relative;
  transition: background-image .25s ease;
}

.feature_link .feature_btn::before {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 4px;
  position: absolute;
  background: #fff;
  opacity: .2;
  transition: opacity .25s ease;
}

.feature_link .feature_btn:hover::before {
  opacity: 0;
}

.feature_link .feature_txt {
  color:#FFF500;
  font-size: 3rem;
  vertical-align: sub;
  padding-right: 4px;
  font-weight: 700;
}

.feature_link .link_job {
  background-image:url('../img/link_works_blur.jpg') ;
}
.feature_link .link_job:hover {
  background-image:url('../img/link_works.jpg') ;
}

.feature_link .link_interview {
  background-image:url('../img/link_interview_blur.jpg') ;
}

.feature_link .link_interview:hover {
  background-image:url('../img/link_interview.jpg') ;
}

.feature_link .link_discussion {
  background-image:url('../img/link_company_blur.jpg') ;
}
.feature_link .link_discussion:hover {
  background-image:url('../img/link_company.jpg') ;
}


@media screen and (min-width: 1024px) {
  .feature_link{
    display: grid;
    align-items: center;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    grid-template-columns:repeat(3,1fr);
    gap:3rem;
    top:calc(100% - 78px);
  }
  .feature_link .feature_btn {
    height: 200px;
    position: relative;
  }
  .feature_link .feature_btn:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: transparent 15px solid;
    border-top: #FFF500 30px solid;
    margin: auto;
    top: 100%;
    left: 0;
    right: 0;
  }
  .feature_link .feature_txt {
    display: block;
  }
}

@media screen and (min-width: 1024px) {
  .feature_link{
    width: 75%;
  }
}

/*= ピックアップ =*/
.pickup_section{
  background: #F2FBFF;
  position: relative;
  .section {
    overflow: hidden;
  }
  .section_header{
    text-align: center;
  }
  .section_title {
    display: inline-block;
    font-weight: 700;
    font-size: 2rem;
    @media screen and (min-width: 414px) {
      font-size: 2.25rem;
    }
    @media screen and (min-width: 1024px) {
      font-size: 3rem;
    }
    line-height: 1.2;
    margin-bottom: 2rem;
    border-bottom: none;
    position: relative;
  }
  .section_title::before {
    content: "";
    width: 418px;
    height: 149px;
    background-image:url("../img/front_txt_pickup.png");
    background-size:contain;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 0;
    left: -40px;
    top: -40px;
    @media screen and (min-width: 768px) {
      top: -60px;
      left: -20px;
    }
    @media screen and (min-width: 1024px) {
      left: 25px;
    }
  }
  .section_title .title_inner,
  .title_deco{
    position: relative;
    z-index: 2;
  }
  .member_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .list_item  {
      width: 50%;
      padding: .875rem;
      display:flex;
      flex-direction:column;
      @media screen and (min-width: 1024px) {
        width: 25%;
        padding: 1.5rem;
      }
    }
  }  
  @media screen and (min-width: 1024px) {
    margin-bottom: 156px;
    .section{
      padding: 117px 0;
    }
  }
  .member img {
    border-radius: 100%;
    border:6px solid #eee ;
  }
  .member_anzai{
    .item_comment{
      background: #98DD40;
      border: 4px solid #98DD40;
      &::before{
        border-top: 16px solid #98DD40;
      }
    } 
    img{
      border-color:#98DD40 ;
    }
  }
  .member_takahasi{
    .item_comment{
      background: #FF7A40;
      border: 4px solid #FF7A40;
      &::before{
        border-top: 16px solid #FF7A40;
      }
    } 
    img{
      border-color:#FF7A40 ;
    }
  }
  .member_hosino{
    .item_comment{
      background: #B67DFF;
      border: 4px solid #B67DFF;
      &::before{
        border-top: 16px solid #B67DFF;
      }
    } 
    img{
      border-color:#B67DFF ;
    }
  }
  .member_itakawa{
    .item_comment{
      background: #F2D640;
      border: 4px solid #F2D640;
      &::before{
        border-top: 16px solid #F2D640;
      }
    } 
    img{
      border-color:#F2D640 ;
    }
  }

  .item_comment {
    color: #001751;
    margin-bottom: 24px;
    padding: 8px;
    border-radius: 4px;
    flex-grow:1;
    position: relative;
    &::before{
      content: "";
      width: 0;
      height: 0;
      position: absolute;
      border: 8px solid transparent;
      margin: auto;
      right: 0;
      left: 0;
      top: calc(100% + 4px);
    }
  }
  .pickup_link {
    text-align: center;
    font-size: 1.875rem;
    padding: 48px 14px;
    color: #001751;
    position: relative;
    &::before,&::after{
      content: "";
      width: 24px;
      height: 24px;
      border: 2px solid transparent;
      border-right: 2px solid #001751;
      border-bottom: 2px solid #001751;
      transform: rotate(45deg);
      position: absolute;
      margin: auto;
      left: 0;
      right: 0;
    }
    &::before{
      bottom:6px;
    }
    &::after{
      bottom:12px;
    }
  }
}

/*= 日邦エレックスについて =*/
.aboutus_section{
  padding-top: 72px;
}
.aboutus_section .section_header{
  text-align: center;
}

.aboutus_section .section_title {
  display: inline-block;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 2rem;
  border-bottom: none;
  position: relative;
  font-size: 2rem;
  @media screen and (min-width: 414px) {
    font-size: 2.25rem;
  }
  @media screen and (min-width: 1024px) {
    font-size: 3rem;
  }
}
.aboutus_section .section_title::before {
  content: "";
  width: 418px;
  height: 149px;
  background-image:url("../img/front_txt_aboutus.png");
  background-size:contain;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 0;
  left: -120px;
  top: -60px;
}

.aboutus_section .section_title .title_inner{
  position: relative;
  z-index: 2;
}

.aboutus_section .title_line {
  display: block;
  font-weight: 400;
  font-size: 2rem;
}

.aboutus_section .section_body {
  padding: 3rem;
  background: #F2FBFF;
  font-size: 1.125rem;
}

/*= 募集要項 =*/
.guide_section {
  background: #F2FBFF;
}

/*= 選考のながれ =*/
.flow_section {
  background: #F2FBFF;
}

/*= 応募 =*/
.entry_section .section_header {
  margin-bottom: 2.5rem;
}
.entry_section .section {
  max-width: 100%;
  padding:0;
}
.entry_section .section_title{
  text-align: center;
  border:none;
}

.entry_section .btn-area {
  display: grid;
  grid-template-columns:repeat(2,1fr);
  text-align: center;
}

.entry_section .btn{
  padding: 4rem 1rem;
  display: block;
  font-size: 1.5rem;
  color: #fff;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.entry_section .btn::before {
  content: "";
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transition: opacity .25s ease;
}

.entry_section .btn:hover::before {
  opacity: 1;
}

.entry_section .btn .btn_txt {
  width: 100%;
  position: relative;
  z-index: 2;
}

.entry_section .btn_entry {
  background: #FF2D5F;
}

.entry_section .btn_entry::before {
  background: linear-gradient(0, #FFD43C 0%, #FF2D5F 80%);
}

.entry_section .btn_faq {
  background: #064BB4;
}

.entry_section .btn_faq::before {
  background: linear-gradient(0, #0FE5F2 0%, #064BB4 80%);
}