/* CSS Document */

#detail{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	margin: 24px 0 clamp(64px, calc(80 / 1200 * 100vw), 80px) 0;
	&>*{
		grid-column: 2;
	}
	#detailHeader{
		& h2{
			order: -3;
		}
	}
	#detaiLink{
		order: -1;
	}
	#detailPhoto{
		order: -2;
	}
	#detailBody{
		&>h3{
			order: -3;
		}
		&>div{
			order: -1;
		}
	}
	#detailAccessibilityIcon{
		order: -3;
	}
}

#detailHeader{
	display: contents;
	&>*{
		grid-column: 2;
	}
	& h2{
		display: grid;
		justify-items: center;
		grid-row-gap: 8px;
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(24px, calc(32 / 768 * 100vw), 32px);
		letter-spacing: 0.1em;
		&:empty{
			display: none;
		}
		&:after{
			content: attr(data-ruby);
			color: var(--color);
			font-weight: 500;
			font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
		}
	}
	#detailAccessibilityIcon{
		display: grid;
		align-items: center;
		min-height: 48px;
		margin: 16px auto;
		padding: 4px 24px;
		background: var(--color-theme);
		border-radius: clamp(24px, calc(32 / 768 * 100vw), 32px);
		color: #fff;
		letter-spacing: 0.1em;
		text-align: center;
		text-decoration: none;
	}
}

#detaiLink{
	margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
	& ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		grid-gap: 16px 20px;
	}
	& li{
		display: contents;
		&:has(button){
			display: grid;
			width: min(100%, 320px);
			& button{
				grid-column: 1;
				grid-row: 1;
			}
		}
	}
	& a{
		display: grid;
		align-items: center;
		width: min(100%, 320px);
		min-height: clamp(48px, calc(64 / 768 * 100vw), 64px);
		padding: 4px 24px;
		background: var(--color);
		border-radius: clamp(24px, calc(32 / 768 * 100vw), 32px);
		color: #fff;
		letter-spacing: 0.05em;
		text-align: center;
		text-decoration: none;
		&[href]{
			padding-left: 88px;
			background: #0085ba var(--coupon-icon) no-repeat center left / auto min(150%, 96px);
		}
		&[href^="print.html"]{
			padding-left: 24px;
			grid-template-columns: 24px 1fr;
			align-items: center;
			background: #fff;
			border: 1px solid var(--color-border);
			color: inherit;
			&: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 512 512"><path d="M128 0C92.7 0 64 28.7 64 64l0 96 64 0 0-96 226.7 0L384 93.3l0 66.7 64 0 0-66.7c0-17-6.7-33.3-18.7-45.3L400 18.7C388 6.7 371.7 0 354.7 0L128 0zM384 352l0 32 0 64-256 0 0-64 0-16 0-16 256 0zm64 32l32 0c17.7 0 32-14.3 32-32l0-96c0-35.3-28.7-64-64-64L64 192c-35.3 0-64 28.7-64 64l0 96c0 17.7 14.3 32 32 32l32 0 0 64c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-64zM432 248a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg>') no-repeat center / 24px;
			}
		}
	}
	& button{
		all: unset;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: 24px 1fr;
		align-items: center;
		min-height: clamp(48px, calc(64 / 768 * 100vw), 64px);
		padding: 4px 24px;
		background: #d9b04a ;
		border-radius: clamp(24px, calc(32 / 768 * 100vw), 32px);
		color: #fff;
		letter-spacing: 0.05em;
		text-align: center;
		cursor: pointer;
		&:before{
			content: "";
			aspect-ratio: 1;
			background: #fff;
			-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="M17.81,8.18c-1.28-3.64-5.43-2.01-5.81-.19-.53-1.94-4.58-3.38-5.81.19-1.38,3.98,5.33,9.23,5.81,9.81.48-.46,7.19-5.9,5.81-9.82Z" style="fill: white;"/></svg>') no-repeat center / 24px;
		}
		&[data-jc-action="favorite-spot#delete"]{
			background: #d3d3d3;
		}
		&.hidden{
			display: none;
		}
	}
}

#detailTag{
	display: grid;
	grid-gap: 24px;
	margin: 40px 0 64px 0;
	padding: 24px 0;
	border: 1px solid #b3b3b3;
	border-width: 1px 0;
	@media (min-width: 576px) {
		grid-template-columns: auto 1fr;
	}
	& div{
		display: grid;
		grid-row-gap: 8px;
		@media (min-width: 576px) {
			display: contents;
		}
	}
	& h3{
		align-self: center;
		display: grid;
		grid-template-columns: 4px 1fr;
		column-gap: 16px;
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
		&:before {
			content: "";
			height: 1em;
			align-self: start;
			background: var(--color-theme);
			border-radius: 2px;
			transform: translateY(0.325em);
		}
	}
	& ul{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 8px;
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		align-items: center;
		min-height: 40px;
		padding: 2px 16px;
		border: 1px solid #b3b3b3;
		border-radius: 20px;
		color: inherit;
		font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
		text-decoration: none;
	}
}

#detailPhoto{
	grid-column: 1 / 4;
	display: grid;
	grid-template-columns: 1fr min(var(--wrap-fit), 960px) 1fr;
	margin-top: 24px;
	overflow: hidden;
	&>*{
		grid-column: 2;
	}
	& dl{
		display: grid;
		grid-gap: 16px;
		&:nth-child(n+2){
			display: none;
		}
	}
	& dt{
		order: 1;
		justify-self: center;
	}
	& a{
		display: block;
	}
	& img{
		aspect-ratio: 3 / 2;
		object-fit: contain;
		background: #f2f2f2;
		border-radius: 10px;
	}
	#detailPhotoSlideNav{
		margin-top: 40px;
	}
}

#detailPhotoSlide{
	display: grid;
	grid-template-columns: auto 1fr auto;
	&:before{
		content: "";
		grid-column: 1 / 4;
		grid-row: 1;
		aspect-ratio: 3 / 2;
	}
	.slick-list{
		grid-column: 1 / 4;
		grid-row: 1 / 3;
		margin: 0 -10px;
		overflow: visible;
	}
	.slick-slide{
		margin: 0 10px;
	}
	.slick-arrow{
		all: unset;
		align-self: center;
		grid-row: 1;
		position: relative;
		z-index: 1;
		aspect-ratio: 36 / 80;
		width: 40px;
		border-radius: 8px;
		background: rgba(255, 255, 255, 0.6);
		font-size: 0;
		cursor: pointer;
		&:before{
			content: "";
			position: absolute;
			top: 0;
			width: calc(100% - 8px);
			height: 100%;
			background: var(--color);
			-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;"><polyline points="8 4 16 12 8 20"/></svg>') no-repeat center / 24px;
		}
	}
	.slick-prev{
		grid-column: 1;
		transform: translateX(-8px);
		&:before{
			right: 0;
			transform: scale(-1, 1);
		}
	}
	.slick-next{
		grid-column: 3;
		transform: translateX(8px);
		&:before{
			left: 0;
		}
	}
}

