/* CSS Document */

#access{
	display: grid;
	padding: clamp(24px, calc(32 / 1200 * 100dvw), 32px) 0 16px 0;
	overflow: hidden;
	& h2{
		display: grid;
		grid-template-columns: var(--wrap);
		justify-content: center;
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(24px, calc(32 / 768 * 100dvw), 32px);
		letter-spacing: 0.1em;
		text-align: center;
	}
	#map{
		justify-self: center;
		width: var(--wrap);
	}
}

#map{
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 328px), 1fr));
	grid-gap: clamp(40px, calc(80 / 1200 * 100dvw), 80px);
	padding-top: clamp(32px, calc(64 / 1200 * 100dvw), 64px);
	z-index: 1;
	&:before{
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		width: 100dvw;
		height: 120px;
		background: linear-gradient(#dfe9f2, transparent);
		transform: translateX(-50%);
		z-index: -1;
	}
	& section{
		display: grid;
	}
	& h3{
		font-weight: 700;
		font-size: 18px;
		letter-spacing: 0.1em;
	}
	& h3+div{
		order: 1;
		display: flex;
		justify-content: center;
		margin-top: clamp(24px, calc(40 / 1200 * 100dvw), 40px);
		& a{
			display: grid;
			align-items: center;
			column-gap: 4px;
			min-width: min(100%, 240px);
			min-height: 48px;
			padding: 0.25em 1.5em;
			background: #fff;
			border-radius: 24px;
			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));
		}
	}
	& figure{
		margin-top: 16px;
		& img{
			width: 100%;
			height: auto;
			border-radius: 8px;
		}
	}
}

#tab{
	position: relative;
	display: grid;
	grid-template-columns: min(var(--wrap), 760px);
	justify-content: center;
	padding-top: clamp(24px, calc(48 / 1200 * 100dvw), 48px);
	background: linear-gradient(transparent, #dfe9f2);
	border-bottom: 16px solid #6ea3bd;
	& ul{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: clamp(16px, calc(24 / 1200 * 100dvw), 24px);
	}
	& li{
		display: contents;
	}
	& a{
		position: relative;
		display: grid;
		align-items: center;
		min-height: 64px;
		padding: 0.25em 1em;
		background: #fff;
		border-radius: 8px 8px 0 0;
		color: inherit;
		font-weight: 700;
		font-size: clamp(14px, calc(20 / 768 * 100dvw), 20px);
		letter-spacing: 0.1em;
		text-align: center;
		text-decoration: none;
		word-break: keep-all;
		overflow-wrap: anywhere;
		&:before,
		&:after{
			content: "";
			position: absolute;
			bottom: 0;
			aspect-ratio: 1;
			width: 8px;
			background: inherit;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><path d=""/></svg>') no-repeat center / contain;
		}
		&:before{
			left: 0;
			transform: translateX(-100%);
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><path d="M8,0h0s0,8,0,8H0s0,0,0,0c4.42,0,8-3.58,8-8Z"/></svg>');
		}
		&:after{
			right: 0;
			transform: translateX(100%);
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><path d="M0,0H0s0,8,0,8h8s0,0,0,0C3.58,8,0,4.42,0,0Z"/></svg>');
		}
		.select &{
			background: #6ea3bd;
			color: #fff;
		}
	}
}

#route{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	padding: clamp(64px, calc(128 / 1200 * 100dvw), 128px) 0;
	background: linear-gradient(transparent, #dfe9f2 120px, #dfe9f2 calc(100% - 120px), transparent);
	overflow: hidden;
	& h2{
		display: none;
	}
	& form{
		display: grid;
		grid-row-gap: clamp(48px, calc(64 / 1200 * 100dvw), 64px);
	}
	& legend{
		font-weight: 700;
		font-size: 18px;
		letter-spacing: 0.1em;
	}
	& legend+div{
		margin-top: 16px;
	}
	& ul{
		display: grid;
		grid-gap: 16px 24px;
		grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 16px), 224px), 1fr));
		width: min(100%, 980px);
		margin: 0 auto;
	}
	& li{
		display: contents;
	}
	& label{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: 0.5em;
		min-width: min(100%, 240px);
		min-height: 40px;
		padding: 0.25em 1em;
		background: #fff;
		border-radius: 20px;
		font-weight: 700;
		font-size: 14px;
		letter-spacing: 0.1em;
		text-align: center;
		&:has([type="checkbox"]:checked),
		&:has([type="radio"]:checked){
			background: #f7efb2;
		}
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 8px;
			background: currentColor;
			border-radius: 100%;
		}
		& input{
			display: none;
		}
	}
	& dl{
		display: none;
	}
}

