/* CSS Document */

#detail{
	margin-bottom: clamp(80px, calc(120 / 992 * 100dvw), 120px);
	overflow: hidden;
	&:last-child{
		margin-bottom: clamp(80px, calc(160 / 992 * 100dvw), 160px);
	}
	#title{
		margin-top: clamp(16px, calc(32 / 992 * 100dvw), 32px);
	}
}

#title{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	&:before{
		grid-row: 2;
		margin-top: clamp(24px, calc(32 / 992 * 100dvw), 32px);
	}
	&:not(:has(#photo)):before{
		content: "";
		aspect-ratio: 3 / 2;
		background: var(--dummy);
		border-radius: 4px;
	}
	& h2{
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 0.5em;
		font-weight: 700;
		font-size: clamp(20px, calc(36 / 768 * 100dvw), 36px);
		letter-spacing: 0.1em;
		&:before{
			content: "";
			width: 4px;
			height: 1em;
			background: var(--color-theme);
			transform: translateY(calc(0.825em - 50%));
		}
	}
	#text{
		margin-top: clamp(24px, calc(32 / 992 * 100dvw), 32px);
	}
	#status{
		margin-top: clamp(24px, calc(32 / 992 * 100dvw), 32px);
	}
	#column{
		justify-self: center;
		width: min(100%, 960px);
		margin-top: clamp(40px, calc(80 / 992 * 100dvw), 80px);
	}
	#outline{
		justify-self: center;
		width: min(100%, 960px);
		margin-top: clamp(40px, calc(80 / 992 * 100dvw), 80px);
	}
	#photo{
		grid-row: 2;
		margin-top: clamp(24px, calc(32 / 992 * 100dvw), 32px);
	}
	@media (min-width: 1200px) {
		grid-template-rows: auto 1fr;
		&:before{
			grid-column: 1;
			grid-row: 2 / 5;
			align-self: start;
			width: 752px;
		}
		#text,
		#status{
			grid-column: 1;
			margin-left: calc(752px + 32px);
		}
		#text{
			grid-row: 2;
		}
		#status{
			grid-row: 3;
		}
		#photo{
			grid-column: 1;
			grid-row: 2 / 5;
			align-self: start;
			width: 752px;
		}
	}
}

#status{
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid #dedede;
	& dl{
		display: contents;
		font-weight: 500;
		&:before{
			content: "";
			grid-column: 1 / 3;
			border-top: 1px solid #dedede;
		}
		&:not(:has(ul)){
			& dt{
				grid-template-columns: auto 1fr auto;
				padding-right: 0.5em;
				&:after{
					content: ":";
				}
			}
		}
		&:has(ul){
			& dt{
				margin-top: 0.25em;
			}
		}
	}
	& dt{
		position: relative;
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 0.5em;
		max-width: 10em;
		&:before{
			content: "";
			width: 3px;
			height: 1em;
			background: var(--color-theme);
			transform: translateY(calc(0.825em - 50%));
		}
	}
	& ul{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 8px;
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		align-items: center;
		min-height: 2.5em;
		padding: 0.25em 1em;
		background: #fff;
		border: 1px solid currentColor;
		border-radius: 1.25em;
		color: var(--color-theme);
		font-weight: 500;
		font-size: 14px;
		line-height: 1;
		text-align: center;
		text-decoration: none;
		&[data-area]{
			background: var(--color-theme);
			border-color: transparent;
			color: #fff;
		}
		&[data-area="1"]{
			background: #f285ac;
		}
		&[data-area="2"]{
			background: #61bce2;
		}
		&[data-area="3"]{
			background: #5cbf52;
		}
		&[data-area="4"]{
			background: #f2973d;
		}
	}
}

