/* CSS Document */

#detail{
	overflow: hidden;
}

#title{
	position: relative;
	display: grid;
	padding: clamp(40px, calc(72 / 1200 * 100dvw), 72px) 0;
	z-index: 2;
	&:before{
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		width: 100dvw;
		height: 100%;
		background: linear-gradient(transparent, #dfe9f2 120px, #dfe9f2 calc(100% - 120px), transparent);
		transform: translateX(-50%);
		z-index: -1;
	}
	& h2{
		margin-bottom: 24px;
		font-weight: 700;
		font-size: clamp(24px, calc(32 / 768 * 100dvw), 32px);
		letter-spacing: 0.1em;
	}
	#status{
		margin-top: clamp(24px, calc(48 / 1200 * 100dvw), 48px);
	}
	@media (max-width: 991.98px) {
		grid-template-columns: var(--wrap);
		justify-content: center;
		#photo{
			grid-row: 2;
			margin-bottom: 24px;
			& img{
				border-radius: 8px;
			}
		}
	}
	@media (min-width: 992px) {
		grid-template-columns: 1fr clamp(400px, calc(546 / 1200 * 100dvw), 546px);
		width: min(100%, 1400px);
		margin-inline: auto;
		& h2{
			grid-column: 1 / 3;
			justify-self: center;
			width: var(--wrap);
		}
		#text{
			grid-column: 2;
			grid-row: 2;
			margin: 40px 80px;
		}
		#status{
			grid-column: 2;
			grid-row: 3;
			align-self: end;
			margin: 0 80px 40px 80px;
		}
		#photo{
			grid-column: 1;
			grid-row: 2 / 4;
			& img{
				border-radius: 0 8px 8px 0;
			}
			@media (min-width: 1400px) {
				& img{
					border-radius: 8px;
				}
			}
		}
	}
}

#text{
	letter-spacing: 0.025em;
}

#status{
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	grid-gap: 16px;
	font-size: 14px;
	letter-spacing: 0.05em;
	& dl{
		display: contents;
	}
	& dt{
		padding: 0.25em;
		border: 1px solid currentColor;
		border-radius: 4px;
		line-height: 1;
	}
}

#photo{
	& img{
		aspect-ratio: 3 / 2;
		width: 100%;
		height: auto;
		object-fit: cover;
	}
}

#outline{
	position: relative;
	display: grid;
	grid-row-gap: clamp(24px, calc(40 / 1200 * 100dvw), 40px);
	width: var(--wrap);
	margin-inline: auto;
	z-index: 2;
	[lsc-lb="List"]{
		display: none;
	}
	& h3{
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(20px, calc(24 / 768 * 100dvw), 24px);
		letter-spacing: 0.1em;
	}
	& h3+div{
		display: grid;
		&:not(.slick-initialized){
			grid-template-columns: repeat(auto-fill, minmax(min(100%, 216px), 1fr));
			grid-gap: clamp(16px, calc(24 / 1200 * 100dvw), 24px);
			& dl{
				grid-column: 1;
				grid-row: 1;
				&:nth-child(n+2){
					visibility: hidden;
				}
			}
		}
	}
	& dl{
		position: relative;
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: baseline;
		grid-gap: 16px 8px;
		&:not(:has(img)):before{
			content: "";
			grid-column: 1 / 3;
			aspect-ratio: 3 / 2;
			background: var(--dummy);
			border-radius: 4px;
		}
		&:after{
			content: attr(data-number);
			order: -1;
			color: var(--color-theme);
			font-weight: 500;
			font-size: 36px;
			font-family: "futura-pt", sans-serif;
			letter-spacing: 0.025em;
			line-height: 1;
		}
	}
	& dt{
		order: 1;
		grid-column: 1 / 3;
		margin-inline: 8px;
		font-weight: 700;
	}
	& dd{
		&:has(img){
			grid-column: 1 / 3;
		}
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 4px;
		}
		&:has(a){
			display: contents;
			&:before{
				content: "SPOT";
				order: -2;
				color: var(--color-theme);
				font-size: 20px;
				font-family: "futura-pt", sans-serif;
				letter-spacing: 0.025em;
				line-height: 1;
			}
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	.slick-slider{
		grid-template-columns: auto 1fr auto;
		align-items: center;
	}
	.slick-list{
		grid-column: 2;
		grid-row: 1 / 3;
		margin-inline: calc(0px - clamp(8px, calc(12 / 1200 * 100dvw), 12px));
		overflow: visible;
	}
	.slick-slide{
		margin-inline: clamp(8px, calc(12 / 1200 * 100dvw), 12px);
	}
	.slick-arrow{
		filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.15));
	}
	.slick-dots{
		color: #ccdce8;
	}
	.slick-con{
		display: flex;
		justify-content: center;
		align-items: center;
		column-gap: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		.slick-next{
			order: 1;
		}
	}
	@media (max-width: 767.98px) {
		& h3{
			text-align: center;
		}
	}
	@media (min-width: 768px) {
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		& h3+div{
			order: 1;
			grid-column: 1 / 3;
		}
	}
}

