@charset "utf-8";

/* SECTION MP4 ////////////////////////////////////////////////////////////////////////////////////////////////////*/

#mp4 .mp4-body {

	> li {

		.mp4 {
			width: 100%;
			video {
				display: block;
				width: 100%;
			}
		}

		.mp4 + .note:has(.lead, .body) {
			margin-top: 10px;
		}

		.head + .body {
			margin-top: 5px;
			padding-top: 5px;
			border-top: 1px solid #000;
		}
	}

}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@media screen and (max-width:768px){
/************************************************************************************************************************/

#mp4 .mp4-body {

	display: flex;
	flex-direction: column;
	gap: 15px;

}

/************************************************************************************************************************/
}

@media screen and (min-width:769px){
/************************************************************************************************************************/

#mp4 .mp4-body {

	display: flex;
	flex-wrap: wrap;
	gap: 15px;

	> li {
		width: calc((100% - 30px) / 3);
	}

}

/************************************************************************************************************************/
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/