.l-main {
  overflow: clip;
}

.course_field .p-job-book {
  position: relative;
  padding-bottom: min(10.6442166911dvw, 14.54rem);
  --theme-color: #55ADEA;
}
@media screen and (max-width: 767px) {
  .course_field .p-job-book {
    padding-bottom: 25.641025641dvw;
  }
}
.course_field .p-job-book svg {
  fill: currentColor;
}





.course_field .p-job-book-popup {
  position: fixed;
  inset: 0;
  border: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.15);
  opacity: 0;
  pointer-events: none;
  transition: 0.4s opacity;
}
@media screen and (max-width: 767px) {
  .course_field .p-job-book-popup {
    padding-left: 3.8461538462dvw;
  }
}
.course_field .p-job-book-popup.is-open {
  opacity: 1;
  pointer-events: auto;
}
.course_field .p-job-book-popup.is-open .p-job-book-popup-inner {
  translate: 0;
}
.course_field .p-job-book-popup-inner {
  position: relative;
  margin-top: min(5.8565153734dvw, 8rem);
  translate: 100vw 0;
  transition: 0.4s translate;
}
@media screen and (max-width: 767px) {
  .course_field .p-job-book-popup-inner {
    margin-top: 20.5128205128dvw;
  }
}
.course_field .p-job-book-popup-scroll {
  position: relative;
  max-height: 70dvh;
  overflow: auto;
  padding: 0;
  border-radius: min(4.39238653dvw, 6rem) 0 0 min(4.39238653dvw, 6rem);
  background-color: #f2f2f2;
}
@media screen and (max-width: 767px) {
  .course_field .p-job-book-popup-scroll {
    max-height: 75dvh;
  }
}
.course_field .p-job-book-popup-contents {
  position: relative;
  display: none;
  padding: min(3.6dvw, 5rem);
  background-color: #fff;
}
@media screen and (min-width: 768px) {
  .course_field .p-job-book-popup-contents {
    width: min(62.3718887262dvw, 85.2rem);
  }
}
@media screen and (max-width: 767px) {
  .course_field .p-job-book-popup-contents {
    width: 100%;
    padding: 0 3.8461538462dvw 7.6923076923dvw;
  }
}
.course_field .p-job-book-popup-contents.is-active {
  display: block;
}
.course_field .p-job-book-popup-heading {
  color: var(--theme-color);
}





.course_field .p-job-book-popup-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
@media screen and (min-width: 768px) {
  .course_field .p-job-book-popup-list {
    gap: 0 5%;
  }
}
@media screen and (max-width: 767px) {
  .course_field .p-job-book-popup-list {
    justify-content: space-between;
  }
}
.course_field .p-job-book-popup-list-item {
  width: 30%;
  font-size: min(1dvw, 1.5rem);
  font-weight: 400;
  line-height: min(1.8301610542dvw, 2.5rem);
    margin: 0;
    float:none;
    background:none;
    -webkit-box-shadow:none;
    box-shadow:none;
    border-radius:none;
}
@media screen and (max-width: 767px) {
  .course_field .p-job-book-popup-list-item {
    width: 48%;
    font-size: 2.82dvw;
    line-height: 5.641025641dvw;
  }
}
.course_field .p-job-book-popup-list-item a {
  text-decoration: none;
}
.course_field .p-job-book-popup-list-item a:hover {
  text-decoration: underline;
}
@media only screen and (max-width: 767px) {
    .course_field li.p-job-book-popup-list-item, .course_field li.p-job-book-popup-list-item:nth-child(4n) {
         width: 48%; 
         margin: 0 2% 2% 0; 
    }
    .course_field .p-job-book-popup-list-item a {
      width: 48dvw;
    }
    .course_field .p-job-book-popup-heading {
        font-size: 1.6rem;
    }
}




.course_field .p-job-book-popup-close {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  border: 0;
  position: absolute;
  inset: min(1.3762811127dvw, 1.88rem) min(3.0893118594dvw, 4.22rem) auto auto;
  display: block;
  width: min(2.8396778917dvw, 3.879rem);
  height: min(2.8396778917dvw, 3.879rem);
  border-radius: 50%;
  background-color: var(--theme-color);
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .course_field .p-job-book-popup-close {
    inset: 2.9230769231dvw 3.8461538462dvw auto auto;
    width: 7.6923076923dvw;
    height: 7.6923076923dvw;
  }
}
.course_field .p-job-book-popup-close::before, .course_field .p-job-book-popup-close::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  width: 48%;
  height: min(0.2562225476dvw, 0.35rem);
  margin: auto;
  border-radius: 100vmax;
  background-color: #fff;
}
@media screen and (max-width: 767px) {
  .course_field .p-job-book-popup-close::before, .course_field .p-job-book-popup-close::after {
    width: 43%;
    height: 0.8974358974dvw;
  }
}
.course_field .p-job-book-popup-close::before {
  rotate: 45deg;
}
.course_field .p-job-book-popup-close::after {
  rotate: -45deg;
}





.card-head {
    display: flex;
    align-items: center;
    justify-content:flex-start;
    gap: 16px;
}
.card-ttl {
    flex-shrink: 0;
    line-height: 1.5;
}
.card-icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    aspect-ratio: 1;
    width: 64px;
    border-radius: 50%;
    background-color: #eee;
    margin-bottom: 20px;
}
.main_img img {
    border-radius: 2000px;
}
@media screen and (max-width: 767px) {
    .card-head {
        gap: 7.2dvw;
    }
    .card-icon {
        margin-bottom: 0;
    }
    .main_img img {
        border-radius: 0;
    }
}