/*! 業務UI / GYOMU-UI | gyomu-ui.css | 基本スタイル 0.6.2 | AI受け渡し用・コンパクトUI 共通スタイル SHA-256: 1a92302f037f4fbb80de853c66840e41aa46271abf54840c0d1112c6ae393fdd 構成: 実装ガイド → 部品一覧 → 画面HTML例 → 有効なCSS → 公式SVG → 第三者ライセンス このファイルだけをAIに渡す。利用先への組み込みに専用JS・npm・外部アイコンの取得は不要。 # 業務UI / GYOMU-UI — CSS単体でAIに渡すためのガイド この説明と全スタイルはgyomu-ui.cssの1ファイルに収録されています。 以下は、このCSSを使用する画面の実装ガイドです。利用先プロジェクトの明示的な要件と合わせて参照してください。 ## このファイルの使い方 このファイルをそのままAIへ添付し、次のように依頼する。 > 添付のgyomu-ui.cssを読み、既存システムの画面へ適用してください。冒頭の実装ガイドとHTML例を使い、業務処理・API・認証・権限・入力値の保持を維持してください。CSSは読み込むだけで利用し、必要な操作は既存の状態管理へ接続してください。代表画面で寸法・入力・一覧・両モードを確認してから他の画面へ展開してください。 AIに渡す原本はこの1ファイル。スタイル・導入手順・47部品の対応表・11画面のHTML例・公式SVG10種類・第三者ライセンスを収録する。CSSコメント内のHTMLや操作説明は実行されない。利用するHTML例を取り出し、必要な操作だけを実装する。 ### 引き継ぐ外観と動作 - 見出しだけを16／14／13px、行高24／20／20px、周囲の余白4〜8pxとする。本文や画面全体の余白へ一律適用しない。 - PCのボタンは通常・補助・サイズ指定・表示密度を問わず30px。入力欄は通常28px、補助セレクト24px。入力値14px、ボタン・ラベル13px。チェックの印16px、表内の操作領域24px。タッチ操作は44pxを確保する。 - 左側・下側の片側罫線を使わず、疑似要素・影・背景画像で同じ線を代用しない。 - 一覧は常に表内スクロール。表示件数は10／20／50／100、セレクトはPCで56×24px。チェック操作で操作欄を出現させたり表を再描画したりせず、配置・フォーカス・スクロール位置を保つ。 - 金額は初期表示・フォーカスを外した時に52,800のように表示し、編集中・送信値は52800とする。不正値を丸めない。 - コピーの幅は表示中の文言に合わせる。「コピーしました」の幅を最初から予約せず、成功後の2秒間だけ表示する。 - ライト／ダーク、公式インラインSVG、ネイティブHTMLの意味とキーボード操作を維持する。 ## AIへの依頼 このCSSを読み、既存システムへ「業務UI」の見た目を適用してください。 既存の業務処理・API・認証・権限・入力値の保持を維持し、下記のクラスとHTML構造を再利用してください。 色だけを似せるのではなく、文字・操作部品の大きさ・余白・並び方も共通値で揃えてください。 このCSSの使用にnpmパッケージ、専用JavaScriptライブラリ、外部アイコンファイル、CDNは必要ありません。 アイコンは本ファイルのコメント内にある公式SVGをHTML／JSXへ直接埋め込む。CSSを読み込むだけでSVGがHTMLへ追加されるわけではない。 React/Vue等では、既存の状態管理とイベント処理にクラス・属性を適用してください。 ## 適用範囲とテーマ - HTMLのheadからgyomu-ui.cssを読み込み、対象領域の外側をclass="gm"で囲む。 - 正式名称は「業務UI」、英語表記は「GYOMU-UI」。正式ファイル名はgyomu-ui.css。 - 実装識別子は、対象領域のgm、部品・調整クラスのgm-*、CSS変数の--gm-*。例：gm-btn、gm-input、gm-p-4、--gm-brand。HTML・独自CSS・要素検索・状態管理を同じ名前にそろえる。 - 製品名と実装識別子を区別し、クラス名だけを別の名前に置換しない。Tailwindではp-gm-4、text-gm-brand等の名前を使う。 - ルートのdata-mode="light" / "dark"で配色を切り替える。指定がなければライト。 - このCSSだけでは検索、保存、並び替え、ダイアログを開く処理やカスタム説明の開閉は実装されない。button・input・select・details等のネイティブ動作はブラウザーが提供する。 それらの動作は利用先の既存ロジックへ接続する。見た目だけを付けて動作済みと扱わない。 - モード変更時はdata-mode、次の操作を示すアイコン、ボタンのaria-label、ツールチップ文言を同期する。 - PCのボタンはdata-sizeやdata-densityにかかわらず30px。入力欄は標準・compactが28px、comfortableが40px、補助セレクトは24px。ボタンには--gm-button-heightと--gm-button-padding-blockを使い、入力用の寸法と分ける。 - ゆったり密度を使う場合はdata-density="comfortable"を指定する。 - 調整は--gm-*変数を対象領域で上書きする。既存のグローバルCSSによる上書きや競合も確認する。 - --gm-fontはローカルの日本語フォントを参照する。同じフォントがない端末では字形・字幅が変わる。 ### 他システムへの組み込み 1. 既存のベースCSS → gyomu-ui.css → 導入先の調整CSSの順に読み込む。ライブラリ本体の各CSSや別の結合版を重複して読み込まない。 文書にはを指定して標準モードで表示する。新規HTMLではlang="ja"、UTF-8、width=device-widthのviewportも指定し、拡大を禁止しない。既存アプリのheadへ重複して追加せず、現在の指定を確認する。 2. 対象領域を専用の.gmで囲み、部品はその子孫へ配置する。ボタン自身にgmとgm-btnを併記するだけでは適用されない。製品名・画面名・項目名は導入先に合わせて変更してよい。 3. このCSSは.gmの外へスタイルを指定しないが、Shadow DOMによる完全な隔離ではない。既存のbutton/input/table規則、詳細度の高いセレクター、!important、リセットCSSとの競合を実画面の計算済みスタイルで確認する。全ページへのリセットや一律の!important追加で解決しない。 4. remは文書ルートの文字サイズを参照する。16pxを前提とする寸法表に対し、既存のhtmlが62.5%等なら実寸も変わる。.gmのfont-sizeだけではremの基準は変わらない。htmlを勝手に上書きせず、導入先の文字サイズ方針に合わせた調整CSSを対象領域に用意し、文字拡大も検証する。 5. モーダルやポップアップをPortal／Teleportで.gmの外へ出す場合は、描画先にも専用の.gmを設け、data-mode・data-density・テーマ変数を同期する。無指定の入れ子.gmは親の配色を引き継ぐ。別テーマを持つ領域にはモードを明示する。 6. Tailwindなしではgm-p-4、gm-gap-4等の同梱クラスを使う。p-gm-4、text-gm-brand等は別途Tailwindのテーマ設定とビルドが必要で、このCSSを読み込むだけでは生成されない。レイヤーを使う既存プロジェクトでは、このCSSがレイヤーなしの通常CSSであることも考慮して上書き順を決める。 ```html
``` 既存ファイル名とURLは導入先の構成へ合わせる。CSSを適用するためにnpm導入やGmUI等のグローバル変数を追加する必要はない。 ### React・Vue等での接続 - HTML例の構造を既存コンポーネントへ移す。ReactではclassをclassName、forをhtmlForへ変換し、インラインstyleはオブジェクトにする。Vueでは既存のclass／:class、v-model等へ接続する。 - 入力値・checked・disabled・hidden・aria-*を同じ状態から更新する。controlled入力でDOMのvalueを直接書き換えたり、ライブラリのmount関数とフレームワークが同じDOMを管理したりしない。 - data-*は接続先を示す属性であり、付けただけでは動作しない。idは画面・部品インスタンスごとに一意にし、label、説明、エラー、フォームの関連付けを保つ。 - 金額は編集文字列と保存用の値を区別し、focus／blur／compositionの状態から表示値を更新する。コピーはClipboard APIの成功・失敗を待って表示を更新する。 - 一覧の行にはデータの安定したキーを使う。チェック状態やテーマ変更でテーブル全体のキーを変えない。通信取消・古い応答の無視・タイマー解除は導入先のライフサイクルへ接続する。 ### 調整方法 このCSSを読んだ後に、利用先のCSSで必要な変数だけを上書きする。例： ```css .gm[data-theme="orders"] { --gm-radius: .375rem; --gm-content-width: 70rem; } ``` 対象のHTMLへdata-theme="orders"を付ける。密度はdata-density、配色はdata-modeで切り替える。 文字・ボタン・ラベルの寸法を個別に固定して差を作らない。色を変える場合はライト／ダーク両方の背景・文字・境界・フォーカスを組み合わせて検査する。 収録スタイルは圧縮せず、冒頭のガイド・部品一覧・画面HTML例・末尾のSVGとライセンスを残したこのファイルをAIへ渡す。 配信時に圧縮する場合も、AIへの受け渡し原本と第三者ライセンスは保持する。 ### 部品と画面を選ぶ 後続コメントに47部品の用途・クラス一覧と11画面のHTML例を収録している。 検索・一覧、詳細、登録・編集、内容確認、承認・差戻し、表示・通知設定、マスター管理、CSV取込、操作履歴、書類管理、サーバー検索・一覧から用途を選ぶ。 画面例はライブラリ本体の描画処理から生成しており、空欄のラフ案ではない。HTML内のdata-*は操作の接続箇所、hiddenは現在の表示状態を示す。 まず対応する例を1つ選び、既存データと状態管理へ接続する。検索結果・エラー・件数・入力の説明は、静的なサンプル値のまま残さない。 47項目のすべてが独立したJavaScript部品という意味ではない。基本スタイル／ヘルパー22項目とマウントAPI25項目の合計であり、CSSでの利用にはそれらのAPIは不要。 ## コピー・クリアボタン コピーボタンはcontent_copy、クリアボタンはbackspaceの公式Material Symbols Outlinedを、文字の左に配置する。 SVGはHTMLへ直接埋め込み、pathとviewBoxは原本のまま使う。アイコンは16px相当、文字との間隔は共通の8px。 装飾SVGはaria-hidden="true"、focusable="false"にし、ボタンの操作名は見える文字で示す。 ```html
``` 利用先のイベント処理・状態管理に、次の仕様を実装する（CSS自体はコピーを実行しない）。 1. ネイティブbuttonのclickで最新のコピー対象文字列を取得し、navigator.clipboard.writeText(text)を呼ぶ。Enter／Spaceは標準のボタン操作に任せ、独自keydownで二重実行しない。 2. 実行中はaria-busy="true"とaria-disabled="true"を付け、クリック処理もガードして並列実行を防ぐ。フォーカスは移動しない。 3. Promiseが成功した時だけdata-copied="true"にし、data-copy-labelへaria-hidden="true"を付け、data-copy-successのaria-hiddenを外す。ボタン自身に「コピーしました」を表示し、role="status"でも通知する。 4. 成功から2000ms後、data-copied="false"と最初のaria-hiddenの組へ戻す。ボタンは現在の文言に合う幅にする。非表示の文言はdisplay:noneでレイアウトから除外し、成功名の幅を事前に予約しない。成功表示中だけその文言の幅に変わり、2秒後に通常の幅へ戻る。固定幅・固定高さ・文字切り捨ては追加しない。 5. 再クリックは前のタイマーを解除して通常表示へ戻し、新しいコピー成功から2秒を計る。処理完了時にはaria-busyとaria-disabledを外す。 6. 失敗やClipboard APIを使えない場合は成功表示にしない。data-copy-statusのclassをgm-copy-error gm-error-textへ変え、「コピーできませんでした。対象の文字を選択してコピーしてください。」と表示する。再試行時に通知を空にし、gm-srへ戻す。対象テキストは選択・コピー可能な状態で残す。 7. 画面遷移・再マウント・破棄時はタイマーを解除し、未完了Promiseが古いボタンや新しい画面を更新しないようにする。 8. クリアは対象の入力値や検索条件を初期化し、既存の状態管理・変更通知へ接続する。検索入力内のクリアは入力欄へフォーカスを戻す。クリアとデータ削除は別の操作として扱う。 Clipboard APIは安全なコンテキスト（通常はHTTPS）とブラウザー側の許可条件が必要。拒否時に成功を装わない。 APIの条件：[MDN Clipboard.writeText](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText)。 ## 標準の文字・寸法・余白 ボタンの30pxはルート16px時の標準の最小高さ。高さを固定して文字を切らず、複数行・文字拡大時には内容に応じて伸ばす。入力と並ぶ場合もボタンを入力の高さへ引き伸ばさず、縦中央に揃える。 SaaSの業務画面を想定した、小さめの文字をこのCSSの標準にする。以下は本UIの設計値であり、SaaS全体の共通規格ではない。 pxはルート16pxの場合の換算。実装はremと共通変数を使い、ブラウザーの拡大や利用者の文字サイズ設定を妨げない。 | 用途 | PCでの標準 | 共通変数 | | --- | --- | --- | | 本文・通常の入力値 | 14px | --gm-text-size | | 表・ボタン・ラベル・補助操作の値 | 13px | --gm-label-size / --gm-control-xs-text-size | | 補足文・メタ情報 | 12px | --gm-meta-size | | ページ見出し | 16px・行高24px | --gm-title-size / --gm-title-line-height | | セクション見出し | 14px・行高20px | --gm-section-title-size / --gm-section-title-line-height | | 小見出し | 13px・行高20px | --gm-subtitle-size / --gm-subtitle-line-height | - 文字を12px未満にしない。本文・重要な操作を補足文と同じサイズへ一律に縮小しない。 - 「業務UIの標準プリセット」はライブラリ本体と同じ定義から生成する。配布形式ごとに異なる寸法を設定しない。 - 文字だけを小さくして大きな操作枠を残さない。PCのボタンは一律30px、上下余白2px・左右余白8px。タブ・メニュー内のボタン、コピー・クリア・ページ移動・テーマボタンも同じ高さとする。通常入力28px、補助セレクト24pxは別の設定とする。 - 状態・表示密度などの補助セレクトは、ラベルと値13px、高さ24px。補助ボタンは30px。 button/inputにはdata-size="xs"、selectは親のgm-select-wrapへdata-size="xs"を付ける。 - xsのテーマボタンは30px四方、アイコン16px。any-pointer: coarseでは操作44px、入力・補助操作の文字16px、アイコン20px。 - ラベルと値の縦中央を揃える。ラベルと部品の縦の間隔は4px、横の間隔と補助操作の組同士は8px。 - 見出し周辺の余白は4〜8pxを基本にする。共通ユーティリティの4 / 8 / 12 / 16 / 24 / 32 / 48pxは明示的な調整用に保持する。角丸は基本4px。 - 通常・xsセレクトの矢印は20px／16px、右端の余白は8px、文字と矢印の間隔は8px。右の予約領域は矢印幅＋右余白＋文字間隔（通常36px／xs32px）で算出し、矢印は入力欄自身の中央へ配置する。 - ボタンは全密度で30px。compactとstandardの入力高さは28px、comfortableは40px。表セルの上下余白はcompact2px、standard4px、comfortable12px。 - 主要操作は同じ操作群に原則1つ。ボタンの高さ30pxを揃えたうえで、主要操作と補助操作の強さを使い分ける。 ## 必須：WCAG 2.2のA・AAを実装と確認の基準にする 業務UIはWCAG 2.2のAAを目標に設計する。AAにはAの達成基準も含まれる。 CSSだけでページや業務フローの適合を保証できない。以下は導入時の必須要件であり、全項目の検証完了や認証を示さない。 文字サイズやフォーカス形状に世界共通の固定デザインがあるわけではない。 ### CSSに含まれる対応と利用先の実装要件 | 項目 | このCSSの対応 | 利用先で実装・検証すること | | --- | --- | --- | | コントラスト（1.4.3 / 1.4.11） | 両モードの文字・状態色、入力境界、フォーカスに役割別の色変数を使う | 通常文字4.5:1以上、操作や状態の識別に必要な境界・図形3:1以上。テーマ変更後も背景との組み合わせを測る。装飾の表罫線は入力境界色の代わりに使わない | | 色だけに頼らない（1.4.1） | エラー文・状態名・選択マーカー用クラスを用意 | エラーは赤色だけでなく理由と修正方法を表示。選択行にはチェック状態や「選択中」なども付ける | | 拡大・折り返し（1.4.4 / 1.4.10） | rem、最小高さ、折り返すラベルと操作群、狭幅で1列、表内だけの横スクロール | 文字200%拡大で欠落しないこと。幅320 CSS px相当でもページ全体の横スクロールを生まないこと。二次元の表は独立したスクロール領域で確認 | | 文字間隔（1.4.12） | 本文の固定高さ・行数による切り捨てを設けない | 行高1.5倍、段落間隔2倍、字間0.12em、単語間0.16emを利用者が上書きしても欠落しないこと。これらを初期値に強制する要件ではない | | フォーカス（2.4.7 / 2.4.11） | :focus-visibleに2px実線。枠の内側または輪郭に密着し、外側の隙間をなくす。スクロール余白を設定 | Tab順が論理的で、固定ヘッダーやフッター、ポップアップが操作位置を覆わないこと。outline:noneやクリック時の強制blurで消さない | | 操作領域（2.5.8） | 独立操作に24px以上の下限、ボタン30px・入力28px・補助セレクト24px、タッチ向け44px。gm-hit-targetで小さい印と操作範囲を分離 | 文中リンク等の例外を除く操作を24×24 CSS px以上にするか、規定の間隔を確保する。チェックボックスは関連付けたlabel全体で押せるようにする | | 構造と読み上げ（1.1.1 / 1.3.1 / 2.4.6 / 4.1.2） | 意味を保ったHTML例、装飾SVG、gm-srを用意 | lang="ja"、固有のtitle、見出し階層、main/nav、label/fieldset/legend、table/caption/thを使う。見えるラベルをアクセシブルな名前に含める | | キーボード（2.1.1 / 2.1.2 / 2.4.3） | ネイティブ部品の操作を妨げないスタイル | マウス無しで全操作が可能。タブ・メニュー・コンボボックスは対応するARIAパターンのキー操作と状態更新を実装。モーダルの初期フォーカス、内部移動、Esc、呼出元への復帰を確認 | | 入力とエラー（3.3.1 / 3.3.2 / 3.3.3） | gm-help、gm-error-text、gm-error-summary、aria-invalidの表示 | 必須・形式を入力前に提示し、labelと説明・エラーを関連付ける。保存失敗時は入力を保持。複数エラーは先頭の要約から該当入力へ移動できるようにする | | 結果通知（4.1.3） | 見た目と読み上げを分ける構造例 | 件数・保存完了はrole="status"、緊急エラーは必要時のみrole="alert"。通常の更新でフォーカスを奪わず、連続読み上げを抑える | | ツールチップ（1.4.13） | 折り返し、ポインターで説明へ移動できるCSS、hiddenの尊重 | Escで閉じられ、説明上に移動して読め、読む時間を制限しない。表示条件は下記のテーマボタン仕様に従う | | 強制配色・動きの低減 | forced-colorsのシステム色、状態の線・文字、prefers-reduced-motionへの対応 | OSの強制配色でも状態とアイコンを確認。追加のアニメーションや非同期処理を終了イベントだけに依存させない。これはAAの全要件と同義ではなく追加の配慮 | 標準のフォーカスは2px実線とし、部品の外側に隙間を空けた別の枠を追加しない。 WCAG 2.2 AAの「見えること」「完全に隠れないこと」と、隣接色に対する3:1以上のコントラストを設計条件にする。 2pxは本UIの設計値であり、世界共通の必須形状ではない。この内側表示でAAAの面積要件を満たしたとは扱わない。 | 部品 | フォーカスの位置と色 | | --- | --- | | 入力・select・textarea・通常ボタン・テーマボタン | outline-offset:-2pxで元の枠に重ねる。--gm-focusの2px線が1本に見える形 | | 主要・危険ボタン、オンのスイッチ | outline-offset:-3px。塗り面を外縁に1px残し、その内側へ2px線。--gm-on-brand / --gm-on-errorで塗り面と区別する | | 補助操作のquietボタン | 通常ボタンと同じ内側2px。透明背景・ホバー背景に対して--gm-focusを使う | | リンク・タブ・summary・ネイティブのチェック／ラジオ | outline-offset:0で輪郭に接する2px線。外側に空白を作らない | | 表のスクロール領域・タブパネル・アクティブ候補 | 内側に2px線。スクロール領域外へ枠を出さない | フォーカスでborder-width・padding・width・heightを変えない。外側のぼかしやbox-shadowで第二のリングを追加しない。 エラーは通常の枠幅を維持し、色・エラー文・aria-invalid・aria-describedbyで伝える。フォーカスを移してもエラー情報を消さない。 塗りつぶしボタンの線を--gm-focusへ一律に置き換えない。同じ主要色どうしで線が消えるため、塗り面と3:1以上の色を使う。 強制配色ではHighlightを使い、ブラウザーによるネイティブ部品の配色も実機で確認する。 外周が切れるコンテナー、画像の上、カスタム背景では個別に確認する。アクティブな候補の内側の枠もAAの視認性を確認する。 固定ヘッダーがある場合は--gm-scroll-offsetをその高さ＋余白へ変更し、必要に応じてスクロール処理も調整する。 aria-activedescendantを使う候補は、参照IDとdata-active="true"を同期し、候補をスクロール領域内へ表示する。 ### 業務フロー側の要件 - 繰り返すナビゲーションを飛ばすスキップリンクを設ける。gm-skipはフォーカス時に表示される。 - 表の並べ替えはth内のbuttonで実行し、thのaria-sortを更新する。通常のtableに安易にrole="grid"を付けない。 - スクロールする表はtabindex="0"と識別できる名前を付ける。表そのものの意味・見出し関連付けを維持する。 - フォーカスや選択値の変更だけで、予告なく送信・画面移動しない。入力データの削除や確定には確認・取消・修正の機会を設ける（該当する3.3.4）。 - ログイン画面はパスワードマネージャー、コピー・貼り付け、適切なautocompleteを妨げない。認知機能テストを強いる認証には代替・支援方法を用意する（3.3.8）。 - 同じ手続きで入力済みの情報は再利用・選択可能にする（3.3.7）。個人情報の入力目的には適切なautocompleteを設定する（1.3.5）。 - ヘルプとナビゲーションは画面間で一貫させる。入力名や同じ機能の名前を不要に変えない（3.2.3 / 3.2.4 / 3.2.6）。 - ドラッグ専用の操作には、単純なクリック・タップで完了できる代替を用意する（2.5.7）。クリック確定は原則pointerdownで実行しない（2.5.2）。 - 制限時間・自動更新・自動再生がある場合は延長・停止等を設計する。画面の向きを固定せず、点滅を加えない。画像や動画を追加する場合は代替テキスト、字幕等も確認する。 - 実装に該当する達成基準はWCAG 2.2全体で確認する。このチェック表だけを全達成基準の代わりにしない。 ### 入力エラーと結果通知のHTML例 下記は導入先の状態管理に接続する構造例。IDは複数配置時に一意にする。装飾番号ではなく関連付けに必要なIDは保持する。 エラー表示のタイミングでhiddenとaria-invalid、aria-describedbyを更新し、解消時にエラーへの参照を外す。 エラー要約へ移すのは送信失敗時のみ。入力のたびにフォーカスを奪わない。

申請者の氏名を入力してください。

上のstatus領域は最初からDOMに置き、検索完了後に「検索結果は12件です」等の文言を更新する。 失敗時は入力にaria-invalid="true"とaria-describedby="applicant-help applicant-error"を設定する。 参照（W3C）： - WCAG 2.2全体: https://www.w3.org/TR/WCAG22/ - 文字コントラスト: https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html - 操作領域: https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html - 拡大時の再配置: https://www.w3.org/WAI/WCAG22/Understanding/reflow.html - 文字間隔: https://www.w3.org/WAI/WCAG22/Understanding/text-spacing.html - フォーカス: https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html - ARIAの実装パターン: https://www.w3.org/WAI/ARIA/apg/patterns/ ## 必須：ライトモード／ダークモードの切り替えボタン このシステムにテーマ切り替えボタンを実装する。既に切り替え機能がある場合は、その状態管理へ接続する。 CSSには配色とボタンのスタイルが含まれる。クリック、保存、ツールチップの状態管理は導入先のコードへ実装する。 ### 外観・配置 - ヘッダーの右側など、全画面で共通の位置にアイコンだけのbuttonを1つ置く。文字を常時併記しない。 - class="gm-btn gm-icon-btn"、data-size="xs"を使用する。隣接する補助操作の文字・高さ・余白と揃える。 - PCは30px四方／SVG16px、タッチ入力を備える環境は44px四方／SVG20px。角丸・境界色は共通CSSに従う。 - SVGをgm-mode-iconの枠に入れ、上下左右の中央に配置する。月と太陽でボタンの大きさを変えない。 - Material Symbols Outlinedのdark_mode／light_modeを使用する。月・太陽のSVGはHTML／JSX内へ直接埋め込む。 ### アイコン・操作名・配色の対応 | 現在の表示 | 表示するSVG | ボタンのaria-labelとツールチップ | 押した後 | | --- | --- | --- | --- | | light | dark_mode（月） | ダークモードに切り替える | data-modeをdarkへ変更 | | dark | light_mode（太陽） | ライトモードに切り替える | data-modeをlightへ変更 | 見えているアイコンは常に1つ。hiddenはSVGを包むgm-mode-iconへ設定する。 ボタンはtype="button"とし、フォーム送信を起こさない。SVGはaria-hidden="true"、focusable="false"とする。 ボタン名は「次に行う操作」を表す。aria-pressedを追加して別の状態表現と混在させない。 ### 操作・保存 - クリック、Enter、Spaceで1回だけ切り替える。ネイティブbuttonのclickとkeydownの両方で二重実行しない。 - Tab／Shift+Tabで到達・離脱でき、フォーカス枠が見える。切り替え時にbuttonを作り直してフォーカスを失わない。 - 配色、アイコンのhidden、操作名、説明文を同じ状態から更新する。検索条件・下書き・選択行をリセットしない。 - 導入先の保存方針を使用する。未定なら手動選択したlight/darkだけをローカル保存し、保存済みの選択→OS設定→lightの順で初期表示する。 - 保存を利用できなくても切り替えは動作する。明示的な手動選択をOSの変更で上書きしない。 - HTMLの初期data-modeとアプリの初期状態を揃え、読み込み時の配色のちらつきを確認する。 ### ツールチップの表示条件 - アイコンだけでも読み上げで用途が分かるaria-labelを付け、マウスホバーとキーボード由来のフォーカスで説明を表示する。 - ポインターを説明の上へ移しても消さない。読む時間を一定のタイマーで制限しない。 - クリックとEscで説明を閉じる。クリック由来のフォーカスを表示継続の条件にしない。 - ボタンと説明からポインターが離れたとき、キーボード由来のフォーカスもなければ閉じる。 - キーボード由来の説明はTabで離脱したときに閉じる。タッチ後やウィンドウを離れた後にも説明を残さない。 - 説明を消す目的でbutton.blur()を呼ばない。閉じた説明をリサイズや配色の再描画だけで再表示しない。 - カスタムツールチップとネイティブtitleを同時に付けて、説明を二重表示しない。 - 下のHTML例は初期状態の構造。hiddenの変更と位置調整は導入先のコードが担当する。 - ツールチップには一意のIDを付け、buttonのaria-describedbyで関連付ける。利用先に複数置く場合はIDを共有しない。 ## 金額入力と入力欄の高さ - gm-fieldのグリッドはalign-content:startを維持する。隣の項目の説明文やエラーで入力欄を縦に引き伸ばさない。標準の入力高さは28px。 - 円の入力はinput.gm-input.gm-moneyにtype="text"、inputmode="numeric"を使い、右寄せ・等幅数字で表示する。 - 初期表示とフォーカスを外した時は52,800のように3桁で区切り、編集中は52800のような数字にする。この動作はCSSだけでは付かない。JS版はGmUI.bindMoneyInputs(scope)を使うか、同じ処理を利用側で接続する。mountFormには接続済み。 - 送信・計算用にはカンマなしの整数文字列へ正規化する。表示上の整形だけでは未保存と判定しない。IME変換中は書き換えず、全角数字は確定後に扱う。空欄は空欄のまま、不正な値を勝手に丸めたり除去したりしない。整数・範囲の検証を行う。 - 有効な円の書式は数字のみ、または先頭1〜3桁＋3桁ずつのカンマ区切り。全角数字・全角カンマはNFKCで正規化してから判定する。小数、負数、不正なカンマ、通貨記号や文字を勝手に削って有効値にしない。Numberを使う実装では安全整数範囲を確認し、上限や0円の可否は既存の業務ルールを優先する。 - DOMのvalueやFormDataには表示用カンマが含まれ得る。送信前に検証して正規化し、同じ保存用の値を未保存判定や確認画面にも使う。サーバーへ表示文字列をそのまま渡さない。 ```html

送料を含む合計金額

``` ## 一覧の表示件数・スクロール・列設定 - ローカル／サーバーの一覧は、gm-data-gridの上部に件数・再読み込み・列設定、中央にgm-table-scroll、下部にgm-paginationを配置する。 - 表示件数は1ページのデータ数。10／20／50／100件を基本とする。 gm-page-size内のセレクトの表示値は10／20／50／100の数字だけにする。専用の幅56px・高さ24px、左余白と矢印の右余白・文字間隔各4pxを使う。タッチ時は幅64px・高さ44px。ページ移動では現在ページ・表示範囲・全件数を更新し、条件変更時は1ページ目に戻す。 - gm-data-grid内では常に表内スクロールとし、表の最大高さをmin(28rem,60dvh)に制限し、行が超えた場合だけ縦スクロールする。ヘッダーは表の中に固定する。--gm-grid-max-heightで上限を変更できる。 - スクロール方法の選択UIや切替属性を追加しない。横に広い表も表内で横スクロールする。大量データはサーバーページングで処理し、全件をDOMに追加しない。 - 列はcolgroupと同じ幅を見出し・行に使う。幅の調整は80〜800px。gm-column-resizeはドラッグ／左右キー、Shiftで32px、通常8px、Home／Endで下限／上限。ダブルクリックで初期幅へ戻す。aria-valuenowも更新する。 - チェック列はcolの幅をcalc(var(--gm-choice-target) + 2 * var(--gm-space-2))とし、文字拡大・タッチ時も操作領域と左右余白を確保する。gm-check-cell内のlabelは中央揃え、inputは余白0で配置する。 - 行選択では表のDOMを置き換えず、チェック状態・選択背景・件数だけを更新する。一括操作欄は0件時から表示し、操作ボタンを無効にする。gm-selection-count／gm-selection-numberで件数の幅を確保し、桁数や選択案内の切替で行を折り返さない。選択解除のフォーカス移動にはpreventScrollを使う。 - 列の表示・順序はgm-column-settingsのdetailsで変更し、最低1列は表示。Escape／外側クリックで閉じる。検索中の入力と列設定を独立して保持し、列・選択の変更時はスクロール位置を保持する。 - gm-page-numberのaria-current="page"、先頭／末尾でのdisabled、取得中の操作不可、成功／失敗時のフォーカスを実装する。狭い画面では番号を省略し、先頭・前・現在位置・次・末尾を残す。 - CSS単体では件数変更・ソート・ページ移動・列変更の動作は付かない。これらのイベントと状態更新は利用側が接続する。JS同梱版ではmountSearchList／mountServerSearchListを使う。 - 一覧にも左／下の片側罫線、疑似要素や影の代用を使わない。全周の外枠・交互背景・選択背景で読みやすくする。 ## 最小のHTML例 新規ページとして保存できる文書構造。既存アプリへ組み込む場合はmain内の必要な部分だけを取り出し、headの設定は既存の構成へ統合する。 ```html 申請一覧

申請一覧

申請を検索して内容を確認できます。

検索結果は1件です

申請一覧
件名状態
備品購入承認待ち
1〜1件 / 全1件
``` これは構造の例。サンプルの業務データや文言を既存の実データへ置き換える。 モード・検索・登録の操作を有効にする処理は利用先で実装する。 ## 主なクラス - 配置: gm-stack / gm-row / gm-between / gm-grid / gm-grid-cols-1 / md:gm-grid-cols-2 / gm-gap-4 - ページ: gm-page-head / gm-breadcrumb / gm-section / gm-panel / gm-shell / gm-shell-content - 補助操作: gm-utility-bar / gm-utility-label - 入力: gm-field / gm-label / gm-input / gm-money / gm-textarea / gm-select-wrap > gm-select / gm-help - 操作: gm-btn / gm-btn-primary / gm-btn-danger / gm-link / gm-icon-btn - 一覧: gm-search-panel / gm-search-fields / gm-data-grid / gm-table-toolbar / gm-grid-tools / gm-table-scroll > gm-table / gm-column-heading / gm-column-resize / gm-column-settings / gm-number / gm-page-size / gm-page-navigation - 状態: gm-alert / gm-alert-error / gm-error-text / gm-badge / gm-empty / gm-loading - 詳細: gm-detail（dlの直下にdt/dd）/ gm-timeline / gm-pagination - 対応するレイアウト部品のHTMLを使う。tableをdivへ置き換えるなど、意味を失う変更をしない。 ## 必須：Material Icons／Material Symbolsの公式SVGをHTML内で使う - この版はMaterial Symbols Outlinedへ統一する。Material IconsとSymbolsや異なる書体を画面ごとに混在させない。 - 公式SVG10種類を、CSS末尾の「HTMLへ直接埋め込む公式SVG」のコメントに収録している。 AIは必要なSVGをそのままHTML／JSXの要素として配置する。実際に描くのはHTML内のsvg/pathである。 - 原本データをローカルの共通アイコン部品へまとめて再利用してよい。最終的なDOMにはインラインsvg/pathを出力する。 - CDN、Google Fonts、アイコンフォント、外部SVGへのURL参照、CSSのdata:画像・マスクでアイコンを描く方式は使わない。 - 自作パス、CSSの線で描く矢印、Unicode記号への置き換えをしない。元のpathとviewBoxを保持する。 - 寸法と色はclass="gm-icon"、data-size、currentColorで指定する。既定20px、data-size="16" / "24" / "32"。 - 装飾アイコンはaria-hidden="true"、focusable="false"。アイコンだけの操作はbutton側へaria-labelを付ける。 - selectの矢印もインラインSVGを使う。gm-select-wrapの中でselectに続けてclass="gm-icon gm-select-arrow"のSVGを置く。 矢印は選択欄と同じグリッドに重ね、pointer-events:noneにする。疑似要素の矢印を重ねて二重表示しない。 - 複数選択の矢印はclass="gm-icon gm-chevron"、手順の矢印はclass="gm-icon gm-step-icon"でSVGを配置する。 - 使用するSVGを同梱し、出典・Apache-2.0のライセンスを最終成果物でも保持する。 - 収録外のアイコンが必要な場合は公式SVGを取得してプロジェクト内へ同梱し、取得元・ライセンスを記録する。 架空のパスを作らない。このCSSに収録されている種類は末尾の10種類のみ。 ## 状態・操作 - 通常、読込、0件、エラー、権限なし、未保存を必要な箇所で区別する。 - disabled、readonly、required、aria-invalid、aria-describedby、hiddenを適切に更新する。 - Tabで位置が分かるフォーカス表示を維持する。CSSのみのfocus/hover固定で説明を出し続けない。 - カスタム説明を使うなら、ホバーとキーボード由来のフォーカスを区別する。 クリックやEscで閉じ、ボタンのフォーカス自体を強制的に外さない。 - 日本語変換の確定Enterで検索・保存を発火させない。保存失敗で入力を消さない。 ## 外観の規則 左側・下側の片側罫線（border-left / border-inline-start / border-bottom / border-block-end）は、見出し・タブ・表や詳細の行も含めて禁止する。 疑似要素・影・背景画像による同じ線の代用も禁止する。グループ分けは見出しと用途に応じた余白、選択中のタブは控えめな背景と太字で示す。 見出し横の縦棒、グラデーション、ガラス風ぼかし、発光、 巨大な角丸カード、不要なカードの入れ子、装飾用の番号を追加しない。 入力欄や領域の全周枠、フォーカス枠、意味のある選択表示は維持する。 背景・文字・状態色は役割別の--gm-*変数を使い、白背景や白文字を個別に固定しない。 ## 確認 代表的な1画面から適用し、文字と操作枠の比率、ラベルの中央、矢印、左右余白、両モードを確認する。 クリック後のマウス移動、Tab / Enter / Space / Esc、タッチ、長い日本語、320px幅、200%拡大を確認する。 1280px幅を400%ズームした320 CSS px相当でも確認し、表の内部以外で水平スクロールや内容欠落がないことを確かめる。 文字間隔の上書き、固定ヘッダーによるフォーカス隠れ、強制配色、動きの低減、縦横の向きも確認する。 スクリーンリーダーでラベル・状態・エラー・検索結果通知、モーダルのフォーカス移動を確認する。 月／太陽は両方の切り替え方向で、配色・表示中のSVG・操作名・説明の同期を確認する。 ネットワークを切ってもアイコンが描画され、開発者ツールでHTML内のsvg/pathが確認できることを調べる。 既存のspan[data-icon]＋CSSマスクを使っていた場合は、HTML例のインラインSVGへ置き換える。 実画面で確認した結果と、CSSの静的検査・合成イベントで確認した結果を分けて報告する。 この配布物はCSSの構文・既定色のコントラスト・同梱データとHTML例を検査したもの。 Chrome 152のheadless検証で、幅320／768／1280px、両モード、3密度、文字サイズ100／200%、タッチ条件のエミュレーションを確認。実機タッチ・実際のブラウザーズーム・スクリーンリーダーは未確認。WCAG適合を宣言するには実装先での全体評価が必要。 このCSSの使い方を理解するために、別のREADME・ライブラリ本体・カタログを要求する必要はない。 第三者アイコンの出典とライセンス全文は、このファイルの末尾に収録している。 ## 状態のリセットと画面破棄 フォームをリセットしたら、次のマイクロタスクで値だけでなくクリアボタン・スイッチの表示・選択値と件数・候補検索・日付の検証状態・選択ファイルも同期する。resetイベントがpreventDefaultされた場合は変更しない。選択部品は初期値へ戻し、初期選択肢が削除・無効化されていれば空にする。ネイティブresetに合わせ、合成のinput/change通知は発行しない。 無効な入力欄は検証対象から外し、有効化時に再評価する。 画面を破棄・置換した後は、旧画面のボタンから業務処理・画面遷移を起動させない。子部品のイベント・タイマー・通信も破棄し、一つの後処理が例外になっても残りを実行する。遅い応答が新画面を変更しないよう所有状態を確認する。 CSS自体はこれらのJavaScript処理を実行しない。AIが利用先の操作処理へ実装する際の共通条件として扱う。 見出しの「16／14／13px・行高24／20／20px・余白4〜8px」は見出しだけの指定。画面外周・パネル・フォーム全体のpadding/gapに一律適用しない。ボタンは独立した方針として全サイズ・全密度で30px、上下padding2px・左右8px。通常入力は28px、補助セレクトは24px。チェックボックス／ラジオは見た目16px、表のチェック操作領域は24px（タッチ44px）。スイッチの見た目は32×18pxとする。 */ /*! ## 同梱コンポーネント一覧（47項目） 部品の色・状態・サイズ違いは別項目として数えない。以下の名前で用途を照合し、対応するgm-*クラスを再利用する。「/」は関連要素の列挙であり、全クラスを同じ要素へ付ける指示ではない。操作・非同期処理は導入先へ接続する。 | 部品 | 用途 | 主なクラス・構造 | 本体の収録形式 | | --- | --- | --- | --- | | CopyButton | コピー | gm-btn / gm-copy-control / gm-copy-button / gm-copy-label / gm-copy-error | マウント関数 | | TextInput | テキスト入力 | gm-field / gm-label / gm-input / gm-money / gm-help | 基本スタイル／ヘルパー | | Select | セレクト | gm-select-wrap > gm-select + gm-select-arrow | 基本スタイル／ヘルパー | | Textarea | 複数行入力 | gm-field / gm-textarea | 基本スタイル／ヘルパー | | Checkbox | チェックボックス | label.gm-choice > input[type=checkbox] | 基本スタイル／ヘルパー | | RadioGroup | ラジオグループ | fieldset / legend / label.gm-choice > input[type=radio] | 基本スタイル／ヘルパー | | DateInput | 日付入力 | input.gm-input[type=date] | 基本スタイル／ヘルパー | | Button | ボタン | gm-btn / gm-btn-primary / gm-btn-danger | 基本スタイル／ヘルパー | | Link | リンク | gm-link | 基本スタイル／ヘルパー | | Breadcrumb | パンくず | gm-breadcrumb | 基本スタイル／ヘルパー | | StepIndicator | ステップ | gm-steps / gm-step-icon | 基本スタイル／ヘルパー | | Disclosure | 折りたたみ | gm-disclosure + details / summary | 基本スタイル／ヘルパー | | ConfirmDialog | 確認ダイアログ | dialog.gm-dialog / gm-row | 基本スタイル／ヘルパー | | StatusBadge | ステータス | gm-badge / gm-badge-wait / gm-badge-success / gm-badge-error | 基本スタイル／ヘルパー | | Notification | 通知 | gm-alert / gm-alert-success / gm-alert-warning / gm-alert-error | 基本スタイル／ヘルパー | | FieldError | 項目エラー | gm-error-text / aria-invalid / aria-describedby | 基本スタイル／ヘルパー | | ErrorSummary | エラー要約 | gm-alert gm-alert-error + role=alert / data-error-summary | 基本スタイル／ヘルパー | | EmptyState | 0件表示 | gm-empty | 基本スタイル／ヘルパー | | LoadingState | 読込表示 | gm-loading / gm-skeleton / aria-busy | 基本スタイル／ヘルパー | | DataTable | 表 | gm-data-grid / gm-table-toolbar / gm-grid-tools / gm-table-scroll > gm-table / gm-column-heading / gm-column-resize / gm-number | 基本スタイル／ヘルパー | | DescriptionList | 説明リスト | gm-detail + dl / dt / dd | 基本スタイル／ヘルパー | | HistoryList | 履歴 | gm-timeline | 基本スタイル／ヘルパー | | Pagination | ページ移動 | gm-pagination / gm-page-size / gm-page-navigation / gm-page-number / gm-btn | 基本スタイル／ヘルパー | | SearchInput | 検索入力 | gm-input-line / gm-input / gm-btn | マウント関数 | | NumberInput | 数値入力 | gm-field / input.gm-input[type=number] | マウント関数 | | PasswordInput | パスワード入力 | gm-input-line / gm-input / gm-btn | マウント関数 | | Switch | スイッチ | label.gm-switch > input[type=checkbox][role=switch] | マウント関数 | | CheckboxGroup | チェックボックスグループ | fieldset / legend / gm-choice | マウント関数 | | SegmentedControl | 選択ボタングループ | gm-segments / input[type=radio] | マウント関数 | | Combobox | 検索付き単一選択 | gm-select-wrap / gm-popup / gm-options / gm-option | マウント関数 | | MultiSelect | 複数選択 | gm-popup-host / gm-popup / gm-choice / gm-chevron | マウント関数 | | DateRange | 日付範囲 | gm-row / gm-field / gm-input | マウント関数 | | FileUpload | ファイル選択・検証 | gm-file-input / gm-file-list / gm-error-text | マウント関数 | | Tabs | タブ | gm-tab-list / gm-tab / gm-tab-panel | マウント関数 | | Toolbar | ツールバー | gm-row[role=toolbar] / gm-btn | マウント関数 | | Menu | 操作メニュー | gm-popup-host / gm-menu | マウント関数 | | Popover | 補足の開閉 | gm-popup-host / gm-popover | マウント関数 | | Tooltip | ツールチップ | gm-tooltip / gm-tooltip-content | マウント関数 | | Progress | 進捗 | progress.gm-progress / role=status | マウント関数 | | ToastRegion | 閉じられる通知 | gm-toast / role=status | マウント関数 | | Drawer | ドロワー | dialog.gm-dialog.gm-drawer | マウント関数 | | DisclosureTree | 階層の折りたたみ | gm-tree + details / summary | マウント関数 | | PageHeader | ページ見出し | gm-page-head / gm-row | マウント関数 | | AppShell | 業務画面の外枠 | gm-shell / gm-shell-header / gm-shell-nav / gm-shell-content | マウント関数 | | AttachmentList | 添付一覧 | gm-file-list / gm-file-name | マウント関数 | | RemoteCombobox | 通信する候補検索 | gm-select-wrap / gm-popup / gm-options / gm-option | マウント関数 | | ColumnSettings | 列の表示・順序 | gm-column-settings / gm-column-panel / gm-column-setting / gm-choice / gm-row / gm-btn | マウント関数 | */ /*! ## 画面テンプレートのHTML例（11画面） 以下はライブラリ本体の描画関数から生成した構造例。1画面ずつ必要なものを取り出す。全例を同じページへ貼らない。IDは関連付けを保って一意に変更する。文言・データはサンプルなので既存システムの実データへ置き換える。静的HTMLだけでは保存や検索は動かない。フォーム送信、data-*の操作、hidden、選択状態を導入先のイベントと状態管理へ接続する。共通ヘッダーには前記のアイコンのみのテーマボタンを配置する。 ### 検索・一覧 ### 詳細・履歴 ### 登録・編集 ### 内容確認 ### 承認・差戻し ### 表示・通知設定 ### マスター管理 ### CSV取込 ### 操作履歴 ### 書類管理 ### サーバー検索・一覧 */ /* tokens.css */ /* プロジェクト固有のデザイントークン。指定のない入れ子の .gm は親の配色を引き継ぐ。 */ /* 自動生成した配色の開始 — scripts/build-tokens.cjs */ .gm:where(:not(.gm .gm)), .gm[data-mode='light'] { color-scheme: light; --gm-on-brand: #ffffff; --gm-text: #252b33; --gm-muted: #55616f; --gm-surface: #ffffff; --gm-background: #f5f6f8; --gm-border: #d5dae1; --gm-input-border: #788391; --gm-success: #19603e; --gm-success-bg: #edf7f1; --gm-warning: #775000; --gm-warning-bg: #fff6df; --gm-error: #aa2424; --gm-error-bg: #fff0f0; --gm-on-error: #ffffff; --gm-backdrop: rgb(0 0 0 / 0.4); --gm-brand: var(--gm-light-brand, #174da7); --gm-brand-hover: var(--gm-light-brand-hover, #133f89); --gm-brand-soft: var(--gm-light-brand-soft, #eff3f9); --gm-focus: var(--gm-light-focus, #174da7); } .gm[data-mode='dark'] { color-scheme: dark; --gm-on-brand: #131922; --gm-text: #e7ebf0; --gm-muted: #b4bdc9; --gm-surface: #1c232d; --gm-background: #131922; --gm-border: #414d5d; --gm-input-border: #8b98a9; --gm-success: #83d6a5; --gm-success-bg: #183329; --gm-warning: #ebc26d; --gm-warning-bg: #362c18; --gm-error: #ffaaaa; --gm-error-bg: #3d2428; --gm-on-error: #131922; --gm-backdrop: rgb(0 0 0 / 0.65); --gm-brand: var(--gm-dark-brand, #abbfdf); --gm-brand-hover: var(--gm-dark-brand-hover, #b5c7e3); --gm-brand-soft: var(--gm-dark-brand-soft, #263347); --gm-focus: var(--gm-dark-focus, #abbfdf); } @media print { .gm { color-scheme: light !important; --gm-on-brand: #ffffff !important; --gm-text: #252b33 !important; --gm-muted: #55616f !important; --gm-surface: #ffffff !important; --gm-background: #f5f6f8 !important; --gm-border: #d5dae1 !important; --gm-input-border: #788391 !important; --gm-success: #19603e !important; --gm-success-bg: #edf7f1 !important; --gm-warning: #775000 !important; --gm-warning-bg: #fff6df !important; --gm-error: #aa2424 !important; --gm-error-bg: #fff0f0 !important; --gm-on-error: #ffffff !important; --gm-backdrop: rgb(0 0 0 / 0.4) !important; --gm-brand: var(--gm-light-brand, #174da7) !important; --gm-brand-hover: var(--gm-light-brand-hover, #133f89) !important; --gm-brand-soft: var(--gm-light-brand-soft, #eff3f9) !important; --gm-focus: var(--gm-light-focus, #174da7) !important; } } /* 自動生成した配色の終了 */ .gm { --gm-font: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif; --gm-text-size: 0.875rem; --gm-label-size: 0.8125rem; --gm-meta-size: 0.75rem; --gm-space-1: 0.25rem; --gm-space-2: 0.5rem; --gm-space-3: 0.75rem; --gm-space-4: 1rem; --gm-space-5: 1.5rem; --gm-space-6: 2rem; --gm-space-7: 3rem; --gm-radius: 0.25rem; --gm-control-height: 1.75rem; --gm-button-height: 1.875rem; --gm-button-padding-block: 0.125rem; --gm-control-padding-block: 0.125rem; --gm-control-padding-inline: 0.5rem; --gm-control-xs-height: 1.5rem; --gm-control-xs-text-size: 0.8125rem; --gm-control-xs-line-height: 1.125rem; --gm-choice-size: 1rem; --gm-choice-target: 1.5rem; --gm-control-xs-icon-size: 1rem; --gm-control-xs-arrow-size: 1rem; --gm-control-xs-padding-block: 0.125rem; --gm-control-xs-padding-inline: 0.5rem; --gm-icon-size: 1.25rem; --gm-select-arrow-size: 1.25rem; --gm-select-arrow-inset: 0.5rem; --gm-select-text-gap: 0.5rem; --gm-select-text-inset: calc( var(--gm-select-arrow-size) + var(--gm-select-arrow-inset) + var(--gm-select-text-gap) ); --gm-cell-block: 0.25rem; --gm-shadow-dialog: 0 12px 36px rgb(0 0 0 / 0.2); } .gm[data-density='compact'] { --gm-control-height: 1.75rem; --gm-cell-block: 0.125rem; } @media (pointer: coarse) { .gm[data-density='compact'] { --gm-control-height: 2.75rem; --gm-cell-block: 0.75rem; } } @media (any-pointer: coarse) { .gm { --gm-control-xs-height: 2.75rem; --gm-control-xs-text-size: 1rem; --gm-control-xs-line-height: 1.5rem; --gm-control-xs-icon-size: 1.25rem; --gm-control-xs-arrow-size: 1.25rem; } } /* components.css */ /* アイコンはすべて、HTMLまたはアイコン描画処理が提供する公式のインラインSVGを使う。 */ .gm { font-family: var(--gm-font); font-size: var(--gm-text-size); line-height: 1.65; color: var(--gm-text); background: var(--gm-surface); } .gm *, .gm *::before, .gm *::after { box-sizing: border-box; } .gm [hidden] { display: none !important; } /* フォーカス枠は原則として外縁に合わせる。既存の枠や塗りつぶし部品は共通プリセットで調整する。 */ .gm :focus-visible { outline-width: 2px; outline-style: solid; outline-color: var(--gm-focus); outline-offset: 0; } .gm a { color: var(--gm-brand); text-underline-offset: 0.2em; } .gm button, .gm input, .gm select, .gm textarea { font: inherit; color: inherit; } .gm button { cursor: pointer; min-height: var(--gm-button-height); } .gm button:disabled { cursor: not-allowed; opacity: 0.55; } .gm h1, .gm h2, .gm h3, .gm p { margin: 0; } .gm h1 { font-size: var(--gm-title-size); line-height: var(--gm-title-line-height); } .gm h2 { font-size: var(--gm-section-title-size); line-height: var(--gm-section-title-line-height); } .gm h3 { font-size: var(--gm-subtitle-size); line-height: var(--gm-subtitle-line-height); } .gm .gm-muted { color: var(--gm-muted); } .gm .gm-meta { font-size: var(--gm-meta-size); color: var(--gm-muted); } .gm .gm-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .gm .gm-stack { display: grid; gap: var(--gm-space-5); } .gm .gm-row { display: flex; gap: var(--gm-space-2); align-items: center; flex-wrap: wrap; } .gm .gm-between { justify-content: space-between; } .gm .gm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gm-space-5); } .gm .gm-section { padding-block: var(--gm-space-2); } .gm .gm-section h2, .gm .gm-section h3 { margin-bottom: var(--gm-space-2); } .gm .gm-panel { background: var(--gm-surface); border: 1px solid var(--gm-border); padding: var(--gm-space-5); border-radius: var(--gm-radius); } .gm .gm-page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--gm-space-2); flex-wrap: wrap; margin-bottom: var(--gm-space-2); } .gm .gm-page-head p { margin-top: var(--gm-space-1); color: var(--gm-muted); font-size: var(--gm-label-size); } .gm .gm-breadcrumb { margin-bottom: var(--gm-space-2); font-size: var(--gm-meta-size); } .gm .gm-breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--gm-space-2); padding: 0; margin: 0; list-style: none; } .gm .gm-breadcrumb li + li::before { content: '/'; margin-right: var(--gm-space-2); color: var(--gm-muted); } .gm .gm-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--gm-space-2); min-height: var(--gm-button-height); padding: var(--gm-button-padding-block) var(--gm-control-padding-inline); border: 1px solid var(--gm-input-border); border-radius: var(--gm-radius); background: var(--gm-surface); font-size: var(--gm-label-size); font-weight: 600; line-height: 1.5; text-align: center; text-decoration: none; } .gm .gm-btn:hover:not(:disabled) { background: var(--gm-background); } .gm .gm-btn-primary { color: var(--gm-on-brand); background: var(--gm-brand); border-color: var(--gm-brand); } .gm .gm-btn-primary:hover:not(:disabled) { background: var(--gm-brand-hover); } .gm .gm-btn-danger { color: var(--gm-on-error); background: var(--gm-error); border-color: var(--gm-error); } .gm .gm-btn-danger:hover:not(:disabled) { background: var(--gm-error); text-decoration: underline; } .gm .gm-link { background: transparent; border: 0; padding: 0.25rem 0; color: var(--gm-brand); font-size: inherit; text-decoration: underline; text-underline-offset: 0.2em; text-align: left; } .gm .gm-field { display: grid; align-content: start; gap: var(--gm-space-1); min-width: 0; } .gm .gm-money { text-align: right; font-variant-numeric: tabular-nums; } .gm .gm-label { font-size: var(--gm-label-size); font-weight: 600; } .gm .gm-required { color: var(--gm-error); font-size: var(--gm-meta-size); font-weight: 500; margin-left: var(--gm-space-2); } .gm .gm-input, .gm .gm-select, .gm .gm-textarea { width: 100%; min-width: 0; min-height: var(--gm-control-height); padding: var(--gm-control-padding-block) var(--gm-control-padding-inline); background: var(--gm-surface); border: 1px solid var(--gm-input-border); border-radius: var(--gm-radius); line-height: 1.5; } .gm .gm-select-wrap { --gm-select-text-inset: calc( var(--gm-select-arrow-size) + var(--gm-select-arrow-inset) + var(--gm-select-text-gap) ); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-self: start; min-width: 0; max-width: 100%; color: var(--gm-text); } .gm .gm-select-wrap > .gm-select, .gm .gm-select-wrap > .gm-input { grid-area: 1 / 1; margin: 0; } .gm .gm-select-wrap > .gm-select-arrow { grid-area: 1 / 1; align-self: center; justify-self: end; display: block; margin-inline-end: var(--gm-select-arrow-inset); width: var(--gm-select-arrow-size); height: var(--gm-select-arrow-size); fill: currentColor; pointer-events: none; } .gm .gm-select-wrap > .gm-select { display: block; appearance: none; -webkit-appearance: none; background-image: none; padding-inline-end: var(--gm-select-text-inset); cursor: pointer; } .gm .gm-select-wrap > .gm-select:hover:not(:disabled) { border-color: var(--gm-text); } .gm .gm-select-wrap:has(> .gm-select:disabled) { color: var(--gm-muted); } .gm .gm-select-wrap > .gm-select:disabled { color: var(--gm-muted); background-color: var(--gm-background); cursor: not-allowed; } @media (forced-colors: active) { .gm .gm-select-wrap > .gm-select-arrow { color: ButtonText; } .gm .gm-select-wrap:has(> .gm-select:disabled) > .gm-select-arrow { color: GrayText; } } .gm .gm-input::placeholder, .gm .gm-textarea::placeholder { color: var(--gm-muted); opacity: 1; } .gm .gm-textarea { resize: vertical; } .gm .gm-input[readonly], .gm .gm-textarea[readonly] { background: var(--gm-background); } .gm [aria-invalid='true'] { border-color: var(--gm-error); } .gm .gm-help { font-size: var(--gm-meta-size); color: var(--gm-muted); } .gm .gm-error-text { font-size: var(--gm-label-size); color: var(--gm-error); } .gm .gm-choice { display: flex; align-items: flex-start; gap: var(--gm-space-2); font-size: var(--gm-label-size); min-height: var(--gm-control-height); padding-block: var(--gm-control-padding-block); cursor: pointer; } .gm .gm-choice input, .gm .gm-table input[type='checkbox'] { accent-color: var(--gm-brand); width: var(--gm-choice-size); height: var(--gm-choice-size); flex: none; margin: 0.18rem 0 0; } .gm fieldset { border: 0; padding: 0; margin: 0; min-width: 0; } .gm legend { font-size: var(--gm-label-size); font-weight: 600; margin-bottom: var(--gm-space-2); } .gm .gm-alert { padding: var(--gm-space-2); background: var(--gm-surface); border: 1px solid var(--gm-border); font-size: var(--gm-label-size); } .gm .gm-alert strong { display: block; margin-bottom: var(--gm-space-1); } .gm .gm-alert-error > strong { color: var(--gm-error); } .gm .gm-alert-success > strong { color: var(--gm-success); } .gm .gm-alert-warning > strong { color: var(--gm-warning); } .gm .gm-badge { display: inline; white-space: nowrap; font-size: var(--gm-label-size); font-weight: 500; color: var(--gm-muted); } .gm .gm-badge-wait { color: var(--gm-warning); } .gm .gm-badge-success { color: var(--gm-success); } .gm .gm-badge-error { color: var(--gm-error); } .gm .gm-search-panel { background: var(--gm-surface); padding: var(--gm-space-5); border: 1px solid var(--gm-border); border-radius: var(--gm-radius); margin-bottom: var(--gm-space-5); } .gm .gm-search-fields { display: grid; grid-template-columns: minmax(12rem, 2fr) minmax(9rem, 1fr) auto; align-items: end; gap: var(--gm-space-2); } .gm .gm-disclosure { margin-top: var(--gm-space-2); } .gm .gm-disclosure summary { color: var(--gm-brand); font-size: var(--gm-label-size); cursor: pointer; min-height: var(--gm-control-height); padding-block: var(--gm-control-padding-block); width: fit-content; } .gm .gm-filter-chips { display: flex; gap: var(--gm-space-2); align-items: center; flex-wrap: wrap; font-size: var(--gm-meta-size); color: var(--gm-muted); margin-bottom: var(--gm-space-2); } .gm .gm-chip { color: var(--gm-text); } .gm .gm-chip + .gm-chip::before { content: '／'; margin-inline-end: var(--gm-space-2); color: var(--gm-muted); } .gm .gm-table-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--gm-space-2); flex-wrap: wrap; margin-block: var(--gm-space-2); font-size: var(--gm-label-size); } .gm .gm-table-toolbar label { display: flex; gap: var(--gm-space-2); align-items: center; } .gm .gm-table-toolbar select { width: auto; } .gm .gm-table-scroll { max-width: 100%; overflow-x: auto; background: var(--gm-surface); } .gm .gm-table { border-collapse: collapse; width: 100%; font-size: var(--gm-label-size); } .gm .gm-table th, .gm .gm-table td { padding: var(--gm-cell-block) var(--gm-space-2); vertical-align: middle; text-align: left; } .gm .gm-table th { font-weight: 600; background: var(--gm-background); color: var(--gm-muted); } .gm .gm-table th button { background: transparent; border: 0; padding: 0; color: var(--gm-text); font-weight: 600; text-align: inherit; min-height: var(--gm-button-height); } .gm .gm-table tbody tr:hover { background: var(--gm-brand-soft); } .gm .gm-table tbody tr[aria-selected='true'] { background: var(--gm-brand-soft); } .gm .gm-table tbody tr.gm-selected-row { background: var(--gm-brand-soft); } .gm .gm-table .gm-number, .gm .gm-number { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .gm .gm-table .gm-check-cell { width: 3rem; text-align: center; } .gm .gm-table .gm-check-cell input { display: block; margin: 0; vertical-align: middle; } .gm .gm-check-cell label { display: grid; place-items: center; line-height: 1; min-height: var(--gm-choice-target); min-width: var(--gm-choice-target); } .gm .gm-bulk { display: flex; gap: var(--gm-space-4); align-items: center; flex-wrap: wrap; padding: var(--gm-space-3) var(--gm-space-4); margin-block: var(--gm-space-4); border: 1px solid var(--gm-border); background: var(--gm-background); font-size: var(--gm-label-size); } .gm .gm-pagination { display: flex; justify-content: space-between; align-items: center; gap: var(--gm-space-2); flex-wrap: wrap; margin-top: var(--gm-space-2); font-size: var(--gm-label-size); } .gm .gm-empty { padding: var(--gm-space-7) var(--gm-space-5); text-align: center; background: var(--gm-surface); } .gm .gm-empty p { margin-block: var(--gm-space-2) var(--gm-space-2); color: var(--gm-muted); font-size: var(--gm-label-size); } .gm .gm-detail { display: grid; grid-template-columns: 10rem minmax(0, 1fr); margin: 0; } .gm .gm-detail dt, .gm .gm-detail dd { margin: 0; padding: var(--gm-space-2); overflow-wrap: anywhere; } .gm .gm-detail dt { font-size: var(--gm-label-size); background: var(--gm-background); color: var(--gm-muted); } .gm .gm-form { max-width: 48rem; } .gm .gm-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gm-space-5); } .gm .gm-span-2 { grid-column: span 2; } .gm .gm-form-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--gm-space-4); flex-wrap: wrap; padding-top: var(--gm-space-5); margin-top: var(--gm-space-6); } .gm .gm-tabs { display: flex; gap: var(--gm-space-2); margin-bottom: var(--gm-space-2); flex-wrap: wrap; } .gm .gm-tabs button { min-height: var(--gm-button-height); padding: var(--gm-button-padding-block) var(--gm-control-padding-inline); background: transparent; border: 0; font-size: var(--gm-label-size); color: var(--gm-muted); } .gm .gm-tabs button[aria-pressed='true'] { color: var(--gm-brand); background: var(--gm-brand-soft); font-weight: 600; } .gm .gm-steps { display: flex; align-items: center; gap: var(--gm-space-2); list-style: none; padding: 0; margin: 0 0 var(--gm-space-2); flex-wrap: wrap; font-size: var(--gm-label-size); color: var(--gm-muted); } .gm .gm-steps li[aria-current='step'] { color: var(--gm-brand); font-weight: 700; } .gm .gm-steps li + li > .gm-step-icon { display: inline-block; vertical-align: middle; width: 1rem; height: 1rem; margin-inline-end: var(--gm-space-2); color: var(--gm-muted); fill: currentColor; } .gm .gm-split-view { display: grid; grid-template-columns: 17rem minmax(0, 1fr); border: 1px solid var(--gm-border); background: var(--gm-surface); } .gm .gm-queue-head { padding: var(--gm-space-2); font-size: var(--gm-label-size); color: var(--gm-muted); } .gm .gm-queue-item { display: grid; gap: var(--gm-space-2); width: 100%; text-align: left; padding: var(--gm-space-2); border: 0; background: var(--gm-surface); font-size: var(--gm-label-size); } .gm .gm-queue-item[aria-pressed='true'] { background: var(--gm-background); } .gm .gm-current-marker { visibility: hidden; color: var(--gm-text); font-weight: 700; } .gm .gm-queue-item[aria-pressed='true'] .gm-current-marker { visibility: visible; } .gm .gm-review { min-width: 0; padding: var(--gm-space-5); } .gm .gm-timeline { list-style: none; margin: 0; padding: 0; } .gm .gm-timeline li { padding: var(--gm-space-2) 0; font-size: var(--gm-label-size); } .gm .gm-dialog { color: var(--gm-text); background: var(--gm-surface); width: min(32rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); padding: var(--gm-space-5); border: 1px solid var(--gm-border); border-radius: var(--gm-radius); box-shadow: var(--gm-shadow-dialog); overflow-y: auto; } .gm .gm-dialog::backdrop { background: var(--gm-backdrop); } .gm .gm-dialog h2 { margin-bottom: var(--gm-space-2); } .gm .gm-dialog .gm-row { justify-content: flex-end; margin-top: var(--gm-space-2); } .gm .gm-loading { padding: var(--gm-space-6); text-align: center; color: var(--gm-muted); } .gm .gm-skeleton { height: 0.875rem; background: var(--gm-border); border-radius: 2px; margin-top: var(--gm-space-2); } .gm .gm-skip { position: absolute; left: 1rem; top: -10rem; z-index: 20; background: var(--gm-surface); padding: 0.75rem; } .gm .gm-skip:focus { top: 1rem; } .gm .gm-btn.gm-icon-btn { width: var(--gm-button-height); min-width: var(--gm-button-height); min-height: var(--gm-button-height); padding: 0; } .gm .gm-icon { display: inline-block; width: var(--gm-icon-size); height: var(--gm-icon-size); vertical-align: middle; fill: currentColor; flex: none; } .gm .gm-icon[data-size='16'] { width: 1rem; height: 1rem; } .gm .gm-icon[data-size='24'] { width: 1.5rem; height: 1.5rem; } .gm .gm-icon[data-size='32'] { width: 2rem; height: 2rem; } .gm .gm-table th button .gm-icon { margin-inline-start: 0.25rem; } .gm .gm-table .gm-link { padding-block: 0; min-height: var(--gm-choice-target); } .gm .gm-mode-toggle { position: relative; display: inline-flex; vertical-align: middle; } /* 固定領域内でベースラインによる位置ずれが起きないよう、SVGをインラインの文字配置から外す。 */ .gm .gm-mode-icon { display: flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; line-height: 0; flex: none; } .gm .gm-mode-icon > .gm-icon { display: block; width: 100%; height: 100%; } /* 補助的な操作部品には、業務フォームの表示密度とは別の寸法を使う。 */ .gm .gm-btn[data-size='xs'], .gm .gm-input[data-size='xs'], .gm .gm-select-wrap[data-size='xs'] > .gm-select { min-height: var(--gm-control-xs-height); padding: var(--gm-control-xs-padding-block) var(--gm-control-xs-padding-inline); font-size: var(--gm-control-xs-text-size); line-height: var(--gm-control-xs-line-height); } .gm .gm-select-wrap[data-size='xs'] { --gm-select-arrow-size: var(--gm-control-xs-arrow-size); --gm-select-arrow-inset: 0.5rem; --gm-select-text-inset: calc( var(--gm-select-arrow-size) + var(--gm-select-arrow-inset) + var(--gm-select-text-gap) ); } .gm .gm-select-wrap[data-size='xs'] > .gm-select { padding-inline-end: var(--gm-select-text-inset); } .gm .gm-btn.gm-icon-btn[data-size='xs'] { width: var(--gm-button-height); min-width: var(--gm-button-height); padding: 0; } .gm .gm-btn[data-size='xs'] .gm-mode-icon { width: var(--gm-control-xs-icon-size); height: var(--gm-control-xs-icon-size); } .gm .gm-mode-tooltip { position: absolute; top: calc(100% + 0.5rem); inset-inline-end: 0; z-index: 30; max-width: min(20rem, calc(100vw - 2rem)); width: max-content; padding: var(--gm-control-padding-block) var(--gm-control-padding-inline); border: 1px solid var(--gm-input-border); border-radius: var(--gm-radius); background: var(--gm-text); color: var(--gm-surface); font-size: var(--gm-label-size); font-weight: 400; pointer-events: auto; } .gm .gm-mode-tooltip::before { content: ''; position: absolute; inset-inline: 0; bottom: 100%; height: 0.5rem; } @media (forced-colors: active) { .gm .gm-mode-icon { color: ButtonText; } .gm .gm-mode-tooltip { color: CanvasText; background: Canvas; border-color: CanvasText; } } @media (forced-colors: active) { .gm .gm-select-arrow, .gm .gm-chevron { color: ButtonText; } .gm .gm-select-wrap:has(> .gm-select:disabled) > .gm-select-arrow { color: GrayText; } } @media (width <= 800px) { .gm .gm-search-fields { grid-template-columns: 1fr 1fr; } .gm .gm-search-fields > .gm-row { grid-column: 1/-1; } .gm .gm-split-view { grid-template-columns: 1fr; } } @media (width <= 560px) { .gm .gm-grid, .gm .gm-form-grid, .gm .gm-search-fields { grid-template-columns: 1fr; } .gm .gm-span-2 { grid-column: auto; } .gm .gm-detail { grid-template-columns: 1fr; } .gm .gm-detail dt { padding-bottom: 0.5rem; } .gm .gm-detail dd { padding-top: 0.5rem; } .gm .gm-panel, .gm .gm-search-panel, .gm .gm-review { padding: var(--gm-space-2); } .gm .gm-table { min-width: 37rem; } } @media (pointer: coarse) { .gm .gm-link, .gm .gm-table th button { min-height: 2.75rem; } .gm .gm-check-cell label { min-height: 2.75rem; } .gm .gm-input, .gm .gm-select, .gm .gm-textarea { font-size: 1rem; } } @media (prefers-reduced-motion: reduce) { .gm * { scroll-behavior: auto !important; } } @media print { .gm .gm-btn, .gm .gm-search-panel, .gm .gm-pagination, .gm .gm-bulk, .gm .gm-skip { display: none !important; } .gm .gm-table-scroll { overflow: visible; } .gm .gm-table { min-width: 0; } .gm .gm-panel { border: 0; padding: 0; } .gm .gm-detail dt { print-color-adjust: exact; } } .gm .gm-btn > .gm-icon { width: 1rem; height: 1rem; } /* 一覧では、コンパクトなツールバー、高さを制限した表示領域、常設のページ送りを共通で使う。 */ .gm .gm-data-grid { min-width: 0; border: 1px solid var(--gm-border); border-radius: var(--gm-radius); background: var(--gm-surface); } .gm .gm-data-grid .gm-table-toolbar { position: relative; margin: 0; padding: 8px; } .gm .gm-grid-tools, .gm .gm-page-size, .gm .gm-page-navigation, .gm .gm-page-numbers { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; } .gm .gm-grid-tools, .gm .gm-page-size { gap: 8px; } .gm .gm-grid-tools .gm-utility-label, .gm .gm-page-size .gm-utility-label { display: flex; align-items: center; gap: 4px; } .gm .gm-data-grid .gm-bulk { margin: 0; padding: 4px 8px; gap: 8px; border: 0; } .gm .gm-data-grid .gm-grid-selection { margin: 0; padding: 4px 8px; } .gm .gm-selection-count { flex: none; inline-size: calc(4em + var(--gm-selection-digits, 3) * 1ch); white-space: nowrap; font-variant-numeric: tabular-nums; } .gm .gm-selection-number { display: inline-block; inline-size: 3ch; text-align: right; font-variant-numeric: tabular-nums; } .gm .gm-data-grid .gm-table-scroll { overflow: auto; scrollbar-gutter: stable; scroll-padding-block: 44px 8px; overscroll-behavior-inline: contain; max-height: min(var(--gm-grid-max-height, 28rem), 60dvh); } .gm .gm-data-grid .gm-table { table-layout: fixed; border-collapse: separate; border-spacing: 0; } .gm .gm-data-grid .gm-table th { position: sticky; top: 0; z-index: 1; color: var(--gm-text); } .gm .gm-data-grid .gm-table tbody tr:nth-child(even) { background: var(--gm-background); } .gm .gm-data-grid .gm-table tbody tr:hover, .gm .gm-data-grid .gm-table tbody tr.gm-selected-row, .gm .gm-data-grid .gm-table tbody tr[aria-selected='true'] { background: var(--gm-brand-soft); } .gm .gm-column-heading { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; } .gm .gm-column-heading > span:first-child, .gm .gm-column-heading > button { min-width: 0; overflow-wrap: anywhere; } .gm .gm-column-heading > button { display: flex; align-items: center; gap: 4px; flex: 1; } .gm .gm-column-heading > button .gm-icon { flex: none; margin: 0; } .gm .gm-number .gm-column-heading > button { justify-content: flex-end; } .gm .gm-column-resize { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; min-height: 24px; cursor: col-resize; touch-action: none; border-radius: var(--gm-radius); color: var(--gm-muted); } .gm .gm-column-resize .gm-icon { transform: rotate(90deg); } .gm .gm-column-resize:hover, .gm .gm-column-resize:focus-visible { background: var(--gm-brand-soft); color: var(--gm-text); } .gm .gm-data-grid .gm-pagination { margin: 0; padding: 8px; background: var(--gm-background); border-radius: var(--gm-radius); } .gm .gm-page-size { font-variant-numeric: tabular-nums; } .gm .gm-page-size .gm-select-wrap[data-size='xs'] { width: 3.5rem; --gm-select-arrow-inset: 0.25rem; --gm-select-text-gap: 0.25rem; } .gm .gm-page-size .gm-select-wrap[data-size='xs'] > .gm-select { padding-inline-start: 0.25rem; } @media (pointer: coarse) { .gm .gm-page-size .gm-select-wrap[data-size='xs'] { width: 4rem; } } .gm .gm-page-number { min-width: 24px; } .gm .gm-page-number[aria-current='page'] { background: var(--gm-brand-soft); color: var(--gm-text); border-color: var(--gm-brand); font-weight: 700; } .gm .gm-page-position { white-space: nowrap; font-variant-numeric: tabular-nums; } .gm .gm-column-settings { position: relative; } .gm .gm-column-settings > summary { display: inline-flex; list-style: none; cursor: pointer; } .gm .gm-column-settings > summary::-webkit-details-marker { display: none; } .gm .gm-column-panel { position: absolute; inset-inline-start: 0; top: calc(100% + 4px); z-index: 5; width: min(22rem, 100%); max-height: min(26rem, 60dvh); overflow: auto; overscroll-behavior: contain; padding: 8px; border: 1px solid var(--gm-input-border); border-radius: var(--gm-radius); background: var(--gm-surface); } .gm .gm-data-grid .gm-column-settings { position: static; } .gm .gm-data-grid .gm-column-panel { inset-inline-start: auto; inset-inline-end: 8px; width: min(22rem, calc(100% - 16px)); } .gm .gm-column-panel fieldset { min-width: 0; border: 0; padding: 0; margin: 0; } .gm .gm-column-setting { flex-wrap: nowrap; padding-block: 4px; } .gm .gm-column-setting > .gm-choice { min-width: 0; overflow-wrap: anywhere; } .gm .gm-column-setting > .gm-row { flex: none; gap: 4px; } .gm .gm-column-panel .gm-help:empty { display: none; } @media (width <= 560px) { .gm .gm-data-grid .gm-table-toolbar { align-items: flex-start; } .gm .gm-data-grid .gm-grid-tools { width: 100%; } .gm .gm-page-numbers { display: none; } } @media (pointer: coarse) { .gm .gm-column-resize { width: 44px; min-height: 44px; } .gm .gm-column-settings > summary { min-width: 44px; min-height: 44px; } } @media print { .gm .gm-grid-tools, .gm .gm-column-resize { display: none !important; } .gm .gm-data-grid .gm-table-scroll { max-height: none !important; overflow: visible; } .gm .gm-data-grid .gm-table { min-width: 0 !important; } .gm .gm-data-grid .gm-table th { position: static !important; } } /* 自動生成した業務用プリセットの開始 */ /* 業務UIの標準プリセット。remはルート16pxの場合の値。ページ全体のルート文字サイズは変更しない。 */ .gm { --gm-text-size: 0.875rem; --gm-label-size: 0.8125rem; --gm-meta-size: 0.75rem; --gm-title-size: 1rem; --gm-title-line-height: 1.5rem; --gm-section-title-size: 0.875rem; --gm-section-title-line-height: 1.25rem; --gm-subtitle-size: 0.8125rem; --gm-subtitle-line-height: 1.25rem; --gm-control-height: 1.75rem; --gm-button-height: 1.875rem; --gm-button-padding-block: 0.125rem; --gm-control-padding-block: 0.125rem; --gm-control-xs-text-size: 0.8125rem; --gm-control-xs-height: 1.5rem; --gm-cell-block: 0.25rem; --gm-scroll-offset: 1rem; } .gm[data-density='compact'] { --gm-control-height: 1.75rem; --gm-control-padding-block: 0.125rem; --gm-cell-block: 0.125rem; } .gm[data-density='comfortable'] { --gm-control-height: 2.5rem; --gm-control-padding-block: 0.5rem; --gm-cell-block: 0.75rem; } .gm h1 { font-size: var(--gm-title-size); line-height: var(--gm-title-line-height); } .gm h2 { font-size: var(--gm-section-title-size); line-height: var(--gm-section-title-line-height); } .gm h3 { font-size: var(--gm-subtitle-size); line-height: var(--gm-subtitle-line-height); } .gm .gm-btn { padding: var(--gm-button-padding-block) var(--gm-control-padding-inline); } .gm .gm-input, .gm .gm-select, .gm .gm-textarea { font-size: var(--gm-text-size); padding-block: var(--gm-control-padding-block); } .gm .gm-choice { padding-block: var(--gm-control-padding-block); } .gm .gm-input[data-size='xs'], .gm .gm-select-wrap[data-size='xs'] > .gm-select { padding-block: var(--gm-control-xs-padding-block); } .gm .gm-btn.gm-icon-btn { width: var(--gm-button-height); min-width: var(--gm-button-height); min-height: var(--gm-button-height); padding: 0; } .gm .gm-btn.gm-icon-btn[data-size='xs'] { width: var(--gm-button-height); min-width: var(--gm-button-height); min-height: var(--gm-button-height); padding: 0; padding-block: 0; } .gm .gm-switch, .gm .gm-segments label, .gm .gm-tab, .gm .gm-menu button, .gm .gm-shell-nav a, .gm .gm-file-input { font-size: var(--gm-label-size); } .gm .gm-switch, .gm .gm-segments label, .gm .gm-tab, .gm .gm-menu button, .gm .gm-shell-nav a { min-height: var(--gm-control-height); padding-block: var(--gm-control-padding-block); } .gm .gm-option { min-height: var(--gm-control-height); padding: var(--gm-control-padding-block) var(--gm-control-padding-inline); } .gm .gm-file-input::file-selector-button { min-height: var(--gm-button-height); padding-block: var(--gm-button-padding-block); } /* 文字の拡大と折り返しを許容する。操作領域の最小寸法を確保しつつ、アイコンは過度に大きくしない。 */ .gm { overflow-wrap: anywhere; } .gm :where(.gm-btn, .gm-link, .gm-tab, .gm-tabs button, .gm-table th button, .gm-popover > summary) { min-width: 24px; min-height: 24px; } .gm .gm-btn, .gm .gm-btn[data-size], .gm .gm-tab, .gm .gm-tabs button, .gm .gm-menu button, .gm .gm-table button.gm-link { min-height: var(--gm-button-height); padding-block: var(--gm-button-padding-block); } .gm .gm-link { display: inline-flex; align-items: center; } .gm .gm-hit-target { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; } .gm .gm-choice, .gm .gm-switch, .gm .gm-segments label { min-width: 24px; max-width: 100%; } .gm .gm-utility-label, .gm .gm-badge { white-space: normal; } .gm .gm-utility-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--gm-space-2); margin-block: var(--gm-space-2); } .gm .gm-utility-label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--gm-control-xs-text-size); line-height: 1.5; } .gm .gm-utility-label, .gm .gm-table-toolbar label, .gm .gm-input-line { flex-wrap: wrap; max-width: 100%; } .gm .gm-row > *, .gm .gm-page-head > *, .gm .gm-table-toolbar > *, .gm .gm-pagination > * { max-width: 100%; } .gm .gm-page-head > div { min-width: 0; } .gm .gm-file-list > li, .gm .gm-toast { flex-wrap: wrap; } .gm .gm-table th, .gm .gm-table td { overflow-wrap: anywhere; } .gm .gm-mode-tooltip, .gm .gm-tooltip-content { white-space: normal; overflow-wrap: anywhere; } .gm .gm-input-line > .gm-input { flex-basis: 12rem; } .gm :focus-visible, .gm [id] { scroll-margin-block: var(--gm-scroll-offset); } /* 境界線の幅や配置を変えず、既存の枠を2pxの線1本で置き換える。 */ .gm :is(.gm-input, .gm-select, .gm-textarea, .gm-btn, .gm-table-scroll, .gm-tab-panel):focus-visible, .gm .gm-switch input:focus-visible { outline-offset: -2px; } /* 塗りつぶした部品には、内部に背景と区別できる色の枠線を表示する。 外側の1pxは元の塗りつぶしを残し、追加の輪郭線にはしない。 */ .gm .gm-btn.gm-btn-primary:focus-visible { outline-color: var(--gm-on-brand); outline-offset: -3px; } .gm .gm-btn.gm-btn-danger:focus-visible { outline-color: var(--gm-on-error); outline-offset: -3px; } .gm .gm-switch input:checked:focus-visible { outline-color: var(--gm-on-brand); outline-offset: -3px; } /* quiet 指定では、用途別のボタンクラスがあっても背景を透明にする。 */ .gm .gm-btn[data-variant='quiet']:focus-visible { outline-color: var(--gm-focus); outline-offset: -2px; } .gm .gm-table-scroll, .gm .gm-popup, .gm .gm-multi-list, .gm .gm-dialog { scroll-padding: 1rem; } .gm .gm-option[data-active='true'] { outline: 2px solid var(--gm-focus); outline-offset: -2px; } .gm .gm-error-summary { border: 1px solid var(--gm-error); padding: var(--gm-space-2); margin-block: var(--gm-space-2); } .gm .gm-error-summary h2 { color: var(--gm-error); } .gm .gm-error-summary ul { margin-block: 0.5rem 0; padding-inline-start: 1.5rem; } @media (width <= 560px) { .gm .gm-grid-cols-2, .gm .gm-grid-cols-3 { grid-template-columns: minmax(0, 1fr); } .gm .gm-col-span-2 { grid-column: auto; } } @media (any-pointer: coarse) { .gm button, .gm .gm-btn, .gm .gm-file-input { --gm-button-height: 2.75rem; --gm-button-padding-block: 0.5rem; } .gm, .gm[data-density] { --gm-control-height: 2.75rem; --gm-button-height: 2.75rem; --gm-button-padding-block: 0.5rem; --gm-control-padding-block: 0.5rem; --gm-control-xs-height: 2.75rem; --gm-control-xs-text-size: 1rem; --gm-control-xs-line-height: 1.5rem; --gm-control-xs-icon-size: 1.25rem; --gm-control-xs-arrow-size: 1.25rem; --gm-choice-target: 2.75rem; --gm-cell-block: 0.75rem; } .gm .gm-input, .gm .gm-select, .gm .gm-textarea { font-size: 1rem; min-height: 2.75rem; } .gm .gm-btn, .gm .gm-choice, .gm .gm-switch, .gm .gm-segments label, .gm .gm-option, .gm .gm-menu button, .gm .gm-shell-nav a { min-height: 44px; } .gm .gm-btn.gm-icon-btn, .gm .gm-btn.gm-icon-btn[data-size='xs'] { width: var(--gm-button-height); min-width: var(--gm-button-height); min-height: var(--gm-button-height); } .gm .gm-link, .gm .gm-tab, .gm .gm-tabs button, .gm .gm-table th button, .gm .gm-check-cell label, .gm .gm-hit-target, .gm .gm-popover > summary { min-width: 44px; min-height: 44px; } .gm button, .gm .gm-btn, .gm .gm-btn[data-size], .gm .gm-tab, .gm .gm-tabs button, .gm .gm-menu button, .gm .gm-table th button { min-height: var(--gm-button-height); } } @media (forced-colors: active) { .gm :focus-visible, .gm .gm-option[data-active='true'] { outline-color: Highlight !important; } .gm .gm-btn:focus-visible { outline-offset: -2px !important; } .gm .gm-switch input:focus-visible { outline-offset: 0 !important; } .gm .gm-btn, .gm .gm-input, .gm .gm-select, .gm .gm-textarea { border-color: ButtonText; } .gm .gm-btn:disabled, .gm .gm-input:disabled, .gm .gm-select:disabled, .gm .gm-textarea:disabled { color: GrayText; border-color: GrayText; opacity: 1; } .gm .gm-input[aria-invalid='true'], .gm .gm-select[aria-invalid='true'], .gm .gm-textarea[aria-invalid='true'] { border-style: dashed; } .gm .gm-tabs button[aria-pressed='true'], .gm .gm-tab[aria-selected='true'] { color: Highlight; } .gm .gm-option[aria-selected='true'], .gm .gm-shell-nav a[aria-current='page'] { text-decoration: underline; } } @media (prefers-reduced-motion: reduce) { .gm, .gm *, .gm *::before, .gm *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; } } /* 自動生成した業務用プリセットの終了 */ /* extended.css */ .gm .gm-copy-control { display: inline-block; max-width: 100%; vertical-align: middle; } .gm .gm-copy-button { max-width: 100%; } .gm .gm-copy-button[aria-busy='true'] { cursor: progress; } .gm .gm-copy-label { display: block; min-width: 0; text-align: start; overflow-wrap: anywhere; } .gm .gm-copy-button [data-copy-success], .gm .gm-copy-button[data-copied='true'] [data-copy-label] { display: none; } .gm .gm-copy-button[data-copied='true'] [data-copy-success] { display: inline; } .gm .gm-copy-error { display: block; margin-block-start: var(--gm-space-2); } .gm .gm-btn[data-variant='quiet'] { border-color: transparent; background: transparent; color: var(--gm-text); } .gm .gm-btn[data-variant='quiet']:hover:not(:disabled) { background: var(--gm-background); color: var(--gm-text); } .gm .gm-input-line { display: flex; align-items: center; gap: var(--gm-space-2); min-width: 0; } .gm .gm-input-line > .gm-input { flex: 1; min-width: 0; } .gm .gm-select-wrap > .gm-input { padding-inline-end: var(--gm-select-text-inset); } .gm .gm-chevron { width: var(--gm-select-arrow-size); height: var(--gm-select-arrow-size); fill: currentColor; margin-inline: 0; flex: none; pointer-events: none; } .gm .gm-switch { display: flex; align-items: center; gap: var(--gm-space-2); min-height: var(--gm-control-height); width: fit-content; cursor: pointer; } .gm .gm-switch input { appearance: none; width: 2rem; height: 1.125rem; border: 1px solid var(--gm-input-border); border-radius: 1rem; background: var(--gm-background); margin: 0; flex: none; position: relative; } .gm .gm-switch input::after { content: ''; position: absolute; width: 0.75rem; height: 0.75rem; top: 2px; left: 2px; border-radius: 50%; background: var(--gm-muted); } .gm .gm-switch input:checked { background: var(--gm-brand); border-color: var(--gm-brand); } .gm .gm-switch input:checked::after { left: calc(100% - 0.75rem - 2px); background: var(--gm-on-brand); } .gm .gm-switch input:disabled { opacity: 0.55; cursor: not-allowed; } .gm .gm-segments { display: flex; gap: var(--gm-space-2); flex-wrap: wrap; } .gm .gm-segments label { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--gm-control-height); padding: var(--gm-control-padding-block) var(--gm-control-padding-inline); border: 1px solid var(--gm-input-border); border-radius: var(--gm-radius); font-size: var(--gm-label-size); cursor: pointer; } .gm .gm-segments label:has(:checked) { background: var(--gm-background); font-weight: 700; } .gm .gm-segments input { accent-color: var(--gm-brand); } .gm .gm-popup-host { position: relative; min-width: 0; } .gm .gm-popup { position: absolute; z-index: 5; inset-inline: 0; top: 100%; margin-top: 0.25rem; background: var(--gm-surface); border: 1px solid var(--gm-input-border); border-radius: var(--gm-radius); padding: 0.5rem; max-height: 18rem; overflow: auto; } .gm .gm-options { list-style: none; padding: 0; margin: 0; } .gm .gm-option { padding: var(--gm-control-padding-block) var(--gm-control-padding-inline); min-height: var(--gm-control-height); cursor: pointer; font-size: var(--gm-label-size); overflow-wrap: anywhere; } .gm .gm-option[aria-selected='true'] { background: var(--gm-background); font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; } .gm .gm-option[aria-disabled='true'] { color: var(--gm-muted); cursor: not-allowed; } .gm .gm-option:hover:not([aria-disabled='true']) { background: var(--gm-background); } .gm .gm-multi-list { max-height: 15rem; overflow-y: auto; } .gm .gm-multi-toggle { display: flex; justify-content: space-between; width: 100%; } .gm .gm-file-list { padding: 0; margin: 0; list-style: none; } .gm .gm-file-list > li { display: flex; align-items: center; justify-content: space-between; gap: var(--gm-space-2); padding: var(--gm-space-2) 0; overflow-wrap: anywhere; } .gm .gm-file-list .gm-file-name { min-width: 0; overflow-wrap: anywhere; } .gm .gm-file-input { width: 100%; min-width: 0; max-width: 100%; font-size: var(--gm-label-size); } .gm .gm-file-input::file-selector-button { font: inherit; min-height: var(--gm-button-height); padding: var(--gm-button-padding-block) var(--gm-control-padding-inline); border: 1px solid var(--gm-input-border); border-radius: var(--gm-radius); background: var(--gm-surface); color: var(--gm-text); cursor: pointer; margin-inline-end: var(--gm-space-2); } .gm .gm-tab-list { display: flex; gap: var(--gm-space-2); flex-wrap: wrap; } .gm .gm-tab { min-height: var(--gm-button-height); border: 0; background: transparent; color: var(--gm-muted); padding: var(--gm-button-padding-block) var(--gm-control-padding-inline); font-size: var(--gm-label-size); } .gm .gm-tab[aria-selected='true'] { color: var(--gm-brand); background: var(--gm-brand-soft); font-weight: 700; } .gm .gm-tab-panel { padding-block: var(--gm-space-2); } .gm .gm-menu { min-width: 12rem; inset-inline-end: auto; } .gm .gm-menu button { display: block; width: 100%; text-align: left; border: 0; background: var(--gm-surface); padding: var(--gm-button-padding-block) var(--gm-control-padding-inline); min-height: var(--gm-button-height); } .gm .gm-menu button:hover, .gm .gm-menu button:focus { background: var(--gm-background); } .gm .gm-popover { position: relative; } .gm .gm-popover > summary { width: fit-content; } .gm .gm-popover > div { margin-top: var(--gm-space-3); padding: var(--gm-space-4); border: 1px solid var(--gm-border); background: var(--gm-surface); } .gm .gm-tooltip { position: relative; display: inline-block; } .gm .gm-tooltip-content { position: absolute; bottom: 100%; inset-inline-start: 0; z-index: 6; width: max-content; max-width: min(20rem, 80vw); background: var(--gm-text); color: var(--gm-surface); font-size: var(--gm-label-size); padding: var(--gm-control-padding-block) var(--gm-control-padding-inline); border-radius: var(--gm-radius); } .gm .gm-progress { width: 100%; height: 1rem; accent-color: var(--gm-brand); } .gm .gm-toast { display: flex; align-items: center; justify-content: space-between; gap: var(--gm-space-4); border: 1px solid var(--gm-input-border); background: var(--gm-surface); padding: var(--gm-space-4); margin-block: var(--gm-space-3); } .gm .gm-drawer { margin: 0 0 0 auto; height: 100%; max-height: 100%; width: min(32rem, 100%); border-radius: 0; } .gm .gm-tree, .gm .gm-tree ul { list-style: none; padding: 0; margin: 0; } .gm .gm-tree ul { padding-inline-start: var(--gm-space-5); } .gm .gm-tree summary, .gm .gm-tree a, .gm .gm-tree span { min-height: var(--gm-control-height); padding: var(--gm-control-padding-block) 0; display: block; } .gm .gm-tree summary { display: list-item; cursor: pointer; } .gm .gm-tree li { margin-inline-start: 1rem; } .gm .gm-shell { display: grid; grid-template-columns: 13rem minmax(0, 1fr); border: 1px solid var(--gm-border); } .gm .gm-shell-header { grid-column: 1/-1; padding: var(--gm-space-4); } .gm .gm-shell-nav { padding: var(--gm-space-4); } .gm .gm-shell-nav a { display: block; padding: var(--gm-control-padding-block) var(--gm-control-padding-inline); min-height: var(--gm-control-height); color: var(--gm-text); } .gm .gm-shell-nav a[aria-current='page'] { background: var(--gm-background); font-weight: 700; } .gm .gm-shell-content { padding: var(--gm-space-5); min-width: 0; } .gm .gm-theme-layout { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: var(--gm-space-6); align-items: start; } .gm .gm-theme-preview { padding: var(--gm-space-5); border: 1px solid var(--gm-border); min-width: 0; } .gm .gm-theme-layout pre { white-space: pre-wrap; word-break: break-word; } @media (width <= 800px) { .gm .gm-theme-layout { grid-template-columns: 1fr; } .gm .gm-shell { grid-template-columns: 1fr; } } @media (any-pointer: coarse) { .gm .gm-input, .gm .gm-select { min-height: 2.75rem; } .gm .gm-table td, .gm .gm-table th { padding-block: max(0.75rem, var(--gm-cell-block)); } } @media (forced-colors: active) { .gm .gm-switch input { appearance: auto; width: 1.5rem; height: 1.5rem; } .gm .gm-switch input::after { display: none; } .gm .gm-tooltip-content { border: 1px solid CanvasText; } .gm .gm-tab[aria-selected='true'] { color: Highlight; } } @media (any-pointer: coarse) { .gm .gm-tab, .gm .gm-switch, .gm .gm-segments label, .gm .gm-option, .gm .gm-menu button, .gm .gm-shell-nav a, .gm .gm-tree summary, .gm .gm-tree a { min-height: 2.75rem; min-width: 44px; } .gm .gm-file-input::file-selector-button { min-height: var(--gm-button-height); } } /* utilities.css */ /* 必要に応じて使う、適用範囲を限定した補助クラス。部品のスタイルより後に配置する。 */ .gm .gm-p-1 { padding: var(--gm-space-1); } .gm .gm-px-1 { padding-inline: var(--gm-space-1); } .gm .gm-py-1 { padding-block: var(--gm-space-1); } .gm .gm-gap-1 { gap: var(--gm-space-1); } .gm .gm-mt-1 { margin-top: var(--gm-space-1); } .gm .gm-mb-1 { margin-bottom: var(--gm-space-1); } .gm .gm-p-2 { padding: var(--gm-space-2); } .gm .gm-px-2 { padding-inline: var(--gm-space-2); } .gm .gm-py-2 { padding-block: var(--gm-space-2); } .gm .gm-gap-2 { gap: var(--gm-space-2); } .gm .gm-mt-2 { margin-top: var(--gm-space-2); } .gm .gm-mb-2 { margin-bottom: var(--gm-space-2); } .gm .gm-p-3 { padding: var(--gm-space-3); } .gm .gm-px-3 { padding-inline: var(--gm-space-3); } .gm .gm-py-3 { padding-block: var(--gm-space-3); } .gm .gm-gap-3 { gap: var(--gm-space-3); } .gm .gm-mt-3 { margin-top: var(--gm-space-3); } .gm .gm-mb-3 { margin-bottom: var(--gm-space-3); } .gm .gm-p-4 { padding: var(--gm-space-4); } .gm .gm-px-4 { padding-inline: var(--gm-space-4); } .gm .gm-py-4 { padding-block: var(--gm-space-4); } .gm .gm-gap-4 { gap: var(--gm-space-4); } .gm .gm-mt-4 { margin-top: var(--gm-space-4); } .gm .gm-mb-4 { margin-bottom: var(--gm-space-4); } .gm .gm-p-5 { padding: var(--gm-space-5); } .gm .gm-px-5 { padding-inline: var(--gm-space-5); } .gm .gm-py-5 { padding-block: var(--gm-space-5); } .gm .gm-gap-5 { gap: var(--gm-space-5); } .gm .gm-mt-5 { margin-top: var(--gm-space-5); } .gm .gm-mb-5 { margin-bottom: var(--gm-space-5); } .gm .gm-p-6 { padding: var(--gm-space-6); } .gm .gm-px-6 { padding-inline: var(--gm-space-6); } .gm .gm-py-6 { padding-block: var(--gm-space-6); } .gm .gm-gap-6 { gap: var(--gm-space-6); } .gm .gm-mt-6 { margin-top: var(--gm-space-6); } .gm .gm-mb-6 { margin-bottom: var(--gm-space-6); } .gm .gm-p-7 { padding: var(--gm-space-7); } .gm .gm-px-7 { padding-inline: var(--gm-space-7); } .gm .gm-py-7 { padding-block: var(--gm-space-7); } .gm .gm-gap-7 { gap: var(--gm-space-7); } .gm .gm-mt-7 { margin-top: var(--gm-space-7); } .gm .gm-mb-7 { margin-bottom: var(--gm-space-7); } .gm .gm-flex { display: flex; } .gm .gm-grid { display: grid; } .gm .gm-block { display: block; } .gm .gm-wrap { flex-wrap: wrap; } .gm .gm-items-center { align-items: center; } .gm .gm-items-start { align-items: flex-start; } .gm .gm-justify-between { justify-content: space-between; } .gm .gm-justify-end { justify-content: flex-end; } .gm .gm-w-full { width: 100%; } .gm .gm-w-auto { width: auto; } .gm .gm-min-w-0 { min-width: 0; } .gm .gm-max-w-content { max-width: var(--gm-content-width, 80rem); } .gm .gm-max-w-form { max-width: 48rem; } .gm .gm-mx-auto { margin-inline: auto; } .gm .gm-text-left { text-align: left; } .gm .gm-text-right { text-align: right; } .gm .gm-font-bold { font-weight: 700; } .gm .gm-grid-cols-1 { grid-template-columns: minmax(0, 1fr); } .gm .gm-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gm .gm-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gm .gm-col-span-2 { grid-column: span 2; } @media (width >= 560px) { .gm .sm\:gm-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .gm .sm\:gm-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gm .sm\:gm-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gm .sm\:gm-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (width >= 800px) { .gm .md\:gm-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .gm .md\:gm-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gm .md\:gm-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gm .md\:gm-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (width >= 1120px) { .gm .lg\:gm-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .gm .lg\:gm-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gm .lg\:gm-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gm .lg\:gm-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* 固定列数の補助クラスは狭い画面で1列にする。画面幅別の指定は明示したままにする。 */ @media (width <= 560px) { .gm .gm-grid-cols-2, .gm .gm-grid-cols-3 { grid-template-columns: minmax(0, 1fr); } .gm .gm-col-span-2 { grid-column: auto; } } /*! ## HTMLへ直接埋め込む公式SVG 以下を必要な場所のHTML／JSXへコピーする。CSSコメントに置いたままでは描画されない。 JSXではclassをclassNameに変更する。pathとviewBoxは変更しない。 ### arrow_downward ### arrow_forward ### arrow_upward ### backspace ### check ### content_copy ### dark_mode ### expand_more ### light_mode ### unfold_more */ /*! Third-party icon attribution Material Symbols Outlined / Google Source: https://github.com/google/material-design-icons Commit: 40a7a292a79d9394157e1ea24f83d52d5e17c556 Modified: CSS examples add class, sizing, currentColor and accessibility attributes to inline SVG; original path coordinates and viewBox preserved. No NOTICE file at the pinned repository root. The following license applies to the third-party icon data only; it does not relicense the UI stylesheet. Apache License Version 2.0, January 2004 http://www.apache.org/licenses/ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 1. Definitions. "License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document. "Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License. "Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity. "You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License. "Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files. "Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types. "Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below). "Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof. "Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution." "Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work. 2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form. 3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed. 4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions: (a) You must give any other recipients of the Work or Derivative Works a copy of this License; and (b) You must cause any modified files to carry prominent notices stating that You changed the files; and (c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and (d) If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License. 5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions. 6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file. 7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License. 8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages. 9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability. END OF TERMS AND CONDITIONS APPENDIX: How to apply the Apache License to your work. To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "[]" replaced with your own identifying information. (Don't include the brackets!) The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives. Copyright [yyyy] [name of copyright owner] Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */