/* ================================================================= * tokens.css — デザイントークン（Figma スタイルガイド 3860:94537 準拠） * 唯一の正は Figma。Figma 側でトークンが増減したらここを更新する。 * =================================================================*/ :root { /* ----------------------------------------------------------------- * Color（Figma 名 → CSS 変数名 1:1 対応） * ----------------------------------------------------------------- */ /* ブランドカラー */ --color-key: #FF6243; /* Figma: Key Color */ --color-secondary: #00889A; /* Figma: Secondary Color */ --color-orange-01: #FF9143; /* Figma: Orange01 */ --color-light-orange-01: #FFD5B2; /* Figma: Light_Orange01 */ --color-light-orange-02: #FCE9DD; /* Figma: Light_Orange02 */ /* 背景 */ --color-bg-01: #FBF9F8; /* Figma: Back Ground01 */ --color-bg-02: #F5F2F0; /* Figma: Back Ground02 */ --color-bg-03: #EAE5E1; /* Figma: Back Ground03 */ --color-bg-secondary: #F1F1F4; /* Figma: Light/Background/Secondary */ /* ニュートラル / テキスト */ --color-neutral-01: #333333; /* Figma: Neutral 01 (Default font color) */ --color-neutral-02: #787878; /* Figma: Neutral 02 (Secondary font color) */ --color-neutral-03: #CACACA; /* Figma: Neutral 03 */ --color-neutral-04: #D9D9D9; /* Figma: Neutral 04 (line color) */ --color-grey-900: #1A1A1A; /* Figma: Color 2.0/Neutral/Solid Grey-900 */ --color-text-body: #1A1A1C; /* Figma: Light/Text/Body */ /* ステータス */ --color-alert: #E80000; /* Figma: Alert_Error */ /* 補助色 */ --color-blue-01: #DCEDEF; /* 旧 --blue-01 (rgba(220,237,239,1)) と等価 */ /* ユーティリティ（Figmaトークンには無いが共通利用） */ --color-white: #FFFFFF; --color-black: #000000; /* カテゴリー・区分カラー（Figma カラーガイドライン 5824:93146 / 5824:93194） */ /* ベーシック 7色（OrangeRed/Orange/DarkCyan は既存と同値で別名運用） */ --color-cat-orange-red: var(--color-key); /* #FF6243 OrangeRed */ --color-cat-orange: var(--color-orange-01); /* #FF9143 Orange */ --color-cat-light-purple: #D57DB2; /* LightPurple */ --color-cat-purple: #9D75D5; /* Purple */ --color-cat-blue: #1F70B9; /* Blue */ --color-cat-dark-cyan: var(--color-secondary); /* #00889A DarkCyan */ --color-cat-green-yellow: #79BF4D; /* GreenYellow */ /* パステル 4色 */ --color-cat-pastel-orange: #FCB17B; --color-cat-pastel-light-purple: #C7AEEB; --color-cat-pastel-blue: #649FD4; --color-cat-pastel-dark-cyan: #46B5C3; /* ----------------------------------------------------------------- * Color セマンティック別名（コンポーネント側はこちらを優先して使う） * ----------------------------------------------------------------- */ --color-text-default: var(--color-neutral-01); --color-text-sub: var(--color-neutral-02); --color-text-disabled: var(--color-neutral-03); --color-bg-disabled: color-mix(in srgb, var(--color-neutral-04) 88%, transparent); /* Figma: Disabled_back (Neutral04 @ 88%) */ --color-border: var(--color-neutral-04); --color-bg-default: var(--color-bg-01); --color-link: var(--color-key); --color-link-hover: var(--color-orange-01); /* ----------------------------------------------------------------- * Typography（Figma スタイルガイド 3874:94542 準拠 / 2026-03-25 作成） * ※ 和文 = Noto Sans JP、英文 = Roboto / Roboto Condensed * ※ tracking = 4% (=0.04em) を見出しに、0% を 14px 以下のテキストに適用 * ※ font-size は実寸固定値（Figma 通り）。流体補間が必要なコンポーネントは * clamp(--fs-*-sp, fluid, --fs-*-pc) を組む。 * ----------------------------------------------------------------- */ --font-jp: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", system-ui, sans-serif; --font-en: "Roboto", "Helvetica Neue", Arial, sans-serif; --font-en-condensed: "Roboto Condensed", "Roboto", "Helvetica Neue", Arial, sans-serif; /* 見出し PC (h1〜h6) */ --fs-h1-pc: 56rem; --fs-h2-pc: 36rem; --fs-h3-pc: 28rem; --fs-h4-pc: 24rem; --fs-h5-pc: 20rem; --fs-h6-pc: 17rem; /* 見出し SP */ --fs-h1-sp: 38rem; --fs-h2-sp: 24rem; --fs-h3-sp: 22rem; --fs-h4-sp: 20rem; --fs-h5-sp: 17rem; --fs-h6-sp: 16rem; /* 本文（PC/SP 共通） */ --fs-body: 16rem; --fs-body-sm: 14rem; --fs-body-xs: 12rem; --fs-caption: 10rem; --fs-label: 18rem; /* リスト/FAQ/説明リストの小見出し（Figma 18px・見出しスケール外） */ /* ページ見出し h1 top title（Figma スタイルガイド 5288:84268） * 英文タイトルは h1 トークン(56/38px)を流用。和文タイトルのみ追加サイズ。 */ --fs-page-title-ja-pc: 46rem; /* 和文タイトル PC */ --fs-page-title-ja-sp: 30rem; /* 和文タイトル SP */ /* line-height（Figma 個別指定） */ --lh-h1-pc: 1.5; --lh-h1-sp: 1.0; --lh-h2-pc: 1.5; --lh-h2-sp: 1.8; --lh-h3-pc: 1.5; --lh-h3-sp: 1.5; --lh-h4-pc: 1.5; --lh-h4-sp: 1.8; --lh-h5-pc: 1.5; --lh-h5-sp: 1.8; --lh-h6-pc: 1.5; --lh-h6-sp: 1.8; --lh-body: 1.75; /* 汎用 line-height 別名 */ --lh-none: 1.0; --lh-tight: 1.25; --lh-snug: 1.5; --lh-normal: 1.75; --lh-loose: 1.8; /* font-weight */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* letter-spacing（Figma 4% / 0%） */ --letter-spacing-heading: 0.04em; --letter-spacing-body: 0.04em; /* 16px 以上 */ --letter-spacing-small: 0; /* 14px 以下 */ /* ----------------------------------------------------------------- * Spacing（8の倍数を基本とする） * ----------------------------------------------------------------- */ --space-0: 0; --space-1: 4rem; --space-2: 8rem; --space-3: 12rem; --space-4: 16rem; --space-5: 24rem; --space-6: 32rem; --space-7: 48rem; --space-8: 64rem; --space-9: 96rem; --space-10: 128rem; /* セマンティック別名 */ --space-section-pc: var(--space-10); /* 128px */ --space-section-sp: var(--space-8); /* 64px */ --space-gutter-pc: var(--space-6); /* 32px */ --space-gutter-sp: var(--space-4); /* 16px */ /* ----------------------------------------------------------------- * Layout * ----------------------------------------------------------------- */ --design-width-pc: 1440px; /* 参照用の設計幅(viewport px)。流体化対象外でピン */ --design-width-sp: 390px; /* 参照用の設計幅(viewport px)。流体化対象外でピン */ --content-max: 1280rem; /* PC1440 - 余白合計160px の目安 */ --footer-content-max: 1300rem; /* フッター系セクション(PICK UP/ONLINE STORE/CONTACT/フッター本体): PC1440 - 70px×2 */ /* Breakpoint（メディアクエリ内では使えない参照値） */ --bp-sp: 1023.98px; /* viewport px しきい値。流体化対象外でピン */ /* ----------------------------------------------------------------- * Fluid scaling（流体ズーム / security-himeji.jp 方式） * base.css の html { font-size: calc(var(--vw) / var(--base-vw)) } と対。 * 設計幅ちょうどで 1rem = 設計1px になり、px 値をそのまま rem で書ける。 * --vw は app.blade.php の inline JS が clientWidth(px) を毎リサイズ注入。 * 未注入時のフォールバックは 100vw（スクロールバー幅ぶん誤差）。 * --base-vw は除算用なので単位なし数値（design-width-* の px なし版）。 * ブレークポイント据置: <1024 は SP設計幅(390)、≥1024 は PC設計幅(1440)を基準。 * 上限キャップなし（1440 超も等比拡大を継続）。 * ----------------------------------------------------------------- */ --base-vw: 390; /* < 1024px : 1rem = 1px @390（タブレット帯も SP 基準） */ /* ----------------------------------------------------------------- * Header / Footer 専用トークン * ※ Phase 4 で「文字・画像を縮小しない」運用に切替する場合は * ここの値を clamp() から固定 px に差し替えるだけで完結する。 * ----------------------------------------------------------------- */ --header-height-pc: 120rem; --header-height-sp: 64rem; --header-z: 100; --footer-z: 10; /* ----------------------------------------------------------------- * Radius / Shadow / Motion * ----------------------------------------------------------------- */ --radius-sm: 4rem; --radius-md: 8rem; --radius-lg: 16rem; --radius-xl: 32rem; /* Figma: 画像スタイルガイド 5407:89815（画像の角丸） */ --radius-pill: 9999rem; /* Figma: メニュー用ドロップシャドウ (offset 0/8, radius 30, spread 0, color #6F6F6F33 = 20% opacity) */ --shadow-menu: 0 8rem 30rem 0 rgba(111, 111, 111, 0.2); --shadow-card: 0 4rem 16rem 0 rgba(0, 0, 0, 0.08); --easing-default: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; } /* Fluid scaling: ≥1024px は PC 設計幅(1440)基準へ切替（レイアウト境界 1024 と一致） */ @media (min-width: 1024px) { :root { --base-vw: 1440; } /* 1rem = 1px @1440 */ }