.tbl_category {
	width: 100%;
	margin:15px 0 30px;
	background: #fff;
}
	.tbl_category caption {
		text-align:left;
		font-weight:bold;
	}
	.tbl_category th {
		width: 10%;
		text-align:center;
		padding:5px 10px;
		border:1px solid #aaa;
		background:#eee;
		font-weight:600;
	}
	.tbl_category td {
		width: 40%;
		padding:5px 10px;
		border:1px solid #aaa;
		text-indent:0;
		vertical-align:middle;
	}

.theme_wrapper {
	margin-bottom: 2px;
}
.theme_name {
	display: flex;
	justify-content: space-between;
	position: relative;
	padding: 10px;
	cursor: pointer;
	background-color: #d5f1ee;
	font-weight: bold;
	font-size: 1.1em;
	transition: background-color .1s;
	.theme_container {
		width: calc(100% - 30px);
		display: flex;
		align-items: center;
		line-height: 1.4;
	}
	.icon {
		display: block;
		position: relative;
		width: 20px;
		&::before {
			content: "";
			position: absolute;
			top: 50%;
			left: 0;
			transform: translateY(-50%) rotate(0deg);
			background-color: #CC0099;
			width: 16px;
			height: 2px;
			transform-origin: center center;
			transition: transform .3s;
		}
		&::after {
			content: "";
			position: absolute;
			top: 50%;
			right: 50%;
			transform: translate(-50%, -50%) rotate(0deg);
			background-color: #CC0099;
			width: 2px;
			height: 16px;
			transform-origin: center center;
			transition: transform .3s;
		}
	}
	&:hover {
		background-color: #eafffd;
	}
}
.theme_name.clicked {
	.icon {
		&::before {
			/* transform: translateY(-50%); */
			transform: translateY(-50%) rotate(180deg);
		}
		&::after {
			transform: translate(-50%, -50%) rotate(180deg);
			background-color: transparent;
		}
	}
}
.kobo {
	font-size: 0.9em;
	height: fit-content;
	color: #CC0099;
	border: 1px solid #CC0099;
	background-color: #fff;
	font-weight: bold;
	padding: 2px 3px;
	margin-right: 10px;
	white-space: nowrap;
	width: fit-content;
}

.theme_description {
	padding: 10px;
	/* background-color: #fafafa; */
	text-align: justify;
	display: none;
}
.txt_period {
	display: flex;
	flex-wrap: wrap;
}

@media screen and (max-width: 640px){

	.theme_name {
		.theme_container {
			flex-direction: column;
			align-items: start;
			gap: 10px;
		}
	}
	
}