/* ========================================================================== 元気ポート デザイントークン tokens.css -------------------------------------------------------------------------- 出典 : Figma「元気ポート様　コンポーネント」(node 1121:8832) を Figma MCP で読み取り - get_variable_defs（色変数） - get_design_context（Header / footer / Card / Section_header の実CSS値） 基準 : デザイン基準幅 1440px。その幅で 1rem = 16px。フォントは Zen Kaku Gothic New 方針 : Figma上はpx指定だが、CSSでは rem で定義する（比率縮小アーキテクチャのため。 base.css で html の font-size を vw 連動させ、rem参照の全寸法を一括縮小する）。 行間は unitless（継承に強い）。数値直書きせず、各CSSは var() で参照する。 ========================================================================== */ :root { /* --- フォントファミリー -------------------------------------------------- */ --font-family-base: "Zen Kaku Gothic New", sans-serif; /* --- フォントウェイト ---------------------------------------------------- */ /* Figma実測：本文・ナビ = Bold(700)、見出し = Black(900) の2ウェイトのみ。 日本語フォントはウェイトごとに重いため、この2つだけを inc/enqueue.php の Google Fonts で読み込む。増やすときは必ず両方を更新すること。 */ --font-weight-medium: 500; /* 住所・署名などの細めの本文 */ --font-weight-bold: 700; /* 本文・ナビ・リード */ --font-weight-black: 900; /* 見出し・ロゴ */ /* --- タイプスケール（font-size）----------------------------------------- */ /* コメントの px は Figma の元値（1440px時）。スケールに無いサイズは勝手に作らずFigma/トークンを見直す。 このスケールは 16px を基点にした調和数列（分数比）で組まれている： 16 ×8/7=18.29 ×7/6=21.33 ×6/5=25.6 ×5/4=32 ×4/3=42.667 ×3/2=64 → 下の ⚠ 付き（20 / 38 / 56）はこの比に乗らない単発値。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.25rem; /* 20px ⚠ Figma実測（Describe Rowの「元気ポート」）。 このタイプスケール（12.8/14.22/16/18.29/21.33/25.6/32/42.67）から 外れた単発値。21.33px への正規化が妥当かFigma側の確認が必要。 */ --font-size-h2-xs: 1.333rem; /* 21.33px 16×4/3（スケール上の正規値）。対象者カードの見出し等 */ --font-size-h2-lead: 1.6rem; /* 25.6px カード見出し・EN見出し */ --font-size-h2: 2rem; /* 32px ロゴ「元気ポート」・Describe Row見出し */ --font-size-h1-sm: 2.375rem; /* 38px ⚠ Figma実測（p-mv の「元気ポート」）。スケール外の単発値。 32px か 42.667px への正規化が妥当かFigma側の確認が必要。 */ --font-size-h1: 2.667rem; /* 42.667px セクション大見出し */ --font-size-display: 3.5rem; /* 56px ⚠ Figma実測（p-fv のメインタイトル）。スケール外の単発値。 42.667px か 64px への正規化が妥当かFigma側の確認が必要。 */ --font-size-large: 4rem; /* 64px p-mv のメインコピー（42.667 ×3/2 ＝スケール上の正規値）*/ /* --- 行間（line-height・unitless）-------------------------------------- */ --line-height-tight: 1.2; /* Figma実測：縦組みCTAボタン */ --line-height-heading: 1.5; /* Figma実測：署名の氏名 */ --line-height-control: 1.5; /* Figma実測：ボタンのラベル（21.33px / 14.222px）*/ --line-height-body: 1.6; /* Figma実測：見出し・ナビ・短文の標準 */ --line-height-loose: 1.8; /* Figma実測：カード本文などの長文 */ /* --- 字間（letter-spacing）---------------------------------------------- */ /* Figma実測：3% と 5% の2種のみ */ --letter-spacing-wide: 0.03em; /* Figma 3%：EN見出し・ナビ・小見出し */ --letter-spacing-wider: 0.05em; /* Figma 5%：CTAボタン・CONTACT大見出し */ --letter-spacing-widest: 0.07em; /* ⚠ Figma 7%（p-fv のバッジ「生活介護事業所」のみ）。 他は3%/5%の2種で運用されており、ここだけ突出している。 5%への統一が妥当かFigma側の確認が必要。 */ /* --- 余白スケール（4pxベースグリッド・8px推奨 / 値ベース命名）----------- */ /* ルール：余白は生のpxを使わず必ず var(--space-*)。基本は8の倍数、最小単位は4px。 */ --space-2: 0.125rem; /* 2px ⚠ グリッド外の微小値。「必須」バッジの上下パディング（Figma実測）*/ --space-4: 0.25rem; /* 4px 4pxグリッドの最小単位 */ --space-8: 0.5rem; /* 8px */ --space-10: 0.625rem; /* 10px ⚠ off-grid（4の倍数でない）。Figma実測（ロゴ周り）。可能なら8/12へ正規化 */ --space-12: 0.75rem; /* 12px */ --space-16: 1rem; /* 16px */ --space-24: 1.5rem; /* 24px */ --space-32: 2rem; /* 32px */ --space-40: 2.5rem; /* 40px */ --space-48: 3rem; /* 48px */ --space-56: 3.5rem; /* 56px p-service の色パネル下余白 */ --space-64: 4rem; /* 64px */ --space-80: 5rem; /* 80px */ --space-120: 7.5rem; /* 120px 左右ガター・セクション上下 */ --space-136: 8.5rem; /* 136px Figma実測（p-fv下部の上余白）*/ --space-160: 10rem; /* 160px Figma実測（p-fv下部の下余白）*/ --space-176: 11rem; /* 176px Figma実測 */ --space-184: 11.5rem; /* 184px Figma実測（p-fv上部の下余白・詳細ページ）*/ --space-200: 12.5rem; /* 200px Figma実測（p-station下余白）*/ --space-216: 13.5rem; /* 216px Figma実測 */ --space-224: 14rem; /* 224px Figma実測（p-fv上部の上余白・詳細ページ）*/ --space-240: 15rem; /* 240px Figma実測（p-fv上部の上余白・お問い合わせ）*/ /* --- 色 ----------------------------------------------------------------- */ /* ブランドカラー（役割は人間の確認済み。実体HEXはFigma実値） ⚠ --color-primary の #003163 は Figma 上で Variable 化されておらず、 Header のロゴ文字・CTAボタンに生HEXで置かれている値。Figma側の変数化が望ましい。 */ --color-primary: #003163; /* 紺：ロゴ「元気ポート」・CTAボタン背景 */ --color-secondary: #688780; /* 緑 */ --color-tertiary: #CA9E6F; /* 茶 */ --color-rose: #BC6972; /* ローズ（Figma変数 genki-port#bc6972）*/ --color-mauve: #A89990; /* モーヴ：フォームカード背景・矢印ボタン */ /* 事業ごとの識別色（p-mv のバッジで3事業を色分けしている実体を役割名で参照する）*/ --color-service-care: var(--color-secondary); /* 生活介護 */ --color-service-job: var(--color-rose); /* 就労支援 */ --color-service-nursing: var(--color-tertiary); /* 訪問看護 */ /* ニュートラル（すべてFigma変数の実値） */ --color-white: #ffffff; --color-ink: #3E3A39; /* genki-port#3e3a39：本文・見出しの標準色 */ --color-gray-light: #EFEFEF; /* genki-port#efefef：ヘッダー背景・暗背景上の文字 */ --color-gray-20: #333333; /* color/grey/20：セレクトの選択前テキスト（お問い合わせ）*/ --color-placeholder: #DEDEDE; /* フォーム入力欄のプレースホルダー（お問い合わせ）*/ /* 半透明バリエーション（Figma実測の合成結果） ⚠ Figma変数名は「_30％」だが実際の fill-opacity は 0.5（footerのフォームカード）。 名前と実値が食い違っているためFigma側の確認が必要。ここは実値の 50% を採用。 */ --color-mauve-50: color-mix(in srgb, var(--color-mauve) 50%, var(--color-white)); --color-mauve-30: color-mix(in srgb, var(--color-mauve) 30%, var(--color-white)); /* 概要テーブルの区切り罫線（下層ページ）*/ --color-tertiary-20: color-mix(in srgb, var(--color-tertiary) 20%, var(--color-white)); --color-tertiary-10: color-mix(in srgb, var(--color-tertiary) 10%, var(--color-white)); /* 料金カード背景（下層ページ）*/ /* 透過白（下地を透かす。合成ではなく実際に半透明であることに意味がある） */ --color-white-80: rgba(255, 255, 255, 0.8); /* Figma実測：ボタン背景 */ --color-white-60: rgba(255, 255, 255, 0.6); /* Figma実測：FAQ項目の回答側の下地 */ /* 用途別（セマンティック）— 実体の色を参照する */ --color-text: var(--color-ink); /* 本文テキスト */ --color-text-invert: var(--color-gray-light); /* 暗背景上のテキスト */ --color-bg-dark: var(--color-ink); /* フッター・コンタクト帯の背景 */ /* --- 角丸・線・影（Figma実測）------------------------------------------- */ --radius-3: 0.1875rem; /* 3px フォーム入力欄（お問い合わせ）*/ --radius-sm: 0.25rem; /* 4px CTAボタン */ --radius: 0.5rem; /* 8px 施設カードの画像 */ --radius-10: 0.625rem; /* 10px ⚠ off-grid（4の倍数でない）。Figma実測（p-station アイテム枠）*/ --radius-24: 1.5rem; /* 24px ⚠ radiusスケール外。料金カード・エリア地図（下層ページ）*/ --radius-lg: 1rem; /* 16px 特長カードの画像・フォームカード */ --radius-xl: 2.5rem; /* 40px コンタクトの白カード */ --radius-panel: 4rem; /* 64px p-service の色パネルの角落とし */ --radius-180: 11.25rem; /* 180px Figma実測（p-service ジョブ2枚目写真の左側の角）人間承認済み */ --radius-240: 15rem; /* 240px Figma実測（p-service ジョブ2枚目写真の右下の角）人間承認済み */ --radius-2xl: 7.5rem; /* 120px セクションの大きな角落とし（p-faq の左上など）*/ --radius-pill: 31.25rem; /* 500px p-service の画像の半円（ピル）*/ --radius-full: 9999px; /* 円・ピル形（矢印ボタン）*/ --border-width: 1px; /* 既定の線幅 */ --border-color: var(--color-mauve); /* 影（Figma実測。影はぼかし半径をrem化すると比率縮小に追従する）*/ --shadow-badge: 0 0 0.9375rem rgba(0, 0, 0, 0.15); /* 15px：p-fv のバッジ */ --shadow-input: inset 0 0 0.1875rem rgba(0, 0, 0, 0.3); /* 3px：フォーム入力欄の内側影 */ --shadow-radio: inset 0 0 0.25rem rgba(0, 0, 0, 0.25); /* 4px：ラジオ白丸の内側影（お問い合わせ。 FigmaのEllipse実体＝inner shadow blur4/黒25% を実測）*/ --shadow-text-hero: /* p-fv のメインタイトル（text-shadow）*/ 0 0 3.125rem rgba(0, 0, 0, 0.25), /* 50px */ 0 0 4.6875rem rgba(0, 0, 0, 0.25); /* 75px */ /* --- インタラクション（ボタン類hover演出の統一値。Figma外・人間指示 2026-07）--- 全ボタン共通：わずかに浮き上がり（--hover-lift）＋浮き影（--shadow-hover）＋ 各ボタン固有の色変化を --transition-fast でアニメーションさせる */ --transition-fast: 0.2s; /* hoverトランジション時間 */ --shadow-hover: 0 0.25rem 1rem rgba(0, 0, 0, 0.15); /* 4/16px：浮き上がりの影 */ --hover-lift: calc(-1 * var(--space-2)); /* 浮き上がり量（上へ2px） */ /* 写真の上に文字を載せるための暗幕（Figma実測 25%）*/ --color-overlay: rgba(0, 0, 0, 0.25); /* 写真の明度を抑えるごく薄い暗幕（Figma実測 6%。p-service 元気テラスの写真）人間承認済み */ --color-overlay-weak: rgba(0, 0, 0, 0.06); /* --- レイアウト ---------------------------------------------------------- */ --layout-content-width: 75rem; /* 1200px：コンテンツ最大幅 */ --layout-content-narrow: 45rem; /* 720px：狭幅コンテンツ（概要テーブル・タイムライン等）*/ --layout-gutter: var(--space-120); /* 120px：左右ガター（1440 - 1200 = 240 / 2）*/ --layout-header-height: 5.75rem; /* 92px：fixedヘッダーの高さ（padding 16×2 + ロゴ60px）。header.css の実装値と連動 */ /* --- アスペクト比（画像枠・Figma実測）----------------------------------- */ --ratio-feature-img: 320 / 198; /* 特長カードの画像 */ --ratio-service-img: 456 / 322; /* サービス紹介（ジグザグ）の画像 */ --ratio-square: 1 / 1; /* 施設カードの画像（304/304）*/ } /* ========================================================================== SP（767px以下）のトークン切替 -------------------------------------------------------------------------- base.css のフェーズ2で rem 基準を 14.222px に切替えたうえで、PC基準のままでは SPで過大になる「大きな余白・角丸」だけをここで一括で縮める。 ・トークン名（--space-120 等）はPC時の由来px。SPでは下記の縮小値に切替わる。 ・セクションの重なり量（margin -120px）と角丸ノッチ（--radius-2xl）は同値で 縮めるため、スクープの見え方はPCと相似が保たれる。 ・各CSS末尾のSPメディアクエリは「シングルカラム化」などレイアウト変更のみを担い、 量的な縮小はこのブロックに集約する。 ========================================================================== */ @media (max-width: 767px) { :root { /* 見出しのタイプスケール：SPでは各段を既存スケール内で1〜2段下げる （rem基準14.222pxのため、実px＝下記rem × 14.222。本文以下は据え置き）。 スケール外の任意値は作らず、PC版と同じ調和数列の段だけを使う。 */ --font-size-h3: 1rem; /* 18.29 → 14.2px相当（リード文は本文と同格に）*/ --font-size-h3-lg: 1.143rem; /* 20 → 16.3px相当 */ --font-size-h2-xs: 1.25rem; /* 21.33 → 17.8px相当 */ --font-size-h2-lead: 1.333rem; /* 25.6 → 19.0px相当 */ --font-size-h2: 1.6rem; /* 32 → 22.8px相当 */ --font-size-h1-sm: 2rem; /* 38 → 28.4px相当 */ --font-size-h1: 2rem; /* 42.67 → 28.4px相当 */ --font-size-display: 2.375rem; /* 56 → 33.8px相当 */ --font-size-large: 2.667rem; /* 64 → 37.9px相当 */ /* セクション上下余白・角丸ノッチの重なり量（120px → 64px相当）*/ --space-120: 4rem; --space-136: 5rem; --space-160: 5rem; --space-176: 6rem; --space-184: 6rem; --space-200: 7rem; --space-216: 7rem; --space-224: 7.5rem; --space-240: 8rem; /* 左右ガター */ --layout-gutter: var(--space-24); /* fixedヘッダーの高さ（padding 16×2 + CTAボタン 2.6rem = 本文1rem×1.6 + padding 8×2）。 header.css の実装値と連動 */ --layout-header-height: 4.6rem; /* 大きな角落とし・パネル角丸（--space-120 の縮小値と揃える）*/ --radius-2xl: 4rem; --radius-panel: var(--radius-24); } }