@charset "UTF-8"; /* ============================================================ 品質カレッジ系 共通レスポンシブ基盤CSS File : responsive-foundation.css Version: v=1 (2026-06-26 初版) Source : QC_RESPONSIVE_AUDIT_FULL_REPORT_20260626.md §6-1 Owner : Qulio合同会社 / sangyo-tech.jp 配置先 : https://sangyo-tech.jp/assets/responsive-foundation.css?v=1 読込位置: 全ページ 先頭（unav.js より前） ------------------------------------------------------------ バージョニング規約: - 内容を変更した場合は ?v=2, ?v=3 と単調増加させる - 全サブドメインで参照側の ?v= も同期更新（_tools/navfix.py相当の手順） - 参考: memory reference_unav_versioning.md ------------------------------------------------------------ 採用ブロック (7+1): 1) 日本語見出しの語中改行防止 (keep-all) 2) img/picture/video/canvas/svg/iframe 安全網 3) .table-wrap 横スクロール対策 4) html/body overflow-x:clip 横スクロール抑止 5) タッチ領域 44px (WCAG 2.5.5 / HIG / MD) 6) :focus-visible 統一 (WCAG 2.4.7) 7) @media print 統一 +) prefers-reduced-motion 軽減（おまけ・破壊力ゼロ） ============================================================ */ /* 1. 日本語見出しの語中改行防止 memory feedback_jp_heading_linebreak.md :where() で詳細度0 → 既存スタイルを壊さない */ :where(h1, h2, h3, h4, .title, .hero h1, .section-title, .card-title) { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; } /* 2. 画像・メディアの安全網 img グローバル max-width:100% が無いページの将来事故防止 （display:block で inline ベースライン下のスキマも消す） */ img, picture, video, canvas, svg, iframe { max-width: 100%; height: auto; display: block; } /* 3. テーブル横スクロール対策（任意ラッパー） 使い方:
...
既存テーブル CSS には触らない（追加のみ） */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; } /* 4. 横スクロール抑止 overflow-x: clip は overflow:hidden と違って sticky/position:fixed を壊さない（モダン版） */ html, body { overflow-x: clip; max-width: 100%; } /* 5. タッチ領域 44px 確保 WCAG 2.5.5 Target Size / Apple HIG / Material Design :where() なので既存 .btn 等の見た目には影響しない */ :where( a.btn, button.btn, .cta a, .cta button, .tab-btn, .nav-toggle, summary, input[type="submit"], input[type="button"] ) { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* 6. フォーカスリング統一 WCAG 2.4.7 Focus Visible / キーボード操作a11y 色は品質カレッジのアクセント橙 (#f5811f) */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid #f5811f; outline-offset: 3px; border-radius: 6px; } /* 7. 印刷スタイル統一 暗背景／CTA／ナビ／フローティング要素を非表示 リンクURL展開でPDF配布時の追跡性UP */ @media print { body { background: #fff !important; color: #000 !important; background-image: none !important; } header, nav, footer, .floatcta, .sitemenu, .navburger, .back-to-top, .btt, .unav, .strip, .cta a.btn { display: none !important; } a { color: #000 !important; text-decoration: underline; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; } .card, section, .sheet, table { break-inside: avoid; background: #fff !important; color: #000 !important; border: 1px solid #999 !important; box-shadow: none !important; } } /* +. アニメーション軽減 (prefers-reduced-motion) 乗り物酔い・前庭障害ユーザ配慮（WCAG 2.3.3） 既存アニメは残しつつ、希望ユーザのみ抑制 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================ END responsive-foundation.css v=1 ============================================================ */