@charset "utf-8";
.recruit-top {
  position: relative;
  padding-bottom: clamp(180px, -33.333px + 27.778vw, 300px);
  &::after {
    content: "";
    position: absolute;
    width: 100%;
    height: clamp(240px, -44.444px + 37.037vw, 400px);
    bottom: 0;
    z-index: -1;
    background-color: var(--color-main);
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  }
}
@media screen and (width <= 768px) {
  .recruit-top {
    padding-bottom: 26.04vw;
    &::after {
      height: 30vw;
    }
  }
}

.recruit-top-inner {
  display: flex;
  gap: min(5.64vw, 70px);
  align-items: stretch;
}
@media screen and (width <= 768px) {
  .recruit-top-inner {
    flex-flow: column;
    gap: 13.02vw;
  }
}

.recruit-top-text {
  width: 45%;
  padding: 0 0 0 max(20px, calc(50% - 600px));
  & > h2 {
    position: relative;
    margin-top: -0.5em;
    font-size: clamp(27px, -5.000px + 4.167vw, 45px);
    font-weight: 800;
    & span.en {
      position: absolute;
      width: 100%;
      font-family: var(--font-family-din);
      font-size: clamp(72px, -13.333px + 11.111vw, 120px);
      font-weight: 700;
      line-height: 1;
      letter-spacing: -0.02em;
      color: #1E5CA7;
      opacity: .3;
      z-index: 1;
      &._01 {
        top: .8em;
        left: 3em;
      }
      &._02 {
        top: 1.8em;
        left: 38%;
      }
    }
  }
  & > p {
    margin-top: 120px;
    font-size: 18px;
    font-weight: 500;
  }
}
@media screen and (width <= 768px) {
  .recruit-top-text {
    width: 100%;
    padding: 0 var(--side-padding);
    & > h2 {
      margin-top: 0;
      padding: 0 var(--side-padding);
      font-size: clamp(24px, 18.275px + 1.527vw, 30px);
    }
    & > p {
      margin-top: 2em;
      padding: 0 var(--side-padding);
      font-size: clamp(16px, 12.183px + 1.018vw, 20px);
    }
  }
}

