/* CSS Document */

article{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	&>*{
		grid-column: 2;
	}
	&:first-child{
		background: #fff;
		&:before{
			content: "";
			grid-column: 1 / 4;
			grid-row: 1;
			background: #f2f2f2;
		}
		& h2{
			grid-row: 1;
			display: grid;
			grid-template-columns: 1.5em auto 1.5em;
			justify-self: center;
			grid-gap: 0 0.5em;
			margin: 40px 0;
			color: #4d4d4d;
			font-size: 24px;
			font-family: var(--font-min);
			text-align: center;
			@media (min-width: 992px){
				font-size: 32px;
			}
			&:before{
				content: "";
				grid-column: 1;
				grid-row: 1 / 3;
				align-self: end;
				aspect-ratio: 1;
				background: currentColor;
				transform: translateY(50%);
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><path d="M41.03,7.51c-1.14-.4-3.99,5.31-5.34,5.32l-4.39.04c1.6-1.76,2.86-3.72,1.9-4.58-1.6-1.43-4.43-1.59-6.68.07l-6.29,4.63-13.06.13c-1.23.13-2.3.44-3.22.86,0,0,0,0,0,0-.56.25-2.4,1.17-3.35,2.77,0,0,0,0,0,0-.08.12-.16.23-.23.35-.79,1.29-.31,2.8,1.44,3.12.76.14,6.95.23,13.83.28,0,0,0,0,.01,0,.04.04.07.08.11.12l11.11,10.61c2.02,1.93,4.84,2.14,6.62.92,1.58-1.08-1.37-5.17-3.31-7.3l-3.9-4.29h0c5.37.02,9.48.03,9.48.03,2.7-.03,4.71-1.35,5.57-3.94,0,0,1.66-8.47-.31-9.15ZM26.53,16.36c-.52,0-.95-.41-.95-.93,0-.52.41-.94.93-.95.52,0,.94.41.95.93,0,.52-.41.94-.93.95ZM20.84,15.48c0-.52.41-.95.93-.95.52,0,.94.41.95.93,0,.52-.41.94-.93.95-.52,0-.94-.41-.95-.93ZM17.03,14.58c.26,0,.5.1.67.28.17.17.27.4.27.65,0,.52-.41.94-.93.95-.36,0-.68-.2-.84-.5-.07-.13-.11-.27-.11-.43,0-.52.41-.94.93-.95ZM3.01,17.02l-1.54.04c-.23,0-.44-.05-.63-.15.92-1.55,2.77-2.46,3.27-2.68.07.15.12.32.12.51l.02.98c.02.7-.54,1.29-1.24,1.3ZM7.76,16.55c-.52,0-.94-.41-.95-.93,0-.52.41-.94.93-.95.52,0,.94.41.95.93,0,.52-.41.94-.93.95ZM11.36,15.57c0-.52.41-.94.93-.95.52,0,.94.41.95.93,0,.52-.41.94-.93.95-.52,0-.94-.41-.95-.93ZM31.27,16.31c-.52,0-.94-.41-.95-.93,0-.52.41-.94.93-.95.52,0,.94.41.95.93,0,.52-.41.94-.93.95Z"/></svg>') center no-repeat;
				-webkit-mask-size: min(100%, 42px);
			}
			&:after{
				content: "";
				grid-column: 2;
				grid-row: 2;
				height: 2px;
				margin: 0 -0.25em;
				background: currentColor;
				border-radius: 1px;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 2"><path d="M5,2H1c-.55,0-1-.45-1-1S.45,0,1,0h4c.55,0,1,.45,1,1s-.45,1-1,1Z"/></svg>') left top repeat-x;
				-webkit-mask-size: 12px 2px;
			}
		}
	}
}

#search{
	grid-row-gap: 24px;
	padding: 24px 0;
	background: #fff;
	& h2{
		display: grid;
		grid-template-columns: 20px auto;
		align-items: center;
		justify-content: center;
		grid-gap: 8px;
		grid-gap: 8px;
		font-weight: 700;
		font-size: 18px;
		@media (min-width: 992px){
			font-size: 24px;
		}
		&:before,
		&:after{
			content: "";
			grid-column: 1;
			grid-row: 1;
			aspect-ratio: 1;
			background: #4d4d4d;
			-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="M20,10c0,.55-.45,1-1,1H1c-.55,0-1-.45-1-1h0c0-.55.45-1,1-1h18c.55,0,1,.45,1,1h0Z"/><path d="M20,3c0,.55-.45,1-1,1H1c-.55,0-1-.45-1-1h0c0-.55.45-1,1-1h18c.55,0,1,.45,1,1h0Z"/><path d="M20,17c0,.55-.45,1-1,1H1c-.55,0-1-.45-1-1h0c0-.55.45-1,1-1h18c.55,0,1,.45,1,1h0Z"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
			}
		&:after{
			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"><circle cx="6" cy="3" r="3"/><circle cx="14" cy="17" r="3"/></svg>');
		}
	}
}

