@charset "UTF-8";

/*youtube*/
#youtube
{
	width: 100%;
	background: #4DA4BF;
	padding: 11.6rem 0;
}

#youtube .container
{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

#youtube h2
{
	color: #fff;
}

#youtube .container .item
{
	width: 387px;
	height: 234px;
	margin: 0 4.8rem;
}

#youtube .container iframe
{
	width: 100%;
	height: 100%;
}

#youtube .container .item p
{
	font-size: 1.6rem;
	color: #fff;
	padding-top: 1rem;
}

/*collaboration*/
#collaboration
{
	width: 100%;
	padding: 11.6rem 0;
	background: #E6E6E6;
}

#collaboration .container
{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

#collaboration a
{
	width: 391px;
	margin: 0 3rem;
}

@media screen and (max-width:768px)
{
	#youtube
	{
		padding: 3.5rem 0 2rem
	}

	#youtube .container
	{
		width: 80%;
	}

	#youtube .container .item
	{
		width: 100%;
		margin-bottom: 2rem;
		margin: 0 auto;
	}

	#youtube .container iframe
	{
		display: block;
		width: 100%;
		height: calc(100vw*0.5);
	}

	#youtube .container .item p
	{
		padding-top: 0.5rem;
	}

	#collaboration
	{
		padding: 3.5rem 0 2rem
	}

	#collaboration .container
	{
		width: 85%;
	}

	#collaboration a
	{
		margin: 0 auto 2rem;
	}
}