/* ログアウト導線の最下部の訴求ブロック(Figma: ad / node-id=5171-4562)
 *
 * 依存: guest/hgroup.css / guest/accent_button.css も併せて読み込むこと
 *
 * SP〜PCを実装。PCはFigma node-id=5334:6324。 */
.guest-app-promo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  box-sizing: border-box;
  width: 100%;
  /* guest/common.css の section{max-width:1280px} を打ち消し、背景を横幅いっぱいにする */
  max-width: none;
  padding: var(--spacing-8) var(--spacing-4) var(--spacing-12);
  /* gradation/pale-orange */
  background: linear-gradient(145deg, var(--color-neutral-0) 7.1429%, var(--color-orange-25) 92.857%);
  color: var(--guest-color-text-default);
  font-family: var(--guest-font-family);
}

.guest-app-promo > .guest-hgroup,
.guest-app-promo__body {
  width: 100%;
  max-width: 600px;
}

.guest-app-promo__body {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-4);
}

/* 375pxでは見出しを2行、本文幅が600pxになる画面では1行にする。 */
@media (min-width: 600px) {
  .guest-app-promo__title-break {
    display: none;
  }
}

.guest-app-promo__pc-break {
  display: none;
}

.guest-app-promo__lead {
  margin: 0;
  width: 100%;
  /* Figma: 16px / Bold / lh 1.6 (hgroupの見出しとは別) */
  font-size: var(--guest-font-size-base);
  font-weight: var(--guest-font-weight-bold);
  line-height: var(--guest-line-height-body);
}

/* Figmaでは幅の指定が無く、中身(ボタン / アプリバッジ228px)に合わせて縮む。
 * 幅を指定しないこと。ボタンのラベルは折り返さないので
 * ボタンの内容幅(文字192px + padding 28px×2 + border 2px×2 = 252px)が
 * そのままこの枠の幅になり、accent-buttonの width:100% もそこで解決される。
 * 右のモックアップより手前に出す(ボタンが隠れない・押せるようにする)。 */
.guest-app-promo__actions {
  display: flex;
  position: relative;
  z-index: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-3);
}

.guest-app-promo__apps {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.guest-app-promo__app img {
  display: block;
  height: 36px;
  width: auto;
}

/* 右に重ねるスマホモックアップ2台。
 * Figma: 140 x 207.929 / right 0 / bottom -7.45px(下にはみ出す)。
 * ボタンより奥(z-index:0)。重なり部分はボタンが手前。 */
.guest-app-promo__devices {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: -7.45px;
  width: 140px;
  height: 207.929px;
  pointer-events: none;
}

/* 共通の端末画像は周囲が透明。Figmaと同じ140x207.929pxの枠内に収める。 */
.guest-app-promo__devices-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

@media (min-width: 1080px) {
  .guest-app-promo {
    gap: var(--spacing-8);
    height: 503px;
    padding: var(--spacing-16) var(--spacing-4) var(--spacing-25);
    background: linear-gradient(165.32deg, var(--color-neutral-0) 7.1429%, var(--color-orange-25) 92.857%);
  }

  .guest-app-promo > .guest-hgroup {
    box-sizing: border-box;
    max-width: 680px;
    padding-right: 240px;
  }

  .guest-app-promo__pc-break,
  .guest-app-promo__title-break {
    display: initial;
  }

  .guest-app-promo__body {
    box-sizing: border-box;
    gap: var(--spacing-4);
    max-width: 680px;
    padding-right: 240px;
  }

  .guest-app-promo__lead {
    font-size: var(--guest-font-size-lg);
  }

  .guest-app-promo__lead br {
    display: none;
  }

  .guest-app-promo__actions {
    gap: var(--spacing-4);
    width: 100%;
  }

  .guest-app-promo__actions .guest-accent-button {
    width: 100%;
    max-width: 400px;
  }

  .guest-app-promo__devices {
    right: 0;
    bottom: -8px;
    width: 244px;
    height: 334px;
  }
}