@charset "UTF-8";
/* =========================================================
   グループ企業ドロップダウン
   ---------------------------------------------------------
   ヘッダーの「グループ企業」にホバーすると、PGグループの
   姉妹サイト（Play Ground / PG Asset）へのリンクをパネルで表示する。

   mega-menu.css と同じ理由で独立ファイルにしている。
   common.css/.scss には手を入れない（乖離を広げないため）。
   無効化したい場合は header.php の link 行を1行消すだけでよい。

   SPではホバーが使えないため、mega-menu.css（SERVICE）とは異なり
   非表示にはせず、常時展開のリンクリストとして表示する
   （「グループ企業」自体はページ内アンカーを持たない項目のため、
   タップしても意味のある遷移先が無く、スクロール動作の代替が無いため）。
   ========================================================= */

/* チェックボックスは全幅で非表示にする（2026-09-08 修正）。
   SPアコーディオン用に header.php へ追加した .nav-group-checkbox を、
   従来は下部の @media (max-width:768px) の中でしか隠しておらず、
   PC幅では素のチェックボックスが3個（PRODUCT/SERVICE/GROUP）表示されていた。
   メディアクエリの外に出して全幅で非表示にする。
   PCのパネル開閉は :hover で制御しており :checked に依存しないため、
   pointer-events:none にしても挙動は変わらない。 */
.nav-group-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
  overflow: hidden;
}

.gnav > ul > li.has-group { position: relative; }

.gnav > ul > li.has-group > .nav-group-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-secondary);
  padding: 10px 0;
  cursor: default;
}

.nav-group-panel {
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-out, visibility 0.3s;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
  padding: 18px 20px;
  text-align: left;
  border-radius: 8px;
}

.gnav > ul > li.has-group:hover .nav-group-panel {
  opacity: 1;
  visibility: visible;
}

/* ロゴ下からパネルまでの縦のすき間でホバーが外れて閉じるのを防ぐ橋 */
.gnav > ul > li.has-group:hover > .nav-group-toggle::after {
  content: '';
  position: absolute;
  left: -20px;
  right: -20px;
  top: 100%;
  height: 40px;
}

.nav-group-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin: 0 0 10px;
  line-height: 1;
}

.nav-group-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-group-list > li { padding: 0; }
.nav-group-list > li + li { margin-top: 10px; }

.nav-group-list > li > a {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-secondary);
  text-decoration: none;
  white-space: nowrap;
}

.nav-group-list > li > a:hover { color: var(--color-primary); }

/* SP: 常時展開はやめてアコーディオン化（2026-09-07）。
   ABOUT/PRODUCT(+2)/SERVICE(+5)/GROUP(+2)/COMPANY/CONTACT/BLOG が
   すべて常時展開だと、メニューを開いたときに1画面に収まらず
   スクロールが必要になっていた。header.php側で各.has-group liの先頭に
   チェックボックス（.nav-group-checkbox）を追加し、.nav-group-toggleを
   spanからlabelに変更済み。ここではデフォルトで閉じておき、
   タップ（チェックON）で展開する。ハンバーガー本体と同じ
   チェックボックス・トリックで、JS不要。 */
@media screen and (max-width: 768px) {
  .nav-group-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .gnav > ul > li.has-group > .nav-group-toggle {
    position: relative;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-secondary);
    border-bottom: 1px solid var(--color-primary);
    padding: 1em 1em;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    height: inherit;
    cursor: pointer;
  }

  .gnav > ul > li.has-group > .nav-group-toggle::after {
    content: '';
    position: absolute;
    right: 1.2em;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-secondary);
    border-bottom: 2px solid var(--color-secondary);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.25s ease-out;
  }

  .nav-group-checkbox:checked ~ .nav-group-toggle::after {
    transform: translateY(-30%) rotate(-135deg);
  }

  .nav-group-panel {
    position: static;
    opacity: 1;
    visibility: visible;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: 0;
    padding: 0 1em 0 2em;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
  }

  .nav-group-checkbox:checked ~ .nav-group-panel {
    max-height: 400px;
    padding: 0.5em 1em 1em 2em;
  }

  .nav-group-label { display: none; }

  .nav-group-list > li > a {
    font-size: 0.95rem;
    color: var(--color-secondary);
    padding: 0.6em 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-group-panel { transition: none; }
}