/* ===================================================================== Yolo Agency Manager — Agency Landing Page 見本（ネクストクリエイト）忠実版：パステル配色＋丸ゴシック＋スクリプト ※ Google Fonts はテンプレート の で読み込みます。 ===================================================================== */ :root { --pink:#F8B7CB; --pink-deep:#EC7BA5; --pink-soft:#FDE3EC; --lavender:#C4B7E0; --lavender-deep:#8E7CB8; --lavender-soft:#ECE6F5; --cyan:#A8D8E8; --cyan-deep:#5EAFC8; --cyan-soft:#DCEEF5; --mint:#B8DCC4; --peach:#FFCDB5; --ink:#3F354A; --ink-sub:#6E6175; --ink-mute:#9C90A4; --bg:#FBF6FA; --bg-soft:#FFF6F9; --line-green:#06C755; /* 代理店ごとに上書きされるアクセント色（既定はピンク） */ --accent:#F8B7CB; --accent-deep:#EC7BA5; --accent-soft:#FDE3EC; --font-body:"Noto Sans JP","Hiragino Sans",sans-serif; --font-rounded:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN",sans-serif; --font-script:"Pacifico",cursive; --font-handwrite:"Klee One","Hiragino Mincho ProN",serif; --radius:24px; --shadow:0 14px 40px rgba(142,124,184,.16); --shadow-sm:0 6px 18px rgba(142,124,184,.14); --maxw:1080px; } /* reset-ish */ .agency-lp-body { margin:0; } .agency-lp *, .agency-lp *::before, .agency-lp *::after { box-sizing:border-box; } .agency-lp { font-family:var(--font-body); color:var(--ink); background: radial-gradient(1200px 600px at 80% -10%, var(--cyan-soft) 0%, transparent 55%), radial-gradient(1000px 500px at -10% 10%, var(--lavender-soft) 0%, transparent 55%), var(--bg); line-height:1.8; -webkit-font-smoothing:antialiased; overflow-x:hidden; } .agency-lp img { max-width:100%; height:auto; display:block; } .agency-lp a { color:inherit; text-decoration:none; } /* ── shared section scaffolding ── */ .alp-sec { max-width:var(--maxw); margin:0 auto; padding:84px 24px; } .alp-sec-narrow { max-width:780px; margin:0 auto; padding:84px 24px; } .alp-eyebrow { font-family:var(--font-script); font-size:30px; color:var(--accent-deep); text-align:center; margin:0 0 4px; line-height:1; } .alp-ttl { font-family:var(--font-rounded); font-weight:900; font-size:clamp(26px,4.4vw,40px); text-align:center; margin:0 0 14px; letter-spacing:.02em; } .alp-ttl .alp-num { color:var(--accent-deep); font-size:1.35em; margin:0 .08em; } .alp-lead { text-align:center; color:var(--ink-sub); font-size:16px; margin:0 auto 48px; max-width:680px; } /* ══════════════ HEADER ══════════════ */ .alp-header { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86); backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--lavender-soft); } .alp-header-inner { max-width:var(--maxw); margin:0 auto; padding:12px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; } .alp-logo { font-family:var(--font-rounded); font-weight:900; font-size:20px; color:var(--ink); display:flex; align-items:center; gap:10px; } .alp-logo .alp-logo-mark { font-family:var(--font-script); font-size:15px; color:var(--accent-deep); font-weight:400; } .alp-entry-btn { font-family:var(--font-rounded); font-weight:700; background:linear-gradient(135deg,var(--accent),var(--accent-deep)); color:#fff; padding:11px 22px; border-radius:999px; font-size:14px; white-space:nowrap; box-shadow:0 8px 20px var(--shadow-accent); transition:transform .2s, box-shadow .2s; } .alp-entry-btn:hover { transform:translateY(-2px); box-shadow:0 12px 26px var(--shadow-accent-strong); } /* ══════════════ HERO ══════════════ */ .alp-hero { position:relative; overflow:hidden; padding:70px 24px 88px; text-align:center; background: radial-gradient(900px 460px at 78% 8%, var(--cyan-soft) 0%, transparent 60%), radial-gradient(820px 420px at 14% 20%, var(--pink-soft) 0%, transparent 60%), linear-gradient(180deg, var(--bg-soft), var(--bg)); } .alp-hero.has-bg::before { content:""; position:absolute; inset:0; background-image:var(--hero-bg); background-size:cover; background-position:center; opacity:.18; } .alp-hero-inner { position:relative; max-width:860px; margin:0 auto; } .alp-hero-eyebrow { font-family:var(--font-rounded); font-weight:700; letter-spacing:.18em; font-size:12px; color:var(--accent-deep); margin:0 0 18px; } .alp-hero-title { font-family:var(--font-rounded); font-weight:900; font-size:clamp(32px,6.4vw,58px); line-height:1.28; margin:0 0 18px; letter-spacing:.01em; } .alp-hero-title .alp-accent { background:linear-gradient(transparent 62%, var(--accent) 62%); padding:0 .08em; } .alp-hero-sub { font-size:clamp(15px,2.2vw,18px); color:var(--ink-sub); margin:0 0 26px; font-weight:500; } .alp-hero-badges { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:0 0 30px; } .alp-hero-badge { background:#fff; border:2px solid var(--accent-soft); color:var(--ink); font-family:var(--font-rounded); font-weight:700; font-size:14px; padding:10px 18px; border-radius:999px; box-shadow:var(--shadow-sm); } .alp-hero-badge b { color:var(--accent-deep); font-size:1.12em; } .alp-hero-cta { display:inline-flex; flex-direction:column; align-items:center; gap:10px; } .alp-line-btn { display:inline-flex; align-items:center; gap:10px; background:var(--line-green); color:#fff; font-family:var(--font-rounded); font-weight:900; font-size:18px; padding:16px 40px; border-radius:999px; box-shadow:0 12px 28px rgba(6,199,85,.35); transition:transform .2s, box-shadow .2s; } .alp-line-btn:hover { transform:translateY(-2px); box-shadow:0 16px 34px rgba(6,199,85,.45); } .alp-line-btn .alp-arrow { font-size:.9em; } .alp-hero-note { font-size:12.5px; color:var(--ink-mute); margin:0; } /* ══════════════ CATCH (script band) ══════════════ */ .alp-catch { text-align:center; padding:54px 24px; background:linear-gradient(135deg, var(--lavender-soft), var(--pink-soft)); } .alp-catch p { margin:0; font-family:var(--font-rounded); font-weight:900; font-size:clamp(22px,3.6vw,32px); color:var(--ink); } .alp-catch .alp-star { color:var(--accent-deep); margin:0 .4em; font-size:.8em; vertical-align:.1em; } /* ══════════════ STATS ══════════════ */ .alp-stats-sec { padding-top:64px; padding-bottom:64px; } .alp-stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:860px; margin:0 auto; } .alp-stat { background:#fff; border-radius:var(--radius); padding:30px 18px; text-align:center; box-shadow:var(--shadow-sm); border:2px solid var(--accent-soft); } .alp-stat-num { margin:0; font-family:var(--font-rounded); font-weight:900; color:var(--accent-deep); line-height:1; } .alp-stat-figure { font-size:clamp(38px,6vw,54px); } .alp-stat-unit { font-size:.5em; margin-left:.1em; } .alp-stat-label { margin:10px 0 0; font-size:14px; color:var(--ink-sub); font-weight:700; } /* ══════════════ MERIT (cards grid) ══════════════ */ .alp-merit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .alp-merit-card { background:#fff; border-radius:var(--radius); padding:34px 26px; text-align:center; box-shadow:var(--shadow-sm); border:2px solid transparent; transition:transform .25s, box-shadow .25s, border-color .25s; } .alp-merit-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--accent); } .alp-mnum { display:inline-block; font-family:var(--font-script); font-size:22px; color:var(--accent-deep); margin:0 0 8px; line-height:1; } .alp-merit-card h4 { font-family:var(--font-rounded); font-weight:900; font-size:20px; margin:0 0 8px; } .alp-msub { margin:0; font-size:14px; color:var(--ink-sub); } /* ══════════════ SUPPORT ══════════════ */ .alp-support-sec { background:linear-gradient(180deg, var(--cyan-soft), transparent); } .alp-support-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; } .alp-support-card { position:relative; background:#fff; border-radius:var(--radius); padding:28px 28px 28px 34px; box-shadow:var(--shadow-sm); overflow:hidden; } .alp-support-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:8px; background:linear-gradient(180deg,var(--accent),var(--accent-deep)); } .alp-support-card h4 { font-family:var(--font-rounded); font-weight:900; font-size:19px; margin:0 0 8px; display:flex; align-items:center; gap:8px; } .alp-support-card h4::before { content:"♡"; color:var(--accent-deep); } .alp-sdesc { margin:0; font-size:14.5px; color:var(--ink-sub); } /* ══════════════ CREATORS ══════════════ */ .alp-creator-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; } .alp-creator-card { background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .25s, box-shadow .25s; } .alp-creator-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); } .alp-creator-img { aspect-ratio:4/5; background:var(--lavender-soft); } .alp-creator-img img { width:100%; height:100%; object-fit:cover; } .alp-creator-noimg { display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--pink-soft),var(--cyan-soft)); } .alp-creator-noimg::after { content:"No Photo"; color:var(--ink-mute); font-size:13px; } .alp-creator-body { padding:18px 20px 22px; } .alp-crank { display:inline-block; font-family:var(--font-rounded); font-weight:700; font-size:11.5px; color:#fff; background:var(--accent-deep); padding:4px 12px; border-radius:999px; margin:0 0 10px; line-height:1.4; } .alp-cname { font-family:var(--font-rounded); font-weight:900; font-size:20px; margin:0 0 2px; } .alp-chandle { margin:0 0 10px; font-size:13px; color:var(--cyan-deep); font-weight:700; } .alp-cdesc { margin:0; font-size:13.5px; color:var(--ink-sub); } /* ══════════════ MID CTA / FLOW ══════════════ */ .alp-flow-sec { background:linear-gradient(180deg, var(--pink-soft), transparent); } .alp-flow-cta { text-align:center; margin:0 auto 44px; max-width:680px; } .alp-flow-cta .alp-line-btn { margin-top:14px; } .alp-flow-grid { display:flex; align-items:stretch; justify-content:center; gap:8px; flex-wrap:wrap; } .alp-flow-step { flex:1 1 0; min-width:200px; max-width:280px; background:#fff; border-radius:var(--radius); padding:28px 22px; text-align:center; box-shadow:var(--shadow-sm); border:2px solid var(--accent-soft); } .alp-fnum { display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:999px; margin:0 auto 12px; background:linear-gradient(135deg,var(--accent),var(--accent-deep)); color:#fff; font-family:var(--font-rounded); font-weight:900; font-size:14px; line-height:1.1; } .alp-flow-step h4 { font-family:var(--font-rounded); font-weight:900; font-size:18px; margin:0 0 6px; } .alp-fdesc { margin:0; font-size:13.5px; color:var(--ink-sub); } .alp-flow-arrow { display:flex; align-items:center; font-size:28px; color:var(--accent-deep); font-weight:900; } /* ══════════════ FAQ ══════════════ */ .alp-faq-list { display:flex; flex-direction:column; gap:14px; } .alp-faq-list details { background:#fff; border-radius:18px; box-shadow:var(--shadow-sm); border:2px solid var(--accent-soft); overflow:hidden; } .alp-faq-list summary { list-style:none; cursor:pointer; padding:18px 52px 18px 54px; position:relative; font-family:var(--font-rounded); font-weight:700; font-size:16px; color:var(--ink); } .alp-faq-list summary::-webkit-details-marker { display:none; } .alp-faq-list summary::before { content:"Q"; position:absolute; left:18px; top:50%; transform:translateY(-50%); width:26px; height:26px; border-radius:999px; background:var(--accent-deep); color:#fff; font-family:var(--font-rounded); font-weight:900; font-size:14px; display:flex; align-items:center; justify-content:center; } .alp-faq-list summary::after { content:"＋"; position:absolute; right:20px; top:50%; transform:translateY(-50%); color:var(--accent-deep); font-size:18px; transition:transform .2s; } .alp-faq-list details[open] summary::after { content:"−"; } .alp-faq-list details > p { margin:0; padding:0 22px 20px 54px; color:var(--ink-sub); font-size:14.5px; } /* ══════════════ Free content ══════════════ */ .alp-freecontent-inner { max-width:780px; margin:0 auto; } .alp-freecontent-inner h2 { font-family:var(--font-rounded); font-weight:900; } /* ══════════════ Bottom CTA box ══════════════ */ .alp-cta-box { max-width:880px; margin:0 auto; text-align:center; background:linear-gradient(135deg, var(--accent), var(--accent-deep)); border-radius:32px; padding:54px 28px; color:#fff; box-shadow:0 20px 50px var(--shadow-accent); } .alp-cta-box h2 { font-family:var(--font-rounded); font-weight:900; font-size:clamp(24px,3.6vw,32px); margin:0 0 10px; } .alp-cta-sub { margin:0 0 24px; font-size:15px; opacity:.95; } .alp-cta-box .alp-line-btn { background:#fff; color:var(--line-green); } /* ══════════════ FOOTER ══════════════ */ .alp-ft { background:var(--ink); color:#fff; padding:48px 24px 30px; text-align:center; } .alp-ft-inner { max-width:var(--maxw); margin:0 auto; } .alp-ft-company { font-family:var(--font-rounded); font-weight:900; font-size:18px; margin:0 0 6px; } .alp-ft-sns { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin:18px 0; } .alp-ft-sns a { border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:8px 18px; font-size:13px; font-weight:700; transition:background .2s; } .alp-ft-sns a:hover { background:rgba(255,255,255,.12); } .alp-ft-links { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 22px; margin:14px 0; padding:0; list-style:none; } .alp-ft-links a { font-size:13px; color:rgba(255,255,255,.78); } .alp-ft-links a:hover { color:#fff; text-decoration:underline; } .alp-ft-copy { margin:18px 0 0; font-size:12px; color:rgba(255,255,255,.55); } /* ══════════════ Responsive ══════════════ */ @media (max-width:920px) { .alp-merit-grid, .alp-creator-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:768px) { .alp-sec, .alp-sec-narrow { padding:60px 18px; } .alp-stats-grid { grid-template-columns:1fr; max-width:360px; } .alp-support-grid { grid-template-columns:1fr; } .alp-flow-arrow { transform:rotate(90deg); } .alp-flow-step { max-width:none; } } @media (max-width:560px) { .alp-merit-grid, .alp-creator-grid { grid-template-columns:1fr; } .alp-header-inner { padding:10px 14px; } .alp-logo { font-size:17px; } .alp-entry-btn { padding:9px 16px; font-size:13px; } }