/* CSS Document */

#detail{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	margin-top: clamp(24px, calc(48 / 1200 * 100dvw), 48px);
	padding-bottom: clamp(64px, calc(128 / 1200 * 100dvw), 128px);
	overflow: hidden;
	& header{
		display: contents;
	}
	#title{
		order: -4;
	}
	#text{
		order: -2;
		justify-self: center;
		width: min(100%, 940px);
		margin-top: clamp(32px, calc(56 / 1200 * 100dvw), 56px);
	}
	#info{
		justify-self: center;
		width: min(100%, 940px);
		margin-top: clamp(48px, calc(96 / 1200 * 100dvw), 96px);
	}
	#favorite{
		order: -3;
		margin-top: clamp(24px, calc(40 / 1200 * 100dvw), 40px);
	}
	#photo{
		order: -4;
		margin-top: clamp(24px, calc(56 / 1200 * 100dvw), 56px);
	}
	#topics{
		order: -2;
		margin-top: clamp(24px, calc(56 / 1200 * 100dvw), 56px);
	}
	#basic{
		justify-self: center;
		width: min(100%, 940px);
		margin-top: clamp(64px, calc(80 / 1200 * 100dvw), 80px);
		margin-bottom: clamp(64px, calc(80 / 1200 * 100dvw), 80px);
	}
	#movie{
		order: -1;
		justify-self: center;
		width: min(100%, 940px);
		margin-top: clamp(24px, calc(56 / 1200 * 100dvw), 56px);
	}
}

#title{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	/*background: linear-gradient(transparent, #dfe9f2 120px);*/
	& h2{
		display: grid;
		padding-bottom: 16px;
		border-bottom: 2px solid #f7fafb;
		font-weight: 700;
		font-size: clamp(24px, calc(30 / 768 * 100dvw), 32px);
		letter-spacing: 0.1em;
		&:before{
			content: attr(data-kana);
			font-size: 12px;
		}
	}
	& p{
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(20px, calc(24 / 768 * 100dvw), 24px);
		letter-spacing: 0.1em;
		&:empty{
			display: none;
		}
	}
}

#info{
	display: grid;
	grid-gap: 24px clamp(24px, calc(40 / 1200 * 100dvw), 40px);
	@media (max-width: 991.98px) {
		#view{
			justify-self: end;
		}
	}
	/*@media (min-width: 992px) {
		grid-template-columns: 1fr auto;
	}*/
}

#area{
	display: grid;
	grid-template-columns: 100px 1fr;
	column-gap: clamp(16px, calc(32 / 1200 * 100dvw), 32px);
	& h3{
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 0.5em;
		font-weight: 700;
		&:before{
			content: "";
			width: 4px;
			height: 1em;
			background: var(--color-theme-sub);
			border-radius: 2px;
			transform: translateY(calc(0.875em - 50%));
		}
	}
	& ul{
		display: flex;
		flex-wrap: wrap;
		grid-gap: clamp(8px, calc(16 / 768 * 100dvw), 16px);
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		align-items: center;
		min-height: 32px;
		padding: 0 1em;
		border: 1px solid currentColor;
		border-radius: 16px;
		color: inherit;
		font-weight: 700;
		font-size: 14px;
		text-decoration: none;
	}
}

#category{
	display: grid;
	grid-template-columns: 100px 1fr;
	column-gap: clamp(16px, calc(32 / 1200 * 100dvw), 32px);
	& h3{
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 0.5em;
		font-weight: 700;
		&:before{
			content: "";
			width: 4px;
			height: 1em;
			background: var(--color-theme-sub);
			border-radius: 2px;
			transform: translateY(calc(0.875em - 50%));
		}
	}
	& ul{
		display: flex;
		flex-wrap: wrap;
		grid-gap: clamp(8px, calc(16 / 768 * 100dvw), 16px);
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		align-items: center;
		min-height: 32px;
		padding: 0 1em;
		border: 1px solid currentColor;
		border-radius: 16px;
		color: inherit;
		font-weight: 700;
		font-size: 14px;
		text-decoration: none;
	}
}

