/**
 * PC用カテゴリーナビゲーション
 * XwriteのPCヘッダー切り替え幅（992px）に合わせる。
 */
.xw-category-navigation {
  display: none;
}

@media (min-width: 992px) {
  body.has-xw-category-navigation {
    --xw-category-nav-height: 62px;
    --xw-category-nav-background: #101126;
    --xw-category-nav-text-color: #d9dbe7;
    --xw-category-nav-active-color: #5da9e9;
    --xw-category-nav-font-size: 18px;
    --xw-category-nav-font-weight: 700;
    --xw-category-nav-item-min-width: 160px;
    --xw-category-nav-horizontal-padding: 40px;
    --xw-category-nav-item-gap: 8px;
    --xw-category-nav-indicator-height: 4px;
    --xw-category-nav-indicator-width: 60%;
  }

  .xw-category-navigation {
    display: block;
    position: absolute;
    z-index: 2;
    top: 100%;
    left: 50%;
    width: calc(100vw - var(--scrollbar-width, 0px));
    height: var(--xw-category-nav-height);
    transform: translateX(-50%);
    background-color: var(--xw-category-nav-background);
  }

  body.has-xw-category-navigation .header {
    margin-bottom: var(--xw-category-nav-height);
  }

  .xw-category-navigation__list {
    display: flex;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--xw-category-nav-horizontal-padding);
    overflow-x: auto;
    list-style: none;
  }

  .xw-category-navigation__item {
    flex: 1 0 var(--xw-category-nav-item-min-width);
    height: 100%;
  }

  .xw-category-navigation__link {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    gap: var(--xw-category-nav-item-gap);
    height: 100%;
    padding: 0 12px;
    color: var(--xw-category-nav-text-color) !important;
    font-size: var(--xw-category-nav-font-size);
    font-weight: var(--xw-category-nav-font-weight);
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
  }

  .xw-category-navigation__link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: var(--xw-category-nav-indicator-width);
    height: var(--xw-category-nav-indicator-height);
    margin: auto;
    background-color: transparent;
  }

  .xw-category-navigation__link:hover,
  .xw-category-navigation__link:focus-visible,
  .xw-category-navigation__item.is-current .xw-category-navigation__link {
    color: var(--xw-category-nav-active-color) !important;
    opacity: 1;
  }

  .xw-category-navigation__item.is-current .xw-category-navigation__link::after {
    background-color: var(--xw-category-nav-active-color);
  }

  .xw-category-navigation__icon {
    flex: 0 0 auto;
    width: 1em;
    font-size: 1em;
    text-align: center;
  }
}