/* CSS Document */

#article,
#course,
#spot,
#event,
#flowering{
	& h2{
		display: grid;
		grid-template-columns: var(--wrap);
		justify-content: center;
		padding: 0.5em 0;
		background: var(--color-theme);
		color: #fff;
		font-weight: 700;
		font-size: clamp(24px, calc(36 / 768 * 100dvw), 36px);
		text-align: center;
	}
}

#flowering{
	display: grid;
	#floweringText{
		order: 1;
		display: grid;
		grid-template-columns: var(--wrap);
		justify-content: center;
		margin-top: clamp(24px, calc(40 / 992 * 100dvw), 40px);
		font-weight: 500;
	}
	#floweringPhoto{
		position: relative;
		min-height: min(66.66dvw, 600px);
		& img{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
}

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

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

#searchMenu{
	& summary{
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: 0.5em;
		padding: 0.25em 1em;
		color: var(--color-theme);
		font-weight: 700;
		font-size: 14px;
		letter-spacing: 0.025em;
		text-align: center;
		cursor: pointer;
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 10px;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><polyline points="5 8 10 2 0 2 5 8"/></svg>') no-repeat center / contain;
		}
		[open] &{
			background: #edf5f1;
		}
		[open] &:after{
			transform: scale(1, -1);
		}
	}
	& summary+div{
		padding: clamp(16px, calc(40 / 992 * 100dvw), 40px) clamp(16px, calc(32 / 992 * 100dvw), 32px);
		& ul{
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(min(100%, 192px), 1fr));
			grid-gap: 8px 24px;
			& ul{
				grid-template-columns: 1fr;
				grid-gap: unset;
				padding: 8px 0 8px 24px;
			}
		}
		& label{
			font-weight: 700;
		}
		& div:has(.doSearch){
			display: grid;
			justify-items: center;
			grid-gap: clamp(8px, calc(16 / 992 * 100dvw), 16px);
			margin-top: clamp(16px, calc(40 / 992 * 100dvw), 40px);
		}
		.doSearch,
		.doClearAll{
			all: unset;
			box-sizing: border-box;
			cursor: pointer;
			display: grid;
			align-items: center;
			padding: 0.25em 1em;
			color: inherit;
			font-weight: 700;
			font-size: 14px;
			letter-spacing: 0.025em;
			text-align: center;
			transition: all 0.2s ease-out;
		}
		.doSearch{
			grid-template-columns: 1fr auto;
			min-width: min(100%, 480px);
			min-height: 48px;
			border-radius: 24px;
			background: var(--color);
			color: #fff;
			&:after{
				content: "";
				aspect-ratio: 1;
				width: 20px;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M6.48,2.8c-2.22.48-3.82,2.47-3.79,4.74,0,.35.29.63.64.63.35,0,.63-.29.63-.64-.02-1.67,1.16-3.14,2.79-3.49.34-.07.56-.41.49-.75-.07-.34-.41-.56-.75-.49ZM19.52,17.06l-3.89-3.82c-.25-.25-.63-.28-.92-.11l-1.19-1.17c2.19-2.96,1.93-7.16-.77-9.81C11.32.74,9.43-.02,7.42,0c-2,.02-3.88.82-5.28,2.24-2.9,2.95-2.85,7.7.1,10.6,1.47,1.45,3.4,2.16,5.32,2.14,1.59-.01,3.18-.53,4.5-1.55l1.19,1.17c-.17.29-.12.67.13.92l3.89,3.82c.63.62,1.65.61,2.27-.02.62-.63.61-1.65-.02-2.27ZM11.64,11.57c-1.12,1.14-2.6,1.72-4.09,1.74-1.49.01-2.98-.54-4.12-1.66-2.29-2.24-2.32-5.93-.07-8.21,1.09-1.11,2.54-1.72,4.09-1.74,1.55-.01,3.02.58,4.12,1.66,2.29,2.24,2.32,5.93.07,8.21Z"/></svg>') no-repeat center / contain;
			}
		}
		.doClearAll{
			min-width: min(100%, 320px);
			min-height: 40px;
			border: 1px solid currentColor;
			border-radius: 20px;
			color: var(--color-theme);
		}
	}
	#searchButton{
		display: grid;
		align-items: center;
		column-gap: 8px;
		width: 100%;
		& input{
			all: unset;
			box-sizing: border-box;
			padding: 0 1em;
			border: 1px solid #ccc;
			border-radius: 8px;
			::placeholder{
				color: #8f8f8f;
			}
		}
		.doSearch{
			all: unset;
			box-sizing: border-box;
			cursor: pointer;
			position: relative;
			justify-self: center;
			aspect-ratio: 1;
			background: var(--color-theme);
			border: 2px solid transparent;
			border-radius: 8px;
			color: #fff;
			font-size: 0;
			&:after{
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M6.48,2.8c-2.22.48-3.82,2.47-3.79,4.74,0,.35.29.63.64.63.35,0,.63-.29.63-.64-.02-1.67,1.16-3.14,2.79-3.49.34-.07.56-.41.49-.75-.07-.34-.41-.56-.75-.49ZM19.52,17.06l-3.89-3.82c-.25-.25-.63-.28-.92-.11l-1.19-1.17c2.19-2.96,1.93-7.16-.77-9.81C11.32.74,9.43-.02,7.42,0c-2,.02-3.88.82-5.28,2.24-2.9,2.95-2.85,7.7.1,10.6,1.47,1.45,3.4,2.16,5.32,2.14,1.59-.01,3.18-.53,4.5-1.55l1.19,1.17c-.17.29-.12.67.13.92l3.89,3.82c.63.62,1.65.61,2.27-.02.62-.63.61-1.65-.02-2.27ZM11.64,11.57c-1.12,1.14-2.6,1.72-4.09,1.74-1.49.01-2.98-.54-4.12-1.66-2.29-2.24-2.32-5.93-.07-8.21,1.09-1.11,2.54-1.72,4.09-1.74,1.55-.01,3.02.58,4.12,1.66,2.29,2.24,2.32,5.93.07,8.21Z"/></svg>') no-repeat center / 20px;
			}
			&:hover{
				background: #fff;
				border-color: currentColor;
				color: var(--color-theme);
			}
		}
	}
	@media (max-width: 991.98px) {
		display: grid;
		grid-row-gap: 16px;
		& details{
			border: 1px solid var(--color-theme);
			border-radius: 24px;
			overflow: hidden;
			&[open]{
				&::details-content{
					border-top: 1px solid var(--color-theme);
				}
			}
		}
		& summary{
			min-height: 48px;
		}
		& menu{
			display: none;
		}
		#searchButton{
			grid-template-columns: 1fr 48px;
			& input{
				width: 100%;
				height: 48px;
			}
			.doSearch{
				width: 48px;
			}
		}
	}
	@media (min-width: 992px) {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 8px;
		&:has(details:nth-child(2)){
			grid-template-columns: repeat(3, 1fr);
			& details::details-content{
				grid-column: 1 / 4;
			}
		}
		&:has(details:nth-child(3)){
			grid-template-columns: repeat(4, 1fr);
			& details::details-content{
				grid-column: 1 / 5;
			}
		}
		&:has(details:nth-child(4)){
			grid-template-columns: repeat(5, 1fr);
			& details::details-content{
				grid-column: 1 / 6;
			}
		}
		&:has(details:nth-child(4)):has(#searchDate){
			grid-template-columns: 1.1fr 1fr 1fr 1.5fr 1.5fr;
		}
		& details{
			display: contents;
			&::details-content{
				grid-row: 2;
				grid-column: 1 / 3;
			}
			&[open]::details-content{
				z-index: 1;
			}
		}
		& summary{
			min-height: 40px;
			border: 1px solid currentColor;
			border-radius: 20px;
		}
		& summary+div{
			position: relative;
			margin-top: 16px;
			border: 1px solid var(--color-theme);
			border-radius: 4px;
		}
		& menu{
			all: unset;
			box-sizing: border-box;
			cursor: pointer;
			position: absolute;
			top: 4px;
			right: 4px;
			aspect-ratio: 1;
			width: 24px;
			background: var(--color-theme);
			border-radius: 2px;
			color: #fff;
			font-size: 0;
			z-index: 1;
			&:after{
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="18.16 7.05 17.45 6.34 12.5 11.29 7.55 6.34 6.84 7.05 11.79 12 6.84 16.95 7.55 17.66 12.5 12.71 17.45 17.66 18.16 16.95 13.21 12 18.16 7.05"/></svg>') no-repeat center / contain;
			}
		}
		#searchButton{
			align-self: center;
			grid-template-columns: 1fr auto;
			height: 40px;
			& input{
				height: 40px;
				font-size: 14px;
			}
			.doSearch{
				width: 40px;
			}
		}
	}
}