#view{
	display: flex;
	align-items: baseline;
	column-gap: 0.25em;
	font-weight: 700;
	white-space: nowrap;
	& span{
		font-size: 20px;
	}
}

#photo{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	grid-row-gap: 16px;
	&:not(&:has(.slick-slider)){
		display: grid;
		grid-template-columns: min(75dvw, 660px);
		justify-content: center;
		& dl{
			grid-column: 1;
			grid-row: 1;
			display: grid;
			border-radius: 16px;
			overflow: hidden;
			&:nth-child(n+2){
				visibility: hidden;
			}
		}
		& dt,
		& dd{
			grid-column: 1;
			grid-row: 1;
		}
		& dt{
			display: grid;
			align-content: end;
			padding: 1em;
			background: linear-gradient(transparent, rgba(35, 24, 24, 0.1) 60%, rgba(35, 24, 24, 0.5) 85%, rgba(35, 24, 24, 0.9));
			color: #fff;
			font-weight: 700;
			font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
			text-align: center;
			pointer-events: none;
			z-index: 1;
			&:empty{
				display: none;
			}
		}
		& dd{
			& a{
				display: block;
			}
			& img{
				aspect-ratio: 3 / 2;
				object-fit: cover;
			}
		}
	}
	& dd{
		& a{
			display: block;
		}
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
		}
	}
	#photoSlideNav{
		margin-top: clamp(16px, calc(40 / 1200 * 100dvw), 40px);
	}
}

#photoSlide{
	& dl{
		display: grid;
		border-radius: 16px;
		overflow: hidden;
	}
	& dt,
	& dd{
		grid-column: 1;
		grid-row: 1;
	}
	& dt{
		display: grid;
		align-content: end;
		padding: 1em;
		background: linear-gradient(transparent, rgba(35, 24, 24, 0.1) 60%, rgba(35, 24, 24, 0.5) 85%, rgba(35, 24, 24, 0.9));
		color: #fff;
		font-weight: 700;
		font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
		text-align: center;
		pointer-events: none;
		z-index: 1;
		&:empty{
			display: none;
		}
	}
	& dd{
		& a{
			display: block;
		}
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
		}
	}
	.slick-list{
		overflow: visible;
	}
	.slick-slide{
		width: min(75dvw, 660px);
		margin: 0 clamp(8px, calc(20 / 1200 * 100dvw), 20px);
	}
}

#photoSlideNav{
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	& dl{
		border-radius: 8px;
		overflow: hidden;
	}
	& dt{
		display: none;
	}
	& dd{
		& a{
			pointer-events: none;
		}
	}
	.slick-list{
		grid-column: 2;
		&:not(:only-child){
			margin: 0 8px;
		}
	}
	.slick-slide{
		margin: 0 4px;
		cursor: pointer;
	}
	.slick-current{
		& dl{
			position: relative;
			&:before{
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.6);
			}
		}
	}
}

#link{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	grid-gap: 16px 24px;
	padding: clamp(24px, calc(56 / 1200 * 100dvw), 56px) 0 clamp(40px, calc(80 / 1200 * 100dvw), 80px) 0;
	background: linear-gradient(#dfe9f2 calc(100% - 120px), transparent);
	@media (min-width: 1200px) {
		align-items: center;
		#favorite,
		#share{
			grid-column: 1;
			grid-row: 1;
		}
		#share{
			justify-self: end;
		}
	}
}

