html { height: 100%; user-select: none; }
div#header { background-color: #e0e0e0; border-bottom: 1px solid #c0c0c0; position: fixed; top: 0; width: 100%; }
div#history { padding: 0.5em; }
div#footer { padding: 0.5em; }
form { padding: 0.5em; }
p { margin: 0; }
th, td { vertical-align: top; }
td.day { padding-right: 0.5em; }
td.cate { padding-left: 0.5em; padding-right: 0.5em; text-indent: -1.2em; border-left: 1px dashed gray; font-size: 80%; vertical-align: middle; }

.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.red { color: red; }
.back_yellow { background-color: #ffffc0; }

.w2 { width: 2em; }
.w3 { width: 3em; }
.w4 { width: 4em; }
.w5 { width: 5em; }
.w6 { width: 6em; }
.w8 { width: 8em; }
.w10 { width: 10em; }


/* PC */
@media only screen and (min-width: 1000px) {

body { height: 100%; font-size: 1.6vw; margin: 0; }
button, input, select, textarea { font-size: 100%; }
body.center { display: flex; align-items: center; justify-content: center; width: 100%; margin: 0; }
textarea { width: 90%; }
div#history { margin-top: 8em; }

.big { font-size: 4vw; }

/* ログイン画面用 */
.deco { background-color: #e0e0e0; border: 1px solid #000000; border-radius: 0.1em; padding: 1em 2em; box-shadow: 2px 2px 8px #808080; }
.deco h1 { font-size: 7vw; color: #ffffff; letter-spacing: 0.2em; text-stroke: 1px #000000; -webkit-text-stroke: 1px #000000; text-shadow: 0.07em 0.07em #000000; margin: 0; }

#container
{
	display: grid; grid-template-rows: 1.5em; grid-template-columns: 3em 13em 3em 1fr 3em;
	grid-template-areas:
	"label1 input1 label2 input2 input2"
	"label3 input3 input3 input3 input3"
	"label4 label4 label4 label4 input5"
	;
}
#label1 { grid-area: label1; }
#input1 { grid-area: input1; }
#label2 { grid-area: label2; }
#input2 { grid-area: input2; }
#label3 { grid-area: label3; }
#input3 { grid-area: input3; }
#label4 { grid-area: label4; }
#input5 { grid-area: input5; }

}


/* スマホ */
@media only screen and (max-width: 999px) {

body { height: 100%; font-size: 5vw; margin: 0; }
button, input, select, textarea { font-size: 100%; }
body.center { display: flex; align-items: center; justify-content: center; width: 100%; margin: 0; }
textarea { width: 90%; }
div#history { margin-top: 14em; }

.big { font-size: 7vw; }

/* ログイン画面用 */
.deco { background-color: #e0e0e0; width: 100%; height: 100%; }
.deco h1 { font-size: 12vw; color: #ffffff; letter-spacing: 0.2em; text-stroke: 1px #000000; -webkit-text-stroke: 1px #000000; text-shadow: 0.07em 0.07em #000000; margin: 0.6em 0; }
.deco tr { line-height: 3em; }

#container
{
	display: grid; grid-template-rows: 1.5em; grid-template-columns: 3em 1fr;
	grid-template-areas:
	"label1 input1"
	"label2 input2"
	"label3 input3"
	"label4 label4"
	"input5 input5"
	;
}
#label1 { grid-area: label1; }
#input1 { grid-area: input1; }
#label2 { grid-area: label2; }
#input2 { grid-area: input2; }
#label3 { grid-area: label3; }
#input3 { grid-area: input3; }
#label4 { grid-area: label4; }
#input5 { grid-area: input5; }

}