/* CSS Document */

#main{
	overflow: hidden;
	background: #f0f5f7;
}

#detail{
	display: grid;
	&:last-child{
		margin-bottom: clamp(96px, calc(120 / 768 * 100dvw), 120px);
	}
	@media (max-width: 991.98px) {
		background: white;
	}
	@media (min-width: 992px) {
		position: relative;
		z-index: 0;
		margin-top: 80px;
		&:not(:last-child){
			&:before{
				border-radius: 40px;
			}
		}
		&:before{
			content: "";
			position: absolute;
			top: 0;
			left: 50%;
			width: min(100%, 1120px);
			height: 100%;
			background: white;
			border-radius: 40px;
			z-index: -1;
			transform: translateX(-50%);
		}
		#title{
			width: min(100%, 1120px);
			border-radius: 40px 40px 0 0;
			overflow: hidden;
		}
		#map{
			border-radius: 0 0 40px 40px;
			overflow: hidden;
		}
	}
	#title{
		justify-self: center;
		width: min(100%, 1120px);
	}
	#favorite{
		justify-self: center;
		width: min(var(--wrap-fit), 864px);
		margin-top: clamp(32px, calc(48 / 768 * 100dvw), 48px);
	}
	#index{
		margin-top: clamp(64px, calc(80 / 768 * 100dvw), 80px);
	}
	#course{
		margin-top: clamp(64px, calc(80 / 768 * 100dvw), 80px);
		&:last-child{
			margin-bottom: clamp(48px, calc(64 / 768 * 100dvw), 64px);
		}
	}
	#contents{
		justify-self: center;
		width: min(100%, 1120px);
		margin-top: clamp(48px, calc(64 / 768 * 100dvw), 64px);
		&:last-child{
			margin-bottom: clamp(48px, calc(64 / 768 * 100dvw), 64px);
		}
	}
	#map{
		justify-self: center;
		width: min(100%, 1120px);
		margin-top: clamp(48px, calc(64 / 768 * 100dvw), 64px);
	}
}

#title{
	display: grid;
	& h2{
		justify-self: center;
		width: min(var(--wrap-fit), 864px);
		font-weight: 900;
		font-size: clamp(20px, calc(32 / 768 * 100dvw), 32px);
		letter-spacing: 0.025em;
	}
	#text,
	#point{
		justify-self: center;
		width: min(var(--wrap-fit), 864px);
		margin-top: clamp(32px, calc(48 / 768 * 100dvw), 48px);
	}
	@media (max-width: 991.98px) {
		margin-top: clamp(32px, calc(64 / 768 * 100dvw), 64px);
		& h2{
			grid-row: 1;
		}
		#area,
		#data{
			order: -1;
			justify-self: center;
			width: var(--wrap);
			margin-top: clamp(24px, calc(32 / 768 * 100dvw), 32px);
		}
		#area{
			& dl{
				border-radius: 4px;
				overflow: hidden;
			}
		}
		#photo{
			order: -2;
			margin-top: clamp(24px, calc(32 / 768 * 100dvw), 32px);
		}
	}
	@media (min-width: 768px) and (max-width: 991.98px) {
		#area,
		#data{
			grid-row: 3;
			grid-column: 1;
			align-self: start;
		}
		#area{
			padding-right: calc(50% - 24px);
		}
		#data{
			padding: 16px 0 0 50%;
		}
	}
	@media (min-width: 992px) {
		grid-template-rows: auto 1fr;
		& h2{
			margin-top: clamp(48px, calc(72 / 768 * 100dvw), 72px);
		}
		#area,
		#data{
			grid-column: 1;
			width: clamp(320px, calc(360 / 1200 * 100dvw), 360px);
		}
		#area{
			grid-row: 1;
		}
		#data{
			grid-column: 1;
			grid-row: 2;
			align-self: start;
			padding: 24px 24px 0 24px;
		}
		#photo{
			grid-column: 1;
			grid-row: 1 / 3;
			align-self: start;
			margin-left: clamp(320px, calc(360 / 1200 * 100dvw), 360px);
			border-radius: 0 0 0 4px;
			overflow: hidden;
		}
	}
}

#area{
	& dl{
		position: relative;
	}
	& dt{
		position: absolute;
		top: clamp(16px, calc(24 / 768 * 100dvw), 24px);
		left: clamp(16px, calc(24 / 768 * 100dvw), 24px);
		width: 7em;
		font-weight: 800;
		letter-spacing: 0.025em;
		pointer-events: none;
	}
	& dd{
		aspect-ratio: 360 / 292;
		font-size: 0;
		background: #c5dae8;
		& svg{
			& use{
				pointer-events: none;
			}
			& a{
				text-decoration: none;
				cursor: pointer;
				fill: #c7c7c7;
				&.select{
					&[data-area-id="1"]{
						fill: #c1c42f;
					}
					&[data-area-id="2"]{
						fill: #67afe1;
					}
					&[data-area-id="3"]{
						fill: #81c2c2;
					}
					&[data-area-id="4"]{
						fill: #555ea9;
					}
					&[data-area-id="5"]{
						fill: #b078b0;
					}
					&[data-area-id="6"]{
						fill: #e57897;
					}
					&[data-area-id="7"]{
						fill: #ca7b5e;
					}
				}
			}
			& g{
				fill: #9c9c9c;
				font-weight: 800;
				font-size: 14px;
				& text{
					fill: #9c9c9c;
					font-weight: 800;
					font-size: 14px;
					stroke: #c5dae8;
					stroke-width: 4px;
					stroke-linecap: round;
					stroke-linejoin: round;
					&#text_area3,
					&#text_area5{
						stroke: #f7f9fa;
					}
				}
			}
			&:has([data-area-id="1"].select){
				& g:has(#text_area1){
					fill: #8f9123;
				}
			}
			&:has([data-area-id="2"].select){
				& g:has(#text_area2){
					fill: #4e96c7;
				}
			}
			&:has([data-area-id="3"].select){
				& g:has(#text_area3){
					fill: #43a3a3;
				}
			}
			&:has([data-area-id="4"].select){
				& g:has(#text_area4){
					fill: #434b8c;
				}
			}
			&:has([data-area-id="5"].select){
				& g:has(#text_area5){
					fill: #8c538c;
				}
			}
			&:has([data-area-id="6"].select){
				& g:has(#text_area6){
					fill: #c75576;
				}
			}
			&:has([data-area-id="7"].select){
				& g:has(#text_area7){
					fill: #b86140;
				}
			}
		}
	}
}

#data{
	display: grid;
	grid-template-columns: auto 1em 1fr;
	grid-row-gap: 16px;
	#dataTime,
	#dataAccess{
		display: contents;
		& dl{
			grid-column: 1 / 4;
			display: grid;
			grid-template-columns: subgrid;
			align-self: baseline;
			padding-bottom: 16px;
			border-bottom: 1px solid currentColor;
			font-weight: 700;
			letter-spacing: 0.025em;
			&:before{
				content: ":";
				justify-self: center;
			}
		}
		& dt{
			order: -1;
			display: grid;
			grid-template-columns: auto 1fr;
			align-self: baseline;
			column-gap: 8px;
			max-width: 8em;
			&:before{
				content: "";
				aspect-ratio: 1;
				width: 16px;
				background: currentColor;
				transform: translateY(0.35em);
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">></svg>') no-repeat center / contain;
			}
			#dataTime &: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" style="fill: none; stroke: black; stroke-linecap: round; stroke-miterlimit: 10;"><rect x="2" y="2.5" width="12" height="12" rx="1" ry="1"/><line x1="2" y1="5.5" x2="14" y2="5.5"/><line x1="5" y1="3.33" x2="5" y2="1.5"/><line x1="5" y1="14.5" x2="5" y2="5.5"/><line x1="8" y1="14.5" x2="8" y2="5.5"/><line x1="11" y1="3.33" x2="11" y2="1.5"/><line x1="11" y1="14.5" x2="11" y2="5.5"/><line x1="2" y1="8.5" x2="14" y2="8.5"/><line x1="2" y1="11.5" x2="14" y2="11.5"/></svg>');
			}
			#dataAccess &: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" style="fill: none; stroke: black; stroke-linecap: round; stroke-miterlimit: 10;"><path d="M13.33,5.72h1.61c.31,0,.55.26.55.58v.17c0,.28-.19.53-.46.58l-.96.17"/><line x1="13.52" y1="6.44" x2="8" y2="6.44"/><polygon points="4.42 12.46 8 12.46 14.01 12.46 4.42 12.46"/><path d="M1.99,12.46h-.02c-.63,0-1.15-.54-1.15-1.21v-2.34c0-.21.07-.42.2-.58l1.34-1.67c.05-.06.08-.13.1-.21l.8-4.06c.12-.46.51-.78.97-.78h7.52c.45,0,.85.32.97.78l.8,4.06c.02.08.05.15.1.21l1.34,1.67c.13.16.2.37.2.58v2.34c0,.67-.51,1.21-1.15,1.21h-.02"/><path d="M4.98,9.79v-.15c0-.26-.17-.49-.41-.57l-1.28-.39c-.45-.14-.91.21-.91.7v.41c0,.33.26.59.58.59h1.44c.32,0,.58-.27.58-.59Z"/><path d="M11.02,9.79v-.15c0-.26.17-.49.41-.57l1.28-.39c.45-.14.91.21.91.7v.41c0,.33-.26.59-.58.59h-1.44c-.32,0-.58-.27-.58-.59Z"/><path d="M2.67,5.72h-1.61c-.31,0-.55.26-.55.58v.17c0,.28.19.53.46.58l.96.17"/><line x1="2.48" y1="6.44" x2="8" y2="6.44"/><path d="M14.51,12.46v1.32c0,.34-.28.62-.62.62h-2c-.34,0-.62-.28-.62-.62v-1.32h3.23Z"/><path d="M4.73,12.46v1.32c0,.34-.28.62-.62.62h-2c-.34,0-.62-.28-.62-.62v-1.32h3.23Z"/><path d="M8.83,10.64h-1.67c-.4,0-.72-.32-.72-.72h0c0-.4.32-.72.72-.72h1.67c.4,0,.72.32.72.72h0c0,.4-.32.72-.72.72Z"/></svg>');
			}
		}
	}
	#dataCategory{
		grid-column: 1 / 4;
		& ul{
			display: flex;
			flex-wrap: wrap;
			grid-gap: 8px;
		}
		& li{
			display: contents;
		}
		& a{
			padding: 0 8px;
			border: 1px solid currentColor;
			border-radius: 4px;
			color: inherit;
			font-size: 14px;
			font-weight: 700;
			letter-spacing: 0.025em;
			text-decoration: none;
		}
	}
}

