グローバルナビメニューをタブ切り替え風に表示する方法

表1に示す項目を設定をします。

以下のコードをstyle.cssに追加します。

:root {
  --navi-height: 60px;
}

.cl-slim {
  --navi-height: 40px;
}

.navi-in {
  > ul .caption-wrap {
    align-content: unset;
  }

  a {
    border-bottom: var(--navi-height) solid #eee;
    border-left: 10px solid transparent;
    border-radius: 20px 20px 0 0 / 40px 40px 0 0;
    border-right: 10px solid transparent;
    height: 0;
    width: 100%;
  }

  .current_page_item a {
    border-bottom-color: #c0c0c0;
    pointer-events: none;
    z-index: 1;
  }

  ul li {
    &:nth-child(2) {
      left: -5px;
    }

    &:nth-child(3) {
      left: -10px;
    }

    &:nth-child(4) {
      left: -15px;
    }
  }
}