@charset "UTF-8"; /* ========================================================================== 特養入居受付システム — デザインシステム 配色：横浜ブルー（海と港のまち）を基調に、福祉らしい落ち着きを足す。 　　　横浜市の色は青。**飾りに使う色は青系だけ**にする（帯・入口・手続きの色分け・グラフ）。 　　　緑・黄・赤は意味を持つ色として取ってあるので、飾りには使わない。 　　　　緑＝済んだこと／受理　黄＝注意　赤＝できないこと／エラー 利用者：市民側は40〜50代（本人の息子・娘世代）が中心。 → 本文16px以上／コントラストAA以上／タップ領域44px以上。 表示設定（ヘッダの「表示」） を切り替えて見え方を変える。 data-theme : auto（端末に合わせる）／light／dark／cvd（色覚サポート） ／contrast（ハイコントラスト）／sepia（目にやさしい） data-font : s（小）／m（標準）／l（大）／xl（特大） 色は下の「トークン」だけを使って書く。生の色コードを部品側に書かない。 ※ dark の中身は「auto＋端末がダーク」用と「dark 指定」用の2か所にある。 片方だけ直さないこと。 ========================================================================== */ /* ============================== トークン（ライト＝既定） ============================== */ :root { color-scheme: light; /* --- 横浜ブルー系（主色） --- */ --yb-50: #EEF6FD; --yb-100: #D7EAFA; --yb-200: #AFD3F3; --yb-300: #7BB6E8; --yb-400: #3D8FD6; --yb-500: #0F6FC2; /* 標準 */ --yb-600: #005BAC; /* 横浜ブルー */ --yb-700: #00457F; --yb-800: #00325C; --yb-900: #002440; /* --- みなとブルー（副色・アクセント） --- 主色より一段明るい青。青緑（ティール）に振らず、色相は青の範囲（200度前後）に収める。 横浜市の色は青なので、装飾に使う色はここと横浜ブルーの2つだけで足りるようにしてある。 */ --aq-50: #DFEFF9; --aq-200: #A8D0E8; --aq-500: #1585BC; --aq-600: #0A6C99; --aq-700: #08536F; /* --- 中立色（少し暖かいグレー） --- いちばん明るい面は純白にしない。長時間見る業務画面でまぶしくならないよう、 白の手前（L*97〜98）で止めて、面どうしの差だけを残す。印刷は print.css で純白に戻す。 */ --n-0: #F8F9FA; --n-25: #F4F5F7; --n-50: #EDEFF2; --n-100: #E4E7EA; --n-200: #DCE0E4; --n-300: #C2C8CE; --n-400: #98A1AA; --n-500: #69737E; --n-600: #545D67; --n-700: #3D454E; --n-800: #272D34; --n-900: #171B20; /* --- 意味色 --- */ --ok-50: #E8F6EE; --ok-500: #0E7A4F; --ok-700: #095A3A; --wa-50: #FDF3E3; --wa-500: #A66200; --wa-700: #7A4900; --dg-50: #FDECEC; --dg-500: #B3261E; --dg-700: #8A1C16; --in-50: #EEF6FD; --in-500: var(--yb-600); /* 蛍光ペン。値そのものを塗るのではなく、下側だけ引く（数字が読みにくくならないように） */ --hl: #BCDDF5; --head-bg: #E9F0F7; /* --- 面と文字 --- */ --bg: var(--n-50); --surface: var(--n-0); --surface-2: var(--n-25); --line: var(--n-200); --line-soft: var(--n-100); --text: var(--n-800); --text-2: var(--n-600); --text-3: var(--n-500); /* --- 主色の使い分け --- */ --brand: var(--yb-600); /* リンク・強調の文字 */ --brand-hover: var(--yb-700); --brand-soft: var(--yb-50); /* 淡い面 */ --brand-soft-hover: var(--yb-200); --brand-strong: var(--yb-700); /* 淡い面の上に置く文字 */ --brand-border: var(--yb-300); /* hover の枠 */ --brand-solid: var(--yb-600); /* 塗りボタン・選択中 */ --brand-solid-hover:var(--yb-700); --on-brand: #FFFFFF; /* 塗りの上の文字 */ --text-on: var(--on-brand);/* 旧名（互換） */ --accent-strong: var(--aq-700); --accent-solid: var(--aq-600); --accent-solid-hover: var(--aq-700); --on-accent: #FFFFFF; --danger-solid: var(--dg-500); --danger-solid-hover: var(--dg-700); --on-danger: #FFFFFF; /* --- 部品の面 --- */ --field-border: #8C949C; --field-arrow: var(--n-500); --placeholder: var(--n-400); --muted-bg: var(--n-100); /* 任意ラベル・コード等の下地 */ --disabled-bg: var(--n-50); --hover-bg: var(--n-50); --track: var(--n-100); /* 進捗・棒グラフの下地 */ --scan-bg: var(--n-100); /* スキャン画像の余白 */ --thead-bg: var(--yb-50); --thead-text: var(--yb-800); --thead-border: var(--yb-200); --progress-fill: linear-gradient(90deg, var(--yb-600), var(--aq-500)); /* --- 見出しの帯 --- この帯の青が画面全体の基調。左を濃く、右をわずかに明るくするだけで、 色相は横浜ブルーから動かさない（緑や青緑を混ぜない）。 */ --topbar-bg: linear-gradient(100deg, var(--yb-800) 0%, var(--yb-600) 55%, var(--yb-500) 140%); --topbar-fg: #FFFFFF; --topbar-on-fg: var(--yb-700); /* 帯の中で白地に置く文字 */ --topbar-border: transparent; --topbar-hover: rgba(255,255,255,.16); --topbar-active: rgba(255,255,255,.22); --topbar-active-border: rgba(255,255,255,.34); --topbar-chip: rgba(0,0,0,.16); /* --- 注意書きの枠 --- */ --note-in-border: var(--yb-200); --note-ok-border: #9BD3B5; --note-wa-border: #E3C58A; --note-dg-border: #E7A9A5; /* --- ログイン画面の背景 --- */ --auth-bg: radial-gradient(1100px 520px at 12% -8%, var(--yb-100), transparent 60%), radial-gradient(900px 480px at 100% 0%, var(--aq-50), transparent 55%), var(--bg); /* --- 形 --- */ --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px; --bw: 1px; /* 枠の太さ（ハイコントラストで太くする） */ --sh-1: 0 1px 2px rgba(0,36,64,.06), 0 1px 3px rgba(0,36,64,.05); --sh-2: 0 2px 4px rgba(0,36,64,.06), 0 4px 12px rgba(0,36,64,.07); --sh-3: 0 6px 16px rgba(0,36,64,.10), 0 12px 32px rgba(0,36,64,.08); --ring: 0 0 0 3px rgba(0,91,172,.32); --focus: var(--brand-solid); --focus-w: 2px; /* --- 字 --- */ --font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif; --font-num: "Segoe UI", system-ui, -apple-system, sans-serif; --fs-scale: 1; /* 文字サイズ設定（data-font）で変わる */ --fs-base: 1rem; --lh-base: 1.85; /* --- 間隔 --- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px; --tap: 44px; /* --header-h は帯の最低の高さ。--header-now は tokuyo.js が入れる実測値で、 「帯の下に貼り付く」要素の位置だけに使う（--header-h に書き戻すと帯が伸び続ける）。 */ --header-h: 64px; } /* 業務画面は毎日使うので高密度にする。 1画面に必要な情報が収まるよう、間隔のトークンを一段小さくする。 （市民向けの画面は :root の値のままで、タップ領域44px・行間1.85を保つ） */ .app-shell { --fs-base: .94rem; --lh-base: 1.6; --s-5: 14px; --s-6: 16px; --s-7: 20px; --s-8: 26px; --s-9: 32px; --s-10: 40px; --tap: 38px; --header-h: 56px; } /* ============================== 文字サイズ ============================== */ /* rem を基準に組んでいるので、html の文字サイズを変えれば全体が拡大縮小する。 */ :root[data-font="s"] { --fs-scale: .92; } :root[data-font="m"] { --fs-scale: 1; } :root[data-font="l"] { --fs-scale: 1.15; } :root[data-font="xl"] { --fs-scale: 1.3; } /* ============================== 配色テーマ ============================== */ :root[data-theme="auto"], :root:not([data-theme]) { color-scheme: light dark; } :root[data-theme="light"] { color-scheme: light; } /* ---- ダーク（端末の設定に合わせる場合） ---- */ @media (prefers-color-scheme: dark) { :root[data-theme="auto"], :root:not([data-theme]) { --yb-50:#14273A; --yb-100:#1B3550; --yb-200:#2A4B6C; --yb-300:#3C6B93; --yb-400:#4E8CBE; --yb-500:#58A6E8; --yb-600:#6DB4EE; --yb-700:#9CC8EE; --yb-800:#C4DDF5; --yb-900:#E4F0FB; --aq-50:#0D262A; --aq-200:#2A5A60; --aq-500:#3FBFCC; --aq-600:#0E7A86; --aq-700:#62D2DE; --n-0:#171D25; --n-25:#1B222B; --n-50:#1D242D; --n-100:#232B34; --n-200:#2C3641; --n-300:#3A4550; --n-400:#5B6672; --n-500:#8B95A0; --n-600:#AEB8C2; --n-700:#CBD3DB; --n-800:#E6EAEE; --n-900:#F2F5F8; --ok-50:#0F2A1E; --ok-500:#3FB37C; --ok-700:#7FDCAE; --wa-50:#2B2113; --wa-500:#D19A3A; --wa-700:#F0C177; --dg-50:#2E1715; --dg-500:#E0736A; --dg-700:#F5A69E; --in-50:#16283A; --hl:#2C5A63; --head-bg:#1E2733; --bg:#10151B; --surface:#171D25; --surface-2:#1D242D; --line:#2C3641; --line-soft:#232B34; --text:#E6EAEE; --text-2:#AEB8C2; --text-3:#909BA6; --brand:#6DB4EE; --brand-hover:#93CAF4; --brand-soft:#16283A; --brand-soft-hover:#1F3D57; --brand-strong:#9CC8EE; --brand-border:#3C6B93; --brand-solid:#1E6FB0; --brand-solid-hover:#2A82C8; --on-brand:#FFFFFF; --accent-strong:#62D2DE; --accent-solid:#0E7A86; --accent-solid-hover:#14929F; --on-accent:#FFFFFF; --danger-solid:#B3372C; --danger-solid-hover:#C9483C; --on-danger:#FFFFFF; --field-border:#5F6C7A; --field-arrow:#9AA4AF; --placeholder:#7C8794; --muted-bg:#28313B; --disabled-bg:#1B222B; --hover-bg:#222A34; --track:#28313B; --scan-bg:#0C1014; --thead-bg:#1E2833; --thead-text:#9CC8EE; --thead-border:#2C3641; --progress-fill: linear-gradient(90deg, #2A82C8, #3FBFCC); --topbar-bg: linear-gradient(100deg, #0E2740 0%, #123A5E 55%, #0E5560 140%); --topbar-fg:#E9EEF3; --topbar-on-fg:#0E2740; --topbar-border:#22303D; --topbar-hover: rgba(255,255,255,.12); --topbar-active: rgba(255,255,255,.18); --topbar-active-border: rgba(255,255,255,.26); --topbar-chip: rgba(0,0,0,.28); --note-in-border:#2B4A66; --note-ok-border:#2E6B4C; --note-wa-border:#7A5C22; --note-dg-border:#7E3A33; --auth-bg: radial-gradient(1100px 520px at 12% -8%, #14304A, transparent 60%), radial-gradient(900px 480px at 100% 0%, #0D262A, transparent 55%), var(--bg); --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 2px 8px rgba(0,0,0,.45); --sh-3: 0 8px 24px rgba(0,0,0,.5); --ring: 0 0 0 3px rgba(109,180,238,.4); --focus: var(--brand); } } /* ---- ダーク（利用者が選んだ場合。上の @media と同じ内容） ---- */ :root[data-theme="dark"] { color-scheme: dark; --yb-50:#14273A; --yb-100:#1B3550; --yb-200:#2A4B6C; --yb-300:#3C6B93; --yb-400:#4E8CBE; --yb-500:#58A6E8; --yb-600:#6DB4EE; --yb-700:#9CC8EE; --yb-800:#C4DDF5; --yb-900:#E4F0FB; --aq-50:#0D262A; --aq-200:#2A5A60; --aq-500:#3FBFCC; --aq-600:#0E7A86; --aq-700:#62D2DE; --n-0:#171D25; --n-25:#1B222B; --n-50:#1D242D; --n-100:#232B34; --n-200:#2C3641; --n-300:#3A4550; --n-400:#5B6672; --n-500:#8B95A0; --n-600:#AEB8C2; --n-700:#CBD3DB; --n-800:#E6EAEE; --n-900:#F2F5F8; --ok-50:#0F2A1E; --ok-500:#3FB37C; --ok-700:#7FDCAE; --wa-50:#2B2113; --wa-500:#D19A3A; --wa-700:#F0C177; --dg-50:#2E1715; --dg-500:#E0736A; --dg-700:#F5A69E; --in-50:#16283A; --hl:#2C5A63; --head-bg:#1E2733; --bg:#10151B; --surface:#171D25; --surface-2:#1D242D; --line:#2C3641; --line-soft:#232B34; --text:#E6EAEE; --text-2:#AEB8C2; --text-3:#909BA6; --brand:#6DB4EE; --brand-hover:#93CAF4; --brand-soft:#16283A; --brand-soft-hover:#1F3D57; --brand-strong:#9CC8EE; --brand-border:#3C6B93; --brand-solid:#1E6FB0; --brand-solid-hover:#2A82C8; --on-brand:#FFFFFF; --accent-strong:#62D2DE; --accent-solid:#0E7A86; --accent-solid-hover:#14929F; --on-accent:#FFFFFF; --danger-solid:#B3372C; --danger-solid-hover:#C9483C; --on-danger:#FFFFFF; --field-border:#5F6C7A; --field-arrow:#9AA4AF; --placeholder:#7C8794; --muted-bg:#28313B; --disabled-bg:#1B222B; --hover-bg:#222A34; --track:#28313B; --scan-bg:#0C1014; --thead-bg:#1E2833; --thead-text:#9CC8EE; --thead-border:#2C3641; --progress-fill: linear-gradient(90deg, #2A82C8, #3FBFCC); --topbar-bg: linear-gradient(100deg, #0E2740 0%, #123A5E 55%, #0E5560 140%); --topbar-fg:#E9EEF3; --topbar-on-fg:#0E2740; --topbar-border:#22303D; --topbar-hover: rgba(255,255,255,.12); --topbar-active: rgba(255,255,255,.18); --topbar-active-border: rgba(255,255,255,.26); --topbar-chip: rgba(0,0,0,.28); --note-in-border:#2B4A66; --note-ok-border:#2E6B4C; --note-wa-border:#7A5C22; --note-dg-border:#7E3A33; --auth-bg: radial-gradient(1100px 520px at 12% -8%, #14304A, transparent 60%), radial-gradient(900px 480px at 100% 0%, #0D262A, transparent 55%), var(--bg); --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 2px 8px rgba(0,0,0,.45); --sh-3: 0 8px 24px rgba(0,0,0,.5); --ring: 0 0 0 3px rgba(109,180,238,.4); --focus: var(--brand); } /* ---- 色覚サポート（赤緑が見分けにくい方向け） ---- 赤＝朱（vermillion）、緑＝青緑、注意＝黄、副色＝赤紫。 Okabe & Ito の「色覚バリアフリーな配色」を下敷きに、文字用へ暗くしたもの。 色だけに頼らないよう、バッジには記号を、経過の印には線の種類を足す。 */ :root[data-theme="cvd"] { color-scheme: light; --yb-50:#E8F1FA; --yb-100:#CFE3F6; --yb-200:#A9CBEC; --yb-300:#6FA6DA; --yb-400:#2E7EBF; --yb-500:#0F6BAE; --yb-600:#0072B2; --yb-700:#005286; --yb-800:#003A60; --yb-900:#002843; --aq-50:#F7E9F1; --aq-200:#E4BDD3; --aq-500:#B2508A; --aq-600:#96376F; --aq-700:#7A2C5B; --ok-50:#DFF3EC; --ok-500:#00795F; --ok-700:#00604B; --wa-50:#FFF6D6; --wa-500:#C08A00; --wa-700:#7A5A00; --dg-50:#FDE8DC; --dg-500:#D55E00; --dg-700:#A03F00; --in-50:#E8F1FA; --hl:#FFE08A; --head-bg:#E9F0F7; --brand:var(--yb-600); --brand-hover:var(--yb-700); --brand-soft:var(--yb-50); --brand-soft-hover:var(--yb-200); --brand-strong:var(--yb-700); --brand-border:var(--yb-300); --brand-solid:#0072B2; --brand-solid-hover:#005286; --on-brand:#FFFFFF; --accent-strong:#7A2C5B; --accent-solid:#96376F; --accent-solid-hover:#7A2C5B; --on-accent:#FFFFFF; --danger-solid:#B84A00; --danger-solid-hover:#8F3900; --on-danger:#FFFFFF; --thead-bg:#E8F1FA; --thead-text:#003A60; --thead-border:#A9CBEC; --progress-fill: linear-gradient(90deg, #0072B2, #B2508A); --topbar-bg: linear-gradient(100deg, #004E80 0%, #0072B2 55%, #96376F 150%); --note-in-border:#A9CBEC; --note-ok-border:#7FBFAE; --note-wa-border:#DCC066; --note-dg-border:#E9A57E; --auth-bg: radial-gradient(1100px 520px at 12% -8%, #CFE3F6, transparent 60%), radial-gradient(900px 480px at 100% 0%, #F7E9F1, transparent 55%), var(--bg); --ring: 0 0 0 3px rgba(0,114,178,.35); } /* ---- ハイコントラスト（黒背景・黄文字。弱視の方・まぶしさに弱い方向け） ---- */ :root[data-theme="contrast"] { color-scheme: dark; --yb-50:#1A1500; --yb-100:#332A00; --yb-200:#4D3F00; --yb-300:#FFE14D; --yb-400:#FFE14D; --yb-500:#FFE14D; --yb-600:#FFE14D; --yb-700:#FFE14D; --yb-800:#FFE14D; --yb-900:#FFF3B0; --aq-50:#00171F; --aq-200:#00394D; --aq-500:#7FE0FF; --aq-600:#7FE0FF; --aq-700:#7FE0FF; --n-0:#000000; --n-25:#0D0D0D; --n-50:#141414; --n-100:#1F1F1F; --n-200:#4D4D4D; --n-300:#FFFFFF; --n-400:#C8C8C8; --n-500:#D8D8D8; --n-600:#E8E8E8; --n-700:#F5F5F5; --n-800:#FFFFFF; --n-900:#FFFFFF; --ok-50:#00170E; --ok-500:#5BE49B; --ok-700:#8CF3BE; --wa-50:#1F1500; --wa-500:#FFC24D; --wa-700:#FFD98A; --dg-50:#26100C; --dg-500:#FF8B7A; --dg-700:#FFB3A6; --in-50:#00121F; --hl:#7A5F00; --head-bg:#0D0D0D; --bg:#000000; --surface:#000000; --surface-2:#0D0D0D; --line:#FFFFFF; --line-soft:#8A8A8A; --text:#FFFFFF; --text-2:#F0F0F0; --text-3:#D0D0D0; --brand:#FFE14D; --brand-hover:#FFF0A0; --brand-soft:#1A1500; --brand-soft-hover:#332A00; --brand-strong:#FFE14D; --brand-border:#FFE14D; --brand-solid:#FFE14D; --brand-solid-hover:#FFF0A0; --on-brand:#000000; --accent-strong:#7FE0FF; --accent-solid:#7FE0FF; --accent-solid-hover:#B0EEFF; --on-accent:#000000; --danger-solid:#FF8B7A; --danger-solid-hover:#FFB3A6; --on-danger:#000000; --field-border:#FFFFFF; --field-arrow:#FFFFFF; --placeholder:#C8C8C8; --muted-bg:#1F1F1F; --disabled-bg:#141414; --hover-bg:#262626; --track:#3A3A3A; --scan-bg:#000000; --thead-bg:#1A1500; --thead-text:#FFE14D; --thead-border:#FFE14D; --progress-fill: #FFE14D; --topbar-bg:#000000; --topbar-fg:#FFE14D; --topbar-on-fg:#000000; --topbar-border:#FFE14D; --topbar-hover: rgba(255,225,77,.22); --topbar-active: rgba(255,225,77,.34); --topbar-active-border:#FFE14D; --topbar-chip: rgba(255,225,77,.14); --note-in-border:#7FE0FF; --note-ok-border:#5BE49B; --note-wa-border:#FFC24D; --note-dg-border:#FF8B7A; --auth-bg:#000000; --bw: 2px; --sh-1: none; --sh-2: none; --sh-3: none; --ring: 0 0 0 3px rgba(255,225,77,.55); --focus:#FFE14D; --focus-w: 3px; } /* ---- セピア（白のまぶしさをおさえた暖色） ---- */ :root[data-theme="sepia"] { color-scheme: light; --yb-50:#E7EFF5; --yb-100:#CFE0EB; --yb-200:#A9C7DA; --yb-300:#7FA9C4; --yb-400:#3E7CA0; --yb-500:#1A6690; --yb-600:#0E5C8A; --yb-700:#0A466B; --yb-800:#083550; --yb-900:#062639; --aq-50:#E2F0EF; --aq-200:#A9D5D2; --aq-500:#0F8A8E; --aq-600:#0A6E76; --aq-700:#08575E; --n-0:#FBF4E7; --n-25:#F8F0E1; --n-50:#F3E9D8; --n-100:#EDE1CB; --n-200:#DDCDB0; --n-300:#C9B695; --n-400:#A28E6F; --n-500:#7A6B5B; --n-600:#5C4F42; --n-700:#4A3F35; --n-800:#3A312A; --n-900:#2A231D; --ok-50:#E4F1E3; --ok-500:#2F6B3C; --ok-700:#22522D; --wa-50:#FBEED2; --wa-500:#9A6208; --wa-700:#6E4505; --dg-50:#FAE4DE; --dg-500:#A63A28; --dg-700:#7E2A1C; --in-50:#E7EFF5; --hl:#D8E4E7; --head-bg:#F1E6D2; --bg:#F3E9D8; --surface:#FBF4E7; --surface-2:#F6EDDD; --line:#DDCDB0; --line-soft:#EADFC9; --text:#3A312A; --text-2:#5C4F42; --text-3:#7A6B5B; --brand:#0E5C8A; --brand-hover:#0A466B; --brand-soft:#E7EFF5; --brand-soft-hover:#CFE0EB; --brand-strong:#0A466B; --brand-border:#7FA9C4; --brand-solid:#0E5C8A; --brand-solid-hover:#0A466B; --on-brand:#FFF9EF; --accent-strong:#08575E; --accent-solid:#0A6E76; --accent-solid-hover:#08575E; --on-accent:#FFF9EF; --danger-solid:#A63A28; --danger-solid-hover:#7E2A1C; --on-danger:#FFF9EF; --field-border:#A08A62; --field-arrow:#6B5C4B; --placeholder:#8A785E; --muted-bg:#EDE1CB; --disabled-bg:#EFE5D3; --hover-bg:#EFE3CE; --track:#E5D8C0; --scan-bg:#EADFC9; --thead-bg:#EFE2CB; --thead-text:#4A3F35; --thead-border:#DDCDB0; --progress-fill: linear-gradient(90deg, #0E5C8A, #0F8A8E); --topbar-bg: linear-gradient(100deg, #5B4632 0%, #6E5740 52%, #7C6B4A 140%); --topbar-fg:#FBF4E7; --topbar-on-fg:#5B4632; --topbar-border:#4A3928; --topbar-hover: rgba(255,255,255,.18); --topbar-active: rgba(255,255,255,.26); --topbar-active-border: rgba(255,255,255,.38); --topbar-chip: rgba(0,0,0,.22); --note-in-border:#A9C7DA; --note-ok-border:#9EC2A0; --note-wa-border:#D9BC7C; --note-dg-border:#D6A193; --auth-bg: radial-gradient(1100px 520px at 12% -8%, #EFE0C4, transparent 60%), radial-gradient(900px 480px at 100% 0%, #E2F0EF, transparent 55%), var(--bg); --sh-1: 0 1px 2px rgba(74,57,40,.10), 0 1px 3px rgba(74,57,40,.08); --sh-2: 0 2px 4px rgba(74,57,40,.10), 0 4px 12px rgba(74,57,40,.10); --sh-3: 0 6px 16px rgba(74,57,40,.14), 0 12px 32px rgba(74,57,40,.12); --ring: 0 0 0 3px rgba(14,92,138,.30); } /* ---- ダークグレー（夜のコンクリート）／いまは非表示 ---- DisplayPreferences で Hidden = true にしてあるので、この配色は選べない （メニューに出ないうえ、Cookie や POST で指定しても弾かれる）。 戻すときは DisplayPreferences.AllThemes と tokuyo.js の ALLOWED.theme を直す。 「ダーク」と同じ暗い枠だが、青みも茶色みも抜いた無彩色の灰で組む。 文字と罫線をダークよりはっきりさせてあるので、本文も主ボタンも読みやすい。 帯（サイド）は明るい色を使わず濃い灰にしてあるので、上に白文字を置いても まぶしくならない。暗い画面が好きな人、夜間・薄暗い事務所向け。 */ :root[data-theme="graphite"] { color-scheme: dark; /* 有彩色は持たせず、灰の段階だけで組む。 ボタンや選択中を示す青みは、主ボタンの #4F5F6E に寄せたわずかな冷たさだけ。 */ --yb-50:#21252A; --yb-100:#2A2E32; --yb-200:#3A3F45; --yb-300:#545C63; --yb-400:#6E7880; --yb-500:#8B959D; --yb-600:#BCC8D2; --yb-700:#CFD8E0; --yb-800:#DEE4EA; --yb-900:#EDEFF1; --aq-50:#21252A; --aq-200:#3A4249; --aq-500:#8FA0AE; --aq-600:#4F5F6E; --aq-700:#BCC8D2; --n-0:#31353A; --n-25:#2E3237; --n-50:#2A2E32; --n-100:#33383D; --n-200:#545C63; --n-300:#697178; --n-400:#8B939A; --n-500:#A6ADB3; --n-600:#B0B6BB; --n-700:#CFD4D8; --n-800:#E1E4E7; --n-900:#EDEFF1; --ok-50:#22282A; --ok-500:#8FB5A2; --ok-700:#B8D8C6; --wa-50:#2A2723; --wa-500:#C0A87E; --wa-700:#DCC9A6; --dg-50:#2C2426; --dg-500:#C79A9A; --dg-700:#E0BCBC; --in-50:#21252A; --hl:#4A555F; --head-bg:#21252A; --bg:#25272A; --surface:#31353A; --surface-2:#2A2E32; --line:#545C63; --line-soft:#3E454B; --text:#EDEFF1; --text-2:#B0B6BB; --text-3:#989EA4; --brand:#BCC8D2; --brand-hover:#D5DEE6; --brand-soft:#2A3138; --brand-soft-hover:#343C44; --brand-strong:#D5DEE6; --brand-border:#545C63; --brand-solid:#4F5F6E; --brand-solid-hover:#607283; --on-brand:#FFFFFF; --accent-strong:#BCC8D2; --accent-solid:#4F5F6E; --accent-solid-hover:#607283; --on-accent:#FFFFFF; --danger-solid:#8A4A46; --danger-solid-hover:#9E5852; --on-danger:#FFFFFF; --field-border:#697178; --field-arrow:#B0B6BB; --placeholder:#8B939A; --muted-bg:#2A2E32; --disabled-bg:#2A2E32; --hover-bg:#3A3F45; --track:#2A2E32; --scan-bg:#1C1E21; --thead-bg:#21252A; --thead-text:#EDEFF1; --thead-border:#545C63; --progress-fill: linear-gradient(90deg, #4F5F6E, #8FA0AE); /* 帯は明るい色を使わない。濃い灰のままにして、上の白文字がまぶしくならないようにする */ --topbar-bg:#17191B; --topbar-fg:#EDEFF1; --topbar-on-fg:#17191B; --topbar-border:#0E0F11; --topbar-hover: rgba(255,255,255,.10); --topbar-active: rgba(255,255,255,.16); --topbar-active-border: rgba(255,255,255,.28); --topbar-chip: rgba(255,255,255,.08); --note-in-border:#545C63; --note-ok-border:#5C7A6A; --note-wa-border:#7A6C4C; --note-dg-border:#7A5450; --auth-bg:#25272A; --sh-1: 0 1px 2px rgba(0,0,0,.45); --sh-2: 0 2px 8px rgba(0,0,0,.5); --sh-3: 0 8px 24px rgba(0,0,0,.55); --ring: 0 0 0 3px rgba(188,200,210,.38); --focus:#BCC8D2; } /* ---- モノクローム（建築図面）／いまは非表示 ---- ダークグレーと同じく DisplayPreferences で Hidden = true。選べない。 色を完全に捨てて、黒・白・灰だけで組む。罫線をほかより濃くしてあるので、 表のマス目がくっきり出る。金額や件数を目で追う作業、明るい事務所、 プロジェクタ投影、印刷前の確認に向く。 そのぶん「押せる場所」は色では示せないので、形と枠で示す（下の上乗せを参照）。 */ :root[data-theme="mono"] { color-scheme: light; --yb-50:#F2F2F2; --yb-100:#E2E2E2; --yb-200:#D4D4D4; --yb-300:#B4B4B4; --yb-400:#8A8A8A; --yb-500:#4A4A4A; --yb-600:#2B2B2B; --yb-700:#232323; --yb-800:#1C1C1C; --yb-900:#111111; --aq-50:#EDEDED; --aq-200:#C8C8C8; --aq-500:#4A4A4A; --aq-600:#2B2B2B; --aq-700:#1C1C1C; --n-0:#FFFFFF; --n-25:#FAFAFA; --n-50:#F2F2F2; --n-100:#E2E2E2; --n-200:#D4D4D4; --n-300:#C0C0C0; --n-400:#9C9C9C; --n-500:#6E6E6E; --n-600:#4A4A4A; --n-700:#333333; --n-800:#222222; --n-900:#111111; --ok-50:#EDEDED; --ok-500:#2B2B2B; --ok-700:#111111; --wa-50:#E8E8E8; --wa-500:#4A4A4A; --wa-700:#232323; --dg-50:#E2E2E2; --dg-500:#232323; --dg-700:#111111; --in-50:#F2F2F2; --hl:#CFCFCF; --head-bg:#E2E2E2; --bg:#D4D4D4; --surface:#FFFFFF; --surface-2:#F2F2F2; --line:#9C9C9C; --line-soft:#C0C0C0; --text:#111111; --text-2:#4A4A4A; --text-3:#6E6E6E; --brand:#232323; --brand-hover:#111111; --brand-soft:#E2E2E2; --brand-soft-hover:#D4D4D4; --brand-strong:#111111; --brand-border:#9C9C9C; --brand-solid:#232323; --brand-solid-hover:#111111; --on-brand:#FFFFFF; --accent-strong:#111111; --accent-solid:#2B2B2B; --accent-solid-hover:#111111; --on-accent:#FFFFFF; --danger-solid:#232323; --danger-solid-hover:#111111; --on-danger:#FFFFFF; --field-border:#6E6E6E; --field-arrow:#4A4A4A; --placeholder:#6E6E6E; --muted-bg:#E2E2E2; --disabled-bg:#EDEDED; --hover-bg:#EDEDED; --track:#D4D4D4; --scan-bg:#E2E2E2; --thead-bg:#E2E2E2; --thead-text:#111111; --thead-border:#9C9C9C; --progress-fill: linear-gradient(90deg, #6E6E6E, #111111); --topbar-bg:#1C1C1C; --topbar-fg:#FFFFFF; --topbar-on-fg:#1C1C1C; --topbar-border:#000000; --topbar-hover: rgba(255,255,255,.16); --topbar-active: rgba(255,255,255,.24); --topbar-active-border: rgba(255,255,255,.42); --topbar-chip: rgba(255,255,255,.12); --note-in-border:#9C9C9C; --note-ok-border:#6E6E6E; --note-wa-border:#4A4A4A; --note-dg-border:#111111; --auth-bg:#D4D4D4; /* 図面なので影は使わない。面の境目は罫線で出す */ --sh-1: none; --sh-2: none; --sh-3: none; --focus:#111111; --focus-w: 3px; --ring: 0 0 0 3px rgba(17,17,17,.35); } /* ============================== 基本 ============================== */ *, *::before, *::after { box-sizing: border-box; } html { /* --fs-scale は利用者の「文字サイズ」設定。--fs-boost は画面の種類ごとの底上げ。 市民向けは主な利用者が40〜60代なので底上げしてから設定を掛ける （小さくしたい人は、これまでどおり設定で下げられる）。 ※ --fs-base（1rem）は別物の「本文の大きさ」。ここで使うと単位が合わず、 指定ごと無効になって文字サイズ設定が効かなくなる。 */ font-size: calc(100% * var(--fs-scale) * var(--fs-boost, 1)); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } :root:has(body.citizen) { --fs-boost: 1.08; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs-base); line-height: var(--lh-base); font-feature-settings: "palt" 1; -webkit-font-smoothing: antialiased; text-underline-offset: .18em; } h1, h2, h3, h4 { margin: 0; line-height: 1.45; font-weight: 700; letter-spacing: .01em; } h1 { font-size: 1.75rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.08rem; } h4 { font-size: 1rem; } p { margin: 0 0 var(--s-4); } p:last-child { margin-bottom: 0; } a { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1px; } a:hover { color: var(--brand-hover); } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); } img, svg { max-width: 100%; height: auto; vertical-align: middle; } /* --- 線アイコン（_Icons.cshtml のスプライトを で呼ぶ） --- */ .icon-sprite { display: none; } svg.i { width: 1.25em; height: 1.25em; flex: none; color: inherit; vertical-align: -.22em; } hr { border: 0; border-top: var(--bw) solid var(--line); margin: var(--s-6) 0; } .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; } /* 読み上げ専用 */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--brand-solid); color: var(--on-brand); padding: var(--s-3) var(--s-5); border-radius: 0 0 var(--r-sm) 0; } .skip-link:focus { left: 0; } /* ============================== 見出しの帯 ============================== */ .topbar { background: var(--topbar-bg); color: var(--topbar-fg); border-bottom: var(--bw) solid var(--topbar-border); box-shadow: var(--sh-2); position: sticky; top: 0; z-index: 40; } .topbar a { color: var(--topbar-fg); } .topbar-in { /* 本文（.page）と同じ幅にそろえる。ここだけ狭いと帯の中身が本文より内側に寄る */ max-width: 1440px; margin: 0 auto; min-height: var(--header-h); display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-2) var(--s-5); } .brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; } .brand:hover { text-decoration: none; } .brand-mark { /* 文字サイズ設定で本文が大きくなっても崩れないよう em で持つ */ width: 2.4em; height: 2.4em; flex: none; border-radius: 10px; background: var(--topbar-hover); display: grid; place-items: center; font-weight: 700; font-size: 1rem; letter-spacing: -.04em; white-space: nowrap; border: 1px solid var(--topbar-active-border); } .brand-text { display: flex; flex-direction: column; line-height: 1.25; } .brand-text b { font-size: 1.02rem; font-weight: 700; } .brand-text span { font-size: .74rem; opacity: .88; letter-spacing: .06em; } .topbar-nav { margin-left: auto; display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; } .topbar-nav--end { margin-left: 0; } /* 2つ目以降は余白を取り合わない */ .topbar-nav a, .topbar-nav button { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 var(--s-4); border-radius: var(--r-full); text-decoration: none; font-size: .9rem; font-weight: 500; background: transparent; border: 1px solid transparent; color: var(--topbar-fg); cursor: pointer; } .topbar-nav a:hover, .topbar-nav button:hover { background: var(--topbar-hover); } .topbar-nav a[aria-current="page"] { background: var(--topbar-active); border-color: var(--topbar-active-border); } /* ============================== 表示設定（配色・文字サイズ） ============================== ヘッダの中でも外（ログイン画面など）でも使えるよう、 既定は本文の色、帯の中では帯の色を使う。 */ .prefs { display: flex; align-items: center; gap: var(--s-2); margin: 0; flex-wrap: wrap; } /* 帯の最後に置いたときは、折り返しても右端にそろえる */ /* 表示設定から右は帯の右端へ寄せる（そのうしろに氏名・ログアウトが並ぶ） */ .topbar-in > .prefs { margin-left: auto; } .prefs-group { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--r-full); background: var(--surface); border: var(--bw) solid var(--field-border); } .prefs-group > .prefs-cap { font-size: .72rem; padding: 0 var(--s-1) 0 var(--s-2); color: var(--text-3); } .prefs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; min-width: 34px; padding: 0 var(--s-3); border-radius: var(--r-full); border: 1px solid transparent; background: transparent; color: var(--text-2); font: inherit; font-weight: 700; line-height: 1; cursor: pointer; } .prefs-btn:hover { background: var(--hover-bg); } .prefs-btn[aria-pressed="true"] { background: var(--brand-solid); color: var(--on-brand); border-color: var(--brand-solid); } /* 大きさの見本を兼ねて「あ」の字を段階的に大きくする */ .prefs-btn[value="s"] { font-size: .74rem; } .prefs-btn[value="m"] { font-size: .88rem; } .prefs-btn[value="l"] { font-size: 1.02rem; } .prefs-btn[value="xl"] { font-size: 1.18rem; } .prefs-menu { position: relative; } .prefs-menu > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 var(--s-4); border-radius: var(--r-full); border: var(--bw) solid var(--field-border); background: var(--surface); color: var(--text-2); font-size: .86rem; font-weight: 600; cursor: pointer; list-style: none; } .prefs-menu > summary::-webkit-details-marker { display: none; } .prefs-menu > summary::after { content: "▾"; font-size: .8em; } .prefs-menu[open] > summary::after { content: "▴"; } .prefs-menu > summary:hover { background: var(--hover-bg); } .prefs-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: 18rem; max-width: calc(100vw - var(--s-6)); padding: var(--s-2); background: var(--surface); color: var(--text); border: var(--bw) solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-3); } .prefs-pop h4 { font-size: .72rem; letter-spacing: .12em; color: var(--text-3); padding: var(--s-2) var(--s-2) var(--s-1); font-weight: 700; } .prefs-opt { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 42px; padding: var(--s-2); margin-bottom: 2px; background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); color: var(--text); font: inherit; font-size: .9rem; text-align: left; cursor: pointer; } .prefs-opt:hover { background: var(--hover-bg); } .prefs-opt[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand-border); color: var(--brand-strong); font-weight: 700; } .prefs-opt small { display: block; font-size: .76rem; font-weight: 400; color: var(--text-3); line-height: 1.5; } .prefs-opt[aria-pressed="true"] small { color: var(--brand-strong); } .prefs-opt .tick { margin-left: auto; opacity: 0; flex: none; } .prefs-opt[aria-pressed="true"] .tick { opacity: 1; } /* 見本の色玉。今の配色に左右されないよう色を直に書く */ .sw { width: 24px; height: 24px; flex: none; border-radius: var(--r-xs); border: 1px solid rgba(0,0,0,.28); } .sw--auto { background: linear-gradient(135deg, #F8F9FA 0 50%, #10151B 50% 100%); } .sw--light { background: linear-gradient(135deg, #F8F9FA 0 50%, #005BAC 50% 100%); } .sw--dark { background: linear-gradient(135deg, #171D25 0 50%, #6DB4EE 50% 100%); } .sw--graphite { background: linear-gradient(135deg, #31353A 0 50%, #BCC8D2 50% 100%); } .sw--cvd { background: linear-gradient(135deg, #0072B2 0 50%, #D55E00 50% 100%); } .sw--contrast { background: linear-gradient(135deg, #000000 0 50%, #FFE14D 50% 100%); } .sw--sepia { background: linear-gradient(135deg, #F3E9D8 0 50%, #6E5740 50% 100%); } .sw--mono { background: linear-gradient(135deg, #FFFFFF 0 50%, #1C1C1C 50% 100%); } /* 帯の中では帯の色に合わせる */ .topbar .prefs-group, .topbar .prefs-menu > summary { background: var(--topbar-chip); border-color: var(--topbar-active-border); color: var(--topbar-fg); } .topbar .prefs-group > .prefs-cap { color: var(--topbar-fg); opacity: .85; } .topbar .prefs-btn { color: var(--topbar-fg); } .topbar .prefs-btn:hover, .topbar .prefs-menu > summary:hover { background: var(--topbar-hover); } .topbar .prefs-btn[aria-pressed="true"] { background: var(--topbar-fg); color: var(--topbar-on-fg); border-color: var(--topbar-fg); } @media (max-width: 720px) { .prefs { width: 100%; justify-content: flex-end; } .prefs-pop { position: fixed; left: var(--s-3); right: var(--s-3); top: auto; width: auto; } /* 帯を1行に保っているあいだは幅いっぱいにしない（ここで1行取ると帯が2段になる） */ .topbar-in:has(.topbar-nav--fit) > .prefs { width: auto; } } /* ここまで狭いと、そのままでは帯に収まらない。 押せる高さ（--tap）は変えず、まわりの余白だけ詰める。 */ @media (max-width: 540px) { .topbar-in { gap: var(--s-2); padding-left: var(--s-3); padding-right: var(--s-3); } .topbar .prefs { gap: var(--s-2); } .topbar .prefs-group { padding: 2px; gap: 0; } .topbar .prefs-btn { padding: 0; min-width: 40px; } .topbar .prefs-menu > summary { padding: 0 var(--s-2); } .topbar-me, .topbar-logout { padding: var(--s-2); } } /* 携帯の幅。押せる高さは 44px 以上のまま、横だけさらに詰める */ @media (max-width: 430px) { .topbar-in { gap: var(--s-1); } .topbar .prefs-btn { min-width: 36px; } } /* ============================== レイアウト ============================== */ /* 市民向けの横幅。大きな画面で左右が余りすぎないよう、どの画面でも広めに取る。 面（カード・定義リスト・表）は幅いっぱいに使い、 続けて読む文章だけ 84ch で止める（下の「説明文の折り返し」を参照）。 下の .app-shell 側で業務画面用に上書きしているので、ここを変えても業務画面は変わらない。 */ .page { max-width: 1440px; margin: 0 auto; padding: var(--s-7) var(--s-5) var(--s-10); } .page--narrow { max-width: 1200px; } .page--mid { max-width: 1360px; } /* 業務画面は一覧の列が多い。左右の余白を詰めて画面いっぱいに使う。 */ .app-shell .topbar-in { max-width: none; } .app-shell .page { max-width: none; padding-top: var(--s-6); } .app-shell .page--narrow { max-width: 820px; } .app-shell .page--mid { max-width: 1020px; } .app-shell .layout { display: grid; grid-template-columns: 244px minmax(0,1fr); gap: var(--s-6); align-items: start; } /* 左メニューを止めているとき（Features:SideNav=false）。項目は帯に並ぶので1段組にする */ .app-shell .layout--full { grid-template-columns: minmax(0,1fr); } /* 帯にメニューを並べるとき。項目数が多いので、アイコンを添えて詰めて出す */ .topbar-nav--menu { gap: var(--s-1); flex-wrap: wrap; } .topbar-nav--menu a { display: inline-flex; align-items: center; gap: 6px; } .topbar-nav--menu svg.i { width: 1.15em; height: 1.15em; flex: none; } /* 入りきらないぶんを「そのほか」に畳む形（tokuyo.js が付ける）。 折り返しをやめて1段に収め、あふれたものだけを畳む。 JavaScript が無いときはこのクラスが付かず、これまでどおり折り返して全部出る。 */ /* min-width:0 が要る。既定の min-width:auto だと中身より狭くならず、 あふれているかどうかを測れない（＝いつまでも折り返しのまま）。 */ .topbar-nav--fit { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow: hidden; } /* 項目の中で文字を折り返させない。折り返すと縦に伸びるだけで 「横にあふれた」と測れず、いつまでも畳まれない。 */ .topbar-nav--fit > a { white-space: nowrap; flex: none; } /* 帯そのものも折り返さない。 折り返せるままだと、はみ出したぶんは氏名・ログアウトが下の段へ落ちるだけで、 メニューは「あふれていない」と測れてしまう＝いつまでも畳まれず、帯が2段になる。 畳める状態のときだけ止めること。JavaScript が無いと畳めないので、 そのときは今までどおり折り返して全部出す。 */ .topbar-in:has(.topbar-nav--fit) { flex-wrap: nowrap; } /* 縮んでよいのはメニューだけ。ほかは縮めず、狭いときは中の文字を落とす（下の @media） */ .topbar-in:has(.topbar-nav--fit) > .brand, .topbar-in:has(.topbar-nav--fit) > .prefs, .topbar-in:has(.topbar-nav--fit) > .topbar-user { flex: none; } .nav-more { position: relative; flex: none; } .nav-more > summary { list-style: none; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); padding: 0 var(--s-3); border-radius: var(--r-full); color: var(--topbar-fg); font-size: .9rem; font-weight: 600; } .nav-more > summary::-webkit-details-marker { display: none; } .nav-more > summary::marker { content: ""; } .nav-more > summary::after { content: "▾"; font-size: .8em; } .nav-more > summary:hover, .nav-more[open] > summary { background: var(--topbar-hover); } /* 帯（.topbar-nav--fit）は overflow:hidden なので、中に置くと切り取られる。 画面に対して置いて、位置は開いたときに tokuyo.js が入れる。 */ .nav-more-list { position: fixed; z-index: 60; display: flex; flex-direction: column; gap: 2px; min-width: 240px; padding: var(--s-2); background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-2); } .nav-more-list a { display: flex; align-items: center; gap: var(--s-2); white-space: nowrap; min-height: var(--tap); padding: 0 var(--s-3); border-radius: var(--r-sm); color: var(--text); text-decoration: none; font-size: .92rem; } .nav-more-list a:hover { background: var(--hover-bg); text-decoration: none; } .nav-more-list svg.i { width: 1.15em; height: 1.15em; flex: none; color: var(--text-3); } @media (max-width: 1080px) { .app-shell .layout { grid-template-columns: 1fr; } } .sidenav { position: sticky; top: calc(var(--header-now, var(--header-h)) + var(--s-4)); background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-lg); padding: var(--s-3); box-shadow: var(--sh-1); } .sidenav h3 { font-size: .7rem; letter-spacing: .14em; color: var(--text-3); padding: var(--s-3) var(--s-3) var(--s-2); font-weight: 700; } .sidenav a { display: flex; align-items: center; gap: var(--s-3); min-height: 40px; padding: 0 var(--s-3); margin-bottom: 2px; border-radius: var(--r-sm); text-decoration: none; color: var(--text-2); font-size: .9rem; font-weight: 500; } .sidenav a:hover { background: var(--hover-bg); color: var(--text); } .sidenav a:hover svg.i { color: var(--brand); } .sidenav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-strong); font-weight: 700; box-shadow: inset 3px 0 0 var(--brand); } .sidenav a svg.i { width: 1.35em; height: 1.35em; color: var(--text-3); transition: color .12s ease; } .sidenav a[aria-current="page"] svg.i { color: inherit; } .sidenav .ico { width: 20px; text-align: center; flex: none; font-size: 1rem; } /* 最後の項目の下は余白を残さない（メニューの下に使わない空きができるため） */ .sidenav > :last-child { margin-bottom: 0; } .sidenav > :last-child > :last-child { margin-bottom: 0; } /* だれで入っているか（マイページ）とログアウトは帯の右端に置く。 左メニューを折りたたんでも、どの画面でも同じ位置にある。 */ .topbar-user { display: flex; align-items: center; gap: var(--s-2); } .topbar-me, .topbar-logout { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); padding: var(--s-2) var(--s-3); border: var(--bw) solid var(--topbar-active-border); border-radius: var(--r-full); background: var(--topbar-chip); color: var(--topbar-fg); font: inherit; font-size: .86rem; text-decoration: none; cursor: pointer; } .topbar-me:hover, .topbar-logout:hover { background: var(--topbar-hover); } .topbar-me svg.i, .topbar-logout svg.i { width: 1.25em; height: 1.25em; flex: none; } /* 氏名と所属は2段。所属が長いときは端を省略して、帯の幅を崩さない */ .topbar-me-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; text-align: left; } .topbar-me-name b { font-weight: 700; } .topbar-me-name small { font-size: .74rem; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14ch; } /* 狭い画面では文字を落としてアイコンだけにする（帯が折り返して伸びるのを防ぐ）。 落とす順は「無くても困らない」順。 1) 氏名・所属とログアウトの文字（アイコンは残す） 2) ロゴの文字（「特養」のマークは残す） 3) 「文字」の見出しと、いま選んでいる配色の名前（押せる形はそのまま残す） 読み上げには残るよう、display:none ではなく画面から隠すだけにする。 */ /* いま選んでいる配色の名前（「ライト（白背景）」など）は 150px ほど取る。 ここを空けるとメニューが2つぶん多く出せるので、いちばん先に落とす。 どれを選んでいるかは開けば ✓ で分かる。 */ @media (max-width: 1440px) { .topbar .prefs-current { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } } @media (max-width: 1080px) { .topbar-me-name, .topbar-logout > span, .topbar .brand-text, .topbar .prefs-cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } } /* 業務画面の見出しの説明文は、既定でたたんでヘルプボタンで出す。 毎日使う人には説明が要らず、横幅を取るほうが邪魔になるため。 tokuyo.js がボタンを差し込む。JavaScript が無いときは今までどおり出たままになる。 */ /* 区分・見出し・ヘルプを1行に。中の余白は殺す （h1 の margin-bottom が残ると、その半分だけヘルプの丸が下にずれる） */ .head-title { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; } .head-title > h1, .head-title > .eyebrow { margin: 0; } .help-toggle { display: inline-flex; align-items: center; justify-content: center; width: 1.9em; height: 1.9em; flex: none; border: var(--bw) solid var(--line); border-radius: 50%; background: var(--surface); color: var(--text-3); cursor: pointer; padding: 0; } .help-toggle:hover { border-color: var(--brand-border); color: var(--brand); background: var(--brand-soft); } .help-toggle[aria-expanded="true"] { background: var(--brand-solid); border-color: var(--brand-solid); color: var(--on-brand); } .help-toggle svg.i { width: 1.15em; height: 1.15em; } /* たたんだ説明。.note などが display を持っているので、勝てる強さで消す */ .app-shell .head .lede[hidden], [data-help][hidden] { display: none; } /* ============================== 見出しブロック ============================== */ .head { margin-bottom: var(--s-6); } .head .eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 700; letter-spacing: .1em; color: var(--brand-strong); background: var(--brand-soft); padding: 3px 12px; border-radius: var(--r-full); margin-bottom: var(--s-3); } .head h1 { margin-bottom: var(--s-2); } /* 説明文は画面幅を生かして横に長く出す。業務画面は全幅、 申込者向けの画面は読みやすさを優先して少しだけ抑える。 */ .head .lede { color: var(--text-2); max-width: 84ch; margin: 0; } .app-shell .head .lede { max-width: none; } /* 申込者向けの説明文は「句読点でだけ」折り返す（やさしい日本語の考え方）。 keep-all で文の途中では切らないようにし、句読点のうしろにだけ tokuyo.js が （ここで切ってよい、という印）を入れる。 結果、行の変わり目が必ず「、」「。」のうしろに来る。 overflow-wrap は逃げ道。1文が長くて1行に収まらないときだけ、 従来どおりどこでも折る（はみ出させない）。 JavaScript が無いときも同じ経路で従来の折り返しになる。 行の長さは制限しない。中途半端な位置で右側が大きく空くと、 かえって不自然に見えるため（面の幅は .page 側で決める）。 業務画面（.app-shell）は毎日使う人向けで1行に詰めたいので対象外。 */ body:not(.app-shell) .head .lede, body:not(.app-shell) .card-body > p, body:not(.app-shell) .note p, body:not(.app-shell) dl.kv dd, body:not(.app-shell) .acc-body, body:not(.app-shell) .entry p { word-break: keep-all; overflow-wrap: anywhere; } .breadcrumb { display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: .8rem; color: var(--text-3); margin-bottom: var(--s-4); } .breadcrumb a { color: var(--text-2); text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb li + li::before { content: "›"; margin-right: var(--s-2); color: var(--text-3); } .breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; } /* ============================== カード ============================== */ .card { background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); } .card + .card { margin-top: var(--s-5); } /* 並べて置くときは間隔を gap で取る。積むとき用の上余白が残ると、 **2枚目以降だけ下へずれて頭がそろわない**（YOKOHAMA002-288）。 同じ枡の中で積むときは打ち消さない（枡の中の
を挟むので、この規則に当たらない）。 */ .grid > .card + .card { margin-top: 0; } /* 見出しには下地を敷く。カードの切れ目が分かり、どこまでが1つのまとまりかを追いやすい。 角を丸めるのは、カード側の角丸から下地がはみ出さないようにするため。 */ .card-head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-4) var(--s-5); border-bottom: var(--bw) solid var(--line-soft); background: var(--head-bg); border-radius: var(--r-lg) var(--r-lg) 0 0; } /* たたんでいるときは見出しがカードの全体になるので、下も丸める */ .panel:not([open]) > summary.card-head { border-radius: var(--r-lg); } .card-head h2, .card-head h3 { margin: 0; } .card-head .spacer { margin-left: auto; } .card-body { padding: var(--s-5); } .card-foot { padding: var(--s-4) var(--s-5); border-top: var(--bw) solid var(--line-soft); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; } .grid { display: grid; gap: var(--s-5); } .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } @media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* 統計タイル。数字は「見出し＋数」の2行だけ。 1枚ずつが大きいと、8枚並べただけで1画面が埋まってしまうので小さく作る。 */ .stat { display: flex; flex-direction: column; gap: 1px; background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-md); border-left: 3px solid var(--line); padding: var(--s-3) var(--s-4); } /* 中身は
でも でも同じ見た目になるようにする */ .stat > .label, .stat > .value, .stat > .note { display: block; } .stat .label { font-size: .76rem; color: var(--text-3); font-weight: 600; line-height: 1.35; } .stat .value { font-family: var(--font-num); font-size: 1.55rem; font-weight: 700; color: var(--brand-strong); line-height: 1.2; font-variant-numeric: tabular-nums; /* 数字だけでなく機器名などを出すこともあるので、はみ出さずに折り返す */ overflow-wrap: anywhere; } .stat .value small { font-size: .78rem; font-weight: 600; color: var(--text-3); margin-left: 2px; } /* 注意書きの .note（枠つきの箱）と名前が同じなので、箱の見た目を打ち消す */ .stat .note { font-size: .74rem; color: var(--text-3); line-height: 1.45; margin-top: 2px; border: 0; background: none; padding: 0; border-radius: 0; } /* 種別は左の細い帯でも示す。数字の色だけだと、0件のときに違いが分からないため。 */ .stat--accent { border-left-color: var(--accent-solid); } .stat--warn { border-left-color: var(--wa-500); } .stat--danger { border-left-color: var(--dg-500); } .stat--accent .value { color: var(--accent-strong); } .stat--warn .value { color: var(--wa-700); } .stat--danger .value { color: var(--dg-700); } /* 数字のタイルは、枠の大きさではなく数の多さで並べる（1行にたくさん入る）。 auto-fill にして、枚数が3枚でも8枚でもタイルの幅をそろえる。 */ .grid:has(> .stat) { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-3); } /* ============================== ボタン ============================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-5); border-radius: var(--r-sm); border: var(--bw) solid var(--field-border); background: var(--surface); color: var(--text); font: inherit; font-size: .94rem; font-weight: 600; cursor: pointer; text-decoration: none; text-align: center; transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .06s ease; } .btn:hover { background: var(--hover-bg); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; } .btn-primary { background: var(--brand-solid); border-color: var(--brand-solid); color: var(--on-brand); box-shadow: var(--sh-1); } .btn-primary:hover { background: var(--brand-solid-hover); border-color: var(--brand-solid-hover); } .btn-accent { background: var(--accent-solid); border-color: var(--accent-solid); color: var(--on-accent); } .btn-accent:hover { background: var(--accent-solid-hover); border-color: var(--accent-solid-hover); } .btn-danger { background: var(--danger-solid); border-color: var(--danger-solid); color: var(--on-danger); } .btn-danger:hover { background: var(--danger-solid-hover); border-color: var(--danger-solid-hover); } .btn-ghost { background: transparent; border-color: transparent; color: var(--brand); } .btn-ghost:hover { background: var(--brand-soft); } .btn-lg { min-height: 56px; font-size: 1.05rem; padding: 0 var(--s-7); border-radius: var(--r-md); } .btn-sm { min-height: 34px; font-size: .84rem; padding: 0 var(--s-3); } .btn-block { width: 100%; } .btn-row { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; } /* ============================== 市民の手続きの色 ============================== */ /* 「申込む」と「状況をみる」は別の手続き。途中で取り違えないよう色を分ける。 ただし色相は青の範囲で分ける（申込＝横浜ブルー／状況＝一段明るい青）。 緑や青緑は使わない。緑は「済んだこと」を表す色として取ってあるため。 色の見え方は人によって違うので、帯（.flow-bar）に手続きの名前も出す。 */ .flow--apply { --flow: var(--brand-solid); --flow-strong: var(--brand-strong); --flow-soft: var(--brand-soft); --flow-on: var(--on-brand); } .flow--status { --flow: var(--aq-600); --flow-strong: var(--accent-strong); --flow-soft: var(--aq-50); --flow-on: var(--on-accent); } .flow .topbar { border-bottom: 4px solid var(--flow); } .flow .head .eyebrow { background: var(--flow-soft); color: var(--flow-strong); } .flow .btn-primary { background: var(--flow); border-color: var(--flow); color: var(--flow-on); } .flow .btn-primary:hover { background: var(--flow-strong); border-color: var(--flow-strong); } .flow .card-head { background: var(--flow-soft); } /* ステップ表示の現在位置は「ステップ表示」の節にまとめてある（丸と数字を必ず対で塗るため）。 帯の中の現在ページは、下地（--topbar-active）と枠でもう示している。 手続きの色で下線を足していたが、手続きの色と帯の色が同系だと見えないのでやめた。 */ /* いまの手続きを名前で出す帯。40〜60代の利用者を想定して、 何をしているところなのかを常に画面に置いておく。 */ .flow-bar { background: var(--flow-soft); border-bottom: var(--bw) solid var(--line); } .flow-bar-in { max-width: 1440px; margin: 0 auto; padding: var(--s-3) var(--s-5); display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; color: var(--flow-strong); } .flow-bar-in b { font-size: 1.05rem; } .flow-bar-mark { display: inline-flex; } .flow-bar-mark svg.i { width: 1.3em; height: 1.3em; } .flow-bar-note { color: var(--text-2); font-size: .9rem; } /* ログイン中の帯（YOKOHAMA002-286）。市民の画面をログイン中の人（代理申込のケアマネジャー など）が開いているときだけ出す。手続きの帯より控えめにして、本文の邪魔をしない。 */ .signed-bar { background: var(--surface-2); border-bottom: var(--bw) solid var(--line); } .signed-bar-in { max-width: 1440px; margin: 0 auto; padding: var(--s-2) var(--s-5); display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; font-size: .92rem; } .signed-bar-in .spacer { margin-left: auto; } .signed-bar-in form { display: inline-flex; } .signed-mark { display: inline-flex; color: var(--text-3); } .signed-mark svg.i { width: 1.2em; height: 1.2em; } .signed-who b { font-size: 1rem; } /* 市民向けは押す場所を大きくする。指でもマウスでも外しにくいように。 */ body.citizen { --tap: 52px; } body.citizen .btn { font-size: 1rem; } body.citizen .btn-lg { min-height: 60px; } /* ============================== 入口カード（市民トップ） ============================== */ /* 入口のカード。枚数は機能の設定（Features）で変わるので、列数を固定しない。 3枚なら3列、2枚なら2列で横幅いっぱいに広がる（列が1つ空いたままにならない）。 */ .entry-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } /* 1枚だけのときは間延びするので、ほどよい幅で止める */ .entry-grid:has(> .entry:only-child) { grid-template-columns: minmax(0, 560px); } @media (max-width: 900px) { .entry-grid { grid-template-columns: 1fr; } } .entry { display: flex; flex-direction: column; gap: var(--s-3); background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-xl); padding: var(--s-6); text-decoration: none; color: var(--text); box-shadow: var(--sh-1); transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease; } .entry:hover { box-shadow: var(--sh-3); transform: translateY(-2px); border-color: var(--brand-border); text-decoration: none; } .entry .ico { width: 52px; height: 52px; border-radius: var(--r-md); display: grid; place-items: center; font-size: 1.5rem; background: var(--brand-soft); color: var(--brand-strong); } .entry .ico svg.i { width: 27px; height: 27px; } .entry h2 { font-size: 1.18rem; } .entry p { color: var(--text-2); font-size: .94rem; margin: 0; } .entry .go { margin-top: auto; color: var(--brand); font-weight: 700; font-size: .92rem; } /* 入口も手続きの色で分ける。押した先の画面と同じ色にして、迷子にならないようにする。 */ .entry--apply { --flow: var(--brand-solid); --flow-strong: var(--brand-strong); --flow-soft: var(--brand-soft); } .entry--status { --flow: var(--aq-600); --flow-strong: var(--accent-strong); --flow-soft: var(--aq-50); } .entry--apply, .entry--status { border-left: 6px solid var(--flow); } .entry--apply .ico, .entry--status .ico { background: var(--flow-soft); color: var(--flow-strong); } .entry--apply .go, .entry--status .go { color: var(--flow-strong); } /* ============================== フォーム ============================== */ fieldset { border: 0; padding: 0; margin: 0 0 var(--s-6); } legend { font-weight: 700; font-size: 1.02rem; padding: 0; margin-bottom: var(--s-3); color: var(--brand-strong); display: flex; align-items: center; gap: var(--s-2); } .field { margin-bottom: var(--s-5); } .field > label, .field .field-label { display: block; font-weight: 600; font-size: .94rem; margin-bottom: var(--s-2); } .field .hint { font-size: .84rem; color: var(--text-3); margin-top: var(--s-1); } .field .hint--em { color: var(--wa-700); font-weight: 600; } .req { display: inline-block; font-size: .7rem; font-weight: 700; vertical-align: 2px; color: var(--on-danger); background: var(--danger-solid); border-radius: var(--r-xs); padding: 1px 6px; margin-left: var(--s-2); letter-spacing: .04em; } .opt { display: inline-block; font-size: .7rem; font-weight: 700; vertical-align: 2px; color: var(--text-3); background: var(--muted-bg); border-radius: var(--r-xs); padding: 1px 6px; margin-left: var(--s-2); } input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type="date"], input[type="password"], input[type="search"], input[type="time"], select, textarea { width: 100%; min-height: var(--tap); padding: var(--s-2) var(--s-3); font: inherit; font-size: 1rem; color: var(--text); background: var(--surface); border: var(--bw) solid var(--field-border); border-radius: var(--r-sm); transition: border-color .12s ease, box-shadow .12s ease; } textarea { min-height: 116px; line-height: 1.7; resize: vertical; } select { appearance: none; padding-right: var(--s-8); background-image: linear-gradient(45deg, transparent 50%, var(--field-arrow) 50%), linear-gradient(135deg, var(--field-arrow) 50%, transparent 50%); background-position: calc(100% - 19px) 50%, calc(100% - 13px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: var(--ring); outline: none; } input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"], .input-validation-error { border-color: var(--dg-500) !important; background: var(--dg-50); } input::placeholder, textarea::placeholder { color: var(--placeholder); } input[readonly], input[disabled], select[disabled], textarea[readonly] { background: var(--disabled-bg); color: var(--text-3); } .field-row { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: start; } .field-row > * { flex: 1 1 180px; } /* 横に並べた入力欄は、上端でそろえる。 下端でそろえると、注記のある欄とない欄で入力枠の高さがずれて階段状に見えるため。 ラベルの高さも1〜2行で共通にして、入力枠の位置をそろえる。 */ .field-row, .filters { --label-h: 2.5rem; } .field-row > .field > label, .field-row > .field > .field-label, .filters .field > label, .filters .field > .field-label { min-height: var(--label-h); display: flex; flex-wrap: wrap; align-items: baseline; align-content: flex-end; row-gap: 2px; } /* ラベルのない欄（ボタンだけ等）はラベル分だけ下げてそろえる */ .field-row > .field:not(:has(> label)):not(:has(> .field-label)), .filters .field:not(:has(> label)):not(:has(> .field-label)) { padding-top: calc(var(--label-h) + var(--s-2)); } .w-xs { max-width: 110px; } .w-sm { max-width: 180px; } .w-md { max-width: 280px; } .w-lg { max-width: 420px; } /* 選択肢（ラジオ・チェック）— タップしやすい面で囲む */ .choices { display: grid; gap: var(--s-2); } .choices--inline { grid-auto-flow: column; grid-auto-columns: max-content; } .choices--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .choices--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } @media (max-width: 720px) { .choices--2, .choices--3 { grid-template-columns: 1fr; } .choices--inline { grid-auto-flow: row; } } .choice { display: flex; align-items: flex-start; gap: var(--s-3); min-height: var(--tap); padding: var(--s-3) var(--s-4); border: var(--bw) solid var(--field-border); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; transition: border-color .12s, background .12s, box-shadow .12s; } .choice:hover { border-color: var(--brand-border); background: var(--brand-soft); } /* 丸・四角は px で固定しない。文字サイズ設定（data-font）で文字だけ大きくなると ラベルの1行目の中心からずれていくため、文字と一緒に伸ばす。 上の余白は「1行の高さ − 自分の高さ」の半分。こうすると行送りが変わっても （市民 1.85／業務 1.6）1行目の真ん中に来る。複数行のラベルでも上に付いたままにする。 */ .choice input { width: 1.25em; height: 1.25em; flex: none; margin: calc((1em * var(--lh-base) - 1.25em) / 2) 0 0; accent-color: var(--brand-solid); } .choice-text { flex: 1; } .choice-text b { display: block; font-weight: 600; } .choice-text small { display: block; color: var(--text-3); font-size: .82rem; line-height: 1.6; } .choice:has(input:checked) { border-color: var(--brand-solid); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-solid); } .choice:has(input:focus-visible) { box-shadow: var(--ring); } /* 同意書のチェック。 ここは「読んで、同意する」ための文なので、補助文（small）の扱いにしない。 本文と同じ大きさ・同じ濃さで組み、番号は丸で大きく出す。チェックも大きくする。 */ .choice--consent { padding: var(--s-4) var(--s-5); border-width: 2px; } .choice--consent input { width: 1.5em; height: 1.5em; margin-top: calc((1em * var(--lh-base) - 1.5em) / 2); } .choice--consent .choice-text { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-2) var(--s-3); align-items: start; } /* 番号の丸は「直下の b」だけ。本文の中にも強調の b があるので、子孫まで当てない */ .choice--consent .choice-text > b { display: grid; place-items: center; min-width: 1.9em; min-height: 1.9em; margin-top: .1em; border-radius: var(--r-full); background: var(--brand-solid); color: var(--on-brand); font-size: .95rem; font-weight: 700; line-height: 1; } .choice--consent .choice-text small { font-size: 1.02rem; color: var(--text); line-height: 1.9; } /* 業務画面（紙申込の入力）では、まわりの密度に合わせて少しだけ落とす */ .app-shell .choice--consent .choice-text small { font-size: 1rem; line-height: 1.7; } /* コンパクトなチェック群（A〜Rなど多数の選択肢） */ .chips { display: flex; flex-wrap: wrap; gap: var(--s-2); } .chip { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 38px; padding: 0 var(--s-3); border: var(--bw) solid var(--field-border); border-radius: var(--r-full); background: var(--surface); cursor: pointer; font-size: .88rem; } /* 申込の選択肢（チェックボックスの列）も同じ。文字と一緒に伸ばす。 こちらは align-items: center なので上下の位置合わせは要らない。 */ .chip input { width: 1.15em; height: 1.15em; flex: none; accent-color: var(--brand-solid); } .chip:has(input:checked) { border-color: var(--brand-solid); background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; } .chip:hover { border-color: var(--brand-border); } /* 絞り込みのリンク版（宛名ラベルの候補。YOKOHAMA002-260）。 .chip はチェックボックス用なので、押して移動する側は別に用意する。見た目はそろえる。 40〜50代の利用を想定しているので、いま選んでいるものは色と太さの両方で示す （色だけだと分かりにくい）。 */ .chips-link { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; } .chip-link { display: inline-flex; align-items: center; min-height: 38px; padding: 0 var(--s-3); border: var(--bw) solid var(--field-border); border-radius: var(--r-full); background: var(--surface); font-size: .88rem; text-decoration: none; } .chip-link:hover { border-color: var(--brand-border); text-decoration: none; } .chip-link.is-on { border-color: var(--brand-solid); background: var(--brand-soft); color: var(--brand-strong); font-weight: 700; } /* ============================== ステップ表示 ============================== */ /* 今どのステップにいるかは、下まで入力しても見えていてほしい。 帯の下に貼り付ける。背景を敷かないと、下の内容が透けて読めなくなる。 */ .steps { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); list-style: none; position: sticky; top: var(--header-now, var(--header-h)); z-index: 20; padding: var(--s-3) 0; margin-top: calc(var(--s-3) * -1); background: var(--bg); box-shadow: 0 6px 6px -6px rgb(0 0 0 / .10); } /* 見た目は中の .step-pill が持つ。現在地は 、それ以外は移動用の