* { box-sizing: border-box; } html { font-size: 16px; } body { margin: 0; background: #ffffff; color: #000000; font-family: Arial, Helvetica, sans-serif; line-height: 1.6; } a { color: #000000; text-decoration: none; } a:hover { text-decoration: underline; } .site { min-height: 100vh; display: flex; flex-direction: column; } header { width: 100%; border-bottom: 1px solid #000000; } .header-inner { max-width: 1200px; margin: 0 auto; padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 30px; } .logo { font-size: 20px; font-weight: 700; letter-spacing: 0.04em; } nav { display: flex; flex-wrap: wrap; gap: 24px; font-size: 14px; } nav a { white-space: nowrap; } main { flex: 1; } .container { max-width: 1200px; margin: 0 auto; padding: 80px 32px; } .hero { min-height: 65vh; display: flex; align-items: center; } .hero h1 { margin: 0; font-size: clamp(48px, 9vw, 120px); line-height: 0.95; font-weight: 700; letter-spacing: -0.05em; } .page-title { margin: 0 0 60px; font-size: clamp(42px, 7vw, 80px); line-height: 1; letter-spacing: -0.04em; } .content { max-width: 760px; } .content h2 { margin-top: 48px; margin-bottom: 16px; font-size: 24px; } .content p { margin: 0 0 20px; } .content address { font-style: normal; margin-bottom: 30px; } .placeholder { padding: 4px 8px; background: #f0f0f0; border: 1px solid #cccccc; } footer { border-top: 1px solid #000000; } .footer-inner { max-width: 1200px; margin: 0 auto; padding: 24px 32px; display: flex; justify-content: space-between; gap: 30px; font-size: 13px; } .footer-links { display: flex; flex-wrap: wrap; gap: 20px; } @media (max-width: 700px) { .header-inner { padding: 22px 20px; align-items: flex-start; flex-direction: column; } nav { gap: 14px 20px; } .container { padding: 55px 20px; } .hero { min-height: 60vh; } .hero h1 { font-size: clamp(48px, 16vw, 90px); } .page-title { margin-bottom: 40px; } .footer-inner { padding: 20px; flex-direction: column; } }