/* ============================================================ 4. 狭幅（≤767px） — 管理画面も公開側と同じ寸法規則に従う ============================================================ */ @media (max-width: 767px) { body { font-size: var(--fs-md); } main { padding: var(--space-16) var(--space-12) var(--space-48); } /* [Fix2, Major-5残り] 素の main セレクタは狭幅の管理画面全ページが 共有している（他ページの余白は変えない）。受講生詳細だけ原本M3の 12px（上下左右とも）にするため、テンプレート側で main の直下に `.cust-detail-page` を付け、:has() でこの画面の main だけを狙う。 base.html は触らない。他の画面の main はこのセレクタにマッチしない （customer_detail.html の1枚だけがこのクラスを出す）。 */ main:has(> .cust-detail-page) { padding: var(--space-12); } /* [Fix2, Major-5残り] .cust-col-main > * / .cust-col-side > * の margin-bottom:12px は列内カード間の隙間を作る仕掛けだが、ページ 最後の要素（cust-col-side の最後のカード）にも掛かり、main の 下端との間に原本に無い +12px を足していた（main側の余白を12pxに 直しても、この分だけ超過が残る）。 */ .cust-col-side > *:last-child { margin-bottom: 0; } /* Task 11（受講生詳細）: 375pxでは概要＋2列を1列に落とし、受講履歴7列・ 似た顧客7列は1件＝1カードに畳む（申し送り §「375pxの寸法体系」 M-3実測）。`cust-` 接頭辞は 05-admin.css と同じ取り決めで、申込一覧・ 行・ボタンの共通語彙とは重ならない。この @media の中であれば場所は 問わないので、末尾側アンカー（.list-table.stacked form[id^="delete-"]）の手前に来るよう冒頭に置く。 */ .cust-columns { display: block; } .cust-col-main, .cust-col-side { display: block; } .cust-col-side { margin-top: var(--space-12); } /* [Fix1, Major-5] 原本 M3 のブロック間 gap は12px（実装は16pxだった）。 */ .cust-col-main > *, .cust-col-side > * { margin-bottom: var(--space-12); } /* 概要カード（.cust-columns の外）も同じ12pxに揃える。.card の既定 margin-bottom:24px は他ページと共有する値なのでここだけ上書きする。 */ .cust-overview { margin-bottom: var(--space-12); } /* [Fix3, Major-1] .card の既定 padding:16px（02-components.css・ 無条件）が、この下の .card-head の余白（8px 12px）・.cust-fields の 余白・.memo-form の余白と二重に掛かっていた。原本 M3 のカードは padding:0 で、代わりに card-head と本文それぞれが自分の余白 （8px 12px）を持つ。概要・事務局メモの2枚だけ375pxで padding を 外す——他ページの素の .card には触れない。 */ .cust-overview, .cust-memo-card { padding: 0; } /* [Fix1, Major-5] カードヘッダの余白。原本 M3 は 8px 12px（実装は .card-head の既定 12px 16px のまま=+8px×5枚）。cust- のカードに 限って上書きする（他ページの .card-head には触れない）。 */ .cust-overview > .card-head, .cust-col-main .card-head, .cust-col-side .card-head { padding: var(--space-8) var(--space-12); } /* [Fix3, Major-1] margin-top:12px から padding:8px 12px に変更。 .cust-overview を padding:0 にした代わりに、.cust-fields 自身が 原本の本文div（padding:8px 12px）ぶんの余白を持つ——card-head の border-bottom から8px（原本と同値）、左右12px（card-headと同じ 横位置）。 */ .cust-fields { display: block; padding: var(--space-8) var(--space-12); } /* 768px以上側は @media(min-width:768px) の中で display:grid を宣言して いるので、狭幅では効かない。ここで grid-template-columns だけ 上書きしても display が block のままでは並ばない（実機で確認： ラベルと値が隙間なく連結して見えた）。狭幅側にも display:grid を 明示する。 [2026-09-12 依頼者指摘] 原本 M3 の 4px 0 に合わせて padding を 詰めていたが、行の切れ目が線で見えず「かな・メール…」の一覧が どこで区切れるか分からなかった（実機確認）。PCの .cust-field （05-admin.css）と同じ区切り線を付け、padding も 8px 0 に戻す （4px×9項目の超過対策より、行の可読性を優先する依頼者裁定）。 */ .cust-field { display: grid; grid-template-columns: 88px minmax(0, 1fr); padding: var(--space-8) 0; border-bottom: 1px solid var(--rule-2); } /* [Fix1, Major-3] 原本 M3 のヘッダは「かな・ローマ字」を出さず、 「累計支払額」ラベルも無い（金額だけを小さく出す）。375pxで2行に 折れていた分（+29.69px）を消す。 [2026-09-12] .cust-overview を付けて概要カードの見出しに限定した。 顧客一覧（customers.html）が同じ .cust-kana を氏名の下のふりがなに 使い始めたため、無条件のままだと一覧側も375pxでふりがなが消える （一覧はここで隠す理由が無い——原本M3が対象にしているのは詳細ページの ヘッダーだけ）。 */ .cust-overview .cust-kana { display: none; } /* [2026-09-12] 顧客一覧の検索欄は狭幅で行幅いっぱいに。.filters の input[type="search"] は width: auto（02-components.css）で内容幅に なり、375px では placeholder（氏名・かな・メール・電話・所属）が 途中で切れていた（実機で確認）。検索ボタンは次の行に落ちる。 セレクタを .filters input[type="search"] にしないのは、その規則には width: auto と margin: 0 を必ず書く検査（02-components.css の規則を 守るため）があり、ここでは幅を flex で決めたいから。 */ .filters-search { flex: 1 1 100%; } /* [Fix1, 依頼者裁定] 概要カードの hint（「受講済」の説明）は原本 C/M3どちらにも無い。375pxでは非表示（情報は削除しない。テストは HTMLソースに残っていることだけを見る）。 */ .cust-overview-hint { display: none; } /* [Fix1, Major-3] 事務局メモの「最終更新」「配慮事項」説明文は原本 M3に無い。 */ .cust-memo-hint { display: none; } /* [Fix1, Major-5] 事務局メモの textarea は原本 M3 の height:64px （実装は rows="3" のまま≒87px）。 */ .cust-memo-textarea { height: 64px; } /* [Fix3, Major-1] .cust-memo-card を padding:0 にした代わりに、本文 （.memo-form）が原本の本文divぶんの左右12px・下8pxを持つ。上は .memo-form の既定 margin-top:8px（06-settings-tabs.css、_memo_editor.html と共有）がそのまま原本の8pxと一致するので触らない。.memo-form 自体は 共有語彙なので、この画面の cust-memo-card の中に限って上書きする。 */ .cust-memo-card .memo-form { padding: 0 var(--space-12) var(--space-8); } /* 表の見出し行は狭幅では出さない（1件＝1カードの中に同じ情報を出す）。 */ .cust-hist-head, .cust-dup-head { display: none; } /* [Fix5] 原本M3の受講履歴行はmarginを持たず、行間は罫線(border)だけで 区切る（orig_M3実測: 隣接行の rect は完全に接し、gap=0。この罫線 1pxどうしが触れ合う分だけが視覚上の行間になる）。ここまでの margin: var(--space-8)（前後8px、隣接兄弟の margin collapse で 実質8px）は原本に無い縦の余白で、3件中2箇所の行間ぶん高さを 押し上げていた。左右の var(--space-12) は「1件＝1カードの箱」を カード内側から少し離す原本にない意匠(Fix4のコメント参照)として 残し、縦だけ0にする。 */ .cust-hist-row { display: block; border: 1px solid var(--rule); border-radius: var(--radius); margin: 0 var(--space-12); background: var(--surface); } /* [Fix3, Major-3] padding-bottom を既定では持たせない。.cust-hist-memo が続く行では、.cust-hist-grid 自身の下端余白(8px)と .cust-hist-memo の下端余白(8px)が二重に掛かっていた（原本 M3 は行全体を1つの padding:8px 12px で包み、末尾の余白は1回だけ）。メモが無い行 （.cust-hist-grid がその行の最後の要素になる）だけ :last-child で 8pxを復元する。 */ .cust-hist-grid { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); padding: var(--space-8) var(--space-12) 0; } .cust-hist-grid:last-child { padding-bottom: var(--space-8); } /* [D4, 2026-09-12 依頼者指摘] 375pxのカードは「¥19,800　¥19,800　—」と 数字だけが並び、何の額か分からない（実機確認）。列見出し （.cust-hist-head）は狭幅では出さないため、金額3列の span だけ data-label 属性の値を小さく前置きする。PC側（05-admin.css）には 何も足さない——列見出しが既にある。 */ .cust-hist-grid [data-label]::before { content: attr(data-label) " "; color: var(--ink-2); font-size: var(--fs-xs); } /* [2026-09-12 実機確認] 集計の抽斗を開くと「申込3件」のように項目名と 数字がくっついて読めなかった（.stat-item 群の見た目は 05-admin.css の PC 幅にしか無い）。狭幅は縦のタイルにせず、項目名（小・薄い）＋ 数字（太字）を横に並べて隙間を空ける。 */ .stat-item { display: inline-flex; align-items: baseline; gap: var(--space-4); } .stat-k { font-size: var(--fs-xs); color: var(--ink-2); } .stat-v { font-weight: 700; font-variant-numeric: tabular-nums; } /* 抽斗の注記（「取り消せません。システム外の記録のみ」）は PC 幅の 規則しか無く、狭幅では summary の太字を継承して本文のように見えた （実機確認）。PC と同じ小さく薄い文字にする。 */ .cust-drawer-note { font-size: var(--fs-xs); font-weight: 400; color: var(--ink-2); } /* 抽斗の中身（削除フォーム・注記）が狭幅ではカードの縁に張り付いていた （実機確認）。PC（05-admin.css）と同じ左右の余白を持たせる。 */ .cust-drawer-body { padding: 0 var(--space-12) var(--space-12); } .cust-hist-memo { display: block; padding: 0 var(--space-12) var(--space-8); } .cust-hist-memo span:first-child { display: none; } /* [Fix4, C] 375pxの「1件＝1カード」の箱（.cust-hist-row/.cust-dup-grid） はどの行にも上下 margin: var(--space-8) を持つ。原本M3の対応する行は margin を持たず、行間はカード内側の罫線（border-bottom）だけで 区切る——最初の行の「上」・最後の行の「下」の margin は、カード見出し の罫線・次の要素（抽斗・注記）との間に原本に無い余白を足すだけの 二重取りになっていた（375px高さの残差の一部）。構造依存の :first-child/:last-child はテンプレート側の並び（見出し行や 注記が同じ親の中で前後に来る）で当たり方がずれるため使わず、 テンプレート側で loop.first/loop.last から付けた明示的な修飾 クラスで狙う。 */ /* .cust-hist-row/.cust-dup-grid 自身の margin ショートハンドと詳細度 を揃えると「後に書いたほうが勝つ」だけの関係になり、ファイル内の 定義順（.cust-dup-grid はこの下にまだ出てくる）に依存して黙って 効かなくなる（実測: 複合セレクタにする前は .cust-dup-grid 側だけ margin が残っていた）。両方のクラスを重ねて詳細度で勝たせる。 */ .cust-hist-row.cust-row-first, .cust-dup-grid.cust-row-first { margin-top: 0; } .cust-hist-row.cust-row-last, .cust-dup-grid.cust-row-last { margin-bottom: 0; } /* [Fix1, Major-3] 「メールか氏名が一致します」は原本M3に無い。 */ .cust-dup-hint { display: none; } .cust-dup-grid { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); border: 1px solid var(--rule); border-radius: var(--radius); margin: var(--space-8) var(--space-12); padding: var(--space-8) var(--space-12); } /* [Fix1, Major-4/M-6] 原本M3は候補カード1件ごとにボタン直横へ短文の 注記を置く（カード末尾の1本の長文ではない）。375pxではカード末尾の .cust-dup-note を隠し、各カードの .cust-dup-warn を出す。 */ .cust-dup-note { display: none; } /* [Fix3, Major-2] 上のコメントが言う「ボタン直横」を display:block が 裏切っていた——.cust-dup-warn と
（統合するボタン）が別ブロック として縦に積み、警告文の行（約17px）とその margin-bottom(4px)ぶん 原本より高くなっていた。原本 M3 は `display:flex;align-items:center;gap:8px`（注記＋ボタンを同じ行に 並べ、ボタンだけ margin-left:auto で右へ）。同じ形に直す。 */ .cust-dup-action { display: flex; align-items: center; gap: var(--space-8); width: 100%; } .cust-dup-warn { display: block; font-size: var(--fs-xs); color: var(--ink-2); min-width: 0; } .cust-dup-action form { margin-left: auto; flex-shrink: 0; } .cust-align-r { text-align: left; } /* タップ領域を44px確保する。ui-reviewer が測る集合と同じにすること。 ずれると実装が正しくても指摘が出続ける。 .attendee summary / .cal-card を追加（Task 18）。.attendee summary は padding: 6px 0 だけだと行高が約33pxで44pxに届かない（Task 13 申し送り）。 [Fix2, Major-A] summary.card-head を追加（送信済みメール／顧客情報を 編集／この顧客の操作の3本）。Major-5 で .card-head の padding を 12px 16px→8px 12px に落とした結果、この3本だけ41.80pxに割れていた （ui-reviewer.md の ADMIN_TAP・05-admin.css の24px群と3箇所同期）。 [2026-09-12] .course-chip（顧客一覧「申込中」のコース名チップ）を リンク化した際、この集合にそのまま含まれると 22px のチップが 44px まで引き伸ばされ、丸ピルが縦長の楕円に潰れて見えた（実装時レビュー 指摘）。文中の複数個が並ぶ参照用チップで、WCAG 2.5.8 の「文中の リンク」に相当する扱いにする——.btn-quiet/.seg a と同じ理由で ここから除外し、チップ自体の高さ（24px。static/02-components.css） に任せる。 */ button, .btn, .tab, .topbar a, .brand, main a:not(.btn-quiet):not(.seg a):not(.course-chip), select:not(.filters select), textarea, .entry summary, input:not([type="hidden"]):not([type="checkbox"]), label.check, .attendee summary, .cal-card, .check-tap, .cust-drawer-summary, .notice-done summary, summary.card-head { min-height: 44px; } /* [2026-09-12 依頼者決定] 副ボタン（.btn-quiet）・切り替え（.seg a）・ 絞り込み帯のセレクト（.filters select）は 44px 群から外し、36px にする。 スマホの開催回一覧・カレンダーで「切り替え・月送り・担当などのボタンが 大きすぎる」との指摘を受け、依頼者が「もっと小さくてよい」と明示した。 36px は WCAG 2.2 SC 2.5.8（24px）を満たし、Apple HIG の 44pt は 主操作（.btn・button・ナビ）にだけ残す。min-height でなく height で 書くのは、375px の min-height を 48/44 の2段に固定している検査 （test_375pxのタップ領域は48pxと44pxの2段のみで3段目が無い）の 趣旨——「タップ領域の段を増やさない」——を保つため。これは タップ領域の拡張ではなく、依頼者が決めた部品そのものの高さ。上の 44px 群・05-admin.css の 24px 群・.claude/agents/ui-reviewer.md の ADMIN_TAP は同じ集合で同期 している（tests/test_style_guard.py）ので、3箇所を同時に直した。 `select:not(.filters select)` は、帯のセレクトだけを 36px に落とし、 フォームの入力用セレクトは 44px のまま残すための除外。`main a:not(...)` も同じ理由——`main a`（詳細度 0,1,1）が .btn-quiet（0,1,0）に勝って 44px へ戻してしまうのを、集合の側で除く。 */ .btn-quiet, .filters select { height: 36px; } /* .seg a は 02-components.css で body:not(.public) .seg a（詳細度 0,2,2） が 30px を持つので、同じ詳細度で上書きする。枠1px×2 を足して 36px。 */ body:not(.public) .seg a { height: 34px; } button, .btn, .btn-quiet, .tab, .seg a, .topbar a, .brand, main a { display: inline-flex; align-items: center; justify-content: center; /* 折り返させない。inline-flex にすると幅が内容より縮み、 「開催回」が「開催 / 回」のように語中で折れる。 */ white-space: nowrap; } /* 修正ラウンド2（rereview4 M-1残り）: .check-tap は可視文字を .sr-only にしたため幅がチェックボックス（13px）ぶんしか残らず、 44×21pxだった（旧 label.check の 44×47px/44×125px から幅だけ 縮んでいた）。上の集合と同じ44pxを幅にも与える。 */ .check-tap { min-width: 44px; } /* 密度設計（2026-09-10）階層1: 375px では日常操作を48pxまで拡張する （設計表）。