/* CSS Document */

#main{
	margin-bottom: clamp(48px, calc(64 / 1200 * 100vw), 64px);
}

#feature,
#spot,
#festival{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	grid-row-gap: clamp(24px, calc(32 / 1200 * 100vw), 32px);
	padding: clamp(32px, calc(64 / 1200 * 100vw), 64px) 0;
	&>*{
		grid-column: 2;
	}
	& h2{
		justify-self: center;
		display: grid;
		grid-template-columns: 1.75em auto;
		justify-content: center;
		column-gap: 1.5em;
		align-items: center;
		padding-bottom: 8px;
		border-bottom: 4px dotted currentColor;
		font-weight: 700;
		font-size: clamp(20px, calc(28 / 1200 * 100vw), 28px);
		font-family: fot-tsukuardgothic-std, var(--font);
		letter-spacing: 0.1em;
		&:before,
		&:after{
			content: "";
			grid-column: 1;
			grid-row: 1;
			aspect-ratio: 1;
			background: currentColor;
		}
		&:before{
			transform: translateX(50%);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d=""/></svg>') no-repeat center / contain;
		}
		&:after{
			transform: translateY(-20%);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M9.51,20,1.25,16.58a.91.91,0,0,0-.7,1.67l8.27,3.44a1.09,1.09,0,0,0,.35.07A.9.9,0,0,0,10,21.2.91.91,0,0,0,9.51,20ZM8.12,23.89,1.4,22.39A.9.9,0,0,0,1,24.15l6.72,1.5.2,0a.9.9,0,0,0,.19-1.78Zm3.44-7.43L5.75,12.75a.9.9,0,1,0-1,1.51L10.59,18a1,1,0,0,0,.48.14.9.9,0,0,0,.49-1.66ZM13.14,5.17a.9.9,0,1,0-1.43,1.1l4.18,5.47a.91.91,0,0,0,.72.35.9.9,0,0,0,.71-1.45Zm-5.64,2A.9.9,0,1,0,6.28,8.53l6.6,6.07a.93.93,0,0,0,.61.23.91.91,0,0,0,.66-.29.9.9,0,0,0-.05-1.27Zm17.31,0L22.74.63A.9.9,0,0,0,21,1.17l2.07,6.57a.89.89,0,0,0,.86.63.84.84,0,0,0,.27,0A.91.91,0,0,0,24.81,7.2ZM16.75.62A.89.89,0,0,0,15.54.23a.9.9,0,0,0-.39,1.22l4.13,8a.89.89,0,0,0,.8.48.86.86,0,0,0,.41-.1.91.91,0,0,0,.39-1.21Z"/></svg>') no-repeat center / contain;
		}
	}
	& h2+div{
		text-align: center;
		text-wrap: balance;
	}
	#pickup{
		grid-column: 1 / 4;
		@media (min-width: 576px) {
			grid-column: 2;
		}
	}
}

