/* ----------------------------------------
	about.html
-------------------------------------------*/

.about .head_visual img{
	object-position: right center;
}
.about .story{
	text-align: justify;
	padding-bottom: 12%;
}
.about .story h4{
	color: var(--green);
	font-weight: bold;
	padding-bottom: 1%;
}
.about .story .title{
	width: 100%;
	font-size: 28px;
	padding-bottom: 4%;
}
.about .story .text{
	width: 100%;
}
.about .story .text_area{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.about .story .text_area .text{
	width: calc(100% - 360px);
}
.about .story .text_area .photo{
	width: 320px;
}
.about .story .text_area .photo img{
	object-fit: cover;
	border-radius: 10px;
}

@media screen and (max-width: 960px){
	.about .head_visual img{
		object-position: 70% center;
	}
}
@media screen and (max-width: 768px){
	.about .story .text_area .text{
		width: 52%;
	}
	.about .story .text_area .photo{
		width: 44%;
	}
}
@media screen and (max-width: 650px){
	
	.about .story{
		padding-bottom: 28%;
	}
	.about .story h4{
		padding-bottom: 2%;
	}
	.about .story .title{
		font-size: 20px;
		padding-bottom: 8%;
	}
	.about .story .text_area{
		row-gap: 20px;
	}
	.about .story .text_area .text,
	.about .story .text_area .photo{
		width: 100%;
	}
}