#searchMenu{
	@media (max-width: 991.98px){
		display: grid;
		grid-gap: 8px;
		#searchSelect,
		#searchSelect ul,
		#searchDetail{
			display: contents;
		}
		#searchSelect li:has(input){
			order: 10;
		}
		#searchDetail section{
			transform: translateY(-8px);
			}
		:where(#searchSelect li, #searchDetail section){
			&:nth-child(1){
				order: 1;
			}
			&:nth-child(2){
				order: 2;
			}
			&:nth-child(3){
				order: 3;
			}
			&:nth-child(4){
				order: 4;
			}
		}
	}
}

#searchSelect{
	& ul{
		@media (min-width: 992px) {
			display: grid;
			grid-gap: 8px;
			&:has(li:nth-child(2):last-child){
				grid-template-columns: repeat(2, 1fr);
			}
		}
		@media (min-width: 1200px) {
			&:has(li:nth-child(3):last-child){
				grid-template-columns: 1fr 1fr 2fr;
			}
		}
	}
	& li{
		display: grid;
		align-items: center;
		border-radius: 24px;
		@media (min-width: 992px) {
			grid-row: 1;
		}
		&:not(:has(input)){
			grid-template-columns: 1fr 8px;
			grid-gap: 8px;
			min-height: 48px;
			padding: 4px 16px;
			border: 1px solid currentColor;
			color: var(--color-theme);
			font-weight: 700;
			text-align: center;
			cursor: pointer;
			&:after{
				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 8 4"><polygon points="4 4 0 0 8 0 4 4"/></svg>') center no-repeat;
				-webkit-mask-size: contain;
				background: currentColor;
			}
			&.select{
				background: var(--color-theme);
				border-color: transparent;
				color: #fff;
				@media (max-width: 991.98px){
					border-radius: 24px 24px 0 0;
				}
				&:after{
					transform: rotate(180deg);
				}
			}
		}
		&:has(input){
			grid-template-columns: 1fr 48px;
			border: 1px solid var(--color-border);
		}
	}
	& input{
		align-self: center;
		background: none;
		border: none;
		outline: none;
		width: 100%;
		padding-left: 24px;
	}
	& button{
		all: unset;
		aspect-ratio: 1;
		background: var(--color-theme);
		color: inherit;
		font-size: 0;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="m17.71,16.29l-5.11-5.11c.88-1.17,1.4-2.61,1.4-4.18,0-3.86-3.14-7-7-7S0,3.14,0,7s3.14,7,7,7c1.57,0,3.02-.53,4.18-1.4l5.11,5.11c.2.2.45.29.71.29s.51-.1.71-.29c.39-.39.39-1.02,0-1.41Zm-10.71-4.29c-2.76,0-5-2.24-5-5S4.24,2,7,2s5,2.24,5,5-2.24,5-5,5Z"/></svg>') center no-repeat;
		-webkit-mask-size: 18px 18px;
	}
}

#searchDetail{
	position: relative;
	& section{
		display: grid;
		grid-gap: 24px;
		padding: 24px;
		@media (max-width: 991.98px){
			border: 1px solid var(--color-theme);
			border-radius: 0 0 24px 24px;
		}
		@media (min-width: 992px){
			position: absolute;
			top: 8px;
			left: 0;
			width: 100%;
			padding: 32px;
			background: #fff;
			border-radius: 4px;
			filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.2));
			z-index: 2;
		}
		&>div:has(button){
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			grid-gap: 8px 24px;
		}
	}
	& h3{
		display: none;
	}
	& ul{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
		align-items: start;
		grid-gap: 8px 24px;
		& ul{
			grid-column: 1 / 3;
			grid-template-columns: 1fr;
			margin: 0 0 16px 24px;
			}
		}
	& li{
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: baseline;
		grid-gap: 8px;
	}
	& button{
		all: unset;
		display: grid;
		align-items: center;
		min-height: 48px;
		padding: 4px 16px;
		border-radius: 4px;
		font-weight: 700;
		cursor: pointer;
		&.doSearch{
			grid-template-columns: 18px auto;
			align-items: center;
			grid-gap: 16px;
			background: var(--color-theme);
			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 18 18"><path d="m17.71,16.29l-5.11-5.11c.88-1.17,1.4-2.61,1.4-4.18,0-3.86-3.14-7-7-7S0,3.14,0,7s3.14,7,7,7c1.57,0,3.02-.53,4.18-1.4l5.11,5.11c.2.2.45.29.71.29s.51-.1.71-.29c.39-.39.39-1.02,0-1.41Zm-10.71-4.29c-2.76,0-5-2.24-5-5S4.24,2,7,2s5,2.24,5,5-2.24,5-5,5Z"/></svg>') center no-repeat;
				-webkit-mask-size: 18px 18px;
			}
		}
		&.doClear{
			min-height: 32px;
			background: transparent;
			border: 1px solid var(--color-border);
			font-size: 14px;
		}
	}
	& menu{
		all: unset;
		position: absolute;
		tpo: 0;
		right: 0;
		aspect-ratio: 1;
		width: 48px;
		background: currentColor;
		cursor: pointer;
		visibility: hidden;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7.07 7.07"><polygon points="7.07 .71 6.36 0 3.54 2.83 .71 0 0 .71 2.83 3.54 0 6.36 .71 7.07 3.54 4.24 6.36 7.07 7.07 6.36 4.24 3.54 7.07 .71" /></svg>') center no-repeat;
		-webkit-mask-size: 40%;
		@media (min-width: 992px){
			visibility: visible;
		}
	}
}

