/* CSS Document */

#feature,
#item,
#provider,
#blog,
#favorite{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	padding: clamp(40px, calc(64 / 768 * 100dvw), 64px) 0 clamp(64px, calc(96 / 768 * 100dvw), 96px) 0;
	background: var(--object_01) no-repeat calc(0px - clamp(200px, calc(296 / 992 * 100dvw), 296px)) clamp(64px, calc(96 / 768 * 100dvw), 96px) / auto clamp(240px, calc(376 / 992 * 100dvw), 376px);
	overflow: hidden;
	&:has(#pickup){
		background: var(--object_01) no-repeat calc(0px - clamp(200px, calc(296 / 992 * 100dvw), 296px)) clamp(64px, calc(96 / 768 * 100dvw), 96px) / auto clamp(240px, calc(376 / 992 * 100dvw), 376px), var(--object_01) no-repeat calc(100% + clamp(200px, calc(296 / 992 * 100dvw), 296px)) calc(100% - 16px) / auto clamp(240px, calc(376 / 992 * 100dvw), 376px);
	}
	& h2{
		display: grid;
		justify-items: center;
		text-align: center;
		grid-row-gap: 0.5em;
		color: var(--color-theme);
		font-weight: 700;
		font-family: 'Zen Kaku Gothic New', var(--font);
		font-size: clamp(18px, calc(28 / 768 * 100dvw), 28px);
		letter-spacing: 0.05em;
		&:before{
			content: attr(data-caption);
			order: -1;
			color: #a1cbed;
			font-weight: 600;
			font-size: clamp(24px, calc(64 / 992 * 100dvw), 64px);
			font-family: 'Shippori Mincho', var(--font-min);
			letter-spacing: 0.05em;
			line-height: 1;
			white-space: nowrap;
		}
		&:after{
			content: "";
			order: -1;
			aspect-ratio: 32 / 2;
			width: clamp(24px, calc(32 / 768 * 100dvw), 32px);
			background: linear-gradient(90deg, #a1cbed 50%, currentColor 50%);
		}
	}
	& h2+div{
		margin-top: clamp(32px, calc(48 / 768 * 100dvw), 48px);
		&:not([id]){
			font-weight: 500;
			font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
			font-family: 'Zen Kaku Gothic New', var(--font);
			letter-spacing: 0.05em;
			text-align: center;
			text-wrap: balance;
			word-break: keep-all;
			overflow-wrap: anywhere;
		}
	}
	#pickup{
		margin-top: clamp(24px, calc(40 / 768 * 100dvw), 40px);
	}
}

#pickup{
	&:not(.slick-slider){
		display: grid;
		justify-content: center;
		& dl{
			grid-column: 1;
			grid-row: 1;
			width: min(calc(100dvw - 48px), 380px);
			&:nth-child(n+2){
				display: none;
			}
		}
	}
	& dl{
		position: relative;
		display: grid;
		align-content: start;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 3 / 2;
			margin-bottom: 8px;
			background: var(--dummy);
			border-radius: 0 0 clamp(24px, calc(32 / 768 * 100dvw), 32px) 0;
		}
		&:not(:has(time)){
			& dt{
				text-align: center;
			}
		}
	}
	& dt{
		order: 1;
		font-weight: 600;
		font-size: clamp(18px, calc(20 / 768 * 100dvw), 20px);
		letter-spacing: 0.05em;
		&:empty{
			display: none;
		}
	}
	& dd{
		display: contents;
		& img{
			aspect-ratio: 4 / 3;
			margin-bottom: 8px;
			object-fit: cover;
			border-radius: 0 0 clamp(24px, calc(32 / 768 * 100dvw), 32px) 0;
		}
		& time{
			color: #666666;
			font-size: 15px;
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	&.slick-slider{
		display: grid;
		grid-template-columns: auto 1fr auto;
		&:before{
			grid-column: 2;
			grid-row: 1;
			aspect-ratio: 4 / 3;
			width: calc(100% - clamp(24px, calc(32 / 768 * 100dvw), 32px));
			background: red;
			opacity: 0.25;
			visibility: hidden;
			pointer-events: none;
			z-index: 1;
		}
		.slick-list{
			grid-column: 2;
			grid-row: 1 / 3;
		}
		.slick-arrow{
			grid-row: 1;
			justify-self: center;
			align-self: center;
			z-index: 1;
		}
		&:has(.slick-arrow):before{
			content: "";
		}
		@media (max-width: 991.98px) {
			&:before{
				margin-left: clamp(12px, calc(16 / 768 * 100dvw), 16px);
			}
			.slick-list{
				overflow: visible;
			}
		}
		@media (min-width: 576px) {
			&:before{
				width: calc(50% - clamp(24px, calc(32 / 768 * 100dvw), 32px));
				background: blue;
			}
		}
		@media (min-width: 992px) {
			grid-template-columns: 0 1fr 0;
			width: min(calc(100dvw - 64px), 100%);
			&:before{
				width: calc(33.33% - (32px * 0.667));
				background: green;
			}
			.slick-list{
				margin-inline: calc(0px - clamp(12px, calc(16 / 768 * 100dvw), 16px));
			}
		}
	}
	.slick-slide{
		margin-inline: clamp(12px, calc(16 / 768 * 100dvw), 16px);
	}
	.slick-arrow{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		position: relative;
		aspect-ratio: 1;
		width: clamp(32px, calc(48 / 768 * 100dvw), 48px);
		background: color-mix(in srgb, transparent, var(--color-theme) 90%);
		border-radius: 100%;
		color: white;
		font-size: 0;
		&:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5px;"><polyline points="20.5 31.5 29.5 24 20.5 16.5" /></svg>') no-repeat center / cover;
		}
		&.slick-prev:before{
			transform: scale(-1, 1);
		}
	}
}