.recruit-top-img {
  width: 55%;
  aspect-ratio: 76 / 54;
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: translateY(30px);
    transition: all var(--animation-time) ease-out;
  }
  &.is-view img {
    opacity: 1;
    transform: translateY(0);
  }
}
@media screen and (width <= 768px) {
  .recruit-top-img {
    position: relative;
    width: 100%;
    aspect-ratio: unset;
    padding: 0 calc(var(--side-padding) * 2);
    & picture {
      display: block;
      aspect-ratio: 6 / 4;
    }
  }
  .recruit-top-en {
    position: absolute;
    top: -.6em;
    left: calc(var(--side-padding));
    font-family: var(--font-family-din);
    font-size: clamp(40px, 30.458px + 2.545vw, 50px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #1E5CA7;
    opacity: .3;
    z-index: 1;
  }
}

.recruit-schedule {
  position: relative;
  margin-top: -1px;
  background-color: var(--color-main);
  &::before {
    content: "";
    position: absolute;
    right: 20px;
    top: -150px;
    width: 23vw;
    aspect-ratio: 1;
    background-image: url(/assets/img/recruit/bk_logoicon_01.webp);
    background-size: contain;
    background-repeat: no-repeat;
  }
  &::after {
    content: "";
    position: absolute;
    left: 50px;
    top: 60%;
    width: 6vw;
    aspect-ratio: 1;
    background-image: url(/assets/img/recruit/bk_logoicon_02.webp);
    background-size: contain;
    background-repeat: no-repeat;
  }
}
@media screen and (width <= 768px) {
  .recruit-schedule {
    &::before {
      right: 2.6vw;
      top: -19.53vw;
      width: 20vw;
    }
    &::after {
      left: 5px;
      top: 30%;
    }
  }
}

.recruit-schedule-inner {
  width: min(100%, 1240px);
  padding: 0 var(--side-padding);
  margin: 0 auto;
  color: var(--color-white);
}

.recruit-schedule-text {
  text-align: center;
  & > h3 {
    position: relative;
    padding-top: 160px;
    font-size: clamp(18px, -3.333px + 2.778vw, 30px);
    font-weight: 800;
    &::before {
      content: "";
      position: absolute;
      top: 65px;
      left: 50%;
      height: 30px;
      width: 1px;
      background-color: var(--color-white);
    }
  }
  & > p {
    margin: 2em auto;
    font-size: clamp(16px, 1.778px + 1.852vw, 24px);
    font-weight: 500;
  }
}
@media screen and (width <= 768px) {
  .recruit-schedule-text {
    & > h3 {
      padding-top: 20.83vw;
      font-size: clamp(22px, 16.275px + 1.527vw, 28px);
      &::before {
        top: 7.81vw;
        height: 3.90vw;
      }
    }
    & > p {
      font-size: clamp(14px, 12.092px + 0.509vw, 16px);
      text-align: left;
      max-width: 400px;
    }
  }
}

.recruit-schedule-btn {
  & .cmn-more {
    & a {
      margin: 0 auto;
    }
  }
}

.recruit-interview {
  position: relative;
  padding-top: clamp(180px, -33.333px + 27.778vw, 300px);
  padding-bottom: clamp(180px, -33.333px + 27.778vw, 300px);
  background-color: var(--color-sub);
  &::before {
    content: "";
    position: absolute;
    width: 100%;
    height: clamp(240px, -44.444px + 37.037vw, 400px);
    top: -1px;
    background-color: var(--color-main);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
  }
  &::after {
    content: "";
    position: absolute;
    width: 100%;
    height: clamp(780px, -144.444px + 120.37vw, 1300px);
    bottom: 0;
    background-color: var(--color-main);
    clip-path: polygon(0 40%, 100% 0, 100% 100%, 55% 100%, 0 80%);
  }
}
@media screen and (width <= 768px) {
  .recruit-interview {
    padding: 26.04vw 0;
    &::before {
      height: 30vw;
    }
    &::after {
      height: 170vw;
      clip-path: polygon(0 20%, 100% 0, 100% 100%, 100% 100%, 0 80%);
    }
  }
}

.recruit-interview-inner {
  position: relative;
  width: min(100%, 1240px);
  padding: 0 var(--side-padding);
  margin: 0 auto;
  z-index: 1;
}


.recruit-interview-title {
  & .cmn-heading2 {
    color: var(--color-main);
  }
}

.recruit-interview-text {
  text-align: center;
  & > h3 {
    margin-top: 2em;
    font-size: clamp(18px, -3.333px + 2.778vw, 30px);
    font-weight: 800;
  }
  & > p {
    font-size: clamp(16px, 1.778px + 1.852vw, 24px);
    font-weight: 500;
  }
}
@media screen and (width <= 768px) {
  .recruit-interview-text {
    & > h3 {
      margin-top: 1em;
      font-size: clamp(22px, 16.275px + 1.527vw, 28px);
    }
    & > p {
      margin: 1.5em 0;
      font-size: clamp(14px, 12.092px + 0.509vw, 16px);
      text-align: center;
    }
  }
}

.recruit-interview-list {
  position: relative;
  display: grid;
  gap: 2em;
  grid-template-columns: calc((100% / 3) - 2em) calc(100% / 3) calc((100% / 3) - 2em);
  grid-template-rows: 1fr;
  padding-top: 220px;
  &::before {
    content: "";
    position: absolute;
    top: 95px;
    left: 50%;
    height: 32px;
    width: 1px;
    background-color: var(--color-main);
  }
}
@media screen and (width <= 768px) {
  .recruit-interview-list {
    padding-top: 20.83vw;
    display: block;
    &::before {
      top: 7.81vw;
      height: 3.90vw;
    }
  }
}

.recruit-interview-item {
  display: grid;
  gap: 30px;
  grid-template-rows: subgrid;
  grid-row: span 3;
  color: var(--color-white);
}
@media screen and (width <= 768px) {
  .recruit-interview-item {
    display: block;
    max-width: 400px;
    margin: 0 auto 15vw;
  }
}

.recruit-interview-img {
  position: relative;
  display: flex;
  align-items: flex-end;
  &::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 50%;
    background: linear-gradient(0deg,rgba(9, 32, 61, 1) 0%, rgba(9, 32, 61, 0) 100%);;
  }
}
@media screen and (width <= 768px) {
  .recruit-interview-img {
    display: block;
    &::after {
      left: 0;
      bottom: 0;
    }
  }
}

.recruit-interview-name {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-bottom: 10px;
  z-index: 1;
  & p {
    text-align: center;
    font-size: clamp(12px, 1.333px + 1.389vw, 18px);
    font-weight: 700;
  }
  & p:first-of-type {
    font-size: clamp(16px, -5.333px + 2.778vw, 28px);
    font-weight: 700;
    line-height: 1.5;
    & span {
      font-size: clamp(12px, 4.889px + 0.926vw, 16px);
    }
  }
}
@media screen and (width <= 768px) {
  .recruit-interview-name {
    & p {
      font-size: clamp(14px, 12.092px + 0.509vw, 16px);
    }
    & p:first-of-type {
      font-size: clamp(22px, 18.183px + 1.018vw, 26px);
      & span {
        font-size: clamp(14px, 12.092px + 0.509vw, 16px);
      }
    }
  }
}

