/* CSS Document */

#detail{
	margin: clamp(32px, calc(48 / 1200 * 100vw), 48px) 0 0 0;
}

#detailHeader{
	display: grid;
	width: var(--wrap);
	margin-inline: auto;
	& h2{
		font-weight: 900;
		font-size: clamp(24px, calc(28 / 768 * 100vw), 28px);
		letter-spacing: 0.1em;
	}
	& h2+div{
		display: grid;
		grid-template-rows: 1fr;
		padding: clamp(40px, calc(48 / 1200 * 100vw), 48px);
		background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 10 10" fill="white"><rect width="100%" height="100%"/></svg>') no-repeat center / calc(100% - 40px) calc(100% - 40px),  url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="white" opacity="0.3"><rect x="5px" width="4" height="100%" /></svg>') center top / 14px;
		background-color: #f8f1e7;
	}
	#detailPhoto{
		grid-row: 2;
		margin-top: clamp(8px, calc(16 / 1200 * 100vw), 16px);
	}
	@media (max-width: 767.98px) {
		#detailPhoto,
		& h2+div{
			margin-left: -24px;
			margin-right: -24px;
		}
	}
	@media (min-width: 992px) {
		grid-template-columns: auto 1fr;
		& h2{
			grid-column: 1 / 3;
		}
		& h2+div{
			margin-top: clamp(8px, calc(16 / 1200 * 100vw), 16px);
		}
		#detailPhoto{
			width: clamp(640px, calc(752 / 1200 * 100vw), 752px);
		}
	}
}

#detailStatus{
	display: grid;
	grid-row-gap: 8px;
	margin-top: clamp(16px, calc(24 / 1200 * 100vw), 24px);
	padding-top: 16px;
	border-top: 1px solid currentColor;
	color: #80B41F;
	& dl{
		display: flex;
		flex-wrap: wrap;
		column-gap: 4px;
	}
	& dt{
		display: flex;
		align-items: center;
		column-gap: 4px;
		&:before{
			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"><path d=""/><rect width="100%" height="100%"/></svg>') no-repeat center / contain;
		}
		#detailStatusTime &:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8,16a8,8,0,1,1,8-8A8,8,0,0,1,8,16ZM8,2a6,6,0,1,0,6,6A6,6,0,0,0,8,2Z"/><path d="M10.8,11.8a1,1,0,0,1-.71-.29L7,8.41V3.1a1,1,0,1,1,2,0V7.59l2.51,2.5a1,1,0,0,1,0,1.42A1,1,0,0,1,10.8,11.8Z"/></svg>');
		}
		#detailStatusAccess &:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -2 16 16"><path d="M12.08,6.92a1,1,0,0,0,0,1.42l.54.53h-.74A3.32,3.32,0,0,1,9.11,7.23l-.34-.55L9.14,6a3.24,3.24,0,0,1,2.74-1.83h.71l-.51.5a1,1,0,0,0,0,1.42,1,1,0,0,0,.71.29,1,1,0,0,0,.71-.29l2.91-2.92L13.5.29a1,1,0,1,0-1.42,1.42l.51.5h-.71a5.16,5.16,0,0,0-4.3,2.56A5.29,5.29,0,0,0,3.13,2.21H1a1,1,0,0,0,0,2H3.13A3.32,3.32,0,0,1,5.9,5.85l.55.88-.58,1A3.26,3.26,0,0,1,3.13,9.58H1a1,1,0,0,0,0,2H3.13A5.25,5.25,0,0,0,7.62,8.73l0-.09a5.24,5.24,0,0,0,4.21,2.23h.68l-.48.48a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.29,1,1,0,0,0,.71-.29l2.91-2.92L13.5,6.92A1,1,0,0,0,12.08,6.92Z"/></svg>');
		}
		&:after{
			content: ":";
		}
	}
}