#text{
	font-weight: 600;
	letter-spacing: 0.025em;
}

#point{
	display: flex;
	flex-wrap: wrap;
	grid-gap: 8px 24px;
	padding: 16px 0;
	border: 0 solid #d9d9d9;
	border-width: 1px 0;
	& ul{
		display: contents;
	}
	& li{
		padding-right: 24px;
		border-right: 1px solid #d9d9d9;
		font-weight: 500;
		font-size: 14px;
		letter-spacing: 0.025em;
		& span{
			color: var(--color-theme);
			font-weight: 800;
		}
		&:not(:has(span)){
			color: var(--color-theme);
			font-weight: 800;
		}
	}
	& dl{
		display: block;
		padding-right: 24px;
		border-right: 1px solid #d9d9d9;
		font-weight: 500;
		font-size: 14px;
		letter-spacing: 0.025em;
	}
	& dt{
		display: contents;
		&:after{
			content: ":";
			display: inline-block;
			width: 1em;
			text-align: center;
		}
	}
	& dd{
		display: contents;
		color: var(--color-theme);
		font-weight: 800;
	}
}

#photo{
	display: grid;
	aspect-ratio: 3 / 2;
	& img{
		grid-column: 1;
		grid-row: 1;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	& figcaption{
		grid-column: 1;
		grid-row: 1;
		display: grid;
		align-content: end;
		justify-items: end;
		grid-row-gap: clamp(8px, calc(24 / 768 * 100dvw), 24px);
		padding: clamp(16px, calc(24 / 768 * 100dvw), 24px);
		font-weight: 800;
		font-size: clamp(16px, calc(24 / 768 * 100dvw), 24px);
		letter-spacing: 0.025em;
		line-height: 1;
		& span{
			display: block;
			padding: 0.25em 0.5em;
			background: white;
			border-radius: clamp(4px, calc(8 / 768 * 100dvw), 8px);
		}
	}
}

#favorite{
	display: flex;
	justify-content: center;
	& button{
		&[data-fav-id]{
			display: grid;
			grid-template-columns: 1fr auto auto;
			align-items: center;
			min-width: min(100%, 276px);
			min-height: 40px;
			padding: 0 20px 0 clamp(48px, calc(64 / 768 * 100dvw), 64px);
			background: var(--color-theme) url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" style="fill: none; stroke: white; stroke-width: 1.8px;"><path d="M8.97,15.73c-.66-.62-3.23-3.17-4.52-4.63-1.34-1.52-2.65-3.18-2.65-5.43,0-1.89,1.56-3.4,3.5-3.4,1.72,0,3.12.94,3.69,2.63h.02c.59-1.78,2.04-2.63,3.69-2.63,1.94,0,3.5,1.51,3.5,3.4,0,2.25-1.31,3.9-2.65,5.43-1.29,1.46-3.87,4.01-4.54,4.63h-.04Z"/></svg>') no-repeat clamp(20px, calc(40 / 768 * 100dvw), 40px) center / 18px;
			border-radius: 20px;
			color: white;
			font-weight: 600;
			font-size: 14px;
			letter-spacing: 0.1em;
			text-align: center;
			text-decoration: none;
			opacity: 0;
			transition: opacity 0.2s ease-out;
			&:before,
			&:after{
				order: 1;
			}
			&:before{
				content: "";
				aspect-ratio: 1;
				width: 8px;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><polygon points="8 .89 8 7.11 3 4 8 .89"/></svg>') no-repeat center / contain;
			}
			&:after{
				content: attr(data-count);
				background: white;
				padding: 0.1em 0.25em;
				border-radius: 4px;
				color: var(--color-theme);
				font-size: 18px;
				font-family: 'Montserrat', var(--font);
				line-height: 1;
			}
			&[data-fav-status]{
				opacity: 1;
			}
			&[data-fav-status="on"]{
				background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 18 18" style="fill: none; stroke: white; stroke-width: 1.8px; stroke-linecap: round; stroke-linejoin: round;"><path d="M.5,8.55l2.73,3.51c.09.12.21.22.35.28.14.07.28.1.43.11.15,0,.3-.03.43-.09.13-.06.25-.15.35-.27L13.5,1.55"/></svg>');
			}
			&[data-fav-status="loading"]{
				background-color: silver;
				background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="fill: none; stroke: color-mix(in srgb, transparent, white 50%); stroke-width: 2.4px; stroke-linecap: round; stroke-linejoin: round;"><circle cx="12" cy="12" r="10" stroke-dasharray="48"><animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="1s" repeatCount="indefinite" /></circle></svg>');
				color: color-mix(in srgb, transparent, white 50%);
				pointer-events: none;
				&:after{
					background: color-mix(in srgb, transparent, white 50%);
					color: transparent;
				}
			}
		}
	}
}

#index{
	display: grid;
	& h3{
		justify-self: center;
		width: min(100%, 864px);
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		column-gap: clamp(16px, calc(24 / 768 * 100dvw), 24px);
		font-weight: 900;
		font-size: clamp(18px, calc(20 / 768 * 100dvw), 20px);
		letter-spacing: 0.2em;
		text-align: center;
		text-wrap: balance;
		&:before,
		&:after{
			content: "";
			min-width: 32px;
			border-top: 1px solid currentColor;
		}
	}
	& dl{
		position: relative;
		display: grid;
		grid-row-gap: 16px;
		&:not(:has(img)):before{
			content: "";
			background: var(--dummy);
		}
		&:before,
		& img{
			aspect-ratio: 1;
			border-radius: 100%;
		}
	}
	& dt{
		order: 1;
		font-weight: 700;
		font-size: 14px;
		letter-spacing: 0.05em;
		text-align: center;
		text-wrap: balance;
	}
	& dd{
		&:has(a){
			display: contents;
			& a{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				font-size: 0;
			}
		}
		&:has(img){
			& img{
				object-fit: cover;
			}
		}
	}
	#indexList{
		justify-self: center;
		display: grid;
		width: min(var(--wrap-fit), 1008px);
		margin-top: clamp(24px, calc(32 / 768 * 100dvw), 32px);
		&:not(.slick-slider){
			justify-content: center;
			& > dl,
			& > span{
				&:nth-child(n+2){
					display: none;
				}
			}
		}
		&.slick-slider{
			&:before{
				content: "";
				grid-row: 1;
				aspect-ratio: 1;
				background: red;
				opacity: 0.5;
				z-index: 1;
				visibility: hidden;
			}
			.slick-list{
				grid-row: 1 / 3;
				margin-inline: calc(0px - clamp(8px, calc(12 / 768 * 100dvw), 12px));
			}
			.slick-slide{
				margin-inline: clamp(8px, calc(12 / 768 * 100dvw), 12px);
			}
			.slick-arrow{
				grid-row: 1;
				align-self: center;
			}
		}
		@media (max-width: 991.98px) {
			&:not(.slick-slider){
				& > dl,
				& > span{
					width: 140px;
				}
			}
			&.slick-slider{
				grid-template-columns: auto 1fr auto;
				&:before{
					grid-column: 1 / 4;
					justify-self: center;
					width: 140px;
				}
				.slick-list{
					grid-column: 1 / 4;
					overflow: visible;
				}
				.slick-slide{
					width: 140px;
				}
				.slick-arrow{
					background: white;
					&.slick-prev{
						grid-column: 1;
					}
					&.slick-next{
						grid-column: 3;
					}
				}
			}
		}
		@media (min-width: 992px) {
			column-gap: 24px;
			&:not(.slick-slider){
				justify-content: center;
				grid-template-columns: repeat(5, 1fr);
				padding: 0 72px;
				& > dl,
				& > span{
					grid-column: 3;
				}
			}
			&.slick-slider{
				grid-template-columns: 48px 1fr 48px;
				&:before{
					grid-column: 2;
					width: calc((100% - (24px * 4)) / 5);
				}
				.slick-list{
					grid-column: 2;
				}
			}
		}
		@media (min-width: 1200px) {
			&:not(.slick-slider){
				grid-template-columns: repeat(6, 1fr);
				& > dl,
				& > span{
					transform: translateX(calc(50% + 12px));
				}
			}
			&.slick-slider{
				&:before{
					width: calc((100% - (24px * 5)) / 6);
				}
			}
		}
	}
}

#course{
	display: grid;
	#courseStart,
	#courseGoal{
		justify-self: center;
		position: relative;
		width: min(var(--wrap-fit), 1008px);
		font-weight: 600;
		font-size: clamp(16px, calc(24 / 768 * 100dvw), 24px);
		font-family: 'Montserrat', var(--font);
		white-space: nowrap;
		letter-spacing: 0.1em;
		line-height: 1;
		&#courseStart{
			background: linear-gradient(90deg, var(--color-theme) 0.68em, currentColor 0.68em);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		&#courseGoal{
			background: linear-gradient(90deg, var(--color-theme) 0.75em, currentColor 0.75em);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}
	#courseRoute{
		position: relative;
		display: grid;
		grid-template-columns: min(var(--wrap-fit), 1056px);
		justify-content: center;
		z-index: 1;
		&:not(:has(.date:first-child)){
			margin-top: 16px;
			padding-top: 56px;
			border-top: 1px solid currentColor;
		}
		&:not(:has(.date:last-child)){
			margin-bottom: 16px;
			padding-bottom: 56px;
			border-bottom: 1px solid currentColor;
		}
		&:before{
			content: "";
			position: absolute;
			top: 0;
			left: 50%;
			width: calc(min(var(--wrap-fit), 1056px) - clamp(48px, calc(56 / 768 * 100dvw), 56px));
			height: 100%;
			border-left: 1px solid currentColor;
			transform: translateX(-50%);
			pointer-events: none;
			z-index: -1;
		}
		.date{
			justify-self: center;
			max-width: min(calc(100% - 96px), 864px);
			&:not(:first-child){
				margin-top: 56px;
			}
		}
		.move{
			&:not(:first-child){
				margin-top: 56px;
			}
		}
		.spot{
			&:not(:first-child){
				margin-top: 64px;
			}
		}
		@media (max-width: 1199.98px) {
			.move,
			.spot{
				grid-template-columns: clamp(64px, calc(80 / 768 * 100dvw), 80px) 1fr;
			}
			.move{
				& dd{
					grid-column: 2;
				}
			}
			.spot{
				&:after{
					grid-column: 1 / 3;
				}
				& > *{
					grid-column: 2;
				}
			}
		}
	}
}

#contents{
	display: grid;
	grid-row-gap: clamp(64px, calc(80 / 768 * 100dvw), 80px);
}

#map{
	display: grid;
	& h3{
		grid-column: 1;
		grid-row: 1 / 3;
		justify-self: center;
		align-self: start;
		padding: 0.25em 1em;
		background: white;
		border: 2px solid currentColor;
		border-radius: 8px;
		color: var(--color-theme);
		font-weight: 800;
		font-size: clamp(20px, calc(24 / 768 * 100dvw), 24px);
		letter-spacing: 0.025em;
		text-align: center;
		text-wrap: balance;
		z-index: 1;
	}
	#mapEmbed,
	#mapApi{
		grid-column: 1;
		grid-row: 2 / 4;
		border-top: 2px solid var(--color-theme);
	}
	#mapEmbed{
		justify-self: center;
		position: relative;
		display: grid;
		aspect-ratio: 16 / 9;
		width: 100%;
		max-height: 560px;
		transition: opacity 0.2s ease-out;
		overflow: hidden;
		cursor: pointer;
		z-index: 0;
		&.hide{
			opacity: 0;
			pointer-events: none;
		}
		&:after{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: color-mix(in srgb, transparent, black 30%);
		}
		& iframe{
			position: absolute;
			top: -96px;
			left: -64px;
			width: calc(100% + 128px);
			height: calc(100% + 192px);
		}
		& button{
			align-self: center;
			justify-self: center;
			display: grid;
			align-items: center;
			min-width: 224px;
			min-height: 48px;
			padding: 8px 16px;
			background: var(--color);
			border-radius: 24px;
			color: white;
			font-weight: 800;
			font-size: 14px;
			letter-spacing: 0.1em;
			text-align: center;
			text-decoration: none;
			z-index: 1;
		}
	}
	#mapApi{
		position: relative;
		display: grid;
		@media (max-width: 991.98px) {
			#mapBody{
				height: clamp(480px, calc(560 / 768 * 100dvw), 560px);
			}
			#mapList{
				height: clamp(120px, calc(160 / 768 * 100dvw), 160px);
			}
		}
		@media (min-width: 992px) {
			display: grid;
			grid-template-columns: 1fr 360px;
			height: 560px;
			#mapList{
				border-width: 1px 0;
				& ul{
					padding: 40px;
				}
			}
		}
	}
	#mapBody{
		position: relative;
		background: #d9d9d9;
		&:not([data-map]){
			display: grid;
			place-content: center;
			grid-gap: 16px;
			overflow: hidden;
			& i{
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				grid-gap: 8px;
				& img{
					width: 34px;
					height: auto;
				}
			}
		}
		[id^="gMap"]{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}
	#mapList{
		position: relative;
		border: 0 solid #d9d9d9;
		& ul{
			counter-reset: count;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: grid;
			grid-row-gap: clamp(16px, calc(24 / 768 * 100dvw), 24px);
			padding: 24px;
			overflow-y: auto;
			scrollbar-color: var(--color-theme) transparent;
			scrollbar-width: thin;
		}
		& li{
			counter-increment: count;
			display: grid;
			grid-template-columns: auto 1fr;
			align-items: baseline;
			column-gap: 1em;
			color: inherit;
			font-weight: 600;
			letter-spacing: 0.05em;
			text-decoration: none;
			&:before{
				content: counter(count);
				display: grid;
				align-items: center;
				aspect-ratio: 1;
				width: 32px;
				padding-top: 1px;
				background: var(--color-theme);
				border-radius: 100%;
				color: white;
				font-weight: 600;
				font-size: 18px;
				font-family: 'Montserrat', var(--font);
				text-align: center;
			}
		}
	}
}

