/* CSS Document */

#feature,
#stay,
#spot,
#food,
#event,
#course,
#favorite,
#access,
#photo,
#pamphlet,
#link,
#inquiry,
#thanks{
	position: relative;
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	margin: clamp(32px, calc(48 / 1200 * 100vw), 48px) 0 40px 0;
	&:has(#pickup){
		overflow: hidden;
	}
	&:has(#tab:last-child){
		margin-bottom: unset;
	}
	&>*{
		grid-column: 2;
	}
	& h2{
		justify-self: center;
		display: grid;
		align-items: center;
		grid-row-gap: 8px;
		margin: 0 16px;
		font-weight: 700;
		font-size: clamp(20px, calc(24 / 1200 * 100vw), 24px);
		letter-spacing: 0.2em;
		text-align: center;
		&:before{
			justify-self: center;
			content: "";
			padding-bottom: 8px;
			height: 80px;
			background: #7EC6C6;
			background: linear-gradient(300deg,rgba(126, 198, 198, 1) 0%, rgba(100, 159, 225, 1) 100%);
		}
	}
	& h2+div:not([id]){
		margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
		font-size: clamp(14px, calc(16 / 1200 * 100vw), 16px);
		text-align: center;
		letter-spacing: 0.1em;
		line-height: 2;
		&:has(wbr){
			word-break: keep-all;
		}
	}
	#pickup{
		margin-top: 32px;
	}
	#tab{
		margin-top: 48px;
	}
}

#feature{
	& h2{
		&:before{
			aspect-ratio: 180 / 75;
			-webkit-mask: var(--feature-title) center center no-repeat;
		}
	}
}

#spot{
	& h2{
		&:before{
			aspect-ratio: 395 / 75;
			width: 100%;
			-webkit-mask: var(--spot-title) center center no-repeat;
		}
	}
}

#photo{
	& h2{
		&:before{
			aspect-ratio: 170 / 75;
			-webkit-mask: var(--photo-title) center center no-repeat;
		}
	}
	& h2 + div {
		display: flex;
		justify-content: center;
		& a {
			display: grid;
			grid-template-columns: 1fr 20px;
			align-items: center;
			grid-gap: 16px;
			width: min(100%, 320px);
			min-height: 56px;
			margin: auto;
			margin: 16px 0 0;
			padding: 8px 24px;
			border: 1px solid var(--color-theme);
			border-radius: 8px;
			background: #fff;
			color: var(--color-theme);
			font-weight: 700;
			text-align: center;
			text-decoration: none;
			&:after {
				content: "";
				aspect-ratio: 1;
				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"><path fill="white" d="M17.94,9.8s-.01-.02-.02-.03c-.05-.08-.12-.13-.21-.16l-8.93-4.4c-.06-.03-.12-.04-.19-.04-.08,0-.15.02-.22.06-.12.08-.2.21-.2.36v3.94s0,.04.01.05H2.42c-.23,0-.42.19-.42.42,0,.23.19.42.42.42h13.36s-6.77,3.32-6.77,3.32v-1.91c0-.23-.19-.42-.42-.42s-.42.19-.42.42v2.59c0,.15.08.28.2.36.12.08.28.08.41.02l8.98-4.41c.1-.05.16-.13.2-.22,0,0,0,0,0,0,.02-.05.03-.1.03-.15,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0-.01,0-.02,0-.04,0-.07-.02-.11,0-.03-.02-.05-.03-.07ZM9.02,9.52v-3.26s6.73,3.32,6.73,3.32h-6.74s.01-.04.01-.05Z"/></svg>') center no-repeat;
				-webkit-mask-size: contain;
				transition: transform 0.2s ease-out;
			}
		}
	}
}

#photo + #result{
	position: relative;
	padding-top: 0;
	&:before {
		grid-column: 1 / 4;
		grid-row: 3;
		content: "";
		border-bottom: 1px solid var(--color-border);
	}
	&:not(:has(#resultSet)){
		& h2 {
			display: block;
			color: var(--color-theme);
			font-size: 18px;
			font-weight: 700;
			letter-spacing: 0.05em;
			text-align: center;
			@media (min-width: 992px) {
				font-size: 20px;
			}
		}
		& h2 + div {
			margin: 16px 0 24px 0;
			word-break: keep-all;
			overflow-wrap: break-word;
			text-align: center;
		}
	}
}

:has(#photo) #request{
	grid-column: 2;
	display: flex;
	justify-content: center;
/*	margin-top: 64px;*/
	padding-bottom: clamp(96px, calc(120 / 1200 * 100vw), 120px);
	@media (min-width: 992px) {
/*		margin-top: 96px;*/
	}
	& a{
		display: grid;
		grid-template-columns: 1fr 20px;
		align-items: center;
		grid-gap: 16px;
		width: min(100%, 320px);
		min-height: 56px;
		padding: 8px 24px;
		border: 1px solid var(--color-theme);
		border-radius: 8px;
		background: #fff;
		color: var(--color-theme);
		font-weight: 700;
		text-align: center;
		text-decoration: none;
		&:after{
			content: "";
			aspect-ratio: 1;
			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"><path fill="white" d="M17.94,9.8s-.01-.02-.02-.03c-.05-.08-.12-.13-.21-.16l-8.93-4.4c-.06-.03-.12-.04-.19-.04-.08,0-.15.02-.22.06-.12.08-.2.21-.2.36v3.94s0,.04.01.05H2.42c-.23,0-.42.19-.42.42,0,.23.19.42.42.42h13.36s-6.77,3.32-6.77,3.32v-1.91c0-.23-.19-.42-.42-.42s-.42.19-.42.42v2.59c0,.15.08.28.2.36.12.08.28.08.41.02l8.98-4.41c.1-.05.16-.13.2-.22,0,0,0,0,0,0,.02-.05.03-.1.03-.15,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0-.01,0-.02,0-.04,0-.07-.02-.11,0-.03-.02-.05-.03-.07ZM9.02,9.52v-3.26s6.73,3.32,6.73,3.32h-6.74s.01-.04.01-.05Z"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
			transition: transform 0.2s ease-out;
		}
	}
}

#access{
	& h2{
		&:before{
			aspect-ratio: 170 / 75;
			-webkit-mask: var(--access-title) center center no-repeat;
		}
	}
}

#pamphlet{
	& h2{
		&:before{
			aspect-ratio: 254 / 75;
			-webkit-mask: var(--pamphlet-title) center center no-repeat;
		}
	}
}

#food{
	& h2{
		&:before{
			aspect-ratio: 254 / 75;
			-webkit-mask: var(--food-title) center center no-repeat;
		}
	}
}

#course{
	& h2{
		&:before{
			aspect-ratio: 170 / 75;
			-webkit-mask: var(--course-title) center center no-repeat;
		}
	}
}

#event{
	& h2{
		&:before{
			aspect-ratio: 170 / 75;
			-webkit-mask: var(--event-title) center center no-repeat;
		}
	}
}

#stay{
	& h2{
		&:before{
			aspect-ratio: 300 / 75;
			-webkit-mask: var(--stay-title) center center no-repeat;
		}
	}
}

#link{
	& h2{
		&:before{
			aspect-ratio: 254 / 75;
			-webkit-mask: var(--link-title) center center no-repeat;
		}
	}
}

#inquiry,#thanks{
	& h2{
		&:before{
			aspect-ratio: 170 / 75;
			-webkit-mask: var(--inquiry-title) center center no-repeat;
		}
	}
}


