:root {
  --color-primary: #3182ce;
  --color-secondary: #eff4ff;
  --color-accent: #4f4e69;
  --color-background: #fafafb;
  --color-underline-textbox: #ccd1d9;
  --color-mc: #030229;
}

button.primary {
  background: var(--color-primary);
  color: #ffffff;
}

/* @@@@@@@inputの下線アクション用@@@@@@@ */

.cp_iptxt {
  position: relative;
  width: 100%;
  /* margin: 20px 0; */
  /* adjust */
  display: flex;
  justify-content: center;
}

.cp_iptxt .ef {
  width: 100%;
}

.cp_iptxt .ef ~ .focus_line {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 3px;
  transition: 0.3s;
  /* background-color: #da3c41; */
  background-color: var(--color-primary);
}

.cp_iptxt input[type="text"]:focus {
  outline: none;
}

.cp_iptxt input[type="number"]:focus {
  outline: none;
}

.cp_iptxt .ef:focus ~ .focus_line {
  left: 0;
  width: 100%;
  transition: 0.3s;
}

/* @@@@@@@@@@@@@@ */