.requirements-container {
  width: min(var(--container), calc(100% - 80px));
  margin: 0 auto;
}

.requirements-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.requirements-heading p {
  color: var(--color-accent);
  font-family: var(--font-noto);
  font-size: 11.2px;
  font-weight: 400;
  line-height: 16.8px;
  letter-spacing: 2.24px;
}

.requirements-heading h2 {
  color: var(--color-text-primary);
  font-size: 48px;
  font-weight: 700;
  line-height: 51.2px;
  letter-spacing: 1.28px;
  transform: skewX(-10.42deg) scaleY(0.98);
}

.requirements-heading span {
  color: var(--color-text-muted);
  font-size: 18px;
  font-weight: 500;
  line-height: 23.68px;
}

.requirements-hero {
  position: relative;
  height: 650px;
  overflow: hidden;
  background: url("../assets/images/recruit/requirements/hero.webp") center / cover no-repeat;
}

.requirements-hero::before,
.requirements-hero::after {
  position: absolute;
  inset: 0;
  content: "";
}

.requirements-hero::before {
  background: linear-gradient(112deg, #f3efea 7%, rgba(243, 239, 234, 0.7) 32%, rgba(244, 238, 234, 0.4) 57%);
}

.requirements-hero::after {
  top: auto;
  height: 128px;
  background: linear-gradient(0deg, rgba(250, 250, 248, 0.18), rgba(250, 250, 248, 0));
}

.requirements-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 45px;
  width: min(1440px, calc(100% - 40px));
  max-width: 1440px;
  height: 555px;
  margin: 47.5px auto 0;
  padding-left: 130px;
}

.requirements-hero__logo {
  width: 156px;
  height: auto;
  transform: rotate(-0.67deg);
}

.requirements-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 15px;
  color: var(--color-text-primary);
}

.requirements-hero h1 {
  font-size: 58px;
  font-weight: 700;
  line-height: 74px;
  letter-spacing: 2.32px;
}

.requirements-hero__lead {
  font-size: 30px;
  font-weight: 700;
  line-height: 23.68px;
}

.requirements-hero__copy p:not(.requirements-hero__lead) {
  font-size: 20px;
  font-weight: 700;
  line-height: 34px;
}

.requirements-hero__actions {
  display: flex;
  gap: 16px;
}

.requirements-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 57px;
  border-radius: 5px;
  box-shadow: var(--shadow-button);
  font-size: 20px;
  font-weight: 700;
  line-height: 24.32px;
  letter-spacing: 0.608px;
}

.requirements-button--gold {
  width: 286px;
  color: var(--color-text-primary);
  background: linear-gradient(0deg, #c4a882 8.78%, #f0d5b0 67.67%);
}

.requirements-button--line {
  width: 307px;
  color: #fff;
  background: linear-gradient(180deg, #8dc76e 0%, #7bc653 50%, #4ab412 100%);
}

.requirements-ideal {
  padding: 150px 0;
}

.requirements-ideal__lead {
  margin-top: 60px;
  font-size: 30px;
  font-weight: 700;
  line-height: 35px;
  text-align: center;
}

.requirements-ideal__grid {
  display: grid;
  grid-template-columns: repeat(2, 565px);
  justify-content: center;
  gap: 48px 70px;
  margin-top: 60px;
}

.requirements-number-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  height: 240px;
  background: #fff;
  box-shadow: 9px 9px 0 rgba(196, 168, 130, 0.4);
}

.requirements-number-card div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
}

.requirements-number-card span {
  position: relative;
  width: 77px;
  color: var(--color-accent);
  font-family: var(--font-serif);
  font-size: 38px;
  font-style: italic;
  font-weight: 500;
  line-height: 32px;
  transform: skewX(-8deg);
}

.requirements-number-card span::after {
  position: absolute;
  top: 41px;
  left: 37px;
  width: 34px;
  height: 1px;
  background: var(--color-accent);
  transform: rotate(-45deg);
  transform-origin: left center;
  content: "";
}

.requirements-number-card h3 {
  width: 322px;
  font-size: 30px;
  font-weight: 700;
  line-height: 23.68px;
  white-space: nowrap;
}

.requirements-number-card p {
  width: 411px;
  color: var(--color-text-primary);
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  text-align: center;
}

.requirements-job {
  position: relative;
  min-height: 1282px;
  padding: 150px 0 103px;
  overflow: hidden;
  background: #fff;
}

.requirements-job::before {
  position: absolute;
  top: 222px;
  left: calc(50% - 608px);
  color: rgba(245, 240, 235, 0.4);
  font-family: var(--font-display);
  font-size: 164px;
  font-weight: 700;
  line-height: 0;
  letter-spacing: 1.28px;
  content: "TRAINER";
}

