@charset "UTF-8";
/*
Template: arkhe
Theme Name: Arkhe Child
Theme URI: https://arkhe-theme.com/ja/
Description: Arkhe用子テーマ
Version: 1.0.0
Text Domain: arkhe
License: GNU General Public License
License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =========================
   Global Nav 変数版
   ========================= */
.l-header{
  /* アニメ速度＆イージング（ここを変えれば全体に反映） */
  --gnav-underline-dur: .40s;
  --gnav-underline-ease: ease;

  /* 色（背景#00001c想定） */
  --gnav-text: #fff;
  --gnav-hover-bg: rgba(255,255,255,.32);
  --gnav-active-bg: rgba(255,255,255,.18);
  --gnav-ring: rgba(255,255,255,.45);

  /* 下線色 */
  --gnav-underline-active: #dcdcdc; /* 現在ページ */
  --gnav-underline-hover:  #8fb0ff; /* ホバー */

  /* 下線の太さ */
  --gnav-underline-h: 2px;          /* 通常/ホバー */
  --gnav-underline-h-active: 2px;   /* 現在ページ */
}

/* ベース：白文字 */
.l-header .c-gnav__li > a{
  color: var(--gnav-text);
  position: relative;
}

/* ① 初期：下線は非表示（アニメの起点）※先に定義 */
.l-header .c-gnav__li > a::after{
  content:"";
  position:absolute;
  left:12px; right:12px; bottom:8px;
  height: var(--gnav-underline-h);
  background: transparent;
  transform: scaleX(.4);
  transform-origin: center; /* 左から伸ばすなら left に変更 */
  transition:
    transform        var(--gnav-underline-dur) var(--gnav-underline-ease),
    background-color var(--gnav-underline-dur) var(--gnav-underline-ease);
}

/* ② 現在ページ（常時強調） */
.l-header .c-gnav__li.-current > a,
.l-header .c-gnav__li.current-menu-item > a,
.l-header .c-gnav__li.current_page_item > a,
.l-header .c-gnav__li > a[aria-current="page"]{
  background: var(--gnav-active-bg);
}
.l-header .c-gnav__li.-current > a::after,
.l-header .c-gnav__li.current-menu-item > a::after,
.l-header .c-gnav__li.current_page_item > a::after,
.l-header .c-gnav__li > a[aria-current="page"]::after{
  height: var(--gnav-underline-h-active);
  background: var(--gnav-underline-active);
  transform: scaleX(1);
}

/* ③ ホバー（現在ページ以外） */
.l-header .c-gnav__li:not(.-current):not(.current-menu-item):not(.current_page_item):hover > a,
.l-header .c-gnav__li:not(.-current):not(.current-menu-item):not(.current_page_item) > a:focus-visible{
  background: var(--gnav-hover-bg);
  box-shadow: inset 0 0 0 1px var(--gnav-ring);
}
.l-header .c-gnav__li:not(.-current):not(.current-menu-item):not(.current_page_item):hover > a::after,
.l-header .c-gnav__li:not(.-current):not(.current-menu-item):not(.current_page_item) > a:focus-visible::after{
  background: var(--gnav-underline-hover);
  transform: scaleX(1);
}