#favorite{
	& h2+div{
		display: flex;
		justify-content: center;
		& button{
			display: grid;
			grid-template-columns: 1fr 8px;
			align-items: center;
			column-gap: 8px;
			min-width: min(100%, 280px);
			min-height: 56px;
			padding: 4px 24px;
			background: white;
			border: 1px solid #365383;
			border-radius: 28px;
			color: var(--color-theme);
			font-weight: 600;
			text-align: center;
			text-decoration: none;
			&:after{
				content: "";
				aspect-ratio: 1;
				width: 20px;
				background: var(--color-theme) url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5px;"><line x1="4.87" y1="10" x2="11.87" y2="10"/><polyline points="11.87 6.46 15.4 10 11.87 13.54"/></svg>') no-repeat center / contain;
				border-radius: 100%;
			}
		}
	}
	#share{
		grid-row-gap: 16px;
		width: min(var(--wrap-fit), 800px);
		padding: clamp(16px, calc(32 / 768 * 100dvw), 32px);
		border-radius: 4px;
		opacity: 0;
		transition: opacity 0.5s ease-out;
		&:popover-open{
			display: grid;
			display: grid;
			opacity: 1;
		}
		&::backdrop{
			background: rgba(0, 0, 0, 0.5);
		}
		& h3{
			display: grid;
			grid-template-columns: auto 1fr;
			align-items: baseline;
			column-gap: 8px;
			color: var(--color-theme);
			font-weight: 700;
			font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
			font-family: "Zen Kaku Gothic New", var(--font);
			letter-spacing: 0.05em;
			&:before{
				content: "";
				width: 4px;
				height: 1em;
				background: #a1cbed;
				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;
		}
		&::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{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	background: color-mix(in srgb, white, darkkhaki 5%) var(--pattern_03) center top;
	padding: clamp(40px, calc(64 / 768 * 100dvw), 64px) 0 clamp(64px, calc(72 / 768 * 100dvw), 72px) 0;
	font-family: 'Zen Kaku Gothic New', var(--font);
	& h2{
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(20px, calc(28 / 768 * 100dvw), 28px);
		letter-spacing: 0.08em;
		text-align: center;
	}
	#searchCurrent{
		margin-top: clamp(24px, calc(40 / 768 * 100dvw), 40px);
	}
	@media (max-width: 1199.98px) {
		#searchMenu{
			grid-row: 3;
			margin-top: 8px;
		}
		#searchFilter{
			grid-row: 2;
			margin-top: clamp(24px, calc(40 / 768 * 100dvw), 40px);
		}
	}
	@media (min-width: 1200px) {
		#searchMenu{
			margin-top: clamp(24px, calc(40 / 768 * 100dvw), 40px);
		}
	}
}