#detailPhotoSlideNav{
	display: grid;
	grid-template-columns: auto 1fr auto;
	& dl{
		cursor: pointer;
	}
	& dt{
		display: none;
	}
	& a{
		pointer-events: none;
	}
	& img{
		border-radius: unset;
		font-size: 0;
	}
	.slick-list{
		grid-column: 2;
		grid-row: 1;
		margin: 0 -8px;
	}
	.slick-slide{
		margin: 0 8px;
	}
	.slick-arrow{
		all: unset;
		align-self: center;
		grid-row: 1;
		position: relative;
		z-index: 1;
		aspect-ratio: 1;
		width: 40px;
		border-radius: 8px;
		font-size: 0;
		cursor: pointer;
		&:before{
			content: "";
			position: absolute;
			top: 0;
			width: calc(100% - 8px);
			height: 100%;
			background: var(--color);
			-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;"><polyline points="8 4 16 12 8 20"/></svg>') no-repeat center / 24px;
		}
	}
	.slick-prev{
		grid-column: 1;
		transform: translateX(-8px);
		&:before{
			right: 0;
			transform: scale(-1, 1);
		}
	}
	.slick-next{
		grid-column: 3;
		transform: translateX(8px);
		&:before{
			left: 0;
		}
	}
}

#detailBody{
	display: contents;
	&>*{
		grid-column: 2;
	}
	&>h3{
		justify-self: center;
		margin-top: 16px;
		font-size: clamp(18px, calc(20 / 768 * 100vw), 20px);
		letter-spacing: 0.1em;
		&:empty{
			display: none;
		}
	}
	&>div{
		justify-self: center;
		width: min(100%, 960px);
		margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
	}
	#detailBodyAnnotation{
		margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
	}
}

#detailBodyAnnotation{
	color: #d9002d;
}

#detailBodyLink{
	display: flex;
	justify-content: center;
	& a{
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		align-items: center;
		column-gap: 1em;
		min-width: min(100%, 400px);
		min-height: clamp(56px, calc(64 / 768 * 100vw), 64px);
		padding: 8px 24px;
		background: #fff;
		border: 1px solid #b3b3b3;
		border-radius: clamp(28px, calc(40 / 768 * 100vw), 40px);
		color: inherit;
		font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
		letter-spacing: 0.1em;
		text-align: center;
		text-decoration: none;
		&:before,
		&:after{
			content: "";
			grid-column: 2;
			grid-row: 1;
			aspect-ratio: 1;
			width: clamp(24px, calc(32 / 768 * 100vw), 32px);
		}
		&:before{
			background: currentColor;
			border-radius: 100%;
		}
		&:after{
			background: #fff;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round;"><polyline points="10 16 22 16"/><polyline points="18 12 22 16 18 20"/></svg>') no-repeat center / contain;
		}
		&:hover{
			background: var(--color);
			border-color:transparent;
			color: #fff;
			&:after{
				background: var(--color);
			}
		}
	}
}

#detailTopics{
	grid-column: 1 / 4;
	background: #fcf6bb;
	padding-bottom: 72px;
	-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 10 10"><rect width="10" height="10"/></svg>') no-repeat center top / 100% calc(100% - clamp(6px, calc(12 / 768 * 100vw), 12px)), url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 12"><path d="M90,0c10.01,0,14.71,2.51,20.16,5.42,5.79,3.09,12.35,6.58,24.84,6.58s19.05-3.5,24.84-6.58c5.45-2.91,10.15-5.42,20.16-5.42h-90ZM20.16,5.42c5.79,3.09,12.35,6.58,24.84,6.58s19.05-3.5,24.84-6.58c5.45-2.91,10.15-5.42,20.16-5.42H0c10.01,0,14.71,2.51,20.16,5.42Z"/></svg>') repeat-x center bottom / auto clamp(6px, calc(12 / 768 * 100vw), 12px);
	& section{
		grid-column: 2;
		display: grid;
		grid-template-columns: 1fr min(var(--wrap-fit), 660px) 1fr;
		justify-items: center;
		margin-top: 64px;
		&>*{
			grid-column: 2;
		}
	}
	& h3{
		font-weight: 700;
		font-size: clamp(20px, calc(24 / 768 * 100vw), 24px);
		letter-spacing: 0.1em;
	}
	.fr-view{
		margin-top: 16px;
	}
	.slide{
		grid-column: 1 / 4;
		width: min(var(--wrap-fit), 1140px);
		margin-top: 40px;
		overflow: hidden;
		& dl{
			position: relative;
			display: grid;
			grid-gap: 8px;
			grid-template-rows: auto 1fr;
			&:has(img){
				grid-template-rows: auto auto 1fr;
			}
		}
		& dt{
			margin: 0 20px;
			font-weight: 700;
			font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
		}
		& dd{
			&:nth-of-type(1){
				margin: 0 20px;
				font-size: 14px;
			}
			&:has(img){
				order: -1;
			}
			&:has(a){
				display: flex;
				justify-content: center;
				margin: 16px 20px 1px 20px;
			}
			& img{
				aspect-ratio: 3 / 2;
				object-fit: cover;
				border-radius: 8px;
			}
			& a{
				display: grid;
				grid-template-columns: auto auto;
				justify-content: center;
				align-items: center;
				min-height: 40px;
				padding: 4px 16px;
				background: #fff;
				border: 1px solid #b3b3b3;
				border-radius: 20px;
				color: inherit;
				font-size: 12px;
				text-align: center;
				text-decoration: none;
				&:after{
					content: "";
					grid-column: 2;
					grid-row: 1;
					aspect-ratio: 1;
					width: 32px;
				}
				&:after{
					background: currentColor;
					transform: translateX(1em);
					-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round;"><polyline points="10 16 22 16"/><polyline points="18 12 22 16 18 20"/></svg>') no-repeat center / contain;
				}
				&:hover{
					background: var(--color-theme-sub);
					color: #fff;
				}
			}
		}
		&.slick-slider{
			display: grid;
			grid-template-columns: auto 1fr auto;
			@media (max-width: 575.98px) {
				overflow: hidden;
			}
			&:before{
				content: "";
				grid-column: 1 / 4;
				grid-row: 1;
				aspect-ratio: 3 / 2;
				width: calc(100% - 100px);
				visibility: hidden;
			}
			@media (min-width: 576px) {
				&:before{
					width: calc((100% - 20px) / 2);
				}
			}
			@media (min-width: 768px) {
				&:before{
					width: calc((100% - 40px) / 3);
				}
			}
			@media (min-width: 1200px) {
				&:before{
					width: calc((100% - 60px) / 4);
				}
			}
		}
		.slick-list{
			grid-column: 1 / 4;
			grid-row: 1 / 3;
			margin: 0 -10px;
			overflow: visible;
			@media (max-width: 575.98px) {
				padding-right: 100px;
			}
		}
		.slick-slide{
			margin: 0 10px;
		}
		.slick-arrow{
			all: unset;
			align-self: center;
			grid-row: 1;
			position: relative;
			z-index: 1;
			aspect-ratio: 36 / 80;
			width: 40px;
			border-radius: 8px;
			background: rgba(252, 246, 187, 0.6);
			font-size: 0;
			cursor: pointer;
			&:before{
				content: "";
				position: absolute;
				top: 0;
				width: calc(100% - 8px);
				height: 100%;
				background: var(--color);
				-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;"><polyline points="8 4 16 12 8 20"/></svg>') no-repeat center / 24px;
			}
		}
		.slick-prev{
			grid-column: 1;
			transform: translateX(-8px);
			&:before{
				right: 0;
				transform: scale(-1, 1);
			}
		}
		.slick-next{
			grid-column: 3;
			transform: translateX(8px);
			&:before{
				left: 0;
			}
		}
	}
}

