/*! * enhance.css — inryokü a11y + browser compat enhancement layer * Created: 2026-04-28 * Scope: 後付け a11y 補完 / 既存 CSS には触らない * 連携: enhance.js が DOM に挿入する要素 / 属性に対するスタイル * * Design notes: * - inryokü 美学 (黒 + CMY フォーカスリング #00ffff) を保持 * - 既存スタイルへの影響を最小化するため `.enh-*` プレフィックスを使用 * - `:focus-visible` 不対応古ブラウザ向けに `:focus` フォールバックを末尾に */ /* ──────────────────────────────────────────────────────────── * sr-only — screen reader only utility * a11y-2026-04-28: WCAG 1.1.1 / 1.3.1 — SR 専用テキストの非表示パターン * ──────────────────────────────────────────────────────────── */ .enh-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* ──────────────────────────────────────────────────────────── * skip link — body 最上位 * a11y-2026-04-28: WCAG 2.4.1 Bypass Blocks (A) * Focus 時のみ可視。z-index は modal (10000) より上。 * ──────────────────────────────────────────────────────────── */ .enh-skip-link { position: fixed; top: -100px; left: 8px; background: #ffffff; color: #000000; padding: 10px 18px; z-index: 100001; text-decoration: none; font-family: 'Press Start 2P', monospace, system-ui, sans-serif; font-size: 12px; letter-spacing: 0.1em; border: 2px solid #00ffff; border-radius: 4px; transition: top 0.18s ease-out; } .enh-skip-link:focus, .enh-skip-link:focus-visible { top: 8px; outline: 3px solid #00ffff; outline-offset: 2px; } /* ──────────────────────────────────────────────────────────── * グローバルフォーカスリング * a11y-2026-04-28: WCAG 2.4.7 Focus Visible (AA), 1.4.11 Non-text Contrast (AA, 3:1) * `:focus-visible` 対応ブラウザ: マウスクリックでは出ず、Tab 時のみ * ──────────────────────────────────────────────────────────── */ button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible, .carousel-item:focus-visible, #cart-icon:focus-visible, #mute-btn:focus-visible, .contact-toggle:focus-visible, .size-guide-toggle:focus-visible, .footer-toggle:focus-visible { outline: 2px solid #00ffff !important; outline-offset: 2px !important; box-shadow: 0 0 0 4px rgba(0, 255, 255, 0.25) !important; border-radius: 2px; } /* :focus-visible 不対応古ブラウザ向けフォールバック (iOS 14 以下等) * 後ろに置くことで、新ブラウザでは `:focus-visible` 側が勝つ */ @supports not selector(:focus-visible) { button:focus, a:focus, [role="button"]:focus, [tabindex]:focus { outline: 2px solid #00ffff !important; outline-offset: 2px !important; } } /* ──────────────────────────────────────────────────────────── * reduced-motion 強化 * a11y-2026-04-28: WCAG 2.3.3 Animation from Interactions (AAA) * enhance.js が `` を付ける * ──────────────────────────────────────────────────────────── */ html.enh-reduce-motion *, html.enh-reduce-motion *::before, html.enh-reduce-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* ただし opacity の transition (fade-in) は残したい — 一部上書き */ html.enh-reduce-motion .singularity-content, html.enh-reduce-motion .item-grid, html.enh-reduce-motion #holo-logo-wrap { transition: opacity 0.3s ease !important; } /* ──────────────────────────────────────────────────────────── * dvh フォールバック (--enh-vh が enhance.js から供給される) * compat-2026-04-28: Issue I-3 — iOS の URL バー伸縮対応 * 既存 CSS の 100vh は触らないが、新規追加する補助クラスで利用可 * ──────────────────────────────────────────────────────────── */ .enh-full-height { height: 100vh; /* fallback */ height: calc(var(--enh-vh, 1vh) * 100); height: 100dvh; } /* ──────────────────────────────────────────────────────────── * visualViewport 連動 — chat input の virtual keyboard 追従 * compat-2026-04-28: Issue I-19 * enhance.js が #chat-overlay-input 等に `.enh-vv-tracked` を付ける * ──────────────────────────────────────────────────────────── */ .enh-vv-tracked { bottom: var(--enh-kb-bottom, 0px) !important; transition: bottom 0.18s ease-out; } /* ──────────────────────────────────────────────────────────── * aria-live 専用領域 (DOM には存在するが視覚的には出さない) * a11y-2026-04-28: WCAG 4.1.3 Status Messages (AA) * ──────────────────────────────────────────────────────────── */ .enh-live-region { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } /* ──────────────────────────────────────────────────────────── * 装飾的 SVG への aria-hidden 補助 (enhance.js で付与) * 視覚的影響なし、SR の読み上げ防止のみ * ──────────────────────────────────────────────────────────── */ [aria-hidden="true"].enh-deco-svg { pointer-events: none; } /* ──────────────────────────────────────────────────────────── * `
` ラッパー (enhance.js が `#root` を `
` 化できない場合の補助) * 視覚影響ゼロ * ──────────────────────────────────────────────────────────── */ [role="main"].enh-main-wrap { display: contents; }