@charset "utf-8";

.caption{
	margin: 100px 0 60px;
	max-width: 1180px;
	width: 100%;
	display: inline-block;
	text-align: center;
}

h2{
	margin: 0 30px 16px;
	font-size:  29px;
	color: #66660a;
	border-bottom: solid .5px #66660a;
	text-align: center;
}

.caption p{
	font-size: 16px;
	text-align: center;
}

h3{
	font-weight: 1;
	margin: 30px 0;
	font-size: 24px;
	text-align: center;
	color: #66660a;
}

.service{
	max-width: 1180px;
	margin: 0 auto;
	width: 100%;
}

.service_bg{
	background-color: #EEEEEE;
}

.service_text{
	display: inline-block;
	margin: 30px 30px 30px 0;
	width: 45%;
	height: 350px;
	clear: both;
}

.service_text p{
	font-size: 16px;
	line-height: 150%;
	text-align: left;
}

.service_img_left{
	height: 350px;
	max-width: 450px;
	width: 40%;
	display: inline-block;
	object-fit: cover;
	margin: 30px;
	float: left;
}

.service_img_right{
	height: 350px;
	max-width: 450px;
	width: 40%;
	display: inline-block;
	object-fit: cover;
	margin: 30px;
	float: right;
}

/*
------メディアクエリ設定(キャプション)--------*/
@media screen and (max-width:1180px){
	h2{
		font-size: calc(20px + ((1vw - 6.4px) * 1.666));
	}
	
	.caption p{
		font-size: calc(10px + ((1vw - 6.4px) * 1.111));
	}
}

/*
------メディアクエリ設定--------*/

@media screen and (max-width:640px){
	
	h2{
		font-size: 20px;
	}
	
	.caption p{
		font-size: 10px;
	}
	
	.service_text{
		max-width: 450px;
		width: 100%;
		height: 200px;
		margin: auto;
		display: block;
	}
	
	.service_img_left{
		float: none;
		margin: 0 auto;
		padding: 30px 0;
		display: block;
		height: auto;
		width: 100%;
	}

	.service_img_right{
		float: none;
		margin: 0 auto;
		padding: 30px 0;
		display: block;
		height: auto;
		width: 100%;
	}
	
	.service_text p{
	font-size: calc(.715vw + 10px);
}

	
}