/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* Main
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
html{margin:0;padding:0;height:100%;font-size:1.25rem;background:#DDD;}
body{margin:0;padding:0;height:100%;font-size:1.00rem;display:flex;}

main{margin:auto;padding:1rem;background:#FFF;width:60rem;border:0.05rem solid #AAA;}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* Slideshow
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.slideshow {
	display:flex;
	width:100%;
	height:30rem;
	border:0.05rem solid #AAA;
}

.slideshow > ul,
.slideshow > div {
	display:flex;
	box-sizing:border-box;
	align-items:center;
}

.slideshow > div {
	width:5%;
	background:#DDD;
	justify-content:center;
	cursor:pointer;
	font-weight:600;
	padding:0.25rem;
}

.slideshow > ul {
	list-style:none;
	margin:0;
	padding:0;
	width:90%;
	border:0.05rem solid #AAA;
	border-top:none;
	border-bottom:none;
	box-sizing:border-box;
	z-index:0;
	position:relative;
	overflow:hidden;
}

.slideshow > ul > li {
	transition:visibility 0.5s linear, opacity 0.5s linear;
	position:absolute;
	top:0;
	padding:0.5rem;
	box-sizing:border-box;
}

.slideshow > ul > li.show {
	visibility:visible;
	opacity:1;
}

.slideshow > ul > li.show img {
	animation-name:animation;
	animation-duration:0.5s;
	animation-fill-mode:both;
}

.slideshow > ul > li.show.next img{
	animation-name:nextAnimation;
}

.slideshow > ul > li.show.prev img{
	animation-name:prevAnimation;
}

.slideshow > ul > li.hide {
	visibility:hidden;
	opacity:0;
}

/* The "object-fit" attribute is equivalent to "background-size".  */
.slideshow > ul,
.slideshow > ul > li,
.slideshow > ul > li > img {
	width:100%;
	height:100%;
	object-fit:contain;
	background:#DDD;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* Animation
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@keyframes animation {
	0%  {transform:translateY(-50rem);}
	100%{transform:translateY(0);}
}

@keyframes prevAnimation {
	0%  {transform:translateX(-50rem);}
	100%{transform:translateX(0);}
}

@keyframes nextAnimation {
	0%  {transform:translateX(50rem);}
	100%{transform:translateX(0);}
}