/**
 * ライラック株式会社
 * トップページ
 * YouTubeショート
 */

.lilac-home-youtube-shorts {
	width: 100%;
	margin: 0;
	padding:
		clamp(64px, 7.5vw, 100px)
		20px;
	background:
		linear-gradient(
			135deg,
			#ffffff 0%,
			#faf8ff 52%,
			#f4f6ff 100%
		);
}

.lilac-home-youtube-shorts__inner {
	width: min(100%, 1180px);
	margin: 0 auto;
}

.lilac-home-youtube-shorts__header {
	max-width: 820px;
	margin:
		0 auto
		clamp(34px, 4vw, 48px);
	text-align: center;
}

.lilac-home-youtube-shorts__label {
	margin: 0 0 12px;
	color: #7653a6;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.18em;
}

.lilac-home-youtube-shorts__title {
	margin: 0;
	color: #2f2935;
	font-size: clamp(32px, 4.8vw, 50px);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 0.04em;
}

.lilac-home-youtube-shorts__description {
	margin: 22px 0 0;
	color: #66606b;
	font-size: clamp(15px, 2vw, 17px);
	line-height: 2;
}

.lilac-home-youtube-shorts__visual {
	width: min(100%, 1080px);
	margin: 0 auto;
	border: 1px solid rgba(118, 83, 166, 0.12);
	border-radius: 28px;
	box-shadow:
		0 22px 60px rgba(65, 51, 82, 0.12);
	overflow: hidden;
}

.lilac-home-youtube-shorts__image-link {
	display: block;
	width: 100%;
	text-decoration: none;
}

.lilac-home-youtube-shorts__image {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	object-fit: cover;
	object-position: center;
	transition:
		transform 0.35s ease,
		filter 0.35s ease;
}

.lilac-home-youtube-shorts__image-link:hover
	.lilac-home-youtube-shorts__image,
.lilac-home-youtube-shorts__image-link:focus-visible
	.lilac-home-youtube-shorts__image {
	transform: scale(1.015);
	filter: brightness(1.02);
}

.lilac-home-youtube-shorts__actions {
	display: flex;
	justify-content: center;
	margin:
		clamp(26px, 3.5vw, 36px)
		0 0;
}

.lilac-home-youtube-shorts__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-width: min(100%, 360px);
	padding: 17px 28px;
	background:
		linear-gradient(
			135deg,
			#7e5caf 0%,
			#68438f 100%
		);
	border-radius: 999px;
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
	box-shadow:
		0 14px 34px rgba(103, 67, 143, 0.22);
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		filter 0.25s ease;
}

.lilac-home-youtube-shorts__button:hover,
.lilac-home-youtube-shorts__button:focus-visible {
	color: #ffffff;
	text-decoration: none;
	transform: translateY(-3px);
	box-shadow:
		0 18px 42px rgba(103, 67, 143, 0.28);
	filter: brightness(1.04);
}

.lilac-home-youtube-shorts__button-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #ffffff;
	color: #e53434;
	font-size: 13px;
	line-height: 1;
}

.lilac-home-youtube-shorts__button-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	font-size: 17px;
	line-height: 1;
	transition: transform 0.25s ease;
}

.lilac-home-youtube-shorts__button:hover
	.lilac-home-youtube-shorts__button-arrow,
.lilac-home-youtube-shorts__button:focus-visible
	.lilac-home-youtube-shorts__button-arrow {
	transform: translateX(4px);
}

.lilac-home-youtube-shorts__note {
	margin: 14px 0 0;
	color: #8a838e;
	font-size: 13px;
	line-height: 1.7;
	text-align: center;
}

@media (max-width: 767px) {

	.lilac-home-youtube-shorts {
		padding:
			clamp(52px, 14vw, 72px)
			16px;
	}

	.lilac-home-youtube-shorts__header {
		margin-bottom: 28px;
	}

	.lilac-home-youtube-shorts__title {
		font-size: clamp(29px, 8vw, 39px);
	}

	.lilac-home-youtube-shorts__description {
		margin-top: 18px;
		font-size: 15px;
		line-height: 1.9;
	}

	.lilac-home-youtube-shorts__pc-break {
		display: none;
	}

	.lilac-home-youtube-shorts__visual {
		border-radius: 20px;
	}

	.lilac-home-youtube-shorts__actions {
		margin-top: 24px;
	}

	.lilac-home-youtube-shorts__button {
		width: 100%;
		min-width: 0;
		padding: 16px 20px;
		font-size: 15px;
	}

	.lilac-home-youtube-shorts__note {
		margin-top: 12px;
	}

}

@media (prefers-reduced-motion: reduce) {

	.lilac-home-youtube-shorts__image,
	.lilac-home-youtube-shorts__button,
	.lilac-home-youtube-shorts__button-arrow {
		transition: none;
	}

}