/* mega-menu-panels.css … 元は parts/mega-menu-panels.php の中の <style>（2026-11-07 にここへ移した）。読み込みは parts/mega-menu-panels.php の同じ場所の gembaroid_part_css( 'mega-menu-panels' ) */
.gnav-items { gap: 0; }
.gnav-item { position: relative; display: flex; align-items: center; height: 100%; }
.gnav-item > a { font-size: 1.4rem; font-weight: 600; letter-spacing: .02em; display: block; position: relative; }
.gnav-item > a:after { content: ''; display: block; position: absolute; height: 1px; width: 0; left: 0; bottom: -2px; transition: .4s ease; background-image: linear-gradient(90deg, var(--c-blue), var(--c-teal)); }
.gnav-item__toggle, .gnav-acc { display: none; }
/* 2026-11-07 項目が5つに減ったので、項目ごとに左右の余白を取る（ANDPAD のヘッダーを手本にした） */
@media (min-width: 751px) {
  .gnav-item { padding: 0 1.6em; } /* 縦線を外したので間を詰めた（2.6em→1.6em・2026-11-07 國塚さん指定） */
  .gnav-item:first-child { padding-left: 0; }
  /* 項目の間の縦線は外した（2026-11-07 國塚さん指定「もはやここのセパレータいらない」。項目名が長くなり、余白だけで区切れるため） */
  .gnav-item > a { font-size: 1.5rem; letter-spacing: .06em; }
}
@media (min-width: 751px) and (max-width: 1100px) {
  .gnav-item { padding: 0 1.3em; } /* 幅の狭いパソコンでは、右の管理画面とぶつからないよう余白を詰める */
  .gnav-item > a { font-size: 1.4rem; letter-spacing: .02em; }
}
@media (min-width: 751px) {
  .gnav-item > a:hover:after, .gnav-item.is-open > a:after { width: 100%; }
  .gnav-megas { position: absolute; left: 0; right: 0; top: calc(100% + 54px); z-index: 1; pointer-events: none; }
  /* 開閉の動き（2026-11-07・ANDPAD を手本にした）: パネルはメニューの行の下から上→下へ伸びて開き、中身は少し遅れて下へ浮かぶ。
     開いたまま隣の項目へ移るときは、伸びる動きを付けずに中身だけ入れ替える（is-swap） */
  .gnav-mega { position: absolute; left: 0; right: 0; top: 0; visibility: hidden; pointer-events: none; clip-path: inset(0 0 100% 0); transition: clip-path .28s cubic-bezier(.4,0,.2,1), visibility 0s linear .28s; background: rgba(255,255,255,.28); -webkit-backdrop-filter: blur(40px) saturate(1.5); backdrop-filter: blur(40px) saturate(1.5); border-top: 1px solid rgba(255,255,255,.6); box-shadow: 0 16px 32px rgba(0,0,0,.12); } /* 地は後ろをぼかして透かす（2026-11-07 國塚さん指定・エコモットのサイトを手本にした）。ぼかしが効かないブラウザは下で白を濃くする */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .gnav-mega { background: rgba(255,255,255,.95); } }
  .gnav-mega.is-open { visibility: visible; pointer-events: auto; clip-path: inset(0 0 -64px 0); transition: clip-path .5s cubic-bezier(.2,.8,.2,1), visibility 0s; }
  .gnav-mega .gnav-mega__inner { opacity: 0; transform: translateY(-12px); transition: opacity .2s, transform .2s; }
  .gnav-mega.is-open .gnav-mega__inner { opacity: 1; transform: none; transition: opacity .35s .12s, transform .5s .12s cubic-bezier(.2,.8,.2,1); }
  .gnav-mega.is-swap { transition: none; }
  .gnav-mega.is-swap.is-open .gnav-mega__inner { transition: opacity .25s, transform .3s cubic-bezier(.2,.8,.2,1); }
  .gnav-mega.is-swap:not(.is-open) .gnav-mega__inner { transition: none; }
  .gnav-mega__inner { max-width: 1200px; margin: 0 auto; padding: 28px 40px 32px; box-sizing: border-box; }
  .gnav-mega__groups { display: flex; gap: 40px; }
  .gnav-mega__group { flex: 1 1 0; min-width: 0; }
  .gnav-mega__group.-wide { flex: 1.2 1 0; }
  /* 製品のパネル（2026-11-07）: カテゴリ3列＋NETIS登録製品の1列＝縦4列。下のピックアップ4枚と列の幅・間をそろえる */
  .gnav-mega__groups.-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; }
  .gnav-mega__groups.-grid4 .gnav-mega__group:first-child { grid-column: span 3; }
  .gnav-mega__groups.-grid4 .gnav-mega__list { grid-template-columns: 1fr; }
  .gnav-mega__groups.-grid4 .gnav-mega__list.-down { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gnav-mega__pickup.-column.-product ul { gap: 32px; } /* コラムの gap: 20px より強くする */
  .gnav-mega__pickup.-product .gnav-mega__pickup__note { min-height: 1.5em; } /* 説明の無い製品（GenVital LTE）も製品名の高さをそろえる */
  .gnav-mega__title { font-size: 1.2rem; font-weight: 600; color: var(--c-gray-light); letter-spacing: .08em; margin: 0 0 6px; }
  .gnav-mega__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; margin: 0; padding: 0; }
  .gnav-mega__groups.-two .gnav-mega__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gnav-mega__group.-wide .gnav-mega__list { grid-template-columns: 1fr; }
  .gnav-mega__list.-down { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: column; } /* 製品のカテゴリは3列で上から下へ並べる（左の列が AI・気象・計測。2026-11-07）。4列のままだと右の1列が空いて左に寄るので3列にした。行の数は件数から決めて style に書く */
  .gnav-mega__list li { list-style: none; }
  .gnav-mega__list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 10px 4px; border-bottom: 1px solid var(--c-line); color: #000; font-size: 1.4rem; font-weight: 600; line-height: 1.5; letter-spacing: .03em; text-decoration: none; transition: color .2s; }
  .gnav-mega__list a:after { content: '→'; flex: none; color: var(--c-gray-dark); transition: transform .2s; }
  .gnav-mega__list a:hover { color: var(--c-blue); }
  .gnav-mega__list a:hover:after { transform: translateX(4px); color: var(--c-blue); }
  .gnav-mega__note { display: block; font-size: 1.1rem; font-weight: 400; color: var(--c-gray-light); margin: 2px 0 0; }
  .gnav-mega__more { text-align: right; margin: 18px 0 0; }
  .gnav-mega__more a { font-size: 1.3rem; font-weight: 600; color: #000; text-decoration: none; letter-spacing: .05em; }
  .gnav-mega__more a:after { content: ' →'; }
  .gnav-mega__more a:hover { color: var(--c-blue); }
  /* ピックアップ製品（2026-11-07）: カテゴリの下に、画像付きの製品を横一列に並べる */
  .gnav-mega__pickup { margin: 24px 0 0; }
  .gnav-mega__pickup ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; }
  .gnav-mega__pickup li { list-style: none; }
  .gnav-mega__pickup a { display: flex; align-items: center; gap: 12px; height: 100%; padding: 12px; border-radius: 8px; background: var(--c-bg-soft); color: #000; text-decoration: none; box-sizing: border-box; transition: background .2s; }
  .gnav-mega__pickup a:hover { background: #ebebeb; }
  .gnav-mega__pickup img { flex: none; width: 100px; height: 78px; object-fit: cover; border-radius: 4px; background: #fff; }
  .gnav-mega__pickup__name { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.4; letter-spacing: .03em; }
  .gnav-mega__pickup__note { display: block; margin: 0 0 2px; font-size: 1.1rem; font-weight: 400; line-height: 1.5; color: var(--c-gray-light); letter-spacing: 0; }
  .gnav-mega__pickup a:hover .gnav-mega__pickup__name { color: var(--c-blue); }
  /* コラムのピックアップ（2026-11-07）: 画像に題の文字が入っているので切り抜かず、4本を横幅いっぱい（16:9）で出し、下にカテゴリ名と題 */
  .gnav-mega__pickup.-column ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .gnav-mega__pickup.-column a { flex-direction: column; align-items: stretch; gap: 10px; padding: 0 0 12px; background: none; }
  .gnav-mega__pickup.-column a:hover { background: none; }
  .gnav-mega__pickup.-column img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: var(--c-bg-soft); }
  .gnav-mega__pickup__noimg { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 9; border-radius: 6px; background: var(--c-bg-soft); color: var(--c-gray-light); font-size: 1.3rem; font-weight: 700; letter-spacing: .06em; } /* 画像の無いお知らせ（2026-11-07） */
  .gnav-mega__pickup.-news .gnav-mega__pickup__name { -webkit-line-clamp: 3; } /* お知らせの題は長いので3行まで */
  .gnav-mega__pickup.-product img { aspect-ratio: 800 / 620; } /* 製品の画像は下端の帯を切らないよう元の縦横比で（2026-11-07） */
  .gnav-mega__pickup.-column .gnav-mega__pickup__name { font-size: 1.4rem; line-height: 1.6; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
}
@media (min-width: 751px) and (max-width: 1200px) {
  .gnav-mega__pickup a { gap: 10px; padding: 10px; }
  .gnav-mega__pickup img { width: 72px; height: 56px; }
  .gnav-mega__pickup__name { font-size: 1.4rem; }
  .gnav-mega__pickup__note { font-size: 1rem; }
}
/* 下へスクロールしたとき（.gnav.-hidesub）は、黒い帯だけを上へ隠し、メニューの行は画面の上に残す（2026-11-07 國塚さん指定）。
   元は黒い帯とメニューの行（54px）を一緒に隠していた（styles.css の translate(0, calc(-100% - 54px))）。
   メニューの行が残るので、隠れている間もパネルを開けるようにし、行の灰色の地も残す。工種ページの固定タブも行の下へずらす */
@media (min-width: 751px) {
  .gnav.-hidesub { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); }
  /* メニューの行の地はいつも敷き、メガメニューのパネルと同じ白28%・ぼかし40pxにする（2026-11-07 國塚さん指定「常にメニューと同じ透過度、ぼかしに」「もっと透明度上げてもいい」で45%→28%）。
     元は灰色85%で、トップでは -bgfill が付かず（bundle.js が探す .mv がトップに無い）、ほかのページでも隠れた状態（-hidesub.-bgfill）で地が消えて後ろの文字が重なっていた */
  .gnav:after, .gnav.-bgfill:after, .gnav.-hidesub:after, .gnav.-hidesub.-bgfill:after { bottom: -54px; background-color: rgba(255,255,255,.28); -webkit-backdrop-filter: blur(40px) saturate(1.5); backdrop-filter: blur(40px) saturate(1.5); }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .gnav:after, .gnav.-bgfill:after, .gnav.-hidesub:after, .gnav.-hidesub.-bgfill:after { background-color: rgba(242,242,242,.95); } }
  .category-hero[class*="-class"] .category-tab.-positionup { top: 104px; }
}
@media (min-width: 751px) and (prefers-reduced-motion: reduce) {
  .gnav-mega, .gnav-mega .gnav-mega__inner { transition: none !important; }
}
@media (max-width: 750px) {
  .gnav-megas { display: none; }
  .gnav-items { display: block; height: auto; }
  .gnav-item { display: block; height: auto; }
  .gnav-item > a { font-size: 1.6rem; color: #fff; letter-spacing: .05em; text-align: center; border-bottom: 1px solid rgba(255,255,255,.15); padding: 8px 44px; }
  .gnav-item > a:after { content: none; }
  .gnav-item__toggle { display: block; position: absolute; top: 0; right: 0; width: 44px; height: 42px; border: 0; background: none; cursor: pointer; }
  .gnav-item__toggle:before, .gnav-item__toggle:after { content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: #fff; transition: transform .2s; }
  .gnav-item__toggle:after { transform: rotate(90deg); }
  .gnav-item.is-open .gnav-item__toggle:after { transform: rotate(0deg); }
  .gnav-item.is-open .gnav-acc { display: block; }
  .gnav-acc { background: rgba(255,255,255,.06); padding: 4px 0 8px; }
  .gnav-acc a { display: block; color: #fff; font-size: 1.4rem; line-height: 1.6; letter-spacing: .03em; text-align: center; padding: 8px 16px; }
  .gnav-acc a.gnav-acc__more { color: var(--c-yellow); font-weight: 600; }
}
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }