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

.contentNavi--type005{
  display:block;
  >ul{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:0 1em;
    position:relative;
    z-index: 1;
    padding:0.5em 0;
    >li{
      width:calc(50% - 0.5em);
      margin-bottom:0.3em;
      display:block;
      a{
        display:block;
        text-align:center;
        position:relative;
        color:#000;
        padding:0.5em 1em 2.5em 1em;
        line-height:1.5;
        &::before{
          content: " ";
          width: 1.5em;
          height: 1.5em;
          border: 1px solid;
          border-color:  transparent transparent #000 #000;
          transform: rotate(-45deg);
          position: absolute;
          bottom: 1em;
          left: 50%;
          margin-left:-0.75em;
          transition:bottom 0.5s;
        }
        &:hover{
          color:#666;
          &::before{
            bottom: 0;
          }
        }
      }
    }
  }
}
@media print, screen and (min-width: 768px) {
  .contentNavi--type005>ul{
    >li{
      width:auto;
      a{
        &::before{
          width: 3em;
          height: 3em;
          bottom: 0.3em;
          margin-left:-1.5em;
        }
      }
    }
  }
}