<nav class="contentNavi--type011">
  <ul>
    <li class="--isActive"><a href="#">コンテンツメニュー名</a></li>
    <li><a href="#">コンテンツメニュー名</a></li>
    <li><a href="#">コンテンツメニュー名</a></li>
    <li><a href="#">コンテンツメニュー名</a></li>
  </ul>
</nav>
                

.contentNavi--type009{
  display:block;
  >ul{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:0 0.3em;
    >li{
      display:block;
      position:relative;
      z-index: 1;
      margin-bottom:0.3em;
      &::before{
        content:"";
        display:block;
        width:100vw;
        height:1px;
        background:#BBB;
        position:absolute;
        bottom:-1px;
        left:50%;
        margin-left:-50vw;
      }
      &.--isActive{
        a{
          background:#666;
          color:#FFF;
          pointer-events:none;
        }
      }
      a{
        text-align:center;
        display:block;
        position:relative;
        color:#000;
        padding:0.6em 1em 0.4em 2em;
        line-height:1.5;
        background:#DDD;
        border-bottom:none;
        border-radius:0.3em 0.3em 0 0;
        &::before{
          content: " ";
          width: 0.8em;
          height: 0.8em;
          background:#FFF;
          border-radius: 0.1em;
          position: absolute;
          top: 50%;
          left: 0.7em;
          margin-top:-0.4em;
          transition:bottom 0.5s;
        }
        &::after{
          content: " ";
          width: 0.4em;
          height: 0.3em;
          clip-path: polygon(50% 100%,100% 0,0 0);
          background:#666;
          position: absolute;
          top: 50%;
          left: 0.9em;
          margin-top:-0.15em;
          transition:bottom 0.5s;
        }
        &:hover{
          background:#AAA;
          color:#000;
        }
      }
    }
  }
}