#searchArea{
	display: grid;
	grid-row-gap: clamp(16px, calc(40 / 992 * 100dvw), 40px);
	@media (min-width: 992px) {
		grid-template-columns: 1.5fr 1fr;
		column-gap: clamp(16px, calc(32 / 992 * 100dvw), 32px);
	}
}

#searchAreaMap{
	& svg{
		border-radius: 4px;
		& > use{
			pointer-events: none;
		}
	}
	& a{
		cursor: pointer;
		& use{
			transition: opacity 0.2s ease-out;
		}
		&:not(.select) use:nth-child(2){
			opacity: 0;
		}
		&.select use:nth-child(1){
			opacity: 0;
		}
	}
}

#searchAreaList{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
	grid-gap: clamp(24px, calc(32 / 992 * 100dvw), 32px);
	& dl{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 8px 16px;
		& dt{
			grid-column: 1 / 3;
		}
		& dt+dd{
			grid-column: 1 / 3;
		}
	}
	& dt{
		& label{
			all: unset;
			box-sizing: border-box;
			cursor: pointer;
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			min-height: 48px;
			padding: 0.25em 1.5em;
			border: 1px solid currentColor;
			border-radius: 24px;
			color: var(--color);
			font-size: 14px;
			letter-spacing: 0.025em;
			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"><polyline points="5.6 3.2 10.4 8 5.6 12.8" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"/></svg>') no-repeat center / 16px;
			}
			&:has(:checked){
				background: var(--color);
				border-color: transparent;
				color: #fff;
			}
			[data-area="1"] &{
				&:not(:has(:checked)){
					color: #f285ac;
				}
				&:has(:checked){
					background: #f285ac;
				}
			}
			[data-area="2"] &{
				&:not(:has(:checked)){
					color: #61bce2;
				}
				&:has(:checked){
					background: #61bce2;
				}
			}
			[data-area="3"] &{
				&:not(:has(:checked)){
					color: #5cbf52;
				}
				&:has(:checked){
					background: #5cbf52;
				}
			}
			[data-area="4"] &{
				&:not(:has(:checked)){
					color: #f2973d;
				}
				&:has(:checked){
					background: #f2973d;
				}
			}
		}
		& input{
			display: none;
		}
	}
	& dd{
		font-weight: 500;
		font-size: 14px;
		letter-spacing: 0.025em;
	}
}

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

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

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

