/* ご紹介制度ページ（/referral/）。骨組みは料金ページ（pricing-seo-*）を流用し、ここには固有の部品だけを置く。 */

.referral-page .pricing-guide-hero-lead strong { color: var(--navy); }
/* 見出しは文節で折り返し、最終行に数文字だけ残らないようにする */
.referral-page h1 span, .referral-page h2, .referral-page h3 { word-break: auto-phrase; text-wrap: balance; }
.referral-page p, .referral-page dd { text-wrap: pretty; }

.referral-how { background: #fff; }
.referral-ways { max-width: 920px; margin: 0; padding: 0; list-style: none; counter-reset: referral-way; }
.referral-ways > li { position: relative; padding: 26px 0 26px 62px; border-bottom: 1px solid rgba(10, 45, 95, .17); counter-increment: referral-way; }
.referral-ways > li:first-child { border-top: 1px solid rgba(10, 45, 95, .17); }
.referral-ways > li::before { content: counter(referral-way, decimal-leading-zero); position: absolute; top: 26px; left: 0; color: var(--gold); font-family: "Noto Serif JP", serif; font-size: 1.3rem; font-weight: 700; line-height: 1.5; }
.referral-ways h3 { margin: 0 0 8px; font-size: 1.12rem; }
.referral-ways p { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.9; }

/* 紹介用リンクを作る欄 */
.referral-maker { margin-top: 20px; padding: 22px 24px; border-radius: 16px; background: #eef4fb; }
.referral-maker label { display: block; margin-bottom: 8px; color: var(--navy); font-size: .9rem; font-weight: 700; }
.referral-maker-row { display: flex; gap: 10px; }
.referral-maker input { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid #c9d6e6; border-radius: 10px; background: #fff; font: inherit; font-size: 1rem; color: var(--ink); }
.referral-maker input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(10, 45, 95, .12); }
.referral-maker button,
.referral-result-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border: 0; border-radius: 10px; background: var(--navy); color: #fff; font: inherit; font-size: .92rem; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; }
.referral-maker button:hover { background: var(--deep); }
.referral-result { margin-top: 16px; }
.referral-result input { width: 100%; font-size: .86rem; color: var(--navy); }
.referral-result-actions { display: flex; gap: 10px; margin-top: 10px; }
.referral-result-actions a { background: var(--line-green); }
.referral-result-actions a:hover { background: #05b54d; }
.referral-status { min-height: 1.6em; margin: 8px 0 0; color: var(--navy); font-size: .86rem; }
.referral-maker small { display: block; margin-top: 10px; color: var(--muted); font-size: .8rem; }

/* 紺の締めCTAは申込（/trial/）へ送るので、LINE の緑ではなく他ページの締めCTAと同じ金にする */
.referral-page .pricing-seo-cta .button-primary { border-color: var(--gold); background: var(--gold); color: var(--deep); box-shadow: none; }
.referral-page .pricing-seo-cta .button-primary:hover { border-color: var(--gold-light); background: var(--gold-light); box-shadow: none; }

@media (max-width: 760px) {
  .referral-ways > li { padding: 20px 0 20px 44px; }
  .referral-ways > li::before { top: 20px; font-size: 1.1rem; }
  .referral-ways h3 { font-size: 1.02rem; }
  .referral-ways p { font-size: .88rem; }
  .referral-maker { padding: 18px 16px; }
  .referral-maker-row { flex-direction: column; }
  .referral-result-actions > * { flex: 1; }
}