/* Mobile overrides: relocate CTA to bottom and compact masthead/issue */ @media (max-width: 768px) { /* Bottom-fixed CTA bar */ .cta-area { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(10px); border-top: 1px solid rgba(255, 255, 255, 0.15); z-index: 200; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 8px; } .cta-left { display: flex; flex-direction: column; gap: 8px; } .cta-right { display: flex; } .taisho-cta { width: 100%; justify-content: center; transform: none; } /* Lift stats higher above CTA (mobile only) */ .bottom-stats { bottom: calc(280px + env(safe-area-inset-bottom, 0px)); } .bottom-stats .rf-stats { padding: 6px 10px; } .bottom-stats .rf-stat { font-size: 11px; } /* Compact masthead and issue badge */ .modern-landing-page.manga-style .masthead-vertical { padding: 6px 6px; border-width: 2px; } .modern-landing-page.manga-style .masthead-vertical .jp { font-size: 20px; } .modern-landing-page.manga-style .masthead-vertical .en { font-size: 8px; letter-spacing: 0.5px; } .modern-landing-page.manga-style .issue-badge { padding: 3px 7px; font-size: 10px; gap: 6px; } .modern-landing-page.manga-style .issue-badge .led-heart { width: 6px; height: 6px; margin-right: 6px; } .modern-landing-page.manga-style .issue-badge .led-heart::before, .modern-landing-page.manga-style .issue-badge .led-heart::after { width: 6px; height: 6px; } .modern-landing-page.manga-style .issue-badge .led-heart::before { top: -3px; } .modern-landing-page.manga-style .issue-badge .led-heart::after { left: 3px; } .makima-logo { padding: 14px; } .makima-inline-icon { width: 16px; height: 16px; margin-left: 6px; } .makima-list { gap: 4px; } .makima-list li { font-size: 12px; line-height: 1.45; } /* ================== Professional Landing Page – Mobile ================== */ /* Compact header */ .pro-header-content { padding: 0.45rem 1rem; } .pro-company-name { font-size: 0.85rem; letter-spacing: 0.12em; } .pro-crane-logo { height: 28px; } /* Hide center heart on small screens to save space */ .pro-header-center { display: none; } /* Full-width nav buttons */ .pro-header-nav { gap: 0.15rem; } .pro-nav-link { font-size: 0.7rem; padding: 0.3rem 0.5rem; } .pro-nav-login { margin-left: 0.25rem; } /* Hero – reduce heading size and padding */ .pro-hero { min-height: 85vh; padding: 5rem 1.25rem 3rem; } .pro-hero-headline { font-size: clamp(1.4rem, 5.5vw, 2rem); } .pro-hero-sub { font-size: 0.9rem; margin-bottom: 2rem; } .pro-hero-tagline-jp { font-size: 0.75rem; letter-spacing: 0.35em; } .pro-hero-cta { flex-direction: column; align-items: stretch; } .pro-btn-primary, .pro-btn-secondary { width: 100%; text-align: center; justify-content: center; } /* Stack cards to single column */ .pro-content-grid { grid-template-columns: 1fr; padding: 0 1rem 3rem; gap: 1.5rem; } .pro-card-header { padding: 1rem 1.25rem 0.6rem; } .pro-card-body { padding: 0.6rem 1.25rem 1.25rem; } .pro-card-title { font-size: 1rem; } .pro-card-subtitle { font-size: 0.88rem; } .pro-card-text { font-size: 0.8rem; } .pro-makima-logo { width: 48px; height: 48px; } /* Footer compact */ .pro-footer { padding: 1.25rem 1rem; } .pro-footer-inner { font-size: 0.7rem; } }