@charset "UTF-8";

/* ———————————————————————————————————————————————————————————————————————————————————————————————————— */

/* MV */

/* ———————————————————————————————————————————————————————————————————————————————————————————————————— */

#contents_mv .contents_wrapper {
    width: 100%;
    min-height: 750px;
    position: relative;
    margin-top: 230px;
}

#contents_mv .contents_wrapper .contents_inner {
  width: 90%;
  margin: auto;
}

#contents_mv .contents_title {
    width: 95%;
    max-width: 530px;
    z-index: 1;
    top: -8%;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
}

#contents_mv .contents_title p {
  color: #005DAC;
  text-align: right;
  width: 95%;
  font-weight: bold;
}

#contents_mv .contents_title h2 {
    font-size: 9.6rem;
    letter-spacing: 0.1em;
    font-weight: 500;
    color: #005DAC;
}

#contents_mv .contents_title_txt {
  text-align: center;
    width: 95%;
    font-size: 2.4rem;
    line-height: 2;
    margin: 120px auto 0 auto;
}

#contents_mv .contents_info_flow {
  max-width: 1016px;
    width: 95%;
    margin: 35px auto 120px auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: left;
}

#contents_mv .contents_info_flow .flowBox {
  width: 254px;
  height: 300px;
  position: relative;
}

.step00 {
  background: #2BB5E2;
}

.step01 {
  background: #1DA3DE;
}

.step02 {
  background: #197AC1;
}

.step03 {
  background: #005DAC;
}

.step04 {
  background: #004199;
}

@keyframes infoBar {
  0% {
    right: -6%;
  }
  25% {
    right: -10%;
  }
  25.1% {
    right: -10%;
  }
  50% {
    right: -6%;
  }
  100% {
    right: -6%;
  }
}


#contents_mv .contents_info_flow .flowBox.step00::after, #contents_mv .contents_info_flow .flowBox.step01::after, #contents_mv .contents_info_flow .flowBox.step02::after, #contents_mv .contents_info_flow .flowBox.step03::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 1px;
  background: #FFF;
  top: 50%;
  right: -6%;
  z-index: 2;
  -webkit-animation: infoBar 1s ease-in-out infinite normal;
  animation: infoBar 1s ease-in-out infinite normal;
}

#contents_mv .contents_info_flow .flowBox .flow_step {
  color: #FFF;
    font-size: 2.4rem;
    position: absolute;
    width: 70%;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    top: 20%;
    line-height: 1.5;
}

#contents_mv .contents_info_flow .flowBox .flow_step span {
  font-size: 1.4rem;
    display: block;
}

#contents_mv .contents_info_flow .flowBox .flow_txt {
  color: #FFF;
    font-size: 1.4rem;
    position: absolute;
    width: 70%;
    height: 90px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    bottom: 12%;
    line-height: 2.2;
}


@media screen and (max-width: 1030px) {

  #contents_mv .contents_wrapper  {
    min-height: auto;
    margin-top: 30%;
  }

}

@media screen and (max-width: 750px) {

  #contents_mv .contents_wrapper  {
    margin-top: 20%;
    padding-top: 30%;
  }

  #contents_mv .contents_title {
    top: 5%;
    max-width: 250px;
  }

  #contents_mv .contents_title h2 {
    font-size: 4.5rem;
  }

  #contents_mv .contents_title_txt {
    margin: 60px auto 0 auto;
    font-size: 2rem;
  }

  #contents_mv .contents_info_flow {
    display: block;
    margin: 30px auto;
  }

  #contents_mv .contents_info_flow .flowBox {
    width: 100%;
    height: 150px;
  }

  @keyframes infoBar_sp {
    0% {
      bottom: -50%;
    }
    25% {
      bottom: -60%;
    }
    25.1% {
      bottom: -60%;
    }
    50% {
      bottom: -50%;
    }
    100% {
      bottom: -50%;
    }
  }

  #contents_mv .contents_info_flow .flowBox.step00::after, #contents_mv .contents_info_flow .flowBox.step01::after, #contents_mv .contents_info_flow .flowBox.step02::after, #contents_mv .contents_info_flow .flowBox.step03::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 30px;
    background: #FFF;
    bottom: -50%;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2;
    -webkit-animation: infoBar_sp 1s ease-in-out infinite normal;
    animation: infoBar_sp 1s ease-in-out infinite normal;
  }

  #contents_mv .contents_info_flow .flowBox .flow_txt {
    height: auto;
    bottom: 20%;
  }

}

/* ———————————————————————————————————————————————————————————————————————————————————————————————————— */

/* 募集概要 */

/* ———————————————————————————————————————————————————————————————————————————————————————————————————— */