#resultSet{
	padding: 24px 0;
	@media (max-width: 991.98px) {
		display: grid;
		grid-row-gap: 16px;
		justify-items: center;
	}
	@media (min-width: 992px) {
		display: flex;
		justify-content: space-between;
		align-items: center;
		column-gap: 24px;
		#resultSwitch{
			justify-content: flex-end;
		}
	}
}

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

#resultSwitch{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	grid-gap: 16px;
	[LSC-LT="Order"]{
		display: none;
	}
	& dl{
		display: flex;
		align-items: center;
		grid-gap: 0.5em 0.25em;
		font-size: clamp(12px, calc(14 / 768 * 100dvw), 14px);
	}
	& dt{
		font-weight: 700;
		text-align: center;
	}
	& dd{
		position: relative;
		display: grid;
		align-items: center;
		min-width: 5em;
		min-height: 2em;
		padding: 0 1em;
		border-radius: 1em;
		font-weight: 500;
		text-align: center;
		cursor: pointer;
		&.select{
			position: relative;
			background: var(--color);
			color: #fff;
			pointer-events: none;
			&:before {
				content: "";
				position: absolute;
				top: 100%;
				left: 50%;
				aspect-ratio: 1;
				width: 8px;
				background: inherit;
				transform: translateX(-50%);
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><polygon points="8 0 4 8 0 0 8 0"/></svg>') no-repeat center / contain;
			}
		}
		&:hover{
			background: var(--color-theme);
			color: #fff;
		}
	}
	@media (max-width: 575.98px) {
		& dl{
			flex-wrap: wrap;
			justify-content: center;
		}
		& dt{
			width: 100%;
		}
	}
	@media (min-width: 576px) {
		& dt{
			display: flex;
			align-items: center;
			column-gap: 0.75em;
			margin-right: 0.75em;
			&:after{
				content: "\7C";
			}
		}
	}
}

