/*
 * 友達紹介の固定ページ。XD ボード PC_友達紹介 / SP_友達紹介 の再現。
 *
 * 共通部品は component-lp-page.css を参照。
 */

/* ── ヒーロー ──────────────────────────────────────
 * 左に大きな英字の見出し、右に写真2枚を少し重ねて置く。
 */
.ref-hero {
  padding-block: 60px 40px;
}

/*
 * 写真は右端へ絶対配置する。横に並べる（flex）と版面 1440px では
 * リード文1行（約 740px）と写真（736px）で 40px 足りず、XD では
 * 1行で収まっている文が折れてしまうため。
 * 写真は文章より上（y 0〜653）にあるので、重ならない。
 */
.ref-hero__inner {
  position: relative;
  min-height: calc(min(736px, 45vw) * 0.887);
}

.ref-hero__media {
  position: absolute;
  right: 0;
  top: 0;
}

.ref-hero__title {
  font-family: var(--astra-gen-interface-jp);
  font-weight: var(--astra-font-weight-extrabold);
  font-size: 96px;
  line-height: 1.15;
  color: var(--lp-yellow);
  margin: 0 0 40px;
}

.ref-hero__subtitle {
  font-family: var(--astra-gen-interface-jp);
  font-weight: var(--astra-font-weight-semibold);
  font-size: 34px;
  line-height: 1.5;
  color: #fff;
  margin: 0 0 40px;
}

/* XD では「20%OFF」だけ黄色。 */
.ref-hero__subtitle-accent {
  color: var(--lp-yellow);
}

/* 「プレゼント。」が途中で折り返さないようにする（SP で「プ / レゼント」と割れるのを避ける）。 */
.ref-hero__subtitle-nowrap {
  white-space: nowrap;
}

.ref-hero__lead {
  font-family: var(--astra-gen-interface-jp);
  font-weight: var(--astra-font-weight-light);
  font-size: 26px;
  line-height: 41px;
  color: #fff;
  margin: 0;
}

/*
 * 写真2枚。XD の座標をそのまま割合にしてある
 * （枠 736x653 のなかで、格子の写真が左上・手の写真が右下）。
 */
.ref-hero__media {
  width: 736px;
  aspect-ratio: 736 / 653;
}

.ref-hero__media img {
  position: absolute;
  border-radius: 16px;
  object-fit: cover;
}

.ref-hero__media img:first-child {
  left: 0;
  top: 0;
  width: 50.3%;
  height: 56.7%;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
}

.ref-hero__media img:last-child {
  left: 53.3%;
  top: 35.1%;
  width: 46.7%;
  height: 64.9%;
  box-shadow: 0 13px 5px rgba(0, 0, 0, 0.16);
}

@media screen and (max-width: 1440px) {
  .ref-hero__title {
    font-size: 6.6vw;
    line-height: 1.15;
  }

  .ref-hero__subtitle {
    font-size: 2.4vw;
    line-height: 1.5;
  }

  .ref-hero__media {
    width: 45vw;
  }
}

@media screen and (max-width: 768px) {
  /*
   * XD の SP は手の写真が画面の右端からはみ出している（375 の版面に対して
   * 右端が 385）。はみ出したぶんで横スクロールが生えないよう、ここで切る。
   */
  .ref-hero {
    padding-block: 24px 0;
    overflow-x: clip;
  }

  /* SP は写真を文章の下に置く（絶対配置をやめる）。 */
  .ref-hero__inner {
    min-height: 0;
  }

  /* relative のまま（static にすると中の写真が inner を基準にしてしまう）。 */
  .ref-hero__media {
    position: relative;
  }

  .ref-hero__title {
    font-size: 40px;
    line-height: 1.2;
    margin-bottom: 20px;
  }

  .ref-hero__subtitle {
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: 24px;
  }

  .ref-hero__lead {
    font-size: 11px;
    line-height: 17px;
  }

  /* SP は格子の写真が左下・手の写真が右上と、PC と入れ替わる。 */
  .ref-hero__media {
    width: 100%;
    aspect-ratio: 339 / 375;
    margin-top: 26px;
  }

  .ref-hero__media img:first-child {
    left: 2%;
    top: 49%;
    width: 55.2%;
    height: 49.9%;
  }

  .ref-hero__media img:last-child {
    left: 25.9%;
    top: 0;
    width: 82.3%;
    height: 73.6%;
  }
}

