@charset "UTF-8";

main {
	max-width: 80em;
	background-color: #FFF;
}

/* フォーム部分 */
input[type="radio"] {
	display: none;
}
.filter_box {
	display: none;
}
.filter_content {
	display: inline-block;
	box-sizing: border-box;
	width: 20em;
	padding: .5em;
}
.filter_label {
	display: inline-block;
	width: 3.2em;
	border: .1em solid #999;
	border-radius: .5em;
	padding: .2em;
	background-color: #ccc;
	text-align: center;
}
.filter_label:hover {
	background-color: #eee;
	cursor: pointer;
}
#wo:checked~#f_wo_label {
	background-color: #fff;
	font-weight: bold;
	cursor: default;
}
#n:checked~#f_n_label {
	background-color: #fff;
	font-weight: bold;
	cursor: default;
}
#a:checked~#f_a_label {
	background-color: #fff;
	font-weight: bold;
	cursor: default;
}
#wo:checked~#f_wo {
	display: block;
}
#n:checked~#f_n {
	display: block;
}
#a:checked~#f_a {
	display: block;
}

/* カレンダー */
textarea.calender {
	box-sizing: border-box;
	vertical-align: top;
	margin: .5em .5em .5em 0;
	border: .1em solid #999;
	overflow-x: scroll;
}
.table_box {
	display: inline-block;
	box-sizing: border-box;
	vertical-align: top;
	margin: .5em .5em .5em 0;
	background-color: #fff;
}
table.calender {
	table-layout: fixed;
	border-collapse: collapse;
	border: .1em solid #999;
	float: left;
}
table.calender td {
	border-left: .1em solid #999;
	padding: .3em .4em;
}
table.calender thead tr {
	border: .1em solid #999;
	background-color: #FFDB99;
}
table.calender tbody {
	text-align: right;
}
table.calender tbody tr:nth-of-type(2n) {
	background-color: #FEEDCC;
}
table.calender tbody tr td:first-child {
	padding: 0;
	text-align: center;
}
table.calender tfoot tr {
	border: .1em solid #999;
	background-color: #FFDB99;
}
table.calender tfoot tr:nth-of-type(2n) {
	background-color: #FEEDCC;
}

/* グラフ */
#GraphArea {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
div[id^="container"] {
	display: none;
	width: calc(50% - .5em);
	margin-bottom: 1em;
	border: .1em solid #999;
	overflow: auto;
	resize: horizontal;
}
.chart-container {
	box-sizing: border-box;
	width: 100%;
	height: 50vh;
	padding: .5em;
}
.graph_buttons {
	width: 95%;
	margin: 0 auto;
	border-top: .1em solid #999;
	padding-top: .5em;
	color: #666;
	text-align: center;
	user-select: none;
	-webkit-touch-callout: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
_::-webkit-full-page-media, _:future, :root .graph_buttons button {
	-webkit-appearance: none;
}
.graph_buttons button {
	display: inline-block;
	height: 2em;
	margin-bottom: .5em;
}
div[id^="graph_footer"] {
	padding: .5em;
	color: #666;
}

@media screen and (max-width: 43em) {
	#date_box { margin-top: .5em; border-top: .2em solid #ccc; }
	.filter_label { padding: .6em 0; }
	.filter_content { width: 100%; }
	div[id^="container"] { width: 100%; }
	.graph_buttons button { height: 3em; }
}
@media screen and (max-width: 34em) {
	.table_box { width: 100%; overflow-x: scroll; }
	textarea.calender { width: 100%; }
}