/* CSS Document */

#main{
	display: grid;
	background: var(--color-bg);
	overflow: hidden;
	&:has(#search){
		&:after{
			content: "";
			width: 100%;
			border-bottom: 1px solid currentColor;
		}
		#result{
			order: 1;
		}
		@media (min-width: 992px) {
			#search{
				border-radius: 40px 40px 0 0;
			}
		}
	}
	&:not(:has(#search)){
		@media (min-width: 992px) {
			#result{
				border-radius: 40px 40px 0 0;
			}
		}
	}
	#search,
	#result{
		justify-self: center;
		width: min(100%, 1236px);
	}
}

#feature,
#course,
#spot,
#reserve,
#event,
#theme,
#blog,
#favorite,
#recently-viewed,
#news{
	padding-bottom: clamp(48px, calc(64 / 768 * 100dvw), 64px);
	&:has(.slick-slider){
		overflow: hidden;
	}
	& hgroup{
		display: grid;
		grid-template-columns: 1fr var(--wrap) 1fr;
		grid-row-gap: 16px;
		&:before{
			content: "";
			grid-column: 1 / 4;
			grid-row: 1;
			background: white;
			margin-bottom: -8px;
		}
		& h2{
			grid-column: 2;
			grid-row: 1;
			margin-top: 24px;
			text-align: center;
		}
		& p{
			grid-column: 2;
			grid-row: 2;
			justify-self: center;
			font-weight: 600;
			font-size: clamp(20px, calc(28 / 1366 * 100dvw), 28px);
			font-family: 'Montserrat', var(--font);
			letter-spacing: 0.2em;
			white-space: nowrap;
			#feature &:not(:has(span)){
				background: linear-gradient(90deg, var(--color-theme) 0.8em, currentColor 0.8em, currentColor 6.6em, var(--color-theme) 6.6em, var(--color-theme) 7.6em, currentColor 7.6em);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			#course &:not(:has(span)){
				background: linear-gradient(90deg, var(--color-theme) 0.25em, currentColor 0.25em);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			#spot &:not(:has(span)){
				background: linear-gradient(90deg, var(--color-theme) 0.8em, currentColor 0.8em);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			#reserve &:not(:has(span)){
				background: linear-gradient(90deg, var(--color-theme) 0.8em, currentColor 0.8em);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			#event &:not(:has(span)){
				background: linear-gradient(90deg, var(--color-theme) 0.8em, currentColor 0.8em);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			#blog &:not(:has(span)){
				background: linear-gradient(90deg, var(--color-theme) 0.8em, currentColor 0.8em, currentColor 3.4em, var(--color-theme) 3.4em, var(--color-theme) 4.2em, currentColor 4.2em);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			#favorite &:not(:has(span)){
				background: linear-gradient(90deg, var(--color-theme) 0.8em, currentColor 0.8em);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			#recently-viewed &:not(:has(span)){
				background: linear-gradient(90deg, var(--color-theme) 0.8em, currentColor 0.8em);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			#news &:not(:has(span)){
				background: linear-gradient(90deg, var(--color-theme) 0.8em, currentColor 0.8em);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			& span{
				display: contents;
				color: var(--color-theme);
			}
		}
	}
	& h2{
		font-weight: 900;
		font-size: clamp(24px, calc(32 / 768 * 100dvw), 32px);
		letter-spacing: 0.15em;
	}
	#text{
		display: grid;
		grid-template-columns: var(--wrap);
		justify-content: center;
		margin-top: clamp(24px, calc(40 / 768 * 100dvw), 40px);
		@media (min-width: 768px) {
			text-align: center;
			text-wrap: balance;
			word-break: keep-all;
			overflow-wrap: anywhere;
		}
	}
	#pickup{
		margin-top: clamp(32px, calc(56 / 768 * 100dvw), 56px);
	}
	#tab{
		display: grid;
		justify-content: center;
		transform: translateY(clamp(48px, calc(64 / 768 * 100dvw), 64px));
		& ul{
			display: flex;
			column-gap: clamp(8px, calc(16 / 768 * 100dvw), 16px);
			padding-top: 8px;
		}
		& li{
			display: grid;
			width: min(50%, 300px);
		}
		& a{
			display: grid;
			align-items: center;
			min-height: 48px;
			padding: 8px;
			background: #9c9c9c;
			border-radius: 16px 16px 0 0;
			color: #fff;
			font-weight: 700;
			font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
			text-align: center;
			text-decoration: none;
			text-wrap: balance;
			word-break: keep-all;
			overflow-wrap: anywhere;
			.select &{
				margin-top: -8px;
				background: #303030;
				pointer-events: none;
			}
		}
		@media (max-width: 991.98px) {
			grid-template-columns: var(--wrap);
			& ul{
				justify-content: center;
			}
		}
		@media (min-width: 992px) {
			grid-template-columns: min(calc(100% - 80px), var(--wrap-max));
		}
	}
}

#pickup{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	grid-row-gap: 16px;
	& h3{
		display: grid;
		grid-template-columns: 1em 1fr;
		column-gap: 0.25em;
		font-weight: 800;
		font-size: clamp(20px, calc(24 / 768 * 100dvw), 24px);
		letter-spacing: 0.15em;
		&:before{
			content: "";
			justify-self: center;
			aspect-ratio: 1;
			width: 8px;
			background: var(--color-theme);
			border-radius: 100%;
			transform: translateY(calc(0.875em - 50%));
		}
	}
	#pickupSlide{
		display: grid;
		&:not(.slick-slider){
			justify-content: center;
			& > dl,
			& > span{
				width: clamp(200px, calc(256 / 768 * 100dvw), 256px);
				&:nth-child(n+2){
					display: none;
				}
			}
		}
		&.slick-slider{
			justify-self: center;
			grid-template-columns: auto 1fr auto;
			width: calc(max(100dvw, var(--wrap-min)) - 48px);
			.slick-list{
				grid-column: 1 / 4;
				grid-row: 1;
				overflow: visible;
			}
			.slick-arrow{
				align-self: center;
				grid-row: 1;
				&.slick-prev{
					grid-column: 1;
				}
				&.slick-next{
					grid-column: 3;
				}
			}
			.slick-slide{
				width: clamp(200px, calc(256 / 768 * 100dvw), 256px);
				margin: 0 16px;
			}
		}
		& dl{
			position: relative;
			display: grid;
			aspect-ratio: 1;
			overflow: hidden;
			&:not(:has(img)):before{
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: var(--dummy);
			}
			&:before,
			& dt,
			& img{
				transition: border-radius 0.2s ease-out;
			}
			&:hover:before,
			&:hover dt,
			&:hover img{
				border-radius: 100%;
			}
		}
		& dt{
			display: grid;
			place-items: center;
			padding: 16px;
			background: color-mix(in srgb, transparent, #001b48 24%);
			color: #fff;
			font-weight: 800;
			font-size: 20px;
			letter-spacing: 0.15em;
			text-align: center;
			writing-mode: vertical-rl;
			text-shadow: 0 0 5px color-mix(in srgb, transparent, #001b48 50%);
			z-index: 1;
		}
		& dd{
			display: contents;
			& a{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				font-size: 0;
				z-index: 1;
			}
			& img{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}
	#pickupTab{
		& dl{
			align-items: center;
			grid-gap: 8px;
			&::details-content{
				display: contents;
			}
			& > dd:nth-child(n+2){
				display: none;
			}
			@media (max-width: 767.98px) {
				display: grid;
				& dt{
					margin-left: 8px;
				}
			}
			@media (min-width: 768px) {
				display: flex;
				flex-wrap: wrap;
				& dt{
					display: flex;
					column-gap: 0.5em;
					&:after{
						content: ":";
					}
				}
			}
			@media (min-width: 768px) and (max-width: 991.98px) {
				justify-content: center;
			}
		}
		& dt{
			font-weight: 800;
			letter-spacing: 0.1em;
			@media (max-width: 575.98px) {
				margin-right: 96px;
			}
		}
		& span{
			display: grid;
			margin-top: 3px;
			&:not(.slick-slider){
				justify-self: center;
				display: grid;
				align-items: center;
				column-gap: 8px;
				max-width: max(100dvw, var(--wrap-min));
				overflow: auto;
				& li{
					grid-row: 1;
				}
			}
			&.slick-slider{
				&:not(:has(.slick-arrow)){
					.slick-track{
						transform: unset !important;
					}
				}
				&:has(.slick-arrow){
					display: grid;
					grid-template-columns: 1fr auto;
					grid-template-rows: 0 1fr;
					column-gap: 8px;
					.slick-list{
						grid-column: 1 / 3;
						grid-row: 2;
						overflow: visible;
					}
					.slick-arrow{
						align-self: center;
						transform: translateY(calc(0px - 4px - 50%));
					}
					.slick-prev{
						justify-self: end;
					}
				}
				.slick-list{
					margin-inline: -4px;
				}
				.slick-track{
					display: flex;
					align-items: center;
				}
				.slick-slide{
					float: unset;
					height: auto;
					margin-inline: 4px;
				}
			}
			.slick-arrow{
				background: unset;
				border: 1px solid currentColor;
				color: inherit;
				filter: unset;
				&.slick-disabled{
					pointer-events: none;
					opacity: 0.5;
				}
			}
		}
		& dd{
			width: 36px;
			border-bottom: 1px solid transparent;
			font-size: 18px;
			font-family: 'Montserrat', var(--font);
			letter-spacing: 0.1em;
			text-indent: 0.1em;
			text-align: center;
			cursor: pointer;
			&.past{
				color: #abb3b8;
			}
			&.select,
			&.slick-current{
				border-color: currentColor;
				color: var(--color-theme);
				font-weight: 700;
				font-size: 24px;
				letter-spacing: 0.1em;
				text-indent: 0.1em;
				pointer-events: none;
			}
		}
	}
	#pickupList{
		display: grid;
		transition: opacity 0.2s ease-out;
		&:not(.slick-slider){
			opacity: 0;
		}
		&.slick-slider{
			opacity: 1;
			.slick-list{
				overflow: visible;
			}
		}
		& details{
			justify-self: center;
			width: max(100dvw, var(--wrap-min));
			&::details-content{
				display: contents;
			}
		}
		& summary{
			display: none;
		}
		& summary+div{
			justify-self: center;
			display: grid;
			&:not(.slick-slider){
				justify-content: center;
				& > dl,
				& > span{
					width: clamp(240px, calc(358 / 768 * 100dvw), 358px);
					&:nth-child(n+2){
						display: none;
					}
				}
			}
			&.slick-slider{
				grid-template-columns: auto 1fr auto;
				width: calc(100% - clamp(16px, calc(32 / 768 * 100dvw), 32px));
				@media (min-width: 992px) {
					width: var(--wrap-fit);
				}
				&:before{
					content: "";
					grid-column: 1 / 4;
					grid-row: 1;
					aspect-ratio: 3 / 2;
					width: clamp(240px, calc(358 / 768 * 100dvw), 358px);
					margin-inline: clamp(8px, calc(16 / 768 * 100dvw), 16px);
					visibility: hidden;
				}
				.slick-list{
					grid-column: 1 / 4;
					grid-row: 1 / 3;
					overflow: visible;
					margin-inline: calc(0px - clamp(8px, calc(16 / 768 * 100dvw), 16px));
				}
				.slick-arrow{
					align-self: center;
					grid-row: 1;
					&.slick-prev{
						grid-column: 1;
					}
					&.slick-next{
						grid-column: 3;
					}
				}
				.slick-slide{
					width: clamp(240px, calc(358 / 768 * 100dvw), 358px);
					margin-inline: clamp(8px, calc(16 / 768 * 100dvw), 16px);
				}
			}
		}
		& dl{
			position: relative;
			display: grid;
			overflow: hidden;
			&:not(:has(img)):before{
				content: "";
				grid-row: 1;
				aspect-ratio: 3 / 2;
				margin-bottom: 8px;
				background: var(--dummy);
				transition: border-radius 0.2s ease-out;
			}
			&:hover{
				&:before,
				& img{
					border-radius: clamp(32px, calc(64 / 768 * 100dvw), 64px) 0 0 0;
				}
			}
		}
		& dt{
			font-weight: 800;
			letter-spacing: 0.025em;
		}
		& dd{
			&:not(:has(img)){
				display: contents;
			}
			&:has(img){
				grid-row: 1;
				margin-bottom: 8px;
			}
			& time{
				grid-row: 2;
				color: color-mix(in srgb, transparent, currentColor 60%);
				font-weight: 600;
				font-size: 12px;
				letter-spacing: 0.025em;
			}
			& a{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				font-size: 0;
				z-index: 1;
			}
			& img{
				aspect-ratio: 3 / 2;
				object-fit: cover;
				transition: border-radius 0.2s ease-out;
			}
		}
	}
	.slick-arrow{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		position: relative;
		aspect-ratio: 1;
		width: clamp(40px, calc(48 / 768 * 100dvw), 48px);
		background: white;
		border-radius: 100%;
		color: var(--color-theme);
		font-size: 0;
		filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
		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 24 24" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><line x1="4.83" y1="11.93" x2="19.17" y2="11.93"/><polyline points="13.3 6.14 19.17 12 13.3 17.86"/></svg>') no-repeat center / 50%;
		}
		&.slick-prev:before{
			transform: scale(-1, 1);
		}
	}
	@media (min-width: 992px) {
		&:has(#pickupTab){
			justify-self: center;
			grid-template-columns: auto 1fr auto;
			align-items: center;
			width: var(--wrap);
			&:before{
				content: "";
				grid-column: 2;
				grid-row: 1;
				min-width: 64px;
				margin: 0 40px;
				border-bottom: 1px solid currentColor;
			}
			#pickupTab{
				grid-column: 3;
				grid-row: 1;
			}
			#pickupList{
				grid-column: 1 / 4;
			}
		}
	}
}

