@charset "utf-8";

/*~~*/

header {
	background: var(--bg-floormap);
	.logo::before,
	.menu,
	.deco::before {
		background: var(--bg-floormap);
	}
	.menu li.floormap {
		background: #000;
		a {
			color: #fff;
		}
	}
}

/*~~*/

main {
	.head.-menu {
		background: var(--bg-base);
		h1.pname {
			background: var(--bg-floormap);
		}
		h1.pname .en {
			width: 50%;
			display: flex;
			justify-content: space-between;
			color: #fff;
			font-size: 18px;
		}
		.label {
			display: none;
		}
		.search {
			flex: 1;
			padding: 15px;
			ul {
				display: flex;
				justify-content: flex-end;
				flex-wrap: wrap;
				gap: 5px;
			}
			li {
				width: calc((100% - 5px) / 2);
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: var(--bg-floormap-light);
				border-radius: 5px;
				font-size: 1.8rem;
				line-height: 1;
				.floor {
					flex: 1;
					padding: 15px 0 15px 10px;
					border-radius: 5px;
				}
				.floor:hover,
				.floor.active {
					cursor: pointer;
					color: #fff;
					background: var(--bg-floormap);
				}
				.floor.hit[data-map="map-4号館"] {
					background-color: var(--bg-fmap4-hit);
				}
				.floor:hover[data-map="map-4号館"],
				.floor.hit:hover[data-map="map-4号館"],
				.floor.active[data-map="map-4号館"],
				.floor.hit.active[data-map="map-4号館"] {
					background-color: var(--bg-fmap4);
				}
				.floor:hover[data-map="map-3号館"],
				.floor.hit:hover[data-map="map-3号館"],
				.floor.active[data-map="map-3号館"],
				.floor.hit.active[data-map="map-3号館"] {
					background-color: var(--bg-fmap3);
				}
				.floor.hit[data-map="map-3号館"] {
					background-color: var(--bg-fmap3-hit);
				}
				.floor:hover[data-map="map-6号館B"],
				.floor.hit:hover[data-map="map-6号館B"],
				.floor.active[data-map="map-6号館B"],
				.floor.hit.active[data-map="map-6号館B"] {
					background-color: var(--bg-fmap6b);
				}
				.floor.hit[data-map="map-6号館B"] {
					background-color: var(--bg-fmap6b-hit);
				}
				.floor:hover[data-map="map-6号館A"],
				.floor.hit:hover[data-map="map-6号館A"],
				.floor.active[data-map="map-6号館A"],
				.floor.hit.active[data-map="map-6号館A"] {
					background-color: var(--bg-fmap6a);
				}
				.floor.hit[data-map="map-6号館A"] {
					background-color: var(--bg-fmap6a-hit);
				}
				.pdf {
					margin: 0 10px;
					padding: 10px;
					border-radius: 5px;
					background: var(--bg-floormap);
					a {
						display: block;
						font-size: 1.4rem;
						font-weight: 500;
						color: #fff;
					}
				}
				.pdf:hover {
					cursor: pointer;
					border-radius: 5px;
				}
				.floor[data-map="map-4号館"] + .pdf:hover {
					background-color: var(--bg-fmap4);
				}
				.floor[data-map="map-3号館"] + .pdf:hover {
					background-color: var(--bg-fmap3);
				}
				.floor[data-map="map-6号館B"] + .pdf:hover {
					background-color: var(--bg-fmap6b);
				}
				.floor[data-map="map-6号館A"] + .pdf:hover {
					background-color: var(--bg-fmap6a);
				}

			}
			li#reset {
				background: var(--bg-floormap);
			}
			li#reset:hover {
				cursor: pointer;
			}
			li:nth-child(3) {
				display: none;
			}
			li:nth-child(6) {
				width: 100%;
				padding: 10px;
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				span {
					text-align: center;
				}
				div {
					display: inline-block;
					text-align: center;
				}
				img {
					width: 50%;
				}
			}
			li:nth-child(6)::before {
				content: "";
				position: absolute;
				z-index: 10;
				inset: 7px;
				border: 1px solid #fff;
				border-radius: 5px;
				pointer-events: none;
			}
			form {
				margin-top: 10px;
			}
			input {
				width: calc((100% - 35px) / 8 * 6 + 25px);
			}
			button {
				width: calc((100% - 35px) / 8 * 2 + 5px);
				background: linear-gradient(to bottom, #fff, var(--bg-base));
			}
			button:hover {
				cursor: pointer !important;
			}
			input, button {
				height: 35px;
				background: #fff;
				border: 1px solid #ccc;
				border-radius: 5px;
			}
		}
	}
	.body {
		#searchMessage:has(span) {
			padding: 10px;
			color: red;
			text-align: center;
		}
		#maps {
			margin-top: 10px;
			.map {
				display: none;
			}
			.map.active {
				display: block;
			}
		}
		/*全体図*/
		#map-floor {
			#floor-3号館 rect,
			#floor-4号館 rect,
			#floor-6号館A polygon,
			#floor-6号館B polygon {
				fill: #000;        /* 塗りありにして */
				fill-opacity: 0;     /* 透明にする */
				pointer-events: all; /* 透明でもhover OK */
				cursor: pointer;
			}
			#floor-3号館:hover rect {
				fill: var(--bg-fmap3);
				fill-opacity: 1;
			}
			#floor-4号館:hover rect {
				fill: var(--bg-fmap4);
				fill-opacity: 1;
			}
			#floor-6号館A:hover polygon {
				fill: var(--bg-fmap6a);
				fill-opacity: 1;
			}
			#floor-6号館B:hover polygon {
				fill: var(--bg-fmap6b);
				fill-opacity: 1;
			}
			#floor-3号館:hover  #maru-3号館,
			#floor-4号館:hover  #maru-4号館,
			#floor-6号館A:hover #maru-6号館A,
			#floor-6号館B:hover #maru-6号館B {
				fill: #fff;
				cursor: pointer;
			}
			#floor-3号館:hover  #text-3 {
				fill: var(--bg-fmap3);
			}
			#floor-4号館:hover  #text-4 {
				fill: var(--bg-fmap4);
			}
			#floor-6号館A:hover #text-6A {
				fill: var(--bg-fmap6a);
			}
			#floor-6号館B:hover #text-6B {
				fill: var(--bg-fmap6b);
			}
			#maru-3号館 {
				fill: var(--bg-fmap3);
			}
			#frame-3号館 {
				stroke: var(--bg-fmap3);
				stroke-width: 5px;
			}
			#maru-4号館 {
				fill: var(--bg-fmap4);
			}
			#frame-4号館 {
				stroke: var(--bg-fmap4);
				stroke-width: 5px;
			}
			#maru-6号館A {
				fill: var(--bg-fmap6a);
			}
			#frame-6号館A {
				stroke: var(--bg-fmap6a);
				stroke-width: 5px;
			}
			#maru-6号館B {
				fill: var(--bg-fmap6b);
			}
			#frame-6号館B{
				stroke: var(--bg-fmap6b);
				stroke-width: 5px;
			}
		}
		#map-3号館 #floor3号館 rect {
			fill: var(--bg-fmap3);
		}
		#map-4号館 #floor4号館 rect {
			fill: var(--bg-fmap4);
		}
		#map-6号館A #floor6号館A rect {
			fill: var(--bg-fmap6a);
		}
		#map-6号館B #floor6号館B rect {
			fill: var(--bg-fmap6b);
		}
		#map-6号館A,
		#map-6号館B,
		#map-3号館,
		#map-4号館 {
			g.active:not([id$="-frame"]) > * {
				fill: #fdd000;
				stroke: #333 !important;
				stroke-width: 0.5px;
				animation: colorFade 1.0s infinite;
			}
			g[id$="-frame"].active > * {
				fill: transparent;
				stroke: var(--cl-bullet) !important;
				animation: zoomOutFade 1.0s infinite;
				transform-origin: center;
				transform-box: fill-box;
				position: absolute;
				z-index:1000;
			}
		}

	}

}

