/* CSS Document */

#feature,
#course,
#spot,
#favorite,
#photo,
#blog{
	& h2{
		display: grid;
		grid-template-columns: var(--wrap);
		justify-content: center;
		padding: 24px 0;
		background: var(--variable-color-sub);
		color: #fff;
		font-weight: 700;
		font-size: clamp(28px, calc(36 / 768 * 100dvw), 36px);
		letter-spacing: 0.05em;
		text-align: center;
	}
	&:has(#pickup){
		overflow: hidden;
	}
}

#feature{
	& h2+div{
		display: grid;
		grid-template-columns: var(--wrap);
		justify-content: center;
		margin-top: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		font-weight: 700;
		text-align: center;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
}

#favorite{
	margin-bottom: clamp(32px, calc(56 / 1200 * 100dvw), 56px);
	& details{
		display: flex;
		justify-content: center;
		margin-top: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
	}
	& summary{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		display: grid;
		align-items: center;
		min-width: min(100%, 320px);
		min-height: 48px;
		padding: 0.25em 1em;
		background: var(--color-theme);
		border-radius: 24px;
		font-weight: 700;
		letter-spacing: 0.05em;
		text-align: center;
	}
	& summary+div{
		position: fixed;
		top: 0;
		left: 0;
		display: grid;
		grid-template-columns: min(var(--wrap-fit), 960px);
		justify-content: center;
		align-content: center;
		width: 100%;
		height: 100%;
		padding: clamp(48px, calc(64 / 1200 * 100dvw), 64px) 0;
		background: rgba(0, 0, 0, 0.8);
		z-index: 1000;
	}
	& menu{
		all: unset;
		box-sizing: border-box;
		grid-column: 1;
		grid-row: 1;
		justify-self: end;
		aspect-ratio: 1;
		width: 48px;
		background: #9b9b9b;
		font-size: 0;
		cursor: pointer;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="fill: none; stroke: black; stroke-width: 2px;"><line x1="17" y1="3" x2="3" y2="17"/><line x1="17" y1="17" x2="3" y2="3"/></svg>') center no-repeat;
		-webkit-mask-size: 20px;
	}
	& dl{
		grid-column: 1;
		grid-row: 1;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		grid-gap: 16px;
		padding: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		background: #fff;
		border-radius: 8px;
		filter: drop-shadow(0 0 0.3em rgba(0,0,0,0.1));
	}
	& dt{
		width: 100%;
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 0.5em;
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
		&:before{
			content: "";
			width: 4px;
			height: 1em;
			background: var(--color-theme-sub);
			border-radius: 2px;
			transform: translateY(calc(0.875em - 50%));
		}
	}
	& dt+dd{
		width: 100%;
	}
	& dd{
		& input{
			border-radius: 4px;
		}
		& a{
			display: grid;
			grid-template-columns: 16px auto;
			align-items: center;
			grid-gap: 4px;
			min-height: 32px;
			padding: 4px 16px;
			border: 1px solid var(--color-border);
			border-radius: 16px;
			font-weight: 500;
			color: inherit;
			font-size: clamp(12px, calc(14 / 1200 * 100vw), 14px);
			text-align: center;
			text-decoration: none;
			letter-spacing: 0.025em;
			cursor: pointer;
			&:before{
				content: "";
				aspect-ratio: 1;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0.106 11.553c-0.136 0.274-0.146 0.603 0 0.894 0 0 0.396 0.789 1.12 1.843 0.451 0.656 1.038 1.432 1.757 2.218 0.894 0.979 2.004 1.987 3.319 2.8 1.595 0.986 3.506 1.692 5.698 1.692s4.103-0.706 5.698-1.692c1.315-0.813 2.425-1.821 3.319-2.8 0.718-0.786 1.306-1.562 1.757-2.218 0.724-1.054 1.12-1.843 1.12-1.843 0.136-0.274 0.146-0.603 0-0.894 0 0-0.396-0.789-1.12-1.843-0.451-0.656-1.038-1.432-1.757-2.218-0.894-0.979-2.004-1.987-3.319-2.8-1.595-0.986-3.506-1.692-5.698-1.692s-4.103 0.706-5.698 1.692c-1.315 0.813-2.425 1.821-3.319 2.8-0.719 0.786-1.306 1.561-1.757 2.218-0.724 1.054-1.12 1.843-1.12 1.843zM2.14 12c0.163-0.281 0.407-0.681 0.734-1.158 0.41-0.596 0.94-1.296 1.585-2.001 0.805-0.881 1.775-1.756 2.894-2.448 1.35-0.834 2.901-1.393 4.647-1.393s3.297 0.559 4.646 1.393c1.119 0.692 2.089 1.567 2.894 2.448 0.644 0.705 1.175 1.405 1.585 2.001 0.328 0.477 0.572 0.876 0.734 1.158-0.163 0.281-0.407 0.681-0.734 1.158-0.41 0.596-0.94 1.296-1.585 2.001-0.805 0.881-1.775 1.756-2.894 2.448-1.349 0.834-2.9 1.393-4.646 1.393s-3.297-0.559-4.646-1.393c-1.119-0.692-2.089-1.567-2.894-2.448-0.644-0.705-1.175-1.405-1.585-2.001-0.328-0.477-0.572-0.877-0.735-1.158zM16 12c0-1.104-0.449-2.106-1.172-2.828s-1.724-1.172-2.828-1.172-2.106 0.449-2.828 1.172-1.172 1.724-1.172 2.828 0.449 2.106 1.172 2.828 1.724 1.172 2.828 1.172 2.106-0.449 2.828-1.172 1.172-1.724 1.172-2.828zM14 12c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586-1.051-0.223-1.414-0.586-0.586-0.861-0.586-1.414 0.223-1.051 0.586-1.414 0.861-0.586 1.414-0.586 1.051 0.223 1.414 0.586 0.586 0.861 0.586 1.414z"/></svg>') center no-repeat;
				-webkit-mask-size: contain;
				background: currentColor;
				transform: translateX(-4px);
			}
			&[data-target="mailto"]{
				&:before{
					-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 7.921l8.427 5.899c0.34 0.235 0.795 0.246 1.147 0l8.426-5.899v10.079c0 0.272-0.11 0.521-0.295 0.705s-0.433 0.295-0.705 0.295h-16c-0.272 0-0.521-0.11-0.705-0.295s-0.295-0.433-0.295-0.705zM1 5.983c0 0.010 0 0.020 0 0.030v11.987c0 0.828 0.34 1.579 0.88 2.12s1.292 0.88 2.12 0.88h16c0.828 0 1.579-0.34 2.12-0.88s0.88-1.292 0.88-2.12v-11.988c0-0.010 0-0.020 0-0.030-0.005-0.821-0.343-1.565-0.88-2.102-0.541-0.54-1.292-0.88-2.12-0.88h-16c-0.828 0-1.579 0.34-2.12 0.88-0.537 0.537-0.875 1.281-0.88 2.103zM20.894 5.554l-8.894 6.225-8.894-6.225c0.048-0.096 0.112-0.183 0.188-0.259 0.185-0.185 0.434-0.295 0.706-0.295h16c0.272 0 0.521 0.11 0.705 0.295 0.076 0.076 0.14 0.164 0.188 0.259z"/></svg>');
				}
			}
			&[data-target="twitter"]{
				background: #000;
				border-color: transparent;
				color: #fff;
				&:before{
					-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path d="M21.42,15.24L34.83,0h-3.18l-11.64,13.24L10.72,0H0l14.05,20.01L0,36h3.18l12.29-13.98,9.82,13.98h10.72l-14.58-20.76h0ZM17.07,20.19l-1.42-1.99L4.32,2.34h4.88l9.14,12.8,1.42,1.99,11.89,16.64h-4.88l-9.7-13.58h0Z"/></svg>');
				}
			}
			&[data-target="facebook"]{
				background: #3b5998;
				border-color: transparent;
				color: #fff;
				&:before{
					-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M19.52,5.08V0c-3.16,0-5.51.91-7,2.7a6.88,6.88,0,0,0-1.46,5.08V9.61H8.48v5.08h2.58V28h5.09V14.69h2.49V9.61H16.15v-2l0-.41a1.81,1.81,0,0,1,.34-1.28C16.92,5.38,18,5.08,19.52,5.08Z"/></svg>');
				}
			}
			&[data-target="line"]{
				background: #00c300;
				border-color: transparent;
				color: #fff;
				&:before{
					-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M28,12C28,5.76,21.72.66,14,.66S0,5.76,0,12c0,5.62,5,10.32,11.71,11.21.45.1,1.07.3,1.23.69A3,3,0,0,1,13,25.19s-.17,1-.2,1.2-.28,1.38,1.21.75S22.06,22.39,25,19h0A10.09,10.09,0,0,0,28,12ZM9.06,15.37a.27.27,0,0,1-.27.27H4.86a.27.27,0,0,1-.27-.27h0V9.26A.27.27,0,0,1,4.86,9h1a.27.27,0,0,1,.27.27v4.85H8.79a.27.27,0,0,1,.27.27Zm2.37,0a.27.27,0,0,1-.27.27h-1a.27.27,0,0,1-.27-.27V9.26A.27.27,0,0,1,10.17,9h1a.27.27,0,0,1,.27.27Zm6.76,0a.27.27,0,0,1-.27.27H16.78a.23.23,0,0,1-.07-.07l-2.8-3.78v3.63a.27.27,0,0,1-.27.27h-1a.27.27,0,0,1-.27-.27V9.26A.27.27,0,0,1,12.65,9h1.18v0h0l0,0,2.8,3.77V9.26A.27.27,0,0,1,16.93,9h1a.27.27,0,0,1,.27.27Zm5.42-5.12a.27.27,0,0,1-.27.27H20.67v1h2.67a.27.27,0,0,1,.27.27v1a.27.27,0,0,1-.27.27H20.67v1h2.67a.27.27,0,0,1,.27.27v1a.27.27,0,0,1-.27.27H19.41a.27.27,0,0,1-.27-.27h0V9.27h0A.27.27,0,0,1,19.41,9h3.93a.27.27,0,0,1,.27.27Z"/></svg>');
				}
			}
		}
	}
}

