/* CSS Document */

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

#detail{
	display: grid;
	padding: clamp(32px, calc(64 / 768 * 100dvw), 64px) 0 clamp(48px, calc(88 / 768 * 100dvw), 88px) 0;
	&:last-child{
		padding-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%);
		}
	}
	#data{
		display: contents;
	}
	#link,
	#index,
	#text,
	#topics,
	#season,
	#movie,
	#tag{
		justify-self: center;
		width: min(var(--wrap-fit), 864px);
	}
	#basic,
	#inquiry,
	#map{
		justify-self: center;
		width: min(100%, 1120px);
	}
	#basic,
	#inquiry,
	#map,
	#tag{
		order: 3;
	}
	#ski,
	#topics,
	#season,
	#movie{
		order: 2;
	}
	#photo,
	#link,
	#index{
		margin-top: clamp(24px, calc(40 / 768 * 100dvw), 40px);
	}
	#inquiry,
	#map,
	#ski,
	#topics,
	#season,
	#movie{
		margin-top: clamp(64px, calc(96 / 768 * 100dvw), 96px);
	}
	#text{
		order: 1;
		margin-top: clamp(40px, calc(64 / 768 * 100dvw), 64px);
	}
	#basic{
		margin-top: clamp(80px, calc(144 / 768 * 100dvw), 144px);
	}
	#tag{
		margin-top: clamp(32px, calc(56 / 768 * 100dvw), 56px);
	}
	#ski{
		justify-self: center;
		width: min(var(--wrap-fit), 896px);
	}
}

#title{
	display: grid;
	grid-row-gap: 8px;
	&:before{
		content: "";
		justify-self: center;
		width: min(100%, 896px);
		border-bottom: 1px solid currentColor;
	}
	& h2{
		grid-row: 1;
		justify-self: center;
		display: grid;
		grid-row-gap: 4px;
		width: min(var(--wrap-fit), 864px);
		font-weight: 900;
		font-size: clamp(20px, calc(40 / 768 * 100dvw), 40px);
		letter-spacing: 0.025em;
		&:after{
			content: attr(data-ruby);
			font-weight: 500;
			font-size: max(8px, 0.3em);
			letter-spacing: 0.2em;
		}
	}
	& p{
		justify-self: center;
		width: min(var(--wrap-fit), 864px);
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
		letter-spacing: 0.05em;
	}
}

#photo{
	display: grid;
	grid-gap: clamp(16px, calc(32 / 768 * 100dvw), 32px) 16px;
	&:not(:has(#photoSlide)){
		justify-content: center;
		& > dl,
		& > span{
			width: min(80dvw, 630px);
			&:nth-child(n+2){
				display: none;
			}
		}
		&:has(dl:only-child){
			& dl{
				width: 100%;
			}
			& dt{
				justify-self: center;
				width: min(var(--wrap-fit), 864px);
			}
			& dd{
				& img{
					border-radius: unset;
				}
			}
		}
	}
	&:has(#photoSlide){
		justify-self: center;
		width: calc(100% - clamp(16px, calc(32 / 768 * 100dvw), 32px));
		@media (min-width: 768px) {
			width: var(--wrap-fit);
		}
	}
	& dl{
		display: grid;
		grid-row-gap: clamp(8px, calc(16 / 768 * 100dvw), 16px);
	}
	& dt{
		order: 1;
		font-weight: 500;
		font-size: 14px;
		text-align: center;
	}
	& dd{
		& a{
			display: block;
		}
		& img{
			aspect-ratio: 3 / 2;
			border-radius: 4px;
			object-fit: cover;
		}
	}
	#photoSlide{
		.slick-list{
			overflow: visible;
		}
		.slick-slide{
			width: min(80dvw, 630px);
			margin-inline: clamp(8px, calc(20 / 768 * 100dvw), 20px);
		}
		.slick-arrow{
			align-self: center;
		}
	}
	#photoSlideNav{
		& dt{
			display: none;
		}
		& dd{
			& img{
				aspect-ratio: 1;
				border-radius: 100%;
				object-fit: cover;
				.slick-current &{
					outline: 2px solid var(--color-theme);
					outline-offset: -2px;
				}
			}
		}
		&:not(:has(.slick-arrow)){
			.slick-track{
				transform: unset !important;
			}
		}
		.slick-list{
			margin-inline: -8px;
		}
		.slick-slide{
			margin-inline: 8px;
		}
		.slick-arrow{
			display: none !important;
		}
	}
	@media (max-width: 767.98px) {
		&:has(#photoSlide){
			justify-self: center;
			grid-template-columns: auto 1fr auto;
		}
		#photoSlide{
			display: contents;
			.slick-list{
				grid-column: 1 / 4;
				grid-row: 1;
			}
		}
		#photoSlideNav{
			grid-column: 2;
			grid-row: 2;
		}
		.slick-arrow{
			border: 1px solid currentColor;
			color: currentColor;
			filter: none;
		}
	}
	@media (min-width: 768px) {
		#photoSlide{
			justify-self: center;
			display: grid;
			grid-template-columns: auto 1fr auto;
			&:before{
				content: "";
				grid-column: 2;
				grid-row: 1;
				aspect-ratio: 3 / 2;
				width: min(80dvw, 630px);
				background: red;
				opacity: 0.5;
				z-index: 1;
				visibility: hidden;
			}
			.slick-list{
				grid-column: 1 / 4;
				grid-row: 1 / 3;
			}
			.slick-arrow{
				grid-row: 1;
			}
			.slick-prev{
				grid-column: 1;
			}
			.slick-next{
				grid-column: 3;
			}
		}
		#photoSlide{
			.slick-arrow{
				align-self: center;
				background: white;
				border-color: transparent;
				color: var(--color-theme);
				filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
			}
		}
		#photoSlideNav{
			justify-self: center;
			width: min(100%, 624px);
		}
	}
}

#link{
	& ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	& li{
		display: contents;
	}
	& 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{
	& ul{
		display: grid;
		grid-gap: 8px clamp(16px, calc(24 / 768 * 100dvw), 24px);
		@media (max-width: 991.98px) {
			grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 16px), 200px), 1fr));
		}
		@media (min-width: 992px) {
			grid-template-columns: repeat(3, 1fr);
			&:has(li:nth-child(4)){
				grid-template-columns: repeat(4, 1fr);
			}
			&:has(li:nth-child(5)){
				grid-template-columns: repeat(5, 1fr);
			}
			&:has(li:nth-child(6)){
				grid-template-columns: repeat(6, 1fr);
			}
		}
	}
	& li{
		display: grid;
		&:after{
			content: "";
			background: var(--color-theme);
			height: 8px;
			-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;"><polyline points="0 7 1 7 7 13 13 7 14 7"/></svg>') no-repeat bottom center / 14px, url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 14 14" style="fill: none; stroke: black;"><polyline points="0 7 14 7"/></svg>') no-repeat left bottom / calc(50% - 7px) 14px, url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 14 14" style="fill: none; stroke: black;"><polyline points="0 7 14 7"/></svg>') no-repeat right bottom / calc(50% - 7px) 14px;
		}
	}
	& a{
		position: relative;
		display: grid;
		align-items: center;
		min-height: 48px;
		color: inherit;
		font-weight: 600;
		text-align: center;
		text-decoration: none;
	}
}

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

