/* =====================================================================
   bySENSE OFFICIAL WEBSITE — referral.css  (お友達紹介について page-specific)
   FAQ/SUBSCRIPTIONページ(faq.css/subscription.css)の HERO・stage流体化・
   content グリッド・アコーディオン機構を踏襲（同一機構）。
   共通トークン/部品は base.css・components.css を使う（編集禁止）。
   明ページ: 背景 var(--bg)=#d0d0d0 / 文字 var(--ink)=#393c41。
   ===================================================================== */

/* ============ HERO (0 → 100vh) — faq.css/.faq-hero* を .ref-hero* 名前空間で再現 ============ */
.ref-hero { position: relative; width: 100%; height: 100vh; }

.ref-hero__bg { position: absolute; top: 0; height: 100%; overflow: hidden; }
.ref-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 明るい写真上の白文字可読性グラデ（FAQ/SUBSCRIPTION と同一） */
.ref-hero__bg::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,18,14,0) 46%, rgba(20,18,14,.30) 78%, rgba(20,18,14,.42));
}

/* 前景ラッパ: HERO 下端固定の島。子は内部座標 px（FAQ/SUBSCRIPTION と同一座標系） */
.ref-hero__fg { position: absolute; left: 0; bottom: 0; width: 100%; height: 1082px; z-index: 3; }

/* H1 "REFERRAL" — Kaku Regular 24/42/6px 白 */
.ref-hero__h1 {
  position: absolute; left: calc(128 / 1536 * 100%); top: 768px; width: min(672px, 100%);
  font-family: var(--sans); font-weight: 400;
  font-size: 24px; line-height: 42px; letter-spacing: 6px; color: var(--white);
  text-shadow: 0 1px 12px rgba(20,18,14,.55), 0 1px 2px rgba(20,18,14,.35);
}
/* H2 "お友達紹介について" — Mincho 500 24/48/3px 白 */
.ref-hero__h2 {
  position: absolute; left: calc(128 / 1536 * 100%); top: 865px; width: min(672px, 100%);
  font-family: var(--serif); font-weight: 500;
  font-size: 24px; line-height: 48px; letter-spacing: 3px; color: var(--white);
  text-shadow: 0 1px 12px rgba(20,18,14,.5), 0 1px 2px rgba(20,18,14,.3);
}
.ref-hero__vline {
  position: absolute; left: calc(128 / 1536 * 100%); top: 1022px; height: 120px;
  border-left: 1px solid rgba(255,255,255,.65);
}
.ref-hero__hline {
  position: absolute; left: 0; top: 1082px; width: 100%;
  border-top: 1px solid var(--line);
}

/* ============ CONTENT (HERO以降・通常フロー＋グリッド) — faq.css/.faq-content と同一列 ============ */
.ref-content {
  padding-top: 96px;
  display: grid;
  grid-template-columns: [full-start] minmax(24px, 1fr) [main-start] minmax(0, 896px) [main-end] minmax(24px, 1fr) [full-end];
}

/* -------- イントロ -------- */
.ref-intro {
  grid-column: main-start / main-end;
  justify-self: start;
  width: min(736px, 100%);
  margin: 0 0 80px;
  color: var(--ink);
}
.ref-intro__eyebrow {
  font-family: var(--sans); font-weight: 500; font-size: 13px; line-height: 1.4;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-60);
  margin-bottom: 14px;
}
.ref-intro__head { color: var(--ink); }
.ref-intro__body { margin-top: 20px; color: var(--ink-60); }
.ref-intro__body + .ref-intro__body { margin-top: 12px; }

/* -------- 汎用セクション: main列(上限896)充填・上罫線で節区切り -------- */
.ref-sec {
  grid-column: main-start / main-end;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.ref-sec + .ref-sec { margin-top: 64px; }
.ref-sec__eyebrow {
  font-family: var(--sans); font-weight: 500; font-size: 13px; line-height: 1.4;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-60);
  margin-bottom: 14px;
}
.ref-sec__head { color: var(--ink); }

/* -------- キャンペーン内容: 2枚の特典カード -------- */
.ref-reward { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 40px; }
.ref-reward__card { background: var(--white); border: 1px solid var(--line); padding: 40px 32px; text-align: center; }
.ref-reward__eyebrow {
  display: inline-block;
  font-family: var(--sans); font-weight: 500; font-size: 13px; line-height: 1.5;
  letter-spacing: .06em; color: var(--ink); margin-bottom: 18px;
  background: linear-gradient(transparent 60%, var(--bg-alt) 60%);
  padding: 1px 6px;
}
.ref-reward__value {
  font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.4;
  letter-spacing: .02em; color: var(--ink);
}
.ref-reward__value-sub {
  display: block; margin-top: 4px;
  font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: .04em; color: var(--ink-60);
}
.ref-reward__desc {
  margin-top: 18px; font-family: var(--sans); font-weight: 400; font-size: 14px; line-height: 1.9; color: var(--ink-60);
}