#photo{
	display: grid;
	& h2+div{
		justify-self: center;
		width: var(--wrap);
		margin-top: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		font-weight: 500;
	}
	& h2+div+div{
		justify-self: center;
		display: flex;
		justify-content: center;
		width: var(--wrap);
		margin-top: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		& a{
			display: grid;
			align-items: center;
			min-width: min(100%, 320px);
			min-height: 48px;
			padding: 0.25em 1em;
			background: var(--color-theme);
			border-radius: 24px;
			color: inherit;
			font-weight: 700;
			letter-spacing: 0.05em;
			text-align: center;
			text-decoration: none;
		}
	}
	#tab{
		margin-top: clamp(48px, calc(64 / 1200 * 100dvw), 64px);
	}
}

#blog{
	& h2+div{
		display: grid;
		grid-template-columns: var(--wrap);
		justify-content: center;
		margin-top: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		font-weight: 700;
		text-align: center;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
}

#pickup{
	display: grid;
	width: var(--wrap);
	margin: 24px auto 0 auto;
	&:not(.slick-initialized){
		grid-template-columns: min(75dvw, 440px);
		justify-content: center;
	}
	& dl{
		grid-column: 1;
		grid-row: 1;
		position: relative;
		display: grid;
		border-radius: 16px;
		overflow: hidden;
		&:nth-child(n+2){
			visibility: hidden;
		}
		& dt,
		& dd{
			grid-column: 1;
			grid-row: 1;
		}
		&:nth-child(n+2){
			visibility: hidden;
		}
	}
	& dt{
		display: grid;
		align-content: end;
		padding: 1em;
		background: linear-gradient(transparent, rgba(35, 24, 24, 0.1) 60%, rgba(35, 24, 24, 0.5) 85%, rgba(35, 24, 24, 0.9));
		color: #fff;
		font-weight: 700;
		font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
		text-align: center;
		pointer-events: none;
		z-index: 1;
	}
	& dd{
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	&.slick-slider{
		grid-template-columns: auto 1fr auto;
		align-items: center;
		.slick-list{
			overflow: visible;
		}
		.slick-slide{
			width: min(75dvw, 440px);
			margin: 0 8px;
		}
	}
}

