.button {
  display: inline-block;
  border: 0;
  outline: 0;
  -webkit-appearance: none !important;
  vertical-align: middle;
  transition: background 0.07s linear;
}

.button:disabled {
  pointer-events: none;
  user-select: none;
  opacity: 0.5;
}

.button.blue {
  color: #fff;
  background: var(--colorBlue);
}

.button.blue:hover {
  background: var(--colorDarkBlue);
}
.button.blue:active {
  background: var(--colorDarkBlue02);
}

.button.red {
  color: #fff;
  background: var(--colorRed);
}

.button.red:hover {
  background: var(--colorDarkRed);
}

.button.red:active {
  background: var(--colorDarkRed02);
}

.button.gray {
  color: #000;
  background: var(--colorGrayA01);
}

.button.gray:hover {
  background: var(--colorGrayA02);
}

.button.gray:active {
  background: var(--colorGrayA03);
}

.button.l {
  height: 40px;
  line-height: 40px;
}
.button.m {
  height: 32px;
  line-height: 32px;
}
.button.s {
  height: 24px;
  line-height: 24px;
}