/**
 * /brand-omotehub/ おもてハブ ブランドガイドライン 専用CSS（post 24221）
 *
 * Phase 1: post 24221 本文の <style> から移設（2026-07-17）
 * ブロックエディタ互換化のため本文から除去し、ここへ集約した。
 * 計画書: docs/20260717_omotenashi_ブロックエディタ互換化計画_v1.md
 *
 * 【重要】内容は逐語的に維持している（見た目を 1px も変えないため）。
 *
 * 【ページ別ファイルに分けている理由】
 * /brand/ と /brand-omotehub/ はどちらも #om-brand スコープの自己完結した
 * ミニデザインシステムだが、#om-brand .cover / .wrap / .foot / .cover h1 など
 * 5 セレクタが「同名で中身が違う」。共通ファイルに統合すると相互に上書きし合って
 * 両ページとも壊れる。よって統合せず、ページ単位で enqueue する。
 *
 * 【変数について】このページの CSS は --navy / --dark / --gold 等を #om-brand
 * スコープ内で自己定義しており、サイト共通の --om-* には依存しない。
 * ※ 新規 CSS を書く場合はサイト共通の --om-* を使うこと
 *   （docs/design-system/01_design-tokens.md 参照）
 */

#om-brand h1,#om-brand h2,#om-brand h3,#om-brand h4,#om-brand h5{background:none!important;border:0;padding:0;text-indent:0;box-shadow:none!important;border-radius:0!important;}
#om-brand h1::before,#om-brand h1::after,#om-brand h2::before,#om-brand h2::after,#om-brand h3::before,#om-brand h3::after,#om-brand h4::before,#om-brand h4::after{content:none!important;display:none!important;}
#om-brand{--navy:#1A5276;--dark:#0E2F44;--gold:#B8860B;--sumi:#2C2C2A;--silver:#E8ECF0;--cta:#D0353A}
#om-brand *{margin:0;padding:0;box-sizing:border-box}
#om-brand{font-family:'Noto Sans JP',sans-serif;color:#2C2C2A;background:#fff;line-height:1.9;font-size:14px}
#om-brand .cover{background:var(--dark);color:#fff;padding:70px 0 56px;border-bottom:3px solid var(--gold)}
#om-brand .cover-inner{max-width:980px;margin:0 auto;padding:0 40px}
#om-brand .cover .kicker{font-size:13px;letter-spacing:.3em;color:var(--gold);margin-bottom:18px}
#om-brand .cover h1{font-family:'Shippori Mincho',serif;font-size:40px;font-weight:600;line-height:1.4;margin-bottom:10px}
#om-brand .cover .sub{font-size:15px;color:#B9C6D0;letter-spacing:.05em}
#om-brand .cover .logo{margin:36px 0 8px;width:380px}
#om-brand .cover .meta{font-size:12.5px;color:#8FA3B3;margin-top:30px;border-top:1px solid #2a4a60;padding-top:16px}
#om-brand .wrap{max-width:980px;margin:0 auto;padding:0 40px}
#om-brand .toc{background:var(--silver);padding:34px 40px;margin:0}
#om-brand .toc-in{max-width:980px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:repeat(2,1fr);gap:6px 40px}
#om-brand .toc h3{grid-column:1/-1;font-size:13px;color:var(--navy);letter-spacing:.2em;margin-bottom:10px}
#om-brand .toc a{font-size:13.5px;color:#3a4a58;text-decoration:none;padding:5px 0;border-bottom:1px dotted #c5cdd5;display:flex;justify-content:space-between}
#om-brand .toc a:hover{color:var(--cta)}
#om-brand .toc a .n{color:var(--gold);font-weight:700;margin-right:10px}
#om-brand section{padding:54px 0;border-bottom:1px solid #eee}
#om-brand .secnum{font-size:12px;letter-spacing:.25em;color:var(--gold);font-weight:700}
#om-brand h2{font-family:'Shippori Mincho',serif;font-size:25px;color:var(--navy);font-weight:600;margin:4px 0 8px}
#om-brand .dek{font-size:13.5px;color:#5A6270;margin-bottom:26px;max-width:760px}
#om-brand h3.sub{font-size:14px;color:var(--dark);font-weight:700;margin:26px 0 12px;padding-left:12px;border-left:3px solid var(--gold)}
#om-brand .decomp{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--silver);border-radius:12px;padding:28px;justify-content:center}
#om-brand .dc{text-align:center;background:#fff;border-radius:10px;padding:18px;min-width:170px}
#om-brand .dcsvg svg{height:90px;width:auto;max-width:240px}
#om-brand .dclab{font-size:11.5px;color:#5A6270;margin-top:10px;line-height:1.6}
#om-brand .dclab b{color:var(--navy);font-size:12.5px}
#om-brand .plus{font-size:24px;color:var(--gold);font-weight:700}
#om-brand .vgrid{display:flex;gap:16px;flex-wrap:wrap}
#om-brand .vgrid.col2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:700px}
#om-brand .vgrid.col2 .vbox{width:auto}
#om-brand .vbox{background:#fff;border:1px solid #E3E7EB;border-radius:10px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:10px}
#om-brand .vbox.d{background:var(--dark);border-color:var(--dark)}
#om-brand .vcap{font-size:11.5px;color:#7a8693}
#om-brand .vcap.w{color:#cdd6df}
#om-brand .lk{width:330px;height:auto}
#om-brand .st{height:170px;width:auto}
#om-brand .ic{width:96px;height:96px}
#om-brand .swatch{display:flex;gap:18px;align-items:center;padding:14px 0;border-bottom:1px solid #eee}
#om-brand .chip{width:84px;height:84px;border-radius:10px;border:1px solid #ddd;flex-shrink:0}
#om-brand .swinfo b{color:var(--navy);font-size:14px}
#om-brand .vals{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:#5A6270;margin:4px 0}
#om-brand .use{font-size:12px;color:#7a8693}
#om-brand .clear{width:560px;height:auto;background:#fff;border:1px solid #eee;border-radius:8px}
#om-brand .csnote{font-size:12.5px;color:#5A6270;margin-top:12px}
#om-brand .sizerow{display:flex;gap:40px;align-items:flex-end;flex-wrap:wrap;background:var(--silver);border-radius:12px;padding:28px}
#om-brand .sizeitem{text-align:center}
#om-brand .sizeitem svg{display:block;margin:0 auto 8px}
#om-brand .sz-lk{width:160px}
#om-brand .sz-ic{width:32px}
#om-brand .sizecap{font-size:12px;color:#5A6270}
#om-brand .sizecap b{color:var(--navy)}
#om-brand .bggrid, #om-brand .nggrid{display:flex;gap:16px;flex-wrap:wrap}
#om-brand .bgcell, #om-brand .ngcell{width:300px}
#om-brand .bgbox{border-radius:10px;padding:24px;display:flex;align-items:center;justify-content:center;border:1px solid #E3E7EB}
#om-brand .bglk{width:230px;height:auto}
#om-brand .okmark{color:#2e7d4f;font-weight:700;font-size:12.5px;margin-top:8px}
#om-brand .ngmark{color:var(--cta);font-weight:700;font-size:12.5px;margin-top:8px}
#om-brand .ngbox{position:relative;background:#fff;border:1px solid #E3E7EB;border-radius:10px;padding:24px;height:130px;display:flex;align-items:center;justify-content:center;overflow:hidden}
#om-brand .ngwrap{display:flex;align-items:center;justify-content:center}
#om-brand .nglk{width:200px;height:auto}
#om-brand .ngx{position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(45deg,transparent calc(50% - 1.5px),rgba(208,53,58,.55) calc(50% - 1.5px),rgba(208,53,58,.55) calc(50% + 1.5px),transparent calc(50% + 1.5px)),
 linear-gradient(-45deg,transparent calc(50% - 1.5px),rgba(208,53,58,.55) calc(50% - 1.5px),rgba(208,53,58,.55) calc(50% + 1.5px),transparent calc(50% + 1.5px))}
