/* 親（ヘッダー）を基準にする */
.header { position: fixed; }

/* グロナビ */
.header-navi02 {
  display: flex;
  gap: 24px;
  align-items: center;
}

/* トリガーをリンクっぽく見せたい場合 */
.gnav__trigger {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* li側で「メガ持ち」を識別 */
.header-navi02 .has-mega { position: static; } 
/* ↑ important: position:static にしておくと、メガを幅100%で出しやすい */

/* メガメニュー本体（閉じてる時は hidden で非表示） */
.gnav-sub {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  z-index: 1000;

  /* アニメしたい場合の準備 */
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

/* 開いた状態（JSで .is-open 付与） */
.gnav-sub.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* 中身の枠 */
.gnav-sub__inner {
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  width: fit-content;
}

/* 任意：中身の最大幅（サイトのcontainer幅に合わせる） */
.gnav-sub__body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 10px;
}

.gnav-sub__list {
}

.gnav-sub__item a {
  display: block;
  padding: 5px 40px 5px 20px;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}

.gnav-sub__item a::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border: 0px;
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    transition: all 0.3s;
}



/* hover見た目 */
.gnav-sub__item a:hover {
  background: rgba(0,0,0,.05);
}

/* SPはドロップダウン（アコーディオン）にする例 */
@media (max-width: 767px) {
  .header-navi02 { display: none; }

  .gnav-sub {
    position: static;
    width: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: none;
  }

  .gnav-sub__list {
    grid-template-columns: 1fr;
  }

  /* SPでは hidden を使って開閉する（JS側） */
}