/* ============================================================ theme-minimal.css （2026-07-12）「洗練ミニマル」テーマ。style.css の後に読み込んで上書きする。既存のHTML構造・クラス名には手を入れないため、各ページのとを外せば完全に元へ戻る。クラスは2種類： .theme-minimal … 全部（外枠＋表・フォーム・バッジ） .theme-chrome … 外枠だけ（サイドバー・トップバー・ボタン・背景）請求書プレビューなど「帳票」を含むページ用。帳票の見た目を変えないため、表・フォームには触らない。方針： - グラデーション・影・装飾図形を使わない - 枠線は極細＋淡色。囲うより余白で区切る - 数値を主役に。ラベルは小さく淡いグレー - 色は意味があるときだけ（未処理・期限超過など）注意：style.css の後半には !important 付きの高特異度セレクタ（例 aside.sidebar.sidebar--app.no-print）があるため、打ち消す側も同等以上の特異度＋!important が必要。 ============================================================ */ body.theme-minimal, body.theme-chrome{ --m-bg: #fbfbfa; /* ページ背景 */ --m-surface: #ffffff; /* カード面 */ --m-subtle: #f5f5f3; /* 淡い面 */ --m-border: #e6e4de; /* 極細の枠線 */ --m-border-2: #d6d4cc; /* 強めの枠線 */ --m-text: #1c1c1a; /* 本文・数値 */ --m-text-2: #6b6a65; /* 補助テキスト */ --m-text-3: #96948d; /* ラベル・注記 */ --m-accent: #1f6feb; /* リンク */ --m-warn: #b0620d; /* 要対応 */ background: var(--m-bg) !important; color: var(--m-text); letter-spacing: .005em; /* 【追加 2026-07-12】style.css の :root に --border が定義されていない。 history.php / user_orders_list.php / user_purchases.php / profile.php など多くのページが border:1px solid var(--border) を使っており、未定義のため罫線が意図しない色（currentColor）で描かれていた。ここで定義して、テーマの罫線色に合わせる。（--line / --muted / --text も、ページ内CSSで使われているため合わせておく） */ --border: #e6e4de; --line: #e6e4de; --muted: #96948d; --text: #1c1c1a; } /* 【追加 2026-07-12】.container / .card がどのCSSにも定義されていなかった。 register.php / forgot.php / reset.php / tools/import_products_csv.php はこの2つで囲まれているのに、幅・余白・中央寄せの指定が無く、フォームが画面端まで余白なしで伸びていた。 */ body.theme-minimal .container{ max-width: 900px; margin: 0 auto; padding: 32px 20px 56px; } body.theme-minimal .card{ border: 1px solid var(--m-border) !important; border-radius: 12px !important; background: var(--m-surface) !important; box-shadow: none !important; padding: 28px; } body.theme-minimal .card .brand{ display: flex; align-items: center; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--m-border); margin-bottom: 4px; } body.theme-minimal .card .brand img{ width: 34px; height: 34px; object-fit: contain; } body.theme-minimal .card .brand h1{ margin: 0; font-size: 17px !important; font-weight: 600 !important; } body.theme-minimal .card .links{ display: flex; gap: 16px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--m-border); font-size: 13px; } /* style.css 側のスマホ用ブレークポイントは 720px。テーマ側が 700px だと 701〜720px の幅で指定が食い違うため、720px にそろえる。 */ @media (max-width: 720px){ body.theme-minimal .container{ padding: 20px 14px 40px; } body.theme-minimal .card{ padding: 20px 16px; } } /* ============================================================ 1. 外枠（.theme-minimal / .theme-chrome 共通） ============================================================ */ body:is(.theme-minimal,.theme-chrome) .shell{ max-width:1320px; padding:32px 28px 56px; } body:is(.theme-minimal,.theme-chrome) .layout{ gap:36px; } body:is(.theme-minimal,.theme-chrome) .main{ gap:28px; } /* ----- サイドバー ----- */ body:is(.theme-minimal,.theme-chrome) .sidebar, body:is(.theme-minimal,.theme-chrome) aside.sidebar, body:is(.theme-minimal,.theme-chrome) aside.sidebar.no-print, body:is(.theme-minimal,.theme-chrome) aside.sidebar.sidebar--app, body:is(.theme-minimal,.theme-chrome) aside.sidebar.sidebar--app.no-print{ position: sticky !important; top: 18px !important; width: auto !important; min-width: 0 !important; max-width: none !important; background: transparent !important; border: 0 !important; border-right: 1px solid var(--m-border) !important; border-radius: 0 !important; box-shadow: none !important; color: var(--m-text) !important; min-height: 0 !important; padding-right: 20px !important; overflow: visible !important; } body:is(.theme-minimal,.theme-chrome) .sidebar::before, body:is(.theme-minimal,.theme-chrome) .sidebar--app::before, body:is(.theme-minimal,.theme-chrome) aside.sidebar.sidebar--app::before{ display: none !important; content: none !important; } body:is(.theme-minimal,.theme-chrome) .sidebar .head, body:is(.theme-minimal,.theme-chrome) .sidebar .head::before, body:is(.theme-minimal,.theme-chrome) .sidebar .head::after{ background: transparent !important; border: 0 !important; box-shadow: none !important; content: none !important; } body:is(.theme-minimal,.theme-chrome) .sidebar-brand{ padding: 2px 0 18px !important; border-bottom: 1px solid var(--m-border) !important; gap: 10px !important; min-height: 0 !important; } /* ロゴ：CSSで描かれていた菱形を消し、実際のロゴ画像を出す。管理画面はの空タグなので背景画像で入れる。（このCSSと同じ assets/ にある logo.png を相対参照） */ body:is(.theme-minimal,.theme-chrome) .sidebar-logo{ width: 28px !important; height: 28px !important; min-width: 28px !important; border-radius: 7px !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; padding: 0 !important; background: url("logo.png") center / contain no-repeat !important; } body:is(.theme-minimal,.theme-chrome) .sidebar-logo::before, body:is(.theme-minimal,.theme-chrome) .sidebar-logo::after{ content: none !important; display: none !important; } body:is(.theme-minimal,.theme-chrome) .sidebar-logo img{ width: 28px !important; height: 28px !important; object-fit: contain !important; display: block !important; } body:is(.theme-minimal,.theme-chrome) .sidebar-title{ color: var(--m-text) !important; font-weight: 600 !important; font-size: 13px !important; letter-spacing: 0 !important; } body:is(.theme-minimal,.theme-chrome) .sidebar-subtitle{ color: var(--m-text-3) !important; font-weight: 500 !important; font-size: 10.5px !important; letter-spacing: .06em !important; } /* ----- ナビゲーション ----- */ body:is(.theme-minimal,.theme-chrome) .nav, body:is(.theme-minimal,.theme-chrome) .nav.nav--icon, body:is(.theme-minimal,.theme-chrome) .sidebar--app .nav{ padding: 16px 0 0 !important; gap: 1px !important; background: transparent !important; } body:is(.theme-minimal,.theme-chrome) .nav a, body:is(.theme-minimal,.theme-chrome) .nav summary, body:is(.theme-minimal,.theme-chrome) .sidebar .nav a, body:is(.theme-minimal,.theme-chrome) .sidebar--app .nav a, body:is(.theme-minimal,.theme-chrome) aside.sidebar .nav a{ min-height: 34px !important; padding: 7px 9px !important; border-radius: 6px !important; color: #4a4945 !important; font-size: 13px !important; font-weight: 500 !important; border: 1px solid transparent !important; background: transparent !important; box-shadow: none !important; gap: 10px !important; } body:is(.theme-minimal,.theme-chrome) .nav a:hover, body:is(.theme-minimal,.theme-chrome) .nav summary:hover, body:is(.theme-minimal,.theme-chrome) .sidebar--app .nav a:hover, body:is(.theme-minimal,.theme-chrome) aside.sidebar .nav a:hover{ background: var(--m-subtle) !important; border-color: transparent !important; color: var(--m-text) !important; } /* 選択中は左端に黒バー。hover と明確に区別する */ body:is(.theme-minimal,.theme-chrome) .nav a.is-active, body:is(.theme-minimal,.theme-chrome) .nav a.isActive, body:is(.theme-minimal,.theme-chrome) .nav details[open] > summary, body:is(.theme-minimal,.theme-chrome) .sidebar--app .nav a.is-active, body:is(.theme-minimal,.theme-chrome) aside.sidebar .nav a.is-active, body:is(.theme-minimal,.theme-chrome) aside.sidebar .nav a.isActive{ background: var(--m-subtle) !important; color: var(--m-text) !important; font-weight: 600 !important; border-color: transparent !important; box-shadow: inset 2px 0 0 0 var(--m-text) !important; } /* 【追加 2026-07-12】サブ項目（納品書履歴・請求書履歴）。親メニューの下に一段下げて、従属関係を見せる。 */ body:is(.theme-minimal,.theme-chrome) .nav a.nav-sub{ padding-left: 26px !important; min-height: 30px !important; font-size: 12px !important; color: var(--m-text-2) !important; } body:is(.theme-minimal,.theme-chrome) .nav a.nav-sub .nav-icon{ width: 15px !important; height: 15px !important; min-width: 15px !important; } body:is(.theme-minimal,.theme-chrome) .nav a.nav-sub .nav-icon svg{ width: 14px !important; height: 14px !important; } body:is(.theme-minimal,.theme-chrome) .nav details{ background: transparent !important; border: 0 !important; } body:is(.theme-minimal,.theme-chrome) .nav .nav-group-links, body:is(.theme-minimal,.theme-chrome) .nav-group-links{ border-left: 1px solid var(--m-border) !important; background: transparent !important; margin: 4px 0 8px 20px !important; padding: 0 0 0 10px !important; } body:is(.theme-minimal,.theme-chrome) .nav .nav-group-links a, body:is(.theme-minimal,.theme-chrome) .nav-group-links a{ color: var(--m-text-2) !important; background: transparent !important; font-size: 12px !important; min-height: 30px !important; } body:is(.theme-minimal,.theme-chrome) .nav .nav-group-links a:hover, body:is(.theme-minimal,.theme-chrome) .nav-group-links a:hover{ color: var(--m-text) !important; background: var(--m-subtle) !important; } /* ----- ナビのアイコン ----- (a) dashboard.php は（個別SVG） (b) 管理画面は（空タグ）で、 style.css が修飾クラスごとに違う図形を ::before で描いている。 → (a) は疑似要素を消し、(b) は形を残して色だけ単色にそろえる。 */ body:is(.theme-minimal,.theme-chrome) .nav-icon, body:is(.theme-minimal,.theme-chrome) .nav .dot{ position: static !important; width: 18px !important; height: 18px !important; min-width: 18px !important; border-radius: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; color: #9a9891 !important; font-size: 13px !important; } /* (a) 修飾クラスなし＝SVG入り */ body:is(.theme-minimal,.theme-chrome) .nav a .nav-icon:not([class*="nav-icon--"])::before, body:is(.theme-minimal,.theme-chrome) .nav a .nav-icon:not([class*="nav-icon--"])::after, body:is(.theme-minimal,.theme-chrome) .nav a.is-active .nav-icon:not([class*="nav-icon--"])::before, body:is(.theme-minimal,.theme-chrome) .nav a.is-active .nav-icon:not([class*="nav-icon--"])::after, body:is(.theme-minimal,.theme-chrome) .sidebar .nav a .nav-icon:not([class*="nav-icon--"])::before, body:is(.theme-minimal,.theme-chrome) .sidebar .nav a .nav-icon:not([class*="nav-icon--"])::after, body:is(.theme-minimal,.theme-chrome) .nav .dot::before, body:is(.theme-minimal,.theme-chrome) .nav .dot::after{ content: none !important; display: none !important; border: 0 !important; background: transparent !important; } /* (b) 修飾クラス付き＝CSS描画アイコン */ body:is(.theme-minimal,.theme-chrome) .nav a [class*="nav-icon--"]::before, body:is(.theme-minimal,.theme-chrome) .nav a [class*="nav-icon--"]::after, body:is(.theme-minimal,.theme-chrome) .sidebar .nav a [class*="nav-icon--"]::before, body:is(.theme-minimal,.theme-chrome) .sidebar .nav a [class*="nav-icon--"]::after{ color: #9a9891 !important; border-color: #9a9891 !important; background: transparent !important; box-shadow: none !important; opacity: 1 !important; } body:is(.theme-minimal,.theme-chrome) .nav a.is-active [class*="nav-icon--"]::before, body:is(.theme-minimal,.theme-chrome) .nav a.is-active [class*="nav-icon--"]::after{ color: var(--m-text) !important; border-color: var(--m-text) !important; } body:is(.theme-minimal,.theme-chrome) .nav-icon svg{ width: 17px !important; height: 17px !important; display: block !important; stroke: currentColor !important; fill: none !important; stroke-width: 1.6 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } body:is(.theme-minimal,.theme-chrome) .nav a:hover .nav-icon, body:is(.theme-minimal,.theme-chrome) .nav a.is-active .nav-icon{ color: var(--m-text) !important; } /* ----- サイドバー下部 ----- */ body:is(.theme-minimal,.theme-chrome) .sidebar-footer{ margin: 22px 0 0 !important; padding: 16px 0 0 !important; border: 0 !important; border-top: 1px solid var(--m-border) !important; border-radius: 0 !important; background: transparent !important; color: var(--m-text-3) !important; font-size: 11px !important; font-weight: 500 !important; } body:is(.theme-minimal,.theme-chrome) .sidebar-footer a{ color: var(--m-text-2) !important; background: var(--m-surface) !important; border: 1px solid var(--m-border-2) !important; border-radius: 6px !important; font-weight: 500 !important; font-size: 12px !important; padding: 6px 9px !important; margin-top: 10px !important; } body:is(.theme-minimal,.theme-chrome) .sidebar-footer a:hover{ background: var(--m-subtle) !important; color: var(--m-text) !important; } /* ----- トップバー ----- */ body:is(.theme-minimal,.theme-chrome) .topbar{ min-height: 0 !important; margin-bottom: 26px !important; padding: 0 0 18px !important; border: 0 !important; border-bottom: 1px solid var(--m-border) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; } body:is(.theme-minimal,.theme-chrome) .topbar .brand img{ width: 30px !important; height: 30px !important; border-radius: 7px !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; } body:is(.theme-minimal,.theme-chrome) .topbar h1, body:is(.theme-minimal,.theme-chrome) .topbar .brand h1{ font-size: 17px !important; font-weight: 600 !important; letter-spacing: 0 !important; color: var(--m-text) !important; } /* ----- ボタン ----- */ body:is(.theme-minimal,.theme-chrome) .btn, body:is(.theme-minimal,.theme-chrome) .button, body:is(.theme-minimal,.theme-chrome) .btnSmall, body:is(.theme-minimal,.theme-chrome) .search-submit{ min-height: 34px !important; padding: 8px 14px !important; border-radius: 7px !important; border: 1px solid var(--m-text) !important; background: var(--m-text) !important; color: #fff !important; font-weight: 500 !important; font-size: 13px !important; box-shadow: none !important; } body:is(.theme-minimal,.theme-chrome) .btn:hover, body:is(.theme-minimal,.theme-chrome) .button:hover, body:is(.theme-minimal,.theme-chrome) .btnSmall:hover{ transform: none !important; opacity: .84; box-shadow: none !important; } body:is(.theme-minimal,.theme-chrome) .btnGhost{ background: var(--m-surface) !important; color: var(--m-text) !important; border: 1px solid var(--m-border-2) !important; } body:is(.theme-minimal,.theme-chrome) .btnGhost:hover{ background: var(--m-subtle) !important; opacity: 1; } body:is(.theme-minimal,.theme-chrome) .btnDanger{ background: var(--m-surface) !important; color: #a32d2d !important; border: 1px solid #f0c4c4 !important; } body:is(.theme-minimal,.theme-chrome) a{ font-weight: 500; } /* ============================================================ 2. 中身（.theme-minimal のみ）帳票を含むページ（.theme-chrome）には適用しない ============================================================ */ /* ----- 見出し ----- */ body.theme-minimal h1{ font-weight: 600 !important; letter-spacing: 0 !important; color: var(--m-text) !important; } body.theme-minimal h2{ font-weight: 600 !important; color: var(--m-text) !important; } body.theme-minimal h3{ font-weight: 600 !important; color: var(--m-text) !important; } body.theme-minimal a{ color: var(--m-accent); } body.theme-minimal a:hover{ color: var(--m-text); } /* ----- ヒーロー（ダッシュボード） ----- */ body.theme-minimal .hero{ min-height: 0 !important; padding: 0 0 28px !important; border: 0 !important; border-bottom: 1px solid var(--m-border) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.theme-minimal .hero::before, body.theme-minimal .hero::after{ display: none !important; content: none !important; } body.theme-minimal .hero h1{ font-size: 24px !important; font-weight: 600; letter-spacing: 0; margin: 0 0 6px; } body.theme-minimal .hero p{ color: var(--m-text-2); font-weight: 400; font-size: 14px; } body.theme-minimal .hero-actions{ margin-top: 20px; gap: 8px; } body.theme-minimal .kicker{ color: var(--m-text-3); letter-spacing: .12em; font-size: 11px; font-weight: 600; margin: 0 0 10px; } /* ----- KPIカード ----- */ body.theme-minimal .kpis{ gap: 1px; background: var(--m-border); border: 1px solid var(--m-border); border-radius: 10px; overflow: hidden; } /* 顧客ダッシュボードはKPIが3枚。以前は dashboard.php にインラインstyleで3列指定していたが、インラインstyleはメディアクエリに常に勝つためスマホでも3列のままだった。クラスで制御し、狭い画面では下のメディアクエリで列数を減らす。 */ body.theme-minimal .kpis.kpis--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } body.theme-minimal .kpi{ min-height: 0; padding: 20px 22px 22px; border: 0 !important; border-radius: 0 !important; background: var(--m-surface) !important; box-shadow: none !important; } /* 旧デザインの装飾（アイコン四角・背景の円）を消す */ body.theme-minimal .kpi .icon{ display: none !important; } body.theme-minimal .kpi::before, body.theme-minimal .kpi::after{ content: none !important; display: none !important; } body.theme-minimal .kpi .label{ margin: 0 0 12px; font-size: 12px; font-weight: 500; color: var(--m-text-3); } body.theme-minimal .kpi .value{ font-size: 30px; font-weight: 500; line-height: 1.1; color: var(--m-text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } body.theme-minimal .kpi .sub{ margin: 10px 0 0; color: var(--m-text-3); font-size: 11.5px; font-weight: 400; } /* 未処理が1件以上のときだけ色を持たせる */ body.theme-minimal .kpi.kpi--attention .value{ color: var(--m-warn); } /* ----- 売上推移グラフ（.m-chart-* はこのテーマ専用） ----- */ body.theme-minimal .m-chart{ border: 1px solid var(--m-border); border-radius: 10px; background: var(--m-surface); padding: 20px 22px 18px; } body.theme-minimal .m-chart-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--m-border); } body.theme-minimal .m-chart-head h3{ margin: 0; font-size: 14px; font-weight: 600; } body.theme-minimal .m-chart-note{ font-size: 12px; color: var(--m-text-3); font-weight: 400; } /* 各棒に実額を出したのでガイド線は不要（金額の重複を避ける） */ body.theme-minimal .m-chart-plot{ position: relative; margin-top: 22px; } body.theme-minimal .m-chart-guide{ display: none !important; } body.theme-minimal .m-chart-body{ position: relative; display: grid; grid-template-columns: repeat(var(--m-chart-cols, 12), minmax(0, 1fr)); align-items: end; gap: 0; height: 186px; } body.theme-minimal .m-chart-col{ display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; padding: 0 7px; } body.theme-minimal .m-chart-val{ font-size: 12px; color: var(--m-text); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; margin-bottom: 8px; } /* 短縮表記（¥248万）はスマホでのみ使う */ body.theme-minimal .m-chart-val-sm{ display: none; } /* 棒は形だけ示せばよい。実額はラベルが語る */ body.theme-minimal .m-chart-bar{ width: 100%; max-width: 30px; min-height: 2px; border-radius: 2px 2px 0 0; background: #b9b7af; } /* 当月は集計途中。塗ると「急落」に見えるので斜線＋枠線にする */ body.theme-minimal .m-chart-col.is-current .m-chart-bar{ background: repeating-linear-gradient(-45deg, #e8e6e0 0 4px, transparent 4px 8px); border: 1px solid var(--m-border-2); border-bottom: 0; } body.theme-minimal .m-chart-col.is-current .m-chart-val{ color: var(--m-text-3); } body.theme-minimal .m-chart-col.is-current .m-chart-x{ color: var(--m-text-3); } /* 列間に隙間を作らず、隣り合う border-top をつないで連続した軸線にする */ body.theme-minimal .m-chart-x{ font-size: 11px; color: var(--m-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--m-border); width: calc(100% + 14px); text-align: center; } body.theme-minimal .m-chart-foot{ display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--m-border); font-size: 12px; color: var(--m-text-3); } body.theme-minimal .m-chart-foot strong{ color: var(--m-text); font-weight: 500; font-variant-numeric: tabular-nums; } /* ----- 下段カード ----- */ body.theme-minimal .dashboard-insights{ gap: 20px; } body.theme-minimal .insight-card{ border: 1px solid var(--m-border) !important; border-radius: 10px !important; background: var(--m-surface) !important; box-shadow: none !important; padding: 20px 22px 22px; } body.theme-minimal .insight-head{ margin-bottom: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--m-border); } body.theme-minimal .insight-head h3{ font-size: 14px; font-weight: 600; } body.theme-minimal .insight-head span{ font-size: 12px; font-weight: 400; color: var(--m-text-3); } body.theme-minimal .insight-head a{ font-size: 12px; font-weight: 500; color: var(--m-accent); } /* ----- ステータス内訳 ----- */ body.theme-minimal .m-split{ display: flex; width: 100%; height: 8px; margin: 20px 0 6px; border-radius: 4px; overflow: hidden; background: var(--m-subtle); } body.theme-minimal .m-split-seg{ display: block; height: 100%; } body.theme-minimal .m-split-seg--unprocessed{ background: var(--m-warn); } body.theme-minimal .m-split-seg--processing { background: #8b8983; } body.theme-minimal .m-split-seg--completed { background: #cecbc3; } body.theme-minimal .m-split-seg--canceled { background: #ebe9e3; } body.theme-minimal .m-split-list{ margin-top: 12px; } body.theme-minimal .m-split-row{ display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--m-border); font-size: 13px; color: var(--m-text-2); } body.theme-minimal .m-split-row:last-child{ border-bottom: 0; } body.theme-minimal .m-split-row.is-attention .m-split-key, body.theme-minimal .m-split-row.is-attention .m-split-cnt{ color: var(--m-warn); font-weight: 500; } body.theme-minimal .m-split-key{ display: flex; align-items: center; gap: 9px; } body.theme-minimal .m-split-dot{ width: 8px; height: 8px; min-width: 8px; border-radius: 2px; display: inline-block; } body.theme-minimal .m-split-dot--unprocessed{ background: var(--m-warn); } body.theme-minimal .m-split-dot--processing { background: #8b8983; } body.theme-minimal .m-split-dot--completed { background: #cecbc3; } body.theme-minimal .m-split-dot--canceled { background: #ebe9e3; } body.theme-minimal .m-split-pct{ color: var(--m-text-3); font-size: 12px; font-variant-numeric: tabular-nums; min-width: 46px; text-align: right; } body.theme-minimal .m-split-cnt{ color: var(--m-text); font-weight: 500; font-variant-numeric: tabular-nums; min-width: 60px; text-align: right; } /* ----- 要対応の受注 ----- */ body.theme-minimal .m-todo{ margin-top: 4px; } body.theme-minimal .m-todo-row{ display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; grid-template-areas: "due name no" "due amt amt"; align-items: center; gap: 2px 14px; padding: 11px 0; border-bottom: 1px solid var(--m-border); color: var(--m-text); font-weight: 400; } body.theme-minimal .m-todo-row:last-child{ border-bottom: 0; } body.theme-minimal .m-todo-row:hover{ background: var(--m-subtle); } body.theme-minimal .m-todo-due{ grid-area: due; font-size: 12px; font-weight: 500; color: var(--m-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; } body.theme-minimal .m-todo-due.is-over, body.theme-minimal .m-todo-due.is-today{ color: var(--m-warn); } body.theme-minimal .m-todo-due.is-soon{ color: var(--m-text); } body.theme-minimal .m-todo-due.is-none{ color: var(--m-text-3); font-weight: 400; } body.theme-minimal .m-todo-name{ grid-area: name; font-size: 13px; color: var(--m-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.theme-minimal .m-todo-no{ grid-area: no; font-size: 11.5px; color: var(--m-text-3); font-variant-numeric: tabular-nums; white-space: nowrap; } body.theme-minimal .m-todo-amt{ grid-area: amt; font-size: 12px; color: var(--m-text-2); font-variant-numeric: tabular-nums; } body.theme-minimal .m-todo-more{ margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--m-border); font-size: 12px; color: var(--m-text-3); } body.theme-minimal .m-empty{ margin: 24px 0; color: var(--m-text-3); font-size: 13px; text-align: center; } /* ----- パネル・カード ----- */ body.theme-minimal .panel{ border: 1px solid var(--m-border) !important; border-radius: 10px !important; background: var(--m-surface) !important; box-shadow: none !important; /* style.css の .panel には overflow:hidden があり、中の表を横スクロールさせようとしても切り取られてしまうため解除する */ overflow: visible !important; min-width: 0; } body.theme-minimal .panel .panel-h{ padding: 16px 20px !important; border-bottom: 1px solid var(--m-border) !important; background: transparent !important; } body.theme-minimal .panel .panel-h h2, body.theme-minimal .panel .panel-h .t{ font-size: 15px !important; font-weight: 600 !important; color: var(--m-text) !important; margin: 0 !important; } body.theme-minimal .panel .panel-b{ padding: 20px !important; } body.theme-minimal .box, body.theme-minimal .card, body.theme-minimal .isDone{ border: 1px solid var(--m-border) !important; border-radius: 8px !important; background: var(--m-surface) !important; box-shadow: none !important; } body.theme-minimal .box .title{ font-weight: 600 !important; color: var(--m-text) !important; } body.theme-minimal .meta{ color: var(--m-text-3) !important; font-weight: 400 !important; } body.theme-minimal .sectionLabel{ color: var(--m-text-3) !important; font-weight: 500 !important; letter-spacing: .06em !important; } body.theme-minimal .hr{ background: var(--m-border) !important; } body.theme-minimal .alert{ border: 1px solid var(--m-border) !important; border-radius: 8px !important; background: var(--m-surface) !important; box-shadow: none !important; font-size: 13px !important; } body.theme-minimal .alert.ok{ border-color:#cfe3cd !important; background:#f4f9f2 !important; color:#3b6d11 !important; } body.theme-minimal .alert.error{ border-color:#f0c4c4 !important; background:#fdf4f4 !important; color:#a32d2d !important; } /* ----- 旧テンプレート（.panelBox / .panelHead / .panelBody） ----- products / purchase_orders / purchase_suppliers / specs / units の5ページは .panel ではなく .panelBox という別のクラス名を使っており、テーマのパネル指定も、モバイル時の表の横スクロール対策もまったく効いていなかった（table が画面からはみ出す）。ここで .panel と同じ扱いにする。 */ body.theme-minimal .panelBox{ border: 1px solid var(--m-border) !important; border-radius: 10px !important; background: var(--m-surface) !important; box-shadow: none !important; overflow: hidden; } body.theme-minimal .panelHead{ padding: 16px 20px !important; border-bottom: 1px solid var(--m-border) !important; background: transparent !important; } body.theme-minimal .panelHead h2, body.theme-minimal .panelHead .t{ font-size: 15px !important; font-weight: 600 !important; color: var(--m-text) !important; margin: 0 !important; } body.theme-minimal .panelBody{ padding: 20px !important; } /* ----- 表 ----- */ body.theme-minimal table{ border-collapse: collapse !important; } body.theme-minimal th{ background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--m-border-2) !important; color: var(--m-text-3) !important; font-size: 11.5px !important; font-weight: 500 !important; padding: 10px 12px !important; text-align: left !important; white-space: nowrap; font-variant-numeric: tabular-nums; } body.theme-minimal td{ border: 0 !important; border-bottom: 1px solid var(--m-border) !important; color: var(--m-text) !important; font-size: 13px !important; font-weight: 400 !important; padding: 11px 12px !important; font-variant-numeric: tabular-nums; } body.theme-minimal tbody tr:hover td{ background: var(--m-subtle) !important; } body.theme-minimal tbody tr:last-child td{ border-bottom: 0 !important; } body.theme-minimal .detail-items, body.theme-minimal .detail-items th, body.theme-minimal .detail-items td{ border-radius: 0 !important; background: transparent !important; } /* ----- フォーム ----- */ body.theme-minimal .mini, body.theme-minimal .input, body.theme-minimal input[type="text"], body.theme-minimal input[type="email"], body.theme-minimal input[type="password"], body.theme-minimal input[type="date"], body.theme-minimal input[type="number"], body.theme-minimal select, body.theme-minimal textarea{ min-height: 36px !important; border: 1px solid var(--m-border-2) !important; border-radius: 7px !important; background: var(--m-surface) !important; color: var(--m-text) !important; box-shadow: none !important; padding: 8px 11px !important; font-size: 13px !important; } body.theme-minimal input:focus, body.theme-minimal select:focus, body.theme-minimal textarea:focus{ border-color: var(--m-text) !important; box-shadow: none !important; outline: none !important; } /* ============================================================ 【追加 2026-07-13】キーボード操作（Tab）でのフォーカス表示・入力欄は上の :focus で outline:none にしていたため、 Tab で辿ってもどこにいるのか分からなかった。・ボタンにはフォーカスのスタイルが1つも無く、特に黒背景のボタン（保存・当日・CSV出力など）は選択されていることが全く見えなかった。 :focus-visible を使うので、マウスでクリックしたときには出ない。キーボードで辿ったときだけリングが出る。 ============================================================ */ body:is(.theme-minimal, .theme-chrome) :is( a, button, input, select, textarea, summary, [tabindex] ):focus-visible{ outline: 2px solid var(--m-accent) !important; outline-offset: 2px !important; border-radius: 6px; } /* 黒背景のボタンは、青いリングだけだと境界が沈んで見えにくい。白い内側リングを1本挟んで、背景から浮かせる。 */ body:is(.theme-minimal, .theme-chrome) :is( .btn, .btn-primary, button[type="submit"] ):focus-visible{ outline: 2px solid var(--m-accent) !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px #fff !important; } /* サイドバーのリンクは角丸が大きいので、リングの形を合わせる */ body:is(.theme-minimal, .theme-chrome) .sidebar .nav a:focus-visible{ outline: 2px solid var(--m-accent) !important; outline-offset: -2px !important; /* 内側に描いて隣の項目と重ならないようにする */ border-radius: 8px; } /* input の :focus は outline:none にしているので、キーボード時だけ上書きしてリングを戻す */ body.theme-minimal :is(input, select, textarea):focus-visible{ outline: 2px solid var(--m-accent) !important; outline-offset: 1px !important; } /* ページ内CSSの input{width:100%} がラジオ／チェックにも効き、丸が横幅いっぱいに広がってラベルが1文字ずつ縦に折り返されていた */ body.theme-minimal input[type="radio"], body.theme-minimal input[type="checkbox"]{ width: auto !important; min-width: 0 !important; min-height: 0 !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; accent-color: var(--m-text); } body.theme-minimal .modeBox label{ display: inline-flex !important; align-items: center !important; gap: 8px !important; white-space: nowrap !important; width: auto !important; } body.theme-minimal .label{ color: var(--m-text-2) !important; font-weight: 500 !important; font-size: 12px !important; margin: 12px 0 6px !important; } /* ----- バッジ・ピル・タブ ----- */ body.theme-minimal .badge, body.theme-minimal .status-badge{ background: var(--m-subtle) !important; color: var(--m-text-2) !important; border: 1px solid var(--m-border) !important; border-radius: 5px !important; font-size: 11px !important; font-weight: 500 !important; min-width: 0 !important; padding: 3px 8px !important; } body.theme-minimal .badge.active{ background: var(--m-surface) !important; border-color: #cfe3cd !important; color: #3b6d11 !important; } body.theme-minimal .badge.void, body.theme-minimal .badge.incomplete{ background: var(--m-surface) !important; border-color: var(--m-border-2) !important; color: var(--m-warn) !important; } body.theme-minimal .pill{ border: 1px solid var(--m-border-2) !important; border-radius: 7px !important; background: var(--m-surface) !important; color: var(--m-text) !important; box-shadow: none !important; font-weight: 500 !important; min-height: 34px !important; } body.theme-minimal .detail-tabs{ border-bottom: 1px solid var(--m-border) !important; } body.theme-minimal .detail-tab{ color: var(--m-text-3) !important; font-weight: 500 !important; border-bottom: 2px solid transparent !important; } body.theme-minimal .detail-tab.active{ color: var(--m-text) !important; border-bottom-color: var(--m-text) !important; } /* ----- 受注一覧の2ペイン ----- */ body.theme-minimal .orders-list-pane, body.theme-minimal .order-detail-pane{ border: 1px solid var(--m-border) !important; border-radius: 10px !important; background: var(--m-surface) !important; box-shadow: none !important; } body.theme-minimal .orders-pane-head{ border-bottom: 1px solid var(--m-border) !important; font-weight: 600 !important; font-size: 14px !important; color: var(--m-text) !important; } body.theme-minimal .order-row{ border-radius: 6px !important; border: 1px solid transparent !important; } body.theme-minimal .order-row:hover, body.theme-minimal .order-row.is-selected{ background: var(--m-subtle) !important; border-color: transparent !important; } body.theme-minimal .order-row.is-selected{ box-shadow: inset 2px 0 0 0 var(--m-text) !important; } body.theme-minimal .order-row .no{ color: var(--m-accent) !important; font-weight: 500 !important; } body.theme-minimal .order-row .name{ color: var(--m-text) !important; font-weight: 400 !important; } body.theme-minimal .order-row .date{ color: var(--m-text-3) !important; font-weight: 400 !important; } body.theme-minimal .detail-title h3{ font-size: 18px !important; font-weight: 600 !important; } body.theme-minimal .detail-box{ background: var(--m-subtle) !important; border: 1px solid var(--m-border) !important; border-radius: 8px !important; } body.theme-minimal .detail-box .k{ color: var(--m-text-3) !important; font-weight: 400 !important; } body.theme-minimal .detail-box .v{ color: var(--m-text) !important; font-weight: 500 !important; } body.theme-minimal .bulkBar{ border: 1px solid var(--m-border) !important; border-radius: 8px !important; background: var(--m-surface) !important; } body.theme-minimal .bulkBar .left{ color: var(--m-text-2) !important; font-weight: 400 !important; } /* ----- モーダル ----- */ body.theme-minimal .modalMask{ background: rgba(28,28,26,.42) !important; } body.theme-minimal .modal{ border: 1px solid var(--m-border) !important; border-radius: 12px !important; box-shadow: 0 20px 50px rgba(28,28,26,.16) !important; } body.theme-minimal .modalH{ border-bottom: 1px solid var(--m-border) !important; } body.theme-minimal .modalH .t{ font-weight: 600 !important; } /* ----- ログイン画面 ----- */ body.theme-minimal.login-page{ background: var(--m-bg) !important; } body.theme-minimal .login-shell{ border: 1px solid var(--m-border) !important; border-radius: 14px !important; box-shadow: none !important; background: var(--m-surface) !important; } body.theme-minimal .login-visual{ background: var(--m-subtle) !important; color: var(--m-text) !important; border-right: 1px solid var(--m-border) !important; } body.theme-minimal .login-visual::after{ display: none !important; content: none !important; } body.theme-minimal .login-visual h1{ font-size: 24px !important; color: var(--m-text) !important; } body.theme-minimal .login-visual p{ color: var(--m-text-2) !important; font-weight: 400 !important; } body.theme-minimal .login-card{ padding: 40px !important; } body.theme-minimal .brand h1{ font-size: 17px !important; font-weight: 600 !important; } /* ============================================================ 3. 画面幅が狭いとき（タブレット・スマホ） ★ サイドバーは position:sticky !important を指定しているため、 1カラムに折り返した後もその場に貼り付き、本文の裏に残り続けていた。狭い画面では必ず static に戻す。 ============================================================ */ /* ----- タブレット（〜1180px）：1カラムに折り返す ----- */ @media (max-width: 1180px){ body:is(.theme-minimal,.theme-chrome) .shell{ padding: 20px 16px 40px; } body:is(.theme-minimal,.theme-chrome) .layout{ grid-template-columns: 1fr !important; gap: 20px; } /* サイドバーを本文の上に「普通に」置く（貼り付かせない） */ body:is(.theme-minimal,.theme-chrome) .sidebar, body:is(.theme-minimal,.theme-chrome) aside.sidebar, body:is(.theme-minimal,.theme-chrome) aside.sidebar.no-print, body:is(.theme-minimal,.theme-chrome) aside.sidebar.sidebar--app, body:is(.theme-minimal,.theme-chrome) aside.sidebar.sidebar--app.no-print{ position: static !important; top: auto !important; z-index: auto !important; width: 100% !important; border-right: 0 !important; border-bottom: 1px solid var(--m-border) !important; padding-right: 0 !important; padding-bottom: 14px !important; } /* メニューは横並びのタイル状にして、縦の場所を取らない */ body:is(.theme-minimal,.theme-chrome) .nav, body:is(.theme-minimal,.theme-chrome) .nav.nav--icon, body:is(.theme-minimal,.theme-chrome) .sidebar--app .nav{ display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; gap: 4px !important; padding: 12px 0 4px !important; } body:is(.theme-minimal,.theme-chrome) .nav a.nav-sub{ padding-left: 9px !important; } body:is(.theme-minimal,.theme-chrome) .sidebar-footer{ margin-top: 12px !important; padding-top: 12px !important; } body:is(.theme-minimal,.theme-chrome) .sidebar-footer a{ width: auto !important; display: inline-flex !important; } body.theme-minimal .kpis, body.theme-minimal .kpis.kpis--3{ grid-template-columns: repeat(2, 1fr); } /* 下段2カードは横に並べきれないので1列にする（style.css が 2列を !important で固定している） */ body.theme-minimal .dashboard-insights{ grid-template-columns: 1fr !important; } } /* ----- スマホ（〜700px） ----- */ /* style.css 側のスマホ用ブレークポイントは 720px。テーマ側が 700px だと 701〜720px の幅で指定が食い違うため、720px にそろえる。 */ @media (max-width: 720px){ body:is(.theme-minimal,.theme-chrome) .shell{ padding: 16px 12px 32px; } body:is(.theme-minimal,.theme-chrome) .nav, body:is(.theme-minimal,.theme-chrome) .nav.nav--icon, body:is(.theme-minimal,.theme-chrome) .sidebar--app .nav{ grid-template-columns: repeat(2, 1fr) !important; } body.theme-minimal .kpis, body.theme-minimal .kpis.kpis--3{ grid-template-columns: 1fr; } body.theme-minimal .kpi{ padding: 16px 18px 18px; } body.theme-minimal .kpi .value{ font-size: 26px; } body.theme-minimal .hero h1{ font-size: 20px !important; } /* 売上推移グラフ：長い金額は入らないので短縮表記（¥248万）に切り替える */ body.theme-minimal .m-chart-body{ height: 150px; } body.theme-minimal .m-chart-val{ display: none; } body.theme-minimal .m-chart-val-sm{ display: block; font-size: 11px; color: var(--m-text); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; margin-bottom: 6px; } body.theme-minimal .m-chart-col.is-current .m-chart-val-sm{ color: var(--m-text-3); } body.theme-minimal .m-chart-bar{ max-width: 26px; } body.theme-minimal .m-chart-foot{ flex-direction: column; gap: 4px; align-items: flex-start; } /* ステータス内訳：ラベルが縦積みになっていたので横幅を確保 */ body.theme-minimal .m-split-row{ grid-template-columns: 1fr auto auto; gap: 10px; } body.theme-minimal .m-split-key{ white-space: nowrap; } body.theme-minimal .m-split-pct{ min-width: 42px; } body.theme-minimal .m-split-cnt{ min-width: 52px; } /* 要対応の受注：はみ出していたので積み上げる */ body.theme-minimal .m-todo-row{ grid-template-columns: 1fr auto; grid-template-areas: "due amt" "name name" "no no"; gap: 2px 10px; padding: 12px 0; } body.theme-minimal .m-todo-name{ white-space: normal; } body.theme-minimal .insight-card{ padding: 16px 16px 18px; } body.theme-minimal .m-chart{ padding: 16px 16px 14px; } } /* ----- 表の横はみ出し対策（タブレット・スマホ共通） ----- 列が多い表は、狭い画面で「状態」「操作」列が切れていた。パネルの中だけを横スクロールさせ、列は潰さずに読めるようにする。 ※ 以前は「.panel-b の直下の table」しか対象にしていなかったため、 form や div で包まれた table（order.php など）や、 .panelBody を使う旧テンプレート5ページには効いていなかった。子孫セレクタに広げ、独自ラッパー（.tableWrap）にも効かせる。 */ @media (max-width: 1180px){ body.theme-minimal .panel .panel-b, body.theme-minimal .panelBox .panelBody, body.theme-minimal .tableWrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; } body.theme-minimal .panel .panel-b table, body.theme-minimal .panelBox .panelBody table{ min-width: 720px; } /* 日付・番号・金額は折り返さない（1文字ずつ縦積みになるのを防ぐ） */ body.theme-minimal .panel .panel-b table td, body.theme-minimal .panel .panel-b table th, body.theme-minimal .panelBox .panelBody table td, body.theme-minimal .panelBox .panelBody table th{ white-space: nowrap; } /* 商品名・取引先名は長いので折り返してよい */ body.theme-minimal .panel .panel-b table td.colProduct, body.theme-minimal .panel .panel-b table td.colStore, body.theme-minimal .panelBox .panelBody table td:nth-child(2){ white-space: normal; min-width: 140px; } }