.span_rainbow {
  /* フォントサイズなどを任意で指定する */
  /*font: bold 10em / 1 Verdana, Helvetica, Arial, sans-serif;*/
  /*text-transform: uppercase;*/
  font:bold;
  
  /* 背景グラデーションを指定・幅を 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) でも可 */
          text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  
  /* アニメーション指定 */
  animation: example6 0.5s linear infinite;
}

/* 背景の横位置をズラす */
@keyframes example6 {
  to { background-position-x: 200%; }
}
.span_highlight{
  position: relative;
  background: linear-gradient(transparent 60%, var(--accent_color1) 40%);
}
.span_rotate{
	display: inline-block;
	animation-name: rotateSpan;
	animation-iteration-count: infinite;
	animation-duration: 2s;
	animation-timing-function: linear;
}
.span_rotatex{
	display: inline-block;
	animation-name: rotateSpanX;
	animation-iteration-count: infinite;
	animation-duration: 2s;
	animation-timing-function: linear;
}
.span_blink{
	display: inline-block;
	animation-name: blink;
	animation-iteration-count: infinite;
	animation-duration: 1s;
	animation-timing-function: linear;
}
@keyframes rotateSpan{
	0%{
		transform: rotateY(0deg);
	}
	50%{
		transform: rotateY(180deg);
	}
	100%{
		transform: rotateY(359deg);
	}
}
@keyframes rotateSpanX{
	0%{
		transform: rotateX(0deg);
	}
	50%{
		transform: rotateX(180deg);
	}
	100%{
		transform: rotateX(359deg);
	}
}
@keyframes blink{
	0%,24%,50%,74%,100%{
		opacity: 0;
	}
	25%,49%,75%,99%{
		opacity: 1;
	}
}