/* idで指定するなら、"#"で始める */
/* classで指定するなら、"."で始める */

@media (min-width: 576px) {
	input[type="checkbox"] {
		transform: scale(2);
		margin: 0 7px 20px 0;
	}
	label {
		font-size: 2em;
	}
	#checkAll,
	#uncheckAll {
		font-size: 1.3em;
	}
}

@media (min-width: 768px) {
	label {
		font-size: 1.6em;
	}
}

@media (min-width: 992px) {
	input[type="checkbox"] {
		transform: scale(1.5);
		margin: 0 7px 10px 0;
	}
	label {
		font-size: 1em;
	}
	#checkAll,
	#uncheckAll {
		font-size: 1em;
	}
}

label {
	padding-left: 10px;
}

.history-top {
	margin: 0 50px;
}

/* お題の数を設定するスピナー */
.spinner {
	margin-top: 20px;
	margin-bottom: 20px;
	text-align: center;
}

input[type="number"] {
	font-size: 2em;
	text-align: center;
}

#checkAll,
#uncheckAll {
	width: 5em;
}

.checkAllThemes button {
	margin: 20px 0 20px 0;
}

.genre {
	font-size: 0.7em;
}

.tweet-button {
	margin: 40px 0;
	text-align: center;
}

.tweet-button button {
	text-align: end;
	border: none;
	font-size: 1.2em;
	background-color: black;
	color: white;
	padding: 6px 16px;
	border-radius: 20px;
}

.tweet-button button i {
	margin-right: 10px;
}

.layer {
	background: rgba(0, 0, 0, 0.2);
	/* visibility: hidden; */
	position: fixed;
	top:  0;
	left: 0;
	width:  100%;
	height: 100%;
	z-index: -1;
	opacity: 0;
}

/* .modal {
	position: relative;
	margin-right: auto;
	margin-left : auto;
	width: 80%;
	min-width:40%;
} */

.modal-inner {
	margin-top   : 125px;
	margin-bottom: 125px;
	margin-left  : auto;
	margin-right : auto;
	background: white;
	position: relative;
	display: block;
	padding: 20px;
	height: auto;
}

.modal-wrap {
	position: absolute;
	right: 10px;
	top: -28px;
	display: inline-flex;
}

.modal-content {
	padding-top   : 15px;
	padding-bottom: 23px;
}

.layer.is-open {
	z-index: 10;
	opacity: 1;
	visibility: visible;
}

.layer.is-open .modal {
	opacity: 1;
	visibility: visible;
}