@font-face {
	font-family: '美咲ゴシック';
	src: url('https://cdn.leafscape.be/misaki/misaki_gothic_web.woff2') format("woff2");
}

body > *{
	font-family: 'Kodenmachou12';
}

/* タブレットの幅 */
@media (min-width: 576px) {
	/* scale で、チェックボックスの大きさを変える */
	input[type="checkbox"] {
		transform: scale(2);
		margin: 0 10px 0 0;
	}
	label {
		font-size: 1.5em;
	}
	.informations {
		font-size: 2em;
	}
	#numberOfMonsters {
		font-size: 2em;
	}
	.n-monsters  {
		font-size: 2em;
	}
	.number-of-monsters {
		font-size: 200%;
	}
	.about summary,
	.sort summary {
		font-size: 150%;
	}
	.sort-keys,
	.order-keys {
		font-size: 150%;
	}
	.cb-race label,
	.cb-size label {
		font-size: 200%;
	}
	.checkRace button,
	.checkSize button {
		font-size: 150%;
	}
}

/* これより上はPCの幅 */
@media (min-width: 992px) {
	input[type="checkbox"] {
		transform: scale(1.5);
		margin: 0 10px 0 0;
	}
	label {
		font-size: 1.3em;
	}
	.informations {
		font-size: 1.5em;
	}
	#numberOfMonsters {
		font-size: 2em;
	}
	.n-monsters  {
		font-size: 1.5em;
	}
	.number-of-monsters {
		font-size: 150%;
	}
	.about summary,
	.sort summary {
		font-size: 100%;
	}
	.sort-keys,
	.order-keys {
		font-size: 100%;
	}
	.cb-race > label,
	.cb-size > label {
		font-size: 100%;
	}
	.checkRace button,
	.checkSize button {
		font-size: 100%;
	}
}

.doctor_message {
	font-size: 1.1em;
	padding: 25px;
}

.poll-result,
.doctor {
	text-align: center;
}

.doctor > img {
	width: 50%;
	height: 50%;
}

.about summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	padding: 0.5em 1em;
	border-radius: 5px;
	background: #0033CC;
	color: white;
	font-weight: bold;
	cursor: pointer;
}

.sort summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	padding: 0.5em 1em;
	border-radius: 5px;
	background: #009933;
	color: white;
	font-weight: bold;
	cursor: pointer;
}

.message {
	position: relative;
	display: inline-block;
	margin: 1em 0 1em 0;
	padding: 20px;
	max-width: 100%;
	background: white;
	border: solid 2px;
	font-size: 1.2em;
}

.filters {
	margin: 20px;
}

/* .race { */
	/* margin: 20px; */
/* } */

/* .size { */
	/* margin-top: 20px !important; */
/* } */

/* .sort-menu { */
	/* margin: 20px 0; */
/* } */

/* .buttonFilter { */
	/* text-align: center; */
/* } */

.checkRace {
	margin-top: 10px !important;
}

.checkSize {
	margin-top: 10px !important;
}

.container > .row > * {
	padding: 10px;
}

/* ボタンの横幅指定 */
#checkAllRace,
#uncheckAllRace,
#checkAllWeapon,
#uncheckAllWeapon {
	width: 5em;
}

.mn {
	position: relative;
}

.bubble {
	display: none;
	position: absolute;
	margin-top:   10px !important;
	padding: 2px 5px;
	background: #0000CC;
	color: #FFFFFF;
	white-space: nowrap;
	overflow: visible;
	font-size: 1.2em;
	font-weight: bold;
	width: max-content;	/* 幅を、文字列の長さに合わせる */
	text-align: center;
	margin: auto;
	z-index: 2;
}

/* マウスオーバーで画像を拡大する transitionを指定するとアニメーションになる */
.mn-thumbnail img:hover{
	transform:scale(1.4, 1.4);
	transition:0.1s all;
}

/* マウスが離れた時のアニメーション表示 */
.mn-thumbnail img{
	transform:scale(1.0, 1.0);
	transition:0.1s all;
}

/* マウスが乗ったまるアイコンに隣接しているbubbleを表示させる */
.mn:hover + .bubble{
	display: block;
}

.container > .row > * {
	padding: 10px;
}

.filter-label {
	margin: 20px 0 0 0 !important;
}

.sort-label {
	margin: 20px 0 0 0 !important;
}

.buttonFilter {
	text-align: center;
}

#submitFilter {
	width: 10em;
	padding: 10px;
	margin-top: 30px;
}