@charset "UTF-8";
/*     フェードイン    */
.fadeIn {
  opacity: 0;
  transition-delay: 100ms;
  transition-duration: 1000ms;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.23, 0.76, 0.73, 0.97);
}

.fadeIn-up {
  opacity: 0;
  transition-delay: 100ms;
  transition-duration: 1000ms;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.23, 0.76, 0.73, 0.97);
  transform: translate(0, 50px);
}

.fadeIn-down {
  opacity: 0;
  transition-delay: 100ms;
  transition-duration: 1000ms;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.23, 0.76, 0.73, 0.97);
  transform: translate(0, -80px);
}

.fadeIn-left {
  opacity: 0;
  transition-delay: 100ms;
  transition-duration: 1000ms;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.23, 0.76, 0.73, 0.97);
  transform: translate(-50px, 0);
}

.fadeIn-right {
  opacity: 0;
  transition-delay: 100ms;
  transition-duration: 1000ms;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.23, 0.76, 0.73, 0.97);
  transform: translate(50px, 0);
}

/*     スライドイン    */
.slideIn {
  opacity: 0;
  transition-delay: 0ms;
  transition-duration: 1000ms;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.23, 0.76, 0.73, 0.97);
}

.slideIn-up {
  opacity: 1;
  transform: translate(0, 80px);
}

.slideIn-down {
  opacity: 1;
  transform: translate(0, -80px);
}

.slideIn-left {
  opacity: 1;
  transform: translate(-80px, 0);
}

.slideIn-right {
  opacity: 1;
  transform: translate(80px, 0);
}

.scroll-in {
  opacity: 1;
  transform: translate(0);
}

.list-scroll > * {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
}

.list-scroll > *.scroll-in {
  opacity: 1;
  transform: translateY(0);
}

.detail-type-4 .inner {
  width: min(90%, 900px);
}

/*-------------------------------------*/
/* mv                                  */
/*-------------------------------------*/
.mv {
  padding-bottom: 20px;
}
.mv__inner {
  width: min(1500px, 100%);
  margin: 0 auto;
  position: relative;
}
.mv__img {
  width: 100vw;
  max-width: 1750px;
  height: 490px;
  -o-object-fit: cover;
     object-fit: cover;
  padding-left: 40px;
}
@media screen and (max-width: 640px) {
  .mv__img {
    width: 100%;
    padding-left: 24px;
  }
}
.mv__position {
  position: absolute;
  bottom: 0;
  left: 0;
}
.mv__txt-wrap {
  display: inline-block;
  width: min(635px, 100%);
  padding: 50px 50px 40px;
  border-radius: 0 40px 0 0;
  background-color: var(--color-white);
}
@media screen and (max-width: 640px) {
  .mv__txt-wrap {
    padding: 32px 24px 14px 24px;
    border-radius: 0 10px 0 0;
  }
}
.mv__ttl {
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 24px;
}
@media screen and (max-width: 640px) {
  .mv__ttl {
    font-size: 18px;
  }
}
.mv__ttl small {
  font-size: 22px;
  font-weight: 500;
}
@media screen and (max-width: 640px) {
  .mv__ttl small {
    font-size: 14px;
  }
}
.mv__name {
  font-size: 24px;
}
@media screen and (max-width: 640px) {
  .mv__name {
    font-size: 16px;
  }
}
.mv__sub-txt {
  font-size: 18px;
  color: var(--color-gray);
}
@media screen and (max-width: 640px) {
  .mv__sub-txt {
    font-size: 16px;
  }
}

