@charset "UTF-8";


/* ---------------------------------------------------------
 * Common
** --------------------------------------------------------- */
.subtitle {
  position: relative;
  display: inline-block;
  color: #1b328e;
  font-size: 14px;
  font-weight: bold;
}
.subtitle::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 1px;
  background-color: #0033ff;
}
@media (max-width: 1140px) {
}
@media (max-width: 767px) {
  .subtitle {
    font-size: 13px;
  }
}



/* ---------------------------------------------------------
 * #fv_page
** --------------------------------------------------------- */
#fv_page {
  background-image: url(../img/recruit/recruit_cover.png);
}



/* ---------------------------------------------------------
 * #info
** --------------------------------------------------------- */
#info {
  min-width: 1120px;
  background-color: #fff;
  background-image: url(../img/recruit/recruit_img.png);
  background-repeat: no-repeat;
  background-size: calc(calc(calc(100% - 1100px) / 2) + 780px) auto;
  background-position: right center;
}
#info .wrapper {
  position: relative;
  z-index: 1;
  height: 543px;
}
#info .wrapper::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  background-color: #f4f4f4;
  width: 600px;
  height: 100%;
  transform: skewX(30deg);
}
#info .subtitle {
  padding-top: 80px;
}
#info h3 {
  margin-top: 15px;
  font-size: 33px;
  font-weight: bold;
}
#info p {
  width: 500px;
  margin-top: 20px;
  font-size: 14px;
  line-height: 2;
}
#info .company_name {
  margin-top: 30px;
  font-size: 18px;
  font-weight: bold;
}
#info .btn_area {
  margin-top: 30px;
}
#info .sp_msg_img {
  display: none;
}
@media (max-width: 1140px) {
  #info {
    min-width: auto;
    overflow: hidden;
    background: -moz-linear-gradient(60deg, #fff 0%, #fff 50%, #f4f4f4 50%, #f4f4f4 100%);
    background: -webkit-linear-gradient(60deg, #fff 0%, #fff 50%, #f4f4f4 50%, #f4f4f4 100%);
    background: linear-gradient(60deg, #fff 0%, #fff 50%, #f4f4f4 50%, #f4f4f4 100%);
  }
  #info .wrapper {
    height: auto;
    padding: 0 40px 40px;
  }
  #info .wrapper::before {
    display: none;
  }
  #info p {
    width: 100%;
  }
  #info .subtitle {
    padding-top: 50px;
  }
  #info .sp_msg_img {
    display: block;
    height: 300px;
    background-image: url(../img/recruit/recruit_img.png);
    background-size: cover;
    background-position: center;
  }
}
@media (max-width: 767px) {
  #info .wrapper {
    /*padding: 0 10px 40px;*/
    padding: 0 0 40px;
  }
  #info h3 {
    font-size: 28px;
    font-weight: bold;
  }
  #info p {
    /*margin-top: 20px;*/
    font-size: 13px;
  }
  #info .company_name {
    font-size: 15px;
  }
  #info .sp_msg_img {
    height: 330px;
  }
}



/* ---------------------------------------------------------
 * #youkou
** --------------------------------------------------------- */
#youkou {
  padding: 90px 0;
  background: -moz-linear-gradient(60deg, #1b328e 0%, #1b328e 35%, #fff 35%, #fff 80%, #f4f4f4 80%, #f4f4f4 100%);
  background: -webkit-linear-gradient(60deg, #1b328e 0%, #1b328e 35%, #fff 35%, #fff 80%, #f4f4f4 80%, #f4f4f4 100%);
  background: linear-gradient(60deg, #1b328e 0%, #1b328e 35%, #fff 35%, #fff 80%, #f4f4f4 80%, #f4f4f4 100%);
}
#youkou .box {
  padding: 50px 120px;
}
#youkou h3 {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
}
#youkou .tbl {
  margin-top: 40px;
}
@media (max-width: 1140px) {
  #youkou .box {
    padding: 40px 50px;
  }
}
@media (max-width: 767px) {
  #youkou {
    padding: 60px 0;
  }
  #youkou .box {
    padding: 20px;
  }
  #youkou h3 {
    /*font-size: 28px;*/
  }
  #youkou .tbl {
    margin-top: 20px;
  }
}