#theme{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	&:not(:has(#photo)){
		&:before{
			content: "";
			grid-column: 1 / 4;
			grid-row: 1;
			background: white;
			margin-bottom: -8px;
		}
		&:after{
			content: "Theme";
			grid-column: 2;
			grid-row: 2;
			justify-self: center;
			margin-top: 16px;
			background: linear-gradient(90deg, var(--color-theme) 0.8em, currentColor 0.8em);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			font-weight: 600;
			font-size: clamp(22px, calc(28 / 1366 * 100dvw), 28px);
			font-family: 'Montserrat', var(--font);
			letter-spacing: 0.2em;
			white-space: nowrap;
		}
		& h2{
			grid-column: 2;
			grid-row: 1;
			padding-top: 24px;
			text-align: center;
		}
		#text{
			justify-self: center;
		}
	}
	&:has(#photo){
		overflow: hidden;
		& h2{
			grid-column: 2;
			grid-row: 1;
			justify-self: start;
			align-self: end;
			position: relative;
			display: grid;
			align-items: end;
			max-width: calc(100% - clamp(48px, calc(72 / 768 * 100dvw), 72px));
			min-height: clamp(56px, calc(72 / 768 * 100dvw), 72px);
			margin-top: clamp(120px, calc(160 / 768 * 100dvw), 160px);
			padding: 0.5em clamp(56px, calc(72 / 768 * 100dvw), 72px) 0 0;
			border-radius: 0 clamp(56px, calc(72 / 768 * 100dvw), 72px) 0 0;
			font-weight: 900;
			font-size: clamp(20px, calc(36 / 768 * 100dvw), 36px);
			letter-spacing: 0.1em;
			background: var(--color-bg);
			z-index: 1;
			&:before{
				content: "";
				position: absolute;
				top: 0;
				right: 100%;
				width: 100dvw;
				height: 100%;
				background: var(--color-bg);
				z-index: -1;
			}
		}
		#text{
			grid-column: 2;
			margin-top: clamp(24px, calc(40 / 768 * 100dvw), 40px);
		}
		#photo{
			grid-column: 1 / 4;
			grid-row: 1;
			& img{
				aspect-ratio: 3 / 2;
				max-height: 600px;
				object-fit: cover;
			}
		}
	}
	#text{
		grid-column: 2;
		margin-top: clamp(24px, calc(40 / 768 * 100dvw), 40px);
		@media (min-width: 768px) {
			text-align: unset;
		}
	}
	#link{
		grid-column: 2;
		display: flex;
		justify-content: center;
		margin-top: clamp(24px, calc(40 / 768 * 100dvw), 40px);
		& a{
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			column-gap: 8px;
			min-width: 240px;
			min-height: 48px;
			padding: 8px 16px;
			border: 1px solid currentColor;
			border-radius: 24px;
			color: inherit;
			font-weight: 800;
			font-size: 14px;
			letter-spacing: 0.1em;
			text-align: center;
			text-decoration: none;
			&:after{
				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" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="6 3 11 8 6 13"/></svg>') no-repeat center / contain;
			}
		}
	}
}

#favorite{
	#shareOpen{
		display: flex;
		justify-content: center;
		margin-top: clamp(24px, calc(40 / 768 * 100dvw), 40px);
		& button{
			display: grid;
			align-items: center;
			min-width: 216px;
			min-height: 48px;
			padding: 8px 16px;
			border: 2px solid currentColor;
			border-radius: 24px;
			color: inherit;
			font-weight: 800;
			font-size: 14px;
			letter-spacing: 0.1em;
			text-align: center;
			text-decoration: none;
		}
	}
	#share{
		display: grid;
		grid-row-gap: 16px;
		padding: clamp(16px, calc(32 / 768 * 100dvw), 32px);
		border-radius: 4px;
		opacity: 0;
		transition: opacity 0.5s ease-out;
		overflow: hidden;
		&:popover-open{
			opacity: 1;
		}
		&:not(:popover-open){
			pointer-events: none;
		}
		&::backdrop{
			background: rgba(0, 0, 0, 0.5);
		}
		& h3{
			display: grid;
			grid-template-columns: auto 1fr;
			align-items: baseline;
			column-gap: 8px;
			font-weight: 700;
			font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
			letter-spacing: 0.05em;
			&:before{
				content: "";
				width: 4px;
				height: 1em;
				background: var(--color-theme);
				transform: translateY(0.1em);
			}
		}
		& h3+div{
			&:has(input){
				display: grid;
				grid-template-columns: 1fr auto;
				min-height: 48px;
				border: 1px solid silver;
				& input{
					padding: 8px;
				}
				& button{
					aspect-ratio: 1;
					width: 48px;
					background: #ccc;
					font-size: 0;
					-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="M9.2,13.6c.99,1.33,2.43,2.13,3.95,2.35s3.12-.14,4.45-1.13c.24-.18.47-.38.66-.57l3-2.99c1.16-1.2,1.72-2.75,1.7-4.28s-.64-3.06-1.83-4.21c-1.17-1.13-2.69-1.69-4.2-1.68-1.49,0-2.98.57-4.14,1.68l-1.73,1.72c-.39.39-.39,1.02,0,1.41s1.02.39,1.41,0l1.71-1.7c.77-.74,1.76-1.12,2.76-1.12,1.01,0,2.02.37,2.8,1.12.8.77,1.2,1.78,1.22,2.81s-.35,2.05-1.11,2.84l-3,3.01c-.11.12-.26.25-.43.37-.89.66-1.95.9-2.97.76s-1.97-.68-2.63-1.56c-.33-.44-.96-.53-1.4-.2s-.53.96-.2,1.4h0ZM14.8,10.4c-.99-1.33-2.43-2.13-3.95-2.35s-3.12.14-4.45,1.13c-.24.18-.46.38-.65.57l-2.99,2.99c-1.16,1.2-1.72,2.75-1.7,4.28s.64,3.06,1.83,4.21c1.17,1.13,2.69,1.69,4.2,1.68,1.49,0,2.98-.57,4.14-1.68l1.72-1.72c.39-.39.39-1.02,0-1.41s-1.02-.39-1.41,0l-1.7,1.7c-.77.74-1.76,1.12-2.76,1.12-1.01,0-2.02-.37-2.8-1.12-.8-.77-1.2-1.78-1.22-2.81s.36-2.05,1.11-2.84l3.01-3.01c.11-.12.26-.25.43-.37.88-.66,1.95-.9,2.97-.76s1.97.68,2.63,1.56c.33.44.96.53,1.4.2s.53-.96.2-1.4h0Z"/></svg>') no-repeat center / 50%;
				}
			}
		}
		& h3+div+div{
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			grid-gap: 8px;
		}
		& ul{
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			grid-gap: 8px;
		}
		& li{
			display: contents;
		}
		& a{
			display: grid;
			grid-template-columns: auto 1fr;
			align-items: center;
			column-gap: 4px;
			min-height: 32px;
			padding: 0 16px;
			border: 1px solid currentColor;
			border-radius: 16px;
			color: inherit;
			font-weight: 700;
			font-size: 14px;
			text-align: center;
			text-decoration: none;
			&:before{
				content: "";
				aspect-ratio: 1;
				width: 1em;
				background: currentColor;
				-webkit-mask: no-repeat center / cover;
			}
			&[data-target="confirm"]{
				&: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="M.11,11.55c-.14.27-.15.6,0,.89,0,0,.4.79,1.12,1.84.45.66,1.04,1.43,1.76,2.22.89.98,2,1.99,3.32,2.8,1.6.99,3.51,1.69,5.7,1.69s4.1-.71,5.7-1.69c1.32-.81,2.42-1.82,3.32-2.8.72-.79,1.31-1.56,1.76-2.22.72-1.05,1.12-1.84,1.12-1.84.14-.27.15-.6,0-.89,0,0-.4-.79-1.12-1.84-.45-.66-1.04-1.43-1.76-2.22-.89-.98-2-1.99-3.32-2.8-1.59-.99-3.51-1.69-5.7-1.69s-4.1.71-5.7,1.69c-1.32.81-2.42,1.82-3.32,2.8-.72.79-1.31,1.56-1.76,2.22-.72,1.05-1.12,1.84-1.12,1.84h0ZM2.14,12c.16-.28.41-.68.73-1.16.41-.6.94-1.3,1.59-2,.8-.88,1.78-1.76,2.89-2.45,1.35-.83,2.9-1.39,4.65-1.39s3.3.56,4.65,1.39c1.12.69,2.09,1.57,2.89,2.45.64.7,1.17,1.4,1.58,2,.33.48.57.88.73,1.16-.16.28-.41.68-.73,1.16-.41.6-.94,1.3-1.58,2-.81.88-1.77,1.76-2.89,2.45-1.35.83-2.9,1.39-4.65,1.39s-3.3-.56-4.65-1.39c-1.12-.69-2.09-1.57-2.89-2.45-.64-.7-1.17-1.4-1.59-2-.33-.48-.57-.88-.74-1.16h0ZM16,12c0-1.1-.45-2.11-1.17-2.83s-1.72-1.17-2.83-1.17-2.11.45-2.83,1.17-1.17,1.72-1.17,2.83.45,2.11,1.17,2.83,1.72,1.17,2.83,1.17,2.11-.45,2.83-1.17,1.17-1.72,1.17-2.83ZM14,12c0,.55-.22,1.05-.59,1.41s-.86.59-1.41.59-1.05-.22-1.41-.59-.59-.86-.59-1.41.22-1.05.59-1.41.86-.59,1.41-.59,1.05.22,1.41.59.59.86.59,1.41Z"/></svg>');
				}
			}
			&[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.92l8.43,5.9c.34.23.8.25,1.15,0l8.43-5.9v10.08c0,.27-.11.52-.3.7s-.43.3-.7.3H4c-.27,0-.52-.11-.7-.3s-.3-.43-.3-.7V7.92ZM1,5.98v12.02c0,.83.34,1.58.88,2.12.54.54,1.29.88,2.12.88h16c.83,0,1.58-.34,2.12-.88s.88-1.29.88-2.12V5.98c0-.82-.34-1.57-.88-2.1-.54-.54-1.29-.88-2.12-.88H4c-.83,0-1.58.34-2.12.88-.54.54-.88,1.28-.88,2.1ZM20.89,5.55l-8.89,6.22L3.11,5.55c.05-.1.11-.18.19-.26.18-.18.43-.3.71-.3h16c.27,0,.52.11.7.3.08.08.14.16.19.26h0Z"/></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 24 24"><path d="M14.23,10.16L22.98,0h-2.07l-7.59,8.82L7.25,0H.26l9.17,13.34L.26,24h2.07l8.02-9.32,6.4,9.32h6.99l-9.51-13.84h0ZM11.4,13.46l-.93-1.33L3.08,1.56h3.18l5.96,8.53.93,1.33,7.75,11.09h-3.18l-6.33-9.05h0Z"/></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 24 24"><path d="M14.23,4.52h3.75V.02h-3.75C11.34.02,8.98,2.37,8.98,5.27v2.25h-3v4.5h3v12h4.5v-12h3.75l.75-4.5h-4.5v-2.25c0-.41.34-.75.75-.75Z"/></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 24 24"><path d="M24,9.74C24,4.37,18.62,0,12,0S0,4.37,0,9.74c0,4.81,4.27,8.85,10.04,9.61.39.08.92.26,1.06.59.12.3.08.78.04,1.09,0,0-.14.85-.17,1.03-.05.3-.24,1.19,1.04.65,1.28-.54,6.91-4.07,9.43-6.97h0c1.74-1.91,2.57-3.84,2.57-5.99ZM7.77,12.61c0,.13-.1.23-.23.23h-3.37c-.13,0-.23-.1-.23-.23h0v-5.24c0-.13.1-.23.23-.23h.85c.13,0,.23.1.23.23v4.16h2.29c.13,0,.23.1.23.23v.85ZM9.8,12.61c0,.13-.1.23-.23.23h-.85c-.13,0-.23-.1-.23-.23v-5.24c0-.13.1-.23.23-.23h.85c.13,0,.23.1.23.23v5.24ZM15.59,12.61c0,.13-.1.23-.23.23h-.85s-.04,0-.06,0c0,0,0,0,0,0,0,0-.01,0-.02,0,0,0,0,0,0,0,0,0,0,0-.01,0,0,0,0,0-.01,0,0,0,0,0,0,0,0,0,0,0-.01,0,0,0,0,0,0,0-.02-.02-.04-.03-.06-.06l-2.4-3.24v3.11c0,.13-.1.23-.23.23h-.85c-.13,0-.23-.1-.23-.23v-5.24c0-.13.1-.23.23-.23h.85s0,0,0,0c0,0,0,0,.01,0,0,0,0,0,.01,0,0,0,0,0,0,0,0,0,0,0,.01,0,0,0,0,0,0,0,0,0,0,0,.01,0,0,0,0,0,0,0,0,0,0,0,.01,0,0,0,0,0,0,0,0,0,0,0,.01,0,0,0,0,0,0,0,0,0,0,0,.01,0,0,0,0,0,0,0,0,0,0,0,.01.01,0,0,0,0,0,0,0,0,0,0,.01.01,0,0,0,0,0,0,0,0,.01.02.02.02l2.4,3.24v-3.11c0-.13.1-.23.23-.23h.85c.13,0,.23.1.23.23v5.24ZM20.24,8.22c0,.13-.1.23-.23.23h-2.29v.88h2.29c.13,0,.23.1.23.23v.85c0,.13-.1.23-.23.23h-2.29v.88h2.29c.13,0,.23.1.23.23v.85c0,.13-.1.23-.23.23h-3.37c-.13,0-.23-.1-.23-.23h0v-5.23h0c0-.13.1-.23.23-.23h3.37c.13,0,.23.1.23.23v.85Z"/></svg>');
				}
			}
		}
		& button{
			&[popovertargetaction="hide"]{
				position: absolute;
				top: 0;
				right: 0;
				aspect-ratio: 1;
				width: 48px;
				background: silver;
				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" fill="none" stroke="black" stroke-width="2"><polyline points="2 2 16 16" /><polyline points="16 2 2 16" /></svg>') no-repeat center / 16px;
			}
		}
	}
	#shareCopy{
		max-width: min(var(--wrap-fit), 640px);
		padding: clamp(16px, calc(24 / 768 * 100dvw), 24px);
		padding-top: calc(clamp(16px, calc(24 / 768 * 100dvw), 24px) + 6px);
		border-radius: 4px;
		opacity: 0;
		transition: opacity 0.5s ease-out;
		&:popover-open{
			opacity: 1;
		}
		&:not(:popover-open){
			pointer-events: none;
		}
		&::backdrop{
			background: rgba(0, 0, 0, 0.5);
		}
		&:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 6px;
			background: var(--color-theme);
		}
	}
}