#course{
	display: grid;
	width: var(--wrap);
	margin-inline: auto;
	padding-top: clamp(48px, calc(80 / 1200 * 100dvw), 80px);
}

#courseStart,
#courseGoal{
	justify-self: start;
	padding: 0.25em 0.5em;
	background: var(--color);
	border-radius: 28px;
	color: #fff;
	font-weight: 500;
	font-size: clamp(24px, calc(32 / 768 * 100dvw), 32px);
	font-family: "futura-pt", sans-serif;
	text-align: center;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1;
	z-index: 2;
}

#courseRoute{
	position: relative;
	display: grid;
	grid-row-gap: clamp(32px, calc(56 / 1200 * 100dvw), 56px);
	padding: clamp(32px, calc(56 / 1200 * 100dvw), 56px) 0;
	z-index: 1;
	&:after{
		content: "";
		position: absolute;
		top: 0;
		left: 24px;
		width: 6px;
		height: 100%;
		background: #b6d1e6;
		transform: translateX(-50%);
	}
}

#map{
	display: grid;
	width: var(--wrap);
	margin-inline: auto;
	margin-top: clamp(80px, calc(144 / 1200 * 100dvw), 144px);
	& summary{
		order: 1;
		justify-self: center;
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: 0.5em;
		min-width: min(100%, 298px);
		min-height: 48px;
		padding: 0.25em 1.5em;
		background: #f9fbfc;
		border-radius: 24px;
		color: var(--color-theme);
		font-weight: 700;
		font-size: 14px;
		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: 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-miterlimit: 10; stroke-width: 2px;"><line x1="8" y1="1.5" x2="8" y2="14.5"/><line x1="1.5" y1="8" x2="14.5" y2="8"/></svg>') no-repeat center / contain;
		}
		[open] &{
			margin-top: clamp(32px, calc(56 / 1200 * 100dvw), 56px);
			&:after{
				-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-miterlimit: 10; stroke-width: 2px;"><line x1="1.5" y1="8" x2="14.5" y2="8"/></svg>');
			}
		}
	}
	& summary+div{
		display: grid;
		#mapBody{
			grid-column: 1;
			grid-row: 1;
			height: min(75dvw, 540px);
			overflow: hidden;
		}
		#mapList{
			grid-column: 1;
			grid-row: 2;
			background: #f9fbfc;
		}
		#mapText{
			margin-top: 16px;
			font-size: 14px;
			letter-spacing: 0.05em;
			text-align: center;
		}
		@media (max-width: 991.98px) {
			#mapBody{
				border-radius: clamp(24px, calc(32 / 1200 * 100dvw), 32px) clamp(24px, calc(32 / 1200 * 100dvw), 32px) 0 0;
			}
			#mapList{
				height: 200px;
				border-radius: 0 0 clamp(24px, calc(32 / 1200 * 100dvw), 32px) clamp(24px, calc(32 / 1200 * 100dvw), 32px);
			}
		}
		@media (min-width: 992px) {
			grid-template-columns: 1fr clamp(280px, calc(368 / 1200 * 100dvw), 368px);
			#mapBody{
				grid-column: 1;
				grid-row: 1;
				border-radius: clamp(24px, calc(32 / 1200 * 100dvw), 32px) 0 0 clamp(24px, calc(32 / 1200 * 100dvw), 32px);
			}
			#mapList{
				grid-column: 2;
				grid-row: 1;
				height: min(75dvw, 540px);
				border-radius: 0 clamp(24px, calc(32 / 1200 * 100dvw), 32px) clamp(24px, calc(32 / 1200 * 100dvw), 32px) 0;
			}
			#mapText{
				grid-column: 1 / 3;
			}
		}
	}
}

