.family1 {
  font-family: "Times New Roman";
}

.family2 {
  font-family: "ＭＳ 明朝", "MS Mincho", sans-serif;
}

.xx-small {
  font-size: xx-small;
}

.x-small {
  font-size: x-small;
}

.small {
  font-size: small;
}

.medium {
  font-size: medium;
}

.large {
  font-size: large;
}

.x-large {
  font-size: x-large;
}

.xx-large {
  font-size: xx-large;
}

.font-red {
  color: red;
}

.font-blue {
  color: blue;
}

.font-yellow {
  color: #ff0;
}

.font-green {
  color: green;
}

.font-white {
  color: #fff;
}

.font-black {
  color: #000;
}

/* 以下虹色文字css */
.rainbowA {
  background: linear-gradient(
    to right,
    orange,
    yellow,
    green,
    cyan,
    blue,
    violet
  );
  background: -webkit-linear-gradient(
    left,
    orange,
    yellow,
    green,
    cyan,
    blue,
    violet
  );
  background: -o-linear-gradient(
    right,
    orange,
    yellow,
    green,
    cyan,
    blue,
    violet
  );
  background: -moz-linear-gradient(
    right,
    orange,
    yellow,
    green,
    cyan,
    blue,
    violet
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}
.rainbow_animation {
  /* フォントサイズなどを任意で指定する */
  font: bold 48px / 1 Verdana, Helvetica, Arial, sans-serif;
  text-transform: uppercase;

  /* 背景グラデーションを指定・幅を 200% にしておく */
  background: linear-gradient(
      to right,
      #f00 0%,
      #f80 14.28%,
      #dd0 28.56%,
      #0d0 42.85%,
      #0dd 57.14%,
      #00f 71.42%,
      #e0e 85.71%,
      #f00 100%
    )
    0% center / 200% auto;

  /* 背景画像を文字でマスクする */
  background-clip: text;
  -webkit-background-clip: text;

  /* 文字色を透明にできればよく color: transparent でも color: rgba(0, 0, 0, 0) でも可 */
  color: transparent;
  -webkit-text-fill-color: transparent;

  /* アニメーション指定 */
  animation: example 5s linear infinite;
}

/* 背景の横位置をズラす */
@keyframes example {
  to {
    background-position-x: 200%;
  }
}

/* 以上虹色文字css */