section.panel {
	margin-top: 10px;
	> div {
		display: grid;
		padding-inline: 30px;
		@media (width < 650px) {
			padding-inline: unset;
		}
		> figure {
			grid-area: 1/1/2/2;
			> img {
				border-radius: 40px;
				max-width: 100%;
				width: 100%;
				@media (width < 650px) {
					border-radius: unset;
				}
			}
		}
		> div {
			padding-inline: 20px;
			grid-area: 1/1/2/2;
			align-self: center;
			justify-self: start;
			@media (width < 550px) {
				justify-self: center;
			}
			> h2 {
				font-size: min(3.0rem, 6vw);
				line-height: 1.3;
				color: #333;
				font-weight: 900;
				letter-spacing: 0.05em;
				text-align: start;
				font-family: var(--font-serif);
				text-shadow: 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff;
				@media (width < 500px) {
					text-align: center;
				}
			}
			> p {
				font-size: min(1.3rem, 5.0vw);
				line-height: 1.3;
				color: var(--color-accent);
				font-weight: 800;
				letter-spacing: 0.1em;
				margin-top: 10px;
				text-shadow: 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff;
				> small {
					color: #333;
					font-size: min(1.0rem, 5vw);
				}
				@media (width < 550px) {
					text-align: center;
				}
				&:nth-of-type(2) {
					padding-top: 10px;
					@media (width < 650px) {
						display: none;
					}
				}
			}
		}
		> a {
			text-decoration: none;
			grid-area: 1/1/2/2;
			align-self: end;
			justify-self: end;
			margin-right: 50px;
			margin-bottom: 30px;
			@media (width < 800px) {
				width: 150px;
			}
			@media (width < 500px) {
				margin-right: 20px;
				margin-bottom: 10px;
			}
			> img {
				max-width: 100%;
			}
			&:hover {
				opacity: 0.7;
			}
		}
	}
}
section.caution {
	padding: 50px 5% 0px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> div {
			> input[type="checkbox"] {
				display: none;
				&:checked + label > h3 {
					background: url(./image/caution_rev.svg) no-repeat calc(100% - 20px) 50% / 12px, linear-gradient(to right, #ff8264, #dc2850);
				}
				&:checked + label + div {
					animation-name: moreToggleOpen;
					animation-duration: 0.3s;
					animation-fill-mode: forwards;
					animation-timing-function: ease-in;
				}
				& + label + div {
					animation-name: moreToggleClose;
					animation-duration: 0.3s;
					animation-fill-mode: forwards;
					animation-timing-function: ease-out;
				}
			}
			> label {
				cursor: pointer;
				&:hover {
					opacity: 0.8;
				}
				> h3 {
					padding: 10px 20px;
					background: url(./image/caution.svg) no-repeat calc(100% - 20px) 50% / 12px, linear-gradient(to right, #ff8264, #dc2850);
					font-size: min(1.2rem, 5.5vw);
					line-height: 1.3;
					color: #fff;
					font-weight: 500;
					text-align: justify;
				}
			}
			> div {
				overflow: hidden;
				> div {
					background-color: #f5f5f5;
					padding-block: 5px 10px;
					padding-inline: 20px;
					> p {
						font-size: min(0.9rem, 4.5vw);
						line-height: 1.6;
						color: #333;
						text-align: justify;
						&.textcolor {
							padding-top: 8px;
							color: var(--color-accent);
						}
					}
				}
			}
		}
	}
}
@keyframes moreToggleOpen {
	0% {
		max-height: 0px;
	}
	80% {
		max-height: 100px;
	}
	90% {
		max-height: 200px;
	}
	100% {
		max-height: 9999px;
	}
}
@keyframes moreToggleClose {
	0% {
		max-height: 9999px;
	}
	10% {
		max-height: 200px;
	}
	20% {
		max-height: 100px;
	}
	100% {
		max-height: 0px;
	}
}
section.subtitle {
	padding: 80px 5% 0px 5%;
	&.gray {
		background-color: #eff1f1;
	}
	&.pink {
		background-color: #f6e8ea;
	}
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> div {
			display: flex;
			align-items: center;
			gap: 15px;
			> div {
				height: 2px;
				width: 12px;
				background-color: var(--color-accent);
			}
			> h2 {
				font-size: min(2.2rem, 7vw);
				line-height: 1.0;
				color: #333;
				font-weight: 600;
				font-family: var(--font-serif);
			}
		}
		> p {
			font-size: min(1.0rem, 5.0vw);
			line-height: 1.6;
			color: var(--color-accent);
			font-weight: 800;
			padding-top: 10px;
			padding-left: 25px;
		}
	}
}
section.fuseSearch {
	padding: 30px 5% 0px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> dl {
			border: solid 1px #555;
			padding-block: 15px;
			padding-inline: min(20px,5vw);
			> div {
				border-top: solid 1px #ccc;
				margin-top: 10px;
				padding-top: 10px;
				&:first-child {
					border-top: none;
					margin-top: unset;
					padding-top: unset;
				}
				display: grid;
				grid-template-columns: 200px 1fr 2fr;
				&:nth-of-type(2) {
					grid-template-columns: 200px 1fr 1fr 1fr;
				}
				&:nth-of-type(4) {
					grid-template-columns: 210px 1fr;
				}
				@media (width < 800px) {
					grid-template-columns: 1fr;
					&:nth-of-type(2) {
						grid-template-columns: 1fr;
					}
					&:nth-of-type(4) {
						grid-template-columns: 1fr;
					}
				}
				> dt {
					display: flex;
					align-items: baseline;
					column-gap: 5px;
					> div.text {
						font-size: 1rem;
						line-height: 1.3;
						color: var(--color-accent);
					}
					> div#rangeThresholdValue {
						font-size: 1rem;
						line-height: 1.3;
						color: var(--color-accent);
						user-select: none;
						font-size: 0.9rem;
					}
					@media (width < 800px) {
						margin-left: 8px;
						padding-bottom: 2px;
					}
				}
				> dd {
					display: flex;
					flex-wrap: wrap;
					column-gap: 15px;
					row-gap: 10px;
					> label {
						display: block;
						width: 100%;
						font-weight: 500;
						cursor: pointer;
						user-select: none;
						padding-block: 3px;
						padding-inline: 3px 8px;
						border-radius: 50px;
						&:hover {
							background-color: #eee;
						}
						> input {
							accent-color: #fd8269;
						}
						&#labelGeoLocation {
							&.obtaining {
								opacity: 0.5;
								background-image: url(../common/image/loader.svg);
								background-repeat: no-repeat;
								background-position: 20px 50%;
							}
							&.fail {
								background-image: none;
								opacity: 0.2;
							}
							&.succes {
								background-image: none;
								opacity: 1;
							}
						}
					}
					> div.range {
						display: flex;
						align-items: center;
						@media (width < 800px) {
							padding-left: 7px;
						}
						> div.text {
							user-select: none;
							white-space: nowrap;
							@media (width < 500px) {
								font-size: 0.8rem;
							}
						}
						> input[type="range"] {
							accent-color: #fd8269;
							width: 450px;
							@media (width < 970px) {
								width: calc(90vw - 420px);
							}
							@media (width < 800px) {
								width: calc(90vw - 210px);
							}
							@media (width < 500px) {
								width: calc(90vw - 180px);
							}
						}
					}
				}
			}
		}
		> div.option {
			text-align: right;
			@media (pointer: coarse) {
				display: none;
			}
			> label {
				font-size: 0.9rem;
				line-height: 1.3;
				color: #111;
				cursor: pointer;
				user-select: none;
				padding-right: 5px;
				> input {
					accent-color: var(--color-accent);
				}
			}
		}
		> div.input {
			margin-top: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			column-gap: 5px;
			> div {
				> input {
					height: 60px;
					width: 860px;
					border-radius: 10px;
					font-size: 1.2rem;
					padding-inline: 20px;
					border: solid 2px #333;
					outline: 0;
					@media (width < 1130px) {
						width: calc(90vw - 100px - 10px);
					}
					&:focus {
						border-color: var(--color-accent);
					}
				}
			}
			> picture {
				> img {
					cursor: pointer;
					&:hover {
						opacity: 0.8;
					}
				}
			}
		}
		> p {
			margin-top: 3px;
			font-size: min(0.9rem,4.5vw);
			line-height: 1.3;
			color: #666;
			padding-inline: 5px;
		}
	}
}
section.searchResult {
	padding: 30px 5% 50px 5%;
	> div {
		padding-block: 20px;
		padding-inline: 20px;
		> div#searchResult {
			max-width: 900px;
			margin-inline: auto;
			> div.empty {
				font-size: 1rem;
				line-height: 1.3;
				color: var(--color-accent);
				font-weight: 500;
				text-align: center;
			}
			> div.count {
				margin-top: 30px;
				margin-bottom: 20px;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				column-gap: 10px;
				row-gap: 10px;
				> div.count {
					font-size: 1rem;
					line-height: 1.3;
					color: var(--color-accent);
					font-weight: 500;
					white-space: nowrap;
				}
				> div.again {
					> a {
						text-decoration: none;
						display: inline-block;
						font-size: 1rem;
						line-height: 1.3;
						color: var(--color-accent);
						border: solid 1px currentColor;
						padding-block: 3px;
						padding-inline: 10px;
						white-space: nowrap;
						cursor: pointer;
						&:hover {
							background-color: var(--color-accent);
							color: #fff;
						}
					}
				}
			}
			> a {
				margin-top: 5px;
				text-decoration: none;
				display: inline-block;
				border: solid 1px #666;
				padding: 10px;
				display: grid;
				grid-template-columns: 1fr 3fr;
				column-gap: 30px;
				row-gap: 10px;
				@media (width < 880px) {
					grid-template-columns: 1fr;
				}
				&:hover {
					background-color: #fffafa;
					> figure {
						> img {
							transform: scale(1.05);
						}
					}
					> div {
						> div.category {
							> small {
								color: #000;
							}
						}
					}
				}
				> figure {
					overflow: hidden;
					@media (width < 880px) {
						order: 2;
					}
					> img {
						max-width: 100%;
						transition: 0.5s;
					}
				}
				> div {
					> div.category {
						display: grid;
						grid-template-columns: repeat(3, 1fr);
						column-gap: 5px;
						@media (width < 880px) {
							grid-template-columns: repeat(3, auto);
						}
						> p {
							background-color: #fbe9ed;
							padding-block: 10px;
							padding-inline: 15px;
							padding: 10px 15px;
							font-size: min(0.9rem, 4.5vw);
							line-height: 1.0;
							color: #111;
							font-weight: 500;
							@media (width < 880px) {
								padding-block: 4px;
								padding-inline: 3px;
								font-size: min(0.8rem, 4.5vw);
							}
						}
						> small {
							display: inline-block;
							text-align: right;
							font-size: 0.8rem;
							line-height: 1;
							color: #aaa;
							@media (width < 880px) {
								font-size: min(0.7rem, 4vw);
							}
						}
					}
					> div.text01 {
						margin-top: 10px;
						font-size: 0.9rem;
						line-height: 1.4;
						color: var(--color-accent);
					}
					> div.subject {
						margin-top: 5px;
						font-size: 1.2rem;
						line-height: 1.3;
						color: var(--color-accent);
						font-weight: 600;
					}
					> div.text03 {
						margin-top: 10px;
						padding-top: 10px;
						border-top: solid 1px #ccc;
						font-size: 1.1rem;
						line-height: 1.5;
						color: #111;
						a {
							color: #111;
							&:hover {
								color: #dc2850;
							}
						}
					}
				}
			}
		}
	}
}
section.mapSearch {
	padding: 10px 5% 80px 5%;
	background-color: #f6e8ea;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> div {
			text-align: center;
			padding-block: 20px;
			padding-inline: 30px;
			@media (width < 710px) {
				margin: unset;
				padding-inline: 10px;
			}
			> h2 {
				font-size: min(1.4rem, 5.5vw);
				line-height: 1.3;
				color: #333;
				font-weight: 600;
				padding-bottom: 15px;
			}
			> a {
				text-decoration: none;
				user-select: none;
				cursor: pointer;
				&:hover {
					opacity: 0.8;
				}
				&.disable {
					opacity: 0.3;
					cursor: not-allowed;
				}
				> div {
					padding: 15px;
					border-radius: 40px;
					font-size: min(1.0rem, 5.0vw);
					line-height: 1.6;
					color: #fff;
					font-weight: 500;
					background-color: #333;
				}
			}
			> div#geolocationMessage {
				margin-top: 5px;
				> div {
					font-size: 0.8rem;
					line-height: 1.4;
					&.obtaining {
						color: #f86;
					}
					&.success {
						color: #0d3;
					}
					&.fail {
						color: #d00;
					}
				}
			}
		}
	}
}
section.category {
	background-color: #eff1f1;
	padding: 30px 5% 80px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 20px;
		row-gap: 20px;
		@media (width < 890px) {
			column-gap: 10px;
			row-gap: 10px;
		}
		> a {
			text-decoration: none;
			cursor: pointer;
			> article {
				height: 100%;
				padding-block: 30px;
				padding-inline: 20px;
				background-color: #fff;
				border-radius: 20px;
				display: grid;
				grid-template-rows: 1fr auto;
				row-gap: 10px;
				@media (width < 800px) {
					padding-block: 10px;
					padding-inline: 5px;
				}
				> figure {
					align-self: center;
					text-align: center;
					@media (width < 800px) {
						max-width: 80px;
						margin-inline: auto;
					}
					> img {
						max-width: 100%;
					}
				}
				> p {
					align-self: end;
					text-align: center;
					font-size: min(1.3rem, 6vw);
					line-height: 1.6;
					color: #333;
					font-weight: 600;
					@media (width < 800px) {
						font-size: min(0.8rem, 4.5vw);
					}
				}
			}
			&:hover {
				opacity: 0.8;
			}
		}
	}
}
section.area {
	padding: 30px 5% 80px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		user-select: none;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		column-gap: 10px;
		row-gap: 10px;
		@media (width < 890px) {
			grid-template-columns: repeat(3, 1fr);
		}
		@media (width < 670px) {
			grid-template-columns: repeat(2, 1fr);
		}
		@media (width < 440px) {
			grid-template-columns: repeat(1, 1fr);
		}
		> a {
			text-decoration: none;
			cursor: pointer;
			> div {
				background: #fff;
				border: 1px solid #ed93a7;
				> p {
					align-self: end;
					font-size: min(1.1rem, 5.5vw);
					line-height: 1.6;
					color: #dc2850;
					font-weight: 600;
					padding: 5px 15px;
				}
			}
			&:hover {
				opacity: 0.8;
				> div {
					background-image: linear-gradient(to right, #ff8264, #dc2850);
					> p {
						color: #fff;
					}
				}
			}
		}
	}
}
section.shop {
	border-top-left-radius: 60px;
	border-top-right-radius: 60px;
	background-color: #fadfe5;
	padding: 80px 5% 0px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> div.top {
			> div {
				display: flex;
				align-items: center;
				gap: 15px;
				> div {
					height: 2px;
					width: 12px;
					background-color: var(--color-accent);
				}
				> h2 {
					font-size: min(2.2rem, 7vw);
					line-height: 1.0;
					color: #333;
					font-weight: 600;
					font-family: var(--font-serif);
				}
			}
			> p {
				font-size: min(1.0rem, 5.0vw);
				line-height: 1.6;
				color: var(--color-accent);
				font-weight: 800;
				padding-top: 10px;
				padding-left: 25px;
			}
		}
	}
}
section.shopitem {
	margin-bottom: 50px;
	padding: 30px 0 60px;
	overflow: hidden;
	background-color: #fadfe5;
	user-select: none;
	> div.item {
		> div.tabs {
			max-width: 1000px;
			margin-inline: auto;
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 30px;
			> button {
				margin-inline: 10px;
				min-width: 140px;
				min-height: 44px;
				padding: 10px 20px;
				border: 1px solid #dc2850;
				color: #dc2850;
				background: #fff;
				cursor: pointer;
				font-size: min(1.1rem, 5.5vw);
				line-height: 1.6;
				font-weight: 600;
				&.hidden {
					display: none;
				}
				&:hover,
				&[aria-selected="true"] {
					color: #fff;
					background: linear-gradient(to right, #ff8264, #dc2850);
				}
				&:focus-visible {
					outline: 3px solid #333;
					outline-offset: 3px;
				}
			}
			@media (width < 700px) {
				flex-wrap: nowrap;
				overflow-x: auto;
				scrollbar-width: thin;
				button {
					flex: 0 0 auto;
					min-width: 120px;
				}
			}
		}
		> div.panels {
			min-height: 340px;
			> div.panel {
				&[hidden] {
					display: none;
				}
				> div.slider {
					max-width: 1000px;
					margin-inline: auto;
					cursor: grab;
					touch-action: pan-y;
					user-select: none;
					transform: none;
					&.isDragging {
						cursor: grabbing;
						.track {
							transition: none;
						}
						.card {
							pointer-events: none;
						}
					}
					> div.track {
						display: flex;
						gap: 24px;
						justify-content: flex-start;
						transition: transform 0.55s ease;
						will-change: transform;
						> a {
							text-decoration: none;
							display: grid;
							flex: 0 0 min(360px, 78vw);
							grid-template-rows: auto auto 1fr;
							border-radius: 10px;
							background-color: #fff;
							> figure {
								> img {
									border-top-left-radius: 10px;
									border-top-right-radius: 10px;
									max-width: 100%;
								}
							}
							> div {
								padding: 10px 15px;
								> div.category {
									display: inline-flex;
									column-gap: 5px;
									> p {
										border: none;
										border-radius: 5px;
										padding: 5px 10px;
										background-color: #fbe9ed;
										font-size: min(0.9rem, 4.5vw);
										line-height: 1;
										color: var(--color-accent);
										@media (width < 400px) {
											font-size: min(0.7rem, 4.5vw);
										}
									}
								}
								> h3 {
									margin-top: 5px;
									font-size: min(1.3rem, 5.5vw);
									line-height: 1.2;
									color: var(--color-accent);
									font-weight: 600;
								}
								> p {
									margin-top: 8px;
									padding-top: 8px;
									border-top: 1px solid #888;
									font-size: min(0.9em, 4.5vw);
									line-height: 1.3;
									color: #333;
								}
							}
						}
					}
				}
			}
		}
	}
}
section.shopitem {
	margin-bottom: 50px;
	padding: 30px 0 60px;
	overflow: hidden;
	background-color: #fadfe5;
	user-select: none;
	> div {
		> div.item {
			> div.tabs {
				max-width: 1000px;
				margin-inline: auto;
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 30px;
				> button {
					margin-inline: 10px;
					min-width: 140px;
					min-height: 44px;
					padding: 10px 20px;
					border: 1px solid #dc2850;
					color: #dc2850;
					background: #fff;
					cursor: pointer;
					font-size: min(1.1rem, 5.5vw);
					line-height: 1.6;
					font-weight: 600;
					&.hidden {
						display: none;
					}
					&:hover,
					&[aria-selected="true"] {
						color: #fff;
						background: linear-gradient(to right, #ff8264, #dc2850);
					}
					&:focus-visible {
						outline: 3px solid #333;
						outline-offset: 3px;
					}
				}
				@media (width < 700px) {
					flex-wrap: nowrap;
					overflow-x: auto;
					scrollbar-width: thin;
					button {
						flex: 0 0 auto;
						min-width: 120px;
					}
				}
			}
			> div.panels {
				min-height: 340px;
				> div.panel {
					&[hidden] {
						display: none;
					}
					> div.slider {
						max-width: 1000px;
						margin-inline: auto;
						cursor: grab;
						touch-action: pan-y;
						user-select: none;
						transform: none;
						&.isDragging {
							cursor: grabbing;
							.track {
								transition: none;
							}
							.card {
								pointer-events: none;
							}
						}
						> div.track {
							transform: translateX(10px);
							display: flex;
							gap: 24px;
							justify-content: flex-start;
							transition: transform .55s ease;
							will-change: transform;
							> a {
								text-decoration: none;
								display: grid;
								flex: 0 0 min(360px, 78vw);
								grid-template-rows: auto auto 1fr;
								border-radius: 10px;
								background-color: #fff;
								> figure {
									> img {
										border-top-left-radius: 10px;
										border-top-right-radius: 10px;
										max-width: 100%;
									}
								}
								> div {
									padding: 10px 15px;
									> div.category {
										display: inline-flex;
										column-gap: 5px;
										> p {
											border: none;
											border-radius: 5px;
											padding: 5px 10px;
											background-color: #fbe9ed;
											font-size: min(0.9rem, 4.5vw);
											line-height: 1.0;
											color: var(--color-accent);
											@media (width < 400px) {
												font-size: min(0.7rem, 4.5vw);
											}
										}
									}
									> h3 {
										margin-top: 5px;
										font-size: min(1.3rem, 5.5vw);
										line-height: 1.2;
										color: var(--color-accent);
										font-weight: 600;
									}
									> p {
										margin-top: 8px;
										padding-top: 8px;
										border-top: 1px solid #888;
										font-size: min(0.9em, 4.5vw);
										line-height: 1.3;
										color: #333;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
section.extract {
	max-height: 0px;
	overflow: hidden;
	&.on {
		max-height: 100vh;
		> div.extractToggle {
			max-height: 120px;
			> label {
				padding-block: 20px;
			}
		}
	}
	> input[type="checkbox"] {
		display: none;
		&:checked + div.extract {
			max-height: 100vh;
			padding-block: 0 80px;
		}
	}
	> div.extract {
		position: fixed;
		bottom: 60px;
		width: 100%;
		background-color: #ffd7df;
		padding-block: 0 0px;
		padding-inline: 20px;
		margin-inline: 0 18px;
		border-radius: 20px 20px 0 0;
		z-index: 2;
		user-select: none;
		max-height: 0px;
		overflow: hidden;
		transition: max-height 0.5s, padding-block 0.5s;
		> div.extractCategory {
			margin-top: 20px;
			> h4 {
				font-size: 0.9rem;
				line-height: 1.3;
				color: var(--color-accent);
				font-weight: 400;
			}
			> div {
				margin-top: 8px;
				display: flex;
				flex-wrap: wrap;
				column-gap: 10px;
				row-gap: 5px;
				> button {
					border: solid 1px var(--color-accent);
					background-color: transparent;
					color: var(--color-accent);
					font-size: 0.9rem;
					line-height: 1;
					padding-block: 2px 3px;
					padding-inline: 10px;
					border-radius: 50px;
					cursor: pointer;
					&:hover {
						background-color: var(--color-accent);
						color: #fff;
					}
				}
				> label {
					font-size: min(0.9rem,4.5vw);
					line-height: 1;
					color: #222;
					cursor: pointer;
					&:has(>input:checked) {
						color: var(--color-accent);
					}
					> input[type="checkbox"] {
						accent-color: #fd8269;
					}
				}
			}
		}
		> div.extractArea {
			margin-top: 20px;
			> h4 {
				font-size: 0.9rem;
				line-height: 1.3;
				color: var(--color-accent);
				font-weight: 400;
			}
			> div {
				margin-top: 8px;
				display: flex;
				flex-wrap: wrap;
				column-gap: 10px;
				row-gap: 5px;
				> button {
					border: solid 1px var(--color-accent);
					background-color: transparent;
					color: var(--color-accent);
					font-size: 0.9rem;
					line-height: 1;
					padding-block: 2px 3px;
					padding-inline: 10px;
					border-radius: 50px;
					cursor: pointer;
					&:hover {
						background-color: var(--color-accent);
						color: #fff;
					}
				}
				> label {
					font-size: min(0.9rem,4.5vw);
					line-height: 1;
					color: #222;
					cursor: pointer;
					&:has(>input:checked) {
						color: var(--color-accent);
					}
					> input[type="checkbox"] {
						accent-color: #fd8269;
					}
				}
			}
		}
	}
	> div.extractToggle {
		z-index: 2;
		position: fixed;
		bottom: 0px;
		width: 100%;
		max-height: 0px;
		overflow: hidden;
		transition: all 1s;
		> label {
			height: 60px;
			display: block;
			background-color: var(--color-accent);
			text-align: center;
			font-size: 1rem;
			line-height: 1;
			color: #fff;
			cursor: pointer;
			padding-block: 0px;
			transition: all 1s;
			&:hover {
				color: #ff5;
			}
		}
		> a {
			background-color: #ff0;
			height: 60px;
			width: 100%;
			display: block;
			text-decoration: none;
			font-size: 1rem;
			line-height: 1;
			color: var(--color-accent);
			display: flex;
			justify-content: center;
			align-items: center;
			&:hover {
				color: #000;
			}
		}
	}
}
/* dialog map ここから */
dialog#dialogMapBack {
	border: none;
	background-color: transparent;
	&::backdrop {
		background-color: rgba(0,0,0,0.6);
	}
	> div {
		position: fixed;
		right: 10px;
		top: 10px;
		font-size: 2.0rem;
		font-weight: 900;
		line-height: 1;
		color: #fff;
	}
}
dialog#dialogMapContainer {
	width: 90vw;
	height: 90vh;
	padding: 0;
	border: solid 3px #666;
	outline: 0;
	&::backdrop {
		background-color: transparent;
	}
	> div#dialogMapResult {
		width: 100%;
		height: 100%;
	}
}
/* dialog map ここまで */