.toggle-buttons {
	display: block;
}

.toggle-buttons.vertical {
	flex-direction: column;
}

.toggle-buttons label {
	display: inline-block;
	position: relative;
}

.toggle-buttons [type=radio],
.toggle-buttons [type=checkbox] {
	-webkit-appearance: none;
	-moz-appearance: none;
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	cursor:pointer;
}

/* appearance: none; for IE11 */
_:-ms-lang(x)::-ms-backdrop, .toggle-buttons [type=radio],
_:-ms-lang(x)::-ms-backdrop, .toggle-buttons [type=checkbox] {
	visibility: hidden;
}
.toggle-buttons .btn {
	z-index: 1;
	background-color:darkgray;
	color:white;
	margin: 5px;
	border-radius: 20px;
	font-weight:bold;
}
.toggle-buttons label:hover .btn {
	background-color:lightgray;
}
.toggle-buttons.vertical .btn {
	width: 100%;
}

.toggle-buttons:not(.vertical) :not(:first-child) .btn {
}

.toggle-buttons:not(.vertical) :not(:last-child) .btn {
}

.toggle-buttons.vertical :not(:first-child) .btn {
}

.toggle-buttons.vertical :not(:last-child) .btn {
}

.toggle-buttons :checked + .btn {
	background-color: #345;
}
.toggle-buttons:not(.score) :checked + .btn:before {
	font-family: 'Font Awesome 5 Free';
	content:"\f00c";
}

.toggle-buttons :disabled + .btn {
	cursor: not-allowed;
	opacity: .6;
	color: #def;
}

.book.toggle-buttons .btn {
	min-width: 8em;
}

.category.toggle-buttons .btn {
	min-width: 10em;
}

.area.toggle-buttons .btn {
	font-size:0.9em;
	background-color:white;
	border:2px solid;
	min-width: 8em;
	margin-bottom:1em;
}

.score.toggle-buttons .btn {
	min-width: 3.2em !important;
	background-color: honeydew;
	color: darkcyan;
	border: 1px solid darkcyan;
}
.score.toggle-buttons :checked + .btn {
	background-color: darkcyan;
	color:white;
}
.score.toggle-buttons label:hover .btn {
	background-color: darkcyan;
	color: white;
}
.book.toggle-buttons .age0 .btn{
	background-color:var(--color-0);
}
.book.toggle-buttons .age0:hover .btn {
	background-color: var(--color-0-active);
	color: var(--color-0);
}
.book.toggle-buttons .age1-2 .btn{
	background-color:var(--color-1-2);
}
.book.toggle-buttons .age1-2:hover .btn{
	color:var(--color-1-2);
	background-color:var(--color-1-2-active);
}
.book.toggle-buttons .age3-5 .btn{
	background-color:var(--color-3-5);
}
.book.toggle-buttons .age3-5:hover .btn{
	color:var(--color-3-5);
	background-color:var(--color-3-5-active);
}
.category.toggle-buttons .kankyo .btn{
	background-color:var(--color-kankyo);
}
.category.toggle-buttons .kankyo:hover .btn{
	background-color:var(--color-kankyo-active);
	color:var(--color-kankyo);
}
.category.toggle-buttons .rikai .btn{
	background-color:var(--color-rikai);
}
.category.toggle-buttons .rikai:hover .btn{
	background-color:var(--color-rikai-active);
	color:var(--color-rikai);
}
.category.toggle-buttons .gainen .btn{
	background-color:var(--color-gainen);
}
.category.toggle-buttons .gainen:hover .btn{
	background-color:var(--color-gainen-active);
	color:var(--color-gainen);
}
.category.toggle-buttons .nattoku .btn{
	background-color:var(--color-nattoku);
}
.category.toggle-buttons .nattoku:hover .btn{
	color:var(--color-nattoku);
	background-color:var(--color-nattoku-active);
}
.category.toggle-buttons .jiko .btn{
	background-color:var(--color-jiko);
}
.category.toggle-buttons .jiko:hover .btn{
	color:var(--color-jiko);
	background-color:var(--color-jiko-active);
}
.area.toggle-buttons label:hover .btn,
.area.toggle-buttons label input[type="radio"]:checked + .btn,
.area.toggle-buttons label input[type="checkbox"]:checked + .btn {
	color: white;
}
.area.toggle-buttons .kankyo .btn{
	border-color:var(--color-kankyo);
	color:var(--color-kankyo);
}
.area.toggle-buttons .kankyo:hover .btn,
.area.toggle-buttons .kankyo input[type="radio"]:checked + .btn,
.area.toggle-buttons .kankyo input[type="checkbox"]:checked + .btn {
	background-color: var(--color-kankyo);
}
.area.toggle-buttons .rikai .btn{
	border-color:var(--color-rikai);
	color:var(--color-rikai);
}
.area.toggle-buttons .rikai:hover .btn,
.area.toggle-buttons .rikai input[type="radio"]:checked + .btn,
.area.toggle-buttons .rikai input[type="checkbox"]:checked + .btn {
	background-color: var(--color-rikai);
}
.area.toggle-buttons .gainen .btn{
	border-color:var(--color-gainen);
	color:var(--color-gainen);
}
.area.toggle-buttons .gainen:hover .btn,
.area.toggle-buttons .gainen input[type="radio"]:checked + .btn,
.area.toggle-buttons .gainen input[type="checkbox"]:checked + .btn {
	background-color: var(--color-gainen);
}
.area.toggle-buttons .nattoku .btn{
	border-color:var(--color-nattoku);
	color:var(--color-nattoku);
}
.area.toggle-buttons .nattoku:hover .btn,
.area.toggle-buttons .nattoku input[type="radio"]:checked + .btn,
.area.toggle-buttons .nattoku input[type="checkbox"]:checked + .btn {
	background-color: var(--color-nattoku);
}
.area.toggle-buttons .jiko .btn{
	border-color:var(--color-jiko);
	color:var(--color-jiko);
}
.area.toggle-buttons .jiko:hover .btn,
.area.toggle-buttons .jiko input[type="radio"]:checked + .btn,
.area.toggle-buttons .jiko input[type="checkbox"]:checked + .btn {
	background-color: var(--color-jiko);
}

.toggle-buttons input[type="checkbox"] + .btn-warnning {
	border: 1px solid #FF4A5B !important;
	background-color: white !important;
	color: #FF4A5B !important;
}
.toggle-buttons input[type="checkbox"]:checked + .btn-warnning {
	background-color:#FF4A5B !important;
	color:white !important;
}
.toggle-buttons input[type="checkbox"] + .btn-action {
	border: 1px solid #3EA1CE !important;
	background-color: white !important;
	color: #3EA1CE !important;
}
.toggle-buttons input[type="checkbox"]:checked + .btn-action {
	background-color:#3EA1CE !important;
	color:white !important;
}
.toggle-buttons:not(.score) input[type="radio"] + .btn:before ,
.toggle-buttons:not(.score) input[type="checkbox"] + .btn:before {
	content:'□';
	margin-right:0.1em;
	font-weight:normal;
}
.toggle-buttons:not(.score) input[type="radio"]:checked + .btn:before,
.toggle-buttons:not(.score) input[type="checkbox"]:checked + .btn:before {
	content:"\f00c";
	margin-right:0.1em;
}