/* 入口のページ（作戦室の世界観は webmake.css の .hero を使う） */
.lp-top { border-bottom: 2px solid var(--hero-red); box-shadow: 0 1px 0 var(--hero-gold); background: #0a1222; }
.lp-in { max-width: 760px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: baseline; gap: 10px; color: #fff; }
.brand { font-weight: 900; font-size: 20px; letter-spacing: .08em; }
.by { font-size: 12px; color: #b9c6da; }
.lp-main { max-width: 760px; margin: 0 auto; padding: 0 16px 24px; }
.lp-hero { color: #fff; padding: 40px 0 24px; }
.lp-hero .free { display: inline-block; margin: 0 0 14px; background: var(--hero-gold); color: #2b1d00; font-weight: 900; font-size: 13px; letter-spacing: .1em; padding: 3px 14px; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.lp-hero h1 { font-size: clamp(26px, 6.4vw, 40px); line-height: 1.4; margin: 0 0 16px; letter-spacing: .02em; }
.lp-hero .lead-text { color: #d5deeb; font-size: 16px; margin: 0; max-width: 36em; }
.lp-hero br.sp { display: none; }
@media (max-width: 480px) { .lp-hero br.sp { display: inline; } }

.lp-steps { list-style: none; padding: 0; margin: 8px 0 24px; display: grid; gap: 10px; }
.lp-steps li { background: var(--card); border-radius: var(--radius); padding: 14px 16px; box-shadow: 0 10px 28px rgba(0,0,0,.35); position: relative; overflow: hidden; }
.lp-steps li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(var(--hero-red), var(--hero-gold)); }
.lp-steps b { display: block; color: var(--navy); font-size: 16px; }
.lp-steps span { font-size: 14px; color: var(--sub); }

.lp-form { padding: 18px 16px 20px; }
.lp-form h2 { margin: 0 0 4px; font-size: 20px; color: var(--navy); }
.lp-form input[type="url"], .lp-form input[type="email"] { width: 100%; border: 1px solid var(--ans-line); background: var(--ans); border-radius: 10px; padding: 10px 12px; font-size: 16px; }
.agree-text { font-size: 13px; color: var(--sub); margin: 14px 0 6px; line-height: 1.6; }
/* チェックが入るのは、四角と「同意する」の短い文だけ（説明の文を読もうと触って、知らないうちに入らないように） */
.agree { display: inline-flex; gap: 10px; align-items: center; font-size: 15px; font-weight: 700; color: var(--ink); margin: 2px 0 6px; padding: 8px 12px 8px 4px; border-radius: 8px; cursor: pointer; }
.agree input { width: 22px; height: 22px; flex: none; margin: 0; }
#f-hint { margin: 4px 0 0; text-align: center; }
.ts { min-height: 70px; margin: 10px 0 0; }
.lp-form .btn { max-width: none; margin-top: 8px; }
.sent h3 { margin: 4px 0 6px; color: var(--ok); font-size: 18px; }

.lp-faq { color: #fff; margin: 28px 0 0; }
.lp-faq h2 { font-size: 18px; margin: 0 0 8px; }
.lp-faq dl { background: var(--card); color: var(--ink); border-radius: var(--radius); padding: 6px 16px 14px; margin: 0; box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.lp-faq dt { font-weight: 700; margin-top: 12px; }
.lp-faq dd { margin: 2px 0 0; font-size: 15px; color: var(--sub); }
.lp-foot a { color: #d5deeb; }
#go-open { display: block; text-align: center; text-decoration: none; line-height: 48px; padding: 0 20px; margin: 10px 0 8px; max-width: none; }
.link-copy { width: 100%; font-size: 13px; border: 1px solid var(--line); background: #f7f9fb; border-radius: 8px; padding: 8px 10px; }
.ts:empty { min-height: 0; margin: 0; }