/* ========================================================================== Idea Craft デザイントークン tokens.css -------------------------------------------------------------------------- 出典 : Figma「01_コンポーネント・ルール」を Figma MCP（get_design_context / get_variable_defs）で読み取った実値。目測値は含まない。 基準 : 1rem = 16px。Figma上はpx指定だが CSS では rem で定義（拡大・a11y対応）。 行間は unitless（継承に強い）。各CSSは必ず var() で参照する。 凡例 : ⚠要確認 … Figma側に対応Variableが無く、実値をそのままトークン化したもの。 人間レビューで「トークン採用 / Figma修正」を判断する（近似はしていない）。 ========================================================================== */ :root { /* --- フォントファミリー -------------------------------------------------- */ --font-family-base: "Noto Sans JP", sans-serif; --font-family-en: "Poppins", "Noto Sans JP", sans-serif; /* 英字見出し・数字 */ --font-family-num: "Roboto", "Noto Sans JP", sans-serif; /* TOP Features の番号・Money Lab 統計数字/STEP（Figma: Roboto）*/ --font-family-badge: "Lexend", "Noto Sans JP", sans-serif; /* Money Lab FAQ の Q/A バッジ（Figma: Lexend）⚠要確認：この2文字のためだけのフォント */ /* --- フォントウェイト ---------------------------------------------------- */ /* ※ inc/enqueue.php の Google Fonts 読み込みと一致させる（Noto 400/500/700, Poppins 500）*/ --font-weight-regular: 400; /* 本文 */ --font-weight-medium: 500; /* サブ・ナビ・Poppins見出し */ --font-weight-semibold: 600; /* Poppins（Service 見出し）/ Roboto（Features 番号）*/ --font-weight-bold: 700; /* 見出し・ボタン */ /* --- タイプスケール（font-size）----------------------------------------- */ /* コメントの px は Figma の元値 */ --font-size-xs: 0.725rem; /* 11.6px */ --font-size-h6: 0.8rem; /* 12.8px */ --font-size-h5: 0.889rem; /* 14.22px card-service 英字 */ --font-size-body: 1rem; /* 16px 本文 */ --font-size-h4: 1rem; /* 16px */ --font-size-h3: 1.143rem; /* 18.286px フッターナビ・NEWS・card-service 和文 */ --font-size-h3-lg: 1.333rem; /* 21.33px カード見出し */ --font-size-h2-lead: 1.6rem; /* 25.6px セクション和文見出し・番号 */ --font-size-h2: 2rem; /* 32px フッターロゴ・カード大見出し */ --font-size-h1: 2.667rem; /* 42.667px ※Figmaのカード内見出し/番号は 42px（⚠要確認：0.667px差。h1に寄せた）*/ --font-size-large: 4rem; /* 64px card-feature-alt 番号 */ --font-size-xl: 8rem; /* 128px */ /* ⚠要確認：スケール外だがFigma実値として存在するサイズ */ --font-size-logo: 1.5rem; /* 24px ヘッダーロゴ */ --font-size-hero: 2.375rem; /* 38px MV 見出し */ --font-size-display-en: 4.5rem; /* 72px 見出し英字（Poppins） */ --font-size-display-bg: 8.5rem; /* 136px 見出し背景英字（Poppins） */ --font-size-mv-bg: 12.5rem; /* 200px MV 背景文字 */ /* SP のフォーム入力欄専用。iOS Safari は 16px 未満の入力欄にフォーカスすると ページを自動ズームするため、rem 比率縮小の対象外（生px）とする例外。*/ --font-size-input-sp: 16px; --font-size-service: 2.25rem; /* 36px TOP Service「Money Lab」見出し（Poppins）*/ --font-size-14: 0.875rem; /* 14px Money Lab：GOALラベル・一覧へ・メンバー説明（h5 14.22px とは別値）*/ --font-size-display-sm: 3rem; /* 48px Money Lab：セクション見出し（Why Now 等）・統計数字 */ --font-size-support: 1.75rem; /* 28px Money Lab：Curriculum SupportTag */ --font-size-24: 1.5rem; /* 24px 会社概要：Philosophy/Contact のキャッチ（ロゴと同値）*/ --font-size-display-60: 3.75rem; /* 60px 会社概要：5 WHYs 中央文字（Poppins）・Q&A の「&」（手前）*/ --font-size-display-100: 6.25rem; /* 100px Q&A の「&」（背景英字）*/ /* --- 行間（line-height・unitless）-------------------------------------- */ --line-height-none: 1; /* ⚠要確認 TOP Company 和文見出し（25.6px → 25.6px）*/ --line-height-tight: 1.2; --line-height-snug: 1.3; --line-height-heading: 1.5; /* 見出し・ボタン */ --line-height-body: 1.6; /* 本文の標準 */ --line-height-loose: 1.8; /* カード本文・NEWS */ --line-height-double: 2; /* 5WHYs 中央文字 120px/60px */ --line-height-relaxed: 2; /* ⚠要確認 card-text / card-media 本文（Figma lh 2）*/ /* ⚠要確認：px指定の行間をサイズ比で unitless 化（Figma実値）*/ --line-height-logo: 1.75; /* 24px → 42px */ --line-height-number: 1.875; /* 25.6px → 48px（card-feature 番号・TOP Vision リード）*/ --line-height-number-lg: 0.75; /* 64px → 48px（card-feature-alt 番号）*/ --line-height-display-en: 0.667; /* 72px → 48px（見出し英字）*/ --line-height-display-bg: 0.882; /* 136px → 120px（見出し背景英字）*/ --line-height-mv-bg: 0.8; /* 200px → 160px（MV背景文字）*/ --line-height-badge: 1.375; /* 16px → 22px（Q/Aバッジ・新着Pickup見出し）*/ --line-height-label: 1.286; /* 14px → 18px（GOALラベル）*/ --line-height-value: 1.5625;/* 12.8px → 20px（Value カード説明）*/ --line-height-support: 1.463; /* 28px → 40.96px（SupportTag）*/ --line-height-catch: 1.667; /* 24px → 40px（会社概要 Contact キャッチ）*/ /* --- 余白スケール（8px基調・最小4px / 値ベース命名）--------------------- */ --space-2: 0.125rem; /* 2px ⚠要確認 off-grid（compliance見出し下線の pb）*/ --space-5: 0.3125rem;/* 5px ⚠要確認 off-grid（Member カード氏名下線の pb）*/ --space-6: 0.375rem; /* 6px ⚠要確認 off-grid（ニュース一覧 カテゴリタグの縦padding。Figma 2436:1633 実値）*/ --space-4: 0.25rem; /* 4px */ --space-8: 0.5rem; /* 8px */ --space-10: 0.625rem; /* 10px ⚠ off-grid（card-circle 見出し下 pb）*/ --space-12: 0.75rem; /* 12px */ --space-16: 1rem; /* 16px */ --space-20: 1.25rem; /* 20px ⚠要確認 off-8（Money Lab：StepCard/SupportTag の横padding・Pickup 縦padding 等）*/ --space-24: 1.5rem; /* 24px */ --space-30: 1.875rem; /* 30px ⚠要確認 off-grid（Money Lab：力リストの gap）*/ --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 ⚠要確認 お問い合わせ送信ボタンの横padding（Figma 2408:1666 実値）*/ --space-80: 5rem; /* 80px */ --space-96: 6rem; /* 96px */ --space-104: 6.5rem; /* 104px ⚠要確認 TOP Features 上下padding */ --space-112: 7rem; /* 112px ⚠要確認 Money Lab Curriculum 上下padding */ --space-120: 7.5rem; /* 120px */ --space-128: 8rem; /* 128px */ --space-160: 10rem; /* 160px card-feature-alt の重なり */ --space-168: 10.5rem; /* 168px ⚠要確認 TOP Features カード間 */ /* --- レイアウト幅 ------------------------------------------------------- */ --container-width: 75rem; /* 1200px コンテナ（レスポンシブ基準幅。SP では 100% に上書き）*/ --container-gutter: var(--space-40); /* 1440px画面時のヘッダー左右余白（40px）*/ --width-lead: 45rem; /* 720px 見出しリード文の最大幅 */ --width-mv-lead: 35rem; /* 560px MV リード文 */ --width-legal: 50rem; /* 800px プライバシーポリシー等 規約系ページ／ニュース詳細の本文カラム（Figma 2408:1925 / 2412:1641）*/ --width-news-related: 60rem; /* 960px ニュース詳細「関連記事」の枠（Figma 2412:1658）⚠要確認：Variable未登録 */ --width-news-card: 16.5rem; /* 264px 同 関連記事カード幅（Figma 2440:2179）⚠要確認：Variable未登録 */ --width-legal-intro: 37.5rem; /* 600px 同 冒頭見出しの最大幅（Figma 2408:1924）*/ --header-height: 6rem; /* 96px */ /* --- 色（Figma Variables 名 → トークン）-------------------------------- */ --color-primary: #1f6fd6; /* メインblue */ --color-secondary: #439dff; /* 水色 */ --color-tertiary: #4562ae; /* 青（NEWSタグ）*/ --color-accent: #ff7c5b; /* button（お問い合わせ系の強調色）*/ --color-blue-light: #469bf6; /* ヘッダーボタン・フッターのグラデ起点（⚠要確認 Variable未登録）*/ --color-blue-deep: #004ea2; /* Link（アウトラインボタン）文字色（⚠要確認 Variable未登録）*/ --color-blue-vivid: #006fff; /* ボタングラデ起点 rgba(0,111,255,.92)（⚠要確認）*/ --color-blue-bright: #1581f5; /* ボタングラデ終点（⚠要確認）*/ --color-blue-pale: #ecf1fa; /* card-media 背景（⚠要確認）*/ --color-green-pale: #bde990; /* card-circle グラデ（⚠要確認）*/ --color-news-bg: rgba(1, 94, 189, 0.6); /* NEWS帯 背景（⚠要確認）*/ --color-purple: #984dc4; /* 色-2（Service 小カードの番号）*/ --color-purple-deep: #784bc5; /* 色-4（Vision 図） */ --color-purple-pale: #c3a9fd; /* Service「その他の事業」グラデ終点（⚠要確認）*/ --color-blue-mid: #2787ed; /* TOP Footer / Company グラデ（⚠要確認）*/ --color-blue-mist: #e4eaf2; /* Approach 背景グラデ（⚠要確認）*/ --color-blue-sky: #daecff; /* Money Lab Flow 背景グラデ起点・5WHYs 青カード（⚠要確認）*/ --color-blue-ice: #ecf5ff; /* 会社概要テーブル見出しセル背景 */ --color-blue-soft: #72b6ff; /* 5WHYs 青カード終点 */ --color-green-mist: #f3fde9; /* 5WHYs 緑カード起点 */ --color-green-soft: #d4f3b4; /* 5WHYs 緑カード終点 */ --color-yellow-pale: rgba(255, 254, 224, 0.9); /* 5WHYs 黄カード終点 */ --color-line-black-40: rgba(0, 0, 0, 0.4); /* card-circle 見出し下線（Figma 2487:782 など）*/ --color-blue-light-20: rgba(70, 155, 246, 0.2); /* タグ背景・Qバッジ背景 */ /* ニュース一覧 カテゴリタグ／ページネーション（Figma 2412:1562 実値。Variable未登録 ⚠要確認）*/ --color-tag-blue: rgba(70, 155, 246, 0.15); /* 「すべて」タグ背景（水色15%。--color-blue-light-20 の 20% とは別値）*/ --color-tag-green: #e6f0c8; /* 「イベント情報」タグ背景 */ --color-tag-purple: rgba(151, 80, 192, 0.15); /* 「プレスリリース」タグ背景 */ --color-primary-15: rgba(31, 111, 214, 0.15); /* ページネーション 非現在ページ背景 */ --color-border-light: rgba(51, 51, 51, 0.15); /* 区切り線（Pickup/FAQ/Value）*/ --color-border-light-20: rgba(51, 51, 51, 0.2); /* Member 氏名下線 */ --color-border-member: #d8dce2; /* Member カード枠 */ --color-placeholder: #d9d9d9; /* 画像プレースホルダー背景 */ --color-white-10: rgba(255, 255, 255, 0.1);/* 画像上の薄い白オーバーレイ */ /* ニュートラル（⚠要確認：Figma内で「黒」が #1A1A1A / #20242A / #333 の3種混在）*/ --color-white: #ffffff; --color-black: #1a1a1a; /* 黒（Variable）本文・カード見出し */ --color-black-alt: #20242a; /* 黒（別Variable）card-media/card-circle 見出し */ --color-text-dark: #333333; /* ヘッダー/見出し和文/リード文（Variable未登録）*/ --color-gray-bg: #e8e8e8; /* お問い合わせ FV 背景（WF値 ⚠要確認：確定デザイン無し）*/ --color-gray-text: #6b7280; /* お問い合わせ 補足文（WF値 ⚠要確認）*/ --color-gray-light: #f5f5f5; --color-gray: #dedede; /* プレースホルダー円 */ --color-gray-dark: #595959; /* 用途別（セマンティック） */ --color-text: var(--color-black); --color-text-sub: var(--color-text-dark); --color-text-on-dark:var(--color-white); --color-heading-bg-text: rgba(67, 157, 255, 0.1); /* 見出し背景英字（水色10%）*/ --color-heading-bg-text-on-dark: rgba(255, 255, 255, 0.15); /* 暗背景（Company）の見出し背景英字 */ --color-mv-bg-text: rgba(255, 255, 255, 0.25); /* MV背景文字 */ --color-primary-50: rgba(31, 111, 214, 0.5); /* card-circle 見出し下線 */ --color-accent-50: rgba(255, 124, 91, 0.5); /* Money Lab GOAL の罫線 */ --color-border: var(--color-primary); /* 枠線付きカードの線色 */ /* --- グラデーション（Figma実値）----------------------------------------- */ --gradient-button: linear-gradient(141.11deg, rgba(0, 111, 255, 0.92) 49.06%, var(--color-blue-bright) 94.25%); --gradient-button-header: linear-gradient(90deg, var(--color-blue-light) 0%, rgba(70, 155, 246, 0.8) 100%); --gradient-footer: linear-gradient(180deg, var(--color-blue-mid) 0%, rgba(39, 135, 237, 0.7) 100%); /* TOP(0817)のFooter。コンポ頁は #469bf6→70%（⚠要確認：どちらを正とするか）*/ --gradient-card-service: linear-gradient(125.84deg, #ffffff 6.97%, rgba(255, 255, 255, 0.2) 42.12%); --gradient-card-circle: linear-gradient(-17.84deg, rgba(189, 233, 144, 0.5) 56.15%, rgba(189, 233, 144, 0.05) 88.57%); --gradient-mv-screen: linear-gradient(217.57deg, rgba(255, 255, 255, 0.15) 15.6%, rgba(255, 255, 255, 0) 30.83%, rgba(225, 225, 225, 0) 41.61%, rgba(153, 153, 153, 0) 67.34%); /* TOP(0817)。コンポ頁は 226.2deg 白85%→0（⚠要確認）*/ --gradient-mv-panel: linear-gradient(270deg, rgba(255, 255, 255, 0.6) 0%, rgba(2, 111, 227, 0.6) 100%); /* MV 左側 873px の青パネル */ /* SP用（Figma未定義・SPデザイン無しのため実装判断で追加 ⚠要確認）。 上の青パネルと同じ青（rgba(2,111,227,.6)）のまま向きだけ「下から上」にし、 テキスト帯を覆いつつ上端（顔）で透明に抜く。 */ --gradient-mv-panel-sp: linear-gradient(0deg, rgba(2, 111, 227, 0.6) 0%, rgba(2, 111, 227, 0.6) 40%, rgba(2, 111, 227, 0) 70%); --gradient-approach-bg: linear-gradient(133.2deg, rgba(228, 234, 242, 0.1) 18.65%, rgba(228, 234, 242, 0.6) 89.31%); --gradient-service-main: linear-gradient(113.91deg, rgba(70, 155, 246, 0.06) 10.81%, rgba(70, 155, 246, 0.8) 103.3%); --gradient-service-sub: linear-gradient(108.3deg, rgba(195, 169, 253, 0.06) 2.09%, var(--color-purple-pale) 110.98%); --gradient-service-thumb: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.01) 100%); /* 小カード写真の薄い白オーバーレイ（screen）*/ --gradient-company-tint: linear-gradient(90deg, var(--color-blue-mid) 24.52%, var(--color-white) 100%); /* multiply */ /* SP用（Figma未定義・SPデザイン無しのため実装判断で追加 ⚠要確認）。 上の青→白は幅の狭いSPだと右側が白く抜けて白文字が読めなくなるため、 終点を1段明るいだけの青にして変化を浅くしたもの（Money Lab Member）*/ --gradient-member-tint-sp: linear-gradient(90deg, var(--color-blue-mid) 24.52%, var(--color-secondary) 100%); --gradient-company-light: linear-gradient(270deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%); /* lighten */ /* 会社概要ページ */ /* 下層ページ見出し帯（1440×240）。co-hero と同じ配色・停止位置で角度のみ異なる Figma 実値（2426:1530）⚠要確認：角度違いを別トークンとして持つか、Figma 側で統一するか要判断 */ --gradient-page-head: linear-gradient(138.39deg, rgba(70, 155, 246, 0.1) 2.84%, rgba(70, 155, 246, 0) 42.56%, rgba(70, 155, 246, 0.2) 82.29%); --gradient-co-hero: linear-gradient(113.69deg, rgba(70, 155, 246, 0.1) 2.84%, rgba(70, 155, 246, 0) 42.56%, rgba(70, 155, 246, 0.2) 82.29%); --gradient-co-hero-text: linear-gradient(146.13deg, rgba(218, 236, 255, 0.6) 2.46%, rgba(67, 157, 255, 0.1) 72.15%); --gradient-co-whys: linear-gradient(125.11deg, rgba(255, 255, 255, 0.1) 22.25%, rgba(228, 234, 242, 0.4) 96.52%); --gradient-co-message: linear-gradient(106.94deg, rgba(70, 155, 246, 0.1) 2.84%, rgba(70, 155, 246, 0) 42.56%, rgba(70, 155, 246, 0.2) 82.29%); --gradient-why-blue: linear-gradient(118.99deg, var(--color-blue-sky) 41.49%, var(--color-blue-soft) 97.06%); --gradient-why-green: linear-gradient(105.75deg, var(--color-green-mist) 0.96%, var(--color-green-soft) 98.63%); --gradient-why-yellow: linear-gradient(133.77deg, #ffffff 15.45%, var(--color-yellow-pale) 44.76%); --gradient-why-purple: linear-gradient(109.73deg, #ffffff 2.86%, var(--color-purple-pale) 115.96%); /* 5WHYs SP版（Figma 2444:4024 実値）。PC と同系色だが角度・停止位置・不透明度が別指定 */ --gradient-co-whys-sp: linear-gradient(102.3deg, rgba(228, 234, 242, 0.1) 18.645%, rgba(228, 234, 242, 0.6) 89.314%); --gradient-why-blue-sp: linear-gradient(148.03deg, var(--color-blue-sky) 41.489%, var(--color-blue-soft) 97.06%); --gradient-why-green-sp: linear-gradient(-31.6deg, rgba(189, 233, 144, 0.5) 64.464%, rgba(189, 233, 144, 0.05) 97.473%); --gradient-why-yellow-sp: linear-gradient(109.75deg, #fffff8 4.377%, #fffee0 35.94%); --gradient-why-purple-sp: linear-gradient(111.34deg, rgba(195, 169, 253, 0.06) 2.085%, var(--color-purple-pale) 110.98%); /* Money Lab ページ */ --gradient-ml-mv: linear-gradient(111.11deg, rgba(70, 155, 246, 0.1) 2.84%, rgba(70, 155, 246, 0) 42.56%, rgba(70, 155, 246, 0.2) 82.29%); --gradient-ml-mv-photo: linear-gradient(177.61deg, rgba(255, 255, 255, 0.15) 3.93%, rgba(255, 255, 255, 0) 30.83%); --gradient-ml-pickup: linear-gradient(105.22deg, rgba(255, 255, 255, 0.9) 24.04%, rgba(255, 255, 255, 0.9) 100%); --gradient-ml-why-photo: linear-gradient(72deg, #ffffff 8.57%, rgba(255, 255, 255, 0) 38.45%); /* screen */ --gradient-ml-curriculum: linear-gradient(131.56deg, rgba(228, 234, 242, 0.1) 18.65%, rgba(228, 234, 242, 0.6) 89.31%); --gradient-ml-promise: linear-gradient(140.25deg, rgba(228, 234, 242, 0.1) 18.65%, rgba(228, 234, 242, 0.6) 89.31%); --gradient-ml-flow: linear-gradient(106.76deg, var(--color-blue-sky) 28.17%, var(--color-secondary) 111.21%); --gradient-ml-voice: linear-gradient(179.96deg, rgba(189, 233, 144, 0.5) 16.34%, rgba(189, 233, 144, 0.05) 99.71%); --gradient-ml-faq-item: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.2) 100%); /* ニュース詳細 目次ボックス（Figma 2412:1976 実値。Variable未登録 ⚠要確認）*/ --gradient-news-toc: linear-gradient(180deg, rgba(70, 155, 246, 0.01) 19.4%, rgba(70, 155, 246, 0.04) 100%); --gradient-ml-step-photo: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%); /* screen（Figma はカードごとに向きが異なる → 1種に統一 ⚠）*/ /* --- 字間（letter-spacing）---------------------------------------------- */ --letter-spacing-wide: 0.02em; --letter-spacing-medium: 0.04em; /* ロゴ 0.96px/24px・card-service 0.73px/18.29px */ --letter-spacing-wider: 0.05em; --letter-spacing-wide-08: 0.08em; /* TOP Features 見出し 3.36px/42px */ --letter-spacing-label: 0.16em; /* Money Lab セクションラベル 2.56px/16px */ --letter-spacing-03: 0.03em; /* 5WHYs 中央文字 1.8px/60px */ --letter-spacing-widest: 0.1em; /* card-circle 見出し 2.56px/25.6px */ --letter-spacing-tightest: -0.04em; /* 5WHYs 05 サブ見出し -1.024px/25.6px */ --letter-spacing-hero: 0.25rem; /* ⚠要確認 MV見出し 4px（px固定値）*/ --letter-spacing-px: 0.06rem; /* ⚠要確認 MV背景文字 0.96px（px固定値）*/ /* --- 角丸・線・影（Figma実値）------------------------------------------- */ --radius-sm: 0.25rem; /* 4px */ --radius: 0.5rem; /* 8px 枠線カード */ --radius-md: 0.625rem; /* 10px Money Lab Pickup ボックス */ --radius-lg: 1rem; /* 16px 画像カード */ --radius-xl: 1.25rem; /* 20px card-media / card-feature-alt */ --radius-2xl: 1.5rem; /* 24px NEWS帯 左上 */ --radius-full: 999px; /* ピル・円（Figma 30/40/160/999px は全て高さの半分以上 → 見た目同一）*/ --border-width: 1px; /* 枠線カード */ --border-width-2: 2px; /* アウトラインボタン・下線 */ --border-width-3: 3px; /* お問い合わせフォーム入力枠（WF値）*/ --text-stroke-num: 0.375rem; /* Features 番号の白縁取り（中心振り分けで外側 3px 相当。⚠要確認：Figma APIからストローク幅が取れずレンダリングから実測）*/ --border-color: var(--color-primary); /* 影の寸法は rem（比率縮小に追従させる）。コメントの px は Figma 実値 */ --shadow-button: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.4); /* 0 4px 4px 影ありボタン（TOP MV 白＋オレンジ・Company 白。.ic-btn--shadow で付与） ※エフェクト定義値は blur 2px だが Figma レンダリング実測の減衰は σ≈2（＝CSS blur 4px）。実測側に合わせている ⚠要確認 */ --shadow-text-hero: 0 0.25rem 0.25rem rgba(51, 51, 51, 0.4); /* 0 4px 4px MV/会社概要 見出し（不透明度は Figma レンダリング実測 ≈0.37 → 0.4。スタイル定義上は #333 表記 ⚠要確認）*/ --shadow-text-lead: 0 0.125rem 0.125rem rgba(51, 51, 51, 0.4); /* 0 2px 2px MV リード（同上）*/ /* 会社概要 Hero は同名スタイルでも実描画がさらに薄い（字面直下1pxの実測 α≈0.22）⚠要確認 */ --shadow-text-hero-soft: 0 0.25rem 0.25rem rgba(51, 51, 51, 0.2); --shadow-text-lead-soft: 0 0.125rem 0.125rem rgba(51, 51, 51, 0.2); --shadow-text-glow: 0 0 0.3125rem rgba(255, 255, 255, 0.8); /* 0 0 5px card-service 文字 */ --shadow-text-glow-dark: 0 0 0.3125rem rgba(0, 0, 0, 0.3); /* 0 0 5px 5WHYs 中央文字 */ --shadow-pickup: 0 0.125rem 0.9375rem rgba(0, 0, 0, 0.2); /* 0 2px 15px Money Lab Pickup */ --shadow-member: 0 0.125rem 0.25rem var(--color-secondary); /* 0 2px 4px Money Lab Member */ --shadow-faq: 0 0.125rem 0.25rem rgba(70, 155, 246, 0.2); /* 0 2px 4px Money Lab FAQ */ /* --- アスペクト比 ------------------------------------------------------- */ --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 は画面より広いため、コンテナ幅を画面幅に切り替える。 ガターは .ic-container の padding-inline: var(--space-24) で確保する。 */ @media (max-width: 767px) { :root { --container-width: 100%; } }