@charset "UTF-8";

.red    {--color: #ff0000; }
.green  {--color: #00ff00; }
.blue   {--color: #0000ff; }
.magenta{--color: #ff00ff; }
.yellow {--color: #ffff00; }
.cyan   {--color: #00ffff; }
.white  {--color: #ffffff; }

.btn2 {
  -webkit-appearance: none; #iOS のデフォルトスタイルをクリア
  display: inline-block;
  padding: 0.0em 0.2em;
  text-decoration: none;
  font-size: 100%;
  color:  var(--c1,#000000);/*文字色*/
  background-color: var(--c2,#ffffff);
  border: solid 2px var(--c3,#000000);
  border-left: solid 12px var(--c3,#000000);
  border-radius: 3px;
}
.btn2:active {
  transform: translateY(1px);
}

.btn {
  -webkit-appearance: none; #iOS のデフォルトスタイルをクリア
  display: inline-block;
  padding: 0.0em 0.2em;
  text-decoration: none;
  font-size: 100%;
  color:  var(--c1,#000000);/*文字色*/
  background-color: var(--c2,#e0e0e0);
  border: solid 1px var(--c3,var(--c2,#000000));
  border-radius: 3px;
}
.btn:active {
  transform: translateY(1px);
}


.text {
  cursor: pointer;
  cursor: hand;
  padding: 0em 0em;
  text-decoration: none;
  font-size: medium;
  color: #000000;
  background-color: transparent;
  border: none;
}