@mixin navi-horizontal ($item-width: 200px, $scroll-height: auto, $item-margin: 10px){
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;

  &__scroll {
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    height: $scroll-height;

    &__list {
      display: inline-table;
      overflow-x: auto;
      margin: 0 - $item-margin;
      padding: 0;
      border-collapse: separate;
      border-spacing: $item-margin 0;

      &div, article, li {
        display: table-cell;
        min-width: $item-width;
        @content;
      }
    }
  }
}

%navi-item {
  background-color: #336699;
  margin-right: 10px;
  img {
    border: 1px solid red;
  }
}

.navi-item {
  background: #e7e7e7;
  &__title {
    font-weight: bold;
  }
  img{
    border: 1px solid blue;
  }
}

.navi-horizontal2 {
  @include navi-horizontal($item-width: 200px, $scroll-height: 200px, $item-margin: 10px){
    @extend %navi-item;
  };
}

.navi-horizontal {
  @include navi-horizontal(150px, 100px){
    margin-right: 10px;
    border: 1px solid red;
  };
}