#detailOkatabi{
	grid-column: 1 / 4;
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	padding: 64px 0 80px 0;
	background: var(--color-theme) url("/common/images/pattern.webp") center;
	-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 10 10"><rect width="10" height="10"/></svg>') no-repeat center bottom / 100% calc(100% - clamp(6px, calc(12 / 768 * 100vw), 12px)), url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 12"><path d="M69.84,6.58c-5.79-3.09-12.35-6.58-24.84-6.58s-19.05,3.5-24.84,6.58c-5.45,2.91-10.15,5.42-20.16,5.42h90c-10.01,0-14.71-2.51-20.16-5.42Z"/></svg>') repeat-x center top / auto clamp(6px, calc(12 / 768 * 100vw), 12px);
	#detailTopics+&{
		margin-top: -16px;
	}
	&>*{
		grid-column: 2;
	}
	& h3{
		display: grid;
		justify-items: center;
		grid-row-gap: 16px;
		color: #fff;
		font-size: clamp(20px, calc(24 / 768 * 100vw), 24px);
		letter-spacing: 0.1em;
		text-align: center;
		&:before{
			content: "";
			aspect-ratio: 300 / 103;
			width: 160px;
			background: url("/images/okatabi_title.pc.svg") no-repeat center 30% / auto 190%;
		}
	}
	& h3+div{
		display: grid;
		grid-gap: 24px;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
		margin-top: 40px;
	}
	& dl{
		position: relative;
		display: grid;
		grid-template-columns: 120px 1fr;
		column-gap: 16px;
		&:not(:has(img)){
			&:before{
				content: "";
				aspect-ratio: 1;
				border-radius: 10px;
				background: var(--dummy);
			}
		}
	}
	& dt{
		color: #fff;
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
	}
	& dd{
		display: contents;
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
		& img{
			order: -1;
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 10px;
		}
	}
}

#detailBasic{
	justify-self: center;
	width: min(100%, 960px);
	margin-top: clamp(64px, calc(80 / 1200 * 100vw), 80px);
	& h3{
		font-weight: 700;
		font-size: clamp(20px, calc(24 / 768 * 100vw), 24px);
		letter-spacing: 0.1em;
		text-align: center;
	}
	& h3+div{
		margin-top: 16px;
	}
	& h3+div+div{
		margin-top: 16px;
		& p{
			padding-left: 1em;
			color: #d9002d;
			font-size: clamp(12px, calc(14 / 768 * 100vw), 14px);
			text-indent: -1em;
		}
	}
	& dl{
		display: grid;
		column-gap: 24px;
		border-top: 1px solid #bababa;
		overflow: hidden;
		@media (min-width: 576px) {
			grid-template-columns: auto 1fr;
		}
	}
	& dt,
	& dd{
		padding: 16px 0;
	}
	& dt{
		color: var(--color-theme);
		font-weight: 700;
		@media (max-width: 575.98px) {
			padding-bottom: 0;
		}
		@media (min-width: 576px) {
			min-width: 120px;
			max-width: 320px;
		}
	}
	& dd{
		position: relative;
		&:before{
			content: "";
			position: absolute;
			bottom: 0;
			right: 0;
			width: 100vw;
			border-bottom: 1px solid #bababa;
		}
		& ul{
			display: grid;
			grid-row-gap: 8px;
		}
		& li{
			& a{
				display: grid;
				grid-template-columns: 17px auto;
				grid-column-gap: 8px;
				&:before{
					content: "";
					aspect-ratio: 1;
					background: currentColor;
					transform: translateY(0.4em);
					-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><rect x="6" y="1" width="10" height="10"/><polyline points="1 4 1 16 13 16"/></svg>') no-repeat center / contain;
				}
			}
		}
	}
}

#detailMovie{
	justify-self: center;
	width: min(100%, 960px);
	margin-top: 24px;
	& h3{
		display: none;
	}
	& iframe{
		aspect-ratio: 16 / 9;
		width: 100%;
		height: auto;
		&.short{
			aspect-ratio: 9 / 16;
		}
	}
}

