.formatto-research-qualitative {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
  width: 100%;
  padding: 8rem 19.4375rem;
  background: #f5f5f5;
}

.formatto-research-qualitative__intro {
  display: flex;
  align-items: flex-end;
  gap: 2.1875rem;
}

.formatto-research-qualitative__content {
  display: flex;
  flex: 0 0 45.6875rem;
  flex-direction: column;
  gap: 3rem;
  width: 45.6875rem;
}

.formatto-research-qualitative h2,
.formatto-research-qualitative h3,
.formatto-research-qualitative p,
.formatto-research-qualitative li,
.formatto-recruitment-method h2,
.formatto-recruitment-method h3,
.formatto-recruitment-method p,
.formatto-recruitment-method blockquote {
  margin: 0;
  font-family: var(--font-body);
  text-box-edge: cap alphabetic;
}

.formatto-research-qualitative h2 {
  color: var(--color-blue-600);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025rem;
  white-space: nowrap;
}

.formatto-research-qualitative__copy {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 45.6875rem;
}

.formatto-research-qualitative__copy > p {
  width: 100%;
  color: #002f4c;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01125rem;
  word-break: break-word;
}

.formatto-research-qualitative__methods,
.formatto-research-qualitative__deliverables ul {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.formatto-research-qualitative__methods {
  gap: 1.5rem;
  width: 38.875rem;
  padding-left: 2rem;
}

.formatto-research-qualitative__methods li {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  width: 100%;
  color: #002f4c;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01125rem;
  word-break: break-word;
}

.formatto-research-qualitative__methods img,
.formatto-research-qualitative__deliverables img {
  flex: 0 0 1.1329375rem;
  width: 1.1329375rem;
  height: 1.4320625rem;
  transition: transform 300ms ease;
}

.formatto-research-qualitative__deliverables {
  display: flex;
  flex: 0 0 32.125rem;
  flex-direction: column;
  gap: 1.75rem;
  align-items: flex-start;
  justify-content: center;
  width: 32.125rem;
  min-height: 22.6031875rem;
  padding: 3rem;
  border-radius: 2rem;
  background: #dcf3ff;
}

.formatto-research-qualitative__deliverables h3 {
  color: var(--color-blue-600);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.0125rem;
  white-space: nowrap;
}

.formatto-research-qualitative__deliverables ul {
  gap: 1.5rem;
  width: 100%;
}

.formatto-research-qualitative__deliverables li {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  color: #002f4c;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01rem;
  word-break: break-word;
}

.formatto-research-qualitative__deliverables li:last-child {
  align-items: flex-start;
}

.formatto-research-qualitative__methods span,
.formatto-research-qualitative__deliverables span {
  flex: 1 1 auto;
  min-width: 0;
  transform-origin: left center;
  transition: transform 300ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .formatto-research-qualitative__methods li:hover img,
  .formatto-research-qualitative__methods li:hover span,
  .formatto-research-qualitative__deliverables li:hover img,
  .formatto-research-qualitative__deliverables li:hover span {
    transform: scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .formatto-research-qualitative__methods img,
  .formatto-research-qualitative__methods span,
  .formatto-research-qualitative__deliverables img,
  .formatto-research-qualitative__deliverables span {
    transition: none;
  }
}

.formatto-recruitment-method {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.formatto-recruitment-method__panel {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
  justify-content: center;
  width: 96.875rem;
  margin-bottom: -4.4375rem;
  padding: 4rem 8.375rem 7.875rem;
  overflow: hidden;
  border-radius: 2rem;
  background: linear-gradient(110.37deg, #0087d5 2.6148%, #0069a8 102.67%);
  box-shadow: 0 0.25rem 2.5rem rgba(1, 75, 119, 0.2);
}

.formatto-recruitment-method__panel h2 {
  width: 100%;
  color: var(--color-blue-50);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025rem;
  text-align: center;
}

.formatto-recruitment-method__body {
  display: flex;
  align-items: center;
  gap: 3.5625rem;
  width: 100%;
}

.formatto-recruitment-method__media-column {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  border-radius: 2rem;
}

.formatto-recruitment-method__image {
  position: relative;
  width: 100%;
  height: 12.625rem;
  overflow: hidden;
  border-radius: 1.1875rem;
  background: #ffffff;
}

.formatto-recruitment-method__image img {
  position: absolute;
  left: -2.0625rem;
  top: -3.2225rem;
  width: 42.875rem;
  height: 23.125rem;
  max-width: none;
  object-fit: cover;
}

.formatto-recruitment-method blockquote {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 12.625rem;
  padding: 0 2rem;
  overflow: hidden;
  border-radius: 1.1875rem;
  color: var(--color-blue-50);
  background: linear-gradient(109.17deg, #00bdff 2.6489%, #00a4f2 102.78%);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015rem;
  text-align: center;
  word-break: break-word;
}

.formatto-recruitment-method__text {
  display: flex;
  flex: 0 0 37.5625rem;
  flex-direction: column;
  gap: 1.6875rem;
  width: 37.5625rem;
  color: #dcf3ff;
}

.formatto-recruitment-method__text p {
  color: #dcf3ff;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01125rem;
  word-break: break-word;
}

.formatto-recruitment-method__cards {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  align-items: center;
  justify-content: center;
  width: 83.9375rem;
  overflow: hidden;
  border-radius: 2rem;
  background: linear-gradient(135.79deg, #dcf3ff 0.87121%, #c7eeff 114.82%);
  filter: drop-shadow(0 0 1.5625rem rgba(0, 47, 76, 0.1));
}

.formatto-recruitment-method__lines {
  position: absolute;
  top: 0;
  left: 2.58625rem;
  width: 74.2541875rem;
  height: 24.15225rem;
  pointer-events: none;
}

.formatto-recruitment-method__cards-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 5.5rem 0;
  line-height: 1.5;
  word-break: break-word;
}

.formatto-recruitment-method__card {
  display: flex;
  flex: 0 0 20.125rem;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
  width: 20.125rem;
}

.formatto-recruitment-method__card--trust {
  flex-basis: 22.4375rem;
  width: 22.4375rem;
}

.formatto-recruitment-method__card--incentive {
  flex-basis: 20.8125rem;
  width: 20.8125rem;
}

.formatto-recruitment-method__card h3 {
  width: 100%;
  color: var(--color-blue-600);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01rem;
}

.formatto-recruitment-method__card p {
  width: 100%;
  color: #002f4c;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.00875rem;
}

@media (min-width: 1280px) and (max-width: 1919px) {
  .formatto-research-qualitative {
    padding-right: 16.198vw;
    padding-left: 16.198vw;
  }
}

@media (max-width: 1279px) {
  .formatto-research-qualitative {
    gap: 3.75vw;
    padding: 10vw 5vw;
  }

  .formatto-research-qualitative__intro {
    justify-content: center;
    gap: 2.461vw;
    width: 90vw;
  }

  .formatto-research-qualitative__content {
    flex-basis: 51.398vw;
    gap: 3.75vw;
    width: 51.398vw;
  }

  .formatto-research-qualitative h2,
  .formatto-recruitment-method__panel h2 {
    font-size: 3.125vw;
    letter-spacing: -0.03125vw;
  }

  .formatto-research-qualitative__copy {
    gap: 2.5vw;
    width: 51.398vw;
  }

  .formatto-research-qualitative__copy > p,
  .formatto-recruitment-method__text p {
    font-size: 1.40625vw;
    letter-spacing: -0.014063vw;
  }

  .formatto-research-qualitative__methods {
    gap: 1.875vw;
    width: 43.734vw;
    padding-left: 2.5vw;
  }

  .formatto-research-qualitative__methods li {
    gap: 1.09375vw;
    font-size: 1.40625vw;
    letter-spacing: -0.014063vw;
  }

  .formatto-research-qualitative__methods img,
  .formatto-research-qualitative__deliverables img {
    flex-basis: 1.416172vw;
    width: 1.416172vw;
    height: 1.790078vw;
  }

  .formatto-research-qualitative__deliverables {
    flex-basis: 36.141vw;
    gap: 2.1875vw;
    width: 36.141vw;
    min-height: 28.253984vw;
    padding: 3.75vw;
    border-radius: 2.5vw;
  }

  .formatto-research-qualitative__deliverables h3 {
    font-size: 1.5625vw;
    letter-spacing: -0.015625vw;
  }

  .formatto-research-qualitative__deliverables ul {
    gap: 1.875vw;
  }

  .formatto-research-qualitative__deliverables li {
    gap: 1.09375vw;
    font-size: 1.25vw;
    letter-spacing: -0.0125vw;
  }

  .formatto-recruitment-method__panel {
    gap: 3.75vw;
    width: 100vw;
    margin-bottom: -5.546875vw;
    padding: 5vw 5vw 13vw;
    border-radius: 2.5vw;
    box-shadow: 0 0.3125vw 3.125vw rgba(1, 75, 119, 0.2);
  }

  .formatto-recruitment-method__body {
    gap: 4.453125vw;
  }

  .formatto-recruitment-method__media-column {
    gap: 1.125vw;
    border-radius: 2.25vw;
  }

  .formatto-recruitment-method__image {
    height: 14.203125vw;
    border-radius: 1.335938vw;
  }

  .formatto-recruitment-method__image img {
    left: -2.320313vw;
    top: -3.625313vw;
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .formatto-recruitment-method blockquote {
    min-height: 14.203125vw;
    padding: 0 2.25vw;
    border-radius: 1.335938vw;
    font-size: 1.6875vw;
    letter-spacing: -0.016875vw;
  }

  .formatto-recruitment-method__text {
    flex-basis: 46.953125vw;
    gap: 2.109375vw;
    width: 46.953125vw;
  }

  .formatto-recruitment-method__cards {
    gap: 0.78125vw;
    width: 104.921875vw;
    border-radius: 2.5vw;
    filter: drop-shadow(0 0 1.953125vw rgba(0, 47, 76, 0.1));
  }

  .formatto-recruitment-method__lines {
    left: 3.232812vw;
    width: 92.817734vw;
    height: 30.190312vw;
  }

  .formatto-recruitment-method__cards-inner {
    gap: 5vw;
    padding: 6.875vw 0;
  }

  .formatto-recruitment-method__card {
    flex-basis: 25.15625vw;
    gap: 1.5625vw;
    width: 25.15625vw;
  }

  .formatto-recruitment-method__card--trust {
    flex-basis: 28.046875vw;
    width: 28.046875vw;
  }

  .formatto-recruitment-method__card--incentive {
    flex-basis: 26.015625vw;
    width: 26.015625vw;
  }

  .formatto-recruitment-method__card h3 {
    font-size: 1.25vw;
    letter-spacing: -0.0125vw;
  }

  .formatto-recruitment-method__card p {
    font-size: 1.09375vw;
    letter-spacing: -0.010938vw;
  }
}

@media (max-width: 767px) {
  .formatto-research-qualitative {
    gap: 0;
  }

  .formatto-research-qualitative__intro {
    flex-direction: column;
    align-items: center;
    gap: 8vw;
    padding-bottom: 10vw;
  }

  .formatto-research-qualitative__content,
  .formatto-research-qualitative__copy,
  .formatto-research-qualitative__methods,
  .formatto-research-qualitative__deliverables {
    flex-basis: auto;
    width: 90vw;
  }

  .formatto-research-qualitative__content {
    gap: 6vw;
  }

  .formatto-research-qualitative__deliverables {
    gap: 6vw;
    padding: 6vw;
    border-radius: 5vw;
  }

  .formatto-research-qualitative__copy {
    gap: 6vw;
  }

  .formatto-recruitment-method__body {
    flex-direction: column-reverse;
    gap: 8vw;
  }

  .formatto-recruitment-method__panel {
    gap: 6vw;
    margin-bottom: 0;
    padding: 10vw 6vw;
    border-radius: 5vw;
  }

  .formatto-recruitment-method__media-column {
    border-radius: 4.5vw;
  }

  .formatto-recruitment-method__text {
    width: 100%;
  }

  .formatto-recruitment-method__image {
    height: 35.147583vw;
    border-radius: 2.671876vw;
  }

  .formatto-research-qualitative h2,
  .formatto-recruitment-method__panel h2 {
    font-size: 6.25vw;
    letter-spacing: -0.0625vw;
  }

  .formatto-research-qualitative__copy > p,
  .formatto-recruitment-method__text p {
    font-size: 4.071247vw;
    letter-spacing: -0.040712vw;
  }

  .formatto-research-qualitative__methods li {
    gap: 2vw;
    font-size: 4.071247vw;
    letter-spacing: -0.040712vw;
  }

  .formatto-research-qualitative__deliverables h3 {
    font-size: 4.580153vw;
    letter-spacing: -0.045802vw;
  }

  .formatto-research-qualitative__deliverables li {
    gap: 2vw;
    font-size: 4.071247vw;
    letter-spacing: -0.040712vw;
  }

  .formatto-research-qualitative li img {
    flex-basis: auto;
    width: auto;
    height: 4vw;
  }

  .formatto-research-qualitative__methods,
  .formatto-research-qualitative__deliverables ul {
    gap: 4vw;
  }

  .formatto-recruitment-method blockquote {
    padding: 6vw;
    border-radius: 2.671876vw;
    font-size: 3.562341vw;
    letter-spacing: -0.035623vw;
  }

  .formatto-recruitment-method__cards {
    width: 100%;
    border-radius: 0;
  }

  .formatto-recruitment-method__cards-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10vw;
    padding: 12vw 6vw;
  }

  .formatto-recruitment-method__card,
  .formatto-recruitment-method__card--trust,
  .formatto-recruitment-method__card--incentive {
    flex-basis: auto;
    gap: 4.071247vw;
    width: 75vw;
  }

  .formatto-recruitment-method__card h3 {
    font-size: 4.580153vw;
    letter-spacing: -0.045802vw;
  }

  .formatto-recruitment-method__card p {
    font-size: 4.071247vw;
    letter-spacing: -0.040712vw;
  }
}