#basic,
#inquiry,
#map{
	display: grid;
	scroll-margin-top: clamp(16px, calc(32 / 768 * 100dvw), 32px);
	& hgroup{
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		grid-column-gap: clamp(16px, calc(32 / 768 * 100dvw), 32px);
		width: 100%;
		margin-bottom: clamp(24px, calc(40 / 768 * 100dvw), 40px);
		overflow: hidden;
		&:before,
		&:after{
			content: "";
			grid-row: 1;
			min-width: 48px;
			border-top: 1px solid #d9d9d9;
		}
		& h3{
			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.1em;
		}
	}
}

#basic,
#inquiry{
	&>*{
		justify-self: center;
		width: min(var(--wrap-fit), 864px);
	}
	& dl{
		display: grid;
	}
	& dt,
	& dd{
		padding: 0 16px;
		border: 0 solid #ebebeb;
	}
	& dt{
		font-weight: 700;
	}
	& dd{
		font-weight: 600;
		& ul{
			display: grid;
			grid-row-gap: 8px;
		}
	}
	@media (max-width: 767.98px) {
		& dd+dt{
			margin-top: 16px;
			padding-top: 16px;
			border-top-width: 1px;
		}
		& dd{
			margin-top: 8px;
		}
	}
	@media (min-width: 768px) {
		& dl{
			grid-template-columns: auto 1fr;
		}
		& dt,
		& dd{
			&:nth-of-type(n+2){
				border-top-width: 1px;
				margin-top: 16px;
				padding-top: 16px;
			}
		}
		& dt{
			width: calc(13em + 16px);
		}
	}
	@media (min-width: 992px) {
		& dt{
			width: calc(13em + 40px);
			padding-left: 40px;
		}
		& dd{
			padding-right: 40px;
		}
	}
}

#basic{
	& hgroup{
		& p{
			background: linear-gradient(90deg, var(--color-theme) 0.32em, currentColor 0.32em);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}
}

#inquiry{
	& hgroup{
		& p{
			background: linear-gradient(90deg, var(--color-theme) 0.75em, currentColor 0.75em);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}
	#inquiryLink{
		display: flex;
		justify-content: center;
		margin-top: clamp(24px, calc(40 / 768 * 100dvw), 40px);
		& a{
			display: grid;
			align-items: center;
			min-width: min(100%, 276px);
			min-height: 48px;
			padding: 0 24px;
			background: var(--color);
			border-radius: 24px;
			color: white;
			font-weight: 600;
			letter-spacing: 0.05em;
			text-align: center;
			text-decoration: none;
		}
	}
}

#map{
	& hgroup{
		& p{
			background: linear-gradient(90deg, var(--color-theme) 0.9em, currentColor 0.9em);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}
	#mapEmbed{
		&:not(:has(iframe)),
		& iframe{
			aspect-ratio: 3 / 2;
			width: 100%;
			max-height: 540px;
			background: snow;
		}
	}
}

#tag{
	& dl{
		display: grid;
		grid-gap: clamp(16px, calc(24 / 768 * 100dvw), 24px) 40px;
	}
	& dt{
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 16px;
		font-weight: 700;
		&:before{
			content: "";
			border-left: 2px solid  var(--color-theme);
		}
	}
	& ul{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 8px;
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		align-items: center;
		min-height: 32px;
		padding: 0 16px;
		border-radius: 16px;
		color: inherit;
		font-weight: 600;
		font-size: 14px;
		letter-spacing: 0.05em;
		text-align: center;
		text-decoration: none;
		&:not([data-area]){
			grid-template-columns: 1fr auto;
			border: 1px solid #9c9c9c;
			&:after{
				content: "";
				aspect-ratio: 1;
				width: 1em;
				background: #9c9c9c;
				transform: translateX(8px);
				-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-width: 2px;"><polyline points="5 3 9 7 5 11"/></svg>') no-repeat center / contain;
			}
		}
		&[data-area]{
			background: var(--color-theme);
			color: white;
		}
		&[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;
		}
	}
	@media (max-width: 767.98px) {
		& dd+dt{
			margin-top: 8px;
		}
		& dt:before{
			margin-block: 4px 2px;
		}
	}
	@media (min-width: 768px) {
		& dl{
			grid-template-columns: auto 1fr;
		}
		& dt{
			margin-top: 0.25em;
			&:before{
				margin-block: 4px;
			}
		}
	}
}

#topics,
#season,
#movie{
	scroll-margin-top: clamp(16px, calc(32 / 768 * 100dvw), 32px);
	& hgroup{
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-rows: auto 16px;
		column-gap: clamp(16px, calc(32 / 768 * 100dvw), 32px);
		margin-bottom: clamp(24px, calc(40 / 768 * 100dvw), 40px);
		@media (max-width: 991.98px) {
			& h2{
				grid-column: 1 / 3;
			}
		}
		&:after{
			content: "";
			grid-column: 1;
			grid-row: 2;
			align-self: center;
			min-width: 48px;
			border-bottom: 1px solid currentColor;
		}
		& h2{
			font-weight: 900;
			font-size: clamp(18px, calc(24 / 768 * 100dvw), 24px);
			letter-spacing: 0.2em;
		}
		& p{
			grid-column: 2;
			grid-row: 2;
			align-self: center;
			font-weight: 600;
			font-size: clamp(20px, calc(32 / 768 * 100dvw), 32px);
			font-family: 'Montserrat', var(--font);
			white-space: nowrap;
			letter-spacing: 0.1em;
		}
	}
}