/*-------------------------------------*/
/* movie                               */
/*-------------------------------------*/
.movie__inner {
  display: grid;
  grid-template-columns: 1fr repeat(2, minmax(300px, 550px)) 1fr;
}
@media screen and (max-width: 640px) {
  .movie__inner {
    display: block;
  }
}
.movie__txt-wrap {
  grid-column: 2;
  align-content: center;
  padding: 50px 80px 50px 20px;
}
@media screen and (max-width: 640px) {
  .movie__txt-wrap {
    width: 90%;
    margin: 0 auto;
    padding: 50px 0;
  }
}
.movie__ttl {
  color: var(--color-primary);
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 32px;
}
@media screen and (max-width: 640px) {
  .movie__ttl {
    font-size: 24px;
    margin-bottom: 18px;
  }
}
.movie__txt {
  line-height: 1.7;
  font-size: 18px;
}
@media screen and (max-width: 640px) {
  .movie__txt {
    font-size: 16px;
  }
}
.movie iframe {
  width: 100%;
  aspect-ratio: 16/9;
}
.movie.detail-type-1 .inner {
  width: min(90%, 1100px);
}
.movie.detail-type-1 .movie__ttl {
  font-size: 24px;
  text-align: left;
  letter-spacing: 0;
}
@media screen and (max-width: 640px) {
  .movie.detail-type-1 .movie__ttl {
    font-size: 16px;
  }
}
.movie.detail-type-1 .movie__ttl::before {
  content: "";
  display: inline-block;
  width: 15px;
  aspect-ratio: 1/1;
  background-color: var(--color-primary);
  margin-right: 8px;
  vertical-align: middle;
  transform: translateY(-10%);
  border-radius: 50px;
}
@media screen and (max-width: 640px) {
  .movie.detail-type-1 .movie__ttl::before {
    width: 8px;
  }
}
.movie.detail-type-1 .movie__flex {
  display: flex;
}
@media screen and (max-width: 640px) {
  .movie.detail-type-1 .movie__flex {
    flex-direction: column;
  }
}
.movie.detail-type-1 .movie__flex iframe {
  width: 50%;
}
@media screen and (max-width: 640px) {
  .movie.detail-type-1 .movie__flex iframe {
    width: 100%;
  }
}
.movie.detail-type-4 {
  padding: 30px 0;
}
@media screen and (max-width: 640px) {
  .movie.detail-type-4 {
    padding: 40px 0 40px;
  }
}
.movie.detail-type-4 .movie__inner {
  display: flex;
  gap: 50px;
  width: min(1000px, 90%);
  margin: 0 auto;
}
@media screen and (max-width: 640px) {
  .movie.detail-type-4 .movie__inner {
    flex-direction: column;
    gap: 32px;
  }
}
.movie.detail-type-4 .movie__txt-wrap {
  width: 36%;
  padding: 0;
}
@media screen and (max-width: 640px) {
  .movie.detail-type-4 .movie__txt-wrap {
    width: 100%;
  }
}
.movie.detail-type-4 .movie__ttl {
  color: var(--color-primary);
  font-size: 32px;
  margin-bottom: 32px;
}
@media screen and (max-width: 640px) {
  .movie.detail-type-4 .movie__ttl {
    font-size: 24px;
    line-height: 1.3;
    margin-bottom: 20px;
  }
}
.movie.detail-type-4 .movie__ttl small {
  font-size: 20px;
}
@media screen and (max-width: 640px) {
  .movie.detail-type-4 .movie__ttl small {
    font-size: 16px;
  }
}
.movie.detail-type-4 .movie__txt {
  font-size: 24px;
  line-height: 1.3;
}
@media screen and (max-width: 640px) {
  .movie.detail-type-4 .movie__txt {
    font-size: 18px;
  }
}
.movie.detail-type-4 .movie__txt small {
  font-size: 18px;
  color: var(--color-gray);
}
@media screen and (max-width: 640px) {
  .movie.detail-type-4 .movie__txt small {
    font-size: 16px;
  }
}
.movie.detail-type-4 iframe {
  width: 50%;
  aspect-ratio: 16/9;
  flex: 1 1;
}
@media screen and (max-width: 640px) {
  .movie.detail-type-4 iframe {
    width: 100%;
  }
}

