// ===========================================
// List リスト
// ===========================================

/* list style リストスタイル
--------------------------------- */
.com-list-01 {
  li {
    margin-left: 1.2em;
    &::before {
      content: '・';
      display: inline-block;
      width: 1.2em;
      margin-left: -1.2em;
    }
    + li {
      margin-top: 0.2em;
    }
  }
  $makers: (
    notice: '※',
    circle: '●',
    square: '■',
  );
  @each $name, $mark in $makers {
    &.#{$name} {
      li {
        &::before {
          content: '#{$mark}';
        }
      }
    }
  }
}

.com-list-02 {
  counter-reset: item;
  list-style-type: none;
  padding-left: 0;
  li {
    margin-left: 1.8em;
    + li {
      margin-top: 0.2em;
    }
    &::before {
      counter-increment: item;
      content: counter(item) '.';
      display: inline-block;
      width: 1.5em;
      padding-right: 0.3em;
      margin-left: -1.8em;
      text-align: right;
    }
  }
}

.com-list-03 {
  counter-reset: item;
  list-style-type: none;
  padding-left: 0;
  li {
    margin-left: 2.3em;
    + li {
      margin-top: 0.4em;
    }
    &::before {
      counter-increment: item;
      content: '※' counter(item);
      display: inline-block;
      width: 2.3em;
      margin-left: -2.3em;
    }
  }
}