/* ===== 色と動きの設定（ミツケル脱毛へ展開するときは、ここの値だけ変える） ===== */
:root {
	--lhm-yellow: rgba(255, 226, 74, 0.55);
	--lhm-pink: rgba(255, 170, 195, 0.7);
	--lhm-green: rgba(14, 154, 156, 0.3);
	--lhm-duration: 1.2s;
}

.lhm-marker-yellow { --lhm-color: var(--lhm-yellow); }
.lhm-marker-pink   { --lhm-color: var(--lhm-pink); }
.lhm-marker-green  { --lhm-color: var(--lhm-green); }

/* ===== 手書き風の線（端が丸く、少し不ぞろい）＋太字 ===== */
.lhm-marker-yellow,
.lhm-marker-pink,
.lhm-marker-green {
	background-image: linear-gradient(
		transparent 62%,
		var(--lhm-color) 62%,
		var(--lhm-color) 92%,
		transparent 92%
	);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	font-weight: bold;
	padding: 0 0.2em;
	border-radius: 0.15em 0.5em 0.2em 0.6em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* ===== 記事画面：画面に入ったら線が引かれる ===== */
html.lhm-js .lhm-marker-yellow,
html.lhm-js .lhm-marker-pink,
html.lhm-js .lhm-marker-green {
	background-size: 0% 100%;
	transition: background-size var(--lhm-duration) cubic-bezier(0.25, 0.8, 0.25, 1);
}

html.lhm-js .lhm-marker-yellow.is-drawn,
html.lhm-js .lhm-marker-pink.is-drawn,
html.lhm-js .lhm-marker-green.is-drawn {
	background-size: 100% 100%;
}

/* 動きを減らす設定の端末では、最初から線を表示する */
@media (prefers-reduced-motion: reduce) {
	html.lhm-js .lhm-marker-yellow,
	html.lhm-js .lhm-marker-pink,
	html.lhm-js .lhm-marker-green {
		background-size: 100% 100%;
		transition: none;
	}
}