#detailAccessibility{
	justify-self: center;
	width: min(100%, 960px);
	margin-top: clamp(80px, calc(120 / 1200 * 100vw), 120px);
	scroll-margin-top: clamp(16px, calc(32 / 1200 * 100vw), 32px);
	& h3{
		align-self: center;
		display: grid;
		grid-template-columns: 4px 1fr;
		column-gap: 16px;
		font-weight: 700;
		font-size: clamp(20px, calc(24 / 768 * 100vw), 24px);
		&:before {
			content: "";
			height: 1em;
			align-self: start;
			background: var(--color-theme);
			border-radius: 2px;
			transform: translateY(0.325em);
		}
	}
	& h3+div{
		padding: 40px 0 0 0;
	}
	& ul{
		display: grid;
		grid-gap: 16px;
		grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 8px), 140px), 1fr));
	}
	& li{
		display: grid;
		grid-template-rows: auto 1fr;
		align-items: center;
		justify-items: center;
		grid-row-gap: 8px;
		padding: 8px;
		border: 2px solid currentColor;
		border-radius: 10px;
		color: var(--color-theme);
		font-size: clamp(12px, calc(15 / 768 * 100vw), 15px);
		font-family: var(--font-title);
		text-align: center;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 72px;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"></svg>') no-repeat center / contain;
		}
		&[data-cat="1"]:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.28px;"><path d="M35.6,47.26c.45.2.84.54,1.1.99l5.03,8.71c.78,1.35,2.5,1.81,3.85,1.03,1.35-.78,1.81-2.5,1.03-3.85l-6.7-11.6c-.66-1.14-1.88-1.85-3.2-1.85h-4.39"/><circle cx="25.73" cy="18.46" r="5.32" transform="translate(-5.52 23.6) rotate(-45)"/><circle cx="19.15" cy="51.31" r="5.24"/><path d="M11.6,40.68s-.5-10.67-1.23-15.74c-.24-1.66-6.57-2.84-6.57-2.84"/><path d="M19.29,38.27v1.91c0,1.31-1.06,2.37-2.37,2.37s-2.37-1.06-2.37-2.37v-1.07c-4.93,1.86-8.44,6.62-8.44,12.2,0,7.2,5.84,13.04,13.04,13.04s13.04-5.84,13.04-13.04-5.76-12.96-12.9-13.03Z"/><path d="M28.95,37.5v-8.9c0-2.68-2.17-4.85-4.85-4.85-1.65,0-3.12,1.14-3.98,2.07l-4.41,5.14c-.74.81-1.15,1.88-1.15,2.98v6.24c0,1.31,1.06,2.37,2.37,2.37h0c1.31,0,2.37-1.06,2.37-2.37v-4.41c0-1.1.41-2.16,1.15-2.98l1.85-2.03"/><path d="M50.8,12.04h4.46c2.8,0,5.11.99,5.11,4.13s-2.34,4.35-5.02,4.35h-1.49v4.22h-3.06v-12.7ZM55.19,18.12c1.49,0,2.2-.7,2.2-1.95s-.82-1.72-2.29-1.72h-1.25v3.67h1.33Z" style="fill: black; stroke: none;"/><path d="M63.76,7.65h-16.98c-2.45,0-4.44,1.99-4.44,4.44v12.47c0,2.45,1.99,4.44,4.44,4.44h1.22l-1.36,4.88,6.82-4.88h10.29c2.45,0,4.44-1.99,4.44-4.44v-12.47c0-2.45-1.99-4.44-4.44-4.44Z"/></svg>');
		}
		&[data-cat="2"]:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.28px;"><path d="M26.74,14.96c.62,3.07-1.37,6.06-4.44,6.68-3.07.62-6.06-1.37-6.68-4.44-.62-3.07,1.37-6.06,4.44-6.68,3.07-.62,6.06,1.37,6.68,4.44Z"/><circle cx="23.57" cy="42.94" r="11.99" transform="translate(-.92 .52) rotate(-1.23)"/><path d="M21.2,31.19c2.63-.53,5.24-.15,7.49.91-.21-.26-.37-.57-.45-.93l-1.19-5.9c-.43-2.14-2.33-3.75-4.51-3.66-2.75.12-4.65,2.67-4.13,5.26l.97,4.83c.58-.21,1.18-.39,1.81-.51Z"/><path d="M47.53,41.78l-7.35-9.4c-.69-.85-1.82-1.14-2.8-.82-.1.01-.2.02-.29.04l-6.29,1.27c-.24.05-.47.04-.7.02,2.11,1.37,3.79,3.39,4.71,5.86l1.82-.37c.93-.19,1.88.17,2.46.92l4.5,5.84c.98,1.19,2.81,1.29,3.9.12.9-.96.88-2.47.04-3.48Z"/><circle cx="23.57" cy="42.94" r="6.65" transform="translate(-24.43 52.7) rotate(-72.73)"/><line x1="60.42" y1="44.41" x2="20.28" y2="61.57"/><line x1="14.65" y1="61.6" x2="60.42" y2="61.6"/></svg>');
		}
		&[data-cat="3"]:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.28px;"><circle cx="46.88" cy="30.07" r="2.98"/><path d="M43.01,38.86v19.32c0,1.07.86,1.93,1.93,1.93h0c1.07,0,1.93-.86,1.93-1.93v-12.37"/><path d="M43.61,33.98c-.91.25-1.63.58-2.04.93-.83.73-1.92,2.02-1.92,4.36v7.96c0,1.6.83,2.15,1.6,2.15.95,0,1.77-.63,1.77-1.9"/><path d="M50.74,38.86v19.32c0,1.07-.86,1.93-1.93,1.93h0c-1.07,0-1.93-.86-1.93-1.93v-12.37"/><path d="M50.14,33.98c.91.25,1.63.58,2.04.93.83.73,1.92,2.02,1.92,4.36,0,2.34,0,6.2,0,7.96,0,1.6-.83,2.15-1.6,2.15-.95,0-1.77-.63-1.77-1.9"/><circle cx="25.46" cy="30.07" r="2.98"/><path d="M21.6,38.86v19.32c0,1.07.86,1.93,1.93,1.93h0c1.07,0,1.93-.86,1.93-1.93v-12.37"/><path d="M22.2,33.98c-.91.25-1.63.58-2.04.93-.83.73-1.92,2.02-1.92,4.36v7.96c0,1.6.83,2.15,1.6,2.15.95,0,1.77-.63,1.77-1.9"/><path d="M29.33,38.86v19.32c0,1.07-.86,1.93-1.93,1.93h0c-1.07,0-1.93-.86-1.93-1.93v-12.37"/><path d="M28.73,33.98c.91.25,1.63.58,2.04.93.83.73,1.92,2.02,1.92,4.36,0,2.34,0,6.2,0,7.96,0,1.6-.83,2.15-1.6,2.15-.95,0-1.77-.63-1.77-1.9"/><rect x="12.67" y="21.58" width="46.66" height="42.58"/><polygon points="29.66 13.34 25.43 7.84 21.2 13.34 23.87 13.34 23.87 18.06 27.18 18.06 27.18 13.34 29.66 13.34"/><polygon points="48.42 12.57 48.42 7.84 45.1 7.84 45.1 12.57 42.62 12.57 46.85 18.06 51.08 12.57 48.42 12.57"/></svg>');
		}
		&[data-cat="4"]:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.28px;"><path d="M34.06,47.26c.45.2.84.54,1.1.99l5.03,8.71c.78,1.35,2.5,1.81,3.85,1.03,1.35-.78,1.81-2.5,1.03-3.85l-6.7-11.6c-.66-1.14-1.88-1.85-3.2-1.85h-4.39"/><circle cx="24.19" cy="18.46" r="5.32" transform="translate(-5.97 22.51) rotate(-45)"/><circle cx="17.62" cy="51.31" r="5.24"/><path d="M10.06,40.68s-.5-10.67-1.23-15.74c-.24-1.66-6.57-2.84-6.57-2.84"/><path d="M17.75,38.27v1.91c0,1.31-1.06,2.37-2.37,2.37s-2.37-1.06-2.37-2.37v-1.07c-4.93,1.86-8.44,6.62-8.44,12.2,0,7.2,5.84,13.04,13.04,13.04s13.04-5.84,13.04-13.04-5.76-12.96-12.9-13.03Z"/><path d="M27.41,37.5v-8.9c0-2.68-2.17-4.85-4.85-4.85-1.65,0-3.12,1.14-3.98,2.07l-4.41,5.14c-.74.81-1.15,1.88-1.15,2.98v6.24c0,1.31,1.06,2.37,2.37,2.37h0c1.31,0,2.37-1.06,2.37-2.37v-4.41c0-1.1.41-2.16,1.15-2.98l1.85-2.03"/><path d="M41.36,13.56h2.62l.67,4.86.43,3.38h.06c.2-1.13.42-2.28.63-3.38l1.09-4.86h2.15l1.12,4.86c.22,1.09.4,2.24.62,3.38h.07c.13-1.15.27-2.28.4-3.38l.69-4.86h2.44l-1.85,10.67h-3.23l-.96-4.65c-.17-.82-.32-1.68-.42-2.48h-.07c-.13.8-.26,1.66-.42,2.48l-.93,4.65h-3.17l-1.95-10.67Z" style="fill: black; stroke: none;"/><path d="M55.31,18.96c0-3.56,2.38-5.59,5.09-5.59,1.39,0,2.51.65,3.24,1.39l-1.35,1.63c-.53-.49-1.09-.83-1.85-.83-1.38,0-2.51,1.23-2.51,3.31s.97,3.36,2.48,3.36c.85,0,1.54-.43,2.04-.98l1.35,1.61c-.9,1.05-2.09,1.58-3.49,1.58-2.71,0-5.01-1.87-5.01-5.48Z" style="fill: black; stroke: none;"/><path d="M65.3,7.65h-25.17c-2.45,0-4.44,1.99-4.44,4.44v12.47c0,2.45,1.99,4.44,4.44,4.44h1.22l-1.36,4.88,6.82-4.88h18.49c2.45,0,4.44-1.99,4.44-4.44v-12.47c0-2.45-1.99-4.44-4.44-4.44Z"/></svg>');
		}
		&[data-cat="5"]:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.28px;"><line x1="31.01" y1="34.76" x2="40.99" y2="34.76"/><line x1="36" y1="29.76" x2="36" y2="39.75"/><polyline points="38.43 17.38 38.43 23.58 33.57 23.58 33.57 17.38"/><line x1="38.43" y1="10.4" x2="38.43" y2="13.26"/><line x1="33.57" y1="13.26" x2="33.57" y2="10.4"/><path d="M39.74,46.02c-1.3-.36-3.39.41-3.74,1.76-.35-1.35-2.43-2.12-3.74-1.76-1.75.49-2.68,2.12-2.65,3.68.04,3,2.99,5.63,6.39,6.57,3.39-.94,6.35-3.57,6.39-6.57.02-1.55-.9-3.19-2.65-3.68Z"/><rect x="32.87" y="13.26" width="6.27" height="4.11"/><path d="M29.65,20.24h-5.84c-1.21,0-2.2.98-2.2,2.2v36.96c0,1.21.98,2.2,2.2,2.2h24.38c1.21,0,2.2-.98,2.2-2.2V22.44c0-1.21-.98-2.2-2.2-2.2h-5.84"/></svg>');
		}
		&[data-cat="6"]:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.28px;"><circle cx="19.32" cy="15.81" r="5.41" transform="translate(-5.53 18.29) rotate(-45)"/><circle cx="52.92" cy="36.14" r="3" transform="translate(-6.92 13.2) rotate(-13.35)"/><path d="M18.24,29.25l3.54,5.32c.39.59,1.03.99,1.73,1.08l6.48.82c1.32.17,2.52-.83,2.57-2.2.04-1.19-.91-2.19-2.09-2.34l-4.32-.55c-.71-.09-1.34-.48-1.73-1.08l-2.34-3.52"/><path d="M24.82,30.77v-4.04c0-3.03-2.48-5.5-5.5-5.5s-5.5,2.48-5.5,5.5v10.1c0,1.8.88,3.39,2.22,4.4h0v17.08c0,1.82,1.48,3.3,3.3,3.3s3.3-1.48,3.3-3.3v-17.08h0c1.34-1.01,2.22-2.6,2.22-4.4v-1.02"/><path d="M41.73,32.99h4.28c1.55,0,2.94,1.1,3.18,2.63.3,1.93-1.21,3.62-3.09,3.62h-3.5s-5.72,0-5.72,0v-8.71c0-.67-.38-1.29-.99-1.59l-2-.96c-.97-.51-1.29-1.78-.63-2.7.54-.76,1.6-.96,2.42-.52l4.88,2.45c.69.36,1.05,1.11.97,1.84,0,.07.01.14.01.21v3.55"/><polyline points="58.19 39.37 28 39.37 28 45.25 58.19 45.25"/></svg>');
		}
		&[data-cat="7"]:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.28px;"><path d="M17.8,43.04c.65,5.66,2.82,10.33,6.22,13.64,6.73,6.55,17.22,6.55,23.95,0,3.41-3.32,5.58-7.98,6.22-13.64,1.3-11.36-3.81-32.64-18.2-32.64s-19.5,21.28-18.2,32.64Z"/><circle cx="36" cy="25.35" r="10.21" transform="translate(-8 27.06) rotate(-37.38)"/><path d="M33.33,15.8s-.46,4.95,6.1,4.88c0,0-2.22-2.42-1.61-4.74"/><line x1="42.8" y1="35.49" x2="32.95" y2="45.62"/><line x1="36.54" y1="40.77" x2="30.84" y2="36.12"/><path d="M31.23,26.13c0,.06-.05.12-.12.12s-.12-.05-.12-.12.05-.12.12-.12.12.05.12.12Z"/><path d="M41,26.13c0,.06-.05.12-.12.12s-.12-.05-.12-.12.05-.12.12-.12.12.05.12.12Z"/></svg>');
		}
		&[data-cat="8"]:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.28px;"><circle cx="29.89" cy="47.25" r="12.07"/><circle cx="48.57" cy="56.22" r="3.11" transform="translate(-10.03 101.89) rotate(-87.11)"/><path d="M17.02,13.97h2.35c.72,0,1.33.52,1.44,1.24l3.3,21.46"/><path d="M21.09,17.05h2.35c.72,0,1.33.52,1.44,1.24l2.64,17.14"/><rect x="10.4" y="12.68" width="6.62" height="3.21" rx="1.61" ry="1.61"/><path d="M61.14,54.51l-5.22,1.36c-.33.09-.66-.11-.75-.44h0c-.09-.33.11-.66.44-.75l5.22-1.36c.33-.09.66.11.75.44h0c.09.33-.11.66-.44.75Z"/><path d="M48.57,53.11v-17.24c0-2.08-1.68-3.76-3.76-3.76h-17.81"/><path d="M37.37,37.79h12.92c.62,0,1.17.4,1.36.98l5.16,15.48"/><line x1="35.16" y1="41.99" x2="24.62" y2="52.52"/><line x1="35.16" y1="52.52" x2="24.62" y2="41.99"/><line x1="37.34" y1="47.25" x2="22.44" y2="47.25"/><line x1="29.89" y1="54.71" x2="29.89" y2="39.8"/></svg>');
		}
		&[data-cat="9"]:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.28px;"><path d="M25.44,18.46c-.55.85-.8,1.82-.86,2.78-.04.74-.16,2.15.56,2.64,1.55,1.04,3.7-1.88,4.28-2.89.38-.67-.81-2.71-.81-2.71"/><path d="M45.79,49.03c-1.04,4.07-.53,8.73-.53,12.57"/><path d="M28.93,38.81s11.98-4.71,17.55-12.66c0,0,3.37,1.56,7.35,1.41,0,0-.46,24.27-.06,28.58h-5.32s1.09-10.38-.99-13.25c-2.08-2.87-5.1-3.51-7.02-2.87-1.92.64-10.92,3.86-10.92,3.86l-.58-5.06Z"/><path d="M49.1,23.12s4.6-5.74,10.35-12.72" style="fill: none; stroke: black; stroke-dasharray: 0 4.55; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.28px;"/><path d="M31.76,43.07c-.06,1.34-.2,2.71-.14,4.12.22,4.96,3.37,5.78,3.69,14.41"/><path d="M60.8,30.65c-2.62.15-4.12.13-7.02-.17"/><path d="M44.84,28.2c-3.95-1.86-7.35-4.97-9.92-8.44-.89-1.21-1.59-2.59-2.72-3.59-2.21-1.97-4.95-2.13-7.72-1.7-2.42.38-3.23,3.18-4.44,4.92-.94,1.35-2.4,2.09-3.96,2.48-1.39.35-3.41.16-4.57,1.05-1.06.81.94,4.01,1.46,4.86.53.87,1.16,1.71,2.05,2.19.53.28,1.11.43,1.69.57,2.28.56,4.56,1.12,6.84,1.68,3.07.75,5.77,2.57,7.26,5.41.05.1.09.19.14.29"/><path d="M53.68,54.49c2.65,0,3.21-.15,7.12-.47"/><line x1="45.55" y1="34.78" x2="49.64" y2="34.78"/><line x1="47.6" y1="32.74" x2="47.6" y2="36.83"/></svg>');
		}
		&[data-cat="10"]:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.28px;"><path d="M36.24,33.91c-1.75,6.57-6.08,9.31-10.7,9.31s-8.95-2.74-10.7-9.31"/><path d="M14.15,30.08c-.74-3.12.08-6.41,2.34-8.71,2.49-2.53,5.67-3.61,9.05-3.61s6.56,1.07,9.05,3.61c2.26,2.3,3.08,5.59,2.34,8.71"/><path d="M33.56,31.24c-7.12-.8-12.47-5.84-12.47-5.84"/><path d="M21.5,25.89s-.86,4.4-4.18,5.33"/><path d="M14.15,47.26s-4.86.79-6.68,3.53c-1.82,2.73-2.25,7.92-2.25,7.92"/><path d="M36.93,47.26s4.86.79,6.68,3.53c1.82,2.73,2.25,7.92,2.25,7.92"/><polygon points="23.04 46.07 16.47 45.09 17.54 50.02 23.04 46.07"/><polygon points="23.04 46.07 20.09 52.03 25.11 52.52 23.04 46.07"/><path d="M23.81,46.4s5.76.94,8.33-1.23"/><line x1="33.56" y1="48.81" x2="25.54" y2="58.25"/><line x1="22.61" y1="54.8" x2="25.54" y2="58.25"/><line x1="2.88" y1="62.36" x2="48.2" y2="62.36"/><path d="M14.73,30.08c-1.44,0-2.6,1.22-2.6,2.72s1.16,2.72,2.6,2.72c.08,0,.16,0,.24-.01"/><path d="M36.35,30.08c1.44,0,2.6,1.22,2.6,2.72s-1.16,2.72-2.6,2.72c-.08,0-.16,0-.24-.01"/><path d="M34.28,43.71c.73.44,1.57.7,2.48.7,2.65,0,4.8-2.15,4.8-4.8,0-.93-.27-1.8-.73-2.54"/><path d="M64.68,9.64h-16.98c-2.45,0-4.44,1.99-4.44,4.44v12.47c0,2.45,1.99,4.44,4.44,4.44h1.22l-1.36,4.88,6.82-4.88h10.29c2.45,0,4.44-1.99,4.44-4.44v-12.47c0-2.45-1.99-4.44-4.44-4.44Z"/><polyline points="52.8 21.62 60.56 13.85 62.59 15.88 54.82 23.64"/><polygon points="50.1 26.34 52.76 25.63 50.81 23.68 50.1 26.34"/></svg>');
		}
		&[data-cat="11"]:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.28px;"><circle cx="30.81" cy="46.05" r="5.25" transform="translate(-15.61 76.29) rotate(-89.29)"/><path d="M27.1,42.34c-2.12-7.24-4.12-20.52,1.46-26.98,4.6-5.32,13.31-6.06,19.37-3.65,6.59,2.62,11.9,9.66,13.06,16.63.36,2.15-1.98,5.88-4.04,6.53-3.28,1.04-4.07-3.83-4.41-6.02-.75-4.75-2.55-10.13-7.57-11.97-4.09-1.51-9.95-1.22-12.65,2.69-3.6,5.23-1.66,15.78.05,21.47"/><path d="M26.06,55.04c.4,10.86,13.79,5.85,18.79,1.92,5.82-4.58,8.78-9.32,9.8-16.42"/><path d="M35.66,31.7c-.19-1.84-.14-4.21,1.3-5.56,2.27-2.14,5.57-1.9,7.88.05,2.43,2.05,2.61,5.06,1.9,7.95-1.43,5.77-3.61,12.52-10.09,14.19"/><path d="M15.23,41.45c5.93,4.79,5.93,12.9,0,17.7"/><path d="M10.97,45.29c3.36,2.71,3.36,7.3,0,10.01"/></svg>');
		}
		&[data-cat="12"]:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.28px;"><path d="M59.21,60.9v-5.92c0-1.95,2.42-10.64,2.39-17.81-.53-5.75-2.2-12.95-3.29-14.87-2.13-3.79-3.64-6-5.49-8.14-1.31-1.51-2.85-2.15-4.42-1.28h0c-1.57.87-2.15,2.85-1.28,4.42l5.24,7.52c1.17,2.33,1.79,6.05,1.79,6.05"/><path d="M47.06,60.9c0-5.29-4.63-5.97-6.72-8.7-1-1.31-4.6-6.87-1.43-7.71,2.76-.73,2.69,1.58,4.62,2.92,2.86,1.98,7.06.13,7.38-3.4.19-2.06-1.15-3.86-2.98-4.67-1.75-.77-3.5,0-4.82,1.21-1.32,1.22-3.19,4.52-5.35,3.27-2.24-1.3-.4-5.27.59-6.76,1.42-2.13,3.55-4.33,6.18-4.78,2.47-.42,7.05,0,10.16,3.31"/><path d="M14.87,11.1h20.03c2.47,0,4.47,2,4.47,4.47v8.67c0,2.47-2,4.47-4.47,4.47h-3.03c-.87,0-1.5.83-1.27,1.67l.95,3.48-5.6-4.48c-.54-.43-1.21-.67-1.9-.67h-9.17c-2.47,0-4.47-2-4.47-4.47v-8.67c0-2.47,2-4.47,4.47-4.47Z"/><path d="M31.75,48.23s-7.05,1.81-8.33,8.56"/><path d="M31.39,42.7s-7.62.97-10.75,8.02"/></svg>');
		}
	}
	& menu{
		all: unset;
		box-sizing: border-box;
		justify-self: center;
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		width: min(100%, 400px);
		min-height: clamp(48px, calc(64 / 768 * 100vw), 64px);
		margin-top: 40px;
		padding: 4px 24px;
		background: var(--color-theme);
		border-radius: clamp(24px, calc(32 / 768 * 100vw), 32px);
		color: #fff;
		font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
		letter-spacing: 0.1em;
		text-align: center;
		text-decoration: none;
		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;"><polyline points="0 8 16 8"/><polyline points="8 0 8 16"/></svg>') no-repeat center / contain;
		}
		&:hover{
			background: var(--color);
			border-color:transparent;
			color: #fff;
		}
		&.open:after{
			-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;"><polyline points="0 8 16 8"/></svg>') no-repeat center / contain;
		}
	}
}