#ski{
	&{
		display: grid;
		align-items: start;
		grid-gap: clamp(16px, calc(24 / 768 * 100dvw), 24px);
		@media (min-width: 576px) and (max-width: 991.98px) {
			grid-template-columns: 1fr 1.2fr;
		}
		@media (min-width: 992px) {
			grid-template-columns: 1fr 1.4fr 1.6fr;
			grid-template-rows: auto 1fr;
			#skiInfo,
			#skiCourse{
				grid-row: 1 / 3;
			}
			#skiInfo{
				grid-column: 1;
			}
			#skiCourse{
				grid-column: 3;
			}
		}
	}
	& h2{
		display: none;
	}
	& section{
		& h3{
			font-weight: 700;
			text-align: center;
			text-wrap: balance;
		}
		& h3+div{
			margin-top: 8px;
		}
	}
	#skiInfo{
		& h3+div{
			background: color-mix(in srgb, white, black 3.92%);
			border-radius: 8px;
			overflow: hidden;
			&{
				display: grid;
				grid-template-columns: auto 1fr;
				& dl{
					display: grid;
					grid-template-columns: subgrid;
					grid-column: 1 / 3;
					&{
						& dt{
							max-width: 8em;
							min-width: 6em;
						}
						&:has(dd:nth-of-type(2)){
							grid-template-rows: 1fr auto 1fr;
							& dt{
								grid-row: 1 / 4;
							}
							& dd{
								&:nth-of-type(1){
									grid-row: 2;
								}
								&:nth-of-type(2){
									grid-row: 3;
								}
							}
						}
					}
					&:nth-child(n+2){
						margin-top: 1px;
					}
				}
			}
			
		}
		& dl{
			text-align: center;
			text-wrap: balance;
		}
		& dt{
			display: grid;
			align-items: center;
			padding: 8px;
			background: color-mix(in srgb, white, black 10.59%);
			font-size: 14px;
			word-break: keep-all;
			overflow-wrap: anywhere;
			&:lang(ja){
				grid-template-columns: 4.6em;
				justify-content: center;
			}
		}
		& dd{
			display: grid;
			align-items: center;
			padding: 8px;
			&:nth-of-type(1){
				font-weight: 700;
			}
			&:nth-of-type(2){
				margin-top: -8px;
				padding-top: 0;
				font-size: 12px;
			}
		}
	}
	#skiData{
		& h3+div{
			padding: 24px;
			background: color-mix(in srgb, white, black 3.92%);
			border-radius: 8px;
			overflow: hidden;
			&{
				display: grid;
				padding-bottom: 56px;
				& dl{
					&:nth-child(1){
						&:before{
							margin-left: 16px;
						}
						& dd:after{
							left: 16px;
						}
					}
					&:nth-child(2){
						&:before{
							margin-left: 96px;
						}
						& dd:after{
							left: 96px;
						}
					}
				}
			}
		}
		& dl{
			text-align: right;
			text-wrap: balance;
			&{
				display: grid;
				&:before{
					content: "";
					grid-column: 1;
					grid-row: 2;
					border-bottom: 2px dotted currentColor;
				}
				& dt{
					grid-column: 1;
					grid-row: 3;
				}
				& dd{
					position: relative;
					&:after{
						content: "";
						position: absolute;
						top: 100%;
						left: 0;
						aspect-ratio: 1;
						width: 400px;
						background: currentColor;
						transform: translateX(-50%);
						-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 114 90"><polygon points="57 0 0 90 114 90 57 0"/></svg>') no-repeat center top / 100% auto;
					}
				}
			}
			&:nth-child(1){
				color: #27a7e2;
			}
		}
		& dt{
			font-weight: 700;
		}
		& dd{
			font-weight: 700;
			font-size: 24px;
			letter-spacing: 0.025em;
		}
	}
	#skiLift{
		& h3+div{
			padding: 24px;
			background: color-mix(in srgb, white, black 3.92%);
			border-radius: 8px;
			&{
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
				grid-gap: 12px;
			}
		}
		& dl{
			display: grid;
			grid-template-rows: auto 1fr;
			border-radius: 4px;
			overflow: hidden;
		}
		& dt{
			aspect-ratio: 1;
			background: color-mix(in srgb, white, black 30.59%) url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"></svg>') no-repeat center / contain;
			font-size: 0;
			.on &{
				background-color: #00968b;
			}
			[data-type="1人用"] &{
				background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="white"><path d="M21.88,27.47l.27,2.03,1.85-1.29v8.1h2.2v-10.45h-1.95l-2.37,1.61ZM33.17,25.85h-3.35v10.45h2.2v-3.85h.96c2.28,0,3.68-1.14,3.68-3.25s-1.38-3.35-3.48-3.35ZM32.72,30.44h-.71v-2.57h.71c1.07,0,1.73.2,1.73,1.31,0,1.26-.95,1.26-1.73,1.26ZM24.52,20.54c.29-.49.37-1.06.23-1.61-.08-.33-.42-.52-.74-.44-.33.08-.52.42-.44.74.06.23.03.48-.1.69-.12.21-.32.36-.55.42l-7.91,2.03.96-5.48c.06-.03.13-.06.18-.11.25-.23.26-.61.03-.86l-4.82-5.22c-.24-.29-.58-.5-.97-.58l-.12-.02c-.49-.09-1,.04-1.39.36s-.61.8-.61,1.3v5.08c0,.62.49,1.13,1.11,1.16l4.16.18-.79,4.78-7.21,1.85c-.33.08-.52.42-.44.74.07.28.32.46.59.46.05,0,.1,0,.15-.02l17.38-4.47c.55-.14,1.01-.49,1.3-.98ZM11.72,15.79v-2.9s2.77,2.99,2.77,2.99l-2.77-.09ZM9.45,6.45c-.8.45-1.09,1.47-.63,2.28.45.8,1.47,1.09,2.28.63.8-.45,1.09-1.47.63-2.28-.45-.8-1.47-1.09-2.28-.63ZM6.56,6.22v10.72c.01,1.4,1.11,2.54,2.51,2.6l2.88.13s0,0,.01,0c.13,0,.24-.1.24-.23,0-.13-.1-.25-.23-.26l-2.88-.13c-1.14-.05-2.03-.98-2.03-2.12V6.22c.47-.11.84-.53.84-1.04l10.51-2.7c.13-.03.21-.17.18-.3-.03-.13-.17-.21-.3-.18l-10.5,2.7c-.18-.37-.55-.63-.98-.63-.61,0-1.1.49-1.1,1.1,0,.02.01.04.01.06l-3.54.91c-.13.03-.21.17-.18.3.03.11.13.18.24.18.02,0,.04,0,.06,0l3.56-.91c.15.26.4.45.7.52Z"/></svg>');
			}
			[data-type="2人用"] &{
				background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="white"><path d="M28.24,28.97c0-2.21-1.65-3.33-3.51-3.33-1.44,0-2.61.6-3.51,1.74l.96,2.07c.33-.53,1.09-1.78,2.52-1.78.95,0,1.34.71,1.34,1.35,0,.87-.49,1.96-5.49,7.28h8.1v-2.01h-3.51c2.15-2.42,3.09-3.61,3.09-5.32ZM33.17,25.85h-3.35v10.45h2.2v-3.85h.96c2.28,0,3.68-1.14,3.68-3.25s-1.38-3.35-3.48-3.35ZM32.72,30.44h-.71v-2.57h.71c1.07,0,1.73.2,1.73,1.31,0,1.26-.95,1.26-1.73,1.26ZM24.52,20.54c.29-.49.37-1.06.23-1.61-.08-.33-.42-.52-.74-.44-.33.08-.52.42-.44.74.06.23.03.48-.1.69-.12.21-.32.36-.55.42l-7.91,2.03.96-5.48c.06-.03.13-.06.18-.11.25-.23.26-.61.03-.86l-4.82-5.22c-.24-.29-.58-.5-.97-.58l-.12-.02c-.49-.09-1,.04-1.39.36s-.61.8-.61,1.3v5.08c0,.62.49,1.13,1.11,1.16l4.16.18-.79,4.78-7.21,1.85c-.33.08-.52.42-.44.74.07.28.32.46.59.46.05,0,.1,0,.15-.02l17.38-4.47c.55-.14,1.01-.49,1.3-.98ZM11.72,15.79v-2.9s2.77,2.99,2.77,2.99l-2.77-.09ZM9.45,6.45c-.8.45-1.09,1.47-.63,2.28.45.8,1.47,1.09,2.28.63.8-.45,1.09-1.47.63-2.28-.45-.8-1.47-1.09-2.28-.63ZM6.56,6.22v10.72c.01,1.4,1.11,2.54,2.51,2.6l2.88.13s0,0,.01,0c.13,0,.24-.1.24-.23,0-.13-.1-.25-.23-.26l-2.88-.13c-1.14-.05-2.03-.98-2.03-2.12V6.22c.47-.11.84-.53.84-1.04l10.51-2.7c.13-.03.21-.17.18-.3-.03-.13-.17-.21-.3-.18l-10.5,2.7c-.18-.37-.55-.63-.98-.63-.61,0-1.1.49-1.1,1.1,0,.02.01.04.01.06l-3.54.91c-.13.03-.21.17-.18.3.03.11.13.18.24.18.02,0,.04,0,.06,0l3.56-.91c.15.26.4.45.7.52Z"/></svg>');
			}
			[data-type="3人用"] &{
				background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="white"><path d="M24.52,20.54c.29-.49.37-1.06.23-1.61-.08-.33-.42-.52-.74-.44-.33.08-.52.42-.44.74.06.23.03.48-.1.69-.12.21-.32.36-.55.42l-7.91,2.03.96-5.48c.06-.03.13-.06.18-.11.25-.23.26-.61.03-.86l-4.82-5.22c-.24-.29-.58-.5-.97-.58l-.12-.02c-.49-.09-1,.04-1.39.36s-.61.8-.61,1.3v5.08c0,.62.49,1.13,1.11,1.16l4.16.18-.79,4.78-7.21,1.85c-.33.08-.52.42-.44.74.07.28.32.46.59.46.05,0,.1,0,.15-.02l17.38-4.47c.55-.14,1.01-.49,1.3-.98ZM11.72,15.79v-2.9s2.77,2.99,2.77,2.99l-2.77-.09ZM9.45,6.45c-.8.45-1.09,1.47-.63,2.28.45.8,1.47,1.09,2.28.63.8-.45,1.09-1.47.63-2.28-.45-.8-1.47-1.09-2.28-.63ZM6.56,6.22v10.72c.01,1.4,1.11,2.54,2.51,2.6l2.88.13s0,0,.01,0c.13,0,.24-.1.24-.23,0-.13-.1-.25-.23-.26l-2.88-.13c-1.14-.05-2.03-.98-2.03-2.12V6.22c.47-.11.84-.53.84-1.04l10.51-2.7c.13-.03.21-.17.18-.3-.03-.13-.17-.21-.3-.18l-10.5,2.7c-.18-.37-.55-.63-.98-.63-.61,0-1.1.49-1.1,1.1,0,.02.01.04.01.06l-3.54.91c-.13.03-.21.17-.18.3.03.11.13.18.24.18.02,0,.04,0,.06,0l3.56-.91c.15.26.4.45.7.52ZM26.85,30.62c.36-.25,1.16-.78,1.16-2.07,0-1.64-1.33-2.91-3.43-2.91-1.26,0-2.46.48-3.38,1.31l.77,1.91c.58-.65,1.42-1.21,2.55-1.21.47,0,1.31.23,1.31,1.09,0,.56-.4,1.16-1.53,1.16h-1.05v1.82h1.2c1.51,0,1.96.66,1.96,1.29,0,.87-.74,1.48-2.12,1.48-1.59,0-2.5-.61-2.81-.82l-.62,1.96c.55.3,1.64.87,3.43.87,3.19,0,4.32-1.75,4.32-3.28,0-1.72-1.17-2.33-1.74-2.61ZM33.17,25.85h-3.35v10.45h2.2v-3.85h.96c2.28,0,3.68-1.14,3.68-3.25s-1.38-3.35-3.48-3.35ZM32.72,30.44h-.71v-2.57h.71c1.07,0,1.73.2,1.73,1.31,0,1.26-.95,1.26-1.73,1.26Z"/></svg>');
			}
			[data-type="4人用"] &{
				background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="white"><path d="M24.52,20.54c.29-.49.37-1.06.23-1.61-.08-.33-.42-.52-.74-.44-.33.08-.52.42-.44.74.06.23.03.48-.1.69-.12.21-.32.36-.55.42l-7.91,2.03.96-5.48c.06-.03.13-.06.18-.11.25-.23.26-.61.03-.86l-4.82-5.22c-.24-.29-.58-.5-.97-.58l-.12-.02c-.49-.09-1,.04-1.39.36s-.61.8-.61,1.3v5.08c0,.62.49,1.13,1.11,1.16l4.16.18-.79,4.78-7.21,1.85c-.33.08-.52.42-.44.74.07.28.32.46.59.46.05,0,.1,0,.15-.02l17.38-4.47c.55-.14,1.01-.49,1.3-.98ZM11.72,15.79v-2.9s2.77,2.99,2.77,2.99l-2.77-.09ZM9.45,6.45c-.8.45-1.09,1.47-.63,2.28.45.8,1.47,1.09,2.28.63.8-.45,1.09-1.47.63-2.28-.45-.8-1.47-1.09-2.28-.63ZM6.56,6.22v10.72c.01,1.4,1.11,2.54,2.51,2.6l2.88.13s0,0,.01,0c.13,0,.24-.1.24-.23,0-.13-.1-.25-.23-.26l-2.88-.13c-1.14-.05-2.03-.98-2.03-2.12V6.22c.47-.11.84-.53.84-1.04l10.51-2.7c.13-.03.21-.17.18-.3-.03-.13-.17-.21-.3-.18l-10.5,2.7c-.18-.37-.55-.63-.98-.63-.61,0-1.1.49-1.1,1.1,0,.02.01.04.01.06l-3.54.91c-.13.03-.21.17-.18.3.03.11.13.18.24.18.02,0,.04,0,.06,0l3.56-.91c.15.26.4.45.7.52ZM27.47,25.85h-2.12l-4.51,6.6v1.81h4.46v2.04h2.17v-2.04h1.25v-1.94h-1.25v-6.47ZM25.3,32.33h-2.3l2.3-3.43v3.43ZM33.17,25.85h-3.35v10.45h2.2v-3.85h.96c2.28,0,3.68-1.14,3.68-3.25s-1.38-3.35-3.48-3.35ZM32.72,30.44h-.71v-2.57h.71c1.07,0,1.73.2,1.73,1.31,0,1.26-.95,1.26-1.73,1.26Z"/></svg>');
			}
			[data-type="ロープウェイ"] &{
				background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="white"><path d="M33.6,21.28c-.06-.5-.46-.87-.94-.87h-8.9l-2.39-12.29,12.59-3.24c.22-.06.36-.29.3-.51-.06-.22-.29-.36-.51-.3l-12.54,3.22-.1-.52c-.08-.44-.49-.76-.97-.77-.47.03-.89.31-.99.74l-.26,1.15-12.87,3.31c-.22.06-.36.29-.3.51.05.19.22.32.41.32.03,0,.07,0,.1-.01l12.45-3.2-2.63,11.6H7.61c-.47,0-.88.37-.94.87l-1.53,12.12c-.08.6.37,1.13.94,1.13h28.11c.57,0,1.01-.53.94-1.13l-1.53-12.12ZM20.06,11.79l1.67,8.62h-3.63l1.95-8.62ZM13.02,29.83h-4.45v-7.53h4.45v7.53ZM19.25,29.83h-4.45v-7.53h4.45v7.53ZM25.48,29.83h-4.45v-7.53h4.45v7.53ZM31.71,29.83h-4.45v-7.53h4.45v7.53Z"/></svg>');
			}
			[data-type="エスカレーター"] &{
				background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="white"><path d="M35,16.2h-6.75l-7.21,5.58v-7.13l1.67,2.2,4.3-1.58c.52-.19.79-.76.6-1.28-.19-.52-.76-.79-1.28-.6l-2.92,1.07-1.74-2.29c-.16-.21-.39-.33-.63-.38h0s-2.89-.01-2.89-.01c-.41-.03-.82.12-1.1.41-.29.29-.44.69-.4,1.1v11.89l-5.17,4.01h-6.46c-1.38,0-2.5,1.12-2.5,2.5s1.12,2.5,2.5,2.5h8.17l16.79-13h5.04c1.38,0,2.5-1.12,2.5-2.5s-1.12-2.5-2.5-2.5ZM19.73,10.43c1.14-.45,1.7-1.74,1.25-2.88-.45-1.14-1.74-1.7-2.88-1.25-1.14.45-1.7,1.74-1.25,2.88.45,1.14,1.74,1.7,2.88,1.25Z"/></svg>');
			}
			[data-type="ゴンドラ"] &{
				background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="white"><path d="M34.28,5.32c-.06-.22-.29-.36-.51-.3l-12.14,3.12c-.34-.49-.91-.81-1.55-.81-.98,0-1.77.74-1.87,1.69l-12.18,3.13c-.22.06-.36.29-.3.51.05.19.22.32.41.32.03,0,.07,0,.1-.01l12.07-3.1c.22.6.72,1.06,1.36,1.2v2.82c-2.36.02-4.73.17-7.14.46-1.74.25-3.53,1.96-3.83,3.7-.61,4.36-.61,8.45,0,12.81.3,1.74,2.09,3.45,3.83,3.7,5.1.62,10.01.62,15.12,0,1.74-.25,3.53-1.96,3.83-3.7.61-4.36.61-8.45,0-12.81-.3-1.74-2.09-3.45-3.83-3.7-2.4-.29-4.76-.44-7.12-.46v-2.82c.83-.19,1.45-.94,1.45-1.84,0-.1-.01-.19-.03-.29l12.04-3.09c.22-.06.36-.29.3-.51ZM16.1,25.7c-2.24-.02-3.37-.03-5.61-.07-.06-2.63.08-5.26.43-7.87.08-.6.65-1.15,1.25-1.22,1.67-.18,2.5-.25,4.17-.33-.16,3.17-.24,6.32-.24,9.49ZM27.97,16.55c.6.07,1.17.62,1.25,1.22.35,2.61.49,5.24.43,7.87-3.97.06-7.95.09-11.92.08,0-3.19.05-6.37.14-9.56,3.37-.1,6.74.03,10.09.39ZM21.88,22.7l-.46-.03c-.26-.02-.52.09-.7.28-.18.19-.27.45-.24.71l.04,1.33h3.27l-.58-1.29c-.19-.56-.7-.97-1.31-1.01ZM20.18,20.91c.41.97,1.52,1.43,2.5,1.03.97-.41,1.43-1.52,1.03-2.5-.41-.97-1.52-1.43-2.5-1.03-.97.41-1.43,1.52-1.03,2.5Z"/></svg>');
			}
			[data-type="トーイング"] &{
				background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="white"><path d="M7.1,33.42s.07,0,.1,0l23.72-2.71c.77-.09,1.47-.47,1.95-1.08.49-.61.7-1.37.61-2.15-.06-.5-.5-.85-1-.79-.5.06-.85.5-.79,1,.03.3-.05.59-.23.82-.18.23-.45.38-.74.41l-10.76,1.23,1.62-5.19.99-2.99-3.57-2.94-.53-6.28,6.68.52-5.14,4.88c-.14.14-.15.37-.01.51.07.07.17.11.26.11.09,0,.18-.03.25-.1l5.61-5.33.38.03s.05,0,.07,0c.47,0,.87-.36.91-.83.01-.15-.02-.29-.08-.42l7.53-7.14c.14-.14.15-.37.01-.51s-.37-.15-.51-.01l-7.56,7.17c-.07-.02-.14-.06-.21-.06l-11.09-.87c-.41-.03-.82.12-1.1.41-.29.29-.44.69-.4,1.1l.54,6.37c.08.94.57,1.81,1.34,2.36l3.2,2.29-2.27,7.28-9.88,1.13c-.5.06-.85.5-.79,1,.05.46.44.8.9.8ZM16.67,23.44c.06.05.14.07.21.07.11,0,.22-.05.29-.15.12-.16.08-.39-.08-.5l-2.9-2.07c-.16-.12-.39-.08-.5.08-.12.16-.08.39.08.5l2.9,2.07ZM17.28,9.34c1.14-.45,1.7-1.74,1.25-2.88-.45-1.14-1.74-1.7-2.88-1.25-1.14.45-1.7,1.74-1.25,2.88.45,1.14,1.74,1.7,2.88,1.25ZM2,35.6v2.35h36v-6.36L2,35.6Z"/></svg>');
			}
			[data-type="その他"] &{
				background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="white"><path d="M12.23,7.47c-.81-.48-1.74-.72-2.81-.72s-1.99.24-2.8.71-1.44,1.17-1.9,2.08c-.45.91-.68,2.01-.68,3.3s.23,2.4.68,3.34c.45.93,1.09,1.65,1.9,2.14.81.5,1.74.74,2.8.74s2-.25,2.81-.74c.8-.5,1.43-1.21,1.89-2.14.45-.93.68-2.04.68-3.34s-.23-2.39-.68-3.3c-.45-.91-1.08-1.6-1.89-2.08ZM11.8,14.95c-.22.59-.54,1.05-.94,1.38-.41.33-.89.49-1.44.49s-1.03-.16-1.44-.49c-.41-.33-.72-.78-.94-1.38-.22-.59-.33-1.29-.33-2.1s.11-1.49.33-2.07c.22-.58.53-1.02.94-1.33.41-.3.88-.46,1.44-.46s1.03.15,1.44.46c.41.3.72.75.94,1.33.22.58.34,1.27.34,2.07s-.11,1.51-.34,2.1ZM18.78,18.85h2.62v-9.71h3.28v-2.18h-9.18v2.18h3.28v9.71ZM32.76,6.96v4.61h-4.21v-4.61h-2.61v11.89h2.61v-5.01h4.21v5.01h2.59V6.96h-2.59ZM7.56,28.81h5.06v-2.19h-5.06v-2.48h5.8v-2.18H4.95v11.89h8.58v-2.19h-5.98v-2.85ZM24.39,27.85c.41-.58.61-1.31.61-2.21s-.2-1.67-.61-2.21-.95-.91-1.64-1.14c-.69-.22-1.45-.34-2.3-.34h-4.74v11.89h2.61v-4.34h2.01l2.31,4.34h2.91l-2.71-4.78c.64-.27,1.16-.67,1.54-1.22ZM21.89,26.98c-.38.31-.93.46-1.66.46h-1.91v-3.41h1.91c.73,0,1.28.11,1.66.34s.57.65.57,1.26-.19,1.04-.57,1.34ZM34.06,27.9c-.35-.29-.77-.54-1.25-.73l-1.52-.62c-.35-.14-.66-.27-.94-.39-.27-.12-.49-.27-.65-.43-.16-.17-.24-.38-.24-.63,0-.34.14-.61.42-.81s.66-.3,1.14-.3.92.08,1.31.25c.39.17.78.4,1.17.7l1.31-1.63c-.5-.51-1.09-.9-1.75-1.16-.67-.26-1.35-.39-2.04-.39-.82,0-1.55.15-2.18.46s-1.13.73-1.49,1.26-.54,1.13-.54,1.79c0,.57.11,1.06.34,1.48.23.42.53.77.9,1.06.37.28.75.51,1.16.68l1.55.66c.35.14.66.27.91.4.26.13.46.27.6.43.14.16.22.37.22.64,0,.36-.14.65-.42.87-.28.22-.71.33-1.29.33-.49,0-1-.11-1.53-.34-.53-.23-1-.54-1.42-.92l-1.49,1.81c.6.55,1.28.98,2.05,1.27.77.29,1.55.44,2.34.44.93,0,1.72-.17,2.39-.5s1.17-.78,1.52-1.34c.35-.55.52-1.16.52-1.82,0-.56-.1-1.05-.29-1.46-.19-.4-.46-.75-.82-1.05Z"/></svg>');
			}
		}
		& dd{
			display: grid;
			align-items: center;
			padding: 8px 4px;
			background: white;
			font-weight: 700;
			font-size: 14px;
			line-height: 1;
			text-align: center;
			text-wrap: balance;
		}
	}
	#skiCourse{
		& h3+div{
			padding: 24px;
			background: color-mix(in srgb, white, black 3.92%);
			border-radius: 8px;
			overflow: hidden;
			&{
				#skiCourseGraph{
					margin-top: 32px;
				}
			}
		}
		#skiCourseData{
			& dl{
				&{
					display: grid;
					grid-template-columns: auto 1fr;
				}
			}
			& dt,
			& dd{
				display: grid;
				align-items: center;
				padding: 8px;
				border-bottom: 1px solid #ccc;
			}
			& dt{
				font-size: 14px;
			}
			& dd{
				font-weight: 700;
				text-align: right;
				text-wrap: balance;
			}
		}
		#skiCourseGraph{
			display: flex;
			flex-wrap: wrap;
			grid-row-gap: 16px;
			& dl{
				position: relative;
				display: grid;
				align-content: center;
				justify-items: center;
				padding-top: 32px;
				font-size: 14px;
				text-align: center;
				text-wrap: balance;
				&[style="width: 0%;"]{
					display: none;
				}
				&:before{
					content: "";
					position: absolute;
					top: 0;
					left: 1px;
					width: calc(100% - 2px);
					height: 28px;
					background: currentColor;
				}
				&[data-type="初級"]{
					&:before,
					& dd{
						color: #23ab3a;
					}
				}
				&[data-type="中級"]{
					&:before,
					& dd{
						color: #27a7e2;
					}
				}
				&[data-type="上級"]{
					&:before,
					& dd{
						color: #e5020f;
					}
				}
				&[data-type="スキー"]{
					&:before,
					& dd{
						color: #0f6eb7;
					}
				}
				&[data-type="スノーボード"]{
					&:before,
					& dd{
						color: #00968b;
					}
				}
				&[data-type="非圧雪"]{
					&:before,
					& dd{
						color: #87c6ed;
					}
				}
				&[data-type="圧雪"]{
					&:before,
					& dd{
						color: #206d81;
					}
				}
				&[data-type="その他"]{
					&:before,
					& dd{
						color: #f4981e;
					}
				}
			}
			& dt{
				line-height: 1.25;
			}
			& dd{
				font-weight: 700;
				white-space: nowrap;
			}
		}
	}
}

