/* ===================================================
   文字を強調するテクニック 18種（125naroom）
   どれも、強調したいところを <span class="em_01"> などで囲むだけ。
   1つずつ、番号のところからコピーして使えます。
   =================================================== */

/* ---------- 01 マーカー（下半分） ---------- */
.em_01 { background: linear-gradient(transparent 60%, #e8dc6a 60%); }

/* ---------- 02 マーカー（太め・うすく） ---------- */
.em_02 { background: linear-gradient(transparent 35%, rgba(232, 220, 106, .55) 35%); }

/* ---------- 03 マーカーを引く（マウスを乗せると） ---------- */
.em_03 { background: linear-gradient(transparent 60%, #e8dc6a 60%) no-repeat 0 0 / 0 100%; transition: background-size .6s; }
.em_03:hover { background-size: 100% 100%; }

/* ---------- 04 ななめのしましまマーカー ---------- */
.em_04 { background: linear-gradient(transparent 60%, transparent 60%), repeating-linear-gradient(-45deg, #e8dc6a 0 2px, transparent 2px 5px) 0 100% / 100% 40% no-repeat; }

/* ---------- 05 太い下線（すき間あり） ---------- */
.em_05 { text-decoration: underline 3px #e8dc6a; text-underline-offset: 6px; }

/* ---------- 06 点線の下線 ---------- */
.em_06 { text-decoration: underline dotted 2px; text-underline-offset: 6px; }

/* ---------- 07 波線 ---------- */
.em_07 { text-decoration: underline wavy #e8dc6a 2px; text-underline-offset: 5px; }

/* ---------- 08 二重線 ---------- */
.em_08 { text-decoration: underline double; text-underline-offset: 4px; }

/* ---------- 09 まるの下線（ドット） ---------- */
.em_09 { background: radial-gradient(circle, #2b2a27 1.5px, transparent 2px) 0 100% / 8px 6px repeat-x; padding-bottom: 6px; }

/* ---------- 10 傍点（ごまの点） ---------- */
.em_10 { text-emphasis: filled sesame #2b2a27; }

/* ---------- 11 傍点（まる） ---------- */
.em_11 { text-emphasis: open circle #2b2a27; }

/* ---------- 12 袋文字 ---------- */
.em_12 { color: #fff; text-shadow: 1.5px 0 #2b2a27, -1.5px 0 #2b2a27, 0 1.5px #2b2a27, 0 -1.5px #2b2a27, 1px 1px #2b2a27, -1px -1px #2b2a27, 1px -1px #2b2a27, -1px 1px #2b2a27; font-weight: 700; }

/* ---------- 13 ずらした影 ---------- */
.em_13 { text-shadow: 2px 2px 0 #e8dc6a; font-weight: 700; }

/* ---------- 14 墨のベタ ---------- */
.em_14 { background: #2b2a27; color: #fff; padding: .1em .4em; }

/* ---------- 15 まるいバッジ ---------- */
.em_15 { border: 1.5px solid #2b2a27; border-radius: 999px; padding: 0 .6em; }

/* ---------- 16 四角い枠 ---------- */
.em_16 { box-shadow: inset 0 0 0 1.5px #2b2a27; padding: .1em .4em; }

/* ---------- 17 グラデーションの文字 ---------- */
.em_17 { background: linear-gradient(90deg, #2b2a27, #c9b53a); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }

/* ---------- 18 下に黄色いまる ---------- */
.em_18 { text-emphasis: filled circle #e8dc6a; text-emphasis-position: under right; }

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