#mapBody{
	position: relative;
	background: #ccc;
	[LSC-LT="dummy"] &{
		padding: 16px;
	}
	[id^="gMap"]{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

#mapList{
	&:has(menu){
		display: grid;
		grid-template-rows: auto 1fr auto;
		overflow: hidden;
	}
	& ul{
		display: grid;
		grid-row-gap: clamp(16px, calc(24 / 1200 * 100dvw), 24px);
		padding: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		overflow-y: auto;
	}
	& li{
		counter-increment: count;
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: 0.5em;
		font-weight: 700;
		letter-spacing: 0.05em;
		&:before{
			content: counter(count);
			align-self: start;
			display: grid;
			align-items: center;
			aspect-ratio: 1;
			width: 32px;
			background: var(--color-theme);
			border-radius: 16px;
			color: #fff;
			text-align: center;
			letter-spacing: 0em;
			line-height: 1;
		}
	}
	& menu{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		position: relative;
		height: 48px;
		background: transparent;
		color: var(--color-theme);
		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 24 24" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3px;"><polyline points="20 8 12 16 4 8"/></svg>') no-repeat center / 24px;
		}
		&#mapListUp:before{
			transform: scale(1, -1);
		}
	}
}

#mapText{
	font-weight: 500;
}

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

#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);
	}
}

.spot{
	counter-increment: spotcount;
	position: relative;
	display: grid;
	min-height: 48px;
	padding-left: 72px;
	outline: none;
	&:before{
		content: counter(spotcount);
		position: absolute;
		top: 0;
		left: 0;
		display: grid;
		align-items: center;
		aspect-ratio: 1;
		width: 48px;
		background: var(--color);
		border-radius: 100%;
		color: #fff;
		font-weight: 500;
		font-size: 32px;
		font-family: "futura-pt", sans-serif;
		text-align: center;
		letter-spacing: 0.05em;
		line-height: 1;
		z-index: 1;
	}
	.spotTitle{
		align-self: center;
	}
	.spotCatch{
		margin-top: 16px;
		&:empty{
			display: none;
		}
	}
	.spotText{
		margin-top: 16px;
	}
	.spotInfo{
		margin-top: clamp(24px, calc(40 / 1200 * 100dvw), 40px);
		&:not(:has(div)){
			display: none;
		}
	}
	.spotPhoto{
		margin-top: 16px;
		&:not(:has(img)){
			display: none;
		}
	}
	.topics{
		margin-top: clamp(40px, calc(64 / 1200 * 100dvw), 64px);
	}
	.column{
		margin-top: clamp(48px, calc(72 / 1200 * 100dvw), 72px);
	}
	@media (max-width: 991.98px) {
		.spotPhoto{
			grid-row: 3;
		}
	}
	@media (min-width: 992px) {
		&:has(.spotPhoto img){
			grid-template-columns: clamp(400px, calc(570 / 1200 * 100dvw), 570px) 1fr;
			grid-template-rows: auto auto auto 1fr;
			.spotTitle,
			.spotCatch,
			.topics,
			.column{
				grid-column: 1 / 3;
			}
			.spotText{
				grid-row: 3;
			}
			.spotInfo{
				grid-row: 4;
			}
			.topics{
				grid-row: 5;
			}
			.column{
				grid-row: 6;
			}
		}
		.spotPhoto{
			grid-column: 1;
			grid-row: 3 / 5;
			margin-right: clamp(40px, calc(80 / 1200 * 100dvw), 80px);
		}
	}
}

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

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

.spotText{
	letter-spacing: 0.025em;
}

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