#resultList{}

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

.featureList,
.courseList{
	display: grid;
	grid-gap: clamp(24px, calc(32 / 992 * 100dvw), 32px);
	padding-bottom: 1px;
	overflow: hidden;
	& section{
		position: relative;
		display: grid;
		align-content: start;
		grid-row-gap: 8px;
		margin-bottom: clamp(24px, calc(32 / 992 * 100dvw), 32px);
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 3 / 2;
			background: var(--dummy);
			border-radius: 4px;
		}
		&:after{
			position: absolute;
			top: 100%;
			left: 0;
			width: 100dvw;
			border-bottom: 1px solid #dedede;
			transform: translateY(clamp(24px, calc(32 / 992 * 100dvw), 32px));
		}
		& figure{
			order: -1;
		}
		&:hover{
			& figure{
				& img{
					transform: scale(1.1);
				}
			}
		}
	}
	& h3{
		order: 1;
		margin-inline: 8px;
		font-weight: 700;
	}
	& h3+div{
		display: contents;
		& ul{
			display: flex;
			flex-wrap: wrap;
			grid-gap: 0.5em;
			margin-inline: 8px;
			font-size: clamp(10px, calc(13 / 768 * 100dvw), 13px);
			z-index: 1;
		}
		& li{
			display: grid;
			align-items: center;
			min-height: 2em;
			padding: 0 1em;
			border-radius: 1em;
			background: var(--color-theme);
			color: #fff;
			font-weight: 700;
			letter-spacing: 0.1em;
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
			z-index: 1;
		}
	}
	& figure{
		border-radius: 4px;
		overflow: hidden;
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			transform-origin: center;
			transition: transform 0.2s ease-out;
		}
	}
	@media (max-width: 575.98px) {
		& section{
			&:after{
				content: "";
			}
		}
	}
	@media (max-width: 991.98px) {
		grid-template-columns: repeat(2, 1fr);
		& section:nth-child(2n+1):after{
			content: "";
		}
	}
	@media (min-width: 992px) {
		grid-template-columns: repeat(3, 1fr);
		& section:nth-child(3n+1):after{
			content: "";
		}
	}
}

