l
.gnavi__wrap {
  position: relative; /* ここで親要素の位置を基準にします */
}
.gnavi__list{
    background: #4472c4;
    color: #fff;
    position: relative; /* ドロップダウンの位置基準にする */
}

.dropdown__lists {
    display: grid; /* 常に grid、表示制御は visibility と opacity で */
  position: absolute; /* 絶対位置で配置 */
  top: 85px; /* 親要素のすぐ下に表示されるように */
  right: 0; /* 親要素の右端に揃える */
  background-color: transparent;
  padding: 10px;
  border-radius: 4px;
  z-index: 999;
  grid-template-columns: repeat(3, 25rem); /* 3列 */
  gap: 0px; /* 要素の間隔 */
  max-width: 100vw; /* 画面外に出ないように */

    /* アニメーション */
     pointer-events: none;
    visibility: hidden;/*デフォルトでは非表示の状態にしておく*/
    opacity: 0;/*不透明度0*/
    transition: all .3s;/*表示の変化を0.3秒に指定*/
}



/* ホバーで表示、かつ 3列×2行に整列する */
.gnavi__list:hover .dropdown__lists {
  pointer-events: auto;
  
    /* アニメーション */
    visibility: visible;/*Gナビメニューにホバーしたら表示*/
    opacity: 1;/*不透明度1*/
}

.dropdown__list {
    background-color: #0e2788;
    height: 60px;
    transition: all .3s;
    position: relative;
    display: flex;
    justify-content: center;
}

.dropdown__list:hover {
    height: 60px;
    background-color: #132d98;
}
.dropdown__list a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-decoration: none;
    position: relative;
}
.dropdown__list a::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(135deg);
    position: absolute;
    right: -20px;
    top: calc(50% - 5px);
}