.recruit-interview-cmnt {
  text-align: center;
  font-size: clamp(12px, 1.333px + 1.389vw, 18px);
}
@media screen and (width <= 768px) {
  .recruit-interview-cmnt {
    padding: 1.5em 0 0;
    font-size: clamp(14px, 12.092px + 0.509vw, 16px);
  }
  .recruit-interview-item._01 .recruit-interview-cmnt,
  .recruit-interview-item._02 .recruit-interview-cmnt {
    color: var(--color-main);
  }
}

.recruit-interview-btn {
  & .cmn-more a {
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto;
  }
}
@media screen and (width <= 768px) {
  .recruit-interview-btn {
    margin-top: 1.5em;
  }
}

/***** works(Job Introduction) *****/
.works-schedule-top {
  position: relative;
  padding-bottom: 200px;
  &::before {
    content: "";
    position: absolute;
    top: -100px;
    right: 0;
    width: min(26vw, 382px);
    aspect-ratio: 765 / 998;
    background: url(/assets/img/recruit/bk_worksicon_01.webp);
    background-repeat: no-repeat;
    background-size: contain;
  }
  &::after {
    content: "";
    position: absolute;
    bottom: -40px;
    left: 0;
    width: min(21vw, 300px);
    aspect-ratio: 609 / 752;
    background: url(/assets/img/recruit/bk_worksicon_02.webp);
    background-repeat: no-repeat;
    background-size: contain;
  }
}
@media screen and (width <= 768px) {
  .works-schedule-top {
    padding-bottom: 10.41vw;
    &::before {
      top: -13.02vw;
      width: 25vw;
    }
    &::after {
      bottom: -5.20vw;
      width: 20vw;
    }
  }
}

.works-schedule-title {
  color: var(--color-main);
}

.works-schedule-text {
  text-align: center;
  & > h3 {
    position: relative;
    padding-top: 160px;
    font-size: clamp(18px, -3.333px + 2.778vw, 30px);
    font-weight: 800;
    color: var(--color-main);
    &::before {
      content: "";
      position: absolute;
      top: 65px;
      left: 50%;
      height: 30px;
      width: 1px;
      background-color: var(--color-main);
    }
  }
  & > p {
    margin: 2em auto;
    font-size: clamp(16px, 1.778px + 1.852vw, 24px);
    font-weight: 500;
  }
}
@media screen and (width <= 768px) {
  .works-schedule-text {
    & > h3 {
      padding-top: 20.83vw;
      font-size: clamp(22px, 16.275px + 1.527vw, 28px);
      &::before {
        top: 7.81vw;
        height: 3.90vw;
      }
    }
    & > p {
      font-size: clamp(14px, 12.092px + 0.509vw, 16px);
    }
  }
}

.work-schedule-main {
  padding: 120px 0;
  background-color: var(--color-sub);
}
@media screen and (width <= 768px) {
  .work-schedule-main {
    padding: 13.02vw 0;
  }
}

.works-schedule-time {
  display: flex;
  gap: min(6.45vw, 80px);
  width: min(100%, 1240px);
  padding: 0 var(--side-padding);
  margin: 0 auto;
  & dl {
    display: flex;
    flex-wrap: wrap;
    width: 60%;
  }
  & dt {
    position: relative;
    padding-bottom: 80px;
    width: 120px;
    font-family: var(--font-family-din);
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-main);
    &::after {
      content: "";
      position: absolute;
      right: -7px;
      top: .25em;
      width: 13px;
      aspect-ratio: 1;
      background-color: var(--color-sub);
      border: 1px solid var(--color-main);
      border-radius: 50%;
    }
  }
  & dd {
    padding: 0 0 80px 30px;
    width: calc(100% - 120px);
    border-left: solid 1px var(--color-main);
    & > span {
      font-size: clamp(20px, 5.778px + 1.852vw, 28px);
      font-weight: 700;
      color: var(--color-main);
      line-height: 1;
    }
    & > p {
      font-weight: 500;
      margin-top: 0.5em;
    }
  }
}
@media screen and (width <= 768px) {
  .works-schedule-time {
    flex-flow: column;
    gap: 10.41vw;
    width: min(100%, 600px);
    & dl {
      width: 100%;
    }
    & dt {
      padding-bottom: 10.41vw;
      width: clamp(100px, 71.374px + 7.634vw, 130px);
      font-size: clamp(28px, 22.275px + 1.527vw, 34px);
    }
    & dd {
      width: calc(100% - clamp(100px, 71.374px + 7.634vw, 130px));
      padding: 0 0 10.41vw 5.20vw;
      & > span {
        font-size: clamp(20px, 16.183px + 1.018vw, 24px);
      }
    }
  }
}

