/* RPO Support Section Styles */

.rpo-support {
  background: transparent;
}

.rpo-support__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xl);
  padding: 0 160px;
  max-width: 1440px;
  margin: 0 auto;
}

/* セクションヘッダー */
.rpo-support__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xl);
  width: 100%;
}

.rpo-support__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.rpo-support__watermark {
  font-family: var(--font-family-open-sans);
  font-weight: 400;
  font-size: var(--font-size-5);
  line-height: var(--line-height-heading);
  color: var(--color-text-secondary);
  letter-spacing: 3.6px;
  text-align: center;
  margin: 0;
}

.rpo-support__title {
  font-family: var(--font-family-main);
  font-weight: 500;
  font-size: var(--font-size-4);
  line-height: var(--line-height-heading);
  color: var(--color-text-primary);
  letter-spacing: 3.2px;
  text-align: center;
  margin: 0;
}

.rpo-support__introduction {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.rpo-support__description {
  font-family: var(--font-family-main);
  font-weight: 500;
  font-size: var(--font-size-8);
  line-height: 1.86;
  color: var(--color-text-primary);
  letter-spacing: 0.48px;
  text-align: center;
  margin: 0;
  width: 100%;
}

/* 採用支援仕組み */
.rpo-support__system {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xl);
  padding: 24px 0;
  width: 100%;
}

.rpo-support__flow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xl);
  width: 1120px;
}

/* 採用担当者 */
.rpo-support__person {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 216px;
  height: 216px;
  background-color: var(--color-white);
  border: 1px solid var(--color-text-primary);
  border-radius: 148px;
  padding: 40px 51px;
}

.rpo-support__person-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.rpo-support__person-title {
  font-family: var(--font-family-main);
  font-weight: 500;
  font-size: var(--font-size-5);
  line-height: var(--line-height-heading);
  color: var(--color-text-primary);
  letter-spacing: 0.72px;
  text-align: center;
  margin: 0;
  white-space: nowrap;
}

.rpo-support__person-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 88px;
  height: 88px;
}

/* 矢印 */
.rpo-support__arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 8.62px;
}

.rpo-support__arrow svg {
  width: 64px;
}

/* 課題 */
.rpo-support__problem {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 320px;
  height: 320px;
  background-color: var(--color-white);
  border: 1px solid var(--color-brand-primary);
  border-radius: 180px;
  padding: 0;
}

.rpo-support__problem-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.rpo-support__problem-title {
  font-family: var(--font-family-main);
  font-weight: 500;
  font-size: var(--font-size-5);
  line-height: var(--line-height-heading);
  color: var(--color-brand-primary);
  letter-spacing: 0.72px;
  text-align: center;
  margin: 0;
}

/* Connectforce */
.rpo-support__connectforce {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 248px;
  background: linear-gradient(162.81deg, #515151 2.48%, #797878 99.99%);
  border: 1px solid var(--color-text-primary);
  border-radius: 5px;
  padding: 24px;
}

.rpo-support__connectforce-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.rpo-support__connectforce-title {
  font-family: var(--font-family-open-sans);
  font-weight: 400;
  font-size: var(--font-size-5);
  line-height: 1.33;
  color: var(--color-white);
  letter-spacing: 0.72px;
  text-align: center;
  margin: 0;
}

.rpo-support__connectforce-subtitle {
  font-family: var(--font-family-main);
  font-weight: 700;
  font-size: var(--font-size-8);
  line-height: 1.8;
  color: var(--color-white);
  text-align: center;
  margin: 0;
}

.rpo-support__services {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}

.rpo-support__service-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  width: 88px;
  height: 88px;
  background-color: var(--color-white);
}

.rpo-support__service-text {
  color: var(--color-brand-primary);
  font-weight: 700;
  font-size: var(--font-size-9);
  line-height: 1.3;
  text-align: center;
  margin: 0;
}

.rpo-support__service-etc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
}