#topics{
	& hgroup{
		& p{
			background: linear-gradient(90deg, var(--color-theme) 0.62em, currentColor 0.62em);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}
}

#topicsList{
	display: grid;
	grid-row-gap: 16px;
	& section{
		display: grid;
		grid-row-gap: 8px;
		&:not(:has(>figure)):not(:first-child){
			margin-top: 16px;
		}
		&:not(:has(>figure)):not(:last-child){
			margin-bottom: 16px;
		}
		@media (max-width: 575.98px) {
			& > figure{
				grid-row: 1;
				margin-bottom: 8px;
			}
		}
		@media (min-width: 576px) {
			&:has(>figure){
				grid-template-columns: clamp(240px, calc(360 / 992 * 100dvw), 360px) 1fr;
				grid-template-rows: auto 1fr;
				column-gap: clamp(16px, calc(48 / 992 * 100dvw), 48px);
				& > h3{
					margin-top: 16px;
				}
			}
			& > figure{
				grid-row: 1 / 3;
			}
		}
		& > h3{
			font-weight: 800;
			font-size: clamp(18px, calc(20 / 768 * 100dvw), 20px);
		}
		& > figure{
			& img{
				aspect-ratio: 3 / 2;
				object-fit: cover;
				border-radius: 4px;
			}
		}
	}
}

