@charset "UTF-8";
/* CSS Document */


/* main
-----------------------------------------------*/
#main::before {
  background-image: url(/recruit/career/portrait/img/img-main.jpg);
}


/* section
-----------------------------------------------*/
section .inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 60px;
}
section p {
  font-size: 16px;
  line-height: 2em;
}
@media screen and (max-width: 768px) {
  section .inner {
    padding: 0 20px;
  }
  section p {
    font-size: 14px;
  }
}


/* lead
-----------------------------------------------*/
#lead {
  padding: 80px 0 70px;
  text-align: center;
}
#lead h2 {
  font-size: 40px;
}
#lead h2::after {
  content: "";
  display: block;
  margin: 30px auto 0;
  width: 50px;
  height: 6px;
  background-color: #CC0222;
}
#lead p {
  margin-top: 50px;
}
@media screen and (max-width: 768px) {
  #lead {
    padding: 60px 0 40px;
  }
  #lead h2 {
    font-size: 24px;
  }
  #lead h2::after {
    margin: 15px auto 0;
    width: 40px;
    height: 4px;
  }
  #lead p {
    margin: 30px;
  }
}


/* prof
-----------------------------------------------*/
#prof {
  width: 100%;
  padding: 30px 0 50px;
  background-color: #F0F0F0;
}
#prof .inner {
  display: flex;
  align-items: center;
  gap: 40px;
}
#prof .prof-img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #ffffff;
  object-fit: cover;
}
#prof p {
  display: flex;
  flex-direction: column;
  font-size: 41px;
  font-weight: bold;
}
#prof p span {
  margin-bottom: -40px;
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  opacity: 0.5;
}
@media screen and (max-width: 768px) {
  #prof {
    padding: 15px 0 25px;
  }
  #prof .inner {
    gap: 15px;
  }
  #prof .prof-img {
    width: 80px;
    height: 80px;
  }
  #prof p {
    font-size: 24px;
  }
  #prof p span {
    margin-bottom: -20px;
    font-size: 16px;
  }
}


/* box
-----------------------------------------------*/
section.box {
  margin-top: 80px;
}
section.box .inner {
  max-width: 1440px;
  padding: 0;
}
section.box .box-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  max-width: 1270px;
  margin: 0 0 0 auto;
  padding: 0 0 0 60px;
}
section.box .img-block {
  width: calc((630 / 1270) * 100%);
  height: 641px;
  flex-shrink: 0;
  background-color: #DEDEDE;
  background-image: url("/recruit/career/portrait/img/img-portrait_01.jpg");
  background-size: cover;
  background-position: center;
}
section.box .img-block {
  width: calc((630 / 1270) * 100%);
  height: 641px;
  flex-shrink: 0;
  background-color: #DEDEDE;
  background-image: url("/recruit/career/portrait/img/img-portrait_01.jpg");
  background-size: cover;
  background-position: center;
}
section.reverse .img-block {
  background-image: url("/recruit/career/portrait/img/img-portrait_02.jpg");
}
section.reverse .box-wrapper {
  flex-direction: row-reverse;
  margin: 0 auto 0 0;
  padding: 0 60px 0 0
}
@media screen and (max-width: 768px) {
  section.box {
    margin-top: 40px;
  }
  section.box .box-wrapper {
    flex-direction: column-reverse;
    gap: 15px;
    margin: 0 auto;
    padding: 0 20px;
  }
  section.box .img-block {
    width: 100%;
    height: 260px;
    margin: 0 auto;
  }
  section.reverse .box-wrapper {
    flex-direction: column-reverse;
    margin: 0 auto;
    padding: 0 20px;
  }
}


/* img-box
-----------------------------------------------*/
#img-box {
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 641;
  margin-top: 80px;
  background-image: url("/recruit/career/portrait/img/img-portrait_03.jpg");
  background-size: cover;
}