#routeSubmit{
	display: flex;
	justify-content: center;
	& button{
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: 4px;
		min-width: min(100%, 360px);
		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));
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 20px;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M17,13c-1.3,0-2.4.84-2.82,2h-1.18c-1.1,0-2-.9-2-2V5h2.98c.41,1.16,1.51,2,2.82,2,1.66,0,3-1.34,3-3s-1.34-3-3-3c-1.3,0-2.4.84-2.82,2H5.82c-.41-1.16-1.51-2-2.82-2C1.34,1,0,2.34,0,4s1.34,3,3,3c1.3,0,2.4-.84,2.82-2h3.18v8c0,2.21,1.79,4,4,4h1.18c.41,1.16,1.51,2,2.82,2,1.66,0,3-1.34,3-3s-1.34-3-3-3Z"/></svg>') no-repeat center / contain;
		}
	}
}

#information{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	justify-content: center;
	padding: clamp(48px, calc(80 / 1200 * 100dvw), 80px) 0 clamp(64px, calc(104 / 1200 * 100dvw), 104px) 0;
	background: #b6d0de;
	overflow: hidden;
	&>*{
		grid-column: 2;
	}
	&:before{
		content: "INFOMATION";
		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;
	}
	& h2{
		margin-top: 32px;
		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{
		grid-column: 1 / 4;
		justify-self: center;
		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));
			}
		}
	}
	.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);
	}
}

