/* 各動画アイテムを横並び */
div.video-list-group {
	border: 1px solid #ddd;       /* 枠線 */
	border-radius: 12px;           /* 角丸 */
	padding: 0;                 /* 内側余白 */
	background-color: #fff;
}

div.video-list-group div.video-list-group-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  padding: 15px;            /* 上下余白のみ */
  
  border-bottom: 1px solid #ddd; /* 下線を左右いっぱい */
  margin: 0 ;                   /* 横の間隔を空けない */
}



/* 最後のアイテムは線を消す */
div.video-list-group div.video-list-group-item:last-child {
	border-bottom: none;
}


/* video.js プレイヤー */
div.video-list-group div.video-list-group-item .video-js {
	border: 1px solid #ddd;
	max-width: 640px;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	margin-right: 20px;
	background: #fff;
	flex: 0 0 auto;
}


/* タイトル */
div.video-list-group div.video-list-group-item .video-title {
	flex: 1;               /* 残りの幅を使用 */
	font-size: 1.1rem;
	line-height: 1.5;
	margin: 0;             /* デフォルト余白を削除 */
}

div.video-list-group div.video-list-group-item .video-title dl dt{
	margin-bottom: .5rem;
	padding-left: 1.5em;
	text-indent: -1.5em;	
}


div.video-list-group div.video-list-group-item .video-title dl dd{
	padding-left: 4em;
	text-indent: -2.5em;
	font-size: 16px;
}

div.video-list-group div.video-list-group-item .video-title dl dd.none-indent{
	padding-left: 1.5em;
	text-indent:  0em;	
}

div.video-list-group div.video-list-group-item .video-title div.videos_time{
	font-size: 16px;
}


/* モバイル用（756px以下で縦並び） */
@media screen and (max-width: 576px) {
	div.video-list-group div.video-list-group-item {
		flex-direction: column; /* 縦積みに変更 */
		align-items: center;
		text-align: center;
	}

	div.video-list-group div.video-list-group-item .video-js {
		width: 100%;
		max-width: 100%;
		aspect-ratio: 4 / 3;    /* 縦横比維持 */
		margin-right: 0;
		margin-bottom: 10px;
	}

	div.video-list-group div.video-list-group-item .video-title {
		width: 100%;
		font-size: 1rem;
		text-align: left; /* 左寄せに変更 */
		margin-left: 0;   /* 必要に応じて余白調整 */
	}
	
	div.video-list-group div.video-list-group-item .video-title dl{
		margin-top: 10px;
	}
  
}