#column{
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-row-gap: clamp(16px, calc(40 / 992 * 100dvw), 40px);
	padding-bottom: clamp(16px, calc(40 / 992 * 100dvw), 40px);
	border: 1px solid var(--color-theme);
	border-radius: 4px;
	&:before{
		content: "";
		grid-column: 1 / 3;
		grid-row: 1;
		background: var(--color-theme);
		border-radius: 4px 4px 0 0;
	}
	& h3{
		grid-column: 1;
		grid-row: 1;
		align-self: center;
		position: relative;
		max-width: 10em;
		margin: 0.75em 0;
		padding: 0.25em 0 0.25em 0.5em;
		background: #dfb22a;
		color: #fff;
		font-weight: 700;
		font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
		transform: translateX(-1em);
		&:before{
			content: "";
			position: absolute;
			bottom: 100%;
			left: 0;
			aspect-ratio: 2 / 1;
			width: 1em;
			background: #e8cf84;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 8"><polygon points="16 8 0 8 16 0 16 8"/></svg>') no-repeat center / contain;
		}
		&:after{
			content: "";
			position: absolute;
			top: 0;
			left: 100%;
			width: 0.5em;
			height: 100%;
			background: inherit;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 8 32"><polyline points="0 0 8 16 0 32"/></svg>') no-repeat center / cover;
		}
	}
	& h3+div{
		display: contents;
	}
	& h4{
		grid-column: 2;
		grid-row: 1;
		display: grid;
		align-items: center;
		min-height: 2.8em;
		margin-right: clamp(16px, calc(40 / 992 * 100dvw), 40px);
		color: #fff;
		font-weight: 500;
		font-size: clamp(18px, calc(20 / 768 * 100dvw), 20px);
	}
	& h4+div,
	& h4+div+div,
	& figure{
		grid-column: 1 / 3;
		margin-inline: clamp(16px, calc(40 / 992 * 100dvw), 40px);
	}
	& h4+div+div{
		display: flex;
		justify-content: center;
		& a{
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			column-gap: 0.5em;
			min-width: min(100%, 320px);
			min-height: clamp(48px, calc(64 / 768 * 100dvw), 64px);
			padding: 0.25em 1.5em 0.25em 2em;
			background: #fff;
			border: 1px solid currentColor;
			border-radius: clamp(24px, calc(32 / 768 * 100dvw), 32px);
			font-weight: 500;
			font-size: clamp(14px, calc(18 / 768 * 100dvw), 18px);
			text-align: center;
			text-decoration: none;
			&:hover{
				background: var(--color-theme);
				border-color: transparent;
				color: #fff;
			}
			&:after{
				content: "";
				aspect-ratio: 1;
				width: 16px;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><polyline points="5.6 3.2 10.4 8 5.6 12.8" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"/></svg>') no-repeat center / 16px;
			}
			@media (min-width: 768px) {
				&:after{
					-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><polyline points="4.8 1.6 11.2 8 4.8 14.4" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"/></svg>');
				}
			}
		}
	}
	& figure{
		grid-row: 2;
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 4px;
		}
	}
	@media (min-width: 768px) {
		&:has(figure){
			& h4+div,
			& h4+div+div{
				margin-left: calc(clamp(320px, calc(360 / 992 * 100dvw), 360px) + clamp(32px, calc(80 / 992 * 100dvw), 80px));
			}
			& h4+div{
				grid-row: 2;
			}
			& h4+div+div{
				grid-row: 3;
				align-self: start;
			}
		}
		& figure{
			grid-row: 2 / 4;
			align-self: start;
			width: clamp(320px, calc(360 / 992 * 100dvw), 360px);
		}
	}
}

#outline{
	padding-top: clamp(16px, calc(32 / 992 * 100dvw), 32px);
	background: #fff;
	border: 1px solid var(--color-theme);
	border-radius: 4px;
	overflow: hidden;
	[lsc-lb="List"]{
		display: none;
	}
	& h3{
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 0.5em;
		margin-inline: clamp(16px, calc(32 / 992 * 100dvw), 32px);
		font-weight: 500;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 16px;
			background: var(--color-theme);
			transform: translateY(calc(0.825em - 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="M13,11h3v-3h-3v3ZM15,0H1C.45,0,0,.45,0,1v14c0,.55.45,1,1,1h10c.55,0,1-.45,1-1V3h3c.55,0,1-.45,1-1v-1c0-.55-.45-1-1-1ZM13,15h3v-3h-3v3ZM13,7h3v-3h-3v3Z"/></svg>') no-repeat center / contain;
		}
	}
	& details{
		display: grid;
		margin-top: 16px;
		&::details-content{
			all: unset;
		}
		& summary{
			order: 1;
			margin-top: 16px;
		}
		&:not(:has(li:nth-child(6))) summary{
			display: none;
		}
		&:not([open]) li:nth-child(n+6){
			display: none;
		}
	}
	& summary{
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		align-items: center;
		min-height: 2em;
		column-gap: 1em;
		padding: 0.25em 1em;
		background: var(--color-theme);
		color: #fff;
		font-size: 14px;
		cursor: pointer;
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 12px;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" style="fill: none; stroke: black;"><polyline points="11 3.5 6 8.5 1 3.5"/></svg>') no-repeat center / contain;
		}
		[open] &:after{
			transform: scale(1, -1);
		}
	}
	& summary+div{
		margin-inline: clamp(16px, calc(32 / 992 * 100dvw), 32px);
	}
	& ul{
		display: grid;
		grid-row-gap: 4px;
		&:not(:has(li:nth-child(6))){
			padding-bottom: 16px;
		}
		& span{
			display: grid;
			grid-row-gap: 4px;
		}
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 0.5em;
		color: inherit;
		font-weight: 500;
		text-decoration: none;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 8px;
			background: #6e8093;
			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 8 8"><polyline points="0 8 0 0 4 4 0 8"/></svg>') no-repeat center / contain;
		}
	}
}

#photo{
	& img{
		aspect-ratio: 3 / 2;
		object-fit: cover;
		border-radius: 4px;
	}
}

#course{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	margin: clamp(40px, calc(80 / 992 * 100dvw), 80px) 0 clamp(56px, calc(112 / 992 * 100dvw), 112px) 0;
	background: #edf5f1;
	#courseStart,
	#courseGoal{
		justify-self: start;
	}
	#courseStart{
		margin-top: calc(0px - clamp(24px, calc(28 / 768 * 100dvw), 28px));
	}
	#courseGoal{
		margin-bottom: calc(0px - clamp(24px, calc(28 / 768 * 100dvw), 28px));
	}
}