#feature h2:before{
	-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path d="M4.59,12.08V13.3a12.84,12.84,0,0,1,5-.94,12.58,12.58,0,0,1,5.21,1V12.16a14.27,14.27,0,0,0-5.21-.92A14.52,14.52,0,0,0,4.59,12.08Zm0,4.18v1.21a12.89,12.89,0,0,1,5-.95,12.77,12.77,0,0,1,5.21,1V16.33a14.3,14.3,0,0,0-5.21-.93A14.3,14.3,0,0,0,4.58,16.26Zm0,4.17v1.22a12.55,12.55,0,0,1,5-1,12.61,12.61,0,0,1,5.21,1V20.49a14.52,14.52,0,0,0-5.21-.92A14.36,14.36,0,0,0,4.57,20.43Zm16.61.07v1.22a12.79,12.79,0,0,1,5.22-1,12.82,12.82,0,0,1,5,.94V20.42a14.42,14.42,0,0,0-5-.85A14.3,14.3,0,0,0,21.18,20.5Zm0-8.34v1.22a12.58,12.58,0,0,1,5.21-1,12.89,12.89,0,0,1,5,.94V12.09a14.36,14.36,0,0,0-5-.85A14.31,14.31,0,0,0,21.18,12.16Zm11.65-5A14.29,14.29,0,0,0,26.39,5.7a15,15,0,0,0-5.48,1l-.07,0c-.31.12-.6.26-.88.4a7.09,7.09,0,0,0-2,1.45,7.09,7.09,0,0,0-2-1.45,9.14,9.14,0,0,0-1-.44l-.08,0A15.12,15.12,0,0,0,9.61,5.7,14.29,14.29,0,0,0,3.17,7.11c-2,1-3.09,2.51-3.09,4.15V26.89a1.29,1.29,0,0,0,1.28,1.29H4.31a1.26,1.26,0,0,0,.51-.11,12.4,12.4,0,0,1,4.79-.89c3.3,0,5.93,1.1,6.78,2.3l.07.09a2,2,0,0,0,3.08,0l.07-.09c.85-1.2,3.48-2.3,6.78-2.3a12.42,12.42,0,0,1,4.8.89,1.26,1.26,0,0,0,.51.11h2.94a1.28,1.28,0,0,0,1.28-1.29V11.26C35.92,9.62,34.82,8.15,32.83,7.11ZM16.69,25.36c-.2-.13-.42-.25-.65-.37a12.87,12.87,0,0,0-3.82-1.21,17.14,17.14,0,0,0-2.61-.2,16.91,16.91,0,0,0-2.5.18A12.74,12.74,0,0,0,3.17,25c-.23.12-.45.24-.65.37V11.26c0-.75.78-1.54,2.08-2.14a12.25,12.25,0,0,1,5-1,12,12,0,0,1,5.21,1.08c1.18.59,1.87,1.34,1.87,2Zm16.79,0c-.2-.13-.42-.25-.65-.37a12.17,12.17,0,0,0-3.51-1.15,16.38,16.38,0,0,0-2.93-.26,16.14,16.14,0,0,0-2.81.24A12.41,12.41,0,0,0,20,25c-.23.12-.45.24-.65.37V11.26c0-.71.69-1.45,1.87-2a12,12,0,0,1,5.21-1.08,12.2,12.2,0,0,1,5.05,1c1.28.59,2,1.38,2,2.12Zm-12.3-9v1.22a12.74,12.74,0,0,1,5.21-1,12.84,12.84,0,0,1,5,.94V16.25a14.48,14.48,0,0,0-5-.85A14.3,14.3,0,0,0,21.18,16.33Z"/></svg>');
}

#spot h2:before{
	-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path d="M3.63,12.52V28.19a2,2,0,0,0,2,2H8V10.56H5.59A2,2,0,0,0,3.63,12.52ZM13.7,14.34a.49.49,0,1,0,.7,0A.5.5,0,0,0,13.7,14.34Zm16.71-3.78H28V30.15h2.45a2,2,0,0,0,2-2V12.52A2,2,0,0,0,30.41,10.56ZM23.53,7.45a1.6,1.6,0,0,0-1.6-1.6H14.07a1.6,1.6,0,0,0-1.6,1.6v3.11H10V30.15H26V10.56H23.53ZM19.66,17.87,17.23,20.3a.65.65,0,0,1-.93,0l-3.76-3.76a.66.66,0,0,1-.19-.46V13.65A.67.67,0,0,1,13,13h2.42a.65.65,0,0,1,.47.2L19.66,17A.66.66,0,0,1,19.66,17.87Zm1.91-7.31H14.43V7.81h7.14Z"/></svg>');
}

