@charset "UTF-8";

/*compare
---------------------------------------------------------*/
.compare{
	display: flex;
	justify-content: space-between;
}
.compare > div{
	max-width: 393px;
	width: 32.3%;
	background-color: #f6f6f6;
	padding: 40px 2.5% 50px;
	box-sizing: border-box;
}
.compare > div dl{
	max-width: 333px;
	margin-left: auto;
	margin-right: auto;
}
.compare > div .tit{
	padding: 0.3em 0;
	margin-bottom: 1.2em;
	background-color: #b89668;
}
.compare > div:first-child .tit{
	background-color: #7ba95f;
}
.compare > div .txt small{
	font-size: 95%;
}
.compare > div .img{
	max-width: 278px;
	width: 84%;
	margin: 0 auto 1em;
	text-align: center;
}
.compare > div .merit_demerit dl{
	margin-top:2em;
}
.compare > div .merit_demerit dt{
	color: #89898f;
	line-height: 1em;
	padding-bottom: 0.6em;
	margin-bottom: 1.2em;
	border-bottom: 1px solid #ccc;
}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.compare > div{
	padding: 3% 2.5% 4%;
}
.compare > div .merit_demerit dl{
	margin-top: 1.5em;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.compare{
	display: block;;
}
.compare > div{
	max-width: 100%;
	width: 100%;
	padding: 6% 5% 8%;
	margin-top: 5%;
}
.compare > div:first-child{
	margin-top: 0;
}
.compare > div dl{
	max-width: 100%;
}
.compare > div .tit{
	font-size: 130%;
	padding: 0.3em 0;
	margin-bottom: 5%;
}
.compare > div .img{
	width: 80%;
	margin: 0 auto 5%;
}
.compare > div .merit_demerit dl{
	margin-top:6%;
}
.compare > div .merit_demerit dt{
	padding-bottom: 0.5em;
	margin-bottom: 1em;
}
}