#courseStart,
#courseGoal{
	display: grid;
	align-items: center;
	min-width: min(100%, 210px);
	min-height: clamp(48px, calc(56 / 768 * 100dvw), 56px);
	padding: 0.25em 1em;
	background: #fff;
	border: 2px solid currentColor;
	border-radius: clamp(24px, calc(28 / 768 * 100dvw), 28px);
	color: var(--color-theme);
	font-weight: 700;
	font-size: clamp(14px, calc(18 / 768 * 100dvw), 18px);
	letter-spacing: 0.1em;
	text-align: center;
	text-transform: uppercase;
	z-index: 2;
}

#courseRoute{
	position: relative;
	display: grid;
	margin-left: clamp(16px, calc(40 / 992 * 100dvw), 40px);
	padding: clamp(16px, calc(24 / 992 * 100dvw), 24px) 0;
	grid-row-gap: clamp(16px, calc(24 / 992 * 100dvw), 24px);
	&:before{
		content: "";
		position: absolute;
		top: -8px;
		left: 0;
		width: 4px;
		height: calc(100% + 16px);
		background: var(--color-theme);
		transform: translateX(-50%);
		z-index: 1;
		pointer-events: none;
	}
	.date{
		margin-left: clamp(24px, calc(40 / 992 * 100dvw), 40px);
	}
	.move{
		padding-left: clamp(24px, calc(40 / 992 * 100dvw), 40px);
		z-index: 2;
	}
	.spot{
		margin-top: clamp(24px, calc(40 / 992 * 100dvw), 40px);
		scroll-margin-top: clamp(24px, calc(40 / 992 * 100dvw), 40px);
		&:before{
			z-index: 2;
		}
	}
	.column{
		margin-left: clamp(24px, calc(40 / 992 * 100dvw), 40px);
	}
}

#map{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	& summary{
		order: 1;
		justify-self: center;
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		column-gap: 0.5em;
		min-width: min(100%, 504px);
		min-height: clamp(48px, calc(64 / 768 * 100dvw), 64px);
		padding: 0.25em 1.5em 0.25em 2em;
		background: #fff;
		border: 1px solid currentColor;
		border-radius: clamp(24px, calc(32 / 768 * 100dvw), 32px);
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
		letter-spacing: 0.05em;
		text-align: center;
		cursor: pointer;
		transition: all 0.2s ease-out;
		&:hover{
			background: var(--color-theme);
			border-color: transparent;
			color: #fff;
		}
		&:before,
		&:after{
			content: "";
			aspect-ratio: 1;
			background: currentColor;
			-webkit-mask: no-repeat center / contain;
		}
		&:before{
			width: 24px;
			-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="M15.32,6.59c0-1.83-1.5-3.31-3.33-3.31s-3.31,1.48-3.31,3.31,1.48,3.31,3.31,3.31,3.33-1.48,3.33-3.31ZM13.59,19.08c2.14-4.23,5.13-9.81,5.13-12.44C18.72,3.04,15.73.11,11.99,0c-3.74.11-6.73,3.04-6.73,6.64,0,3.13,3.61,9.79,5.08,12.44-5.29.18-9.35,1.2-9.35,2.45,0,1.37,4.92,2.48,11,2.48s11.02-1.11,11.02-2.48c0-1.25-4.1-2.27-9.42-2.45ZM7.21,6.59c0-2.64,2.14-4.78,4.78-4.78s4.8,2.14,4.8,4.78-2.15,4.78-4.8,4.78-4.78-2.14-4.78-4.78ZM11.99,22.62c-3.67,0-6.64-.68-6.64-1.5,0-.72,2.28-1.33,5.31-1.47.12.21.37.69.4.74.16.3.47,1.14.93,1.3.46-.15.79-.99.94-1.3.11-.22.25-.5.37-.74,3.04.14,5.34.75,5.34,1.47,0,.83-2.98,1.5-6.65,1.5Z"/></svg>');
		}
		&:after{
			width: 17px;
			-webkit-mask-image: 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-miterlimit: 10;"><line x1="8.5" x2="8.5" y2="17"/><line y1="8.5" x2="17" y2="8.5"/></svg>');
		}
		[open] &:after{
			-webkit-mask-image: 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-miterlimit: 10;"><line y1="8.5" x2="17" y2="8.5"/></svg>');
		}
	}
	& summary+div{
		display: grid;
		margin-bottom: clamp(24px, calc(40 / 992 * 100dvw), 40px);
		&:before{
			content: "";
			grid-column: 1;
			grid-row: 1 / 3;
			border: 1px solid var(--color-theme);
			border-radius: 4px;
			pointer-events: none;
			z-index: 1;
		}
	}
	#mapBody{
		height: min(75dvh, 520px);
		overflow: hidden;
	}
	#mapText{
		margin-top: 16px;
	}
	@media (max-width: 991.98px) {
		#mapBody{
			grid-column: 1;
			grid-row: 1;
			border-radius: 4px 4px 0 0;
		}
		#mapList{
			grid-column: 1;
			grid-row: 2;
			max-height: 200px;
			border-radius: 0 0 4px 4px;
		}
	}
	@media (min-width: 992px) {
		& summary+div{
			grid-template-columns: clamp(640px, calc(760 / 1200 * 100dvw), 760px) 1fr;
			&:before{
				grid-column: 1 / 3;
				grid-row: 1;
			}
		}
		#mapBody{
			grid-column: 1;
			grid-row: 1;
			border-radius: 4px 0 0 4px;
		}
		#mapList{
			grid-column: 2;
			grid-row: 1;
			height: min(75dvh, 520px);
			border-radius: 0 4px 4px 0;
		}
		#mapText{
			grid-column: 1 / 3;
		}
	}
}

