@charset "utf-8";

/*~~*/

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

main {
	box-shadow: inset 0 20px 0 var(--bd-base-light);
	.head.-cnte {
		background: var(--bg-events);
	}
	.body {
		margin-top: 15px;
		dt {
			padding-left: 20px;
			font-size: 2.0rem;
			font-weight: 600;
			position: relative;
		}
		dt::before {
			content: "";
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 0;
			height: 0;
			border-top: 10px solid transparent;
			border-bottom: 10px solid transparent;
			border-left: 12px solid var(--bg-events);
		}
		dd {
			margin-top: 10px;
			display: flex;
			align-items: stretch;
			gap: 5px;
			border-radius: 10px;
			font-size: 1.4rem;
			font-weight: 500;
			border-left: 12px solid #000;
			.event {
				flex: 1;
				background-color: var(--bg-base);
				/*box-shadow: inset 0 0 0 1px var(--bd-base-light);*/
				.name {
					padding: 10px;
					z-index: 10;
				}
				.note {
					padding: 10px;
					font-size: 1.2rem;
					line-height: 130%;
					font-weight: normal;
					background-color: var(--bg-events-light);
				}
			}
			.floor {
				width: calc(8.4rem + 30px);
				border-radius: 0 10px 10px 0;
				span {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				a {
					color: #fff;
				}
				a:hover span {
					background-color: #000;
					border-radius: 0 10px 10px 0;
				}
			}
		}
		dd.map-3・4・6号館 {
			border-left-color: var(--bg-fmap);
			.awrap:hover .name,
			.floor {
				background-color: var(--bg-fmap);
				color: #fff;
			}
		}
		dd.map-3号館 {
			border-left-color: var(--bg-fmap3);
			.awrap:hover .name,
			.floor {
				background-color: var(--bg-fmap3);
				color: #fff;
			}
		}
		dd.map-4号館 {
			border-left-color: var(--bg-fmap4);
			.awrap:hover .name,
			.floor {
				background-color: var(--bg-fmap4);
				color: #fff;
			}
		}
		dd.map-6号館A {
			border-left-color: var(--bg-fmap6a);
			.awrap:hover .name,
			.floor {
				background-color: var(--bg-fmap6a);
				color: #fff;
			}
		}
		dd.map-6号館B {
			border-left-color: var(--bg-fmap6b);
			.awrap:hover .name,
			.floor {
				background-color: var(--bg-fmap6b);
				color: #fff;
			}
		}
		dd.map-屋外特設会場 {
			border-left-color: var(--bg-fmapod);
			.awrap:hover .name,
			.floor {
				background-color: var(--bg-fmapod);
				color: #fff;
			}
		}
	}

}

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

main {
	.body {
		padding: 0 15px;
		dl > div {
			margin-top: 20px;
		}
	}
}


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

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

main {
	.head p > span:nth-child(3) {
		margin-left: 10px;
	}
	.body {
		margin-top: 30px;
		dl {
			display: flex;
			flex-wrap: wrap;
			gap: 30px;
			div {
				width: calc((100% - 30px) / 2);
			}
			> div:has(.note) {
				width: 100%;
			}
			dd {
				.event {
					display: flex;
				}
				.name {
					flex: 1;
					display: flex;
					align-items: center;
				}
				.note {
					width: 50%;
					display: flex;
					align-items: center;
				}
			}
		}
	}
}

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