/* * tokens.css * 書体・余白・罫・文字サイズの変数。 * 色の値はここにも書かない。--akn-paper などの色変数は inc/palette.php が に出力する。 * 色変数：--akn-paper --akn-paper-deep（紙より一段濃い地色） --akn-ink --akn-muted --akn-rule --akn-accent --akn-link（本文のテキストリンク） --akn-cta-bg --akn-cta-text */ :root { /* 書体 */ /* 書体（見出しの書体・太さ・字間もここだけで変える） */ --akn-font-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", "Meiryo", sans-serif; --akn-font-display: var(--akn-font-body); /* 見出し・サイト名・表のサービス名 */ --akn-font-mono: "IBM Plex Mono", "BIZ UDGothic", "Osaka-Mono", "MS Gothic", monospace; --akn-weight-display: 700; --akn-tracking-display: 0.01em; /* 太いゴシックに合わせた詰めた字間 */ /* 本文 */ --akn-text-body: 1rem; /* 16px（PCでは base.css で 17px 相当に上げる） */ --akn-leading-body: 1.9; --akn-leading-tight: 1.45; /* 文字サイズ */ --akn-text-xs: 0.75rem; /* 12px ラベル・注記 */ --akn-text-sm: 0.8125rem; /* 13px */ --akn-text-md: 0.9375rem; /* 15px */ --akn-text-lg: 1.0625rem; /* 17px */ /* 罫 */ --akn-rule-thin: 1px; --akn-rule-double: 3px; /* 余白 */ --akn-space-1: 4px; --akn-space-2: 8px; --akn-space-3: 12px; --akn-space-4: 16px; --akn-space-5: 20px; --akn-space-6: 24px; --akn-space-7: 28px; --akn-space-8: 36px; --akn-space-9: 56px; --akn-space-10: 72px; /* レイアウト */ --akn-gutter: 20px; --akn-container: 1280px; --akn-prose: 720px; --akn-sidebar: 320px; --akn-tap: 44px; --akn-sticky-cta-height: 80px; /* 角丸・影は使わない */ --akn-radius: 0; } @media (min-width: 769px) { :root { --akn-gutter: 40px; --akn-text-body: 1.0625rem; /* 17px */ } } @media (min-width: 1100px) { :root { --akn-gutter: 64px; } }