#related{
	margin-block: clamp(64px, calc(80 / 768 * 100dvw), 80px) clamp(96px, calc(120 / 768 * 100dvw), 120px);
	display: grid;
	justify-items: center;
	& hgroup{
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		grid-column-gap: clamp(16px, calc(24 / 768 * 100dvw), 24px);
		width: min(100%, 1120px);
		overflow: hidden;
		&:before,
		&:after{
			content: "";
			grid-row: 1;
			min-width: 48px;
			border-top: 2px solid currentColor;
		}
		& h2{
			grid-column: 2;
			grid-row: 1;
			font-weight: 800;
			font-size: clamp(18px, calc(24 / 768 * 100dvw), 24px);
			letter-spacing: 0.1em;
			text-indent: 0.1em;
			text-align: center;
		}
		& p{
			grid-column: 1 / 4;
			justify-self: center;
			font-weight: 600;
			font-size: clamp(16px, calc(24 / 768 * 100dvw), 24px);
			font-family: 'Montserrat', var(--font);
			white-space: nowrap;
			letter-spacing: 0.2em;
			#related &{
				background: linear-gradient(90deg, var(--color-theme) 0.5em, currentColor 0.5em);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
	}
	#relatedList{
		display: grid;
		width: min(calc(100% - clamp(16px, calc(32 / 768 * 100dvw), 32px)), 1248px);
		margin-top: 24px;
		&:not(.slick-slider){
			justify-content: center;
			& > section,
			& > span{
				&:nth-child(n+2){
					display: none;
				}
			}
		}
		&.slick-slider{
			grid-template-columns: auto 1fr auto;
			column-gap: 16px;
			&:before{
				content: "";
				grid-row: 1;
				aspect-ratio: 3 / 2;
				background: red;
				opacity: 0.5;
				z-index: 1;
				visibility: hidden;
			}
			.slick-list{
				grid-row: 1 / 3;
				margin-inline: calc(0px - clamp(8px, calc(16 / 768 * 100dvw), 16px));
			}
			.slick-slide{
				margin-inline: clamp(8px, calc(16 / 768 * 100dvw), 16px);
			}
			.slick-arrow{
				grid-row: 1;
				align-self: center;
			}
		}
		@media (max-width: 991.98px) {
			&:not(.slick-slider){
				& > section,
				& > span{
					width: clamp(240px, calc(392 / 768 * 100dvw), 392px);
				}
			}
			&.slick-slider{
				&:before{
					grid-column: 1 / 4;
					justify-self: center;
					width: clamp(240px, calc(392 / 768 * 100dvw), 392px);
				}
				.slick-list{
					grid-column: 1 / 4;
					overflow: visible;
				}
				.slick-slide{
					width: clamp(240px, calc(392 / 768 * 100dvw), 392px);
				}
				.slick-arrow{
					background: white;
					&.slick-prev{
						grid-column: 1;
					}
					&.slick-next{
						grid-column: 3;
					}
				}
			}
		}
		@media (min-width: 992px) {
			&:not(.slick-slider){
				justify-content: center;
				& > section,
				& > span{
					width: calc(50% - 16px);
				}
			}
			&.slick-slider{
				grid-template-columns: 40px 1fr 40px;
				column-gap: 24px;
				&:before{
					grid-column: 2;
					width: calc(50% - 16px);
				}
				.slick-list{
					grid-column: 2;
				}
				.slick-arrow{
					width: 100%;
				}
			}
		}
		& section{
			position: relative;
			display: grid;
			grid-template-columns: calc(100% - clamp(16px, calc(32 / 768 * 100dvw), 32px));
			justify-content: center;
			grid-row-gap: clamp(8px, calc(16 / 768 * 100dvw), 16px);
			&:not(:has(figure)):before{
				content: "";
				background: var(--dummy);
				border-radius: 4px;
			}
			&:before,
			& figure img{
				aspect-ratio: 3 / 2;
			}
			&:before,
			& ul,
			& [data-fav-id],
			& figure{
				grid-column: 1;
				grid-row: 1;
			}
			&:before,
			& ul,
			& [data-fav-id],
			& figure{
				margin-inline: calc(0px - clamp(8px, calc(16 / 768 * 100dvw), 16px));
			}
			& [data-fav-id]{
				justify-self: end;
			}
		}
		& h3{
			font-weight: 700;
			font-size: clamp(16px, calc(20 / 768 * 100dvw), 20px);
			letter-spacing: 0.025em;
		}
		& h3+div{
			display: contents;
			& ul{
				display: flex;
				flex-wrap: wrap;
				align-content: start;
				grid-gap: 8px;
				padding: clamp(8px, calc(16 / 768 * 100dvw), 16px) 48px clamp(8px, calc(16 / 768 * 100dvw), 16px) clamp(8px, calc(16 / 768 * 100dvw), 16px);
				overflow: hidden;
				z-index: 1;
			}
			& li{
				display: grid;
				align-items: center;
				min-height: 1.66em;
				padding: 0 0.75em;
				background: silver;
				border-radius: 0.833em;
				font-weight: 700;
				font-size: clamp(8px, calc(12 / 768 * 100dvw), 12px);
				letter-spacing: 0.2em;
				text-align: center;
				&[data-area]{
					color: #fff;
				}
				&[data-area="1"]{
					background: #c1c42f;
				}
				&[data-area="2"]{
					background: #67afe1;
				}
				&[data-area="3"]{
					background: #81c2c2;
				}
				&[data-area="4"]{
					background: #555ea9;
				}
				&[data-area="5"]{
					background: #b078b0;
				}
				&[data-area="6"]{
					background: #e57897;
				}
				&[data-area="7"]{
					background: #ca7b5e;
				}
				&[data-cat="sq"]{
					order: 1;
					grid-template-columns: auto 1fr;
					column-gap: 0.5em;
					background: #f7e1f2;
					color: #d966a0;
					&:before{
						content: "";
						aspect-ratio: 1;
						width: 14px;
						margin-left: -0.25em;
						background: currentColor;
						-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10;"><line x1="7.5" y1="7.83" x2="7.5" y2="5.98"/><line x1="7.5" y1="7.83" x2="6.41" y2="9.34"/><line x1="7.5" y1="7.83" x2="9.27" y2="7.26"/><line x1="7.5" y1="7.83" x2="5.73" y2="7.26"/><line x1="7.5" y1="7.83" x2="8.59" y2="9.34"/><path d="M3.44,9.15c-.25.36-.53.84-.62,1.36-.18.99.28,1.9.28,1.9h1.07s.33,1.01.33,1.01c0,0,1.02.16,1.9-.32.46-.25.84-.66,1.1-1.01h0c.26.35.64.76,1.1,1.01.88.48,1.9.32,1.9.32l.33-1.02h1.07s.47-.92.28-1.9c-.1-.52-.37-1-.62-1.36h0c.41-.14.92-.37,1.3-.74.73-.69.89-1.71.89-1.71l-.86-.63.33-1.01s-.73-.73-1.72-.86c-.52-.07-1.07.04-1.49.17h0c0-.43-.07-.99-.3-1.47-.43-.91-1.35-1.37-1.35-1.37l-.86.63-.86-.63s-.92.47-1.35,1.37c-.23.47-.29,1.03-.3,1.47h0c-.42-.13-.97-.24-1.49-.17-.99.13-1.72.86-1.72.86l.33,1.01-.86.63s.16,1.02.89,1.71c.38.36.89.59,1.3.74h0Z" style="stroke-width: .05px;"/><path d="M3.44,9.15c-.25.36-.53.84-.62,1.36-.18.99.28,1.9.28,1.9h1.07s.33,1.01.33,1.01c0,0,1.02.16,1.9-.32.46-.25.84-.66,1.1-1.01h0c.26.35.64.76,1.1,1.01.88.48,1.9.32,1.9.32l.33-1.02h1.07s.47-.92.28-1.9c-.1-.52-.37-1-.62-1.36h0c.41-.14.92-.37,1.3-.74.73-.69.89-1.71.89-1.71l-.86-.63.33-1.01s-.73-.73-1.72-.86c-.52-.07-1.07.04-1.49.17h0c0-.43-.07-.99-.3-1.47-.43-.91-1.35-1.37-1.35-1.37l-.86.63-.86-.63s-.92.47-1.35,1.37c-.23.47-.29,1.03-.3,1.47h0c-.42-.13-.97-.24-1.49-.17-.99.13-1.72.86-1.72.86l.33,1.01-.86.63s.16,1.02.89,1.71c.38.36.89.59,1.3.74h0Z"/></svg>') no-repeat center / contain;
					}
				}
			}
			& button{
				&[data-fav-id]{
					position: relative;
					aspect-ratio: 1;
					width: 48px;
					background: silver;
					background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="fill: transparent; stroke: white; stroke-width: 2.4px; stroke-linecap: round; stroke-linejoin: round;"><path d="M11.96,20.97c-.88-.83-4.3-4.22-6.03-6.17-1.79-2.03-3.54-4.25-3.54-7.24,0-2.53,2.08-4.54,4.66-4.54,2.3,0,4.16,1.25,4.93,3.51h.02c.79-2.37,2.73-3.51,4.93-3.51,2.58,0,4.66,2.01,4.66,4.54,0,2.99-1.75,5.21-3.54,7.24-1.72,1.94-5.17,5.34-6.05,6.17h-.05Z"/></svg>') no-repeat center / 24px;
					font-size: 0;
					filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
					opacity: 0;
					transition: opacity 0.2s ease-out;
					z-index: 2;
					&[data-fav-status]{
						opacity: 1;
					}
					&[data-fav-status="on"]{
						background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="fill: %23d92d1b; stroke: white; stroke-width: 2.4px; stroke-linecap: round; stroke-linejoin: round;"><path d="M11.96,20.97c-.88-.83-4.3-4.22-6.03-6.17-1.79-2.03-3.54-4.25-3.54-7.24,0-2.53,2.08-4.54,4.66-4.54,2.3,0,4.16,1.25,4.93,3.51h.02c.79-2.37,2.73-3.51,4.93-3.51,2.58,0,4.66,2.01,4.66,4.54,0,2.99-1.75,5.21-3.54,7.24-1.72,1.94-5.17,5.34-6.05,6.17h-.05Z"/></svg>');
					}
					&[data-fav-status="loading"]{
						background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="fill: none; stroke: white; stroke-width: 2.4px; stroke-linecap: round; stroke-linejoin: round;"><circle cx="12" cy="12" r="10" stroke-dasharray="48"><animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="1s" repeatCount="indefinite" /></circle></svg>');
						opacity: 0.5;
						pointer-events: none;
					}
				}
			}
			& a{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				font-size: 0;
				z-index: 1;
			}
		}
		& figure{
			display: grid;
			aspect-ratio: 3 / 2;
			overflow: hidden;
			& img{
				grid-column: 1;
				grid-row: 1;
				width: 100%;
				height: 100%;
				object-fit: cover;
				border-radius: 8px;
			}
			& figcaption{
				grid-column: 1;
				grid-row: 1;
				display: grid;
				align-content: end;
				justify-items: end;
				grid-row-gap: 8px;
				padding: clamp(8px, calc(16 / 768 * 100dvw), 16px);
				font-weight: 800;
				font-size: clamp(14px, calc(18 / 768 * 100dvw), 18px);
				letter-spacing: 0.025em;
				& span{
					display: block;
					padding: 0.25em 0.5em;
					background: white;
					border-radius: 4px;
					line-height: 1;
				}
			}
		}
		& [data-type="course"]{
			display: flex;
			flex-wrap: wrap;
			grid-gap: 8px 24px;
			& dl{
				display: flex;
				align-items: baseline;
				column-gap: 8px;
			}
			& dt{
				aspect-ratio: 1;
				width: 16px;
				background: currentColor;
				transform: translateY(0.1em);
				overflow: hidden;
				-webkit-mask: no-repeat center / contain;
				dl:nth-child(1) &{
					-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;"><rect x="2.5" y="3" width="12" height="12" rx="1" ry="1"/><line x1="2.5" y1="6" x2="14.5" y2="6"/><line x1="5.5" y1="3.83" x2="5.5" y2="2"/><line x1="5.5" y1="15" x2="5.5" y2="6"/><line x1="8.5" y1="15" x2="8.5" y2="6"/><line x1="11.5" y1="3.83" x2="11.5" y2="2"/><line x1="11.5" y1="15" x2="11.5" y2="6"/><line x1="2.5" y1="9" x2="14.5" y2="9"/><line x1="2.5" y1="12" x2="14.5" y2="12"/></svg>');
				}
				&[data-icon="walk"]{
					-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;"><circle cx="9.44" cy="2.2" r="1.2"/><path d="M6.17,12.32l-1.44,2.22c-.24.37-.13.87.24,1.11.13.09.28.13.43.13.26,0,.52-.13.67-.37l1.53-2.36.12-.3.29-1.74,1.44,2.03.41,2.3c.07.39.41.66.79.66.05,0,.09,0,.14-.01.44-.08.72-.49.65-.93l-.45-2.48-.13-.32-1.92-2.67.33-1.97,1,1.69,1.18.85c.12.09.26.13.4.13.2,0,.41-.09.54-.27.22-.3.16-.71-.14-.93l-1.04-.83-1.51-2.62c-.26-.54-.67-.87-.9-.92-.67-.14-1.2.09-1.26.14l-1.36,7.46Z"/><path d="M7.09,6.92l-1.05.71-.21,1.03c-.06.32-.34.55-.66.55-.04,0-.08,0-.13-.01-.18-.03-.33-.13-.43-.28-.1-.15-.14-.33-.11-.51l.28-1.3c.03-.16.12-.31.26-.41l2.52-1.83"/></svg>');
				}
				&[data-icon="train"]{
					-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;"><path d="M5.58,1h5.84c1.15,0,2.09.94,2.09,2.09v8.36c0,.77-.62,1.39-1.39,1.39h-7.23c-.77,0-1.39-.62-1.39-1.39V3.09c0-1.15.94-2.09,2.09-2.09Z"/><path d="M11.97,3.53v4.21c0,.27-.22.49-.49.49h-5.96c-.27,0-.49-.22-.49-.49V3.53c0-.37.27-.67.61-.67h5.72c.34,0,.61.3.61.67Z"/><line x1="11.29" y1="12.84" x2="13.69" y2="16"/><line x1="5.71" y1="12.84" x2="3.31" y2="16"/><line x1="4.34" y1="14.64" x2="12.66" y2="14.64"/><path d="M12.37,10.67c0,.49-.4.89-.89.89s-.89-.4-.89-.89.4-.89.89-.89.89.4.89.89Z"/><path d="M6.42,10.67c0,.49-.4.89-.89.89s-.89-.4-.89-.89.4-.89.89-.89.89.4.89.89Z"/><line x1="7.56" y1="10.67" x2="9.44" y2="10.67"/></svg>');
				}
				&[data-icon="ship"]{
					-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;"><polyline points="12.98 13.41 16 7.51 11.41 7.51 9.84 8.76 1.34 8.76 2.21 12.96"/><line x1="2.05" y1="11.54" x2="13.89" y2="11.54"/><polyline points="2.38 8.73 3.49 4.83 9.47 4.83 10.14 6.31 11.53 6.31 12.16 7.4"/><polyline points="3.97 4.78 3.97 3.51 6.05 3.51 6.05 4.78"/><line x1="10.14" y1="6.31" x2="5.44" y2="6.31"/><circle cx="12.69" cy="9.47" r=".8"/><path d="M1,12.61c1.25,0,1.25.88,2.5.88s1.25-.88,2.5-.88,1.25.88,2.5.88,1.25-.88,2.5-.88,1.25.88,2.5.88,1.25-.88,2.5-.88"/></svg>');
				}
				&[data-icon="bicycle"]{
					-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;"><path d="M9.13,13.98l.54-3.21c.06-.34-.07-.69-.33-.91l-1.42-1.23c-.11-.09-.12-.25-.02-.35l.99-1.13c.12-.14.34-.1.41.06l.27.59c.16.35.52.58.91.58h2.23c.37,0,.67-.3.67-.67h0c0-.37-.3-.67-.67-.67h-1.85c-.1,0-.19-.06-.23-.14l-.4-.86c-.08-.17-.2-.33-.34-.45l-.86-.73c-.41-.35-1.02-.3-1.37.11l-2.2,2.55c-.38.44-.33,1.1.11,1.47l2.36,2.03c.07.06.1.14.08.23l-.42,2.49c-.07.42.21.82.64.9h0c.42.07.82-.21.9-.64Z"/><circle cx="11.19" cy="2.91" r="1.4" transform="translate(6.53 13.49) rotate(-80.81)"/><circle cx="13.5" cy="12.99" r="2.5"/><circle cx="3.5" cy="12.99" r="2.5"/></svg>');
				}
				&[data-icon="bus"]{
					-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;"><line x1="6.7" y1="2.66" x2="10.3" y2="2.66"/><line x1="2.6" y1="3.98" x2="14.4" y2="3.98"/><line x1="7.5" y1="12.4" x2="9.5" y2="12.4"/><path d="M12.4,14.2v.9c0,.33.27.6.6.6h.6c.33,0,.6-.27.6-.6v-1.31"/><path d="M2.8,13.79v1.31c0,.33.27.6.6.6h.6c.33,0,.6-.27.6-.6v-.9"/><path d="M4.5,12.7c-.33,0-.6-.27-.6-.6s.27-.6.6-.6h.9c.33,0,.6.27.6.6s-.27.6-.6.6h-.9Z"/><path d="M11.6,12.7c-.33,0-.6-.27-.6-.6s.27-.6.6-.6h.9c.33,0,.6.27.6.6s-.27.6-.6.6h-.9Z"/><path d="M1.6,7.3c-.33,0-.6-.27-.6-.6v-1.8c0-.33.27-.6.6-.6h.9"/><path d="M14.5,4.3h.9c.33,0,.6.27.6.6v1.8c0,.33-.27.6-.6.6"/><path d="M2.5,9.61s2.31.39,6,.39,6-.39,6-.39"/><path d="M14.5,3.38c0-.89-.65-1.65-1.53-1.78-1.02-.15-2.52-.3-4.47-.3-1.95,0-3.46.15-4.47.3-.88.13-1.53.89-1.53,1.78v9.62c0,.66.54,1.2,1.2,1.2h9.6c.66,0,1.2-.54,1.2-1.2V3.38Z"/></svg>');
				}
				&[data-icon="car"]{
					-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;"><path d="M13.83,6.22h1.61c.31,0,.55.26.55.58v.17c0,.28-.19.53-.46.58l-.96.17"/><line x1="14.02" y1="6.94" x2="8.5" y2="6.94"/><polygon points="4.92 12.96 8.5 12.96 14.51 12.96 4.92 12.96"/><path d="M2.49,12.96h-.02c-.63,0-1.15-.54-1.15-1.21v-2.34c0-.21.07-.42.2-.58l1.34-1.67c.05-.06.08-.13.1-.21l.8-4.06c.12-.46.51-.78.97-.78h7.52c.45,0,.85.32.97.78l.8,4.06c.02.08.05.15.1.21l1.34,1.67c.13.16.2.37.2.58v2.34c0,.67-.51,1.21-1.15,1.21h-.02"/><path d="M5.48,10.29v-.15c0-.26-.17-.49-.41-.57l-1.28-.39c-.45-.14-.91.21-.91.7v.41c0,.33.26.59.58.59h1.44c.32,0,.58-.27.58-.59Z"/><path d="M11.52,10.29v-.15c0-.26.17-.49.41-.57l1.28-.39c.45-.14.91.21.91.7v.41c0,.33-.26.59-.58.59h-1.44c-.32,0-.58-.27-.58-.59Z"/><path d="M3.17,6.22h-1.61c-.31,0-.55.26-.55.58v.17c0,.28.19.53.46.58l.96.17"/><line x1="2.98" y1="6.94" x2="8.5" y2="6.94"/><path d="M15.01,12.96v1.32c0,.34-.28.62-.62.62h-2c-.34,0-.62-.28-.62-.62v-1.32h3.23Z"/><path d="M5.23,12.96v1.32c0,.34-.28.62-.62.62h-2c-.34,0-.62-.28-.62-.62v-1.32h3.23Z"/><path d="M9.33,11.14h-1.67c-.4,0-.72-.32-.72-.72h0c0-.4.32-.72.72-.72h1.67c.4,0,.72.32.72.72h0c0,.4-.32.72-.72.72Z"/></svg>');
				}
				&[data-icon="airplane"]{
					-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;"><path d="M15.34,1.66c-.46-.46-1.81.16-2.27.62l-5,5c-1.55,1.55-3.02,3.36-3.02,3.36l-2.68-.39-.88.87,3.03,1.34,1.34,3.03.87-.87-.39-2.68s1.81-1.47,3.36-3.02c1.16-1.16,5-5,5-5,.46-.46,1.07-1.81.62-2.27Z"/><polyline points="10.32 5.03 2.67 3.54 1.5 4.71 8.06 7.29 8.07 7.28"/><polyline points="9.72 8.93 9.71 8.94 12.29 15.5 13.46 14.33 11.97 6.68"/></svg>');
				}
			}
			& dd{
				color: color-mix(in srgb, white, black 60%);
				font-size: 14px;
				letter-spacing: 0.025em;
			}
		}
	}
}