/* ── 紹介のステップ ───────────────────────────────── */
.ref-steps__grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.ref-step {
  min-height: 300px;
  padding: 41px 30px 32px;
  display: flex;
  flex-direction: column;
}

.ref-step__icon {
  height: 37px;
  margin-bottom: 45px;
  color: var(--lp-yellow);
}

.ref-step__icon svg {
  width: auto;
  height: 100%;
}

.ref-step__eyebrow {
  font-family: var(--astra-source-code-pro);
  font-weight: var(--astra-font-weight-regular);
  font-size: 14px;
  line-height: 1;
  color: var(--lp-yellow);
  margin: 0 0 18px;
}

.ref-step__title {
  font-family: var(--astra-gen-interface-jp);
  font-weight: var(--astra-font-weight-medium);
  font-size: 24px;
  line-height: 1;
  color: #fff;
  margin: 0 0 18px;
  text-wrap: balance;
}

.ref-step__text {
  font-family: var(--astra-gen-interface-jp);
  font-weight: var(--astra-font-weight-regular);
  font-size: 16px;
  line-height: 26px;
  color: var(--lp-body);
  margin: 0;
}

@media screen and (max-width: 768px) {
  /* SP は縦に積み、カードの中でアイコンを左・文章を右に並べる（読み順が STEP1→2→3 のまま続く）。 */
  .ref-steps__grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ref-step {
    min-height: 0;
    padding: 20px 18px;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }

  .ref-step__icon {
    flex: none;
    width: 28px;
    height: 28px;
    margin: 2px 0 0;
    display: flex;
    align-items: center;
  }

  .ref-step__eyebrow {
    font-size: 11px;
    margin-bottom: 6px;
  }

  .ref-step__title {
    font-size: 17px;
    line-height: 1.35;
    margin-bottom: 8px;
  }

  .ref-step__text {
    font-size: 14px;
    line-height: 22px;
  }
}

/* ── 特典（紹介された方 / 紹介した方）──────────────────
 * PC は 2 カラム、SP は縦並び。割引率を最も大きく見せ、補足は 1 行にとどめる。
 */
.ref-benefits__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}

.ref-benefit {
  padding: 44px 40px 40px;
  text-align: center;
}

.ref-benefit__who {
  display: inline-block;
  min-width: 160px;
  padding: 8px 22px;
  border: 1px solid var(--lp-yellow);
  border-radius: 60px;
  font-family: var(--astra-gen-interface-jp);
  font-weight: var(--astra-font-weight-semibold);
  font-size: 16px;
  line-height: 1.2;
  color: var(--lp-yellow);
  margin: 0 0 18px;
}

.ref-benefit__rate {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin: 0 0 6px;
  color: var(--lp-yellow);
  line-height: 1;
}

.ref-benefit__num {
  font-family: var(--astra-roboto);
  font-weight: var(--astra-font-weight-bold);
  font-size: 112px;
  letter-spacing: -0.02em;
}

.ref-benefit__unit {
  font-family: var(--astra-roboto);
  font-weight: var(--astra-font-weight-bold);
  font-size: 44px;
}

.ref-benefit__when {
  font-family: var(--astra-gen-interface-jp);
  font-weight: var(--astra-font-weight-semibold);
  font-size: 24px;
  line-height: 1.3;
  color: #fff;
  margin: 0 0 18px;
}

.ref-benefit__note {
  max-width: 420px;
  margin: 0 auto;
  font-family: var(--astra-gen-interface-jp);
  font-weight: var(--astra-font-weight-regular);
  font-size: 15px;
  line-height: 1.7;
  color: var(--lp-body);
}

@media screen and (max-width: 768px) {
  .ref-benefits__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ref-benefit {
    padding: 28px 22px 26px;
  }

  .ref-benefit__who {
    min-width: 0;
    padding: 6px 18px;
    font-size: 13px;
    margin-bottom: 12px;
  }

  .ref-benefit__num {
    font-size: 76px;
  }

  .ref-benefit__unit {
    font-size: 30px;
  }

  .ref-benefit__when {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .ref-benefit__note {
    font-size: 13px;
    line-height: 1.7;
  }
}

/* ── 注意事項 ─────────────────────────────────────── */
.ref-notes__card {
  width: min(100%, 980px);
  margin-inline: auto;
  padding: 36px 44px;
}

.ref-notes__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ref-notes__list li {
  position: relative;
  padding-left: 20px;
  font-family: var(--astra-gen-interface-jp);
  font-weight: var(--astra-font-weight-regular);
  font-size: 15px;
  line-height: 1.8;
  color: var(--lp-body);
}

.ref-notes__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.8em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--lp-yellow);
}