#search{
	background: white;
	padding: clamp(32px, calc(48 / 768 * 100dvw), 48px) 0 32px 0;
	& h2{
		display: none;
	}
	& input[type="text"]{
		&::placeholder{
			color: #9c9c9c;
		}
	}
	#searchMenu{
		&{
			display: grid;
			grid-gap: 16px;
			@media (max-width: 991.98px) {
				& ul{
					display: none;
				}
			}
			@media (min-width: 992px) {
				& ul{
					display: contents;
				}
				& li,
				& input{
					grid-row: 1;
				}
			}
		}
		& li{
			display: grid;
			&:not(:has(input)){
				grid-template-columns: 1fr auto;
				align-items: center;
				column-gap: 0.5em;
				min-height: 32px;
				padding: 4px 0 4px 8px;
				border-bottom: 1px solid currentColor;
				cursor: pointer;
				&:after{
					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" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="13 6 8 11 3 6"/></svg>') no-repeat center / contain;
				}
				&.select:after{
					transform: scale(1, -1);
				}
			}
		}
		& input{
			width: 100%;
			@media (max-width: 991.98px) {
				min-height: 48px;
				padding: 8px 24px;
				border: 1px solid currentColor;
				border-radius: 24px;
			}
			@media (min-width: 992px) {
				display: grid;
				min-height: 32px;
				padding: 4px 8px;
				border-bottom: 1px solid currentColor;
			}
		}
	}
	#searchButton{
		display: grid;
		justify-items: center;
		grid-row-gap: clamp(16px, calc(24 / 768 * 100dvw), 24px);
		& input{
			width: 100%;
			min-height: 48px;
			padding: 8px 24px;
			border: 1px solid currentColor;
			border-radius: 24px;
			@media (min-width: 992px) {
				width: min(100%, 500px);
			}
		}
		& button{
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			column-gap: 0.5em;
			max-width: 304px;
			min-width: 176px;
			min-height: 48px;
			padding: 8px 16px;
			background: var(--color);
			border-radius: 24px;
			color: white;
			font-weight: 700;
			font-size: 14px;
			letter-spacing: 0.2em;
			text-align: center;
			&:after{
				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" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><circle cx="6.05" cy="6.05" r="5.05"/><line x1="9.97" y1="9.97" x2="14.62" y2="14.62"/></svg>') no-repeat center / contain;
			}
			@media (min-width: 992px) {
				min-height: 40px;
				border-radius: 20px;
			}
		}
	}
	#sq{
		display: flex;
		justify-content: center;
		pointer-events: none;
		& a{
			position: relative;
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			column-gap: 0.5em;
			color: inherit;
			padding: 4px 0;
			margin-left: calc(20px + 0.5em);
			border-bottom: 1px solid currentColor;
			font-weight: 600;
			font-size: 14px;
			text-align: center;
			text-decoration: none;
			pointer-events: all;
			&:before{
				content: "";
				position: absolute;
				top: 50%;
				left: 0;
				aspect-ratio: 1;
				width: 20px;
				background: #d966a0;
				transform: translate(calc(0px - 100% - 0.5em), -50%);
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10;"><line x1="7.5" y1="7.83" x2="7.5" y2="5.98"/><line x1="7.5" y1="7.83" x2="6.41" y2="9.34"/><line x1="7.5" y1="7.83" x2="9.27" y2="7.26"/><line x1="7.5" y1="7.83" x2="5.73" y2="7.26"/><line x1="7.5" y1="7.83" x2="8.59" y2="9.34"/><path d="M3.44,9.15c-.25.36-.53.84-.62,1.36-.18.99.28,1.9.28,1.9h1.07s.33,1.01.33,1.01c0,0,1.02.16,1.9-.32.46-.25.84-.66,1.1-1.01h0c.26.35.64.76,1.1,1.01.88.48,1.9.32,1.9.32l.33-1.02h1.07s.47-.92.28-1.9c-.1-.52-.37-1-.62-1.36h0c.41-.14.92-.37,1.3-.74.73-.69.89-1.71.89-1.71l-.86-.63.33-1.01s-.73-.73-1.72-.86c-.52-.07-1.07.04-1.49.17h0c0-.43-.07-.99-.3-1.47-.43-.91-1.35-1.37-1.35-1.37l-.86.63-.86-.63s-.92.47-1.35,1.37c-.23.47-.29,1.03-.3,1.47h0c-.42-.13-.97-.24-1.49-.17-.99.13-1.72.86-1.72.86l.33,1.01-.86.63s.16,1.02.89,1.71c.38.36.89.59,1.3.74h0Z" style="stroke-width: .05px;"/><path d="M3.44,9.15c-.25.36-.53.84-.62,1.36-.18.99.28,1.9.28,1.9h1.07s.33,1.01.33,1.01c0,0,1.02.16,1.9-.32.46-.25.84-.66,1.1-1.01h0c.26.35.64.76,1.1,1.01.88.48,1.9.32,1.9.32l.33-1.02h1.07s.47-.92.28-1.9c-.1-.52-.37-1-.62-1.36h0c.41-.14.92-.37,1.3-.74.73-.69.89-1.71.89-1.71l-.86-.63.33-1.01s-.73-.73-1.72-.86c-.52-.07-1.07.04-1.49.17h0c0-.43-.07-.99-.3-1.47-.43-.91-1.35-1.37-1.35-1.37l-.86.63-.86-.63s-.92.47-1.35,1.37c-.23.47-.29,1.03-.3,1.47h0c-.42-.13-.97-.24-1.49-.17-.99.13-1.72.86-1.72.86l.33,1.01-.86.63s.16,1.02.89,1.71c.38.36.89.59,1.3.74h0Z"/></svg>') no-repeat center / contain;
			}
			&: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" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6px;"><polyline points="3 1 7 5 3 9" /></svg>') no-repeat center / contain;
			}
		}
		& span{
			display: contents;
			color: #d966a0;
		}
	}
	&{
		display: grid;
		grid-template-columns: var(--wrap);
		justify-content: center;
		@media (max-width: 991.98px) {
			grid-row-gap: clamp(16px, calc(24 / 768 * 100dvw), 24px);
			#searchTheme,
			#searchDate{
				order: -2;
			}
			#searchFilter{
				order: -1;
			}
		}
		@media (min-width: 992px) {
			#searchDate{
				grid-row: 1;
				margin-bottom: 16px;
			}
			#searchTheme{
				margin-top: clamp(24px, calc(32 / 768 * 100dvw), 32px);
			}
			#searchButton{
				margin-top: 40px;
			}
		}
		@media (min-width: 992px) and (max-width: 1199.98px) {
			#sq{
				margin-top: clamp(24px, calc(32 / 768 * 100dvw), 32px);
			}
		}
		@media (min-width: 1200px) {
			#searchButton,
			#sq{
				grid-column: 1;
				grid-row: 10;
				align-self: center;
			}
			#sq{
				display: grid;
				grid-template-columns: 1fr 320px 1fr;
				justify-items: start;
				margin-top: 40px;
			}
		}
	}
}

