/* ========================================================================== Idea Craft デザイントークン tokens.css -------------------------------------------------------------------------- 出典 : Figma「TTK-GENKI-INNOVATION-Company」の Variables / テキストスタイルを Figma MCP で読み取り 基準 : 1rem = 16px（ブラウザ既定）。フォントは Zen Kaku Gothic New 方針 : Figma上はpx指定だが、CSSでは rem（拡大・アクセシビリティ対応）で定義。 行間は unitless（継承に強い）。数値直書きせず、各CSSは var() で参照する。 ========================================================================== */ :root { /* --- フォントファミリー -------------------------------------------------- */ /* YakuHanJP を先頭に置き、約物（、。「」！？等）だけ半角幅に詰める（inc/enqueue.php で読み込み）*/ --font-family-base: YakuHanJP, "Zen Kaku Gothic New", sans-serif; /* --- フォントウェイト ---------------------------------------------------- */ /* ※ 使うウェイトは inc/enqueue.php の Google Fonts 読み込みと一致させること。 日本語フォントはウェイトごとに重い → 使わないものは宣言も読み込みもしない。 */ --font-weight-regular: 400; /* 日付・コピーライト（Figma: Regular）*/ --font-weight-medium: 500; /* 本文（Figma: M_*）*/ --font-weight-bold: 700; /* 見出し（Figma: B_*）*/ --font-weight-black: 900; /* ディスプレイ（Figma: Bl_*）*/ /* --- タイプスケール（font-size）----------------------------------------- */ /* コメントの px は Figma の元値。スケールに無いサイズは勝手に作らずFigma/トークンを見直す */ --font-size-2xs: 0.625rem; /* 10px 下部バーのラベル（Figma: 1978:16165）*/ --font-size-xs: 0.725rem; /* 11.6px タグ・キャプション等 */ --font-size-h6: 0.8rem; /* 12.8px */ --font-size-h5: 0.889rem; /* 14.222px */ --font-size-body: 1rem; /* 16px 本文 */ --font-size-h4: 1rem; /* 16px */ --font-size-h3: 1.143rem; /* 18.286px */ --font-size-h3-lg: 1.333rem; /* 21.33px H3大 */ --font-size-h2-lead: 1.6rem; /* 25.6px セクション小見出し/リード */ --font-size-h2: 2rem; /* 32px */ --font-size-display: 3.5rem; /* 56px Figma: Bl_56_120% */ --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-compact: 1.45; /* Figma: B_25.6_145%（記事h2）*/ --line-height-heading: 1.5; /* 見出し */ --line-height-body: 1.6; /* 本文の標準（Figma実使用）*/ --line-height-loose: 1.8; /* 本文（Figma: M_16_180%）*/ --line-height-hero: 1.1; /* Figma: TOP MV 見出し */ --line-height-hero-sub: 1.875; /* Figma: TOP MV サブ 48px / 25.6px */ --line-height-button: 1.828125; /* Figma: ボタン 29.25px / 16px */ --line-height-double: 2; /* Figma: コピーライト 25.596px / 12.8px */ /* --- 余白スケール（4pxベースグリッド・8px推奨 / 値ベース命名）----------- */ /* ルール：余白は生のpxを使わず必ず var(--space-*)。基本は8の倍数、最小単位は4px。 */ --space-2: 0.125rem; /* 2px ⚠ off-grid。外部リンクアイコンとの間隔（Figma実値）*/ --space-4: 0.25rem; /* 4px 4pxグリッドの最小単位 */ --space-8: 0.5rem; /* 8px */ --space-10: 0.625rem; /* 10px ⚠ off-grid（4の倍数でない）。暫定。可能なら8/12へ正規化 */ --space-12: 0.75rem; /* 12px */ --space-16: 1rem; /* 16px */ --space-24: 1.5rem; /* 24px */ --space-28: 1.75rem; /* 28px ⚠ off-grid。事業ブランド行のラベルとロゴの間隔（Figma実値）*/ --space-30: 1.875rem; /* 30px ⚠ off-grid。経営者向け 事例カードのロゴと文字の間隔（Figma実値）*/ --space-32: 2rem; /* 32px */ --space-40: 2.5rem; /* 40px */ --space-48: 3rem; /* 48px */ --space-56: 3.5rem; /* 56px */ --space-60: 3.75rem; /* 60px ⚠ off-grid。会社概要 沿革パネルの下余白（Figma実値）*/ --space-64: 4rem; /* 64px */ --space-80: 5rem; /* 80px */ --space-96: 6rem; /* 96px */ --space-120: 7.5rem; /* 120px */ --space-128: 8rem; /* 128px */ /* --- 色 ----------------------------------------------------------------- */ /* Figma Variables（genki-port/*）。名前は Figma の変数名に対応させる */ --color-genki-port-3e3a39: #3e3a39; /* genki-port/genki-port#3e3a39（＝「ベース黒」）*/ --color-genki-port-efefef: #efefef; /* genki-port/genki-port#efefef */ --color-genki-port-40848e: #40848e; /* genki-port/genki-port#40848e */ --color-genki-port-a89990: #a89990; /* genki-port/genki-port#a89990 */ --color-genki-port-ca9e6f: #ca9e6f; /* genki-port/genki-port#ca9e6f */ --color-genki-port-688780: #688780; /* genki-port/genki-port#688780 */ --color-genki-port-logo: #003163; /* genki-port/genki_port_logo */ --color-genki-port-a89990-20: #a8999033; /* Figma「色 4」＝ #A89990 の 20%（白地に重ねる）*/ --color-white-90: rgba(255, 255, 255, 0.9); /* 施設カードのチップ背景（Figma実値）*/ --color-black-70: rgba(62, 58, 57, 0.7); /* 会社概要テーブルの罫線（Figma実値）*/ --color-error: var(--color-genki-port-ca9e6f); /* フォームのエラー表示 ※ Figma 未定義。パレット内の色を仮採用 */ /* 写真の上に重ねる黒（Figma実値）*/ --color-overlay-20: rgba(0, 0, 0, 0.2); --color-overlay-30: rgba(0, 0, 0, 0.3); --color-overlay-50: rgba(0, 0, 0, 0.5); /* ブランドカラー（役割の割り当て未確定） ↓ どの Figma 変数が primary / secondary / tertiary かは未決定のため、マゼンタ仮置きのまま。 人が割り当てを決めたら var(--color-genki-port-*) を参照させる */ --color-primary: #ff00ff; /* TODO: 割り当て確定後に差し替え */ --color-secondary: #ff00ff; /* TODO: 割り当て確定後に差し替え */ --color-tertiary: #ff00ff; /* TODO: 割り当て確定後に差し替え */ /* ニュートラル */ --color-white: #ffffff; /* Figma: 白_#ffffff */ --color-black: var(--color-genki-port-3e3a39); /* Figma: ベース黒 */ --color-gray-light: var(--color-genki-port-efefef); /* 装飾・薄い背景 */ --color-gray: #cccccc; /* 仮：罫線・ボーダー（要調整）*/ --color-gray-dark: #595959; /* 仮：サブテキスト（白背景でコントラストAA合格レベル / 要調整）*/ /* 用途別（セマンティック）— 実体の色を参照する */ --color-text: var(--color-black); /* 本文テキスト */ /* --- 字間（letter-spacing）---------------------------------------------- */ --letter-spacing-wide: 0.02em; /* Figma 2% */ --letter-spacing-3: 0.03em; /* Figma: 0.6399px / 21.33px（カード見出し）*/ --letter-spacing-wider: 0.05em; --letter-spacing-10: 0.1em; /* Figma: 1.829px / 18.29px（年別アイテム）*/ /* --- 角丸・線・影 ------------------------------------------------------- */ --radius-sm: 0.25rem; /* 4px ⚠ 要Figma確認 */ --radius: 0.5rem; /* 8px Figma実使用（記事h2・引用）*/ --radius-lg: 1rem; /* 16px Figma実使用（メイン画像）*/ --radius-full: 9999px; /* 円・ピル形（Figma: Tab の 100px ＝ピル形）*/ --border-width-thin: 0.75px; /* Figma: サムネイルの枠 */ --border-width: 1px; /* 既定の線幅（Figma: Tab・引用・ボタン・枠）*/ --border-width-2: 2px; /* Figma: 記事h3 の下線 */ --border-width-6: 0.375rem; /* 6px Figma: カード見出しの左線 */ --border-width-7: 0.4375rem; /* 7px Figma: 見出しの左線（帯なので比率縮小に追従させる）*/ --border-color: var(--color-gray); --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08); /* 要Figma確認（影は実値に合わせる）*/ /* --- レイアウト幅（Figma: PCフレーム 1440px）---------------------------- */ --width-content: 62.5rem; /* 1000px メインカラム */ --width-article: 55.5rem; /* 888px 記事本文カラム */ --width-sidebar: 15.5rem; /* 248px サイドナビ */ --width-site: 75rem; /* 1200px フッター内容幅 */ --width-page: 90rem; /* 1440px ページ全体（サイドナビ＋メイン＋左右余白）の最大幅 */ /* --- 比率縮小（レスポンシブ）------------------------------------------- */ /* ビューポートが基準幅以下になったら html の font-size を vw 連動で縮小する。 ※ メディアクエリでは var() が使えないため、base.css の max-width と必ず同じ値にする。 ※ 1200px 以下は1カラム＋ハンバーガーメニューに切替え、縮小は解除（1rem＝16px）。 SP の rem 基準・縮小は SPデザイン確定まで保留 */ --scale-viewport-base: 1440; /* px この幅以下で縮小開始（Figma の PC フレーム幅）。縮小は 1201px まで */ --scale-rem-base: 16; /* px 基準幅での 1rem */ /* --- モーション ------------------------------------------------------------ */ /* ホバー等の短い変化 / 出現 / オープニング。イージングは共通 */ --duration-scroll: 0.25s; /* スクロール連動（沿革の線など）。遅いと追従が鈍く見えるため短め */ --duration-fast: 0.5s; /* ホバーの色・位置・不透明度の変化（ゆったりめ）*/ --duration-reveal: 0.6s; --duration-slow: 0.8s; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-hover: cubic-bezier(0.33, 1, 0.68, 1); /* ホバー用：立ち上がりが穏やか */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* オープニング用：ゆっくり始まりゆっくり終わる */ --reveal-offset: var(--space-16); /* 出現時に下から上がる距離 */ --hover-shift: var(--space-4); /* ホバーで矢印が動く距離 */ --hover-zoom: 1.05; /* ホバー・出現時の写真ズーム */ --hover-dim: 0.6; /* テキストリンクのホバー不透明度 */ --marquee-duration: 50s; /* ギャラリー1周の時間 */ --parallax-shift: var(--space-24); /* パララックスの最大移動量 */ /* --- アスペクト比（画像プレースホルダー）-------------------------------- */ /* 使い方例： .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; } /* --- タイプスケール（1200px 以下）----------------------------------------- */ /* 1200px 以下は比率縮小を解除して 1rem＝16px 固定のため、PC 値のままだと文字だけ大きく残る。 375px（SP 値）〜 1200px（PC 値）の間でビューポート幅に連動して滑らかに縮める。 式：SP値 + (100vw − 375px) × (PC値 − SP値) / (1200 − 375)。375px 未満は SP 値で止める。 ⚠ SP 値は Figma 未定義（SPデザイン待ち）。2026-10-04 ユーザー依頼による仮値。SPデザイン確定後に差し替える。 h5 以下の小さいサイズは SP でも可読性のため据え置く。コメントは PC → SP の px */ @media (max-width: 1200px) { :root { --font-size-xl: clamp(4rem, calc(4rem + (100vw - 23.4375rem) * 0.07758), 8rem); /* 128 → 64 */ --font-size-large: clamp(2.25rem, calc(2.25rem + (100vw - 23.4375rem) * 0.03394), 4rem); /* 64 → 36 */ --font-size-display: clamp(2rem, calc(2rem + (100vw - 23.4375rem) * 0.02909), 3.5rem); /* 56 → 32 */ --font-size-h1: clamp(1.625rem, calc(1.625rem + (100vw - 23.4375rem) * 0.02021), 2.667rem); /* 42.667 → 26 */ --font-size-h2: clamp(1.375rem, calc(1.375rem + (100vw - 23.4375rem) * 0.01212), 2rem); /* 32 → 22 */ --font-size-h2-lead: clamp(1.125rem, calc(1.125rem + (100vw - 23.4375rem) * 0.00921), 1.6rem); /* 25.6 → 18 */ --font-size-h3-lg: clamp(1.0625rem, calc(1.0625rem + (100vw - 23.4375rem) * 0.00525), 1.333rem); /* 21.33 → 17 */ --font-size-h3: clamp(1rem, calc(1rem + (100vw - 23.4375rem) * 0.00277), 1.143rem); /* 18.286 → 16 */ --font-size-body: clamp(0.9375rem, calc(0.9375rem + (100vw - 23.4375rem) * 0.00121), 1rem); /* 16 → 15 */ } } /* ========================================================================== 使い方の参考（このファイルには書かず base.css 側で定義する想定） -------------------------------------------------------------------------- body { font-family: var(--font-family-base); font-weight: var(--font-weight-medium); font-size: var(--font-size-body); line-height: var(--line-height-loose); 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）で。 ========================================================================== */