@charset "UTF-8";
.visual {
  background: url(../img/career/mv_career.jpg) no-repeat center center;
  background-size: cover;
}
@media only screen and (max-width: 640px) {
  .visual {
    background-size: cover;
  }
}

.career-title {
  margin-bottom: 4rem;
  padding: 2rem 3rem;
  border-radius: 0.8rem;
  display: flex;
  align-items: center;
  gap: 4rem;
  background: #fff;
}
@media only screen and (max-width: 640px) {
  .career-title {
    padding: 3.125vw 4.6875vw;
    flex-direction: column;
    gap: 0;
    line-height: 1.4;
    text-align: center;
  }
}
.career-title .step-num {
  font-family: "Marcellus", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 4rem;
  text-align: center;
  line-height: 1;
  color: #008449;
}
@media only screen and (max-width: 640px) {
  .career-title .step-num {
    font-size: 7.5vw;
  }
}
.career-title .step-num span {
  font-size: 2rem;
  display: block;
}
@media only screen and (max-width: 640px) {
  .career-title .step-num span {
    font-size: 3.75vw;
  }
}
.career-title h2 {
  font-family: YakuHanMP, "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 2.4rem;
}
@media only screen and (max-width: 1390px) {
  .career-title h2 {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 640px) {
  .career-title h2 {
    font-size: 3.75vw;
  }
}

.step {
  margin: 4rem 9rem 6rem 6rem;
  padding: 0;
  border-radius: 1.6rem;
  background: rgba(208, 243, 255, 0.4);
}
@media only screen and (max-width: 640px) {
  .step {
    margin: 6.25vw 6.25vw 0 6.25vw;
  }
}
.step-arrow {
  margin: 6rem auto 2.4rem;
  width: 2.3rem;
}
@media only screen and (max-width: 640px) {
  .step-arrow {
    margin-top: 0;
  }
}

.step1-wrapper {
  padding: 7rem 0 0;
  background: url(../img/career/bg_top.webp) no-repeat center top;
}
@media only screen and (max-width: 640px) {
  .step1-wrapper {
    padding: 5.625vw 0 0;
  }
}
.step1-container {
  position: relative;
}
.step1-container.-top {
  padding-left: 20rem;
}
@media only screen and (max-width: 640px) {
  .step1-container.-top {
    padding-left: 0;
  }
}
.step1-container.-top figure {
  position: absolute;
  top: 0;
  left: -4rem;
}
@media only screen and (max-width: 640px) {
  .step1-container.-top figure {
    top: -25vw;
    left: -12.5vw;
    width: 37.5vw;
  }
}
.step1-container.-bottom {
  padding-right: 24rem;
}
@media only screen and (max-width: 640px) {
  .step1-container.-bottom {
    padding-right: 0;
  }
}
.step1-container.-bottom figure {
  position: absolute;
  bottom: 0;
  right: 0;
}
@media only screen and (max-width: 640px) {
  .step1-container.-bottom figure {
    width: 37.5vw;
    top: -37.5vw;
    bottom: auto;
    right: -18.75vw;
    z-index: 0;
  }
}
.step1-container.-bottom .step1-list {
  margin-left: 8rem;
}
@media only screen and (max-width: 640px) {
  .step1-container.-bottom .step1-list {
    margin-left: 0;
  }
}
.step1-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 640px) {
  .step1-list {
    justify-content: center;
  }
}
.step1-item {
  width: 18.4rem;
  height: 18.4rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* ホバー中は少し大きく＆その場でゆらぎを抑える（任意） */
}
@media only screen and (max-width: 1390px) {
  .step1-item {
    width: 15.4rem;
    height: 15.4rem;
  }
}
@media only screen and (max-width: 640px) {
  .step1-item {
    width: 33.3333333333%;
    height: 33.3333333333vw;
  }
}
.step1-item a {
  width: 138px;
  height: 138px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  line-height: 1.3;
  font-weight: 700;
  background: url(../img/career/bubble_gray.png) no-repeat center/100% 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  /* JS が更新するカスタムプロパティ（初期値） */
  --dx: 0px;
  --dy: 0px;
  --scale: 1;
  transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(var(--scale));
  transition: transform var(--dur, 2.6s) ease-in-out;
  will-change: transform;
  pointer-events: auto;
}
@media only screen and (max-width: 640px) {
  .step1-item a {
    width: 22.5vw;
    height: 22.5vw;
  }
}
.step1-item:hover a {
  --scale: 1.06;
  --dx: 0px;
  --dy: 0px;
}
.step1-item.-pink a {
  color: #E95283;
  background: url(../img/career/bubble_pink.png) no-repeat center/100% 100%;
}
.step1-item.-green a {
  color: #6AA700;
  background: url(../img/career/bubble_green.png) no-repeat center/100% 100%;
}
.step1-item.-purple a {
  color: #955094;
  background: url(../img/career/bubble_purple.png) no-repeat center/100% 100%;
}
.step1-item.-blue a {
  color: #2C92D7;
  background: url(../img/career/bubble_blue.png) no-repeat center/100% 100%;
}
.step1-item.-orange a {
  color: #D98D00;
  background: url(../img/career/bubble_orange.png) no-repeat center/100% 100%;
}