#detailFooter{
	display: contents;
}

#detailMap{
	order: 1;
	grid-column: 1 / 4;
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	grid-row-gap: clamp(24px, calc(40 / 1200 * 100vw), 40px);
	margin-top: clamp(80px, calc(120 / 1200 * 100vw), 120px);
	&>*{
		grid-column: 2;
	}
	& h3{
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(24px, calc(32 / 1200 * 100vw), 32px);
		letter-spacing: 0.05em;
		text-align: center;
		&:lang(en){
			font-size-adjust: 0.543;
			font-family: dinosaur, var(--font);
		}
	}
	#detailMapApi{
		grid-column: 1 / 4;
		grid-row: 1;
	}
	#detailMapEmbed{
		grid-column: 1 / 4;
		grid-row: 1;
	}
	#detailMapJc{
		grid-column: 1 / 4;
		grid-row: 1;
	}
}

#detailMapApi{
	& #gMap{
		width: 100%;
		height: min(75vh, 550px);
		background: #ccc;
	}
}

#detailMapEmbed{
	& iframe{
		width: 100%;
		height: min(75vh, 550px);
		background: #ccc;
	}
}

#detailMapJc{
	& iframe{
		width: 100%;
		height: min(75vh, 550px);
		background: #ccc;
	}
}