#searchMenu{
	& li{
		min-height: 48px;
		background: white;
		border: 1px solid var(--color-theme);
		border-radius: 24px;
		font-weight: 500;
		&:not(:has(input)){
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			column-gap: 8px;
			min-height: 48px;
			padding: 4px 16px;
			text-align: center;
			cursor: pointer;
			&:after{
				content: "";
				aspect-ratio: 1;
				width: 12px;
				background: var(--color-theme);
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M0,0h12l-6,12L0,0Z"/></svg>') no-repeat center / contain;
			}
			&.select{
				background: #d0e5f6;
				&:after{
					transform: scale(1, -1);
				}
			}
		}
		&:has(input){
			display: grid;
			grid-template-columns: 1fr auto;
			padding: 4px;
		}
	}
	& input{
		margin-left: 12px;
		&::placeholder{
			color: silver;
		}
	}
	& button{
		position: relative;
		aspect-ratio: 1;
		width: 40px;
		background: var(--color-theme);
		border-radius: 100%;
		color: white;
		font-size: 0;
		&:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path d="M30.87,27.5l-3.55-3.55-2.69,2.69,3.55,3.55c.36.36.84.56,1.34.56s.98-.2,1.34-.56c.36-.36.56-.84.56-1.34s-.2-.98-.56-1.34Z"/><path d="M26.4,24.07l-1.85-1.85s0,0,0-.01c1.19-1.55,1.84-3.47,1.84-5.4,0-2.38-.92-4.62-2.61-6.3-1.68-1.68-3.92-2.61-6.31-2.61s-4.61.93-6.29,2.61c-1.69,1.68-2.61,3.92-2.61,6.3,0,2.38.92,4.62,2.61,6.3,1.68,1.68,3.92,2.61,6.3,2.61h0c1.93,0,3.85-.65,5.39-1.84,0,0,0,0,.01,0l1.85,1.85,1.66-1.66ZM21.73,21.05c-1.13,1.13-2.64,1.76-4.24,1.76-1.6,0-3.11-.63-4.24-1.76-1.13-1.13-1.76-2.64-1.76-4.24,0-1.6.63-3.11,1.76-4.24,1.13-1.13,2.64-1.76,4.24-1.76,0,0,0,0,0,0,1.6,0,3.11.63,4.24,1.76,1.13,1.13,1.76,2.64,1.76,4.25,0,1.6-.63,3.11-1.76,4.24Z"/></svg>') no-repeat center / contain;
		}
	}
	@media (max-width: 1199.98px) {
		& li{
			&:not(:has(input)){
				display: none;
			}
		}
	}
	@media (min-width: 1200px) {
		& ul{
			display: grid;
			column-gap: 8px;
		}
		& li{
			grid-row: 1;
		}
	}
}

