/* ====================================================================== Kyoto Red Data Book Template - default.css Project: Kyoto Prefecture Red Data Book (Kyoto RDB) Purpose: CSSリセット、共通ユーティリティ、CMS前提の初期設定 Placement: /shared/site_rdb/style/default.css ====================================================================== */ @charset "utf-8"; /* ------------------------------ CSS Custom Properties (Theme) ------------------------------ */ :root { --color-bg: #ffffff; --color-text: #222426; /* Text (Ink) */ --color-muted-text: #444444; /* Muted Text */ --color-ink-soft: #646a6e; /* For .lead text, aliased to Muted Text */ /* Core Brand: Kyoto Purple */ --color-kyoto-purple-700: #6b1b7e; /* Primary（コントラスト強化・白文字用） */ --color-kyoto-purple-800: #5e106a; /* Primary Dark（ホバー・ボタン用） */ --color-kyoto-purple-200: #e7d3eb; /* Primary Light */ --color-kyoto-purple-100: #f6eef8; /* Primary Soft BG */ /* Red Data Book accent (muted burgundy) */ --color-rdb-red-700: #7f1f2a; --color-rdb-red-600: #8f2632; --color-rdb-red-100: #f6e9eb; --color-link: var(--color-kyoto-purple-700); --color-link-visited: #5e106a; /* Darker shade of primary for visited links */ --color-link-hover: #5e106a; --color-border: #e5e1e8; /* Line / Divider */ --color-border-darker: #beb8c2; /* 濃い罫線色 */ --color-surface: #ffffff; --color-surface-alt: #faf9fb; /* Design System Variables (KRB) */ --krb-line: #e5e1e8; /* 罫線 */ --krb-paper: #f8f6f2; /* 和紙風BG */ --krb-surface: #ffffff; /* カード */ /* Categories (Design System PDF) */ --cat-animal: #ee86a1; /* 野生動物 (ピンク) */ --cat-animal-weak: rgba(238, 134, 161, 0.1); --cat-flora: #aece85; /* 野生植物・菌類 (緑) */ --cat-flora-weak: rgba(174, 206, 133, 0.1); --cat-geo: #92c6ec; /* 地形・地質・自然現象 (水色) */ --cat-geo-weak: rgba(146, 198, 236, 0.1); --cat-eco: #bba1cb; /* 自然生態系 (紫) */ --cat-eco-weak: rgba(187, 161, 203, 0.1); --cat-search: #8e8e8e; /* 検索ページ (グレー) */ --cat-search-weak: rgba(142, 142, 142, 0.1); /* WCAG AA 準拠テキスト用暗色（白背景で 4.5:1 以上を確保） */ --cat-animal-text: #8e1f3e; --cat-flora-text: #3f6817; --cat-geo-text: #18618a; --cat-eco-text: #6b2080; --cat-search-text: #595959; /* コントラスト強化版（テキスト背景・ボタン・アクティブナビ下線用） */ --cat-animal-accent: #d6386f; --cat-flora-accent: #428538; --cat-geo-accent: #207bbc; --cat-eco-accent: #9064aa; --cat-search-accent: #5a5a5a; /* Button Color */ --color-button: #985fa5; --krb-radius: 14px; --krb-shadow: 0 6px 24px rgba(34, 36, 38, 0.06); --radius-lg: 1rem; /* 16px */ --radius-md: 0.75rem; /* 12px */ --radius-sm: 0.5rem; /* 8px */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --space-1: 0.5rem; /* 8px */ --space-2: 0.75rem; /* 12px */ --space-3: 1rem; /* 16px */ --space-4: 1.25rem; /* 20px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "YuGothic", system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; --font-serif: "Noto Serif JP", "Source Han Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; --focus-ring: 0 0 0 3px rgba(75, 42, 106, 0.25), 0 0 0 6px rgba(127, 31, 42, 0.2); } /* High-contrast theme (optional, add .theme-hc on or ) */ .theme-hc { --color-text: #0f0f0f; --color-link: #2b1550; --color-link-visited: #21103e; --color-link-hover: #170b2b; --color-border: #cfcfd6; } /* ------------------------------ Base / Resets ------------------------------ */ html { /* 1rem = 16px base; users can scale with browser controls */ font-size: 100%; } body { margin: 0; color: var(--color-text); background: #fff; font-family: var(--font-sans); font-weight: var(--font-weight-regular); line-height: 1.8; letter-spacing: 0.05em; /* 文字間を少し広げて可読性を向上 */ -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; overflow-x: hidden; /* 防止 100vw 引起的横向スクロール */ } /* RDB2026 トップページなど、全体の下地を白にしたい画面用 */ body.rdb2026 { background: #ffffff; /* フルブリードセクション（100vw）による横スクロールを防ぐ */ overflow-x: hidden; } /* Ensure visible focus for keyboard users (JIS: keyboard operability) */ :where(a, button, input, select, textarea, summary, [tabindex])\:focus-visible, :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; } /* Links */ a { color: var(--color-link); text-decoration: underline; text-underline-offset: 0.15em; } a:visited { color: var(--color-link-visited); } a:hover { color: var(--color-link-hover); } a:focus-visible { box-shadow: var(--focus-ring); } /* Prefer reduced motion */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ------------------------------ Accessible helper classes ------------------------------ */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; } .u-text-right { text-align: right; } .u-text-center { text-align: center; } .lead { color: var(--color-ink-soft); } .h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.25; font-family: var(--font-serif); color: var(--color-kyoto-purple-700); } .h2 { font-size: clamp(22px, 3vw, 28px); line-height: 1.3; font-family: var(--font-serif); color: var(--color-text); } .u-muted { color: var(--color-muted-text); } /* mask-image 用の参照画像（JS が src を読んで mask-image に適用） */ img.icon-mask-src { display: none; width: 0; height: 0; }