/* -------- ご利用方法: アイコン付き3ステップ -------- */
.ref-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 40px; }
.ref-flow__item { position: relative; text-align: center; }
/* STEP間の短い区切り罫線（列ガター中央・STEP番号〜アイコン下端の高さだけ） */
.ref-flow__item:not(:first-child)::before {
  content: ""; position: absolute; left: -20px; top: 2px;
  width: 1px; height: 195px; background: var(--line);
}
/* アイコンはPDF構成案の挿絵（あなた/お友達ラベル・共有アイコン4種・カート・5,000ptバッジ）を
   ブランドトーン(currentColor)の塗りアイコンへ翻案。あなた=不透明・お友達=45%で対比。 */
.ref-flow__icon { display: block; width: 100%; max-width: 240px; margin: 0 auto 18px; color: var(--ink); }
.ref-flow__icon svg { width: 100%; height: auto; display: block; }
/* [2026-08-14] user feedback: 文字を大きくしただけでは「マーカー」にならない、
   .ref-reward__eyebrow（「紹介した方（あなた）」等）と同じ蛍光ペン風ハイライト装飾が欲しいとのこと。
   フォントサイズ・色は前回調整分(20px/var(--ink))を維持し、装飾のみ .ref-reward__eyebrow の
   レシピ（下40%だけ var(--bg-alt) を敷く線形グラデ＋余白padding）を流用する。 */
.ref-flow__no {
  display: inline-block;
  font-family: var(--sans); font-weight: 500; font-size: 20px; line-height: 1.4;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin-bottom: 16px;
  background: linear-gradient(transparent 60%, var(--bg-alt) 60%);
  padding: 1px 6px;
}
.ref-flow__title {
  font-family: var(--sans); font-weight: 500; font-size: 16px; line-height: 1.7; color: var(--ink);
}
.ref-flow__desc {
  margin-top: 10px; font-family: var(--sans); font-weight: 400; font-size: 14px; line-height: 1.9; color: var(--ink-60);
}

/* -------- 招待コードの発行方法: 見出し込みで丸ごと白パネル化（背景と明確に分離） --------
   罫線は使わず、色の切り替えだけで境界を示す。前後の余白とパネル内側の上下paddingを
   同じ値(56px)に揃え、白へ切り替わる前後で「間」の感じ方が変わらないようにする。 */
.ref-panel { background: var(--white); padding: 56px 40px; }
.ref-sec:has(> .ref-panel) { border-top: none; padding-top: 0; margin-top: 56px; }
.ref-sec:has(> .ref-panel) + .ref-sec { border-top: none; padding-top: 0; margin-top: 56px; }
.ref-howto { margin-top: 40px; display: flex; flex-direction: column; gap: 56px; }
.ref-howto__item { display: flex; align-items: flex-start; gap: 32px; }
.ref-howto__no {
  flex: 0 0 auto; font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.4;
  color: var(--ink-60); min-width: 32px;
}
.ref-howto__body { flex: 1 1 auto; min-width: 0; padding-top: 4px; }
.ref-howto__title {
  font-family: var(--sans); font-weight: 500; font-size: 16px; line-height: 1.7; color: var(--ink);
}
.ref-howto__desc {
  margin-top: 10px; font-family: var(--sans); font-weight: 400; font-size: 14px; line-height: 1.9; color: var(--ink-60);
}
.ref-howto__shot {
  flex: 0 0 auto; width: 320px; overflow: hidden; border: 1px solid var(--line);
}
.ref-howto__shot img { width: 100%; height: auto; display: block; }

/* -------- FAQ アコーディオン (details/summary) — faq.css .faq-item の明ページ実装を再現 -------- */
.ref-item { border-bottom: 1px solid var(--line); }
.ref-item summary {
  list-style: none; cursor: pointer; position: relative; display: block;
  font-family: var(--sans); font-weight: 500; font-size: 16px; line-height: 1.7;
  color: var(--ink); padding: 18px 48px 18px 0;
}
.ref-item summary::-webkit-details-marker { display: none; }
.ref-item summary::after {
  content: ""; position: absolute; right: 4px; top: 26px;
  width: 13px; height: 13px;
  background:
    linear-gradient(currentColor, currentColor) center/13px 1px no-repeat,
    linear-gradient(currentColor, currentColor) center/1px 13px no-repeat;
  opacity: .65; transition: transform .3s var(--ease);
}
.ref-item[open] summary::after {
  transform: rotate(90deg);
  background: linear-gradient(currentColor, currentColor) center/13px 1px no-repeat;
}
.ref-item__a {
  font-family: var(--sans); font-weight: 400; font-size: 14px; line-height: 1.9;
  color: var(--ink-60); padding: 4px 0 20px;
  margin: 0;
}