.date{
	position: relative;
	display: grid;
	background: white;
	border: 1px solid currentColor;
	border-radius: 4px;
	padding: 0.25em 1em;
	font-weight: 800;
	font-size: clamp(20px, calc(24 / 768 * 100dvw), 24px);
	letter-spacing: 0.2em;
	text-align: center;
	text-wrap: balance;
	&:before,
	&:after{
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		z-index: -1;
	}
	&:before{
		width: min(100dvw, 1120px);
		height: calc(50% + 1px);
		background: white;
	}
	&:after{
		content: "";
		top: 50%;
		width: 100dvw;
		border-top: 1px solid currentColor;
	}
	&:first-child{
		&:before{
			content: "";
			top: -1px;
		}
	}
	&:last-child{
		&:before{
			content: "";
			bottom: -1px;
		}
	}
}

.move{
	display: grid;
	align-items: center;
	overflow: hidden;
	& dl{
		display: contents;
	}
	& dt{
		grid-column: 1;
		grid-row: 1;
		position: relative;
		aspect-ratio: 1;
		width: clamp(48px, calc(56 / 768 * 100dvw), 56px);
		background: white;
		border: 1px solid currentColor;
		border-radius: 100%;
		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 16 16"></svg>') no-repeat center / min(50%, 24px);
		}
		[data-icon="walk"]&: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" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><circle cx="9.44" cy="2.2" r="1.2"/><path d="M6.17,12.32l-1.44,2.22c-.24.37-.13.87.24,1.11.13.09.28.13.43.13.26,0,.52-.13.67-.37l1.53-2.36.12-.3.29-1.74,1.44,2.03.41,2.3c.07.39.41.66.79.66.05,0,.09,0,.14-.01.44-.08.72-.49.65-.93l-.45-2.48-.13-.32-1.92-2.67.33-1.97,1,1.69,1.18.85c.12.09.26.13.4.13.2,0,.41-.09.54-.27.22-.3.16-.71-.14-.93l-1.04-.83-1.51-2.62c-.26-.54-.67-.87-.9-.92-.67-.14-1.2.09-1.26.14l-1.36,7.46Z"/><path d="M7.09,6.92l-1.05.71-.21,1.03c-.06.32-.34.55-.66.55-.04,0-.08,0-.13-.01-.18-.03-.33-.13-.43-.28-.1-.15-.14-.33-.11-.51l.28-1.3c.03-.16.12-.31.26-.41l2.52-1.83"/></svg>');
		}
		[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 16 16" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><path d="M5.58,1h5.84c1.15,0,2.09.94,2.09,2.09v8.36c0,.77-.62,1.39-1.39,1.39h-7.23c-.77,0-1.39-.62-1.39-1.39V3.09c0-1.15.94-2.09,2.09-2.09Z"/><path d="M11.97,3.53v4.21c0,.27-.22.49-.49.49h-5.96c-.27,0-.49-.22-.49-.49V3.53c0-.37.27-.67.61-.67h5.72c.34,0,.61.3.61.67Z"/><line x1="11.29" y1="12.84" x2="13.69" y2="16"/><line x1="5.71" y1="12.84" x2="3.31" y2="16"/><line x1="4.34" y1="14.64" x2="12.66" y2="14.64"/><path d="M12.37,10.67c0,.49-.4.89-.89.89s-.89-.4-.89-.89.4-.89.89-.89.89.4.89.89Z"/><path d="M6.42,10.67c0,.49-.4.89-.89.89s-.89-.4-.89-.89.4-.89.89-.89.89.4.89.89Z"/><line x1="7.56" y1="10.67" x2="9.44" y2="10.67"/></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 16 16" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><polyline points="12.98 13.41 16 7.51 11.41 7.51 9.84 8.76 1.34 8.76 2.21 12.96"/><line x1="2.05" y1="11.54" x2="13.89" y2="11.54"/><polyline points="2.38 8.73 3.49 4.83 9.47 4.83 10.14 6.31 11.53 6.31 12.16 7.4"/><polyline points="3.97 4.78 3.97 3.51 6.05 3.51 6.05 4.78"/><line x1="10.14" y1="6.31" x2="5.44" y2="6.31"/><circle cx="12.69" cy="9.47" r=".8"/><path d="M1,12.61c1.25,0,1.25.88,2.5.88s1.25-.88,2.5-.88,1.25.88,2.5.88,1.25-.88,2.5-.88,1.25.88,2.5.88,1.25-.88,2.5-.88"/></svg>');
		}
		[data-icon="bicycle"]&: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" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><path d="M9.13,13.98l.54-3.21c.06-.34-.07-.69-.33-.91l-1.42-1.23c-.11-.09-.12-.25-.02-.35l.99-1.13c.12-.14.34-.1.41.06l.27.59c.16.35.52.58.91.58h2.23c.37,0,.67-.3.67-.67h0c0-.37-.3-.67-.67-.67h-1.85c-.1,0-.19-.06-.23-.14l-.4-.86c-.08-.17-.2-.33-.34-.45l-.86-.73c-.41-.35-1.02-.3-1.37.11l-2.2,2.55c-.38.44-.33,1.1.11,1.47l2.36,2.03c.07.06.1.14.08.23l-.42,2.49c-.07.42.21.82.64.9h0c.42.07.82-.21.9-.64Z"/><circle cx="11.19" cy="2.91" r="1.4" transform="translate(6.53 13.49) rotate(-80.81)"/><circle cx="13.5" cy="12.99" r="2.5"/><circle cx="3.5" cy="12.99" r="2.5"/></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 16 16" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><line x1="6.7" y1="2.66" x2="10.3" y2="2.66"/><line x1="2.6" y1="3.98" x2="14.4" y2="3.98"/><line x1="7.5" y1="12.4" x2="9.5" y2="12.4"/><path d="M12.4,14.2v.9c0,.33.27.6.6.6h.6c.33,0,.6-.27.6-.6v-1.31"/><path d="M2.8,13.79v1.31c0,.33.27.6.6.6h.6c.33,0,.6-.27.6-.6v-.9"/><path d="M4.5,12.7c-.33,0-.6-.27-.6-.6s.27-.6.6-.6h.9c.33,0,.6.27.6.6s-.27.6-.6.6h-.9Z"/><path d="M11.6,12.7c-.33,0-.6-.27-.6-.6s.27-.6.6-.6h.9c.33,0,.6.27.6.6s-.27.6-.6.6h-.9Z"/><path d="M1.6,7.3c-.33,0-.6-.27-.6-.6v-1.8c0-.33.27-.6.6-.6h.9"/><path d="M14.5,4.3h.9c.33,0,.6.27.6.6v1.8c0,.33-.27.6-.6.6"/><path d="M2.5,9.61s2.31.39,6,.39,6-.39,6-.39"/><path d="M14.5,3.38c0-.89-.65-1.65-1.53-1.78-1.02-.15-2.52-.3-4.47-.3-1.95,0-3.46.15-4.47.3-.88.13-1.53.89-1.53,1.78v9.62c0,.66.54,1.2,1.2,1.2h9.6c.66,0,1.2-.54,1.2-1.2V3.38Z"/></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 16 16" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><path d="M13.83,6.22h1.61c.31,0,.55.26.55.58v.17c0,.28-.19.53-.46.58l-.96.17"/><line x1="14.02" y1="6.94" x2="8.5" y2="6.94"/><polygon points="4.92 12.96 8.5 12.96 14.51 12.96 4.92 12.96"/><path d="M2.49,12.96h-.02c-.63,0-1.15-.54-1.15-1.21v-2.34c0-.21.07-.42.2-.58l1.34-1.67c.05-.06.08-.13.1-.21l.8-4.06c.12-.46.51-.78.97-.78h7.52c.45,0,.85.32.97.78l.8,4.06c.02.08.05.15.1.21l1.34,1.67c.13.16.2.37.2.58v2.34c0,.67-.51,1.21-1.15,1.21h-.02"/><path d="M5.48,10.29v-.15c0-.26-.17-.49-.41-.57l-1.28-.39c-.45-.14-.91.21-.91.7v.41c0,.33.26.59.58.59h1.44c.32,0,.58-.27.58-.59Z"/><path d="M11.52,10.29v-.15c0-.26.17-.49.41-.57l1.28-.39c.45-.14.91.21.91.7v.41c0,.33-.26.59-.58.59h-1.44c-.32,0-.58-.27-.58-.59Z"/><path d="M3.17,6.22h-1.61c-.31,0-.55.26-.55.58v.17c0,.28.19.53.46.58l.96.17"/><line x1="2.98" y1="6.94" x2="8.5" y2="6.94"/><path d="M15.01,12.96v1.32c0,.34-.28.62-.62.62h-2c-.34,0-.62-.28-.62-.62v-1.32h3.23Z"/><path d="M5.23,12.96v1.32c0,.34-.28.62-.62.62h-2c-.34,0-.62-.28-.62-.62v-1.32h3.23Z"/><path d="M9.33,11.14h-1.67c-.4,0-.72-.32-.72-.72h0c0-.4.32-.72.72-.72h1.67c.4,0,.72.32.72.72h0c0,.4-.32.72-.72.72Z"/></svg>');
		}
		[data-icon="airplane"]&: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" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><path d="M15.34,1.66c-.46-.46-1.81.16-2.27.62l-5,5c-1.55,1.55-3.02,3.36-3.02,3.36l-2.68-.39-.88.87,3.03,1.34,1.34,3.03.87-.87-.39-2.68s1.81-1.47,3.36-3.02c1.16-1.16,5-5,5-5,.46-.46,1.07-1.81.62-2.27Z"/><polyline points="10.32 5.03 2.67 3.54 1.5 4.71 8.06 7.29 8.07 7.28"/><polyline points="9.72 8.93 9.71 8.94 12.29 15.5 13.46 14.33 11.97 6.68"/></svg>');
		}
	}
	& dd{
		grid-column: 1;
		grid-row: 1;
		position: relative;
		justify-self: center;
		width: min(100%, 864px);
		font-weight: 600;
		&:before{
			content: "";
			position: absolute;
			top: 50%;
			right: 100%;
			width: 100dvw;
			border-top: 1px solid currentColor;
			transform: translateX(-8px);
			z-index: -1;
		}
	}
}