#searchFilter{
	display: grid;
	& ul{
		display: grid;
		grid-gap: 8px 48px;
		&:has(ul){
			grid-row-gap: 16px;
			font-weight: 600;
			font-size: 18px;
		}
		& ul{
			grid-template-columns: 1fr;
			margin: 8px 0 0 24px;
			font-weight: 500;
			font-size: 16px;
		}
		@media (min-width: 768px) {
			grid-template-columns: repeat(2, 1fr);
		}
		@media (min-width: 992px) {
			grid-template-columns: repeat(3, 1fr);
		}
		@media (min-width: 1200px) {
			grid-template-columns: repeat(4, 1fr);
		}
		& label{
			display: inline-flex;
			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;
					border: 1px solid currentColor;
					color: inherit;
					&:checked{
						color: var(--color-theme);
						border-color: currentColor;
					}
					&:not(:disabled){
						cursor: pointer;
					}
				}
				&[type="checkbox"]{
					border-radius: 2px;
					&:checked{
						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-miterlimit: 10; stroke-width: 2px;"><polyline points="3.05 8.83 5.8 11.58 12.95 4.42"/></svg>') no-repeat center / contain;
						border-color: transparent;
					}
				}
				&[type="radio"]{
					border-radius: 100%;
					&:checked{
						background: radial-gradient(circle, white 30%, currentColor 30%);
						border-color: transparent;
					}
				}
			}
		}
	}
	& div:has(.doSearch){
		display: grid;
		justify-content: center;
		grid-gap: 8px 24px;
		margin-top: clamp(24px, calc(32 / 768 * 100dvw), 32px);
		& button{
			display: grid;
			grid-template-columns: 1fr 16px;
			align-items: center;
			min-height: 56px;
			padding: 4px 40px;
			border-radius: 28px;
			font-weight: 700;
			text-align: center;
			&:after{
				content: "";
				aspect-ratio: 1;
				width: 24px;
				background: currentColor;
				transform: translateX(16px);
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>') no-repeat center / contain;
			}
			&.doSearch{
				background: var(--color-theme);
				color: white;
				&:after{
					-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="M21.86,20.33l-4.89-4.89c1.02-1.38,1.63-3.09,1.63-4.94,0-4.62-3.74-8.36-8.36-8.36S1.87,5.88,1.87,10.5s3.74,8.36,8.36,8.36c2.12,0,4.05-.8,5.53-2.1l4.83,4.83c.18.18.4.26.63.26s.46-.09.63-.26c.35-.35.35-.92,0-1.27ZM10.24,17.07c-3.62,0-6.57-2.95-6.57-6.57s2.95-6.57,6.57-6.57,6.57,2.95,6.57,6.57-2.95,6.57-6.57,6.57Z"/></svg>');
				}
			}
			&.doClear{
				border: 1px solid #8e8e8e;
				&:after{
					-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="M5.17,19.74l-.93-.91,6.83-6.83-6.83-6.83.93-.91,6.83,6.8,6.86-6.8.91.91-6.8,6.83,6.8,6.83-.91.91-6.86-6.8-6.83,6.8Z"/></svg>');
				}
			}
		}
		@media (min-width: 768px) {
			display: flex;
			.doSearch{
				order: 1;
			}
		}
	}
	@media (max-width: 1199.98px) {
		grid-row-gap: 8px;
		& details{
			background: white;
			border: 1px solid var(--color-theme);
			border-radius: 24px;
			overflow: hidden;
			&[open]{
				&::details-content{
					padding: clamp(24px, calc(32 / 768 * 100dvw), 32px);
				}
			}
		}
		& summary{
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			column-gap: 8px;
			min-height: 48px;
			padding: 4px 16px;
			font-weight: 500;
			text-align: center;
			cursor: pointer;
			&:after{
				content: "";
				aspect-ratio: 1;
				width: 12px;
				background: var(--color-theme);
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M0,0h12l-6,12L0,0Z"/></svg>') no-repeat center / contain;
			}
			[open] &{
				background: #d0e5f6;
				&:after{
					transform: scale(1, -1);
				}
			}
		}
	}
	@media (min-width: 1200px) {
		filter: drop-shadow(0 0 5px color-mix(in srgb, transparent, black 20%));
		& details{
			grid-column: 1;
			grid-row: 1;
			display: none;
			&::details-content{
				all: unset;
				display: block;
				margin-top: clamp(24px, calc(40 / 768 * 100dvw), 40px);
				padding: 40px;
				background: white;
				border-radius: 32px;
			}
			&.select{
				z-index: 1;
			}
		}
		& summary{
			display: none;
		}
	}
}

#searchCurrent{
	display: grid;
	grid-gap: 16px 24px;
	@media (min-width: 992px) {
		grid-template-columns: auto 1fr;
		& h3{
			display: grid;
			align-items: center;
			min-height: 32px;
		}
	}
	& h3{
		font-weight: 600;
		text-align: center;
	}
	& ul{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		grid-gap: 8px;
		@media (max-width: 991.98px) {
			justify-content: center;
		}
	}
	& button,
	& a{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: 8px;
		min-height: 32px;
		padding: 0 16px;
		border-radius: 16px;
		font-weight: 600;
		font-size: 15px;
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 12px;
			background: currentColor;
			transform: translateX(4px);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" style="fill: none; stroke: black;"><line x1="2" y1="2" x2="10" y2="10"/><line x1="2" y1="10" x2="10" y2="2"/></svg>') no-repeat center / contain;
		}
	}
	& a{
		background: white;
		border: 1px solid #8e8e8e;
		color: inherit;
	}
	& button{
		background: var(--color-theme);
		color: white;
	}
}

#result{
	display: grid;
	overflow: hidden;
	&:before{
		content: "";
		grid-column: 1;
		grid-row: 1;
		background: var(--color-theme);
	}
	& h2{
		display: none;
	}
	#resultSet{
		grid-column: 1;
		grid-row: 1;
		justify-self: center;
		width: var(--wrap);
	}
	#resultList{
		justify-self: center;
		width: var(--wrap);
		margin-bottom: clamp(64px, calc(120 / 768 * 100dvw), 120px);
	}
	#resultMap{
		margin-bottom: 32px;
	}
	#pagenation{
		margin-bottom: clamp(64px, calc(96 / 768 * 100dvw), 96px);
	}
}