#mapBody{
	position: relative;
	background: #e8e8e8;
	[LSC-LB="dummy"]{
		position: relative;
		display: grid;
		grid-gap: 16px;
		padding: 16px;
		z-index: 1;
	}
	[id^="gMap"]{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

#mapList{
	overflow-y: auto;
	& ul{
		display: grid;
		grid-row-gap: 16px;
		padding: 16px;
	}
	& li{
		counter-increment: count;
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: 0.5em;
		font-weight: 700;
		&:before{
			content: counter(count);
			align-self: start;
			display: grid;
			align-items: center;
			aspect-ratio: 1;
			width: 2em;
			padding-bottom: 0.1em;
			background: var(--color-theme);
			border-radius: 16px;
			color: #fff;
			line-height: 1;
			text-align: center;
		}
	}
	& menu{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		position: sticky;
		display: block;
		height: 28px;
		background: var(--color-theme);
		color: #fff;
		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 12 12" style="fill: none; stroke: black;"><polyline points="11 3.5 6 8.5 1 3.5"/></svg>') no-repeat center / 12px;
		}
		&#mapListUp{
			top: 0;
			&:before{
				transform: scale(1, -1);
			}
		}
		&#mapListDown{
			bottom: 0;
		}
	}
}

#mapText{
	font-weight: 500;
}

#recommend{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	margin: clamp(64px, calc(120 / 992 * 100dvw), 120px) 0 clamp(80px, calc(160 / 992 * 100dvw), 160px) 0;
	overflow: hidden;
	& h2{
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		column-gap: 1em;
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(18px, calc(20 / 768 * 100dvw), 20px);
		letter-spacing: 0.1em;
		text-align: center;
		word-break: keep-all;
		overflow-wrap: anywhere;
		&:before,
		&:after{
			content: "";
			min-width: 1em;
			height: 1em;
			background: currentColor;
		}
		&:before{
			-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="100%" height="100%"/></svg>') no-repeat center left / 1px 100%, 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="100%" height="100%"/></svg>') no-repeat center / 100% 1px;
		}
		&:after{
			-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="100%" height="100%"/></svg>') no-repeat center right / 1px 100%, 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="100%" height="100%"/></svg>') no-repeat center / 100% 1px;
		}
	}
	& h2+div{
		margin-top: clamp(24px, calc(32 / 992 * 100dvw), 32px);
	}
	& section{
		position: relative;
		display: grid;
		align-content: start;
		grid-row-gap: 8px;
		&:not(:has(img)):before{
			content: "";
			grid-row: 1;
			aspect-ratio: 3 / 2;
			background: var(--dummy);
			border-radius: 4px;
		}
		& figure{
			grid-row: 1;
		}
	}
	& 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{
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 4px;
		}
	}
	.slide{
		display: grid;
		&:not(.slick-slider){
			grid-template-columns: repeat(auto-fill, minmax(min(100%, 264px), 1fr));
			grid-gap: clamp(16px, calc(32 / 992 * 100dvw), 32px);
		}
	}
	.slick-slider{
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		&:before{
			content: "";
			grid-column: 2;
			grid-row: 1;
			aspect-ratio: 3 / 2;
			background: red;
			opacity: 0.5;
			z-index: 1;
			visibility: hidden;
		}
		@media (min-width: 1200px) {
			grid-template-columns: 0 1fr 0;
		}
		@media (min-width: 576px) {
			&:before{
				width: calc((100% - clamp(16px, calc(32 / 992 * 100dvw), 32px)) / 2);
			}
		}
		@media (min-width: 992px) {
			&:before{
				width: calc((100% - clamp(32px, calc(64 / 992 * 100dvw), 64px)) / 3);
			}
		}
	}
	.slick-list{
		grid-column: 2;
		grid-row: 1 / 3;
		margin-inline: calc(0px - clamp(8px, calc(16 / 992 * 100dvw), 16px));
		overflow: visible;
	}
	.slick-slide{
		margin-inline: clamp(8px, calc(16 / 992 * 100dvw), 16px);
	}
	.slick-arrow{
		justify-self: center;
	}
}

.fr-view{
	font-weight: 500;
}

.date{
	display: grid;
	align-items: center;
	min-height: 56px;
	padding: 0.5em 1em;
	background: var(--color-theme);
	border-radius: 4px;
	color: #fff;
	font-weight: 700;
	font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
	text-align: center;
}

