/* 2026-10-22 デザイン刷新（lp-parts-scout の design-brief.md に基づく追加分）
   Tailwind の再ビルド不要。既存クラスは触らず、rf- で始まるクラスだけを足す。 */

/* ---------- ナビ: 浮いた角丸カプセル（参考: Supaste） ---------- */
.rf-header{position:sticky;top:0;z-index:40;padding:14px 16px 0;pointer-events:none}
.rf-nav{pointer-events:auto;max-width:760px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(236,72,153,.14);border-radius:999px;padding:8px 8px 8px 16px;
  box-shadow:0 10px 30px rgba(190,24,93,.10)}
.rf-header.scrolled .rf-nav{box-shadow:0 14px 34px rgba(190,24,93,.16)}
.rf-logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:17px;color:#be185d}
.rf-logo img{width:28px;height:28px;border-radius:8px}
.rf-links{display:none;gap:26px;font-size:14px;color:#57534e}
.rf-links a:hover{color:#db2777}
.rf-get{display:inline-flex;align-items:center;gap:6px;background:#111;color:#fff;font-weight:700;font-size:13.5px;padding:9px 16px;border-radius:999px}
.rf-get svg{width:14px;height:14px}
@media(min-width:768px){.rf-links{display:flex}}

/* ---------- ファーストビュー: 中央揃え＋端末のまわりに返信候補カード（参考: Flighty / Wishes） ---------- */
.rf-hero{padding:150px 20px 0;margin-top:-66px}
.rf-br{display:none}@media(min-width:900px){.rf-br{display:inline}}
.rf-hero-inner{position:relative;z-index:2;max-width:760px;margin:0 auto;text-align:center}
.rf-hero h1{font-size:60px;line-height:1.12}
.rf-hero .fh-sub{margin:18px auto 0;max-width:31em}
.rf-cta-row{margin-top:28px;display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap}
.rf-store{display:inline-flex;align-items:center;gap:12px;background:linear-gradient(135deg,#f63f9f,#ec4899);color:#fff;font-weight:800;font-size:17px;
  padding:16px 28px;border-radius:999px;box-shadow:0 18px 38px rgba(236,72,153,.40)}
.rf-store svg{width:20px;height:20px}
.rf-qr-mini{display:none;align-items:center;gap:10px;background:#fff;border-radius:16px;padding:8px 14px 8px 8px;box-shadow:0 8px 22px rgba(190,24,93,.12);text-align:left}
.rf-qr-mini img{width:52px;height:52px}
.rf-qr-mini span{font-size:12.5px;line-height:1.45;color:#6b4a57;font-weight:700}
.rf-hero .fh-trust{margin-top:14px}

.rf-stage{position:relative;z-index:2;max-width:1040px;margin:44px auto 0;display:flex;justify-content:center;padding-bottom:56px}
.rf-stage .fh-right{flex:none}
.rf-stage .fh-phone{transform:none}
.rf-stage .fh-sticker{top:-26px;right:-34px}
.rf-reply{position:absolute;z-index:3;width:228px;background:#fff;border-radius:18px;padding:12px 14px;text-align:left;
  box-shadow:0 16px 36px rgba(170,28,86,.16);border:1px solid rgba(236,72,153,.10)}
.rf-reply .rf-tone{display:inline-block;font-size:11.5px;font-weight:800;padding:3px 10px;border-radius:999px;margin-bottom:6px}
.rf-reply p{font-size:14.5px;line-height:1.5;color:#2a1a20;font-weight:500}
.rf-t1{background:#ffe0ee;color:#be185d}.rf-t2{background:#e7efff;color:#3157b7}.rf-t3{background:#fff0d6;color:#a2620a}
.rf-t4{background:#ffe1e7;color:#d1244f}.rf-t5{background:#e8e6f5;color:#4b4386}
.rf-r1{left:2%;top:40px;transform:rotate(-4deg)}
.rf-r2{left:7%;top:210px;transform:rotate(2deg)}
.rf-r3{left:0;top:380px;transform:rotate(-2deg)}
.rf-r4{right:3%;top:90px;transform:rotate(4deg)}
.rf-r5{right:6%;top:290px;transform:rotate(-3deg)}
.rf-feat{position:absolute;z-index:3;right:0;top:470px;display:inline-flex;align-items:center;gap:8px;background:#111;color:#fff;font-size:13.5px;font-weight:700;
  padding:10px 16px;border-radius:999px;box-shadow:0 14px 30px rgba(0,0,0,.22);transform:rotate(3deg)}
.rf-caption{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);font-size:12.5px;color:#a06b7b;white-space:nowrap}
@media(min-width:900px){.rf-qr-mini{display:inline-flex}}
@media(max-width:899px){
  .rf-hero{padding-top:118px}
  .rf-hero h1{font-size:36px}
  .rf-stage{flex-direction:column;align-items:center;margin-top:34px;padding-bottom:40px}
  .rf-replies{order:2;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px;width:100%;max-width:420px}
  .rf-reply{position:static;width:auto;transform:none;padding:10px 12px}
  .rf-reply p{font-size:13px}
  .rf-reply:last-child{grid-column:1 / -1}
  .rf-feat{position:static;transform:none;order:3;margin-top:14px}
  .rf-caption{position:static;transform:none;order:4;margin-top:10px;white-space:normal;text-align:center}
  .rf-stage .fh-sticker{right:-8px}
}

/* ---------- 料金: おすすめを塗りつぶしで1枚だけ目立たせる（参考: Adwize / Deacon） ---------- */
.rf-plan-rec{position:relative;background:linear-gradient(160deg,#f63f9f,#db2777) !important;border-color:transparent !important;color:#fff;
  box-shadow:0 26px 50px rgba(219,39,119,.32) !important}
.rf-plan-rec p,.rf-plan-rec span,.rf-plan-rec li{color:#fff !important}
.rf-plan-rec li span{color:#ffd6ea !important}
.rf-plan-rec a{background:#fff !important;color:#be185d !important;font-weight:800}
.rf-plan-rec .rf-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:#111;color:#fff !important;font-size:12px;font-weight:800;
  padding:5px 14px;border-radius:999px;white-space:nowrap}
@media(min-width:768px){.rf-plan-rec{transform:translateY(-12px) scale(1.03)}}

/* ---------- 最後の CTA: PC では QR を並べる（参考: Cleo / Super） ---------- */
.rf-final-row{margin-top:40px;display:flex;justify-content:center;align-items:center;gap:28px;flex-wrap:wrap}
.rf-final-row > a{margin-top:0 !important}
.rf-qr-card{display:none;align-items:center;gap:14px;background:#fff;border-radius:22px;padding:12px 18px 12px 12px;text-align:left;box-shadow:0 24px 48px rgba(80,0,40,.28)}
.rf-qr-card img{width:96px;height:96px}
.rf-qr-card strong{display:block;color:#1c1917;font-size:15px}
.rf-qr-card span{display:block;color:#78716c;font-size:12.5px;margin-top:4px;line-height:1.5}
@media(min-width:900px){.rf-qr-card{display:flex}}

/* ---------- フッター: 特大のロゴ文字を薄く敷く（参考: Cronicle） ---------- */
.rf-footer-store{display:inline-flex;align-items:center;gap:8px;margin-top:18px;background:#fff;color:#111;font-weight:700;font-size:13.5px;padding:10px 16px;border-radius:999px}
.rf-footer-store svg{width:15px;height:15px}
.rf-wordmark{overflow:hidden;line-height:.8;padding-top:10px;user-select:none}
.rf-wordmark span{display:block;font-family:Inter,'Noto Sans JP',sans-serif;font-weight:800;letter-spacing:-.06em;font-size:19.5vw;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 88%);-webkit-background-clip:text;background-clip:text;color:transparent;transform:translateY(12%)}
@media(min-width:1280px){.rf-wordmark span{font-size:250px}}