#tab{
	position: relative;
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	margin-top: clamp(24px, calc(48 / 1200 * 100dvw), 48px);
	&:before{
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		border-bottom: 2px solid currentColor;
	}
	& ul{
		display: grid;
		column-gap: clamp(8px, calc(16 / 1200 * 100dvw), 16px);
		& a{
			grid-row: 1;
		}
		@media (min-width: 768px) {
			grid-template-columns: repeat(2, 1fr);
		}
	}
	& li{
		display: contents;
	}
	& a{
		position: relative;
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: 0.5em;
		min-height: 64px;
		padding: 0.25em 1em;
		background: var(--color);
		border: solid var(--color);
		border-width: 2px 2px 0 2px;
		border-radius: 16px 16px 0 0;
		color: #fff;
		font-weight: 700;
		font-size: clamp(14px, calc(18 / 768 * 100dvw), 18px);
		letter-spacing: 0.05em;
		text-align: center;
		text-decoration: none;
		word-break: keep-all;
		overflow-wrap: anywhere;
		&:before{
			content: "";
			aspect-ratio: 1;
			height: 8px;
			background: var(--variable-color-sub);
			border-radius: 4px;
		}
		.select &{
			background: #fff;
			color: var(--color);
			pointer-events: none;
		}
	}
}

#search{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	padding: clamp(24px, calc(40 / 1200 * 100dvw), 40px) 0 clamp(24px, calc(32 / 1200 * 100dvw), 32px) 0;
	overflow: hidden;
	& h2{
		display: none;
	}
	#searchCurrent{
		margin-top: clamp(24px, calc(40 / 1200 * 100dvw), 40px);
	}
}

