/* c-btn: コンポーネントボタン（変数ベース） */
.c-btn {
  display: block;
  align-items: center;
  justify-content: center;
  max-width: var(--btn-max-width, 30.5rem); /* 305px */
  width: 100%;
  padding: var(--btn-padding, 2.3rem 2.8rem); /* 23px 28px */
  font-size: var(--btn-font-size, var(--font-base, 1.6rem));
  border: 1px solid var(--btn-border-color, #222);
  text-decoration: none;
  color: var(--btn-color, #222);
  letter-spacing: var(--btn-letter-spacing, 0.05em);
  transition: var(--transition-default, 0.3s);
  text-align: center;
  background: var(--btn-bg, #fff);
  font-family: var(--font-family-sans, inherit);
  font-weight: var(--btn-font-weight, var(--font-weight-medium, 500));
}
.c-btn--transparent {
  border: 1px solid var(--color-text);
  --btn-border-color: transparent;
  --btn-bg: transparent;
  &:hover {
    --btn-bg: var(--btn-color);
    --btn-color: #fff;
  }
}

.c-btn--pink {
  --btn-border-color: var(--color-secondary, #ed92a5);
  --btn-color: var(--color-secondary, #ed92a5);
  --btn-bg: #fff;
}
.c-btn--pink:hover {
  --btn-color: #fff;
  --btn-bg: var(--color-secondary, #ed92a5);
}

.c-btn--red {
  --btn-bg: var(--color-primary, #c00000);
  --btn-border-color: var(--color-primary, #c00000);
  --btn-color: #fff;
}
.c-btn--red:hover {
  --btn-bg: var(--color-secondary, #ed92a5);
  --btn-color: #fff;
}

.c-btn--center {
  margin: 0 auto;
}
.c-btn--right {
  margin-left: auto;
}
.c-btn--has-icon-left img {
  margin-right: var(--btn-icon-gap, 1rem);
  vertical-align: bottom;
  height: var(--btn-icon-size, 2.5rem);
  width: auto;
}
.c-btn--small {
  --btn-padding: 0.6rem 1.2rem;
  --btn-font-size: var(--font-xs, 1.2rem);
  width: fit-content;
}
.c-btn:hover {
  --btn-bg: #222;
  --btn-color: #fff;
}