#searchCurrent{
	& dl{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		grid-gap: 8px;
	}
	& dt{
		width: 100%;
		font-weight: 700;
		@media (min-width: 576px){
			width: auto;
			margin-right: 8px;
		}
	}
	& dd{
		display: contents;
	}
	& a,
	& button{
		display: grid;
		grid-template-columns: auto 14px;
		align-items: center;
		min-height: 40px;
		padding: 4px 16px;
		border-radius: 20px;
		font-size: 14px;
		cursor: pointer;
		&:after{
			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 14 14"><polygon points="10.54 4.17 9.83 3.46 7 6.29 4.17 3.46 3.46 4.17 6.29 7 3.46 9.83 4.17 10.54 7 7.71 9.83 10.54 10.54 9.83 7.71 7 10.54 4.17" /></svg>') center no-repeat;
			-webkit-mask-size: contain;
			background: currentColor;
			transform: translateX(4px);
			}
		}
	& a{
		background: var(--color-thin);
		border: 1px solid var(--color-border);
		color: inherit;
		text-decoration: none;
		}
	& button{
		background: #000;
		color: #fff;
	}
}

#result{
	&:has(#resultStatus):before{
		content: "";
		grid-column: 1 / 4;
		grid-row: 1;
		background: #fff;
	}
	& h2{
		display: none;
	}
}

#resultStatus{
	grid-row: 1;
	display: grid;
	grid-gap: 16px 24px;
	padding: 24px 0;
	background: #fff;
	@media (min-width: 992px){
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px 0;
	}
}

#resultCount{
	display: flex;
	justify-content: center;
	align-items: center;
	grid-gap: 8px;
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.05em;
	@media (min-width: 992px){
		font-size: 20px;
	}
	& span{
		font-size: 1.6em;
	}
}

#resultStyle{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	grid-gap: 8px 24px;
	& dl{
		display: flex;
		align-items: center;
		grid-gap: 4px;
	}
	& dt{
		margin-right: 4px;
		font-weight: 700;
		font-size: min(3.2vw, 16px);
	}
	& dd{
		display: grid;
		align-items: center;
		grid-gap: 8px;
		padding: 2px 8px;
		border: 1px solid var(--color-border);
		border-radius: 4px;
		font-size: min(3.2vw, 14px);
		cursor: pointer;
		&.select{
			background: var(--color-thin);
			pointer-events: none;
		}
	}
}

#resultDisplay{
	& dd{
		display: grid;
		grid-template-columns: 14px auto;
		grid-gap: 8px;
		justify-content: start;
		text-align: center;
		&: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 14 14"><path d="m0,2h2V0H0v2Zm0,6h2v-2H0v2Zm0,6h2v-2H0v2Zm6,0h2v-2h-2v2Zm6,0h2v-2h-2v2Zm0-14v2h2V0h-2Zm0,8h2v-2h-2v2Zm-6,0h2v-2h-2v2Zm0-6h2V0h-2v2Z"/></svg>') center no-repeat;
			-webkit-mask-size: 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 12"><path d="m0,12h2v-2H0v2ZM0,2h2V0H0v2Zm0,5h2v-2H0v2Zm6,5h8v-2H6v2ZM6,0v2h8V0H6Zm0,7h8v-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 12 14"><path d="m6,0C2.69,0,0,2.69,0,6s6,8,6,8c0,0,6-4.69,6-8S9.31,0,6,0Zm0,8c-1.1,0-2-.9-2-2s.9-2,2-2,2,.9,2,2-.9,2-2,2Z"/></svg>');
		}
	}
}