#searchMenu{
	& summary{
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: 0.5em;
		padding: 0.25em 1em;
		background: var(--variable-color);
		border-radius: 24px;
		font-weight: 700;
		letter-spacing: 0.025em;
		text-align: center;
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 10px;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><polyline points="5 8 10 2 0 2 5 8"/></svg>') no-repeat center / contain;
		}
		[open] &{
			background: #fff;
		}
		[open] &:after{
			transform: scale(1, -1);
		}
	}
	& summary+div{
		padding: clamp(16px, calc(24 / 1200 * 100dvw), 24px);
		& ul{
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(min(100%, 192px), 1fr));
			grid-gap: 8px 24px;
			& ul{
				grid-template-columns: 1fr;
				grid-gap: unset;
				padding: 8px 0 8px 24px;
			}
		}
		& label{
			font-weight: 700;
		}
		& div:has(.doSearch){
			display: grid;
			justify-items: center;
			grid-gap: 16px;
			margin: clamp(32px, calc(56 / 1200 * 100dvw), 56px) 0 16px 0;
		}
		.doSearch,
		.doClearAll{
			all: unset;
			box-sizing: border-box;
			cursor: pointer;
			display: grid;
			align-items: center;
			min-width: min(100%, 560px);
			min-height: 48px;
			padding: 0.25em 1em;
			background: var(--variable-color);
			border-radius: 24px;
			color: inherit;
			font-weight: 700;
			font-size: 14px;
			letter-spacing: 0.1em;
			text-align: center;
		}
		.doSearch{
			grid-template-columns: 1fr auto;
			&:after{
				content: "";
				aspect-ratio: 1;
				width: 20px;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="fill: none; stroke: black; stroke-linecap: round; stroke-width: 2px;"><path d="M12.71,12.71l6.29,6.29"/><circle cx="7.75" cy="7.75" r="6.75"/></svg>') no-repeat center / contain;
			}
		}
		.doClearAll{
			min-width: min(100%, 320px);
			min-height: 40px;
			background: var(--color);
			color: #fff;
		}
	}
	#searchButton{
		display: grid;
		align-items: center;
		column-gap: 8px;
		width: 100%;
		& input{
			all: unset;
			box-sizing: border-box;
			padding: 0 1em;
			border: 1px solid #ccc;
			border-radius: 8px;
			letter-spacing: 0.05em;
			::placeholder{
				color: #8f8f8f;
			}
		}
		.doSearch{
			all: unset;
			box-sizing: border-box;
			cursor: pointer;
			position: relative;
			justify-self: center;
			aspect-ratio: 1;
			background: var(--variable-color);
			border-radius: 8px;
			font-size: 0;
			&:after{
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="fill: none; stroke: black; stroke-linecap: round; stroke-width: 2px;"><path d="M12.71,12.71l6.29,6.29"/><circle cx="7.75" cy="7.75" r="6.75"/></svg>') no-repeat center / 20px;
			}
		}
	}
	@media (max-width: 991.98px) {
		display: grid;
		grid-row-gap: 16px;
		& details{
			border-radius: 24px;
			overflow: hidden;
			&[open]{
				outline: 2px solid currentColor;
				&::details-content{
					border-top: 2px solid currentColor;
				}
			}
		}
		& summary{
			min-height: 48px;
			padding: 0.25 1em;
			border-radius: 24px 24px 0 0;
			[open] &{
				border-color: var(--color);
			}
		}
		& menu{
			display: none;
		}
		#searchButton{
			grid-template-columns: auto 48px;
			& input{
				height: 48px;
			}
			.doSearch{
				width: 48px;
			}
		}
	}
	@media (min-width: 992px) {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 8px;
		&:has(details:nth-child(2)){
			grid-template-columns: repeat(3, auto);
			& details::details-content{
				grid-column: 1 / 4;
			}
		}
		&:has(details:nth-child(3)){
			grid-template-columns: repeat(4, auto);
			& details::details-content{
				grid-column: 1 / 5;
			}
		}
		&:has(details:nth-child(4)){
			grid-template-columns: repeat(5, auto);
			& details::details-content{
				grid-column: 1 / 6;
			}
		}
		&:has(details:nth-child(4)):has(#searchDate){
			grid-template-columns: 1.1fr 1fr 1fr 1.5fr 1.5fr;
		}
		& details{
			display: contents;
			&::details-content{
				grid-row: 2;
				grid-column: 1 / 3;
				box-sizing: border-box;
			}
		}
		& summary{
			min-height: 40px;
			padding: 0 1em;
			outline: 2px solid transparent;
			outline-offset: -1px;
			border-radius: 20px;
			font-size: 14px;
			[open] &{
				outline-color: var(--color);
			}
		}
		& summary+div{
			margin-top: 16px;
			background: #fff;
			border: 2px solid currentColor;
			border-radius: 8px;
			[open] &{
				position: relative;
				z-index: 1;
			}
			&:not(:has(#searchArea)){
				padding-top: 56px;
			}
		}
		& menu{
			all: unset;
			box-sizing: border-box;
			cursor: pointer;
			position: absolute;
			top: 0;
			right: 0;
			aspect-ratio: 1;
			width: 40px;
			background: currentColor;
			font-size: 0;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="fill: none; stroke: black;"><line x1="5" y1="5" x2="15" y2="15"/><line x1="5" y1="15" x2="15" y2="5"/></svg>') no-repeat center / 50%;
			z-index: 1;
		}
		#searchButton{
			align-self: center;
			grid-template-columns: 1fr 40px;
			height: 40px;
			& input{
				height: 40px;
				font-size: 14px;
			}
			.doSearch{
				width: 40px;
			}
		}
	}
}

#searchArea{
	display: grid;
	margin-inline: auto;
	grid-gap: 24px;
	#searchAreaMap{
		width: min(100%, 366px);
		& svg > use{
			pointer-events: none;
		}
		& a{
			cursor: pointer;
			&:nth-of-type(1){
				fill: rgba(232, 200, 170, .2);
				stroke: #bf732e;
				&.select{
					fill: rgba(209, 149, 94, .8);
				}
			}
			&:nth-of-type(2){
				fill: rgba(193, 232, 185, .2);
				stroke: #51a641;
				&.select{
					fill: rgba(139, 209, 125, .8);
				}
			}
			&:nth-of-type(3){
				fill: rgba(187, 219, 237, .2);
				stroke: #4494c2;
				&.select{
					fill: rgba(120, 183, 219, .8);
				}
			}
			&:nth-of-type(4){
				fill: rgba(232, 237, 169, .2);
				stroke: #c8d348;
				&.select{
					fill: rgba(200, 211, 72, .8);
				}
			}
			&:nth-of-type(5){
				fill: rgba(199, 199, 232, .2);
				stroke: #6565c7;
				&.select{
					fill: rgba(153, 153, 212, .8);
				}
			}
		}
	}
	#searchAreaList{
		& ul{
			grid-row-gap: clamp(16px, calc(32 / 1200 * 100dvw), 32px);
		}
		& li{
			display: flex;
			justify-content: start;
			&:has([data-id="1"]){
				order: 4;
				color: #bf732e;
			}
			&:has([data-id="2"]){
				order: 2;
				color: #51a641;
			}
			&:has([data-id="3"]){
				order: 1;
				color: #4494c2;
			}
			&:has([data-id="4"]){
				order: 5;
				color: #c8d348;
			}
			&:has([data-id="5"]){
				order: 3;
				color: #6565c7;
			}
		}
		& label{
			display: grid;
			align-items: center;
			min-height: 40px;
			padding: 0.25em 1em;
			border-radius: 20px;
			font-size: clamp(16px, calc(20 / 768 * 100dvw), 20px);
			&:has(input:checked){
				color: #fff;
			}
			&:has(input[data-id="1"]:checked){
				background: #d1955e;
			}
			&:has(input[data-id="2"]:checked){
				background: #8bd17d;
			}
			&:has(input[data-id="3"]:checked){
				background: #78b7db;
			}
			&:has(input[data-id="4"]:checked){
				background: #c8d348;
			}
			&:has(input[data-id="5"]:checked){
				background: #9999d4;
			}
			& input{
				align-self: start;
				width: 12px;
				border-color: currentColor;
				transform: translateY(calc(clamp(16px, calc(20 / 768 * 100dvw), 20px) * 0.825 - 50%));
				&:checked{
					background: #fff url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0.5 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 7 4 10 11 3" /></svg>') no-repeat center / 75%;
					border-color: transparent;
				}
			}
		}
	}
	@media (min-width: 576px) {
		width: min(calc(100% - 32px), 720px);
		grid-template-columns: 1fr auto;
		justify-content: space-between;
		align-items: center;
	}
}

