/**
 * サムネイル動画用スタイル
 * thumbnail-video.css
 */

/* ===================================
   デフォルト：高さ固定版（interview等）
   =================================== */

/* 動画サムネイルラッパー */
.thumbnail-video-wrapper {
	position: relative;
	overflow: hidden;
	width: 100%;
	min-height: 217px;
}

/* 動画サムネイル */
.thumbnail-video-wrapper .thumbnail-video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: auto;
	min-height: 217px;
	object-fit: cover;
}

/* ポスター画像（imgタグ用） */
.thumbnail-video-wrapper .thumbnail-poster {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	min-height: 217px;
	object-fit: cover;
	transition: opacity 0.3s ease;
	z-index: 2;
}

/* ===================================
   幅100%・高さauto版（TOP、movie一覧）
   最低高さ113px
   =================================== */

.thumbnail-video-wrapper.is-auto-height {
	min-height: 113px;
	width: 100%;
}

.thumbnail-video-wrapper.is-auto-height .thumbnail-video {
	position: relative;
	top: auto;
	left: auto;
	transform: none;
	display: block;
	width: 100%;
	height: auto;
	min-height: 113px;
	object-fit: cover;
}

.thumbnail-video-wrapper.is-auto-height .thumbnail-poster {
	position: absolute;
	top: 0;
	left: 0;
	transform: none;
	width: 100%;
	height: 100%;
	min-height: 113px;
	object-fit: cover;
	transition: opacity 0.3s ease;
	z-index: 2;
}

/* ===================================
   共通：再生アイコン
   =================================== */

.thumbnail-video-wrapper .play-icon {
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 36px;
	height: 36px;
	background-color: rgba(128, 128, 128, 0.8);
	border-radius: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.3s ease;
}

.thumbnail-video-wrapper .play-icon::before {
	content: '';
	display: block;
	width: 0;
	height: 0;
	margin-left: 3px;
	border-style: solid;
	border-width: 7px 0 7px 12px;
	border-color: transparent transparent transparent #ffffff;
}

/* ホバー時：ポスターと再生アイコンを非表示 */
.thumbnail-video-wrapper:hover .thumbnail-poster,
.thumbnail-video-wrapper:hover .play-icon {
	opacity: 0;
}

.l-homenews__contents > ul > li > .l-homenews__contentsset > p.l-homenews__contentsnew {
    z-index:100;
}