/* -------- ご利用にあたって: 箇条書き -------- */
.ref-terms { margin-top: 24px; }
.ref-terms li {
  position: relative; padding-left: 1.3em; margin-bottom: 10px;
  font-family: var(--sans); font-weight: 400; font-size: 14px; line-height: 1.9; color: var(--ink-60);
}
.ref-terms li:last-child { margin-bottom: 0; }
.ref-terms li::before { content: "・"; position: absolute; left: 0; }
.ref-terms a { text-decoration: underline; text-underline-offset: 3px; transition: opacity .3s var(--ease); }
.ref-terms a:hover { opacity: .6; }

/* ============ 注釈エリア（footer 直上）— faq.css/subscription.css と同一配置 ============ */
.ref-page-notes {
  grid-column: full-start / full-end;
  justify-self: center;
  width: min(1280px, 100%);
  margin-top: 80px;
}

/* ============ FOOTER（full列・通常フロー） ============ */
.ref-content > #site-footer {
  grid-column: full-start / full-end;
  margin-top: 80px;
  position: relative;
}

/* =====================================================================
   [Phase3] スマホ専用 (<768) — faq.css/subscription.css の HERO/content スマホ規則を踏襲
   ===================================================================== */
@media (max-width: 767px) {
  .stage.referral-stage { width: 100%; min-width: 0; margin-left: 0; margin-right: 0; }

  /* HERO: 前景テキストを左下に1カラム積み（FAQ/SUBSCRIPTION と同一） */
  .ref-hero { height: 100svh; }
  .ref-hero__fg { height: auto; top: auto; bottom: 0; left: 0; width: 100%; padding: 0 24px 72px; }
  .ref-hero__h1 { position: static; left: auto; top: auto; width: auto; font-size: 20px; letter-spacing: 4px; }
  .ref-hero__h2 { position: static; left: auto; top: auto; width: auto; margin-top: 6px; font-size: 22px; line-height: 36px; }
  .ref-hero__vline {
    position: absolute; left: 24px; right: auto; top: auto; bottom: -40px; height: 96px; width: 0;
    border-left: 1px solid rgba(255,255,255,.6);
  }
  .ref-hero__hline {
    position: absolute; left: 0; right: auto; top: auto; bottom: 0; width: 100%;
    border-top: 1px solid rgba(255,255,255,.28);
  }

  /* CONTENT */
  .ref-content { padding-top: 64px; }
  .ref-intro { margin-bottom: 56px; }
  .ref-sec + .ref-sec { margin-top: 48px; }

  /* キャンペーン内容: 1カラム */
  .ref-reward { grid-template-columns: 1fr; gap: 24px; }

  /* [2026-08-14] user feedback: ご利用方法 1カラム。縦積みのため列間の縦罫線(PC用)は使えないので
     短い横罫線に置き換え、STEP間のgapも広げて上下の余白を十分に確保する。
     罫線はgapの中央(48pxの半分=24px上)にセンター配置。 */
  .ref-flow { grid-template-columns: 1fr; gap: 48px; }
  .ref-flow__item:not(:first-child)::before {
    left: 50%; top: -24px; width: 48px; height: 1px; transform: translateX(-50%);
  }

  /* 招待コードの発行方法: 白パネルは画面幅いっぱいに切り替え（左右のグレー余白を無くす）。
     内側の上下paddingと前後の余白は48pxで統一（PC同様、罫線は使わない）。
     横paddingは他ページと同じ24pxガターへ揃えて文字位置を統一。 */
  .ref-panel {
    position: relative; left: 50%; width: 100vw; margin-left: -50vw;
    padding: 48px 24px;
  }
  .ref-sec:has(> .ref-panel) { margin-top: 48px; }
  .ref-sec:has(> .ref-panel) + .ref-sec { margin-top: 48px; }
  .ref-howto { gap: 40px; }
  .ref-howto__item { flex-direction: column; gap: 16px; }
  .ref-howto__no { min-width: 0; }
  .ref-howto__shot { width: 100%; max-width: 340px; margin: 0 auto; }

  /* 注釈の左右余白を他ページと統一(24pxガター) */
  .ref-page-notes { margin-top: 56px; padding: 0 24px; }
  .ref-content > #site-footer { margin-top: 56px; }
}