@charset "UTF-8";


/** 仕事内容
---------------------------------------------**/
.job .title-area {
  background-image: url(../images/recruit/job_description.jpg);
}

.job-content {
  display: flex;
  margin-bottom: 10rem;
}

.job-type {
  display: flex;
  width: 48%;
  min-height: 41rem;
  margin-right: 4%;
  position: relative;
}

.job-type::after {
  content: '';
  display: block;
  width: 77%;
  height: 52%;
  background-color: #ecf4ff;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
}

.job-type.bg-yellow::after {
  background-color: #fefb8a;
}

.job-type:nth-of-type(2n) {
  margin-right: 0;
}

.job-type .img-box {
  width: 40%;
}

.job-type .text-box {
  width: 60%;
  padding: 0 2rem;
}

.job-type .text-box p {
  font-size: 1.85rem;
  line-height: 1.6;
}

.job-name {
  margin-bottom: 3rem;
  font-size: 3rem;
  color: #00a99d;
}

.job-name .jp-name {
  display: inline-block;
  position: relative; 
  padding: 1rem 3rem;
  text-align: center;
}

.job-name .jp-name::before,
.job-name .jp-name::after {
  content: '';
  display: block;
  width: 3rem;
  height: 3rem;
  position: absolute;
}

.job-name .jp-name::before {
  border-left: 0.1rem solid #00a99d; 
  border-top: 0.1rem solid #00a99d;
  border-radius: 1rem 0 0 0;
  top: 0;
  left: 0;
}

.job-name .jp-name::after {
  border-right: 0.1rem solid #00a99d;
  border-bottom: 0.1rem solid #00a99d;
  border-radius: 0 0 1rem 0;
  bottom: 0;
  right: 0;
}

.en-name {
  display: inline-block;
  font-size: 1.2rem;
  text-align: center;
}

.salse-job .jp-name,
.salse-job .en-name,
.administrative-job .jp-name,
.administrative-job .en-name {
  width: 15rem;
}

.systems-engineer .jp-name,
.systems-engineer .en-name,
.infrastructure .jp-name,
.infrastructure .en-name {
  width: 33rem;
}


.data-scientist .jp-name,
.data-scientist .en-name {
  width: 40rem;
}

.operator .jp-name,
.operator .en-name {
  width: 22rem;
}


@media screen and (max-device-width: 768px) {
  .job .title-area {
    background-image: url(../images/sp/recruit/job_description_sp.jpg);
  }

  .job .container-inner {
    width: 100%;
    margin: 0 auto;
  }

  .job-content {
    flex-direction: column;
    margin-bottom: 0;
  }

  .job-type {
    min-width: inherit;
    width: 100%;
    min-height: 32rem;
    margin: 0 0 6rem;
  }

  .job-type::after {
    width: 85%;
    height: 19rem;
  }

  .job-type .img-box {
    min-width: inherit;
    width: 35%;
  }

  .job-type .text-box {
    min-width: inherit;
    width: 65%;
    padding: 0 1rem;
  }

  .job-name {
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
  }

  .job-name .jp-name {
    padding: 0.7rem 1.8rem;
  }

  .job-name .jp-name::before,
  .job-name .jp-name::after {
    width: 2rem;
    height: 2rem;
  }

  .job-name .jp-name::before {
    border-radius: 0.5rem 0 0 0;
  }

  .job-name .jp-name::after {
    border-radius: 0 0 0.5rem 0;
  }

  .en-name {
    font-size: 1.0rem;
  }

  .job-type .text-box p {
    font-size: 1.3rem;
    line-height: 1.4;
  }

  .salse-job .jp-name,
  .salse-job .en-name,
  .administrative-job .jp-name,
  .administrative-job .en-name {
    width: 7rem;
  }

  .systems-engineer .jp-name,
  .systems-engineer .en-name,
  .infrastructure .jp-name,
  .infrastructure .en-name {
    width: 18rem;
  }


  .data-scientist .jp-name,
  .data-scientist .en-name {
    width: 22rem;
  }

  .operator .jp-name,
  .operator .en-name {
    width: 12rem;
  }
}