#searchFilter{
	& details{
		&::details-content{
			display: contents;
		}
	}
	@media (max-width: 991.98px) {
		display: grid;
		&::details-content{
			display: contents;
		}
		& summary+div{
			display: none;
			margin-bottom: 8px;
		}
		& details{
			&[open]{
				& summary:after{
					transform: scale(1, -1);
				}
			}
			& summary{
				display: grid;
				grid-template-columns: 1fr auto;
				align-items: center;
				min-height: 48px;
				border-bottom: 1px solid currentColor;
				&:after{
					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" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="13 6 8 11 3 6"/></svg>') no-repeat center / contain;
				}
			}
			& summary+div{
				margin-block: 16px;
			}
		}
		#searchFilterToggle{
			order: 1;
			display: grid;
			grid-template-columns: auto auto;
			justify-content: center;
			align-items: center;
			column-gap: 0.5em;
			font-weight: 800;
			font-size: 14px;
			letter-spacing: 0.1em;
			&:after{
				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" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><circle cx="6.05" cy="6.05" r="5.05"/><line x1="9.97" y1="9.97" x2="14.62" y2="14.62"/></svg>') no-repeat center / contain;
			}
		}
	}
	@media (min-width: 992px) {
		&::details-content{
			display: contents;
		}
		#searchFilterToggle{
			display: none;
		}
	}
	#searchFilterList{
		& ul{
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
			grid-gap: 8px 24px;
			& ul{
				grid-template-columns: 1fr;
				margin-left: 24px;
				margin-top: 8px;
			}
			&:has(ul){
				grid-row-gap: 24px;
			}
			&[lsc-lb="List"],
			&[lsc-lb="Distance"]{
				display: none;
			}
		}
		& label{
			display: grid;
			grid-template-columns: auto 1fr;
			align-items: baseline;
			column-gap: 8px;
			cursor: pointer;
			& input{
				transform: translateY(0.1em);
				&[type="checkbox"],
				&[type="radio"]{
					display: inline-block;
					aspect-ratio: 1;
					width: 1em;
					color: silver;
					&:checked{
						color: var(--color-theme);
						border-color: currentColor;
					}
					&:not(:disabled){
						cursor: pointer;
					}
				}
				&[type="checkbox"]{
					background: currentColor 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="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 7 4 10 11 3" /></svg>') no-repeat center / 60%;
					border-radius: 2px;
				}
				&[type="radio"]{
					background: radial-gradient(circle, currentColor 40%, white 40%);
					border: 1px solid currentColor;
					border-radius: 100%;
				}
			}
		}
		@media (min-width: 992px) {
			& details{
				display: none;
				margin-top: 24px;
				& summary{
					display: none;
				}
			}
		}
	}
	#searchFilterGrid{
		& ul{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			grid-gap: clamp(8px, calc(16 / 768 * 100dvw), 16px) 8px;
		}
		& li{
			display: contents;
		}
		& label{
			display: grid;
			align-items: center;
			column-gap: 0.5em;
			min-height: 32px;
			padding: 4px 16px;
			border: 1px solid currentColor;
			border-radius: 16px;
			font-weight: 800;
			font-size: 14px;
			letter-spacing: 0.2em;
			cursor: pointer;
			&:has(input:checked){
				background: var(--color);
				border-color: var(--color);
				color: white;
			}
			& input{
				display: none;
			}
		}
		@media (min-width: 992px) {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-column-gap: clamp(40px, calc(56 / 1366 * 100dvw), 56px);
			align-items: start;
			& details{
				grid-row: 1;
				display: grid;
				grid-row-gap: 32px;
				&::details-content{
					display: contents;
				}
			}
			& summary{
				display: grid;
				grid-row-gap: 8px;
				font-weight: 800;
				font-size: 20px;
				letter-spacing: 0.1em;
				text-indent: 0.1em;
				text-align: center;
				pointer-events: none;
				&:before,
				&:after{
					order: 1;
				}
				&:before{
					content: "";
					border-bottom: 1px solid currentColor;
				}
				&:after{
					content: attr(data-caption);
					justify-self: center;
					font-weight: 600;
					font-size: 14px;
					font-family: 'Montserrat', var(--font);
					white-space: nowrap;
					letter-spacing: 0.1em;
				}
				&[data-caption="Area"]:after{
					background: linear-gradient(90deg, var(--color-theme) 0.9em, currentColor 0.9em);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
				&[data-caption="Theme"]:after{
					background: linear-gradient(90deg, var(--color-theme) 0.9em, currentColor 0.9em);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
				&[data-caption="Days"]:after{
					background: linear-gradient(90deg, var(--color-theme) 1em, currentColor 1em);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}
			& summary+div{
				& ul{
					padding-top: 24px;
				}
			}
		}
	}
}

#searchArea{
	&:has(#searchAreaList){
		display: grid;
	}
	@media (max-width: 991.98px) {
		&:has(#searchAreaList){
			grid-gap: clamp(24px, calc(40 / 768 * 100dvw), 40px);
		}
	}
	@media (min-width: 992px) {
		&:has(#searchAreaList){
			grid-gap: 48px;
			#searchAreaMap,
			#searchAreaList{
				grid-column: 1;
				grid-row: 1;
			}
			#searchAreaMap{
				width: clamp(320px, calc(400 / 1366 * 100dvw), 400px);
			}
			#searchAreaList{
				margin-left: calc(clamp(320px, calc(400 / 1366 * 100dvw), 400px) + 48px);
			}
		}
	}
	#searchAreaMap{
		& svg{
			background: #c5dae8;
			border-radius: 4px;
			& a{
				text-decoration: none;
				cursor: pointer;
				transition: none;
				&[data-area-id="1"]{
					& rect{
						stroke: #c1c42f;
					}
					&.select{
						& rect{
							fill: #c1c42f;
						}
					}
				}
				&[data-area-id="2"]{
					& rect{
						stroke: #67afe1;
					}
					&.select{
						& rect{
							fill: #67afe1;
						}
					}
				}
				&[data-area-id="3"]{
					& rect{
						stroke: #81c2c2;
					}
					&.select{
						& rect{
							fill: #81c2c2;
						}
					}
				}
				&[data-area-id="4"]{
					& rect{
						stroke: #555ea9;
					}
					&.select{
						& rect{
							fill: #555ea9;
						}
					}
				}
				&[data-area-id="5"]{
					& rect{
						stroke: #b078b0;
					}
					&.select{
						& rect{
							fill: #b078b0;
						}
					}
				}
				&[data-area-id="6"]{
					& rect{
						stroke: #e57897;
					}
					&.select{
						& rect{
							fill: #e57897;
						}
					}
				}
				&[data-area-id="7"]{
					& rect{
						stroke: #ca7b5e;
					}
					&.select{
						& rect{
							fill: #ca7b5e;
						}
					}
				}
				&.select{
					& rect{
						fill: black;
						stroke: white !important;
						transition: fill, stroke 0.2s ease-out;
					}
					& text{
						fill: white;
						transition: fill 0.2s ease-out;
					}
				}
			}
			& rect{
				fill: white;
				stroke: black;
				stroke-width: 2px;
			}
			& text{
				fill: black;
				font-weight: 800;
				font-size: 12px;
			}
		}
	}
	#searchAreaList{
		display: grid;
		grid-row-gap: 16px;
		& dl{
			display: grid;
			grid-row-gap: 8px;
			@media (min-width: 576px) {
				grid-template-columns: subgrid;
				grid-column: span 2;
				align-items: start;
				& dt{
					text-align: center;
				}
				& dd{
					margin-top: 0.3em;
				}
			}
		}
		& dt{
			position: relative;
			display: grid;
			align-items: center;
			min-height: 32px;
			padding: 0 16px;
			background: silver;
			border-radius: 16px;
			font-weight: 800;
			letter-spacing: 0.1em;
			color: #fff;
			cursor: pointer;
			&:has(:checked){
				&:has([data-area-id="1"]){
					background: #c1c42f;
				}
				&:has([data-area-id="2"]){
					background: #67afe1;
				}
				&:has([data-area-id="3"]){
					background: #81c2c2;
				}
				&:has([data-area-id="4"]){
					background: #555ea9;
				}
				&:has([data-area-id="5"]){
					background: #b078b0;
				}
				&:has([data-area-id="6"]){
					background: #e57897;
				}
				&:has([data-area-id="7"]){
					background: #ca7b5e;
				}
			}
			& input{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}
		& dd{
			margin-left: 16px;
			font-size: 14px;
		}
	}
}

#searchDate{
	display: grid;
	grid-gap: 8px 16px;
	& h3{
		font-weight: 800;
		font-size: 14px;
		letter-spacing: 0.1em;
		&:after{
			content: "";
			min-width: 40px;
			border-top: 1px solid currentColor;
		}
	}
	#searchDateSelect{
		& ul{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			grid-gap: 8px 16px;
		}
		& li{
			display: flex;
			align-items: center;
			column-gap: 0.5em;
			&:has(label){
				display: contents;
			}
		}
		& input{
			all: unset;
			box-sizing: border-box;
			&[type="button"]{
				field-sizing: content;
				max-width: calc(20px + 5.4em);
				padding-left: 20px;
				background: 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;"><rect x="2.5" y="3" width="12" height="12" rx="1" ry="1"/><line x1="2.5" y1="6" x2="14.5" y2="6"/><line x1="5.5" y1="3.83" x2="5.5" y2="2"/><line x1="5.5" y1="15" x2="5.5" y2="6"/><line x1="8.5" y1="15" x2="8.5" y2="6"/><line x1="11.5" y1="3.83" x2="11.5" y2="2"/><line x1="11.5" y1="15" x2="11.5" y2="6"/><line x1="2.5" y1="9" x2="14.5" y2="9"/><line x1="2.5" y1="12" x2="14.5" y2="12"/></svg>') no-repeat center left / 16px;
				color: #9c9c9c;
				text-decoration: underline;
				cursor: pointer;
			}
		}
		& label{
			position: relative;
			display: grid;
			align-items: center;
			padding: 0.5em 0.5em;
			border-bottom: 1px solid transparent;
			color: #9c9c9c;
			font-weight: 600;
			font-size: 14px;
			cursor: pointer;
			&:has(input:checked){
				border-color: currentColor;
				color: var(--color-theme);
			}
			& input{
				display: none;
			}
		}
	}
	#searchDateCalendarStart,
	#searchDateCalendarEnd{
		width: min(var(--wrap-fit), 480px);
		padding: clamp(16px, calc(32 / 768 * 100dvw), 32px);
		border-radius: 4px;
		opacity: 0;
		transition: opacity 0.5s ease-out;
		overflow: hidden;
		&:popover-open{
			opacity: 1;
		}
		&::backdrop{
			background: rgba(0, 0, 0, 0.5);
		}
		& h4{
			font-weight: 700;
			font-size: clamp(16px, calc(20 / 768 * 100dvw), 20px);
			letter-spacing: 0.15em;
			text-align: center;
		}
		& button{
			&[popovertargetaction="hide"]{
				position: absolute;
				top: 0;
				right: 0;
				aspect-ratio: 1;
				width: 48px;
				background: #ccc;
				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" fill="none" stroke="black" stroke-width="2"><polyline points="2 2 16 16" /><polyline points="16 2 2 16" /></svg>') no-repeat center / 16px;
			}
		}
	}
	#searchDateCalendarSlide,#searchDateCalendarSlideStart,#searchDateCalendarSlideEnd{
		margin-top: 8px;
		& table{
			display: block;
			width: 100%;
			border: 1px solid var(--color);
			font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
			& caption{
				display: grid;
				grid-template-columns: 1fr auto 1fr;
				align-items: center;
				height: 2.5em;
				padding: 0.25em 1em;
				background: var(--color);
				color: white;
				& span{
					font-size: 0.75em;
				}
			}
			& thead,
			& tbody{
				display: contents;
			}
			& thead{
				& tr{
					height: 2.5em;
					background: var(--color);
					color: white;
				}
			}
			& tbody{
				& tr{
					height: clamp(32px, calc(48 / 768 * 100dvw), 48px);
					&:nth-child(n+2){
						border-top: 1px solid var(--color);
					}
				}
				& td{
					&:nth-child(n+2){
						border-left: 1px solid var(--color);
					}
				}
			}
			& tr{
				display: grid;
				grid-template-columns: repeat(7, 1fr);
			}
			& td{
				display: grid;
				align-items: center;
				text-align: center;
				cursor: pointer;
				&.check{
					background: color-mix(in srgb, white, var(--color-theme) 10%);
					color: var(--color-theme);
				}
				&:empty{
					background: snow;
				}
			}
		}
		&:not(.slick-slider){
			& > table,
			& > span{
				&:nth-child(n+2){
					display: none;
				}
			}
		}
		&.slick-slider{
			display: grid;
			grid-template-columns: auto 1fr auto;
			column-gap: 8px;
			margin-inline: calc(0px - clamp(8px, calc(16 / 768 * 100dvw), 16px)); 
			.slick-list{
				grid-column: 2;
				overflow: visible;
			}
			.slick-arrow{
				align-self: center;
			}
		}
		.slick-arrow{
			all: unset;
			box-sizing: border-box;
			cursor: pointer;
			position: relative;
			aspect-ratio: 1;
			width: clamp(32px, calc(48 / 768 * 100dvw), 48px);
			background: white;
			border: 1px solid currentColor;
			border-radius: 100%;
			color: inherit;
			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 24 24" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><line x1="4.83" y1="11.93" x2="19.17" y2="11.93"/><polyline points="13.3 6.14 19.17 12 13.3 17.86"/></svg>') no-repeat center / 50%;
			}
			&.slick-prev:before{
				transform: scale(-1, 1);
			}
		}
	}
	@media (max-width: 991.98px) {
		& h3{
			text-align: center;
		}
		#searchDateSelect ul{
			justify-content: center;
		}
	}
	@media (min-width: 992px) {
		grid-template-columns: auto 1fr;
		align-items: baseline;
		& h3{
			display: grid;
			grid-template-columns: auto 1fr;
			align-items: center;
			column-gap: 24px;
			align-self: center;
			&:after{
				content: "";
				min-width: 40px;
				border-top: 1px solid currentColor;
			}
		}
	}
}

