@charset "UTF-8";

#layout .inner { max-width:960px;}


.art { padding: 20px 0; text-align: left; width: 100%; max-width: 900px; margin: 0 auto; font-size: 16px;}
	.art h2 { padding: 10px 0;}
	.art p { padding:10px 0;}
		.art p img { padding: 10px 0;}

#flow { background:#F5F5F5; display: flex; justify-content: space-between; text-align: left;}
	#flow::after { display: block; content:""; align-self: stretch;}
	#flow .inner {}
	.flow { width: 100%; padding: 20px;}
		.flow h2 { font-size: 20px; padding:20px 0;}
			.flow h2 span { display: inline-block; padding: 5px 0; border-bottom: 1px solid #333}
	.list { width: 100%; padding: 10px 0; counter-increment:cnt-h3;}
		.list h3 { font-size: 20px; padding: 0 0; color: #0071D3; display: flex; justify-content: flex-start; align-items: center;}
			.list h3::before { display: inline-block; text-align: center; padding-right: 10px; white-space: nowrap; content:counter(cnt-h3); line-height: 1em; color: #BBB; font-style: italic;}

@media all and (min-width:320px) {
	/* 320px+ settings */
	#flow .inner { width: 80%; }
	#flow::after { width: 20%; background:url("images/flow.jpg") 0 0  / cover no-repeat; }
	.list p { padding:10px 0 10px 60px;}
	.list h3::before { width: 60px; font-size: 32px;}
}

@media all and (min-width:640px) {
	/* 640px+ settings */
	#flow .inner { width: 70%; }
	#flow::after { width: 30%;}
	.list p { padding:10px 0 10px 100px;}
	.list h3::before { width: 100px; font-size: 42px;}
	
}

@media all and (min-width:960px) {
	/* 960px+ settings */
	#flow .inner { width: 60%; padding:20px;}
	#flow::after { width: 40%; }
	.list p { padding:10px 0 10px 120px;}
	.list h3::before { width: 120px; font-size: 58px;}
}

@media all and (min-width:1200px) {
	/* 1200px+ settings */
	#flow .inner { width: 50%; }
	#flow::after { width: 50%; background:url("images/flow.jpg") 0 0 / auto no-repeat; }
	.flow { max-width: 520px; margin-left: auto;}
}