#detailPhoto{
	position: relative;
	&:before{
		content: "";
		display: block;
		aspect-ratio: 3 / 2;
	}
	& img{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

#detailTable{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	margin-top: clamp(64px, calc(80 / 1200 * 100vw), 80px);
	padding: clamp(64px, calc(80 / 1200 * 100vw), 80px) 0;
	background: #e8f2eb;
	overflow: hidden;
	& h3{
		font-weight: 900;
		font-size: clamp(20px, calc(24 / 768 * 100vw), 24px);
		letter-spacing: 0.1em;
		text-align: center;
	}
	& h3+div{
		margin-top: clamp(20px, calc(32 / 1200 * 100vw), 32px);
	}
	& dl{
		position: relative;
		display: grid;
		width: min(calc(100dvw - 64px), 320px);
		background: #fff;
		border-radius: 8px;
		filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 3 / 2;
			background: var(--dummy);
		}
		& img{
			aspect-ratio: 3 / 2;
		}
	}
	& dt{
		order: 1;
		padding: 16px;
		font-weight: 700;
		letter-spacing: 0.06em;
	}
	& dd{
		&:has(a){
			display: contents;
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	.slide{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		grid-gap: 32px;
	}
	.slick-slider{
		display: grid;
		grid-template-columns: auto 1fr auto;
		.slick-list{
			grid-column: 1 / 4;
			grid-row: 1;
		}
		.slick-dots{
			grid-column: 2;
			grid-row: 2;
		}
	}
	.slick-list{
		overflow: visible;
	}
	.slick-slide{
		display: grid;
		height: auto;
		margin: 0 clamp(8px, calc(16 / 1200 * 100vw), 16px);
	}
	.slick-arrow{
		justify-self: center;
		align-self: center;
		width: clamp(40px, calc(48 / 1200 * 100vw), 48px);
		border: 1px solid currentColor;
		background: #fff;
		color: inherit;
	}
	.slick-dots{
		&:has(li:only-child){
			visibility: hidden;
		}
		& button{
			background: #d8d5d1;
			.slick-active &{
				background: var(--color-theme);
				transform: scale(1.5);
			}
		}
	}
}

#detailCourse{
	position: relative;
	display: grid;
	grid-row-gap: clamp(24px, calc(48 / 1200 * 100vw), 48px);
	width: var(--wrap);
	margin-inline: auto;
	margin-top: clamp(64px, calc(80 / 1200 * 100vw), 80px);
	&:before{
		content: "";
		position: absolute;
		top: 0;
		left: 24px;
		width: 0;
		height: 100%;
		border-left: 2px solid var(--color-theme);
		transform: translateX(-50%);
	}
	&>*{
		z-index: 1;
	}
	#detailCourseStart,
	#detailCourseGoal{
		justify-self: start;
	}
}

#detailCourseStart,
#detailCourseGoal{
	display: grid;
	grid-template-columns: 48px 1fr;
	place-items: center;
	min-width: 160px;
	min-height: 48px;
	padding-right: 24px;
	background: #fff;
	border: 2px solid currentColor;
	border-radius: 24px;
	color: var(--color-theme);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-align: center;
	text-transform: uppercase;
	&:before{
		content: "";
		aspect-ratio: 1;
		width: 8px;
		background: currentColor;
		border-radius: 100%;
		transform: translateX(-2px);
	}
}

#detailFooter{
	width: var(--wrap);
	margin-inline: auto;
	margin-top: clamp(64px, calc(80 / 1200 * 100vw), 80px);
}

#detailMap{
	display: grid;
	grid-row-gap: 16px;
	&::details-content{
		interpolate-size: allow-keywords;
		display: grid;
		width: 100%;
		height: 0;
		overflow: hidden;
		transform-origin: center top;
		transition: height 0.2s ease-out, content-visibility 0.2s ease-out allow-discrete;
	}
	&[open]{
		&::details-content{
			height: auto;
			background: #fff;
			border: 2px solid var(--color-theme);
		}
	}
	& summary{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		justify-self: center;
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: 8px;
		padding: 4px 16px 4px 24px;
		width: min(100%, 480px);
		min-height: 48px;
		background: var(--color-theme);
		border: 2px solid transparent;
		border-radius: 24px;
		color: #fff;
		letter-spacing: 0.06em;
		text-align: center;
		&: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; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="8 2 8 14"/><polyline points="2 8 14 8"/></svg>') no-repeat center / contain;
		}
		details[open] &{
			position: relative;
			background: #F7FCEB;
			border-color: currentColor;
			color: var(--color-theme);
			&:before{
				content: "";
				position: absolute;
				top: 100%;
				left: 50%;
				height: 18px;
				border-left: 1px solid var(--color-theme);
			}
			&: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" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="2 8 14 8"/></svg>')
			}
		}
	}
	& ul{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
		grid-gap: 16px 24px;
		padding: clamp(16px, calc(24 / 1200 * 100vw), 24px);
		overflow-x: auto;
	}
	& li{
		counter-increment: count;
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 8px;
		align-items: baseline;
		&:before{
			content: counter(count);
			display: grid;
			align-items: center;
			aspect-ratio: 1;
			width: 32px;
			background: var(--color-theme);
			border-radius: 100%;
			color: #fff;
			font-weight: 700;
			text-align: center;
			line-height: 1;
		}
	}
	#gMap{
		height: clamp(480px, calc(560 / 1200 * 100vw), 560px);
		margin: clamp(16px, calc(24 / 1200 * 100vw), 24px);
		background: #f2f2f2;
	}
	@media (max-width: 991.98px) {
		& ul{
			max-height: 240px;
		}
		#gMap{
			margin-bottom: 0;
		}
	}
	@media (min-width: 992px) {
		&::details-content{
			position: relative;
			grid-template-columns: 1fr 320px;
		}
		& ul{
			position: absolute;
			top: 0;
			right: 0;
			width: 320px;
			height: 100%;
		}
		#gMap{
			margin-right: 0;
		}
	}
}

