/* 非会員TOPページのレスポンシブレイアウト
 * Figma: 375px=node-id 4800:378 / 1024px=node-id 5182:9396 / PC=node-id 4977:893
 *
 * 汎用コンポーネント(guest/*.css)はページ側で上書きせず、
 * このページ固有のレイアウトとブロックだけをここに書く。
 *
 * 1079px以下はSPの縦積み構成を維持し、1080px以上でPC構成へ切り替える。 */

/* width:100% と padding を併用した要素が横に溢れてページ全体に
 * 横スクロールを作るのを防ぐ。実際に floating の padding-left:12px で発生した。 */
.nonmember-top,
.nonmember-top *,
.nonmember-top *::before,
.nonmember-top *::after {
  box-sizing: border-box;
}

body.nonmember-top {
  margin: 0;
  /* 万一どこかで溢れても横スクロールにしない(原因は都度直す) */
  overflow-x: hidden;
  /* 背景はセクションごとに指定する(下記「セクションの背景色」参照)。
   * ここはセクションの隙間が見えた場合の保険。 */
  background: var(--guest-color-background-pale-orange);
  color: var(--guest-color-text-default);
  font-family: var(--guest-font-family);
}

/* 未実装の画像/コンポーネントを示す枠。実装が済んだら消す */
.nonmember-top__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 40px;
  box-sizing: border-box;
  border: 1px dashed var(--guest-color-border-light-brown);
  border-radius: var(--radius-3);
  background: var(--color-brown-100);
  color: var(--color-brown-400);
  font-size: var(--guest-font-size-2xs);
  text-align: center;
}

.nonmember-top__placeholder::before {
  content: attr(data-note);
}

/* --- mv (ヒーロー) --- */
.nonmember-top__mv {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  padding-bottom: var(--spacing-10);
}

.nonmember-top__mv-images {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: var(--spacing-6);
}

.nonmember-top__mv-image {
  position: relative;
  height: 210px;
  overflow: hidden;
}

.nonmember-top__mv-slide {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateX(100%);
}

.nonmember-top__mv-slide > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nonmember-top__mv-image--second .nonmember-top__mv-slide {
  transform: translateX(-100%);
}

.nonmember-top__mv-slide.is-current {
  z-index: 1;
  transform: translateX(0);
}

@media (max-width: 1079px) and (prefers-reduced-motion: no-preference) {
  .nonmember-top__mv-slide.is-leaving,
  .nonmember-top__mv-slide.is-arriving {
    will-change: transform;
    transition: transform 600ms linear;
  }

  /* 上の画像: 現在の画像を左へ出し、次の画像を右から入れる。 */
  .nonmember-top__mv-image--first .nonmember-top__mv-slide.is-leaving {
    z-index: 2;
    transform: translateX(-100%);
  }

  /* 下の画像: 現在の画像を右へ出し、次の画像を左から入れる。 */
  .nonmember-top__mv-image--second .nonmember-top__mv-slide.is-leaving {
    z-index: 2;
    transform: translateX(100%);
  }

  .nonmember-top__mv-slide.is-entering {
    z-index: 3;
    transition: none;
  }

  .nonmember-top__mv-slide.is-arriving {
    z-index: 3;
    transform: translateX(0);
  }
}

/* 上下の写真を互い違いにずらす。
 * Figmaの padding-right:3% / padding-left:3% と同じ見た目になるよう、
 * 画像枠自体を97%幅にする。absolute配置の子画像だけを縮めると外側の枠が
 * 全幅のまま残り、余白が消えたように見えるため、親枠側で確保する。 */
.nonmember-top__mv-image--first {
  align-self: flex-start;
  width: 97%;
}

.nonmember-top__mv-image--second {
  align-self: flex-end;
  width: 97%;
}

/* 3列目はPC専用。 */
.nonmember-top__mv-image--third {
  display: none;
}

/* 2枚の写真の境目に重ねるキャッチコピー。
 * Figmaの Rectangle 5/6 を各行の白背景として置く。
 * 枠は全幅にして、子の left/top をFigmaの実測値(375px設計幅)で置く。 */