#season{
	& hgroup{
		& p{
			background: linear-gradient(90deg, var(--color-theme) 0.7em, currentColor 0.7em, currentColor 5.8em, var(--color-theme) 5.8em, var(--color-theme) 6.1em, currentColor 6.1em);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}
}

#seasonList{
	display: grid;
	grid-row-gap: 16px;
	& section{
		display: grid;
		grid-row-gap: 8px;
		&:not(:has(figure)):before{
			content: "";
			aspect-ratio: 3 / 2;
			background: var(--dummy);
			border-radius: 4px;
		}
		@media (max-width: 575.98px) {
			&:before,
			& figure{
				margin-bottom: 8px;
			}
			& figure{
				grid-row: 1;
			}
		}
		@media (min-width: 576px) {
			grid-template-columns: clamp(240px, calc(360 / 992 * 100dvw), 360px) 1fr;
			grid-template-rows: auto 1fr;
			column-gap: clamp(16px, calc(48 / 992 * 100dvw), 48px);
			&:before,
			& figure{
				grid-row: 1 / 3;
			}
			& h3{
				margin-top: 16px;
			}
		}
	}
	& h3{
		font-weight: 800;
		font-size: clamp(18px, calc(20 / 768 * 100dvw), 20px);
	}
	& h3+div{
		display: grid;
		align-content: start;
		grid-row-gap: 16px;
		margin-top: 8px;
		@media (min-width: 576px) {
			grid-template-columns: auto 1fr;
			& dl{
				grid-column: 1 / 3;
				grid-template-columns: subgrid;
			}
			& time{
				grid-column: 1 / 3;
			}
		}
	}
	& dl{
		display: grid;
		align-items: baseline;
		@media (max-width: 767.98px) {
			grid-row-gap: 8px;
			& dt{
				justify-self: start;
			}
		}
	}
	& dt{
		position: relative;
		display: grid;
		align-items: center;
		min-height: 32px;
		margin-right: 56px;
		padding: 0 16px;
		background: #f0f5f7;
		border-radius: 16px;
		font-weight: 700;
		font-size: 14px;
		text-align: center;
		&:after{
			content: "";
			position: absolute;
			top: 50%;
			left: 100%;
			width: 24px;
			height: 3px;
			background: currentColor;
			transform: translate(16px, -50%);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 3"><circle cx="1.5" cy="1.5" r="1.5" /></svg>') no-repeat center left / 3px, url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 3"><circle cx="1.5" cy="1.5" r="1.5" /></svg>') no-repeat center / 3px, url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 3"><circle cx="1.5" cy="1.5" r="1.5" /></svg>') no-repeat center right / 3px;
		}
	}
	& dd{
		font-weight: 700;
		letter-spacing: 0.025em;
		&[data-level]{
			display: grid;
			grid-template-columns: auto 1fr;
			align-items: baseline;
			column-gap: 24px;
			&:before{
				content: "";
				aspect-ratio: 1;
				width: 1em;
				background: currentColor;
				transform-origin: left center;
				transform: translateY(0.1em) scale(1.5);
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>') no-repeat center / contain;
			}
			&[data-level="0"]:before{
				-webkit-mask-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: black; stroke-miterlimit: 10; stroke-width: 3px;"><line x1="2" y1="2" x2="22" y2="22"/><line x1="2" y1="22" x2="22" y2="2"/></svg>');
			}
			&[data-level="1"]:before{
				-webkit-mask-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: black; stroke-miterlimit: 10; stroke-width: 3px;"><polygon points="12 4 3 20 21 20 12 4"/></svg>');
			}
			&[data-level="2"]:before{
				-webkit-mask-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: black; stroke-miterlimit: 10; stroke-width: 3px;"><circle cx="12" cy="12" r="10"/></svg>');
			}
			&[data-level="3"]:before{
				-webkit-mask-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: black; stroke-miterlimit: 10; stroke-width: 3px;"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="5"/></svg>');
			}
		}
	}
	& time{
		margin-left: 16px;
		font-weight: 700;
		font-size: 14px;
	}
	& figure{
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 4px;
		}
	}
}

