/******* Do not edit this file ******* Simple Custom CSS and JS - by Silkypress.com Saved: Apr 02 2026 | 05:44:06 */ /* ======================================== いい生活CMS 調整用CSS（最小限のアプローチ） ======================================== */ /* PC表示時：既存のstyle.cssの#header.fixedスタイルを完全に無効化（高さ変更・フォントサイズ変更を防ぐ） */ /* PC表示時：fixedクラスが付いていても83pxの高さを維持 */ @media (min-width: 769px) { /* PC表示時：通常時はauto、fixed時は83pxを明確に指定 */ html body #header, body #header { padding: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; margin-right: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: auto !important; min-height: auto !important; max-height: none !important; font-size: inherit !important; background-color: #fff !important; background: #fff !important; background-image: none !important; color: #333 !important; } /* PC表示時：fixed/sticky/scrolled時は83pxを明確に指定 */ html body #header.fixed, body #header.fixed, html body #header.sticky, body #header.sticky, html body #header.scrolled, body #header.scrolled, html body #header[data-scrolled="true"], body #header[data-scrolled="true"] { padding: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; margin-right: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 83px !important; min-height: 83px !important; max-height: 83px !important; font-size: inherit !important; background-color: #fff !important; background: #fff !important; background-image: none !important; color: #333 !important; } html body #header *, body #header *, html body #header.fixed *, body #header.fixed * { font-size: inherit !important; } html body #header .header-inner, body #header .header-inner, /* 動的ページのheader-innerも同じ設定 */ body.es-dynamic-page #header .header-inner, body:has(.es-dynamic-page-marker) #header .header-inner, html body.es-dynamic-page #header .header-inner, html body:has(.es-dynamic-page-marker) #header .header-inner { padding: 0 !important; margin: 0 !important; height: auto !important; min-height: auto !important; max-height: none !important; font-size: inherit !important; background-color: #fff !important; background: #fff !important; background-image: none !important; display: flex !important; align-items: center !important; flex-wrap: wrap !important; /* 折り返しを許可（カラム落ちを許可） */ justify-content: flex-start !important; /* 左から配置 */ width: 100% !important; box-sizing: border-box !important; overflow: visible !important; /* サブメニューのシャドウが切れないように */ } /* PC表示時：fixed/sticky/scrolled時のheader-innerも83pxを明確に指定 */ html body #header.fixed .header-inner, body #header.fixed .header-inner, html body #header.sticky .header-inner, body #header.sticky .header-inner, html body #header.scrolled .header-inner, body #header.scrolled .header-inner, html body #header[data-scrolled="true"] .header-inner, body #header[data-scrolled="true"] .header-inner, /* 動的ページのfixed/sticky/scrolled時のheader-innerも同じ設定 */ body.es-dynamic-page #header.fixed .header-inner, body.es-dynamic-page #header.sticky .header-inner, body.es-dynamic-page #header.scrolled .header-inner, body.es-dynamic-page #header[data-scrolled="true"] .header-inner, body:has(.es-dynamic-page-marker) #header.fixed .header-inner, body:has(.es-dynamic-page-marker) #header.sticky .header-inner, body:has(.es-dynamic-page-marker) #header.scrolled .header-inner, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"] .header-inner, html body.es-dynamic-page #header.fixed .header-inner, html body.es-dynamic-page #header.sticky .header-inner, html body.es-dynamic-page #header.scrolled .header-inner, html body.es-dynamic-page #header[data-scrolled="true"] .header-inner, html body:has(.es-dynamic-page-marker) #header.fixed .header-inner, html body:has(.es-dynamic-page-marker) #header.sticky .header-inner, html body:has(.es-dynamic-page-marker) #header.scrolled .header-inner, html body:has(.es-dynamic-page-marker) #header[data-scrolled="true"] .header-inner { padding: 0 !important; margin: 0 !important; height: 83px !important; min-height: 83px !important; max-height: 83px !important; font-size: inherit !important; background-color: #fff !important; background: #fff !important; background-image: none !important; display: flex !important; align-items: center !important; flex-wrap: wrap !important; /* 折り返しを許可（カラム落ちを許可） */ justify-content: flex-start !important; /* 左から配置 */ width: 100% !important; box-sizing: border-box !important; } html body #header .header-inner *, body #header .header-inner *, html body #header.fixed .header-inner *, body #header.fixed .header-inner * { font-size: inherit !important; } html body #header .header-inner .logo, body #header .header-inner .logo, html body #header.fixed .header-inner .logo, body #header.fixed .header-inner .logo, html body #header.sticky .header-inner .logo, body #header.sticky .header-inner .logo, html body #header.scrolled .header-inner .logo, body #header.scrolled .header-inner .logo, html body #header[data-scrolled="true"] .header-inner .logo, body #header[data-scrolled="true"] .header-inner .logo, /* 動的ページのロゴも80px */ body.es-dynamic-page #header .header-inner .logo, body.es-dynamic-page #header.fixed .header-inner .logo, body.es-dynamic-page #header.sticky .header-inner .logo, body.es-dynamic-page #header.scrolled .header-inner .logo, body.es-dynamic-page #header[data-scrolled="true"] .header-inner .logo, body:has(.es-dynamic-page-marker) #header .header-inner .logo, body:has(.es-dynamic-page-marker) #header.fixed .header-inner .logo, body:has(.es-dynamic-page-marker) #header.sticky .header-inner .logo, body:has(.es-dynamic-page-marker) #header.scrolled .header-inner .logo, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"] .header-inner .logo { margin-left: 80px !important; margin-right: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; font-size: inherit !important; flex-shrink: 0 !important; /* ロゴが縮小しないように */ } html body #header .globalNav, body #header .globalNav, html body #header.fixed .globalNav, body #header.fixed .globalNav { padding: 0 !important; margin: 0 !important; height: auto !important; min-height: auto !important; max-height: none !important; font-size: inherit !important; background-color: #fff !important; background: #fff !important; background-image: none !important; } html body #header .globalNav *, body #header .globalNav *, html body #header.fixed .globalNav *, body #header.fixed .globalNav * { font-size: inherit !important; } html body #header .globalNav .nav-inner ul li a, html body #header .globalNav .nav-inner ul li a .title, body #header .globalNav .nav-inner ul li a, body #header .globalNav .nav-inner ul li a .title, html body #header #globalNav .nav-inner ul li a, html body #header #globalNav .nav-inner ul li a .title, body #header #globalNav .nav-inner ul li a, body #header #globalNav .nav-inner ul li a .title, html body #header.fixed .globalNav .nav-inner ul li a, html body #header.fixed .globalNav .nav-inner ul li a .title, body #header.fixed .globalNav .nav-inner ul li a, body #header.fixed .globalNav .nav-inner ul li a .title, html body #header.fixed #globalNav .nav-inner ul li a, html body #header.fixed #globalNav .nav-inner ul li a .title, body #header.fixed #globalNav .nav-inner ul li a, body #header.fixed #globalNav .nav-inner ul li a .title { color: #333 !important; font-size: 14px !important; } } /* ======================================== 基本的な表示確保 ======================================== */ html, body { display: block !important; visibility: visible !important; opacity: 1 !important; background-color: #fff !important; color: #333 !important; /* いい生活CMSが設定するフォントサイズをリセット（sec-contactセクションには影響しないように） */ font-size: 16px !important; /* ヘッダーを画面端に配置するため、マージンとパディングを0に */ margin: 0 !important; padding: 0 !important; } /* 動的ページでもhtml, bodyのフォントサイズを16pxに設定 */ body.es-dynamic-page html, body.es-dynamic-page body, body:has(.es-dynamic-page-marker) html, body:has(.es-dynamic-page-marker) body { font-size: 16px !important; } /* ======================================== 動的ページのヘッダー・フッターの余分なスタイルを排除 ======================================== */ /* 動的ページのヘッダーを静的ページと同じスタイルに強制適用 */ /* 余分なインラインスタイルやクラスを上書き */ /* 注意: positionはJavaScriptで制御するため、!importantを付けない */ /* 通常時（追従していない時）は白背景 */ body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]), body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]), #header.es-dynamic-header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) { /* 静的ページと同じ基本スタイル */ /* positionはJavaScriptで制御（fixed/sticky/static） */ top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 100 !important; display: block !important; /* 余分なスタイルをリセット */ margin: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; background: #fff !important; background-color: #fff !important; transition: all 0.3s ease-in-out !important; } /* PC表示時：動的ページのヘッダー（追従時）も83pxを明確に指定 */ @media (min-width: 769px) { /* PC表示時：動的ページのヘッダー（追従時）は83pxを明確に指定 */ body.es-dynamic-page #header.fixed, body.es-dynamic-page #header.sticky, body.es-dynamic-page #header.scrolled, body.es-dynamic-page #header[data-scrolled="true"], body:has(.es-dynamic-page-marker) #header.fixed, body:has(.es-dynamic-page-marker) #header.sticky, body:has(.es-dynamic-page-marker) #header.scrolled, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"], #header.es-dynamic-header.fixed, #header.es-dynamic-header.sticky, #header.es-dynamic-header.scrolled, #header.es-dynamic-header[data-scrolled="true"] { height: 83px !important; min-height: 83px !important; max-height: 83px !important; background: #fff !important; background-color: #fff !important; transition: all 0.3s ease-in-out !important; } /* PC表示時：動的ページのheader-inner（追従時）も83pxを明確に指定 */ body.es-dynamic-page #header.fixed .header-inner, body.es-dynamic-page #header.sticky .header-inner, body.es-dynamic-page #header.scrolled .header-inner, body.es-dynamic-page #header[data-scrolled="true"] .header-inner, body:has(.es-dynamic-page-marker) #header.fixed .header-inner, body:has(.es-dynamic-page-marker) #header.sticky .header-inner, body:has(.es-dynamic-page-marker) #header.scrolled .header-inner, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"] .header-inner, #header.es-dynamic-header.fixed .header-inner, #header.es-dynamic-header.sticky .header-inner, #header.es-dynamic-header.scrolled .header-inner, #header.es-dynamic-header[data-scrolled="true"] .header-inner { height: auto !important; /* 2段になった場合でも高さを自動調整 */ min-height: 83px !important; max-height: none !important; /* 2段になった場合でも制限を解除 */ background: #fff !important; background-color: #fff !important; background-image: none !important; } /* PC表示時：動的ページのheader-inner（2段になった場合でも全面白） */ body.es-dynamic-page #header .header-inner, body:has(.es-dynamic-page-marker) #header .header-inner, #header.es-dynamic-header .header-inner { background-color: #fff !important; background: #fff !important; background-image: none !important; } /* PC表示時：動的ページのglobalNav（背景を確実に白にする） */ body.es-dynamic-page #header .globalNav, body.es-dynamic-page #header #globalNav, body:has(.es-dynamic-page-marker) #header .globalNav, body:has(.es-dynamic-page-marker) #header #globalNav, #header.es-dynamic-header .globalNav, #header.es-dynamic-header #globalNav { background-color: #fff !important; background: #fff !important; background-image: none !important; } /* PC表示時：動的ページのglobalNav .nav-inner（背景を確実に白にする） */ body.es-dynamic-page #header .globalNav .nav-inner, body.es-dynamic-page #header #globalNav .nav-inner, body:has(.es-dynamic-page-marker) #header .globalNav .nav-inner, body:has(.es-dynamic-page-marker) #header #globalNav .nav-inner, #header.es-dynamic-header .globalNav .nav-inner, #header.es-dynamic-header #globalNav .nav-inner { background-color: #fff !important; background: #fff !important; background-image: none !important; } } /* SP表示時のみ追従時のスタイルを適用 */ @media (max-width: 768px) { /* 動的ページのヘッダー（追従時、83pxを明確に指定） */ body.es-dynamic-page #header.fixed, body.es-dynamic-page #header.sticky, body.es-dynamic-page #header.scrolled, body.es-dynamic-page #header[data-scrolled="true"], body:has(.es-dynamic-page-marker) #header.fixed, body:has(.es-dynamic-page-marker) #header.sticky, body:has(.es-dynamic-page-marker) #header.scrolled, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"], #header.es-dynamic-header.fixed, #header.es-dynamic-header.sticky, #header.es-dynamic-header.scrolled, #header.es-dynamic-header[data-scrolled="true"] { height: 83px !important; min-height: 83px !important; max-height: 83px !important; background: #fff !important; background-color: #fff !important; transition: all 0.3s ease-in-out !important; } } /* 動的ページのheader-innerを静的ページと同じスタイルに */ body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .header-inner, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .header-inner, #header.es-dynamic-header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .header-inner { background-color: #fff !important; background: #fff !important; background-image: none !important; display: flex !important; position: relative !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: center !important; margin: 0 auto !important; /* 余分なスタイルをリセット */ padding: 0 !important; background: #fff !important; background-color: #fff !important; } /* PC表示時：通常時と追従時を同じスタイルにするため、追従時特有のスタイルは削除 */ /* SP表示時のみ追従時のスタイルを適用 */ @media (max-width: 768px) { /* 動的ページのロゴ（追従時、margin-left: 10pxで固定） */ body.es-dynamic-page #header.fixed .header-inner .logo, body.es-dynamic-page #header.sticky .header-inner .logo, body.es-dynamic-page #header.scrolled .header-inner .logo, body.es-dynamic-page #header[data-scrolled="true"] .header-inner .logo, body:has(.es-dynamic-page-marker) #header.fixed .header-inner .logo, body:has(.es-dynamic-page-marker) #header.sticky .header-inner .logo, body:has(.es-dynamic-page-marker) #header.scrolled .header-inner .logo, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"] .header-inner .logo, #header.es-dynamic-header.fixed .header-inner .logo, #header.es-dynamic-header.sticky .header-inner .logo, #header.es-dynamic-header.scrolled .header-inner .logo, #header.es-dynamic-header[data-scrolled="true"] .header-inner .logo { margin-left: 10px !important; margin-right: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* 動的ページのheader-inner（追従時） */ body.es-dynamic-page #header.fixed .header-inner, body.es-dynamic-page #header.sticky .header-inner, body.es-dynamic-page #header.scrolled .header-inner, body.es-dynamic-page #header[data-scrolled="true"] .header-inner, body:has(.es-dynamic-page-marker) #header.fixed .header-inner, body:has(.es-dynamic-page-marker) #header.sticky .header-inner, body:has(.es-dynamic-page-marker) #header.scrolled .header-inner, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"] .header-inner, #header.es-dynamic-header.fixed .header-inner, #header.es-dynamic-header.sticky .header-inner, #header.es-dynamic-header.scrolled .header-inner, #header.es-dynamic-header[data-scrolled="true"] .header-inner { background: #fff !important; background-color: #fff !important; } } /* 動的ページのglobalNavを静的ページと同じスタイルに（PC表示時） */ /* PCでは通常時と追従時を同じスタイルにする */ @media (min-width: 769px) { /* PC表示時：すべての状態で同じスタイル（通常時・追従時共通） */ html body.es-dynamic-page #header .globalNav:not(.active), html body:has(.es-dynamic-page-marker) #header .globalNav:not(.active), html #header.es-dynamic-header .globalNav:not(.active), body.es-dynamic-page #header .globalNav:not(.active), body:has(.es-dynamic-page-marker) #header .globalNav:not(.active), #header.es-dynamic-header .globalNav:not(.active), html body.es-dynamic-page #header #globalNav:not(.active), html body:has(.es-dynamic-page-marker) #header #globalNav:not(.active), html #header.es-dynamic-header #globalNav:not(.active), body.es-dynamic-page #header #globalNav:not(.active), body:has(.es-dynamic-page-marker) #header #globalNav:not(.active), #header.es-dynamic-header #globalNav:not(.active) { background: #fff !important; background-color: #fff !important; background-image: none !important; height: 100% !important; padding: 0 !important; transition: all 0.3s linear !important; margin: 0 !important; border: none !important; box-shadow: none !important; display: flex !important; align-items: center !important; margin-left: auto !important; /* 右寄せを維持 */ width: auto !important; overflow: visible !important; /* サブメニューが表示されるように */ } /* PC表示時：nav-innerとulもすべての状態で同じスタイル */ html body.es-dynamic-page #header .globalNav .nav-inner, html body:has(.es-dynamic-page-marker) #header .globalNav .nav-inner, body.es-dynamic-page #header .globalNav .nav-inner, body:has(.es-dynamic-page-marker) #header .globalNav .nav-inner, #header.es-dynamic-header .globalNav .nav-inner { display: flex !important; align-items: center !important; height: 100% !important; overflow: visible !important; /* サブメニューが表示されるように */ } html body.es-dynamic-page #header .globalNav .nav-inner ul, html body:has(.es-dynamic-page-marker) #header .globalNav .nav-inner ul, body.es-dynamic-page #header .globalNav .nav-inner ul, body:has(.es-dynamic-page-marker) #header .globalNav .nav-inner ul, #header.es-dynamic-header .globalNav .nav-inner ul { display: flex !important; align-items: center !important; height: 100% !important; flex-wrap: wrap !important; /* 折り返しを許可（カラム落ちを許可） */ overflow: visible !important; /* サブメニューが表示されるように、シャドウが切れないように */ } } /* 動的ページのglobalNavを静的ページと同じスタイルに（SP表示時） */ @media (max-width: 768px) { /* 通常時（追従していない時）は黒背景 */ body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav, #header.es-dynamic-header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav { overflow: hidden !important; z-index: 1 !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; max-height: 0 !important; padding: 0 !important; background: #000 !important; background-color: #000 !important; /* 余分なスタイルをリセット */ margin: 0 !important; border: none !important; box-shadow: none !important; } /* 追従時は白背景 */ body.es-dynamic-page #header.fixed .globalNav, body.es-dynamic-page #header.sticky .globalNav, body.es-dynamic-page #header.scrolled .globalNav, body.es-dynamic-page #header[data-scrolled="true"] .globalNav, body:has(.es-dynamic-page-marker) #header.fixed .globalNav, body:has(.es-dynamic-page-marker) #header.sticky .globalNav, body:has(.es-dynamic-page-marker) #header.scrolled .globalNav, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"] .globalNav, #header.es-dynamic-header.fixed .globalNav, #header.es-dynamic-header.sticky .globalNav, #header.es-dynamic-header.scrolled .globalNav, #header.es-dynamic-header[data-scrolled="true"] .globalNav { overflow: hidden !important; z-index: 1 !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; max-height: 0 !important; padding: 0 !important; background: #fff !important; background-color: #fff !important; margin: 0 !important; border: none !important; box-shadow: none !important; } /* メニューが開いている時 */ body.es-dynamic-page #header .globalNav.active, body:has(.es-dynamic-page-marker) #header .globalNav.active, #header.es-dynamic-header .globalNav.active, body.es-dynamic-page #header .globalNav[style*="display: block"], body:has(.es-dynamic-page-marker) #header .globalNav[style*="display: block"], #header.es-dynamic-header .globalNav[style*="display: block"] { max-height: 100% !important; } } /* 動的ページのヘッダ内のリンクとテキスト */ /* 通常時（追従していない時）は黒テキスト */ /* PC表示時：動的ページの通常時のナビゲーションテキストを黒に */ @media (min-width: 769px) { body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav a, body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav a .title, body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav span, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav a, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav a .title, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav span, #header.es-dynamic-header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav a, #header.es-dynamic-header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav a .title, #header.es-dynamic-header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav span { font-size: inherit !important; font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "Lato", sans-serif !important; color: #333 !important; /* PC表示時：通常時（白背景）は黒テキスト */ } } /* SP表示時：動的ページの通常時のナビゲーションテキストを白に（背景が黒のため） */ @media (max-width: 768px) { body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav a, body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav a .title, body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav span, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav a, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav a .title, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav span, #header.es-dynamic-header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav a, #header.es-dynamic-header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav a .title, #header.es-dynamic-header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav span { font-size: inherit !important; font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "Lato", sans-serif !important; color: #fff !important; /* SP表示時：通常時（黒背景）は白テキスト */ } } /* 動的ページのヘッダ内のその他の要素（お問い合わせ以外） */ body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) a:not(.globalNav a):not(.globalNav a *), body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) span:not(.globalNav span):not(.globalNav span *), body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) p, body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) li, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) a:not(.globalNav a):not(.globalNav a *), body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) span:not(.globalNav span):not(.globalNav span *), body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) p, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) li, #header.es-dynamic-header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) a:not(.globalNav a):not(.globalNav a *), #header.es-dynamic-header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) span:not(.globalNav span):not(.globalNav span *), #header.es-dynamic-header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) p, #header.es-dynamic-header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) li { font-size: inherit !important; font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "Lato", sans-serif !important; color: inherit !important; } /* PC表示時：通常時と追従時を同じスタイルにするため、追従時特有のスタイルは削除 */ /* 動的ページでもサブメニューを表示するため、上記のルールを削除 */ /* ハンバーガーメニューボタンの位置とクリック可能性を確保 */ @media (max-width: 768px) { /* ヘッダーをflexboxにして、header-innerと#navBtnを同じ行に配置 */ #header, body #header, html body #header { position: relative !important; display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; /* 折り返しを防ぐ */ width: 100% !important; box-sizing: border-box !important; } /* header-innerをflexboxにして、ロゴを左に配置 */ #header .header-inner, body #header .header-inner, html body #header .header-inner { display: flex !important; align-items: center !important; justify-content: flex-start !important; /* ロゴを左に配置 */ flex: 1 !important; flex-shrink: 1 !important; /* 縮小可能 */ min-width: 0 !important; /* 最小幅を0にして、flexboxが正しく動作するように */ position: relative !important; } /* ロゴを左に配置 */ #header .header-inner .logo, body #header .header-inner .logo, html body #header .header-inner .logo { order: 1 !important; flex-shrink: 0 !important; margin-right: auto !important; } /* 静的ページ：header-inner内のメニューボタンは表示 */ /* 動的ページでは、header-inner内のメニューボタンも表示（absoluteで配置するため） */ /* #headerの直接の子要素としてのメニューボタンを右に配置 */ #header > #navBtn, #header > .navbutton, #header > .func-btn.navbutton { order: 999 !important; margin-left: auto !important; margin-right: 0 !important; flex-shrink: 0 !important; } /* 動的ページ専用：#headerをflexboxにして、header-innerと#navBtnを同じ行に配置 */ body.es-dynamic-page #header, body:has(.es-dynamic-page-marker) #header, html body.es-dynamic-page #header, html body:has(.es-dynamic-page-marker) #header { position: relative !important; display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; width: 100% !important; box-sizing: border-box !important; } /* 動的ページ：header-innerをflexboxにして、ロゴを左に配置 */ body.es-dynamic-page #header .header-inner, body:has(.es-dynamic-page-marker) #header .header-inner, html body.es-dynamic-page #header .header-inner, html body:has(.es-dynamic-page-marker) #header .header-inner { display: flex !important; align-items: center !important; justify-content: flex-start !important; /* ロゴを左に配置 */ flex: 1 !important; flex-shrink: 1 !important; min-width: 0 !important; position: relative !important; width: 100% !important; padding-right: 70px !important; /* メニューボタンのスペースを確保 */ box-sizing: border-box !important; } /* 動的ページ：メニューボタンをabsoluteでロゴと同じ行の右上に配置 */ /* JavaScriptで位置を調整するため、top/bottomは設定しない */ body.es-dynamic-page #header #navBtn, body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) #navBtn, body.es-dynamic-page #header.fixed #navBtn, body.es-dynamic-page #header.sticky #navBtn, body.es-dynamic-page #header.scrolled #navBtn, body.es-dynamic-page #header[data-scrolled="true"] #navBtn, body.es-dynamic-page #header .navbutton, body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .navbutton, body.es-dynamic-page #header.fixed .navbutton, body.es-dynamic-page #header.sticky .navbutton, body.es-dynamic-page #header.scrolled .navbutton, body.es-dynamic-page #header[data-scrolled="true"] .navbutton, body.es-dynamic-page #header .func-btn.navbutton, body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .func-btn.navbutton, body.es-dynamic-page #header.fixed .func-btn.navbutton, body.es-dynamic-page #header.sticky .func-btn.navbutton, body.es-dynamic-page #header.scrolled .func-btn.navbutton, body.es-dynamic-page #header[data-scrolled="true"] .func-btn.navbutton, body.es-dynamic-page #header .header-inner #navBtn, body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .header-inner #navBtn, body.es-dynamic-page #header.fixed .header-inner #navBtn, body.es-dynamic-page #header.sticky .header-inner #navBtn, body.es-dynamic-page #header.scrolled .header-inner #navBtn, body.es-dynamic-page #header[data-scrolled="true"] .header-inner #navBtn, body.es-dynamic-page #header .header-inner .navbutton, body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .header-inner .navbutton, body.es-dynamic-page #header.fixed .header-inner .navbutton, body.es-dynamic-page #header.sticky .header-inner .navbutton, body.es-dynamic-page #header.scrolled .header-inner .navbutton, body.es-dynamic-page #header[data-scrolled="true"] .header-inner .navbutton, body.es-dynamic-page #header .header-inner .func-btn.navbutton, body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .header-inner .func-btn.navbutton, body.es-dynamic-page #header.fixed .header-inner .func-btn.navbutton, body.es-dynamic-page #header.sticky .header-inner .func-btn.navbutton, body.es-dynamic-page #header.scrolled .header-inner .func-btn.navbutton, body.es-dynamic-page #header[data-scrolled="true"] .header-inner .func-btn.navbutton, body:has(.es-dynamic-page-marker) #header #navBtn, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) #navBtn, body:has(.es-dynamic-page-marker) #header.fixed #navBtn, body:has(.es-dynamic-page-marker) #header.sticky #navBtn, body:has(.es-dynamic-page-marker) #header.scrolled #navBtn, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"] #navBtn, body:has(.es-dynamic-page-marker) #header .navbutton, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .navbutton, body:has(.es-dynamic-page-marker) #header.fixed .navbutton, body:has(.es-dynamic-page-marker) #header.sticky .navbutton, body:has(.es-dynamic-page-marker) #header.scrolled .navbutton, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"] .navbutton, body:has(.es-dynamic-page-marker) #header .func-btn.navbutton, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .func-btn.navbutton, body:has(.es-dynamic-page-marker) #header.fixed .func-btn.navbutton, body:has(.es-dynamic-page-marker) #header.sticky .func-btn.navbutton, body:has(.es-dynamic-page-marker) #header.scrolled .func-btn.navbutton, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"] .func-btn.navbutton, body:has(.es-dynamic-page-marker) #header .header-inner #navBtn, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .header-inner #navBtn, body:has(.es-dynamic-page-marker) #header.fixed .header-inner #navBtn, body:has(.es-dynamic-page-marker) #header.sticky .header-inner #navBtn, body:has(.es-dynamic-page-marker) #header.scrolled .header-inner #navBtn, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"] .header-inner #navBtn, body:has(.es-dynamic-page-marker) #header .header-inner .navbutton, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .header-inner .navbutton, body:has(.es-dynamic-page-marker) #header.fixed .header-inner .navbutton, body:has(.es-dynamic-page-marker) #header.sticky .header-inner .navbutton, body:has(.es-dynamic-page-marker) #header.scrolled .header-inner .navbutton, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"] .header-inner .navbutton, body:has(.es-dynamic-page-marker) #header .header-inner .func-btn.navbutton, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .header-inner .func-btn.navbutton, body:has(.es-dynamic-page-marker) #header.fixed .header-inner .func-btn.navbutton, body:has(.es-dynamic-page-marker) #header.sticky .header-inner .func-btn.navbutton, body:has(.es-dynamic-page-marker) #header.scrolled .header-inner .func-btn.navbutton, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"] .header-inner .func-btn.navbutton { position: absolute !important; /* top/bottomはJavaScriptで設定するため、CSSでは設定しない */ right: 0 !important; margin: 0 !important; margin-left: 0 !important; margin-right: 0 !important; order: unset !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 9999 !important; /* transformはJavaScriptで設定するため、CSSでは設定しない */ visibility: visible !important; opacity: 1 !important; } #navBtn, #header #navBtn, #header .navbutton, #header .func-btn.navbutton, #header .header-inner #navBtn, #header .header-inner .navbutton, #header .header-inner .func-btn.navbutton { position: relative !important; top: auto !important; right: auto !important; z-index: 9999 !important; pointer-events: auto !important; cursor: pointer !important; width: 55px !important; height: 55px !important; padding: 0 !important; margin: 0 !important; margin-left: auto !important; /* 右端に配置 */ flex-shrink: 0 !important; /* 縮小しない */ order: 999 !important; /* 右側に配置（orderを大きくして確実に右端に） */ align-self: center !important; /* 垂直方向の中央揃え */ display: flex !important; align-items: center !important; justify-content: center !important; /* MENUテキストを非表示 */ font-size: 0 !important; text-indent: -9999px !important; overflow: hidden !important; box-sizing: border-box !important; } /* 動的ページ専用のスタイル */ body.es-dynamic-page #navBtn, body.es-dynamic-page #header #navBtn, body.es-dynamic-page #header .navbutton, body.es-dynamic-page #header .func-btn.navbutton, body:has(.es-dynamic-page-marker) #navBtn, body:has(.es-dynamic-page-marker) #header #navBtn, body:has(.es-dynamic-page-marker) #header .navbutton, body:has(.es-dynamic-page-marker) #header .func-btn.navbutton { position: relative !important; top: auto !important; right: auto !important; z-index: 9999 !important; pointer-events: auto !important; cursor: pointer !important; width: 55px !important; height: 55px !important; padding: 10px 30px !important; /* いい生活CMSのpaddingを上書き */ margin: 0 !important; margin-left: auto !important; /* 右端に配置 */ flex-shrink: 0 !important; /* 縮小しない */ order: 2 !important; /* 右側に配置 */ align-self: center !important; /* 垂直方向の中央揃え */ display: flex !important; align-items: center !important; justify-content: center !important; /* MENUテキストを非表示 */ font-size: 0 !important; text-indent: -9999px !important; overflow: hidden !important; box-sizing: border-box !important; } /* 動的ページSP：メニュー展開時も同じ位置を維持 */ body.es-dynamic-page #header:has(#globalNav.active) #navBtn, body.es-dynamic-page #header:has(.globalNav.active) #navBtn, body.es-dynamic-page #header:has(#globalNav[style*="display: block"]) #navBtn, body.es-dynamic-page #header:has(.globalNav[style*="display: block"]) #navBtn, body:has(.es-dynamic-page-marker) #header:has(#globalNav.active) #navBtn, body:has(.es-dynamic-page-marker) #header:has(.globalNav.active) #navBtn, body:has(.es-dynamic-page-marker) #header:has(#globalNav[style*="display: block"]) #navBtn, body:has(.es-dynamic-page-marker) #header:has(.globalNav[style*="display: block"]) #navBtn, body.es-dynamic-page #header:has(#globalNav.active) .navbutton, body.es-dynamic-page #header:has(.globalNav.active) .navbutton, body.es-dynamic-page #header:has(#globalNav[style*="display: block"]) .navbutton, body.es-dynamic-page #header:has(.globalNav[style*="display: block"]) .navbutton, body:has(.es-dynamic-page-marker) #header:has(#globalNav.active) .navbutton, body:has(.es-dynamic-page-marker) #header:has(.globalNav.active) .navbutton, body:has(.es-dynamic-page-marker) #header:has(#globalNav[style*="display: block"]) .navbutton, body:has(.es-dynamic-page-marker) #header:has(.globalNav[style*="display: block"]) .navbutton { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: auto !important; height: 55px !important; min-height: 55px !important; max-height: 55px !important; padding: 10px 30px !important; margin: 0 !important; margin-left: auto !important; flex-shrink: 0 !important; flex-grow: 0 !important; order: 2 !important; align-self: center !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 9999 !important; pointer-events: auto !important; cursor: pointer !important; box-sizing: border-box !important; } /* navBtn内のテキストを非表示 */ #navBtn *, #header #navBtn *, #header .navbutton *, #header .func-btn.navbutton * { display: none !important; visibility: hidden !important; opacity: 0 !important; font-size: 0 !important; text-indent: -9999px !important; } /* デフォルト：背景画像なし */ #header .navbutton, #header #navBtn { background-image: none !important; background: transparent !important; position: relative !important; } /* ×アイコン（::before）は初期状態では非表示（メニューが開いている時だけ表示） */ #header .navbutton:before, #header .navbutton::before, #header #navBtn:before, #header #navBtn::before { display: none !important; visibility: hidden !important; opacity: 0 !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: url(/app/uploads/sites/1446/2025/12/menu_btn_close.svg) no-repeat center center transparent !important; background-size: cover !important; z-index: 1 !important; content: "" !important; pointer-events: none !important; /* クリックイベントを通す */ } /* 初期状態：三本線画像（::after）を×アイコンの上に重ねて表示 */ #header .navbutton:after, #header .navbutton::after, #header #navBtn:after, #header #navBtn::after, /* 動的ページの通常時も三本線を表示 */ body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .navbutton::after, body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) #navBtn::after, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .navbutton::after, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) #navBtn::after, body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .header-inner .navbutton::after, body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .header-inner #navBtn::after, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .header-inner .navbutton::after, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .header-inner #navBtn::after { display: block !important; visibility: visible !important; opacity: 1 !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: url(/app/uploads/sites/1446/2025/12/menu_btn.svg) no-repeat center center transparent !important; background-size: cover !important; z-index: 2 !important; content: "" !important; pointer-events: none !important; /* クリックイベントを通す */ } /* 動的ページSP：三本線と×ボタンのサイズと位置を静的ページと同じに */ body.es-dynamic-page #header .navbutton::before, body.es-dynamic-page #header .navbutton::after, body.es-dynamic-page #header #navBtn::before, body.es-dynamic-page #header #navBtn::after, body:has(.es-dynamic-page-marker) #header .navbutton::before, body:has(.es-dynamic-page-marker) #header .navbutton::after, body:has(.es-dynamic-page-marker) #header #navBtn::before, body:has(.es-dynamic-page-marker) #header #navBtn::after { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background-size: cover !important; margin: 0 !important; padding: 0 !important; transform: none !important; } /* メニューが開いている時（.is-openクラスまたは#globalNav.activeがある時）は三本線画像（::after）を非表示に */ /* ×アイコン（::before）は表示したまま */ html.is-open body #header .navbutton:after, body.is-open #header .navbutton:after, html.is-open body #header .navbutton::after, body.is-open #header .navbutton::after, html.is-open body #header #navBtn:after, body.is-open #header #navBtn:after, html.is-open body #header #navBtn::after, body.is-open #header #navBtn::after, .is-open body #header .navbutton:after, .is-open #header .navbutton:after, .is-open body #header .navbutton::after, .is-open #header .navbutton::after, .is-open body #header #navBtn:after, .is-open #header #navBtn:after, .is-open body #header #navBtn::after, .is-open #header #navBtn::after { display: none !important; visibility: hidden !important; opacity: 0 !important; } /* #globalNav.activeがある時も三本線を非表示（動的ページ用） */ body #header:has(#globalNav.active) #navBtn::after, body #header:has(.globalNav.active) #navBtn::after, body #header:has(#globalNav.active) .navbutton::after, body #header:has(.globalNav.active) .navbutton::after, body.es-dynamic-page #header:has(#globalNav.active) #navBtn::after, body.es-dynamic-page #header:has(.globalNav.active) #navBtn::after, body:has(.es-dynamic-page-marker) #header:has(#globalNav.active) #navBtn::after, body:has(.es-dynamic-page-marker) #header:has(.globalNav.active) #navBtn::after { display: none !important; visibility: hidden !important; opacity: 0 !important; } /* #globalNav[style*="display: block"]がある時も三本線を非表示（SP表示時） */ /* :has()セレクターが動作しない場合に備えて、直接セレクターも追加 */ body #header:has(#globalNav[style*="display: block"]) #navBtn::after, body #header:has(.globalNav[style*="display: block"]) #navBtn::after, body #header:has(#globalNav[style*="display: block"]) .navbutton::after, body #header:has(.globalNav[style*="display: block"]) .navbutton::after, html body #header:has(#globalNav[style*="display: block"]) #navBtn::after, html body #header:has(.globalNav[style*="display: block"]) #navBtn::after, html body #header:has(#globalNav[style*="display: block"]) .navbutton::after, html body #header:has(.globalNav[style*="display: block"]) .navbutton::after, /* 直接セレクター（:has()が動作しない場合のフォールバック） */ body #header #globalNav[style*="display: block"] ~ #navBtn::after, body #header .globalNav[style*="display: block"] ~ #navBtn::after, html body #header #globalNav[style*="display: block"] ~ #navBtn::after, html body #header .globalNav[style*="display: block"] ~ #navBtn::after { display: none !important; visibility: hidden !important; opacity: 0 !important; } /* メニューが閉じている時（.is-openクラスも#globalNav.activeもない時）は×アイコン（::before）を非表示に */ /* 三本線画像（::after）は表示したまま */ body:not(.is-open) #header .navbutton:before, body:not(.is-open) #header .navbutton::before, body:not(.is-open) #header #navBtn:before, body:not(.is-open) #header #navBtn::before, html:not(.is-open) body #header .navbutton:before, html:not(.is-open) body #header .navbutton::before, html:not(.is-open) body #header #navBtn:before, html:not(.is-open) body #header #navBtn::before, body #header:not(:has(#globalNav.active)) .navbutton:before, body #header:not(:has(.globalNav.active)) .navbutton:before, body #header:not(:has(#globalNav.active)) .navbutton::before, body #header:not(:has(.globalNav.active)) .navbutton::before, body #header:not(:has(#globalNav.active)) #navBtn:before, body #header:not(:has(.globalNav.active)) #navBtn:before, body #header:not(:has(#globalNav.active)) #navBtn::before, body #header:not(:has(.globalNav.active)) #navBtn::before, /* #globalNav[style*="display: block"]がない時も×を非表示 */ body #header:not(:has(#globalNav[style*="display: block"])) .navbutton::before, body #header:not(:has(.globalNav[style*="display: block"])) .navbutton::before, body #header:not(:has(#globalNav[style*="display: block"])) #navBtn::before, body #header:not(:has(.globalNav[style*="display: block"])) #navBtn::before, html body #header:not(:has(#globalNav[style*="display: block"])) .navbutton::before, html body #header:not(:has(.globalNav[style*="display: block"])) .navbutton::before, html body #header:not(:has(#globalNav[style*="display: block"])) #navBtn::before, html body #header:not(:has(.globalNav[style*="display: block"])) #navBtn::before, /* 動的ページも含む */ body.es-dynamic-page #header:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::before, body.es-dynamic-page #header:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::before, body:has(.es-dynamic-page-marker) #header:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::before, body:has(.es-dynamic-page-marker) #header:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::before { display: none !important; visibility: hidden !important; opacity: 0 !important; } /* メニューが閉じている時（.is-openクラスも#globalNav.activeもない時）は三本線（::after）を確実に表示 */ /* 静的ページ・動的ページ共通 */ body:not(.is-open) #header .navbutton:after, body:not(.is-open) #header .navbutton::after, body:not(.is-open) #header #navBtn:after, body:not(.is-open) #header #navBtn::after, html:not(.is-open) body #header .navbutton:after, html:not(.is-open) body #header .navbutton::after, html:not(.is-open) body #header #navBtn:after, html:not(.is-open) body #header #navBtn::after, body #header:not(:has(#globalNav.active)) .navbutton:after, body #header:not(:has(.globalNav.active)) .navbutton:after, body #header:not(:has(#globalNav.active)) .navbutton::after, body #header:not(:has(.globalNav.active)) .navbutton::after, body #header:not(:has(#globalNav.active)) #navBtn:after, body #header:not(:has(.globalNav.active)) #navBtn:after, body #header:not(:has(#globalNav.active)) #navBtn::after, body #header:not(:has(.globalNav.active)) #navBtn::after, /* #globalNav[style*="display: block"]がない時も三本線を表示 */ body #header:not(:has(#globalNav[style*="display: block"])) .navbutton::after, body #header:not(:has(.globalNav[style*="display: block"])) .navbutton::after, body #header:not(:has(#globalNav[style*="display: block"])) #navBtn::after, body #header:not(:has(.globalNav[style*="display: block"])) #navBtn::after, html body #header:not(:has(#globalNav[style*="display: block"])) .navbutton::after, html body #header:not(:has(.globalNav[style*="display: block"])) .navbutton::after, html body #header:not(:has(#globalNav[style*="display: block"])) #navBtn::after, html body #header:not(:has(.globalNav[style*="display: block"])) #navBtn::after, /* 動的ページも含む */ body.es-dynamic-page #header:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::after, body.es-dynamic-page #header:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::after, body:has(.es-dynamic-page-marker) #header:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::after, body:has(.es-dynamic-page-marker) #header:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::after { display: block !important; visibility: visible !important; opacity: 1 !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: url(/app/uploads/sites/1446/2025/12/menu_btn.svg) no-repeat center center transparent !important; background-size: cover !important; z-index: 2 !important; content: "" !important; pointer-events: none !important; } /* メニューが開いている時（.is-openクラスまたは#globalNav.activeがある時）は×アイコン（::before）を表示 */ html.is-open body #header .navbutton:before, html.is-open body #header .navbutton::before, body.is-open #header .navbutton:before, body.is-open #header .navbutton::before, html.is-open body #header #navBtn:before, html.is-open body #header #navBtn::before, body.is-open #header #navBtn:before, body.is-open #header #navBtn::before, body #header:has(#globalNav.active) #navBtn::before, body #header:has(.globalNav.active) #navBtn::before, body #header:has(#globalNav.active) .navbutton::before, body #header:has(.globalNav.active) .navbutton::before, body.es-dynamic-page #header:has(#globalNav.active) #navBtn::before, body.es-dynamic-page #header:has(.globalNav.active) #navBtn::before, body.es-dynamic-page #header:has(#globalNav.active) .navbutton::before, body.es-dynamic-page #header:has(.globalNav.active) .navbutton::before, body:has(.es-dynamic-page-marker) #header:has(#globalNav.active) #navBtn::before, body:has(.es-dynamic-page-marker) #header:has(.globalNav.active) #navBtn::before, body:has(.es-dynamic-page-marker) #header:has(#globalNav.active) .navbutton::before, body:has(.es-dynamic-page-marker) #header:has(.globalNav.active) .navbutton::before, /* 追従時かつメニュー展開時の×ボタンの位置を静的ページと同じに */ body.es-dynamic-page #header.fixed:has(#globalNav.active) #navBtn::before, body.es-dynamic-page #header.fixed:has(.globalNav.active) #navBtn::before, body.es-dynamic-page #header.fixed:has(#globalNav.active) .navbutton::before, body.es-dynamic-page #header.fixed:has(.globalNav.active) .navbutton::before, body.es-dynamic-page #header.sticky:has(#globalNav.active) #navBtn::before, body.es-dynamic-page #header.sticky:has(.globalNav.active) #navBtn::before, body.es-dynamic-page #header.sticky:has(#globalNav.active) .navbutton::before, body.es-dynamic-page #header.sticky:has(.globalNav.active) .navbutton::before, body.es-dynamic-page #header.scrolled:has(#globalNav.active) #navBtn::before, body.es-dynamic-page #header.scrolled:has(.globalNav.active) #navBtn::before, body.es-dynamic-page #header.scrolled:has(#globalNav.active) .navbutton::before, body.es-dynamic-page #header.scrolled:has(.globalNav.active) .navbutton::before, body.es-dynamic-page #header[data-scrolled="true"]:has(#globalNav.active) #navBtn::before, body.es-dynamic-page #header[data-scrolled="true"]:has(.globalNav.active) #navBtn::before, body.es-dynamic-page #header[data-scrolled="true"]:has(#globalNav.active) .navbutton::before, body.es-dynamic-page #header[data-scrolled="true"]:has(.globalNav.active) .navbutton::before, body:has(.es-dynamic-page-marker) #header.fixed:has(#globalNav.active) #navBtn::before, body:has(.es-dynamic-page-marker) #header.fixed:has(.globalNav.active) #navBtn::before, body:has(.es-dynamic-page-marker) #header.fixed:has(#globalNav.active) .navbutton::before, body:has(.es-dynamic-page-marker) #header.fixed:has(.globalNav.active) .navbutton::before, body:has(.es-dynamic-page-marker) #header.sticky:has(#globalNav.active) #navBtn::before, body:has(.es-dynamic-page-marker) #header.sticky:has(.globalNav.active) #navBtn::before, body:has(.es-dynamic-page-marker) #header.sticky:has(#globalNav.active) .navbutton::before, body:has(.es-dynamic-page-marker) #header.sticky:has(.globalNav.active) .navbutton::before, body:has(.es-dynamic-page-marker) #header.scrolled:has(#globalNav.active) #navBtn::before, body:has(.es-dynamic-page-marker) #header.scrolled:has(.globalNav.active) #navBtn::before, body:has(.es-dynamic-page-marker) #header.scrolled:has(#globalNav.active) .navbutton::before, body:has(.es-dynamic-page-marker) #header.scrolled:has(.globalNav.active) .navbutton::before, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"]:has(#globalNav.active) #navBtn::before, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"]:has(.globalNav.active) #navBtn::before, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"]:has(#globalNav.active) .navbutton::before, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"]:has(.globalNav.active) .navbutton::before { display: block !important; visibility: visible !important; opacity: 1 !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: url(/app/uploads/sites/1446/2025/12/menu_btn_close.svg) no-repeat center center transparent !important; background-size: cover !important; z-index: 1 !important; content: "" !important; pointer-events: none !important; margin: 0 !important; padding: 0 !important; transform: none !important; } /* #globalNav[style*="display: block"]がある時も×アイコンを表示（SP表示時） */ /* 三本線と同じサイズと位置に統一 */ body #header:has(#globalNav[style*="display: block"]) #navBtn::before, body #header:has(.globalNav[style*="display: block"]) #navBtn::before, body #header:has(#globalNav[style*="display: block"]) .navbutton::before, body #header:has(.globalNav[style*="display: block"]) .navbutton::before, html body #header:has(#globalNav[style*="display: block"]) #navBtn::before, html body #header:has(.globalNav[style*="display: block"]) #navBtn::before, html body #header:has(#globalNav[style*="display: block"]) .navbutton::before, html body #header:has(.globalNav[style*="display: block"]) .navbutton::before, /* 直接セレクター（:has()が動作しない場合のフォールバック） */ body #header #globalNav[style*="display: block"] ~ #navBtn::before, body #header .globalNav[style*="display: block"] ~ #navBtn::before, html body #header #globalNav[style*="display: block"] ~ #navBtn::before, html body #header .globalNav[style*="display: block"] ~ #navBtn::before { display: block !important; visibility: visible !important; opacity: 1 !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: url(/app/uploads/sites/1446/2025/12/menu_btn_close.svg) no-repeat center center transparent !important; background-size: cover !important; z-index: 1 !important; content: "" !important; pointer-events: none !important; margin: 0 !important; padding: 0 !important; transform: none !important; } /* ======================================== メニューが閉じている時：三本線を強制的に表示（最優先） ======================================== */ /* すべてのパターンで、閉じている時は三本線を表示 */ /* 静的ページ・動的ページ・通常時・追従時すべてをカバー */ /* 静的ページ：通常時・追従時 */ #header:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::after, #header:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::after, #header.fixed:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::after, #header.fixed:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::after, #header.sticky:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::after, #header.sticky:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::after, #header.scrolled:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::after, #header.scrolled:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::after, #header[data-scrolled="true"]:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::after, #header[data-scrolled="true"]:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::after, body:not(.is-open) #header .navbutton::after, body:not(.is-open) #header #navBtn::after, body:not(.is-open) #header.fixed .navbutton::after, body:not(.is-open) #header.fixed #navBtn::after, body:not(.is-open) #header.sticky .navbutton::after, body:not(.is-open) #header.sticky #navBtn::after, body:not(.is-open) #header.scrolled .navbutton::after, body:not(.is-open) #header.scrolled #navBtn::after, body:not(.is-open) #header[data-scrolled="true"] .navbutton::after, body:not(.is-open) #header[data-scrolled="true"] #navBtn::after, html:not(.is-open) body #header .navbutton::after, html:not(.is-open) body #header #navBtn::after, html:not(.is-open) body #header.fixed .navbutton::after, html:not(.is-open) body #header.fixed #navBtn::after, html:not(.is-open) body #header.sticky .navbutton::after, html:not(.is-open) body #header.sticky #navBtn::after, html:not(.is-open) body #header.scrolled .navbutton::after, html:not(.is-open) body #header.scrolled #navBtn::after, html:not(.is-open) body #header[data-scrolled="true"] .navbutton::after, html:not(.is-open) body #header[data-scrolled="true"] #navBtn::after, body #header:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::after, body #header:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::after, body #header.fixed:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::after, body #header.fixed:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::after, body #header.sticky:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::after, body #header.sticky:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::after, body #header.scrolled:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::after, body #header.scrolled:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::after, body #header[data-scrolled="true"]:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::after, body #header[data-scrolled="true"]:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::after, html body #header:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::after, html body #header:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::after, html body #header.fixed:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::after, html body #header.fixed:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::after, html body #header.sticky:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::after, html body #header.sticky:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::after, html body #header.scrolled:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::after, html body #header.scrolled:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::after, html body #header[data-scrolled="true"]:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::after, html body #header[data-scrolled="true"]:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::after, /* 動的ページも含む */ body.es-dynamic-page #header:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::after, body.es-dynamic-page #header:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::after, body.es-dynamic-page #header.fixed:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::after, body.es-dynamic-page #header.fixed:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::after, body.es-dynamic-page #header.sticky:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::after, body.es-dynamic-page #header.sticky:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::after, body.es-dynamic-page #header.scrolled:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::after, body.es-dynamic-page #header.scrolled:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::after, body.es-dynamic-page #header[data-scrolled="true"]:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::after, body.es-dynamic-page #header[data-scrolled="true"]:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::after, body:has(.es-dynamic-page-marker) #header:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::after, body:has(.es-dynamic-page-marker) #header:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::after, body:has(.es-dynamic-page-marker) #header.fixed:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::after, body:has(.es-dynamic-page-marker) #header.fixed:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::after, body:has(.es-dynamic-page-marker) #header.sticky:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::after, body:has(.es-dynamic-page-marker) #header.sticky:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::after, body:has(.es-dynamic-page-marker) #header.scrolled:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::after, body:has(.es-dynamic-page-marker) #header.scrolled:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::after, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"]:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::after, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"]:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::after { display: block !important; visibility: visible !important; opacity: 1 !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: url(/app/uploads/sites/1446/2025/12/menu_btn.svg) no-repeat center center transparent !important; background-size: cover !important; z-index: 2 !important; content: "" !important; pointer-events: none !important; } /* メニューが閉じている時：×アイコンを強制的に非表示（最優先） */ #header:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::before, #header:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::before, body:not(.is-open) #header .navbutton::before, body:not(.is-open) #header #navBtn::before, html:not(.is-open) body #header .navbutton::before, html:not(.is-open) body #header #navBtn::before, body #header:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::before, body #header:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::before, html body #header:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::before, html body #header:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::before, /* 動的ページも含む */ body.es-dynamic-page #header:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::before, body.es-dynamic-page #header:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::before, body.es-dynamic-page #header.fixed:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::before, body.es-dynamic-page #header.fixed:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::before, body.es-dynamic-page #header.sticky:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::before, body.es-dynamic-page #header.sticky:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::before, body.es-dynamic-page #header.scrolled:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::before, body.es-dynamic-page #header.scrolled:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::before, body.es-dynamic-page #header[data-scrolled="true"]:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::before, body.es-dynamic-page #header[data-scrolled="true"]:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::before, body:has(.es-dynamic-page-marker) #header:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::before, body:has(.es-dynamic-page-marker) #header:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::before, body:has(.es-dynamic-page-marker) #header.fixed:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::before, body:has(.es-dynamic-page-marker) #header.fixed:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::before, body:has(.es-dynamic-page-marker) #header.sticky:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::before, body:has(.es-dynamic-page-marker) #header.sticky:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::before, body:has(.es-dynamic-page-marker) #header.scrolled:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::before, body:has(.es-dynamic-page-marker) #header.scrolled:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::before, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"]:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) .navbutton::before, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"]:not(:has(#globalNav.active)):not(:has(.globalNav.active)):not(:has(#globalNav[style*="display: block"])):not(:has(.globalNav[style*="display: block"])) #navBtn::before { display: none !important; visibility: hidden !important; opacity: 0 !important; } } /* 動的ページでも静的ページと同じようにサブメニューを表示（PC表示時のみ） */ @media (min-width: 769px) { /* 動的ページでもサブメニューを表示 */ body.es-dynamic-page #header .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu, html body.es-dynamic-page #header .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu, body:has(.es-dynamic-page-marker) #header .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu, html body:has(.es-dynamic-page-marker) #header .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } } /* 動的ページのsec-contactセクションのフォントサイズ */ /* JavaScriptで追加されたクラスに対してスタイルを適用 */ .sec-contact.es-dynamic-sec-contact, body.es-dynamic-page .sec-contact.es-dynamic-sec-contact, body:has(.es-dynamic-page-marker) .sec-contact.es-dynamic-sec-contact { font-size: 16px !important; } .sec-contact.es-dynamic-sec-contact *, body.es-dynamic-page .sec-contact.es-dynamic-sec-contact *, body:has(.es-dynamic-page-marker) .sec-contact.es-dynamic-sec-contact * { font-size: inherit !important; } /* 動的ページのsec-contactセクション内の特定要素は除外 */ .sec-contact.es-dynamic-sec-contact .unit-title-01, .sec-contact.es-dynamic-sec-contact .unit-btn-01, .sec-contact.es-dynamic-sec-contact .tel, .sec-contact.es-dynamic-sec-contact .time, body.es-dynamic-page .sec-contact.es-dynamic-sec-contact .unit-title-01, body.es-dynamic-page .sec-contact.es-dynamic-sec-contact .unit-btn-01, body.es-dynamic-page .sec-contact.es-dynamic-sec-contact .tel, body.es-dynamic-page .sec-contact.es-dynamic-sec-contact .time, body:has(.es-dynamic-page-marker) .sec-contact.es-dynamic-sec-contact .unit-title-01, body:has(.es-dynamic-page-marker) .sec-contact.es-dynamic-sec-contact .unit-btn-01, body:has(.es-dynamic-page-marker) .sec-contact.es-dynamic-sec-contact .tel, body:has(.es-dynamic-page-marker) .sec-contact.es-dynamic-sec-contact .time { font-size: inherit !important; } /* ヘッダのロゴとナビゲーション */ body.es-dynamic-page #header .logo, body.es-dynamic-page #header .logo a, /* 動的ページのヘッダ内のリンクとテキスト（通常時のみ） */ body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav, body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav *, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .logo, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .logo a, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav * { font-size: inherit !important; font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "Lato", sans-serif !important; color: inherit !important; } /* PC表示時：通常時と追従時を同じスタイルにするため、追従時特有のスタイルは削除 */ /* 動的ページのフッタのスタイル */ /* JavaScriptで追加されたクラスに対してスタイルを適用 */ .footer-wrapper-01.es-dynamic-footer, .footer-wrapper-01.es-dynamic-footer *, body.es-dynamic-page .footer-wrapper-01.es-dynamic-footer, body.es-dynamic-page .footer-wrapper-01.es-dynamic-footer *, body:has(.es-dynamic-page-marker) .footer-wrapper-01.es-dynamic-footer, body:has(.es-dynamic-page-marker) .footer-wrapper-01.es-dynamic-footer * { font-size: 14px !important; font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "Lato", sans-serif !important; color: #fff !important; } /* フッタナビゲーションのリンク */ .footer-wrapper-01.es-dynamic-footer .ft-nav li a, .footer-wrapper-01.es-dynamic-footer .ft-nav li a .title, body.es-dynamic-page .footer-wrapper-01.es-dynamic-footer .ft-nav li a, body.es-dynamic-page .footer-wrapper-01.es-dynamic-footer .ft-nav li a .title, body:has(.es-dynamic-page-marker) .footer-wrapper-01.es-dynamic-footer .ft-nav li a, body:has(.es-dynamic-page-marker) .footer-wrapper-01.es-dynamic-footer .ft-nav li a .title { font-size: 16px !important; font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "Lato", sans-serif !important; color: #fff !important; } /* sec-contactセクション内では、remの基準値を既存サイトと同じにする */ /* 既存サイトのhtmlのフォントサイズ（通常16px）を基準に、remが正しく機能するようにする */ /* いい生活CMSがhtmlに異なるフォントサイズを設定していても、.sec-contact内では16pxを基準にする */ .sec-contact { font-size: 16px !important; /* remの基準値を既存サイトと同じ16pxに設定 */ /* これにより、.sec-contact内で5rem = 80px（16px × 5）になる */ } #page, #contents, main { display: block !important; visibility: visible !important; opacity: 1 !important; } /* TOPページ（.home）の場合は、コンテンツをヘッダーに重ねる（padding-topなし） */ body.home #page, html body.home #page { padding-top: 0 !important; margin-top: 0 !important; } /* 下層ページ（TOPページ以外）で、ヘッダーの分だけ下から#pageを表示 */ /* TOPページは除外（body.es-page-top-active がない場合のみ適用） */ /* 動的ページでも適用 */ body:not(.es-page-top-active):not(.home) #page, body.es-dynamic-page #page, body:has(.es-dynamic-page-marker) #page { padding-top: 80px !important; /* PC表示時のヘッダーの高さ分のpadding-top */ } @media screen and (max-width: 768px) { /* TOPページ（.home）の場合は、コンテンツをヘッダーに重ねる（padding-topなし） */ body.home #page, html body.home #page { padding-top: 0 !important; margin-top: 0 !important; } body:not(.es-page-top-active):not(.home) #page { padding-top: 5px !important; /* SP表示時のヘッダーの高さ分（静的ページ） */ } body.es-dynamic-page #page, body:has(.es-dynamic-page-marker) #page { padding-top: 5px !important; /* SP表示時のヘッダーの高さ分（動的ページ：静的と同じ） */ } } /* パンくずリストのスタイル調整 */ /* 背景のグレーを削除 */ .main-header-bar.es-header-breadcrumb { background-color: transparent !important; background: transparent !important; background-image: none !important; } .main-header-bar.es-header-breadcrumb .es-container { background-color: transparent !important; background: transparent !important; background-image: none !important; } /* パンくずリスト内のli要素のフォントサイズ */ .main-header-bar.es-header-breadcrumb li, .main-header-bar.es-header-breadcrumb .breadcrumb-list li, .main-header-bar.es-header-breadcrumb .es-container li { font-size: 200% !important; } /* ======================================== ヘッダー・フッターの保護 ======================================== */ /* ヘッダーとフッターは既存のCSS（common.css）の制御を尊重 */ /* 最小限の調整のみ（既存のCSSを上書きしない） */ /* 通常時（追従していない時）も白背景・黒テキスト（静的ページ・動的ページ共通） */ /* headerの背景色を全面的に白にする */ html body #header, body #header, html body #header .header-inner, body #header .header-inner, html body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]), body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]), html body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .header-inner, body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .header-inner, html body #header.fixed, body #header.fixed, html body #header.sticky, body #header.sticky, html body #header.scrolled, body #header.scrolled, html body #header[data-scrolled="true"], body #header[data-scrolled="true"], html body #header.fixed .header-inner, body #header.fixed .header-inner, html body #header.sticky .header-inner, body #header.sticky .header-inner, html body #header.scrolled .header-inner, body #header.scrolled .header-inner, html body #header[data-scrolled="true"] .header-inner, body #header[data-scrolled="true"] .header-inner { background-color: #fff !important; background: #fff !important; background-image: none !important; color: #333 !important; } /* PC表示時：動的ページのheaderとheader-innerにoverflow: visibleを明示的に設定（サブメニューのシャドウが切れないように） */ @media (min-width: 769px) { body.es-dynamic-page #header, html body.es-dynamic-page #header, body:has(.es-dynamic-page-marker) #header, html body:has(.es-dynamic-page-marker) #header, body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]), html body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]), body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]), html body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]), /* 通常時（追従していない時）にも明示的に設定 */ body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled), html body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled), body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled), html body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled) { overflow: visible !important; /* サブメニューのシャドウが切れないように */ } /* header-innerにも通常時（追従していない時）にoverflow: visibleを設定 */ body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled) .header-inner, html body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled) .header-inner, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled) .header-inner, html body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled) .header-inner { overflow: visible !important; /* サブメニューのシャドウが切れないように */ } } /* PC表示時：通常時のナビゲーションテキストを黒に（静的ページ・動的ページ共通、お問い合わせ以外） */ @media (min-width: 769px) { html body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav a:not(.contact a), html body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav a:not(.contact a) .title, body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav a:not(.contact a), body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav a:not(.contact a) .title, html body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) #globalNav a:not(.contact a), html body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) #globalNav a:not(.contact a) .title, body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) #globalNav a:not(.contact a), body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) #globalNav a:not(.contact a) .title { color: #333 !important; } } /* SP表示時：通常時のナビゲーションテキストを白に（背景が黒のため） */ @media (max-width: 768px) { html body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav a:not(.contact a), html body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav a:not(.contact a) .title, body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav a:not(.contact a), body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav a:not(.contact a) .title, html body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) #globalNav a:not(.contact a), html body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) #globalNav a:not(.contact a) .title, body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) #globalNav a:not(.contact a), body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) #globalNav a:not(.contact a) .title { color: #fff !important; } } /* PC表示時：通常時と追従時を同じスタイルにするため、追従時特有のスタイルは削除 */ /* SP表示時のみ追従時のスタイルを適用 */ @media (max-width: 768px) { /* ヘッダーが追従するときのスタイル（背景白、テキスト黒） */ html body #header.fixed, html body #header.sticky, html body #header.scrolled, html body #header[data-scrolled="true"], body #header.fixed, body #header.sticky, body #header.scrolled, body #header[data-scrolled="true"], html body #header[style*="position: fixed"], html body #header[style*="position: sticky"], body #header[style*="position: fixed"], body #header[style*="position: sticky"], html body #header[style*="background"], body #header[style*="background"] { background-color: #fff !important; background: #fff !important; background-image: none !important; color: #333 !important; } /* 動的ページのSP追従時：テキストカラーを白に */ body.es-dynamic-page #header.fixed, body.es-dynamic-page #header.sticky, body.es-dynamic-page #header.scrolled, body.es-dynamic-page #header[data-scrolled="true"], body:has(.es-dynamic-page-marker) #header.fixed, body:has(.es-dynamic-page-marker) #header.sticky, body:has(.es-dynamic-page-marker) #header.scrolled, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"], body.es-dynamic-page #header.fixed .globalNav a, body.es-dynamic-page #header.fixed .globalNav a .title, body.es-dynamic-page #header.fixed .globalNav span, body.es-dynamic-page #header.sticky .globalNav a, body.es-dynamic-page #header.sticky .globalNav a .title, body.es-dynamic-page #header.sticky .globalNav span, body.es-dynamic-page #header.scrolled .globalNav a, body.es-dynamic-page #header.scrolled .globalNav a .title, body.es-dynamic-page #header.scrolled .globalNav span, body.es-dynamic-page #header[data-scrolled="true"] .globalNav a, body.es-dynamic-page #header[data-scrolled="true"] .globalNav a .title, body.es-dynamic-page #header[data-scrolled="true"] .globalNav span, body:has(.es-dynamic-page-marker) #header.fixed .globalNav a, body:has(.es-dynamic-page-marker) #header.fixed .globalNav a .title, body:has(.es-dynamic-page-marker) #header.fixed .globalNav span, body:has(.es-dynamic-page-marker) #header.sticky .globalNav a, body:has(.es-dynamic-page-marker) #header.sticky .globalNav a .title, body:has(.es-dynamic-page-marker) #header.sticky .globalNav span, body:has(.es-dynamic-page-marker) #header.scrolled .globalNav a, body:has(.es-dynamic-page-marker) #header.scrolled .globalNav a .title, body:has(.es-dynamic-page-marker) #header.scrolled .globalNav span, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"] .globalNav a, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"] .globalNav a .title, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"] .globalNav span, body.es-dynamic-page #header.fixed a:not(.globalNav a):not(.globalNav a *), body.es-dynamic-page #header.fixed span:not(.globalNav span):not(.globalNav span *), body.es-dynamic-page #header.fixed p, body.es-dynamic-page #header.fixed li, body.es-dynamic-page #header.sticky a:not(.globalNav a):not(.globalNav a *), body.es-dynamic-page #header.sticky span:not(.globalNav span):not(.globalNav span *), body.es-dynamic-page #header.sticky p, body.es-dynamic-page #header.sticky li, body.es-dynamic-page #header.scrolled a:not(.globalNav a):not(.globalNav a *), body.es-dynamic-page #header.scrolled span:not(.globalNav span):not(.globalNav span *), body.es-dynamic-page #header.scrolled p, body.es-dynamic-page #header.scrolled li, body.es-dynamic-page #header[data-scrolled="true"] a:not(.globalNav a):not(.globalNav a *), body.es-dynamic-page #header[data-scrolled="true"] span:not(.globalNav span):not(.globalNav span *), body.es-dynamic-page #header[data-scrolled="true"] p, body.es-dynamic-page #header[data-scrolled="true"] li, body:has(.es-dynamic-page-marker) #header.fixed a:not(.globalNav a):not(.globalNav a *), body:has(.es-dynamic-page-marker) #header.fixed span:not(.globalNav span):not(.globalNav span *), body:has(.es-dynamic-page-marker) #header.fixed p, body:has(.es-dynamic-page-marker) #header.fixed li, body:has(.es-dynamic-page-marker) #header.sticky a:not(.globalNav a):not(.globalNav a *), body:has(.es-dynamic-page-marker) #header.sticky span:not(.globalNav span):not(.globalNav span *), body:has(.es-dynamic-page-marker) #header.sticky p, body:has(.es-dynamic-page-marker) #header.sticky li, body:has(.es-dynamic-page-marker) #header.scrolled a:not(.globalNav a):not(.globalNav a *), body:has(.es-dynamic-page-marker) #header.scrolled span:not(.globalNav span):not(.globalNav span *), body:has(.es-dynamic-page-marker) #header.scrolled p, body:has(.es-dynamic-page-marker) #header.scrolled li, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"] a:not(.globalNav a):not(.globalNav a *), body:has(.es-dynamic-page-marker) #header[data-scrolled="true"] span:not(.globalNav span):not(.globalNav span *), body:has(.es-dynamic-page-marker) #header[data-scrolled="true"] p, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"] li { color: #fff !important; } } /* ホームページの通常時（追従していない時）は白背景 */ html body.home #header:not([data-scrolled="true"]):not(.fixed):not(.sticky):not(.scrolled), body.home #header:not([data-scrolled="true"]):not(.fixed):not(.sticky):not(.scrolled) { background-color: #fff !important; background: #fff !important; background-image: none !important; } /* ホームページの通常時のナビゲーションテキストを黒に */ html body.home #header:not([data-scrolled="true"]):not(.fixed):not(.sticky):not(.scrolled) .globalNav a, html body.home #header:not([data-scrolled="true"]):not(.fixed):not(.sticky):not(.scrolled) .globalNav a .title, body.home #header:not([data-scrolled="true"]):not(.fixed):not(.sticky):not(.scrolled) .globalNav a, body.home #header:not([data-scrolled="true"]):not(.fixed):not(.sticky):not(.scrolled) .globalNav a .title { color: #333 !important; } /* PC表示時：通常時と追従時を同じスタイルにするため、追従時特有のスタイルは削除 */ /* SP表示時のみ追従時のスタイルを適用 */ @media (max-width: 768px) { /* ホームページの追従時は白背景 */ html body.home #header[data-scrolled="true"], html body.home #header.fixed, html body.home #header.sticky, html body.home #header.scrolled, body.home #header[data-scrolled="true"], body.home #header.fixed, body.home #header.sticky, body.home #header.scrolled { background-color: #fff !important; background: #fff !important; background-image: none !important; color: #333 !important; } } /* スクロール時は常に#headerの背景を白に（より強力なセレクター） */ html body #header { transition: background-color 0.3s ease !important; } /* PC表示時：通常時と追従時を同じスタイルにするため、追従時特有のスタイルは削除 */ /* SP表示時のみ追従時のスタイルを適用 */ @media (max-width: 768px) { /* data-scrolled属性が付いている時は背景を白に - より強力なセレクター */ html body #header[data-scrolled="true"], body #header[data-scrolled="true"], html body #header.scrolled, body #header.scrolled, html body #header[data-scrolled="true"][style*="background"], body #header[data-scrolled="true"][style*="background"], html body #header.scrolled[style*="background"], body #header.scrolled[style*="background"] { background-color: #fff !important; background: #fff !important; background-image: none !important; color: #333 !important; } } /* PC表示時：通常時と追従時を同じスタイルにするため、追従時特有のスタイルは削除 */ /* SP表示時のみ追従時のスタイルを適用 */ @media (max-width: 768px) { /* スクロール時のみ.header-innerの背景を白に - より強力なセレクター */ html body #header[data-scrolled="true"] .header-inner, html body #header.scrolled .header-inner, body #header[data-scrolled="true"] .header-inner, body #header.scrolled .header-inner, html body #header[data-scrolled="true"] .header-inner, html body #header.scrolled .header-inner, #header[data-scrolled="true"] .header-inner, #header.scrolled .header-inner { background-color: #fff !important; background: #fff !important; background-image: none !important; } } /* SP表示時：ヘッダーを追従させる（83pxを明確に指定） */ @media (max-width: 768px) { body #header[data-scrolled="true"], html body #header[data-scrolled="true"], body #header.scrolled, html body #header.scrolled, body #header.fixed, body #header.sticky { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 83px !important; min-height: 83px !important; max-height: 83px !important; margin-top: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; transform: translateY(0) !important; -webkit-transform: translateY(0) !important; -moz-transform: translateY(0) !important; -ms-transform: translateY(0) !important; -o-transform: translateY(0) !important; z-index: 9998 !important; /* ヘッダーがメニューより下にならないように */ display: flex !important; /* ハンバーガーボタンを右側に配置 */ align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; /* 改行を防ぐ */ } /* SP追従時のheader-innerもflexboxを維持（83pxを明確に指定） */ body #header[data-scrolled="true"] .header-inner, html body #header[data-scrolled="true"] .header-inner, body #header.scrolled .header-inner, html body #header.scrolled .header-inner, body #header.fixed .header-inner, body #header.sticky .header-inner { display: flex !important; align-items: center !important; justify-content: space-between !important; flex: 1 !important; min-width: 0 !important; /* flexboxの縮小を許可 */ overflow: visible !important; /* ハンバーガーボタンが見えるように、サブメニューのシャドウが切れないように */ height: 83px !important; min-height: 83px !important; max-height: 83px !important; position: relative !important; } /* 動的ページの追従時（スクロール時）のheaderとheader-innerにもoverflow: visibleを明示的に設定 */ @media (min-width: 769px) { body.es-dynamic-page #header.fixed, html body.es-dynamic-page #header.fixed, body.es-dynamic-page #header.sticky, html body.es-dynamic-page #header.sticky, body.es-dynamic-page #header.scrolled, html body.es-dynamic-page #header.scrolled, body:has(.es-dynamic-page-marker) #header.fixed, html body:has(.es-dynamic-page-marker) #header.fixed, body:has(.es-dynamic-page-marker) #header.sticky, html body:has(.es-dynamic-page-marker) #header.sticky, body:has(.es-dynamic-page-marker) #header.scrolled, html body:has(.es-dynamic-page-marker) #header.scrolled { overflow: visible !important; /* サブメニューのシャドウが切れないように */ } body.es-dynamic-page #header.fixed .header-inner, html body.es-dynamic-page #header.fixed .header-inner, body.es-dynamic-page #header.sticky .header-inner, html body.es-dynamic-page #header.sticky .header-inner, body.es-dynamic-page #header.scrolled .header-inner, html body.es-dynamic-page #header.scrolled .header-inner, body:has(.es-dynamic-page-marker) #header.fixed .header-inner, html body:has(.es-dynamic-page-marker) #header.fixed .header-inner, body:has(.es-dynamic-page-marker) #header.sticky .header-inner, html body:has(.es-dynamic-page-marker) #header.sticky .header-inner, body:has(.es-dynamic-page-marker) #header.scrolled .header-inner, html body:has(.es-dynamic-page-marker) #header.scrolled .header-inner { overflow: visible !important; /* サブメニューのシャドウが切れないように */ } } /* SP追従時のハンバーガーボタンを右側に配置（header-innerの中にある場合） */ body #header[data-scrolled="true"] .header-inner #navBtn, html body #header[data-scrolled="true"] .header-inner #navBtn, body #header.scrolled .header-inner #navBtn, html body #header.scrolled .header-inner #navBtn, body #header.fixed .header-inner #navBtn, body #header.sticky .header-inner #navBtn, body #header[data-scrolled="true"] .header-inner .navbutton, html body #header[data-scrolled="true"] .header-inner .navbutton, body #header.scrolled .header-inner .navbutton, html body #header.scrolled .header-inner .navbutton, body #header.fixed .header-inner .navbutton, body #header.sticky .header-inner .navbutton, body #header[data-scrolled="true"] #navBtn, html body #header[data-scrolled="true"] #navBtn, body #header.scrolled #navBtn, html body #header.scrolled #navBtn, body #header.fixed #navBtn, body #header.sticky #navBtn, body #header[data-scrolled="true"] .navbutton, html body #header[data-scrolled="true"] .navbutton, body #header.scrolled .navbutton, html body #header.scrolled .navbutton, body #header.fixed .navbutton, body #header.sticky .navbutton, /* 動的ページ専用のスタイル */ body.es-dynamic-page #header[data-scrolled="true"] .header-inner #navBtn, body.es-dynamic-page #header.scrolled .header-inner #navBtn, body.es-dynamic-page #header.fixed .header-inner #navBtn, body.es-dynamic-page #header.sticky .header-inner #navBtn, body.es-dynamic-page #header[data-scrolled="true"] #navBtn, body.es-dynamic-page #header.scrolled #navBtn, body.es-dynamic-page #header.fixed #navBtn, body.es-dynamic-page #header.sticky #navBtn, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"] .header-inner #navBtn, body:has(.es-dynamic-page-marker) #header.scrolled .header-inner #navBtn, body:has(.es-dynamic-page-marker) #header.fixed .header-inner #navBtn, body:has(.es-dynamic-page-marker) #header.sticky .header-inner #navBtn, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"] #navBtn, body:has(.es-dynamic-page-marker) #header.scrolled #navBtn, body:has(.es-dynamic-page-marker) #header.fixed #navBtn, body:has(.es-dynamic-page-marker) #header.sticky #navBtn { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; order: 2 !important; /* 右側に配置 */ flex-shrink: 0 !important; flex-grow: 0 !important; /* 拡大しない */ align-self: center !important; /* 垂直方向の中央揃え */ margin-left: auto !important; /* 右端に配置 */ z-index: 9999 !important; /* クリック可能にする */ pointer-events: auto !important; /* クリック可能にする */ cursor: pointer !important; width: auto !important; /* 動的ページでも静的ページと同じスタイル */ height: 55px !important; min-height: 55px !important; max-height: 55px !important; padding: 10px 30px !important; /* 動的ページでも静的ページと同じスタイル */ display: flex !important; align-items: center !important; justify-content: center !important; } /* SP追従時のハンバーガーボタンの疑似要素もクリック可能にする */ body #header[data-scrolled="true"] #navBtn::before, html body #header[data-scrolled="true"] #navBtn::before, body #header.scrolled #navBtn::before, html body #header.scrolled #navBtn::before, body #header.fixed #navBtn::before, body #header.sticky #navBtn::before, body #header[data-scrolled="true"] .navbutton::before, html body #header[data-scrolled="true"] .navbutton::before, body #header.scrolled .navbutton::before, html body #header.scrolled .navbutton::before, body #header.fixed .navbutton::before, body #header.sticky .navbutton::before, body #header[data-scrolled="true"] #navBtn::after, html body #header[data-scrolled="true"] #navBtn::after, body #header.scrolled #navBtn::after, html body #header.scrolled #navBtn::after, body #header.fixed #navBtn::after, body #header.sticky #navBtn::after, body #header[data-scrolled="true"] .navbutton::after, html body #header[data-scrolled="true"] .navbutton::after, body #header.scrolled .navbutton::after, html body #header.scrolled .navbutton::after, body #header.fixed .navbutton::after, body #header.sticky .navbutton::after { pointer-events: none !important; /* 疑似要素はクリックイベントを通す */ } /* SP追従時にナビゲーションが開いた時（.active）のハンバーガーボタンを右上に固定 */ body #header[data-scrolled="true"] .header-inner #navBtn, html body #header[data-scrolled="true"] .header-inner #navBtn, body #header.scrolled .header-inner #navBtn, html body #header.scrolled .header-inner #navBtn, body #header.fixed .header-inner #navBtn, body #header.sticky .header-inner #navBtn, body #header[data-scrolled="true"] .header-inner .navbutton, html body #header[data-scrolled="true"] .header-inner .navbutton, body #header.scrolled .header-inner .navbutton, html body #header.scrolled .header-inner .navbutton, body #header.fixed .header-inner .navbutton, body #header.sticky .header-inner .navbutton { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; order: 2 !important; flex-shrink: 0 !important; flex-grow: 0 !important; align-self: center !important; margin-left: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; z-index: 9999 !important; pointer-events: auto !important; cursor: pointer !important; height: 55px !important; min-height: 55px !important; max-height: 55px !important; display: flex !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; } /* SP追従時にナビゲーションが開いた時（.active）のheader-innerもflexboxを維持（83pxを明確に指定） */ body #header[data-scrolled="true"] .header-inner, html body #header[data-scrolled="true"] .header-inner, body #header.scrolled .header-inner, html body #header.scrolled .header-inner, body #header.fixed .header-inner, body #header.sticky .header-inner, body.is-open #header[data-scrolled="true"] .header-inner, html.is-open body #header[data-scrolled="true"] .header-inner, body.is-open #header.scrolled .header-inner, html.is-open body #header.scrolled .header-inner, body.is-open #header.fixed .header-inner, body.is-open #header.sticky .header-inner { display: flex !important; align-items: center !important; justify-content: space-between !important; flex: 1 !important; min-width: 0 !important; overflow: visible !important; height: 83px !important; min-height: 83px !important; max-height: 83px !important; position: relative !important; } /* SP追従時にナビゲーションが開いた時（#globalNav.active）のハンバーガーボタンをheader-innerの右上に固定 */ body.is-open #header[data-scrolled="true"] .header-inner #navBtn, html.is-open body #header[data-scrolled="true"] .header-inner #navBtn, body.is-open #header.scrolled .header-inner #navBtn, html.is-open body #header.scrolled .header-inner #navBtn, body.is-open #header.fixed .header-inner #navBtn, body.is-open #header.sticky .header-inner #navBtn, body.is-open #header[data-scrolled="true"] .header-inner .navbutton, html.is-open body #header[data-scrolled="true"] .header-inner .navbutton, body.is-open #header.scrolled .header-inner .navbutton, html.is-open body #header.scrolled .header-inner .navbutton, body.is-open #header.fixed .header-inner .navbutton, body.is-open #header.sticky .header-inner .navbutton, body #header[data-scrolled="true"] #globalNav.active .header-inner #navBtn, html body #header[data-scrolled="true"] #globalNav.active .header-inner #navBtn, body #header.scrolled #globalNav.active .header-inner #navBtn, html body #header.scrolled #globalNav.active .header-inner #navBtn, body #header.fixed #globalNav.active .header-inner #navBtn, body #header.sticky #globalNav.active .header-inner #navBtn, body #header[data-scrolled="true"] .globalNav.active .header-inner #navBtn, html body #header[data-scrolled="true"] .globalNav.active .header-inner #navBtn, body #header.scrolled .globalNav.active .header-inner #navBtn, html body #header.scrolled .globalNav.active .header-inner #navBtn, body #header.fixed .globalNav.active .header-inner #navBtn, body #header.sticky .globalNav.active .header-inner #navBtn { position: absolute !important; top: 0 !important; right: 0 !important; bottom: auto !important; left: auto !important; order: 2 !important; flex-shrink: 0 !important; flex-grow: 0 !important; align-self: center !important; margin-left: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; margin-right: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; z-index: 10000 !important; pointer-events: auto !important; cursor: pointer !important; height: 55px !important; min-height: 55px !important; max-height: 55px !important; line-height: 55px !important; display: flex !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; } /* SP追従時にナビゲーションが開いた時（.active）のheader-innerもflexboxを維持（重複を避けるため、より強力なセレクター、83pxを明確に指定） */ body.is-open #header[data-scrolled="true"] .header-inner, html.is-open body #header[data-scrolled="true"] .header-inner, body.is-open #header.scrolled .header-inner, html.is-open body #header.scrolled .header-inner, body.is-open #header.fixed .header-inner, body.is-open #header.sticky .header-inner, body #header[data-scrolled="true"] #globalNav.active .header-inner, html body #header[data-scrolled="true"] #globalNav.active .header-inner, body #header.scrolled #globalNav.active .header-inner, html body #header.scrolled #globalNav.active .header-inner, body #header.fixed #globalNav.active .header-inner, body #header.sticky #globalNav.active .header-inner { display: flex !important; align-items: center !important; justify-content: space-between !important; flex: 1 !important; min-width: 0 !important; overflow: visible !important; height: 83px !important; min-height: 83px !important; max-height: 83px !important; position: relative !important; } } /* ヘッダー内の子要素も背景白に */ body #header.fixed .header-inner, body #header.sticky .header-inner, body #header.scrolled .header-inner, body #header[style*="position: fixed"] .header-inner, body #header[style*="position: sticky"] .header-inner, html body #header.fixed .header-inner, html body #header.sticky .header-inner, html body #header.scrolled .header-inner { background-color: #fff !important; background: #fff !important; } /* globalNavの背景も白に（ただし、SP表示で.activeの時は黒のまま） */ body #header.fixed .globalNav:not(.active), body #header.sticky .globalNav:not(.active), body #header.scrolled .globalNav:not(.active), body #header[style*="position: fixed"] .globalNav:not(.active), body #header[style*="position: sticky"] .globalNav:not(.active), html body #header.fixed .globalNav:not(.active), html body #header.sticky .globalNav:not(.active), html body #header.scrolled .globalNav:not(.active), body #header.fixed #globalNav:not(.active), body #header.sticky #globalNav:not(.active), body #header.scrolled #globalNav:not(.active), body #header[style*="position: fixed"] #globalNav:not(.active), body #header[style*="position: sticky"] #globalNav:not(.active) { background-color: #fff !important; background: #fff !important; } /* スクロール時でも、ハンバーガーメニュー展開時（.active）は背景を黒のままに */ @media (max-width: 768px) { /* スクロール時にハンバーガーメニューが展開されている場合、#headerと.header-innerの背景も黒にする */ body #header[data-scrolled="true"].menu-active, html body #header[data-scrolled="true"].menu-active, body #header.scrolled.menu-active, html body #header.scrolled.menu-active { background-color: #000 !important; background: #000 !important; background-image: none !important; } body #header[data-scrolled="true"].menu-active .header-inner, html body #header[data-scrolled="true"].menu-active .header-inner, body #header.scrolled.menu-active .header-inner, html body #header.scrolled.menu-active .header-inner { background-color: #000 !important; background: #000 !important; background-image: none !important; } body #header.fixed #globalNav.active, body #header.sticky #globalNav.active, body #header.scrolled #globalNav.active, body #header[data-scrolled="true"] #globalNav.active, body #header[style*="position: fixed"] #globalNav.active, body #header[style*="position: sticky"] #globalNav.active, html body #header.fixed #globalNav.active, html body #header.sticky #globalNav.active, html body #header.scrolled #globalNav.active, html body #header[data-scrolled="true"] #globalNav.active, body #header.fixed .globalNav.active, body #header.sticky .globalNav.active, body #header.scrolled .globalNav.active, body #header[data-scrolled="true"] .globalNav.active, body #header[style*="position: fixed"] .globalNav.active, body #header[style*="position: sticky"] .globalNav.active, html body #header.fixed .globalNav.active, html body #header.sticky .globalNav.active, html body #header.scrolled .globalNav.active, html body #header[data-scrolled="true"] .globalNav.active { background-color: #000 !important; background: #000 !important; background-image: none !important; } body #header.fixed #globalNav.active .nav-inner, body #header.sticky #globalNav.active .nav-inner, body #header.scrolled #globalNav.active .nav-inner, body #header[style*="position: fixed"] #globalNav.active .nav-inner, body #header[style*="position: sticky"] #globalNav.active .nav-inner, html body #header.fixed #globalNav.active .nav-inner, html body #header.sticky #globalNav.active .nav-inner, html body #header.scrolled #globalNav.active .nav-inner, body #header.fixed .globalNav.active .nav-inner, body #header.sticky .globalNav.active .nav-inner, body #header.scrolled .globalNav.active .nav-inner, body #header[style*="position: fixed"] .globalNav.active .nav-inner, body #header[style*="position: sticky"] .globalNav.active .nav-inner, html body #header.fixed .globalNav.active .nav-inner, html body #header.sticky .globalNav.active .nav-inner, html body #header.scrolled .globalNav.active .nav-inner { background-color: #000 !important; background: #000 !important; background-image: none !important; } /* スクロール時でも、ハンバーガーメニュー展開時はテキストを白のままに */ body #header.fixed #globalNav.active *, body #header.sticky #globalNav.active *, body #header.scrolled #globalNav.active *, body #header[style*="position: fixed"] #globalNav.active *, body #header[style*="position: sticky"] #globalNav.active *, html body #header.fixed #globalNav.active *, html body #header.sticky #globalNav.active *, html body #header.scrolled #globalNav.active *, body #header.fixed .globalNav.active *, body #header.sticky .globalNav.active *, body #header.scrolled .globalNav.active *, body #header[style*="position: fixed"] .globalNav.active *, body #header[style*="position: sticky"] .globalNav.active *, html body #header.fixed .globalNav.active *, html body #header.sticky .globalNav.active *, html body #header.scrolled .globalNav.active * { color: #fff !important; } } /* globalNav内の子要素も背景白に（ただし、SP表示で.activeの時は黒） */ body #header.fixed .globalNav:not(.active) .nav-inner, body #header.sticky .globalNav:not(.active) .nav-inner, body #header.scrolled .globalNav:not(.active) .nav-inner, body #header[style*="position: fixed"] .globalNav:not(.active) .nav-inner, body #header[style*="position: sticky"] .globalNav:not(.active) .nav-inner, body #header.fixed #globalNav:not(.active) .nav-inner, body #header.sticky #globalNav:not(.active) .nav-inner, body #header.scrolled #globalNav:not(.active) .nav-inner { background-color: #fff !important; background: #fff !important; } #header.fixed *, #header.sticky *, #header.scrolled *, #header[style*="position: fixed"] *, #header[style*="position: sticky"] * { color: #333 !important; } #header.fixed a, #header.sticky a, #header.scrolled a, #header[style*="position: fixed"] a, #header[style*="position: sticky"] a { color: #333 !important; } #header.fixed .logo a, #header.sticky .logo a, #header.scrolled .logo a, #header[style*="position: fixed"] .logo a, #header[style*="position: sticky"] .logo a { color: #333 !important; } /* お問い合わせボタンは除外 */ #header.fixed #globalNav a:not(.contact a), #header.sticky #globalNav a:not(.contact a), #header.scrolled #globalNav a:not(.contact a), #header[data-scrolled="true"] #globalNav a:not(.contact a), #header[style*="position: fixed"] #globalNav a:not(.contact a), #header[style*="position: sticky"] #globalNav a:not(.contact a), #header.fixed .globalNav a:not(.contact a), #header.sticky .globalNav a:not(.contact a), #header.scrolled .globalNav a:not(.contact a), #header[data-scrolled="true"] .globalNav a:not(.contact a), #header[style*="position: fixed"] .globalNav a:not(.contact a), #header[style*="position: sticky"] .globalNav a:not(.contact a) { color: #333 !important; } /* お問い合わせボタンは除外 */ #header.fixed #globalNav a:not(.contact a) .title, #header.sticky #globalNav a:not(.contact a) .title, #header.scrolled #globalNav a:not(.contact a) .title, #header[data-scrolled="true"] #globalNav a:not(.contact a) .title, #header[style*="position: fixed"] #globalNav a:not(.contact a) .title, #header[style*="position: sticky"] #globalNav a:not(.contact a) .title, #header.fixed .globalNav a:not(.contact a) .title, #header.sticky .globalNav a:not(.contact a) .title, #header.scrolled .globalNav a:not(.contact a) .title, #header[data-scrolled="true"] .globalNav a:not(.contact a) .title, #header[style*="position: fixed"] .globalNav a:not(.contact a) .title, #header[style*="position: sticky"] .globalNav a:not(.contact a) .title { color: #333 !important; } /* 追従時：お問い合わせボタンのテキストを白にする（全称セレクターより優先） */ html body #header.fixed .globalNav .nav-inner ul li.contact a, html body #header.fixed .globalNav .nav-inner ul li.contact a .title, html body #header.sticky .globalNav .nav-inner ul li.contact a, html body #header.sticky .globalNav .nav-inner ul li.contact a .title, html body #header.scrolled .globalNav .nav-inner ul li.contact a, html body #header.scrolled .globalNav .nav-inner ul li.contact a .title, html body #header[data-scrolled="true"] .globalNav .nav-inner ul li.contact a, html body #header[data-scrolled="true"] .globalNav .nav-inner ul li.contact a .title, html body #header[style*="position: fixed"] .globalNav .nav-inner ul li.contact a, html body #header[style*="position: fixed"] .globalNav .nav-inner ul li.contact a .title, html body #header[style*="position: sticky"] .globalNav .nav-inner ul li.contact a, html body #header[style*="position: sticky"] .globalNav .nav-inner ul li.contact a .title, body #header.fixed .globalNav .nav-inner ul li.contact a, body #header.fixed .globalNav .nav-inner ul li.contact a .title, body #header.sticky .globalNav .nav-inner ul li.contact a, body #header.sticky .globalNav .nav-inner ul li.contact a .title, body #header.scrolled .globalNav .nav-inner ul li.contact a, body #header.scrolled .globalNav .nav-inner ul li.contact a .title, body #header[data-scrolled="true"] .globalNav .nav-inner ul li.contact a, body #header[data-scrolled="true"] .globalNav .nav-inner ul li.contact a .title, html body #header.fixed #globalNav .nav-inner ul li.contact a, html body #header.fixed #globalNav .nav-inner ul li.contact a .title, html body #header.sticky #globalNav .nav-inner ul li.contact a, html body #header.sticky #globalNav .nav-inner ul li.contact a .title, html body #header.scrolled #globalNav .nav-inner ul li.contact a, html body #header.scrolled #globalNav .nav-inner ul li.contact a .title, html body #header[data-scrolled="true"] #globalNav .nav-inner ul li.contact a, html body #header[data-scrolled="true"] #globalNav .nav-inner ul li.contact a .title, body #header.fixed #globalNav .nav-inner ul li.contact a, body #header.fixed #globalNav .nav-inner ul li.contact a .title, body #header.sticky #globalNav .nav-inner ul li.contact a, body #header.sticky #globalNav .nav-inner ul li.contact a .title, body #header.scrolled #globalNav .nav-inner ul li.contact a, body #header.scrolled #globalNav .nav-inner ul li.contact a .title, body #header[data-scrolled="true"] #globalNav .nav-inner ul li.contact a, body #header[data-scrolled="true"] #globalNav .nav-inner ul li.contact a .title { color: #fff !important; } /* ナビゲーションの区切り線「｜」を黒に */ #header.fixed #globalNav ul li::after, #header.sticky #globalNav ul li::after, #header.scrolled #globalNav ul li::after, #header[style*="position: fixed"] #globalNav ul li::after, #header[style*="position: sticky"] #globalNav ul li::after, #header.fixed .globalNav ul li::after, #header.sticky .globalNav ul li::after, #header.scrolled .globalNav ul li::after, #header[style*="position: fixed"] .globalNav ul li::after, #header[style*="position: sticky"] .globalNav ul li::after, body #header.fixed #globalNav ul li::after, body #header.sticky #globalNav ul li::after, body #header.scrolled #globalNav ul li::after { color: #333 !important; border-color: #333 !important; } /* ナビゲーションの区切り線（border-right）も黒に（PC表示時のみ） */ @media (min-width: 769px) { #header.fixed #globalNav ul li, #header.sticky #globalNav ul li, #header.scrolled #globalNav ul li, #header[style*="position: fixed"] #globalNav ul li, #header[style*="position: sticky"] #globalNav ul li, #header.fixed .globalNav ul li, #header.sticky .globalNav ul li, #header.scrolled .globalNav ul li, #header[style*="position: fixed"] .globalNav ul li, #header[style*="position: sticky"] .globalNav ul li { border-color: #333 !important; } } /* お問い合わせのli全体をグレー背景にする */ #header .globalNav .nav-inner ul li.contact, #header #globalNav .nav-inner ul li.contact, body #header .globalNav .nav-inner ul li.contact, body #header #globalNav .nav-inner ul li.contact, html body #header .globalNav .nav-inner ul li.contact, html body #header #globalNav .nav-inner ul li.contact, /* PC表示時：fixed/sticky/scrolled時も同じスタイルを適用 */ #header.fixed .globalNav .nav-inner ul li.contact, #header.sticky .globalNav .nav-inner ul li.contact, #header.scrolled .globalNav .nav-inner ul li.contact, #header[data-scrolled="true"] .globalNav .nav-inner ul li.contact, #header.fixed #globalNav .nav-inner ul li.contact, #header.sticky #globalNav .nav-inner ul li.contact, #header.scrolled #globalNav .nav-inner ul li.contact, #header[data-scrolled="true"] #globalNav .nav-inner ul li.contact, body #header.fixed .globalNav .nav-inner ul li.contact, body #header.sticky .globalNav .nav-inner ul li.contact, body #header.scrolled .globalNav .nav-inner ul li.contact, body #header[data-scrolled="true"] .globalNav .nav-inner ul li.contact, body #header.fixed #globalNav .nav-inner ul li.contact, body #header.sticky #globalNav .nav-inner ul li.contact, body #header.scrolled #globalNav .nav-inner ul li.contact, body #header[data-scrolled="true"] #globalNav .nav-inner ul li.contact, html body #header.fixed .globalNav .nav-inner ul li.contact, html body #header.sticky .globalNav .nav-inner ul li.contact, html body #header.scrolled .globalNav .nav-inner ul li.contact, html body #header[data-scrolled="true"] .globalNav .nav-inner ul li.contact, html body #header.fixed #globalNav .nav-inner ul li.contact, html body #header.sticky #globalNav .nav-inner ul li.contact, html body #header.scrolled #globalNav .nav-inner ul li.contact, html body #header[data-scrolled="true"] #globalNav .nav-inner ul li.contact { background-color: #808080 !important; background: #808080 !important; padding: 20px !important; margin: 0 !important; border-radius: 0 !important; min-height: 100% !important; display: flex !important; align-items: center !important; align-self: stretch !important; } /* お問い合わせのliの親要素（ul）の高さを確保 */ #header .globalNav .nav-inner ul, #header #globalNav .nav-inner ul, body #header .globalNav .nav-inner ul, body #header #globalNav .nav-inner ul, html body #header .globalNav .nav-inner ul, html body #header #globalNav .nav-inner ul { height: 100% !important; display: flex !important; align-items: stretch !important; } /* PC表示時：contact pc-visibleのaにホバー時のアンダーラインを非表示 */ @media (min-width: 769px) { #header .globalNav .nav-inner ul li.contact.pc-visible a:hover, #header .globalNav .nav-inner ul li.contact.pc-visible a:hover .title, #header #globalNav .nav-inner ul li.contact.pc-visible a:hover, #header #globalNav .nav-inner ul li.contact.pc-visible a:hover .title, body #header .globalNav .nav-inner ul li.contact.pc-visible a:hover, body #header .globalNav .nav-inner ul li.contact.pc-visible a:hover .title, body #header #globalNav .nav-inner ul li.contact.pc-visible a:hover, body #header #globalNav .nav-inner ul li.contact.pc-visible a:hover .title, html body #header .globalNav .nav-inner ul li.contact.pc-visible a:hover, html body #header .globalNav .nav-inner ul li.contact.pc-visible a:hover .title, html body #header #globalNav .nav-inner ul li.contact.pc-visible a:hover, html body #header #globalNav .nav-inner ul li.contact.pc-visible a:hover .title, body.es-dynamic-page #header .globalNav .nav-inner ul li.contact.pc-visible a:hover, body.es-dynamic-page #header .globalNav .nav-inner ul li.contact.pc-visible a:hover .title, body.es-dynamic-page #header #globalNav .nav-inner ul li.contact.pc-visible a:hover, body.es-dynamic-page #header #globalNav .nav-inner ul li.contact.pc-visible a:hover .title, body:has(.es-dynamic-page-marker) #header .globalNav .nav-inner ul li.contact.pc-visible a:hover, body:has(.es-dynamic-page-marker) #header .globalNav .nav-inner ul li.contact.pc-visible a:hover .title, body:has(.es-dynamic-page-marker) #header #globalNav .nav-inner ul li.contact.pc-visible a:hover, body:has(.es-dynamic-page-marker) #header #globalNav .nav-inner ul li.contact.pc-visible a:hover .title, html body.es-dynamic-page #header .globalNav .nav-inner ul li.contact.pc-visible a:hover, html body.es-dynamic-page #header .globalNav .nav-inner ul li.contact.pc-visible a:hover .title, html body.es-dynamic-page #header #globalNav .nav-inner ul li.contact.pc-visible a:hover, html body.es-dynamic-page #header #globalNav .nav-inner ul li.contact.pc-visible a:hover .title, html body:has(.es-dynamic-page-marker) #header .globalNav .nav-inner ul li.contact.pc-visible a:hover, html body:has(.es-dynamic-page-marker) #header .globalNav .nav-inner ul li.contact.pc-visible a:hover .title, html body:has(.es-dynamic-page-marker) #header #globalNav .nav-inner ul li.contact.pc-visible a:hover, html body:has(.es-dynamic-page-marker) #header #globalNav .nav-inner ul li.contact.pc-visible a:hover .title, #header.es-dynamic-header .globalNav .nav-inner ul li.contact.pc-visible a:hover, #header.es-dynamic-header .globalNav .nav-inner ul li.contact.pc-visible a:hover .title, #header.es-dynamic-header #globalNav .nav-inner ul li.contact.pc-visible a:hover, #header.es-dynamic-header #globalNav .nav-inner ul li.contact.pc-visible a:hover .title { text-decoration: none !important; } } /* お問い合わせのリンクテキストを白にする */ #header .globalNav .nav-inner ul li.contact a, #header #globalNav .nav-inner ul li.contact a, body #header .globalNav .nav-inner ul li.contact a, body #header #globalNav .nav-inner ul li.contact a, html body #header .globalNav .nav-inner ul li.contact a, html body #header #globalNav .nav-inner ul li.contact a, #header .globalNav .nav-inner ul li.contact a .title, #header #globalNav .nav-inner ul li.contact a .title, body #header .globalNav .nav-inner ul li.contact a .title, body #header #globalNav .nav-inner ul li.contact a .title, html body #header .globalNav .nav-inner ul li.contact a .title, html body #header #globalNav .nav-inner ul li.contact a .title { color: #fff !important; } /* お問い合わせのメールアイコンも白にする */ #header .globalNav .nav-inner ul li.contact a::before, #header #globalNav .nav-inner ul li.contact a::before, body #header .globalNav .nav-inner ul li.contact a::before, body #header #globalNav .nav-inner ul li.contact a::before, html body #header .globalNav .nav-inner ul li.contact a::before, html body #header #globalNav .nav-inner ul li.contact a::before { color: #fff !important; } /* お問い合わせの前の区切り線「｜」を非表示にする（グレー背景があるため不要） */ #header .globalNav .nav-inner ul li.contact::before, body #header .globalNav .nav-inner ul li.contact::before, html body #header .globalNav .nav-inner ul li.contact::before { display: none !important; content: none !important; } /* お問い合わせの先頭にメールマークを追加（フッタ上のボタンと同じFont Awesomeアイコン） */ #header .globalNav .nav-inner ul li.contact a::before, #header #globalNav .nav-inner ul li.contact a::before, body #header .globalNav .nav-inner ul li.contact a::before, body #header #globalNav .nav-inner ul li.contact a::before, html body #header .globalNav .nav-inner ul li.contact a::before, html body #header #globalNav .nav-inner ul li.contact a::before { content: "\f0e0" !important; /* Font Awesome envelope icon */ font-family: "Font Awesome 5 Free", "FontAwesome" !important; font-weight: 900 !important; font-style: normal !important; display: inline-block !important; margin-right: 0.5em !important; text-rendering: auto !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } /* ヘッダーが追従するときもメールマークを表示（白にする） */ #header.fixed .globalNav .nav-inner ul li.contact a::before, #header.sticky .globalNav .nav-inner ul li.contact a::before, #header.scrolled .globalNav .nav-inner ul li.contact a::before, #header[style*="position: fixed"] .globalNav .nav-inner ul li.contact a::before, #header[style*="position: sticky"] .globalNav .nav-inner ul li.contact a::before, body #header.fixed .globalNav .nav-inner ul li.contact a::before, body #header.sticky .globalNav .nav-inner ul li.contact a::before, body #header.scrolled .globalNav .nav-inner ul li.contact a::before, html body #header.fixed .globalNav .nav-inner ul li.contact a::before, html body #header.sticky .globalNav .nav-inner ul li.contact a::before, html body #header.scrolled .globalNav .nav-inner ul li.contact a::before, #header.fixed #globalNav .nav-inner ul li.contact a::before, #header.sticky #globalNav .nav-inner ul li.contact a::before, #header.scrolled #globalNav .nav-inner ul li.contact a::before, body #header.fixed #globalNav .nav-inner ul li.contact a::before, body #header.sticky #globalNav .nav-inner ul li.contact a::before, body #header.scrolled #globalNav .nav-inner ul li.contact a::before { content: "\f0e0" !important; font-family: "Font Awesome 5 Free", "FontAwesome" !important; font-weight: 900 !important; font-style: normal !important; display: inline-block !important; margin-right: 0.5em !important; text-rendering: auto !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; color: #fff !important; } /* ヘッダーが追従するときもグレー背景を維持（通常時と同じpadding） */ #header.fixed .globalNav .nav-inner ul li.contact, #header.sticky .globalNav .nav-inner ul li.contact, #header.scrolled .globalNav .nav-inner ul li.contact, #header[data-scrolled="true"] .globalNav .nav-inner ul li.contact, #header[style*="position: fixed"] .globalNav .nav-inner ul li.contact, #header[style*="position: sticky"] .globalNav .nav-inner ul li.contact, body #header.fixed .globalNav .nav-inner ul li.contact, body #header.sticky .globalNav .nav-inner ul li.contact, body #header.scrolled .globalNav .nav-inner ul li.contact, body #header[data-scrolled="true"] .globalNav .nav-inner ul li.contact, html body #header.fixed .globalNav .nav-inner ul li.contact, html body #header.sticky .globalNav .nav-inner ul li.contact, html body #header.scrolled .globalNav .nav-inner ul li.contact, html body #header[data-scrolled="true"] .globalNav .nav-inner ul li.contact, #header.fixed #globalNav .nav-inner ul li.contact, #header.sticky #globalNav .nav-inner ul li.contact, #header.scrolled #globalNav .nav-inner ul li.contact, #header[data-scrolled="true"] #globalNav .nav-inner ul li.contact, body #header.fixed #globalNav .nav-inner ul li.contact, body #header.sticky #globalNav .nav-inner ul li.contact, body #header.scrolled #globalNav .nav-inner ul li.contact, body #header[data-scrolled="true"] #globalNav .nav-inner ul li.contact, /* 動的ページの追従時も同じスタイル */ body.es-dynamic-page #header.fixed .globalNav .nav-inner ul li.contact, body.es-dynamic-page #header.sticky .globalNav .nav-inner ul li.contact, body.es-dynamic-page #header.scrolled .globalNav .nav-inner ul li.contact, body.es-dynamic-page #header[data-scrolled="true"] .globalNav .nav-inner ul li.contact, body:has(.es-dynamic-page-marker) #header.fixed .globalNav .nav-inner ul li.contact, body:has(.es-dynamic-page-marker) #header.sticky .globalNav .nav-inner ul li.contact, body:has(.es-dynamic-page-marker) #header.scrolled .globalNav .nav-inner ul li.contact, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"] .globalNav .nav-inner ul li.contact, body.es-dynamic-page #header.fixed #globalNav .nav-inner ul li.contact, body.es-dynamic-page #header.sticky #globalNav .nav-inner ul li.contact, body.es-dynamic-page #header.scrolled #globalNav .nav-inner ul li.contact, body.es-dynamic-page #header[data-scrolled="true"] #globalNav .nav-inner ul li.contact, body:has(.es-dynamic-page-marker) #header.fixed #globalNav .nav-inner ul li.contact, body:has(.es-dynamic-page-marker) #header.sticky #globalNav .nav-inner ul li.contact, body:has(.es-dynamic-page-marker) #header.scrolled #globalNav .nav-inner ul li.contact, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"] #globalNav .nav-inner ul li.contact { background-color: #808080 !important; background: #808080 !important; padding: 20px !important; margin: 0 !important; border-radius: 0 !important; min-height: 100% !important; display: flex !important; align-items: center !important; align-self: stretch !important; } /* ヘッダーが追従するときもお問い合わせのテキストを白にする */ #header.fixed .globalNav .nav-inner ul li.contact a, #header.sticky .globalNav .nav-inner ul li.contact a, #header.scrolled .globalNav .nav-inner ul li.contact a, #header[data-scrolled="true"] .globalNav .nav-inner ul li.contact a, #header[style*="position: fixed"] .globalNav .nav-inner ul li.contact a, #header[style*="position: sticky"] .globalNav .nav-inner ul li.contact a, body #header.fixed .globalNav .nav-inner ul li.contact a, body #header.sticky .globalNav .nav-inner ul li.contact a, body #header.scrolled .globalNav .nav-inner ul li.contact a, body #header[data-scrolled="true"] .globalNav .nav-inner ul li.contact a, html body #header.fixed .globalNav .nav-inner ul li.contact a, html body #header.sticky .globalNav .nav-inner ul li.contact a, html body #header.scrolled .globalNav .nav-inner ul li.contact a, html body #header[data-scrolled="true"] .globalNav .nav-inner ul li.contact a, #header.fixed #globalNav .nav-inner ul li.contact a, #header.sticky #globalNav .nav-inner ul li.contact a, #header.scrolled #globalNav .nav-inner ul li.contact a, #header[data-scrolled="true"] #globalNav .nav-inner ul li.contact a, body #header.fixed #globalNav .nav-inner ul li.contact a, body #header.sticky #globalNav .nav-inner ul li.contact a, body #header.scrolled #globalNav .nav-inner ul li.contact a, body #header[data-scrolled="true"] #globalNav .nav-inner ul li.contact a, #header.fixed .globalNav .nav-inner ul li.contact a .title, #header.sticky .globalNav .nav-inner ul li.contact a .title, #header.scrolled .globalNav .nav-inner ul li.contact a .title, #header[data-scrolled="true"] .globalNav .nav-inner ul li.contact a .title, body #header.fixed .globalNav .nav-inner ul li.contact a .title, body #header.sticky .globalNav .nav-inner ul li.contact a .title, body #header.scrolled .globalNav .nav-inner ul li.contact a .title, body #header[data-scrolled="true"] .globalNav .nav-inner ul li.contact a .title, html body #header.fixed .globalNav .nav-inner ul li.contact a .title, html body #header.sticky .globalNav .nav-inner ul li.contact a .title, html body #header.scrolled .globalNav .nav-inner ul li.contact a .title, html body #header[data-scrolled="true"] .globalNav .nav-inner ul li.contact a .title, #header.fixed #globalNav .nav-inner ul li.contact a .title, #header.sticky #globalNav .nav-inner ul li.contact a .title, #header.scrolled #globalNav .nav-inner ul li.contact a .title, #header[data-scrolled="true"] #globalNav .nav-inner ul li.contact a .title, body #header.fixed #globalNav .nav-inner ul li.contact a .title, body #header.sticky #globalNav .nav-inner ul li.contact a .title, body #header.scrolled #globalNav .nav-inner ul li.contact a .title, body #header[data-scrolled="true"] #globalNav .nav-inner ul li.contact a .title, /* 動的ページの追従時もテキストを白にする */ body.es-dynamic-page #header.fixed .globalNav .nav-inner ul li.contact a, body.es-dynamic-page #header.sticky .globalNav .nav-inner ul li.contact a, body.es-dynamic-page #header.scrolled .globalNav .nav-inner ul li.contact a, body.es-dynamic-page #header[data-scrolled="true"] .globalNav .nav-inner ul li.contact a, body:has(.es-dynamic-page-marker) #header.fixed .globalNav .nav-inner ul li.contact a, body:has(.es-dynamic-page-marker) #header.sticky .globalNav .nav-inner ul li.contact a, body:has(.es-dynamic-page-marker) #header.scrolled .globalNav .nav-inner ul li.contact a, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"] .globalNav .nav-inner ul li.contact a, body.es-dynamic-page #header.fixed #globalNav .nav-inner ul li.contact a, body.es-dynamic-page #header.sticky #globalNav .nav-inner ul li.contact a, body.es-dynamic-page #header.scrolled #globalNav .nav-inner ul li.contact a, body.es-dynamic-page #header[data-scrolled="true"] #globalNav .nav-inner ul li.contact a, body:has(.es-dynamic-page-marker) #header.fixed #globalNav .nav-inner ul li.contact a, body:has(.es-dynamic-page-marker) #header.sticky #globalNav .nav-inner ul li.contact a, body:has(.es-dynamic-page-marker) #header.scrolled #globalNav .nav-inner ul li.contact a, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"] #globalNav .nav-inner ul li.contact a, body.es-dynamic-page #header.fixed .globalNav .nav-inner ul li.contact a .title, body.es-dynamic-page #header.sticky .globalNav .nav-inner ul li.contact a .title, body.es-dynamic-page #header.scrolled .globalNav .nav-inner ul li.contact a .title, body.es-dynamic-page #header[data-scrolled="true"] .globalNav .nav-inner ul li.contact a .title, body:has(.es-dynamic-page-marker) #header.fixed .globalNav .nav-inner ul li.contact a .title, body:has(.es-dynamic-page-marker) #header.sticky .globalNav .nav-inner ul li.contact a .title, body:has(.es-dynamic-page-marker) #header.scrolled .globalNav .nav-inner ul li.contact a .title, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"] .globalNav .nav-inner ul li.contact a .title, body.es-dynamic-page #header.fixed #globalNav .nav-inner ul li.contact a .title, body.es-dynamic-page #header.sticky #globalNav .nav-inner ul li.contact a .title, body.es-dynamic-page #header.scrolled #globalNav .nav-inner ul li.contact a .title, body.es-dynamic-page #header[data-scrolled="true"] #globalNav .nav-inner ul li.contact a .title, body:has(.es-dynamic-page-marker) #header.fixed #globalNav .nav-inner ul li.contact a .title, body:has(.es-dynamic-page-marker) #header.sticky #globalNav .nav-inner ul li.contact a .title, body:has(.es-dynamic-page-marker) #header.scrolled #globalNav .nav-inner ul li.contact a .title, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"] #globalNav .nav-inner ul li.contact a .title { color: #fff !important; } /* ヘッダーが追従するときもulの高さを確保 */ #header.fixed .globalNav .nav-inner ul, #header.sticky .globalNav .nav-inner ul, #header.scrolled .globalNav .nav-inner ul, #header[style*="position: fixed"] .globalNav .nav-inner ul, #header[style*="position: sticky"] .globalNav .nav-inner ul, body #header.fixed .globalNav .nav-inner ul, body #header.sticky .globalNav .nav-inner ul, body #header.scrolled .globalNav .nav-inner ul, html body #header.fixed .globalNav .nav-inner ul, html body #header.sticky .globalNav .nav-inner ul, html body #header.scrolled .globalNav .nav-inner ul, #header.fixed #globalNav .nav-inner ul, #header.sticky #globalNav .nav-inner ul, #header.scrolled #globalNav .nav-inner ul, body #header.fixed #globalNav .nav-inner ul, body #header.sticky #globalNav .nav-inner ul, body #header.scrolled #globalNav .nav-inner ul { height: 100% !important; display: flex !important; align-items: stretch !important; } /* ヘッダーが追従するときもテキストとアイコンを白に */ #header.fixed .globalNav .nav-inner ul li.contact a, #header.sticky .globalNav .nav-inner ul li.contact a, #header.scrolled .globalNav .nav-inner ul li.contact a, body #header.fixed .globalNav .nav-inner ul li.contact a, body #header.sticky .globalNav .nav-inner ul li.contact a, body #header.scrolled .globalNav .nav-inner ul li.contact a, html body #header.fixed .globalNav .nav-inner ul li.contact a, html body #header.sticky .globalNav .nav-inner ul li.contact a, html body #header.scrolled .globalNav .nav-inner ul li.contact a, #header.fixed #globalNav .nav-inner ul li.contact a, #header.sticky #globalNav .nav-inner ul li.contact a, #header.scrolled #globalNav .nav-inner ul li.contact a, body #header.fixed #globalNav .nav-inner ul li.contact a, body #header.sticky #globalNav .nav-inner ul li.contact a, body #header.scrolled #globalNav .nav-inner ul li.contact a, #header.fixed .globalNav .nav-inner ul li.contact a .title, #header.sticky .globalNav .nav-inner ul li.contact a .title, #header.scrolled .globalNav .nav-inner ul li.contact a .title, body #header.fixed .globalNav .nav-inner ul li.contact a .title, body #header.sticky .globalNav .nav-inner ul li.contact a .title, body #header.scrolled .globalNav .nav-inner ul li.contact a .title { color: #fff !important; } /* ヘッダーが追従するときも区切り線を非表示 */ #header.fixed .globalNav .nav-inner ul li.contact::before, #header.sticky .globalNav .nav-inner ul li.contact::before, #header.scrolled .globalNav .nav-inner ul li.contact::before, #header[style*="position: fixed"] .globalNav .nav-inner ul li.contact::before, #header[style*="position: sticky"] .globalNav .nav-inner ul li.contact::before, body #header.fixed .globalNav .nav-inner ul li.contact::before, body #header.sticky .globalNav .nav-inner ul li.contact::before, body #header.scrolled .globalNav .nav-inner ul li.contact::before, html body #header.fixed .globalNav .nav-inner ul li.contact::before, html body #header.sticky .globalNav .nav-inner ul li.contact::before, html body #header.scrolled .globalNav .nav-inner ul li.contact::before, #header.fixed #globalNav .nav-inner ul li.contact::before, #header.sticky #globalNav .nav-inner ul li.contact::before, #header.scrolled #globalNav .nav-inner ul li.contact::before, body #header.fixed #globalNav .nav-inner ul li.contact::before, body #header.sticky #globalNav .nav-inner ul li.contact::before, body #header.scrolled #globalNav .nav-inner ul li.contact::before { display: none !important; content: none !important; } /* ナビゲーションの横並び（PC表示時のみ） */ /* モバイル表示時は既存のCSS（common.css）の制御に任せる */ @media (min-width: 769px) { /* PC表示時：header-innerが折り返し可能に設定（カラム落ちを許可） */ #header .header-inner, body #header .header-inner, html body #header .header-inner, body.es-dynamic-page #header .header-inner, body:has(.es-dynamic-page-marker) #header .header-inner, html body.es-dynamic-page #header .header-inner, html body:has(.es-dynamic-page-marker) #header .header-inner { display: flex !important; align-items: center !important; flex-wrap: wrap !important; /* 折り返しを許可（カラム落ちを許可） */ justify-content: flex-start !important; /* 左から配置 */ width: 100% !important; box-sizing: border-box !important; } /* PC表示時：globalNavを右寄せにする（カラム落ちしても右寄せを維持） */ #header .globalNav, #header #globalNav, body #header .globalNav, body #header #globalNav, html body #header .globalNav, html body #header #globalNav, body.es-dynamic-page #header .globalNav, body.es-dynamic-page #header #globalNav, body:has(.es-dynamic-page-marker) #header .globalNav, body:has(.es-dynamic-page-marker) #header #globalNav, html body.es-dynamic-page #header .globalNav, html body.es-dynamic-page #header #globalNav, html body:has(.es-dynamic-page-marker) #header .globalNav, html body:has(.es-dynamic-page-marker) #header #globalNav, #header.es-dynamic-header .globalNav, #header.es-dynamic-header #globalNav { margin-left: auto !important; /* 右寄せを維持 */ width: auto !important; } #globalNav ul { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; /* 折り返しを許可（カラム落ちを許可） */ list-style: none !important; margin: 0 !important; padding: 0 !important; align-items: center !important; height: 100% !important; } /* 動的ページ：ナビゲーションを2段にしない（1行に収める） */ body.es-dynamic-page #globalNav ul, body.es-dynamic-page .globalNav .nav-inner ul, body.es-dynamic-page #header .globalNav .nav-inner ul, body.es-dynamic-page #header #globalNav .nav-inner ul, body:has(.es-dynamic-page-marker) #globalNav ul, body:has(.es-dynamic-page-marker) .globalNav .nav-inner ul, body:has(.es-dynamic-page-marker) #header .globalNav .nav-inner ul, body:has(.es-dynamic-page-marker) #header #globalNav .nav-inner ul, #header.es-dynamic-header #globalNav ul, #header.es-dynamic-header .globalNav .nav-inner ul { flex-wrap: nowrap !important; /* 2段にならないようにする */ white-space: nowrap !important; /* テキストを1行に収める */ } /* 動的ページ：ナビゲーション項目のフォントサイズを調整（必要に応じて小さく） */ body.es-dynamic-page #globalNav ul li a, body.es-dynamic-page .globalNav .nav-inner ul li a, body.es-dynamic-page #header .globalNav .nav-inner ul li a, body.es-dynamic-page #header #globalNav .nav-inner ul li a, body:has(.es-dynamic-page-marker) #globalNav ul li a, body:has(.es-dynamic-page-marker) .globalNav .nav-inner ul li a, body:has(.es-dynamic-page-marker) #header .globalNav .nav-inner ul li a, body:has(.es-dynamic-page-marker) #header #globalNav .nav-inner ul li a, #header.es-dynamic-header #globalNav ul li a, #header.es-dynamic-header .globalNav .nav-inner ul li a { white-space: nowrap !important; /* テキストを1行に収める */ font-size: 12px !important; /* さらに小さくして1行に収まりやすくする */ } /* 動的ページ：ナビゲーション項目の間隔を調整 */ body.es-dynamic-page #globalNav ul li, body.es-dynamic-page .globalNav .nav-inner ul li, body.es-dynamic-page #header .globalNav .nav-inner ul li, body.es-dynamic-page #header #globalNav .nav-inner ul li, body:has(.es-dynamic-page-marker) #globalNav ul li, body:has(.es-dynamic-page-marker) .globalNav .nav-inner ul li, body:has(.es-dynamic-page-marker) #header .globalNav .nav-inner ul li, body:has(.es-dynamic-page-marker) #header #globalNav .nav-inner ul li, #header.es-dynamic-header #globalNav ul li, #header.es-dynamic-header .globalNav .nav-inner ul li { flex-shrink: 1 !important; /* 必要に応じて縮小可能 */ min-width: 0 !important; /* 最小幅を0にして、flexboxが正しく動作するように */ } #globalNav ul li { display: inline-block !important; } /* PC表示時：通常時と追従時を同じスタイルにするため、追従時特有のスタイルは削除 */ /* すべての状態で同じスタイルを適用 */ #header .globalNav .nav-inner, #header #globalNav .nav-inner, body #header .globalNav .nav-inner, body #header #globalNav .nav-inner, html body #header .globalNav .nav-inner, html body #header #globalNav .nav-inner { display: flex !important; align-items: center !important; height: 100% !important; } #header.fixed .globalNav .nav-inner ul, #header.sticky .globalNav .nav-inner ul, #header.scrolled .globalNav .nav-inner ul, #header[data-scrolled="true"] .globalNav .nav-inner ul, #header[style*="position: fixed"] .globalNav .nav-inner ul, #header[style*="position: sticky"] .globalNav .nav-inner ul, body #header.fixed .globalNav .nav-inner ul, body #header.sticky .globalNav .nav-inner ul, body #header.scrolled .globalNav .nav-inner ul, body #header[data-scrolled="true"] .globalNav .nav-inner ul, html body #header.fixed .globalNav .nav-inner ul, html body #header.sticky .globalNav .nav-inner ul, html body #header.scrolled .globalNav .nav-inner ul, html body #header[data-scrolled="true"] .globalNav .nav-inner ul, #header.fixed #globalNav .nav-inner ul, #header.sticky #globalNav .nav-inner ul, #header.scrolled #globalNav .nav-inner ul, #header[data-scrolled="true"] #globalNav .nav-inner ul, body #header.fixed #globalNav .nav-inner ul, body #header.sticky #globalNav .nav-inner ul, body #header.scrolled #globalNav .nav-inner ul, body #header[data-scrolled="true"] #globalNav .nav-inner ul { display: flex !important; align-items: center !important; height: 100% !important; } } /* ======================================== TOPページ：ナビゲーションが2段にならないようにする ======================================== */ @media (min-width: 769px) { /* トップページ：ナビゲーションを1行に収める */ body.es-page-top-active #globalNav ul, body.es-page-top-active .globalNav .nav-inner ul, body.es-page-top-active #header .globalNav .nav-inner ul, body.es-page-top-active #header #globalNav .nav-inner ul { flex-wrap: nowrap !important; /* 2段にならないようにする */ white-space: nowrap !important; /* テキストを1行に収める */ } /* トップページ：ナビゲーション項目のフォントサイズを調整（必要に応じて小さく） */ body.es-page-top-active #globalNav ul li a, body.es-page-top-active .globalNav .nav-inner ul li a, body.es-page-top-active #header .globalNav .nav-inner ul li a, body.es-page-top-active #header #globalNav .nav-inner ul li a { white-space: nowrap !important; /* テキストを1行に収める */ font-size: 13px !important; /* 少し小さくして1行に収まりやすくする */ } /* トップページ：ナビゲーション項目の間隔を調整 */ body.es-page-top-active #globalNav ul li, body.es-page-top-active .globalNav .nav-inner ul li, body.es-page-top-active #header .globalNav .nav-inner ul li, body.es-page-top-active #header #globalNav .nav-inner ul li { flex-shrink: 1 !important; /* 必要に応じて縮小可能 */ min-width: 0 !important; /* 最小幅を0にして、flexboxが正しく動作するように */ } } /* ナビゲーションのテキストサイズを既存サイトに合わせて小さく */ /* 通常時（追従していない時）のみ適用 */ #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) #globalNav a, #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav a, #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) #globalNav a .title, #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav a .title { font-size: 14px !important; font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "Lato", sans-serif !important; color: #fff !important; /* 通常時（黒背景）は白 */ } /* .box-logo-01 .tel aの14pxを上書きして36pxに - より強力なセレクターで */ #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) #globalNav .box-logo-01 .tel a, #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav .box-logo-01 .tel a, #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) #globalNav.active .box-logo-01 .tel a, #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav.active .box-logo-01 .tel a, #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) #globalNav[style*="display: block"] .box-logo-01 .tel a, #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav[style*="display: block"] .box-logo-01 .tel a, body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) #globalNav .box-logo-01 .tel a, body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav .box-logo-01 .tel a, html body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) #globalNav .box-logo-01 .tel a, html body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav .box-logo-01 .tel a { font-size: 8vw !important; font-size: 28px !important; } /* html body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav .box-logo-01 .tel a { font-size: 36px !important; } */ /* PC表示時：通常時と追従時を同じスタイルにするため、追従時特有のスタイルは削除 */ /* PCではfixedクラスが付与されてもスタイルが変わらないように、関連スタイルを削除済み */ /* サブメニューのリンク - 追従していない時（通常時）は黒テキスト、追従時も黒テキスト */ /* PC表示時のみ適用（SP表示時には影響しない） */ @media (min-width: 769px) { /* 追従していない時（通常時）は黒テキスト */ #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav .nav-inner ul li.has-submenu .sub-menu li a, #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) #globalNav .nav-inner ul li.has-submenu .sub-menu li a, body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav .nav-inner ul li.has-submenu .sub-menu li a, body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) #globalNav .nav-inner ul li.has-submenu .sub-menu li a, html body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav .nav-inner ul li.has-submenu .sub-menu li a, html body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) #globalNav .nav-inner ul li.has-submenu .sub-menu li a { color: #333 !important; } } /* PC表示時：通常時と追従時を同じスタイルにするため、追従時特有のスタイルは削除 */ /* すべての状態で同じスタイルを適用 */ #header .globalNav .nav-inner ul li.has-submenu .sub-menu li a, #header #globalNav .nav-inner ul li.has-submenu .sub-menu li a, body #header .globalNav .nav-inner ul li.has-submenu .sub-menu li a, body #header #globalNav .nav-inner ul li.has-submenu .sub-menu li a, html body #header .globalNav .nav-inner ul li.has-submenu .sub-menu li a, html body #header #globalNav .nav-inner ul li.has-submenu .sub-menu li a { color: #333 !important; } /* PC表示時：通常時と追従時を同じスタイルにするため、追従時特有のスタイルは削除 */ /* すべての状態で同じスタイルを適用 */ #header #globalNav a, #header .globalNav a { color: #333 !important; } #header #globalNav a .title, #header .globalNav a .title { color: #333 !important; } /* グローバル：.activeクラスが付いている時は常に表示（PC/SP共通） */ body #globalNav.active, body .globalNav.active, html body #globalNav.active, html body .globalNav.active, body #header #globalNav.active, body #header .globalNav.active, html body #header #globalNav.active, html body #header .globalNav.active, #header #globalNav.active, #header .globalNav.active { display: block !important; visibility: visible !important; opacity: 1 !important; } /* モバイル表示時のナビゲーション制御 */ /* ハンバーガーメニューが閉じている時は非表示 */ @media (max-width: 768px) { /* メニューの基本スタイル：デフォルトは非表示 */ #globalNav, .globalNav { display: none !important; visibility: hidden !important; opacity: 0 !important; } /* メニューが表示されている時（JavaScriptでインラインスタイルが設定される） */ /* インラインスタイルでdisplay: blockが設定されている場合は表示 */ #globalNav[style*="display: block"], .globalNav[style*="display: block"], /* .activeクラスが付いている時も表示 */ #globalNav.active, .globalNav.active, body #globalNav.active, body .globalNav.active, html body #globalNav.active, html body .globalNav.active, body #header #globalNav.active, body #header .globalNav.active, html body #header #globalNav.active, html body #header .globalNav.active, /* SP追従時も表示 */ body #header[data-scrolled="true"] #globalNav.active, html body #header[data-scrolled="true"] #globalNav.active, body #header.scrolled #globalNav.active, html body #header.scrolled #globalNav.active, body #header.fixed #globalNav.active, body #header.sticky #globalNav.active, body #header[data-scrolled="true"] .globalNav.active, html body #header[data-scrolled="true"] .globalNav.active, body #header.scrolled .globalNav.active, html body #header.scrolled .globalNav.active, body #header.fixed .globalNav.active, body #header.sticky .globalNav.active { display: block !important; visibility: visible !important; opacity: 1 !important; background-color: #000 !important; background: #000 !important; color: #fff !important; z-index: 9999 !important; position: fixed !important; top: 55px !important; left: 0 !important; right: 0 !important; width: 100% !important; /* 上から下にスライドするアニメーション */ transform: translateY(0) !important; -webkit-transform: translateY(0) !important; -moz-transform: translateY(0) !important; -ms-transform: translateY(0) !important; -o-transform: translateY(0) !important; transition: transform 0.3s ease-out, opacity 0.3s ease-out !important; -webkit-transition: transform 0.3s ease-out, opacity 0.3s ease-out !important; -moz-transition: transform 0.3s ease-out, opacity 0.3s ease-out !important; -ms-transition: transform 0.3s ease-out, opacity 0.3s ease-out !important; -o-transition: transform 0.3s ease-out, opacity 0.3s ease-out !important; } /* メニューが閉じている時は上に隠す（アニメーション用） */ #globalNav:not([style*="display: block"]), .globalNav:not([style*="display: block"]) { transform: translateY(-100%) !important; -webkit-transform: translateY(-100%) !important; -moz-transform: translateY(-100%) !important; -ms-transform: translateY(-100%) !important; -o-transform: translateY(-100%) !important; transition: transform 0.3s ease-out, opacity 0.3s ease-out !important; -webkit-transition: transform 0.3s ease-out, opacity 0.3s ease-out !important; -moz-transition: transform 0.3s ease-out, opacity 0.3s ease-out !important; -ms-transition: transform 0.3s ease-out, opacity 0.3s ease-out !important; -o-transition: transform 0.3s ease-out, opacity 0.3s ease-out !important; } /* nav-innerのスタイル（メニュー表示時） */ #globalNav[style*="display: block"] .nav-inner, .globalNav[style*="display: block"] .nav-inner { background-color: #000 !important; background: #000 !important; color: #fff !important; } /* SP表示時：メニューが開いている時（body.is-open、#globalNav.active、または#globalNav[style*="display: block"]）は三本線を非表示、×アイコンを表示 */ /* body.is-openがある時 */ body.is-open #header #navBtn::after, html.is-open body #header #navBtn::after, body.is-open #header .navbutton::after, html.is-open body #header .navbutton::after { display: none !important; visibility: hidden !important; opacity: 0 !important; } body.is-open #header #navBtn::before, html.is-open body #header #navBtn::before, body.is-open #header .navbutton::before, html.is-open body #header .navbutton::before { display: block !important; visibility: visible !important; opacity: 1 !important; } /* #globalNav.activeがある時 */ body #header #globalNav.active ~ #navBtn::after, body #header .globalNav.active ~ #navBtn::after, html body #header #globalNav.active ~ #navBtn::after, html body #header .globalNav.active ~ #navBtn::after { display: none !important; visibility: hidden !important; opacity: 0 !important; } body #header #globalNav.active ~ #navBtn::before, body #header .globalNav.active ~ #navBtn::before, html body #header #globalNav.active ~ #navBtn::before, html body #header .globalNav.active ~ #navBtn::before { display: block !important; visibility: visible !important; opacity: 1 !important; } /* #globalNav[style*="display: block"]がある時 */ body #header #globalNav[style*="display: block"] ~ #navBtn::after, body #header .globalNav[style*="display: block"] ~ #navBtn::after, html body #header #globalNav[style*="display: block"] ~ #navBtn::after, html body #header .globalNav[style*="display: block"] ~ #navBtn::after { display: none !important; visibility: hidden !important; opacity: 0 !important; } body #header #globalNav[style*="display: block"] ~ #navBtn::before, body #header .globalNav[style*="display: block"] ~ #navBtn::before, html body #header #globalNav[style*="display: block"] ~ #navBtn::before, html body #header .globalNav[style*="display: block"] ~ #navBtn::before { display: block !important; visibility: visible !important; opacity: 1 !important; } /* メニューが閉じている時（body.is-openがない、#globalNav.activeがない、#globalNav[style*="display: block"]がない）は三本線を表示、×アイコンを非表示 */ /* 最優先で適用（すべてのパターンをカバー） */ body:not(.is-open) #header #navBtn::after, html:not(.is-open) body #header #navBtn::after, body:not(.is-open) #header .navbutton::after, html:not(.is-open) body #header .navbutton::after, body:not(.is-open) #header.fixed #navBtn::after, body:not(.is-open) #header.fixed .navbutton::after, body:not(.is-open) #header.sticky #navBtn::after, body:not(.is-open) #header.sticky .navbutton::after, body:not(.is-open) #header.scrolled #navBtn::after, body:not(.is-open) #header.scrolled .navbutton::after, body:not(.is-open) #header[data-scrolled="true"] #navBtn::after, body:not(.is-open) #header[data-scrolled="true"] .navbutton::after, /* 動的ページも含む */ body.es-dynamic-page:not(.is-open) #header #navBtn::after, body.es-dynamic-page:not(.is-open) #header .navbutton::after, body.es-dynamic-page:not(.is-open) #header.fixed #navBtn::after, body.es-dynamic-page:not(.is-open) #header.fixed .navbutton::after, body.es-dynamic-page:not(.is-open) #header.sticky #navBtn::after, body.es-dynamic-page:not(.is-open) #header.sticky .navbutton::after, body.es-dynamic-page:not(.is-open) #header.scrolled #navBtn::after, body.es-dynamic-page:not(.is-open) #header.scrolled .navbutton::after, body.es-dynamic-page:not(.is-open) #header[data-scrolled="true"] #navBtn::after, body.es-dynamic-page:not(.is-open) #header[data-scrolled="true"] .navbutton::after, body:has(.es-dynamic-page-marker):not(.is-open) #header #navBtn::after, body:has(.es-dynamic-page-marker):not(.is-open) #header .navbutton::after, body:has(.es-dynamic-page-marker):not(.is-open) #header.fixed #navBtn::after, body:has(.es-dynamic-page-marker):not(.is-open) #header.fixed .navbutton::after, body:has(.es-dynamic-page-marker):not(.is-open) #header.sticky #navBtn::after, body:has(.es-dynamic-page-marker):not(.is-open) #header.sticky .navbutton::after, body:has(.es-dynamic-page-marker):not(.is-open) #header.scrolled #navBtn::after, body:has(.es-dynamic-page-marker):not(.is-open) #header.scrolled .navbutton::after, body:has(.es-dynamic-page-marker):not(.is-open) #header[data-scrolled="true"] #navBtn::after, body:has(.es-dynamic-page-marker):not(.is-open) #header[data-scrolled="true"] .navbutton::after { display: block !important; visibility: visible !important; opacity: 1 !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: url(/app/uploads/sites/1446/2025/12/menu_btn.svg) no-repeat center center transparent !important; background-size: cover !important; z-index: 2 !important; content: "" !important; pointer-events: none !important; } body:not(.is-open) #header #navBtn::before, html:not(.is-open) body #header #navBtn::before, body:not(.is-open) #header .navbutton::before, html:not(.is-open) body #header .navbutton::before, body:not(.is-open) #header.fixed #navBtn::before, body:not(.is-open) #header.fixed .navbutton::before, body:not(.is-open) #header.sticky #navBtn::before, body:not(.is-open) #header.sticky .navbutton::before, body:not(.is-open) #header.scrolled #navBtn::before, body:not(.is-open) #header.scrolled .navbutton::before, body:not(.is-open) #header[data-scrolled="true"] #navBtn::before, body:not(.is-open) #header[data-scrolled="true"] .navbutton::before, /* 動的ページも含む */ body.es-dynamic-page:not(.is-open) #header #navBtn::before, body.es-dynamic-page:not(.is-open) #header .navbutton::before, body.es-dynamic-page:not(.is-open) #header.fixed #navBtn::before, body.es-dynamic-page:not(.is-open) #header.fixed .navbutton::before, body.es-dynamic-page:not(.is-open) #header.sticky #navBtn::before, body.es-dynamic-page:not(.is-open) #header.sticky .navbutton::before, body.es-dynamic-page:not(.is-open) #header.scrolled #navBtn::before, body.es-dynamic-page:not(.is-open) #header.scrolled .navbutton::before, body.es-dynamic-page:not(.is-open) #header[data-scrolled="true"] #navBtn::before, body.es-dynamic-page:not(.is-open) #header[data-scrolled="true"] .navbutton::before, body:has(.es-dynamic-page-marker):not(.is-open) #header #navBtn::before, body:has(.es-dynamic-page-marker):not(.is-open) #header .navbutton::before, body:has(.es-dynamic-page-marker):not(.is-open) #header.fixed #navBtn::before, body:has(.es-dynamic-page-marker):not(.is-open) #header.fixed .navbutton::before, body:has(.es-dynamic-page-marker):not(.is-open) #header.sticky #navBtn::before, body:has(.es-dynamic-page-marker):not(.is-open) #header.sticky .navbutton::before, body:has(.es-dynamic-page-marker):not(.is-open) #header.scrolled #navBtn::before, body:has(.es-dynamic-page-marker):not(.is-open) #header.scrolled .navbutton::before, body:has(.es-dynamic-page-marker):not(.is-open) #header[data-scrolled="true"] #navBtn::before, body:has(.es-dynamic-page-marker):not(.is-open) #header[data-scrolled="true"] .navbutton::before { display: none !important; visibility: hidden !important; opacity: 0 !important; } /* #globalNav.activeがない、#globalNav[style*="display: block"]がない時も三本線を表示、×アイコンを非表示 */ body #header #globalNav:not(.active):not([style*="display: block"]) ~ #navBtn::after, body #header .globalNav:not(.active):not([style*="display: block"]) ~ #navBtn::after, html body #header #globalNav:not(.active):not([style*="display: block"]) ~ #navBtn::after, html body #header .globalNav:not(.active):not([style*="display: block"]) ~ #navBtn::after, body #header.fixed #globalNav:not(.active):not([style*="display: block"]) ~ #navBtn::after, body #header.fixed .globalNav:not(.active):not([style*="display: block"]) ~ #navBtn::after, body #header.sticky #globalNav:not(.active):not([style*="display: block"]) ~ #navBtn::after, body #header.sticky .globalNav:not(.active):not([style*="display: block"]) ~ #navBtn::after, body #header.scrolled #globalNav:not(.active):not([style*="display: block"]) ~ #navBtn::after, body #header.scrolled .globalNav:not(.active):not([style*="display: block"]) ~ #navBtn::after, body #header[data-scrolled="true"] #globalNav:not(.active):not([style*="display: block"]) ~ #navBtn::after, body #header[data-scrolled="true"] .globalNav:not(.active):not([style*="display: block"]) ~ #navBtn::after { display: block !important; visibility: visible !important; opacity: 1 !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: url(/app/uploads/sites/1446/2025/12/menu_btn.svg) no-repeat center center transparent !important; background-size: cover !important; z-index: 2 !important; content: "" !important; pointer-events: none !important; } body #header #globalNav:not(.active):not([style*="display: block"]) ~ #navBtn::before, body #header .globalNav:not(.active):not([style*="display: block"]) ~ #navBtn::before, html body #header #globalNav:not(.active):not([style*="display: block"]) ~ #navBtn::before, html body #header .globalNav:not(.active):not([style*="display: block"]) ~ #navBtn::before, body #header.fixed #globalNav:not(.active):not([style*="display: block"]) ~ #navBtn::before, body #header.fixed .globalNav:not(.active):not([style*="display: block"]) ~ #navBtn::before, body #header.sticky #globalNav:not(.active):not([style*="display: block"]) ~ #navBtn::before, body #header.sticky .globalNav:not(.active):not([style*="display: block"]) ~ #navBtn::before, body #header.scrolled #globalNav:not(.active):not([style*="display: block"]) ~ #navBtn::before, body #header.scrolled .globalNav:not(.active):not([style*="display: block"]) ~ #navBtn::before, body #header[data-scrolled="true"] #globalNav:not(.active):not([style*="display: block"]) ~ #navBtn::before, body #header[data-scrolled="true"] .globalNav:not(.active):not([style*="display: block"]) ~ #navBtn::before { display: none !important; visibility: hidden !important; opacity: 0 !important; } /* ×ボタン（menu-close-btn）を非表示 */ .menu-close-btn { display: none !important; visibility: hidden !important; opacity: 0 !important; } /* .active時のすべてのテキスト要素を白に */ body #globalNav.active *, body .globalNav.active *, html body #globalNav.active *, html body .globalNav.active *, body #header #globalNav.active *, body #header .globalNav.active * { color: #fff !important; } /* .active時の電話番号のフォントサイズと色を調整（#header内の#globalNav.active内のみ、sec-contactには影響しない） */ /* より強力なセレクターで静的ページのスタイルを上書き */ #header .globalNav.active .box-logo-01 .tel, #header .globalNav.active .box-logo-01 .tel a, #header .globalNav[style*="display: block"] .box-logo-01 .tel, #header .globalNav[style*="display: block"] .box-logo-01 .tel a, body #header .globalNav.active .box-logo-01 .tel, body #header .globalNav.active .box-logo-01 .tel a, body #header .globalNav[style*="display: block"] .box-logo-01 .tel, body #header .globalNav[style*="display: block"] .box-logo-01 .tel a, html body #header .globalNav.active .box-logo-01 .tel, html body #header .globalNav.active .box-logo-01 .tel a, html body #header .globalNav[style*="display: block"] .box-logo-01 .tel, html body #header .globalNav[style*="display: block"] .box-logo-01 .tel a, body #header #globalNav.active .box-logo-01 .tel, body #header #globalNav.active .box-logo-01 .tel a, html body #header #globalNav.active .box-logo-01 .tel, html body #header #globalNav.active .box-logo-01 .tel a, body #header #globalNav[style*="display: block"] .box-logo-01 .tel, body #header #globalNav[style*="display: block"] .box-logo-01 .tel a, html body #header #globalNav[style*="display: block"] .box-logo-01 .tel, html body #header #globalNav[style*="display: block"] .box-logo-01 .tel a, body #header .globalNav.active .box-logo-01 .tel, body #header .globalNav.active .box-logo-01 .tel a, html body #header .globalNav.active .box-logo-01 .tel, html body #header .globalNav.active .box-logo-01 .tel a, body #header .globalNav[style*="display: block"] .box-logo-01 .tel, body #header .globalNav[style*="display: block"] .box-logo-01 .tel a, html body #header .globalNav[style*="display: block"] .box-logo-01 .tel, html body #header .globalNav[style*="display: block"] .box-logo-01 .tel a, .box-logo-01 .tel, .box-logo-01 .tel a, #header .box-logo-01 .tel, #header .box-logo-01 .tel a { font-size: 36px !important; /* 36pxに変更 */ font-weight: 700 !important; line-height: 1.2 !important; /* 行間を調整 */ word-break: break-all !important; /* 長い文字列を折り返す */ margin-bottom: 0 !important; margin-top: 0 !important; } /* .active時の営業時間のフォントサイズを大きく（#header内の#globalNav.active内のみ、sec-contactには影響しない） */ body #header #globalNav.active .box-logo-01 .time, html body #header #globalNav.active .box-logo-01 .time { color: #fff !important; font-size: 14px !important; font-weight: 400 !important; } /* sec-contact内の要素には影響しないように、より具体的なセレクターで保護 */ body .sec-contact .box-col2-01.box-contact-01 .inner.txt-wrap .tel, body .sec-contact .box-col2-01.box-contact-01 .inner.txt-wrap a.tel { font-size: 36px !important; /* 元のサイズに戻す */ } body .sec-contact .box-col2-01.box-contact-01 .inner.txt-wrap .time, body .sec-contact .box-col2-01.box-contact-01 .inner.txt-wrap p.time { font-size: 14px !important; /* 元のサイズに戻す */ } body .sec-contact .box-col2-01.box-contact-01 .inner.txt-wrap .unit-btn-01 a, body .sec-contact .box-col2-01.box-contact-01 .inner.txt-wrap .unit-btn-01.black a { font-size: inherit !important; /* 元のサイズに戻す */ } /* .active時の矢印アイコン（＞）のサイズを小さく、細く */ /* SP表示時のナビゲーションの矢印アイコン（::before）のサイズを小さく */ /* より強力なセレクターで静的ページのスタイルを上書き */ #header .globalNav .nav-inner ul li a::before, #header .globalNav.active .nav-inner ul li a::before, #header .globalNav[style*="display: block"] .nav-inner ul li a::before, body #header .globalNav .nav-inner ul li a::before, body #header .globalNav.active .nav-inner ul li a::before, body #header .globalNav[style*="display: block"] .nav-inner ul li a::before, html body #header .globalNav .nav-inner ul li a::before, html body #header .globalNav.active .nav-inner ul li a::before, html body #header .globalNav[style*="display: block"] .nav-inner ul li a::before, body #globalNav.active .nav-inner ul li a::before, body .globalNav.active .nav-inner ul li a::before, html body #globalNav.active .nav-inner ul li a::before, html body .globalNav.active .nav-inner ul li a::before, body #header #globalNav.active .nav-inner ul li a::before, body #header .globalNav.active .nav-inner ul li a::before, html body #header #globalNav.active .nav-inner ul li a::before, html body #header .globalNav.active .nav-inner ul li a::before { font-size: 1rem !important; /* 2remから1remに縮小 */ font-weight: 300 !important; color: #fff !important; } body #globalNav.active a .arrow, body .globalNav.active a .arrow, body #globalNav.active a .arrow::after, body .globalNav.active a .arrow::after, body #globalNav.active ul li a .arrow, body .globalNav.active ul li a .arrow, body #globalNav.active ul li a .arrow::after, body .globalNav.active ul li a .arrow::after, html body #globalNav.active a .arrow, html body .globalNav.active a .arrow, html body #globalNav.active a .arrow::after, html body .globalNav.active a .arrow::after, html body #globalNav.active ul li a .arrow, html body .globalNav.active ul li a .arrow, html body #globalNav.active ul li a .arrow::after, html body .globalNav.active ul li a .arrow::after, body #header #globalNav.active a .arrow, body #header .globalNav.active a .arrow, body #header #globalNav.active a .arrow::after, body #header .globalNav.active a .arrow::after, body #header #globalNav.active ul li a .arrow, body #header .globalNav.active ul li a .arrow, body #header #globalNav.active ul li a .arrow::after, body #header .globalNav.active ul li a .arrow::after { font-size: 0.6rem !important; /* 0.8remから0.6remに縮小 */ font-weight: 300 !important; color: #fff !important; } /* .active時のボタン内のテキストを黒に（#header内の#globalNav.active内のみ、sec-contactには影響しない） */ /* 通常時 */ body #header #globalNav.active .box-logo-01 .unit-btn-01, body #header #globalNav.active .box-logo-01 .unit-btn-01 a, body #header #globalNav.active .box-logo-01 .unit-btn-01 a span, html body #header #globalNav.active .box-logo-01 .unit-btn-01, html body #header #globalNav.active .box-logo-01 .unit-btn-01 a, html body #header #globalNav.active .box-logo-01 .unit-btn-01 a span, body #header #globalNav.active .box-logo-01 .unit-btn-01 *, html body #header #globalNav.active .box-logo-01 .unit-btn-01 *, body #header #globalNav[style*="display: block"] .box-logo-01 .unit-btn-01, body #header #globalNav[style*="display: block"] .box-logo-01 .unit-btn-01 a, body #header #globalNav[style*="display: block"] .box-logo-01 .unit-btn-01 a span, html body #header #globalNav[style*="display: block"] .box-logo-01 .unit-btn-01, html body #header #globalNav[style*="display: block"] .box-logo-01 .unit-btn-01 a, html body #header #globalNav[style*="display: block"] .box-logo-01 .unit-btn-01 a span, body #header #globalNav[style*="display: block"] .box-logo-01 .unit-btn-01 *, html body #header #globalNav[style*="display: block"] .box-logo-01 .unit-btn-01 *, body #header .globalNav.active .box-logo-01 .unit-btn-01, body #header .globalNav.active .box-logo-01 .unit-btn-01 a, body #header .globalNav.active .box-logo-01 .unit-btn-01 a span, html body #header .globalNav.active .box-logo-01 .unit-btn-01, html body #header .globalNav.active .box-logo-01 .unit-btn-01 a, html body #header .globalNav.active .box-logo-01 .unit-btn-01 a span, body #header .globalNav.active .box-logo-01 .unit-btn-01 *, html body #header .globalNav.active .box-logo-01 .unit-btn-01 *, body #header .globalNav[style*="display: block"] .box-logo-01 .unit-btn-01, body #header .globalNav[style*="display: block"] .box-logo-01 .unit-btn-01 a, body #header .globalNav[style*="display: block"] .box-logo-01 .unit-btn-01 a span, html body #header .globalNav[style*="display: block"] .box-logo-01 .unit-btn-01, html body #header .globalNav[style*="display: block"] .box-logo-01 .unit-btn-01 a, html body #header .globalNav[style*="display: block"] .box-logo-01 .unit-btn-01 a span, body #header .globalNav[style*="display: block"] .box-logo-01 .unit-btn-01 *, html body #header .globalNav[style*="display: block"] .box-logo-01 .unit-btn-01 *, /* 追従時 - より強力なセレクターでインラインスタイルを上書き */ body #header.fixed .globalNav.active .box-logo-01 .unit-btn-01, body #header.fixed .globalNav.active .box-logo-01 .unit-btn-01 a, body #header.fixed .globalNav.active .box-logo-01 .unit-btn-01 a span, body #header.fixed .globalNav.active .box-logo-01 .unit-btn-01 *, html body #header.fixed .globalNav.active .box-logo-01 .unit-btn-01, html body #header.fixed .globalNav.active .box-logo-01 .unit-btn-01 a, html body #header.fixed .globalNav.active .box-logo-01 .unit-btn-01 a span, html body #header.fixed .globalNav.active .box-logo-01 .unit-btn-01 *, body #header.sticky .globalNav.active .box-logo-01 .unit-btn-01, body #header.sticky .globalNav.active .box-logo-01 .unit-btn-01 a, body #header.sticky .globalNav.active .box-logo-01 .unit-btn-01 a span, body #header.sticky .globalNav.active .box-logo-01 .unit-btn-01 *, html body #header.sticky .globalNav.active .box-logo-01 .unit-btn-01, html body #header.sticky .globalNav.active .box-logo-01 .unit-btn-01 a, html body #header.sticky .globalNav.active .box-logo-01 .unit-btn-01 a span, html body #header.sticky .globalNav.active .box-logo-01 .unit-btn-01 *, body #header.scrolled .globalNav.active .box-logo-01 .unit-btn-01, body #header.scrolled .globalNav.active .box-logo-01 .unit-btn-01 a, body #header.scrolled .globalNav.active .box-logo-01 .unit-btn-01 a span, body #header.scrolled .globalNav.active .box-logo-01 .unit-btn-01 *, html body #header.scrolled .globalNav.active .box-logo-01 .unit-btn-01, html body #header.scrolled .globalNav.active .box-logo-01 .unit-btn-01 a, html body #header.scrolled .globalNav.active .box-logo-01 .unit-btn-01 a span, html body #header.scrolled .globalNav.active .box-logo-01 .unit-btn-01 *, body #header[data-scrolled="true"] .globalNav.active .box-logo-01 .unit-btn-01, body #header[data-scrolled="true"] .globalNav.active .box-logo-01 .unit-btn-01 a, body #header[data-scrolled="true"] .globalNav.active .box-logo-01 .unit-btn-01 a span, body #header[data-scrolled="true"] .globalNav.active .box-logo-01 .unit-btn-01 *, html body #header[data-scrolled="true"] .globalNav.active .box-logo-01 .unit-btn-01, html body #header[data-scrolled="true"] .globalNav.active .box-logo-01 .unit-btn-01 a, html body #header[data-scrolled="true"] .globalNav.active .box-logo-01 .unit-btn-01 a span, html body #header[data-scrolled="true"] .globalNav.active .box-logo-01 .unit-btn-01 *, body #header.fixed #globalNav.active .box-logo-01 .unit-btn-01, body #header.fixed #globalNav.active .box-logo-01 .unit-btn-01 a, body #header.fixed #globalNav.active .box-logo-01 .unit-btn-01 a span, body #header.fixed #globalNav.active .box-logo-01 .unit-btn-01 *, html body #header.fixed #globalNav.active .box-logo-01 .unit-btn-01, html body #header.fixed #globalNav.active .box-logo-01 .unit-btn-01 a, html body #header.fixed #globalNav.active .box-logo-01 .unit-btn-01 a span, html body #header.fixed #globalNav.active .box-logo-01 .unit-btn-01 *, body #header.sticky #globalNav.active .box-logo-01 .unit-btn-01, body #header.sticky #globalNav.active .box-logo-01 .unit-btn-01 a, body #header.sticky #globalNav.active .box-logo-01 .unit-btn-01 a span, body #header.sticky #globalNav.active .box-logo-01 .unit-btn-01 *, html body #header.sticky #globalNav.active .box-logo-01 .unit-btn-01, html body #header.sticky #globalNav.active .box-logo-01 .unit-btn-01 a, html body #header.sticky #globalNav.active .box-logo-01 .unit-btn-01 a span, html body #header.sticky #globalNav.active .box-logo-01 .unit-btn-01 *, body #header.scrolled #globalNav.active .box-logo-01 .unit-btn-01, body #header.scrolled #globalNav.active .box-logo-01 .unit-btn-01 a, body #header.scrolled #globalNav.active .box-logo-01 .unit-btn-01 a span, body #header.scrolled #globalNav.active .box-logo-01 .unit-btn-01 *, html body #header.scrolled #globalNav.active .box-logo-01 .unit-btn-01, html body #header.scrolled #globalNav.active .box-logo-01 .unit-btn-01 a, html body #header.scrolled #globalNav.active .box-logo-01 .unit-btn-01 a span, html body #header.scrolled #globalNav.active .box-logo-01 .unit-btn-01 *, body #header[data-scrolled="true"] #globalNav.active .box-logo-01 .unit-btn-01, body #header[data-scrolled="true"] #globalNav.active .box-logo-01 .unit-btn-01 a, body #header[data-scrolled="true"] #globalNav.active .box-logo-01 .unit-btn-01 a span, body #header[data-scrolled="true"] #globalNav.active .box-logo-01 .unit-btn-01 *, html body #header[data-scrolled="true"] #globalNav.active .box-logo-01 .unit-btn-01, html body #header[data-scrolled="true"] #globalNav.active .box-logo-01 .unit-btn-01 a, html body #header[data-scrolled="true"] #globalNav.active .box-logo-01 .unit-btn-01 a span, html body #header[data-scrolled="true"] #globalNav.active .box-logo-01 .unit-btn-01 * { color: #000 !important; background-color: #fff !important; background: #fff !important; } /* .active時のbox-logo-01の背景は透明に */ body #globalNav.active .box-logo-01, body .globalNav.active .box-logo-01, html body #globalNav.active .box-logo-01, html body .globalNav.active .box-logo-01, body #header #globalNav.active .box-logo-01, body #header .globalNav.active .box-logo-01 { background-color: transparent !important; background: transparent !important; background-image: none !important; } } /* ======================================== Font Awesomeのアイコンフォント保護 ======================================== */ @font-face { font-family: "FontAwesome"; src: url("https://use.fontawesome.com/releases/v5.0.13/webfonts/fa-solid-900.woff2") format("woff2"), url("https://use.fontawesome.com/releases/v5.0.13/webfonts/fa-solid-900.woff") format("woff"), url("https://use.fontawesome.com/releases/v5.0.13/webfonts/fa-solid-900.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: block; } @font-face { font-family: "Font Awesome 5 Free"; src: url("https://use.fontawesome.com/releases/v5.0.13/webfonts/fa-solid-900.woff2") format("woff2"), url("https://use.fontawesome.com/releases/v5.0.13/webfonts/fa-solid-900.woff") format("woff"), url("https://use.fontawesome.com/releases/v5.0.13/webfonts/fa-solid-900.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: block; } @font-face { font-family: "Font Awesome 5 Brands"; src: url("https://use.fontawesome.com/releases/v5.0.13/webfonts/fa-brands-400.woff2") format("woff2"), url("https://use.fontawesome.com/releases/v5.0.13/webfonts/fa-brands-400.woff") format("woff"), url("https://use.fontawesome.com/releases/v5.0.13/webfonts/fa-brands-400.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: block; } .fa, .fas, .far, .fal, .fad, .fab, .fa:before, .fas:before, .far:before, .fal:before, .fad:before, .fab:before, .fa:after, .fas:after, .far:after, .fal:after, .fad:after, .fab:after { font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands", "FontAwesome", sans-serif !important; font-weight: normal !important; font-style: normal !important; } .fas { font-weight: 900 !important; } .far, .fab { font-weight: 400 !important; } /* ======================================== フォント設定 ======================================== */ /* サイト全体のフォント設定 */ /* 動的ページでも適用 */ html, body, h1, h2, h3, h4, h5, h6, p, a, span, div, li, *, body.es-dynamic-page html, body.es-dynamic-page body, body.es-dynamic-page *, body:has(.es-dynamic-page-marker) html, body:has(.es-dynamic-page-marker) body, body:has(.es-dynamic-page-marker) * { font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "Lato", sans-serif !important; } /* sec-contactセクションもサイト全体のフォント設定を適用 */ /* ただし、見出し、電話番号、営業時間、ボタンなどは個別にLatoフォントを設定 */ .sec-contact { font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "Lato", sans-serif !important; } .sec-contact * { font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "Lato", sans-serif !important; } /* ======================================== フッターのフォント設定 ======================================== */ /* ======================================== 動的ページのフッターの余分なスタイルを排除 ======================================== */ /* 動的ページのフッターを静的ページと同じスタイルに強制適用 */ /* 余分なインラインスタイルやクラスを上書き */ body.es-dynamic-page .footer-wrapper-01, body:has(.es-dynamic-page-marker) .footer-wrapper-01 { /* 静的ページと同じ基本スタイル */ font-weight: 500 !important; font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "Lato", sans-serif !important; /* 余分なスタイルをリセット */ margin: 0 !important; padding: 0 !important; background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; } /* フッター全体のフォント設定（既存サイトに合わせる） */ /* 動的ページでも適用 */ .footer-wrapper-01, body.es-dynamic-page .footer-wrapper-01, body:has(.es-dynamic-page-marker) .footer-wrapper-01 { font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "Lato", sans-serif !important; } /* フッター内の会社情報（住所など） */ .footer-wrapper-01 .company-box, .footer-wrapper-01 .company-box p { font-size: 14px !important; line-height: 1.6 !important; color: inherit !important; } /* フッターナビゲーション */ .footer-wrapper-01 .ft-nav { font-size: 14px !important; font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "Lato", sans-serif !important; display: flex !important; flex-wrap: wrap !important; list-style: none !important; margin: 0 !important; padding: 0 !important; } /* PC表示時：フッターナビゲーションのli要素の幅を調整 */ @media (min-width: 769px) { .footer-wrapper-01 .ft-nav li { font-size: 14px !important; width: auto !important; min-width: 0 !important; margin-right: 20px !important; margin-bottom: 10px !important; flex-shrink: 0 !important; } } .footer-wrapper-01 .ft-nav li a { font-size: 14px !important; line-height: 1.6 !important; font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "Lato", sans-serif !important; color: inherit !important; text-decoration: none !important; white-space: nowrap !important; /* テキストを1行に収める */ word-break: keep-all !important; /* 単語の途中で改行しない */ overflow-wrap: normal !important; /* 通常の折り返し */ } .footer-wrapper-01 .ft-nav li a .title { font-size: 14px !important; font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "Lato", sans-serif !important; } /* フッターの「＞」アイコンのfont-weightを調整 */ .footer-wrapper-01 .ft-nav li a::after, .footer-wrapper-01 .ft-nav li a .arrow::after, .footer-wrapper-01 .ft-nav li a .arrow { font-weight: 400 !important; font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "Lato", sans-serif !important; } /* コピーライト */ .footer-wrapper-01 .copyright { font-size: 12px !important; line-height: 1.6 !important; font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "Lato", sans-serif !important; } .footer-wrapper-01 .copyright small { font-size: 12px !important; line-height: 1.6 !important; font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "Lato", sans-serif !important; } /* ======================================== SP表示のフッター上の調整 ======================================== */ /* モバイル表示時（SP）のフッター上のマージン・パディング調整 */ @media (max-width: 768px) { /* sec-contactセクションの下のマージン調整 */ body .sec-contact, html body .sec-contact, body section.sec-contact, html body section.sec-contact { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* sec-contactセクション直後の要素のマージン調整 */ body .sec-contact + .footer-wrapper-01, html body .sec-contact + .footer-wrapper-01, body .sec-contact + footer, html body .sec-contact + footer { margin-top: 0 !important; } /* フッターの上（sec-contactセクションとの間）のスペーシング */ body .footer-wrapper-01, html body .footer-wrapper-01, body footer.footer-wrapper-01, html body footer.footer-wrapper-01, body .footer-wrapper-01[class*="footer"], html body .footer-wrapper-01[class*="footer"] { margin-top: 0 !important; padding-top: 40px !important; margin-bottom: 0 !important; } /* フッター内のコンテンツのパディング調整 */ body .footer-wrapper-01 .wrapper, html body .footer-wrapper-01 .wrapper, body footer.footer-wrapper-01 .wrapper, body .footer-wrapper-01 > .wrapper, html body .footer-wrapper-01 > .wrapper { padding-left: 20px !important; padding-right: 20px !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* フッター内のボックスレイアウト調整 */ body .footer-wrapper-01 .box-footer-01, html body .footer-wrapper-01 .box-footer-01 { margin-bottom: 20px !important; } /* フッターナビゲーションの調整 */ body .footer-wrapper-01 .ft-nav, html body .footer-wrapper-01 .ft-nav { margin-bottom: 20px !important; } /* コピーライトのマージン調整 */ body .footer-wrapper-01 .copyright, html body .footer-wrapper-01 .copyright { margin-top: 20px !important; padding-top: 20px !important; } /* SP表示のフッターのフォントサイズ調整 */ body .footer-wrapper-01, html body .footer-wrapper-01, body footer.footer-wrapper-01 { font-size: 14px !important; } /* フッター内の会社情報（住所など）のフォントサイズ */ body .footer-wrapper-01 .company-box, html body .footer-wrapper-01 .company-box, body .footer-wrapper-01 .company-box p, html body .footer-wrapper-01 .company-box p { font-size: 14px !important; } /* フッターナビゲーションのフォントサイズ */ body .footer-wrapper-01 .ft-nav, html body .footer-wrapper-01 .ft-nav { font-size: 14px !important; } body .footer-wrapper-01 .ft-nav li, html body .footer-wrapper-01 .ft-nav li { font-size: 14px !important; } body .footer-wrapper-01 .ft-nav li a, html body .footer-wrapper-01 .ft-nav li a { font-size: 14px !important; } body .footer-wrapper-01 .ft-nav li a .title, html body .footer-wrapper-01 .ft-nav li a .title { font-size: 14px !important; } /* コピーライトのフォントサイズ */ body .footer-wrapper-01 .copyright, html body .footer-wrapper-01 .copyright { font-size: 12px !important; } body .footer-wrapper-01 .copyright small, html body .footer-wrapper-01 .copyright small { font-size: 12px !important; } } /* ======================================== sec-contactの調整 ======================================== */ /* いい生活CMSの余分なCSSを無効化して既存サイトのスタイルを適用 */ /* いい生活CMSが追加するクラスを無効化 */ .sec-contact .is-layout-flex, .sec-contact .is-layout-grid, .sec-contact [class*="wp-block-"], .sec-contact [class*="uagb-"], .sec-contact [class*="es-"] { display: revert !important; flex: revert !important; grid: revert !important; gap: revert !important; align-items: revert !important; justify-content: revert !important; flex-wrap: revert !important; flex-direction: revert !important; margin: revert !important; padding: revert !important; width: revert !important; max-width: revert !important; background: revert !important; background-color: revert !important; color: revert !important; font-size: revert !important; line-height: revert !important; border: revert !important; border-radius: revert !important; box-shadow: revert !important; position: revert !important; text-align: revert !important; text-decoration: revert !important; font-weight: revert !important; font-style: revert !important; overflow: revert !important; transition: revert !important; transform: revert !important; } /* sec-contactセクション全体 - 既存のCSS（common.css）が適用されるようにする */ /* いい生活CMSのスタイルを最小限の調整のみ */ .sec-contact { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; display: block !important; position: relative !important; /* 既存のCSS（common.css）の背景色、パディング、マージンが適用されるようにする */ /* background, margin, paddingは既存のCSSに任せる */ } /* 動的ページのsec-contact-01も静的ページと同じスタイルを適用 */ .sec-contact-01.es-dynamic-sec-contact, body.es-dynamic-page .sec-contact-01.es-dynamic-sec-contact, body:has(.es-dynamic-page-marker) .sec-contact-01.es-dynamic-sec-contact { margin-top: 0 !important; padding: 0px 0 80px !important; } @media screen and (max-width: 768px) { .sec-contact-01.es-dynamic-sec-contact, body.es-dynamic-page .sec-contact-01.es-dynamic-sec-contact, body:has(.es-dynamic-page-marker) .sec-contact-01.es-dynamic-sec-contact { padding: 40px 0 !important; } } .sec-contact-01.es-dynamic-sec-contact .wrapper.mb80, body.es-dynamic-page .sec-contact-01.es-dynamic-sec-contact .wrapper.mb80, body:has(.es-dynamic-page-marker) .sec-contact-01.es-dynamic-sec-contact .wrapper.mb80 { width: 100% !important; max-width: 1000px !important; margin: 0 auto !important; padding: 0 15px !important; box-sizing: border-box !important; } @media screen and (max-width: 767px) { .sec-contact-01.es-dynamic-sec-contact .wrapper.mb80, body.es-dynamic-page .sec-contact-01.es-dynamic-sec-contact .wrapper.mb80, body:has(.es-dynamic-page-marker) .sec-contact-01.es-dynamic-sec-contact .wrapper.mb80 { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } } /* 動的ページのsec-contact-01内のpタグのスタイル（静的ページと同じ） */ .sec-contact-01.es-dynamic-sec-contact .wrapper.mb80 p, body.es-dynamic-page .sec-contact-01.es-dynamic-sec-contact .wrapper.mb80 p, body:has(.es-dynamic-page-marker) .sec-contact-01.es-dynamic-sec-contact .wrapper.mb80 p { font-size: 1.6rem !important; line-height: 1.8 !important; letter-spacing: 0.05em !important; margin-bottom: 20px !important; } @media screen and (max-width: 768px) { .sec-contact-01.es-dynamic-sec-contact .wrapper.mb80 p, body.es-dynamic-page .sec-contact-01.es-dynamic-sec-contact .wrapper.mb80 p, body:has(.es-dynamic-page-marker) .sec-contact-01.es-dynamic-sec-contact .wrapper.mb80 p { font-size: 1.4rem !important; margin-bottom: 15px !important; } } /* 動的ページのsec-contact-01内のrequiredクラスのスタイル（静的ページと同じ） */ .sec-contact-01.es-dynamic-sec-contact .required, body.es-dynamic-page .sec-contact-01.es-dynamic-sec-contact .required, body:has(.es-dynamic-page-marker) .sec-contact-01.es-dynamic-sec-contact .required { color: #ff960b !important; font-weight: bold !important; } /* 動的ページのsec-contact-01内のaタグのスタイル（静的ページと同じ） */ .sec-contact-01.es-dynamic-sec-contact a, body.es-dynamic-page .sec-contact-01.es-dynamic-sec-contact a, body:has(.es-dynamic-page-marker) .sec-contact-01.es-dynamic-sec-contact a { color: #407aea !important; text-decoration: underline !important; } .sec-contact-01.es-dynamic-sec-contact a:hover, body.es-dynamic-page .sec-contact-01.es-dynamic-sec-contact a:hover, body:has(.es-dynamic-page-marker) .sec-contact-01.es-dynamic-sec-contact a:hover { color: #333 !important; } /* 動的ページのsec-contact-01内のフォームラベルのスタイル（静的ページと同じ） */ .sec-contact-01.es-dynamic-sec-contact .es-form-label, body.es-dynamic-page .sec-contact-01.es-dynamic-sec-contact .es-form-label, body:has(.es-dynamic-page-marker) .sec-contact-01.es-dynamic-sec-contact .es-form-label { font-size: 16px !important; } @media screen and (max-width: 767px) { .sec-contact-01.es-dynamic-sec-contact .es-form-label, body.es-dynamic-page .sec-contact-01.es-dynamic-sec-contact .es-form-label, body:has(.es-dynamic-page-marker) .sec-contact-01.es-dynamic-sec-contact .es-form-label { font-size: 14px !important; } } /* wrapper w990の幅を既存サイトに合わせる（990px） */ .sec-contact .wrapper.w990 { max-width: 990px !important; width: 100% !important; margin: 0 auto !important; padding-left: 15px !important; padding-right: 15px !important; box-sizing: border-box !important; display: block !important; position: relative !important; /* 既存のCSS（common.css）の背景色が適用されるようにする */ /* backgroundは既存のCSSに任せる */ } /* box-col2-01 box-contact-01のレイアウト */ /* 既存のCSS（common.css）の2カラムレイアウトが適用されるようにする */ .sec-contact .box-col2-01.box-contact-01 { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; position: relative !important; /* いい生活CMSのflexやgridをリセット（既存のCSSのflex/gridは適用されるように） */ grid: none !important; /* 既存のCSS（common.css）のdisplay, flex, gap, margin, paddingが適用されるようにする */ /* display, flex, gap, margin, paddingは既存のCSSに任せる */ } /* inner txt-wrapとmap-wrap */ /* 既存のCSS（common.css）の2カラム幅が適用されるようにする */ .sec-contact .box-col2-01.box-contact-01 .inner { box-sizing: border-box !important; position: relative !important; /* いい生活CMSのflexやgridをリセット（既存のCSSのflex/gridは適用されるように） */ grid: none !important; /* 既存のCSS（common.css）のdisplay, flex, width, margin, paddingが適用されるようにする */ /* display, flex, width, margin, paddingは既存のCSSに任せる */ } /* 見出し - より強力なセレクターで上書き */ body .sec-contact .unit-title-01, body .sec-contact h2.unit-title-01, .sec-contact .wrapper.w990 .unit-title-01, .sec-contact .wrapper.w990 h2.unit-title-01 { display: block !important; position: relative !important; /* 既存サイトのフォントサイズを明示的に設定（PC表示） */ font-size: 48px !important; line-height: 1.7 !important; /* 既存サイトに合わせて調整 */ font-weight: 700 !important; font-family: 'Lato', sans-serif !important; text-align: center !important; /* 既存のCSS（common.css）のマージン、パディングが適用されるようにする */ /* margin, paddingは既存のCSSに任せる */ } /* SP表示時の見出しのフォントサイズ調整 */ @media (max-width: 768px) { body .sec-contact .unit-title-01, body .sec-contact h2.unit-title-01, .sec-contact .wrapper.w990 .unit-title-01, .sec-contact .wrapper.w990 h2.unit-title-01 { font-size: 28px !important; /* SP表示では28pxに調整 */ line-height: 1.6 !important; } /* SP表示時の電話番号のフォントサイズ調整（ボタンと同じサイズに） */ body .sec-contact .tel, body .sec-contact a.tel, .sec-contact .box-col2-01.box-contact-01 .inner.txt-wrap .tel, .sec-contact .box-col2-01.box-contact-01 .inner.txt-wrap a.tel { /* ボタンのフォントサイズと同じにする（ボタンは通常16px程度） */ font-size: 16px !important; /* ボタンと同じサイズに調整 */ } } body .sec-contact .unit-title-01.white, body .sec-contact h2.unit-title-01.white, body .sec-contact .unit-title-01.t-center, body .sec-contact h2.unit-title-01.t-center, body .sec-contact .unit-title-01.white.t-center, body .sec-contact h2.unit-title-01.white.t-center, .sec-contact .wrapper.w990 .unit-title-01.white, .sec-contact .wrapper.w990 h2.unit-title-01.white, .sec-contact .wrapper.w990 .unit-title-01.t-center, .sec-contact .wrapper.w990 h2.unit-title-01.t-center, .sec-contact .wrapper.w990 .unit-title-01.white.t-center, .sec-contact .wrapper.w990 h2.unit-title-01.white.t-center { color: #fff !important; font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "Lato", sans-serif !important; font-weight: 700 !important; } body .sec-contact .unit-title-01 .sub, body .sec-contact h2.unit-title-01 .sub, body .sec-contact .unit-title-01.white .sub, body .sec-contact h2.unit-title-01.white .sub, body .sec-contact .unit-title-01.t-center .sub, body .sec-contact h2.unit-title-01.t-center .sub, body .sec-contact .unit-title-01.white.t-center .sub, body .sec-contact h2.unit-title-01.white.t-center .sub, .sec-contact .wrapper.w990 .unit-title-01 .sub, .sec-contact .wrapper.w990 h2.unit-title-01 .sub, .sec-contact .wrapper.w990 .unit-title-01.white .sub, .sec-contact .wrapper.w990 h2.unit-title-01.white .sub, .sec-contact .wrapper.w990 .unit-title-01.t-center .sub, .sec-contact .wrapper.w990 h2.unit-title-01.t-center .sub, .sec-contact .wrapper.w990 .unit-title-01.white.t-center .sub, .sec-contact .wrapper.w990 h2.unit-title-01.white.t-center .sub { display: block !important; /* 既存サイトのフォントサイズを明示的に設定 */ font-size: 16px !important; font-weight: 400 !important; font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "Lato", sans-serif !important; /* 既存のCSS（common.css）のマージン、パディングが適用されるようにする */ /* margin, paddingは既存のCSSに任せる */ } /* 左カラム（txt-wrap）のフォント設定 */ /* 見出し、電話番号、営業時間、ボタン以外はサイト全体のフォントを適用 */ body .sec-contact .box-col2-01.box-contact-01 .inner.txt-wrap, .sec-contact .box-col2-01.box-contact-01 .inner.txt-wrap { font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "Lato", sans-serif !important; } /* 見出し、電話番号、営業時間、ボタン以外の要素はサイト全体のフォントを適用 */ body .sec-contact .box-col2-01.box-contact-01 .inner.txt-wrap *:not(.unit-title-01):not(.unit-title-01 *):not(.tel):not(.time):not(.unit-btn-01):not(.unit-btn-01 *), .sec-contact .box-col2-01.box-contact-01 .inner.txt-wrap *:not(.unit-title-01):not(.unit-title-01 *):not(.tel):not(.time):not(.unit-btn-01):not(.unit-btn-01 *) { font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "Lato", sans-serif !important; } /* 電話番号 - sec-contact内のみ（ハンバーガーナビには影響しない） */ body .sec-contact .tel, body .sec-contact a.tel, .sec-contact .box-col2-01.box-contact-01 .inner.txt-wrap .tel, .sec-contact .box-col2-01.box-contact-01 .inner.txt-wrap a.tel { display: block !important; /* 黒いボタンと同じ横幅で収まるサイズ（48px） */ font-size: 48px !important; font-weight: 700 !important; font-family: 'Lato', sans-serif !important; color: #fff !important; text-decoration: none !important; /* 既存のCSS（common.css）のマージン、パディングが適用されるようにする */ /* margin, paddingは既存のCSSに任せる */ } /* 営業時間 - より強力なセレクターで上書き */ body .sec-contact .time, body .sec-contact p.time, .sec-contact .box-col2-01.box-contact-01 .inner.txt-wrap .time, .sec-contact .box-col2-01.box-contact-01 .inner.txt-wrap p.time { display: block !important; /* 既存サイトのフォントサイズを明示的に設定 */ font-size: 14px !important; line-height: 1.6 !important; font-weight: 400 !important; font-family: 'Lato', sans-serif !important; color: #fff !important; /* 既存のCSS（common.css）のマージン、パディングが適用されるようにする */ /* margin, paddingは既存のCSSに任せる */ } /* ボタン */ .sec-contact .unit-btn-01 { display: inline-block !important; /* 既存のCSS（common.css）のマージン、パディングが適用されるようにする */ /* margin, paddingは既存のCSSに任せる */ } .sec-contact .unit-btn-01.black { background-color: #000 !important; color: #fff !important; } /* ボタン - より強力なセレクターで上書き */ body .sec-contact .unit-btn-01 a, body .sec-contact .unit-btn-01.black a, .sec-contact .box-col2-01.box-contact-01 .inner.txt-wrap .unit-btn-01 a, .sec-contact .box-col2-01.box-contact-01 .inner.txt-wrap .unit-btn-01.black a { display: inline-block !important; /* 既存のCSS（common.css）のマージン、パディング、テキスト装飾が適用されるようにする */ text-decoration: none !important; font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "Lato", sans-serif !important; font-weight: 500 !important; /* 既存サイトに合わせて調整（medium） */ letter-spacing: 0.05em !important; /* 既存サイトに合わせて調整 */ color: #fff !important; white-space: nowrap !important; /* テキストを1行に収める */ /* margin, paddingは既存のCSSに任せる */ } .sec-contact .unit-btn-01 > a{ font-size: 1.2rem !important; } /* SP表示時のボタンのサイズ調整（はみ出し防止） */ @media (max-width: 768px) { body .sec-contact .unit-btn-01, body .sec-contact .unit-btn-01.black, .sec-contact .box-col2-01.box-contact-01 .inner.txt-wrap .unit-btn-01 { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } body .sec-contact .unit-btn-01 a, body .sec-contact .unit-btn-01.black a, .sec-contact .box-col2-01.box-contact-01 .inner.txt-wrap .unit-btn-01 a, .sec-contact .box-col2-01.box-contact-01 .inner.txt-wrap .unit-btn-01.black a { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding-left: 1px !important; padding-right: 15px !important; white-space: nowrap !important; /* テキストを1行に収める */ overflow: hidden !important; text-overflow: ellipsis !important; /* はみ出した場合は省略記号を表示 */ } /* SP表示時の地図の下のパディング追加 */ .sec-contact .box-col2-01.box-contact-01 .inner.map-wrap { padding-bottom: 40px !important; margin-bottom: 0 !important; } } body .sec-contact .unit-btn-01 a span, body .sec-contact .unit-btn-01.black a span, .sec-contact .box-col2-01.box-contact-01 .inner.txt-wrap .unit-btn-01 a span, .sec-contact .box-col2-01.box-contact-01 .inner.txt-wrap .unit-btn-01.black a span { font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "Lato", sans-serif !important; font-weight: 500 !important; /* 既存サイトに合わせて調整（medium） */ letter-spacing: 0.05em !important; /* 既存サイトに合わせて調整 */ color: #fff !important; } /* メールアイコンの表示 - CSSの::before疑似要素で直接表示 */ .sec-contact .unit-btn-01.icon-mail a::before, .sec-contact .icon-mail a::before, .unit-btn-01.icon-mail a::before, .icon-mail a::before, body .sec-contact .unit-btn-01.icon-mail a::before, body .sec-contact .icon-mail a::before, body .unit-btn-01.icon-mail a::before, body .icon-mail a::before { content: "\f0e0" !important; /* Font Awesome envelope icon */ font-family: "Font Awesome 5 Free", "FontAwesome" !important; font-weight: 900 !important; font-style: normal !important; display: inline-block !important; margin-right: 0.5em !important; text-rendering: auto !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } /* メールアイコンの余計なcontentを非表示（div要素の::beforeは非表示） */ .unit-btn-01.icon-mail::before, .icon-mail::before, .sec-contact .unit-btn-01.icon-mail::before { content: none !important; display: none !important; } @media screen and (max-width: 768px) { #header .globalNav .nav-inner ul li a::before{ font-size: 1rem !important; } } /* ======================================== 動的ページ（物件一覧ページなど）のフォントサイズ修正 ======================================== */ /* 動的ページでは:rootとhtmlのフォントサイズを100%に強制 */ body.es-dynamic-page :root, body:has(.es-dynamic-page-marker) :root { font-size: 100% !important; } body.es-dynamic-page html, body:has(.es-dynamic-page-marker) html { font-size: 100% !important; } /* 動的ページのコンテンツ部分のフォントサイズを正常化 */ body.es-dynamic-page #page, body.es-dynamic-page #content, body.es-dynamic-page main, body:has(.es-dynamic-page-marker) #page, body:has(.es-dynamic-page-marker) #content, body:has(.es-dynamic-page-marker) main { font-size: 100% !important; } body.es-dynamic-page #page *, body.es-dynamic-page #content *, body.es-dynamic-page main *, body:has(.es-dynamic-page-marker) #page *, body:has(.es-dynamic-page-marker) #content *, body:has(.es-dynamic-page-marker) main * { font-size: inherit !important; } /* ======================================== サブメニューのスタイル ======================================== */ /* PC表示時：サブメニューの基本スタイル */ @media (min-width: 769px) { /* サブメニューを持つli要素 */ #header .globalNav .nav-inner ul li.has-submenu { position: relative !important; } /* サブメニューリスト - より強力なセレクターで上書き */ /* 通常ページ用 - より強力なセレクターで確実に適用 */ /* PC表示時のみ有効（SP表示の.active時は無効） */ body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu, html body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu, #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu, body #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu, html body #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu { position: absolute !important; top: 100% !important; left: 50% !important; transform: translateX(-50%) !important; background-color: #fff !important; background: #fff !important; min-width: 150px !important; padding: 0 !important; margin-top: 0 !important; /* ギャップをなくしてマウスが離れにくくする */ list-style: none !important; opacity: 0 !important; visibility: hidden !important; display: block !important; /* 常にblockを維持（縦並び） */ flex-direction: column !important; /* 縦並びを確実にする */ transition: opacity 0.2s ease, visibility 0.2s ease !important; z-index: 10000 !important; /* z-indexを上げて確実に表示 */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; border-radius: 4px !important; pointer-events: none !important; /* 非表示時はクリック不可 */ height: auto !important; width: auto !important; } /* サブメニューの親要素（li）にpadding-bottomを追加してマウスが離れにくくする */ #header .globalNav:not(.active) .nav-inner ul li.has-submenu { position: relative !important; z-index: 9999 !important; /* サブメニューとの接続を維持 */ } /* 動的ページでも静的ページと同じようにサブメニューを表示（PC表示時のみ） */ /* 通常時は非表示、ホバー時に表示 */ body.es-dynamic-page #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu, html body.es-dynamic-page #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu, body:has(.es-dynamic-page-marker) #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu, html body:has(.es-dynamic-page-marker) #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu, /* 通常時（追従していない時）でも同じスタイルを適用 */ body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu, html body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu, html body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu { position: absolute !important; top: 100% !important; left: 50% !important; transform: translateX(-50%) !important; background-color: #fff !important; background: #fff !important; min-width: 150px !important; padding: 0 !important; /* まずpaddingを0にリセット */ padding-top: 10px !important; padding-bottom: 50px !important; /* 下部にパディングを追加してシャドウが表示されるスペースを確保（テスト用に50px） */ padding-left: 0 !important; padding-right: 0 !important; margin-top: 0 !important; /* ギャップをなくしてマウスが離れにくくする */ display: block !important; /* 縦並びにするためblockに設定 */ flex-direction: column !important; /* 縦並びを確実にする */ margin-bottom: 10px !important; /* 下部にマージンを追加してシャドウが切れないように（増量） */ list-style: none !important; opacity: 0 !important; visibility: hidden !important; display: block !important; transition: opacity 0.2s ease, visibility 0.2s ease !important; z-index: 10002 !important; /* z-indexを上げて確実に表示、シャドウが切れないようにさらに上げる */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; border-radius: 4px !important; pointer-events: none !important; height: auto !important; max-height: none !important; /* 高さの制限を解除（サブメニューの下側が切れないように） */ min-height: auto !important; width: auto !important; overflow: visible !important; /* 親要素のoverflowを上書き */ } /* 動的ページのサブメニューのli要素とa要素にも背景色を明示的に設定（売買物件まで背景が続くように） */ body.es-dynamic-page #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li, html body.es-dynamic-page #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li, body:has(.es-dynamic-page-marker) #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li, html body:has(.es-dynamic-page-marker) #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li, body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li, html body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li, html body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li { background-color: #fff !important; background: #fff !important; } body.es-dynamic-page #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, html body.es-dynamic-page #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, body:has(.es-dynamic-page-marker) #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, html body:has(.es-dynamic-page-marker) #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, html body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, html body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a { background-color: #fff !important; background: #fff !important; } /* 動的ページのサブメニューに下部のシャドウを確実に表示（売買物件の下まで） */ body.es-dynamic-page #header .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu, html body.es-dynamic-page #header .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu, body:has(.es-dynamic-page-marker) #header .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu, html body:has(.es-dynamic-page-marker) #header .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu, body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu, html body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu, html body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; overflow: visible !important; /* シャドウが切れないように */ z-index: 10002 !important; /* シャドウが切れないようにz-indexを上げる */ padding: 0 !important; /* まずpaddingを0にリセット */ padding-top: 10px !important; padding-bottom: 50px !important; /* 下部にパディングを追加してシャドウが表示されるスペースを確保（テスト用に50px） */ padding-left: 0 !important; padding-right: 0 !important; margin-bottom: 10px !important; /* 下部にマージンを追加してシャドウが切れないように（増量） */ } /* 動的ページのサブメニューの親要素（li）にpadding-bottomを追加してマウスが離れにくくする */ body.es-dynamic-page #header .globalNav:not(.active) .nav-inner ul li.has-submenu, html body.es-dynamic-page #header .globalNav:not(.active) .nav-inner ul li.has-submenu, body:has(.es-dynamic-page-marker) #header .globalNav:not(.active) .nav-inner ul li.has-submenu, html body:has(.es-dynamic-page-marker) #header .globalNav:not(.active) .nav-inner ul li.has-submenu { position: relative !important; z-index: 10001 !important; /* サブメニューとの接続を維持、シャドウが切れないようにz-indexを上げる */ overflow: visible !important; /* サブメニューのシャドウが切れないように */ height: auto !important; /* 高さの制限を解除 */ max-height: none !important; /* 高さの制限を解除 */ } /* ホバー時にサブメニューを表示 */ /* 通常ページ用 - より強力なセレクターで確実に表示 */ /* PC表示時のみ有効（SP表示の.active時は無効） */ body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu, html body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu, #header .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu, body #header .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu, html body #header .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; /* 表示時はクリック可能 */ } /* 動的ページでも静的ページと同じようにサブメニューを表示（PC表示時のみ） */ body.es-dynamic-page #header .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu, html body.es-dynamic-page #header .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu, body:has(.es-dynamic-page-marker) #header .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu, html body:has(.es-dynamic-page-marker) #header .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu, /* 通常時（追従していない時）でも同じように表示 */ body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu, html body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu, html body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* サブメニューのli要素 - 縦並びを確実にする */ #header .globalNav .nav-inner ul li.has-submenu .sub-menu li { display: block !important; width: 100% !important; padding: 0 !important; margin: 0 !important; text-align: left !important; flex-shrink: 0 !important; /* flexboxで縮小されないように */ } /* サブメニューのリンク - より強力なセレクターで確実に適用 */ /* 通常ページで追従していないとき（背景黒）は黒テキスト */ /* グローバルナビゲーションの白テキストを上書きするため、より強力なセレクターを使用 */ /* PC表示時のみ有効（SP表示の.active時は無効） */ html body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, html body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, html body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, html body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, html body #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, body #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, html body #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, body #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, /* 動的ページでも静的ページと同じスタイルを適用 */ html body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, html body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, html body.es-dynamic-page #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, body.es-dynamic-page #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, html body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, html body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, html body:has(.es-dynamic-page-marker) #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, body:has(.es-dynamic-page-marker) #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a { display: block !important; padding: 8px 20px !important; color: #333 !important; text-decoration: none !important; font-size: 14px !important; font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "Lato", sans-serif !important; transition: background-color 0.2s ease !important; } /* サブメニューのリンクホバー - より強力なセレクターで確実に適用 */ /* PC表示時のみ有効（SP表示の.active時は無効） */ body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a:hover, html body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a:hover, #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a:hover, body #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a:hover, html body #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a:hover, /* 動的ページでも静的ページと同じスタイルを適用 */ body.es-dynamic-page #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a:hover, html body.es-dynamic-page #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a:hover, body:has(.es-dynamic-page-marker) #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a:hover, html body:has(.es-dynamic-page-marker) #header .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a:hover { background-color: #f5f5f5 !important; color: #142d62 !important; } /* スクロール時（背景白）のサブメニュー */ #header.fixed .globalNav .nav-inner ul li.has-submenu .sub-menu, #header.sticky .globalNav .nav-inner ul li.has-submenu .sub-menu, #header.scrolled .globalNav .nav-inner ul li.has-submenu .sub-menu { background-color: #fff !important; background: #fff !important; overflow: visible !important; /* シャドウが切れないように */ display: block !important; /* 縦並びにするためblockに設定 */ flex-direction: column !important; /* 縦並びを確実にする */ } /* 動的ページの追従時（スクロール時）のサブメニューにもシャドウとoverflow: visibleを適用 */ body.es-dynamic-page #header.fixed .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu, html body.es-dynamic-page #header.fixed .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu, body.es-dynamic-page #header.sticky .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu, html body.es-dynamic-page #header.sticky .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu, body.es-dynamic-page #header.scrolled .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu, html body.es-dynamic-page #header.scrolled .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu, body:has(.es-dynamic-page-marker) #header.fixed .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu, html body:has(.es-dynamic-page-marker) #header.fixed .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu, body:has(.es-dynamic-page-marker) #header.sticky .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu, html body:has(.es-dynamic-page-marker) #header.sticky .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu, body:has(.es-dynamic-page-marker) #header.scrolled .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu, html body:has(.es-dynamic-page-marker) #header.scrolled .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; overflow: visible !important; /* シャドウが切れないように */ height: auto !important; max-height: none !important; /* 高さの制限を解除（サブメニューの下側が切れないように） */ min-height: auto !important; padding: 0 !important; /* まずpaddingを0にリセット */ padding-top: 10px !important; padding-bottom: 50px !important; /* 下部にパディングを追加してシャドウが表示されるスペースを確保（テスト用に50px） */ padding-left: 0 !important; padding-right: 0 !important; margin-bottom: 10px !important; /* 下部にマージンを追加してシャドウが切れないように（増量） */ display: block !important; /* 縦並びにするためblockに設定 */ flex-direction: column !important; /* 縦並びを確実にする */ } /* 動的ページの追従時（スクロール時）のサブメニューホバー時にもシャドウとoverflow: visibleを適用 */ body.es-dynamic-page #header.fixed .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu, html body.es-dynamic-page #header.fixed .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu, body.es-dynamic-page #header.sticky .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu, html body.es-dynamic-page #header.sticky .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu, body.es-dynamic-page #header.scrolled .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu, html body.es-dynamic-page #header.scrolled .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu, body:has(.es-dynamic-page-marker) #header.fixed .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu, html body:has(.es-dynamic-page-marker) #header.fixed .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu, body:has(.es-dynamic-page-marker) #header.sticky .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu, html body:has(.es-dynamic-page-marker) #header.sticky .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu, body:has(.es-dynamic-page-marker) #header.scrolled .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu, html body:has(.es-dynamic-page-marker) #header.scrolled .globalNav:not(.active) .nav-inner ul li.has-submenu:hover .sub-menu { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; overflow: visible !important; /* シャドウが切れないように */ z-index: 10002 !important; /* シャドウが切れないようにz-indexを上げる */ height: auto !important; max-height: none !important; /* 高さの制限を解除（サブメニューの下側が切れないように） */ min-height: auto !important; padding: 0 !important; /* まずpaddingを0にリセット */ padding-top: 10px !important; padding-bottom: 50px !important; /* 下部にパディングを追加してシャドウが表示されるスペースを確保（テスト用に50px） */ padding-left: 0 !important; padding-right: 0 !important; margin-bottom: 10px !important; /* 下部にマージンを追加してシャドウが切れないように（増量） */ } /* スクロール時（背景白）のサブメニューのリンク - より強力なセレクター */ /* PC表示時のみ有効（SP表示の.active時は無効） */ body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header.fixed .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header.sticky .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header.scrolled .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, #header.fixed .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, #header.sticky .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a, #header.scrolled .globalNav:not(.active) .nav-inner ul li.has-submenu .sub-menu li a { color: #333 !important; } } /* PC表示時（通常時）のハンバーガナビ展開時のサブナビテキストを白に */ @media (min-width: 769px) { /* 静的ページ、通常時（追従していない時）の.active時のサブメニューのリンクを白に */ body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav.active .nav-inner ul li.has-submenu .sub-menu li a, html body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav.active .nav-inner ul li.has-submenu .sub-menu li a, body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li a, html body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li a { color: #fff !important; } } /* SP表示時：サブメニューを通常のメニューとして表示 */ @media (max-width: 768px) { /* #header .globalNav .nav-inner ulの下部の線を削除 */ #header .globalNav .nav-inner ul { border-bottom: none !important; } /* 追従時のハンバーガナビ展開時の白い区切り線 - より強力なセレクターで確実に適用 */ body #header.fixed .globalNav.active .nav-inner ul li, body #header.sticky .globalNav.active .nav-inner ul li, body #header.scrolled .globalNav.active .nav-inner ul li, body #header[data-scrolled="true"] .globalNav.active .nav-inner ul li, html body #header.fixed .globalNav.active .nav-inner ul li, html body #header.sticky .globalNav.active .nav-inner ul li, html body #header.scrolled .globalNav.active .nav-inner ul li, html body #header[data-scrolled="true"] .globalNav.active .nav-inner ul li, body #header.fixed #globalNav.active .nav-inner ul li, body #header.sticky #globalNav.active .nav-inner ul li, body #header.scrolled #globalNav.active .nav-inner ul li, body #header[data-scrolled="true"] #globalNav.active .nav-inner ul li, html body #header.fixed #globalNav.active .nav-inner ul li, html body #header.sticky #globalNav.active .nav-inner ul li, html body #header.scrolled #globalNav.active .nav-inner ul li, html body #header[data-scrolled="true"] #globalNav.active .nav-inner ul li { border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important; /* 既存サイトと同じ半透明の白線 */ } /* 追従時のお知らせのborder-bottom */ body #header.fixed .globalNav.active .nav-inner ul li:last-child, body #header.sticky .globalNav.active .nav-inner ul li:last-child, body #header.scrolled .globalNav.active .nav-inner ul li:last-child, body #header[data-scrolled="true"] .globalNav.active .nav-inner ul li:last-child, html body #header.fixed .globalNav.active .nav-inner ul li:last-child, html body #header.sticky .globalNav.active .nav-inner ul li:last-child, html body #header.scrolled .globalNav.active .nav-inner ul li:last-child, html body #header[data-scrolled="true"] .globalNav.active .nav-inner ul li:last-child, body #header.fixed #globalNav.active .nav-inner ul li:last-child, body #header.sticky #globalNav.active .nav-inner ul li:last-child, body #header.scrolled #globalNav.active .nav-inner ul li:last-child, body #header[data-scrolled="true"] #globalNav.active .nav-inner ul li:last-child, html body #header.fixed #globalNav.active .nav-inner ul li:last-child, html body #header.sticky #globalNav.active .nav-inner ul li:last-child, html body #header.scrolled #globalNav.active .nav-inner ul li:last-child, html body #header[data-scrolled="true"] #globalNav.active .nav-inner ul li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important; /* 既存サイトと同じ半透明の白線 */ } /* 追従時のサブメニューのli要素のborder-top */ body #header.fixed .globalNav.active .nav-inner ul li.has-submenu .sub-menu li, body #header.sticky .globalNav.active .nav-inner ul li.has-submenu .sub-menu li, body #header.scrolled .globalNav.active .nav-inner ul li.has-submenu .sub-menu li, body #header[data-scrolled="true"] .globalNav.active .nav-inner ul li.has-submenu .sub-menu li, html body #header.fixed .globalNav.active .nav-inner ul li.has-submenu .sub-menu li, html body #header.sticky .globalNav.active .nav-inner ul li.has-submenu .sub-menu li, html body #header.scrolled .globalNav.active .nav-inner ul li.has-submenu .sub-menu li, html body #header[data-scrolled="true"] .globalNav.active .nav-inner ul li.has-submenu .sub-menu li, body #header.fixed #globalNav.active .nav-inner ul li.has-submenu .sub-menu li, body #header.sticky #globalNav.active .nav-inner ul li.has-submenu .sub-menu li, body #header.scrolled #globalNav.active .nav-inner ul li.has-submenu .sub-menu li, body #header[data-scrolled="true"] #globalNav.active .nav-inner ul li.has-submenu .sub-menu li, html body #header.fixed #globalNav.active .nav-inner ul li.has-submenu .sub-menu li, html body #header.sticky #globalNav.active .nav-inner ul li.has-submenu .sub-menu li, html body #header.scrolled #globalNav.active .nav-inner ul li.has-submenu .sub-menu li, html body #header[data-scrolled="true"] #globalNav.active .nav-inner ul li.has-submenu .sub-menu li { border-top: 1px solid rgba(255, 255, 255, 0.3) !important; /* 通常時と同じ半透明の白線 */ } } /* SP表示時：サブメニューのスタイル */ @media (max-width: 768px) { /* SP表示時：お問い合わせのli要素を非表示にする */ #header .globalNav .nav-inner ul li.contact, #header .globalNav.active .nav-inner ul li.contact, #header .globalNav[style*="display: block"] .nav-inner ul li.contact, #header #globalNav .nav-inner ul li.contact, #header #globalNav.active .nav-inner ul li.contact, #header #globalNav[style*="display: block"] .nav-inner ul li.contact, body #header .globalNav .nav-inner ul li.contact, body #header .globalNav.active .nav-inner ul li.contact, body #header .globalNav[style*="display: block"] .nav-inner ul li.contact, body #header #globalNav .nav-inner ul li.contact, body #header #globalNav.active .nav-inner ul li.contact, body #header #globalNav[style*="display: block"] .nav-inner ul li.contact, html body #header .globalNav .nav-inner ul li.contact, html body #header .globalNav.active .nav-inner ul li.contact, html body #header .globalNav[style*="display: block"] .nav-inner ul li.contact, html body #header #globalNav .nav-inner ul li.contact, html body #header #globalNav.active .nav-inner ul li.contact, html body #header #globalNav[style*="display: block"] .nav-inner ul li.contact, #header.fixed .globalNav .nav-inner ul li.contact, #header.fixed .globalNav.active .nav-inner ul li.contact, #header.sticky .globalNav .nav-inner ul li.contact, #header.sticky .globalNav.active .nav-inner ul li.contact, #header.scrolled .globalNav .nav-inner ul li.contact, #header.scrolled .globalNav.active .nav-inner ul li.contact, #header[data-scrolled="true"] .globalNav .nav-inner ul li.contact, #header[data-scrolled="true"] .globalNav.active .nav-inner ul li.contact, #header.fixed #globalNav .nav-inner ul li.contact, #header.fixed #globalNav.active .nav-inner ul li.contact, #header.sticky #globalNav .nav-inner ul li.contact, #header.sticky #globalNav.active .nav-inner ul li.contact, #header.scrolled #globalNav .nav-inner ul li.contact, #header.scrolled #globalNav.active .nav-inner ul li.contact, #header[data-scrolled="true"] #globalNav .nav-inner ul li.contact, #header[data-scrolled="true"] #globalNav.active .nav-inner ul li.contact { display: none !important; /* SP表示時は非表示 */ align-self: auto !important; } /* SP表示時：nav-inner ulのheight: 100%を上書き */ #header .globalNav .nav-inner ul, #header #globalNav .nav-inner ul, body #header .globalNav .nav-inner ul, body #header #globalNav .nav-inner ul, html body #header .globalNav .nav-inner ul, html body #header #globalNav .nav-inner ul, #header.fixed .globalNav .nav-inner ul, #header.sticky .globalNav .nav-inner ul, #header.scrolled .globalNav .nav-inner ul, #header[data-scrolled="true"] .globalNav .nav-inner ul, #header[style*="position: fixed"] .globalNav .nav-inner ul, #header[style*="position: sticky"] .globalNav .nav-inner ul, body #header.fixed .globalNav .nav-inner ul, body #header.sticky .globalNav .nav-inner ul, body #header.scrolled .globalNav .nav-inner ul, body #header[data-scrolled="true"] .globalNav .nav-inner ul, html body #header.fixed .globalNav .nav-inner ul, html body #header.sticky .globalNav .nav-inner ul, html body #header.scrolled .globalNav .nav-inner ul, html body #header[data-scrolled="true"] .globalNav .nav-inner ul, #header.fixed #globalNav .nav-inner ul, #header.sticky #globalNav .nav-inner ul, #header.scrolled #globalNav .nav-inner ul, #header[data-scrolled="true"] #globalNav .nav-inner ul, body #header.fixed #globalNav .nav-inner ul, body #header.sticky #globalNav .nav-inner ul, body #header.scrolled #globalNav .nav-inner ul, body #header[data-scrolled="true"] #globalNav .nav-inner ul { height: auto !important; /* SP表示時はheight: 100%を上書き */ min-height: auto !important; max-height: none !important; } /* SP表示時：お問い合わせのリンクテキストを通常のメニューと同じ白にする */ #header .globalNav .nav-inner ul li.contact a, #header .globalNav.active .nav-inner ul li.contact a, #header .globalNav[style*="display: block"] .nav-inner ul li.contact a, #header #globalNav .nav-inner ul li.contact a, #header #globalNav.active .nav-inner ul li.contact a, #header #globalNav[style*="display: block"] .nav-inner ul li.contact a, body #header .globalNav .nav-inner ul li.contact a, body #header .globalNav.active .nav-inner ul li.contact a, body #header .globalNav[style*="display: block"] .nav-inner ul li.contact a, body #header #globalNav .nav-inner ul li.contact a, body #header #globalNav.active .nav-inner ul li.contact a, body #header #globalNav[style*="display: block"] .nav-inner ul li.contact a, html body #header .globalNav .nav-inner ul li.contact a, html body #header .globalNav.active .nav-inner ul li.contact a, html body #header .globalNav[style*="display: block"] .nav-inner ul li.contact a, html body #header #globalNav .nav-inner ul li.contact a, html body #header #globalNav.active .nav-inner ul li.contact a, html body #header #globalNav[style*="display: block"] .nav-inner ul li.contact a, #header.fixed .globalNav .nav-inner ul li.contact a, #header.fixed .globalNav.active .nav-inner ul li.contact a, #header.sticky .globalNav .nav-inner ul li.contact a, #header.sticky .globalNav.active .nav-inner ul li.contact a, #header.scrolled .globalNav .nav-inner ul li.contact a, #header.scrolled .globalNav.active .nav-inner ul li.contact a, #header[data-scrolled="true"] .globalNav .nav-inner ul li.contact a, #header[data-scrolled="true"] .globalNav.active .nav-inner ul li.contact a { color: #fff !important; padding: 12px 20px !important; display: block !important; } /* SP表示時：お問い合わせのメールアイコンを非表示にする（通常の矢印アイコンと同じにする） */ #header .globalNav .nav-inner ul li.contact a::before, #header .globalNav.active .nav-inner ul li.contact a::before, #header .globalNav[style*="display: block"] .nav-inner ul li.contact a::before, #header #globalNav .nav-inner ul li.contact a::before, #header #globalNav.active .nav-inner ul li.contact a::before, #header #globalNav[style*="display: block"] .nav-inner ul li.contact a::before, body #header .globalNav .nav-inner ul li.contact a::before, body #header .globalNav.active .nav-inner ul li.contact a::before, body #header .globalNav[style*="display: block"] .nav-inner ul li.contact a::before, body #header #globalNav .nav-inner ul li.contact a::before, body #header #globalNav.active .nav-inner ul li.contact a::before, body #header #globalNav[style*="display: block"] .nav-inner ul li.contact a::before, html body #header .globalNav .nav-inner ul li.contact a::before, html body #header .globalNav.active .nav-inner ul li.contact a::before, html body #header .globalNav[style*="display: block"] .nav-inner ul li.contact a::before, html body #header #globalNav .nav-inner ul li.contact a::before, html body #header #globalNav.active .nav-inner ul li.contact a::before, html body #header #globalNav[style*="display: block"] .nav-inner ul li.contact a::before, #header.fixed .globalNav .nav-inner ul li.contact a::before, #header.fixed .globalNav.active .nav-inner ul li.contact a::before, #header.sticky .globalNav .nav-inner ul li.contact a::before, #header.sticky .globalNav.active .nav-inner ul li.contact a::before, #header.scrolled .globalNav .nav-inner ul li.contact a::before, #header.scrolled .globalNav.active .nav-inner ul li.contact a::before, #header[data-scrolled="true"] .globalNav .nav-inner ul li.contact a::before, #header[data-scrolled="true"] .globalNav.active .nav-inner ul li.contact a::before { content: "" !important; display: none !important; } /* SP表示時：お問い合わせの前の区切り線を表示（通常のメニューと同じ） */ #header .globalNav .nav-inner ul li.contact::before, #header .globalNav.active .nav-inner ul li.contact::before, #header .globalNav[style*="display: block"] .nav-inner ul li.contact::before, body #header .globalNav .nav-inner ul li.contact::before, body #header .globalNav.active .nav-inner ul li.contact::before, body #header .globalNav[style*="display: block"] .nav-inner ul li.contact::before, html body #header .globalNav .nav-inner ul li.contact::before, html body #header .globalNav.active .nav-inner ul li.contact::before, html body #header .globalNav[style*="display: block"] .nav-inner ul li.contact::before { display: inline !important; content: "｜" !important; } /* サブメニューリスト - SP表示時（.active時）も表示、位置を修正 */ /* より強力なセレクターで確実に表示（動的ページでも静的ページでも） */ #header .globalNav .nav-inner ul li.has-submenu .sub-menu, #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu, #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu, body.es-dynamic-page #header .globalNav .nav-inner ul li.has-submenu .sub-menu, body.es-dynamic-page #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu, body.es-dynamic-page #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu, body:has(.es-dynamic-page-marker) #header .globalNav .nav-inner ul li.has-submenu .sub-menu, body:has(.es-dynamic-page-marker) #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu, body:has(.es-dynamic-page-marker) #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu, /* 静的ページ、通常時（追従していない時）の.active時のサブメニューも表示 */ body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav.active .nav-inner ul li.has-submenu .sub-menu, html body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav.active .nav-inner ul li.has-submenu .sub-menu, /* ヘッダーにes-dynamic-headerクラスが付いている場合も対応 */ #header.es-dynamic-header .globalNav .nav-inner ul li.has-submenu .sub-menu, #header.es-dynamic-header .globalNav.active .nav-inner ul li.has-submenu .sub-menu, #header.es-dynamic-header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu, body.es-dynamic-page #header.es-dynamic-header .globalNav .nav-inner ul li.has-submenu .sub-menu, body.es-dynamic-page #header.es-dynamic-header .globalNav.active .nav-inner ul li.has-submenu .sub-menu, body.es-dynamic-page #header.es-dynamic-header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu, body:has(.es-dynamic-page-marker) #header.es-dynamic-header .globalNav .nav-inner ul li.has-submenu .sub-menu, body:has(.es-dynamic-page-marker) #header.es-dynamic-header .globalNav.active .nav-inner ul li.has-submenu .sub-menu, body:has(.es-dynamic-page-marker) #header.es-dynamic-header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu { display: block !important; position: static !important; transform: none !important; background-color: transparent !important; background: transparent !important; padding: 0 !important; margin: 0 !important; margin-left: 0 !important; /* 左マージンを削除して位置を修正 */ opacity: 1 !important; visibility: visible !important; box-shadow: none !important; border-radius: 0 !important; /* インラインスタイルで上書きされないように、より強力に設定 */ pointer-events: auto !important; height: auto !important; /* 親のheight: 100%の影響を受けないようにautoに設定 */ min-height: auto !important; width: 100% !important; /* 幅を100%に設定 */ max-height: none !important; max-width: none !important; } /* サブメニューのli要素 - 高さのバランスを調整 */ /* より直接的なセレクターも追加 */ .sub-menu li, #header .globalNav .nav-inner ul li.has-submenu .sub-menu li, #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li, #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li, html body #header .globalNav .nav-inner ul li.has-submenu .sub-menu li, html body #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li, html body #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li, body #header .globalNav .nav-inner ul li.has-submenu .sub-menu li, body #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li, body #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li, body.es-dynamic-page #header .globalNav .nav-inner ul li.has-submenu .sub-menu li, body.es-dynamic-page #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li, body.es-dynamic-page #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li, body:has(.es-dynamic-page-marker) #header .globalNav .nav-inner ul li.has-submenu .sub-menu li, body:has(.es-dynamic-page-marker) #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li, body:has(.es-dynamic-page-marker) #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li, /* ヘッダーにes-dynamic-headerクラスが付いている場合も対応 */ #header.es-dynamic-header .globalNav .nav-inner ul li.has-submenu .sub-menu li, #header.es-dynamic-header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li, #header.es-dynamic-header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li, body.es-dynamic-page #header.es-dynamic-header .globalNav .nav-inner ul li.has-submenu .sub-menu li, body.es-dynamic-page #header.es-dynamic-header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li, body.es-dynamic-page #header.es-dynamic-header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li, body:has(.es-dynamic-page-marker) #header.es-dynamic-header .globalNav .nav-inner ul li.has-submenu .sub-menu li, body:has(.es-dynamic-page-marker) #header.es-dynamic-header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li, body:has(.es-dynamic-page-marker) #header.es-dynamic-header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li { display: block !important; width: 100% !important; padding: 6px 0 !important; /* 高さのバランスを調整 */ margin: 0 !important; text-align: left !important; line-height: 1.5 !important; /* 高さのバランスを調整 */ height: auto !important; min-height: auto !important; max-height: none !important; } /* サブメニューの最初の項目（賃貸物件）の上部の線を削除（親要素のborder-bottomと重複しないように） */ /* より強力なセレクターで上書き */ #header .globalNav .nav-inner ul li.has-submenu .sub-menu li:first-child, #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li:first-child, #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li:first-child, body #header .globalNav .nav-inner ul li.has-submenu .sub-menu li:first-child, body #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li:first-child, body #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li:first-child, html body #header .globalNav .nav-inner ul li.has-submenu .sub-menu li:first-child, html body #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li:first-child, html body #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li:first-child { border-top: none !important; border-top-width: 0 !important; border-top-style: none !important; border-top-color: transparent !important; } /* サブメニューの最後の項目（売買物件）の下部の線を削除 */ #header .globalNav .nav-inner ul li.has-submenu .sub-menu li:last-child, #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li:last-child, #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li:last-child, body #header .globalNav .nav-inner ul li.has-submenu .sub-menu li:last-child, body #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li:last-child, body #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li:last-child, html body #header .globalNav .nav-inner ul li.has-submenu .sub-menu li:last-child, html body #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li:last-child, html body #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li:last-child { border-bottom: none !important; border-bottom-width: 0 !important; border-bottom-style: none !important; border-bottom-color: transparent !important; } /* SP表示時：通常のメニュー項目（li要素）の余分なborder-topを削除 */ /* es_user_identityとhas-submenuを除外して、通常のメニュー項目のみに適用 */ #header .globalNav.active .nav-inner ul > li:not(.es_user_identity):not(.has-submenu), #header .globalNav[style*="display: block"] .nav-inner ul > li:not(.es_user_identity):not(.has-submenu), #header.fixed .globalNav.active .nav-inner ul > li:not(.es_user_identity):not(.has-submenu), #header.sticky .globalNav.active .nav-inner ul > li:not(.es_user_identity):not(.has-submenu), #header.scrolled .globalNav.active .nav-inner ul > li:not(.es_user_identity):not(.has-submenu), #header[data-scrolled="true"] .globalNav.active .nav-inner ul > li:not(.es_user_identity):not(.has-submenu), #header.fixed .globalNav[style*="display: block"] .nav-inner ul > li:not(.es_user_identity):not(.has-submenu), #header.sticky .globalNav[style*="display: block"] .nav-inner ul > li:not(.es_user_identity):not(.has-submenu), #header.scrolled .globalNav[style*="display: block"] .nav-inner ul > li:not(.es_user_identity):not(.has-submenu), #header[data-scrolled="true"] .globalNav[style*="display: block"] .nav-inner ul > li:not(.es_user_identity):not(.has-submenu), body #header .globalNav.active .nav-inner ul > li:not(.es_user_identity):not(.has-submenu), body #header .globalNav[style*="display: block"] .nav-inner ul > li:not(.es_user_identity):not(.has-submenu), html body #header .globalNav.active .nav-inner ul > li:not(.es_user_identity):not(.has-submenu), html body #header .globalNav[style*="display: block"] .nav-inner ul > li:not(.es_user_identity):not(.has-submenu) { padding: 6px 0px 6px 0 !important; /* paddingを6px 0px 6px 0に設定 */ margin: 0 !important; height: 50px !important; /* 高さを50pxに設定 */ min-height: 50px !important; max-height: 50px !important; display: flex !important; align-items: center !important; /* 垂直方向の中央揃え */ border-top: none !important; /* 余分なborder-topを削除 */ border-top-width: 0 !important; border-top-style: none !important; border-top-color: transparent !important; } /* SP表示時：サブメニューがあるメニュー項目（li.has-submenu）の高さはautoにしてサブナビに合わせる */ #header .globalNav.active .nav-inner ul > li.has-submenu, #header .globalNav[style*="display: block"] .nav-inner ul > li.has-submenu, #header.fixed .globalNav.active .nav-inner ul > li.has-submenu, #header.sticky .globalNav.active .nav-inner ul > li.has-submenu, #header.scrolled .globalNav.active .nav-inner ul > li.has-submenu, #header[data-scrolled="true"] .globalNav.active .nav-inner ul > li.has-submenu, #header.fixed .globalNav[style*="display: block"] .nav-inner ul > li.has-submenu, #header.sticky .globalNav[style*="display: block"] .nav-inner ul > li.has-submenu, #header.scrolled .globalNav[style*="display: block"] .nav-inner ul > li.has-submenu, #header[data-scrolled="true"] .globalNav[style*="display: block"] .nav-inner ul > li.has-submenu, body #header .globalNav.active .nav-inner ul > li.has-submenu, body #header .globalNav[style*="display: block"] .nav-inner ul > li.has-submenu, html body #header .globalNav.active .nav-inner ul > li.has-submenu, html body #header .globalNav[style*="display: block"] .nav-inner ul > li.has-submenu { height: auto !important; /* サブナビに合わせて高さを自動調整 */ min-height: auto !important; max-height: none !important; } /* SP表示時：通常のメニュー項目（a要素）の幅を100%に設定、垂直方向の配置を修正、アイコン位置を右に */ /* es_user_identityとhas-submenuを除外して、通常のメニュー項目のみに適用 */ #header .globalNav.active .nav-inner ul > li:not(.es_user_identity):not(.has-submenu) > a, #header .globalNav[style*="display: block"] .nav-inner ul > li:not(.es_user_identity):not(.has-submenu) > a, #header.fixed .globalNav.active .nav-inner ul > li:not(.es_user_identity):not(.has-submenu) > a, #header.sticky .globalNav.active .nav-inner ul > li:not(.es_user_identity):not(.has-submenu) > a, #header.scrolled .globalNav.active .nav-inner ul > li:not(.es_user_identity):not(.has-submenu) > a, #header[data-scrolled="true"] .globalNav.active .nav-inner ul > li:not(.es_user_identity):not(.has-submenu) > a, #header.fixed .globalNav[style*="display: block"] .nav-inner ul > li:not(.es_user_identity):not(.has-submenu) > a, #header.sticky .globalNav[style*="display: block"] .nav-inner ul > li:not(.es_user_identity):not(.has-submenu) > a, #header.scrolled .globalNav[style*="display: block"] .nav-inner ul > li:not(.es_user_identity):not(.has-submenu) > a, #header[data-scrolled="true"] .globalNav[style*="display: block"] .nav-inner ul > li:not(.es_user_identity):not(.has-submenu) > a, body #header .globalNav.active .nav-inner ul > li:not(.es_user_identity):not(.has-submenu) > a, body #header .globalNav[style*="display: block"] .nav-inner ul > li:not(.es_user_identity):not(.has-submenu) > a, html body #header .globalNav.active .nav-inner ul > li:not(.es_user_identity):not(.has-submenu) > a, html body #header .globalNav[style*="display: block"] .nav-inner ul > li:not(.es_user_identity):not(.has-submenu) > a { width: 100% !important; /* 幅を100%に設定 */ padding: 0 20px !important; /* 左右のpaddingのみ設定 */ height: 50px !important; /* liの高さに合わせて50pxに設定 */ min-height: 50px !important; display: flex !important; align-items: center !important; /* 垂直方向の中央揃え */ justify-content: space-between !important; /* テキストとアイコンを左右に配置 */ line-height: 1.5 !important; position: relative !important; /* アイコンの位置指定のため */ } /* SP表示時：アイコン（::before）の位置を右に配置 - es_user_identityを除外 */ #header .globalNav.active .nav-inner ul > li:not(.es_user_identity) > a::before, #header .globalNav[style*="display: block"] .nav-inner ul > li:not(.es_user_identity) > a::before, #header.fixed .globalNav.active .nav-inner ul > li:not(.es_user_identity) > a::before, #header.sticky .globalNav.active .nav-inner ul > li:not(.es_user_identity) > a::before, #header.scrolled .globalNav.active .nav-inner ul > li:not(.es_user_identity) > a::before, #header[data-scrolled="true"] .globalNav.active .nav-inner ul > li:not(.es_user_identity) > a::before, #header.fixed .globalNav[style*="display: block"] .nav-inner ul > li:not(.es_user_identity) > a::before, #header.sticky .globalNav[style*="display: block"] .nav-inner ul > li:not(.es_user_identity) > a::before, #header.scrolled .globalNav[style*="display: block"] .nav-inner ul > li:not(.es_user_identity) > a::before, #header[data-scrolled="true"] .globalNav[style*="display: block"] .nav-inner ul > li:not(.es_user_identity) > a::before, body #header .globalNav.active .nav-inner ul > li:not(.es_user_identity) > a::before, body #header .globalNav[style*="display: block"] .nav-inner ul > li:not(.es_user_identity) > a::before, html body #header .globalNav.active .nav-inner ul > li:not(.es_user_identity) > a::before, html body #header .globalNav[style*="display: block"] .nav-inner ul > li:not(.es_user_identity) > a::before { position: absolute !important; right: 20px !important; /* 右端に配置 */ top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; } /* SP表示時：has-submenuのアイコン（::before）の位置を他のメニュー項目と合わせる */ #header .globalNav.active .nav-inner ul > li.has-submenu > a::before, #header .globalNav[style*="display: block"] .nav-inner ul > li.has-submenu > a::before, #header.fixed .globalNav.active .nav-inner ul > li.has-submenu > a::before, #header.sticky .globalNav.active .nav-inner ul > li.has-submenu > a::before, #header.scrolled .globalNav.active .nav-inner ul > li.has-submenu > a::before, #header[data-scrolled="true"] .globalNav.active .nav-inner ul > li.has-submenu > a::before, #header.fixed .globalNav[style*="display: block"] .nav-inner ul > li.has-submenu > a::before, #header.sticky .globalNav[style*="display: block"] .nav-inner ul > li.has-submenu > a::before, #header.scrolled .globalNav[style*="display: block"] .nav-inner ul > li.has-submenu > a::before, #header[data-scrolled="true"] .globalNav[style*="display: block"] .nav-inner ul > li.has-submenu > a::before, body #header .globalNav.active .nav-inner ul > li.has-submenu > a::before, body #header .globalNav[style*="display: block"] .nav-inner ul > li.has-submenu > a::before, html body #header .globalNav.active .nav-inner ul > li.has-submenu > a::before, html body #header .globalNav[style*="display: block"] .nav-inner ul > li.has-submenu > a::before { position: absolute !important; right: 20px !important; /* 他のメニュー項目と同じ位置に配置 */ top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; } /* SP表示時：has-submenuのspan.titleにmargin-left: 20pxを設定 */ #header .globalNav.active .nav-inner ul > li.has-submenu > a .title, #header .globalNav[style*="display: block"] .nav-inner ul > li.has-submenu > a .title, #header.fixed .globalNav.active .nav-inner ul > li.has-submenu > a .title, #header.sticky .globalNav.active .nav-inner ul > li.has-submenu > a .title, #header.scrolled .globalNav.active .nav-inner ul > li.has-submenu > a .title, #header[data-scrolled="true"] .globalNav.active .nav-inner ul > li.has-submenu > a .title, #header.fixed .globalNav[style*="display: block"] .nav-inner ul > li.has-submenu > a .title, #header.sticky .globalNav[style*="display: block"] .nav-inner ul > li.has-submenu > a .title, #header.scrolled .globalNav[style*="display: block"] .nav-inner ul > li.has-submenu > a .title, #header[data-scrolled="true"] .globalNav[style*="display: block"] .nav-inner ul > li.has-submenu > a .title, body #header .globalNav.active .nav-inner ul > li.has-submenu > a .title, body #header .globalNav[style*="display: block"] .nav-inner ul > li.has-submenu > a .title, html body #header .globalNav.active .nav-inner ul > li.has-submenu > a .title, html body #header .globalNav[style*="display: block"] .nav-inner ul > li.has-submenu > a .title { margin-left: 20px !important; } /* 通常のメニュー項目のborder-bottom - 既存サイトと同じように白線を表示（通常時・追従時共通） */ /* ただし、サブメニュー内の項目とes_user_identityは除外（直接の子要素のみ） */ #header .globalNav.active .nav-inner ul > li:not(.es_user_identity), #header .globalNav[style*="display: block"] .nav-inner ul > li:not(.es_user_identity), #header.fixed .globalNav.active .nav-inner ul > li:not(.es_user_identity), #header.sticky .globalNav.active .nav-inner ul > li:not(.es_user_identity), #header.scrolled .globalNav.active .nav-inner ul > li:not(.es_user_identity), #header[data-scrolled="true"] .globalNav.active .nav-inner ul > li:not(.es_user_identity), #header.fixed .globalNav[style*="display: block"] .nav-inner ul > li:not(.es_user_identity), #header.sticky .globalNav[style*="display: block"] .nav-inner ul > li:not(.es_user_identity), #header.scrolled .globalNav[style*="display: block"] .nav-inner ul > li:not(.es_user_identity), #header[data-scrolled="true"] .globalNav[style*="display: block"] .nav-inner ul > li:not(.es_user_identity) { border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important; /* 既存サイトと同じ半透明の白線 */ } /* お知らせのborder-bottomも既存サイトと同じように白線を表示（通常時・追従時共通） */ /* メインメニューの最後の項目（直接の子要素の最後）のみ、es_user_identityは除外 */ #header .globalNav.active .nav-inner ul > li:last-child:not(.es_user_identity), #header .globalNav[style*="display: block"] .nav-inner ul > li:last-child:not(.es_user_identity), #header.fixed .globalNav.active .nav-inner ul > li:last-child:not(.es_user_identity), #header.sticky .globalNav.active .nav-inner ul > li:last-child:not(.es_user_identity), #header.scrolled .globalNav.active .nav-inner ul > li:last-child:not(.es_user_identity), #header[data-scrolled="true"] .globalNav.active .nav-inner ul > li:last-child:not(.es_user_identity), #header.fixed .globalNav[style*="display: block"] .nav-inner ul > li:last-child:not(.es_user_identity), #header.sticky .globalNav[style*="display: block"] .nav-inner ul > li:last-child:not(.es_user_identity), #header.scrolled .globalNav[style*="display: block"] .nav-inner ul > li:last-child:not(.es_user_identity), #header[data-scrolled="true"] .globalNav[style*="display: block"] .nav-inner ul > li:last-child:not(.es_user_identity) { border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important; /* 既存サイトと同じ半透明の白線 */ } /* サブメニューのli要素のborder-topも通常時・追従時共通で同じ白に統一 */ #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li, #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li, #header.fixed .globalNav.active .nav-inner ul li.has-submenu .sub-menu li, #header.sticky .globalNav.active .nav-inner ul li.has-submenu .sub-menu li, #header.scrolled .globalNav.active .nav-inner ul li.has-submenu .sub-menu li, #header[data-scrolled="true"] .globalNav.active .nav-inner ul li.has-submenu .sub-menu li, #header.fixed .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li, #header.sticky .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li, #header.scrolled .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li, #header[data-scrolled="true"] .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li { border-top: 1px solid rgba(255, 255, 255, 0.3) !important; /* 通常時と同じ半透明の白線 */ } /* サブメニューのul要素 - インラインスタイルを上書き */ #header .globalNav .nav-inner ul li.has-submenu .sub-menu, #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu, #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu, body.es-dynamic-page #header .globalNav .nav-inner ul li.has-submenu .sub-menu, body.es-dynamic-page #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu, body.es-dynamic-page #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu, body:has(.es-dynamic-page-marker) #header .globalNav .nav-inner ul li.has-submenu .sub-menu, body:has(.es-dynamic-page-marker) #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu, body:has(.es-dynamic-page-marker) #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu, #header.es-dynamic-header .globalNav .nav-inner ul li.has-submenu .sub-menu, #header.es-dynamic-header .globalNav.active .nav-inner ul li.has-submenu .sub-menu, #header.es-dynamic-header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu, body.es-dynamic-page #header.es-dynamic-header .globalNav .nav-inner ul li.has-submenu .sub-menu, body.es-dynamic-page #header.es-dynamic-header .globalNav.active .nav-inner ul li.has-submenu .sub-menu, body.es-dynamic-page #header.es-dynamic-header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu, body:has(.es-dynamic-page-marker) #header.es-dynamic-header .globalNav .nav-inner ul li.has-submenu .sub-menu, body:has(.es-dynamic-page-marker) #header.es-dynamic-header .globalNav.active .nav-inner ul li.has-submenu .sub-menu, body:has(.es-dynamic-page-marker) #header.es-dynamic-header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu { color: inherit !important; } /* サブメニューのli要素 - インラインスタイルを上書き */ #header .globalNav .nav-inner ul li.has-submenu .sub-menu li, #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li, #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li, body.es-dynamic-page #header .globalNav .nav-inner ul li.has-submenu .sub-menu li, body.es-dynamic-page #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li, body.es-dynamic-page #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li, body:has(.es-dynamic-page-marker) #header .globalNav .nav-inner ul li.has-submenu .sub-menu li, body:has(.es-dynamic-page-marker) #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li, body:has(.es-dynamic-page-marker) #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li, #header.es-dynamic-header .globalNav .nav-inner ul li.has-submenu .sub-menu li, #header.es-dynamic-header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li, #header.es-dynamic-header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li, body.es-dynamic-page #header.es-dynamic-header .globalNav .nav-inner ul li.has-submenu .sub-menu li, body.es-dynamic-page #header.es-dynamic-header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li, body.es-dynamic-page #header.es-dynamic-header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li, body:has(.es-dynamic-page-marker) #header.es-dynamic-header .globalNav .nav-inner ul li.has-submenu .sub-menu li, body:has(.es-dynamic-page-marker) #header.es-dynamic-header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li, body:has(.es-dynamic-page-marker) #header.es-dynamic-header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li { color: inherit !important; } /* サブメニューのリンク - 元の通り3行表示に戻す（インデント付き） */ /* SP表示時（.active時）も適用 - より強力なセレクターで確実に適用 */ /* より直接的なセレクターも追加 */ .sub-menu li a, .sub-menu a, html body #header .globalNav .nav-inner ul li.has-submenu .sub-menu li a, html body #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li a, html body #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li a, body #header .globalNav .nav-inner ul li.has-submenu .sub-menu li a, body #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li a, body #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li a, #header .globalNav .nav-inner ul li.has-submenu .sub-menu li a, #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li a, #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li a, html body.es-dynamic-page #header .globalNav .nav-inner ul li.has-submenu .sub-menu li a, html body.es-dynamic-page #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li a, html body.es-dynamic-page #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li a, body.es-dynamic-page #header .globalNav .nav-inner ul li.has-submenu .sub-menu li a, body.es-dynamic-page #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li a, body.es-dynamic-page #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li a, html body:has(.es-dynamic-page-marker) #header .globalNav .nav-inner ul li.has-submenu .sub-menu li a, html body:has(.es-dynamic-page-marker) #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li a, html body:has(.es-dynamic-page-marker) #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li a, body:has(.es-dynamic-page-marker) #header .globalNav .nav-inner ul li.has-submenu .sub-menu li a, body:has(.es-dynamic-page-marker) #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li a, body:has(.es-dynamic-page-marker) #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li a, /* 静的ページ、通常時（追従していない時）の.active時のサブメニューのリンクも白に */ body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav.active .nav-inner ul li.has-submenu .sub-menu li a, html body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav.active .nav-inner ul li.has-submenu .sub-menu li a, body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li a, html body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header:not(.fixed):not(.sticky):not(.scrolled) .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li a, /* ヘッダーにes-dynamic-headerクラスが付いている場合も対応 */ html body #header.es-dynamic-header .globalNav .nav-inner ul li.has-submenu .sub-menu li a, html body #header.es-dynamic-header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li a, html body #header.es-dynamic-header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li a, body #header.es-dynamic-header .globalNav .nav-inner ul li.has-submenu .sub-menu li a, body #header.es-dynamic-header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li a, body #header.es-dynamic-header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li a, #header.es-dynamic-header .globalNav .nav-inner ul li.has-submenu .sub-menu li a, #header.es-dynamic-header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li a, #header.es-dynamic-header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li a, html body.es-dynamic-page #header.es-dynamic-header .globalNav .nav-inner ul li.has-submenu .sub-menu li a, html body.es-dynamic-page #header.es-dynamic-header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li a, html body.es-dynamic-page #header.es-dynamic-header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li a, body.es-dynamic-page #header.es-dynamic-header .globalNav .nav-inner ul li.has-submenu .sub-menu li a, body.es-dynamic-page #header.es-dynamic-header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li a, body.es-dynamic-page #header.es-dynamic-header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li a, html body:has(.es-dynamic-page-marker) #header.es-dynamic-header .globalNav .nav-inner ul li.has-submenu .sub-menu li a, html body:has(.es-dynamic-page-marker) #header.es-dynamic-header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li a, html body:has(.es-dynamic-page-marker) #header.es-dynamic-header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li a, body:has(.es-dynamic-page-marker) #header.es-dynamic-header .globalNav .nav-inner ul li.has-submenu .sub-menu li a, body:has(.es-dynamic-page-marker) #header.es-dynamic-header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li a, body:has(.es-dynamic-page-marker) #header.es-dynamic-header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li a { display: block !important; padding: 6px 20px 6px 40px !important; /* 左にインデント（40px）を追加、高さのバランスを調整 */ color: #fff !important; text-decoration: none !important; font-size: 14px !important; line-height: 1.5 !important; /* 高さのバランスを調整 */ font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "Lato", sans-serif !important; min-height: auto !important; height: auto !important; width: 100% !important; box-sizing: border-box !important; } /* サブメニューのアイコン（矢印）の位置とサイズを通常のメニュー項目と同じに */ #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li a .arrow, #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li a .arrow::after { font-size: 0.8rem !important; /* 通常のメニュー項目と同じサイズに */ font-weight: 300 !important; /* 通常のメニュー項目と同じ太さに */ color: #fff !important; } /* サブメニューのリンクホバー */ #header .globalNav .nav-inner ul li.has-submenu .sub-menu li a:hover { background-color: rgba(255, 255, 255, 0.1) !important; color: #fff !important; } } /* おすすめ物件のリンクをクリック不可にする（カーソルはポインターのまま） */ #header .globalNav .nav-inner ul li.has-submenu > a.no-link { cursor: pointer !important; pointer-events: auto !important; } #header .globalNav .nav-inner ul li.has-submenu > a.no-link:hover { cursor: pointer !important; } /* ======================================== 動的ページPC追従時オーバーレイのスタイル ======================================== */ /* オーバーレイコンテナ */ #header-nav-overlay { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; background-color: #fff !important; background: #fff !important; z-index: 10000 !important; box-sizing: border-box !important; } /* オーバーレイ内のheader-inner */ #header-nav-overlay .header-inner { display: flex !important; position: relative !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; height: 100% !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important; } /* オーバーレイ内のロゴ */ #header-nav-overlay .header-inner .logo { overflow: hidden !important; text-indent: 200% !important; white-space: nowrap !important; display: block !important; width: 202px !important; height: 58px !important; margin-left: 80px !important; -webkit-transition: all 0.3s ease-in-out !important; -o-transition: all 0.3s ease-in-out !important; transition: all 0.3s ease-in-out !important; } @media screen and (max-width: 1024px) { #header-nav-overlay .header-inner .logo { width: 150px !important; margin-left: 20px !important; } } /* オーバーレイ内のロゴリンク */ #header-nav-overlay .header-inner .logo a { display: block !important; width: 100% !important; height: 100% !important; background: url(/app/uploads/sites/1446/2025/12/top_logo.png) no-repeat center center transparent !important; background-size: contain !important; } /* オーバーレイ内のglobalNav */ #header-nav-overlay .header-inner .globalNav-overlay { background-color: #fff !important; background: #fff !important; background-image: none !important; height: 100% !important; padding: 25px 35px !important; box-sizing: border-box !important; transition: all 0.3s linear !important; } @media screen and (max-width: 1024px) { #header-nav-overlay .header-inner .globalNav-overlay { padding: 25px 15px !important; } } /* オーバーレイ内のnav-inner */ #header-nav-overlay .globalNav-overlay .nav-inner { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; display: block !important; box-sizing: border-box !important; } /* オーバーレイ内のul（既存のスタイルを継承） */ #header-nav-overlay .globalNav-overlay .nav-inner ul { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; list-style: none !important; margin: 0 !important; padding: 0 !important; } /* オーバーレイ内のli（既存のスタイルを継承） */ #header-nav-overlay .globalNav-overlay .nav-inner ul li { position: relative !important; text-align: center !important; padding: 0px 20px !important; } @media screen and (max-width: 1024px) { #header-nav-overlay .globalNav-overlay .nav-inner ul li { padding: 0px 10px !important; } } /* オーバーレイ内のli.contact（既存のスタイルを継承） */ #header-nav-overlay .globalNav-overlay .nav-inner ul li.contact { margin-left: 20px !important; padding-left: 40px !important; } @media screen and (max-width: 1024px) { #header-nav-overlay .globalNav-overlay .nav-inner ul li.contact { margin-left: 10px !important; padding-left: 20px !important; } } /* オーバーレイ内のli.contact:before（区切り線） */ #header-nav-overlay .globalNav-overlay .nav-inner ul li.contact:before { content: "" !important; width: 1px !important; height: 20px !important; background: #333 !important; position: absolute !important; left: 0 !important; top: 50% !important; -webkit-transform: translateY(-50%) !important; -ms-transform: translateY(-50%) !important; transform: translateY(-50%) !important; } /* オーバーレイ内のa（既存のスタイルを継承） */ #header-nav-overlay .globalNav-overlay .nav-inner ul li a { display: inline-block !important; position: relative !important; padding: 10px 0px !important; color: #333 !important; text-decoration: none !important; transition: all 0.3s ease-in-out !important; } /* オーバーレイ内のa:after（下線アニメーション） */ #header-nav-overlay .globalNav-overlay .nav-inner ul li a:after { position: absolute !important; bottom: 8px !important; left: 0 !important; content: "" !important; width: 100% !important; height: 3px !important; background: #333 !important; opacity: 0 !important; visibility: hidden !important; -webkit-transition: 0.3s !important; -o-transition: 0.3s !important; transition: 0.3s !important; } /* オーバーレイ内のa:hover:after */ #header-nav-overlay .globalNav-overlay .nav-inner ul li a:hover:after { bottom: 2px !important; opacity: 1 !important; visibility: visible !important; } /* ======================================== PCグローバルナビゲーションのホバー時の下線（紺色） ======================================== */ /* PC表示時：グローバルナビゲーションのリンクにホバー時の下線を追加（紺色） */ @media screen and (min-width: 769px) { /* 通常時（追従していない時）のホバー時の下線 */ #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:after, body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:after, html body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:after, #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) #globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:after, body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) #globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:after, html body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) #globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:after { position: absolute !important; bottom: 8px !important; left: 0 !important; content: "" !important; width: 100% !important; height: 3px !important; background: #263775 !important; /* 紺色（既存サイトのfc-navy3と同じ） */ opacity: 0 !important; visibility: hidden !important; -webkit-transition: 0.3s !important; -o-transition: 0.3s !important; transition: 0.3s !important; } /* 通常時（追従していない時）のホバー時の下線を表示 */ #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:hover:after, body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:hover:after, html body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:hover:after, #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) #globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:hover:after, body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) #globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:hover:after, html body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) #globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:hover:after { bottom: 2px !important; opacity: 1 !important; visibility: visible !important; } /* 追従時（fixed/sticky/scrolled）のホバー時の下線 */ #header.fixed .globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:after, #header.sticky .globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:after, #header.scrolled .globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:after, #header[data-scrolled="true"] .globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:after, body #header.fixed .globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:after, body #header.sticky .globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:after, body #header.scrolled .globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:after, body #header[data-scrolled="true"] .globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:after, html body #header.fixed .globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:after, html body #header.sticky .globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:after, html body #header.scrolled .globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:after, html body #header[data-scrolled="true"] .globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:after, #header.fixed #globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:after, #header.sticky #globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:after, #header.scrolled #globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:after, #header[data-scrolled="true"] #globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:after, body #header.fixed #globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:after, body #header.sticky #globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:after, body #header.scrolled #globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:after, body #header[data-scrolled="true"] #globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:after, html body #header.fixed #globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:after, html body #header.sticky #globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:after, html body #header.scrolled #globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:after, html body #header[data-scrolled="true"] #globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:after { position: absolute !important; bottom: 8px !important; left: 0 !important; content: "" !important; width: 100% !important; height: 3px !important; background: #263775 !important; /* 紺色（既存サイトのfc-navy3と同じ） */ opacity: 0 !important; visibility: hidden !important; -webkit-transition: 0.3s !important; -o-transition: 0.3s !important; transition: 0.3s !important; } /* 追従時（fixed/sticky/scrolled）のホバー時の下線を表示 */ #header.fixed .globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:hover:after, #header.sticky .globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:hover:after, #header.scrolled .globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:hover:after, #header[data-scrolled="true"] .globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:hover:after, body #header.fixed .globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:hover:after, body #header.sticky .globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:hover:after, body #header.scrolled .globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:hover:after, body #header[data-scrolled="true"] .globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:hover:after, html body #header.fixed .globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:hover:after, html body #header.sticky .globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:hover:after, html body #header.scrolled .globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:hover:after, html body #header[data-scrolled="true"] .globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:hover:after, #header.fixed #globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:hover:after, #header.sticky #globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:hover:after, #header.scrolled #globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:hover:after, #header[data-scrolled="true"] #globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:hover:after, body #header.fixed #globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:hover:after, body #header.sticky #globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:hover:after, body #header.scrolled #globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:hover:after, body #header[data-scrolled="true"] #globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:hover:after, html body #header.fixed #globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:hover:after, html body #header.sticky #globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:hover:after, html body #header.scrolled #globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:hover:after, html body #header[data-scrolled="true"] #globalNav .nav-inner ul li:not(.contact):not(.es_user_identity) > a:hover:after { bottom: 2px !important; opacity: 1 !important; visibility: visible !important; } } /* オーバーレイ内の.title（既存のスタイルを継承） */ #header-nav-overlay .globalNav-overlay .nav-inner ul li a .title { display: inline-block !important; font-size: 1.4rem !important; letter-spacing: 0.1em !important; color: #333 !important; } /* オーバーレイ内のサブメニュー（既存のスタイルを継承） */ #header-nav-overlay .globalNav-overlay .nav-inner ul li.has-submenu .sub-menu { position: absolute !important; top: 100% !important; left: 50% !important; transform: translateX(-50%) !important; background-color: #fff !important; background: #fff !important; min-width: 150px !important; padding: 10px 0 !important; margin-top: 0 !important; list-style: none !important; opacity: 0 !important; visibility: hidden !important; display: block !important; transition: opacity 0.2s ease, visibility 0.2s ease !important; z-index: 10001 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; border-radius: 4px !important; pointer-events: none !important; height: auto !important; width: auto !important; } /* オーバーレイ内のサブメニュー：ホバー時に表示 */ #header-nav-overlay .globalNav-overlay .nav-inner ul li.has-submenu:hover .sub-menu { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* オーバーレイ内のサブメニューのli要素 */ #header-nav-overlay .globalNav-overlay .nav-inner ul li.has-submenu .sub-menu li { display: block !important; width: 100% !important; padding: 0 !important; margin: 0 !important; text-align: left !important; } /* オーバーレイ内のサブメニューのリンク */ #header-nav-overlay .globalNav-overlay .nav-inner ul li.has-submenu .sub-menu li a { color: #333 !important; display: block !important; padding: 8px 20px !important; /* 通常時と同じpadding（8px 20px） */ text-decoration: none !important; transition: background-color 0.2s ease !important; font-size: 14px !important; /* 通常時と同じフォントサイズ（14px） */ font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "Lato", sans-serif !important; /* 通常時と同じフォントファミリー */ } /* オーバーレイ内のサブメニューのリンク：ホバー時 */ #header-nav-overlay .globalNav-overlay .nav-inner ul li.has-submenu .sub-menu li a:hover { background-color: rgba(0, 0, 0, 0.05) !important; color: #333 !important; } @media (max-width: 480px) { #page .es-header-breadcrumb .es-container { border-bottom: none; border-top: none!important; padding: 0 10px 10px!important; } } /* 動的ページSP表示時のサブメニューのテキストを白に */ @media screen and (max-width: 768px) { body.es-dynamic-page #header .globalNav .nav-inner ul li.has-submenu .sub-menu, body.es-dynamic-page #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu, body:has(.es-dynamic-page-marker) #header .globalNav .nav-inner ul li.has-submenu .sub-menu, body:has(.es-dynamic-page-marker) #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu { color: #fff !important; } body.es-dynamic-page #header .globalNav .nav-inner ul li.has-submenu .sub-menu li, body.es-dynamic-page #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li, body:has(.es-dynamic-page-marker) #header .globalNav .nav-inner ul li.has-submenu .sub-menu li, body:has(.es-dynamic-page-marker) #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li { color: #fff !important; } body.es-dynamic-page #header .globalNav .nav-inner ul li.has-submenu .sub-menu li a, body.es-dynamic-page #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li a, body:has(.es-dynamic-page-marker) #header .globalNav .nav-inner ul li.has-submenu .sub-menu li a, body:has(.es-dynamic-page-marker) #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li a { color: #fff !important; } body.es-dynamic-page #header .globalNav .nav-inner ul li.has-submenu .sub-menu li a .title, body.es-dynamic-page #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li a .title, body:has(.es-dynamic-page-marker) #header .globalNav .nav-inner ul li.has-submenu .sub-menu li a .title, body:has(.es-dynamic-page-marker) #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li a .title { color: #fff !important; } } /* 静的ページ（TOPページ含む）SP表示時のサブメニューのテキストを白に */ @media screen and (max-width: 768px) { body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu, html body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu, body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu, html body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu { color: #fff !important; } body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li, html body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li, body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li, html body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li { color: #fff !important; } body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li a, html body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li a, body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li a, html body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li a { color: #fff !important; } body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li a .title, html body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header .globalNav.active .nav-inner ul li.has-submenu .sub-menu li a .title, body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li a .title, html body:not(.es-dynamic-page):not(:has(.es-dynamic-page-marker)) #header .globalNav[style*="display: block"] .nav-inner ul li.has-submenu .sub-menu li a .title { color: #fff !important; } } /* PC表示時：グローバルナビゲーションのテキストを上下中央に配置 */ @media screen and (min-width: 769px) { /* 通常のナビゲーションリンク（最近見た物件・お気に入り以外） */ #header .globalNav .nav-inner ul li a .title, #header #globalNav .nav-inner ul li a .title, body #header .globalNav .nav-inner ul li a .title, body #header #globalNav .nav-inner ul li a .title, html body #header .globalNav .nav-inner ul li a .title, html body #header #globalNav .nav-inner ul li a .title { display: inline-block !important; vertical-align: middle !important; line-height: 1.5 !important; } /* 通常のナビゲーションリンク（.header_links__list内のリンクを除外） */ #header .globalNav .nav-inner ul li a:not(.header_links__list a):not(.header_links__list li a), #header #globalNav .nav-inner ul li a:not(.header_links__list a):not(.header_links__list li a), body #header .globalNav .nav-inner ul li a:not(.header_links__list a):not(.header_links__list li a), body #header #globalNav .nav-inner ul li a:not(.header_links__list a):not(.header_links__list li a), html body #header .globalNav .nav-inner ul li a:not(.header_links__list a):not(.header_links__list li a), html body #header #globalNav .nav-inner ul li a:not(.header_links__list a):not(.header_links__list li a) { display: flex !important; align-items: center !important; justify-content: center !important; height: 100% !important; vertical-align: middle !important; } /* 最近見た物件・お気に入りは2行表示を維持（元のスタイルを保持） */ #header .globalNav .nav-inner ul .es_user_identity .header_links__list li a, #header #globalNav .nav-inner ul .es_user_identity .header_links__list li a, body #header .globalNav .nav-inner ul .es_user_identity .header_links__list li a, body #header #globalNav .nav-inner ul .es_user_identity .header_links__list li a, html body #header .globalNav .nav-inner ul .es_user_identity .header_links__list li a, html body #header #globalNav .nav-inner ul .es_user_identity .header_links__list li a, #header .globalNav .nav-inner ul .header_links__list li a, #header #globalNav .nav-inner ul .header_links__list li a, body #header .globalNav .nav-inner ul .header_links__list li a, body #header #globalNav .nav-inner ul .header_links__list li a, html body #header .globalNav .nav-inner ul .header_links__list li a, html body #header #globalNav .nav-inner ul .header_links__list li a { display: block !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; } } #header .globalNav{ padding: 0 0 0 15px !important; } .header_links__list { align-items:center; display:flex; justify-content:flex-end } /* SP表示時：最近見た物件・お気に入りを3行（1カラム）で表示 */ @media (max-width: 768px) { /* header_free_contentを横幅100%に */ #header .globalNav.active .nav-inner ul .es_user_identity .header_free_content, #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_free_content, body #header .globalNav.active .nav-inner ul .es_user_identity .header_free_content, body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_free_content, html body #header .globalNav.active .nav-inner ul .es_user_identity .header_free_content, html body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_free_content, .header_free_content { width: 100% !important; box-sizing: border-box !important; } /* header_free_content内のリストも横幅100%に */ #header .globalNav.active .nav-inner ul .es_user_identity .header_free_content ul, #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_free_content ul, body #header .globalNav.active .nav-inner ul .es_user_identity .header_free_content ul, body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_free_content ul, html body #header .globalNav.active .nav-inner ul .es_user_identity .header_free_content ul, html body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_free_content ul, .header_free_content ul { width: 100% !important; box-sizing: border-box !important; } /* SP表示時：電話番号のフォントサイズを大きく */ #header .globalNav.active .nav-inner ul .es_user_identity .header_free_content .header_phone, #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_free_content .header_phone, body #header .globalNav.active .nav-inner ul .es_user_identity .header_free_content .header_phone, body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_free_content .header_phone, html body #header .globalNav.active .nav-inner ul .es_user_identity .header_free_content .header_phone, html body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_free_content .header_phone, .header_free_content .header_phone { font-size: 24px !important; line-height: 1.5 !important; } /* SP表示時：電話番号のリンク（a要素）のフォントサイズを36pxに - より強力なセレクター */ html body #header .globalNav.active .nav-inner ul .es_user_identity .header_free_content .header_phone, html body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_free_content .header_phone, html body #header .globalNav.active .nav-inner ul .es_user_identity .header_free_content .header_phone *, html body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_free_content .header_phone *, html body #header .globalNav.active .nav-inner ul .es_user_identity .header_free_content .header_phone a, html body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_free_content .header_phone a, body #header .globalNav.active .nav-inner ul .es_user_identity .header_free_content .header_phone, body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_free_content .header_phone, body #header .globalNav.active .nav-inner ul .es_user_identity .header_free_content .header_phone *, body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_free_content .header_phone *, body #header .globalNav.active .nav-inner ul .es_user_identity .header_free_content .header_phone a, body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_free_content .header_phone a, #header .globalNav.active .nav-inner ul .es_user_identity .header_free_content .header_phone, #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_free_content .header_phone, #header .globalNav.active .nav-inner ul .es_user_identity .header_free_content .header_phone *, #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_free_content .header_phone *, #header .globalNav.active .nav-inner ul .es_user_identity .header_free_content .header_phone a, #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_free_content .header_phone a, html body #header .globalNav.active .nav-inner ul .es_user_identity .header_free_content a[href^="tel:"], html body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_free_content a[href^="tel:"], body #header .globalNav.active .nav-inner ul .es_user_identity .header_free_content a[href^="tel:"], body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_free_content a[href^="tel:"], #header .globalNav.active .nav-inner ul .es_user_identity .header_free_content a[href^="tel:"], #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_free_content a[href^="tel:"], .header_free_content .header_phone, .header_free_content .header_phone *, .header_free_content .header_phone * *, .header_free_content .header_phone a, .header_free_content a[href^="tel:"], .es_user_identity .header_free_content .header_phone, .es_user_identity .header_free_content .header_phone *, .es_user_identity .header_free_content .header_phone * *, .es_user_identity .header_free_content .header_phone a, .es_user_identity .header_free_content a[href^="tel:"], #header .header_free_content .header_phone, #header .header_free_content .header_phone *, #header .header_free_content .header_phone * *, #header .header_free_content .header_phone a, #header .header_free_content a[href^="tel:"], #header .es_user_identity .header_free_content .header_phone, #header .es_user_identity .header_free_content .header_phone *, #header .es_user_identity .header_free_content .header_phone * *, #header .es_user_identity .header_free_content .header_phone a, #header .es_user_identity .header_free_content a[href^="tel:"] { font-size: 36px !important; margin-bottom: 0 !important; margin-top: 0 !important; } /* SP表示時：電話番号の店舗名と番号のフォントサイズを36pxに */ html body #header .globalNav.active .nav-inner ul .es_user_identity .header_free_content .header_phone_shop_name, html body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_free_content .header_phone_shop_name, body #header .globalNav.active .nav-inner ul .es_user_identity .header_free_content .header_phone_shop_name, body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_free_content .header_phone_shop_name, #header .globalNav.active .nav-inner ul .es_user_identity .header_free_content .header_phone_shop_name, #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_free_content .header_phone_shop_name, .header_free_content .header_phone_shop_name { font-size: 36px !important; } html body #header .globalNav.active .nav-inner ul .es_user_identity .header_free_content .header_phone_number, html body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_free_content .header_phone_number, body #header .globalNav.active .nav-inner ul .es_user_identity .header_free_content .header_phone_number, body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_free_content .header_phone_number, #header .globalNav.active .nav-inner ul .es_user_identity .header_free_content .header_phone_number, #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_free_content .header_phone_number, .header_free_content .header_phone_number { font-size: 36px !important; } /* header_links__listのul要素 - 横並び表示 */ html body #header .globalNav.active .nav-inner ul .es_user_identity .header_links__list, html body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list, body #header .globalNav.active .nav-inner ul .es_user_identity .header_links__list, body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list, #header .globalNav.active .nav-inner ul .es_user_identity .header_links__list, #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list, html body #header #globalNav.active .nav-inner ul .es_user_identity .header_links__list, html body #header #globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list, body #header #globalNav.active .nav-inner ul .es_user_identity .header_links__list, body #header #globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list, #header #globalNav.active .nav-inner ul .es_user_identity .header_links__list, #header #globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list, .header_links__list { display: flex !important; /* 横並び表示 */ flex-direction: row !important; width: 100% !important; padding: 0 !important; margin: 0 !important; height: auto !important; min-height: auto !important; max-height: none !important; gap: 0 !important; } /* header_links__listのli要素 - 横並び表示 */ html body #header .globalNav.active .nav-inner ul .es_user_identity .header_links__list li, html body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li, body #header .globalNav.active .nav-inner ul .es_user_identity .header_links__list li, body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li, #header .globalNav.active .nav-inner ul .es_user_identity .header_links__list li, #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li, html body #header #globalNav.active .nav-inner ul .es_user_identity .header_links__list li, html body #header #globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li, body #header #globalNav.active .nav-inner ul .es_user_identity .header_links__list li, body #header #globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li, #header #globalNav.active .nav-inner ul .es_user_identity .header_links__list li, #header #globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li, .header_links__list li { flex: 1 !important; /* 横並びで均等に配置 */ width: auto !important; margin: 0 !important; padding: 6px 0px 6px 0 !important; height: 50px !important; min-height: 50px !important; max-height: 50px !important; display: flex !important; align-items: center !important; /* 垂直方向の中央揃え */ justify-content: center !important; /* 水平方向の中央揃え */ border-top: none !important; border-bottom: none !important; /* 横並びの場合はborder-bottomを削除 */ border-right: 1px solid rgba(255, 255, 255, 0.3) !important; /* 右側に区切り線 */ } /* 最後のli要素のborder-rightを削除 */ .header_links__list li:last-child { border-right: none !important; } /* header_links__listのa要素 - 通常のメニュー項目と同じスタイル */ html body #header .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a, html body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a, body #header .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a, body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a, #header .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a, #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a, html body #header #globalNav.active .nav-inner ul .es_user_identity .header_links__list li a, html body #header #globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a, body #header #globalNav.active .nav-inner ul .es_user_identity .header_links__list li a, body #header #globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a, #header #globalNav.active .nav-inner ul .es_user_identity .header_links__list li a, #header #globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a, .header_links__list li a { width: 100% !important; padding: 0 20px !important; /* 左右のpaddingのみ設定 */ height: 50px !important; /* liの高さに合わせて50pxに設定 */ min-height: 50px !important; display: flex !important; align-items: center !important; /* 垂直方向の中央揃え */ justify-content: flex-start !important; /* アイコンを左に配置 */ line-height: 1.5 !important; position: relative !important; /* アイコンの位置指定のため */ color: #fff !important; text-decoration: none !important; font-size: 14px !important; /* 通常時と同じフォントサイズ */ } /* header_links__list li aのホバー時のtext-decorationをnoneに（すべての状態に対応） */ /* SP表示時：ハンバーガナビ展開時 */ html body #header .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a:hover, html body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a:hover, body #header .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a:hover, body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a:hover, #header .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a:hover, #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a:hover, html body #header #globalNav.active .nav-inner ul .es_user_identity .header_links__list li a:hover, html body #header #globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a:hover, body #header #globalNav.active .nav-inner ul .es_user_identity .header_links__list li a:hover, body #header #globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a:hover, #header #globalNav.active .nav-inner ul .es_user_identity .header_links__list li a:hover, #header #globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a:hover, /* PC表示時：通常時 */ #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav .nav-inner ul .es_user_identity .header_links__list li a:hover, body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav .nav-inner ul .es_user_identity .header_links__list li a:hover, html body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) .globalNav .nav-inner ul .es_user_identity .header_links__list li a:hover, #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) #globalNav .nav-inner ul .es_user_identity .header_links__list li a:hover, body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) #globalNav .nav-inner ul .es_user_identity .header_links__list li a:hover, html body #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) #globalNav .nav-inner ul .es_user_identity .header_links__list li a:hover, /* PC表示時：追従時 */ #header.fixed .globalNav .nav-inner ul .es_user_identity .header_links__list li a:hover, #header.sticky .globalNav .nav-inner ul .es_user_identity .header_links__list li a:hover, #header.scrolled .globalNav .nav-inner ul .es_user_identity .header_links__list li a:hover, #header[data-scrolled="true"] .globalNav .nav-inner ul .es_user_identity .header_links__list li a:hover, body #header.fixed .globalNav .nav-inner ul .es_user_identity .header_links__list li a:hover, body #header.sticky .globalNav .nav-inner ul .es_user_identity .header_links__list li a:hover, body #header.scrolled .globalNav .nav-inner ul .es_user_identity .header_links__list li a:hover, body #header[data-scrolled="true"] .globalNav .nav-inner ul .es_user_identity .header_links__list li a:hover, html body #header.fixed .globalNav .nav-inner ul .es_user_identity .header_links__list li a:hover, html body #header.sticky .globalNav .nav-inner ul .es_user_identity .header_links__list li a:hover, html body #header.scrolled .globalNav .nav-inner ul .es_user_identity .header_links__list li a:hover, html body #header[data-scrolled="true"] .globalNav .nav-inner ul .es_user_identity .header_links__list li a:hover, #header.fixed #globalNav .nav-inner ul .es_user_identity .header_links__list li a:hover, #header.sticky #globalNav .nav-inner ul .es_user_identity .header_links__list li a:hover, #header.scrolled #globalNav .nav-inner ul .es_user_identity .header_links__list li a:hover, #header[data-scrolled="true"] #globalNav .nav-inner ul .es_user_identity .header_links__list li a:hover, body #header.fixed #globalNav .nav-inner ul .es_user_identity .header_links__list li a:hover, body #header.sticky #globalNav .nav-inner ul .es_user_identity .header_links__list li a:hover, body #header.scrolled #globalNav .nav-inner ul .es_user_identity .header_links__list li a:hover, body #header[data-scrolled="true"] #globalNav .nav-inner ul .es_user_identity .header_links__list li a:hover, html body #header.fixed #globalNav .nav-inner ul .es_user_identity .header_links__list li a:hover, html body #header.sticky #globalNav .nav-inner ul .es_user_identity .header_links__list li a:hover, html body #header.scrolled #globalNav .nav-inner ul .es_user_identity .header_links__list li a:hover, html body #header[data-scrolled="true"] #globalNav .nav-inner ul .es_user_identity .header_links__list li a:hover, /* 汎用セレクター */ .header_links__list li a:hover, .es_user_identity .header_links__list li a:hover { text-decoration: none !important; } /* アイコン（icon-history, icon-heart）を左に配置（元の位置） */ html body #header .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span[class^="icon-"], html body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span[class^="icon-"], body #header .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span[class^="icon-"], body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span[class^="icon-"], #header .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span[class^="icon-"], #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span[class^="icon-"], html body #header #globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span[class^="icon-"], html body #header #globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span[class^="icon-"], body #header #globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span[class^="icon-"], body #header #globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span[class^="icon-"], #header #globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span[class^="icon-"], #header #globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span[class^="icon-"], .header_links__list li a span[class^="icon-"] { position: relative !important; /* アイコンを相対位置に */ flex-shrink: 0 !important; /* アイコンのサイズを固定 */ margin-right: 8px !important; /* アイコンとテキストの間隔 */ } /* アイコンの::beforeも左に配置 */ html body #header .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span[class^="icon-"]::before, html body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span[class^="icon-"]::before, body #header .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span[class^="icon-"]::before, body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span[class^="icon-"]::before, #header .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span[class^="icon-"]::before, #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span[class^="icon-"]::before, html body #header #globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span[class^="icon-"]::before, html body #header #globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span[class^="icon-"]::before, body #header #globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span[class^="icon-"]::before, body #header #globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span[class^="icon-"]::before, #header #globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span[class^="icon-"]::before, #header #globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span[class^="icon-"]::before, .header_links__list li a span[class^="icon-"]::before { position: relative !important; /* ::beforeも相対位置に */ } /* SP表示時：.pcクラスを表示して「最近見た物件」全体を表示 */ html body #header .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span.pc, html body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span.pc, body #header .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span.pc, body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span.pc, #header .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span.pc, #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span.pc, html body #header #globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span.pc, html body #header #globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span.pc, body #header #globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span.pc, body #header #globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span.pc, #header #globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span.pc, #header #globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span.pc, .header_links__list li a span.pc { display: inline !important; /* SP表示時にも「最近」を表示 */ visibility: visible !important; opacity: 1 !important; margin: 0 !important; /* 左右のマージンを削除 */ padding: 0 !important; /* 左右のパディングを削除 */ } /* header_links__listのa要素内のテキスト（アイコン以外のspan）を中央揃え */ html body #header .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span:not([class^="icon-"]):not(.history-count):not(.favorite-count), html body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span:not([class^="icon-"]):not(.history-count):not(.favorite-count), body #header .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span:not([class^="icon-"]):not(.history-count):not(.favorite-count), body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span:not([class^="icon-"]):not(.history-count):not(.favorite-count), #header .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span:not([class^="icon-"]):not(.history-count):not(.favorite-count), #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span:not([class^="icon-"]):not(.history-count):not(.favorite-count), html body #header #globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span:not([class^="icon-"]):not(.history-count):not(.favorite-count), html body #header #globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span:not([class^="icon-"]):not(.history-count):not(.favorite-count), body #header #globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span:not([class^="icon-"]):not(.history-count):not(.favorite-count), body #header #globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span:not([class^="icon-"]):not(.history-count):not(.favorite-count), #header #globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span:not([class^="icon-"]):not(.history-count):not(.favorite-count), #header #globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span:not([class^="icon-"]):not(.history-count):not(.favorite-count), .header_links__list li a span:not([class^="icon-"]):not(.history-count):not(.favorite-count) { flex: 1 !important; /* 残りのスペースを埋める */ text-align: center !important; /* テキストを中央揃え */ } /* バッジ（history-count, favorite-count）を元の位置に戻す */ html body #header .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span.history-count, html body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span.history-count, body #header .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span.history-count, body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span.history-count, #header .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span.history-count, #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span.history-count, html body #header #globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span.history-count, html body #header #globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span.history-count, body #header #globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span.history-count, body #header #globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span.history-count, #header #globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span.history-count, #header #globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span.history-count, .header_links__list li a span.history-count { position: absolute !important; right: -5px !important; /* 元の位置に戻す */ bottom: 0 !important; /* 元の位置に戻す */ top: auto !important; } html body #header .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span.favorite-count, html body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span.favorite-count, body #header .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span.favorite-count, body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span.favorite-count, #header .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span.favorite-count, #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span.favorite-count, html body #header #globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span.favorite-count, html body #header #globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span.favorite-count, body #header #globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span.favorite-count, body #header #globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span.favorite-count, #header #globalNav.active .nav-inner ul .es_user_identity .header_links__list li a span.favorite-count, #header #globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a span.favorite-count, .header_links__list li a span.favorite-count { position: absolute !important; right: 0 !important; /* 元の位置に戻す */ bottom: 0 !important; /* 元の位置に戻す */ top: auto !important; } /* header_links__listのa要素内の>アイコン（::after）を右側に配置 */ html body #header .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a::after, html body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a::after, body #header .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a::after, body #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a::after, #header .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a::after, #header .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a::after, html body #header #globalNav.active .nav-inner ul .es_user_identity .header_links__list li a::after, html body #header #globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a::after, body #header #globalNav.active .nav-inner ul .es_user_identity .header_links__list li a::after, body #header #globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a::after, #header #globalNav.active .nav-inner ul .es_user_identity .header_links__list li a::after, #header #globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a::after, .header_links__list li a::after { position: absolute !important; right: 20px !important; /* 右側に配置 */ top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; } /* 追従時も通常時と同じフォントサイズを適用 */ #header.fixed .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a, #header.fixed .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a, #header.sticky .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a, #header.sticky .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a, #header.scrolled .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a, #header.scrolled .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a, #header[data-scrolled="true"] .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a, #header[data-scrolled="true"] .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a, body #header.fixed .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a, body #header.fixed .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a, body #header.sticky .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a, body #header.sticky .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a, body #header.scrolled .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a, body #header.scrolled .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a, body #header[data-scrolled="true"] .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a, body #header[data-scrolled="true"] .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a, html body #header.fixed .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a, html body #header.fixed .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a, html body #header.sticky .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a, html body #header.sticky .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a, html body #header.scrolled .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a, html body #header.scrolled .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a, html body #header[data-scrolled="true"] .globalNav.active .nav-inner ul .es_user_identity .header_links__list li a, html body #header[data-scrolled="true"] .globalNav[style*="display: block"] .nav-inner ul .es_user_identity .header_links__list li a { font-size: 14px !important; /* 通常時と同じフォントサイズ */ } /* es_user_identityのli要素 - 通常のメニュー項目のスタイルを上書き */ html body #header .globalNav.active .nav-inner ul > li.es_user_identity, html body #header .globalNav[style*="display: block"] .nav-inner ul > li.es_user_identity, body #header .globalNav.active .nav-inner ul > li.es_user_identity, body #header .globalNav[style*="display: block"] .nav-inner ul > li.es_user_identity, #header .globalNav.active .nav-inner ul > li.es_user_identity, #header .globalNav[style*="display: block"] .nav-inner ul > li.es_user_identity, html body #header.fixed .globalNav.active .nav-inner ul > li.es_user_identity, html body #header.sticky .globalNav.active .nav-inner ul > li.es_user_identity, html body #header.scrolled .globalNav.active .nav-inner ul > li.es_user_identity, html body #header[data-scrolled="true"] .globalNav.active .nav-inner ul > li.es_user_identity, body #header.fixed .globalNav.active .nav-inner ul > li.es_user_identity, body #header.sticky .globalNav.active .nav-inner ul > li.es_user_identity, body #header.scrolled .globalNav.active .nav-inner ul > li.es_user_identity, body #header[data-scrolled="true"] .globalNav.active .nav-inner ul > li.es_user_identity, #header.fixed .globalNav.active .nav-inner ul > li.es_user_identity, #header.sticky .globalNav.active .nav-inner ul > li.es_user_identity, #header.scrolled .globalNav.active .nav-inner ul > li.es_user_identity, #header[data-scrolled="true"] .globalNav.active .nav-inner ul > li.es_user_identity, html body #header.fixed .globalNav[style*="display: block"] .nav-inner ul > li.es_user_identity, html body #header.sticky .globalNav[style*="display: block"] .nav-inner ul > li.es_user_identity, html body #header.scrolled .globalNav[style*="display: block"] .nav-inner ul > li.es_user_identity, html body #header[data-scrolled="true"] .globalNav[style*="display: block"] .nav-inner ul > li.es_user_identity, body #header.fixed .globalNav[style*="display: block"] .nav-inner ul > li.es_user_identity, body #header.sticky .globalNav[style*="display: block"] .nav-inner ul > li.es_user_identity, body #header.scrolled .globalNav[style*="display: block"] .nav-inner ul > li.es_user_identity, body #header[data-scrolled="true"] .globalNav[style*="display: block"] .nav-inner ul > li.es_user_identity, #header.fixed .globalNav[style*="display: block"] .nav-inner ul > li.es_user_identity, #header.sticky .globalNav[style*="display: block"] .nav-inner ul > li.es_user_identity, #header.scrolled .globalNav[style*="display: block"] .nav-inner ul > li.es_user_identity, #header[data-scrolled="true"] .globalNav[style*="display: block"] .nav-inner ul > li.es_user_identity { padding: 0 !important; margin: 0 !important; height: auto !important; min-height: auto !important; max-height: none !important; display: block !important; border-top: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important; } } .header_links li { margin-left:10px; text-align:center; position: relative; } /* 最近見た物件・お気に入りの左に区切り線を追加（お問い合わせと同じスタイル） */ .header_links__list li::before, #header .globalNav .nav-inner ul .es_user_identity .header_links__list li::before, #header #globalNav .nav-inner ul .es_user_identity .header_links__list li::before, body #header .globalNav .nav-inner ul .es_user_identity .header_links__list li::before, body #header #globalNav .nav-inner ul .es_user_identity .header_links__list li::before, html body #header .globalNav .nav-inner ul .es_user_identity .header_links__list li::before, html body #header #globalNav .nav-inner ul .es_user_identity .header_links__list li::before { content: "" !important; width: 1px !important; height: 20px !important; background: #333 !important; background-color: #333 !important; position: absolute !important; left: -5px !important; top: 50% !important; -webkit-transform: translateY(-50%) !important; -ms-transform: translateY(-50%) !important; transform: translateY(-50%) !important; } /* ヘッダーが追従するときも確実に黒に */ #header.fixed .globalNav .nav-inner ul .es_user_identity .header_links__list li::before, #header.sticky .globalNav .nav-inner ul .es_user_identity .header_links__list li::before, #header.scrolled .globalNav .nav-inner ul .es_user_identity .header_links__list li::before, #header[style*="position: fixed"] .globalNav .nav-inner ul .es_user_identity .header_links__list li::before, #header[style*="position: sticky"] .globalNav .nav-inner ul .es_user_identity .header_links__list li::before, body #header.fixed .globalNav .nav-inner ul .es_user_identity .header_links__list li::before, body #header.sticky .globalNav .nav-inner ul .es_user_identity .header_links__list li::before, body #header.scrolled .globalNav .nav-inner ul .es_user_identity .header_links__list li::before, html body #header.fixed .globalNav .nav-inner ul .es_user_identity .header_links__list li::before, html body #header.sticky .globalNav .nav-inner ul .es_user_identity .header_links__list li::before, html body #header.scrolled .globalNav .nav-inner ul .es_user_identity .header_links__list li::before, #header.fixed #globalNav .nav-inner ul .es_user_identity .header_links__list li::before, #header.sticky #globalNav .nav-inner ul .es_user_identity .header_links__list li::before, #header.scrolled #globalNav .nav-inner ul .es_user_identity .header_links__list li::before, body #header.fixed #globalNav .nav-inner ul .es_user_identity .header_links__list li::before, body #header.sticky #globalNav .nav-inner ul .es_user_identity .header_links__list li::before, body #header.scrolled #globalNav .nav-inner ul .es_user_identity .header_links__list li::before { background-color: #333 !important; background: #333 !important; } .header_links li a:hover { text-decoration:none; } .header_links a { display:block; font-size:10px; font-size:.625rem } .header_links a:not(.menu-toggle) { color:#4f4f4f } .header_links span[class^=icon-] { display:block; font-size:24px; font-size:2.5rem; } /* icon-historyとicon-heartの::beforeにfont-size: 2.5remを設定（fixed時も適用） */ span.icon-history::before, span.icon-heart::before, #header.fixed span.icon-history::before, #header.sticky span.icon-history::before, #header.scrolled span.icon-history::before, #header[data-scrolled="true"] span.icon-history::before, #header.fixed span.icon-heart::before, #header.sticky span.icon-heart::before, #header.scrolled span.icon-heart::before, #header[data-scrolled="true"] span.icon-heart::before, body #header.fixed span.icon-history::before, body #header.sticky span.icon-history::before, body #header.scrolled span.icon-history::before, body #header[data-scrolled="true"] span.icon-history::before, body #header.fixed span.icon-heart::before, body #header.sticky span.icon-heart::before, body #header.scrolled span.icon-heart::before, body #header[data-scrolled="true"] span.icon-heart::before, html body #header.fixed span.icon-history::before, html body #header.sticky span.icon-history::before, html body #header.scrolled span.icon-history::before, html body #header[data-scrolled="true"] span.icon-history::before, html body #header.fixed span.icon-heart::before, html body #header.sticky span.icon-heart::before, html body #header.scrolled span.icon-heart::before, html body #header[data-scrolled="true"] span.icon-heart::before { font-size: 2.5rem !important; } .header_links .main-header-menu-toggle { background:none; padding:0 } .header_links .main-header-menu-toggle.toggled { pointer-events:none; visibility:hidden } @media(max-width:480px) { .main-header-bar { padding:5px 0!important } .main-header-bar>.es-container { padding:0 10px } .main-header-bar .es-main-header-bar-alignment { max-width:100vw; overflow:hidden } .site-branding { flex-grow:50!important; max-width:40% } .es_user_identity { flex-grow:1 } .header_links { font-size:10px } .header_links li { margin-left:3px } .header_links span[class^=icon-] { padding-bottom:4px; position:relative } .header_links span.history-count { right:-5px } .header_links span.favorite-count, .header_links span.history-count { background-color:#ddd; border:1px solid #fff; border-radius:50%; bottom:0; box-sizing:content-box; color:#828282; font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif; font-size:12px; font-weight:700; height:20px; line-height:20px; position:absolute; text-align:center; white-space:nowrap; width:20px } /* fixed時も反映されるように */ span.history-count.em, span.favorite-count.em, #header.fixed span.history-count.em, #header.sticky span.history-count.em, #header.scrolled span.history-count.em, #header[data-scrolled="true"] span.history-count.em, #header.fixed span.favorite-count.em, #header.sticky span.favorite-count.em, #header.scrolled span.favorite-count.em, #header[data-scrolled="true"] span.favorite-count.em, body #header.fixed span.history-count.em, body #header.sticky span.history-count.em, body #header.scrolled span.history-count.em, body #header[data-scrolled="true"] span.history-count.em, body #header.fixed span.favorite-count.em, body #header.sticky span.favorite-count.em, body #header.scrolled span.favorite-count.em, body #header[data-scrolled="true"] span.favorite-count.em, html body #header.fixed span.history-count.em, html body #header.sticky span.history-count.em, html body #header.scrolled span.history-count.em, html body #header[data-scrolled="true"] span.history-count.em, html body #header.fixed span.favorite-count.em, html body #header.sticky span.favorite-count.em, html body #header.scrolled span.favorite-count.em, html body #header[data-scrolled="true"] span.favorite-count.em { border:1px solid #fff !important; border-radius:50% !important; box-sizing:content-box !important; color:#fff !important; font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif !important; font-size:12px !important; font-weight:700 !important; height:20px !important; line-height:20px !important; position:absolute !important; text-align:center !important; white-space:nowrap !important; width:20px !important; } .header_links span.favorite-count { right:0 } .header_links a { transform:scale(.9) } .es-button-wrap .menu-toggle { height:auto; transform:scale(.9) } .es-button-wrap .menu-toggle .mobile-menu-wrap { display:block; font-size:10px; font-size:.625rem } .es-button-wrap .menu-toggle .mobile-menu-wrap .mobile-menu { font-size:10px; font-size:.625rem; font-weight:400 } } @media(min-width:481px) { #masthead .main-header-container { min-width:1140px; padding:16px 0 } .header_free_content { color:#828282; display:block; font-size:14px; font-size:.875rem; line-height:1.5; text-align:center } .header_free_content strong { color:#4f4f4f; display:block; font-size:24px; font-size:1.5rem; line-height:.9 } .header_free_content strong+.header_phone { margin-top:5px } .header_phone_shop_name { font-size:21px; font-size:1.3125rem; margin-right:5px } .header_phone_number { margin-left:5px } .header_links li { margin-left:20px } .header_links li.sp { display:none } .header_links span[class^=icon-] { margin-bottom:4px; position:relative; font-size: 2.5rem; } .header_links span.history-count { right:11px } .header_links span.favorite-count, .header_links span.history-count { background-color:#ddd; border:1px solid #fff; border-radius:50%; box-sizing:content-box; color:#828282; font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif; font-size:13px; font-weight:700; height:18px; line-height:20px; position:absolute; text-align:center; top:0; width:18px } /* fixed時も反映されるように（PC表示時） */ span.history-count.em, span.favorite-count.em, #header.fixed span.history-count.em, #header.sticky span.history-count.em, #header.scrolled span.history-count.em, #header[data-scrolled="true"] span.history-count.em, #header.fixed span.favorite-count.em, #header.sticky span.favorite-count.em, #header.scrolled span.favorite-count.em, #header[data-scrolled="true"] span.favorite-count.em, body #header.fixed span.history-count.em, body #header.sticky span.history-count.em, body #header.scrolled span.history-count.em, body #header[data-scrolled="true"] span.history-count.em, body #header.fixed span.favorite-count.em, body #header.sticky span.favorite-count.em, body #header.scrolled span.favorite-count.em, body #header[data-scrolled="true"] span.favorite-count.em, html body #header.fixed span.history-count.em, html body #header.sticky span.history-count.em, html body #header.scrolled span.history-count.em, html body #header[data-scrolled="true"] span.history-count.em, html body #header.fixed span.favorite-count.em, html body #header.sticky span.favorite-count.em, html body #header.scrolled span.favorite-count.em, html body #header[data-scrolled="true"] span.favorite-count.em, /* 動的ページのPC表示時（通常時・追従時共通） */ body.es-dynamic-page span.history-count.em, body.es-dynamic-page span.favorite-count.em, body.es-dynamic-page #header span.history-count.em, body.es-dynamic-page #header span.favorite-count.em, /* 動的ページのPC表示時：通常時（追従していない時）を明示的に指定 */ body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) span.history-count.em, body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) span.favorite-count.em, html body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) span.history-count.em, html body.es-dynamic-page #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) span.favorite-count.em, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) span.history-count.em, body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) span.favorite-count.em, html body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) span.history-count.em, html body:has(.es-dynamic-page-marker) #header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) span.favorite-count.em, #header.es-dynamic-header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) span.history-count.em, #header.es-dynamic-header:not(.fixed):not(.sticky):not(.scrolled):not([data-scrolled="true"]) span.favorite-count.em, body.es-dynamic-page #header.fixed span.history-count.em, body.es-dynamic-page #header.sticky span.history-count.em, body.es-dynamic-page #header.scrolled span.history-count.em, body.es-dynamic-page #header[data-scrolled="true"] span.history-count.em, body.es-dynamic-page #header.fixed span.favorite-count.em, body.es-dynamic-page #header.sticky span.favorite-count.em, body.es-dynamic-page #header.scrolled span.favorite-count.em, body.es-dynamic-page #header[data-scrolled="true"] span.favorite-count.em, body:has(.es-dynamic-page-marker) span.history-count.em, body:has(.es-dynamic-page-marker) span.favorite-count.em, body:has(.es-dynamic-page-marker) #header span.history-count.em, body:has(.es-dynamic-page-marker) #header span.favorite-count.em, body:has(.es-dynamic-page-marker) #header.fixed span.history-count.em, body:has(.es-dynamic-page-marker) #header.sticky span.history-count.em, body:has(.es-dynamic-page-marker) #header.scrolled span.history-count.em, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"] span.history-count.em, body:has(.es-dynamic-page-marker) #header.fixed span.favorite-count.em, body:has(.es-dynamic-page-marker) #header.sticky span.favorite-count.em, body:has(.es-dynamic-page-marker) #header.scrolled span.favorite-count.em, body:has(.es-dynamic-page-marker) #header[data-scrolled="true"] span.favorite-count.em, html body.es-dynamic-page span.history-count.em, html body.es-dynamic-page span.favorite-count.em, html body.es-dynamic-page #header span.history-count.em, html body.es-dynamic-page #header span.favorite-count.em, html body.es-dynamic-page #header.fixed span.history-count.em, html body.es-dynamic-page #header.sticky span.history-count.em, html body.es-dynamic-page #header.scrolled span.history-count.em, html body.es-dynamic-page #header[data-scrolled="true"] span.history-count.em, html body.es-dynamic-page #header.fixed span.favorite-count.em, html body.es-dynamic-page #header.sticky span.favorite-count.em, html body.es-dynamic-page #header.scrolled span.favorite-count.em, html body.es-dynamic-page #header[data-scrolled="true"] span.favorite-count.em, html body:has(.es-dynamic-page-marker) span.history-count.em, html body:has(.es-dynamic-page-marker) span.favorite-count.em, html body:has(.es-dynamic-page-marker) #header span.history-count.em, html body:has(.es-dynamic-page-marker) #header span.favorite-count.em, html body:has(.es-dynamic-page-marker) #header.fixed span.history-count.em, html body:has(.es-dynamic-page-marker) #header.sticky span.history-count.em, html body:has(.es-dynamic-page-marker) #header.scrolled span.history-count.em, html body:has(.es-dynamic-page-marker) #header[data-scrolled="true"] span.history-count.em, html body:has(.es-dynamic-page-marker) #header.fixed span.favorite-count.em, html body:has(.es-dynamic-page-marker) #header.sticky span.favorite-count.em, html body:has(.es-dynamic-page-marker) #header.scrolled span.favorite-count.em, html body:has(.es-dynamic-page-marker) #header[data-scrolled="true"] span.favorite-count.em, #header.es-dynamic-header span.history-count.em, #header.es-dynamic-header span.favorite-count.em, #header.es-dynamic-header.fixed span.history-count.em, #header.es-dynamic-header.sticky span.history-count.em, #header.es-dynamic-header.scrolled span.history-count.em, #header.es-dynamic-header[data-scrolled="true"] span.history-count.em, #header.es-dynamic-header.fixed span.favorite-count.em, #header.es-dynamic-header.sticky span.favorite-count.em, #header.es-dynamic-header.scrolled span.favorite-count.em, #header.es-dynamic-header[data-scrolled="true"] span.favorite-count.em { border:1px solid #fff !important; border-radius:50% !important; box-sizing:content-box !important; color:#fff !important; font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif !important; font-size:13px !important; font-weight:700 !important; height:18px !important; line-height:20px !important; position:absolute !important; text-align:center !important; top:0 !important; width:18px !important; } .header_links span.favorite-count { right:5px } .header_links a { font-size:12px; font-size:.75rem } .header_links a:not(.menu-toggle) { transition:none } .header_links a:not(.menu-toggle):hover { border-bottom-style:solid; border-bottom-width:1px; opacity:1 } }