/*-------------------------------------*/
/* column                              */
/*-------------------------------------*/
.column {
  font-weight: 400;
}
.column__ctr:not(:last-child) {
  margin-bottom: 80px;
}
@media screen and (max-width: 640px) {
  .column__ctr:not(:last-child) {
    margin-bottom: 50px;
  }
}
.column__flex {
  display: flex;
  align-items: flex-start;
  gap: 50px;
}
@media screen and (max-width: 640px) {
  .column__flex {
    flex-direction: column;
    gap: 24px;
  }
}
.column__flex.reverse {
  flex-direction: row-reverse;
}
@media screen and (max-width: 640px) {
  .column__flex.reverse {
    flex-direction: column;
  }
}
.column__q-txt {
  color: var(--color-primary);
  font-weight: 500;
  margin-bottom: 10px;
}
.column__q-txt::before {
  content: url("../img/recruit-detail/q_txt_icon.svg");
  margin-right: 8px;
  vertical-align: middle;
}
.column__lead {
  margin-bottom: 16px;
  color: var(--color-primary);
  font-size: 24px;
  font-weight: 600;
}
@media screen and (max-width: 640px) {
  .column__lead {
    font-size: 20px;
    margin-bottom: 12px;
  }
}
.column__lead span {
  background: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, rgb(255, 245, 245) 50%);
}
.column__txt {
  line-height: 1.7;
}
.column__txt strong {
  font-weight: 600;
}
.column.detail-type-1 .column__lead span:before, .column.detail-type-2 .column__lead span:before {
  content: "";
  display: inline-block;
  width: 24px;
  aspect-ratio: 1/1;
  background: url("../img/recruit-detail/column_lead_icon.svg") no-repeat center/contain;
  vertical-align: middle;
  margin-right: 16px;
}
.column.detail-type-3 .column__img {
  border-radius: 0;
}
.column.detail-type-3 .column__lead {
  border-left: solid 6px var(--color-primary);
  padding-left: 16px;
  margin-bottom: 20px;
}
.column.detail-type-3 .column__txt {
  font-size: 18px;
}
@media screen and (max-width: 640px) {
  .column.detail-type-3 .column__txt {
    font-size: 16px;
  }
}
.column.detail-type-4 .column__lead {
  font-size: 24px;
  font-weight: 600;
  padding-bottom: 8px;
  border-bottom: solid 1px #d9d8e8;
}
@media screen and (max-width: 640px) {
  .column.detail-type-4 .column__lead {
    font-size: 20px;
  }
}
.column.detail-type-4 .column__txt p:not(:last-child) {
  margin-bottom: 1em;
}
.column.detail-type-4 .column__img {
  width: 100%;
  aspect-ratio: 900/400;
  -o-object-fit: cover;
     object-fit: cover;
  margin-top: 2em;
}
@media screen and (max-width: 640px) {
  .column.detail-type-4 .column__img {
    border-radius: 10px;
  }
}

/*-------------------------------------*/
/* schedule                            */
/*-------------------------------------*/
.schedule__bg {
  width: 100%;
  height: 300px;
  -o-object-fit: cover;
     object-fit: cover;
  position: relative;
  z-index: -1;
  opacity: 0.4;
}
@media screen and (max-width: 640px) {
  .schedule__bg {
    height: 180px;
  }
}
.schedule__ctr {
  margin-top: -50px;
  padding: 40px 40px 30px;
  border-radius: 10px;
}
@media screen and (max-width: 640px) {
  .schedule__ctr {
    padding: 32px 30px 24px;
  }
}
.schedule__ttl {
  margin-bottom: 40px;
}
@media screen and (max-width: 640px) {
  .schedule__ttl {
    margin-bottom: 32px;
  }
}
.schedule__ttl span {
  color: var(--color-primary);
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  padding: 10px 50px;
  border-radius: 50px;
  background-color: var(--color-white);
}
@media screen and (max-width: 640px) {
  .schedule__ttl span {
    font-size: 16px;
    padding: 10px 24px;
  }
}
.schedule__ttl span::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url("../img/recruit-detail/schedule_icon.svg") no-repeat center/contain;
  margin-right: 8px;
  vertical-align: middle;
}
@media screen and (max-width: 640px) {
  .schedule__ttl span::before {
    width: 16px;
    height: 16px;
  }
}
.schedule__timeline-wrap {
  display: flex;
  justify-content: space-evenly;
  gap: 50px;
}
@media screen and (max-width: 640px) {
  .schedule__timeline-wrap {
    flex-direction: column;
    gap: 0;
  }
}
.schedule__item {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  padding-bottom: 20px;
  border-left: solid 1px var(--color-primary);
}
@media screen and (max-width: 640px) {
  .schedule__item {
    gap: 18px;
  }
}
.schedule__time {
  color: var(--color-primary);
  font-size: 16px;
  padding-left: 20px;
  position: relative;
}
.schedule__time::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background-color: var(--color-primary);
  border-radius: 50px;
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
}
.schedule__flow {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
}
.schedule__txt {
  font-size: 14px;
  font-weight: 400;
}
.schedule.detail-type-4 {
  padding: 60px 0;
  background-color: var(--bg-pink);
}
.schedule.detail-type-4 .schedule__ctr {
  margin-top: 0px;
  border-radius: 0px;
  background-color: var(--color-white);
}
.schedule.detail-type-4 .schedule__ttl {
  margin-bottom: 40px;
}
.schedule.detail-type-4 .schedule__ttl span {
  border-radius: 0;
  color: var(--color-white);
  background-color: var(--color-primary);
}
.schedule.detail-type-4 .schedule__ttl span::before {
  content: none;
}