#movie{
	& hgroup{
		& p{
			background: linear-gradient(90deg, var(--color-theme) 0.92em, currentColor 0.92em);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}
	& iframe{
		aspect-ratio: 16 / 9;
		width: 100%;
		height: auto;
		border-radius: 8px;
	}
	.fr-view{
		margin: 24px 16px 0 16px;
	}
}

#related{
	margin-bottom: clamp(96px, calc(120 / 768 * 100dvw), 120px);
	scroll-margin-top: clamp(16px, calc(32 / 768 * 100dvw), 32px);
	& article{
		display: grid;
		margin-top: clamp(48px, calc(64 / 768 * 100dvw), 64px);
	}
	& hgroup{
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		grid-column-gap: clamp(16px, calc(24 / 768 * 100dvw), 24px);
		margin-bottom: clamp(16px, calc(32 / 768 * 100dvw), 32px);
		overflow: hidden;
		&:before,
		&:after{
			content: "";
			grid-row: 1;
			min-width: 48px;
			border-top: 1px 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.1em;
			#relatedSpot &{
				background: linear-gradient(-90deg, currentColor 2.7em, var(--color-theme) 2.7em, var(--color-theme) 3.4em, currentColor 3.4em, currentColor 7.2em, var(--color-theme) 7.2em);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			#relatedHotel &{
				background: linear-gradient(-90deg, currentColor 3.1em, var(--color-theme) 3.1em, var(--color-theme) 3.9em, currentColor 3.9em, currentColor 7.7em, var(--color-theme) 7.2em);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			#relatedBlog &{
				background: linear-gradient(-90deg, currentColor 2em, var(--color-theme) 2em, var(--color-theme) 2.8em, currentColor 2.8em, currentColor 7.1em, var(--color-theme) 7.1em);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			#relatedCourse &{
				background: linear-gradient(90deg, var(--color-theme) 0.25em, currentColor 0.25em);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			#relatedFeature &{
				background: linear-gradient(90deg, var(--color-theme) 0.7em, currentColor 0.7em);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
		@media (min-width: 992px) {
			&:before,
			&:after{
				border-top-width: 2px;
			}
		}
	}
	@media (min-width: 992px) {
		display: grid;
		grid-template-columns: 1fr 0 1fr;
		&:before,
		&:after{
			content: "";
			border: 0 solid #d9d9d9;
		}
		&:before{
			order: 1;
			grid-column: 1 / 4;
			justify-self: center;
			width: min(var(--wrap-fit), 1200px);
			border-top-width: 1px;
			transform: translateY(48px);
		}
		&:after{
			order: 2;
			justify-self: center;
			border-left-width: 1px;
			margin-top: 96px;
		}
		#relatedSpot,
		#relatedHotel,
		#relatedBlog{
			grid-column: 1 / 4;
		}
		#relatedCourse,
		#relatedFeature{
			align-self: start;
			width: min(50dvw, 686px);
			margin-top: 96px;
		}
		#relatedCourse{
			order: 2;
			justify-self: end;
		}
		#relatedFeature{
			order: 3;
		}
	}
}

