/* 利用者募集の LP（パートナー別）。設計: backend/docs/family-lp.md */
:root { --ink:#333; --sub:#666; --line:#e8e1e1; --brand:#DE4A66; --brand-d:#c23a55; --soft:#faf6f6; --card:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:64px; }
body { margin:0; background:#fff; color:var(--ink); line-height:1.8;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif; }
p { overflow-wrap:anywhere; }
.wrap { max-width:960px; margin:0 auto; padding:0 18px; }
section { padding:56px 0; }
.soft { background:var(--soft); }
h1 { font-size:30px; line-height:1.6; margin:16px 0; }
h1 em { font-style:normal; color:var(--brand); }
h2 { font-size:24px; line-height:1.6; margin:0 0 18px; }
h3 { font-size:17px; margin:8px 0 4px; }
.lead { font-size:15px; max-width:640px; }
.note { font-size:12px; color:var(--sub); }
.small { font-size:12px; color:var(--sub); margin-top:8px; }

/* 上の帯 */
.bar { position:sticky; top:0; z-index:5; background:#ffffffee; border-bottom:1px solid var(--line); backdrop-filter:blur(6px); }
.bar-in { display:flex; align-items:center; justify-content:space-between; gap:12px; height:56px; }
.shop { min-width:0; line-height:1.3; }
.shop small { display:block; font-size:10px; color:var(--sub); }
.shop span { display:block; font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-btn { flex:none; padding:7px 14px; border-radius:999px; border:1.5px solid var(--brand); color:var(--brand); font-size:13px; font-weight:700; text-decoration:none; }

/* ボタン */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:12px 22px;
  border:0; border-radius:12px; background:var(--brand); color:#fff; font:inherit; font-size:16px; font-weight:700;
  text-decoration:none; cursor:pointer; }
.btn:hover { background:var(--brand-d); }
.btn-sub { background:#fff; color:var(--brand); border:1.5px solid var(--brand); }
.btn-sub:hover { background:#fff3f5; }
.btn:disabled { opacity:.5; cursor:default; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline:3px solid #326b75; outline-offset:3px; }

/* 最初の画面 */
.hero { background:var(--soft); padding:20px 0 44px; }
.banner img { display:block; width:100%; height:auto; border-radius:16px; }
.banner { margin-bottom:24px; }
.hero-in { display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:center; }
.tag { display:inline-block; padding:4px 12px; border:1px solid #e9b3bf; border-radius:999px; color:var(--brand-d); font-size:12px; background:#fff; }
.hero .btn { margin-top:8px; }
.shot { margin:0; text-align:center; }
.shot img { width:100%; max-width:280px; height:auto; border-radius:22px; border:6px solid #fff; box-shadow:0 6px 24px rgba(0,0,0,.12); }
.shot figcaption { font-size:11px; color:var(--sub); margin-top:6px; }

/* 特長 */
.cols { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:8px 0 12px; }
.feat { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; }
.feat { text-align:center; }
.feat-img { display:block; width:auto; height:120px; margin:0 auto 4px; }
.feat p { text-align:left; }
.split { display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center; }
.together { width:100%; max-width:300px; height:auto; justify-self:center; }
.feat p { font-size:14px; margin:0; }

/* 料金 */
.plans { width:100%; border-collapse:collapse; font-size:15px; }
.plans th, .plans td { padding:12px 8px; border-bottom:1px solid var(--line); text-align:right; }
.plans th:first-child, .plans td:first-child { text-align:left; }
.plans thead { background:var(--soft); font-size:13px; }
.plans td.yen { white-space:nowrap; }

/* よくある質問 */
.faq details { border-bottom:1px solid var(--line); padding:14px 0; }
.faq summary { cursor:pointer; font-weight:700; }
.faq details p { margin:8px 0 0; font-size:14px; }

/* ご相談先（控えめ。主役はボタン） */
.provider { margin-top:18px; font-size:13px; color:var(--sub); line-height:1.7; }
.provider .pv-lab { font-size:11px; }
.provider .pv-nm { font-weight:700; }
.provider a { color:inherit; }
.msg { color:var(--sub); font-size:14px; }
.acts { display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
.campaign { font-size:14px; font-weight:700; color:var(--brand-d); margin:18px 0 10px; }
.acts .btn { flex:1 1 220px; }

footer { padding:24px 0 100px; border-top:1px solid var(--line); }
.links { font-size:12px; display:flex; flex-wrap:wrap; gap:6px 18px; }
.links a { color:var(--sub); }

/* 下に固定（スマホ） */
.sticky { display:none; }

@media (max-width:760px) {
  section { padding:40px 0; }
  h1 { font-size:24px; }
  h2 { font-size:21px; }
  .hero { padding:24px 0 32px; }
  .hero-in { grid-template-columns:1fr; gap:20px; }
  .hero .btn { width:100%; }
  .shot img { max-width:220px; }
  .cols { grid-template-columns:1fr; gap:12px; }
  .split { grid-template-columns:1fr; gap:12px; }
  .together { max-width:220px; }
  .banner { margin-bottom:12px; padding:0 12px; }
  .banner img { border-radius:12px; }
  .plans { font-size:14px; }
  .sticky { display:flex; gap:8px; position:fixed; left:0; right:0; bottom:0; z-index:6;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom)); background:#ffffffee; border-top:1px solid var(--line); }
  .sticky .btn { flex:1; min-height:44px; padding:8px; font-size:14px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* LINE の中で PDF を押したときの説明（lp.js の askLeaveLine） */
.lp-dialog { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(0,0,0,.5); }
.lp-dialog-body { width:100%; max-width:360px; padding:24px 20px 16px; border-radius:14px; background:#fff; color:#333; text-align:center; }
.lp-dialog-body h3 { margin:0 0 12px; font-size:18px; line-height:1.5; }
.lp-dialog-body p { margin:0 0 20px; font-size:15px; line-height:1.8; text-align:left; }
.lp-dialog-body .btn { width:100%; }
.lp-dialog-cancel { display:block; width:100%; margin-top:8px; padding:10px; border:0; background:none; color:#666; font-size:14px; cursor:pointer; }

/* LINE から外のブラウザへ移った直後に PDF のボタンを光らせる（lp.js の arrivedFromLine） */
@keyframes lp-glow { 0%,100% { box-shadow:0 0 0 0 rgba(242,83,124,0); } 50% { box-shadow:0 0 0 8px rgba(242,83,124,.45); } }
.lp-glow { animation:lp-glow 1s ease-in-out 4; }