#searchTheme{
	display: grid;
	align-items: center;
	grid-gap: 8px 16px;
	& h3{
		font-weight: 800;
		font-size: 14px;
		letter-spacing: 0.1em;
	}
	& ul{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		grid-gap: clamp(8px, calc(16 / 768 * 100dvw), 16px);
	}
	& li{
		display: contents;
	}
	& label{
		display: grid;
		align-items: center;
		column-gap: 0.5em;
		min-height: 32px;
		padding: 4px 16px;
		border: 1px solid currentColor;
		border-radius: 16px;
		font-weight: 800;
		font-size: 14px;
		letter-spacing: 0.2em;
		cursor: pointer;
		&:has(input:checked){
			background: var(--color);
			border-color: var(--color);
			color: white;
		}
		& input{
			display: none;
		}
	}
	@media (max-width: 991.98px) {
		& h3{
			text-align: center;
		}
		& ul{
			justify-content: center;
		}
	}
	@media (min-width: 992px) {
		grid-template-columns: auto 1fr;
		align-items: baseline;
		& h3{
			display: grid;
			grid-template-columns: 1fr auto;
			column-gap: 16px;
			align-items: center;
			&:after{
				content: "";
				width: 24px;
				height: 3px;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 3"><circle cx="1.5" cy="1.5" r="1.5" /></svg>') no-repeat center left / 3px, url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 3"><circle cx="1.5" cy="1.5" r="1.5" /></svg>') no-repeat center / 3px, url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 3"><circle cx="1.5" cy="1.5" r="1.5" /></svg>') no-repeat center right / 3px;
			}
		}
	}
}

#searchTopics{
	display: grid;
	align-items: center;
	grid-gap: 24px 48px;
	@media (min-width: 992px) {
		grid-template-columns: 1fr 360px;
		align-items: center;
	}
	#searchTopicsList{
		& ul{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			grid-gap: clamp(8px, calc(16 / 768 * 100dvw), 16px);
			& ul{
				display: contents;
			}
		}
		& li{
			display: contents;
		}
		& label{
			display: grid;
			align-items: center;
			column-gap: 0.5em;
			min-height: 32px;
			padding: 4px 16px;
			border: 1px solid currentColor;
			border-radius: 16px;
			font-weight: 800;
			font-size: 14px;
			letter-spacing: 0.2em;
			cursor: pointer;
			&:has(input:checked){
				background: var(--color);
				border-color: var(--color);
				color: white;
			}
			& input{
				display: none;
			}
		}
	}
	#searchTopicsButton{
		display: grid;
		grid-template-columns: 1fr auto;
		min-height: 48px;
		border: 1px solid currentColor;
		border-radius: 24px;
		overflow: hidden;
		& input{
			width: 100%;
			padding: 8px 24px;
		}
		& button{
			position: relative;
			display: grid;
			background: var(--color);
			aspect-ratio: 1;
			width: 48px;
			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-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><line x1="10.17" y1="10.17" x2="14.81" y2="14.81"/><circle cx="6.24" cy="6.24" r="5.05"/></svg>') no-repeat center / 16px;
		}
	}
}

#result{
	background: white;
	padding-bottom: clamp(96px, calc(120 / 768 * 100dvw), 120px);
	&{
		display: grid;
		grid-template-columns: var(--wrap);
		justify-content: center;
		#resultCurrent,
		#resultSet,
		#resultList{
			margin-top: clamp(32px, calc(48 / 768 * 100dvw), 48px);
		}
		#pagenation{
			margin-top: clamp(48px, calc(64 / 768 * 100dvw), 64px);
		}
	}
	& h2{
		display: none;
	}
	#resultCurrent{
		display: grid;
		align-items: center;
		grid-gap: 8px 24px;
		&{
			@media (max-width: 991.98px) {
				& ul{
					justify-content: center;
				}
			}
			@media (min-width: 992px) {
				grid-template-columns: auto 1fr;
				& h3{
					&:after{
						content: ":";
						margin-left: 0.5em;
					}
				}
			}
		}
		& h3{
			font-weight: 800;
			font-size: 14px;
			letter-spacing: 0.1em;
			text-align: center;
			text-wrap: balance;
		}
		& ul{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			grid-gap: 8px;
		}
		& li{
			display: contents;
			& a,
			& button{
				display: grid;
				align-items: center;
				column-gap: 0.5em;
				min-height: 32px;
				padding: 4px 16px;
				border: 1px solid transparent;
				border-radius: 16px;
				font-weight: 800;
				font-size: 14px;
				letter-spacing: 0.1em;
				&:before,
				&:after{
					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" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><line x1="12" y1="4" x2="4" y2="12"/><line x1="12" y1="12" x2="4" y2="4"/></svg>') no-repeat center / contain;
				}
			}
			& a{
				grid-template-columns: 1fr auto;
				background: #f0f5f7;
				color: inherit;
				text-decoration: none;
				&:after{
					content: "";
				}
			}
			& button{
				grid-template-columns: auto 1fr;
				border-color: inherit;
				color: #9c9c9c;
				&:before{
					content: "";
				}
			}
		}
	}
	#resultSet{
		&{
			display: grid;
			grid-gap: 8px clamp(24px, calc(56 / 768 * 100dvw), 56px);
			@media (min-width: 992px) {
				display: flex;
				flex-wrap: wrap;
				align-items: baseline;
				#resultSwitch{
					margin-left: auto;
				}
			}
		}
		#resultCount{
			display: flex;
			justify-content: center;
			align-items: baseline;
			column-gap: 0.5em;
			font-weight: 700;
			font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
			letter-spacing: 0.1em;
			text-align: center;
			& span{
				color: var(--color-theme);
				font-weight: 500;
				font-size: clamp(28px, calc(48 / 768 * 100dvw), 48px);
				font-family: 'Montserrat', var(--font);
				line-height: 1;
			}
		}
		#resultSwitch{
			font-weight: 700;
			font-size: 14px;
			letter-spacing: 0.05em;
			text-align: center;
			&{
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				grid-gap: 8px clamp(24px, calc(56 / 1366 * 100dvw), 56px);
				@media (max-width: 991.98px) {
					justify-content: center;
				}
			}
			& [lsc-lt="Order"]{
				display: none;
			}
			& li{
				cursor: pointer;
				&.select{
					pointer-events: none;
				}
			}
			@media (min-width: 992px) {
				& details{
					display: grid;
					grid-template-columns: auto 1fr;
					align-items: center;
					column-gap: 16px;
					&::details-content{
						display: contents;
					}
				}
				& ul{
					display: flex;
					min-height: 32px;
					outline: 1px solid currentColor;
					border-radius: 16px;
					overflow: hidden;
				}
				& li{
					display: grid;
					align-items: center;
					min-height: 32px;
					padding: 0 1em;
					border-radius: 16px;
					&.select{
						background: var(--color);
						color: #fff;
					}
				}
			}
			#resultSort{
				@media (max-width: 991.98px) {
					position: relative;
					height: 40px;
					z-index: 10;
					&::details-content{
						display: contents;
					}
					& summary{
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						font-size: 0;
						opacity: 0;
					}
					& ul{
						grid-column: 1;
						grid-row: 1;
						display: grid;
						height: 40px;
						background: #fff;
						border: 1px solid currentColor;
						border-radius: 20px;
						transition: height 0.2s ease-out;
						overflow: hidden;
						[open] &{
							height: auto;
						}
					}
					& li{
						display: grid;
						align-items: center;
						height: 40px;
						padding: 0 1em;
						&:not(.select){
							border-top: 1px solid currentColor;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}
						&.select{
							grid-template-columns: 1fr auto;
							align-items: center;
							column-gap: 0.5em;
							order: -1;
							&:after{
								content: "";
								aspect-ratio: 1;
								width: 14px;
								background: currentColor;
								-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><line x1="3.5" y1="2" x2="3.5" y2="12"/><polyline points="6 9.5 3.5 12 1 9.5"/><line x1="10.5" y1="12" x2="10.5" y2="2"/><polyline points="8 4.5 10.5 2 13 4.5"/></svg>') no-repeat center / contain;
							}
						}
					}
				}
				@media (min-width: 992px) {
					& li{
						min-width: 7em;
					}
				}
			}
			#resultDisplay{
				& li{
					&: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 14 14"><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 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>');
					}
					&[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"><rect x="4" y="1" width="10" height="2" rx="1" ry="1"/><rect x="4" y="6" width="10" height="2" rx="1" ry="1"/><rect x="4" y="11" width="10" height="2" rx="1" ry="1"/><rect x="0" y="1" width="2" height="2" rx="1" ry="1"/><rect x="0" y="6" width="2" height="2" rx="1" ry="1"/><rect x="0" y="11" width="2" height="2" rx="1" ry="1"/></svg>');
					}
				}
				@media (max-width: 991.98px) {
					&{
						display: grid;
						grid-template-columns: auto 1fr;
						align-items: center;
						column-gap: 8px;
						&::details-content{
							display: contents;
						}
					}
					& ul{
						display: flex;
						column-gap: 8px;
					}
					& li{
						position: relative;
						aspect-ratio: 1;
						height: 40px;
						border: 1px solid currentColor;
						border-radius: 20px;
						font-size: 0;
						&:before{
							position: absolute;
							top: 50%;
							left: 50%;
							width: 16px;
							transform: translate(-50%, -50%);
						}
						&.select{
							background: var(--color);
							color: #fff;
						}
					}
				}
				@media (min-width: 992px) {
					& li{
						grid-template-columns: auto 1fr;
						align-items: center;
						column-gap: 0.5em;
						&:before{
							width: 14px;
						}
					}
				}
			}
		}
	}
	#resultList{
		&.spotList,
		&.blogList{
			&:not(.grid):not(.line){
				display: none;
				&+#pagenation{
					visibility: hidden;
				}
			}
		}
	}
	#resultNone{
		display: grid;
		place-items: center;
		aspect-ratio: 16 / 9;
		text-align: center;
		text-wrap: balance;
	}
}

.articleList,
.spotList,
.blogList,
.topicsList{
	& section{
		position: relative;
	}
	& h3{
		font-weight: 700;
	}
	& a{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		font-size: 0;
		z-index: 1;
	}
	& figure{
		& img{
			object-fit: cover;
			border-radius: 4px;
		}
	}
}