.move{
	position: relative;
	display: grid;
	align-items: center;
	min-height: 44px;
	font-weight: 500;
	&:before{
		content: "";
		position: absolute;
		top: 50%;
		aspect-ratio: 1;
		width: 44px;
		background: var(--color-theme) no-repeat center / cover;
		border-radius: 100%;
		transform: translate(-50%, -50%);
	}
	&[data-type="walk"]:before{
		background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" fill="white"><path d="M21.92,13.09c.06,0,.11,0,.16,0,1.33,0,2.45-1.04,2.54-2.38.04-.68-.18-1.33-.63-1.84-.45-.51-1.07-.82-1.75-.86-1.4-.09-2.61.98-2.7,2.38-.09,1.4.98,2.61,2.38,2.7ZM28.93,19.93c-.15-.24-.38-.41-.65-.48l-2.52-.63-1.61-3.46c.07,1.38.05,3.42,0,4.39l.35.5s.02.04.03.06h0s.02.02.04.05c.04.06.09.12.14.18.05.06.1.1.16.12.09.09.18.16.23.19l2.67.65c.27.07.55.02.8-.12.24-.15.41-.38.48-.65.07-.27.02-.56-.12-.8ZM18.95,24.15l-1.02,4.83-2.85,5.17c-.34.6-.12,1.37.48,1.7.19.11.4.16.61.16.44,0,.87-.23,1.1-.64l2.67-4.83c.17-.17.29-.37.35-.61l.78-3.32c-1.14-.88-1.77-1.72-2.11-2.45ZM28.77,33.84l-1.81-5.16-3.47-4.84.26-4.66c.09-1.81.06-3.99-.13-4.79-.26-.73-.95-1.07-1.72-1.12-.95-.06-1.82.48-2.21,1.35l-3.37,3.43c-.11.14-.19.29-.22.46l-.79,3.92c-.11.57.26,1.12.82,1.24.28.06.56,0,.79-.16.23-.16.39-.39.45-.67l.73-3.63,1.21-.98-.3,4.9c.14.75.64,1.85,2.13,3.04l.92.75,2.55,2.94,1.79,4.81c.21.64.89.99,1.54.8.32-.1.58-.31.74-.6.16-.29.19-.63.1-.95,0-.02-.01-.04-.02-.06Z"/></svg>');
	}
	&[data-type="train"]:before{
		background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" fill="white"><path d="M29.45,9.9h-1.15l-.79-1.29c-.23-.38-.64-.61-1.08-.61h-9.03c-.44,0-.85.23-1.08.61l-.79,1.29h-.99c-1.34,0-2.42,1.08-2.42,2.42v14.57c0,.22.04.44.12.64l1.11,2.97c.27.72.96,1.2,1.72,1.2h.89l-3.45,4.3h2.38l1.24-1.54h11.76l1.24,1.54h2.38l-3.45-4.3h.85c.77,0,1.45-.48,1.72-1.2l1.11-2.97c.08-.21.12-.42.12-.64v-14.57c0-1.34-1.08-2.42-2.42-2.42ZM26.79,12.48c0,.41-.34.75-.75.75h-7.58c-.41,0-.75-.34-.75-.75s.34-.75.75-.75h7.58c.41,0,.75.34.75.75ZM14.84,27.05c0-.71.57-1.28,1.28-1.28s1.28.57,1.28,1.28-.57,1.28-1.28,1.28-1.28-.57-1.28-1.28ZM26.49,32.71h-8.95l.81-1.01h7.33l.81,1.01ZM27.96,28.33c-.71,0-1.28-.57-1.28-1.28s.57-1.28,1.28-1.28,1.28.57,1.28,1.28-.57,1.28-1.28,1.28ZM30.46,22.11c0,.6-.48,1.08-1.08,1.08h-14.73c-.6,0-1.08-.48-1.08-1.08v-5.7c0-.6.48-1.08,1.08-1.08h14.73c.6,0,1.08.48,1.08,1.08v5.7Z"/></svg>');
	}
	&[data-type="bus"]:before{
		background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" fill="white"><path d="M34.08,13.98h-.38c-.42,0-.73.02-.98.05v-1.04c0-2.18-1.77-3.95-3.95-3.95h-13.47c-2.18,0-3.95,1.77-3.95,3.95v1.06c-.25-.04-.59-.07-1.07-.07h-.38c-1.06,0-1.92,1.11-1.92,2.46,0,2.28.8,2.36,1.8,2.45v-3.46h1.57v15.03c0,.79.64,1.44,1.44,1.44h.37v1.9c0,.64.52,1.17,1.17,1.17h.92c.64,0,1.17-.52,1.17-1.17v-1.9h11.31v1.9c0,.64.52,1.17,1.17,1.17h.92c.64,0,1.17-.52,1.17-1.17v-1.9h.31c.79,0,1.44-.64,1.44-1.44v-15.03h1.48v3.46c1-.08,1.79-.16,1.79-2.45,0-1.35-.86-2.46-1.92-2.46ZM16.54,11.5c0-.35.28-.63.63-.63h9.91c.35,0,.63.28.63.63v.5c0,.35-.28.63-.63.63h-9.91c-.35,0-.63-.28-.63-.63v-.5ZM13.29,15.77c0-.49.4-.9.9-.9h15.73c.49,0,.9.4.9.9v7.7c0,.49-.4.9-.9.9h-15.73c-.49,0-.9-.4-.9-.9v-7.7ZM16.93,28.76h-2.97c-.38,0-.68-.31-.68-.68v-.7c0-.38.31-.68.68-.68h2.81c.32,0,.59.22.66.53l.16.7c.1.43-.23.83-.66.83ZM30.98,28.08c0,.38-.31.68-.68.68h-2.97c-.44,0-.76-.41-.66-.83l.16-.7c.07-.31.35-.53.66-.53h2.81c.38,0,.68.31.68.68v.7Z"/></svg>');
	}
	&[data-type="car"]:before{
		background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" fill="white"><path d="M34.29,19.08l-.2-.41,1.04-.6c.36-.1.61-.44.58-.81-.03-.43-.4-.75-.83-.72l-1.7.21-2.85-5.95c-.13-.27-.4-.44-.7-.44h-14.78c-.3,0-.57.17-.7.44l-2.84,5.93-1.7-.12c-.43-.03-.8.29-.83.72-.03.38.22.72.58.81l1.04.48-.18.38c-1.22.05-2.21,1.05-2.21,2.28v6.7c0,1.27,1.03,2.29,2.29,2.29h-.23v2.08c0,.71.57,1.28,1.28,1.28h1.01c.71,0,1.28-.57,1.28-1.28v-2.08h17.09v2.08c0,.71.57,1.28,1.28,1.28h1.01c.71,0,1.28-.57,1.28-1.28v-2.08h-.58c1.27,0,2.29-1.03,2.29-2.29v-6.7c0-1.06-.73-1.95-1.71-2.21ZM12.44,17.94l2.69-5.61c.12-.26.38-.42.66-.42h12.87c.28,0,.54.16.66.42l2.69,5.61c.23.49-.12,1.05-.66,1.05H13.11c-.54,0-.9-.57-.66-1.05ZM14.82,24.17h-3.26c-.41,0-.75-.33-.75-.75v-.77c0-.41.33-.75.75-.75h3.08c.35,0,.65.24.73.58l.17.77c.11.47-.25.91-.73.91ZM25.9,27.92c0,.38-.31.69-.69.69h-5.96c-.38,0-.69-.31-.69-.69v-.47c0-.38.31-.69.69-.69h5.96c.38,0,.69.31.69.69v.47ZM33.72,23.42c0,.41-.33.75-.75.75h-3.26c-.48,0-.84-.45-.73-.91l.17-.77c.08-.34.38-.58.73-.58h3.08c.41,0,.75.33.75.75v.77Z"/></svg>');
	}
	&[data-type="bicycle"]:before{
		background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" fill="white"><path d="M30.96,20.66c-.34,0-.68.04-1,.1l-.67-2.24c.02-.11.02-.23-.03-.33-.02-.05-.07-.07-.1-.11l-1.11-3.71h2.41c.3,0,.55-.25.55-.55s-.25-.55-.55-.55h-3.15c-.17,0-.34.08-.44.22-.1.14-.14.32-.09.49l1.17,3.9h-9.85l-1.22-2.31h2.49c.3,0,.55-.25.55-.55s-.25-.55-.55-.55h-3.4c-.19,0-.37.1-.47.27-.1.16-.11.37-.02.54l1.74,3.3-1.81,2.72c-.71-.39-1.52-.63-2.38-.63-2.78,0-5.04,2.26-5.04,5.04s2.26,5.04,5.04,5.04c2.32,0,4.25-1.58,4.84-3.71h4.14s0,0,0,0c0,0,0,0,.01,0,.08,0,.16-.02.23-.06,0,0,0,0,.01,0,.05-.03.1-.07.14-.11,0,0,.02-.01.03-.02h0s0,0,0,0l6.03-7.2.44,1.49c-1.76.79-2.99,2.55-2.99,4.59,0,2.78,2.26,5.04,5.04,5.04s5.04-2.26,5.04-5.04-2.26-5.04-5.04-5.04ZM13.04,29.64c-2.17,0-3.94-1.77-3.94-3.94s1.77-3.94,3.94-3.94c.64,0,1.24.17,1.77.44l-2.64,3.97c-.11.17-.12.39-.03.56.1.18.28.29.48.29h4.1c-.55,1.52-1.99,2.61-3.69,2.61ZM16.98,25.7c0,.08-.02.15-.02.23h-3.3l2.06-3.1c.77.72,1.26,1.74,1.26,2.87ZM16.32,21.91l1.48-2.23,3.3,6.25h-3.05c0-.08.02-.15.02-.23,0-1.52-.69-2.86-1.75-3.79ZM22.12,25.5l-3.44-6.53h8.9l-5.46,6.53ZM30.96,29.64c-2.17,0-3.94-1.77-3.94-3.94,0-1.55.91-2.88,2.21-3.52l1.2,4.02c.07.24.29.39.53.39.05,0,.11,0,.16-.02.29-.09.46-.39.37-.68l-1.21-4.05c.22-.04.45-.07.68-.07,2.17,0,3.94,1.77,3.94,3.94s-1.77,3.94-3.94,3.94Z"/></svg>');
	}
}