#searchDate{
	&::details-content{
	}
	& table{
		grid-column: 1;
		grid-row: 1;
		width: 100%;
		text-align: center;
		&:nth-child(n+2){
			visibility: hidden;
		}
	}
	& caption{
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: baseline;
		padding: 8px 16px;
		background: var(--variable-color-sub);
		color: #fff;
		font-weight: 700;
		letter-spacing: 0.05em;
		& span{
			font-size: 12px;
		}
	}
	& thead{
		display: grid;
		background: var(--variable-color-sub);
		color: #fff;
		font-weight: 700;
		& td{
			padding: 4px;
		}
	}
	& tbody{
		display: grid;
		border: 0 solid var(--color);
		border-width: 1px 0 0 1px;
		font-weight: 500;
		& td{
			padding: 4px;
			border: 0 solid var(--color);
			border-width: 0 1px 1px 0;
			&:empty{
				background: #f7f4be;
			}
			&:not(:empty){
				cursor: pointer;
			}
			&:not(:empty).check{
				background: var(--variable-color);
			}
		}
	}
	& tr{
		display: grid;
		grid-template-columns: repeat(7, 1fr);
	}
	#searchDateSlide{
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
	}
	.slick-list{
		grid-column: 2;
	}
	.slick-slide{
		margin: 0 8px;
	}
	.slick-arrow{
		width: 32px;
	}
}

#searchCurrent{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	grid-gap: 8px 16px;
	& h3{
		align-self: start;
		font-weight: 700;
		letter-spacing: 0.05em;
	}
	& ul{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 8px;
	}
	& li{
		display: contents;
	}
	& a,
	& button{
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: 0.5em;
		min-height: 32px;
		padding: 0 1em;
		border: 2px solid currentColor;
		border-radius: 16px;
		color: inherit;
		font-weight: 700;
		font-size: 14px;
		letter-spacing: 0.05em;
		text-decoration: none;
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 10px;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" style="fill: none; stroke: black;"><line x1="1" y1="1" x2="11" y2="11"/><line x1="1" y1="11" x2="11" y2="1"/></svg>') no-repeat center / contain;
		}
	}
	& button{
		background: var(--color);
		border-color: transparent;
		color: #fff;
	}
}

#result{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	margin-bottom: clamp(64px, calc(120 / 1200 * 100dvw), 120px);
	&:has(#resultSet):before{
		content: "";
		grid-column: 1 / 4;
		grid-row: 1;
		background: var(--variable-color-bg);
		z-index: -1;
	}
	&>*{
		grid-column: 2;
	}
	& h2{
		display: none;
	}
	#resultSet{
		grid-row: 1;
	}
	#resultList{
		margin-top: clamp(32px, calc(56 / 1200 * 100dvw), 56px);
	}
	#resultMap{
		margin-top: clamp(48px, calc(64 / 1200 * 100dvw), 64px);
		}
	#pagenation{
		margin-top: clamp(48px, calc(64 / 1200 * 100dvw), 64px);
	}
}

#resultSet{
	display: grid;
	padding: 24px 0;
	@media (max-width: 991.98px) {
		grid-row-gap: 16px;
		justify-items: center;
	}
	@media (min-width: 992px) {
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: 24px;
	}
}

#resultCount{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 0.25em;
	font-weight: 700;
	font-size: clamp(14px, calc(18 / 768 * 100dvw), 18px);
	letter-spacing: 0.05em;
	& span{
		font-size: clamp(24px, calc(32 / 768 * 100dvw), 32px);
		line-height: 1;
		transform: translateY(-10%);
	}
	@media (max-width: 991.98px) {
		justify-content: center;
		text-align: center;
	}
}

#resultSwitch{
	display: flex;
	flex-wrap: wrap;
	grid-gap: 16px 24px;
	[LSC-LT="Order"]{
		display: none;
	}
	& dl{
		display: flex;
		align-items: center;
		grid-gap: 8px;
	}
	& dt{
		font-weight: 700;
		font-size: 14px;
		letter-spacing: 0.05em;
		text-align: center;
	}
	& dd{
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: 4px;
		min-height: 32px;
		padding: 0 16px;
		background: #fff;
		border: 1px solid #ccc;
		border-radius: 16px;
		font-weight: 700;
		font-size: 14px;
		text-align: center;
		cursor: pointer;
		&.select{
			background: var(--variable-color-sub);
			border-color: transparent;
			color: #fff;
			pointer-events: none;
		}
	}
	@media (max-width: 991.98px) {
		justify-content: center;
	}
	@media (max-width: 575.98px) {
		& dl{
			&:has(dd:nth-of-type(3)){
				flex-wrap: wrap;
				& dt{
					width: 100%;
				}
			}
		}
	}
	@media (min-width: 992px) {
		justify-content: end;
	}
}

