@charset "UTF-8";
header#headerid1 {
	margin-top: 15px;
	display: flex;
}

div.nav-button {
	font-weight: bold;
	font-size: 150%;
	background: linear-gradient(180deg, #eaf1ff, #d0e0ff);
	border-radius: 20px;
	box-shadow: inset 0 0 0 1px #c3d3ff, 0 2px 6px rgba(0,0,0,.08);
	padding: 10px;
	width: 150px;
	height: 1.2em;
	text-align: center;
	margin: 7px 12px;
}

form#userfrm{
	text-align: left;
}

#divid1 {
	left:50px;
	top: 160px;
	height:750px;
	width:1800px;
	position:absolute;
	background: linear-gradient(180deg, #f3f7fc 0%, #e8f0fb 40%, #f6f8fc 100%);
	display: grid;
	grid-template-columns: minmax(0, 42%) minmax(90px, 8%) minmax(0, 50%);
	grid-template-rows: 10% 65% 25%;
	overflow: hidden;
	column-gap: 24px;
	padding: 0 24px;
	box-sizing: border-box;
}

#autoreload_btm
{
top:50px;
left:350px;
font-size:50px;
position:absolute;
}

footer small {
display:block;
position:absolute;
top:910px;
padding:10px 0 20px 0;
font-size:18px;
text-align:center;
line-height:1;
/* background:red; */
background: linear-gradient(to right, #cde4ff, #057ae7);
height: 10px;
width:100%;
color:white;
font-family:Arial,sans-serif;
}


#site-manager-area {
	grid-column: 1/2;
	grid-row: 1/2;
	display: grid;
  	place-items: center;
}
#site-manager-caption {
	font-size: xx-large;
	font-weight: bold;
}
#site-manager-text {
	font-size: xx-large;
	font-weight: bold;
}
#image-area {
	grid-column: 1/2;
	grid-row: 2/3;
	display: grid;
  	place-items: center;
	grid-template-rows: 20% 80%;
}
#image-caption {
	font-size: 450%;
	grid-column: 1/2;
	font-weight: bold;
	width: 100%;
}
#image-caption-text {
	margin: 0;
}
#image-wbgt {
	object-fit: contain;
	overflow: hidden;
}
#pict-image {
	max-width: 100%;
	height: auto;
	display: block;
}

#legend-area {
	grid-column: 2/3;
	grid-row: 1/3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 18px;
	padding: 24px 0;
}

#legend-title {
	margin: 0;
	font-size: 180%;
	font-weight: bold;
	color: #0f1f4b;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	letter-spacing: 0.15em;
}

#wbgt-legend {
	width: 100%;
	height: 100%;
	max-height: 560px;
	min-height: 420px;
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	border-radius: 28px;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(15, 31, 75, 0.12), 0 10px 30px rgba(15, 31, 75, 0.08);
	background: rgba(255,255,255,.45);
}

.legend-item {
	flex: 1 1 20%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
	opacity: .42;
}

.legend-item::after {
	content: "";
	position: absolute;
	inset: 8px;
	border: 3px solid transparent;
	border-radius: 18px;
	pointer-events: none;
}

.legend-item.is-active {
	transform: scale(1.06);
	opacity: 1;
	z-index: 2;
	box-shadow: 0 10px 24px rgba(15, 31, 75, 0.22);
}

.legend-item.is-active::after {
	border-color: rgba(255,255,255,.92);
}

.legend-item.is-active::before {
	position: absolute;
	right: 10px;
	top: 10px;
	font-size: 95%;
	font-weight: bold;
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

.legend-label {
	font-size: 190%;
	font-weight: bold;
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(0,0,0,.18);
	writing-mode: vertical-rl;
	text-orientation: mixed;
	letter-spacing: .1em;
}

.legend-danger { background: linear-gradient(180deg, #f87171 0%, #dc2626 100%); }
.legend-very-warning { background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%); }
.legend-warning { background: linear-gradient(180deg, #fde047 0%, #eab308 100%); }
.legend-warning .legend-label,
.legend-warning.is-active::before { color: #5b4300; text-shadow: none; }
.legend-caution { background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%); }
.legend-safe { background: linear-gradient(180deg, #67e8f9 0%, #0284c7 100%); }

#alert-area {
	grid-column: 1/4;
	grid-row: 3/4;
	display: grid;
  	place-items: center;
	border: 1px solid #c3d3ff;
	background: rgba(255,255,255,.72);
	overflow: hidden;
}

#alert-message {
  display: inline-block;
  padding-left: 100%;
  font-size: 400%;
  font-weight: bold;
  white-space: nowrap;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% { transform: translate(0); }
  100% { transform: translate(-100%); }
}

.hexagon3__wrapper {
	display: flex;
	flex-wrap: wrap;
	--wrapper-width: 100%;
	width: var(--wrapper-width);/* 全体の大きさを変更できる */
	margin-right: calc(-1 * var(--wrapper-width) / 3 * 0.25 * 2 - var(--wrapper-width) / 3 * 0.05 * 2);
	margin-top: 18%;
	margin-bottom: 20%;
	overflow: hidden;
}
@media(max-width: 768px) {
	.hexagon3__wrapper {
		--wrapper-width: 100%;
		font-size: 3vw;
	}
}
.hexagons {
	width: calc(100% /3);
}
.honeycomb-area {
	display: flex;
	justify-content: center;
	align-items: center;
	grid-column: 3/4;
	grid-row: 1/3;
}
.hexagon-3_hexagon {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 300%;
	width: 100%;
	aspect-ratio: 200 / 173;/* 正六角形になる比率 */
	background-color: #1d4ed8;
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.hexagon-3_hexagon>div {
	display: grid;
	grid-template-rows: 70% 30%;
	justify-content: center;
	align-items: center;
	width: 90%;
	height: 90%;
	background-color: #f3f6fb;
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

#centersource {
	display: flex;
	font-weight: bold;
}
#timer-box {
	justify-content: center;
	align-items: center;
	font-weight: bold;
	font-size: 55%;
}
.value-unit {
	color: #2563eb;
}
.sensor-value {
	font-size: 120%;
	margin-top: 25%;
	font-weight: bold;
}
/* 2行目と3行目の六角形を上にずらして縁を重ねる */
.hexagon-3_hexagon:nth-of-type(2),
.hexagon-3_hexagon:nth-of-type(3) {
	margin-top: -5%;
}
/* 中央の列を下にずらす */
.honeycomb-area .hexagons-center {
	transform: translateY(calc(100% / -4));
}
/* 2列目と3列目の六角形を左にずらして縁を重ねる */
.honeycomb-area .hexagons-center,
.honeycomb-area .hexagons-right {
	margin-left: calc(-100% / 3 * 0.25 - 100% / 3 * 0.05);
}

#site-manager-caption,
#site-manager-text,
#image-caption,
#centersource,
.sensor-value,
#timer-box,
#alert-message {
	color: #0f1f4b;
}

#alert-message {
	text-shadow: 0 1px 0 rgba(255,255,255,.45);
}