/* ============================================================================= モニコム メインスタイルシート（SWELL子テーマ版） カラーシステム・コンポーネント・レイアウト・SWELLオーバーライドを定義 ============================================================================= */ /* ----------------------------------------------------------------------------- 0. SWELL 子テーマ統合 SWELL 2.10.x のデフォルトデザインをモニコムカラーで上書きする ----------------------------------------------------------------------------- */ /* ── 0-1. SWELL ヘッダーオーバーライド ── */ /* ヘッダー背景・ボーダー */ #header, .l-header { background-color: #ffffff !important; border-bottom: 1px solid #E0E0E0 !important; box-shadow: none !important; } #header.is-scrolled, .l-header.is-scrolled { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important; } /* ロゴ文字カラー */ .c-headLogo a, .c-headLogo__txt, .c-headLogo .c-headLogo__txt { color: #4A90D4 !important; font-weight: 700; } /* グローバルナビ リンク */ .c-nav__link, .c-nav > li > a, .c-gnav__link { color: #333333 !important; font-weight: 500; font-size: 0.9375rem; } .c-nav__link:hover, .c-nav > li > a:hover, .c-gnav__link:hover, .c-nav__link.is-current, .c-nav > li.current-menu-item > a { color: #4A90D4 !important; } /* ナビ下線（アクティブ） */ .c-nav > li.current-menu-item > a::after, .c-nav__link.is-current::after { background-color: #4A90D4 !important; } /* ヘッダー内CTAボタン（あれば） */ .l-header .c-btn, .l-header .p-headerBtn { background-color: #FF7A2F !important; color: #ffffff !important; border-color: #FF7A2F !important; } /* ハンバーガーボタン */ .p-hbg__line, .p-hbg span { background-color: #4A90D4 !important; } /* ── 0-2. SWELL フッターオーバーライド ── */ #footer, .l-footer { background-color: #1A3A5C !important; color: rgba(255, 255, 255, 0.6) !important; } .l-footer a, .l-footer p, .l-footer li, .l-footer address { color: rgba(255, 255, 255, 0.6) !important; } .l-footer a:hover { color: #ffffff !important; } .l-footer h2, .l-footer h3, .l-footer h4, .l-footer .widgettitle, .l-footer .widget-title { color: #ffffff !important; font-size: 1rem; font-weight: 700; margin-bottom: 1.25rem; } /* フッター著作権エリア */ .l-footerCopy, .l-footer__copy, #footer .l-footerCopy { border-top: 1px solid rgba(255, 255, 255, 0.1) !important; color: rgba(255, 255, 255, 0.4) !important; font-size: 0.75rem; } /* フッタービジェット区切り線 */ .l-footer .widget { border-color: rgba(255, 255, 255, 0.1) !important; } /* ── 0-3. SWELL コンテンツエリア調整 ── */ /* * SWELLのヘッダー分上部余白はSWELLが JS/CSS で自動制御するため * .site-main に独自のpadding-topは設定しない */ .site-main { padding-top: 0; } /* * フロントページではSWELLのMV・記事スライダーを非表示 * monicom の section-hero.php を使用するため * * ※ SWELL 2.x はbodyクラスを ではなく #body_wrap に付与する * そのため body.monicom-home ではなく .monicom-home で指定する */ .monicom-home .p-mainVisual, .monicom-home .p-mainVisual__wrap, .monicom-home .p-postSlider, .monicom-home .p-postSlider__wrap, .monicom-home #post_slider, .monicom-home .l-topTitleArea { display: none !important; } /* * SWELL 2.x の実際のDOM構造: * #body_wrap.monicom-home > #content.l-content.l-container > #main * * トップページでは #content を全幅に解放する * SWELL custom CSS の ".top #content { padding-top: 4em }" を打ち消す */ .monicom-home #content, .monicom-home .l-content { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; /* SWELL の .-sidebar-on .l-content グリッドレイアウトを解除 */ display: block !important; grid-template-columns: unset !important; } /* トップページ：SWELLのサイドバー・上部余白を解除 * SWELL実際のDOM: