/* PC */
body {
	font-size: 12pt;
	font-family: sans-serif;
	margin: 0;
}
#top_div{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	max-height: 100vh;
}
header {
	width: 450px;
	height: 90px;
	background-color: burlywood;
	nav {
		display: none;
	}
}

#tabs {
	display: none;
	input {
		display: none;
	}
	label {
		color: black;
		background: LightGray;
		/*font-weight: bold;*/
		text-shadow: 0 -1px 0 rgba(0,0,0,.2);
		white-space: nowrap;
		text-align: center;
		padding: 10px .5em;
		order: -1;
		position: relative;
		z-index: 1;
		cursor: pointer;
		border-radius: 5px 5px 0 0;
		flex: 1;
	}
	label:not(:last-of-type) {
		margin-right: 5px;
	}
	input:checked+ label {
		background: darkgoldenrod;
		color: white;
	}
}
#tabs:after {
	content: '';
	width: 100%;
	height: 3px;
	background: darkgoldenrod;
	display: block;
	order: 0;
}

#data_div {
	width: 450px;
	overflow: scroll;
	background-color: burlywood;
	height: calc(100vh - 93px);
	#search_div {
		height : 0px;
		transition: height 0.5s ease-in;
		overflow: scroll;
	}
	#list_div {
		height : fit-content;
		transition: height 0.5s ease-in;
		overflow: clip;
	}
	#detail_div {
		height : 0px;
		transition: height 0.5s ease-in;
		overflow: scroll;
	}
	.kokoku {
		margin:5px auto; text-align:center;
	}
	.suspendMessage{
		padding: 20px;
		font-size: x-large;
	}
	#message {
		background-color : white;
		color: black;
		font-size : 12pt;
		border : solid 1px #888888;
		text-align:left;
		margin:5px auto;
		padding: 5px;
		width:95%;
	}
	details {
		border: 1px solid sienna;
		margin : 5px 2px;
		padding: 2px 10px;
		.smallfont{
			font-size: small;
		}
		.ul{
			text-decoration:underline;
		}
		.danraku2{
			margin-top: 10px;
		}
	}
	
	fieldset {
		border: 1px solid sienna;
		div {
			padding:2px;
		}
	}
}

#map_canvas {
	height: calc(100vh);
	background-color: lightblue;
	width: calc(100% - 450px);
}

/* mapBox ボタン*/
DIV.sdnCtrl, LABEL.sdnCtrl, LABEL.sdnIconCtrl{
	display: block;
	margin : 5px 0px;
	border : 2px solid #67ab23;
	border-radius : 5px;
	background-color : white;
	opacity	:	0.9;
	cursor :	pointer;
	text-align :	center;
	input[type="checkbox"]{
		display: none;
	}
}
LABEL.sdnCtrl:has(input#gps_on:checked){
	background-color: yellow;
}
LABEL.sdnIconCtrl {
	background-image: url(../icon/MAML0840gray.gif);
	background-position: center;
	background-repeat: no-repeat;
}

LABEL.sdnIconCtrl:has(input#icon_on:checked){
	background-image: url(../icon/MAML0840.gif);
}

SELECT.sdnCtrl{
	/* reset */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	/* styling */
	display: block;
	margin : 5px 0px;
	background-color: white;
	border : 2px solid #67ab23;
	border-radius: 5px;
	opacity	:	0.9;
	cursor :	pointer;
	line-height: 1.5em;
	text-align : left;
	padding: 0.5em 3.5em 0.5em 1em;

	background-image:
		linear-gradient(45deg, transparent 50%, gray 50%),
		linear-gradient(135deg, gray 50%, transparent 50%);
	background-position:
		calc(100% - 20px) calc(1em + 2px),
		calc(100% - 15px) calc(1em + 2px),
		calc(100% - 2.5em) 0.5em;
	background-size:
		5px 5px,
		5px 5px,
		1px 1.5em;
	background-repeat: no-repeat;
}
SELECT.sdnCtrl:focus {
	background-image:
		linear-gradient(45deg, green 50%, transparent 50%),
		linear-gradient(135deg, transparent 50%, green 50%),
		linear-gradient(to right, #ccc, #ccc);
	background-position:
		calc(100% - 15px) 1em,
		calc(100% - 20px) 1em,
		calc(100% - 2.5em) 0.5em;
	background-size:
		5px 5px,
		5px 5px,
		1px 1.5em;
	background-repeat: no-repeat;
	border-color: green;
	outline: 0;
}
SELECT.sdnCtrl:-moz-focusring {
	color: transparent;
	text-shadow: 0 0 0 #000;
}


/*search div*/
.table {display:table;}
.row {
	display:table-row;
	.searchItem{
		width:7em;
	}
}
.row>div {display:table-cell;}
input.date{display:inlline-block;width:120px;}
input.time{display:inlline-block;width:70px;}
#b_search {
	text-align: center;
}