.spotList{
	display: grid;
	&:not(.line):not(.grid){
		visibility: hidden;
	}
	& section{
		position: relative;
		display: grid;
		align-content: start;
		grid-row-gap: 8px;
		&:not(:has(img)):before{
			content: "";
			background: var(--dummy);
			border-radius: 4px;
		}
	}
	& h3{
		color: var(--color-theme);
		font-weight: 700;
	}
	& h3+div{
		display: contents;
	}
	& time{
		font-weight: 700;
	}
	& ul{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 0.5em;
		font-size: clamp(10px, calc(13 / 768 * 100dvw), 13px);
		z-index: 1;
	}
	& li{
		display: grid;
		align-items: center;
		min-height: 2em;
		padding: 0 1em;
		border-radius: 1em;
		border: 1px solid currentColor;
		background: var(--color-theme);
		color: #fff;
		font-weight: 700;
		letter-spacing: 0.1em;
		&[data-area="1"] {
			background: #f285ac;
		}
		&[data-area="2"] {
			background: #61bce2;
		}
		&[data-area="3"] {
			background: #5cbf52;
		}
		&[data-area="4"] {
			background: #f2973d;
		}
	}
	& a{
		z-index: 1;
		&[data-fav-id]{
			all: unset;
			box-sizing: border-box;
			cursor: pointer;
			grid-column: 1;
			grid-row: 1;
			align-self: start;
			justify-self: end;
			position: relative;
			aspect-ratio: 32 / 42;
			width: clamp(24px, calc(32 / 992 * 100dvw), 32px);
			background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 42"><path d="M32,0H0v41.14l16-9.14,16,9.14V0h0Z" style="fill: white;"/><path d="M0,0v41.14l16-9.14,16,9.14V0H0ZM29.71,37.2l-12.58-7.19-1.13-.65-1.13.65-12.58,7.19V2.29h27.43v34.92ZM9.71,26.03l6.37-4.71,6.37,4.71-2.43-7.61,6.37-4.71h-7.88l-2.43-7.61-2.43,7.61h-7.88l6.37,4.71-2.43,7.61Z" style="fill: %23e84717;"/></svg>') no-repeat center top / contain;
			font-size: 0;
			z-index: 2;
			&.favOn{
				background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 42"><polygon points="0 0 0 41.14 16 32 32 41.14 32 0 0 0" style="fill: %23e84717;"/><polygon points="26.39 13.71 18.52 13.71 16.08 6.1 13.65 13.71 5.77 13.71 12.14 18.42 9.71 26.03 16.08 21.33 22.45 26.03 20.02 18.42 26.39 13.71" style="fill: white;"/></svg>');
			}
		}
	}
	& figure{
		order: -1;
		border-radius: 4px;
		overflow: hidden;
		& img{
			object-fit: cover;
			transform-origin: center;
			transition: transform 0.2s ease-out;
			.info &{
				object-fit: contain;
			}
		}
	}
	&.grid{
		grid-gap: clamp(24px, calc(32 / 992 * 100dvw), 32px) clamp(16px, calc(24 / 992 * 100dvw), 24px);
		padding-bottom: 1px;
		overflow: hidden;
		& section{
			margin-bottom: clamp(24px, calc(32 / 992 * 100dvw), 32px);
			&:before{
				grid-column: 1;
				grid-row: 1;
				aspect-ratio: 1;
			}
			&:after{
				position: absolute;
				top: 100%;
				left: 0;
				width: 100dvw;
				border-bottom: 1px solid #dedede;
				transform: translateY(clamp(24px, calc(32 / 992 * 100dvw), 32px));
			}
			& ul{
				grid-column: 1;
				grid-row: 1;
				place-content: start;
				aspect-ratio: 1;
				padding: clamp(8px, calc(16 / 992 * 100dvw), 16px) clamp(40px, calc(56 / 992 * 100dvw), 56px) clamp(8px, calc(16 / 992 * 100dvw), 16px) clamp(8px, calc(16 / 992 * 100dvw), 16px);
				overflow: hidden;
			}
			& a[data-fav-id]{
				margin: clamp(8px, calc(16 / 992 * 100dvw), 16px);
			}
			& figure{
				grid-column: 1;
				grid-row: 1;
			}
			& img{
				aspect-ratio: 1;
			}
			&:hover{
				& figure{
					& img{
						transform: scale(1.1);
					}
				}
			}
		}
		& p{
			display: none;
		}
		& time{
			font-size: 14px;
		}
		& a:not([data-fav-id]){
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
		@media (max-width: 767.98px) {
			grid-template-columns: repeat(2, 1fr);
			& section:nth-child(2n+1):after{
				content: "";
			}
		}
		@media (min-width: 768px) and (max-width: 1199.98px) {
			grid-template-columns: repeat(3, 1fr);
			& section:nth-child(3n+1):after{
				content: "";
			}
		}
		@media (min-width: 1200px) {
			grid-template-columns: repeat(4, 1fr);
			& section:nth-child(4n+1):after{
				content: "";
			}
		}
	}
	&.line{
		& section{
			padding-bottom: clamp(24px, calc(32 / 992 * 100dvw), 32px);
			border-bottom: 1px solid #dedede;
			&:before{
				grid-column: 1;
				aspect-ratio: 3 / 2;
			}
			& ul{
				grid-column: 1;
				place-content: start;
				aspect-ratio: 3 / 2;
				padding: clamp(8px, calc(16 / 992 * 100dvw), 16px);
				overflow: hidden;
			}
			& figure{
				grid-column: 1;
			}
			& img{
				aspect-ratio: 3 / 2;
			}
			&:has(a:not([data-fav-id]):hover){
				& figure{
					& img{
						transform: scale(1.1);
					}
				}
			}
		}
		& h3{
			font-size: clamp(18px, calc(24 / 768 * 100dvw), 24px);
			letter-spacing: 0.05em;
			cursor: pointer;
		}
		& p{
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			max-height: calc(1.65em * 3);
			font-weight: 700;
			font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
		}
		& time{
			font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
		}
		& a{
			&:not([data-fav-id]){
				display: grid;
				grid-template-columns: 1fr auto;
				align-items: center;
				min-width: min(100%, 216px);
				column-gap: 0.5em;
				min-height: clamp(48px, calc(64 / 768 * 100dvw), 64px);
				padding: 0.25em 1.5em 0.25em 2em;
				border: 1px solid currentColor;
				border-radius: clamp(24px, calc(32 / 768 * 100dvw), 32px);
				font-weight: 700;
				font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
				letter-spacing: 0.05em;
				text-align: center;
				text-decoration: none;
				&:hover{
					background: var(--color-theme);
					border-color: transparent;
					color: #fff;
				}
				&: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"><polyline points="5.6 3.2 10.4 8 5.6 12.8" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"/></svg>') no-repeat center / 16px;
				}
				@media (min-width: 768px) {
					&:after {
						-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><polyline points="4.8 1.6 11.2 8 4.8 14.4" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"/></svg>');
					}
				}
			}
		}
		@media (max-width: 575.98px) {
			grid-row-gap: clamp(24px, calc(32 / 992 * 100dvw), 32px);
			& section{
				&:before,
				& figure{
					grid-row: 1;
				}
				& ul{
					grid-row: 1;
					padding-right: 56px;
				}
				& a:not([data-fav-id]){
					justify-self: center;
					margin-top: 8px;
				}
				& a[data-fav-id]{
					grid-column: 1;
					grid-row: 1;
					margin: clamp(8px, calc(16 / 992 * 100dvw), 16px);
				}
			}
		}
		@media (min-width: 576px) {
			& section{
				grid-template-columns: clamp(240px, calc(344 / 1200 * 100dvw), 344px) 1fr;
				grid-template-rows: auto auto auto 1fr;
				column-gap: clamp(24px, calc(40 / 1200 * 100dvw), 40px);
				padding-bottom: clamp(24px, calc(40 / 1200 * 100dvw), 40px);
				&:nth-child(n+2){
					padding-top: clamp(24px, calc(40 / 1200 * 100dvw), 40px);
				}
				&:before,
				& ul,
				& figure{
					grid-column: 1;
					grid-row: 1 / 5;
					align-self: start;
				}
				& h3,
				& p,
				& time{
					margin-right: clamp(40px, calc(56 / 992 * 100dvw), 56px);
				}
				& a:not([data-fav-id]){
					grid-row: 4;
					justify-self: end;
					align-self: end;
				}
			}
			& a{
				&[data-fav-id]{
					position: absolute;
					top: 0;
					right: 0;
				}
			}
		}
	}
}

