html, body {
	margin	: 0;
	padding	: 0;
	overflow: hidden;
}
#rainCanvas {
	display	: block;
}

@media (min-width: 576px) {
	/* scale で、チェックボックスの大きさを変える */
	input[type="checkbox"]:not(#swDark) {
		transform: scale(2);
		margin: 0 10px 0 0;
	}

	/* テキスト "option" */
	.menu-button {
		margin: 10px 10px;
		font-size: 3.5em;
	}
	
	nav {
		display: none;
		width: 500px;
		height: 890px;
		background-color: rgba(200, 255, 255, 0.6);
	}
	
	.option-area > nav > ul > li {
		font-size: 2.2em;
	}
	label > img {
		width: 15%;
	}
}

@media (min-width: 768px) {
	/* scale で、チェックボックスの大きさを変える */
	input[type="checkbox"]:not(#swDark) {
		transform: scale(2);
		margin: 0 7px 0 0;
	}

	/* テキスト "option" */
	.menu-button {
		margin: 10px 10px;
		font-size: 3em;
	}
	
	nav {
		display: none;
		width: 500px;
		height: 1100px;
		background-color: rgba(200, 255, 255, 0.6);
	}
	
	.option-area > nav > ul > li {
		font-size: 2em;
	}
	label > img {
		width: 15%;
	}
}

@media (min-width: 992px) {
	/* scale で、チェックボックスの大きさを変える */
	input[type="checkbox"]:not(#swDark) {
		transform: scale(1);
		margin: 0 7px 0 0;
	}

	/* テキスト "option" */
	.menu-button {
		margin: 10px 10px;
		font-size: 2em;
	}
	
	.option-area > nav > ul > li {
		font-size: 1em;
	}

	nav {
		display: none;
		width: 250px;
		height: 640px;
		background-color: rgba(200, 255, 255, 0.6);
	}
	label > img {
		width: 20%;
	}
}

/* このページ限定で、上部のナビバーを非表示にする */
.navbar,
.navbar * {
	display: none !important;
}
/* このページ限定で、上部の余白を無くす */
.main-contents {
	margin-top: 0 !important;
}

/* チェックボックスを非表示にする */
#settingsPushed {
	display: none;
}

/* ライト or ダークで色を変える */
.option-area:has(#swDark:checked) .menu-button {
	color: aqua;
}
.menu-button {
	color: red;
	transition: color 0.5s ease;
}
.option-area:has(#swDark:checked) ul > li > label {
	color: rgb(0, 17, 255);
}
ul > li > label {
	color: #123fa0;
	transition: color 0.5s ease;
}
.option-area:has(#swDark:checked) ul > li {
	color: rgb(0, 59, 3);
}
ul > li {
	color: #006600;
	transition: color 0.5s ease;
}

/* "option"が押された(チェックが入った)ら、フェードインで表示 */
#settingsPushed:checked ~ nav {
	display: block;
	animation: 1s fadeIn;
}

@keyframes fadeIn {
	from { opacity: 0;}
	to   { opacity: 1;}
}

/*  */
.option-area {
	position: absolute;
	height: 10px;
}

ul {
	position: relative;
	top: 10px;
	vertical-align: middle;
}

/* オプションの各項目 */
ul > li > label {
	position: relative;
	left: 0px;
	font-weight: bold;
}

ul > li {
	position: relative;
	font-weight: bold;
}

input[name="settings-font"] {
	display: none;
}
input[name="settings-font"] + label {
	opacity: 0.5;
	transition: opacity 0.3s ease;
	cursor: pointer;
}
input[name="settings-font"]:checked + label {
    opacity: 1.0;
    font-weight: bold; /* 選択中を強調するために太字にするのもおすすめ */
}