#relatedSpotList,
#relatedHotelList,
#relatedBlogList,
#relatedCourseList,
#relatedFeatureList{
	display: grid;
	&:not(.slick-slider){
		justify-content: center;
		padding: 0 64px;
		& > section,
		& > span{
			&:nth-child(n+2){
				display: none;
			}
		}
	}
	&.slick-slider{
		display: grid;
		grid-template-columns: 40px 1fr 40px;
		column-gap: 24px;
		&: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(12 / 768 * 100dvw), 12px));
		}
		.slick-slide{
			margin-inline: clamp(8px, calc(12 / 768 * 100dvw), 12px);
		}
		.slick-arrow{
			align-self: center;
			width: 100%;
		}
	}
	@media (max-width: 991.98px) {
		width: calc(100% - clamp(16px, calc(32 / 768 * 100dvw), 32px));
		&.slick-slider{
			&:before{
				grid-column: 1 / 4;
			}
			.slick-list{
				grid-column: 1 / 4;
				overflow: visible;
			}
			.slick-arrow{
				grid-row: 1;
				background: white;
				&.slick-prev{
					grid-column: 1;
				}
				&.slick-next{
					grid-column: 3;
				}
			}
		}
	}
	@media (min-width: 992px) {
		width: var(--wrap-fit);
		&.slick-slider{
			&:before{
				grid-column: 2;
			}
			.slick-list{
				grid-column: 2;
			}
		}
	}
	& section{
		& 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{
			& img{
				object-fit: cover;
				border-radius: 4px;
			}
		}
	}
}