@keyframes colorFade {
	0% {
		fill: #fdd000;
	}
	70% {
		fill: #fdd000;
	}
	100% {
		fill: #ff0000;
	}
}

@keyframes zoomOutFade {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	70% {
		opacity: 1;
	}
	100% {
		transform: scale(1.5);
		opacity: 0;
	}
}

/*SP*/
@media screen and (max-width: 768px) {
/*~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~**********/

main {
	.head {
		.search {
			li:nth-child(6) {
				width: 100%;
				
			}
		}
	}
	.body {
		.map {
			padding: 5px;
		}
	}
}

/*~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~**********/
}

/*PC*/
@media screen and (min-width: 769px) {
/*~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~**********/

main {
	padding-top: 20px;
	.head.-menu {
		h1.pname .en {
			width: 100%;
		}
		.search {
			/*□ □ □  □ □ □  □ □*/
			li {
				width: calc((100% - 10px) / 8 * 3);
				.floor {
					padding: 20px 0 20px 15px;
				}
				.pdf {
					padding: 10px;
				}
			}
			li:nth-child(3), li:nth-child(6) {
				width: calc((100% - 10px) / 8 * 2);
				padding: 0;
			}
			li:nth-child(3) {
				display: block;
				background: transparent;
			}
			li:nth-child(6) {
				img {
					width: 70px;
				}
			}
			form {
				margin-top: 20px;
			}
		}
	}
	.body {
		#maps {
			margin-top: 15px;
			padding: 10px;
			border: 1px solid var(--bd-base);
			border-radius: 5px;
			.map.active {
				display: block;
				background: color(from var(--bg-base) srgb r g b / 70%);
				border-radius: 5px;
			}
		}
	}
}

/*~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~**********/
}