#links{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	padding: clamp(64px, calc(112 / 1200 * 100dvw), 112px) 0;
	background: #dfe9f2;
	overflow: hidden;
	& h2{
		display: flex;
		justify-content: center;
		align-items: center;
		column-gap: 1em;
		color: inherit;
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(20px, calc(24 / 768 * 100dvw), 24px);
		letter-spacing: 0.1em;
		&:before,
		&:after{
			content: "";
			width: 24px;
			height: 3px;
			background: currentColor;
			border-radius: 1.5px;
		}
	}
	& h2+div{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 264px), 1fr));
		grid-gap: 48px clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		margin-top: clamp(48px, calc(64 / 1200 * 100dvw), 64px);
	}
	& section{
		display: grid;
		align-content: flex-start;
		grid-row-gap: 16xp;
	}
	& h3{
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: 1em;
		padding: 0 16px 0.25em 16px;
		border-bottom: 2px solid currentColor;
		font-weight: 700;
		font-size: clamp(18px, calc(20 / 768 * 100dvw), 20px);
		letter-spacing: 0.1em;
		text-align: center;
		&:before{
			content: "";
			align-self: start;
			aspect-ratio: 1;
			width: 56px;
			background: currentColor;
			transform: translateY(0.25em);
		}
		&[data-icon="train"]:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56"><path d="M47.25,55.22l-8.15-6.46c4.09-.18,7.38-3.84,7.38-8.32V12.72c0-4.6-3.45-8.34-7.68-8.34h-21.59c-4.24,0-7.68,3.74-7.68,8.34v27.72c0,4.48,3.28,8.14,7.38,8.32l-8.15,6.46c-.25.2-.36.49-.36.78h2.6l4.49-3.56h25.06l4.49,3.56h2.6c0-.29-.11-.59-.36-.78ZM17.99,50.44l2.11-1.67h15.8l2.11,1.67h-20.02ZM17.2,46.78c-3.13,0-5.68-2.84-5.68-6.34V12.72c0-3.49,2.55-6.34,5.68-6.34h21.59c3.13,0,5.68,2.84,5.68,6.34v27.72c0,3.49-2.55,6.34-5.68,6.34h-21.59ZM38.47,15.7h-20.95c-1.65,0-3,1.35-3,3v9.94c0,1.65,1.35,3,3,3h20.95c1.65,0,3-1.35,3-3v-9.94c0-1.65-1.35-3-3-3ZM39.47,28.64c0,.55-.45,1-1,1h-20.95c-.55,0-1-.45-1-1v-9.94c0-.55.45-1,1-1h20.95c.55,0,1,.45,1,1v9.94ZM21.58,11.72h12.84c.55,0,1-.45,1-1s-.45-1-1-1h-12.84c-.55,0-1,.45-1,1s.45,1,1,1ZM37.92,35.5c-1.96,0-3.55,1.59-3.55,3.55s1.59,3.55,3.55,3.55,3.55-1.59,3.55-3.55-1.59-3.55-3.55-3.55ZM37.92,40.61c-.86,0-1.55-.7-1.55-1.55s.7-1.55,1.55-1.55,1.55.7,1.55,1.55-.7,1.55-1.55,1.55ZM18.08,35.5c-1.96,0-3.55,1.59-3.55,3.55s1.59,3.55,3.55,3.55,3.55-1.59,3.55-3.55-1.59-3.55-3.55-3.55ZM18.08,40.61c-.86,0-1.55-.7-1.55-1.55s.7-1.55,1.55-1.55,1.55.7,1.55,1.55-.7,1.55-1.55,1.55Z"/></svg>');
		}
		&[data-icon="bus"]:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56"><path d="M42.16,15.06H13.63c-.55,0-1,.45-1,1v10.67c0,1.03.45,2.04,1.24,2.76l1.66,1.52c.18.17.42.26.67.26h23.5c.26,0,.5-.1.69-.28l1.6-1.53c.76-.72,1.18-1.68,1.18-2.7v-10.71c0-.55-.45-1-1-1ZM20.26,29.2c.45-1.78,2.06-3.1,3.97-3.1s3.53,1.32,3.97,3.1h-7.95ZM41.16,26.77c0,.46-.2.91-.56,1.25l-1.31,1.25h-9.04c-.45-2.92-2.97-5.17-6.02-5.17s-5.57,2.25-6.02,5.17h-1.63l-1.37-1.26c-.38-.35-.59-.8-.59-1.28v-9.67h26.53v9.71ZM23.72,11.88h8.78c.55,0,1-.45,1-1s-.45-1-1-1h-8.78c-.55,0-1,.45-1,1s.45,1,1,1ZM37.16,11.88h.72c.55,0,1-.45,1-1s-.45-1-1-1h-.72c-.55,0-1,.45-1,1s.45,1,1,1ZM18.12,11.88h.95c.55,0,1-.45,1-1s-.45-1-1-1h-.95c-.55,0-1,.45-1,1s.45,1,1,1ZM49.54,12.55h-2.27v-2.84c0-2.76-2.24-5-5-5H13.72c-2.76,0-5,2.24-5,5v2.84h-2.27c-1.51,0-2.75,1.23-2.75,2.75v9.81c0,1.51,1.23,2.75,2.75,2.75h2.27v15.91c0,2.05,1.24,3.81,3.01,4.58v.73c0,2.32,1.89,4.21,4.21,4.21s4.21-1.89,4.21-4.21v-.31h15.7v.31c0,2.32,1.89,4.21,4.21,4.21s4.21-1.89,4.21-4.21v-.73c1.77-.77,3.01-2.53,3.01-4.58v-15.91h2.27c1.51,0,2.75-1.23,2.75-2.75v-9.81c0-1.51-1.23-2.75-2.75-2.75ZM8.72,25.86h-2.27c-.41,0-.75-.33-.75-.75v-9.81c0-.41.33-.75.75-.75h2.27v11.31ZM18.15,49.08c0,1.22-.99,2.21-2.21,2.21s-2.21-.99-2.21-2.21v-.31h4.42v.31ZM42.27,49.08c0,1.22-.99,2.21-2.21,2.21s-2.21-.99-2.21-2.21v-.31h4.42v.31ZM45.28,43.77c0,1.65-1.35,3-3,3H13.72c-1.65,0-3-1.35-3-3V9.71c0-1.65,1.35-3,3-3h28.56c1.65,0,3,1.35,3,3v34.06ZM50.29,25.11c0,.41-.33.75-.75.75h-2.27v-11.31h2.27c.41,0,.75.33.75.75v9.81ZM36.56,35.58c-1.98,0-3.59,1.61-3.59,3.59s1.61,3.59,3.59,3.59,3.59-1.61,3.59-3.59-1.61-3.59-3.59-3.59ZM36.56,40.75c-.88,0-1.59-.71-1.59-1.59s.71-1.59,1.59-1.59,1.59.71,1.59,1.59-.71,1.59-1.59,1.59ZM19.44,35.58c-1.98,0-3.59,1.61-3.59,3.59s1.61,3.59,3.59,3.59,3.59-1.61,3.59-3.59-1.61-3.59-3.59-3.59ZM19.44,40.75c-.88,0-1.59-.71-1.59-1.59s.71-1.59,1.59-1.59,1.59.71,1.59,1.59-.71,1.59-1.59,1.59ZM29.18,38.17h-2.36c-.55,0-1,.45-1,1s.45,1,1,1h2.36c.55,0,1-.45,1-1s-.45-1-1-1Z"/></svg>');
		}
		&[data-icon="car"]:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56"><path d="M52.34,30.83c0-.12-.02-.23-.07-.35,0,0,0,0,0,0l-5.35-12.74c-.54-1.07-1.61-1.74-2.81-1.74h-18.47c-1.1,0-2.09.56-2.71,1.55l-6.52,12.49-8.6,2.6c-2.41.49-4.15,2.62-4.15,5.08v6.84c0,1.68,1.37,3.05,3.05,3.05h6.33c.47,2.51,2.68,4.41,5.32,4.41s4.85-1.9,5.32-4.41h12.62c.47,2.51,2.68,4.41,5.32,4.41s4.85-1.9,5.32-4.41h2.35c1.68,0,3.05-1.37,3.05-3.05v-13.67s0-.03,0-.04ZM37.63,18h6.47c.44,0,.83.24.99.57l4.74,11.3h-12.21v-11.87ZM24.66,18.53c.21-.34.57-.54.97-.54h10v11.87h-16.89l5.92-11.33ZM18.35,50c-1.89,0-3.42-1.53-3.42-3.41s1.53-3.41,3.42-3.41,3.42,1.53,3.42,3.41-1.53,3.41-3.42,3.41ZM41.62,50c-1.89,0-3.42-1.53-3.42-3.41s1.53-3.41,3.42-3.41,3.42,1.53,3.42,3.41-1.53,3.41-3.42,3.41ZM50.35,44.54c0,.58-.47,1.05-1.05,1.05h-2.35c-.47-2.51-2.68-4.41-5.32-4.41s-4.85,1.9-5.32,4.41h-12.62c-.47-2.51-2.68-4.41-5.32-4.41s-4.85,1.9-5.32,4.41h-6.33c-.58,0-1.05-.47-1.05-1.05v-6.84c0-1.51,1.07-2.82,2.64-3.14l8.95-2.7h33.1v12.67ZM31.97,37.06h4.18c.55,0,1-.45,1-1s-.45-1-1-1h-4.18c-.55,0-1,.45-1,1s.45,1,1,1Z"/></svg>');
		}
		&[data-icon="plane"]:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56"><path d="M51.8,8.67c-.48-2.24-2.24-3.99-4.48-4.48-3.15-.68-6.4.43-8.47,2.91l-6.56,7.84-3.79-1.21,2.41-3.05c.34-.43.27-1.06-.16-1.41-.43-.34-1.06-.27-1.4.16l-2.89,3.64-4.2-1.34,2.12-2.68c.34-.43.27-1.06-.16-1.4-.43-.34-1.06-.27-1.4.16l-2.59,3.27-9.85-3.14c-.35-.11-.75-.02-1.01.25l-4.08,4.08c-.22.22-.32.52-.29.83.04.3.21.58.47.74l8.5,5.15-2.87,3.62c-.34.43-.27,1.06.16,1.41.18.15.4.22.62.22.29,0,.59-.13.78-.38l3.02-3.82,3.55,2.15-1.61,2.04c-.34.43-.27,1.06.16,1.41.18.15.4.22.62.22.29,0,.59-.13.78-.38l1.77-2.23,2.91,1.76-6.85,8.19H7.82c-.27,0-.52.11-.71.29l-2.81,2.82c-.24.24-.34.59-.27.92s.31.61.64.72l9.84,3.55,3.55,9.84c.12.32.39.56.72.64.07.02.15.02.22.02.26,0,.52-.1.71-.29l2.82-2.82c.19-.19.29-.44.29-.71v-9.23l8.19-6.85,1.76,2.9-2.24,1.77c-.43.34-.51.97-.16,1.41.2.25.49.38.78.38.22,0,.44-.07.62-.22l2.04-1.61,2.15,3.55-3.82,3.02c-.43.34-.51.97-.16,1.41.2.25.49.38.78.38.22,0,.44-.07.62-.22l3.62-2.87,5.15,8.5c.16.26.43.44.74.48.04,0,.08,0,.12,0,.26,0,.52-.1.71-.29l4.08-4.08c.26-.26.36-.65.25-1.01l-3.14-9.85,3.27-2.59c.43-.34.51-.97.16-1.41-.34-.43-.97-.51-1.4-.16l-2.68,2.12-1.34-4.2,3.64-2.88c.43-.34.51-.97.16-1.41-.34-.43-.97-.51-1.4-.16l-3.05,2.42-1.2-3.78,7.85-6.56c2.48-2.07,3.59-5.32,2.91-8.47ZM7.61,12.8l2.75-2.75,9.35,2.98c.05.06.08.12.14.17.18.15.4.22.62.22.09,0,.18-.03.26-.06l5.77,1.84s0,0,0,0l4.41,1.4-5.72,6.85L7.61,12.8ZM42.63,35.25c-.09.3-.05.63.16.89.05.06.11.09.17.13l2.98,9.36-2.75,2.75-10.64-17.57,6.84-5.72,3.24,10.17ZM47.61,15.61l-8.3,6.94s-.05.03-.07.04l-8.34,6.98-9.74,8.14c-.23.19-.36.47-.36.77v9.28l-1.41,1.41-3.17-8.8c-.1-.28-.32-.5-.6-.6l-8.8-3.17,1.41-1.41h9.28c.3,0,.58-.13.77-.36l9.61-11.5,5.51-6.59s0,0,0,0l6.98-8.36c1.59-1.9,4.09-2.76,6.51-2.24,1.47.32,2.63,1.47,2.94,2.95.53,2.43-.33,4.92-2.24,6.51Z"/></svg>');
		}
		&[data-icon="ship"]:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56"><path d="M51.46,48.92c-.39-.39-1.02-.39-1.41,0-1.57,1.57-3.88,1.96-5.82,1.18l5.33-16.29c.13-.39,0-.8-.28-1.05-.1-.09-.21-.15-.34-.2l-7.12-2.5v-8.38c0-1.95-1.58-3.53-3.53-3.53h-1.39l-1.53-5.83c-.29-1.12-1.31-1.9-2.47-1.9h-1.31l-.56-4.54c-.06-.5-.49-.88-.99-.88h-4.05c-.5,0-.93.38-.99.88l-.56,4.54h-1.31c-1.16,0-2.17.78-2.47,1.9l-1.53,5.83h-1.39c-1.95,0-3.53,1.58-3.53,3.53v8.38l-4.05,1.42-3.07,1.08c-.51.18-.79.74-.62,1.25l1.47,4.49s0,0,0,0l3.86,11.78c-1.94.8-4.25.43-5.84-1.12-.39-.39-1.03-.38-1.41.01-.39.39-.38,1.03.01,1.41,2.88,2.82,7.53,2.8,10.38-.05l.11-.11c2.08-2.08,5.47-2.09,7.57-.03l.2.19c.9.89,1.98,1.49,3.13,1.82.01,0,.02.01.03.02.09.03.19.04.28.06.16.04.33.08.5.1.14.02.27.04.41.06.18.02.36.03.54.04.09,0,.17.02.26.02,0,0,0,0,0,0,0,0,.02,0,.03,0,.02,0,.03,0,.05-.01.04,0,.08,0,.12,0,.2,0,.4-.01.6-.04.1-.01.21-.03.31-.05.18-.03.35-.06.53-.1.05-.01.1-.01.14-.03.02,0,.03-.02.04-.02,1.25-.31,2.43-.95,3.4-1.92l.11-.11c2.08-2.08,5.47-2.09,7.57-.03l.2.19c1.43,1.4,3.3,2.1,5.17,2.1s3.78-.72,5.22-2.15c.39-.39.39-1.02,0-1.41ZM47.34,34.12l-.85,2.59-17.5-6.14v-2.89l18.34,6.43ZM26.86,7h2.29l.43,3.42h-3.14l.43-3.42ZM22.58,12.83c.06-.24.28-.41.53-.41h9.78c.25,0,.47.17.53.41l1.39,5.32h-13.63l1.39-5.32ZM27,50.27h-.5c-.84-.24-1.63-.66-2.29-1.31l-.2-.19c-2.88-2.82-7.53-2.8-10.38.05l-.11.11s0,0,0,0l-3.38-10.32,16.87-5.92v17.58ZM27,30.57l-17.49,6.14-.85-2.59,2.89-1.01,15.46-5.42v2.89ZM28.33,25.33c-.21-.08-.45-.08-.66,0l-11.47,4.02v-7.68c0-.84.69-1.53,1.53-1.53h20.55c.84,0,1.53.69,1.53,1.53v7.68l-11.47-4.02ZM42.47,48.96l-.2-.19c-2.88-2.82-7.53-2.8-10.38.05l-.11.11c-.7.7-1.56,1.15-2.46,1.38h-.32v-17.61l16.87,5.92-3.39,10.36s0,0-.01-.01ZM20.37,21.89c-.55,0-1,.45-1,1v2.53c0,.55.45,1,1,1s1-.45,1-1v-2.53c0-.55-.45-1-1-1ZM35.75,21.89c-.55,0-1,.45-1,1v2.53c0,.55.45,1,1,1s1-.45,1-1v-2.53c0-.55-.45-1-1-1Z"/></svg>');
		}
	}
	& h3+div{
		margin-top: clamp(24px, calc(40 / 1200 * 100dvw), 40px);
	}
	& ul{
		display: grid;
		grid-gap: 24px;
		margin-inline: 16px;
	}
	& li{
		display: contents;
	}
	& a{
		position: relative;
		display: inline-block;
		padding-left: 2em;
		color: inherit;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-decoration: none;
		&:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			aspect-ratio: 1;
			width: 16px;
			background: var(--color-theme);
			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="M13,9c-.55,0-1,.45-1,1v4H2V4h4c.55,0,1-.45,1-1s-.45-1-1-1H1c-.55,0-1,.45-1,1v12c0,.55.45,1,1,1h12c.55,0,1-.45,1-1v-5c0-.55-.45-1-1-1ZM15.92.62c-.1-.24-.3-.44-.54-.54-.12-.05-.25-.08-.38-.08h-5c-.55,0-1,.45-1,1s.45,1,1,1h2.59l-6.29,6.29c-.39.39-.39,1.02,0,1.41.2.2.45.29.71.29s.51-.1.71-.29l6.29-6.29v2.59c0,.55.45,1,1,1s1-.45,1-1V1c0-.13-.03-.26-.08-.38Z"/></svg>') no-repeat center / contain;
		}
	}
}

#recommend{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	justify-content: center;
	padding: clamp(56px, calc(104 / 1200 * 100dvw), 104px) 0 clamp(72px, calc(128 / 1200 * 100dvw), 128px) 0;
	background: #b6d0de;
	overflow: hidden;
	&>*{
		grid-column: 2;
	}
	&:before{
		content: "RECOMMEND";
		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;
	}
	& h2{
		margin-top: 32px;
		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{
		grid-column: 1 / 4;
		justify-self: center;
		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;
	}
}