#share{
	& dl{
		display: flex;
		justify-content: center;
		align-items: center;
		column-gap: 16px;
	}
	& dt{
		font-weight: 500;
		font-size: 24px;
		font-family: "futura-pt", sans-serif;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}
	& dd{
		& a{
			display: block;
			aspect-ratio: 1;
			width: 32px;
			font-size: 0;
			&[href*="facebook.com"]{
				background: #007bf8 url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="white"><path d="M27.83,48v-16.82c1.62,0,5.65-.12,5.65-.12l.91-6.81h-6.55s.04-3.63.04-5.55c.15-1.59,1.17-2.41,2.7-2.56,1.17-.1,3.93-.27,3.93-.27v-6.19s-6.22-.67-9.12.51c-3.46,1.41-4.9,4.26-5.08,7.84-.09,1.72-.02,3.46-.03,5.2v.99c-1.72,0-4.98-.02-4.98-.02h-1.14l.03,6.99h6.06v16.81h7.57Z"/></svg>') no-repeat center bottom / 95%;
				border-radius: 100%;
			}
			&[href*="line.me"]{
				background: #00c74a url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="white"><path d="M26.67,14.49c0-4.77-4.79-8.66-10.67-8.66s-10.67,3.88-10.67,8.66c0,4.28,3.8,7.86,8.92,8.54.35.08.82.23.94.53.11.27.07.69.03.96,0,0-.13.75-.15.91-.05.27-.21,1.05.92.58,1.14-.48,6.14-3.62,8.38-6.19h0c1.55-1.7,2.29-3.42,2.29-5.33ZM12.23,17.05c0,.11-.09.2-.2.2h-3c-.11,0-.2-.09-.2-.2h0v-4.66c0-.11.09-.2.2-.2h.76c.11,0,.2.09.2.2v3.7h2.04c.11,0,.2.09.2.2v.76ZM14.04,17.05c0,.11-.09.2-.2.2h-.76c-.11,0-.2-.09-.2-.2v-4.66c0-.11.09-.2.2-.2h.76c.11,0,.2.09.2.2v4.66ZM19.19,17.05c0,.11-.09.2-.2.2h-.75s-.04,0-.05,0c0,0,0,0,0,0,0,0,0,0-.01,0,0,0,0,0,0,0,0,0,0,0-.01,0s0,0,0,0c0,0,0,0,0,0,0,0,0,0-.01,0,0,0,0,0,0,0-.02-.01-.04-.03-.05-.05l-2.13-2.88v2.76c0,.11-.09.2-.2.2h-.76c-.11,0-.2-.09-.2-.2v-4.66c0-.11.09-.2.2-.2h.75s0,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,0h0s0,0,.01,0c0,0,0,0,0,0,0,0,0,0,.01,0h0s0,0,.01,0c0,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.01h0s.01.02.02.02l2.13,2.88v-2.77c0-.11.09-.2.2-.2h.76c.11,0,.2.09.2.2v4.66ZM23.32,13.15c0,.11-.09.2-.2.2h-2.04v.79h2.04c.11,0,.2.09.2.2v.76c0,.11-.09.2-.2.2h-2.04v.79h2.04c.11,0,.2.09.2.2v.76c0,.11-.09.2-.2.2h-3c-.11,0-.2-.09-.2-.2h0v-4.65h0c0-.12.09-.21.2-.21h3c.11,0,.2.09.2.2v.76Z"/></svg>') no-repeat center bottom / contain;
				border-radius: 8px;
			}
			&[href*="x.com"]{
				background: #000;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M18.98,13.55L30.64,0h-2.76l-10.12,11.77L9.67,0H.34l12.22,17.79L.34,32h2.76l10.69-12.42,8.54,12.42h9.32l-12.68-18.45h0ZM15.2,17.95l-1.24-1.77L4.1,2.08h4.24l7.95,11.38,1.24,1.77,10.34,14.79h-4.24l-8.44-12.07h0Z"/></svg>') no-repeat center / contain;
			}
		}
	}
}

#text{
	width: min(var(--wrap-fit), 960px);
	margin: clamp(32px, calc(56 / 1200 * 100dvw), 56px) auto clamp(48px, calc(64 / 1200 * 100dvw), 64px) auto;
}

