@charset "UTF-8";

#vision .image
{
	background-image: url(../_img/_vision.jpg);
	background-position: 50% 50%;
}

#vision .statement h2
{
	line-height: 2;
	margin-bottom: .75em;
}

#vision .diagram
{
	margin-top: 4rem;
	width: 100%;
	max-width: 500px;
	aspect-ratio: 500 / 150;
	background-image:url(../_img/diagram.svg);
	background-repeat:no-repeat;
	background-size:cover;
}

#vision .desc
{
	margin-top: 1.5rem;
}

#vision .desc > h3
{
	margin-bottom: 1em;
}

#vision .desc > p > span
{
	display:block;
}

#vision .statement li
{
	font-size: 1.1em;
}


/*//////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA SCREEN ////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

@media screen and (orientation: landscape) and (max-width: 1080px), 
screen and (orientation: portrait) and (max-width: 1200px)
{
	#vision .image
	{
		background-image: url(../_img/_vision_sp.jpg);
	}
}