#detailMapLink{
	& ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		grid-gap: 16px 24px;
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		align-items: center;
		column-gap: 1em;
		width: min(100%, 400px);
		min-height: clamp(60px, calc(80 / 768 * 100vw), 80px);
		padding: 0.5em 1em;
		border: 1px solid #b3b3b3;
		background: #fff;
		border-radius: clamp(28px, calc(40 / 768 * 100vw), 40px);
		color: inherit;
		font-size: clamp(14px, calc(20 / 768 * 100vw), 20px);
		letter-spacing: 0.1em;
		text-align: center;
		text-decoration: none;
		&:before,
		&:after{
			content: "";
			grid-column: 2;
			grid-row: 1;
			aspect-ratio: 1;
			width: clamp(24px, calc(32 / 768 * 100vw), 32px);
		}
		&:before{
			background: currentColor;
			border-radius: 100%;
		}
		&:after{
			background: #fff;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round;"><polyline points="10 16 22 16"/><polyline points="18 12 22 16 18 20"/></svg>') no-repeat center / 32px;
		}
		&:hover{
			background: var(--color);
			border-color:transparent;
			color: #fff;
			&:after{
				background: var(--color);
			}
		}
		&[data-type="jc"]{
			cursor: pointer;
			&.open:after{
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round;"><polyline points="12 12 20 20"/><polyline points="20 12 12 20"/></svg>') no-repeat center / 32px;
			}
		}
	}
}

