/* ============================================================
 * Collaceptor TOP - Video Intro Section
 *
 * 会社紹介動画セクション。
 * 16:9 アスペクト、最大幅 960px、角丸＋シャドウ＋ホバー浮き上がり。
 *
 * @version 1.0.0
 * ============================================================ */

.clpt-video-intro {
	padding: 96px 0 104px;
	background: #FFFFFF;
}

.clpt-video-intro .clpt-section__head {
	margin-bottom: 56px;
}

.clpt-video-intro__wrap {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 24px;
}

/* -----------------------------------------------------------
 * Player (16:9 wrapper)
 * --------------------------------------------------------- */
.clpt-video-intro__player {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, #0F2447 0%, #06101F 100%);
	border-radius: 16px;
	overflow: hidden;
	box-shadow:
		0 24px 60px rgba(6, 16, 31, 0.18),
		0 4px 12px rgba(6, 16, 31, 0.08);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.clpt-video-intro__player:hover {
	transform: translateY(-4px);
	box-shadow:
		0 32px 72px rgba(6, 16, 31, 0.22),
		0 6px 16px rgba(6, 16, 31, 0.1);
}

/* Aspect-ratio fallback (古いブラウザ用) */
@supports not (aspect-ratio: 16 / 9) {
	.clpt-video-intro__player {
		height: 0;
		padding-bottom: 56.25%;
	}
}

.clpt-video-intro__player iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* -----------------------------------------------------------
 * Caption
 * --------------------------------------------------------- */
.clpt-video-intro__caption {
	text-align: center;
	color: #999;
	font-size: 12px;
	margin: 20px 0 0;
	letter-spacing: 0.04em;
	font-family: "Inter", "Noto Sans JP", sans-serif;
	font-weight: 500;
}

/* -----------------------------------------------------------
 * Responsive
 * --------------------------------------------------------- */
@media (max-width: 768px) {
	.clpt-video-intro {
		padding: 64px 0 72px;
	}
	.clpt-video-intro .clpt-section__head {
		margin-bottom: 36px;
	}
	.clpt-video-intro__player {
		border-radius: 12px;
	}
	.clpt-video-intro__caption {
		font-size: 11px;
	}
}

@media (max-width: 480px) {
	.clpt-video-intro__wrap {
		padding: 0 16px;
	}
}