#pickup{
	justify-self: center;
	display: grid;
	grid-template-columns: 0 1fr 0;
	width: min(100%, 664px);
	width: min(calc(100% - 16px), calc(600px + clamp(56px, calc(64 / 1200 * 100vw), 64px)));
	&[LSC-LB="CategoryMain"]{
		display: none;
	}
	&>dl,
	&>span{
		grid-column: 2;
		grid-row: 1;
		margin: 0 clamp(28px, calc(32 / 1200 * 100vw), 32px);
		&:nth-child(n+2){
			visibility: hidden;
		}
	}
	& dl{
		&:not(:has(img)){
			&:before{
				grid-column: 1;
				grid-row: 1;
				content: "";
				aspect-ratio: 1 / 0.667;
				background: var(--dummy);
				border-radius: 20px;
			}
		}
	}
	& dt{
		position: relative;
		grid-column: 1;
		grid-row: 1;
		justify-self: end;
		align-self: end;
		display: grid;
		grid-template-columns: 20px 1fr;
		align-items: center;
		grid-gap: 4px 8px;
		padding: 8px 24px;
		font-size: clamp(12px, calc(16 / 1200 * 100vw), 16px);
		font-weight: 700;
		border: 1px solid #f2f2f2;
		border-top-left-radius: 20px;
		background: #fff;
		z-index: 1;
		&:before{
			content: "";
			aspect-ratio: 1;
			background: var(--color-theme);
			-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="M16.12,8.12c0-3.11-2.52-5.62-5.62-5.62s-5.62,2.52-5.62,5.62,5.62,10.38,5.62,10.38c0,0,5.62-7.27,5.62-10.38ZM7.97,7.79c0-1.4,1.13-2.53,2.53-2.53s2.53,1.13,2.53,2.53-1.13,2.53-2.53,2.53-2.53-1.13-2.53-2.53Z"/></svg>');
		}
		&:after{
			grid-column: 2;
			grid-row: 2;
			content: "";
			width: 100%;
			height: 2px;
			background: var(--color-theme);
		}
	}
	& dl{
		position: relative;
		display: grid;
		grid-row-gap: 16px;
	}
	& dd{
		grid-column: 1;
		grid-row: 1;
/*		&:has(a){
			display: contents;
		}*/
		& a{
			position: absolute;
			top: 0;
			left: 0;
			aspect-ratio: 1 / 0.667;
			width: 100%;
			font-size: 0;
		}
		& img{
			aspect-ratio: 1 / 0.667;
			object-fit: cover;
			border-radius: 20px;
		}
	}
	&.slick-slider{
		&:before{
			content: "";
			grid-column: 2;
			grid-row: 1;
			aspect-ratio: 1 / 0.667;
			margin: 0 clamp(28px, calc(32 / 1200 * 100vw), 32px);
		}
	}
	.slick-list{
		grid-column: 2;
		grid-row: 1;
		overflow: visible;
	}
	.slick-slide{
		margin: 0 clamp(8px, calc(24 / 1200 * 100vw), 24px);
	}
	.slick-arrow{
		all: unset;
		box-sizing: border-box;
		align-self: center;
		justify-self: center;
		position: relative;
		aspect-ratio: 1;
		width: 40px;
		background: rgba(255, 255, 255, 0.5);
		border-radius: 100%;
		font-size: 0;
		cursor: pointer;
		z-index: 1;
		&:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			aspect-ratio: 1;
			background: var(--color-theme) url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="white" d="M17.94,9.8s-.01-.02-.02-.03c-.05-.08-.12-.13-.21-.16l-8.93-4.4c-.06-.03-.12-.04-.19-.04-.08,0-.15.02-.22.06-.12.08-.2.21-.2.36v3.94s0,.04.01.05H2.42c-.23,0-.42.19-.42.42,0,.23.19.42.42.42h13.36s-6.77,3.32-6.77,3.32v-1.91c0-.23-.19-.42-.42-.42s-.42.19-.42.42v2.59c0,.15.08.28.2.36.12.08.28.08.41.02l8.98-4.41c.1-.05.16-.13.2-.22,0,0,0,0,0,0,.02-.05.03-.1.03-.15,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0-.01,0-.02,0-.04,0-.07-.02-.11,0-.03-.02-.05-.03-.07ZM9.02,9.52v-3.26s6.73,3.32,6.73,3.32h-6.74s.01-.04.01-.05Z"/></svg>') center no-repeat;
			background-size: 24px;
			border-radius: 100%;
		}
	}
	.slick-prev{
		&:before{
			transform: scale(-1, 1);
		}
	}
}

#tab{
	grid-column: 1 / 4;
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	border-bottom: 2px solid var(--color-theme);
	& ul{
		grid-column: 2;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		justify-self: center;
		column-gap: clamp(16px, calc(32 / 1200 * 100vw), 32px);
		width: min(100%, 672px);
		&:has(li:nth-child(3)){
			grid-template-columns: repeat(3, 1fr);
		}
		&:has(li:nth-child(4)){
			grid-template-columns: repeat(4, 1fr);
		}
	}
	& li{
		display: contents;
		& a{
			display: grid;
			align-items: center;
			min-height: 56px;
			padding: 8px;
			font-weight: 700;
			font-size: clamp(14px, calc(20 / 1200 * 100vw), 20px);
			letter-spacing: 0.1em;
			text-align: center;
			text-decoration: none;
			color: #fff;
			background: #ccc;
			border-radius: 20px 20px 0 0;
			.select &{
				background: var(--color-theme);
				border-color: transparent;
				color: #fff;
				pointer-events: none;
			}
			&:has(wbr){
				word-break: keep-all;
				overflow-wrap: anywhere;
			}
		}
	}
}

#favorite{
	position: relative;
	& h2{
		&:before{
			aspect-ratio: 254 / 75;
			-webkit-mask: var(--favorite-title) center center no-repeat;
		}
	}
	#shareToggle{
		display: grid;
		grid-template-columns: 1fr 30px;
		align-items: center;
		grid-gap: 16px;
		width: min(100%, 320px);
		min-height: 56px;
		margin: 16px auto 0;
		padding: 8px 24px;
		border: 1px solid var(--color-theme);
		border-radius: 8px;
		background: #fff;
		color: var(--color-theme);
		font-weight: 700;
		text-align: center;
		text-decoration: none;
		&:after {
			content: "";
			aspect-ratio: 1;
			border-radius: 100%;
			background: #28a0a0 url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M21.85,12.79c-1.47-3.88-6.22-2.14-6.66-.2-.61-2.06-5.25-3.6-6.66.2-1.58,4.24,6.11,8.05,6.66,8.67.55-.5,8.24-4.5,6.66-8.67Z" style="fill: white;"/></svg>');
		}
	}
	#share{
		position: fixed;
		top: 0;
		left: 0;
		display: grid;
		grid-template-columns: 1fr min(var(--wrap), 960px) 1fr;
		align-content: center;
		width: 100%;
		height: 100%;
		padding: clamp(32px, 7.2vw, 48px) 0;
		background: rgba(0,0,0,0.8);
		z-index: 1000;
		& menu{
			all: unset;
			box-sizing: border-box;
			grid-column: 2;
			grid-row: 1;
			justify-self: end;
			aspect-ratio: 1;
			width: 48px;
			background: currentColor;
			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 16 16" style="fill: none; stroke: black; stroke-width: 1px;"><polyline points="1 1 15 15"/><polyline points="15 1 1 15"/></svg>') no-repeat center / 16px;
		}
		& dl{
			grid-column: 2;
			grid-row: 1;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			grid-gap: 16px;
			padding: 24px;
			background: #fff;
			border-radius: 8px;
			filter: drop-shadow(0 0 0.3em rgba(0,0,0,0.1));
		}
		& dt{
			display: grid;
			grid-template-columns: auto 1fr;
			grid-gap: 10px;
			width: 100%;
			font-weight: 700;
			font-size: 20px;
			letter-spacing: 0.05em;
			&:before{
				content: "";
				width: 4px;
				margin: 0.4em 0 0.3em 0;
				background: var(--color-theme);
			}
		}
		& dt+dd{
			width: 100%;
		}
		& dd{
			& 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-theme);
				border-radius: 16px;
				font-weight: 700;
				color: var(--color-theme);
				font-size: clamp(12px, calc(14 / 1200 * 100vw), 14px);
				text-align: center;
				text-decoration: none;
				letter-spacing: 0.025em;
				cursor: pointer;
				&:lang(en){
					font-size-adjust: 0.543;
					font-family: dinosaur, var(--font);
				}
				&:before{
					content: "";
					aspect-ratio: 1;
					background: currentColor;
					transform: translateX(-4px);
					-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>') no-repeat center / contain;
				}
				&[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>');
					}
				}
			}
		}
	}
}

