.section {
  padding-block: 6.25rem;
}

.content_head {
  margin: 0 auto;
  max-width: 75rem;
  padding-inline: 1.25rem;
}

.careerHeading {
  border-left: 1px solid #1e4e6a;
  color: #1e4e6a;
  font-size: clamp(1.25rem, 0.807rem + 0.92vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.8;
  padding-left: 1.0625rem;
  position: relative;
}

.careerUp__lead {
  color: #303132;
  font-size: clamp(0.875rem, 0.654rem + 0.46vw, 1rem);
  letter-spacing: 0.04em;
  line-height: 2;
  margin-top: 2.5rem;
}

.careerUp__display {
  display: grid;
  gap: 1rem 2.1875rem;
  grid-template-columns: 10.375rem 1fr;
  grid-template-rows: auto auto auto;
  margin-top: 3.125rem;
  position: relative;
  z-index: 1;
}

.staffCard {
  background: #4f88c4;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  grid-column: 1;
  grid-row: 1 / span 3;
  height: fit-content;
  padding: 1.875rem 1.25rem;
  place-self: center;
  z-index: 2;
}

.staffCard * {
  color: #fff;
  text-align: center;
}

.staffCard__icon {
  margin: 0 auto;
  max-width: 3.125rem;
}

.staffCard__heading {
  font-size: clamp(1rem, 0.779rem + 0.46vw, 1.125rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.8;
}

.staffCard__text {
  font-size: clamp(0.75rem, 0.529rem + 0.46vw, 0.875rem);
  line-height: 1.7;
}

.careerTypeCard {
  border: 1px solid;
  border-radius: 8px;
  grid-column: 2;
  overflow: hidden;
  z-index: 2;
}

.careerTypeCard--management {
  border-color: #586fc0;
  grid-row: 1;
}

.careerTypeCard--shift {
  border-color: #48b4b8;
  grid-row: 2;
}

.careerTypeCard--expert {
  border-color: #ed962b;
  grid-row: 3;
}

.careerTypeCard__header {
  display: grid;
  gap: 1rem;
  grid-template-columns: 3.125rem 1fr;
  padding: 0.625rem 1.25rem;
}

.careerTypeCard--management .careerTypeCard__header {
  background-color: #586fc0;
}

.careerTypeCard--shift .careerTypeCard__header {
  background-color: #48b4b8;
}

.careerTypeCard--expert .careerTypeCard__header {
  background-color: #ed962b;
}

.careerTypeCard__headerIcon {
  height: 3.125rem;
  width: 3.125rem;
}

.careerTypeCard__heading {
  align-items: center;
  display: flex;
  gap: 1rem;
}

.careerTypeCard__heading * {
  color: #fff;
}

.careerTypeCard__heading .large {
  font-size: clamp(1rem, 0.779rem + 0.46vw, 1.125rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.8;
}

.careerTypeCard__heading .small {
  font-size: clamp(0.75rem, 0.529rem + 0.46vw, 0.875rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 2;
}

.careerTypeCard__heading .border {
  background: #fff;
  display: block;
  height: 1.25rem;
  width: 1px;
}

.careerTypeCard__body {
  background: #fff;
  padding: 1.25rem;
}

.careerTypeCard__list {
  display: grid;
  gap: 0.625rem;
}

.careerTypeCard--management .careerTypeCard__list {
  grid-template-columns: repeat(4, 1fr);
}

.careerTypeCard--expert .careerTypeCard__list {
  grid-template-columns: 1fr 1fr;
}

.careerTypeCard__item,
.careerSupport__item {
  align-items: center;
  border: 1px solid;
  border-radius: 8px;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: clamp(2.5rem, 4.16vw, 3.125rem) 1fr;
  padding: 0.625rem;
  position: relative;
}

.careerTypeCard--management .careerTypeCard__item {
  background-color: rgba(105, 127, 205, 0.1);
  border-color: #586fc0;
}

.careerTypeCard--management .careerTypeCard__item:not(:last-child)::after {
  background: url(../../../img/recruit/growth-training/icon-arrow_management.svg) no-repeat center / cover;
  content: "";
  display: block;
  height: 1.375rem;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(85%, -50%);
  width: 1.25rem;
}

.careerTypeCard--shift .careerTypeCard__item {
  background-color: rgba(72, 180, 184, 0.1);
  border-color: #48b4b8;
}

.careerTypeCard--expert .careerTypeCard__item {
  background-color: rgba(237, 150, 43, 0.1);
  border-color: #ed962b;
}

.careerTypeCard__itemHeading {
  font-size: clamp(0.875rem, 0.654rem + 0.46vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 2;
}

.careerTypeCard--management .careerTypeCard__itemHeading {
  color: #697fcd;
}

.careerTypeCard--shift .careerTypeCard__itemHeading {
  color: #48b4b8;
}

.careerTypeCard--expert .careerTypeCard__itemHeading {
  color: #ed962b;
}

.careerTypeCard__itemText {
  color: #303132;
  font-size: clamp(0.75rem, 0.529rem + 0.46vw, 0.875rem);
  line-height: 1.6;
}

.careerSupport {
  background: rgba(105, 127, 205, 0.1);
  border: 1px solid #697fcd;
  border-radius: 8px;
  margin-top: 2.875rem;
  padding: 1.875rem 1.875rem 1.5rem;
  position: relative;
}

.careerSupport__list {
  display: grid;
  grid-template-columns: repeat(4, auto);
}

.careerSupport__item {
  border: none;
  border-radius: 0;
  gap: 0.75rem;
  padding: 0 1.25rem;
}

.careerSupport__item:first-child {
  padding-left: 0;
}

.careerSupport__item:last-child {
  padding-right: 0;
}

.careerSupport__item:not(:last-child) {
  border-right: 1px solid rgba(105, 127, 205, 0.2);
}

.careerSupport__heading {
  background: linear-gradient(to bottom, #fff 0%, #fff 50%, transparent 50%, transparent 100%);
  color: #697fcd;
  font-size: clamp(1.25rem, 0.918rem + 0.69vw, 1.438rem);
  font-weight: 700;
  left: 50%;
  letter-spacing: 0.04em;
  line-height: 1.25;
  padding-inline: 1.25rem;
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
}

.careerSupport__itemHeading {
  color: #697fcd;
  font-size: clamp(0.875rem, 0.654rem + 0.46vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.25;
}

.careerSupport__itemText {
  color: #303132;
  font-size: clamp(0.75rem, 0.529rem + 0.46vw, 0.875rem);
  line-height: 1.6;
  margin-top: 0.625rem;
}

.carrerUp__longLine {
  height: 100%;
  left: 10.25rem;
  position: absolute;
  z-index: -1;
}

.carrerUp__longLine img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* Training */

.section--training {
  padding-top: 7.375rem;
}

.training__intro {
  align-items: end;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr auto;
  margin-top: 1rem;
}

.training__catch {
  color: #303132;
  font-size: clamp(1.125rem, 0.904rem + 0.46vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 2.4;
}

.training__lead {
  color: #303132;
  font-size: clamp(0.875rem, 0.654rem + 0.46vw, 1rem);
  letter-spacing: 0.04em;
  line-height: 2;
  margin-top: 1.5rem;
}

.training__message {
  width: clamp(15rem, 24.58vw, 22.125rem);
}

.training__message img {
  width: 100%;
}

.trainingTabs {
  border-bottom: 1px solid #cfd0d2;
  display: flex;
  gap: 1.25rem;
  margin-top: 4rem;
}

.trainingTabs__btn {
  align-items: center;
  background: #f7fafd;
  border: 1px solid #cfd0d2;
  border-radius: 4px 4px 0 0;
  color: #1e4e6a;
  cursor: pointer;
  display: flex;
  flex: 1;
  font-size: clamp(1rem, 0.694rem + 0.64vw, 1.125rem);
  font-weight: 700;
  height: 3.75rem;
  justify-content: center;
  letter-spacing: 0.1em;
  margin-bottom: -1px;
  padding: 0.5rem 1rem;
  transition:
    background-color 0.2s ease-out,
    border-bottom-color 0.2s ease-out;
}

.trainingTabs__btn.is-active {
  background-color: #fff;
  border-bottom-color: #fff;
}

.trainingStep {
  align-items: start;
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr 26.25rem;
  padding: 4rem 2.5rem;
  position: relative;
}

.trainingStep:not(:last-child) {
  border-bottom: 1px solid #cfd0d2;
  margin-bottom: 0.8125rem;
}

.trainingStep:not(:last-child)::after {
  background: #5880b5;
  bottom: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  content: "";
  height: 0.8125rem;
  left: 50%;
  position: absolute;
  transform: translate(-50%, 100%);
  width: 1.875rem;
}

.trainingStep__header {
  align-items: center;
  display: flex;
  gap: 1.5rem;
}

.trainingStep__num {
  align-items: center;
  aspect-ratio: 1;
  background: #2f72ba;
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  font-family: "Inter", sans-serif;
  font-size: 2.25rem;
  font-weight: 400;
  gap: 0.25rem;
  justify-content: center;
  line-height: 1;
  width: 5rem;
}

.trainingStep__label {
  color: #fff;
  font-size: 1rem;
}

.trainingStep__heading {
  color: #303132;
  font-size: clamp(1.25rem, 0.807rem + 0.92vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.8;
}

.trainingStep__text {
  color: #303132;
  font-size: clamp(0.875rem, 0.654rem + 0.46vw, 1rem);
  letter-spacing: 0.04em;
  line-height: 2;
  margin-top: 2rem;
}

.trainingStep__img {
  align-items: center;
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  color: #303132;
  display: flex;
  font-size: clamp(0.875rem, 0.654rem + 0.46vw, 1rem);
  justify-content: center;
  letter-spacing: 0.04em;
  line-height: 2;
  overflow: hidden;
}

.trainingStep__img img {
  width: 100%;
}

.trainingStep__visual {
  border-radius: 12px;
  overflow: hidden;
}

.trainingStep__visual.pyramid {
  border-radius: unset;
  overflow: initial;
}

.trainingList {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2.5rem;
}

.trainingList__item {
  align-items: center;
  background: #f1f0f4;
  border-radius: 8px;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 3.125rem 1fr;
  padding: 1rem;
}

.trainingContinuous .trainingList__item {
  gap: 1rem;
}

.trainingList__icon {
  align-items: center;
  display: flex;
  height: 3.125rem;
  justify-content: center;
}

.trainingList__icon img {
  width: 2rem;
}

.trainingList__heading {
  color: #2f72ba;
  font-size: clamp(0.875rem, 0.654rem + 0.46vw, 1rem);
  font-weight: 700;
  line-height: 1.2;
}

.trainingList__text {
  color: #303132;
  font-size: clamp(0.75rem, 0.529rem + 0.46vw, 0.875rem);
  line-height: 1.6;
  margin-top: 0.25rem;
}

.trainingContinuous {
  border: 1px solid #2f72ba;
  border-radius: 8px;
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.05);
  margin-top: 0;
  padding: 2.5rem;
}

.trainingContinuous__heading {
  color: #2f72ba;
  font-size: clamp(1.25rem, 0.807rem + 0.92vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.8;
}

.trainingContinuous__text {
  color: #303132;
  font-size: clamp(0.875rem, 0.654rem + 0.46vw, 1rem);
  letter-spacing: 0.04em;
  line-height: 2;
  margin-top: 1rem;
}

/* Benefits */

.section--benefits {
  background-color: #f1f0f4;
  max-width: unset;
}

.section--benefits .benefits__inner {
  margin-inline: auto;
  max-width: 77.5rem;
  padding-inline: 1.25rem;
}

.benefits {
  display: flex;
  flex-direction: column;
  gap: clamp(3.375rem, 5.926vw, 4rem);
  margin-top: clamp(3.75rem, 7.407vw, 5rem);
}

.benefitsCategory__header {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 5rem 1fr;
}

.benefitsCategory__heading {
  color: #303132;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
}

.benefitsCategory__description {
  color: #303132;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  line-height: 2;
  margin-top: 0.5rem;
}

.benefitsPosts {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 1rem;
}

.benefitsPosts__single {
  background: #fff;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: auto;
  padding: 1.5rem;
}

.benefitsPost__thumbnail img {
  width: 100%;
}

.benefitsPost__heading {
  color: #303132;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.4;
  padding-left: 1.125rem;
  position: relative;
}

.benefitsPost__heading::before {
  background: #2f72ba;
  content: "";
  display: block;
  height: 0.5rem;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0.5rem;
}

.benefitsPost__text {
  color: #303132;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  line-height: 2;
}

.benefitsPost__disclaimer {
  color: #888;
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  line-height: 2;
}

@media screen and (max-width: 950px) {
  .careerTypeCard--management .careerTypeCard__list,
  .careerSupport__list {
    grid-template-columns: 1fr 1fr;
  }
  .careerSupport__list {
    gap: 1rem;
  }
  .careerSupport__item {
    padding: 0;
  }

  .careerSupport__item:nth-child(2) {
    border-right: none;
  }
  .benefitsPosts {
    grid-template-columns: 1fr 1fr;
  }

  .trainingStep {
    gap: 2rem;
    grid-template-columns: 1fr 1fr;
    padding-inline: 0;
  }
}

@media screen and (max-width: 767px) {
  .section {
    padding-block: 5rem;
  }

  .section--benefits .benefits__inner {
    padding-inline: 0;
  }

  .carrerUp__longLine {
    display: none;
  }

  .careerUp__display {
    display: flex;
    flex-direction: column;
    margin-inline: -1.25rem;
  }

  .staffCard {
    position: relative;
  }

  .staffCard::after {
    background: #2352d4;
    bottom: -1.875rem;
    content: "";
    height: 1.875rem;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 1px;
  }

  .staffCard__heading,
  .careerTypeCard__heading .large {
    font-size: 1.125rem;
  }

  .careerTypeCard__itemHeading,
  .careerSupport__itemHeading {
    font-size: 1rem;
  }

  .staffCard__text,
  .careerTypeCard__heading .small,
  .careerTypeCard__itemText,
  .careerSupport__itemText {
    font-size: 0.875rem;
  }

  .careerTypeCard__heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
  }

  .careerTypeCard__heading .border {
    display: none;
  }

  .careerTypeCard__list,
  .careerSupport__list {
    display: flex;
    flex-direction: column;
  }

  .careerTypeCard--management .careerTypeCard__item:not(:last-child)::after {
    bottom: 0;
    left: 50%;
    top: auto;
    transform: translate(-50%, 80%) rotate(90deg);
  }

  .careerSupport__item {
    border-bottom: 1px solid rgba(105, 127, 205, 0.2);
    border-right: none !important;
    padding: 1.25rem 0;
  }

  .careerSupport__item:first-child {
    padding-top: 0;
  }

  .careerSupport__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .careerTypeCard--management {
    margin-top: 0.875rem;
  }

  .section--training {
    padding-top: 0;
  }

  .training__intro {
    gap: 1.5rem;
    grid-template-columns: 1fr;
  }

  .training__catch {
    font-size: 1.125rem;
    line-height: 1.8;
  }

  .training__lead {
    margin-top: 1rem;
  }

  .training__message {
    justify-self: center;
    width: min(100%, 17.5rem);
  }

  .trainingTabs {
    gap: 0.625rem;
    margin-top: 2.5rem;
  }

  .trainingTabs__btn {
    font-size: 1rem;
    height: 3.125rem;
    padding-inline: 0.5rem;
  }

  .trainingStep {
    display: flex;
    flex-direction: column;
    padding-block: 2.5rem;
  }

  /* SP: タイトル → 文 → 画像 → trainingList の順に並べ替え */
  .trainingStep__body {
    display: contents;
  }

  .trainingStep__header {
    order: 1;
  }

  .trainingStep__visual {
    order: 2;
  }

  .trainingStep__text {
    order: 3;
  }

  .trainingList {
    order: 4;
  }

  .trainingStep:not(:last-child)::after {
    height: 0.625rem;
    width: 1.5rem;
  }

  .trainingStep__header {
    gap: 1rem;
  }

  .trainingStep__num {
    font-size: 1.5rem;
    gap: 0.125rem;
    width: 4rem;
  }

  .trainingStep__label {
    font-size: 0.75rem;
  }

  .trainingStep__heading {
    font-size: 1.125rem;
    line-height: 1.6;
  }

  .trainingStep__text {
    margin-top: 0;
  }

  .trainingStep__visual {
    margin-inline: auto;
    max-width: 26.25rem;
    width: 100%;
  }

  .trainingList {
    gap: 0.75rem;
    margin-top: 0;
  }

  .trainingList__item,
  .trainingContinuous .trainingList__item {
    gap: 0.75rem;
    grid-template-columns: 2.5rem 1fr;
    padding: 0.875rem 1rem;
  }

  .trainingList__icon {
    height: 2.5rem;
  }

  .trainingList__icon img {
    width: 1.75rem;
  }

  .trainingList__heading {
    line-height: 1.5;
  }

  .trainingContinuous {
    padding: 1.875rem 1.25rem;
  }

  .trainingContinuous__heading {
    font-size: 1.125rem;
    line-height: 1.6;
  }

  .trainingContinuous .trainingList {
    margin-top: 1.5rem;
  }
}

@media screen and (max-width: 550px) {
  .benefitsPosts {
    grid-template-columns: 1fr;
  }
}

.footer__recruitInfo {
  display: none;
}