.nonmember-top__mv-copy {
  position: absolute;
  /* スライド画像は切り替え時にz-index: 1〜3を使うため、
   * 画像の境目に重なるキャッチコピーは常にその前面へ置く。 */
  z-index: 4;
  left: 50%;
  width: 375px;
  max-width: 100%;
  top: 184px;
  height: 75.14px;
  transform: translateX(-50%);
}

/* 白い吹き出し状の図形。Figmaの Rectangle 5/6 相当。
 * 幅は固定でテキストより数px広いので、padding ではなく中央寄せで余りを配る
 * (Figmaも左右の余りが 5.5px / 4px と非対称で、paddingではなく図形の位置で決まっている)。 */
.nonmember-top__mv-copy-line {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 40px;
  margin: 0;
  padding: 0;
  background: var(--guest-color-background-white);
  white-space: nowrap;
}

/* 文字をグラデーションで塗る(Figma: gradation/dark-orange)。
 * 注意: 必ず background-image を使う。background ショートハンドだと
 * background-clip が初期値(border-box)に戻り、箱全体が塗られて「四角」になる。 */
.nonmember-top__mv-copy-text {
  background-image: var(--guest-gradation-dark-orange);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: var(--guest-font-size-xl);
  font-weight: var(--guest-font-weight-bold);
  /* Figmaは leading-none。1.4にすると吹き出し内の文字位置がずれる */
  line-height: var(--guest-line-height-none);
}

/* 読点だけ詰める。Figmaは 、 のみ letter-spacing:-6px。
 * Figmaは font-feature-settings:"halt" も付けているが、書き出された文字幅
 * (12字240px→234px / 15字300px→294px)が-6pxぴったりなのでhaltは効いていない。
 * 効かない指定を移植すると、webfont側でhaltが有効な場合に逆にずれるため入れない。 */
.nonmember-top__mv-copy-comma {
  letter-spacing: -6px;
}

/* Rectangle 5: 245x40 / radius 12 12 0 12。
 * left は文字の実測x(12.1px)から、文字が図形内で中央に来るよう逆算した値。 */
.nonmember-top__mv-copy-line--first {
  left: 6.6px;
  top: 0;
  width: 245px;
  border-radius: var(--radius-3) var(--radius-3) 0 var(--radius-3);
}

/* Rectangle 6: 302x40 / radius 0 12 12 12。
 * 2行目は1行目より右に38.8pxずれる(文字の実測x 12.1px → 49.4px)。
 * 右端は揃っていない(文字の右端は375px幅の右から31.6px内側)。 */
.nonmember-top__mv-copy-line--second {
  left: 45.4px;
  top: 35.14px;
  width: 302px;
  border-radius: 0 var(--radius-3) var(--radius-3) var(--radius-3);
}

.nonmember-top__mv-lead {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2);
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding-left: var(--spacing-3);
}

/* 右のスマホモックアップより手前に出す。
 * 写真=1〜3、端末画像=4、CTAボタン=5の順。
 * SP幅はFigmaどおり248px（コンポーネント既定の max-width:300px を上書き）。 */
.nonmember-top__mv-lead .guest-accent-button {
  position: relative;
  z-index: 5;
  width: 248px;
  max-width: 248px;
}

/* 右側のスマホモックアップと重ならないよう、テキストだけ余白を確保する。
 * ボタンにこの余白を掛けると nowrap の文字が収まらず横スクロールが出る。 */
.nonmember-top__mv-lead-text {
  box-sizing: border-box;
  padding-right: 150px;
  width: 100%;
}

.nonmember-top__mv-title {
  margin: 0;
  font-size: var(--guest-font-size-sm);
  font-weight: var(--guest-font-weight-bold);
  line-height: var(--guest-line-height-heading);
}

.nonmember-top__mv-devices {
  position: absolute;
  /* スライド画像は切り替え時にz-index: 1〜3を使うため、
   * 写真と背景の境目に重なる端末画像はその前面へ置く。 */
  z-index: 4;
  right: 12px;
  bottom: -8px;
  width: 140px;
  height: 208px;
  pointer-events: none;
}

.nonmember-top__mv-devices img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* MV内のストアバッジはPCのみ。SPでは注釈を表示する。 */
.nonmember-top__mv-apps {
  display: none;
}

