@charset "UTF-8";

main.video {
                     padding: 16px;
}

#video-player{
	margin:20px auto 20px;
	display:flex;
	background-color:#000;
}

/*上書きCSS*/
/*プレイヤー*/
.disp-video-area{
	/*width:70%;*/
	aspect-ratio: 16/9;
	overflow: hidden;
}
.disp-video-area.single-player{
	width:100%;
}
.disp-video-area.multiple-player{
	width:70%;
	display:flex;
}
.disp-video-area iframe{
	display: block;
	border: none;
	margin: 0;
	padding: 0;
	width:100%;
	aspect-ratio: 16/9;
	vertical-align: top;
	background-color: #fff;
}
/*プレイリスト*/
#video-playlist.playlist-area{
	height:382px;
	font-size:0.9em;
	color:#888888;
	flex:1;
	over-flow-x:hidden;
	overflow-y:auto;
	background-color:rgb(45,45,45);
}
/*プレイリスト li*/
ol.playlist-item-list{
	margin:0;
	padding:0;
	list-style-type: none;
}
ol.playlist-item-list li{
	margin-bottom:0;
	padding:8px 0 8px 8px;
	word-wrap:break-word;
	line-height:1.5em;
	background-color:rgb(45,45,45);
	border-bottom:1px solid rgb(67,67,67);
}
ol.playlist-item-list li:hover{
	cursor: pointer;
}
/* 現在再生中のアイテムのスタイル */
.playlist-item-list li[data-current="true"] {
	color:#bbbbbb;
	background-color: rgb(56,56,56);
}
/*読み込みエラー*/
#modal {
	display: none;
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9999;
}
#modal-content {
	background: white;
	padding: 20px;
	border-radius: 8px;
	width: 40%;
	margin: 150px auto;
	text-align: center;
}
#retryBtn, #closeBtn {
	padding: 6px 20px;
	white-space: nowrap;
	align-items: center;
	border-radius: 2px;
	color:#fff;
	font-size:0.75rem;
	border:1px solid #005cc5;
	text-decoration: none;
	transition: background-color 0.5s;
}
#retryBtn{
	margin-right:10px;
	background-color: #005cc5;
}
#retryBtn:hover{
	color:#005cc5;
	background-color: #fff;
	cursor: pointer;
}
#closeBtn{
	color:#000;
	background-color: #999;
	border:1px solid #999;
}
#closeBtn:hover{
	background-color: #fff;
	cursor: pointer;
}

#closeModalBtn {
	position: absolute;
	top: 8px;
	right: 12px;
	font-size: 18px;
	background: none;
	border: none;
	color: #999;
	cursor: pointer;
}

#closeModalBtn:hover {
	color: #333;
}

@media screen and (max-width:1000px){
	main.video{
		padding: 0;
	}

	.Content{
		margin:0 20px;
	}
	#video-player{
		width:96%;
		flex-wrap:wrap;
	}
	/*#videog-videos{*/
	/*	width:100%;*/
	/*	display:block;*/
	/*}*/
	.disp-video-area{
		width:100%;
		aspect-ratio: 16/9;
	}
	#video-playlist.playlist-area{
		width:100%;
		height:auto;
		flex: initial;
	}
	.disp-video-area.multiple-player{
		width:100%;
	}
}