@charset "utf-8";
/* CSS Document */

.fb__business {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.item__business {
	width: calc(50% - 30px);
}

.img__business {
	width: 100%;
}

.img__business img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 10px;
}

.group__business--comment {
	text-align: center;
}

.group__business--comment h3 {
	font-size: 1.875rem;
}

.group__business--comment h4 {
	margin: 20px 0;
	font-size: 1.5rem;
}

.group__business--comment h3 + p {
	color: #65BA28;
}

.group__business--comment img {
	display: none;
}

.block__business--comment {
	text-align: left;
}

.block__business--comment p:nth-child(n+2) {
	margin-top: 1.0rem;
}

.fb__reverse {
	flex-direction: row-reverse;
}

/* 施工実績 */

.fb__works--architecture {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin-top: 50px;
}

a.item__works--architecture {
	display: inline-block;
	width: calc(100% / 3 - 20px);
}

a.item__works--architecture:hover {
	opacity: 0.7;
}

a.item__works--architecture img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 5px;
}

a.item__works--architecture p {
	padding: 0.313rem 0;
}


@media (max-width: 1280px) {

.img__business img {
	aspect-ratio: 1;
}

}



@media (max-width: 1024px) {

.item__business {
	width: calc(50% - 15px);
}

.img__business img {
	aspect-ratio: 9 / 16;
}

.group__business--comment h3 {
	font-size: 1.5rem;
}

.group__business--comment h4 {
	margin: 20px 0;
	font-size: 1.188rem;
}

a.item__works--architecture {
	width: calc(100% / 3 - 15px);
}

}



@media (max-width: 768px) {

.fb__business {
	flex-direction: column-reverse;
}

.item__business {
	width: 100%;
}

.img__business {
	display: none;
}

/*
.group__business--comment h4 {
	font-size: 1.125rem;
}

.group__business--comment h5 {
	margin: 20px 0;
	font-size: 1.125rem;
}
*/

.group__business--comment img {
	display: block;
	width: 100%;
	margin: 20px auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 5px;
}

.fb__works--architecture {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	width: 100%;
	margin-top: 30px;
}

a.item__works--architecture {
	width: calc(100% / 2 - 10px);
	margin: 5px;
}

a.item__works--architecture img {
	border-radius: 5px;
}

a.item__works--architecture p {
	font-size: 0.875rem;
}


}



@media (max-width: 640px) {

.group__business--comment img {
	width: 100%;
}

}