@charset "UTF-8";
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* コピペ用
@include media(375px, min) {
数値での指定可能
}
@include media(spM) {
minかmaxを略した場合はmin-widthで展開
}
@include media(spM,max) {
}
*/
@media screen and (min-width: 768px) {
  .subpageVisual {
    background: url(../img/our-job/mentor/mv.jpg) no-repeat center right/auto 100%;
  }
}
@media screen and (max-width: 767px) {
  .subpageVisual {
    background: url(../img/our-job/mentor/mv-sp.jpg) no-repeat center right/auto 100%;
  }
  .subpageVisual .visualH1 span:last-child {
    font-size: 6.5vw;
  }
}
.alc {
  text-align: center;
}

.bold {
  font-weight: bold;
}

.imgBox {
  text-align: center;
  display: block;
}

h2 {
  padding-left: 2em;
  margin-bottom: 1em;
}

/*----------------------------------------------------
index
----------------------------------------------------*/
@media screen and (max-width: 767px) {
  #mentorAbout h2, #mentorPurpose h2, #mentorBenefits h2 {
    font-size: 5vw;
  }
}
#mentorNotes1,
#mentorNotes2 {
  font-size: 0.88em;
  text-align: left;
  margin-top: 1em;
  padding-top: 1em;
  border-top: 1px dashed #000;
}

/*-------- mentorTop -------------------------*/
#mentorTop {
  text-align: center;
}
#mentorTop picture {
  margin-top: 3em;
}
#mentorTop #mentorNotes1 {
  text-align: left;
  margin-top: 1em;
  padding-top: 1em;
  border-top: 1px dashed #000;
}

/*-------- ourjobAbout -------------------------*/
#mentorAbout h2 {
  background: url(../img/our-job/mentor/mentor-illust1.png) no-repeat center left/contain;
}

@media screen and (min-width: 1201px) {
  #mentorAbout .mentorCont .txtCont {
    margin-left: 3em;
  }
}
/*-------- mentorPurpose -------------------------*/
#mentorPurpose h2 {
  background: url(../img/our-job/mentor/mentor-illust2.png) no-repeat center left/contain;
}
#mentorPurpose .mentorCont ul {
  font-weight: bold;
}
#mentorPurpose .mentorCont ul li {
  list-style: disc;
  line-height: 2;
}

@media screen and (min-width: 1201px) {
  #mentorPurpose .mentorCont {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 3em;
  }
  #mentorPurpose .mentorCont .imgBox {
    max-width: 720px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  #mentorPurpose ul {
    margin-left: 3em;
    margin-bottom: 3em;
  }
  #mentorPurpose ul li {
    display: inline-block;
    margin-right: 1em;
  }
  #mentorPurpose ul li:before {
    content: "・";
  }
}
@media screen and (max-width: 767px) {
  #mentorPurpose .mentorCont {
    text-align: center;
  }
  #mentorPurpose .mentorCont .txtCont {
    display: inline-block;
    text-align: left;
    margin-bottom: 2em;
  }
}
/*-------- mentorBenefits -------------------------*/
#mentorBenefits h2 {
  background: url(../img/our-job/mentor/mentor-illust3.png) no-repeat center left/contain;
}
#mentorBenefits .txtBox {
  margin-bottom: 3em;
}
#mentorBenefits .benefitsBox {
  margin-bottom: 3em;
  padding: 1.5em 2em;
}
#mentorBenefits .benefitsBox .benefitsL {
  text-align: center;
  font-weight: bold;
}
#mentorBenefits .benefitsBox .benefitsL .imgBox {
  margin-bottom: 0.5em;
}
#mentorBenefits .benefitsBox .benefitsL .imgBox img {
  max-height: 150px;
}
#mentorBenefits .benefitsBox .benefitsR .mark {
  background: #EF8F00;
  color: #fff;
  font-size: 0.88em;
  font-weight: bold;
  border-radius: 100vh;
  margin-bottom: 8px;
  padding: 2px 1.5em;
  display: inline-block;
}
#mentorBenefits .benefitsBox .benefitsR .mark + p {
  margin-bottom: 1em;
}

@media screen and (min-width: 1201px) {
  #mentorBenefits .mentorCont {
    margin-left: 3em;
  }
}
@media screen and (min-width: 768px) {
  .benefitsBox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .benefitsBox:nth-child(1) .benefitsL {
    border-right: 1px solid;
  }
  .benefitsBox:nth-child(2) .benefitsR {
    border-left: 1px solid;
  }
  .benefitsBox .benefitsL {
    width: 23.5%;
    padding: 0 2em 0 0;
  }
  .benefitsBox .benefitsR {
    width: 76.5%;
    padding: 0 2em;
  }
}
@media screen and (max-width: 767px) {
  .benefitsL {
    border-bottom: 1px solid;
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .benefitsL img {
    width: 55px;
    margin-right: 1em;
  }
}/*# sourceMappingURL=our-job.css.map */