/* =========================================
   Custom Cursorポインター
   WordPress / Lightning 共通版
========================================= */

.custom-cursor {
	position: fixed;
	left: 0;
	top: 0;

	width: 18px;
	height: 18px;

	border: 1px solid #d8ff3f;
	border-radius: 50%;

	pointer-events: none;
	z-index: 99999;

	transform: translate3d(-50%, -50%, 0);

	will-change:
		transform,
		width,
		height,
		background-color;

	transition:
		width 0.2s ease,
		height 0.2s ease,
		background-color 0.2s ease,
		border-color 0.2s ease,
		opacity 0.2s ease;

	mix-blend-mode: difference;

	opacity: 1;
}


/* リンク・ボタンの上 */
.custom-cursor.is-hover {
	width: 48px;
	height: 48px;

	background-color: rgba(216, 255, 63, 0.08);

	border-color: #d8ff3f;
}


/* カスタムカーソル使用中は通常のマウスカーソルを隠す */
body.custom-cursor-active,
body.custom-cursor-active a,
body.custom-cursor-active button,
body.custom-cursor-active input,
body.custom-cursor-active textarea,
body.custom-cursor-active select {
	cursor: none !important;
}


/* スマホ・タブレットなど */
@media (pointer: coarse) {
	.custom-cursor {
		display: none !important;
	}
}


/* 動きを減らす設定をしている場合 */
@media (prefers-reduced-motion: reduce) {
	.custom-cursor {
		display: none !important;
	}
}