#topics{
	display: grid;
	grid-row-gap: clamp(48px, calc(64 / 1200 * 100dvw), 64px);
	& section{
		display: grid;
		grid-template-columns: 1fr var(--wrap) 1fr;
		justify-content: center;
		grid-row-gap: 24px;
		&>*{
			grid-column: 2;
		}
	}
	& h3{
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(18px, calc(24 / 768 * 100dvw), 24px);
		letter-spacing: 0.1em;
	}
	& dl{
		position: relative;
		display: grid;
		grid-template-rows: auto auto 1fr;
		grid-row-gap: 16px;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 3 / 2;
			background: var(--dummy);
			border-radius: 4px;
		}
	}
	& dt{
		margin-inline: 8px;
		font-weight: 700;
		font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
	}
	& dd{
		&:nth-of-type(1){
			margin-inline: 8px;
			font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
			letter-spacing: 0.025em;
		}
		&:has(img){
			order: -1;
		}
		& img{
			aspect-ratio: 1;
			object-fit: cover;
			border-radius: 4px;
		}
		&:has(a){
			display: contents;
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	.slide{
		display: grid;
		width: min(var(--wrap-fit), 1280px);
		&:not(.slick-initialized){
			grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 8px), 248px), 1fr));
			grid-gap: clamp(16px, calc(24 / 1200 * 100dvw), 24px);
		}
	}
	.slick-slider{
		grid-template-columns: auto 1fr auto;
		align-items: center;
		width: 100%;
		&:before{
			content: "";
			grid-column: 2;
			grid-row: 1;
			aspect-ratio: 1;
			margin: 0 clamp(8px, calc(12 / 1200 * 100dvw), 12px);
			visibility: hidden;
		}
		@media (min-width: 576px) {
			&:before{
				width: calc(50% - clamp(8px, calc(20 / 1200 * 100dvw), 20px));
			}
		}
		@media (min-width: 992px) {
			&:before{
				width: calc(33.33% - clamp(8px, calc(20 / 1200 * 100dvw), 20px));
			}
		}
		@media (min-width: 1200px) {
			&:before{
				width: calc((100% - (clamp(0px, calc(20 / 1200 * 100dvw), 0px) * 3)) / 4);
			}
		}
	}
	.slick-list{
		grid-column: 1 / 4;
		grid-row: 1 / 3;
		margin-inline: calc(0px - clamp(8px, calc(12 / 1200 * 100dvw), 12px));
		@media (max-width: 1199.98px) {
			overflow: visible;
			grid-column: 2;
		}
	}
	.slick-slide{
		margin: 0 clamp(8px, calc(12 / 1200 * 100dvw), 12px);
	}
	.slick-arrow{
		filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.15));
	}
	.slick-next{
		justify-self: end;
		@media (min-width: 1200px) {
			grid-row: 1;
			grid-column: 3;
			transform: translateX(150%);
		}
		@media (min-width: 1200px) and (max-width: 1300px) {
			transform: translateX(-50%);
		}
	}
	.slick-prev{
		@media (min-width: 1200px) {
			grid-row: 1;
			grid-column: 1;
			transform: translateX(-150%);
		}
		@media (min-width: 1200px) and (max-width: 1300px) {
			transform: translateX(50%);
		}
	}
	.slick-dots{
		grid-column: 2;
		grid-row: 3;
		margin-top: clamp(24px, calc(40 / 1200 * 100dvw), 40px);
	}
}

#movie{
	display: grid;
	grid-template-columns: min(var(--wrap-fit), 960px);
	justify-content: center;
	& h3{
		display: none;
	}
	& iframe{
		aspect-ratio: 16 / 9;
		width: 100%;
		height: auto;
		border-radius: clamp(16px, calc(32 / 1200 * 100dvw), 32px);
	}
}

#tag{
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap: clamp(24px, calc(40 / 1200 * 100dvw), 40px);
	width: var(--wrap);
	margin-inline: auto;
	padding: clamp(64px, calc(120 / 1200 * 100dvw), 120px) 0;
	z-index: 1;
	&:before{
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		width: 100dvw;
		height: 100%;
		background: linear-gradient(transparent, #dfe9f2 120px, #dfe9f2 calc(100% - 120px), transparent);
		transform: translateX(-50%);
		z-index: -1;
	}
	#area,
	#category{
		display: contents;
	}
	& h3{
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
		letter-spacing: 0.1em;
	}
	& ul{
		display: flex;
		flex-wrap: wrap;
		grid-gap: clamp(8px, calc(16 / 768 * 100dvw), 16px);
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		align-items: center;
		min-height: 32px;
		padding: 0 1em;
		background: #fff;
		border-radius: 16px;
		color: inherit;
		font-weight: 700;
		font-size: 14px;
		text-decoration: none;
	}
}

