@charset "UTF-8";

.lead_top{
	font-size: 28px;
	text-align: center;
	font-weight: bold;
	margin: 30px auto;
}

.lead_logo{
	margin: 30px auto;
	text-align: center;
}

.about_imgBox{
	margin: 20px auto;
}

body article #brand.content{
	padding: 0px 0 100px;
}

.brand_area{
	display: flex;
	margin: 40px auto;
	flex-wrap: wrap;
	justify-content: flex-start;
	background: #faf2e6;
	padding: 30px;
	box-shadow:0px 0px 6px 5px #eee7db inset;
}

	.brand_area li{
		display: flex;
		width: 48%;
		margin-bottom: 30px;
		align-items: center;
		justify-content: flex-start;
	}
	
	.brand_area li:last-child{
		margin-bottom: 0;
	}
	
	.brand_area li div{
		margin-right: 20px;
	}

#greeting{
	background: url(../img/bg_about_01.jpg) no-repeat top center;
	background-size: cover;
}

#greeting .content{
	text-align: center;
}

#greeting p{
	color: #222;
	margin-bottom: 30px;
}

#service{
	padding: 130px 0 0;
}


.service_area{
	margin: 40px auto 100px;
	display: flex;
	justify-content: space-between;
}

.service_area li{
	width: 24%;
	text-align: center;
}

	.service_area li .ttl{
		font-size: 18px;
		color: #38230b;
		font-weight: bold;
		margin: 20px auto;
		text-align: center;
	}
	
	.service_area li p{
		text-align: left;
	}

.about_service01{
	text-align: center;
	margin: 20px auto;
}

.service_details{
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
	background: #fff url(../img/bg_about02.png) no-repeat center center;
	margin: 30px auto;
	padding: 120px 0;
}

	.service_details .service_detailsBox{
		width: 48%;
	}
	
	.service_details .service_detailsBox > div{
		background: #c30d23;
		padding: 10px;
		font-size: 22px;
		color: #fff;
	}
	.service_details .service_detailsBox:nth-child(2) > div,
	.service_details .service_detailsBox:nth-child(3) > div{
		background: #33453a;
		padding: 10px;
		font-size: 22px;
		color: #fff;
	}
	
	.service_details .service_detailsBox p{
		padding: 10px;
	}

.medical_area{
	display: flex;
	margin: 30px auto;
	align-items: center;
	justify-content: center;
}

.medical_inner{
	margin-left: 20px;
}

.medical_ttl{
	font-size: 18px;
	font-weight: bold;
}

.medical_area .flex{
	display: flex;
	margin-top: 20px;
}

.medical_area .flex ul{
	margin: 0;
	padding-right: 20px;
}

body article #omotenashi.content{
	padding: 0;
}

.omotenashi_area{
	margin: 40px auto;
	background: #faf2e6;
	padding: 30px;
	box-shadow:0px 0px 6px 5px #eee7db inset;
}

.omotenashi_area li{
	display: flex;
	align-items: center;
	margin-bottom: 30px;
}

.omotenashi_txt{
	margin-left: 20px;
}

.omotenashi_txt .ttl{
	font-size: 18px;
	font-weight: bold;
	padding-bottom: 15px;
}

@media screen and (max-width: 768px) {
	article .content {
		padding: 40px 15px !important;
	}
	
	.lead_logo{
		width: 50%;
	}
	
	.lead_top{
		font-size: 20px;
	}
	
	#greeting .content{
		text-align: left;
	}
	
	.sp_brand{
		margin-bottom: 20px;
	}
	
	.sp_brand .ttl{
		font-size: 18px;
		color: #7f818b;
		font-weight: bold;
	}
	
	.brand_area{
		display: block;
		width: 100%;
	}
	
		.brand_area li{
			width: 100%;
			align-items: flex-start;
		}
		
		.brand_area li div{
			width: 32%;
		}
		
		.brand_area li p{
			width: 68%;
		}
		
		.brand_area li p br{
			display: none;
		}
	
	.service_area{
		display: block;
	}
		.service_area li{
			width: 100%;
			margin-bottom: 20px;
		}
	
		.service_area li img{
			width: 50%;
		}
	
	#whats .txt_c,
	#brand .txt_c,
	#service .txt_c,
	#consulting .txt_c,
	#medical .txt_c,
	#omotenashi .txt_c{
		text-align: left !important;
	}
	
	#whats br,
	#brand br,
	#consulting br,
	#medical br,
	#omotenashi br{
		display: none;
	}
	
	.service_details{
		padding: 0;
		display: block;
		background-size: contain;
	}
	
	.service_details .service_detailsBox{
		width: 100%;
		margin-bottom: 20px;
	}
	
	#medical .medical_area{
		display: block;
		text-align: center;
	}
	
	#medical .medical_area img{
		text-align: center;
		width: 50%;
	}
	
	#medical .medical_area .medical_inner{
		margin: 20px 0;
	}
	
	.medical_area .flex{
		display: block;
	}
	
	.omotenashi_area li{
		display: block;
	}
	
	.omotenashi_area li div,
	.omotenashi_area li div .ttl{
		text-align: center;
	}
	
	.omotenashi_area li div > img{
		width: 50%;
	}
	
	.omotenashi_area li div .ttl{
		padding: 15px 0;
	}
	
	.omotenashi_area li div.omotenashi_txt{
		text-align: left;
		margin: 0;
	}
	
	body article .content#risk{
		margin: 0;
	}
}