/* =========================================================
   グローバルナビ（ホバーで開くメガメニュー）
   参考: white-link.com のグローバルナビ
   ========================================================= */

.gnav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.gnav__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 72px;
  /* キャレット（6px）＋余白（6px）分を相殺し、ラベル同士の間隔を全項目で揃える */
  margin-right: -12px;
}

.gnav .gnav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 72px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  color: #fff !important;
  opacity: 0.85;
  cursor: pointer;
  text-decoration: none !important;
  transition: opacity 0.2s;
}

.gnav .gnav__link:hover,
.gnav__item:hover .gnav__link,
.gnav__item:focus-within .gnav__link {
  opacity: 1;
}

.gnav__caret {
  display: block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  -webkit-transform: translateY(-2px) rotate(45deg);
          transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s;
}

.gnav__item:hover .gnav__caret,
.gnav__item:focus-within .gnav__caret {
  -webkit-transform: translateY(1px) rotate(-135deg);
          transform: translateY(1px) rotate(-135deg);
}

/* ---- パネル ---- */
.gnav__panel {
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  z-index: 300;
  background: rgba(25, 25, 25, 0.98);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(-10px);
          transform: translateY(-10px);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

.gnav__item:hover .gnav__panel,
.gnav__item:focus-within .gnav__panel {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.gnav__panel-inner {
  display: flex;
  gap: 40px;
  max-width: 1220px;
  margin: 0 auto;
  padding: 34px 40px 38px;
}

.gnav__panel-head {
  width: 190px;
  flex-shrink: 0;
}

.gnav__panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
}

.gnav__dot {
  display: block;
  width: 10px;
  height: 10px;
  background: #D70C18;
}

.gnav .gnav__overview {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 150px;
  padding: 11px 16px;
  background: #D70C18;
  color: #fff !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 1;
  transition: box-shadow 0.2s, transform 0.2s;
}

.gnav .gnav__overview::after {
  content: "";
  display: block;
  width: 16px;
  height: 1px;
  background: #fff;
  position: relative;
}

.gnav .gnav__overview:hover {
  box-shadow: 3px 3px 0 #fff;
  -webkit-transform: translate(-1px, -1px);
          transform: translate(-1px, -1px);
}

/* ---- カード ---- */
.gnav__panel-body {
  flex: 1;
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
  padding: 20px;
  background: #fff;
  border-radius: 4px;
}

.gnav__panel-body[data-cols="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gnav .gnav__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 14px;
  background: #F3F3F3;
  color: #111 !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  opacity: 1;
  text-decoration: none !important;
  transition: background 0.2s, color 0.2s;
}

.gnav .gnav__card:hover {
  background: #D70C18;
  color: #fff !important;
}

.gnav__card-text {
  flex: 1;
}

.gnav__card-arrow {
  display: block;
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

@media (max-width: 1180px) {
  .gnav {
    gap: 18px;
  }
  .gnav__panel-inner {
    padding: 28px 24px 32px;
    gap: 28px;
  }
  .gnav__panel-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- モバイル ---- */
.mnav-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mnav-head {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #D70C18;
}

.mobile-nav nav .mnav-group a {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 640px) {
  .gnav__panel {
    display: none;
  }
  .mobile-nav nav {
    gap: 20px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 24px 0;
  }
}

/* ページ未作成の事業（リンクなし）。トップのSERVICE欄と同じく名前だけを出し、ホバーで色を変えない */
.gnav .gnav__card--plain { cursor: default; }
.gnav .gnav__card--plain:hover { background: #F3F3F3; color: #111 !important; }
.mobile-nav nav .mnav-plain { font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, 0.55); }

/* B2B支援: 検討段階ごとの3列（2026-11-06） */
.gnav__panel-body.gnav__panel-body--stages {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 20px;
}
/* 見出しの行を3列で共有し、1列だけ折り返しても赤線の高さを揃える */
.gnav__stage {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  min-width: 0;
}
.gnav__stage-title {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #D70C18;
  color: #111;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  text-wrap: balance;
}
.gnav__stage-no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: #D70C18;
  color: #fff;
  font-size: 11px;
  line-height: 1;
}
.gnav__stage-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mobile-nav nav .mnav-sub {
  margin: 6px 0 0;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}