/* ================================================================= 共有デザイントークンサイトと予約システムの両方が読み込む。フレームワークが違っても、ここを揃えれば「同じサイトの中で予約している」見た目になる。予約システム側の public/*.html にも、このファイルを読み込ませること。色・余白・角丸・文字を、他の場所に直書きしない。更新: 2026-08-20（ページ幅の段階を追加。サイト側は全ページがこれを読む） ================================================================= */ :root { /* --- 墨と紙 ---------------------------------------------------- */ --ink: #1a1917; /* 本文・見出し */ --ink-2: #6f6c66; /* 補足 */ --ink-3: #a8a49c; /* 最小限のラベル */ --paper: #ffffff; --wash: #f8f7f5; /* 面の切り替え */ --line: #eae8e3; /* 罫線 */ --line-2: #d8d5ce; /* やや強い罫線・ボタン枠 */ --field: #8a867e; /* 入力欄の枠。白に対し3.6:1、--wash に対し3.4:1。 UI部品の輪郭は3:1以上（WCAG 1.4.11）。薄くしないこと */ /* --- ブランド色 ------------------------------------------------- ロゴの青。使いどころは2つだけ。・押すと先へ進むもの（塗りのボタン）・いま選ばれているもの（チップ・チェック・選択日）必須バッジやNEWなどのラベルは墨のまま。青が「押せる／選ばれている」の合図として働かなくなるため。白抜き文字とのコントラストは 5.7:1。 */ --key: #0068b7; --key-d: #005694; /* 押している間 */ --key-w: #eef5fb; /* ごく薄い面 */ /* --- カレンダーの状態色 ----------------------------------------- ここだけは色数を持たせる。予約の可否は一目で分かる必要があり、記号（○△×）だけでは色覚特性のある方に伝わりにくいため、色・記号・文字の3つで重ねて示す。文字色はいずれも白地で 5.3:1 以上（AA適合）。 */ --ok: #0f7b3f; --ok-w: #eaf6ef; /* 空きあり */ --few: #9a5b00; --few-w: #fdf4e3; /* 残りわずか・商談中 */ --full: #c02a1e; --full-w: #fdeceb; /* 満枠 */ --closed: #6f6c66; --closed-w: #f1f0ee; /* 休業 */ --sun: #c02a1e; /* 日曜・祝日の日付 */ --sat: #0068b7; /* 土曜の日付 */ --holiday-w: #fcfaf4; /* 土日祝のセル地 */ /* --- 形 -------------------------------------------------------- 予約システム側のUIに合わせる。3段階だけ持つ。画面の端まで伸びるもの（ヘッダー・フッター・固定バー・帯）は丸めない。 */ --r: 8px; /* 押すもの・入力欄 */ --r-lg: 12px; /* 写真・囲み・罫線グリッド */ --r-pill: 999px; /* チップ・タグ・バッジ */ --tap: 44px; /* タップ領域の最小 */ --pad: 16px; /* 画面端の余白（PCでは24px） */ /* --- ページの幅 -------------------------------------------------- 読む量と写真の大きさで4段階だけ持つ。ページごとに数字を決めない。どの段を使うかはで指定する（既定は w-wide）。 */ --w-read: 760px; /* 読み物・フォーム（規約・お問い合わせ・見学） */ --w-list: 900px; /* 一覧（用途カテゴリ・エリア） */ --w-page: 960px; /* 標準（トップ・サイトマップ） */ --w-wide: 1080px; /* 写真が主役（施設・記事・ガイド） */ --maxw: var(--w-wide); /* --- 文字 —— Webフォントは読み込まない ------------------------- */ --f-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif; --f-num: ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace; }