#recommend{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	justify-content: center;
	padding: clamp(64px, calc(80 / 1200 * 100vw), 80px) 0;
	overflow: hidden;
	&>*{
		grid-column: 2;
	}
	& h2{
		display: grid;
		grid-template-columns: auto 1fr;
		justify-content: center;
		align-items: baseline;
		column-gap: clamp(8px, calc(16 / 768 * 100vw), 16px);
		font-weight: 900;
		font-size: clamp(20px, calc(24 / 768 * 100vw), 24px);
		letter-spacing: 0.1em;
		&:before{
			content: "";
			width: clamp(4px, calc(6 / 768 * 100vw), 6px);
			height: 1em;
			background: var(--color-theme);
			border-radius: 3px;
			transform: translateY(0.15em);
		}
	}
	#recommendList{
		grid-column: 1 / 4;
		margin-top: clamp(24px, calc(40 / 1200 * 100vw), 40px);
	}
}

#recommendList{
	& section{
		position: relative;
		display: grid;
		grid-template-rows: auto 1fr;
		grid-row-gap: 8px;
		overflow: hidden;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 1;
			background: var(--dummy);
			border-radius: 8px;
		}
		& img{
			aspect-ratio: 1;
			border-radius: 8px;
		}
	}
	& h3{
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 8px;
		font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
		letter-spacing: 0.06em;
		&:before{
			content: "";
			aspect-ratio: 1;
			background: var(--color-theme) url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" fill="white"><polygon points="2 0 8 4 2 8"/></svg>') no-repeat center / 50%;
			width: 1em;
			border-radius: 100%;
			transform: translateY(0.325em);
		}
	}
	& a{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		font-size: 0;
	}
	& figure{
		order: -1;
	}
	& img{
		object-fit: cover;
	}
	.slide{
		display: grid;
		width: min(var(--wrap-fit), 1120px);
		margin-inline: auto;
		&:not(.slick-slider){
			grid-gap: 32px;
			@media (max-width: 575.98px) {
				& section:nth-child(n+2){
					display: none;
				}
			}
			@media (min-width: 576px) {
				grid-template-columns: repeat(2, 1fr);
			}
			@media (min-width: 576px) and (max-width: 991.98px) {
				& section:nth-child(n+2){
					display: none;
				}
			}
			@media (min-width: 992px) {
				grid-template-columns: repeat(3, 1fr);
			}
			@media (min-width: 992px) and (max-width: 1199.98px) {
				& section:nth-child(n+4){
					display: none;
				}
			}
			@media (min-width: 1200px) {
				grid-template-columns: repeat(4, 1fr);
				& section:nth-child(n+5){
					display: none;
				}
			}
		}
	}
	.slick-slider{
		display: grid;
		width: min(var(--wrap-fit), 1217px);
		grid-template-columns: 0 min(100%, 1152px) 0;
		justify-content: space-between;
		&:before{
			content: "";
			grid-column: 2;
			grid-row: 1;
			aspect-ratio: 1;
			width: calc(100% - clamp(16px, calc(32 / 1200 * 100vw), 32px));
		}
		.slick-list{
			grid-column: 2;
			grid-row: 1 / 3;
		}
		.slick-dots{
			grid-column: 2;
			grid-row: 1;
		}
		@media (max-width: 767.98px) {
			.slick-list{
				overflow: visible;
			}
			.slick-slide{
				width: min(calc(100dvw - 64px), 320px);
			}
		}
		@media (min-width: 576px) {
			&:before{
				width: min(calc(100dvw - 64px), 320px);
			}
		}
		@media (min-width: 768px) {
			&:before{
				width: calc(50% - clamp(16px, calc(32 / 1200 * 100vw), 32px));
			}
		}
		@media (min-width: 992px) {
			&:before{
				width: calc(33.33% - clamp(16px, calc(32 / 1200 * 100vw), 32px));
			}
		}
		@media (min-width: 1200px) {
			&:before{
				width: calc(25% - clamp(16px, calc(32 / 1200 * 100vw), 32px));
			}
		}
	}
	.slick-track{
		display: flex;
	}
	.slick-slide{
		display: grid;
		height: auto;
		margin: 0 clamp(8px, calc(16 / 1200 * 100vw), 16px);
	}
	.slick-arrow{
		justify-self: center;
		align-self: center;
		width: clamp(40px, calc(48 / 1200 * 100vw), 48px);
	}
	.slick-dots{
		margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
		&:has(li:only-child){
			display: none;
		}
	}
}