.spot{
	counter-increment: count;
	display: grid;
	overflow: hidden;
	&:before{
		content: counter(count);
		grid-column: 1;
		grid-row: 1;
		align-self: end;
		display: grid;
		place-content: center;
		aspect-ratio: 1;
		width: clamp(48px, calc(56 / 768 * 100dvw), 56px);
		background: var(--color-theme);
		border-radius: 100%;
		color: white;
		font-weight: 700;
		font-size: clamp(24px, calc(32 / 768 * 100dvw), 32px);
		font-family: 'Montserrat', var(--font);
		white-space: nowrap;
		transform: translateY(50%);
		overflow: hidden;
		z-index: 1;
	}
	.spotTitle,
	.spotCatch,
	.spotPhoto{
		order: -1;
	}
	.spotTitle{
		grid-column: 1;
		grid-row: 1;
		align-self: end;
		justify-self: center;
		width: min(100%, 864px);
	}
	.spotCatch{
		justify-self: center;
		width: min(100%, 864px);
		margin-top: 16px;
	}
	.spotText{
		justify-self: center;
		width: min(100%, 864px);
		margin-top: clamp(32px, calc(48 / 768 * 100dvw), 48px);
	}
	.spotInfo{
		justify-self: center;
		width: min(100%, 864px);
		margin-top: clamp(32px, calc(40 / 768 * 100dvw), 40px);
	}
	.spotPhoto{
		justify-self: center;
		width: min(100%, 864px);
		margin-top: clamp(24px, calc(32 / 768 * 100dvw), 32px);
	}
}