.rpo-support__service-etc-text {
  font-family: var(--font-family-open-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.29;
  color: var(--color-white);
  text-align: center;
  margin: 0;
}

/* Responsive adjustments */
@media screen and (max-width: 1200px) {
  .rpo-support__content {
    padding: 0 var(--spacing-2xl);
  }
  
  .rpo-support__flow {
    width: 100%;
    max-width: 1000px;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
  }
  
  .rpo-support__person {
    width: 180px;
    height: 180px;
    padding: 32px 40px;
  }
  
  .rpo-support__person-icon {
    width: 72px;
    height: 72px;
  }
  
  .rpo-support__problem {
    width: 280px;
    height: 280px;
  }
  
  .rpo-support__connectforce {
    width: 220px;
    padding: 20px;
  }
  
  .rpo-support__service-item,
  .rpo-support__service-etc {
    width: 80px;
    height: 80px;
  }
}

@media screen and (max-width: 960px) {
  .rpo-support {
    padding: var(--spacing-xl) 0 0;
  }
  
  .rpo-support__content {
    padding: 0 var(--spacing-md);
    gap: var(--spacing-lg);
  }
  
  .rpo-support__header {
    gap: var(--spacing-lg);
  }
  
  .rpo-support__watermark {
    font-size: var(--font-size-6);
    letter-spacing: 2.7px;
  }
  
  .rpo-support__title {
    font-size: var(--font-size-5);
    letter-spacing: 2.4px;
  }
  
  .rpo-support__description {
    font-size: var(--font-size-9);
    letter-spacing: 0.36px;
  }
  
  .rpo-support__flow {
    flex-direction: column;
    gap: var(--spacing-md);
  }
  
  .rpo-support__person {
    width: 160px;
    height: 160px;
    padding: 24px 32px;
  }
  
  .rpo-support__person-title {
    font-size: var(--font-size-6);
    letter-spacing: 0.54px;
  }
  
  .rpo-support__person-icon {
    width: 64px;
    height: 64px;
  }
  
  .rpo-support__problem {
    width: 240px;
    height: 240px;
  }
  
  .rpo-support__problem-title {
    font-size: var(--font-size-6);
    letter-spacing: 0.54px;
  }
  
  .rpo-support__connectforce {
    width: 100%;
    max-width: 400px;
    padding: 24px;
  }
  
  .rpo-support__connectforce-title {
    font-size: var(--font-size-6);
    letter-spacing: 0.54px;
  }
  
  .rpo-support__connectforce-subtitle {
    font-size: var(--font-size-9);
    letter-spacing: 0.36px;
  }
  
  .rpo-support__services {
    gap: 12px;
  }
  
  .rpo-support__service-item,
  .rpo-support__service-etc {
    width: 72px;
    height: 72px;
    padding: 0 6px;
  }
  
  .rpo-support__service-text {
    font-size: 12px;
    letter-spacing: 0.36px;
  }
  
  .rpo-support__service-etc-text {
    font-size: 12px;
    letter-spacing: 0.36px;
  }
}

@media screen and (max-width: 767px) {
  .rpo-support__content {
    padding: 0;
  }
  
  .rpo-support__watermark {
    font-size: var(--font-size-7);
    letter-spacing: 2.1px;
  }
  
  .rpo-support__title {
    font-size: var(--font-size-6);
    letter-spacing: 1.8px;
  }
  
  .rpo-support__description {
    font-size: var(--font-size-9);
    text-align: left;
    letter-spacing: 0.42px;
  }
  
  .rpo-support__system {
    padding: 0;
  }
  .rpo-support__person {
    width: 140px;
    height: 140px;
    padding: 20px 24px;
  }
  
  .rpo-support__person-title {
    font-size: var(--font-size-8);
    letter-spacing: 0.48px;
  }
  
  .rpo-support__person-icon {
    width: 56px;
    height: 56px;
  }
  
  .rpo-support__problem {
    width: 200px;
    height: 200px;
  }
  
  .rpo-support__problem-title {
    font-size: var(--font-size-7);
    letter-spacing: 0.48px;
  }
  
  .rpo-support__connectforce {
    padding: 20px;
  }
  
  .rpo-support__connectforce-title {
    font-size: var(--font-size-7);
    letter-spacing: 0.48px;
  }
  
  .rpo-support__connectforce-subtitle {
    font-size: 14px;
    letter-spacing: 0.42px;
  }
  
  .rpo-support__services {
    gap: 8px;
  }
  
  .rpo-support__service-item,
  .rpo-support__service-etc {
    width: 64px;
    height: 64px;
    padding: 0 4px;
  }
  
  .rpo-support__service-text {
    font-size: 11px;
    letter-spacing: 0.33px;
  }
  
  .rpo-support__service-etc-text {
    font-size: 11px;
    letter-spacing: 0.33px;
  }
}