#resultSet{
	grid-gap: 24px 64px;
	padding: 24px 0;
	font-family: 'Zen Kaku Gothic New';
	font-weight: 500;
	@media (max-width: 1199.98px) {
		display: grid;
		justify-items: center;
	}
	@media (min-width: 1200px) {
		display: grid;
		grid-template-columns: auto 1fr;
	}
}

#resultCount{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
	text-align: center;
	& span{
		font-size: clamp(24px, calc(32 / 768 * 100dvw), 32px);
		line-height: 1;
		transform: translateY(-0.075em);
		/*
		:has([lsc-lt]) &{
			width: 1.15em;
			white-space: nowrap;
			overflow: hidden;
			&:before{
				content: "00  ";
			}
		}
		*/
	}
}

#resultSwitch{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	grid-gap: 16px clamp(16px, calc(32 / 768 * 100dvw), 32px);
	& summary{
		font-size: 15px;
		letter-spacing: 0.05em;
		text-align: center;
		text-wrap: balance;
	}
	& li{
		display: grid;
		align-items: center;
		letter-spacing: 0.05em;
		font-size: 15px;
		text-align: center;
		text-wrap: balance;
		cursor: pointer;
	}
	/*
	[lsc-lt="Order"]{
		display: none;
	}
	*/
	@media (max-width: 575.98px) {
		& details{
			display: grid;
			grid-template-columns: auto 1fr;
			column-gap: 8px;
			&::details-content{
				all: unset;
				display: block;
				height: 40px;
			}
			&[open]{
				&::details-content{
					position: relative;
					z-index: 10;
				}
				& ul{
					height: auto;
					filter: drop-shadow(0 0 5px color-mix(in srgb, transparent, black 20%));
				}
			}
		}
		& summary{
			display: grid;
			align-items: center;
			height: 40px;
			color: white;
		}
		& ul{
			display: grid;
			height: 40px;
			background: white;
			border-radius: 20px;
			transition: height 0.2s ease-out;
			overflow: hidden;
		}
		& li{
			height: 40px;
			padding: 0 1em;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			&.select{
				order: -1;
			}
			&:not(.select){
				border-top: 1px solid silver;
			}
		}
	}
	@media (min-width: 576px) {
		& details{
			display: flex;
			align-items: center;
			column-gap: 16px;
			&::details-content{
				display: contents;
			}
		}
		& summary{
			color: white;
			pointer-events: none;
		}
		& ul{
			display: flex;
			grid-gap: 8px;
		}
		& li{
			min-width: 6em;
			min-height: 32px;
			padding: 0.25em 1em;
			background: white;
			border-radius: 16px;
			&.select{
				background: #d0e5f6;
				pointer-events: none;
			}
		}
	}
	@media (min-width: 1200px) {
		flex-wrap: nowrap;
		justify-content: end;
		column-gap: 64px;
	}
}

#resultDisplay{
	& li{
		grid-template-columns: auto 1fr;
		column-gap: 8px;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 16px;
			background: var(--color-theme);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><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 16 16"><rect width="4.22" height="4.22"/><rect x="5.89" width="4.22" height="4.22"/><rect x="11.78" width="4.22" height="4.22"/><rect y="5.89" width="4.22" height="4.22"/><rect x="5.89" y="5.89" width="4.22" height="4.22"/><rect x="11.78" y="5.89" width="4.22" height="4.22"/><rect y="11.78" width="4.22" height="4.22"/><rect x="5.89" y="11.78" width="4.22" height="4.22"/><rect x="11.78" y="11.78" width="4.22" height="4.22"/></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 16 16"><rect width="4.22" height="4.22"/><rect y="5.89" width="4.22" height="4.22"/><rect y="11.78" width="4.22" height="4.22"/><rect x="6.4" y="1.11" width="9.6" height="2"/><rect x="6.4" y="7" width="9.6" height="2"/><rect x="6.4" y="12.89" width="9.6" height="2"/></svg>');
		}
		&[data-mode="map"]:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M12.61,5.85c0-2.55-2.07-4.61-4.61-4.61S3.39,3.3,3.39,5.85s4.61,8.51,4.61,8.51c0,0,4.61-5.96,4.61-8.51ZM5.93,5.57c0-1.15.93-2.07,2.07-2.07s2.07.93,2.07,2.07-.93,2.07-2.07,2.07-2.07-.93-2.07-2.07Z"/></svg>');
		}
	}
}