#basic{
	display: grid;
	grid-template-columns: min(var(--wrap-fit), 960px);
	justify-content: center;
	margin-top: clamp(64px, calc(120 / 1200 * 100dvw), 120px);
	& h3{
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(18px, calc(24 / 768 * 100dvw), 24px);
		letter-spacing: 0.1em;
		text-align: center;
	}
	& h3+div{
		margin-top: clamp(24px, calc(48 / 1200 * 100dvw), 48px);
	}
	& dl{
		display: grid;
		overflow: hidden;
	}
	& dt,
	& dd{
		padding: 16px clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		& a{
			color: #0078af;
		}
	}
	& dt{
		font-weight: 700;
	}
	& li{
		& a{
			display: grid;
			grid-template-columns: auto 1fr;
			column-gap: 0.25em;
			font-weight: 700;
			&:before{
				content: "";
				aspect-ratio: 1;
				width: 16px;
				background: currentColor;
				transform: translateY(calc(0.875em - 50%));
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2,4H0v12h12v-2H2V4ZM14,0H4v12h12V0h-2ZM14,10H6V2h8v8Z"/></svg>') no-repeat center / contain;
			}
		}
	}
	@media (max-width: 575.98px) {
		& dt{
			border-bottom: 1px solid #c6dce8;
		}
		& dt,
		& dd{
			padding: 16px 0;
		}
	}
	@media (min-width: 576px) {
		& dl{
			grid-template-columns: auto 1fr;
		}
		& dt,
		& dd{
			padding: 16px clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		}
		& dt{
			min-width: 10em;
			&:nth-of-type(n+2){
				border-top: 1px solid #c6dce8;
			}
		}
		& dd{
			&:nth-of-type(n+2){
				border-top: 1px solid #c6dce8;
			}
		}
	}
}

#map{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	margin-top: clamp(24px, calc(40 / 1200 * 100dvw), 40px);
	grid-row-gap: clamp(32px, calc(56 / 1200 * 100dvw), 56px);
	#mapApi{
		position: relative;
		#gMap{
			height: min(75vh, 540px);
			background: #ccc;
			border-radius: clamp(16px, calc(32 / 1200 * 100dvw), 32px);
		}
		&:has([lsc-lb="dummy"]){
			position: relative;
			& [lsc-lb="dummy"]{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				padding: 16px;
			}
		}
	}
	#mapEmbed{
		position: relative;
		height: min(75vh, 540px);
		background: #ccc;
		border-radius: clamp(16px, calc(32 / 1200 * 100dvw), 32px);
		overflow: hidden;
		& iframe{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}
	#mapLink{
		& ul{
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			grid-gap: 16px clamp(24px, calc(80 / 1200 * 100dvw), 80px);
		}
		& li{
			display: contents;
		}
		& button{
			all: unset;
			box-sizing: border-box;
			cursor: pointer;
		}
		& button,
		& a{
			display: grid;
			align-items: center;
			column-gap: 4px;
			min-width: min(100%, 240px);
			min-height: clamp(48px, calc(56 / 768 * 100dvw), 56px);
			padding: 0.25em 1.5em;
			background: #fff;
			border-radius: clamp(24px, calc(28 / 768 * 100dvw), 28px);
			color: var(--color-theme);
			font-weight: 700;
			letter-spacing: 0.1em;
			text-align: center;
			text-decoration: none;
			filter: drop-shadow(0 0 6px rgba(11, 59, 99, 0.15));
		}
	}
}