.articleList,
.spotList,
.blogList{
	&:has([data-area]){
		& ul{
			display: flex;
			flex-wrap: wrap;
			grid-gap: 8px;
		}
		& li{
			display: grid;
			align-items: center;
			min-height: 1.66em;
			padding: 0 0.75em;
			background: silver;
			border-radius: 0.833em;
			font-weight: 700;
			font-size: clamp(8px, calc(12 / 768 * 100dvw), 12px);
			letter-spacing: 0.2em;
			text-align: center;
			&[data-area]{
				color: #fff;
			}
			&[data-area="1"]{
				background: #c1c42f;
			}
			&[data-area="2"]{
				background: #67afe1;
			}
			&[data-area="3"]{
				background: #81c2c2;
			}
			&[data-area="4"]{
				background: #555ea9;
			}
			&[data-area="5"]{
				background: #b078b0;
			}
			&[data-area="6"]{
				background: #e57897;
			}
			&[data-area="7"]{
				background: #ca7b5e;
			}
			&[data-cat="sq"]{
				order: 1;
				grid-template-columns: auto 1fr;
				column-gap: 0.5em;
				background: #f7e1f2;
				color: #d966a0;
				&:before{
					content: "";
					aspect-ratio: 1;
					width: 14px;
					margin-left: -0.25em;
					background: currentColor;
					-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10;"><line x1="7.5" y1="7.83" x2="7.5" y2="5.98"/><line x1="7.5" y1="7.83" x2="6.41" y2="9.34"/><line x1="7.5" y1="7.83" x2="9.27" y2="7.26"/><line x1="7.5" y1="7.83" x2="5.73" y2="7.26"/><line x1="7.5" y1="7.83" x2="8.59" y2="9.34"/><path d="M3.44,9.15c-.25.36-.53.84-.62,1.36-.18.99.28,1.9.28,1.9h1.07s.33,1.01.33,1.01c0,0,1.02.16,1.9-.32.46-.25.84-.66,1.1-1.01h0c.26.35.64.76,1.1,1.01.88.48,1.9.32,1.9.32l.33-1.02h1.07s.47-.92.28-1.9c-.1-.52-.37-1-.62-1.36h0c.41-.14.92-.37,1.3-.74.73-.69.89-1.71.89-1.71l-.86-.63.33-1.01s-.73-.73-1.72-.86c-.52-.07-1.07.04-1.49.17h0c0-.43-.07-.99-.3-1.47-.43-.91-1.35-1.37-1.35-1.37l-.86.63-.86-.63s-.92.47-1.35,1.37c-.23.47-.29,1.03-.3,1.47h0c-.42-.13-.97-.24-1.49-.17-.99.13-1.72.86-1.72.86l.33,1.01-.86.63s.16,1.02.89,1.71c.38.36.89.59,1.3.74h0Z" style="stroke-width: .05px;"/><path d="M3.44,9.15c-.25.36-.53.84-.62,1.36-.18.99.28,1.9.28,1.9h1.07s.33,1.01.33,1.01c0,0,1.02.16,1.9-.32.46-.25.84-.66,1.1-1.01h0c.26.35.64.76,1.1,1.01.88.48,1.9.32,1.9.32l.33-1.02h1.07s.47-.92.28-1.9c-.1-.52-.37-1-.62-1.36h0c.41-.14.92-.37,1.3-.74.73-.69.89-1.71.89-1.71l-.86-.63.33-1.01s-.73-.73-1.72-.86c-.52-.07-1.07.04-1.49.17h0c0-.43-.07-.99-.3-1.47-.43-.91-1.35-1.37-1.35-1.37l-.86.63-.86-.63s-.92.47-1.35,1.37c-.23.47-.29,1.03-.3,1.47h0c-.42-.13-.97-.24-1.49-.17-.99.13-1.72.86-1.72.86l.33,1.01-.86.63s.16,1.02.89,1.71c.38.36.89.59,1.3.74h0Z"/></svg>') no-repeat center / contain;
				}
			}
		}
	}
	& button{
		&[data-fav-id]{
			position: relative;
			aspect-ratio: 1;
			width: 48px;
			background: silver;
			background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="fill: transparent; stroke: white; stroke-width: 2.4px; stroke-linecap: round; stroke-linejoin: round;"><path d="M11.96,20.97c-.88-.83-4.3-4.22-6.03-6.17-1.79-2.03-3.54-4.25-3.54-7.24,0-2.53,2.08-4.54,4.66-4.54,2.3,0,4.16,1.25,4.93,3.51h.02c.79-2.37,2.73-3.51,4.93-3.51,2.58,0,4.66,2.01,4.66,4.54,0,2.99-1.75,5.21-3.54,7.24-1.72,1.94-5.17,5.34-6.05,6.17h-.05Z"/></svg>') no-repeat center / 24px;
			font-size: 0;
			filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
			opacity: 0;
			transition: opacity 0.2s ease-out;
			z-index: 2;
			&[data-fav-status]{
				opacity: 1;
			}
			&[data-fav-status="on"]{
				background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="fill: %23d92d1b; stroke: white; stroke-width: 2.4px; stroke-linecap: round; stroke-linejoin: round;"><path d="M11.96,20.97c-.88-.83-4.3-4.22-6.03-6.17-1.79-2.03-3.54-4.25-3.54-7.24,0-2.53,2.08-4.54,4.66-4.54,2.3,0,4.16,1.25,4.93,3.51h.02c.79-2.37,2.73-3.51,4.93-3.51,2.58,0,4.66,2.01,4.66,4.54,0,2.99-1.75,5.21-3.54,7.24-1.72,1.94-5.17,5.34-6.05,6.17h-.05Z"/></svg>');
			}
			&[data-fav-status="loading"]{
				background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="fill: none; stroke: white; stroke-width: 2.4px; stroke-linecap: round; stroke-linejoin: round;"><circle cx="12" cy="12" r="10" stroke-dasharray="48"><animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="1s" repeatCount="indefinite" /></circle></svg>');
				opacity: 0.5;
				pointer-events: none;
			}
		}
	}
}

.articleList{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
	grid-gap: 40px 32px;
	& section{
		position: relative;
		display: grid;
		grid-template-columns: calc(100% - clamp(16px, calc(32 / 768 * 100dvw), 32px));
		justify-content: center;
		grid-row-gap: clamp(8px, calc(16 / 768 * 100dvw), 16px);
		&:not(:has(figure)):before{
			content: "";
			background: var(--dummy);
			border-radius: 4px;
		}
		&:before,
		& figure img{
			aspect-ratio: 3 / 2;
		}
		&:before,
		& ul,
		& [data-fav-id],
		& figure{
			grid-column: 1;
			grid-row: 1;
		}
		&:before,
		& ul,
		& [data-fav-id],
		& figure{
			margin-inline: calc(0px - clamp(8px, calc(16 / 768 * 100dvw), 16px));
		}
		& [data-fav-id]{
			justify-self: end;
		}
	}
	& h3{
		font-weight: 700;
		font-size: clamp(16px, calc(20 / 768 * 100dvw), 20px);
		letter-spacing: 0.025em;
	}
	& h3+div{
		display: contents;
		& ul{
			align-content: start;
			padding: clamp(8px, calc(16 / 768 * 100dvw), 16px) 48px clamp(8px, calc(16 / 768 * 100dvw), 16px) clamp(8px, calc(16 / 768 * 100dvw), 16px);
			overflow: hidden;
			z-index: 1;
		}
	}
	& figure{
		display: grid;
		aspect-ratio: 3 / 2;
		overflow: hidden;
		& img{
			grid-column: 1;
			grid-row: 1;
			width: 100%;
			height: 100%;
			object-fit: cover;
			border-radius: 8px;
		}
		& figcaption{
			grid-column: 1;
			grid-row: 1;
			display: grid;
			align-content: end;
			justify-items: end;
			grid-row-gap: 8px;
			padding: clamp(8px, calc(16 / 768 * 100dvw), 16px);
			font-weight: 800;
			font-size: clamp(14px, calc(18 / 768 * 100dvw), 18px);
			letter-spacing: 0.025em;
			& span{
				display: block;
				padding: 0.25em 0.5em;
				background: white;
				border-radius: 4px;
				line-height: 1;
			}
		}
	}
	& [data-type="course"]{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 8px 24px;
		& dl{
			display: flex;
			align-items: baseline;
			column-gap: 8px;
		}
		& dt{
			aspect-ratio: 1;
			width: 16px;
			background: currentColor;
			transform: translateY(0.1em);
			overflow: hidden;
			-webkit-mask: no-repeat center / contain;
			dl:nth-child(1) &{
				-webkit-mask-image: 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;"><rect x="2.5" y="3" width="12" height="12" rx="1" ry="1"/><line x1="2.5" y1="6" x2="14.5" y2="6"/><line x1="5.5" y1="3.83" x2="5.5" y2="2"/><line x1="5.5" y1="15" x2="5.5" y2="6"/><line x1="8.5" y1="15" x2="8.5" y2="6"/><line x1="11.5" y1="3.83" x2="11.5" y2="2"/><line x1="11.5" y1="15" x2="11.5" y2="6"/><line x1="2.5" y1="9" x2="14.5" y2="9"/><line x1="2.5" y1="12" x2="14.5" y2="12"/></svg>');
			}
			&[data-icon="walk"]{
				-webkit-mask-image: 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;"><circle cx="9.44" cy="2.2" r="1.2"/><path d="M6.17,12.32l-1.44,2.22c-.24.37-.13.87.24,1.11.13.09.28.13.43.13.26,0,.52-.13.67-.37l1.53-2.36.12-.3.29-1.74,1.44,2.03.41,2.3c.07.39.41.66.79.66.05,0,.09,0,.14-.01.44-.08.72-.49.65-.93l-.45-2.48-.13-.32-1.92-2.67.33-1.97,1,1.69,1.18.85c.12.09.26.13.4.13.2,0,.41-.09.54-.27.22-.3.16-.71-.14-.93l-1.04-.83-1.51-2.62c-.26-.54-.67-.87-.9-.92-.67-.14-1.2.09-1.26.14l-1.36,7.46Z"/><path d="M7.09,6.92l-1.05.71-.21,1.03c-.06.32-.34.55-.66.55-.04,0-.08,0-.13-.01-.18-.03-.33-.13-.43-.28-.1-.15-.14-.33-.11-.51l.28-1.3c.03-.16.12-.31.26-.41l2.52-1.83"/></svg>');
			}
			&[data-icon="train"]{
				-webkit-mask-image: 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;"><path d="M5.58,1h5.84c1.15,0,2.09.94,2.09,2.09v8.36c0,.77-.62,1.39-1.39,1.39h-7.23c-.77,0-1.39-.62-1.39-1.39V3.09c0-1.15.94-2.09,2.09-2.09Z"/><path d="M11.97,3.53v4.21c0,.27-.22.49-.49.49h-5.96c-.27,0-.49-.22-.49-.49V3.53c0-.37.27-.67.61-.67h5.72c.34,0,.61.3.61.67Z"/><line x1="11.29" y1="12.84" x2="13.69" y2="16"/><line x1="5.71" y1="12.84" x2="3.31" y2="16"/><line x1="4.34" y1="14.64" x2="12.66" y2="14.64"/><path d="M12.37,10.67c0,.49-.4.89-.89.89s-.89-.4-.89-.89.4-.89.89-.89.89.4.89.89Z"/><path d="M6.42,10.67c0,.49-.4.89-.89.89s-.89-.4-.89-.89.4-.89.89-.89.89.4.89.89Z"/><line x1="7.56" y1="10.67" x2="9.44" y2="10.67"/></svg>');
			}
			&[data-icon="ship"]{
				-webkit-mask-image: 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;"><polyline points="12.98 13.41 16 7.51 11.41 7.51 9.84 8.76 1.34 8.76 2.21 12.96"/><line x1="2.05" y1="11.54" x2="13.89" y2="11.54"/><polyline points="2.38 8.73 3.49 4.83 9.47 4.83 10.14 6.31 11.53 6.31 12.16 7.4"/><polyline points="3.97 4.78 3.97 3.51 6.05 3.51 6.05 4.78"/><line x1="10.14" y1="6.31" x2="5.44" y2="6.31"/><circle cx="12.69" cy="9.47" r=".8"/><path d="M1,12.61c1.25,0,1.25.88,2.5.88s1.25-.88,2.5-.88,1.25.88,2.5.88,1.25-.88,2.5-.88,1.25.88,2.5.88,1.25-.88,2.5-.88"/></svg>');
			}
			&[data-icon="bicycle"]{
				-webkit-mask-image: 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;"><path d="M9.13,13.98l.54-3.21c.06-.34-.07-.69-.33-.91l-1.42-1.23c-.11-.09-.12-.25-.02-.35l.99-1.13c.12-.14.34-.1.41.06l.27.59c.16.35.52.58.91.58h2.23c.37,0,.67-.3.67-.67h0c0-.37-.3-.67-.67-.67h-1.85c-.1,0-.19-.06-.23-.14l-.4-.86c-.08-.17-.2-.33-.34-.45l-.86-.73c-.41-.35-1.02-.3-1.37.11l-2.2,2.55c-.38.44-.33,1.1.11,1.47l2.36,2.03c.07.06.1.14.08.23l-.42,2.49c-.07.42.21.82.64.9h0c.42.07.82-.21.9-.64Z"/><circle cx="11.19" cy="2.91" r="1.4" transform="translate(6.53 13.49) rotate(-80.81)"/><circle cx="13.5" cy="12.99" r="2.5"/><circle cx="3.5" cy="12.99" r="2.5"/></svg>');
			}
			&[data-icon="bus"]{
				-webkit-mask-image: 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;"><line x1="6.7" y1="2.66" x2="10.3" y2="2.66"/><line x1="2.6" y1="3.98" x2="14.4" y2="3.98"/><line x1="7.5" y1="12.4" x2="9.5" y2="12.4"/><path d="M12.4,14.2v.9c0,.33.27.6.6.6h.6c.33,0,.6-.27.6-.6v-1.31"/><path d="M2.8,13.79v1.31c0,.33.27.6.6.6h.6c.33,0,.6-.27.6-.6v-.9"/><path d="M4.5,12.7c-.33,0-.6-.27-.6-.6s.27-.6.6-.6h.9c.33,0,.6.27.6.6s-.27.6-.6.6h-.9Z"/><path d="M11.6,12.7c-.33,0-.6-.27-.6-.6s.27-.6.6-.6h.9c.33,0,.6.27.6.6s-.27.6-.6.6h-.9Z"/><path d="M1.6,7.3c-.33,0-.6-.27-.6-.6v-1.8c0-.33.27-.6.6-.6h.9"/><path d="M14.5,4.3h.9c.33,0,.6.27.6.6v1.8c0,.33-.27.6-.6.6"/><path d="M2.5,9.61s2.31.39,6,.39,6-.39,6-.39"/><path d="M14.5,3.38c0-.89-.65-1.65-1.53-1.78-1.02-.15-2.52-.3-4.47-.3-1.95,0-3.46.15-4.47.3-.88.13-1.53.89-1.53,1.78v9.62c0,.66.54,1.2,1.2,1.2h9.6c.66,0,1.2-.54,1.2-1.2V3.38Z"/></svg>');
			}
			&[data-icon="car"]{
				-webkit-mask-image: 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;"><path d="M13.83,6.22h1.61c.31,0,.55.26.55.58v.17c0,.28-.19.53-.46.58l-.96.17"/><line x1="14.02" y1="6.94" x2="8.5" y2="6.94"/><polygon points="4.92 12.96 8.5 12.96 14.51 12.96 4.92 12.96"/><path d="M2.49,12.96h-.02c-.63,0-1.15-.54-1.15-1.21v-2.34c0-.21.07-.42.2-.58l1.34-1.67c.05-.06.08-.13.1-.21l.8-4.06c.12-.46.51-.78.97-.78h7.52c.45,0,.85.32.97.78l.8,4.06c.02.08.05.15.1.21l1.34,1.67c.13.16.2.37.2.58v2.34c0,.67-.51,1.21-1.15,1.21h-.02"/><path d="M5.48,10.29v-.15c0-.26-.17-.49-.41-.57l-1.28-.39c-.45-.14-.91.21-.91.7v.41c0,.33.26.59.58.59h1.44c.32,0,.58-.27.58-.59Z"/><path d="M11.52,10.29v-.15c0-.26.17-.49.41-.57l1.28-.39c.45-.14.91.21.91.7v.41c0,.33-.26.59-.58.59h-1.44c-.32,0-.58-.27-.58-.59Z"/><path d="M3.17,6.22h-1.61c-.31,0-.55.26-.55.58v.17c0,.28.19.53.46.58l.96.17"/><line x1="2.98" y1="6.94" x2="8.5" y2="6.94"/><path d="M15.01,12.96v1.32c0,.34-.28.62-.62.62h-2c-.34,0-.62-.28-.62-.62v-1.32h3.23Z"/><path d="M5.23,12.96v1.32c0,.34-.28.62-.62.62h-2c-.34,0-.62-.28-.62-.62v-1.32h3.23Z"/><path d="M9.33,11.14h-1.67c-.4,0-.72-.32-.72-.72h0c0-.4.32-.72.72-.72h1.67c.4,0,.72.32.72.72h0c0,.4-.32.72-.72.72Z"/></svg>');
			}
			&[data-icon="airplane"]{
				-webkit-mask-image: 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;"><path d="M15.34,1.66c-.46-.46-1.81.16-2.27.62l-5,5c-1.55,1.55-3.02,3.36-3.02,3.36l-2.68-.39-.88.87,3.03,1.34,1.34,3.03.87-.87-.39-2.68s1.81-1.47,3.36-3.02c1.16-1.16,5-5,5-5,.46-.46,1.07-1.81.62-2.27Z"/><polyline points="10.32 5.03 2.67 3.54 1.5 4.71 8.06 7.29 8.07 7.28"/><polyline points="9.72 8.93 9.71 8.94 12.29 15.5 13.46 14.33 11.97 6.68"/></svg>');
			}
		}
		& dd{
			color: color-mix(in srgb, white, black 60%);
			font-size: 14px;
			letter-spacing: 0.025em;
		}
	}
}

.spotList{
	& section{
		position: relative;
		display: grid;
		&:not(:has(figure)):before{
			content: "";
			background: var(--dummy);
			border-radius: 4px;
		}
		&:has([data-area="1"]){
			& [data-type="spot"] h4,
			& [data-type="season"] dl{
				color: #c1c42f;
			}
		}
		&:has([data-area="2"]){
			& [data-type="spot"] h4,
			& [data-type="season"] dl{
				color: #67afe1;
			}
		}
		&:has([data-area="3"]){
			& [data-type="spot"] h4,
			& [data-type="season"] dl{
				color: #81c2c2;
			}
		}
		&:has([data-area="4"]){
			& [data-type="spot"] h4,
			& [data-type="season"] dl{
				color: #555ea9;
			}
		}
		&:has([data-area="5"]){
			& [data-type="spot"] h4,
			& [data-type="season"] dl{
				color: #b078b0;
			}
		}
		&:has([data-area="6"]){
			& [data-type="spot"] h4,
			& [data-type="season"] dl{
				color: #e57897;
			}
		}
		&:has([data-area="7"]){
			& [data-type="spot"] h4,
			& [data-type="season"] dl{
				color: #ca7b5e;
			}
		}
	}
	& h3{
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	& h3+div{
		display: contents;
		grid-row-gap: inherit;
	}
	& p{
		font-weight: 600;
		font-size: 14px;
		letter-spacing: 0.025em;
	}
	& time{
		color: color-mix(in srgb, white, black 60%);
		letter-spacing: 0.025em;
	}
	& [data-type="spot"]{
		display: grid;
		grid-row-gap: inherit;
		& h4{
			color: var(--color-theme);
			font-weight: 700;
		}
		& time{
			position: relative;
			padding-left: 1.5em;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			&:before{
				content: "";
				position: absolute;
				top: 50%;
				left: 0;
				aspect-ratio: 1;
				width: 16px;
				background: var(--color);
				transform: translateY(-50%);
				-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;"><rect x="2.5" y="3" width="12" height="12" rx="1" ry="1"/><line x1="2.5" y1="6" x2="14.5" y2="6"/><line x1="5.5" y1="3.83" x2="5.5" y2="2"/><line x1="5.5" y1="15" x2="5.5" y2="6"/><line x1="8.5" y1="15" x2="8.5" y2="6"/><line x1="11.5" y1="3.83" x2="11.5" y2="2"/><line x1="11.5" y1="15" x2="11.5" y2="6"/><line x1="2.5" y1="9" x2="14.5" y2="9"/><line x1="2.5" y1="12" x2="14.5" y2="12"/></svg>') no-repeat center / contain;
			}
		}
		& dl{
			display: grid;
			align-items: center;
			grid-gap: 8px 16px;
		}
		& dt{
			display: none;
		}
		& dd{
			position: relative;
			padding-left: 1.5em;
			color: color-mix(in srgb, white, black 60%);
			letter-spacing: 0.025em;
			&:nth-of-type(3){
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			&:before{
				content: "";
				position: absolute;
				top: 50%;
				left: 0;
				aspect-ratio: 1;
				width: 16px;
				background: var(--color);
				transform: translateY(-50%);
				-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;
			}
			&:nth-of-type(1):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" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><polyline points="4.64 12.83 5.04 10.5 2.82 9.68"/><polyline points="12.36 4.17 11.96 6.5 14.18 7.32"/><line x1="15" y1="4.75" x2="2" y2="12.25"/><polyline points="14.18 9.68 11.96 10.5 12.36 12.83"/><polyline points="2.82 7.32 5.04 6.5 4.64 4.17"/><line x1="2" y1="4.75" x2="15" y2="12.25"/><polyline points="6.68 2.99 8.5 4.51 10.32 2.99"/><polyline points="10.32 14.01 8.5 12.49 6.68 14.01"/><line x1="8.5" y1="16" x2="8.5" y2="1"/></svg>');
			}
			&:nth-of-type(2):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" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><path d="M7.5,6.89l-.91-1.12c-.36-.76-1.45-.76-1.81,0l-3.78,6.89"/><polyline points="9.43 7.62 10.96 9.79 14.29 9.79"/><path d="M5.16,9.79h.79l3.37-6.31c.36-.76,1.45-.76,1.81,0l4.87,9.18"/></svg>');
			}
			&:nth-of-type(3):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" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><rect x="2.5" y="3" width="12" height="12" rx="1" ry="1"/><line x1="2.5" y1="6" x2="14.5" y2="6"/><line x1="5.5" y1="3.83" x2="5.5" y2="2"/><line x1="5.5" y1="15" x2="5.5" y2="6"/><line x1="8.5" y1="15" x2="8.5" y2="6"/><line x1="11.5" y1="3.83" x2="11.5" y2="2"/><line x1="11.5" y1="15" x2="11.5" y2="6"/><line x1="2.5" y1="9" x2="14.5" y2="9"/><line x1="2.5" y1="12" x2="14.5" y2="12"/></svg>');
			}
		}
	}
	& [data-type="season"]{
		display: grid;
		grid-row-gap: inherit;
		& dl{
			order: -1;
			color: var(--color-theme);
			font-weight: 700;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
		& dt{
			display: contents;
			&:after{
				content: " : ";
			}
		}
		& dd{
			display: contents;
			&:nth-of-type(1):after{
				content: " ／ ";
			}
		}
		& time{
			font-size: 12px;
			letter-spacing: 0.025em;
		}
	}
	&.grid{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 16px), 272px), 1fr));
		grid-gap: 40px 16px;
		& section{
			grid-template-columns: calc(100% - 16px);
			justify-content: center;
			grid-row-gap: 8px;
			align-content: start;
			&:before,
			& ul,
			& figure img{
				aspect-ratio: 1;
			}
			&:before,
			& ul,
			& [data-fav-id],
			& figure{
				grid-column: 1;
				grid-row: 1;
				margin-inline: -8px;
			}
			& ul{
				place-content: end;
				padding: 48px 8px 8px 8px;
				overflow: hidden;
				z-index: 1;
			}
			& [data-fav-id]{
				justify-self: end;
			}
		}
		& [data-type="spot"]{
			& h4{
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				max-height: calc(1.65em * 2);
				overflow: hidden;
				font-size: 14px;
			}
			& p{
				display: none;
			}
			& time{
				order: -1;
				font-size: 13px;
			}
			& dl{
				grid-template-columns: auto 1fr;
				& dd:nth-child(3){
					grid-column: 1 / 3;
				}
			}
			& dd{
				font-size: 14px;
			}
		}
		& [data-type="season"]{
			& dl{
				font-size: 14px;
			}
		}
	}
	&.line{
		display: grid;
		grid-row-gap: 16px;
		& section{
			grid-row-gap: 8px;
			&:before,
			& figure img{
				aspect-ratio: 3 / 2;
			}
			& [data-fav-id]{
				justify-self: end;
			}
			@media (max-width: 575.98px) {
				grid-template-columns: calc(100% - 16px);
				justify-content: center;
				align-content: start;
				&:before,
				& ul,
				& [data-fav-id],
				& figure{
					grid-column: 1;
					grid-row: 1;
					margin-inline: -8px;
				}
				& ul{
					aspect-ratio: 3 / 2;
					place-content: end;
					padding: 48px 8px 8px 8px;
					overflow: hidden;
					z-index: 1;
				}
				& [data-type="spot"]{
					& dl{
						grid-template-columns: auto 1fr;
						& dd:nth-child(3){
							grid-column: 1 / 3;
						}
					}
				}
			}
			@media (min-width: 576px) {
				grid-template-columns: clamp(240px, calc(360 / 992 * 100dvw), 360px) 1fr;
				grid-template-rows: auto auto 1fr;
				column-gap: clamp(16px, calc(48 / 992 * 100dvw), 48px);
				&:before,
				& [data-fav-id],
				& figure{
					grid-column: 1;
					grid-row: 1 / 5;
				}
				& h3{
					grid-row: 2;
					margin-top: 8px;
				}
				& ul{
					grid-row: 1;
					margin-top: 16px;
				}
				& [data-type="spot"]{
					& time{
						grid-row: 2;
					}
					& dl{
						grid-template-columns: auto auto 1fr;
					}
				}
			}
		}
		& h3{
			font-size: clamp(18px, calc(20 / 768 * 100dvw), 20px);
		}
		& [data-type="spot"]{
			& p{
				order: 1;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				max-height: calc(1.65em * 3);
				overflow: hidden;
				font-size: 14px;
			}
			& time{
				font-size: 14px;
			}
			& dd{
				font-size: 14px;
			}
		}
	}
}

