<nav class="contentNavi--type012">
  <dl>
    <dt>コンテンツタイトル</dt>
    <dd><a href="#">コンテンツメニュー名</a></dd>
    <dd><a href="#">コンテンツメニュー名</a></dd>
    <dd><a href="#">コンテンツメニュー名</a></dd>
    <dd><a href="#">コンテンツメニュー名</a></dd>
  </dl>
  <dl>
    <dt>コンテンツタイトル</dt>
    <dd><a href="#">コンテンツメニュー名</a></dd>
    <dd><a href="#">コンテンツメニュー名</a></dd>
    <dd><a href="#">コンテンツメニュー名</a></dd>
  </dl>
</nav>
                

.contentNavi--type012{
  display:block;
  >dl{
    width:100%;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:0 0.5em;
    margin-bottom:1em;
    >dt{
      width:100%;
      display:block;
      padding:0.4em 1em 0.4em 1em;
      line-height:1.5;
      background:#DDD;
      margin-bottom:0.5em;
      a:hover{
        color:#666;
      }
    }
    >dd{
      width:calc(50% - 0.5em);
      display:block;
      z-index: 1;
      margin-bottom:0.5em;
      a{
        display:block;
        position:relative;
        line-height:1.5;
        border-bottom:1px solid #DDD;
        padding:0.4em 1em 0.4em 2em;
        &::before{
          content: " ";
          width: 0.8em;
          height: 0.8em;
          border-radius:50%;
          background:#DDD;
          position: absolute;
          top: 50%;
          left: 0.45em;
          margin-top:-0.4em;
          transition:margin-top 0.5s;
        }
        &::after{
          content: " ";
          width: 0.3em;
          height: 0.3em;
          clip-path: polygon(50% 100%,100% 0,0 0);
          background:#666;
          position: absolute;
          top: 50%;
          left: 0.7em;
          margin-top:-0.15em;
          transition:margin-top 0.5s;
        }
        &:hover{
          color:#000;
          border-bottom:1px solid #000;
          &::before{
            margin-top:-0.2em;
          }
          &::after{
            margin-top:0.05em;
          }
        }
      }
    }
  }
}
@media print, screen and (min-width: 768px) {
  .contentNavi--type012>dl{
    position:relative;
    padding-left:calc(27% + 1em);
    gap:0 1em;
    >dt{
      width:27%;
      text-align:right;
      position:absolute;
      top:0;
      left:0;
      z-index: 1;
    }
    >dd{
      width:calc(33.3% - 1em);
    }
  }
}