body {font-family: "LINESeedSansTH", Serif;}

.container {width:80%; margin:0 auto; position:relative;}
.clear {clear:both;}

#header {display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); border-bottom: solid 1px #666666; margin-bottom:20px;}
.header-title {font-size:200%; font-weight:bold; color:#539704;}
.header-member {text-align:right;}
.header-member img {width:50px;}

.timeline {display:grid; grid-template-columns:repeat(auto-fit, minmax(0px, 1fr)); }
.timeline-icon {text-align:center;}
.timeline-icon img {width:30px;}

.timeline-line {text-align:center;}
span.timeline-line-left {width:50%; float:right; border-top:solid 3px #afafaf;}
span.timeline-line-right {width:50%; float:left; border-top:solid 3px #afafaf;}
span.timeline-line-center {display:block; width:100%; border-top:solid 3px #afafaf;}
b.dot-left {background-color:#539704; border-radius: 25px; height:8px; width:8px; display:block; margin-top:-6px;}
b.dot-right {background-color:#539704; border-radius: 25px; height:8px; width:8px; display:block; margin-top:-6px; margin-left:100%;}
b.dot-center {background-color:#539704; border-radius: 25px; height:8px; width:8px; display:block; margin:-6px auto 0 auto;}

.timeline-number { text-align:center;}

.timeline-detail {text-align:center;}
.timeline-detail span {text-align:center; background:#539704;  border-radius: 10px; color:#FFFFFF; margin:0 auto; padding:3px 10px; font-size:80%;  }

.content {width:85%; margin:20px auto; border:solid 1px #999999; padding:10px;}
.content-blank {border:none; text-align:right;}
.content-header {}
.content-header span {background-color:#000000; border-radius: 25px; color:#FFFFFF; padding:0 10px;}
.content-header h3 {display:initial;}
.content-header img {width:35px; margin:0 10px;}
.content-detail {padding-left:100px; margin-top:10px;}



.content-result {display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); margin:20px 0; grid-gap:0.1rem; width:100%;}
.content-result-left, .content-result-right {width: 100%; margin: 0 auto; font-size:200%; font-weight:bold; border-bottom:dotted 1px #ade171;}
.content-result-left span, .content-result-right span {font-size:130%; color: #539704;}
.content-result-left {text-align:right;}
.content-result-left img {width:50px;}
.content-result-right {text-align:left;}
.content-result h1 {}
.content-result h1 span {}

input[type=number], select {
  width: 25%;
  padding: 12px 20px;
  margin: 8px 0 8px 10px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
input[type=text], select {
  width: 25%;
  padding: 12px 20px;
  margin: 8px 0 8px 10px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
input[type=submit]:hover {
  background-color: #45a049;
}
select, input {width:35%; font-family: "LINESeedSansTH", Serif; font-size:100%; font-weight:bold; margin-right:20px;}


.content-detail-block {
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  font-weight:bold;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 10px 20px 12px 0;
}

/* Hide the browser's default radio button */
.content-detail-block input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.content-detail-block:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.content-detail-block input:checked ~ .checkmark {
  background-color: #539704;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.content-detail-block input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.content-detail-block .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

form.map-search {width:90%; display:block; margin:0 auto;}
form.map-search input {width:85%;}

.button {
  background-color: #979797;
  border: none;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  font-weight:bold;
}
.map-show {
	width:90%; margin:0 auto;
}

@media screen and (max-width: 1200px) {
	.content-detail-block {display:block;}
	.timeline-detail span {display:block; width:50%;}
	form.map-search {width:100%;}
	form.map-search input, .button {width:95%; margin: 10px auto; display: block;}
	.content-detail form span {display:block; width:100%;}
	.content-detail form span select {width:80%;}
}
@media screen and (max-width: 1100px) {
	.content-result-left {text-align:right;}
	.content-result-right {text-align:left;}
}