#resultList{
	margin-top: 48px;
	&.line{
		margin-top: clamp(48px, calc(72 / 768 * 100dvw), 72px);
	}
	&:not(.grid):not(.line){
		display: none;
	}
}

#resultMap{
	position: relative;
	height: min(1090px, 80dvw);
	border-radius: 4px;
	overflow: hidden;
	@media (orientation: portrait) {
		height: 75dvh;
	}
	&: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: snow;
		&[LSC-LB="dummy"]{
			display: grid;
			align-content: center;
			justify-items: center;
			grid-gap: 16px;
			padding: 16px;
		}
		& img[src*="commonPin"]{
			width: 40px;
			height: auto;
		}
	}
}

#pagenation{
	#resultList:not(.grid):not(.line)+&{
		visibility: hidden;
	}
}

.featureList{
	& section{
		position: relative;
		display: grid;
		grid-gap: 8px clamp(24px, calc(40 / 768 * 100dvw), 40px);
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 4 / 3;
			background: var(--dummy);
			border-radius: 0 0 clamp(24px, calc(32 / 768 * 100dvw), 32px) 0;
		}
	}
	& h3{
		font-weight: 600;
	}
	& h3+div{
		display: contents;
	}
	& time{
		color: #666666;
		font-size: 15px;
	}
	& a{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		font-size: 0;
	}
	& figure{
		& img{
			aspect-ratio: 4 / 3;
			object-fit: cover;
			border-radius: 0 0 clamp(24px, calc(32 / 768 * 100dvw), 32px) 0;
		}
	}
	&.grid{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 16px), 272px), 1fr));
		grid-gap: 40px clamp(16px, calc(40 / 768 * 100dvw), 40px);
		& section{
			align-content: start;
			&:before{
				grid-column: 1;
				grid-row: 1;
			}
		}
		& h3{
			font-size: clamp(18px, calc(20 / 768 * 100dvw), 20px);
		}
		& p{
			display: none;
		}
		& time{
			grid-row: 2;
		}
		& figure{
			grid-column: 1;
			grid-row: 1;
		}
	}
	&.line{
		& section{
			align-content: start;
			padding: 24px 0;
			&:before{
				grid-column: 1;
			}
			&:first-child{
				margin-top: -24px;
			}
			&:nth-child(n+2){
				border-top: 1px solid #8e8e8e;
			}
			&:last-child{
				margin-bottom: -24px;
			}
		}
		& h3{
			font-size: clamp(20px, calc(28 / 768 * 100dvw), 28px);
		}
		& p{
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			max-height: calc(1.65em * 3);
			overflow: hidden;
			font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
		}
		& figure{
			grid-column: 1;
		}
		@media (max-width: 575.98px) {
			& section{
				&:before,
				& figure{
					grid-row: 1;
				}
			}
			& time{
				grid-row: 2;
			}
		}
		@media (min-width: 576px) {
			& section{
				grid-template-columns: min(40%, 368px) 1fr;
				grid-template-rows: auto auto 1fr;
				&:before,
				& figure{
					grid-row: 1 / 4;
					align-self: start;
				}
			}
			& time{
				grid-row: 1;
			}
		}
	}
}

