/* news.css — お知らせ・導入事例ページ専用スタイル * * css/style.css（PRECSS: bl_ / el_ / ly_）は変更しない。 * ここでは Task 6・7 が生成する news/ と case/ のマークアップに対応するクラスだけを追加する。 * html は font-size:62.5%（1rem=10px）だが、メディアクエリの em/rem は * ブラウザ初期値（16px）基準になるため、48rem は既存の 48em と同じ 768px を指す。 */ :root { /* カテゴリバッジの色。白文字（#fff）とのコントラスト比 4.5:1 以上を確保している * （case 4.74 / feature 5.72 / service 4.82 / partner 5.30 / notice 4.66）。 * case はブランドカラー #1B85B3 を基準に、白文字でも読めるようわずかに濃くした。 * feature は同じ青系だが case よりも深いトーンにして明度差で見分けられるようにしている。 */ --news-case: #197BA6; --news-feature: #0E6E93; --news-service: #22815B; --news-partner: #6D5DBE; --news-notice: #66777F; --news-brand: #1B85B3; --news-brand-light: #29ABE2; /* ブランドカラー #1B85B3 は白背景・14px文字だと 4.16:1 で AA(4.5:1) 未達のため、 * 少し濃くした色を用意する（白文字向けではなく文字色として使う）。コントラスト比 5.72:1。 * 変数名はホバー用として作られたが、M3 対応で本文中のリンク（.bl_newsSource a / * .bl_article_company a / .bl_articleBody a / .bl_articleSource a）の通常状態にも * 適用し、ホバーと共用している（変数名のリネームは影響範囲が広いため見送った）。 */ --news-brand-hover-text: #0E6E93; } /* ========================================================================== ヘッダー配色の上書き（白背景・黒文字化）トップページ / /download/ / /inquiry/ はヘッダーの下に緑の帯を敷いて白いナビをその上に載せる作りだが、生成ページ（news/ と case/、および記事ページ）にはその帯が無いため、素のヘッダーは白背景に白文字（ロゴ fill:white）になり不可視になる。同じ問題は /status/ に先行して存在し、css/status.css の冒頭でヘッダー背景を白固定・ロゴとPCメニュー文字を黒/ブランドグリーンに上書きして解決している。ここではその上書きを news.css にも複製する。 news.css はトップページ（index.html）からも読み込む（お知らせ枠のカード・バッジ表示に必要なため）が、トップページのヘッダーは緑のヒーローの上に白文字で載る設計であり、生成ページと同じ白背景・黒文字化を適用すると壊れる。そのためこのヘッダー上書きブロックのセレクタだけ `.subpage` 配下に限定し、`` を持つ生成ページ（news/ と case/、および記事ページ）にのみ効くようにする。カード・バッジ・記事本文・パンくず・絞り込み・ページャーなど、この節より下のスタイルはページ種別を問わず必要なため `.subpage` では絞り込まない。ハンバーガーメニュー用の .bl_mainNavigation_bar / _text / _toggle の上書きも同様に `.subpage` 配下に限定する（トグルボタン自体はモバイル幅でのみ表示されるよう style.css 側で制御されているため、デスクトップ幅には影響しない）。 ========================================================================== */ /* ヘッダー背景を白固定 */ .subpage .bl_header, .subpage .bl_header.is_active, .subpage .bl_header.js_active, .subpage .bl_header.fixed, .subpage .bl_header.is_scroll, .subpage .bl_header.js_scroll { background: #fff !important; } /* 上部説明文 */ .subpage .bl_header_logo .el_logo_description, .subpage .bl_header_logo .el_logo_description path { fill: #000 !important; } /* matocaロゴ */ .subpage .bl_header_logo .el_logo_name, .subpage .bl_header_logo .el_logo_name path, .subpage .bl_header_logo .el_logo_background { fill: #70b842 !important; } /* マトカ文字 */ .subpage .bl_header_logo .el_logo_kana, .subpage .bl_header_logo .el_logo_kana path { fill: #fff !important; } /* ロゴ固定 */ .subpage .bl_header_logo, .subpage .bl_header_logo * { opacity: 1 !important; visibility: visible !important; filter: none !important; } /* PCメニュー文字 */ .subpage .bl_mainNavigation_link, .subpage .bl_mainNavigation_english { color: #000 !important; } /* ハンバーガー線を黒固定 */ .subpage .bl_mainNavigation_bar { background: #000 !important; } /* MENU文字を黒固定 */ .subpage .bl_mainNavigation_text, .subpage .bl_mainNavigation_text__close { color: #000 !important; } /* ボタン自体の透過対策 */ .subpage .bl_mainNavigation_toggle { opacity: 1 !important; } /* ========================================================================== パンくずリスト news/case のテンプレートは