#festival h2:before{
	-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path d="M18.43,10.9V8.63h.11a5.53,5.53,0,0,0,.82-.07,4.49,4.49,0,0,0,.8-.21,8.16,8.16,0,0,0,1-.46c.27-.13.45-.24.46-.24L22.84,7l-1.37-.1-.93-.07a6.46,6.46,0,0,1-.71-.13,11,11,0,0,1-1.14-.36l-.38-.14-.11,0,0,0h0l-.59-.24V10.9c-3.73,3.94-6.19,4.78-8.16,6H26.59C24.62,15.68,22.16,14.84,18.43,10.9ZM27.07,18H8.93C8.57,20.46,7,26.54,6,30.15h5.16s1.52-.94,2.12-6.53c0,0,2.85.11,4.76-3.34,1.91,3.45,4.76,3.34,4.76,3.34.6,5.59,2.12,6.53,2.12,6.53H30C29,26.54,27.43,20.46,27.07,18Z"/></svg>');
}

#pickup{
	display: grid;
	& dl{
		display: grid;
		&:nth-child(n+2){
			display: none;
		}
		&>*{
			grid-column: 1;
			grid-row: 1;
		}
	}
	& dt{
		align-self: end;
		width: 100%;
		padding: 0.75em 1.5em;
		background: rgba(0, 0, 0, 0.7);
		color: #fff;
		text-align: center;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		pointer-events: none;
		z-index: 1;
		&:empty{
			display: none;
		}
	}
	& dd{
		& a{
			display: block;
		}
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			@media (min-width: 576px) {
				aspect-ratio: 2 / 1;
			}
			@media (min-width: 992px) {
				aspect-ratio: 3 / 1;
			}
		}
	}
	&.slick-slider{
		position: relative;
	}
	.slick-arrow{
		all: unset;
		box-sizing: border-box;
		position: absolute;
		top: 50%;
		aspect-ratio: 1;
		width: clamp(32px, calc(48 / 1200 * 100vw), 48px);
		background: var(--color);
		border-radius: 100%;
		color: #fff;
		font-size: 0;
		transform: translateY(-50%);
		cursor: pointer;
		z-index: 1;
		&:before{
			content: "";
			position: absolute;
			top: 25%;
			left: 25%;
			width: 50%;
			height: 50%;
			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: white; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="6 2 12 8 6 14"/></svg>') no-repeat center / contain;
		}
	}
	.slick-prev{
		left: clamp(8px, calc(24 / 1200 * 100vw), 24px);
		&:before{
			transform: scale(-1, 1);
		}
	}
	.slick-next{
		right: clamp(8px, calc(24 / 1200 * 100vw), 24px);
	}
}

#search{
	position: relative;
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	padding: clamp(32px, calc(48 / 1200 * 100vw), 48px) 0 clamp(24px, calc(32 / 1200 * 100vw), 32px) 0;
	background: #F8F1E7 url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.1" viewBox="0 0 30 30"><rect fill="rgba(255,255,255,0.3)" x="0" y="0" width="10" height="30"/></svg>') center top / 10px 10px;
	&:before{
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		width: clamp(24px, calc(32 / 1200 * 100vw), 32px);
		aspect-ratio: 1;
		background: #fff;
		transform: translateX(-50%);
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><polyline points="0 0 48 0 24 24"/></svg>') no-repeat center / contain;
		}
	&>*{
		grid-column: 2;
	}
	& h2{
		display: flex;
		align-items: center;
		justify-content: center;
		column-gap: 1em;
		margin-bottom: clamp(16px, calc(24 / 1200 * 100vw), 24px);
		letter-spacing: 0.05em;
		&:before,
		&:after{
			content: "";
			width: 1em;
			border-bottom: 1px solid currentColor;
		}
	}
	#searchCurrent{
		grid-column: 1 / 4;
		transform: translateY(clamp(24px, calc(32 / 1200 * 100vw), 32px));
	}
	@media (max-width: 991.98px) {
		#searchMenu,
		#searchMenu ul,
		#searchDetail{
			display: contents;
		}
		#searchMenu li{
			grid-column: 2;
			&:nth-child(n+2){
				margin-top: 16px;
			}
		}
		#searchDetail section{
			grid-column: 2;
		}
		#searchMenu li,
		#searchDetail section{
			order: 6;
			&:nth-child(1){
				order: 1;
			}
			&:nth-child(2){
				order: 2;
			}
			&:nth-child(3){
				order: 3;
			}
			&:nth-child(4){
				order: 4;
			}
			&:nth-child(5){
				order: 5;
			}
		}
		#searchCurrent{
			order: 10;
		}
	}
}

