.p-numbers__img {
  -webkit-mask-image: var(--bg-mask);
  mask-image: var(--bg-mask);
  -webkit-mask-size: 98% auto;
  mask-size: 98% auto;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.p-numbers__img-wrap {
  filter: drop-shadow(var(--size-6) var(--size-6) var(--size-8) var(--sw-secondary));
}

.p-contract-system-item {
  text-align: center;
}

.p-contract-system-item__img {
  display: block;
  width: 100%;
  margin-bottom: var(--size-24);
  overflow: hidden;
  border-radius: var(--size-40);
  box-shadow: var(--size-8) var(--size-6) var(--size-16) var(--bg-primary);
  aspect-ratio: 26 / 15;
}

.p-contract-system-item__img > img {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #ccc;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

.p-contract-system-item__name {
  color: var(--txt-secondary);
  font-size: var(--size-32);
  font-weight: 700;
  line-height: var(--size-44);
}

.p-training-system-list {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(2, 1fr);
}

.p-training-system {
  padding: var(--size-40);
  border-radius: var(--size-40);
  background-color: var(--bg-clear);
  box-shadow: 0 0 var(--size-12) var(--sw-secondary);
}

.p-training-system__head {
  display: grid;
  grid-auto-columns: 1fr auto;
  grid-template-areas: "title date" "en date";
  align-items: center;
  margin-bottom: var(--size-24);
  gap: var(--size-4);
}

.p-training-system__name {
  grid-area: title;
  color: var(--txt-secondary);
  font-size: var(--size-32);
  font-weight: 700;
  line-height: var(--size-44);
}

.p-training-system__sub {
  grid-area: en;
  font-size: var(--size-14);
  font-weight: 700;
  line-height: var(--size-24);
}

.p-training-system__date {
  display: flex;
  grid-area: date;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--txt-secondary);
  font-size: var(--size-24);
  font-weight: 700;
  gap: var(--size-4);
}

.p-training-system__date > span {
  font-size: var(--size-64);
  font-weight: 400;
}

.p-training-system__title {
  margin-bottom: var(--size-16);
  color: var(--txt-secondary);
  font-size: var(--size-20);
  font-weight: 700;
  line-height: var(--size-32);
}

.p-training-system__text {
  font-size: var(--size-18);
  line-height: var(--size-32);
}

.p-career-path {
  margin-top: var(--size-64);
}

.p-career-path .c-section-subheader {
  flex: 1 0 var(--col-4);
}

.p-career-path__img {
  display: flex;
  flex: 0 1 100%;
  align-items: center;
  justify-content: center;
  padding: var(--size-32);
  border: 2px solid var(--bd-primary);
  border-radius: var(--size-32);
  background-color: var(--bg-clear);
  aspect-ratio: 2 / 1;
}

.p-numbers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--size-56) var(--gap);
}

.p-numbers__img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(240px, 16.666vw);
  height: min(240px, 16.666vw);
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  background: var(--bg-clear);
}

.p-numbers__img > img {
  display: block;
  width: 60%;
  height: 60%;
  -o-object-fit: cover;
  object-fit: cover;
}

.p-numbers__data {
  flex: 1 0 auto;
}

.p-numbers__title {
  margin-bottom: var(--size-16);
  font-size: var(--size-24);
  font-weight: 700;
  line-height: var(--size-36);
}

.p-numbers__unit {
  display: inline-block;
}

.p-numbers__unit--pre {
  margin-right: var(--size-8);
}

.p-numbers__caption,
.p-numbers__unit--suf {
  margin-left: var(--size-8);
}

.p-numbers__caption {
  display: inline-block;
  font-size: var(--size-16);
  font-weight: 400;
  line-height: var(--size-28);
}

.p-numbers__text {
  color: var(--txt-secondary);
  font-size: var(--size-48);
  font-weight: 900;
  line-height: var(--size-64);
}

.p-numbers__num {
  display: inline-block;
  font-size: var(--size-80);
  font-weight: 700;
  line-height: var(--size-96);
  vertical-align: baseline;
}

.p-numbers__num > span {
  font-size: 85%;
}

