.breadcrumb *, .breadcrumb *:after, .breadcrumb *:before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.breadcrumb {
  overflow:           hidden;
  width:              100%;
  margin:             0px auto 10px auto;
  padding:            0;
  list-style:         none;
  background-color:   #888888; /* 全体色 */
}
.breadcrumb li {
  display:            inline-block;
  padding:            0;
  margin:             0 0 0 0;
}
.breadcrumb span {
  position:           relative;
  display:            inline-block;
  margin:             0;
  padding:            0.3em 1em 0.3em 2em;
  text-decoration:    none;
  color:              #ffffff;
  background-color:   #333333; /* １つ目 */
}
.breadcrumb li:first-child span {
  padding-left:       1em;
  border-radius:      5px 0 0 5px;
}
.breadcrumb span::after,
.breadcrumb span::before {
  position:           absolute;
  top:                50%;
  right:              -1.5em;
  margin-top:         -1.48em;
  content:            '';
  border-top:         1.48em solid transparent;
  border-bottom:      1.48em solid transparent;
  border-left:        1.5em solid;
  }
.breadcrumb span::after {
  z-index:            2;
  border-left-color:  #333333; /* １つ目 */
}
.breadcrumb span::before {
  z-index:            1;
  right:              -1.8em;
  border-left-color:  #ffffff;
}
.breadcrumb li:nth-child(2) span       { background:        #444444; } /* ２つ目 */
.breadcrumb li:nth-child(2) span:after { border-left-color: #444444; } /* ２つ目 */
.breadcrumb li:nth-child(3) span       { background:        #555555; } /* ３つ目 */
.breadcrumb li:nth-child(3) span:after { border-left-color: #555555; } /* ３つ目 */
.breadcrumb li:nth-child(4) span       { background:        #666666; } /* ４つ目 */
.breadcrumb li:nth-child(4) span:after { border-left-color: #666666; } /* ４つ目 */
.breadcrumb li:nth-child(5) span       { background:        #777777; } /* ５つ目 */
.breadcrumb li:nth-child(5) span:after { border-left-color: #777777; } /* ５つ目 */