#related{
	display: grid;
	grid-gap: clamp(64px, calc(80 / 1200 * 100vw), 80px) 40px;
	width: var(--wrap);
	margin: clamp(80px, calc(120 / 1200 * 100vw), 120px) auto;
	& h2{
		display: none;
	}
	& h3{
		align-self: center;
		display: grid;
		grid-template-columns: 4px 1fr;
		column-gap: 16px;
		font-weight: 700;
		font-size: clamp(20px, calc(24 / 768 * 100vw), 24px);
		&:before{
			content: "";
			height: 1em;
			align-self: start;
			background: var(--color-theme);
			border-radius: 2px;
			transform: translateY(0.325em);
		}
	}
	& h3+div{
		margin-top: 24px;
	}
	.slick-slider{
		display: grid;
		grid-template-columns: auto 1fr auto;
		overflow: hidden;
		&:before{
			content: "";
			grid-column: 1 / 4;
			grid-row: 1;
			aspect-ratio: 3 / 2;
			visibility: hidden;
		}
		@media (max-width: 575.98px) {
			&:before{
				width: calc(100% - 100px);
			}
		}
	}
	.slick-list{
		grid-column: 1 / 4;
		grid-row: 1 / 3;
		margin: 0 -10px;
		@media (max-width: 575.98px) {
			padding-right: 100px;
		}
	}
	.slick-slide{
		margin: 0 10px;
	}
	.slick-arrow{
		all: unset;
		align-self: center;
		grid-row: 1;
		position: relative;
		z-index: 1;
		aspect-ratio: 36 / 80;
		width: 40px;
		border-radius: 8px;
		background: rgba(255, 255, 255, 0.6);
		font-size: 0;
		cursor: pointer;
		&:before{
			content: "";
			position: absolute;
			top: 0;
			width: calc(100% - 8px);
			height: 100%;
			background: var(--color);
			-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;"><polyline points="8 4 16 12 8 20"/></svg>') no-repeat center / 24px;
		}
	}
	.slick-prev{
		grid-column: 1;
		transform: translateX(-8px);
		&:before{
			right: 0;
			transform: scale(-1, 1);
		}
	}
	.slick-next{
		grid-column: 3;
		transform: translateX(8px);
		&:before{
			left: 0;
		}
	}
	@media (min-width: 768px) {
		grid-template-columns: repeat(2, 1fr);
		#relatedEvent{
			grid-column: 1 / 3;
		}
	}
}