#searchMenu{
	& ul{
		display: grid;
		grid-gap: 8px 16px;
		@media (min-width: 992px) {
			grid-template-columns: repeat(2, 1fr);
			&:has(li:nth-child(3)){
				grid-template-columns: repeat(3, 1fr);
			}
			&:has(li:nth-child(4)){
				grid-template-columns: repeat(4, 1fr);
			}
			&:has(li:nth-child(5)){
				grid-template-columns: repeat(5, 1fr);
			}
		}
	}
	& li{
		&:not(:has(input)){
			display: grid;
			grid-template-columns: 1fr 16px;
			align-items: center;
			column-gap: 8px;
			padding: 8px 16px 8px 24px;
			background: #fff;
			border: 1px solid var(--color-theme);
			border-radius: 24px;
			cursor: pointer;
			&:after{
				content: "";
				aspect-ratio: 1;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="1 5 8 12 15 5"/></svg>') no-repeat center / contain;
			}
			&.select{
				background: #F7FCEB;
				border-width: 2px;
				color: var(--color-theme);
				&:after{
					transform: scale(1, -1);
				}
				@media (max-width: 991.98px) {
					border-bottom-width: 0;
					border-radius: 24px 24px 0 0;
				}
			}
		}
		&:has(input){
			display: grid;
			grid-template-columns: calc(100% - 48px) 48px;
			background: #fff;
			border-radius: 24px;
			overflow: hidden;
		}
		& input{
			all: unset;
			box-sizing: border-box;
			padding: 8px 16px 8px 24px;
			color: inherit;
			font: inherit;
		}
		& button{
			all: unset;
			box-sizing: border-box;
			aspect-ratio: 1;
			width: 48px;
			background: var(--color-theme) 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: white; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><circle cx="7" cy="7" r="4"/><polyline points="10 10 13 13"/></svg>') no-repeat center / 24px;
			border-radius: 24px;
			font-size: 0;
		}
	}
}

#searchDetail{
	position: relative;
	& section{
		background: #fff;
		border: 2px solid var(--color-theme);
		border-radius: 24px;
		padding: clamp(24px, calc(32 / 1200 * 100vw), 32px);
		@media (max-width: 991.98px) {
			border-radius: 0 0 24px 24px;
		}
		@media (min-width: 992px) {
			position: absolute;
			top: 16px;
			left: 0;
			width: 100%;
			max-height: min(80svh, 480px);
			overflow-y: auto;
			z-index: 10;
		}
	}
	& h3{
		display: none;
	}
	& h3+div{
		& ul{
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(min(100%, 192px), 1fr));
			grid-gap: 8px 24px;
			margin-right: 24px;
			& ul{
				grid-template-columns: 1fr;
				margin: 8px 0 8px 24px;
			}
		}
	}
	& div{
		&:has(.doSearch){
			display: grid;
			justify-items: center;
			grid-gap: 16px;
			margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
		}
	}
	.doSearch,
	.doClear{
		all: unset;
		display: grid;
		align-items: center;
		box-sizing: border-box;
		min-height: 48px;
		padding: 8px 16px;
		border-radius: 24px;
		font-weight: 700;
		text-align: center;
		letter-spacing: 0.05em;
		cursor: pointer;
	}
	.doSearch{
		grid-template-columns: 1fr 24px;
		column-gap: 8px;
		min-width: min(100%, 480px);
		background: var(--color-theme);
		color: #fff;
		&:after{
			content: "";
			aspect-ratio: 1;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><circle cx="7" cy="7" r="4"/><polyline points="10 10 13 13"/></svg>') no-repeat center / contain;
		}
	}
	.doClear{
		min-width: min(80%, 192px);
		border: 1px solid currentColor;
		color: inherit;
	}
	.close{
		all: unset;
		box-sizing: border-box;
		position: absolute;
		top: 0;
		right: 0;
		aspect-ratio: 1;
		width: 48px;
		background: currentColor;
		cursor: pointer;
		z-index: 1;
		-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: white; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="3 3 13 13"/><polyline points="13 3 3 13"/></svg>') no-repeat center / 16px;
		@media (max-width: 991.98px) {
			display: none;
		}
	}
}

