<nav class="contentNavi--type010">
  <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--type010{
  display:block;
  >ul{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:0 1px;
    >li{
      width:calc(50% - 0.5px);
      display:block;
      position:relative;
      z-index: 1;
      margin-bottom:1px;
      &:first-child a{
        border-radius:0.3em 0 0 0;
      }
      &:nth-child(2) a{
        border-radius:0 0.3em 0 0;
      }
      &:last-child a{
        border-radius:0 0 0.3em 0;
      }
      &:nth-last-child(2) a{
        border-radius:0 0 0 0.3em;
      }
      a{
        display:block;
        position:relative;
        color:#000;
        padding:0.6em 2em 0.4em 1em;
        line-height:1.5;
        background:#DDD;
        &::before{
          content: " ";
          width: 0.6em;
          height: 0.3em;
          clip-path: polygon(50% 100%,100% 0,0 0);
          background:#666;
          position: absolute;
          top: calc(50% + 0.2em);
          right: 0.7em;
          transition:top 0.5s;
        }
        &:hover{
          background:#AAA;
          color:#000;
          &::before{
            top: calc(50% + 0.4em);
          }
        }
      }
    }
  }
}
@media print, screen and (min-width: 768px) {
  .contentNavi--type010>ul{
		flex-wrap:nowrap;
    >li{
      width:auto;
      &:first-child a{
        border-radius:0.3em 0 0 0.3em;
      }
      &:nth-child(2) a{
        border-radius:0;
      }
      &:last-child a{
        border-radius:0 0.3em 0.3em 0;
      }
      &:nth-last-child(2) a{
        border-radius:0;
      }
    }
  }
}