.requirements-job__photo {
  position: absolute;
  top: -2px;
  right: -247px;
  width: 942px;
  height: 482px;
  background:
    linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 24%),
    linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 46%),
    url("../assets/images/recruit/requirements/job-photo.webp") center / cover no-repeat;
}

.requirements-job__inner {
  position: relative;
  z-index: 1;
  width: 1240px;
  margin: 0 auto;
}

.requirements-job-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

.requirements-job-type h3 {
  font-size: 30px;
  font-weight: 700;
  line-height: 35px;
}

.requirements-job-type ul {
  display: flex;
  gap: 29px;
}

.requirements-job-type li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 182px;
  height: 51px;
  border-radius: 4px;
  color: #fff;
  background: var(--color-accent);
  font-size: 20px;
  font-weight: 700;
  line-height: 34px;
}

.requirements-job-type li:last-child {
  width: 208px;
}

.requirements-table-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  margin-top: 60px;
}

.requirements-table {
  width: 1200px;
  border-collapse: collapse;
  background: #fff;
  box-shadow: 9px 9px 0 rgba(140, 99, 62, 0.4);
}

.requirements-table th,
.requirements-table td {
  height: 56px;
  border-bottom: 1px solid rgba(184, 143, 82, 0.45);
  font-size: 20px;
  font-weight: 500;
  line-height: 56px;
  text-align: left;
  white-space: nowrap;
}

.requirements-table thead th {
  height: 50px;
  color: #fff;
  background: var(--color-sub, #c4a882);
  font-weight: 700;
  text-align: center;
}

.requirements-table tbody th {
  width: 375px;
  padding-left: 145px;
  background: var(--color-bg-light);
}

.requirements-table tbody td {
  padding-left: 85px;
}

.requirements-table a {
  color: var(--color-accent);
  font-weight: 700;
}

.requirements-benefits {
  padding: 150px 0;
}

.requirements-benefits__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  width: 1090px;
  margin: 0 auto;
}

.requirements-benefits__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 60px;
  width: 851px;
}

.requirements-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 23px;
  width: 163px;
  height: 163px;
  border-radius: 20px;
  color: var(--color-accent);
  background: #fff;
  box-shadow: 9px 9px 0 rgba(196, 168, 130, 0.4);
}

.requirements-benefit--accent {
  color: #fff;
  background: var(--color-accent);
}

.requirements-benefit img {
  width: 73px;
  height: 73px;
  object-fit: contain;
}

.requirements-benefit--accent img {
  filter: brightness(0) invert(1);
}

.requirements-benefit span {
  font-size: 20px;
  font-weight: 700;
  line-height: 34px;
  text-align: center;
  white-space: nowrap;
}

.requirements-flow {
  position: relative;
  padding: 150px 0;
  background: var(--gradient-gold);
}

.requirements-flow::before {
  position: absolute;
  top: 241px;
  left: calc(50% - 608px);
  color: rgba(255, 255, 255, 0.15);
  font-family: var(--font-display);
  font-size: 164px;
  font-weight: 700;
  line-height: 0;
  letter-spacing: 1.28px;
  content: "FLOW";
}

.requirements-flow .requirements-heading h2 {
  color: #fff;
}

.requirements-flow__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  width: 1200px;
  margin: 0 auto;
}

.requirements-flow__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1200px;
  height: 466px;
  background: #fff;
  box-shadow: 9px 9px 0 rgba(196, 168, 130, 0.4);
}

.requirements-flow__image {
  display: block;
  width: 100%;
}

.requirements-flow__panel img {
  display: block;
  width: 100%;
  height: auto;
}

.requirements-related {
  padding: 30px 0 80px;
  background: var(--color-bg-light);
}

.requirements-related__heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 28px;
  width: min(1200px, calc(100% - 80px));
  height: 24px;
  margin: 0 auto 28px;
}

.requirements-related__heading h2 {
  color: var(--color-accent);
  font-size: 30px;
  font-weight: 700;
  line-height: 23.68px;
}

.requirements-related__heading span {
  flex: 1 1 auto;
  width: auto;
  height: 1px;
  background: var(--color-accent);
}

.requirements-related__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  width: min(1200px, calc(100% - 80px));
  max-width: 100%;
  margin: 0 auto;
}

.requirements-related-card {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 46%;
  align-items: center;
  min-height: 320px;
  overflow: hidden;
  padding-left: 48px;
  border: 1px solid rgba(196, 168, 130, 0.42);
}