/* --- セクション共通 --- */
.nonmember-top__section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-8);
  /* Figma: pt 48px / pb 80px / px 16px */
  padding: var(--spacing-12) var(--spacing-4) var(--spacing-20);
}

/* セクションの背景色。2種類を交互に使う。
 *
 *   幸せレポート / 安心・安全のお約束 / お知らせ … color/background/pale-orange (#FFFDFA)
 *   それ以外                                    … color/background/default    (#FFF4E4 = orange/50)
 *   ad … コンポーネント自身が白→orange/25のグラデーションを持つ(Figma確認済み)なので指定しない
 *
 * どのセクションがどちらかは見た目で判断できないため、必ず明示的に書く。 */
.nonmember-top__section--report,
.nonmember-top__section--policy,
.nonmember-top__section--news {
  background: var(--guest-color-background-pale-orange);
}

.nonmember-top__mv,
.nonmember-top__section--feature,
.nonmember-top__section--message,
.nonmember-top__section--faq,
.nonmember-top__section--media {
  background: var(--guest-color-background-default);
}

.nonmember-top__section-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-10);
  width: 100%;
  max-width: 600px;
}

/* 1024px版ではセクションの見出しと本文がともに600pxで中央寄せされる。 */
.nonmember-top__section > .guest-hgroup {
  max-width: 600px;
}

.nonmember-top__texts {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  width: 100%;
}

.nonmember-top__text {
  margin: 0;
  font-size: var(--guest-font-size-sm);
  font-weight: var(--guest-font-weight-regular);
  line-height: var(--guest-line-height-body);
}

.nonmember-top__message-hgroup .guest-hgroup__desc:first-child {
  font-weight: var(--guest-font-weight-bold);
}

.nonmember-top__report-hgroup .guest-hgroup__desc:first-child {
  font-weight: var(--guest-font-weight-bold);
}

/* 画像枠。白い2px枠＋角丸12px */
.nonmember-top__figure {
  box-sizing: border-box;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  /* Figma: 343 x 192.9375 / 360 x 202.5（どちらも正確に16:9） */
  aspect-ratio: 16 / 9;
  border: 2px solid var(--guest-color-border-white);
  border-radius: var(--radius-3);
  overflow: hidden;
}

.nonmember-top__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- feature --- */
.nonmember-top__features {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  width: 100%;
}

.nonmember-top__feature {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  width: 100%;
}

/* 1024px版でも連番見出しはSPと同じ343px幅で左寄せ。 */
.nonmember-top__feature > .guest-section-title {
  max-width: 343px;
}

.nonmember-top__feature-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  width: 100%;
}

/* --- report --- */
.nonmember-top__reports {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  align-items: center;
  width: 100%;
}

/* --- message --- */
.nonmember-top__messages {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  width: 100%;
}

/* --- policy --- */
.nonmember-top__policies {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  width: 100%;
}

.nonmember-top__policy {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  width: 100%;
}

.nonmember-top__policy-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.nonmember-top__policy-icon {
  flex: none;
  display: block;
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.nonmember-top__policy-title {
  flex: 1 0 0;
  margin: 0;
  font-size: var(--guest-font-size-sm);
  font-weight: var(--guest-font-weight-bold);
  line-height: var(--guest-line-height-heading);
}

/* --- faq --- */
.nonmember-top__faqs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  width: 100%;
}

/* --- news --- */
.nonmember-top__news {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  width: 100%;
}

/* --- media --- */
.nonmember-top__medias {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
  width: 100%;
}