/* ---------------------------------------------------------
 * #member
** --------------------------------------------------------- */
#member {
  padding: 60px 0 0;
  background: -moz-linear-gradient(60deg, #e8eaf3 0%, #e8eaf3 20%, #fff 20%, #fff 80%, #f4f4f4 80%, #f4f4f4 100%);
  background: -webkit-linear-gradient(60deg, #e8eaf3 0%, #e8eaf3 20%, #fff 20%, #fff 80%, #f4f4f4 80%, #f4f4f4 100%);
  background: linear-gradient(60deg, #e8eaf3 0%, #e8eaf3 20%, #fff 20%, #fff 80%, #f4f4f4 80%, #f4f4f4 100%);
  text-align: center;
}
#member .wrapper {
}
#member h3 {
  margin-top: 15px;
  font-size: 28px;
  font-weight: bold;
}
#member .lead {
  margin-top: 30px;
}
#member .inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-top: 20px;
}
#member .staff {
  position: relative;
}
#member .staff img {
  width: 277px;
}
#member .staff .name_box {
  position: absolute;
  left: -20px;
  bottom: -20px;
  padding: 20px 30px;
  background-color: #f2f3f5;
  text-align: left;
}
#member .staff .job {
  color: #1b328e;
  font-size: 13px;
  font-weight: bold;
}
#member .staff .name {
  font-size: 28px;
  font-weight: bold;
  line-height: 1;
}
#member .contents {
  width: 680px;
  text-align: left;
}
#member section {
  padding-bottom: 30px;
}
#member section h4 {
  font-size: 24px;
  font-weight: bold;
}
#member section p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.8;
}
#member_img {
  height: 370px;
  background-image: url(../img/recruit/staff01_bg.png);
  background-size: cover;
  background-position: center;
}
@media (max-width: 1140px) {
  #member .contents {
    width: 480px;
    padding-left: 30px;
  }
}
@media (max-width: 767px) {
  #member {
    padding: 60px 0 0;
    /*text-align: center;*/
  }
  #member .wrapper {
  }
  #member .lead {
    /*margin-top: 30px;*/
  }
  #member .inner {
    display: block;
    /*padding-top: 20px;*/
  }
  #member .staff .name_box {
    left: 50%;
    bottom: 0;
    width: 270px;
    padding-right: 0;
    transform: translateX(-50%);
  }
  #member .contents {
    width: 100%;
    margin-top: 30px;
    padding-left: 0;
  }
  #member section {
    /*padding-bottom: 30px;*/
  }
  #member section h4 {
    font-size: 20px;
    /*font-weight: bold;*/
  }
  #member section p {
    /*margin-top: 10px;*/
    /*font-size: 14px;*/
    /*line-height: 1.8;*/
  }
  #member_img {
    height: 180px;
    background-position: left center;
  }
}



/* ---------------------------------------------------------
 * #flow
** --------------------------------------------------------- */
#flow {
  padding: 100px 0 80px;
  background-color: #f2f3f5;
  background-image: url(../img/top/bg_map.jpg);
  background-position: center;
  background-size: cover;
}
#flow h3 {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
}
#flow ul {
  margin-top: 30px;
}
#flow li {
}
#flow li:nth-child(n+5) {
  margin-top: 20px;
}
#flow li .img {
}
#flow li .sub {
  margin-top: 10px;
}
#flow li .name {
  font-size: 16px;
}
#flow li.wx2 {
  width: 49.013%;
}
#flow li.wx2 img {
}
@media (max-width: 1140px) {
}
@media (max-width: 767px) {
  #flow li:not(:first-child) {
    margin-top: 20px;
  }
  #flow li.wx2 {
    width: 100%;
  }
}



/* ---------------------------------------------------------
 * #afterword
** --------------------------------------------------------- */
#afterword {
  padding: 60px 0;
  background-image: url(../img/recruit/recruit_bg.png);
  background-position: center;
  background-size: cover;
  color: #fff;
  text-align: center;
}
#afterword .wrapper {
}
#afterword h3 {
  font-size: 26px;
  font-weight: bold;
}
#afterword p {
  margin-top: 20px;
}
#afterword img {
  width: 148px;
  margin-top: 20px;
}
@media (max-width: 1140px) {
}
@media (max-width: 767px) {
  #afterword {
    text-align: left;
  }
  #afterword h3 {
    font-size: 22px;
  }
  #afterword img {
    display: block;
    width: 120px;
    margin: 0 auto;
  }
}




