(例:

) * 用途: 枠線と角丸を持った標準コンテンツボックス */ .card { background: white; padding: 1.5rem; border-radius: 8px; border: 1px solid #e0e0e0; } /** * 認証・ログイン/会員登録用カード * 対象タグ:

(例:

) * 用途: ログイン・新規登録画面の中央寄せ幅狭カード */ .auth-card { max-width: 400px; margin: 3rem auto; background: #ffffff; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); } /** * フォーム項目グループ * 対象タグ:

(例:

) * 用途: ラベルと入力欄をワンセットにする垂直マージン確保ブロック */ .form-group { margin-bottom: 1.2rem; } /** * フォームのラベルテキスト * 対象タグ: (例:

項目名

) * 用途: 入力項目の名前をブロック表示・太字化 */ .form-group label { display: block; margin-bottom: 0.4rem; font-weight: bold; } /** * フォームのテキスト入力フィールド * 対象タグ: (例: , ) * 用途: 幅100%の標準角丸インプットボックス */ .form-group input { width: 100%; padding: 0.6rem; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; } /** * 会員登録の利用規約・プライバシーポリシー同意チェックボックス * 対象タグ:

, * (templates/register.html) * 用途: チェックボックスと同意文言(規約・ポリシーへのリンクを含む)を * 横並びにする、通常のform-group(幅100%のinput)とは異なる配置。 */ .form-group-checkbox { margin-bottom: 1.2rem; } .checkbox-label { display: flex; align-items: flex-start; gap: 0.5rem; font-weight: normal; font-size: 0.9rem; cursor: pointer; } .checkbox-label input[type="checkbox"] { margin-top: 0.2rem; flex-shrink: 0; width: auto; } /** * 状態メッセージボックス * 対象タグ:

(例:

...

) * 用途: ユーザーへの通知や処理結果（情報/成功/エラー）の表示ボックス */ .message { margin-top: 1rem; padding: 0.75rem; border-radius: 4px; font-size: 0.9rem; } /* 情報通知 (グレー) - 対象要素: .message.info */ .message.info { background-color: #e2e3e5; color: #383d41; } /* 成功メッセージ (緑) - 対象要素: .message.success */ .message.success { background-color: #d4edda; color: #155724; } /* エラーメッセージ (赤) - 対象要素: .message.error */ .message.error { background-color: #f8d7da; color: #721c24; } /** * 認証画面フッター案内領域 * 対象タグ:

(例:

) * 用途: 「アカウントをお持ちでない方はこちら」などのリンク注記エリア */ .auth-footer { margin-top: 1.5rem; text-align: center; font-size: 0.9rem; } /* ================================================== 4. 共通データエディタ (Excel<->JSON、表/カード編集) ================================================== */ /** * ツールバー領域 * 対象タグ:

(例:

) * 用途: インポート/エクスポートボタンやファイル選択ボタンを横並びにするエリア */ .data-editor-toolbar { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0; flex-wrap: wrap; } /** * 隠しファイルインプット * 対象タグ: * 用途: カスタムUIボタンから起動するため標準の「ファイルを選択」要素を非表示化 */ .data-editor-toolbar input[type="file"] { display: none; } /** * テーブル用スクロールコンテナ * 対象タグ:

(例:

) * 用途: 幅の広いテーブルが画面からはみ出る場合に横スクロール可能にする */ .data-editor-table-container { overflow-x: auto; } /** * ファイルスロット用の縦スクロール対応 * 対象タグ:

* 用途: ファイル一覧テーブルが10行を超える場合に、最大高さを設定して * 縦スクロールを有効化する。CSS custom propertyで高さを指定。 */ .data-editor-table-container.slot-scroll { max-height: var(--slot-scroll-max-height); overflow-y: auto; } /** * ファイル編集中の場合は、スクロール制限を無効化 * 対象タグ:

* 用途: インラインエディタが表示されている間は、スクロール制限を外して * エディタを完全に表示できるようにする */ .data-editor-table-container.slot-scroll:has(#file-editor-row) { max-height: none; overflow-y: visible; } /** * スクロール有効時のテーブルヘッダー固定 * 対象タグ: (スクロール対応テーブルの見出しセル) * 用途: スクロールしても列見出しが常に画面上端に表示される */ .data-editor-table-container.slot-scroll .file-slot-table thead th { position: sticky; top: 0; z-index: 1; } /** * データ編集用メインテーブル * 対象タグ: (例:

) * 用途: 行・列でデータを管理・編集する標準幅固定テーブル */ .data-editor-table { width: 100%; table-layout: fixed; border-collapse: collapse; background: #ffffff; } /** * テーブルの見出しセル・データセル * 対象タグ:

* 用途: セルのパディング、境界線、テキスト折り返し設定 */ .data-editor-table th, .data-editor-table td { padding: 0.6rem 0.8rem; border-bottom: 1px solid #e0e0e0; text-align: left; overflow-wrap: break-word; } /* テーブル見出しセル背景 - 対象タグ:

*/ .data-editor-table th { background-color: #f1f3f5; } /** * ファイルスロットテーブル (ファイル一覧用) * 対象タグ: * 用途: アプリごとのExcel/JSONファイル管理用テーブル (幅800px以上固定)。 * 偏差値表の生成・併願シミュレーション・SAPIXクラス実績・出願 * スケジュールの4ページで共通。列幅はここだけで決める * (2026-09-26、各ページで幅をそろえるため 40%/15%/45% から変更)。 * width: 100% と table-layout: fixed は .data-editor-table と同じ値 * (file-slot-table 単独で使われても幅が崩れないよう明示している)。 */ .file-slot-table { width: 100%; table-layout: fixed; min-width: 580px; } /* 各列の幅定義 - 対象タグ: (各テンプレートの ) */ .file-slot-table .col-filename { width: 30%; } /* ファイル名列 */ .file-slot-table .col-updated { width: 15%; } /* 更新日時列 */ .file-slot-table .col-actions { width: auto; } /* 操作ボタン群列(残りの幅 = 60%) */ /** * データテーブル内のテキスト入力セル * 対象タグ: (例: ) * 用途: テーブルセル内に隙間なくフィットする入力用テキストボックス */ .data-editor-table input { width: 100%; box-sizing: border-box; padding: 0.3rem 0.4rem; border: 1px solid #ccc; border-radius: 4px; } /** * 【レスポンシブ設定】スマホ画面(幅640px以下)でのテーブル構造切り替え * 対象タグ:

, , , ,

* 用途: 表形式()をカード型の縦並びレイアウトへ変換表示 */ @media (max-width: 640px) { /* 表のヘッダー(thead)を隠す */ .data-editor-table thead { display: none; } /* テーブル構成要素をすべてブロック化 */ .data-editor-table, .data-editor-table tbody, .data-editor-table tr, .data-editor-table td { display: block; width: 100%; } /* 各データ行(tr)を1つのカードとして成形 */ .data-editor-table tr { margin-bottom: 1rem; border: 1px solid #e0e0e0; border-radius: 8px; padding: 0.5rem; } /* セル(td)をFlexボックスで横並び化 */ .data-editor-table td { border: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; } /* HTMLのdata-label属性の値を参照し、疑似要素::beforeで左側にラベルを表示 */ .data-editor-table td::before { content: attr(data-label); font-weight: bold; flex: 0 0 6.5rem; width: 6.5rem; box-sizing: border-box; } /* カード内のフォーム・入力要素の可変設定 */ .data-editor-table td input, .data-editor-table td select, .data-editor-table td button { flex: 1 1 0; width: auto; min-width: 0; } /* チェックボックスのみ固定幅化 */ .data-editor-table td input[type="checkbox"] { flex: 0 0 auto; width: auto; } /** * ファイル行の操作ボタン(「JSON変換」「ダウンロード」「削除」、 * 「表示・編集」「偏差値表の生成」/「併願戦略シミュレーター」「削除」 * 「・・・」等。static/js/file_manager.js の .file-row-actions)は、 * PC表示では横一列のままで良いが、スマホ表示でそのまま横に並べると * 窮屈に詰まってしまうため、縦一列(1ボタン1行、幅いっぱい)に積み替える。 */ .file-slot-table .file-row-actions { flex-direction: column; align-items: stretch; } /* 「操作」ラベル(::beforeで表示)は、横並び用の固定幅(6.5rem)を縦並びでは高さとして解釈されてしまう(flexの主軸が変わるため)ので、ラベル自体の幅・高さを内容に合わせて自動化する */ .file-slot-table .file-row-actions::before { flex: 0 0 auto; width: auto; margin-bottom: 0.3rem; } .file-slot-table .file-row-actions button { flex: 0 0 auto; width: 100%; } /* PC用の最小幅(800px)を外し、カード形式の表を画面幅に収める (2026-09-26。外さないと、スマホでカードが横にはみ出す) */ .file-slot-table { min-width: 0; } } /* ================================================== 5. マイページレイアウト & インラインエディタ ================================================== */ /** * ログインユーザー情報エリア * 対象タグ:

(例:

) * 用途: ヘッダー右側にユーザーメールアドレスやメニューを表示 */ .auth-nav { display: flex; align-items: center; gap: 0.75rem; } /* ユーザーメールアドレス表示テキスト - 対象タグ: ,

*/ .nav-user-email { color: #6c757d; font-size: 0.9rem; } /* ファイルカード内のフォームマージン調整 - 対象クラス: .file-card .form-group */ .file-card .form-group { margin-bottom: 0.8rem; } /* ファイルカード内のセレクトボックス - 対象タグ:

* 用途: ファイル一覧表の行直下に挿入される編集領域用セルの初期化 */ #file-editor-row > td { padding: 0; border: none; } /** * インラインエディタ本体パネル * 対象タグ:

(例:

) * 用途: ファイルのデータを表内で直接編集するための展開枠 */ #file-editor-section { margin: 0.5rem 0; padding: 1rem; background: #f8f9fa; border: 1px dashed #ccc; border-radius: 8px; text-align: left; } /* エディタ上部フィールドコンテナ - 対象要素: .editor-header-fields */ .editor-header-fields { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; } .editor-header-fields .form-group { flex: 1 1 200px; margin-bottom: 0; } /* エディタ表示中のファイル名タイトル - 対象要素: .file-editor-filename */ .file-editor-filename { font-weight: bold; color: #2c3e50; } /* テーブル内の行操作ボタン（追加・削除など） - 対象要素: .data-editor-table .row-actions */ .data-editor-table .row-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; } /* データゼロ時の「行を追加」ボタン - 対象要素: .editor-add-first-row-btn */ .editor-add-first-row-btn { margin-top: 0.75rem; } /* 【レスポンシブ設定】マイページの縦並び化 (640px以下) */ @media (max-width: 640px) { .mypage-layout { flex-direction: column; } .mypage-sidebar { flex: none; width: 100%; position: static; } } /* ================================================== 6. 偏差値表生成画面 ================================================== */ /* サブタイトルテキスト - 対象要素: .deviation-subtitle */ .deviation-subtitle { color: #6c757d; margin-top: -0.5rem; } /* サマリー（概要）表示エリア - 対象要素: .deviation-summary */ .deviation-summary { margin-bottom: 1rem; } .deviation-summary p { margin: 0.3rem 0; } /* 編集注記ヒントテキスト - 対象要素: .deviation-edit-hint */ .deviation-edit-hint { margin-top: 1rem; font-size: 0.9rem; color: #6c757d; } /* ================================================== 7. 汎用モーダルダイアログ (共有投稿フォーム等) ================================================== */ /** * モーダルオーバーレイ背景 * 対象タグ:

(例:

) * 用途: 画面全体を覆い、背景を暗くしてダイアログを強調する半透明マスク */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 2000; } /** * モーダルコンテンツウィンドウ * 対象タグ:

(例: ) * 用途: 説明文やメモを入力するための可変テキストエリア */ .form-group textarea { width: 100%; box-sizing: border-box; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; resize: vertical; } /* 共有ダイアログの注釈 - 対象要素: .share-dialog-note */ .share-dialog-note { font-size: 0.85rem; color: #6c757d; } /* 学校マスターデータの非保証に関する注意書き(利用規約第12条の2)。「学校マスターから選ぶ」モーダル・併願シミュレーション画面・全画面ツリー編集画面で共通して使う、小さめの控えめな注釈スタイル。対象要素: .disclaimer-note */ .disclaimer-note { display: block; font-size: 0.75rem; color: #868e96; margin-top: 6px; } /** * 「学校マスターから選ぶ」モーダルの絞り込みトグルボタン群 * (学校種別・所在地・試験日)。2026-09-18、学校マスターが295校まで * 増えたことへの対応として追加。 * 対象要素: .school-master-filter-group / .filter-group-label / * .filter-toggle-row */ .school-master-filter-group { margin-bottom: 0.75rem; } .filter-group-label { display: block; font-size: 0.85rem; font-weight: bold; margin-bottom: 4px; } .filter-toggle-row { display: flex; flex-wrap: wrap; gap: 0.4rem; } /* 既定(非選択)の見た目。以前は .btn-outline(白背景+青枠+青文字)を使っていたが、選択中(青塗り)との差がわかりにくいという指摘 (2026-09-18)を受け、非選択時ははっきりしたグレー系の塗りに変更した。「押されている/いない」がひと目でわかることを優先している。 */ .filter-toggle-row .btn { padding: 0.25rem 0.7rem; font-size: 0.85rem; font-weight: normal; background-color: #e9ecef; color: #495057; border: 1px solid #ced4da; } /* 選択中(絞り込み対象に含まれている)トグルボタン。表示モード切替ボタン(.apply-view-toggle .btn.active)と同じ配色に揃えている。 */ .filter-toggle-row .btn.active { background-color: #007bff; color: white; border-color: #007bff; font-weight: bold; } /** * 学校リンク集ページ(/mypage/info_school_links)左カラム(共通メニュー)の * 非登録ユーザー向け非表示制御。 * 作成日: 2026-09-18 * * 経緯: 学校リンク集は非登録ユーザーにも公開するが、左カラムの共通メニュー * (menu.html。マイページの各機能・ファイル管理へのリンクを含む)は登録 * ユーザーのみに表示してほしいという要望を受けた対応。ログイン状態は * サーバー側では分からない(このアプリはCookieセッションを持たず、 * localStorageのアクセストークンのみで管理している)ため、まずこのクラスで * 非表示にしておき、static/js/school_links.js側でトークンがあればこの * クラスを外して表示する、という「既定では非表示」の安全側の作りにしている。 * 対象要素: #school-links-sidebar (info_school_links.html) */ .school-links-sidebar-guest { display: none; } /** * 学校リンク集ページ(/mypage/info_school_links)の一覧テーブル。 * 作成日: 2026-09-18(2026-09-19再更新: 募集要項ページ・PDFの2列構成を * 取りやめ、募集要項リンクが1列に戻ったことに合わせて幅を戻した) * 対象要素: .school-links-table / .link-pending */ .school-links-table .col-school-name { width: 24%; } .school-links-table .col-region { width: 12%; } .school-links-table .col-gender { width: 12%; } .school-links-table .col-link { width: 26%; } /* 一覧の行数が多いため、リンクボタンはトグルボタンと同程度のコンパクトな大きさにする(既定の.btnサイズだと295行の一覧では大きすぎるため)。 */ .school-links-table .btn { padding: 0.3rem 0.7rem; font-size: 0.85rem; } /* 公式サイト・募集要項のURLが未収集の学校に表示するプレースホルダー */ .link-pending { color: #adb5bd; font-size: 0.85rem; } /** * 読み取り専用メモ表示ボックス * 対象タグ:

(例:

) * 用途: 入力欄ではなく確認用テキストであることを示す薄グレー背景ボックス */ .memo-readonly-box { background-color: #f1f3f5; border-radius: 4px; padding: 0.6rem 0.8rem; font-size: 0.9rem; white-space: pre-wrap; min-height: 1.2em; color: #495057; } /* 空状態の時のプレースホルダー表示 */ .memo-readonly-box:empty::before { content: "(未入力)"; color: #adb5bd; } /* モーダルフッターの操作ボタン群 (右寄せ) - 対象要素: .modal-actions */ .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.25rem; } /* シミュレーションの保存数が上限のときの、破棄するファイルを選ぶウィンドウ (2026-09-26新設。static/js/simulation_discard_picker.js) */ .discard-picker-list { display: flex; flex-direction: column; gap: 0.4rem; max-height: 50vh; overflow-y: auto; margin: 0.75rem 0; } .discard-picker-item { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.6rem; padding: 0.5rem 0.75rem; border: 1px solid #e0e0e0; border-radius: 6px; cursor: pointer; } .discard-picker-item:hover { background: #f8f9fa; } .discard-picker-name { font-weight: bold; overflow-wrap: anywhere; } .discard-picker-date { color: #6c757d; font-size: 0.85rem; } /* ================================================== 8. 共有ライブラリ画面 ================================================== */ /* ライブラリ説明段落 - 対象要素: .shared-library-page > p */ .shared-library-page > p { color: #495057; max-width: var(--page-content-width); } /* パンくずリストナビゲーション - 対象要素: .shared-library-breadcrumb */ .shared-library-breadcrumb { font-size: 0.85rem; color: #6c757d; } .shared-library-breadcrumb a { color: #007bff; text-decoration: none; } .shared-library-breadcrumb a:hover { text-decoration: underline; } /* セーフティ・ガードライン注記 - 対象要素: .shared-library-guardrail-note */ .shared-library-guardrail-note { font-size: 0.85rem; color: #6c757d; max-width: var(--page-content-width); } /** * アプリ選択用カードリンク * 対象タグ: (例: ) * 用途: カード全体をクリック可能にしたリンク要素 */ .shared-library-app-card { text-decoration: none; color: inherit; display: block; transition: box-shadow 0.15s ease; } .shared-library-app-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .shared-library-app-card h3 { margin-top: 0; color: #2c3e50; } .shared-library-app-card p { margin-bottom: 0; color: #6c757d; } /* 共有パターンカード配置用グリッド - 対象要素: .shared-pattern-grid */ .shared-pattern-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; } /** * 共有パターンカード * 対象タグ:

(例:

(例:

) * 用途: リスト表示/ツリー表示などを切り替えるボタン配置 */ .apply-view-toggle { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex: 1 1 100%; } /* 選択中（アクティブ）の表示切替ボタン */ .apply-view-toggle .btn.active { background-color: #007bff; color: white; } /** * ツリー構造エディタコンテナ * 対象タグ:

(例:

) * 用途: ツリー図を表示する外枠コンテナ */ .tree-editor-container { margin-top: 0.5rem; } /** * ツリー表示エリアスクロール枠 * 対象タグ:

(例:

) * 用途: 大きなツリーを表示する際の縦横スクロール可能領域。 * 高さに上限(max-height)を設けているのは、この内側で実際にスクロールが * 発生するようにするため。position:sticky によるタイトル行・タイトル列の * 固定(下記 .tree-editor-panes 系クラス、エクセルの「ウィンドウ枠の固定」 * 相当)は、sticky指定した要素の直近の「スクロールする祖先要素」が * 実際にスクロールしないと効果が出ない(高さの上限が無く、常に中身の * 高さ分だけ広がるだけの要素の場合、スクロール自体が発生しないため)。 */ .tree-editor-scroll { overflow: auto; max-width: 100%; max-height: calc(100vh - 220px); min-height: 320px; border: 1px solid #c0c0c0; border-radius: 4px; background: #fafafa; } /** * ツリーエディタのタイトル行・タイトル列固定レイアウト * 対象タグ:

とその子の4つの

, (SVGノード要素等) * 用途: マウスで掴んで移動可能なツリーの各節点要素 */ .tree-node { cursor: grab; } /* ドラッグ実行中のツリーノード */ .tree-node.dragging { cursor: grabbing; } /* 追加可能マス(プロット操作でクリックできるマス)のホバー時強調 - 対象要素: .tree-slot-highlight:hover */ .tree-slot-highlight:hover { fill-opacity: 0.55; } /** * 候補校選択ダイアログ(黄色いマスのクリックで開く) * 対象タグ:

* 用途: プロット操作(黄色いマスのクリック)時に表示する候補選択モーダル。 * 合否分岐確定ダイアログ(.tree-branch-dialog-*)と統一感を持たせた * オーバーレイ+中央カード形式。 */ .tree-editor-picker-overlay { position: fixed; inset: 0; z-index: 1100; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; padding: 1rem; } /* ダイアログ本体 - 対象要素: .tree-editor-picker */ .tree-editor-picker { background: white; border-radius: 8px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; padding: 1.25rem 1.5rem; box-sizing: border-box; } /* ダイアログ見出し - 対象要素: .tree-editor-picker-title */ .tree-editor-picker-title { margin: 0 0 0.75rem; font-size: 1.1rem; } /* 候補一覧のスクロール枠 - 対象要素: .tree-editor-picker-list */ .tree-editor-picker-list { border: 1px solid #dee2e6; border-radius: 6px; max-height: 50vh; overflow-y: auto; } /* 候補項目ボタン - 対象タグ:

(スクロール対応テーブルの見出しセル) * 用途: スクロールしても列見出しが常に画面上端に表示される */ .data-editor-table-container.slot-scroll .file-slot-table thead th { position: sticky; top: 0; z-index: 1; } /** * SAPIXクラス実績: サマリー(概要)表示エリア * 対象要素: .sapix-summary (.deviation-summaryと同じ考え方) */ .sapix-summary { margin-bottom: 1rem; } .sapix-summary p { margin: 0.3rem 0; } /** * SAPIXクラス実績: テストごとのグラフカード * 対象要素: .sapix-test-card (templates/sapix_generate_course_division/index.html) * 用途: 正規分布グラフ(Canvas)を1テストずつカード表示する際の余白 */ .sapix-test-card { margin-bottom: 1.2rem; } .sapix-test-card h3 { margin-top: 0; } /** * SAPIXクラス実績: 正規分布グラフを描画するCanvas * 対象タグ:

*/ .modal h3 { margin-top: 0; } /** * モーダル内長文テキスト入力欄 * 対象タグ: (例: <div class="form-group"><textarea>