/* 低速端末・ユーザー設定への配慮 */
@media (prefers-reduced-motion: reduce) {
  .step1-item a {
    transition: none !important;
    transform: translate(-50%, -50%);
    /* 静止 */
  }
}
.step2-wrapper {
  display: none;
  padding-bottom: 9.6rem;
  background: url(../img/career/bg_bottom.webp) no-repeat center bottom;
}
.step2-title-m {
  margin: 6rem;
  font-size: 2.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 1em;
}
@media only screen and (max-width: 640px) {
  .step2-title-m {
    margin: 6.25vw;
  }
}
.step2-title-m::before, .step2-title-m::after {
  content: "";
  width: 6.4rem;
  height: 0.2rem;
  background: rgba(0, 0, 0, 0.4);
  display: block;
}
.step2-group {
  padding-top: 4rem;
}
@media only screen and (max-width: 640px) {
  .step2-group {
    padding-top: 0;
  }
}
.step2-list {
  margin-bottom: 8rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4.4rem;
}
@media only screen and (max-width: 640px) {
  .step2-list {
    gap: 4vw 4%;
  }
}
.step2-item {
  width: 27rem;
  min-height: 16.8rem;
  position: relative;
  transition: top 0.3s ease;
  top: 0;
}
@media only screen and (max-width: 640px) {
  .step2-item {
    width: 100%;
    min-height: 46.25vw;
    display: flex;
    align-items: center;
  }
}
.step2-item:hover {
  top: -1em;
}
.step2-item:hover a {
  opacity: 1;
}
.step2-item::after {
  margin: 0 auto;
  content: "";
  position: absolute;
  bottom: -1.5rem;
  left: 0;
  right: 0;
  display: block;
  width: 3rem;
  height: 3rem;
}
.step2-item.-pink {
  background: url(../img/career/bg_cloud_pink.png) no-repeat center bottom/100% auto;
}
.step2-item.-pink .step2-job {
  color: #E95283;
}
.step2-item.-pink::after {
  background: url(../img/career/arrow_pink.svg) no-repeat center center/100% auto;
}
.step2-item.-green {
  background: url(../img/career/bg_cloud_green.png) no-repeat center bottom/100% auto;
}
.step2-item.-green .step2-job {
  color: #6AA700;
}
.step2-item.-green::after {
  background: url(../img/career/arrow_green.svg) no-repeat center center/100% auto;
}
.step2-item.-purple {
  background: url(../img/career/bg_cloud_purple.png) no-repeat center bottom/100% auto;
}
.step2-item.-purple .step2-job {
  color: #955094;
}
.step2-item.-purple::after {
  background: url(../img/career/arrow_purple.svg) no-repeat center center/100% auto;
}
.step2-item.-blue {
  background: url(../img/career/bg_cloud_blue.png) no-repeat center bottom/100% auto;
}
.step2-item.-blue .step2-job {
  color: #2C92D7;
}
.step2-item.-blue::after {
  background: url(../img/career/arrow_blue.svg) no-repeat center center/100% auto;
}
.step2-item.-orange {
  background: url(../img/career/bg_cloud_orange.png) no-repeat center bottom/100% auto;
}
.step2-item.-orange .step2-job {
  color: #D98D00;
}
.step2-item.-orange::after {
  background: url(../img/career/arrow_orange.svg) no-repeat center center/100% auto;
}
.step2-item a {
  display: block;
  position: relative;
}
.step2-job {
  margin-bottom: 0.5em;
  font-size: 2rem;
  font-weight: 700;
  width: 100%;
}
@media only screen and (max-width: 640px) {
  .step2-job {
    padding-left: 6.25vw;
  }
}
.step2-container {
  display: flex;
  align-items: flex-start;
}
.step2-text {
  margin-right: -1.6rem;
  margin-bottom: 1em;
  width: 18rem;
  line-height: 1.4;
  font-size: 1.4rem;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 640px) {
  .step2-text {
    margin-right: 0;
    margin-bottom: 0;
    padding-left: 6.25vw;
    width: 50vw;
    font-size: 1.6rem;
  }
}
.step2-image {
  width: 11.6rem;
  position: relative;
  z-index: 0;
}
@media only screen and (max-width: 640px) {
  .step2-image {
    width: 30vw;
  }
}

.finish {
  padding-top: 0;
  display: none;
}
.finish .step-arrow {
  margin-top: 0;
}
.finish .career-title {
  background: linear-gradient(180deg, rgba(233, 82, 131, 0.15) 0%, rgba(227, 147, 0, 0.15) 100%);
}
.finish .career-title .step-num {
  color: rgb(183, 0, 59);
}
.finish-item {
  border-radius: 2.4rem;
  overflow: hidden;
  display: none;
}
.finish-item a {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}
@media only screen and (max-width: 640px) {
  .finish-item a {
    flex-direction: column;
  }
}
.finish-item.-nursing a {
  background: linear-gradient(90deg, #C76A9C 0.74%, #FF87A3 57.99%);
}
.finish-item.-medical_technology a {
  background: linear-gradient(90deg, #65B671 0%, #78BD00 61.59%);
}
.finish-item.-radiological_technology a {
  background: linear-gradient(90deg, #7280C3 0%, #955095 87.34%);
}
.finish-item.-n_oral_health a {
  background: linear-gradient(90deg, #50AEEF 0%, #5FB496 50.07%);
}
.finish-item.-education a {
  background: linear-gradient(90deg, #E59500 0%, #FF87A3 49.71%);
}
.finish-text {
  padding: 0 5rem;
  width: 48rem;
  color: #fff;
  line-height: 1.6;
}
@media only screen and (max-width: 640px) {
  .finish-text {
    width: 100%;
  }
}
.finish-text h3 {
  margin-bottom: 0.5em;
  font-size: 4.2rem;
  font-weight: 500;
  line-height: 1.3;
}
.finish-text h3 span {
  font-size: 3rem;
}
.finish-text .btn-more {
  margin-top: 4rem;
}
.finish-text .btn-more span {
  margin-left: 0;
}
.finish-image {
  width: 64rem;
}
@media only screen and (max-width: 640px) {
  .finish-image {
    width: 100%;
  }
}

.step2-wrapper,
.finish-item {
  scroll-margin-top: calc(var(--header-offset, 120px) + 8px);
}

/* もし :root で共通指定したい場合 */
:root {
  --header-offset: 120px;
  /* ヘッダーの高さに合わせて調整 */
}/*# sourceMappingURL=career.css.map */