/*list div*/
table{
	margin: auto;
	border-collapse: collapse;
}
.searchItem{
	vertical-align:top;
}
table.list {
	th.col1st{
		text-align:left;width:250px;
	}
	th.col2nd{
		text-align:center;width:150px;
	}
	td{
		padding:1px 1px;
		border:solid 1px #888888;
		vertical-align:middle;
	}
	td.list2nd{
			text-align:center;
			button {
				display: inline-block;
				margin: 5px;
			}
		}
	}
}

/*detail div*/
span.name_w {display:block; }
div.caption {padding:2px;font-size:8pt;text-align:right;}
div.can span{white-space: nowrap;}
img.pict {box-sizing:border-box; width:100%;}
#detail_div input:checked + label {
	background-color: yellow;
}
pre#com{
	margin:0px 0px 0px 10px;
	width:400px;
	white-space: pre-wrap;
	word-wrap: break-word;
}


/* form f1 */
#f1 {
	textarea {
		width: 100%;
	}
	div.checkboxes{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 1px 2px;
		input:checked + label {
				background-color: #ffff33;
		}
	}
	div.buttons {
		text-align: center;
	}
}

#data_div{
	#search{
		display: none;
	}
	#detailInfo{
		display: none;
	}
	#detailErr{
		display: none;
	}
	#toListButton{
		display: none;
	}
}

.checkbox {
	display:inline-block;
	padding:0px;
	margin:5px 5px;
	label {
		box-sizing: border-box;
		cursor: pointer;
		padding: 5px 5px;
		width: auto;
		border: 1px solid darkgoldenrod;
	}
}
.checkbox input:checked + label {
	background-color: #ffff33;
}
.checkbox input[type=checkbox] {
	display: none;
}

div.mastdonButton {
	border-radius: 100px;
	display: inline-block;
	width: 120px;
	padding: 3px;
	box-sizing: border-box;
	background-color: #858AFA;
	color: #17063B;
	text-decoration: none;
	text-align: center;
	margin: 10px 0;
	a:link {
		color: #17063B;
		text-decoration: none;
	}
	a:visited {
		color: #17063B;
		text-decoration: none;
	}
	a:hover {
		color: white;
		text-decoration: none;
	}
}

div.blueskyButton {
	border-radius: 100px;
	display: inline-block;
	width: 120px;
	padding: 3px;
	box-sizing: border-box;
	background-color: #0085FF;
	color: #17063B;
	text-decoration: none;
	text-align: center;
	margin: 10px 0;
	a:link {
		color: #17063B;
		text-decoration: none;
	}
	a:visited {
		color: #17063B;
		text-decoration: none;
	}
	a:hover {
		color: white;
		text-decoration: none;
	}
}
#toMapButton{
	display: none;
}
span.displayNoneAtPCmode{
	display: none;
}

/* タッチデバイス */
body.touch-device {
	body {
		font-size: 14pt;
	}
	#top_div{}
	header {
		width: 100vw;
		nav {
			display: block;
		}
	}
	#tabs {
		display: flex;
		flex-wrap: wrap;
		margin:5px 0 0 0;
		height: 48px;
		width: 100vw;
	}
	#data_div {
		height: calc(100vh - 93px - 60px);
		width: 100vw;
	}
	#map_canvas {
		width: 100vw;
		background-color: lightblue;
		height: calc(100vh - 93px - 60px);
	}
	
	fieldset div {
		font-size:12pt;
	}
	legend {}
	button {
		margin:5px 10px;
		padding:5px;
		font-size:20px;
		span {
			white-space: nowrap;
		}
	}
	
	
	/*search div*/
	.table {}
	.row {}
	.row>div {}
	
	input {
		font-size:20px;
	}
	select {
		margin:5px;
		padding:5px;
		font-size:20px;
	}
	option {
		margin:5px;
		padding:5px;
		font-size:20px;
	}
	input.date{
		width:150px;
	}
	input.time{
		width:100px;
	}
	
	/*list div*/
	table{}
	.searchItem{}
	table.list {
		width: 95%;
		th.col1st{
			/*min-width:200px;*/
			button {
				margin:5px;
				font-size: 14pt;
			}
		}
		th.col2nd{
			min-width:70px;
		}
		td.list2nd{
			button{
				display: inline-block;
				margin: 10px;
			}
		}
	}
	#toMapButton{
		display: inline-block;
	}
	span.displayNoneAtPCmode{
		display: inline;
	}
	
	DIV.sdnCtrl{
	}
	SELECT.sdnCtrl{
		margin: 5px 0px;
	}
	SELECT.sdnCtrl:focus {
	}
	SELECT.sdnCtrl:-moz-focusring {
	}
}