<nav class="step--type002">
  <ul>
    <li><span>1</span><span>手順のタイトル</span></li>
    <li><span>2</span><span>手順のタイトル</span></li>
    <li><span>3</span><span>手順のタイトル</span></li>
    <li><span>4</span><span>手順のタイトル</span></li>
    <li><span>5</span><span>手順のタイトル</span></li>
  </ul>
</nav>
              

.step--type002{
  display:block;
  overflow-x:auto;
  ul {
    display:block;
    text-align:center;
    li {
      display: inline-block;
      padding: 0.7em 0 0.7em 2em;
      color: #000;
      background-image: linear-gradient(to right, #ffffff, #EEE);
      position: relative;
      margin: 0;
      &::before{
        content: '';
        display:block;
        width:1.5em;
        height:100%;
        position: absolute;
        top:0;
        right: -1.5em;
        aspect-ratio: cos(30deg);
        clip-path: polygon(0 0,100% 50%,0 100%);
        background:#EEE;
        z-index: 1;
      }
      &:first-child{
        padding-left: 1em;
        border-radius: 0.2em 0 0 0.2em;
      }
      &:last-child{
        border-radius: 0 0.2em 0.2em 0;
        padding-right: 1em;
        &::before{
          content: normal;
        }
      }
      a{
        color:#000;
      }
      span{
        &:nth-child(1){
          width:1.2em;
          height:1.2em;
          font-size:0.8em;
          background:#000;
          color:#FFF;
          border-radius:50%;
          line-height:1.2em;
          display:inline-block;
        }
        &:nth-child(2){
          padding-left:0.5em;
        }
      }
    }
  }
}