.blogList{
	& section{
		position: relative;
		display: grid;
		&:not(:has(figure)):before{
			content: "";
			aspect-ratio: 3 / 2;
			background: var(--dummy);
			border-radius: 4px;
		}
		&:before,
		& figure img{
			aspect-ratio: 3 / 2;
		}
	}
	& h3+div{
		display: contents;
		grid-row-gap: inherit;
	}
	& p{
		color: color-mix(in srgb, white, black 60%);
		font-weight: 600;
		font-size: 14px;
		letter-spacing: 0.025em;
	}
	& [data-type="data"]{
		& time{
			position: relative;
			padding-left: 1.5em;
			color: color-mix(in srgb, white, black 60%);
			font-size: 13px;
			letter-spacing: 0.025em;
			&:before{
				content: "";
				position: absolute;
				top: 50%;
				left: 0;
				aspect-ratio: 1;
				width: 16px;
				background: var(--color);
				transform: translateY(-50%);
				-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;"><rect x="2.5" y="3" width="12" height="12" rx="1" ry="1"/><line x1="2.5" y1="6" x2="14.5" y2="6"/><line x1="5.5" y1="3.83" x2="5.5" y2="2"/><line x1="5.5" y1="15" x2="5.5" y2="6"/><line x1="8.5" y1="15" x2="8.5" y2="6"/><line x1="11.5" y1="3.83" x2="11.5" y2="2"/><line x1="11.5" y1="15" x2="11.5" y2="6"/><line x1="2.5" y1="9" x2="14.5" y2="9"/><line x1="2.5" y1="12" x2="14.5" y2="12"/></svg>') no-repeat center / contain;
			}
		}
		& i{
			position: relative;
			padding-left: 1.5em;
			color: color-mix(in srgb, white, black 60%);
			font-size: 13px;
			font-style: normal;
			letter-spacing: 0.025em;
			&:before{
				content: "";
				position: absolute;
				top: 50%;
				left: 0;
				aspect-ratio: 1;
				width: 16px;
				background: var(--color);
				transform: translateY(-50%);
				-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;"><path d="M8.5,3.75c-3.15,0-5.86,1.94-7.12,4.75,1.27,2.81,3.98,4.75,7.12,4.75s5.86-1.94,7.12-4.75c-1.27-2.81-3.98-4.75-7.12-4.75Z"/><line x1="8.5" y1="3.75" x2="8.5" y2="2"/><line x1="3.96" y1="3" x2="5.04" y2="4.42"/><line x1="13.04" y1="3" x2="11.96" y2="4.42"/><circle cx="8.5" cy="8.5" r="2.8"/></svg>') no-repeat center / contain;
			}
		}
		& dl{
			display: grid;
			grid-template-columns: 32px 1fr;
			align-items: center;
			grid-gap: 8px;
			&:not(:has(img)):before{
				content: "";
				aspect-ratio: 1;
				background: #e6e6e6;
				background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="fill: %23f7f7f7;"><circle cx="16" cy="12.5" r="5.5"/><path d="M5.05,32h21.9c-.51-5.61-5.21-10-10.95-10s-10.44,4.39-10.95,10Z"/></svg>') no-repeat center / cover, #e6e6e6;
				border-radius: 100%;
			}
		}
		& dt{
			order: 1;
			font-weight: 700;
			font-size: 14px;
		}
		& dd{
			& img{
				aspect-ratio: 1;
				object-fit: cover;
				border-radius: 100%;
			}
		}
	}
	&.grid{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
		grid-gap: 40px clamp(16px, calc(32 / 768 * 100dvw), 32px);
		& section{
			grid-template-columns: calc(100% - 16px);
			justify-content: center;
			align-content: start;
			grid-row-gap: clamp(8px, calc(16 / 768 * 100dvw), 16px);
			&:before,
			& ul,
			& [data-fav-id],
			& figure{
				grid-column: 1;
				grid-row: 1;
				margin-inline: -8px;
			}
			& ul{
				place-content: end;
				aspect-ratio: 3 / 2;
				padding: 48px 8px 8px 8px;
				overflow: hidden;
				z-index: 1;
			}
			& [data-fav-id]{
				justify-self: end;
			}
		}
		& h3{
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			max-height: calc(1.65em * 3);
			overflow: hidden;
		}
		& p{
			display: none;
		}
		& li{
			&[data-cat]{
				display: none;
			}
		}
		& [data-type="data"]{
			display: grid;
			grid-template-columns: auto auto;
			grid-gap: clamp(8px, calc(16 / 768 * 100dvw), 16px);
			& dl{
				grid-row: 1;
				grid-column: 1 / 3;
			}
		}
	}
	&.line{
		display: grid;
		grid-row-gap: 16px;
		& section{
			grid-row-gap: 8px;
			& [data-fav-id]{
				justify-self: end;
			}
			@media (max-width: 575.98px) {
				grid-template-columns: calc(100% - 16px);
				justify-content: center;
				align-content: start;
				&:before,
				& [data-fav-id],
				& figure{
					grid-column: 1;
					grid-row: 1;
					margin-inline: -8px;
				}
				& ul{
					grid-column: 1;
					grid-row: 1;
					place-content: end;
					aspect-ratio: 3 / 2;
					padding: 48px 0 8px 0;
					overflow: hidden;
					z-index: 1;
				}
				& li{
					&[data-cat]{
						display: none;
					}
				}
			}
			@media (min-width: 576px) {
				grid-template-columns: clamp(240px, calc(360 / 992 * 100dvw), 360px) 1fr;
				grid-template-rows: auto auto auto 1fr;
				column-gap: clamp(16px, calc(48 / 992 * 100dvw), 48px);
				&:before,
				& [data-fav-id],
				& figure{
					grid-column: 1;
					grid-row: 1 / 5;
				}
				& h3{
					margin-top: 8px;
				}
				& ul{
					grid-row: 1;
					margin-top: 16px;
				}
			}
		}
		& h3{
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			max-height: calc(1.65em * 2);
			overflow: hidden;
			font-size: clamp(18px, calc(20 / 768 * 100dvw), 20px);
		}
		& p{
			order: 1;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			max-height: calc(1.65em * 3);
			overflow: hidden;
			font-size: 14px;
		}
		& [data-type="data"]{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			grid-gap: 8px clamp(24px, calc(40 / 768 * 100dvw), 40px);
		}
	}
}

.topicsList{
	& section{
		display: grid;
		grid-gap: 4px clamp(16px, calc(24 / 768 * 100dvw), 24px);
		&:nth-child(n+2){
			margin-top: clamp(16px, calc(24 / 768 * 100dvw), 24px);
			padding-top: clamp(16px, calc(24 / 768 * 100dvw), 24px);
			border-top: 1px solid color-mix(in srgb, white, black 15%);
		}
		&:has(figure){
			grid-template-columns: 1fr auto;
			& h3+div{
				align-self: end;
			}
		}
		& figure{
			grid-column: 2;
			grid-row: 1 / 3;
			width: clamp(96px, calc(144 / 768 * 100dvw), 144px);
		}
	}
	& h3{
		order: 1;
		margin-top: 4px;
		letter-spacing: 0.025em;
		@media (max-width: 767.98px) {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			max-height: calc(1.65em * 2);
			overflow: hidden;
		}
		@media (min-width: 768px) {
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	}
	& h3+div{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		grid-gap: 4px 8px;
	}
	& time{
		margin-right: 8px;
		color: #666;
		font-weight: 600;
		font-size: 14px;
		font-family: 'Montserrat', var(--font);
		letter-spacing: 0.05em;
	}
	& ul{
		display: contents;
		&:empty{
			display: none;
		}
		&[data-type="category"]{
			& li{
				display: grid;
				align-items: center;
				padding: 0 10px;
				background: var(--color);
				border-radius: 10px;
				color: white;
				font-weight: 700;
				font-size: 12px;
				letter-spacing: 0.2em;
				text-align: center;
			}
		}
		&[data-type="user"]{
			& li{
				display: grid;
				align-items: center;
				padding: 0 10px;
				border: 1px solid color-mix(in srgb, white, black 13%);
				border-radius: 10px;
				font-weight: 700;
				font-size: 12px;
				letter-spacing: 0.2em;
				text-align: center;
			}
		}
		&[data-type="tag"]{
			& li{
				color: var(--color-theme);
				font-weight: 800;
				font-family: 'Montserrat', var(--font);
				letter-spacing: 0.025em;
			}
		}
	}
	& figure{
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 4px;
		}
	}
}

.jalanList{
	&{
		display: grid;
		grid-gap: clamp(24px, calc(40 / 768 * 100dvw), 40px);
	}
	&:not(:has(section)){
		display: none;
	}
	& section{
		padding: clamp(16px, calc(40 / 768 * 100dvw), 40px);
		border: 1px solid color-mix(in srgb, transparent, black 15%);
		border-radius: clamp(8px, calc(24 / 768 * 100dvw), 24px);
		&{
			display: grid;
			grid-gap: 8px;
			.summary{
				display: contents;
				& ul{
					grid-row: 1;
				}
				& dl{
					grid-row: 3;
				}
			}
			.plan,
			.link{
				margin-top: 16px;
			}
		}
		& h3{
			font-weight: 700;
			font-size: clamp(18px, calc(20 / 768 * 100dvw), 20px);
		}
		.summary{
			& p{
				font-weight: 600;
			}
			& ul{
				display: flex;
				flex-wrap: wrap;
				grid-gap: 8px;
			}
			& li{
				display: grid;
				align-items: center;
				min-height: 1.66em;
				padding: 0 0.75em;
				border: 1px solid currentColor;
				border-radius: 0.833em;
				font-weight: 700;
				font-size: clamp(8px, calc(12 / 768 * 100dvw), 12px);
				letter-spacing: 0.2em;
				text-align: center;
			}
			& dl{
				display: flex;
				flex-wrap: wrap;
				grid-gap: 8px 16px;
			}
			& dt{
				display: none;
			}
			& dd{
				display: grid;
				grid-template-columns: auto 1fr;
				column-gap: 8px;
				&:before{
					content: "";
					aspect-ratio: 1;
					width: 16px;
					background: currentColor;
					transform: translateY(calc(0.825em - 50%));
					-webkit-mask: no-repeat center / contain;
				}
				&:nth-of-type(1){
					&:before{
						background: #e8a500;
						-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 1 26 28"><path d="M26 10.109c0 0.281-0.203 0.547-0.406 0.75l-5.672 5.531 1.344 7.812c0.016 0.109 0.016 0.203 0.016 0.313 0 0.406-0.187 0.781-0.641 0.781-0.219 0-0.438-0.078-0.625-0.187l-7.016-3.687-7.016 3.687c-0.203 0.109-0.406 0.187-0.625 0.187-0.453 0-0.656-0.375-0.656-0.781 0-0.109 0.016-0.203 0.031-0.313l1.344-7.812-5.688-5.531c-0.187-0.203-0.391-0.469-0.391-0.75 0-0.469 0.484-0.656 0.875-0.719l7.844-1.141 3.516-7.109c0.141-0.297 0.406-0.641 0.766-0.641s0.625 0.344 0.766 0.641l3.516 7.109 7.844 1.141c0.375 0.063 0.875 0.25 0.875 0.719z"></path></svg>');
					}
				}
				&:nth-of-type(2){
					&:before{
						background: #ccc;
						-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 2 28 28"><path d="M28 14c0 5.531-6.266 10-14 10-0.766 0-1.531-0.047-2.266-0.125-2.047 1.813-4.484 3.094-7.187 3.781-0.562 0.156-1.172 0.266-1.781 0.344-0.344 0.031-0.672-0.219-0.75-0.594v-0.016c-0.078-0.391 0.187-0.625 0.422-0.906 0.984-1.109 2.109-2.047 2.844-4.656-3.219-1.828-5.281-4.656-5.281-7.828 0-5.516 6.266-10 14-10s14 4.469 14 10z"></path></svg>');
					}
				}
			}
		}
		.plan{
			&{
				display: grid;
				grid-row-gap: clamp(16px, calc(32 / 768 * 100dvw), 32px);
			}
			& dl{
				& {
					display: grid;
					grid-gap: 8px clamp(16px, calc(32 / 992 * 100dvw), 32px);
					&:before,
					& dd:has(img){
						grid-column: 1;
						grid-row: 2;
					}
					@media (min-width: 576px) {
						grid-template-columns: auto 1fr;
						grid-template-rows: auto 1fr;
						&:before,
						& dd:has(img){
							grid-column: 1;
							grid-row: 1 / 3;
							width: clamp(200px, calc(280 / 1366 * 100dvw), 280px);
						}
					}
				}
				&:not(:has(img)):before{
					content: "";
					aspect-ratio: 3 / 2;
					background: var(--dummy);
					border-radius: clamp(4px, calc(8 / 768 * 100dvw), 8px);
				}
			}
			& dt{
				color: var(--color-theme);
				font-weight: 700;
				font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
				& a{
					display: block;
					text-decoration: none;
				}
			}
			& dd{
				&:not(:has(img)){
					font-weight: 600;
					font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
				}
				&:has(img){
					& img{
						aspect-ratio: 3 / 2;
						object-fit: cover;
						border-radius: clamp(4px, calc(8 / 768 * 100dvw), 8px);
					}
				}
			}
		}
		.link{
			display: flex;
			justify-content: center;
			& a{
				display: grid;
				align-items: center;
				min-width: min(100%, 280px);
				min-height: 48px;
				padding: 8px 24px;
				background: var(--color-theme);
				border-radius: 24px;
				color: white;
				font-weight: 800;
				font-size: 14px;
				letter-spacing: 0.05em;
				text-align: center;
				text-decoration: none;
			}
		}
	}
}