@charset "utf-8";

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.hidden {
	display: none;
}
html {
	scroll-padding-top: 1em;
}
body {
	font-size: calc(100vw / 7 / 2.85);
	padding: 2px;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%; /* Safari */
}
table {
	border-collapse: collapse;
	width: 100%;
}
thead {
	position: sticky;
	top: -1px;
	background-color: #fff;
	border-bottom: 2px solid #000;
	filter: drop-shadow(0px 10px 5px #888);
	z-index: 2;
}
tr {
}
td, th {
	width: calc(100vw / 7);
	padding: 2px;
	border: 2px solid #000;
	line-height: 100%;
	position: relative;
}
th {
	height: calc(100vw / 7 / 3 * 1);
}
td {
	height: calc(100vw / 7 / 3 * 2);
	vertical-align: top;
}
.week {
}
.sun {
	color: #f00;
}
.sat {
	color: #00f;
}

.days {
}
.day_cell {
	cursor: pointer;
	background-color: #fff;
	position: relative;
}
.day_cell:hover {
	background-color: #ffc;
}

.back {
	background-color: #ddd;
}
.now {
	background-color: #8f8;
}
[data-hash=true] {
	background-color: #ffc;
	filter: drop-shadow(0 0 1em #88f);
	z-index: 1;
}

.month {
	display: none;
}
.day {
	font-size: 1.2em;
}
.blank {
	border: 0px solid transparent;
	height: 1em;
}
.day1 {
}
.year-month {
	position: sticky;
	top: -0.25em;
	z-index: 1;
	background-color: #fff;
	color: #666;
}
.year-month th {
	padding: 1.5em 0 0.25em 0;
}


.data {
	width: calc(100% - 0.5em);
	margin: 0.25em;
	padding: 0.25em;
	display: none;
	position: fixed;
	top: 0.25em;
	left: 0;
	background-color: #fff;
	border: 3px solid #000;
	filter: drop-shadow(5px 5px 10px #000);
	z-index: 2;
	line-height: 144%;
	border-radius: 0.5em;
	overflow: hidden;
	cursor: auto;
}
[data-display="true"] .data {
	display: block;
}
.data h3 {
	font-size: 0.9em;
}
.data textarea {
	field-sizing: content;
	font-size: inherit;
	width: 100%;
	padding: 0.125em;
	min-height: 3.5em;
	max-height: 7em;
	resize: vertical;
}
.data .close {
	width: 1.75em;
	height: 1.25em;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	right: 0;
	background-color: #f00;
	color: #fff;
	cursor: pointer;
}

.resave {
	font-size: 0.8em;
	font-weight: 800;
	width: 2em;
	height: 1.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	right: 0;
	bottom: 0;
	color: #fff;
	background-color: #f00;
	border: 2px solid #f00;
	border-radius: 100%;
	box-sizing: content-box;
	scale: 0.9;
	pointer-events: none;
}
.resave:empty {
	display: none;
}
[data-car="true"]::before {
	content: '🚙';
	position: absolute;
	scale: 1.5;
	translate: -1.75em;
	filter:
		drop-shadow(0 0 0.5px #fff)
		drop-shadow(0 0 0 #fff)
		drop-shadow(0 0 0 #fff)
		drop-shadow(0 0 0 #fff)
		drop-shadow(0 0 0 #fff);
}


/* --------------------------------------------------------------
縦画面になった場合
-------------------------------------------------------------- */
@media (orientation: portrait) {
body {
	font-size: calc(100vw / 8 / 3.15);
}
.month {
	position: absolute;
	top: 0.125em;
	left: 0;
	font-size: 1.3em;
}
.day {
	font-size: 2em;
}
th {
	font-size: 3em;
	height: 1.3em;
}
td {
	height: 5em;
	line-height: 175%;
}
.data {
	font-size: 2.5em;
}
.data textarea {
	height: 7em;
}
.resave {
	scale: 1.5;
	margin: auto;
	left: 0;
	top: 10%;
}

[data-car="true"]::before {
	translate: 0.5em 1.05em;
}

}