/* ============================================================ 平和テクノシステム 共通グローバルナビ CSS v4 ------------------------------------------------------------ 目的: - 既存ページの header#header / nav#gnav などの指定と混ざらないよう、 今回の共通ナビ専用ID・クラスだけで制御します。 - 既存CSSに上書きされにくいよう、#htn-top-fix 配下に限定して 強めに指定しています。 重要: - 共通ナビ内では、旧IDの #header / #gnav / #global-nav / #mobile-head / #nav-toggle を使わないでください。 - HTML側は以下の専用構造にしてください。 #htn-top-fix .htn-site-header .htn-top-head .htn-mobile-head .htn-nav-toggle .htn-global-nav .htn-global-nav-list .htn-sub-menu - このCSSは、各ページの既存CSSを読み込んだ後、直前で読み込むのが安全です。 サイズ設計: - PC表示時の固定ヘッダー全体 : 136px - ロゴ・問い合わせボタン部分 : 84px - グローバルナビ部分 : 52px - 本文側の上余白 : 140px（影の分を含める） ============================================================ */ /* ============================================================ 色変更用ブロック ------------------------------------------------------------ 基本方針: - ナースコール階層以外 : 透明背景 + 黒文字 - ナースコール階層 : 指定済み配色 YuiコールTOP : 透明 Yuiコールの特長 : 青 Yuiコールについて : 透明 会社案内・採用情報 : 青 ナースコール導入事例 : ピンク 機器・システム : 透明 お問合せ : 透明 色を変える場合: - 青やピンクを濃くしたい場合は rgba() の4つ目の値を大きくします。 例）0.42 → 0.60 - 透明メニューのhover色は --htn-transparent-hover を変更してください。 - プルダウンのhover色は --htn-submenu-hover を変更してください。 ============================================================ */ :root { --htn-header-width: 1200px; --htn-fixed-height-pc: 136px; --htn-header-height-pc: 84px; --htn-nav-height-pc: 52px; --htn-content-offset-pc: 140px; --htn-mobile-height: 56px; /* ナースコール階層の色 */ /* ナースコール階層の色 前回作成したナースコール用CSS v3 の色味を再現しています。 rgba() の4つ目の値を大きくすると濃く、小さくすると bg.png がより透けます。 */ --htn-nurse-blue: rgba(39, 162, 245, 0.72); --htn-nurse-blue-hover: rgba(19, 132, 214, 0.82); --htn-nurse-pink: rgba(241, 0, 73, 0.70); --htn-nurse-pink-hover: rgba(209, 0, 67, 0.82); /* 透明メニュー／通常ページ群のhover色 透明背景のメニューも、マウスオーバー時は青メニューと同じ濃い青に統一します。 */ --htn-transparent-hover: var(--htn-nurse-blue-hover); /* 通常ページ群のhover色 ナースコール以外の階層も、hover時は同じ濃い青にします。 */ --htn-default-hover: var(--htn-nurse-blue-hover); /* プルダウンメニューのhover色 */ --htn-submenu-hover: #d9ecff; --htn-submenu-hover-text: #004f7a; /* トップナビ左右の区切り線。前回は点線でしたが、今回はグレー実線に統一。 */ --htn-nav-border-color: #A7A7A7; /* ヘッダー下部の影。通常表示・スマホ表示の両方に適用 */ --htn-shadow: 0 3px 7px rgba(0, 0, 0, 0.24); --htn-shadow-line: linear-gradient(to bottom, rgba(0,0,0,0.20), rgba(0,0,0,0.07), rgba(0,0,0,0)); } html { scroll-padding-top: var(--htn-content-offset-pc) !important; } body.htn-unified-nav-enabled { padding-top: var(--htn-content-offset-pc) !important; } /* ============================================================ 共通リセット: #htn-top-fix 配下だけに限定 ============================================================ */ body.htn-unified-nav-enabled #htn-top-fix, body.htn-unified-nav-enabled #htn-top-fix * { box-sizing: border-box !important; } body.htn-unified-nav-enabled #htn-top-fix ul, body.htn-unified-nav-enabled #htn-top-fix ol, body.htn-unified-nav-enabled #htn-top-fix li, body.htn-unified-nav-enabled #htn-top-fix p, body.htn-unified-nav-enabled #htn-top-fix h1, body.htn-unified-nav-enabled #htn-top-fix h2, body.htn-unified-nav-enabled #htn-top-fix h3 { margin: 0 !important; padding: 0 !important; list-style: none !important; } body.htn-unified-nav-enabled #htn-top-fix a { text-decoration: none !important; outline: none !important; } body.htn-unified-nav-enabled #htn-top-fix img { border: 0 !important; vertical-align: bottom !important; box-shadow: none !important; float: none !important; clear: none !important; } body.htn-unified-nav-enabled #htn-top-fix br.clearfix, body.htn-unified-nav-enabled #htn-top-fix .clearfix::before, body.htn-unified-nav-enabled #htn-top-fix .clearfix::after { display: none !important; content: none !important; } /* ============================================================ PC: 固定ヘッダー全体 136px ============================================================ */ body.htn-unified-nav-enabled #htn-top-fix.htn-top-fix { width: 100% !important; min-width: 0 !important; height: var(--htn-fixed-height-pc) !important; min-height: var(--htn-fixed-height-pc) !important; max-height: var(--htn-fixed-height-pc) !important; margin: 0 !important; padding: 0 !important; position: fixed !important; top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important; z-index: 99999 !important; overflow: visible !important; background: url("bg.png") repeat-x top center #fff !important; border: 0 !important; box-shadow: var(--htn-shadow) !important; } /* 通常表示時にもヘッダー下に必ず影を出すための補助線 */ body.htn-unified-nav-enabled #htn-top-fix.htn-top-fix::after { content: "" !important; display: block !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: -5px !important; width: 100% !important; height: 5px !important; pointer-events: none !important; background: var(--htn-shadow-line) !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-wraper-top { width: 100% !important; max-width: var(--htn-header-width) !important; height: var(--htn-fixed-height-pc) !important; margin: 0 auto !important; padding: 0 !important; overflow: visible !important; background: transparent !important; float: none !important; clear: none !important; } /* ============================================================ PC: ロゴ・問い合わせボタン部分 84px ============================================================ */ body.htn-unified-nav-enabled #htn-top-fix .htn-site-header { width: 100% !important; height: var(--htn-header-height-pc) !important; min-height: var(--htn-header-height-pc) !important; max-height: var(--htn-header-height-pc) !important; margin: 0 !important; padding: 0 !important; display: block !important; overflow: hidden !important; background: transparent !important; border: 0 !important; box-shadow: none !important; float: none !important; clear: none !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-header-wrap { width: 100% !important; max-width: var(--htn-header-width) !important; height: var(--htn-header-height-pc) !important; margin: 0 auto !important; padding: 0 10px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; overflow: hidden !important; background: transparent !important; float: none !important; clear: none !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-header-logo, body.htn-unified-nav-enabled #htn-top-fix .htn-header-contact { margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; float: none !important; clear: none !important; background: transparent !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-header-logo a, body.htn-unified-nav-enabled #htn-top-fix .htn-header-contact a { margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; line-height: 1 !important; background: transparent !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-header-logo img, body.htn-unified-nav-enabled #htn-top-fix .htn-header-contact img { width: auto !important; max-width: 100% !important; max-height: 74px !important; height: auto !important; display: block !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-header-contact { gap: 8px !important; justify-content: flex-end !important; } /* ============================================================ PC: グローバルナビ部分 52px ============================================================ */ body.htn-unified-nav-enabled #htn-top-fix .htn-top-head, body.htn-unified-nav-enabled #htn-top-fix .htn-inner, body.htn-unified-nav-enabled #htn-top-fix .htn-global-nav, body.htn-unified-nav-enabled #htn-top-fix .htn-nav, body.htn-unified-nav-enabled #htn-top-fix .htn-nav-wrap, body.htn-unified-nav-enabled #htn-top-fix .htn-nav-container { width: 100% !important; height: var(--htn-nav-height-pc) !important; margin: 0 !important; padding: 0 !important; display: block !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; float: none !important; clear: none !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-nav-wrap, body.htn-unified-nav-enabled #htn-top-fix .htn-nav-container { max-width: var(--htn-header-width) !important; margin-left: auto !important; margin-right: auto !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-mobile-head { display: none !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-global-nav-list { width: 100% !important; height: var(--htn-nav-height-pc) !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: stretch !important; justify-content: center !important; overflow: visible !important; background: transparent !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-global-nav-list > .htn-nav-item { height: var(--htn-nav-height-pc) !important; min-height: var(--htn-nav-height-pc) !important; margin: 0 !important; padding: 0 !important; position: relative !important; flex: 1 1 0 !important; min-width: 0 !important; display: block !important; overflow: visible !important; float: none !important; clear: none !important; background: transparent !important; border-left: 1px solid var(--htn-nav-border-color) !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-global-nav-list > .htn-nav-item:last-child { border-right: 1px solid var(--htn-nav-border-color) !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-global-nav-list > .htn-nav-item > a { width: 100% !important; height: var(--htn-nav-height-pc) !important; min-height: var(--htn-nav-height-pc) !important; margin: 0 !important; padding: 0 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #111 !important; background: transparent !important; text-align: center !important; text-decoration: none !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.25 !important; text-shadow: none !important; white-space: normal !important; transition: background-color 0.18s ease, color 0.18s ease !important; } /* ------------------------------------------------------------ 通常ページ群: 透明背景 + 黒文字 ------------------------------------------------------------ */ body.htn-unified-nav-enabled #htn-top-fix.htn-theme-default .htn-global-nav-list > .htn-nav-item > a { color: #111 !important; background: transparent !important; text-shadow: none !important; } body.htn-unified-nav-enabled #htn-top-fix.htn-theme-default .htn-global-nav-list > .htn-nav-item > a:hover { color: #000 !important; background: var(--htn-default-hover) !important; } /* ------------------------------------------------------------ ナースコール階層: 指定済み配色 HTML側のliに nav-color-transparent / nav-color-blue / nav-color-pink を付けます。 ------------------------------------------------------------ */ body.htn-unified-nav-enabled #htn-top-fix.htn-theme-nursecall .htn-global-nav-list > .htn-nav-item.nav-color-transparent > a { color: #111 !important; background: transparent !important; text-shadow: none !important; } body.htn-unified-nav-enabled #htn-top-fix.htn-theme-nursecall .htn-global-nav-list > .htn-nav-item.nav-color-transparent > a:hover { background: var(--htn-transparent-hover) !important; } body.htn-unified-nav-enabled #htn-top-fix.htn-theme-nursecall .htn-global-nav-list > .htn-nav-item.nav-color-blue > a { color: #fff !important; background: var(--htn-nurse-blue) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42) !important; } body.htn-unified-nav-enabled #htn-top-fix.htn-theme-nursecall .htn-global-nav-list > .htn-nav-item.nav-color-blue > a:hover { background: var(--htn-nurse-blue-hover) !important; } body.htn-unified-nav-enabled #htn-top-fix.htn-theme-nursecall .htn-global-nav-list > .htn-nav-item.nav-color-pink > a { color: #fff !important; background: var(--htn-nurse-pink) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42) !important; } body.htn-unified-nav-enabled #htn-top-fix.htn-theme-nursecall .htn-global-nav-list > .htn-nav-item.nav-color-pink > a:hover { background: var(--htn-nurse-pink-hover) !important; } /* ============================================================ PC: プルダウンメニュー ============================================================ */ body.htn-unified-nav-enabled #htn-top-fix .htn-sub-menu { width: auto !important; min-width: 250px !important; height: auto !important; margin: 0 !important; padding: 0 !important; display: none !important; position: absolute !important; top: var(--htn-nav-height-pc) !important; left: 0 !important; z-index: 100000 !important; overflow: visible !important; background: rgba(255, 255, 255, 0.98) !important; border: 1px solid rgba(0, 0, 0, 0.16) !important; box-shadow: 0 5px 12px rgba(0, 0, 0, 0.20) !important; float: none !important; clear: none !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-nav-item:hover > .htn-sub-menu, body.htn-unified-nav-enabled #htn-top-fix .htn-sub-nav-item:hover > .htn-sub-menu, body.htn-unified-nav-enabled #htn-top-fix .htn-nav-item:focus-within > .htn-sub-menu, body.htn-unified-nav-enabled #htn-top-fix .htn-sub-nav-item:focus-within > .htn-sub-menu { display: block !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-sub-menu .htn-sub-menu { top: -1px !important; left: 100% !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-sub-nav-item { width: 100% !important; min-width: 250px !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; display: block !important; position: relative !important; overflow: visible !important; float: none !important; clear: none !important; background: transparent !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-sub-nav-item:last-child { border-bottom: 0 !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-sub-nav-item > a { width: 100% !important; min-width: 250px !important; min-height: 38px !important; height: auto !important; margin: 0 !important; padding: 10px 14px !important; display: block !important; color: #333 !important; background: rgba(255, 255, 255, 0.98) !important; text-align: left !important; text-decoration: none !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.45 !important; text-shadow: none !important; white-space: normal !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-sub-nav-item > a:hover, body.htn-unified-nav-enabled #htn-top-fix .htn-sub-nav-item:hover > a { color: var(--htn-submenu-hover-text) !important; background: var(--htn-submenu-hover) !important; text-decoration: none !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-submenu-toggle { display: none !important; } /* ============================================================ スマホ・タブレット: 959px以下 ============================================================ */ @media screen and (max-width: 959px) { html { scroll-padding-top: var(--htn-mobile-height) !important; } body.htn-unified-nav-enabled { padding-top: var(--htn-mobile-height) !important; } body.htn-unified-nav-enabled #htn-top-fix.htn-top-fix { height: var(--htn-mobile-height) !important; min-height: var(--htn-mobile-height) !important; max-height: var(--htn-mobile-height) !important; background: #fff !important; /* スマホ時はbg.pngを消す */ overflow: visible !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-wraper-top, body.htn-unified-nav-enabled #htn-top-fix .htn-top-head, body.htn-unified-nav-enabled #htn-top-fix .htn-inner { width: 100% !important; max-width: none !important; height: var(--htn-mobile-height) !important; min-height: var(--htn-mobile-height) !important; max-height: var(--htn-mobile-height) !important; margin: 0 !important; padding: 0 !important; background: #fff !important; overflow: visible !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-site-header { display: none !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-mobile-head { width: 100% !important; height: var(--htn-mobile-height) !important; margin: 0 !important; padding: 0 12px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; background: #fff !important; overflow: hidden !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-mobile-logo { max-width: calc(100% - 62px) !important; display: block !important; line-height: 1 !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-mobile-logo a { display: inline-flex !important; align-items: center !important; max-width: 100% !important; line-height: 1 !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-mobile-logo img { width: auto !important; max-width: 100% !important; max-height: 44px !important; height: auto !important; display: block !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-nav-toggle { width: 44px !important; height: 44px !important; min-width: 44px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 0 !important; border-radius: 4px !important; background: rgba(0, 0, 0, 0.06) !important; cursor: pointer !important; appearance: none !important; -webkit-appearance: none !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-nav-toggle span { width: 24px !important; height: 2px !important; margin: 4px 0 !important; padding: 0 !important; display: block !important; background: #333 !important; transition: transform 0.2s ease, opacity 0.2s ease !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-top-head.is-open .htn-nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg) !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-top-head.is-open .htn-nav-toggle span:nth-child(2) { opacity: 0 !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-top-head.is-open .htn-nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg) !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-global-nav { width: 100% !important; max-width: none !important; height: auto !important; max-height: calc(100vh - var(--htn-mobile-height)) !important; margin: 0 !important; padding: 0 !important; display: none !important; position: absolute !important; top: var(--htn-mobile-height) !important; left: 0 !important; right: auto !important; overflow-y: auto !important; background: #fff !important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.22) !important; z-index: 100000 !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-top-head.is-open .htn-global-nav { display: block !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-nav, body.htn-unified-nav-enabled #htn-top-fix .htn-nav-wrap, body.htn-unified-nav-enabled #htn-top-fix .htn-nav-container, body.htn-unified-nav-enabled #htn-top-fix .htn-global-nav-list { width: 100% !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; display: block !important; background: #fff !important; overflow: visible !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-global-nav-list > .htn-nav-item { width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; display: block !important; position: relative !important; border-left: 0 !important; border-right: 0 !important; border-bottom: 1px solid rgba(0, 0, 0, 0.10) !important; background: #fff !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-global-nav-list > .htn-nav-item > a { width: 100% !important; min-height: 48px !important; height: auto !important; margin: 0 !important; padding: 13px 56px 13px 16px !important; display: block !important; color: #111 !important; text-align: left !important; text-shadow: none !important; line-height: 1.45 !important; background: #fff !important; } body.htn-unified-nav-enabled #htn-top-fix.htn-theme-nursecall .htn-global-nav-list > .htn-nav-item.nav-color-blue > a { background: rgba(0, 118, 186, 0.12) !important; color: #111 !important; text-shadow: none !important; } body.htn-unified-nav-enabled #htn-top-fix.htn-theme-nursecall .htn-global-nav-list > .htn-nav-item.nav-color-pink > a { background: rgba(229, 97, 150, 0.13) !important; color: #111 !important; text-shadow: none !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-submenu-toggle { width: 48px !important; height: 48px !important; margin: 0 !important; padding: 0 !important; display: block !important; position: absolute !important; top: 0 !important; right: 0 !important; border: 0 !important; border-left: 1px solid rgba(0, 0, 0, 0.10) !important; background: rgba(0, 0, 0, 0.04) !important; color: #333 !important; font-size: 22px !important; line-height: 48px !important; text-align: center !important; cursor: pointer !important; appearance: none !important; -webkit-appearance: none !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-submenu-toggle::before { content: "+" !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-submenu-open > .htn-submenu-toggle::before { content: "−" !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-sub-menu, body.htn-unified-nav-enabled #htn-top-fix .htn-sub-menu .htn-sub-menu { width: 100% !important; min-width: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; display: none !important; position: static !important; top: auto !important; left: auto !important; border: 0 !important; box-shadow: none !important; background: #f7f7f7 !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-submenu-open > .htn-sub-menu { display: block !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-sub-nav-item { width: 100% !important; min-width: 0 !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-sub-nav-item > a { width: 100% !important; min-width: 0 !important; min-height: 42px !important; padding: 11px 56px 11px 28px !important; font-size: 13px !important; color: #333 !important; background: #f7f7f7 !important; } body.htn-unified-nav-enabled #htn-top-fix .htn-sub-menu .htn-sub-menu .htn-sub-nav-item > a { padding-left: 42px !important; background: #eeeeee !important; } } /* ============================================================ v4 追加調整 ------------------------------------------------------------ 1) PC表示時のトップメニュー hover 色を統一 - ナースコール階層のピンク項目だけは濃いピンク - それ以外は、透明背景の項目も通常ページ群もすべて濃い青 2) 959px以下では hover / focus-within によるプルダウン表示を無効化 - スマホ・タブレット時は [＋] ボタンを押した場合だけ展開 ============================================================ */ @media screen and (min-width: 960px) { body.htn-unified-nav-enabled #htn-top-fix.htn-theme-default .htn-global-nav-list > .htn-nav-item > a:hover, body.htn-unified-nav-enabled #htn-top-fix.htn-theme-default .htn-global-nav-list > .htn-nav-item > a:focus, body.htn-unified-nav-enabled #htn-top-fix.htn-theme-nursecall .htn-global-nav-list > .htn-nav-item.nav-color-transparent > a:hover, body.htn-unified-nav-enabled #htn-top-fix.htn-theme-nursecall .htn-global-nav-list > .htn-nav-item.nav-color-transparent > a:focus, body.htn-unified-nav-enabled #htn-top-fix.htn-theme-nursecall .htn-global-nav-list > .htn-nav-item.nav-color-blue > a:hover, body.htn-unified-nav-enabled #htn-top-fix.htn-theme-nursecall .htn-global-nav-list > .htn-nav-item.nav-color-blue > a:focus { color: #fff !important; background: var(--htn-nurse-blue-hover) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42) !important; text-decoration: none !important; } body.htn-unified-nav-enabled #htn-top-fix.htn-theme-nursecall .htn-global-nav-list > .htn-nav-item.nav-color-pink > a:hover, body.htn-unified-nav-enabled #htn-top-fix.htn-theme-nursecall .htn-global-nav-list > .htn-nav-item.nav-color-pink > a:focus { color: #fff !important; background: var(--htn-nurse-pink-hover) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42) !important; text-decoration: none !important; } } @media screen and (max-width: 959px) { /* スマホ・タブレットでは hover / focus-within で勝手にサブメニューを出さない */ body.htn-unified-nav-enabled #htn-top-fix .htn-nav-item:hover > .htn-sub-menu, body.htn-unified-nav-enabled #htn-top-fix .htn-sub-nav-item:hover > .htn-sub-menu, body.htn-unified-nav-enabled #htn-top-fix .htn-nav-item:focus-within > .htn-sub-menu, body.htn-unified-nav-enabled #htn-top-fix .htn-sub-nav-item:focus-within > .htn-sub-menu { display: none !important; } /* [＋] ボタンで htn-submenu-open が付いた場合だけ展開 */ body.htn-unified-nav-enabled #htn-top-fix .htn-nav-item.htn-submenu-open > .htn-sub-menu, body.htn-unified-nav-enabled #htn-top-fix .htn-sub-nav-item.htn-submenu-open > .htn-sub-menu { display: block !important; } /* スマホ時のリンク hover は背景を変えず、誤反応を抑える */ body.htn-unified-nav-enabled #htn-top-fix .htn-global-nav-list > .htn-nav-item > a:hover, body.htn-unified-nav-enabled #htn-top-fix .htn-sub-nav-item > a:hover { color: inherit !important; text-decoration: none !important; } } /* ============================================================ nursecall/nursecall-index.html パンくずナビ余白調整 ------------------------------------------------------------ 対象: - nursecall/nursecall-index.html の
    のみ 理由: - トップページだけ #yuihome 配下にあり、旧テーマ側のトップページ用 #content / .wrap / .breadcrumb / .margin_top20 などの余白が重なりやすい構造です。 - 共通ナビを position: fixed 化したことで、body の上余白 140px に 旧テーマ側の余白が加算され、このページだけパンくず上下が広く見えます。 - サブページやカメラページのパンくずに近づけるため、対象olに専用クラスを付け、 その周辺の上下余白だけを上書きしています。 ============================================================ */ body.htn-unified-nav-enabled.home.blog #yuihome { margin-top: 0 !important; padding-top: 0 !important; } body.htn-unified-nav-enabled.home.blog #yuihome #content { margin-top: 0 !important; padding-top: 0 !important; } body.htn-unified-nav-enabled.home.blog #yuihome #content > .wrap { padding-top: 0 !important; } /* パンくず本体の上下余白をコンパクト化 */ body.htn-unified-nav-enabled.home.blog #yuihome #content > .wrap > ol.breadcrumb.htn-breadcrumb-compact { margin-top: 0 !important; margin-bottom: 8px !important; padding-top: 6px !important; padding-bottom: 6px !important; line-height: 1.5 !important; } /* li 側にテーマCSSのmargin/paddingが残っても膨らまないようにする */ body.htn-unified-nav-enabled.home.blog #yuihome #content > .wrap > ol.breadcrumb.htn-breadcrumb-compact > li { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 1.5 !important; } /* パンくず直後の本文側余白を抑える */ body.htn-unified-nav-enabled.home.blog #yuihome #content > .wrap > ol.breadcrumb.htn-breadcrumb-compact + #main { margin-top: 0 !important; padding-top: 0 !important; } /* メイン画像側の .margin_top20 がパンくず直下で余白を大きく見せるため少しだけ圧縮 */ body.htn-unified-nav-enabled.home.blog #yuihome #content > .wrap > ol.breadcrumb.htn-breadcrumb-compact + #main > .img-center.margin_top20:first-child { margin-top: 8px !important; }