#relatedSpot,
#relatedHotel,
#relatedBlog{
	& hgroup{
		@media (min-width: 992px) {
			justify-self: center;
			width: min(var(--wrap-fit), 1200px);
			&:before{
				grid-row: 1;
				min-width: 48px;
				border-top: 2px solid currentColor;
			}
			&:after{
				content: none;
			}
			& p{
				grid-column: 3;
				grid-row: 1;
				justify-self: unset;
				display: grid;
				grid-template-columns: 1fr auto;
				align-items: center;
				grid-column-gap: clamp(16px, calc(32 / 768 * 100dvw), 32px);
				&:before{
					content: "";
					min-width: 48px;
					border-top: 2px solid currentColor;
				}
			}
		}
	}
	#relatedSpotList,
	#relatedHotelList,
	#relatedBlogList{
		justify-self: center;
		max-width: calc(1200px + 128px);
		@media (max-width: 991.98px) {
			&:not(.slick-slider){
				& > section,
				& > span{
					width: clamp(240px, calc(256 / 768 * 100dvw), 256px);
				}
			}
			&.slick-slider{
				&:before,
				.slick-slide{
					width: clamp(240px, calc(256 / 768 * 100dvw), 256px);
				}
			}
		}
		@media (min-width: 992px) {
			&:not(.slick-slider){
				grid-template-columns: repeat(3, 1fr);
			}
			&.slick-slider{
				&:before{
					width: calc((100% - (24px * 2)) / 3);
				}
			}
		}
		@media (min-width: 1366px) {
			&:not(.slick-slider){
				grid-template-columns: repeat(4, 1fr);
			}
			&.slick-slider{
				&:before{
					width: calc((100% - (24px * 3)) / 4);
				}
			}
		}
	}
}

#relatedSpotList,
#relatedHotelList,
#relatedBlogList{
	& section{
		position: relative;
		display: grid;
		grid-template-columns: calc(100% - 16px);
		justify-content: center;
		grid-row-gap: 8px;
		&:not(:has(figure)):before{
			content: "";
			background: var(--dummy);
			border-radius: 4px;
		}
		&:before,
		& figure img{
			aspect-ratio: 3 / 2;
		}
		&:before,
		& [data-fav-id],
		& figure{
			grid-column: 1;
			grid-row: 1;
		}
		&:before,
		& [data-fav-id],
		& figure{
			margin-inline: -8px;
		}
		& [data-fav-id]{
			justify-self: end;
		}
	}
	& h3{
		font-weight: 700;
		letter-spacing: 0.025em;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	& h3+div{
		display: contents;
	}
}

#relatedCourse,
#relatedFeature{
	& hgroup{
		@media (min-width: 992px) {
			justify-self: center;
			width: var(--wrap-fit);
		}
		@media (min-width: 1248px) {
			max-width: 510px;
		}
	}
	#relatedCourseList,
	#relatedFeatureList{
		justify-self: center;
		@media (max-width: 991.98px) {
			&:not(.slick-slider){
				& > section,
				& > span{
					width: clamp(240px, calc(480 / 768 * 100dvw), 480px);
				}
			}
			&.slick-slider{
				&:before,
				.slick-slide{
					width: clamp(240px, calc(480 / 768 * 100dvw), 480px);
				}
			}
		}
		@media (min-width: 992px) {
			&:not(.slick-slider){
				& > section,
				& > span{
					width: 100%;
				}
			}
			&.slick-slider{
				&:before,
				.slick-slide{
					width: 100%;
				}
			}
		}
	}
}

#relatedCourseList,
#relatedFeatureList{
	& section{
		position: relative;
		display: grid;
		grid-template-columns: calc(100% - 32px);
		justify-content: center;
		grid-row-gap: 8px;
		&:not(:has(figure)):before{
			content: "";
			background: linear-gradient(0deg, color-mix(in srgb, transparent, black 40%), transparent 50%), var(--dummy);
			border-radius: 4px;
		}
		&:before,
		& ul,
		& figure img{
			aspect-ratio: 3 / 2;
		}
		&:before,
		& p,
		& ul,
		& [data-fav-id],
		& figure{
			grid-column: 1;
			grid-row: 1;
		}
		&:before,
		& ul,
		& [data-fav-id],
		& figure{
			margin-inline: -16px;
		}
		& h3{
			margin-top: 8px;
		}
		& p{
			align-self: end;
			z-index: 1;
		}
		& [data-fav-id]{
			justify-self: end;
		}
		& ul{
			align-content: start;
			padding: 16px 56px 16px 16px;
			overflow: hidden;
			z-index: 1;
		}
	}
	& h3{
		font-weight: 700;
		letter-spacing: 0.025em;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	& h3+div{
		display: contents;
		& p{
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			max-height: calc(1.65em * 2);
			margin: 16px 8px;
			color: white;
			font-weight: 700;
			font-size: clamp(16px, calc(22 / 768 * 100dvw), 22px);
			letter-spacing: 0.1em;
			overflow: hidden;
		}
		& 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;
		}
		& 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;
			}
		}
	}
	& figure{
		position: relative;
		&:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(0deg, color-mix(in srgb, transparent, black 40%), transparent 50%);
			border-radius: 4px;
		}
	}
	& [data-type="course"]{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 8px 24px;
		& dl{
			display: flex;
			align-items: baseline;
			column-gap: 4px;
			font-size: 14px;
		}
		& dt{
			aspect-ratio: 1;
			width: 16px;
			background: currentColor;
			transform: translateY(0.2em);
			overflow: hidden;
			-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;
			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-miterlimit: 10; stroke-width: 1.6px;"><circle cx="8" cy="8" r="6.8"/><polyline points="7.6 3.6 7.6 8.4 10.8 10.8"/></svg>');
			}
			dl:nth-child(2) &{
				-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-miterlimit: 10; stroke-width: 1.6px;"><polyline points="12.73 11.83 15.1 11.83 15.1 7.09 12.26 7.09 11.31 3.25 4.69 3.25 3.74 7.09 .9 7.09 .9 11.83 3.27 11.83"/><line x1="6.11" y1="11.83" x2="9.89" y2="11.83"/><circle cx="4.69" cy="11.83" r="1.42"/><circle cx="11.31" cy="11.83" r="1.42"/></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);
	}
}