@charset "utf-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
#main p {
	margin-bottom: 4.8rem;
}
#main p:last-child {
	margin-bottom: 0;
}
#main .videosSec .headLine01 {
	padding-bottom: 1.2rem;
}
#main .videosSec .comJsBox .fooUl li {
	border-radius: 1.2rem;
}
#main .videosSec .comJsBox .fooUl li a {
	display: block;
	position: relative;
}
#main .videosSec .comJsBox .fooUl li a::after {
	border: 2px solid #F4A000;
	position: absolute;  
	border-radius: 1.2rem;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;  
	content: ""; 
	opacity: 0;
	transition: opacity 0.3s;
}
#main .videosSec .comJsBox .fooUl li a:hover {
}
#main .videosSec .comJsBox .fooUl .greyBox {
	background: #F8F8F8;
	padding: 1.6rem 2.4rem 2.5rem;
}
#main .videosSec .comJsBox .fooUl li p {
	font-size: 1.2rem;
	line-height: 1.6;
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}
#main .videosSec .comJsBox .fooUl li .ttl {
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.5;
	margin-bottom: 1.1rem;
}
#main .videosSec .comJsBox {
	margin-bottom: 2.4rem;
}
#main .videosSec .comJsBox .prev,
#main .videosSec .comJsBox .next {
	top: calc(50% - 4.3rem);
	width: 2.5rem;
}
#main .comJsBox .fooUl .photo .subSpan {
	bottom: 1.4rem;
	right: 1.6rem;
}
#main .videosSec {
	margin-bottom: 12rem;
}
#main .videosSec1 .comJsBox .fooUl li {
	width: 37.1rem;
}
#main .videosSec1 .comJsBox .fooUl .photo {
	aspect-ratio: 742 / 378;
}
#main .videosSec1 .comJsBox .fooUl .photo .subSpan{
	width: 6rem;
	bottom: 2.2rem;
	right: 2.2rem;
}
#main .videosSec1 .comJsBox .fooUl li .ttl {
	margin-bottom: 1.3rem;
	font-size: 2rem;
	line-height: 1.5;
}
#main .videosSec1 .comJsBox .fooUl .greyBox {
	padding: 2.2rem 3.2rem 3.3rem;
}
#main .videosSec1 .comJsBox .fooUl {
	margin-bottom: 1.5rem;
}
#main .videosSec1 .comJsBox .dotBox .dot li {
	width: 0.6rem;
	height: 0.6rem;
}
#main .videosSec1 .comJsBox .dotBox .icon {
	width: 1.8rem;
	height: 1.8rem;
}
#main .videosSec {
	margin-bottom: 6rem;
}
#main .videosSec1 {
	margin-bottom: 7.7rem;
}
#main .headLine01 {
	margin-bottom: 1.3rem;
}
@media all and (min-width: 897px) {
	#main .videosSec .comJsBox .fooUl li a:hover .greyBox {
		background-color: #FCF6EC;
	}
	#main .videosSec .comJsBox .fooUl li a:hover::after {
		opacity: 1;
	}
}

@media all and (max-width: 896px) {
	#main p {
		font-size: 1.5rem;
	}
	#main .videosSec .headLine01 {
		padding-bottom: 0.5rem;
		font-size: 2.4rem;
	}
	#main .videosSec .comJsBox .fooUl .greyBox {
		padding: 1.2rem 1.2rem;
	}
	#main .videosSec .comJsBox .fooUl li p {
		font-size: 1rem;
	}
	#main .videosSec .comJsBox .fooUl li .ttl {
		margin-bottom: 0.6rem;
		font-size: 1.3rem;
		line-height: 1.5;
	}
	#main .videosSec .comJsBox {
		margin-bottom: 2.1rem;
	}
	#main .videosSec .comJsBox .fooUl .photo {
		aspect-ratio: 220 / 112;
	}
	#main .videosSec .comJsBox .prev, #main .videosSec .comJsBox .next {
		top: calc(50% - 0.3rem);
	}
	#main .videosSec {
		margin-bottom: 6rem;
	}
	#main .videosSec1 {
		margin-bottom: 5rem;
	}
	#main .videosSec1 .comJsBox .fooUl li {
		width: 30.5rem;
	}
	#main .videosSec1 .comJsBox .fooUl .photo {
		aspect-ratio: 305 / 152;
	}
	#main .videosSec1 .comJsBox .fooUl .greyBox {
		padding: 1.5rem 1.6rem 1.8rem;
	}
	#main .videosSec1 .comJsBox .fooUl li p{
		font-size: 1rem;
	}
	#main .videosSec1 .comJsBox .fooUl li .ttl {
		font-size: 1.6rem;
	}
	#main .videosSec .text {
		font-size: 1.3rem;
		margin-bottom: 2.5rem;
	}
	#main .comLink {
		margin: 0;
	}
	#main .comLink a {
		display: inline-flex;
		padding-inline: 2rem;
		font-size: 1rem;
		min-height: 3.1rem;
	}
	#main .comLink.style .subSpan {
		padding-right: 2rem;
		background-size: 1.6rem auto;
	}
	#main .videosSec:not(.videosSec1) .comJsBox .fooUl {
		margin-left: 1.5rem;
	}
	#main .comJsBox .next img, #main .comJsBox .prev img {
		width: 1.6rem;
	}
}