/* ----------------------------------------
	works.html
-------------------------------------------*/

.customer_voice a{
	color: var(--green);
}
.customer_voice a:hover{
	opacity: var(--hover);
}
.customer_list{
	text-align: left;
	padding-bottom: 8%;
}
.customer_list a{
	padding-left: 12px;
	background: url(../img/common/ic_arrow_green.svg) left center / 6px auto no-repeat;
}
.customer_voice ul li{
	position: relative;
	width: 100%;
	padding: 8%;
	margin-bottom: 8%;
	border-radius: 40px;
	background-color: #fff;
	border: 1px solid;
	border-color: var(--green);
}
.customer_voice li h4{
	margin-bottom: 8%;
	font-size: 36px;
	text-align: left;
	color: var(--green);
	padding-left: 86px;
	background: url(../img/works/ic_h4.jpg) left center / 70px auto no-repeat;
}
.customer_voice li .photo{
	padding-bottom: 4%;
	width: 100%;
	display: flex;
	column-gap: 12px;
	justify-content: space-between;
}
.customer_voice li img{
	border-radius: 8px;
}
.customer_voice li .outline{
	padding-bottom: 4%;
	border-top: 1px solid;
	border-color: var(--green);
}
.customer_voice li .outline dl{
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid;
	border-color: var(--green);
	text-align: left;
}
.customer_voice li .outline dt,
.customer_voice li .outline dd{
	padding: 4% 2%;
}
.customer_voice li .outline dt{
	width: 25%;
	background-color: rgba(var(--green-rgb),0.1);
}
.customer_voice li .outline dd{
	width: 75%;
}
.customer_voice .sec{
	text-align: justify;
}
.customer_voice .sec h5{
	padding: 12% 0 4%;
	font-size: 24px;
	letter-spacing: 0.01em;
	color: var(--green);
}
.customer_voice .sec h5{	/*横線*/
	display: flex;
	justify-content: flex-start;
}
.customer_voice .sec h5:before{
	border-top: 1px solid;
	content: "";
	width: 4%;
}
.customer_voice .sec h5:before {
	margin-right: 2%;
	margin-top: 24px;
}
.customer_voice .sec h6{
	padding-bottom: 2%;
	color: var(--brown);
}
.customer_voice .sec p{
	padding-bottom: 4%;
	padding-left: 0.5em;
	font-size: 16px;
}
.customer_voice .sec .sec__in{
	display: flex;
	justify-content: space-between;
	width: 100%;
	height: auto;
	padding-bottom: 4%;
}
.customer_voice .sec .sec__in .text_area{
	width: 56%;
}
.customer_voice .sec .sec__in .photo_area{
	width: 36%;
	padding-top: 8%;
}

@media screen and (max-width: 650px){
	
	.customer_list{
		padding-bottom: 12%;
		line-height: 2.4;
	}
	.customer_voice ul li{
		padding: 12% 8%;
		margin-bottom: 20%;
		border-radius: 20px;
	}
	.customer_voice li h4{
		margin-bottom: 12%;
		font-size: 20px;
		padding-left: 44px;
		background: url(../img/works/ic_h4.jpg) left center / 36px auto no-repeat;
	}
	.customer_voice li .photo{
		padding-bottom: 8%;
		gap: 0;
		flex-wrap: wrap;
	}
	.customer_voice li .photo div{
		width: 48%;
		margin: 0 auto;
		padding-bottom: 8px;
	}
	.customer_voice li img{
		border-radius: 4px;
	}
	.customer_voice li .outline{
		padding-bottom: 8%;
	}
	.customer_voice li .outline dl{
		flex-wrap: ;
		flex-direction: column;
		border: 1px solid;
		border-top: 0;
		border-color: var(--green);
		text-align: left;
	}
	.customer_voice li .outline dt,
	.customer_voice li .outline dd{
		width: 100%;
	}
	.customer_voice li .outline dt{
		padding: 2% 4%;
		background-color: rgba(var(--green-rgb),0.1);
	}
	.customer_voice li .outline dd{
		padding: 4%;
	}
	.customer_voice .sec h5{
		padding: 12% 0;
		font-size: 18px;
		line-height: 1.6;
	}
	.customer_voice .sec h5:before {
		margin-top: 14px;
		width: 8%;
	}
	.customer_voice .sec h6{
		padding-bottom: 8%;
		font-size: 16px;
	}
	.customer_voice .sec p{
		padding-bottom: 12%;
		padding-left: 0;
		font-size: 14px;
	}
	.customer_voice .sec .sec__in{
		flex-direction: column-reverse;
	}
	.customer_voice .sec .sec__in .text_area,
	.customer_voice .sec .sec__in .photo_area{
		width: 100%;
	}
}