/* ========================================================================== Poker Lab Inc. - Base / Reset / Typography (V5) White-base corporate / Noto Serif JP headings ========================================================================== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--pl-bg); } body { font-family: var(--pl-font-jp); font-size: var(--pl-text-md); line-height: 1.7; color: var(--pl-ink); background: var(--pl-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "palt" 1; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; height: auto; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; margin: 0; } ::selection { background: var(--pl-brand); color: #ffffff; } /* ---------- Container ---------- */ .wrap { width: 100%; max-width: var(--pl-container-max); margin-inline: auto; padding-inline: 32px; } @media (max-width: 900px) { .wrap { padding-inline: 24px; } } @media (max-width: 480px) { .wrap { padding-inline: 20px; } } /* ---------- Section ---------- */ .section { position: relative; padding: 16px 0 64px; } .section-alt { background: var(--pl-bg-alt); } .section-pale { background: var(--pl-bg-cta); } @media (max-width: 900px) { .section { padding: 48px 0; } } /* ---------- Eyebrow (uppercase EN section label) ---------- */ .section-eyebrow { font-family: var(--pl-font-en); font-size: var(--pl-text-sm); font-weight: 700; letter-spacing: var(--pl-track-extra); color: var(--pl-brand); margin: 0 0 14px; text-transform: uppercase; } /* ---------- Section title ---------- */ .section-title { font-family: var(--pl-font-serif); font-weight: 700; font-size: var(--pl-text-3xl); color: var(--pl-brand); margin: 0; letter-spacing: var(--pl-track-wider); line-height: 1.4; } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 56px; } .section-head p { color: var(--pl-ink); font-weight: 500; font-size: var(--pl-text-base); margin: 0 0 6px; } @media (max-width: 700px) { .section-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 40px; } } /* ---------- Photo placeholder (used across page) ---------- */ .photo-ph { position: relative; background: #eeece6; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #8a8678; font-family: var(--pl-font-en); font-size: var(--pl-text-xs); letter-spacing: 0.14em; text-transform: uppercase; border-radius: var(--pl-radius-sm); } .photo-ph::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 50%), linear-gradient(45deg, transparent 49%, rgba(138, 134, 120, 0.25) 49%, rgba(138, 134, 120, 0.25) 51%, transparent 51%); } .photo-ph .ph-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; } .photo-ph .ph-inner svg { width: 28px; height: 28px; opacity: 0.6; } /* ---------- Reveal on scroll ---------- Default visible (SEO / no-JS / print / full-page-screenshot safe). JS adds .js-reveal-ready to , then .reveal becomes invisible until IntersectionObserver fires .in. */ .reveal { opacity: 1; transform: none; transition: opacity var(--pl-dur-scene) var(--pl-ease-out), transform var(--pl-dur-scene) var(--pl-ease-out); } .js-reveal-ready .reveal { opacity: 0; transform: translateY(24px); } .js-reveal-ready .reveal.in { opacity: 1; transform: translateY(0); } @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; } .reveal, .js-reveal-ready .reveal { opacity: 1; transform: none; } } /* ---------- Skip link ---------- */ .skip-link { position: absolute; top: -100px; left: 16px; z-index: 9999; padding: 10px 18px; background: var(--pl-brand); color: #ffffff; border-radius: var(--pl-radius-md); font-size: var(--pl-text-base); font-weight: 600; transition: top var(--pl-dur-base) var(--pl-ease-out); } .skip-link:focus-visible { top: 16px; outline: 2px solid var(--pl-brand-soft); outline-offset: 2px; } /* ---------- Focus visible ---------- */ :focus-visible { outline: 2px solid var(--pl-brand); outline-offset: 3px; border-radius: var(--pl-radius-xs); } /* ---------- Print ---------- */ @media print { body { background: #fff; color: #000; } .header, .footer .copyright, .ai-cta-wrap { background: #fff !important; } .section { padding: 24px 0; page-break-inside: avoid; } a { color: #000; text-decoration: underline; } }