@charset "utf-8";

/*~~*/

header {
	background: var(--bg-localbooth);
	.logo::before,
	.menu,
	.deco::before {
		background: var(--bg-localbooth);
	}
}

main {
	box-shadow: inset 0 20px 0 var(--bd-base-light);
	.head.-cnte {
		background: var(--bg-localbooth);
	}

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

		summary {
			padding: 10px;
			background-color: var(--bd-base-light);
			border-radius: 5px;
			cursor: pointer;
			display: block;
			list-style: none;
			-webkit-tap-highlight-color: transparent;
			transition: background-color .3s, color .3s;
		}
		summary::marker,
		summary::-webkit-details-marker {
			display: none;
			content: "";
		}
		summary:hover,
		details[open] > summary {
			cursor: pointer;
			background-color: var(--bg-localbooth);
			color: #fff;
		}
		summary {
			h2 {
				display: flex;
				gap: 10px;
				align-items: center;
			}
			.icon {
				width: 35px;
				height: 35px;
				border-radius: 9999px;
				display: inline-block;
				overflow: hidden;
				img {
					width: auto;
					height: 35px;
				}
			}
			.name {
				flex: 1;
				font-size: 16px;
				line-height: 24px;
			}
			.tdfk {
				font-size: 16px;
				line-height: 24px;
				margin-left: 10px;
			}
		}
		summary + div {
			margin-top: 10px;
		}

		.cont {
			display: flex;
			flex-direction: column;
			.head {
				margin-top: 10px;
				font-size: var(--fs-lead);
				line-height: var(--lh-lead);
			}
			.body, .contact {
				font-size: var(--fs-body);
				line-height: var(--lh-body);
			}
			.body {
				margin: 15px 0 0;
				padding: 15px 0 0;
				border-top: 1px solid var(--bd-base);
			}
			.contact {
				margin-top: 15px;
			}
			.link {
				margin-top: auto;
				margin-bottom: 10px;
				padding-top: 15px;
				text-align: center;
				a {
					width: 200px;
					font-size: 18px;
					line-height: 35px;
					color: #fff;
					background-color: var(--bg-localbooth);
					border-radius: 35px;
					display: inline-block;
				}
				a:hover {
					background-color: #000;
				}
			}
		}

	}
}

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

main {
	.body {
		padding: 15px 15px 0;
	}
}

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

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

main {
	.head p > span:nth-child(3) {
		margin-left: 10px;
	}

	#list {
		margin: 30px 0 0;
		padding: 0;
		li {
			summary + div {
				margin-top: 10px;
				display: flex;
				gap: 20px;
			}
			.cont, .img {
				width: 50%;
			}
		}

		summary {
			.name {
				font-size: 18px;
			}
			.tdfk {
				font-size: 18px;
			}
		}

		.note {
			text-align: center;
		}

	}
}

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