/*-------------------------------------*/
/* description                         */
/*-------------------------------------*/
.description__table {
  margin-bottom: 40px;
}
@media screen and (max-width: 640px) {
  .description__table {
    margin-bottom: 32px;
    border-top: solid 3px var(--color-primary);
  }
}
.description__table th,
.description__table td {
  padding: 24px 20px;
}
@media screen and (max-width: 640px) {
  .description__table th,
.description__table td {
    display: block;
    padding: 16px 20px;
  }
}
.description__table th {
  text-align: left;
  width: 300px;
  color: var(--color-primary);
  border-bottom: solid 3px var(--color-primary);
}
@media screen and (max-width: 640px) {
  .description__table th {
    width: 100%;
    border-bottom: solid 1px var(--color-primary);
    background-color: var(--bg-pink);
  }
}
.description__table td {
  font-weight: 400;
  border-bottom: solid 1px var(--color-primary);
}
@media screen and (max-width: 640px) {
  .description__table td {
    font-size: 14px;
    border-bottom: solid 3px var(--color-primary);
  }
}
.description.detail-type-4 .description__table th,
.description.detail-type-4 .description__table td {
  border: solid 1px #d3d3d3;
}
@media screen and (max-width: 640px) {
  .description.detail-type-4 .description__table th,
.description.detail-type-4 .description__table td {
    padding: 12px 16px;
  }
}
.description.detail-type-4 .description__table th {
  color: var(--color-white);
  background-color: var(--color-primary);
}

/*-------------------------------------*/
/* teacher                             */
/*-------------------------------------*/
.teacher {
  padding: 90px 0;
  background: var(--bg-pink);
}
@media screen and (max-width: 640px) {
  .teacher {
    padding: 50px 0;
  }
}
.teacher__ctr-wrap {
  display: flex;
  justify-content: center;
  gap: 50px;
  margin-bottom: 60px;
}
@media screen and (max-width: 640px) {
  .teacher__ctr-wrap {
    flex-direction: column;
    gap: 30px;
    margin-bottom: 50px;
  }
}
.teacher__ctr {
  width: 300px;
}
@media screen and (max-width: 640px) {
  .teacher__ctr {
    width: 100%;
  }
}
.teacher__ctr:nth-child(2) {
  margin-top: 50px;
}
@media screen and (max-width: 640px) {
  .teacher__ctr:nth-child(2) {
    margin-top: 0;
  }
}
.teacher__img-wrap {
  position: relative;
}
.teacher__img {
  width: 100%;
}
@media screen and (max-width: 640px) {
  .teacher__img {
    height: 83vw;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.teacher__txt-wrap {
  writing-mode: vertical-rl;
  padding: 24px 18px 32px;
  background-color: var(--color-white);
  position: absolute;
  right: 0;
  bottom: 0;
}
.teacher__txt-wrap span {
  text-orientation: upright;
}
.teacher__txt-wrap::after {
  content: "";
  display: block;
  width: 32px;
  height: 28px;
  background: var(--color-primary) url(../img/common/btn_arw_white.svg) no-repeat center/50% 50%;
  position: absolute;
  right: 0;
  bottom: 0;
}
.teacher__name {
  font-size: 24px;
  font-weight: 600;
}
.teacher__position {
  color: var(--color-gray);
}
.teacher__message {
  font-size: 18px;
  font-weight: 600;
  margin-top: 24px;
  background-color: var(--bg-pink);
}
@media screen and (max-width: 640px) {
  .teacher__message {
    margin-top: 18px;
  }
}

.top-area.detail-type-3 {
  padding-top: 100px;
}
@media screen and (max-width: 640px) {
  .top-area.detail-type-3 {
    padding-top: 60px;
  }
}
.top-area.detail-type-3 .top-area__ttl {
  font-size: 32px;
  font-weight: 600;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: solid 1px var(--color-primary);
}
@media screen and (max-width: 640px) {
  .top-area.detail-type-3 .top-area__ttl {
    font-size: 20px;
    line-height: 1.4;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
}
.top-area.detail-type-3 .top-area__name {
  font-size: 24px;
}
@media screen and (max-width: 640px) {
  .top-area.detail-type-3 .top-area__name {
    font-size: 18px;
  }
}
.top-area.detail-type-3 .top-area__position {
  color: var(--color-gray);
  font-size: 18px;
  margin-left: 24px;
}
@media screen and (max-width: 640px) {
  .top-area.detail-type-3 .top-area__position {
    font-size: 16px;
    margin-left: 14px;
  }
}
.top-area.detail-type-3 iframe {
  width: 100%;
  aspect-ratio: 16/9;
  margin-top: 60px;
}
@media screen and (max-width: 640px) {
  .top-area.detail-type-3 iframe {
    margin-top: 40px;
  }
}
/*# sourceMappingURL=recruit-detail.css.map */