svg {
  fill: var(--TEXT) !important;
}

label.TextBox {
  margin-top: 8px;
  display: flex;
  border: var(--BORDER_NORMAL_WIDTH) solid var(--ACCENT_SECONDARY);
  padding: 8px;
  border-radius: var(--BORDER_RADIUS_SMALL);
  transition: all 0.2s ease;
}
span.TextBox_label {
  position: absolute;
  color: var(--TEXT_LOW);
  transition: all 0.2s ease;
}
input.TextBox,
input.TextBox:-webkit-autofill {
  caret-color: var(--ACCENT_PRIMARY);
  border: none;
  outline: none;
  background-color: transparent !important;
  width: auto;
  color: var(--TEXT) !important;
  display: block;
  flex: 1;
  font-family: 'mainFont';
  height: 24px;
  appearance: none;
  -webkit-appearance: none;
}
label.TextBox_label_focus {
  border: var(--BORDER_NORMAL_WIDTH) solid var(--ACCENT_PRIMARY);
}
span.TextBox_label_focus {
  color: var(--ACCENT_PRIMARY);
  transform: translateY(-22px) scale(0.8);
}
span.TextBox_label_text_fixed {
  color: var(--ACCENT_SECONDARY);
  transform: translateY(-22px) scale(0.8);
}
svg.Icons.TextBox {
  fill: var(--ACCENT_PRIMARY) !important;
  transition: all 0.2s ease;
}

label.Toggle:has(input[type="checkbox"]){
  display:inline-flex;
  font-size:var(--font-size);
  line-height:calc(var(--font-size) + 4px);
  align-items:center;
}
label.Toggle>input[type="checkbox"]{
  box-sizing:border-box;
  position:relative;
  font-size:1.4em;
  width:1.8em;
  height:1em;
  padding:0;
  appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  background: var(--TOGGLE_BACKGROUND_OFF);
  border-radius:0.5em;
  border: var(--TOGGLE_BORDER_OFF) solid 2px;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.2s ease-in-out;
}
label.Toggle>input[type="checkbox"]:checked{
  background:var(--TOGGLE_BACKGROUND_ON);
  border: none;
}
label.Toggle>input[type="checkbox"]::before{
  box-sizing:border-box;
  content:"X"; /* やめたほうがいいかも */
  color: var(--TOGGLE_BACKGROUND_OFF);
  font-size:0.4em;
  line-height:1em;
  padding:0.55em 0 0 0;
  overflow:visible;
  text-align:center;
  position:absolute;
  left:0.25em;
  top:0.22em;
  bottom:0.22em;
  width:1.6em;
  height:1.6em;
  background: var(--TOGGLE_BORDER_OFF);
  border-radius:1em;
  transform:translateX(0%);
  transition:all 0.2s ease-in-out;
  margin:0;
}
label.Toggle>input[type="checkbox"]:checked::before{
  top: 0.25em;
  bottom: 0.25em;
  transform:translateX(90%);
  transition:all 0.2s ease-in-out;
  content:"✓";
  color: var(--TOGGLE_BACKGROUND_ON);
  background: var(--TOGGLE_BACKGROUND_ON_);
  height: 2em;
  width: 2em;
}

span.Error {
  color: var(--TEXT_ERROR);
  display: inline-block;
  height: 1.2em;
}
span.Error:not(:empty)::before {
  content: "✕";
  color: var(--TEXT_ERROR);
  margin-left: 8px;
  margin-right: 4px;
}