.works-schedule-image {
  width: calc(40% - min(6.45vw, 80px));
  display: flex;
  flex-flow: column;
  gap: min(6.45vw, 80px);
  justify-content: center;
}
@media screen and (width <= 768px) {
  .works-schedule-image {
    width: 100%;
    gap: 10.41vw;
  }
}

.work-schedule-pattern {
  width: min(100%, 1240px);
  padding: 0 var(--side-padding);
  margin: 120px auto 0;
}
@media screen and (width <= 768px) {
  .work-schedule-pattern {
    margin-top: 13.02vw;
  }
}

.work-schedule-pattern-inner {
  padding: 80px min(80px,8vw);
  background-color: var(--color-white);
  & h4 {
    background-color: var(--color-main);
    font-size: clamp(18px, 7.333px + 1.389vw, 24px);
    font-weight: 800;
    color: var(--color-white);
    text-align: center;
  }
}
@media screen and (width <= 768px) {
  .work-schedule-pattern-inner {
    padding: 5.20vw var(--side-padding);
    & h4 {
      font-size: clamp(20px, 16.183px + 1.018vw, 24px);
    }
  }
}

.work-schedule-pattern-text {
  margin-top: 1em;
  font-size: clamp(18px, 7.333px + 1.389vw, 24px);
  font-weight: 800;
  line-height: 1.5;
  color: var(--color-main);
  text-align: center;
  & > span {
    font-size: 16px;
    color: var(--color-text);
  }
}
@media screen and (width <= 768px) {
  .work-schedule-pattern-text {
    font-size: clamp(20px, 16.183px + 1.018vw, 24px);
    & > span {
      font-size: clamp(14px, 12.092px + 0.509vw, 16px);
    }
  }
}

.work-schedule-pattern-list {
  display: flex;
  gap: min(30px, 3vw);
  justify-content: space-between;
  margin-top: 60px;
}
@media screen and (width <= 768px) {
  .work-schedule-pattern-list {
    flex-flow: column;
    gap: 1.5em;
    width: min(100%, 400px);
    margin: 7.81vw auto 0;
  }
}

.work-schedule-pattern-item {
  display: flex;
  gap: 1em;
  align-items: center;
  width: calc((100% - (min(30px,3vw) * 2)) / 3);
  padding: 40px 20px;
  border: 2px solid var(--color-main);
  border-radius: 15px;
  & img {
    width: 85px;
    aspect-ratio: 1;
  }
}
@media screen and (width <= 1200px) {
  .work-schedule-pattern-item {
    flex-flow: column;
    text-align: center;
    & img {
      width: clamp(51px, -9.444px + 7.87vw, 85px);
    }
  }
}
@media screen and (width <= 768px) {
  .work-schedule-pattern-item {
    flex-flow: row;
    width: 100%;
    text-align: left;
    padding: 5.20vw 3.90vw;
    & img {
      width: 30%;
    }
  }
}

.pattern-item-txt {
  & > p {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.5;
    color: var(--color-main);
  }
  & > span {
    font-size: 20px;
    font-weight: 700;
  }
}
@media screen and (width <= 1200px) {
  .pattern-item-txt {
    & > p {
      font-size: clamp(24px, -4.444px + 3.704vw, 40px);
    }
    & > span {
      font-size: clamp(14px, 3.333px + 1.389vw, 20px);
    }
  }
}
@media screen and (width <= 768px) {
  .pattern-item-txt {
    & > p {
      font-size: clamp(26px, 20.275px + 1.527vw, 32px);
    }
    & > span {
      font-size: clamp(16px, 12.183px + 1.018vw, 20px);
    }
  }
}

.works-interview {
  padding: 200px 0;
}
@media screen and (width <= 768px) {
  .works-interview {
    padding: 13.02vw 0;
  }
}

/***** interview *****/
.interview-intro {
  padding: 120px 0;
  background-color: var(--color-main);
  color: var(--color-white);
  .hero + & {
    margin-top: 0;
  }
}
@media screen and (width <= 768px) {
  .interview-intro {
    padding: 7.81vw 0;
  }
}

.interview-intro-mv {
  position: relative;
  width: min(100%, 1240px);
  padding: 0 var(--side-padding);
  margin: 0 auto;
}
@media screen and (width <= 768px) {
  .interview-intro-mv {
    display: flex;
    flex-flow: column-reverse;
    padding-top: clamp(140px, 101.832px + 10.178vw, 180px);
  }
}

