@charset "utf-8";

/* CSS Document */

@import "reset.css";
@import "clearfix.css";

/* -----------------------------------------------common */
body {  font-family: 'Noto Sans JP', sans-serif;  display: block;}
main {
	width:100%;	
/*	padding-bottom: 50px;	*/
}
 a, a:link, a:visited {
	color:#333434;
	text-decoration:none;
    cursor: pointer;
}
a:hover {
/*	color:#333434;*/
	text-decoration:none;
	opacity: .8;
}
 video {
	 width:640px;
	 height:362px;
	background: black;
}
.video_wrap {
	padding: 10px;
	background:#f2ebe0;
	margin-top: -6px;
}
.video_wrap .gray_wrap {
	background:#f4f3ef;	
	border-radius: 10px;
	padding: 20px;
	margin-bottom:30px;
}
.video_wrap .gray_wrap:last-child {
	margin-bottom:0;
}
.video_wrap .video_area .left {
	width: 43%;
	text-align: center;
	display: block;
}
.video_wrap .video_area .left img {
	max-width: 100%;
	display: inline-block;
}
.video_wrap .video_area {
/*	margin:20px 0 0 0;*/
}
.video_wrap .video_area .title_box{
	padding: 10px 20px 10px 55px;
	border-bottom:2px solid #f4f3ef;
}
.video_wrap .video_area .title{
	display: inline-block;
	position:relative;
}
.video_wrap .video_area .title:before {
    position: absolute;
    top: 9%;
    left: -15%;
    content: '\f04e';
    font-family: "font awesome 5 free";
    font-weight: 900;
    color: #EC7832;
}
/*.video_wrap .video_area .title:before{
	content:"";
	position:absolute;
	top: 18px;
	left: 30px;
	width:15px;
	height:11px;
	background: url(../img/video/icon_skip.png) no-repeat center center;
    background-size: auto;
	background-size: contain;
}*/
.video_wrap .video_area .right {
	width: 55%;
	background:#fff;
}
.video_wrap .video_area ul {
	height:135px;
	overflow-x: hidden;
	overflow-y: scroll;
	white-space: nowrap;
}
/* スクロールの幅の設定 */
.video_wrap .video_area ul::-webkit-scrollbar {
  	width: 10px;
}

/* スクロールの背景の設定 */
.video_wrap .video_area ul::-webkit-scrollbar-track {
	background:#fff;
}

/* スクロールのつまみ部分の設定 */
.video_wrap .video_area ul::-webkit-scrollbar-thumb {
	background: #ec7832;
　　border-radius: 10px;
}
.video_wrap .video_area .text {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
	width: 200px;
	white-space: normal;
}
.video_wrap .video_area li img{
	display: inline-block;
    vertical-align: middle;
	max-height: 44px;
}
.video_wrap .video_area li {
	
}
.video_wrap .video_area li a{
	display:block;
	padding: 10px 30px;
}
.link_btn {
	display: inline-block;
    width: 160px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: #fff !important;
	padding: 5px 0 5px 15px;
	margin: 15px auto 0;
	background:#ec7832;
    background-position: 86% center;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;	
	position:relative;
	z-index:0;
}
.link_btn:before {
    position: absolute;
    top: 20%;
    left: 17%;
    content: '\f144';
    font-family: "font awesome 5 free";
    font-weight: 900;
    color: #fff;
}
@media screen and (max-width: 600px) {
	body {
		width: 350px;
	}
	main {
		width: 100%;
	}
/*
	iframe,
	video {
		width: 100% !important;
		height: auto !important;
	}
*/
	iframe,
	video {
		width: 350px !important;
		height: 200px !important;
	}
	.video_wrap .video_area .left {
		float: none !important;
		width: 100%;
	}
	.video_wrap .video_area .left a:not(.link_btn) {
		display: none;
	}
	.link_btn {
		margin-top: 0;
		margin-bottom: 10px;
/*
		width: 100%;
		box-sizing: border-box;
*/
	}
	.link_btn:before {
		position: absolute;
		top: 20%;
		left: 17%;
		content: '\f144';
		font-family: "font awesome 5 free";
		font-weight: 900;
		color: #fff;
	}
	
	.video_wrap .video_area .right {
		float: none !important;
		width: 100%;		
	}
	.video_wrap .video_area .title_box {
		padding: 5px 20px 5px 55px; 
	}
/*
	.video_wrap .video_area ul {
		height: 200px;
	}
*/
	.video_wrap .video_area ul {
		height: 150px;
	}
	.video_wrap .video_area .text {
		width: 145px;
	}
}
@media screen and (max-width: 340px) {
	body {
		width: 300px;
	}
	iframe,
	video {
		width: 300px !important;
		height: 170px !important;
	}
	.video_wrap .video_area ul {
		height: 180px;
	}
	
}