.spotData{
	display: contents;
	&:only-child{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		&::details-content{
			width: 100%;
		}
		& summary{
			min-width: min(100%, 320px);
		}
	}
	& summary{
		position: relative;
		display: grid;
		align-items: center;
		column-gap: 0.5em;
		min-height: 40px;
		padding: 0.25em 1.5em;
		background: #7baac4;
		border-radius: 20px;
		color: #fff;
		font-weight: 700;
		font-size: 14px;
		letter-spacing: 0.1em;
		text-align: center;
		filter: drop-shadow(0 0 6px rgba(11, 59, 99, 0.15));
		&:after{
			position: absolute;
			top: 100%;
			left: 50%;
			aspect-ratio: 2 / 1;
			width: 16px;
			background: inherit;
			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 8"><polygon points="8 8 0 0 16 0 8 8"/></svg>') no-repeat center / contain;
		}
		[open] &:after{
			content: "";
		}
	}
	& summary+div{
		padding-top: clamp(16px, calc(40 / 1200 * 100dvw), 40px);
	}
	& dl{
		display: grid;
		border-bottom: 1px solid #ccdce8;
	}
	& dt,
	& dd{
		padding: 1em;
		font-size: 14px;
	}
	& dt{
		letter-spacing: 0.1em;
		border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	}
	& dd{
		letter-spacing: 0.05em;
		border-top: 1px solid #ccdce8;
	}
	@media (min-width: 576px) {
		& dl{
			grid-template-columns: auto 1fr;
		}
		& dt{
			border-top: 1px solid #ccdce8;
		}
	}
}

.spotLink{
	&:only-child{
		display: flex;
		justify-content: center;
		& a{
			min-width: min(100%, 320px);
		}
	}
	& a{
		display: grid;
		align-items: center;
		column-gap: 0.5em;
		min-height: 40px;
		padding: 0.25em 1.5em;
		background: #f9fbfc;
		border-radius: 20px;
		color: var(--color-theme);
		font-weight: 700;
		font-size: 14px;
		letter-spacing: 0.1em;
		text-align: center;
		text-decoration: none;
		filter: drop-shadow(0 0 6px rgba(11, 59, 99, 0.15));
	}
}

.spotPhoto{
	& ul{
		display: grid;
		&:not(.slick-initialized){
			& li{
				grid-column: 1;
				grid-row: 1;
			}
		}
	}
	& img{
		aspect-ratio: 3 / 2;
		object-fit: cover;
		border-radius: 8px;
	}
	.slide{
		display: grid;
		grid-template-columns: 0 1fr 0;
		align-items: center;
		.slick-list{
			grid-column: 2;
			grid-row: 1;
		}
		.slick-arrow{
			justify-self: center;
			width: clamp(32px, calc(48 / 1200 * 100dvw), 48px);
			filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.15));
		}
	}
	.slideNav{
		margin-top: clamp(8px, calc(16 / 1200 * 100dvw), 16px);
		& img{
			border-radius: 4px;
		}
		.slick-list{
			margin-inline: -4px;
		}
		.slick-slide{
			cursor: pointer;
			margin-inline: 4px;
		}
	}
}

.topics{
	& h4{
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(20px, calc(24 / 768 * 100dvw), 24px);
		letter-spacing: 0.1em;
	}
	& dl{
		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: 4px;
		}
	}
	& dt{
		margin-inline: 8px;
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
	}
	& dd{
		&:nth-of-type(1){
			margin-inline: 8px;
			font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
			letter-spacing: 0.025em;
		}
		&:has(img){
			order: -1;
		}
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 4px;
		}
		&:has(a){
			display: flex;
			justify-content: center;
			margin-top: 16px;
			padding-bottom: 6px;
		}
		& a{
			display: grid;
			align-items: center;
			column-gap: 0.5em;
			min-height: 40px;
			padding: 0.25em 1.5em;
			background: #f9fbfc;
			border-radius: 20px;
			color: var(--color-theme);
			font-weight: 700;
			font-size: 14px;
			letter-spacing: 0.1em;
			text-align: center;
			text-decoration: none;
			filter: drop-shadow(0 0 6px rgba(11, 59, 99, 0.15));
		}
	}
	& .slide{
		display: grid;
		margin-top: clamp(16px, calc(24 / 1200 * 100dvw), 24px);
		&:not(.slick-slider){
			grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr));
			grid-gap: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		}
	}
	.slick-slider{
		grid-template-columns: 0 1fr 0;
		align-items: center;
		&:before{
			content: "";
			grid-column: 2;
			grid-row: 1;
			aspect-ratio: 3 / 2;
			visibility: hidden;
		}
		@media (min-width: 576px) {
			&:before{
				width: calc(50% - clamp(12px, calc(16 / 1200 * 100dvw), 16px));
			}
		}
		@media (min-width: 992px) {
			&:before{
				width: calc((100% - (clamp(24px, calc(32 / 1200 * 100dvw), 32px) * 2)) / 3);
			}
		}
	}
	.slick-list{
		grid-column: 2;
		grid-row: 1 / 3;
		margin-inline: calc(0px - clamp(12px, calc(16 / 1200 * 100dvw), 16px));
	}
	.slick-slide{
		margin-inline: clamp(12px, calc(16 / 1200 * 100dvw), 16px);
	}
	.slick-arrow{
		justify-self: center;
		width: clamp(32px, calc(48 / 1200 * 100dvw), 48px);
		filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.15));
	}
}

