/* ========================================================================== Idea Craft デザイントークン tokens.css -------------------------------------------------------------------------- 出典 : Figma「👀 Cover」（テキストサンプル / ルール）を Figma MCP で読み取り 基準 : 1rem = 16px（ブラウザ既定）。フォントは Noto Sans JP 方針 : Figma上はpx指定だが、CSSでは rem（拡大・アクセシビリティ対応）で定義。 行間は unitless（継承に強い）。数値直書きせず、各CSSは var() で参照する。 ========================================================================== */ :root { /* --- フォントファミリー -------------------------------------------------- */ --font-family-base: "Noto Sans JP", sans-serif; /* --- フォントウェイト ---------------------------------------------------- */ --font-weight-regular: 400; /* 本文 */ --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* 見出し */ --font-weight-extrabold: 800; --font-weight-black: 900; /* MVキャッチ等 */ /* --- タイプスケール（font-size）----------------------------------------- */ /* コメントの px は Figma の元値 */ --font-size-3xs: 0.59375rem;/* 9.5px SP: カテゴリバッジ */ --font-size-2xs: 0.6625rem; /* 10.6px SP: 極小注記（アンケート出典等）*/ --font-size-sm: 0.84375rem;/* 13.5px SP: お知らせ/コラムのタイトル */ --font-size-xs: 0.725rem; /* 11.6px タグ/バッジ等（≒Figma 11.68px）*/ --font-size-body: 1rem; /* 16px 本文 */ --font-size-h6: 0.8rem; /* 12.8px */ --font-size-h5: 0.889rem; /* 14.222px */ --font-size-h4: 1rem; /* 16px */ --font-size-h3: 1.143rem; /* 18.286px */ --font-size-h3-lg: 1.333rem; /* 21.33px 小見出し（やや大）*/ --font-size-unit: 1.5rem; /* 24px カウンターの文字単位（回+/教室 等）*/ --font-size-h2-lead: 1.6rem; /* 25.6px セクション小見出し/リード */ --font-size-h2: 2rem; /* 32px */ --font-size-h1: 2.667rem; /* 42.667px */ --font-size-large: 4rem; /* 64px ヒーロー等の大見出し */ --font-size-xl: 8rem; /* 128px ディスプレイ表示 */ /* --- 行間（line-height・unitless）-------------------------------------- */ --line-height-tight: 1.2; /* 数値表示など */ --line-height-snug: 1.3; /* タイトル */ --line-height-heading: 1.5; /* 見出し（例：48/32, 96/64）*/ --line-height-base: 1.6; /* Figma標準（多用）*/ --line-height-body: 1.8; /* 本文（28.8/16）*/ /* --- 字間（letter-spacing）--------------------------------------------- */ --letter-spacing-wide: 0.02em; /* Figma 2% */ --letter-spacing-wider: 0.05em; /* MV見出し等 */ /* --- 余白スケール（8の倍数 / 値ベース命名 / 1rem=16px）------------------ */ /* ルール：余白は生のpxを使わず、必ず var(--space-*) を参照する */ --space-4: 0.25rem; /* 4px ※例外用（アイコン周り等。基本は8の倍数）*/ --space-8: 0.5rem; /* 8px */ --space-10: 0.625rem; /* 10px ※例外（ボタン内余白等）*/ --space-12: 0.75rem; /* 12px ※例外 */ --space-16: 1rem; /* 16px */ --space-20: 1.25rem; /* 20px ※例外（アイコン周り等）*/ --space-24: 1.5rem; /* 24px */ --space-32: 2rem; /* 32px */ --space-40: 2.5rem; /* 40px */ --space-48: 3rem; /* 48px */ --space-56: 3.5rem; /* 56px */ --space-64: 4rem; /* 64px */ --space-72: 4.5rem; /* 72px ラベル–値の列間 等 */ --space-80: 5rem; /* 80px セクション左右/上下padding */ --space-96: 6rem; /* 96px */ --space-120: 7.5rem; /* 120px */ --space-128: 8rem; /* 128px */ --space-160: 10rem; /* 160px */ --space-200: 12.5rem; /* 200px */ --space-240: 15rem; /* 240px */ /* --- 色 ----------------------------------------------------------------- */ /* 出典：Figma「ippo」Variables（fileKey: MjBzqzLmjLsgFikFuFu5H9）から取得した実HEX */ /* ブランド基調（茶系）— 本文・ボーダー・ロゴ文字 */ --color-brown: #5f4d3e; /* ベース茶色 */ --color-brown-text: #674428; /* テキストカラー_ブラウン */ --color-brown-sub: #89705b; /* ブラウン_サブ */ /* アクセント（テクスチャ付き）— 事業ごとのテーマカラー */ --color-accent-green: #17c08c; /* 児童発達支援 */ --color-accent-blue: #1499b9; /* 放課後等デイサービス */ --color-accent-yellow: #ffc019; /* CTA・強調 */ --color-accent-pink: #f395b5; --color-accent-green-deep: #009d6c; /* アイコン用緑（濃いめ）*/ --color-ochre: #b08c2c; /* 黄土色 */ /* ロゴ4色（積み木モチーフ） */ --color-logo-green: #53b682; --color-logo-blue: #32a4cb; --color-logo-yellow: #fab638; --color-logo-pink: #f1729f; /* 背景 */ --color-bg-offwhite: #fffffa; /* 背景色_オフホワイト（既定背景）*/ --color-bg-light-yellow: #fffcee; /* 背景色_ライトイエロー（薄いセクション）*/ --color-bg-yellow: #fff2c5; /* 背景色_イエロー（強調ブロック）*/ --color-skin: #ffe6c3; /* 肌の色 */ /* ニュートラル */ --color-white: #ffffff; --color-black: #1a1a1a; --color-gray-light: #f0ece6; /* 罫線・薄い区切り（茶寄りの淡色）*/ --color-gray-pale: #e7e2de; /* ページャー不活性ドット等（Figma）*/ --color-gray: #d8cfc4; /* ボーダー */ --color-gray-dark: #89705b; /* サブテキスト＝ブラウン_サブ */ /* セマンティック（用途別）— 実体の色を参照する */ --color-primary: var(--color-brown); /* 主役：見出し・ボーダー・ロゴ文字 */ --color-secondary: var(--color-accent-green); /* 補助：リンク・タグ等 */ --color-tertiary: var(--color-accent-yellow); /* CTA塗り */ --color-text: var(--color-brown-text); /* 本文テキスト */ --color-bg: var(--color-bg-offwhite); /* 既定背景 */ --color-error: #d7263d; /* フォーム検証エラー（必須/不一致）*/ /* テーマアクセント（事業ページで上書きする切替点） 例: 側で --color-accent 系を青に上書きする。 既定は児発（緑）。放デイは base.css の .is-after-school で水色へ。 */ --color-accent: var(--color-accent-green); /* アクセント主色 */ --color-accent-deep: var(--color-accent-green-deep); /* 濃いめアクセント（見出し等）*/ --color-accent-soft: #eefaf4; /* 淡いアクセント背景 */ --color-accent-tint: rgba(153, 195, 188, 0.2); /* MVオーバーレイ等の薄い色 */ /* --- 角丸 --------------------------------------------------------------- */ --radius-sm: 0.5rem; /* 8px カード・入力欄 */ --radius-md: 1rem; /* 16px 大きめカード */ --radius-lg: 1.5rem; /* 24px パネル */ --radius-pill: 999px; /* ピル型ボタン・タグ */ /* --- 影 ----------------------------------------------------------------- */ --shadow-card: 0 2px 12px rgba(95, 77, 62, 0.10); /* 茶ベースの淡い影 */ --shadow-modal: 0 0 15px rgba(0, 0, 0, 0.5); /* モーダル（dialog）の浮き影 */ /* --- レイアウト幅 ------------------------------------------------------- */ --layout-max: 75rem; /* 1200px コンテンツ最大幅（基本のinner幅） */ --layout-medium: 65rem; /* 1040px やや狭いinner幅（実績/お知らせ/コラム/FAQ等） */ --layout-narrow: 46rem; /* 736px 記事本文など読み物幅 */ /* --- アスペクト比（画像プレースホルダー）-------------------------------- */ /* 使い方例： .thumb { aspect-ratio: var(--ratio-16-9); } */ --ratio-golden: 1.618 / 1; /* 黄金比 */ --ratio-silver: 1.414 / 1; /* 白銀比 */ --ratio-square: 1 / 1; /* 正方形 */ --ratio-16-9: 16 / 9; --ratio-4-3: 4 / 3; --ratio-4-5: 4 / 5; --ratio-2-1: 2 / 1; } /* ========================================================================== 使い方の参考（このファイルには書かず base.css 側で定義する想定） -------------------------------------------------------------------------- body { font-family: var(--font-family-base); font-weight: var(--font-weight-regular); font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--color-text); } h1 { font-size: var(--font-size-h1); line-height: var(--line-height-heading); font-weight: var(--font-weight-bold); } h2 { font-size: var(--font-size-h2); line-height: var(--line-height-heading); font-weight: var(--font-weight-bold); } ... H3〜H6 も同様。Large / XL は専用クラス（.text-large / .text-xl）で。 ========================================================================== */