/* ========================================== LENS. — Global Styles Fonts loaded via in each HTML (Inter / Noto Sans JP) ========================================== */ /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ---- Variables ---- */ :root { --bg: #F8F8F8; --bg-accent: #E8E8E8; /* 彩度なしのニュートラルグレー。Contents の帯（白地としっかり差をつける） */ --white: #FFFFFF; --text-primary: #15151A; /* refined near-ink */ --text-secondary: #565660; --text-muted: #8A8A92; --hairline: #E2E2E2; /* Type roles — single neutral grotesque (Neue Haas / Suisse direction). display — Inter, light + open tracking for the wordmark & headings body(ja) — Noto Sans JP for Japanese running text label — Inter, uppercase + tracked for labels, specs, nav (utility voice) */ --font-display: 'Inter', 'Helvetica Neue', Arial, 'Noto Sans JP', sans-serif; --font-ja: 'Noto Sans JP', sans-serif; --font-label: 'Inter', 'Helvetica Neue', Arial, 'Noto Sans JP', sans-serif; /* The only colour in the system: refraction, used as 1px lines only */ --spectrum: linear-gradient(90deg, #b8742e 0%, #9a7c6e 28%, #7d7596 52%, #5d7e96 76%, #3f7d8c 100%); --section-gap: clamp(80px, 15vh, 160px); --max-w: 1200px; --pad-x: clamp(24px, 6vw, 80px); --transition: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* ---- Base ---- */ html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background-color: var(--bg); color: var(--text-primary); font-family: var(--font-ja); font-weight: 400; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; height: auto; } button { cursor: pointer; } /* ---- Container ---- */ .container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); } /* ---- Scroll Fade ---- */ .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 1.2s var(--transition), transform 1.2s var(--transition); } .fade-in.visible { opacity: 1; transform: translateY(0); } .fade-in-slow { opacity: 0; transition: opacity 2s ease; } .fade-in-slow.visible { opacity: 1; } /* stagger delays */ .fade-in[data-delay="1"] { transition-delay: 0.15s; } .fade-in[data-delay="2"] { transition-delay: 0.30s; } .fade-in[data-delay="3"] { transition-delay: 0.45s; } /* ---- Section Label (mono data voice + spectral tick) ---- */ .section-label { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-label); font-size: 11px; font-weight: 400; letter-spacing: 0.32em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 36px; } .section-label::before { content: ''; width: 28px; height: 1px; background: var(--spectrum); } /* ---- Spectral hairline (the only colour: refraction as 1px) ---- */ .spectrum-rule { width: 64px; height: 1px; border: 0; background: var(--spectrum); opacity: 0.85; } /* ---- Thin Divider ---- */ .thin-line { width: 32px; height: 1px; background: var(--text-muted); } /* ---- Footer ---- */ .site-footer { padding: 40px var(--pad-x); display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 0 32px; border-top: 1px solid #E8E8E8; } .footer-logo { font-family: var(--font-display); font-size: 16px; font-weight: 500; letter-spacing: 0.18em; justify-self: start; transition: opacity 0.3s ease; } .footer-logo:hover { opacity: 0.45; } .footer-copy { font-family: var(--font-label); font-size: 10px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); justify-self: start; } .footer-policy { font-family: var(--font-label); font-size: 10px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); justify-self: end; transition: opacity 0.3s ease; } .footer-policy:hover { opacity: 0.5; } .footer-social { display: flex; align-items: center; gap: 20px; } .footer-social a { font-family: var(--font-label); font-size: 10px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); transition: opacity 0.3s ease; } .footer-social a:hover { opacity: 0.5; } @media (max-width: 767px) { .site-footer { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; gap: 20px 0; } .footer-logo { grid-column: 1; grid-row: 1; } .footer-policy { grid-column: 2; grid-row: 1; justify-self: end; } .footer-social { grid-column: 1 / -1; grid-row: 2; } .footer-copy { grid-column: 1 / -1; grid-row: 3; } } /* ---- PC専用の改行: スマホでは消して自然折り返しにする ---- */ @media (max-width: 767px) { .br-pc { display: none; } } /* ---- SR Only ---- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* ---- Reduced motion: honour the brand's "movement is minimal" at the OS level. Reveal everything in its final state; no transforms, no looping ambience. ---- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .fade-in, .fade-in-slow { opacity: 1 !important; transform: none !important; } }