#contents_info .contents_wrapper .info_head {
  font-size: 2.4rem;
    text-align: center;
    margin-bottom: 100px;
}

#contents_info .contents_wrapper .info_sub {
  text-align: center;
    line-height: 2;
    margin-bottom: 50px;
}

#contents_info .contents_wrapper .infoBox {
  max-width: 845px;
    width: 95%;
    padding: 45px 0 30px 0;
    margin: 15px auto;
    border-top: 1px solid #777777;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: left;
    -webkit-box-align: center;
	  -ms-flex-align: center;
    align-items: center;
}

#contents_info .contents_wrapper div.infoBox:last-of-type {
  border-bottom: 1px solid #777777;
  margin: 15px auto 120px auto;
}

#contents_info .contents_wrapper .infoBox p {
  width: 200px;
    color: #005DAC;
    padding-right: 60px;
    line-height: 28px;
}

#contents_info .contents_wrapper .infoBox.l2 p {
  line-height: 56px;
}

#contents_info .contents_wrapper .infoBox.l4 p {
  line-height: 112px;
}

#contents_info .contents_wrapper .infoBox.l5 p {
  line-height: 140px;
}

#contents_info .contents_wrapper .infoBox.l6 p {
  line-height: 168px;
}

#contents_info .contents_wrapper .infoBox ul li {
  font-size: 1.4rem;
  line-height: 2;
}

#contents_info .contents_wrapper .infoBox ul li.info_mail {
  color: #005DAC;
  font-size: 1.6rem;
  position: relative;
  padding-left: 30px;
}

#contents_info .contents_wrapper .infoBox ul li.info_mail::before {
  content: '';
  background: url('../images/jobinfo/mail_ico.svg') no-repeat;
  background-size: 100%;
  background-position: center;
  width: 22px;
  height: 15px;
  position: absolute;
  top: 10px;
  left: 0;
}

#contents_info .contents_wrapper .infoBox a {
  color: #005DAC;
    text-decoration: underline;
}

#contents_info .contents_wrapper .infoBox a.contact_button {
  width: 220px;
    height: 60px;
    display: block;
    background: #005DAC;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
    margin-top: 20px;
    position: relative;
    transition: .3s;
    text-decoration: none;
}

#contents_info .contents_wrapper .infoBox a.contact_button:hover {
    background: #2BB5E2;
}

#contents_info .contents_wrapper .infoBox a.contact_button li {
  line-height: 60px;
    text-align: center;
    color: #FFF;
}

#contents_info .contents_wrapper .infoBox a.contact_button li span.info_link_arrow {
  position: absolute;
    top: 36%;
    right: 9%;
    width: 40px;
    height: 14px;
    margin: auto;
    transition: .3s;
}

#contents_info .contents_wrapper .infoBox a.contact_button:hover li span.info_link_arrow {
  right: 6%;
}

#contents_info .contents_wrapper .infoBox a.contact_button li span.info_link_arrow::before, #contents_info .contents_wrapper .infoBox a.contact_button li span.info_link_arrow::after {
  content: "";
  position: absolute;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  background: #FFF;
}

#contents_info .contents_wrapper .infoBox a.contact_button li span.info_link_arrow::before {
  width: 20px;
  height: 3px;
  bottom: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

#contents_info .contents_wrapper .infoBox a.contact_button li span.info_link_arrow::after {
  width: 12px;
  height: 3px;
  top: calc(50%);
  right: -1px;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
}


@media screen and (max-width: 750px) {

  #contents_info .contents_wrapper {
    width: 95%;
    margin: auto;
  }

  #contents_info .contents_wrapper .info_head {
    font-size: 2rem;
    margin-bottom: 30px;
  }

  #contents_info .contents_wrapper .info_sub {
    font-size: 1.4rem;
    margin-bottom: 25px;
  }

  #contents_info .contents_wrapper .infoBox {
    display: block;
    padding: 0 0 30px 0;
    border: none;
  }

  #contents_info .contents_wrapper .infoBox p {
    width: 100%;
    padding: 10px;
    background: #005DAC;
    color: #FFF;
    line-height: 1 !important;
    margin-bottom: 20px;
  }

  #contents_info .contents_wrapper div.infoBox:last-of-type {
    border: none;
    margin: 15px auto 80px auto;
  }

  #contents_info .contents_wrapper .infoBox a.contact_button {
    width: 100%;
  }

  #contents_info .contents_wrapper .infoBox a.contact_button li span.info_link_arrow {
    right: 8%;
  }

  #contents_info .contents_wrapper .infoBox a.contact_button:hover li span.info_link_arrow {
    right: 3%;
  }



}