/* ========================================================================== Idea Craft デザイントークン tokens.css -------------------------------------------------------------------------- 出典 : Figma「👀 Cover」（テキストサンプル / ルール）を Figma MCP で読み取り 基準 : 1rem = 16px（ブラウザ既定）。フォントは Noto Sans JP 方針 : Figma上はpx指定だが、CSSでは rem（拡大・アクセシビリティ対応）で定義。 行間は unitless（継承に強い）。数値直書きせず、各CSSは var() で参照する。 ========================================================================== */ :root { /* --- レスポンシブ基盤（デザイントークンではなくアーキテクチャ定数）------- */ /* デザイン基準幅 1200px ÷ 16 = 75rem。1200px以下では base.css で html { font-size: 100vw/75 } を適用し、rem連動で全体を比率縮小する。 */ --layout-max: 75rem; /* デザイン基準フレーム幅 1440px ÷ 16 = 90rem（Figmaフレーム幅）。 right:0 でビューポート右端に張り付く装飾を、この 1440 基準フレームの 右端に合わせて配置するためのアンカー。1440px超では max(0rem, (100% - 90rem)/2) で内側に寄せ、1440px以下は 0 で従来どおり。 */ --layout-frame: 90rem; /* --- フォントファミリー -------------------------------------------------- */ --font-family-base: "Noto Sans JP", sans-serif; --font-family-en: "Outfit", sans-serif; /* 英字あしらい（MENU等）*/ /* --- フォントウェイト ---------------------------------------------------- */ /* ※ 使うウェイトは inc/enqueue.php の Google Fonts 読み込みと一致させること。 日本語フォントはウェイトごとに重い → 使わないものは宣言も読み込みもしない。 */ --font-weight-regular: 400; /* 本文 */ --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* 見出し */ --font-weight-extrabold: 800; --font-weight-black: 900; /* --- タイプスケール（font-size）----------------------------------------- */ /* コメントの px は Figma の元値。スケールに無いサイズは勝手に作らずFigma/トークンを見直す */ --font-size-xs: 0.725rem; /* 11.6px タグ・キャプション等 */ --font-size-12: 0.75rem; /* 12px 比較表セル注記（Figma実値）*/ --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-card: 1.5rem; /* 24px カード見出し（Figma実値）*/ --font-size-h2-lead: 1.6rem; /* 25.6px セクション小見出し/リード */ --font-size-h2-sm: 1.875rem; /* 30px ⚠ CONTACT見出しのみ（Figma実値）要デザイン確認 */ --font-size-h2: 2rem; /* 32px */ --font-size-h1: 2.667rem; /* 42.667px */ --font-size-48: 3rem; /* 48px 図中ラベル大（Figma実値）*/ --font-size-54: 3.375rem; /* 54px 会社概要 RE-BU-CUL見出しの小文字部（Figma実値）*/ --font-size-large: 4rem; /* 64px ヒーロー等の大見出し */ --font-size-80: 5rem; /* 80px 引用符あしらい（Figma実値）*/ --font-size-en-title: 4.5rem; /* 72px 英字セクションタイトル「Service」等（Figma実値）*/ --font-size-xl: 8rem; /* 128px ディスプレイ表示 */ --font-size-watermark: 12.5rem; /* 200px セクション背景の透かし英字（MV等）*/ --font-size-watermark-sm: 9.375rem; /* 150px 透かし英字・小（Operational Excellence等）*/ /* --- 行間（line-height・unitless）-------------------------------------- */ --line-height-none: 1; /* 英字1行ラベル（MENU等）*/ --line-height-tight: 1.2; /* 大見出し・詰め */ --line-height-snug: 1.3; --line-height-relaxed: 1.4; /* 2行ボタンラベル（Figma実値: RESOURCES 資料カード）*/ --line-height-heading: 1.5; /* 見出し */ --line-height-body: 1.6; /* 本文の標準（Figma実使用）*/ --line-height-loose: 1.8; /* 長文・読み物用（Coverのbody仕様）*/ --line-height-article: 1.75; /* ⚠ スケール外（Figma実値: 32px/18.286px ニュース詳細本文）要デザイン確認 */ /* --- 余白スケール（4pxベースグリッド・8px推奨 / 値ベース命名）----------- */ /* ルール：余白は生のpxを使わず必ず var(--space-*)。基本は8の倍数、最小単位は4px。 */ --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-14: 0.875rem; /* 14px ⚠ off-grid（Figma実値: 関連ニュースカードの日付↔タイトル間）要デザイン確認 */ --space-16: 1rem; /* 16px */ --space-20: 1.25rem; /* 20px ⚠ off-grid（Figma実値: 円図内gap）要デザイン確認 */ --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 */ --space-96: 6rem; /* 96px */ --space-120: 7.5rem; /* 120px */ --space-128: 8rem; /* 128px */ --space-104: 6.5rem; /* 104px セクション上余白（Figma実値: PROBLEM）*/ --space-111: 6.9375rem; /* 111px ⚠ off-grid（Figma実値: TRUSTED BY左右余白）要デザイン確認 */ --space-114: 7.125rem; /* 114px ⚠ off-grid（Figma実値: OUR SERVICEセクション上余白）要デザイン確認 */ --space-144: 9rem; /* 144px セクション上余白（Figma実値）*/ --space-160: 10rem; /* 160px セクション下余白（Figma実値）*/ --space-180: 11.25rem; /* 180px ⚠ off-grid（Figma実値: CONTACT下余白）要デザイン確認 */ --space-208: 13rem; /* 208px セクション内の大ブロック間（Figma実値）*/ --space-240: 15rem; /* 240px STEPセクション上余白（Figma実値）*/ /* --- 色 ----------------------------------------------------------------- */ /* ブランドカラー（Figma変数より取得：青 / 濃青はg-navボタン実値） */ --color-primary: #0078cf; /* Figma変数「青」 */ --color-primary-dark: #004c98; /* g-nav MENUボタン・塗りボタンの濃青（Figma実値）*/ --color-primary-deep: #005796; /* 英字ウォーターマークのグラデ始点（Figma実値）*/ --color-accent: #1561ab; /* セクションラベル・アウトラインボタン（Figma実値）*/ /* グラデーション（Figma変数「青系のグラデーション」ほか実値） */ --gradient-blue-text: linear-gradient(180deg, var(--color-primary-deep) 0%, var(--color-primary) 100%); /* 透かし英字 */ --gradient-white-fade: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%); /* MV白オーバーレイ */ --gradient-white-text: linear-gradient(90deg, #ffffff 14.42%, rgba(255, 255, 255, 0.5) 81.73%); /* 青地セクションの透かし英字 */ /* ソフトシャドウ（カード群の背面ぼかし）*/ --color-shadow-soft: #d5d8da; --color-shadow-soft-2: #e2e2e2; /* OUR SERVICEカード背面（Figma実値）*/ --color-dot-inactive: #a4b4bf; /* カルーセルドット非アクティブ（Figma実値）*/ /* 青系の面グラデーション（コラージュ矩形・サービスカード）*/ --gradient-blue-fill: linear-gradient(270deg, var(--color-primary-deep) 0%, var(--color-primary) 100%); --gradient-blue-fill-diag: linear-gradient(53deg, var(--color-primary-deep) 0%, var(--color-primary) 100%); --gradient-card-blue: linear-gradient(-51.75deg, #005da1 1.63%, #006ab7 27.02%); /* サービスカード塗り（Figma実値）*/ --gradient-card-blue-2: linear-gradient(-27.32deg, #005da1 1.63%, #006ab7 27.02%); /* 横長サービスカード塗り（Figma実値）*/ --gradient-band-blue: linear-gradient(-66.94deg, #005796 27.13%, #0078cf 45.94%); /* CLIENTS帯（Figma実値）*/ --gradient-recruit-blue: linear-gradient(-64.43deg, #005796 10.68%, #0078cf 44.54%); /* RECRUITパネル（Figma実値）*/ --gradient-panel-gray: linear-gradient(217.44deg, rgba(236, 236, 236, 0.4) 0.15%, rgba(241, 238, 235, 0.25) 17.41%, #f1f1f1 99.85%), linear-gradient(90deg, #ffffff 0%, #ffffff 100%); /* OUR POLICYパネル（Figma実値）*/ --gradient-watermark-gray: linear-gradient(-90deg, #e5e7e9 0%, #d6def3 100%); /* パネル内透かし英字（Figma実値）*/ --gradient-panel-gray-2: linear-gradient(132.56deg, rgba(236, 236, 236, 0.4) 3.21%, rgba(241, 238, 235, 0.25) 59.9%, #f1f1f1 96.79%), linear-gradient(90deg, #ffffff 0%, #ffffff 100%); /* PROCESS/PROJECTパネル（Figma実値）*/ --gradient-panel-gray-3: linear-gradient(186.52deg, rgba(236, 236, 236, 0.4) 0.15%, rgba(241, 238, 235, 0.25) 17.41%, #f1f1f1 99.85%); /* ニュース詳細ヘッダー帯（Figma実値: 2652:28373）*/ /* アクセント */ --color-gold: #fad16b; /* バッジ文字（Figma実値）*/ --color-orange: #f16e3e; /* Figma変数「オレンジ」 */ --color-yellow: #f4c049; /* 比較表ヘッダーチップ（Figma実値）*/ --color-tag-yellow: #ffc000; /* 役割分担タグ「貴社」（Figma実値）*/ --color-blue-pale: #e6f0f7; /* 比較表セル薄青（Figma実値）*/ /* ニュートラル */ --color-white: #ffffff; --color-header-glass: rgba(255, 255, 255, 0.8); /* スクロール追従時のヘッダー背景 */ --color-black: #1a1616; /* Figma変数「黒」 */ --color-gray-light: #f3f3f3; /* パネル背景（Figma実値: COMPANYセクション）*/ --color-watermark-gray: #dee3ee; /* グレーパネルの透かし英字（単色）。Figma実値は グラデ --gradient-watermark-gray (#e5e7e9→#d6def3) だが 単色化する判断。その中間色。⚠要デザイン確認 */ --color-gray: #cccccc; /* 仮：罫線・ボーダー（要調整）*/ --color-border-input: #888888; /* フォーム入力枠線（Figma実値 #888）*/ --color-border-accent: rgba(21, 97, 171, 0.2); /* 記事リストの区切り線（Figma実値: --color-accent の20%）*/ --color-gray-dark: #595959; /* 仮：サブテキスト（白背景でコントラストAA合格レベル / 要調整）*/ /* 用途別（セマンティック）— 実体の色を参照する */ --color-text: var(--color-black); /* 見出し・強調テキスト */ --color-text-body: #333333; /* 長文本文（Figma実値 #333）*/ --color-text-gray: #4b4b4b; /* リンクカード文言（Figma実値: AIおたすけ隊 FEATURE）*/ --color-gray-cell: #f6f6f6; /* 料金表の値セル背景（Figma実値: AIおたすけ隊 PRICE）*/ /* --- 字間（letter-spacing）---------------------------------------------- */ --letter-spacing-wide: 0.02em; /* Figma 2% */ --letter-spacing-wider: 0.05em; --letter-spacing-widest: 0.1em; /* Figma 10%（g-navリンク・MENUラベル等）*/ --letter-spacing-ultra: 0.15em; /* Figma 15%（MVタイトル等の大見出し）*/ --letter-spacing-heading: 0.032em; /* Figma実値 1.02px/32px（セクション見出し）⚠ 半端な値・要デザイン確認 */ --letter-spacing-number: 0.04em; /* Figma実値 2.88px/72px（バッジ数字）*/ --letter-spacing-num-lg: 0.08em; /* Figma実値 2.56px/32px（AIおたすけ隊 番号）⚠ 要デザイン確認 */ /* --- 角丸・線・影（Figma実値）------------------------------------------- */ --radius-sm: 0.25rem; /* 4px */ --radius-5: 0.3125rem; /* 5px ⚠ off-grid（Figma実値: 比較表セル）要デザイン確認 */ --radius: 0.5rem; /* 8px 既定の角丸 */ --radius-md: 0.625rem; /* 10px カード内画像（Figma実値）*/ --radius-lg: 1rem; /* 16px カード・写真（Figma実値）*/ --radius-20: 1.25rem; /* 20px STEPカード（Figma実値）*/ --radius-24: 1.5rem; /* 24px コラージュ極小矩形（Figma実値）*/ --radius-32: 2rem; /* 32px コラージュ小矩形（Figma実値）*/ --radius-xl: 2.5rem; /* 40px 角丸セクション・コラージュ（Figma実値）*/ --radius-full: 9999px; /* 円・ピル形（Figma 100px）*/ --border-width: 1px; /* 既定の線幅 */ --border-color: var(--color-gray); /* 影の寸法は rem（縮小時に影も追従させる）。コメントの px は Figma の元値 */ --shadow-card: 0.625rem 0.625rem 1.5625rem rgba(0, 0, 0, 0.05); /* 10,10,25 カード（Figma実値）*/ --shadow-watermark: 0 0 3.125rem rgba(21, 97, 171, 0.4); /* 50 透かし英字（Figma実値）*/ --shadow-drop: 0 0 1.09375rem rgba(0, 0, 0, 0.1); /* 17.5 サービスカード（Figma実値）*/ --shadow-drop-sm: 0 0 0.78125rem rgba(0, 0, 0, 0.05); /* 12.5 ポリシーカード（Figma実値）*/ --shadow-card-wide: 0.125rem 0.125rem 2.1875rem rgba(0, 0, 0, 0.05); /* 2,2,35 メディアカード（Figma実値）*/ --shadow-book: 0 0 2.1875rem rgba(0, 0, 0, 0.05); /* 35 書影（Figma実値）*/ --shadow-drop-xs: 0 0 0.46875rem rgba(0, 0, 0, 0.05); /* 7.5 実績ミニカード（Figma実値）*/ --shadow-form: 0 0 0.9375rem rgba(38, 38, 38, 0.05); /* 15 お問い合わせフォームカード（Figma実値）*/ --shadow-quote: 0 0 0.78125rem rgba(0, 0, 0, 0.12); /* 12.5 吹き出しカード（Figma実値）*/ --shadow-price: 0 0 1.5625rem rgba(0, 0, 0, 0.1); /* 25 料金カード（Figma実値: AIおたすけ隊 PRICE）*/ --shadow-card-sm: 0.125rem 0.125rem 0.5rem rgba(0, 0, 0, 0.15); /* 2,2,8 リンクカード（Figma実値: AIおたすけ隊 FEATURE）*/ --shadow-step: 0 0 0.75rem rgba(0, 0, 0, 0.25); /* 12 STEP簡易カード（Figma実値: AIおたすけ隊）*/ --shadow-pill: 0 0 0.375rem rgba(0, 0, 0, 0.07); /* 6 プログラム一覧ピル（Figma実値: 人材研修 PROGRAM）*/ --shadow-list: 0 0 0.9375rem rgba(38, 38, 38, 0.05); /* 15 募集要項カード（Figma実値: 採用ページ）*/ /* --- モーション（スクロールインの fade-up。Figmaに指定は無く実装側の定義）--- */ --motion-duration: 0.7s; /* フェード＋上移動の再生時間 */ --motion-stagger: 0.08s; /* 同一セクション内で1要素ずつ遅らせる間隔 */ --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* 減速強めのイージング */ --motion-shift: var(--space-24); /* fade-up の開始位置（下方向オフセット）*/ /* --- アスペクト比（画像プレースホルダー）-------------------------------- */ /* 使い方例： .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; } /* SP（767px以下）: デザイン基準幅 75rem は画面より広くなるため、 max-width: var(--layout-max) の全要素を一括で画面幅に収める。 ガターは各コンポーネントの padding-inline: var(--space-24) で確保する。 h2系見出しは root 0.8rem の縮小に加えてもう一回り下げる （2rem=25.6px相当 → 1.6rem=20.5px相当）。 */ @media (max-width: 767px) { :root { --layout-max: 100%; --font-size-h2: var(--font-size-h2-lead); --font-size-h2-sm: var(--font-size-h2-lead); } } /* ========================================================================== 使い方の参考（このファイルには書かず 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）で。 ========================================================================== */