/* youbrideとはページの番号・見出し・説明をまとめた見出し(Figma: section-title/about)
 * SPをベースに、1080px以上でPCへ切り替える。 */
.guest-about-section-title {
  display: flex;
  width: 100%;
  max-width: 343px;
  align-items: flex-start;
  gap: 8px;
}

.guest-about-section-title__number {
  flex: none;
  background-image: linear-gradient(140.71deg, var(--color-orange-100) 7.1429%, var(--color-orange-300) 92.857%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--guest-font-family);
  font-size: var(--guest-font-size-5xl);
  font-weight: var(--guest-font-weight-bold);
  line-height: var(--guest-line-height-none);
  white-space: nowrap;
}

.guest-about-section-title__content {
  display: flex;
  min-width: 1px;
  flex: 1 0 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-top: 8px;
}

.guest-about-section-title__text {
  width: 100%;
  margin: 0;
  color: var(--guest-color-text-default);
  font-family: var(--guest-font-family);
  font-size: var(--guest-font-size-lg);
  font-weight: var(--guest-font-weight-bold);
  line-height: var(--guest-line-height-heading);
  word-break: break-word;
}

.guest-about-section-title__desc {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 4px 12px;
  border: 1px solid var(--guest-color-border-orange);
  border-radius: 0px 8px 8px 8px;
  background-color: var(--guest-color-background-white);
  color: var(--guest-color-text-orange);
  font-family: var(--guest-font-family);
  font-size: var(--guest-font-size-xs);
  font-weight: var(--guest-font-weight-bold);
  line-height: var(--guest-line-height-body);
  word-break: break-word;
}

.guest-about-section-title--yellow .guest-about-section-title__number {
  background-image: var(--guest-gradation-mid-yellow);
}

.guest-about-section-title--yellow .guest-about-section-title__desc {
  border-color: var(--color-yellow-700);
  color: var(--color-yellow-700);
}

.guest-about-section-title--green .guest-about-section-title__number {
  background-image: var(--guest-gradation-mid-green);
}

.guest-about-section-title--green .guest-about-section-title__desc {
  border-color: var(--color-green-600);
  color: var(--color-green-600);
}

@media (min-width: 1080px) {
  .guest-about-section-title {
    width: 410px;
    max-width: 410px;
    gap: 12px;
  }

  .guest-about-section-title__content {
    flex: none;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding-top: 12px;
  }

  .guest-about-section-title__text {
    width: auto;
    flex: none;
    font-size: var(--guest-font-size-2xl);
    white-space: nowrap;
  }

  .guest-about-section-title__desc {
    width: auto;
    align-self: stretch;
    padding-right: 20px;
    padding-left: 20px;
    border-radius: 8px;
    font-size: var(--guest-font-size-sm);
    white-space: nowrap;
  }

  .guest-about-section-title--green .guest-about-section-title__desc {
    font-size: var(--guest-font-size-xs);
  }
}