/* ゲスト向けページ先頭で使うH1見出し＋説明文のセット(Figma: h1-hgroup)
 * タイポグラフィは htdocs/lite/css/guest/typography.css のトークンを参照する
 * (title: guest/page-title sp24px/pc30px, desc: guest/desc sp12px/pc14px)
 * 幅: Figma上はsp/pcどちらもコンポーネント全体で373px固定(本文の折返し幅も同一の309px)。
 *     PCでも画面幅いっぱいには広がらないため、primary_button等と同じ
 *     「width:100% + max-width」パターンで頭打ちにする。 */
.guest-h1-hgroup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  max-width: 373px;
  min-width: 0;
  padding: 0 32px 16px;
  word-break: break-word;
}

.guest-h1-hgroup__title {
  width: 100%;
  min-width: 0;
  margin: 0;
  font-family: var(--guest-font-family);
  font-size: var(--guest-font-size-2xl);
  font-weight: var(--guest-font-weight-bold);
  line-height: var(--guest-line-height-heading);
  letter-spacing: 0.06em;
  /* Figma: color/text/default */
  color: var(--guest-color-text-default);
  white-space: normal;
  word-break: break-word;
}

.guest-h1-hgroup__desc {
  width: 100%;
  min-width: 0;
  margin: 0;
  font-family: var(--guest-font-family);
  font-size: var(--guest-font-size-xs);
  font-weight: var(--guest-font-weight-regular);
  line-height: var(--guest-line-height-body);
  color: var(--guest-color-text-default);
  white-space: normal;
  word-break: break-word;
}

.guest-h1-hgroup__desc--pc {
  display: none;
}

@media (min-width: 768px) {
  .guest-h1-hgroup {
    gap: 20px;
  }

  .guest-h1-hgroup__title {
    font-size: var(--guest-font-size-3xl);
  }

  .guest-h1-hgroup__desc {
    font-size: var(--guest-font-size-sm);
  }

  .guest-h1-hgroup__desc--sp {
    display: none;
  }

  .guest-h1-hgroup__desc--pc {
    display: block;
  }
}