/* Morethan — Web制作LP (page ID 1245) 固有CSS */

:root{ --navy:#1b2631; --navy2:#253646; --bg:#f5f5f5; --white:#fff; --gold:#c9a45c; --text:#1f2933; --muted:#667085; }
.lp-wrap{ font-family: inherit; color:var(--text); background:var(--bg); line-height:1.8; overflow:hidden; }
.lp-section{ padding:80px 20px; }
.lp-inner{ max-width:1120px; margin:0 auto; }
.lp-badge{ display:inline-block; background:rgba(201,164,92,.15); color:var(--gold); border:1px solid rgba(201,164,92,.45); padding:6px 14px; border-radius:999px; font-size:14px; font-weight:700; }
.lp-title{ font-size:38px; line-height:1.35; margin:16px 0 20px; color:var(--navy); font-weight:800; }
.lp-lead{ font-size:18px; color:var(--muted); margin-bottom:28px; }
.lp-btns{ display:flex; gap:14px; flex-wrap:wrap; }
.lp-btn{ display:inline-flex; align-items:center; justify-content:center; padding:15px 28px; border-radius:999px; text-decoration:none; font-weight:800; transition:.2s; }
.lp-btn-main{ background:var(--navy); color:#fff; }
.lp-btn-sub{ background:#fff; color:var(--navy); border:1px solid var(--navy); }
.lp-btn:hover{ transform:translateY(-2px); opacity:.9; }
.lp-hero{ background:linear-gradient(135deg,#fff 0%,#f7f5f0 55%,#eef1f3 100%); padding:70px 20px 90px; }
.lp-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.lp-hero h1{ font-size:48px; line-height:1.25; color:var(--navy); margin:18px 0; font-weight:900; }
.lp-hero h1 span{ color:var(--gold); }
.lp-hero-text{ font-size:19px; color:#475467; margin-bottom:28px; }
.lp-proof{ display:flex; flex-wrap:wrap; gap:10px; margin:24px 0; }
.lp-proof span{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:9px 13px; font-weight:700; font-size:14px; }
.lp-hero-img{ position:relative; }
.lp-hero-img img{ width:100%; border-radius:28px; box-shadow:0 24px 60px rgba(27,38,49,.18); display:block; }
.lp-message{ position:absolute; left:-20px; bottom:28px; background:#fff; padding:18px 20px; border-radius:18px; box-shadow:0 15px 40px rgba(0,0,0,.12); max-width:280px; font-weight:800; color:var(--navy); }
.lp-center{text-align:center}
.lp-subtitle{ font-size:32px; line-height:1.45; color:var(--navy); margin:12px 0 40px; font-weight:900; }
.lp-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.lp-card{ background:#fff; border-radius:22px; padding:28px; box-shadow:0 10px 30px rgba(27,38,49,.07); border:1px solid #eef0f2; }
.lp-card h3{ color:var(--navy); font-size:21px; margin:0 0 10px; }
.lp-card p{margin:0;color:#56616f}
.lp-worry{ background:#fff; }
.lp-checks{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; max-width:900px; margin:0 auto; }
.lp-check{ background:var(--bg); padding:18px 20px; border-radius:14px; font-weight:700; }
.lp-check:before{ content:"✓"; color:var(--gold); font-weight:900; margin-right:8px; }
.lp-offer{ background:var(--navy); color:#fff; }
.lp-offer .lp-subtitle, .lp-offer .lp-title{color:#fff}
.lp-offer .lp-lead{color:#d0d5dd}
.lp-offer-box{ background:#fff; color:var(--navy); border-radius:28px; padding:36px; display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center; }
.lp-offer-list{ margin:0; padding-left:20px; font-weight:700; }
.lp-benefit-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.lp-benefit{ background:#fff; padding:24px; border-radius:20px; border-top:5px solid var(--gold); }
.lp-benefit strong{ display:block; color:var(--navy); font-size:20px; margin-bottom:8px; }
.lp-plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.lp-plan{ background:#fff; border-radius:24px; padding:30px; border:1px solid #e5e7eb; }
.lp-plan.recommend{ border:3px solid var(--gold); transform:translateY(-8px); }
.lp-price{ font-size:34px; font-weight:900; color:var(--navy); }
.lp-price small{ font-size:15px; color:var(--muted); }
.lp-flow{ display:grid; gap:16px; max-width:860px; margin:0 auto; }
.lp-step{ display:grid; grid-template-columns:90px 1fr; gap:20px; align-items:start; background:#fff; border-radius:18px; padding:22px; }
.lp-step-num{ background:var(--navy); color:#fff; border-radius:999px; padding:8px 12px; text-align:center; font-weight:900; }
.lp-cta{ background:linear-gradient(135deg,var(--navy),var(--navy2)); color:#fff; text-align:center; }
.lp-cta h2{ font-size:36px; line-height:1.4; margin:0 0 18px; }
.lp-cta p{ color:#d0d5dd; margin-bottom:26px; }
.lp-faq{ background:#fff; }
.lp-faq-item{ background:var(--bg); border-radius:16px; padding:22px; margin-bottom:14px; }
.lp-faq-item strong{ color:var(--navy); display:block; margin-bottom:8px; }
.lp-fixed-cta{ position:fixed; left:0; right:0; bottom:0; background:rgba(27,38,49,.96); padding:10px 14px; z-index:9999; display:none; }
.lp-fixed-cta a{ display:block; text-align:center; background:#fff; color:var(--navy); padding:12px; border-radius:999px; font-weight:900; text-decoration:none; }
@media(max-width:900px){ .lp-hero-grid, .lp-offer-box, .lp-cards, .lp-benefit-grid, .lp-plans{ grid-template-columns:1fr; } .lp-hero h1{font-size:34px} .lp-title,.lp-subtitle{font-size:28px} .lp-section{padding:56px 18px} .lp-checks{grid-template-columns:1fr} .lp-message{ position:static; margin-top:14px; max-width:none; } .lp-plan.recommend{transform:none} .lp-fixed-cta{display:block} }
.mt-line-banner{ width:100%; margin:40px auto; }
.mt-line-banner a{ position:relative; display:flex; align-items:center; justify-content:space-between; width:100%; min-height:82px; background:#1b2631; color:#fff; text-decoration:none; border-radius:12px; overflow:hidden; padding:0 30px; transition:.3s; }
.mt-line-banner a::before{ content:""; position:absolute; top:0; right:70px; width:90px; height:100%; background:rgba(255,255,255,.08); transform:skewX(-35deg); }
.mt-line-banner a:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.15); }
.mt-line-banner__text{ position:relative; z-index:2; font-size:24px; font-weight:700; letter-spacing:.03em; }
.mt-line-banner__arrow{ position:relative; z-index:2; width:42px; height:42px; display:flex; align-items:center; justify-content:center; border:2px solid rgba(255,255,255,.6); border-radius:50%; font-size:20px; font-weight:700; }
@media(max-width:768px){ .mt-line-banner a{ min-height:70px; padding:0 20px; } .mt-line-banner__text{ font-size:18px; } .mt-line-banner__arrow{ width:36px; height:36px; font-size:16px; } .mt-line-banner a::before{ right:50px; width:70px; } }