.date{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 4px 24px;
	background: #fff;
	border: 2px solid currentColor;
	border-radius: 24px;
	color: var(--color-theme);
	font-weight: bold;
	letter-spacing: 0.1em;
	text-align: center;
	text-transform: uppercase;
}

.move{
	display: grid;
	grid-template-columns: 48px 1fr;
	align-items: center;
	column-gap: clamp(16px, calc(24 / 1200 * 100vw), 24px);
	&:before{
		content: "";
		justify-self: center;
		aspect-ratio: 1;
		width: 32px;
		background: var(--color-theme) url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"></svg>') no-repeat center / contain;
		border-radius: 100%;
	}
	&[data-icon=""]:before{
		width: 8px;
		background-image: unset;
	}
	&[data-icon="walk"]:before{
		background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" fill="white"><path d="M19.07,10.45a2.23,2.23,0,1,0-2.23-2.22A2.22,2.22,0,0,0,19.07,10.45Zm6.05,6.65-2.55-1.34L21.5,13.55a3.94,3.94,0,0,0-2.8-2.13l-1.11-.2a2.65,2.65,0,0,0-1.64.21L12.73,13a1.58,1.58,0,0,0-.79.82L10.5,17.12A.87.87,0,0,0,11,18.25l0,0a.87.87,0,0,0,1.11-.44L13.43,15l2.07-.67-2.06,9.16-2,5a1.05,1.05,0,0,0,0,.85,1,1,0,0,0,.66.55l.09,0a1.05,1.05,0,0,0,1.19-.48l2.38-4.11L17.2,22.5l2.59,2.85,1.91,4a1.08,1.08,0,0,0,1.22.57h0a1,1,0,0,0,.66-.52,1.07,1.07,0,0,0,.07-.84l-1.41-4.07a5.56,5.56,0,0,0-.86-1.59l-2.29-3L20,15.57,21,16.94a1.39,1.39,0,0,0,.5.4l2.85,1.28a.82.82,0,0,0,1.11-.44v0A.83.83,0,0,0,25.12,17.1Z"/></svg>');
	}
	&[data-icon="train"]:before{
		background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" fill="white"><path d="M13.69,9.41a4.34,4.34,0,0,1,.68.6.59.59,0,1,0,1.16-.22,2.15,2.15,0,0,0-.92-1.15,12.79,12.79,0,0,1,6.78,0,2.15,2.15,0,0,0-.92,1.15.6.6,0,0,0,.47.7h.12a.57.57,0,0,0,.56-.47,4,4,0,0,1,.69-.62c.47-.35.84-.63.76-1.1a.67.67,0,0,0-.47-.53,13.92,13.92,0,0,0-9.19,0,.67.67,0,0,0-.48.53C12.85,8.78,13.22,9.06,13.69,9.41Z"/><path d="M25.1,14.34a3,3,0,0,0-2.49-2.53,41.8,41.8,0,0,0-9.22,0,3,3,0,0,0-2.49,2.53,53.91,53.91,0,0,0,0,10.32,3,3,0,0,0,2.49,2.53l.38,0L12.19,29h2.18l1-1.64a40.7,40.7,0,0,0,5.18,0l1,1.64H23.8l-1.57-1.77.38,0a3,3,0,0,0,2.49-2.53A53.91,53.91,0,0,0,25.1,14.34ZM16.56,12.6h2.87a.56.56,0,0,1,.56.55.55.55,0,0,1-.56.55H16.56a.55.55,0,0,1-.55-.55A.55.55,0,0,1,16.56,12.6ZM12.81,24.35A1.19,1.19,0,1,1,14,25.53,1.18,1.18,0,0,1,12.81,24.35ZM22,25.53a1.18,1.18,0,1,1,1.18-1.18A1.18,1.18,0,0,1,22,25.53Zm1.58-4.7c-.69.57-3.64.59-5.59.59s-4.9,0-5.59-.59-.7-5,0-5.6,3.64-.59,5.59-.59,4.9,0,5.59.59S24.29,20.26,23.59,20.83Z"/></svg>');
	}
	&[data-icon="bus"]:before{
		background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" fill="white"><path d="M6.35,14.91H8.27a.3.3,0,0,0,.29-.3V12.46h.61V25.17a1.61,1.61,0,0,0,1.12,1.53v1.43a.87.87,0,0,0,.87.87h1.78a.87.87,0,0,0,.87-.87V26.78h8.55v1.35a.87.87,0,0,0,.87.87H25a.87.87,0,0,0,.87-.87V26.66a1.61,1.61,0,0,0,1-1.49V12.46h.57v2.15a.3.3,0,0,0,.29.3h1.92a.31.31,0,0,0,.3-.3V11a.3.3,0,0,0-.3-.29H27.73a.29.29,0,0,0-.29.29v.12h-.57V9.83c0-.89-.72-1.22-1.61-1.6a17.4,17.4,0,0,0-7-1.23C13,7,10.78,8.23,10.78,8.23c-.89.38-1.61.71-1.61,1.6v1.3H8.56V11a.29.29,0,0,0-.29-.29H6.35a.3.3,0,0,0-.3.29v3.6A.31.31,0,0,0,6.35,14.91ZM24,24.38a1.32,1.32,0,1,1,1.32-1.32A1.32,1.32,0,0,1,24,24.38Zm1.32-12.07v7.9H18.79V11H24A1.32,1.32,0,0,1,25.31,12.31ZM14.5,8.49h6.91a.52.52,0,0,1,.53.52.53.53,0,0,1-.53.53H14.5A.53.53,0,0,1,14,9,.52.52,0,0,1,14.5,8.49Zm-3.77,3.82A1.33,1.33,0,0,1,12.06,11h5.22v9.22H10.73Zm1.32,9.43a1.32,1.32,0,1,1-1.32,1.32A1.32,1.32,0,0,1,12.05,21.74Z"/></svg>');
	}
	&[data-icon="car"]:before{
		background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" fill="white"><path d="M7.94,22.45a.51.51,0,0,0,.36.15h.61a2.93,2.93,0,0,0,5.78,0h7.25a2.93,2.93,0,0,0,5.78,0h.41a.52.52,0,0,0,.38-.17l.87-1a.47.47,0,0,0,.12-.32V18.77a1.46,1.46,0,0,0-1.11-1.4l-3.46-1.09L21.65,13.5a4,4,0,0,0-2.95-1.18H14.27a2.7,2.7,0,0,0-1.79.56A30.12,30.12,0,0,0,8.76,16l-1.1.2a1.44,1.44,0,0,0-1.16,1.4v3.12a.5.5,0,0,0,.14.35Zm16.89-1.89a1.54,1.54,0,1,1-1.55,1.54A1.54,1.54,0,0,1,24.83,20.56Zm-8.35-7h2.37c.68,0,.82.11,1.64.76.57.45,2.22,1.9,2.24,1.91a.35.35,0,0,1,.09.38.33.33,0,0,1-.31.22h-6Zm-5.29,2.78a8.84,8.84,0,0,1,.88-1.46,3.16,3.16,0,0,1,1.56-1.32h1.48v3.27H11.5a.34.34,0,0,1-.29-.16A.35.35,0,0,1,11.19,16.38Zm.61,4.18a1.54,1.54,0,1,1-1.55,1.54A1.54,1.54,0,0,1,11.8,20.56Z"/></svg>');
	}
	&[data-icon="ship"]:before{
		background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" fill="white"><path d="M25.52,20.44H6.74l1.2,2.12a4,4,0,0,1,1.66-.33,4,4,0,0,1,2.23.62,1.88,1.88,0,0,0,1.12.32,1.88,1.88,0,0,0,1.12-.32,4.32,4.32,0,0,1,4.46,0,2.12,2.12,0,0,0,2.24,0A4,4,0,0,1,23,22.23a4,4,0,0,1,1.67.33,17.38,17.38,0,0,0,3.42-2.28A16.34,16.34,0,0,1,25.52,20.44Z"/><path d="M29.64,16.85a32.08,32.08,0,0,0-8-1.22c-1.1-.79-3.32-2.72-5.51-2.77-.68,0-1.82-.06-2.7,0-1.9.15-2.72,1.68-4.3,2.73l-2.48.59L6,19.13l.33.59H25.52A11.9,11.9,0,0,0,29,19.33a6,6,0,0,0,1-1.74A.55.55,0,0,0,29.64,16.85ZM19.21,15.68H13.42a.14.14,0,0,1-.12-.06.14.14,0,0,1,0-.14L13.88,14a.14.14,0,0,1,.13-.09h1.71a6.6,6.6,0,0,1,3.35,1.33l.22.15a.13.13,0,0,1,.06.16A.13.13,0,0,1,19.21,15.68Z"/></svg>');
	}
	&[data-icon="cycle"]:before{
		background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" fill="white"><path d="M25.45,16.78a4.85,4.85,0,0,0-.95.1L23,12.68l.62-.59.72.35v.05a.66.66,0,0,0,.15.42.62.62,0,0,0,.87,0,.84.84,0,0,0,.26-.62,1.39,1.39,0,0,0-.09-.47l-.08-.22s-3-1.48-3-1.48a.63.63,0,0,0-.27-.06.63.63,0,0,0-.55.34.66.66,0,0,0-.06.27.61.61,0,0,0,.34.55l.52.26-.85.8h0v0L22,13.47l-6.74,1.68-.94-2.73a1.55,1.55,0,0,1,1.25-.53c.44,0,.7.07.84.06s.2,0,.19-.16a.68.68,0,0,0-.66-.71c-.42,0-1.51,0-2.37,0-.42,0-.79,0-1,0a4,4,0,0,0-.5-.06.49.49,0,0,0-.54.52,1.7,1.7,0,0,0,0,.19c0,.29.09.81.67.83l1,.06,1.09,3.12-1.42,1.68A4.55,4.55,0,1,0,15.06,22h.33a1.53,1.53,0,0,0,2.94-.58v0a1.6,1.6,0,0,0-.15-.66l4.52-5.23.64,1.85a4.56,4.56,0,0,0-2.45,4,0,0,0,0,0,0,0,4.55,4.55,0,0,0,9.1,0v0A4.55,4.55,0,0,0,25.45,16.78ZM13,19.14a3.4,3.4,0,0,1,.78,1.59H11.7Zm-2.48,5.53a3.33,3.33,0,1,1,0-6.65,3.38,3.38,0,0,1,1.52.37l-1.45,1.72h-.07a1.24,1.24,0,0,0,0,2.48A1.22,1.22,0,0,0,11.63,22h2.19A3.33,3.33,0,0,1,10.56,24.67Zm4.83-3.94h-.33a4.42,4.42,0,0,0-1.23-2.53l.93-1.1,1.06,3.06A1.42,1.42,0,0,0,15.39,20.73Zm1.86-.85a1.53,1.53,0,0,0-.36-.07l-1.21-3.5,5.93-1.48Zm8.2,4.78a3.32,3.32,0,0,1-1.7-6.18l.73,2.08a1.25,1.25,0,0,0,1,2,1.24,1.24,0,0,0,1.24-1.19v-.06a1.24,1.24,0,0,0-1.07-1.22l-.72-2.05a3.32,3.32,0,1,1,.55,6.6Z"/></svg>');
	}
}

.spot{
	counter-increment: count;
	position: relative;
	display: grid;
	grid-column-gap: clamp(24px, calc(48 / 1200 * 100vw), 48px);
	padding-left: clamp(64px, calc(72 / 1200 * 100vw), 72px);
	&:before{
		content: counter(count);
		position: absolute;
		top: 0;
		left: 0;
		display: grid;
		align-items: center;
		aspect-ratio: 1;
		width: 46px;
		padding-bottom: 0.1em;
		background: #fff;
		border: 2px solid currentColor;
		border-radius: 100%;
		color: var(--color-theme);
		font-weight: 900;
		font-size: clamp(20px, calc(24 / 768 * 100vw), 24px);
		text-align: center;
		line-height: 1;
	}
	.spotName{
		grid-row: 1;
	}
	.spotLead{
		grid-row: 2;
	}
	.spotText{
		grid-row: 4;
	}
	.spotInfo{
		grid-row: 5;
		justify-self: center;
		width: min(100%, 664px);
	}
	.spotPhoto{
		grid-row: 3;
	}
	.spotLead,
	.spotText,
	.spotPhoto{
		margin-top: clamp(8px, calc(16 / 1200 * 100vw), 16px);
	}
	@media (min-width: 992px) {
		&:has(.spotPhoto){
			grid-template-columns: 1fr 1fr;
			grid-template-rows: auto auto auto 1fr;
			.spotName,
			.spotLead{
				grid-column: 1 / 3;
			}
			.spotText{
				grid-row: 3;
			}
			.spotInfo{
				align-self: start;
				grid-row: 4;
			}
			.spotPhoto{
				grid-column: 1;
				grid-row: 3 / 5;
			}
			
		}
	}
}

