<nav class="step--type001">
  <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--type001{
  display:block;
  overflow-x:auto;
  ul {
    width:100%;
    min-width:50em;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align:center;
    li {
      display: inline-block;
      padding: 0.7em 1.5em 0.7em 0.5em;
      color: #FFF;
      background-color: #888;
      position: relative;
      overflow: hidden;
      margin: 0;
      &::before{
        content: '';
        display:block;
        width:1.3em;
        height:100%;
        position: absolute;
        top: 0;
        right: 0;
        background:#444;
      }
      &:first-child{
        padding-left: 1em;
        border-radius: 0.2em 0 0 0.2em;
      }
      &:nth-child(odd){
        background:#444;
        span:nth-child(1)::after{
          background:#444;
        }
        &::before{
          background:#888;
        }
      }
      &:last-child{
        border-radius: 0 0.2em 0.2em 0;
        padding-right: 1em;
        &::before{
          content: normal;
        }
        span:nth-child(1){
          &::before,&::after{
            content: normal;
          }
        }
      }
      a{
        color:#FFF;
      }
      span{
        &:nth-child(1){
          width:1.2em;
          height:1.2em;
          font-size:0.8em;
          background:#FFF;
          color:#000;
          border-radius:50%;
          line-height:1.2em;
          display:inline-block;
          &::before{
            content: '';
            display:block;
            width:1.5em;
            height:calc(100% + 0.4em);
            position: absolute;
            top: -0.2em;
            right: 0;
            aspect-ratio: cos(30deg);
            clip-path: polygon(0 0,100% 50%,0 100%);
            background:#FFF;
          }
          &::after{
            content: '';
            display:block;
            width:1.5em;
            height:calc(100% + 0.4em);
            position: absolute;
            top: -0.2em;
            right: 0.2em;
            aspect-ratio: cos(30deg);
            clip-path: polygon(0 0,100% 50%,0 100%);
            background:#888;
          }
        }
        &:nth-child(2){
          padding-left:0.5em;
        }
      }
    }
  }
}