@charset "utf-8";

/*~~*/

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

/*~~*/

main {
	.head.-menu {
		background: var(--bg-base);
		h1.pname {
			background: var(--bg-exhibitors);
		}
		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;
				flex-wrap: wrap;
				align-items: stretch;
				gap: 5px;
			}
			li {
				width: calc((100% - 35px) / 8);
				padding: 5px;
				background: var(--bg-exhibitors-light);
				border-radius: 5px;
			}
			li.hit {
				background: var(--bg-exhibitors-hit);
			}
			li.active, li#reset {
				background: var(--bg-exhibitors);
			}
			li:hover {
				cursor: pointer;
				background: var(--bg-exhibitors);
			}
			li:nth-child(7), li:nth-child(14) {
				width: calc((100% - 35px) / 8 * 2 + 5px);
				padding: 0;
			}
			li:nth-child(7) {
				background: transparent;
			}
			li:nth-child(7):hover {
				cursor: default;
			}
			li:nth-child(14) {
				position: relative;
				span {
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				img {
					width: 50%;
				}
			}
			li:nth-child(14):before {
				content: "";
				position: absolute;
				z-index: 10;
				inset: 5px;
				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;
			}
		}
	}

	#search-status {
		padding: 5px;
		background: var(--bg-exhibitors-hit);
		text-align: center;
		font-size: 1.4rem;
		line-height: 1;
		color: #fff;
	}

	#list {
		padding: 15px;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		gap: 15px;
	}

	#list li {
		padding: 10px;
		border: 1px solid var(--bd-base);
		border-radius: 5px;
	}

	#list li > div {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		padding: 15px;
		border-radius: 5px;
		background: color(from var(--bg-base) srgb r g b / 50%);
		overflow: hidden;
		.name {
			margin-bottom: 5px;
			padding-bottom: 5px;
			font-size: var(--fs-head);
			line-height: var(--lh-head);
			border-bottom: 1px solid #000;
		}
		.ename {
			font-size: var(--fs-lead);
			color: #666;
		}
		.desc {
			margin-top: 5px;
			font-size: var(--fs-body);
			white-space: normal;
			word-wrap: break-word;
		}
		.booth {
			margin-top: auto;
			padding-top: 15px;
			text-align: center;
			.icon {
				padding: 7px 15px;
				background: #000;
				border-radius: 9999px;
				font-size: var(--fs-body);
				line-height: 100%;
				color: #fff;
				span {
					display: inline-block;
					margin-top: -2px;
				}
			}
			.icon:before {
				color: var(--cl-footer-icon);
			}
		}
		> * {
			z-index: 1;
		}
	}
	#list li > div::before {
		content: "";
		position: absolute;
		inset: 0;
		background: color(from var(--bg-base) srgb r g b / 100%);/*左上*/
		clip-path: polygon(0 0, 100% 0, 0 100%);
		z-index: 0;
	}
	#list li:hover > div {
		background: var(--bg-exhibitors);
		transition: 0.25s;
		color: #fff;
		.name {
			border-bottom: 1px solid #fff;
		}
		.ename {
			color: #fff;
		}
	}
	#list li:hover > div::before {
		background: var(--bg-exhibitors);
		transition: 0.5s;
	}

	#page {
		margin-top: 30px;
		display: flex;
		justify-content: center;
		gap: 15px;
		button {
			display: inline-flex;
			justify-content: center;
			align-items: center;
			border: 1px solid #000;
			background: #fff;
			border-radius: 5px;
			aspect-ratio: 1 / 1;
			height: 35px;
		}
		button:hover {
			cursor: pointer;
			background: var(--bg-exhibitors-light);
			color: #fff;
		}
		button.active {
			background: var(--bg-exhibitors);
			color: #fff;
		}
	}

}

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

#page button[data-page] {
	display: none;
}

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

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

main {
	padding-top: 20px;
	.head.-menu {
		border-radius: 10px 10px 0 0;
		h1.pname {
			border-radius: 10px 0 0 0;
		}
		h1.pname .en {
			width: 100%;
		}
		.search {
			li {
				padding: 20px;
			}
			li:nth-child(14) {
				img {
					width: 50%;
				}
			}
		}
	}

	#search-status {
		border-radius: 0 0 10px 10px;
		position: relative;
		z-index: 100;
	}

	#list {
		margin: 30px 0 0;
		padding: 0;
		flex-direction: row;
		gap: 30px;
	}
	#list li {
		width: calc((100% - 60px) / 3);
	}

}

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