)と同じclass名(.company)を dl要素が共有しているため、.pageIndex .company{text-align:center}（pageIndex_body.css、トップページのCOMPANYセクション用。トップページ限定のためscopeは.pageIndexのまま）が

にも直接適用され、.companyInfo側で戻したtext-align:leftより優先して中央揃えに戻ってしまっていた。dlの方を明示的に上書きする */ /* 不具合修正：line-height:1.85はbody{line-height:1.75}（サイト全体の既定値）よりさらに広く、住所・TEL/FAX行の間に必要以上の余白ができていた。dd.add/dd.tel1行ずつの行間として詰まった見た目になるよう1.4へ縮小する */ .mean-nav .companyInfo dl.company{ text-align:left; font-size:3.3333vw; /* 1.3rem=13px（住所・TEL/FAX） */ line-height:1.4; } .mean-nav .companyInfo dl.company + dl.company{ margin-top:4.4872vw; /* 1.75em×14px（周辺文脈の基準14px） */ } .mean-nav .companyInfo dt.name{ margin-bottom:1.7949vw; /* 0.5em×14px */ font-size:3.5897vw; /* 1.4rem=14px */ /* 不具合修正：明示指定が無くbody{line-height:1.75}を継承し、見出し1行だけの要素にしては行の実高さが必要以上に高くなっていた */ line-height:1.3; font-weight:bold; } .mean-nav .companyInfo dd.tel a{ display:inline; padding:0; border-top:0; font-weight:bold; font-size:inherit; color:#005bac; } .mean-nav .companyInfo dd.tel a:visited{ color:#005bac; } /* 不具合修正：.contactAreaにdisplay:flexを指定していたため、2つのdl.tel（西日本/東日本）が横並びになってしまっていた。横並びにすべきはdl.tel「内」のdt(バッジ)+dd(電話番号)のほうで、 2つのdl.tel自体は縦に積む。現行サイトは.area/.numとも可視の帯・枠は持たない */ /* 不具合修正：width:100%で左右いっぱいに広げていたため、内容（バッジ＋電話番号の自然幅）に対してブロック自体が常に左寄せの帯に見えていた。text-align/内部の左揃えはdl.tel側（badge→numberの横並び）を維持したまま、ブロック自体は fit-content＋左右margin:autoで中央配置する。align-items:flex-startにより、西日本/東日本の2行の幅が異なっても左端の基準は揃う */ .mean-nav .contactArea{ display:flex; flex-direction:column; align-items:flex-start; width:fit-content; margin-top:5.1282vw; margin-right:auto; margin-left:auto; } .mean-nav .contactArea dl.tel{ display:flex; align-items:center; margin-bottom:1.5385vw; } /* 指示により角丸のピル型バッジ（border-radius/background）を維持する。上下paddingが広すぎた点のみ調整：現行サイトの共通.contactArea .area{ padding:0.5em 1em;border-radius:2em}を基準に、上下0.5em(6px)・左右1em(12px) （1.2rem=12px基準）へ縮小する（以前のli.info専用上書き0.75em/1.25emより上下を約3px引き締める） */ /* 不具合修正：明示指定が無くbody{line-height:1.75}を継承していたため、上下padding(6px)に加えて行の実高さ分の余白も乗ってしまい、ピルバッジが意図した6px+6pxより大きく見えていた。line-height:1でpadding分のみの高さにする */ .mean-nav .contactArea dt.area{ margin-right:2.3077vw; padding:1.5873vw 3.1746vw; /* 6px 12px */ border-radius:6.1538vw; color:#ffffff; font-size:3.0769vw; /* 1.2rem=12px */ line-height:1; font-weight:bold; white-space:nowrap; } .mean-nav .contactArea dl.tel.west dt.area{ background:#1381d6; } .mean-nav .contactArea dl.tel.east dt.area{ background:#005bac; } /* 不具合修正：明示指定が無くbody{line-height:1.75}を継承していたため、 26px相当の電話番号テキストの上下に想定以上の余白が生まれ、バッジとの垂直位置も間延びして見えていた。数字表示として詰まった1.2に固定する */ .mean-nav .contactArea dd.num a{ display:block; padding:0; background:none; border-top:0; border-radius:0; font-family:"Oswald", sans-serif; font-weight:500; font-size:6.6667vw; /* 2.6rem=26px */ line-height:1.2; text-decoration:none; } .mean-nav .contactArea dd.num a:hover, .mean-nav .contactArea dd.num a:focus, .mean-nav .contactArea dd.num a:active{ background:none; } .mean-nav .contactArea dl.tel.west dd.num a, .mean-nav .contactArea dl.tel.west dd.num a:visited{ color:#1381d6; } .mean-nav .contactArea dl.tel.east dd.num a, .mean-nav .contactArea dl.tel.east dd.num a:visited{ color:#005bac; } } /* ----- 追加コンテンツ（フッターリンク・コピーライト） ----- 現行サイトのmeanMenu構造には存在しない、Figma固有の追加コンテンツのため、プラグイン本体にはナビ以外のコンテンツを差し込む仕組みが無いことを踏まえ、 common.jsが.mean-nav生成後に#SpNavExtraの内容をappendする。開閉状態はプラグインが自身のクリック処理内でトグルする既存の目印（.meanmenu-reveal.meanclose）と:has()で連動させる。 */ .js-meanExtra{ display:none; } @media screen and (max-width:767px){ .mean-container:has(a.meanmenu-reveal.meanclose) .js-meanExtra{ display:block; } .drawerNav__foot, .drawerNav__copyright{ background:#005bac; } /* 不具合修正：詳細度が.mean-nav ul li a（クラス1つ+要素3つ）に負け、白文字指定があるにも関わらず黒文字(#111111)で表示されていた。.mean-navを明示してクラス2つ+要素1つへ詳細度を引き上げ、確実に上書きする */ .mean-nav .drawerNav__foot a{ display:block; /* 現行サイト実測(li.comNav a)：padding:1em 0(li側の左右25pxで字下げ)、太字ではなく通常ウェイト、上罫線は持たない（下罫線のみ） */ padding:3.5897vw 6.4103vw; background:#005bac; border-top:none; border-bottom:1px solid rgba(255,255,255,0.3); color:#ffffff; font-weight:normal; font-size:3.5897vw; transition:opacity 0.2s; } .mean-nav .drawerNav__foot a:visited{ color:#ffffff; } .mean-nav .drawerNav__foot a:hover, .mean-nav .drawerNav__foot a:focus-visible, .mean-nav .drawerNav__foot a:active{ opacity:0.8; } .drawerNav__copyright{ padding:4.359vw 5.1282vw 6.1538vw; color:#ffffff; font-size:2.8205vw; text-align:center; } } /* ----- 背面ページのスクロールロック ----- 不具合修正：以前はposition:fixed＋body.style.top=-scrollYpxでスクロール位置を偽装する方式だったが、position:fixedへ切り替わった瞬間に.mean-bar（同じく position:fixed）を含む固定要素のヒットテスト座標がスクロール量ぶんズレて計算されることがあり、スクロール後に開閉ボタンが反応しなくなる不具合の原因になっていた（ページ先頭＝スクロール0の時だけズレが0になるため症状が出ない、という再現条件と一致）。ページの位置を動かさず/のoverflow:hiddenだけでスクロールを止める方式に変更し、この種の座標ズレが起きないようにする。touch-action:noneはタッチ端末で overflow:hiddenのみでは背面スクロールを防ぎきれない場合の保険。位置を動かさないためスクロール位置の保存・復元（window.scrollTo）も不要になった */ html.isDrawerOpen, body.isDrawerOpen{ overflow:hidden; touch-action:none; } /* ###################################################################################### 　白ヘッダー状態（下層ページ常時／トップページのスクロール後）　注意：後方の各基本ルール（.gnav > ul > li > a の色、.contact .button の色等）と　同じ詳細度になる箇所があるため、確実に優先させるためファイル末尾に配置する ###################################################################################### */ /* ----- PC：白ヘッダー状態（トップページのスクロール後＝下層ページは常時） ----- 下層ページには.heroが無いため透過のままだと本文の背景がそのまま透けてしまう。「下層ページはタイトル帯が青いため、ヘッダーはスクロール位置に関係なく常時白背景・黒文字」という指示により、トップページのスクロール後（.isScrolled）とまったく同じ白背景・黒文字の見た目を、下層ページでは常時適用する（スクロール前後で変化させない）。不具合修正：以前は対象の下層ページをBodyClass由来のページ種別class（.pageContents等）の列挙で判定していたため、新しいページ種別を追加するたびに列挙へ追記が必要だった。 .pageIndexは実際のトップページ（SiteIndex.html）にのみ付与され、Header2026を使う下層ページ側には一切付与されないこと（page_class等の個別付与も含め）を確認済みのため、「.pageIndex以外」で下層ページ全体を判定する（新しいページ種別追加時のCSS追記が不要になる）。.isScrolled側は元々.heroが無いページでは付与され得ない（common.js参照）ため.pageIndex修飾は無くても動作上は同じだが、「トップページのスクロール後」と「下層ページの初期状態」の2条件を明確に分けて書くため .pageIndexを明示する。URLでの判定は行わない。トップページのページ先頭（透過、.isScrolledが付く前）の見た目はここでは変更しない */ @media print, screen and (min-width:768px){ .pageIndex .header.isScrolled, body:not(.pageIndex) .header{ background-color:#ffffff; /* 白背景がページ本文と同化するための最小限の下方向シャドウ。透過状態（トップページ先頭）には出さないため、白背景と同じ条件のここに限定して付与する */ box-shadow:0 2px 8px rgba(0, 0, 0, 0.08); } /* ナビ文字・矢印：矢印(::after)はcolor:currentColorを見ているため、リンク自体の文字色を変えるだけで自動的に追従する（矢印だけの個別指定は不要） */ .pageIndex .header.isScrolled .gnav > ul > li > a, body:not(.pageIndex) .header .gnav > ul > li > a{ color:#111111; } /* ロゴ：SPドロワーと同じ「濃色ロゴへのクロスフェード」方式を採用する。PC専用に追加した2枚目の直下img（:nth-of-type(2)、header/logo.png）をこの状態でのみ表示する（1枚目=SPドロワー用のfooter/logo_sp.pngとは別要素、CSS filterは使用しない） */ .pageIndex .header.isScrolled .logo picture img, body:not(.pageIndex) .header .logo picture img{ opacity:0; } .pageIndex .header.isScrolled .logo a > img:nth-of-type(2), body:not(.pageIndex) .header .logo a > img:nth-of-type(2){ opacity:1; pointer-events:auto; } /* 見積依頼フォームボタン：白背景用にブランドブルー(#005bac)へ切り替える。 hover/focus/activeは元の透過状態でも個別の色変化を持たないため、この1色のみで揃う */ .pageIndex .header.isScrolled .contact .button, .pageIndex .header.isScrolled .contact .button:link, .pageIndex .header.isScrolled .contact .button:visited, .pageIndex .header.isScrolled .contact .button:hover, .pageIndex .header.isScrolled .contact .button:focus, .pageIndex .header.isScrolled .contact .button:active, body:not(.pageIndex) .header .contact .button, body:not(.pageIndex) .header .contact .button:link, body:not(.pageIndex) .header .contact .button:visited, body:not(.pageIndex) .header .contact .button:hover, body:not(.pageIndex) .header .contact .button:focus, body:not(.pageIndex) .header .contact .button:active{ color:#005bac; border-color:#005bac; } } /* ----- SP：白ヘッダー状態（トップページのスクロール後＝下層ページは常時） ----- 不具合修正：以前はSPトップページのスクロール後だけ「既存仕様のため変更しない」として .isScrolledをこのブロックの対象外にしており、.header.isScrolled{background-color: var(--header-scrolled-bg)}（青、ファイル冒頭）がそのまま適用されていた。指示により PC同様「スクロール後は白背景・黒文字、青背景にはしない」へ統一する。 .header.isScrolledはPC側と同じ.header自身のクラスのためそのまま追加できるが、ハンバーガーの3本線（a.meanmenu-reveal span）は.mean-barごと.headerの外側に fixed配置されている別要素（スタッキングコンテキストの都合、上部コメント参照）のため、「.header.isScrolledの兄弟要素」を辿る手段が無い。:has()で一旦bodyまで上がってから辿り直すことで、新しい状態classを増やさずに対応する。不具合修正：ここを`body:has(.pageIndex .header.isScrolled)`と書くと、:has()の引数（子孫結合子を含むセレクタ）は暗黙に`:scope`（＝body自身）を起点とした子孫探索として評価されるため、「bodyの子孫の中に.pageIndexを持つ要素があるか」まで要求してしまう。実際には.pageIndex自体がbody自身に付くclassのため、bodyの子孫の中には存在せず、常にfalseになって不具合の温床になっていた（header.matches()単体では真になるため見落としやすい）。「.pageIndexかどうか」はbody自身への直接判定（`.pageIndex:has(...)`のように:has()の外側の複合セレクタとして書く）に切り離し、:has()の中はbodyの実際の子孫を辿る`.header.isScrolled`だけにする。下層ページの判定はPC側（上部ブロック）と同じ理由により、ページ種別classの列挙ではなく body:not(.pageIndex)を用いる（詳細はPC側ブロックのコメント参照） */ @media screen and (max-width:767px){ .pageIndex .header.isScrolled, body:not(.pageIndex) .header{ background-color:#ffffff; /* 白背景がページ本文と同化するための最小限の下方向シャドウ（PC側と同じ値） */ box-shadow:0 2px 8px rgba(0, 0, 0, 0.08); } /* 白背景上でも視認できるよう、ロゴ・ハンバーガーの3本線をSPドロワー展開時と同じ濃色へ常時切り替える（「×」は元から#3a3a3aで対応済みのため変更不要）。SP側は既存の 1枚目の直下img（:nth-of-type(1)、footer/logo_sp.png）をそのまま使う */ .pageIndex .header.isScrolled .logo picture img, body:not(.pageIndex) .header .logo picture img{ opacity:0; } .pageIndex .header.isScrolled .logo a > img:nth-of-type(1), body:not(.pageIndex) .header .logo a > img:nth-of-type(1){ opacity:1; pointer-events:auto; } .pageIndex:has(.header.isScrolled) a.meanmenu-reveal span, body:not(.pageIndex) a.meanmenu-reveal span{ background:#3a3a3a; } }