.interview-introMv-img {
  aspect-ratio: 2 / 1;
  border-bottom: 6px solid var(--color-white);
  border-right: 6px solid var(--color-white);
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
@media screen and (width <= 768px) {
  .interview-introMv-img {
    aspect-ratio: 1;
    border-width: 2px;
  }
}

.interview-introMv-text {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-size: clamp(24px, -4.444px + 3.704vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-main);
  & > span {
    position: relative;
    display: inline-block;
    margin-top: 0.2em;
    padding: 0 .5em;
    z-index: 1;
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      background: var(--color-white);
      clip-path: inset(0 100% 0 0);
      transition: clip-path .6s cubic-bezier(0.37, 0, 0.63, 1);
      content: "";
    }
    & span {
      display: inline-block;
      clip-path: inset(0 100% 0 0);
      transition: clip-path .6s cubic-bezier(0.37, 0, 0.63, 1);
    }
    &:nth-of-type(1) {
      & span {
        transition-delay: .6s;
      }
    }
    &:nth-of-type(2) {
      &::before {
        transition-delay: .3s;
      }
      & span {
        transition-delay: .9s;
      }
    }
    &:nth-of-type(3) {
      &::before {
        transition-delay: .6s;
      }
      & span {
        transition-delay: 1.2s;
      }
    }
  }
  &.is-view {
    & > span {
      &::before {
        clip-path: inset(0);
      }
      & span {
        clip-path: inset(0);
      }
    }
  }
}
@media screen and (width <= 768px) {
  .interview-introMv-text {
    top: 0;
    transform: translateY(0);
    font-size: clamp(20px, 16.183px + 1.018vw, 24px);
  }
}

.interview-introMv-mark {
  position: absolute;
  top: 0;
  right: 0;
  font-family: var(--font-family-din);
  font-size: 18px;
  line-height: 1;
  writing-mode: vertical-rl;
}
@media screen and (width <= 768px) {
  .interview-introMv-mark {
    position: relative;
    writing-mode: initial;
    font-size: clamp(10px, 8.092px + 0.509vw, 12px);
    line-height: 1;
    margin-bottom: 0.8em;
  }
}

.interview-intro-area {
  display: flex;
  gap: min(8vw,100px);
  width: min(100%, 955px);
  padding: 0 var(--side-padding);
  margin: 90px auto 0;
}
@media screen and (width <= 768px) {
  .interview-intro-area {
    gap: 5.20vw;
    margin-top: 10.41vw;
  }
}

.interview-intro-profile {
  flex-shrink: 0;
  width: 220px;
  padding: 40px 0;
  background-color: var(--color-white);
  color: var(--color-main);
  text-align: center;
  & h2 {
    margin-top: -0.5em;
    font-size: 48px;
    & span {
      font-size: 20px;
    }
  }
  & p {
    display: inline-block;
    padding-top: .5em;
    font-weight: 500;
    letter-spacing: -0.02em;
    border-top: 1px solid var(--color-main);
    text-align: left;
  }
}
@media screen and (width <= 768px) {
  .interview-intro-profile {
    width: max(120px,28.64vw);
    padding: 0;
    background-color: transparent;
    & hgroup {
      background-color: var(--color-white);
      padding: 0;
      width: 100%;
      aspect-ratio: 1;
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: center;
    }
    & h2 {
      font-size: clamp(32px, 24.366px + 2.036vw, 40px);
      & span {
        font-size: clamp(16px, 12.183px + 1.018vw, 20px);
      }
    }
    & p {
      font-size: clamp(12px, 10.092px + 0.509vw, 14px);
    }
  }
}

.interview-intro-text {
  font-size: 18px;
}
@media screen and (width <= 768px) {
  .interview-intro-text {
    font-size: clamp(14px, 12.092px + 0.509vw, 16px);
  }
}

.interview-main {
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),
                    linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
  background-size: 40px 40px;
  background-repeat: repeat;
  background-position: center center;
}
@media screen and (width <= 768px) {
  .interview-main {
    background-size: 20px 20px;
  }
}

.interview-box {
  padding: 100px 0;
  &:first-of-type {
    padding-top: 200px;
  }
  &:last-of-type {
    padding-bottom: 200px;
  }
}
@media screen and (width <= 768px) {
  .interview-box {
    padding: 10.41vw var(--side-padding);
    &:first-of-type {
      padding-top: 13.02vw;
    }
    &:last-of-type {
      padding-bottom: 13.02vw;
    }
  }
}

