body{
	background-color:#000;
}
a:link{
	color:#5555ff;
}
a:visited{
	color:#0000ff;
}
a:hover{
	color:#00aa00;
}
a:active{
	color:#00dd00;
}

.hscroll {
	width:300px;
	height:300px;
	position:relative;
	border:1px solid lightgray;
}
.hscroll ul {
	padding:0;
	margin:0;
	width:100%;
	height:100%;
	overflow:hidden;
	white-space:nowrap;
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
}
.hscroll img {
	width:100%;
	height:100%;
	object-fit:contain;
}
.hscroll li {
	list-style:none;
	display:inline-block;
	scroll-snap-align:center;
	width:100%;
	height:100%;
}
.arrow {
	top:0;
	position:absolute;
	width:8%;
	height:100%;
	background:rgba(255,255,255,0.3);
	cursor:pointer;
}
.arrow:before {
	content:'';
	position:absolute;
	width:10px;
	height:10px;
	border-left:4px solid gray;
	border-bottom:4px solid gray;
}
.left {
	left:0px;
}
.left:before {
	top:calc(50% - 10px);
	left:calc(50% - 4px);
	transform:rotate(45deg);
}
.right {
	right:0;
}
.right:before {
	top:calc(50% - 10px);
	right:calc(50% - 6px);
	transform:rotate(-135deg);
}
@media screen and (max-width:480px) {
	.hscroll ul {
		overflow-x:auto;
	}
}