メディアクエリ

メディアクエリトークンは、環境（ブラウザのビューポート幅・カラーパレットの制限設定・動きの最小化の要求など）に応じたスタイルの変更に使います。
主にブラウザのビューポート幅ごとに最適なレイアウトを提供することが目的です。

セマンティックトークン

プリミティブトークン

ほとんどの場合、この値を直接使うことはありません。セマンティックトークンに定義されていない、イレギュラーな処理をする場合にのみ使ってください。

ブラウザのビューポート幅（ブレークポイント）

SmartHRでは管理者・従業員により端末の利用傾向が異なること、また多くのプロダクトはデスクトップでの利用を基準としていることから、@mediaの使用はmax-widthを指定することでデスクトップのレイアウトを基準にスタイルを調整する考え方を採用しています。

基準値について、モバイル環境は端末により最適値の幅が大きいため、おおよその端末をカバーできる値に設定しています。