#search{
	position: relative;
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	padding: clamp(24px, calc(32 / 1200 * 100vw), 32px) 0 clamp(32px, calc(40 / 1200 * 100vw), 40px) 0;
	background: var(--bg-texture);
	@media (max-width: 991.98px) {
		#searchMenu{
			display: contents;
			& ul{
				display: contents;
			}
			& li{
				grid-column: 2;
				&:nth-of-type(n+2){
					margin-top: 16px;
				}
				&:nth-child(1){
					order: 1;
				}
				&:nth-child(2){
					order: 2;
				}
				&:nth-child(3){
					order: 3;
				}
				&:nth-child(4){
					order: 4;
				}
				&:nth-child(5){
					order: 5;
				}
			}
		}
		#searchDetail{
			display: contents;
			& section{
				grid-column: 2;
				margin-bottom: 8px;
				&:nth-child(1){
					order: 1;
				}
				&:nth-child(2){
					order: 2;
				}
				&:nth-child(3){
					order: 3;
				}
				&:nth-child(4){
					order: 4;
				}
				&:nth-child(5){
					order: 5;
				}
			}
		}
		#searchCurrent{
			order: 10;
		}
	}
	@media (min-width: 992px) {
		#searchDetail{
			position: relative;
			& section{
				justify-self: center;
				position: absolute;
				top: 24px;
				width: 90%;
				max-height: 75vh;
				overflow-y: auto;
				z-index: 10;
			}
		}
	}
	&>*{
		grid-column: 2;
	}
	& h2, & h3{
		position: relative;
		display: grid;
		grid-template-columns: 20px 1fr;
		align-items: center;
		grid-gap: 6px;
		margin-bottom: 24px;
		font-weight: 700;
		letter-spacing: 0.05em;
		&:before{
			content: "";
			aspect-ratio: 1;
			background: var(--color-theme);
			-webkit-mask:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13.77,3.5c-.41,0-.78-.16-1.07-.44-.14-.14-.25-.31-.32-.49-.08-.18-.11-.37-.11-.57,0-.1,0-.2.02-.3.02-.09.05-.19.09-.28.04-.09.08-.17.14-.26.05-.08.12-.16.18-.22.56-.56,1.57-.56,2.13,0,.06.06.13.14.18.22.06.09.1.17.14.26.04.09.07.19.09.28.02.1.03.2.03.3,0,.2-.04.39-.12.57-.07.18-.18.35-.32.49-.29.28-.67.44-1.06.44ZM13.77,14.17h0c.82,0,1.49-.68,1.49-1.51h0c0-.82-.67-1.5-1.49-1.5h0c-.83,0-1.51.68-1.51,1.5s.68,1.51,1.51,1.51ZM13.77,8.83h0c.82,0,1.49-.67,1.49-1.5h0c0-.83-.67-1.5-1.49-1.5h0c-.83,0-1.51.67-1.51,1.5s.68,1.5,1.51,1.5ZM14.83,19.06c.28-.28.44-.66.44-1.06,0-.1-.01-.2-.03-.3-.02-.09-.05-.19-.09-.28-.04-.09-.08-.17-.14-.26-.05-.08-.11-.15-.18-.22-.35-.35-.87-.51-1.36-.41-.09.02-.19.05-.28.08-.09.04-.18.09-.26.14-.08.06-.16.12-.22.19-.07.07-.14.14-.19.22-.06.09-.1.17-.14.26-.04.09-.07.19-.09.28-.01.1-.02.2-.02.3,0,.4.15.78.44,1.06.28.28.66.44,1.06.44s.77-.16,1.06-.44ZM7.29,3.06c.28-.29.44-.66.44-1.06,0-.1-.01-.2-.03-.3-.02-.09-.05-.19-.09-.28-.03-.09-.08-.17-.13-.26-.06-.08-.12-.16-.19-.22-.07-.07-.15-.14-.23-.19-.08-.05-.17-.1-.26-.14s-.18-.07-.28-.08c-.48-.1-1,.06-1.35.41-.07.06-.13.14-.19.22-.05.09-.1.17-.14.26-.04.09-.06.19-.08.28-.02.1-.03.2-.03.3,0,.4.15.77.44,1.06.14.14.3.25.48.32.19.08.38.12.58.12.4,0,.77-.16,1.06-.44ZM6.23,14.17h0c.83,0,1.5-.68,1.5-1.51h0c0-.82-.67-1.5-1.5-1.5h0c-.83,0-1.5.68-1.5,1.5s.67,1.51,1.5,1.51ZM6.23,8.83h0c.83,0,1.5-.67,1.5-1.5h0c0-.83-.67-1.5-1.5-1.5h0c-.83,0-1.5.67-1.5,1.5s.67,1.5,1.5,1.5ZM7.29,19.06c.28-.29.44-.66.44-1.06,0-.1-.01-.2-.03-.3-.02-.09-.05-.19-.09-.28-.03-.09-.08-.17-.13-.26-.06-.08-.12-.15-.19-.22-.35-.35-.87-.51-1.36-.41-.09.02-.19.05-.28.08-.09.04-.17.09-.26.14-.08.06-.15.12-.22.19s-.13.14-.19.22c-.05.09-.1.17-.14.26-.03.09-.06.19-.08.28-.02.1-.03.2-.03.3,0,.4.15.77.44,1.06.28.28.66.44,1.06.44s.77-.16,1.06-.44Z"/></svg>');
		}
	}
	#searchCurrent{
		margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
	}
}

#searchMenu{
	& ul{
		display: grid;
		grid-gap: 16px clamp(16px, calc(24 / 1200 * 100vw), 24px);
	}
	& li{
		@media (min-width: 992px) {
			grid-row: 1;
		}
		&:not(:has(.doSearch)){
			display: grid;
			grid-template-columns: 1fr 12px;
			column-gap: 8px;
			align-items: center;
			min-height: 48px;
			padding: 4px 16px 4px 24px;
			background: #fff;
			border: 1px solid #999;
			border-radius: 4px;
			cursor: pointer;
			&:after{
				content: "";
				aspect-ratio: 1;
				background: var(--color-theme);
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10,16.93L2,3.07h16l-8,13.85Z"/></svg>') no-repeat center / contain;
			}
			&.select{
				color: var(--color-theme);
				border-color: var(--color-theme);
				&:after{
					transform: scale(1, -1);
				}
			}
		}
		&:has(.doSearch){
			display: grid;
			grid-template-columns: 1fr 48px;
			column-gap: 8px;
			@media (min-width: 992px) {
				column-gap: 24px;
			}
		}
	}
	& input{
		&#searchKeyword{
			padding: 4px 24px;
			border-radius: 4px;
			border: 1px solid #999;
			&::placeholder{
				color: #a3a2a1;
			}
			&:focus{
				border-color: var(--color-theme);
				color: var(--color-theme);
				outline: none;
			}
			@media (min-width: 992px) {
				width: auto;
			}
		}
	}
	& button{
		all: unset;
		box-sizing: border-box;
		&.doSearch{
			position: relative;
			aspect-ratio: 1;
			width: 48px;
			background: var(--color-theme);
			border-radius: 4px;
			color: #fff;
			font-size: 0;
			&: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 20 20"><path d="M18.67,16.87l-3.97-3.97c.84-1.24,1.28-2.68,1.28-4.18,0-4.13-3.36-7.49-7.49-7.49S1,4.59,1,8.72s3.36,7.49,7.49,7.49c1.71,0,3.37-.59,4.7-1.67l3.9,3.9c.21.21.49.33.79.33s.58-.12.79-.33c.21-.21.33-.49.33-.79s-.12-.58-.33-.79ZM13.75,8.72c0,2.9-2.36,5.26-5.26,5.26s-5.26-2.36-5.26-5.26,2.36-5.26,5.26-5.26,5.26,2.36,5.26,5.26Z"/></svg>') no-repeat center / min(75%, 32px) auto;
			}
		}
	}
}

#searchDetail{
	& section{
		position: relative;
		display: grid;
		background: #fff;
		padding: clamp(24px, calc(32 / 1200 * 100vw), 32px);
		@media (max-width: 991.98px) {
			border-radius: 0 0 24px 24px;
		}
		@media (min-width: 992px) {
			padding-right: 56px;
			border: 2px solid var(--color-theme);
			border-radius: 8px;
		}
	}
	& h3{
/*		display: none;*/
	}
	& div{
		&:has(.doSearch){
			order: 1;
			justify-items: center;
			display: grid;
			grid-gap: 16px 24px;
			margin-top: clamp(24px, calc(48 / 1200 * 100vw), 48px);
			@media (min-width: 992px) {
				display: flex;
				justify-content: center;
				flex-direction: row-reverse;
				column-gap: clamp(56px, calc(64 / 1200 * 100vw), 64px);
			}
		}
	}
	& ul{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
		align-items: start;
		grid-gap: 4px 24px;
		&:has(ul){
			grid-row-gap: 24px;
		}
		& ul{
			grid-template-columns: 1fr;
			margin-top: 4px;
			& label{
				min-height: 32px;
				font-weight: 500;
				font-size: 12px;
				&:has(:checked){
					background: rgba(var(--color-theme-rgb), 0.5);
				}
			}
			& input{
				width: 12px;
				margin: 1px;
			}
		}
	}
	& label{
		display: grid;
		align-content: center;
		min-height: 40px;
		padding: 4px 16px;
		font-weight: 700;
		letter-spacing: 0.05em;
		&:has(:checked){
			color: #fff;
			background: var(--color-theme);
		}
		& input{
			width: 16px;
			font-size: inherit;
/*			transform: translateY(0.5em);*/
			border: 1px solid var(--color-theme);
/*			&:not(:checked){
				background-image: none;
			}*/
			&[type="checkbox"]:checked{
				background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><polyline points="2.5 7.76 5 10.25 11.5 3.75" style="fill: none; stroke: black; stroke-miterlimit: 10; stroke-width: 1.5px;"/></svg>');
			}
		}
	}
	& button{
		&.doSearch,
		&.doClearAll{
			all: unset;
			position: relative;
			display: grid;
			align-items: center;
			column-gap: 8px;
			width: min(100%, 296px);
			min-height: 48px;
			padding: 8px 40px;
			text-decoration: none;
			text-align: center;
			box-sizing: border-box;
			border: 1px solid currentColor;
			border-radius: 4px;
			font-weight: 700;
			text-align: center;
			cursor: pointer;
			&:after{
				content: "";
				position: absolute;
				top: 50%;
				right: 16px;
				aspect-ratio: 1;
				width: 24px;
				background: currentColor;
				transform: translateY(-50%);
			}
		}
		&.doSearch{
			color: var(--color-theme);
			border: 1px solid var(--color-theme);
			&:after{
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M16.33,15.35l-3.14-3.14c.65-.89,1.04-1.98,1.04-3.17,0-2.96-2.4-5.37-5.37-5.37s-5.37,2.4-5.37,5.37,2.4,5.37,5.37,5.37c1.36,0,2.6-.51,3.55-1.35l3.1,3.1c.11.11.26.17.41.17s.29-.06.41-.17c.22-.22.22-.59,0-.81ZM8.87,13.25c-2.33,0-4.22-1.89-4.22-4.22s1.89-4.22,4.22-4.22,4.22,1.89,4.22,4.22-1.89,4.22-4.22,4.22Z"/></svg>');
			}
		}
		&.doClearAll{
			&:after{
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M5.98,15l-.98-.97,4.02-4.03-4.02-4.03.98-.97,4.02,4.03,4.02-4.03.98.97-4.02,4.03,4,4.03-.97.97-4.02-4.01-4.02,4.01Z"/></svg>');
			}
		}
	}
	& menu{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		&.close{
			position: absolute;
			top: 4px;
			right: 4px;
			aspect-ratio: 1;
			width: 48px;
			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 16 16" style="fill: none; stroke: black; stroke-width: 1px;"><polyline points="1 1 15 15"/><polyline points="15 1 1 15"/></svg>') no-repeat center / 16px;
			@media (max-width: 991.98px) {
				display: none;
			}
		}
	}
}

/*
#searchArea{
	& h3+div{
		display: grid;
		grid-gap: clamp(24px, calc(48 / 1200 * 100vw), 48px);
		align-items: start;
		@media (min-width: 576px) {
			grid-template-columns: auto 1fr;
			&:before{
				width: min(40vw, 400px);
			}
		}
		&:before{
			content: "";
			aspect-ratio: 1;
			background: url('/images/commonSearchArea.png') no-repeat center / cover;
		}
	}
}
*/
#searchArea{
	& h3{
		margin-bottom: 0;
	}
	& h3+div{
		display: grid;
		grid-gap: calc(var(--space) / 2);
		margin: auto;
		width: min(810px, 100%);
		@media (min-width: 768px) {
			grid-template-columns: 1fr 1.2fr;
			column-gap: 72px;
			align-items: start;
		}
	}
	& figure{
		align-self: center;
		position: relative;
		order: -1;
		&:before{
/*			content: "";
			display: block;
			padding-top: 71.4%;*/
			& svg{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}
	}
	& dl{
		display: grid;
		grid-gap: 0.5em;
		& dt{
			justify-self: start;
			width: 100%;
			font-weight: bold;
			@media (min-width: 768px) {
				width: 13em;
			}
			&:nth-of-type(1){
				color: var(--area1-color);
				& label {
					&:has(:checked) {
						background: var(--area1-color);
					}
				}
				& input {
					border: 1px solid var(--area1-color);
				}
			}
			&:nth-of-type(2){
				color: var(--area2-color);
				& label {
					&:has(:checked) {
						background: var(--area2-color);
					}
				}
				& input {
					border: 1px solid var(--area2-color);
				}
			}
			&:nth-of-type(3){
				color: var(--area3-color);
				& label {
					&:has(:checked) {
						background: var(--area3-color);
					}
				}
				& input {
					border: 1px solid var(--area3-color);
				}
			}
			&:nth-of-type(4){
				color: var(--area4-color);
				& label {
					&:has(:checked) {
						background: var(--area4-color);
					}
				}
				& input {
					border: 1px solid var(--area4-color);
				}
			}
			&:nth-of-type(5){
				color: var(--area5-color);
				& label {
					&:has(:checked) {
						background: var(--area5-color);
					}
				}
				& input {
					border: 1px solid var(--area5-color);
				}
			}
			&:nth-of-type(6){
				color: var(--area6-color);
				& label {
					&:has(:checked) {
						background: var(--area6-color);
					}
				}
				& input {
					border: 1px solid var(--area6-color);
				}
			}
			& label {
				display: flex;
				grid-gap: 0;
				align-items: center;
				border-radius: 50px;
				line-height: 1em;
			}
			& input {
				margin-right: 8px;
				transform: translateY(0);
			}
		}
		& dd{
			padding-left: 1em;
			line-height: 1.4em;
			font-size: 14px;
		}
		& dd+dt{
			margin-top: 0.5em;
		}
	}
}

