/* ログアウト導線の注釈(Figma: note)
 * タイポグラフィは htdocs/lite/css/guest/typography.css のトークンを参照する
 * SP: guest/note/sp 10px / PC: guest/note/pc 12px
 *
 * Figma側ではフォントと文字色の指定を持たず親から継承しているが、
 * 単体でも成立するよう名前付きスタイル(Regular / 1.6)と color/text/default を当てている。
 *
 * SPをベースに、1080px以上でPCへ切り替える。 */
.guest-note {
  position: relative;
  margin: 0;
  /* 「※」の分のインデント。FigmaではSP:12px / PC:14px */
  padding-left: 12px;
  width: 100%;
  color: var(--guest-color-text-default);
  font-family: var(--guest-font-family);
  font-size: var(--guest-font-size-2xs);
  font-weight: var(--guest-font-weight-regular);
  line-height: var(--guest-line-height-body);
  word-break: break-word;
}

.guest-note__mark {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 10px;
  height: 16px;
  line-height: 16px;
  white-space: nowrap;
}

@media (min-width: 1080px) {
  .guest-note {
    padding-left: 14px;
    font-size: var(--guest-font-size-xs);
  }
}