#searchDate{
	max-height: unset !important;
	overflow: hidden;
	& table{
		display: grid;
		width: 100%;
		&:nth-child(n+2){
			display: none;
		}
	}
	& caption{
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: baseline;
		column-gap: 8px;
		padding: 0.5em 0.75em;
		background: var(--color-theme);
		color: #fff;
		font-weight: 700;
		& span{
			font-size: clamp(12px, calc(14 / 1200 * 100vw), 14px);
		}
	}
	& thead,
	& tbody{
		display: block;
		border: 1px solid var(--color-theme);
	}
	& thead{
		background: var(--color-theme);
		color: #fff;
		font-size: clamp(12px, calc(14 / 1200 * 100vw), 14px);
	}
	& tbody{
		font-size: clamp(14px, calc(16 / 1200 * 100vw), 16px);
	}
	& tr{
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		&:nth-child(n+2){
			border-top: 1px solid var(--color-theme);
		}
	}
	& td{
		display: grid;
		align-items: center;
		padding: 0.5em 0.25em;
		text-align: center;
		cursor: pointer;
		&:nth-child(n+2){
			border-left: 1px solid var(--color-theme);
		}
		&.check{
			background: #F7FCEB;
			color: #89BD1F;
		}
	}
}

#searchDateSlide{
	display: grid;
	&:not(.slick-initialized){
		&>*{
			grid-column: 1;
			grid-row: 1;
		}
	}
	.slick-slider{
		position: relative;
	}
	.slick-arrow{
		all: unset;
		box-sizing: border-box;
		position: absolute;
		top: 50%;
		aspect-ratio: 1;
		width: clamp(32px, calc(48 / 1200 * 100vw), 48px);
		background: var(--color);
		border-radius: 100%;
		color: #fff;
		font-size: 0;
		transform: translateY(-50%);
		cursor: pointer;
		z-index: 1;
		&:before{
			content: "";
			position: absolute;
			top: 25%;
			left: 25%;
			width: 50%;
			height: 50%;
			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: white; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="6 2 12 8 6 14"/></svg>') no-repeat center / contain;
		}
		&.slick-disabled{
			background: #ccc;
			pointer-events: none;
		}
	}
	.slick-prev{
		left: 0;
		transform: translateX(-50%);
		&:before{
			transform: scale(-1, 1);
		}
	}
	.slick-next{
		transform: translateX(50%);
		right: 0;
	}
	.slick-list{
		padding: clamp(8px, calc(16 / 1200 * 100vw), 16px);
		overflow: visible;
	}
	.slick-slide{
		margin: 0 clamp(8px, calc(16 / 1200 * 100vw), 16px);
	}
}

