/* * Shared "concept work" notice bar for every page under /works/. * The ONLY file shared between the four concept LPs. * * Markup (place as the first element inside , before the LP header): * *

* コンセプト制作 * これはズオン・クオック・トゥアンによるコンセプト制作（架空のブランド）です。実在の企業・商品・サービスとは関係ありません。 *

* ← ポートフォリオへ戻る *

* * The bar is in normal flow (not fixed), so it causes no layout shift and * never covers the LP's own sticky header. It deliberately uses a neutral * palette that belongs to none of the four brands. */ .concept-bar { background: #1a1f2b; color: #f5f7fa; font-family: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Noto Sans JP", "Yu Gothic Medium", "YuGothic", Meiryo, sans-serif; font-size: 0.8125rem; line-height: 1.6; letter-spacing: 0.02em; position: relative; z-index: 1000; } .concept-bar__inner { max-width: 1200px; margin: 0 auto; padding: 8px clamp(16px, 4vw, 32px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; } .concept-bar__text { margin: 0; flex: 1 1 28em; } .concept-bar__badge { display: inline-block; margin-right: 8px; padding: 1px 8px; border: 1px solid #f5f7fa; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; } .concept-bar__back { color: #ffffff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; } .concept-bar__back:hover { text-decoration-thickness: 2px; } .concept-bar__back:focus-visible { outline: 3px solid #8fb8de; outline-offset: 2px; border-radius: 2px; } @media print { .concept-bar { background: none; color: #000; border-bottom: 1px solid #000; } .concept-bar__badge { border-color: #000; } .concept-bar__back { color: #000; } }