.spotName{
	display: grid;
	min-height: 46px;
	padding-bottom: 4px;
	border-bottom: 4px dotted currentColor;
	font-weight: 900;
	font-size: clamp(22px, calc(28 / 768 * 100vw), 28px);
	letter-spacing: 0.1em;
}

.spotLead{
	color: var(--color-theme);
	font-weight: 700;
	font-size: clamp(18px, calc(20 / 768 * 100vw), 20px);
	letter-spacing: 0.06em;
}

.spotText{}

.spotInfo{
	display: grid;
	grid-gap: 16px 24px;
	margin-top: clamp(16px, calc(24 / 1200 * 100vw), 24px);
	& details{
		&::details-content{
			interpolate-size: allow-keywords;
			height: 0;
			overflow: hidden;
			transform-origin: center top;
			transition: height 0.2s ease-out, content-visibility 0.2s ease-out allow-discrete;
		}
		&[open]{
			&::details-content{
				height: auto;
			}
		}
	}
	& summary{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
	}
	& summary,
	& a{
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: 8px;
		padding: 4px 16px 4px 24px;
		min-height: 48px;
		background: var(--color-theme);
		border: 2px solid transparent;
		border-radius: 24px;
		color: #fff;
		letter-spacing: 0.06em;
		text-align: center;
		&: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; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="6 2 12 8 6 14"/></svg>') no-repeat center / contain;
		}
	}
	& summary{
		&: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" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="2 6 8 12 14 6"/></svg>');
		}
		details[open] &{
			position: relative;
			background: #F7FCEB;
			border-color: currentColor;
			color: var(--color-theme);
			&:before{
				content: "";
				position: absolute;
				top: 100%;
				left: 50%;
				height: 18px;
				border-left: 1px solid var(--color-theme);
			}
			&:after{
				transform: scale(1, -1);
			}
		}
	}
	& a{
		text-decoration: none;
	}
	& dl{
		display: grid;
		border: 1px solid var(--color-theme);
	}
	& dt,
	& dd{
		padding: 8px 16px;
	}
	& dt{
		background: var(--color-theme);
		color: #fff;
		font-weight: 700;
	}
	& dd{
		&:nth-of-type(n+2){
			border-top: 1px solid var(--color-theme);
		}
	}
	@media (max-width: 575.98px) {
		& details{
			width: 100%;
			&[open]{
				&::details-content {
					margin-top: 16px;
				}
			}
		}
	}
	@media (min-width: 576px) {
		grid-template-columns: repeat(2, 1fr);
		& details{
			display: contents;
			&::details-content{
				order: 1;
				grid-column: 1 / 3;
			}
		}
		& details:only-child summary,
		& a:only-child{
			grid-column: 1 / 3;
			justify-self: center;
			width: min(80%, 320px);
		}
		& dl{
			grid-template-columns: auto 1fr;
		}
		& dt{
			max-width: 240px;
			&:nth-of-type(n+2){
				border-top: 1px solid #95D224;
			}
		}
	}
}

.spotPhoto{
	& img{
		aspect-ratio: 3 / 2;
		object-fit: cover;
	}
}