#related{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	justify-content: center;
	padding: clamp(48px, calc(64 / 1200 * 100dvw), 64px) 0 clamp(64px, calc(120 / 1200 * 100dvw), 120px) 0;
	background: #b6d0de;
	overflow: hidden;
	&:before{
		content: "RELATED";
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
		align-self: center;
		padding: 0 0.5em;
		background: #b6d0de;
		color: #edf2f7;
		font-weight: 400;
		font-size: clamp(40px, calc(72 / 768 * 100dvw), 72px);
		font-family: "futura-pt", sans-serif;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		line-height: 1;
		text-align: center;
		z-index: 1;
	}
	&:after{
		content: "";
		grid-column: 2;
		grid-row: 1;
		align-self: center;
		border-bottom: 2px solid #edf2f7;
	}
	& article{
		grid-column: 1 / 4;
		display: grid;
		grid-template-columns: 1fr var(--wrap) 1fr;
		justify-content: center;
		margin-top: clamp(48px, calc(80 / 1200 * 100dvw), 80px);
		&>*{
			grid-column: 2;
		}
		.slide{
			grid-column: 1 / 4;
			justify-self: center;
		}
		&:nth-child(1){
			margin-top: 32px;
		}
	}
	& h2{
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(18px, calc(24 / 768 * 100dvw), 24px);
		letter-spacing: 0.1em;
	}
	& h2+div{
		display: grid;
		margin-top: 24px;
		&:not(.slick-initialized){
			grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 24px), 248px), 1fr));
			grid-gap: clamp(24px, calc(32 / 1200 * 100dvw), 32px) 20px;
		}
	}
	& section{
		position: relative;
		display: grid;
		align-content: start;
		grid-row-gap: 16px;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 3 / 2;
			background: var(--dummy);
			border-radius: 8px;
		}
	}
	& h3{
		margin-inline: 8px;
		font-weight: 700;
	}
	& h3+div{
		display: contents;
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	& figure{
		order: -1;
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 8px;
		}
	}
	.slide{
		display: grid;
		width: min(var(--wrap-fit), 1280px);
		&:not(.slick-initialized){
			grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 8px), 248px), 1fr));
			grid-gap: clamp(16px, calc(24 / 1200 * 100dvw), 24px);
		}
	}
	.slick-slider{
		grid-template-columns: auto 1fr auto;
		align-items: center;
		@media (min-width: 1400px) {
			grid-template-columns: auto var(--wrap) auto;
		}
		&:before{
			content: "";
			grid-column: 2;
			grid-row: 1;
			aspect-ratio: 3 / 2;
			margin: 0 clamp(8px, calc(12 / 1200 * 100dvw), 12px);
			visibility: hidden;
		}
		@media (min-width: 576px) {
			&:before{
				width: calc(50% - clamp(8px, calc(20 / 1200 * 100dvw), 20px));
			}
		}
		@media (min-width: 992px) {
			&:before{
				width: calc(33.33% - clamp(8px, calc(20 / 1200 * 100dvw), 20px));
			}
		}
		@media (min-width: 1200px) {
			&:before{
				width: calc((100% - (clamp(8px, calc(20 / 1200 * 100dvw), 20px) * 3)) / 4);
			}
		}
	}
	.slick-list{
		grid-column: 2;
		grid-row: 1 / 3;
		margin-inline: calc(0px - clamp(8px, calc(12 / 1200 * 100dvw), 12px));
		@media (max-width: 1199.98px) {
			overflow: visible;
		}
	}
	.slick-slide{
		margin: 0 clamp(8px, calc(12 / 1200 * 100dvw), 12px);
	}
	.slick-arrow{
		filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.15));
	}
	.slick-next{
		justify-self: end;
	}
	.slick-dots{
		grid-column: 2;
		grid-row: 3;
		margin-top: clamp(24px, calc(40 / 1200 * 100dvw), 40px);
	}
}

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

.slick-dots{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	place-content: center;
	grid-gap: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
	color: #fff;
	z-index: 1;
	& li{
		aspect-ratio: 1;
		width: 8px;
		background: currentColor;
		border-radius: 100%;
		overflow: hidden;
		&.slick-active{
			color: var(--color-theme);
		}
	}
	& button{
		opacity: 0;
	}
}