/* ダークモード */
@media (prefers-color-scheme: dark) {
	body {
		background: linear-gradient(-40deg, #3a6186, #3a6186, #89253e, #89253e);
		background-attachment: fixed;
	}

	/* アイコン */
	.fad:before {
		opacity: 0.4;
	}
	.fad:after {
		opacity: 1;
	}

	/* 情報パネル */
	.info {
		color: #edba63;
		background-color: #42195e;
		background: linear-gradient(#243b55, #141e30);
		border: 1px solid #434343;
	}
	.panel strong small {
		color: #edba63;
	}
	.panel span {
		color: #f0f0f0;
	}
	.panel label {
		color: #ff8b8b;
	}
	.panel small {
		color: #aaa;
	}

	/* セレクトボックス */
	.dropdown {
		background: #444;
		border-color: #111 #0a0a0a black;
		background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4));
		box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2);
	}
	.dropdown:before {
		border-bottom-color: #f0f0f0;
	}
	.dropdown:after {
		border-top-color: #f0f0f0;
	}
	.dropdown > select {
		color: #f0f0f0;
		text-shadow: 0 1px black;
	}
	.dropdown > select:focus {
		color: #ccc;
	}
	.dropdown > select > option {
		background: #444;
		text-shadow: 0 1px rgba(0, 0, 0, 0.4);
	}

	/* シャドウ */
	.shadow01:after {
		box-shadow: 0 0 16px rgba(250, 235, 204, 0.4), 0 0 48px -16px rgba(250, 235, 204, 0.2);
	}
	.shadow02 {
		box-shadow: 0 8px 16px rgb(250, 235, 204, 0.4);
	}

	/* カレンダー */
	.calendar01 {
		color: #555;
		background-color: #f1ddeb;
	}
	.calendar01 h2 {
		color: #931192;
	}
	.calendar01 .weekday {
		color: #979;
	}
	.calendar01 .red {
		color: #900;
	}
	.calendar01 .blue {
		color: #009;
	}
	.calendar01 .holiday {
		color: #900;
	}
	.calendar01 .holiday:hover {
		border-color: #ed6300;
	}
	.calendar01 .today {
		border-color: #47c9b1;
	}
	.calendar01 .today.birthday {
		border-color: #2391d2;
	}
	.calendar01 .invalid {
		color: #b0b0b0;
	}
	.calendar01 .invalid.red {
		color: #d0b0b0;
	}
	.calendar01 .invalid.blue {
		color: #b0b0f0;
	}
	.calendar01 .invalid > .holiday {
		color: #d0b0b0;
	}
	.calendar01 > div > label > span {
		/* border: 2px solid #f1ddeb; */
	}
	.calendar01 > div > label > span > span {
		border: 2px solid #c8d4e9;
	}
	.calendar01 .tooltip > .text {
		color: #f0f0f0;
		background-color: #ed6300;
	}
	.calendar01 .tooltip > .text:after {
		border-color: #ed6300 transparent transparent;
	}

	/* 名前入力 */
	.calendar01 > div > label > span > span {
		border: 2px solid #f1ddeb;
	}
	.calendar01 > div > label > span > span:hover { /* 日のホバー枠 */
		border-color: #d2ac8e;
	}
	.calendar01 > div > label > input:focus + span > span { /* 日のフォーカス枠 */
		border-color: #d2ac8e;
		background:rgba(210, 172, 142, 0.5);
	}
	.calendar01 > div > label > em {
		background-color: #a27c5e;
	}

	/* トグルスイッチ */
	.toggle {
		background: linear-gradient(0deg, #e0e0e0, #bbb);
		box-shadow: 0 0 0 1px #b5b5b5, 0 0 0 2px #bebebe, inset 0 0 4px rgba(221, 221, 221, 1);
	}
	.toggle:checked {
		background: linear-gradient(0deg, #e67e22, #f39c12);
	}
	.toggle:before {
		color: #101010!important;
		background: linear-gradient(0deg, #9b9b9b, #eee);
		box-shadow: 0 0 0 1px #d3d3d3;
	}
	.toggle:after {
		background: linear-gradient(0deg, #eee, #9b9b9b);
	}
	.annual:before {
		color: #931192!important;
	}

	/* Webストレージ情報 */
	.button {
		color: #222;
		background-color: #f0f0f0;
		border-color: #d8d8d8;
	}
	.button:hover {
		background-color: #e4e4e4;
	}
	.button:focus {
		box-shadow: 0 0 0 3px rgb(204 204 204 / 50%);
	}
	#sample {
		color: #fff;
		background-color: #555;
		border-color: #4d4d4d;
	}
	#sample:hover {
		background-color: #505050;
	}
	#sample:focus {
		box-shadow: 0 0 0 3px rgb(111 111 111 / 50%);
	}

	/* アラート */
	.layer {
		background-color: rgb(241 221 235 / 50%);
	}
	.alert {
		color: #f0f0f0;
		background-color: #29323f;
		box-shadow: 0 8px 16px rgb(0 0 0 / 40%);
	}
}