#om-brand .nglab{color:var(--cta);font-weight:700;font-size:12.5px;margin-top:8px}
#om-brand table.spec{border-collapse:collapse;width:100%;max-width:760px;font-size:13px}
#om-brand table.spec th, #om-brand table.spec td{border:1px solid #E3E7EB;padding:9px 12px;text-align:left}
#om-brand table.spec th{background:var(--silver);color:var(--navy)}
#om-brand .fmt{font-family:ui-monospace,monospace;font-size:12px}
#om-brand pre.code{background:#0E2F44;color:#cdd6e6;padding:14px 18px;border-radius:8px;font-size:12.5px;overflow-x:auto;line-height:1.7;font-family:ui-monospace,Menlo,monospace}
#om-brand code{background:#eef2f7;padding:1px 6px;border-radius:4px;font-family:ui-monospace,monospace;font-size:12px;color:var(--navy)}
#om-brand .foot{background:var(--dark);color:#B9C6D0;padding:40px;font-size:12px;text-align:center;line-height:1.9}
#om-brand .foot b{color:#fff}
@media(max-width:680px){#om-brand .toc-in{grid-template-columns:1fr}
#om-brand .cover{padding:50px 0}
#om-brand .cover-inner{padding:0 22px}
#om-brand .wrap{padding:0 22px}}
#om-brand .zipbtn{display:inline-block;background:var(--cta);color:#fff;text-decoration:none;font-weight:700;padding:14px 26px;border-radius:8px;font-size:14px}
#om-brand .zipbtn:hover{background:#A82328}
#om-brand .dlx{display:inline-block;color:var(--navy);font-weight:700;text-decoration:none;border:1px solid var(--navy);padding:2px 12px;border-radius:5px;font-size:12px;margin:2px}
#om-brand .dlx:hover{background:var(--navy);color:#fff}
#om-brand ul.terms{max-width:760px;padding-left:20px}
#om-brand ul.terms li{margin:8px 0}
#om-brand{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;max-width:100vw}