#resultMap{
	position: relative;
	display: grid;
	align-items: center;
	justify-content: center;
	height: min(75vh, 570px);
	margin-top: 40px;
	border-radius: 4px;
	background: #ccc;
	overflow: hidden;
	@media (min-width: 992px){
		margin-top: 72px;
	}
	& iframe,
	#gMap{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

#pagenation{
	margin-top: 48px;
	@media (min-width: 992px){
		margin-top: 64px;
	}
}

.spotList{
	& section{
		position: relative;
		display: grid;
		&>div:has(a){
			display: contents;
		}
		&:not(:has(figure)){
			&:before{
				content: "";
				order: -1;
				background: var(--dummy);
				border-radius: 4px;
			}
		}
	}
	& h3{
		font-weight: 700;
		}
	& figure{
		order: -1;
		& img{
			object-fit: cover;
			border-radius: 4px;
		}
	}
	& span{
		justify-self: start;
		display: grid;
		align-items: center;
		min-height: 24px;
		background: #fff;
		border-radius: 4px;
		padding: 2px 8px;
		font-size: 12px;
		@media (min-width: 992px){
			font-size: 14px;
		}
	}
	& a{
		&[title]{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
		&[data-fav-id]{
			order: -1;
			aspect-ratio: 1;
			width: 24px;
			background: currentColor;
			color: inherit;
			z-index: 1;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><polygon points="10 15.27 4.8 18 5.79 12.21 1.59 8.11 7.4 7.27 10 2 12.6 7.27 18.41 8.11 14.21 12.21 15.2 18 10 15.27" style="fill: none; stroke: black; stroke-miterlimit: 10;"/></svg>') center no-repeat;
			-webkit-mask-size: 20px;
			&[data-fav-status="on"]{
				background: #b29d84;
				-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><polygon points="10 15.27 4.8 18 5.79 12.21 1.59 8.11 7.4 7.27 10 2 12.6 7.27 18.41 8.11 14.21 12.21 15.2 18 10 15.27" style="fill: black; stroke: black; stroke-miterlimit: 10;"/></svg>');
			}
		}
	}
	&.line{
		margin-top: 16px;
		@media (min-width: 992px){
			margin-top: 24px;
		}
		& section{
			align-content: start;
			grid-gap: 8px 24px;
			padding: 32px 0;
			border-bottom: 1px solid var(--color-border);
			@media (min-width: 576px){
				grid-template-columns: min(30vw, 342px) 1fr;
				grid-template-rows: auto 1fr;
				&>*{
					grid-column: 2;
				}
				&:not(:has(figure)){
					&:before{
						grid-column: 1;
						grid-row: 1 / 4;
					}
				}
			}
			@media (min-width: 992px){
				padding: 48px 0;
				column-gap: 40px;
			}
			&:has(a[data-fav-id]){
				& h3{
					grid-column: 1;
					grid-row: 2;
					margin-right: 32px;
					@media (min-width: 576px){
						grid-column: 2;
						grid-row: 1;
					}
				}
				& a[data-fav-id]{
					grid-column: 1;
					grid-row: 2;
					justify-self: end;
					@media (min-width: 576px){
						grid-column: 2;
						grid-row: 1;
						transform: translateY(4px);
					}
				}
			}
			&:not(:has(figure)){
				&:before{
					aspect-ratio: 1 / 0.667;
				}
			}
		}
		& h3{
			font-size: 20px;
			letter-spacing: 0.05em;
			@media (min-width: 992px){
				font-size: 32px;
			}
		}
		& p{
			color: #4d4d4d;
			&:empty{
				display: none;
			}
			&:first-child{
				color: var(--color-theme);
				font-weight: 700;
				font-size: 18px;
				@media (min-width: 992px){
					font-size: 24px;
				}
			}
		}
		& figure{
			@media (min-width: 576px){
				grid-column: 1;
				grid-row: 1 / 4;
			}
			& img{
				aspect-ratio: 1 / 0.667;
			}
		}
	}
	&.grid{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 48px 24px;
		margin-top: 48px;
		@media (min-width: 576px){
			grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
		}
		@media (min-width: 768px){
			margin-top: 72px;
			grid-gap: 56px 40px;
		}
		& section{
			align-content: start;
			grid-gap: 8px;
			&:has(a[data-fav-id]){
				& h3{
					grid-column: 1;
					grid-row: 2;
					margin-right: 32px;
				}
				& a[data-fav-id]{
					grid-column: 1;
					grid-row: 2;
					justify-self: end;
				}
			}
			&:not(:has(figure)){
				&:before{
					aspect-ratio: 1;
				}
			}
		}
		& h3{
			@media (min-width: 992px){
				font-size: 20px;
			}
		}
		& h3+div{
			display: none;
		}
		& figure{
			& img{
				aspect-ratio: 1;
			}
		}
	}
}