.column{
	position: relative;
	display: grid;
	padding: clamp(40px, calc(64 / 1200 * 100dvw), 64px) clamp(24px, calc(40 / 1200 * 100dvw), 40px);
	border: 4px solid #fff;
	border-radius: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
	&:before{
		content: "COLUMN";
		position: absolute;
		top: 0;
		left: clamp(24px, calc(56 / 1200 * 100dvw), 56px);
		padding: 0 16px;
		background: #edf2f7;
		color: var(--color-theme);
		font-family: "futura-pt", sans-serif;
		font-weight: 500;
		font-size: clamp(32px, calc(40 / 768 * 100dvw), 40px);
		letter-spacing: 0.05em;
		line-height: 1;
		transform: translateY(-50%);
		z-index: 1;
	}
	& h4{
		margin-top: 16px;
		font-weight: 700;
		font-size: 18px;
	}
	& h4+div{
		margin-top: clamp(16px, calc(24 / 1200 * 100dvw), 24px);
	}
	& h4+div+div{
		align-self: start;
		display: flex;
		justify-content: center;
		margin-top: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		& a{
			display: grid;
			align-items: center;
			column-gap: 0.5em;
			min-width: min(100%, 180px);
			min-height: 40px;
			padding: 0.25em 1.5em;
			background: #f9fbfc;
			border-radius: 20px;
			color: var(--color-theme);
			font-weight: 700;
			font-size: 14px;
			letter-spacing: 0.1em;
			text-align: center;
			text-decoration: none;
			filter: drop-shadow(0 0 6px rgba(11, 59, 99, 0.15));
		}
	}
	& figure{
		order: -1;
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 10px;
		}
	}
	@media (min-width: 768px) {
		&:has(img){
			grid-template-columns: auto 1fr;
			grid-template-rows: auto 1fr;
		}
		& figure{
			grid-column: 1;
			grid-row: 1 / 4;
			width: clamp(320px, calc(420 / 1200 * 100dvw), 420px);
			margin-right: clamp(24px, calc(40 / 1200 * 100dvw), 40px);
		}
	}
}

