/*  参考にしたサイト */
/*  https://openprocessing.org/sketch/1544154 */


html,
body {
	margin: 0;
	padding: 0;
}

main {
	text-align: center;
	width: 100%;
}

canvas {
	display: block;
}





.my_slider {
	width: 12.5vw;
	background-color: transparent;
	-webkit-appearance: none;
}

.my_slider:focus {
	outline: none;
	-webkit-appearance: none;
}

.my_slider::-webkit-slider-runnable-track {
	background: #999999;
	height: 8px;
	-webkit-appearance: none;

	cursor: pointer;
	border-radius: 2px;
	opacity: 0.6;
}

.my_slider::-webkit-slider-thumb {
	width: 24px;
	height: 24px;
	border: none;
	background: #ffffff;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -8px;
	border-radius: 8px;
}