#areaMap{
	padding: 24px 0;
	& a{
		text-decoration: none;
		cursor: pointer;
		&:nth-of-type(1){
			& use, & rect{
				fill: var(--area1-color);
			}
		}
		&:nth-of-type(2){
			& use, & rect{
				fill: var(--area2-color);
			}
		}
		&:nth-of-type(3){
			& use, & rect{
				fill: var(--area3-color);
			}
		}
		&:nth-of-type(4){
			& use, & rect{
				fill: var(--area4-color);
			}
		}
		&:nth-of-type(5){
			& use, & rect{
				fill: var(--area5-color);
			}
		}
		&:nth-of-type(6){
			& use, & rect{
				fill: var(--area6-color);
			}
		}
	}
	& use{
		fill-opacity: 0.2;
	}
	& use+rect{
		fill: #fff !important;
	}
	& rect+rect{
		fill-opacity: 0.3;
	}
	& text{
		fill: #fff !important;
		font-weight: bold;
		font-size: 19px;
	}
	& .select{
		& use{
			fill-opacity: 0.7;
		}
		& rect{
			fill-opacity: 1;
		}
	}
}

#searchDate{
	overflow: hidden;
	& [LSC-LB="Calendar"]{
		display: none;
	}
	& table{
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		border: 1px solid var(--color);
		overflow: hidden;
	}
	& caption {
		grid-column: 1 / 8;
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: baseline;
		padding: 8px 16px;
		background: var(--color-theme);
		color: #fff;
		font-weight: 700;
		letter-spacing: 0.05em;
		cursor: pointer;
		& span{
			font-size: 10px;
		}
	}
	& thead{
		display: contents;
		& td{
			padding: 4px 0;
			background: #fff;
			font-weight: 700;
			font-size: clamp(10px, calc(14 / 1200 * 100vw), 14px);
			border: 0 solid #333;
			border-width: 1px 1px 0 0;
			&:first-child{
				color: #e71f19;
			}
			&:last-child{
				color: #0068b7;
				border-width: 1px 0 0 0;
			}
		}
	}
	& tbody{
		display: contents;
		& td{
			padding: 8px 0;
			background: #f3f3f3;
			font-weight: 500;
			font-size: clamp(10px, calc(14 / 1200 * 100vw), 14px);
			border: 0 solid #333;
			border-width: 1px 1px 0 0;
			background: #fff;
			cursor: pointer;
			&:first-child{
				color: #e71f19;
			}
			&:last-child{
				color: #0068b7;
				border-width: 1px 0 0 0;
			}
			&:empty{
				cursor: none;
			}
			&:not(:empty).check{
				background: #93cfcf;
			}
		}
	}
	& tr{
		display: contents;
	}
	& td{
		text-align: center;
		vertical-align: middle;
	}
}

#searchDateSlide{
	display: grid;
	&:not(.slick-initialized){
		grid-gap: 40px 24px;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
		&>*{
			grid-column: 1;
			grid-row: 1;
		}
	}
	&.slick-initialized{
		grid-template-columns: clamp(24px, calc(48 / 1200 * 100vw), 48px) 1fr clamp(24px, calc(48 / 1200 * 100vw), 48px);
	}
	.slick-list{
		grid-column: 2;
		grid-row: 1;
		overflow: visible;
	}
	.slick-slide{
		margin: 0 clamp(8px, calc(12 / 1200 * 100vw), 12px);
	}
	.slick-arrow{
		all: unset;
		box-sizing: border-box;
		align-self: center;
		justify-self: center;
		position: relative;
		aspect-ratio: 1;
		width: 40px;
		background: #fff;
		border-radius: 100%;
		color: #619f6d;
		font-size: 0;
		cursor: pointer;
		z-index: 1;
		&:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			aspect-ratio: 1;
			background: var(--color-theme) url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="white" d="M17.94,9.8s-.01-.02-.02-.03c-.05-.08-.12-.13-.21-.16l-8.93-4.4c-.06-.03-.12-.04-.19-.04-.08,0-.15.02-.22.06-.12.08-.2.21-.2.36v3.94s0,.04.01.05H2.42c-.23,0-.42.19-.42.42,0,.23.19.42.42.42h13.36s-6.77,3.32-6.77,3.32v-1.91c0-.23-.19-.42-.42-.42s-.42.19-.42.42v2.59c0,.15.08.28.2.36.12.08.28.08.41.02l8.98-4.41c.1-.05.16-.13.2-.22,0,0,0,0,0,0,.02-.05.03-.1.03-.15,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0-.01,0-.02,0-.04,0-.07-.02-.11,0-.03-.02-.05-.03-.07ZM9.02,9.52v-3.26s6.73,3.32,6.73,3.32h-6.74s.01-.04.01-.05Z"/></svg>') center no-repeat;
			background-size: 24px;
			border-radius: 100%;
		}
	}
	.slick-prev{
		&:before{
			transform: scale(-1, 1);
		}
	}
	.slick-next{
		justify-self: end;
	}
	.slick-disabled{
		opacity: 0.25;
		pointer-events: none;
	}
}

#searchCurrent{
	display: grid;
	grid-gap: 16px clamp(24px, calc(40 / 1200 * 100vw), 40px);
	padding: 16px clamp(24px, calc(24 / 1200 * 100vw), 24px);
	border-radius: 8px;
	background: #fff;
	@media (min-width: 576px) {
		grid-template-columns: auto 1fr;
	}
	& h4{
		font-weight: 700;
		@media (min-width: 576px) {
			transform: translateY(0.25em);
		}
	}
	& h4+div{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 8px 16px;
	}
	& ul,
	& li{
		display: contents;
	}
	& a{
		display: grid;
		grid-template-columns: 1fr 10px;
		align-items: center;
		column-gap: 16px;
		min-height: 32px;
		padding: 4px 16px;
		background: rgba(var(--color-theme-rgb), .1);
		border-radius: 4px;
		border: 1px solid var(--color-theme);
		color: var(--color-theme);
		font-weight: 700;
		font-size: 14px;
		text-decoration: none;
		&:after{
			content: "";
			aspect-ratio: 1;
			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" style="fill: none; stroke: black; stroke-width: 2px;"><polyline points="1 1 9 9"/><polyline points="9 1 1 9"/></svg>') no-repeat center / contain;
		}
	}
	& button{
		all: unset;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: 1fr 10px;
		align-items: center;
		column-gap: 8px;
		min-height: 32px;
		padding: 4px 16px;
		font-weight: 700;
		font-size: 14px;
		letter-spacing: 0.05em;
		border-radius: 4px;
		border: 1px solid #999;
		&:after{
			content: "";
			aspect-ratio: 1;
			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" style="fill: none; stroke: black; stroke-width: 2px;"><polyline points="1 1 9 9"/><polyline points="9 1 1 9"/></svg>') no-repeat center / contain;
		}
	}
}