.requirements-related-card--dark {
  color: #fff;
  background: var(--gradient-dark);
}

.requirements-related-card--light {
  color: var(--color-text-primary);
  background: var(--color-bg-light);
}

.requirements-related-card div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

.requirements-related-card h3 {
  font-size: 38px;
  font-weight: 700;
  line-height: 51.2px;
  letter-spacing: 1.28px;
  transform: skewX(-10.42deg) scaleY(0.98);
}

.requirements-related-card p {
  font-size: 18px;
  font-weight: 500;
  line-height: 23.68px;
}

.requirements-related-card a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 57px;
  margin-top: 20px;
  border-radius: 5px;
  color: var(--color-text-primary);
  background: linear-gradient(0deg, #c4a882 8.78%, #f0d5b0 67.67%);
  box-shadow: var(--shadow-button);
  font-size: 20px;
  font-weight: 700;
  line-height: 24.32px;
  letter-spacing: 0.608px;
}

.requirements-related-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}

@media (min-width: 769px) {
  .requirements-related-card:nth-child(3) {
    order: 4;
  }

  .requirements-related-card:nth-child(4) {
    order: 3;
  }
}

@media (max-width: 768px) {
  .requirements-container {
    width: var(--sp-content-width, min(400px, calc(100vw - 40px)));
  }

  .requirements-heading {
    gap: 8px;
  }

  .requirements-heading p {
    color: var(--color-brown);
    font-size: 10px;
    line-height: 15px;
    letter-spacing: 2px;
  }

  .requirements-heading h2 {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: 0.8px;

  }

  .requirements-heading span {
    font-size: 14px;
    line-height: 24px;
  }

  .requirements-hero {
    height: 420px;
    background-position: 4% center;
  }

  .requirements-hero::before {
    background: linear-gradient(90deg, rgba(243, 239, 234, 0.96) 0%, rgba(243, 239, 234, 0.81) 59%, rgba(244, 238, 234, 0.33) 95%);
  }

  .requirements-hero::after {
    display: none;
  }

  .requirements-hero__inner {
    justify-content: flex-start;
    gap: 20px;
    width: var(--sp-content-width, min(400px, calc(100vw - 40px)));
    height: auto;
    margin: 0 auto;
    padding: 28px 0 30px;
  }

  .requirements-hero__logo {
    width: 79px;
  }

  .requirements-hero__copy {
    gap: 10px;
  }

  .requirements-hero h1 {
    font-size: 38px;
    line-height: 48px;
    transform: skewX(-8deg) scaleY(0.99);
  }

  .requirements-hero__lead {
    font-size: 18px;
    line-height: 28px;
  }

  .requirements-hero__copy p:not(.requirements-hero__lead) {
    font-size: 13px;
    line-height: 23px;
  }

  .requirements-hero__actions {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .requirements-button,
  .requirements-button--gold,
  .requirements-button--line {
    width: 100%;
    height: 48px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 20px;
  }

  .requirements-ideal {
    padding: 72px 0;
  }

  .requirements-ideal__lead {
    margin-top: 40px;
    font-size: 17px;
    line-height: 29px;
  }

  .requirements-ideal__grid {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 40px;
  }

  .requirements-number-card {
    align-items: center;
    justify-content: center;
    gap: 24px;
    width: 100%;
    height: auto;
    min-height: 185px;
    padding: 30px 20px 34px;
    box-shadow: 8px 8px 0 rgba(196, 168, 130, 0.4);
  }

  .requirements-number-card div {
    justify-content: center;
    gap:0px;
    align-items: end;
  }

  .requirements-number-card span {
    width: 70px;
    min-width: 70px;
    font-size: 36px;
    line-height: 42px;
  }

  .requirements-number-card span::after {
    top: 44px;
    left: 33px;
    display: block;
    width: 31px;
  }

  .requirements-number-card h3 {
    width: auto;
    min-width: 0;
    font-size: 22px;
    line-height: 31px;
    white-space: normal;
  }

  .requirements-number-card p {
    width: 100%;
    font-size: 14px;
    line-height: 26px;
    text-align: center;
  }

  .requirements-job {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 72px 0;
    background: #fff;
  }

  .requirements-job::before {
    top: -3px;
    left: -3px;
    font-size: 82px;
    line-height: 82px;
    color: rgba(245, 240, 235, 0.6);
  }

  .requirements-job__inner {
    display: contents;
  }

  .requirements-job-type {
    order: 1;
    gap: 26px;
    width: var(--sp-content-width, min(400px, calc(100vw - 40px)));
    margin-inline: auto;
  }

  .requirements-job-type h3 {
    font-size: 20px;
    line-height: 30px;
    text-align: center;
  }

  .requirements-job-type ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .requirements-job-type li,
  .requirements-job-type li:last-child {
    width: 101px;
    height: 38px;
    font-size: 12px;
    line-height: 18px;
  }

  .requirements-job__photo {
    position: relative;
    top: auto;
    right: auto;
    order: 2;
    width: 100%;
    height: 250px;
    margin-top: 56px;
    background:
      url("../assets/images/recruit/requirements/job-photo.webp") center 45% / cover no-repeat;
  }

  .requirements-table-section {
    order: 3;
    gap: 36px;
    width: var(--sp-content-width, min(400px, calc(100vw - 40px)));
    margin: 56px auto 0;
  }

  .requirements-table {
    display: block;
    width: 100%;
    border: 1px solid #d8c8b5;
    box-shadow: 9px 9px 0 rgba(196, 168, 130, 0.4);
  }

  .requirements-table tbody,
  .requirements-table tr,
  .requirements-table th,
  .requirements-table td {
    display: block;
  }

  .requirements-table thead {
    display: none;
  }

  .requirements-table tbody tr {
    padding: 22px 20px;
    border-bottom: 1px solid #d8c8b5;
  }

  .requirements-table tbody tr:last-child {
    border-bottom: 0;
  }

  .requirements-table tbody th,
  .requirements-table tbody td {
    width: 100%;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 1.75;
    white-space: normal;
  }

  .requirements-table tbody th {
    color: var(--color-accent);
    font-size: 15px;
    font-weight: 700;
  }

  .requirements-table tbody td {
    margin-top: 12px;
    font-size: 15px;
    line-height: 28px;
  }

  .requirements-benefits {
    padding: 72px 0;
  }

  .requirements-benefits__inner {
    gap: 40px;
    width: var(--sp-content-width, min(400px, calc(100vw - 40px)));
  }

  .requirements-benefits__grid {
    display: grid;
    grid-template-columns: repeat(2, 158px);
    justify-content: center;
    gap: 22px 19px;
    width: 100%;
  }

  .requirements-benefit {
    gap: 15px;
    width: 158px;
    height: 158px;
    border-radius: 14px;
  }

  .requirements-benefit img {
    width: 60px;
    height: 60px;
  }

  .requirements-benefit span {
    width: 140px;
    font-size: 13px;
    line-height: 20px;
    white-space: normal;
  }

  .requirements-flow {
    padding: 72px 0;
  }

  .requirements-flow::before {
    top: 104px;
    left: calc(50% - 180px);
    font-size: 82px;
    line-height: 82px;
  }

  .requirements-flow__inner {
    gap: 36px;
    width: var(--sp-content-width, min(400px, calc(100vw - 40px)));
  }

  .requirements-flow__panel {
    display: block;
    width: 100%;
    height: auto;
    padding: 42px 26px 46px;
    border: 1px solid rgba(196, 168, 130, 0.55);
    box-shadow: 8px 8px 0 rgba(196, 168, 130, 0.35);
  }

  .requirements-related {
    padding: 38px 0 54px;
  }

  .requirements-related__heading {
    justify-content: flex-start;
    gap: 14px;
    width: var(--sp-content-width, min(400px, calc(100vw - 40px)));
    height: auto;
    margin: 0 auto 22px;
  }

  .requirements-related__heading h2 {
    flex: 0 0 auto;
    font-size: 17px;
    line-height: 24px;
  }

  .requirements-related__heading span {
    flex: 1 1 auto;
    width: auto;
    background: var(--color-brown);
  }

  .requirements-related__grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: var(--sp-content-width, min(400px, calc(100vw - 40px)));
    border: 0;
  }

  .requirements-related-card {
    grid-template-columns: minmax(0, 1fr) 42%;
    justify-content: stretch;
    width: 100%;
    height: 164px;
    min-height: 0;
    padding: 0;
    border: 1px solid rgba(196, 168, 130, 0.42);
    background: #fff;
    box-shadow: 0 8px 18px rgba(65, 49, 30, 0.08);
  }

  .requirements-related-card--dark {
    background: var(--gradient-dark);
  }

  .requirements-related-card div {
    justify-content: center;
    gap: 8px;
    height: 100%;
    padding: 18px;
  }

  .requirements-related-card h3 {
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0;
    transform: none;
  }

  .requirements-related-card p {
    font-size: 11px;
    line-height: 19px;
  }

  .requirements-related-card a {
    width: 145px;
    height: 32px;
    margin-top: 6px;
    border-radius: 3px;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0;
  }

  .requirements-related-card img {
    width: 100%;
    height: 100%;
  }
}