/* =========================================================
   Nav underline (TOTT-like)
   - 既存の太い下線(border/box-shadow)を殺して
   - ::after で 1px の細いラインを生成
   - hover / current / focus-visible を統一
   ========================================================= */

/* ---- 調整用（必要ならここだけ触ればOK） ---- */
:root{
  --nav-underline-height: 1px;   /* ← 細さ：tott寄せ（1px推奨） */
  --nav-underline-gap: 6px;      /* 文字と下線の距離 */
  --nav-underline-speed: 220ms;  /* 出るスピード */
}

/* ---- 対象：TRX/Algenix/itactics系のメニュー（よくある構造） ---- */
/* PCヘッダーメニュー想定 */
.sc_layouts_menu a,
.sc_layouts_row a,
.top_panel a,
header a{
  text-decoration: none !important;
}

/* まず「太く見える原因」を潰す（border/box-shadow/text-decoration等） */
.sc_layouts_menu a,
.sc_layouts_row .sc_layouts_menu a,
.top_panel .sc_layouts_menu a,
header .sc_layouts_menu a{
  border-bottom: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
  text-decoration: none !important;
}

/* 下線を ::after で作る（初期は見えない） */
.sc_layouts_menu a{
  position: relative;
  display: inline-block;
}

.sc_layouts_menu a::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--nav-underline-gap));
  height: var(--nav-underline-height);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition:
    transform var(--nav-underline-speed) ease,
    opacity var(--nav-underline-speed) ease;
  background: currentColor; /* 文字色と同じ色の下線 */
  pointer-events: none;
}

/* hover / focus-visible で出す */
.sc_layouts_menu a:hover::after,
.sc_layouts_menu a:focus-visible::after{
  opacity: 1;
  transform: scaleX(1);
}

/* 現在地（current-menu-item 等）でも常時出す */
.sc_layouts_menu li.current-menu-item > a::after,
.sc_layouts_menu li.current_page_item > a::after,
.sc_layouts_menu li.current-menu-ancestor > a::after,
.sc_layouts_menu li.current_page_ancestor > a::after{
  opacity: 1;
  transform: scaleX(1);
}

/* モバイルメニューは別実装のことが多いので、必要なら薄く合わせる */
.menu_mobile a{
  border-bottom: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
  text-decoration: none !important;
}

/* モバイルで下線を出したい場合（好みでON/OFF）
   文字の下に細線を出したい時はコメントアウト解除してください */
.menu_mobile a{
  position: relative;
  display: inline-block;
}
.menu_mobile a::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--nav-underline-gap));
  height: var(--nav-underline-height);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition:
    transform var(--nav-underline-speed) ease,
    opacity var(--nav-underline-speed) ease;
  background: currentColor;
  pointer-events: none;
}
.menu_mobile a:hover::after,
.menu_mobile a:focus-visible::after{
  opacity: 1;
  transform: scaleX(1);
}