@charset "utf-8";

#main {
	margin: 0 0 20px;
}
#main h2 {
	font-size: 28px;
	font-weight: 700;
	margin: 40px 0 25px;
	color: #666666;
	border-left: 6px solid #41b053;
	padding: 0 0 2px 10px;
}
#main h2 br {
	display: none;
}
#main h2 span {
	display: inline-block;
	background-color: #41b053;
	color: #ffffff;
	border-radius: 100%;
	padding: 6px 8px;
	font-size: 22px;
}

.worksList {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 30px -40px 0 0;
}
.worksList .works {
	width: calc( 50% - 40px );
	margin: 0 40px 40px 0;
	padding: 15px;
}
.worksList .works h3 {
	font-size: 20px;
	font-weight: 700;
	color: #ffffff;
	padding: 8px;
}

.column {
	display: flex;
	padding: 10px 0 0;
}
.column .employer {
	width: 50%;
	padding-right: 20px;
	font-size: 14px;
	line-height: 1.4;
}
.column .employer dt img {
	width: 100%;
	border: 8px solid #ffffff;
}
.column .employer dd {
	text-indent: -1.0em;
	padding-left: 1.0em;
}
.column .employer dd strong {
	display: block;
	margin: 10px 0 0;
	color: #71481f;
}
.column .detail {
	width: 50%;
}
.column .detail h4 {
	font-size: 18px;
	font-weight: 700;
	color: #71481f;
	margin: 0 0 10px;
}

.trimmer { background-color: #dffae0; }
.trimmer h3 { background-color: #25b03c; }
.trimmer .detail h4,
.trimmer .column .employer dd i { color: #25b03c; }

.nurse { background-color: #ffebd4; }
.nurse h3 { background-color: #fa9200; }
.nurse .detail h4,
.nurse .column .employer dd i { color: #fa9200; }

.trainer { background-color: #ffe0e4; }
.trainer h3 { background-color: #f05267; }
.trainer .detail h4,
.trainer .column .employer dd i { color: #f05267; }

.animalKeeper { background-color: #d9efff; }
.animalKeeper h3 { background-color: #2886de; }
.animalKeeper .detail h4,
.animalKeeper .column .employer dd i { color: #2886de; }

@media screen and (max-width : 640px) {
	#main {
		margin: 0 0 50px;
	}
	#main h2 br {
		display: block;
	}
	.worksList {
		display: block;
		margin: 30px 0 0;
	}
	.worksList .works {
		width: 100%;
		margin: 0 0 20px;
	}
	.column {
		display: block;
		padding: 0;
	}
	.column .employer {
		display: flex;
		width: 100%;
	}
	.column .employer dt {
		width: 40%;
		padding-right: 10px;
		margin: 10px 0 0;
	}
	.column .employer dt img {
		border: 4px solid #ffffff;
	}
	.column .detail {
		margin: 10px 0 0;
		width: 100%;
	}
	.column .detail br {
		display: none;
	}
}