/* ログアウト導線の見出しブロック(Figma: hgroup)
 * タイポグラフィは htdocs/lite/css/guest/typography.css のトークンを参照する
 * SP: guest/title/sp + guest/text/sp + guest/note/sp
 * PC: guest/title/pc + guest/text/pc + guest/note/pc
 *
 * SPをベースに、1080px以上でPCへ切り替える。 */
.guest-hgroup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  color: var(--guest-color-text-default);
  font-family: var(--guest-font-family);
}

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

.guest-hgroup__title {
  margin: 0;
  width: 100%;
  color: var(--guest-color-text-default);
  font-size: var(--guest-font-size-xl);
  font-weight: var(--guest-font-weight-bold);
  line-height: var(--guest-line-height-heading);
  letter-spacing: var(--guest-letter-spacing-title);
  text-align: center;
  word-break: break-word;
}

/* タイトル下の3色の点。
 * Figmaでは単純な円3つのsvgなので、画像を使わずCSSで再現している。
 * 寸法はsvgと一致: SP = 6px × 3 + 8px × 2 = 34px / PC = 10px × 3 + 16px × 2 = 62px */
.guest-hgroup__dots {
  display: flex;
  flex: none;
  gap: 8px;
}

.guest-hgroup__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.guest-hgroup__dot:nth-child(1) {
  background: var(--color-orange-200);
}

.guest-hgroup__dot:nth-child(2) {
  background: var(--color-yellow-300);
}

.guest-hgroup__dot:nth-child(3) {
  background: var(--color-green-200);
}

.guest-hgroup__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  font-weight: var(--guest-font-weight-regular);
  line-height: var(--guest-line-height-body);
  word-break: break-word;
}

.guest-hgroup__desc {
  margin: 0;
  width: 100%;
  color: var(--guest-color-text-default);
  font-size: var(--guest-font-size-sm);
  line-height: var(--guest-line-height-body);
}

/* 注釈は独立コンポーネント(guest/note.inc + guest/note.css)に切り出している。
 * このコンポーネントを使う画面では note.css も読み込むこと。 */

/* position=left: タイトルと点を左寄せにする */
.guest-hgroup--left,
.guest-hgroup--left .guest-hgroup__heading {
  align-items: flex-start;
}

.guest-hgroup--left .guest-hgroup__title {
  text-align: left;
}

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

  .guest-hgroup__heading {
    gap: 24px;
  }

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

  .guest-hgroup__dots {
    gap: 16px;
  }

  .guest-hgroup__dot {
    width: 10px;
    height: 10px;
  }

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