@charset "UTF-8";

/* 文字の赤色点滅アクション13:16 2026/01/22 もとのcssから移植*/
.information .now-information li .blink {
  animation: blinking 1s ease-in-out infinite alternate;
}
.information .now-information li span {
  color: red;
}

.information .now-information li .blink_blue {
  animation: blinking 1s ease-in-out infinite alternate;
}
.information .now-information li span {
  color: blue;
}
/* 文字点滅アクションの動きの制御 */
@keyframes blinking {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

/* ~~~AI~~~

<style>
  /* 点滅アニメーションの定義 */
  @keyframes blink-red {
    0%   { opacity: 1; }   /* 完全に表示 */
    50%  { opacity: 0; }   /* 半分の間で非表示 */
    100% { opacity: 1; }   /* 再び表示 */
  }

  /* 点滅させたいテキストに適用するクラス */
  .blink-red {
    color: red;                               /* 赤色に設定 */
    animation: blink-red 1s linear infinite;  /* 1秒で1回の点滅、無限に繰り返す */
  }
  
   @keyframes blink-blue {
    0%   { opacity: 1; }   /* 完全に表示 */
    50%  { opacity: 0; }   /* 半分の間で非表示 */
    100% { opacity: 1; }   /* 再び表示 */
  }
  
  .blink-blue {
    color: blue;                               /* 青色に設定 */
    animation: blink-blue 1s linear infinite;  /* 1秒で1回の点滅、無限に繰り返す */
</style>

</head>
<body>

<h1 class="blink-red">この文字は赤色で点滅しています！</h1>

<p>※ 点滅は視覚的に刺激が強くなるため、長時間の閲覧や光過敏性発作のリスクがある方への配慮が必要です。<br>
   必要に応じて、ユーザーが点滅をオフにできる UI（例：ボタンでクラスを削除）を用意するとよいでしょう。</p>

</body>
</html>
主なポイント
項目	説明
赤色	color: red; で文字色を赤に設定
点滅アニメーション	@keyframes blink-red で opacity を 0↔1 に変化させ、点滅効果を実現
アニメーション設定	animation: blink-red 1s linear infinite; → 1 秒間で 1 回点滅、linear で速度を一定にし、infinite で無限に繰り返す
アクセシビリティ配慮	点滅は光過敏性発作や視覚障害のあるユーザーに影響を与える可能性があるため、オプションで点滅を停止できる仕組みを提供することが推奨されます
~~~AI~~~ */