#resultDisplay{
	& dd{
		grid-template-columns: auto 1fr;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 16px;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect width="100%" height="100%"/></svg>') no-repeat center / contain;
		}
		&[data-mode="grid"]:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6,16h4v-4h-4v4ZM0,16h4v-4H0v4ZM0,10h4v-4H0v4ZM6,10h4v-4h-4v4ZM0,4h4V0H0v4ZM6,4h4V0h-4v4ZM12,10h4v-4h-4v4ZM12,0v4h4V0h-4ZM12,16h4v-4h-4v4Z"/></svg>');
		}
		&[data-mode="line"]:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M0,4h4V0H0v4ZM0,10h4v-4H0v4ZM0,16h4v-4H0v4ZM6,1v2h10V1H6ZM6,15h10v-2H6v2ZM6,9h10v-2H6v2Z"/></svg>');
		}
		&[data-mode="map"]:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M13.26,4.75C13.01,2.41,10.96,0,7.95,0S2.72,2.34,2.72,5.23c0,.62.1,1.24.31,1.89.16.52.4.93.51,1.13l.03.05,4.38,7.7c1.18-2,3.92-6.68,4.11-6.99.37-.58.84-1.61.98-2.12.22-.87.29-1.55.23-2.14ZM8,7.07c-.96,0-1.75-.78-1.75-1.75s.78-1.75,1.75-1.75,1.75.78,1.75,1.75-.78,1.75-1.75,1.75Z"/></svg>');
		}
	}
}

#resultList{
	display: grid;
}

#resultMap{
	position: relative;
	height: min(570px, 75dvh);
	&:has(p){
		display: grid;
		align-content: center;
		justify-content: center;
		& p{
			align-self: center;
			text-align: center;
			font-weight: 700;
			letter-spacing: 0.1em;
		}
	}
	#gMap{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #f2f2f2;
		&[LSC-LB="dummy"]{
			display: grid;
			align-content: center;
			justify-content: center;
		}
		& button{
			all: unset;
		}
	}
}

.featureList,
.courseList{
	grid-gap: 40px clamp(24px, calc(40 / 1200 * 100dvw), 40px);
	@media (min-width: 768px) {
		grid-template-columns: repeat(2, 1fr);
	}
	& section{
		position: relative;
		display: grid;
		align-content: start;
		grid-row-gap: 8px;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 500 / 275;
			background: var(--dummy);
			border-radius: 16px;
		}
	}
	& h3{
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 0.25em;
		color: inherit;
		font-weight: 700;
		font-size: clamp(16px, calc(20 / 768 * 100dvw), 20px);
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 18px;
			border: 5px solid var(--color-theme-sub);
			border-radius: 100%;
			transform: translateY(calc(0.875em - 50%));
		}
	}
	& h3+div{
		display: contents;
		& i{
			position: absolute;
			top: 0;
			right: 0;
			display: grid;
			align-items: center;
			max-width: 50%;
			min-height: 32px;
			padding: 0 1em;
			background: var(--color-theme);
			border-radius: 0 10px 0 10px;
			color: #fff;
			font-weight: 500;
			font-size: clamp(12px, calc(14 / 768 * 100dvw), 14px);
			font-style: normal;
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	& figure{
		order: -1;
		& img{
			aspect-ratio: 500 / 275;
			object-fit: cover;
			border-radius: 16px;
		}
	}
}

.spotList{
	&:not(.line):not(.grid){
		visibility: hidden;
	}
	& section{
		position: relative;
		display: grid;
		align-content: start;
		grid-row-gap: 8px;
		&:not(:has(img)):before{
			content: "";
			background: var(--dummy);
			border-radius: 16px;
		}
	}
	& h3{
		font-weight: 700;
	}
	& h4{
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
	}
	& h3+div{
		display: contents;
	}
	& p{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	& time{
		font-weight: 700;
	}
	& ul{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 8px;
	}
	& li{
		display: grid;
		align-items: center;
		min-height: 32px;
		padding: 0 1em;
		border-radius: 16px;
		border: 2px solid currentColor;
		font-weight: 700;
		font-size: clamp(12px, calc(14 / 768 * 100dvw), 14px);
		letter-spacing: 0.05em;
		&[data-area="1"] {
			background: #d1955e;
		}
		&[data-area="2"] {
			background: #8bd17d;
		}
		&[data-area="3"] {
			background: #78b7db;
		}
		&[data-area="4"] {
			background: #c2d767;
		}
		&[data-area="5"] {
			background: #9999d4;
		}
	}
	& a{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		font-size: 0;
		&[data-fav-id]{
			all: unset;
			box-sizing: border-box;
			cursor: pointer;
			grid-column: 1;
			grid-row: 1;
			align-self: start;
			justify-self: end;
			position: relative;
			aspect-ratio: 1;
			width: 32px;
			margin: 8px;
			border-radius: 16px;
			background: #fff;
			color: var(--variable-color);
			font-size: 0;
			z-index: 1;
			&:before{
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M26.12,12.81h-7.46l-2.3-7.2c-.11-.35-.6-.35-.72,0l-2.3,7.2h-7.46c-.36,0-.51.46-.22.68l6.04,4.46-2.31,7.21c-.11.35.29.63.58.42l6.03-4.45,6.03,4.45c.29.22.69-.07.58-.42l-2.31-7.21,6.04-4.46c.29-.22.14-.68-.22-.68Z"/></svg>') no-repeat center / contain;
			}
			&.favOn{
				background: var(--variable-color);
				color: #fff;
			}
		}
	}
	& figure{
		order: -1;
		& img{
			object-fit: cover;
			border-radius: 16px;
		}
	}
	&.grid{
		grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 8px), 216px), 1fr));
		grid-gap: 40px 16px;
		& section{
			&:not(:has(img)):before,
			& figure{
				grid-column: 1;
				grid-row: 1;
			}
			&:not(:has(img)):before,
			& img{
				aspect-ratio: 1;
			}
		}
		& h4{
			display: none;
		}
		& ul{
			display: none;
		}
		& h3{
			font-weight: 700;
			font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
		}
		& p{
			-webkit-line-clamp: 2;
			max-height: calc(1.65em * 2);
			font-size: clamp(12px, calc(14 / 768 * 100dvw), 14px);
		}
		& time{
			font-size: clamp(12px, calc(14 / 768 * 100dvw), 14px);
		}
	}
	&.line{
		& section{
			padding-bottom: clamp(24px, calc(40 / 1200 * 100dvw), 40px);
			border-bottom: 1px solid #ccc;
			&:not(:has(img)):before{
				aspect-ratio: 3 / 2;
			}
			& img{
				aspect-ratio: 3 / 2;
			}
		}
		& h3{
			font-size: clamp(18px, calc(24 / 768 * 100dvw), 24px);
			letter-spacing: 0.05em;
		}
		& p{
			-webkit-line-clamp: 4;
			max-height: calc(1.65em * 4);
			font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
		}
		& time{
			font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
		}
		@media (max-width: 575.98px) {
			& section{
				&:not(:has(img)):before,
				& figure{
					grid-column: 1;
					grid-row: 1;
				}
			}
			& ul{
				grid-row: 2;
			}
		}
		@media (min-width: 576px) {
			border-top: 1px solid #ccc;
			& section{
				grid-template-columns: clamp(200px, calc(344 / 1400 * 100dvw), 344px) 1fr;
				grid-template-rows: auto auto auto 1fr;
				column-gap: clamp(24px, calc(40 / 1200 * 100dvw), 40px);
				padding-top: clamp(24px, calc(40 / 1200 * 100dvw), 40px);
				&:not(:has(img)):before,
				& figure{
					grid-column: 1;
					grid-row: 1 / 6;
					align-self: start;
				}
				a[data-fav-id]{
					grid-column: 1;
					grid-row: 1 / 6;
				}
			}
			& ul{
				grid-row: 1;
			}
		}
	}
}


