@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);
	}
	.head h2 {
		display: flex;
		justify-content: space-between;
		/*align-items: center;*/
		.zone {
			margin-left: 5px;
			background-color: #FFF;
			border-radius: 10px;
			font-size: 60%;
			line-height: 1;
			font-weight: 500;
			white-space: nowrap;
			color: #000;
			display: flex;
			align-items: center;
			border: 2px solid #fff;
			a {
				padding: 5px 10px;
				display: block;
			}
		}
		.zone:hover {
			a {
				color: #fff;
			}
		}
		.zone.map-6号館A:hover {
			background: var(--bg-fmap6a);
		}
		.zone.map-6号館B:hover {
			background: var(--bg-fmap6b);
		}
		.zone.map-3号館:hover {
			background: var(--bg-fmap3);
		}
		.zone.map-4号館:hover {
			background: var(--bg-fmap4);
		}
		.zone.map-屋外特設会場:hover {
			background: var(--bg-fmapod);
		}
	}
	#body {
		margin-top: 15px;
		.name {
			padding-bottom: 10px;
			margin-bottom: 10px;
			font-size: var(--fs-h1);
			line-height: var(--lh-h1);
			font-weight: 500;
			border-bottom: 1px solid var(--bd-base);
		}
		.summary {
			font-size: var(--fs-lead);
			line-height: var(--lh-lead);
		}
		figure {
			margin-top: 15px;
		}
		.capt {
			margin-top: 5px;
			text-align: right;
			font-size: var(--fs-capt);
			line-height: var(--lh-capt);
		}

		.table {

			margin-top: 20px;

			dt {
				padding: 7px 10px;
				font-size: 1.6rem;
				line-height: 1;
				color: #FFF;
				background-color: var(--bg-events);
				border-radius: 5px 5px 0 0;
			}
			table {
				width: 100%;
				border-collapse: separate;
				border-spacing: 0;
			}
			th {
				padding: 5px 10px;
				border-right: 1px solid #000;
				background-color: var(--bg-events-light);
				vertical-align: middle;
				font-size: 1.2rem;
				line-height: 120%;
				font-weight: normal;
				text-align: center;
			}
			th:nth-last-of-type(1) {
				border-right: 0;
			}
			tr:nth-child(even) {
				background-color: var(--bg-base);
			}
			tr:nth-child(odd) {
				background-color: #fff;
			}
			td {
				padding: 7px 10px;
				vertical-align: middle;
				font-size: 1.2rem;
				line-height: 120%;
				font-weight: normal;
				color: #000;
				word-break: break-all;
				border-right: 1px solid #000;
				border-bottom: 1px solid #000;
				background-color: #FFF;
			}
			td:nth-last-of-type(1) {
				border-right: 0;
			}
			td:nth-of-type(1) {
				white-space: nowrap;
			}
			.note {
				margin-top: 10px;
				font-size: 1.2rem;
				line-height: 130%;
			}
			div + div {
				margin-top: 20px;
			}
		}

		.conte {
			margin-top: 30px;
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;
			gap: 20px;
			li {
				background-color: var(--bg-base);
			}
			.head {
				padding: 10px 10px 5px;
				font-size: var(--fs-head);
				border-left: 5px solid var(--bg-events);
			}
			.lead {
				padding: 0px 10px;
				font-size: var(--fs-lead);
				border-left: 5px solid var(--bg-events);
			}
			.body {
				padding: 15px;
				text-align: justify;
				text-justify: inter-ideograph;
			}
			.note {
				padding: 15px;
				border-top: 5px dotted #fff;
			}
		}

		.back {
			margin-top: 25px;
			text-align: center;
			a {
				padding: 5px 15px;
				background-color: var(--bg-events);
				color: #fff;
				font-size: 1.6rem;
				line-height: 1;
				border-radius: 999px;
			}
		}

	}
}

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

main {
	#body {
		padding: 0 15px;
		.table {
			dd {
				overflow-x: auto;
				display: block;
			}
			table {
				width: 100%;
				min-width: 500px;
				border-collapse: separate;
				border-spacing: 0;
			}
		}

	}
}


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

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

main {
	.head h2 {
		margin-top: 0 !important;
		.zone {
			margin-bottom: 8px;
		}
	}
	.head p > span:nth-child(3) {
		margin-left: 10px;
	}
	#body {
		margin-top: 30px;
		.table {
			margin-top: 30px;
			div {
				margin-top: 10px;
				padding: 15px;
				background-color: var(--bg-base);
				border-radius: 5px;
			}
			dt {
				padding: 10px;
				font-size: 1.8rem;
			}
			th {
				font-size: 1.4rem;
			}
			td {
				font-size: 1.4rem;
			}
		}
		.conte {
			flex-direction: inherit;
			gap: 40px;
			li {
				width: calc((100% - 80px) / 3);
			}
		}
	}
}

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