@charset "UTF-8"; /* ========================================================================== base.css — リセット / デザイントークン / タイポグラフィ ========================================================================== */ :root { /* --- 色 --- */ --color-text: #333; /* 本文 */ --color-heading: #080808; /* 見出し */ --color-muted: #666; /* 日付などの補助テキスト */ --color-bg: #fff; --color-bg-card: #f9f9f9; --color-primary: #337ab7; /* 「続きを読む」ボタン・サイドバー見出しの下線 */ --color-primary-vivid: #3886c9; --color-primary-dark: #296292; --color-accent: #f4c61a; /* News の Read More ボタン */ --color-cta: #0079f1; /* トップの「お問い合わせ」ボタン */ --color-rule: rgba(0, 0, 0, .06); /* 見出し下の細い罫線 */ --color-rule-strong: rgba(0, 0, 0, .2); --color-border: #e5e5e5; /* --- タイポグラフィ --- */ --font-base: Lato, "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; /* トップページの見出し・About Us 本文で使用。 移行前の WordPress では "Grey Qo" / "Klee One" が指定されていたが どのページでも読み込まれておらず、実際は cursive フォールバックで 表示されていた。現状の見た目を維持するためフォント名は指定せず cursive のみを使う。有効化する場合は各ページの に Google Fonts の を追加した上でここに font-family を足すこと。 */ --font-display: cursive; --leading: 1.7; --leading-tight: 1.4; /* --- レイアウト --- */ --container: 1140px; --container-pad: 15px; --header-height: 67px; --radius: 4px; --radius-lg: 10px; } /* --- リセット --- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-base); font-size: 16px; line-height: var(--leading); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: var(--leading-tight); } p, ul, ol, dl, figure, table { margin: 0; } ul, ol { padding: 0; list-style: none; } img, svg, video { max-width: 100%; height: auto; vertical-align: middle; } a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } /* スクロール追従ヘッダーのぶんアンカー位置をずらす */ [id] { scroll-margin-top: calc(var(--header-height) + 8px); } /* --- ユーティリティ --- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad); } /* キーボード操作用のスキップリンク */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; padding: 10px 16px; background: #fff; } .skip-link:focus { left: 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }