/* ============================================== LISPO owners LP - Styles ============================================== */ :root { /* Brand Primary */ --color-primary: #1B6C58; --color-primary-deep: #112B23; --color-primary-darkest: #0F332A; /* Base */ --color-bg: #FFFFFF; --color-bg-soft: #F7F5F0; /* Text */ --color-text-primary: #112B23; --color-text-secondary: #334155; --color-text-muted: #475569; --color-text-caption: #64748B; /* Dividers */ --color-border: #E2E8F0; /* Accents */ --color-accent-mint: #A7F3D0; --color-accent-yellow: #FEF08A; --color-accent-rose: #E11D48; /* Fonts */ --font-jp: 'Noto Sans JP', system-ui, sans-serif; --font-en: 'Inter', system-ui, sans-serif; --font-display: 'Fraunces', 'Playfair Display', serif; /* Shadows */ --shadow-card: 0 2px 20px rgba(17, 43, 35, 0.06); --shadow-image: 0 40px 80px rgba(17, 43, 35, 0.18); --shadow-cta-hover: 0 12px 32px rgba(254, 240, 138, 0.3); /* Layout */ --max-width: 1200px; } /* Reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-jp); color: var(--color-text-primary); background: var(--color-bg); line-height: 1.8; font-weight: 400; letter-spacing: 0.02em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } /* Container */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 32px; } /* Reveal animation base Default = fully visible (fail-safe: works even if JS is disabled/blocked). JS opts-in by adding .js-reveal-ready to , which then hides .reveal elements until they receive .is-visible via IntersectionObserver. */ .reveal { opacity: 1; transform: none; transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1); } .js-reveal-ready .reveal { opacity: 0; transform: translateY(20px); } .js-reveal-ready .reveal.is-visible { opacity: 1; transform: translateY(0); } /* ========================================= Header ========================================= */ .site-header { position: sticky; top: 0; z-index: 50; width: 100%; height: 72px; background: rgba(255, 255, 255, 0); border-bottom: 1px solid transparent; transition: background 250ms ease, border-color 250ms ease, backdrop-filter 250ms ease; } .site-header.is-scrolled { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); } .header-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 32px; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .logo { font-weight: 900; font-size: 20px; letter-spacing: -0.01em; color: var(--color-primary-deep); display: flex; align-items: center; gap: 6px; } .logo-mark { display: inline-block; width: 10px; height: 10px; border-radius: 999px; background: var(--color-primary); } .nav { display: flex; align-items: center; gap: 32px; } .nav-link { font-size: 15px; font-weight: 500; color: var(--color-text-secondary); transition: color 200ms ease; } .nav-link:hover { color: var(--color-primary); } .btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--color-primary); color: #fff; font-weight: 700; padding: 12px 22px; border-radius: 8px; font-size: 14px; transition: background 200ms ease, transform 200ms ease; } .btn-primary:hover { background: var(--color-primary-deep); } .btn-primary .arrow { transition: transform 200ms ease; } .btn-primary:hover .arrow { transform: translateX(3px); } .mobile-menu-toggle { display: none; } @media (max-width: 900px) { .nav { display: none; } .header-cta { padding: 10px 16px; font-size: 13px; } } /* ========================================= Section 1 - Hero ========================================= */ .hero { position: relative; padding: 96px 0 120px; overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: center; } .hero-left { position: relative; z-index: 2; } .trust-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--color-accent-mint); color: var(--color-primary-deep); padding: 10px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 700; margin-bottom: 28px; letter-spacing: -0.01em; } .trust-badge .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--color-primary); } .hero h1 { font-family: var(--font-jp); font-weight: 900; font-size: clamp(32px, 4vw, 52px); line-height: 1.3; letter-spacing: -0.04em; color: var(--color-primary-deep); margin-bottom: 24px; text-wrap: balance; } .hero h1 .accent { color: var(--color-primary); } .hero-sub { font-weight: 700; font-size: clamp(18px, 2vw, 24px); color: var(--color-primary); line-height: 1.6; margin-bottom: 20px; } .hero-desc { font-size: 16px; line-height: 1.9; color: var(--color-text-secondary); max-width: 540px; margin-bottom: 36px; } .hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; } .btn-cta-primary { display: inline-flex; align-items: center; gap: 10px; background: var(--color-primary); color: #fff; font-weight: 700; font-size: 16px; padding: 18px 32px; border-radius: 10px; transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease; box-shadow: 0 6px 20px rgba(27, 108, 88, 0.25); } .btn-cta-primary:hover { background: var(--color-primary-deep); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(27, 108, 88, 0.35); } .btn-cta-primary:hover .arrow { transform: translateX(3px); } .btn-cta-primary .arrow { transition: transform 200ms ease; } .btn-cta-ghost { display: inline-flex; align-items: center; gap: 10px; background: transparent; color: var(--color-primary-deep); font-weight: 700; font-size: 16px; padding: 16px 30px; border-radius: 10px; border: 1.5px solid var(--color-primary-deep); transition: background 200ms ease, color 200ms ease; } .btn-cta-ghost:hover { background: var(--color-primary-deep); color: #fff; } .hero-trust-bar { display: flex; gap: 32px; flex-wrap: wrap; } .trust-item { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--color-primary-deep); } .trust-item svg { width: 22px; height: 22px; stroke: var(--color-primary); } /* Hero Right - App image */ .hero-right { position: relative; display: flex; justify-content: center; align-items: center; min-height: 620px; } .hero-blob { position: absolute; width: 480px; height: 480px; border-radius: 50%; background: var(--color-primary); opacity: 0.18; filter: blur(80px); z-index: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); } .hero-deco-circle { position: absolute; width: 60px; height: 60px; border-radius: 50%; background: var(--color-accent-mint); top: 40px; right: 20px; z-index: 1; } .hero-deco-line { position: absolute; width: 4px; height: 80px; background: var(--color-accent-yellow); bottom: 80px; left: 30px; z-index: 1; border-radius: 4px; } .hero-app-image { position: relative; z-index: 2; max-width: 360px; width: 100%; filter: drop-shadow(0 40px 80px rgba(17, 43, 35, 0.22)); animation: float 4s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* ========================================= Section 2 - Reasons ========================================= */ .reasons { padding: 120px 0; background: #fff; } .section-head { text-align: center; margin-bottom: 64px; } .section-label { display: inline-block; font-family: var(--font-en); font-weight: 600; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 16px; } .section-title { font-family: var(--font-jp); font-weight: 900; font-size: clamp(30px, 3.5vw, 44px); line-height: 1.4; letter-spacing: -0.01em; color: var(--color-primary-deep); margin-bottom: 20px; } .section-lead { font-size: 17px; color: var(--color-text-muted); line-height: 1.8; max-width: 680px; margin: 0 auto; } .reason-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .reason-card { background: #fff; border: 1px solid var(--color-border); border-radius: 16px; padding: 32px; transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; } .reason-card:hover { border-color: var(--color-primary); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(17, 43, 35, 0.08); } .reason-label { display: block; font-family: var(--font-en); font-weight: 600; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 20px; } .reason-icon { width: 48px; height: 48px; stroke: var(--color-primary); stroke-width: 1.5; fill: none; margin-bottom: 20px; } .reason-title { font-family: var(--font-jp); font-weight: 700; font-size: 18px; line-height: 1.55; color: var(--color-primary-deep); margin-bottom: 16px; letter-spacing: -0.02em; text-wrap: balance; } .reason-body { font-size: 14px; line-height: 1.8; color: var(--color-text-muted); } /* ========================================= Bridge - Visual Bridge ========================================= */ .bridge { background: var(--color-bg-soft); padding: 100px 0; } .bridge-head { text-align: center; margin-bottom: 48px; } .bridge-head .section-label { color: var(--color-primary); } .bridge-title { font-family: var(--font-jp); font-weight: 700; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.5; color: var(--color-primary-deep); margin-bottom: 12px; } .bridge-desc { font-size: 15px; color: var(--color-text-muted); } .bridge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; max-width: 900px; margin: 0 auto; } .bridge-photo { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 12px 40px rgba(17, 43, 35, 0.1); } .bridge-photo img { width: 100%; height: 100%; object-fit: cover; } .photo-caption { position: absolute; bottom: 20px; left: 20px; right: 20px; max-width: 320px; background: rgba(17, 43, 35, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 14px 18px; border-radius: 12px; } .photo-caption .cap-label { display: block; font-family: var(--font-en); font-weight: 600; font-size: 11px; letter-spacing: 0.2em; color: var(--color-accent-mint); margin-bottom: 4px; } .photo-caption .cap-text { font-size: 14px; font-weight: 500; color: #fff; line-height: 1.5; } /* ========================================= Section 3 - Revenue Simulation ========================================= */ .revenue { position: relative; background: var(--color-primary-deep); padding: 140px 0; color: #fff; overflow: hidden; } .revenue::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 20%, rgba(27, 108, 88, 0.3), transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(167, 243, 208, 0.05), transparent 60%); pointer-events: none; } .revenue .container { position: relative; z-index: 2; } .revenue-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .revenue-left .section-label { color: var(--color-accent-mint); } .revenue-title { font-family: var(--font-jp); font-weight: 900; font-size: clamp(32px, 4vw, 52px); line-height: 1.3; color: #fff; letter-spacing: -0.02em; margin-bottom: 24px; } .revenue-note { font-size: 14px; line-height: 1.8; color: rgba(255, 255, 255, 0.6); max-width: 520px; } .revenue-right { display: flex; flex-direction: column; gap: 32px; } .big-number { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-display); font-weight: 700; color: var(--color-accent-yellow); line-height: 1; } .big-number .yen { font-size: clamp(48px, 6vw, 80px); flex-shrink: 0; } .big-number .num { font-size: clamp(72px, 10vw, 128px); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; display: inline-block; min-width: 5.4ch; text-align: left; } .big-number-label { margin-top: 12px; font-size: 16px; color: var(--color-accent-mint); font-weight: 500; } .calc-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 28px 32px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .calc-title { font-size: 13px; color: rgba(255, 255, 255, 0.7); margin-bottom: 18px; letter-spacing: 0.05em; } .calc-row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; font-size: 15px; color: rgba(255, 255, 255, 0.85); } .calc-row .val { font-family: var(--font-display); font-weight: 700; font-size: 17px; } .calc-row.minus .val { color: var(--color-accent-rose); } .calc-divider { border-top: 1px dashed rgba(255, 255, 255, 0.2); margin: 8px 0; } .calc-row.subtotal .val { color: #fff; font-size: 20px; } .calc-row.total { padding-top: 12px; } .calc-row.total .label { color: #fff; font-weight: 700; font-size: 16px; } .calc-row.total .val { color: var(--color-accent-yellow); font-size: 24px; } /* ========================================= Section 4 - Case Study ========================================= */ .case-study { padding: 120px 0; background: #fff; } .case-grid { display: grid; grid-template-columns: 45% 55%; gap: 64px; align-items: center; } .case-image { border-radius: 20px; overflow: hidden; aspect-ratio: 3/4; box-shadow: 0 20px 60px rgba(17, 43, 35, 0.12); } .case-image img { width: 100%; height: 100%; object-fit: cover; } .case-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--color-bg-soft); color: var(--color-primary-deep); font-family: var(--font-en); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; padding: 6px 14px; border-radius: 999px; margin-bottom: 16px; } .case-sublabel { font-size: 13px; color: var(--color-text-muted); margin-bottom: 4px; } .case-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 3.5vw, 44px); color: var(--color-primary-deep); line-height: 1.2; margin-bottom: 32px; letter-spacing: -0.01em; } .ba-card { padding: 24px; border-radius: 12px; margin-bottom: 16px; } .ba-card.before { background: var(--color-bg-soft); } .ba-card.after { background: var(--color-accent-mint); padding: 28px; border-left: 4px solid var(--color-primary); } .ba-label { display: block; font-family: var(--font-en); font-weight: 700; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 10px; } .ba-card.after .ba-label { color: var(--color-primary-darkest); font-size: 13px; } .ba-body { font-size: 15px; line-height: 1.8; color: var(--color-text-secondary); } .ba-card.after .ba-body { color: var(--color-primary-deep); font-weight: 600; font-size: 17px; line-height: 1.85; } /* ========================================= Section 5 - Steps ========================================= */ .steps { padding: 120px 0; background: var(--color-bg-soft); position: relative; } .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; } .step-card { background: #fff; border-radius: 20px; padding: 40px 32px; box-shadow: var(--shadow-card); position: relative; transition: transform 200ms ease, box-shadow 200ms ease; } .step-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(17, 43, 35, 0.1); } .step-num { font-family: var(--font-display); font-weight: 700; font-size: 88px; line-height: 1; color: var(--color-primary); opacity: 0.85; margin-bottom: 12px; letter-spacing: -0.02em; } .step-label { display: block; font-family: var(--font-en); font-weight: 600; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 12px; } .step-title { font-family: var(--font-jp); font-weight: 700; font-size: 20px; line-height: 1.5; color: var(--color-primary-deep); margin-bottom: 14px; letter-spacing: -0.01em; } .step-body { font-size: 14px; line-height: 1.8; color: var(--color-text-muted); margin-bottom: 20px; } .step-visual { width: 100%; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--color-bg-soft); overflow: hidden; margin-top: 8px; } .step-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; } .step-card:hover .step-visual img { transform: scale(1.03); } /* Step connector line */ .steps-grid::before { content: ''; position: absolute; top: 88px; left: 12%; right: 12%; border-top: 2px dashed var(--color-primary); opacity: 0.25; z-index: 0; pointer-events: none; } .step-card { position: relative; z-index: 1; } /* ========================================= Section 6 - Final CTA ========================================= */ .final-cta { position: relative; background: var(--color-primary-deep); color: #fff; padding: 140px 0; text-align: center; overflow: hidden; } .final-cta .container { position: relative; z-index: 2; max-width: 800px; } .backdrop-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--font-display); font-weight: 700; font-size: clamp(200px, 30vw, 400px); color: rgba(255, 255, 255, 0.035); z-index: 0; white-space: nowrap; letter-spacing: -0.05em; pointer-events: none; user-select: none; } .final-cta .section-label { color: var(--color-accent-mint); } .final-cta h2 { font-family: var(--font-jp); font-weight: 900; font-size: clamp(28px, 3.5vw, 44px); line-height: 1.4; color: #fff; margin: 12px 0 20px; letter-spacing: -0.02em; } .final-cta h2 .accent-yellow { color: var(--color-accent-yellow); } .final-cta .cta-lead { font-size: 16px; line-height: 1.9; color: rgba(255, 255, 255, 0.8); margin-bottom: 36px; text-align: center; } /* 3 relief points on final CTA */ .cta-points { list-style: none; display: grid; gap: 14px; margin: 0 auto 40px; padding: 0; max-width: 640px; text-align: left; } .cta-points li { display: flex; gap: 18px; align-items: flex-start; padding: 20px 24px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .cta-point-num { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--color-accent-yellow); line-height: 1; flex-shrink: 0; padding-top: 2px; min-width: 32px; } .cta-point-title { font-weight: 700; font-size: 15.5px; color: #fff; line-height: 1.55; margin-bottom: 4px; letter-spacing: -0.01em; } .cta-point-desc { font-size: 13.5px; color: rgba(255, 255, 255, 0.65); line-height: 1.7; } .btn-cta-huge { display: inline-flex; align-items: center; gap: 12px; background: var(--color-accent-yellow); color: var(--color-primary-deep); font-weight: 700; font-size: 18px; padding: 22px 48px; border-radius: 12px; transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease; } .btn-cta-huge:hover { background: #FDE047; transform: translateY(-2px); box-shadow: var(--shadow-cta-hover); } .btn-cta-huge:hover .arrow { transform: translateX(3px); } .btn-cta-huge .arrow { transition: transform 200ms ease; } .cta-note { margin-top: 16px; font-size: 13px; color: rgba(255, 255, 255, 0.6); } /* ========================================= Footer ========================================= */ .site-footer { background: var(--color-primary-darkest); color: rgba(255, 255, 255, 0.8); padding: 64px 0 32px; } .footer-top { display: grid; grid-template-columns: 1fr auto; gap: 48px; padding-bottom: 32px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 24px; } .footer-brand .logo { color: #fff; margin-bottom: 12px; } .footer-brand p { font-size: 14px; color: rgba(255, 255, 255, 0.6); line-height: 1.7; max-width: 380px; } .footer-links { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; } .footer-links a { font-size: 14px; color: rgba(255, 255, 255, 0.7); transition: color 200ms ease; } .footer-links a:hover { color: #fff; } .footer-copy { font-size: 12px; color: rgba(255, 255, 255, 0.4); } /* ========================================= Responsive ========================================= */ @media (max-width: 1024px) { .hero-grid { grid-template-columns: 1fr; gap: 48px; } .hero-right { min-height: 500px; } .reason-grid { grid-template-columns: repeat(2, 1fr); } .revenue-grid { grid-template-columns: 1fr; gap: 48px; } /* On mobile, image comes AFTER the content (below the AFTER card) */ .case-grid { display: flex; flex-direction: column; gap: 32px; } .case-content { order: 1; } .case-image { order: 2; max-width: 480px; aspect-ratio: 4/3; margin: 0 auto; } .bridge-grid { grid-template-columns: 1fr; } .steps-grid { grid-template-columns: 1fr; gap: 20px; } .steps-grid::before { display: none; } } @media (max-width: 768px) { .container { padding: 0 20px; } .hero { padding: 40px 0 80px; } .hero h1 { font-size: 40px; } .hero-right { min-height: 420px; } .hero-app-image { max-width: 280px; } .hero-blob { width: 320px; height: 320px; } .reasons, .case-study, .steps, .bridge { padding: 80px 0; } .revenue, .final-cta { padding: 100px 0; } .reason-grid { grid-template-columns: 1fr; } .revenue-grid { gap: 40px; } .footer-top { grid-template-columns: 1fr; } .footer-links { justify-content: flex-start; } .site-header { height: 60px; } .header-inner { padding: 0 20px; } .logo { font-size: 17px; } .hero-ctas .btn-cta-primary, .hero-ctas .btn-cta-ghost { width: 100%; justify-content: center; } /* Compact 3 Steps on mobile — shrink big number, padding, visual */ .steps { padding: 60px 0; } .steps-grid { gap: 14px; } .step-card { padding: 24px 22px; border-radius: 16px; } .step-num { font-size: 44px; margin-bottom: 4px; opacity: 0.75; position: absolute; top: 20px; right: 22px; margin: 0; } .step-label { margin-bottom: 8px; font-size: 10px; } .step-title { font-size: 17px; margin-bottom: 10px; padding-right: 60px; } .step-body { font-size: 13.5px; line-height: 1.75; margin-bottom: 14px; } .step-visual { aspect-ratio: 16/9; border-radius: 10px; margin-top: 0; } /* Final CTA — compact on mobile */ .cta-points li { padding: 16px 18px; gap: 14px; } .cta-point-num { font-size: 20px; min-width: 26px; } .cta-point-title { font-size: 14.5px; } .cta-point-desc { font-size: 12.5px; } .final-cta .cta-lead { font-size: 15px; margin-bottom: 28px; } } @media (max-width: 480px) { .hero h1 { font-size: 34px; } .revenue-title { font-size: 28px; } .big-number .num { font-size: 64px; } .big-number .yen { font-size: 40px; } }