.spot{
	counter-increment: count;
	position: relative;
	display: grid;
	padding: clamp(16px, calc(40 / 992 * 100dvw), 40px);
	background: #fff;
	border-radius: 0 4px 4px 0;
	&:before{
		content: counter(count);
		position: absolute;
		top: 0;
		left: 0;
		display: grid;
		place-content: center;
		aspect-ratio: 1;
		width: 2.5em;
		padding-bottom: 0.2em;
		background: var(--color-theme);
		color: #fff;
		font-weight: 700;
		font-size: clamp(18px, calc(32 / 992 * 100dvw), 32px);
		text-align: center;
		line-height: 1;
		transform: translate(-50%, -50%);
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><rect x="10.55" y="10.55" width="58.91" height="58.91" rx="4" ry="4" transform="translate(-16.57 40) rotate(-45)"/></svg>') no-repeat center / contain;
	}
	&:after{
		content: "";
		grid-row: 2;
		margin-block: 8px;
		border-bottom: 1px solid #dedede;
	}
	.spotTitle{
		grid-row: 1;
	}
	.spotCatch{
		grid-row: 3;
	}
	.spotText{
		margin-top: clamp(16px, calc(24 / 992 * 100dvw), 24px);
	}
	.spotInfo{
		margin-top: clamp(24px, calc(40 / 992 * 100dvw), 40px);
	}
	.spotPhoto{
		order: -1;
		margin-top: clamp(16px, calc(24 / 992 * 100dvw), 24px);
	}
	@media (min-width: 992px) {
		&:has(.spotPhoto){
			grid-template-columns: auto 1fr;
			column-gap: 40px;
			&:after{
				grid-column: 1 / 3;
			}
			.spotTitle,
			.spotCatch{
				grid-column: 1 / 3;
			}
			.spotText{
				grid-row: 4;
			}
			.spotInfo{
				grid-row: 5;
				align-self: start;
			}
			.spotPhoto{
				grid-column: 1;
				grid-row: 4 / 6;
			}
		}
		.spotPhoto{
			grid-column: 1;
			grid-row: 2 / 5;
			width: clamp(400px, calc(490 / 1200 * 100dvw), 490px);
		}
	}
}