#result{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	padding-top: clamp(32px, calc(40 / 1200 * 100vw), 40px);
	&:last-child{
		padding-bottom: clamp(96px, calc(120 / 1200 * 100vw), 120px);
	}
	&:has(#resultSet){
		padding-top: 32px;
		&:before {
			content: "";
			order: 1;
			grid-column: 1 / 4;
			margin-bottom: 32px;
			border-bottom: 2px solid var(--color-theme);
			@media (min-width: 576px) {
				margin-bottom: 56px;
			}
		}
	}
	&>*{
		grid-column: 2;
	}
	& h2{
		display: none;
	}
	#resultList, 
	#resultMap,
	#pagenation {
		order: 1;
	}
	#pagenation{
		grid-column: 1 / 4;
	}
}

#resultSet{
	display: grid;
	justify-items: center;
	grid-gap: 16px clamp(24px, calc(40 / 1200 * 100vw), 40px);
	margin-bottom: 32px;
	@media (min-width: 992px) {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		#resultSwitch{
			margin-left: auto;
		}
	}
}

#resultCount{
	column-gap: 8px;
	font-weight: 700;
	font-size: clamp(16px, calc(18 / 1200 * 100vw), 18px);
	letter-spacing: 0.05em;
	text-align: center;
	& span{
		display: inline-block;
		padding-right: 8px;
		font-weight: 700;
		font-size: clamp(24px, calc(40 / 1200 * 100vw), 40px);
		line-height: 1;
	}
}

#resultSwitch{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	grid-gap: 16px clamp(24px, calc(40 / 1200 * 100vw), 40px);
	@media (min-width: 992px) {
		justify-content: end;
	}
	& dl{
		display: flex;
		align-items: center;
		grid-gap: 8px 1em;
		font-size: clamp(11px, calc(14 / 1200 * 100vw), 14px);
	}
	& dt{
		font-weight: 700;
		letter-spacing: 0.05em;
		text-align: center;
	}
	& dd{
		display: grid;
		align-items: center;
		padding: 2px 1em;
		border: 1px solid #999;
		border-radius: 4px;
		font-weight: 700;
		text-align: center;
		cursor: pointer;
		@media (min-width: 1200px) {
			min-width: 104px;
		}
		&.select{
			background: var(--color-theme);
			border: none;
			color: #fff;
		}
	}
	& span{
		display: flex;
		column-gap: 8px;
		min-height: clamp(28px, calc(32 / 1200 * 100vw), 32px);
		border-radius: 4px;
		background: #fff;
		&[lsc-lt="Order"]{
			display: none;
		}
	}
}

#resultDisplay{
	& dd{
		grid-template-columns: 1em 1fr;
		align-items: center;
		column-gap: 0.5em;
		&.select:before{
			background: #fff;
		}
		&:before{
			content: "";
			background: var(--color-theme);
			aspect-ratio: 1;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><rect width="6" height="6" rx="1" ry="1"/><rect x="8" width="6" height="6" rx="1" ry="1"/><rect y="8" width="6" height="6" rx="1" ry="1"/><rect x="8" y="8" width="6" height="6" rx="1" ry="1"/></svg>') no-repeat center / contain;
		}
		&[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 14 14"><path d="M1,11c-.55,0-1,.45-1,1s.45,1,1,1,1-.45,1-1-.45-1-1-1ZM1,6c-.55,0-1,.45-1,1s.45,1,1,1,1-.45,1-1-.45-1-1-1ZM5,3h8c.55,0,1-.45,1-1s-.45-1-1-1H5c-.55,0-1,.45-1,1s.45,1,1,1ZM1,1c-.55,0-1,.45-1,1s.45,1,1,1,1-.45,1-1-.45-1-1-1ZM13,11H5c-.55,0-1,.45-1,1s.45,1,1,1h8c.55,0,1-.45,1-1s-.45-1-1-1ZM13,6H5c-.55,0-1,.45-1,1s.45,1,1,1h8c.55,0,1-.45,1-1s-.45-1-1-1Z"/></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 14 14"><path d="M7,0C3.81,0,1.22,2.59,1.22,5.78c0,1.22.61,3.45,2.28,5.38,1.83,2.11,3.5,2.84,3.5,2.84,0,0,1.67-.73,3.5-2.84,1.67-1.93,2.28-4.16,2.28-5.38,0-3.19-2.59-5.78-5.78-5.78ZM7,8.12c-1.23,0-2.23-1-2.23-2.23s1-2.23,2.23-2.23,2.23,1,2.23,2.23-1,2.23-2.23,2.23Z"/></svg>');
		}
	}
}

#resultList{
	.do &{
		height: 400px;
		overflow: hidden;
		opacity: 0;
	}
	&:last-child{
		margin-bottom: clamp(96px, calc(120 / 1200 * 100vw), 120px);
	}
	& > p {
		display: grid;
		align-items: center;
		aspect-ratio: 16 / 9;
		text-align: center;
	}
}

#resultMap{
	grid-column: 1 / 4;
	display: grid;
	height: min(75vh, 600px);
	background: #f2f2f2;
	& p{
		align-self: center;
		text-align: center;
		font-weight: 700;
		letter-spacing: 0.1em;
	}
}

#pagenation{
	margin-top: clamp(96px, calc(120 / 1200 * 100vw), 120px);
}

.featureList,
.spotList,
.courseList,
.eventList{
	display: grid;
	&[lsc-lb="dummy"]:not(:first-child){
		margin-top: clamp(96px, calc(120 / 1200 * 100vw), 120px);
	}
	& section{
		position: relative;
		display: grid;
		align-content: start;
		grid-row-gap: 8px;
		&:not(:has(figure)):before{
			content: "";
			grid-column: 1;
			grid-row: 1;
			aspect-ratio: 1 / 0.667;
			border-radius: 20px;
			background: var(--dummy);
		}
		& h3{
			font-weight: 700;
		}
		& h3+div{
			display: contents;
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
			z-index: 1;
		}
		& figure{
			grid-column: 1;
			grid-row: 1;
			& img{
				aspect-ratio: 1 / 0.667;
				border-radius: 20px;
				object-fit: cover;
			}
			& span{
				all: unset;
				position: absolute;
				top: 0;
				left: 0;
				padding: 0.5em 1em;
				font-size: clamp(12px, calc(14 / 1200 * 100vw), 14px);
				line-height: 1;
				color: #fff;
				background: #f05a78;
				border-bottom-right-radius: 8px;
			}
		}
	}
}

