@charset "UTF-8"; /*! Compiled from assets/scss/foundation/foundation.scss by Dart Sass — do not edit this generated file directly. */ /* FLOCSS Foundation — tokens, reset, base elements. Auto-assembled (Stage 2). */ /* ========================================================= WEBeffect — Design System ========================================================= */ :root { /* Brand */ --navy: #0F2A4A; --navy-2: #1E3A5F; --navy-soft: #2A4A75; /* Surfaces */ --white: #FFFFFF; --bg: #FFFFFF; --bg-soft: #F7F9FC; --bg-blue: #EAF4FF; --bg-blue-2: #F3F8FF; --line: #E5EAF0; --line-soft: #EEF2F7; /* Text */ --ink: #0F2A4A; --ink-2: #2A3B55; --ink-3: #5A6A82; --ink-4: #8A98AE; /* Accents — switched via [data-accent] on */ --accent: #F97316; --accent-ink: #FFFFFF; --accent-soft: #FFF1E6; --accent-strong: #EA580C; --blue: #2563EB; --cyan: #00AEEF; --green: #22C55E; --orange: #F97316; /* Type scale */ --font-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif; --font-en: "Inter", system-ui, sans-serif; /* Radii / shadow */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(15, 42, 74, 0.04), 0 1px 3px rgba(15, 42, 74, 0.04); --shadow-md: 0 4px 14px rgba(15, 42, 74, 0.06), 0 2px 6px rgba(15, 42, 74, 0.04); --shadow-lg: 0 18px 40px rgba(15, 42, 74, 0.08), 0 6px 14px rgba(15, 42, 74, 0.04); /* Layout */ --container: 1200px; } html[data-accent=orange] { --accent:#F97316; --accent-ink:#fff; --accent-soft:#FFF1E6; --accent-strong:#EA580C; } html[data-accent=green] { --accent:#16A34A; --accent-ink:#fff; --accent-soft:#E8FBEF; --accent-strong:#15803D; } html[data-accent=cyan] { --accent:#0891B2; --accent-ink:#fff; --accent-soft:#E0F5FB; --accent-strong:#0E7490; } html[data-accent=blue] { --accent:#2563EB; --accent-ink:#fff; --accent-soft:#E6EEFE; --accent-strong:#1D4ED8; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-jp); font-feature-settings: "palt"; color: var(--ink); background: var(--bg); line-height: 1.7; font-size: 15px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; } input, select, textarea { font: inherit; color: inherit; } /* ---------- Typography helpers ---------- */ h1, h2, h3, h4 { margin: 0; letter-spacing: 0.01em; line-height: 1.35; color: var(--navy); font-weight: 700; } h1 { font-size: 44px; line-height: 1.32; letter-spacing: -0.005em; } h2 { font-size: 32px; line-height: 1.4; } h3 { font-size: 20px; } p { margin: 0; color: var(--ink-2); } /* ---------- Footer ---------- */ /* ---------- Mock UI primitives (used in hero collage + everywhere) ---------- */ /* ---------- Tweaks (in-page) ---------- */ /* ---------- Reveal-on-scroll ---------- */ /* ---------- Misc ---------- */ hr { border: 0; border-top: 1px solid var(--line); margin: 0; } /* ========================================================= WEBeffect — FLOCSS-style top page Cool / minimal / premium. Builds on styles.css tokens. ========================================================= */ :root { --font-display:"Schibsted Grotesk","Noto Sans JP",system-ui,sans-serif; --font-en:"Schibsted Grotesk","Noto Sans JP",system-ui,sans-serif; --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.16,1,.3,1); --container-w:1320px; --gutter:clamp(20px, 5vw, 48px); } /* ---------- Base overrides for the FLOCSS page ---------- */ body.we-theme { font-size: 16px; background: var(--white); color: var(--navy); overflow-x: hidden; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } /* fade up blocks */ [data-rise] { transition: opacity 1s var(--ease), transform 1s var(--ease); } .anim [data-rise] { opacity: 0; transform: translateY(40px); } [data-rise].is-in { opacity: 1; transform: none; } @media print { .anim [data-rise] { opacity: 1 !important; transform: none !important; } } @media (prefers-reduced-motion: reduce) { [data-rise] { opacity: 1 !important; transform: none !important; } }