.spotTitle{
	font-weight: 700;
	font-size: clamp(18px, calc(28 / 768 * 100dvw), 28px);
	letter-spacing: 0.025em;
}

.spotCatch{
	color: var(--color-theme);
	font-weight: 700;
	font-size: clamp(16px, calc(24 / 768 * 100dvw), 24px);
}

.spotInfo{
	display: grid;
	align-content: start;
	margin-top: 16px;
	@media (max-width: 767.98px) {
		.spotLink:nth-child(2){
			margin-top: 16px;
		}
	}
	@media (min-width: 768px) {
		&:has(.spotLink:nth-child(2)){
			grid-template-columns: repeat(2, 1fr);
			column-gap: 16px;
			.spotData{
				&::details-content{
					order: 1;
					grid-column: 1 / 3;
				}
			}
		}
	}
}

.spotData{
	display: contents;
	&:only-child{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		&::details-content{
			width: 100%;
		}
		& summary{
			min-width: min(100%, 320px);
		}
	}
	& summary{
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: 0.5em;
		min-width: min(100%, 420px);
		min-height: clamp(48px, calc(64 / 768 * 100dvw), 64px);
		padding: 0.25em 1.5em 0.25em 2em;
		background: #fff;
		border: 1px solid currentColor;
		border-radius: clamp(24px, calc(32 / 768 * 100dvw), 32px);
		color: var(--color-theme);
		font-weight: 500;
		font-size: clamp(14px, calc(18 / 768 * 100dvw), 18px);
		text-align: center;
		cursor: pointer;
		transition: all 0.2s ease-out;
		&:hover{
			background: var(--color-theme);
			border-color: transparent;
			color: #fff;
		}
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 10px;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><polyline points="5 8 10 2 0 2 5 8"/></svg>') no-repeat center / contain;
		}
		[open] &{
			background: var(--color-theme);
			border-color: transparent;
			color: #fff;
			&:after{
				transform: scale(1, -1);
			}
		}
	}
	& summary+div{
		padding-top: 16px;
	}
	& dl{
		display: grid;
		border-bottom: 1px solid #dedede;
	}
	& dt,
	& dd{
		padding: 1em;
		font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
	}
	& dt{
		background: var(--color-theme);
		color: #fff;
		text-align: center;
	}
	& dd{
		
	}
	@media (min-width: 576px) {
		& dl{
			grid-template-columns: auto 1fr;
		}
		& dt,
		& dd{
			border-top: 1px solid #dedede;
		}
		& dt{
			min-width: 152px;
			max-width: 10em;
		}
	}
}

.spotLink{
	&:only-child{
		display: flex;
		justify-content: center;
		& a{
			min-width: min(100%, 320px);
		}
	}
	& a{
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: 0.5em;
		min-width: min(100%, 420px);
		min-height: clamp(48px, calc(64 / 768 * 100dvw), 64px);
		padding: 0.25em 1.5em 0.25em 2em;
		background: #fff;
		border: 1px solid currentColor;
		border-radius: clamp(24px, calc(32 / 768 * 100dvw), 32px);
		font-weight: 500;
		font-size: clamp(14px, calc(18 / 768 * 100dvw), 18px);
		text-align: center;
		text-decoration: none;
		&:hover{
			background: var(--color-theme);
			border-color: transparent;
			color: #fff;
		}
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 16px;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><polyline points="5.6 3.2 10.4 8 5.6 12.8" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"/></svg>') no-repeat center / 16px;
		}
		@media (min-width: 768px) {
			&:after{
				-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><polyline points="4.8 1.6 11.2 8 4.8 14.4" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"/></svg>');
			}
		}
	}
}

