/* ========================================================== global-nav.css — 全25ページ共通ナビゲーション（WF回遊用） 出典: ディレクター指示 2026-07-15 - PCヘッダー: カンプ design_comp/design-住宅FV1-230330-01.png 準拠 （上段小リンク／メインメニュー／CTA行、ロゴ=左シンボル） - SP: ハンバーガー → 画面下からのボトムシート（日本語2列・1画面内） - ロールオーバー文字アニメーション: neie.jp の「上へスライドして 複製が下から入る」型（span二重化 + data-text複製） - グレースケール基調維持。ロゴは currentColor（黒/白）で色制御 ========================================================== */ :root{ --gnav-h:56px; /* JSで実測上書き（FVのstickyオフセット等が参照） */ --gnav-ink:#1a1a1a; --gnav-sub:#666; --gnav-line:#ccc; /* --- シンボルマーク共通基準（ディレクター指示 2026-07-15 改訂: ヘッダーVWいっぱい） --- カンプ design-住宅FV1-230330-01.png 実測（1280px幅基準）: シンボル = x52, y65-208, w178, h143〜144（≒11.25vw。メニュー段〜ロゴタイプ段に跨る） ロゴタイプ = x1020-1235, y170-208, h38（右端から45px・シンボルと下端揃い） ヘッダー高 = 239px（上pad16 / 下pad31）・各行gap≒31px PC: 実測どおり。SP: 目視バランスで 48px（=ヘッダー内でバランスする縮小率 33.3%） ロゴXは「ビューポート左端からの固定位置」（コンテンツ幅基準を廃止・指示 2026-07-15）。 ヘッダー・分岐画面(gate)で共通の --gnav-logo-x / --gnav-type-right を参照する （global-nav.js が実測値で上書き＝gateロゴのY-only着地のX厳密一致） */ --gnav-pad-x:16px; --gnav-symbol-h:48px; --gnav-logo-x:16px; /* ビューポート左端からの固定位置（SP） */ /* ロゴタイプ高（カンプ38px/1280px≒3vw）。 2026-07-15ブラウザチェック指示: PCヘッダー高をVHに追従させるため min(3vw, 4.5vh) ＝ 低いビューポートでは縦基準で縮む（1080px高で48.6px→cap38.5px＝従来どおり／700px高で31.5px） */ --gnav-type-h:clamp(24px, min(3vw, 4.5vh), 38.5px); --gnav-type-right:16px; /* ロゴタイプ右端のビューポート右端からの固定位置 */ } @media (min-width:960px){ :root{ --gnav-pad-x:40px; /* カンプ実測: メニュー右端≒1240/1280 */ --gnav-logo-x:52px; /* カンプ実測: シンボル x52（固定） */ --gnav-type-right:45px; /* カンプ実測: ロゴタイプ右端 1235/1280 */ /* カンプ実測比 11.25vw（=144px/1280px）を維持して流動化。1280px以上で144px（カンプ実測値）。 2026-07-15ブラウザチェック指示: ヘッダー高のVH追従＝ min(11.25vw, 15vh) で 低いビューポートではシンボルも縦基準で圧縮（1080px高→144px＝従来どおり／ 700px高→105px）。下限84px（それ以下はロゴ可読性が崩れるため）。 ※シンボル縮小はメニュー行の幅を広げる方向＝折返しリスクは増えない */ --gnav-symbol-h:clamp(84px, min(11.25vw, 15vh), 144px); } } /* スクロールバー出現によるセンタリングのズレ防止（gateロゴ着地のX不動に必須）: クラシックスクロールバー環境では、gate通過時（overflow解除）にバー幅ぶん コンテナが左シフトしてロゴXがずれるため、ガターを常時確保して固定する */ html{scrollbar-gutter:stable;} /* ========================================================== コンテンツ幅システム（ディレクター指示 2026-07-15・全25ページ共通） - コンテンツ幅 --w-content を 1080px → 1480px へ拡張 - 1480px未満のビューポート: コンテンツbox幅は画面幅に追従 ＝左右余白3%ずつ（--pad-side:3vw → box幅=94vw） ※ディレクター指示に「VWの96%」と「左右3%ずつ」が併記され数値が 両立しないため 94vw（3%+3%）を採用。96%解釈なら --pad-side:2vw （box幅=96vw）に変更・要確認 - 1480px以上: 1480px固定・中央寄せ（左右余白 --pad-side が可変） - 各ページのラッパー（.section / .next-read / .method-nav 等）が 左右padding = var(--pad-side) を参照し、inner の max-width:var(--w-content) と併用して上記を実現する - FVの左余白レイアウト（10.86vw/2.97vw/コピー3.05vw）・100vw分岐画面 （gate）はVW基準のまま＝本システムの影響を受けない 12分割グリッドシステム（デザインは12カラムグリッドで設計＝ディレクター確定） - 1480px ＝ カラム105px×12 ＋ gap20px×11（105×12=1260 + 20×11=220） - 変数（--grid-col / --grid-gap）とユーティリティ .grid12 を基盤として定義。 既存レイアウトの全面グリッド化はせず、新規・改修箇所から使用する ========================================================== */ :root{ --w-content:1480px; --pad-side:3vw; /* <1480px: 左右3%ずつ＝コンテンツ94vw（96%解釈なら2vw・要確認） */ --grid-col:105px; --grid-gap:20px; } @media (min-width:1480px){ :root{--pad-side:calc((100vw - var(--w-content)) / 2);} /* 1480px固定・中央寄せ */ } .grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--grid-gap,20px);} /* --- ロゴSVG共通（インラインSVG・fill:currentColor） --- */ .gnav-svg{display:block;fill:currentColor;} .gnav-svg--symbol{height:34px;width:auto;} .gnav-svg--type{height:22px;width:auto;} /* ========================================================== ヘッダー ========================================================== */ .gnav{ position:sticky;top:0;z-index:120; pointer-events:none; /* 実体は.gnav__bar。縮小時、バー下の透明領域はクリック透過 */ min-height:var(--gnav-h,0px); /* 非縮小の実測高（JS設定）でレイアウト高を固定 ＝縮小してもコンテンツが跳ねない（バーだけ縮む） */ } .gnav__bar{ pointer-events:auto; background:#fff;border-bottom:1px solid var(--gnav-line); transition:background-color .35s ease; } .gnav__inner{ /* ヘッダーはVWいっぱい（max-width廃止・ディレクター指示 2026-07-15）。 左padding=--gnav-logo-x（ロゴ=ビューポート左端からの固定位置） */ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:10px var(--gnav-pad-x) 10px var(--gnav-logo-x);min-height:56px; } .gnav__logo{color:var(--gnav-ink);display:block;line-height:0;} .gnav__logo .gnav-svg--symbol{height:var(--gnav-symbol-h);} /* カンプ準拠サイズ（:rootの共通変数） */ .gnav__rows{display:none;} /* PCのみ表示（下のMQで展開） */ .gnav__type{display:none;} /* ロゴタイプ行はPCのみ（下のMQで展開） */ .gnav__dd{display:none;} /* ドロップダウンはPCのみ（SPはボトムシートが担当） */ /* --- SP: ハンバーガーボタン --- */ .gnav__burger{ display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px; width:44px;height:44px;padding:0;cursor:pointer; border:none;background:transparent; /* 2026-10-03 ディレクター指示「ハンバーガーメニューは四角い枠は不要」（旧 border:1px solid var(--gnav-line);background:#fff;） */ } .gnav__burger span{ display:block;width:20px;height:2px;background:var(--gnav-ink); transition:transform .3s ease,opacity .3s ease; } .gnav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);} .gnav__burger[aria-expanded="true"] span:nth-child(2){opacity:0;} .gnav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* --- ロールオーバー文字アニメーション（PC hover時のみ発火） --- */ .gnav-roll{text-decoration:none;color:inherit;} .gnav-roll__w{display:inline-block;overflow:hidden;vertical-align:top;} /* クリップ枠（paddingを含めない） */ .gnav-roll__t{ position:relative;display:inline-block;line-height:1.6; transition:transform .38s cubic-bezier(.19,1,.22,1);will-change:transform; } .gnav-roll__t::after{ content:attr(data-text); position:absolute;left:0;top:100%;white-space:nowrap; } @media (hover:hover) and (pointer:fine){ .gnav-roll:hover .gnav-roll__t, .gnav-roll:focus-visible .gnav-roll__t{transform:translateY(-100%);} } @media (prefers-reduced-motion:reduce){ html:not(.wf-force-motion) .gnav-roll__t{transition:none;} html:not(.wf-force-motion) .gnav-roll:hover .gnav-roll__t{transform:none;text-decoration:underline;} html:not(.wf-force-motion) .gnav__dd{transition:none;} } /* 現在ページ表示 */ .gnav a[aria-current="page"] .gnav-roll__t, .gnav-sheet a[aria-current="page"] .gnav-roll__t{ border-bottom:1px solid currentColor; } /* ========================================================== PCヘッダー（960px〜）: 上段小リンク／メインメニュー／CTA行 ========================================================== */ @media (min-width:960px){ .gnav__burger{display:none;} /* カンプ実測（1280px）: 上pad16 / 下pad30。シンボルは下端揃い（y65-208＝ロゴタイプと下端一致）。 2026-07-15ブラウザチェック指示: 上下paddingもVH追従（1000px高以上で16/30＝従来どおり／ 700px高で11.2/21）＝低背ビューポートでヘッダー占有比率が極端に広がらない */ /* 2026-07-17ディレクター指示: ヘッダーをよりコンパクトに（上pad16→10・下pad30→20相当）。 FV高は 100svh−--gnav-h（JS実測）参照のため、詰めたぶんトップのスライダー領域が自動拡大 */ .gnav__inner{align-items:flex-end;padding:clamp(6px,1vh,10px) var(--gnav-pad-x) clamp(10px,2vh,20px) var(--gnav-logo-x);} /* 右の4行（上段小リンク／メインメニュー／CTA／ロゴタイプ）は右寄せ・行間gap≒31px（カンプ実測）。 シンボル(144px)はメニュー段〜ロゴタイプ段に跨って下端揃い。 2026-07-15ブラウザチェック指示: gapもVH追従＝ min(2.42vw, 3.2vh) （970px高以上で31px＝従来どおり／700px高で22.4px） */ .gnav__rows{ display:flex;flex-direction:column;align-items:flex-end; justify-content:flex-start;gap:clamp(10px, min(1.9vw, 2.5vh), 24px); /* 2026-07-17: 31→24（行間圧縮） */ flex:1;min-width:0; } /* ロゴタイプ行（カンプ: 右側・メニュー/CTA下の I.D.WORKS in design your identity） 右端=ビューポート右から45px（カンプ実測）− pad-x40px ＝ margin 5px。 ※JS実測変数（--gnav-type-right-m）をここで参照すると循環参照（実測→margin増→再実測…） になるため、ヘッダー側は静的値のみで配置し、実測値はgate側だけが参照する */ .gnav__type{ display:block;color:var(--gnav-ink);line-height:0; margin-right:5px; } .gnav__type .gnav-svg--type{height:var(--gnav-type-h);} /* 上段: 小リンク＋bizバナー風ボタン（2026-07-17: 余白を詰めてコンパクト化。 font 12→11・gap 22→14・ボタンpad 3/16→1/12。行自体をメイン段に密着させる） */ /* [20261014a] 旧 .gnav__utility（ロゴ右上の2ボタン行）は撤去＝上段バー .gnav__utilbar へ移設（下の「上段ユーティリティバー」参照）。 ボタン（.gnav__bizbtn）の意匠はそのまま流用。 */ .gnav__bizbtn{ text-decoration:none;color:var(--gnav-ink); border:1px solid var(--gnav-ink);border-radius:999px; padding:1px 12px;font-size:11px;letter-spacing:.04em;white-space:nowrap; } .gnav__bizbtn:hover{background:var(--gnav-ink);color:#fff;} /* ユーティリティ2ボタン化（2026-07-28 クライアント指示）。オーナー様導線は既存顧客向け＝ 新規向けbizボタンより一段控えめに（線を細く見せる薄色ボーダー）。 */ .gnav__bizbtn--owner{border-color:var(--c-line-dark,#bdbdbd);} .gnav__bizbtn--owner:hover{background:var(--gnav-ink);border-color:var(--gnav-ink);color:#fff;} /* メインメニュー（縦罫区切り）。項目余白は960〜1280pxで流動（シンボル拡大後の折返し防止） */ .gnav__main ul{display:flex;list-style:none;margin:0;padding:0;} .gnav__main li{position:relative;padding:0 clamp(12px, 1.875vw, 24px);} .gnav__main li:last-child{padding-right:0;} .gnav__main li+li::before{ content:"";position:absolute;left:0;top:50%;transform:translateY(-50%); width:1px;height:14px;background:#aaa; } .gnav__main a{font-size:14px;letter-spacing:.1em;color:var(--gnav-ink);white-space:nowrap;} /* --- PCドロップダウン（ホバー＋focus-withinで子階層が下に出る。グレースケール維持） ディレクター指示 2026-07-15 修正3点(3)。Esc閉じは global-nav.js（.gnav-dd-esc付与） --- */ /* ========================================================== PCドロップダウン 挙動・意匠 改修（2026-07-28 ディレクター指示 B-3） ・表示 = 「上から下へニュルッとスライドイン」。パネル(.gnav__dd-in)を clip-path:inset(0 0 100% 0) → inset(0) で上端から下へ開き、 translateY(-8px)→0 ＋ opacity 0→1 を .3s ease-out で同時に走らせる。 ・非表示 = ホバーが外れたら素早くフェードアウト（.14s）。 ＝「開くときの指定」は :hover 側、「閉じるときの指定」は既定側に置くことで スロー・イン／クイック・アウトを実現する（連続hoverでも中断・再開が破綻しない）。 ・意匠 = 周囲ボーダーなし／背景 白90%（rgba(255,255,255,.9)・2026-07-28 A-1で80%から変更）／ドロップシャドウなし。 写真の上へ重なると可読性が落ちるため backdrop-filter:blur(6px) を併用（※判断点）。 ・右端DDの右揃えルール（last-child right:0）は維持。 ========================================================== */ .gnav__dd{ display:block;position:absolute;left:50%;top:100%; transform:translateX(-50%); padding-top:10px;z-index:10; visibility:hidden;pointer-events:none; transition:visibility 0s .14s; } .gnav__main li:hover>.gnav__dd, .gnav__main li:focus-within>.gnav__dd{ visibility:visible;pointer-events:auto; transition:visibility 0s; } /* パネル本体＝上から下へのスライドイン（閉じ＝既定側＝クイックフェード） */ .gnav__main ul.gnav__dd-in{ /* .gnav__main ul{display:flex} より高詳細度で縦リスト化 */ display:block; list-style:none;margin:0;padding:6px 0;min-width:230px; background:rgba(255,255,255,.9); /* 白90%（2026-07-28 A-1: 80%は下地テキストと干渉するとのディレクター実見で+10%） */ border:0; /* 周囲ボーダーなし（B-3） */ box-shadow:none; /* ドロップシャドウなし（B-3） */ -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); /* 可読性確保（判断点） */ opacity:0;transform:translateY(-8px); clip-path:inset(0 0 100% 0); transition:opacity .14s ease,transform .14s ease,clip-path .14s ease; /* 閉じ＝素早く */ will-change:opacity,transform,clip-path; } .gnav__main li:hover>.gnav__dd>ul.gnav__dd-in, .gnav__main li:focus-within>.gnav__dd>ul.gnav__dd-in{ opacity:1;transform:translateY(0); clip-path:inset(0 0 0 0); transition:opacity .3s ease-out,transform .3s ease-out,clip-path .3s ease-out; /* 開き＝ニュルッ */ } /* 右端項目（I.D.WORKSについて等）のDDは右揃え＝中央揃えだとvisibility:hiddenでも レイアウト幅を占有し画面右へはみ出す（2026-07-27 横スク21px不具合の修正） */ .gnav__main>ul>li:last-child>.gnav__dd{left:auto;right:0;transform:none;} .gnav__main li.gnav-dd-esc>.gnav__dd{ /* Escで閉じる（JSが付与。ホバーが外れたら解除） */ visibility:hidden !important;pointer-events:none !important; } .gnav__main li.gnav-dd-esc>.gnav__dd>ul.gnav__dd-in{ opacity:0 !important;clip-path:inset(0 0 100% 0) !important;transform:translateY(-8px) !important; } .gnav__dd-in li{padding:0;} .gnav__dd-in li+li::before{content:none;} /* 親メニューの縦罫区切りを子階層では無効化 */ .gnav__dd-link{ display:block;padding:9px 18px;text-decoration:none; font-size:12.5px;letter-spacing:.06em;color:var(--gnav-ink);white-space:nowrap; } /* 半透明パネル（白80%）に載るため、ホバー面も不透明#f0f0f0ではなく黒5%の重ねにする */ .gnav__dd-link:hover,.gnav__dd-link:focus-visible{background:rgba(0,0,0,.05);} /* --- 子階層（メソッド配下：LIFE ID / BCID 等）＝頭を少しずらしたインデント表現。 2026-07-28 ディレクター指示B-3: 縦罫「｜」風ボーダー → 半角ハイフン＋スペース「- 」に変更。 （border-left/擬似縦罫は廃止＝テキスト接頭のみで階層を示す） --- */ .gnav__dd-link--child{ padding-left:32px;position:relative; font-size:12px;color:var(--gnav-ink); } .gnav__dd-link--child::before{ content:"- "; /* 半角ハイフン＋スペース（B-3） */ position:absolute;left:18px;top:50%;transform:translateY(-50%); width:auto;height:auto;background:none; white-space:pre;line-height:1;color:var(--gnav-sub); } .gnav__dd-link--child:hover::before, .gnav__dd-link--child:focus-visible::before{color:var(--gnav-ink);background:none;} /* CTA行 */ .gnav__cta{display:flex;align-items:center;gap:22px;font-size:12px;} .gnav__cta .gnav-roll{color:var(--gnav-ink);} .gnav__cta-ic{ display:inline-block;width:14px;height:11px;margin-right:5px;vertical-align:-1px; border:1px solid var(--gnav-ink); } .gnav__cta-ic--round{border-radius:50%;width:12px;height:12px;} } /* ========================================================== 上段ユーティリティバー（2026-10-14 ディレクター指示・[20261014a]） - 非住宅サイト（theme/idworks-biz・biz-nav.css .gnav__utilbar）の上段バーを住宅にも。PCのみ（〜959pxは非表示＝SPメニューが担当）。 - 並び＝会社情報／採用情報／オーナー様はこちら／店舗・施設建築をご検討の方／Instagram・YouTube（右端）。 - 色＝文字・ボタン線・アイコンは黒（--gnav-ink）。地は黒文字を邪魔しない薄グレー #efefef（白地のヘッダー本体と見分けがつく程度）。 - 縮小ヘッダー時は畳む（旧 .gnav__utility と同じ挙動＝下の「スクロール縮小ヘッダー」）。 - SNSのホバー＝縦に1回転（非住宅と同じ keyframes）。 ========================================================== */ .gnav__utilbar{display:none;} @media (min-width:960px){ .gnav__utilbar{display:block;background:#efefef;} .gnav__utilbar-in{ display:flex;align-items:center;justify-content:flex-end;gap:14px; padding:5px var(--gnav-pad-x);font-size:11px;letter-spacing:.04em;color:var(--gnav-ink); } .gnav__utilbar-in .gnav-roll{color:var(--gnav-ink);} .gnav__sns{display:flex;align-items:center;gap:10px;margin-left:10px;} .gnav__sns-ic{ display:inline-flex;align-items:center;justify-content:center; width:20px;height:20px;color:var(--gnav-ink);text-decoration:none; transition:opacity .2s ease; } .gnav__sns-ic .bz-sns-svg{width:100%;height:100%;display:block;transform-origin:50% 50%;} .gnav__sns-ic::after{display:none;} /* link-anim.css の下線を乗せない */ @keyframes gnavSnsFlip{ from{ transform:rotateX(0deg); } to{ transform:rotateX(360deg); } } .gnav__sns-ic:hover .bz-sns-svg, .gnav__sns-ic:focus-visible .bz-sns-svg{animation:gnavSnsFlip .55s cubic-bezier(.22,.61,.36,1) 1;} .gnav__sns-ic:hover, .gnav__sns-ic:focus-visible{opacity:.85;} @media (prefers-reduced-motion:reduce){ html:not(.wf-force-motion) .gnav__sns-ic .bz-sns-svg{animation:none !important;} } } /* ========================================================== スクロール縮小ヘッダー（ディレクター仕様 2026-07-15） - 発火: home=FV(#fv2)の下端が画面上端を過ぎたら／下層=.page-heroを過ぎたら （global-nav.js の IntersectionObserver が .gnav--shrunk を付与・除去） - 縮小状態: ①高さ約1/2 ②ロゴ縮小（PC 144→72px） ③上段（会社情報/採用情報/ 店舗・施設建築）非表示 ④背景=白・透過率50%（rgba(255,255,255,.5)。 backdrop-filterは任意→可読性確保のため軽いblurを採用）で固定表示のまま - 画面上部（ヒーロー再表示）で元のサイズへスムーズに復帰（transition） - SPは元々小さいため 固定+半透明+わずかな縮小のみ（シンボル48→40px・padding 10→6px） - レイアウト高は .gnav の min-height（--gnav-h=非縮小実測高）で固定し、 縮小時もコンテンツ位置がジャンプしない（home FVのsticky幾何も不変） ========================================================== */ .gnav__inner{transition:padding .35s ease,min-height .35s ease;} .gnav__logo .gnav-svg--symbol{transition:height .35s ease;} .gnav--shrunk .gnav__bar{ background:rgba(255,255,255,.5); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); } /* SP縮小: わずかな縮小のみ（56px級→48px級） */ .gnav--shrunk .gnav__inner{padding:6px var(--gnav-pad-x) 6px var(--gnav-logo-x);min-height:48px;} .gnav--shrunk .gnav__logo .gnav-svg--symbol{height:40px;} @media (min-width:960px){ /* 上段小リンク行・ロゴタイプ行: max-height+opacityで折りたたみ（display:noneは遷移不可のため） */ .gnav__utilbar{max-height:60px;overflow:hidden;transition:max-height .35s ease,opacity .25s ease;} .gnav__type{max-height:40px;overflow:hidden;transition:max-height .35s ease,opacity .25s ease;} .gnav--shrunk .gnav__inner{padding:8px var(--gnav-pad-x) 8px var(--gnav-logo-x);} /* 縮小時は行間も詰める（utility/typeが0になっても gap が残って高さ半減しないため） */ .gnav__rows{transition:gap .35s ease;} .gnav--shrunk .gnav__rows{gap:6px;} /* シンボル高 1/2（clamp(84,min(11.25vw,15vh),144) の半分。流動レスポンシブ＋VH追従維持） */ .gnav--shrunk .gnav__logo .gnav-svg--symbol{height:clamp(42px,min(5.625vw,7.5vh),72px);} .gnav--shrunk .gnav__utilbar{max-height:0;opacity:0;pointer-events:none;} .gnav--shrunk .gnav__type{max-height:0;opacity:0;pointer-events:none;} } .gnav--no-anim,.gnav--no-anim *{transition:none !important;} /* JSの実測時に一時付与 */ @media (prefers-reduced-motion:reduce){ html:not(.wf-force-motion) :is(.gnav__bar,.gnav__inner,.gnav__logo .gnav-svg--symbol,.gnav__utilbar,.gnav__type){transition:none;} } /* ========================================================== SPメニュー＝全画面オーバーレイ（2026-07-28 ディレクター指示 B-4・全面刷新） ---------------------------------------------------------- 参照サイト（hadashinoie.co.jp）から踏襲するのは【レイアウト構造と開閉モーション】だけ。 ディレクター補正（2026-07-28）により以下は現行のまま変更しない: ① 項目ラベルは日本語のまま（英語化しない）・リンク先も不変 ② フォントは現行トークン（--ff-jp / --ff-en）のまま（セリフ体／英字大見出し化しない） ③ 配色も現行のグレースケールのまま（参照サイトのクリーム色にしない） 踏襲する要素: ・全画面オーバーレイがフェードイン／ナビ項目は opacity:0 からの時差フェードイン（ステガー） ・閉じるとオーバーレイがフェードアウト（項目は遅延なしで素早く消える） ・2カラムの大項目（子項目は「- 」接頭の小さめグレー文字で親の下に常時表示） ・小リンク行 → 細罫線 → お問い合わせ誘導ブロック（矢印円アイコン付） → 細罫線 の縦構成 ・開閉トグルはヘッダーのハンバーガーのまま（開いた状態は同位置がClose(×)） ========================================================== */ /* 旧・暗幕オーバーレイは全画面シートに置き換わったため透明化（DOM/JSはそのまま） */ .gnav-overlay{ position:fixed;inset:0;z-index:170;background:transparent; opacity:0;visibility:hidden; transition:opacity .35s ease,visibility 0s .35s; } .gnav-overlay.is-open{opacity:1;visibility:visible;transition:opacity .35s ease;} .gnav-sheet{ position:fixed;inset:0;z-index:180; background:#fff; /* 単色背景＝現行SPシートと同じ白基調（グレースケール厳守） */ padding:calc(var(--gnav-h,56px) + 14px) 20px calc(20px + env(safe-area-inset-bottom,0px)); /* 2026-07-29 AD: 一画面化のため上下パディング圧縮（上20→14/下28→20） */ overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; opacity:0;visibility:hidden;will-change:opacity; transition:opacity .3s ease,visibility 0s .3s; } .gnav-sheet.is-open{ opacity:1;visibility:visible; transition:opacity .38s ease; } /* 開いている間はヘッダーバーをシートより前面に＝ハンバーガー（＝Close ×）が同位置で押せる */ body.gnav-locked .gnav{z-index:200;} body.gnav-locked{overflow:hidden;} /* 開時の背景スクロールロック */ .gnav-sheet__scroll{max-width:560px;margin:0 auto;} /* --- 本体＝2カラムの大項目 --- 2026-07-29 AD: display:grid → CSS多段組(columns)へ変更。 grid+align-items:start は「行の高さ＝左右セルの高い方」になるため、子項目の少ない セル（例:「ホーム」）の下に大きな空白ができていた（ディレクター指摘の無駄な余白）。 多段組は各グループを縦に隙間なく詰めて2カラムへ流し込むため、行アラインの空白が消え 全体高が大幅に縮む（子階層19件は維持したまま一画面化）。break-insideで途中分割を防止。 */ .gnav-sheet__grid{ columns:2;column-gap:20px; list-style:none;margin:0;padding:0; } .gnav-sheet__group{ min-width:0;margin:0 0 22px; /* 段内のグループ間余白。2026-10-15 P141: 16→22（かたまりを読み取りやすく） */ break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid; } .gnav-sheet__parent{ display:block;font-size:15px;letter-spacing:.04em;line-height:1.4; color:var(--gnav-ink);text-decoration:none; } .gnav-sheet__children{list-style:none;margin:8px 0 0;padding:0;} /* 2026-10-15 P141: 6→8 */ .gnav-sheet__child{ display:block;padding:2px 0;font-size:12.5px;letter-spacing:.03em;line-height:1.75; /* 2026-10-15 P141: 12→12.5 / lh1.6→1.75 */ color:var(--gnav-sub);text-decoration:none; } .gnav-sheet__child::before{content:"- ";white-space:pre;} /* 「- 」接頭（B-4） */ /* 現在ページ表示（旧 .gnav-roll__t への下線指定の受け皿。SPシートは gnav-roll を使わない構成へ変更したため） */ .gnav-sheet__parent[aria-current="page"], .gnav-sheet__child[aria-current="page"]{display:inline-block;border-bottom:1px solid currentColor;} /* --- 小リンク行（コンテンツ項目の下端・CTA区分の直前） --- */ .gnav-sheet__small{ display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center; /* 2026-10-15：非住宅と同じく中央揃え・ピルの下へ */ margin-top:14px;font-size:11.5px;color:var(--gnav-sub); } /* SNS（非住宅 .gnav-sheet__sns と同じ：丸枠なしのロゴをテキストの前に） */ .gnav-sheet__small a.gnav-sheet__sns{display:inline-flex;align-items:center;gap:5px;} .gnav-sheet__sns-ic{width:13px;height:13px;flex:none;display:block;} /* 相手サイトへのピル（非住宅 .gnav-sheet__house と同じ形） */ .gnav-sheet__cross{ display:block;text-align:center;margin-top:14px;padding:9px;font-size:12px;letter-spacing:.04em; color:var(--gnav-ink);border:1px solid var(--gnav-ink);border-radius:999px;text-decoration:none; } /* 閉じるボタン（非住宅 .gnav-sheet__close と同じ形。#gnav-close は global-nav.js が既に閉じる処理を持つ） */ .gnav-sheet__close{ display:block;width:100%;margin:12px 0 4px;padding:10px; font-size:12px;letter-spacing:.2em;color:var(--gnav-sub);font-family:inherit; background:#f4f4f4;border:1px solid #e5e5e5;cursor:pointer; } .gnav-sheet__small a{color:var(--gnav-sub);text-decoration:none;} /* --- 細罫線（コンテンツ項目 ／ CTA の区切り） --- */ .gnav-sheet__rule{border:0;border-top:1px solid #e5e5e5;margin:16px 0 0;} /* 2026-07-29 AD: 22→16 */ /* --- お問い合わせ誘導ブロック（CTA区分） --- */ .gnav-sheet__contact{padding:16px 0;} /* 2026-07-29 AD: 22→16 */ .gnav-sheet__contact-label{ font-family:var(--ff-en);font-size:11px;letter-spacing:.2em; color:var(--gnav-sub);margin:0 0 8px; /* 2026-07-29 AD: 12→8 */ } /* 2026-10-15 P141＝A案：CTAを正規ボタン（.btn／design-rules §8）へ。旧＝19pxの文字リンク＋丸矢印、資料DL・LINEは11.5pxの文字 */ .gnav-sheet .btn.gnav-sheet__cta{display:flex;width:100%;min-width:0;box-sizing:border-box;} .gnav-sheet__cta-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;} /* .btn 本体（design-system.css）の指定に勝つよう .gnav-sheet を前置して詳細度を上げる */ .gnav-sheet .btn.gnav-sheet__cta-sub{ min-width:0;width:100%;box-sizing:border-box; padding:11.5px 6px;font-size:12.5px;line-height:20px;letter-spacing:.04em;white-space:nowrap;justify-content:center; /* 半幅のため左右余白と字間を詰め1行に収める／高さ＝45px（§8・上の主ボタンと揃える） */ } .gnav-sheet .btn.gnav-sheet__cta-sub::after{display:none;} /* 右端の横棒は半幅では文字と干渉するため出さない（§8 P09/P10 と同じ扱い） */ .gnav-sheet__tel{ display:flex;justify-content:center;align-items:baseline;gap:10px;margin-top:16px; /* 2026-10-15：非住宅と同じく中央 */ color:var(--gnav-ink);text-decoration:none; } .gnav-sheet__tel-label{font-family:var(--ff-en);font-size:11px;letter-spacing:.2em;color:var(--gnav-sub);} .gnav-sheet__tel-num{font-family:var(--ff-en);font-size:24px;letter-spacing:.06em;border-bottom:1px solid currentColor;padding-bottom:2px;} .gnav-sheet__contact-note{text-align:center;margin:8px 0 0;font-size:11.5px;line-height:1.7;color:var(--gnav-sub);} /* 2026-07-29 AD: margin12→10 / lh1.95→1.7 */ /* --- ナビ項目の時差フェードイン（ステガー）--- 開くとき＝.is-open 側に transition-delay を持たせる／閉じるとき＝既定側は遅延なしで素早く消える。 */ .gnav-sheet__group, .gnav-sheet__small, .gnav-sheet__rule, .gnav-sheet__contact, .gnav-sheet__cross, .gnav-sheet__close{ opacity:0;transform:translateY(10px); transition:opacity .2s ease,transform .2s ease; /* 閉じ＝遅延なし・素早く */ } .gnav-sheet.is-open .gnav-sheet__group, .gnav-sheet.is-open .gnav-sheet__small, .gnav-sheet.is-open .gnav-sheet__rule, .gnav-sheet.is-open .gnav-sheet__contact, .gnav-sheet.is-open .gnav-sheet__cross, .gnav-sheet.is-open .gnav-sheet__close{ opacity:1;transform:none; transition:opacity .46s ease,transform .46s cubic-bezier(.22,.61,.36,1); } .gnav-sheet.is-open .gnav-sheet__group:nth-child(1){transition-delay:.10s;} .gnav-sheet.is-open .gnav-sheet__group:nth-child(2){transition-delay:.15s;} .gnav-sheet.is-open .gnav-sheet__group:nth-child(3){transition-delay:.20s;} .gnav-sheet.is-open .gnav-sheet__group:nth-child(4){transition-delay:.25s;} .gnav-sheet.is-open .gnav-sheet__group:nth-child(5){transition-delay:.30s;} .gnav-sheet.is-open .gnav-sheet__group:nth-child(6){transition-delay:.35s;} .gnav-sheet.is-open .gnav-sheet__group:nth-child(7){transition-delay:.40s;} .gnav-sheet.is-open .gnav-sheet__group:nth-child(8){transition-delay:.45s;} .gnav-sheet.is-open .gnav-sheet__small{transition-delay:.50s;} .gnav-sheet.is-open .gnav-sheet__rule{transition-delay:.54s;} .gnav-sheet.is-open .gnav-sheet__contact{transition-delay:.58s;} .gnav-sheet.is-open .gnav-sheet__cross{transition-delay:.62s;} .gnav-sheet.is-open .gnav-sheet__close{transition-delay:.66s;} @media (prefers-reduced-motion:reduce){ /* reduced-motion＝フェード等を無効化して即時表示（?motion=0 プレビュー時に確認可） */ html:not(.wf-force-motion) :is(.gnav-sheet,.gnav-sheet.is-open, .gnav-overlay,.gnav-overlay.is-open){transition:none;} html:not(.wf-force-motion) :is(.gnav-sheet__group,.gnav-sheet__small, .gnav-sheet__rule,.gnav-sheet__contact,.gnav-sheet__cross,.gnav-sheet__close){ opacity:1;transform:none;transition:none;transition-delay:0s; } } @media (min-width:960px){ .gnav-sheet,.gnav-overlay{display:none;} } @media (max-width:359px){ .gnav-sheet__grid{columns:1;} /* 極小幅は1カラムに退避（多段組化に伴いgrid指定から変更 2026-07-29 AD） */ } /* ========================================================== フッター（全ページ共通・サイトマップ型ページ一覧） 既存の拠点情報を維持しつつ、25ページ全リンクをカテゴリ別に掲載 ========================================================== */ .gfoot{background:#2b2b2b;color:#ddd;padding:56px var(--pad-side,16px) 20px;} /* 左右=コンテンツ幅システム（1480px/94vw） */ .gfoot__inner{max-width:var(--w-content,1480px);margin:0 auto;} .gfoot__brand{margin-bottom:32px;} .gfoot__logo{display:inline-flex;align-items:flex-end;gap:14px;color:#fff;margin-bottom:18px;} .gfoot__logo .gnav-svg--symbol{height:44px;} .gfoot__logo .gnav-svg--type{height:30px;} .gfoot__info{font-size:12px;line-height:2;color:#ccc;} .gfoot__info small{font-size:10px;color:#999;} /* 2026-10-15 P142：非住宅サイトへのボタン（会社情報の下）。非住宅フッターの .bfoot__crossbtn と同じ意匠＝両サイトで統一 */ .gfoot__crossbtn{ display:inline-block;margin-top:12px;padding:5px 16px; font-size:12px;letter-spacing:.04em;line-height:1.6;white-space:nowrap;text-decoration:none; color:#fff;border:1px solid #fff;border-radius:999px; transition:background-color .2s ease,color .2s ease; } .gfoot__crossbtn:hover,.gfoot__crossbtn:focus-visible{background:#fff;color:#000;} .gfoot__sitemap{ display:grid;grid-template-columns:1fr 1fr;gap:24px 20px; border-top:1px solid #555;padding-top:28px;margin-bottom:28px; } .gfoot__col{min-width:0;} .gfoot__head{ font-size:12px;font-weight:bold;letter-spacing:.12em;color:#fff; border-bottom:1px solid #555;padding-bottom:6px;margin-bottom:8px; } .gfoot__list{list-style:none;margin:0;padding:0;font-size:12px;line-height:2.1;} /* 段落ち対策（QA home-fotter・2026-08-19）: SPで「OB顧客向け（アフターサポー／ト）」 「店舗・施設建築（事業用サイ／ト）」と最終行が2字になる（指摘の⚠️2箇所）。 最終行だけを調整する text-wrap:pretty を当てて3字以上にする。他行の詰まり方は変わらない。 ※ nowrap で「（アフターサポート）」を一体化すれば「OB顧客向け／（アフターサポート）」と きれいに割れるが、link-anim.js が子要素を持つ要素をロール不可と判定し .la-roll--flat（下線のみ）へ落とすため、この2リンクだけホバー演出が消える。 フッター内で挙動が不揃いになるため採らない。 */ .gfoot__list a{color:#ccc;text-decoration:none;text-wrap:pretty;} .gfoot__list a:hover{color:#fff;text-decoration:underline;} .gfoot__todo{font-size:10px;color:#888;margin-left:4px;} /* 未作成ページ表記 */ .gfoot__copy{ font-size:10px;color:#999;text-align:center; border-top:1px solid #555;padding-top:14px;margin:0; } @media (min-width:960px){ .gfoot__brand{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;} .gfoot__info{text-align:right;} /* 2026-10-15 P142：会社情報を右揃え（非住宅フッターと同じ作り） */ .gfoot__sitemap{grid-template-columns:repeat(5,1fr);} } /* ===== ボタン統一改修（2026-07-18 ディレクター指示）===== ①枠幅拡張: PCで min-width 360px（「360か400くらい」→ディレクターDesign編集実績の360を採用。 400へは下の1箇所を変更）②枠内右端にシンプルな横棒 ③hoverで棒が左→右へスライド ※このファイルは全ページで