.itemList{
	& section{
		position: relative;
		display: grid;
		grid-gap: 8px clamp(24px, calc(40 / 768 * 100dvw), 40px);
		&:not(:has(img)):before{
			content: "";
			background: var(--dummy);
			border-radius: 0 0 clamp(24px, calc(32 / 768 * 100dvw), 32px) 0;
		}
	}
	& h3,
	& h4{
		font-weight: 600;
	}
	& h3+div{
		display: contents;
	}
	& button{
		&[data-fav-id]{
			position: relative;
			display: block;
			aspect-ratio: 1;
			width: clamp(32px, calc(40 / 768 * 100dvw), 40px);
			border-radius: 100%;
			background: white;
			border: 1px solid currentColor;
			color: #d7cc99;
			font-size: 0;
			opacity: 0;
			transition: opacity 0.2s ease-out;
			z-index: 3;
			&:before{
				content: "\2605";
				position: absolute;
				top: 50%;
				left: 50%;
				font-size: clamp(16px, calc(20 / 768 * 100dvw), 20px);
				line-height: 1;
				transform: translate(-50%, -50%);
			}
			&[data-fav-id="[& sptId &]"],
			&[data-fav-status]{
				opacity: 1;
			}
			&[data-fav-status="on"]{
				background: #b59028;
				border-color: transparent;
				color: white;
			}
			&[data-fav-status="loading"]{
				background: transparent;
				border-color: transparent;
				color: gray;
				pointer-events: none;
				&:before{
					background: currentColor;
					color: inherit;
					-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-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>') no-repeat center / contain;
				}
			}
		}
	}
	& a{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		font-size: 0;
	}
	& figure{
		& img{
			object-fit: contain;
			background: snow;
			border-radius: 0 0 clamp(24px, calc(32 / 768 * 100dvw), 32px) 0;
		}
	}
	&.grid{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 16px), 224px), 1fr));
		grid-gap: 40px clamp(16px, calc(24 / 768 * 100dvw), 24px);
		& section{
			align-content: start;
			&:before{
				grid-column: 1;
				grid-row: 1;
				aspect-ratio: 1;
			}
		}
		& h3{
			font-size: clamp(18px, calc(20 / 768 * 100dvw), 20px);
		}
		& h4{
			display: none;
		}
		& h5{
			font-size: clamp(12px, calc(16 / 768 * 100dvw), 16px);
		}
		& p{
			display: none;
		}
		& button{
			&[data-fav-id]{
				grid-column: 1;
				grid-row: 1;
				justify-self: end;
				margin: 8px;
			}
		}
		& figure{
			grid-column: 1;
			grid-row: 1;
			& img{
				aspect-ratio: 1;
			}
		}
	}
	&.line{
		& section{
			align-content: start;
			padding: 24px 0;
			&:before{
				grid-column: 1;
				aspect-ratio: 4 / 3;
			}
			&:first-child{
				margin-top: -24px;
			}
			&:nth-child(n+2){
				border-top: 1px solid #8e8e8e;
			}
			&:last-child{
				margin-bottom: -24px;
			}
		}
		& h3{
			font-size: clamp(20px, calc(28 / 768 * 100dvw), 28px);
		}
		& h4{
			color: var(--color-theme);
			font-size: clamp(16px, calc(20 / 768 * 100dvw), 20px);
		}
		& h5{
			order: 1;
			position: relative;
			padding-left: 1em;
			font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
			&:before{
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 8px;
				aspect-ratio: 1;
				border-radius: 100%;
				background: var(--color-theme);
				transform: translateY(calc(0.75em - 50%));
			}
		}
		& p{
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			max-height: calc(1.65em * 3);
			overflow: hidden;
			font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
		}
		& button{
			&[data-fav-id]{
				grid-row: 1;
				justify-self: end;
			}
		}
		& figure{
			grid-column: 1;
			& img{
				aspect-ratio: 4 / 3;
			}
		}
		@media (max-width: 575.98px) {
			& section{
				&:before,
				& figure{
					grid-row: 1;
				}
			}
			& a{
				&[data-fav-id]{
					grid-column: 1;
					margin: 8px;
				}
			}
		}
		@media (min-width: 576px) {
			& section{
				grid-template-columns: min(40%, 368px) 1fr;
				grid-template-rows: auto auto auto 1fr;
				&:before,
				& figure{
					grid-row: 1 / 5;
					align-self: start;
				}
				&:has(h5){
					&:before,
					& figure{
						grid-row: 1 / 6;
						align-self: start;
					}
				}
			}
			& h5{
				margin-top: 16px;
			}
			& a{
				&[data-fav-id]{
					grid-column: 2;
				}
			}
			& a{
				&[data-fav-id]{
					grid-column: 2;
				}
			}
		}
	}
}