#relatedEvent{
	& dl{
		position: relative;
		display: grid;
		grid-template-columns: 16px 1fr 16px;
		grid-template-rows: auto 1fr;
		grid-row-gap: 8px;
		&:not(:has(img)):before{
			content: "";
			grid-column: 1 / 4;
			grid-row: 1;
			aspect-ratio: 3 / 2;
			border-radius: 10px;
			background: var(--dummy);
		}
	}
	& dt{
		grid-column: 2;
		font-size: 16px;
	}
	& dd{
		grid-column: 2;
		font-size: clamp(10px, calc(12 / 768 * 100vw), 12px);
		&:has(img){
			grid-column: 1 / 4;
			grid-row: 1;
			margin-bottom: 8px;
		}
		&:has(a){
			display: contents;
		}
		& img{
			aspect-ratio: 3 / 2;
			border-radius: 10px;
			object-fit: cover;
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	.slick-slider{
		@media (min-width: 576px) {
			&:before{
				width: calc((100% - 20px) / 2);
			}
		}
		@media (min-width: 922px) {
			&:before{
				width: calc((100% - 40px) / 3);
			}
		}
		@media (min-width: 1200px) {
			&:before{
				width: calc((100% - 60px) / 4);
			}
		}
	}
}

#relatedFeature,
#relatedCourse{
	& dl{
		position: relative;
		display: grid;
		grid-template-rows: auto 1fr;
		grid-row-gap: 8px;
		&:not(:has(img)):before{
			content: "";
			grid-column: 1;
			grid-row: 1;
			aspect-ratio: 3 / 2;
			border-radius: 10px;
			background: var(--dummy);
		}
	}
	& dt{
		margin: 0 16px;
		font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
	}
	& dd{
		&:has(img){
			grid-column: 1;
			grid-row: 1;
			margin-bottom: 8px;
		}
		&:has(a){
			display: contents;
		}
		& img{
			aspect-ratio: 3 / 2;
			border-radius: 10px;
			object-fit: cover;
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
}

#recommend{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	grid-row-gap: clamp(48px, calc(64 / 1200 * 100vw), 64px);
	padding: clamp(64px, calc(80 / 1200 * 100vw), 80px) 0 clamp(96px, calc(120 / 1200 * 100vw), 120px) 0;
	background: #e6e5d5 url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 4" width="4" height="4" fill="%23f8f7e5"><rect width="2" height="2"/><rect x="2" y="2" width="2" height="2"/></svg>');
	overflow: hidden;
	&>*{
		grid-column: 2;
	}
	& h2{
		display: none;
	}
	& h3{
		align-self: center;
		display: grid;
		grid-template-columns: 4px 1fr;
		column-gap: 16px;
		font-weight: 700;
		font-size: clamp(20px, calc(24 / 768 * 100vw), 24px);
		&:before{
			content: "";
			height: 1em;
			align-self: start;
			background: var(--color-theme);
			border-radius: 2px;
			transform: translateY(0.325em);
		}
	}
	& h3+div{
		margin-top: 24px;
	}
	& dl{
		position: relative;
		display: grid;
		grid-template-rows: auto 1fr;
		grid-row-gap: 8px;
		&:not(:has(img)):before{
			content: "";
			grid-column: 1;
			grid-row: 1;
			aspect-ratio: 3 / 2;
			border-radius: 10px;
			background: var(--dummy);
		}
	}
	& dt{
		margin: 0 16px;
		font-size: clamp(14px, calc(18 / 768 * 100vw), 18px);
	}
	& dd{
		&:has(img){
			grid-column: 1;
			grid-row: 1;
			margin-bottom: 8px;
		}
		&:has(a){
			display: contents;
		}
		& img{
			aspect-ratio: 3 / 2;
			border-radius: 10px;
			object-fit: cover;
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	.slick-slider{
		display: grid;
		grid-template-columns: auto 1fr auto;
		overflow: hidden;
		&:before{
			content: "";
			grid-column: 1 / 4;
			grid-row: 1;
			aspect-ratio: 3 / 2;
			width: calc(100% - 100px);
			visibility: hidden;
		}
		@media (min-width: 576px) {
			&:before{
				width: calc((100% - 20px) / 2);
			}
		}
		@media (min-width: 922px) {
			&:before{
				width: calc((100% - 40px) / 3);
			}
		}
		@media (min-width: 1200px) {
			&:before{
				width: calc((100% - 60px) / 4);
			}
		}
	}
	.slick-list{
		grid-column: 1 / 4;
		grid-row: 1 / 3;
		margin: 0 -10px;
		@media (max-width: 575.98px) {
			padding-right: 100px;
		}
	}
	.slick-slide{
		margin: 0 10px;
	}
	.slick-arrow{
		all: unset;
		align-self: center;
		grid-row: 1;
		position: relative;
		z-index: 1;
		aspect-ratio: 36 / 80;
		width: 40px;
		border-radius: 8px;
		background: rgba(255, 255, 255, 0.6);
		font-size: 0;
		cursor: pointer;
		&:before{
			content: "";
			position: absolute;
			top: 0;
			width: calc(100% - 8px);
			height: 100%;
			background: var(--color);
			-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;"><polyline points="8 4 16 12 8 20"/></svg>') no-repeat center / 24px;
		}
	}
	.slick-prev{
		grid-column: 1;
		transform: translateX(-8px);
		&:before{
			right: 0;
			transform: scale(-1, 1);
		}
	}
	.slick-next{
		grid-column: 3;
		transform: translateX(8px);
		&:before{
			left: 0;
		}
	}
}

.pswp__counter{
	display: none;
}