/* ============================================ Universal responsive shim for Claude Design samples 2026-05-20: 10 sample sites were authored desktop-only. This file is loaded last in each and provides aggressive mobile-friendly overrides without rewriting each site's bespoke CSS. ============================================ */ html, body { overflow-x: hidden; -webkit-text-size-adjust: 100%; } /* ─── Clinic samples: keep faces / human upper-body visible ─── */ .hero-photo, .greeting-photo, .topic-thumb, .recruit-photo { background-size: cover !important; } .hero-photo { background-position: 50% 40% !important; } /* Doctor portrait: aspect-ratio 3/4 (元) は天井が出すぎ。1/1 に近づけて頭上の余白を切る */ .greeting-photo { aspect-ratio: 1 / 1 !important; background-position: 50% 35% !important; } .topic-thumb, .recruit-photo { background-position: 50% 30% !important; } /* Generic safety: 顔っぽい alt/data 持つ img は object-position 上寄せ */ img[alt*="先生"], img[alt*="ドクター"], img[alt*="院長"], img[alt*="スタッフ"], img[alt*="医師"], img[data-face], .doctor-img, .staff-photo { object-fit: cover !important; object-position: 50% 30% !important; } img, video, svg { max-width: 100%; height: auto; } @media (max-width: 900px) { html, body { max-width: 100vw !important; overflow-x: hidden !important; } /* Prevent absurd hero/section heights */ [class*="hero"], section.hero, .hero, [class*="-hero"] { min-height: 60vh !important; height: auto !important; padding-left: 20px !important; padding-right: 20px !important; } /* Common containers */ section, main, header, footer, [class*="container"], [class*="section"], [class*="wrap"] { padding-left: 20px !important; padding-right: 20px !important; max-width: 100% !important; box-sizing: border-box !important; } /* Collapse multi-column grids to single column */ [style*="grid-template-columns"]:not([style*="1fr"]), [class*="grid"]:not(.no-shim) { grid-template-columns: 1fr !important; gap: 1.2rem !important; } /* Force flex to wrap */ [style*="display: flex"]:not([style*="flex-wrap"]), [style*="display:flex"]:not([style*="flex-wrap"]), [class*="flex"]:not(.no-shim) { flex-wrap: wrap !important; } /* Typography scale down */ h1, [class*="hero-title"], [class*="display-title"], [class*="page-title"] { font-size: clamp(28px, 8vw, 44px) !important; line-height: 1.18 !important; letter-spacing: 0.04em !important; } h2, [class*="section-title"] { font-size: clamp(22px, 6vw, 32px) !important; line-height: 1.3 !important; } h3 { font-size: clamp(18px, 5vw, 24px) !important; } body, p, li { font-size: 15px !important; line-height: 1.7 !important; } /* Tap targets */ a, button, [role="button"] { min-height: 44px; } /* Wide elements get reigned in */ table { display: block !important; overflow-x: auto !important; max-width: 100% !important; } pre { overflow-x: auto !important; max-width: 100% !important; } /* Vertical text → horizontal on mobile (common Japanese-design pattern) */ [style*="writing-mode"], [style*="vertical-rl"] { writing-mode: horizontal-tb !important; } /* Hide common decorative-only elements that break on mobile */ [class*="hero-dots"], [class*="scroll-ind"], [class*="scroll-indicator"], [class*="cursor-follow"], [class*="custom-cursor"] { display: none !important; } /* Nav: stack and shrink */ nav, [class*="nav"]:not(.no-shim), header [class*="links"] { flex-wrap: wrap !important; gap: 0.5rem !important; } /* Tweaks panels often pinned right — hide */ [class*="tweaks"], [class*="Tweaks"] { display: none !important; } /* Side-margin big numbers/decorations */ [class*="side-num"], [class*="frame-side"] { display: none !important; } } @media (max-width: 480px) { /* Even tighter on phones */ [class*="hero"] { padding-left: 16px !important; padding-right: 16px !important; } section, main { padding-left: 16px !important; padding-right: 16px !important; } h1, [class*="hero-title"] { font-size: clamp(26px, 9vw, 36px) !important; letter-spacing: 0.02em !important; } }