.spotPhoto{
	& dl{
		display: grid;
		border-radius: 4px;
		overflow: hidden;
		& dt,
		& dd{
			grid-column: 1;
			grid-row: 1;
		}
	}
	& dt{
		display: grid;
		align-content: end;
		aspect-ratio: 3 / 2;
		padding: 1em;
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), transparent 30%);
		color: #fff;
		font-weight: 500;
		font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
		text-align: center;
		overflow: hidden;
		z-index: 1;
		&:empty{
			display: none;
		}
	}
	& dd{
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
		}
	}
	&:not(:has(.slick-slider)){
		display: grid;
		& dl{
			grid-column: 1;
			grid-row: 1;
			&:nth-child(n+2){
				visibility: hidden;
			}
		}
	}
	.slick-slider{
		display: grid;
		grid-template-columns: 0 1fr 0;
		.slick-list{
			grid-column: 2;
		}
	}
	.slide{
		align-items: center;
		.slick-arrow{
			justify-self: center;
		}
	}
	.slideNav{
		margin-top: 16px;
		overflow: hidden;
		& dt{
			display: none;
		}
		.slick-list{
			margin-inline: -4px;
			&:only-child{
				display: flex;
				justify-content: center;
				.slick-track{
					transform: unset !important;
				}
			}
		}
		.slick-slide{
			cursor: pointer;
			margin-inline: 4px;
		}
		.slick-current{
			opacity: 0.5;
		}
		.slick-arrow{
			aspect-ratio: 1 / 2.5;
			width: auto;
			height: 100%;
			background: rgba(255, 255, 255, 0.9);
			border-color: transparent;
			border-radius: unset;
			&:hover{
				color: var(--color-theme);
			}
		}
		.slick-next{
			justify-self: end;
		}
	}
}

.column{
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-row-gap: clamp(16px, calc(40 / 992 * 100dvw), 40px);
	padding-bottom: clamp(16px, calc(40 / 992 * 100dvw), 40px);
	background: #fff;
	border: 1px solid var(--color-theme);
	border-radius: 4px;
	&:before{
		content: "";
		grid-column: 1 / 3;
		grid-row: 1;
		background: var(--color-theme);
		border-radius: 4px 4px 0 0;
	}
	& h3{
		grid-column: 1;
		grid-row: 1;
		align-self: center;
		position: relative;
		max-width: 10em;
		margin: 0.75em 0;
		padding: 0.25em 0 0.25em 0.5em;
		background: #dfb22a;
		color: #fff;
		font-weight: 700;
		font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
		transform: translateX(-1em);
		&:before{
			content: "";
			position: absolute;
			bottom: 100%;
			left: 0;
			aspect-ratio: 2 / 1;
			width: 1em;
			background: #e8cf84;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 8"><polygon points="16 8 0 8 16 0 16 8"/></svg>') no-repeat center / contain;
		}
		&:after{
			content: "";
			position: absolute;
			top: 0;
			left: 100%;
			width: 0.5em;
			height: 100%;
			background: inherit;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 8 32"><polyline points="0 0 8 16 0 32"/></svg>') no-repeat center / cover;
		}
	}
	& h3+div{
		display: contents;
	}
	& h4{
		grid-column: 2;
		grid-row: 1;
		display: grid;
		align-items: center;
		min-height: 2.8em;
		margin-right: clamp(16px, calc(40 / 992 * 100dvw), 40px);
		color: #fff;
		font-weight: 500;
		font-size: clamp(18px, calc(20 / 768 * 100dvw), 20px);
	}
	& h4+div,
	& h4+div+div,
	& figure{
		grid-column: 1 / 3;
		margin-inline: clamp(16px, calc(40 / 992 * 100dvw), 40px);
	}
	& h4+div+div{
		display: flex;
		justify-content: center;
		& a{
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			column-gap: 0.5em;
			min-width: min(100%, 320px);
			min-height: clamp(48px, calc(64 / 768 * 100dvw), 64px);
			padding: 0.25em 1.5em 0.25em 2em;
			background: #fff;
			border: 1px solid currentColor;
			border-radius: clamp(24px, calc(32 / 768 * 100dvw), 32px);
			font-weight: 500;
			font-size: clamp(14px, calc(18 / 768 * 100dvw), 18px);
			text-align: center;
			text-decoration: none;
			&:hover{
				background: var(--color-theme);
				border-color: transparent;
				color: #fff;
			}
			&:after{
				content: "";
				aspect-ratio: 1;
				width: 16px;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><polyline points="5.6 3.2 10.4 8 5.6 12.8" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"/></svg>') no-repeat center / 16px;
			}
			@media (min-width: 768px) {
				&:after{
					-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><polyline points="4.8 1.6 11.2 8 4.8 14.4" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"/></svg>');
				}
			}
		}
	}
	& figure{
		grid-row: 2;
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 4px;
		}
	}
	@media (min-width: 768px) {
		&:has(figure){
			& h4+div,
			& h4+div+div{
				margin-left: calc(clamp(320px, calc(360 / 992 * 100dvw), 360px) + clamp(32px, calc(80 / 992 * 100dvw), 80px));
			}
			& h4+div{
				grid-row: 2;
			}
			& h4+div+div{
				grid-row: 3;
				align-self: start;
			}
		}
		& figure{
			grid-row: 2 / 4;
			align-self: start;
			width: clamp(320px, calc(360 / 992 * 100dvw), 360px);
		}
	}
}

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