@charset "utf-8";
/* --home Illusts-- */
.illust-slide{
	width: 600%;
	height: 100%;
	display: flex;
	transition: all 0.5s;
	position: relative;
}
.illust-slide div{
	width: 20%;
	height: 100%;
	display: flex;
	justify-content: left;
	align-items: center;
}

/* -- indicator -- */
.indicator-wrap{
	display: flex;
	position: relative;
	top: 0.5rem;
	height: 2rem;
	justify-content: end;
	align-items: center;
}

.genre-indicator {
	width: auto;
	position: relative;
	display: flex;
	column-gap: 18px;
	z-index: 10;
	justify-content: center;
	align-items: center;
	z-index: 2;
}
.genre-indicator li {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	list-style: none;
	background-color: #fff;
	cursor: pointer;
}
.genre-indicator li:first-of-type {
	background-color: #8c4c57;
}

/* -- move button -- */
#next, #prev {
	font-size: 3.5rem;
	cursor: pointer;
	z-index: 2;
}

/* -- genre title -- */
.genre-titles{
	display: inline-block;
	position: relative;
	margin: 0 2rem;
	width: 15rem;
	height: 2rem;
	background-color: #fff;
	border-radius: 1rem;
	align-content: center;
}
.show-genre-titles{
	display: flex;
	width: calc(5rem * 5);
	margin-left: 2rem;
	z-index: 1;
	
	.genre-title{
		display: inline-block;
		width: 5rem;
		white-space: nowrap;
		opacity: 0;
		transform: translateX(20%);
		transition: transform 0.3s ease, opacity 0.3s ease;
	}
	.genre-title.active {
		opacity: 1;
		transform: translateX(0);
	}
	.genre-title.fadeout {
		opacity: 0;
		transform: translateX(-20%);
	}

}