/* ========================================================= tokens.css — デザイントークン いろどりケアクリニック / Irodori Care Clinic ブランドコンセプト：「静かで、確かで、あたたかい」 ───────────────────────────────────────────── 設計原則： 1. 白〜オフホワイトの3層構造で「静けさ」を支える 2. ブランドカラーは「点」として効かせ、面では使わない 3. 余白は8の倍数、角丸は控えめ4段階、影は極限まで薄く 4. アニメは200/400/600msの3段階に絞る ========================================================= */ :root { /* ========================================================= 1. カラー ───────────────────────────────────────────── ブランドカラーは「アクセント」として使う。 大面積で塗らない（Geminiの失敗を回避するため）。 ========================================================= */ /* -------- ブランドカラー（点として使う） -------- */ --color-primary-deep: #1B5A7A; /* 見出し・本文強調・主要CTA */ --color-primary: #2B7BA0; /* リンク・補助CTA */ --color-brand: #3DA5C4; /* 装飾線・アイコン・小数字 */ --color-accent: #7FCEDF; /* 1pxの罫線・極薄グロー */ /* -------- ブランドカラー alpha（薄く効かせるため） -------- */ --color-brand-08: rgba( 61, 165, 196, 0.08); /* 引用背景・ホバー */ --color-brand-12: rgba( 61, 165, 196, 0.12); /* マーカー */ --color-brand-16: rgba( 61, 165, 196, 0.16); /* フォーカスリング */ --color-brand-24: rgba(127, 206, 223, 0.24); /* テキストマーカー */ /* -------- 背景：白〜オフホワイトの三層 -------- */ --color-bg: #FFFFFF; /* 純白：ベース */ --color-bg-soft: #F8FBFC; /* かすかに青を含むオフホワイト：セクション交互 */ --color-bg-warm: #FCFAF6; /* かすかに黄を含む温白：手紙・引用 */ --color-bg-pale: #EAF6FA; /* 薄いブランド水色：強調引用のみに限定 */ /* -------- テキスト：純黒は使わない -------- */ --color-text: #1A2A35; /* 本文 */ --color-text-strong: #0F1E29; /* 強調本文（ごく稀に） */ --color-text-mute: #5C6F7B; /* 補助テキスト */ --color-text-soft: #5A6C79; /* キャプション・注記（WCAG AA 4.7:1） */ --color-text-faint: #B4C0C7; /* 罫線レベルの極薄文字 */ /* -------- 罫線：4段階 -------- */ --color-line-strong: #C7D3D9; /* 強い罫線（ほぼ未使用） */ --color-line: #DDE7EC; /* 標準罫線 */ --color-line-soft: #ECF2F5; /* 薄い罫線 */ --color-line-faint: #F5F8FA; /* ほぼ消える罫線 */ /* -------- 機能色 -------- */ --color-focus: #1B5A7A; /* フォーカスリング */ /* ========================================================= 2. タイポグラフィ ───────────────────────────────────────────── 役割： - Noto Sans JP：本文・見出しのすべて（軸） - Cormorant Garamond Italic：装飾欧文・数字（点として） - Noto Sans：欧文の補助（電話番号など） ========================================================= */ /* -------- フォントファミリー -------- */ --font-jp: "Noto Sans JP", "Yu Gothic", "游ゴシック", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; --font-en: "Noto Sans", "Helvetica Neue", Arial, sans-serif; --font-display: "Cormorant Garamond", "Noto Serif JP", "游明朝", "Yu Mincho", serif; /* -------- タイポグラフィスケール（モジュラー約 1.250 / 流体） -------- 役割マッピング： - text-caption … 注記・キャプション・凡例 - text-xs … ラベル・タグ - text-sm … 補助テキスト・カードボディ - text-base … 本文（基準 16px） - text-md … 本文強調・FAQ Q - text-lg … h4 / 中見出し - text-xl … h3 / カード見出し - text-2xl … h2 / セクション見出し - text-3xl … h1 / ページ見出し - text-display … hero（h1の特殊形） ----------------------------------------------------------- */ --text-caption: clamp(11px, 0.7rem + 0.05vw, 12px); --text-xs: clamp(12px, 0.75rem + 0.05vw, 13px); --text-sm: clamp(13px, 0.8rem + 0.10vw, 14px); --text-base: clamp(15px, 0.9rem + 0.15vw, 16px); --text-md: clamp(16px, 0.95rem + 0.20vw, 18px); --text-lg: clamp(18px, 1.05rem + 0.30vw, 22px); --text-xl: clamp(22px, 1.20rem + 0.60vw, 28px); --text-2xl: clamp(28px, 1.50rem + 1.00vw, 38px); --text-3xl: clamp(34px, 1.80rem + 1.60vw, 52px); --text-display: clamp(40px, 2.00rem + 3.00vw, 76px); /* -------- Cormorant Garamond（装飾欧文）専用スケール -------- Italic 限定で、本文と並んだときに「主張しすぎず、ただ静かに在る」 大きさに調整。 ----------------------------------------------------------- */ --display-eyebrow: clamp(12px, 0.8rem + 0.10vw, 14px); /* ラベル系 */ --display-inline: clamp(14px, 0.9rem + 0.15vw, 18px); /* インライン引用・サイン */ --display-num: clamp(22px, 1.4rem + 0.40vw, 28px); /* 番号（小） */ --display-num-lg: clamp(28px, 1.6rem + 0.80vw, 36px); /* 番号（大） */ --display-section: clamp(28px, 1.6rem + 1.20vw, 44px); /* セクション英題 */ --display-hero: clamp(34px, 2.0rem + 1.80vw, 60px); /* ヒーロー英題 */ /* -------- 行間：用途別に5段階 -------- 和文の「料亭」級の静謐さを支えるため、本文〜リードを 1.95〜2.05 に。 行と行のあいだに「呼吸」を残す。 ---------------------------------------------------------- */ --lh-tight: 1.20; /* hero タイトル */ --lh-display: 1.45; /* h1〜h3 */ --lh-snug: 1.65; /* h4〜h5・大きめキャプション */ --lh-body: 1.95; /* 本文（日本語向け） */ --lh-loose: 2.10; /* リード文・引用 */ /* -------- 字間（letter-spacing） -------- */ --ls-tight: -0.01em; --ls-normal: 0.02em; /* 見出し */ --ls-wide: 0.04em; /* 本文・ボタン */ --ls-wider: 0.06em; /* 小ラベル */ --ls-widest: 0.12em; /* 英文 ALL CAPS */ --ls-display: 0.18em; /* SECTION EYEBROW など */ /* -------- 文字ウェイト -------- */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ========================================================= 3. 余白スケール（8の倍数 + 4px の細粒度） ───────────────────────────────────────────── 11段階の数値スケールを「軸」として運用。 名前付きエイリアス（--space-xs 等）は段階的に廃止予定。 ========================================================= */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-32: 128px; --space-40: 160px; /* -------- セクション間の流体余白 -------- 画面幅により 96〜240px の間で滑らかに変化。 "1.5倍に引き上げ"、セクションを呼吸させる。 ----------------------------------------------------------- */ --space-section-y: clamp(96px, 12vw, 192px); --space-section-y-lg: clamp(144px, 16vw, 240px); /* -------- 段落間（generous prose） -------- */ --paragraph-gap: clamp(20px, 1.5vw, 28px); --paragraph-gap-lg: clamp(28px, 2.2vw, 36px); /* -------- 後方互換エイリアス（既存コンポーネント用） -------- 段階的に数値スケールに置き換えていく。 ----------------------------------------------------------- */ --space-2xs: var(--space-1); --space-xs: var(--space-2); --space-sm: var(--space-3); --space-md: var(--space-6); --space-lg: var(--space-8); --space-xl: var(--space-12); --space-2xl: var(--space-16); --space-3xl: var(--space-section-y-lg); /* ========================================================= 4. レイアウト ========================================================= */ --container-max: 1080px; --container-narrow: 780px; --container-wide: 1240px; --container-pad: clamp(20px, 5vw, 40px); --header-h: 72px; /* ========================================================= 5. 角丸（4段階：4 / 8 / 12 / 16） ───────────────────────────────────────────── 用途指針： - radius-sm ：タグ・小バッジ - radius-md ：入力フォーム・小カード・ボタン以外の小要素 - radius-lg ：大カード・引用ブロック・コンテナ - radius-xl ：CTAブロック・ヒーロー要素 - radius-pill：ボタン（pill形）・badge-list ========================================================= */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; /* ========================================================= 6. シャドウ（極めて控えめに 4段階） ───────────────────────────────────────────── ブランドカラー（#1B5A7A）に色付けすることで、 グレーシャドウの「医療系テンプレ感」を回避。 不透明度を低く保ち、雰囲気として効かせる。 用途指針： - shadow-xs：入力フォームの軽いリフト - shadow-sm：ボタン hover の最小限のリフト - shadow-md：カード hover - shadow-lg：モーダル・浮遊要素 ========================================================= */ --shadow-xs: 0 1px 2px rgba(27, 90, 122, 0.04); --shadow-sm: 0 2px 6px rgba(27, 90, 122, 0.05), 0 1px 2px rgba(27, 90, 122, 0.03); --shadow-md: 0 8px 24px rgba(27, 90, 122, 0.06), 0 2px 4px rgba(27, 90, 122, 0.03); --shadow-lg: 0 16px 40px rgba(27, 90, 122, 0.08), 0 4px 8px rgba(27, 90, 122, 0.04); /* ========================================================= 7. アニメーション・トランジション（3段階） ───────────────────────────────────────────── 用途指針： - duration-fast (200ms)：色・border・opacity の小変化 - duration-base (400ms)：transform・layout の中変化 - duration-slow (600ms)：エントランス・スクロール演出 ========================================================= */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* 標準 ease-out */ --ease-out-soft: cubic-bezier(0.16, 1.00, 0.30, 1); /* expo-out 系 */ --ease-in-out: cubic-bezier(0.65, 0.00, 0.35, 1); --duration-fast: 200ms; --duration-base: 400ms; --duration-slow: 600ms; /* デフォルトのトランジション（コンポーネントが個別に上書き） */ --transition-color: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); --transition-base: all var(--duration-base) var(--ease-out); /* -------- 後方互換エイリアス -------- */ --duration-normal: var(--duration-base); --ease-out-expo: var(--ease-out-soft); --ease-out-quart: var(--ease-out); /* ========================================================= 8. z-index ========================================================= */ --z-header: 100; --z-overlay: 500; --z-modal: 1000; } /* ========================================================= レスポンシブ調整 ========================================================= */ @media (min-width: 768px) { :root { --header-h: 88px; } } /* ========================================================= モーション軽減を尊重 ========================================================= */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-normal: 0ms; } }