/* CSS Document */

.knowhow-wrapper{
	margin: 50px 0 0 0;
	width: 100%;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	justify-content: space-around;
}

.knowhow {

	width: 30%;
}





.knowhow .clearfix{
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-align-items: center;
	align-items: center;
}

.clearfix dd{
	width: 90%;
	margin: 0 auto;
}

.knowhow dl dt{
	width: 100%;
	margin: 0 auto!important;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-align-items: center;
	align-items: center;
}


.knowhow dl {
	width: 100%;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-align-items: center;
	align-items: center;
}

.knowhow dl dt {
	width: 100%;
}

.knowhow dl dt img{
	width: 60%;
}

.knowhow dl dd{
	text-align: center;
}

.tool-list{
	width: 100%;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.tool-list  figcaption{
	text-align: center;
}
.tool-list ul{
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-align-items: center;
	align-items: center;
}

#wrap #main .mistake{
	width: 100%;
}


#wrap #main .mistake div dl{
	width: 100%;
}
#wrap #main .mistake dd{
	width: 90%;
}


#wrap{}
	#wrap #main{}
		#wrap #main .section{ margin:0 0 25px;
		padding-left:15px;}
			#wrap #main .section dl{}
			#wrap #main .section dt{}
			#wrap #main .section dd{}
			#wrap #main .section .fig{}
		#wrap #main .mistake{ padding-top:40px;}
			#wrap #main .mistake dl{ float:left;
			width:410px;
			margin:0 30px 0 0;}
			#wrap #main .mistake dt{ margin:0 0 25px;}
			#wrap #main .mistake dd{}
			#wrap #main .mistake .fig{}
		#wrap #main .section h2{}
		#wrap #main .knowhow{}
			#wrap #main .knowhow h2{ margin:0 0 25px;}
			#wrap #main .knowhow dl{}
			#wrap #main .knowhow dt{ float:left;
			margin:0 43px 0 0;}
			#wrap #main .knowhow dd{ width:540px;
			float:left;}
		#wrap #main .custom{ margin:0 0 50px;}
			#wrap #main .custom dl{}
			#wrap #main .custom dt{ margin:0 0 50px;}
			#wrap #main .custom dd{}




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

								p,dt,dd,span,small,th,td,address{
									font-size: 200%!important;
								}

								address{
									text-align: center;
									margin: 10px auto;
								}

								#cont,#contwrap,.menu,.about{
									width: 100%!important;
								}

								.section,.menu ul .ph,.box,.ph{
									width: 100%;
									margin: 0 auto!important;
									display: -webkit-flex;
									display: -ms-flex;
									display: flex;
									-webkit-flex-direction: column;
									-ms-flex-direction: column;
									flex-direction: column;
									-ms-align-items: center;
									align-items: center;
								}

								.diva{
									width: 90%!important;
									margin: 20px auto!important;
									padding: 0 0 20px 0!important;
									height: auto!important;
									float: none!important;
								}

								.diva p{
									text-align: center;

								}


								.contact{
									width: 100%!important;
									display: -webkit-flex;
									display: -ms-flex;
									display: flex;
									-webkit-flex-direction: column;
									-ms-flex-direction: column;
									flex-direction: column;
									-ms-align-items: center;
									align-items: center;
								}

								.contact h2{
									text-align: center;
								}
								.contact h2 img{
									width: 50%;
									margin: 0 auto;
								}

								.contact h2 span{
									top:100px!important;
									left:0!important;
								}


								.contact .clearfix,.contact .clearfix li {
									width: 90%;
									display: -webkit-flex;
									display: -ms-flex;
									display: flex;
									-webkit-flex-direction: column;
									-ms-flex-direction: column;
									flex-direction: column;
									-ms-align-items: center;
									align-items: center;
								}

								.contact .clearfix{
									padding: 20px!important;
									height: 400px!important;
								}

								.contact .clearfix li {
									position: relative;
									top:50px;
								}

								.mail a{
									width: 100%;
									text-align: center;
								}

								.contact .clearfix li img,.mail a img{
									width: 70%!important;
									margin: 0 auto;
								}

								.ph img{
									width: 100%;
								}

								.box .diva{
									display: -webkit-flex;
									display: -ms-flex;
									display: flex;
									-webkit-flex-direction: column;
									-ms-flex-direction: column;
									flex-direction: column;
								}

								.box .diva dl{
									width: 90%!important;
									margin: 0 auto;
									text-align: center;
								}

								.box .diva .ph img{
									width: 95%!important;
									margin: 0 auto;
								}

								.recruit{
									width: 100%!important;
								}

								#foot .inner{
									display: -webkit-flex;
									display: -ms-flex;
									display: flex;
									-webkit-flex-direction: column;
									-ms-flex-direction: column;
									flex-direction: column;
									-ms-align-items: center;
									align-items: center;
								}

								#foot .inner .l{
									width: 100%!important;

								}

								#foot .inner .l tr{
									width: 90%!important;
									margin: 0 auto;
									display: -webkit-flex;
									display: -ms-flex;
									display: flex;
									flex-wrap: wrap!important;

								}

								#foot .inner .l tr td{
									width: 30%;
									height: 50px;
								}


								#foot .inner .l table{
									width: 90%!important;
									margin: 0 auto!important;
									padding: 10px!important;
								}

								#foot .inner .l td{
									padding: 10px!important ;
									font-size: 70%;
								}


								#foot .inner dl{
									width: 90%!important;
									padding: 10px!important;
									margin: 10px auto;
								}

								#foot .inner dl dt img{
									width: 40%!important;
								}

								.pagetop a img{
									width: 40%;
								}

								.section dl{
									width: 100%!important;
								}

								.section dd{
									width: 90%!important;
									margin: 0 auto;
								}

								.map,.map .clearfix{
									width: 100%;
									display: -webkit-flex;
									display: -ms-flex;
									display: flex;
									-webkit-flex-direction: column;
									-ms-flex-direction: column;
									flex-direction: column;
									-ms-align-items: center;
									align-items: center;
								}

								#gmap{
									width: 90%!important;
									height: 400px!important;
									margin: 0 auto!important;
								}

								.txt {
									width: 100%!important;
								}
								.txt dl{
									width: 90%!important;
									margin: 0 auto!important;
									float: none!important;

								}

								.txt dl dt{
									width: 70%!important;
								}

								.txt dl dt dd{
									width: 70%!important;
									margin: 0 auto;
								}

								.txt dl dt img{
									width: 50%;
								}

								/* .mistake div{
									display: -webkit-flex;
									display: -ms-flex;
									display: flex;
									-webkit-flex-direction: column;
									-ms-flex-direction: column;
									flex-direction: column;
									-ms-align-items: center;
									align-items: center;
								} */

								.mistake div dl dt {
									text-align: center;
									margin: 20px auto!important;
								}

								.mistake div dl dt img{
									width: 70%;
								}

								.fig{
									width: 100%;

								}

								.fig img{
									width: 90%;
								}

								.knowhow {
									width: 100%;
								}
								.knowhow dl{
									width: 100%;
								}

								.knowhow dl dt {
									width: 100%;
									text-align: center;
								}

								.knowhow dl dt img{
									width: 90%;
									margin: 0 auto;
								}

								.custom dl dt img{
									width: 90%;
								}

								.custom dt{
									text-align: center;
								}

								.custom dl dd {
									text-align: center;
								}

								.custom dl dd img{
									width: 90%;
								}

								.content-header{
									text-align: center;
								}

								.knowhow-wrapper{
									-webkit-flex-direction: column;
									-ms-flex-direction: column;
									flex-direction: column;
										font-size: 200%!important;
										font-family: serif!important;
								}

								#wrap #main .knowhow dd{
									font-size: 100%!important;
								}

								.section .clearfix{
									width: 90%;
									margin: 0 auto;
								}

								.tool-list{
									flex-wrap: wrap;
								}



							}