@charset "UTF-8"; /* ============================================================ ANSE YOMITAN — base.css Mobile-first global styles, design tokens, reset Based on TAKUMIISOBE.COM "Stratum Naming" convention ============================================================ */ /* ------------------------------------------------------------ Naming convention (Stratum Naming) - Page / Block : PascalCase (section.Hero, section.Rooms) - Wrapper structure : lowercase (.wrapper, .container, .box) - Style descendants by parent: .Rooms .wrapper .container h2 { ... } - State : .is-active, .has-image - Simple role : .bold, .white, .mute, .center, .sp, .pc - Layout : .l-stack, .l-grid, .flex, .w100 - Spacing : .mt-10, .mb-20, .mx-30 ... (px direct) - JS hook (no styles) : .js-* - Language detection : + :lang() auto ------------------------------------------------------------ */ /* ------------------------------------------------------------ 1. Fonts (Adobe Fonts) EN: Contralto Medium -> font-family: "contralto-medium" JA: 凸版文久ゴシック -> font-family: "toppan-bunkyu-gothic-pr6n" Regular 400 / Demibold 600 Loaded via kit in (see index.html) ------------------------------------------------------------ */ /* ------------------------------------------------------------ 2. Modern reset ------------------------------------------------------------ */ * { margin: 0; padding: 0; box-sizing: border-box; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } button, input, textarea, select { font: inherit; color: inherit; background: transparent; border: none; outline: none; } button { cursor: pointer; } ul, ol, ul li, ol li { list-style: none; text-decoration: none; } a { color: inherit; text-decoration: none; display: inline-block; } ::selection { background: var(--color-accent); color: var(--color-text); } /* ------------------------------------------------------------ 3. Design tokens (mobile baseline) ------------------------------------------------------------ */ :root { /* --- Colors --- */ --color-bg: #ffffff; --color-text: #000000; --color-text-mute: rgba(0, 0, 0, 0.35); --color-bg-dark: #000000; --color-bg-gray: #f6f6f6; --color-accent: #1bdfdc; --color-line: rgba(0, 0, 0, 0.12); /* --- Color aliases (general-purpose) --- */ --background: var(--color-bg); --white: #ffffff; --black: var(--color-text); --key: var(--color-accent); /* --- Typography stacks --- */ --font-en: 'contralto-medium', 'Contralto Medium', 'Times New Roman', serif; --font-ja: 'toppan-bunkyu-gothic-pr6n', '凸版文久ゴシック Pr6N', 'Toppan Bunkyu Gothic Pr6N', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif; --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* heading-font / text-font are switched by :lang() blocks */ --heading-font: var(--font-en); --text-font: var(--font-ja); /* --- Font weight tokens --- Contralto Medium: 400 (Regular) / 700 (Bold) Bunkyu Gothic: 400 (Regular) / 600 (Demibold) Components must NOT hardcode weights; use these tokens. */ --fw-light: 300; /* display / hero (Contralto Light) */ --fw-base: 400; /* default text weight */ --fw-ui: 400; /* UI accents: nav, buttons, labels */ --fw-strong: 600; /* emphasis / sub-headings (JA Demibold) */ /* --- Type scale (mobile) --- */ --fs-h0: 34px; /* Hero display */ --fs-h1: 36px; /* Section display title */ --fs-h2: 22px; /* Major section */ --fs-h3: 16px; /* Sub section title */ --fs-h4: 14px; /* Card title */ --fs-h5: 12px; /* Numbering "01", labels, nav */ --fs-h6: 10px; /* small meta / captions — fixed 10px */ --fs-body: 13px; --fs-p: 13px; /* paragraphs */ /* --- Line heights --- */ --lh-h1: 1.15; --lh-h2: 1.2; --lh-h3: 1.33; --lh-h4: 1.4; --lh-h5: 1.4; --lh-h6: 1.5; --lh-body: 1.6; --lh-ja: 2; --lh-row: 2; /* --- Letter spacing --- */ --ls-en: 0.02em; --ls-ja: 0.06em; /* --- Spacing scale (component padding/gap, 4px base) --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 30px; --space-8: 40px; --space-9: 60px; --space-10: 80px; --space-11: 120px; /* --- Layout --- */ --padding: 6vw; /* Mobile section padding */ --gutter: 20px; --header-offset: 24px; --max-width: 1480px; /* --- Section vertical rhythm --- */ --section-gap: 100px; /* --- Motion --- */ --duration-fast: 200ms; --duration-default: 600ms; --duration-slow: 1400ms; --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-expo: cubic-bezier(0.16, 1, 0.3, 1); /* --- Z-index --- */ --z-base: 0; --z-content: 1; --z-header: 10; --z-overlay: 100; --z-modal: 1000; } /* ------------------------------------------------------------ 4. Breakpoint scale-ups (768 / 1024 / 1440) ------------------------------------------------------------ */ @media (min-width: 768px) { :root { --fs-h0: 48px; --fs-h1: 36px; --fs-h2: 26px; --padding: 7.5vw; --gutter: 32px; --header-offset: 28px; --section-gap: 140px; } } @media (min-width: 1024px) { :root { --fs-h0: 64px; --fs-h1: 44px; --fs-h2: 30px; --padding: 5vw; --gutter: 40px; --section-gap: 180px; } } @media (min-width: 1440px) { :root { --fs-h0: 76px; --fs-h1: 52px; --fs-h2: 34px; --gutter: 48px; } } /* ------------------------------------------------------------ 5. Lang-based font switch ------------------------------------------------------------ */ :lang(en) { --heading-font: var(--font-en); --text-font: var(--font-en); } :lang(ja) { --heading-font: var(--font-en); /* EN display stays Contralto */ --text-font: var(--font-ja); } /* ------------------------------------------------------------ 6. Document base ------------------------------------------------------------ */ /* No scroll-behavior:smooth — it fights Lenis (double interpolation) */ html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } html, body { width: 100%; background-color: var(--background); overflow-x: clip; } body { font-family: var(--text-font); font-weight: var(--fw-base); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text); } :lang(ja) body, body:lang(ja) { line-height: var(--lh-ja); letter-spacing: var(--ls-ja); } /* ------------------------------------------------------------ 7. Universal text element styling ------------------------------------------------------------ */ div, h1, h2, h3, h4, h5, h6, a, span, input, button, tspan, tr, td, th, p, li, dt, dd { color: var(--color-text); font-feature-settings: "palt"; } /* ------------------------------------------------------------ 8. Headings & body (tags + .h0/.h1〜.h6 utility) EN display = Contralto / JA text = Bunkyu Gothic ------------------------------------------------------------ */ .h0 { font-family: var(--heading-font); font-size: var(--fs-h0); line-height: var(--lh-h1); font-weight: var(--fw-light); letter-spacing: var(--ls-en); } h1, .h1 { font-family: var(--heading-font); font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-base); letter-spacing: var(--ls-en); } h2, .h2 { font-family: var(--heading-font); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-base); letter-spacing: var(--ls-en); } h3, .h3 { font-family: var(--heading-font); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-base); } h4, .h4 { font-family: var(--heading-font); font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-strong); } h5, .h5 { font-family: var(--heading-font); font-size: var(--fs-h5); line-height: var(--lh-h5); font-weight: var(--fw-ui); } h6, .h6 { font-family: var(--heading-font); font-size: var(--fs-h6); line-height: var(--lh-h6); font-weight: var(--fw-base); } /* JA headings switch to Bunkyu Gothic Demibold */ h1:lang(ja), h2:lang(ja), h3:lang(ja), h4:lang(ja), .h1:lang(ja), .h2:lang(ja), .h3:lang(ja), .h4:lang(ja) { font-family: var(--font-ja); font-weight: var(--fw-strong); letter-spacing: var(--ls-ja); } /* Small JA labels too — never leave JA glyphs to the EN stack */ h5:lang(ja), h6:lang(ja), .h5:lang(ja), .h6:lang(ja), .label:lang(ja), small:lang(ja) { font-family: var(--font-ja); } /* Bunkyu has only R(400)/DB(600): never fake other weights */ :lang(ja) { font-synthesis: none; } p, .p { font-family: var(--text-font); font-size: var(--fs-p); line-height: var(--lh-body); } p:lang(ja), .p:lang(ja) { font-family: var(--font-ja); line-height: var(--lh-ja); letter-spacing: var(--ls-ja); } /* EN inline label (eyebrow) */ .label { font-family: var(--font-en); font-size: var(--fs-h5); letter-spacing: 0.14em; text-transform: uppercase; } /* ------------------------------------------------------------ 9. Body element defaults ------------------------------------------------------------ */ section { padding-left: var(--padding); padding-right: var(--padding); } img { width: 100%; object-fit: cover; object-position: 50%; } input::placeholder { color: var(--color-text); opacity: 0.25; } /* ------------------------------------------------------------ 10. Role utilities ------------------------------------------------------------ */ /* Weight */ .regular { font-weight: var(--fw-base); } .medium { font-weight: var(--fw-strong); } .bold { font-weight: 700; } /* Color */ .white, .white * { color: var(--white) !important; } .black { color: var(--black); } .mute { color: var(--color-text-mute); } .accent { color: var(--color-accent); } /* Background */ .bg-white { background: var(--white); } .bg-dark { background: var(--color-bg-dark); } .bg-gray { background: var(--color-bg-gray); } .bg-accent { background: var(--color-accent); } /* Alignment */ .left { text-align: left; } .center { text-align: center; } .right { text-align: right; } /* Transform */ .upper { text-transform: uppercase; } .lower { text-transform: lowercase; } .italic { font-style: italic; } .nowrap { white-space: nowrap; } /* Display */ .block { display: block; } .inline-block { display: inline-block; } .hidden { display: none; } /* Mobile-first responsive switches */ .sp { display: block; } .pc { display: none; } @media (min-width: 768px) { .sp { display: none; } .pc { display: block; } } /* Full-bleed (cancel section padding) */ .w100 { width: 100vw; margin-left: calc(-1 * var(--padding)); } /* ------------------------------------------------------------ 11. State utilities (.is-*, .has-*) ------------------------------------------------------------ */ .is-active { color: var(--color-text); } .is-inactive, .is-mute { color: var(--color-text-mute); } .is-hidden { display: none; } .is-paused { animation-play-state: paused; } .is-open { /* hook for components */ } .is-closed { /* hook for components */ } .has-image { /* hook */ } .has-video { /* hook */ } /* ------------------------------------------------------------ 12. Layout utilities (.l-*, .flex) ------------------------------------------------------------ */ .flex { display: flex; justify-content: center; align-items: center; } .l-container { width: 100%; max-width: var(--max-width); margin-inline: auto; } .l-stack { display: flex; flex-direction: column; gap: var(--space-4); } .l-cluster { display: flex; flex-wrap: wrap; gap: var(--space-2); } .l-grid { display: grid; gap: var(--space-4); } .l-center { display: flex; align-items: center; justify-content: center; } /* ------------------------------------------------------------ 13. Reveal system (JS adds .is-inview via IntersectionObserver) .js-reveal : fade + rise .js-reveal-mask : clip-path wipe (images) .js-reveal-line : accent rule grows from left data-delay="200" : transition-delay in ms (set inline by JS) ------------------------------------------------------------ */ .js-reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--duration-slow) var(--ease-expo), transform var(--duration-slow) var(--ease-expo); } .js-reveal.is-inview { opacity: 1; transform: translateY(0); } .js-reveal-mask { clip-path: inset(0 0 100% 0); transition: clip-path 1.8s var(--ease-expo); } .js-reveal-mask.is-inview { clip-path: inset(0 0 0% 0); } /* Parallax images (.js-parallax) own their transform — exclude them */ .js-reveal-mask img:not(.js-parallax) { transform: scale(1.08); transition: transform 2.2s var(--ease-expo); } .js-reveal-mask.is-inview img:not(.js-parallax) { transform: scale(1); } .js-reveal-line { transform: scaleX(0); transform-origin: left center; transition: transform var(--duration-slow) var(--ease-expo); } .js-reveal-line.is-inview { transform: scaleX(1); } /* ------------------------------------------------------------ 14. Spacing utilities (margin, px direct) Values: 1, 3, 5, 8, 10, 15, 20, 30, 40, 60, 80, 100, 120 (mt/mb extend to 160, 200) ------------------------------------------------------------ */ /* mx (left + right) */ .mx-1 { margin-left: 1px; margin-right: 1px; } .mx-3 { margin-left: 3px; margin-right: 3px; } .mx-5 { margin-left: 5px; margin-right: 5px; } .mx-8 { margin-left: 8px; margin-right: 8px; } .mx-10 { margin-left: 10px; margin-right: 10px; } .mx-15 { margin-left: 15px; margin-right: 15px; } .mx-20 { margin-left: 20px; margin-right: 20px; } .mx-30 { margin-left: 30px; margin-right: 30px; } .mx-40 { margin-left: 40px; margin-right: 40px; } .mx-60 { margin-left: 60px; margin-right: 60px; } .mx-80 { margin-left: 80px; margin-right: 80px; } .mx-100 { margin-left: 100px; margin-right: 100px; } .mx-120 { margin-left: 120px; margin-right: 120px; } /* my (top + bottom) */ .my-1 { margin-top: 1px; margin-bottom: 1px; } .my-3 { margin-top: 3px; margin-bottom: 3px; } .my-5 { margin-top: 5px; margin-bottom: 5px; } .my-8 { margin-top: 8px; margin-bottom: 8px; } .my-10 { margin-top: 10px; margin-bottom: 10px; } .my-15 { margin-top: 15px; margin-bottom: 15px; } .my-20 { margin-top: 20px; margin-bottom: 20px; } .my-30 { margin-top: 30px; margin-bottom: 30px; } .my-40 { margin-top: 40px; margin-bottom: 40px; } .my-60 { margin-top: 60px; margin-bottom: 60px; } .my-80 { margin-top: 80px; margin-bottom: 80px; } .my-100 { margin-top: 100px; margin-bottom: 100px; } .my-120 { margin-top: 120px; margin-bottom: 120px; } /* mt (top only) */ .mt-1 { margin-top: 1px; } .mt-3 { margin-top: 3px; } .mt-5 { margin-top: 5px; } .mt-8 { margin-top: 8px; } .mt-10 { margin-top: 10px; } .mt-15 { margin-top: 15px; } .mt-20 { margin-top: 20px; } .mt-30 { margin-top: 30px; } .mt-40 { margin-top: 40px; } .mt-60 { margin-top: 60px; } .mt-80 { margin-top: 80px; } .mt-100 { margin-top: 100px; } .mt-120 { margin-top: 120px; } .mt-160 { margin-top: 160px; } .mt-200 { margin-top: 200px; } /* mb (bottom only) */ .mb-1 { margin-bottom: 1px; } .mb-3 { margin-bottom: 3px; } .mb-5 { margin-bottom: 5px; } .mb-8 { margin-bottom: 8px; } .mb-10 { margin-bottom: 10px; } .mb-15 { margin-bottom: 15px; } .mb-20 { margin-bottom: 20px; } .mb-30 { margin-bottom: 30px; } .mb-40 { margin-bottom: 40px; } .mb-60 { margin-bottom: 60px; } .mb-80 { margin-bottom: 80px; } .mb-100 { margin-bottom: 100px; } .mb-120 { margin-bottom: 120px; } .mb-160 { margin-bottom: 160px; } .mb-200 { margin-bottom: 200px; } /* ml (left only) */ .ml-1 { margin-left: 1px; } .ml-3 { margin-left: 3px; } .ml-5 { margin-left: 5px; } .ml-8 { margin-left: 8px; } .ml-10 { margin-left: 10px; } .ml-15 { margin-left: 15px; } .ml-20 { margin-left: 20px; } .ml-30 { margin-left: 30px; } .ml-40 { margin-left: 40px; } .ml-60 { margin-left: 60px; } .ml-80 { margin-left: 80px; } .ml-100 { margin-left: 100px; } .ml-120 { margin-left: 120px; } /* mr (right only) */ .mr-1 { margin-right: 1px; } .mr-3 { margin-right: 3px; } .mr-5 { margin-right: 5px; } .mr-8 { margin-right: 8px; } .mr-10 { margin-right: 10px; } .mr-15 { margin-right: 15px; } .mr-20 { margin-right: 20px; } .mr-30 { margin-right: 30px; } .mr-40 { margin-right: 40px; } .mr-60 { margin-right: 60px; } .mr-80 { margin-right: 80px; } .mr-100 { margin-right: 100px; } .mr-120 { margin-right: 120px; } /* ------------------------------------------------------------ 15. Reduced motion ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ------------------------------------------------------------ 16. Focus outlines (accessibility) ------------------------------------------------------------ */ :focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } /* ------------------------------------------------------------ 17. Accessibility helper ------------------------------------------------------------ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }