/* 名作サンセリフ10書体プリセット — そのままコピーして使う
*
* 出典: gakudesign「これを使えば間違いない名作欧文フォント10選【サンセリフ編】」
*
* 使い方
* 1. 下の「プリセットを選ぶ」の3行を、使いたい id に書き換える（既定は helvetica）
* 2. その id の を HTML の に貼る（下の表）
* 3. CSS では --font-display / --font-text / --font-jp だけを参照する
*
* rd-init --typography で配った場合は 1. が済んだ状態で入っている。
*
* 欧文の正フォント（Helvetica / Futura など）は**すべて有償**で、閲覧者の環境には
* 無いことが多い。だから stack は「正 → 無償の代替 → generic」の順にしてある。
* 実際に配信されるのは代替のほう。手元の Mac に正が入っていればそれが出る。
* 環境差が出ると困る資料（社外に配るスライドの画像書き出しなど）では、
* stack の先頭の正フォント名を消して代替だけにすること。
*
* （必要な1行だけ貼る。表示は display=swap で崩さない）
* helvetica https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&display=swap
* frutiger https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap
* univers https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&display=swap
* futura https://fonts.googleapis.com/css2?family=Jost:wght@400;500;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap
* din https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700&family=BIZ+UDPGothic:wght@400;700&display=swap
* avenir https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap
* optima https://fonts.googleapis.com/css2?family=Marcellus+Sans&family=Zen+Old+Mincho:wght@400;700&display=swap
* gill https://fonts.googleapis.com/css2?family=Cabin:wght@400;500;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap
* akzidenz https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap
* franklin https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap
*/
/* ---------------------------------------------------------------- 10書体 */
:root {
/* helvetica — 王道。迷ったらこれ */
--type-helvetica-display: "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
--type-helvetica-text: "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
--type-helvetica-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
/* frutiger — 明るい。案内・長文向き */
--type-frutiger-display: "Frutiger", "Source Sans 3", "Segoe UI", sans-serif;
--type-frutiger-text: "Frutiger", "Source Sans 3", "Segoe UI", sans-serif;
--type-frutiger-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
/* univers — ソフトで洗練 */
--type-univers-display: "Univers", "Roboto", "Helvetica Neue", sans-serif;
--type-univers-text: "Univers", "Roboto", "Helvetica Neue", sans-serif;
--type-univers-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
/* futura — 幾何学的でおしゃれ */
--type-futura-display: "Futura", "Jost", "Century Gothic", sans-serif;
--type-futura-text: "Futura", "Jost", "Century Gothic", sans-serif;
--type-futura-jp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
/* din — 工業的・無機的。数字が締まる */
--type-din-display: "DIN Next", "DIN Alternate", "Barlow", sans-serif;
--type-din-text: "DIN Next", "DIN Alternate", "Barlow", sans-serif;
--type-din-jp: "BIZ UDPGothic", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
/* avenir — やわらかい・かわいい */
--type-avenir-display: "Avenir Next", Avenir, "Nunito Sans", sans-serif;
--type-avenir-text: "Avenir Next", Avenir, "Nunito Sans", sans-serif;
--type-avenir-jp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
/* optima — 優美・エレガント。Marcellus Sans は 400 のみなので太字に頼らない */
--type-optima-display: "Optima", "Marcellus Sans", "Palatino", sans-serif;
--type-optima-text: "Optima", "Cabin", "Palatino", sans-serif;
--type-optima-jp: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
/* gill — 英国的な優雅さ */
--type-gill-display: "Gill Sans", "Gill Sans MT", "Cabin", sans-serif;
--type-gill-text: "Gill Sans", "Gill Sans MT", "Cabin", sans-serif;
--type-gill-jp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
/* akzidenz — クラシックなゴシック。企業ロゴ向き */
--type-akzidenz-display: "Akzidenz-Grotesk", "AkzidenzGrotesk BQ", "Archivo", sans-serif;
--type-akzidenz-text: "Akzidenz-Grotesk", "AkzidenzGrotesk BQ", "Archivo", sans-serif;
--type-akzidenz-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
/* franklin — 見出しが強いクラシック */
--type-franklin-display: "Franklin Gothic", "Franklin Gothic Book", "Libre Franklin", sans-serif;
--type-franklin-text: "Franklin Gothic Book", "Libre Franklin", sans-serif;
--type-franklin-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}
/* ------------------------------------------------------ プリセットを選ぶ */
/* この3行だけを書き換える（例: helvetica → futura）。以下は触らない。 */
:root {
--font-en-display: var(--type-frutiger-display);
--font-en-text: var(--type-frutiger-text);
--font-jp: var(--type-frutiger-jp);
/* 欧文が先、和文が後。この順でないと英数字が和文フォントの字形で出る */
--font-display: var(--font-en-display), var(--font-jp);
--font-text: var(--font-en-text), var(--font-jp);
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* サイズ（Web。1rem = 16px、比率 1.25 = Major Third） */
--fs-sm: 0.8rem; --fs-base: 1rem; --fs-lg: 1.25rem; --fs-xl: 1.563rem;
--fs-2xl: 1.953rem; --fs-3xl: 2.441rem; --fs-4xl: 3.052rem;
--lh-tight: 1.25; /* 見出し */
--lh-normal: 1.7; /* 和文の本文。欧文だけなら 1.5 */
--tracking-display: -0.01em; /* 欧文の大見出しは少し詰める */
--tracking-body: 0.02em; /* 和文の本文は少し空ける */
}
/* ------------------------------------------------------------ 適用 */
body {
font-family: var(--font-text);
font-size: var(--fs-base);
line-height: var(--lh-normal);
letter-spacing: var(--tracking-body);
font-feature-settings: "palt" 1; /* 和文の約物を詰める。これだけで締まる */
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
font-family: var(--font-display);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-display);
font-weight: 700;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
code, pre, kbd { font-family: var(--font-mono); letter-spacing: 0; }
/* 数字を等幅にして表・金額の桁を揃える */
.tabular, table td, table th { font-variant-numeric: tabular-nums; }
/* -------------------------------------------------- プレゼン（16:9） */
/* スライドを 1280×720 の .slide で組む場合。1920×1080 なら 1.5 倍する。 */
.slide {
font-family: var(--font-text);
letter-spacing: var(--tracking-body);
}
.slide .title { font-family: var(--font-display); font-size: 48px; line-height: 1.2; font-weight: 700; letter-spacing: var(--tracking-display); }
.slide .headline { font-family: var(--font-display); font-size: 30px; line-height: 1.3; font-weight: 700; }
.slide .body { font-size: 20px; line-height: 1.6; }
.slide .caption { font-size: 14px; line-height: 1.5; opacity: 0.7; }
/* 本文は 18px を下限にする。それ以下は会議室の後ろから読めない */