@media screen and (max-width: 768px) {
  .ref-notes__card {
    padding: 22px 18px;
  }

  .ref-notes__list {
    gap: 12px;
  }

  .ref-notes__list li {
    font-size: 13px;
    line-height: 1.75;
    padding-left: 16px;
  }
}

/* 1〜2 文字だけが次の行に落ちる折り返しを避ける（効かないブラウザでは何も変わらない）。 */
.ref-benefit__note,
.ref-step__text,
.ref-notes__list li,
.ref-account__text,
.ref-hero__subtitle {
  text-wrap: pretty;
}

/* ── ヒーローの CTA / カード内の「対象商品を見る」 ──────── */
.ref-hero__cta {
  margin-top: 0;
}

.ref-account__more {
  margin-top: 18px;
}

@media screen and (max-width: 768px) {
  .ref-hero__cta {
    min-width: 200px;
  }

  .ref-account__more {
    margin-top: 14px;
    display: flex;
    justify-content: center;
  }
}

/* ── ログインすると紹介リンクを発行できます ─────────────
 * 左が写真、右が文言。SP は写真が上に回る。
 */
.ref-account {
  display: grid;
  grid-template-columns: 682fr 758fr;
  overflow: hidden;
  min-height: 494px;
}

.ref-account__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ref-account__body {
  padding: 100px 109px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ref-account__title {
  font-family: var(--astra-gen-interface-jp);
  font-weight: var(--astra-font-weight-semibold);
  font-size: 28px;
  line-height: 1.4;
  color: #fff;
  margin: 0 0 22px;
}

.ref-account__text {
  max-width: 534px;
  font-family: var(--astra-gen-interface-jp);
  font-weight: var(--astra-font-weight-light);
  font-size: 18px;
  line-height: 30px;
  color: #fff;
  margin: 0 0 34px;
}

@media screen and (max-width: 1280px) {
  .ref-account__body {
    padding: 48px;
  }
}

@media screen and (max-width: 768px) {
  .ref-account {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .ref-account__image {
    aspect-ratio: 339 / 256;
    height: auto;
  }

  .ref-account__body {
    padding: 30px 27px 34px;
    text-align: center;
  }

  .ref-account__title {
    font-size: 16px;
    margin-bottom: 14px;
    text-align: left;
  }

  .ref-account__text {
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 26px;
    text-align: left;
  }
}

/* 紹介リンクのカードは前後のセクションと余白の付き方が違う（上は
 * 直前のセクションの余白でちょうど届くので、下だけ持たせる）。 */
.ref-account-section {
  padding-bottom: 84px;
  scroll-margin-top: 90px;
}

@media screen and (max-width: 768px) {
  .ref-account-section {
    padding-bottom: 42px;
  }
}

/* ── 紹介リンク（ログイン中）──────────────────────────
 * 友達紹介が有効なときだけ、アカウントのカードに出る
 * （automatewoo/referrals/share-page.php）。
 * リンクの欄とコピーボタンを横に並べ、狭い画面では縦に積む。
 */
.ref-link {
  display: flex;
  gap: 12px;
  max-width: 534px;
}

.ref-link__field {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 55px;
  padding: 0 20px;
  border: 1.5px solid var(--lp-rule);
  border-radius: 60px;
  background: transparent;
  color: #fff;
  font-family: var(--astra-source-code-pro);
  font-size: 14px;
}

.ref-link__field:focus-visible {
  outline: none;
  border-color: var(--lp-cyan-line);
}

.ref-link__button {
  flex: none;
  min-width: 0;
  justify-content: center;
  background: transparent;
  cursor: pointer;
}

.ref-link__button.is-copied {
  color: var(--lp-yellow);
  border-color: var(--lp-yellow);
}

@media screen and (max-width: 768px) {
  .ref-link {
    flex-direction: column;
  }

  .ref-link__field {
    min-height: 48px;
  }
}