.interview-box-title {
  width: 100%;
  border-bottom: 2px solid var(--color-main);
  & h3 {
    display: flex;
    gap: 70px;
    align-items: center;
    justify-content: center;
    padding-bottom: 20px;
    font-size: clamp(34px, -5.111px + 5.093vw, 56px);
    font-weight: 800;
    line-height: 1;
    color: var(--color-main);
    & > span {
      position: relative;
      font-family: var(--font-family-din);
      font-size: clamp(48px, -8.889px + 7.407vw, 80px);
      line-height: 1;
      &::after {
        content: "";
        position: absolute;
        right: -35px;
        top: 50%;
        transform: translateY(-45%);
        display: block;
        height: 70%;
        width: 2px;
        background-color: var(--color-main);
      }
    }
  }
}
@media screen and (width <= 768px) {
  .interview-box-title {
    & h3 {
      gap: 9.11vw;
      font-size: clamp(30px, 24.275px + 1.527vw, 36px);
      padding-bottom: 0.4em;
      & > span {
        font-size: clamp(40px, 30.458px + 2.545vw, 50px);
        &::after {
          right: -4.55vw;
        }
      }
    }
  }
}

.interview-box-contents {
  display: flex;
  gap: min(8.33vw, 100px);
  margin-top: 80px;
  &._left {
    flex-flow: row-reverse;
  }
}
@media screen and (width <= 768px) {
  .interview-box-contents {
    flex-flow: column-reverse;
    gap: 5.20vw;
    margin-top: 5.2vw;
    &._left {
     flex-flow: column-reverse;
    }
  }
}

.interview-box-text {
  width: calc(55% - min(8.33vw, 100px));
  ._left & {
    padding-right: max(20px, calc(50% - 600px));
  }
  ._right & {
    padding-left: max(20px, calc(50% - 600px));
  }
  ._none & {
    width: min(100%, 840px);
    padding: 0 var(--side-padding);
    margin: 0 auto;
  }
  & > h4 {
    margin-top: -.5em;
    font-size: clamp(24px, -4.444px + 3.704vw, 40px);
    font-weight: 800;
    color: var(--color-main);
    ._none & {
      text-align: center;
    }
  }
  & > p {
    font-size: 18px;
    margin-top: 2em;
  }
}
@media screen and (width <= 768px) {
  .interview-box-text {
    width: 100%;
    ._left & {
      padding-right: 0;
    }
    ._right & {
      padding-left: 0;
    }
    ._none & {
      padding: 0;
    }
    & > h4 {
      font-size: clamp(21px, 14.321px + 1.781vw, 28px);
      ._none & {
        text-align: left;
      }
    }
    & p {
      font-size: clamp(14px, 12.092px + 0.509vw, 16px);
    }
  }
}

.interview-box-img {
  width: 45%;
  aspect-ratio: 62 / 70;
  max-height: 700px;
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    opacity: 0;
    transform: translateY(30px);
    transition: all var(--animation-time) ease-out;
  }
  &.is-view img {
    opacity: 1;
    transform: translateY(0);
  }
}
@media screen and (width <= 768px) {
  .interview-box-img {
    width: min(100%, 500px);
    aspect-ratio: unset;
    margin: 0 auto;
    & picture {
      display: block;
      aspect-ratio: 1;
    }
  }
}

/***** info *****/
.info-main {
  padding: 100px 0;
  background-color: var(--color-main);
  .hero + & {
    margin-top: 0;
  }
}
@media screen and (width <= 768px) {
  .info-main {
    padding: 13.02vw 0;
  }
}

.info-main-inner {
  width: min(100%, 770px);
  margin: 0 auto;
  padding: 0 var(--side-padding);
}

.info-main-item {
  margin-top: 16px;
  padding: 80px 20px;
  background-color: var(--color-white);
  text-align: center;
  &:first-of-type {
    margin-top: 0;
  }
  &._01 img {
    width: 82px;
  }
  &._02 img {
    width: 81px;
  }
  &._03 img {
    width: 87px;
  }
  & h2 {
    margin: 0.5em 0;
    font-size: clamp(24px, -4.444px + 3.704vw, 40px);
    font-weight: 600;
    color: var(--color-main);
  }
  & p {
    font-size: 18px;
  }
  & ul {
    font-size: 18px;
    & li::before {
      content: "・ ";
      font-weight: 800;
    }
  }
}
@media screen and (width <= 768px) {
  .info-main-item {
    margin-top: 1em;
    padding: 10.41vw 5.20vw;
    & h2 {
      font-size: clamp(20px, 16.183px + 1.018vw, 24px);
    }
    & p {
      font-size: clamp(14px, 10.183px + 1.018vw, 18px);
      text-align: left;
    }
    & ul {
      font-size: clamp(14px, 10.183px + 1.018vw, 18px);
      text-align: left;
      & li {
        padding-left: 1em;
        text-indent: -1em;
      }
    }
  }
}

