@charset "utf-8";
/* ===================================================================
CSS
 file name  :  infographic.css
=================================================================== */
@media screen and (min-width: 769px) {
	h1.page_title{
		background-image: url("../images/infographic/bg_title_infographic.png");
	}
	ul.infographic_list{
		display: flex;
		flex-wrap: wrap;
		border-top: 1px solid #C6DCFF;
		border-left: 1px solid #C6DCFF;
	}
	ul.infographic_list li{
		width: 50%;
		border-right: 1px solid #C6DCFF;
		border-bottom: 1px solid #C6DCFF;
		padding: 50px 20px;
	}
	ul.infographic_list li .image{
		max-width: 440px;
		margin: auto;
	}
	ul.infographic_list.col3 li{
		width: 33.333%;
		padding: 50px 20px;
	}
	ul.infographic_list.col3 li .image{
		max-width: 220px;
		margin: auto;
	}
	ul.infographic_list li.bg{
		background: #F0F6FF;
	}
}
ul.infographic_list.col3{
	border-top: none;
}
ul.infographic_list li h2{
	text-align: center;
	font-size: 2.0rem;
	font-weight: 500;
	margin-bottom: 40px;
}
ul.infographic_list li p{
	text-align: center;
	margin-top: 30px;
}

@media screen and (max-width: 768px) {
	.contents_wrap.spfull{
		padding: 0 0 70px 0;
	}
	ul.infographic_list{
		border-top: 1px solid #C6DCFF;
		border-left: 1px solid #C6DCFF;
		max-width: 640px;
		margin: auto;
	}
	ul.infographic_list li,
	ul.infographic_list.col3 li{
		border-right: 1px solid #C6DCFF;
		border-bottom: 1px solid #C6DCFF;
		padding: 30px 30px;
	}
	ul.infographic_list li:nth-child(even){
		background: #F0F6FF;
	}
	ul.infographic_list li .image{
		max-width: 340px;
		margin: auto;
	}
	ul.infographic_list li h2{
		font-size: 1.4rem;
		margin-bottom: 20px;
	}
	ul.infographic_list li p{
		margin-top: 20px;
	}
}
@media screen and (max-width: 480px) {
	ul.infographic_list li .image{
		max-width: 300px;
		margin: auto;
	}
}