@charset "UTF-8";

.concept_text{
	max-width:70%;
	margin:0 auto;
	text-align:center;
	padding-top:40px;
}

.example_image{
	display:table;
	padding-top:40px;
	max-width:100%;
}
.example_image li{
	display:table-cell;
	text-align:center;
	max-width:25%;
}
.example_image li img{
	display:block;
	margin:0 auto 8px;
	width:80%;
	height:auto;
}

.example_image a{transition:.3s;}
.example_image a:hover{opacity:.8;}


/* 実例 */
.work{padding-top:60px;}
.work h3{font-size:24px; font-weight:normal;}
.work_wrapper{overflow:hidden; padding-top:40px;}
.work_text{
	max-width:42%;
	float:right;
}
.work_wrapper img{
	max-width:54%;
	float:left;
}
.work_text p{padding-bottom:18px;}
.work_image{
	padding-top:60px;
	display:table;
}
.work_image li{
	display:table-cell;
	widh:25%;
}
.work_image li img{
	width:80%;
	display:block;
	margin:0 auto;
}

.work_nav{display:table; margin:60px auto 30px; width:80%;}
.work_nav li{display:table-cell; width:33.3%; text-align:center;}

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

.concept_text{
	max-width:90%;
	padding-top:30px;
}

.example_image{
	display:block;
}
.example_image li{
	display:block;
	padding-bottom:30px;
	max-width:100%;
}
.example_image li img{
	display:block;
	width:72%;
}

/* 実例 */
.work{padding-top:40px;}
.work h3{font-size:20px;}
.work_wrapper{padding-top:20px;}
.work_text{
	max-width:96%;
	float:none;
	margin:20px auto 0;
}
.work_wrapper img{
	max-width:90%;
	float:none;
	display:block;
	margin:0 auto;
}
.work_text p{padding-bottom:12px;}
.work_image{
	padding-top:40px;
	display:block;
}
.work_image li{
	display:block;
	widh:100%;
}
.work_image li img{
	width:80%;
	display:block;
	margin:10px auto;
}

.work_nav{width:96%;}

}