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

.contentNavi--type002{
  display:block;
  >ul{
    width:100%;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:0 1em;
    position:relative;
    z-index: 1;
    padding:0 0 0.5em;
    &::before{
      content:"";
      display:block;
      width:100%;
      height:100%;
      background:#EEE;
      position:absolute;
      top:0;
      left:0;
      z-index: -1;
    }
    >li{
      width:calc(50% - 0.5em);
      a{
        display:block;
        position:relative;
        color:#000;
        padding:1em 1em 0.5em 2.5em;
        line-height:1.5;
        &::before{
          content:"";
          display:block;
          width:0.6em;
          height:0.6em;
          border-right:0.1em solid #000;
          border-bottom:0.1em solid #000;
          transform:rotate(45deg);
          position:absolute;
          top:calc(50% - 0.2em);
          left:1em;
          transition:top 0.3s ease;
        }
        &::after{
          content:"";
          display:block;
          width:100%;
          height:0.2em;
          background:#000;
          position:absolute;
          top:0;
          left:0;
          transition:width 0.3s ease;
        }
        &:hover{
          color:#666;
          &::before{
            top:50%;
          }
          &::after{
            width:0;
          }
        }
      }
    }
  }
}
@media print, screen and (min-width: 768px) {
  .contentNavi--type002>ul>li{
    width: calc(25% - 1em);
  }
}