.spotList{
	& section{
		position: relative;
		display: grid;
		grid-gap: 8px clamp(24px, calc(40 / 768 * 100dvw), 40px);
		&:not(:has(img)):before{
			content: "";
			background: var(--dummy);
			border-radius: 0 0 clamp(24px, calc(32 / 768 * 100dvw), 32px) 0;
		}
	}
	& h3,
	& h4{
		font-weight: 600;
	}
	& h3+div{
		display: contents;
	}
	& button{
		&[data-fav-id]{
			position: relative;
			display: block;
			aspect-ratio: 1;
			width: clamp(32px, calc(40 / 768 * 100dvw), 40px);
			border-radius: 100%;
			background: white;
			border: 1px solid currentColor;
			color: #d7cc99;
			font-size: 0;
			opacity: 0;
			transition: opacity 0.2s ease-out;
			z-index: 3;
			&:before{
				content: "\2605";
				position: absolute;
				top: 50%;
				left: 50%;
				font-size: clamp(16px, calc(20 / 768 * 100dvw), 20px);
				line-height: 1;
				transform: translate(-50%, -50%);
			}
			&[data-fav-id="[& sptId &]"],
			&[data-fav-status]{
				opacity: 1;
			}
			&[data-fav-status="on"]{
				background: #b59028;
				border-color: transparent;
				color: white;
			}
			&[data-fav-status="loading"]{
				background: transparent;
				border-color: transparent;
				color: gray;
				pointer-events: none;
				&:before{
					background: currentColor;
					color: inherit;
					-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-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>') no-repeat center / contain;
				}
			}
		}
	}
	& a{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		font-size: 0;
	}
	& figure{
		& img{
			object-fit: contain;
			background: snow;
			border-radius: 0 0 clamp(24px, calc(32 / 768 * 100dvw), 32px) 0;
		}
	}
	&.grid{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 16px), 224px), 1fr));
		grid-gap: 40px clamp(16px, calc(24 / 768 * 100dvw), 24px);
		& section{
			align-content: start;
			&:before{
				grid-column: 1;
				grid-row: 1;
				aspect-ratio: 1;
			}
		}
		& h3{
			font-size: clamp(18px, calc(20 / 768 * 100dvw), 20px);
		}
		& h4{
			display: none;
		}
		& h5{
			font-size: clamp(12px, calc(16 / 768 * 100dvw), 16px);
		}
		& p{
			display: none;
		}
		& button{
			&[data-fav-id]{
				grid-column: 1;
				grid-row: 1;
				justify-self: end;
				margin: 8px;
			}
		}
		& figure{
			grid-column: 1;
			grid-row: 1;
			& img{
				aspect-ratio: 1;
			}
		}
	}
	&.line{
		& section{
			align-content: start;
			padding: 24px 0;
			&:before{
				grid-column: 1;
				aspect-ratio: 4 / 3;
			}
			&:first-child{
				margin-top: -24px;
			}
			&:nth-child(n+2){
				border-top: 1px solid #8e8e8e;
			}
			&:last-child{
				margin-bottom: -24px;
			}
		}
		& h3{
			font-size: clamp(20px, calc(28 / 768 * 100dvw), 28px);
		}
		& h4{
			color: var(--color-theme);
			font-size: clamp(16px, calc(20 / 768 * 100dvw), 20px);
		}
		& h5{
			order: 1;
			position: relative;
			padding-left: 1em;
			font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
			&:before{
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 8px;
				aspect-ratio: 1;
				border-radius: 100%;
				background: var(--color-theme);
				transform: translateY(calc(0.75em - 50%));
			}
		}
		& p{
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			max-height: calc(1.65em * 3);
			overflow: hidden;
			font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
		}
		& button{
			&[data-fav-id]{
				grid-row: 1;
				justify-self: end;
			}
		}
		& figure{
			grid-column: 1;
			& img{
				aspect-ratio: 4 / 3;
			}
		}
		@media (max-width: 575.98px) {
			& section{
				&:before,
				& figure{
					grid-row: 1;
				}
			}
			& a{
				&[data-fav-id]{
					grid-column: 1;
					margin: 8px;
				}
			}
		}
		@media (min-width: 576px) {
			& section{
				grid-template-columns: min(40%, 368px) 1fr;
				grid-template-rows: auto auto auto 1fr;
				&:before,
				& figure{
					grid-row: 1 / 5;
					align-self: start;
				}
				&:has(h5){
					&:before,
					& figure{
						grid-row: 1 / 6;
						align-self: start;
					}
				}
			}
			& h5{
				margin-top: 16px;
			}
			& a{
				&[data-fav-id]{
					grid-column: 2;
				}
			}
		}
	}
}