.featureList{
	grid-gap: clamp(32px, calc(56 / 1200 * 100vw), 56px);
	@media (min-width: 768px) {
		grid-template-columns: repeat(3, 1fr);
	}
	& h3{
		position: relative;
		display: grid;
		grid-template-columns: 20px 1fr;
		grid-gap: 6px;
		font-weight: 700;
		&:before {
			content: "";
			aspect-ratio: 1;
			background: var(--color-theme);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13.77,3.5c-.41,0-.78-.16-1.07-.44-.14-.14-.25-.31-.32-.49-.08-.18-.11-.37-.11-.57,0-.1,0-.2.02-.3.02-.09.05-.19.09-.28.04-.09.08-.17.14-.26.05-.08.12-.16.18-.22.56-.56,1.57-.56,2.13,0,.06.06.13.14.18.22.06.09.1.17.14.26.04.09.07.19.09.28.02.1.03.2.03.3,0,.2-.04.39-.12.57-.07.18-.18.35-.32.49-.29.28-.67.44-1.06.44ZM13.77,14.17h0c.82,0,1.49-.68,1.49-1.51h0c0-.82-.67-1.5-1.49-1.5h0c-.83,0-1.51.68-1.51,1.5s.68,1.51,1.51,1.51ZM13.77,8.83h0c.82,0,1.49-.67,1.49-1.5h0c0-.83-.67-1.5-1.49-1.5h0c-.83,0-1.51.67-1.51,1.5s.68,1.5,1.51,1.5ZM14.83,19.06c.28-.28.44-.66.44-1.06,0-.1-.01-.2-.03-.3-.02-.09-.05-.19-.09-.28-.04-.09-.08-.17-.14-.26-.05-.08-.11-.15-.18-.22-.35-.35-.87-.51-1.36-.41-.09.02-.19.05-.28.08-.09.04-.18.09-.26.14-.08.06-.16.12-.22.19-.07.07-.14.14-.19.22-.06.09-.1.17-.14.26-.04.09-.07.19-.09.28-.01.1-.02.2-.02.3,0,.4.15.78.44,1.06.28.28.66.44,1.06.44s.77-.16,1.06-.44ZM7.29,3.06c.28-.29.44-.66.44-1.06,0-.1-.01-.2-.03-.3-.02-.09-.05-.19-.09-.28-.03-.09-.08-.17-.13-.26-.06-.08-.12-.16-.19-.22-.07-.07-.15-.14-.23-.19-.08-.05-.17-.1-.26-.14s-.18-.07-.28-.08c-.48-.1-1,.06-1.35.41-.07.06-.13.14-.19.22-.05.09-.1.17-.14.26-.04.09-.06.19-.08.28-.02.1-.03.2-.03.3,0,.4.15.77.44,1.06.14.14.3.25.48.32.19.08.38.12.58.12.4,0,.77-.16,1.06-.44ZM6.23,14.17h0c.83,0,1.5-.68,1.5-1.51h0c0-.82-.67-1.5-1.5-1.5h0c-.83,0-1.5.68-1.5,1.5s.67,1.51,1.5,1.51ZM6.23,8.83h0c.83,0,1.5-.67,1.5-1.5h0c0-.83-.67-1.5-1.5-1.5h0c-.83,0-1.5.67-1.5,1.5s.67,1.5,1.5,1.5ZM7.29,19.06c.28-.29.44-.66.44-1.06,0-.1-.01-.2-.03-.3-.02-.09-.05-.19-.09-.28-.03-.09-.08-.17-.13-.26-.06-.08-.12-.15-.19-.22-.35-.35-.87-.51-1.36-.41-.09.02-.19.05-.28.08-.09.04-.17.09-.26.14-.08.06-.15.12-.22.19s-.13.14-.19.22c-.05.09-.1.17-.14.26-.03.09-.06.19-.08.28-.02.1-.03.2-.03.3,0,.4.15.77.44,1.06.28.28.66.44,1.06.44s.77-.16,1.06-.44Z"/></svg>');
			transform: translateY(4px);
		}
	}
	& button {
		display: grid;
		grid-template-columns: 1fr 20px;
		align-items: center;
		grid-gap: 16px;
		width: min(100%, 320px);
		min-height: 56px;
		margin: auto;
		padding: 8px 24px;
		border: 1px solid var(--color-theme);
		border-radius: 12px;
		background: #fff;
		color: var(--color-theme);
		font-weight: 700;
		text-align: center;
		text-decoration: none;
		@media (min-width: 768px) {
			grid-column: 1 / 4;
		}
		&:after {
			content: "";
			aspect-ratio: 1;
			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"><path  d="M.02,11.1l-.02-2.17h8.91s.01-8.93.01-8.93l2.16.02-.02,8.92,8.91-.02.02,2.17-8.91.02-.03,8.9h-2.14s0-8.9,0-8.9H.02Z"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
			transition: transform 0.2s ease-out;
		}
	}
}

