@charset "utf-8";


/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	For SmartPhone
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* ///////////////////////////////////////////////////// */
/* ============================================ */
/* ------------------------------------ */

@media screen and (max-width:767px){

	/* ============================================ */
	.block.first .leadTxt{
		font-size:3.5vw;
		line-height:1.5;
	}
	.block.first .videosContainer .itemBox{
		width:100%;
		margin-top:7%;
	}
	.block.first .videosContainer .itemBox .srName{
		font-size:clamp(0.75rem, 1.25vw, 1.25rem);
		font-weight:300;
		text-align:center;
		font-size:3.4vw;
	}
	.block.first .videosContainer .itemBox .srName::before,
	.block.first .videosContainer .itemBox .srName::after{
		content:"−";
	}
	.block.first .videosContainer .itemBox .videoBox{
		aspect-ratio:16 / 9;
		width:100%;
		height:auto;
		margin-top:2%;
	}
	.block.first .videosContainer .itemBox .videoBox iframe{
		width:100%;
		height:100%;
	}
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	For Desktop & Tablet
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* ///////////////////////////////////////////////////// */
/* ============================================ */
/* ------------------------------------ */

@media screen and (min-width:768px){
	/* ============================================ */
	.block.first .leadTxt{
		font-size:clamp(1.0rem, 1.5vw, 1.5rem);
		line-height:1.5;
	}

	/* ------------------------------------ */
	.block.first .videosContainer{
		display:flex;
		flex-wrap:wrap;
	}
	.block.first .videosContainer .itemBox{
		width:31%;
		margin-right:3.5%;
		margin-top:3.5%;
	}
	.block.first .videosContainer .itemBox:nth-child(3n){
		margin-right:0;
	}

	.block.first .videosContainer .itemBox .srName{
		font-size:clamp(0.75rem, 1.25vw, 1.25rem);
		font-weight:300;
		text-align:center;
	}
	.block.first .videosContainer .itemBox .srName::before,
	.block.first .videosContainer .itemBox .srName::after{
		content:"−";
	}
	/*.block.first .videosContainer .itemBox .videoBox{
		position:relative;
		padding-top:56.25%;
		height:0;
	}
	.block.first .videosContainer .itemBox .videoBox iframe{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
	}*/
	.block.first .videosContainer .itemBox .videoBox{
		aspect-ratio:16 / 9;
		width:100%;
		height:auto;
		margin-top:1.5%;
	}
	.block.first .videosContainer .itemBox .videoBox iframe{
		width:100%;
		height:100%;
	}



	@media screen and (max-width:1460px){
		.block.first .videosContainer .itemBox{
			width:48.5%;
			margin-right:3%;
			margin-top:3%;
		}
		.block.first .videosContainer .itemBox:nth-child(3n){
			margin-right:3%;
		}
		.block.first .videosContainer .itemBox:nth-child(2n){
			margin-right:0;
		}
		.block.first .videosContainer .itemBox .srName{
			font-size:clamp(1rem, 1.5vw, 1.5rem);
		}
	}

	@media screen and (max-width:900px){
		.block.first .videosContainer .itemBox{
			width:100%;
			margin-right:0;
			margin-top:5%;
		}
	}
}