.info-flow {
  padding: min(29.16vw,420px) 0 120px;
  background: url(/assets/img/recruit/bk_info_flow.webp);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center;
}
@media screen and (width <= 768px) {
  .info-flow {
    padding: 26.04vw 0 13.02vw;
  }
}

.info-flow-inner {
  width: min(100%, 1240px);
  margin: 0 auto;
  padding: 0 var(--side-padding);
}

.info-flow-box {
  padding: 100px 20px;
  background-color: var(--color-sub);
  text-align: center;
}
@media screen and (width <= 768px) {
  .info-flow-box {
    padding: 10.41vw 5.20vw;
  }
}

.info-flow-title {
  color: var(--color-main);
}

.info-flow-lead {
  margin-top: 1em;
  font-size: clamp(24px, -4.444px + 3.704vw, 40px);
  font-weight: 700;
}
@media screen and (width <= 768px) {
  .info-flow-lead {
    font-size: clamp(24px, 18.275px + 1.527vw, 30px);
  }
}

.info-flow-list {
  width: min(100%, 700px);
  margin: 100px auto 0;
}
@media screen and (width <= 768px) {
  .info-flow-list {
    margin-top: 5.20vw;
  }
}

.info-flow-item {
  display: flex;
  gap: 10px;
  margin-top: 60px;
}
@media screen and (width <= 768px) {
  .info-flow-item {
    margin-top: 7.81vw;
  }
}

.info-flow-no {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 185px;
  padding: .3em 0 .1em;
  font-family: var(--font-family-din);
  font-size: 80px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-white);
  text-align: center;
  background-color: var(--color-main);
  &::after {
    content: "";
    position: absolute;
    bottom: -0.3em;
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 92px solid transparent;
    border-left: 92px solid transparent;
    border-top: .3em solid var(--color-main);
    border-bottom: 0;
  }
  ._02 & {
    background-color: rgba(30, 92, 167,0.8);
    &::after {
      border-top-color: rgba(30, 92, 167,0.8);
    }
  }
  ._03 & {
    background-color: rgba(30, 92, 167,0.6);
    &::after {
      border-top-color: rgba(30, 92, 167,0.6);
    }
  }
}
@media screen and (width <= 768px) {
  .info-flow-no {
    width: 60px;
    font-size: 40px;
    &::after {
      border-right: 30px solid transparent;
      border-left: 30px solid transparent;
    }
  }
}

.info-flow-text {
  position: relative;
  display: flex;
  align-items: center;
  width: calc(100% - 195px);
  padding-right: 30px;
  background-color: var(--color-white);
  & h3 {
    width: 150px;
    font-size: 40px;
    color: var(--color-main);
  }
  & p {
    width: calc(100% - 150px);
    text-align: left;
  }
}
@media screen and (width <= 768px) {
  .info-flow-text {
    width: calc(100% - 70px);
    padding: 0.2em 1em 1em;
    flex-flow: column;
    & h3 {
      width: 100%;
      font-size: clamp(24px, 18.275px + 1.527vw, 30px);
      text-align: left;
    }
    & p {
      width: 100%;
    }
  }
}

.info-flow-note {
  position: absolute;
  bottom: -2em;
  left: 0;
  font-size: 18px;
}
@media screen and (width <= 768px) {
  .info-flow-note {
    bottom: -2em;
    font-size: clamp(10px, 8.092px + 0.509vw, 12px);
  }
}

.info-link {
  border-bottom: solid 3px var(--color-main);
}

.info-link-inner {
  width: min(100%, 740px);
  margin: 0 auto;
  padding: 120px var(--side-padding);
}
@media screen and (width <= 768px) {
  .info-link-inner {
    padding: 13.02vw var(--side-padding);
  }
}