.spotTitle{
	position: relative;
	padding-bottom: 16px;
	color: var(--color-theme);
	font-weight: 800;
	font-size: clamp(20px, calc(32 / 768 * 100dvw), 32px);
	letter-spacing: 0.025em;
	&:empty{
		padding-bottom: clamp(24px, calc(28 / 768 * 100dvw), 28px);
	}
	&:after{
		content: "";
		position: absolute;
		right: 0;
		bottom: 0;
		width: 100dvw;
		border-bottom: 2px solid var(--color-theme);
	}
}

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

.spotText{
	font-weight: 600;
	letter-spacing: 0.025em;
}

.spotInfo{
	display: grid;
	@media (max-width: 991.98px) {
		grid-row-gap: 24px;
		.spotData,
		.spotLink{
			display: grid;
			justify-self: center;
			width: min(100%, 592px);
			& summary,
			& a{
				justify-self: center;
				min-width: min(100%, 240px);
			}
			& summary+div{
			}
		}
	}
	@media (min-width: 992px) {
		&:has(.spotData+.spotLink){
			grid-template-columns: 1fr 1fr;
			column-gap: clamp(24px, calc(40 / 1366 * 100dvw), 40px);
			.spotData,
			.spotLink{
				& summary,
				& a{
					width: min(100%, 240px);
				}
			}
			.spotData{
				display: contents;
				& summary{
					justify-self: end;
				}
				& summary+div{
					grid-row: 2;
					grid-column: 1 / 3;
					width: min(100%, 592px);
				}
			}
		}
		&:not(:has(.spotData+.spotLink)){
			.spotData,
			.spotLink{
				display: grid;
				& summary,
				& a{
					justify-self: center;
					min-width: min(100%, 240px);
				}
			}
			.spotData{
				justify-self: center;
				width: min(100%, 592px);
			}
		}
	}
}

.spotData{
	&::details-content{
		display: contents;
	}
	& summary{
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		min-height: 48px;
		column-gap: 8px;
		padding: 4px 16px 4px 24px;
		background: var(--color-theme);
		border-radius: 24px;
		color: white;
		font-weight: 600;
		font-size: 14px;
		letter-spacing: 0.1em;
		text-align: center;
		text-wrap: balance;
		&: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;"><line x1="7" y1="1" x2="7" y2="15"/><polyline points="1 9 7 15 13 9"/></svg>') no-repeat center / contain;
		}
		[open] &:after{
			transform: scale(1, -1);
		}
	}
	& summary+div{
		position: relative;
		display: none;
		&:before{
			content: "";
			position: absolute;
			top: 0;
			left: 50%;
			aspect-ratio: 1;
			width: 16px;
			background: var(--color-theme);
			transform: translateX(-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="M6.26,10.96L0,0h16l-6.26,10.96c-.77,1.34-2.71,1.34-3.47,0Z"/></svg>') no-repeat center / contain;
		}
	}
	& dl{
		display: grid;
		border: 2px solid var(--color-theme);
		border-radius: 4px;
		margin-top: 24px;
		padding: clamp(16px, calc(24 / 768 * 100dvw), 24px);
		@media (max-width: 575.98px) {
			& dt{
				&:after{
					content: ":";
					margin-left: 0.5em;
				}
				&:nth-of-type(n+2){
					margin-top: 16px;
					padding-top: 16px;
					border-top-width: 1px;
				}
			}
			& dd{
				margin-top: 8px;
			}
		}
		@media (min-width: 576px) {
			grid-template-columns: auto 1fr;
			& dt,
			& dd{
				&:nth-of-type(n+2){
					border-top-width: 1px;
					padding-top: 16px;
				}
				&:nth-last-of-type(n+2){
					padding-bottom: 16px;
				}
			}
			& dd{
				padding-left: 16px;
			}
		}
	}
	& dt,
	& dd{
		border: 0 solid #d9d9d9;
	}
}

