/* ========================================================================= ANBY Slide Template — theme.css デザインの「型」をここで一元管理します。 色・書体・文字サイズ・余白・動きのスピードを変えたいときは このファイルの変数だけを書き換えれば、全スライドに反映されます。 ========================================================================= */ :root { /* ---------- Brand colors ---------- */ --c-brand: #07188C; /* ANBY Royal Blue（ロゴ背景色） */ --c-brand-deep: #040D52; /* 深い紺 */ --c-brand-bright: #3A63FF; /* ベンチャーらしい鮮やかなブルー（アクセント） */ --c-brand-glow: #5B82FF; /* 光彩・グラデーション用 */ --c-brand-light: #0B22B4; /* グラデーションの明るい側 */ --c-gold: #C9A962; /* シャンパンゴールド（匠など高級ラインのみ控えめに） */ /* ---------- Neutrals ---------- */ --c-ink: #05070D; /* ベースの黒 */ --c-ink-2: #0B0F1C; --c-ink-3: #141B30; --c-paper: #F3F4F8; /* 明るいスライドの背景 */ --c-paper-2:#E6E9F1; --c-white: #FFFFFF; --c-navy-text: #0A0F2A; /* 明るい背景上の文字色 */ /* ---------- Glow & shadow（光彩・影の色） ---------- */ --glow: rgba(58, 99, 255, .42); --glow-soft: rgba(58, 99, 255, .3); --glow-deep: rgba(7, 24, 140, .6); --shadow-brand: rgba(7, 24, 140, .5); /* ---------- Typography ---------- */ /* 明朝：見出し・キーメッセージ／ゴシック：本文・表・ラベル */ --f-mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif; --f-gothic: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif; --f-serif-en: "Cormorant Garamond", "Times New Roman", serif; /* 欧文ディスプレイ（高級感） */ --f-sans-en: "Manrope", "Helvetica Neue", Arial, sans-serif; /* 欧文ラベル・数字（ベンチャー感） */ /* 文字サイズ（1920×1080 キャンバス上の px） */ --fs-hero: 128px; --fs-h1: 88px; --fs-h2: 62px; --fs-h3: 40px; --fs-h4: 30px; --fs-lead: 29px; --fs-body: 23px; --fs-small: 19px; --fs-label: 15px; /* ---------- Layout ---------- */ --pad-x: 140px; --pad-y: 112px; --gap-s: 16px; --gap-m: 32px; --gap-l: 56px; --gap-xl: 96px; --radius: 2px; /* ---------- Motion ---------- */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --dur: 1100ms; /* 要素アニメーションの長さ */ --dur-slide: 700ms; /* スライド切り替えの長さ */ --stagger: 110ms; /* 連続表示の間隔（data-stagger 未指定時） */ } /* ========================================================================= Tone — スライドごとの配色（
） ========================================================================= */ .slide, .slide[data-tone="dark"] { --bg: var(--c-ink); --fg: #F2F4FA; --fg-2: rgba(242, 244, 250, .74); --fg-3: rgba(242, 244, 250, .48); --line: rgba(255, 255, 255, .13); --line-strong: rgba(255, 255, 255, .32); --accent: var(--c-brand-bright); --accent-soft: rgba(58, 99, 255, .18); --surface: rgba(255, 255, 255, .035); --surface-2: rgba(255, 255, 255, .07); --bg-image: radial-gradient(1100px 760px at 88% -8%, rgba(7, 24, 140, .55), transparent 62%), radial-gradient(900px 700px at -6% 112%, rgba(7, 24, 140, .32), transparent 60%), linear-gradient(180deg, var(--c-ink-2), var(--c-ink)); --logo-white: block; --logo-blue: none; color-scheme: dark; } .slide[data-tone="light"] { --bg: var(--c-paper); --fg: var(--c-navy-text); --fg-2: rgba(10, 15, 42, .74); --fg-3: rgba(10, 15, 42, .5); --line: rgba(10, 15, 42, .12); --line-strong: rgba(10, 15, 42, .3); --accent: var(--c-brand); --accent-soft: rgba(7, 24, 140, .08); --surface: #FFFFFF; --surface-2: #FFFFFF; --bg-image: radial-gradient(1000px 700px at 100% 0%, rgba(58, 99, 255, .08), transparent 60%), linear-gradient(180deg, #F7F8FB, var(--c-paper)); --logo-white: none; --logo-blue: block; color-scheme: light; } .slide[data-tone="brand"] { --bg: var(--c-brand); --fg: #FFFFFF; --fg-2: rgba(255, 255, 255, .8); --fg-3: rgba(255, 255, 255, .55); --line: rgba(255, 255, 255, .2); --line-strong: rgba(255, 255, 255, .45); --accent: #FFFFFF; --accent-soft: rgba(255, 255, 255, .14); --surface: rgba(255, 255, 255, .06); --surface-2: rgba(255, 255, 255, .1); --bg-image: radial-gradient(1200px 900px at 92% 0%, rgba(91, 130, 255, .55), transparent 60%), radial-gradient(1000px 800px at 0% 100%, rgba(2, 6, 40, .7), transparent 65%), linear-gradient(135deg, var(--c-brand-light) 0%, var(--c-brand) 46%, var(--c-brand-deep) 100%); --logo-white: block; --logo-blue: none; color-scheme: dark; } /* アクセントをゴールドに切り替える（匠のページなど） */ .slide.is-gold, .is-gold { --accent: var(--c-gold); --accent-soft: rgba(201, 169, 98, .16); } /* ========================================================================= Presets — デッキ全体の配色テーマ（、Tキーで切替） 新しいテーマを作るときは、下のブロックをコピーして値を変えるだけ。 ========================================================================= */ /* Midnight Blue（標準）：ブラック × ロイヤルブルー */ html[data-preset="midnight"] { } /* Royal Navy：ネイビー基調でよりブランドカラーを強く */ html[data-preset="royal"] { --c-ink: #030A33; --c-ink-2: #071247; --c-ink-3: #0E1C63; --c-brand-bright: #6F8DFF; --c-paper: #EEF1FA; } /* Noir Gold：ブラック × シャンパンゴールド（匠・富裕層向けの資料に） */ html[data-preset="noir"] { --c-ink: #070707; --c-ink-2: #0F0F10; --c-ink-3: #1A1A1C; --c-brand: #17171A; --c-brand-deep: #050505; --c-brand-bright: #C9A962; --c-brand-glow: #E3CB8E; --c-brand-light: #2C2C33; --c-paper: #F5F2EA; --c-paper-2: #ECE6D8; --c-navy-text: #16140F; --glow: rgba(201, 169, 98, .2); --glow-soft: rgba(201, 169, 98, .14); --glow-deep: rgba(60, 50, 30, .45); --shadow-brand: rgba(0, 0, 0, .4); } html[data-preset="noir"] .slide[data-tone="dark"] { --bg-image: radial-gradient(1100px 760px at 88% -8%, rgba(201, 169, 98, .16), transparent 62%), linear-gradient(180deg, var(--c-ink-2), var(--c-ink)); --accent-soft: rgba(201, 169, 98, .16); } html[data-preset="noir"] .slide[data-tone="light"] { --accent: #8A6D2F; --accent-soft: rgba(138, 109, 47, .1); --bg-image: radial-gradient(1000px 700px at 100% 0%, rgba(201, 169, 98, .1), transparent 60%), linear-gradient(180deg, #FAF8F3, var(--c-paper)); } html[data-preset="noir"] .slide[data-tone="brand"] { --accent: var(--c-gold); --bg-image: radial-gradient(1200px 900px at 92% 0%, rgba(201, 169, 98, .22), transparent 60%), linear-gradient(135deg, #1D1D21 0%, #121214 50%, #050505 100%); }