削除に伴いドロップダウン背景色 #37b8d4 が外れる問題も対応。
メガメニュー＆3階層メニューに対応。 */
@media screen and (min-width: 768px) {
.gnav-list .gnav-item {
flex: 0 0 auto;
width: auto;
padding: 0 12px;
position: relative;
}
.gnav-list .gnav-item .gnav-link {
overflow: visible;
white-space: nowrap;
width: auto;
padding: 10px 0;
line-height: 1.3;
font-size: 13px;
}
.gnav-list .gnav-item .gnav-img { display: none; }
/* ドロップダウン背景・装飾を
なしのDOMで再現
旧: .gnav-sub-list .gnav-sub-list-wrap .gnav-sub-item に当てていたものを直接 .gnav-sub-item へ */
.gnav-list .gnav-item .gnav-sub-list { background: #37b8d4; }
.gnav-list .gnav-item .gnav-sub-list .gnav-sub-item {
background: #37b8d4;
color: #fff;
border-bottom: 1px solid #a3dbea;
cursor: pointer;
}
.gnav-list .gnav-item .gnav-sub-list .gnav-sub-item .gnav-sub-link {
display: block;
width: 100%;
color: #fff;
font-size: 13px;
line-height: 1.4;
padding: 10px 14px;
text-decoration: none;
overflow: visible;
white-space: normal;
text-align: left;
}
.gnav-list .gnav-item .gnav-sub-list .gnav-sub-item .gnav-sub-link:hover {
background: rgba(255,255,255,.12);
}
/* メガメニュー: nav全幅基準で展開＋11項目を3〜4列に */
#gnav { position: relative; }
.gnav-list .gnav-item.gnav-item-mega { position: static; }
.gnav-list .gnav-item.gnav-item-mega > .gnav-sub-list {
left: 0; right: 0;
width: 100%; max-width: 1060px;
margin: 0 auto;
overflow: visible;
display: flex; flex-wrap: wrap;
}
.gnav-list .gnav-item.gnav-item-mega > .gnav-sub-list > .gnav-sub-item {
flex: 0 0 33.3333%;
min-width: 200px;
border-right: 1px solid #a3dbea;
}
/* 11項目フラット展開（社会課題から探す） */
.gnav-list .gnav-item .gnav-sub-list.gnav-sub-list-cols { flex-wrap: wrap; }
.gnav-list .gnav-item .gnav-sub-list.gnav-sub-list-cols > .gnav-sub-item {
flex: 0 0 25%;
min-width: 160px;
}
/* 第三階層: 第二階層 li の右側にホバー展開 */
.gnav-sub-item.has-sub-sub { position: relative; }
.gnav-sub-item .gnav-img-sub { display: none; }
.gnav-sub-item > .gnav-sub-sub-list {
display: none;
position: absolute; left: 100%; top: 0;
min-width: 220px;
background: #2aa3bd;
list-style: none;
z-index: 5;
padding: 0;
}
.gnav-sub-item.has-sub-sub:hover > .gnav-sub-sub-list { display: block; }
.gnav-sub-item > .gnav-sub-sub-list > li { border-bottom: 1px solid #a3dbea; }
.gnav-sub-item > .gnav-sub-sub-list .gnav-sub-sub-link {
display: block;
padding: 10px 14px;
color: #fff;
background: transparent;
font-size: 13px;
line-height: 1.4;
text-decoration: none;
}
.gnav-sub-item > .gnav-sub-sub-list .gnav-sub-sub-link:hover {
background: rgba(255,255,255,.12);
}
/* 11項目第三階層は2カラム展開 */
.gnav-sub-item > .gnav-sub-sub-list.gnav-sub-sub-list-cols {
column-count: 2; column-gap: 0; min-width: 380px;
}
.gnav-sub-item > .gnav-sub-sub-list.gnav-sub-sub-list-cols > li { break-inside: avoid; }
}
/* SP: 第三階層は accordion */
@media screen and (max-width: 767px) {
.gnav-sub-item.has-sub-sub { position: relative; }
.gnav-sub-item .gnav-img-sub {
display: inline-block; width: 14px; height: 14px;
margin-left: 6px; vertical-align: middle; cursor: pointer;
transition: transform .2s;
}
.gnav-sub-item .gnav-img-sub.active { transform: rotate(180deg); }
.gnav-sub-item .gnav-sub-sub-list {
height: 0; overflow: hidden; opacity: 0;
list-style: none; background: rgba(0,0,0,.08);
margin: 0; padding: 0;
transition: opacity .2s;
}
.gnav-sub-item .gnav-sub-sub-list.active { height: auto; opacity: 1; padding: 4px 0; }
.gnav-sub-item .gnav-sub-sub-list .gnav-sub-sub-link {
display: block; padding: 8px 0 8px 18%;
color: #fff; font-size: 13px; line-height: 1.6;
text-decoration: none;
}
}
/* === gnav refresh 2026-05 #2 (specificity fix) === */
/* 子テーマ元CSSが `header #gnav .gnav-list ...` プレフィックスで specificity (0,1,5,1) を持つため
同等以上の specificity で上書きしないと効かない。さらに後段に
`header #gnav .gnav-list .gnav-item .gnav-sub-list { position:unset; height:0; opacity:0 }` で
PC でも opacity hover 表示ではなく .active クラスで開閉する設計に上書きされていたため、
ここで PC 用に absolute + opacity hover を再設定する。 */
@media screen and (min-width: 768px) {
header #gnav { position: relative; }
/* メガメニューを