html, body { margin: 0; padding: 0; background: transparent; font: calc(12px + 0.25vw)/1.5 Arial, "Yu Gothic", YuGothic, Meiryo, sans-serif; }

:link, :visited { color: teal; }

p { margin: 0 0 1em; }

ul, li, dl, dt, dd { list-style: none; margin: 0; padding: 0; }

input[type="checkbox"], input[type="checkbox"] ~ button { display: none; }

input[type="checkbox"]:checked ~ button { display: inline-block; }

input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button { -webkit-appearance: none; }

input[type="text"], input[type="date"], textarea, button, .button, .toggle { -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; margin: 0; padding: 0 0.2em; border: solid silver; border-width: 1px 1px 2px; font: 100%/2 Arial, "Yu Gothic", YuGothic, Meiryo, sans-serif; text-decoration: none; }

textarea { padding: 0.2em; line-height: 1.5; }

button, .button, .toggle { padding: 0 0.5em; text-align: center; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.6), -1px -1px 1px rgba(128, 0, 0, 0.3); color: white; background: #fffff2 -webkit-gradient(linear, left top, left bottom, from(#fffff2), color-stop(49%, #c8d3ce), color-stop(51%, #a3b6b6), to(#dae2da)); background: #fffff2 linear-gradient(to bottom, #fffff2 0%, #c8d3ce 49%, #a3b6b6 51%, #dae2da 100%); cursor: default; }

