/* ログアウト導線のセクション見出し(Figma: section-title)
 * タイポグラフィは htdocs/lite/css/guest/typography.css のトークンを参照する
 * SP: guest/section-title/sp 18px / PC: guest/section-title/pc 24px
 *
 * SPをベースに、1080px以上でPCへ切り替える。 */
.guest-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

/* 連番。文字自体をグラデーションで塗る。
 * 色はセクションごとに違うため、modifierで出し分ける(既定はorange)。
 *   orange = gradation/mid-orange / yellow = gradation/mid-yellow / green = gradation/mid-green */
/* 注意: グラデーションの指定には必ず background-image を使う。
 * background ショートハンドを使うと background-clip が初期値(border-box)に戻り、
 * 文字ではなく箱全体がグラデーションで塗られて「四角」に見えてしまう。 */
.guest-section-title__number {
  flex: none;
  background-image: linear-gradient(141deg, 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-section-title--yellow .guest-section-title__number {
  background-image: linear-gradient(141deg, var(--color-yellow-200) 7.1429%, var(--color-yellow-500) 92.857%);
}

.guest-section-title--green .guest-section-title__number {
  background-image: linear-gradient(141deg, var(--color-green-100) 7.1429%, var(--color-green-300) 92.857%);
}

.guest-section-title__text {
  flex: 1 0 0;
  min-width: 1px;
  /* Figmaでは見出しを包む階層に pt:8px が入っている */
  margin: 0;
  padding-top: 8px;
  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;
}

@media (min-width: 1080px) {
  .guest-section-title {
    gap: 16px;
  }

  .guest-section-title__text {
    flex: none;
    font-size: var(--guest-font-size-2xl);
    /* Figma上はPCのみ折り返さない指定。長い見出しでは横に溢れるので、
     * 実際のページに組み込む際は収まるか必ず確認すること。 */
    white-space: nowrap;
  }
}