/* --- PC (Figma: 非会員TOP_PC / node-id 4977:893) --- */
@media (min-width: 1080px) {
  /* MV: 左は3列の写真、右は400pxのCTA領域。Figmaでは両者が16px重なる。 */
  .nonmember-top__mv {
    display: block;
    position: relative;
    height: 768px;
    padding: 0;
    overflow: hidden;
  }

  .nonmember-top__mv-images {
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    flex-direction: row;
    gap: var(--spacing-1);
    width: calc(100% - 384px);
    height: 768px;
  }

  .nonmember-top__mv-image,
  .nonmember-top__mv-image--first,
  .nonmember-top__mv-image--second,
  .nonmember-top__mv-image--third {
    display: block;
    flex: 1 1 0;
    align-self: stretch;
    min-width: 0;
    width: auto;
    height: 768px;
  }

  /* SPの3枚目はPCでは右列として独立表示するため、左・中央列から除外する。 */
  .nonmember-top__mv-slide--mobile-only {
    display: none;
  }

  /* PCの左・右列は上から下、中央列は下から上へ切り替える。 */
  .nonmember-top__mv-image[data-pc-direction="down"] .nonmember-top__mv-slide {
    transform: translateY(-100%);
  }

  .nonmember-top__mv-image[data-pc-direction="up"] .nonmember-top__mv-slide {
    transform: translateY(100%);
  }

  .nonmember-top__mv-image[data-pc-direction] .nonmember-top__mv-slide.is-current {
    transform: translateY(0);
  }

  /* PCキャッチコピー: 1200px枠を中央に置き、下から40px。 */
  .nonmember-top__mv-copy {
    top: auto;
    bottom: var(--spacing-10);
    left: 50vw;
    width: calc(100vw - 32px);
    max-width: 1200px;
    height: 156px;
    transform: translateX(-50%);
    filter: drop-shadow(0 4px 6px rgba(254, 161, 69, 0.2));
  }

  .nonmember-top__mv-copy-line {
    height: 80px;
    padding: var(--spacing-5) var(--spacing-2) var(--spacing-5) var(--spacing-8);
  }

  .nonmember-top__mv-copy-text {
    font-size: 40px;
  }

  .nonmember-top__mv-copy-comma {
    letter-spacing: -4.8px;
  }

  .nonmember-top__mv-copy-line--first {
    top: 0;
    left: var(--spacing-4);
    width: 508px;
    border-radius: var(--radius-6) var(--radius-6) 0 var(--radius-6);
  }

  .nonmember-top__mv-copy-line--second {
    top: 76px;
    left: 96px;
    width: 640px;
    border-radius: 0 var(--radius-6) var(--radius-6) var(--radius-6);
  }

  /* CTAは右端から40px、下24px。端末画像は同じ右端を基準に上へ配置する。 */
  .nonmember-top__mv-lead {
    position: absolute;
    z-index: 5;
    top: 590px;
    right: var(--spacing-10);
    align-items: center;
    gap: var(--spacing-4);
    width: 320px;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .nonmember-top__mv-lead-text {
    width: auto;
    padding: 0;
  }

  .nonmember-top__mv-note {
    display: none;
  }

  .nonmember-top__mv-title {
    font-size: var(--guest-font-size-xl);
    letter-spacing: 0.03em;
    line-height: var(--guest-line-height-heading);
    white-space: nowrap;
    text-shadow:
      0 0 8px var(--color-orange-25),
      0 0 12px var(--color-orange-25);
  }

  .nonmember-top__mv-title br {
    display: none;
  }

  .nonmember-top__mv-lead .guest-accent-button {
    width: 320px;
    max-width: 320px;
  }

  .nonmember-top__mv-apps {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
  }

  .nonmember-top__mv-apps a,
  .nonmember-top__mv-apps img {
    display: block;
  }

  .nonmember-top__mv-apps img {
    height: 44px;
    width: auto;
  }

  .nonmember-top__mv-devices {
    top: -437px;
    right: 0;
    bottom: auto;
    width: 361px;
    height: 421px;
  }

  /* 全セクション共通: Figmaの900pxコンテンツ枠と上下余白。 */
  .nonmember-top__section {
    gap: var(--spacing-8);
    padding: var(--spacing-25) var(--spacing-16) var(--spacing-30);
  }

  .nonmember-top__section > .guest-hgroup,
  .nonmember-top__section-body {
    max-width: 900px;
  }

  .nonmember-top__section-body {
    gap: var(--spacing-20);
  }

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

  /* feature */
  .nonmember-top__features {
    gap: var(--spacing-16);
  }

  .nonmember-top__feature {
    gap: var(--spacing-6);
  }

  .nonmember-top__feature > .guest-section-title {
    max-width: none;
  }

  /* SP用に固定した改行はPCでは不要。900px枠内で1行に収まる。 */
  .nonmember-top__feature > .guest-section-title .guest-section-title__text br {
    display: none;
  }

  .nonmember-top__feature-content {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--spacing-6);
  }

  .nonmember-top__feature-content .nonmember-top__texts {
    flex: 1 1 0;
    min-width: 0;
  }

  .nonmember-top__figure {
    flex: none;
    width: 360px;
    max-width: 360px;
    margin: 0;
  }

  .nonmember-top__feature:nth-child(even) .nonmember-top__figure {
    order: -1;
  }

  /* report: 左528pxの大カード＋右340pxの3段。 */
  .nonmember-top__reports {
    display: grid;
    grid-template-columns: minmax(0, 528px) 340px;
    grid-template-rows: repeat(3, 154px);
    gap: var(--spacing-6) var(--spacing-8);
    align-items: start;
    height: 510px;
  }

  .nonmember-top__reports > .guest-report-card-large,
  .nonmember-top__reports > .guest-report-card-small {
    max-width: none;
    margin: 0;
  }

  .nonmember-top__reports > .guest-report-card-large {
    grid-row: 1 / 4;
    height: 406px;
  }

  .nonmember-top__reports > .guest-report-card-large .guest-report-card-large__visual {
    height: 352px;
    aspect-ratio: auto;
  }

  .nonmember-top__reports > .guest-report-card-small {
    height: 154px;
  }

  .nonmember-top__reports > .guest-report-card-small .guest-report-card-small__visual {
    flex: none;
    width: 231px;
    height: 154px;
  }

  .nonmember-top__reports .guest-report-card-small__title {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--guest-font-size-base);
  }

  .nonmember-top__reports .guest-report-card-large__title {
    padding: var(--spacing-3) var(--spacing-4);
  }

  .nonmember-top__reports .guest-report-card-large__meta {
    height: 54px;
    padding: var(--spacing-4);
  }

  .nonmember-top__reports .guest-report-card-small__meta {
    width: 109px;
    padding: var(--spacing-5);
    font-size: var(--guest-font-size-sm);
  }

  /* message */
  .nonmember-top__messages {
    gap: var(--spacing-10);
  }

  /* policy: 3列×2行。 */
  .nonmember-top__policies {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--spacing-10);
    row-gap: var(--spacing-10);
  }

  .nonmember-top__policy {
    gap: var(--spacing-2);
  }

  .nonmember-top__policy-head {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-4);
  }

  .nonmember-top__policy-icon {
    width: 100px;
    height: 100px;
  }

  .nonmember-top__policy-title {
    flex: none;
    width: 100%;
    font-size: var(--guest-font-size-base);
    text-align: center;
  }

  /* FAQ / news / media */
  .nonmember-top__faqs,
  .nonmember-top__news {
    gap: var(--spacing-6);
  }

  .nonmember-top__medias {
    gap: var(--spacing-4);
  }
}

@media (min-width: 1080px) and (prefers-reduced-motion: no-preference) {
  .nonmember-top__mv-image[data-pc-direction] .nonmember-top__mv-slide.is-leaving,
  .nonmember-top__mv-image[data-pc-direction] .nonmember-top__mv-slide.is-arriving {
    will-change: transform;
    transition: transform 600ms linear;
  }

  /* 下方向: 現在画像を下へ出し、次画像を上から入れる。 */
  .nonmember-top__mv-image[data-pc-direction="down"] .nonmember-top__mv-slide.is-leaving {
    z-index: 2;
    transform: translateY(100%);
  }

  /* 上方向: 現在画像を上へ出し、次画像を下から入れる。 */
  .nonmember-top__mv-image[data-pc-direction="up"] .nonmember-top__mv-slide.is-leaving {
    z-index: 2;
    transform: translateY(-100%);
  }

  .nonmember-top__mv-image[data-pc-direction] .nonmember-top__mv-slide.is-entering {
    z-index: 3;
    transition: none;
  }

  .nonmember-top__mv-image[data-pc-direction] .nonmember-top__mv-slide.is-arriving {
    z-index: 3;
    transform: translateY(0);
  }
}