/* Theme Name: Hight_EQ Theme URI: http://example.com/ Description: 請求管理システム用のシンプルテーマ Author: つぐさん Version: 0.1 */ body { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Yu Gothic", "メイリオ", sans-serif; margin: 0; background: #f5f5f7; color: #333; /* ★LAYOUT-2026-06-27：土俵＋ガジェットの間隔体系をCSS変数で一元管理。 全ページがこれを参照して揃う。今後の土俵カード化もこの変数に寄せる。 ①ページ最上部→タイトル ②タイトル→土俵 ③土俵内側padding ④ガジェット間 ⑤本文左右余白 */ --tsb-gap-top: 24px; /* ①ページ上端→ページタイトル */ --tsb-gap-title-board: 16px; /* ②タイトル→土俵カード */ --tsb-board-pad: 20px; /* ③土俵カード内側padding */ --tsb-board-radius: 12px; /* 土俵カード角丸 */ --tsb-board-gap: 16px; /* 土俵カードを縦に複数並べるときの間隔 */ --tsb-gadget-gap: 12px; /* ④土俵内のガジェットカード間 */ --tsb-gadget-pad: 14px; /* ガジェットカード内側padding */ --tsb-gadget-radius: 10px; /* ガジェットカード角丸 */ --tsb-page-pad-x: 24px; /* ⑤本文の左右余白 */ --tsb-board-shadow: 0 1px 10px rgba(0,0,0,.06); --tsb-board-border: 1px solid #e6e6e6; /* ★LIST-2026-06-27：リスト（テーブル本文）エリアの高さ上限。これを超えたら 「ヘッダー行(thead)はリスト枠の上端に吸着・本文行(tbody)だけが枠内で縦スクロール」する。 ★2026-06-29 再々：見出しはリスト枠の上端にフィックス吸着していなければならない（画面最上端へ飛ばさない）。 枠が画面途中で半端に切れてリストが終わったと誤認されないよう、高さは画面下端まで使い切る相対値にする。 calc(100vh - 220px)＝管理バー＋ページタイトル＋土俵上余白の概算を引き、残り（画面下端まで）をリスト枠に充てる。 これにより枠は画面の一番下まで伸び、その中で本文がスクロールし、見出しは枠上端に吸着し続ける。 */ --tsb-list-max-h: calc(100vh - 220px); } /* ★UI改修（2026-06-25）：ヘッダー・フッターの背景色を黒（#222）から濃紺（ネイビー #1e3a5f）に統一。文字は白のまま（コントラスト十分）。 */ /* ★UI改修（2026-06-26）：濃紺ベースにローポリ（ランダム配色の三角を敷き詰めた幾何学模様）。 三角ごとに紺系の色をランダムに割り当てた 360×208px タイルを生成し、CSS内にテキスト(data URI)として焼き込み。 画像ファイルは生成せず、約4.5KBのCSSテキストのみ＝軽量。タイルが大きいので繰り返しは目立たない。 ※純CSSのグラデーションでは三角ごとのランダム配色が原理的に不可能なため、乱数で配色を確定したタイルを焼き込む方式を採用。 ★2026-06-26 追記：主張が強すぎたためパレットを地の紺#1e3a5fに寄せて振り幅を狭め、控えめなテクスチャに調整。 ★2026-06-26 SIDEBAR：横帯ヘッダー／フッターを廃止し左固定サイドバーへ集約。この紺ローポリ地はサイドバー(.tsb-sidebar)に適用する。 */ .site-header, .site-footer, .tsb-sidebar { background-color: #1e3a5f; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27360%27%20height%3D%27208%27%20viewBox%3D%270%200%20360%20208%27%3E%3Cpolygon%20points%3D%270%2C0%2060%2C0%200%2C52%27%20fill%3D%27%231c385a%27%2F%3E%3Cpolygon%20points%3D%2760%2C0%2060%2C52%200%2C52%27%20fill%3D%27%231d3a5b%27%2F%3E%3Cpolygon%20points%3D%2760%2C0%20120%2C0%20120%2C52%27%20fill%3D%27%23223f60%27%2F%3E%3Cpolygon%20points%3D%2760%2C0%2060%2C52%20120%2C52%27%20fill%3D%27%23203e5c%27%2F%3E%3Cpolygon%20points%3D%27120%2C0%20180%2C0%20120%2C52%27%20fill%3D%27%231b3658%27%2F%3E%3Cpolygon%20points%3D%27180%2C0%20180%2C52%20120%2C52%27%20fill%3D%27%231d3a5b%27%2F%3E%3Cpolygon%20points%3D%27180%2C0%20240%2C0%20240%2C52%27%20fill%3D%27%231a3556%27%2F%3E%3Cpolygon%20points%3D%27180%2C0%20180%2C52%20240%2C52%27%20fill%3D%27%23223f60%27%2F%3E%3Cpolygon%20points%3D%27240%2C0%20300%2C0%20240%2C52%27%20fill%3D%27%231e3a5f%27%2F%3E%3Cpolygon%20points%3D%27300%2C0%20300%2C52%20240%2C52%27%20fill%3D%27%2321405e%27%2F%3E%3Cpolygon%20points%3D%27300%2C0%20360%2C0%20360%2C52%27%20fill%3D%27%2321405e%27%2F%3E%3Cpolygon%20points%3D%27300%2C0%20300%2C52%20360%2C52%27%20fill%3D%27%23203e5c%27%2F%3E%3Cpolygon%20points%3D%270%2C52%2060%2C52%2060%2C104%27%20fill%3D%27%23203e5c%27%2F%3E%3Cpolygon%20points%3D%270%2C52%200%2C104%2060%2C104%27%20fill%3D%27%231e3a5f%27%2F%3E%3Cpolygon%20points%3D%2760%2C52%20120%2C52%2060%2C104%27%20fill%3D%27%231b3658%27%2F%3E%3Cpolygon%20points%3D%27120%2C52%20120%2C104%2060%2C104%27%20fill%3D%27%231e3c5d%27%2F%3E%3Cpolygon%20points%3D%27120%2C52%20180%2C52%20180%2C104%27%20fill%3D%27%231a3556%27%2F%3E%3Cpolygon%20points%3D%27120%2C52%20120%2C104%20180%2C104%27%20fill%3D%27%231a3556%27%2F%3E%3Cpolygon%20points%3D%27180%2C52%20240%2C52%20180%2C104%27%20fill%3D%27%231a3556%27%2F%3E%3Cpolygon%20points%3D%27240%2C52%20240%2C104%20180%2C104%27%20fill%3D%27%23244461%27%2F%3E%3Cpolygon%20points%3D%27240%2C52%20300%2C52%20300%2C104%27%20fill%3D%27%23244461%27%2F%3E%3Cpolygon%20points%3D%27240%2C52%20240%2C104%20300%2C104%27%20fill%3D%27%23244461%27%2F%3E%3Cpolygon%20points%3D%27300%2C52%20360%2C52%20300%2C104%27%20fill%3D%27%231d3a5b%27%2F%3E%3Cpolygon%20points%3D%27360%2C52%20360%2C104%20300%2C104%27%20fill%3D%27%231c385a%27%2F%3E%3Cpolygon%20points%3D%270%2C104%2060%2C104%200%2C156%27%20fill%3D%27%23203e5c%27%2F%3E%3Cpolygon%20points%3D%2760%2C104%2060%2C156%200%2C156%27%20fill%3D%27%2321405e%27%2F%3E%3Cpolygon%20points%3D%2760%2C104%20120%2C104%20120%2C156%27%20fill%3D%27%23223f60%27%2F%3E%3Cpolygon%20points%3D%2760%2C104%2060%2C156%20120%2C156%27%20fill%3D%27%2321405e%27%2F%3E%3Cpolygon%20points%3D%27120%2C104%20180%2C104%20120%2C156%27%20fill%3D%27%231b3658%27%2F%3E%3Cpolygon%20points%3D%27180%2C104%20180%2C156%20120%2C156%27%20fill%3D%27%23244461%27%2F%3E%3Cpolygon%20points%3D%27180%2C104%20240%2C104%20240%2C156%27%20fill%3D%27%23244461%27%2F%3E%3Cpolygon%20points%3D%27180%2C104%20180%2C156%20240%2C156%27%20fill%3D%27%231b3658%27%2F%3E%3Cpolygon%20points%3D%27240%2C104%20300%2C104%20240%2C156%27%20fill%3D%27%231b3658%27%2F%3E%3Cpolygon%20points%3D%27300%2C104%20300%2C156%20240%2C156%27%20fill%3D%27%231c385a%27%2F%3E%3Cpolygon%20points%3D%27300%2C104%20360%2C104%20360%2C156%27%20fill%3D%27%231c385a%27%2F%3E%3Cpolygon%20points%3D%27300%2C104%20300%2C156%20360%2C156%27%20fill%3D%27%231d3a5b%27%2F%3E%3Cpolygon%20points%3D%270%2C156%2060%2C156%2060%2C208%27%20fill%3D%27%231a3556%27%2F%3E%3Cpolygon%20points%3D%270%2C156%200%2C208%2060%2C208%27%20fill%3D%27%23203e5c%27%2F%3E%3Cpolygon%20points%3D%2760%2C156%20120%2C156%2060%2C208%27%20fill%3D%27%23223f60%27%2F%3E%3Cpolygon%20points%3D%27120%2C156%20120%2C208%2060%2C208%27%20fill%3D%27%231a3556%27%2F%3E%3Cpolygon%20points%3D%27120%2C156%20180%2C156%20180%2C208%27%20fill%3D%27%231a3556%27%2F%3E%3Cpolygon%20points%3D%27120%2C156%20120%2C208%20180%2C208%27%20fill%3D%27%231e3a5f%27%2F%3E%3Cpolygon%20points%3D%27180%2C156%20240%2C156%20180%2C208%27%20fill%3D%27%231d3a5b%27%2F%3E%3Cpolygon%20points%3D%27240%2C156%20240%2C208%20180%2C208%27%20fill%3D%27%231e3c5d%27%2F%3E%3Cpolygon%20points%3D%27240%2C156%20300%2C156%20300%2C208%27%20fill%3D%27%23223f60%27%2F%3E%3Cpolygon%20points%3D%27240%2C156%20240%2C208%20300%2C208%27%20fill%3D%27%23244461%27%2F%3E%3Cpolygon%20points%3D%27300%2C156%20360%2C156%20300%2C208%27%20fill%3D%27%23223f60%27%2F%3E%3Cpolygon%20points%3D%27360%2C156%20360%2C208%20300%2C208%27%20fill%3D%27%231d3a5b%27%2F%3E%3C%2Fsvg%3E"); background-size: 360px 208px; background-repeat: repeat; color: #fff; } /* ★UI改修（2026-06-26）SIDEBAR：左固定サイドバー＋本文の2カラム。横帯ヘッダー／固定フッターは廃止。 幅は300px（商品名「Uriage Design」を明朝で余裕をもって収めるため 220→240→300 に拡幅）。 */ .tsb-sidebar{ position: fixed; top: 0; left: 0; bottom: 0; width: 300px; box-sizing: border-box; display: flex; flex-direction: column; padding: 18px 14px; overflow-y: auto; z-index: 1000; } /* WP管理バー（ログイン時の上部32px）ぶんサイドバーを下げる */ .admin-bar .tsb-sidebar{ top: 32px; } @media screen and (max-width:782px){ .admin-bar .tsb-sidebar{ top: 46px; } } /* 商品名（サイドバー最上部に固定・明朝・タイトルレベル・折り返し禁止） */ .tsb-sb-product{ padding:4px 4px 16px; text-align:center; } .tsb-sb-product a{ display:block; color:#fff; text-decoration:none; font-family:"Hiragino Mincho ProN","Yu Mincho","YuMincho","游明朝","MS PMincho",serif; font-size:1.6rem; font-weight:600; letter-spacing:.02em; line-height:1.2; white-space:nowrap; } /* ロゴマークは商品名から大きく引き下げて離す（上余白を増やす）。 */ .tsb-sb-brand{ text-align:center; padding:40px 6px 16px; border-bottom:1px solid rgba(255,255,255,.14); margin-bottom:14px; } .tsb-sb-logo{ width:84px; height:84px; margin:0 auto 10px; border-radius:12px; overflow:hidden; background:rgba(255,255,255,.10); display:flex; align-items:center; justify-content:center; } .tsb-sb-logo img{ max-width:100%; max-height:100%; display:block; } .tsb-sb-company{ color:#fff; font-weight:700; font-size:.98rem; line-height:1.35; word-break:break-word; } /* ログインアカウント：ラベルと名前を横並び1行、折り返し禁止。 */ .tsb-sb-staffrow{ display:flex; align-items:baseline; justify-content:center; gap:6px; margin-top:10px; white-space:nowrap; } .tsb-sb-stafflabel{ color:rgba(255,255,255,.55); font-size:.72rem; letter-spacing:.04em; flex:0 0 auto; } .tsb-sb-staff{ color:rgba(255,255,255,.92); font-size:.72rem; font-weight:600; flex:0 0 auto; } .tsb-sb-nav{ display:flex; flex-direction:column; gap:4px; } .tsb-sb-link{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; color:rgba(255,255,255,.92); text-decoration:none; font-size:.92rem; line-height:1.2; white-space:nowrap; } .tsb-sb-link:hover{ background:rgba(255,255,255,.10); color:#fff; } .tsb-sb-link.is-active{ background:rgba(255,255,255,.18); color:#fff; font-weight:700; } .tsb-sb-ico{ width:18px; text-align:center; opacity:.85; font-size:.95rem; flex:0 0 auto; } .tsb-sb-settings{ margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.14); } .tsb-sb-setbtn{ width:100%; display:flex; align-items:center; gap:10px; padding:10px 12px; border:none; border-radius:8px; background:transparent; color:rgba(255,255,255,.92); font-size:.92rem; line-height:1.2; cursor:pointer; font-family:inherit; } .tsb-sb-setbtn:hover{ background:rgba(255,255,255,.10); color:#fff; } .tsb-sb-caret{ margin-left:auto; font-size:.7rem; opacity:.8; } .tsb-sb-subnav{ padding:2px 0 2px 0; } .tsb-sb-sublink{ display:block; padding:8px 12px 8px 40px; border-radius:8px; color:rgba(255,255,255,.82); text-decoration:none; font-size:.86rem; line-height:1.2; white-space:nowrap; } .tsb-sb-sublink:hover{ background:rgba(255,255,255,.10); color:#fff; } .tsb-sb-sublink.is-active{ background:rgba(255,255,255,.16); color:#fff; font-weight:700; } .tsb-sb-logout{ margin-top:auto; display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; color:rgba(255,255,255,.9); text-decoration:none; font-size:.9rem; background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.16); } .tsb-sb-logout:hover{ background:rgba(0,0,0,.34); color:#fff; } /* 本文：サイドバーぶん左に寄せる（全画面共通・サイドバー幅300pxと揃える） */ .site-main.has-sidebar{ margin-left: 300px; max-width: none; padding: 16px 24px; box-sizing: border-box; } /* サイドバーが無い画面（ログイン等）は従来どおり全幅 */ .site-main{ max-width: none; margin: 0; padding: 16px 24px; } /* ★PAGETITLE-2026-06-26：全ページ共通のページタイトル（A案＝カードの外・地の上に置く）。 これまで各ページが .tsb-wrap / .heq-customers-head 等でバラバラに出していたタイトルを、 この共通クラスに寄せて位置・サイズ・余白を統一する。サイドバー語彙（顧客管理/案件管理/見積管理/納品管理/請求管理/入金管理/ダッシュボード）に揃える。 */ .tsb-page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin: var(--tsb-gap-top) 0 var(--tsb-gap-title-board); } .tsb-page-head__main{ min-width:0; } .tsb-page-title{ margin:0; font-size:1.5rem; /* 24px：全ページ統一 */ font-weight:700; color:#1a2533; line-height:1.25; } .tsb-page-desc{ margin:6px 0 0; color:#666; font-size:.9rem; line-height:1.5; } .tsb-page-head__actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; align-items:center; } /* ★LAYOUT-2026-06-27：土俵カード（外側の大カード）とガジェットカード（土俵内の小カード）の共通クラス。 全ページの本文は土俵カードで包み、中身をガジェットカードで表現するという基本形に揃える。 間隔はすべて body の CSS変数を参照（数値は1か所で管理）。 */ .tsb-board{ background:#fff; border-radius: var(--tsb-board-radius); box-shadow: var(--tsb-board-shadow); padding: var(--tsb-board-pad); box-sizing:border-box; } .tsb-board + .tsb-board{ margin-top: var(--tsb-board-gap); } /* 土俵を縦に複数並べたときの間隔 */ .tsb-gadget{ background:#fafbfc; border:1px solid #eef0f2; border-radius: var(--tsb-gadget-radius); padding: var(--tsb-gadget-pad); box-sizing:border-box; } /* ガジェットを横に並べるグリッド（件数は各ページで --cols を上書き）。 */ .tsb-gadget-grid{ display:grid; grid-template-columns:repeat(var(--cols,3),1fr); gap: var(--tsb-gadget-gap); } @media (max-width:680px){ .tsb-gadget-grid{ grid-template-columns:1fr; } } /* 本文ラッパー：全ページ共通の左右余白と上下マージン。タイトルと本文の間隔は .tsb-page-head が持つため、ラッパー側の上マージンは0（二重間隔を排除）。 */ .tsb-page-body{ width:100%; box-sizing:border-box; padding:0 var(--tsb-page-pad-x); margin:0 0 var(--tsb-gap-top); } /* ★SORT-2026-06-27：業務切り出しページ共通のソートバー（並び替え／絞り込み）。 リストのスクロール領域（.◯-table-wrap）の外＝土俵の中・テーブルの上に置く。 こうするとリストを縦スクロールしてもソートバーは流れない（ヘッダー固定の思想と一貫）。 全ページがこの1部品を使い回し（案C＝共通土台）、各ページは自分の軸（select の option）だけを差し込む。 サーバ側 GET（?sort=・?staff=）で ORDER BY / WHERE を切り替える（入金管理と同じGET方式に統一）。 */ .tsb-sortbar{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 12px; margin:0 0 var(--tsb-board-gap); } .tsb-sortbar form{ margin:0; display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 12px; } .tsb-sortbar__field{ display:flex; flex-direction:column; gap:5px; } .tsb-sortbar__label{ font-size:.78rem; color:#666; letter-spacing:.02em; } .tsb-sortbar__select, .tsb-sortbar__input{ height:38px; border:1px solid #cfd6dd; border-radius:10px; padding:0 10px; background:#fff; color:#111; font-size:.9rem; min-width:170px; box-sizing:border-box; } .tsb-sortbar__input[type="date"]{ min-width:150px; } .tsb-sortbar__btn{ height:38px; padding:0 16px; border:none; border-radius:10px; background:#2c7be5; color:#fff; font-size:.9rem; cursor:pointer; box-shadow:0 4px 10px rgba(44,123,229,.18); } .tsb-sortbar__btn:hover{ filter:brightness(0.98); } .tsb-sortbar__clear{ height:38px; display:inline-flex; align-items:center; justify-content:center; padding:0 12px; border-radius:10px; text-decoration:none; font-size:.9rem; background:#e9ecef; color:#333; white-space:nowrap; } .tsb-sortbar__clear:hover{ filter:brightness(0.98); } @media (max-width:680px){ .tsb-sortbar__select, .tsb-sortbar__input{ min-width:0; flex:1 1 140px; } } .invoice-list-page h1 { margin-bottom: 16px; } .invoice-list-page table { background: #fff; } .invoice-list-page th, .invoice-list-page td { border: 1px solid #ddd; } .invoice-list-page th { background: #eee; } /* レスポンシブ：狭い画面はサイドバーを上部に畳む（横並び→上帯）。実務は広い画面前提だが事故回避用。 */ @media (max-width:880px){ .tsb-sidebar{ position:static; width:100%; flex-direction:column; bottom:auto; } .admin-bar .tsb-sidebar{ top:0; } .site-main.has-sidebar{ margin-left:0; } }