@charset "UTF-8";

/*==============================================================================
 * Dark Mode
 *----------------------------------------------------------------------------
 * このサイトは色指定がページ全体に分散していて、1個1個の要素に色を
 * 塗り直すのは現実的ではない（修正漏れ・崩れのリスクが高い）。
 * そのため html 全体を反転させ、画像・動画・iframe だけ再反転して
 * 元の色に戻す手法を使う。レイアウト（幅・位置）には影響しない。
 *----------------------------------------------------------------------------*/
html.dark-mode {
  background: #fff;
  filter: invert(1) hue-rotate(180deg);
}

html.dark-mode img,
html.dark-mode video,
html.dark-mode iframe,
html.dark-mode canvas,
html.dark-mode svg,
html.dark-mode picture {
  filter: invert(1) hue-rotate(180deg);
}