.spotList,
.courseList,
.eventList{
	& section{
/*		& ul{
			display: flex;
			flex-wrap: wrap;
			grid-row-gap: 4px;
		}
		& li{
			font-size: 14px;
			&:not(:last-child)&:not(:last-child):after{
				content: "/";
				margin: 0 4px;
			}
		}*/
		& i, & time{
			position: relative;
			align-self: start;
			display: grid;
			grid-template-columns: 16px 1fr;
			grid-gap: 4px;
			font-size: 14px;
			font-style: normal;
			&:before {
				content: "";
				aspect-ratio: 1;
				background: currentColor;
				-webkit-mask-size: contain;
			}
		}
		& i{
			align-items: center;
			color: var(--color-theme);
			&:before {
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M16.98,11.65l.32-.18-.32.18h0s0-.02,0-.02c0-.01-.02-.04-.04-.07-.04-.06-.1-.16-.18-.28-.17-.24-.42-.58-.75-.95-.67-.75-1.68-1.65-2.98-2.23-.87-.39-1.87-.65-3.02-.65-1.12,0-2.1.25-2.96.62-.85.38-1.58.88-2.17,1.4-1.19,1.04-1.82,2.12-1.85,2.17h0s0,0,0,0l-.45-.25-.96-.54s.41-.73,1.19-1.6c.78-.87,1.94-1.92,3.52-2.63,1.05-.47,2.29-.79,3.68-.79,1.4,0,2.63.32,3.68.79,1.05.47,1.92,1.1,2.61,1.72,1.38,1.24,2.07,2.46,2.1,2.51l-1.41.79ZM10,8.5c-1.56,0-2.83,1.27-2.83,2.83s1.27,2.83,2.83,2.83,2.83-1.27,2.83-2.83c0-1.56-1.27-2.83-2.83-2.83Z"/></svg>') center no-repeat;
			}
		}
		& time{
			&:before {
				transform: translateY(0.2em);
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7.21,5.41v-.95c0-.33.27-.6.6-.6s.6.27.6.6v.95c0,.33-.27.6-.6.6s-.6-.27-.6-.6ZM12.26,6.02c.33,0,.6-.27.6-.6v-.95c0-.33-.27-.6-.6-.6s-.6.27-.6.6v.95c0,.33.27.6.6.6ZM16.04,6.41v8.03c0,.93-.76,1.69-1.69,1.69H5.66c-.93,0-1.69-.76-1.69-1.69V6.41c0-.93.76-1.69,1.69-1.69h1.03v.69c0,.62.51,1.13,1.13,1.13s1.13-.51,1.13-1.13v-.69h2.18v.69c0,.62.51,1.13,1.13,1.13s1.13-.51,1.13-1.13v-.69h.96c.93,0,1.69.76,1.69,1.69ZM15.21,7.48H4.79v6.96c0,.48.39.87.87.87h8.69c.48,0,.87-.39.87-.87v-6.96Z"/></svg>') center no-repeat;
			}
		}
		& span{
			order: -1;
			justify-self: start;
			display: grid;
			align-items: center;
			padding: 0 16px;
			height: 24px;
			font-size: 14px;
			color: var(--color-theme);
			border: 1px solid var(--color-theme);
			border-radius: 50px;
		}
		& a{
			&[data-fav-id]{
				all: unset;
				box-sizing: border-box;
				grid-column: 1;
				grid-row: 1;
				justify-self: end;
				aspect-ratio: 1;
				margin: 8px;
				width: 30px;
				background: #999 url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M21.85,12.79c-1.47-3.88-6.22-2.14-6.66-.2-.61-2.06-5.25-3.6-6.66.2-1.58,4.24,6.11,8.05,6.66,8.67.55-.5,8.24-4.5,6.66-8.67Z" style="fill: white;"/></svg>');
				border-radius: 100%;
				font-size: 0;
				cursor: pointer;
				z-index: 2;
			}
			&[data-fav-status="on"]{
				background: var(--color-theme) url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M21.85,12.79c-1.47-3.88-6.22-2.14-6.66-.2-.61-2.06-5.25-3.6-6.66.2-1.58,4.24,6.11,8.05,6.66,8.67.55-.5,8.24-4.5,6.66-8.67Z" style="fill: white;"/></svg>');
			}
		}
	}
	&.grid{
		/* grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 8px), 204px), 1fr)); */
		grid-template-columns: repeat(auto-fill, minmax(min(calc(100% - 8px), 204px), 1fr));
		grid-gap: clamp(32px, calc(48 / 1200 * 100vw), 48px) clamp(16px, calc(32 / 1200 * 100vw), 32px);
		& section{
			&:before{
				margin-bottom: 8px;
			}
/*			&:has(h4),
			&:has(p){
				&:after{
					content: "";
					grid-row: 4;
					margin: 8px 0;
					border-top: 1px solid currentColor;
				}
			}*/
			& h3{
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				/* height: calc(1.65em * 2); */
				overflow: hidden;
			}
			& h4,
			& p{
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				max-height: calc(1.65em * 2);
				font-size: 14px;
				overflow: hidden;
			}
			& h4+p{
				display: none;
			}
			& figure{
				margin-bottom: 8px;
				& img{
					aspect-ratio: 1 / 0.667;
				}
			}
		}
	}
	&.line{
		border-bottom: 1px solid #999;
		& section{
			grid-template-columns: auto 1fr;
			grid-template-rows: auto auto auto auto 1fr;
			column-gap: clamp(24px, calc(40 / 1200 * 100vw), 40px);
			padding: clamp(24px, calc(40 / 1200 * 100vw), 40px) 0;
			border-top: 1px solid #999;
			&:first-of-type{
				padding-top: 0;
				border-top: none;
			}
			&:has(h4+p+p){
				&:before{
					grid-row: 1 / 6;
				}
				& figure{
					grid-row: 1 / 6;
				}
			}
			&:before{
				grid-row: 1 / 5;
				width: min(30vw, 342px);
				@media (max-width: 575.98px) {
					margin-bottom: 8px;
				}
			}
			& h3{
				font-size: clamp(16px, calc(24 / 1200 * 100vw), 24px);
				&:before{
					@media (max-width: 575.98px) {
						display: none;
					}
				}
			}
			& h4{
				font-size: clamp(14px, calc(18 / 1200 * 100vw), 18px);
				color: var(--color-theme);
				@media (max-width: 575.98px) {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					text-overflow: ellipsis;
					max-height: calc(1.65em * 2);
					overflow: hidden;
				}
			}
			& p{
				font-size: clamp(12px, calc(14 / 1200 * 100vw), 14px);
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				max-height: calc(1.65em * 2);
				overflow: hidden;
				@media (max-width: 575.98px) {
					display: none;
				}
			}
			& a{
				&[data-fav-id]{
					grid-row: 1 / 5;
				}
			}
			& figure{
				grid-row: 1 / 6;
				width: min(30vw, 342px);
				& img{
					border-radius: 8px;
				}
				@media (max-width: 575.98px) {
					margin-bottom: 8px;
				}
			}
/*			@media (min-width: 576px) {
				grid-template-columns: auto 1fr;
				grid-template-rows: auto auto auto auto 1fr;
				&:has(h4+p+p){
					&:before{
						grid-row: 1 / 6;
					}
					& figure{
						grid-row: 1 / 6;
					}
				}
				&:before{
					grid-row: 1 / 5;
					width: min(40vw, 342px);
				}
				& h3,
				& h4{
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
				& a{
					&[data-fav-id]{
						grid-row: 1 / 5;
					}
				}
				& figure{
					grid-row: 1 / 6;
					width: min(40vw, 342px);
				}
			}*/
		}
	}
}

.spotList,
.eventList{
	&.grid{
		& section{
			& i, & time{
				@media (min-width: 576px) {
					justify-self: end;
				}
			}
		}
	}
	&.line{
		& section{
			& h3{
				display: grid;
				&[data-ruby]:before {
					content: attr(data-ruby);
					font-size: 12px;
					letter-spacing: 0.05em;
				}
			}
		}
	}
}

.courseList{
	&.grid{
		& section{
			& p{
				display: none;
			}
		}
	}
}

.eventList{
	& section{
		& figure {
			position: relative;
		}
		& img {
			object-fit: contain!important;
		}
	}
}

.photoList{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(40vw, 250px), 1fr));
	align-items: start;
	grid-gap: 24px 16px;
	margin-top: 40px;
	@media (min-width: 576px) {
		grid-gap: 40px 32px;
		margin-top: 56px;
	}
	& dl{
		position: relative;
		display: grid;
		grid-gap: 8px;
		&:hover{
			color: var(--color-theme);
			& dt{
				color: var(--color-theme);
			}
			& img{
				opacity: 0.8;
			}
		}
	}
	& dt{
		font-weight: 700;
		transition: color 0.2s ease-out;
	}
	& dd{
		&:has(img){
			order: -1;
		}

		&:has(a){
			display: contents;
		}
	}
	& img{
		aspect-ratio: 1 / 0.667;
		object-fit: contain;
		border-radius: 8px;
		transition: opacity 0.2s ease-out;
	}
	& a{
		&[data-id]{
			justify-self: center;
			display: grid;
			grid-template-columns: 10px 1fr;
			align-items: center;
			grid-gap: 4px;
			min-height: 32px;
			margin-top: 8px;
			padding: 4px 16px;
			border-radius: 50px;
			border: 1px solid var(--color-theme);
			color: var(--color-theme);
			letter-spacing: 0.05em;
			text-decoration: none;
			cursor: pointer;
			z-index: 1;
			&:hover{
				background: var(--color-theme);
				border-color: transparent;
				color: #fff;
			}
			&:before{
				content: "";
				aspect-ratio: 1;
				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" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="8 2 8 15" /><polyline points="2 8 15 8" /></svg>') center no-repeat;
				-webkit-mask-size: contain;
				transform: translateX(-4px);
			}
			&.deleteCart{
				background: var(--color-theme);
				border-color: transparent;
				color: #fff;
			}
			&.deleteCart:hover {
				background: #999;
			}
			&.deleteCart: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" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="2 8 15 8" /></svg>');
			}
			&.limit{
				pointer-events: none;
				color: var(--color-border);
				border: 1px solid var(--color-border);
				background: #f2f2f2;
			}
			&.limit: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" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="2 8 15 8" /></svg>');
			}
		}
		&:not([data-id]) {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
}

