/**************************************************************** 
 おすすめコースマップ */
.map-title {
	font-size: clamp(32px, 3vw, 46px);
	font-style: italic;
}

/**************************************************************** 
 おすすめコース情報 */

.course-condition {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
}
.course-condition::before {
	content: "";
	display: block;
	width: 6px;
	height: 44px;
	background: var(--main-blue);
	transform: skewX(-18deg);
	flex-shrink: 0;
}

.course-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.course-number.black {
	background: #111;
	transform: rotate(45deg);
}
.course-number.black span {
	transform: rotate(-45deg);
}
.course-number.red {
	background: #E93434;
}
.course-number.blue {
	background: #133E75;
	border-radius: 50%;
}
.course-number.green {
	background: #129900;
	border-radius: 50%;
}

.course-icon > div {
	width: 22%;
}

/**************************************************************** 
 パウダースノー */
 .bg-site-lightblue {
 	border-top: 2px solid var(--main-blue);
 	border-bottom: 2px solid var(--main-blue);
 }
 
.powder-snow-wrapper {
	position: relative;
	padding: 64px 48px;
	background: url("/common/img/texture.webp") calc(30% + -480px) 5% / cover no-repeat;
}

.fs-powder-snow {
	position: relative;
	font-size: clamp(32px, 4vw, 38px);
	font-style: italic;
	z-index: 2;
}

.snow-icon {
	position: absolute;
	top: 16px;
	left: 55%;
	z-index: 1;
}
@media (max-width: 1400px) {
	.snow-icon {
		left: 64%;
	}
}
@media (max-width: 1200px) {
	.snow-icon {
		left: 74%;
	}
}
@media (max-width: 996px) {
	.snow-icon {
		left: 80%;
	}
}
@media (max-width: 768px) {
	.powder-snow-wrapper {
		padding: 64px 16px;
		background: url("/common/img/texture.webp") calc(20% + -240px) 5% / cover no-repeat;
	}
	.snow-icon {
		top: 16px;
		right: 0px;
	}
	.snow-icon img{
		width: 88%;
	}
}

.course-image img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.main-blue-divider {
	border: 1px solid var(--main-blue);
	margin: 40px 0;
}

.course-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 30px;
	padding: 0 10px;
	border: 1px solid var(--main-navy);
}