/* ========================================================================== MANNAKA CRAFT — デザイントークン Figma Fixデータ（IazkIVlXqufwafSdGBeZQG）から抽出 配置: /wp-content/themes/{theme}/assets/css/tokens.css ========================================================================== */ :root { /* -------------------------------------------------------------------- COLOR Figmaの変数名は brawn / brown の表記ゆれがあるため brown に正規化。 対応表はファイル末尾のコメント参照。 ----------------------------------------------------------------- */ /* text */ --c-text: #44301C; /* 基本テキスト（最多使用） */ --c-text-sub: #6D5135; /* サブテキスト */ --c-text-weak: #8F8C8B; /* 補足・注釈（Figmaでは変数化されていない直値） */ --c-text-invert: #FFFFFF; /* accent */ --c-accent: #9E5F20; /* 強調・アクセント */ /* border */ --c-border: #C9B5A0; /* ブラウン系罫線 */ --c-border-gray: #D6D6D6; /* グレー系罫線 */ /* background */ --c-bg: #FFFFFF; --c-bg-beige: #F8F4F0; /* セクション背景 */ --c-bg-brown: #585048; /* 濃色セクション */ --c-bg-brown-dark: #342516; /* フッター等 */ /* utility */ --c-line: #06C755; /* LINEボタン */ --c-error: #EB3838; /* エラー・必須 */ /* -------------------------------------------------------------------- TYPOGRAPHY ----------------------------------------------------------------- */ --font-jp: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; --font-en: "Outfit", var(--font-jp); --fw-light: 300; --fw-regular: 400; --fw-medium: 500; /* font-size（Figma実使用値） */ --fs-12: 0.75rem; --fs-14: 0.875rem; --fs-16: 1rem; /* 最多 */ --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-28: 1.75rem; --fs-32: 2rem; --fs-36: 2.25rem; --fs-40: 2.5rem; --fs-44: 2.75rem; --fs-68: 4.25rem; /* line-height */ --lh-100: 1; --lh-120: 1.2; /* 見出し */ --lh-130: 1.3; /* TOPの選ばれる理由・代表挨拶のリード */ --lh-140: 1.4; /* MVキャッチ */ --lh-150: 1.5; /* 標準 */ --lh-200: 2; /* ゆったり本文 */ /* letter-spacing Figmaの値「4」「8」は **% で確定**（2026-09-21）。 ヘッダー・フッター・ドロワーの実値を get_design_context で取得したところ、 24px→1.92px / 20px→1.6px / 14px→1.12px と、すべて 8% だった。 例外はドロワーの電話番号のみ（32px→3.6px = 0.1125em）。 */ --ls-none: 0; --ls-wide: 0.04em; --ls-wider: 0.08em; /* -------------------------------------------------------------------- LAYOUT アートボード PC 1440px / SP 375px、ドロワー切替 767px ----------------------------------------------------------------- */ --container: 1000px; /* 標準（inner 51箇所） */ --container-mid: 1100px; /* 中間（TOP voice周辺） */ --container-wide: 1200px; /* 一覧・グリッド系（inner 23箇所） */ --gutter: 24px; /* SP時の左右余白 */ --header-pad-x: 40px; /* ヘッダーは1440フル幅 + 左右40px */ --header-pad-y: 14px; --header-h: 80px; /* header1 */ --header-h-sp: 92px; /* header2 */ /* ロゴの表示サイズ */ --logo-w: 181px; --logo-h: 40px; --logo-w-sp: 130px; --logo-h-sp: 29px; --logo-w-footer: 230px; --logo-h-footer: 51px; /* フッターナビ（2列×5行） */ --footer-nav-w: 406px; --footer-nav-col: 176px; /* SNSアイコン */ --sns-size: 60px; /* -------------------------------------------------------------------- SPACING（4の倍数） ----------------------------------------------------------------- */ /* 2026-09 整理：4の倍数12段に統一。 旧 10→12 / 14→16 / 30→32 / 50→48 / 60→56 / 70→72 / 100→96 */ --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-32: 32px; --sp-40: 40px; --sp-48: 48px; --sp-56: 56px; --sp-72: 72px; --sp-96: 96px; /* セクションの上下余白（下層ページ共通） */ /* -------------------------------------------------------------------- 本文の最大幅 セクションのコンテナ（--container）とは別に、 読みやすさのために本文だけ狭める箇所がある ----------------------------------------------------------------- */ --measure-sm: 550px; /* CTAのリード */ --measure-md: 740px; /* 導入文 */ --measure-lg: 800px; /* 代表挨拶の本文 */ /* -------------------------------------------------------------------- OTHER ----------------------------------------------------------------- */ --radius: 4px; --radius-lg: 8px; /* カード */ --radius-pill: 999px; --z-header: 100; --z-drawer: 200; --z-float: 150; /* 追従ボタン */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: .3s; /* 半透明。Figmaで変数化されていない値 */ --c-white-20: rgb(255 255 255 / .2); /* MVバッジの地 */ --c-white-30: rgb(255 255 255 / .3); --c-cream-70: rgb(255 247 236 / .7); /* 導入セクションのグラデーション中央 */ --c-white-50: rgb(255 255 255 / .5); --c-white-60: rgb(255 255 255 / .6); --c-white-70: rgb(255 255 255 / .7); --c-white-90: rgb(255 255 255 / .9); --c-overlay-mv: rgb(109 81 53 / .2); /* 下層MVの写真に重ねる */ --c-overlay-contact: rgb(255 240 220 / .2); /* CTAの背景に重ねる */ --c-overlay-banner: rgb(237 237 237 / .7); /* 誘導バナーの背景に重ねる */ --c-overlay-banner-hover: rgb(237 237 237 / .55); --c-badge: #C79F76; /* セットプランのバッジ背景 */ --c-btn-solid: #584129; /* 濃色の塗りボタン */ --c-tag-bg: #906D4A; /* フローのメタタグ地 */ --c-label-before: #B0B0B0; /* BEFOREラベル */ --c-label-after: #BD956E; /* AFTERラベル */ --c-plan-hl-bg: #FFF2C9; /* おすすめプランの見出し地 */ --c-plan-hl-border: #FFCB7E; /* おすすめプランの枠線 */ --c-shadow-mv: rgb(211 145 74 / .8); /* MVキャッチのtext-shadow */ --c-shadow-garage: rgb(177 133 109 / .4); /* ガレージ特集の白文字 */ /* ガレージ特集の背景グラデーション（Figma 106.18deg） */ --c-garage-grad: linear-gradient( 106.18deg, rgb(175 137 102 / .6) 0.87%, rgb(167 137 107 / .4) 50.43%, rgb(99 97 92 / .4) 100% ); } /* ========================================================================== CONTAINER タブレット幅（768〜1439px）のカンプが存在しないため、 最大幅を保ったまま左右余白で吸収する。 ========================================================================== */ .inner { width: min(var(--container), 100% - var(--gutter) * 2); margin-inline: auto; } .inner--mid { max-width: var(--container-mid); } .inner--wide { max-width: var(--container-wide); } .inner--wide, .inner--mid { width: min(100%, 100% - var(--gutter) * 2); margin-inline: auto; } /* ========================================================================== TEXT UTILITY Figmaのテキスト変数をそのまま再現したもの。 ========================================================================== */ .t-14 { font-size: var(--fs-14); line-height: var(--lh-150); letter-spacing: var(--ls-none); } .t-16 { font-size: var(--fs-16); line-height: var(--lh-150); letter-spacing: var(--ls-none); } .t-16-100 { font-size: var(--fs-16); line-height: var(--lh-100); letter-spacing: var(--ls-none); } .t-16-200 { font-size: var(--fs-16); line-height: var(--lh-200); letter-spacing: var(--ls-wide); } .t-18 { font-size: var(--fs-18); line-height: var(--lh-150); letter-spacing: var(--ls-wider); } .t-24 { font-size: var(--fs-24); line-height: var(--lh-150); letter-spacing: var(--ls-none); } .t-en-16 { font-family: var(--font-en); font-size: var(--fs-16); line-height: var(--lh-150); letter-spacing: var(--ls-wider); } .t-en-16-100 { font-family: var(--font-en); font-size: var(--fs-16); line-height: var(--lh-100); letter-spacing: var(--ls-wider); } .t-en-18 { font-family: var(--font-en); font-size: var(--fs-18); line-height: var(--lh-150); letter-spacing: var(--ls-wider); } /* ========================================================================== BASE ========================================================================== */ html { font-size: 100%; } body { font-family: var(--font-jp); font-weight: var(--fw-regular); font-size: var(--fs-16); line-height: var(--lh-150); color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; } /* ========================================================================== Figma変数名 → CSS変数 対応表 brawn-text #44301C → --c-text brawn-sub-text #6D5135 → --c-text-sub brown-strong #9E5F20 → --c-accent brawn-border #C9B5A0 → --c-border gray-border #D6D6D6 → --c-border-gray beige-bg #F8F4F0 → --c-bg-beige brown-bg #585048 → --c-bg-brown brown-bg2 #342516 → --c-bg-brown-dark LINE #06C755 → --c-line red #EB3838 → --c-error （変数化なし） #8F8C8B → --c-text-weak ========================================================================== */