.flowerList{
	display: grid;
	grid-gap: clamp(24px, calc(32 / 992 * 100dvw), 32px) clamp(16px, calc(24 / 992 * 100dvw), 24px);
	padding-bottom: 1px;
	overflow: hidden;
	& section{
		position: relative;
		display: grid;
		align-content: start;
		grid-row-gap: 8px;
		margin-bottom: clamp(24px, calc(32 / 992 * 100dvw), 32px);
		&:not(:has(img)):before{
			content: "";
			grid-column: 1;
			grid-row: 1;
			aspect-ratio: 1;
			background: var(--dummy);
			border-radius: 4px;
		}
		&:after{
			position: absolute;
			top: 100%;
			left: 0;
			width: 100dvw;
			border-bottom: 1px solid #dedede;
			transform: translateY(clamp(24px, calc(32 / 992 * 100dvw), 32px));
		}
		& ul{
			grid-column: 1;
			grid-row: 1;
			place-content: start;
			aspect-ratio: 1;
			padding: clamp(8px, calc(16 / 992 * 100dvw), 16px);
			overflow: hidden;
		}
		& figure{
			grid-column: 1;
			grid-row: 1;
		}
		&:hover{
			& figure{
				& img{
					transform: scale(1.1);
				}
			}
		}
	}
	& h3{
		color: var(--color-theme);
		font-weight: 700;
	}
	& h3+div{
		display: contents;
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
			z-index: 1;
		}
	}
	& ul{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 0.5em;
		font-size: clamp(10px, calc(13 / 768 * 100dvw), 13px);
		z-index: 1;
	}
	& li{
		display: grid;
		align-items: center;
		min-height: 2em;
		padding: 0 1em;
		border-radius: 1em;
		border: 1px solid currentColor;
		background: var(--color-theme);
		color: #fff;
		font-weight: 700;
		letter-spacing: 0.1em;
		&[data-area="1"] {
			background: #f285ac;
		}
		&[data-area="2"] {
			background: #61bce2;
		}
		&[data-area="3"] {
			background: #5cbf52;
		}
		&[data-area="4"] {
			background: #f2973d;
		}
	}
	& dl{
		display: grid;
		grid-gap: 0.5em;
		font-weight: 500;
		font-size: clamp(12px, calc(14 / 768 * 100dvw), 14px);
	}
	& dt{
		position: relative;
		display: grid;
		grid-template-columns: auto 1fr auto;
		column-gap: 0.5em;
		&:before{
			content: "";
			width: 3px;
			height: 1em;
			background: var(--color-theme);
			transform: translateY(calc(0.825em - 50%));
		}
		&:after{
			content: ":";
		}
	}
	& figure{
		order: -1;
		border-radius: 4px;
		overflow: hidden;
		& img{
			aspect-ratio: 1;
			object-fit: cover;
			transition: transform 0.2s ease-out;
		}
	}
	@media (max-width: 767.98px) {
		grid-template-columns: repeat(2, 1fr);
		& section:nth-child(2n+1):after{
			content: "";
		}
		& dt{
			justify-self: start;
			&:nth-of-type(n+2){
				margin-top: 0.5em;
			}
		}
	}
	@media (min-width: 768px) {
		& dl{
			grid-template-columns: auto 1fr;
		}
		& dt{
			max-width: 8em;
		}
	}
	@media (min-width: 768px) and (max-width: 1199.98px) {
		grid-template-columns: repeat(3, 1fr);
		& section:nth-child(3n+1):after{
			content: "";
		}
	}
	@media (min-width: 1200px) {
		grid-template-columns: repeat(4, 1fr);
		& section:nth-child(4n+1):after{
			content: "";
		}
	}
}

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

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