/* ============================================================ みえるDM v3 顧客ダッシュボード 共通CSS version: v1.25（2026-07-03・第102回 OTC入力欄の修正）：6桁コード欄の統一クラスがフォーム共通ルール「.fg input」（13px・詳細度が上）に負けて小さいままだった件を修正。セレクタを .otc-code-input → input.otc-code-input（要素＋クラスで詳細度を同等にし、後勝ちで .fg input に勝つ）に変更。ログイン/回復のコード欄が意図どおり大きく（24px中央寄せ）表示される。ダウンロード画面(.code-input)は元から.fg外で不変。 version: v1.24（2026-07-03・第102回 規約同意の上下2段化）：規約同意本文をタブ切替から上下2段（利用規約＝上／プライバシーポリシー＝下）の同時表示に変更。.legal-box の高さ 360→200px・角丸をタブ用の 0 8 8 8 から全周 8px に・独立スクロール。ラベル用 .legal-doc-label／段の余白 .legal-section を追加。旧 .legal-tabs/.legal-tab は未使用化（rule残置・害なし）。setup.html v1.9／setup.js／common.js v1.21（enforceTermsConsent）と対。同意はまとめて1チェック＋1ボタンのまま・読了ゲートは各枠を最後まで（短文自動）。 version: v1.23（2026-07-03・第102回 OTC入力欄の統一）：6桁認証コードの入力欄をダウンロード画面と同じ見た目（大きな数字・太字・中央寄せ・数字等幅・字間広め）に統一する共通クラス .otc-code-input を末尾に追加（ログイン index.html #otc-code／回復 recover.html #pw-code・#id-code／チャット宛先確認 view.html #nt-verify-code に付与）。あわせて .nt-code-input の幅を 110px→180px に拡大（24px・字間.4emの6桁が収まる幅）。色は var(--c-primary)＝ライト/ダーク両対応。 version: v1.22（2026-07-03・第102回 ステップ6 規約再同意ゲート刷新）：common.js enforceTermsConsent を「最新版本文の画面内表示＋スクロール読了＋ログアウト＋不透明背景」に刷新したのに合わせ terms-gate 系クラスを追加・更新（.terms-gate-overlay 不透明背景／.terms-gate-card をダーク対応・幅拡大／.terms-gate-sub 会社名／.terms-gate-hint 読了ヒント／.terms-gate-reload／.terms-gate-actions＋.terms-gate-logout／:disabled）。本文枠は既存 .legal-tabs/.legal-box/.legal-doc を再利用。末尾に追記。 version: v1.21（2026-07-03・第102回 ステップ2 イベント0件案内）：イベント選択画面の「イベント0件」案内ボックス用クラス（.sel-empty-box / .sel-empty-title / .sel-empty-text / .sel-empty-note / .sel-empty-mail）を末尾に追加（select.js v1.2 renderEventList が生成・既存トークンに追従＝ライト/ダーク両対応）。既存の見た目・トークンは不変。 version: v1.20（2026-06-26・第98回 段階6 旧モーダルCSS撤去）：使い方ガイドの別タブ化（common.js v1.16）で未使用になった旧モーダルCSS（.guide-overlay / .guide-modal / .guide-head / .guide-title / .guide-close / .guide-body / body.guide-open）を撤去。.guide-status は別タブの使い方ページ（guide.html）の「読み込み中…」表示で使うため残置。.guide-content / .guide-doc 系（本文）は不変。 version: v1.19（2026-06-26・第96回 段階3 ガイドHTML表示）：使い方ガイドのHTML本文CSS（.guide-content / .guide-doc とブロック各種＝guide-header / guide-h1 / guide-toc / guide-chapter / guide-sub / guide-p / guide-bullets / guide-steps / guide-about / guide-note(-blue/-orange) / guide-contact / guide-figure / guide-hint・色クラス guide-c-*）を末尾に追加。v2デザインの固定テンプレ＝ガイド固有パレット(#1A9AD5系)の白い「紙」として表示（ダッシュのライト/ダーク不問）。common.js v1.15（PDF.js→HTML）と対。 version: v1.18（2026-06-24・第92回 スピナー改訂3＝箱を少し大きく）：読み込み箱(.lo-box)の最小サイズを 180×132→220×160、内側余白を 24/32→28/36 に拡大（松谷さん「枠がもう少し大きい方が良い」）。色・枠・影・入場演出は不変。admin style.css v1.22 と共通。 version: v1.17（2026-06-24・第92回 スピナー改訂2＝箱は白＋枠で明瞭化）：v1.16 の囲い(.lo-box)がグレー(--c-loader-box)で白背景に対し枠がぼんやりしたため、箱を白(var(--c-card))＋枠 border:1px solid var(--c-border)＋少し締まった影に変更。--c-loader-box トークンは廃止。覆い(--c-loader-bg=白/暗)・入場(lo-enter)・最小サイズ(min180×132)は不変。admin style.css v1.21 と共通の見た目。 version: v1.16（2026-06-24・第92回 スピナー改訂＝背景白＋色付きの囲い）：v1.15 が覆い全体をグレーにして全画面グレーになっていたのを是正。覆い色 --c-loader-bg は白(255,255,255,.85)/暗(11,19,38,.85)に戻し、入場演出（lo-enter＝上から降りて大きく）は中の囲い（.lo-box）だけに適用。囲いの色トークン --c-loader-box を新設（明=#EDEEF0/暗=#2A2D34）＝.lo-box をほんの少しグレーのカード（角丸＋影＋余白）として復活。白背景の中に色付きの囲いが上からすぅっと降りて徐々に大きくなる。囲いの最小サイズ（min-width180/min-height132・中身は中央寄せ）も設定し小さすぎを防止。.lo-spinner（Material 円形）不変・.ev-spinner 対象外。admin style.css v1.20 と共通の見た目。 version: v1.15（2026-06-24・第92回 スピナーの覆い・入場演出）：読み込み中の覆い色トークン --c-loader-bg を 白(255,255,255,.85)→グレー(237,238,240,.94)・ダークは 紺(11,19,38,.85)→濃いグレー(24,26,30,.94) に。入場を「覆いごと上からすぅっと降りて徐々に大きく＋フェードイン」（keyframes lo-enter・transform-origin top center・.55s）へ。白いカード枠（.lo-box の背景・影・角丸・lo-box-in 拡大）は撤去しスピナーを直接覆いに乗せる（モック準拠）。.lo-spinner（Material 円形）は不変。.ev-spinner（小さなクルクル）は対象外。admin style.css v1.19 と共通の見た目。 version: v1.14（2026-06-24・第91回 仕上げ）：使い方ガイドの覆い（.guide-modal）の最大幅を 960→1200px に拡大（表示を広く）。描画のくっきり化（スーパーサンプリング）は common.js v1.14 と対。配色トークンは不変。 version: v1.13（2026-06-24・第91回 操作ガイドのログイン限定化 ステップ3）：使い方ガイドの覆い（モーダル）一式を追加（.guide-overlay / .guide-modal / .guide-head / .guide-title / .guide-close / .guide-body / .guide-status / .guide-pages / .guide-page・body.guide-open）。配色は既存トークン（--c-card / --c-border / --c-text / --c-bg）に追従＝ライト/ダーク両対応。あわせて、select 画面の「使い方」を <a>→<button> 化したため .sel-help-link に background:none / font-family:inherit を補完（見た目は不変）。配色トークンは不変。 version: v1.12（2026-06-19・第84回）：一覧画面（view）の日付絞り込みを標準表示へ戻す。第83回で追加した #date-filter 専用ルール一式（::-webkit-datetime-edit 非表示・width:auto/min-width:0・::-webkit-calendar-picker-indicator 等）を撤去し、ネイティブ type=date（年/月/日＋カレンダーアイコンが標準表示・高さも他の .filter-input と揃う）に戻す。郵便番号列（.postal-col）の幅調整はそのまま残す（v1.11・第83回）。配色・トークンは不変。 version: v1.11（2026-06-19・第83回）：一覧画面（view）の見た目調整2点を追加。①日付絞り込み（#date-filter）を「カレンダーのアイコンのみ」表示に＝::-webkit-datetime-edit を非表示・幅をアイコン分に縮小・::-webkit-calendar-picker-indicator は残しクリックで開く（→第84回で撤回）。②郵便番号列（.postal-col）の幅を約2/3（100px）に固定＝既定の td:not(.no-col):not(.fix-col){max-width:300px} に勝つよう td 側は同じ二重 :not で特異度をそろえる・はみ出しは省略表示。配色・トークンは不変。 version: v1.10（2026-06-18・第81回）：Material アイコン用クラス .ic（width/height 1.1em・fill:currentColor・縦位置調整）と置換前の目印 .ic-ph を追加。絵文字→Material アイコン化に対応（共通JS common.js v1.8 の iconSvg/hydrateIcons が生成）。 version: v1.9（2026-06-18・第81回）：読み込み中スピナーを Material 風 円形プログレス（SVG・回転＋弧の伸び縮み）に変更。枠（.lo-box）は少し拡大しながら、背景（.loading-overlay）はふわっとフェードインで出現。.lo-spinner は
から へ（view.html v1.16）。keyframes lo-spin-rot/lo-spin-dash/lo-box-in/lo-overlay-in を追加。.ev-spinner 用の spin は据え置き。admin と共通の見た目（admin style.css v1.18）。 version: v1.8（2026-06-17・第77回・M7 フェーズB）：共通js の規約同意オーバーレイ（enforceTermsConsent の innerHTML）用クラス（terms-gate系）を追加。 version: v1.7（2026-06-17・第77回・M7 フェーズB・緊急修正）：版コメント内に書いたクラス名のグロブ表記（ハイフン+アスタリスク+スラッシュ）がCSSコメントを途中で閉じ（その並びが終了記号と同じ）、:root の変数定義が解析されず全配色が壊れていた不具合を修正。コメント文では当該並びを使わない（系・空白区切りで表記）。見た目は本修正で正常化。 version: v1.6（2026-06-17・第77回・M7 フェーズB）：view 画面の inline style= 移送クラス一式（summary系・bar系・badge系・modal系・nt系・pager系・an系〔分析〕・pref系・swatch-hi系・ad-0〜9 等）と汎用 .mb-0 / .flex-1 / .fs-8pt 等を追加。 version: v1.5（2026-06-17・第77回・M7 フェーズB）：setup 画面の head style ブロックを逐語移送（setup系・legal系）＋ inline style= 移送クラス（note-14-secondary ほか setup系一式）＋ .mb-4 を追加。 version: v1.4（2026-06-17・第77回・M7 フェーズB）：recover 画面の inline style= 移送クラス（.note-xs-center / .link-muted / .recover-done-title / .btn-link）と margin utility（.mt-2/.mt-14/.mt-16/.mb-14）を追加。 version: v1.3（2026-06-17・第77回・M7 フェーズB）：index 画面の inline style= 移送クラスと、初期非表示用 .is-hidden（display:none !important）を追加。show()/hide() は common.js v1.6 で .is-hidden ベースへ。 version: v1.2（2026-06-17・第77回・M7 フェーズB）：CSP から style-src の 'unsafe-inline' を外すため、各画面の inline style= を逐語移送したクラス群を末尾「M7 フェーズB」セクションに追加（値は1px・1色も変えず移送）。 version: v1.1（2026-06-14・第66回 C-20）：撤去済み覗き見防止の解除ダイアログ用 .guard-* スタイルを削除（生成元 common.js の initDashGuard 撤去で未使用化・見た目は不変）。 version: v1.0（2026-05-21・第17回・移植 フェーズ1） 方針: - v2 顧客ダッシュボード（_Dash用_v7_style.css）から見た目をそのまま移植。 「v2 の見た目・体験を一切変えない」（移植計画 §0）が最優先のため、 メインカラー等も v2 の値（--c-primary:#2665fd）を維持する。 - v3 ブランド水色（#1A9AD5）への色味調整・デザインシステム （mieru-dm-design-system.md §3-9）との統合は「細かい調整＝完成後」に実施する。 現時点での色差は意図的な据え置き（憲法 §3-11 で確認済みの方針）。 移植元の履歴（参考・v2 時点）: v7: STGバナーの色味調整 / v6: STGバナー追加 / v5: ヘッダーロゴをAdmin方式に統一 v4: Primary色を #2665fd に統一 / v3: ダークモード用チャートアクセント色追加 ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap'); /* ============================================================ ライトモード（デフォルト） ============================================================ */ :root { /* Primary */ --c-primary: #2665fd; --c-primary-light: #e8f0ff; --c-primary-hover: #1a56e0; --c-primary-border: #b5d4f4; --c-primary-ring: rgba(38,101,253,.1); --c-chart-accent: #2665fd; /* Surface */ --c-bg: #f8fafc; --c-card: #ffffff; --c-card-hover: #f8fafc; --c-surface-alt: #f8fafc; /* Border */ --c-border: #e2e8f0; --c-border-light: #f1f5f9; /* Text */ --c-text: #0f172a; --c-text-secondary: #475569; --c-text-muted: #94a3b8; /* Status */ --c-success: #10b981; --c-success-bg: #ecfdf5; --c-error: #ef4444; --c-error-bg: #fef2f2; --c-warning: #f59e0b; --c-warning-bg: #fffbeb; /* Header */ --c-header-start: #2665fd; --c-header-end: #4580ff; /* Scan highlights（不透明＝固定列で色重なり・縦線が出ないよう、半透明を白地#ffffffに重ねた相当色に変換） */ --c-hi-1: #f2f6ff; --c-hi-1-hover: #e9f0ff; --c-hi-2: #e5edff; --c-hi-2-hover: #d8e3ff; --c-hi-3: #d4e0ff; --c-hi-3-hover: #c2d4fe; /* Shadows（ライトモードのみ） */ --shadow-sm: 0 1px 2px rgba(0,0,0,.05); --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04); --shadow-md: 0 4px 6px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04); /* Card accent line（ライトモード：上部3pxライン） */ --card-accent: var(--c-border-light); --card-accent-size: 3px; /* Font */ --font-family: 'DM Sans', 'Noto Sans JP', sans-serif; --font-base: 13px; --font-sm: 12px; --font-xs: 11px; /* Radius */ --radius: 8px; --radius-sm: 6px; --radius-lg: 10px; /* Input */ --c-input-bg: #ffffff; --c-input-border: #d1d5db; /* Modal */ --c-modal-overlay: rgba(0,0,0,.4); /* Loader */ --c-loader-bg: rgba(255,255,255,.85); /* 覆いは白（全画面グレーをやめ元に戻す） */ /* Badge highlight（🔔有償機能・不透明化＝白地相当色） */ --c-badge-bg: #fef0f0; --c-badge-hover: #fde9e9; --c-history-bg: #eef3ff; --c-history-hover: #e5edff; } /* ============================================================ ダークモード ============================================================ */ [data-theme="dark"] { /* Primary */ --c-primary: #2665fd; --c-primary-light: rgba(38,101,253,.12); --c-primary-hover: #4580ff; --c-primary-border: #1e3a6e; --c-primary-ring: rgba(38,101,253,.2); --c-chart-accent: #2665fd; /* Surface */ --c-bg: #0b1326; --c-card: #141e38; --c-card-hover: #1a2744; --c-surface-alt: #0f1830; /* Border */ --c-border: #1e2d4d; --c-border-light: #1a2540; /* Text */ --c-text: #dae2fd; --c-text-secondary: #8494b5; --c-text-muted: #5a6a8a; /* Status */ --c-success: #4ade80; --c-success-bg: rgba(74,222,128,.1); --c-error: #ffb4ab; --c-error-bg: rgba(255,180,171,.1); --c-warning: #fbbf24; --c-warning-bg: rgba(251,191,36,.1); /* Header */ --c-header-start: #111d3a; --c-header-end: #162040; /* Scan highlights（不透明＝カード地#141e38に重ねた相当色） */ --c-hi-1: #162750; --c-hi-1-hover: #172b5b; --c-hi-2: #182e63; --c-hi-2-hover: #19326f; --c-hi-3: #1a377d; --c-hi-3-hover: #1c3c8b; /* Shadows（ダークモード：影なし） */ --shadow-sm: none; --shadow: none; --shadow-md: none; /* Card accent line（ダークモード：なし） */ --card-accent: transparent; --card-accent-size: 0; /* Font */ --font-family: 'Inter', 'Noto Sans JP', sans-serif; /* Input */ --c-input-bg: #0f1830; --c-input-border: #1e2d4d; /* Modal */ --c-modal-overlay: rgba(0,0,0,.6); /* Loader */ --c-loader-bg: rgba(11,19,38,.85); /* 覆いは元の暗い色に戻す */ /* Badge highlight（🔔有償機能・不透明化＝カード地相当色） */ --c-badge-bg: #2c2d44; --c-badge-hover: #373549; --c-history-bg: #162750; --c-history-hover: #172b5b; } /* ============================================================ リセット & ベース ============================================================ */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-family); font-size: var(--font-base); background: var(--c-bg); color: var(--c-text); transition: background-color 0.3s, color 0.3s; } .container { max-width: 1400px; margin: 0 auto; padding: 16px; } /* ============================================================ ヘッダー ============================================================ */ /* 環境バナー（DEV/STG のときだけ・本番では出ない・common.js が自動挿入） */ .env-banner { position: fixed; top: 0; left: 0; right: 0; height: 32px; background: #FEE2E2; color: #7F1D1D; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; display: flex; align-items: center; justify-content: center; z-index: 10001; border-bottom: 2px solid #EF4444; user-select: none; pointer-events: none; } body.env-mode { padding-top: 32px; } .header { background: linear-gradient(135deg, var(--c-header-start) 0%, var(--c-header-end) 100%); color: #fff; padding: 10px 20px; margin-bottom: 16px; border-radius: var(--radius); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; box-shadow: var(--shadow); } .header-left { display: flex; align-items: center; gap: 10px; } .header-left img { height: 28px; border-radius: 4px; } .header-right { display: flex; align-items: center; gap: 8px; position: relative; } .header-btn { background: rgba(255,255,255,.15); color: #fff; border: none; padding: 5px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--font-sm); font-family: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: background .15s; } .header-btn:hover { background: rgba(255,255,255,.25); } /* --- テーマ切替（ピル型トグル） --- */ .theme-toggle { display: inline-flex; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,.3); } .theme-opt { padding: 4px 12px; font-size: var(--font-xs); cursor: pointer; transition: all .15s; color: #fff; user-select: none; } .theme-opt.active { background: rgba(255,255,255,.25); font-weight: 700; } .theme-opt:not(.active) { opacity: .7; } .theme-opt:not(.active):hover { opacity: 1; } /* ============================================================ ログイン画面 ============================================================ */ .login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--c-bg); } .login-card { width: 380px; background: var(--c-card); border-radius: var(--radius-lg); box-shadow: var(--shadow); border: 1px solid var(--c-border); overflow: hidden; } .login-header { padding: 32px 32px 0; text-align: center; } .login-header img { height: 52px; margin-bottom: 8px; border-radius: var(--radius-sm); } .login-header p { font-size: var(--font-base); color: var(--c-text-muted); margin-top: 4px; } .login-body { padding: 20px 32px 32px; } .login-footer { font-size: var(--font-xs); color: var(--c-text-muted); text-align: center; margin-top: 8px; } /* ============================================================ フォーム ============================================================ */ .fg { margin-bottom: 10px; } .fg label { display: block; font-size: var(--font-sm); font-weight: 500; margin-bottom: 3px; color: var(--c-text-secondary); } .fg input, .fg select, .fg textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--c-input-border); border-radius: var(--radius-sm); font-size: var(--font-base); font-family: inherit; background: var(--c-input-bg); color: var(--c-text); transition: border-color .15s, box-shadow .15s; } .fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--c-primary); outline: none; box-shadow: 0 0 0 3px var(--c-primary-ring); } /* ============================================================ ボタン ============================================================ */ .btn { font-family: inherit; font-size: var(--font-base); font-weight: 500; border: 1px solid var(--c-border); padding: 8px 16px; border-radius: var(--radius); cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; gap: 5px; background: var(--c-card); color: var(--c-text-secondary); box-shadow: var(--shadow-sm); } .btn:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-primary); } .btn-primary { background: var(--c-primary); color: #fff; border-color: var(--c-primary); box-shadow: var(--shadow-sm); } .btn-primary:hover:not(:disabled) { background: var(--c-primary-hover); color: #fff; } .btn-ghost { background: transparent; color: var(--c-text-secondary); border: 1px solid var(--c-border); box-shadow: var(--shadow-sm); } .btn-ghost:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-primary-light); } .btn-sm { padding: 5px 10px; font-size: var(--font-sm); } .btn-block { width: 100%; justify-content: center; } .btn:disabled { opacity: .5; cursor: not-allowed; } /* ============================================================ メッセージ ============================================================ */ .error { color: var(--c-error); font-size: var(--font-sm); margin-top: 4px; } .success { color: var(--c-success); font-size: var(--font-sm); margin-top: 4px; } /* ============================================================ カード（ライトモード：上部3pxカラーライン付き） ============================================================ */ .card { background: var(--c-card); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow); border: 1px solid var(--c-border); border-top: var(--card-accent-size) solid var(--card-accent); transition: border-color .15s, box-shadow .15s, transform .15s; } .card:hover { box-shadow: var(--shadow-md); } [data-theme="dark"] .card:hover { border-color: var(--c-primary); } .card h3 { font-size: var(--font-base); font-weight: 700; color: var(--c-primary); margin-bottom: 8px; } /* カードアクセント種別（ライトモードのみ有効） */ .card-accent-primary { border-top-color: var(--c-primary); } .card-accent-success { border-top-color: var(--c-success); } .card-accent-warning { border-top-color: var(--c-warning); } /* ============================================================ イベントバナー（ライトモード：左4pxボーダー） ============================================================ */ .ev-banner { background: var(--c-card); border: 1px solid var(--c-border); border-left: 4px solid var(--c-primary); border-radius: 0; padding: 10px 16px; margin-bottom: 14px; box-shadow: var(--shadow); } [data-theme="dark"] .ev-banner { border-left-width: 1px; border-radius: var(--radius); } .ev-banner .ev-bn { font-size: 15px; font-weight: 700; color: var(--c-primary); margin: 0; } .ev-banner .ev-bsub { font-size: var(--font-sm); color: var(--c-text-secondary); margin: 3px 0 0; } /* ============================================================ セッション警告バー ============================================================ */ .session-bar { background: var(--c-warning-bg); color: var(--c-warning); padding: 8px 16px; border-radius: var(--radius-sm); margin-bottom: 10px; font-size: var(--font-sm); display: none; text-align: center; border: 1px solid var(--c-warning); } /* ============================================================ プレビューバナー ============================================================ */ .preview-banner { display: none; background: var(--c-warning); color: #fff; text-align: center; padding: 6px 16px; border-radius: var(--radius-sm); margin-bottom: 8px; font-size: var(--font-base); font-weight: 700; } /* ============================================================ サマリーカード ============================================================ */ .summary-row { display: flex; gap: 10px; flex-wrap: wrap; } .stat-card { flex: 1; min-width: 100px; background: var(--c-card); border-radius: var(--radius-lg); padding: 12px; text-align: center; border: 1px solid var(--c-border); box-shadow: var(--shadow); border-top: var(--card-accent-size) solid var(--c-primary); transition: transform .15s, box-shadow .15s; } .stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } [data-theme="dark"] .stat-card:hover { box-shadow: none; transform: none; border-color: var(--c-primary); } .stat-card .num { font-size: 24px; font-weight: 700; color: var(--c-primary); letter-spacing: -0.5px; } .stat-card .label { font-size: var(--font-xs); font-weight: 700; color: var(--c-text-muted); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; } /* ============================================================ タブ（下線スタイル） ============================================================ */ .tab-bar { display: flex; gap: 0; margin-bottom: 14px; border-bottom: 2px solid var(--c-border); } .tab-btn { padding: 8px 18px; font-size: var(--font-base); font-weight: 500; color: var(--c-text-muted); cursor: pointer; font-family: inherit; background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; display: inline-flex; align-items: center; gap: 5px; transition: all .15s; } .tab-btn.active { color: var(--c-primary); border-bottom-color: var(--c-primary); } .tab-btn:hover:not(.active) { color: var(--c-text-secondary); } .tab-content { display: none; } .tab-content.active { display: block; } /* ============================================================ コントロール ============================================================ */ .controls { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; align-items: center; } .search-box { padding: 6px 10px; border: 1px solid var(--c-input-border); border-radius: var(--radius-sm); font-size: var(--font-base); width: 200px; font-family: inherit; background: var(--c-input-bg); color: var(--c-text); transition: border-color .15s, box-shadow .15s; } .search-box:focus { border-color: var(--c-primary); outline: none; box-shadow: 0 0 0 3px var(--c-primary-ring); } /* ============================================================ テーブル ============================================================ */ .tbl-wrap { overflow-x: auto; overflow-y: auto; max-height: 500px; border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow); } table { width: 100%; border-collapse: collapse; font-size: var(--font-sm); table-layout: auto; background: var(--c-card); } th { padding: 7px 8px; text-align: left; background: var(--c-surface-alt); color: var(--c-text-secondary); font-weight: 500; font-size: var(--font-sm); border-bottom: 2px solid var(--c-border); cursor: pointer; white-space: nowrap; user-select: none; position: sticky; top: 0; z-index: 4; } th:hover { background: var(--c-card-hover); } th .sort-icon { color: var(--c-text-muted); font-size: 9px; margin-left: 2px; } th .sort-icon.active { color: var(--c-primary); } td { padding: 6px 8px; border-bottom: 1px solid var(--c-border-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--c-text); } /* その他列の上限幅 300px */ td:not(.no-col):not(.fix-col) { max-width: 300px; } tr:hover td { background: var(--c-card-hover); } tr:hover td.fix-col, tr:hover td.no-col { background: var(--c-card-hover); } /* --- スキャン回数ハイライト --- */ tr.hi-1 { background: var(--c-hi-1); } tr.hi-2 { background: var(--c-hi-2); } tr.hi-3 { background: var(--c-hi-3); } tr.hi-1 td, tr.hi-1 td.no-col, tr.hi-1 td.fix-col { background: var(--c-hi-1); } tr.hi-2 td, tr.hi-2 td.no-col, tr.hi-2 td.fix-col { background: var(--c-hi-2); } tr.hi-3 td, tr.hi-3 td.no-col, tr.hi-3 td.fix-col { background: var(--c-hi-3); } tr.hi-1:hover td, tr.hi-1:hover td.no-col, tr.hi-1:hover td.fix-col { background: var(--c-hi-1-hover) !important; } tr.hi-2:hover td, tr.hi-2:hover td.no-col, tr.hi-2:hover td.fix-col { background: var(--c-hi-2-hover) !important; } tr.hi-3:hover td, tr.hi-3:hover td.no-col, tr.hi-3:hover td.fix-col { background: var(--c-hi-3-hover) !important; } /* --- 🔔有償機能: バッジ/履歴ハイライト --- */ tr.hi-badge { background: var(--c-badge-bg); } tr.hi-badge td, tr.hi-badge td.no-col, tr.hi-badge td.fix-col { background: var(--c-badge-bg) !important; } tr.hi-badge:hover td, tr.hi-badge:hover td.no-col, tr.hi-badge:hover td.fix-col { background: var(--c-badge-hover) !important; } tr.hi-history { background: var(--c-history-bg); } tr.hi-history td, tr.hi-history td.no-col, tr.hi-history td.fix-col { background: var(--c-history-bg) !important; } tr.hi-history:hover td, tr.hi-history:hover td.no-col, tr.hi-history:hover td.fix-col { background: var(--c-history-hover) !important; } /* --- 固定列 --- */ .no-col { background: var(--c-surface-alt); color: var(--c-text-muted); font-size: var(--font-sm); text-align: center; min-width: 36px; max-width: 40px; font-weight: 500; border-right: 1px solid var(--c-border-light); position: sticky; left: 0; z-index: 5; } th.no-col { cursor: default; border-right: 1px solid var(--c-border-light); z-index: 6; background: var(--c-surface-alt); } th.no-col:hover { background: var(--c-surface-alt); } .fix-col { position: sticky; z-index: 5; background: var(--c-card); } th.fix-col { z-index: 6; background: var(--c-surface-alt); } /* --- 列フィルター --- */ .filter-input { width: 100%; padding: 3px 5px; border: 1px solid var(--c-input-border); border-radius: 3px; font-size: var(--font-sm); margin-top: 3px; font-family: inherit; background: var(--c-input-bg); color: var(--c-text); } .filter-input:focus { border-color: var(--c-primary); outline: none; } /* 日付入力のカレンダーアイコン：ダークモードでは黒くて見えないため白く反転 */ [data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); } /* ★第84回★ 日付絞り込み（#date-filter）は標準の type=date 表示に戻す。 第83回で年/月/日を隠してアイコンだけにした #date-filter 専用ルール一式を撤去し、 他の絞り込み欄（.filter-input）と同じ見た目（年/月/日＋カレンダーアイコン・高さ揃い）に統一。 */ /* ★第83回★ 郵便番号列（postal-col）の列幅を約2/3に。 既定の「その他列 td:not(.no-col):not(.fix-col){max-width:300px}」（特異度が高い）に勝つよう、 td 側は同じ :not 二重否定で特異度をそろえて上書きする。はみ出しは省略表示（…）。 */ th.postal-col { width: 100px; max-width: 100px; min-width: 80px; } td.postal-col:not(.no-col):not(.fix-col) { width: 100px; max-width: 100px; min-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============================================================ ページネーション ============================================================ */ .pagi { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: var(--font-sm); color: var(--c-text-secondary); flex-wrap: wrap; gap: 8px; } .pagi-btns { display: flex; gap: 3px; } .pagi-btn { padding: 4px 10px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-card); color: var(--c-text-secondary); font-size: var(--font-sm); cursor: pointer; font-family: inherit; transition: all .15s; } .pagi-btn.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); } .pagi-btn:hover:not(.active) { border-color: var(--c-primary); color: var(--c-primary); } /* ============================================================ 列設定パネル ============================================================ */ .col-panel { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 10px; margin-bottom: 10px; font-size: var(--font-sm); box-shadow: var(--shadow-sm); } .col-panel summary { cursor: pointer; font-weight: 500; color: var(--c-primary); } .col-panel .note { color: var(--c-text-muted); font-size: var(--font-xs); margin-top: 4px; } .col-panel .col-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .col-chip { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: var(--radius-sm); font-size: var(--font-sm); border: 1px solid var(--c-border); background: var(--c-card); cursor: pointer; user-select: none; color: var(--c-text); transition: border-color .15s; } .col-chip:hover { border-color: var(--c-primary); } .col-chip.hidden { opacity: .4; text-decoration: line-through; } .col-chip .arrows { display: inline-flex; gap: 1px; margin-left: 3px; } .col-chip .arrows span { cursor: pointer; color: var(--c-text-secondary); font-size: var(--font-base); line-height: 1; } .col-chip .arrows span:hover { color: var(--c-primary); } /* ============================================================ チャート ============================================================ */ .chart-row { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .chart-half { flex: 1; min-width: 260px; } .chart-full { width: 100%; } .chart-wrap { position: relative; height: 260px; margin: 8px 0; } .chart-wrap-sm { position: relative; height: 240px; margin: 8px 0; } .chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .chart-scroll-inner { min-width: 600px; position: relative; height: 260px; } .chart-center { max-width: 600px; margin: 0 auto; } /* ============================================================ イベント選択画面 ============================================================ */ .sel-wrap { max-width: 500px; margin: 0 auto; padding: 20px 0; } .sel-title { font-size: 18px; font-weight: 700; color: var(--c-text); margin: 0 0 4px; } .sel-sub { font-size: var(--font-base); color: var(--c-text-muted); margin: 0 0 20px; } .ev-item { border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 10px; background: var(--c-card); cursor: pointer; display: flex; align-items: center; gap: 12px; transition: all .15s; box-shadow: var(--shadow-sm); } .ev-item:hover { border-color: var(--c-primary); box-shadow: var(--shadow-md); transform: translateY(-1px); } [data-theme="dark"] .ev-item:hover { box-shadow: none; transform: none; } .ev-item.disabled { opacity: .6; cursor: default; } .ev-item.disabled:hover { background: var(--c-card); border-color: var(--c-border); box-shadow: var(--shadow-sm); transform: none; } .ev-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .dot-active { background: var(--c-primary); } .dot-sched { background: #378ADD; } .dot-closed { background: var(--c-text-muted); } .ev-body { flex: 1; } .ev-pj { font-size: 15px; font-weight: 600; color: var(--c-primary); } .ev-meta { font-size: var(--font-sm); color: var(--c-text-secondary); margin-top: 2px; } .ev-msg { font-size: var(--font-sm); color: var(--c-text-muted); margin-top: 2px; font-style: italic; } .ev-arrow { font-size: 18px; color: var(--c-text-muted); } /* ============================================================ モーダル ============================================================ */ .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--c-modal-overlay); z-index: 200; align-items: center; justify-content: center; } .modal-overlay.show { display: flex; } .modal-card { width: 460px; max-height: 85vh; overflow-y: auto; background: var(--c-card); border-radius: var(--radius-lg); padding: 24px; box-shadow: 0 8px 30px rgba(0,0,0,.15); border: 1px solid var(--c-border); } .modal-card h3 { font-size: 15px; font-weight: 500; margin: 0; color: var(--c-text); } .modal-section { background: var(--c-surface-alt); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 14px; margin-bottom: 14px; } .modal-section h3 { font-size: var(--font-base); font-weight: 700; color: var(--c-primary); margin: 0 0 10px; } .modal-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .modal-row label { font-size: var(--font-sm); font-weight: 500; min-width: 100px; color: var(--c-text-secondary); } .modal-row select { padding: 4px 8px; font-size: var(--font-sm); border: 1px solid var(--c-input-border); border-radius: 4px; font-family: inherit; background: var(--c-input-bg); color: var(--c-text); } /* ============================================================ ローディング ============================================================ */ .loading-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--c-loader-bg); z-index: 9999; align-items: center; justify-content: center; animation: lo-overlay-in .25s ease-out; /* 白い覆いはふわっとフェードイン */ } /* admin と共通の見た目（白背景の中に色付きの囲い＝カード） */ .lo-box { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius-lg, 8px); /* ★第92回 改訂2★ 箱は白＋はっきりした枠（境界線）で「ぼんやり」を解消 */ padding: 28px 36px; box-shadow: 0 6px 18px rgba(24, 95, 165, .18); /* 少し締まった影 */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 220px; min-height: 160px; /* ★第92回 改訂3★ 箱をもう少し大きく（最小サイズを拡大） */ transform-origin: top center; /* ★第92回★ 囲いが上から大きくなりながら出る基点 */ animation: lo-enter .55s cubic-bezier(.16, .8, .3, 1); /* ★第92回★ 囲いごと上からすぅっと降りて徐々に大きく */ } /* ★第81回★ Material 風 円形プログレス（SVG・回転＋弧の伸び縮み）。マークアップは */ .lo-spinner { width: 40px; height: 40px; animation: lo-spin-rot 1.4s linear infinite; } .lo-spinner circle { stroke: var(--c-primary); animation: lo-spin-dash 1.4s ease-in-out infinite; } @keyframes lo-spin-rot { to { transform: rotate(360deg); } } @keyframes lo-spin-dash { 0% { stroke-dasharray: 2, 113; stroke-dashoffset: 0; } 50% { stroke-dasharray: 80, 113; stroke-dashoffset: -26; } 100% { stroke-dasharray: 80, 113; stroke-dashoffset: -104; } } @keyframes lo-box-in { from { opacity: 0; transform: scale(.88) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes lo-overlay-in { from { opacity: 0; } to { opacity: 1; } } @keyframes lo-enter { /* ★第92回★ 覆いごと上から降りて徐々に大きく＋フェードイン */ from { opacity: 0; transform: translateY(-18px) scale(.88); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes spin { to { transform: rotate(360deg); } } .lo-msg { font-size: 13px; color: var(--c-text); } /* ============================================================ トースト通知 ============================================================ */ .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px); padding: 10px 20px; border-radius: var(--radius-sm); font-size: var(--font-sm); box-shadow: 0 4px 12px rgba(0,0,0,.15); opacity: 0; transition: all .3s; z-index: 9999; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast-info { background: var(--c-primary); color: #fff; } .toast-success { background: var(--c-success); color: #fff; } .toast-error { background: var(--c-error); color: #fff; } /* ============================================================ 凡例 ============================================================ */ .legend { display: flex; align-items: center; gap: 8px; font-size: var(--font-xs); color: var(--c-text-secondary); } .legend-swatch { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--c-border); border-radius: 2px; vertical-align: middle; } /* ============================================================ 🔔有償機能: 確認バー・フィルタバー ============================================================ */ .confirm-bar { display: none; align-items: center; gap: 6px; padding: 5px 10px; background: var(--c-warning-bg); border: 1px solid var(--c-warning); border-radius: var(--radius-sm); font-size: var(--font-sm); white-space: nowrap; color: var(--c-text); } .confirm-bar .btn-confirm { background: var(--c-primary); color: #fff; border: none; border-radius: 4px; padding: 4px 10px; font-size: var(--font-sm); font-weight: 600; cursor: pointer; } .confirm-bar .btn-confirm:hover { background: var(--c-primary-hover); } .filter-bar { display: none; align-items: center; gap: 6px; padding: 5px 10px; background: var(--c-primary-light); border: 1px solid var(--c-primary-border); border-radius: var(--radius-sm); font-size: var(--font-sm); white-space: nowrap; color: var(--c-text); } .confirm-bar .btn-dl, .filter-bar .btn-dl { background: var(--c-success); color: #fff; border: none; border-radius: 4px; padding: 4px 10px; font-size: var(--font-sm); font-weight: 600; cursor: pointer; } .confirm-bar .btn-dl:hover, .filter-bar .btn-dl:hover { opacity: .85; } /* 🔔有償機能: 確認履歴 */ .history-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); margin-bottom: 4px; cursor: pointer; font-size: var(--font-sm); color: var(--c-text-secondary); transition: background .15s; } .history-item:hover { background: var(--c-card-hover); } .history-item.active { border-color: var(--c-primary); background: var(--c-primary-light); } .history-badge { background: var(--c-primary-light); color: var(--c-primary); font-size: var(--font-xs); font-weight: 600; padding: 2px 8px; border-radius: 10px; } .history-empty { text-align: center; padding: 20px; color: var(--c-text-muted); font-size: var(--font-sm); } /* ============================================================ お問い合わせ画面（contact.html共通化） ============================================================ */ .contact-wrap { max-width: 420px; width: 100%; margin: 0 auto; } .contact-logo { font-size: 20px; font-weight: 700; color: var(--c-primary); text-align: center; margin-bottom: 4px; } .contact-sub { font-size: var(--font-base); color: var(--c-text-secondary); text-align: center; margin-bottom: 20px; } .contact-card { background: var(--c-card); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 28px; border: 1px solid var(--c-border); } .contact-card .fg .req { color: var(--c-error); margin-left: 2px; } .contact-card .fg .help { font-size: var(--font-xs); color: var(--c-text-muted); margin-top: 3px; } .contact-btn { width: 100%; padding: 11px; font-size: 14px; font-weight: 600; color: #fff; background: var(--c-primary); border: none; border-radius: var(--radius); cursor: pointer; font-family: inherit; transition: background .15s; } .contact-btn:hover { background: var(--c-primary-hover); } .contact-btn:disabled { background: var(--c-text-muted); cursor: not-allowed; } .contact-err { background: var(--c-error-bg); border: 1px solid var(--c-error); border-radius: var(--radius); padding: 10px 14px; font-size: var(--font-base); color: var(--c-error); margin-bottom: 14px; display: none; } .contact-ok { background: var(--c-success-bg); border: 1px solid var(--c-success); border-radius: var(--radius); padding: 20px; text-align: center; font-size: 14px; color: var(--c-success); display: none; } .contact-ok .icon { font-size: 32px; display: block; margin-bottom: 8px; } .contact-note { font-size: var(--font-xs); color: var(--c-text-muted); text-align: center; margin-top: 16px; line-height: 1.6; } .contact-note a { color: var(--c-primary); } .contact-back { text-align: center; margin-top: 12px; } .contact-back a { font-size: var(--font-sm); color: var(--c-primary); text-decoration: none; } /* ============================================================ 分析カード出現アニメーション ============================================================ */ .anim-in { opacity: 0; transform: translateY(18px); animation: cardFadeIn 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; } @keyframes cardFadeIn { to { opacity: 1; transform: translateY(0); } } /* ============================================================ レスポンシブ ============================================================ */ @media (max-width: 768px) { .container { padding: 10px; } .header { padding: 8px 12px; } .header-right { gap: 6px; } .theme-opt { padding: 3px 8px; font-size: 10px; } .summary-row { gap: 6px; } .stat-card { min-width: 70px; padding: 8px; } .stat-card .num { font-size: 18px; } .controls { gap: 6px; } .search-box { width: 100%; } .login-card { width: 95%; max-width: 380px; } .modal-card { width: 95%; max-width: 460px; padding: 16px; } .sel-wrap { padding: 10px; } } /* ============================================================ 分析タブ チャートアクセント色（v3追加、v4では同じ色に統一） ページ全体のアクセント色。データ一覧タブも分析タブも同じ色。 --c-page-accent 変数は将来の色分け機能のために残す。 ============================================================ */ body { --c-page-accent: var(--c-primary); --c-page-accent-light: var(--c-primary-light); --c-page-accent-border: var(--c-primary-border); } body.analytics-mode { --c-page-accent: var(--c-chart-accent); --c-page-accent-light: var(--c-primary-light); --c-page-accent-border: var(--c-primary-border); } /* ============================================================ v7: STG環境バナー（H案・薄赤＋下線アクセント） STGドメインでのみ common.js が自動挿入 ============================================================ */ .stg-banner { position: fixed; top: 0; left: 0; right: 0; height: 32px; background: #FEE2E2; color: #7F1D1D; font-size: 13px; font-weight: 500; letter-spacing: .04em; display: flex; align-items: center; justify-content: center; z-index: 10001; border-bottom: 2px solid #EF4444; user-select: none; pointer-events: none; } /* STG時は全体を32pxずらす */ body.stg-mode { padding-top: 32px; } /* ダークモード時: 背景を深赤に、文字を明るい色に */ [data-theme="dark"] .stg-banner { background: #7F1D1D; color: #FECACA; border-bottom-color: #F87171; } /* ============================================================ M7 フェーズB: 外部化クラス（inline style= の逐語移送・見た目不変） 各画面の HTML / innerHTML にあった style= 属性を、値を1px・1色も変えず そのままクラス化したもの。CSP の style-src から 'unsafe-inline' を外すため。 ============================================================ */ /* --- 初期非表示（CSP 対象の inline style="display:none" の置換先） --- */ /* show()/hide()（common.js）が classList で付け外しする。inline より確実に隠すため !important。 */ .is-hidden { display: none !important; } /* ★第81回★ Material アイコン（共通JSの iconSvg / hydrateIcons が生成）。大きさは文字に追従・色は currentColor で周囲の文字色に合わせる。 */ .ic { width: 1.1em; height: 1.1em; fill: currentColor; vertical-align: -0.18em; flex-shrink: 0; } .ic-ph { display: inline-block; width: 1.1em; height: 1.1em; } /* --- 汎用ユーティリティ（margin は reset で全方向0のため、片方向指定は元の margin:N 0 0 / 0 0 N と同値） --- */ .text-center { text-align: center; } .mt-6 { margin-top: 6px; } .mt-8 { margin-top: 8px; } .mt-10 { margin-top: 10px; } .mt-20 { margin-top: 20px; } .mb-6 { margin-bottom: 6px; } .mb-8 { margin-bottom: 8px; } .mb-10 { margin-bottom: 10px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } /* --- 文字スタイル（小さい注記類・index/recover/setup 共通） --- */ .note-sm-secondary { font-size: var(--font-sm); color: var(--c-text-secondary); } .note-xs-muted { font-size: 11px; color: var(--c-text-muted); } .note-xs-muted-center { font-size: 11px; color: var(--c-text-muted); text-align: center; } .link-primary { color: var(--c-primary); } .link-primary-bold { color: var(--c-primary); font-weight: 600; } .summary-primary { cursor: pointer; color: var(--c-primary); } /* --- 初期ローディング（index.html / setup.html 共通） --- */ .init-loading-box { display: flex; justify-content: center; align-items: center; min-height: 100vh; } .init-loading-text { color: var(--c-text-muted); font-size: 14px; } /* --- ログイン画面（index.html） --- */ .login-help-box { margin-top: 8px; padding: 10px; background: var(--c-surface-alt); border-radius: var(--radius-sm); border: 1px solid var(--c-border); } .login-theme-row { text-align: center; padding: 0 32px 16px; } /* --- ログイン情報の再設定（recover.html） --- */ .mt-2 { margin-top: 2px; } .mt-14 { margin-top: 14px; } .mt-16 { margin-top: 16px; } .mb-14 { margin-bottom: 14px; } .note-xs-center { font-size: 11px; text-align: center; } .link-muted { color: var(--c-text-muted); } .recover-done-title { font-size: 15px; font-weight: 700; color: var(--c-primary); } .btn-link { text-decoration: none; text-align: center; } /* --- 初期設定（setup.html）：旧 head