@media screen and (min-width: 769px) {
  .p-contract-system-list {
    display: grid;
    gap: var(--gap);
  }

  .p-career-path {
    display: flex;
    gap: var(--gap);
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .p-contract-system-item__img {
    margin-bottom: var(--size-20);
    border-radius: var(--size-32);
  }

  .p-contract-system-item__name {
    font-size: var(--size-28);
    line-height: var(--size-40);
  }

  .p-training-system-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .p-training-system {
    padding: var(--size-32);
    border-radius: var(--size-32);
  }

  .p-training-system__head {
    margin-bottom: var(--size-20);
  }

  .p-training-system__name {
    font-size: var(--size-28);
    line-height: var(--size-40);
  }

  .p-training-system__sub {
    font-size: var(--size-14);
    line-height: var(--size-24);
  }

  .p-training-system__title {
    margin-bottom: var(--size-12);
    font-size: var(--size-18);
    line-height: var(--size-32);
  }

  .p-training-system__text {
    font-size: var(--size-16);
    line-height: var(--size-28);
  }

  .p-career-path .c-section-subheader {
    flex-basis: var(--col-3);
  }

  .p-numbers {
    gap: var(--size-40) var(--gap);
  }

  .p-numbers__img {
    width: min(280px, 27.343vw);
    height: min(280px, 27.343vw);
    margin-bottom: var(--size-24);
  }

  .p-numbers__title {
    margin-bottom: var(--size-14);
    font-size: var(--size-32);
    line-height: var(--size-44);
  }

  .p-numbers__text {
    font-size: var(--size-40);
    line-height: var(--size-56);
  }
}

@media screen and (min-width: 769px) and (max-width: 1440px) {
  .p-contract-system-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 1025px) {
  .p-contract-system-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .p-career-path__img {
    padding: var(--size-40);
    border-radius: var(--size-40);
  }

  .p-numbers__item {
    display: flex;
    align-items: center;
    gap: var(--size-40);
  }
}

@media screen and (min-width: 1441px) {
  .p-career-path .c-section-subheader {
    flex-basis: var(--col-4);
  }

  .p-numbers__img {
    width: var(--col-3);
    height: var(--col-3);
    margin-bottom: var(--size-24);
  }
}

@media screen and (max-width: 1024px) {
  .p-numbers__item {
    text-align: center;
  }

  .p-numbers__num {
    font-size: var(--size-64);
    line-height: var(--size-80);
  }
}

@media screen and (max-width: 768px) {
  .p-contract-system-list .p-contract-system-item + .p-contract-system-item {
    margin-top: var(--size-32);
  }

  .p-contract-system-item__img {
    margin-bottom: var(--size-16);
    border-radius: var(--size-24);
  }

  .p-contract-system-item__name {
    font-size: var(--size-24);
    line-height: var(--size-36);
  }

  .p-training-system-list {
    display: block;
  }

  .p-training-system-list .p-training-system + .p-training-system {
    margin-top: var(--size-32);
  }

  .p-training-system {
    padding: var(--size-28);
    border-radius: var(--size-24);
  }

  .p-training-system__head {
    margin-bottom: var(--size-16);
  }

  .p-training-system__name {
    font-size: var(--size-24);
    line-height: var(--size-36);
  }

  .p-training-system__sub {
    font-size: var(--size-12);
    line-height: var(--size-20);
  }

  .p-training-system__date > span {
    font-size: var(--size-48);
  }

  .p-training-system__title {
    margin-bottom: var(--size-10);
    font-size: var(--size-18);
    line-height: var(--size-32);
  }

  .p-training-system__text {
    font-size: var(--size-15);
    line-height: var(--size-24);
  }

  .p-career-path .c-section-subheader {
    margin-bottom: var(--size-20);
  }

  .p-numbers {
    grid-template-columns: 1fr;
    gap: var(--size-40);
  }

  .p-numbers__img {
    width: clamp(280px, 74.666vw, 336px);
    height: clamp(280px, 74.666vw, 336px);
    margin-bottom: var(--size-20);
  }

  .p-numbers__title {
    margin-bottom: var(--size-5);
    font-size: var(--size-20);
    line-height: var(--size-32);
  }

  .p-numbers__caption {
    font-size: var(--size-14);
    line-height: var(--size-24);
  }

  .p-numbers__text {
    font-size: var(--size-32);
    line-height: var(--size-44);
  }
}