:root {
  --common-button-text-size: 26px;
  --common-button-padding-y: 16px;
  --common-action-padding-x: 22px;
}

.common-text-button,
.common-action-button {
  position: relative;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  box-sizing: border-box;
  background: transparent;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  font-family: "Kiwi Maru", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  font-size: var(--common-button-text-size);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  cursor: pointer;
}

.common-button-shape {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  overflow: visible;
  pointer-events: none;
}

.common-button-shape-shadow {
  fill: var(--common-button-shadow-color);
}

.common-button-shape-main {
  fill: var(--common-button-fill);
  stroke: var(--common-button-border-color, none);
  stroke-width: var(--common-button-border-width, 0);
}

.common-button-shape-disabled-mask {
  fill: rgb(var(--common-button-disabled-overlay-color) / var(--common-button-disabled-overlay-opacity));
  opacity: 0;
}

.is-common-disabled {
  cursor: default;
}

.common-text-button.is-common-disabled .common-button-shape-disabled-mask {
  opacity: 1;
}

.common-action-button.is-common-disabled .common-button-shape-disabled-mask {
  opacity: 0;
}

.common-text-button.is-common-disabled .common-button-shape-shadow,
.common-action-button.is-common-disabled .common-button-shape-shadow {
  opacity: 0;
}

.common-button-label {
  position: relative;
  z-index: 1;
  display: inline-block;
  white-space: nowrap;
  text-align: center;
  transform-origin: center center;
}

.common-text-button {
  width: 100%;
  padding: var(--common-button-padding-y) 30px;
  color: rgb(var(--common-button-text-color));
  --common-button-fill: rgb(var(--common-button-text-background));
  --common-button-border-color: rgb(var(--common-button-text-shadow));
  --common-button-border-width: 2;
  --common-button-shadow-color: rgb(var(--common-button-text-shadow));
  --common-button-shadow-y: 3;
  --common-button-corner-radius: 16;
}

.common-text-button.is-common-disabled {
  color: rgb(var(--common-button-text-disabled-color));
  --common-button-fill: rgb(var(--common-button-text-disabled-background));
}

.common-text-button.is-selection-selected {
  --common-button-fill: rgb(var(--common-button-normal-background));
  --common-button-border-color: rgb(var(--common-button-selected-border));
  --common-button-border-width: 4;
  --common-button-shadow-y: 0;
}

.common-text-button.is-selection-selected .common-button-shape-shadow {
  opacity: 0;
}

.common-action-button {
  min-width: 120px;
  padding: var(--common-button-padding-y) var(--common-action-padding-x);
  --common-button-border-width: 0;
  --common-button-shadow-y: 4;
  --common-button-corner-radius: 26;
}

.common-action-button.normal {
  color: rgb(var(--common-button-normal-color));
  --common-button-fill: rgb(var(--common-button-normal-background));
  --common-button-shadow-color: rgb(var(--common-button-normal-shadow));
}

.common-action-button.normal.is-common-disabled {
  color: rgb(var(--common-button-normal-disabled-color));
  --common-button-fill: rgb(var(--common-button-normal-disabled-background));
}

.common-action-button.special {
  color: rgb(var(--common-button-special-color));
  --common-button-fill: rgb(var(--common-button-special-background));
  --common-button-shadow-color: rgb(var(--common-button-special-shadow));
}

.common-action-button.special.is-common-disabled {
  color: rgb(var(--common-button-special-disabled-color));
  --common-button-fill: rgb(var(--common-button-special-disabled-background));
}

.common-text-button:not(:disabled):active,
.common-action-button:not(:disabled):active {
  transform: translateY(3px) scale(0.98);
  box-shadow: none;
}

.common-text-button:not(:disabled):active .common-button-shape-shadow {
  transform: translateY(-2px);
}

.common-action-button:not(:disabled):active .common-button-shape-shadow {
  transform: translateY(-3px);
}