button[type="submit"], .button.colored { border-color: #e0b360; background: #ffffd9 -webkit-gradient(linear, left top, left bottom, from(#ffffd9), color-stop(49%, #f4ba57), color-stop(51%, #ec8c00), to(#f7d182)); background: #ffffd9 linear-gradient(to bottom, #ffffd9 0%, #f4ba57 49%, #ec8c00 51%, #f7d182 100%); }

:checked + .toggle { border-color: #90b090; background: #ffffd9 -webkit-gradient(linear, left top, left bottom, from(#ffffd9), color-stop(49%, #7dbe57), color-stop(51%, #269300), to(#a8d482)); background: #ffffd9 linear-gradient(to bottom, #ffffd9 0%, #7dbe57 49%, #269300 51%, #a8d482 100%); }

button:not(:disabled), :not(.disabled) + .toggle, :link, :visited { cursor: pointer; }

button:not(:disabled):hover, :not(.disabled) + .toggle:hover, :link:hover, :visited:hover { -webkit-filter: brightness(0.95) contrast(1.25); filter: brightness(0.95) contrast(1.25); }

button:disabled, .button.disabled, s.button, :disabled + .toggle { cursor: default; -webkit-filter: contrast(0.5) brightness(1.25); filter: contrast(0.5) brightness(1.25); }

:root { background: white; color: black; }

#header #sitename a { display: block; margin: 0; padding: 0; background: #60a0a0; color: white; font-weight: bold; text-align: center; text-decoration: none; }

#main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 95%; margin: 1em auto; }

#main > * { -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; margin: 0 1.5%; }

#main > #title, #main > .main { -webkit-box-flex: 0; -ms-flex: 0 1 100%; flex: 0 1 100%; }

#main > .contents { -webkit-box-flex: 1; -ms-flex: 1 1 20em; flex: 1 1 20em; }

ul.calender { display: -ms-grid; display: grid; border: 1px solid silver; padding: 0.2em; grid-gap: 0.2em; -ms-grid-columns: (1fr)[7]; grid-template-columns: repeat(7, 1fr); -ms-grid-rows: auto; grid-template-rows: auto; }

ul.calender.main { grid-auto-rows: 10em; }

ul.calender .button { display: block; }

ul.calender li.calender { -webkit-box-shadow: inset 0 0 0 1px silver; box-shadow: inset 0 0 0 1px silver; background: white; }

ul.calender li.calender.past { background: #eee; color: #666; }

ul.calender li.calender.now { background: #fed; }

ul.calender li.column0 { -ms-grid-column: 1; grid-column: 1; }

ul.calender li.column1 { -ms-grid-column: 2; grid-column: 2; }

ul.calender li.column2 { -ms-grid-column: 3; grid-column: 3; }

ul.calender li.column3 { -ms-grid-column: 4; grid-column: 4; }

ul.calender li.column4 { -ms-grid-column: 5; grid-column: 5; }

ul.calender li.column5 { -ms-grid-column: 6; grid-column: 6; }

ul.calender li.column6 { -ms-grid-column: 7; grid-column: 7; }

ul.calender dd.guest > * { display: block; border-radius: 0.2em; background: rgba(128, 128, 128, 0.5); color: white; margin: 0.2em auto; padding: 0 0.5em; -webkit-box-sizing: border-box; box-sizing: border-box; width: 10vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; }

ul.calender dd.guest > *::before { content: "\20\2022\20"; }

ul.calender dd.guest a:hover { background: rgba(0, 128, 128, 0.5); }

ul.calender dd.status { color: rgba(0, 0, 0, 0.3); font-weight: bold; text-align: center; }

ul.calender dd.status::after { content: ""; display: block; margin: 0 0.5em; border-top: 3px double silver; }

ul.calender dd.dayoff { background: -webkit-gradient(linear, left top, left bottom, from(rgba(192, 192, 192, 0.5)), to(rgba(192, 192, 192, 0))); background: linear-gradient(to bottom, rgba(192, 192, 192, 0.5), rgba(192, 192, 192, 0)); }

ul.calender dd.filled { background: -webkit-gradient(linear, left top, left bottom, from(rgba(238, 170, 170, 0.5)), to(rgba(238, 170, 170, 0))); background: linear-gradient(to bottom, rgba(238, 170, 170, 0.5), rgba(238, 170, 170, 0)); }

ul.calender dd.enable { background: -webkit-gradient(linear, left top, left bottom, from(rgba(204, 238, 136, 0.5)), to(rgba(204, 238, 136, 0))); background: linear-gradient(to bottom, rgba(204, 238, 136, 0.5), rgba(204, 238, 136, 0)); }

ul.calender-navi { display: -ms-grid; display: grid; grid-gap: 0.5em; -ms-grid-columns: (1fr)[13]; grid-template-columns: repeat(13, 1fr); text-align: center; font-size: 120%; white-space: nowrap; }

ul.calender-navi li.back { grid-column: auto / span 5; }

ul.calender-navi li.prev { -ms-grid-column: 1; -ms-grid-column-span: 4; grid-column: 1 / span 4; text-align: left; }

ul.calender-navi li.next { grid-column: auto / span 4; text-align: right; }

ul.calender-navi li.current { font-weight: bold; }

ul.calender-navi li.number * { display: block; color: white; background: rgba(0, 128, 128, 0.5); text-decoration: none; }

#header ul.calender-navi li { -ms-grid-row: 1; grid-row: 1; }

#header ul.calender-navi li.number { -ms-grid-row: 2; grid-row: 2; }

#footer ul.calender-navi li { -ms-grid-row: 2; grid-row: 2; }

#footer ul.calender-navi li.number { -ms-grid-row: 1; grid-row: 1; }

input#appoint-name { width: 10em; }

input#appoint-address { width: 15em; }

textarea#appoint-notes { width: 15em; height: 5em; }

form.appoint { font-size: 120%; line-height: 1.2; }

form.appoint label:first-child { display: table; font-weight: bold; color: gray; }

p.notice { background: #408040; color: white; }

p.notice::before { content: "!"; display: inline-block; border-radius: 100%; margin: 0.5em; padding: 0.2em; width: 1em; font: 100%/1 Impact, sans-serif; text-align: center; background: white; color: #408040; }

p.status, p.guests, p.capacity { display: table; border-bottom: 3px double silver; }

ul.guests { display: table; min-width: 12em; padding: 0.5em 1em; -webkit-box-shadow: inset 0 0 0 1px silver, inset 0 0 0 calc(1px + 0.2em) white, inset 0 0 0 calc(2px + 0.2em) silver; box-shadow: inset 0 0 0 1px silver, inset 0 0 0 calc(1px + 0.2em) white, inset 0 0 0 calc(2px + 0.2em) silver; white-space: nowrap; }

ul.guests li + li { border-top: 1px dashed silver; }