.c-accent_button {
  /* button 共通パート .c_buttonで@extend or mixin化 */
  display: inline-block;
  padding: .8rem;
  font-weight: bold;
  font-size: .75rem;
  border-radius: var(--border-radius-lg);
  transition: .2s;
  /* button 共通パート end */
  color: #fff;
  background-color: var(--color-accent500);
}

.c-accent_button:hover {
  background-color: var(--color-accent600);
}

.c-accent_button.disabled {
  color: #d7dac8;
  background-color: #f5f6f1;
}

.c-primary_button {
  /* button 共通パート .c_buttonで@extend or mixin化 */
  display: inline-block;
  padding: .8rem;
  font-weight: bold;
  font-size: .75rem;
  border-radius: var(--border-radius-lg);
  transition: .2s;
  /* button 共通パート end */
  color: #47594e;
  background-color: var(--color-primary400);
}

.c-primary_button:hover {
  background-color: var(--color-primary500);
}

.c-primary_button:hover {
  background-color: var(--color-primary500);
}

.c-secondary_button {
  /* button 共通パート .c_buttonで@extend or mixin化 */
  display: inline-block;
  padding: .5rem;
  font-weight: bold;
  font-size: .75rem;
  border-radius: var(--border-radius-lg);
  transition: .2s;
  /* button 共通パート end */
  color: #47594e;
  background-color: var(--color-primary400);
}

.c-secondary_button:hover {
  background-color: var(--color-background-normal);
}

.bg-light .c-secondary_button {
  background-color: var(--color-primary400);
}

.bg-normal .c-secondary_button,
.bg-dark .c-secondary_button {
  background-color: var(--color-background-light);
}

.bg-light .c-secondary_button:hover {
  background-color: var(--color-primary500);
}

.c-twitter_button {
  /* button 共通パート .c_buttonで@extend or mixin化 */
  display: inline-block;
  padding: .4rem;
  font-weight: bold;
  font-size: .75rem;
  border-radius: var(--border-radius-lg);
  transition: .2s;
  /* button 共通パート end */
  color: #fff;
  background-color: var(--color-text-normal);
}