/*
.photoList{
	grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 8px), 216px), 1fr));
	grid-gap: 40px 16px;
	& section{
		position: relative;
		display: grid;
		align-content: start;
		grid-row-gap: 8px;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 1 / 0.75;
			background: var(--dummy);
			border-radius: 10px;
		}
		& ul{
			grid-row: 2;
			margin-top: 8px;
		}
	}
	& h3{
		font-weight: 700;
	}
	& h3+div{
		display: contents;
		& ul{
			display: flex;
			flex-wrap: wrap;
			grid-gap: 8px;
		}
		& li{
			display: grid;
			align-items: center;
			min-height: 32px;
			padding: 0 1em;
			border-radius: 16px;
			border: 2px solid currentColor;
			font-weight: 700;
			font-size: clamp(12px, calc(14 / 768 * 100dvw), 14px);
			letter-spacing: 0.05em;
			&[data-area="1"] {
				background: #d1955e;
			}
			&[data-area="2"] {
				background: #8bd17d;
			}
			&[data-area="3"] {
				background: #78b7db;
			}
			&[data-area="4"] {
				background: #c2d767;
			}
			&[data-area="5"] {
				background: #9999d4;
			}
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
			&[data-id]{
				all: unset;
				box-sizing: border-box;
				cursor: pointer;
				justify-self: center;
				display: grid;
				align-items: center;
				min-height: 40px;
				margin-top: 8px;
				padding: 0.25em 1em;
				border: 1px solid #ccc;
				border-radius: 8px;
				color: inherit;
				font-weight: 700;
				font-size: clamp(12px, calc(14 / 768 * 100dvw), 14px);
				text-align: center;
				text-decoration: none;
				&.deleteCart{
					background: #ccc;
					border-color: transparent;
				}
			}
		}
	}
	& figure{
		order: -1;
		& img{
			aspect-ratio: 1 / 0.75;
			object-fit: contain;
			background: #f2f2f2;
			border-radius: 10px;
		}
	}
}



.reviewList{
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 272px), 1fr));
	& section{
		position: relative;
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 3;
		align-content: start;
		grid-row-gap: 8px;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 1 / 0.75;
			background: var(--dummy);
			border-radius: 10px;
		}
	}
	& h3{
		margin: 0 16px;
		font-weight: 500;
		letter-spacing: 0.05em;
	}
	& h3+div{
		display: grid;
		grid-row-gap: 4px;
		margin: 0 16px;
		padding-top: 8px;
		border-top: 1px solid #8f8f8f;
		& p,
		& time{
			display: grid;
			grid-template-columns: auto 1fr;
			column-gap: 16px;
			color: #666666;
			font-weight: 500;
			font-size: 14px;
			letter-spacing: 0.05em;
			&:before{
				content: "";
				aspect-ratio: 1;
				width: 20px;
				background: var(--color-theme);
				transform: translateY(calc(0.875em - 50%));
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect width="100%" height="100%"/></svg>') no-repeat center / contain;
			}
		}
		& p:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.68,7.74l-2.32,2.69v9.58h5.29v-10.52l-2.39-1.8c-.18-.14-.43-.11-.58.06ZM15.81,8.8s0-.03,0-.05c0,0,0,0,0,0,0-.02,0-.03-.01-.05,0,0,0-.01,0-.02,0-.01,0-.02-.01-.04,0,0,0-.01,0-.02,0-.01-.01-.02-.02-.03,0,0,0,0,0-.01L10.36.19c-.08-.12-.21-.19-.36-.19s-.28.07-.36.19l-5.38,8.38h0s-.02.04-.03.06c0,0,0,0,0,0,0,.02-.01.04-.02.05,0,0,0,.01,0,.02,0,.01,0,.03,0,.04,0,0,0,.01,0,.02,0,.01,0,.03,0,.04v10.77c0,.11.05.22.12.3.08.08.19.12.3.12h2.27v-9.8l-1.71-1.48,2.92-4.55c.49.11,1.32.29,1.91.29s1.36-.17,1.9-.3l2.87,4.47-1.65.76v10.62h2.27c.11,0,.22-.05.3-.12.08-.08.12-.19.12-.3v-10.77s0,0,0,0Z"/></svg>');
		}
		& time:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M14.16,9.39h-3.1c-.1-.17-.24-.32-.42-.43V3.94c0-.35-.29-.64-.64-.64s-.64.29-.64.64v5.02c-.35.21-.59.6-.59,1.04,0,.67.55,1.22,1.23,1.22.43,0,.81-.22,1.03-.56h3.13c.35,0,.64-.29.64-.64s-.29-.64-.64-.64ZM10,0C4.47,0,0,4.48,0,10s4.47,10,10,10c5.53,0,10-4.48,10-10S15.53,0,10,0ZM15.71,15.72c-1.47,1.46-3.48,2.37-5.71,2.37-2.23,0-4.25-.9-5.71-2.37-1.46-1.47-2.37-3.48-2.37-5.72,0-2.24.9-4.26,2.37-5.72,1.47-1.47,3.48-2.37,5.71-2.37,2.23,0,4.25.9,5.71,2.37,1.46,1.47,2.37,3.48,2.37,5.72,0,2.24-.9,4.26-2.37,5.72Z"/></svg>');
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	& figure{
		order: -1;
		& img{
			aspect-ratio: 1 / 0.75;
			object-fit: cover;
			border-radius: 10px;
		}
	}
}



.worksList{
	& section{
		display: grid;
		align-content: start;
		grid-row-gap: 16px;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 3 / 2;
			background: var(--dummy);
			border-radius: 10px;
		}
	}
	& h3{
		grid-row: 1;
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 0.5em;
		color: inherit;
		font-weight: 700;
		font-size: clamp(18px, calc(22 / 768 * 100dvw), 22px);
		&:before{
			content: "";
			width: 3px;
			height: 1em;
			background: var(--color-theme);
			transform: translateY(calc(0.875em - 50%));
		}
	}
	& h3+div{
		order: 1;
		& dl{
			display: grid;
			background: #f7f7f7;
			border: 1px solid var(--color-theme);
			border-radius: 10px;
			overflow: hidden;
		}
		& dt,
		& dd{
			padding: 8px 16px;
			font-weight: 500;
			&:nth-of-type(even){
				background: #efefef;
			}
		}
		& dt{
			display: grid;
			grid-template-columns: auto 1fr;
			column-gap: 0.75em;
			&:before{
				content: "";
				width: 3px;
				height: 1em;
				background: var(--color-theme);
				transform: translateY(calc(0.875em - 50%));
			}
			&:nth-of-type(n+2){
				border-top: 1px solid #e8e8e8;
			}
		}
		@media (max-width: 575.98px) {
			& dd{
				padding-top: 0;
			}
		}
		@media (min-width: 576px) {
			& dl{
				grid-template-columns: auto 1fr;
			}
			& dd{
				&:nth-of-type(n+2){
					border-top: 1px solid #e8e8e8;
				}
			}
		}
	}
	& figure{
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 10px;
		}
		.slick-slider{
			display: grid;
			grid-template-columns: auto 1fr auto;
			align-items: center;
			grid-row-gap: 16px;
		}
		.slick-list{
			grid-column: 1 / 4;
			grid-row: 1;
		}
		.slick-arrow{
			grid-row: 1;
			width: 32px;
			margin: 8px;
		}
		.slick-prev{
			grid-column: 1;
		}
		.slick-next{
			grid-column: 3;
		}
		.slick-dots{
			grid-column: 1 / 4;
			grid-gap: 8px;
		}
	}
	@media (min-width: 768px) {
		& section{
			grid-template-columns: repeat(2, 1fr);
			column-gap: clamp(32px, calc(56 / 1200 * 100dvw), 56px);
		}
		& h3{
			grid-column: 1 / 3;
		}
	}
}
*/

.slick-arrow{
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	position: relative;
	aspect-ratio: 1;
	width: clamp(40px, calc(56 / 1200 * 100dvw), 56px);
	background: #fff;
	border: 1px solid currentColor;
	border-radius: 100%;
	font-size: 0;
	z-index: 1;
	&:hover{
		background: var(--color);
		&:before{
			color: #fff;
		}
	}
	&:before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: currentColor;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="5 2 11 8 5 14"/></svg>') no-repeat center / 16px;
	}
	&.slick-prev:before{
		transform: scale(-1, 1);
	}
}

.slick-dots{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	& li{
		aspect-ratio: 1;
		width: 10px;
		background: #bdbdbd;
		border-radius: 100%;
		overflow: hidden;
		&.slick-active{
			background: var(--color-theme);
		}
	}
	& button{
		visibility: hidden;
	}
}