#searchCurrent{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	padding-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
	background: #fff;
	&>*{
		grid-column: 2;
	}
	& ul{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 8px;
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		grid-template-columns: 1fr 1em;
		align-items: center;
		column-gap: 0.75em;
		padding: 0.25em 0.75em;
		background: var(--color-theme);
		border-radius: 4px;
		color: #fff;
		font-size: clamp(12px, calc(14 / 1200 * 100vw), 14px);
		text-decoration: none;
		&:after{
			content: "";
			aspect-ratio: 1;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="3 3 13 13"/><polyline points="13 3 3 13"/></svg>') no-repeat center / contain;
		}
	}
	& button{
		all: unset;
		box-sizing: border-box;
		display: grid;
		align-items: center;
		padding: 0.25em 0.75em;
		border: 1px solid currentColor;
		border-radius: 4px;
		color: inherit;
		font-weight: 700;
		font-size: clamp(12px, calc(14 / 1200 * 100vw), 14px);
		cursor: pointer;
	}
}

#result{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
	&>*{
		grid-column: 2;
	}
	& h2{
		display: none;
	}
}

#resultSetting{
	display: grid;
	justify-items: center;
	grid-gap: 8px 24px;
	@media (min-width: 992px) {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
}

#resultSort{
	& dl{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		grid-gap: 8px;
		font-size: clamp(12px, calc(14 / 1200 * 100vw), 14px);
	}
	& dd{
		display: grid;
		align-items: center;
		padding: 0.25em 0.75em;
		border: 1px solid currentColor;
		border-radius: 4px;
		cursor: pointer;
		&.select{
			background: var(--color-theme);
			color: #fff;
			pointer-events: none;
		}
	}
}

#resultCount{
	display: flex;
	align-items: baseline;
	column-gap: 0.25em;
	& span{
		font-size: 2em;
	}
}

#resultList{
	display: grid;
	grid-gap: clamp(32px, calc(40 / 1200 * 100vw), 40px) clamp(24px, calc(32 / 1200 * 100vw), 32px);
	margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
}

#pagenation{
	margin-top: clamp(32px, calc(64 / 1200 * 100vw), 64px);
	&:not(:has(ol)){
		display: none;
	}
}

.articleList{
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	& section{
		position: relative;
		display: grid;
	}
	& h3{
		display: grid;
		grid-template-columns: 1em 1fr;
		column-gap: 0.5em;
		margin-top: 0.5em;
		font-weight: 700;
		letter-spacing: 0.05em;
		&:before{
			content: "";
			aspect-ratio: 1;
			background: var(--color-theme) url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><polyline fill="white" points="4 0 15 8 4 16"/></svg>') no-repeat center / 50%;
			border-radius: 100%;
			transform: translateY(0.325em);
		}
	}
	& h3+div{
		display: contents;
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	& figure{
		order: -1;
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
		}
	}
}

.spotList{
	grid-template-columns: repeat(2, 1fr);
	@media (min-width: 576px) {
		grid-template-columns: repeat(auto-fill, minmax(min(50%, 240px), 1fr));
	}
	& section{
		position: relative;
		display: grid;
		&.recommend:before{
			content: "\304A\3059\3059\3081";
			position: absolute;
			top: 0;
			left: 0;
			padding: 0.25em 0.5em;
			background: var(--color-theme);
			color: #fff;
			font-size: clamp(12px, calc(14 / 1200 * 100vw), 14px);
		}
	}
	& h3{
		display: grid;
		grid-template-columns: 1em 1fr;
		column-gap: 0.5em;
		margin-top: 0.5em;
		font-weight: 700;
		font-size: clamp(14px, calc(16 / 1200 * 100vw), 16px);
		letter-spacing: 0.05em;
		&:before{
			content: "";
			aspect-ratio: 1;
			background: var(--color-theme) url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><polyline fill="white" points="4 0 15 8 4 16"/></svg>') no-repeat center / 50%;
			border-radius: 100%;
			transform: translateY(0.325em);
		}
	}
	& h3+div{
		display: contents;
		& p{
			margin-top: 0.25em;
			font-size: clamp(12px, calc(14 / 1200 * 100vw), 14px);
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	& figure{
		order: -1;
		& img{
			aspect-ratio: 1;
			object-fit: cover;
		}
	}
}