.date{
	counter-increment: count;
	position: relative;
	justify-self: center;
	padding: 24px 0 16px 72px;
	color: var(--color-theme);
	font-weight: 700;
	font-size: clamp(20px, calc(24 / 768 * 100dvw), 24px);
	text-align: center;
	letter-spacing: 0.2em;
	&:before{
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		align-items: center;
		width: 100dvw;
		height: 480px;
		padding-bottom: 48px;
		background: linear-gradient(transparent, #dfe9f2 120px, #dfe9f2 calc(100% - 120px), transparent);
		z-index: -1;
		transform: translate(-50%, -50%);
	}
	&:after{
		content: "DAY"counter(count);
		position: absolute;
		left: 50%;
		bottom: 0;
		display: grid;
		grid-template-columns: var(--wrap);
		justify-content: center;
		width: 100dvw;
		padding-bottom: 16px;
		border-bottom: 4px solid #fff;
		color: #fff;
		font-weight: 400;
		font-size: 80px;
		font-family: "futura-pt", sans-serif;
		text-align: right;
		line-height: 1;
		z-index: -1;
		transform: translateX(-50%);
	}
}

.move{
	position: relative;
	display: grid;
	grid-template-columns: 48px 1fr;
	align-items: center;
	column-gap: 24px;
	min-height: 40px;
	&:before,
	&:after{
		content: "";
		grid-column: 1;
		grid-row: 1;
		justify-self: center;
		aspect-ratio: 1;
		width: 40px;
		z-index: 1;
	}
	&:before{
		background: #b6d1e6;
		border-radius: 100%;
	}
	&:after{
		background: #fff;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>') no-repeat center / contain;
	}
	&[data-type="car"]:after{
		-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path d="M10.67,30.65c0,.91.74,1.65,1.65,1.65s1.66-.74,1.66-1.65v-2.01h-3.31v2.01ZM26.02,30.65c0,.91.74,1.65,1.66,1.65s1.65-.74,1.65-1.65v-2.01h-3.31v2.01ZM29.76,18.33H10.25c-1.51,0-2.74,1.24-2.75,2.75v3.64c0,1.51,1.24,2.74,2.75,2.75h19.51c1.51,0,2.74-1.24,2.74-2.75v-3.64c0-1.51-1.24-2.74-2.74-2.75ZM12.28,24.84c-1.07,0-1.94-.87-1.94-1.94s.87-1.94,1.94-1.94,1.94.87,1.94,1.94-.86,1.94-1.94,1.94ZM22.17,24.54h-4.34c-.26,0-.47-.21-.47-.47s.21-.48.47-.48h4.34c.26,0,.47.21.47.48s-.21.47-.47.47ZM22.17,22.28h-4.34c-.26,0-.47-.21-.47-.47s.21-.47.47-.47h4.34c.26,0,.47.21.47.47s-.21.47-.47.47ZM27.72,24.84c-1.07,0-1.94-.87-1.94-1.94s.87-1.94,1.94-1.94,1.94.87,1.94,1.94-.87,1.94-1.94,1.94ZM11.94,17.15c.1.05.21.08.33.08s.23-.03.33-.08c.28-.13.47-.4.47-.73v-.79c0-1.92,1.56-3.48,3.48-3.48h6.88c1.92,0,3.48,1.56,3.48,3.48v.79c0,.33.2.6.48.73.1.05.21.07.33.07s.23-.03.33-.07c.28-.13.48-.4.48-.73v-.79c0-2.7-2.1-4.9-4.75-5.07,0-.01,0-.02,0-.04v-.88c0-1.18-.96-2.14-2.14-2.14h-3.29c-1.18,0-2.14.96-2.14,2.14v.88s0,.02,0,.04c-2.65.18-4.75,2.38-4.75,5.07v.79c0,.32.19.6.47.73Z"/></svg>');
	}
	&[data-type="bicycle"]:after{
		-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path d="M25.09,13.94c1.52,0,2.75-1.23,2.75-2.75s-1.23-2.75-2.75-2.75-2.75,1.23-2.75,2.75,1.23,2.75,2.75,2.75ZM22.69,21.56l-2.77-1.77.63-1.07-1.33-1.66c-.16-.2-.27-.42-.35-.65l-1.92,3.07c-.19.3-.26.66-.18,1.01.08.35.29.65.58.84l2.82,1.8-2.38,4.13c-.37.64-.15,1.45.49,1.82.21.12.44.18.66.18.46,0,.91-.24,1.16-.67l3.02-5.23c.36-.62.16-1.41-.44-1.79ZM28.43,18.99c0-.74-.6-1.33-1.33-1.33h-2.28l-2.56-3.18c-.46-.57-1.3-.67-1.87-.21-.57.46-.67,1.3-.2,1.87l2.96,3.68c.25.32.64.5,1.04.5h2.92c.74,0,1.33-.6,1.33-1.33ZM29.14,22.39c-.33,0-.65.04-.97.1l1.7,4.17c.16.4-.03.86-.43,1.03-.1.04-.2.06-.3.06-.31,0-.61-.19-.73-.49l-1.69-4.17c-1.29.81-2.15,2.24-2.15,3.87,0,2.52,2.05,4.57,4.57,4.57s4.57-2.05,4.57-4.57-2.05-4.57-4.57-4.57ZM10.5,27.32c-.13-.27-.1-.59.08-.83l2.72-3.59c-.63-.32-1.33-.51-2.09-.51-2.52,0-4.57,2.05-4.57,4.57s2.05,4.57,4.57,4.57c2.26,0,4.12-1.63,4.5-3.78h-4.5c-.3,0-.57-.17-.71-.44ZM12.79,26.18h2.91c-.15-.89-.57-1.69-1.16-2.32l-1.76,2.32ZM19.47,13.49c.14-.22.08-.51-.14-.65l-1.45-.93c-.22-.14-.51-.08-.65.14l-2.63,4.09c-.14.22-.08.51.14.65l1.45.93c.22.14.51.08.65-.14l2.63-4.09Z"/></svg>');
	}
	&[data-type="bus"]:after{
		-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path d="M13.02,31.35c0,.93.75,1.68,1.68,1.68s1.68-.75,1.68-1.68v-1.88h-3.36v1.88ZM23.62,31.35c0,.93.75,1.68,1.68,1.68s1.68-.75,1.68-1.68v-1.88h-3.36v1.88ZM26.38,7.5h-12.76c-1.53,0-2.78,1.26-2.79,2.79v15.13c0,1.53,1.26,2.78,2.79,2.79h12.76c1.53,0,2.78-1.26,2.79-2.79v-15.13c0-1.53-1.26-2.78-2.79-2.79ZM17.23,9.09h5.55c.53,0,.96.43.96.96s-.43.96-.96.96h-5.55c-.53,0-.96-.43-.96-.96s.43-.96.96-.96ZM13.22,14.25c0-.96.79-1.74,1.75-1.74h10.06c.94,0,1.74.8,1.74,1.75v4.05c0,.94-.8,1.74-1.75,1.74h-10.06c-.94,0-1.74-.8-1.74-1.74v-4.05ZM14.7,25.97c-.97,0-1.76-.79-1.76-1.76s.79-1.76,1.76-1.76,1.75.79,1.75,1.76-.78,1.76-1.75,1.76ZM25.3,25.97c-.97,0-1.75-.79-1.75-1.76s.78-1.76,1.75-1.76,1.76.79,1.76,1.76-.79,1.76-1.76,1.76Z"/></svg>');
	}
	&[data-type="ship"]:after{
		-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path d="M22.08,7.75c0-.35-.29-.64-.64-.64h-2.89c-.35,0-.64.29-.64.64v2.32h4.16v-2.32ZM20.03,18.52l8.15,1.65v-7.31c0-.79-.64-1.43-1.43-1.43h-13.51c-.79,0-1.43.64-1.43,1.43v7.31l8-1.62.22-.03ZM24.7,13.78c.92,0,1.67.75,1.67,1.67s-.75,1.67-1.67,1.67-1.67-.75-1.67-1.67.75-1.67,1.67-1.67ZM15.3,17.12c-.92,0-1.67-.75-1.67-1.67s.75-1.67,1.67-1.67,1.67.75,1.67,1.67-.75,1.67-1.67,1.67ZM18.33,15.45c0-.92.75-1.67,1.67-1.67s1.67.75,1.67,1.67-.75,1.67-1.67,1.67-1.67-.75-1.67-1.67ZM11.16,29.04c.75.18,1.85.39,3.7.39,2.46,0,3.68-.36,4.77-.68l.19-.06c1.4-.42,2.85-.85,5.71-.85,1.49,0,2.74.12,3.92.37.92-1.43,1.44-3.08,1.71-4.46.15-.76-.35-1.51-1.12-1.67l-10-2.04-10.07,2.04c-.77.16-1.27.91-1.12,1.69.36,1.8,1.06,3.95,2.32,5.27ZM32.85,30.82c-.08-.13-.2-.21-.35-.25-.53-.12-1-.26-1.48-.4-1.35-.4-2.75-.82-5.5-.82s-4.14.42-5.49.82l-.18.05c-1.37.41-2.61.72-4.99.72-2.59,0-3.84-.37-5.18-.77-.62-.18-1.26-.37-2.03-.52h-.11c-.27-.01-.49.18-.54.44-.06.3.14.59.44.65.71.14,1.3.31,1.92.5,1.35.4,2.75.82,5.49.82,2.53,0,3.9-.35,5.31-.76l.19-.05c1.33-.4,2.59-.77,5.17-.77s3.85.37,5.19.77c.49.15.99.29,1.54.42.04,0,.09.01.13.01.26,0,.48-.18.54-.43.03-.14,0-.29-.07-.42Z"/></svg>');
	}
	&[data-type="train"]:after{
		-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path d="M14.75,29.17l-3.08,4.95c-.22.39-.09.88.3,1.11.13.07.27.11.41.11.28,0,.55-.15.7-.41l3.54-5.74h-1.52c-.12,0-.23,0-.35-.02ZM25.25,29.17c-.11,0-.23.02-.34.02h-1.52l3.54,5.74c.15.26.42.41.7.41.14,0,.28-.04.41-.11.39-.22.52-.72.3-1.11l-3.08-4.95ZM29.17,11.77c0-2.34-1.93-4.26-4.26-4.27h-9.8c-2.34,0-4.26,1.92-4.26,4.27v12.1c0,2.34,1.92,4.26,4.26,4.26h9.8c2.34,0,4.26-1.92,4.26-4.26h0v-12.1ZM15.07,26.1c-1.08,0-1.99-.91-2-2,0-1.08.92-2,2-2s1.99.92,2,2c0,1.08-.92,2-2,2ZM24.9,26.1c-1.08,0-1.99-.91-2-2,0-1.08.92-2,2-2s1.99.92,2,2c0,1.08-.92,2-2,2ZM26.9,16.41c0,1.08-.92,1.99-2,2h-9.8c-1.08,0-1.99-.92-2-2v-4.64c0-1.1.9-2,2-2h9.8c1.08,0,1.99.92,2,2v4.64Z"/></svg>');
	}
	&[data-type="walk"]:after{
		-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path d="M19.83,13.45c1.58,0,2.86-1.28,2.86-2.86s-1.28-2.86-2.86-2.86-2.86,1.28-2.86,2.86,1.28,2.86,2.86,2.86ZM18.29,19.41v2.96s-6.25,7.79-6.25,7.79c-.53.66-.42,1.63.24,2.16.28.23.62.34.96.34.45,0,.9-.2,1.2-.57h0s5.12-6.39,5.12-6.39l5.41,6.45c.3.36.74.55,1.18.55.35,0,.7-.12.98-.36.65-.55.74-1.52.19-2.16l-9.02-10.76ZM20.97,15.63s-.08-.08-.12-.11c-.03-.03-.06-.06-.1-.08-.05-.04-.11-.07-.16-.1-.03-.01-.05-.03-.08-.04-.07-.03-.14-.06-.21-.08-.02,0-.04-.01-.05-.02-.08-.02-.16-.04-.25-.05-.01,0-.02,0-.03,0-.04,0-.08-.01-.12-.01-.05,0-.1,0-.16.02h0c-.77.08-1.38.72-1.38,1.51v.56s3.84,4.58,3.84,4.58c.29.35.72.55,1.18.55h2.95c.85,0,1.54-.69,1.54-1.53s-.69-1.53-1.54-1.53h-2.23l-3.01-3.59s-.03-.03-.05-.05ZM14.45,22.34h2.12c.33,0,.59-.27.59-.59v-6.03c0-.33-.27-.59-.59-.59h-2.11c-.16,0-.31.06-.42.17-.11.11-.17.26-.17.42v6.03c0,.16.06.31.17.42.11.11.26.17.42.17Z"/></svg>');
		
	}
	&[data-type="plane"]:after{
		-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path d="M12.47,30.22c-.03.17.02.34.15.47l2.13,2.13c.27.27.74.17.87-.2l2.79-9.07-4.53-4.53-1.41,11.2ZM32.82,14.75l-2.14-2.14c-.12-.12-.3-.18-.47-.15l-11.2,1.41,4.53,4.53,9.07-2.79c.36-.13.47-.6.2-.87ZM29.08,21.9c-.12-.12-.3-.18-.47-.14l-3.21.62-3.61-3.61-4.53-4.53-4.23-4.23c-.83-.83-2.18-.83-3.02,0-.83.83-.83,2.18,0,3.02l4.23,4.23,4.53,4.53,3.61,3.61-.62,3.21c-.03.17.02.35.14.47l2.15,2.14c.29.29.78.16.88-.24l1.29-4.77,4.77-1.29c.39-.11.52-.6.24-.88l-2.15-2.14Z"/></svg>');
	}
}

.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;
	}
}