.info-link-item {
  & > h2 {
    position: relative;
    padding-bottom: 3em;
    font-size: 24px;
    color: var(--color-main);
    text-align: center;
    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      display: block;
      width: 194px;
      height: 16px;
      background: url(/assets/img/recruit/bk_info_link.svg);
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
  & > p {
    margin-top: 60px;
    font-size: 18px;
  }
  & > a {
    margin: 60px auto 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(100%, 520px);
    padding: 50px;
    border: 2px solid var(--color-main);
    border-radius: 5px;
    background-color: var(--color-white);
    color: var(--color-main);
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    transition: all var(--transition-time) ease-out;
    z-index: 1;
    overflow: hidden;
    & > span {
      position: relative;
      width: 25px;
      height: 25px;
      margin: 0 .5em;
      background-color: var(--color-white);
      border: solid 1px var(--color-main);
      border-radius: 50%;
      transition: background-color var(--transition-time) ease-out;
      &::after {
        position: absolute;
        content: "";
        top: 3px;
        left: 3px;
        width: 17px;
        height: 17px;
        background-color: var(--color-main);
        mask-image: url(/assets/img/common/cmn_more_arrow.svg);
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: cover;
        transition: background-color var(--transition-time) ease-out;
      }
    }
    &::after {
      background: var(--color-main);
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      width: 100%;
      height: 250px;
      transform-origin: left top;
      transform: skewY(-20deg) scale(1, 0);
      transition: var(--transition-time) ease-out;
      z-index: -1;
    }
    &:hover {
      color: var(--color-white);
      &::after {
        transform: skewY(-10deg) scale(1, 1);
      }
      & > span {
        background-color: var(--color-white);
        &::after {
          background-color: var(--color-main);
        }
      }
    }
  }
  &._recruit > a {
    background-color: var(--color-main);
    color: var(--color-white);
    & > span {
      border-color: var(--color-white);
      background-color: var(--color-main);
      &::after {
        background-color: var(--color-white);
      }
    }
    &::after {
      background: var(--color-white);
    }
    &:hover {
      color: var(--color-main);
    }
  }
  &._entry {
    margin-top: 200px;
  }
}
@media screen and (width <= 768px) {
  .info-link-item {
    & > h2 {
      font-size: clamp(22px, 16.275px + 1.527vw, 28px);
      padding-bottom: 1.5em;
    }
    & > p {
      margin-top: 2em;
      font-size: clamp(14px, 12.092px + 0.509vw, 16px);
    }
    & > a {
      margin-top: 1.5em;
      padding: 1em;
      font-size: clamp(22px, 16.275px + 1.527vw, 28px);
    }
    &._entry {
      margin-top: 19.53vw;
    }
  }
}


/***** recruit footer *****/
.recruitFooterContact {
  border-top: solid 3px var(--color-main);
  border-bottom: solid 3px var(--color-main);
  padding: 120px 0;
}
@media screen and (width <= 768px) {
  .recruitFooterContact {
    padding: 15.62vw 0;
  }
}

.recruitFooterContact-inner {
  width: min(100%, 1120px);
  padding: 0 var(--side-padding);
  margin: 0 auto;
}

.recruitFooterContact-link {
  display: flex;
  justify-content: center;
  gap: 4vw;
  & a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(50%, 500px);
    padding: 50px;
    border: 2px solid var(--color-main);
    border-radius: 5px;
    background-color: var(--color-white);
    color: var(--color-main);
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    transition: all var(--transition-time) ease-out;
    z-index: 1;
    overflow: hidden;
    & > span {
      position: relative;
      width: 25px;
      height: 25px;
      margin: 0 .5em;
      background-color: var(--color-white);
      border: solid 1px var(--color-main);
      border-radius: 50%;
      transition: background-color var(--transition-time) ease-out;
      &::after {
        position: absolute;
        content: "";
        top: 3px;
        left: 3px;
        width: 17px;
        height: 17px;
        background-color: var(--color-main);
        mask-image: url(/assets/img/common/cmn_more_arrow.svg);
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: cover;
        transition: background-color var(--transition-time) ease-out;
      }
    }
    &::after {
      background: var(--color-main);
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      width: 100%;
      height: 250px;
      transform-origin: left top;
      transform: skewY(-20deg) scale(1, 0);
      transition: var(--transition-time) ease-out;
      z-index: -1;
    }
    &:hover {
      color: var(--color-white);
      &::after {
        transform: skewY(-10deg) scale(1, 1);
      }
      & > span {
        background-color: var(--color-white);
        &::after {
          background-color: var(--color-main);
        }
      }
    }
    &:first-of-type {
      background-color: var(--color-main);
      color: var(--color-white);
      & > span {
        border-color: var(--color-white);
        background-color: var(--color-main);
        &::after {
          background-color: var(--color-white);
        }
      }
      &::after {
        background: var(--color-white);
      }
      &:hover {
        color: var(--color-main);
      }
    }
  }
}
@media screen and (width <= 768px) {
  .recruitFooterContact-link {
    flex-flow: column;
    gap: 6vw;
    & a {
      width: min(100%, 400px);
      margin: 0 auto;
      padding: 1.2em 0;
      font-size: clamp(18px, 14.183px + 1.018vw, 22px);
      &::after {
        width: 102%;
      }
      & > span {
        width: 21px;
        height: 21px;
        &::after {
          width: 13px;
          height: 13px;
        }
      }
    }
  }
}