/* ===================================================
   ホバーで画像の明度を変える 6種
   数値は記事・CodePen と同じ。変えたのは色だけ（6 色に）。
   1つずつ、番号のところからコピーして使えます。
   =================================================== */

/* ---------- 見本の箱（マスに収めるための指定。コピーしなくても同じ形になります） ---------- */
figure {
  max-width: 300px;
  margin: 0;
  cursor: pointer;
}
figure img {
  width: 100%;
  vertical-align: top;
}

/* ---------- 01 明度を上げる、105% ---------- */
.s_brightness_01 figure img {
  transition: .3s ease-in-out;
}
.s_brightness_01 figure:hover img {
  filter: brightness(1.05);
}

/* 動きを減らす設定のとき */
@media (prefers-reduced-motion: reduce) {
  .s_brightness_01 figure img { transition: none; }
}

/* ---------- 02 明度を上げる、110% ---------- */
.s_brightness_02 figure img {
  transition: .3s ease-in-out;
}
.s_brightness_02 figure:hover img {
  filter: brightness(1.1);
}

/* 動きを減らす設定のとき */
@media (prefers-reduced-motion: reduce) {
  .s_brightness_02 figure img { transition: none; }
}

/* ---------- 03 明度を上げる、115% ---------- */
.s_brightness_03 figure img {
  transition: .3s ease-in-out;
}
.s_brightness_03 figure:hover img {
  filter: brightness(1.15);
}

/* 動きを減らす設定のとき */
@media (prefers-reduced-motion: reduce) {
  .s_brightness_03 figure img { transition: none; }
}

/* ---------- 04 明度を下げる、80% ---------- */
.s_brightness_04 figure img {
  transition: .3s ease-in-out;
}
.s_brightness_04 figure:hover img {
  filter: brightness(80%);
}

/* 動きを減らす設定のとき */
@media (prefers-reduced-motion: reduce) {
  .s_brightness_04 figure img { transition: none; }
}

/* ---------- 05 明度を下げる、50% ---------- */
.s_brightness_05 figure img {
  transition: .3s ease-in-out;
}
.s_brightness_05 figure:hover img {
  filter: brightness(50%);
}

/* 動きを減らす設定のとき */
@media (prefers-reduced-motion: reduce) {
  .s_brightness_05 figure img { transition: none; }
}

/* ---------- 06 真っ黒にしてみる ---------- */
.s_brightness_06 figure img {
  transition: .3s ease-in-out;
}
.s_brightness_06 figure:hover img {
  filter: brightness(0);
}

/* 動きを減らす設定のとき */
@media (prefers-reduced-motion: reduce) {
  .s_brightness_06 figure img { transition: none; }
}