.spotLink{
	& a{
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		min-height: 48px;
		column-gap: 8px;
		padding: 4px 16px 4px 24px;
		border: 1px solid currentColor;
		border-radius: 24px;
		color: inherit;
		font-weight: 600;
		font-size: 14px;
		letter-spacing: 0.1em;
		text-align: center;
		text-wrap: balance;
		text-decoration: none;
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 16px;
			background: var(--color-theme);
			-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;"><line x1="1" y1="7" x2="15" y2="7"/><polyline points="9 1 15 7 9 13"/></svg>') no-repeat center / contain;
		}
		&[target="_blank"]: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"><path d="M12,10.4c-.6,0-1,.4-1,1v1.6H2V4h1.6c.6,0,1-.4,1-1s-.4-1-1-1H1c-.5,0-1,.4-1,1v11c0,.5.5,1,1,1h11c.6,0,1-.5,1-1v-2.6c0-.6-.4-1-1-1ZM14.7.3C14.5.1,14.25,0,14,0h-6C7.4,0,7,.4,7,1s.4,1,1,1h3.6l-5.3,5.3c-.4.4-.4,1,0,1.4.2.2.4.3.7.3s.5-.1.7-.3l5.3-5.3v3.6c0,.6.4,1,1,1,.5,0,1-.4,1-1V1c0-.25-.1-.5-.3-.7Z"/></svg>');
		}
	}
}

.spotPhoto{
	display: grid;
	grid-gap: clamp(16px, calc(24 / 768 * 100dvw), 24px);
	& img{
		aspect-ratio: 3 / 2;
		object-fit: cover;
		border-radius: 4px;
	}
	@media (min-width: 576px) {
		grid-template-rows: clamp(288px, calc(384 / 768 * 100dvw), 384px);
		& img{
			height: 100%;
		}
	}
	&:has(img:nth-child(2)){
		@media (min-width: 576px) {
			grid-template-columns: 1fr 1fr;
		}
	}
	&:has(img:nth-child(3)){
		@media (max-width: 575.98px) {
			grid-template-columns: 1fr 1fr;
			& img:nth-child(1){
				grid-column: 1 / 3;
			}
		}
		@media (min-width: 576px) {
			grid-template-columns: 2fr 1fr;
			grid-template-rows: 1fr 1fr;
			height: clamp(288px, calc(384 / 768 * 100dvw), 384px);
			& img:nth-child(1){
				grid-row: 1 / 3;
			}
		}
	}
}

.spotTopics{
	display: grid;
	&:before,
	&:after{
		content: "";
		justify-self: center;
		width: min(100%, 864px);
		margin-top: clamp(40px, calc(48 / 768 * 100dvw), 48px);
		border-top: 1px solid #d9d9d9;
	}
	.spotTopicsTitle,
	.spotTopicsText,
	.spotTopicsSlide{
		&:first-child{
			margin-top: clamp(40px, calc(48 / 768 * 100dvw), 48px);
		}
	}
	.spotTopicsTitle{
		justify-self: center;
		width: min(100%, 864px);
		color: var(--color-theme);
		font-weight: 800;
		font-size: clamp(20px, calc(24 / 768 * 100dvw), 24px);
		letter-spacing: 0.025em;
	}
	.spotTopicsText{
		justify-self: center;
		width: min(100%, 864px);
		margin-top: clamp(24px, calc(40 / 768 * 100dvw), 40px);
		font-weight: 600;
		letter-spacing: 0.025em;
	}
	.spotTopicsSlide{
		justify-self: center;
		display: grid;
		width: min(100%, 968px);
		margin-top: clamp(32px, calc(48 / 768 * 100dvw), 48px);
		&:not(.slick-slider){
			justify-content: center;
			padding: 0 64px;
			& > dl,
			& > span{
				&:nth-child(n+2){
					display: none;
				}
			}
		}
		&.slick-slider{
			grid-template-columns: 40px 1fr 40px;
			column-gap: clamp(8px, calc(12 / 768 * 100dvw), 12px);
			&:before{
				content: "";
				grid-row: 1;
				grid-column: 2;
				aspect-ratio: 3 / 2;
				background: red;
				opacity: 0.5;
				z-index: 1;
				visibility: hidden;
			}
			.slick-list{
				grid-column: 2;
				grid-row: 1 / 3;
				margin-inline: calc(0px - clamp(8px, calc(12 / 768 * 100dvw), 12px));
			}
			.slick-slide{
				margin-inline: clamp(8px, calc(12 / 768 * 100dvw), 12px);
			}
			.slick-arrow{
				grid-row: 1;
				align-self: center;
				width: 100%;
			}
		}
		@media (min-width: 576px) and (max-width: 991.98px) {
			&:not(.slick-slider){
				grid-template-columns: repeat(2, 1fr);
				& > dl,
				& > span{
					grid-column: 1;
				}
			}
			&.slick-slider{
				&:before{
					width: calc((100% - (24px * 1)) / 2);
				}
			}
		}
		@media (min-width: 992px) {
			&:not(.slick-slider){
				grid-template-columns: repeat(3, 1fr);
				& > dl,
				& > span{
					grid-column: 3;
				}
			}
			&.slick-slider{
				&:before{
					width: calc((100% - (24px * 2)) / 3);
				}
			}
		}
		& dl{
			position: relative;
			display: grid;
			grid-template-columns: calc(100% - 16px);
			justify-content: center;
			grid-row-gap: clamp(8px, calc(16 / 768 * 100dvw), 16px);
			&:not(:has(img)):before{
				content: "";
				background: var(--dummy);
			}
			&:before,
			& img{
				grid-row: 1;
				justify-self: center;
				width: calc(100% + 16px);
				aspect-ratio: 3 / 2;
				border-radius: 4px;
			}
		}
		& dt{
			font-weight: 700;
		}
		& dd{
			font-size: 14px;
			&:has(a){
				display: contents;
				& a{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					font-size: 0;
				}
			}
			&:has(img){
				display: contents;
				& img{
					object-fit: cover;
				}
			}
		}
	}
}

.contents{
	display: grid;
	.contentsCatch,
	.contentsText,
	.contentsLink{
		justify-self: center;
		width: min(var(--wrap-fit), 864px);
	}
	.contentsCatch{
		margin-top: 16px;
	}
	.contentsText{
		margin-top: clamp(32px, calc(40 / 768 * 100dvw), 40px);
	}
	.contentsLink{
		margin-top: clamp(32px, calc(40 / 768 * 100dvw), 40px);
	}
}

.contentsTitle{
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: 1em;
	color: var(--color-theme);
	font-weight: 800;
	font-size: clamp(20px, calc(24 / 768 * 100dvw), 24px);
	letter-spacing: 0.025em;
	&:before,
	&:after{
		content: "";
		min-width: 48px;
		border-top: 2px solid currentColor;
	}
}

.contentsCatch{
	font-weight: 800;
	font-size: 18px;
	letter-spacing: 0.025em;
}

.contentsText{
	font-weight: 600;
	letter-spacing: 0.025em;
}

.contentsLink{
	display: flex;
	justify-content: center;
	& a{
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		min-width: min(100%, 240px);
		min-height: 48px;
		column-gap: 8px;
		padding: 4px 16px 4px 24px;
		border: 1px solid currentColor;
		border-radius: 24px;
		color: inherit;
		font-weight: 600;
		font-size: 14px;
		letter-spacing: 0.1em;
		text-align: center;
		text-wrap: balance;
		text-decoration: none;
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 16px;
			background: var(--color-theme);
			-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;"><line x1="1" y1="7" x2="15" y2="7"/><polyline points="9 1 15 7 9 13"/></svg>') no-repeat center / contain;
		}
		&[target="_blank"]: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"><path d="M12,10.4c-.6,0-1,.4-1,1v1.6H2V4h1.6c.6,0,1-.4,1-1s-.4-1-1-1H1c-.5,0-1,.4-1,1v11c0,.5.5,1,1,1h11c.6,0,1-.5,1-1v-2.6c0-.6-.4-1-1-1ZM14.7.3C14.5.1,14.25,0,14,0h-6C7.4,0,7,.4,7,1s.4,1,1,1h3.6l-5.3,5.3c-.4.4-.4,1,0,1.4.2.2.4.3.7.3s.5-.1.7-.3l5.3-5.3v3.6c0,.6.4,1,1,1,.5,0,1-.4,1-1V1c0-.25-.1-.5-.3-.7Z"/></svg>');
		}
	}
}

.slick-arrow{
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	position: relative;
	aspect-ratio: 1;
	width: clamp(40px, calc(48 / 768 * 100dvw), 48px);
	border: 1px solid currentColor;
	border-radius: 100%;
	color: #9c9c9c;
	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 24 24" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><line x1="4.83" y1="11.93" x2="19.17" y2="11.93"/><polyline points="13.3 6.14 19.17 12 13.3 17.86"/></svg>') no-repeat center / 50%;
	}
	&.slick-prev:before{
		transform: scale(-1, 1);
	}
}